"integrity": "sha512-l9sfDFsuqtOqKDsQdqrMRk0U85RZc0RtOR9yPI7mRVOa4FsR/BVnZ0shmQRM96Ji99kYZP/7hn1cedc1+ApsTQ==", | "integrity": "sha512-l9sfDFsuqtOqKDsQdqrMRk0U85RZc0RtOR9yPI7mRVOa4FsR/BVnZ0shmQRM96Ji99kYZP/7hn1cedc1+ApsTQ==", | ||||
"dev": true | "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": { | "hmac-drbg": { | ||||
"version": "1.0.1", | "version": "1.0.1", | ||||
"resolved": "https://registry.npmjs.org/hmac-drbg/-/hmac-drbg-1.0.1.tgz", | "resolved": "https://registry.npmjs.org/hmac-drbg/-/hmac-drbg-1.0.1.tgz", | ||||
"integrity": "sha1-iZ8R2WhuXgXLkbNdXw5jt3PPyQE=", | "integrity": "sha1-iZ8R2WhuXgXLkbNdXw5jt3PPyQE=", | ||||
"dev": true | "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": { | "nanomatch": { | ||||
"version": "1.2.13", | "version": "1.2.13", | ||||
"resolved": "https://registry.npmjs.org/nanomatch/-/nanomatch-1.2.13.tgz", | "resolved": "https://registry.npmjs.org/nanomatch/-/nanomatch-1.2.13.tgz", | ||||
"video.js": "^5.19.1 || ^6.2.0", | "video.js": "^5.19.1 || ^6.2.0", | ||||
"videojs-contrib-media-sources": "4.7.2", | "videojs-contrib-media-sources": "4.7.2", | ||||
"webwackify": "0.1.6" | "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": { | "videojs-contrib-media-sources": { | ||||
"mux.js": "4.3.2", | "mux.js": "4.3.2", | ||||
"video.js": "^5.17.0 || ^6.2.0", | "video.js": "^5.17.0 || ^6.2.0", | ||||
"webwackify": "0.1.6" | "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": { | "videojs-flash": { |
"js-cookie": "^2.2.0", | "js-cookie": "^2.2.0", | ||||
"less": "^3.10.3", | "less": "^3.10.3", | ||||
"less-loader": "^5.0.0", | "less-loader": "^5.0.0", | ||||
"mux.js": "^5.6.2", | |||||
"node-notifier": "^5.1.2", | "node-notifier": "^5.1.2", | ||||
"optimize-css-assets-webpack-plugin": "^3.2.0", | "optimize-css-assets-webpack-plugin": "^3.2.0", | ||||
"ora": "^1.2.0", | "ora": "^1.2.0", | ||||
"uglifyjs-webpack-plugin": "^1.1.1", | "uglifyjs-webpack-plugin": "^1.1.1", | ||||
"url-loader": "^0.5.8", | "url-loader": "^0.5.8", | ||||
"v-viewer": "^1.4.2", | "v-viewer": "^1.4.2", | ||||
"videojs-contrib-hls.js": "^3.2.0", | |||||
"vue-lazyload": "^1.3.3", | "vue-lazyload": "^1.3.3", | ||||
"vue-loader": "^13.3.0", | "vue-loader": "^13.3.0", | ||||
"vue-style-loader": "^3.0.1", | "vue-style-loader": "^3.0.1", | ||||
"vue-template-compiler": "^2.5.2", | "vue-template-compiler": "^2.5.2", | ||||
"vue-video-player": "^5.0.2", | |||||
"vue-wechat-title": "^2.0.5", | "vue-wechat-title": "^2.0.5", | ||||
"webpack": "^3.6.0", | "webpack": "^3.6.0", | ||||
"webpack-bundle-analyzer": "^2.9.0", | "webpack-bundle-analyzer": "^2.9.0", |
<template> | <template> | ||||
<div class="v-video"> | |||||
<div class="c-video"> | |||||
<video-player v-if="playerOptions.sources.length>0" class="video-player vjs-custom-skin" | <video-player v-if="playerOptions.sources.length>0" class="video-player vjs-custom-skin" | ||||
ref="videoPlayer" | ref="videoPlayer" | ||||
:playsinline="true" | :playsinline="true" | ||||
language: 'zh-CN', | language: 'zh-CN', | ||||
aspectRatio: '13:6', // 将播放器置于流畅模式,并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字(例如"16:9"或"4:3") | aspectRatio: '13:6', // 将播放器置于流畅模式,并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字(例如"16:9"或"4:3") | ||||
fluid: true, // 当true时,Video.js player将拥有流体大小。换句话说,它将按比例缩放以适应其容器。 | fluid: true, // 当true时,Video.js player将拥有流体大小。换句话说,它将按比例缩放以适应其容器。 | ||||
techOrder: ['flash', 'html5'], // 兼容顺序 | |||||
techOrder: ['flash','html'], // 兼容顺序 | |||||
flash: { | flash: { | ||||
hls: {withCredentials: false}, | hls: {withCredentials: false}, | ||||
swf: 'static/video-js.swf' // 引入静态文件swf | swf: 'static/video-js.swf' // 引入静态文件swf | ||||
let playerOptions = JSON.parse(JSON.stringify(this.playerOptions)) | let playerOptions = JSON.parse(JSON.stringify(this.playerOptions)) | ||||
playerOptions.sources.push( | 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) | this.playerOptions = Object.assign({}, playerOptions) | ||||
</script> | </script> | ||||
<style lang="less"> | <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> | </style> |
<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> |
<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> |
<div v-loading="searchLoading" class="ask-left"> | <div v-loading="searchLoading" class="ask-left"> | ||||
<div> | <div> | ||||
<img src="../../../assets/img/command/head-ask.png"/> | <img src="../../../assets/img/command/head-ask.png"/> | ||||
<div> | |||||
<div @click="addClick"> | |||||
<img src="../../../assets/img/command/ask-add.png"> | <img src="../../../assets/img/command/ask-add.png"> | ||||
<div>新建任务</div> | <div>新建任务</div> | ||||
</div> | </div> | ||||
<div> | <div> | ||||
<img @click="routesClick" src="../../../assets/img/command/ask-routes.png"/> | <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 @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> | </div> | ||||
</div> | </div> | ||||
</el-pagination> | </el-pagination> | ||||
</div> | </div> | ||||
<videoDialog @dialogClose="visible=false" v-if="visible" :visible="visible" ></videoDialog> | <videoDialog @dialogClose="visible=false" v-if="visible" :visible="visible" ></videoDialog> | ||||
<addDialog @successSubmit="successSubmit" @dialogClose="addVisible=false" v-if="addVisible" :visible="addVisible" ></addDialog> | |||||
</div> | </div> | ||||
</template> | </template> | ||||
<script> | <script> | ||||
import {mapGetters} from "vuex"; | import {mapGetters} from "vuex"; | ||||
import videoDialog from './videoDialog' | import videoDialog from './videoDialog' | ||||
import addDialog from './addDialog' | |||||
export default { | export default { | ||||
name: "ask-left", | name: "ask-left", | ||||
data() { | data() { | ||||
return { | return { | ||||
searchLoading: false, | searchLoading: false, | ||||
addVisible:false, | |||||
searchValue: '', | searchValue: '', | ||||
activeType: 1, | |||||
activeType: 2, | |||||
visible: false, | visible: false, | ||||
dataList: [{}, {}, {}, {}], | dataList: [{}, {}, {}, {}], | ||||
} | } | ||||
computed: { | computed: { | ||||
...mapGetters(["fontSize"]) | ...mapGetters(["fontSize"]) | ||||
}, | }, | ||||
components: {videoDialog}, | |||||
components: {videoDialog,addDialog}, | |||||
watch: { | watch: { | ||||
driverId() { | driverId() { | ||||
if (this.driverId) { | if (this.driverId) { | ||||
this.$emit('askClear',this.driverId) | this.$emit('askClear',this.driverId) | ||||
this.visible=true | this.visible=true | ||||
}, | }, | ||||
hpClick(){ | |||||
this.$emit('hpDetail',296) | |||||
}, | |||||
addClick(){ | |||||
this.$emit('askClear',this.driverId) | |||||
this.addVisible=true | |||||
}, | |||||
successSubmit(){ | |||||
this.addVisible=false | |||||
this.search() | |||||
}, | |||||
search() { | search() { | ||||
let me = this | let me = this | ||||
this.dataList=[] | this.dataList=[] | ||||
> div:last-child { | > div:last-child { | ||||
display: flex; | display: flex; | ||||
align-items: center; | align-items: center; | ||||
cursor: pointer; | |||||
> img { | > img { | ||||
width: 0.2rem; | width: 0.2rem; | ||||
height: 0.2rem; | height: 0.2rem; |
<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> |
<template> | <template> | ||||
<el-dialog top="10vh" :before-close="dialogClose" class="videoDialog" title="澧水河——2020.04.25" :visible.sync="visible"> | <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> | </el-dialog> | ||||
</template> | </template> | ||||
<script> | <script> | ||||
import {mapGetters} from "vuex"; | import {mapGetters} from "vuex"; | ||||
import cVideo from '@/components/cVideo' | import cVideo from '@/components/cVideo' | ||||
import $ from 'jquery' | |||||
export default { | export default { | ||||
name: "videoDialog", | name: "videoDialog", |
<div v-loading="loading" class="command-index" style="position: relative"> | <div v-loading="loading" class="command-index" style="position: relative"> | ||||
<div style="display:none;"> | <div style="display:none;"> | ||||
<problemDetailWin @closeInfoWindow="closeInfoWindow" ref="problemDetailWin"></problemDetailWin> | <problemDetailWin @closeInfoWindow="closeInfoWindow" ref="problemDetailWin"></problemDetailWin> | ||||
<hpDetailWin @closeInfoWindow="closeInfoWindow" ref="hpDetailWin"></hpDetailWin> | |||||
</div> | </div> | ||||
<div class="index-map" id="indexMap"></div> | <div class="index-map" id="indexMap"></div> | ||||
<img class="head-img" src="../../assets/img/command/nav.png"/> | <img class="head-img" src="../../assets/img/command/nav.png"/> | ||||
<problemLeft :driverId="driverId" @fillMarker="fillMarker" @problemClear="problemClear" | <problemLeft :driverId="driverId" @fillMarker="fillMarker" @problemClear="problemClear" | ||||
@problemSearch="problemSearch" @showProblemDetail="showProblemDetail" | @problemSearch="problemSearch" @showProblemDetail="showProblemDetail" | ||||
v-if="activeType=='problem'&&finshMap"></problemLeft> | 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> | v-if="activeType=='ask'&&finshMap"></askLeft> | ||||
</div> | </div> | ||||
</template> | </template> | ||||
import api from '@/api/main/index' | import api from '@/api/main/index' | ||||
import driver from 'static/driver.json' | import driver from 'static/driver.json' | ||||
import problemDetailWin from './problem/problemDetailWin' | import problemDetailWin from './problem/problemDetailWin' | ||||
import hpDetailWin from './ask/hpDetailWin' | |||||
export default { | export default { | ||||
name: "command-container", | name: "command-container", | ||||
computed: { | computed: { | ||||
...mapGetters(["fontSize"]) | ...mapGetters(["fontSize"]) | ||||
}, | }, | ||||
components: {dateLeft, dateRight, problemLeft, problemDetailWin, askLeft}, | |||||
components: {dateLeft, dateRight, problemLeft, problemDetailWin, askLeft,hpDetailWin}, | |||||
methods: { | 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) { | routesClick(driverId) { | ||||
this.clearRoutersMarker() | this.clearRoutersMarker() | ||||
this.checkDriver(driverId) | this.checkDriver(driverId) | ||||
let image = require('../../assets/img/command/uva.png') | let image = require('../../assets/img/command/uva.png') | ||||
let icon = new AMap.Icon({ | let icon = new AMap.Icon({ | ||||
// 图标尺寸 | // 图标尺寸 | ||||
size: new AMap.Size(60, 60), | |||||
size: new AMap.Size(40, 40), | |||||
// 图标的取图地址 | // 图标的取图地址 | ||||
image: image, | image: image, | ||||
// 图标所用图片大小 | // 图标所用图片大小 | ||||
imageSize: new AMap.Size(60, 60), | |||||
imageSize: new AMap.Size(40, 40), | |||||
}); | }); | ||||
let pathList = [] | let pathList = [] | ||||
for (let i = 0, l = path.length; i < l; i++) { | for (let i = 0, l = path.length; i < l; i++) { | ||||
map: me.map, | map: me.map, | ||||
position: point, | position: point, | ||||
icon: icon, | icon: icon, | ||||
offset: new AMap.Pixel(-30, -30), | |||||
offset: new AMap.Pixel(-20, -20), | |||||
autoRotation: true, | autoRotation: true, | ||||
angle: -90, | angle: -90, | ||||
}); | }); | ||||
this.activeType = type; | this.activeType = type; | ||||
this.problemClear() | this.problemClear() | ||||
this.clearRoutersMarker() | this.clearRoutersMarker() | ||||
this.closeInfoWin() | |||||
this.markerList = [] | this.markerList = [] | ||||
if(type=='ask'){ | |||||
this.InfoWindow.setContent(this.$refs.hpDetailWin.$el) | |||||
}else if(type=='problem'){ | |||||
this.InfoWindow.setContent(this.$refs.problemDetailWin.$el) | |||||
} | |||||
}, | }, | ||||
addBound() { | addBound() { | ||||
let me = this; | let me = this; |
.info-detail { | .info-detail { | ||||
padding-left: 0.743rem; | padding-left: 0.743rem; | ||||
padding-bottom: 0.622rem; | |||||
padding-right: 0.622rem; | |||||
padding-bottom: 0.445rem; | padding-bottom: 0.445rem; | ||||
>div:first-child,>div:nth-child(2){ | >div:first-child,>div:nth-child(2){ | ||||
display: flex; | display: flex; |