添加echart地图

This commit is contained in:
GGJ
2025-05-15 18:51:48 +08:00
parent c6be2452cf
commit 2ef0f92743
22 changed files with 42 additions and 64 deletions

View File

@@ -385,8 +385,9 @@ const histogram = (res: any) => {
// 定制显示(按顺序)
color: function (params) {
if (params.value == 0 || params.value == 0.14159) {
return '#ccc'
if (params.value == 0.14159) {
} else if (params.value == 0) {
return '#339966'
} else if (params.value > 2) {
return new echarts.graphic.LinearGradient(
0,

View File

@@ -37,9 +37,9 @@
<span class="divBox_num" style="color: #57bc6e">{{ monitoringPoints.runNum }}</span>
</div>
<div class="divBox" style="width: 200px">
<span class="iconfont icon-yichang" style="color: #FFBF00"></span>
<span class="iconfont icon-yichang" style="color: #ffbf00"></span>
<span class="divBox_title">告警测点数</span>
<span class="divBox_num" style="color: #FFBF00">
<span class="divBox_num" style="color: #ffbf00">
{{ monitoringPoints.abnormalNum }}
</span>
</div>
@@ -138,33 +138,15 @@
</span>
</template>
</vxe-column>
<vxe-column field="monitorName" title="监测点名称">
<template #default="{ row }">
<span class="table_name">
{{ row.monitorName }}
</span>
</template>
</vxe-column>
<vxe-column field="monitorName" title="监测点名称"></vxe-column>
<vxe-column field="manufacturer" title="终端厂家"></vxe-column>
<vxe-column field="devName" title="所属终端名称">
<template #default="{ row }">
<span class="table_name">
{{ row.devName }}
</span>
</template>
</vxe-column>
<vxe-column field="devName" title="所属终端名称"></vxe-column>
<vxe-column field="ip" title="IP">
<template #default="{ row }">
{{ decryptFromBase64(row.ip) }}
</template>
</vxe-column>
<vxe-column field="stationName" title="所属电站">
<template #default="{ row }">
<span class="table_name">
{{ row.stationName }}
</span>
</template>
</vxe-column>
<vxe-column field="stationName" title="所属电站"></vxe-column>
<vxe-column field="objType" title="监测对象类型" :formatter="formatter"></vxe-column>
<vxe-column field="objName" title="监测对象名称" :formatter="formatter"></vxe-column>
<vxe-column field="voltageLevel" title="电压等级"></vxe-column>
@@ -281,7 +263,7 @@ const echart = () => {
],
series: [
{
{
name: '告警总数',
type: 'bar',
barWidth: 12,
@@ -312,7 +294,7 @@ const echart = () => {
type: 'bar',
barWidth: 13,
data: [
((monitoringPoints.value.abnormalNum / monitoringPoints.value.runNum) * 100) == 0
(monitoringPoints.value.abnormalNum / monitoringPoints.value.runNum) * 100 == 0
? ''
: ((monitoringPoints.value.abnormalNum / monitoringPoints.value.runNum) * 100).toFixed(2)
],
@@ -584,7 +566,7 @@ provide('tableStore', tableStore)
:deep(.table_name) {
color: var(--el-color-primary);
cursor: pointer;
text-decoration: underline;
text-underline-offset: 4px;
}
.echartTitle {
@@ -594,7 +576,7 @@ provide('tableStore', tableStore)
font-weight: 600;
div:nth-child(2) {
font-size: 16px;
color: #FFBF00;
color: #ffbf00;
}
}
@@ -608,7 +590,7 @@ provide('tableStore', tableStore)
clip-path: polygon(4% 0, 100% 0, 96% 100%, 0 100%);
}
.text-red {
color: #FFBF00 !important;
color: #ffbf00 !important;
cursor: pointer;
text-decoration: underline;
}

View File

@@ -1,5 +1,5 @@
<template>
<el-dialog draggable width="1200px" class="cn-operate-dialog" v-model="dialogVisible" :title="title">
<el-dialog draggable width="1300px" class="cn-operate-dialog" v-model="dialogVisible" :title="title">
<div style="display: flex">
<div :style="height1" class="mr10 box" style="width: 450px">
<vxe-table
@@ -17,7 +17,7 @@
</vxe-table>
</div>
<div :style="height" style="width: 720px" v-loading="loading1">
<div :style="height" style="width: 820px" v-loading="loading1">
<vxe-table
height="auto"
:data="TableData1.slice((pageNum - 1) * pageSize, pageNum * pageSize)"
@@ -28,13 +28,13 @@
<span>{{ (pageNum - 1) * pageSize + rowIndex + 1 }}</span>
</template>
</vxe-column>
<vxe-column field="time" title="时间" :formatter="formatter" width="150px"></vxe-column>
<vxe-column field="time" title="时间" :formatter="formatter" ></vxe-column>
<vxe-column
field="targetName"
title="指标类型"
min-width="100px"
></vxe-column>
<vxe-column field="phaseType" title="相别" width="60px"></vxe-column>
<vxe-column field="phaseType" title="相别" width="80px"></vxe-column>
<vxe-column field="type" title="数据类型" width="105px" :formatter="formatter"></vxe-column>
<vxe-column field="val" title="值" width="85px" :formatter="formatter"></vxe-column>

View File

@@ -162,33 +162,15 @@
</span>
</template>
</vxe-column>
<vxe-column field="monitorName" title="监测点名称">
<template #default="{ row }">
<span class="table_name">
{{ row.monitorName }}
</span>
</template>
</vxe-column>
<vxe-column field="monitorName" title="监测点名称"></vxe-column>
<vxe-column field="manufacturer" title="终端厂家"></vxe-column>
<vxe-column field="devName" title="所属终端名称">
<template #default="{ row }">
<span class="table_name">
{{ row.devName }}
</span>
</template>
</vxe-column>
<vxe-column field="devName" title="所属终端名称"></vxe-column>
<vxe-column field="ip" title="IP">
<template #default="{ row }">
{{ decryptFromBase64(row.ip) }}
</template>
</vxe-column>
<vxe-column field="stationName" title="所属电站">
<template #default="{ row }">
<span class="table_name">
{{ row.stationName }}
</span>
</template>
</vxe-column>
<vxe-column field="stationName" title="所属电站"></vxe-column>
<vxe-column field="objType" title="监测对象类型" :formatter="formatter"></vxe-column>
<vxe-column field="objName" title="监测对象名称" :formatter="formatter"></vxe-column>
<vxe-column field="voltageLevel" title="电压等级"></vxe-column>
@@ -630,7 +612,6 @@ provide('tableStore', tableStore)
:deep(.table_name) {
color: var(--el-color-primary);
cursor: pointer;
text-decoration: underline;
text-underline-offset: 4px;
}
.echartTitle {

View File

@@ -148,11 +148,11 @@ const info = () => {
}
const ratingColor = (num: number) => {
if (num >= 90) {
return '#0fff04'
return '#19A094'
} else if (num >= 80) {
return '#2b7fd3'
} else if (num >= 70) {
return '#ffcc33'
return '#ff8c00'
} else {
return '#97017e'
}

View File

@@ -83,7 +83,7 @@ const ratingColor = (num: number) => {
} else if (num >= 80) {
return '#2b7fd3'
} else if (num >= 70) {
return '#ffcc33'
return '#ff8c00'
} else {
return '#97017e'
}

View File

@@ -47,7 +47,7 @@
 90% 在线率 < 95
</div>
<div class="em2">
<span style="color: #ffcc33">一般</span>
<span style="color: #ff8c00">一般</span>
 80% 在线率 < 90%
</div>
<div class="em2">
@@ -68,7 +68,7 @@
 95% 完整性 < 98%
</div>
<div class="em2">
<span style="color: #ffcc33">一般</span>
<span style="color: #ff8c00">一般</span>
 90% 完整性 < 95%
</div>
<div class="em2">
@@ -89,7 +89,7 @@
 95% 完整性 < 98%
</div>
<div class="em2">
<span style="color: #ffcc33">一般</span>
<span style="color: #ff8c00">一般</span>
 90% 完整性 < 95%
</div>
<div class="em2">
@@ -112,7 +112,7 @@
 80 综合评分 < 90
</div>
<div class="em2">
<span style="color: #ffcc33">一般</span>
<span style="color: #ff8c00">一般</span>
 70 综合评分 < 80
</div>
<div class="em2">

View File

@@ -13,7 +13,7 @@
/>
</el-col>
<el-col :span="12">
<my-echart class="tall" :options="echartList" />
<my-echart class="tall pt10" :options="echartList" />
<div class="tall">
<vxe-table
height="auto"