添加测试车间看板

src/assets/scss/testShop.scss

@@ -89,6 +89,7 @@
       .text {
         display: inline-block;
         transform: skewX(45deg);
+        cursor: pointer;
       }
     }
 

src/components/testShopEchart/center/centerChartRate/index.vue

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

src/components/testShopEchart/center/top5Chart/chart.vue

@@ -0,0 +1,91 @@
+<template>
+  <div>
+    <Echart
+      :options="options"
+      id="top5Chart"
+      height="100%"
+      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}%)",
+            textStyle: {
+              fontSize: 18, // 提示框字体大小
+            },
+          },
+          toolbox: {
+            show: true
+          },
+          calculable: true,
+          legend: {
+            orient: "vertical",
+            icon: "circle",
+            // bottom: 0,
+            // x: "center",
+            data: newData.cdata,
+            textStyle: {
+              color: "#fff",
+              fontSize: 18,
+            },
+            right:'5%',
+            top:'middle'
+          },
+          series: [
+            {
+              name: "不良现象统计",
+              type: "pie",
+              radius: [15, 60],
+              roseType: "area",
+              // center: ["50%", "30%"],
+              width:'70%',
+              data: newData.seriesData,
+              label: {
+                fontSize: 18
+               }
+            }
+          ]
+        }
+      },
+      immediate: true,
+      deep: true
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+</style>

src/components/testShopEchart/center/top5Chart/chart1.vue

@@ -0,0 +1,91 @@
+<template>
+  <div>
+    <Echart
+      :options="options"
+      id="top5Chart"
+      height="100%"
+      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}%)",
+            textStyle: {
+              fontSize: 18, // 提示框字体大小
+            },
+          },
+          toolbox: {
+            show: true
+          },
+          calculable: true,
+          legend: {
+            orient: "vertical",
+            icon: "circle",
+            // bottom: 0,
+            // x: "center",
+            data: newData.cdata,
+            textStyle: {
+              color: "#fff",
+              fontSize: 18,
+            },
+            right:'5%',
+            top:'middle'
+          },
+          series: [
+            {
+              name: "不良现象统计",
+              type: "pie",
+              radius: [15, 60],
+              roseType: "area",
+              // center: ["50%", "30%"],
+              width:'70%',
+              data: newData.seriesData,
+              label: {
+                fontSize: 18
+               }
+            }
+          ]
+        }
+      },
+      immediate: true,
+      deep: true
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+</style>

src/components/testShopEchart/center/top5Chart/index.vue

@@ -0,0 +1,97 @@
+<template>
+    <Chart :cdata="cdata" />
+</template>
+
+<script>
+import Chart from './chart.vue';
+import { formatDate } from '../../../../utils/index.js';
+export default {
+  data () {
+    return {
+      intervalId :null,
+      cdata: {
+        xData:[],// ["data1", "data2", "data3", "data4", "data5", "data6"],
+        seriesData:[] /* [
+          { value: 10, name: "data1" },
+          { value: 5, name: "data2" },
+          { value: 15, name: "data3" },
+          { value: 25, name: "data4" },
+          { value: 20, name: "data5" },
+          { value: 35, name: "data6" }
+        ]*/
+      }
+    }
+  },
+  components: {
+    Chart,
+  },
+  mounted () {
+    this.getdata();
+    this.refreshdata();
+  },
+  beforeDestroy () {
+    clearInterval(this.intervalId);
+    this.chart.dispose()
+    this.chart.clear()
+    this.chart=null
+  },
+  methods: {
+    refreshdata() {
+      this.intervalId =setInterval(() => {
+        this.getdata(); //获取-数据
+      }, 30000);
+    },
+    async getdata() {
+      //20220211 -+formatDate(new Date()
+      var caller = 'NGREASONF!ZZ';
+      if (sessionStorage.getItem('li_code') == '所有'){
+        caller = 'ZZ!NGREASONF!ALL';
+      }
+      var csline='';
+      if(sessionStorage.getItem('li_code') =='ZZB'){
+        csline='CSB';
+      }
+      if(sessionStorage.getItem('li_code') =='ZZC'){
+        csline='CSC';
+      }
+      await this.$http.get("kanban/datalist.action?caller="+caller+"&_noc=1&page=1&pageSize=100",
+              {
+                params: {
+                  condition: "mb_ymd="+formatDate(new Date()) +" and V_LICODE ='"+csline+"'"
+                }
+              }) .then((result)=>{
+                        let dataList = JSON.parse(result.data.data);
+                        let xData0 = new Array();
+                        let seriesData0 = new Array();
+                        let sum1 = 0;
+                        let totalsum = 0;
+                        for (let index = 0; index < dataList.length; index++) {
+                          const element = dataList[index];
+                          let ob = new Object();
+                          xData0.push(element.mb_badname);
+                          ob.value = element.v_cn;
+                          ob.name = element.mb_badname;
+                          seriesData0.push(ob);
+                          sum1 +=element.v_cn;
+                          totalsum = element.v_sum;
+                        }
+                        if(totalsum-sum1>0){
+                          xData0.push('其它');
+                          let ob = new Object();
+                          ob.value = totalsum-sum1;
+                          ob.name = '其它';
+                          seriesData0.push(ob);
+                        }
+                       this.cdata.xData = xData0;
+                       this.cdata.seriesData = seriesData0;
+                      },(result)=>{
+                        console.error(result)
+                      }
+              );
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+</style>

src/components/testShopEchart/center/top5Chart/index1.vue

@@ -0,0 +1,97 @@
+<template>
+    <Chart :cdata="cdata" />
+</template>
+
+<script>
+import Chart from './chart1.vue';
+import { formatDate } from '../../../../utils/index.js';
+export default {
+  data () {
+    return {
+      intervalId :null,
+      cdata: {
+        xData:[],// ["data1", "data2", "data3", "data4", "data5", "data6"],
+        seriesData:[] /* [
+          { value: 10, name: "data1" },
+          { value: 5, name: "data2" },
+          { value: 15, name: "data3" },
+          { value: 25, name: "data4" },
+          { value: 20, name: "data5" },
+          { value: 35, name: "data6" }
+        ]*/
+      }
+    }
+  },
+  components: {
+    Chart,
+  },
+  mounted () {
+    this.getdata();
+    this.refreshdata();
+  },
+  beforeDestroy () {
+    clearInterval(this.intervalId);
+    this.chart.dispose()
+    this.chart.clear()
+    this.chart=null
+  },
+  methods: {
+    refreshdata() {
+      this.intervalId =setInterval(() => {
+        this.getdata(); //获取-数据
+      }, 30000);
+    },
+    async getdata() {
+      //20220211 -+formatDate(new Date()
+      var caller = 'NGREASONF!ZZ';
+      if (sessionStorage.getItem('li_code') == '所有'){
+        caller = 'ZZ!NGREASONF!ALL';
+      }
+      var csline='';
+      if(sessionStorage.getItem('li_code') =='ZZB'){
+        csline='CSB';
+      }
+      if(sessionStorage.getItem('li_code') =='ZZC'){
+        csline='CSC';
+      }
+      await this.$http.get("kanban/datalist.action?caller="+caller+"&_noc=1&page=1&pageSize=100",
+              {
+                params: {
+                  condition: "mb_ymd="+formatDate(new Date()) +" and V_LICODE ='"+csline+"'"
+                }
+              }) .then((result)=>{
+                        let dataList = JSON.parse(result.data.data);
+                        let xData0 = new Array();
+                        let seriesData0 = new Array();
+                        let sum1 = 0;
+                        let totalsum = 0;
+                        for (let index = 0; index < dataList.length; index++) {
+                          const element = dataList[index];
+                          let ob = new Object();
+                          xData0.push(element.mb_badname);
+                          ob.value = element.v_cn;
+                          ob.name = element.mb_badname;
+                          seriesData0.push(ob);
+                          sum1 +=element.v_cn;
+                          totalsum = element.v_sum;
+                        }
+                        if(totalsum-sum1>0){
+                          xData0.push('其它');
+                          let ob = new Object();
+                          ob.value = totalsum-sum1;
+                          ob.name = '其它';
+                          seriesData0.push(ob);
+                        }
+                       this.cdata.xData = xData0;
+                       this.cdata.seriesData = seriesData0;
+                      },(result)=>{
+                        console.error(result)
+                      }
+              );
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+</style>

src/components/testShopEchart/centerRight1Chart/chart.vue

@@ -0,0 +1,277 @@
+<template>
+  <div>
+    <!--  -->
+    <Echart
+        :options="options"
+        id="centerRight1Chart"
+        height="100%"
+        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: 150,
+            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 = 'CSBWCDAYTURNOUT!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/testShopEchart/centerRight1Chart/index.vue

@@ -0,0 +1,42 @@
+<template>
+    <Chart :cdata="cdata" />
+</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/testShopEchart/centerRight2Chart/chart.vue

@@ -0,0 +1,284 @@
+<template>
+  <div>
+    <!-- 年度开工率 -->
+    <Echart
+        :options="options"
+        id="centerRight2Chart"
+        height="100%"
+        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: 150,
+            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 = 'CSCWCDAYTURNOUT!ZZ';
+      if (sessionStorage.getItem('li_code') == '所有'){
+        caller = 'ZZ!WCDAYTURNOUT!ALL';
+      }
+      var csline='';
+      if(sessionStorage.getItem('li_code') =='ZZB'){
+        csline='CSB';
+      }
+      if(sessionStorage.getItem('li_code') =='ZZC'){
+        csline='CSC';
+      }
+      await this.$http.get("kanban/datalist.action?caller="+caller+"&_noc=1&page=1&pageSize=100",{
+        params: {
+          condition:  "V_LICODE='"+csline+"'"
+        }
+      }).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/testShopEchart/centerRight2Chart/index.vue

@@ -0,0 +1,42 @@
+<template>
+    <Chart :cdata="cdata" />
+</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/testShop/barLeft.vue

@@ -0,0 +1,132 @@
+<template>
+  <div id="centerRight1">
+    <div class="bg-color-black">
+      <div class="d-flex pt-2 pl-2">
+        <span>
+          <icon name="chart-line" class="text-icon"></icon>
+        </span>
+        <div class="d-flex">
+          <span class="fs-xl text mx-2">(QC)</span>
+        </div>
+      </div>
+      
+       <CenterRight1Chart />
+    </div>
+  </div>
+</template>
+
+<script>
+import CenterRight1Chart from "../../components/testShopEchart/centerRight1Chart/index.vue";
+
+export default {
+  components: {CenterRight1Chart},
+  data() {
+    return {
+      config: {
+        header:  ['线别', '投入','产出', '不良','良率%','计划数','达成率%'],
+        data: [
+        ],
+        rowNum: 2, //表格行数
+        headerHeight: 35,
+        headerBGC: '#0f1325', //表头
+        oddRowBGC: '#0f1325', //奇数行
+        evenRowBGC: '#171c33', //偶数行
+        columnWidth: [110,100,100,80,90,100,90],
+        align: ['center']
+      },
+      timing :null,
+      linename:11,
+    }
+  },
+  mounted() {
+    this.refreshdata()
+  },
+  beforeDestroy () {
+    clearInterval(this.timing)
+  },
+  methods: {
+    formatRate(rate) {
+      return parseFloat(rate || 0).toFixed(2).padStart(5, ' ');
+    },
+    refreshdata() {
+      this.getdata(); //获取-数据
+      this.timing = setInterval(() => {
+        this.getdata(); //获取--数据
+      }, 30000);
+    },
+    async getdata() {
+
+      var caller = 'DPLANTOUTPUT!ZZ';
+      if (sessionStorage.getItem('li_code') == '所有'){
+        caller = 'ZZ!DPLANTOUTPUT!ALL';
+      }
+      var csline='';
+      if(sessionStorage.getItem('li_code') =='ZZB'){
+        csline='CSB';
+      }
+      if(sessionStorage.getItem('li_code') =='ZZC'){
+        csline='CSC';
+      }
+      await this.$http.get("kanban/datalist.action?caller="+caller+"&_noc=1&page=1&pageSize=100",{
+        params: {
+          condition:  "V_LICODE in ('" + sessionStorage.getItem('li_code') + "','"+csline+"')"
+        }
+      }).then((result)=>{
+
+                    let dataList = JSON.parse(result.data.data);
+                    let resultList = new Array();
+                    for (let index = 0; index < dataList.length; index++) {
+                      const element = dataList[index];
+                      let item = new Array();
+                      item.push(element.linecode);
+                      item.push("<span  class='colorGrass'>"+element.inqty+"</span>");
+                      item.push("<span  class='colorGrass'>"+element.value+"</span>");
+                      item.push("<span  class='colorGrass'>"+element.ngqty+"</span>");
+                      item.push("<span  class='colorGrass'>" + element.okrate + "</span>");
+                      item.push("<span  class='colorGrass'>"+element.planqty+"</span>");
+                      item.push("<span  class='colorGrass'>"+element.getrate+"</span>");
+                      this.linename = element.linecode;
+                      resultList.push(item);
+                    }
+
+                    const scrollBoard = this.$refs['scroll-board'];
+                    //刷新数据
+                    scrollBoard.updateRows(resultList);
+                },(result)=>{
+                    console.error(result)
+                    }
+          );
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+#centerRight1 {
+  padding: 5px;
+  height: 100%;
+  width: 100%;
+  border-radius: 5px;
+  .bg-color-black {
+    // height: $box-height - 30px;
+    border-radius: 10px;
+    height: 100%;
+    width: 100%;
+    >div+div{
+      height: 80%;
+    }
+  }
+  .text {
+    color: #c3cbde;
+  //  font-size: 15px;
+  }
+  .body-box {
+    border-radius: 10px;
+    overflow: hidden;
+    .dv-scr-board {
+      width: 100%;
+      height: 100%;
+    }
+  }
+}
+</style>

src/views/testShop/barRight.vue

@@ -0,0 +1,133 @@
+<template>
+  <div id="centerRight1">
+    <div class="bg-color-black">
+      <div class="d-flex pt-2 pl-2">
+        <span>
+          <icon name="chart-line" class="text-icon"></icon>
+        </span>
+        <div class="d-flex">
+          <span class="fs-xl text mx-2">FQC</span>
+        </div>
+      </div>
+       <CenterRight2Chart />
+    </div>
+  </div>
+</template>
+
+<script>
+import CenterRight2Chart from "../../components/testShopEchart/centerRight2Chart/index.vue";
+
+export default {
+  components: {CenterRight2Chart},
+  data() {
+    return {
+      config: {
+        header:  ['线别', '投入','产出', '不良','良率%','计划数','达成率%'],
+        data: [
+        ],
+        rowNum: 2, //表格行数
+        headerHeight: 35,
+        headerBGC: '#0f1325', //表头
+        oddRowBGC: '#0f1325', //奇数行
+        evenRowBGC: '#171c33', //偶数行
+        columnWidth: [110,100,100,80,90,100,90],
+        align: ['center']
+      },
+      timing :null,
+      linename:11,
+    }
+  },
+  mounted() {
+    this.refreshdata()
+  },
+  beforeDestroy () {
+    clearInterval(this.timing)
+  },
+  methods: {
+    formatRate(rate) {
+      // Format rate to 2 decimal places and pad with spaces to ensure consistent width
+      return parseFloat(rate || 0).toFixed(2).padStart(5, ' ');
+    },
+    refreshdata() {
+      this.getdata(); //获取-数据
+      this.timing = setInterval(() => {
+        this.getdata(); //获取--数据
+      }, 30000);
+    },
+    async getdata() {
+
+      var caller = 'DPLANTOUTPUT!ZZ';
+      if (sessionStorage.getItem('li_code') == '所有'){
+        caller = 'ZZ!DPLANTOUTPUT!ALL';
+      }
+      var csline='';
+      if(sessionStorage.getItem('li_code') =='ZZB'){
+        csline='CSB';
+      }
+      if(sessionStorage.getItem('li_code') =='ZZC'){
+        csline='CSC';
+      }
+    //  const {data} = await this.$http.get("kanban/panelView/parseData/2B247DC439B3?index=0&kanbanCode=2B23AC00BCFB");
+      await this.$http.get("kanban/datalist.action?caller="+caller+"&_noc=1&page=1&pageSize=100",{
+        params: {
+          condition:  "V_LICODE in ('" + sessionStorage.getItem('li_code') + "','"+csline+"')"
+        }
+      }).then((result)=>{
+
+                    let dataList = JSON.parse(result.data.data);
+                    let resultList = new Array();
+                    for (let index = 0; index < dataList.length; index++) {
+                      const element = dataList[index];
+                      let item = new Array();
+                      item.push(element.linecode);
+                      item.push("<span  class='colorGrass'>"+element.inqty+"</span>");
+                      item.push("<span  class='colorGrass'>"+element.value+"</span>");
+                      item.push("<span  class='colorGrass'>"+element.ngqty+"</span>");
+                      item.push("<span  class='colorGrass'>" + element.okrate + "</span>");
+                      item.push("<span  class='colorGrass'>"+element.planqty+"</span>");
+                      item.push("<span  class='colorGrass'>"+element.getrate+"</span>");
+                      this.linename = element.linecode;
+                      resultList.push(item);
+                    }
+
+                    const scrollBoard = this.$refs['scroll-board'];
+                    //刷新数据
+                    scrollBoard.updateRows(resultList);
+                },(result)=>{
+                    console.error(result)
+                    }
+          );
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+#centerRight1 {
+  padding: 5px;
+  height: 100%;
+  width: 100%;
+  border-radius: 5px;
+  .bg-color-black {
+    // height: $box-height - 30px;
+    border-radius: 10px;
+    height: 100%;
+    width: 100%;
+    >div+div{
+      height: 80%;
+    }
+  }
+  .text {
+    color: #c3cbde;
+  //  font-size: 15px;
+  }
+  .body-box {
+    border-radius: 10px;
+    overflow: hidden;
+    .dv-scr-board {
+      width: 600px;
+      height: 90px;
+    }
+  }
+}
+</style>

src/views/testShop/center.vue

@@ -0,0 +1,141 @@
+<template>
+  <div id="center">
+    <div class="bg-color-black">
+      <div class="d-flex pt-2 pl-2">
+        <span>
+          <icon name="chart-bar" class="text-icon"></icon>
+        </span>
+        <div class="d-flex">
+          <span class="fs-xl text mx-2">二测不良现象TOP5</span>
+          <dv-decoration-3 class="dv-dec-3" />
+        </div>
+      </div>
+      <div class="d-flex jc-center">
+         <Top5Chart />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import Top5Chart from '@/components/testShopEchart/center/top5Chart'
+export default {
+  data() {
+    return {
+      numberData: [
+        {
+          number: {
+            number: [15],
+            toFixed: 1,
+            textAlign: 'left',
+            content: '{nt}',
+            style: {
+              fontSize: 32
+            }
+          },
+          text: '项目数'
+        },
+        {
+          number: {
+            number: [1144],
+            toFixed: 1,
+            textAlign: 'left',
+            content: '{nt}',
+            style: {
+              fontSize: 32
+            }
+          },
+          text: '已上线'
+        },
+        {
+          number: {
+            number: [361],
+            toFixed: 1,
+            textAlign: 'left',
+            content: '{nt}',
+            style: {
+              fontSize: 32
+            }
+          },
+          text: '已启动'
+        },
+        {
+          number: {
+            number: [157],
+            toFixed: 1,
+            textAlign: 'left',
+            content: '{nt}',
+            style: {
+              fontSize: 32
+            }
+          },
+          text: '已验收'
+        }
+      ]
+    }
+  },
+  components: {
+    Top5Chart
+  },
+  mounted() {
+  //  this.changeTiming()
+  },
+  beforeDestroy () {
+   clearInterval(this.intervalId)
+    this.chart.dispose()
+    this.chart.clear()
+    this.chart=null
+  },
+  methods: {
+    changeTiming() {
+      setInterval(() => {
+        this.changeNumber()
+      }, 20000)
+    },
+    changeNumber() {
+      this.numberData.forEach((item, index) => {
+        item.number.number[0] += ++index
+        item.number = { ...item.number }
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+$box-height: 420px;
+#center {
+  width: 100%;
+  padding: 5px;
+  height: $box-height;
+  font-size: 32px;
+  border-radius: 5px;
+  .bg-color-black {
+    height: $box-height - 10px;
+    border-radius: 10px;
+    padding: 5px;
+    display: flex;
+    flex-direction: column;
+    >div{
+      width: 100%;
+    }
+    >.jc-center{
+      width: 100%;
+      flex: 1;
+      >div{
+        width: 100%;
+        height: 100%;
+      }
+    }
+  }
+  .text {
+    color: #FFE900;
+  }
+  .dv-dec-3 {
+    position: relative;
+    width: 100px;
+    height: 20px;
+    top: -3px;
+  }
+}
+</style>

src/views/testShop/center1.vue

@@ -0,0 +1,141 @@
+<template>
+  <div id="center">
+    <div class="bg-color-black">
+      <div class="d-flex pt-2 pl-2">
+        <span>
+          <icon name="chart-bar" class="text-icon"></icon>
+        </span>
+        <div class="d-flex">
+          <span class="fs-xl text mx-2">二测不良现象TOP5</span>
+          <dv-decoration-3 class="dv-dec-3" />
+        </div>
+      </div>
+      <div class="d-flex jc-center">
+         <Top5Chart />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import Top5Chart from '@/components/testShopEchart/center/top5Chart/index1'
+export default {
+  data() {
+    return {
+      numberData: [
+        {
+          number: {
+            number: [15],
+            toFixed: 1,
+            textAlign: 'left',
+            content: '{nt}',
+            style: {
+              fontSize: 32
+            }
+          },
+          text: '项目数'
+        },
+        {
+          number: {
+            number: [1144],
+            toFixed: 1,
+            textAlign: 'left',
+            content: '{nt}',
+            style: {
+              fontSize: 32
+            }
+          },
+          text: '已上线'
+        },
+        {
+          number: {
+            number: [361],
+            toFixed: 1,
+            textAlign: 'left',
+            content: '{nt}',
+            style: {
+              fontSize: 32
+            }
+          },
+          text: '已启动'
+        },
+        {
+          number: {
+            number: [157],
+            toFixed: 1,
+            textAlign: 'left',
+            content: '{nt}',
+            style: {
+              fontSize: 32
+            }
+          },
+          text: '已验收'
+        }
+      ]
+    }
+  },
+  components: {
+    Top5Chart
+  },
+  mounted() {
+  //  this.changeTiming()
+  },
+  beforeDestroy () {
+   clearInterval(this.intervalId)
+    this.chart.dispose()
+    this.chart.clear()
+    this.chart=null
+  },
+  methods: {
+    changeTiming() {
+      setInterval(() => {
+        this.changeNumber()
+      }, 20000)
+    },
+    changeNumber() {
+      this.numberData.forEach((item, index) => {
+        item.number.number[0] += ++index
+        item.number = { ...item.number }
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+$box-height: 420px;
+#center {
+  width: 100%;
+  padding: 5px;
+  height: $box-height;
+  font-size: 32px;
+  border-radius: 5px;
+  .bg-color-black {
+    height: $box-height - 10px;
+    border-radius: 10px;
+    padding: 5px;
+    display: flex;
+    flex-direction: column;
+    >div{
+      width: 100%;
+    }
+    >.jc-center{
+      width: 100%;
+      flex: 1;
+      >div{
+        width: 100%;
+        height: 100%;
+      }
+    }
+  }
+  .text {
+    color: #FFE900;
+  }
+  .dv-dec-3 {
+    position: relative;
+    width: 100px;
+    height: 20px;
+    top: -3px;
+  }
+}
+</style>

src/views/testShop/chartLeft.vue

@@ -0,0 +1,22 @@
+<template>
+  <div class="char">
+    <center/>
+  </div>
+</template>
+
+<script>
+import center from "./center.vue";
+export default {
+  components: {
+    center,
+  },
+};
+</script>
+
+<style>
+.char {
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+}
+</style>

src/views/testShop/chartRight.vue

@@ -0,0 +1,22 @@
+<template>
+  <div class="char">
+    <center/>
+  </div>
+</template>
+
+<script>
+import center from "./center1.vue";
+export default {
+  components: {
+    center,
+  },
+};
+</script>
+
+<style>
+.char {
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+}
+</style>

src/views/testShop/index.vue

@@ -9,9 +9,17 @@
             <dv-decoration-8 class="dv-dec-8" :color="decorationColor" />
             <div class="title">
               <span class="title-text">UAS-MES可视化平台</span>
-              <dv-decoration-6 class="dv-dec-6" :reverse="true" :color="['#50e3c2', '#67a1e5']" />
+              <dv-decoration-6
+                class="dv-dec-6"
+                :reverse="true"
+                :color="['#50e3c2', '#67a1e5']"
+              />
             </div>
-            <dv-decoration-8 class="dv-dec-8" :reverse="true" :color="decorationColor" />
+            <dv-decoration-8
+              class="dv-dec-8"
+              :reverse="true"
+              :color="decorationColor"
+            />
           </div>
           <dv-decoration-10 class="dv-dec-10-s" />
         </div>
@@ -21,7 +29,9 @@
           <div class="d-flex aside-width">
             <div class="react-left ml-4 react-l-s bg-color-blue">
               <span class="react-left"></span>
-              <span class="text fw-b" style="font-size:24px;">普耐尔MES数据看板</span>
+              <span class="text fw-b" style="font-size: 24px"
+                >普耐尔MES数据看板</span
+              >
             </div>
             <div class="react-left ml-3">
               <span class="text">生产实况分析</span>
@@ -29,30 +39,82 @@
           </div>
           <div class="d-flex aside-width">
             <div class="react-right bg-color-r mr-3">
-              <!-- <span class="text ">设备运行分析</span>-->
-              <span class="text" @click="fullScreen" ref="fullScreen">全屏</span>
-              <span class="text" @click="exitFullScreen" ref="exitFullScreen" style="display: none">退出全屏</span>
+              <span
+                class="text"
+                @click="fullScreen"
+                ref="fullScreen"
+                v-show="!isFullScreen"
+                >全屏</span
+              >
+              <span
+                class="text"
+                @click="exitFullScreen"
+                ref="exitFullScreen"
+                v-show="isFullScreen"
+                >退出全屏</span
+              >
             </div>
-            <div class="react-right mr-4 react-l-s" style="width: 900px">
-              <span class="react-after"></span>
+            <div
+              class="react-right mr-4 react-l-s right_titile"
+              style="width: 900px"
+            >
               <el-dropdown class="dropdown">
                 <span class="el-dropdown-link" ref="echarType">
-                  测试车间<i class="el-icon-arrow-down el-icon&#45;&#45;right"></i>&nbsp;&nbsp;&nbsp;&nbsp;
+                  测试车间
+                  <i class="el-icon-arrow-down el-icon&#45;&#45;right"></i>
+                  &nbsp;&nbsp;&nbsp;&nbsp;
                 </span>
                 <el-dropdown-menu slot="dropdown">
-                  <el-dropdown-item><router-link to="assembly"> 组装车间 </router-link></el-dropdown-item>
-                  <el-dropdown-item><router-link to="package"> 包装车间 </router-link></el-dropdown-item>
+                  <el-dropdown-item
+                    ><router-link to="assembly">
+                      组装车间
+                    </router-link></el-dropdown-item
+                  >
+                  <el-dropdown-item
+                    ><router-link to="package">
+                      包装车间
+                    </router-link></el-dropdown-item
+                  >
                 </el-dropdown-menu>
               </el-dropdown>
+              <el-select
+                v-model="linecode"
+                class="dropdown"
+                @change="handleBlur"
+                style="width: 150px"
+              >
+                <el-option
+                  v-for="item in linedata"
+                  :key="item.LI_CODE"
+                  :label="item.LI_CODE"
+                  :value="item.LI_CODE"
+                ></el-option>
+              </el-select>
               <span class="text">&nbsp;&nbsp;&nbsp;&nbsp;</span>
-              <span class="text">{{ dateYear }} {{ dateWeek }} {{ dateDay }}</span>
+              <span class="text"
+                >{{ dateYear }} {{ dateWeek }} {{ dateDay }}</span
+              >
             </div>
           </div>
         </div>
 
         <div class="body-box">
-
-
+          <div>
+            <dv-border-box-12>
+              <chartLeft />
+            </dv-border-box-12>
+            <dv-border-box-12>
+              <chartRight />
+            </dv-border-box-12>
+          </div>
+          <div>
+            <dv-border-box-12>
+              <barLeft />
+            </dv-border-box-12>
+            <dv-border-box-12>
+              <barRight />
+            </dv-border-box-12>
+          </div>
         </div>
       </div>
     </div>
@@ -61,7 +123,11 @@
 
 <script>
 import drawMixin from "../../utils/drawMixin";
-import { formatTime } from '../../utils/index.js'
+import { formatTime } from "../../utils/index.js";
+import chartLeft from "./chartLeft.vue";
+import chartRight from "./chartRight.vue";
+import barLeft from "./barLeft.vue";
+import barRight from "./barRight.vue";
 
 export default {
   mixins: [drawMixin],
@@ -72,58 +138,136 @@ export default {
       dateDay: null,
       dateYear: null,
       dateWeek: null,
-      weekday: ['周日', '周一', '周二', '周三', '周四', '周五', '周六'],
-      decorationColor: ['#568aea', '#000000'],
+      weekday: ["周日", "周一", "周二", "周三", "周四", "周五", "周六"],
+      decorationColor: ["#568aea", "#000000"],
       isFullScreen: false,
-    }
+    };
   },
   components: {
-
+    chartLeft,
+    chartRight,
+    barLeft,
+    barRight,
+  },
+  created() {
+    this.getLines();
+    this.isFullScreen = !!document.fullscreenElement;
   },
   mounted() {
-    this.timeFn()
-    this.cancelLoading()
+    this.timeFn();
+    this.cancelLoading();
     this.$nextTick(() => {
-      this.autoFullScreen()
-    })
+      this.fullScreen();
+    });
   },
   beforeDestroy() {
-    clearInterval(this.timing)
+    clearInterval(this.timing);
   },
   methods: {
     timeFn() {
       this.timing = setInterval(() => {
-        this.dateDay = formatTime(new Date(), 'HH: mm: ss')
-        this.dateYear = formatTime(new Date(), 'yyyy-MM-dd')
-        this.dateWeek = this.weekday[new Date().getDay()]
-      }, 1000)
+        this.dateDay = formatTime(new Date(), "HH: mm: ss");
+        this.dateYear = formatTime(new Date(), "yyyy-MM-dd");
+        this.dateWeek = this.weekday[new Date().getDay()];
+      }, 1000);
     },
     cancelLoading() {
       setTimeout(() => {
-        this.loading = false
-      }, 5000)
+        this.loading = false;
+      }, 5000);
+    },
+    fullScreen() {
+      if (this.isFullScreen) return;
+
+      const element = document.documentElement;
+      if (element.requestFullscreen) {
+        element.requestFullscreen();
+      } else if (element.webkitRequestFullscreen) {
+        element.webkitRequestFullscreen();
+      } else if (element.msRequestFullscreen) {
+        element.msRequestFullscreen();
+      }
+      this.isFullScreen = true;
+    },
+    exitFullScreen() {
+      if (document.exitFullscreen) {
+        document.exitFullscreen();
+      } else if (document.webkitExitFullscreen) {
+        document.webkitExitFullscreen();
+      } else if (document.msExitFullscreen) {
+        document.msExitFullscreen();
+      }
+      this.isFullScreen = false;
+    },
+    getLines() {
+      this.$http.get("kanban/getLinesByWorkCenter.action?wccode=组装").then(
+        (res) => {
+          if (res.data.linedata) {
+            const data = res.data.linedata.concat({
+              LI_CODE: "所有",
+              LI_NAME: "所有",
+            });
+            if (
+              this.$cookie.get("AS_LI_CODE") &&
+              data.some(
+                (item) => item.LI_CODE === this.$cookie.get("AS_LI_CODE")
+              )
+            ) {
+              sessionStorage.setItem("li_code", this.$cookie.get("AS_LI_CODE"));
+            } else {
+              sessionStorage.setItem("li_code", data[0].LI_CODE);
+              this.$cookie.set("AS_LI_CODE", data[0].LI_CODE, {
+                expires: 30,
+              });
+            }
+            this.linedata = data;
+          } else {
+            sessionStorage.setItem("li_code", "");
+          }
+          this.linecode = sessionStorage.getItem("li_code");
+        },
+        (result) => {
+          console.error(result);
+        }
+      );
     },
-    handleBlur(val) {
-      sessionStorage.setItem('li_code', val);
-      this.$cookie.set("PC_LI_CODE", val, {
-        expires: 30,
-      });
-      location.reload();
-    }
   },
-}
+};
 </script>
 
 <style lang="scss" scoped>
-@import '../../assets/scss/testShop.scss';
+@import "../../assets/scss/testShop.scss";
+
+.host-body {
+  .body-box {
+    width: 100%;
+    height: 900px;
+    overflow: hidden;
+
+    > div {
+      width: 100%;
+      height: 440px;
+      margin-bottom: 10px;
+      overflow: hidden;
+
+      > div {
+        width: 50%;
+        height: 100%;
+        float: left;
+      }
+    }
+  }
+}
+
 .dropdown {
   font-size: 18px;
   color: #568aea;
   transform: skewX(45deg);
+  cursor: pointer;
 
   ::v-deep .el-select-dropdown {
     border: 1px solid #0f1325;
-    background: #04308D !important;
+    background: #04308d !important;
   }
 
   ::v-deep .el-input__inner {