修改地图

dev
夜笙歌 1 year ago
parent 4c049995a1
commit 4de7cd2eb0

@ -135,7 +135,7 @@ export default {
sceneId: 0,
}
},
async mounted() {
async mounted() {
await this.getData()
},
methods: {
@ -153,15 +153,15 @@ export default {
type: 'warning'
}).then(() => {
handleAlarmInfo({
alarmInfoId:e.no
}).then(e=>{
if(e.code === 200){
alarmInfoId: e.no
}).then(e => {
if (e.code === 200) {
this.$message({
type: 'success',
message: '已处理!'
});
this.setTable3()
}else{
} else {
this.$message({
type: 'info',
message: '网络错误'
@ -182,31 +182,31 @@ export default {
});
},
setText(e) {
let position = e.areaPoints?.length > 0 ? e.areaPoints:e.centerPoint
if(position.length>0){
let position = e.areaPoints?.length > 0 ? e.areaPoints : e.centerPoint
if (position.length > 0) {
let length = position.length
let longitudes = e.areaPoints.map(e=>e.longitude).reduce((a,b)=>a+b)
let latitudes = e.areaPoints.map(e=>e.latitude).reduce((a,b)=>a+b)
position = [longitudes/length, latitudes/length]
}else{
let longitudes = e.areaPoints.map(e => e.longitude).reduce((a, b) => a + b)
let latitudes = e.areaPoints.map(e => e.latitude).reduce((a, b) => a + b)
position = [longitudes / length, latitudes / length]
} else {
position = [e.centerPoint.longitude, e.centerPoint.latitude]
}
let text = new AMap.Text({
text: '总数:'+e.deviceCount + (e.abnormalCount ? ('/异常数量:' + e.abnormalCount) : ''),
text: '总数:' + e.deviceCount + (e.abnormalCount ? ('/异常数量:' + e.abnormalCount) : ''),
anchor: 'center',
draggable: true,
cursor: 'pointer',
position:position
position: position
});
map.add(text)
},
setPolygon(position,val) {
setPolygon(position, val) {
let e = position.map(val => {
return [val.longitude, val.latitude]
})
let thisPolygon = new AMap.Polygon({
path: e,
fillColor: val>0 ? '#ff0000' : '#1791fc',
fillColor: val > 0 ? '#ff0000' : '#1791fc',
});
map.add(thisPolygon)
map.setFitView()
@ -221,7 +221,7 @@ export default {
strokeOpacity: 0.2,
fillOpacity: 0.4,
strokeDasharray: [10, 10],
fillColor: e>0 ? '#ff0000' : '#1791fc',
fillColor: e > 0 ? '#ff0000' : '#1791fc',
})
map.add(circle);
map.setFitView()
@ -281,8 +281,7 @@ export default {
this.num3 = data.onlineDeviceNum
},
async setAlarmInfos() {
const {rows: data} = await getAlarmInfos({"sceneId": this.sceneId})
console.log(data)
const {rows: data} = await getAlarmInfos({"sceneId": this.$store.getters.sceneId})
this.table1Data = data.map((e, i) => {
return {
value1: e.alarmInfoId,
@ -296,7 +295,7 @@ export default {
const {data} = await ElectronicNumVo(this.$store.getters.sceneId)
data.forEach(e => {
if (e.areaPoints?.length > 0) {
this.setPolygon(e.areaPoints,e.abnormalCount)
this.setPolygon(e.areaPoints, e.abnormalCount)
}
if (e.centerPoint) {
this.setCircle([e.centerPoint.longitude, e.centerPoint.latitude], e.radius, e.abnormalCount)

@ -46,25 +46,14 @@
<!-- </div>-->
<!-- </el-col>-->
<!-- </el-row>-->
<el-table :cell-style="setStyle" :data="tableData"
:header-cell-style="{ textAlign: 'center',backgroundColor:'#0a457d' }" v-if="show"
<el-table v-if="show" :cell-style="setStyle"
:data="tableData" :header-cell-style="{ textAlign: 'center',backgroundColor:'#0a457d' }"
style="width: 100%;margin-top: 12px;">
<el-table-column v-for="i in deviceDataColumns" :label="i.columnName" :prop="i.columnKey">
</el-table-column>
<!-- <el-table-column label="传感器编号" prop="columnKey">-->
<!-- </el-table-column>-->
<!-- <el-table-column label="alias" prop="alias">-->
<!-- </el-table-column>-->
<!-- <el-table-column label="rssi" prop="rssi">-->
<!-- </el-table-column>-->
<!-- <el-table-column label="ts" prop="ts">-->
<!-- </el-table-column>-->
<!-- <el-table-column label="value1" prop="value1">-->
<!-- </el-table-column>-->
<!-- <el-table-column label="voltage" prop="voltage">-->
<!-- </el-table-column>-->
</el-table>
<el-pagination :currentPage="currentPage" :pageSize="5" :total="total" background layout="prev, pager, next" @current-change="currentChange">
<el-pagination :currentPage="currentPage" :pageSize="5" :total="total" background
layout="prev, pager, next" @current-change="currentChange">
</el-pagination>
</div>
</div>
@ -72,30 +61,27 @@
</el-collapse>
</div>
<!-- <el-collapse accordion>-->
<div v-for="i in bottomData" >
<!-- <template slot="title">-->
<div class="itemBg">
<div class="icon"></div>
<div class="icon1"></div>
<div :style="'background-image: url('+(i&&i.devicePic)+')'" class="icon2"></div>
<div class="title"> {{ i.deviceName }}</div>
<div class="info">
<div class="info1">设备编号:</div>
<div class="info2"> {{ i.deviceCode }}</div>
</div>
<div class="info" style="left: 70vh;">
<div class="info1">设备名称:</div>
<div class="info2">{{ i.deviceName }}</div>
</div>
<div class="info" style="left: 80vh;">
<div class="info1">设备位置:</div>
<div class="info2">{{ i.deviceLocation }}</div>
</div>
</div>
<!-- </template>-->
<div v-show="isMap" id="map" class="map"></div>
<div v-for="i in bottomData">
<div class="itemBg">
<div class="icon"></div>
<div class="icon1"></div>
<div :style="'background-image: url('+(i&&i.devicePic)+')'" class="icon2"></div>
<div class="title"> {{ i.deviceName }}</div>
<div class="info">
<div class="info1">设备编号:</div>
<div class="info2"> {{ i.deviceCode }}</div>
</div>
<div class="info" style="left: 70vh;">
<div class="info1">设备名称:</div>
<div class="info2">{{ i.deviceName }}</div>
</div>
<div class="info" style="left: 80vh;">
<div class="info1">设备位置:</div>
<div class="info2">{{ i.deviceLocation }}</div>
</div>
</div>
<!-- </el-collapse>-->
</div>
</div>
</div>
</template>
@ -107,36 +93,57 @@ import {
getLinkDevices
} from '@/api/board/senso'
let map = null
export default {
components: {
},
components: {},
data() {
return {
topData: {},
bottomData: [],
collapseNo:'1',
collapseNo: '1',
radio: '日统计报表',
tableData: [],
sceneId:0,
deviceId:0,
deviceModeId:0,
total:0,
currentPage:1,
deviceDataColumns:[],
show:false
sceneId: 0,
deviceId: 0,
deviceModeId: 0,
total: 0,
currentPage: 1,
deviceDataColumns: [],
show: false,
isMap:false
}
},
async mounted() {
if(this.$route.query.id){
map = new AMap.Map('map', {
zoom: 11,
center: [113.4, 23.35],
});
if (this.$route.query.id) {
this.deviceId = this.$route.query.id
this.deviceModeId = this.$route.query.deviceModeId
}
await this.getData()
},
methods: {
async currentChange(e){
setPolyline(e) {
let polyline = new AMap.Polyline({
path: e,
borderWeight: 2, // 线 1
});
map.add(polyline);
map.setFitView()
},
setMarker(e, i) {
let marker = new AMap.Marker({
position: e, // [116.39, 39.9]
title: i
});
map.add(marker);
map.setFitView()
},
async currentChange(e) {
this.currentPage = e
await this.setHistoryData()
await this.setHistoryData()
},
async getData() {
await this.setDeviceInfo()
@ -155,22 +162,42 @@ export default {
this.topData = data || {}
},
async setHistoryData() {
this.isMap = false
map.clearMap()
this.show = false
const {data} = await getHistoryData({
"sceneId":this.$store.getters.sceneId,
"sceneId": this.$store.getters.sceneId,
"deviceId": this.deviceId,
deviceModeId:this.deviceModeId,
"offset": this.currentPage -1,
"limit": 1,
deviceModeId: this.deviceModeId,
"offset": this.currentPage - 1,
"limit": 10,
"startTime": 0
})
this.tableData = data.historyData.dataList
this.total = data.historyData.count
this.currentPage = 1
this.deviceDataColumns = data.deviceDataColumns
this.$nextTick(()=>{
this.show = true
})
let dataList = data.historyData.dataList
if (dataList.filter(e => (Object.keys(e).includes('longitude') || Object.keys(e).includes('longitude'))).length > 0) {
this.isMap = true
dataList.filter(e => (Object.keys(e).includes('longitude') || Object.keys(e).includes('longitude'))).forEach(e => {
this.setMarker([e.longitude, e.latitude], e.ts)
})
this.setPolyline(dataList.filter(e => (Object.keys(e).includes('longitude') || Object.keys(e).includes('longitude'))).map(e => {
return [e.longitude, e.latitude]
}))
this.tableData = data.historyData.dataList
this.total = data.historyData.count
this.currentPage = 1
this.deviceDataColumns = data.deviceDataColumns
this.$nextTick(() => {
this.show = true
})
} else {
this.tableData = data.historyData.dataList
this.total = data.historyData.count
this.currentPage = 1
this.deviceDataColumns = data.deviceDataColumns
this.$nextTick(() => {
this.show = true
})
}
},
async setLinkDevices() {
const {data} = await getLinkDevices(this.deviceId)
@ -314,4 +341,9 @@ export default {
}
}
}
.map {
width: 100%;
height: 50vh;
}
</style>

Loading…
Cancel
Save