update

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/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 (typeof payload.recordTime == 'string') {
-						if (payload.recordTime.trim() !== '') {
+				if (0 == payload.dateFilterType) {
+					this.queryParams.recordTime = payload.timerange;
+				} else if (1 == payload.dateFilterType) {
 					this.queryParams.recordTime = [
-								`${payload.recordTime} 00:00:00`,
-								`${payload.recordTime} 23:59:59`,
+						`${payload.timeday} 00:00:00`,
+						`${payload.timeday} 23:59:59`,
 					];
 				}
-					} else {
-						this.queryParams.recordTime = payload.recordTime;
-					}
 			} 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数量] */
-				opt.push([eq.equipmentName, eq.okQuantity, eq.nokQuantity]);
+				/** [设备名, ok数量, 不ok数量, 加工数量, 合格率] */
+				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/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 class="graphs" v-if="graphList.length">
-					<div class="graph" v-for="eq in graphList" :key="eq.key">
+			<div
+				class="main-area"
+				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: '开始日期',
-					endPlaceholder: '结束日期',
-					defaultTime: ['00:00:00', '23:59:59'],
+					// startPlaceholder: '开始日期',
+					// endPlaceholder: '结束日期',
+					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: '产线' },
-				{ width: 128, prop: 'workshopSection', label: '工段' },
-				{ width: 128, prop: 'equipment', label: '设备名称' },
+				{ prop: 'productionLine', label: '产线' },
+				{ prop: 'workshopSection', 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;
 		},