睿德看板调整

src/assets/scss/index.scss

@@ -130,7 +130,7 @@
       //下方区域的布局
       .content-box {
         display: grid;
-        grid-template-columns: 2fr 3fr 5fr 3fr 2fr;
+        grid-template-columns: 2fr 2.8fr 2.2fr 3fr 2fr 2fr;
       }
 
       // 底部数据

src/components/echart/bottom/bottomLeft2Chart/chart.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <!-- 年度开工率 -->
+    <!-- 当日工段投产良率 -->
     <Echart
       :options="options"
       id="bottomLeft2Chart"
@@ -55,7 +55,7 @@ export default {
 
         ],
         series: [
-          {
+        /*  {
             name: '投入',
             type: 'bar',
             barWidth: 20,
@@ -64,7 +64,7 @@ export default {
             },
             data:[]
             //data: [320, 332, 301, 334, 390, 330, 320]
-          },
+          },*/
           {
             name: '产出',
             type: 'bar',
@@ -134,10 +134,15 @@ export default {
     refreshdata() {
       setInterval(() => {
         this.getdata(); //获取-数据
-      }, 30000);
+      }, 10000);
     },
     async getdata() {
       //20220211 -+formatDate(new Date()
+      this.options.xAxis[0].data = [];
+      this.options.series[0].data = [];
+      this.options.series[1].data =[];
+      this.options.series[2].data = [];
+
       await this.$http.get("kanban/datalist.action?caller=WCDAYTURNOUT&_noc=1&page=1&pageSize=100&condition=1=1")
               .then((result)=>{
                         let dataList = JSON.parse(result.data.data);
@@ -145,24 +150,23 @@ export default {
                         let series0 = new Array();
                         let series1 = new Array();
                         let series2 = new Array();
-                        let series3 = new Array();
                         for (let index = 0; index < dataList.length; index++) {
                           const element = dataList[index];
                           xAxis0.push(element.sp_wccode);
                           //投入
-                          series0.push(element.v_inqty);
+                         // series0.push(element.v_inqty);
                           //产出
-                          series1.push(element.v_outqty);
+                          series0.push(element.v_outqty);
                           //不良
-                          series2.push(element.v_ngqty);
+                          series1.push(element.v_ngqty);
                           //良率
-                          series3.push(element.v_okrate);
+                          series2.push(element.v_okrate);
                         }
                         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.series[3].data = series3;
                        /*let myChart = this.$children[0].chart;
                        myChart.setOption({
                           xAxis: {

src/components/echart/bottom/bottomRightChart/chart.vue

@@ -3,7 +3,7 @@
     <Echart
       :options="options"
       id="bottomRightChart"
-      height="480px"
+      height="260px"
       width="628px"
     ></Echart>
   </div>
@@ -111,14 +111,14 @@ export default {
             subtext: newData.year + '/' + newData.weekCategory[6],
             subtextStyle: {
               color: '#fff',
-              fontSize: 16
+              fontSize: 13
             },
-            top: 50,
-            left: 80
+            top: 8,
+            left: 60
           },
           legend: {
-            top: 120,
-            left: 80,
+            top: 45,
+            left: 60,
             orient: 'vertical',
             itemGap: 15,
             itemWidth: 12,
@@ -126,7 +126,7 @@ export default {
             data: ['实际','平均'],
             textStyle: {
               color: '#fff',
-              fontSize: 14
+              fontSize: 13
             }
           },
           tooltip: {
@@ -134,7 +134,7 @@ export default {
           },
           radar: {
             center: ['68%', '27%'],
-            radius: '40%',
+            radius: '30%',
             name: {
               color: '#fff'
             },
@@ -178,13 +178,16 @@ export default {
                 name: '其他',
                 max: 100
               }
-            ]
+            ],
+            axisName: {
+              fontSize: 5
+            }
           },
           grid: {
-            left: 90,
+            left: 50,
             right: 80,
             bottom: 40,
-            top: '60%'
+            top: '50%'
           },
           xAxis: {
             type: 'category',

src/components/echart/bottom/bottomRightChart/index.vue

@@ -47,11 +47,11 @@ export default {
     },
     async setData () {
       // 清空轮询数据
-      /*this.cdata.weekCategory = [];
+      this.cdata.weekCategory = [];
       this.cdata.weekMaxData = [];
       this.cdata.weekLineData = [];
       this.cdata.radarData = [];
-      this.cdata.radarDataAvg = [];*/
+      this.cdata.radarDataAvg = [];
 
       let dateBase = new Date();
       this.cdata.year = dateBase.getFullYear();

src/components/echart/bottom/bottomRightNgChart/chart.vue

@@ -0,0 +1,99 @@
+<template>
+  <div>
+    <!-- 当日工段投产良率 -->
+    <Echart
+      :options="options"
+      id="bottomRightNgChart"
+      height="200px"
+      width="628px"
+      ref="column-board"
+    ></Echart>
+  </div>
+</template>
+
+<script>
+import Echart from '@/common/echart'
+//import { formatDate } from '../../../../utils/index.js'
+export default {
+  data () {
+    return {
+      options:{
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'shadow'
+          }
+        },
+        legend: {},
+        grid: {
+          left: '3%',
+          right: '4%',
+          bottom: '5%',
+          containLabel: true
+        },
+        xAxis: [
+          {
+            type: 'category',
+            data:[]
+          }
+        ],
+        yAxis: [
+          {
+            type: 'value',
+          }
+        ],
+        series: [
+          {
+            type: 'bar',
+            barWidth: 20,
+            stack: 'Ad',
+            data:[]
+          },
+        ]
+      },
+    };
+  },
+  components: {
+    Echart, //子组件
+  },
+  props: {
+    cdata: {
+      type: Object,
+      default: () => ({})
+    },
+  },
+
+  mounted() {
+    this.getdata();
+    this.refreshdata();
+  },
+  methods: {
+    refreshdata() {
+      setInterval(() => {
+        this.getdata(); //获取-数据
+      }, 10000);
+    },
+    async getdata() {
+      this.options.xAxis[0].data=[];
+      this.options.series[0].data=[];
+      await this.$http.get("kanban/datalist.action?caller=LINENGRATE&_noc=1&page=1&pageSize=100&condition=1=1")
+              .then((result)=>{
+                        let dataList = JSON.parse(result.data.data);
+                        let xAxis0 = new Array();
+                        let series0 = new Array();
+                        for (let index = 0; index < dataList.length; index++) {
+                          const element = dataList[index];
+                          xAxis0.push(element.linecode);
+                          //不良率
+                          series0.push(element.value);
+                        }
+                        this.options.xAxis[0].data = xAxis0;
+                        this.options.series[0].data = series0;
+                      },(result)=>{
+                        console.error(result)
+                      }
+              );
+    }
+  }
+}
+</script>

src/components/echart/bottom/bottomRightNgChart/index.vue

@@ -0,0 +1,43 @@
+<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));
+      }
+    },
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+</style>

src/components/echart/centerLeft/centerLeft1Chart/chart.vue

@@ -60,7 +60,6 @@ export default {
           },
           series: [
             {
-              name: "不良现象统计",
               type: "pie",
               radius: [15, 60],
               roseType: "area",

src/components/echart/centerLeft/centerLeft1Chart/index.vue

@@ -39,7 +39,7 @@ export default {
     refreshdata() {
       setInterval(() => {
         this.getdata(); //获取-数据
-      }, 30000);
+      }, 10000);
     },
     async getdata() {
       //20220211 -+formatDate(new Date()

src/components/echart/centerRight/centerChartRate/index.vue

@@ -4,8 +4,8 @@
     <Echart
       :options="options"
       :id="id"
-      height="200px"
-      width="200px"
+      height="100px"
+      width="100px"
     ></Echart>
   </div>
 </template>
@@ -59,7 +59,7 @@ export default {
             y: "center",
             textStyle: {
               color: this.colorObj.textStyle,
-              fontSize: 16
+              fontSize: 15
             }
           },
           series: [
@@ -88,7 +88,8 @@ export default {
                 {
                   value: 100 - newData
                 }
-              ]
+              ],
+              height: '90%',
             }
           ]
         }

src/components/echart/centerRight/centerRightChart/index.vue

@@ -59,7 +59,7 @@ export default {
       this.setData();
       setInterval(() => {
         this.setData(); //获取-数据
-      }, 30000);
+      }, 10000);
     },
     async setData () {
       // 清空轮询数据

src/views/bottomLeft2.vue

@@ -6,7 +6,7 @@
           <icon name="chart-bar" class="text-icon"></icon>
         </span>
         <div class="d-flex">
-          <span class="fs-xl text mx-2">当日工段投产良率</span>
+          <span class="fs-xl text mx-2">当日线体良率</span>
         </div>
       </div>
       <div>

src/views/bottomRight.vue

@@ -1,29 +1,47 @@
 <template>
   <div id="bottomRight">
-    <div class="bg-color-black">
-      <div class="d-flex pt-2 pl-2">
-        <span>
-          <icon name="chart-area" class="text-icon"></icon>
-        </span>
-        <div class="d-flex">
-          <span class="fs-xl text mx-2">质量趋势分析</span>
-          <div class="decoration2">
-            <dv-decoration-2 :reverse="true" style="width:5px;height:6rem;" />
+     <div class = "up">
+      <div class="bg-color-black">
+        <div class="d-flex pt-2 pl-2">
+          <span>
+            <icon name="chart-area" class="text-icon"></icon>
+          </span>
+          <div class="d-flex">
+            <span class="fs-xl text mx-2">质量趋势分析</span>
+            <div class="decoration2">
+              <dv-decoration-2 :reverse="true" style="width:5px;height:6rem;" />
+            </div>
           </div>
         </div>
+        <div>
+          <BottomRightChart />
+        </div>
       </div>
-      <div>
-        <BottomRightChart />
+     </div>
+
+    <div class="down">
+      <div class="bg-color-black">
+        <div class="d-flex pt-2 pl-2">
+          <div class="d-flex">
+            <span class="fs-xl text mx-2">线体不良率</span>
+          </div>
+        </div>
+        <div>
+          <BottomRightNgChart />
+        </div>
       </div>
     </div>
+
   </div>
 </template>
 
 <script>
 import BottomRightChart from "@/components/echart/bottom/bottomRightChart";
+import BottomRightNgChart from "@/components/echart/bottom/bottomRightNgChart";
 export default {
   components: {
-    BottomRightChart
+    BottomRightChart,
+    BottomRightNgChart
   }
 };
 </script>
@@ -32,29 +50,44 @@ export default {
 $box-height: 520px;
 $box-width: 628px; //100%;
 #bottomRight {
-  padding: 14px 16px;
+  padding: 8px 10px;
   height: $box-height;
   width: $box-width;
   border-radius: 5px;
-  .bg-color-black {
-    height: $box-height - 30px;
-    border-radius: 10px;
-  }
-  .text {
-    color: #c3cbde;
-    //font-size: 15px;
-  }
-  //下滑线动态
-  .decoration2 {
-    position: absolute;
-    right: 0.125rem;
+  display: flex;
+  flex-direction: column;
+  .up {
+    .bg-color-black {
+      border-radius: 10px;
+      height: 280px;
+    }
+
+    .text {
+      color: #c3cbde;
+      //font-size: 15px;
+    }
+
+    //下滑线动态
+    .decoration2 {
+      position: absolute;
+      right: 0.125rem;
+    }
+
+    .chart-box {
+      margin-top: 16px;
+      width: 90px;
+      height: 90px;
+      .active-ring-name {
+        padding-top: 10px;
+      }
+    }
   }
-  .chart-box {
-    margin-top: 16px;
-    width: 170px;
-    height: 170px;
-    .active-ring-name {
-      padding-top: 10px;
+
+  .down{
+    height: 220px;
+    .bg-color-black {
+      border-radius: 10px;
+      height: 220px;
     }
   }
 }

src/views/bottomRight2.vue

@@ -12,6 +12,9 @@
       <div class="d-flex jc-center body-box">
         <dv-scroll-board class="dv-scr-board" :config="config" ref="scroll-board" />
       </div>
+      <div class="d-flex jc-center body-box2">
+        <dv-scroll-board class="dv-scr-board" :config="config2" ref="scroll-board2" />
+      </div>
     </div>
   </div>
 </template>
@@ -42,7 +45,7 @@ export default {
           ['组件7',  "<span  class='colorGrass'>↑75%</span>"],
           ['组件8',  "<span  class='colorGrass'>↑75%</span>"]*/
         ],
-        rowNum: 8, //表格行数
+        rowNum: 4, //表格行数
         headerHeight: 35,
         headerBGC: '#0f1325', //表头
         oddRowBGC: '#0f1325', //奇数行
@@ -50,6 +53,16 @@ export default {
         index: true,
         columnWidth: [50,130],
         align: ['center']
+      },
+      config2: {
+        data: [],
+        rowNum: 4, //表格行数
+        headerBGC: '#0f1325', //表头
+        oddRowBGC: '#0f1325', //奇数行
+        evenRowBGC: '#171c33', //偶数行
+        index: true,
+        columnWidth: [50,130],
+        align: ['center']
       }
     }
   },
@@ -61,9 +74,11 @@ export default {
       this.getdata(); //获取-数据
       setInterval(() => {
         this.getdata(); //获取--数据
-      }, 30000);
+      }, 10000);
     },
     async getdata() {
+      //先清空数据
+      //大于等于98%
       await this.$http.get("kanban/datalist.action?caller=ATERATE&_noc=1&page=1&pageSize=100&condition=1=1")
           .then((result)=>{
                     let dataList = JSON.parse(result.data.data);
@@ -72,11 +87,7 @@ export default {
                       const element = dataList[index];
                       let item = new Array();
                       item.push(element.linecode);
-                      if(element.value<97.5) {
-                        item.push("<span  class='colorRed'>" + element.value + "</span>");
-                      }else{
-                        item.push("<span  class='colorGrass'>" + element.value + "</span>");
-                      }
+                      item.push("<span  class='colorGrass'>" + element.value + "</span>");
                       resultList.push(item);
                     }
                     const scrollBoard = this.$refs['scroll-board'];
@@ -86,6 +97,25 @@ export default {
                     console.error(result)
                     }
           );
+      //低于98%
+      await this.$http.get("kanban/datalist.action?caller=ATERATE2&_noc=1&page=1&pageSize=100&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(element.linecode);
+                          item.push("<span  class='colorRed'>" + element.value + "</span>");
+                          resultList.push(item);
+                        }
+                        const scrollBoard2 = this.$refs['scroll-board2'];
+                        //刷新数据
+                        scrollBoard2.updateRows(resultList);
+                      },(result)=>{
+                        console.error(result)
+                      }
+              );
     }
   }
 }
@@ -113,7 +143,15 @@ $box-width: 315px;
     overflow: hidden;
     .dv-scr-board {
       width: 270px;
-      height: 450px;
+      height: 250px;
+    }
+  }
+  .body-box2 {
+    border-radius: 10px;
+    overflow: hidden;
+    .dv-scr-board {
+      width: 270px;
+      height: 200px;
     }
   }
 }

src/views/bottomRightNg.vue

@@ -0,0 +1,98 @@
+<template>
+  <div id="bottomRight2">
+    <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-xl 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: 8, //表格行数
+        headerHeight: 35,
+        headerBGC: '#0f1325', //表头
+        oddRowBGC: '#0f1325', //奇数行
+        evenRowBGC: '#171c33', //偶数行
+        index: true,
+        columnWidth: [50,130],
+        align: ['center']
+      }
+    }
+  },
+  mounted() {
+    this.refreshdata()
+  },
+  methods: {
+    refreshdata() {
+      this.getdata(); //获取-数据
+      setInterval(() => {
+        this.getdata(); //获取--数据
+      }, 10000);
+    },
+    async getdata() {
+      await this.$http.get("kanban/datalist.action?caller=LINENGRATE&_noc=1&page=1&pageSize=100&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(element.linecode);
+                      item.push("<span  class='colorGrass'>" + element.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: 260px;
+$box-width: 628px;
+#bottomRight2 {
+  padding: 16px;
+  padding-top: 20px;
+  height: $box-height;
+  width: $box-width;
+  border-radius: 5px;
+  .bg-color-black {
+    height: $box-height - 30px;
+    border-radius: 10px;
+  }
+  .text {
+    color: #c3cbde;
+  //  font-size: 15px;
+  }
+  .body-box {
+    border-radius: 10px;
+    overflow: hidden;
+    .dv-scr-board {
+      width: 270px;
+      height: 450px;
+    }
+  }
+}
+</style>

src/views/center.vue

@@ -23,33 +23,12 @@
         <span class="fs-xl text mx-2 mb-1 pl-3">关键工序直通率</span>
         <dv-scroll-ranking-board class="dv-scr-rank-board mt-1" :config="ranking" ref="scroll-ranking-board"/>
       </div>
-      <div class="percent">
-        <div class="item bg-color-black">
-          <span>首检合格率</span>
-          <CenterChart
-            :id="rate[0].id"
-            :tips="rate[0].tips"
-            :colorObj="rate[0].colorData"
-          />
-        </div>
-        <div class="item bg-color-black">
-          <span>巡检合格率</span>
-          <CenterChart
-            :id="rate[1].id"
-            :tips="rate[1].tips"
-            :colorObj="rate[1].colorData"
-          />
-        </div>
-        <div class="water">
-          <dv-water-level-pond class="dv-wa-le-po" :config="water" />
-        </div>
-      </div>
     </div>
   </div>
 </template>
 
 <script>
-import CenterChart from '@/components/echart/center/centerChartRate'
+/*import CenterChart from '@/components/echart/center/centerChartRate'*/
 
 export default {
   data() {
@@ -58,6 +37,7 @@ export default {
       ranking: {
         data: [],
         carousel: 'single',
+        rowNum:3
         //unit: '人'
       },
       water: {
@@ -68,7 +48,7 @@ export default {
         waveHeight:20
       },
       // 通过率和达标率的组件复用数据
-      rate: [
+    /*  rate: [
         {
           id: 'centerRate1',
           tips: 60,
@@ -97,11 +77,11 @@ export default {
             }
           }
         }
-      ]
+      ]*/
     }
   },
   components: {
-    CenterChart
+   /* CenterChart*/
   },
   mounted () {
     this.drawTimingFn();
@@ -112,9 +92,11 @@ export default {
       this.setData();
       setInterval(() => {
         this.setData(); //获取-数据
-      }, 30000);
+      }, 10000);
     },
     async setData () {
+      this.ranking.data = [];
+      this.ranking = { ...this.ranking };
       // 首检任务数，完成数，合格数，巡检任务数，完成数，巡检合格数  name value
       await this.$http.get("kanban/datalist.action?caller=CheckData&_noc=1&page=1&pageSize=100&condition=1=1")
               .then((result)=>{
@@ -126,7 +108,6 @@ export default {
                             title: element.name,
                             number: {
                               number: [element.value],
-                              toFixed: 1,
                               textAlign: 'left',
                               content: '{nt}',
                               style: {
@@ -164,7 +145,7 @@ export default {
                       }
               );
       //饼图pie，首检合格率，巡检合格率
-      await this.$http.get("kanban/datalist.action?caller=PieCheckRate&_noc=1&page=1&pageSize=100&condition=1=1")
+      /*await this.$http.get("kanban/datalist.action?caller=PieCheckRate&_noc=1&page=1&pageSize=100&condition=1=1")
               .then((result)=>{
                         let dataList = JSON.parse(result.data.data);
                         this.rate[0].tips = dataList[0].firstcheckrate;
@@ -184,7 +165,7 @@ export default {
                       },(result)=>{
                         console.error(result)
                       }
-              );
+              );*/
     }
   }
 }
@@ -203,8 +184,8 @@ export default {
       border-radius: 6px;
       padding-top: 8px;
       margin-top: 8px;
-      width: 32%;
-      height: 70px;
+      width: 50%;
+      height: 65px;
       .dv-dig-flop {
         width: 150px;
         height: 30px;
@@ -216,16 +197,16 @@ export default {
     padding-bottom: 0;
     width: 100%;
     display: flex;
-    height: 255px;
+    height: 185px;
     justify-content: space-between;
     .bg-color-black {
       border-radius: 5px;
     }
     .ranking {
       padding: 10px;
-      width: 59%;
+      width: 100%;
       .dv-scr-rank-board {
-        height: 225px;
+        height: 140px;
       }
     }
     .percent {

src/views/centerLeft_two.vue

@@ -36,10 +36,12 @@ export default {
       this.settestdata(); //获取数据
       setInterval(() => {
         this.settestdata(); //获取-主题词
-      }, 30000);
+      }, 10000);
     },
     async settestdata(){
       //完成工单数统计
+      this.config.data = [];
+      this.config = { ...this.config };
       await this.$http.get("kanban/datalist.action?caller=MAKEQTY&_noc=1&page=1&pageSize=100&condition=1=1")
               .then((result)=>{
                         let dataList = JSON.parse(result.data.data);

src/views/centerOldData.vue

@@ -0,0 +1,98 @@
+<template>
+  <div id="centerRight1">
+    <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-xl 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: ['组件', '分支', '覆盖率'],
+        header: ['线别',  '老化数'],
+        data: [],
+        rowNum: 7, //表格行数
+        headerHeight: 35,
+        headerBGC: '#0f1325', //表头
+        oddRowBGC: '#0f1325', //奇数行
+        evenRowBGC: '#171c33', //偶数行
+        index: true,
+        columnWidth: [50,130],
+        align: ['center']
+      }
+    }
+  },
+  mounted() {
+    this.refreshdata()
+  },
+  methods: {
+    refreshdata() {
+      this.getdata(); //获取-数据
+      setInterval(() => {
+        this.getdata(); //获取--数据
+      }, 10000);
+    },
+    async getdata() {
+      await this.$http.get("kanban/datalist.action?caller=OldData&_noc=1&page=1&pageSize=100&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(element.linecode);
+                      item.push("<span  class='colorGrass'>"+element.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: 410px;
+$box-width: 300px;
+#centerRight1 {
+  padding: 16px;
+  padding-top: 20px;
+  height: $box-height;
+  width: $box-width;
+  border-radius: 5px;
+  .bg-color-black {
+    height: $box-height - 30px;
+    border-radius: 10px;
+  }
+  .text {
+    color: #c3cbde;
+  //  font-size: 15px;
+  }
+  .body-box {
+    border-radius: 10px;
+    overflow: hidden;
+    .dv-scr-board {
+      width: 270px;
+      height: 340px;
+    }
+  }
+}
+</style>

src/views/centerRight1.vue

@@ -72,7 +72,7 @@ export default {
 
       setInterval(() => {
         this.getdata(); //获取--数据
-      }, 30000);
+      }, 10000);
     },
     async getdata() {
     //  const {data} = await this.$http.get("kanban/panelView/parseData/2B247DC439B3?index=0&kanbanCode=2B23AC00BCFB");

src/views/centerRight2.vue

@@ -9,12 +9,17 @@
       </div>
       <div class="d-flex ai-center flex-column body-box">
         <dv-capsule-chart class="dv-cap-chart" :config="config" />
-		<span class="fs-xl text mx-2">设备保养执行率</span>
-         <CenterChart
-           :id="rate[0].id"
-           :tips="rate[0].tips"
-            :colorObj="rate[0].colorData"
-           />
+        <div class="percent">
+          <div class="item bg-color-black"   v-for="item in rate"
+             :key="item.id">
+            <span>{{ item.title }}</span>
+          <CenterChart
+            :id="item.id"
+            :tips="item.tips"
+            :colorObj="item.colorData"
+          />
+        </div>
+        </div>
       </div>
     </div>
   </div>
@@ -44,7 +49,77 @@ export default {
                   }
                 }
               }
+            },
+        {
+          id: 'centerRate2',
+          tips: 60,
+          colorData: {
+            textStyle: '#3fc0fb',
+            series: {
+              color: ['#00bcd44a', 'transparent'],
+              dataColor: {
+                normal: '#03a9f4',
+                shadowColor: '#97e2f5'
+              }
+            }
+          }
+        },
+        {
+          id: 'centerRate3',
+          tips: 60,
+          colorData: {
+            textStyle: '#3fc0fb',
+            series: {
+              color: ['#00bcd44a', 'transparent'],
+              dataColor: {
+                normal: '#03a9f4',
+                shadowColor: '#97e2f5'
+              }
+            }
+          }
+        },
+        {
+          id: 'centerRate4',
+          tips: 60,
+          colorData: {
+            textStyle: '#3fc0fb',
+            series: {
+              color: ['#00bcd44a', 'transparent'],
+              dataColor: {
+                normal: '#03a9f4',
+                shadowColor: '#97e2f5'
+              }
+            }
+          }
+        },
+        {
+          id: 'centerRate5',
+          tips: 60,
+          colorData: {
+            textStyle: '#3fc0fb',
+            series: {
+              color: ['#00bcd44a', 'transparent'],
+              dataColor: {
+                normal: '#03a9f4',
+                shadowColor: '#97e2f5'
+              }
+            }
+          }
+        },
+        {
+          id: 'centerRate6',
+          tips: 60,
+          colorData: {
+            textStyle: '#3fc0fb',
+            series: {
+              color: ['#00bcd44a', 'transparent'],
+              dataColor: {
+                normal: '#03a9f4',
+                shadowColor: '#97e2f5'
+              }
             }
+          }
+        }
       ]
     }
   },
@@ -58,10 +133,16 @@ export default {
       this.setData();
       setInterval(() => {
         this.setData(); //获取-数据
-      }, 30000);
+      }, 10000);
     },
     async setData () {
       // 设备类别维保执行情况
+      this.config.data = [];
+      this.config = { ...this.config };
+      for (let index = 0; index <6; index++) {
+        this.rate[index].tips = null;
+        this.rate[index].title = null;
+      }
       await this.$http.get("kanban/datalist.action?caller=DeviceMaintainData&_noc=1&page=1&pageSize=100&condition=1=1")
               .then((result)=>{
                         let dataList = JSON.parse(result.data.data);
@@ -81,10 +162,18 @@ export default {
               );
 
       //饼图pie，设备保养执行率
-      await this.$http.get("kanban/datalist.action?caller=DeviceMaintainRate&_noc=1&page=1&pageSize=100&condition=1=1")
-              .then((result)=>{
-                        let dataList = JSON.parse(result.data.data);
-                        this.rate[0].tips = dataList[0].rate
+
+       await this.$http.get("kanban/datalist.action?caller=DeviceMaintainRate&_noc=1&page=1&pageSize=100&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.rate[index].tips = element.rate;
+                           this.rate[index].title = element.title;
+                         }
+                       // this.rate[0].tips = dataList[0].rate;
+                       // this.rate[1].tips = dataList[1].rate;
+
                       },(result)=>{
                         console.error(result)
                       }
@@ -99,7 +188,7 @@ export default {
 <style lang="scss" scoped>
 #centerRight2 {
   $box-height: 410px;
-  $box-width: 340px;
+  $box-width: 360px;
   padding: 5px;
   height: $box-height;
   width: $box-width;
@@ -117,10 +206,28 @@ export default {
   .body-box {
     border-radius: 10px;
     overflow: hidden;
+    display: flex;
+    flex-wrap: wrap;
     .dv-cap-chart {
       width: 100%;
       height: 160px;
     }
+    .percent {
+      width: 100%;
+      display: flex;
+      flex-wrap: wrap;
+      .item {
+        width: 33%;
+        height: 110px;
+        span {
+          //margin-top: 8px;
+          font-size: 12px;
+          display: flex;
+          justify-content: center;
+        }
+      }
+    }
+
   }
 }
 </style>

src/views/index.vue

@@ -69,6 +69,11 @@
             <div>
               <centerRight2 />
             </div>
+            <div>
+              <dv-border-box-13>
+                <centerOldData/>
+              </dv-border-box-13>
+            </div>
             <div>
               <dv-border-box-13>
                 <centerRight1/>
@@ -84,6 +89,9 @@
             <dv-border-box-12>
               <bottomRight />
             </dv-border-box-12>
+           <!-- <dv-border-box-13>
+              <bottomRightNg />
+            </dv-border-box-13>-->
             <dv-border-box-13>
               <bottomRight2 />
             </dv-border-box-13>
@@ -105,6 +113,7 @@ import center from './center'
 import bottomLeft2 from './bottomLeft2'
 import bottomRight from './bottomRight'
 import bottomRight2 from './bottomRight2'
+import centerOldData from './centerOldData'
 
 export default {
   mixins: [ drawMixin ],
@@ -127,7 +136,8 @@ export default {
     center,
     bottomLeft2,
     bottomRight,
-    bottomRight2
+    bottomRight2,
+    centerOldData
   },
   mounted() {
     this.timeFn()

vue.config.js

@@ -11,7 +11,7 @@ module.exports = {
   devServer: {
     proxy: {
       "/mes":{           // /proxy_url 这个用来和根路径 baseURL 进行匹配
-        target:'http://mes.ubtob.net:8099/mes/',   // target: 'http://mes.ubtob.net:8099/mes/', http://221.179.64.162:8099/mes/， 'http://localhost:8099/uas/' ,这个是填写跨域的请求域名+端口号，也就是要请求的URL(不包含URL路径)
+        target:'http://221.179.64.162:8099/mes/',   // target: 'http://mes.ubtob.net:8099/mes/', http://221.179.64.162:8099/mes/， 'http://localhost:8099/uas/' ,这个是填写跨域的请求域名+端口号，也就是要请求的URL(不包含URL路径)
         changeOrigin: true,  // 是否允许跨域请求，在本地会创建一个虚拟服务端，然后发送请求的数据，并同时接收请求的数据，这样服务端和服务端进行数据的交互就不会有跨域问题
         pathRewrite: {   // 路径重写
           '^/mes': '' // 替换target中的请求地址，原请求为 http://127.0.0.1:8000/kuayu 实际请求为 http://127.0.0.1:8000/proxy_url/kuayu