@@ -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: { |
@@ -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", |
@@ -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:{} | |||
}) | |||
} | |||
} | |||
@@ -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> |
@@ -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> | |||
@@ -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: { |
@@ -216,6 +216,9 @@ | |||
if (type) { | |||
child.disabled = true | |||
} | |||
if(!child.driverManager){ | |||
child.driverManager='' | |||
} | |||
this.ruleForm = Object.assign({}, child) | |||
} catch (e) { | |||
} |
@@ -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' | |||
}]"> |
@@ -227,6 +227,7 @@ | |||
}) | |||
}, | |||
handleEdit(data, type) { | |||
console.log(data) | |||
this.initRuleForm() | |||
this.addDialogVisible = true | |||
this.$nextTick(function () { |
@@ -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; |
@@ -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> |
@@ -437,7 +437,6 @@ | |||
<style lang="less"> | |||
.fade-leave-active { | |||
opacity: 0; | |||
transform: translateX(-100%); | |||
transition: all 500ms; | |||
} | |||
@@ -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> |
@@ -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" |