次元看板--增加品质看板

src/assets/scss/indexquality.scss

@@ -0,0 +1,144 @@
+#index {
+  color: #d3d6dd;
+  width: 1920px;
+  height: 1080px;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  transform-origin: left top;
+  overflow: hidden;
+  
+  .bg {
+    width: 100%;
+    height: 100%;
+    padding: 16px 16px 0 16px;
+    background-image: url("../../assets/pageBg.png");
+    background-size: cover;
+    background-position: center center;
+  }
+
+  .host-body {
+    .dv-dec-10,
+    .dv-dec-10-s {
+      width: 33.3%;
+      height: 5px;
+    }
+    .dv-dec-10-s {
+      transform: rotateY(180deg);
+    }
+    .dv-dec-8 {
+      width: 200px;
+      height: 50px;
+    }
+    .title {
+      position: relative;
+      width: 500px;
+      text-align: center;
+      background-size: cover;
+      background-repeat: no-repeat;
+
+      .title-text {
+        font-size: 26px;
+        position: absolute;
+        bottom: 0;
+        left: 50%;
+        transform: translate(-50%);
+      }
+
+      .dv-dec-6 {
+        position: absolute;
+        bottom: -30px;
+        left: 50%;
+        width: 250px;
+        height: 8px;
+        transform: translate(-50%);
+      }
+    }
+
+    // 第二行
+    .aside-width {
+      width: 40%;
+    }
+    .react-r-s,
+    .react-l-s {
+      background-color: #0f1325;
+    }
+
+    // 平行四边形
+    .react-right {
+      &.react-l-s {
+        text-align: right;
+        width: 500px;
+      }
+      font-size: 18px;
+      width: 300px;
+      line-height: 50px;
+      text-align: center;
+      transform: skewX(-45deg);
+
+      .react-after {
+        position: absolute;
+        right: -25px;
+        top: 0;
+        height: 50px;
+        width: 50px;
+        background-color: #0f1325;
+        transform: skewX(45deg);
+      }
+
+      .text {
+        display: inline-block;
+        transform: skewX(45deg);
+      }
+    }
+
+    .react-left {
+      &.react-l-s {
+        width: 500px;
+        text-align: left;
+      }
+      font-size: 20px;
+      width: 300px;
+      height: 50px;
+      line-height: 50px;
+      text-align: center;
+      transform: skewX(45deg);
+      background-color: #0f1325;
+
+      .react-left {
+        position: absolute;
+        left: -25px;
+        top: 0;
+        height: 50px;
+        width: 50px;
+        background-color: #1a5cd7;
+        transform: skewX(-45deg);
+      }
+
+      .text {
+        display: inline-block;
+        transform: skewX(-45deg);
+      }
+    }
+
+    .body-box {
+      margin-top: 10px;
+      display: flex;
+      flex-direction: column;
+
+      //下方区域的布局
+      .content-box {
+        display: grid;
+        grid-template-columns: 1fr 1fr 1fr;
+      }
+
+      // 底部数据
+      .bottom-box {
+       // margin-top: 10px;
+        display: grid;
+        grid-template-columns: 1fr 1fr 1fr;
+      }
+    }
+  }
+}

src/components/qualityechart/bottom1Chart/chart.vue

@@ -0,0 +1,178 @@
+<template>
+  <div>
+    <Echart
+      :options="options"
+      id="bottom1Chart"
+      height="420px"
+      width="590px"
+    ></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,
+          series: [
+           /* {
+              type: "pie",
+              radius: [15, 60],
+              roseType: "area",
+              center: ["50%", "30%"],
+              data: newData.seriesData,
+              label: {
+                fontSize: 13,
+               /!* formatter:function(param){
+                  let text = param.data.name;
+                  if (text.length < 8) {
+                    return text ;
+                  } else {
+                    return text.substring(0, 8) + '...' ;
+                  }
+                },*!/
+              },
+            },*/
+            {
+              type: 'pie',
+              radius: [15, 60],
+              roseType: "area",
+              //radius: ['10%', '20%'],
+              center: ['25%', '30%'],
+              startAngle: 180,
+              endAngle: 360,
+              data: newData.seriesData,
+              label: {
+                fontSize: 13,
+                formatter: function (param) {
+                  let text = param.data.name;
+                  if (text.length <  4) {
+                    return text;
+                  } else {
+                    return text.substring(0,  4) + '...';
+                  }
+                },
+              }
+              // No encode specified, by default, it is '2012'.
+            },
+            {
+              type: 'pie',
+              radius: [15, 60],
+              roseType: "area",
+              //radius: ['10%', '20%'],
+              center: ['75%', '30%'],
+              encode: {
+                itemName: 'product',
+                value: '2013'
+              },
+              startAngle: 180,
+              endAngle: 360,
+              data: newData.seriesData,
+              label: {
+                fontSize: 13,
+                formatter: function (param) {
+                  let text = param.data.name;
+                  if (text.length <  4) {
+                    return text;
+                  } else {
+                    return text.substring(0,  4) + '...';
+                  }
+                },
+              }
+            },
+            {
+              type: 'pie',
+              radius: [15, 60],
+              roseType: "area",
+              //radius: ['10%', '20%'],
+              center: ['25%', '75%'],
+              encode: {
+                itemName: 'product',
+                value: '2014'
+              },
+              startAngle: 180,
+              endAngle: 360,
+              data: newData.seriesData,
+              label: {
+                fontSize: 13,
+                formatter: function (param) {
+                  let text = param.data.name;
+                  if (text.length <  4) {
+                    return text;
+                  } else {
+                    return text.substring(0,  4) + '...';
+                  }
+                },
+              }
+            },
+            {
+              type: 'pie',
+              radius: [15, 60],
+              roseType: "area",
+              //radius: ['10%', '20%'],
+              center: ['75%', '75%'],
+              encode: {
+                itemName: 'product',
+                value: '2015'
+              },
+              startAngle: 180,
+              endAngle: 360,
+              data: newData.seriesData,
+              label: {
+                fontSize: 15,
+                formatter: function (param) {
+                  let text = param.data.name;
+                  if (text.length < 4) {
+                    return text;
+                  } else {
+                    return text.substring(0, 4) + '...';
+                  }
+                },
+              }
+            }
+          ]
+        }
+      },
+      immediate: true,
+      deep: true
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+</style>

src/components/qualityechart/bottom1Chart/index.vue

@@ -0,0 +1,82 @@
+<template>
+  <div>
+    <Chart :cdata="cdata" />
+  </div>
+</template>
+
+<script>
+import Chart from './chart.vue';
+
+export default {
+  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!QualityTopFiveBad';
+      await this.$http.get("kanban/datalist.action?caller="+caller+"&_noc=1&page=1&pageSize=100",
+              {
+                params: {
+                  condition: "1=1",
+                }
+              }).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/qualityechart/bottom3Chart/chart.vue

@@ -0,0 +1,388 @@
+<template>
+  <div>
+    <Echart
+        :options="options"
+        id="bottom3Chart"
+        height="220px"
+        width="628px"
+    ></Echart>
+  </div>
+</template>
+
+<script>
+import Echart from '@/common/echart'
+export default {
+  data() {
+    return {
+      options: {},
+      // 定义颜色
+      colorList: {
+        linearYtoG: {
+          type: 'linear',
+          x: 0,
+          y: 0,
+          x2: 1,
+          y2: 1,
+          colorStops: [
+            {
+              offset: 0,
+              color: '#f5b44d'
+            },
+            {
+              offset: 1,
+              color: '#28f8de'
+            }
+          ]
+        },
+        linearGtoB: {
+          type: 'linear',
+          x: 0,
+          y: 0,
+          x2: 1,
+          y2: 0,
+          colorStops: [
+            {
+              offset: 0,
+              color: '#43dfa2'
+            },
+            {
+              offset: 1,
+              color: '#28f8de'
+            }
+          ]
+        },
+        linearBtoG: {
+          type: 'linear',
+          x: 0,
+          y: 0,
+          x2: 1,
+          y2: 0,
+          colorStops: [
+            {
+              offset: 0,
+              color: '#1c98e8'
+            },
+            {
+              offset: 1,
+              color: '#28f8de'
+            }
+          ]
+        },
+        areaBtoG: {
+          type: 'linear',
+          x: 0,
+          y: 0,
+          x2: 0,
+          y2: 1,
+          colorStops: [
+            {
+              offset: 0,
+              color: 'rgba(35,184,210,.2)'
+            },
+            {
+              offset: 1,
+              color: 'rgba(35,184,210,0)'
+            }
+          ]
+        }
+      }
+    }
+  },
+  components: {
+    Echart
+  },
+  props: {
+    cdata: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  watch: {
+    cdata: {
+      handler(newData) {
+        this.options = {
+          title: {
+            text: '',
+            textStyle: {
+              color: '#D3D6DD',
+              fontSize: 24,
+              fontWeight: 'normal'
+            },
+            subtext: '上周：'+newData.lastw + '，历史：' + newData.hisd,
+            // subtext: newData.year + '/' + newData.nowdate,
+            subtextStyle: {
+              color: '#fff',
+              fontSize: 13
+            },
+            top: 90,
+            left: 60
+          },
+          legend: {
+            top: 10,
+            left: 60,
+            orient: 'vertical',
+            itemGap: 15,
+            itemWidth: 12,
+            itemHeight: 12,
+            data: ['本周','上周','历史'],
+            textStyle: {
+              color: '#fff',
+              fontSize: 13
+            }
+          },
+          tooltip: {
+            trigger: 'item'
+          },
+          radar: {
+            center: ['68%', '27%'],
+            radius: '30%',
+            name: {
+              color: '#fff'
+            },
+            splitNumber: 8,
+            axisLine: {
+              lineStyle: {
+                color: this.colorList.linearYtoG,
+                opacity: 0.6
+              }
+            },
+            splitLine: {
+              lineStyle: {
+                color: this.colorList.linearYtoG,
+                opacity: 0.6
+              }
+            },
+            splitArea: {
+              areaStyle: {
+                color: '#fff',
+                opacity: 0.1,
+                shadowBlur: 25,
+                shadowColor: '#000',
+                shadowOffsetX: 0,
+                shadowOffsetY: 5
+              }
+            },
+            indicator: [
+              {
+                name: '来料不良',
+                max: 85
+              },
+              {
+                name: '制程不良',
+                max: 85
+              },
+              {
+                name: '设计不良',
+                max: 85
+              },
+              {
+                name: '其他',
+                max: 85
+              }
+            ],
+            axisName: {
+              fontSize: 5
+            },
+            nameGap: 8
+          },
+          grid: {
+            left: 50,
+            right: 80,
+            bottom: 30,
+            top: '60%'
+          },
+          xAxis: {
+            type: 'category',
+            position: 'bottom',
+            axisLine: true,
+            axisLabel: {
+              color: 'rgba(255,255,255,.8)',
+              fontSize: 12
+            },
+            data: newData.weekCategory
+          },
+          // 下方Y轴
+          yAxis: {
+            name: '',
+            nameLocation: 'end',
+            nameGap: 24,
+            nameTextStyle: {
+              color: 'rgba(255,255,255,.5)',
+              fontSize: 14
+            },
+            max:newData.maxData,
+            splitNumber: 4,
+            min:newData.minData,
+
+            axisLine: {
+              lineStyle: {
+                opacity: 0
+              }
+            },
+            splitLine: {
+              show: true,
+              lineStyle: {
+                color: '#fff',
+                opacity: 0.1
+              }
+            },
+            axisLabel: {
+              color: 'rgba(255,255,255,.8)',
+              fontSize: 12
+            }
+          },
+          series: [
+            {
+              name: '',
+              type: 'radar',
+              symbolSize: 0,
+              data: [
+                {
+                  value: newData.radarDataAvg,
+                  name: '本周',
+                  itemStyle: {
+                    normal: {
+                      color: '#f8d351'
+                    }
+                  },
+                  lineStyle: {
+                    normal: {
+                      opacity: 0
+                    }
+                  },
+                  areaStyle: {
+                    normal: {
+                      color: '#f8d351',
+                      shadowBlur: 25,
+                      shadowColor: 'rgba(248,211,81,.3)',
+                      shadowOffsetX: 0,
+                      shadowOffsetY: -10,
+                      opacity: 1
+                    }
+                  }
+                },
+                {
+                  value: newData.radarData,
+                  name: '上周',
+                  itemStyle: {
+                    normal: {
+                      color: '#43dfa2'
+                    }
+                  },
+                  lineStyle: {
+                    normal: {
+                      opacity: 0
+                    }
+                  },
+                  areaStyle: {
+                    normal: {
+                      color: this.colorList.linearGtoB,
+                      shadowBlur: 15,
+                      shadowColor: 'rgba(0,0,0,.2)',
+                      shadowOffsetX: 0,
+                      shadowOffsetY: 5,
+                      opacity: 0.8
+                    }
+                  }
+                }
+                , {
+                  value: newData.radarHisData,
+                  name: '历史',
+                  itemStyle: {
+                    normal: {
+                      color: '#137af4'
+                    }
+                  },
+                  lineStyle: {
+                    normal: {
+                      opacity: 0
+                    }
+                  },
+                  areaStyle: {
+                    normal: {
+                      color: '#137af4',
+                      shadowBlur: 25,
+                      shadowColor: 'rgba(159,229,245,0.3)',
+                      shadowOffsetX: 0,
+                      shadowOffsetY: -10,
+                      opacity: 1
+                    }
+                  }
+                }
+              ]
+            },
+            {
+              name: '',
+              type: 'line',
+              smooth: true,
+              symbol: 'emptyCircle',
+              symbolSize: 8,
+              itemStyle: {
+                normal: {
+                  color: '#fff'
+                }
+              },
+              lineStyle: {
+                normal: {
+                  color: this.colorList.linearBtoG,
+                  width: 3
+                }
+              },
+              areaStyle: {
+                normal: {
+                  color: this.colorList.areaBtoG
+                }
+              },
+              data: newData.weekLineData,
+              lineSmooth: true,
+              markLine: {
+                silent: true,
+                data: [
+                  {
+                    type: 'average',
+                    name: '平均值'
+                  }
+                ],
+                precision: 0,
+                label: {
+                  normal: {
+                    formatter: '平均值: \n {c}'
+                  }
+                },
+                lineStyle: {
+                  normal: {
+                    color: 'rgba(248,211,81,.7)'
+                  }
+                }
+              },
+              tooltip: {
+                position: 'top',
+                formatter: '{c} %',
+                backgroundColor: 'rgba(28,152,232,.2)',
+                padding: 6
+              }
+            },
+            {
+              name: '占位背景',
+              type: 'bar',
+              itemStyle: {
+                normal: {
+                  show: true,
+                  color: '#000',
+                  opacity: 0
+                }
+              },
+              silent: true,
+              barWidth: '50%',
+              data: newData.weekMaxData,
+              animation: false
+            }
+          ]
+        }
+      },
+      immediate: true,
+      deep: true
+    }
+  }
+}
+</script>

src/components/qualityechart/bottom3Chart/index.vue

@@ -0,0 +1,159 @@
+<template>
+  <div>
+    <Chart :cdata="cdata" />
+  </div>
+</template>
+
+<script>
+import Chart from './chart.vue'
+export default {
+  data () {
+    return {
+      drawTiming: null,
+      cdata: {
+        year: null,
+        weekCategory: [],
+        radarData: [],
+        radarDataAvg: [],
+        radarHisData:[],
+        maxData: 100,
+        minData: 97,
+        weekMaxData: [],
+        weekLineData: [],
+        lastw:0,
+        hisd:0
+      }
+    }
+  },
+  components: {
+    Chart,
+  },
+  mounted () {
+    this.drawTimingFn();
+  },
+  beforeDestroy () {
+    clearInterval(this.drawTiming);
+    clearInterval(this.intervalId);
+    this.chart.dispose()
+    this.chart.clear()
+    this.chart=null
+  },
+  methods: {
+    drawTimingFn () {
+      this.setData();
+      if (this.intervalId !== null) {
+        clearInterval(this.intervalId);
+      }
+      this.drawTiming = setInterval(() => {
+        this.setData();
+      }, 20000);
+    },
+    async setData () {
+      // 清空轮询数据
+      this.cdata.weekCategory = [];
+      this.cdata.weekMaxData = [];
+      this.cdata.weekLineData = [];
+      this.cdata.radarData = [];
+      this.cdata.radarDataAvg = [];
+      this.cdata.radarHisData = [];
+      this.cdata.lastw = 0;
+      this.cdata.hisd = 0;
+      let dateBase = new Date();
+      this.cdata.year = dateBase.getFullYear();
+      this.cdata.nowdate = (dateBase.getMonth() + 1 < 10 ? "0" + (dateBase.getMonth() + 1) : dateBase.getMonth() + 1)
+          +"/"
+          +(dateBase.getDate()  < 10 ? "0" + (dateBase.getDate()) : dateBase.getDate() );
+      //获取统计数据，上周，历史
+      await this.$http.get("kanban/datalist.action?caller=KB!QualityBadDutyInfo&_noc=1&page=1&pageSize=100&condition=1=1")
+          .then((result)=>{
+                let dataList = JSON.parse(result.data.data);
+                let lastw ;
+                let hisd;
+                for (let index = 0; index < dataList.length; index++) {
+                  const element = dataList[index];
+                  if(element.name == '上周'){
+                    lastw = element.value;
+                  }else if(element.name == '历史'){
+                    hisd = element.value;
+                  }
+                }
+                this.cdata.lastw = lastw;
+                this.cdata.hisd = hisd;
+              },(result)=>{
+                console.error(result)
+              }
+          );
+      //良率直通图
+      await this.$http.get("kanban/datalist.action?caller=KB!QualityDayOkRate&_noc=1&page=1&pageSize=100&condition=1=1")
+          .then((result)=>{
+                let dataList = JSON.parse(result.data.data);
+                let weekCategory = new Array();
+                let weekLineData = new Array();
+                let minDa = dataList[0].v_okrate ;
+                for (let index = 0; index < dataList.length; index++) {
+                  const element = dataList[index];
+                  //this.cdata.weekMaxData.push(this.cdata.maxData);
+                  //x轴数据日期
+                  weekCategory.push(element.v_md);
+                  //y轴数据
+                  weekLineData.push(element.v_okrate);
+                  if(element.v_okrate<minDa){
+                    minDa = element.v_okrate;
+                  }
+                }
+                //获取最小值，取整十的数
+                minDa = Math.floor(minDa/10)*10;
+                //this.cdata.minData = minDa;
+                this.cdata.weekCategory = weekCategory;
+                this.cdata.weekLineData = weekLineData;
+              },(result)=>{
+                console.error(result)
+              }
+          );
+      //雷达图：
+      await this.$http.get("kanban/datalist.action?caller=KB!QualityRadiusBadDuty&_noc=1&page=1&pageSize=100&condition=1=1")
+          .then((result)=>{
+                let dataList = JSON.parse(result.data.data);
+                let radarData = new Array();
+                let radarAvgData = new Array();
+                let radarHisData = new Array();
+                const element = dataList[0];
+                //来料不良
+                radarData.push(element.v_llrate);
+                //制程不良
+                radarData.push(element.v_zcrate);
+                //设计不良
+                radarData.push(element.v_sjrate);
+                //其它
+                radarData.push(element.v_othrate);
+                this.cdata.radarData=radarData;
+                //来料不良
+                radarAvgData.push(element.v_llavgrate);
+                //制程不良
+                radarAvgData.push(element.v_zcavgrate);
+                //设计不良
+                radarAvgData.push(element.v_sjavgrate);
+                //其它
+                radarAvgData.push(element.v_othavgrate);
+                this.cdata.radarDataAvg=radarAvgData;
+                //历史
+                //来料不良
+                radarHisData.push(element.v_llsumrate);
+                //制程不良
+                radarHisData.push(element.v_zcsumrate);
+                //设计不良
+                radarHisData.push(element.v_sjsumrate);
+                //其它
+                radarHisData.push(element.v_othsumrate);
+                this.cdata.radarHisData=radarHisData;
+              },(result)=>{
+                console.error(result)
+              }
+          );
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+</style>

src/components/qualityechart/up1Chart/chart.vue

@@ -0,0 +1,92 @@
+<template>
+  <div>
+    <Echart
+      :options="options"
+      id="up1Chart"
+      height="420px"
+      width="590px"
+    ></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",
+            bottom: 10,
+            x: "center",
+            data: newData.cdata,
+            textStyle: {
+              color: "#fff",
+              fontSize: 16
+            },
+          },
+          series: [
+            {
+              type: "pie",
+              radius: [15, 60],
+              roseType: "area",
+              center: ["50%", "30%"],
+              data: newData.seriesData,
+              label: {
+                fontSize: 13,
+               /* 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/qualityechart/up1Chart/index.vue

@@ -0,0 +1,82 @@
+<template>
+  <div>
+    <Chart :cdata="cdata" />
+  </div>
+</template>
+
+<script>
+import Chart from './chart.vue';
+
+export default {
+  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!QualityTopFiveBad';
+      await this.$http.get("kanban/datalist.action?caller="+caller+"&_noc=1&page=1&pageSize=100",
+              {
+                params: {
+                  condition: "1=1",
+                }
+              }).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

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

src/views/login.vue

@@ -126,8 +126,8 @@
                                         this.$router.push({path: this.redirect || '/prodline'});
                                     }else if(this.loginForm.type =='车间看板'){
                                         this.$router.push({path: this.redirect || '/shop'});
-                                    }else if(this.loginForm.type =='组装'){
-                                        this.$router.push({path: this.redirect || '/assembly'});
+                                    }else if(this.loginForm.type =='品质看板'){
+                                        this.$router.push({path: this.redirect || '/quality'});
                                     }
                                 }else{
                                     this.$message.error(res.reason);

src/views/prodline/up3.vue

@@ -20,7 +20,7 @@
             <div class = 'ai-center d-flex'>
                 <p>{{ upitem.v_cqmancount }}人</p>
             </div>
-            <img src="../../assets/mancount.png" class="responsive-img">
+            <img src="../../assets/mancount.png" class="responsive-img2">
           </div>
         </div>
         <div class="item fs-xxxl">
@@ -162,6 +162,13 @@ $box-width: 100%;
         margin-left: 20px;
         //margin-right: 0;
       }
+      .responsive-img2 {
+        width: 100px; /* 或者指定宽度，如 300px */
+        height: 100px; /* 保持图片的宽高比 */
+        //display: block;
+        margin-left: 20px;
+        //margin-right: 0;
+      }
     }
   }
 

src/views/quality/bottom1.vue

@@ -0,0 +1,118 @@
+<template>
+    <div id="bottom1">
+      <div class="bg-color-black">
+        <div class="d-flex pt-1 pl-2 jc-center">
+          <span class="fs-xxl text mx-2 fw-b">工序不良TOP5</span>
+        </div>
+        <div class="body-box">
+          <Bottom1Chart />
+        </div>
+<!--        <div class="body-box d-flex flex-wrap">
+             <div class="item">
+               组装
+             </div>
+            <div class="item">
+              测试
+            </div>
+            <div class="item">
+             老化
+            </div>
+            <div class="item">
+              包装
+            </div>
+        </div>-->
+      </div>
+
+    </div>
+</template>
+
+<script>
+import Bottom1Chart from "@/components/qualityechart/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() {
+                var caller = 'KB!LineDayPlan';
+                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 resultList = new Array();
+                            for (let index = 0; index < dataList.length; index++) {
+                                const element = dataList[index];
+                                let item = new Array();
+                                item.push("<span  class='colorGrass fs-lg'>"+element.v_macode+"</span>");
+                                item.push("<span  class='colorGrass fs-lg'>"+element.v_jitype+"</span>");
+                                item.push("<span  class='colorGrass fs-lg'>"+element.v_qty+"</span>");
+                                item.push("<span  class='colorGrass fs-lg'>"+element.v_madeqty+"</span>");
+                                if(element.v_blstatus=='未领料') {  //98%
+                                    item.push("<span  class='colorRemind fs-lgmd'>" + element.v_blstatus + "</span>");
+                                }else {
+                                    item.push("<span  class='colorGrass fs-lg'>" + element.v_blstatus + "</span>");
+                                }
+                                item.push("<span  class='colorGrass fs-lg'>"+element.v_planinqty+"</span>");
+                                item.push("<span  class='colorGrass fs-lg'>"+element.v_planoutqty+"</span>");
+                                item.push("<span  class='colorGrass fs-lg'>"+element.v_plantime+"</span>");
+                                item.push("<span  class='colorRemind fs-lg'>" + element.v_remark + "</span>");
+                                resultList.push(item);
+                            }
+                            const scrollBoard = this.$refs['scroll-board'];
+                            //刷新数据
+                            scrollBoard.updateRows(resultList);
+                        },(result)=>{
+                            console.error(result)
+                        }
+                    );
+            }
+        }
+    };
+</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 {
+          width:600px;
+          .item{
+            width:50%;
+            height: 180px;
+          }
+        }
+      }
+
+  }
+</style>

src/views/quality/bottom2.vue

@@ -0,0 +1,235 @@
+<template>
+  <div id="bottom2">
+    <div class="bg-color-black">
+      <div class="d-flex pt-1 pl-2 pb-5 jc-center">
+        <span class="fs-xxl text mx-2 fw-b">今日累计</span>
+      </div>
+      <div class="d-flex  body-box">
+        <div class ="left">
+          <div class="ztblock">
+            <div class="d-flex pl-2 pb-60 jc-center">
+              <span class="fs-xxl text mx-2 fw-b ">产线直通率</span>
+            </div>
+            <div class="water">
+              <dv-water-level-pond class="dv-wa-le-po" :config="water" />
+            </div>
+          </div>
+        </div>
+        <div class="right">
+          <div class="item">
+            <p class="ml-3 colorBlue fw-b fs-xl">计划投入</p>
+            <div class="dv-dig-flop ml-1 mt-2 pl-3 colorBlue"> {{ upitem.v_planinqty }}
+            </div>
+          </div>
+          <div class="item">
+            <p class="ml-3 colorGrass fw-b fs-xl">计划完成</p>
+            <div class="dv-dig-flop ml-1 mt-2 pl-3"> {{ upitem.v_planoutqty }}
+            </div>
+          </div>
+          <div class="item">
+            <p class="ml-3 colorBlue fw-b fs-xl">实际投入</p>
+            <div class="dv-dig-flop ml-1 mt-2 pl-3 colorBlue"> {{ upitem.v_actinqty }}
+            </div>
+          </div>
+          <div class="item">
+            <p class="ml-3 colorGrass fw-b fs-xl">实际完成</p>
+            <div class="dv-dig-flop ml-1 mt-2 pl-3"> {{ upitem.v_actoutqty }}
+            </div>
+          </div>
+          <div class="d-flex circleperent">
+            <div class="item"  v-for="item in rate" :key="item.id">
+              <CenterChart :id="item.id" :tips="item.tips" :colorObj="item.colorData"/>
+              <span>{{ item.title }}</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import CenterChart from '@/components/prodlinechart/up2Chart/centerChartRate'
+export default {
+  data() {
+    return {
+      timing:null,
+      upitem:{
+        v_ztrate:0,
+        v_planoutqty:0,
+        v_actoutqty:0,
+        v_planinqty:0,
+        v_actinqty:0,
+        v_licode:'',
+        v_inrate:0,
+        v_outrate:0},
+      rate: [
+        {
+          id: 'centerRate1',
+          tips: 0,
+          title :'投入',
+          colorData: {
+            textStyle: '#31b4fb',
+            series: {
+              color: ['rgba(19,122,244,0.29)', 'transparent'],
+              dataColor: {
+                normal: '#137af4',
+                shadowColor: '#80e0f5'
+              }
+            }
+          }
+        },
+        {
+          id: 'centerRate2',
+          tips: 0,
+          title :'产出',
+          colorData: {
+            textStyle: '#43cfe9',
+            series: {
+              color: ['#00bcd44a', 'transparent'],
+              dataColor: {
+                normal: '#32C5E9',
+                shadowColor: '#9fe5f5'
+              }
+            }
+          }
+        },
+      ],
+      water:{data:[]}
+    }
+  },
+  components: {CenterChart},
+  mounted() {
+    this.refreshdata();
+  },
+  beforeDestroy () {
+    clearInterval(this.timing)
+  },
+  methods: {
+    refreshdata() {
+      this.settestdata(); //获取数据
+      this.timing = setInterval(() => {
+        this.settestdata(); //获取-主题词
+      }, 10000);
+    },
+    async settestdata() {
+      //产线直通率，今日累计
+      var caller = 'KB!LineTodayTotal';
+      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);
+            if(dataList.length>0) {
+              this.upitem = dataList[0];
+              //圆形图
+              this.rate[0].tips = dataList[0].v_inrate;
+              this.rate[1].tips = dataList[0].v_outrate;
+              //水波图
+              this.water = { data: [dataList[0].v_ztrate] }
+            }else{
+              this.upitem ={
+                v_ztrate:0,
+                v_planoutqty:0,
+                v_actoutqty:0,
+                v_planinqty:0,
+                v_actinqty:0,
+                v_licode:'',
+                v_inrate:0,
+                v_outrate:0
+              }
+              this.rate[0].tips=0;
+              this.rate[1].tips =0;
+              this.water = { data: [0] }
+            }
+          },(result)=>{
+            console.error(result)
+          }
+      );
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+$box-height: 475px;
+$box-width: 100%;
+#bottom2 {
+  padding: 13px;
+  height: $box-height;
+  font-size: 32px;
+  width: $box-width;
+  border-radius: 5px;
+  .bg-color-black {
+    height: $box-height - 25px;
+    //width: $box-width - 10px;
+    border-radius: 10px;
+    padding: 5px;
+  }
+
+  .text {
+    color: #c3cbde;
+  }
+  .body-box {
+    border-radius: 10px;
+    overflow: hidden;
+    display: flex;
+    flex-wrap: wrap;
+    .left{
+      width: 45%;
+      .ztblock{
+        position: absolute;
+        top: 25%;
+        /*left: 25%;
+        transform: translate(-60%, -25%);*/
+        .pb-60{
+          margin-bottom: 60px;
+        }
+        .water {
+          margin-left:25px;
+          width: 200px;
+          .dv-wa-le-po {
+            height: 120px;
+          }
+        }
+      }
+    }
+    .right {
+      width: 55%;
+      display: flex;
+      flex-wrap: wrap;
+      //justify-content: space-around;
+      // height: 450px;
+      margin-bottom: 7px;
+      .item {
+        border-radius: 6px;
+        padding-top: 8px;
+        margin-top: 8px;
+        width: 50%;
+        height: 80px;
+        .dv-dig-flop {
+          width: 100%;
+          height: 50px;
+          font-size: 20px;
+          color: #3de7c9;
+        }
+      }
+      .circleperent {
+        display: flex;
+        flex-wrap: wrap;
+        height: 170px;
+        .item {
+          width: 50%;
+          height: 140px;
+          span {
+            font-size: 18px;
+            display: flex;
+            justify-content: center;
+          }
+        }
+      }
+    }
+  }
+}
+</style>

src/views/quality/bottom3.vue

@@ -0,0 +1,138 @@
+<template>
+  <div id="bottom3">
+    <div class = "up">
+      <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="d-flex jc-center body-box">
+          <dv-scroll-board :config="config" ref="scroll-board" />
+        </div>
+      </div>
+    </div>
+
+    <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">7天内良率趋势</span>
+        </div>
+        <div >
+          <Bottom3Chart />
+        </div>
+
+      </div>
+    </div>
+
+  </div>
+</template>
+
+<script>
+import Bottom3Chart from "@/components/qualityechart/bottom3Chart";
+export default {
+  components: {
+    Bottom3Chart
+  },
+  data() {
+    return {
+      config: {
+        header: ['车间', '产出', '不良','直通率%'],
+        data: [],
+        rowNum: 5, //表格行数
+        headerHeight: 35,
+        headerBGC: '#0f1325', //表头
+        oddRowBGC: '#0f1325', //奇数行
+        evenRowBGC: '#171c33', //偶数行
+        columnWidth: [150,150,150,120],
+        align: ['center']
+      },
+      timing:null,
+    }
+  },
+  mounted() {
+    this.refreshdata()
+  },
+  beforeDestroy () {
+    clearInterval(this.timing)
+  },
+  methods: {
+    refreshdata() {
+      this.getdata(); //获取-数据
+      this.timing = setInterval(() => {
+        this.getdata(); //获取--数据
+      }, 10000);
+    },
+
+    async getdata() {
+      var caller = 'KB!QualityZTRate';
+      await this.$http.get("kanban/datalist.action?caller="+caller+"&_noc=1&page=1&pageSize=100", {
+        params: {
+          condition:  "1=1",
+        }
+      })
+          .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='colorGrass fs-lg'>"+element.v_wccode+"</span>");
+                  item.push("<span  class='colorGrass fs-lg'>"+element.v_outqty+"</span>");
+                  item.push("<span  class='colorGrass fs-lg'>"+element.v_ngqty+"</span>");
+                  item.push("<span  class='colorGrass fs-lg'>"+element.v_ztrate+"</span>");
+                  resultList.push(item);
+                }
+                const scrollBoard = this.$refs['scroll-board'];
+                //刷新数据
+                scrollBoard.updateRows(resultList);
+              },(result)=>{
+                console.error(result)
+              }
+          );
+    }
+  }
+};
+</script>
+
+<style lang="scss" class>
+//$box-height: 520px;
+$box-height: 475px;
+$box-width: 100%;
+#bottom3 {
+  padding: 13px;
+  height: $box-height;
+  width: $box-width;
+  border-radius: 5px;
+  .up {
+    .bg-color-black {
+      border-radius: 10px;
+      height: 215px;
+      padding: 5px;
+    }
+
+    .text {
+      color: #c3cbde;
+      //font-size: 15px;
+    }
+    .body-box {
+      .dv-scroll-board .header {
+        font-size: 20px;
+      }
+      .dv-scroll-board {
+        height: 200px;
+      }
+    }
+  }
+
+  .down{
+    height: 230px;
+    width: 600px;
+    .bg-color-black {
+      border-radius: 10px;
+      height: 230px;
+    }
+  }
+}
+</style>

src/views/quality/index.vue

@@ -0,0 +1,216 @@
+<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">
+                   {{linecode.LI_CODE}} <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 class="dropdownitem"
+                                    v-for="item in linedata"
+                                    :key="item.LI_CODE"
+                  >{{item.LI_CODE}}</el-dropdown-item>
+                 </el-dropdown-menu>
+              </el-dropdown>*/-->
+
+              <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="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="device">设备看板</router-link></el-dropdown-item>
+                  </el-dropdown-menu>
+              </el-dropdown>
+
+              <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>
+          <!-- 下面 -->
+          <div class="bottom-box">
+              <dv-border-box-12>
+                <bottom1 />
+              </dv-border-box-12>
+            <dv-border-box-12>
+              <bottom2 />
+            </dv-border-box-12>
+            <dv-border-box-12>
+              <bottom3 />
+            </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 bottom1 from './bottom1'
+import bottom2 from './bottom2'
+import bottom3 from './bottom3'
+import { mapState } from "vuex"
+
+export default {
+  mixins: [ drawMixin ],
+  computed: {
+    ...mapState('user', ['user'])
+  },
+  data() {
+    return {
+      timing: null,
+      loading: true,
+      dateDay: null,
+      dateYear: null,
+      dateWeek: null,
+      weekday: ['周日', '周一', '周二', '周三', '周四', '周五', '周六'],
+      decorationColor: ['#568aea', '#000000'],
+    }
+  },
+  components: {
+    up1,
+    up2,
+    up3,
+    bottom1,
+    bottom2,
+    bottom3
+  },
+  created() {
+  },
+  mounted() {
+    this.timeFn()
+    this.cancelLoading()
+  },
+  beforeDestroy () {
+    clearInterval(this.timing)
+    clearInterval(this.intervalId)
+  },
+  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)
+    },
+    cancelLoading() {
+      setTimeout(() => {
+        this.loading = false
+      }, 5000)
+    },
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@import '../../assets/scss/indexquality.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/quality/up1.vue

@@ -0,0 +1,70 @@
+<template>
+  <div id="up1">
+    <div class="bg-color-black">
+      <div class="d-flex pt-2 pl-2 jc-center">
+        <span class="fs-xxl text mx-2 fw-b">线体不良TOP5</span>
+      </div>
+      <div >
+        <BadChart/>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import BadChart from '@/components/qualityechart/up1Chart'
+
+export default {
+  data() {
+    return {
+      timing:null,
+    }
+  },
+  components: {BadChart},
+  mounted() {
+   // this.refreshdata();
+  },
+  beforeDestroy () {
+    clearInterval(this.timing)
+  },
+  methods: {
+    refreshdata() {
+      this.setdata(); //获取数据
+      this.timing = setInterval(() => {
+        this.setdata(); //获取-主题词
+      }, 10000);
+    },
+
+    async setdata() {
+    }
+  }
+}
+</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;
+    display: flex;
+    flex-wrap: wrap;
+  }
+}
+</style>

src/views/quality/up2.vue

@@ -0,0 +1,98 @@
+<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 ranking ai-center flex-column">
+        <dv-scroll-ranking-board class="dv-scr-rank-board mt-1" :config="ranking" ref="scroll-ranking-board"/>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+
+export default {
+  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!QualityKeyStepRate';
+      //关键工序直通率
+      await this.$http.get("kanban/datalist.action?caller="+caller+"&_noc=1&page=1&pageSize=100",{
+        params: {
+          condition: "1=1",
+        }
+      }).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 ml-3'>" + element.v_stepname+"<span/>" ,
+                value:"<span  class='fs-md'>" + element.v_ztrate +"<span/>",
+              });
+            }
+            this.ranking.data = datas;
+            this.ranking = { ...this.ranking };
+          },(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;
+    border-radius: 10px;
+    padding: 5px;
+    width: $box-width;
+    .body-box {
+      //margin-bottom: 7px;
+      margin: 0px 20px 7px 20px;
+      .dv-scr-rank-board {
+        width: 100%;
+        height: 420px;
+      }
+    }
+  }
+  ::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/quality/up3.vue

@@ -0,0 +1,106 @@
+<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="d-flex jc-center body-box">
+        <dv-scroll-board :config="config" ref="scroll-board" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+
+export default {
+  data() {
+    return {
+      timing:null,
+      config: {
+        header: ['线别', '测试数', '不良数','良率%'],
+        data: [],
+        rowNum: 9, //表格行数
+        headerHeight: 35,
+        headerBGC: '#0f1325', //表头
+        oddRowBGC: '#0f1325', //奇数行
+        evenRowBGC: '#171c33', //偶数行
+        columnWidth: [190,140,140,150],
+        align: ['center']
+      },
+    }
+  },
+  components: {},
+  mounted() {
+    this.refreshdata();
+  },
+  beforeDestroy () {
+    clearInterval(this.timing)
+  },
+  methods: {
+    refreshdata() {
+      this.settestdata(); //获取数据
+      this.timing = setInterval(() => {
+        this.settestdata(); //获取-主题词
+      }, 10000);
+    },
+    async settestdata() {
+      //各线体良率
+      var caller = 'KB!QualityLineData';
+      //关键工序直通率
+      await this.$http.get("kanban/datalist.action?caller="+caller+"&_noc=1&page=1&pageSize=100",{
+        params: {
+          condition: "1=1",
+        }
+      }).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-lg'>"+element.linecode+"</span>");
+          item.push("<span  class='colorGrass fs-lg'>"+element.testqty+"</span>");
+          item.push("<span  class='colorGrass fs-lg'>"+element.ngqty+"</span>");
+          item.push("<span  class='colorGrass fs-lg'>"+element.okrate+"</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%;
+#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: 590px;
+      ::v-deep .dv-scroll-board .header {
+        font-size: 20px;
+      }
+      .dv-scroll-board {
+        height: 450px;
+      }
+    }
+  }
+  }
+</style>