From d88b80b6a7366d1a508ace6e2946103835620b4b Mon Sep 17 00:00:00 2001
From: ghm <guanhongming@lanju.cn>
Date: Thu, 28 May 2026 17:45:45 +0800
Subject: [PATCH] =?UTF-8?q?=E6=96=B0=E5=A2=9E=E7=9C=8B=E6=9D=BF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/kanban/Packagingline.js              |    7 +
 src/api/kanban/quality.js                    |   57 +
 src/permission.js                            |    2 +-
 src/router/index.js                          |   11 +
 src/views/kanban/productLinePublic/index.vue |  398 +++
 src/views/kanban/quality/kanban1Public.vue   | 2281 ++++++++++++++++++
 6 files changed, 2755 insertions(+), 1 deletion(-)
 create mode 100644 src/views/kanban/productLinePublic/index.vue
 create mode 100644 src/views/kanban/quality/kanban1Public.vue

diff --git a/src/api/kanban/Packagingline.js b/src/api/kanban/Packagingline.js
index e0d0eed..510ba45 100644
--- a/src/api/kanban/Packagingline.js
+++ b/src/api/kanban/Packagingline.js
@@ -55,3 +55,10 @@ export function getProductionLineData(data){
     data: data
   });
 }
+
+export function getProductionLineDataPublic(){
+  return request({
+    url: '/mes/mesborad/getProductionLineDataPublic',
+    method: 'get'
+  });
+}
diff --git a/src/api/kanban/quality.js b/src/api/kanban/quality.js
index af251f0..2f360ec 100644
--- a/src/api/kanban/quality.js
+++ b/src/api/kanban/quality.js
@@ -120,3 +120,60 @@ export function getBpMonthNoOk(data) {
     data: data
   });
 }
+
+// 免登录接口-获取工厂下拉列表
+export function getBoardFactoryPublic(data) {
+	return request({
+		url: '/mes/wcsInterface/getBoardFactoryPublic',
+		method: 'post',
+		data: data
+	});
+}
+// 免登录接口-检验统计
+export function getProduceStaticInfoPublic(data) {
+	return request({
+		url: '/quality/qcInterface/getProduceStaticInfoPublic',
+		method: 'post',
+		data: data
+	});
+}
+// 免登录接口-质量异常信息
+export function getProduceNoOkListPublic(data) {
+	return request({
+		url: '/quality/qcInterface/getProduceNoOkListPublic',
+		method: 'post',
+		data: data
+	});
+}
+// 免登录接口-不良类型占比
+export function getCheckProjectsPiePublic(data) {
+	return request({
+		url: '/quality/qcInterface/getCheckProjectsPiePublic',
+		method: 'post',
+		data: data
+	});
+}
+// 免登录接口-本月每日线体异常趋势
+export function getLineDayNoOkPublic(data) {
+	return request({
+		url: '/quality/qcInterface/getLineDayNoOkPublic',
+		method: 'post',
+		data: data
+	});
+}
+// 免登录接口-产品不合格率同期对比
+export function getMonthOfYearContrastPublic(data) {
+	return request({
+		url: '/quality/qcInterface/getMonthOfYearContrastPublic',
+		method: 'post',
+		data: data
+	});
+}
+// 免登录接口-白坯每月不合格数量
+export function getBpMonthNoOkPublic(data) {
+  return request({
+    url: '/quality/qcInterface/getBpMonthNoOkPublic',
+    method: 'get',
+    data: data
+  });
+}
diff --git a/src/permission.js b/src/permission.js
index d512fec..09b1159 100644
--- a/src/permission.js
+++ b/src/permission.js
@@ -8,7 +8,7 @@ import { isRelogin } from '@/utils/request'
 
 NProgress.configure({ showSpinner: false })
 
-const whiteList = ['/login', '/register','/cs4']
+const whiteList = ['/login', '/register','/cs4', '/kanban/productLinePublic', '/kanban/qualitykanban1Public']
 
 router.beforeEach((to, from, next) => {
   NProgress.start()
diff --git a/src/router/index.js b/src/router/index.js
index 6888b1c..359de80 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -161,6 +161,17 @@ export const constantRoutes = [
     component: () => import("@/views/kanban/productLine/index"),
     hidden: true,
   },
+  {
+    path: "/kanban/productLinePublic",
+    component: () => import("@/views/kanban/productLinePublic/index"),
+    hidden: true,
+  },
+  // 质量看板1（免登录）
+  {
+    path: "/kanban/qualitykanban1Public",
+    component: () => import("@/views/kanban/quality/kanban1Public"),
+    hidden: true,
+  },
   // {
   //   path: "/report/board/LeadershipViewCheart",
   //   component: () => import("@/views/energy/LeadershipView/LeadershipViewChearts"),
diff --git a/src/views/kanban/productLinePublic/index.vue b/src/views/kanban/productLinePublic/index.vue
new file mode 100644
index 0000000..7ae3cf5
--- /dev/null
+++ b/src/views/kanban/productLinePublic/index.vue
@@ -0,0 +1,398 @@
+<template>
+  <!-- 屏幕适配容器：基于1920*1080设计稿，防溢出+完整适配 -->
+  <v-scale-screen width="1920" height="1080"  :fullScreen="false">
+    <div class="app-container home">
+      <!-- 头部区域：标题+看板时间 -->
+      <div class="head">
+        <div class="head-content">
+          <div class="title">产线生产看板</div>
+          <div class="board-time">{{ currentTime }}</div>
+        </div>
+      </div>
+      <!-- 产线统计概览：核心数据总览 -->
+      <div class="overview-card">
+        <div class="overview-item">
+          <span class="overview-label">总产线数</span>
+          <span class="overview-value">18</span>
+        </div>
+        <div class="overview-item">
+          <span class="overview-label">生产产线</span>
+          <span class="overview-value success">{{ productionLines.length }}</span>
+        </div>
+        <div class="overview-item">
+          <span class="overview-label">计划总产量</span>
+          <span class="overview-value">{{ planTotal }}</span>
+        </div>
+        <div class="overview-item">
+          <span class="overview-label">实际完成产量</span>
+          <span class="overview-value" :class="{ 'overview-warning': completeRate < 80 }">{{ completeTotal }}</span>
+        </div>
+        <div class="overview-item">
+          <span class="overview-label">完成比例</span>
+          <span class="overview-value" :class="{ 'overview-warning': completeRate < 80 }">{{ completeRate }} %</span>
+        </div>
+      </div>
+      <!-- 产线网格：6列3行适配18条产线，优化内边距避免挤压 -->
+      <div class="production-grid" :class="{ 'production-grid-mini': productionLines.length < 13 }">
+        <div
+          class="production-card"
+          v-for="line in productionLines"
+          :key="line.lineNo"
+          :class="{ 'line-warning': line.completionRate < 80 }"
+        >
+          <div class="line-number"> {{ line.equipmentName }}</div>
+          <div class="product-name" >{{ line.productName }}</div>
+          <div class="data-group">
+            <div class="data-item">
+              <span class="label">计划产量：</span>
+              <span class="value plan-value">{{ line.planTotal }}</span>
+            </div>
+            <div class="data-item">
+              <span class="label">当前产量：</span>
+              <span class="value current-value" :class="{ 'reach': line.currentOutput >= line.planOutput }">
+                {{ line.completTotal || 0 }}
+              </span>
+            </div>
+            <div class="data-item efficiency-item">
+              <div class="efficiency-top">
+                <span class="label">产量完成率：</span>
+                <span class="value efficiency-value" :class="{ 'reach': line.completionRate >= 80 }">
+                  {{ line.completionRate }}%
+                </span>
+              </div>
+              <div class="efficiency-progress">
+                <div
+                  class="progress-bar"
+                  :style="{ width: line.completionRate + '%' }"
+                  :class="{ 'progress-reach': line.completionRate >= 80 }"
+                ></div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </v-scale-screen>
+</template>
+
+<script>
+import {getProductionLineDataPublic} from "@/api/kanban/Packagingline";
+
+export default {
+  name: 'ProductionBoardPublic',
+  data() {
+    return {
+      productionLines: [],
+      currentTime: '',
+      planTotal:0,
+      completeTotal: 0,
+      completeRate: 0
+    }
+  },
+
+  created() {
+    this.initProductionData();
+
+    setInterval(() => {
+      this.initProductionData();
+    }, 5000);
+
+    setInterval(() => {
+      this.updateCurrentTime();
+    }, 1000);
+  },
+  methods: {
+    initProductionData() {
+      getProductionLineDataPublic().then(res=>{
+        let planTotal = 0
+        let completeTotal = 0
+        for (const line of res.data){
+          if (line.planTotal){
+            planTotal = planTotal + line.planTotal
+          }
+          if (line.completTotal){
+            completeTotal = completeTotal + line.completTotal
+            line.completionRate = (line.completTotal / line.planTotal * 100).toFixed(1)
+          }else {
+            line.completionRate = 0
+          }
+
+        }
+
+        let completeRate = ((completeTotal/planTotal) * 100 ).toFixed(1)
+
+        this.planTotal = planTotal
+        this.completeTotal = completeTotal
+        this.completeRate = completeRate
+        this.productionLines = res.data
+
+      })
+
+    },
+    updateCurrentTime() {
+      const now = new Date()
+      this.currentTime = now.toLocaleString('zh-CN', {
+        year: 'numeric',
+        month: '2-digit',
+        day: '2-digit',
+        hour: '2-digit',
+        minute: '2-digit',
+        second: '2-digit',
+        hour12: false
+      }).replace(/\//g, '-')
+    },
+
+  }
+}
+</script>
+
+<style scoped>
+.app-container {
+  padding: 0;
+  width: 100%;
+  box-sizing: border-box;
+  overflow: hidden;
+}
+
+.home {
+  width: 100%;
+  background: url("../../../assets/images/bg1.jpg") no-repeat center center;
+  background-size: cover;
+  background-color: #050711;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  padding: 16px 24px;
+  box-sizing: border-box;
+}
+
+.head {
+  width: 100%;
+  height: 74px;
+  position: relative;
+  display: flex;
+  align-items: center;
+  flex-shrink: 0;
+}
+
+.head-content {
+  width: 100%;
+  height: 100%;
+  background: url("../../../assets/images/bg-head.png") no-repeat center center;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  box-sizing: border-box;
+  position: relative;
+}
+
+.title {
+  position: absolute;
+  font-size: 36px;
+  color: #ffffff;
+  font-weight: 500;
+  margin: 0;
+  top: 0;
+  text-shadow: 0 1px 3px rgba(0,0,0,0.3);
+}
+
+.board-time {
+  position: absolute;
+  right: 20px;
+  top: 70%;
+  transform: translateY(-50%);
+  font-size: 20px;
+  color: #e0e0e0;
+  margin: 0;
+}
+
+.overview-card {
+  width: 100%;
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+  border-radius: 8px;
+  padding: 20px 0;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+  flex-shrink: 0;
+  height: 120px;
+}
+
+
+.overview-item {
+  text-align: center;
+  padding: 0 16px;
+}
+
+.overview-label {
+  display: block;
+  font-size: 24px;
+  color: #95a5a6;
+  margin-bottom: 4px;
+}
+
+.overview-value {
+  font-size: 26px;
+  color: #ffffff;
+  font-weight: 600;
+  line-height: 1.2;
+}
+
+.overview-value.success {
+  color: #2ecc71;
+}
+
+.overview-warning{
+  color: #f39c12;
+}
+
+.production-grid {
+  display: grid;
+  grid-template-columns: repeat(6, 1fr);
+  grid-template-rows: repeat(3, 1fr);
+  gap: 20px;
+  flex: 1;
+  box-sizing: border-box;
+  padding: 0;
+  overflow: hidden;
+}
+
+.production-grid-mini{
+  grid-template-columns: repeat(4, 1fr);
+  grid-template-rows: repeat(4, 1fr);
+}
+
+.production-card {
+  background: rgba(14, 28, 56, 0.9);
+  border-radius: 6px;
+  padding: 10px 12px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  transition: all 0.3s ease;
+  box-sizing: border-box;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.production-card:hover {
+  box-shadow: 0 6px 16px rgba(0, 183, 255, 0.2);
+  transform: translateY(-2px);
+  border-color: rgba(0, 183, 255, 0.4);
+}
+
+.line-warning {
+  border-left: 3px solid #f39c12;
+}
+
+.line-number {
+  font-size: 24px;
+  font-weight: 600;
+  color: #ffffff;
+  padding-bottom: 4px;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+  line-height: 1.2;
+  white-space: nowrap;
+  margin: 0;
+}
+
+.product-name {
+  font-size: 22px;
+  color: #a0b4c8;
+  word-wrap: break-word !important;
+  word-break: break-all !important;
+  white-space: normal !important;
+  min-height: 24px;
+  overflow: hidden;
+  cursor: help;
+}
+
+.data-group {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  flex: 1;
+  justify-content: center;
+  box-sizing: border-box;
+  margin: 0;
+}
+
+.data-item {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  font-size: 20px;
+  width: 100%;
+  line-height: 1.3;
+  margin: 0;
+}
+
+.label {
+  color: #8fa4b8;
+  font-weight: 400;
+}
+
+.value {
+  color: #e0efff;
+  font-weight: 600;
+}
+
+.plan-value {
+  color: #4fc3f7;
+}
+
+.current-value.reach,
+.completion-rate.reach,
+.efficiency-value.reach {
+  color: #2ecc71;
+}
+.current-value,
+.completion-rate {
+  color: #ffb74d;
+}
+
+.efficiency-item {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 4px;
+  width: 100%;
+  margin: 0;
+}
+
+.efficiency-top {
+  display: flex;
+  justify-content: space-between;
+  width: 100%;
+  align-items: center;
+}
+
+.efficiency-value {
+  font-size: 20px !important;
+  color: #ffb74d;
+}
+
+.efficiency-progress {
+  width: 100%;
+  height: 5px;
+  background: rgba(255, 255, 255, 0.1);
+  border-radius: 2px;
+  overflow: hidden;
+  box-sizing: border-box;
+}
+
+.progress-bar {
+  height: 100%;
+  background: #f39c12;
+  border-radius: 2px;
+  transition: width 0.8s ease-in-out;
+}
+
+.progress-bar.progress-reach {
+  background: #2ecc71;
+}
+
+
+</style>
\ No newline at end of file
diff --git a/src/views/kanban/quality/kanban1Public.vue b/src/views/kanban/quality/kanban1Public.vue
new file mode 100644
index 0000000..097e6e4
--- /dev/null
+++ b/src/views/kanban/quality/kanban1Public.vue
@@ -0,0 +1,2281 @@
+<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>
+      <div class="content-top">
+        <div class="factory">
+          <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>
+            </select>
+          </div>
+        </div>
+        <div class="timebox">
+          <div class="time">
+            {{ gettimedata }}
+          </div>
+        </div>
+      </div>
+      <div class="content">
+        <div class="itemtop">
+          <div class="item-table item-table1">
+            <div class="titlebox" style="margin-bottom: 14px">
+              <div class="titlename">检验统计</div>
+            </div>
+            <div class="equipmentinfobox">
+              <div class="box">
+                <div class="number">
+                  <span class="number1">
+                    {{ Statistics.todayPro }}
+                  </span>
+                </div>
+                <div class="name2">今日产量(PC)</div>
+              </div>
+              <div class="box">
+                <div class="number">
+                  <span class="number1" style="color: #66ffff">
+                    {{ Statistics.todaySample }}
+                  </span>
+                </div>
+                <div class="name2">今日抽检数量(PC)</div>
+              </div>
+              <div class="box">
+                <div class="number">
+                  <span class="number1" style="color: #ff4d4f">
+                    {{ Statistics.todayNoOk }}
+                  </span>
+                </div>
+                <div class="name2">今日不良数(PC)</div>
+              </div>
+            </div>
+            <div class="equipmentinfobox1">
+              <div class="box">
+                <div class="number">
+                  <span class="number1">
+                    {{ Statistics.monthPro }}
+                  </span>
+                </div>
+                <div class="name2">本月产量(PC)</div>
+              </div>
+              <div class="box">
+                <div class="number">
+                  <span class="number1" style="color: #ff4d4f">
+                    {{ Statistics.monthNoOk }}
+                  </span>
+                </div>
+                <div class="name2">本月不良数(PC)</div>
+              </div>
+            </div>
+            <div class="bigechartbox">
+              <div
+                class="echartbox"
+                id="echart1Public"
+                style="
+                  margin: auto;
+                  margin-top: 10px;
+                  width: 128px;
+                  height: 128px;
+                "
+              ></div>
+              <div
+                class="echartbox"
+                id="echart4Public"
+                style="
+                  margin: auto;
+                  margin-top: 10px;
+                  width: 128px;
+                  height: 128px;
+                "
+              ></div>
+              <div class="title1">今日合格率</div>
+              <div class="title2">本月合格率</div>
+            </div>
+          </div>
+          <div class="item-table item-table1" style="position: relative">
+            <div class="titlebox" style="margin-bottom: 14px">
+              <div class="titlename">质量异常信息</div>
+              <el-date-picker
+                style="
+                  position: absolute;
+                  margin-left: 10px;
+                  background-color: rgb(20, 41, 69);
+                  color: rgb(255, 255, 255);
+                  right: 13px;
+                  width: 207px;
+                  top: 28px;
+                  font-size: 5px;
+                "
+                v-model="ymdArray1"
+                type="daterange"
+                range-separator="至"
+                start-placeholder="开始日期"
+                value-format="yyyy-MM-dd"
+                end-placeholder="结束日期"
+                @change="noOkTimeChange"
+              >
+              </el-date-picker>
+            </div>
+            <vue-seamless-scroll
+              :step="0.1"
+              :data="Qualitylist"
+              class="wrapscroll"
+              :class-option="classOption"
+              style="height: 400px"
+            >
+              <div class="table-tbody">
+                <div
+                  class="item"
+                  :class="[index % 2 == 1 ? 'active1' : 'active2']"
+                  style="height: 48px"
+                  :key="index"
+                  v-for="(n, index) in Qualitylist"
+                >
+                  <div class="icon"></div>
+                  <div class="itemname1" style="max-width: 210px">
+                    {{ n.projectName }}
+                  </div>
+                  <div class="itemname2">
+                    {{ n.checkManName }} {{ n.checkTime }}|{{ n.className }}|{{ n.defectSubclass }}
+                  </div>
+                </div>
+              </div>
+            </vue-seamless-scroll>
+          </div>
+          <div class="item-table item-table1" style="position: relative">
+            <div class="titlebox" style="margin-bottom: 14px; ">
+              <div class="titlename">不良类型占比</div>
+              <el-date-picker
+                style="
+                  position: absolute;
+                  margin-left: 10px;
+                  background-color: rgb(20, 41, 69);
+                  color: rgb(255, 255, 255);
+                  right: 13px;
+                  width: 207px;
+                  top: 28px;
+                  font-size: 5px;
+                "
+                v-model="ymdArray2"
+                type="daterange"
+                range-separator="至"
+                start-placeholder="开始日期"
+                value-format="yyyy-MM-dd"
+                end-placeholder="结束日期"
+                 @change="noOkRadioTimeChange"
+              >
+              </el-date-picker>
+            </div>
+            <div
+              id="echart2Public"
+              style="margin: auto; width: 425px; height: 410.26px; top: -10px"
+            ></div>
+          </div>
+          <div class="item-table item-table1">
+            <div class="titlebox" style="margin-bottom: 14px">
+              <div class="titlename">本年各月白坯不合格数量对比</div>
+            </div>
+            <div
+              id="echart3Public"
+              style="margin: auto; width: 395px; height: 400.26px"
+            ></div>
+          </div>
+        </div>
+        <div class="itembottom">
+          <div class="item-table item-table1">
+            <div class="titlebox" style="margin-bottom: 14px">
+              <div class="titlename">本月每日线体异常趋势</div>
+            </div>
+            <div
+              id="echart5Public"
+              style="margin: auto; width: 900px; height: 304.15px"
+            ></div>
+          </div>
+          <div class="item-table item-table1">
+            <div class="titlebox" style="margin-bottom: 14px">
+              <div class="titlename">产品不合格率同期对比</div>
+            </div>
+            <div id="echart6Public"
+              style="margin: auto; width: 900px; height: 304.15px"
+            ></div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </v-scale-screen>
+</template>
+
+<script>
+import {
+  getBoardFactoryPublic,
+  getProduceStaticInfoPublic,
+  getProduceNoOkListPublic,
+  getCheckProjectsPiePublic,
+  getLineDayNoOkPublic,
+  getMonthOfYearContrastPublic,
+  getBpMonthNoOkPublic,
+} from "@/api/kanban/quality";
+import * as echarts from "echarts";
+import moment from "moment";
+
+export default {
+  name: "QualityBoardPublic",
+  components: {},
+  data() {
+    return {
+      classOption: {
+        direction: 1,
+        hoverstop: true,
+        step: 0.1,
+        openNatch: true,
+        limitMoveNum: 7,
+      },
+      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],
+      optionDatalist2: [],
+      optionDatalist3: [],
+      optionDatalist4: [],
+      colorlist: ["#005aff", "#f8b551"],
+      datetime: null,
+      time1: null,
+      repairlist: [],
+      equipmentlist: [],
+      equipmentrepairlist: [],
+      equipmentstabilizelist: [],
+      equipmentinfo: [],
+      Statistics: {},
+      Qualitylist: [],
+      seriesmyChart5: [],
+      dictDatatype: [],
+      RefreshTime: null,
+      yearShow: false,
+      monthShow: true,
+      dateShow: false,
+      ymdArray1: [],
+      ymdStart1: null,
+      ymdEnd1: null,
+      ymdArray2: [],
+      ymdStart2: null,
+      ymdEnd2: null,
+    };
+  },
+  created() {
+  },
+  destroyed() {
+    clearInterval(this.time1);
+    this.time1 = null;
+  },
+
+  async mounted() {
+    await this.selectFactorylist();
+    this.gettime();
+    this.getDate();
+  },
+  methods: {
+    /**获取默认查询时间段**/
+    getDate() {
+      let dates = this.getMonthDates();
+      this.ymdArray1 = [dates.start, dates.end];
+      this.ymdArray2 = [dates.start, dates.end];
+      this.optionDatalist1 = [];
+      this.optionDatalist2 = [];
+      this.optionDatalist3 = [];
+      this.optionDatalist4 = [];
+      this.ymdStart1 = moment(this.ymdArray1[0]).format("YYYY-MM-DD");
+      this.ymdEnd1 = moment(this.ymdArray1[1]).format("YYYY-MM-DD");
+      this.ymdStart2 = moment(this.ymdArray2[0]).format("YYYY-MM-DD");
+      this.ymdEnd2 = moment(this.ymdArray2[1]).format("YYYY-MM-DD");
+      this.getdatalist();
+      this.initChart1();
+    },
+
+    getMonthDates() {
+      const now = new Date();
+      const start = new Date(now.getFullYear(), now.getMonth(), 1);
+      const end = new Date(now.getFullYear(), now.getMonth() + 1, 0);
+      return {
+        start: this.formatDate(start),
+        end: this.formatDate(end)
+      };
+    },
+    formatDate(date) {
+      const y = date.getFullYear();
+      const m = date.getMonth() + 1;
+      const d = date.getDate();
+      return `${y}-${m < 10 ? '0' + m : m}-${d < 10 ? '0' + d : d}`;
+    },
+    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);
+    },
+    selectFactorylist() {
+      const _this = this;
+      getBoardFactoryPublic({
+        factory: null,
+      }).then((response) => {
+        if (response.data) {
+          _this.getLineList = response.data;
+          _this.selectxt = _this.getLineList[0].parentName;
+          _this.startAutoRefresh();
+        }
+      });
+    },
+    startAutoRefresh() {
+      const _this = this;
+      this.RefreshTime = 5;
+      this.time1 = setInterval(() => {
+        _this.getdatalist();
+        _this.initChart1();
+      }, 1000 * 60 * this.RefreshTime);
+
+    },
+
+    noOkTimeChange(){
+      const now = moment();
+      this.ymdStart1 = now.startOf('month').format("YYYY-MM-DD");
+      this.ymdEnd1 = now.endOf('month').format("YYYY-MM-DD");
+      //质量异常信息
+      getProduceNoOkListPublic({
+        typeCode: "produce",
+        ymdType: this.selectxtclasses,
+        productDateStart: this.ymdStart1,
+        productDateEnd: this.ymdEnd1,
+        factoryCode: "ds_" + this.selectxt,
+      }).then((response) => {
+        if (response) {
+          this.Qualitylist = response;
+        }
+      });
+    },
+    noOkRadioTimeChange(){
+      console.log('noOkRadioTimeChange 触发', this.ymdArray2);
+      
+      if (!this.ymdArray2 || this.ymdArray2.length !== 2) {
+        console.warn('日期选择不完整');
+        return;
+      }
+      
+      this.ymdStart2 = moment(this.ymdArray2[0]).format("YYYY-MM-DD");
+      this.ymdEnd2 = moment(this.ymdArray2[1]).format("YYYY-MM-DD");
+      console.log('查询日期范围:', this.ymdStart2, '至', this.ymdEnd2);
+      
+      const params = {
+        typeCode: "produce",
+        ymdType: this.selectxtclasses,
+        productDateStart: this.ymdStart2,
+        productDateEnd: this.ymdEnd2,
+        factoryCode: "ds_" + this.selectxt,
+      };
+      console.log('请求参数:', params);
+      
+      getCheckProjectsPiePublic(params).then((response) => {
+        console.log('API 响应:', response);
+        if (response) {
+          this.optionDatalist2 = [];
+          response.forEach((item) => {
+            let a = {};
+            a.name = item.projectName;
+            a.value = item.quality;
+            this.optionDatalist2.push(a);
+          });
+          this.initChart3();
+          console.log('图表已更新');
+        }
+      }).catch((error) => {
+        console.error('API 调用失败:', error);
+        alert('获取不良类型占比数据失败，请检查网络或联系管理员');
+      });
+    },
+
+    getdatalist() {
+      const _this = this;
+      //检验统计
+      getProduceStaticInfoPublic({
+        ymdType: _this.selectxtclasses,
+        typeCode: "product",
+        checkType: "checkTypeCPPC",
+        factoryCode: "ds_" + _this.selectxt,
+      }).then((response) => {
+        if (response) {
+          _this.Statistics = response;
+          _this.equipmentinfo = response;
+          this.initChart2();
+        }
+      });
+      //质量异常信息
+      getProduceNoOkListPublic({
+        typeCode: "produce",
+        ymdType: _this.selectxtclasses,
+        productDateStart: this.ymdStart1,
+        productDateEnd: this.ymdEnd1,
+        factoryCode: "ds_" + _this.selectxt,
+      }).then((response) => {
+        if (response) {
+          _this.Qualitylist = response;
+        }
+      });
+      //不良类型占比
+      getCheckProjectsPiePublic({
+        typeCode: "produce",
+        ymdType: _this.selectxtclasses,
+        productDateStart: this.ymdStart2,
+        productDateEnd: this.ymdEnd2,
+        factoryCode: "ds_" + _this.selectxt,
+      }).then((response) => {
+        if (response) {
+          _this.optionDatalist2 = [];
+          response.forEach((item) => {
+            let a = {};
+            a.name = item.projectName;
+            a.value = item.quality;
+            _this.optionDatalist2.push(a);
+          });
+          this.initChart3();
+        }
+      });
+    },
+    initChart1() {
+      const _this = this;
+      var myChart3 = echarts.init(document.querySelector("#echart3Public"));
+      var option3 = {
+        grid: {
+          left: "60",
+          right: "10%",
+          top: "5%",
+          bottom: "1%",
+          containLabel: true,
+        },
+        tooltip: {
+          trigger: "axis",
+          show: true,
+          axisPointer: {
+            type: "none",
+          },
+          formatter: function (e) {
+            return `${e[0].data.name}\n${e[0].marker}${e[0].data.value} PC`;
+          },
+        },
+        xAxis: {
+          name: "数量",
+          splitLine: {
+            show: false,
+          },
+          axisLine: {
+            show: true,
+          },
+          axisLabel: {
+            show: true,
+          },
+          axisTick: {
+            show: true,
+          },
+        },
+        yAxis: [
+          {
+            type: "category",
+            inverse: false,
+            data: ["1", "2", "3", "4"],
+            axisLine: {
+              show: true,
+            },
+            axisTick: {
+              show: false,
+            },
+            axisLabel: {
+              show: false,
+            },
+          },
+        ],
+
+        series: [
+          {
+            type: "pictorialBar",
+            symbol: "rect",
+            barWidth: 20,
+            data: [],
+            label: {
+              normal: {
+                formatter: "{b}",
+                textStyle: {
+                  color: "#D0DEEE",
+                  fontSize: 14,
+                },
+                position: "left",
+                distance: 10,
+                show: true,
+              },
+            },
+            z: 10,
+          },
+          {
+            type: "bar",
+            itemStyle: {
+              color: "#141A27",
+            },
+            label: {
+              normal: {
+                formatter: "{b}",
+                textStyle: {
+                  color: "#D0DEEE",
+                  fontSize: 14,
+                },
+                position: "right",
+                distance: 10,
+                show: true,
+              }
+            },
+            data: [],
+            tooltip: {
+              show: false,
+            },
+            barWidth: 30,
+          },
+        ],
+      };
+      myChart3.setOption(option3);
+      
+      getBpMonthNoOkPublic({
+        typeCode: "produce",
+        factoryCode: "ds_" + _this.selectxt,
+      }).then((response) => {
+        if (response) {
+          let numberlist = [];
+          let dataoption = [];
+          let totalArr = [];
+          _this.optionDatalist3 = [];
+          
+          for (let index = 0; index < response.month.length; index++) {
+            let a = {};
+            response.month[index] = moment(response.month[index]).format("MM");
+            a.name = response.month[index] + "月";
+            a.value = response.monthData[index];
+            a.code = response.monthData[index];
+            dataoption.push(a);
+            numberlist.push(response.monthData[index]);
+          }
+
+          dataoption = dataoption.reverse();
+          let max = Math.max(...numberlist);
+          max = max + 100;
+          dataoption.forEach((item) => {
+            totalArr.push(max);
+          });
+
+          option3 = {
+            yAxis: [
+              {
+                data: dataoption,
+              },
+            ],
+            series: [
+              {
+                data: dataoption,
+                itemStyle: {
+                  normal: {
+                    color: function (params) {
+                      var index_num = params.value;
+
+                      for (var i = 0; i < dataoption.length; i++) {
+                        if (index_num > 1131) {
+                          return new echarts.graphic.LinearGradient(
+                            0,
+                            0,
+                            1,
+                            0,
+                            [
+                              { offset: 0, color: "#FFB742" },
+                              { offset: 1, color: "#FFB742" },
+                            ]
+                          );
+                        } else {
+                          return new echarts.graphic.LinearGradient(
+                            0,
+                            0,
+                            1,
+                            0,
+                            [
+                              { offset: 0, color: "#005954" },
+                              { offset: 1, color: "#66E1DF" },
+                            ]
+                          );
+                        }
+                      }
+                    },
+                  },
+                },
+              },
+              {
+                data: totalArr,
+              },
+            ],
+          };
+          myChart3.setOption(option3);
+        }
+      });
+      
+      var myChart5 = echarts.init(document.querySelector("#echart5Public"));
+      var fontColor = "#D0DEEE";
+      var option5 = {
+        grid: {
+          left: "2%",
+          right: "4%",
+          top: "15%",
+          bottom: "2%",
+          containLabel: true,
+        },
+        tooltip: {
+          show: true,
+          trigger: "item",
+          formatter: function(params) {
+            const value = parseInt(params.value) || params.value;
+            return `${params.seriesName}<br/>${params.name}: ${value} PC`;
+          }
+        },
+        legend: {
+          show: true,
+          x: "center",
+          y: "0",
+          icon: "stack",
+          itemWidth: 10,
+          itemHeight: 10,
+          textStyle: {
+            color: fontColor,
+          },
+          data: ["已采纳", "已发布", "浏览量"],
+        },
+        xAxis: [
+          {
+            type: "category",
+            boundaryGap: true,
+            axisLabel: {
+              color: fontColor,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#397cbc",
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+            splitLine: {
+              show: true,
+              lineStyle: {
+                color: "#2B3241",
+              },
+            },
+            data: [],
+          },
+        ],
+        yAxis: [
+          {
+            type: "value",
+            name: "",
+            nameTextStyle: {
+              color: fontColor,
+            },
+            min: 0,
+            max: 1000,
+            axisLabel: {
+              formatter: "{value} PC",
+              textStyle: {
+                color: fontColor,
+              },
+            },
+            axisLine: {
+              lineStyle: {
+                color: "#27b4c2",
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+            splitLine: {
+              show: true,
+              lineStyle: {
+                color: "#2B3241",
+              },
+            },
+          },
+        ],
+        series: [],
+      };
+      myChart5.setOption(option5);
+      
+      getLineDayNoOkPublic({
+        typeCode: "product",
+        factoryCode: "ds_" + _this.selectxt,
+      }).then((response) => {
+        if (response) {
+          let seriesmyChart5 = [];
+          let legenddata = [];
+          let dataoption = response.series;
+          let xAxisdata = response.dayStr;
+          let yAxismax = [];
+          let yAxismaxall = 0;
+          dataoption.forEach((n) => {
+            if (n.data) {
+              yAxismax.push(Math.max(...n.data));
+            }
+            var item = {
+              name: n.machineName,
+              data: n.data,
+              emphasis: {
+                focus: "series",
+              },
+              type: "bar",
+              stack: n.machineName,
+            };
+            legenddata.push(n.machineName);
+            seriesmyChart5.push(item);
+          });
+          yAxismaxall = Math.max(...yAxismax) + 5;
+          option5 = {
+            xAxis: [
+              {
+                data: xAxisdata,
+              },
+            ],
+            legend: {
+              data: legenddata,
+            },
+            yAxis: [
+              {
+                max: yAxismaxall,
+              },
+            ],
+            series: seriesmyChart5,
+          };
+          myChart5.setOption(option5);
+        }
+      });
+      
+      var myChart6 = echarts.init(document.querySelector("#echart6Public"));
+      var option6 = {
+        grid: {
+          left: "2%",
+          right: "4%",
+          top: "15%",
+          bottom: "2%",
+          containLabel: true,
+        },
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "cross",
+            crossStyle: {
+              color: "#999",
+            },
+          }
+        },
+        legend: {
+          show: true,
+          x: "center",
+          y: "0",
+          icon: "stack",
+          itemWidth: 10,
+          itemHeight: 10,
+          textStyle: {
+            color: fontColor,
+          },
+          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: fontColor,
+            },
+            min: 0,
+            max: 1000,
+            axisLabel: {
+              formatter: "{value} PC",
+              textStyle: {
+                color: fontColor,
+              },
+            },
+            axisLine: {
+              lineStyle: {
+                color: "#27b4c2",
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+            splitLine: {
+              show: true,
+              lineStyle: {
+                color: "#2B3241",
+              },
+            },
+          },
+          {
+            type: "value",
+            name: "比例",
+            nameTextStyle: {
+              color: fontColor,
+            },
+            min: 0,
+            max: 100,
+            axisLabel: {
+              formatter: "{value} %",
+              textStyle: {
+                color: fontColor,
+              },
+            },
+            axisLine: {
+              lineStyle: {
+                color: "#27b4c2",
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+            splitLine: {
+              show: true,
+              lineStyle: {
+                color: "#2B3241",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            name: "去年不合格率(%)",
+            type: "line",
+            stack: "无",
+            symbol: "circle",
+            symbolSize: 8,
+            yAxisIndex: 1,
+            itemStyle: {
+              normal: {
+                color: "#5260CE",
+                lineStyle: {
+                  color: "#5260CE",
+                  width: 1,
+                },
+              },
+            },
+            data: [],
+          },
+          {
+            name: "本年不合格率(%)",
+            type: "line",
+            stack: "无",
+            symbol: "circle",
+            symbolSize: 8,
+            yAxisIndex: 1,
+            itemStyle: {
+              normal: {
+                color: "#88E4E3",
+                lineStyle: {
+                  color: "#88E4E3",
+                  width: 1,
+                },
+              },
+            },
+            data: [],
+          },
+          {
+            name: "去年不合格数量(PC)",
+            data: [],
+            type: "bar",
+            label: {
+                show: true,
+                position: 'top',
+                formatter: function(params) {
+                    const value = parseInt(params.value) || params.value;
+                    return `${value} PC`;
+                }
+            },
+            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: "本年不合格数量(PC)",
+            data: [],
+            type: "bar",
+            label: {
+                show: true,
+                position: 'top',
+                formatter: function(params) {
+                    const value = parseInt(params.value) || params.value;
+                    return `${value} PC`;
+                }
+            },
+            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);
+      
+      getMonthOfYearContrastPublic({
+        factoryCode: _this.selectxt || "1000",
+      }).then((response) => {
+        if (response) {
+          let xAxisdata = response.mapListCurrentYear.map(item => item.month);
+          let seriesdata1 = response.mapListPreviousYear.map(item => item.total_noOkQty);
+          let seriesdata2 = response.mapListPreviousYear.map(item => item.defect_ratio);
+          let seriesdata3 = response.mapListCurrentYear.map(item => item.total_noOkQty);
+          let seriesdata4 = response.mapListCurrentYear.map(item => item.defect_ratio);
+          let max1 = Math.max(...seriesdata1) + 5;
+          let max2 = Math.max(...seriesdata3) + 5;
+          let max3 = Math.max(...seriesdata2) + 5;
+          let max4 = Math.max(...seriesdata4) + 5;
+          
+          let legenddata = [];
+          legenddata.push("去年不合格数量(PC)");
+          legenddata.push("本年不合格数量(PC)");
+          legenddata.push("去年不合格率(%)");
+          legenddata.push("本年不合格率(%)");
+          let yAxismax1 = 0;
+          let yAxismax2 = 0;
+          if (max1 > max2) {
+            yAxismax1 = max1;
+          } else {
+            yAxismax1 = max2;
+          }
+          if (max3 > max4) {
+            yAxismax2 = max3;
+          } else {
+            yAxismax2 = max4;
+          }
+          option6 = {
+            xAxis: [
+              {
+                data: xAxisdata,
+              },
+            ],
+            yAxis: [
+              {
+                max: yAxismax1,
+              },
+              {
+                max: yAxismax2,
+              },
+            ],
+            series: [
+              {
+                data: seriesdata2,
+              },
+              {
+                data: seriesdata4,
+              },
+              {
+                data: seriesdata1,
+              },
+              {
+                data: seriesdata3,
+              },
+            ],
+            legend: {
+              data: legenddata,
+            },
+          };
+          myChart6.setOption(option6);
+        }
+      });
+    },
+    initChart2() {
+      const _this = this;
+      let intactRate = 0;
+      let numberAngle = 360;
+      let intactRate1 = 0;
+      let numberAngle1 = 360;
+      if (_this.equipmentinfo.todayOkRate) {
+        intactRate = parseFloat(_this.equipmentinfo.todayOkRate);
+        numberAngle = (100 - parseInt(_this.equipmentinfo.todayOkRate)) * 3.6;
+      }
+      if (_this.equipmentinfo.monthOkRate) {
+        intactRate1 = parseFloat(_this.equipmentinfo.monthOkRate);
+        numberAngle1 = (100 - parseInt(_this.equipmentinfo.monthOkRate)) * 3.6;
+      }
+      var myChart1 = echarts.init(document.querySelector("#echart1Public"));
+      var option1 = {
+        tooltip: {
+          formatter: "{a} <br/>{b} : {c}%",
+        },
+        grid: {},
+        series: [
+          {
+            splitNumber: 4,
+            type: "gauge",
+            radius: 60,
+            startAngle: 360,
+            endAngle: 0,
+            center: ["50%", "50%"],
+            name: "内层盘",
+            type: "gauge",
+            axisLine: {
+              lineStyle: {
+                width: 10,
+                color: [
+                  [
+                    1,
+                    new echarts.graphic.LinearGradient(0, 0, 1, 0, [
+                      {
+                        offset: 0,
+                        color: "#334046",
+                      },
+                      {
+                        offset: 1,
+                        color: "#334046",
+                      },
+                    ]),
+                  ],
+                ],
+              },
+            },
+            axisTick: {
+              lineStyle: {
+                color: "#fff",
+                width: 1,
+              },
+              length: 6,
+              splitNumber: 1,
+              show: false,
+            },
+            splitLine: {
+              show: false,
+            },
+            axisLabel: {
+              show: false,
+            },
+            pointer: {
+              show: false,
+            },
+            data: [
+              {
+                show: false,
+                value: "0",
+              },
+            ],
+            detail: {
+              show: 0,
+            },
+          },
+          {
+            splitNumber: 4,
+            type: "gauge",
+            radius: 60,
+            startAngle: 360,
+            endAngle: numberAngle,
+            center: ["50%", "50%"],
+            name: "内层盘",
+            type: "gauge",
+            axisLine: {
+              lineStyle: {
+                width: 10,
+                color: [
+                  [
+                    1,
+                    new echarts.graphic.LinearGradient(0, 0, 1, 0, [
+                      {
+                        offset: 0,
+                        color: "#4789E1",
+                      },
+                      {
+                        offset: 1,
+                        color: "#4789E1",
+                      },
+                    ]),
+                  ],
+                ],
+              },
+            },
+            axisTick: {
+              lineStyle: {
+                color: "#fff",
+                width: 1,
+              },
+              length: 6,
+              splitNumber: 1,
+              show: false,
+            },
+            splitLine: {
+              show: false,
+            },
+            axisLabel: {
+              show: false,
+            },
+            pointer: {
+              show: false,
+            },
+            data: [
+              {
+                show: false,
+                value: "0",
+              },
+            ],
+            detail: {
+              show: 0,
+            },
+          },
+          {
+            splitNumber: 4,
+            type: "gauge",
+            radius: 40,
+            startAngle: 360,
+            endAngle: 0,
+            center: ["50%", "50%"],
+            name: "内层盘",
+            type: "gauge",
+            axisLine: {
+              lineStyle: {
+                width: 5,
+                color: [
+                  [
+                    1,
+                    new echarts.graphic.LinearGradient(0, 0, 1, 0, [
+                      {
+                        offset: 0.1,
+                        color: "#334046",
+                      },
+                      {
+                        offset: 0.6,
+                        color: "#334046",
+                      },
+                      {
+                        offset: 1,
+                        color: "#334046",
+                      },
+                    ]),
+                  ],
+                ],
+              },
+            },
+            axisTick: {
+              lineStyle: {
+                color: "#334046",
+                width: 1,
+              },
+              length: 4,
+              splitNumber: 1,
+              distance: 0,
+              show: true,
+            },
+            splitLine: {
+              show: false,
+            },
+            axisLabel: {
+              show: false,
+            },
+            pointer: {
+              show: false,
+            },
+            axisLabel: {
+              show: false,
+            },
+            detail: {
+              show: true,
+              valueAnimation: true,
+              formatter: "{value}%",
+              offsetCenter: [0, "10%"],
+              textStyle: {
+                color: "#fff",
+                fontSize: 25,
+              },
+            },
+            data: [
+              {
+                value: intactRate,
+              },
+            ],
+          },
+        ],
+      };
+      myChart1.setOption(option1);
+      
+      var myChart4 = echarts.init(document.querySelector("#echart4Public"));
+      var option4 = {
+        tooltip: {
+          formatter: "{a} <br/>{b} : {c}%",
+        },
+        grid: {},
+        series: [
+          {
+            splitNumber: 4,
+            type: "gauge",
+            radius: 60,
+            startAngle: 360,
+            endAngle: 0,
+            center: ["50%", "50%"],
+            name: "内层盘",
+            type: "gauge",
+            axisLine: {
+              lineStyle: {
+                width: 10,
+                color: [
+                  [
+                    1,
+                    new echarts.graphic.LinearGradient(0, 0, 1, 0, [
+                      {
+                        offset: 0,
+                        color: "#334046",
+                      },
+                      {
+                        offset: 1,
+                        color: "#334046",
+                      },
+                    ]),
+                  ],
+                ],
+              },
+            },
+            axisTick: {
+              lineStyle: {
+                color: "#fff",
+                width: 1,
+              },
+              length: 6,
+              splitNumber: 1,
+              show: false,
+            },
+            splitLine: {
+              show: false,
+            },
+            axisLabel: {
+              show: false,
+            },
+            pointer: {
+              show: false,
+            },
+            data: [
+              {
+                show: false,
+                value: "0",
+              },
+            ],
+            detail: {
+              show: 0,
+            },
+          },
+          {
+            splitNumber: 4,
+            type: "gauge",
+            radius: 60,
+            startAngle: 360,
+            endAngle: numberAngle1,
+            center: ["50%", "50%"],
+            name: "内层盘",
+            type: "gauge",
+            axisLine: {
+              lineStyle: {
+                width: 10,
+                color: [
+                  [
+                    1,
+                    new echarts.graphic.LinearGradient(0, 0, 1, 0, [
+                      {
+                        offset: 0,
+                        color: "#89F7F6",
+                      },
+                      {
+                        offset: 1,
+                        color: "#89F7F6",
+                      },
+                    ]),
+                  ],
+                ],
+              },
+            },
+            axisTick: {
+              lineStyle: {
+                color: "#fff",
+                width: 1,
+              },
+              length: 6,
+              splitNumber: 1,
+              show: false,
+            },
+            splitLine: {
+              show: false,
+            },
+            axisLabel: {
+              show: false,
+            },
+            pointer: {
+              show: false,
+            },
+            data: [
+              {
+                show: false,
+                value: "0",
+              },
+            ],
+            detail: {
+              show: 0,
+            },
+          },
+          {
+            splitNumber: 4,
+            type: "gauge",
+            radius: 40,
+            startAngle: 360,
+            endAngle: 0,
+            center: ["50%", "50%"],
+            name: "内层盘",
+            type: "gauge",
+            axisLine: {
+              lineStyle: {
+                width: 5,
+                color: [
+                  [
+                    1,
+                    new echarts.graphic.LinearGradient(0, 0, 1, 0, [
+                      {
+                        offset: 0.1,
+                        color: "#334046",
+                      },
+                      {
+                        offset: 0.6,
+                        color: "#334046",
+                      },
+                      {
+                        offset: 1,
+                        color: "#334046",
+                      },
+                    ]),
+                  ],
+                ],
+              },
+            },
+            axisTick: {
+              lineStyle: {
+                color: "#334046",
+                width: 1,
+              },
+              length: 4,
+              splitNumber: 1,
+              distance: 0,
+              show: true,
+            },
+            splitLine: {
+              show: false,
+            },
+            axisLabel: {
+              show: false,
+            },
+            pointer: {
+              show: false,
+            },
+            axisLabel: {
+              show: false,
+            },
+            detail: {
+              show: true,
+              valueAnimation: true,
+              formatter: "{value}%",
+              offsetCenter: [0, "10%"],
+              textStyle: {
+                color: "#fff",
+                fontSize: 25,
+              },
+            },
+            data: [
+              {
+                value: intactRate1,
+              },
+            ],
+          },
+        ],
+      };
+      myChart4.setOption(option4);
+    },
+    initChart3() {
+      const _this = this;
+      var colorList = [
+        "#2D6ACA",
+        "#72C6B5",
+        "#F0D766",
+        "#80B5F4",
+        "#FD866A",
+        "#9E87FF",
+        "#58D5FF",
+      ];
+      var data = _this.optionDatalist2;
+      var myChart2 = echarts.init(document.querySelector("#echart2Public"));
+      var option2 = {
+        tooltip: {
+          trigger: "item",
+          formatter: "{a} <br/>{b} : {c}PC"
+        },
+        grid: {
+          top: "60",
+        },
+        legend: {
+          bottom: "10",
+          icon: "pin",
+          textStyle: {
+            rich: {
+              a: {
+                color: "#FFFFFF",
+                width: 70,
+                fontSize: 13,
+              },
+              b: {
+                color: "#FFFFFF",
+                fontSize: 13,
+                padding: [0, 30, 0, 40],
+              },
+              b0: {
+                color: "#73DDFF",
+                fontSize: 20,
+                padding: [0, 30, 0, 40],
+              },
+            },
+          },
+          formatter: function (name) {
+            let title = "";
+            var total = 0;
+            var target;
+            var index;
+            for (var i = 0, l = data.length; i < l; i++) {
+              if (data[i].name == name) {
+                target = data[i].value+"PC";
+                title = data[i].label;
+                index = i < 6 ? i : 5;
+              }
+            }
+            return `{a| ${name}}{b| ${target}}`;
+          },
+        },
+        series: [
+          {
+            splitNumber: 4,
+            type: "gauge",
+            radius: 150,
+            startAngle: 360,
+            endAngle: 0,
+            center: ["50%", "40%"],
+            type: "gauge",
+            axisLine: {
+              lineStyle: {
+                width: 50,
+                color: [
+                  [
+                    1,
+                    new echarts.graphic.LinearGradient(0, 0, 1, 0, [
+                      {
+                        offset: 0.1,
+                        color: "#1C2738",
+                      },
+                      {
+                        offset: 0.6,
+                        color: "#1C2738",
+                      },
+                      {
+                        offset: 1,
+                        color: "#1C2738",
+                      },
+                    ]),
+                  ],
+                ],
+              },
+            },
+            axisTick: {
+              lineStyle: {
+                color: "#070E19",
+                width: 3,
+              },
+              length: 50,
+              splitNumber: 2,
+              distance: -50,
+              show: true,
+            },
+            splitLine: {
+              show: false,
+            },
+            axisLabel: {
+              show: false,
+            },
+            pointer: {
+              show: false,
+            },
+            axisLabel: {
+              show: false,
+            },
+            detail: {
+              show: false,
+              valueAnimation: true,
+              formatter: "{value}%",
+              offsetCenter: [0, "10%"],
+              textStyle: {
+                color: "#fff",
+                fontSize: 25,
+              },
+            },
+            data: [
+              {
+                value: 80,
+                show: false,
+              },
+            ],
+          },
+          {
+            type: "pie",
+            radius: ["44%", "63%"],
+            center: ["50%", "40%"],
+            roseType: "radius",
+            label: {
+              show: false,
+            },
+            tooltip: {
+                trigger: 'item',
+                formatter: '{b}: {c}PC ({d}%)'
+            },
+            emphasis: {
+              label: {
+                show: false,
+              },
+            },
+            data: data,
+          },
+          {
+            splitNumber: 4,
+            type: "gauge",
+            radius: 140,
+            startAngle: 360,
+            endAngle: 0,
+            center: ["50%", "40%"],
+            type: "gauge",
+            axisLine: {
+              lineStyle: {
+                width: 1,
+                color: [
+                  [
+                    1,
+                    new echarts.graphic.LinearGradient(0, 0, 1, 0, [
+                      {
+                        offset: 0.1,
+                        color: "#619e9d",
+                      },
+                      {
+                        offset: 0.6,
+                        color: "#619e9d",
+                      },
+                      {
+                        offset: 1,
+                        color: "#619e9d",
+                      },
+                    ]),
+                  ],
+                ],
+              },
+            },
+            axisTick: {
+              lineStyle: {
+                color: "#070E19",
+                width: 3,
+              },
+              length: 50,
+              splitNumber: 2,
+              distance: -50,
+              show: false,
+            },
+            splitLine: {
+              show: false,
+            },
+            axisLabel: {
+              show: false,
+            },
+            pointer: {
+              show: false,
+            },
+            axisLabel: {
+              show: false,
+            },
+            detail: {
+              show: false,
+              valueAnimation: true,
+              formatter: "{value}%",
+              offsetCenter: [0, "10%"],
+              textStyle: {
+                color: "#fff",
+                fontSize: 25,
+              },
+            },
+            data: [
+              {
+                value: 80,
+                show: false,
+              },
+            ],
+          },
+          {
+            splitNumber: 4,
+            type: "gauge",
+            radius: 80,
+            startAngle: 360,
+            endAngle: 0,
+            center: ["50%", "40%"],
+            type: "gauge",
+            axisLine: {
+              lineStyle: {
+                width: 1,
+                color: [
+                  [
+                    1,
+                    new echarts.graphic.LinearGradient(0, 0, 1, 0, [
+                      {
+                        offset: 0.1,
+                        color: "#619e9d",
+                      },
+                      {
+                        offset: 0.6,
+                        color: "#619e9d",
+                      },
+                      {
+                        offset: 1,
+                        color: "#619e9d",
+                      },
+                    ]),
+                  ],
+                ],
+              },
+            },
+            axisTick: {
+              lineStyle: {
+                color: "#070E19",
+                width: 3,
+              },
+              length: 50,
+              splitNumber: 2,
+              distance: -50,
+              show: false,
+            },
+            splitLine: {
+              show: false,
+            },
+            axisLabel: {
+              show: false,
+            },
+            pointer: {
+              show: false,
+            },
+            axisLabel: {
+              show: false,
+            },
+            detail: {
+              show: false,
+              valueAnimation: true,
+              formatter: "{value}%",
+              offsetCenter: [0, "10%"],
+              textStyle: {
+                color: "#fff",
+                fontSize: 25,
+              },
+            },
+            data: [
+              {
+                value: 80,
+                show: false,
+              },
+            ],
+          },
+          {
+            splitNumber: 4,
+            type: "gauge",
+            radius: 60,
+            startAngle: 360,
+            endAngle: 0,
+            center: ["50%", "40%"],
+            type: "gauge",
+            axisLine: {
+              lineStyle: {
+                width: 1,
+                color: [
+                  [
+                    1,
+                    new echarts.graphic.LinearGradient(0, 0, 1, 0, [
+                      {
+                        offset: 0.1,
+                        color: "#619e9d",
+                      },
+                      {
+                        offset: 0.6,
+                        color: "#619e9d",
+                      },
+                      {
+                        offset: 1,
+                        color: "#619e9d",
+                      },
+                    ]),
+                  ],
+                ],
+              },
+            },
+            axisTick: {
+              lineStyle: {
+                color: "#070E19",
+                width: 3,
+              },
+              length: 50,
+              splitNumber: 2,
+              distance: -50,
+              show: false,
+            },
+            splitLine: {
+              show: false,
+            },
+            axisLabel: {
+              show: false,
+            },
+            pointer: {
+              show: false,
+            },
+            axisLabel: {
+              show: false,
+            },
+            detail: {
+              show: false,
+              valueAnimation: true,
+              formatter: "{value}%",
+              offsetCenter: [0, "10%"],
+              textStyle: {
+                color: "#fff",
+                fontSize: 25,
+              },
+            },
+            data: [
+              {
+                value: 80,
+                show: false,
+              },
+            ],
+          },
+        ],
+      };
+      myChart2.setOption(option2);
+    },
+    selectline() {
+      const _this = this;
+      this.optionDatalist1 = [];
+      this.optionDatalist2 = [];
+      this.optionDatalist3 = [];
+      this.optionDatalist4 = [];
+      this.getdatalist();
+      this.initChart1();
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.app-container {
+  padding: 0px 24px;
+}
+.wrapscroll {
+  overflow: hidden;
+}
+.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;
+      }
+    }
+  }
+
+  .content-top {
+    display: flex;
+    justify-content: space-between;
+    position: relative;
+
+    .factory {
+      width: 600px;
+      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;
+
+    .itemtop {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+
+      .item-table {
+        width: 455px;
+        height: 492px;
+        background: url("../../../assets/images/equipment/bg-border1.png")
+          no-repeat;
+        background-size: 100% 100%;
+        padding: 27px 21px 30px 25px;
+        box-sizing: border-box;
+        box-sizing: border-box;
+
+        .equipmentinfobox {
+          margin-top: 27px;
+          display: flex;
+          align-items: center;
+          justify-content: space-around;
+
+          .box {
+            width: 128px;
+            height: 96px;
+            background: url("../../../assets/images/equipment/number.png")
+              no-repeat;
+            background-size: 100% 100%;
+            text-align: center;
+            padding-top: 30px;
+            box-sizing: border-box;
+
+            .number {
+              .number1 {
+                font-size: 30px;
+                font-weight: 500;
+                color: #66ffff;
+                line-height: 10px;
+              }
+            }
+
+            .name2 {
+              margin-top: 3px;
+              font-size: 16px;
+              font-weight: bold;
+              color: #ffffff;
+            }
+          }
+        }
+
+        .equipmentinfobox1 {
+          margin-top: 22px;
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+
+          .box {
+            width: 199px;
+            height: 96px;
+            background: url("../../../assets/images/equipment/number.png")
+              no-repeat;
+            background-size: 100% 100%;
+            text-align: center;
+            padding-top: 30px;
+            box-sizing: border-box;
+
+            .number {
+              .number1 {
+                font-size: 30px;
+                font-weight: 500;
+                color: #66ffff;
+                line-height: 10px;
+              }
+            }
+
+            .name2 {
+              margin-top: 3px;
+              font-size: 16px;
+              font-weight: bold;
+              color: #ffffff;
+            }
+          }
+        }
+
+        .table-tbody {
+          .item {
+            width: 412px;
+            height: 44px;
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            padding-left: 15px;
+            padding-right: 10px;
+            margin-bottom: 14px;
+            position: relative;
+
+            .icon {
+              position: absolute;
+              transform: rotate(45deg);
+              top: -2px;
+              left: 0px;
+              width: 0;
+              height: 0;
+              border-right: 6px solid #3be8ff;
+              border-top: 6px solid transparent;
+              border-bottom: 6px solid transparent;
+            }
+
+            .itemname1 {
+              font-size: 16px;
+              color: #66e1df;
+            }
+
+            .itemname2 {
+              font-size: 14px;
+              color: #d0deee;
+            }
+          }
+        }
+
+        .bigechartbox {
+          display: flex;
+          position: relative;
+
+          .title1 {
+            font-size: 18px;
+            font-weight: 400;
+            color: #99b3c8;
+            position: absolute;
+            bottom: -26px;
+            left: 52px;
+          }
+
+          .title2 {
+            position: absolute;
+            font-size: 18px;
+            font-weight: 400;
+            color: #99b3c8;
+            bottom: -26px;
+            right: 58px;
+          }
+        }
+      }
+    }
+
+    .itembottom {
+      margin-top: 19px;
+      display: flex;
+      justify-content: space-around;
+
+      .item-table {
+        width: 929px;
+        height: 403px;
+        background: url("../../../assets/images/equipment/bg-border1.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: 192px;
+          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;
+              }
+            }
+          }
+        }
+      }
+
+      .item-table1:first-child {
+        margin-right: 10px;
+      }
+
+      .item-table1 {
+        flex: 1;
+        margin-top: 20px;
+        padding-top: 19px;
+
+        .table-tbody {
+          height: 144px;
+        }
+      }
+    }
+  }
+}
+
+.titlebox {
+  width: 431px;
+  height: 38px;
+  background: url("../../../assets/images/bg-title.png") no-repeat;
+  background-size: 100% 100%;
+  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;
+}
+
+.factory {
+  display: flex;
+}
+
+.selectborder {
+  background-color: transparent;
+  border-radius: 4px;
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: space-around;
+  width: 280px;
+  margin-left: 50px;
+}
+
+.selectborder1 {
+  background-color: transparent;
+  border-radius: 4px;
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: space-around;
+  width: 66px;
+  margin-left: 25px;
+}
+
+.selectborder select {
+  border: none;
+  outline: none;
+  background-color: transparent;
+  width: 100%;
+  height: 50px;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  font-size: 25px;
+  font-weight: 400;
+  color: #ffffff;
+  line-height: 42px;
+}
+
+.selectborder option {
+  border: none;
+  outline: none;
+  background-color: transparent;
+  width: 100%;
+  height: 50px;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  padding-left: 20px;
+  font-size: 25px;
+  font-weight: 500;
+  color: #3fa2ff;
+  border-radius: 0%;
+}
+
+.selectborder1 option {
+  border: none;
+  outline: none;
+  background-color: transparent;
+  width: 200px;
+  height: 50px;
+  -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-color: #0a162a;
+}
+
+.active2 {
+  background-color: #101f2c;
+}
+
+::-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;
+}
+::v-deep .el-range-editor--medium .el-range-input {
+  font-size: 12px;
+}
+</style>
\ No newline at end of file