驾驶舱

src/views/databoard/wholePlant/OrderStatus.vue

@@ -2,17 +2,21 @@
   <div style="flex: 1;">
     <Container name="订单完成情况" size="small" style="">
       <div style="padding: 5px 10px;">
-        <ScrollBoard :config = "config" width='575px' height='230px'/>
+        <dv-scroll-board :config="config" style="width:575px;height:230px" ref='orderScrollBoard'/>
       </div>
     </Container>
   </div>
 </template>
 <script>
 import Container from '../components/Container'
-import ScrollBoard from '../components/ScrollBoard'
 export default {
   name: 'OrderStatus',
-  components: { Container, ScrollBoard },
+  components: { Container },
+  computed: {
+    order() {
+      return this.$store.state.websocket.order
+    }
+  },
   data() {
     return {
       config: {
@@ -38,6 +42,20 @@ export default {
         rowNum: 6
       }
     }
+  },
+  watch:{
+    order: {
+			handler(newVal, oldVal) {
+        let outArr = this.order.map((item) => [
+          item.startProduceTime,
+          item.name,
+          item.specifications,
+          item.completeRate
+      ]);
+        this.config.data = outArr
+        this.$refs['orderScrollBoard'].updateRows(outArr)
+			}
+		}
   }
 }
 </script>

src/views/databoard/wholePlant/YieldRate.vue

@@ -1,20 +1,53 @@
 <template>
-  <div style="flex: 2;" class="aaa">
-    <Container name="本日生产良品率" size="small" style="">
-      <ScrollBoard :config = "config" width='575px' height='300px'/>
+  <div style="flex: 2;">
+    <Container name="本日生产良品率" size="small">
+      <div style="padding: 5px 10px;">
+        <dv-scroll-board :config="config" style="width:575px;height:230px" ref='yieldRateScrollBoard'/>
+      </div>
+      <KilnLine :horizontal="true" />
+      <div class="" style="flex: 2; padding: 8px">
+        <div
+          class="header-line"
+          style="margin: 8px 0 16px; display: flex; align-items: center">
+          <h2 class="" style="margin: 0; color: #0ee8fe; margin-right: 5px">
+            生产良品率
+          </h2>
+          <Switcher :showTitle='["班次详情","班次详情"]' @emitFun='changeType'/>
+          <div style="width: 169px;">
+            <span class="lgd lgd-total">总量</span>
+            <span class="lgd lgd-day" v-show='chartType'>白班</span>
+            <span class="lgd lgd-night" v-show='chartType'>夜班</span>
+          </div>
+          <div>
+            <SelectorBtnGroup :options="['日', '周', '月', '年']" @emitFun='toggleDate' :active='chartTime'/>
+          </div>
+        </div>
+        <div class="chart" style="height: 230px;">
+          <YieldRateChart :chartTime='chartTime' :chartType='chartType'/>
+        </div>
+      </div>
     </Container>
   </div>
 </template>
 <script>
-import Container from '../components/Container';
+import Container from '../components/Container'
 import ScrollBoard from '../components/ScrollBoard'
+import KilnLine from '../components/line'
+import Switcher from '../components/Switcher'
+import SelectorBtnGroup from '../components/SelectorBtnGroup';
+import YieldRateChart from '../components/YieldRateChart'
 export default {
   name: 'YieldRate',
-  components: { Container, ScrollBoard },
+  components: { Container, ScrollBoard, KilnLine, Switcher, SelectorBtnGroup, YieldRateChart },
+  computed: {
+    yieldRateTable() {
+      return this.$store.state.websocket.yieldRateTable
+    }
+  },
   data() {
     return {
       config: {
-        header: ['序号', '设备名称', '设备编码','设备状态','是否故障'],
+        header: ['产线', '一等率', '二等率','成品率','废品率'],
         // headerHeight: '17',
         headerBGC: 'rgba(32, 55, 96, 0.8)',
         oddRowBGC: 'rgba(32, 55, 96, 0.8)',
@@ -22,24 +55,71 @@ export default {
         columnWidth: [60],
         align: ['center'],
         data: [
-          [1, '设备1', '行1列3', '', ''],
-          [2, '设备2', '行2列3', '', ''],
-          [3, '设备3', '行3列3', '', ''],
-          [4, '设备4', '行4列3', '', ''],
-          [5, '设备5', '行5列3', '', ''],
-          [6, '设备6', '行6列3', '', ''],
-          [7, '设备7', '行7列3', '', ''],
-          [8, '设备8', '行8列3', '', ''],
-          [9, '设备9', '行9列3', '', ''],
-          [10, '设备10', '行10列3', '', '']
+          [1, '产线1', '49%', '', ''],
+          [2, '产线2', '49%', '', ''],
+          [3, '产线3', '49%', '', ''],
+          [4, '产线4', '49%', '', ''],
+          [5, '产线5', '49%', '', '']
         ],
-        rowNum: 10
-      }
+        rowNum: 5
+      },
+      chartType:false,
+      chartTime: "日"
     }
   },
+  watch:{
+    yieldRateTable: {
+			handler(newVal, oldVal) {
+        let outArr = this.yieldRateTable.map((item) => [
+          item.lineName,
+          item.first,
+          item.second,
+          item.product,
+          item.waste
+      ]);
+        this.config.data = outArr
+        this.$refs['yieldRateScrollBoard'].updateRows(outArr)
+			}
+		}
+  },
   methods: {
+    changeType(val) {
+      this.chartType = val
+    },
+    // 切换时间
+		toggleDate(val) {
+			this.chartTime = val
+		}
   }
 }
 </script>
-<style lang='scss'>
+<style lang='scss' scoped>
+.lgd {
+	color: #fff;
+
+	&:not(:last-child) {
+		margin-right: 12px;
+	}
+}
+
+.lgd::before {
+	content: '';
+	display: inline-block;
+	width: 8px;
+	height: 8px;
+	margin-right: 4px;
+	border-radius: 2px;
+}
+
+.lgd.lgd-total::before {
+	background-color: #ff9e00;
+}
+
+.lgd.lgd-day::before {
+	background-color: #08d8cd;
+}
+
+.lgd.lgd-night::before {
+	background-color: #0b58ff;
+}
 </style>