lb #43
4
.env.dev
4
.env.dev
@ -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'
|
||||||
|
|
||||||
# 路由懒加载
|
# 路由懒加载
|
||||||
|
|||||||
@ -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
BIN
src/assets/images/default-file-icon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.6 KiB |
@ -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 {
|
||||||
|
|||||||
@ -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
294
src/views/core/base/equipment/components/AssetsUpload.vue
Normal 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
313
src/views/core/base/equipment/components/DialogForm.vue
Normal 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>
|
||||||
@ -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,17 +346,19 @@ 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);
|
try {
|
||||||
const isEdit = this.attrForm.id != null;
|
const isEdit = this.attrForm.id != null;
|
||||||
this.attrFormSubmitting = true;
|
this.attrFormSubmitting = true;
|
||||||
const res = await this.$axios({
|
const res = await this.$axios({
|
||||||
url: isEdit ? this.sections[1].urlUpdate : this.sections[1].urlCreate,
|
url: isEdit
|
||||||
|
? this.sections[1].urlUpdate
|
||||||
|
: this.sections[1].urlCreate,
|
||||||
method: isEdit ? 'put' : 'post',
|
method: isEdit ? 'put' : 'post',
|
||||||
data: this.attrForm,
|
data: this.attrForm,
|
||||||
});
|
});
|
||||||
@ -358,6 +375,15 @@ export default {
|
|||||||
});
|
});
|
||||||
}
|
}
|
||||||
this.attrFormSubmitting = false;
|
this.attrFormSubmitting = false;
|
||||||
|
} catch (err) {
|
||||||
|
this.$message({
|
||||||
|
message: err,
|
||||||
|
type: 'error',
|
||||||
|
duration: 1500,
|
||||||
|
});
|
||||||
|
this.attrFormSubmitting = false;
|
||||||
|
}
|
||||||
|
});
|
||||||
},
|
},
|
||||||
|
|
||||||
closeAttrForm() {
|
closeAttrForm() {
|
||||||
|
|||||||
@ -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(() => {
|
||||||
|
|||||||
@ -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);
|
||||||
})
|
})
|
||||||
|
|||||||
@ -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':
|
||||||
|
|||||||
@ -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>
|
||||||
|
|||||||
@ -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-row :gutter="20">
|
||||||
|
<el-col :span="12">
|
||||||
<el-form-item label="产线编码" prop="code">
|
<el-form-item label="产线编码" prop="code">
|
||||||
<el-input
|
<el-input
|
||||||
v-model="dataForm.code"
|
v-model="dataForm.code"
|
||||||
clearable
|
clearable
|
||||||
placeholder="请输入产线编码" />
|
placeholder="请输入产线编码" />
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="12">
|
||||||
<el-form-item label="产线名称" prop="name">
|
<el-form-item label="产线名称" prop="name">
|
||||||
<el-input
|
<el-input
|
||||||
v-model="dataForm.name"
|
v-model="dataForm.name"
|
||||||
clearable
|
clearable
|
||||||
placeholder="请输入产线名称" />
|
placeholder="请输入产线名称" />
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
<el-row :gutter="20">
|
||||||
|
<el-col :span="12">
|
||||||
<el-form-item prop="factoryId" label="工厂名称">
|
<el-form-item prop="factoryId" label="工厂名称">
|
||||||
<el-select
|
<el-select
|
||||||
v-model="dataForm.factoryId" filterable clearable placeholder="请选择工厂">
|
v-model="dataForm.factoryId"
|
||||||
|
filterable
|
||||||
|
clearable
|
||||||
|
placeholder="请选择工厂">
|
||||||
<el-option
|
<el-option
|
||||||
v-for="item in urlOptions.optionArr.arr0"
|
v-for="item in urlOptions.optionArr.arr0"
|
||||||
:key="item.id"
|
:key="item.id"
|
||||||
:label="item.name"
|
:label="item.name"
|
||||||
:value="item.id"
|
:value="item.id"></el-option>
|
||||||
>
|
|
||||||
</el-option>
|
|
||||||
</el-select>
|
</el-select>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="12">
|
||||||
<el-form-item label="产线TT值(h)" prop="tvalue">
|
<el-form-item label="产线TT值(h)" prop="tvalue">
|
||||||
<el-input v-model="dataForm.tvalue" clearable placeholder="请输入每小时下片数量" />
|
<el-input
|
||||||
|
v-model="dataForm.tvalue"
|
||||||
|
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-form-item label="额外编码" prop="externalCode">
|
||||||
<el-input
|
<el-input
|
||||||
v-model="dataForm.externalCode"
|
v-model="dataForm.externalCode"
|
||||||
clearable
|
clearable
|
||||||
placeholder="请输入额外编码" />
|
placeholder="请输入额外编码" />
|
||||||
</el-form-item>
|
</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-form-item label="描述" prop="description">
|
||||||
<el-input
|
<el-input
|
||||||
v-model="dataForm.description"
|
v-model="dataForm.description"
|
||||||
type="textarea"
|
type="textarea"
|
||||||
placeholder="请输入内容" />
|
placeholder="请输入内容" />
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
<el-form-item label="备注" prop="remark">
|
</el-col>
|
||||||
<el-input v-model="dataForm.remark" clearable placeholder="请输入备注" />
|
</el-row>
|
||||||
</el-form-item>
|
|
||||||
</el-form>
|
</el-form>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
@ -65,9 +96,7 @@ 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],
|
||||||
@ -102,10 +131,23 @@ export default {
|
|||||||
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>
|
||||||
|
|||||||
@ -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>
|
||||||
|
|||||||
@ -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 {
|
||||||
|
|||||||
@ -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>
|
||||||
|
|||||||
@ -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
|
|
||||||
}
|
|
||||||
]
|
|
||||||
};
|
|
||||||
@ -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',
|
||||||
|
|||||||
@ -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>
|
|
||||||
Loading…
Reference in New Issue
Block a user