次元看板--调整，复制车间看板增加整线看板

src/components/zxshopechart/bottom1Chart/chart.vue

@@ -0,0 +1,218 @@
+<template>
+  <div>
+    <Echart
+        :options="options"
+        id="bottom1Chart"
+        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: 'inside',
+              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/bottom1Chart/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

@@ -0,0 +1,277 @@
+<template>
+  <div>
+    <Echart
+        :options="options"
+        id="bottom2Chart"
+        height="430px"
+        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,
+          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:"inherit",
+            },
+          },
+          {
+            name: '不良',
+            type: 'bar',
+            stack: 'Ad',
+            barWidth: 10,
+            data:[],
+            //data: [12, 22, 32, 12, 32, 12, 32],
+            emphasis: {
+              focus: 'series'
+            }
+          },
+          {
+            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"
+              }
+            },
+          }
+        ]
+      },
+    };
+  },
+  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!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;
+          }
+        }
+        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)
+          }
+      );
+    }
+  }
+}
+</script>

src/components/zxshopechart/bottom2Chart/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/up1Chart/index.vue

@@ -0,0 +1,110 @@
+<template>
+    <div>
+        <Echart
+                :options="options"
+                id="up1Chart"
+                height="430px"
+                width="100%"
+        ></Echart>
+    </div>
+</template>
+
+<script>
+    import Echart from '@/common/echart'
+    export default {
+        data() {
+            return {
+                options: {},
+                // 定义颜色
+            }
+        },
+        components: {
+            Echart
+        },
+        props: {
+          bardata: {
+                type: Object,
+                default: () => ({})
+            }
+        },
+        watch: {
+          bardata: {
+                handler(newData) {
+                    this.options = {
+                      tooltip: {
+                        trigger: 'axis',
+                        axisPointer: {
+                          type: 'shadow'
+                        }
+                      },
+                      legend: {
+                        bottom: "90%",
+                        textStyle: {
+                          fontSize: 15
+                        }
+                      },
+                      grid: {
+                          left: '3%',
+                          right: '4%',
+                          bottom: 20,
+                          containLabel: true
+                      },
+                      xAxis: {
+                          type: 'value',
+                          max: newData.max
+                      },
+                      // 下方Y轴
+                      yAxis: {
+                          type:'category',
+                          data:newData.yAxis,
+                          axisLabel: {
+                            fontSize: 16,
+                           // fontWeight: "bold"
+                          }
+                      },
+                      series: [
+                          {
+                              name: '计划数',
+                              type: 'bar',
+                              data: newData.planData,
+                              label: {
+                                show: true,
+                                position: 'right',
+                                fontSize:14,
+                                fontWeight: "bold",
+                                color:  "rgb(92,144,247)"
+                              },
+                            barWidth: 20,
+                            itemStyle: {
+                              normal: {
+                                color:  "rgb(92,144,247)"
+                              }
+                            },
+                          },
+                          {
+                            name: '实际数',
+                            type: 'bar',
+                            data: newData.actData,
+                            label: {
+                              show: true,
+                              position: 'right',
+                              fontSize:14,
+                              fontWeight: "bold",
+                              color:  "rgb(158,252,184)"
+                            },
+                            barWidth: 20,
+                            itemStyle: {
+                              normal: {
+                                color:  "rgb(158,252,184)"
+                              }
+                            },
+                          }
+                      ]
+                    }
+                },
+                immediate: true,
+                deep: true
+            }
+        }
+    }
+</script>

src/components/zxshopechart/up2Chart/index.vue

@@ -0,0 +1,110 @@
+<template>
+    <div>
+        <Echart
+                :options="options"
+                id="up2Chart"
+                height="430px"
+                width="100%"
+        ></Echart>
+    </div>
+</template>
+
+<script>
+    import Echart from '@/common/echart'
+    export default {
+        data() {
+            return {
+                options: {},
+                // 定义颜色
+            }
+        },
+        components: {
+            Echart
+        },
+        props: {
+          bardata: {
+                type: Object,
+                default: () => ({})
+            }
+        },
+        watch: {
+          bardata: {
+                handler(newData) {
+                    this.options = {
+                      tooltip: {
+                        trigger: 'axis',
+                        axisPointer: {
+                          type: 'shadow'
+                        }
+                      },
+                      legend: {
+                        bottom: "90%",
+                        textStyle: {
+                          fontSize: 15
+                        }
+                      },
+                      grid: {
+                          left: '3%',
+                          right: '4%',
+                          bottom: 20,
+                          containLabel: true
+                      },
+                      xAxis: {
+                          type: 'value',
+                          max: newData.max
+                      },
+                      // 下方Y轴
+                      yAxis: {
+                          type:'category',
+                          data:newData.yAxis,
+                          axisLabel: {
+                            fontSize: 16,
+                           // fontWeight: "bold"
+                          }
+                      },
+                      series: [
+                          {
+                              name: '计划工单数',
+                              type: 'bar',
+                              data: newData.planData,
+                              label: {
+                                show: true,
+                                position: 'right',
+                                fontSize:14,
+                                fontWeight: "bold",
+                                color:  "rgb(92,144,247)"
+                              },
+                            barWidth: 20,
+                            itemStyle: {
+                              normal: {
+                                color:  "rgb(92,144,247)"
+                              }
+                            },
+                          },
+                          {
+                            name: '工单达成数',
+                            type: 'bar',
+                            data: newData.actData,
+                            label: {
+                              show: true,
+                              position: 'right',
+                              fontSize:14,
+                              fontWeight: "bold",
+                              color:  "rgb(158,252,184)"
+                            },
+                            barWidth: 20,
+                            itemStyle: {
+                              normal: {
+                                color:  "rgb(158,252,184)"
+                              }
+                            },
+                          }
+                      ]
+                    }
+                },
+                immediate: true,
+                deep: true
+            }
+        }
+    }
+</script>

src/components/zxshopechart/up4Chart/chart.vue

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

@@ -0,0 +1,86 @@
+<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/router/index.js

@@ -42,6 +42,14 @@ const routes = [{
     title: "品质看板",
     requireAuth: true // 标识该路由是否需要登录
   }
+},{
+  path: '/zxshop',
+  name: 'zxshop',
+  component: () => import('../views/zxshop/index.vue'),
+  meta: {
+    title: "整线看板",
+    requireAuth: true // 标识该路由是否需要登录
+  }
 }]
 const router = new VueRouter({
   routes

src/views/login.vue

@@ -76,6 +76,7 @@
                     {label: '车间看板', value: '车间看板'},
                     {label: '产线看板', value: '产线看板'},
                     {label: '品质看板', value: '品质看板'},
+                    {label: '整线看板', value: '整线看板'},
                    /* {label: '设备看板', value: '设备看板'}*/
                 ],
                 factoryoptions:[],  //产区
@@ -153,6 +154,8 @@
                                         this.$router.push({path: this.redirect || '/shop'});
                                     }else if(this.loginForm.type =='品质看板'){
                                         this.$router.push({path: this.redirect || '/quality'});
+                                    }else if(this.loginForm.type =='整线看板'){
+                                      this.$router.push({path: this.redirect || '/zxshop'});
                                     }
                                 }else{
                                     this.$message.error(res.reason);

src/views/prodline/index.vue

@@ -49,6 +49,7 @@
                   <el-dropdown-menu slot="dropdown">
                     <el-dropdown-item class="dropdownitem"><router-link to="shop">车间看板</router-link></el-dropdown-item>
                     <el-dropdown-item class="dropdownitem"><router-link to="quality">品质看板</router-link></el-dropdown-item>
+                    <el-dropdown-item class="dropdownitem"><router-link to="zxshop">整线看板</router-link></el-dropdown-item>
 <!--                    <el-dropdown-item class="dropdownitem"><router-link to="device">设备看板</router-link></el-dropdown-item>-->
                   </el-dropdown-menu>
               </el-dropdown>

src/views/quality/index.vue

@@ -50,6 +50,7 @@
                   <el-dropdown-menu slot="dropdown">
                     <el-dropdown-item class="dropdownitem"><router-link to="shop">车间看板</router-link></el-dropdown-item>
                     <el-dropdown-item class="dropdownitem"><router-link to="prodline">产线看板</router-link></el-dropdown-item>
+                    <el-dropdown-item class="dropdownitem"><router-link to="zxshop">整线看板</router-link></el-dropdown-item>
 <!--                    <el-dropdown-item class="dropdownitem"><router-link to="device">设备看板</router-link></el-dropdown-item>-->
                   </el-dropdown-menu>
               </el-dropdown>

src/views/shop/index.vue

@@ -49,6 +49,7 @@
                   <el-dropdown-menu slot="dropdown">
                     <el-dropdown-item class="dropdownitem"><router-link to="prodline">产线看板</router-link></el-dropdown-item>
                     <el-dropdown-item class="dropdownitem"><router-link to="quality">品质看板</router-link></el-dropdown-item>
+                    <el-dropdown-item class="dropdownitem"><router-link to="zxshop">整线看板</router-link></el-dropdown-item>
 <!--                    <el-dropdown-item class="dropdownitem"><router-link to="device">设备看板</router-link></el-dropdown-item>-->
                   </el-dropdown-menu>
               </el-dropdown>
@@ -206,7 +207,7 @@ export default {
                   this.shopdata = [];
                 }
                 this.wccode = sessionStorage.getItem("wc_code");
-                this.getLines();
+                //this.getLines();
               },(result)=>{
                 console.error(result)
               });

src/views/zxshop/bottom1.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/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);
+            },
+
+            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/bottom2.vue

@@ -0,0 +1,76 @@
+<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>
+      <div class="body-box">
+        <div class="pt-2" >
+          <Bottom2Chart />
+        </div>
+      </div>
+    </div>
+  </div>
+</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);
+      },
+      async getdata() {
+      }
+    }
+  }
+</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 ;
+    }
+    .text {
+      color: #c3cbde;
+      //  font-size: 15px;
+    }
+    .body-box {
+      border-radius: 10px;
+      overflow: hidden;
+    }
+
+  }
+</style>

src/views/zxshop/index.vue

@@ -0,0 +1,253 @@
+<template>
+  <div id="index" ref="appRef">
+    <div class="bg">
+      <dv-loading v-if="loading">Loading...</dv-loading>
+      <div v-else class="host-body">
+        <div class="d-flex jc-center">
+          <dv-decoration-10 class="dv-dec-10" />
+          <div class="d-flex jc-center">
+            <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']"
+              />
+            </div>
+            <dv-decoration-8
+              class="dv-dec-8"
+              :reverse="true"
+              :color="decorationColor"
+            />
+          </div>
+          <dv-decoration-10 class="dv-dec-10-s" />
+        </div>
+
+        <!-- 第二行 -->
+        <div class="d-flex jc-between px-2">
+          <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;">次元之造智能工厂</span>
+            </div>
+            <div class="react-left ml-3">
+              <span class="text">生产实况分析</span>
+            </div>
+          </div>
+          <div class="d-flex aside-width">
+            <div class="react-right bg-color-r mr-3">
+              <span class="text" @click="fullScreen" ref="fullScreen">全屏</span>
+              <span class="text" @click="exitFullScreen" ref="exitFullScreen"  style="display: none">退出全屏</span>
+            </div>
+            <div class="react-right mr-4 react-l-s" style="width: 900px">
+              <span class="react-after"></span>
+              <el-dropdown class="dropdown">
+                <span class="el-dropdown-link" ref="echarType">
+                  整线看板<i class="el-icon-arrow-down el-icon--right"></i>&nbsp;&nbsp;&nbsp;&nbsp;
+                </span>
+                  <el-dropdown-menu slot="dropdown">
+                    <el-dropdown-item class="dropdownitem"><router-link to="prodline">产线看板</router-link></el-dropdown-item>
+                    <el-dropdown-item class="dropdownitem"><router-link to="shop">车间看板</router-link></el-dropdown-item>
+                    <el-dropdown-item class="dropdownitem"><router-link to="quality">品质看板</router-link></el-dropdown-item>
+<!--                    <el-dropdown-item class="dropdownitem"><router-link to="device">设备看板</router-link></el-dropdown-item>-->
+                  </el-dropdown-menu>
+              </el-dropdown>
+
+              <el-select v-model="ulcode" class="dropdown" @change ="handleBlur2" style="width: 150px">
+                <el-option
+                    v-for="item in uldata"
+                    :key="item.UL_CODE"
+                    :label="item.UL_NAME"
+                    :value="item.UL_CODE"
+                ></el-option>
+              </el-select>
+
+              <span class="text">&nbsp;&nbsp;&nbsp;&nbsp;</span>
+              <span class="text">{{ dateYear }} {{ dateWeek }} {{ dateDay }}</span>
+            </div>
+          </div>
+        </div>
+
+        <div class="body-box">
+          <!-- 上面 -->
+          <div class="content-box">
+              <div>
+                <dv-border-box-12>
+                  <up1 />
+                </dv-border-box-12>
+              </div>
+              <div>
+                <dv-border-box-12 >
+                  <up2 />
+                </dv-border-box-12>
+              </div>
+              <div>
+                <dv-border-box-12>
+                  <up3 />
+                </dv-border-box-12>
+              </div>
+            <div>
+              <dv-border-box-12>
+                <up4 />
+              </dv-border-box-12>
+            </div>
+          </div>
+          <!-- 下面 -->
+          <div class="bottom-box">
+              <dv-border-box-12>
+                <bottom1 />
+              </dv-border-box-12>
+            <dv-border-box-12>
+              <bottom2 />
+            </dv-border-box-12>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+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 {mapMutations, mapState} from "vuex"
+
+export default {
+  mixins: [ drawMixin ],
+  computed: {
+    ...mapState(['user','factoryoptions','factory']),
+  },
+  data() {
+    return {
+      timing: null,
+      loading: true,
+      dateDay: null,
+      dateYear: null,
+      dateWeek: null,
+      weekday: ['周日', '周一', '周二', '周三', '周四', '周五', '周六'],
+      decorationColor: ['#568aea', '#000000'],
+      ulcode:'',
+      uldata:[]
+    }
+  },
+  components: {
+    up1,
+    up2,
+    up3,
+    up4,
+    bottom1,
+    bottom2
+  },
+  created() {
+     this.getuldata();
+  },
+  mounted() {
+    this.timeFn()
+    this.cancelLoading()
+  },
+  beforeDestroy () {
+    clearInterval(this.timing)
+    clearInterval(this.intervalId)
+  },
+  methods: {
+    ...mapMutations(['setFactory']),
+    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)
+    },
+    cancelLoading() {
+      setTimeout(() => {
+        this.loading = false
+      }, 5000)
+    },
+   /* handleBlur (val){
+      this.setFactory(val);
+      location.reload();
+    },*/
+    handleBlur2 (val){
+      sessionStorage.setItem('ul_code',val);
+      this.$cookie.set("ul_code", val, {
+        expires: 30,
+      });
+      location.reload();
+    },
+    getuldata (){
+      this.$http.get("kanban/getAllUlData.action").then(
+              (res)=>{
+                if(res.data.uldata) {
+                  const data = res.data.uldata;
+                  if(this.$cookie.get("ul_code") && data.some(item => item.UL_CODE === this.$cookie.get("ul_code")) ){
+                    sessionStorage.setItem('ul_code', this.$cookie.get("ul_code"));
+                  }else {
+                    sessionStorage.setItem('ul_code', data[0].UL_CODE);
+                    this.$cookie.set("ul_code", data[0].UL_CODE, {
+                      expires: 30,
+                    });
+                  }
+                  this.uldata = data;
+                }else{
+                  sessionStorage.setItem('ul_code','');
+                  this.uldata = [];
+                }
+                this.ulcode = sessionStorage.getItem("ul_code");
+              },(result)=>{
+                console.error(result)
+              });
+    },
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@import '../../assets/scss/indexshop.scss';
+.dropdown{
+  font-size: 18px;
+  color: #568aea;
+  transform: skewX(45deg);
+  ::v-deep .el-select-dropdown {
+    /* // 若不将下拉框的背景颜色设置为：transparent，那么做不出来半透明的效果；
+    // 因为其最终的显示为：下拉框有一个背景颜色且下拉框的字体有一个背景颜色，重叠后的效果展示； */
+    border: 1px solid #0f1325;
+    background: #04308D !important;
+  }
+
+  ::v-deep .el-input__inner {
+    background-color: #0f1325;
+    color: #fff;
+    border: 1px solid #0f1325;
+  }
+
+  .el-select-dropdown__item {
+    color: #fff;
+    background-color: #0f1325;
+  }
+  ::v-deep .el-select-dropdown {
+    background-color: transparent;
+    border: 1px solid #0f1325;
+  }
+  ::v-deep.el-select-dropdown__list {
+    padding: 0;
+  }
+  ::v-deep.el-popper[x-placement^="bottom"] {
+    margin-top: 0px;
+  }
+  ::v-deep.el-popper .popper__arrow,
+  ::v-deep.el-popper .popper__arrow::after {
+    display: none;
+  }
+  .el-select-dropdown__item:hover {
+    background-color: rgba(0, 225, 219, 0.690196078431373);
+  }
+}
+
+</style>

src/views/zxshop/up1.vue

@@ -0,0 +1,116 @@
+<template>
+  <div id="up1">
+    <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>
+      </div>
+      <div class="body-box">
+        <div class="pt-2 " >
+          <BarChart :bardata="bardata"  />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import BarChart from '@/components/zxshopechart/up1Chart'
+import {mapState} from "vuex";
+
+export default {
+  computed: {
+    ...mapState(['factory']),
+  },
+  data() {
+    return {
+      timing:null,
+      bardata : {
+        planData:[],
+        actData:[],
+        yAxis:[],
+        max : 1000,
+      }
+    }
+  },
+  components: {BarChart},
+  mounted() {
+    this.refreshdata();
+  },
+  beforeDestroy () {
+    clearInterval(this.timing)
+  },
+  methods: {
+    refreshdata() {
+      this.setdata(); //获取数据
+      this.timing = setInterval(() => {
+        this.setdata(); //获取-主题词
+      }, 10000);
+    },
+
+    async setdata() {
+      //当前工单
+      var caller = 'KB!UpLineLinePlan';
+      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);
+            if(dataList.length>0){
+              let yAxis0 = new Array();
+              let series0 = new Array();
+              let series1 = new Array();
+              var maxnumber=0;
+              for (let index = 0; index < dataList.length; index++) {
+                const element = dataList[index];
+                yAxis0.push(element.v_licode);
+                //计划
+                series0.push(element.v_planqty);
+                if(element.v_planqty>maxnumber){
+                  maxnumber= element.v_planqty;
+                }
+                //实际
+                series1.push(element.v_actqty);
+                if(element.v_actqty>maxnumber){
+                  maxnumber= element.v_actqty;
+                }
+              }
+              this.bardata.planData = series0;
+              this.bardata.actData = series1;
+              this.bardata.yAxis = yAxis0;
+              this.bardata.max = Math.ceil(maxnumber*1.2);
+            }
+          },(result)=>{
+            console.error(result)
+          }
+      );
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+$box-height: 475px;
+$box-width: 100%;
+#up1 {
+  padding: 13px;
+  height: $box-height;
+  font-size: 32px;
+  width: $box-width;
+  border-radius: 5px;
+  .bg-color-black {
+    height: $box-height - 25px;
+    //width: $box-width - 10px;
+    border-radius: 10px;
+    padding: 5px ;
+  }
+
+  .text {
+    color: #c3cbde;
+  }
+  .body-box {
+    border-radius: 10px;
+    overflow: hidden;
+  }
+}
+</style>

src/views/zxshop/up2.vue

@@ -0,0 +1,115 @@
+<template>
+  <div id="up2">
+    <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>
+      </div>
+      <div class="body-box">
+        <div class="pt-2 " >
+          <BarChart :bardata="bardata"  />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import BarChart from '@/components/zxshopechart/up2Chart'
+import {mapState} from "vuex";
+
+export default {
+  computed: {
+    ...mapState(['factory']),
+  },
+  data() {
+    return {
+      timing:null,
+      bardata : {
+        planData:[],
+        actData:[],
+        yAxis:[],
+        max : 1000,
+      }
+    }
+  },
+  components: {BarChart},
+  mounted() {
+    this.refreshdata();
+  },
+  beforeDestroy () {
+    clearInterval(this.timing)
+  },
+  methods: {
+    refreshdata() {
+      this.setdata(); //获取数据
+      this.timing = setInterval(() => {
+        this.setdata(); //获取-主题词
+      }, 10000);
+    },
+
+    async setdata() {
+      //本月计划达成统计
+      var caller = 'KB!UpLineLineMonthPlan';
+      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);
+            if(dataList.length>0){
+              let yAxis0 = new Array();
+              let series0 = new Array();
+              let series1 = new Array();
+              var maxnumber=0;
+              for (let index = 0; index < dataList.length; index++) {
+                const element = dataList[index];
+                yAxis0.push(element.v_licode);
+                //计划
+                series0.push(element.v_planqty);
+                if(element.v_planqty>maxnumber){
+                  maxnumber= element.v_planqty;
+                }
+                //实际
+                series1.push(element.v_actqty);
+                if(element.v_actqty>maxnumber){
+                  maxnumber= element.v_actqty;
+                }
+              }
+              this.bardata.planData = series0;
+              this.bardata.actData = series1;
+              this.bardata.yAxis = yAxis0;
+              this.bardata.max = Math.ceil(maxnumber*1.2);
+            }
+          },(result)=>{
+            console.error(result)
+          }
+      );
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+$box-height: 475px;
+$box-width: 100%;
+#up2 {
+  padding: 13px;
+  height: $box-height;
+  font-size: 32px;
+  width: $box-width;
+  border-radius: 5px;
+  .bg-color-black {
+    height: $box-height - 25px;
+    //width: $box-width - 10px;
+    border-radius: 10px;
+    padding: 5px;
+  }
+  .text {
+    color: #c3cbde;
+  }
+  .body-box {
+    border-radius: 10px;
+    overflow: hidden;
+  }
+}
+</style>

src/views/zxshop/up3.vue

@@ -0,0 +1,103 @@
+<template>
+  <div id="up3">
+    <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>
+      </div>
+      <div class="body-box ranking">
+        <dv-scroll-ranking-board class="dv-scr-rank-board mt-1" :config="ranking" ref="scroll-ranking-board"/>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+
+import {mapState} from "vuex";
+
+export default {
+  computed: {
+    ...mapState(['factory']),
+  },
+  data() {
+    return {
+      timing:null,
+      ranking: {
+        data: [],
+        carousel: 'single',
+        rowNum:6,
+      },
+    }
+  },
+  components: {},
+  mounted() {
+    this.refreshdata();
+  },
+  beforeDestroy () {
+    clearInterval(this.timing)
+  },
+  methods: {
+    refreshdata() {
+      this.settestdata(); //获取数据
+      this.timing = setInterval(() => {
+        this.settestdata(); //获取-主题词
+      }, 10000);
+    },
+    async settestdata() {
+      //工序直通率
+      var caller = 'KB!UpLineKeyStepRate';
+      //关键工序直通率
+      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 datas = new Array();
+            for (let index = 0; index < dataList.length; index++) {
+              const element = dataList[index];
+              datas.push({
+                name:"<span  class='fs-md'>" + element.v_stepname+"<span/>" ,
+                value:"<span  class='fs-md'>" + element.v_ztrate +"<span/>",
+              });
+            }
+            this.ranking.data = datas;
+            this.ranking = { ...this.ranking };
+           // console.log(this.ranking);
+          },(result)=>{
+            console.error(result)
+          }
+      );
+    },
+
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+$box-height: 475px;
+$box-width: 100%;
+#up3 {
+  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;
+    width: $box-width;
+    .body-box {
+      margin-bottom: 7px;
+      width: 340px;
+      .dv-scr-rank-board {
+        height: 450px;
+      }
+    }
+  }
+  ::v-deep .dv-scroll-ranking-board .ranking-info .rank{width:40px;color: #18a158;font-size: 15px;}
+  ::v-deep .dv-scroll-ranking-board .ranking-column{border-bottom:2px solid rgb(25, 161, 95,.5);margin-top:5px}
+  ::v-deep .dv-scroll-ranking-board .ranking-column .inside-column{position:relative;height:7px;background-color: #19a15f;margin-bottom:2px;border-radius:1px;overflow:hidden}
+}
+</style>

src/views/zxshop/up4.vue

@@ -0,0 +1,146 @@
+<template>
+  <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>
+      </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>
+        </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>
+  </div>
+</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,
+    }
+  },
+  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%;
+#up4 {
+  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: #FFE900;
+    }
+  }
+  .down{
+    height: 200px;
+    ::v-deep .dv-scroll-board .header{
+      font-size: 19px;
+    }
+    .dv-scroll-board {
+      height: 200px;
+    }
+  }
+
+}
+</style>