29270

src/apps/AppIntelligentSecurity/AppIntelligentSecurity.vue

@@ -1,12 +1,6 @@
 <template>
   <section class="videoSurveillance">
     <AiTopFixed>
-      <!-- <div class="header" flex>
-        <div flex v-for="(node,i) in nodes" :key="i">
-          <div :class="{current:isCurrent(i)}" v-text="node.nodeName" @click="gotoNode(node,i)"/>
-          <u-icon v-if="!isCurrent(i)" name="arrow-right" color="#ddd"/>
-        </div>
-      </div> -->
       <div class="area-content">
         <AiAreaPicker :areaId="user.areaId" v-model="areaId" @select="getList" :name.sync="areaName" selectRoot>
           <img src="./img/local-icon.png" alt="">
@@ -36,19 +30,6 @@
         <p>在线率</p>
       </div>
     </div>
-    <!-- <div class="list">
-      <div class="item" v-for="row in monitors" :key="row.nodeId" :class="{online:!row.online}">
-        <template v-if="!!row.deviceId">
-          <img :src="`${$cdn}video/video-img.png`" alt="" class="videoIcon" @click="showMonitor(row)">
-          <div class="area-name" v-text="row.deviceName" @click="showMonitor(row)"/>
-          <div class="deviceStatus" v-text="!row.online?'在线':'离线'" @click="showMonitor(row)"/>
-        </template>
-        <template v-else>
-          <div class="area-name" v-text="row.nodeName" @click="getMore(row)"/>
-          <u-icon name="arrow-right" color="#ddd" @click="getMore(row)"/>
-        </template>
-      </div>
-    </div> -->
     <div class="list-content">
       <div class="item" v-for="(item, index) in list" :key="index" @click="showMonitor(item)">
         <img class="img" :src="item.indexUrl || coverImg" alt="" v-if="item.deviceStatus == 1">
@@ -56,6 +37,7 @@
         <p>{{ item.name }}</p>
         <img class="icon" src="./img/play-icon.png" alt="" v-if="item.deviceStatus == 1">
         <img class="icon" src="./img/not-play-icon.png" alt="" v-else>
+        <div class="item-bottom">设备{{ item.deviceStatus === '1' ? '在线' : '离线' }}</div>
       </div>
       <AiEmpty v-if="!list.length" />
     </div>
@@ -197,14 +179,15 @@ export default {
     padding-left: 32px;
     background: #FFF;
 
+
     .item {
+      position: relative;
       width: 100%;
       border-bottom: 1px solid #DDD;
       padding: 0 32px 0 0;
       box-sizing: border-box;
       display: flex;
       align-items: center;
-
       &.online {
         .videoIcon {
           filter: none;
@@ -322,6 +305,22 @@ export default {
       margin-bottom: 32px;
       vertical-align: top;
 
+      .item-bottom {
+        position: absolute;
+        top: 218px;
+        left: 0;
+        z-index: 1;
+        width: 100%;
+        height: 60px;
+        line-height: 60px;
+        text-align: center;
+        color: #fff;
+        font-size: 28px;
+        background: rgba(0, 0, 0, 0.6);
+        transform: translateY(-100%);
+        border-radius: 0 0 16px 16px;
+      }
+
       .img {
         width: 100%;
         height: 218px;