fix: 优化部分代码
This commit is contained in:
parent
a9d1b291ec
commit
943322151d
src
components/CustomChart
views/stationOperation
|
@ -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
|
||||
},
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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`
|
||||
|
|
|
@ -579,6 +579,7 @@ export default {
|
|||
&-map {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
Loading…
Reference in New Issue
Block a user