feat:暂存

src/store/modules/settings.js

@@ -12,7 +12,19 @@ const state = {
   tagsView: storageSetting.tagsView === undefined ? tagsView : storageSetting.tagsView,
   fixedHeader: storageSetting.fixedHeader === undefined ? fixedHeader : storageSetting.fixedHeader,
   sidebarLogo: storageSetting.sidebarLogo === undefined ? sidebarLogo : storageSetting.sidebarLogo,
-  dynamicTitle: storageSetting.dynamicTitle === undefined ? dynamicTitle : storageSetting.dynamicTitle
+  dynamicTitle: storageSetting.dynamicTitle === undefined ? dynamicTitle : storageSetting.dynamicTitle,
+  echartsAutoTime:3000,//echarts 图自动请求接口时间
+  sbtxSwiper: true,//设备提醒轮播
+  defaultOption: {
+    step: 4.4, // 数值越大速度滚动越快
+    hoverStop: true, // 是否开启鼠标悬停stop
+    openWatch: true, // 开启数据实时监控刷新dom
+    direction: 1, // 0向下 1向上 2向左 3向右
+    limitMoveNum: 4, // 开始无缝滚动的数据量 this.dataList.length
+    singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
+    singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
+    waitTime: 3000 // 单步运动停止的时间(默认值1000ms)
+  },
 }
 const mutations = {
   CHANGE_SETTING: (state, { key, value }) => {

src/views/components/kong.vue

@@ -0,0 +1,43 @@
+<template>
+  <div class='kong'>
+      <slot></slot>
+  </div>
+</template>
+
+<script>
+
+export default {
+  components: {},
+  data() {
+    return {
+    
+    };
+  },
+  props:{
+    data:{
+      type:Array,
+      default:()=>[]
+    }
+  },
+  computed: {},
+  methods: {
+    init(){
+    },
+  },
+  created() {
+  
+  },
+  mounted() {
+  
+  },
+  beforeDestroy() { 
+  },
+}
+</script>
+
+<style lang='scss' scoped>
+.kong{
+    width: 100%;
+    height: 100%;
+}
+</style>

src/views/datav/LeftChart1.vue

@@ -149,7 +149,7 @@ export default {
     height: 100%;
     .left-container {
       // width: 100%;
-      height: 15.4%;
+      height: 15.2%;
       text-align: center;
       border-radius: 5px;
       border: 1px solid #1ae1e6;

src/views/datav/LeftChart11.vue

@@ -285,7 +285,7 @@ export default {
     margin: 10px 0;
     background: url(../../assets/image/title_bg.png) no-repeat;
     b {
-      font-size: 14px;
+      font-size: 20px;
       color: #fff;
       font-style: italic;
       margin-left: 25px;

src/views/datav/index.vue

@@ -114,7 +114,10 @@ export default {
         new Date().getDate() < 10
           ? "0" + new Date().getDate()
           : new Date().getDate();
-      let hh = new Date().getHours();
+          let hh =
+        new Date().getHours() < 10
+          ? "0" + new Date().getHours()
+          : new Date().getHours();
       let mf =
         new Date().getMinutes() < 10
           ? "0" + new Date().getMinutes()
@@ -124,7 +127,7 @@ export default {
           ? "0" + new Date().getSeconds()
           : new Date().getSeconds();
       _this.dateTime =
-        yy + "- " + mm + "-" + dd + "- " + hh + ":" + mf + ":" + ss;
+        yy + "-" + mm + "-" + dd + " " + hh + ":" + mf + ":" + ss;
     },
 
     toggleFullscreen() {
@@ -392,7 +395,7 @@ export default {
           background: url(../../assets/image/title_bg.png) no-repeat;
           // background: url(./img/title-bg.png) no-repeat;
           b {
-            font-size: 14px;
+            font-size: 20px;
             color: #fff;
             font-style: italic;
             margin-left: 25px;

src/views/equBigData/RightBottom copy.vue

@@ -0,0 +1,135 @@
+<template>
+  <div id="scroll-board">
+    <dv-scroll-board :config="config" />
+    <!-- <div class="box">
+      <div class="box-left">
+        <div class="box-left-top">
+          <div>设备ID:<span>3500000</span></div>
+          <div>时间:<span>2023-08-04 10:25:34</span></div>
+        </div>
+        <div class="box-left-under">消息:<span>手表未佩戴</span></div>
+      </div>
+      <div class="box-right">王艺涵</div>
+    </div> -->
+  </div>
+</template>
+
+<script>
+export default {
+  name: "ScrollBoard",
+  props: {
+    data: {
+      type: Array,
+      default: [],
+    },
+  },
+  data() {
+    return {
+      config: {
+        // header: ["时间", "病害信息", "数量", "标段"],
+        // data: [
+        //   [
+        //     `<div class="box">
+        //       <div class="box-left">
+        //         <div class="box-left-top">
+        //           <div>设备ID:<span class="idspan">3500000</span></div>
+        //           <div class="time">时间: <span>2023-08-04 10:25:34</span></div>
+        //         </div>
+        //         <div class="box-left-under">消息:<span>手表未佩戴</span></div>
+        //       </div>
+        //       <div class="box-right">王艺涵</div>
+        //     </div>`,
+        //   ],
+        // ],
+        data: [],
+        index: true,
+        columnWidth: [50],
+        align: ["center"],
+        rowNum: 5,
+        waitTime: 1500,
+        // headerBGC: "#1981f6",
+        // headerHeight: 20,
+        oddRowBGC: "rgba(0, 44, 81, 0.8)",
+        evenRowBGC: "rgba(10, 29, 50, 0.8)",
+      },
+    };
+  },
+  mounted() {
+    this.getData();
+  },
+  methods: {
+    getData() {
+      let dataList = this.data;
+      let list = [];
+      dataList.forEach((item) => {
+        list.push([
+          `<div class="box">
+          <div class="box-left">
+            <div class="box-left-top">
+              <div>设备ID:<span class="idspan">${item.device_id_code}</span></div>
+              <div class="time">时间: <span>${item.createtime}</span></div>
+            </div>
+            <div class="box-left-under">消息:<span>${item.alarm_msg}</span></div>
+          </div>
+          <div class="box-right">${item.name}</div>
+        </div>`,
+        ]);
+      });
+      this.config.data = list;
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+::v-deep .dv-scroll-board .rows .row-item {
+  height: 20% !important;
+  line-height: normal !important;
+  display: flex;
+  align-items: center;
+}
+.dv-scroll-board .rows .ceil {
+  overflow: auto;
+}
+::v-deep .box {
+  display: flex;
+  justify-content: space-between;
+  height: 100%;
+}
+::v-deep .box-left {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  // align-items: center;
+  .box-left-top {
+    height: 50%;
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+
+    .idspan {
+      color: #1790ff;
+      font-size: 15px;
+    }
+    .time {
+      margin-left: 5px;
+    }
+  }
+  .box-left-under {
+    height: 50%;
+  }
+}
+::v-deep .box-right {
+  color: #1fcb21;
+}
+#scroll-board {
+  width: 100%;
+  box-sizing: border-box;
+  height: 100%;
+  overflow: hidden;
+  transform: scale3d(0.9, 0.7, 0.86);
+  margin-top: -46px;
+  // margin: -46px 10px 0 10px;
+}
+</style>

src/views/equBigData/RightBottom.vue

@@ -1,6 +1,6 @@
 <template>
   <div id="scroll-board">
-    <dv-scroll-board :config="config" />
+    <dv-scroll-board :config="config"/>
     <!-- <div class="box">
       <div class="box-left">
         <div class="box-left-top">
@@ -52,6 +52,12 @@ export default {
         oddRowBGC: "rgba(0, 44, 81, 0.8)",
         evenRowBGC: "rgba(10, 29, 50, 0.8)",
       },
+      defaultOption: {
+        ...this.$store.state.settings.defaultOption,
+        singleHeight: 240,
+        limitMoveNum: 5,
+        step: 0,
+      },
     };
   },
   mounted() {
@@ -60,6 +66,10 @@ export default {
   methods: {
     getData() {
       let dataList = this.data;
+      let timer = setTimeout(() => {
+        clearTimeout(timer);
+        this.defaultOption.step = this.$store.state.settings.defaultOption.step;
+      }, this.$store.state.settings.defaultOption.waitTime);
       let list = [];
       dataList.forEach((item) => {
         list.push([

src/views/equBigData/equ.vue

@@ -0,0 +1,273 @@
+<template>
+  <ul class="user_Overview flex" v-if="pageflag">
+    <li class="user_Overview-item" style="color: #00fdfa">
+      <div class="user_Overview_nums allnum">
+        <dv-digital-flop :config="config" style="width: 100%; height: 100%" />
+      </div>
+      <p>用户总数</p>
+    </li>
+    <li class="user_Overview-item" style="color: #07f7a8">
+      <div class="user_Overview_nums online">
+        <dv-digital-flop
+          :config="equconfig"
+          style="width: 100%; height: 100%"
+        />
+      </div>
+      <p>绑定设备</p>
+    </li>
+    <li class="user_Overview-item" style="color: #e3b337">
+      <div class="user_Overview_nums offline">
+        <dv-digital-flop
+          :config="userconfig"
+          style="width: 100%; height: 100%"
+        />
+      </div>
+      <p>绑定用户数</p>
+    </li>
+    <li class="user_Overview-item" style="color: #f5023d">
+      <div class="user_Overview_nums laramnum">
+        <dv-digital-flop
+          :config="activeconfig"
+          style="width: 100%; height: 100%"
+        />
+      </div>
+      <p>设备活跃度</p>
+    </li>
+  </ul>
+</template>
+
+<script>
+import { count,deviceOver} from "@/api/system/equdata";
+// import { currentGET } from "api/modules";
+let style = {
+  fontSize: 24,
+};
+export default {
+  data() {
+    return {
+      options: {},
+      userOverview: {
+        alarmNum: 0,
+        offlineNum: 0,
+        onlineNum: 0,
+        totalNum: 0,
+      },
+      pageflag: true,
+      timer: null,
+      config: {
+        number: [100],
+        content: "{nt}",
+        style: {
+          ...style,
+          // stroke: "#00fdfa",
+          fill: "#00fdfa",
+        },
+      },
+      equconfig: {
+        number: [0],
+        content: "{nt}",
+        style: {
+          ...style,
+          // stroke: "#07f7a8",
+          fill: "#07f7a8",
+        },
+      },
+      userconfig: {
+        number: [0],
+        content: "{nt}",
+        style: {
+          ...style,
+          // stroke: "#e3b337",
+          fill: "#e3b337",
+        },
+      },
+      activeconfig: {
+        number: [0],
+        content: "{nt}",
+        style: {
+          ...style,
+          // stroke: "#f5023d",
+          fill: "#f5023d",
+        },
+      },
+    };
+  },
+  filters: {
+    numsFilter(msg) {
+      return msg || 0;
+    },
+  },
+  created() {
+    // this.getData();
+  },
+  mounted() {
+    this.deviceView();
+  },
+  beforeDestroy() {
+    this.clearData();
+  },
+  methods: {
+    clearData() {
+      if (this.timer) {
+        clearInterval(this.timer);
+        this.timer = null;
+        this.equconfig = {
+          number: [0],
+        };
+      }
+    },
+    deviceView() {
+      count().then((res) => {
+        if (res.code === 200) {
+          this.userOverview = res.data;
+          this.config = {
+            ...this.config,
+            number: [res.data],
+          };
+          this.switper();
+        } else {
+          this.pageflag = false;
+          this.$Message.warning(res.msg);
+        }
+
+        this.switper();
+      });
+      deviceOver().then((res) => {
+        if (res.code === 200) {
+          this.userOverview = res.data;
+          this.equconfig = {
+            ...this.equconfig,
+            number: [res.data.bindDevice],
+          };
+          this.userconfig = {
+            ...this.userconfig,
+            number: [res.data.bindUser],
+          };
+          this.activeconfig = {
+            ...this.activeconfig,
+            number: [res.data.deviceOnline],
+          };
+          this.switper();
+        } else {
+          this.pageflag = false;
+          this.$Message.warning(res.msg);
+        }
+
+        this.switper();
+      });
+    },
+    // getData() {
+    //   this.pageflag = true;
+    //   currentGET("big2").then((res) => {
+    //     if (!this.timer) {
+    //       console.log("设备总览", res);
+    //     }
+    //     if (res.success) {
+    //       this.userOverview = res.data;
+    //       this.equconfig = {
+    //         ...this.equconfig,
+    //         number: [res.data.onlineNum],
+    //       };
+    //       this.config = {
+    //         ...this.config,
+    //         number: [res.data.totalNum],
+    //       };
+    //       this.userconfig = {
+    //         ...this.userconfig,
+    //         number: [res.data.offlineNum],
+    //       };
+    //       this.activeconfig = {
+    //         ...this.activeconfig,
+    //         number: [res.data.alarmNum],
+    //       };
+    //       this.switper();
+    //     } else {
+    //       this.pageflag = false;
+    //       this.$Message.warning(res.msg);
+    //     }
+    //   });
+    // },
+    //轮询
+    switper() {
+      if (this.timer) {
+        console.log(this.timer, "1212");
+        return;
+      }
+      let looper = (a) => {
+        console.log(a, "aa");
+        this.deviceView();
+      };
+      this.timer = setInterval(
+        looper,
+        this.$store.state.settings.echartsAutoTime
+      );
+    },
+  },
+};
+</script>
+<style lang="scss" scoped>
+.user_Overview {
+  display: flex;
+  list-style: none;
+  padding-left: 0;
+  li {
+    flex: 1;
+    p {
+      text-align: center;
+      // height: 16px;
+      font-size: 20px;
+      font-weight: bold;
+    }
+
+    .user_Overview_nums {
+      width: 100px;
+      height: 100px;
+      text-align: center;
+      line-height: 100px;
+      font-size: 22px;
+      margin: 0 auto 15px;
+      background-size: cover;
+      background-position: center center;
+      position: relative;
+
+      &::before {
+        content: "";
+        position: absolute;
+        width: 100%;
+        height: 100%;
+        top: 0;
+        left: 0;
+      }
+
+      &.bgdonghua::before {
+        animation: rotating 14s linear infinite;
+      }
+    }
+
+    .allnum {
+      // background-image: url("../../assets/img/left_top_lan.png");
+      &::before {
+        background-image: url("./img/left_top_lan.png");
+      }
+    }
+
+    .online {
+      &::before {
+        background-image: url("./img/left_top_lv.png");
+      }
+    }
+
+    .offline {
+      &::before {
+        background-image: url("./img/left_top_huang.png");
+      }
+    }
+
+    .laramnum {
+      &::before {
+        background-image: url("./img/left_top_hong.png");
+      }
+    }
+  }
+}
+</style>

src/views/equBigData/equTotal.vue

@@ -2,6 +2,9 @@
   <div class="left-charts">
     <div class="left-chart-item">
       <dv-charts class="item-chart" :option="option" />
+      <!-- <div class="user_Overview_nums allnum">
+        <dv-digital-flop :config="config" style="width: 100%; height: 100%" />
+      </div> -->
       <div class="item-chart-word-num zongshu">总数</div>
     </div>
 
@@ -23,19 +26,30 @@
 </template>
 
 <script>
-
+let style = {
+  fontSize: 24,
+};
 export default {
   name: "BottomCharts",
-  props:{
-    data:{
-      type:Object,
-      default:{},
-    }
-  },
-  components: {
+  props: {
+    data: {
+      type: Object,
+      default: {},
+    },
   },
+  components: {},
   data() {
     return {
+      config: {
+        number: [100],
+        content: "{nt}",
+        style: {
+          ...style,
+          // stroke: "#00fdfa",
+          fill: "#00fdfa",
+        },
+      },
+      timer: null,
       equTotalData: {},
       deviceCount: 0,
       deviceOnline: 0,
@@ -48,7 +62,7 @@ export default {
             startAngle: -Math.PI / 2,
             endAngle: Math.PI * 1.5,
             arcLineWidth: 10,
-            radius:'80%',
+            radius: "80%",
             data: [
               {
                 name: "itemA",
@@ -87,7 +101,7 @@ export default {
             startAngle: -Math.PI / 2,
             endAngle: Math.PI * 1.5,
             arcLineWidth: 10,
-            radius:'80%',
+            radius: "80%",
             data: [
               {
                 name: "itemA",
@@ -126,7 +140,7 @@ export default {
             startAngle: -Math.PI / 2,
             endAngle: Math.PI * 1.5,
             arcLineWidth: 10,
-            radius:'80%',
+            radius: "80%",
             data: [
               {
                 name: "itemA",
@@ -165,7 +179,7 @@ export default {
             startAngle: -Math.PI / 2,
             endAngle: Math.PI * 1.5,
             arcLineWidth: 10,
-            radius:'80%',
+            radius: "80%",
             data: [
               {
                 name: "itemA",
@@ -203,13 +217,42 @@ export default {
   mounted() {
     // this.deviceView();
   },
-  methods: {
-   
-  },
+  methods: {},
 };
 </script>
 
 <style lang="scss">
+.user_Overview_nums {
+  width: 100px;
+  height: 100px;
+  text-align: center;
+  line-height: 100px;
+  font-size: 22px;
+  margin: 50px auto 30px;
+  background-size: cover;
+  background-position: center center;
+  position: relative;
+
+  &::before {
+    content: "";
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    top: 0;
+    left: 0;
+  }
+
+  &.bgdonghua::before {
+    animation: rotating 14s linear infinite;
+  }
+
+}
+  .allnum {
+    &::before {
+      background-image: url("./img/left_top_lan.png");
+    }
+  }
+
 .left-charts {
   width: 100%;
   height: 80%;

src/views/equBigData/index.vue

@@ -6,7 +6,8 @@
         <div class="left-top">
           <dv-border-box-13>
             <Border-Item title="设备总览">
-              <equTotal v-if="equDataFlag" :data="equTotalData" />
+              <!-- <equTotal v-if="equDataFlag" :data="equTotalData" /> -->
+              <leftTop :data="equTotalData" />
             </Border-Item>
           </dv-border-box-13>
         </div>
@@ -26,25 +27,29 @@
         </div>
       </div>
       <div class="content">
-        <!-- 22 -->
         <equ-map v-loading="mapLoading" @callback="initMap" />
         <div class="left-under">
           <dv-border-box-13>
-            <Border-Item title="报警列表"
-              ><Right-Bottom v-if="alarmListFlag" :data="alarmList"
-            /></Border-Item>
+            <Border-Item title="报警列表">
+              <Right-Bottom v-if="alarmListFlag" :data="alarmList"/>            
+              <!-- <LeftBottom /> -->
+            </Border-Item>
           </dv-border-box-13>
+          <!-- <ItemWrap
+            class="contetn_left-bottom contetn_lr-item"
+            title="设备提醒"
+            style="padding: 0 10px 16px 10px"
+          >
+            <LeftBottom />
+          </ItemWrap> -->
         </div>
       </div>
       <div class="right">
         <div class="left-top">
           <dv-border-box-13>
             <Border-Item title="设备总览">
-              <bbb
-                v-if="userTotalFlag && userDataFlag"
-                :number="userTotalData"
-                :data="userData"
-            /></Border-Item>
+              <equ/>
+            </Border-Item>
           </dv-border-box-13>
         </div>
         <div class="left-content">
@@ -81,11 +86,16 @@ import equMap from "./Maps";
 
 import BorderItem from "./BottomCharts";
 import equTotal from "./equTotal";
-import bbb from "./bbb";
+import equ from "./equ";
 
 import RightBottom from "./RightBottom";
 import MiddleChart from "./MiddleChart";
 
+import LeftBottom from "./left-bottom.vue";
+
+import ItemWrap from "./item-wrap";
+import leftTop from "./left-top.vue";
+
 import {
   deviceView,
   userAgeAll,
@@ -107,10 +117,13 @@ export default {
     BorderItem,
     equMap,
     equTotal,
-    bbb,
+    equ,
     RightBottom,
     LeftChartUnder,
     MiddleChart,
+    LeftBottom,
+    ItemWrap,
+    leftTop,
   },
   data() {
     return {
@@ -131,13 +144,14 @@ export default {
       xUserList: [],
       yUserList: [],
       userTotalData: 0,
+      timer: null,
     };
   },
   mounted() {
-    this.deviceView();
+    // this.deviceView();
     this.userAgeAll();
     this.userTotal();
-    this.getUserData();
+    // this.getUserData();
     this.getAlarmStatusList();
     this.getEquData();
     this.getAddUser();
@@ -194,24 +208,38 @@ export default {
         this.xylistFlag = true;
       });
     },
-    deviceView() {
-      deviceView().then((res) => {
-        this.equTotalData = res.data;
-        this.equDataFlag = true;
-      });
-    },
+    // deviceView() {
+    //   deviceView().then((res) => {
+    //     this.equTotalData = res.data;
+    //     this.equDataFlag = true;
+    //     this.swiper();
+    //   });
+    // },
+    //轮询
+    // swiper() {
+    //   if (this.timer) {
+    //     return;
+    //   }
+    //   let looper = (a) => {
+    //     this.deviceView();
+    //   };
+    //   this.timer = setInterval(
+    //     looper,
+    //     this.$store.state.settings.echartsAutoTime
+    //   );
+    // },
     userTotal() {
       count().then((res) => {
         this.userTotalData = res.data;
         this.userTotalFlag = true;
       });
     },
-    getUserData() {
-      deviceOver().then((res) => {
-        this.userData = res.data;
-        this.userDataFlag = true;
-      });
-    },
+    // getUserData() {
+    //   deviceOver().then((res) => {
+    //     this.userData = res.data;
+    //     this.userDataFlag = true;
+    //   });
+    // },
     userAgeAll() {
       userAgeAll().then((res) => {
         this.userAgeList = res.data.list;
@@ -878,7 +906,8 @@ export default {
       .left-under {
         margin-top: 10px;
         height: 30%;
-        .left-border {
+        .contetn_lr-item {
+          height: 310px;
         }
       }
     }

src/views/equBigData/item-wrap.vue

@@ -0,0 +1,91 @@
+
+<template>
+  <dv-border-box-13 class="lr_titles">
+    <div class="item_title" v-if="title !== ''">
+      <!-- <div class="zuo"></div> -->
+      <span class="title-inner"> &nbsp;&nbsp;{{ title }}&nbsp;&nbsp; </span>
+      <!-- <div class="you"></div> -->
+    </div>
+    <div
+      :class="title !== '' ? 'item_title_content' : 'item_title_content_def'"
+    >
+      <slot></slot>
+    </div>
+  </dv-border-box-13>
+</template>
+
+<script>
+export default {
+  data() {
+    return {};
+  },
+  props: {
+    title: {
+      type: String,
+      default: () => "",
+    },
+  },
+  created() {},
+
+  mounted() {},
+  methods: {},
+};
+</script>
+<style lang='scss' scoped>
+$item-title-height: 38px;
+$item_title_content-height: calc(100% - 38px);
+
+.lr_titles {
+  box-sizing: border-box;
+
+:deep(.border-box-content)  {
+    box-sizing: border-box;
+    padding: 6px 16px 0px;
+  }
+
+  .item_title {
+    height: $item-title-height;
+    line-height: $item-title-height;
+    width: 100%;
+    color: #31abe3;
+    text-align: center;
+    // background: linear-gradient(to right, transparent, #0f0756, transparent);
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    // .zuo,
+    // .you {
+    //   width: 58px;
+    //   height: 14px;
+    //   background-image: url("../../assets/img/titles/zuo.png");
+    // }
+
+    .you {
+      transform: rotate(180deg);
+    }
+    .title-inner {
+      font-weight: 900;
+      letter-spacing: 2px;
+      background: linear-gradient(
+        92deg,
+        #0072ff 0%,
+        #00eaff 48.8525390625%,
+        #01aaff 100%
+      );
+      -webkit-background-clip: text;
+      -webkit-text-fill-color: transparent;
+    }
+  }
+
+  .item_title_content {
+    height: $item_title_content-height;
+  }
+
+  .item_title_content_def {
+    width: 100%;
+    height: 100%;
+  }
+}
+</style>

src/views/equBigData/left-bottom.vue

@@ -0,0 +1,448 @@
+<template>
+  <div
+    v-if="pageflag"
+    class="left_boottom_wrap beautify-scroll-def"
+    :class="{ 'overflow-y-auto': !sbtxSwiperFlag }"
+  >
+    <component :is="components" :data="list" :class-option="defaultOption">
+      <ul class="left_boottom">
+        <li class="left_boottom_item" v-for="(item, i) in list" :key="i">
+          <span class="orderNum doudong">{{ i + 1 }}</span>
+          <div class="inner_right">
+            <div class="dibu"></div>
+            <div class="flex">
+              <div class="info">
+                <span class="labels">设备ID：</span>
+                <span class="contents zhuyao doudong wangguan">
+                  {{ item.gatewayno }}</span
+                >
+              </div>
+              <div class="info">
+                <span class="labels">时间：</span>
+                <span class="contents" style="font-size: 12px">
+                  {{ item.createTime }}</span
+                >
+              </div>
+            </div>
+
+            <span
+              class="types doudong"
+              :class="{
+                typeRed: item.onlineState == 0,
+                typeGreen: item.onlineState == 1,
+              }"
+              >{{ item.onlineState == 1 ? "上线" : "下线" }}</span
+            >
+
+            <div class="info addresswrap">
+              <span class="labels">地址：</span>
+              <span class="contents ciyao" style="font-size: 12px">
+                {{ addressHandle(item) }}</span
+              >
+            </div>
+          </div>
+        </li>
+      </ul>
+    </component>
+  </div>
+
+  <!-- <Reacquire v-else @onclick="getData" style="line-height: 200px" /> -->
+</template>
+
+<script>
+// import { currentGET } from "api";
+import { alarmStatusList } from "@/api/system/equdata";
+import vueSeamlessScroll from "vue-seamless-scroll"; // vue2引入方式
+// import Kong from "../../components/kong.vue";
+import Kong from "../components/kong.vue";
+export default {
+  components: { vueSeamlessScroll, Kong },
+  data() {
+    return {
+      list: [],
+      pageflag: true,
+      components: vueSeamlessScroll,
+      defaultOption: {
+        ...this.$store.state.settings.defaultOption,
+        singleHeight: 240,
+        limitMoveNum: 5,
+        step: 0,
+      },
+    };
+  },
+  computed: {
+    sbtxSwiperFlag() {
+      let sbtxSwiper = this.$store.state.settings.sbtxSwiper;
+      if (sbtxSwiper) {
+        this.components = vueSeamlessScroll;
+      } else {
+        this.components = Kong;
+      }
+      return sbtxSwiper;
+    },
+  },
+  created() {},
+
+  mounted() {
+    this.getData();
+  },
+  methods: {
+    addressHandle(item) {
+      let name = item.provinceName;
+      if (item.cityName) {
+        name += "/" + item.cityName;
+        if (item.countyName) {
+          name += "/" + item.countyName;
+        }
+      }
+      return name;
+    },
+    getData() {
+      this.pageflag = true;
+
+      // alarmStatusList().then((res) => {
+      //   this.alarmList = res.data.map((item) => {
+      //     let hideName = "";
+      //     if (item.name?.length >= 2) {
+      //       hideName = item.name[0] + "*" + item.name.substring(2);
+      //       return {
+      //         ...item,
+      //         name: hideName,
+      //       };
+      //     } else {
+      //       return {
+      //         ...item,
+      //       };
+      //     }
+      //   });
+      //   this.alarmListFlag = true;
+      // });
+
+      // this.pageflag =false
+      alarmStatusList().then((res) => {
+        console.log("设备提醒", res);
+        if (res.code == 200) {
+          this.countUserNumData = res.data;
+          // this.list = res.data;
+          this.list = [
+            {
+              name: "苑坤",
+              device_id_code: "886626888815624",
+              createtime: "2023-09-06 17:40:48",
+              alarm_type: 16,
+              alarm_msg: "SOS报警",
+            },
+            {
+              name: "苑坤",
+              device_id_code: "886626888815624",
+              createtime: "2023-09-06 17:40:48",
+              alarm_type: 16,
+              alarm_msg: "SOS报警",
+            },
+            {
+              name: "苑坤",
+              device_id_code: "886626888815624",
+              createtime: "2023-09-06 17:40:48",
+              alarm_type: 16,
+              alarm_msg: "SOS报警",
+            },
+            {
+              name: "苑坤",
+              device_id_code: "886626888815624",
+              createtime: "2023-09-06 17:40:48",
+              alarm_type: 16,
+              alarm_msg: "SOS报警",
+            },
+            {
+              name: "苑坤",
+              device_id_code: "886626888815624",
+              createtime: "2023-09-06 17:40:48",
+              alarm_type: 16,
+              alarm_msg: "SOS报警",
+            },
+            {
+              name: "苑坤",
+              device_id_code: "886626888815624",
+              createtime: "2023-09-06 17:40:48",
+              alarm_type: 16,
+              alarm_msg: "SOS报警",
+            },
+            {
+              name: "苑坤",
+              device_id_code: "886626888815624",
+              createtime: "2023-09-06 17:40:48",
+              alarm_type: 16,
+              alarm_msg: "SOS报警",
+            },
+            // {
+            //   name: "苑坤",
+            //   device_id_code: "886626888815624",
+            //   createtime: "2023-09-06 17:40:48",
+            //   alarm_type: 16,
+            //   alarm_msg: "SOS报警",
+            // },
+            // {
+            //   name: "苑坤",
+            //   device_id_code: "886626888815624",
+            //   createtime: "2023-09-06 17:40:48",
+            //   alarm_type: 16,
+            //   alarm_msg: "SOS报警",
+            // },
+            // {
+            //   name: "苑坤",
+            //   device_id_code: "886626888815624",
+            //   createtime: "2023-09-06 17:40:48",
+            //   alarm_type: 16,
+            //   alarm_msg: "SOS报警",
+            // },
+            // {
+            //   name: "苑坤",
+            //   device_id_code: "886626888815624",
+            //   createtime: "2023-09-06 17:40:48",
+            //   alarm_type: 16,
+            //   alarm_msg: "SOS报警",
+            // },
+            // {
+            //   name: "苑坤",
+            //   device_id_code: "886626888815624",
+            //   createtime: "2023-09-06 17:40:48",
+            //   alarm_type: 16,
+            //   alarm_msg: "SOS报警",
+            // },
+            // {
+            //   name: "苑坤",
+            //   device_id_code: "886626888815624",
+            //   createtime: "2023-09-06 17:40:48",
+            //   alarm_type: 16,
+            //   alarm_msg: "SOS报警",
+            // },
+            // {
+            //   name: "苑坤",
+            //   device_id_code: "886626888815624",
+            //   createtime: "2023-09-06 17:40:48",
+            //   alarm_type: 16,
+            //   alarm_msg: "SOS报警",
+            // },
+            // {
+            //   name: "苑坤",
+            //   device_id_code: "886626888815624",
+            //   createtime: "2023-09-06 17:40:48",
+            //   alarm_type: 16,
+            //   alarm_msg: "SOS报警",
+            // },
+            // {
+            //   name: "苑坤",
+            //   device_id_code: "886626888815624",
+            //   createtime: "2023-09-06 17:40:48",
+            //   alarm_type: 16,
+            //   alarm_msg: "SOS报警",
+            // },
+            // {
+            //   name: "苑坤",
+            //   device_id_code: "886626888815624",
+            //   createtime: "2023-09-06 17:40:48",
+            //   alarm_type: 16,
+            //   alarm_msg: "SOS报警",
+            // },
+            // {
+            //   name: "苑坤",
+            //   device_id_code: "886626888815624",
+            //   createtime: "2023-09-06 17:40:48",
+            //   alarm_type: 16,
+            //   alarm_msg: "SOS报警",
+            // },
+            // {
+            //   name: "苑坤",
+            //   device_id_code: "886626888815624",
+            //   createtime: "2023-09-06 17:40:48",
+            //   alarm_type: 16,
+            //   alarm_msg: "SOS报警",
+            // },
+            // {
+            //   name: "苑坤",
+            //   device_id_code: "886626888815624",
+            //   createtime: "2023-09-06 17:40:48",
+            //   alarm_type: 16,
+            //   alarm_msg: "SOS报警",
+            // },
+            
+            
+          
+          ];
+
+          console.log(this.list, "数据数据");
+          let timer = setTimeout(() => {
+            clearTimeout(timer);
+            this.defaultOption.step =
+              this.$store.state.settings.defaultOption.step;
+          }, this.$store.state.settings.defaultOption.waitTime);
+        } else {
+          this.pageflag = false;
+          // this.$Message({
+          //   text: res.msg,
+          //   type: "warning",
+          // });
+        }
+      });
+    },
+  },
+};
+</script>
+<style lang="scss" scoped>
+.left_boottom_wrap {
+  overflow: hidden;
+  width: 100%;
+  // height: 100%;
+}
+.beautify-scroll-def {
+  height: 80%;
+  // overflow-y: auto;
+
+  &::-webkit-scrollbar-thumb {
+    //滚动条的设置
+    background-color: rgba(14, 59, 150, 0);
+    background-clip: padding-box;
+    border-radius: 4px;
+  }
+
+  &:hover {
+    &::-webkit-scrollbar-thumb {
+      //滚动条的设置
+      background-color: rgba(14, 59, 150, 0.5);
+      background-clip: padding-box;
+      border-radius: 4px;
+    }
+  }
+
+  &::-webkit-scrollbar-track-piece {
+    //滚动条凹槽的颜色，还可以设置边框属性
+    background-color: transparent;
+  }
+
+  &::-webkit-scrollbar {
+    //滚动条的宽度
+    width: 8px;
+    height: 8px;
+  }
+
+  &::-webkit-scrollbar-thumb:hover {
+    background-color: rgba(14, 59, 150, 0.8);
+  }
+}
+
+.doudong {
+  //  vertical-align:middle;
+  overflow: hidden;
+  -webkit-backface-visibility: hidden;
+  -moz-backface-visibility: hidden;
+  -ms-backface-visibility: hidden;
+  backface-visibility: hidden;
+}
+
+.overflow-y-auto {
+  overflow-y: auto;
+}
+
+.left_boottom {
+  width: 100%;
+  // height: 100%;
+
+  .left_boottom_item {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 8px;
+    font-size: 14px;
+    margin: 10px 0;
+    .orderNum {
+      margin: 0 16px 0 -20px;
+    }
+
+    .info {
+      margin-right: 10px;
+      display: flex;
+      align-items: center;
+      color: #fff;
+
+      .labels {
+        flex-shrink: 0;
+        font-size: 12px;
+        color: rgba(255, 255, 255, 0.6);
+      }
+
+      .zhuyao {
+        // color: $primary-color;
+        font-size: 15px;
+      }
+
+      .ciyao {
+        color: rgba(255, 255, 255, 0.8);
+      }
+
+      .warning {
+        color: #e6a23c;
+        font-size: 15px;
+      }
+    }
+
+    .inner_right {
+      position: relative;
+      height: 100%;
+      width: 380px;
+      flex-shrink: 0;
+      line-height: 1;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      flex-wrap: wrap;
+      .dibu {
+        position: absolute;
+        height: 2px;
+        width: 104%;
+        background-image: url("./img/zuo_xuxian.png");
+        bottom: -10px;
+        left: -2%;
+        background-size: cover;
+      }
+      .addresswrap {
+        width: 100%;
+        display: flex;
+        margin-top: 8px;
+      }
+    }
+
+    .wangguan {
+      color: #1890ff;
+      font-weight: 900;
+      font-size: 15px;
+      width: 80px;
+      flex-shrink: 0;
+    }
+
+    .time {
+      font-size: 12px;
+      // color: rgba(211, 210, 210,.8);
+      color: #fff;
+    }
+
+    .address {
+      font-size: 12px;
+      cursor: pointer;
+      // @include text-overflow(1);
+    }
+
+    .types {
+      width: 30px;
+      flex-shrink: 0;
+    }
+
+    .typeRed {
+      color: #fc1a1a;
+    }
+
+    .typeGreen {
+      color: #29fc29;
+    }
+  }
+}
+</style>

src/views/equBigData/left-top.vue

@@ -0,0 +1,262 @@
+<template>
+  <ul class="user_Overview flex" v-if="pageflag">
+    <li class="user_Overview-item" style="color: #00fdfa">
+      <div class="user_Overview_nums allnum">
+        <dv-digital-flop :config="config" style="width: 100%; height: 100%" />
+      </div>
+      <p>总设备数</p>
+    </li>
+    <li class="user_Overview-item" style="color: #07f7a8">
+      <div class="user_Overview_nums online">
+        <dv-digital-flop
+          :config="onlineconfig"
+          style="width: 100%; height: 100%"
+        />
+      </div>
+      <p>在线数</p>
+    </li>
+    <li class="user_Overview-item" style="color: #e3b337">
+      <div class="user_Overview_nums offline">
+        <dv-digital-flop
+          :config="offlineconfig"
+          style="width: 100%; height: 100%"
+        />
+      </div>
+      <p>离线数</p>
+    </li>
+    <li class="user_Overview-item" style="color: #f5023d">
+      <div class="user_Overview_nums laramnum">
+        <dv-digital-flop
+          :config="laramnumconfig"
+          style="width: 100%; height: 100%"
+        />
+      </div>
+      <p>告警数</p>
+    </li>
+  </ul>
+</template>
+
+<script>
+import { deviceView } from "@/api/system/equdata";
+// import { currentGET } from "api/modules";
+let style = {
+  fontSize: 24,
+};
+export default {
+  data() {
+    return {
+      options: {},
+      userOverview: {
+        alarmNum: 0,
+        offlineNum: 0,
+        onlineNum: 0,
+        totalNum: 0,
+      },
+      pageflag: true,
+      timer: null,
+      config: {
+        number: [100],
+        content: "{nt}",
+        style: {
+          ...style,
+          // stroke: "#00fdfa",
+          fill: "#00fdfa",
+        },
+      },
+      onlineconfig: {
+        number: [0],
+        content: "{nt}",
+        style: {
+          ...style,
+          // stroke: "#07f7a8",
+          fill: "#07f7a8",
+        },
+      },
+      offlineconfig: {
+        number: [0],
+        content: "{nt}",
+        style: {
+          ...style,
+          // stroke: "#e3b337",
+          fill: "#e3b337",
+        },
+      },
+      laramnumconfig: {
+        number: [0],
+        content: "{nt}",
+        style: {
+          ...style,
+          // stroke: "#f5023d",
+          fill: "#f5023d",
+        },
+      },
+    };
+  },
+  filters: {
+    numsFilter(msg) {
+      return msg || 0;
+    },
+  },
+  created() {
+    // this.getData();
+  },
+  mounted() {
+    this.deviceView();
+  },
+  beforeDestroy() {
+    this.clearData();
+  },
+  methods: {
+    clearData() {
+      if (this.timer) {
+        clearInterval(this.timer);
+        this.timer = null;
+        this.onlineconfig = {
+          number: [0],
+        };
+      }
+    },
+    deviceView() {
+      deviceView().then((res) => {
+        if (res.code === 200) {
+          this.userOverview = res.data;
+          this.onlineconfig = {
+            ...this.onlineconfig,
+            number: [res.data.deviceOnline],
+          };
+          this.config = {
+            ...this.config,
+            number: [res.data.deviceCount],
+          };
+          this.offlineconfig = {
+            ...this.offlineconfig,
+            number: [res.data.un_deviceOnline],
+          };
+          this.laramnumconfig = {
+            ...this.laramnumconfig,
+            number: [res.data.alarmCount],
+          };
+          this.switper();
+        } else {
+          this.pageflag = false;
+          this.$Message.warning(res.msg);
+        }
+
+        this.switper();
+      });
+    },
+    // getData() {
+    //   this.pageflag = true;
+    //   currentGET("big2").then((res) => {
+    //     if (!this.timer) {
+    //       console.log("设备总览", res);
+    //     }
+    //     if (res.success) {
+    //       this.userOverview = res.data;
+    //       this.onlineconfig = {
+    //         ...this.onlineconfig,
+    //         number: [res.data.onlineNum],
+    //       };
+    //       this.config = {
+    //         ...this.config,
+    //         number: [res.data.totalNum],
+    //       };
+    //       this.offlineconfig = {
+    //         ...this.offlineconfig,
+    //         number: [res.data.offlineNum],
+    //       };
+    //       this.laramnumconfig = {
+    //         ...this.laramnumconfig,
+    //         number: [res.data.alarmNum],
+    //       };
+    //       this.switper();
+    //     } else {
+    //       this.pageflag = false;
+    //       this.$Message.warning(res.msg);
+    //     }
+    //   });
+    // },
+    //轮询
+    switper() {
+      if (this.timer) {
+        console.log(this.timer, "1212");
+        return;
+      }
+      let looper = (a) => {
+        console.log(a, "aa");
+        this.deviceView();
+      };
+      this.timer = setInterval(
+        looper,
+        this.$store.state.settings.echartsAutoTime
+      );
+    },
+  },
+};
+</script>
+<style lang="scss" scoped>
+.user_Overview {
+  display: flex;
+  list-style: none;
+  padding-left: 0;
+  li {
+    flex: 1;
+    p {
+      text-align: center;
+      // height: 16px;
+      font-size: 20px;
+      font-weight: bold;
+    }
+
+    .user_Overview_nums {
+      width: 100px;
+      height: 100px;
+      text-align: center;
+      line-height: 100px;
+      font-size: 22px;
+      margin: 0 auto 15px;
+      background-size: cover;
+      background-position: center center;
+      position: relative;
+
+      &::before {
+        content: "";
+        position: absolute;
+        width: 100%;
+        height: 100%;
+        top: 0;
+        left: 0;
+      }
+
+      &.bgdonghua::before {
+        animation: rotating 14s linear infinite;
+      }
+    }
+
+    .allnum {
+      // background-image: url("../../assets/img/left_top_lan.png");
+      &::before {
+        background-image: url("./img/left_top_lan.png");
+      }
+    }
+
+    .online {
+      &::before {
+        background-image: url("./img/left_top_lv.png");
+      }
+    }
+
+    .offline {
+      &::before {
+        background-image: url("./img/left_top_huang.png");
+      }
+    }
+
+    .laramnum {
+      &::before {
+        background-image: url("./img/left_top_hong.png");
+      }
+    }
+  }
+}
+</style>

src/views/equBigData/topHeader.vue

@@ -3,21 +3,23 @@
     <dv-decoration-8 class="header-left-decoration" />
     <dv-decoration-5 :dur="dur" class="header-center-decoration" />
     <!-- <dv-decoration-8 class="header-right-decoration" :reverse="true" /> -->
-    <div class="header-right-decoration right-box"><div>{{ dateTime }}</div>
-          <div>
-            <img
-              src="./img/quanping.png"
-              alt=""
-              @click="toggleFullscreen"
-              v-if="!isFullscreen"
-            />
-            <img
-              src="./img/tuichuquanping.png"
-              alt=""
-              @click="toggleFullscreen"
-              v-if="isFullscreen"
-            />
-          </div></div>
+    <div class="header-right-decoration right-box">
+      <div>{{ dateTime }}</div>
+      <div>
+        <img
+          src="./img/quanping.png"
+          alt=""
+          @click="toggleFullscreen"
+          v-if="!isFullscreen"
+        />
+        <img
+          src="./img/tuichuquanping.png"
+          alt=""
+          @click="toggleFullscreen"
+          v-if="isFullscreen"
+        />
+      </div>
+    </div>
     <div class="center-title">易益康养</div>
   </div>
 </template>
@@ -25,12 +27,12 @@
 <script>
 export default {
   name: "TopHeader",
-  data(){
-    return{
-      dur:4,
+  data() {
+    return {
+      dur: 4,
       dateTime: "",
       isFullscreen: false, // 初始状态为非全屏
-    }
+    };
   },
   mounted() {
     this.currentTime();
@@ -50,7 +52,10 @@ export default {
         new Date().getDate() < 10
           ? "0" + new Date().getDate()
           : new Date().getDate();
-      let hh = new Date().getHours();
+      let hh =
+        new Date().getHours() < 10
+          ? "0" + new Date().getHours()
+          : new Date().getHours();
       let mf =
         new Date().getMinutes() < 10
           ? "0" + new Date().getMinutes()
@@ -60,13 +65,13 @@ export default {
           ? "0" + new Date().getSeconds()
           : new Date().getSeconds();
       _this.dateTime =
-        yy + "- " + mm + "-" + dd + " " + hh + ":" + mf + ":" + ss;
+        yy + "-" + mm + "-" + dd + " " + hh + ":" + mf + ":" + ss;
     },
 
-    toggleFullscreen(){
-      this.$parent.toggleFullscreen()
+    toggleFullscreen() {
+      this.$parent.toggleFullscreen();
     },
-  }
+  },
 };
 </script>
 
@@ -90,17 +95,17 @@ export default {
     width: 25%;
     height: 60px;
   }
-  .right-box{
+  .right-box {
     display: flex;
-      justify-content: space-between;
-      align-items: center;
-     font-size: 24px;
-     color:#00e1e1;
-     padding-right:30px;
-      img {
-        width: 30px;
-        height: 30px;
-      }
+    justify-content: space-between;
+    align-items: center;
+    font-size: 24px;
+    color: #00e1e1;
+    padding-right: 30px;
+    img {
+      width: 30px;
+      height: 30px;
+    }
   }
 
   .center-title {