mt-fe-group/yudao-dev
12
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

test #47

Merged
gtz217 merged 273 commits from test into master 2023-10-17 08:53:54 +08:00
Conversation 0 Commits 273 Files Changed 256 +1011 -879
19 changed files with 1011 additions and 879 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 98b3237c9a - Show all commits

4
.env.dev
View File

@ -12,9 +12,9 @@ ENV = 'development'
VUE_APP_TITLE = 产线监控系统 VUE_APP_TITLE = 产线监控系统
# 芋道管理系统/开发环境 # 芋道管理系统/开发环境
# VUE_APP_BASE_API = 'http://192.168.1.49:48080' VUE_APP_BASE_API = 'http://192.168.1.49:48080'
# VUE_APP_BASE_API = 'http://192.168.1.8:48080' # VUE_APP_BASE_API = 'http://192.168.1.8:48080'
VUE_APP_BASE_API = 'http://192.168.0.33:48080' # VUE_APP_BASE_API = 'http://192.168.0.33:48080'
# VUE_APP_BASE_API = 'http://192.168.1.188:48080' # VUE_APP_BASE_API = 'http://192.168.1.188:48080'
# 路由懒加载 # 路由懒加载

6
src/api/core/base/lineBindProductLog.js
View File

@ -35,11 +35,11 @@ export function getLineBindProductLog(id) {
} }
// 获得产线目前生产产品表 主要为更新分页 // 获得产线目前生产产品表 主要为更新分页
export function getLineBindProductLogPage(query) { export function getLineBindProductLogPage(data) {
return request({ return request({
url: '/base/line-bind-product-log/page', url: '/base/line-bind-product-log/page',
method: 'get', method: 'post',
params: query data
}) })
} }

BIN
src/assets/images/default-file-icon.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.6 KiB

12
src/components/DialogForm/index.vue
View File

@ -10,6 +10,8 @@
ref="form" ref="form"
:model="form" :model="form"
:label-width="`${labelWidth}px`" :label-width="`${labelWidth}px`"
:size="size"
:label-position="labelPosition"
v-loading="formLoading"> v-loading="formLoading">
<el-row :gutter="20" v-for="(row, rindex) in rows" :key="rindex"> <el-row :gutter="20" v-for="(row, rindex) in rows" :key="rindex">
<el-col v-for="col in row" :key="col.label" :span="24 / row.length"> <el-col v-for="col in row" :key="col.label" :span="24 / row.length">
@ -119,7 +121,15 @@ export default {
disabled: { disabled: {
type: Boolean, type: Boolean,
default: false, default: false,
} },
labelPosition: {
type: String,
default: 'right',
},
size: {
type: String,
default: '',
},
}, },
data() { data() {
return { return {

4
src/views/base/equipmentPlcConnect/components/BasicDrawer.vue
View File

@ -151,7 +151,7 @@ export default {
name: '', name: '',
plcParamName: '', plcParamName: '',
unit: '', unit: '',
collection: '', collection: 1,
minValue: '', minValue: '',
maxValue: '', maxValue: '',
defaultValue: '', defaultValue: '',
@ -370,7 +370,7 @@ export default {
name: '', name: '',
plcParamName: '', plcParamName: '',
unit: '', unit: '',
collection: '', collection: 1,
minValue: '', minValue: '',
maxValue: '', maxValue: '',
defaultValue: '', defaultValue: '',

294
src/views/core/base/equipment/components/AssetsUpload.vue Normal file
View File

@ -0,0 +1,294 @@
<!--
filename: AssetsUpload.vue
author: liubin
date: 2023-10-12 16:40:14
description: 上传资料/图片 组件
-->
<template>
<div class="assets-upload">
<section class="operations">
<el-button type="text" class="expand-btn" @click="expand = !expand">
<i class="el-icon-folder-opened" v-if="expand"></i>
<i class="el-icon-folder" v-else></i>
展开
</el-button>
<div class="preview-btn">
<i class="el-icon-view"></i>
预览
</div>
</section>
<section class="file-area">
<el-upload class="equipment-upload" drag action="uploadUrl" multiple>
<i class="el-icon-upload"></i>
<div class="el-upload__text">
<span>将文件拖到此处或</span>
<em>点击上传</em>
</div>
<div class="el-upload__tip" slot="tip">
<!-- 只能上传jpg/png文件，且不超过500kb -->
some tips....
</div>
</el-upload>
<!-- <div
class="file-list__item"
v-for="n in 9"
:key="n"
:style="{
display: n > 4 && !expand ? 'none' : 'block',
}"
:data-name="n"
:class="{ 'default-icon': !isPicMode }">
<i class="el-icon-delete"></i>
</div> -->
<div
class="file-list__item"
v-for="(file, index) in files"
:key="file.fileName"
:style="{
display: index > 3 && !expand ? 'none' : 'block',
background: isPicMode ? `url(${file.fileUrl}) no-repeat` : `url(${defaultBg}) no-repeat`,
backgroundSize: isPicMode ? '100% 100%' : '64px',
backgroundPosition: isPicMode ? '0% 0%' : 'center',
}"
:data-name="file.fileName">
<i class="el-icon-delete"></i>
</div>
</section>
</div>
</template>
<script>
import defaultBg from '../../../../../assets/images/default-file-icon.png';
export default {
name: 'AssetsUpload',
components: {},
props: {
type: {
type: String,
default: 'image',
},
dataSource: {
type: Array,
default: () => [],
},
equipmentId: {
type: String,
default: '',
},
isPicMode: {
type: Boolean,
default: false,
},
},
emits: ['update-filelist'],
data() {
return {
defaultBg,
expand: false,
fileList: [],
files: [
// 服务器返回的结构
{
fileName: 'sf.docs',
fileType: 'asset',
fileUrl:
'https://hbimg.b0.upaiyun.com/cc7475787bd08ed926b68eaf53fa1f2c5473259115e3c-gJdObd_fw658',
},
{
fileName: 'sddf.docs',
fileType: 'asset',
fileUrl: 'https://img0.sc115.com/wm/xqx/pic1/1501xofo4ssolji.jpg',
},
{
fileName: 'jjj.docs',
fileType: 'asset',
fileUrl:
'https://www.mms591.com/www.mms591.com-photo/2013081823/1-130QR34544.jpg',
},
{
fileName: 'asdfasdf.docs',
fileType: 'asset',
fileUrl:
'https://hbimg.b0.upaiyun.com/8f6bced5f2e38d3a021b2c48d5a98dfb6317e3e12c6a0-QmhJ5v_fw658',
},
{
fileName: 'asdkj.docs',
fileType: 'asset',
fileUrl:
'https://www.mms591.com/www.mms591.com-photo/2013013021/1-130130212034.jpg',
},
{
fileName: 'lkasjdf.docs',
fileType: 'asset',
fileUrl:
'https://www.mms591.com/www.mms591.com-photo/2013072122/1-130H1223057.jpg',
},
{
fileName: 'asdf.docs',
fileType: 'asset',
fileUrl:
'https://img.1ppt.com/uploads/allimg/1212/1-1212101ZH5A2.jpg',
},
{
fileName: 'afdffff.docs',
fileType: 'asset',
fileUrl:
'https://www.mms591.com/www.mms591.com-photo/2013051721/1-13051H11945.jpg',
},
],
};
},
computed: {},
mounted() {
console.log('this.ispicmocde', this.isPicMode);
},
methods: {
handleUpload() {
switch (this.type) {
case 'image':
break;
case 'asset':
break;
}
},
updateFileList(appendFilelist) {
// Array
this.$emit('update-filelist', this.appendFilelist);
},
},
};
</script>
<style scoped lang="scss">
.assets-upload {
position: relative;
}
.operations {
position: absolute;
top: -36px;
right: 0;
display: flex;
align-items: center;
}
.expand-btn,
.preview-btn {
font-size: 14px;
line-height: 1.2;
display: inline-block;
padding-left: 20px;
cursor: pointer;
z-index: 1000;
}
.expand-btn {
margin-right: 12px;
}
.preview-btn {
color: #ccc;
}
.expand-btn,
.preview-btn:hover,
.preview-btn.active {
// color: #0042d0;
color: #0b58ff;
}
:deep(.equipment-upload) {
background: #ccc4;
.el-upload-dragger {
width: 188px;
height: 128px;
}
.el-icon-upload {
margin: 12px 0;
font-size: 48px;
}
.el-upload__text {
font-size: 12px;
line-height: 2px;
display: flex;
flex-direction: column;
em {
margin-top: 12px;
}
}
.el-upload__tip {
margin: 0 0 12px;
transform: translateY(-12px);
user-select: none;
}
}
.file-list {
padding: 12px;
border: 1px solid #ccc;
}
// custom
.file-area {
display: grid;
grid-template-columns: repeat(5, 188px);
grid-auto-rows: 128px;
gap: 24px 18px;
place-content: center;
}
.file-list__item {
background-color: #fff;
border: 1px dashed #d9d9d9;
border-radius: 6px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
text-align: center;
cursor: pointer;
position: relative;
// overflow: hidden;
&:hover {
.el-icon-delete {
display: block;
}
}
.el-icon-delete {
color: #ccc;
position: absolute;
top: 8px;
right: 8px;
display: none;
&:hover {
color: rgb(210, 41, 41);
}
}
}
.file-list__item:hover {
border-color: #0b58ff;
}
.file-list__item::after {
content: attr(data-name);
position: absolute;
left: 0;
bottom: -16px;
font-size: 14px;
line-height: 1;
}
.default-icon {
background: url(../../../../../assets/images/default-file-icon.png) no-repeat;
background-position: center;
background-size: 64px;
}
</style>

313
src/views/core/base/equipment/components/DialogForm.vue Normal file
View File

@ -0,0 +1,313 @@
<!--
filename: dialogForm.vue
author: liubin
date: 2023-08-15 10:32:36
description: 弹窗的表单组件
-->
<template>
<el-form
ref="form"
:model="form"
:label-width="`${labelWidth}px`"
:size="size"
:label-position="labelPosition"
v-loading="formLoading">
<el-row :gutter="20" v-for="(row, rindex) in rows" :key="rindex">
<el-col v-for="col in row" :key="col.label" :span="24 / row.length">
<el-form-item :label="col.label" :prop="col.prop" :rules="col.rules">
<el-input
v-if="col.input"
v-model="form[col.prop]"
@change="$emit('update', form)"
:placeholder="`请输入${col.label}`"
v-bind="col.bind" />
<el-input
v-if="col.textarea"
type="textarea"
v-model="form[col.prop]"
@change="$emit('update', form)"
:placeholder="`请输入${col.label}`"
v-bind="col.bind" />
<el-select
v-if="col.select"
v-model="form[col.prop]"
:placeholder="`请选择${col.label}`"
@change="$emit('update', form)"
v-bind="col.bind">
<el-option
v-for="opt in optionListOf[col.prop]"
:key="opt.value"
:label="opt.label"
:value="opt.value" />
</el-select>
<el-date-picker
v-if="col.datetime"
v-model="form[col.prop]"
type="datetime"
:placeholder="`请选择${col.label}`"
value-format="timestamp"
v-bind="col.bind"></el-date-picker>
<el-upload
class="upload-in-dialog"
v-if="col.upload"
:file-list="uploadedFileList"
:action="col.url"
:on-success="handleUploadSuccess"
v-bind="col.bind">
<el-button
size="small"
type="primary"
:disabled="col.bind?.disabled || false">
点击上传
</el-button>
<div class="el-upload__tip" slot="tip" v-if="col.uploadTips">
{{ col.uploadTips || '只能上传jpg/png文件，大小不超过2MB' }}
</div>
</el-upload>
<el-switch
v-if="col.switch"
v-model="form[col.prop]"
active-color="#0b58ff"
inactive-color="#e1e1e1"
v-bind="col.bind"></el-switch>
<component
v-if="col.subcomponent"
:key="col.key"
:is="col.subcomponent"
v-bind="col.bind"
:inlineStyle="col.style"></component>
</el-form-item>
</el-col>
</el-row>
</el-form>
</template>
<script>
/**
* 找到最长的label
* @param {*} options
*/
function findMaxLabelWidth(rows) {
let max = 0;
rows.forEach((row) => {
row.forEach((opt) => {
// debugger;
if (!opt.label) return 0;
if (opt.label.length > max) {
max = opt.label.length;
}
});
});
return max;
}
export default {
name: 'DialogForm',
model: {
prop: 'dataForm',
event: 'update',
},
emits: ['update'],
components: {},
props: {
rows: {
type: Array,
default: () => [],
},
dataForm: {
type: Object,
default: () => ({}),
},
disabled: {
type: Boolean,
default: false,
},
labelPosition: {
type: String,
default: 'right',
},
size: {
type: String,
default: '',
},
},
data() {
return {
formLoading: true,
optionListOf: {},
uploadedFileList: [],
dataLoaded: false,
};
},
computed: {
labelWidth() {
let max = findMaxLabelWidth(this.rows);
// 每个汉字占20px
return max * 20;
// return max * 20 + 'px';
},
form: {
get() {
// if (this.dataLoaded) return this.dataForm;
// else return {}
return this.dataForm;
},
set(val) {
console.log('set form', val);
},
},
},
watch: {
rows: {
handler() {
console.log('watch triggered!');
this.$nextTick(() => {
this.handleOptions('watch');
});
},
deep: true,
immediate: false,
},
},
mounted() {
// 处理 options
this.handleOptions();
},
methods: {
/** 模拟透传 ref */
validate(cb) {
return this.$refs.form.validate(cb);
},
resetFields(args) {
return this.$refs.form.resetFields(args);
},
// getCode
async getCode(url) {
const response = await this.$axios(url);
return response.data;
},
async handleOptions(trigger = 'monuted') {
console.log('[dialogForm:handleOptions]');
const promiseList = [];
this.rows.forEach((cols) => {
cols.forEach((opt) => {
if (opt.value && !this.form[opt.prop]) {
// 默认值
this.form[opt.prop] = opt.value;
}
if (opt.options) {
this.$set(this.optionListOf, opt.prop, opt.options);
} else if (opt.url) {
// 如果有 depends，则暂时先不获取，注册一个watcher
if (opt.depends) {
console.log('[handleOptions] setting watch');
this.$watch(
() => this.form[opt.depends],
(id) => {
console.log('<', opt.depends, '>', 'changed', id);
if (id == null) return;
// 清空原有选项
this.form[opt.prop] = null;
// 获取新的选项
this.$axios({
url: `${opt.url}?id=${id}`,
}).then((res) => {
this.$set(
this.optionListOf,
opt.prop,
res.data.map((item) => ({
label: item[opt.labelKey ?? 'name'],
value: item[opt.valueKey ?? 'id'],
}))
);
});
},
{
immediate: true,
}
);
return;
}
// 如果是下拉框，或者新增模式下的输入框，才去请求
if (opt.select || (opt.input && !this.form?.id)) {
promiseList.push(async () => {
const response = await this.$axios(opt.url, {
method: opt.method ?? 'get',
});
console.log('[dialogForm:handleOptions:response]', response);
if (opt.select) {
// 处理下拉框选项
const list =
'list' in response.data
? response.data.list
: response.data;
this.$set(
this.optionListOf,
opt.prop,
list.map((item) => ({
label: item[opt.labelKey ?? 'name'],
value: item[opt.valueKey ?? 'id'],
}))
);
} else if (opt.input) {
console.log('setting code: ', response.data);
// 处理输入框数据
this.form[opt.prop] = response.data;
}
});
}
}
});
});
console.log('[dialogForm:handleOptions] done!');
// 如果是 watch 触发的，不需要执行进一步的请求
if (trigger == 'watch') {
this.formLoading = false;
return;
}
try {
await Promise.all(promiseList.map((fn) => fn()));
this.formLoading = false;
this.dataLoaded = true;
// console.log("[dialogForm:handleOptions:optionListOf]", this.optionListOf)
} catch (error) {
console.log('[dialogForm:handleOptions:error]', error);
this.formLoading = false;
}
if (!promiseList.length) this.formLoading = false;
},
// 上传成功的特殊处理
beforeUpload() {},
// 上传前的验证规则可通过 bind 属性传入
handleUploadSuccess(response, file, fileList) {
console.log(
'[dialogForm:handleUploadSuccess]',
response,
file,
fileList,
this.form
);
// 保存原始文件名
if ('fileNames' in this.form) this.form.fileNames.push(file.name);
// 保存完整地址
if ('fileUrls' in this.form) this.form.fileUrls.push(response.data);
this.$modal.msgSuccess('上传成功');
},
getFileName(fileUrl) {
return fileUrl.split('/').pop();
},
},
};
</script>
<style scoped lang="scss">
.el-date-editor,
.el-select {
width: 100%;
}
</style>

106
src/views/core/base/equipment/components/EquipmentDrawer.vue
View File

@ -35,6 +35,7 @@
key="drawer-dialog-form" key="drawer-dialog-form"
v-if="showForm" v-if="showForm"
ref="form" ref="form"
label-position="top"
:dataForm="form" :dataForm="form"
:rows="formRows" /> :rows="formRows" />
</div> </div>
@ -43,9 +44,11 @@
<base-table <base-table
v-loading="attrListLoading" v-loading="attrListLoading"
:table-props="section.props" :table-props="section.props"
:page="section.pageNo || 1" :page="attrQuery?.params.pageNo || 1"
:limit="section.pageSize || 10" :limit="attrQuery?.params.pageSize || 10"
:table-data="list" :table-data="list"
:add-button-show="mode.includes('detail') ? null : '添加属性'"
@emitButtonClick="handleAddAttr"
@emitFun="handleEmitFun"> @emitFun="handleEmitFun">
<method-btn <method-btn
v-if="section.tableBtn" v-if="section.tableBtn"
@ -54,27 +57,31 @@
:method-list="tableBtn" :method-list="tableBtn"
@clickBtn="handleTableBtnClick" /> @clickBtn="handleTableBtnClick" />
</base-table> </base-table>
<!-- 分页组件 -->
<pagination
v-show="total > 0"
:total="total"
:page.sync="attrQuery.params.pageNo"
:limit.sync="attrQuery.params.pageSize"
@pagination="getAttrList" />
</div> </div>
</section> </section>
</div> </div>
<div class="drawer-body__footer"> <div class="drawer-body__footer">
<el-button style="margin-right: 10px" @click="handleCancel"> <el-button style="" @click="handleCancel">取消</el-button>
返回
</el-button>
<el-button v-if="mode == 'detail'" type="primary" @click="toggleEdit"> <el-button v-if="mode == 'detail'" type="primary" @click="toggleEdit">
编辑 编辑
</el-button> </el-button>
<span v-else> <el-button v-else type="primary" @click="handleCancel">确定</el-button>
<el-button type="primary" @click="handleSave">保存</el-button> <!-- sections的第二项必须是 属性列表 -->
<!-- sections的第二项必须是 属性列表 --> <!-- <el-button
<el-button
v-if="sections[1].allowAdd" v-if="sections[1].allowAdd"
type="primary" type="primary"
@click="handleAddAttr"> @click="handleAddAttr">
添加属性 添加属性
</el-button> </el-button> -->
</span>
</div> </div>
</div> </div>
@ -99,7 +106,7 @@
</template> </template>
<script> <script>
import DialogForm from '@/components/DialogForm'; import DialogForm from './DialogForm';
const SmallTitle = { const SmallTitle = {
name: 'SmallTitle', name: 'SmallTitle',
@ -161,7 +168,12 @@ export default {
}, },
], ],
], ],
attrQuery: null, // 属性列表的请求 attrQuery: {
params: {
pageNo: 1,
pageSize: 10,
},
}, // 属性列表的请求
infoQuery: null, // 基本信息的请求 infoQuery: null, // 基本信息的请求
attrFormSubmitting: false, attrFormSubmitting: false,
attrListLoading: false, attrListLoading: false,
@ -175,15 +187,19 @@ export default {
// 重置图片的位置 // 重置图片的位置
return { return {
...col, ...col,
bind: {
...col.bind
},
style: { style: {
left: 0, left: 0,
right: 'unset' right: 'unset',
} },
} };
} }
return { return {
...col, ...col,
bind: { bind: {
...col.bind,
// 详情 模式下，禁用各种输入 // 详情 模式下，禁用各种输入
disabled: this.mode == 'detail', disabled: this.mode == 'detail',
}, },
@ -210,7 +226,6 @@ export default {
this.form = data; this.form = data;
this.showForm = true; this.showForm = true;
this.infoQuery = query; this.infoQuery = query;
console.log('setting form: ', this.form, data);
} else if (section.key == 'attrs') { } else if (section.key == 'attrs') {
this.attrQuery = query; this.attrQuery = query;
this.list = data.list; this.list = data.list;
@ -331,33 +346,44 @@ export default {
}, },
// 提交属性表 // 提交属性表
async submitAttrForm() { submitAttrForm() {
this.$refs['attrForm'].validate((valid) => { this.$refs['attrForm'].validate(async (valid) => {
if (!valid) { if (!valid) {
return; return;
} }
});
console.log('this.attrform', this.attrForm);
const isEdit = this.attrForm.id != null;
this.attrFormSubmitting = true;
const res = await this.$axios({
url: isEdit ? this.sections[1].urlUpdate : this.sections[1].urlCreate,
method: isEdit ? 'put' : 'post',
data: this.attrForm,
});
if (res.code == 0) { try {
this.closeAttrForm(); const isEdit = this.attrForm.id != null;
this.$message({ this.attrFormSubmitting = true;
message: `${isEdit ? '更新' : '创建'}成功`, const res = await this.$axios({
type: 'success', url: isEdit
duration: 1500, ? this.sections[1].urlUpdate
onClose: () => { : this.sections[1].urlCreate,
this.getAttrList(); method: isEdit ? 'put' : 'post',
}, data: this.attrForm,
}); });
}
this.attrFormSubmitting = false; if (res.code == 0) {
this.closeAttrForm();
this.$message({
message: `${isEdit ? '更新' : '创建'}成功`,
type: 'success',
duration: 1500,
onClose: () => {
this.getAttrList();
},
});
}
this.attrFormSubmitting = false;
} catch (err) {
this.$message({
message: err,
type: 'error',
duration: 1500,
});
this.attrFormSubmitting = false;
}
});
}, },
closeAttrForm() { closeAttrForm() {

184
src/views/core/base/equipment/index.vue
View File

@ -36,13 +36,16 @@
:dialogVisible="open" :dialogVisible="open"
@close="cancel" @close="cancel"
@cancel="cancel" @cancel="cancel"
width="60%"
@confirm="submitForm"> @confirm="submitForm">
<DialogForm <DialogForm
v-if="open" v-if="open"
key="index-dialog-form" key="index-dialog-form"
ref="form" ref="form"
label-position="top"
size="small"
:dataForm="form" :dataForm="form"
:rows="rows" /> :rows="computedRows" />
</base-dialog> </base-dialog>
<!-- 设备 详情 - 编辑 --> <!-- 设备 详情 - 编辑 -->
@ -55,7 +58,7 @@
{ {
name: '基本信息', name: '基本信息',
key: 'base', key: 'base',
rows: rows, rows: computedRows,
url: '/base/equipment/get', url: '/base/equipment/get',
urlUpdate: '/base/equipment/update', urlUpdate: '/base/equipment/update',
urlCreate: '/base/equipment/create', urlCreate: '/base/equipment/create',
@ -93,8 +96,8 @@
}, },
]" ]"
@refreshDataList="getList" @refreshDataList="getList"
@cancel="editVisible = false" @cancel="cancelEdit"
@destroy="editVisible = false" /> @destroy="cancelEdit" />
</div> </div>
</template> </template>
@ -115,6 +118,7 @@ import {
exportEquipmentExcel, exportEquipmentExcel,
} from '@/api/base/equipment'; } from '@/api/base/equipment';
import Editor from '@/components/Editor'; import Editor from '@/components/Editor';
import AssetsUpload from './components/AssetsUpload.vue';
export default { export default {
name: 'Equipment', name: 'Equipment',
@ -155,7 +159,7 @@ export default {
filter: (val) => moment(val).format('yyyy-MM-DD HH:mm:ss'), filter: (val) => moment(val).format('yyyy-MM-DD HH:mm:ss'),
}, },
{ prop: 'name', label: '设备名称' }, { prop: 'name', label: '设备名称' },
{ width: 256, prop: 'code', label: '检测编码' }, { width: 256, prop: 'code', label: '设备编码' },
{ prop: 'equipmentType', label: '设备类型' }, { prop: 'equipmentType', label: '设备类型' },
{ prop: 'enName', label: '英文名称' }, { prop: 'enName', label: '英文名称' },
{ prop: 'abbr', label: '缩写' }, { prop: 'abbr', label: '缩写' },
@ -239,8 +243,6 @@ export default {
prop: 'code', prop: 'code',
url: '/base/equipment/getCode', url: '/base/equipment/getCode',
}, },
],
[
{ {
input: true, input: true,
label: '英文名称', label: '英文名称',
@ -250,6 +252,8 @@ export default {
// disabled: true, // some condition, like detail mode... // disabled: true, // some condition, like detail mode...
// } // }
}, },
],
[
{ {
input: true, input: true,
label: '缩写', label: '缩写',
@ -259,13 +263,15 @@ export default {
// disabled: true, // some condition, like detail mode... // disabled: true, // some condition, like detail mode...
// } // }
}, },
],
[
{ {
select: true, select: true,
label: '设备类型', label: '设备类型',
prop: 'equipmentTypeId', prop: 'equipmentTypeId',
url: '/base/equipment-type/page?pageNo=1&pageSize=100', url: '/base/equipment-type/page?pageNo=1&pageSize=100',
bind: {
filterable: true,
},
}, },
// { // {
// select: true, // select: true,
@ -286,8 +292,6 @@ export default {
label: '进厂日期', label: '进厂日期',
prop: 'enterTime', prop: 'enterTime',
}, },
],
[
{ {
input: true, input: true,
prop: 'tvalue', prop: 'tvalue',
@ -302,11 +306,14 @@ export default {
}, },
], ],
}, },
],
[
{ {
input: true, input: true,
label: '产品加工时间', label: '产品加工时间（s）',
prop: 'processingTime', prop: 'processingTime',
rules: [ rules: [
{ required: true, message: '不能为空', trigger: 'blur' },
{ {
type: 'number', type: 'number',
message: '请输入正确的数字值', message: '请输入正确的数字值',
@ -315,8 +322,7 @@ export default {
}, },
], ],
}, },
],
[
{ {
input: true, input: true,
label: '制造商', label: '制造商',
@ -337,40 +343,79 @@ export default {
prop: 'description', prop: 'description',
}, },
], ],
[ // [
{ // {
upload: true, // assetUpload: true,
label: '上传资料', // label: '上传资料',
prop: 'uploadFiles', // fieldName: 'assets',
url: process.env.VUE_APP_BASE_API + '/admin-api/infra/file/upload', // 请求地址 // subcomponent: AssetsUpload
bind: { // },
headers: { Authorization: 'Bearer ' + getAccessToken() }, // ],
'show-file-list': false, // [
}, // {
}, // assetUpload: true,
], // label: '上传图片',
[ // fieldName: 'images',
{ // subcomponent: AssetsUpload
diy: true, // },
key: 'eq-assets', // ],
label: '设备资料', // [
prop: 'fileNames', // {
subcomponent: EquipmentAssets, // upload: true,
}, // label: '上传资料',
], // prop: 'uploadFiles',
[ // url: process.env.VUE_APP_BASE_API + '/admin-api/infra/file/upload', // 请求地址
{ // uploadFnName: 'assetsUpload', // 上传方法名
diy: true, // bind: {
key: 'eq-pics', // headers: { Authorization: 'Bearer ' + getAccessToken() },
label: '设备图片', // 'show-file-list': false,
prop: 'fileUrls', // },
subcomponent: EquipmentPics, // },
pictures: async () => { // {
// some async request // diy: true,
return []; // key: 'eq-assets',
}, // label: '设备资料',
}, // prop: 'fileNames',
], // subcomponent: EquipmentAssets,
// },
// ],
// [
// {
// upload: true,
// label: '上传图片',
// prop: 'uploadImages',
// url: process.env.VUE_APP_BASE_API + '/admin-api/infra/file/upload', // 请求地址
// uploadFnName: 'imagesUpload', // 上传方法名
// bind: {
// headers: { Authorization: 'Bearer ' + getAccessToken() },
// 'show-file-list': false,
// },
// },
// {
// diy: true,
// key: 'eq-pics',
// label: '设备图片',
// prop: 'fileUrls',
// subcomponent: EquipmentPics,
// pictures: async () => {
// // some async request
// return [];
// },
// },
// ],
// [
// {
// diy: true,
// key: 'eq-pics',
// label: '设备图片',
// prop: 'fileUrls',
// subcomponent: EquipmentPics,
// pictures: async () => {
// // some async request
// return [];
// },
// },
// ],
], ],
editVisible: false, editVisible: false,
editMode: 'edit', // 'edit', 'detail' editMode: 'edit', // 'edit', 'detail'
@ -399,11 +444,45 @@ export default {
form: { form: {
id: null, id: null,
}, },
showUploadComponents: false, // 是否显示上传组件
}; };
}, },
created() { created() {
this.getList(); this.getList();
}, },
computed: {
computedRows() {
return this.showUploadComponents
? [
...this.rows,
[
{
assetUpload: true,
key: 'eq-assets', // 用于区分不同的上传组件
label: '上传资料',
fieldName: 'assets',
subcomponent: AssetsUpload,
bind: {
'is-pic-mode': false,
},
},
],
[
{
assetUpload: true,
key: 'eq-pics', // 用于区分不同的上传组件
label: '上传图片',
fieldName: 'images',
subcomponent: AssetsUpload,
bind: {
'is-pic-mode': true,
},
},
],
]
: this.rows;
},
},
methods: { methods: {
/** 查询列表 */ /** 查询列表 */
getList() { getList() {
@ -420,6 +499,10 @@ export default {
this.open = false; this.open = false;
this.reset(); this.reset();
}, },
cancelEdit() {
this.showUploadComponents = false;
this.editVisible = false;
},
/** 表单重置 */ /** 表单重置 */
reset() { reset() {
this.form = { this.form = {
@ -445,11 +528,13 @@ export default {
handleAdd() { handleAdd() {
this.reset(); this.reset();
this.open = true; this.open = true;
this.showUploadComponents = false;
this.title = '添加设备'; this.title = '添加设备';
}, },
/** 修改按钮操作 */ /** 修改按钮操作 */
handleUpdate(row) { handleUpdate(row) {
this.reset(); this.reset();
this.showUploadComponents = true;
const id = row.id; const id = row.id;
getEquipment(id).then((response) => { getEquipment(id).then((response) => {
this.form = response.data; this.form = response.data;
@ -516,6 +601,7 @@ export default {
viewDetail(id) { viewDetail(id) {
this.reset(); this.reset();
this.editMode = 'detail'; this.editMode = 'detail';
this.showUploadComponents = true;
this.form.id = id; this.form.id = id;
this.editVisible = true; this.editVisible = true;
this.$nextTick(() => { this.$nextTick(() => {
@ -524,11 +610,11 @@ export default {
}, },
// overwrite basicPageMixin 里的 处理表格按钮 方法 // overwrite basicPageMixin 里的 处理表格按钮 方法
handleTableBtnClick({ data, type }) { handleTableBtnClick({ data, type }) {
console.log('[handleTableBtnClick]', data, type);
switch (type) { switch (type) {
case 'edit': case 'edit':
this.reset(); this.reset();
this.editMode = 'edit'; this.editMode = 'edit';
this.showUploadComponents = true;
this.form.id = data.id; this.form.id = data.id;
this.editVisible = true; this.editVisible = true;
this.$nextTick(() => { this.$nextTick(() => {

24
src/views/core/base/equipmentType/index.vue
View File

@ -38,6 +38,21 @@
@cancel="cancel" @cancel="cancel"
@confirm="submitForm"> @confirm="submitForm">
<DialogForm v-if="open" ref="form" :dataForm="form" :rows="rows" /> <DialogForm v-if="open" ref="form" :dataForm="form" :rows="rows" />
<div style="padding: 12px; background: #ccc">
<h3>文件列表</h3>
<hr />
<ul>
<li v-for="item in form.fileUrls" :key="item">
{{ JSON.stringify(item) }}
</li>
</ul>
<hr />
<ul>
<li v-for="item in form.fileNames" :key="item">
{{ JSON.stringify(item) }}
</li>
</ul>
</div>
</base-dialog> </base-dialog>
</div> </div>
</template> </template>
@ -86,9 +101,9 @@ export default {
width: 180, width: 180,
filter: (val) => moment(val).format('yyyy-MM-DD HH:mm:ss'), filter: (val) => moment(val).format('yyyy-MM-DD HH:mm:ss'),
}, },
{ prop: 'name', label: '设备类型名称', }, { prop: 'name', label: '设备类型名称' },
{ prop: 'code', label: '检测类型编码', }, { prop: 'code', label: '检测类型编码' },
{ prop: 'remark', label: '备注', }, { prop: 'remark', label: '备注' },
], ],
searchBarFormConfig: [ searchBarFormConfig: [
{ {
@ -236,6 +251,7 @@ export default {
const id = row.id; const id = row.id;
getEquipmentType(id).then((response) => { getEquipmentType(id).then((response) => {
this.form = response.data; this.form = response.data;
debugger;
this.open = true; this.open = true;
this.title = '修改设备类型'; this.title = '修改设备类型';
}); });
@ -267,7 +283,7 @@ export default {
handleDelete(row) { handleDelete(row) {
const id = row.id; const id = row.id;
this.$modal this.$modal
.confirm('是否确认删除设备类型编号为"' + id + '"的数据项?') .confirm('是否确认删除设备类型"' + row.name + '"?')
.then(function () { .then(function () {
return deleteEquipmentType(id); return deleteEquipmentType(id);
}) })

5
src/views/core/base/lineBindProductLog/index.vue
View File

@ -86,7 +86,8 @@ export default {
rangeSeparator: '-', rangeSeparator: '-',
startPlaceholder: '开始时间', startPlaceholder: '开始时间',
endPlaceholder: '结束时间', endPlaceholder: '结束时间',
param: 'createTime', param: 'startTime',
valueFormat: 'timestamp'
}, },
{ {
type: 'button', type: 'button',
@ -126,7 +127,7 @@ export default {
this.listQuery.pageSize = 10; this.listQuery.pageSize = 10;
this.listQuery.productionLineId = val.productionLineId; this.listQuery.productionLineId = val.productionLineId;
this.listQuery.productId = val.productId; this.listQuery.productId = val.productId;
this.listQuery.createTime = val.createTime; this.listQuery.startTime = val.startTime;
this.getDataList(); this.getDataList();
break; break;
case 'reset': case 'reset':

77
src/views/core/base/product/add-or-updata.vue
View File

@ -43,7 +43,7 @@
<el-form-item label="产品类型" prop="typeDictValue"> <el-form-item label="产品类型" prop="typeDictValue">
<el-select <el-select
v-model="dataForm.typeDictValue" v-model="dataForm.typeDictValue"
style="width: 100%" style="width: 100%"
:disabled="isdetail" :disabled="isdetail"
placeholder="请选择产品类型"> placeholder="请选择产品类型">
<el-option <el-option
@ -58,7 +58,7 @@
<el-form-item label="单位" prop="unitDictValue"> <el-form-item label="单位" prop="unitDictValue">
<el-select <el-select
v-model="dataForm.unitDictValue" v-model="dataForm.unitDictValue"
style="width: 100%" style="width: 100%"
:disabled="isdetail" :disabled="isdetail"
placeholder="请选择单位"> placeholder="请选择单位">
<el-option <el-option
@ -83,8 +83,8 @@
<el-form-item label="单位平方数" prop="area"> <el-form-item label="单位平方数" prop="area">
<el-input <el-input
:disabled="isdetail" :disabled="isdetail"
v-model="dataForm.area" v-model="dataForm.area"
placeholder="请输入单位平方数" /> placeholder="请输入单位平方数" />
</el-form-item> </el-form-item>
</el-col> </el-col>
</el-row> </el-row>
@ -111,6 +111,8 @@
:table-props="tableProps" :table-props="tableProps"
:page="listQuery.pageNo" :page="listQuery.pageNo"
:limit="listQuery.pageSize" :limit="listQuery.pageSize"
:add-button-show="isdetail ? null : '添加属性'"
@emitButtonClick="addNew()"
:table-data="productAttributeList"> :table-data="productAttributeList">
<method-btn <method-btn
v-if="!isdetail" v-if="!isdetail"
@ -123,15 +125,15 @@
<pagination <pagination
v-show="listQuery.total > 0" v-show="listQuery.total > 0"
:total="listQuery.total" :total="listQuery.total"
:page.sync="listQuery.current" :page.sync="listQuery.pageNo"
:limit.sync="listQuery.size" :limit.sync="listQuery.pageSize"
:page-sizes="[5, 10, 15]" :page-sizes="[5, 10, 15]"
@pagination="getList" /> @pagination="getList" />
</div> </div>
</div> </div>
</div> </div>
<div style="position: absolute; bottom: 24px; right: 24px"> <!-- <div style="position: absolute; bottom: 24px; right: 24px">
<el-button style="margin-right: 10px" @click="goback()">返回</el-button> <el-button style="margin-right: 10px" @click="goback()">返回</el-button>
<el-button v-if="isdetail" type="primary" @click="goEdit()"> <el-button v-if="isdetail" type="primary" @click="goEdit()">
编辑 编辑
@ -145,6 +147,14 @@
添加属性 添加属性
</el-button> </el-button>
</span> </span>
</div> -->
<div class="drawer-body__footer">
<el-button style="" @click="goback()">取消</el-button>
<el-button v-if="isdetail" type="primary" @click="goEdit()">
编辑
</el-button>
<el-button v-else type="primary" @click="dataFormSubmit()">确定</el-button>
</div> </div>
<product-attr-add <product-attr-add
@ -250,12 +260,12 @@ export default {
}, },
], ],
area: [ area: [
// { {
// type: 'float', type: 'number',
// message: '单位平方数为浮点类型', message: '请输入正确的数值',
// trigger: 'blur', trigger: 'change',
// transfom: 'val => Float(val)', transform: (val) => Number(val),
// }, },
], ],
processTime: [ processTime: [
{ {
@ -263,12 +273,12 @@ export default {
message: '完成单位产品用时不能为空', message: '完成单位产品用时不能为空',
trigger: 'blur', trigger: 'blur',
}, },
// { {
// type: 'number', type: 'number',
// message: '完成单位产品用时为浮点类型', message: '请输入正确的数值',
// trigger: 'blur', trigger: 'blur',
// transfom: 'val => Number(val)', transform: (val) => Number(val),
// }, },
], ],
}, },
isdetail: false, isdetail: false,
@ -277,6 +287,7 @@ export default {
methods: { methods: {
initData() { initData() {
this.productAttributeList.splice(0); this.productAttributeList.splice(0);
this.listQuery.total = 0;
}, },
init(id, isdetail) { init(id, isdetail) {
this.initData(); this.initData();
@ -304,12 +315,10 @@ export default {
getList() { getList() {
// 获取产品的属性列表 // 获取产品的属性列表
const params = { getProductAttrPage({
pageSize: 10, ...this.listQuery,
pageNo: 1,
productId: this.dataForm.id, productId: this.dataForm.id,
}; }).then((response) => {
getProductAttrPage(params).then((response) => {
this.productAttributeList = response.data.list; this.productAttributeList = response.data.list;
this.listQuery.total = response.data.total; this.listQuery.total = response.data.total;
}); });
@ -390,6 +399,8 @@ export default {
<style scoped> <style scoped>
.drawer >>> .el-drawer { .drawer >>> .el-drawer {
border-radius: 8px 0 0 8px; border-radius: 8px 0 0 8px;
display: flex;
flex-direction: column;
} }
.drawer >>> .el-form-item__label { .drawer >>> .el-form-item__label {
@ -400,14 +411,20 @@ export default {
margin: 0; margin: 0;
padding: 32px 32px 24px; padding: 32px 32px 24px;
border-bottom: 1px solid #dcdfe6; border-bottom: 1px solid #dcdfe6;
margin-bottom: 30px; }
.drawer >>> .el-drawer__body {
flex: 1;
height: 1px;
display: flex;
flex-direction: column;
} }
.drawer >>> .content { .drawer >>> .content {
padding: 0 24px 30px; padding: 30px 24px;
flex: 1;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
height: 100%; /* height: 100%; */
} }
.drawer >>> .visual-part { .drawer >>> .visual-part {
@ -422,4 +439,10 @@ export default {
.drawer >>> .attr-list { .drawer >>> .attr-list {
padding: 0 16px; padding: 0 16px;
} }
.drawer-body__footer {
display: flex;
justify-content: flex-end;
padding: 18px;
}
</style> </style>

146
src/views/core/base/productionLine/add-or-updata.vue
View File

@ -7,53 +7,84 @@
--> -->
<template> <template>
<el-form <el-form
class="dialog-inner__form"
:model="dataForm" :model="dataForm"
:rules="dataRule" :rules="dataRule"
ref="dataForm" ref="dataForm"
@keyup.enter.native="dataFormSubmit()" @keyup.enter.native="dataFormSubmit()"
label-width="90px"> label-width="90px">
<el-form-item label="产线编码" prop="code"> <el-row :gutter="20">
<el-input <el-col :span="12">
v-model="dataForm.code" <el-form-item label="产线编码" prop="code">
clearable <el-input
placeholder="请输入产线编码" /> v-model="dataForm.code"
</el-form-item> clearable
<el-form-item label="产线名称" prop="name"> placeholder="请输入产线编码" />
<el-input </el-form-item>
v-model="dataForm.name" </el-col>
clearable <el-col :span="12">
placeholder="请输入产线名称" /> <el-form-item label="产线名称" prop="name">
</el-form-item> <el-input
<el-form-item prop="factoryId" label="工厂名称"> v-model="dataForm.name"
<el-select clearable
v-model="dataForm.factoryId" filterable clearable placeholder="请选择工厂"> placeholder="请输入产线名称" />
<el-option </el-form-item>
v-for="item in urlOptions.optionArr.arr0" </el-col>
:key="item.id" </el-row>
:label="item.name" <el-row :gutter="20">
:value="item.id" <el-col :span="12">
> <el-form-item prop="factoryId" label="工厂名称">
</el-option> <el-select
</el-select> v-model="dataForm.factoryId"
</el-form-item> filterable
<el-form-item label="产线TT值(h)" prop="tvalue"> clearable
<el-input v-model="dataForm.tvalue" clearable placeholder="请输入每小时下片数量" /> placeholder="请选择工厂">
</el-form-item> <el-option
<el-form-item label="额外编码" prop="externalCode"> v-for="item in urlOptions.optionArr.arr0"
<el-input :key="item.id"
v-model="dataForm.externalCode" :label="item.name"
clearable :value="item.id"></el-option>
placeholder="请输入额外编码" /> </el-select>
</el-form-item> </el-form-item>
<el-form-item label="描述" prop="description"> </el-col>
<el-input <el-col :span="12">
v-model="dataForm.description" <el-form-item label="产线TT值(h)" prop="tvalue">
type="textarea" <el-input
placeholder="请输入内容" /> v-model="dataForm.tvalue"
</el-form-item> clearable
<el-form-item label="备注" prop="remark"> placeholder="请输入每小时下片数量" />
<el-input v-model="dataForm.remark" clearable placeholder="请输入备注" /> </el-form-item>
</el-form-item> </el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="12">
<el-form-item label="额外编码" prop="externalCode">
<el-input
v-model="dataForm.externalCode"
clearable
placeholder="请输入额外编码" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="备注" prop="remark">
<el-input
v-model="dataForm.remark"
clearable
placeholder="请输入备注" />
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col>
<el-form-item label="描述" prop="description">
<el-input
v-model="dataForm.description"
type="textarea"
placeholder="请输入内容" />
</el-form-item>
</el-col>
</el-row>
</el-form> </el-form>
</template> </template>
@ -65,22 +96,20 @@ import {
getProductionLine, getProductionLine,
getCode, getCode,
} from '@/api/core/base/productionLine'; } from '@/api/core/base/productionLine';
import { import { getFactoryPage } from '@/api/core/base/factory';
getFactoryPage,
} from '@/api/core/base/factory';
export default { export default {
mixins: [basicAdd], mixins: [basicAdd],
data() { data() {
return { return {
urlOptions: { urlOptions: {
getOption: true, getOption: true,
isGetCode: true, isGetCode: true,
codeURL: getCode, codeURL: getCode,
createURL: createProductionLine, createURL: createProductionLine,
updateURL: updateProductionLine, updateURL: updateProductionLine,
infoURL: getProductionLine, infoURL: getProductionLine,
optionArrUrl: [getFactoryPage], optionArrUrl: [getFactoryPage],
}, },
dataForm: { dataForm: {
id: undefined, id: undefined,
@ -99,13 +128,26 @@ export default {
name: [ name: [
{ required: true, message: '产线名称不能为空', trigger: 'blur' }, { required: true, message: '产线名称不能为空', trigger: 'blur' },
], ],
factoryId: [ factoryId: [
{ required: true, message: '工厂不能为空', trigger: 'change' }, { required: true, message: '工厂不能为空', trigger: 'change' },
], ],
tvalue: [
{
type: 'number',
message: '请输入正确的数字',
trigger: 'change',
transform: (val) => Number(val),
},
],
}, },
}; };
}, },
methods: { methods: {},
},
}; };
</script> </script>
<style scoped>
.dialog-inner__form >>> .el-select {
width: 100%;
}
</style>

2
src/views/core/base/productionLine/index.vue
View File

@ -29,7 +29,7 @@
@cancel="handleCancel" @cancel="handleCancel"
@confirm="handleConfirm" @confirm="handleConfirm"
:before-close="handleCancel" :before-close="handleCancel"
width="70%"> width="50%">
<add-or-update <add-or-update
ref="addOrUpdate" ref="addOrUpdate"
@refreshDataList="successSubmit"></add-or-update> @refreshDataList="successSubmit"></add-or-update>

2
src/views/equipment/analysis/quality/components/lineChart.vue
View File

@ -43,7 +43,7 @@ export default {
eq.okQuantity, eq.okQuantity,
eq.nokQuantity, eq.nokQuantity,
eq.totalQuantity, eq.totalQuantity,
eq.passRate.toFixed(4), eq.passRate?.toFixed(4),
]); ]);
}); });
return { return {

21
src/views/equipment/analysis/quality/index.vue
View File

@ -29,7 +29,10 @@
@emitFun="handleEmitFun"></base-table> @emitFun="handleEmitFun"></base-table>
</el-tab-pane> </el-tab-pane>
<el-tab-pane :label="'\u3000柱状图\u3000'" name="graph"> <el-tab-pane :label="'\u3000柱状图\u3000'" name="graph">
<div v-if="activeName == 'graph'" class="graph" style="height: 40vh; display: flex; flex-direction: column;"> <div
v-if="activeName == 'graph'"
class="graph"
style="height: 40vh; display: flex; flex-direction: column">
<div class="blue-title">各设备加工数量</div> <div class="blue-title">各设备加工数量</div>
<LineChart v-if="list && list.length" :list="list" /> <LineChart v-if="list && list.length" :list="list" />
<div v-else class="no-data-bg"></div> <div v-else class="no-data-bg"></div>
@ -87,6 +90,7 @@ export default {
rangeSeparator: '-', rangeSeparator: '-',
startPlaceholder: '开始日期', startPlaceholder: '开始日期',
endPlaceholder: '结束日期', endPlaceholder: '结束日期',
defaultTime: ['00:00:00', '23:59:59'],
param: 'recordTime', param: 'recordTime',
defaultSelect: [ defaultSelect: [
new Date(y, m, d) new Date(y, m, d)
@ -246,7 +250,9 @@ export default {
created() { created() {
this.fillLineOptions(); this.fillLineOptions();
this.fillProductOptions(); this.fillProductOptions();
this.getList(); },
mounted() {
this.$refs['search-bar'].headBtnClick('search');
}, },
methods: { methods: {
handleTabClick(tab, event) { handleTabClick(tab, event) {
@ -307,12 +313,16 @@ export default {
}, },
handleSearchBarBtnClick(btn) { handleSearchBarBtnClick(btn) {
console.log('handleSearchBarBtnClick', btn); // debugger;
switch (btn.btnName) { switch (btn.btnName) {
case 'search': case 'search':
this.queryParams.lineId = btn.lineId; this.queryParams.lineId = btn.lineId;
this.queryParams.productId = btn.productId; this.queryParams.productId = btn.productId;
this.queryParams.recordTime = btn.recordTime ? btn.recordTime.map(time => moment(new Date(time)).format('YYYY-MM-DD HH:mm:ss')) : null; this.queryParams.recordTime = btn.recordTime
? btn.recordTime.map((time) =>
moment(new Date(time)).format('YYYY-MM-DD HH:mm:ss')
)
: null;
this.$nextTick(() => { this.$nextTick(() => {
this.getList(); this.getList();
}); });
@ -388,7 +398,7 @@ export default {
font-size: 14px; font-size: 14px;
&::before { &::before {
content: ""; content: '';
position: absolute; position: absolute;
left: 0; left: 0;
top: 6px; top: 6px;
@ -398,5 +408,4 @@ export default {
background: #0b58ff; background: #0b58ff;
} }
} }
</style> </style>

191
src/views/equipment/timing-diagram/components/gantt.js
View File

@ -1,191 +0,0 @@
// filename: gantt.vue
// author: liubin
// date: 2023 -09 - 25 14: 28: 12
// description: 甘特图
import * as echarts from 'echarts';
/**
*
* @param {*} params
* @param {*} api
*
* https://echarts.apache.org/zh/option.html#series-custom.renderItem.arguments.params
*/
function renderItem(params, api) { }
export default class Gantt {
constructor(el) {
this.chart = echarts.init(el);
let options = {
series: [
{
type: 'custom',
coordinateSystem: 'cartesian2d',
renderItem: renderItem,
}
]
}
this.chart.setOption(options);
}
update(options) {
this.chart.setOption(options);
}
resize() {
// todo
}
destroy() {
this.chart.dispose();
}
}
var data = [];
var categories = ['设备1', '设备2', '设备3'];
var types = [
{ name: '运行', color: '#7b9ce1' },
{ name: '故障', color: '#bd6d6c' },
{ name: '停机', color: '#75d874' },
];
// return new Date(new Date(timestamp).toLocaleDateString()).getTime()
// })(1691568181000))
function getStartTime(timestamp) {
return new Date(new Date(timestamp).toLocaleDateString()).getTime()
}
data.push({
name: 'running',
value: [0, 1691568181000, 1691568181000 + 60 * 60 * 1000, 60],
itemStyle: {
normal: {
color: types[0].color
}
}
})
function renderItem(params, api) {
var categoryIndex = api.value(0);
var start = api.coord([api.value(1), categoryIndex]);
var end = api.coord([api.value(2), categoryIndex]);
var height = api.size([0, 1])[1] * 0.8;
var rectShape = echarts.graphic.clipRectByRect(
{
x: start[0],
y: start[1] - height / 2,
width: end[0] - start[0],
height: height
},
{
x: params.coordSys.x,
y: params.coordSys.y,
width: params.coordSys.width,
height: params.coordSys.height
}
);
return (
rectShape && {
type: 'rect',
transition: ['shape'],
shape: rectShape,
style: api.style()
}
);
}
option = {
tooltip: {
// show: false,
formatter: function (params) {
return params.marker + params.name + ': ' + new Date(params.value[1]).toLocaleTimeString() + ' - ' + new Date(params.value[2]).toLocaleTimeString();
}
},
// title: {
// text: 'Profile',
// left: 'center'
// },
// dataZoom: [
// {
// type: 'slider',
// filterMode: 'weakFilter',
// showDataShadow: false,
// top: 400,
// labelFormatter: ''
// },
// {
// type: 'inside',
// filterMode: 'weakFilter'
// }
// ],
grid: {
height: 300
},
xAxis: {
type: 'time',
min: getStartTime(1691568181000),
max: getStartTime(1691568181000 + 3600 * 24 * 1000),
splitNumber: 10,
// interval: 60*3600*1000,
// scale: true,
axisLabel: {
// rotate: -15,
formatter: function (val) {
return new Date(val).toLocaleTimeString()
}
},
axisTick: {
show: true
},
splitLine: {
show: false,
}
},
yAxis: [{
axisLine: {
// show: false,
lineStyle: {
color: ''
}
},
axisLabel: {
fontSize: 14,
},
axisTick: {
show: false,
},
splitLine: {
show: true
},
data: categories
}, {
axisLine: {
// show: false,
lineStyle: {
color: ''
}
},
data: []
}],
series: [
{
type: 'custom',
renderItem: renderItem,
itemStyle: {
opacity: 0.8
},
encode: {
x: [1, 2],
y: 0
},
data: data
}
]
};

2
src/views/equipment/timing-diagram/output/index.vue
View File

@ -74,7 +74,7 @@
<script> <script>
import LineChart from './components/lineChart.vue'; import LineChart from './components/lineChart.vue';
import response from './response.json'; // import response from './response.json';
export default { export default {
name: 'SGProduction', name: 'SGProduction',

497
src/views/equipment/timing-diagram/status/demo.html
View File

@ -1,497 +0,0 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<div id="app" style="width: 100vw; height: 80vh; background: #fff; margin: 24px"></div>
<script src="./echarts.js"></script>
<script>
function getStartTime(timestamp) {
return new Date(new Date(timestamp).toLocaleDateString()).getTime();
}
function renderItem(params, api) {
var categoryIndex = api.value(0);
var start = api.coord([api.value(1), categoryIndex]);
var end = api.coord([api.value(2), categoryIndex]);
console.log(`
categoryIndex: ${categoryIndex},
start: ${start},
end: ${end},
api.value0: ${api.value(0)}
api.value1: ${api.value(1)}
api.value2: ${api.value(2)}
params.coordSys: ${JSON.stringify(params.coordSys)}
api.size: ${api.size([0, 1])}
api.style(): ${JSON.stringify(api.style())}
`);
var height = api.size([0, 1])[1] * 2;
// 用一个矩形去截取另一个矩形
var rectShape = echarts.graphic.clipRectByRect(
// 被截取矩形
{
x: start[0],
y: start[1] - height / 2,
width: end[0] - start[0],
height: height,
},
// {x: 0, y: 0, width: 2000, height: 60 } // <== 也行...
// 截取矩形
{
// 截取掉grid以外的部分，实质是计算方块的偏移量
x: params.coordSys.x, // {number} grid rect 的 x
// y: params.coordSys.y, // {number} grid rect 的 y
y: params.coordSys.y - 16, // {number} grid rect 的 y，并多减掉 16 个单位
// width: end[0] - start[0],
width: params.coordSys.width, // {number} grid rect 的 width
height: params.coordSys.height, // {number} grid rect 的 height
}
);
console.log(`------------- ${JSON.stringify(rectShape)} -------------- `)
return (
rectShape && {
type: 'rect',
transition: ['shape'],
shape: rectShape,
style: api.style(),
}
);
}
function getXaxisRange(startTime) {
return Array(24)
.fill(startTime)
.map((item, index) => {
return new Date(item + index * 3600 * 1000)
.toLocaleTimeString()
.split(':')
.slice(0, 2)
.join(':');
});
}
function getTodayStart(today) {
const [y, m, d] = [
today.getFullYear(),
today.getMonth(),
today.getDate(),
];
return new Date(y, m, d).getTime();
}
/** 颜色配置 */
const types = [
{ name: '运行', color: '#288AFF' },
{ name: '故障', color: '#FC9C91' },
{ name: '计划停机', color: '#FFDC94' },
{ name: '空白', color: '#F2F4F9' },
];
const option = {
tooltip: {
trigger: 'item',
axisPointer: {
type: 'none',
// label: {
// backgroundColor: '#6a7985',
// },
},
formatter: (params) => {
// console.log('formatter', params)
// return `
// <div>${new Date(params[0].value[1]).toLocaleString()} ~ ${new Date(params[0].value[2]).toLocaleString()}</div>
// <div style="display: flex; justify-content: space-between; min-width: 128px; align-items: center;">
// <span>${params[0].seriesName}</span>
// <span>${params[0].name}</span>
// </div>
// `
return `
<div style="display: flex; align-items: center; justify-content: space-between">
<h1 style="font-size: 18px; font-weight: 600;">${params.seriesName}</h1>
<h2 style="font-size: 18px; font-weight: 400; letter-spacing: 1px;">${params.name} <span style="display: inline-block; margin-left: 8px; width: 12px; height: 12px; border-radius: 50%; background: ${params.color} "></span></h2>
</div>
<div>${new Date(params.value[1]).toLocaleString()} ~ ${new Date(params.value[2]).toLocaleString()}</div>
`
}
},
grid: [
{
id: 0,
top: 10,
left: 128,
right: 64,
height: 56,
},
// {
// id: 1,
// top: 80,
// height: 56,
// },
// ***************** 添加第二个grid *****************
{
id: 1,
top: 180,
left: 128,
right: 64,
height: 56
}
],
xAxis: [
{
id: 'asdf',
gridIndex: 0,
axisTick: {
alignWithLabel: true,
inside: true,
},
type: 'time',
min: getTodayStart(new Date()), // <===
max: getStartTime(new Date().getTime() + 3600 * 24 * 1000), // <===
splitNumber: 10,
axisLabel: {
margin: 12,
// rotate: -15,
formatter: function (val) {
return new Date(val)
.toLocaleTimeString()
.split(':')
.slice(0, 2)
.join(':');
},
},
boundaryGap: false,
// data: getXaxisRange(getTodayStart(new Date())),
},
{
id: 'asdff',
gridIndex: 0,
axisLabel: { show: false },
axisLine: { show: false },
},
// ***************** 添加第二个 xAxis *****************
{
id: 'asdfjk',
gridIndex: 1,
axisTick: {
alignWithLabel: true,
inside: true,
},
type: 'time',
min: getTodayStart(new Date()), // <===
max: getStartTime(new Date().getTime() + 3600 * 24 * 1000), // <===
splitNumber: 10,
axisLabel: {
margin: 12,
// rotate: -15,
formatter: function (val) {
return new Date(val)
.toLocaleTimeString()
.split(':')
.slice(0, 2)
.join(':');
},
},
boundaryGap: false,
// data: getXaxisRange(getTodayStart(new Date())),
},
{
id: 'fjkd',
gridIndex: 1,
axisLabel: { show: false },
axisLine: { show: false },
},
],
yAxis: [
// 主y轴
{
id: 0,
gridIndex: 0,
type: 'value',
splitLine: { show: false },
name: '设备1',
nameLocation: 'center',
nameGap: 56,
nameRotate: 0,
nameTextStyle: {
fontSize: 18,
},
axisLine: {
show: true,
lineStyle: {},
},
axisLabel: { show: false },
axisTick: { show: false },
},
// 辅y轴
{
id: 1,
gridIndex: 0,
type: 'value',
splitLine: { show: false },
axisLabel: { show: false },
axisTick: { show: false },
},
// ***************** 添加第二个 yAxis *****************
{
id: 2,
gridIndex: 1,
type: 'value',
splitLine: { show: false },
name: '设备1',
nameLocation: 'center',
nameGap: 56,
nameRotate: 0,
nameTextStyle: {
fontSize: 18,
},
axisLine: {
show: true,
lineStyle: {},
},
axisLabel: { show: false },
axisTick: { show: false },
},
// 辅y轴
{
id: 3,
gridIndex: 1,
type: 'value',
splitLine: { show: false },
axisLabel: { show: false },
axisTick: { show: false },
},
],
series: [
{
// 沉默的背景
xAxisIndex: 0,
yAxisIndex: 0,
type: 'custom',
renderItem: renderItem,
silent: true,
itemStyle: {
opacity: 0.8,
},
encode: {
x: [1, 2],
y: 0,
},
data: [
{
name: '无数据',
value: [0, 1696694400000, 1696780800000, 0],
tooltip: { show: false },
// silent: true,
// animation: false,
// universalTransition: { enable: false },
// hoverAnimation: false,
// selectMode: true,
// select: { disabled: true },
// emphasis: { disabled: false, focus: 'none', itemStyle: { opacity: 0 } },
// z: 0,
// zlevel: 0,
// emphasis: { disabled: true },
itemStyle: {
color: '#ccc',
opacity: 0.3,
}
}
]
},
{
name: '设备1',
xAxisIndex: 0,
yAxisIndex: 0,
type: 'custom',
renderItem: renderItem,
itemStyle: {
opacity: 0.8,
},
encode: {
x: [1, 2],
y: 0,
},
data: [
{
name: '运行',
value: [0, 1696694400000, 1696699400000, 0],
itemStyle: {
normal: {
color: types[0].color,
},
},
},
{
name: '运行',
value: [0, 1696730000000, 1696734040450, 0],
itemStyle: {
normal: {
color: types[0].color,
},
},
},
{
name: '故障',
value: [0, 1696737040000, 1696754040450, 0],
itemStyle: {
normal: {
color: types[1].color,
},
},
},
{
name: '计划停机',
value: [0, 1696755000000, 1696759000000, 0],
itemStyle: {
normal: {
color: types[2].color,
},
},
},
{
name: '运行',
value: [0, 1696759000000, 1696769000000, 0],
itemStyle: {
normal: {
color: types[0].color,
},
},
},
{
name: '计划停机',
value: [0, 1696769400000, 1696779000000, 0],
itemStyle: {
normal: {
color: types[2].color,
},
},
},
],
},
// ***************** 添加第二个设备 *****************
{
// 沉默的背景
xAxisIndex: 2,
yAxisIndex: 2,
type: 'custom',
renderItem: renderItem,
silent: true,
itemStyle: {
opacity: 0.8,
},
encode: {
x: [1, 2],
y: 0,
},
data: [
{
name: '无数据',
value: [0, 1696694400000, 1696780800000, 0],
tooltip: { show: false },
// silent: true,
// animation: false,
// universalTransition: { enable: false },
// hoverAnimation: false,
// selectMode: true,
// select: { disabled: true },
// emphasis: { disabled: false, focus: 'none', itemStyle: { opacity: 0 } },
// z: 0,
// zlevel: 0,
// emphasis: { disabled: true },
itemStyle: {
color: '#ccc',
opacity: 0.3,
}
}
]
},
{
name: '设备2',
xAxisIndex: 2,
yAxisIndex: 2,
type: 'custom',
renderItem: renderItem,
itemStyle: {
opacity: 0.8,
},
encode: {
x: [1, 2],
y: 0,
},
data: [
{
name: '运行',
value: [0, 1696694400000, 1696699400000, 0],
itemStyle: {
normal: {
color: types[0].color,
},
},
// showBackground: true,
},
{
name: '运行',
value: [0, 1696730000000, 1696734040450, 0],
itemStyle: {
normal: {
color: types[0].color,
},
},
},
{
name: '故障',
value: [0, 1696737040000, 1696754040450, 0],
itemStyle: {
normal: {
color: types[1].color,
},
},
},
{
name: '计划停机',
value: [0, 1696755000000, 1696759000000, 0],
itemStyle: {
normal: {
color: types[2].color,
},
},
},
{
name: '运行',
value: [0, 1696759000000, 1696769000000, 0],
itemStyle: {
normal: {
color: types[0].color,
},
},
},
{
name: '计划停机',
value: [0, 1696769400000, 1696779000000, 0],
itemStyle: {
normal: {
color: types[2].color,
},
},
},
],
},
],
};
const el = document.getElementById('app');
const myChart = echarts.init(el);
console.log('mychart', myChart);
myChart.setOption(option);
</script>
</body>
</html>