代码提交

src/views/energySaving.vue

@@ -63,7 +63,7 @@ const { color } = require("echarts")
               {{ item.name }}
             </div>
           </div>
-          <div class="equipmentWarnList">
+          <div class="equipmentWarnList" id="equipmentWarnList">
             <div
               class="warnList"
               v-for="(item, index) in warnList"
@@ -320,34 +320,62 @@ export default {
       ],
       equipmentBtnAc: "", //点击预警
       warnList: [
-        // {
+        {
-        //   id: "1",
+          id: "1",
-        //   icon: require("../assets/images/jieNengImg/warnRed.png"),
+          icon: require("../assets/images/jieNengImg/warnRed.png"),
-        //   time: "2023年03月12日 15:45:10",
+          time: "2023年03月12日 15:45:10",
-        //   case: "设备故障",
+          case: "设备故障",
-        //   grade: "三级",
+          grade: "三级",
-        // },
+        },
-        // {
+        {
-        //   id: "2",
+          id: "2",
-        //   icon: require("../assets/images/jieNengImg/warnBlue.png"),
+          icon: require("../assets/images/jieNengImg/warnBlue.png"),
-        //   time: "2023年03月12日 15:45:10",
+          time: "2023年03月12日 15:45:10",
-        //   case: "设备故障",
+          case: "设备故障",
-        //   grade: "三级",
+          grade: "三级",
-        // },
+        },
-        // {
+        {
-        //   id: "3",
+          id: "3",
-        //   icon: require("../assets/images/jieNengImg/warnWhite.png"),
+          icon: require("../assets/images/jieNengImg/warnWhite.png"),
-        //   time: "2023年03月12日 15:45:10",
+          time: "2023年03月12日 15:45:10",
-        //   case: "设备故障",
+          case: "设备故障",
-        //   grade: "三级",
+          grade: "三级",
-        // },
+        },
-        // {
+        {
-        //   id: "4",
+          id: "4",
-        //   icon: require("../assets/images/jieNengImg/warnRed.png"),
+          icon: require("../assets/images/jieNengImg/warnRed.png"),
-        //   time: "2023年03月12日 15:45:10",
+          time: "2023年03月12日 15:45:10",
-        //   case: "设备故障",
+          case: "设备故障",
-        //   grade: "三级",
+          grade: "三级",
-        // },
+        },
+        {
+          id: "4",
+          icon: require("../assets/images/jieNengImg/warnRed.png"),
+          time: "2023年03月12日 15:45:10",
+          case: "设备故障",
+          grade: "三级",
+        },
+        {
+          id: "4",
+          icon: require("../assets/images/jieNengImg/warnRed.png"),
+          time: "2023年03月12日 15:45:10",
+          case: "设备故障",
+          grade: "三级",
+        },
+        {
+          id: "4",
+          icon: require("../assets/images/jieNengImg/warnRed.png"),
+          time: "2023年03月12日 15:45:10",
+          case: "设备故障",
+          grade: "三级",
+        },
+        {
+          id: "4",
+          icon: require("../assets/images/jieNengImg/warnRed.png"),
+          time: "2023年03月12日 15:45:10",
+          case: "设备故障",
+          grade: "三级",
+        },
       ], //故障数组
       sunList: [
         {
@@ -418,7 +446,7 @@ export default {
     this.getQOQ()
     this.getYOY()
     // window.createMqtt = this.createMqtt();
-   
+   this.autoScroll(67, 50, 0, document.getElementById('equipmentWarnList'))
   },
       watch: {
      alarmFirstLevel(val) {
@@ -1114,6 +1142,35 @@ export default {
     closeEquipmentShow() {
       this.equipmentShow = false;
     },
+      //自动滚动
+ autoScroll(stepLength, speed, delay, element) {
+   console.log(element.scrollHeight);
+    let interval
+    let step = 1
+    element.scrollTop = 0
+    function start() {
+        interval = setInterval(scrolling, speed)
+        element.scrollTop += step
+    }
+      
+    function scrolling() {
+        if (element.scrollTop % stepLength !== 0 && element.scrollTop === (element.scrollHeight - element.offsetHeight)) {
+          // element.scrollTop += step
+          step = 1
+          element.scrollTop = 0
+        } else {
+          if (element.scrollTop === 0 || element.scrollTop === (element.scrollHeight - element.offsetHeight) ) { // 触顶或触底\
+            step *= -1 // 转换方向
+          }
+          clearInterval(interval)
+          setTimeout(start, delay)
+        }
+    }
+    
+    if (element.offsetHeight !== element.scrollHeight) { // 元素内容没有溢出时，不触发
+        setTimeout(start, delay)
+    }
+}
   },
   components: {},
 };

src/views/index.vue

@@ -5,31 +5,18 @@
         <div class="title">智慧法庭</div>
         <div class="wisdomContent">
           <div class="wisdomTop">
-            <div
+            <div class="wisdomData" v-for="(item, index) in wisdomList" :key="index">
-              class="wisdomData"
-              v-for="(item, index) in wisdomList"
-              :key="index"
-            >
               <div style="color: #fff; font-size: 0.7rem">{{ item.name }}</div>
               <div
                 :class="houseList[index]"
-                style="
+                style="width: 100%; height: 100%; color: #fff; font-size: 0.7rem"
-                  width: 100%;
-                  height: 100%;
-                  color: #fff;
-                  font-size: 0.7rem;
-                "
               >
                 {{ item.count }}
               </div>
             </div>
           </div>
           <div class="wisdomBottom">
-            <div
+            <div class="wisdomCount" v-for="(item, index) in wisdomMonArr" :key="index">
-              class="wisdomCount"
-              v-for="(item, index) in wisdomMonArr"
-              :key="index"
-            >
               <div style="width: 100%; font-size: 0.6rem">
                 <span>{{ item.name }}:</span>
                 <span style="color: rgb(225, 177, 25); margin-left: 5%">{{
@@ -64,12 +51,8 @@
             <span>{{ item.name }}</span>
           </div>
         </div>
-        <div class="warnList">
+        <div class="warnList" id="warnList">
-          <div
+          <div class="warnListContent" v-for="(item, index) in warnList" :key="index" id="warnListContent">
-            class="warnListContent"
-            v-for="(item, index) in warnList"
-            :key="index"
-          >
             <div class="warnArray">
               <span>{{ item.id }}</span>
               <img :src="item.icon" style="width: 7%; margin-left: 3%" />
@@ -412,6 +395,20 @@ export default {
           cause: "<空调设备>发生事故",
           risk: "三级",
         },
+        {
+          id: "5",
+          icon: require("../assets/images/warnOrange.png"),
+          time: "2023年03月18日 15:26:08",
+          cause: "<空调设备>发生事故",
+          risk: "三级",
+        },
+        {
+          id: "5",
+          icon: require("../assets/images/warnOrange.png"),
+          time: "2023年03月18日 15:26:08",
+          cause: "<空调设备>发生事故",
+          risk: "三级",
+        },
       ], //报警数组
       selectValue: {
         value: "79",
@@ -512,6 +509,7 @@ export default {
     //   this.cameraList = camera;
     // }, 1000);
     this.warnSelect(0);
+    this.autoScroll(67, 50, 0, document.getElementById('warnList'))
   },
   watch: {
     alarmAllLevel(val) {
@@ -1640,6 +1638,35 @@ export default {
           break;
       }
     },
+    //自动滚动
+ autoScroll(stepLength, speed, delay, element) {
+   console.log(element.scrollHeight);
+    let interval
+    let step = 1
+    element.scrollTop = 0
+    function start() {
+        interval = setInterval(scrolling, speed)
+        element.scrollTop += step
+    }
+      
+    function scrolling() {
+        if (element.scrollTop % stepLength !== 0 && element.scrollTop === (element.scrollHeight - element.offsetHeight)) {
+          // element.scrollTop += step
+          step = 1
+          element.scrollTop = 0
+        } else {
+          if (element.scrollTop === 0 || element.scrollTop === (element.scrollHeight - element.offsetHeight) ) { // 触顶或触底\
+            step *= -1 // 转换方向
+          }
+          clearInterval(interval)
+          setTimeout(start, delay)
+        }
+    }
+    
+    if (element.offsetHeight !== element.scrollHeight) { // 元素内容没有溢出时，不触发
+        setTimeout(start, delay)
+    }
+}
 },
   components: {
     camera,
@@ -1813,6 +1840,7 @@ export default {
       }
       .warnList {
         height: calc(100% - 31%);
+        // height:480px;
         width: 100%;
         background: url(../assets/images/warnDottedLine.png) no-repeat;
         background-size: 100% 100%;
@@ -2003,7 +2031,8 @@ export default {
         position: absolute;
         top: 22%;
         right: 35%;
-        /deep/ .el-date-editor.el-input, .el-date-editor.el-input__inner {
+        /deep/ .el-date-editor.el-input,
+        .el-date-editor.el-input__inner {
           width: 134px;
         }
         /deep/ .el-select {
@@ -2041,8 +2070,8 @@ export default {
           height: 100%;
           width: 25px;
           text-align: center;
-            -webkit-transition: all .3s;
+          -webkit-transition: all 0.3s;
-            transition: all .3s;
+          transition: all 0.3s;
           line-height: 22px;
         }
         /deep/ .el-input--suffix .el-input__inner {
@@ -2138,5 +2167,3 @@ export default {
   }
 }
 </style>
-
-