添加echart地图
This commit is contained in:
1
src/assets/map/丹东.json
Normal file
1
src/assets/map/丹东.json
Normal file
File diff suppressed because one or more lines are too long
1
src/assets/map/大连.json
Normal file
1
src/assets/map/大连.json
Normal file
File diff suppressed because one or more lines are too long
1
src/assets/map/抚顺.json
Normal file
1
src/assets/map/抚顺.json
Normal file
File diff suppressed because one or more lines are too long
1
src/assets/map/朝阳.json
Normal file
1
src/assets/map/朝阳.json
Normal file
File diff suppressed because one or more lines are too long
1
src/assets/map/本溪.json
Normal file
1
src/assets/map/本溪.json
Normal file
File diff suppressed because one or more lines are too long
1
src/assets/map/沈阳.json
Normal file
1
src/assets/map/沈阳.json
Normal file
File diff suppressed because one or more lines are too long
1
src/assets/map/盘锦.json
Normal file
1
src/assets/map/盘锦.json
Normal file
File diff suppressed because one or more lines are too long
1
src/assets/map/营口.json
Normal file
1
src/assets/map/营口.json
Normal file
File diff suppressed because one or more lines are too long
1
src/assets/map/葫芦岛.json
Normal file
1
src/assets/map/葫芦岛.json
Normal file
File diff suppressed because one or more lines are too long
1
src/assets/map/辽阳.json
Normal file
1
src/assets/map/辽阳.json
Normal file
File diff suppressed because one or more lines are too long
1
src/assets/map/铁岭.json
Normal file
1
src/assets/map/铁岭.json
Normal file
File diff suppressed because one or more lines are too long
1
src/assets/map/锦州.json
Normal file
1
src/assets/map/锦州.json
Normal file
File diff suppressed because one or more lines are too long
1
src/assets/map/阜新.json
Normal file
1
src/assets/map/阜新.json
Normal file
File diff suppressed because one or more lines are too long
1
src/assets/map/鞍山.json
Normal file
1
src/assets/map/鞍山.json
Normal file
File diff suppressed because one or more lines are too long
@@ -385,8 +385,9 @@ const histogram = (res: any) => {
|
|||||||
|
|
||||||
// 定制显示(按顺序)
|
// 定制显示(按顺序)
|
||||||
color: function (params) {
|
color: function (params) {
|
||||||
if (params.value == 0 || params.value == 0.14159) {
|
if (params.value == 0.14159) {
|
||||||
return '#ccc'
|
} else if (params.value == 0) {
|
||||||
|
return '#339966'
|
||||||
} else if (params.value > 2) {
|
} else if (params.value > 2) {
|
||||||
return new echarts.graphic.LinearGradient(
|
return new echarts.graphic.LinearGradient(
|
||||||
0,
|
0,
|
||||||
|
|||||||
@@ -37,9 +37,9 @@
|
|||||||
<span class="divBox_num" style="color: #57bc6e">{{ monitoringPoints.runNum }}</span>
|
<span class="divBox_num" style="color: #57bc6e">{{ monitoringPoints.runNum }}</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="divBox" style="width: 200px">
|
<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_title">告警测点数</span>
|
||||||
<span class="divBox_num" style="color: #FFBF00">
|
<span class="divBox_num" style="color: #ffbf00">
|
||||||
{{ monitoringPoints.abnormalNum }}
|
{{ monitoringPoints.abnormalNum }}
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
@@ -138,33 +138,15 @@
|
|||||||
</span>
|
</span>
|
||||||
</template>
|
</template>
|
||||||
</vxe-column>
|
</vxe-column>
|
||||||
<vxe-column field="monitorName" title="监测点名称">
|
<vxe-column field="monitorName" title="监测点名称"></vxe-column>
|
||||||
<template #default="{ row }">
|
|
||||||
<span class="table_name">
|
|
||||||
{{ row.monitorName }}
|
|
||||||
</span>
|
|
||||||
</template>
|
|
||||||
</vxe-column>
|
|
||||||
<vxe-column field="manufacturer" title="终端厂家"></vxe-column>
|
<vxe-column field="manufacturer" title="终端厂家"></vxe-column>
|
||||||
<vxe-column field="devName" title="所属终端名称">
|
<vxe-column field="devName" title="所属终端名称"></vxe-column>
|
||||||
<template #default="{ row }">
|
|
||||||
<span class="table_name">
|
|
||||||
{{ row.devName }}
|
|
||||||
</span>
|
|
||||||
</template>
|
|
||||||
</vxe-column>
|
|
||||||
<vxe-column field="ip" title="IP">
|
<vxe-column field="ip" title="IP">
|
||||||
<template #default="{ row }">
|
<template #default="{ row }">
|
||||||
{{ decryptFromBase64(row.ip) }}
|
{{ decryptFromBase64(row.ip) }}
|
||||||
</template>
|
</template>
|
||||||
</vxe-column>
|
</vxe-column>
|
||||||
<vxe-column field="stationName" title="所属电站">
|
<vxe-column field="stationName" title="所属电站"></vxe-column>
|
||||||
<template #default="{ row }">
|
|
||||||
<span class="table_name">
|
|
||||||
{{ row.stationName }}
|
|
||||||
</span>
|
|
||||||
</template>
|
|
||||||
</vxe-column>
|
|
||||||
<vxe-column field="objType" title="监测对象类型" :formatter="formatter"></vxe-column>
|
<vxe-column field="objType" title="监测对象类型" :formatter="formatter"></vxe-column>
|
||||||
<vxe-column field="objName" title="监测对象名称" :formatter="formatter"></vxe-column>
|
<vxe-column field="objName" title="监测对象名称" :formatter="formatter"></vxe-column>
|
||||||
<vxe-column field="voltageLevel" title="电压等级"></vxe-column>
|
<vxe-column field="voltageLevel" title="电压等级"></vxe-column>
|
||||||
@@ -281,7 +263,7 @@ const echart = () => {
|
|||||||
],
|
],
|
||||||
|
|
||||||
series: [
|
series: [
|
||||||
{
|
{
|
||||||
name: '告警总数',
|
name: '告警总数',
|
||||||
type: 'bar',
|
type: 'bar',
|
||||||
barWidth: 12,
|
barWidth: 12,
|
||||||
@@ -312,7 +294,7 @@ const echart = () => {
|
|||||||
type: 'bar',
|
type: 'bar',
|
||||||
barWidth: 13,
|
barWidth: 13,
|
||||||
data: [
|
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)
|
: ((monitoringPoints.value.abnormalNum / monitoringPoints.value.runNum) * 100).toFixed(2)
|
||||||
],
|
],
|
||||||
@@ -584,7 +566,7 @@ provide('tableStore', tableStore)
|
|||||||
:deep(.table_name) {
|
:deep(.table_name) {
|
||||||
color: var(--el-color-primary);
|
color: var(--el-color-primary);
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
text-decoration: underline;
|
|
||||||
text-underline-offset: 4px;
|
text-underline-offset: 4px;
|
||||||
}
|
}
|
||||||
.echartTitle {
|
.echartTitle {
|
||||||
@@ -594,7 +576,7 @@ provide('tableStore', tableStore)
|
|||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
div:nth-child(2) {
|
div:nth-child(2) {
|
||||||
font-size: 16px;
|
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%);
|
clip-path: polygon(4% 0, 100% 0, 96% 100%, 0 100%);
|
||||||
}
|
}
|
||||||
.text-red {
|
.text-red {
|
||||||
color: #FFBF00 !important;
|
color: #ffbf00 !important;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
text-decoration: underline;
|
text-decoration: underline;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,5 +1,5 @@
|
|||||||
<template>
|
<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="display: flex">
|
||||||
<div :style="height1" class="mr10 box" style="width: 450px">
|
<div :style="height1" class="mr10 box" style="width: 450px">
|
||||||
<vxe-table
|
<vxe-table
|
||||||
@@ -17,7 +17,7 @@
|
|||||||
</vxe-table>
|
</vxe-table>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div :style="height" style="width: 720px" v-loading="loading1">
|
<div :style="height" style="width: 820px" v-loading="loading1">
|
||||||
<vxe-table
|
<vxe-table
|
||||||
height="auto"
|
height="auto"
|
||||||
:data="TableData1.slice((pageNum - 1) * pageSize, pageNum * pageSize)"
|
:data="TableData1.slice((pageNum - 1) * pageSize, pageNum * pageSize)"
|
||||||
@@ -28,13 +28,13 @@
|
|||||||
<span>{{ (pageNum - 1) * pageSize + rowIndex + 1 }}</span>
|
<span>{{ (pageNum - 1) * pageSize + rowIndex + 1 }}</span>
|
||||||
</template>
|
</template>
|
||||||
</vxe-column>
|
</vxe-column>
|
||||||
<vxe-column field="time" title="时间" :formatter="formatter" width="150px"></vxe-column>
|
<vxe-column field="time" title="时间" :formatter="formatter" ></vxe-column>
|
||||||
<vxe-column
|
<vxe-column
|
||||||
field="targetName"
|
field="targetName"
|
||||||
title="指标类型"
|
title="指标类型"
|
||||||
min-width="100px"
|
min-width="100px"
|
||||||
></vxe-column>
|
></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="type" title="数据类型" width="105px" :formatter="formatter"></vxe-column>
|
||||||
<vxe-column field="val" title="值" width="85px" :formatter="formatter"></vxe-column>
|
<vxe-column field="val" title="值" width="85px" :formatter="formatter"></vxe-column>
|
||||||
|
|||||||
@@ -162,33 +162,15 @@
|
|||||||
</span>
|
</span>
|
||||||
</template>
|
</template>
|
||||||
</vxe-column>
|
</vxe-column>
|
||||||
<vxe-column field="monitorName" title="监测点名称">
|
<vxe-column field="monitorName" title="监测点名称"></vxe-column>
|
||||||
<template #default="{ row }">
|
|
||||||
<span class="table_name">
|
|
||||||
{{ row.monitorName }}
|
|
||||||
</span>
|
|
||||||
</template>
|
|
||||||
</vxe-column>
|
|
||||||
<vxe-column field="manufacturer" title="终端厂家"></vxe-column>
|
<vxe-column field="manufacturer" title="终端厂家"></vxe-column>
|
||||||
<vxe-column field="devName" title="所属终端名称">
|
<vxe-column field="devName" title="所属终端名称"></vxe-column>
|
||||||
<template #default="{ row }">
|
|
||||||
<span class="table_name">
|
|
||||||
{{ row.devName }}
|
|
||||||
</span>
|
|
||||||
</template>
|
|
||||||
</vxe-column>
|
|
||||||
<vxe-column field="ip" title="IP">
|
<vxe-column field="ip" title="IP">
|
||||||
<template #default="{ row }">
|
<template #default="{ row }">
|
||||||
{{ decryptFromBase64(row.ip) }}
|
{{ decryptFromBase64(row.ip) }}
|
||||||
</template>
|
</template>
|
||||||
</vxe-column>
|
</vxe-column>
|
||||||
<vxe-column field="stationName" title="所属电站">
|
<vxe-column field="stationName" title="所属电站"></vxe-column>
|
||||||
<template #default="{ row }">
|
|
||||||
<span class="table_name">
|
|
||||||
{{ row.stationName }}
|
|
||||||
</span>
|
|
||||||
</template>
|
|
||||||
</vxe-column>
|
|
||||||
<vxe-column field="objType" title="监测对象类型" :formatter="formatter"></vxe-column>
|
<vxe-column field="objType" title="监测对象类型" :formatter="formatter"></vxe-column>
|
||||||
<vxe-column field="objName" title="监测对象名称" :formatter="formatter"></vxe-column>
|
<vxe-column field="objName" title="监测对象名称" :formatter="formatter"></vxe-column>
|
||||||
<vxe-column field="voltageLevel" title="电压等级"></vxe-column>
|
<vxe-column field="voltageLevel" title="电压等级"></vxe-column>
|
||||||
@@ -630,7 +612,6 @@ provide('tableStore', tableStore)
|
|||||||
:deep(.table_name) {
|
:deep(.table_name) {
|
||||||
color: var(--el-color-primary);
|
color: var(--el-color-primary);
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
text-decoration: underline;
|
|
||||||
text-underline-offset: 4px;
|
text-underline-offset: 4px;
|
||||||
}
|
}
|
||||||
.echartTitle {
|
.echartTitle {
|
||||||
|
|||||||
@@ -148,11 +148,11 @@ const info = () => {
|
|||||||
}
|
}
|
||||||
const ratingColor = (num: number) => {
|
const ratingColor = (num: number) => {
|
||||||
if (num >= 90) {
|
if (num >= 90) {
|
||||||
return '#0fff04'
|
return '#19A094'
|
||||||
} else if (num >= 80) {
|
} else if (num >= 80) {
|
||||||
return '#2b7fd3'
|
return '#2b7fd3'
|
||||||
} else if (num >= 70) {
|
} else if (num >= 70) {
|
||||||
return '#ffcc33'
|
return '#ff8c00'
|
||||||
} else {
|
} else {
|
||||||
return '#97017e'
|
return '#97017e'
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -83,7 +83,7 @@ const ratingColor = (num: number) => {
|
|||||||
} else if (num >= 80) {
|
} else if (num >= 80) {
|
||||||
return '#2b7fd3'
|
return '#2b7fd3'
|
||||||
} else if (num >= 70) {
|
} else if (num >= 70) {
|
||||||
return '#ffcc33'
|
return '#ff8c00'
|
||||||
} else {
|
} else {
|
||||||
return '#97017e'
|
return '#97017e'
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -47,7 +47,7 @@
|
|||||||
90% ≤ 在线率 < 95
|
90% ≤ 在线率 < 95
|
||||||
</div>
|
</div>
|
||||||
<div class="em2">
|
<div class="em2">
|
||||||
<span style="color: #ffcc33">一般</span>
|
<span style="color: #ff8c00">一般</span>
|
||||||
80% ≤ 在线率 < 90%
|
80% ≤ 在线率 < 90%
|
||||||
</div>
|
</div>
|
||||||
<div class="em2">
|
<div class="em2">
|
||||||
@@ -68,7 +68,7 @@
|
|||||||
95% ≤ 完整性 < 98%
|
95% ≤ 完整性 < 98%
|
||||||
</div>
|
</div>
|
||||||
<div class="em2">
|
<div class="em2">
|
||||||
<span style="color: #ffcc33">一般</span>
|
<span style="color: #ff8c00">一般</span>
|
||||||
90% ≤ 完整性 < 95%
|
90% ≤ 完整性 < 95%
|
||||||
</div>
|
</div>
|
||||||
<div class="em2">
|
<div class="em2">
|
||||||
@@ -89,7 +89,7 @@
|
|||||||
95% ≤ 完整性 < 98%
|
95% ≤ 完整性 < 98%
|
||||||
</div>
|
</div>
|
||||||
<div class="em2">
|
<div class="em2">
|
||||||
<span style="color: #ffcc33">一般</span>
|
<span style="color: #ff8c00">一般</span>
|
||||||
90% ≤ 完整性 < 95%
|
90% ≤ 完整性 < 95%
|
||||||
</div>
|
</div>
|
||||||
<div class="em2">
|
<div class="em2">
|
||||||
@@ -112,7 +112,7 @@
|
|||||||
80 ≤ 综合评分 < 90
|
80 ≤ 综合评分 < 90
|
||||||
</div>
|
</div>
|
||||||
<div class="em2">
|
<div class="em2">
|
||||||
<span style="color: #ffcc33">一般</span>
|
<span style="color: #ff8c00">一般</span>
|
||||||
70 ≤ 综合评分 < 80
|
70 ≤ 综合评分 < 80
|
||||||
</div>
|
</div>
|
||||||
<div class="em2">
|
<div class="em2">
|
||||||
|
|||||||
@@ -13,7 +13,7 @@
|
|||||||
/>
|
/>
|
||||||
</el-col>
|
</el-col>
|
||||||
<el-col :span="12">
|
<el-col :span="12">
|
||||||
<my-echart class="tall" :options="echartList" />
|
<my-echart class="tall pt10" :options="echartList" />
|
||||||
<div class="tall">
|
<div class="tall">
|
||||||
<vxe-table
|
<vxe-table
|
||||||
height="auto"
|
height="auto"
|
||||||
|
|||||||
Reference in New Issue
Block a user