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

src/components/zxshopechart/bottom1Chart/chart.vue

@@ -3,7 +3,7 @@
     <Echart
         :options="options"
         id="bottom1Chart"
-        height="425px"
+        height="430px"
         width="100%"
         ref="column-board"
     ></Echart>
@@ -33,12 +33,14 @@ export default {
             fontSize: 18
           },
           itemWidth: 29,
-          itemHeight: 19
+          itemHeight: 19,
+          top:10,
         },
         grid: {
           left: '3%',
           right: '4%',
           bottom: '3%',
+          top: 85,
           containLabel: true
         },
         xAxis: [
@@ -76,7 +78,7 @@ export default {
         ],
         series: [
           {
-            name: '线体产出',
+            name: '投入',
             type: 'bar',
             barWidth: 15,
             emphasis: {
@@ -90,14 +92,9 @@ export default {
               fontWeight: "bold",
               color:"inherit",
             },
-            itemStyle: {
-              normal: {
-                color:  "rgb(174,228,187)"
-              }
-            },
           },
           {
-            name: '计划剩余',
+            name: '产出',
             type: 'bar',
             barWidth: 15,
             stack: 'Ad',
@@ -105,6 +102,38 @@ export default {
               focus: 'series'
             },
             data:[],
+            label: {
+              show: true,
+              position: 'inside',
+              fontSize:14,
+              fontWeight: "bold",
+              color:"#fff",
+            },
+          },
+          {
+            name: '不良',
+            type: 'bar',
+            stack: 'Ad',
+            barWidth: 10,
+            data:[],
+            //data: [12, 22, 32, 12, 32, 12, 32],
+            emphasis: {
+              focus: 'series'
+            },
+            label: {
+              show: true,
+              position: 'top',
+              color:'inherit'
+            },
+          },
+          {
+            name: 'UPPH',
+            type: 'bar',
+            barWidth: 15,
+            emphasis: {
+              focus: 'series'
+            },
+            data:[],
             label: {
               show: true,
               position: 'top',
@@ -112,14 +141,9 @@ export default {
               fontWeight: "bold",
               color:"inherit",
             },
-            itemStyle: {
-              normal: {
-                color:  "rgb(251,234,78)"
-              }
-            },
           },
           {
-            name: '计划达成率%',
+            name: '良率%',
             type: 'line',
             data:[],
             yAxisIndex: 1,
@@ -140,12 +164,37 @@ export default {
             itemStyle: {
               normal: {
                 barBorderRadius: 6,
-                color:  "rgb(42,87,42)"
+                color:  "rgb(59, 162, 114)"
               }
             },
             emphasis: {
               focus: 'series'
             }
+          }, {
+            name: 'UPH',
+            type: 'line',
+            barWidth: 15,
+            data:[],
+            //data: [12, 22, 32, 12, 32, 12, 32],
+            emphasis: {
+              focus: 'series'
+            },
+            lineStyle: {
+              width: 3
+            },
+            label: {
+              show: true,
+              position: 'top',
+              fontSize:14,
+              fontWeight: "bold",
+              color:"inherit",
+            },
+            itemStyle: {
+              normal: {
+                barBorderRadius: 6,
+                color:  "#ea7ccc"
+              }
+            },
           }
         ]
       },
@@ -175,7 +224,7 @@ export default {
       }, 30000);
     },
     async getdata() {
-      var caller = 'KB!UpLinePlanFinishInfo';
+      var caller = 'KB!UpLineHourQTY';
       await this.$http.get("kanban/datalist.action?caller="+caller+"&_noc=1&page=1&pageSize=100",{
         params: {
           condition: "V_OUTLINE='"+sessionStorage.getItem('ul_code')+"'"
@@ -186,27 +235,42 @@ export default {
             let series0 = new Array();
             let series1 = new Array();
             let series2 = new Array();
+            let series3 = new Array();
+            let series4 = new Array();
+            let series5 = new Array();
         var maxnumber=0;
         for (let index = 0; index < dataList.length; index++) {
           const element = dataList[index];
-          xAxis0.push(element.v_licode);
-          //线体产出
-          series0.push(element.v_outqty);
+          xAxis0.push(element.v_period);
+          //投入
+          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;
           }
-          //计划剩余
-          series1.push(element.v_restqty);
-          if(element.v_restqty>maxnumber){
-            maxnumber= element.v_restqty;
+          //不良
+          series2.push(element.v_ngqty);
+          //upph
+          series3.push(element.upph);
+          //良率
+          series4.push(element.v_okrate);
+          //UPH
+          series5.push(element.uph);
+          if(element.uph>maxnumber){
+            maxnumber= element.uph;
           }
-          //计划达成率
-          series2.push(element.v_plandcrate);
         }
         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();
           },(result)=>{
             console.error(result)

src/components/zxshopechart/bottom1ChartOld/chart.vue

@@ -0,0 +1,218 @@
+<template>
+  <div>
+    <Echart
+        :options="options"
+        id="bottom1OldChart"
+        height="425px"
+        width="100%"
+        ref="column-board"
+    ></Echart>
+  </div>
+</template>
+
+<script>
+import Echart from '@/common/echart'
+import {mapState} from "vuex";
+//import { formatDate } from '../../../../utils/index.js'
+export default {
+  computed: {
+    ...mapState(['factory']),
+  },
+  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",
+              color:"inherit",
+            },
+            itemStyle: {
+              normal: {
+                color:  "rgb(174,228,187)"
+              }
+            },
+          },
+          {
+            name: '计划剩余',
+            type: 'bar',
+            barWidth: 15,
+            stack: 'Ad',
+            emphasis: {
+              focus: 'series'
+            },
+            data:[],
+            label: {
+              show: true,
+              position: 'top',
+              fontSize:14,
+              fontWeight: "bold",
+              color:"inherit",
+            },
+            itemStyle: {
+              normal: {
+                color:  "rgb(251,234,78)"
+              }
+            },
+          },
+          {
+            name: '计划达成率%',
+            type: 'line',
+            data:[],
+            yAxisIndex: 1,
+            symbolSize: 4,
+            label: {
+              show: true,
+              position: 'top',
+              color:'#fff'
+            },
+            tooltip: {
+              valueFormatter: function (value) {
+                return value + '%';
+              }
+            },
+            lineStyle: {
+              width: 3
+            },
+            itemStyle: {
+              normal: {
+                barBorderRadius: 6,
+                color:  "rgb(42,87,42)"
+              }
+            },
+            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() {
+      var caller = 'KB!UpLinePlanFinishInfo';
+      await this.$http.get("kanban/datalist.action?caller="+caller+"&_noc=1&page=1&pageSize=100",{
+        params: {
+          condition: "V_OUTLINE='"+sessionStorage.getItem('ul_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();
+        var maxnumber=0;
+        for (let index = 0; index < dataList.length; index++) {
+          const element = dataList[index];
+          xAxis0.push(element.v_licode);
+          //线体产出
+          series0.push(element.v_outqty);
+          if(element.v_outqty>maxnumber){
+            maxnumber= element.v_outqty;
+          }
+          //计划剩余
+          series1.push(element.v_restqty);
+          if(element.v_restqty>maxnumber){
+            maxnumber= element.v_restqty;
+          }
+          //计划达成率
+          series2.push(element.v_plandcrate);
+        }
+        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.yAxis[0].max = (maxnumber*1.2).toFixed();
+          },(result)=>{
+            console.error(result)
+          }
+      );
+    }
+  }
+}
+</script>

src/components/zxshopechart/bottom1ChartOld/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/zxshopechart/bottom2Chart/chart.vue

@@ -1,207 +1,24 @@
 <template>
   <div>
     <Echart
-        :options="options"
-        id="bottom2Chart"
-        height="430px"
-        width="100%"
-        ref="column-board"
+      :options="options"
+      id="bottom2Chart"
+      height="180px"
+      width="100%"
     ></Echart>
   </div>
 </template>
 
 <script>
 import Echart from '@/common/echart'
-import {mapState} from "vuex";
-//import { formatDate } from '../../../../utils/index.js'
 export default {
-  computed: {
-    ...mapState(['factory']),
-  },
   data () {
     return {
-      timing :null,
-      options:{
-        tooltip: {
-          trigger: 'axis',
-          axisPointer: {
-            type: 'shadow'
-          }
-        },
-        legend: {
-          textStyle: {
-            fontSize: 18
-          },
-          itemWidth: 29,
-          itemHeight: 19,
-          top:10,
-        },
-        grid: {
-          left: '3%',
-          right: '4%',
-          bottom: '3%',
-          top: 85,
-          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",
-              color:"inherit",
-            },
-          },
-          {
-            name: '产出',
-            type: 'bar',
-            barWidth: 15,
-            stack: 'Ad',
-            emphasis: {
-              focus: 'series'
-            },
-            data:[],
-            label: {
-              show: true,
-              position: 'inside',
-              fontSize:14,
-              fontWeight: "bold",
-              color:"fff",
-            },
-          },
-          {
-            name: '不良',
-            type: 'bar',
-            stack: 'Ad',
-            barWidth: 10,
-            data:[],
-            //data: [12, 22, 32, 12, 32, 12, 32],
-            emphasis: {
-              focus: 'series'
-            },
-            label: {
-              show: true,
-              position: 'top',
-              color:'inherit'
-            },
-          },
-          {
-            name: 'UPPH',
-            type: 'bar',
-            barWidth: 15,
-            emphasis: {
-              focus: 'series'
-            },
-            data:[],
-            label: {
-              show: true,
-              position: 'top',
-              fontSize:14,
-              fontWeight: "bold",
-              color:"inherit",
-            },
-          },
-          {
-            name: '良率%',
-            type: 'line',
-            data:[],
-            yAxisIndex: 1,
-            symbolSize: 4,
-            label: {
-              show: true,
-              position: 'top',
-              color:'#fff'
-            },
-            tooltip: {
-              valueFormatter: function (value) {
-                return value + '%';
-              }
-            },
-            lineStyle: {
-              width: 3
-            },
-            itemStyle: {
-              normal: {
-                barBorderRadius: 6,
-                color:  "rgb(59, 162, 114)"
-              }
-            },
-            emphasis: {
-              focus: 'series'
-            }
-          }, {
-            name: 'UPH',
-            type: 'line',
-            barWidth: 15,
-            data:[],
-            //data: [12, 22, 32, 12, 32, 12, 32],
-            emphasis: {
-              focus: 'series'
-            },
-            lineStyle: {
-              width: 3
-            },
-            label: {
-              show: true,
-              position: 'top',
-              fontSize:14,
-              fontWeight: "bold",
-              color:"inherit",
-            },
-            itemStyle: {
-              normal: {
-                barBorderRadius: 6,
-                color:  "#ea7ccc"
-              }
-            },
-          }
-        ]
-      },
+      options: {},
     };
   },
   components: {
-    Echart, //子组件
+    Echart,
   },
   props: {
     cdata: {
@@ -209,74 +26,72 @@ export default {
       default: () => ({})
     },
   },
-
-  mounted() {
-    this.getdata();
-    this.refreshdata();
-  },
-  beforeDestroy () {
-    clearInterval(this.timing)
-  },
-  methods: {
-    refreshdata() {
-      this.timing = setInterval(() => {
-        this.getdata(); //获取-数据
-      }, 30000);
-    },
-    async getdata() {
-      var caller = 'KB!UpLineHourQTY';
-      await this.$http.get("kanban/datalist.action?caller="+caller+"&_noc=1&page=1&pageSize=100",{
-        params: {
-          condition: "V_OUTLINE='"+sessionStorage.getItem('ul_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();
-            let series5 = new Array();
-        var maxnumber=0;
-        for (let index = 0; index < dataList.length; index++) {
-          const element = dataList[index];
-          xAxis0.push(element.v_period);
-          //投入
-          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);
-          //upph
-          series3.push(element.upph);
-          //良率
-          series4.push(element.v_okrate);
-          //UPH
-          series5.push(element.uph);
-          if(element.uph>maxnumber){
-            maxnumber= element.uph;
-          }
+  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",
+            right: 0,
+            top: 10,
+           // bottom: 20,
+            //left: "65%",
+            //x: "center",
+            data: newData.cdata,
+            textStyle: {
+              color: "#fff",
+              fontSize: 16
+            },
+          },
+          series: [
+            {
+              type: "pie",
+              radius: [15, 60],
+              roseType: "area",
+              center: ["28%", "48%"],
+              data: newData.seriesData,
+              label: {
+                fontSize: 13,
+                width: 100,
+                color:"inherit"
+              /*  formatter:function(param){
+                  let text = param.data.name;
+                  if (text.length < 8) {
+                    return text ;
+                  } else {
+                    return text.substring(0, 8) + '...' ;
+                  }
+                },*/
+              },
+            }
+          ]
         }
-        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();
-          },(result)=>{
-            console.error(result)
-          }
-      );
+      },
+      immediate: true,
+      deep: true
     }
   }
-}
-</script>
+};
+</script>
+
+<style lang="scss" scoped>
+</style>

src/components/zxshopechart/bottom2Chart/index.vue

@@ -5,38 +5,81 @@
 </template>
 
 <script>
-import Chart from './chart.vue'
+import Chart from './chart.vue';
+import {mapState} from "vuex";
+
 export default {
+  computed: {
+    ...mapState(['factory']),
+  },
   data () {
     return {
+      timing :null,
       cdata: {
-        rateData:[
-        ]
+        xData:[],
+        seriesData:[]
       }
-    };
+    }
   },
   components: {
     Chart,
   },
   mounted () {
-    //this.setData();
+    this.getdata();
+    this.refreshdata();
   },
   beforeDestroy () {
-    clearInterval(this.intervalId);
+    clearInterval(this.timing);
     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));
-      }
+    refreshdata() {
+      this.timing = setInterval(() => {
+        this.getdata(); //获取-数据
+      }, 10000);
     },
+    async getdata() {
+      //20220211 -+formatDate(new Date()
+      var caller = 'KB!UpLineTopFiveBad';
+      await this.$http.get("kanban/datalist.action?caller="+caller+"&_noc=1&page=1&pageSize=100",
+              {
+                params: {
+                  condition: "V_OUTLINE='"+sessionStorage.getItem('ul_code')+"'"
+                }
+              }).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>

src/components/zxshopechart/up4Chart/chart.vue

@@ -1,97 +0,0 @@
-<template>
-  <div>
-    <Echart
-      :options="options"
-      id="up4Chart"
-      height="180px"
-      width="100%"
-    ></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",
-            right: 0,
-            top: 10,
-           // bottom: 20,
-            //left: "65%",
-            //x: "center",
-            data: newData.cdata,
-            textStyle: {
-              color: "#fff",
-              fontSize: 16
-            },
-          },
-          series: [
-            {
-              type: "pie",
-              radius: [15, 60],
-              roseType: "area",
-              center: ["28%", "48%"],
-              data: newData.seriesData,
-              label: {
-                fontSize: 13,
-                width: 100,
-                color:"inherit"
-              /*  formatter:function(param){
-                  let text = param.data.name;
-                  if (text.length < 8) {
-                    return text ;
-                  } else {
-                    return text.substring(0, 8) + '...' ;
-                  }
-                },*/
-              },
-            }
-          ]
-        }
-      },
-      immediate: true,
-      deep: true
-    }
-  }
-};
-</script>
-
-<style lang="scss" scoped>
-</style>

src/components/zxshopechart/up4Chart/index.vue

@@ -1,86 +0,0 @@
-<template>
-  <div>
-    <Chart :cdata="cdata" />
-  </div>
-</template>
-
-<script>
-import Chart from './chart.vue';
-import {mapState} from "vuex";
-
-export default {
-  computed: {
-    ...mapState(['factory']),
-  },
-  data () {
-    return {
-      timing :null,
-      cdata: {
-        xData:[],
-        seriesData:[]
-      }
-    }
-  },
-  components: {
-    Chart,
-  },
-  mounted () {
-    this.getdata();
-    this.refreshdata();
-  },
-  beforeDestroy () {
-    clearInterval(this.timing);
-    this.chart.dispose()
-    this.chart.clear()
-    this.chart=null
-  },
-  methods: {
-    refreshdata() {
-      this.timing = setInterval(() => {
-        this.getdata(); //获取-数据
-      }, 10000);
-    },
-    async getdata() {
-      //20220211 -+formatDate(new Date()
-      var caller = 'KB!UpLineTopFiveBad';
-      await this.$http.get("kanban/datalist.action?caller="+caller+"&_noc=1&page=1&pageSize=100",
-              {
-                params: {
-                  condition: "V_OUTLINE='"+sessionStorage.getItem('ul_code')+"'"
-                }
-              }).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/views/shop/index.vue

@@ -105,10 +105,10 @@
           <!-- 下面 -->
           <div class="bottom-box">
               <dv-border-box-12>
-                <bottom1 />
+                <bottom2 />
               </dv-border-box-12>
             <dv-border-box-12>
-              <bottom2 />
+              <bottom1 />
             </dv-border-box-12>
           </div>
         </div>

src/views/shop/up3.vue

@@ -93,7 +93,7 @@ $box-width: 100%;
       margin-bottom: 7px;
       width: 340px;
       .dv-scr-rank-board {
-        height: 450px;
+        height: 430px;
       }
     }
   }

src/views/zxshop/bottom1-1.vue

@@ -0,0 +1,73 @@
+<template>
+    <div id="bottom1">
+        <div class="down">
+            <div class="bg-color-black">
+              <div class="d-flex pt-1 pl-2">
+                 <span>
+                    <icon name="chart-line" class="text-icon"></icon>
+                  </span>
+                <span class="fs-xxl text mx-2 fw-b">当日线体产出及计划达成统计</span>
+              </div>
+              <div class="body-box">
+                <div class="pt-2 " >
+                  <Bottom1Chart />
+                </div>
+              </div>
+
+            </div>
+        </div>
+
+    </div>
+</template>
+
+<script>
+    import Bottom1Chart from "../../components/zxshopechart/bottom1ChartOld";
+    export default {
+        components: {
+            Bottom1Chart
+        },
+        data() {
+            return {
+                timing:null,
+            }
+        },
+        mounted() {
+           // this.refreshdata()
+        },
+        beforeDestroy () {
+            clearInterval(this.timing)
+        },
+        methods: {
+            refreshdata() {
+                this.getdata(); //获取-数据
+                this.timing = setInterval(() => {
+                    this.getdata(); //获取--数据
+                }, 10000);
+            },
+
+            async getdata() {
+            }
+        }
+    };
+</script>
+
+<style lang="scss" class>
+    $box-height: 475px;
+    $box-width: 100%;
+    #bottom1 {
+        padding: 13px;
+        height: $box-height;
+        width: $box-width;
+        border-radius: 5px;
+        .bg-color-black {
+          height: $box-height - 25px;
+          //width: $box-width - 10px;
+          border-radius: 10px;
+          padding: 5px ;
+        }
+        .body-box {
+          border-radius: 10px;
+          overflow: hidden;
+        }
+    }
+</style>

src/views/zxshop/bottom1.vue

@@ -1,73 +1,76 @@
 <template>
-    <div id="bottom1">
-        <div class="down">
-            <div class="bg-color-black">
-              <div class="d-flex pt-1 pl-2">
-                 <span>
-                    <icon name="chart-line" class="text-icon"></icon>
-                  </span>
-                <span class="fs-xxl text mx-2 fw-b">当日线体产出及计划达成统计</span>
-              </div>
-              <div class="body-box">
-                <div class="pt-2 " >
-                  <Bottom1Chart />
-                </div>
-              </div>
-
-            </div>
+  <div id="bottom1">
+    <div class="bg-color-black">
+      <div class="d-flex pt-1 pl-2">
+       <span>
+          <icon name="chart-line" class="text-icon"></icon>
+        </span>
+        <span class="fs-xxl text mx-2 fw-b">当日生产明细</span>
+      </div>
+      <div class="body-box">
+        <div class="pt-2" >
+          <Bottom1Chart />
         </div>
-
+      </div>
     </div>
+  </div>
 </template>
 
 <script>
-    import Bottom1Chart from "@/components/zxshopechart/bottom1Chart";
-    export default {
-        components: {
-            Bottom1Chart
-        },
-        data() {
-            return {
-                timing:null,
-            }
-        },
-        mounted() {
-           // this.refreshdata()
-        },
-        beforeDestroy () {
-            clearInterval(this.timing)
-        },
-        methods: {
-            refreshdata() {
-                this.getdata(); //获取-数据
-                this.timing = setInterval(() => {
-                    this.getdata(); //获取--数据
-                }, 10000);
-            },
+import Bottom1Chart from "../../components/zxshopechart/bottom1Chart";
 
-            async getdata() {
-            }
-        }
-    };
+  export default {
+    components: { Bottom1Chart},
+    data() {
+      return {
+        config: {
+
+        },
+        timing:null,
+      }
+    },
+    mounted() {
+      this.refreshdata()
+    },
+    beforeDestroy () {
+      clearInterval(this.timing)
+    },
+    methods: {
+      refreshdata() {
+        this.getdata(); //获取-数据
+        this.timing = setInterval(() => {
+          this.getdata(); //获取--数据
+        }, 10000);
+      },
+      async getdata() {
+      }
+    }
+  }
 </script>
 
-<style lang="scss" class>
-    $box-height: 475px;
-    $box-width: 100%;
-    #bottom1 {
-        padding: 13px;
-        height: $box-height;
-        width: $box-width;
-        border-radius: 5px;
-        .bg-color-black {
-          height: $box-height - 25px;
-          //width: $box-width - 10px;
-          border-radius: 10px;
-          padding: 5px ;
-        }
-        .body-box {
-          border-radius: 10px;
-          overflow: hidden;
-        }
+<style lang="scss" scoped>
+  $box-height: 475px;
+  $box-width: 100%;
+  #bottom1 {
+    padding: 13px;
+   // padding-top: 20px;
+    height: $box-height;
+    width: $box-width;
+    border-radius: 5px;
+    .bg-color-black {
+      height: $box-height - 25px;
+      //width: $box-width - 10px;
+      border-radius: 10px;
+      padding: 5px ;
     }
-</style>
+    .text {
+      color: #c3cbde;
+      //  font-size: 15px;
+    }
+    .body-box {
+      border-radius: 10px;
+      overflow: hidden;
+    }
+
+  }
+</style>

src/views/zxshop/bottom2.vue

@@ -1,15 +1,28 @@
 <template>
   <div id="bottom2">
     <div class="bg-color-black">
-      <div class="d-flex pt-1 pl-2">
-       <span>
-          <icon name="chart-line" class="text-icon"></icon>
-        </span>
-        <span class="fs-xxl text mx-2 fw-b">当日生产明细</span>
+      <div class="d-flex pt-1 pl-2 jc-center">
+        <span class="fs-xxl text mx-2 fw-b">质量趋势分析</span>
       </div>
-      <div class="body-box">
-        <div class="pt-2" >
-          <Bottom2Chart />
+      <div class="up">
+        <div class="d-flex pt-2 pl-2">
+          <div class="d-flex">
+            <span class="fs-xl text mx-2">不良现象TOP5</span>
+            <dv-decoration-3 class="dv-dec-3" />
+          </div>
+        </div>
+        <div >
+          <BadChart />
+        </div>
+      </div>
+      <div class="down">
+        <div class="d-flex pt-2 pl-2">
+          <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>
@@ -17,60 +30,117 @@
 </template>
 
 <script>
-import Bottom2Chart from "@/components/zxshopechart/bottom2Chart";
-
-  export default {
-    components: { Bottom2Chart},
-    data() {
-      return {
-        config: {
-
-        },
-        timing:null,
-      }
-    },
-    mounted() {
-      this.refreshdata()
-    },
-    beforeDestroy () {
-      clearInterval(this.timing)
-    },
-    methods: {
-      refreshdata() {
-        this.getdata(); //获取-数据
-        this.timing = setInterval(() => {
-          this.getdata(); //获取--数据
-        }, 10000);
+import BadChart from '../../components/zxshopechart/bottom2Chart'
+import {mapState} from "vuex";
+export default {
+  computed: {
+    ...mapState(['factory']),
+  },
+  data() {
+    return {
+      config: {
+        header: ['线别', '产出', '不良','良率%','计划数','达成率%'],
+        data: [],
+         rowNum: 5, //表格行数
+        headerHeight: 35,
+        headerBGC: '#0f1325', //表头
+        oddRowBGC: '#0f1325', //奇数行
+        evenRowBGC: '#171c33', //偶数行
+        columnWidth: [120,110,110,110,110,120],
+        align: ['center']
       },
-      async getdata() {
-      }
+      timing:null,
+    }
+  },
+  components: {
+    BadChart
+  },
+  mounted() {
+    this.refreshdata()
+  },
+  beforeDestroy () {
+    clearInterval(this.timing)
+  },
+  methods: {
+    refreshdata() {
+      this.getdata(); //获取-数据
+      this.timing = setInterval(() => {
+        this.getdata(); //获取--数据
+      }, 10000);
+    },
+
+    async getdata() {
+      var caller = 'KB!UpLinePLANTOUTPUT';
+      await this.$http.get("kanban/datalist.action?caller="+caller+"&_noc=1&page=1&pageSize=100", {
+        params: {
+          condition:"V_OUTLINE='"+sessionStorage.getItem('ul_code')+"'"
+        }
+      })
+          .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='fs-md'>"+ element.linecode +"</span>");
+                  item.push("<span  class='colorGrass fs-md'>"+element.value+"</span>");
+                  item.push("<span  class='colorGrass fs-md'>"+element.ngqty+"</span>");
+                  if(element.okrate<98) {  //98%
+                    item.push("<span  class='colorRed fs-md'>" + element.okrate + "</span>");
+                  }else {
+                    item.push("<span  class='colorGrass fs-md'>" + element.okrate + "</span>");
+                  }
+                  item.push("<span  class='colorGrass fs-md'>"+element.planqty+"</span>");
+                  item.push("<span  class='colorGrass fs-md'>"+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: 475px;
-  $box-width: 100%;
-  #bottom2 {
-    padding: 13px;
-   // padding-top: 20px;
-    height: $box-height;
-    width: $box-width;
-    border-radius: 5px;
-    .bg-color-black {
-      height: $box-height - 25px;
-      //width: $box-width - 10px;
-      border-radius: 10px;
-      padding: 5px ;
-    }
+$box-height: 475px;
+$box-width: 100%;
+#bottom2 {
+  padding: 13px;
+  height: $box-height;
+  font-size: 32px;
+  width: $box-width;
+  border-radius: 5px;
+  .bg-color-black {
+    height: $box-height - 25px;
+    border-radius: 10px;
+    padding: 5px;
+  }
+  .dv-dec-3 {
+    position: relative;
+    width: 100px;
+    height: 20px;
+    top: -3px;
+  }
+  .up {
+    height: 200px;
     .text {
-      color: #c3cbde;
-      //  font-size: 15px;
+      color: #FFE900;
     }
-    .body-box {
-      border-radius: 10px;
-      overflow: hidden;
+  }
+  .down{
+    height: 200px;
+    ::v-deep .dv-scroll-board .header{
+      font-size: 19px;
+    }
+    .dv-scroll-board {
+      height: 200px;
     }
-
   }
+
+}
 </style>

src/views/zxshop/index.vue

@@ -113,10 +113,10 @@ import drawMixin from "../../utils/drawMixin";
 import { formatTime } from '../../utils/index.js'
 import up1 from './up1'
 import up2 from './up2'
-import up3 from './up3'
-import up4 from './up4'
-import bottom1 from './bottom1'
-import bottom2 from './bottom2'
+import up3 from './up3.vue'
+import up4 from './up4.vue'
+import bottom1 from './bottom1.vue'
+import bottom2 from './bottom2.vue'
 import {mapMutations, mapState} from "vuex"
 
 export default {

src/views/zxshop/up3.vue

@@ -92,7 +92,7 @@ $box-width: 100%;
       margin-bottom: 7px;
       width: 340px;
       .dv-scr-rank-board {
-        height: 450px;
+        height: 430px;
       }
     }
   }

src/views/zxshop/up4.vue

@@ -2,27 +2,45 @@
   <div id="up4">
     <div class="bg-color-black">
       <div class="d-flex pt-1 pl-2 jc-center">
-        <span class="fs-xxl text mx-2 fw-b">质量趋势分析</span>
+        <span class="fs-xxxl text mx-2 fw-b">人员管理</span>
       </div>
-      <div class="up">
-        <div class="d-flex pt-2 pl-2">
-          <div class="d-flex">
-            <span class="fs-xl text mx-2">不良现象TOP5</span>
-            <dv-decoration-3 class="dv-dec-3" />
+      <div class="d-flex body-box">
+        <div class="item fs-xxxl">
+          <p class="ml-3 colorText fw-b ">拉长</p>
+          <div class="dv-dig-flop ml-1 mt-2 pl-3 ">
+            <div class = 'ai-center d-flex w-80' >
+              <p>{{ upitem.v_leadname }}</p>
+            </div>
+            <img :src="imgSrc1" class="responsive-img">
           </div>
         </div>
-        <div >
-          <BadChart />
+        <div class="item fs-xxxl">
+          <p class="ml-3 colorText fw-b ">出勤人数</p>
+          <div class="dv-dig-flop ml-1 mt-2 pl-3 responsive-img3 ai-center d-flex jc-center">
+            <p>{{ upitem.v_cqmancount }}人</p>
+<!--            <div class = 'ai-center d-flex'>
+                <p>{{ upitem.v_cqmancount }}人</p>
+            </div>-->
+<!--            <img src="../../assets/mancount.png" class="responsive-img2">-->
+          </div>
         </div>
-      </div>
-      <div class="down">
-        <div class="d-flex pt-2 pl-2">
-          <div class="d-flex">
-            <span class="fs-xl text mx-2">线体当日累计产量统计</span>
+        <div class="item fs-xxxl">
+          <p class="ml-3 fw-b fs-xl">IPQC</p>
+          <div class="dv-dig-flop ml-1 mt-2 pl-3 ">
+            <div class = 'ai-center d-flex w-80'>
+              <p>{{ upitem.v_quaname }}</p>
+            </div>
+            <img :src="imgSrc2"  class="responsive-img">
           </div>
         </div>
-        <div class="d-flex jc-center body-box">
-          <dv-scroll-board class="dv-scr-board" :config="config" ref="scroll-board" />
+        <div class="item fs-xxxl">
+          <p class="ml-3 colorText fw-b ">PE</p>
+          <div class="dv-dig-flop ml-1 mt-2 pl-3 ">
+            <div class = 'ai-center d-flex w-80'>
+              <p>{{ upitem.v_engineername }}</p>
+            </div>
+            <img :src="imgSrc3" class="responsive-img"> <!--//imgSrc1-->
+          </div>
         </div>
       </div>
     </div>
@@ -30,78 +48,78 @@
 </template>
 
 <script>
-import BadChart from '@/components/zxshopechart/up4Chart'
-import {mapState} from "vuex";
+
 export default {
-  computed: {
-    ...mapState(['factory']),
-  },
   data() {
     return {
-      config: {
-        header: ['线别', '产出', '不良','良率%','计划数','达成率%'],
-        data: [],
-         rowNum: 5, //表格行数
-        headerHeight: 35,
-        headerBGC: '#0f1325', //表头
-        oddRowBGC: '#0f1325', //奇数行
-        evenRowBGC: '#171c33', //偶数行
-        columnWidth: [120,110,110,110,110,120],
-        align: ['center']
-      },
       timing:null,
+      upitem:{},
+      imgSrc1:'',
+      imgSrc2:'',
+      imgSrc3:'',
     }
   },
-  components: {
-    BadChart
-  },
+  components: {},
   mounted() {
-    this.refreshdata()
+    this.refreshdata();
   },
   beforeDestroy () {
     clearInterval(this.timing)
   },
   methods: {
     refreshdata() {
-      this.getdata(); //获取-数据
+      this.settestdata(); //获取数据
       this.timing = setInterval(() => {
-        this.getdata(); //获取--数据
-      }, 10000);
+        this.settestdata(); //获取-主题词
+      }, 30000);
     },
-
-    async getdata() {
-      var caller = 'KB!UpLinePLANTOUTPUT';
-      await this.$http.get("kanban/datalist.action?caller="+caller+"&_noc=1&page=1&pageSize=100", {
+    async settestdata() {
+      //人员管理
+      var caller = 'KB!LineManInfo';
+      await this.$http.get("kanban/datalist.action?caller="+caller+"&_noc=1&page=1&pageSize=100",{
         params: {
-          condition:"V_OUTLINE='"+sessionStorage.getItem('ul_code')+"'"
+          condition: "V_OUTLINE='"+sessionStorage.getItem('ul_code')+"'" ,
         }
-      })
-          .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='fs-md'>"+ element.linecode +"</span>");
-                  item.push("<span  class='colorGrass fs-md'>"+element.value+"</span>");
-                  item.push("<span  class='colorGrass fs-md'>"+element.ngqty+"</span>");
-                  if(element.okrate<98) {  //98%
-                    item.push("<span  class='colorRed fs-md'>" + element.okrate + "</span>");
-                  }else {
-                    item.push("<span  class='colorGrass fs-md'>" + element.okrate + "</span>");
-                  }
-                  item.push("<span  class='colorGrass fs-md'>"+element.planqty+"</span>");
-                  item.push("<span  class='colorGrass fs-md'>"+element.getrate+"</span>");
-                  resultList.push(item);
-                }
-                const scrollBoard = this.$refs['scroll-board'];
-                //刷新数据
-                scrollBoard.updateRows(resultList);
-              },(result)=>{
-                console.error(result)
+      }).then((result)=>{
+            let dataList = JSON.parse(result.data.data);
+            if(dataList.length>0) {
+              this.upitem = dataList[0];
+              if(null != this.upitem.v_leadimageurl && '' != this.upitem.v_leadimageurl ) {
+                this.fetchImage('imgSrc1',this.upitem.v_leadimageurl);
+                 //this.imgSrc1 = this.$http.defaults.baseURL+"/kanban/download.action?path=D:/PROJECT2/uas-system/out/artifacts/postattach/U001/b2ebddde15d94de680dc6405540f7cb0.png&_noc=1";
               }
-          );
-    }
+              if(null != this.upitem.v_quaimageurl && '' != this.upitem.v_quaimageurl) {
+                this.fetchImage('imgSrc2',this.upitem.v_quaimageurl);
+              }
+              if(null != this.upitem.v_engineerimageurl && '' != this.upitem.v_engineerimageurl) {
+                this.fetchImage('imgSrc3',this.upitem.v_engineerimageurl);
+              }
+            }else{
+              this.upitem ={},
+              this.imgSrc1 ='';
+              this.imgSrc2 ='';
+              this.imgSrc3 ='';
+            }
+          },(result)=>{
+            console.error(result)
+          }
+      );
+    },
+
+    async fetchImage(param,url) {
+      try {
+        // 假设你已经有了token，并且知道图片的URL
+       let response = await this.$httpImg.get("/kanban/download.action?path="+url+"&_noc=1");
+        if (response.status === 200) {
+          // 创建一个URL，并且使用这个URL作为img的src
+          this[param] = URL.createObjectURL(new Blob([response.data]));
+        }else{
+          this[param] = '';
+        }
+      } catch (error) {
+        console.error('Error fetching image:', error);
+      }
+    },
   }
 }
 </script>
@@ -112,7 +130,7 @@ $box-width: 100%;
 #up4 {
   padding: 13px;
   height: $box-height;
-  font-size: 32px;
+ // font-size: 32px;
   width: $box-width;
   border-radius: 5px;
   .bg-color-black {
@@ -120,25 +138,45 @@ $box-width: 100%;
     border-radius: 10px;
     padding: 5px;
   }
-  .dv-dec-3 {
-    position: relative;
-    width: 100px;
-    height: 20px;
-    top: -3px;
-  }
-  .up {
-    height: 200px;
-    .text {
-      color: #FFE900;
-    }
-  }
-  .down{
-    height: 200px;
-    ::v-deep .dv-scroll-board .header{
-      font-size: 19px;
-    }
-    .dv-scroll-board {
-      height: 200px;
+  .body-box {
+    display: flex;
+    flex-wrap: wrap;
+    margin-bottom: 7px;
+    .item {
+      border-radius: 6px;
+      padding-top: 8px;
+      margin-top: 8px;
+      width: 50%;
+      height: 175px;
+      .dv-dig-flop {
+        width: 100%;
+       // height: 30px;
+       // font-size: 20px;
+        color: #3de7c9;
+        display: flex;
+      //  align-items: center;
+      }
+      .w-80{
+        width : 80px;
+      }
+      .responsive-img {
+        width: 150px; /* 或者指定宽度，如 300px */
+        height: 150px; /* 保持图片的宽高比 */
+        //display: block;
+        margin-left: 20px;
+        //margin-right: 0;
+      }
+      .responsive-img2 {
+        width: 70px; /* 或者指定宽度，如 300px */
+        height: 80px; /* 保持图片的宽高比 */
+        //display: block;
+        margin-left: 20px;
+        //margin-right: 0;
+      }
+      .responsive-img3{
+        width: 300px; /* 或者指定宽度，如 300px */
+        height: 150px;
+      }
     }
   }