<template>
|
<div>
|
<div class="flex-box">
|
<div class="pr5" v-show="!buttonVisible" style="font-size: 13px;margin-top: 4px">
|
<span v-for="(val,index) in thisAreaData" :key="index">{{val.name}},</span>
|
</div>
|
<el-button :type="thisAreaData&&thisAreaData.length>0?'text':'info'" size="mini" class="pr5 pl5"
|
@click="onButtonClick(thisAreaData)">
|
{{thisAreaData && thisAreaData.length > 0 ? updateLabel : setLabel}}
|
</el-button>
|
</div>
|
<!-- 绘制弹窗 start -->
|
<el-dialog
|
title="设定区域"
|
class="trajectoryDialog"
|
:visible.sync="dialogVisible"
|
width="80%"
|
:show-close="false"
|
append-to-body
|
:before-close="handleClose">
|
<div style="height:700px;">
|
<!-- <h3 class="lineFrame-title mt5"><span class="lineFrame-title-icon"></span>轨迹信息</h3> -->
|
<areaMapeControl
|
:showControlBtn="true"
|
:showCameras="true"
|
:fromeId="fromeIdAreaMap"
|
:openTimer="openTimer"
|
:thisAreaData="thisAreaData"
|
@areaData="getAreaData"
|
@dialogClose="closedialog"
|
:newId = "getRandomId"
|
></areaMapeControl>
|
</div>
|
</el-dialog>
|
<!-- 地图绘制弹窗 结束 -->
|
</div>
|
</template>
|
|
<script>
|
import areaMapeControl from "@/components/common/areaMapeControl";
|
import uuidv1 from 'uuid/v1';
|
|
export default {
|
props: ["setLabel", "updateLabel", "areas"],
|
data () {
|
return {
|
dialogVisible: false,
|
buttonVisible: true,
|
|
fromeIdAreaMap: ',',
|
openTimer: '',
|
thisAreaData: []
|
}
|
},
|
components: {
|
areaMapeControl
|
},
|
computed:{
|
getRandomId(){
|
return "guid" + uuidv1()
|
}
|
},
|
methods: {
|
init(areas){
|
this.thisAreaData = areas || []
|
|
let ids = ',';
|
for (let area of this.thisAreaData) {
|
ids += area.id + ",";
|
}
|
this.fromeIdAreaMap = ids;
|
|
if (ids.length == 1) {
|
this.buttonVisible = true;
|
} else {
|
this.buttonVisible = false;
|
}
|
},
|
onButtonClick(thisAreaData){
|
this.dialogVisible = true;
|
this.openTimer = new Date().getTime() + '';
|
},
|
//关闭弹窗
|
closedialog(str){
|
this.dialogVisible = false;
|
},
|
handleClose(done) {
|
this.$confirm('确认关闭？')
|
.then(_ => {
|
done();
|
})
|
.catch(_ => {
|
});
|
},
|
getAreaData(json){
|
//子组件回值赋值
|
this.fromeIdAreaMap = json.area_ids;
|
this.thisAreaData = json.areaData;
|
this.dialogVisible = false;
|
this.$emit('update:areas', json.areaData);
|
},
|
},
|
watch: {
|
areas: {
|
handler(val, oldVal){
|
if (val !== oldVal) {
|
this.init(val);
|
}
|
},
|
deep: true
|
},
|
},
|
}
|
</script>
|
