feat: 重庆消防远程监控页面的控制按钮

src/views/main/modules/center-map/CenterMapContent.vue

@@ -0,0 +1,17 @@
+<template >
+  <div style="background-color: #00000060;width: 100%; height: 100%;"></div>
+</template>
+
+<script>
+
+export default {
+  name: 'CenterMapContent',
+  data() {
+    return {}
+  },
+  methods: {}
+}
+</script>
+
+<style scoped lang='less'>
+</style>

src/views/main/modules/center-map/ControlPanel.vue

@@ -0,0 +1,106 @@
+<template >
+  <div>
+    <ControlButton :icon="control.icon" v-for="control in controls">
+    {{control.title}}
+    </ControlButton>
+  </div>
+</template>
+<script>
+import deviceStateIcon from '@/assets/images/icon/device-state-icon.png'
+import deviceWatchIcon from '@/assets/images/icon/device-watch-icon.png'
+import fireIcon from '@/assets/images/icon/fire-icon.png'
+import fireRoomIcon from '@/assets/images/icon/fire-room-icon.png'
+import fireWayIcon from '@/assets/images/icon/fire-way-icon.png'
+
+const ControlButton = {
+  props: {
+    icon: {
+      type: String,
+      default: ''
+    }
+  },
+  render() {
+    return (
+      <div class="control-button">
+        <div class="button">
+          <img class="icon" src={this.icon} />
+        </div>
+        <div class="text">
+        { this.$slots.default }
+        </div>
+      </div>
+    )
+  }
+}
+
+export default {
+  name: 'ControlPanel',
+  components: {
+    ControlButton
+  },
+  data() {
+    return {
+      controls: [
+        {
+          title: '设备状态预警',
+          icon: deviceStateIcon
+        },
+        {
+          title: '设备监测预警',
+          icon:  deviceWatchIcon
+        },
+        {
+          title: '火警',
+          icon: fireIcon
+        },
+        {
+          title: '消防通道预警',
+          icon: fireWayIcon
+        },
+        {
+          title: '消控室预警',
+          icon: fireRoomIcon
+        },
+      ]
+    }
+  },
+  methods: {}
+}
+</script>
+
+<style scoped lang='less'>
+/deep/ .control-button {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  .button {
+    width: 42px;
+    height: 37px;
+    background: url('@/assets/images/btn-bg.png') no-repeat;
+    background-size: 100% 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    cursor: pointer;
+    .icon {
+      width: 31px;
+      height: 31px;
+    }
+    &:active {
+      background: url('@/assets/images/btn-active-bg.png') no-repeat;
+      background-size: 100% 100%;
+    }
+
+    &:hover {
+      background: url('@/assets/images/btn-active-bg.png') no-repeat;
+      background-size: 100% 100%;
+    }
+  }
+  .text {
+    margin: 10px 0px;
+    font-size: 12px;
+    color: #fff;
+  }
+}
+</style>

src/views/main/modules/center-map/index.vue

@@ -1,11 +1,22 @@
 <template >
-  <div id="center-map"></div>
+  <div id="center-map">
+    <div class="center-map-content">
+      <CenterMapContent />
+    </div>
+    <ControlPanel class="control-panel"/>
+  </div>
 </template>
 
 <script>
+import CenterMapContent from './CenterMapContent.vue'
+import ControlPanel from './ControlPanel.vue'
 
 export default {
   name: 'Main.CenterMap',
+  components: {
+    CenterMapContent,
+    ControlPanel
+  },
   data() {
     return {}
   },
@@ -19,5 +30,17 @@ export default {
   background-size: 100% 100%;
   width: 1135px;
   height: 590px;
+  position: relative;
+  .center-map-content {
+    width: 100%;
+    height: 100%;
+    padding: 20px 5px 5px 5px;
+  }
+
+  .control-panel {
+    position: absolute;
+    bottom: 20px;
+    right: 20px;
+  }
 }
 </style>