暂存

src/router/index.js

@@ -68,7 +68,7 @@ export const constantRoutes = [
     children: [
       {
         path: 'index',
-        component: () => import('@/views/index'),
+        component: () => import('@/views/datav/index'),
         name: 'Index',
         meta: { title: '首页', icon: 'dashboard', affix: true }
       }

src/views/equBigData/BottomCharts.vue

@@ -33,11 +33,11 @@ export default {
   .box-title {
     height: 20%;
     display: flex;
-    flex-direction: column;
+    justify-content: center;
     .header-center-decoration {
       width: 95%;
       height: 70px;
-      margin-top:22px;
+      margin-top: 3px;
     }
     .center-title {
       position: absolute;
@@ -47,13 +47,9 @@ export default {
       top: 14px;
       transform: translateX(-50%);
     }
-
   }
-  .content{
+  .content {
     height: 100%;
   }
-  .aa {
-    display: flex;
-  }
 }
 </style>

src/views/equBigData/index.vue

@@ -31,8 +31,8 @@
         <div class="left-under">
           <dv-border-box-13>
             <Border-Item title="报警列表">
-              <Right-Bottom v-if="alarmListFlag" :data="alarmList"/>            
-              <!-- <LeftBottom /> -->
+              <!-- <Right-Bottom v-if="alarmListFlag" :data="alarmList"/>             -->
+              <LeftBottom />
             </Border-Item>
           </dv-border-box-13>
           <!-- <ItemWrap
@@ -876,20 +876,19 @@ export default {
 <style lang="scss">
 #data-view-container {
   width: 100%;
-  // height: 100%;
-  min-height: calc(100vh - 84px);
+  height: calc(100vh - 84px);
+  // min-height: calc(100vh - 84px);
   background-color: #030409;
   color: #fff;
   overflow: hidden;
   background-image: url("./img/bg.png");
   background-size: 100%;
   background-repeat: no-repeat;
-
   .main {
     display: flex;
     padding: 0 10px 10px 10px;
     box-sizing: border-box;
-    min-height: 85vh;
+    height: calc(100% - 27px);
     .left {
       width: 30%;
       // box-sizing: border-box;
@@ -906,21 +905,17 @@ export default {
       .left-under {
         margin-top: 10px;
         height: 30%;
-        .contetn_lr-item {
-          height: 310px;
+        .left-border {
         }
       }
     }
-
     // .content {
     //   flex: 1;
     // }
     .content {
       // width: 30%;
       flex: 1;
-
       // box-sizing: border-box;
-
       .left-under {
         height: 40%;
         // margin-top: 10px;

src/views/equBigData/left-bottom.vue

@@ -1,6 +1,5 @@
 <template>
   <div
-    v-if="pageflag"
     class="left_boottom_wrap beautify-scroll-def"
     :class="{ 'overflow-y-auto': !sbtxSwiperFlag }"
   >
@@ -13,31 +12,22 @@
             <div class="flex">
               <div class="info">
                 <span class="labels">设备ID：</span>
-                <span class="contents zhuyao doudong wangguan">
-                  {{ item.gatewayno }}</span
-                >
+                <span class="idspan"> {{ item.device_id_code }}</span>
               </div>
               <div class="info">
                 <span class="labels">时间：</span>
                 <span class="contents" style="font-size: 12px">
-                  {{ item.createTime }}</span
+                  {{ item.createtime }}</span
                 >
               </div>
             </div>
 
-            <span
-              class="types doudong"
-              :class="{
-                typeRed: item.onlineState == 0,
-                typeGreen: item.onlineState == 1,
-              }"
-              >{{ item.onlineState == 1 ? "上线" : "下线" }}</span
-            >
+            <span class="box-right">{{ item.name }}</span>
 
             <div class="info addresswrap">
-              <span class="labels">地址：</span>
+              <span class="labels">消息：</span>
               <span class="contents ciyao" style="font-size: 12px">
-                {{ addressHandle(item) }}</span
+                {{ item.alarm_msg }}</span
               >
             </div>
           </div>
@@ -45,11 +35,234 @@
       </ul>
     </component>
   </div>
-
-  <!-- <Reacquire v-else @onclick="getData" style="line-height: 200px" /> -->
 </template>
 
 <script>
+import { alarmStatusList } from "@/api/system/equdata";
+// import { currentGET } from "api";
+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();
+    this.getAlarmStatusList();
+    // this.deviceView();
+  },
+  methods: {
+    addressHandle(item) {
+      let name = item.provinceName;
+      if (item.cityName) {
+        name += "/" + item.cityName;
+        if (item.countyName) {
+          name += "/" + item.countyName;
+        }
+      }
+      return name;
+    },
+
+    getAlarmStatusList() {
+      alarmStatusList().then((res) => {
+        this.countUserNumData = res.data;
+        this.list = res.data;
+        let timer = setTimeout(() => {
+          clearTimeout(timer);
+          this.defaultOption.step =
+            this.$store.state.settings.defaultOption.step;
+        }, this.$store.state.settings.defaultOption.waitTime);
+      });
+    },
+
+    getData() {
+      this.pageflag = true;
+      // this.pageflag =false
+      currentGET("big3", { limitNum: 20 }).then((res) => {
+        console.log("设备提醒", res);
+        if (res.success) {
+          this.countUserNumData = res.data;
+          this.list = res.data.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: calc(100% - 106px);
+  margin-top: 15px;
+}
+
+.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%;
+  padding-left: 0;
+
+  .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: #1890ff;
+        font-size: 15px;
+      }
+
+      .ciyao {
+        color: rgba(255, 255, 255, 0.8);
+      }
+
+      .warning {
+        color: #e6a23c;
+        font-size: 15px;
+      }
+    }
+
+    .inner_right {
+      position: relative;
+      height: 100%;
+      width: 85%;
+      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;
+      }
+      .flex {
+        display: flex;
+      }
+      .idspan {
+      color: #1790ff;
+      // font-size: 12px;
+    }
+      .box-right {
+        color: #1fcb21;
+      }
+
+    }
+
+    .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>
+
+<!-- <script>
 // import { currentGET } from "api";
 import { alarmStatusList } from "@/api/system/equdata";
 import vueSeamlessScroll from "vue-seamless-scroll"; // vue2引入方式
@@ -445,4 +658,4 @@ export default {
     }
   }
 }
-</style>
+</style> -->