不良现象TOP5,当日工段投产良率 动态取值，赋值

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

@@ -6,12 +6,14 @@
       id="bottomLeft2Chart"
       height="480px"
       width="100%"
+      ref="column-board"
     ></Echart>
   </div>
 </template>
 
 <script>
 import Echart from '@/common/echart'
+//import { formatDate } from '../../../../utils/index.js'
 export default {
   data () {
     return {
@@ -32,48 +34,70 @@ export default {
         xAxis: [
           {
             type: 'category',
-            data: ['插件-01', '插件-02', '插件-03', '插件-04', '插件-05', '插件-06', '插件-07'],
+            data:[]
+            //data: ['插件-01', '插件-02', '插件-03', '插件-04', '插件-05', '插件-06', '插件-07'],
           }
         ],
         yAxis: [
           {
             type: 'value',
+          },
+          {
+            type: 'value',
+            name: 'rate',
+            min: 0,
+            max: 100,
+            interval: 20,
+            axisLabel: {
+              formatter: '{value}%'
+            }
           }
+
         ],
         series: [
           {
-            name: '插件',
+            name: '投入',
             type: 'bar',
             barWidth: 20,
             emphasis: {
               focus: 'series'
             },
-            data: [320, 332, 301, 334, 390, 330, 320]
+            data:[]
+            //data: [320, 332, 301, 334, 390, 330, 320]
           },
           {
-            name: '组装',
+            name: '产出',
             type: 'bar',
             barWidth: 20,
             stack: 'Ad',
             emphasis: {
               focus: 'series'
             },
-            data: [220, 232, 221, 234, 290, 230, 220]
+            data:[]
+            //data: [220, 232, 221, 234, 290, 230, 220]
           },
           {
-            name: '老化',
+            name: '不良',
             type: 'bar',
             stack: 'Ad',
             barWidth: 10,
-            data: [12, 22, 32, 12, 32, 12, 32],
+            data:[],
+            //data: [12, 22, 32, 12, 32, 12, 32],
             emphasis: {
               focus: 'series'
             }
           },
           {
-            name: '包装',
+            name: '良率%',
             type: 'line',
-            data: [92, 92,92, 72, 82, 62, 62],
+            data:[],
+            yAxisIndex: 1,
+            //data: [92, 92,92, 72, 82, 62, 62],
+            tooltip: {
+              valueFormatter: function (value) {
+                return value + '%';
+              }
+            },
             itemStyle: {
               normal: {
                 barBorderRadius: 5,
@@ -93,7 +117,7 @@ export default {
     };
   },
   components: {
-    Echart,
+    Echart, //子组件
   },
   props: {
     cdata: {
@@ -101,5 +125,73 @@ export default {
       default: () => ({})
     },
   },
+
+  mounted() {
+    this.getdata();
+    this.refreshdata();
+  },
+  methods: {
+    refreshdata() {
+      setInterval(() => {
+        this.getdata(); //获取-数据
+      }, 30000);
+    },
+    async getdata() {
+      //20220211 -+formatDate(new Date()
+      await this.$http.get("kanban/datalist.action?caller=WCDAYTURNOUT&_noc=1&page=1&pageSize=100&condition=sp_ymd=20220211")
+              .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();
+                        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);
+                        }
+                        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/echart/centerLeft/centerLeft1Chart/chart.vue

@@ -3,7 +3,7 @@
     <Echart
       :options="options"
       id="centreLeft1Chart"
-      height="220px"
+      height="350px"
       width="260px"
     ></Echart>
   </div>
@@ -54,13 +54,14 @@ export default {
             bottom: 0,
             x: "center",
             data: newData.cdata,
+            width: "0%",
             textStyle: {
-              color: "#fff"
-            }
+              color: "#fff",
+            },
           },
           series: [
             {
-              name: "通过率统计",
+              name: "不良现象统计",
               type: "pie",
               radius: [10, 50],
               roseType: "area",

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

@@ -10,15 +10,15 @@ export default {
   data () {
     return {
       cdata: {
-        xData: ["data1", "data2", "data3", "data4", "data5", "data6"],
-        seriesData: [
+        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" }
-        ]
+        ]*/
       }
     }
   },
@@ -26,6 +26,8 @@ export default {
     Chart,
   },
   mounted () {
+    this.getdata();
+    this.refreshdata();
   },
   beforeDestroy () {
     clearInterval(this.intervalId);
@@ -34,6 +36,42 @@ export default {
     this.chart=null
   },
   methods: {
+    refreshdata() {
+      setInterval(() => {
+        this.getdata(); //获取-数据
+      }, 30000);
+    },
+    async getdata() {
+      //20220211 -+formatDate(new Date()
+      await this.$http.get("kanban/datalist.action?caller=NGREASONF&_noc=1&page=1&pageSize=100&condition=mb_ymd=20211110")
+              .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;
+                        }
+                        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>

src/main.js

@@ -62,8 +62,7 @@ import axios from 'axios';
 Vue.prototype.$http = axios.create({
   //设置20秒超时时间
   timeout: 20000,
-  baseURL: 'http://mes.ubtob.net:8099/mes/', //这里写后端地址http://localhost:8099/uas/（）
-  baseURL: '/proxy_url', //这里写后端地址http://localhost:8099/uas/ https://mes.ubtob.net:8099/mes/
+  baseURL: '/proxy_url', //这里写后端地址http://localhost:8099/uas/  https://mes.ubtob.net:8099/mes/
 });
 Vue.prototype.$http.interceptors.request.use(config => {
   //为请求头添加x-access-token 字段为服务端返回的token

src/utils/index.js

@@ -49,3 +49,19 @@ export function formatTime(time, fmt) {
     return fmt;
   }
 }
+
+
+/**转成YYYYMMDD*/
+export function formatDate(time){
+  if (!time) return '';
+  else {
+    const d = new Date(time);
+    var curr_date = d.getDate();
+    var curr_month = d.getMonth() + 1;
+    var curr_year = d.getFullYear();
+    String(curr_month).length < 2 ? (curr_month = "0" + curr_month) : curr_month;
+    String(curr_date).length < 2 ? (curr_date = "0" + curr_date) : curr_date;
+    var yyyyMMdd = curr_year + "" + curr_month + "" + curr_date;
+    return yyyyMMdd;
+  }
+}

src/views/bottomLeft2.vue

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

src/views/centerLeft1.vue

@@ -6,14 +6,14 @@
           <icon name="chart-bar" class="text-icon"></icon>
         </span>
         <div class="d-flex">
-          <span class="fs-xl text mx-2">不良现象TOP10</span>
+          <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个主要的数据 -->
+      <!-- 4个主要的数据
       <div class="bottom-data">
         <div
           class="item-box mt-2"
@@ -30,6 +30,7 @@
           </p>
         </div>
       </div>
+      -->
     </div>
   </div>
 </template>

src/views/login.vue

@@ -1,5 +1,5 @@
 <template>
-    <div>
+    <div class="bg">
         <el-form :rules="rules" ref="loginForm" :model="loginForm" class="loginContainer">
             <h3 class="loginTitle">
                 UAS-MES可视化平台
@@ -126,8 +126,15 @@
         text-align: left;
         margin: 0px 0px 15px 0px;
     }
-   /* body{
-        background-image: url("../assets/background.jpg") ;
+    .bg {
+        width: 100%;
+        height: 100%;
+        background-image: url("../assets/pageBg.png");
+        background-size: cover;
+        background-position: center center;
+    }
+    /*body{
+        background-image: url("../assets/pageBg.png");
         background-size:100%;
     }*/
 </style>