优化测试看板

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

@@ -61,8 +61,8 @@ export default {
               color: "#fff",
               fontSize: 18,
             },
-            right:'5%',
-            top:'middle'
+            bottom:'0',
+            left:'25%'
           },
           series: [
             {
@@ -71,7 +71,9 @@ export default {
               radius: [15, 60],
               roseType: "area",
               // center: ["50%", "30%"],
-              width:'70%',
+              width:'100%',
+              height:"90%",
+              top: "-10%",
               data: newData.seriesData,
               label: {
                 fontSize: 18

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

@@ -61,8 +61,8 @@ export default {
               color: "#fff",
               fontSize: 18,
             },
-            right:'5%',
-            top:'middle'
+            bottom:'0',
+            left:'25%'
           },
           series: [
             {
@@ -71,7 +71,9 @@ export default {
               radius: [15, 60],
               roseType: "area",
               // center: ["50%", "30%"],
-              width:'70%',
+              width:'100%',
+              height:"90%",
+              top: "-10%",
               data: newData.seriesData,
               label: {
                 fontSize: 18

src/components/testShopEchart/centerRight2Chart/chart.vue

@@ -28,7 +28,7 @@ export default {
         legend: {
           show:false,
           textStyle: {
-            fontSize: 18
+            fontSize: 16
           },
           itemWidth: 25,
           itemHeight: 15
@@ -37,7 +37,7 @@ export default {
           left: '3%',
           right: '4%',
           bottom: '3%',
-          top: 30,
+          top: 55,
           containLabel: true
         },
         xAxis: [

src/components/testShopEchart/lineTable/index.vue

@@ -0,0 +1,99 @@
+<template>
+  <Echart
+    :options="options"
+    id="bottom2Chart"
+    height="100%"
+    width="100%"
+    ref="column-board"></Echart>
+</template>
+
+<script>
+import Echart from "@/common/echart/index.vue";
+
+export default {
+  data() {
+    return {
+      options: {},
+      // 定义颜色
+    };
+  },
+  components: {
+    Echart,
+  },
+  props: {
+    linedata: {
+      type: Object,
+      default: () => ({}),
+    },
+  },
+  watch: {
+    linedata: {
+      handler(newData) {
+        this.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: newData.xAxiss,
+              axisLabel: {
+                fontSize: 16,
+                fontWeight: "bold",
+              },
+            },
+          ],
+          yAxis: [
+            {
+              type: "value",
+              axisLabel: {
+                fontSize: 16,
+              },
+              min: 60,
+              splitLine: {
+                show: true,
+                lineStyle: {
+                  // 使用深浅的间隔色
+                  type: "dashed",
+                  color: ["#aaa", "#aaa"],
+                },
+              },
+            },
+          ],
+          series: newData.series,
+        };
+      },
+      immediate: true,
+      deep: true,
+    },
+  },
+  mounted() {},
+  beforeDestroy() {
+    clearInterval(this.intervalId);
+    this.chart.dispose();
+    this.chart.clear();
+    this.chart = null;
+  },
+  methods: {
+    // 根据自己的业务情况修改
+  },
+};
+</script>
+
+<style lang="scss" scoped></style>

src/views/assembly/bottomRight.vue

@@ -19,7 +19,7 @@
 </template>
 
 <script>
-import BottomRightChart from "../../components/assemblyechart/bottom/bottomRightChart";
+import BottomRightChart from "../../components/testShopEchart/lineTable/index.vue"
 import {mapState} from "vuex";
 export default {
   computed: {

src/views/testShop/bottomRight.vue

@@ -0,0 +1,149 @@
+<template>
+  <div id="bottomRight">
+    <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">近7天产线良率统计</span>
+      </div>
+      <BottomRightChart :linedata="linedata" />
+    </div>
+  </div>
+</template>
+
+<script>
+import BottomRightChart from "../../components/testShopEchart/lineTable/index.vue";
+import {mapState} from "vuex";
+export default {
+  computed: {
+    ...mapState(['factory']),
+  },
+  components: {
+    BottomRightChart
+  },
+  data() {
+    return {
+      timing:null,
+      linedata :{
+        series : null,
+        xAxiss  :null,
+      }
+    }
+  },
+  mounted() {
+    this.refreshdata()
+  },
+  beforeDestroy () {
+    clearInterval(this.timing)
+  },
+  methods: {
+    refreshdata() {
+      this.getdata(); //获取-数据
+      this.timing = setInterval(() => {
+        this.getdata(); //获取--数据
+      }, 5000);
+    },
+
+    async getdata() {
+      var caller = 'ZZ!30DaysData';
+      await this.$http.get("kanban/datalist.action?caller="+caller+"&_noc=1&page=1&pageSize=100",{
+        params: {
+          condition:  "V_LICODE in ('" + sessionStorage.getItem('li_code') + "','CSC','CSB')"
+        }
+      }).then((result)=>{
+            let dataList = JSON.parse(result.data.data);
+            let series = new Array();
+            let xAxis0 = new Array();
+            //获取总共有多少个线别
+            const groupByLonglineMap = dataList.reduce((result, currentItem) => {
+              // 使用 key 函数提取分组键
+              const groupKey = currentItem["v_liname"];
+              // 初始化分组数组（如果尚未创建）
+              if (!result[groupKey]) {
+                result[groupKey] = [];
+              }
+              // 将当前项添加到分组数组
+              result[groupKey].push(currentItem);
+              return result;
+            }, {});
+
+            const longlines = Array.from(new Set(dataList.map(item => item['v_liname']))).join().split(",");
+            let seriesdata = new Array();
+            for (let value of longlines) {
+              let se = new Object();
+              se.name  = value;
+              se.data = new Array();
+              seriesdata.push(se);
+            }
+            //30天内
+            for (let i =7 ;i>=0;i--){
+              let formattedDate;
+              if(i == 0){
+                formattedDate = this.$moment().format('MM/DD');
+              }else{
+                formattedDate = this.$moment().subtract(i, 'days').format('MM/DD')
+              }
+              xAxis0.push(formattedDate);
+              //获取分组当天数据
+              for (let value of seriesdata) {
+                let dataall = groupByLonglineMap[value.name];
+                let data0 = 100;
+                if(null != dataall) {
+                  let datam = dataall.filter(item => item.v_ymd1 == formattedDate);
+                  if(datam.length>0){
+                    data0 = datam[0].v_accuoutqty;
+                  }
+                }
+                value.data.push(data0);
+              }
+            }
+
+            for (let value of seriesdata) {
+              series.push({
+                name: value.name,
+                type: 'line',
+                data: value.data,
+                symbolSize: 4,
+                lineStyle: {
+                  width: 3
+                },
+                emphasis: {
+                  focus: 'series'
+                },
+                label: {
+                  show: true, // 显示标签
+                  position: 'top', // 标签位置，可以是'top', 'bottom', 'left', 'right'
+                  formatter: '{c}%' // 格式化显示，c代表数据值
+                }
+              });
+            }
+            this.linedata.series = series;
+            this.linedata.xAxiss = xAxis0;
+          },(result)=>{
+            console.error(result)
+          }
+      );
+    }
+  }
+};
+</script>
+
+<style lang="scss" class>
+#bottomRight {
+  padding: 13px;
+  height: 100%;
+  width: 100%;
+  border-radius: 5px;
+  .bg-color-black {
+    height: 100%;
+    //width: $box-width - 10px;
+    border-radius: 10px;
+    padding: 5px ;
+  }
+  .body-box {
+    border-radius: 10px;
+    overflow: hidden;
+  }
+}
+</style>

src/views/testShop/index.vue

@@ -60,19 +60,35 @@
 
         <div class="body-box">
           <div>
-            <dv-border-box-12>
+            <dv-border-box-12 style="width: 25%;">
               <chartLeft />
             </dv-border-box-12>
-            <dv-border-box-12>
+            <dv-border-box-12 style="width: 25%;">
               <chartRight />
             </dv-border-box-12>
+            <dv-border-box-12 style="width: 50%; overflow: hidden;">
+              <div class="d-flex pt-2 pl-2" style="height: 5%;">
+                <span>
+                  <icon name="chart-line" class="text-icon"></icon>
+                </span>
+                <div class="d-flex">
+                  <span class="fs-xl text mx-2">线体当日产量统计</span>
+                </div>
+              </div>
+              <dv-scroll-board class="dv-scr-board" style="height: 90%;" :config="config" ref="scroll-board" />
+            </dv-border-box-12>
           </div>
           <div>
-            <dv-border-box-12>
-              <barLeft />
-            </dv-border-box-12>
-            <dv-border-box-12>
-              <barRight />
+            <div>
+              <dv-border-box-12 style="height: 50%;">
+                <barLeft />
+              </dv-border-box-12>
+              <dv-border-box-12 style="height: 50%;">
+                <barRight />
+              </dv-border-box-12>
+            </div>
+            <dv-border-box-12 >
+              <bottomRight />
             </dv-border-box-12>
           </div>
         </div>
@@ -88,6 +104,7 @@ import chartLeft from "./chartLeft.vue";
 import chartRight from "./chartRight.vue";
 import barLeft from "./barLeft.vue";
 import barRight from "./barRight.vue";
+import bottomRight from './bottomRight.vue'
 
 export default {
   mixins: [drawMixin],
@@ -101,6 +118,19 @@ export default {
       weekday: ["周日", "周一", "周二", "周三", "周四", "周五", "周六"],
       decorationColor: ["#568aea", "#000000"],
       isFullScreen: false,
+      config: {
+        header:  ['线别', '投入','产出', '不良','良率%','计划数','达成率%'],
+        data: [
+        ],
+        rowNum: 2, //表格行数
+        headerHeight: 35,
+        headerBGC: '#0f1325', //表头
+        oddRowBGC: '#0f1325', //奇数行
+        evenRowBGC: '#171c33', //偶数行
+        columnWidth: [110,100,100,80,90,100,90],
+        align: ['center']
+      },
+      linename:11,
     };
   },
   components: {
@@ -108,6 +138,7 @@ export default {
     chartRight,
     barLeft,
     barRight,
+    bottomRight,
   },
   created() {
     this.getLines();
@@ -119,6 +150,7 @@ export default {
     this.$nextTick(() => {
       this.fullScreen();
     });
+    this.refreshdata()
   },
   beforeDestroy() {
     clearInterval(this.timing);
@@ -191,6 +223,56 @@ export default {
         }
       );
     },
+    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>
@@ -226,6 +308,12 @@ export default {
     height: 50px;
   }
 }
+.dv-scr-board {
+  width: 98%;
+  height: 90%;
+  margin: auto;
+  margin-top: 10px;
+}
 
 .dropdown {
   font-size: 18px;