update 设备产量时序图

src/views/equipment/timing-diagram/output/components/lineChart.vue

@@ -0,0 +1,49 @@
+<!-- 
+    filename: lineChart.vue
+    author: liubin
+    date: 2023-09-04 13:45:00
+    description: 
+-->
+
+<template>
+	<div class="line-chart"></div>
+</template>
+
+<script>
+import * as echarts from 'echarts';
+
+export default {
+	name: 'LineChart',
+	components: {},
+	props: ['config'],
+	data() {
+		return {
+			chart: null,
+		};
+	},
+	computed: {},
+	mounted() {
+		this.init();
+	},
+	beforeDestroy() {
+		if (this.chart) {
+			this.chart.dispose();
+		}
+	},
+	methods: {
+		init() {
+			console.log('thsi el', this.$el);
+			if (!this.chart) this.chart = echarts.init(this.$el);
+			this.chart.setOption(this.config);
+		},
+	},
+};
+</script>
+
+<style scoped lang="scss">
+.line-chart {
+	padding: 0 12px;
+	// background: #e1e1e1;
+	min-height: 320px;
+}
+</style>

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

@@ -15,46 +15,10 @@
 			@headBtnClick="handleSearchBarBtnClick" />
 
 		<div class="main-area">
-			<div class="legend-row">
-				<div class="legend">
-					<div class="icon running"></div>
-					<div>运行中</div>
-				</div>
-				<!-- <div class="legend">
-					<div class="icon waiting"></div>
-					<div>待机</div>
-				</div> -->
-				<div class="legend">
-					<div class="icon fault"></div>
-					<div>故障</div>
-				</div>
-				<!-- <div class="legend">
-					<div class="icon lack"></div>
-					<div>缺料</div>
-				</div>
-				<div class="legend">
-					<div class="icon full"></div>
-					<div>满料</div>
-				</div> -->
-				<div class="legend">
-					<div class="icon stop"></div>
-					<div>计划停机</div>
-				</div>
-			</div>
 			<div class="graphs" v-if="graphList.length">
-				<div class="graph" v-for="eq in graphList" :key="eq.key">
+				<div class="graph" v-for="eq,index in graphList" :key="eq.key">
 					<h2 class="graph-title">{{ eq.key }}</h2>
-					<div
+					<LineChart :key="eq.key + '__linechart'" :config="getRealConfig(index)" />
-						v-for="blc in eq"
-						:key="blc.startTime"
-						class="graph-item-fixed tick"
-						:class="{
-							running: blc.status == 0,
-							fault: blc.status == 2,
-							stop: blc.status == 1,
-						}"
-						:style="{ width: blc.duration * 2 + 'px' }"
-						:data-time="new Date(blc.startTime).toLocaleTimeString()"></div>
 				</div>
 			</div>
 			<h2 v-else>请添加设备</h2>
@@ -63,9 +27,11 @@
 </template>
 
 <script>
+import LineChart from './components/lineChart.vue';
+
 export default {
 	name: 'SGProduction',
-	components: {},
+	components: { LineChart },
 	props: {},
 	data() {
 		return {
@@ -119,9 +85,57 @@ export default {
 			queryParams: {
 				lineId: null,
 				sectionId: null,
+				equipmentId: null,
 				recordTime: [],
 			},
 			graphList: [],
+			templateConfig: {
+				grid: {
+					top: 88,
+					left: 56,
+					right: 56,
+					bottom: 56,
+				},
+				legend: {
+					top: 0,
+					left: 0,
+					padding: 5,
+					icon: 'roundRect',
+					itemWidth: 12,
+					itemHeight: 12,
+					itemGap: 20,
+					textStyle: {
+						fontSize: 14,
+						lineHeight: 14,
+					},
+				},
+				xAxis: {
+					type: 'category',
+					data: Array(24)
+						.fill(1)
+						.map((item, index) => `${index}:00`),
+				},
+				yAxis: {
+					type: 'value',
+					name: '产量',
+					nameLocation: 'end',
+					nameTextStyle: {
+						fontSize: 14,
+						align: 'right',
+					},
+					nameGap: 26,
+				},
+				series: [
+					{
+						name: '产线1',
+						data: Array(24)
+							.fill(1)
+							.map(() => Math.random() * 100),
+						type: 'line',
+						smooth: true,
+					},
+				],
+			},
 		};
 	},
 	created() {
@@ -130,25 +144,91 @@ export default {
 		this.getList();
 	},
 	methods: {
+		handleSearchBarBtnClick({ btnName, ...payload }) {
+			switch (btnName) {
+				case 'search':
+					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.getList();
+					break;
+				case 'compare':
+					this.$message.info('暂未实现该接口');
+					break;
+			}
+		},
+
 		/** 重置查询条件 */
 		initQuery() {
 			this.queryParams.lineId = null;
 			this.queryParams.sectionId = null;
+			this.queryParams.equipmentId = null;
 			this.queryParams.recordTime = [];
 		},
 
+		/** 对象到数组的转换 */
+		objectToArray(obj) {
+			return Object.keys(obj).map((key) => {
+				obj[key].sort((a, b) => a.startTime - b.startTime);
+				obj[key].key = key;
+				return obj[key];
+			});
+		},
+
 		async getList() {
 			const { code, data } = await this.$axios({
-				url: '/analysis/equipment-analysis/status',
+				url: '/analysis/equipment-analysis/quantity',
 				method: 'get',
 				params: this.queryParams,
 			});
 			if (code == 0) {
-				this.graphList = data;
+				this.graphList = this.objectToArray(data);
+				// const eq1 = [
+				// 	{ totalQuantity: 20, startTime: 1693964578000 },
+				// 	{ totalQuantity: 43, startTime: 1693964678000 },
+				// 	{ totalQuantity: 12, startTime: 1693964778000 },
+				// 	{ totalQuantity: 11, startTime: 1693964878000 },
+				// 	{ totalQuantity: 98, startTime: 1693965478000 },
+				// 	{ totalQuantity: 87, startTime: 1693965578000 },
+				// ];
+				// eq1.key = 'SS1';
+				// const eq2 = [
+				// 	{ totalQuantity: 23, startTime: 1693961578000 },
+				// 	{ totalQuantity: 42, startTime: 1693964578000 },
+				// 	{ totalQuantity: 51, startTime: 1693965578000 },
+				// 	{ totalQuantity: 18, startTime: 1693966578000 },
+				// 	{ totalQuantity: 77, startTime: 1693966778000 },
+				// 	{ totalQuantity: 38, startTime: 1693967578000 },
+				// 	{ totalQuantity: 57, startTime: 1693969578000 },
+				// ];
+				// eq2.key = 'SS2';
+				// this.graphList = [eq1, eq2];
 				console.log('graph list', this.graphList);
 			}
 		},
 
+		/** 获得设备产量 */
+		getEquipmentQuantity(equipmentArr) {
+			return equipmentArr.map((item) => item.totalQuantity);
+		},
+
+		/** 获得设备产量的时间 */
+		getTimeinfo(equipmentArr) {
+			return equipmentArr.map((item) => new Date(item.startTime).toLocaleTimeString());
+		},
+
+		getRealConfig(index) {
+			// if (!this.graphList || this.graphList.length == 0) return;
+			const config = JSON.parse(JSON.stringify(this.templateConfig));
+			// config.legend.data = this.graphList[index].key;
+			config.series[0].name = this.graphList[index]?.key;
+			// console.log("this.graphList?.[index]", this.graphList?.[index]);
+			config.series[0].data = this.getEquipmentQuantity(this.graphList?.[index] || []);
+			config.xAxis.data = this.getTimeinfo(this.graphList?.[index] || []);
+			return config;
+		},
+
 		/** 准备产线数据 */
 		async initProductline() {
 			const { code, data } = await this.$axios({

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

@@ -173,6 +173,7 @@ export default {
 			queryParams: {
 				lineId: null,
 				sectionId: null,
+				equipmentId: null,
 				recordTime: [],
 			},
 			graphList: [],
@@ -208,6 +209,7 @@ export default {
 		/** 重置查询条件 */
 		initQuery() {
 			this.queryParams.lineId = null;
+			this.queryParams.equipmentId = null;
 			this.queryParams.sectionId = null;
 			this.queryParams.recordTime = [];
 		},
@@ -270,6 +272,7 @@ export default {
 				case 'search':
 					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.getList();
 					break;