直播

package-lock.json

@@ -4482,6 +4482,15 @@
       "integrity": "sha512-l9sfDFsuqtOqKDsQdqrMRk0U85RZc0RtOR9yPI7mRVOa4FsR/BVnZ0shmQRM96Ji99kYZP/7hn1cedc1+ApsTQ==",
       "dev": true
     },
+    "hls.js": {
+      "version": "0.8.9",
+      "resolved": "https://registry.npmjs.org/hls.js/-/hls.js-0.8.9.tgz",
+      "integrity": "sha1-2zZ8yZzlsJduo+BZodBE17B5Bpc=",
+      "dev": true,
+      "requires": {
+        "url-toolkit": "^2.0.1"
+      }
+    },
     "hmac-drbg": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/hmac-drbg/-/hmac-drbg-1.0.1.tgz",
@@ -5841,12 +5850,6 @@
       "integrity": "sha1-iZ8R2WhuXgXLkbNdXw5jt3PPyQE=",
       "dev": true
     },
-    "mux.js": {
-      "version": "4.3.2",
-      "resolved": "https://registry.npmjs.org/mux.js/-/mux.js-4.3.2.tgz",
-      "integrity": "sha512-g0q6DPdvb3yYcoK7ElBGobdSSrhY/RjPt19U7uUc733aqvc5bCS/aCvL9z+448y+IoCZnYDwyZfQBBXMSmGOaQ==",
-      "dev": true
-    },
     "nanomatch": {
       "version": "1.2.13",
       "resolved": "https://registry.npmjs.org/nanomatch/-/nanomatch-1.2.13.tgz",
@@ -11492,6 +11495,23 @@
         "video.js": "^5.19.1 || ^6.2.0",
         "videojs-contrib-media-sources": "4.7.2",
         "webwackify": "0.1.6"
+      },
+      "dependencies": {
+        "mux.js": {
+          "version": "4.3.2",
+          "resolved": "https://registry.npmjs.org/mux.js/-/mux.js-4.3.2.tgz",
+          "integrity": "sha512-g0q6DPdvb3yYcoK7ElBGobdSSrhY/RjPt19U7uUc733aqvc5bCS/aCvL9z+448y+IoCZnYDwyZfQBBXMSmGOaQ==",
+          "dev": true
+        }
+      }
+    },
+    "videojs-contrib-hls.js": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/videojs-contrib-hls.js/-/videojs-contrib-hls.js-3.2.0.tgz",
+      "integrity": "sha512-oWlSMu4JC2fNE0PLmJd6Dlr23v5+wSE+yDGEwXvwy9L7BPRgzTmzh5HcRIvcc+7hbN8lOXOtHM+xJiwhbvdoEQ==",
+      "dev": true,
+      "requires": {
+        "hls.js": "^0.8.9"
       }
     },
     "videojs-contrib-media-sources": {
@@ -11504,6 +11524,14 @@
         "mux.js": "4.3.2",
         "video.js": "^5.17.0 || ^6.2.0",
         "webwackify": "0.1.6"
+      },
+      "dependencies": {
+        "mux.js": {
+          "version": "4.3.2",
+          "resolved": "https://registry.npmjs.org/mux.js/-/mux.js-4.3.2.tgz",
+          "integrity": "sha512-g0q6DPdvb3yYcoK7ElBGobdSSrhY/RjPt19U7uUc733aqvc5bCS/aCvL9z+448y+IoCZnYDwyZfQBBXMSmGOaQ==",
+          "dev": true
+        }
       }
     },
     "videojs-flash": {

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",
@@ -54,10 +55,12 @@
     "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",
     "vue-template-compiler": "^2.5.2",
+    "vue-video-player": "^5.0.2",
     "vue-wechat-title": "^2.0.5",
     "webpack": "^3.6.0",
     "webpack-bundle-analyzer": "^2.9.0",

src/components/cVideo.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="v-video">
+  <div class="c-video">
     <video-player v-if="playerOptions.sources.length>0" class="video-player vjs-custom-skin"
                   ref="videoPlayer"
                   :playsinline="true"
@@ -26,7 +26,7 @@
           language: 'zh-CN',
           aspectRatio: '13:6', // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
           fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
-          techOrder: ['flash', 'html5'],      // 兼容顺序
+          techOrder: ['flash','html'],      // 兼容顺序
           flash: {
             hls: {withCredentials: false},
             swf: 'static/video-js.swf' // 引入静态文件swf
@@ -56,8 +56,8 @@
       let playerOptions = JSON.parse(JSON.stringify(this.playerOptions))
       playerOptions.sources.push(
         {
-          src: this.videoUrl,
-          type: 'rtmp/hls'
+          src: 'rtmp://58.200.131.2:1935/livetv/hunantv',
+          type: 'rtmp/mp4'
         }
       )
       this.playerOptions = Object.assign({}, playerOptions)
@@ -69,21 +69,23 @@
 </script>
 
 <style lang="less">
-  .video-js
-  .vjs-big-play-button {
-    top: 42% !important;
-    left: 47% !important;
-    height: 1rem !important;
-    width: 1rem !important;
-    font-size: inherit;
-    line-height: 1rem !important;
-    border-radius: 50% !important;
-    opacity: 0.7 !important;
-    border: 0.02rem solid #fff !important;
-    background-color: #194672 !important;
-  }
+  .c-video{
+    .video-js
+    .vjs-big-play-button {
+      top: 42% !important;
+      left: 47% !important;
+      height: 1rem !important;
+      width: 1rem !important;
+      font-size: inherit;
+      line-height: 1rem !important;
+      border-radius: 50% !important;
+      opacity: 0.7 !important;
+      border: 0.02rem solid #fff !important;
+      background-color: #194672 !important;
+    }
 
-  .video-js .vjs-big-play-button .vjs-icon-placeholder:before {
-    font-size: 0.5rem!important;
+    .video-js .vjs-big-play-button .vjs-icon-placeholder:before {
+      font-size: 0.5rem!important;
+    }
   }
 </style>

src/components/dVideo.vue

@@ -0,0 +1,83 @@
+<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-contrib-hls.js/src/videojs.hlsjs';
+
+  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将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
+          sources: [],
+          // width: document.documentElement.clientWidth,
+          notSupportedMessage: '此视频暂无法播放，请稍后再试', //允许覆盖Video.js无法播放媒体源时显示的默认信息。
+          controlBar: {
+            timeDivider: true,
+            durationDisplay: true,
+            remainingTimeDisplay: false,
+            fullscreenToggle: true  //全屏按钮
+          }
+        }
+      }
+    },
+    props: {
+      videoUrl: {
+        type: String,
+        default() {
+          return '';
+        }
+      }
+    },
+    created(){
+      let playerOptions=JSON.parse(JSON.stringify(this.playerOptions))
+      playerOptions.sources.push(
+        {
+          src: this.videoUrl,
+          type: 'video/mp4'
+        }
+      )
+      this.playerOptions = Object.assign({},playerOptions)
+    },
+    components: {
+      videoPlayer
+    }
+  }
+</script>
+
+<style lang="less">
+  .d-video{
+    .video-js .vjs-big-play-button{
+      top: 20% !important;
+      left:36% !important;
+      height: 1rem!important;
+      width: 1rem!important;
+      font-size: inherit;
+      line-height: 1rem!important;
+      border-radius: 50% !important;
+      opacity: 0.7!important;
+      border: 0.02rem solid #fff!important;
+      background-color: #194672!important;
+    }
+    .video-js .vjs-big-play-button .vjs-icon-placeholder:before{
+      font-size: 0.5rem!important;
+    }
+  }
+</style>

src/views/command/ask/addDialog.vue

@@ -0,0 +1,179 @@
+<template>
+  <el-dialog :before-close="dialogClose" class="addDialog" title="新建任务" :visible.sync="visible">
+    <img src="../../../assets/img/command/ask-new.png">
+    <el-form ref="form" :model="ruleForm" :label-width="formLabelWidth+'px'">
+      <el-form-item label="河道名称:">
+        <el-select :class="ruleForm.driver?'check-select':void(0)" clearable v-model="ruleForm.driver" placeholder="">
+          <el-option
+            v-for="item in userList"
+            :key="item.value"
+            :label="item.label"
+            :value="item.value">
+          </el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item label="任务选择:">
+        <el-select :class="ruleForm.user?'check-select':void(0)" clearable v-model="ruleForm.user" placeholder="">
+          <el-option
+            v-for="item in userList"
+            :key="item.value"
+            :label="item.label"
+            :value="item.value">
+          </el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item label="巡检日期:">
+        <el-date-picker
+          style="width: 100%"
+          v-model="ruleForm.date"
+          value-format="yyyy-MM-dd"
+          type="date"
+          placeholder="">
+        </el-date-picker>
+      </el-form-item>
+    </el-form>
+    <div class="foot-btn">
+      <div @click="dialogClose">取消</div>
+      <div @click="submit">
+        <span v-show="!submitLoading">新建</span>
+        <i v-show="submitLoading" class="el-icon-loading"></i>
+      </div>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+  import {mapGetters} from "vuex";
+
+  export default {
+    name: "addDialog",
+    data() {
+      return {
+        submitLoading:false,
+        userList: [
+          {value: 1, label: '未处理'},
+          {value: 2, label: '处理中'},
+          {value: 3, label: '已完成'},
+        ],
+        ruleForm: {},
+        formLabelWidth: this.$root.$options.filters.filterPx(0.83, this.fontSize),
+      }
+    },
+    props: {
+      visible: {
+        type: Boolean,
+        default() {
+          return false
+        }
+      }
+    },
+    computed: {
+      ...mapGetters(["fontSize"])
+    },
+    methods: {
+      dialogClose() {
+        this.$emit('dialogClose')
+      },
+      submit(){
+        this.submitLoading=true
+        let me=this
+        setTimeout(function () {
+          me.submitLoading=false
+          me.$emit('successSubmit')
+        },2000)
+      }
+    }
+  }
+</script>
+
+<style lang="less">
+  .addDialog{
+    .el-dialog {
+      background-color: inherit;
+      width: 5.1rem;
+
+      .el-date-editor.el-input{
+        .el-input__icon{
+          display: none;
+        }
+      }
+
+      .el-dialog__header {
+        display: none;
+      }
+
+
+
+      .el-dialog__body {
+        padding: 0.423rem 0.75rem 0.39rem 0.735rem;
+        background-position: center center;
+        background-size: cover;
+        background-image: url(../../../assets/img/command/assignment-popup.png);
+        text-align: left;
+
+        .check-select{
+          .el-input__inner {
+            background: rgba(46,156,152,0.61);
+            border: 1px solid #009F9A;
+          }
+        }
+
+        .foot-btn {
+          margin-top: 0.64rem;
+          display: flex;
+          justify-content: space-between;
+          >div{
+            cursor: pointer;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            width: 1.5rem;
+            height: 0.4rem;
+            font-family: PingFangSC-Regular;
+            font-size: 0.14rem;
+            color: #FFFFFF;
+            background: rgba(86,244,248,0.70);
+          }
+          >div:first-child{
+            opacity: 0.62;
+            background: rgba(86,244,248,0.50)
+          }
+        }
+
+        > img {
+          height: 0.31rem;
+          margin-bottom: 0.391rem;
+        }
+
+        .el-input__inner {
+          padding-left: 0.1rem;
+          background-color:inherit;
+          border: 0.01rem solid #36B8B3;
+        }
+
+        .el-textarea__inner {
+          padding: 0.1rem;
+          opacity: 0.8;
+          line-height: 0.2rem;
+          font-family: PingFangSC-Regular;
+          font-size: 0.14rem;
+          color: #FFFFFF;
+          background-color: inherit;
+          border: 0.01rem solid #36B8B3;
+          border-radius: 0;
+        }
+
+        .el-form-item {
+          margin-bottom: 0.12rem;
+        }
+
+        .driver-name {
+          font-family: PingFangSC-Medium;
+          font-size: 0.2rem;
+          color: #FFFFFF;
+          line-height: 0.28rem;
+        }
+      }
+    }
+  }
+</style>

src/views/command/ask/askLeft.vue

@@ -2,7 +2,7 @@
   <div v-loading="searchLoading" class="ask-left">
     <div>
       <img src="../../../assets/img/command/head-ask.png"/>
-      <div>
+      <div @click="addClick">
         <img src="../../../assets/img/command/ask-add.png">
         <div>新建任务</div>
       </div>
@@ -50,7 +50,7 @@
           <div>
             <img @click="routesClick" src="../../../assets/img/command/ask-routes.png"/>
             <img @click="videoClick" v-if="activeType==1" src="../../../assets/img/command/ask-video.png"/>
-            <img v-if="activeType==2" src="../../../assets/img/command/ask-hp.png"/>
+            <img @click="hpClick" v-if="activeType==2" src="../../../assets/img/command/ask-hp.png"/>
           </div>
         </div>
       </div>
@@ -64,20 +64,23 @@
       </el-pagination>
     </div>
     <videoDialog @dialogClose="visible=false" v-if="visible" :visible="visible" ></videoDialog>
+    <addDialog @successSubmit="successSubmit" @dialogClose="addVisible=false" v-if="addVisible" :visible="addVisible" ></addDialog>
   </div>
 </template>
 
 <script>
   import {mapGetters} from "vuex";
   import videoDialog from './videoDialog'
+  import addDialog from './addDialog'
 
   export default {
     name: "ask-left",
     data() {
       return {
         searchLoading: false,
+        addVisible:false,
         searchValue: '',
-        activeType: 1,
+        activeType: 2,
         visible: false,
         dataList: [{}, {}, {}, {}],
       }
@@ -85,7 +88,7 @@
     computed: {
       ...mapGetters(["fontSize"])
     },
-    components: {videoDialog},
+    components: {videoDialog,addDialog},
     watch: {
       driverId() {
         if (this.driverId) {
@@ -121,6 +124,18 @@
         this.$emit('askClear',this.driverId)
         this.visible=true
       },
+      hpClick(){
+        this.$emit('hpDetail',296)
+      },
+      addClick(){
+        this.$emit('askClear',this.driverId)
+        this.addVisible=true
+      },
+      successSubmit(){
+        this.addVisible=false
+        this.search()
+
+      },
       search() {
         let me = this
         this.dataList=[]
@@ -162,7 +177,7 @@
       > div:last-child {
         display: flex;
         align-items: center;
-
+        cursor: pointer;
         > img {
           width: 0.2rem;
           height: 0.2rem;

src/views/command/ask/hpDetailWin.vue

@@ -0,0 +1,259 @@
+<template>
+  <div class="hpDetailWin">
+    <div class="info-header">
+      <img src="../../../assets/img/command/hp-detail.png"/>
+      <img @click="closeInfoWindow" src="../../../assets/img/command/close.png">
+    </div>
+    <div class="info-detail">
+      <div>
+        <div>
+          <div>河道名称：</div>
+          <div>槽水河</div>
+        </div>
+        <div>
+          <div>水质问题：</div>
+          <div>河流漂浮物</div>
+        </div>
+      </div>
+      <div>
+        <div>
+          <div>处理人员：</div>
+          <div>张世名</div>
+        </div>
+        <div>
+          <div>处理时间：</div>
+          <div>2020-12-01</div>
+        </div>
+      </div>
+      <div>
+        <div>
+          <div>巡检时间：</div>
+          <div>2020-12-01</div>
+        </div>
+        <div>
+          <div>水质标准：</div>
+          <div>污水3类</div>
+        </div>
+      </div>
+      <div>
+        <div>地理位置：</div>
+        <div>南京市江宁区东吉大道1号</div>
+      </div>
+      <div>
+        <div>拍摄照片：</div>
+        <viewer :images='[require("../../../assets/img/login.jpg"),require("../../../assets/img/login.jpg"),require("../../../assets/img/login.jpg")]'>
+          <img style="margin-left: 0" :src='require("../../../assets/img/login.jpg")'>
+          <img :src='require("../../../assets/img/login.jpg")'>
+          <img :src='require("../../../assets/img/login.jpg")'>
+        </viewer>
+      </div>
+      <div>
+        <div>拍摄视频：</div>
+        <dVideo videoUrl="https://gss3.baidu.com/6LZ0ej3k1Qd3ote6lo7D0j9wehsv/tieba-smallvideo-transcode-crf/1116315_20146aa2c462c9383115e2512c34deb1_0.mp4"></dVideo>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+  import dVideo from '@/components/dVideo'
+  export default {
+    name: "problemDetailWin",
+    props: {
+      driverId:{
+        type:Number,
+        default(){
+          return 0
+        }
+      }
+    },
+    watch:{
+    },
+    components:{dVideo},
+    methods: {
+      closeInfoWindow() {
+        this.$emit('closeInfoWindow')
+      }
+    }
+  }
+</script>
+
+<style lang="less">
+  .hpDetailWin {
+    width: 5.66rem;
+    min-height: 5.68rem;
+    background-position: center center;
+    background-size: cover;
+    background-image: url(../../../assets/img/command/popup.png);
+
+    .info-detail {
+      margin-top: 0.147rem;
+      padding-left: 0.56rem;
+      padding-right: 0.67rem;
+      padding-bottom: 0.66rem;
+      >div{
+        margin-top: 0.113rem;
+      }
+      >div:first-child,>div:nth-child(2),>div:nth-child(3){
+        display: flex;
+        line-height: 0.2rem;
+        >div{
+          width: 50%;
+          display: flex;
+          justify-content: left;
+          >div:first-child{
+            font-family: PingFangSC-Regular;
+            font-size: 0.14rem;
+            color: #989898;
+          }
+          >div:last-child{
+            font-family: PingFangSC-Regular;
+            font-size: 0.14rem;
+            margin: 0 0.05rem;
+            color: #FFFFFF;
+            flex: 1;
+          }
+        }
+        >div:last-child{
+          justify-content: end;
+        }
+      }
+      >div:nth-child(4){
+        display: flex;
+        line-height: 0.2rem;
+        >div:first-child{
+          font-family: PingFangSC-Regular;
+          font-size: 0.14rem;
+          color: #989898;
+        }
+        >div:last-child{
+          font-family: PingFangSC-Regular;
+          font-size: 0.14rem;
+          margin: 0 0.05rem;
+          color: #FFFFFF;
+          flex: 1;
+        }
+      }
+      >div:nth-child(5){
+        display: flex;
+        >div:first-child{
+          font-family: PingFangSC-Regular;
+          font-size: 0.14rem;
+          color: #989898;
+          line-height: 0.2rem;
+        }
+        >div:last-child{
+          display: flex;
+        }
+        img{
+          width: 0.95rem;
+          height: 0.95rem;
+          margin-left: 0.13rem;
+        }
+        >img:first-child{
+          margin-left: 0;
+        }
+      }
+      >div:last-child {
+        display: flex;
+
+        > div:first-child {
+          font-family: PingFangSC-Regular;
+          font-size: 0.14rem;
+          color: #989898;
+          line-height: 0.2rem;
+        }
+        >div:last-child{
+          width: 3.6rem;
+          height: 1.79rem;
+        }
+      }
+    }
+
+    .info-header {
+      display: flex;
+      justify-content: space-between;
+      padding-left: 0.566rem;
+      padding-right: 0.456rem;
+      padding-top: 0.345rem;
+
+      > img:first-child {
+        width: 0.898rem;
+      }
+
+      > img:last-child {
+        width: 0.24rem;
+        height: 0.24rem;
+      }
+    }
+
+    .el-timeline-item__wrapper {
+      padding-left: 0.19rem;
+      /*top: -3px;*/
+    }
+
+    .el-timeline {
+      padding: 0.22rem 0.62rem 0rem 0.57rem;
+      font-family: PingFangSC-Medium;
+      font-size: 0.16rem;
+      color: #FFFFFF;
+    }
+
+    .el-timeline-item__node--normal {
+      width: 0.041rem;
+      height: 0.041rem;
+    }
+
+    .el-timeline-item__node {
+      background-color: #FFFFFF;
+      border: 0.04rem solid rgba(86, 244, 248, 0.36);;
+    }
+
+    .el-timeline-item__timestamp.is-top {
+      margin-bottom: 0.058rem;
+      padding-top: 0.01rem;
+    }
+
+    .el-timeline-item__timestamp {
+      color: #FFFFFF;
+      line-height: 0.22rem;
+      font-size: 0.16rem;
+    }
+
+    .el-timeline-item {
+      padding-bottom: 0.195rem;
+    }
+
+    .el-timeline-item__tail {
+      left: 0.04rem;
+      border-left: 1px solid #56F4F8;
+    }
+
+    .el-timeline-item__content {
+      position: relative;
+
+      > div:first-child {
+        display: flex;
+        font-family: PingFangSC-Regular;
+        font-size: 0.14rem;
+        color: #FFFFFF;
+        line-height: 0.2rem;
+
+        > div:last-child {
+          margin-left: 0.065rem;
+          flex: 1;
+        }
+      }
+
+      > div:last-child {
+        position: absolute;
+        right: 0rem;
+        top: -0.22rem;
+        font-family: PingFangSC-Regular;
+        font-size: 0.12rem;
+        line-height: 0.17rem;
+        color: rgba(255, 255, 255, 0.60);
+      }
+    }
+  }
+</style>

src/views/command/ask/videoDialog.vue

@@ -1,13 +1,12 @@
 <template>
   <el-dialog top="10vh" :before-close="dialogClose" class="videoDialog" title="澧水河——2020.04.25" :visible.sync="visible">
-    <c-video videoUrl="rtmp://58.200.131.2:1935/livetv/hunantv"></c-video>
+    <c-video></c-video>
   </el-dialog>
 </template>
 
 <script>
   import {mapGetters} from "vuex";
   import cVideo from '@/components/cVideo'
-  import $ from 'jquery'
 
   export default {
     name: "videoDialog",

src/views/command/index.vue

@@ -2,6 +2,7 @@
   <div v-loading="loading" class="command-index" style="position: relative">
     <div style="display:none;">
       <problemDetailWin @closeInfoWindow="closeInfoWindow" ref="problemDetailWin"></problemDetailWin>
+      <hpDetailWin @closeInfoWindow="closeInfoWindow" ref="hpDetailWin"></hpDetailWin>
     </div>
     <div class="index-map" id="indexMap"></div>
     <img class="head-img" src="../../assets/img/command/nav.png"/>
@@ -88,7 +89,7 @@
     <problemLeft :driverId="driverId" @fillMarker="fillMarker" @problemClear="problemClear"
                  @problemSearch="problemSearch" @showProblemDetail="showProblemDetail"
                  v-if="activeType=='problem'&&finshMap"></problemLeft>
-    <askLeft @routesClick="routesClick" @askClear="askClear" :driverId="driverId"
+    <askLeft @hpDetail="hpDetail" @routesClick="routesClick" @askClear="askClear" :driverId="driverId"
              v-if="activeType=='ask'&&finshMap"></askLeft>
   </div>
 </template>
@@ -104,6 +105,7 @@
   import api from '@/api/main/index'
   import driver from 'static/driver.json'
   import problemDetailWin from './problem/problemDetailWin'
+  import hpDetailWin from './ask/hpDetailWin'
 
   export default {
     name: "command-container",
@@ -151,8 +153,20 @@
     computed: {
       ...mapGetters(["fontSize"])
     },
-    components: {dateLeft, dateRight, problemLeft, problemDetailWin, askLeft},
+    components: {dateLeft, dateRight, problemLeft, problemDetailWin, askLeft,hpDetailWin},
     methods: {
+      hpDetail(driverId){
+        this.closeInfoWin()
+        this.askClear()
+        let me = this
+        setTimeout(function () {
+          let marker = me.driverList.find(item => item.id == driverId)
+          if (marker) {
+            me.InfoWindow.open(me.map, marker.getPath()[0]);
+          }
+          me.checkDriver(driverId)
+        }, 500)
+      },
       routesClick(driverId) {
         this.clearRoutersMarker()
         this.checkDriver(driverId)
@@ -174,11 +188,11 @@
         let image = require('../../assets/img/command/uva.png')
         let icon = new AMap.Icon({
           // 图标尺寸
-          size: new AMap.Size(60, 60),
+          size: new AMap.Size(40, 40),
           // 图标的取图地址
           image: image,
           // 图标所用图片大小
-          imageSize: new AMap.Size(60, 60),
+          imageSize: new AMap.Size(40, 40),
         });
         let pathList = []
         for (let i = 0, l = path.length; i < l; i++) {
@@ -190,7 +204,7 @@
           map: me.map,
           position: point,
           icon: icon,
-          offset: new AMap.Pixel(-30, -30),
+          offset: new AMap.Pixel(-20, -20),
           autoRotation: true,
           angle: -90,
         });
@@ -429,7 +443,13 @@
         this.activeType = type;
         this.problemClear()
         this.clearRoutersMarker()
+        this.closeInfoWin()
         this.markerList = []
+        if(type=='ask'){
+          this.InfoWindow.setContent(this.$refs.hpDetailWin.$el)
+        }else if(type=='problem'){
+          this.InfoWindow.setContent(this.$refs.problemDetailWin.$el)
+        }
       },
       addBound() {
         let me = this;

src/views/command/problem/problemDetailWin.vue

@@ -84,7 +84,7 @@
 
     .info-detail {
       padding-left: 0.743rem;
-      padding-bottom: 0.622rem;
+      padding-right: 0.622rem;
       padding-bottom: 0.445rem;
       >div:first-child,>div:nth-child(2){
         display: flex;