Merge remote-tracking branch 'origin/liang-vue' into liang-vue

# Conflicts:
#	src/components/assemblyechart/bottom/bottomRightChart/index.vue

src/components/smtechart/bottom/bottom1Chart/index.vue

@@ -20,6 +20,7 @@
                     minData: 100,
                     weekMaxData: [],
                     weekLineData: [],
+
                     lastw:0,
                     hisd:0,
                     goalData :0,  //目标值

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

@@ -0,0 +1,214 @@
+<template>
+  <div>
+    <!-- 当日工段投产良率 -->
+    <Echart
+        :options="options"
+        id="bottomLeft2Chart"
+        height="340px"
+        width="100%"
+        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: '3%',
+          containLabel: true
+        },
+        xAxis: [
+          {
+            type: 'category',
+            data:[],
+            axisLabel: {
+              fontSize: 9
+            }
+          }
+        ],
+        yAxis: [
+          {
+            type: 'value',
+          },
+          {
+            type: 'value',
+            name: 'rate',
+            min: 0,
+            max: 100,
+            interval: 20,
+            axisLabel: {
+              formatter: '{value}%'
+            }
+          }
+
+        ],
+        series: [
+          /*  {
+              name: '投入',
+              type: 'bar',
+              barWidth: 20,
+              emphasis: {
+                focus: 'series'
+              },
+              data:[]
+              //data: [320, 332, 301, 334, 390, 330, 320]
+            },*/
+          {
+            name: '线体产出',
+            type: 'bar',
+            barWidth: 20,
+            stack: 'Ad',
+            emphasis: {
+              focus: 'series'
+            },
+            data:[],
+            itemStyle: {
+              color: '#9FE6B8'  //fac858
+            },
+            //data: [220, 232, 221, 234, 290, 230, 220]
+          },
+          {
+            name: '计划剩余',
+            type: 'bar',
+            stack: 'Ad',
+            barWidth: 10,
+            data:[],
+            //data: [12, 22, 32, 12, 32, 12, 32],
+            emphasis: {
+              focus: 'series'
+            },
+            itemStyle: {
+              color: '#FFE900'  //fac858
+            },
+
+          },
+          {
+            name: '计划达成率%',
+            type: 'line',
+            data:[],
+            yAxisIndex: 1,
+            //data: [92, 92,92, 72, 82, 62, 62],
+            tooltip: {
+              valueFormatter: function (value) {
+                return value + '%';
+              }
+            },
+            itemStyle: {
+              normal: {
+                barBorderRadius: 5,
+                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                  { offset: 0, color: "rgba(0,161,26,0.8)" },
+                  { offset: 0.2, color: "rgba(0,161,26,0.5)" },
+                  { offset: 1, color: "rgba(0,161,26,0.2)" }
+                ])
+              }
+            },
+            emphasis: {
+              focus: 'series'
+            }
+          }
+        ]
+      },
+    };
+  },
+  components: {
+    Echart, //子组件
+  },
+  props: {
+    cdata: {
+      type: Object,
+      default: () => ({})
+    },
+  },
+
+  mounted() {
+    this.getdata();
+    this.refreshdata();
+  },
+  methods: {
+    refreshdata() {
+      setInterval(() => {
+        this.getdata(); //获取-数据
+      }, 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);
+                let xAxis0 = new Array();
+                let series0 = new Array();
+                let series1 = new Array();
+                let series2 = new Array();
+                for (let index = 0; index < dataList.length; index++) {
+                  const element = dataList[index];
+                  if(index%2 == 0) {
+                    xAxis0.push(element.sp_wccode);
+                  }else{
+                    xAxis0.push('\n'+element.sp_wccode);
+                  }
+                  //投入
+                  // series0.push(element.v_inqty);
+                  //产出
+                  series0.push(element.v_outqty);
+                  //不良
+                  series1.push(element.v_ngqty);
+                  //良率
+                  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;
+                /*let myChart = this.$children[0].chart;
+                myChart.setOption({
+                   xAxis: {
+                     data: xAxis0
+                   },
+                   series: [
+                     {
+                       // 根据名字对应到相应的系列
+                       name: '投入',
+                       data: series0
+                     },
+                     {
+                       name: '产出',
+                       data: series2
+                     }, {
+                       name: '不良',
+                       data: series3
+                     },
+                     {
+                       name: '不良率%',
+                       data: series4
+                     },
+                   ]
+                 });*/
+              },(result)=>{
+                console.error(result)
+              }
+          );
+    }
+  }
+}
+</script>

src/components/totalchart/bottom/bottomLeft2Chart/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/totalchart/bottom/bottomRightChart/chart.vue

@@ -0,0 +1,368 @@
+<template>
+  <div>
+    <Echart
+      :options="options"
+      id="bottomRightChart"
+      height="480px"
+      width="800px"
+    ></Echart>
+  </div>
+</template>
+
+<script>
+import Echart from '@/common/echart'
+export default {
+  data() {
+    return {
+      options: {},
+      // 定义颜色
+      colorList: {
+        linearYtoG: {
+          type: 'linear',
+          x: 0,
+          y: 0,
+          x2: 1,
+          y2: 1,
+          colorStops: [
+            {
+              offset: 0,
+              color: '#f5b44d'
+            },
+            {
+              offset: 1,
+              color: '#28f8de'
+            }
+          ]
+        },
+        linearGtoB: {
+          type: 'linear',
+          x: 0,
+          y: 0,
+          x2: 1,
+          y2: 0,
+          colorStops: [
+            {
+              offset: 0,
+              color: '#43dfa2'
+            },
+            {
+              offset: 1,
+              color: '#28f8de'
+            }
+          ]
+        },
+        linearBtoG: {
+          type: 'linear',
+          x: 0,
+          y: 0,
+          x2: 1,
+          y2: 0,
+          colorStops: [
+            {
+              offset: 0,
+              color: '#1c98e8'
+            },
+            {
+              offset: 1,
+              color: '#28f8de'
+            }
+          ]
+        },
+        areaBtoG: {
+          type: 'linear',
+          x: 0,
+          y: 0,
+          x2: 0,
+          y2: 1,
+          colorStops: [
+            {
+              offset: 0,
+              color: 'rgba(35,184,210,.2)'
+            },
+            {
+              offset: 1,
+              color: 'rgba(35,184,210,0)'
+            }
+          ]
+        }
+      }
+    }
+  },
+  components: {
+    Echart
+  },
+  props: {
+    cdata: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  watch: {
+    cdata: {
+      handler(newData) {
+        this.options = {
+          title: {
+            text: '',
+            textStyle: {
+              color: '#D3D6DD',
+              fontSize: 24,
+              fontWeight: 'normal'
+            },
+            subtext: newData.year + '/' + newData.nowdate,
+            subtextStyle: {
+              color: '#fff',
+              fontSize: 18
+            },
+            top: 50,
+            left: 80
+          },
+          legend: {
+            top: 120,
+            left: 80,
+            orient: 'vertical',
+            itemGap: 15,
+            itemWidth: 14,
+            itemHeight: 14,
+            data: ['实际','平均'],
+            textStyle: {
+              color: '#fff',
+              fontSize: 16
+            }
+          },
+          tooltip: {
+            trigger: 'item'
+          },
+          radar: {
+            center: ['68%', '27%'],
+            radius: '40%',
+            name: {
+              color: '#fff',
+              fontSize:16
+            },
+            splitNumber: 8,
+            axisLine: {
+              lineStyle: {
+                color: this.colorList.linearYtoG,
+                opacity: 0.6
+              }
+            },
+            splitLine: {
+              lineStyle: {
+                color: this.colorList.linearYtoG,
+                opacity: 0.6
+              }
+            },
+            splitArea: {
+              areaStyle: {
+                color: '#fff',
+                opacity: 0.1,
+                shadowBlur: 25,
+                shadowColor: '#000',
+                shadowOffsetX: 0,
+                shadowOffsetY: 5
+              }
+            },
+            indicator: [
+              {
+                name: '来料不良',
+                 max: 100
+              },
+              {
+                name: '制程不良',
+                max: 100
+              },
+              {
+                name: '设计不良',
+                max: 100
+              },
+              {
+                name: '其他',
+                max: 100
+              }
+            ]
+          },
+          grid: {
+            left: 90,
+            right: 80,
+            bottom: 40,
+            top: '60%'
+          },
+          xAxis: {
+            type: 'category',
+            position: 'bottom',
+            axisLine: true,
+            axisLabel: {
+              color: 'rgba(255,255,255,.8)',
+              fontSize: 15
+            },
+            data: newData.weekCategory
+          },
+          // 下方Y轴
+          yAxis: {
+            name: '',
+            nameLocation: 'end',
+            nameGap: 24,
+            nameTextStyle: {
+              color: 'rgba(255,255,255,.5)',
+              fontSize: 14
+            },
+            max:newData.maxData,
+            //splitNumber: 4,
+            min:newData.minData,
+
+            axisLine: {
+              lineStyle: {
+                opacity: 0
+              }
+            },
+            splitLine: {
+              show: true,
+              lineStyle: {
+                color: '#fff',
+                opacity: 0.1
+              }
+            },
+            axisLabel: {
+              color: 'rgba(255,255,255,.8)',
+              fontSize: 14
+            }
+          },
+          series: [
+            {
+              name: '',
+              type: 'radar',
+              symbolSize: 0,
+              data: [
+                {
+                  value: newData.radarDataAvg,
+                  name: '平均',
+                  itemStyle: {
+                    normal: {
+                      color: '#f8d351'
+                    }
+                  },
+                  lineStyle: {
+                    normal: {
+                      opacity: 0
+                    }
+                  },
+                  areaStyle: {
+                    normal: {
+                      color: '#f8d351',
+                      shadowBlur: 25,
+                      shadowColor: 'rgba(248,211,81,.3)',
+                      shadowOffsetX: 0,
+                      shadowOffsetY: -10,
+                      opacity: 1
+                    }
+                  }
+                },
+                {
+                  value: newData.radarData,
+                  name: '实际',
+                  itemStyle: {
+                    normal: {
+                      color: '#43dfa2'
+                    }
+                  },
+                  lineStyle: {
+                    normal: {
+                      opacity: 0
+                    }
+                  },
+                  areaStyle: {
+                    normal: {
+                      color: this.colorList.linearGtoB,
+                      shadowBlur: 15,
+                      shadowColor: 'rgba(0,0,0,.2)',
+                      shadowOffsetX: 0,
+                      shadowOffsetY: 5,
+                      opacity: 0.8
+                    }
+                  }
+                }
+              ]
+            },
+            {
+              name: '',
+              type: 'line',
+              smooth: true,
+              symbol: 'emptyCircle',
+              symbolSize: 8,
+              itemStyle: {
+                normal: {
+                  color: '#fff'
+                }
+              },
+              lineStyle: {
+                normal: {
+                  color: this.colorList.linearBtoG,
+                  width: 3
+                }
+              },
+              areaStyle: {
+                normal: {
+                  color: this.colorList.areaBtoG
+                }
+              },
+              data: newData.weekLineData,
+              label: {
+                show: true,
+                position: 'top',
+                fontSize:14,
+              },
+              lineSmooth: true,
+              markLine: {
+                silent: true,
+                data: [
+                  {yAxis: 98}
+                  /*{
+                    type: 'average',
+                    value:80,
+                    name: '平均值'
+                  }*/
+                ],
+                precision: 0,
+                label: {
+                  normal: {
+                    formatter: '目标线: \n {c}'
+                  }
+                },
+                lineStyle: {
+                  normal: {
+                    fontSize: 16,
+                    color: 'rgba(248,211,81,.7)'
+                  }
+                }
+              },
+              tooltip: {
+                position: 'top',
+                formatter: '{c} %',
+                backgroundColor: 'rgba(28,152,232,.2)',
+                padding: 6
+              }
+            },
+            {
+              name: '占位背景',
+              type: 'bar',
+              itemStyle: {
+                normal: {
+                  show: true,
+                  color: '#000',
+                  opacity: 0
+                }
+              },
+              silent: true,
+              barWidth: '50%',
+              data: newData.weekMaxData,
+              animation: false
+            }
+          ]
+        }
+      },
+      immediate: true,
+      deep: true
+    }
+  }
+}
+</script>

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

@@ -0,0 +1,172 @@
+<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: []
+      }
+    }
+  },
+  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';
+      if (sessionStorage.getItem('li_code') == '所有'){
+        caller1 = '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 ;
+                        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;
+                          }
+                        }
+                        //获取最小值，取整十的数
+                        minDa = Math.floor(minDa/10)*10;
+                        this.cdata.minData = minDa;
+                        this.cdata.weekCategory = weekCategory;
+                        this.cdata.weekLineData = weekLineData;
+                      },(result)=>{
+                        console.error(result)
+                      }
+              );
+       //雷达图：
+      var caller2 = 'RadiusBadDuty';
+      if (sessionStorage.getItem('li_code') == '所有'){
+        caller2 = 'RadiusBadDuty!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/totalchart/bottom/bottomRightNgChart/chart.vue

@@ -0,0 +1,111 @@
+<template>
+  <div>
+    <!-- 当日工段投产良率 -->
+    <Echart
+        :options="options"
+        id="bottomRightNgChart"
+        height="120px"
+        width="100%"
+        ref="column-board"
+    ></Echart>
+  </div>
+</template>
+
+<script>
+import Echart from '@/common/echart'
+//import { formatDate } from '../../../../utils/index.js'
+export default {
+  data () {
+    return {
+      options:{
+        title:{},
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'shadow'
+          }
+        },
+        // legend: {},
+        grid: {
+          left: '3%',
+          right: '4%',
+          bottom: '5%',
+          top:15,
+          containLabel: true
+        },
+        xAxis: [
+          {
+            type: 'category',
+            data:[],
+            axisLabel: {
+              fontSize: 9
+            }
+          }
+        ],
+        yAxis: [
+          {
+            type: 'value',
+          }
+        ],
+        series: [
+          {
+            type: 'bar',
+            barWidth: 20,
+            stack: 'Ad',
+            data:[],
+            itemStyle: {
+              color: '#ff7261'
+            },
+          },
+        ]
+      },
+    };
+  },
+  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];
+                  if(index%2 == 0) {
+                    xAxis0.push(element.linecode);
+                  }else{
+                    xAxis0.push('\n'+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/totalchart/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/totalchart/center/centerChartRate/index.vue

@@ -0,0 +1,104 @@
+<template>
+  <div>
+    <!-- 通过率/达标率 -->
+    <Echart
+      :options="options"
+      :id="id"
+      height="100px"
+      width="400px"
+    ></Echart>
+  </div>
+</template>
+
+<script>
+import Echart from '@/common/echart'
+export default {
+  data () {
+    return {
+      options: {},
+    };
+  },
+  components: {
+    Echart,
+  },
+  props: {
+    id: {
+      type: String,
+      required: true,
+      default: "chartRate"
+    },
+    tips: {
+      type: Number,
+      required: true,
+      default: 50
+    },
+    colorObj: {
+      type: Object,
+      default: function () {
+        return {
+          textStyle: "#3fc0fb",
+          series: {
+            color: ["#00bcd44a", "transparent"],
+            dataColor: {
+              normal: "#03a9f4",
+              shadowColor: "#97e2f5"
+            }
+          }
+        };
+      }
+    }
+  },
+  watch: {
+    // tips 是会变更的数据，所以进行监听
+    tips: {
+      handler (newData) {
+        this.options = {
+          title:{
+            text: newData * 1 + "%",
+            x: "center",
+            y: "center",
+            textStyle: {
+              color: this.colorObj.textStyle,
+              fontSize: 16
+            }
+          },
+          series: [
+            {
+              type: "pie",
+              radius: ["75%", "80%"],
+              center: ["50%", "50%"],
+              hoverAnimation: false,
+              color: this.colorObj.series.color,
+              label: {
+                normal: {
+                  show: false
+                }
+              },
+              data: [
+                {
+                  value: newData,
+                  itemStyle: {
+                    normal: {
+                      color: this.colorObj.series.dataColor.normal,
+                      shadowBlur: 10,
+                      shadowColor: this.colorObj.series.dataColor.shadowColor
+                    }
+                  }
+                },
+                {
+                  value: 100 - newData
+                }
+              ]
+            }
+          ]
+        }
+      },
+      immediate: true,
+      deep: true
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+</style>

src/components/totalchart/centerLeft/centerChartRate/index.vue

@@ -0,0 +1,105 @@
+<template>
+  <div>
+    <!-- 通过率/达标率 -->
+    <Echart
+        :options="options"
+        :id="id"
+        height="100px"
+        width="150px"
+    ></Echart>
+  </div>
+</template>
+
+<script>
+import Echart from '@/common/echart'
+export default {
+  data () {
+    return {
+      options: {},
+    };
+  },
+  components: {
+    Echart,
+  },
+  props: {
+    id: {
+      type: String,
+      required: true,
+      default: "chartRate"
+    },
+    tips: {
+      type: Number,
+      required: true,
+      default: 50
+    },
+    colorObj: {
+      type: Object,
+      default: function () {
+        return {
+          textStyle: "#3fc0fb",
+          series: {
+            color: ["#00bcd44a", "transparent"],
+            dataColor: {
+              normal: "#03a9f4",
+              shadowColor: "#97e2f5"
+            }
+          }
+        };
+      }
+    }
+  },
+  watch: {
+    // tips 是会变更的数据，所以进行监听
+    tips: {
+      handler (newData) {
+        this.options = {
+          title:{
+            text: newData * 1 + "%",
+            x: "center",
+            y: "center",
+            textStyle: {
+              color: this.colorObj.textStyle,
+              fontSize: 15
+            }
+          },
+          series: [
+            {
+              type: "pie",
+              radius: ["95%", "80%"],
+              center: ["50%", "50%"],
+              hoverAnimation: false,
+              color: this.colorObj.series.color,
+              label: {
+                normal: {
+                  show: false
+                }
+              },
+              data: [
+                {
+                  value: newData,
+                  itemStyle: {
+                    normal: {
+                      color: this.colorObj.series.dataColor.normal,
+                      shadowBlur: 10,
+                      shadowColor: this.colorObj.series.dataColor.shadowColor
+                    }
+                  }
+                },
+                {
+                  value: 100 - newData
+                }
+              ],
+              height: '90%',
+            }
+          ]
+        }
+      },
+      immediate: true,
+      deep: true
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+</style>

src/components/totalchart/centerLeft/centerLeft1ALLChart/chart.vue

@@ -0,0 +1,186 @@
+<template>
+  <div>
+    <!-- 年度开工率 -->
+    <Echart
+      :options="options"
+      id="centerLeft1ALLChart"
+      height="250px"
+      width="450px"
+      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: '0%',
+          right: '0%',
+          bottom: '3%',
+          containLabel: true
+        },
+        xAxis: [
+          {
+            type: 'category',
+            axisLabel: {
+              show: false,
+              fontSize: 16,
+              fontWeight: "bold"
+            }
+          }
+        ],
+        yAxis: [
+          {
+            type: 'value',
+            axisLabel: {
+              fontSize: 16
+            }
+          },
+
+        ],
+        series: [
+          {
+            name: '计划数',
+            type: 'bar',
+            barWidth: 70,
+            emphasis: {
+              focus: 'series'
+            },
+            data:[],
+            label: {
+              show: true,
+              position: 'top',
+              fontSize:14,
+              fontWeight: "bold"
+            },
+          },
+          {
+            name: '投入数',
+            type: 'bar',
+            barWidth: 70,
+            emphasis: {
+              focus: 'series'
+            },
+            data:[],
+            label: {
+              show: true,
+              position: 'top',
+              color:'#fff'
+            },
+          },
+          {
+            name: '产出数',
+            type: 'bar',
+            stack: 'Ad',
+            barWidth: 70,
+            data:[],
+            emphasis: {
+              focus: 'series'
+            },
+            label: {
+              show: true,
+              position: 'top',
+              color:'#fff'
+            }
+          },
+          {
+            name: '不良数',
+            type: 'bar',
+            barWidth: 70,
+            data:[],
+            label: {
+              show: true,
+              position: 'top',
+              color:'#fff'
+            },
+            emphasis: {
+              focus: 'series'
+            }
+          }
+        ]
+      },
+    };
+  },
+  components: {
+    Echart, //子组件
+  },
+  props: {
+    cdata: {
+      type: Object,
+      default: () => ({})
+    },
+  },
+
+  mounted() {
+    this.getdata();
+    this.refreshdata();
+  },
+  beforeDestroy () {
+    clearInterval(this.timing)
+  },
+  methods: {
+    refreshdata() {
+      this.timing = setInterval(() => {
+        this.getdata(); //获取-数据
+      }, 30000);
+    },
+    async getdata() {
+      //20220211 -+formatDate(new Date()
+      var caller = 'MAKEQTY';
+      if (sessionStorage.getItem('li_code') == '所有'){
+        caller = 'MAKEQTY!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 series0 = new Array();
+                        let series1 = new Array();
+                        let series2 = new Array();
+                        let series3 = new Array();
+                        let xAxis0 = new Array();
+                        for (let index = 0; index < dataList.length; index++) {
+                          const element = dataList[index];
+                          xAxis0.push(element.inqty);
+                          series0.push(element.planqty);
+                          //投入
+                          series1.push(element.inqty);
+                          //产出
+                          series2.push(element.outqty);
+                          //不良
+                          series3.push(element.ngqty);
+                        }
+                        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;
+                      },(result)=>{
+                        console.error(result)
+                      }
+              );
+    }
+  }
+}
+</script>

src/components/totalchart/centerLeft/centerLeft1ALLChart/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/totalchart/centerLeft/centerLeft1Chart/chart.vue

@@ -0,0 +1,81 @@
+<template>
+  <div>
+    <Echart
+      :options="options"
+      id="centreLeft1Chart"
+      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/totalchart/centerLeft/centerLeft1Chart/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 {
+      cdata: {
+        intervalId :null,
+        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';
+      if (sessionStorage.getItem('li_code') == '所有'){
+        caller = '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/components/totalchart/centerRight/centerChartRate/index.vue

@@ -0,0 +1,104 @@
+<template>
+  <div>
+    <!-- 通过率/达标率 -->
+    <Echart
+      :options="options"
+      :id="id"
+      height="200px"
+      width="200px"
+    ></Echart>
+  </div>
+</template>
+
+<script>
+import Echart from '@/common/echart'
+export default {
+  data () {
+    return {
+      options: {},
+    };
+  },
+  components: {
+    Echart,
+  },
+  props: {
+    id: {
+      type: String,
+      required: true,
+      default: "chartRate"
+    },
+    tips: {
+      type: Number,
+      required: true,
+      default: 50
+    },
+    colorObj: {
+      type: Object,
+      default: function () {
+        return {
+          textStyle: "#3fc0fb",
+          series: {
+            color: ["#00bcd44a", "transparent"],
+            dataColor: {
+              normal: "#03a9f4",
+              shadowColor: "#97e2f5"
+            }
+          }
+        };
+      }
+    }
+  },
+  watch: {
+    // tips 是会变更的数据，所以进行监听
+    tips: {
+      handler (newData) {
+        this.options = {
+          title:{
+            text: newData * 1 + "%",
+            x: "center",
+            y: "center",
+            textStyle: {
+              color: this.colorObj.textStyle,
+              fontSize: 16
+            }
+          },
+          series: [
+            {
+              type: "pie",
+              radius: ["75%", "80%"],
+              center: ["50%", "50%"],
+              hoverAnimation: false,
+              color: this.colorObj.series.color,
+              label: {
+                normal: {
+                  show: false
+                }
+              },
+              data: [
+                {
+                  value: newData,
+                  itemStyle: {
+                    normal: {
+                      color: this.colorObj.series.dataColor.normal,
+                      shadowBlur: 10,
+                      shadowColor: this.colorObj.series.dataColor.shadowColor
+                    }
+                  }
+                },
+                {
+                  value: 100 - newData
+                }
+              ]
+            }
+          ]
+        }
+      },
+      immediate: true,
+      deep: true
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+</style>

src/components/totalchart/centerRight/centerRightChart/chart.vue

@@ -0,0 +1,103 @@
+<template>
+  <div>
+    <Echart
+      :options="options"
+      id="centreRight2Chart1"
+      height="180px"
+      width="260px"
+    ></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) {
+        // 固定样式数据
+        let lineStyle = {
+          normal: {
+            width: 1,
+            opacity: 0.5
+          }
+        };
+
+        this.options = {
+          radar: {
+            indicator: newData.indicatorData,
+            shape: "circle",
+            splitNumber: 5,
+            radius: ["0%", "65%"],
+            name: {
+              textStyle: {
+                color: "rgb(238, 197, 102)"
+              }
+            },
+            splitLine: {
+              lineStyle: {
+                color: [
+                  "rgba(238, 197, 102, 0.1)",
+                  "rgba(238, 197, 102, 0.2)",
+                  "rgba(238, 197, 102, 0.4)",
+                  "rgba(238, 197, 102, 0.6)",
+                  "rgba(238, 197, 102, 0.8)",
+                  "rgba(238, 197, 102, 1)"
+                ].reverse()
+              }
+            },
+            splitArea: {
+              show: false
+            },
+            axisLine: {
+              lineStyle: {
+                color: "rgba(238, 197, 102, 0.5)"
+              }
+            },
+            nameGap: 18
+          },
+          series: [
+            {
+              name: "",
+              type: "radar",
+              lineStyle: lineStyle,
+              data: newData.dataRadius,
+              symbol: "circle",
+              label: {
+                show: true,
+                offset: [0, 3],
+              },
+              itemStyle: {
+                normal: {
+                  color: "#F9713C"
+                }
+              },
+              areaStyle: {
+                normal: {
+                  opacity: 0.1
+                }
+              }
+            },
+          ]
+        }
+      },
+      immediate: true,
+      deep: true
+    }
+  }
+};
+</script>

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

@@ -0,0 +1,106 @@
+<template>
+  <div>
+    <Chart :cdata="cdata" />
+  </div>
+</template>
+
+<script>
+import Chart from './chart.vue';
+export default {
+  data () {
+    return {
+      timing : null,
+      cdata: {
+        indicatorData :[],
+        dataRadius : []
+       /* indicatorData: [
+          { name: "插件", max: 300 },
+          { name: "组装", max: 250 },
+          { name: "老化", max: 300 },
+          { name: "包装", max: 5},
+        ],
+        dataRadius: [
+          [94, 69, 114, 2.08, 73, 39, 22],
+          [99, 73, 110, 2.43, 76, 48, 23],
+          [31, 12, 30, 0.5, 32, 16, 24],
+          [42, 27, 43, 1, 53, 22, 25],
+          [154, 117, 157, 3.05, 92, 58, 26],
+          [234, 185, 230, 4.09, 123, 69, 27],
+          [160, 120, 186, 2.77, 91, 50, 28]
+        ],
+        dataGZ: [
+          [84, 94, 140, 2.238, 68, 18, 22],
+          [93, 77, 104, 1.165, 53, 7, 23],
+          [99, 130, 227, 3.97, 55, 15, 24],
+          [146, 84, 139, 1.094, 40, 17, 25],
+          [113, 108, 137, 1.481, 48, 15, 26],
+          [81, 48, 62, 1.619, 26, 3, 27],
+          [56, 48, 68, 1.336, 37, 9, 28]
+        ],
+        dataSH: [
+          [91, 45, 125, 0.82, 34, 23, 1],
+          [65, 27, 78, 0.86, 45, 29, 2],
+          [83, 60, 84, 1.09, 73, 27, 3],
+          [109, 81, 121, 1.28, 68, 51, 4],
+          [106, 77, 114, 1.07, 55, 51, 5],
+          [109, 81, 121, 1.28, 68, 51, 6],
+          [106, 77, 114, 1.07, 55, 51, 7]
+        ]*/
+      }
+    }
+  },
+  components: {
+    Chart,
+  },
+  mounted () {
+    this.drawTimingFn();
+  },
+  beforeDestroy () {
+    clearInterval(this.timing)
+  },
+  methods: {
+    drawTimingFn () {
+      this.setData();
+      this.timing = setInterval(() => {
+        this.setData(); //获取-数据
+      }, 30000);
+    },
+    async setData () {
+      // 清空轮询数据
+      this.cdata.indicatorData = [];
+      this.cdata.dataRadius = [];
+
+      let dateBase = new Date();
+      this.cdata.year = dateBase.getFullYear();
+      //  //雷达图：
+      var caller = 'STEPOKRATE';
+      if (sessionStorage.getItem('li_code') == '所有'){
+        caller = 'STEPOKRATE!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 indicatorData = new Array();
+                        let radiusData = new Array();
+                        for (let index = 0; index < dataList.length; index++) {
+                          const element = dataList[index];
+                          let obj = new Object();
+                          obj.name = element.name;
+                          obj.max = 100;
+                          indicatorData.push(obj);
+                          //数据
+                          radiusData.push(element.value);
+                        }
+                        this.cdata.indicatorData = indicatorData;
+                        this.cdata.dataRadius.push(radiusData);
+                      },(result)=>{
+                        console.error(result)
+                      }
+              );
+    }
+  }
+}
+</script>

src/router/index.js

@@ -66,6 +66,14 @@ const routes = [{
     title: "DIP",
     requireAuth: true // 标识该路由是否需要登录
   }
+},{
+  path: '/total',
+  name: 'total',
+  component: () => import('../views/total/index.vue'),
+  meta: {
+    title: "TOTAL",
+    requireAuth: true // 标识该路由是否需要登录
+  }
 }]
 const router = new VueRouter({
   routes

src/views/smt/index.vue

@@ -65,6 +65,7 @@
                     <el-dropdown-item class="dropdownitem"><router-link to="dpl">多品类车间</router-link></el-dropdown-item>
                     <el-dropdown-item class="dropdownitem"><router-link to="assembly">组装车间</router-link></el-dropdown-item>
                     <el-dropdown-item class="dropdownitem"><router-link to="package"> 包装车间</router-link></el-dropdown-item>
+                    <el-dropdown-item class="dropdownitem"><router-link to="total"> 各车间总看板</router-link></el-dropdown-item>
                   </el-dropdown-menu>
               </el-dropdown>
 

src/views/total/bottomLeft2.vue

@@ -0,0 +1,69 @@
+<template>
+  <div id="bottomLeft">
+    <div class="up">
+      <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 class="down">
+      <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-xl text mx-2">当日线体产出及计划达成统计</span>
+          </div>
+        </div>
+        <div>
+          <BottomLeft2Chart />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import BottomLeft2Chart from '@/components/totalchart/bottom/bottomLeft2Chart';
+import BottomRightNgChart from "@/components/totalchart/bottom/bottomRightNgChart";
+export default {
+  components: {
+    BottomLeft2Chart,
+    BottomRightNgChart
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+$box-height: 520px;
+$box-width: 100%;
+#bottomLeft {
+  padding: 15px 10px;
+  height: $box-height;
+  width: $box-width;
+  border-radius: 5px;
+  .up{
+    height: 150px;
+    .bg-color-black {
+      border-radius: 10px;
+      height: 150px;
+    }
+  }
+  .down{
+    height: 370px;
+    .bg-color-black {
+      height: 350px;
+      border-radius: 10px;
+    }
+  }
+
+
+}
+</style>

src/views/total/bottomRight.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/totalchart/bottom/bottomRightChart";
+export default {
+  components: {
+    BottomRightChart
+  }
+};
+</script>
+
+<style lang="scss" class>
+$box-height: 420px;
+$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: 200px;
+    .active-ring-name {
+      padding-top: 10px;
+    }
+  }
+}
+</style>

src/views/total/center.vue

@@ -0,0 +1,223 @@
+<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-ranking-board class="dv-scr-rank-board mt-1" :config="ranking" ref="scroll-ranking-board"/>
+      </div>
+
+    </div>
+  </div>
+</template>
+
+<script>
+//import CenterChart from '@/components/packageechart/center/centerChartRate'
+
+export default {
+  data() {
+    return {
+      titleItem:[],
+      ranking: {
+        data: [],
+        carousel: 'single',
+        rowNum:4,
+        valueFormatter ({ name,value }) {
+          console.warn(arguments);
+          if((name == '插件' && value<98) || (name == '组装' && value<99.2) || (name == '老化' && value<99) || (name == '包装' && value<98)) {
+            return '<div style ="color:red">' + value + ' </div>';
+          }else{
+            return '<div style ="color:#18a158">' + value + ' </div>';
+          }
+        }
+      },
+      water: {
+        data: [],//[24, 66],
+        shape: 'roundRect',
+        formatter: '{value}%',
+        waveNum: 3,
+        waveHeight:20
+      },
+    }
+  },
+  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';
+      if (sessionStorage.getItem('li_code') == '所有'){
+        caller = '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;
+$box-width: 100%;
+#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: 40%;
+      height: 70px;
+      .dv-dig-flop {
+        width: 170px;
+        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>

src/views/total/centerLeft1.vue

@@ -0,0 +1,177 @@
+<template>
+  <div id="centerLeft1">
+    <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-xl text mx-2">不良现象TOP5</span>
+          <dv-decoration-3 class="dv-dec-3" />
+        </div>
+      </div>
+      <div class="d-flex jc-center">
+         <CenterLeft1Chart />
+      </div>
+      <!-- 4个主要的数据
+      <div class="bottom-data">
+        <div
+          class="item-box mt-2"
+          v-for="(item, index) in numberData"
+          :key="index"
+        >
+          <div class="d-flex">
+            <span class="coin">￥</span>
+            <dv-digital-flop class="dv-digital-flop" :config="item.number" />
+          </div>
+          <p class="text" style="text-align: center;">
+            {{ item.text }}
+            <span class="colorYellow">(件)</span>
+          </p>
+        </div>
+      </div>
+      -->
+    </div>
+  </div>
+</template>
+
+<script>
+import CenterLeft1Chart from '@/components/packageechart/centerLeft/centerLeft1Chart'
+export default {
+  data() {
+    return {
+      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: {
+    CenterLeft1Chart
+  },
+  mounted() {
+   // this.changeTiming()
+  },
+  beforeDestroy () {
+   clearInterval(this.intervalId)
+    this.chart.dispose()
+    this.chart.clear()
+    this.chart=null
+  },
+  methods: {
+    changeTiming() {
+      setInterval(() => {
+        this.changeNumber()
+      }, 20000)
+    },
+    changeNumber() {
+      this.numberData.forEach((item, index) => {
+        item.number.number[0] += ++index
+        item.number = { ...item.number }
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+$box-height: 420px;
+$box-width: 350px;
+#centerLeft1 {
+  padding: 5px;
+  height: $box-height;
+  font-size: 32px;
+  width: $box-width;
+  border-radius: 5px;
+  .bg-color-black {
+    height: $box-height - 10px;
+    border-radius: 10px;
+    padding: 5px;
+  }
+  .text {
+    color: #FFE900;
+  }
+  .dv-dec-3 {
+    position: relative;
+    width: 100px;
+    height: 20px;
+    top: -3px;
+  }
+
+  .bottom-data {
+    .item-box {
+      & > div {
+        padding-right: 5px;
+      }
+      font-size: 14px;
+      float: right;
+      position: relative;
+      width: 50%;
+      color: #d3d6dd;
+      .dv-digital-flop {
+        width: 120px;
+        height: 30px;
+      }
+      // 金币
+      .coin {
+        position: relative;
+        top: 6px;
+        font-size: 20px;
+        color: #ffc107;
+      }
+      .colorYellow {
+        color: yellowgreen;
+      }
+      p {
+        text-align: center;
+      }
+    }
+  }
+}
+</style>

src/views/total/centerLeft1ALL.vue

@@ -0,0 +1,197 @@
+<template>
+  <div id="centerLeft1ALL">
+    <div class="bg-color-black">
+      <div class="d-flex pt-2 pl-2">
+        <span>
+          <icon name="chart-bar" class="text-icon"></icon>
+        </span>
+        <span class="fs-xl text mx-2 mb-1 pl-3">工单完成情况统计</span>
+      </div>
+      <div class="d-flex jc-center columnperent">
+         <CenterLeft1ALLChart/>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import CenterLeft1ALLChart from '@/components/totalchart/centerLeft/centerLeft1ALLChart'
+export default {
+  data() {
+    return {
+      titleItem:[],
+      config: {
+        data: [],
+        showValue: true
+      },
+      // 通过率和达标率的组件复用数据
+      rate: [
+        {
+          id: 'centerRate1',
+          tips: 50,
+          colorData: {
+            textStyle: '#31b4fb',
+            series: {
+              color: ['rgba(19,122,244,0.29)', 'transparent'],
+              dataColor: {
+                normal: '#137af4',
+                shadowColor: '#80e0f5'
+              }
+            }
+          }
+        },
+        {
+          id: 'centerRate2',
+          tips: 60,
+          colorData: {
+            textStyle: '#43cfe9',
+            series: {
+              color: ['#00bcd44a', 'transparent'],
+              dataColor: {
+                normal: '#32C5E9',
+                shadowColor: '#9fe5f5'
+              }
+            }
+          }
+        },
+        {
+          id: 'centerRate3',
+          tips: 60,
+          colorData: {
+            textStyle: '#6ad59c',
+            series: {
+              color: ['rgba(25,161,95,0.29)', 'transparent'],
+              dataColor: {
+                normal: '#00a11a',
+                shadowColor: '#6cda9c'
+              }
+            }
+          }
+        }
+      ],
+      intervalId :null
+    }
+  },
+  components: {
+    CenterLeft1ALLChart,
+  },
+  mounted() {
+    this.changeTiming()
+  },
+  beforeDestroy () {
+   clearInterval(this.intervalId)
+    this.chart.dispose()
+    this.chart.clear()
+    this.chart=null
+  },
+  methods: {
+    changeTiming() {
+      this.changeNumber();
+      this.intervalId =  setInterval(() => {
+        this.changeNumber()
+      }, 20000)
+    },
+    async changeNumber() {
+      var caller2 = 'MakeComRate';
+      if (sessionStorage.getItem('li_code') == '所有'){
+        caller2 = 'MakeComRate!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);
+            const element = dataList[0];
+            this.rate[0].tips = element.rate1;
+            this.rate[0].title = element.title1;
+            this.rate[1].tips = element.rate2;
+            this.rate[1].title = element.title2;
+            this.rate[2].tips = element.rate3;
+            this.rate[2].title = element.title3;
+              },(result)=>{
+                console.error(result)
+              }
+          );
+
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+$box-height: 420px;
+$box-width: 500px;
+#centerLeft1ALL {
+  padding: 0px;
+  height: $box-height;
+  font-size: 50px;
+  width: $box-width;
+  border-radius: 10px;
+  .bg-color-black {
+    height: $box-height - 10px;
+    border-radius: 10px;
+    padding: 5px;
+  }
+
+  .circleperent {
+    width: 100%;
+    display: flex;
+    flex-wrap: wrap;
+    .item {
+      width: 33%;
+      height: 118px;
+      span {
+        margin-top: 15px;
+        font-size: 18px;
+        display: flex;
+        justify-content: center;
+      }
+    }
+  }
+  .columnperent {
+    width: 100%;
+    display: flex;
+  }
+  .text {
+    color: #FFE900;
+  }
+  .dv-dec-3 {
+    position: relative;
+    width: 150px;
+    height: 20px;
+    top: -3px;
+  }
+
+  .bottom-data {
+    .item-box {
+      & > div {
+        padding-right: 5px;
+      }
+      font-size: 14px;
+      float: right;
+      position: relative;
+      width: 50%;
+      color: #d3d6dd;
+      .dv-digital-flop {
+        width: 120px;
+        height: 30px;
+      }
+      // 金币
+      .coin {
+        position: relative;
+        top: 6px;
+        font-size: 20px;
+        color: #ffc107;
+      }
+      .colorYellow {
+        color: yellowgreen;
+      }
+      p {
+        text-align: center;
+      }
+    }
+  }
+}
+</style>

src/views/total/centerLeft_two.vue

@@ -0,0 +1,191 @@
+<template>
+  <div id="centerLeft1">
+    <div class="bg-color-black">
+      <div class="d-flex pt-2 pl-2">
+        <span>
+          <icon name="align-left" class="text-icon"></icon>
+        </span>
+        <span class="fs-xl text mx-2">工单生产信息</span>
+      </div>
+      <div class="d-flex ai-center flex-column body-box">
+        <div class="up">
+          <div class="item">
+            <p class="ml-3 colorBlue fw-b fs-xl">工单号</p>
+            <div class="dv-dig-flop ml-1 mt-2 pl-3"> {{ upitem.sp_makecode }}
+            </div>
+          </div>
+          <div class="item">
+            <p class="ml-3 colorBlue fw-b fs-xl">产品名称</p>
+            <div class="dv-dig-flop ml-1 mt-2 pl-3"> {{ upitem.pr_detail }}
+            </div>
+          </div>
+          <div class="item">
+            <p class="ml-3 colorBlue fw-b fs-xl">工单总数</p>
+            <div class="dv-dig-flop ml-1 mt-2 pl-3"> {{ upitem.ma_qty }}
+            </div>
+          </div>
+          <div class="item">
+            <p class="ml-3 colorBlue fw-b fs-xl">工单投入数</p>
+            <div class="dv-dig-flop ml-1 mt-2 pl-3"> {{ upitem.inqty }}
+            </div>
+          </div>
+          <div class="item">
+            <p class="ml-3 colorBlue fw-b fs-xl">工单完工数</p>
+            <div class="dv-dig-flop ml-1 mt-2 pl-3"> {{ upitem.outqty }}
+            </div>
+          </div>
+          <div class="item">
+            <p class="ml-3 colorBlue fw-b fs-xl">工单达成率</p>
+            <div class="dv-dig-flop ml-1 mt-2 pl-3"> {{ upitem.okrate }}%
+            </div>
+          </div>
+        </div>
+    <!--    <div class="up">
+          <div
+                  class="item"
+                  v-for="item in titleItem"
+                  :key="item.title"
+          >
+            <p class="ml-3 colorBlue fw-b fs-xl">{{ item.title }}</p>
+            <div class="dv-dig-flop ml-1 mt-2 pl-3"> {{ item.number }}
+             &lt;!&ndash; <dv-digital-flop
+                      class="dv-dig-flop ml-1 mt-2 pl-3"
+                      :config="item.number"
+              />&ndash;&gt;
+            </div>
+          </div>
+        </div>-->
+         <span class="fs-xl text mx-2">工序投产良率分析</span>
+        <centerRight2Chart1 />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import centerRight2Chart1 from '@/components/totalchart/centerRight/centerRightChart'
+
+export default {
+  data() {
+    return {
+      titleItem:[],
+      timing : null,
+      upitem:{}
+    }
+  },
+  components: { centerRight2Chart1 },
+  mounted() {
+    this.refreshdata();
+  },
+  beforeDestroy () {
+    clearInterval(this.timing)
+  },
+  methods: {
+    refreshdata() {
+      this.settestdata(); //获取数据
+      this.timing = setInterval(() => {
+        this.settestdata(); //获取-主题词
+      }, 30000);
+    },
+    async settestdata(){
+      var caller = 'MAKEQTY';
+      if (sessionStorage.getItem('li_code') == '所有'){
+        caller = 'MAKEQTY!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 titleitems = new Array();
+                      for (let index = 0; index < dataList.length; index++) {
+                        const element = dataList[index];
+                        this.upitem = element;
+                      /*  if(element.name =='工单达成率'){
+                          titleitems.push({
+                            title: element.name,
+                            number: element.value +'%'/!*{
+                              number: [element.value],
+                              textAlign: 'left',
+                              toFixed: 2,
+                              content: '{nt}%',
+                              style: {
+                                fontSize: 26
+                              }
+                            }*!/
+                          });
+                        }else {
+                          titleitems.push({
+                            title: element.name,
+                            number:element.value /!*{
+                              number: [element.value],
+                              textAlign: 'left',
+                              content: '{nt}',
+                              style: {
+                                fontSize: 26
+                              }
+                            }*!/
+                          });
+                        }*/
+                      }
+                      this.titleItem = titleitems;
+                      },(result)=>{
+                        console.error(result)
+                      }
+              );
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+  $box-width: 400px;
+  $box-height: 420px;
+#centerLeft1 {
+  padding: 5px;
+  height: $box-height;
+  width: $box-width;
+  border-radius: 5px;
+  .bg-color-black {
+    height: $box-height - 10px;
+    width: $box-width;
+    border-radius: 10px;
+    padding: 0px 5px 0px 0px;
+  }
+  .text {
+    color: #c3cbde;
+  }
+  .body-box {
+    border-radius: 10px;
+    overflow: hidden;
+    /*.dv-cap-chart {
+      width: 100%;
+      height: 160px;
+      text-align:left;
+    }*/
+    .up {
+      width: 95%;
+      display: flex;
+      flex-wrap: wrap;
+      //justify-content: space-around;
+      height: 180px;
+      //margin-bottom: 7px;
+      .item {
+        border-radius: 6px;
+        padding-top: 2px;
+        margin-top: 8px;
+        width: 50%;
+        height: 52px;
+        .dv-dig-flop {
+          width: 100%;
+          height: 30px;
+          font-size: 20px;
+          color: #3de7c9;
+        }
+      }
+    }
+  }
+}
+</style>

src/views/total/centerRight1.vue

@@ -0,0 +1,124 @@
+<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:  ['线别', '投入','产出', '不良','良率%','计划数','达成率%'],
+        data: [
+        ],
+        rowNum: 7, //表格行数
+        headerHeight: 35,
+        headerBGC: '#0f1325', //表头
+        oddRowBGC: '#0f1325', //奇数行
+        evenRowBGC: '#171c33', //偶数行
+        columnWidth: [110,100,100,80,90,100,90],
+        align: ['center']
+      },
+      timing : null,
+    }
+  },
+  mounted() {
+    this.refreshdata()
+  },
+  beforeDestroy () {
+    clearInterval(this.timing)
+  },
+  methods: {
+    refreshdata() {
+      this.getdata(); //获取-数据
+     /* this.$http.get("kanban/login.action?username=zhongyl&password=asd&sob=N_MES_TEST").then(
+           (result)=>{
+              console.info(result.data);
+              var res = result.data;
+              //登录成功返回session
+              sessionStorage.setItem('x-access-token',res.token);
+            },(result)=>{
+              console.error(result)
+         });*/
+
+      this.timing = setInterval(() => {
+        this.getdata(); //获取--数据
+      }, 30000);
+    },
+    async getdata() {
+      var caller = 'DPLANTOUTPUT';
+      if (sessionStorage.getItem('li_code') == '所有'){
+        caller = 'DPLANTOUTPUT!ALL';
+      }
+    //  const {data} = await this.$http.get("kanban/panelView/parseData/2B247DC439B3?index=0&kanbanCode=2B23AC00BCFB");
+      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(element.linecode);
+                      item.push("<span  class='colorGrass'>"+element.inqty+"</span>");
+                      item.push("<span  class='colorGrass'>"+element.value+"</span>");
+                      item.push("<span  class='colorGrass'>"+element.ngqty+"</span>");
+                      item.push("<span  class='colorGrass'>" + element.okrate + "</span>");
+                      item.push("<span  class='colorGrass'>"+element.planqty+"</span>");
+                      item.push("<span  class='colorGrass'>"+element.getrate+"</span>");
+                      resultList.push(item);
+                    }
+                    const scrollBoard = this.$refs['scroll-board'];
+                    //刷新数据
+                    scrollBoard.updateRows(resultList);
+                },(result)=>{
+                    console.error(result)
+                    }
+          );
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+$box-height: 420px;
+$box-width: 640px;
+#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: 600px;
+      height: 340px;
+    }
+  }
+}
+</style>

src/views/total/centerRight2Old.vue

@@ -0,0 +1,135 @@
+<template>
+  <div id="centerRight2">
+    <div class="bg-color-black">
+      <div class="d-flex pt-2 pl-2">
+        <span>
+          <icon name="align-left" class="text-icon"></icon>
+        </span>
+        <span class="fs-xl text mx-2">设备类别维保执行情况</span>
+      </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>
+    </div>
+  </div>
+</template>
+
+<script>
+import CenterChart from '@/components/packageechart/centerRight/centerChartRate'
+
+export default {
+  data() {
+    return {
+      config: {
+        data: []
+      },
+      // 通过率和达标率的组件复用数据
+      rate: [
+            {
+              id: 'centerRate1',
+              tips: 60,
+              colorData: {
+                textStyle: '#3fc0fb',
+                series: {
+                  color: ['#00bcd44a', 'transparent'],
+                  dataColor: {
+                    normal: '#03a9f4',
+                    shadowColor: '#97e2f5'
+                  }
+                }
+              }
+            }
+      ],
+      timing :null
+    }
+  },
+  components: { CenterChart },
+  mounted () {
+    this.drawTimingFn();
+  },
+  beforeDestroy () {
+    clearInterval(this.timing)
+  },
+  methods: {
+    drawTimingFn () {
+      this.setData();
+      this.timing = setInterval(() => {
+        this.setData(); //获取-数据
+      }, 30000);
+    },
+    async setData () {
+      // 设备类别维保执行情况
+      await this.$http.get("kanban/datalist.action?caller=DeviceMaintainData&_noc=1&page=1&pageSize=100",{
+        params: {
+          condition: "1=1",
+        }
+      }).then((result)=>{
+                        let dataList = JSON.parse(result.data.data);
+                        let datas = new Array();
+                        for (let index = 0; index < dataList.length; index++) {
+                          const element = dataList[index];
+                          datas.push({
+                            name:element.name ,
+                            value:element.value,
+                          });
+                        }
+                        this.config.data = datas;
+                        this.config = { ...this.config };
+                      },(result)=>{
+                        console.error(result)
+                      }
+              );
+
+      //饼图pie，设备保养执行率
+      await this.$http.get("kanban/datalist.action?caller=DeviceMaintainRate&_noc=1&page=1&pageSize=100",{
+        params: {
+          condition: "1=1",
+        }
+      }).then((result)=>{
+                        let dataList = JSON.parse(result.data.data);
+                        this.rate[0].tips = dataList[0].rate
+                      },(result)=>{
+                        console.error(result)
+                      }
+              );
+
+    }
+  }
+
+}
+</script>
+
+<style lang="scss" scoped>
+#centerRight2 {
+  $box-height: 410px;
+  $box-width: 340px;
+  padding: 5px;
+  height: $box-height;
+  width: $box-width;
+  border-radius: 5px;
+  .bg-color-black {
+    padding: 5px;
+    height: $box-height;
+    width: $box-width;
+    border-radius: 10px;
+  }
+  .text {
+    color: #c3cbde;
+    //font-size: 15px;
+  }
+  .body-box {
+    border-radius: 10px;
+    overflow: hidden;
+    .dv-cap-chart {
+      width: 100%;
+      height: 160px;
+    }
+  }
+}
+</style>

src/views/total/index.vue

@@ -0,0 +1,253 @@
+<template>
+  <div id="index" ref="appRef">
+    <div class="bg">
+      <dv-loading v-if="loading">Loading...</dv-loading>
+      <div v-else class="host-body">
+        <div class="d-flex jc-center">
+          <dv-decoration-10 class="dv-dec-10" />
+          <div class="d-flex jc-center">
+            <dv-decoration-8 class="dv-dec-8" :color="decorationColor" />
+            <div class="title">
+              <span class="title-text">UAS-MES可视化平台</span>
+              <dv-decoration-6
+                class="dv-dec-6"
+                :reverse="true"
+                :color="['#50e3c2', '#67a1e5']"
+              />
+            </div>
+            <dv-decoration-8
+              class="dv-dec-8"
+              :reverse="true"
+              :color="decorationColor"
+            />
+          </div>
+          <dv-decoration-10 class="dv-dec-10-s" />
+        </div>
+
+        <!-- 第二行 -->
+        <div class="d-flex jc-between px-2">
+          <div class="d-flex aside-width">
+            <div class="react-left ml-4 react-l-s bg-color-blue">
+              <span class="react-left"></span>
+              <span class="text fw-b" style="font-size:24px;">江西联淦电子科技有限公司</span>
+            </div>
+            <div class="react-left ml-3">
+              <span class="text">生产实况分析</span>
+            </div>
+          </div>
+          <div class="d-flex aside-width">
+            <div class="react-right bg-color-r mr-3">
+             <!-- <span class="text ">设备运行分析</span>-->
+              <span class="text" @click="fullScreen" ref="fullScreen">全屏</span>
+              <span class="text" @click="exitFullScreen" ref="exitFullScreen"  style="display: none">退出全屏</span>
+            </div>
+            <div class="react-right mr-4 react-l-s" style="width: 900px">
+              <span class="react-after"></span>
+               <el-dropdown class="dropdown">
+                <span class="el-dropdown-link" ref="echarType">
+                  各车间总看板<i class="el-icon-arrow-down el-icon&#45;&#45;right"></i>&nbsp;&nbsp;&nbsp;&nbsp;
+                </span>
+                  <el-dropdown-menu slot="dropdown">
+                    <el-dropdown-item ><router-link to="dj"> 点胶车间 </router-link></el-dropdown-item>
+                    <el-dropdown-item ><router-link to="dip"> DIP车间 </router-link></el-dropdown-item>
+                    <el-dropdown-item ><router-link to="dpl"> 多品类车间 </router-link></el-dropdown-item>
+                    <el-dropdown-item ><router-link to="assembly"> 组装车间 </router-link></el-dropdown-item>
+                    <el-dropdown-item ><router-link to="smt">SMT车间</router-link></el-dropdown-item>
+                  </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>
+            </div>
+          </div>
+        </div>
+
+        <div class="body-box">
+          <!-- 第三行数据 -->
+          <div class="content-box">
+            <div>
+              <dv-border-box-12 >
+                <centerLeft1ALL />
+              </dv-border-box-12>
+            </div>
+            <!-- 中间 -->
+            <div>
+              <dv-border-box-12>
+                 <center />
+              </dv-border-box-12>
+            </div>
+            <!-- 中间 -->
+           <!-- <div>
+              <centerRight2 />
+            </div>-->
+            <div>
+              <dv-border-box-12>
+                <bottomRight/>
+              </dv-border-box-12>
+            </div>
+          </div>
+
+          <!-- 第四行数据 -->
+          <div class="bottom-box">
+            <dv-border-box-12>
+              <bottomLeft2 />
+            </dv-border-box-12>
+            <dv-border-box-12>
+              <center-right1 />
+            </dv-border-box-12>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import drawMixin from "../../utils/drawMixin";
+import { formatTime } from '../../utils/index.js'
+import centerRight1 from './centerRight1'
+import center from './center'
+import bottomLeft2 from './bottomLeft2'
+import bottomRight from './bottomRight'
+import centerLeft1ALL from './centerLeft1ALL'
+
+export default {
+  mixins: [ drawMixin ],
+  data() {
+    return {
+      timing: null,
+      loading: true,
+      dateDay: null,
+      dateYear: null,
+      dateWeek: null,
+      weekday: ['周日', '周一', '周二', '周三', '周四', '周五', '周六'],
+      decorationColor: ['#568aea', '#000000'],
+      workshopoptions:[
+        {label: 'SMT', value: 'SMT'},
+        {label: '组装', value: '组装'},
+      ],
+      isShow:false
+    }
+  },
+  components: {
+    centerRight1,
+    center,
+    bottomLeft2,
+    bottomRight,
+    centerLeft1ALL,
+  },
+  created() {
+    this.getLines();
+  },
+  mounted() {
+    this.timeFn()
+    this.cancelLoading()
+  },
+  beforeDestroy () {
+    clearInterval(this.timing)
+    clearInterval(this.intervalId)
+  },
+  methods: {
+    timeFn() {
+      this.timing = setInterval(() => {
+        this.dateDay = formatTime(new Date(), 'HH: mm: ss')
+        this.dateYear = formatTime(new Date(), 'yyyy-MM-dd')
+        this.dateWeek = this.weekday[new Date().getDay()]
+      }, 1000)
+    },
+    cancelLoading() {
+      setTimeout(() => {
+        this.loading = false
+      }, 5000)
+    },
+    handleBlur (val){
+      sessionStorage.setItem('li_code',val);
+      this.$cookie.set("PC_LI_CODE", val, {
+        expires: 30,
+      });
+      location.reload();
+    },
+    goSMT(){
+      this.$router.push('/smt');
+    },
+    goAssembly(){
+      this.$router.push('/assembly');
+    },
+    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("PC_LI_CODE") && data.some(item => item.LI_CODE === this.$cookie.get("PC_LI_CODE")) ){
+                    sessionStorage.setItem('li_code', this.$cookie.get("PC_LI_CODE"));
+                  }else {
+                    sessionStorage.setItem('li_code', data[0].LI_CODE);
+                    this.$cookie.set("PC_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/indexpackage.scss';
+
+.dropdown{
+  font-size: 18px;
+  color: #568aea;
+  transform: skewX(45deg);
+  ::v-deep .el-select-dropdown {
+    /* // 若不将下拉框的背景颜色设置为：transparent，那么做不出来半透明的效果；
+    // 因为其最终的显示为：下拉框有一个背景颜色且下拉框的字体有一个背景颜色，重叠后的效果展示； */
+    border: 1px solid #0f1325;
+    background: #04308D !important;
+  }
+
+  ::v-deep .el-input__inner {
+    background-color: #0f1325;
+    color: #fff;
+    border: 1px solid #0f1325;
+  }
+
+  .el-select-dropdown__item {
+    color: #fff;
+    background-color: #0f1325;
+  }
+  ::v-deep .el-select-dropdown {
+    background-color: transparent;
+    border: 1px solid #0f1325;
+  }
+  ::v-deep.el-select-dropdown__list {
+    padding: 0;
+  }
+  ::v-deep.el-popper[x-placement^="bottom"] {
+    margin-top: 0px;
+  }
+  ::v-deep.el-popper .popper__arrow,
+  ::v-deep.el-popper .popper__arrow::after {
+    display: none;
+  }
+  .el-select-dropdown__item:hover {
+    background-color: rgba(0, 225, 219, 0.690196078431373);
+  }
+}
+</style>