lb #43

Merged
g7hoo merged 6 commits from lb into test 2023-10-13 17:06:02 +08:00
19 changed files with 1011 additions and 879 deletions

View File

@ -12,9 +12,9 @@ ENV = 'development'
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.0.33:48080'
# VUE_APP_BASE_API = 'http://192.168.0.33:48080'
# VUE_APP_BASE_API = 'http://192.168.1.188:48080'
# 路由懒加载

View File

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

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.6 KiB

View File

@ -10,6 +10,8 @@
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">
@ -119,7 +121,15 @@ export default {
disabled: {
type: Boolean,
default: false,
}
},
labelPosition: {
type: String,
default: 'right',
},
size: {
type: String,
default: '',
},
},
data() {
return {

View File

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

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>

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) {
// dependswatcher
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>

View File

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

View File

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

View File

@ -38,6 +38,21 @@
@cancel="cancel"
@confirm="submitForm">
<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>
</div>
</template>
@ -86,9 +101,9 @@ export default {
width: 180,
filter: (val) => moment(val).format('yyyy-MM-DD HH:mm:ss'),
},
{ prop: 'name', label: '设备类型名称', },
{ prop: 'code', label: '检测类型编码', },
{ prop: 'remark', label: '备注', },
{ prop: 'name', label: '设备类型名称' },
{ prop: 'code', label: '检测类型编码' },
{ prop: 'remark', label: '备注' },
],
searchBarFormConfig: [
{
@ -236,6 +251,7 @@ export default {
const id = row.id;
getEquipmentType(id).then((response) => {
this.form = response.data;
debugger;
this.open = true;
this.title = '修改设备类型';
});
@ -267,7 +283,7 @@ export default {
handleDelete(row) {
const id = row.id;
this.$modal
.confirm('是否确认删除设备类型编号为"' + id + '"的数据项?')
.confirm('是否确认删除设备类型"' + row.name + '"?')
.then(function () {
return deleteEquipmentType(id);
})

View File

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

View File

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

View File

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

View File

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

View File

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

View File

@ -29,7 +29,10 @@
@emitFun="handleEmitFun"></base-table>
</el-tab-pane>
<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>
<LineChart v-if="list && list.length" :list="list" />
<div v-else class="no-data-bg"></div>
@ -87,6 +90,7 @@ export default {
rangeSeparator: '-',
startPlaceholder: '开始日期',
endPlaceholder: '结束日期',
defaultTime: ['00:00:00', '23:59:59'],
param: 'recordTime',
defaultSelect: [
new Date(y, m, d)
@ -246,7 +250,9 @@ export default {
created() {
this.fillLineOptions();
this.fillProductOptions();
this.getList();
},
mounted() {
this.$refs['search-bar'].headBtnClick('search');
},
methods: {
handleTabClick(tab, event) {
@ -307,12 +313,16 @@ export default {
},
handleSearchBarBtnClick(btn) {
console.log('handleSearchBarBtnClick', btn);
// debugger;
switch (btn.btnName) {
case 'search':
this.queryParams.lineId = btn.lineId;
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.getList();
});
@ -388,7 +398,7 @@ export default {
font-size: 14px;
&::before {
content: "";
content: '';
position: absolute;
left: 0;
top: 6px;
@ -398,5 +408,4 @@ export default {
background: #0b58ff;
}
}
</style>

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
}
]
};

View File

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

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>