1

2024-01-29 16:01:23 +08:00
parent c6e0e0bd2f ccce85ce21
commit 4af038ffca
11 changed files with 901 additions and 97 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>
--- a/src/views/OperationalOverview/components/baseContainer/index.vue
+++ b/src/views/OperationalOverview/components/baseContainer/index.vue
@@ -2,7 +2,7 @@
 * @Author: gtz
 * @Date: 2022-01-19 15:58:17
 * @LastEditors: zhp
- * @LastEditTime: 2024-01-24 17:01:21
+ * @LastEditTime: 2024-01-29 15:35:37
 * @Description: file content
 * @FilePath: \mt-bus-fe\src\views\OperationalOverview\components\baseContainer\index.vue
 -->
@@ -27,9 +27,12 @@
          <svg-icon :icon-class="titleIcon" style="font-size: 1em; position: relative; top: .08em" />
          {{ title }}
        </span>
-        <!-- <span style="font-size: 20px;color:#52FFF8;margin-left: 10px;margin-top: 2px;">
-          {{ time +'-'+ time2 }}
+        <!-- <span v-if="showTime" style="font-size: 20px;color:#52FFF8;margin-left: 10px;margin-top: 2px;">
+          {{ time2 +'-'+ time }}
        </span> -->
+        <span  style="font-size: 20px;color:#52FFF8;margin-left: 10px;margin-top: 2px;">
+          {{ startTime + '-' + endTime }}
+        </span>
      </div>
      <!-- <div v-if="true" class="bar-title">
        <span>
@@ -45,6 +48,7 @@
 </template>

 <script>
+import moment from "moment";
 export default {
  name: 'BaseContainer',
  props: {
@@ -56,6 +60,14 @@ export default {
      type: Boolean,
      default: false
    },
+    showTime: {
+      type: Boolean,
+      default: false
+    },
+    showYesTime: {
+      type: Boolean,
+      default: false
+    },
    back: {
      type: String,
      default: ''
@@ -93,38 +105,52 @@ export default {
    return {
      curIndex: 0,
      time: null,
-      time2:null
+      time2: null,
+      startTime: undefined,
+      endTime: undefined
      // imgUrl: require(`../../../../assets/img/${this.back}.png`),
    }
  },
  created() {
  },
  mounted () {
-    this.time = this.format(new Date().setHours(7,0,0));
-    // console.log(time);
-    //前一天时间
-    this.time2 = this.format(new Date().setHours(7, 0, 0) - 86400000 * 1);
-    console.log(new Date().setHours(7, 0, 0) - 86400000 * 1);
+    // this.time = this.format(new Date().setHours(7,0,0));
+    // // console.log(time);
+    // //前一天时间
+    let nowTime = new Date
+    let hour = nowTime.getHours()
+    if (hour > 6) {
+      this.startTime = moment(nowTime).format('yyyy.MM.DD') + ' 7点'
+      this.endTime = moment(moment(nowTime) + 86400000).format('yyyy.MM.DD') + ' 7点'
+    } else {
+      this.endTime = moment(nowTime).format('yyyy.MM.DD') + ' 7点'
+      this.startTime = moment(moment(nowTime) - 86400000).format('yyyy.MM.DD') + ' 7点'
+    }
+    // this.yesStartTime = moment(moment(nowTime) - 86400000).format('yyyy.MM.DD') + ' 0点'
+    // this.yesEndTime = moment(moment(nowTime) - 86400000).format('yyyy.MM.DD') + ' 24点'
+
+    // this.time2 = this.format(new Date().setHours(7, 0, 0) - 86400000 * 1);
+    // console.log(new Date().setHours(7, 0, 0) - 86400000 * 1);
  },
  methods: {
-    add0(m) {
-      return m < 10 ? '0' + m : m
-    },
-    format(shijianchuo) {
-      //shijianchuo是整数，否则要parseInt转换
-      var time = new Date(shijianchuo);
-      var y = time.getFullYear();
-      var m = time.getMonth() + 1;
-      var d = time.getDate();
-      var h = time.getHours();
-      var mm = time.getMinutes();
-      var s = time.getSeconds();
-      return y + '-' + this.add0(m) + '-' + this.add0(d) + ' ' + h + '时'
-    },
-    changeTab(num) {
-      this.curIndex = num
-      this.$emit('tabSelect', num)
-    },
+    // add0(m) {
+    //   return m < 10 ? '0' + m : m
+    // },
+    // format(shijianchuo) {
+    //   //shijianchuo是整数，否则要parseInt转换
+    //   var time = new Date(shijianchuo);
+    //   var y = time.getFullYear();
+    //   var m = time.getMonth() + 1;
+    //   var d = time.getDate();
+    //   var h = time.getHours();
+    //   var mm = time.getMinutes();
+    //   var s = time.getSeconds();
+    //   return y + '-' + this.add0(m) + '-' + this.add0(d) + ' ' + h + '时'
+    // },
+    // changeTab(num) {
+    //   this.curIndex = num
+    //   this.$emit('tabSelect', num)
+    // },
  }
 }
 </script>
--- a/src/views/OperationalOverview/components/coldDoubleYChart.vue
+++ b/src/views/OperationalOverview/components/coldDoubleYChart.vue
@@ -2,7 +2,7 @@
 <!--
 * @Author: zhp
 * @Date: 2023-09-21 09:06:28
- * @LastEditTime: 2024-01-17 15:26:04
+ * @LastEditTime: 2024-01-29 15:39:59
 * @LastEditors: zhp
 * @Description:
 -->
@@ -159,7 +159,7 @@ export default {
          itemWidth: 10,
          itemHeight: 10,
          top: '1%',
-          right: '20px',
+          // right: '20px',
          data: ['产线产量', '产线良品率'],
          textStyle: {
            fontSize: 12 * this.beilv,
@@ -287,6 +287,6 @@ export default {
 </script>
 <style>
 .productChart{
-  top: -40px;
+  top: -10px;
 }
 </style>
--- a/src/views/OperationalOverview/components/doubleYChart
+++ b/src/views/OperationalOverview/components/doubleYChart
@@ -1,7 +1,7 @@
 <!--
 * @Author: zhp
 * @Date: 2023-09-21 09:06:28
- * @LastEditTime: 2024-01-17 13:56:46
+ * @LastEditTime: 2024-01-29 15:14:40
 * @LastEditors: zhp
 * @Description:
 -->
@@ -190,12 +190,12 @@ export default {
        // },
        yAxis: [
          {
-            min: function() { // 取最小值向下取整为最小刻度
-              return 0
-            },
-            max: function(value) { // 取最大值向上取整为最大刻度
-              return Math.ceil(value.max)
-            },
+            // min: function() { // 取最小值向下取整为最小刻度
+            //   return 0
+            // },
+            // max: function(value) { // 取最大值向上取整为最大刻度
+            //   return Math.ceil(value.max)
+            // },
            scale: true,
            type: 'value',
            name: '良品率/%',
@@ -233,12 +233,12 @@ export default {
            // },
          },
          {
-            min: function() { // 取最小值向下取整为最小刻度
-              return 0
-            },
-            max: function(value) { // 取最大值向上取整为最大刻度
-              return Math.ceil(value.max)
-            },
+            // min: function() { // 取最小值向下取整为最小刻度
+            //   return 0
+            // },
+            // max: function(value) { // 取最大值向上取整为最大刻度
+            //   return Math.ceil(value.max)
+            // },
            scale: true,
            type: 'value',
            name: '产量/㎡', // y轴上方的单位