修改地图

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

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

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

Loading…
Cancel
Save