同步界面

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

@@ -30,7 +30,8 @@ export default {
             fontSize: 18
           },
           itemWidth: 29,
-          itemHeight: 19
+          itemHeight: 19,
+          icon:"rect"
         },
         grid: {
           left: '3%',
@@ -103,6 +104,7 @@ export default {
               fontWeight: "bold"
             },
           },
+
           {
             name: '不良',
             type: 'bar',
@@ -136,7 +138,7 @@ export default {
             itemStyle: {
               normal: {
                 barBorderRadius: 6,
-                color:  "rgba(156,107,211,0.8)"
+                color:  "#fff"
                 /* 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)" },
@@ -150,12 +152,13 @@ export default {
           }, {
             name: 'UPH',
             type: 'line',
-            symbolSize: 8,
             barWidth: 15,
             data:[],
             //data: [12, 22, 32, 12, 32, 12, 32],
             emphasis: {
               focus: 'series'
+            },lineStyle: {
+              width: 4
             },
             label: {
               show: true,
@@ -163,7 +166,22 @@ export default {
               fontSize:14,
               fontWeight: "bold"
             }
-          }
+          },
+          {
+            name: 'UPPH',
+            type: 'bar',
+            barWidth: 15,
+            emphasis: {
+              focus: 'series'
+            },
+            data:[],
+            label: {
+              show: true,
+              position: 'inside',
+              fontSize:14,
+              fontWeight: "bold"
+            },
+          },
         ]
       },
     };
@@ -209,26 +227,40 @@ export default {
             let series2 = new Array();
             let series3 = new Array();
             let series4 = new Array();
-            for (let index = 0; index < dataList.length; index++) {
-              const element = dataList[index];
-              xAxis0.push(element.sp_wccode);
-              //投入
-              series0.push(element.v_inqty);
-              //产出
-              series1.push(element.v_outqty);
-              //不良
-              series2.push(element.v_ngqty);
-              //良率
-              series3.push(element.v_okrate);
-              //UPH
-              series4.push(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;
+            let series5 = 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;
+          }
+          series5.push(element.v_upph);
+        }
+        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.series[5].data = series5;
+        this.options.yAxis[0].max = (maxnumber*1.2).toFixed();
             /*let myChart = this.$children[0].chart;
             myChart.setOption({
                xAxis: {

src/components/dplechart/bottom/bottomLeft2Chart/index.vue

@@ -1,278 +1,44 @@
 <template>
   <div>
-    <!-- 年度开工率 -->
-    <Echart
-        :options="options"
-        id="bottomLeft2Chart"
-        height="480px"
-        width="100%"
-        ref="column-board"
-    ></Echart>
+    <Chart :cdata="cdata" />
   </div>
 </template>
 
 <script>
-import Echart from '@/common/echart'
-//import { formatDate } from '../../../../utils/index.js'
+import Chart from './chart.vue'
 export default {
   data () {
     return {
-      timing :null,
-      options:{
-        tooltip: {
-          trigger: 'axis',
-          axisPointer: {
-            type: 'shadow'
-          }
-        },
-        legend: {
-          textStyle: {
-            fontSize: 18
-          },
-          itemWidth: 29,
-          itemHeight: 19
-        },
-        grid: {
-          left: '3%',
-          right: '4%',
-          bottom: '3%',
-          containLabel: true
-        },
-        xAxis: [
-          {
-            type: 'category',
-            data:[],
-            axisLabel: {
-              fontSize: 16,
-              fontWeight: "bold"
-            }
-          }
-        ],
-        yAxis: [
-          {
-            type: 'value',
-            axisLabel: {
-              fontSize: 16
-            }
-          },
-          {
-            type: 'value',
-            name: 'rate',
-            min: 0,
-            max: 100,
-            interval: 20,
-            nameTextStyle: {
-              fontSize: 20
-            },
-            axisLabel: {
-              formatter: '{value}%',
-              fontSize: 16
-            }
-          }
-
-        ],
-        series: [
-          {
-            name: '投入',
-            type: 'bar',
-            barWidth: 15,
-            emphasis: {
-              focus: 'series'
-            },
-            data:[],
-            label: {
-              show: true,
-              position: 'top',
-              fontSize:14,
-              fontWeight: "bold"
-            },
-          },
-          {
-            name: '产出',
-            type: 'bar',
-            barWidth: 15,
-            stack: 'Ad',
-            emphasis: {
-              focus: 'series'
-            },
-            data:[],
-            label: {
-              show: true,
-              position: 'inside',
-              fontSize:14,
-              fontWeight: "bold"
-            },
-          },
-          {
-            name: '不良',
-            type: 'bar',
-            stack: 'Ad',
-            barWidth: 10,
-            data:[],
-            //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',
-            symbolSize: 8,
-            barWidth: 15,
-            data:[],
-            //data: [12, 22, 32, 12, 32, 12, 32],
-            emphasis: {
-              focus: 'series'
-            },
-            lineStyle: {
-              width: 4
-            },
-            label: {
-              show: true,
-              position: 'top',
-              fontSize:14,
-              fontWeight: "bold"
-            }
-          }
+      cdata: {
+        rateData:[
         ]
-      },
+      }
     };
   },
   components: {
-    Echart, //子组件
+    Chart,
   },
-  props: {
-    cdata: {
-      type: Object,
-      default: () => ({})
-    },
-  },
-
-  mounted() {
-    this.getdata();
-    this.refreshdata();
+  mounted () {
+    //this.setData();
   },
   beforeDestroy () {
-    clearInterval(this.timing)
+    clearInterval(this.intervalId);
+    this.chart.dispose()
+    this.chart.clear()
+    this.chart=null
   },
   methods: {
-    refreshdata() {
-      this.timing = setInterval(() => {
-        this.getdata(); //获取-数据
-      }, 30000);
-    },
-    async getdata() {
-      //20220211 -+formatDate(new Date()
-      var caller = 'DPL!WCDAYTURNOUT';
-      if (sessionStorage.getItem('li_code') == '所有'){
-        caller = 'DPL!WCDAYTURNOUT!ALL';
+    // 根据自己的业务情况修改
+    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));
       }
-      await this.$http.get("kanban/datalist.action?caller="+caller+"&_noc=1&page=1&pageSize=100",{
-        params: {
-          condition: "1=1",
-        }
-      }).then((result)=>{
-            let dataList = JSON.parse(result.data.data);
-            let xAxis0 = new Array();
-            let series0 = new Array();
-            let series1 = new Array();
-            let series2 = new Array();
-            let series3 = new Array();
-            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)
-          }
-      );
-    }
+      console.log(this)
+    },
   }
-}
-</script>
+};
+</script>
+
+<style lang="scss" scoped>
+</style>

src/views/dpl/centerLeft_two.vue

@@ -192,7 +192,6 @@ export default {
         border-radius: 6px;
         margin-top: 5px;
         width: 50%;
-        height: 52px;
         .dv-dig-flop {
           width: 100%;
           font-size: 20px;