普耐尔看板修改

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

@@ -1,368 +0,0 @@
-<template>
-  <div>
-    <Echart
-      :options="options"
-      id="bottomRightChart"
-      height="480px"
-      width="913px"
-    ></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: newData.goalData}
-                  /*{
-                    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/assemblyechart/bottom/bottomRightChartOld/index.vue

@@ -1,178 +0,0 @@
-<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/centerRight/centerRight1Chart/chart.vue

@@ -0,0 +1,277 @@
+<template>
+  <div>
+    <!--  -->
+    <Echart
+        :options="options"
+        id="centerRight1Chart"
+        height="140px"
+        width="100%"
+        ref="column-board"
+    ></Echart>
+  </div>
+</template>
+
+<script>
+import Echart from '@/common/echart'
+//import { formatDate } from '../../../../utils/index.js'
+export default {
+  data () {
+    return {
+      timing :null,
+      options:{
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'shadow'
+          }
+        },
+        legend: {
+          textStyle: {
+            fontSize: 16
+          },
+          itemWidth: 25,
+          itemHeight: 15
+        },
+        grid: {
+          left: '3%',
+          right: '4%',
+          bottom: '3%',
+          top: 55,
+          containLabel: true
+        },
+        xAxis: [
+          {
+            type: 'category',
+            data:[],
+            axisLabel: {
+              fontSize: 16,
+              fontWeight: "bold"
+            }
+          }
+        ],
+        yAxis: [
+          {
+            type: 'value',
+            interval: 50,
+            axisLabel: {
+              fontSize: 16
+            }
+          },
+          {
+            type: 'value',
+          /*  name: 'rate',*/
+            min: 80,
+            max: 100,
+            interval: 10,
+            nameTextStyle: {
+              fontSize: 20
+            },
+            axisLabel: {
+              formatter: '{value}%',
+              fontSize: 14
+            }
+          }
+
+        ],
+        series: [
+          {
+            name: '投入',
+            type: 'bar',
+            barWidth: 20,
+            emphasis: {
+              focus: 'series'
+            },
+            data:[],
+            label: {
+              show: true,
+              position: 'top',
+              fontSize:14,
+              fontWeight: "bold"
+            },
+          },
+          {
+            name: '产出',
+            type: 'bar',
+            barWidth: 20,
+            stack: 'Ad',
+            emphasis: {
+              focus: 'series'
+            },
+            data:[],
+            label: {
+              show: true,
+              position: 'inside',
+              fontSize:14,
+              fontWeight: "bold"
+            },
+          },
+          {
+            name: '不良',
+            type: 'bar',
+            stack: 'Ad',
+            barWidth: 20,
+            data:[],
+            //data: [12, 22, 32, 12, 32, 12, 32],
+            emphasis: {
+              focus: 'series'
+            }
+          },
+          {
+            name: '良率%',
+            type: 'line',
+            data:[],
+            yAxisIndex: 1,
+            symbolSize: 8,
+            label: {
+              show: true,
+              position: 'top',
+              color:'#fff'
+            },
+            tooltip: {
+              valueFormatter: function (value) {
+                return value + '%';
+              }
+            },
+            lineStyle: {
+              width: 4
+            },
+            itemStyle: {
+              normal: {
+                barBorderRadius: 6,
+                color:  "rgba(156,107,211,0.8)"
+                /* color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                   { offset: 0, color: "rgba(156,107,211,0.8)" },
+                   { offset: 0.2, color: "rgba(156,107,211,0.5)" },
+                   { offset: 1, color: "rgba(156,107,211,0.2)" }
+                 ])*/
+              }
+            },
+            emphasis: {
+              focus: 'series'
+            }
+          }, {
+            name: 'UPH',
+            type: 'line',
+            barWidth: 20,
+            data:[],
+            //data: [12, 22, 32, 12, 32, 12, 32],
+            emphasis: {
+              focus: 'series'
+            },lineStyle: {
+              width: 4
+            },
+            label: {
+              show: true,
+              position: 'top',
+              fontSize:14,
+              fontWeight: "bold"
+            }
+          }
+        ]
+      },
+    };
+  },
+  components: {
+    Echart, //子组件
+  },
+  props: {
+    cdata: {
+      type: Object,
+      default: () => ({})
+    },
+  },
+
+  mounted() {
+    this.getdata();
+    this.refreshdata();
+  },
+  beforeDestroy () {
+    clearInterval(this.timing)
+  },
+  methods: {
+    refreshdata() {
+      this.timing = setInterval(() => {
+        this.getdata(); //获取-数据
+      }, 30000);
+    },
+    async getdata() {
+      //20220211 -+formatDate(new Date()
+      var caller = 'WCDAYTURNOUT!ZZ';
+      if (sessionStorage.getItem('li_code') == '所有'){
+        caller = 'ZZ!WCDAYTURNOUT!ALL';
+      }
+      await this.$http.get("kanban/datalist.action?caller="+caller+"&_noc=1&page=1&pageSize=100",{
+        params: {
+          condition:  "V_LICODE='" + sessionStorage.getItem('li_code') + "'"
+        }
+      }).then((result)=>{
+            let dataList = JSON.parse(result.data.data);
+            let xAxis0 = new Array();
+            let series0 = new Array();
+            let series1 = new Array();
+            let series2 = new Array();
+            let series3 = new Array();
+            let series4 = new Array();
+        var maxnumber=0;
+        for (let index = 0; index < dataList.length; index++) {
+          const element = dataList[index];
+          xAxis0.push(element.sp_wccode);
+          //投入
+          series0.push(element.v_inqty);
+          if(element.v_inqty>maxnumber){
+            maxnumber= element.v_inqty;
+          }
+          //产出
+          series1.push(element.v_outqty);
+          if(element.v_outqty>maxnumber){
+            maxnumber= element.v_outqty;
+          }
+          //不良
+          series2.push(element.v_ngqty);
+          //良率
+          series3.push(element.v_okrate);
+          //UPH
+          series4.push(element.uph);
+          if(element.uph>maxnumber){
+            maxnumber= element.uph;
+          }
+        }
+        this.options.xAxis[0].data = xAxis0;
+        this.options.series[0].data = series0;
+        this.options.series[1].data = series1;
+        this.options.series[2].data = series2;
+        this.options.series[3].data = series3;
+        this.options.series[4].data = series4;
+        this.options.yAxis[0].max = (maxnumber*1.2).toFixed();
+            /*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/assemblyechart/centerRight/centerRight1Chart/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/assemblyechart/centerRight/centerRight2Chart/chart.vue

@@ -0,0 +1,277 @@
+<template>
+  <div>
+    <!-- 年度开工率 -->
+    <Echart
+        :options="options"
+        id="centerRight2Chart"
+        height="115px"
+        width="100%"
+        ref="column-board"
+    ></Echart>
+  </div>
+</template>
+
+<script>
+import Echart from '@/common/echart'
+//import { formatDate } from '../../../../utils/index.js'
+export default {
+  data () {
+    return {
+      timing :null,
+      options:{
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'shadow'
+          }
+        },
+        legend: {
+          show:false,
+          textStyle: {
+            fontSize: 18
+          },
+          itemWidth: 25,
+          itemHeight: 15
+        },
+        grid: {
+          left: '3%',
+          right: '4%',
+          bottom: '3%',
+          top: 30,
+          containLabel: true
+        },
+        xAxis: [
+          {
+            type: 'category',
+            data:[],
+            axisLabel: {
+              fontSize: 16,
+              fontWeight: "bold"
+            }
+          }
+        ],
+        yAxis: [
+          {
+            type: 'value',
+            interval: 50,
+            axisLabel: {
+              fontSize: 14
+            }
+          },
+          {
+            type: 'value',
+            min: 80,
+            max: 100,
+            interval: 10,
+            nameTextStyle: {
+              fontSize: 20
+            },
+            axisLabel: {
+              formatter: '{value}%',
+              fontSize: 16
+            }
+          }
+
+        ],
+        series: [
+          {
+            name: '投入',
+            type: 'bar',
+            barWidth: 20,
+            emphasis: {
+              focus: 'series'
+            },
+            data:[],
+            label: {
+              show: true,
+              position: 'top',
+              fontSize:14,
+              fontWeight: "bold"
+            },
+          },
+          {
+            name: '产出',
+            type: 'bar',
+            barWidth: 20,
+            stack: 'Ad',
+            emphasis: {
+              focus: 'series'
+            },
+            data:[],
+            label: {
+              show: true,
+              position: 'inside',
+              fontSize:14,
+              fontWeight: "bold"
+            },
+          },
+          {
+            name: '不良',
+            type: 'bar',
+            stack: 'Ad',
+            barWidth: 20,
+            data:[],
+            //data: [12, 22, 32, 12, 32, 12, 32],
+            emphasis: {
+              focus: 'series'
+            }
+          },
+          {
+            name: '良率%',
+            type: 'line',
+            data:[],
+            yAxisIndex: 1,
+            symbolSize: 8,
+            label: {
+              show: true,
+              position: 'top',
+              color:'#fff'
+            },
+            tooltip: {
+              valueFormatter: function (value) {
+                return value + '%';
+              }
+            },
+            lineStyle: {
+              width: 4
+            },
+            itemStyle: {
+              normal: {
+                barBorderRadius: 6,
+                color:  "rgba(156,107,211,0.8)"
+                /* color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                   { offset: 0, color: "rgba(156,107,211,0.8)" },
+                   { offset: 0.2, color: "rgba(156,107,211,0.5)" },
+                   { offset: 1, color: "rgba(156,107,211,0.2)" }
+                 ])*/
+              }
+            },
+            emphasis: {
+              focus: 'series'
+            }
+          }, {
+            name: 'UPH',
+            type: 'line',
+            barWidth: 20,
+            data:[],
+            //data: [12, 22, 32, 12, 32, 12, 32],
+            emphasis: {
+              focus: 'series'
+            },lineStyle: {
+              width: 4
+            },
+            label: {
+              show: true,
+              position: 'top',
+              fontSize:14,
+              fontWeight: "bold"
+            }
+          }
+        ]
+      },
+    };
+  },
+  components: {
+    Echart, //子组件
+  },
+  props: {
+    cdata: {
+      type: Object,
+      default: () => ({})
+    },
+  },
+
+  mounted() {
+    this.getdata();
+    this.refreshdata();
+  },
+  beforeDestroy () {
+    clearInterval(this.timing)
+  },
+  methods: {
+    refreshdata() {
+      this.timing = setInterval(() => {
+        this.getdata(); //获取-数据
+      }, 30000);
+    },
+    async getdata() {
+      //20220211 -+formatDate(new Date()
+      var caller = 'WCDAYTURNOUT!ZZ';
+      if (sessionStorage.getItem('li_code') == '所有'){
+        caller = 'ZZ!WCDAYTURNOUT!ALL';
+      }
+      await this.$http.get("kanban/datalist.action?caller="+caller+"&_noc=1&page=1&pageSize=100",{
+        params: {
+          condition:  "V_LICODE='" + sessionStorage.getItem('li_code') + "'"
+        }
+      }).then((result)=>{
+            let dataList = JSON.parse(result.data.data);
+            let xAxis0 = new Array();
+            let series0 = new Array();
+            let series1 = new Array();
+            let series2 = new Array();
+            let series3 = new Array();
+            let series4 = new Array();
+        var maxnumber=0;
+        for (let index = 0; index < dataList.length; index++) {
+          const element = dataList[index];
+          xAxis0.push(element.sp_wccode);
+          //投入
+          series0.push(element.v_inqty);
+          if(element.v_inqty>maxnumber){
+            maxnumber= element.v_inqty;
+          }
+          //产出
+          series1.push(element.v_outqty);
+          if(element.v_outqty>maxnumber){
+            maxnumber= element.v_outqty;
+          }
+          //不良
+          series2.push(element.v_ngqty);
+          //良率
+          series3.push(element.v_okrate);
+          //UPH
+          series4.push(element.uph);
+          if(element.uph>maxnumber){
+            maxnumber= element.uph;
+          }
+        }
+        this.options.xAxis[0].data = xAxis0;
+        this.options.series[0].data = series0;
+        this.options.series[1].data = series1;
+        this.options.series[2].data = series2;
+        this.options.series[3].data = series3;
+        this.options.series[4].data = series4;
+        this.options.yAxis[0].max = (maxnumber*1.2).toFixed();
+            /*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/assemblyechart/centerRight/centerRight2Chart/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/views/assembly/bottomRight2.vue

@@ -1,115 +0,0 @@
-<template>
-  <div id="bottomRight2">
-    <div class="bg-color-black">
-      <div class="d-flex pt-2 pl-2">
-        <span>
-          <icon name="chart-line" class="text-icon"></icon>
-        </span>
-        <div class="d-flex">
-          <span class="fs-xl text mx-2">ATE良率</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: [/*
-          ['组件1', 'dev-1', "<span  class='colorGrass'>↑75%</span>"],
-          */
-        ],
-        rowNum: 8, //表格行数
-        headerHeight: 35,
-        headerBGC: '#0f1325', //表头
-        oddRowBGC: '#0f1325', //奇数行
-        evenRowBGC: '#171c33', //偶数行
-        index: true,
-        columnWidth: [50,130],
-        align: ['center']
-      },
-      timing : null
-    }
-  },
-  mounted() {
-    this.refreshdata()
-  },
-  beforeDestroy () {
-    clearInterval(this.timing)
-  },
-  methods: {
-    refreshdata() {
-      this.getdata(); //获取-数据
-      this.timing = setInterval(() => {
-        this.getdata(); //获取--数据
-      }, 30000);
-    },
-    async getdata() {
-      var caller = 'ATERATE!ZZ';
-      if (sessionStorage.getItem('li_code') == '所有'){
-        caller = 'ATERATE!ZZ!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(element.linecode);
-                      if(element.value<97.5) {
-                        item.push("<span  class='colorRed'>" + element.value + "</span>");
-                      }else{
-                        item.push("<span  class='colorGrass'>" + element.value + "</span>");
-                      }
-                      resultList.push(item);
-                    }
-                    const scrollBoard = this.$refs['scroll-board'];
-                    //刷新数据
-                    scrollBoard.updateRows(resultList);
-                },(result)=>{
-                    console.error(result)
-                    }
-          );
-    }
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-$box-height: 520px;
-$box-width: 315px;
-#bottomRight2 {
-  padding: 16px;
-  padding-top: 20px;
-  height: $box-height;
-  width: $box-width;
-  border-radius: 5px;
-  .bg-color-black {
-    height: $box-height - 30px;
-    border-radius: 10px;
-  }
-  .text {
-    color: #c3cbde;
-  //  font-size: 15px;
-  }
-  .body-box {
-    border-radius: 10px;
-    overflow: hidden;
-    .dv-scr-board {
-      width: 270px;
-      height: 450px;
-    }
-  }
-}
-</style>

src/views/assembly/bottomRightOld.vue

@@ -1,61 +0,0 @@
-<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/centerOld.vue

@@ -1,234 +0,0 @@
-<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>

src/views/assembly/centerRight1.vue

@@ -12,19 +12,31 @@
       <div class="d-flex jc-center body-box">
         <dv-scroll-board class="dv-scr-board" :config="config" ref="scroll-board" />
       </div>
+      <div>
+       <span class="fs-xl text mx-2">测试1</span>
+       <CenterRight1Chart />
+      </div>
+      <div>
+       <span class="fs-xl text mx-2">测试2</span>
+       <CenterRight2Chart />
+      </div>
     </div>
   </div>
 </template>
 
 <script>
+import CenterRight1Chart from "_c/assemblyechart/centerRight/centerRight1Chart/index.vue";
+import CenterRight2Chart from "_c/assemblyechart/centerRight/centerRight2Chart/index.vue";
+
 export default {
+  components: {CenterRight1Chart,CenterRight2Chart},
   data() {
     return {
       config: {
         header:  ['线别', '投入','产出', '不良','良率%','计划数','达成率%'],
         data: [
         ],
-        rowNum: 7, //表格行数
+        rowNum: 2, //表格行数
         headerHeight: 35,
         headerBGC: '#0f1325', //表头
         oddRowBGC: '#0f1325', //奇数行
@@ -44,16 +56,6 @@ export default {
   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);
@@ -99,8 +101,7 @@ export default {
 $box-height: 420px;
 $box-width: 640px;
 #centerRight1 {
-  padding: 16px;
-  padding-top: 20px;
+  padding: 5px;
   height: $box-height;
   width: $box-width;
   border-radius: 5px;
@@ -117,7 +118,7 @@ $box-width: 640px;
     overflow: hidden;
     .dv-scr-board {
       width: 600px;
-      height: 340px;
+      height: 90px;
     }
   }
 }

src/views/assembly/centerRight2.vue

@@ -1,143 +0,0 @@
-<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/assemblyechart/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 () {
-      // 设备类别维保执行情况
-      var caller1 = 'DeviceMaintainData!ZZ';
-      if (sessionStorage.getItem('li_code') == '所有'){
-        caller1 = 'DeviceMaintainData!ZZ!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 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，设备保养执行率
-      var caller2 = 'DeviceMaintainRate!ZZ';
-      if (sessionStorage.getItem('li_code') == '所有'){
-        caller2 = 'DeviceMaintainRate!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);
-                        this.rate[0].tips = dataList[0].rate
-                      },(result)=>{
-                        console.error(result)
-                      }
-              );
-
-    }
-  }
-
-}
-</script>
-
-<style lang="scss" scoped>
-#centerRight2 {
-  $box-height: 420px;
-  $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/assembly/index.vue

@@ -160,7 +160,6 @@ export default {
     this.timeFn()
     this.cancelLoading()
     this.autoFullScreen()
-
     // 添加全屏状态变化监听
     document.addEventListener('fullscreenchange', this.handleFullScreenChange);
   },