贾维斯看板调整+增加品质IQC

src/assets/scss/indexquality.scss

@@ -0,0 +1,143 @@
+#index {
+  color: #d3d6dd;
+  width: 1920px;
+  height: 1080px;
+  overflow: hidden;
+  position:fixed;
+  left:0;
+  top:0;
+  bottom:0;
+  right:0;
+  
+  .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: 6px;
+      display: flex;
+      flex-direction: column;
+
+      //下方区域的布局
+      .content-box {
+        display: grid;
+        grid-template-columns: 1fr;
+      }
+
+      // 底部数据
+      .bottom-box {
+        display: grid;
+        grid-template-columns: 1fr 1fr 1fr;
+      }
+    }
+  }
+}

src/components/qualityechart/bottom1Chart/index.vue

@@ -0,0 +1,180 @@
+<template>
+  <div>
+    <Echart
+        :options="options"
+        id="bottom1Chart"
+        height="475px"
+        width="100%"
+        ref="column-board"
+    ></Echart>
+  </div>
+</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',
+              min: newData.min, //70
+              max: 100,
+              interval: newData.interval,  //分7个数据，6段
+              nameTextStyle: {
+                fontSize: 20
+              },
+              axisLabel: {
+                formatter: '{value}%',
+                fontSize: 16
+              },
+              splitLine: {
+                show: true,
+                lineStyle: {
+                  // 使用深浅的间隔色
+                  type: "dashed",
+                  color: ['#aaa', '#aaa']
+                }
+              }
+            }
+          ],
+          series: newData.series
+          /*  [
+          {
+            name: '线体产出',
+            type: 'bar',
+            barWidth: 20,
+            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: 20,
+            stack: 'Ad',
+            emphasis: {
+              focus: 'series'
+            },
+            data:[],
+            label: {
+              show: true,
+              position: 'top',
+              fontSize:14,
+              fontWeight: "bold",
+              color:"inherit",
+            },
+            itemStyle: {
+              normal: {
+                color:  "rgb(251,234,78)"
+              }
+            },
+          },
+          {
+             name: '计划达成率%',
+             type: 'line',
+             data:[],
+             yAxisIndex: 1,
+             symbolSize: 4,
+             tooltip: {
+               valueFormatter: function (value) {
+                 return value + '%';
+               }
+             },
+             lineStyle: {
+               width: 3
+             },
+             itemStyle: {
+               normal: {
+                 barBorderRadius: 6,
+                 color:  "rgb(42,87,42)"
+               }
+             },
+             emphasis: {
+               focus: '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/main.js

@@ -75,8 +75,7 @@ Vue.prototype.$http.interceptors.request.use(config => {
     config.headers['x-access-token'] = sessionStorage.getItem('x-access-token');
   }
   if(config.params && config.params['condition']) {
-    //console.log(sessionStorage.getItem('li_code'));
-    if(sessionStorage.getItem('li_code') != '所有') {
+    if(sessionStorage.getItem('li_code') != '所有' && router.currentRoute.path !='/iqc') {
       config.params['condition'] = config.params['condition'] + " and V_LICODE='" + sessionStorage.getItem('li_code') + "'";
     }
   }

src/router/index.js

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

src/views/assembly/index.vue

@@ -51,6 +51,7 @@
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item ><router-link to="package"> 包装车间 </router-link></el-dropdown-item>
                  <el-dropdown-item ><router-link to="dpl"> 测试车间 </router-link></el-dropdown-item>
+                 <el-dropdown-item ><router-link to="quality"> 品质IQC </router-link></el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
 

src/views/dpl/index.vue

@@ -50,6 +50,7 @@
                   <el-dropdown-menu slot="dropdown">
                     <el-dropdown-item ><router-link to="assembly"> 组装车间 </router-link></el-dropdown-item>
                     <el-dropdown-item ><router-link to="package"> 包装车间 </router-link></el-dropdown-item>
+                    <el-dropdown-item ><router-link to="quality"> 品质IQC </router-link></el-dropdown-item>
                   </el-dropdown-menu>
             </el-dropdown>
               <el-select v-model="linecode" class="dropdown" @change ="handleBlur" style="width: 150px">

src/views/login.vue

@@ -50,7 +50,7 @@
                     sob:"",
                     username:"",
                     password:"",
-                    workshop:"SMT"
+                    workshop:"组装"
                 },
                 checked: true,
                 rules:{
@@ -64,6 +64,7 @@
                   {label: '组装', value: '组装'},
                   {label: '测试', value: '测试'},
                   {label: '包装', value: '包装'},
+                  {label: '品质IQC', value: '品质IQC'},
                 ]
 
             }
@@ -147,6 +148,9 @@
                                   if(this.loginForm.workshop =='包装'){
                                     this.$router.push({path: this.redirect || '/package'});
                                   }
+                                  if(this.loginForm.workshop =='品质IQC'){
+                                    this.$router.push({path: this.redirect || '/iqc'});
+                                  }
                                 }else{
                                     this.$message.error(res.reason);
                                 }

src/views/package/index.vue

@@ -50,6 +50,7 @@
                   <el-dropdown-menu slot="dropdown">
                     <el-dropdown-item ><router-link to="dpl"> 测试车间 </router-link></el-dropdown-item>
                     <el-dropdown-item ><router-link to="assembly"> 组装车间 </router-link></el-dropdown-item>
+                    <el-dropdown-item ><router-link to="quality"> 品质IQC </router-link></el-dropdown-item>
                   </el-dropdown-menu>
             </el-dropdown>
               <el-select v-model="linecode" class="dropdown" @change ="handleBlur" style="width: 150px">

src/views/quality/bottom1.vue

@@ -0,0 +1,205 @@
+<template>
+  <div id="quabottom1">
+    <div class="bg-color-black">
+      <div class="d-flex pt-1 pl-2 jc-center">
+        <span class="fs-xxxl text mx-2 fw-b">近15天来料合格率</span>
+      </div>
+      <div class="body-box">
+        <div class="pt-2 " >
+          <Bottom1Chart :linedata="linedata" />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import Bottom1Chart from "../../components/qualityechart/bottom1Chart";
+import {mapState} from "vuex";
+export default {
+  components: {
+    Bottom1Chart
+  },
+  computed: {
+    //数组写法
+    ...mapState(['user','factoryoptions','factory']),
+  },
+  data() {
+    return {
+      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)'
+            }
+          ]
+        }
+      },
+      linedata :{
+        series : null,
+        xAxiss  :null,
+        interval :15,
+        min:0
+      },
+      timing:null,
+    }
+  },
+  mounted() {
+    this.refreshdata()
+  },
+  beforeDestroy () {
+    clearInterval(this.timing)
+  },
+  methods: {
+    refreshdata() {
+      this.getdata(); //获取-数据
+      this.timing = setInterval(() => {
+        this.getdata(); //获取--数据
+      }, 10000);
+    },
+
+    async getdata() {
+      var caller = 'KB!IQCTMONTHRATE';
+      var cond = "1=1";
+      await this.$http.get("kanban/datalist.action?caller="+caller+"&_noc=1&page=1&pageSize=100",{
+        params: {
+          condition: cond
+        }
+      }).then((result)=>{
+        let dataList = JSON.parse(result.data.data);
+        let series = new Array();
+        let xAxis0 = new Array();
+        let mindata = 100;
+        let ndata = new Array();
+        for (let index = 0; index < dataList.length; index++) {
+          const element = dataList[index];
+          xAxis0.push(element.v_ymd);
+          ndata.push(element.v_okrate);
+          if(mindata>element.v_okrate){
+            mindata = element.v_okrate;
+          }
+        }
+        series.push({
+          name: '合格率',
+          type: 'line',
+          data: ndata,
+          symbolSize: 4,
+          lineStyle: {
+            normal: {
+              color: this.colorList.linearBtoG,
+              width: 4
+            }
+          },
+          label: {
+            show: true,
+            position: 'top',
+            fontSize:15,
+            color:'inherit',
+            fontWeight: "bold"
+          },
+          emphasis: {
+            focus: 'series'
+          },
+          areaStyle: {
+            normal: {
+              color: this.colorList.areaBtoG
+            }
+          },
+        });
+        this.linedata.series = series;
+        this.linedata.xAxiss = xAxis0;
+        //最小值往下取整10的倍数，然后减20
+        mindata = Math.floor(mindata/10)*10 - 20;
+        mindata = mindata<0?0:mindata;
+        this.linedata.min = mindata;
+        //分7个数据，6段
+        this.linedata.interval = Math.ceil((100-mindata)/7);
+          },(result)=>{
+            console.error(result)
+          }
+      );
+    }
+  }
+};
+</script>
+
+<style lang="scss" class>
+$box-height: 525px;
+$box-width: 100%;
+#quabottom1 {
+  padding: 13px;
+  height: $box-height;
+  width: $box-width;
+  border-radius: 5px;
+  .bg-color-black {
+    height: $box-height - 25px;
+    border-radius: 10px;
+    padding: 5px ;
+  }
+  .body-box {
+    border-radius: 10px;
+    overflow: hidden;
+  }
+}
+</style>

src/views/quality/bottom2.vue

@@ -0,0 +1,147 @@
+<template>
+  <div id="quabottom2">
+    <div class="bg-color-black">
+      <div class="d-flex pt-1 pl-2 jc-center">
+        <span class="fs-xxxl text mx-2 fw-b">近15天来料不良批次</span>
+      </div>
+      <div class="d-flex jc-center body-box">
+        <dv-scroll-board :config="config" ref="scroll-board" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import {mapState} from "vuex";
+export default {
+  computed: {
+    //数组写法
+    ...mapState(['user','factoryoptions','factory']),
+  },
+  data() {
+    return {
+      config: {
+        header: [],//['供方编号','物料编号', '物料名称','批次数量','处理结果'],
+        data: [],
+        rowNum: 10, //表格行数
+        headerHeight: 40,
+        headerBGC: 'rgba(15,19,37,0.1)', //表头
+        oddRowBGC: 'rgba(15,19,37,0.1)', //奇数行
+        evenRowBGC: 'rgba(23,28,51,0.1)', //偶数行
+        columnWidth:[],// [130,200, 100,100,100],
+        align: []//['left','center','center','center','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!IQC!NGDATA';
+      await this.$http.get("kanban/datalist.action?caller=" + caller + "&_noc=1&page=1&pageSize=100", {
+        params: {
+          condition: "1=1" ,
+        }
+      }).then((result) => {
+            let columns = result.data.columns;
+            let headers = new Array();
+            let columnWidths = new Array();
+            let fieldnames = new Array();
+            let aligns = new Array();
+            for (let index = 0; index < columns.length; index++) {
+              const element = columns[index];
+              if(element.width>0) {
+                headers.push(element.text);
+                columnWidths.push(element.width);
+                fieldnames.push(element.dataIndex);
+                aligns.push('center');
+              }
+            }
+            this.config.header = headers;
+            this.config.columnWidth = columnWidths;
+            this.config.align = aligns;
+            let dataList = JSON.parse(result.data.data);
+            let resultList = new Array();
+            for (let index = 0; index < dataList.length; index++) {
+              const element = dataList[index];
+              let cellClass = 'colorGrass';
+              if(element.qc_result=='不合格'){
+                cellClass = 'colorRed';
+              }else if(element.qc_result=='特采'){
+                cellClass = 'colorRemind';
+              }
+              let item = new Array();
+              fieldnames.forEach(function (ele) {
+                // 遍历数组，对每个元素进行操作
+                item.push(`<span class="fs-xl ${cellClass}">`+element[ele]+`</span>`);
+              });
+              resultList.push(item);
+            }
+            this.config.data = resultList;
+            this.config = { ...this.config };
+          }, (result) => {
+            console.error(result)
+          }
+      );
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+$box-height: 525px;
+$box-width: 100%;
+#quabottom2 {
+  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 {
+      padding-top: 15px;
+    }
+  }
+  .text {
+    color: #c3cbde;
+    //font-size: 15px;
+  }
+  .body-box {
+    width: $box-width;
+
+    ::v-deep .dv-scroll-board {
+      height: 460px;
+      padding-top: 0px; // 添加这行减少顶部间距
+      .header {
+        font-size: 20px !important;
+        color: #c3cbde !important;
+      }
+
+      .rows {
+        .row-item {
+          font-size: 20px !important;
+          color: #c3cbde !important;
+        }
+      }
+    }
+  }
+
+
+}
+</style>

src/views/quality/bottom3.vue

@@ -0,0 +1,140 @@
+<template>
+  <div id="quabottom3">
+    <div class="bg-color-black">
+      <div class="d-flex pt-1 pl-2 jc-center">
+        <span class="fs-xxxl text mx-2 fw-b">超24小时未检明细</span>
+      </div>
+      <div class="d-flex jc-center body-box">
+        <dv-scroll-board :config="config" ref="scroll-board" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import {mapState} from "vuex";
+export default {
+  computed: {
+    //数组写法
+    ...mapState(['user','factoryoptions','factory']),
+  },
+  data() {
+    return {
+      config: {
+        header: [] ,//['检验单号','物料编号','物料名称','批次数量','来料日期'],
+        data: [],
+        rowNum: 10, //表格行数
+        headerHeight: 40,
+        headerBGC: 'rgba(15,19,37,0.1)', //表头
+        oddRowBGC: 'rgba(15,19,37,0.1)', //奇数行
+        evenRowBGC: 'rgba(23,28,51,0.1)', //偶数行
+        columnWidth: [],//[130,200, 100,100,100],
+        align: [] //['center','center','center','center','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!IQC!OVERTIME';
+      await this.$http.get("kanban/datalist.action?caller=" + caller + "&_noc=1&page=1&pageSize=100", {
+        params: {
+          condition: "1=1" ,
+        }
+      }).then((result) => {
+            let columns = result.data.columns;
+            let headers = new Array();
+            let columnWidths = new Array();
+            let fieldnames = new Array();
+            let aligns = new Array();
+            for (let index = 0; index < columns.length; index++) {
+              const element = columns[index];
+              if(element.width>0) {
+                headers.push(element.text);
+                columnWidths.push(element.width);
+                fieldnames.push(element.dataIndex);
+                aligns.push('center');
+              }
+            }
+            this.config.header = headers;
+            this.config.columnWidth = columnWidths;
+            this.config.align = aligns;
+            let dataList = JSON.parse(result.data.data);
+            let resultList = new Array();
+            for (let index = 0; index < dataList.length; index++) {
+              const element = dataList[index];
+              let cellClass = 'colorGrass';
+              let item = new Array();
+              fieldnames.forEach(function (ele) {
+                // 遍历数组，对每个元素进行操作
+                item.push(`<span class="fs-xl ${cellClass}">`+element[ele]+`</span>`);
+              });
+              resultList.push(item);
+            }
+            this.config.data = resultList;
+            this.config = { ...this.config };
+          }, (result) => {
+            console.error(result)
+          }
+      );
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+$box-height: 525px;
+$box-width: 100%;
+#quabottom3 {
+  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 {
+      padding-top: 15px;
+    }
+  }
+  .text {
+    color: #c3cbde;
+    //font-size: 15px;
+  }
+  .body-box {
+    width: $box-width;
+
+    ::v-deep .dv-scroll-board {
+      height: 460px;
+      padding-top: 0px; // 添加这行减少顶部间距
+      .header {
+        font-size: 20px !important;
+        color: #c3cbde !important;
+      }
+
+      .rows {
+        .row-item {
+          font-size: 20px !important;
+          color: #c3cbde !important;
+        }
+      }
+    }
+  }
+
+}
+</style>

src/views/quality/index.vue

@@ -0,0 +1,189 @@
+<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;">贾维斯MES数据看板</span>
+            </div>
+            <div class="react-left ml-3">
+              <span class="text">品质IQC数据</span>
+            </div>
+          </div>
+          <div class="d-flex aside-width">
+            <div class="react-right bg-color-r mr-3">
+             <!-- <span class="text ">设备运行分析</span>-->
+              <span class="text" @click="fullScreen" ref="fullScreen">全屏</span>
+              <span class="text" @click="exitFullScreen" ref="exitFullScreen"  style="display: none">退出全屏</span>
+            </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">
+                  品质IQC<i class="el-icon-arrow-down el-icon&#45;&#45;right"></i>&nbsp;&nbsp;&nbsp;&nbsp;
+                </span>
+                  <el-dropdown-menu slot="dropdown">
+                    <el-dropdown-item ><router-link to="assembly"> 组装车间 </router-link></el-dropdown-item>
+                    <el-dropdown-item ><router-link to="dpl"> 测试车间 </router-link></el-dropdown-item>
+                    <el-dropdown-item ><router-link to="package"> 包装车间 </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 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>
+  </div>
+</template>
+
+<script>
+import drawMixin from "../../utils/drawMixin";
+import { formatTime } from '../../utils/index.js'
+import up1 from './up1'
+import bottom1 from './bottom1'
+import bottom2 from './bottom2'
+import bottom3 from './bottom3'
+
+export default {
+  mixins: [ drawMixin ],
+  data() {
+    return {
+      timing: null,
+      loading: true,
+      dateDay: null,
+      dateYear: null,
+      dateWeek: null,
+      weekday: ['周日', '周一', '周二', '周三', '周四', '周五', '周六'],
+      decorationColor: ['#568aea', '#000000'],
+      isShow:false
+    }
+  },
+  components: {
+   up1,
+   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,195 @@
+<template>
+  <div id="quaup1">
+    <div class="bg-color-black">
+      <div class="d-flex pt-1 pl-2 jc-center">
+        <span class="fs-xxxl text mx-2 fw-b">当日来料检验数据</span>
+      </div>
+      <div class="jc-center body-box">
+        <div class="body-box d-flex">
+          <div class="item d-flex jc-center flex-column">
+            <div class="location">
+              <div class="circle-hollow">
+                <div class="info">
+                  <h2 class="pb-2">{{v_tdaycount}}</h2>
+                  <p class="fs-xxl pt-2">
+                    当日来料批次
+                  </p>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="item d-flex jc-center flex-column">
+            <div class="circle-hollow">
+              <div class="info">
+                <h2 class="pb-2">{{v_tmonthtotal}}</h2>
+                <p class="fs-xxl pt-2">
+                  当月来料总批次
+                </p>
+              </div>
+            </div>
+          </div>
+          <div class="item d-flex jc-center flex-column">
+            <div class="circle-hollow">
+              <div class="info">
+                <h2 class="pb-2">{{v_tdayhavecount}}</h2>
+                <p class="fs-xxl pt-2">
+                  当日已检验批次
+                </p>
+              </div>
+            </div>
+          </div>
+          <div class="item d-flex jc-center flex-column">
+            <div class="circle-hollow">
+              <div class="info">
+                <h2 class="pb-2">{{v_needcount}}</h2>
+                <p class="fs-xxl pt-2">
+                  累计待检批次
+                </p>
+              </div>
+            </div>
+          </div>
+          <div class="item d-flex jc-center flex-column">
+            <div class="circle-hollow">
+              <div class="info">
+                <h2 class="pb-2">{{v_tdayngcount}}</h2>
+                <p class="fs-xxl pt-2">
+                  当日NG批次
+                </p>
+              </div>
+            </div>
+          </div>
+          <div class="item d-flex jc-center flex-column">
+            <div class="circle-hollow">
+              <div class="info">
+                <h2 class="pb-2">{{v_tdayokrate}}</h2>
+                <p class="fs-xxl pt-2">
+                  当日批次合格率
+                </p>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import {mapState} from "vuex";
+export default {
+  computed: {
+    //数组写法
+    ...mapState(['user','factoryoptions','factory']),
+  },
+  data() {
+    return {
+      timing: null,
+      v_tdaycount:0,//	当日来料批次
+      v_tmonthtotal: 0,	 //当月来料总批次
+      v_tdayhavecount : 0,	//当日已检验批次
+      v_needcount	: 0,//累计待检批次
+      v_tdayngcount	: 0,//当日NG批次
+      v_tdayokrate: 0,//当日批次合格率 当日批次合格率（当日已检-NG）*100/当日已检
+    }
+  },
+  mounted() {
+    this.refreshdata();
+  },
+  beforeDestroy () {
+    clearInterval(this.timing)
+  },
+  methods: {
+    refreshdata() {
+      this.getdata(); //获取-数据
+      this.timing = setInterval(() => {
+        this.getdata(); //获取--数据
+      }, 10000);
+    },
+    async getdata() {
+      /*当日来料批次，当月来料总批次，当日已检验批次，累计待检批次，当日NG批次，当日批次合格率（当日已检-NG）*100/当日已检*/
+      this.v_tdaycount =0;
+      this.v_tmonthtotal = 0;
+      this.v_tdayhavecount = 0;
+      this.v_needcount = 0;
+      this.v_tdayngcount = 0;
+      this.v_tdayokrate = 0;
+
+      var caller = 'KB!IQCCHECKDATA';
+      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);
+            if(dataList.length>0){
+              this.v_tdaycount = dataList[0].v_tdaycount;
+              this.v_tmonthtotal = dataList[0].v_tmonthtotal;
+              this.v_tdayhavecount = dataList[0].v_tdayhavecount;
+              this.v_needcount = dataList[0].v_needcount;
+              this.v_tdayngcount = dataList[0].v_tdayngcount;
+              this.v_tdayokrate = dataList[0].v_tdayokrate;
+            }
+          }, (result) => {
+            console.error(result)
+          }
+      );
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+$box-height: 425px;
+$box-width: 100%;
+#quaup1{
+  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 {
+      align-items: center;
+      display: flex;
+      justify-content: center;
+      height: $box-height - 50px ;
+    }
+  }
+  .text {
+    color: #c3cbde;
+    //font-size: 15px;
+  }
+  .body-box {
+    width: $box-width;
+  }
+
+  .item {
+    width: 16.6%;
+    align-items: center;
+    .circle-hollow {
+      width: 200px;
+      height: 200px;
+      border: 3px solid #4ecdc4; /* 边框样式 */
+      border-radius: 50%;
+      background-color: transparent; /* 透明背景 */
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      letter-spacing:2px;
+      flex-direction: column; /* 文字垂直排列 */
+      box-shadow: 0 4px 8px rgba(0,0,0,0.1); /* 阴影效果 */
+      .info{
+        text-align: center;
+        width: 170px;
+        p{
+          border-top: 1px solid #ddd;
+        }
+      }
+    }
+  }
+}
+</style>