|
|
|
|
@ -1,6 +1,7 @@
|
|
|
|
|
<template>
|
|
|
|
|
<div class="container">
|
|
|
|
|
<div class="centerImg"></div>
|
|
|
|
|
<div class="centerImg" v-if="!isMap"
|
|
|
|
|
:style="`background-image: url(${picUrl ? picUrl : containerPic})`"></div>
|
|
|
|
|
<div class="title">监控单元统计</div>
|
|
|
|
|
<Chart ref="chart1" class="chart1"></Chart>
|
|
|
|
|
<div class="chart1Right">
|
|
|
|
|
@ -132,10 +133,47 @@
|
|
|
|
|
</div>
|
|
|
|
|
</vue-seamless-scroll>
|
|
|
|
|
</div>
|
|
|
|
|
<div v-if="isMap">
|
|
|
|
|
<Chart ref="mapChart" class="mapChart"></Chart>
|
|
|
|
|
<el-button type="primary" style="position:absolute;bottom: 4%;left: 50%;transform: translateX(-50%)"
|
|
|
|
|
@click="toRealMap">打开地图
|
|
|
|
|
</el-button>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<el-dialog :visible.sync="realMap" width="80%">
|
|
|
|
|
<el-form :inline="true" :model="formInline" class="demo-form-inline">
|
|
|
|
|
<el-form-item label="名称">
|
|
|
|
|
<el-input v-model="formInline.name" placeholder="名称"></el-input>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
<el-form-item>
|
|
|
|
|
<el-button type="primary" @click="searchMap">查询</el-button>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
</el-form>
|
|
|
|
|
<div id="map" class="map"></div>
|
|
|
|
|
</el-dialog>
|
|
|
|
|
|
|
|
|
|
<el-dialog
|
|
|
|
|
:visible.sync="isDispose"
|
|
|
|
|
width="30%">
|
|
|
|
|
<span>备注</span>
|
|
|
|
|
<el-input
|
|
|
|
|
style="margin-top: 12px;margin-bottom:12px"
|
|
|
|
|
type="textarea"
|
|
|
|
|
:rows="2"
|
|
|
|
|
placeholder="请输入内容"
|
|
|
|
|
v-model="textarea">
|
|
|
|
|
</el-input>
|
|
|
|
|
<span slot="footer" class="dialog-footer">
|
|
|
|
|
<el-button @click="isDispose = false">取 消</el-button>
|
|
|
|
|
<el-button type="primary" @click="disposeThis">处理当前</el-button>
|
|
|
|
|
<el-button type="primary" @click="disposeAll">处理所有</el-button>
|
|
|
|
|
</span>
|
|
|
|
|
</el-dialog>
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
|
import containerPic from "@/assets/board/index/container.png";
|
|
|
|
|
import Chart from "@/components/Charts/Chart";
|
|
|
|
|
import vueSeamlessScroll from "vue-seamless-scroll";
|
|
|
|
|
import * as echarts from 'echarts';
|
|
|
|
|
@ -145,21 +183,46 @@ import {
|
|
|
|
|
allNums,
|
|
|
|
|
getAlarmInfos,
|
|
|
|
|
getDeviceOperations,
|
|
|
|
|
handleAlarmInfo
|
|
|
|
|
handleAlarmInfo,
|
|
|
|
|
getDeviceByAreaId,
|
|
|
|
|
getTenantData,
|
|
|
|
|
selectMonitorElectronic,
|
|
|
|
|
selectDeviceByName
|
|
|
|
|
} from '@/api/board/index'
|
|
|
|
|
import ChinaMapData from '@/utils/ChinaMapData.json'
|
|
|
|
|
import gsByMap from '@/utils/map/gs_by.json'
|
|
|
|
|
import axios from "axios";
|
|
|
|
|
|
|
|
|
|
let map = null
|
|
|
|
|
let markers = []
|
|
|
|
|
let markerIds = []
|
|
|
|
|
let polygons = []
|
|
|
|
|
let circles = []
|
|
|
|
|
const vw = (document.documentElement.clientWidth || document.body.clientWidth) / 100
|
|
|
|
|
export default {
|
|
|
|
|
components: {
|
|
|
|
|
vueSeamlessScroll,
|
|
|
|
|
Chart,
|
|
|
|
|
|
|
|
|
|
},
|
|
|
|
|
data() {
|
|
|
|
|
return {
|
|
|
|
|
containerPic,
|
|
|
|
|
formInline:{},
|
|
|
|
|
textarea: '',
|
|
|
|
|
disposeNo: null,
|
|
|
|
|
isDispose: false,
|
|
|
|
|
realMap: false,
|
|
|
|
|
centerGeo: [],
|
|
|
|
|
picUrl: null,
|
|
|
|
|
code: 620000,
|
|
|
|
|
cityJson: null,
|
|
|
|
|
isMap: true,
|
|
|
|
|
centerNum: {},
|
|
|
|
|
chart1Option: {
|
|
|
|
|
tooltip: {
|
|
|
|
|
valueFormatter: (e)=>{return e+'%'},
|
|
|
|
|
valueFormatter: (e) => {
|
|
|
|
|
return e + '%'
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
angleAxis: {
|
|
|
|
|
max: 100,
|
|
|
|
|
@ -200,11 +263,11 @@ export default {
|
|
|
|
|
chart2Option: {
|
|
|
|
|
color: ["#22acfd", "#22fe97", "#f9e728", "#ff922b", "#ed1814"],
|
|
|
|
|
legend: {
|
|
|
|
|
type:'scroll',
|
|
|
|
|
type: 'scroll',
|
|
|
|
|
orient: "vertical",
|
|
|
|
|
x: "right",
|
|
|
|
|
y: "center",
|
|
|
|
|
width:'100px',
|
|
|
|
|
width: '100px',
|
|
|
|
|
textStyle: {
|
|
|
|
|
color: '#fff'
|
|
|
|
|
}
|
|
|
|
|
@ -287,17 +350,27 @@ export default {
|
|
|
|
|
table1Data: []
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
mounted() {
|
|
|
|
|
async mounted() {
|
|
|
|
|
getTenantData(this.$store.getters.tenantId).then(e => {
|
|
|
|
|
// this.isMap = e.data.tenantField === '2';
|
|
|
|
|
this.picUrl = e.data.tenantBoardPic
|
|
|
|
|
this.code = e.data.tenantMapCode || 620000
|
|
|
|
|
})
|
|
|
|
|
this.setChart1()
|
|
|
|
|
this.setChart2()
|
|
|
|
|
this.setAllNums()
|
|
|
|
|
this.setTable3()
|
|
|
|
|
this.setDeviceOperations()
|
|
|
|
|
|
|
|
|
|
let data = await axios.get(`https://geo.datav.aliyun.com/areas_v3/bound/${this.code}_full.json`)
|
|
|
|
|
let mapData = this.code === 100000 ? ChinaMapData : data.data
|
|
|
|
|
await this.getMap(mapData)
|
|
|
|
|
this.chartClick()
|
|
|
|
|
},
|
|
|
|
|
methods: {
|
|
|
|
|
async setChart1() {
|
|
|
|
|
const {rows: data} = await monitorPercentage()
|
|
|
|
|
let data1 = data.slice(0, 4)
|
|
|
|
|
let data1 = data.slice(0, 4)
|
|
|
|
|
data1.reverse()
|
|
|
|
|
let option1 = {
|
|
|
|
|
...this.chart1Option,
|
|
|
|
|
@ -362,7 +435,7 @@ export default {
|
|
|
|
|
no: e.alarmInfoId,
|
|
|
|
|
type: e.alarmTypeName,
|
|
|
|
|
location: e.monitorUnitName,
|
|
|
|
|
status:e.handleStatus
|
|
|
|
|
status: e.handleStatus
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
},
|
|
|
|
|
@ -370,12 +443,12 @@ export default {
|
|
|
|
|
let {data: data} = await getDeviceOperations()
|
|
|
|
|
let onlineDevicesTrend = data["onlineDevicesTrend"];
|
|
|
|
|
let sortArr = Object.keys(onlineDevicesTrend)
|
|
|
|
|
sortArr = sortArr.sort((a,b)=>{
|
|
|
|
|
sortArr = sortArr.sort((a, b) => {
|
|
|
|
|
return new Date(a).getTime() - new Date(b).getTime()
|
|
|
|
|
})
|
|
|
|
|
console.log(sortArr)
|
|
|
|
|
let x = sortArr
|
|
|
|
|
let y = sortArr.map(e=>{
|
|
|
|
|
let y = sortArr.map(e => {
|
|
|
|
|
return onlineDevicesTrend[e]
|
|
|
|
|
})
|
|
|
|
|
// this.inTransitNum = y.reduce((a, b) => {
|
|
|
|
|
@ -438,41 +511,351 @@ export default {
|
|
|
|
|
this.$refs.chart3.setData(option3)
|
|
|
|
|
},
|
|
|
|
|
dispose(e) {
|
|
|
|
|
console.log(e)
|
|
|
|
|
this.$confirm('该问题已处理？', '提示', {
|
|
|
|
|
confirmButtonText: '确定',
|
|
|
|
|
cancelButtonText: '取消',
|
|
|
|
|
type: 'warning'
|
|
|
|
|
}).then(() => {
|
|
|
|
|
handleAlarmInfo({
|
|
|
|
|
alarmInfoId:e.no
|
|
|
|
|
}).then(e=>{
|
|
|
|
|
if(e.code === 200){
|
|
|
|
|
this.$message({
|
|
|
|
|
type: 'success',
|
|
|
|
|
message: '已处理!'
|
|
|
|
|
});
|
|
|
|
|
this.setTable3()
|
|
|
|
|
}else{
|
|
|
|
|
this.$message({
|
|
|
|
|
type: 'info',
|
|
|
|
|
message: '网络错误'
|
|
|
|
|
});
|
|
|
|
|
this.isDispose = true
|
|
|
|
|
this.disposeNo = e.no
|
|
|
|
|
},
|
|
|
|
|
disposeThis() {
|
|
|
|
|
handleAlarmInfo({
|
|
|
|
|
alarmInfoId: this.disposeNo,
|
|
|
|
|
alarmInfoField: this.textarea,
|
|
|
|
|
ifDisposalAll: 0,
|
|
|
|
|
}).then(e => {
|
|
|
|
|
if (e.code === 200) {
|
|
|
|
|
this.$message({
|
|
|
|
|
type: 'success',
|
|
|
|
|
message: '已处理!'
|
|
|
|
|
});
|
|
|
|
|
this.setTable3()
|
|
|
|
|
} else {
|
|
|
|
|
this.$message({
|
|
|
|
|
type: 'info',
|
|
|
|
|
message: '网络错误'
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
this.isDispose = false
|
|
|
|
|
})
|
|
|
|
|
},
|
|
|
|
|
disposeAll() {
|
|
|
|
|
handleAlarmInfo({
|
|
|
|
|
alarmInfoId: this.disposeNo,
|
|
|
|
|
alarmInfoField: this.textarea,
|
|
|
|
|
ifDisposalAll: 1,
|
|
|
|
|
}).then(e => {
|
|
|
|
|
if (e.code === 200) {
|
|
|
|
|
this.$message({
|
|
|
|
|
type: 'success',
|
|
|
|
|
message: '已处理!'
|
|
|
|
|
});
|
|
|
|
|
this.setTable3()
|
|
|
|
|
} else {
|
|
|
|
|
this.$message({
|
|
|
|
|
type: 'info',
|
|
|
|
|
message: '网络错误'
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
this.isDispose = false
|
|
|
|
|
})
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
async getMap(geoJson) {
|
|
|
|
|
this.cityJson = geoJson.features
|
|
|
|
|
echarts.registerMap('map', geoJson);
|
|
|
|
|
this.centerGeo = geoJson.features[0].properties.center || geoJson.features[0].properties.geo_wkt.split('(')[1].split(')')[0].split(' ').map(e => parseFloat(e))
|
|
|
|
|
const random = (val = 1) => {
|
|
|
|
|
return Math.ceil(Math.random() * val)
|
|
|
|
|
}
|
|
|
|
|
let Point = [
|
|
|
|
|
{value: [120.3, 36.0], index: random(5), type: random(5), state: random(5)},
|
|
|
|
|
{value: [104.065735, 30.659462], index: random(5), type: random(5), state: random(5)},
|
|
|
|
|
{value: [123.1238, 42.1216], index: random(5), type: random(5), state: random(5)},
|
|
|
|
|
{value: [114.4995, 38.1006], index: random(5), type: random(5), state: random(5)},
|
|
|
|
|
{value: [109.1162, 34.2004], index: random(5), type: random(5), state: random(5)},
|
|
|
|
|
{value: [106.3586, 38.1775], index: random(5), type: random(5), state: random(5)},
|
|
|
|
|
{value: [101.4038, 36.8207], index: random(5), type: random(5), state: random(5)},
|
|
|
|
|
{value: [113.0823, 28.2568], index: random(5), type: random(5), state: random(5)},
|
|
|
|
|
{value: [102.9199, 25.46639], index: random(5), type: random(5), state: random(5)},
|
|
|
|
|
]
|
|
|
|
|
Point = []
|
|
|
|
|
let option = {
|
|
|
|
|
grid: {
|
|
|
|
|
top: '0%',
|
|
|
|
|
left: '0%',
|
|
|
|
|
right: '0%',
|
|
|
|
|
bottom: '0%',
|
|
|
|
|
},
|
|
|
|
|
geo: {
|
|
|
|
|
map: "map",
|
|
|
|
|
show: false,
|
|
|
|
|
aspectScale: 0.75, //长宽比
|
|
|
|
|
zoom: 1.1,
|
|
|
|
|
label: {
|
|
|
|
|
show: true
|
|
|
|
|
},
|
|
|
|
|
roam: true,
|
|
|
|
|
layoutCenter: ["50%", "50%"], // position位置
|
|
|
|
|
layoutSize: 25 * vw,
|
|
|
|
|
itemStyle: {
|
|
|
|
|
normal: {
|
|
|
|
|
areaColor: {
|
|
|
|
|
type: "radial",
|
|
|
|
|
x: 0.5,
|
|
|
|
|
y: 0.5,
|
|
|
|
|
r: 0.8,
|
|
|
|
|
colorStops: [
|
|
|
|
|
{
|
|
|
|
|
offset: 0,
|
|
|
|
|
color: "#013B8F", // 0% 处的颜色
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
offset: 1,
|
|
|
|
|
color: "#013B8F", // 100% 处的颜色
|
|
|
|
|
},
|
|
|
|
|
],
|
|
|
|
|
globalCoord: true, // 缺省为 false
|
|
|
|
|
},
|
|
|
|
|
shadowColor: "#013B8F",
|
|
|
|
|
shadowOffsetX: 0,
|
|
|
|
|
shadowOffsetY: 8,
|
|
|
|
|
},
|
|
|
|
|
emphasis: {
|
|
|
|
|
areaColor: "#2AB8FF",
|
|
|
|
|
borderWidth: 0,
|
|
|
|
|
color: "green",
|
|
|
|
|
label: {
|
|
|
|
|
show: false,
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
series: [
|
|
|
|
|
{
|
|
|
|
|
type: "map",
|
|
|
|
|
roam: 'scale',
|
|
|
|
|
label: {
|
|
|
|
|
normal: {
|
|
|
|
|
show: true,
|
|
|
|
|
textStyle: {
|
|
|
|
|
color: "#1DE9B6",
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
itemStyle: {
|
|
|
|
|
normal: {
|
|
|
|
|
borderColor: "rgb(147, 235, 248,0.5)",
|
|
|
|
|
borderWidth: 1,
|
|
|
|
|
areaColor: {
|
|
|
|
|
type: "radial",
|
|
|
|
|
x: 0.5,
|
|
|
|
|
y: 0.5,
|
|
|
|
|
r: 0.8,
|
|
|
|
|
colorStops: [
|
|
|
|
|
{
|
|
|
|
|
offset: 0,
|
|
|
|
|
color: "#013B8F", // 0% 处的颜色
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
offset: 1,
|
|
|
|
|
color: "#013B8F", // 100% 处的颜色
|
|
|
|
|
},
|
|
|
|
|
],
|
|
|
|
|
globalCoord: true, // 缺省为 false
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
zoom: 1.1,
|
|
|
|
|
map: 'map', //使用
|
|
|
|
|
aspectScale: 0.75, //长宽比
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
{
|
|
|
|
|
type: "effectScatter",
|
|
|
|
|
coordinateSystem: "geo",
|
|
|
|
|
showEffectOn: 'emphasis',
|
|
|
|
|
zlevel: 1,
|
|
|
|
|
rippleEffect: {
|
|
|
|
|
period: 15,
|
|
|
|
|
scale: 1,
|
|
|
|
|
brushType: "fill",
|
|
|
|
|
},
|
|
|
|
|
hoverAnimation: true,
|
|
|
|
|
itemStyle: {
|
|
|
|
|
normal: {
|
|
|
|
|
color: "#1DE9B6",
|
|
|
|
|
shadowBlur: 10,
|
|
|
|
|
shadowColor: "#333",
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
symbolSize: [0.5 * vw, 0.5 * vw],
|
|
|
|
|
data: Point,
|
|
|
|
|
label: {
|
|
|
|
|
padding: [-16, 0, 0, 5],
|
|
|
|
|
show: true,
|
|
|
|
|
position: 'bottom',
|
|
|
|
|
formatter: function (val) {
|
|
|
|
|
return [`{a|}{b|'点位${val.data.index}}`]
|
|
|
|
|
},
|
|
|
|
|
rich: {
|
|
|
|
|
a: {
|
|
|
|
|
width: 0.34 * vw,
|
|
|
|
|
height: 0.34 * vw,
|
|
|
|
|
borderColor: '#0FF32E',
|
|
|
|
|
borderWidth: 0.34 * vw,
|
|
|
|
|
borderRadius: 0.17 * vw,
|
|
|
|
|
shadowBlur: 20,
|
|
|
|
|
shadowColor: "#0FF32E",
|
|
|
|
|
},
|
|
|
|
|
b: {
|
|
|
|
|
padding: [0, 0, 0, 5],
|
|
|
|
|
color: '#0FF32E',
|
|
|
|
|
height: 40,
|
|
|
|
|
fontSize: 0.75 * vw,
|
|
|
|
|
},
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
],
|
|
|
|
|
};
|
|
|
|
|
this.$refs.mapChart.setData(option);
|
|
|
|
|
},
|
|
|
|
|
chartClick() {
|
|
|
|
|
this.$refs.mapChart.chart.on('click', async (params) => {
|
|
|
|
|
this.code = this.cityJson[params.dataIndex].properties.adcode || this.code || gsByMap.features[params.dataIndex].properties.unique_id
|
|
|
|
|
let mapData
|
|
|
|
|
if (this.code !== 620400 && this.code.toString().startsWith('6204')) {
|
|
|
|
|
mapData = {features: gsByMap.features.filter(e => e.properties.pid === this.code.toString())}
|
|
|
|
|
} else {
|
|
|
|
|
let data = await axios.get(`https://geo.datav.aliyun.com/areas_v3/bound/${this.code}_full.json`)
|
|
|
|
|
mapData = this.cityJson[params.dataIndex].properties.adcode === 100000 ? ChinaMapData : data.data
|
|
|
|
|
}
|
|
|
|
|
this.getMap(mapData)
|
|
|
|
|
})
|
|
|
|
|
this.$refs.mapChart.$el.addEventListener('dblclick', () => {
|
|
|
|
|
this.chartDblClick(this.code)
|
|
|
|
|
});
|
|
|
|
|
},
|
|
|
|
|
async chartDblClick(val) {
|
|
|
|
|
let a = val.toString().substr(0, 2)
|
|
|
|
|
let b = val.toString().substr(2, 2)
|
|
|
|
|
let c = val.toString().substr(4, 2)
|
|
|
|
|
let d = val.toString().substr(6, 9)
|
|
|
|
|
d = null
|
|
|
|
|
if (d && d !== '000') {
|
|
|
|
|
this.code = Number(a + b + c)
|
|
|
|
|
} else if (c !== '00') {
|
|
|
|
|
this.code = Number(a + b + '00')
|
|
|
|
|
} else if (b !== '00') {
|
|
|
|
|
this.code = Number(a + '0000')
|
|
|
|
|
} else if (a !== '10') {
|
|
|
|
|
this.code = 100000
|
|
|
|
|
}
|
|
|
|
|
let mapData
|
|
|
|
|
if (this.code !== 620400 && this.code.toString().startsWith('6204')) {
|
|
|
|
|
mapData = gsByMap
|
|
|
|
|
} else {
|
|
|
|
|
let data = await axios.get(`https://geo.datav.aliyun.com/areas_v3/bound/${this.code}_full.json`)
|
|
|
|
|
mapData = this.code === 100000 ? ChinaMapData : data.data
|
|
|
|
|
}
|
|
|
|
|
this.getMap(mapData)
|
|
|
|
|
},
|
|
|
|
|
async toRealMap() {
|
|
|
|
|
this.realMap = true
|
|
|
|
|
markerIds = []
|
|
|
|
|
this.$nextTick(async () => {
|
|
|
|
|
this.createMap()
|
|
|
|
|
const data = await getDeviceByAreaId(this.$store.getters.tenantId)
|
|
|
|
|
data.data.map(e => e.devicesList).flat(1).forEach(e => {
|
|
|
|
|
this.setMarker(e)
|
|
|
|
|
})
|
|
|
|
|
})
|
|
|
|
|
},
|
|
|
|
|
setMarker(e) {
|
|
|
|
|
let marker = new AMap.Marker({
|
|
|
|
|
position: [e.longitude, e.latitude],
|
|
|
|
|
title: `信息\n经度：${e.longitude}\n纬度：${e.latitude}\n名称：${e.deviceName}\n`,
|
|
|
|
|
offset: new AMap.Pixel(-15, -30),
|
|
|
|
|
content: `<div>
|
|
|
|
|
<svg t="1718261114618" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4305" style="width: 30px;height: 30px;">
|
|
|
|
|
<path d="M512 64.5c-180.5 0-326.9 146.4-326.9 326.9 0 63.3 18 122.3 49.2 172.4 1.1 2 2.1 4 3.2 5.9 34.9 58.2 113.9 128.8 165.5 194.5 66.3 84.4 93.2 158 93.2 158 1.6 1.4 13.1 35.6 15.1 35.8 2.5 0.2 12.6-34 14.5-35.8 0 0 22-69.2 83.7-146.6 56-70.1 142.8-145.7 177-206 0.9-1.6 1.8-3.3 2.6-5 31.5-50.2 49.7-109.6 49.7-173.3 0.1-180.5-146.3-326.8-326.8-326.8z" fill="#3D93FD" p-id="4306">
|
|
|
|
|
</path>
|
|
|
|
|
</svg>
|
|
|
|
|
</div>`
|
|
|
|
|
});
|
|
|
|
|
marker.on('click', async () => {
|
|
|
|
|
if (markerIds.includes(e.deviceId)) {
|
|
|
|
|
return
|
|
|
|
|
} else {
|
|
|
|
|
markerIds.push(e.deviceId)
|
|
|
|
|
}
|
|
|
|
|
const {data} = await selectMonitorElectronic(e.deviceId)
|
|
|
|
|
data.map(e => e.hwFenceAreaList).flat(1).forEach(e => {
|
|
|
|
|
if (e.areaShapeFlag === '1') {
|
|
|
|
|
this.setPolygon(e.areaRange.split('_').map(e => e.split(',').map(v => parseFloat(v))))
|
|
|
|
|
}
|
|
|
|
|
if (e.areaShapeFlag === '2') {
|
|
|
|
|
let arr = e.areaRange.split(',')
|
|
|
|
|
this.setCircle([arr[0], arr[1]], arr[2])
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
}).catch(() => {
|
|
|
|
|
this.$message({
|
|
|
|
|
type: 'info',
|
|
|
|
|
message: '已取消'
|
|
|
|
|
});
|
|
|
|
|
})
|
|
|
|
|
marker.on('dblclick', () => {
|
|
|
|
|
this.$router.push({path: '/board/equipment', query: {monitorUnitId: e.monitorUnitId}})
|
|
|
|
|
console.log(e)
|
|
|
|
|
});
|
|
|
|
|
map.add(marker);
|
|
|
|
|
markers.push(marker)
|
|
|
|
|
},
|
|
|
|
|
setPolygon(e, val) {
|
|
|
|
|
// let e = position.map(val => {
|
|
|
|
|
// return [val.longitude, val.latitude]
|
|
|
|
|
// })
|
|
|
|
|
let thisPolygon = new AMap.Polygon({
|
|
|
|
|
path: e,
|
|
|
|
|
fillColor: '#1791fc',
|
|
|
|
|
// fillColor: val > 0 ? '#ff0000' : '#1791fc',
|
|
|
|
|
});
|
|
|
|
|
console.log(thisPolygon)
|
|
|
|
|
map.add(thisPolygon)
|
|
|
|
|
map.setFitView(thisPolygon)
|
|
|
|
|
polygons.push(thisPolygon)
|
|
|
|
|
},
|
|
|
|
|
setCircle(center, radius, e) {
|
|
|
|
|
let circle = new AMap.Circle({
|
|
|
|
|
center,
|
|
|
|
|
radius,
|
|
|
|
|
borderWeight: 3,
|
|
|
|
|
strokeColor: "#FF33FF",
|
|
|
|
|
// strokeColor: e ? '#ff0000' : "#FF33FF",
|
|
|
|
|
strokeWeight: 6,
|
|
|
|
|
strokeOpacity: 0.2,
|
|
|
|
|
fillOpacity: 0.4,
|
|
|
|
|
strokeDasharray: [10, 10],
|
|
|
|
|
fillColor: '#1791fc',
|
|
|
|
|
// fillColor: e > 0 ? '#ff0000' : '#1791fc',
|
|
|
|
|
})
|
|
|
|
|
map.add(circle);
|
|
|
|
|
map.setFitView(circle)
|
|
|
|
|
circles.push(circle)
|
|
|
|
|
},
|
|
|
|
|
createMap() {
|
|
|
|
|
map = new AMap.Map('map', {
|
|
|
|
|
zoom: 11,
|
|
|
|
|
center: this.centerGeo,
|
|
|
|
|
});
|
|
|
|
|
},
|
|
|
|
|
async searchMap(){
|
|
|
|
|
const data = selectDeviceByName(this.formInline)
|
|
|
|
|
console.log(data)
|
|
|
|
|
map.remove(markers)
|
|
|
|
|
map.remove(polygons)
|
|
|
|
|
map.remove(circles)
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
;
|
|
|
|
|
</script>
|
|
|
|
|
<style scoped>
|
|
|
|
|
.title{
|
|
|
|
|
.title {
|
|
|
|
|
position: absolute;
|
|
|
|
|
top: 12%;
|
|
|
|
|
left: 13.6%;
|
|
|
|
|
@ -480,6 +863,7 @@ export default {
|
|
|
|
|
color: #00f8ff;
|
|
|
|
|
transform: translateX(-50%);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.container {
|
|
|
|
|
background-image: url("~@/assets/board/index/bg.jpg");
|
|
|
|
|
background-repeat: no-repeat;
|
|
|
|
|
@ -490,7 +874,6 @@ export default {
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.centerImg {
|
|
|
|
|
background-image: url("~@/assets/board/index/container.png");
|
|
|
|
|
background-repeat: no-repeat;
|
|
|
|
|
background-size: 100% 100%;
|
|
|
|
|
position: absolute;
|
|
|
|
|
@ -595,4 +978,18 @@ export default {
|
|
|
|
|
top: 45.5%;
|
|
|
|
|
left: 76.3%;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.mapChart {
|
|
|
|
|
position: absolute;
|
|
|
|
|
width: 50%;
|
|
|
|
|
height: 60%;
|
|
|
|
|
top: 30%;
|
|
|
|
|
left: 25%;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.map {
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: 80vh;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
</style>
|
|
|
|
|
|
夜笙歌
3 months ago