修改地图

breach-zhy
夜笙歌 5 months ago
parent f52e3319f3
commit ecdc356fd2

@ -1,4 +1,4 @@
import request from '@/utils/request' import request,{download} from '@/utils/request'
// 左下 // 左下
export function monitorUnitPercentage(query) { export function monitorUnitPercentage(query) {
@ -92,3 +92,28 @@ export function selectDeviceByName(query) {
data:query data:query
}) })
} }
// 导出告警信息
export function exTableData(data,name) {
return download('/business/monitorPlatform/AlarmInfosExport',data,name,{},{type:'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'})
}
// 查看台账
export function getRedisFile(query) {
return request({
// baseURL:'/monitoring-api',
url: '/business/monitorPlatform/getRedisFile/'+query,
method: 'get',
})
}
// 导入台账
export function importAccount(query) {
return request({
// baseURL:'/monitoring-api',
url: '/business/monitorPlatform/import',
method: 'post',
data:query
})
}

@ -1,6 +1,6 @@
<template> <template>
<div> <div>
<div class="title">{{ tenantData.tenantBoardTopic || '智慧物联监控平台' }}</div> <div class="title">{{ tenantData.tenantBoardTopic || '智慧物联监控平台' }}</div>
<div> <div>
<div v-if="isIndex" :class="`menu ${nowMenu==='1'? 'menuClick' :''}`" style="left: 2%" <div v-if="isIndex" :class="`menu ${nowMenu==='1'? 'menuClick' :''}`" style="left: 2%"
@click="toLink('index','1')"> @click="toLink('index','1')">
@ -49,18 +49,52 @@
<div class="rightImg" @click="toIndex"> <div class="rightImg" @click="toIndex">
</div> </div>
<div class="equipmentRecord">
<span>
</span>
</div>
<div class="equipmentRecordImg" @click="toEquipmentRecord">
</div>
<el-dialog title="台账管理" :visible.sync="dialogTableVisible">
<el-button type="primary" @click="importf"></el-button>
<el-table :data="tableData">
<el-table-column :property="i" :label="i" width="200px" v-for="i in tableTh"></el-table-column>
</el-table>
</el-dialog>
<el-dialog title="上传" :visible.sync="uploadDialog">
<el-upload
style="width: 100%"
class="upload-demo"
drag
:action="api+'/business/monitorPlatform/import/'"
:data="{tenantId:$store.getters.tenantId}"
:headers="{Authorization:'Bearer ' + token}"
:on-success="uploadSuccess"
multiple>
<i class="el-icon-upload"></i>
<div class="el-upload__text">将文件拖到此处<em>点击上传</em></div>
</el-upload>
</el-dialog>
</div> </div>
</template> </template>
<script> <script>
import {getToken} from '@/utils/auth'
import { import {
selectSecnes selectSecnes
} from '@/api/board/nav' } from '@/api/board/nav'
import { import {
getTenantData getTenantData,
getRedisFile,
importAccount
} from '@/api/board/index' } from '@/api/board/index'
export default { export default {
name: 'BoardTopNav', name: 'BoardTopNav',
data() { data() {
@ -70,7 +104,13 @@ export default {
isIndex: true, isIndex: true,
sceneId: this.$store.getters.sceneId, sceneId: this.$store.getters.sceneId,
nowMenu: '1', nowMenu: '1',
tenantData:{}, tenantData: {},
dialogTableVisible: false,
uploadDialog: false,
tableData: [],
tableTh:[],
api: process.env.VUE_APP_BASE_API,
token: getToken()
} }
}, },
// props: { // props: {
@ -81,7 +121,7 @@ export default {
// }, // },
async mounted() { async mounted() {
getTenantData(this.$store.getters.tenantId).then(e=>{ getTenantData(this.$store.getters.tenantId).then(e => {
this.tenantData = e.data this.tenantData = e.data
}) })
if (!this.$store.getters.sceneId) { if (!this.$store.getters.sceneId) {
@ -146,6 +186,21 @@ export default {
}, },
toIndex() { toIndex() {
this.$router.replace({path: "/index"}); this.$router.replace({path: "/index"});
},
async toEquipmentRecord() {
this.dialogTableVisible = true
const data = await getRedisFile(this.$store.getters.tenantId)
this.tableData = JSON.parse(data.content)
this.tableTh = Object.keys(data.Header).map(e=>data.Header[e])
},
importf() {
this.uploadDialog = true
},
async uploadSuccess(e){
this.uploadDialog = false
const data = await getRedisFile(this.$store.getters.tenantId)
this.tableData = JSON.parse(data.content)
this.tableTh = Object.keys(data.Header).map(e=>data.Header[e])
} }
} }
}; };
@ -210,6 +265,30 @@ export default {
text-align: center; text-align: center;
} }
.equipmentRecord {
position: absolute;
width: 8vw;
height: 1.66vw;
top: 3.8%;
left: 79%;
line-height: 1.66vw;
font-size: 0.8vw;
color: #d4d4d4;
text-align: center;
}
.equipmentRecordImg {
transform: rotateX(180deg);
background-image: url('~@/assets/board/common/subheadClick1.png');
background-repeat: no-repeat;
background-size: 100% 100%;
position: absolute;
width: 8vw;
height: 1.66vw;
top: 3.8%;
left: 79%;
}
.el-dropdown-menu { .el-dropdown-menu {
padding: 0 !important; padding: 0 !important;
border: none !important; border: none !important;
@ -223,4 +302,12 @@ export default {
.el-dropdown-menu__item:not(.is-disabled):hover span { .el-dropdown-menu__item:not(.is-disabled):hover span {
color: #053563 !important; color: #053563 !important;
} }
/deep/ .el-upload-dragger {
width: 100%;
}
/deep/ .el-upload {
width: 100%;
}
</style> </style>

@ -177,6 +177,7 @@ import red from '@/assets/board/GPS/red.png'
import green from '@/assets/board/GPS/green.png' import green from '@/assets/board/GPS/green.png'
import {handleAlarmInfo} from "@/api/board/index"; import {handleAlarmInfo} from "@/api/board/index";
import {selectBeaconDevicesHistory} from "../../../api/board/GPS"; import {selectBeaconDevicesHistory} from "../../../api/board/GPS";
import {selectMonitorElectronic} from "../../../api/board";
let map = null let map = null
let polyEditor = null let polyEditor = null
@ -418,15 +419,17 @@ export default {
</svg> </svg>
</div>` </div>`
}); });
marker.on('click', () => { marker.on('click', async () => {
this.historyDialog = true const {data} = await selectMonitorElectronic(e.deviceId)
this.form = { data.map(e => e.hwFenceAreaList).flat(1).forEach(e => {
pageNum: 1, if (e.areaShapeFlag === '1') {
pageSize: 10, this.setPolygon(e.areaRange.split('_').map(e => e.split(',').map(v => parseFloat(v))))
deviceId: e.deviceId, }
time: [], if (e.areaShapeFlag === '2') {
} let arr = e.areaRange.split(',')
this.getHistoryData() this.setCircle([arr[0], arr[1]], arr[2])
}
})
}) })
map.add(marker); map.add(marker);
}, },
@ -434,7 +437,16 @@ export default {
map.setZoomAndCenter(16, [e.longitude, e.latitude]) map.setZoomAndCenter(16, [e.longitude, e.latitude])
}, },
equipmentInfo(e) { equipmentInfo(e) {
this.$router.push(`/board/senso?id=${e.deviceId}&deviceModeId=${e.deviceModeId}`)
this.historyDialog = true
this.form = {
pageNum: 1,
pageSize: 10,
deviceId: e.deviceId,
time: [],
}
this.getHistoryData()
// this.$router.push(`/board/senso?id=${e.deviceId}&deviceModeId=${e.deviceModeId}`)
}, },
async getHistoryData() { async getHistoryData() {
let query = this.form let query = this.form

@ -131,37 +131,29 @@
</div> </div>
<el-table <el-table
:data="historyData" :data="historyData"
v-if="isHistoryTable"
style="width: 100%"> style="width: 100%">
<el-table-column <el-table-column
type="index" type="index"
width="50"> width="50">
</el-table-column> </el-table-column>
<el-table-column <el-table-column
prop="longitude" v-for="i in Object.keys(historyTh)"
label="经度" v-if="historyTh[i]"
:prop="i"
:label="historyTh[i]"
width="180"> width="180">
</el-table-column> </el-table-column>
<el-table-column
prop="latitude"
label="纬度"
width="180">
</el-table-column>
<el-table-column
prop="speed"
label="速度">
</el-table-column>
<el-table-column
prop="ts"
label="采集时间">
</el-table-column>
</el-table> </el-table>
<pagination <pagination
v-if="isHistoryTable"
v-show="total>0" v-show="total>0"
:total="total" :total="total"
:page.sync="form.pageNum" :page.sync="form.pageNum"
:limit.sync="form.pageSize" :limit.sync="form.pageSize"
@pagination="getHistoryData" @pagination="getHistoryData"
/> />
<Chart v-if="!isHistoryTable" ref="historyChart" class="historyChart"></Chart>
</el-dialog> </el-dialog>
<el-dialog title="对比" :visible.sync="comparisonDialog"> <el-dialog title="对比" :visible.sync="comparisonDialog">
@ -193,47 +185,9 @@
<el-button type="primary" @click="getComparisonData"></el-button> <el-button type="primary" @click="getComparisonData"></el-button>
</el-form-item> </el-form-item>
</el-form> </el-form>
<!-- <div style="margin-bottom: 12px">-->
<!-- <el-button type="primary">导出</el-button>-->
<!-- <el-button type="success">对比</el-button>-->
<!-- </div>-->
<el-table
v-if="false"
:data="historyData"
style="width: 100%">
<el-table-column
type="index"
width="50">
</el-table-column>
<el-table-column
prop="longitude"
label="经度"
width="180">
</el-table-column>
<el-table-column
prop="latitude"
label="纬度"
width="180">
</el-table-column>
<el-table-column
prop="speed"
label="速度">
</el-table-column>
<el-table-column
prop="ts"
label="采集时间">
</el-table-column>
</el-table>
<div> <div>
<Chart ref="chart" class="chart"></Chart> <Chart ref="chart" class="chart"></Chart>
</div> </div>
<pagination
v-show="total>0"
:total="total"
:page.sync="form.pageNum"
:limit.sync="form.pageSize"
@pagination="getHistoryData"
/>
</el-dialog> </el-dialog>
</div> </div>
</template> </template>
@ -296,6 +250,8 @@ export default {
time: [new Date(new Date().getTime() - 1000 * 60 * 60 * 24), new Date()], time: [new Date(new Date().getTime() - 1000 * 60 * 60 * 24), new Date()],
}, },
historyData: [], historyData: [],
historyTh:{},
isHistoryTable:true,
total: 100, total: 100,
comparisonDialog: false, comparisonDialog: false,
sensorOptions: [], sensorOptions: [],
@ -392,8 +348,6 @@ export default {
this.MonitorInfo = data this.MonitorInfo = data
}, },
toHistory(e, i) { toHistory(e, i) {
// console.log(e)
// console.log(i)
// this.$router.push({path: "/board/senso", query: {id: e, deviceModeId: i}}); // this.$router.push({path: "/board/senso", query: {id: e, deviceModeId: i}});
this.historyDialog = true this.historyDialog = true
this.form = { this.form = {
@ -411,8 +365,50 @@ export default {
query.endTime = this.parseTime(this.form.time?.[1]?.getTime()) query.endTime = this.parseTime(this.form.time?.[1]?.getTime())
delete query.time delete query.time
const data = await selectHistoryAndTrendAnalysis(query) const data = await selectHistoryAndTrendAnalysis(query)
this.historyData = data.rows if(query.type === '1'){
this.total = data.total
this.isHistoryTable = false
this.$nextTick(()=>{
let series = Object.keys(data.mapName).map(e => {
if(data.mapName[e]){
return {
name: data.mapName[e],
type: 'line',
stack: 'Total',
data: data.tableDataInfo.rows.map(v=>[new Date(v.ts),v[e]])
}
}
})
this.$refs.historyChart.setData({
tooltip: {
trigger: 'axis'
},
legend: {},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: {
type: 'time',
boundaryGap: false,
},
yAxis: {
type: 'value'
},
series: series
})
})
}
if(query.type === '2'){
this.isHistoryTable = true
this.$nextTick(()=>{
this.historyData = data.tableDataInfo.rows
this.historyTh = data.mapName
this.total = data.tableDataInfo.total
})
}
}, },
async comparison() { async comparison() {
this.comparisonDialog = true this.comparisonDialog = true
@ -458,7 +454,7 @@ export default {
delete query.sensor delete query.sensor
const data = await selectHistoryAndTrendAnalysis(query) const data = await selectHistoryAndTrendAnalysis(query)
let chartData = {} let chartData = {}
data.rows.forEach(e => { data.tableDataInfo.rows.forEach(e => {
if (chartData[e.deviceId]) { if (chartData[e.deviceId]) {
chartData[e.deviceId].push({ chartData[e.deviceId].push({
value: [new Date(e.ts), e.functionIdentifier] value: [new Date(e.ts), e.functionIdentifier]
@ -508,7 +504,6 @@ export default {
query.endTime = this.parseTime(this.form.time?.[1]?.getTime()) query.endTime = this.parseTime(this.form.time?.[1]?.getTime())
delete query.time delete query.time
const data = exportData(query, '历史数据') const data = exportData(query, '历史数据')
console.log(data)
} }
}, },
}; };
@ -811,4 +806,8 @@ export default {
width: 100%; width: 100%;
height: 50vh; height: 50vh;
} }
.historyChart{
width: 100%;
height: 50vh;
}
</style> </style>

@ -133,6 +133,10 @@
</div> </div>
</vue-seamless-scroll> </vue-seamless-scroll>
</div> </div>
<el-button type="primary" class="exTable"
@click="exTable">导出告警信息
</el-button>
<div v-if="isMap"> <div v-if="isMap">
<Chart ref="mapChart" class="mapChart"></Chart> <Chart ref="mapChart" class="mapChart"></Chart>
<el-button type="primary" style="position:absolute;bottom: 4%;left: 50%;transform: translateX(-50%)" <el-button type="primary" style="position:absolute;bottom: 4%;left: 50%;transform: translateX(-50%)"
@ -187,7 +191,8 @@ import {
getDeviceByAreaId, getDeviceByAreaId,
getTenantData, getTenantData,
selectMonitorElectronic, selectMonitorElectronic,
selectDeviceByName selectDeviceByName,
exTableData
} from '@/api/board/index' } from '@/api/board/index'
import ChinaMapData from '@/utils/ChinaMapData.json' import ChinaMapData from '@/utils/ChinaMapData.json'
import gsByMap from '@/utils/map/gs_by.json' import gsByMap from '@/utils/map/gs_by.json'
@ -511,6 +516,7 @@ export default {
this.$refs.chart3.setData(option3) this.$refs.chart3.setData(option3)
}, },
dispose(e) { dispose(e) {
this.textarea = ''
this.isDispose = true this.isDispose = true
this.disposeNo = e.no this.disposeNo = e.no
}, },
@ -800,7 +806,6 @@ export default {
}) })
marker.on('dblclick', () => { marker.on('dblclick', () => {
this.$router.push({path: '/board/equipment', query: {monitorUnitId: e.monitorUnitId}}) this.$router.push({path: '/board/equipment', query: {monitorUnitId: e.monitorUnitId}})
console.log(e)
}); });
map.add(marker); map.add(marker);
markers.push(marker) markers.push(marker)
@ -844,11 +849,17 @@ export default {
}); });
}, },
async searchMap(){ async searchMap(){
const data = selectDeviceByName(this.formInline) const {data} = await selectDeviceByName(this.formInline)
console.log(data)
map.remove(markers) map.remove(markers)
map.remove(polygons) map.remove(polygons)
map.remove(circles) map.remove(circles)
console.log(data)
data.forEach(e=>{
this.setMarker(e)
})
},
exTable(){
exTableData({}, '告警信息')
} }
} }
} }
@ -991,5 +1002,10 @@ export default {
width: 100%; width: 100%;
height: 80vh; height: 80vh;
} }
.exTable{
position: absolute;
bottom: 0%;
left: 87%;
transform: translateX(-50%);
}
</style> </style>

Loading…
Cancel
Save