视频监控

src/mods/AppVideoSurve/AppVideoSurve.vue

@@ -0,0 +1,170 @@
+<template>
+  <div class="videoSurve">
+    <div class="top">
+      <ai-area-picker ref="area" class="ai-area" :value="areaId" :name.sync="areaName" :areaId="$areaId" @select="areaSelect">
+        <div class="ai-area__wrapper">
+          <span class="label" v-if="areaName">{{ areaName }}</span>
+          <span v-else>请选择</span>
+          <!-- <u-icon name="arrow-right"></u-icon> -->
+        </div>
+      </ai-area-picker>
+
+      <div class="msgs">
+        <div class="item">
+          <span class="tag"></span>
+          <span class="hint">设备总数</span>
+          <span class="num">50</span>
+        </div>
+
+        <div class="item">
+          <span class="tag"></span>
+          <span class="hint">在线率</span>
+          <span class="num">68%</span>
+        </div>
+
+        <div class="item">
+          <span class="tag"></span>
+          <span class="hint">在线设备</span>
+          <span class="num">34</span>
+        </div>
+
+        <div class="item">
+          <span class="tag"></span>
+          <span class="hint">离线设备</span>
+          <span class="num">16</span>
+        </div>
+      </div>
+    </div>
+
+    <div class="middle">
+      <div class="nav">设备列表</div>
+
+      <div class="imgs">
+        <div class="items">
+          <img src="../../static/img/avatar.png" alt="" />
+          <span class="hint">11</span>
+        </div>
+
+        <div class="items">
+          <img src="../../static/img/avatar.png" alt="" />
+          <span class="hint">11</span>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { mapState } from 'vuex'
+
+export default {
+  name: 'AppVideoSurve',
+  appName: '视频监控',
+  components: {},
+  props: {},
+  data() {
+    return {
+      areaId: '',
+      $areaId: '',
+      areaName: '',
+    }
+  },
+  computed: {
+    ...mapState(['user']),
+  },
+  watch: {},
+  onLoad() {
+    this.areaId = this.$areaId
+    this.areaName = this.$areaName
+  },
+  onShow() {},
+  methods: {
+    areaSelect(e) {
+      console.log(e)
+    },
+  },
+}
+</script>
+
+<style scoped lang="scss">
+.videoSurve {
+  height: 100%;
+  .top {
+    padding: 0 32px;
+    background: #58657e;
+    color: #fff;
+    .ai-area {
+      .ai-area__wrapper {
+        padding: 28px 0;
+        .label {
+          font-size: 40px;
+          font-weight: 600;
+        }
+      }
+    }
+
+    .msgs {
+      display: flex;
+      flex-wrap: wrap;
+      padding: 8px 0 32px 0;
+      .item {
+        margin-top: 24px;
+        .tag {
+          display: inline-block;
+          width: 8px;
+          height: 8px;
+          vertical-align: middle;
+          margin-right: 8px;
+          background: #fff;
+          border-radius: 50%;
+        }
+        .hint {
+          font-size: 28px;
+        }
+        .num {
+          font-size: 28px;
+          font-weight: 500;
+          margin-left: 32px;
+        }
+      }
+      .item:nth-child(2n + 1) {
+        width: 45%;
+      }
+      .item:nth-child(2n) {
+        width: 55%;
+      }
+    }
+  }
+
+  .middle {
+    padding: 0 32px;
+    .nav {
+      padding: 48px 0 32px 0;
+      font-size: 38px;
+      font-weight: 600;
+    }
+
+    .imgs {
+      display: flex;
+      flex-wrap: wrap;
+      .items {
+        width: 49%;
+        margin-top: 24px;
+        img {
+          width: 100%;
+          height: 188px;
+        }
+        .hint {
+          margin-top: 8px;
+        }
+      }
+      .items:nth-child(2n + 1) {
+        margin-right: 2%;
+      }
+      .items:nth-child(-n + 2) {
+        margin-top: 0;
+      }
+    }
+  }
+}
+</style>