src/views/databoard/components/Container.vue

@@ -11,7 +11,7 @@
 			<i
 				class=""
 				style="display: inline-block; margin-left: 12px; padding-top: 4px">
-				<img :src="imgSrc" width="20" height="20" alt="" />
+				<img :src="imgSrc" width="24" height="24" alt="" />
 			</i>
 			<span
 				style="
@@ -107,6 +107,19 @@ export default {
 		background-size: 100% 100%;
 		background-position: 0 0;
 	}
+	&::after {
+		content: " ";
+    display: block;
+    position: absolute;
+    left: 0;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    // background: inherit;
+    /* 设置模糊，不用 filter */
+    backdrop-filter: blur(5px);
+    z-index: -1;
+	}
 }
 
 .container-body {

src/views/databoard/components/DefectChart.vue

@@ -158,7 +158,7 @@ export default {
         grid: { top: 90, right: 12, bottom: 20, left: 70 },
         legend: {
           top: 0,
-          left: 100,
+          left: 8,
           padding: 5,
           itemWidth: 12,
           itemHeight: 12,

src/views/databoard/components/EnergeMonitoringChart.vue

@@ -1,7 +1,7 @@
 <template>
   <div>
     <NotMsg v-show="notMsg"/>
-    <div id="energeMonitoringChart" class="energe-monitoring-chart" style="width:575px;height:370px;" v-show='!notMsg'></div>
+    <div id="energeMonitoringChart" class="energe-monitoring-chart" style="width:575px;height:420px;" v-show='!notMsg'></div>
   </div>
 </template>
 <script>
@@ -63,7 +63,7 @@ export default {
       }
       var option = {
         // color: ['#FF8A40','#FFD160','#99D66C','#5B9BFF','#8167F6','#2760FF'],
-        grid: { top: 32, right: 12, bottom: 20, left: 90 },
+        grid: { top: 82, right: 12, bottom: 20, left: 90 },
         tooltip: {
           trigger: 'axis',
           axisPointer: {
@@ -75,7 +75,11 @@ export default {
           className: "energe-monitoring-chart-tooltip"
         },
         legend: {
-          data: ['电耗能'],
+          itemWidth:10,
+          itemHeight:10,
+          top: '2.5%',
+					right: '0',
+          data: [{name:'电耗能',itemStyle:{color:'#364BFE'}}],
           textStyle: {
             color: "#DFF1FE",
             fontSize: 12,
@@ -157,6 +161,7 @@ export default {
 .energe-monitoring-chart {
 	width: 100%;
 	height: 100%;
+  top: -50px;
 }
 </style>
 <style>

src/views/databoard/components/FlueGasChart.vue

@@ -6,7 +6,7 @@
 </template>
 
 <script>
-import * as echarts from 'echarts';
+import * as echarts from 'echarts'
 import resize from './../mixins/resize'
 import NotMsg from './../components/NotMsg'
 
@@ -168,7 +168,8 @@ export default {
 					lineStyle: {
 							width: 1
 					},
-					symbolSize: 1,
+					symbol: 'circle',
+					symbolSize: 5,
 					emphasis: {
 							focus: 'series'
 					}

src/views/databoard/components/GasChart.vue

@@ -164,7 +164,8 @@ export default {
 					lineStyle: {
 							width: 1
 					},
-					symbolSize: 1,
+					symbol: 'circle',
+					symbolSize: 5,
 					emphasis: {
 							focus: 'series'
 					}

src/views/databoard/components/ISRAChart.vue

@@ -60,15 +60,15 @@ export default {
       }
 			this.chart = echarts.init(document.getElementById('israChart'));
 			var option = {
+				color:this.colors,
 				title:{
 					text: num,
 					subtext: '总数',
-					top: '43%',
+					top: '32%',
 					left: '49%',
 					textAlign: 'center',
 					textStyle: {
 						fontSize: 32,
-						lineHeight: 16,
 						color: '#fff',
 					},
 					subtextStyle: {
@@ -77,12 +77,20 @@ export default {
 					},
 				},
 				legend: {
-					bottom: '3%',
+					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缺陷检测',
@@ -96,9 +104,6 @@ export default {
 						labelLine: {
 							show: true,
 						},
-						itemStyle: {
-							borderRadius: 12
-						},
 						data: this.chartData && this.chartData.length > 0 && this.chartData.map((item, index) => ({
 						name:item.name,
 						value: item.num,

src/views/databoard/components/NumRateChart.vue

@@ -1,7 +1,7 @@
 <template>
   <div>
     <NotMsg v-show="notMsg"/>
-    <div id="numRateChart" class="num-rate-chart" style="width:900px;height:370px;" v-show='!notMsg'></div>
+    <div id="numRateChart" class="num-rate-chart" style="width:900px;height:420px;" v-show='!notMsg'></div>
   </div>
 </template>
 <script>
@@ -53,7 +53,7 @@ export default {
       this.productline && this.productline.length > 0 && this.productline.map(item => {
         xData.push(item.lineName)
         outputNum.push(item.outputNum)
-        passRate.push(item.passRate*100)
+        passRate.push(item.passRate?item.passRate*100:null)
       })
       if (
         this.chart !== null &&
@@ -64,7 +64,7 @@ export default {
       }
       this.chart = echarts.init(document.getElementById('numRateChart'));
       var option = {
-        grid: { top: 32, right: 60, bottom: 20, left: 60 },
+        grid: { top: 82, right: 60, bottom: 20, left: 60 },
         tooltip: {
           trigger: "axis",
           axisPointer: {
@@ -73,7 +73,15 @@ export default {
           className: "num-rate-chart-tooltip"
         },
         legend: {
-          data: ['产线产量', '良品率'],
+          itemWidth:10,
+          itemHeight:10,
+          top: '2.5%',
+					right: '20px',
+          icon: 'rect',
+          data: [
+            {name:'产线产量',itemStyle:{color:'#364BFE'}},
+            {name:'良品率',itemStyle:{color:'#FFCB59'}}
+          ],
           textStyle: {
             color: "#DFF1FE",
             fontSize: 12,
@@ -136,7 +144,10 @@ export default {
             axisLabel: {
               color: "#fff",
               fontSize: 12,
-              formatter: '{value} %'
+              formatter: () =>{
+                console.log(value)
+                return value ? '{value} %': '-'
+              }
             },
           axisLine: {
             show: true,
@@ -160,7 +171,7 @@ export default {
                 return value;
               }
             },
-            barWidth: 12,
+            barWidth: 20,
             itemStyle: {
               color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                 { offset: 0, color: '#5CB7FF' },
@@ -175,7 +186,7 @@ export default {
             yAxisIndex: 1,
             tooltip: {
               valueFormatter: function (value) {
-                return value + '%';
+                return value?value + '%':'-';
               }
             },
             itemStyle: {
@@ -191,6 +202,8 @@ export default {
             lineStyle: {
                 width: 1
             },
+            symbol: 'circle',
+					  symbolSize: 5,
             data: passRate
           }
         ]
@@ -204,6 +217,7 @@ export default {
 .num-rate-chart {
 	width: 100%;
 	height: 100%;
+  top: -50px;
 }
 </style>
 <style>

src/views/databoard/deepProcessing/index.vue

@@ -117,7 +117,7 @@ export default {
       screenfull.toggle(this.$refs.deepProcessingContainerB)
     },
 		resetSize() {
-      let deepProcessingContainer = document.querySelector('#deepProcessingContainer')
+      let deepProcessingContainer = document.getElementById('deepProcessingContainer')
       let rw = parseFloat(window.innerWidth)
       let rh = parseFloat(window.innerHeight)
       let bw = parseFloat(deepProcessingContainer.style.width)

src/views/databoard/kiln/GasHandle.vue

@@ -29,26 +29,26 @@
 					<div
 						style="
 							font-size: 20px;
-							line-height: 1.5;
+							line-height: 1.24;
 							flex: 1;
 							text-align: right;
-							padding-right: 8px;
+							padding:5px 8px 5px 0;
 							letter-spacing: 3px;
 						">
 						<p style="margin: 0; line-height: inherit">氮氧化物</p>
 						<p style="margin: 0; line-height: inherit">排放浓度</p>
 					</div>
-					<span style="font-size: 20px; line-height: 1.24; flex: 1">{{exhaustGasInfo?.NOX_float ? (Number(exhaustGasInfo.NOX_float)).toFixed(2) : ''}}mg/m³</span>
+					<span style="font-size: 20px; line-height: 1.24; flex: 1.2">{{exhaustGasInfo?.NOX_float ? (Number(exhaustGasInfo.NOX_float)).toFixed(2) : ''}}mg/m³</span>
 				</ShadowRect>
 
 				<ShadowRect>
 					<div
 						style="
 							font-size: 20px;
-							line-height: 1.5;
+							line-height: 1.24;
 							flex: 1;
 							text-align: right;
-							padding-right: 8px;
+							padding:5px 8px 5px 0;
 							letter-spacing: 3px;
 						">
 						<p style="margin: 0; line-height: inherit">二氧化硫</p>
@@ -69,7 +69,7 @@
 						">
 						颗粒物浓度
 					</span>
-					<span style="font-size: 20px; line-height: 1.24; flex: 1">{{exhaustGasInfo?.dust_float ? (Number(exhaustGasInfo.dust_float)).toFixed(2) : ''}}mg/m³</span>
+					<span style="font-size: 20px; line-height: 1.24; flex: 1.2">{{exhaustGasInfo?.dust_float ? (Number(exhaustGasInfo.dust_float)).toFixed(2) : ''}}mg/m³</span>
 				</ShadowRect>
 			</div>
 			<KilnLine :horizontal="true" />

src/views/databoard/kiln/index.vue

@@ -6,7 +6,7 @@
 			class="KilnDataBoard"
 			style="
 				position: absolute;
-				transform-origin: left top;
+				transform-origin: 16px 8px;
 				font-size: 16px;
 				top: 0px;
 				left: 0px;
@@ -110,7 +110,8 @@ export default {
       screenfull.toggle(this.$refs.kilnContainerB)
     },
 		resetSize() {
-      let kilnContainerBox = document.querySelector('#kilnContainer')
+      let kilnContainerBox = document.getElementById('kilnContainer')
+			console.log(kilnContainerBox)
       let rw = parseFloat(window.innerWidth)
       let rh = parseFloat(window.innerHeight)
       let bw = parseFloat(kilnContainerBox.style.width)

src/views/databoard/wholePlant/OrderStatus copy.vue

@@ -0,0 +1,98 @@
+<template>
+  <div style="flex: 1;" class="orderContainer">
+    <Container name="订单完成情况" size="small" style="">
+      <div style="padding: 5px 10px;">
+        <dv-scroll-board :config="config" style="width:575px;height:230px" ref='orderScrollBoard'/>
+      </div>
+      <button @click='bb'>aa</button>
+    </Container>
+  </div>
+</template>
+<script>
+import Container from '../components/Container'
+import { formatDate } from '@/utils'
+export default {
+  name: 'OrderStatus',
+  components: { Container },
+  computed: {
+    order() {
+      return this.$store.state.websocket.order
+    }
+  },
+  data() {
+    return {
+      config: {
+        header: ['上线时间', '客户名称', '规格','完成度'],
+        headerBGC: 'rgba(32, 55, 96, 0.8)',
+        oddRowBGC: 'rgba(32, 55, 96, 0.8)',
+        evenRowBGC: 'rgba(14, 32, 62, 0.8)',
+        columnWidth: [155, 180, 140],
+        data: [],
+        rowNum: 8
+      }
+    }
+  },
+  mounted() {},
+  methods:{
+    bb() {
+          let aaa = [
+      {planStartTime: '2022-12-12T23:23:23', customerName: '2', specifications:'3', completeRate:0},
+      {planStartTime: '2022-12-12T23:23:23', customerName: '2', specifications:'3', completeRate:0.1},
+      {planStartTime: '2022-12-12T23:23:23', customerName: '2', specifications:'3', completeRate:0.3},
+      {planStartTime: '2022-12-12T23:23:23', customerName: '2', specifications:'3', completeRate:0.4},
+      {planStartTime: '2022-12-12T23:23:23', customerName: '2', specifications:'3', completeRate:0.5},
+      {planStartTime: '2022-12-12T23:23:23', customerName: '2', specifications:'3', completeRate:0.7},
+      {planStartTime: '2022-12-12T23:23:23', customerName: '2', specifications:'3', completeRate:0.8},
+      {planStartTime: '2022-12-12T23:23:23', customerName: '2', specifications:'3', completeRate:1}
+    ]
+    let outArr = aaa.map((item) => [
+          formatDate(item.planStartTime) || '',
+          `<span title=${item.customerName || ''}>${item.customerName || ''}</span>`,
+          `<span title=${item.specifications || ''}>${item.specifications || ''}</span>`,
+          `<span style="display:inline-block;width:60px;">${item.completeRate?(item.completeRate*100).toFixed(2)+'%':'0%'}</span>
+          <div class="box" style="display:inline-block;">
+            <div class="bg"></div>
+            <div class="rount" style="-webkit-transform:rotate(${item.completeRate?((item.completeRate*100).toFixed(2)<=50?3.6*item.completeRate*100:180):0}deg)"></div>
+            <div class="bg2"></div>
+            <div style="${item.completeRate?(item.completeRate*100>50?'display:block;-webkit-transform:rotate('+3.6*(item.completeRate*100-50)+'deg)':'display:none;'):'display:none;'}" class="rount2"></div>
+          </div>`
+      ]);
+      this.config.data = outArr
+      this.$refs['orderScrollBoard'].updateRows(outArr)
+      }
+    }
+    
+  // }
+  // watch:{
+  //   order: {
+	// 		handler(newVal, oldVal) {
+  //       let outArr = this.order.map((item) => [
+  //         formatDate(item.planStartTime) || '',
+  //         `<span title=${item.customerName || ''}>${item.customerName || ''}</span>`,
+  //         `<span title=${item.specifications || ''}>${item.specifications || ''}</span>`,
+  //         `<span style="display:inline-block;width:40px;">${item.completeRate?(item.completeRate*100).toFixed(2)+'%':'0%'}</span>
+  //         <div class="box" style="display:inline-block;">
+  //           <div class="bg"></div>
+  //           <div class="rount" style="-webkit-transform:rotate(${item.completeRate?((item.completeRate*100).toFixed(2)<=50?3.6*item.completeRate*100:180):0}deg)"></div>
+  //           <div class="bg2"></div>
+  //           <div style="${item.completeRate?(item.completeRate*100>50?'display:block;-webkit-transform:rotate('+3.6*(item.completeRate*100-50)+'deg)':'display:none;'):'display:none;'}" class="rount2"></div>
+  //         </div>`
+  //     ]);
+  //     this.config.data = outArr
+  //     this.$refs['orderScrollBoard'].updateRows(outArr)
+	// 		}
+	// 	}
+  // }
+}
+</script>
+<style lang='scss'>
+.orderContainer {
+  .box{width:16px;height:12px;margin:auto;position:relative;}
+  .box div{position:absolute;top:0;left:0;border-radius:50%;height:16px;width:16px;-webkit-transition:all .2s ease-in-out;-moz-transition:all .2s ease-in-out;}
+  .box .bg{border:#283851 4px solid}
+
+  .box .bg2{border:#283851 4px solid;clip:rect(0,8px,20px,0);}
+  .box .rount{border:#47FF27 4px solid;clip:rect(0,8px,24px,0);-webkit-transform:rotate(0deg);}
+  .box .rount2{border:#47FF27 4px solid;clip:rect(0,40px,40px,8px);-webkit-transform:rotate(0deg);display:none}
+}
+</style>

src/views/databoard/wholePlant/OrderStatus.vue

@@ -25,7 +25,7 @@ export default {
         headerBGC: 'rgba(32, 55, 96, 0.8)',
         oddRowBGC: 'rgba(32, 55, 96, 0.8)',
         evenRowBGC: 'rgba(14, 32, 62, 0.8)',
-        columnWidth: [155, 180, 150],
+        columnWidth: [155, 160, 150],
         data: [],
         rowNum: 6
       }
@@ -34,17 +34,17 @@ export default {
   mounted() {},
   watch:{
     order:{
-			handler(newVal, oldVal) {
+      handler() {
         let outArr = this.order.map((item) => [
         formatDate(item.planStartTime) || '',
           `<span title=${item.customerName || ''}>${item.customerName || ''}</span>`,
           `<span title=${item.specifications || ''}>${item.specifications || ''}</span>`,
-          `<span style="display:inline-block;width:40px;">${item.completeRate?(item.completeRate*100).toFixed(2)+'%':'0%'}</span>
+          `<span style="display:inline-block;width:60px;">${item.completeRate?(item.completeRate*100).toFixed(2)+'%':'0%'}</span>
-          <div class="box" style="display:inline-block;">
+          <div style="display:inline-block;height:20px;margin-top:-5px;vertical-align:middle;">
-            <div class="bg"></div>
+            <svg xmlns="http://www.w3.org/200/svg" height="20" width="20">
-            <div class="rount" style="-webkit-transform:rotate(${(item.completeRate?(item.completeRate*100).toFixed(2):0)<=50?3.6*item.completeRate*100:180}deg)"></div>
+              <circle cx="10" cy="10" r="6" fill="none" stroke="#283851" stroke-width="4" stroke-linecap="round"/>
-            <div class="bg2"></div>
+              <circle style="transform-origin: center;transform: rotate(-90deg);" id="J_progress_bar" cx="10" cy="10" r="6" fill="none" stroke="#47FF27" stroke-width="4" stroke-dasharray="${item.completeRate?item.completeRate.toFixed(2)*37.68+','+((1-item.completeRate.toFixed(2))*37.68):(0+','+37.68)}"/>
-            <div style="${item.completeRate*100>50?'display:block;-webkit-transform:rotate('+3.6*(item.completeRate*100-50)+'deg)':'display:none;'}" class="rount2"></div>
+            </svg>
           </div>`
       ]);
       this.config.data = outArr
@@ -54,13 +54,3 @@ export default {
   }
 }
 </script>
-<style lang='scss'>
-.orderContainer {
-  .box{width:16px;height:12px;margin:1px auto;position:relative;}
-  .box div{position:absolute;top:0;left:0;border-radius:50%;height:16px;width:16px;-webkit-transition:all .2s ease-in-out;-moz-transition:all .2s ease-in-out;}
-  .box .bg{border:silver 4px solid}
-  .box .bg2{border:silver 4px solid;clip:rect(0,8px,20px,0);}
-  .box .rount{border:#47FF27 4px solid;clip:rect(0,8px,24px,0);-webkit-transform:rotate(0deg);}
-  .box .rount2{border:#47FF27 4px solid;clip:rect(0,40px,40px,8px);-webkit-transform:rotate(0deg);display:none}
-}
-</style>

src/views/databoard/wholePlant/index.vue

@@ -107,7 +107,7 @@ export default {
       screenfull.toggle(this.$refs.wholePlantContainerB)
     },
 		resetSize() {
-      let wholePlantContainerBox = document.querySelector('#wholePlantContainer')
+      let wholePlantContainerBox = document.getElementById('wholePlantContainer')
       let rw = parseFloat(window.innerWidth)
       let rh = parseFloat(window.innerHeight)
       let bw = parseFloat(wholePlantContainerBox.style.width)