From e53cf8b53764f52ad34d4574fba4b65b7f562c40 Mon Sep 17 00:00:00 2001
From: "LAPTOP-R6EHHS26\\86155" <2217640373@qq.com>
Date: Fri, 19 Apr 2024 16:19:23 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96=E5=8C=85=E8=A3=85=E7=BA=BF?=
 =?UTF-8?q?=E6=9D=A1=E7=9C=8B=E6=9D=BF=E9=A1=B5=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/kanban/Packagingline.js           |    8 +
 src/router/index.js                       |    2 +-
 src/views/kanban/Packagingline/index2.vue | 1559 +++++++++++++++++++++
 3 files changed, 1568 insertions(+), 1 deletion(-)
 create mode 100644 src/views/kanban/Packagingline/index2.vue

diff --git a/src/api/kanban/Packagingline.js b/src/api/kanban/Packagingline.js
index 832925c7..9041e474 100644
--- a/src/api/kanban/Packagingline.js
+++ b/src/api/kanban/Packagingline.js
@@ -30,4 +30,12 @@ export function getProductionLineInfo(data) {
 		method: 'post',
 		data: data
 	});
+}
+// 产线信息
+export function getPorOrderList(data) {
+	return request({
+		url: '/mes/mesborad/getPorOrderList',
+		method: 'post',
+		data: data
+	});
 }
\ No newline at end of file
diff --git a/src/router/index.js b/src/router/index.js
index 0bae3692..5ce0f2de 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -135,7 +135,7 @@ export const constantRoutes = [
   // 包装线产线生产看板
   {
     path: "/kanban/Packagingline",
-    component: () => import("@/views/kanban/Packagingline/index"),
+    component: () => import("@/views/kanban/Packagingline/index2"),
     hidden: true,
   },
 
diff --git a/src/views/kanban/Packagingline/index2.vue b/src/views/kanban/Packagingline/index2.vue
new file mode 100644
index 00000000..9a4f90ba
--- /dev/null
+++ b/src/views/kanban/Packagingline/index2.vue
@@ -0,0 +1,1559 @@
+<template>
+  <v-scale-screen width="1920" height="1080" :fullScreen="false">
+    <div class="app-container home" style="">
+      <div class="head">
+        <div class="head-content">
+          <div class="title">包装线产线生产看板</div>
+        </div>
+        <div class="head-logo">
+          <img src="../../../assets/images/logo.png" alt="" />
+        </div>
+        <div class="back">
+          <el-button
+            @click="back()"
+            type="primary"
+            icon="el-icon-s-home"
+          ></el-button>
+        </div>
+      </div>
+      <div class="content-top">
+        <div class="factoryCode">
+          <div class="selectborder">
+            <select
+              v-model="selectxt"
+              class="select1"
+              @change="selectline(selectxt)"
+            >
+              <option
+                :key="index"
+                :value="x.parentName"
+                v-for="(x, index) in getLineList"
+              >
+                {{ x.deptName }}
+              </option>
+              <!-- <option :key="index" :value="x.seriesName" v-for="(x, index) in ceshib">{{ x.seriesName }}</option> -->
+            </select>
+          </div>
+          <div class="selectborder selectborder1">
+            <select
+              v-model="selectxtclasses"
+              class="select1"
+              @change="selectline2(selectxtclasses)"
+            >
+              <option
+                :key="index"
+                :value="x.equCode"
+                v-for="(x, index) in dictDatatype"
+              >
+                {{ x.equName }}
+              </option>
+            </select>
+          </div>
+        </div>
+        <div class="timebox">
+          <div class="time">
+            {{ gettimedata }}
+          </div>
+        </div>
+      </div>
+      <div class="content">
+        <div class="itemleft" style="margin-right: 10px">
+          <div class="item-table item-table1" style="margin-bottom: 10px">
+            <div class="yield">
+              <div class="yieldbox">
+                <div class="yieldtitle">
+                  <div class="yieldname">当日计划产量</div>
+                </div>
+                <div class="yieldnumber">
+                  <div
+                    class="numberbox"
+                    :key="index"
+                    v-for="(n, index) in planProduction"
+                  >
+                    <div class="number">{{ n }}</div>
+                  </div>
+                </div>
+              </div>
+              <div class="yieldbox">
+                <div class="yieldtitle">
+                  <div class="yieldname">产线目前产量</div>
+                </div>
+                <div class="yieldnumber">
+                  <div
+                    class="numberbox"
+                    :key="index"
+                    v-for="(n, index) in actProduction"
+                  >
+                    <div class="number">{{ n }}</div>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div class="yield" style="margin-top: 10px">
+              <div class="yieldbox">
+                <div class="yieldtitle">
+                  <div class="yieldname">工单详情</div>
+                </div>
+              </div>
+            </div>
+            <div class="yieldtable" style="margin-top: 10px">
+              <table
+                class="table-thead"
+                border="0"
+                cellpadding="0"
+                cellspacing="0"
+              >
+                <thead>
+                  <tr style="height: 36px">
+                    <td style="width: 8%">工单号</td>
+                    <!-- <td style="width: 8%;">异常单号</td> -->
+                    <td style="width: 16%">产品名称</td>
+                    <td style="width: 14%">批次号</td>
+                    <td style="width: 8%">计划数量</td>
+                    <td style="width: 8%">完成数量</td>
+                  </tr>
+                </thead>
+              </table>
+              <div class="table-tbody">
+                <!-- 	{workorderCodeSap:订单编码
+	 productName：产品名称
+	 batchCode：批次编码
+	 quantitySplit：批次数量
+	 quantityProduced：已生产数量
+	} -->
+                <!-- <vue-seamless-scroll :data="getlistcx" :class-option="classOption" class="wrapscroll"> -->
+                <table border="0" cellpadding="0" cellspacing="0">
+                  <tbody>
+                    <tr
+                      :class="[index % 2 == 1 ? 'active1' : 'active2']"
+                      style="height: 44px"
+                      :key="index"
+                      v-for="(n, index) in orderdetail"
+                    >
+                      <td style="width: 8%">{{ n.workorderCodeSap }}</td>
+                      <!-- <td style="width: 8%;">{{ n.orderNo }}</td> -->
+                      <td style="width: 16%">{{ n.productName }}</td>
+                      <td style="width: 12%">{{ n.batchCode }}</td>
+                      <td style="width: 8%">{{ n.quantitySplit }}</td>
+                      <td style="width: 8%">{{ n.quantityProduced }}</td>
+                    </tr>
+                  </tbody>
+                </table>
+                <!-- </vue-seamless-scroll> -->
+              </div>
+            </div>
+          </div>
+          <div class="itemleft-bottom">
+            <div class="item-table1">
+              <div class="titlebox" style="margin-bottom: 14px">
+                <div class="titlename">近15日产线趋势图</div>
+              </div>
+              <div
+                id="echart6"
+                style="margin: auto; width: 1170px; height: 244.15px"
+              ></div>
+            </div>
+          </div>
+        </div>
+        <div class="itemright">
+          <div class="item-table item-table1">
+            <div class="titlebox" style="margin-bottom: 14px">
+              <div class="titlename">产线信息</div>
+            </div>
+            <div class="titlebox2" style="margin-bottom: 17px">
+              <div class="icon">
+                <img
+                  src="../../../assets/images/packagingline/bg-title3.png"
+                  alt=""
+                />
+              </div>
+              <div class="titlename">当前工单信息</div>
+            </div>
+            <div class="table-tbody">
+              <!-- <vue-seamless-scroll :data="getlistcx" :class-option="classOption" class="wrapscroll"> -->
+              <table border="0" cellpadding="0" cellspacing="0">
+                <tbody>
+                  <tr style="height: 48px">
+                    <td
+                      style="
+                        width: 4%;
+                        background-color: #081831;
+                        border-right: 1px solid #6c8097;
+                      "
+                    >
+                      工单号
+                    </td>
+                    <!-- <td style="width: 8%;">{{ n.orderNo }}</td> -->
+                    <td style="width: 8%">
+                      <span v-if="workOrder">{{
+                        workOrder.workorderCodeSap
+                      }}</span>
+                    </td>
+                  </tr>
+                  <tr style="height: 48px">
+                    <td
+                      style="
+                        width: 4%;
+                        background-color: #081831;
+                        border-right: 1px solid #6c8097;
+                      "
+                    >
+                      产品名称
+                    </td>
+                    <!-- <td style="width: 8%;">{{ n.orderNo }}</td> -->
+                    <td style="width: 8%">
+                      <span v-if="workOrder">{{ workOrder.productName }}</span>
+                    </td>
+                  </tr>
+                  <tr style="height: 48px">
+                    <td
+                      style="
+                        width: 4%;
+                        background-color: #081831;
+                        border-right: 1px solid #6c8097;
+                      "
+                    >
+                      产品编码
+                    </td>
+                    <!-- <td style="width: 8%;">{{ n.orderNo }}</td> -->
+                    <td style="width: 8%">
+                      <span v-if="workOrder">{{ workOrder.productCode }}</span>
+                    </td>
+                  </tr>
+                  <tr style="height: 48px">
+                    <td
+                      style="
+                        width: 4%;
+                        background-color: #081831;
+                        border-right: 1px solid #6c8097;
+                      "
+                    >
+                      产线编码/名称
+                    </td>
+                    <!-- <td style="width: 8%;">{{ n.orderNo }}</td> -->
+                    <td style="width: 8%">
+                      <span v-if="workOrder"
+                        >{{ workOrder.equCode }}/{{ workOrder.equName }}</span
+                      >
+                    </td>
+                  </tr>
+
+                  <tr style="height: 48px">
+                    <td
+                      style="
+                        width: 4%;
+                        background-color: #081831;
+                        border-right: 1px solid #6c8097;
+                      "
+                    >
+                      数量/单位
+                    </td>
+                    <!-- <td style="width: 8%;">{{ n.orderNo }}</td> -->
+                    <td style="width: 8%">
+                      <span v-if="workOrder"
+                        >{{ workOrder.totalNum }}/{{ workOrder.unit }}</span
+                      >
+                    </td>
+                  </tr>
+                </tbody>
+              </table>
+              <!-- </vue-seamless-scroll> -->
+            </div>
+            <div
+              class="titlebox2"
+              style="margin-bottom: 17px; margin-top: 19px"
+            >
+              <div class="icon">
+                <img
+                  src="../../../assets/images/packagingline/bg-title3.png"
+                  alt=""
+                />
+              </div>
+              <div class="titlename">产线质量信息</div>
+            </div>
+            <div class="Totalnumberbox">
+              <div class="Totalnumber">
+                <div class="number1">巡检次数</div>
+                <div v-if="taskNum" class="number2">{{ taskNum.taskNum }}</div>
+              </div>
+              <div class="Totalnumber Totalnumber1">
+                <div class="number1">巡检抽样数量</div>
+                <div v-if="taskSampleNum" class="number2">
+                  {{ taskSampleNum.taskSampleNum }}
+                </div>
+              </div>
+            </div>
+            <div
+              id="echart5"
+              style="margin: auto; width: 570px; height: 374.15px"
+            ></div>
+          </div>
+        </div>
+      </div>
+      <!-- <div class="item"></div> -->
+      <!-- <div class="item"></div> -->
+    </div>
+  </v-scale-screen>
+</template>
+
+<script>
+import {
+  getBoardFactory,
+  getProduceStaticInfo,
+  getProduceNoOkList,
+  getCheckProjectsPie,
+  getProMonthNoOk,
+  getLineDayNoOk,
+  getMonthOfYearContrast,
+} from "@/api/kanban/quality";
+import {
+  getDictData,
+  getProduction15Days,
+  getProductionLineInfo,
+  getPorOrderList,
+} from "@/api/kanban/Packagingline";
+import { getDeviceRefreshTime } from "@/api/kanban/equipment";
+import * as echarts from "echarts";
+import moment from "moment";
+// import Echarts3D from "./echarts3d.vue";
+// import Echarts3D2 from "./echarts3d2.vue";
+export default {
+  name: "Index",
+  components: {},
+  data() {
+    return {
+      gettimedata: "",
+      selectxt: null,
+      selectxtclasses: null,
+      getLineList: [],
+      classesList: [],
+      number1: 0,
+      number2: 0,
+      number3: 0,
+      number4: 0,
+      nameList: [],
+      valueList: [1639, 1422, 1306, 1131, 1040, 732, 1040, 732],
+      optionDatalist1: [],
+      optionDatalist2: [],
+      optionDatalist3: [],
+      optionDatalist4: [],
+      optionDatalist5: [],
+      optionDatalist6: [],
+      colorlist: ["#005aff", "#f8b551"],
+      datetime: null,
+      time1: null,
+      getlist: [],
+      repairlist: [],
+      orderdetail: [],
+      packaginglinerepairlist: [],
+      packaginglinestabilizelist: [],
+      packaginglineinfo: [],
+      ordermessage: [],
+      RefreshTime: null,
+      dictDatatype: [],
+      Realtimebox: [
+        { name: "发片数量", number: 888 },
+        { name: "理片数量", number: 888 },
+        { name: "支架数量", number: 888 },
+        { name: "包膜数量", number: 888 },
+      ],
+      Realtimebox2: [
+        { name: "发片数量", number: 888 },
+        { name: "理片数量", number: 888 },
+        { name: "支架数量", number: 888 },
+        { name: "包膜数量", number: 888 },
+      ],
+      workOrder: {},
+      piedata: {},
+      taskNum: {},
+      taskSampleNum: {},
+      // 当日计划产量
+      planProduction: [],
+      // 当日实际产量
+      actProduction: [],
+      ceshitable: [{}, {}, {}, {}, {}, {}],
+    };
+  },
+  created() {},
+  destroyed() {
+    clearInterval(this.time1);
+    this.time1 = null;
+  },
+  mounted() {
+    // this.datetime = moment().subtract(2, "day").format("yyyy-MM-DD");
+    //console.log('zhuanhuahou',this.dateRangeone)
+    // this.getdatalist(this.selectxt)
+    this.selectfactoryCodelist();
+
+    this.gettime();
+  },
+  methods: {
+    back() {
+      this.$router.push({ path: "/index" });
+    },
+    gettime() {
+      this.gettimedata = moment().format("YYYY-MM-DD HH:mm:ss ");
+      setInterval(() => {
+        this.gettimedata = moment().format("YYYY-MM-DD HH:mm:ss ");
+      }, 1000);
+    },
+    selectfactoryCodelist() {
+      const _this = this;
+      getBoardFactory({
+        factory: null,
+      }).then((response) => {
+        if (response.data) {
+          _this.getLineList = response.data;
+          _this.selectxt = _this.getLineList[0].parentName;
+          _this.getDictData();
+        }
+      });
+    },
+    getDeviceRefreshTime() {
+      const _this = this;
+      getDeviceRefreshTime().then((response) => {
+        if (response) {
+          this.RefreshTime = response.data;
+          this.time1 = setInterval(() => {
+            _this.getdatalist(_this.selectxt);
+          }, 1000 * 60 * this.RefreshTime);
+        }
+      });
+    },
+    getDictData() {
+      const _this = this;
+      getDictData({
+        factoryCode: "ds_" + _this.selectxt,
+        equipmentTypeCode: "equ_type_bzx",
+      }).then((response) => {
+        if (response) {
+          this.dictDatatype = response;
+          _this.selectxtclasses = _this.dictDatatype[0].equCode;
+          _this.getdatalist();
+          _this.getDeviceRefreshTime();
+        }
+      });
+    },
+    getdatalist() {
+      const _this = this;
+      _this.initChart1();
+      _this.piedata = [];
+      getProductionLineInfo({
+        equCode: _this.selectxtclasses,
+        factoryCode: "ds_" + _this.selectxt,
+      }).then((response) => {
+        if (response) {
+          _this.workOrder = response.data.workOrder;
+          _this.taskNum = response.data.taskNum;
+          _this.taskSampleNum = response.data.taskSampleNum;
+          if (response.data.piedata.checkList) {
+            response.data.piedata.checkList.forEach((item) => {
+              let a = {};
+              let b = {};
+              if (item.checkResult == "合格") {
+                a.name = item.checkResult;
+                a.value = item.quality;
+                _this.piedata[0] = a;
+              }
+              if (item.checkResult == "不合格") {
+                b.name = item.checkResult;
+                b.value = item.quality;
+                _this.piedata[1] = b;
+              }
+            });
+            _this.initChart2();
+          }else{
+            _this.initChart2();
+          }
+          
+        }
+      });
+      getPorOrderList({
+        equCode: _this.selectxtclasses,
+        factoryCode: "ds_" + _this.selectxt,
+      }).then((response) => {
+        if (response) {
+          _this.orderdetail = response.data;
+          if (_this.orderdetail.length == 0) {
+            _this.orderdetail = this.ceshitable;
+          }
+        }
+      });
+    },
+    // 订单异常信息
+    selectline() {
+      const _this = this;
+      this.optionDatalist1 = [];
+      this.optionDatalist5 = [];
+      this.optionDatalist6 = [];
+      _this.getDictData(_this.selectxt);
+    },
+    selectline2() {
+      const _this = this;
+      this.optionDatalist1 = [];
+      this.optionDatalist5 = [];
+      this.optionDatalist6 = [];
+      _this.getdatalist(_this.selectxt);
+    },
+    initChart1() {
+      const _this = this;
+      var fontColor = "#D0DEEE";
+      var myChart6 = echarts.init(document.querySelector("#echart6"));
+      var option6 = {
+        grid: {
+          left: "2%",
+          right: "4%",
+          top: "18%",
+          bottom: "1%",
+          containLabel: true,
+        },
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "cross",
+            crossStyle: {
+              color: "#999",
+            },
+          },
+        },
+        legend: {
+          show: true,
+          right: "120",
+          y: "10",
+          icon: "stack",
+          itemWidth: 10,
+          itemHeight: 10,
+          textStyle: {
+            color: "#D0DEEE",
+          },
+
+          // nameTextStyle:{
+          //         color: '#D0DEEE'
+          //     },
+          data: ["实际产量", "计划产量"],
+        },
+        xAxis: [
+          {
+            type: "category",
+            boundaryGap: true,
+            axisLabel: {
+              color: fontColor,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#397cbc",
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+            splitLine: {
+              show: false,
+              lineStyle: {
+                color: "#2B3241",
+              },
+            },
+            data: [],
+          },
+        ],
+        yAxis: [
+          {
+            type: "value",
+            name: "数量",
+            nameTextStyle: {
+              color: "#D0DEEE",
+            },
+            min: 0,
+            max: 1000,
+            axisLabel: {
+              formatter: "{value}",
+              textStyle: {
+                color: "#D0DEEE",
+              },
+            },
+            axisLine: {
+              lineStyle: {
+                color: "#27b4c2",
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+            splitLine: {
+              show: true,
+              lineStyle: {
+                color: "#2B3241",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            name: "实际产量",
+            data: [],
+            type: "bar",
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(180, 180, 180, 0.2)",
+            },
+            itemStyle: {
+              normal: {
+                barBorderRadius: 5,
+                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                  { offset: 0, color: "#586AF2" },
+                  { offset: 1, color: "#1C293A" },
+                ]),
+              },
+            },
+          },
+          {
+            name: "计划产量",
+            type: "line",
+            stack: "总量",
+            symbol: "circle",
+            symbolSize: 8,
+            itemStyle: {
+              normal: {
+                color: "#88E4E3",
+                lineStyle: {
+                  color: "#88E4E3",
+                  width: 1,
+                },
+              },
+            },
+            data: [],
+          },
+          // {
+          //   name: "计划产量",
+          //   data: [],
+          //   type: "bar",
+          //   showBackground: true,
+          //   backgroundStyle: {
+          //     color: "rgba(180, 180, 180, 0.2)",
+          //   },
+          //   itemStyle: {
+          //     normal: {
+          //       barBorderRadius: 5,
+          //       color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+          //         { offset: 0, color: "#66E1DF" },
+          //         { offset: 1, color: "#005954" },
+          //       ]),
+          //     },
+          //   },
+          // },
+        ],
+      };
+      myChart6.setOption(option6);
+      getProduction15Days({
+        equCode: _this.selectxtclasses,
+        factoryCode: "ds_" + _this.selectxt,
+      }).then((response) => {
+        if (response) {
+          if (response.data.planProduction.length < 6) {
+            response.data.planProduction = String(
+              response.data.planProduction
+            ).padStart(6, "0");
+          }
+          if (response.data.actProduction.length < 6) {
+            response.data.actProduction = String(
+              response.data.actProduction
+            ).padStart(6, "0");
+          }
+          this.planProduction = response.data.planProduction.split("");
+          this.actProduction = response.data.actProduction.split("");
+
+          let seriesdata1 = response.data.acts;
+          let seriesdata2 = response.data.plans;
+          let xAxisdata = response.data.days;
+          let max1 = Math.max(...seriesdata1) + 200;
+          let max3 = Math.max(...seriesdata2) + 200;
+          let yAxismax1 = 0;
+          if (max1 > max3) {
+            yAxismax1 = max1;
+          } else {
+            yAxismax1 = max3;
+          }
+          option6 = {
+            xAxis: [
+              {
+                data: xAxisdata,
+              },
+            ],
+            yAxis: [
+              {
+                max: yAxismax1,
+              },
+            ],
+            series: [
+              {
+                data: seriesdata1,
+              },
+              {
+                data: seriesdata2,
+              },
+            ],
+          };
+          myChart6.setOption(option6);
+        }
+      });
+    },
+    initChart2() {
+      const _this = this;
+      var data5 = this.piedata;
+      console.log(data5);
+      var myChart5 = echarts.init(document.querySelector("#echart5"));
+      
+      var option5 = {
+        tooltip: {
+          trigger: "item",
+          formatter: "{a} <br/>{b}: {c} ({d}%)",
+        },
+        color: ["#00E7E5", "#1DBEFF"],
+        legend: {
+          left: "left",
+          orient: "vertical",
+          bottom: 10,
+          textStyle: {
+            color: "black",
+            padding: [5, 5, 5, -50],
+            fontWeight: 600,
+          },
+          itemWidth: 50,
+          itemHeight: 22,
+        },
+        series: [
+          {
+            radius: 120,
+            name: "巡检",
+            type: "pie",
+            labelLine: {
+              length: 40,
+              length2: 85,
+            },
+            itemStyle: {
+              borderWidth: 1,
+              shadowBlur: 20,
+              shadowOffsetY: 5,
+            },
+            center: ["50%", "55%"],
+            avoidLabelOverlap: true,
+          
+            data: [
+              {
+                value:
+                  data5[0] && data5[0].name == "合格" ? data5[0].value : 0,
+                name:
+                  data5[0] && data5[0].name == "合格" ? data5[0].name : "合格",
+                selected: true,
+                itemStyle: {
+                  color: "#129E92",
+                  borderColor: "#3FFFE2",
+                  shadowColor: "rgba(63, 255, 226, 0.5)",
+                },
+                labelLine: {
+                  lineStyle: {
+                    color: "#00EAE8",
+                  },
+                },
+                label: {
+                  
+                  // formatter: "{e|}\n{a|}{b|{c}/" + (d !== undefined ? "{d}%" : "") + "}{c|}",
+                  formatter: "{e|}\n{a|}{b|{c}/{d}%}{c|}",
+                  
+                  rich: {
+                    a: {
+                      padding: -33,
+                    },
+                    c: {
+                      padding: [5, 0],
+                      lineHeight: 60,
+                      verticalAlign: "top",
+                      backgroundColor: "#00EAE8",
+                    },
+                    b: {
+                      color: "#00E7E5",
+                      backgroundColor: "rgba(63, 255, 226, 0.2)",
+                      height: 19,
+                      width: 40,
+                      borderRadius: 0,
+                      padding: [5, 25],
+                      verticalAlign: "top",
+                    },
+                    e: {
+                      padding: -10,
+                    },
+                  },
+                },
+              },
+              {
+                value:
+                  data5[1] && data5[1].name == "不合格" ? data5[1].value : 0,
+                name:
+                  data5[1] && data5[1].name == "不合格"
+                    ? data5[1].name
+                    : "不合格",
+                itemStyle: {
+                  color: "#105BA4",
+                  borderColor: "#31B4FF",
+                  shadowColor: "rgba(49, 180, 255, 0.8)",
+                },
+                labelLine: {
+                  lineStyle: {
+                    color: "#07D2FF",
+                  },
+                },
+                label: {
+                  
+                  formatter: "{e|}\n{c|}{b|{c}/{d}%}{a|}",
+                  rich: {
+                    c: {
+             
+                      padding: [5, 0],
+                      lineHeight: 60,
+                      verticalAlign: "top",
+                      backgroundColor: "#07D2FF",
+                    },
+                    a: {
+                      padding: -33,
+                    },
+                    b: {
+                      color: "#1DBEFF",
+                      backgroundColor: "rgba(49, 180, 255, 0.2)",
+                      height: 19,
+                      width: 20,
+                      borderRadius: 0,
+                      padding: [5, 25],
+                      align: "right",
+                      verticalAlign: "top",
+                    },
+                    e: {
+                      padding: -10,
+                    },
+                  },
+                },
+              },
+            ],
+          },
+        ],
+      };
+      myChart5.setOption(option5);
+    },
+    //左侧第一个选择类型下拉框 回调函数
+  },
+};
+</script>
+<style lang="scss" scoped>
+.app-container {
+  padding: 0px 24px;
+}
+
+.home {
+  width: 100%;
+  height: 100vh;
+  background: url("../../../assets/images/bg-body.png") no-repeat;
+  background-size: 100% 100%;
+  background-color: #050711;
+
+  .head {
+    width: 100%;
+    height: 74px;
+    position: relative;
+
+    .head-content {
+      height: 74px;
+      background-image: url("../../../assets/images/bg-head.png");
+      background-repeat: no-repeat;
+      background-size: 100% 100%;
+      text-align: center;
+
+      .title {
+        font-size: 42px;
+        font-weight: 400;
+        color: #ffffff;
+      }
+    }
+
+    .head-logo {
+      position: absolute;
+      left: 0px;
+      top: 1px;
+
+      img {
+        height: 38px;
+        // width: ;
+      }
+    }
+
+    .back {
+      position: absolute;
+      right: 0px;
+      top: 5px;
+    }
+  }
+
+  .content-top {
+    display: flex;
+    justify-content: space-between;
+    position: relative;
+
+    .factoryCode {
+      width: 540px;
+      height: 60px;
+      background: url("../../../assets/images/bg- border1.png") no-repeat;
+      background-size: 100% 100%;
+      text-align: center;
+      position: absolute;
+      top: -17px;
+      left: 0px;
+    }
+
+    .timebox {
+      width: 480px;
+      height: 60px;
+      background: url("../../../assets/images/bg-border2.png") no-repeat;
+      background-size: 100% 100%;
+      text-align: center;
+      position: absolute;
+      top: -17px;
+      right: 0px;
+
+      .time {
+        font-size: 30px;
+        font-weight: 400;
+        color: #ffffff;
+        line-height: 71px;
+      }
+    }
+  }
+
+  .content {
+    margin-top: 63px;
+    display: flex;
+
+    .itemleft {
+      .item-table {
+        width: 1243px;
+        height: 542px;
+        background: url("../../../assets/images/packagingline/bg-border1.png")
+          no-repeat;
+        background-size: 100% 100%;
+        padding: 27px 21px 30px 25px;
+        box-sizing: border-box;
+        box-sizing: border-box;
+
+        .yield {
+          display: flex;
+          align-items: center;
+
+          // justify-content: space-between;
+          .yieldbox {
+            .yieldtitle {
+              width: 401px;
+              height: 37px;
+              background: url("../../../assets/images/packagingline/bg-title1.png")
+                no-repeat;
+              background-size: 100% 100%;
+
+              .yieldname {
+                font-weight: bold;
+                font-size: 22px;
+                line-height: 37px;
+                color: #ffffff;
+                text-transform: none;
+                margin-left: 40px;
+              }
+            }
+
+            .yieldnumber {
+              margin-top: 13px;
+              display: flex;
+              justify-content: space-around;
+              .numberbox {
+                width: 80px;
+                height: 101px;
+                background: url("../../../assets/images/packagingline/bg-num.png")
+                  no-repeat;
+                background-size: 100% 100%;
+                margin-right: 10px;
+
+                .number {
+                  font-weight: 600;
+                  font-size: 60px;
+                  color: #ffffff;
+                  line-height: 101px;
+                  text-align: center;
+                }
+              }
+            }
+            .table-thead {
+              width: 100%;
+              height: 36px;
+              margin: auto;
+              background: #0a1a33;
+
+              td {
+                font-size: 19px;
+                font-family: NotoSansHans-Medium, NotoSansHans;
+                font-weight: 500;
+                color: #159aff;
+                text-align: center;
+                white-space: nowrap;
+              }
+            }
+
+            .table-tbody {
+              height: 117px;
+              // width: 1775px;
+              margin: auto;
+              overflow-y: scroll;
+
+              table {
+                width: 100%;
+
+                tbody {
+                  width: 100%;
+
+                  td {
+                    // font-size: 19px;
+                    font-family: NotoSansHans-Medium, NotoSansHans;
+                    font-weight: 500;
+                    color: #ffffff;
+                    text-align: center;
+                    border-bottom: 1px solid #6c8097;
+                    // border-left: 1px dashed #6C8097;
+                  }
+                }
+              }
+            }
+          }
+
+          .yieldbox:first-child {
+            margin-right: 90px;
+          }
+        }
+        .yieldtable {
+          // justify-content: space-between;
+          .yieldbox {
+            .yieldtitle {
+              // width: 401px;
+              height: 37px;
+              background: url("../../../assets/images/packagingline/bg-title1.png")
+                no-repeat;
+              background-size: 100% 100%;
+
+              .yieldname {
+                font-weight: bold;
+                font-size: 22px;
+                line-height: 37px;
+                color: #ffffff;
+                text-transform: none;
+                margin-left: 40px;
+              }
+            }
+          }
+
+          .yieldbox:first-child {
+            margin-right: 90px;
+          }
+          .table-thead {
+            width: 100%;
+            height: 36px;
+            margin: auto;
+            background: #0a1a33;
+
+            td {
+              font-size: 19px;
+              font-family: NotoSansHans-Medium, NotoSansHans;
+              font-weight: 500;
+              color: #159aff;
+              text-align: center;
+              white-space: nowrap;
+            }
+          }
+
+          .table-tbody {
+            height: 220px;
+            // width: 1775px;
+            margin: auto;
+            overflow-y: scroll;
+
+            table {
+              width: 100%;
+
+              tbody {
+                width: 100%;
+
+                td {
+                  // font-size: 19px;
+                  font-family: NotoSansHans-Medium, NotoSansHans;
+                  font-weight: 500;
+                  color: #ffffff;
+                  text-align: center;
+                  border-bottom: 1px dashed #6c8097;
+                  border-left: 1px dashed #6c8097;
+                  // border-left: 1px dashed #6C8097;
+                }
+              }
+            }
+          }
+        }
+      }
+
+      .itemleft-bottom {
+        display: flex;
+
+        .item-table1 {
+          width: 1243px;
+          height: 356px;
+          background: url("../../../assets/images/packagingline/bg-border3.png")
+            no-repeat;
+          background-size: 100% 100%;
+          padding: 27px 21px 30px 25px;
+          box-sizing: border-box;
+
+          .data-box {
+            display: flex;
+            align-items: center;
+            justify-content: space-around;
+            margin-bottom: 20px;
+
+            .box {
+              width: 176px;
+              height: 179px;
+              text-align: center;
+
+              .data1 {
+                font-weight: 500;
+                font-size: 48px;
+                color: #32c5ff;
+                text-align: center;
+                text-transform: none;
+                margin-top: 41px;
+              }
+
+              .data2 {
+                font-weight: 400;
+                font-size: 22px;
+                color: #ffffff;
+                text-align: center;
+                text-transform: none;
+                margin-top: 29px;
+              }
+            }
+
+            .box1 {
+              background: url("../../../assets/images/packagingline/bg-yichang1.png")
+                no-repeat;
+              background-size: 100% 100%;
+
+              .data1 {
+                color: #32c5ff;
+              }
+            }
+
+            .box2 {
+              background: url("../../../assets/images/packagingline/bg-yichang2.png")
+                no-repeat;
+              background-size: 100% 100%;
+
+              .data1 {
+                color: #66ffff;
+              }
+            }
+
+            .box3 {
+              background: url("../../../assets/images/packagingline/bg-yichang3.png")
+                no-repeat;
+              background-size: 100% 100%;
+
+              .data1 {
+                color: #edb83f;
+              }
+            }
+          }
+
+          .table-thead {
+            width: 100%;
+            height: 36px;
+            margin: auto;
+            background: #0a1a33;
+
+            td {
+              font-size: 19px;
+              font-family: NotoSansHans-Medium, NotoSansHans;
+              font-weight: 500;
+              color: #159aff;
+              text-align: center;
+              white-space: nowrap;
+            }
+          }
+
+          .table-tbody {
+            height: 117px;
+            // width: 1775px;
+            margin: auto;
+            overflow-y: scroll;
+
+            table {
+              width: 100%;
+
+              tbody {
+                width: 100%;
+
+                td {
+                  // font-size: 19px;
+                  font-family: NotoSansHans-Medium, NotoSansHans;
+                  font-weight: 500;
+                  color: #ffffff;
+                  text-align: center;
+                  border-bottom: 1px solid #6c8097;
+                  // border-left: 1px dashed #6C8097;
+                }
+              }
+            }
+          }
+          .Totalnumberbox {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            .Totalnumber {
+              width: 269px;
+              height: 37px;
+              background: url("../../../assets/images/packagingline/bg-title5.png")
+                no-repeat;
+              background-size: 100% 100%;
+              display: flex;
+              align-items: center;
+              justify-content: space-around;
+
+              .number1 {
+                font-size: 14px;
+                color: #ffffff;
+                line-height: 20px;
+              }
+
+              .number2 {
+                font-weight: 500;
+                font-size: 24px;
+                color: #2acfff;
+              }
+            }
+          }
+        }
+      }
+    }
+
+    .itemright {
+      .item-table1 {
+        width: 610px;
+        height: 912px;
+        background: url("../../../assets/images/packagingline/bg-border3.png")
+          no-repeat;
+        background-size: 100% 100%;
+        padding: 27px 21px 30px 25px;
+        box-sizing: border-box;
+        box-sizing: border-box;
+
+        .table-thead {
+          width: 100%;
+          height: 44px;
+          margin: auto;
+          background: #0a1a33;
+
+          td {
+            font-size: 19px;
+            font-family: NotoSansHans-Medium, NotoSansHans;
+            font-weight: 500;
+            color: #159aff;
+            text-align: center;
+            white-space: nowrap;
+          }
+        }
+
+        .table-tbody {
+          height: 240px;
+          // width: 1775px;
+          margin: auto;
+
+          table {
+            width: 100%;
+
+            tbody {
+              width: 100%;
+
+              td {
+                font-size: 19px;
+                font-family: NotoSansHans-Medium, NotoSansHans;
+                font-weight: 500;
+                color: #ffffff;
+                text-align: center;
+                border: 1px dashed #6c8097;
+              }
+            }
+          }
+        }
+      }
+
+      .item-table1:first-child {
+      }
+
+      .Realtime {
+        .Realtime-box {
+          display: flex;
+
+          .box {
+            display: flex;
+            align-items: flex-start;
+            margin-right: 19px;
+
+            .item {
+              font-weight: 500;
+              font-size: 15px;
+              color: #ffffff;
+              margin-left: 12px;
+
+              .itemtitle {
+              }
+
+              .itemnumber {
+                margin-top: 8px;
+                color: #1dbdf2;
+              }
+            }
+          }
+        }
+      }
+      .Totalnumberbox {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        .Totalnumber:first-child {
+          margin-right: 10px;
+        }
+        .Totalnumber {
+          flex: 1;
+          height: 79px;
+          background: url("../../../assets/images/packagingline/bg-title5.png")
+            no-repeat;
+          background-size: 100% 100%;
+          display: flex;
+          align-items: center;
+          justify-content: space-around;
+
+          .number1 {
+            font-size: 18px;
+            color: #ffffff;
+            line-height: 20px;
+          }
+
+          .number2 {
+            font-weight: 500;
+            font-size: 24px;
+            color: #2acfff;
+          }
+        }
+      }
+    }
+  }
+}
+
+.titlebox {
+  width: 431px;
+  height: 38px;
+  background: url("../../../assets/images/bg-title.png") no-repeat;
+  background-size: 100% 100%;
+  //   text-align: center;
+  font-size: 20px;
+  font-weight: bold;
+  color: #ffffff;
+  line-height: 38px;
+  letter-spacing: 2px;
+  text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.5);
+  padding-left: 60px;
+  //   .titlename{
+  //     position: relative;
+  //     left: 24px;
+  //   }
+}
+
+.titlebox2 {
+  display: flex;
+  align-items: center;
+
+  .icon {
+    margin-right: 10px;
+  }
+
+  .titlename {
+    font-weight: 400;
+    margin-right: 28px;
+    font-size: 17px;
+    color: #ffffff;
+    line-height: 26px;
+  }
+}
+
+.factoryCode {
+  display: flex;
+  // justify-content: space-around;
+}
+
+.selectborder {
+  background-color: transparent;
+  border-radius: 4px;
+  // border: 2px solid #27408c;
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: space-around;
+  width: 350px;
+  margin-left: 50px;
+}
+
+.selectborder1 {
+  background-color: transparent;
+  border-radius: 4px;
+  // border: 2px solid #27408c;
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: space-around;
+  width: 300px;
+  margin-left: 25px;
+}
+
+.selectborder select {
+  /*清除select的边框样式*/
+  border: none;
+  /*清除select聚焦时候的边框颜色*/
+  outline: none;
+  background-color: transparent;
+  /*将select的宽高等于div的宽高*/
+  width: 100%;
+  height: 50px;
+  /*隐藏select的下拉图标*/
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  font-size: 25px;
+  font-weight: 400;
+  color: #ffffff;
+  line-height: 42px;
+}
+
+.selectborder option {
+  /*清除select的边框样式*/
+  border: none;
+  /*清除select聚焦时候的边框颜色*/
+  outline: none;
+  background-color: transparent;
+  /*将select的宽高等于div的宽高*/
+  width: 100%;
+  height: 50px;
+  /*隐藏select的下拉图标*/
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  padding-left: 20px;
+  font-size: 25px;
+  font-weight: 500;
+  color: #3fa2ff;
+  border-radius: 0%;
+}
+
+.selectborder1 option {
+  /*清除select的边框样式*/
+  border: none;
+  /*清除select聚焦时候的边框颜色*/
+  outline: none;
+  background-color: transparent;
+  /*将select的宽高等于div的宽高*/
+  width: 200px;
+  height: 50px;
+  /*隐藏select的下拉图标*/
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  padding-left: 20px;
+  font-size: 25px;
+  font-weight: 500;
+  color: #3fa2ff;
+  border-radius: 0%;
+}
+
+.selectborder:after {
+  content: "";
+  width: 24px;
+  height: 24px;
+  background: url(../../../assets/images/xiala.png) no-repeat center;
+  /*通过定位将图标放在合适的位置*/
+  position: absolute;
+  right: 0px;
+  top: 25%;
+  /*给自定义的图标实现点击下来功能*/
+  pointer-events: none;
+}
+
+.selectborder1:after {
+  content: "";
+  width: 24px;
+  height: 24px;
+  background: url(../../../assets/images/xiala.png) no-repeat center;
+  /*通过定位将图标放在合适的位置*/
+  position: absolute;
+  right: 0px;
+  top: 25%;
+  /*给自定义的图标实现点击下来功能*/
+  pointer-events: none;
+}
+
+::v-deep .el-button--primary {
+  color: #ffffff;
+  background-color: #325e82;
+  border-color: #0a0f19;
+}
+
+.active1 {
+  background: url("../../../assets/images/quality/bgtable.png");
+}
+
+.active2 {
+}
+
+::-webkit-scrollbar {
+  width: 3px;
+  height: 0px;
+  background-color: #0c0642;
+}
+
+/*定义滚动条轨道 内阴影+圆角*/
+::-webkit-scrollbar-track {
+  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
+  border-radius: 8px;
+  background-color: #07356a;
+}
+
+/*定义滑块 内阴影+圆角*/
+::-webkit-scrollbar-thumb {
+  border-radius: 8px;
+  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
+  background-color: #0091ff;
+  // opacity: 0.1;
+}
+
+.progress {
+  width: 100px;
+  background-color: rgba(15, 182, 217, 0.3);
+  border-radius: 10px;
+
+  .bar {
+    background: linear-gradient(
+      90deg,
+      rgba(15, 182, 217, 1),
+      rgba(1, 255, 255, 1)
+    );
+    border-radius: 10px;
+  }
+}
+</style>