智慧场景

src/assets/svg/IconCamera.vue

@@ -0,0 +1,19 @@
+<template>
+  <svg width="24" height="24" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <circle cx="24" cy="19" r="14" :stroke="color&&stroke!==''?color:'#2ea8e6'" stroke-width="4"
+            stroke-linecap="round" stroke-linejoin="round"/>
+    <circle cx="24" cy="19" r="6" :fill="color&&color!==''?color:'#2ea8e6'" :stroke="color&&color!==''?color:'#2ea8e6'" stroke-width="4"
+            stroke-linecap="round"
+            stroke-linejoin="round"/>
+    <path d="M17 31L11 43H37L31 31" :stroke="color&&color!==''?color:'#2ea8e6'" stroke-width="4"
+          stroke-linecap="round" stroke-linejoin="round"/>
+  </svg>
+</template>
+
+<script>
+export default {
+  props: {
+    color: String,
+  }
+}
+</script>

src/components/common/coreData.vue

@@ -16,8 +16,11 @@ export default {
   methods: {
     requireImg,
     resize() {
-      let clientWidth = Math.floor(100 / this.dataList.length) - 2 + "%";
-      this.itemWidth = clientWidth;
+      this.$nextTick(()=>{
+        let width = document.getElementsByClassName("coreData")[0].clientWidth;
+        let space = 22/width * 100;
+        this.itemWidth = Math.floor(100/this.dataList.length - space) + "%";
+      })
     },
   },
   watch: {

src/components/life/healthyHome/lifeHealthyHome.vue

@@ -114,7 +114,7 @@ export default {
 <style lang="less" scoped>
 .lifeHealthyHome {
   width: 100%;
-  height: 1500px;
+  height: auto;
   display: inline-block;
   vertical-align: top;
   .lifeHealthyHome-query {

src/components/life/parking/lifeParking.vue

@@ -131,7 +131,7 @@ export default {
 <style lang="less" scoped>
 .lifeParking {
   width: 100%;
-  height: 1500px;
+  height: auto;
   display: inline-block;
   vertical-align: top;
   .lifeParking-query {

src/components/life/restaurant/lifeRestaurant.vue

@@ -139,7 +139,7 @@ export default {
 <style lang="less" scoped>
 .lifeRestaurant {
   width: 100%;
-  height: 1500px;
+  height: auto;
   display: inline-block;
   vertical-align: top;
   .lifeRestaurant-query {

src/components/life/supermarket/lifeSupermarket.vue

@@ -114,7 +114,7 @@ export default {
 <style lang="less" scoped>
 .lifeSupermarket {
   width: 100%;
-  height: 1500px;
+  height: auto;
   display: inline-block;
   vertical-align: top;
   .lifeSupermarket-query {

src/components/scene/access/sceneAccess.vue

@@ -0,0 +1,3 @@
+<template>
+  <router-view />
+</template>

src/components/scene/energy/sceneEnergy.vue

@@ -0,0 +1,3 @@
+<template>
+  <router-view />
+</template>

src/components/scene/meeting/sceneMeeting.vue

@@ -0,0 +1,3 @@
+<template>
+  <router-view />
+</template>

src/components/security/alarm/map/imageMap.vue

@@ -0,0 +1,43 @@
+<template>
+  <div class="imageMap" ref="imageMap">
+    <img src="https://img2.focus.cn/upload/hz/37785/b_377847386.jpg" width="100%" height="100%">
+
+    <template v-for="(item, index) in markers">
+      <IconCamera :key="index"
+                  :color="item.color"
+                  style="position: absolute"
+                  :style="{top: item.top+'px', left: item.left+'px'}">
+      </IconCamera>
+    </template>
+  </div>
+</template>
+
+<script>
+import IconCamera from "@/assets/svg/IconCamera.vue";
+
+export default {
+  data() {
+    return {
+
+    }
+  },
+  components: {
+    IconCamera
+  },
+  props: {
+    markers: Array,
+  },
+  mounted() {
+  },
+  methods: {
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.imageMap {
+  width: 100%;
+  height: 100%;
+  position: relative;
+}
+</style>

src/components/security/alarm/securityAlarmMap.vue

@@ -2,12 +2,51 @@
   <div class="securityAlarmMap">
     <Card title="地图模式">
       <div class="securityAlarmMap-query">
-        <a-select v-model="floor">
+        <span>楼层：</span>
+        <a-select v-model="floor" style="width: 150px">
           <a-select-option value="1">1F</a-select-option>
-          <a-select-option value="2">2F</a-select-option>
-          <a-select-option value="3">3F</a-select-option>
-          <a-select-option value="4">4F</a-select-option>
+          <a-select-option value="2">B2</a-select-option>
+          <a-select-option value="3">B3</a-select-option>
         </a-select>
+
+        <div style="display: inline-block;float: right">
+          <span class="anticon" style="vertical-align: bottom"><IconCamera :color="'#5f95e7'" ></IconCamera></span>
+          <span style="display: inline-block;margin-right: 12px">在线</span>
+          <span class="anticon" style="vertical-align: bottom"><IconCamera :color="'#a2a4a2'" ></IconCamera></span>
+          <span style="display: inline-block;margin-right: 12px">离线</span>
+          <span class="anticon" style="vertical-align: bottom"><IconCamera :color="'#bd3124'" ></IconCamera></span>
+          <span style="display: inline-block;margin-right: 12px">告警</span>
+        </div>
+      </div>
+
+      <div class="securityAlarmMap-alert">
+        <a-alert type="warning" show-icon>
+          <template #message>
+            有<span style="color: red;font-weight: bold;display: inline-block;padding: 0 3px">2</span>条告警事件待处理
+          </template>
+        </a-alert>
+      </div>
+
+      <div class="securityAlarmMap-info">
+        <span class="securityAlarmMap-info-item">
+          当前在线摄像头
+          <span class="securityAlarmMap-info-item-num" style="color: #2f8cc8">16</span>
+          台
+        </span>
+        <span class="securityAlarmMap-info-item">
+          当前离线摄像头
+          <span class="securityAlarmMap-info-item-num" style="color: #4D4D4D">16</span>
+          台
+        </span>
+        <span class="securityAlarmMap-info-item">
+          当前告警摄像头
+          <span class="securityAlarmMap-info-item-num" style="color: #F1934E">16</span>
+          台
+        </span>
+      </div>
+
+      <div class="securityAlarmMap-map">
+        <ImageMap ></ImageMap>
       </div>
     </Card>
   </div>
@@ -15,20 +54,23 @@
 
 <script>
 import Card from "@/components/common/card.vue";
+import IconCamera from "@/assets/svg/IconCamera.vue";
+import ImageMap from "@/components/security/alarm/map/imageMap.vue";
+
 export default {
   data() {
     return {
-      floor: 0,
+      floor: '1',
     }
   },
   components: {
-    Card
+    Card,
+    IconCamera,
+    ImageMap,
   },
   mounted() {
   },
-  methods: {
-
-  }
+  methods: {}
 }
 </script>
 
@@ -36,5 +78,35 @@ export default {
 .securityAlarmMap {
   width: 100%;
   height: 100%;
+  padding: 0px 15px;
+
+  .securityAlarmMap-query {
+    margin-top: 8px;
+  }
+
+  .securityAlarmMap-alert {
+    margin-top: 15px;
+    height: 60px;
+  }
+
+  .securityAlarmMap-info {
+    width: 100%;
+    border: 1px solid #f0f2f5;
+    padding: 5px 0;
+    .securityAlarmMap-info-item {
+      display: inline-block;
+      margin: 0 5%;
+      font-size: 15px;
+      .securityAlarmMap-info-item-num {
+        font-size: 18px;
+        font-weight: bold;
+      }
+    }
+  }
+
+  .securityAlarmMap-map {
+    width: 100%;
+    padding: 2% 5%;
+  }
 }
 </style>

src/router/index.js

@@ -228,6 +228,7 @@ const router = new VueRouter({
               path: '/scene/meeting',
               name: 'sceneMeeting',
               meta: {breadcrumb: '智·会议'},
+              component: () => import('@/components/scene/meeting/sceneMeeting.vue'),
               children: [
                 {
                   path: '/scene/meeting/config',
@@ -247,6 +248,7 @@ const router = new VueRouter({
               path: '/scene/energy',
               name: 'sceneEnergy',
               meta: {breadcrumb: '智·能源'},
+              component: () => import('@/components/scene/energy/sceneEnergy.vue'),
               children: [
                 {
                   path: '/scene/energy/aircondition',
@@ -272,6 +274,7 @@ const router = new VueRouter({
               path: '/scene/access',
               name: 'sceneAccess',
               meta: {breadcrumb: '智·安防'},
+              component: () => import('@/components/scene/access/sceneAccess.vue'),
               children: [
                 {
                   path: '/scene/access/manage',

src/views/HomeView.vue

@@ -36,7 +36,7 @@ export default {
   },
   data() {
     return {
-      collapse: false, // 侧边栏是否收起
+      collapse: true, // 侧边栏是否收起
       asideWidth: 160,
       contentWidth: "84%",
       contentHeight: 450,