极测 增加实验室看板

src/assets/scss/indexlab.scss

@@ -0,0 +1,159 @@
+#index {
+  color: #d3d6dd;
+  width: 1920px;
+  height: 1080px;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  transform-origin: left top;
+  overflow: hidden;
+  
+  .bg {
+    width: 100%;
+    height: 100%;
+    padding: 16px 16px 0 16px;
+    background-image: url("../../assets/pageBg.png");
+    background-size: cover;
+    background-position: center center;
+  }
+
+  .host-body {
+    .dv-dec-10,
+    .dv-dec-10-s {
+      width: 33.3%;
+      height: 5px;
+    }
+    .dv-dec-10-s {
+      transform: rotateY(180deg);
+    }
+    .dv-dec-8 {
+      width: 200px;
+      height: 50px;
+    }
+    .title {
+      position: relative;
+      width: 500px;
+      text-align: center;
+      background-size: cover;
+      background-repeat: no-repeat;
+
+      .title-text {
+        font-size: 26px;
+        position: absolute;
+        bottom: 0;
+        left: 50%;
+        transform: translate(-50%);
+      }
+
+      .dv-dec-6 {
+        position: absolute;
+        bottom: -30px;
+        left: 50%;
+        width: 250px;
+        height: 8px;
+        transform: translate(-50%);
+      }
+    }
+
+    // 第二行
+    .aside-width {
+      width: 40%;
+    }
+    .react-r-s,
+    .react-l-s {
+      background-color: #0f1325;
+    }
+
+    // 平行四边形
+    .react-right {
+      &.react-l-s {
+        text-align: right;
+        width: 500px;
+      }
+      font-size: 18px;
+      width: 300px;
+      line-height: 50px;
+      text-align: center;
+      transform: skewX(-45deg);
+
+      .react-after {
+        position: absolute;
+        right: -25px;
+        top: 0;
+        height: 50px;
+        width: 50px;
+        background-color: #0f1325;
+        transform: skewX(45deg);
+      }
+
+      .text {
+        display: inline-block;
+        transform: skewX(45deg);
+      }
+    }
+
+    .react-left {
+      &.react-l-s {
+        width: 500px;
+        text-align: left;
+      }
+      font-size: 20px;
+      width: 300px;
+      height: 50px;
+      line-height: 50px;
+      text-align: center;
+      transform: skewX(45deg);
+      background-color: #0f1325;
+
+      .react-left {
+        position: absolute;
+        left: -25px;
+        top: 0;
+        height: 50px;
+        width: 50px;
+        background-color: #1a5cd7;
+        transform: skewX(-45deg);
+      }
+
+      .text {
+        display: inline-block;
+        transform: skewX(-45deg);
+      }
+    }
+
+    .body-box {
+      margin-top: 10px;
+      display: flex;
+      flex-direction: column;
+      .content-box {
+        display: grid;
+        grid-template-columns: 6fr 4fr;
+        .threerow{
+          display: flex;
+          flex-direction: column;
+          .item{
+            flex: 1;
+            height: 315px;
+          }
+          .item1{
+            display: grid;
+            grid-template-columns: 2.8fr 1.2fr;
+          }
+        }
+        .tworow{
+          display: flex;
+          flex-direction: column;/* 每行三个单元格 */
+          .item{
+            flex: 1;
+          }
+        }
+      }
+      // 底部数据
+      .bottom-box {
+        display: grid;
+        grid-template-columns: 3fr 3fr;
+      }
+    }
+  }
+}

src/components/labechart/right1chart/chart.vue

@@ -0,0 +1,192 @@
+<template>
+  <div>
+    <Echart
+        :options="options"
+        id="right1Chart"
+        height="430px"
+        width="100%"
+        ref="column-board"
+    ></Echart>
+  </div>
+</template>
+
+<script>
+import Echart from '@/common/echart'
+export default {
+  data () {
+    return {
+      timing :null,
+      options:{
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'shadow'
+          }
+        },
+        legend: {
+          textStyle: {
+            fontSize: 18
+          },
+          itemWidth: 29,
+          itemHeight: 19
+        },
+        grid: {
+          left: '3%',
+          right: '4%',
+          bottom: '3%',
+          containLabel: true
+        },
+        xAxis: [
+          {
+            type: 'category',
+            data:[],
+            axisLabel: {
+              fontSize: 16,
+              fontWeight: "bold"
+            }
+          }
+        ],
+        yAxis: [
+          {
+            type: 'value',
+            axisLabel: {
+              fontSize: 16
+            }
+          },
+        ],
+        series: [
+          {
+            name: '投入',
+            type: 'bar',
+            barWidth: 15,
+            emphasis: {
+              focus: 'series'
+            },
+            data:[],
+            label: {
+              show: true,
+              position: 'top',
+              fontSize:14,
+              fontWeight: "bold"
+            },
+          },
+          {
+            name: '产出',
+            type: 'bar',
+            barWidth: 15,
+            stack: 'Ad',
+            emphasis: {
+              focus: 'series'
+            },
+            data:[],
+            label: {
+              show: true,
+              position: 'inside',
+              fontSize:14,
+              fontWeight: "bold"
+            },
+          },
+          {
+            name: '不良',
+            type: 'bar',
+            stack: 'Ad',
+            barWidth: 10,
+            data:[],
+            emphasis: {
+              focus: 'series'
+            }
+          },
+          {
+            name: 'UPH',
+            type: 'line',
+            barWidth: 15,
+            data:[],
+            emphasis: {
+              focus: 'series'
+            },lineStyle: {
+              width: 4
+            },
+            label: {
+              show: true,
+              position: 'top',
+              fontSize:14,
+              fontWeight: "bold"
+            }
+          }
+        ]
+      },
+    };
+  },
+  components: {
+    Echart, //子组件
+  },
+  props: {
+    cdata: {
+      type: Object,
+      default: () => ({})
+    },
+  },
+
+  mounted() {
+    this.getdata();
+    this.refreshdata();
+  },
+  beforeDestroy () {
+    clearInterval(this.timing)
+  },
+  methods: {
+    refreshdata() {
+      this.timing = setInterval(() => {
+        this.getdata(); //获取-数据
+      }, 10000);
+    },
+    async getdata() {
+      var caller = 'KB!WCDAYTURNOUT';
+      await this.$http.get("kanban/datalist.action?caller="+caller+"&_noc=1&page=1&pageSize=100",{
+        params: {
+          condition:"1=1",
+        }
+      }).then((result)=>{
+            let dataList = JSON.parse(result.data.data);
+            let xAxis0 = new Array();
+            let series0 = new Array();
+            let series1 = new Array();
+            let series2 = new Array();
+            let series3 = new Array();
+        var maxnumber=0;
+        for (let index = 0; index < dataList.length; index++) {
+          const element = dataList[index];
+          xAxis0.push(element.sp_wccode);
+          //xaxis
+          //投入
+          series0.push(element.v_inqty);
+          if(element.v_inqty>maxnumber){
+            maxnumber= element.v_inqty;
+          }
+          //产出
+          series1.push(element.v_outqty);
+          if(element.v_outqty>maxnumber){
+            maxnumber= element.v_outqty;
+          }
+          //不良
+          series2.push(element.v_ngqty);
+          //UPH
+          series3.push(element.v_uph);
+          if(element.v_uph>maxnumber){
+            maxnumber= element.v_uph;
+          }
+        }
+        this.options.xAxis[0].data = xAxis0;
+        this.options.series[0].data = series0;
+        this.options.series[1].data = series1;
+        this.options.series[2].data = series2;
+        this.options.series[3].data = series3;
+        this.options.yAxis[0].max = (maxnumber*1.2).toFixed();
+          },(result)=>{
+            console.error(result)
+          }
+      );
+    }
+  }
+}
+</script>

src/components/labechart/right1chart/index.vue

@@ -0,0 +1,44 @@
+<template>
+  <div>
+    <Chart :cdata="cdata" />
+  </div>
+</template>
+
+<script>
+import Chart from './chart.vue'
+export default {
+  data () {
+    return {
+      cdata: {
+        rateData:[
+        ]
+      }
+    };
+  },
+  components: {
+    Chart,
+  },
+  mounted () {
+    //this.setData();
+  },
+  beforeDestroy () {
+    clearInterval(this.intervalId);
+    this.chart.dispose()
+    this.chart.clear()
+    this.chart=null
+  },
+  methods: {
+    // 根据自己的业务情况修改
+    setData () {
+      for (let i = 0; i < this.cdata.barData.length -1; i++) {
+        let rate = this.cdata.barData[i] / this.cdata.lineData[i];
+        this.cdata.rateData.push(rate.toFixed(2));
+      }
+      console.log(this)
+    },
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+</style>

src/components/labechart/right2chart/chart.vue

@@ -0,0 +1,194 @@
+<template>
+  <div>
+    <!-- 年度开工率 -->
+    <Echart
+        :options="options"
+        id="right2Chart"
+        height="420px"
+        width="100%"
+        ref="column-board"
+    ></Echart>
+  </div>
+</template>
+
+<script>
+import Echart from '@/common/echart'
+//import { formatDate } from '../../../../utils/index.js'
+export default {
+  data () {
+    return {
+      timing :null,
+      options:{
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'shadow'
+          }
+        },
+        legend: {
+          textStyle: {
+            fontSize: 18
+          },
+          itemWidth: 29,
+          itemHeight: 19
+        },
+        grid: {
+          left: '3%',
+          right: '4%',
+          bottom: '3%',
+          containLabel: true
+        },
+        xAxis: [
+          {
+            type: 'category',
+            data:[],
+            axisLabel: {
+              fontSize: 16,
+              fontWeight: "bold"
+            }
+          }
+        ],
+        yAxis: [
+          {
+            type: 'value',
+            axisLabel: {
+              fontSize: 16
+            }
+          },
+        ],
+        series: [
+          {
+            name: '投入',
+            type: 'bar',
+            barWidth: 15,
+            emphasis: {
+              focus: 'series'
+            },
+            data:[],
+            label: {
+              show: true,
+              position: 'top',
+              fontSize:14,
+              fontWeight: "bold"
+            },
+          },
+          {
+            name: '产出',
+            type: 'bar',
+            barWidth: 15,
+            stack: 'Ad',
+            emphasis: {
+              focus: 'series'
+            },
+            data:[],
+            label: {
+              show: true,
+              position: 'inside',
+              fontSize:14,
+              fontWeight: "bold"
+            },
+          },
+          {
+            name: '不良',
+            type: 'bar',
+            stack: 'Ad',
+            barWidth: 10,
+            data:[],
+            emphasis: {
+              focus: 'series'
+            }
+          },
+          {
+            name: 'UPH',
+            type: 'line',
+            barWidth: 15,
+            data:[],
+            emphasis: {
+              focus: 'series'
+            },lineStyle: {
+              width: 4
+            },
+            label: {
+              show: true,
+              position: 'top',
+              fontSize:14,
+              fontWeight: "bold"
+            }
+          }
+        ]
+      },
+    };
+  },
+  components: {
+    Echart, //子组件
+  },
+  props: {
+    cdata: {
+      type: Object,
+      default: () => ({})
+    },
+  },
+
+  mounted() {
+    this.getdata();
+    this.refreshdata();
+  },
+  beforeDestroy () {
+    clearInterval(this.timing)
+  },
+  methods: {
+    refreshdata() {
+      this.timing = setInterval(() => {
+        this.getdata(); //获取-数据
+      }, 10000);
+    },
+    async getdata() {
+      //20220211 -+formatDate(new Date()
+      var caller = 'KB!WCDAYTURNOUT';
+      await this.$http.get("kanban/datalist.action?caller="+caller+"&_noc=1&page=1&pageSize=100",{
+        params: {
+          condition:"1=1",
+        }
+      }).then((result)=>{
+            let dataList = JSON.parse(result.data.data);
+            let xAxis0 = new Array();
+            let series0 = new Array();
+            let series1 = new Array();
+            let series2 = new Array();
+            let series3 = new Array();
+        var maxnumber=0;
+        for (let index = 0; index < dataList.length; index++) {
+          const element = dataList[index];
+          xAxis0.push(element.sp_wccode);
+          //投入
+          series0.push(element.v_inqty);
+          if(element.v_inqty>maxnumber){
+            maxnumber= element.v_inqty;
+          }
+          //产出
+          series1.push(element.v_outqty);
+          if(element.v_outqty>maxnumber){
+            maxnumber= element.v_outqty;
+          }
+          //不良
+          series2.push(element.v_ngqty);
+          //UPH
+          series3.push(element.v_uph);
+          if(element.v_uph>maxnumber){
+            maxnumber= element.v_uph;
+          }
+        }
+        this.options.xAxis[0].data = xAxis0;
+        this.options.series[0].data = series0;
+        this.options.series[1].data = series1;
+        this.options.series[2].data = series2;
+        this.options.series[3].data = series3;
+        this.options.yAxis[0].max = (maxnumber*1.2).toFixed();
+          },(result)=>{
+            console.error(result)
+          }
+      );
+    }
+  }
+}
+</script>

src/components/labechart/right2chart/index.vue

@@ -0,0 +1,44 @@
+<template>
+  <div>
+    <Chart :cdata="cdata" />
+  </div>
+</template>
+
+<script>
+import Chart from './chart.vue'
+export default {
+  data () {
+    return {
+      cdata: {
+        rateData:[
+        ]
+      }
+    };
+  },
+  components: {
+    Chart,
+  },
+  mounted () {
+    //this.setData();
+  },
+  beforeDestroy () {
+    clearInterval(this.intervalId);
+    this.chart.dispose()
+    this.chart.clear()
+    this.chart=null
+  },
+  methods: {
+    // 根据自己的业务情况修改
+    setData () {
+      for (let i = 0; i < this.cdata.barData.length -1; i++) {
+        let rate = this.cdata.barData[i] / this.cdata.lineData[i];
+        this.cdata.rateData.push(rate.toFixed(2));
+      }
+      console.log(this)
+    },
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+</style>

src/router/index.js

@@ -26,7 +26,7 @@ const routes = [{
     title: "SHOP",
     requireAuth: true // 标识该路由是否需要登录
   }
-},/*{
+},{
   path: '/lab',
   name: 'lab',
   component: () => import('../views/lab/index.vue'),
@@ -34,73 +34,8 @@ const routes = [{
     title: "LAB",
     requireAuth: true // 标识该路由是否需要登录
   }
-},*/{
-  path: '/smt',
-  name: 'smt',
-  component: () => import('../views/smt/index.vue'),
-  meta: {
-    title: "SMT",
-    requireAuth: true // 标识该路由是否需要登录
-  }
-},{
-  path: '/package',
-  name: 'package',
-  component: () => import('../views/package/index.vue'),
-  meta: {
-    title: "PACKAGE",
-    requireAuth: true // 标识该路由是否需要登录
-  }
-},{
-  path: '/assembly',
-  name: 'assembly',
-  component: () => import('../views/assembly/index.vue'),
-  meta: {
-    title: "ASSEMBLY",
-    requireAuth: true // 标识该路由是否需要登录
-  }
-},{
-  path: '/dpl',
-  name: 'dpl',
-  component: () => import('../views/dpl/index.vue'),
-  meta: {
-    title: "DPL",
-    requireAuth: true // 标识该路由是否需要
-  }
-},{
-  path: '/dj',
-  name: 'dj',
-  component: () => import('../views/dj/index.vue'),
-  meta: {
-    title: "DJ",
-    requireAuth: true // 标识该路由是否需要登录
-  }
-},{
-  path: '/dip',
-  name: 'dip',
-  component: () => import('../views/dip/index.vue'),
-  meta: {
-    title: "DIP",
-    requireAuth: true // 标识该路由是否需要登录
-  }
-},{
-  path: '/total',
-  name: 'total',
-  component: () => import('../views/total/index.vue'),
-  meta: {
-    title: "TOTAL",
-    requireAuth: true // 标识该路由是否需要登录
-  }
-},{
-  path: '/smttest',
-  name: 'smttest',
-  component: () => import('../views/smttest/index.vue'),
-  meta: {
-    title: "SMTTEST",
-    requireAuth: true // 标识该路由是否需要登录
-  }
 }]
 const router = new VueRouter({
   routes
 })
-
 export default router

src/views/lab/index.vue

@@ -32,7 +32,7 @@
               <span class="text fw-b" style="font-size:24px;">深圳市极测科技有限公司</span>
             </div>
             <div class="react-left ml-3">
-              <span class="text">生产实况分析</span>
+              <span class="text">实验室看板</span>
             </div>
           </div>
           <div class="d-flex aside-width">
@@ -52,14 +52,6 @@
                </el-dropdown-menu>
              </el-dropdown>
 
-              <el-select v-model="linecode" class="dropdown" @change ="handleBlur" style="width: 150px">
-                <el-option
-                        v-for="item in linedata"
-                        :key="item.LI_CODE"
-                        :label="item.LI_CODE"
-                        :value="item.LI_CODE"
-                ></el-option>
-              </el-select>
               <span class="text">&nbsp;&nbsp;&nbsp;&nbsp;</span>
               <span class="text"
                 >{{ dateYear }} {{ dateWeek }} {{ dateDay }}</span
@@ -72,44 +64,48 @@
           <!-- 第三行数据 -->
           <div class="content-box">
             <div>
-              <dv-border-box-12 v-show="linecode!='所有'">
-                <centerLeft_two />
-              </dv-border-box-12>
-              <dv-border-box-12 v-show="linecode=='所有'">
-                <centerLeft1ALL />
-              </dv-border-box-12>
+              <!-- 平均分成三行 -->
+              <div class="threerow">
+                <div class="item item1">
+                  <div >
+                    <dv-border-box-12>
+                      <left11 />
+                    </dv-border-box-12>
+                  </div>
+                  <div >
+                    <dv-border-box-12>
+                      <left12 />
+                    </dv-border-box-12>
+                  </div>
+                </div>
+                <div class="item">
+                  <dv-border-box-12>
+                    <left2 />
+                  </dv-border-box-12>
+                </div>
+                <div class="item">
+                  <dv-border-box-12>
+                    <left3 />
+                  </dv-border-box-12>
+                </div>
+              </div>
             </div>
             <div>
-              <dv-border-box-12>
-                <centerLeft1 />
-              </dv-border-box-12>
-            </div>
-            <!-- 中间 -->
-            <div>
-              <dv-border-box-12>
-                <center />
-              </dv-border-box-12>
-            </div>
-            <!-- 中间 -->
-            <!-- <div>
-               <centerRight2 />
-             </div>-->
-            <div>
-              <dv-border-box-12>
-                <centerRight1/>
-              </dv-border-box-12>
+              <!-- 平均分成两行 -->
+              <div class="tworow">
+                <div class="item">
+                  <dv-border-box-12>
+                    <right1 />
+                  </dv-border-box-12>
+                </div>
+                <div class="item">
+                  <dv-border-box-12>
+                    <right2 />
+                  </dv-border-box-12>
+                </div>
+              </div>
             </div>
           </div>
-
-          <!-- 第四行数据 -->
-          <div class="bottom-box">
-            <dv-border-box-12>
-              <bottomLeft2 />
-            </dv-border-box-12>
-            <dv-border-box-12>
-              <bottomRight />
-            </dv-border-box-12>
-          </div>
         </div>
       </div>
     </div>
@@ -119,14 +115,12 @@
 <script>
 import drawMixin from "../../utils/drawMixin";
 import { formatTime } from '../../utils/index.js'
-import centerLeft1 from './centerLeft1'
-import centerLeft_two from './centerLeft_two'
-import centerRight1 from './centerRight1'
-import center from './center'
-import bottomLeft2 from './bottomLeft2'
-import bottomRight from './bottomRight'
-import centerLeft1ALL from "@/views/assembly/centerLeft1ALL.vue";
-
+import left11 from './left1-1'
+import left12 from './left1-2'
+import left2 from './left2'
+import left3 from './left3'
+import right1 from './right1'
+import right2 from './right2'
 export default {
   mixins: [ drawMixin ],
   data() {
@@ -141,16 +135,14 @@ export default {
     }
   },
   components: {
-    centerLeft1ALL,
-    centerLeft1,
-    centerLeft_two,
-    centerRight1,
-    center,
-    bottomLeft2,
-    bottomRight,
+    left11,
+    left12,
+    left2,
+    left3,
+    right1,
+    right2
   },
   created() {
-    this.getLines();
   },
   mounted() {
     this.timeFn()
@@ -173,41 +165,12 @@ export default {
         this.loading = false
       }, 5000)
     },
-    handleBlur (val){
-      sessionStorage.setItem('li_code',val);
-      this.$cookie.set("AS_LI_CODE", val, {
-        expires: 30,
-      });
-      location.reload();
-    },
-    getLines (){
-      this.$http.get("kanban/getLinesByWorkCenter.action?wccode=组装").then(
-              (res)=>{
-                if(res.data.linedata) {
-                  const data = res.data.linedata.concat({'LI_CODE':'所有','LI_NAME':'所有'});
-                  if(this.$cookie.get("AS_LI_CODE") && data.some(item => item.LI_CODE === this.$cookie.get("AS_LI_CODE")) ){
-                    sessionStorage.setItem('li_code', this.$cookie.get("AS_LI_CODE"));
-                  }else {
-                    sessionStorage.setItem('li_code', data[0].LI_CODE);
-                    this.$cookie.set("AS_LI_CODE", data[0].LI_CODE, {
-                      expires: 30,
-                    });
-                  }
-                  this.linedata = data;
-                }else{
-                  sessionStorage.setItem('li_code','');
-                }
-                this.linecode = sessionStorage.getItem("li_code");
-              },(result)=>{
-                console.error(result)
-              });
-    }
   }
 }
 </script>
 
 <style lang="scss" scoped>
-@import '../../assets/scss/indexassembly.scss';
+@import '../../assets/scss/indexlab.scss';
 .dropdown{
   font-size: 18px;
   color: #568aea;

src/views/lab/left1-1.vue

@@ -0,0 +1,108 @@
+<template>
+  <div id="left1-1">
+    <div class="bg-color-black">
+      <div class="d-flex pt-2 pl-2">
+          <span>
+            <icon name="chart-line" class="text-icon"></icon>
+          </span>
+        <div class="d-flex">
+          <span class="fs-xxl text mx-2">设备精度校准&检验数据监控</span>
+        </div>
+      </div>
+      <div class="d-flex jc-center body-box">
+        <dv-scroll-board class="dv-scr-board" :config="config" ref="scroll-board" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      config: {
+        header:  ['设备编号', '设备名称','环境温度', '校准结果','检验时间','检验结果'],
+        data: [
+        ],
+        rowNum: 6, //表格行数
+        headerHeight: 35,
+        headerBGC: '#0f1325', //表头
+        oddRowBGC: '#0f1325', //奇数行
+        evenRowBGC: '#171c33', //偶数行
+        columnWidth: [150,130,130,120,120,120],
+        align: ['center']
+      },
+      timing :null
+    }
+  },
+  mounted() {
+    this.refreshdata()
+  },
+  beforeDestroy () {
+    clearInterval(this.timing)
+  },
+  methods: {
+    refreshdata() {
+      this.getdata(); //获取-数据
+      this.timing = setInterval(() => {
+        this.getdata(); //获取--数据
+      }, 10000);
+    },
+    async getdata() {
+      //1、设备精度校准&检验数据监控
+      var caller = 'KB!LABLeft1-1';
+      await this.$http.get("kanban/datalist.action?caller="+caller+"&_noc=1&page=1&pageSize=100",{
+        params: {
+          condition: "1=1",
+        }
+      }).then((result)=>{
+            let dataList = JSON.parse(result.data.data);
+            let resultList = new Array();
+            for (let index = 0; index < dataList.length; index++) {
+              const element = dataList[index];
+              let item = new Array();
+              item.push("<span  class='colorGrass'>"+element.v_devcode+"</span>");
+              item.push("<span  class='colorGrass'>"+element.v_devname+"</span>");
+              item.push("<span  class='colorGrass'>"+element.v_temperature +"</span>");
+              item.push("<span  class='colorGrass'>" + element.v_jztime + "</span>");
+              item.push("<span  class='colorGrass'>"+element.v_checktime+"</span>");
+              item.push("<span  class='colorGrass'>"+element.v_checkresult+"</span>");
+              resultList.push(item);
+            }
+            const scrollBoard = this.$refs['scroll-board'];
+            //刷新数据
+            scrollBoard.updateRows(resultList);
+          },(result)=>{
+            console.error(result)
+          }
+      );
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+$box-height: 315px;
+$box-width: 100%;
+#left1-1 {
+  padding: 13px;
+  height: $box-height;
+  width: $box-width;
+  border-radius: 5px;
+  .bg-color-black {
+    height: height - 26px;
+    border-radius: 10px;
+  }
+  .text {
+    color: #c3cbde;
+    //  font-size: 15px;
+  }
+  .body-box {
+    border-radius: 10px;
+     overflow: hidden;
+    .dv-scr-board {
+      height: 260px;
+    }
+  }
+}
+</style>

src/views/lab/left1-2.vue

@@ -0,0 +1,104 @@
+<template>
+  <div id="left1-2">
+    <div class="bg-color-black">
+      <div class="d-flex pt-2 pl-2">
+          <span>
+            <icon name="chart-line" class="text-icon"></icon>
+          </span>
+        <div class="d-flex">
+          <span class="fs-xxl text mx-2">能耗监控（单位：天）</span>
+        </div>
+      </div>
+      <div class="d-flex jc-center body-box">
+        <dv-scroll-board class="dv-scr-board" :config="config" ref="scroll-board" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      config: {
+        header:  ['名称', '电能记录(kWh)'],
+        data: [
+        ],
+        rowNum: 6, //表格行数
+        headerHeight: 35,
+        headerBGC: '#0f1325', //表头
+        oddRowBGC: '#0f1325', //奇数行
+        evenRowBGC: '#171c33', //偶数行
+        columnWidth: [145,125],
+        align: ['center']
+      },
+      timing :null
+    }
+  },
+  mounted() {
+    this.refreshdata()
+  },
+  beforeDestroy () {
+    clearInterval(this.timing)
+  },
+  methods: {
+    refreshdata() {
+      this.getdata(); //获取-数据
+      this.timing = setInterval(() => {
+        this.getdata(); //获取--数据
+      }, 10000);
+    },
+    async getdata() {
+      //能耗监控（单位：天）
+      var caller2 = 'KB!LABLeft1-2';
+      await this.$http.get("kanban/datalist.action?caller="+caller2+"&_noc=1&page=1&pageSize=100",{
+        params: {
+          condition: "1=1",
+        }
+      }).then((result)=>{
+            let dataList = JSON.parse(result.data.data);
+            let resultList = new Array();
+            for (let index = 0; index < dataList.length; index++) {
+              const element = dataList[index];
+              let item = new Array();
+              item.push("<span  class='colorGrass'>"+element.v_name+"</span>");
+              item.push("<span  class='colorGrass'>"+element.v_value+"</span>");
+              resultList.push(item);
+            }
+            const scrollBoard = this.$refs['scroll-board'];
+            //刷新数据
+            scrollBoard.updateRows(resultList);
+          },(result)=>{
+            console.error(result)
+          }
+      );
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+$box-height: 315px;
+$box-width: 100%;
+#left1-2 {
+  padding: 13px;
+  height: $box-height;
+  width: $box-width;
+  border-radius: 5px;
+  .bg-color-black {
+    height: height - 26px;
+    border-radius: 10px;
+  }
+  .text {
+    color: #c3cbde;
+    //  font-size: 15px;
+  }
+  .body-box {
+    border-radius: 10px;
+    overflow: hidden;
+    .dv-scr-board {
+      height: 260px;
+    }
+  }
+}
+</style>

src/views/lab/left2.vue

@@ -0,0 +1,109 @@
+<template>
+  <div id="left2">
+    <div class="bg-color-black">
+      <div class="d-flex pt-2 pl-2">
+          <span>
+            <icon name="chart-line" class="text-icon"></icon>
+          </span>
+        <div class="d-flex">
+          <span class="fs-xxl text mx-2">设备老化监控</span>
+        </div>
+      </div>
+      <div class="d-flex jc-center body-box">
+        <dv-scroll-board class="dv-scr-board" :config="config" ref="scroll-board" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      config: {
+        header:  ['设备编号', '设备名称','高温老化', '常温老化','老化结果'],
+        data: [
+        ],
+        rowNum: 6, //表格行数
+        headerHeight: 35,
+        headerBGC: '#0f1325', //表头
+        oddRowBGC: '#0f1325', //奇数行
+        evenRowBGC: '#171c33', //偶数行
+        columnWidth: [150,180,270,270,220],
+        align: ['center']
+      },
+      timing :null
+    }
+  },
+  mounted() {
+    this.refreshdata()
+  },
+  beforeDestroy () {
+    clearInterval(this.timing)
+  },
+  methods: {
+    refreshdata() {
+      this.getdata(); //获取-数据
+      this.timing = setInterval(() => {
+        this.getdata(); //获取--数据
+      }, 10000);
+    },
+    async getdata() {
+
+      //1、设备老化监控
+      var caller = 'KB!LABLeft2';
+      await this.$http.get("kanban/datalist.action?caller="+caller+"&_noc=1&page=1&pageSize=100",{
+        params: {
+          condition: "1=1",
+        }
+      }).then((result)=>{
+            let dataList = JSON.parse(result.data.data);
+            let resultList = new Array();
+            for (let index = 0; index < dataList.length; index++) {
+              const element = dataList[index];
+              let item = new Array();
+              item.push("<span  class='colorGrass'>"+element.v_devcode+"</span>");
+              item.push("<span  class='colorGrass'>"+element.v_devname+"</span>");
+              item.push("<span  class='colorGrass'>"+element.v_oldhremark +"</span>");
+              item.push("<span  class='colorGrass'>" + element.v_oldcremark + "</span>");
+              item.push("<span  class='colorGrass'>"+element.v_oldresult+"</span>");
+              resultList.push(item);
+            }
+            const scrollBoard = this.$refs['scroll-board'];
+            //刷新数据
+            scrollBoard.updateRows(resultList);
+          },(result)=>{
+            console.error(result)
+          }
+      );
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+$box-height: 100%;
+$box-width: 100%;
+#left2 {
+  padding: 13px;
+  height: $box-height;
+  width: $box-width;
+  border-radius: 5px;
+
+  .bg-color-black {
+    height: height - 26px;
+    border-radius: 10px;
+  }
+  .text {
+    color: #c3cbde;
+    //  font-size: 15px;
+  }
+  .body-box {
+    border-radius: 10px;
+    overflow: hidden;
+    .dv-scr-board {
+      height: 260px;
+    }
+  }
+}
+</style>

src/views/lab/left3.vue

@@ -0,0 +1,111 @@
+<template>
+  <div id="left3">
+    <div class="bg-color-black">
+      <div class="d-flex pt-2 pl-2">
+          <span>
+            <icon name="chart-line" class="text-icon"></icon>
+          </span>
+        <div class="d-flex">
+          <span class="fs-xxl text mx-2">设备状态监控</span>
+        </div>
+      </div>
+      <div class="d-flex jc-center body-box">
+        <dv-scroll-board class="dv-scr-board" :config="config" ref="scroll-board" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      config: {
+        header:  ['设备编号', '设备名称','运行状态', '工步状态','报警提示','报警时间','故障处理时间'],
+        data: [
+        ],
+        rowNum: 6, //表格行数
+        headerHeight: 35,
+        headerBGC: '#0f1325', //表头
+        oddRowBGC: '#0f1325', //奇数行
+        evenRowBGC: '#171c33', //偶数行
+        columnWidth: [150,180,130,120,130,160,160],
+        align: ['center']
+      },
+      timing :null
+    }
+  },
+  mounted() {
+    this.refreshdata()
+  },
+  beforeDestroy () {
+    clearInterval(this.timing)
+  },
+  methods: {
+    refreshdata() {
+      this.getdata(); //获取-数据
+      this.timing = setInterval(() => {
+        this.getdata(); //获取--数据
+      }, 10000);
+    },
+    async getdata() {
+
+      //1、设备状态监控
+      var caller = 'KB!LABLeft3';
+      await this.$http.get("kanban/datalist.action?caller="+caller+"&_noc=1&page=1&pageSize=100",{
+        params: {
+          condition: "1=1",
+        }
+      }).then((result)=>{
+            let dataList = JSON.parse(result.data.data);
+            let resultList = new Array();
+            for (let index = 0; index < dataList.length; index++) {
+              const element = dataList[index];
+              let item = new Array();
+              item.push("<span  class='colorGrass'>"+element.v_devcode+"</span>");
+              item.push("<span  class='colorGrass'>"+element.v_devname+"</span>");
+              item.push("<span  class='colorGrass'>"+element.v_runstatus +"</span>");
+              item.push("<span  class='colorGrass'>" + element.v_gbstatus + "</span>");
+              item.push("<span  class='colorGrass'>"+element.v_bjtip+"</span>");
+              item.push("<span  class='colorGrass'>"+element.v_bjtime+"</span>");
+              item.push("<span  class='colorGrass'>"+element.v_dealtime+"</span>");
+              resultList.push(item);
+            }
+            const scrollBoard = this.$refs['scroll-board'];
+            //刷新数据
+            scrollBoard.updateRows(resultList);
+          },(result)=>{
+            console.error(result)
+          }
+      );
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+$box-height: 100%;
+$box-width: 100%;
+#left3 {
+  padding: 13px;
+  height: $box-height;
+  width: $box-width;
+  border-radius: 5px;
+
+  .bg-color-black {
+    height: height - 26px;
+    border-radius: 10px;
+  }
+  .text {
+    color: #c3cbde;
+    //  font-size: 15px;
+  }
+  .body-box {
+    border-radius: 10px;
+    overflow: hidden;
+    .dv-scr-board {
+      height: 260px;
+    }
+  }
+}
+</style>

src/views/lab/right1.vue

@@ -0,0 +1,45 @@
+<template>
+  <div id="right1">
+    <div class="bg-color-black">
+      <div class="d-flex pt-2 pl-2">
+        <span>
+          <icon name="chart-bar" class="text-icon"></icon>
+        </span>
+        <div class="d-flex">
+          <span class="fs-xxl text mx-2">设备精度校准&检验数据监测</span>
+        </div>
+      </div>
+      <div>
+        <RightChart />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import RightChart  from '@/components/labechart/right1chart'
+export default {
+  components: {
+    RightChart
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+$box-height: 470px;
+$box-width: 100%;
+#right1 {
+  padding: 13px;
+  height: 470px;
+  width: $box-width;
+  border-radius: 5px;
+  .bg-color-black {
+    height: 470px - 26px;
+    border-radius: 10px;
+  }
+ /* .text {
+    color: #c3cbde;
+    font-size: 15px;
+  }*/
+}
+</style>

src/views/lab/right2.vue

@@ -0,0 +1,84 @@
+<template>
+  <div id="right2">
+    <div class="bg-color-black">
+      <div class="d-flex pt-2 pl-2 pb-3 ai-center flex-column">
+        <div class="d-flex ">
+          <span class="d-flex fs-ll text mx-2 colorBlue">全年电量：{{v_dianl}}度</span>
+        </div>
+      </div>
+      <div>
+        <RightChart />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import RightChart  from '@/components/labechart/right2chart'
+export default {
+  data() {
+    return {
+        v_dianl : 0
+    }
+  },
+  components: {
+    RightChart
+  },
+  props: {
+    cdata: {
+      type: Object,
+      default: () => ({})
+    },
+  },
+  mounted() {
+    this.getdata();
+    this.refreshdata();
+  },
+  beforeDestroy () {
+    clearInterval(this.timing)
+  },
+  methods: {
+    refreshdata() {
+      this.timing = setInterval(() => {
+        this.getdata(); //获取-数据
+      }, 10000);
+    },
+    async getdata() {
+       var caller = 'KB!LABYEARDL';
+      await this.$http.get("kanban/datalist.action?caller="+caller+"&_noc=1&page=1&pageSize=100",{
+        params: {
+          condition:"1=1",
+        }
+      }).then((result)=>{
+            let dataList = JSON.parse(result.data.data);
+            for (let index = 0; index < dataList.length; index++) {
+              const element = dataList[index];
+              this.v_dianl = element.v_dianl;
+            }
+          },(result)=>{
+            console.error(result)
+          }
+      );
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+$box-height: 470px;
+$box-width: 100%;
+#right2 {
+  padding: 13px;
+  height: $box-height;
+  width: $box-width;
+  border-radius: 5px;
+  .bg-color-black {
+    height: $box-height - 26px;
+    border-radius: 10px;
+  }
+  .fs-ll{
+    font-size: 30px;
+    font-weight: bold;
+  }
+}
+</style>