修改看板

2024-01-29 15:55:16 +08:00
parent bd0636b458
commit 1045a5fbb0
11 changed files with 903 additions and 99 deletions
--- a/src/views/OperationalOverview/components/ISRAChart.vue
+++ b/src/views/OperationalOverview/components/ISRAChart.vue
@@ -0,0 +1,159 @@
+<!--
+ * @Author: zhp
+ * @Date: 2024-01-29 13:45:56
+ * @LastEditTime: 2024-01-29 14:56:38
+ * @LastEditors: zhp
+ * @Description:
+-->
+<template>
+	<div>
+		<!-- <NotMsg v-show="notMsg"/> -->
+		<div id="israChart" class="isra-chart" style="height:390px;"></div>
+	</div>
+</template>
+
+<script>
+import * as echarts from 'echarts';
+// import resize from './../mixins/resize'
+// import NotMsg from './../components/NotMsg'
+
+export default {
+	name: 'ISRAChart',
+	// mixins: [resize],
+	// components:{ NotMsg },
+	props: {},
+	data() {
+		return {
+			chart: null,
+			// notMsg:true,
+			colors:['#2760ff', '#518eec', '#0ee8e4', '#ddb523'],
+			chartData: []
+		};
+	},
+	activated() {
+	},
+	computed: {
+		israChartMsg() {
+			return this.$store.state.websocket.israKiln
+		}
+	},
+	watch: {
+		israChartMsg: {
+			handler(newVal, oldVal) {
+				this.chartData = newVal || []
+				this.updateChart()
+				this.$emit('emitFun')
+			}
+		}
+	},
+	methods: {
+		updateChart() {
+			console.log('update')
+			let num = 0
+			this.chartData && this.chartData.length > 0 && this.chartData.map(i => {
+				num+=i.num
+			})
+			if (
+        this.chart !== null &&
+        this.chart !== '' &&
+        this.chart !== undefined
+      ) {
+        this.chart.dispose()
+      }
+			// if (this.chartData && this.chartData.length > 0) {
+      //    this.notMsg = false
+      // } else {
+      //   this.notMsg = true
+			// 	return
+      // }
+			this.chart = echarts.init(document.getElementById('israChart'));
+			var option = {
+				color:this.colors,
+				title:{
+					text: num,
+					subtext: '总数',
+					top: '32%',
+					left: '49%',
+					textAlign: 'center',
+					textStyle: {
+						fontSize: 32,
+						color: '#fff',
+					},
+					subtextStyle: {
+						fontSize: 20,
+						color: '#fff00',
+					},
+				},
+				legend: {
+					bottom: '2%',
+					left: 'center',
+					itemWidth: 18,
+					itemHeight:18,
+					icon: 'circle',
+					textStyle: {
+						color: '#fff'
+					},
+					data:this.chartData && this.chartData.length > 0 && this.chartData.map((item,index)=>({
+						name:item.name,
+						itemStyle:{
+							color: this.colors[index%4]
+						}
+					}))
+				},
+				series:[{
+						name: 'ISRA缺陷检测',
+						type: 'pie',
+						center: ['50%', '40%'],
+						radius: ['45%', '70%'],
+						avoidLabelOverlap: true,
+						label: {
+							show: false
+						},
+						labelLine: {
+							show: true,
+						},
+						data: this.chartData && this.chartData.length > 0 && this.chartData.map((item, index) => ({
+						name:item.name,
+						value: item.num,
+						itemStyle:{
+							color:{
+								type: 'linear',
+								x: 1,
+								y: 1,
+								x2: 0,
+								y2: 0,
+								global: false,
+								colorStops:[
+									{offset: 0,color: this.colors[index%4]},
+									{offset: 1,color: this.colors[index%4]+'33'}
+								]
+							}
+						}
+					}))}],
+					tooltip: {
+						trigger: 'item',
+						className: "isra-chart-tooltip"
+					},
+			}
+			this.chart.setOption(option);
+		}
+	},
+};
+</script>
+
+<style scoped lang="scss">
+.isra-chart {
+	width: 100%;
+	height: 100%;
+}
+</style>
+<style>
+  .isra-chart-tooltip {
+    background: #0a2b4f77 !important;
+    border: none !important;
+    backdrop-filter: blur(12px);
+  }
+  .isra-chart-tooltip * {
+    color: #fff !important;
+  }
+</style>