Merge pull request 'lb' (#34) from lb into test

Reviewed-on: #34

.env.dev

@@ -9,7 +9,7 @@
 ENV = 'development'
 
 # 页面标题
-VUE_APP_TITLE = 芋道管理系统
+VUE_APP_TITLE = 产线监控系统
 
 # 芋道管理系统/开发环境
 # VUE_APP_BASE_API = 'http://192.168.1.49:48080'

.env.front

@@ -2,7 +2,7 @@
 ENV = 'development'
 
 # 页面标题
-VUE_APP_TITLE = 芋道管理系统
+VUE_APP_TITLE = 产线监控系统
 
 # 芋道管理系统/本地环境
 VUE_APP_BASE_API = 'http://api-dashboard.yudao.iocoder.cn'

.env.prod

@@ -2,7 +2,7 @@
 ENV = 'production'
 
 # 页面标题
-VUE_APP_TITLE = 芋道管理系统
+VUE_APP_TITLE = 产线监控系统
 
 # 芋道管理系统/生产环境
 VUE_APP_BASE_API = '/prod-api'

.env.stage

@@ -1,7 +1,7 @@
 NODE_ENV = production
 
 # 页面标题
-VUE_APP_TITLE = 芋道管理系统
+VUE_APP_TITLE = 产线监控系统
 
 # 测试环境配置
 ENV = 'staging'

.env.static

@@ -4,7 +4,7 @@ NODE_ENV = development
 ENV = 'staging'
 
 # 页面标题
-VUE_APP_TITLE = 芋道管理系统
+VUE_APP_TITLE = 产线监控系统
 
 # 芋道管理系统/测试环境
 VUE_APP_BASE_API = 'http://127.0.0.1:48080'

src/layout/components/Navbar.vue

@@ -94,7 +94,7 @@ export default {
     async logout() {
       this.$modal.confirm('确定注销并退出系统吗？', '提示').then(() => {
         this.$store.dispatch('LogOut').then(() => {
-          location.href = getPath('/index');
+          location.href = getPath('/');
         })
       }).catch(() => {});
     }

src/router/index.js

@@ -65,16 +65,17 @@ export const constantRoutes = [
     hidden: true
   },
   {
-    path: '',
+    path: '/',
     component: Layout,
-    redirect: 'index',
+    redirect: 'core/base/factory',
-    children: [{
+    // children: [{
-        path: 'index',
+    //   path: 'index',
-        component: (resolve) => require(['@/views/index'], resolve),
+    //   redirect: 'core/base/factory',
-        name: '首页',
+    //   component: (resolve) => require(['@/views/index'], resolve),
-        meta: {title: '首页', icon: 'dashboard', affix: true}
+    //   name: '首页',
-      }
+    //   meta: { title: '首页', icon: 'dashboard', affix: true }
-    ]
+    // }
+    // ]
   },
   {
     path: '/user',
@@ -82,15 +83,15 @@ export const constantRoutes = [
     hidden: true,
     redirect: 'noredirect',
     children: [{
-        path: 'profile',
+      path: 'profile',
-        component: (resolve) => require(['@/views/system/user/profile/index'], resolve),
+      component: (resolve) => require(['@/views/system/user/profile/index'], resolve),
-        name: 'Profile',
+      name: 'Profile',
-        meta: {title: '个人中心', icon: 'user'}
+      meta: { title: '个人中心', icon: 'user' }
-      }, {
+    }, {
-        path: 'notify-message',
+      path: 'notify-message',
-        component: (resolve) => require(['@/views/system/notify/my/index'], resolve),
+      component: (resolve) => require(['@/views/system/notify/my/index'], resolve),
-        name: 'MyNotifyMessage',
+      name: 'MyNotifyMessage',
-        meta: { title: '我的站内信', icon: 'message' },
+      meta: { title: '我的站内信', icon: 'message' },
     }]
   },
   {
@@ -98,11 +99,11 @@ export const constantRoutes = [
     component: Layout,
     hidden: true,
     children: [{
-        path: 'type/data/:dictId(\\d+)',
+      path: 'type/data/:dictId(\\d+)',
-        component: (resolve) => require(['@/views/system/dict/data'], resolve),
+      component: (resolve) => require(['@/views/system/dict/data'], resolve),
-        name: 'SystemDictData',
+      name: 'SystemDictData',
-        meta: {title: '字典数据', icon: '', activeMenu: '/system/dict'}
+      meta: { title: '字典数据', icon: '', activeMenu: '/system/dict' }
-      }
+    }
     ]
   },
   {
@@ -110,22 +111,22 @@ export const constantRoutes = [
     component: Layout,
     hidden: true,
     children: [{
-        path: 'log',
+      path: 'log',
-        component: (resolve) => require(['@/views/infra/job/log'], resolve),
+      component: (resolve) => require(['@/views/infra/job/log'], resolve),
-        name: 'InfraJobLog',
+      name: 'InfraJobLog',
-        meta: {title: '调度日志', activeMenu: '/infra/job'}
+      meta: { title: '调度日志', activeMenu: '/infra/job' }
-      }
+    }
     ]
   }, {
     path: '/codegen',
     component: Layout,
     hidden: true,
     children: [{
-        path: 'edit/:tableId(\\d+)',
+      path: 'edit/:tableId(\\d+)',
-        component: (resolve) => require(['@/views/infra/codegen/editTable'], resolve),
+      component: (resolve) => require(['@/views/infra/codegen/editTable'], resolve),
-        name: 'InfraCodegenEditTable',
+      name: 'InfraCodegenEditTable',
-        meta: {title: '修改生成配置', activeMenu: '/infra/codegen'}
+      meta: { title: '修改生成配置', activeMenu: '/infra/codegen' }
-      }
+    }
     ]
   },
   {
@@ -134,16 +135,16 @@ export const constantRoutes = [
     hidden: true,
     redirect: 'noredirect',
     children: [{
-        path: 'oa/leave/create',
+      path: 'oa/leave/create',
-        component: (resolve) => require(['@/views/bpm/oa/leave/create'], resolve),
+      component: (resolve) => require(['@/views/bpm/oa/leave/create'], resolve),
-        name: 'BpmOALeaveCreate',
+      name: 'BpmOALeaveCreate',
-        meta: {title: '发起 OA 请假', icon: 'form', activeMenu: '/bpm/oa/leave'}
+      meta: { title: '发起 OA 请假', icon: 'form', activeMenu: '/bpm/oa/leave' }
-      }, {
+    }, {
-        path: 'oa/leave/detail',
+      path: 'oa/leave/detail',
-        component: (resolve) => require(['@/views/bpm/oa/leave/detail'], resolve),
+      component: (resolve) => require(['@/views/bpm/oa/leave/detail'], resolve),
-        name: 'BpmOALeaveDetail',
+      name: 'BpmOALeaveDetail',
-        meta: {title: '查看 OA 请假', icon: 'view', activeMenu: '/bpm/oa/leave'}
+      meta: { title: '查看 OA 请假', icon: 'view', activeMenu: '/bpm/oa/leave' }
-      }
+    }
     ]
   },
   {
@@ -151,31 +152,31 @@ export const constantRoutes = [
     component: Layout,
     hidden: true,
     children: [{
-        path: 'manager/form/edit',
+      path: 'manager/form/edit',
-        component: (resolve) => require(['@/views/bpm/form/formEditor'], resolve),
+      component: (resolve) => require(['@/views/bpm/form/formEditor'], resolve),
-        name: 'BpmFormEditor',
+      name: 'BpmFormEditor',
-        meta: {title: '流程表单-编辑', activeMenu: '/bpm/manager/form'}
+      meta: { title: '流程表单-编辑', activeMenu: '/bpm/manager/form' }
-      }, {
+    }, {
-        path: 'manager/definition',
+      path: 'manager/definition',
-        component: (resolve) => require(['@/views/bpm/definition/index'], resolve),
+      component: (resolve) => require(['@/views/bpm/definition/index'], resolve),
-        name: 'BpmProcessDefinition',
+      name: 'BpmProcessDefinition',
-        meta: {title: '流程定义', activeMenu: '/bpm/manager/model'}
+      meta: { title: '流程定义', activeMenu: '/bpm/manager/model' }
-      }, {
+    }, {
-        path: 'manager/model/design',
+      path: 'manager/model/design',
-        component: (resolve) => require(['@/views/bpm/model/modelEditor'], resolve),
+      component: (resolve) => require(['@/views/bpm/model/modelEditor'], resolve),
-        name: 'BpmModelEditor',
+      name: 'BpmModelEditor',
-        meta: {title: '设计流程', activeMenu: '/bpm/manager/model'}
+      meta: { title: '设计流程', activeMenu: '/bpm/manager/model' }
-      }, {
+    }, {
-        path: 'process-instance/create',
+      path: 'process-instance/create',
-        component: (resolve) => require(['@/views/bpm/processInstance/create'], resolve),
+      component: (resolve) => require(['@/views/bpm/processInstance/create'], resolve),
-        name: 'BpmProcessInstanceCreate',
+      name: 'BpmProcessInstanceCreate',
-        meta: {title: '发起流程', activeMenu: '/bpm/task/my'}
+      meta: { title: '发起流程', activeMenu: '/bpm/task/my' }
-      }, {
+    }, {
-        path: 'process-instance/detail',
+      path: 'process-instance/detail',
-        component: (resolve) => require(['@/views/bpm/processInstance/detail'], resolve),
+      component: (resolve) => require(['@/views/bpm/processInstance/detail'], resolve),
-        name: 'BpmProcessInstanceDetail',
+      name: 'BpmProcessInstanceDetail',
-        meta: {title: '流程详情', activeMenu: '/bpm/task/my'}
+      meta: { title: '流程详情', activeMenu: '/bpm/task/my' }
-      }
+    }
     ]
   },
   {
@@ -186,7 +187,7 @@ export const constantRoutes = [
       path: 'value/:propertyId(\\d+)',
       component: (resolve) => require(['@/views/mall/product/property/value'], resolve),
       name: 'ProductPropertyValue',
-      meta: {title: '商品属性值', icon: '', activeMenu: '/product/property'}
+      meta: { title: '商品属性值', icon: '', activeMenu: '/product/property' }
     }
     ]
   },
@@ -198,14 +199,14 @@ export const constantRoutes = [
       path: 'edit/:spuId(\\d+)',
       component: (resolve) => require(['@/views/mall/product/spu/save'], resolve),
       name: 'ProductSpuUpdate',
-      meta: {title: '修改商品', activeMenu: '/product/spu'}
+      meta: { title: '修改商品', activeMenu: '/product/spu' }
     },
-      {
+    {
-        path: 'add',
+      path: 'add',
-        component: (resolve) => require(['@/views/mall/product/spu/save'], resolve),
+      component: (resolve) => require(['@/views/mall/product/spu/save'], resolve),
-        name: 'ProductSpuCreate',
+      name: 'ProductSpuCreate',
-        meta: {title: '添加商品', activeMenu: '/product/spu'}
+      meta: { title: '添加商品', activeMenu: '/product/spu' }
-      }
+    }
     ]
   },
   {
@@ -248,6 +249,6 @@ Router.prototype.push = function push(location) {
 export default new Router({
   base: process.env.VUE_APP_APP_NAME ? process.env.VUE_APP_APP_NAME : "/",
   mode: 'hash', // 去掉url中的#
-  scrollBehavior: () => ({y: 0}),
+  scrollBehavior: () => ({ y: 0 }),
   routes: constantRoutes
 })

src/views/base/equipmentPlc/index.vue

@@ -211,6 +211,7 @@ export default {
 						switch: true,
 						label: '是否采集', // 是否采集 0 代表不采集, 1 代表采集
 						prop: 'collection',
+						value: 1,
 						bind: {
 							'active-value': 1,
 							'inactive-value': 0,

src/views/base/equipmentPlcConnect/index.vue

@@ -144,7 +144,7 @@ export default {
 				},
 				{
 					type: 'select',
-					label: 'PLC编码',
+					label: '编码',
 					placeholder: '请选择编码',
 					param: 'plcId',
 					selectOptions: [],
@@ -184,6 +184,9 @@ export default {
 						labelKey: `plcTableName`,
 						url: '/base/equipment-plc/listAll',
 						rules: [{ required: true, message: '不能为空', trigger: 'blur' }],
+						bind: {
+							filterable: true
+						}
 					},
 				],
 				[
@@ -193,6 +196,9 @@ export default {
 						prop: 'equipmentId',
 						url: '/base/equipment/page?pageNo=1&pageSize=99',
 						rules: [{ required: true, message: '不能为空', trigger: 'blur' }],
+						bind: {
+							filterable: true
+						}
 					},
 				],
 			],
@@ -351,11 +357,7 @@ export default {
 		handleDelete(row) {
 			const id = row.id;
 			this.$modal
-				.confirm(
+				.confirm('是否删除该配置?')
-					'是否确认删除设备与实时采集关系表（一对多）编号为"' +
-						id +
-						'"的数据项?'
-				)
 				.then(function () {
 					return deleteEquipmentPlcConnect(id);
 				})

src/views/base/equipmentPlcParam/index.vue

@@ -419,7 +419,7 @@ export default {
 		handleDelete(row) {
 			const id = row.id;
 			this.$modal
-				.confirm('是否确认删除设备数采详情编号为"' + id + '"的数据项?')
+				.confirm('是否确认删除"' + row.name + '"的参数绑定?')
 				.then(function () {
 					return deleteEquipmentPlcParam(id);
 				})

src/views/equipment/analysis/efficiency/index.vue

@@ -55,7 +55,10 @@
 							</div>
 							<div class="graph-grid">
 								<div class="bg-grid grid-line">
-									<div class="grid-item" v-for="item in list.length" :key="item"></div>
+									<div
+										class="grid-item"
+										v-for="item in list.length"
+										:key="item"></div>
 								</div>
 
 								<div class="bg-grid grid-charts">
@@ -253,7 +256,7 @@ export default {
 							rangeSeparator: '-',
 							startPlaceholder: '开始时间',
 							endPlaceholder: '结束时间',
-							param: 'recordTime',
+							param: 'timerange',
 						},
 						{
 							parent: 'dateFilterType',
@@ -264,7 +267,7 @@ export default {
 							placeholder: '选择日期',
 							format: 'yyyy-MM-dd',
 							valueFormat: 'yyyy-MM-dd',
-							param: 'recordTime',
+							param: 'timeday',
 						},
 					],
 				},
@@ -383,22 +386,18 @@ export default {
 			if (btnName == 'search') {
 				this.queryParams.factoryId = payload.factoryId || null;
 				this.queryParams.lineId = payload.lineId || null;
-				if (payload.recordTime != null) {
+				if (0 == payload.dateFilterType) {
-					if (typeof payload.recordTime == 'string') {
+					this.queryParams.recordTime = payload.timerange;
-						if (payload.recordTime.trim() !== '') {
+				} else if (1 == payload.dateFilterType) {
-							this.queryParams.recordTime = [
+					this.queryParams.recordTime = [
-								`${payload.recordTime} 00:00:00`,
+						`${payload.timeday} 00:00:00`,
-								`${payload.recordTime} 23:59:59`,
+						`${payload.timeday} 23:59:59`,
-							];
+					];
-						}
-					} else {
-						this.queryParams.recordTime = payload.recordTime;
-					}
-				} else {
-					this.queryParams.recordTime = null;
 				}
-				this.getList();
+			} else {
+				this.queryParams.recordTime = null;
 			}
+			this.getList();
 		},
 
 		cancel() {

src/views/equipment/analysis/quality/components/lineChart.vue

@@ -37,8 +37,14 @@ export default {
 		option() {
 			const opt = [];
 			this.list.map((eq) => {
-				/** [设备名, ok数量, 不ok数量] */
+				/** [设备名, ok数量, 不ok数量, 加工数量, 合格率] */
-				opt.push([eq.equipmentName, eq.okQuantity, eq.nokQuantity]);
+				opt.push([
+					eq.equipmentName,
+					eq.okQuantity,
+					eq.nokQuantity,
+					eq.totalQuantity,
+					eq.passRate.toFixed(2),
+				]);
 			});
 			return {
 				color: ['#288AFF', '#8EF0AB'],
@@ -51,7 +57,7 @@ export default {
 				legend: {
 					itemWidth: 12,
 					itemHeight: 12,
-					right: 0
+					right: 0,
 				},
 				grid: {
 					left: '1%',
@@ -104,6 +110,17 @@ export default {
 						stack: 's',
 						data: opt.map((item) => item[2]),
 					},
+					{
+						name: '加工数量',
+						type: 'bar',
+						barWidth: 20,
+						data: opt.map((item) => item[3]),
+					},
+					{
+						name: '合格率',
+						type: 'line', 
+						data: opt.map((item) => item[4]),
+					},
 				],
 			};
 		},

src/views/equipment/timing-diagram/components/gantt.js

@@ -0,0 +1,191 @@
+
+// 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
+        }
+    ]
+};

src/views/equipment/timing-diagram/status/index.vue

@@ -6,7 +6,9 @@
 -->
 
 <template>
-	<div class="status-timegraph-container" style="background: #f2f4f9; flex: 1">
+	<div
+		class="status-timegraph-container"
+		style="background: #f2f4f9; flex: 1; display: flex; flex-direction: column">
 		<el-row
 			class=""
 			style="
@@ -28,10 +30,14 @@
 		<el-row
 			class=""
 			style="
+				height: 1px;
+				flex: 1;
 				margin-bottom: 12px;
 				background: #fff;
 				padding: 16px 16px 32px;
 				border-radius: 8px;
+				display: flex;
+				flex-direction: column;
 			">
 			<el-row :gutter="20">
 				<el-col :span="6">
@@ -64,9 +70,15 @@
 					</div>
 				</el-col>
 			</el-row>
-			<div class="main-area">
+			<div
-				<div class="graphs" v-if="graphList.length">
+				class="main-area"
-					<div class="graph" v-for="eq in graphList" :key="eq.key">
+				style="flex: 1; display: flex; flex-direction: column">
+				<div
+					class="graphs"
+					v-show="graphList.length"
+					id="status-chart"
+					style="height: 1px; flex: 1">
+					<!-- <div class="graph" v-for="eq in graphList" :key="eq.key">
 						<h2 class="graph-title">{{ eq.key }}</h2>
 
 						<div class="graph-content">
@@ -98,9 +110,9 @@
 									"></div>
 							</el-popover>
 						</div>
-					</div>
+					</div> -->
 				</div>
-				<h2 v-else>请添加设备</h2>
+				<h2 v-if="!graphList || graphList.length == 0" class="no-data-bg"></h2>
 			</div>
 		</el-row>
 
@@ -128,12 +140,54 @@
 </template>
 
 <script>
+import * as echarts from 'echarts';
+
+var types = [
+	{ name: '运行', color: '#5ad8a6' },
+	{ name: '故障', color: '#fc9c91' },
+	{ name: '计划停机', color: '#000' },
+];
+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]);
+	var height = api.size([0, 1])[1] * 1;
+	// var height = api.size([0, 1])[1] * 0.8;
+	// var height = 56;
+	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(),
+		}
+	);
+}
+
 export default {
 	name: 'SGStatus',
 	components: {},
 	props: {},
 	data() {
 		return {
+			chart: null,
 			searchBarFormConfig: [
 				{
 					type: 'select',
@@ -153,15 +207,17 @@ export default {
 				{
 					type: 'datePicker',
 					label: '时间段',
-					dateType: 'daterange', // datetimerange
+					// dateType: 'daterange', // datetimerange
+					dateType: 'date',
 					// format: 'yyyy-MM-dd HH:mm:ss',
 					format: 'yyyy-MM-dd',
 					valueFormat: 'yyyy-MM-dd HH:mm:ss',
 					// valueFormat: 'timestamp',
 					rangeSeparator: '-',
-					startPlaceholder: '开始日期',
+					// startPlaceholder: '开始日期',
-					endPlaceholder: '结束日期',
+					// endPlaceholder: '结束日期',
-					defaultTime: ['00:00:00', '23:59:59'],
+					placeholder: '选择日期',
+					// defaultTime: ['00:00:00', '23:59:59'],
 					param: 'recordTime',
 				},
 				{
@@ -185,7 +241,7 @@ export default {
 				lineId: null,
 				sectionId: null,
 				equipmentId: null,
-				recordTime: [],
+				recordTime: null,
 			},
 			graphList: [],
 			open: false,
@@ -210,6 +266,176 @@ export default {
 			// 		},
 			// 	],
 			// ],
+			chartOption: {
+				grid: {
+					top: 32,
+					left: 128,
+					right: 128,
+					bottom: 64,
+				},
+				tooltip: {
+					// show: false,
+					formatter: function (params) {
+						return (
+							params.marker +
+							params.name +
+							': ' +
+							new Date(params.value[1]).toLocaleTimeString() +
+							' - ' +
+							new Date(params.value[2]).toLocaleTimeString()
+						);
+					},
+				},
+				xAxis: {
+					type: 'time',
+					min: getStartTime(1691568181000), // <===
+					max: getStartTime(1691568181000 + 3600 * 24 * 1000), // <===
+					splitNumber: 10,
+					axisLabel: {
+						// rotate: -15,
+						formatter: function (val) {
+							return new Date(val).toLocaleTimeString();
+						},
+					},
+					axisTick: {
+						show: true,
+					},
+					splitLine: {
+						show: false,
+					},
+				},
+				yAxis: [
+					{
+						interval: 40,
+						axisLine: {
+							// show: false,
+							lineStyle: {
+								color: '',
+							},
+						},
+						axisLabel: {
+							fontSize: 18,
+						},
+						axisTick: {
+							show: false,
+						},
+						splitLine: {
+							show: true,
+						},
+						// data: [], // <====
+						data: ['设备1', '设备2', '设备3', '设备4'],
+					},
+					{
+						axisLine: {
+							// show: false,
+							lineStyle: {
+								color: '',
+							},
+						},
+						data: [],
+					},
+				],
+				series: [
+					{
+						type: 'custom',
+						renderItem: renderItem,
+						itemStyle: {
+							opacity: 0.8,
+						},
+						encode: {
+							x: [1, 2],
+							y: 0,
+						},
+						// data: [], // <===
+						data: [
+							{
+								name: '运行',
+								value: [
+									0,
+									1691568181000,
+									1691568181000 + 60 * 60 * 1000,
+									60 * 10 * 1000,
+								],
+								itemStyle: {
+									normal: {
+										color: types[0].color,
+									},
+								},
+							},
+							{
+								name: '计划停机',
+								value: [
+									0,
+									1691578581000,
+									1691578581000 + 10 * 60 * 1000,
+									60 * 10 * 1000,
+								],
+								itemStyle: {
+									normal: {
+										color: types[2].color,
+									},
+								},
+							},
+							{
+								name: '运行',
+								value: [
+									1,
+									1691568181000,
+									1691568181000 + 60 * 60 * 1000,
+									60 * 10 * 1000,
+								],
+								itemStyle: {
+									normal: {
+										color: types[0].color,
+									},
+								},
+							},
+							{
+								name: '故障',
+								value: [
+									2,
+									1691538181000,
+									1691538181000 + 60 * 60 * 1000,
+									60 * 10 * 1000,
+								],
+								itemStyle: {
+									normal: {
+										color: types[1].color,
+									},
+								},
+							},
+							{
+								name: '运行',
+								value: [
+									2,
+									1691578181000,
+									1691578181000 + 90 * 60 * 1000,
+									90 * 10 * 1000,
+								],
+								itemStyle: {
+									normal: {
+										color: types[0].color,
+									},
+								},
+							},
+							{
+								name: '计划停机',
+								value: [
+									3,
+									1691528181000,
+									1691528181000 + 240 * 60 * 1000,
+									240 * 10 * 1000,
+								],
+								itemStyle: {
+									normal: {
+										color: types[2].color,
+									},
+								},
+							},
+						],
+					},
+				],
+			},
 		};
 	},
 	computed: {},
@@ -219,13 +445,82 @@ export default {
 		this.initEquipment();
 		this.getList();
 	},
+	mounted() {},
+	watch: {
+		graphList: {
+			handler(val) {
+				if (val && val.length) {
+					this.$nextTick(() => {
+						if (!this.chart) this.initChart();
+						this.setInitialConfig();
+						this.handleGraphList();
+					});
+				}
+				return;
+			},
+			deep: true,
+			immediate: true,
+		},
+	},
 	methods: {
+		setInitialConfig() {
+			console.log('in setInitialConfig', this.chartOption);
+			this.chart.setOption(this.chartOption);
+		},
+
+		handleGraphList() {
+			console.log('in handleGraphList:', this.graphList);
+			return;
+			const min = this.queryParams.recordTime
+				? new Date(this.queryParams.recordTime).getTime()
+				: this.findMin();
+
+			console.log('min is', min);
+			this.chartOption.xAxis.min = getStartTime(min);
+			this.chartOption.xAxis.max = getStartTime(min + 3600 * 24 * 1000);
+			this.graphList.forEach((arr) => {
+				this.chartOption.yAxis[0].data.push(arr.key);
+				arr.forEach((item) => {
+					this.chartOption.series[0].data.push({
+						name: ['运行', '故障', '计划停机'][item.status],
+						value: [
+							0,
+							item.startTime,
+							item.startTime + item.duration * 60 * 1000,
+							item.duration * 60 * 1000,
+						],
+						itemStyle: {
+							normal: {
+								color: types[item.status].color,
+							},
+						},
+					});
+				});
+				console.log('chartOptions', this.chartOption);
+			});
+		},
+
+		findMin() {
+			let min = 0;
+			this.graphList.forEach((arr) => {
+				arr.forEach((item) => {
+					if (min < item.startTime) min = item.startTime;
+				});
+			});
+			return min;
+		},
+
+		initChart() {
+			const el = document.getElementById('status-chart');
+			this.chart = echarts.init(el);
+		},
+
 		/** 重置查询条件 */
 		initQuery() {
 			this.queryParams.lineId = null;
 			this.queryParams.equipmentId = null;
 			this.queryParams.sectionId = null;
-			this.queryParams.recordTime = [];
+			this.queryParams.recordTime = null;
 		},
 
 		/** 对象到数组的转换 */
@@ -303,7 +598,23 @@ export default {
 					this.queryParams.lineId = payload.lineId || null;
 					this.queryParams.sectionId = payload.sectionId || null;
 					this.queryParams.equipmentId = payload.equipmentId || null;
-					this.queryParams.recordTime = payload.recordTime || null;
+					this.queryParams.recordTime = payload.recordTime
+						? [
+								payload.recordTime,
+								new Date(
+									new Date(payload.recordTime).getTime() + 24 * 3600 * 1000
+								)
+									.toLocaleDateString()
+									.split('/')
+									.map((value, index) => {
+										if (index == 1 || index == 2) {
+											return value.padStart(2, '0');
+										}
+										return value;
+									})
+									.join('-') + ' 00:00:00',
+						  ]
+						: null;
 					this.getList();
 					break;
 				case 'compare':
@@ -493,4 +804,13 @@ export default {
 		background: #0b58ff;
 	}
 }
+
+.echarts__status-chart {
+	background: #ccc;
+}
+
+.echarts__status-chart > div {
+	height: 100% !important;
+	width: 100% !important;
+}
 </style>

src/views/monitoring/equipmentAlarmLog/index.vue

@@ -82,10 +82,11 @@ export default {
 					: undefined,
 			].filter((v) => v),
 			tableProps: [
-				{ width: 128, prop: 'productionLine', label: '产线' },
+				{ prop: 'productionLine', label: '产线' },
-				{ width: 128, prop: 'workshopSection', label: '工段' },
+				{ prop: 'workshopSection', label: '工段' },
-				{ width: 128, prop: 'equipment', label: '设备名称' },
+				{ prop: 'equipment', label: '设备名称' },
 				{
+					width: 90,
 					prop: 'alarmGrade',
 					label: '报警级别',
 					filter: publicFormatter(this.DICT_TYPE.EQU_ALARM_LEVEL),

src/views/monitoring/equipmentProcessAmount/graph.vue

@@ -7,6 +7,7 @@
 
 <template>
 	<div class="chart-wrapper">
+		<div class="blue-title">各设备加工数量</div>
 		<div class="chart" ref="chart"></div>
 	</div>
 </template>
@@ -30,7 +31,7 @@ export default {
 					bottom: 56,
 				},
 				title: {
-					show: true,
+					show: false,
 					text: '各设备加工数量',
 					textStyle: {
 						color: '#232323',
@@ -132,4 +133,22 @@ export default {
 	width: 100%;
 	// background: lightcoral;
 }
+
+.blue-title {
+	position: relative;
+	padding: 4px 0;
+	padding-left: 12px;
+	font-size: 14px;
+
+	&::before {
+		content: '';
+		position: absolute;
+		left: 0;
+		top: 6px;
+		height: 16px;
+		width: 4px;
+		border-radius: 1px;
+		background: #0b58ff;
+	}
+}
 </style>

src/views/monitoring/equipmentProcessAmount/index.vue

@@ -21,7 +21,7 @@
 				title="点击切换工厂"
 				@mouseenter="factoryListOpen = true"
 				@mouseleave="factoryListOpen = false">
-				{{ currentFactory?.label || '工厂名称' }}
+				{{ currentFactory?.label || '点我选择工厂' }}
 				<div class="factory-list__wrapper" :class="{ open: factoryListOpen }">
 					<ul
 						class="factory-list"
@@ -47,7 +47,7 @@
 					class="custom-tree-class"
 					:data="currentFactory?.children"
 					:props="treeProps"
-					:empty-text="' - 暂无数据 - '"
+					:empty-text="''"
 					icon-class="custom-icon-class"
 					@node-click="handleSidebarItemClick">
 					<!-- <div class="custom-tree-node" slot-scope="{ node, data }">
@@ -268,7 +268,8 @@ export default {
 			tableProps: [
 				{ prop: 'lineName', label: '产线' },
 				{ prop: 'sectionName', label: '工段' },
-				{ prop: 'externalCode', label: '设备编码' },
+				// { prop: 'externalCode', label: '设备编码' },
+				{ prop: 'equipmentId', label: '设备编码' },
 				{ prop: 'equipmentName', label: '设备名称' },
 				{ prop: 'totalQuantity', label: '加工数量' },
 			],
@@ -526,6 +527,7 @@ li {
 }
 
 .custom-tree-class >>> .el-tree-node__content {
+	width: 100%;
 	height: auto !important;
 	padding: 8px 12px !important;
 }

src/views/monitoring/equipmentRecentHours/index.vue

@@ -25,6 +25,8 @@
 </template>
 
 <script>
+import moment from 'moment';
+
 export default {
 	name: 'QualityRecentHours',
 	components: {},
@@ -62,7 +64,8 @@ export default {
 
 			for (const key of Object.keys(hourData).sort()) {
 				const subprop = {
-					label: key,
+					// label: 'key',
+					label: moment(key).format('YYYY-MM-DD HH:mm:ss'),
 					children: [
 						{ prop: key + '__in', label: '进数据' },
 						{ prop: key + '__out', label: '出数据' },
@@ -85,7 +88,11 @@ export default {
 			this.list.splice(0);
 			let rowIndex = 0;
 			for (const line of list) {
-				const { productLine, specification, data } = line;
+				const {
+					productLine,
+					specification = [],
+					data,
+				} = line;
 
 				// 设置span的行数
 				this.spanInfo[rowIndex] = data.length;

src/views/monitoring/equipmentStatusAndParams/index.vue

@@ -110,7 +110,7 @@ export default {
 				},
 				{
 					prop: 'statusRecordTime',
-					label: '状态量记录时间',
+					label: '状态记录时间',
 					width: 180,
 					filter: (val) => moment(val).format('yyyy-MM-DD HH:mm:ss'),
 				},
@@ -217,7 +217,7 @@ export default {
 			const { data } = await this.$axios({
 				url: '/base/equipment/listByLine',
 				method: 'get',
-				query: { id },
+				params: { id },
 			});
 			return data;
 		},

vue.config.js

@@ -8,7 +8,7 @@ function resolve(dir) {
 
 const CompressionPlugin = require('compression-webpack-plugin')
 
-const name = process.env.VUE_APP_TITLE || '芋道管理系统' // 网页标题
+const name = process.env.VUE_APP_TITLE || '中建材智能自动化研究院有限公司' // 网页标题
 
 const port = process.env.port || process.env.npm_config_port || 80 // 端口