普耐尔看板修改

package-lock.json

@@ -20,6 +20,7 @@
         "less-loader": "^6.0.0",
         "vue": "^2.6.11",
         "vue-awesome": "^4.0.2",
+        "vue-moment": "^4.1.0",
         "vue-router": "^3.1.5",
         "vuex": "^3.1.2"
       },
@@ -10668,6 +10669,14 @@
         "mkdirp": "bin/cmd.js"
       }
     },
+    "node_modules/moment": {
+      "version": "2.30.1",
+      "resolved": "https://registry.npmmirror.com/moment/-/moment-2.30.1.tgz",
+      "integrity": "sha512-uEmtNhbDOrWPFS+hdjFCBfy9f2YoyzRpwcl+DqpC6taX21FzsTLQVbMV/W7PzNSX6x/bhC1zA3c2UQ5NzH6how==",
+      "engines": {
+        "node": "*"
+      }
+    },
     "node_modules/move-concurrently": {
       "version": "1.0.1",
       "resolved": "https://registry.npmmirror.com/move-concurrently/-/move-concurrently-1.0.1.tgz",
@@ -16118,6 +16127,17 @@
         "node": ">=4.0.0"
       }
     },
+    "node_modules/vue-moment": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmmirror.com/vue-moment/-/vue-moment-4.1.0.tgz",
+      "integrity": "sha512-Gzisqpg82ItlrUyiD9d0Kfru+JorW2o4mQOH06lEDZNgxci0tv/fua1Hl0bo4DozDV2JK1r52Atn/8QVCu8qQw==",
+      "dependencies": {
+        "moment": "^2.19.2"
+      },
+      "peerDependencies": {
+        "vue": ">=1.x.x"
+      }
+    },
     "node_modules/vue-router": {
       "version": "3.6.5",
       "resolved": "https://registry.npmmirror.com/vue-router/-/vue-router-3.6.5.tgz",

package.json

@@ -3,8 +3,8 @@
   "version": "1.5.1",
   "private": true,
   "scripts": {
-    "serve": "vue-cli-service serve",
-    "build": "vue-cli-service build",
+    "serve": "set NODE_OPTIONS=--openssl-legacy-provider && vue-cli-service serve",
+    "build": "set NODE_OPTIONS=--openssl-legacy-provider && vue-cli-service build",
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
@@ -20,6 +20,7 @@
     "less-loader": "^6.0.0",
     "vue": "^2.6.11",
     "vue-awesome": "^4.0.2",
+    "vue-moment": "^4.1.0",
     "vue-router": "^3.1.5",
     "vuex": "^3.1.2"
   },

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

@@ -1,175 +1,94 @@
 <template>
   <div>
-    <Chart :cdata="cdata" />
+    <Echart
+        :options="options"
+        id="bottom2Chart"
+        height="470px"
+        width="100%"
+        ref="column-board"
+    ></Echart>
   </div>
 </template>
 
 <script>
-import Chart from './chart.vue'
+import Echart from "@/common/echart/index.vue";
+
 export default {
-  data () {
+  data() {
     return {
-      drawTiming: null,
-      cdata: {
-        year: null,
-        weekCategory: [],
-        radarData: [],
-        radarDataAvg: [],
-        maxData: 100,
-        minData: 100,
-        weekMaxData: [],
-        weekLineData: [],
-        goalData :0,  //目标值
-      }
+      options: {},
+      // 定义颜色
     }
   },
   components: {
-    Chart,
+    Echart
+  },
+  props: {
+    linedata: {
+      type: Object,
+      default: () => ({})
+    }
   },
-  mounted () {
-    this.drawTimingFn();
+  watch: {
+    linedata: {
+      handler(newData) {
+        this.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: newData.xAxiss,
+              axisLabel: {
+                fontSize: 16,
+                fontWeight: "bold"
+              }
+            }
+          ],
+          yAxis: [
+            {
+              type: 'value',
+              axisLabel: {
+                fontSize: 16
+              }
+            }
+          ],
+          series: newData.series
+        }
+      },
+      immediate: true,
+      deep: true
+    }
   },
-  beforeDestroy () {
-    clearInterval(this.drawTiming);
+  mounted() {
+
+  },
+  beforeDestroy() {
     clearInterval(this.intervalId);
     this.chart.dispose()
     this.chart.clear()
-    this.chart=null
+    this.chart = null
   },
   methods: {
-    drawTimingFn () {
-      this.setData();
-      if (this.intervalId !== null) {
-        clearInterval(this.intervalId);
-      }
-      this.drawTiming = setInterval(() => {
-        this.setData();
-      }, 20000);
-    },
-    async setData () {
-      // 清空轮询数据
-      /*this.cdata.weekCategory = [];
-      this.cdata.weekMaxData = [];
-      this.cdata.weekLineData = [];
-      this.cdata.radarData = [];
-      this.cdata.radarDataAvg = [];*/
-
-      let dateBase = new Date();
-      this.cdata.year = dateBase.getFullYear();
-      this.cdata.nowdate = (dateBase.getMonth() + 1 < 10 ? "0" + (dateBase.getMonth() + 1) : dateBase.getMonth() + 1)
-              +"/"
-              +(dateBase.getDate()  < 10 ? "0" + (dateBase.getDate() ) : dateBase.getDate() );
-      //良率直通图
-      var caller1 = 'DAYTURNOUT!ZZ';
-      if (sessionStorage.getItem('li_code') == '所有'){
-        caller1 = 'ZZ!DAYTURNOUT!ALL';
-      }
-      await this.$http.get("kanban/datalist.action?caller="+caller1+"&_noc=1&page=1&pageSize=100",{
-          params: {
-            condition: "1=1",
-          }
-        }).then((result)=>{
-                        let dataList = JSON.parse(result.data.data);
-                        let weekCategory = new Array();
-                        let weekLineData = new Array();
-                        let minDa = dataList[0].v_okrate ;
-                        let goaldata ;
-                        for (let index = 0; index < dataList.length; index++) {
-                          const element = dataList[index];
-                          //this.cdata.weekMaxData.push(this.cdata.maxData);
-                          //x轴数据日期
-                          weekCategory.push(element.v_md);
-                          //y轴数据
-                          weekLineData.push(element.v_okrate);
-                          if(element.v_okrate<minDa){
-                            minDa = element.v_okrate;
-                          }
-                          if(index == 0){
-                            goaldata = element.v_ligoaldata;
-                          }
-                        }
-                        //获取最小值，取整十的数
-                        minDa = Math.floor(minDa/10)*10;
-                        this.cdata.minData = minDa;
-                        this.cdata.weekCategory = weekCategory;
-                        this.cdata.weekLineData = weekLineData;
-                        this.cdata.goalData = goaldata;
-                      },(result)=>{
-                        console.error(result)
-                      }
-              );
-       //雷达图：
-      var caller2 = 'RadiusBadDuty!ZZ';
-      if (sessionStorage.getItem('li_code') == '所有'){
-        caller2 = 'RadiusBadDuty!ZZ!ALL';
-      }
-      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 radarData = new Array();
-                        let radarAvgData = new Array();
-                        const element = dataList[0];
-                        //来料不良
-                        radarData.push(element.v_llrate);
-                        //制程不良
-                        radarData.push(element.v_zcrate);
-                        //设计不良
-                        radarData.push(element.v_sjrate);
-                        //其它
-                        radarData.push(element.v_othrate);
-                        this.cdata.radarData=radarData;
-                        //来料不良
-                        radarAvgData.push(element.v_llavgrate);
-                        //制程不良
-                        radarAvgData.push(element.v_zcavgrate);
-                        //设计不良
-                        radarAvgData.push(element.v_sjavgrate);
-                        //其它
-                        radarAvgData.push(element.v_othavgrate);
-                        this.cdata.radarDataAvg=radarAvgData;
-                      },(result)=>{
-                        console.error(result)
-                      }
-              );
-      // 周数据
-      /*for (let i = 0; i < 7; i++) {
-        // 日期
-        let date = new Date();
-        this.cdata.weekCategory.unshift([date.getMonth() + 1, date.getDate()-i].join("/"));
-
-        // 折线图数据
-        this.cdata.weekMaxData.push(this.cdata.maxData);
-        let distance = Math.round(Math.random() * 11000 + 500);
-        this.cdata.weekLineData.push(distance);
+    // 根据自己的业务情况修改
 
-        // 雷达图数据
-        // 我的指标
-        let averageSpeed = +(Math.random() * 5 + 3).toFixed(3);
-        let maxSpeed = averageSpeed + +(Math.random() * 3).toFixed(2);
-        let hour = +(distance / 1000 / averageSpeed).toFixed(1);
-        let radarDayData = [distance, averageSpeed, maxSpeed, hour];
-        this.cdata.radarData.unshift(radarDayData);
-
-        // 平均指标
-        let distanceAvg = Math.round(Math.random() * 8000 + 4000);
-        let averageSpeedAvg = +(Math.random() * 4 + 4).toFixed(3);
-        let maxSpeedAvg = averageSpeedAvg + +(Math.random() * 2).toFixed(2);
-        let hourAvg = +(distance / 1000 / averageSpeed).toFixed(1);
-        let radarDayDataAvg = [
-          distanceAvg,
-          averageSpeedAvg,
-          maxSpeedAvg,
-          hourAvg
-        ];
-        this.cdata.radarDataAvg.unshift(radarDayDataAvg);
-      }*/
-
-    }
   }
 };
 </script>

src/components/assemblyechart/bottom/bottomRightChartOld/index.vue

@@ -0,0 +1,178 @@
+<template>
+  <div>
+    <Chart :cdata="cdata" />
+  </div>
+</template>
+
+<script>
+import Chart from './chart.vue'
+export default {
+  data () {
+    return {
+      drawTiming: null,
+      cdata: {
+        year: null,
+        weekCategory: [],
+        radarData: [],
+        radarDataAvg: [],
+        maxData: 100,
+        minData: 100,
+        weekMaxData: [],
+        weekLineData: [],
+        goalData :0,  //目标值
+      }
+    }
+  },
+  components: {
+    Chart,
+  },
+  mounted () {
+    this.drawTimingFn();
+  },
+  beforeDestroy () {
+    clearInterval(this.drawTiming);
+    clearInterval(this.intervalId);
+    this.chart.dispose()
+    this.chart.clear()
+    this.chart=null
+  },
+  methods: {
+    drawTimingFn () {
+      this.setData();
+      if (this.intervalId !== null) {
+        clearInterval(this.intervalId);
+      }
+      this.drawTiming = setInterval(() => {
+        this.setData();
+      }, 20000);
+    },
+    async setData () {
+      // 清空轮询数据
+      /*this.cdata.weekCategory = [];
+      this.cdata.weekMaxData = [];
+      this.cdata.weekLineData = [];
+      this.cdata.radarData = [];
+      this.cdata.radarDataAvg = [];*/
+
+      let dateBase = new Date();
+      this.cdata.year = dateBase.getFullYear();
+      this.cdata.nowdate = (dateBase.getMonth() + 1 < 10 ? "0" + (dateBase.getMonth() + 1) : dateBase.getMonth() + 1)
+              +"/"
+              +(dateBase.getDate()  < 10 ? "0" + (dateBase.getDate() ) : dateBase.getDate() );
+      //良率直通图
+      var caller1 = 'DAYTURNOUT!ZZ';
+      if (sessionStorage.getItem('li_code') == '所有'){
+        caller1 = 'ZZ!DAYTURNOUT!ALL';
+      }
+      await this.$http.get("kanban/datalist.action?caller="+caller1+"&_noc=1&page=1&pageSize=100",{
+          params: {
+            condition: "1=1",
+          }
+        }).then((result)=>{
+                        let dataList = JSON.parse(result.data.data);
+                        let weekCategory = new Array();
+                        let weekLineData = new Array();
+                        let minDa = dataList[0].v_okrate ;
+                        let goaldata ;
+                        for (let index = 0; index < dataList.length; index++) {
+                          const element = dataList[index];
+                          //this.cdata.weekMaxData.push(this.cdata.maxData);
+                          //x轴数据日期
+                          weekCategory.push(element.v_md);
+                          //y轴数据
+                          weekLineData.push(element.v_okrate);
+                          if(element.v_okrate<minDa){
+                            minDa = element.v_okrate;
+                          }
+                          if(index == 0){
+                            goaldata = element.v_ligoaldata;
+                          }
+                        }
+                        //获取最小值，取整十的数
+                        minDa = Math.floor(minDa/10)*10;
+                        this.cdata.minData = minDa;
+                        this.cdata.weekCategory = weekCategory;
+                        this.cdata.weekLineData = weekLineData;
+                        this.cdata.goalData = goaldata;
+                      },(result)=>{
+                        console.error(result)
+                      }
+              );
+       //雷达图：
+      var caller2 = 'RadiusBadDuty!ZZ';
+      if (sessionStorage.getItem('li_code') == '所有'){
+        caller2 = 'RadiusBadDuty!ZZ!ALL';
+      }
+      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 radarData = new Array();
+                        let radarAvgData = new Array();
+                        const element = dataList[0];
+                        //来料不良
+                        radarData.push(element.v_llrate);
+                        //制程不良
+                        radarData.push(element.v_zcrate);
+                        //设计不良
+                        radarData.push(element.v_sjrate);
+                        //其它
+                        radarData.push(element.v_othrate);
+                        this.cdata.radarData=radarData;
+                        //来料不良
+                        radarAvgData.push(element.v_llavgrate);
+                        //制程不良
+                        radarAvgData.push(element.v_zcavgrate);
+                        //设计不良
+                        radarAvgData.push(element.v_sjavgrate);
+                        //其它
+                        radarAvgData.push(element.v_othavgrate);
+                        this.cdata.radarDataAvg=radarAvgData;
+                      },(result)=>{
+                        console.error(result)
+                      }
+              );
+      // 周数据
+      /*for (let i = 0; i < 7; i++) {
+        // 日期
+        let date = new Date();
+        this.cdata.weekCategory.unshift([date.getMonth() + 1, date.getDate()-i].join("/"));
+
+        // 折线图数据
+        this.cdata.weekMaxData.push(this.cdata.maxData);
+        let distance = Math.round(Math.random() * 11000 + 500);
+        this.cdata.weekLineData.push(distance);
+
+        // 雷达图数据
+        // 我的指标
+        let averageSpeed = +(Math.random() * 5 + 3).toFixed(3);
+        let maxSpeed = averageSpeed + +(Math.random() * 3).toFixed(2);
+        let hour = +(distance / 1000 / averageSpeed).toFixed(1);
+        let radarDayData = [distance, averageSpeed, maxSpeed, hour];
+        this.cdata.radarData.unshift(radarDayData);
+
+        // 平均指标
+        let distanceAvg = Math.round(Math.random() * 8000 + 4000);
+        let averageSpeedAvg = +(Math.random() * 4 + 4).toFixed(3);
+        let maxSpeedAvg = averageSpeedAvg + +(Math.random() * 2).toFixed(2);
+        let hourAvg = +(distance / 1000 / averageSpeed).toFixed(1);
+        let radarDayDataAvg = [
+          distanceAvg,
+          averageSpeedAvg,
+          maxSpeedAvg,
+          hourAvg
+        ];
+        this.cdata.radarDataAvg.unshift(radarDayDataAvg);
+      }*/
+
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+</style>

src/components/assemblyechart/center/top5Chart/chart.vue

@@ -0,0 +1,81 @@
+<template>
+  <div>
+    <Echart
+      :options="options"
+      id="top5Chart"
+      height="350px"
+      width="315px"
+    ></Echart>
+  </div>
+</template>
+
+<script>
+import Echart from '@/common/echart'
+export default {
+  data () {
+    return {
+      options: {},
+    };
+  },
+  components: {
+    Echart,
+  },
+  props: {
+    cdata: {
+      type: Object,
+      default: () => ({})
+    },
+  },
+  watch: {
+    cdata: {
+      handler (newData) {
+        this.options = {
+          color: [
+            "#37a2da",
+            "#32c5e9",
+            "#9fe6b8",
+            "#ffdb5c",
+            "#ff9f7f",
+            "#fb7293",
+            "#e7bcf3",
+            "#8378ea"
+          ],
+          tooltip: {
+            trigger: "item",
+            formatter: "{a} <br/>{b} : {c} ({d}%)"
+          },
+          toolbox: {
+            show: true
+          },
+          calculable: true,
+          legend: {
+            orient: "vertical",
+            icon: "circle",
+            bottom: 0,
+            x: "center",
+            data: newData.cdata,
+            textStyle: {
+              color: "#fff",
+            },
+          },
+          series: [
+            {
+              name: "不良现象统计",
+              type: "pie",
+              radius: [15, 60],
+              roseType: "area",
+              center: ["50%", "30%"],
+              data: newData.seriesData,
+            }
+          ]
+        }
+      },
+      immediate: true,
+      deep: true
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+</style>

src/components/assemblyechart/center/top5Chart/index.vue

@@ -0,0 +1,92 @@
+<template>
+  <div>
+    <Chart :cdata="cdata" />
+  </div>
+</template>
+
+<script>
+import Chart from './chart.vue';
+import { formatDate } from '../../../../utils/index.js';
+export default {
+  data () {
+    return {
+      intervalId :null,
+      cdata: {
+        xData:[],// ["data1", "data2", "data3", "data4", "data5", "data6"],
+        seriesData:[] /* [
+          { value: 10, name: "data1" },
+          { value: 5, name: "data2" },
+          { value: 15, name: "data3" },
+          { value: 25, name: "data4" },
+          { value: 20, name: "data5" },
+          { value: 35, name: "data6" }
+        ]*/
+      }
+    }
+  },
+  components: {
+    Chart,
+  },
+  mounted () {
+    this.getdata();
+    this.refreshdata();
+  },
+  beforeDestroy () {
+    clearInterval(this.intervalId);
+    this.chart.dispose()
+    this.chart.clear()
+    this.chart=null
+  },
+  methods: {
+    refreshdata() {
+      this.intervalId =setInterval(() => {
+        this.getdata(); //获取-数据
+      }, 30000);
+    },
+    async getdata() {
+      //20220211 -+formatDate(new Date()
+      var caller = 'NGREASONF!ZZ';
+      if (sessionStorage.getItem('li_code') == '所有'){
+        caller = 'ZZ!NGREASONF!ALL';
+      }
+      await this.$http.get("kanban/datalist.action?caller="+caller+"&_noc=1&page=1&pageSize=100",
+              {
+                params: {
+                  condition: "mb_ymd="+formatDate(new Date())
+                }
+              }) .then((result)=>{
+                        let dataList = JSON.parse(result.data.data);
+                        let xData0 = new Array();
+                        let seriesData0 = new Array();
+                        let sum1 = 0;
+                        let totalsum = 0;
+                        for (let index = 0; index < dataList.length; index++) {
+                          const element = dataList[index];
+                          let ob = new Object();
+                          xData0.push(element.mb_badname);
+                          ob.value = element.v_cn;
+                          ob.name = element.mb_badname;
+                          seriesData0.push(ob);
+                          sum1 +=element.v_cn;
+                          totalsum = element.v_sum;
+                        }
+                        if(totalsum-sum1>0){
+                          xData0.push('其它');
+                          let ob = new Object();
+                          ob.value = totalsum-sum1;
+                          ob.name = '其它';
+                          seriesData0.push(ob);
+                        }
+                       this.cdata.xData = xData0;
+                       this.cdata.seriesData = seriesData0;
+                      },(result)=>{
+                        console.error(result)
+                      }
+              );
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+</style>

src/main.js

@@ -5,7 +5,6 @@ import store from './store';
 import dataV from '@jiaminghi/data-view';
 // 引入全局css
 import './assets/scss/style.scss';
-import ShowMsgBox from './assets/js/msgBox';
 import 'element-ui/lib/theme-chalk/index.css';
 // 按需引入vue-awesome图标
 import Icon from 'vue-awesome/components/Icon';
@@ -19,7 +18,8 @@ import 'vue-awesome/icons/align-left.js';
 import echarts from 'echarts'
 import ElementUI from 'element-ui';
 
-import Cookies from 'js-cookie'
+import Cookies from 'js-cookie';
+import VueMoment from 'vue-moment';
 
 //5.x 引用方式为按需引用
 //希望使用5.x版本的话,需要在package.json中更新版本号,并切换引用方式
@@ -32,7 +32,7 @@ Vue.prototype.$cookie = Cookies;
 Vue.component('icon', Icon);
 Vue.use(dataV);
 Vue.use(ElementUI);
-Vue.use(ShowMsgBox);
+Vue.use(VueMoment);
 
 router.beforeEach((to, from, next) => {
   /**

src/views/assembly/bottomRight.vue

@@ -1,29 +1,132 @@
 <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="down">
+      <div class="bg-color-black">
+        <div class="d-flex pt-1 pl-2">
+                 <span>
+                    <icon name="chart-line" class="text-icon"></icon>
+                  </span>
+          <span class="fs-xxl text mx-2 fw-b">近30天产线累计产量统计</span>
+        </div>
+        <div class="body-box">
+          <div class="pt-2 " >
+            <BottomRightChart :linedata="linedata" />
           </div>
         </div>
       </div>
-      <div>
-        <BottomRightChart />
-      </div>
     </div>
   </div>
 </template>
 
 <script>
-import BottomRightChart from "@/components/assemblyechart/bottom/bottomRightChart";
+import BottomRightChart from "../../components/assemblyechart/bottom/bottomRightChart";
+import {mapState} from "vuex";
 export default {
+  computed: {
+    ...mapState(['factory']),
+  },
   components: {
     BottomRightChart
+  },
+  data() {
+    return {
+      timing:null,
+      linedata :{
+        series : null,
+        xAxiss  :null,
+      }
+    }
+  },
+  mounted() {
+    this.refreshdata()
+  },
+  beforeDestroy () {
+    clearInterval(this.timing)
+  },
+  methods: {
+    refreshdata() {
+      this.getdata(); //获取-数据
+      this.timing = setInterval(() => {
+        this.getdata(); //获取--数据
+      }, 10000);
+    },
+
+    async getdata() {
+      var caller = 'ZZ!30DaysData';
+      var cond = "1=1";
+      await this.$http.get("kanban/datalist.action?caller="+caller+"&_noc=1&page=1&pageSize=100",{
+        params: {
+          condition: cond
+        }
+      }).then((result)=>{
+            let dataList = JSON.parse(result.data.data);
+            let series = new Array();
+            let xAxis0 = new Array();
+            //获取总共有多少个线别
+            const groupByLonglineMap = dataList.reduce((result, currentItem) => {
+              // 使用 key 函数提取分组键
+              const groupKey = currentItem["v_licode"];
+              // 初始化分组数组（如果尚未创建）
+              if (!result[groupKey]) {
+                result[groupKey] = [];
+              }
+              // 将当前项添加到分组数组
+              result[groupKey].push(currentItem);
+              return result;
+            }, {});
+
+            const longlines = Array.from(new Set(dataList.map(item => item['v_licode']))).join().split(",");
+            let seriesdata = new Array();
+            for (let value of longlines) {
+              let se = new Object();
+              se.name  = value;
+              se.data = new Array();
+              seriesdata.push(se);
+            }
+            //30天内
+            for (let i =29 ;i>=0;i--){
+              let formattedDate;
+              if(i == 0){
+                formattedDate = this.$moment().format('MM/DD');
+              }else{
+                formattedDate = this.$moment().subtract(i, 'days').format('MM/DD')
+              }
+              xAxis0.push(formattedDate);
+              //获取分组当天数据
+              for (let value of seriesdata) {
+                let dataall = groupByLonglineMap[value.name];
+                let data0 = 0;
+                if(null != dataall) {
+                  let datam = dataall.filter(item => item.v_ymd1 == formattedDate);
+                  if(datam.length>0){
+                    data0 = datam[0].v_accuoutqty;
+                  }
+                }
+                value.data.push(data0);
+              }
+            }
+
+            for (let value of seriesdata) {
+              series.push({
+                name: value.name,
+                type: 'line',
+                data: value.data,
+                symbolSize: 4,
+                lineStyle: {
+                  width: 3
+                },
+                emphasis: {
+                  focus: 'series'
+                }
+              });
+            }
+            this.linedata.series = series;
+            this.linedata.xAxiss = xAxis0;
+          },(result)=>{
+            console.error(result)
+          }
+      );
+    }
   }
 };
 </script>
@@ -32,30 +135,19 @@ export default {
 $box-height: 520px;
 $box-width: 100%;
 #bottomRight {
-  padding: 14px 16px;
+  padding: 13px;
   height: $box-height;
   width: $box-width;
   border-radius: 5px;
   .bg-color-black {
-    height: $box-height - 30px;
+    height: $box-height - 25px;
+    //width: $box-width - 10px;
     border-radius: 10px;
+    padding: 5px ;
   }
-  .text {
-    color: #c3cbde;
-    //font-size: 15px;
-  }
-  //下滑线动态
-  .decoration2 {
-    position: absolute;
-    right: 0.125rem;
-  }
-  .chart-box {
-    margin-top: 16px;
-    width: 170px;
-    height: 170px;
-    .active-ring-name {
-      padding-top: 10px;
-    }
+  .body-box {
+    border-radius: 10px;
+    overflow: hidden;
   }
 }
 </style>

src/views/assembly/bottomRightOld.vue

@@ -0,0 +1,61 @@
+<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>
+        </div>
+      </div>
+      <div>
+        <BottomRightChart />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import BottomRightChart from "../../components/assemblyechart/bottom/bottomRightChartOld";
+export default {
+  components: {
+    BottomRightChart
+  }
+};
+</script>
+
+<style lang="scss" class>
+$box-height: 520px;
+$box-width: 100%;
+#bottomRight {
+  padding: 14px 16px;
+  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;
+  }
+  .chart-box {
+    margin-top: 16px;
+    width: 170px;
+    height: 170px;
+    .active-ring-name {
+      padding-top: 10px;
+    }
+  }
+}
+</style>

src/views/assembly/center.vue

@@ -1,168 +1,102 @@
 <template>
   <div id="center">
-    <!--  <div class="up">
-        <div
-          class="bg-color-black item"
-          v-for="item in titleItem"
-          :key="item.title"
-        >
-          <p class="ml-3 colorBlue fw-b fs-xl">{{ item.title }}</p>
-          <div>
-            <dv-digital-flop
-              class="dv-dig-flop ml-1 mt-2 pl-3"
-              :config="item.number"
-            />
-          </div>
-        </div>
-      </div>-->
-    <div class="down">
-      <div class="ranking bg-color-black">
+    <div class="bg-color-black">
+      <div class="d-flex pt-2 pl-2">
         <span>
-          <icon name="chart-pie" class="text-icon"></icon>
+          <icon name="chart-bar" class="text-icon"></icon>
         </span>
-        <span class="fs-xl text mx-2 mb-1 pl-3">当前时段生产明细</span>
-        <dv-scroll-board class="dv-scr-board" :config="config" ref="scroll-board" />
+        <div class="d-flex">
+          <span class="fs-xl text mx-2">不良现象TOP5</span>
+          <dv-decoration-3 class="dv-dec-3" />
+        </div>
+      </div>
+      <div class="d-flex jc-center">
+         <Top5Chart />
       </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/packageechart/center/centerChartRate'
-
+import Top5Chart from '@/components/assemblyechart/center/top5Chart'
 export default {
   data() {
     return {
-      config: {
-        header:  ['工单号','工序', '当前小时数量'],
-        data: [
-        ],
-        rowNum: 7, //表格行数
-        headerHeight: 35,
-        headerBGC: '#0f1325', //表头
-        oddRowBGC: '#0f1325', //奇数行
-        evenRowBGC: '#171c33', //偶数行
-        columnWidth: [130,80,110],
-        align: ['center']
-      },
-      timing : null,
+      numberData: [
+        {
+          number: {
+            number: [15],
+            toFixed: 1,
+            textAlign: 'left',
+            content: '{nt}',
+            style: {
+              fontSize: 32
+            }
+          },
+          text: '项目数'
+        },
+        {
+          number: {
+            number: [1144],
+            toFixed: 1,
+            textAlign: 'left',
+            content: '{nt}',
+            style: {
+              fontSize: 32
+            }
+          },
+          text: '已上线'
+        },
+        {
+          number: {
+            number: [361],
+            toFixed: 1,
+            textAlign: 'left',
+            content: '{nt}',
+            style: {
+              fontSize: 32
+            }
+          },
+          text: '已启动'
+        },
+        {
+          number: {
+            number: [157],
+            toFixed: 1,
+            textAlign: 'left',
+            content: '{nt}',
+            style: {
+              fontSize: 32
+            }
+          },
+          text: '已验收'
+        }
+      ]
     }
   },
   components: {
-    // CenterChart
+    Top5Chart
   },
-  mounted () {
-    this.drawTimingFn();
+  mounted() {
+  //  this.changeTiming()
   },
   beforeDestroy () {
-    clearInterval(this.timing)
+   clearInterval(this.intervalId)
+    this.chart.dispose()
+    this.chart.clear()
+    this.chart=null
   },
   methods: {
-    drawTimingFn () {
-      this.setData();
-      this.timing = setInterval(() => {
-        this.setData(); //获取-数据
-      }, 30000);
+    changeTiming() {
+      setInterval(() => {
+        this.changeNumber()
+      }, 20000)
     },
-    async setData () {
-      // 首检任务数，完成数，合格数，巡检任务数，完成数，巡检合格数  name value
-      /*  await this.$http.get("kanban/datalist.action?caller=CheckData&_noc=1&page=1&pageSize=100",{
-        params: {
-          condition: "1=1",
-        }
-      }).then((result)=>{
-                          let dataList = JSON.parse(result.data.data);
-                          let titleitems = new Array();
-                          for (let index = 0; index < dataList.length; index++) {
-                            const element = dataList[index];
-                            titleitems.push({
-                              title: element.name,
-                              number: {
-                                number: [element.value],
-                                toFixed: 1,
-                                textAlign: 'left',
-                                content: '{nt}',
-                                style: {
-                                  fontSize: 26
-                                }
-                              }
-                            });
-                          }
-                          this.titleItem = titleitems;
-                        },(result)=>{
-                          console.error(result)
-                        }
-                );*/
-      var caller = 'KeyStepRate!ZZ';
-      if (sessionStorage.getItem('li_code') == '所有'){
-        caller = 'ZZ!KeyStepRate!ALL';
-      }
-      //关键工序直通率
-      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.makecode+"</span>");
-              item.push("<span  class='colorGrass'>"+element.stepcode+"</span>");
-              item.push("<span  class='colorGrass'>"+element.value+"</span>");
-              resultList.push(item);
-            }
-            const scrollBoard = this.$refs['scroll-board'];
-            //刷新数据
-            scrollBoard.updateRows(resultList);
-          },(result)=>{
-            console.error(result)
-          }
-      );
-      //饼图pie，首检合格率，巡检合格率
-      /* 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;
-                         this.rate[0].tips = dataList[0].xcheckrate;
-                       },(result)=>{
-                         console.error(result)
-                       }
-               );*/
-      //水波图，首检合格率，巡检合格率
-      /* await this.$http.get("kanban/datalist.action?caller=WaterCheckRate&_noc=1&page=1&pageSize=100&condition=1=1")
-               .then((result)=>{
-                         let dataList = JSON.parse(result.data.data);
-                         let waterdatas = new Array();
-                         waterdatas.push(dataList[0].firstcheckrate);
-                         waterdatas.push(dataList[0].xcheckrate);
-                          this.water = { data: waterdatas }
-                       },(result)=>{
-                         console.error(result)
-                       }
-               );*/
+    changeNumber() {
+      this.numberData.forEach((item, index) => {
+        item.number.number[0] += ++index
+        item.number = { ...item.number }
+      })
     }
   }
 }
@@ -171,64 +105,24 @@ export default {
 <style lang="scss" scoped>
 $box-height: 420px;
 #center {
-  display: flex;
-  flex-direction: column;
-  .up {
-    width: 100%;
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: space-around;
-    .item {
-      border-radius: 6px;
-      padding-top: 8px;
-      margin-top: 8px;
-      width: 32%;
-      height: 70px;
-      .dv-dig-flop {
-        width: 150px;
-        height: 30px;
-      }
-    }
+  width: 100%;
+  padding: 5px;
+  height: $box-height;
+  font-size: 32px;
+  border-radius: 5px;
+  .bg-color-black {
+    height: $box-height - 10px;
+    border-radius: 10px;
+    padding: 5px;
   }
-  .down {
-    padding: 6px 4px;
-    padding-bottom: 0;
-    width: 100%;
-    display: flex;
-    height: $box-height;
-    justify-content: space-between;
-    .bg-color-black {
-      border-radius: 5px;
-      height: $box-height - 15px;
-    }
-    .ranking {
-      padding: 10px;
-      width: 100%;
-      .dv-scr-rank-board {
-        height: 370px;
-      }
-    }
-    .percent {
-      width: 40%;
-      display: flex;
-      flex-wrap: wrap;
-      .item {
-        width: 50%;
-        height: 120px;
-        span {
-          margin-top: 8px;
-          font-size: 14px;
-          display: flex;
-          justify-content: center;
-        }
-      }
-      .water {
-        width: 100%;
-        .dv-wa-le-po {
-          height: 120px;
-        }
-      }
-    }
+  .text {
+    color: #FFE900;
+  }
+  .dv-dec-3 {
+    position: relative;
+    width: 100px;
+    height: 20px;
+    top: -3px;
   }
 }
 </style>

src/views/assembly/centerOld.vue

@@ -0,0 +1,234 @@
+<template>
+  <div id="center">
+    <!--  <div class="up">
+        <div
+          class="bg-color-black item"
+          v-for="item in titleItem"
+          :key="item.title"
+        >
+          <p class="ml-3 colorBlue fw-b fs-xl">{{ item.title }}</p>
+          <div>
+            <dv-digital-flop
+              class="dv-dig-flop ml-1 mt-2 pl-3"
+              :config="item.number"
+            />
+          </div>
+        </div>
+      </div>-->
+    <div class="down">
+      <div class="ranking bg-color-black">
+        <span>
+          <icon name="chart-pie" class="text-icon"></icon>
+        </span>
+        <span class="fs-xl text mx-2 mb-1 pl-3">当前时段生产明细</span>
+        <dv-scroll-board class="dv-scr-board" :config="config" ref="scroll-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/packageechart/center/centerChartRate'
+
+export default {
+  data() {
+    return {
+      config: {
+        header:  ['工单号','工序', '当前小时数量'],
+        data: [
+        ],
+        rowNum: 7, //表格行数
+        headerHeight: 35,
+        headerBGC: '#0f1325', //表头
+        oddRowBGC: '#0f1325', //奇数行
+        evenRowBGC: '#171c33', //偶数行
+        columnWidth: [130,80,110],
+        align: ['center']
+      },
+      timing : null,
+    }
+  },
+  components: {
+    // CenterChart
+  },
+  mounted () {
+    this.drawTimingFn();
+  },
+  beforeDestroy () {
+    clearInterval(this.timing)
+  },
+  methods: {
+    drawTimingFn () {
+      this.setData();
+      this.timing = setInterval(() => {
+        this.setData(); //获取-数据
+      }, 30000);
+    },
+    async setData () {
+      // 首检任务数，完成数，合格数，巡检任务数，完成数，巡检合格数  name value
+      /*  await this.$http.get("kanban/datalist.action?caller=CheckData&_noc=1&page=1&pageSize=100",{
+        params: {
+          condition: "1=1",
+        }
+      }).then((result)=>{
+                          let dataList = JSON.parse(result.data.data);
+                          let titleitems = new Array();
+                          for (let index = 0; index < dataList.length; index++) {
+                            const element = dataList[index];
+                            titleitems.push({
+                              title: element.name,
+                              number: {
+                                number: [element.value],
+                                toFixed: 1,
+                                textAlign: 'left',
+                                content: '{nt}',
+                                style: {
+                                  fontSize: 26
+                                }
+                              }
+                            });
+                          }
+                          this.titleItem = titleitems;
+                        },(result)=>{
+                          console.error(result)
+                        }
+                );*/
+      var caller = 'KeyStepRate!ZZ';
+      if (sessionStorage.getItem('li_code') == '所有'){
+        caller = 'ZZ!KeyStepRate!ALL';
+      }
+      //关键工序直通率
+      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.makecode+"</span>");
+              item.push("<span  class='colorGrass'>"+element.stepcode+"</span>");
+              item.push("<span  class='colorGrass'>"+element.value+"</span>");
+              resultList.push(item);
+            }
+            const scrollBoard = this.$refs['scroll-board'];
+            //刷新数据
+            scrollBoard.updateRows(resultList);
+          },(result)=>{
+            console.error(result)
+          }
+      );
+      //饼图pie，首检合格率，巡检合格率
+      /* 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;
+                         this.rate[0].tips = dataList[0].xcheckrate;
+                       },(result)=>{
+                         console.error(result)
+                       }
+               );*/
+      //水波图，首检合格率，巡检合格率
+      /* await this.$http.get("kanban/datalist.action?caller=WaterCheckRate&_noc=1&page=1&pageSize=100&condition=1=1")
+               .then((result)=>{
+                         let dataList = JSON.parse(result.data.data);
+                         let waterdatas = new Array();
+                         waterdatas.push(dataList[0].firstcheckrate);
+                         waterdatas.push(dataList[0].xcheckrate);
+                          this.water = { data: waterdatas }
+                       },(result)=>{
+                         console.error(result)
+                       }
+               );*/
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+$box-height: 420px;
+#center {
+  display: flex;
+  flex-direction: column;
+  .up {
+    width: 100%;
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-around;
+    .item {
+      border-radius: 6px;
+      padding-top: 8px;
+      margin-top: 8px;
+      width: 32%;
+      height: 70px;
+      .dv-dig-flop {
+        width: 150px;
+        height: 30px;
+      }
+    }
+  }
+  .down {
+    padding: 6px 4px;
+    padding-bottom: 0;
+    width: 100%;
+    display: flex;
+    height: $box-height;
+    justify-content: space-between;
+    .bg-color-black {
+      border-radius: 5px;
+      height: $box-height - 15px;
+    }
+    .ranking {
+      padding: 10px;
+      width: 100%;
+      .dv-scr-rank-board {
+        height: 370px;
+      }
+    }
+    .percent {
+      width: 40%;
+      display: flex;
+      flex-wrap: wrap;
+      .item {
+        width: 50%;
+        height: 120px;
+        span {
+          margin-top: 8px;
+          font-size: 14px;
+          display: flex;
+          justify-content: center;
+        }
+      }
+      .water {
+        width: 100%;
+        .dv-wa-le-po {
+          height: 120px;
+        }
+      }
+    }
+  }
+}
+</style>

yarn.lock

@@ -6025,6 +6025,11 @@
   dependencies:
     "minimist" "^1.2.6"
 
+"moment@^2.19.2":
+  "integrity" "sha512-uEmtNhbDOrWPFS+hdjFCBfy9f2YoyzRpwcl+DqpC6taX21FzsTLQVbMV/W7PzNSX6x/bhC1zA3c2UQ5NzH6how=="
+  "resolved" "https://registry.npmmirror.com/moment/-/moment-2.30.1.tgz"
+  "version" "2.30.1"
+
 "move-concurrently@^1.0.1":
   "integrity" "sha512-hdrFxZOycD/g6A6SoI2bB5NA/5NEqD0569+S47WZhPvm46sD50ZHdYaFmnua5lndde9rCHGjmfK7Z8BuCt/PcQ=="
   "resolved" "https://registry.npmmirror.com/move-concurrently/-/move-concurrently-1.0.1.tgz"
@@ -8816,6 +8821,13 @@
     "vue-hot-reload-api" "^2.3.0"
     "vue-style-loader" "^4.1.0"
 
+"vue-moment@^4.1.0":
+  "integrity" "sha512-Gzisqpg82ItlrUyiD9d0Kfru+JorW2o4mQOH06lEDZNgxci0tv/fua1Hl0bo4DozDV2JK1r52Atn/8QVCu8qQw=="
+  "resolved" "https://registry.npmmirror.com/vue-moment/-/vue-moment-4.1.0.tgz"
+  "version" "4.1.0"
+  dependencies:
+    "moment" "^2.19.2"
+
 "vue-router@^3.1.5":
   "integrity" "sha512-VYXZQLtjuvKxxcshuRAwjHnciqZVoXAjTjcqBTz4rKc8qih9g9pI3hbDjmqXaHdgL3v8pV6P8Z335XvHzESxLQ=="
   "resolved" "https://registry.npmmirror.com/vue-router/-/vue-router-3.6.5.tgz"
@@ -8842,7 +8854,7 @@
   "resolved" "https://registry.npmmirror.com/vue-template-es2015-compiler/-/vue-template-es2015-compiler-1.9.1.tgz"
   "version" "1.9.1"
 
-"vue@*", "vue@^2 || ^3.0.0-0", "vue@^2.0.0", "vue@^2.4.0", "vue@^2.5.17", "vue@^2.6.11":
+"vue@*", "vue@^2 || ^3.0.0-0", "vue@^2.0.0", "vue@^2.4.0", "vue@^2.5.17", "vue@^2.6.11", "vue@>=1.x.x":
   "integrity" "sha512-b2qkFyOM0kwqWFuQmgd4o+uHGU7T+2z3T+WQp8UBjADfEv2n4FEMffzBmCKNP0IGzOEEfYjvtcC62xaSKeQDrQ=="
   "resolved" "https://registry.npmmirror.com/vue/-/vue-2.7.14.tgz"
   "version" "2.7.14"