鹰眼监控功能

index.html

@@ -15,6 +15,7 @@
     <div id="app"></div>
     <!-- built files will be auto injected -->
   </body>
+  <script src="./static//hls.js"></script>
   <script src="./static/SMap.min.js"></script>
   <!-- <script src="./static/esm/SMap.min.js"></script> -->
   <script src="./static/Plugins.min.js"></script>

src/server/api.js

@@ -30,4 +30,5 @@ export default {
   GET_COMPRESS_COUNT: '/dc/countCompressStationsByStreet', // 街道小型压缩站数目
   GET_GARBAGE_COUNT: '/dc/countPointsByStreet', // 街道垃圾收集点数目
   GET_TOILET_COUNT: '/dc/countToiletsByStreet', // 街道环卫公厕数目
+  GET_VIDEO_URL: 'http://10.89.1.208:7000/hawkeye/api/v1/camera/',
 }

src/store/actions.js

@@ -32,7 +32,7 @@ export default {
       params: {days: 10}
     }).then(res => {
       const {content} = res.data
-      const keys = Object.keys(content)
+      const keys = (content && Object.keys(content)) ||[]
       const result = keys.map(key => ({
         date: moment(key).format('MM.DD'),
         ...content[key],

src/views/components/combine.vue

 <template>
   <div class="combine">
-    <m-scroll :length="list.length" :limit="2">
+    <m-scroll v-if="list.length > 0" :length="list.length" :limit="2">
       <div @click="$emit('select', item)" class="detail" v-for="item in list" :key="item.id">
         <div>
           <h5>{{item.communityName}}</h5>
@@ -23,6 +23,7 @@
         <m-step class="combine-step" :steps="steps" :current="getCurrent(item)" />
       </div>
     </m-scroll>
+    <div v-else class="no-data">— 暂无数据 —</div>
   </div>
 </template>
 
@@ -62,6 +63,10 @@ export default {
 
 <style lang="stylus" scoped>
 .combine
+  .no-data
+    width 100%
+    height 100%
+    $flex-center()
   .detail
     background $section-bg
     padding .05rem .1rem .2rem

src/views/components/land-population.vue

@@ -3,7 +3,7 @@
     <div class="labels">
       <p v-for="label in labels" :key="label">{{label}}</p>
     </div>
-    <div class="content" v-for="item in list" :key="item.label">
+    <div class="content" v-for="(item, index) in list" :key="item.label + index">
       <p>{{item.label}}</p>
       <div>
         <div v-for="(child, i) in item.data" :key="i">
@@ -26,8 +26,7 @@ export default {
   },
   computed: {
     list() {
-      const {year1, year2, year3} = this.$store.state.landPopulationInfo
-      if (!year1 || !year2 || !year3) return []
+      const {year1 = {}, year2 = {}, year3 = {}} = this.$store.state.landPopulationInfo
       const {density1 = 0} = year1
       const {year: label2 = '', area: area2 = 0, registered_population: population2 = 0, population_density: density2 = 0} = year2
       const {year: label3 = '', area: area3 = 0, registered_population: population3 = 0, population_density: density3 = 0} = year3

src/views/components/right-component.vue

@@ -42,7 +42,12 @@ export default {
   methods: {
     handleClick(i) {
       const {id} = this.$store.state.videoInfo[i]
-      this.$emit('select', id)
+      this.$ajax.get({
+        url: this.$api.GET_VIDEO_URL + id,
+        showLoading: true,
+      }).then(res => {
+        this.$emit('video', this.$com.confirm(res, 'payload.url'))
+      })
     }
   },
 }

src/views/components/smart-discover.vue

@@ -17,7 +17,10 @@
         </div>
       </div>
     </div>
-    <div class="chart"><m-chart :config="config" :data="$store.state.discoverTrend" :options="options" /></div>
+    <div class="chart">
+      <m-chart v-if="discoverTrend.length > 0" :config="config" :data="discoverTrend" :options="options" />
+      <div v-else class="no-data">— 暂无数据 —</div>
+    </div>
   </div>
 </template>
 
@@ -47,6 +50,9 @@ export default {
     }
   },
   computed: {
+    discoverTrend() {
+      return this.$store.state.discoverTrend
+    },
     curSmartType() {
       return this.$store.state.curSmartType
     },
@@ -77,6 +83,10 @@ export default {
 
 <style lang="stylus" scoped>
 .smart-discover
+  .no-data
+    width 100%
+    height 100%
+    $flex-center()
   .sum
     display flex
     margin-bottom .05rem

src/views/components/video-component.vue

+<template>
+  <div class="video-component">
+    <video v-if="isVideo" class="video" ref="video" autoplay="autoplay" controls>
+      您的浏览器不支持播放此视频。
+    </video>
+    <iframe v-else class="video" :src="videoSrc" frameborder="0"/>
+  </div>
+</template>
+
+<script>
+const {Hls} = window
+export default {
+  name: 'VideoComponent',
+  props: {
+    videoSrc: {
+      type: String,
+      required: true,
+    }
+  },
+  computed: {
+    isVideo() {
+      return this.videoSrc && this.videoSrc.indexOf('m3u8') >= 0
+    },
+  },
+  mounted() {
+    this.$nextTick(this.play)
+  },
+  methods: {
+    play() {
+      const {video} = this.$refs
+      if(Hls.isSupported()){
+        const hls = new Hls()
+        hls.loadSource(this.videoSrc)
+        hls.attachMedia(video)
+        hls.on(Hls.Events.MANIFEST_PARSED, () => {
+          video.play()
+        })
+      } else if (video.canPlayType('application/vnd.apple.mpegurl')){
+        video.src = this.videoSrc
+        video.addEventListener('canplay', () => {
+          video.play()
+        })
+      }
+    },
+  },
+}
+</script>
+<style lang="stylus" scoped>
+.video-component
+.video
+  width 100%
+  height 100%
+</style>

src/views/main.vue

@@ -20,6 +20,7 @@
         area="right"
         @patrol="handleMapClick"
         @handle="handleMapClick"
+        @video="handleViewVideo"
       />
     </m-animate>
     <MapBtns v-model="fullView" @zoomin="zoom('in')" @zoomout="zoom('out')" />
@@ -32,6 +33,9 @@
     <m-modal title="指挥体系" :value="showCommandModal" @close="$store.commit('SET_COMMAND_MODAL', false)">
       <m-form :label-width=".7" :model="commandData" :layout="commandLayout" />
     </m-modal>
+    <m-modal title="鹰眼监控" v-model="videoModal">
+      <VideoComponent v-if="videoModal" :videoSrc="videoSrc" />
+    </m-modal>
   </m-grid>
 </template>
 
@@ -39,6 +43,7 @@
 import LeftComponent from './components/left-component'
 import RightComponent from './components/right-component'
 import MapBtns from './components/map-btns'
+import VideoComponent from './components/video-component'
 import {mapState, mapActions} from 'vuex'
 export default {
   name: 'Main',
@@ -46,11 +51,14 @@ export default {
     LeftComponent,
     RightComponent,
     MapBtns,
+    VideoComponent,
   },
   data() {
     return {
       complete: false,
       fullView: false,
+      videoModal: false,
+      videoSrc: null,
       detailModal: false,
       patrolModal: false,
       smartPoints: null,
@@ -221,6 +229,10 @@ export default {
         }),
       })
     },
+    handleViewVideo(src) {
+      this.videoSrc = src
+      this.videoModal = true
+    },
     zoom(type) {
       if (type === 'in') this.$refs.map.zoomIn()
       else this.$refs.map.zoomOut()