From 0935a2a74fb551499edd3193352a8fff6f1fd9ec Mon Sep 17 00:00:00 2001
From: "LAPTOP-R6EHHS26\\86155" <2217640373@qq.com>
Date: Fri, 10 May 2024 17:06:13 +0800
Subject: [PATCH] =?UTF-8?q?=E6=96=B0=E5=A2=9E=E7=83=98=E6=88=BF=E7=94=9F?=
 =?UTF-8?q?=E4=BA=A7=E7=9B=91=E6=8E=A7=E7=9C=8B=E6=9D=BF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/kanban/dryingprocess.js          |   26 +
 src/views/kanban/Dryingprocess/index.vue | 1051 ++++++++++++++++++----
 src/views/kanban/exceptionnew/index.vue  |    1 +
 3 files changed, 912 insertions(+), 166 deletions(-)
 create mode 100644 src/api/kanban/dryingprocess.js

diff --git a/src/api/kanban/dryingprocess.js b/src/api/kanban/dryingprocess.js
new file mode 100644
index 0000000..23c0fdb
--- /dev/null
+++ b/src/api/kanban/dryingprocess.js
@@ -0,0 +1,26 @@
+import request from '@/utils/request'
+
+// /**烘房生产监控看板--当天烘房情况**/
+export function getHEProInfo(data) {
+	return request({
+		url: '/mes/mesborad/getHFProInfo',
+		method: 'post',
+		data: data
+	});
+}
+///**烘房生产监控看板--当天质量情况**/
+export function getHFQcInfo(data) {
+	return request({
+		url: '/mes/mesborad/getHFQcInfo',
+		method: 'post',
+		data: data
+	});
+}
+// /**烘房生产监控看板--效率分析**/
+export function getHFxlInfo(data) {
+	return request({
+		url: '/mes/mesborad/getHFxlInfo',
+		method: 'post',
+		data: data
+	});
+}
diff --git a/src/views/kanban/Dryingprocess/index.vue b/src/views/kanban/Dryingprocess/index.vue
index b4a03ce..a7e8cc1 100644
--- a/src/views/kanban/Dryingprocess/index.vue
+++ b/src/views/kanban/Dryingprocess/index.vue
@@ -13,37 +13,165 @@
               <div class="name name1">当天烘房情况</div>
             </div>
             <div class="cards">
-              <div
-                class="card-item"
-                :class="[[index + 1] % 7 == 0 ? 'isactive' : 'active1']"
-              >
+              <div class="card-item">
                 <div class="card-header">
                   <span class="card-header-left"
-                    >生产总数:<span class="color1">80</span>车</span
+                    >生产总数:
+                    <span class="color1">{{ Dailyoutputnumber || "0" }}</span>
+                    车</span
                   >
                 </div>
-                <div
-                  class="card-box"
-                  v-for="(card, index) in dataPropceshidata"
-                  :key="index"
-                ></div>
+                <div class="card-box">
+                  <div class="list1">
+                    <div class="listitem1 header4">烘房</div>
+                    <div class="listitem1 header5">产量</div>
+                    <div class="listitem1 header6">标准产能</div>
+                  </div>
+                </div>
+                <div class="card-box card-box1">
+                  <div
+                    class="list"
+                    v-for="(card, index) in Dailyoutput"
+                    :key="index"
+                  >
+                    <div class="listitem2"></div>
+                    <div
+                      class="listitem1"
+                      style="min-width: 55px; text-align: center"
+                    >
+                      {{ card.equCode }}
+                    </div>
+                    <div
+                      class="listitem1"
+                      style="min-width: 145px; text-align: center"
+                    >
+                      {{ card.totalNum }}
+                    </div>
+                    <div
+                      class="listitem1"
+                      style="min-width: 120px; text-align: center"
+                    >
+                      {{ card.unitPro }}
+                    </div>
+                  </div>
+                </div>
               </div>
             </div>
           </div>
           <div class="left left1">
             <div class="cards">
-              <div
-                class="card-item card-item1"
-                :class="[[index + 1] % 7 == 0 ? 'isactive' : 'active1']"
-              >
-                <div class="card-header">
-                  <span class="card-header-left">烘房</span>
+              <div class="card-item card-item1">
+                <div class="swiper-container" style="height: 100%">
+                  <div class="swiper-wrapper">
+                    <div
+                      class="lefttop swiper-slide"
+                      v-for="(card, index) in dataPropdata"
+                      :key="index"
+                    >
+                      <div class="card-header1">
+                        <span class="card-header-left1">烘房{{ card.i }}</span>
+                      </div>
+                      <div class="boximage">
+                        <div class="card-footer">
+                          <div class="card-footer-item">
+                            <div class="footer-detail">
+                              <span
+                                :style="{
+                                  fontSize: '22px',
+                                  fontWeight: 'bold',
+                                  color: '#FDA45D',
+                                  textAlign: 'right',
+                                }"
+                              >
+                                {{ getTagModel(card.status) }}
+                              </span>
+                            </div>
+                            <div class="footer-title">烘房模式</div>
+                          </div>
+                          <div
+                            class="card-footer-item"
+                            style="margin-top: 80px"
+                          >
+                            <div class="footer-detail">
+                              <span
+                                style="
+                                  font-size: 22px;
+                                  font-weight: bold;
+                                  color: #fda45d;
+                                  text-align: right;
+                                "
+                                >{{ card.temperature }}
+                                <span
+                                  style="
+                                    font-weight: normal;
+                                    font-size: 18px;
+                                    color: #ffffff;
+                                  "
+                                  >℃</span
+                                ></span
+                              >
+                            </div>
+                            <div class="footer-title">烘房温度</div>
+                          </div>
+                        </div>
+                        <div class="image1">
+                          <img
+                            src=""
+                            alt="暂无图片"
+                          />
+                        </div>
+                        <div class="card-footer">
+                          <div class="card-footer-item">
+                            <div class="footer-detail">
+                              <span
+                                :style="{
+                                  fontSize: '22px',
+                                  fontWeight: 'bold',
+                                  color: '#93FE66',
+                                  textAlign: 'right',
+                                }"
+                              >
+                                {{ getTagText(card.dollyNumber) }}
+                              </span>
+                            </div>
+                            <div class="footer-title">门前数量</div>
+                          </div>
+                          <div
+                            class="card-footer-item"
+                            style="margin-top: 80px"
+                          >
+                            <div class="footer-detail">
+                              <span
+                                style="
+                                  font-size: 22px;
+                                  font-weight: bold;
+                                  color: #93fe66;
+                                  text-align: right;
+                                "
+                                >{{ card.waitmin }}
+                                <span
+                                  style="
+                                    font-weight: normal;
+                                    font-size: 18px;
+                                    color: #ffffff;
+                                  "
+                                  >min</span
+                                ></span
+                              >
+                            </div>
+                            <div class="footer-title">保持时长</div>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                    <!-- <div class="lefttop swiper-slide">
+                      <div class="card-header1">
+                        <span class="card-header-left1">烘房</span>
+                      </div>
+                    </div> -->
+                  </div>
+                  <div class="swiper-pagination"></div>
                 </div>
-                <div
-                  class="card-box"
-                  v-for="(card, index) in dataPropceshidata"
-                  :key="index"
-                ></div>
               </div>
             </div>
           </div>
@@ -52,30 +180,46 @@
               <div class="name name1">当天质量情况</div>
             </div>
             <div class="cards">
-              <div
-                class="card-item"
-                :class="[[index + 1] % 7 == 0 ? 'isactive' : 'active1']"
-              >
+              <div class="card-item">
                 <div class="card-header">
                   <span class="card-header-left"
-                    >车不合格异常数量: <span class="color2">04</span> 车</span
+                    >不合格异常数量:
+                    <span class="color2">{{ Qualitydaynumber || "0" }}</span>
+                    车</span
                   >
                 </div>
                 <div class="card-box">
                   <div class="list1">
-                    <div class="listitem1">烘房</div>
-                    <div class="listitem1">产量</div>
-                    <div class="listitem1">标准产能</div>
+                    <div class="listitem1 header1">烘房</div>
+                    <div class="listitem1 header2">托盘号</div>
+                    <div class="listitem1 header3">不合格车数</div>
                   </div>
                 </div>
-                <div
-                  class="card-box card-box1"
-                >
-                  <div class="list" v-for="(card, index) in dataPropceshidata"
-                  :key="index">
-                    <div class="listitem1">烘房</div>
-                    <div class="listitem1">产量</div>
-                    <div class="listitem1">标准产能</div>
+                <div class="card-box card-box1">
+                  <div
+                    class="list"
+                    v-for="(card, index) in Qualityday"
+                    :key="index"
+                  >
+                    <div class="listitem2"></div>
+                    <div
+                      class="listitem1"
+                      style="min-width: 80px; text-align: center"
+                    >
+                      {{ card.equCode }}
+                    </div>
+                    <div
+                      class="listitem1"
+                      style="min-width: 120px; text-align: center"
+                    >
+                      {{ card.rfid }}
+                    </div>
+                    <div
+                      class="listitem1"
+                      style="min-width: 170px; text-align: center"
+                    >
+                      {{ card.taskNum || "0" }}
+                    </div>
                   </div>
                 </div>
               </div>
@@ -83,7 +227,19 @@
           </div>
         </div>
         <div class="itembottom">
-          <div class="left"></div>
+          <div class="left">
+            <div class="box">
+              <div class="name name1">当天烘房情况</div>
+            </div>
+            <div class="cards">
+              <div class="card-item">
+                <div
+                  id="echart1"
+                  style="margin: auto; width: 1770px; height: 340px"
+                ></div>
+              </div>
+            </div>
+          </div>
         </div>
       </div>
       <!-- <div class="item"></div> -->
@@ -94,20 +250,17 @@
   
   <script>
 import {
-  getBoardFactory,
-  getMesBoardEquProductionToday,
-  getBoardShifts,
-  getRepairWorkOrder,
-  getEquipmentInfo,
-  getRepairQuantity,
-  equipmentIntactRate,
-  equipmentStability,
-  getDeviceRefreshTime,
-  getdictlist,
-} from "@/api/kanban/equipment";
+  getHFxlInfo,
+  getHFQcInfo,
+  getHEProInfo,
+} from "@/api/kanban/dryingprocess";
 import { dryRoomDataCarousel } from "@/api/kanban/dryingroom";
 import * as echarts from "echarts";
 import moment from "moment";
+import Swiper from "swiper";
+import { getDeviceRefreshTime } from "@/api/kanban/equipment";
+// 引入css
+import "swiper/css/swiper.min.css";
 // import Echarts3D from "./echarts3d.vue";
 // import Echarts3D2 from "./echarts3d2.vue";
 export default {
@@ -142,6 +295,7 @@ export default {
       colorlist: ["#005aff", "#f8b551"],
       datetime: null,
       time1: null,
+      time2: null,
       getlist: [],
       repairlist: [],
       equipmentlist: [],
@@ -151,26 +305,35 @@ export default {
       RefreshTime: null,
       dictlist: [],
       StartArray: [],
-      dataPropceshidata: [{}, {}, {}, {}, {}, {}],
-      dataPropdata: [],
+      Dailyoutput: [],
+      Qualityday: [],
+      echartsdata: [],
       cards: {
         data1: [],
         data2: [],
       },
       cardss: [],
+      swiper: null,
+      swiperList: [],
+      Dailyoutputnumber: null,
+      Qualitydaynumber: null,
+      dataPropdata: [],
     };
   },
   created() {},
   destroyed() {
     clearInterval(this.time1);
     this.time1 = null;
+    clearInterval(this.time2);
+    this.time2 = null;
   },
   mounted() {
     // this.datetime = moment().subtract(2, "day").format("yyyy-MM-DD");
     //console.log('zhuanhuahou',this.dateRangeone)
-    const { createData } = this;
-    createData();
     this.gettime();
+    this.getSwiper();
+    this.getDeviceRefreshTime()
+
   },
   methods: {
     back() {
@@ -203,7 +366,7 @@ export default {
     },
     gettime() {
       this.gettimedata = moment().format("YYYY-MM-DD HH:mm:ss ");
-      setInterval(() => {
+      this.time1 = setInterval(() => {
         this.gettimedata = moment().format("YYYY-MM-DD HH:mm:ss ");
       }, 1000);
     },
@@ -214,106 +377,402 @@ export default {
       this.optionDatalist3 = [];
       this.optionDatalist4 = [];
     },
-    createData() {
-      this.cards.data1 = new Array(8).fill(0).map((foo, i) => ({
-        i: i + 1,
-      }));
-      this.cards.data2 = new Array(8).fill(0).map((foo, i) => ({
-        i: i + 9,
-      }));
-      this.cards.data3 = new Array(5).fill(0).map((foo, i) => ({
-        i: i === 0 ? 17 : i === 1 ? 18 : i === 2 ? 61 : i === 3 ? 62 : 63,
-      }));
-      // console.log(this.cards.data1)
+    getSwiper() {
+      this.swiper = new Swiper(".swiper-container", {
+        loop: true, // 无缝
+        autoplay: {
+          //自动开始
+          delay: 2000, //时间间隔
+          disableOnInteraction: false, //*手动操作轮播图后不会暂停*
+        },
+        // paginationClickable: true,
+        // slidesPerView: 1, // 一组三个
+        spaceBetween: 90, // 间隔
+        // 如果需要前进后退按钮
+        // navigation: {
+        //   nextEl: '.swiper-button-next',
+        //   prevEl: '.swiper-button-prev',
+        // },
+        // 窗口变化,重新init,针对F11全屏和放大缩小,必须加
+        observer: true,
+        observeParents: true,
+        // 如果需要分页器
+        pagination: {
+          el: ".swiper-pagination",
+          clickable: true, // 分页器可以点击
+        },
+      });
+    },
+    initChart1() {
+      const _this = this;
+      var xData = [];
+      var data1 = [];
+      var data4 = [];
+      var data0 = [];
+      _this.echartsdata.forEach((item) => {
+        xData.push(item.equCode);
+        data1.push(item.totalNum0);
+        data4.push(item.totalNum);
+        data0.push(1);
+      });
+      var data3 = [];
+      var data5 = [];
+      for (let i = 0; i < data1.length; i++) {
+        data3.push(data1[i] + data4[i]);
+      }
+      for (let i = 0; i < data1.length; i++) {
+        data5.push(data1[i]);
+      }
+      let max = Math.max(...data3);
+      var myChart1 = echarts.init(document.querySelector("#echart1"));
+      var option1 = {
+        // backgroundColor: "#000E1A", //背景色
+        tooltip: {
+          trigger: "axis",
+          borderColor: "rgba(255,255,255,.3)",
+          backgroundColor: "rgba(13,5,30,.6)",
+          textStyle: {
+            color: "white", //设置文字颜色
+          },
+          borderWidth: 1,
+          padding: 5,
+          formatter: function (parms) {
+            var str =
+              "烘房:" +
+              parms[0].axisValue +
+              "</br>" +
+              parms[0].marker +
+              "入:" +
+              parms[0].value +
+              "</br>" +
+              parms[1].marker +
+              "出:" +
+              parms[1].value +
+              "</br>";
+            return str;
+          },
+        },
+        textStyle: {
+          color: "#C9C9C9",
+        },
+
+        // color: ['#fbc292', '#06fbfe',  '#f06e91'],
+        legend: {
+          // type: "scroll",
+          // orient: "vertical",
+          selectedMode: false, //图例点击失效
+          right: "2%",
+          top: "1%",
+          textStyle: {
+            color: "#ffffff",
+            fontSize: 22,
+          },
+
+          // data: datas.legendData,
+        },
+        grid: {
+          containLabel: true,
+          left: "1%",
+          top: "10%",
+          bottom: "1%",
+          right: "1%",
+        },
+        xAxis: {
+          type: "category",
+          data: xData,
+          axisLine: {
+            show: true,
+            lineStyle: {
+              color: "#B5B5B5",
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {
+              // 使用深浅的间隔色
+              color: ["#B5B5B5"],
+              type: "dashed",
+              opacity: 0.5,
+            },
+          },
+          axisLabel: {
+            margin: 20, //刻度标签与轴线之间的距离。
+            textStyle: {
+              fontFamily: "Microsoft YaHei",
+              color: "#7F889B",
+            },
+            fontSize: 18,
+            fontStyle: "bold",
+          },
+          data: xData,
+        },
+        yAxis: [
+          {
+            type: "value",
+            min: 0,
+            max: max + 10,
+            splitNumber: 5,
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#B5B5B5",
+              },
+            },
+            splitLine: {
+              show: true,
+              lineStyle: {
+                // 使用深浅的间隔色
+                color: ["#B5B5B5"],
+                type: "dashed",
+                opacity: 0.5,
+              },
+            },
+            axisLabel: {
+              show: true,
+              textStyle: {
+                fontFamily: "Microsoft YaHei",
+                color: "#FFF",
+              },
+              fontSize: 20,
+            },
+          },
+        ],
+        series: [
+          {
+            type: "bar",
+            name: "入",
+            data: data1,
+            stack: "zs",
+            barMaxWidth: "auto",
+            showBackground: true,
+            zlevel: -1,
+            barWidth: 60,
+            // color: "#40CB89",
+            itemStyle: {
+              color: {
+                x: 0,
+                y: 0,
+                x2: 0,
+                y2: 1,
+                type: "linear",
+                global: false,
+                colorStops: [
+                  {
+                    offset: 0,
+                    color: "#23B780",
+                  },
+                  {
+                    offset: 1,
+                    color: "#64E490",
+                  },
+                ],
+              },
+              normal: {
+                color: "#40CB89",
+                barBorderRadius: 0,
+
+                label: {
+                  show: true,
+                  position: "inside",
+                  color: "white",
+                  fontSize: 20,
+                  formatter: function (p) {
+                    return p.value > 0 ? p.value : "";
+                  },
+                },
+              },
+            },
+            backgroundStyle: {
+              color: "#0E4271", // 设置背景颜色
+            },
+          },
+          {
+            name: "出",
+            type: "bar",
+            data: data4,
+            stack: "zs",
+            barMaxWidth: "auto",
+            zlevel: -1,
+            barWidth: 60,
+            itemStyle: {
+              color: {
+                x: 0,
+                y: 0,
+                x2: 0,
+                y2: 1,
+                type: "linear",
+                global: false,
+                colorStops: [
+                  {
+                    offset: 0,
+                    color: "#0C75FF",
+                  },
+                  {
+                    offset: 1,
+                    color: "#01A5FE",
+                  },
+                ],
+              },
+              normal: {
+                color: "#0886FE",
+                barBorderRadius: 0,
+                label: {
+                  show: true,
+                  position: "top",
+                  color: "white",
+                  fontSize: 20,
+                  formatter: function (p) {
+                    return p.value > 0 ? p.value : "";
+                  },
+                },
+              },
+            },
+          },
+          {
+            data: data0,
+            type: "pictorialBar",
+            barMaxWidth: "20",
+            symbol: "diamond",
+            symbolOffset: [0, "50%"],
+            symbolSize: [60, 20],
+            zlevel: 2,
+            itemStyle: {
+              normal: {
+                color: "#23B780",
+              },
+            },
+          },
+          {
+            data: data1,
+            type: "pictorialBar",
+            barMaxWidth: "20",
+            symbolPosition: "end",
+            symbol: "diamond",
+            symbolOffset: [0, "-50%"],
+            symbolSize: [60, 20],
+            zlevel: 2,
+          },
+          {
+            data: data1,
+            type: "pictorialBar",
+            barMaxWidth: "20",
+            symbolPosition: "end",
+            symbol: "diamond",
+            symbolOffset: [0, "-50%"],
+            symbolSize: [60, 20],
+            zlevel: 2,
+          },
+          {
+            data: data5,
+            type: "pictorialBar",
+            barMaxWidth: "20",
+            symbolPosition: "end",
+            symbol: "diamond",
+            symbolOffset: [0, "-50%"],
+            symbolSize: [0, 20],
+            zlevel: 2,
+          },
+          {
+            data: data5,
+            type: "pictorialBar",
+            barMaxWidth: "20",
+            symbolPosition: "end",
+            symbol: "diamond",
+            symbolOffset: [0, "-50%"],
+            symbolSize: [60, 20],
+            zlevel: 2,
+            itemStyle: {
+              normal: {
+                color: "#64E490",
+              },
+            },
+          },
+          {
+            data: data3,
+            type: "pictorialBar",
+            barMaxWidth: "20",
+            symbolPosition: "end",
+            symbol: "diamond",
+            symbolOffset: [0, "-50%"],
+            symbolSize: [60, 20],
+            zlevel: 2,
+            itemStyle: {
+              normal: {
+                color: "#54BBF3",
+              },
+            },
+          },
+        ],
+      };
+      myChart1.setOption(option1);
+    },
+    getDatalist() {
+      const _this = this;
+
+      getHEProInfo({
+        factoryCode: "ds_999",
+      }).then((response) => {
+        if (response) {
+          if (response.data) {
+            _this.Dailyoutputnumber = 0;
+            _this.Dailyoutput = response.data;
+            _this.Dailyoutput.forEach((item) => {
+              if (item.totalNum != null) {
+                _this.Dailyoutputnumber =
+                  parseFloat(item.totalNum) +
+                  parseFloat(_this.Dailyoutputnumber);
+              }
+            });
+          }
+        }
+      });
+      getHFQcInfo({
+        factoryCode: "ds_999",
+      }).then((response) => {
+        if (response) {
+          if (response.data) {
+            _this.Qualitydaynumber = 0;
+            _this.Qualityday = response.data;
+            _this.Qualityday.forEach((item) => {
+              if (item.taskNum != null) {
+                _this.Qualitydaynumber =
+                  parseFloat(item.taskNum) + parseFloat(_this.Qualitydaynumber);
+              }
+            });
+          }
+        }
+      });
+      getHFxlInfo({
+        factoryCode: "ds_999",
+      }).then((response) => {
+        if (response) {
+          if (response.data) {
+            _this.echartsdata = response.data;
+            _this.initChart1();
+          }
+        }
+      });
       dryRoomDataCarousel({ factory: 999 }).then((response) => {
         if (response.data) {
           this.dataPropdata = response.data.dryingroomList;
-          //  console.log(response);
-          this.cards.data1 = this.cards.data1.map((card) => {
-            const matchingIndex = response.data.dryingroomList.find(
-              (index) => index.i === card.i
-            );
-            if (matchingIndex) {
-              return {
-                ...card,
-                title: "烘房" + matchingIndex.i,
-                model: matchingIndex.status,
-                dollyNumber: matchingIndex.dollyNumber,
-                waitmin: matchingIndex.waitmin,
-                temperature: matchingIndex.temperature,
-              };
-            } else {
-              return card;
-            }
-          });
-          this.cards.data2 = this.cards.data2.map((card) => {
-            const matchingIndex = response.data.dryingroomList.find(
-              (index) => index.i === card.i
-            );
-            if (matchingIndex) {
-              return {
-                ...card,
-                title: "烘房" + matchingIndex.i,
-                model: matchingIndex.status,
-                dollyNumber: matchingIndex.dollyNumber,
-                waitmin: matchingIndex.waitmin,
-                temperature: matchingIndex.temperature,
-              };
-            } else {
-              return card;
-            }
-          });
-          this.cards.data3 = this.cards.data3.map((card) => {
-            const matchingIndex = response.data.dryingroomList.find(
-              (index) => index.i === card.i
-            );
-            if (matchingIndex) {
-              return {
-                ...card,
-                title: "烘房" + matchingIndex.i,
-                model: matchingIndex.status,
-                dollyNumber: matchingIndex.dollyNumber,
-                waitmin: matchingIndex.waitmin,
-                temperature: matchingIndex.temperature,
-              };
-            } else {
-              return card;
-            }
-          });
-          this.cardss = this.cardss.map((card) => {
-            const matchingIndex = response.data.dryingroomList.find(
-              (index) => index.i === card.i
-            );
-            if (matchingIndex) {
-              return {
-                ...card,
-                title: "烘房" + matchingIndex.i,
-                model: matchingIndex.status,
-                dollyNumber: matchingIndex.dollyNumber,
-                waitmin: matchingIndex.waitmin,
-                temperature: matchingIndex.temperature,
-              };
-            } else {
-              return card;
-            }
-          });
-          console.log(this.cardss, this.cards, "wwwwwwww", this.dataPropdata);
+          console.log("wwwwwwww", this.dataPropdata);
         }
       });
     },
-
-    handleScroll(event) {
-      //请求烘房数据接口
-      this.createData();
-      // if (event==0){
-      //   const that = this;
-      //
-      // }
-      // 获取滚动事件的相关信息
-
-      // console.log(scrollTop);
-      // 根据需要处理滚动事件的逻辑
-      // ...
+    getDeviceRefreshTime() {
+      const _this = this;
+      getDeviceRefreshTime().then((response) => {
+        if (response) {
+          this.RefreshTime = response.data;
+          _this.getDatalist();
+          this.time2 = setInterval(() => {
+            _this.getDatalist();
+          }, 1000 * 60 * this.RefreshTime);
+        }
+      });
     },
     //左侧第一个选择类型下拉框 回调函数
   },
@@ -326,6 +785,7 @@ export default {
 
 .home {
   width: 100%;
+  height: 100vh;
   background: url("../../../assets/images/bg1.jpg") no-repeat;
   background-size: 100% 100%;
   background-color: #050711;
@@ -420,7 +880,7 @@ export default {
           width: 525px;
           .card-item {
             width: 525px;
-            height: 387px;
+            height: 420px;
             background: url("../../../assets/images/bg3.png") no-repeat;
             background-size: 100% 100%;
             padding: 10px;
@@ -430,7 +890,7 @@ export default {
           }
           .card-item1 {
             width: 750px;
-            height: 450px;
+            height: 481px;
             background: url("../../../assets/images/bg3.png") no-repeat;
             background-size: 100% 100%;
             padding: 10px;
@@ -445,12 +905,12 @@ export default {
             align-items: center;
             text-align: center;
             color: #f6f3f9;
-            font-size: 26px;
-            margin-top: 10px;
+            font-size: 22px;
+            margin-top: 1px;
             .card-header-left {
               display: inline-block;
               min-width: 100px;
-              padding: 16px 26px;
+              padding: 14px 26px;
               letter-spacing: 8px;
               background: linear-gradient(to right, #192c56, #11518f, #192c56);
               .color1 {
@@ -462,7 +922,7 @@ export default {
             }
           }
           .card-box {
-            margin-top: 35px;
+            margin-top: 18px;
             position: relative;
             .list1 {
               background-color: #0d61aa;
@@ -473,6 +933,25 @@ export default {
               align-items: center;
               font-size: 22px;
               min-height: 60px;
+              text-align: center;
+              .header1 {
+                min-width: 118px;
+              }
+              .header2 {
+                min-width: 50px;
+              }
+              .header3 {
+                min-width: 180px;
+              }
+              .header4 {
+                min-width: 110px;
+              }
+              .header5 {
+                min-width: 50px;
+              }
+              .header6 {
+                min-width: 125px;
+              }
             }
             .list1::before {
               content: "";
@@ -480,14 +959,15 @@ export default {
               bottom: 40px;
               left: 3%;
               transform: translateX(-50%);
-              border-width: 10px;
+              border-width: 8px;
               border-style: solid;
-              border-color: transparent transparent #0496FD transparent;
+              border-color: transparent transparent #0496fd transparent;
               transform: rotate(315deg);
             }
             .list {
+              border: 2px solid #0a62ab;
               background-color: #114881;
-              color: #46AFF7;
+              color: #50b3fe;
               border-radius: 10px;
               display: flex;
               justify-content: space-around;
@@ -495,21 +975,25 @@ export default {
               font-size: 22px;
               min-height: 60px;
               margin-bottom: 5px;
+              position: relative;
             }
-            .list::before {
+            .listitem2::before {
               content: "";
               position: absolute;
-              bottom: 40px;
-              left: 3%;
+              bottom: 43px;
+              left: 0%;
               transform: translateX(-50%);
-              border-width: 10px;
+              border-width: 8px;
               border-style: solid;
-              border-color: transparent transparent #0496FD transparent;
+              border-color: transparent transparent #0496fd transparent;
               transform: rotate(315deg);
             }
           }
-          .card-box1{
+          .card-box1 {
             margin-top: 5px;
+            height: 258px;
+            overflow: scroll;
+            margin-bottom: 0px;
           }
 
           .ring-charts {
@@ -519,6 +1003,75 @@ export default {
       }
       .left1 {
         width: 750px;
+        .swiper-container {
+          .swiper-wrapper {
+            .lefttop {
+              .card-header1 {
+                width: 450px;
+                height: 13%;
+                margin: auto;
+                align-items: center;
+                text-align: center;
+                color: #f6f3f9;
+                font-size: 22px;
+                margin-top: 1px;
+                .card-header-left1 {
+                  display: inline-block;
+                  min-width: 100px;
+                  padding: 14px 26px;
+                  letter-spacing: 8px;
+                  background-color: #114989;
+                  box-shadow: 0px 0px 10px 6px #114989;
+                  border-bottom: 1px solid #20aae6;
+                }
+              }
+              .boximage {
+                display: flex;
+                margin-top: 15px;
+                justify-content: space-between;
+                .card-footer {
+                  height: 25%;
+                  margin-top: 25px;
+                  width: 140px;
+                  .card-footer-item {
+                    box-sizing: border-box;
+                    width: 100%;
+                    text-align: center;
+                    .footer-title {
+                      font-size: 22px;
+                      margin-bottom: 5px;
+                      color: #0593fd;
+                    }
+
+                    .footer-detail {
+                      min-height: 46px;
+                      text-align: center;
+                      font-size: 20px;
+                      color: #192c57;
+                      font-size: 18px;
+                      padding: 10px 10px 10px 10px;
+                      box-sizing: border-box;
+                      width: 100%;
+                      background-color: #192c57;
+                      border-radius: 3px;
+                      .dv-digital-flop {
+                        margin-right: 5px;
+                      }
+                    }
+                  }
+                }
+                .image1 {
+                  // width: 450px;
+                  // height: 340px;
+                  img {
+                    width: 450px;
+                    height: 340px;
+                  }
+                }
+              }
+            }
+          }
+        }
       }
     }
 
@@ -528,9 +1081,175 @@ export default {
       justify-content: space-around;
 
       .left {
-        // width: 100%;
-        // justify-content: space-between;
-        // display: flex;
+        width: 1872px;
+        .box {
+          width: 1872px;
+          height: 56px;
+          background: url("../../../assets/images/bg2.png");
+          background-size: 100% 100%;
+          padding: 0px 21px 0px 25px;
+          box-sizing: border-box;
+          display: flex;
+          align-items: center;
+          background-color: #1f3668;
+          .name {
+            min-width: 300px;
+            letter-spacing: 4px;
+            color: #ffffff;
+            font-size: 22px;
+          }
+          .number {
+            min-width: 120px;
+            height: 50px;
+            border: 2px solid #274583;
+            border-radius: 5px;
+            padding: 1px;
+            box-sizing: border-box;
+            .number1 {
+              text-align: center;
+              height: 100%;
+              line-height: 43px;
+              color: #ffa95b;
+              border-radius: 7px;
+              font-size: 32px;
+              letter-spacing: 3px;
+              background-color: #294584;
+            }
+          }
+          .unit {
+            color: #b7b9c1;
+            margin-left: 30px;
+            font-size: 24px;
+          }
+        }
+        .cards {
+          width: 100%;
+          .card-item {
+            width: 100%;
+            height: 360px;
+            background: url("../../../assets/images/bg3.png") no-repeat;
+            background-size: 100% 100%;
+            padding: 10px;
+            background-color: #192c56;
+            // display: flex;
+            // flex-direction: column;
+          }
+          .card-item1 {
+            width: 750px;
+            height: 481px;
+            background: url("../../../assets/images/bg3.png") no-repeat;
+            background-size: 100% 100%;
+            padding: 10px;
+            background-color: #0e1d3a;
+            // display: flex;
+            // flex-direction: column;
+          }
+          .card-header {
+            width: 450px;
+            height: 13%;
+            margin: auto;
+            align-items: center;
+            text-align: center;
+            color: #f6f3f9;
+            font-size: 22px;
+            margin-top: 1px;
+            .card-header-left {
+              display: inline-block;
+              min-width: 100px;
+              padding: 14px 26px;
+              letter-spacing: 8px;
+              background: linear-gradient(to right, #192c56, #11518f, #192c56);
+              .color1 {
+                color: #0195fd;
+              }
+              .color2 {
+                color: #fb0102;
+              }
+            }
+          }
+          .card-box {
+            margin-top: 18px;
+            position: relative;
+            .list1 {
+              background-color: #0d61aa;
+              color: #ffffff;
+              border-radius: 10px;
+              display: flex;
+              justify-content: space-around;
+              align-items: center;
+              font-size: 22px;
+              min-height: 60px;
+              text-align: center;
+              .header1 {
+                min-width: 180px;
+              }
+              .header2 {
+                min-width: 100px;
+              }
+              .header3 {
+                min-width: 210px;
+              }
+              .header4 {
+                min-width: 135px;
+              }
+              .header5 {
+                min-width: 90px;
+              }
+              .header6 {
+                min-width: 80px;
+              }
+            }
+            .list1::before {
+              content: "";
+              position: absolute;
+              bottom: 40px;
+              left: 3%;
+              transform: translateX(-50%);
+              border-width: 8px;
+              border-style: solid;
+              border-color: transparent transparent #0496fd transparent;
+              transform: rotate(315deg);
+            }
+            .list {
+              border: 2px solid #0a62ab;
+              background-color: #114881;
+              color: #50b3fe;
+              border-radius: 10px;
+              display: flex;
+              justify-content: space-around;
+              align-items: center;
+              font-size: 22px;
+              min-height: 60px;
+              margin-bottom: 5px;
+              position: relative;
+              text-align: center;
+            }
+            .listitem2 {
+              position: absolute;
+            }
+            .listitem2::before {
+              content: "";
+              position: absolute;
+              bottom: 43px;
+              left: 0%;
+              transform: translateX(-50%);
+              border-width: 8px;
+              border-style: solid;
+              border-color: transparent transparent #0496fd transparent;
+              transform: rotate(315deg);
+            }
+          }
+          .card-box1 {
+            margin-top: 5px;
+            height: 258px;
+            overflow: scroll;
+            margin-bottom: 0px;
+          }
+
+          .ring-charts {
+            height: 55%;
+          }
+        }
       }
     }
   }
diff --git a/src/views/kanban/exceptionnew/index.vue b/src/views/kanban/exceptionnew/index.vue
index a174b32..f2476b7 100644
--- a/src/views/kanban/exceptionnew/index.vue
+++ b/src/views/kanban/exceptionnew/index.vue
@@ -438,6 +438,7 @@ export default {
 
 .home {
   width: 100%;
+  height: 100vh;
   background: url("../../../assets/images/bg1.jpg") no-repeat;
   background-size: 100% 100%;
   background-color: #050711;