update 产品质量分析chart

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

@@ -50,36 +50,46 @@ export default {
 	data() {
 		return {
 			searchBarKeys: ['name', 'code'],
+			// tableBtn: [
+			// 	this.$auth.hasPermi('base:equipment-group:update')
+			// 		? {
+			// 				type: 'edit',
+			// 				btnName: '修改',
+			// 		  }
+			// 		: undefined,
+			// 	this.$auth.hasPermi('base:equipment-group:delete')
+			// 		? {
+			// 				type: 'delete',
+			// 				btnName: '删除',
+			// 		  }
+			// 		: undefined,
+			// ].filter((v) => v),
 			tableBtn: [
-				this.$auth.hasPermi('base:equipment-group:update')
+				{
-					? {
 					type: 'edit',
 					btnName: '修改',
-					  }
+				},
-					: undefined,
+				{
-				this.$auth.hasPermi('base:equipment-group:delete')
-					? {
 					type: 'delete',
 					btnName: '删除',
-					  }
+				},
-					: undefined,
+			],
-			].filter((v) => v),
 			tableProps: [
 				{ prop: 'lineName', label: '产线' },
 				{ prop: 'sectionName', label: '工段' },
 				{ prop: 'equipmentName', label: '设备' },
 				{
-					width: 188,
+					width: 240,
 					prop: 'mtbf',
 					label: '平均故障间隔时间[MTBF](h)',
 				},
 				{
-					width: 180,
+					width: 240,
 					prop: 'mttr',
 					label: '平均维修时间[MTTR](h)',
 				},
-				{ prop: 'workTime', label: '工作时长(h)' },
+				{ width: 128, prop: 'workTime', label: '工作时长(h)' },
-				{ prop: 'downTime', label: '故障时长(h)' },
+				{ width: 128, prop: 'downTime', label: '故障时长(h)' },
 				{ prop: 'downCount', label: '故障次数' },
 			],
 			searchBarFormConfig: [
@@ -111,6 +121,8 @@ export default {
 			],
 			// 查询参数
 			queryParams: {
+				pageNo: 1,
+				pageSize: 10,
 				lineId: null,
 				factoryId: null,
 				recordTime: null,

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

@@ -15,27 +15,143 @@ import * as echarts from 'echarts';
 export default {
 	name: 'LineChart',
 	components: {},
-	props: ['config'],
+	props: ['config', 'list'],
 	data() {
 		return {
 			chart: null,
 		};
 	},
-	computed: {},
+	// watch: {
+	// 	list: {
+	// 		handler(listdata) {
+	// 			if (listdata && listdata.length) {
+	// 				console.log('[linechart] list changed', listdata);
+	// 				const option = this.handleList(listdata);
+	// 				this.setOption(option);
+	// 			}
+	// 		},
+	// 		immediate: true,
+	// 	},
+	// },
+	computed: {
+		option() {
+			const opt = [];
+			this.list.map((eq) => {
+				/** [设备名, ok数量, 不ok数量] */
+				opt.push([eq.equipmentName, eq.okQuantity, eq.nokQuantity]);
+			});
+			return {
+				color: ['#8EF0AB', '#288AFF'],
+				tooltip: {
+					trigger: 'axis',
+					axisPointer: {
+						type: 'shadow',
+					},
+				},
+				legend: {
+					itemWidth: 12,
+					itemHeight: 12,
+					right: 0,
+				},
+				grid: {
+					left: '1%',
+					right: '1%',
+					top: '8%',
+					bottom: '3%',
+					containLabel: true,
+				},
+				// xAxis: [
+				// 	{
+				// 		type: 'category',
+				// 		data: ['设备1', '设备2', '设备3', '设备4', '设备5'],
+				// 	},
+				// ],
+				// yAxis: [
+				// 	{
+				// 		type: 'value',
+				// 		splitLine: {
+				// 			lineStyle: {
+				// 				color: '#0001',
+				// 			},
+				// 		},
+				// 	},
+				// ],
+				xAxis: {
+					type: 'category',
+					axisTick: { show: false },
+					data: opt.map((item) => item[0]),
+				},
+				yAxis: {
+					type: 'value',
+					splitLine: {
+						lineStyle: {
+							color: '#0001',
+						},
+					},
+				},
+				series: [
+					{
+						name: '不合格数量',
+						type: 'bar',
+						barWidth: 20,
+						stack: 's',
+						data: opt.map((item) => item[2]),
+					},
+					{
+						name: '合格数量',
+						type: 'bar',
+						barWidth: 20,
+						stack: 's',
+						data: opt.map((item) => item[1]),
+					},
+				],
+			};
+		},
+	},
 	mounted() {
+		console.log('[linechart] mounted');
 		this.init();
 	},
 	beforeDestroy() {
 		if (this.chart) {
 			this.chart.dispose();
 		}
+		console.log('[linechart] destroyed');
 	},
 	methods: {
 		init() {
-			console.log('thsi el', this.$el);
 			if (!this.chart) this.chart = echarts.init(this.$el);
-			this.chart.setOption(this.config);
+			console.log('[linechart] initialized', this.$el);
+			this.$nextTick(() => {
+				this.setOption();
+			});
 		},
+
+		setOption() {
+			if (this.chart) this.chart.setOption(this.option);
+			console.log('[linechart] option settled');
+		},
+
+		// handleList(list) {
+		// 	/** 清空数据 */
+		// 	this.option.series[0].data.splice(0);
+		// 	this.option.series[1].data.splice(0);
+		// 	this.option.xAxis.data.splice(0);
+
+		// 	list.map((eq) => {
+		// 		this.option.xAxis.data.push(eq.equipmentName);
+		// 		this.option.series[0].data.push(eq.nokQuantity);
+		// 		this.option.series[1].data.push(eq.okQuantity);
+		// 	});
+
+		// 	this.setOption();
+
+		// 	// const pureList = list.map((eq) => ({
+		// 	// 	name: eq.equipmentName,
+		// 	// 	ok: eq.okQuantity,
+		// 	// 	nok: eq.nokQuantity,
+		// 	// }));
+		// },
 	},
 };
 </script>
@@ -43,7 +159,7 @@ export default {
 <style scoped lang="scss">
 .line-chart {
 	padding: 0 12px;
-	background: #e1e1e1;
+	height: 1px;
-	min-height: 320px;
+	flex: 1;
 }
 </style>

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

@@ -13,6 +13,13 @@
 			ref="search-bar"
 			@headBtnClick="handleSearchBarBtnClick" />
 
+		<el-row>
+			<el-col class="custom-tabs">
+				<el-tabs
+					v-model="activeName"
+					:stretch="true"
+					@tab-click="handleTabClick">
+					<el-tab-pane label="数据列表" name="table">
 						<!-- 列表 -->
 						<base-table
 							:table-props="tableProps"
@@ -20,17 +27,16 @@
 							:limit="queryParams.pageSize"
 							:table-data="list"
 							@emitFun="handleEmitFun"></base-table>
-
+					</el-tab-pane>
-		<!-- 图形分析 dialog -->
+					<el-tab-pane label="柱状图" name="graph">
-		<!-- <base-dialog
+						<div v-if="activeName == 'graph'" class="graph" style="height: 40vh; display: flex; flex-direction: column;">
-			dialogTitle="图形视角"
+							<div class="blue-title">各设备加工数量</div>
-			:dialogVisible="dialogVisible"
+							<LineChart :list="list" />
-			width="60%"
+						</div>
-			@close="dialogClose"
+					</el-tab-pane>
-			@cancel="dialogClose"
+				</el-tabs>
-			@confirm="dialogClose">
+			</el-col>
-			<LineChart v-if="dialogVisible" :config="lineChartConfig" />
+		</el-row>
-		</base-dialog> -->
 	</div>
 </template>
 
@@ -50,7 +56,7 @@ export default {
 			urls: {
 				page: '/analysis/equipment-analysis/quality',
 			},
-			mode: 'table', // defaults to 'table'
+			activeName: 'table', // defaults to 'table'
 			searchBarFormConfig: [
 				// 产品
 				{
@@ -242,6 +248,11 @@ export default {
 		this.getList();
 	},
 	methods: {
+		handleTabClick(tab, event) {
+			// console.log('tab event', tab, event);
+			// tab is el-tab vue component.
+		},
+
 		async fillLineOptions() {
 			const { data } = await this.$axios({
 				url: '/base/production-line/listAll',
@@ -353,4 +364,38 @@ export default {
 		}
 	}
 }
+
+:deep(.custom-tabs) {
+	.el-tabs__header {
+		margin-bottom: 8px;
+		display: inline-block;
+		transform: translateY(-12px);
+	}
+
+	.el-tabs__item {
+		padding-left: 8px !important;
+		padding-right: 8px !important;
+		line-height: 36px !important;
+		height: 36px;
+	}
+}
+
+.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

@@ -10,6 +10,7 @@
 		<div
 			class="app-container"
 			style="margin-right: 12px; border-radius: 8px; background: #fff">
+			<div class="factory-list" style="background: #ccc; height: 36px"></div>
 			<!-- side bar  -->
 			<div
 				class="side-bar__left"
@@ -30,7 +31,10 @@
 					ref="search-bar"
 					@headBtnClick="handleSearchBarBtnClick" />
 
-				<transition appear name="vvv" mode="out-in">
+				<el-row>
+					<el-col class="custom-tabs">
+						<el-tabs v-model="activeName" @tab-click="handleTabClick">
+							<el-tab-pane label="数据列表" name="table">
 								<base-table
 									v-if="mode == 'table'"
 									:table-props="tableProps"
@@ -45,13 +49,27 @@
 						:method-list="tableBtn"
 						@clickBtn="handleTableBtnClick" /> -->
 								</base-table>
-
+							</el-tab-pane>
-					<div class="graph" style="height: 56vh;" v-else>
+							<el-tab-pane label="柱状图" name="graph">
+								<div class="graph" style="height: 56vh">
 									<!-- graph  -->
 									<Graph v-if="list.length" :equipment-list="list" />
-						<div v-else style="color: #c7c7c7; text-align: center; margin-top: 20px;">没有设备</div>
+									<div
+										v-else
+										style="
+											color: #c7c7c7;
+											text-align: center;
+											margin-top: 20px;
+										">
+										没有设备
 									</div>
-				</transition>
+								</div>
+							</el-tab-pane>
+						</el-tabs>
+					</el-col>
+				</el-row>
+
+				<!-- <transition appear name="vvv" mode="out-in"></transition> -->
 			</div>
 		</div>
 	</div>
@@ -152,6 +170,7 @@ export default {
 				// 	],
 				// },
 			],
+			activeName: 'table',
 			searchBarFormConfig: [
 				{
 					type: 'datePicker',
@@ -172,23 +191,23 @@ export default {
 					name: 'search',
 					color: 'primary',
 				},
-				{
+				// {
-					type: 'separate',
+				// 	type: 'separate',
-				},
+				// },
-				{
+				// {
-					type: 'button',
+				// 	type: 'button',
-					btnName: '表格',
+				// 	btnName: '表格',
-					name: 'table',
+				// 	name: 'table',
-					plain: true,
+				// 	plain: true,
-					color: 'success',
+				// 	color: 'success',
-				},
+				// },
-				{
+				// {
-					type: 'button',
+				// 	type: 'button',
-					btnName: '图表',
+				// 	btnName: '图表',
-					name: 'graph',
+				// 	name: 'graph',
-					plain: true,
+				// 	plain: true,
-					color: 'warning',
+				// 	color: 'warning',
-				},
+				// },
 				// {
 				// 	type: this.$auth.hasPermi('base:equipment-group:export') ? 'button' : '',
 				// 	btnName: '导出',
@@ -197,11 +216,11 @@ export default {
 				// },
 			],
 			tableProps: [
-				{ prop: 'lineName', label: '产线',  },
+				{ prop: 'lineName', label: '产线' },
-				{ prop: 'sectionName', label: '工段',  },
+				{ prop: 'sectionName', label: '工段' },
-				{ prop: 'externalCode', label: '设备编码',  },
+				{ prop: 'externalCode', label: '设备编码' },
-				{ prop: 'equipmentName', label: '设备名称',  },
+				{ prop: 'equipmentName', label: '设备名称' },
-				{ prop: 'totalQuantity', label: '加工数量',  },
+				{ prop: 'totalQuantity', label: '加工数量' },
 			],
 			mode: 'table', // table | graph
 			queryParams: {
@@ -258,7 +277,11 @@ export default {
 			const { data } = await this.$axios('/base/factory/getTree');
 			this.sidebarContent = data;
 			this.buildTree(data);
-			console.log('tree', this.sidebarContent)
+			console.log('tree', this.sidebarContent);
+		},
+
+		handleTabClick(tab, event) {
+			console.log('handle tab click: ', tab, event);
 		},
 
 		handleSidebarItemClick({ label, id, type }) {
@@ -339,4 +362,16 @@ export default {
 	/* transform: translateY(0) scaleY(1); */
 	transform: translateY(0);
 }
+
+.custom-tabs >>> .el-tabs__header {
+	margin-bottom: 8px;
+	display: inline-block;
+	transform: translateY(-12px);
+}
+.custom-tabs >>> .el-tabs__item {
+	padding-left: 8px !important;
+	padding-right: 8px !important;
+	line-height: 36px !important;
+	height: 36px;
+}
 </style>