diff --git a/src/assets/images/equipment/bg- border1.png b/src/assets/images/equipment/bg- border1.png
new file mode 100644
index 0000000..18aa20a
Binary files /dev/null and b/src/assets/images/equipment/bg- border1.png differ
diff --git a/src/assets/images/equipment/bg-body.png b/src/assets/images/equipment/bg-body.png
new file mode 100644
index 0000000..b6f1a5d
Binary files /dev/null and b/src/assets/images/equipment/bg-body.png differ
diff --git a/src/assets/images/equipment/bg-border1(1).png b/src/assets/images/equipment/bg-border1(1).png
new file mode 100644
index 0000000..475ce73
Binary files /dev/null and b/src/assets/images/equipment/bg-border1(1).png differ
diff --git a/src/assets/images/equipment/bg-border1.png b/src/assets/images/equipment/bg-border1.png
new file mode 100644
index 0000000..475ce73
Binary files /dev/null and b/src/assets/images/equipment/bg-border1.png differ
diff --git a/src/assets/images/equipment/bg-border2(1).png b/src/assets/images/equipment/bg-border2(1).png
new file mode 100644
index 0000000..72f8410
Binary files /dev/null and b/src/assets/images/equipment/bg-border2(1).png differ
diff --git a/src/assets/images/equipment/bg-border2(2).png b/src/assets/images/equipment/bg-border2(2).png
new file mode 100644
index 0000000..72f8410
Binary files /dev/null and b/src/assets/images/equipment/bg-border2(2).png differ
diff --git a/src/assets/images/equipment/bg-border2(3).png b/src/assets/images/equipment/bg-border2(3).png
new file mode 100644
index 0000000..72f8410
Binary files /dev/null and b/src/assets/images/equipment/bg-border2(3).png differ
diff --git a/src/assets/images/equipment/bg-border2.png b/src/assets/images/equipment/bg-border2.png
new file mode 100644
index 0000000..36bb579
Binary files /dev/null and b/src/assets/images/equipment/bg-border2.png differ
diff --git a/src/assets/images/equipment/bg-border3.png b/src/assets/images/equipment/bg-border3.png
new file mode 100644
index 0000000..73cc91c
Binary files /dev/null and b/src/assets/images/equipment/bg-border3.png differ
diff --git a/src/assets/images/equipment/bg-head.png b/src/assets/images/equipment/bg-head.png
new file mode 100644
index 0000000..1ada7d8
Binary files /dev/null and b/src/assets/images/equipment/bg-head.png differ
diff --git a/src/assets/images/equipment/bg-title.png b/src/assets/images/equipment/bg-title.png
new file mode 100644
index 0000000..596c670
Binary files /dev/null and b/src/assets/images/equipment/bg-title.png differ
diff --git a/src/assets/images/equipment/logo.png b/src/assets/images/equipment/logo.png
new file mode 100644
index 0000000..d7e3468
Binary files /dev/null and b/src/assets/images/equipment/logo.png differ
diff --git a/src/assets/images/equipment/number.png b/src/assets/images/equipment/number.png
new file mode 100644
index 0000000..48f70a2
Binary files /dev/null and b/src/assets/images/equipment/number.png differ
diff --git a/src/assets/images/equipment/矩形备份 30(1).png b/src/assets/images/equipment/矩形备份 30(1).png
new file mode 100644
index 0000000..bdf2adc
Binary files /dev/null and b/src/assets/images/equipment/矩形备份 30(1).png differ
diff --git a/src/assets/images/equipment/矩形备份 30(10).png b/src/assets/images/equipment/矩形备份 30(10).png
new file mode 100644
index 0000000..253dcc6
Binary files /dev/null and b/src/assets/images/equipment/矩形备份 30(10).png differ
diff --git a/src/assets/images/equipment/矩形备份 30(11).png b/src/assets/images/equipment/矩形备份 30(11).png
new file mode 100644
index 0000000..bdf2adc
Binary files /dev/null and b/src/assets/images/equipment/矩形备份 30(11).png differ
diff --git a/src/assets/images/equipment/矩形备份 30(12).png b/src/assets/images/equipment/矩形备份 30(12).png
new file mode 100644
index 0000000..253dcc6
Binary files /dev/null and b/src/assets/images/equipment/矩形备份 30(12).png differ
diff --git a/src/assets/images/equipment/矩形备份 30(13).png b/src/assets/images/equipment/矩形备份 30(13).png
new file mode 100644
index 0000000..253dcc6
Binary files /dev/null and b/src/assets/images/equipment/矩形备份 30(13).png differ
diff --git a/src/assets/images/equipment/矩形备份 30(14).png b/src/assets/images/equipment/矩形备份 30(14).png
new file mode 100644
index 0000000..bdf2adc
Binary files /dev/null and b/src/assets/images/equipment/矩形备份 30(14).png differ
diff --git a/src/assets/images/equipment/矩形备份 30(15).png b/src/assets/images/equipment/矩形备份 30(15).png
new file mode 100644
index 0000000..253dcc6
Binary files /dev/null and b/src/assets/images/equipment/矩形备份 30(15).png differ
diff --git a/src/assets/images/equipment/矩形备份 30(2).png b/src/assets/images/equipment/矩形备份 30(2).png
new file mode 100644
index 0000000..253dcc6
Binary files /dev/null and b/src/assets/images/equipment/矩形备份 30(2).png differ
diff --git a/src/assets/images/equipment/矩形备份 30(3).png b/src/assets/images/equipment/矩形备份 30(3).png
new file mode 100644
index 0000000..b1329d9
Binary files /dev/null and b/src/assets/images/equipment/矩形备份 30(3).png differ
diff --git a/src/assets/images/equipment/矩形备份 30(4).png b/src/assets/images/equipment/矩形备份 30(4).png
new file mode 100644
index 0000000..245947c
Binary files /dev/null and b/src/assets/images/equipment/矩形备份 30(4).png differ
diff --git a/src/assets/images/equipment/矩形备份 30(5).png b/src/assets/images/equipment/矩形备份 30(5).png
new file mode 100644
index 0000000..b1329d9
Binary files /dev/null and b/src/assets/images/equipment/矩形备份 30(5).png differ
diff --git a/src/assets/images/equipment/矩形备份 30(6).png b/src/assets/images/equipment/矩形备份 30(6).png
new file mode 100644
index 0000000..245947c
Binary files /dev/null and b/src/assets/images/equipment/矩形备份 30(6).png differ
diff --git a/src/assets/images/equipment/矩形备份 30(7).png b/src/assets/images/equipment/矩形备份 30(7).png
new file mode 100644
index 0000000..b1329d9
Binary files /dev/null and b/src/assets/images/equipment/矩形备份 30(7).png differ
diff --git a/src/assets/images/equipment/矩形备份 30(8).png b/src/assets/images/equipment/矩形备份 30(8).png
new file mode 100644
index 0000000..245947c
Binary files /dev/null and b/src/assets/images/equipment/矩形备份 30(8).png differ
diff --git a/src/assets/images/equipment/矩形备份 30(9).png b/src/assets/images/equipment/矩形备份 30(9).png
new file mode 100644
index 0000000..b1329d9
Binary files /dev/null and b/src/assets/images/equipment/矩形备份 30(9).png differ
diff --git a/src/assets/images/equipment/矩形备份 30.png b/src/assets/images/equipment/矩形备份 30.png
new file mode 100644
index 0000000..253dcc6
Binary files /dev/null and b/src/assets/images/equipment/矩形备份 30.png differ
diff --git a/src/assets/images/equipment/编组 58.png b/src/assets/images/equipment/编组 58.png
new file mode 100644
index 0000000..67b7319
Binary files /dev/null and b/src/assets/images/equipment/编组 58.png differ
diff --git a/src/assets/images/equipment/路径.png b/src/assets/images/equipment/路径.png
new file mode 100644
index 0000000..3db97bb
Binary files /dev/null and b/src/assets/images/equipment/路径.png differ
diff --git a/src/router/index.js b/src/router/index.js
index ceb28b8..6398d8a 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -100,10 +100,10 @@ export const constantRoutes = [
     component: () => import("@/views/kanban/exception/index"),
     hidden: true,
   },
-   // 看板路由
-   {
-    path: "/kanban/3decharts",
-    component: () => import("@/views/kanban/3decharts/index"),
+    // 看板路由
+  {
+    path: "/kanban/equipment",
+    component: () => import("@/views/kanban/equipment/index"),
     hidden: true,
   },
 ]
diff --git a/src/views/kanban/dailyoutput/index.vue b/src/views/kanban/dailyoutput/index.vue
index 04ab31b..935365e 100644
--- a/src/views/kanban/dailyoutput/index.vue
+++ b/src/views/kanban/dailyoutput/index.vue
@@ -1290,7 +1290,7 @@ export default {
   background-color: transparent;
   /*将select的宽高等于div的宽高*/
   width: 100%;
-  height: 50px;
+
   /*隐藏select的下拉图标*/
   -webkit-appearance: none;
   -moz-appearance: none;
diff --git a/src/views/kanban/equipment/index.vue b/src/views/kanban/equipment/index.vue
new file mode 100644
index 0000000..7ac077e
--- /dev/null
+++ b/src/views/kanban/equipment/index.vue
@@ -0,0 +1,1162 @@
+<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="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>
+              <!-- <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.shiftId" v-for="(x, index) in classesList">
+                {{ x.shiftDesc }}
+              </option>
+              <!-- <option :key="index" :value="x.seriesName" v-for="(x, index) in ceshib">{{ x.seriesName }}</option> -->
+            </select>
+          </div>
+        </div>
+        <div class="timebox">
+          <div class="time">
+            {{ gettimedata }}
+          </div>
+        </div>
+      </div>
+      <div class="content">
+        <div class="itemtop">
+          <div class="left">
+            <div class="item-table">
+              <table class="table-thead" border="0" cellpadding="0" cellspacing="0">
+                <thead>
+                  <tr style="height: 44px;">
+                    <td style="width: 8%;">序号</td>
+                    <td style="width: 18%;">设备名称</td>
+                    <td style="width: 20%;">所在部门</td>
+                    <td style="width: 10%;">状态</td>
+                    <td style="width: 12%;">设备故障率</td>
+                    <td style="width: 12%;">设备有效利用率</td>
+                  </tr>
+                </thead>
+              </table>
+              <div class="table-tbody">
+                <!-- <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:48px" :key="index"
+                      v-for="(n, index) in getlist">
+                      <td style="width: 8%;">1</td>
+                      <td style="width: 18%;">测试设备</td>
+                      <td style="width: 20%;">测试部门1</td>
+                      <td style="width: 10%;">在用</td>
+                      <td style="width: 12%;">10%</td>
+                      <td style="width: 12%;">90%</td>
+                    </tr>
+                  </tbody>
+                </table>
+                <!-- </vue-seamless-scroll> -->
+              </div>
+            </div>
+            <div class="item-table item-table1">
+              <div class="titlebox" style="margin-bottom: 14px;">
+                <div class="titlename">维修工单</div>
+              </div>
+              <table class="table-thead" border="0" cellpadding="0" cellspacing="0">
+                <thead>
+                  <tr style="height: 44px;">
+                    <td style="width: 8%;">序号</td>
+                    <td style="width: 12%;">设备名称</td>
+                    <td style="width: 12%;">设备编码</td>
+                    <td style="width: 12%;">设备位置</td>
+                    <td style="width: 12%;">故障原因</td>
+                    <td style="width: 12%;">维修组</td>
+                    <td style="width: 10%;">是否立即维修</td>
+                    <td style="width: 18%;">维修时间</td>
+
+                  </tr>
+                </thead>
+              </table>
+              <div class="table-tbody">
+                <!-- <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:48px" :key="index"
+                      v-for="(n, index) in getlist">
+                      <td style="width: 8%;">1</td>
+                      <td style="width: 12%;">测试设备</td>
+                      <td style="width: 12%;">BM000001</td>
+                      <td style="width: 12%;">位置1</td>
+                      <td style="width: 12%;">故障原因1</td>
+                      <td style="width: 12%;">维修组</td>
+                      <td style="width: 10%;">是</td>
+                      <td style="width: 18%;">2023-11-07 08:30:33</td>
+                    </tr>
+                  </tbody>
+                </table>
+                <!-- </vue-seamless-scroll> -->
+              </div>
+            </div>
+          </div>
+          <div class="right">
+            <div class="echart1title">
+              完好设备占比
+            </div>
+            <div class="echartbox" id="echart1" style="margin: auto;  margin-top: 60px;width: 395px; height: 175px">
+
+            </div>
+            <div class="equipmentinfobox">
+              <div class="box">
+                <div class="number">
+                  <span class="number1">
+                    24
+                  </span>
+                  <span class="name1">
+                    台
+                  </span>
+                </div>
+                <div class="name2">
+                  设备总数
+                </div>
+              </div>
+              <div class="box">
+                <div class="number">
+                  <span class="number1">
+                    24
+                  </span>
+                  <span class="name1">
+                    台
+                  </span>
+                </div>
+                <div class="name2">
+                  设备总数
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="itembottom">
+          <div class="item-table item-table1">
+            <div class="titlebox" style="margin-bottom: 14px;">
+              <div class="titlename">设备综合效率</div>
+            </div>
+            <table class="table-thead" border="0" cellpadding="0" cellspacing="0">
+              <thead>
+                <tr style="height: 44px;">
+                  <td style="width: 8%;">排名</td>
+                  <td style="width: 12%;">设备名称</td>
+                  <td style="width: 12%;">设备OEE</td>
+
+                </tr>
+              </thead>
+            </table>
+            <div class="table-tbody">
+              <!-- <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:48px" :key="index"
+                    v-for="(n, index) in getlist">
+                    <td style="width: 8%;">1</td>
+                    <td style="width: 12%;">测试设备</td>
+                    <td style="width: 12%;">88%</td>
+                  </tr>
+                </tbody>
+              </table>
+              <!-- </vue-seamless-scroll> -->
+            </div>
+          </div>
+          <div class="item-table item-table1">
+            <div class="titlebox" style="margin-bottom: 14px;">
+              <div class="titlename">设备稳定性</div>
+            </div>
+            <table class="table-thead" border="0" cellpadding="0" cellspacing="0">
+              <thead>
+                <tr style="height: 44px;">
+                  <td style="width: 8%;">排名</td>
+                  <td style="width: 12%;">设备名称</td>
+                  <td style="width: 12%;">MTBF</td>
+
+                </tr>
+              </thead>
+            </table>
+            <div class="table-tbody">
+              <!-- <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:48px" :key="index"
+                    v-for="(n, index) in getlist">
+                    <td style="width: 8%;">1</td>
+                    <td style="width: 12%;">测试设备</td>
+                    <td style="width: 12%;">88%</td>
+                  </tr>
+                </tbody>
+              </table>
+              <!-- </vue-seamless-scroll> -->
+            </div>
+          </div>
+          <div class="item-table item-table1">
+            <div class="titlebox" style="margin-bottom: 14px;">
+              <div class="titlename">设备维修质量</div>
+            </div>
+            <table class="table-thead" border="0" cellpadding="0" cellspacing="0">
+              <thead>
+                <tr style="height: 44px;">
+                  <td style="width: 8%;">排名</td>
+                  <td style="width: 12%;">设备名称</td>
+                  <td style="width: 12%;">设备OEE</td>
+
+                </tr>
+              </thead>
+            </table>
+            <div class="table-tbody">
+              <!-- <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:48px" :key="index"
+                    v-for="(n, index) in getlist">
+                    <td style="width: 8%;">1</td>
+                    <td style="width: 12%;">测试设备</td>
+                    <td style="width: 12%;">88%</td>
+                  </tr>
+                </tbody>
+              </table>
+              <!-- </vue-seamless-scroll> -->
+            </div>
+          </div>
+        </div>
+      </div>
+      <!-- <div class="item"></div> -->
+      <!-- <div class="item"></div> -->
+    </div>
+  </v-scale-screen>
+</template>
+
+<script>
+import {
+  getBoardFactory,
+  getMesBoardEquProductionToday,
+  getBoardShifts,
+} from "@/api/kanban/dailyoutput";
+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: [],
+      colorlist: ["#005aff", "#f8b551"],
+      datetime: null,
+      time1: null,
+      getlist: [
+        {
+
+        },
+        {
+
+        },
+        {
+
+        },
+        {
+
+        },
+        {
+
+},
+      ],
+    };
+  },
+  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.selectFactorylist();
+    this.gettime();
+    this.initChart1();
+  },
+  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);
+    },
+    selectFactorylist() {
+      const _this = this;
+      getBoardFactory({
+        factory: null,
+      }).then((response) => {
+        if (response.data) {
+          _this.getLineList = response.data;
+          _this.selectxt = _this.getLineList[0].parentName;
+          getBoardShifts({
+            factory: _this.selectxt,
+          }).then((response) => {
+            if (response.data) {
+              console.log(response.data);
+              _this.classesList = response.data;
+              _this.selectxtclasses = _this.classesList[0].shiftId;
+              _this.initChart1();
+              _this.time1 = setInterval(() => {
+                _this.initChart1();
+              }, 1000 * 60 * 1);
+            }
+          });
+        }
+
+
+
+      });
+    },
+    initChart1() {
+
+      var myChart1 = echarts.init(document.querySelector("#echart1"));
+      var option1 = {
+        //提示框组件。开发实际中去掉了指针，提示框可以不用设置。
+        tooltip: {
+          formatter: "{a} <br/>{b} : {c}%",
+        },
+        grid: {
+        },
+        //下面属性才是仪表盘的核心！！反正我是这么认为的！！！
+        series: [
+          {
+            //类型
+            splitNumber: 4, //刻度数量
+            type: "gauge",
+            //半径
+            radius: 155,
+            //起始角度。圆心 正右手侧为0度，正上方为90度，正左手侧为180度。
+            startAngle: 180,
+            //结束角度。
+            endAngle: 0,
+            center: ["50%", "100%"],
+            //仪表盘轴线相关配置。
+            name: "内层盘",
+            type: "gauge",
+            axisLine: {
+              lineStyle: {
+                width: 10,
+                color: [
+                  [
+                    1,
+                    new echarts.graphic.LinearGradient(0, 0, 1, 0, [
+                      {
+                        offset: 0,
+                        color: "#040610",
+                      },
+                      {
+                        offset: 0.2,
+                        color: "#083782",
+                      },
+                      {
+                        offset: 0.5,
+                        color: "#0E5EFD",
+                      },
+                      {
+                        offset: 0.8,
+                        color: "#083782",
+                      },
+                      {
+                        offset: 1,
+                        color: "#040610",
+                      },
+                    ]),
+                  ],
+                ],
+              },
+            },
+            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: 115,
+            //起始角度。圆心 正右手侧为0度，正上方为90度，正左手侧为180度。
+            startAngle: 180,
+            //结束角度。
+            endAngle: 0,
+            center: ["50%", "100%"],
+            //仪表盘轴线相关配置。
+            name: "内层盘",
+            type: "gauge",
+            axisLine: {
+              lineStyle: {
+                width: 25,
+                color: [
+                  [
+                    1,
+                    new echarts.graphic.LinearGradient(0, 0, 1, 0, [
+                      {
+                        offset: 0.1,
+                        color: "#3E82FF",
+                      },
+                      {
+                        offset: 0.6,
+                        color: "#65FBFF",
+                      },
+                      {
+                        offset: 1,
+                        color: "#23317D",
+                      },
+                    ]),
+                  ],
+                ],
+              },
+            },
+            axisTick: {
+              lineStyle: {
+                color: "#fff",
+                width: 1,
+              },
+              length: 6,
+              splitNumber: 1,
+              show: false,
+            },
+            splitLine: {
+              show: false,
+            },
+            axisLabel: {
+              show: false,
+            },
+            pointer: {
+              show: false,
+            },
+            axisLabel: {
+              show: false,
+            },
+            data: [
+              {
+                show: false,
+                value: "0",
+              },
+            ],
+            detail: {
+              show: false,
+            },
+          },
+          {
+            //类型
+            splitNumber: 4, //刻度数量
+            type: "gauge",
+            //半径
+            radius: 115,
+            //起始角度。圆心 正右手侧为0度，正上方为90度，正左手侧为180度。
+            startAngle: 18,
+            //结束角度。
+            endAngle: 0,
+            center: ["50%", "100%"],
+            //仪表盘轴线相关配置。
+            name: "内层盘",
+            type: "gauge",
+            axisLine: {
+              lineStyle: {
+                width: 25,
+                color: [
+                  [
+                    1,
+                    new echarts.graphic.LinearGradient(0, 0, 1, 0, [
+                      {
+                        offset: 0.1,
+                        color: "#351A0E",
+                      },
+                      {
+                        offset: 0.6,
+                        color: "#363121",
+                      },
+                      {
+                        offset: 1,
+                        color: "#351A0E",
+                      },
+                    ]),
+                  ],
+                ],
+              },
+            },
+            axisTick: {
+              lineStyle: {
+                color: "#fff",
+                width: 1,
+              },
+              length: 6,
+              splitNumber: 1,
+              show: false,
+            },
+            splitLine: {
+              show: false,
+            },
+            axisLabel: {
+              show: false,
+            },
+            pointer: {
+              show: false,
+            },
+            axisLabel: {
+              show: false,
+            },
+            data: [
+              {
+                show: false,
+                value: "0",
+              },
+            ],
+            detail: {
+              show: false,
+            },
+          },
+
+          {
+            //类型
+            color: "#fff",
+            splitNumber: 4, //刻度数量
+            type: "gauge",
+            name: '完好设备占比',
+            //半径
+            radius: 135,
+            //起始角度。圆心 正右手侧为0度，正上方为90度，正左手侧为180度。
+            startAngle: 180,
+            //结束角度。
+            endAngle: 0,
+            center: ["50%", "100%"],
+            //仪表盘轴线相关配置。
+            axisLine: {
+              show: true,
+              // 属性lineStyle控制线条样式
+              lineStyle: {
+                width: 20,
+                color: [
+                  [
+                    1,
+                    new echarts.graphic.LinearGradient(0, 0, 1, 0, [
+                      {
+                        offset: 0.1,
+                        color: "#3A76F0",
+                      },
+                      {
+                        offset: 0.6,
+                        color: "#23327E",
+                      },
+                      {
+                        offset: 1,
+                        color: "#3A76F0",
+                      },
+                    ]),
+                  ],
+                ],
+              },
+            },
+            //分隔线样式。
+            splitLine: {
+              show: false,
+            },
+            //刻度样式。
+            axisTick: {
+              // show: false,
+              splitNumber: 8,
+              length: 20,
+              lineStyle: {
+                color: "#04060F",
+              },
+              distance: -20,
+            },
+            //刻度标签。
+            axisLabel: {
+              // splitNumber: 10,
+              // distance: -12,
+              // fontSize: 17,
+              color: "#ffffff",
+              show: false,
+            },
+            //仪表盘指针。
+            pointer: {
+              //这个show属性好像有问题，因为在这次开发中，需要去掉指正，我设置false的时候，还是显示指针，估计是BUG吧，我用的echarts-3.2.3；希望改进。最终，我把width属性设置为0，成功搞定！
+              show: false,
+              //指针长度
+              length: "90%",
+              width: 0,
+            },
+            //仪表盘标题。
+            title: {
+              show: true,
+              offsetCenter: [0, "40%"], // x, y，单位px
+              color: "#fff",			// 文字的颜色,默认 #333。
+              fontSize: 20,
+            },
+            //仪表盘详情，用于显示数据。
+            detail: {
+              show: true,
+              valueAnimation: true,
+              formatter: "{value}%",
+              offsetCenter: [0, "-10%"],
+              textStyle: {
+                color: "#fff",
+                fontSize: 30,
+              },
+
+            },
+            data: [
+              {
+                value: 10,
+              },
+
+            ],
+          },
+        ],
+      };
+      myChart1.setOption(option1);
+    },
+    selectline() {
+      const _this = this;
+      this.optionDatalist1 = [];
+      this.optionDatalist2 = [];
+      this.optionDatalist3 = [];
+      this.optionDatalist4 = [];
+      getBoardShifts({
+        factory: _this.selectxt,
+      }).then((response) => {
+        if (response.data) {
+          console.log(response.data);
+          _this.classesList = response.data;
+          _this.selectxtclasses = _this.classesList[0].shiftId;
+          _this.initChart1();
+        }
+      });
+    },
+    selectline2() {
+      this.initChart1();
+    },
+    //左侧第一个选择类型下拉框 回调函数
+  },
+};
+</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;
+
+    .factory {
+      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;
+
+    .itemtop {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+
+      .left {
+        .item-table {
+          width: 1243px;
+          height: 292px;
+          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: 1197px;
+            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;
+            // 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
+                }
+              }
+            }
+          }
+        }
+
+        .item-table1 {
+          margin-top: 20px;
+          padding-top: 19px;
+
+          .table-tbody {
+            height: 144px;
+          }
+        }
+      }
+
+      .right {
+        margin-left: 23px;
+        width: 610px;
+        height: 604px;
+        background: url('../../../assets/images/equipment/bg-border1.png') no-repeat;
+        background-size: 100% 100%;
+        // padding: 27px 21px 30px 25px;
+        box-sizing: border-box;
+        position: relative;
+
+        .echartbox {
+          margin-top: 50px;
+        }
+
+        .echart1title {
+          display: inline-table;
+          position: absolute;
+          top: -27px;
+          left: 0px;
+          bottom: 0px;
+          right: 0px;
+          margin: auto;
+          z-index: 9999;
+          font-size: 24px;
+          font-weight: bold;
+          color: #FFFFFF;
+        }
+
+        .equipmentinfobox {
+          margin-top: 105px;
+          display: flex;
+          align-items: center;
+          justify-content: space-around;
+
+          .box {
+            width: 186px;
+            height: 180px;
+            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: 60px;
+                font-weight: 500;
+                color: #66FFFF;
+              }
+
+              .name1 {
+                font-size: 32px;
+                font-weight: 400;
+                color: #FFFFFF;
+              }
+            }
+
+            .name2 {
+              margin-top: 15px;
+              font-size: 32px;
+              font-weight: bold;
+              color: #FFFFFF;
+            }
+          }
+        }
+      }
+    }
+
+    .itembottom {
+      margin-top: 19px;
+      display: flex;
+      justify-content: space-around;
+      .item-table {
+        width: 610px;
+        height: 292px;
+        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: 1197px;
+          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;
+          // 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
+              }
+            }
+          }
+        }
+      }
+
+      .item-table1 {
+        margin-top: 20px;
+        padding-top: 19px;
+
+        .table-thead {
+          width: 565.01px;
+        }
+
+        .table-tbody {
+          height: 144px;
+        }
+      }
+    }
+  }
+}
+
+.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;
+  //   }
+}
+
+.factory {
+  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: 310px;
+  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: 88px;
+  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-color: #0D1B2F;
+}
+
+.active2 {
+  // background-color: #04060E;
+}
+::-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;
+}
+</style>