修改

build/webpack.base.conf.js

@@ -15,7 +15,6 @@ module.exports = {
     app: ["babel-polyfill", "./src/main.js"]
   },
   externals: {
-    'BMap': 'BMap',
     'AMap': 'AMap',
   },
   output: {
@@ -29,6 +28,7 @@ module.exports = {
     extensions: ['.js', '.vue', '.json'],
     alias: {
       '@': resolve('src'),
+      'static':path.resolve(__dirname, '../static'),
     }
   },
   module: {

package.json

@@ -41,6 +41,7 @@
     "js-cookie": "^2.2.0",
     "less": "^3.10.3",
     "less-loader": "^5.0.0",
+    "mux.js": "^5.6.2",
     "node-notifier": "^5.1.2",
     "optimize-css-assets-webpack-plugin": "^3.2.0",
     "ora": "^1.2.0",
@@ -57,6 +58,7 @@
     "uglifyjs-webpack-plugin": "^1.1.1",
     "url-loader": "^0.5.8",
     "v-viewer": "^1.4.2",
+    "videojs-contrib-hls.js": "^3.2.0",
     "vue-lazyload": "^1.3.3",
     "vue-loader": "^13.3.0",
     "vue-style-loader": "^3.0.1",

src/api/business/inspect.js

@@ -70,6 +70,24 @@ export default {
       url: '/api/inspectDriver/assignTask',
       data:data
     })
+  },
+
+  point(driverId) {
+    return axios({
+      method: "GET",
+      url: '/api/inspectDriver/point',
+      params:{
+        driverId
+      }
+    })
+  },
+
+  getLiveList(){
+    return axios({
+      method: "GET",
+      url: '/api/equipment/live',
+      params:{}
+    })
   }
 }
 

src/components/dVideo.vue

@@ -0,0 +1,92 @@
+<template>
+  <div class="d-video">
+    <video-player v-if="playerOptions.sources.length>0" class="video-player vjs-custom-skin"
+                  ref="videoPlayer"
+                  :playsinline="true"
+                  :options="playerOptions"
+    ></video-player>
+  </div>
+</template>
+
+<script>
+  import {videoPlayer} from 'vue-video-player'
+  import 'video.js/dist/video-js.css'
+  import 'videojs-flash'
+
+  export default {
+    name: "dVideo",
+    data() {
+      return {
+        playerOptions: {
+          playbackRates: [0.7, 1.0, 1.5, 2.0], //播放速度
+          autoplay: false, //如果true,浏览器准备好时开始回放。
+          muted: false, // 默认情况下将会消除任何音频。
+          loop: false, // 导致视频一结束就重新开始。
+          preload: 'auto', // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
+          language: 'zh-CN',
+          aspectRatio: '13:6', // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
+          fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
+          techOrder: ['flash'],      // 兼容顺序
+          flash: {
+            hls: {withCredentials: false},
+            // swf: 'static/video-js.swf' // 引入静态文件swf
+          },
+          html5: {hls: {withCredentials: false}},
+          sources: [],
+          // width: document.documentElement.clientWidth,
+          notSupportedMessage: '此视频暂无法播放，请稍后再试', //允许覆盖Video.js无法播放媒体源时显示的默认信息。
+          controlBar: {
+            timeDivider: true,
+            durationDisplay: true,
+            remainingTimeDisplay: false,
+            fullscreenToggle: true  //全屏按钮
+          }
+        }
+      }
+    },
+    props: {
+      liveUrl: {
+        type: String,
+        default() {
+          return '';
+        }
+      }
+    },
+    created() {
+      let playerOptions = JSON.parse(JSON.stringify(this.playerOptions))
+      console.log(this.liveUrl)
+      playerOptions.sources.push(
+        {
+          src: this.liveUrl,
+          type: 'rtmp/mp4'
+        }
+      )
+      this.playerOptions = Object.assign({}, playerOptions)
+    },
+    components: {
+      videoPlayer
+    }
+  }
+</script>
+
+<style lang="less">
+  .d-video{
+    .video-js
+    .vjs-big-play-button {
+      top: 42% !important;
+      left: 47% !important;
+      height: 80px !important;
+      width: 80px !important;
+      font-size: inherit;
+      line-height: 80px !important;
+      border-radius: 50% !important;
+      opacity: 0.7 !important;
+      border: 2px solid #fff !important;
+      background-color: #194672 !important;
+    }
+
+    .video-js .vjs-big-play-button .vjs-icon-placeholder:before {
+      font-size: 40px!important;
+    }
+  }
+</style>

src/components/trajectoryDialog.vue

@@ -0,0 +1,139 @@
+<template>
+  <div class="index-map" id="indexMap"></div>
+</template>
+
+<script>
+  import AMap from "AMap";
+  import inspectApi from '@/api/business/inspect'
+
+  export default {
+    name: "trajectory-dialog",
+    data() {
+      return {
+        map: {},
+      }
+    },
+    props: {
+      driverId: {
+        type: Number,
+        default() {
+          return 0
+        }
+      },
+    },
+    components: {},
+    mounted() {
+      this.map = new AMap.Map("indexMap", {
+        zoom: 12,
+        center: [118.750078, 31.983115],
+        resizeEnable: true
+      });
+      let me = this
+      this.map.on("complete", function() {
+        me.point()
+      });
+    },
+    methods: {
+      handleClose() {
+        this.$emit('handleClose')
+      },
+      initRouters(pathList,list) {
+        let path = list
+        let point = new AMap.LngLat(path[0].x, path[0].y)
+        let me = this
+        let image = require('../assets/img/uva.png')
+        let icon = new AMap.Icon({
+          // 图标尺寸
+          size: new AMap.Size(40, 40),
+          // 图标的取图地址
+          image: image,
+          // 图标所用图片大小
+          imageSize: new AMap.Size(40, 40),
+        });
+        let marker = new AMap.Marker({
+          map: me.map,
+          position: point,
+          icon: icon,
+          offset: new AMap.Pixel(-20, -20),
+          autoRotation: true,
+          angle: -90,
+        });
+        // 绘制轨迹
+        let polyline = new AMap.Polyline({
+          map: me.map,
+          path: pathList,
+          showDir: true,
+          strokeColor: "#FFEF5D",  //线颜色
+          // strokeOpacity: 1,     //线透明度
+          strokeWeight: 6,      //线宽
+          // strokeStyle: "solid"  //线样式
+        });
+
+        let passedPolyline = new AMap.Polyline({
+          map: me.map,
+          // path: lineArr,
+          strokeColor: "#AF5",  //线颜色
+          // strokeOpacity: 1,     //线透明度
+          strokeWeight: 6,      //线宽
+          // strokeStyle: "solid"  //线样式
+        })
+
+        marker.on('moving', function (e) {
+          passedPolyline.setPath(e.passedPath);
+        });
+
+        marker.moveAlong(pathList, 6000);
+        this.map.setCenter(point)
+      },
+      point(){
+        inspectApi.point(this.driverId).then(res => {
+          let me = this
+          let polygons = null;
+          var bounds = res.data;
+          if (bounds && bounds.length > 0) {
+            let path = []
+            for (let i = 0, l = bounds.length; i < l; i++) {
+              path.push(
+                new AMap.LngLat(bounds[i].x, bounds[i].y)
+              )
+            }
+            polygons = new AMap.Polygon({
+              zIndex: 11,
+              path: path,
+              strokeColor: "#09EBE0", //线颜色
+              strokeOpacity: 1, //线透明度
+              strokeWeight: 1, //线宽
+              strokeStyle: "solid", //线样式
+              strokeDasharray: [10, 5], //补充线样式
+              fillColor: "#17ABA3",
+              fillOpacity: 1
+            });
+            this.map.add(polygons)
+            this.initRouters(path,bounds)
+          }
+        }).catch(e => {
+        })
+      }
+    }
+  }
+</script>
+
+<style lang="less">
+  .index-map {
+    width: 100%;
+    height: 90%;
+    border: 1px solid #dcdfe6;
+    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.12), 0 0 6px 0 rgba(0, 0, 0, 0.04);
+
+    img {
+      background-color: inherit!important;
+    }
+
+    .amap-marker-label {
+      padding: 0 !important;
+      font-size: 14px !important;
+      line-height: 18px !important;
+    }
+  }
+</style>
+

src/views/basicdata/driver/driverForm.vue

@@ -50,6 +50,12 @@
                   }">
         <driverAreaSelect :clearValidate="clearValidate" :disabled="ruleForm.disabled" v-model="ruleForm.driverArea"></driverAreaSelect>
       </el-form-item>
+      <el-form-item label="水质标准" prop="category">
+        <el-select :disabled="ruleForm.disabled" filterable clearable v-model="ruleForm.category" size="small"
+                   placeholder="水质标准">
+          <el-option v-for="(item,index) in categoryList" :key="index" :label="item.name" :value="item.id"/>
+        </el-select>
+      </el-form-item>
       <el-form-item v-if="ruleForm.disabled" label="创建人" prop="format_create_user">
         <el-input :disabled="ruleForm.disabled" clearable v-model="ruleForm.format_create_user" size="small"
                   placeholder=""/>
@@ -107,6 +113,13 @@
       return {
         validateNum: validateNum,
         addBtnLoading: false,
+        categoryList:[
+          {id:'categoryOne',name:'Ⅰ类'},
+          {id:'categoryTwo',name:'Ⅱ类'},
+          {id:'categoryThree',name:'Ⅲ类'},
+          {id:'categoryFour',name:'Ⅳ类'},
+          {id:'categoryFive',name:'Ⅴ类'},
+        ]
       }
     },
     props: {

src/views/basicdata/driver/index.vue

@@ -216,6 +216,9 @@
               if (type) {
                 child.disabled = true
               }
+              if(!child.driverManager){
+                child.driverManager=''
+              }
               this.ruleForm = Object.assign({}, child)
             } catch (e) {
             }

src/views/basicdata/equipment/equipmentForm.vue

@@ -42,6 +42,9 @@
           type="date">
         </el-date-picker>
       </el-form-item>
+      <el-form-item label="直播地址" prop="liveUrl">
+        <el-input clearable v-model="ruleForm.liveUrl" size="small" placeholder="请输入直播地址"/>
+      </el-form-item>
       <el-form-item label="任务类型" prop="taskType" :rules="[{
                     required: true, message: '任务类型不能为空', trigger: 'change'
                   }]">

src/views/basicdata/equipment/index.vue

@@ -227,6 +227,7 @@
         })
       },
       handleEdit(data, type) {
+        console.log(data)
         this.initRuleForm()
         this.addDialogVisible = true
         this.$nextTick(function () {

src/views/business/inspectDriverList/index.vue

@@ -50,7 +50,14 @@
       <el-table-column show-overflow-tooltip prop="driverAreaText" label="区划" align="center"/>
       <el-table-column show-overflow-tooltip prop="inspectTime" label="巡检时间" min-width="120" align="center">
       </el-table-column>
-      <el-table-column width="80" show-overflow-tooltip prop="driverLength" label="巡检长度" align="center"/>
+      <el-table-column width="80" v-if="isAdmin||btnRule.some(btn=>btn=='point')" show-overflow-tooltip
+                       prop="driverLength" label="巡检轨迹" align="center">
+        <template slot-scope="{row}">
+          <el-button type="primary" size="mini"
+                     @click="pointClick(row)">查看
+          </el-button>
+        </template>
+      </el-table-column>
       <el-table-column width="80" show-overflow-tooltip prop="formatCreateUser" label="申请人" align="center"/>
       <el-table-column width="160" show-overflow-tooltip prop="formatCreateTime" label="申请时间" align="center"/>
       <el-table-column width="80" show-overflow-tooltip prop="statusText" label="状态" align="center"/>
@@ -75,9 +82,9 @@
         label="操作"
         align="left" width="255">
         <template slot-scope="{row}">
-<!--          <el-button v-if="isAdmin||btnRule.some(btn=>btn=='print')" @click="point(row)" :loading="pointLoading"-->
-<!--                     type="primary" size="mini" icon="el-icon-printer">打印-->
-<!--          </el-button>-->
+          <!--          <el-button v-if="isAdmin||btnRule.some(btn=>btn=='print')" @click="point(row)" :loading="pointLoading"-->
+          <!--                     type="primary" size="mini" icon="el-icon-printer">打印-->
+          <!--          </el-button>-->
           <el-button v-if="row.status==2&&(isAdmin||btnRule.some(btn=>btn=='execute'))" type="success" size="mini"
                      icon="el-icon-finished"
                      @click="execute(row)">执行
@@ -115,20 +122,6 @@
       :before-close="handleReportClose">
       <report @goBack="reportVisible=false" v-if="reportVisible" :reportData="reportData"></report>
     </el-drawer>
-<!--    <el-drawer-->
-<!--      title="打印"-->
-<!--      :visible.sync="pointVisible"-->
-<!--      :direction="direction"-->
-<!--      :size="drawerWidth"-->
-<!--      :before-close="handlePointClose">-->
-<!--      <point v-if="pointVisible" :pointData="pointData"></point>-->
-<!--      <div style="width: 100%;text-align: center;margin-top: 20px;margin-bottom: 20px">-->
-<!--        <el-button @click="pointMain('pointMain')" type="primary" size="medium" icon="el-icon-printer">打印</el-button>-->
-<!--        <el-button size="medium" icon="el-icon-back"-->
-<!--                   @click="pointVisible = false">返回-->
-<!--        </el-button>-->
-<!--      </div>-->
-<!--    </el-drawer>-->
     <el-dialog top="10vh" class="execute-dialog" :close-on-press-escape="false" :close-on-click-modal="false" center
                :visible.sync="executeVisible" title="执行">
       <el-form ref="executeForm" :model="executeForm" size="small" label-width="120px">
@@ -149,28 +142,32 @@
           <el-input maxlength="20" clearable v-model="executeForm.weather" size="small" placeholder="请输入天气"/>
         </el-form-item>
         <el-form-item label="风向" prop="wind">
-          <el-input  maxlength="20" clearable v-model="executeForm.wind" size="small" placeholder="请输入风向"/>
+          <el-input maxlength="20" clearable v-model="executeForm.wind" size="small" placeholder="请输入风向"/>
         </el-form-item>
         <el-form-item label="温度" prop="temperature">
-          <el-input  maxlength="20" clearable v-model="executeForm.temperature" size="small" placeholder="请输入温度"/>
+          <el-input maxlength="20" clearable v-model="executeForm.temperature" size="small" placeholder="请输入温度"/>
         </el-form-item>
         <el-form-item label="飞行速度 (M/S)" prop="flightSpeed" :rules="[{
                     validator: validateNum, trigger: 'blur'
                   }]">
-          <el-input oninput="value=value.replace(/[^\d.]/g,'')" maxlength="9" clearable v-model="executeForm.flightSpeed" size="small" placeholder="请输入飞行速度 (M/S)"/>
+          <el-input oninput="value=value.replace(/[^\d.]/g,'')" maxlength="9" clearable
+                    v-model="executeForm.flightSpeed" size="small" placeholder="请输入飞行速度 (M/S)"/>
         </el-form-item>
         <el-form-item label="飞行时间 (Min)" prop="flightTime" :rules="[{
                     validator: validateNum, trigger: 'blur'
                   }]">
-          <el-input oninput="value=value.replace(/[^\d.]/g,'')" maxlength="9" clearable v-model="executeForm.flightTime" size="small" placeholder="请输入飞行时间 (Min)"/>
+          <el-input oninput="value=value.replace(/[^\d.]/g,'')" maxlength="9" clearable v-model="executeForm.flightTime"
+                    size="small" placeholder="请输入飞行时间 (Min)"/>
         </el-form-item>
         <el-form-item label="飞行高度 (M)" prop="flightHeight" :rules="[{
                     validator: validateNum, trigger: 'blur'
                   }]">
-          <el-input oninput="value=value.replace(/[^\d.]/g,'')" maxlength="9" clearable v-model="executeForm.flightHeight" size="small" placeholder="请输入飞行高度 (M)"/>
+          <el-input oninput="value=value.replace(/[^\d.]/g,'')" maxlength="9" clearable
+                    v-model="executeForm.flightHeight" size="small" placeholder="请输入飞行高度 (M)"/>
         </el-form-item>
         <el-form-item label="备注" prop="remark">
-          <el-input show-word-limit maxlength="200" clearable v-model="executeForm.remark" type="textarea" rows="5" size="small"
+          <el-input show-word-limit maxlength="200" clearable v-model="executeForm.remark" type="textarea" rows="5"
+                    size="small"
                     placeholder="请输入备注"/>
         </el-form-item>
       </el-form>
@@ -204,6 +201,14 @@
             </el-button>
         </span>
     </el-dialog>
+    <el-drawer
+      title="巡航轨迹"
+      :visible.sync="trajectoryVisible"
+      :direction="direction"
+      :size="drawerWidth"
+      :before-close="handleRrajectoryClose">
+      <trajectory-dialog :driverId="driverId" v-if="trajectoryVisible"></trajectory-dialog>
+    </el-drawer>
   </div>
 </template>
 
@@ -216,6 +221,7 @@
   import reportApi from '@/api/report/report'
   import inspectfileApi from '@/api/file/inspectfile'
   import imageList from '../../file/imageList'
+  import trajectoryDialog from '@/components/trajectoryDialog'
   import $ from 'jquery'
   import html2canvas from 'html2canvas'
   import {mapGetters} from "vuex";
@@ -227,19 +233,21 @@
         if (value) {
           let lengthP = /^(?!0+(?:\.0+)?$)(?:[1-9]\d*|0)(?:\.\d{1,2})?$/
           if (lengthP.test(value)) {
-            if(value>=1000000){
+            if (value >= 1000000) {
               callback(new Error('不能大于999999.99'));
-            }else{
+            } else {
               callback();
             }
           } else {
             callback(new Error('正整数最多两位小数点'));
           }
-        }else{
+        } else {
           callback();
         }
       }
       return {
+        trajectoryVisible:false,
+        driverId:'',
         drawerWidth: (document.body.clientWidth - 190) + 'px',
         direction: 'rtl',
         validateNum: validateNum,
@@ -260,7 +268,7 @@
         dataList: [],
         currentPage: 1,
         count: 0,
-        pageSize:  parseInt((document.body.clientHeight - 300 - 43) / 45),
+        pageSize: parseInt((document.body.clientHeight - 300 - 43) / 45),
         tableHeight: document.body.clientHeight - 300,
         tableLoading: false,
         searchParam: {
@@ -298,12 +306,13 @@
         reportVisible: false,
         pointData: {},
         pointVisible: false,
-        mapImg:'',
+        mapImg: '',
 
       }
     },
-    components: {report, point, pReport, imageList,driverAreaSelect},
+    components: {report, point, pReport, imageList, driverAreaSelect,trajectoryDialog},
     created() {
+      this.map.setCity('南京市')
     },
     computed: {
       ...mapGetters(["btnRule", "isAdmin"])
@@ -315,20 +324,27 @@
       this.getAllList()
     },
     methods: {
+      handleRrajectoryClose(){
+        this.trajectoryVisible=false
+      },
+      pointClick(row) {
+        this.driverId=row.driverId
+        this.trajectoryVisible=true
+      },
       indexMethod(index) {
         return (index + 1) + ((this.currentPage - 1) * this.pageSize);
       },
-      handlePointClose(hide){
-        if(hide){
+      handlePointClose(hide) {
+        if (hide) {
           hide()
         }
-        this.pointVisible=false
+        this.pointVisible = false
       },
-      handleReportClose(hide){
-        if(hide){
+      handleReportClose(hide) {
+        if (hide) {
           hide()
         }
-        this.reportVisible=false
+        this.reportVisible = false
       },
       handleDelete(data) {
         const h = this.$createElement;
@@ -536,9 +552,9 @@
       },
       pointMain(name) {
         let me = this
-        if(name=='reportPoint'){
+        if (name == 'reportPoint') {
           let reportMap = document.getElementById('reportMap')
-          if(reportMap){
+          if (reportMap) {
             html2canvas(reportMap, {
               backgroundColor: 'white',
               scale: 2,
@@ -551,10 +567,10 @@
                 me.mapImg = ''
               })
             });
-          }else{
+          } else {
             me.print(document.getElementById('reportPoint').innerHTML);
           }
-        }else{
+        } else {
           me.print(document.getElementById(name).innerHTML);
         }
       },
@@ -586,17 +602,6 @@
           this.tableLoading = false
         })
       },
-      // point(item) {
-      //   this.pointLoading = true
-      //   inspectApi.print({id: item.id}).then(res => {
-      //     this.pointData = res.data,
-      //       this.pointVisible = true,
-      //       this.pointLoading = false
-      //   }).catch(e => {
-      //     this.pointData = {}
-      //     this.pointLoading = false
-      //   })
-      // },
       initSearchParam() {
         this.searchParam = {
           type: '',
@@ -664,7 +669,7 @@
 
     .detail-dialog {
       .el-dialog {
-        width:  80% !important;
+        width: 80% !important;
 
         .el-dialog__header {
           padding: 0 !important;

src/views/business/realVideo.vue

@@ -0,0 +1,69 @@
+<template>
+  <div :style="{height:height+'px'}" class="realVideo">
+    <el-table style="width: 200px" stripe ref="table" size="medium"
+              :height="tableHeight" v-loading="tableLoading" :data="dataList">
+      <el-table-column  label="设备名称" prop="name" align="center"/>
+      <el-table-column label="实时视频" align="center">
+        <template slot-scope="scoped">
+          <el-button v-if="scoped.row.liveUrl" @click="play(scoped.row)" type="primary" size="mini"
+                     icon="el-icon-video-play">
+          </el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <div>
+      <dVideo style="width: 100%" v-if="liveUrl" :liveUrl="liveUrl"></dVideo>
+    </div>
+  </div>
+</template>
+
+<script>
+  import inspectApi from '@/api/business/inspect'
+  import dVideo from '@/components/dVideo'
+  export default {
+    name: "realVideo",
+    data() {
+      return {
+        height: document.body.clientHeight - 150,
+        tableHeight: document.body.clientHeight - 170,
+        tableLoading: false,
+        dataList: [],
+        liveUrl:''
+      }
+    },
+    mounted(){
+      this.getList()
+    },
+    components:{dVideo},
+    methods:{
+      getList(){
+        inspectApi.getLiveList().then(res => {
+          this.dataList=res.data
+        }).catch(e => {
+          this.dataList=[]
+        })
+      },
+      play(row){
+        this.liveUrl=''
+        this.$nextTick(function () {
+          this.liveUrl = row.liveUrl
+        })
+      }
+    }
+  }
+</script>
+
+<style lang="less">
+  .realVideo {
+    background-color: #fff;
+    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .12), 0 0 6px 0 rgba(0, 0, 0, .04);
+    padding: 15px;
+    display: flex;
+    >div:first-child{
+      flex: inherit;
+    }
+    >div:last-child{
+      flex: 1;
+    }
+  }
+</style>

src/views/index/index.vue

@@ -437,7 +437,6 @@
 <style lang="less">
   .fade-leave-active {
     opacity: 0;
-    transform: translateX(-100%);
     transition: all 500ms;
   }
 

src/views/statistics/statisticsMap.vue

@@ -1,390 +0,0 @@
-<template>
-  <div :style="{height:height+'px'}" class="statistics-map">
-    <el-form :inline="true" :model="searchParam" class="demo-form-inline">
-      <el-form-item label="区域" prop="region">
-        <el-select @change="regionChange" clearable style="width: 150px" v-model="searchParam.region"
-                   size="small"
-                   placeholder="请选择区域">
-          <el-option v-for="(item,index) in regionList" :key="index" :label="item.name" :value="item.id"/>
-        </el-select>
-      </el-form-item>
-      <el-form-item label="河道" prop="covalency">
-        <el-select @change="covalencyChange" clearable style="width: 150px" v-model="searchParam.covalency" size="small"
-                   placeholder="请选择河道">
-          <el-option v-for="(item,index) in covalencyList" :key="index" :label="item.name" :value="item.code"/>
-        </el-select>
-      </el-form-item>
-      <el-form-item>
-        <el-button @click="clearMap" icon="el-icon-refresh-right"
-                   type="primary" size="small"
-                   style="background-color: #fff; border: 1px solid #ccc ; color: #666">清空
-        </el-button>
-      </el-form-item>
-    </el-form>
-    <div v-loading="loading" :style="{height:(height-40)+'px'}" id="map"></div>
-    <!--    <el-dialog  top="5vh" class="dialog" :close-on-press-escape="false" :close-on-click-modal="false" center-->
-    <!--               :visible.sync="visible" title="查看图片">-->
-    <!--      <div style="display: flex">-->
-    <viewer v-show="false" v-if="image&&image.length>0" @inited="inited">
-      <img :key="index" style="width: 0px" :title="item.name" :data-source="item.imageUrl" v-for="(item,index) in image">
-    </viewer>
-    <!--      </div>-->
-    <!--      <div style="margin-top: 15px;text-align: center" v-if="visible">{{image.name}}</div>-->
-    <!--      <span slot="footer" class="dialog-footer">-->
-    <!--                  <el-button size="medium" icon="el-icon-back"-->
-    <!--                             @click="visible = false">返回-->
-    <!--                  </el-button>-->
-    <!--              </span>-->
-    <!--    </el-dialog>-->
-  </div>
-</template>
-
-<script>
-  import BMap from 'BMap'
-  import statisticsApi from '@/api/statistics/index'
-
-  export default {
-    name: "statisticsMap",
-    data: function () {
-      return {
-        loading: false,
-        height: '',
-        image: [],
-        imgHeight: 0,
-        map: {},
-        regionList: [],
-        covalencyList: [],
-        fileList: [],
-        visible: false,
-        searchParam: {
-          region: '',
-          covalency: ''
-        }
-      }
-    },
-    components: {},
-    created() {
-      this.height = document.body.clientHeight - 150
-      this.imgHeight = document.body.clientHeight - 270
-    },
-    mounted() {
-      let me =this
-      this.map = new BMap.Map('map')
-      this.map.centerAndZoom('南京', 12)
-      this.map.setMinZoom(10)
-      this.map.enableScrollWheelZoom(true);
-      this.getMapIndex()
-      var bdary = new BMap.Boundary();
-      bdary.get("南京市", function(rs){       //获取行政区域
-        var count = rs.boundaries.length; //行政区域的点有多少个
-        var pointArray = [];
-        for (var i = 0; i < count; i++) {
-          var ply = new BMap.Polygon(rs.boundaries[i], {fillColor:'',fillOpacity:0,strokeWeight: 2, strokeColor: "#ff0000",enableMassClear:false}); //建立多边形覆盖物
-          me.map.addOverlay(ply);  //添加覆盖物
-          pointArray = pointArray.concat(ply.getPath());
-        }
-      });
-      // let point = new BMap.Point(118.972322,32.063631)
-      // this.convertFrom(point)
-    },
-    methods: {
-      clearMap() {
-        this.searchParam = {
-          region: '',
-          covalency: ''
-        }
-        this.covalencyList = []
-        this.fileList = []
-        this.image=[]
-        this.map.clearOverlays()
-        this.initRegionMarker()
-      },
-      regionChange(val) {
-        this.searchParam.covalency = ''
-        this.covalencyList = []
-        this.fileList = []
-        this.image=[]
-        this.map.clearOverlays()
-        if (val) {
-          this.driverArea(val)
-        } else {
-          this.initRegionMarker()
-        }
-      },
-      covalencyChange(val) {
-        this.fileList = []
-        this.image=[]
-        this.map.clearOverlays()
-        if (val) {
-          this.getFileList(val)
-        } else {
-          this.initAreaMarker()
-        }
-      },
-      getMapIndex() {
-        this.loading = true
-        statisticsApi.getMapIndex({type: 1}).then(res => {
-          this.regionList = res.data ? res.data : []
-          this.initRegionMarker()
-          this.loading = false
-        }).catch(e => {
-          this.loading = false
-          this.regionList = []
-        })
-      },
-      getFileList(code) {
-        this.loading = true
-        this.searchParam.covalency = code
-        statisticsApi.fileList({code: code, type: 1}).then(res => {
-          this.fileList = res.data ? res.data : []
-          this.initFileListMarker()
-          this.loading = false
-        }).catch(e => {
-          this.fileList = []
-          this.loading = false
-        })
-      },
-      inited(viewer) {
-        this.$viewer = viewer
-      },
-      driverArea(val) {
-        this.loading = true
-        this.searchParam.region = val
-        statisticsApi.driverArea({driverArea: val, type: 1}).then(res => {
-          this.covalencyList = res.data ? res.data : []
-          this.initAreaMarker()
-          this.loading = false
-        }).catch(e => {
-          this.covalencyList = []
-          this.loading = false
-        })
-      },
-      initAreaMarker() {
-        let centerPoint = null
-        this.covalencyList.map(item => {
-          if (item.longitude && item.latitude) {
-            let point = new BMap.Point(item.longitude, item.latitude)
-            if (!centerPoint) {
-              centerPoint = point
-              this.addRegionMarker(point, item, 2, 'center')
-            } else {
-              this.addRegionMarker(point, item, 2)
-            }
-          }
-        })
-      },
-      initFileListMarker() {
-        let me = this
-        let centerPoint = null
-        this.fileList.map(item => {
-          if (item.longitude && item.latitude) {
-            let point = new BMap.Point(item.longitude, item.latitude)
-            let filter = this.fileList.filter(child => child.longitude == item.longitude && child.latitude == item.latitude)
-            if (!centerPoint) {
-              centerPoint = point
-              this.addFileMarker(point, item, filter.length, 'center')
-            } else {
-              this.addFileMarker(point, item, filter.length)
-            }
-          }
-        })
-      },
-      async addFileMarker(point, item, num, center) {
-        let me = this
-        // let bdPoint = await this.convertFrom(point)
-        let icon = new BMap.Icon(require('../../assets/img/marker-img.png'), new BMap.Size(32, 35));
-        let label = new BMap.Label(item.location+(num>1?('('+num+'张)'):''), {
-          offset: new BMap.Size(30, -20)
-        });
-        label.setStyle({
-          color: "#fff",
-          fontSize: "12px",
-          borderColor: '#ff6600',
-          height: "20px",
-          lineHeight: "20px",
-          padding: "0 5px",
-          fontFamily: "微软雅黑",
-          backgroundColor: '#ff6600'
-        });
-        let marker = new BMap.Marker(point, {
-          icon: icon,
-          offset: new BMap.Size(0, -0),
-          enableDragging:true
-        });
-        marker.dataChild = item
-        marker.setLabel(label);
-        marker.setZIndex(99)
-        marker.addEventListener("click", function () {
-          let image = me.fileList.filter(item=>item.latitude == this.dataChild.latitude&&item.longitude == this.dataChild.longitude)
-          me.image = Object.assign([],image)
-          me.$nextTick(function () {
-            me.$viewer.show()
-          })
-        });
-        this.map.addOverlay(marker);
-        if (center) {
-          this.map.setCenter(point)
-        }
-      },
-      initRegionMarker() {
-        let centerPoint = null
-        this.regionList.map(item => {
-          if (item.longitude && item.latitude) {
-            let point = new BMap.Point(item.longitude, item.latitude)
-            if (!centerPoint) {
-              centerPoint = point
-              this.addRegionMarker(point, item, 1, 'center')
-            } else {
-              this.addRegionMarker(point, item, 1)
-            }
-          }
-        })
-      },
-      async addRegionMarker(point, item, type, center) {
-        // let bdPoint = await this.convertFrom(point)
-        let remark = this.initComplexCustomOverlay(point, item.name, item.count + (type == 1 ? '条河道' : '个问题'), type == 1 ? item.id : item.code, type)
-        this.map.addOverlay(remark);
-        if (center) {
-          this.map.setCenter(point)
-        }
-      },
-      initComplexCustomOverlay(mainPoint, mainName, mainNum, mainId, mainType) {
-        // 复杂的自定义覆盖物
-        let me = this
-
-        function ComplexCustomOverlay(point, text, mouseoverText) {
-          this._point = point;
-          this._text = text;
-          this._overText = mouseoverText;
-          this._mainId = mainId
-          this._mainType = mainType
-        }
-
-        ComplexCustomOverlay.prototype = new BMap.Overlay();
-        ComplexCustomOverlay.prototype.initialize = function (map) {
-          let that = this;
-          this._map = map;
-          let div = this._div = document.createElement("div");
-          div.title = that._text
-          div.style.position = "absolute";
-          div.style.zIndex = BMap.Overlay.getZIndex(this._point.lat);
-          div.style.backgroundColor = "rgba(0, 139, 139, 0.9)";
-          div.style.border = "0px";
-          div.style.borderRadius = '50%';
-          div.style.cursor = 'pointer';
-          div.style.padding = '1px';
-          div.style.whiteSpace = 'nowrap';
-          div.style.userSelect = 'none';
-          div.style.color = "white";
-          div.style.height = "92px";
-          div.style.width = "92px"
-          div.style.padding = "2px";
-          div.style.fontSize = "14px"
-
-          let arrow = this._arrow = document.createElement("div");
-          arrow.style.position = "absolute";
-          arrow.style.width = "11px";
-          arrow.style.height = "10px";
-          arrow.style.top = "22px";
-          arrow.style.left = "10px";
-          arrow.style.overflow = "hidden";
-          div.appendChild(arrow);
-
-          let p1 = document.createElement("p");
-          p1.style.margin = "0px";
-          p1.style.marginTop = "25px";
-          p1.style.textAlign = "center";
-          p1.innerHTML = that._text
-          div.appendChild(p1);
-          let p2 = document.createElement("p");
-          p2.style.textAlign = "center";
-          p2.style.margin = "0px";
-          p2.innerHTML = that._overText
-          div.appendChild(p2);
-          div.onmouseover = function () {
-            this.style.backgroundColor = "rgba(225, 165, 0, 0.9)";
-            this.style.borderColor = "#fff";
-            arrow.style.backgroundPosition = "0px -20px";
-          }
-
-          div.onclick = function () {
-            me.map.clearOverlays()
-            if (that._mainType == 1) {
-              me.driverArea(that._mainId)
-            } else if (that._mainType == 2) {
-              me.getFileList(that._mainId)
-            }
-          }
-
-          div.onmouseout = function () {
-            this.style.backgroundColor = "rgba(0, 139, 139, 0.9)";
-            this.style.borderColor = "#fff";
-            arrow.style.backgroundPosition = "0px 0px";
-          }
-
-          me.map.getPanes().labelPane.appendChild(div);
-
-          return div;
-        }
-        ComplexCustomOverlay.prototype.draw = function () {
-          let map = this._map;
-          let pixel = map.pointToOverlayPixel(this._point);
-          this._div.style.left = pixel.x - parseInt(this._arrow.style.left) + "px";
-          this._div.style.top = pixel.y - 30 + "px";
-        }
-
-        return new ComplexCustomOverlay(mainPoint, mainName, mainNum, mainId, mainType);
-      },
-      convertFrom(point) {
-        return new Promise((resolve, reject) => {
-          let convertor = new BMap.Convertor();
-          let pointArr = [];
-          pointArr.push(point)
-          convertor.translate(pointArr, 1, 5, function (data) {
-            console.log(data)
-            if (data.status === 0) {
-              var geoc = new BMap.Geocoder();
-              geoc.getLocation(data.points[0], function(rs){
-                var addComp = rs.addressComponents;
-                alert(addComp.province + ", " + addComp.city + ", " + addComp.district + ", " + addComp.street + ", " + addComp.streetNumber);
-              });
-            } else {
-              resolve(null)
-            }
-          })
-        })
-      }
-    }
-  }
-</script>
-
-<style lang="less">
-  .statistics-map {
-    height: inherit;
-    background-color: #fff;
-    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .12), 0 0 6px 0 rgba(0, 0, 0, .04);
-    padding: 15px;
-
-    > div {
-      width: 100%;
-    }
-
-    .dialog {
-      .el-dialog {
-        width: 50% !important;
-      }
-
-      .el-dialog__body {
-        text-align: center !important;
-      }
-
-      img {
-        width: 100%;
-      }
-    }
-
-    .anchorBL {
-      display: none !important;
-    }
-  }
-</style>

yarn.lock

@@ -1322,8 +1322,8 @@ caniuse-api@^3.0.0:
     lodash.uniq "^4.5.0"
 
 caniuse-db@^1.0.30000529, caniuse-db@^1.0.30000634, caniuse-db@^1.0.30000639:
-  version "1.0.30001062"
-  resolved "https://registry.npm.taobao.org/caniuse-db/download/caniuse-db-1.0.30001062.tgz?cache=0&sync_timestamp=1589866626780&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fcaniuse-db%2Fdownload%2Fcaniuse-db-1.0.30001062.tgz#886c896cf6b7deb3f7267697b8e29cc17862563d"
+  version "1.0.30001063"
+  resolved "https://registry.npm.taobao.org/caniuse-db/download/caniuse-db-1.0.30001063.tgz?cache=0&sync_timestamp=1589946896589&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fcaniuse-db%2Fdownload%2Fcaniuse-db-1.0.30001063.tgz#9a126dd6120660e57a148f0c639c1f95e06dff18"
 
 caniuse-lite@^1.0.0, caniuse-lite@^1.0.30000792, caniuse-lite@^1.0.30000805, caniuse-lite@^1.0.30000844, caniuse-lite@^1.0.30001043:
   version "1.0.30001062"
@@ -2286,8 +2286,8 @@ ejs@^2.5.7:
   resolved "https://registry.npm.taobao.org/ejs/download/ejs-2.7.4.tgz?cache=0&sync_timestamp=1589699559399&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fejs%2Fdownload%2Fejs-2.7.4.tgz#48661287573dcc53e366c7a1ae52c3a120eec9ba"
 
 electron-to-chromium@^1.2.7, electron-to-chromium@^1.3.30, electron-to-chromium@^1.3.413, electron-to-chromium@^1.3.47:
-  version "1.3.445"
-  resolved "https://registry.npm.taobao.org/electron-to-chromium/download/electron-to-chromium-1.3.445.tgz#ce2a2989864d233eeb80437b13069dbca900cd00"
+  version "1.3.446"
+  resolved "https://registry.npm.taobao.org/electron-to-chromium/download/electron-to-chromium-1.3.446.tgz#12c336bc858e04d6b614a488f32f2dd89561601f"
 
 element-ui@^2.13.0:
   version "2.13.2"
@@ -3044,6 +3044,12 @@ hex-color-regex@^1.1.0:
   version "1.1.0"
   resolved "https://registry.npm.taobao.org/hex-color-regex/download/hex-color-regex-1.1.0.tgz#4c06fccb4602fe2602b3c93df82d7e7dbf1a8a8e"
 
+hls.js@^0.8.9:
+  version "0.8.9"
+  resolved "https://registry.npm.taobao.org/hls.js/download/hls.js-0.8.9.tgz#db367cc99ce5b0976ea3e059a1d044d7b0790697"
+  dependencies:
+    url-toolkit "^2.0.1"
+
 hmac-drbg@^1.0.0:
   version "1.0.1"
   resolved "https://registry.npm.taobao.org/hmac-drbg/download/hmac-drbg-1.0.1.tgz#d2745701025a6c775a6c545793ed502fc0c649a1"
@@ -4119,6 +4125,10 @@ mux.js@5.5.1:
   version "5.5.1"
   resolved "https://registry.npm.taobao.org/mux.js/download/mux.js-5.5.1.tgz#5bd5d7b2e5e5560da8126928e93af3c532e08372"
 
+mux.js@^5.6.2:
+  version "5.6.2"
+  resolved "https://registry.npm.taobao.org/mux.js/download/mux.js-5.6.2.tgz#1fd08042382b527750fbb5960129e92f838612bb"
+
 nan@^2.12.1:
   version "2.14.1"
   resolved "https://registry.npm.taobao.org/nan/download/nan-2.14.1.tgz#d7be34dfa3105b91494c3147089315eff8874b01"
@@ -4200,8 +4210,8 @@ node-notifier@^5.1.2:
     which "^1.3.0"
 
 node-releases@^1.1.53:
-  version "1.1.55"
-  resolved "https://registry.npm.taobao.org/node-releases/download/node-releases-1.1.55.tgz#8af23b7c561d8e2e6e36a46637bab84633b07cee"
+  version "1.1.56"
+  resolved "https://registry.npm.taobao.org/node-releases/download/node-releases-1.1.56.tgz?cache=0&sync_timestamp=1589962213211&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fnode-releases%2Fdownload%2Fnode-releases-1.1.56.tgz#bc054a417d316e3adac90eafb7e1932802f28705"
 
 normalize-package-data@^2.3.2, normalize-package-data@^2.3.4:
   version "2.5.0"
@@ -6640,7 +6650,7 @@ url-slug@2.0.0:
   dependencies:
     unidecode "0.1.8"
 
-url-toolkit@^2.1.3, url-toolkit@^2.1.6:
+url-toolkit@^2.0.1, url-toolkit@^2.1.3, url-toolkit@^2.1.6:
   version "2.1.6"
   resolved "https://registry.npm.taobao.org/url-toolkit/download/url-toolkit-2.1.6.tgz#6d03246499e519aad224c44044a4ae20544154f2"
 
@@ -6763,6 +6773,12 @@ verror@1.10.0:
     videojs-font "3.2.0"
     videojs-vtt.js "^0.15.2"
 
+videojs-contrib-hls.js@^3.2.0:
+  version "3.2.0"
+  resolved "https://registry.npm.taobao.org/videojs-contrib-hls.js/download/videojs-contrib-hls.js-3.2.0.tgz#02d7504addefb0cc7d8835a7c8b7b5cca45222a6"
+  dependencies:
+    hls.js "^0.8.9"
+
 videojs-contrib-hls@^5.12.2:
   version "5.15.0"
   resolved "https://registry.npm.taobao.org/videojs-contrib-hls/download/videojs-contrib-hls-5.15.0.tgz#fe4957367e5d68b7d23f78ed32e37a9dd892a0a8"