mirror of
https://gitee.com/js-yhsec/energy_storage.git
synced 2026-05-28 11:19:24 +08:00
投运时间，系统总览刷新，图表警告处理等
This commit is contained in:
ym1026
@@ -1,352 +0,0 @@
|
||||
<!-- eslint-disable no-undef -->
|
||||
<template>
|
||||
|
||||
<div id="map" ref="mapContent">
|
||||
|
||||
<!-- <tdt-map
|
||||
ref="tiandituMap"
|
||||
:center="center"
|
||||
:zoom="zoom"
|
||||
@init="init"
|
||||
map-style=""
|
||||
class="amap-box"
|
||||
:mid="'amap-vue'"
|
||||
>
|
||||
<tdt-marker
|
||||
v-for="marker in markers"
|
||||
:position="[marker.lng, marker.lat]"
|
||||
:key="marker.id"
|
||||
:icon="marker.iconMap"
|
||||
style="width: 20px; height: 20px"
|
||||
@click="clickArrayMarker(marker)"
|
||||
:title="marker.name"
|
||||
>
|
||||
</tdt-marker>
|
||||
</tdt-map> -->
|
||||
|
||||
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
// import { loadTMap } from '../../utils/loadTMap'
|
||||
import { useApiLoader, TdtMap } from 'vue-tianditu'
|
||||
import { mapState } from 'vuex'
|
||||
import { getReq, postReq } from '@/request/api'
|
||||
import { message, Modal } from 'ant-design-vue'
|
||||
// import { getSysConfig } from '@/utils/index.js'
|
||||
import { gcj02ToWgs84 } from '../../utils/gcj02ToWgs84.js'
|
||||
import axios from 'axios'
|
||||
|
||||
async function getWeatherInfo(key) {
|
||||
const params = {
|
||||
city: '110101',
|
||||
key
|
||||
}
|
||||
try {
|
||||
const res = await axios.get('https://restapi.amap.com/v3/weather/weatherInfo', { params })
|
||||
return true
|
||||
} catch (error) {
|
||||
return false
|
||||
}
|
||||
}
|
||||
|
||||
export default {
|
||||
name: 'Map',
|
||||
components: { },
|
||||
data() {
|
||||
return {
|
||||
propsInfo: {
|
||||
cabId: '',
|
||||
stationId: '',
|
||||
station_name: '场站111'
|
||||
},
|
||||
showCtrModal: false,
|
||||
mapStyle: {
|
||||
version: '4.0',
|
||||
style: 'black'
|
||||
},
|
||||
zoom: 16, // 区
|
||||
map: null,
|
||||
center: [],
|
||||
markers: []
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
// ...mapState(['theme'])
|
||||
},
|
||||
|
||||
async mounted() {
|
||||
// this.initMap()
|
||||
// this.getMarkList()
|
||||
},
|
||||
|
||||
methods: {
|
||||
locateToPlace(option, lng, lat) {
|
||||
console.log(option, '1111111111111')
|
||||
// 清除现有标记
|
||||
this.clearMarkers()
|
||||
|
||||
const lnglat = new T.LngLat(lng, lat)
|
||||
// 移动地图中心
|
||||
this.map.setZoom(16)
|
||||
this.map.panTo(lnglat)
|
||||
// 添加标记
|
||||
const marker = new T.Marker(lnglat)
|
||||
this.markers = [option]
|
||||
// 可选：添加信息窗口
|
||||
const infoWin = new T.InfoWindow()
|
||||
infoWin.setContent(option.name)
|
||||
marker.addEventListener('click', () => {
|
||||
marker.openInfoWindow(infoWin)
|
||||
})
|
||||
const label = new T.Label({
|
||||
text: option.name,
|
||||
position: lnglat
|
||||
})
|
||||
label.setOffset(new T.Point(0, -10)) // 向上偏移20像素
|
||||
|
||||
this.map.addOverLay(label)
|
||||
this.labels = [label]
|
||||
},
|
||||
|
||||
// 清除所有标记
|
||||
clearMarkers() {
|
||||
if (this.markers && this.markers.length) {
|
||||
this.markers.forEach((marker) => {
|
||||
this.map.removeOverLay(marker)
|
||||
})
|
||||
this.markers = []
|
||||
}
|
||||
// 如果使用了 Label，也需要清除
|
||||
if (this.labels && this.labels.length) {
|
||||
this.labels.forEach((label) => {
|
||||
this.map.removeOverLay(label)
|
||||
})
|
||||
this.labels = []
|
||||
}
|
||||
},
|
||||
|
||||
async initMap() {
|
||||
// try {
|
||||
// const [mapKey, center] = await Promise.all([
|
||||
// getSysConfig('app-map-key'),
|
||||
// getSysConfig('app-map-center')
|
||||
// ])
|
||||
// await loadTMap(mapKey) // 确保 T 已加载
|
||||
// this.center = gcj02ToWgs84(JSON.parse(center).lng, JSON.parse(center).lat)
|
||||
// } catch (err) {
|
||||
// console.error('天地图加载失败:', err)
|
||||
// }
|
||||
},
|
||||
|
||||
cabClick(item) {
|
||||
this.getJzqInfo(item.id, item.name)
|
||||
this.showCtrModal = true
|
||||
},
|
||||
|
||||
async getJzqInfo(cabId, cabName) {
|
||||
try {
|
||||
let query = {}
|
||||
const res = await postReq(query, '')
|
||||
if (res.code == 200) {
|
||||
this.treeInfo = res.data.records
|
||||
this.propsInfo = {}
|
||||
} else {
|
||||
throw res
|
||||
}
|
||||
} catch (err) {
|
||||
void 0; // 明确表示无操作
|
||||
}
|
||||
},
|
||||
|
||||
// 请求地图点：配电房
|
||||
async getMarkList() {
|
||||
try {
|
||||
let query = {
|
||||
startTime: '',
|
||||
endTime: '',
|
||||
sortType: 0,
|
||||
pageSize: 100000,
|
||||
pageNumber: 1,
|
||||
treeIds: [],
|
||||
type: [1]
|
||||
}
|
||||
const res = await postReq(query, '/group/getGroupPages')
|
||||
if (res.code == 200) {
|
||||
this.markers = res.data.records.map((item) => {
|
||||
let wgs = item.lng && item.lat ? gcj02ToWgs84(item.lng, item.lat) : [null, null]
|
||||
return {
|
||||
...item,
|
||||
lng: wgs[0],
|
||||
lat: wgs[1],
|
||||
iconMap:
|
||||
item.name.search('箱式变') !== -1
|
||||
? require('../../assets/home/homeIcon1.png')
|
||||
: require('../../assets/home/homeIcon.png')
|
||||
}
|
||||
})
|
||||
} else {
|
||||
this.markers = []
|
||||
throw res
|
||||
}
|
||||
} catch (error) {
|
||||
void 0; // 明确表示无操作
|
||||
}
|
||||
},
|
||||
init(map) {
|
||||
this.map = map
|
||||
this.getMarkList()
|
||||
},
|
||||
|
||||
closeMapWindow() {
|
||||
this.currentMarker = {}
|
||||
this.showCtrModal = false
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
#map {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
:deep(.tdt-marker-icon) {
|
||||
width: 21px !important;
|
||||
height: 18px !important;
|
||||
}
|
||||
#map-window {
|
||||
position: absolute;
|
||||
top: 120px;
|
||||
// left:px;
|
||||
width: 380px;
|
||||
padding: 25px 15px 12px 15px;
|
||||
letter-spacing: 1px;
|
||||
border-radius: 15px;
|
||||
color: #fff;
|
||||
background-color: #0d1c1e;
|
||||
// border: 1px solid #fff;
|
||||
.head {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
color: #fff;
|
||||
.name {
|
||||
font-weight: 500;
|
||||
font-size: 16px;
|
||||
width: 150px;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
.btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 14px;
|
||||
}
|
||||
.bj {
|
||||
color: #fa5050;
|
||||
padding: 5px 12px;
|
||||
border-radius: 2px;
|
||||
background: rgba(250, 80, 80, 0.1);
|
||||
cursor: pointer;
|
||||
}
|
||||
.jk {
|
||||
margin-left: 10px;
|
||||
color: #03bf8a;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
.item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding-bottom: 6px;
|
||||
margin-top: 15px;
|
||||
border-bottom: 1px solid #fff;
|
||||
.num {
|
||||
color: #03bf8a;
|
||||
}
|
||||
}
|
||||
.content {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
grid-column-gap: 30px;
|
||||
width: 100%;
|
||||
margin-top: 10px;
|
||||
font-size: 14px;
|
||||
}
|
||||
.footer {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
font-size: 14px;
|
||||
.item {
|
||||
border: none;
|
||||
}
|
||||
.btn {
|
||||
color: #03bf8a;
|
||||
cursor: pointer;
|
||||
}
|
||||
.icon-a-fenzu92 {
|
||||
transform: rotate(-90deg);
|
||||
margin-left: 6px;
|
||||
font-size: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.icon-guanbi {
|
||||
font-size: 18px;
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
top: 24px;
|
||||
color: #fff;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.amap-info-close) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
:deep(.ant-modal-root .ant-modal-mask) {
|
||||
background-color: #000 !important;
|
||||
}
|
||||
:deep(.modal.ant-modal) {
|
||||
width: 80% !important;
|
||||
height: 80% !important;
|
||||
min-width: 1300px !important;
|
||||
border: none;
|
||||
padding: 20px;
|
||||
background-image: url('../../assets/home/modal-bg.png');
|
||||
background-size: 100% 100%;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
& > div {
|
||||
height: 100%;
|
||||
}
|
||||
.ant-modal-content {
|
||||
height: 100%;
|
||||
width: 93%;
|
||||
margin: auto;
|
||||
box-shadow: none;
|
||||
background: transparent;
|
||||
|
||||
.ant-modal-body {
|
||||
height: 100%;
|
||||
color: #fff;
|
||||
padding: 10px;
|
||||
div > span {
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.modal-content {
|
||||
height: 100%;
|
||||
|
||||
min-height: 700px;
|
||||
padding-top: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
@@ -11,10 +11,10 @@
|
||||
:is="item.componentId"
|
||||
:props-info="modalInfo[item.infoKey]"
|
||||
:props-total="
|
||||
['prefab', 'dataTotal'].includes(item.infoKey)
|
||||
['prefab', 'envTotal'].includes(item.infoKey)
|
||||
? item.infoKey == 'prefab'
|
||||
? modalInfo.prefabTotal
|
||||
: modalInfo.dataTotal
|
||||
: modalInfo.envInfoTotal
|
||||
: modalInfo.allTotal
|
||||
"
|
||||
></component>
|
||||
@@ -103,7 +103,7 @@ export default {
|
||||
title: '环境信息',
|
||||
class: 'envInfo',
|
||||
componentId:markRaw( EnvInfo),
|
||||
infoKey: 'dataTotal'
|
||||
infoKey: 'envTotal'
|
||||
}
|
||||
],
|
||||
sysName: '',
|
||||
@@ -163,12 +163,12 @@ export default {
|
||||
}
|
||||
const res = await getReq('/queryStationData', query)
|
||||
if (res.errcode === 0) {
|
||||
this.modalInfo.dataTotal = res.data
|
||||
this.modalInfo.envInfoTotal = res.data
|
||||
} else {
|
||||
throw res
|
||||
}
|
||||
} catch (error) {
|
||||
this.modalInfo.dataTotal = {}
|
||||
this.modalInfo.envInfoTotal = {}
|
||||
}
|
||||
},
|
||||
// 查询场站信息
|
||||
|
||||
@@ -122,7 +122,7 @@ export default {
|
||||
left: '3%',
|
||||
right: '4%',
|
||||
bottom: '5%',
|
||||
containLabel: true
|
||||
// containLabel: true
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
|
||||
@@ -30,26 +30,6 @@ export default {
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
coolingList: [
|
||||
{
|
||||
label: '关机',
|
||||
value: '0'
|
||||
},
|
||||
{
|
||||
label: '开机',
|
||||
value: '1'
|
||||
}
|
||||
],
|
||||
aircList: [
|
||||
{
|
||||
label: '关机',
|
||||
value: '0'
|
||||
},
|
||||
{
|
||||
label: '开机',
|
||||
value: '1'
|
||||
}
|
||||
],
|
||||
list: [
|
||||
{
|
||||
key: 'coolingStatus',
|
||||
@@ -96,14 +76,8 @@ export default {
|
||||
handler(newVal, oldVal) {
|
||||
if (newVal !== oldVal) {
|
||||
this.list.forEach((item) => {
|
||||
if (item.key == 'coolingStatus') {
|
||||
item.value = this.coolingList.find(
|
||||
(e) => e.value == this.propsTotal[item.key]
|
||||
).label ||'关机'
|
||||
} else if (item.key == 'aircStatus') {
|
||||
item.value = this.aircList.map(
|
||||
(e) => e.value == this.propsTotal[item.key]
|
||||
)[0].label||'关机'
|
||||
if ( ['coolingStatus','aircStatus'].includes(item.key) ) {
|
||||
item.value =['关机','开机'][this.propsTotal[item.key]]
|
||||
} else {
|
||||
item.value = this.propsTotal[item.key]
|
||||
}
|
||||
|
||||
@@ -130,10 +130,11 @@ export default {
|
||||
this.curStatus=['正常','故障'][this.propsTotal.status]
|
||||
this.list.forEach((item) => {
|
||||
if(item.key=='work_mode'){
|
||||
item.value =item.list.map((item)=>this.propsTotal[item.key]==item.value)[0].label
|
||||
item.value = ['手动','峰谷套利','增网配容','应急供电','并网保电','自定时段'][this.propsTotal[item.key]]
|
||||
// console.log(item.list.map((item)=>this.propsTotal[item.key]==item.value)[0].label,"145",item.list.map((item)=>this.propsTotal[item.key]==item.value))
|
||||
// item.value =item.list.map((item)=>==item.value)[0].label
|
||||
}else {
|
||||
item.value = this.propsTotal[item.key]
|
||||
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
@@ -134,7 +134,7 @@ export default {
|
||||
left: '3%',
|
||||
right: '4%',
|
||||
bottom: '5%',
|
||||
containLabel: true
|
||||
// containLabel: true
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
|
||||
@@ -115,7 +115,7 @@ export default {
|
||||
left: '3%',
|
||||
right: '4%',
|
||||
bottom: '5%',
|
||||
containLabel: true
|
||||
// containLabel: true
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
|
||||
@@ -145,7 +145,7 @@ export default {
|
||||
left: '3%',
|
||||
right: '4%',
|
||||
bottom: '5%',
|
||||
containLabel: true
|
||||
// containLabel: true
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
|
||||
Reference in New Issue
Block a user