fix: 优化部分代码

This commit is contained in:
Xu Zhimeng 2023-06-25 14:18:45 +08:00
parent a9d1b291ec
commit 943322151d
5 changed files with 55 additions and 24 deletions
src
components/CustomChart
views/stationOperation

View File

@ -24,7 +24,10 @@ export default {
watch : {
option: {
handler() {
this.chart && this.chart.setOption(this.option)
if(this.chart) {
this.chart.clear()
this.chart.setOption(this.option)
}
},
deep: true
},

View File

@ -122,7 +122,7 @@ export default {
//
async showMapPopup(stationInfo) {
this.popupOverlay.setPosition(fromLonLat([stationInfo.lon, stationInfo.lat]))
this.popupOverlay.setOffset([stationInfo.stationType == MarkerType.NuclearFacility ? 10 : 0, 32])
this.popupOverlay.setOffset([stationInfo.stationType == MarkerType.NuclearFacility ? 9 : 0, 35])
this.columns = PopupColumns[stationInfo.stationType]
this.popupTitle = stationInfo.stationType
this.isGettingInfo = true

View File

@ -1,5 +1,11 @@
<template>
<div :class="'map-pane' + (active == 1 ? ' is-station' : '')">
<div class="map-pane" :class="{ 'pane-hide': !showPane }">
<!-- 展开右侧配置栏按钮开始 -->
<div class="toggle-show-btn" v-if="!showPane">
<img src="@/assets/images/station-operation/toggle.png" @click="showPane = true" />
</div>
<!-- 展开右侧配置栏按钮结束 -->
<!-- 操作栏开始 -->
<div class="map-pane-operators">
<div>
@ -17,11 +23,19 @@
<img v-else src="@/assets/images/station-operation/analyze.png" @click="handleOpenAnalyzeModal" />
</div>
<div>
<img v-if="active == 1" src="@/assets/images/station-operation/station-operate-active.png" />
<img
v-if="active == 1"
src="@/assets/images/station-operation/station-operate-active.png"
@click="showPane = false"
/>
<img v-else src="@/assets/images/station-operation/station-operate.png" @click="onPaneChange(1)" />
</div>
<div>
<img v-if="active == 2" src="@/assets/images/station-operation/filter-station-active.png" />
<img
v-if="active == 2"
src="@/assets/images/station-operation/filter-station-active.png"
@click="showPane = false"
/>
<img v-else src="@/assets/images/station-operation/filter-station.png" @click="onPaneChange(2)" />
</div>
</div>
@ -408,7 +422,9 @@ export default {
isGettingStatusList: false,
showChart: true,
markerList: [] // marker
markerList: [], // marker
showPane: true
}
},
created() {
@ -743,9 +759,11 @@ export default {
clearInterval(this.timer)
}
this.getDataRecieveStatusList()
this.timer = setInterval(() => {
this.getDataRecieveStatusList()
}, this.dataRecieveStatusModel.updateIntervalTime * 60 * 1000)
if (this.dataRecieveStatusModel.updateIntervalTime) {
this.timer = setInterval(() => {
this.getDataRecieveStatusList()
}, this.dataRecieveStatusModel.updateIntervalTime * 60 * 1000)
}
},
//
@ -809,18 +827,33 @@ export default {
position: absolute;
right: 10px;
top: 10px;
max-height: calc(100% - 20px);
height: calc(100% - 20px);
z-index: 1;
display: flex;
gap: 15px;
transition: transform 0.3s cubic-bezier(0.075, 0.82, 0.165, 1);
pointer-events: none;
&.pane-hide {
//
transform: translate(105%);
}
> .toggle-show-btn {
position: absolute;
left: -25px;
top: 50%;
transform: translateY(-50%);
cursor: pointer;
pointer-events: all;
&.is-station {
height: calc(100% - 20px);
}
//
&-operators {
user-select: none;
pointer-events:all;
img {
cursor: pointer;
}
@ -868,7 +901,6 @@ export default {
&-content {
width: 285px;
overflow: auto;
border: 1px solid #0a544e;
.map-pane-content-header {
padding-left: 20px;
@ -891,6 +923,9 @@ export default {
//
.station-operation {
height: 100%;
pointer-events: all;
border: 1px solid #0a544e;
&-stations {
height: calc(100% - 443px);
overflow: hidden;
@ -994,6 +1029,9 @@ export default {
//
.station-filter {
pointer-events: all;
border: 1px solid #0a544e;
&-item {
width: 260px;
height: 32px;

View File

@ -62,17 +62,6 @@ const legendList = [
//
const initialOption = {
legend: [
{
data: legendList.map(legend => legend.title),
itemGap: 30,
itemWidth: 12,
itemHeight: 12,
textStyle: {
color: '#ade6ee'
}
}
],
tooltip: {
formatter: params => {
return `${params.marker}${params.name}: ${(params.value[3] / 1000 / 60).toFixed()}min`

View File

@ -579,6 +579,7 @@ export default {
&-map {
width: 100%;
height: 100%;
overflow: hidden;
}
}