联调终端运行评价

This commit is contained in:
GGJ
2025-05-13 15:26:24 +08:00
parent 363c05639b
commit 325aa7d56e
29 changed files with 910 additions and 2075 deletions

View File

@@ -0,0 +1,34 @@
import request from '@/utils/request'
// 终端运行评价
export function getRunEvaluate(data: any) {
return request({
url: '/device-boot/deviceRunEvaluate/getRunEvaluate',
method: 'post',
data
})
}
// 异常终端详情
export function getRunEvaluateDetail(data: any) {
return request({
url: '/device-boot/deviceRunEvaluate/getRunEvaluateDetail',
method: 'post',
data
})
}
// 根据部门获取不同层级的终端信息
export function areaTerminalStatistic(data: any) {
return request({
url: '/device-boot/deviceRunEvaluate/areaTerminalStatistic',
method: 'post',
data
})
}
// 最近一周终端评价趋势
export function lastWeekTrend(data: any) {
return request({
url: '/device-boot/deviceRunEvaluate/lastWeekTrend',
method: 'post',
data
})
}

View File

@@ -65,8 +65,8 @@ const initChart = () => {
borderWidth: 0,
confine: true,
formatter: function (params: any) {
let tips = `<strong>${params[0].name}</strong></br>` // 标题加粗
params.forEach((item: any) => {
let tips = `<strong>${params[0]?.name}</strong></br>` // 标题加粗
params?.forEach((item: any) => {
const value = item.value === 3.14159 ? '暂无数据' : Math.round(item.value * 100) / 100 // 处理特殊值
tips += `<div style=" display: flex;justify-content: space-between;">
<span>${item.marker}

View File

@@ -34,13 +34,23 @@ import { setupFormCreate } from '@/plugins/formCreate'
const setupAll = async () => {
const app = createApp(App)
// //开启离线地图
//开启离线地图
app.use(BaiduMapOffline, {
offline: true,
// offlineUrl:'http://sjzx:8088/map/' //window.location.origin + '/map/'
offlineConfig: {
imgext: '.png',
customstyle: '',
tiles_dir: '',
tiles_hybrid: '',
tiles_self: '',
tiles_v_dir: '',
tiles_satellite_dir: '',
tiles_road_dir: '',
tiles_v_road_dir: '',
home: './plugin/offline/'
}
})
app.use(BaiduMap, {
offline: true,
// ak: 'Yp57V71dkOPiXjiN8VdcFRsVELzlVNKK',
ak: 'RpQi6WNFZ9tseKzhdwOQsXwFsoVntnsN',
v: '3.0'

View File

@@ -36,6 +36,21 @@
:value="item"
></el-option>
</el-select>
</el-form-item>
<el-form-item label="电网侧标识">
<el-select
v-model="tableStore.table.params.powerFlag"
clearable
style="width: 100%"
placeholder="请选择电网侧标识"
>
<el-option
v-for="item in powerFlagList"
:key="item.id"
:label="item.name"
:value="item.algoDescribe"
></el-option>
</el-select>
</el-form-item>
<el-form-item label="终端厂家:">
<el-select
@@ -116,6 +131,8 @@ const terminaloption = dictData.getBasicData('Dev_Manufacturers')
const interfereoption = dictData.getBasicData('Interference_Source')
//字典获取统计类型
const classificationData = dictData.getBasicData('Statistical_Type', ['Report_Type'])
//字典获取监督对象类型
const powerFlagList = dictData.getBasicData('power_flag')
//调用区域接口获取区域
const treeData = ref([])
const idArr = ref([])
@@ -211,6 +228,7 @@ tableStore.table.params.statisticalType = classificationData[0]
tableStore.table.params.scale = []
tableStore.table.params.manufacturer = []
tableStore.table.params.loadType = []
tableStore.table.params.powerFlag = 2
tableStore.table.params.serverName = 'harmonicBoot'
provide('tableStore', tableStore)
const tree2List = (list: any, id?: string) => {

View File

@@ -173,7 +173,7 @@ const tableStore = new TableStore({
tooltip: {
formatter: function (params: any) {
let tips = `<strong>${params[0].name}</strong></br>` // 标题加粗
let tips = `<strong>${params[0]?.name}</strong></br>` // 标题加粗
params.forEach((item: any) => {
const value = item.value === 3.14159 ? '暂无数据' : item.value // 处理特殊值
tips += `<div style=" display: flex;justify-content: space-between;">

View File

@@ -1,42 +1,78 @@
<template>
<div class="default-main">
<TableHeader datePicker area showExport>
<template #select>
<el-form-item label="统计类型:">
<el-select v-model="tableStore.table.params.statisticalType" placeholder="请选择统计类型" value-key="id">
<el-option v-for="item in classificationData" :key="item.id" :label="item.name" :value="item">
</el-option>
<el-select
v-model="tableStore.table.params.statisticalType"
placeholder="请选择统计类型"
value-key="id"
>
<el-option
v-for="item in classificationData"
:key="item.id"
:label="item.name"
:value="item"
></el-option>
</el-select>
</el-form-item>
<el-form-item label="电压等级:">
<el-select v-model="tableStore.table.params.scale" filterable multiple collapse-tags clearable
placeholder="请选择电压等级" value-key="id">
<el-option v-for="item in voltageleveloption" :key="item.id" :label="item.name" :value="item">
</el-option>
<el-select
v-model="tableStore.table.params.scale"
filterable
multiple
collapse-tags
clearable
placeholder="请选择电压等级"
value-key="id"
>
<el-option
v-for="item in voltageleveloption"
:key="item.id"
:label="item.name"
:value="item"
></el-option>
</el-select>
</el-form-item>
<el-form-item label="终端厂家:">
<el-select v-model="tableStore.table.params.manufacturer" filterable multiple collapse-tags
clearable placeholder="请选择终端厂家" value-key="id">
<el-option v-for="item in terminaloption" :key="item.id" :label="item.name" :value="item">
</el-option>
<el-select
v-model="tableStore.table.params.manufacturer"
filterable
multiple
collapse-tags
clearable
placeholder="请选择终端厂家"
value-key="id"
>
<el-option
v-for="item in terminaloption"
:key="item.id"
:label="item.name"
:value="item"
></el-option>
</el-select>
</el-form-item>
<el-form-item label="干扰源类型:">
<el-select v-model="tableStore.table.params.loadType" filterable multiple collapse-tags clearable
placeholder="请选择干扰源类型" value-key="id">
<el-option v-for="item in interfereoption" :key="item.id" :label="item.name" :value="item">
</el-option>
<el-select
v-model="tableStore.table.params.loadType"
filterable
multiple
collapse-tags
clearable
placeholder="请选择干扰源类型"
value-key="id"
>
<el-option
v-for="item in interfereoption"
:key="item.id"
:label="item.name"
:value="item"
></el-option>
</el-select>
</el-form-item>
</template>
</TableHeader>
<Table ref="tableRef" isGroup :key="num" />
</div>
</template>
<script setup lang="ts">
@@ -50,7 +86,7 @@ defineOptions({
name: 'harmonic-boot/detailedAnalysis/contrast'
})
const view = ref(true)
const classificationData = dictData.getBasicData('Statistical_Type', ["Report_Type"])
const classificationData = dictData.getBasicData('Statistical_Type', ['Report_Type'])
const voltageleveloption = dictData.getBasicData('Dev_Voltage_Stand')
const terminaloption = dictData.getBasicData('Dev_Manufacturers')
const interfereoption = dictData.getBasicData('Interference_Source')
@@ -62,88 +98,279 @@ const tableStore = new TableStore({
method: 'POST',
isWebPaging: true,
column: [
{ field: 'index', title: '序号', width: '80', formatter: (row: any) => { return (tableStore.table.params.pageNum - 1) * tableStore.table.params.pageSize + row.rowIndex + 1 } },
{ field: 'name', title: '电网拓扑', minWidth: '150', },
{ field: 'onlineMonitorNumber', title: '在线监测点数量(个)', minWidth: "200px", formatter: (row: any) => { return row.cellValue == -1 ? '/' : row.cellValue } },
{ field: 'overLimitMonitorNumber', title: '超标监测点数量(个)', minWidth: "200px", formatter: (row: any) => { return row.cellValue == -1 ? '/' : row.cellValue } },
{ field: 'overBiLi', title: '超标监测点占比(个)', minWidth: "200px", formatter: (row: any) => { return row.cellValue == -1 ? '/' : row.cellValue } },
{
field: 'index',
title: '序号',
width: '80',
formatter: (row: any) => {
return (tableStore.table.params.pageNum - 1) * tableStore.table.params.pageSize + row.rowIndex + 1
}
},
{ field: 'name', title: '电网拓扑', minWidth: '150' },
{
field: 'onlineMonitorNumber',
title: '在线监测点数量(个)',
minWidth: '200px',
formatter: (row: any) => {
return row.cellValue == -1 ? '/' : row.cellValue
}
},
{
field: 'overLimitMonitorNumber',
title: '超标监测点数量(个)',
minWidth: '200px',
formatter: (row: any) => {
return row.cellValue == -1 ? '/' : row.cellValue
}
},
{
field: 'overBiLi',
title: '超标监测点占比(%)',
minWidth: '200px',
formatter: (row: any) => {
return row.cellValue == -1 ? '/' : row.cellValue
}
},
{
title: '频率偏差超标情况',
children: [
{ field: 'frequencyMonitorNumber', title: '超标点数(个)', minWidth: "200px", formatter: (row: any) => { return row.cellValue == -1 ? '/' : row.cellValue } },
{ field: 'frequencyBiLi', title: '超标占比(%)', minWidth: '120px', formatter: (row: any) => { return row.cellValue == -1 ? '/' : row.cellValue } },
{ field: 'frequencyOverDayBiLi', title: '平均超标数(天/点)', minWidth: "200px", formatter: (row: any) => { return row.cellValue == -1 ? '/' : row.cellValue } },
],
{
field: 'frequencyMonitorNumber',
title: '超标数(天/点)',
minWidth: '200px',
formatter: (row: any) => {
return row.cellValue == -1 ? '/' : row.cellValue
}
},
{
field: 'frequencyBiLi',
title: '超标占比(%)',
minWidth: '120px',
formatter: (row: any) => {
return row.cellValue == -1 ? '/' : row.cellValue
}
},
{
field: 'frequencyOverDayBiLi',
title: '平均超标天数(天/点)',
minWidth: '200px',
formatter: (row: any) => {
return row.cellValue == -1 ? '/' : row.cellValue
}
}
]
},
{
title: '电压偏差超标情况',
children: [
{ field: 'voltageMonitorNumber', title: '超标点数(个)', minWidth: "200px", formatter: (row: any) => { return row.cellValue == -1 ? '/' : row.cellValue } },
{ field: 'voltageBiLi', title: '超标占比(%)', minWidth: '120px', formatter: (row: any) => { return row.cellValue == -1 ? '/' : row.cellValue } },
{ field: 'voltageOverDayBiLi', title: '平均超标数(天/点)', minWidth: "200px", formatter: (row: any) => { return row.cellValue == -1 ? '/' : row.cellValue } },
],
{
field: 'voltageMonitorNumber',
title: '超标数(天/点)',
minWidth: '200px',
formatter: (row: any) => {
return row.cellValue == -1 ? '/' : row.cellValue
}
},
{
field: 'voltageBiLi',
title: '超标占比(%)',
minWidth: '120px',
formatter: (row: any) => {
return row.cellValue == -1 ? '/' : row.cellValue
}
},
{
field: 'voltageOverDayBiLi',
title: '平均超标天数(天/点)',
minWidth: '200px',
formatter: (row: any) => {
return row.cellValue == -1 ? '/' : row.cellValue
}
}
]
},
{
title: '谐波电压超标情况',
children: [
{ field: 'harmonicVoltageMonitorNumber', title: '超标点数(个)', minWidth: "200px", formatter: (row: any) => { return row.cellValue == -1 ? '/' : row.cellValue } },
{ field: 'harmonicVoltageBiLi', title: '超标占比(%)', minWidth: '120px', formatter: (row: any) => { return row.cellValue == -1 ? '/' : row.cellValue } },
{ field: 'harmonicVoltageOverDayBiLi', title: '平均超标数(天/点)', minWidth: "200px", formatter: (row: any) => { return row.cellValue == -1 ? '/' : row.cellValue } },
],
{
field: 'harmonicVoltageMonitorNumber',
title: '超标数(天/点)',
minWidth: '200px',
formatter: (row: any) => {
return row.cellValue == -1 ? '/' : row.cellValue
}
},
{
field: 'harmonicVoltageBiLi',
title: '超标占比(%)',
minWidth: '120px',
formatter: (row: any) => {
return row.cellValue == -1 ? '/' : row.cellValue
}
},
{
field: 'harmonicVoltageOverDayBiLi',
title: '平均超标天数(天/点)',
minWidth: '200px',
formatter: (row: any) => {
return row.cellValue == -1 ? '/' : row.cellValue
}
}
]
},
{
title: '谐波电流超标情况',
children: [
{ field: 'harmonicCurrentMonitorNumber', title: '超标点数(个)', minWidth: "200px", formatter: (row: any) => { return row.cellValue == -1 ? '/' : row.cellValue } },
{ field: 'harmonicCurrentBiLi', title: '超标占比(%)', minWidth: '120px', formatter: (row: any) => { return row.cellValue == -1 ? '/' : row.cellValue } },
{ field: 'harmonicCurrentOverDayBiLi', title: '平均超标数(天/点)', minWidth: "200px", formatter: (row: any) => { return row.cellValue == -1 ? '/' : row.cellValue } },
],
{
field: 'harmonicCurrentMonitorNumber',
title: '超标数(天/点)',
minWidth: '200px',
formatter: (row: any) => {
return row.cellValue == -1 ? '/' : row.cellValue
}
},
{
field: 'harmonicCurrentBiLi',
title: '超标占比(%)',
minWidth: '120px',
formatter: (row: any) => {
return row.cellValue == -1 ? '/' : row.cellValue
}
},
{
field: 'harmonicCurrentOverDayBiLi',
title: '平均超标天数(天/点)',
minWidth: '200px',
formatter: (row: any) => {
return row.cellValue == -1 ? '/' : row.cellValue
}
}
]
},
{
title: '三相电压不平衡度超标情况',
children: [
{ field: 'threePhaseVoltageMonitorNumber', title: '超标点数(个)', minWidth: "200px", formatter: (row: any) => { return row.cellValue == -1 ? '/' : row.cellValue } },
{ field: 'threePhaseVoltageBiLi', title: '超标占比(%)', minWidth: '120px', formatter: (row: any) => { return row.cellValue == -1 ? '/' : row.cellValue } },
{ field: 'threePhaseVoltageOverDayBiLi', title: '平均超标数(天/点)', minWidth: "200px", formatter: (row: any) => { return row.cellValue == -1 ? '/' : row.cellValue } },
],
{
field: 'threePhaseVoltageMonitorNumber',
title: '超标数(天/点)',
minWidth: '200px',
formatter: (row: any) => {
return row.cellValue == -1 ? '/' : row.cellValue
}
},
{
field: 'threePhaseVoltageBiLi',
title: '超标占比(%)',
minWidth: '120px',
formatter: (row: any) => {
return row.cellValue == -1 ? '/' : row.cellValue
}
},
{
field: 'threePhaseVoltageOverDayBiLi',
title: '平均超标天数(天/点)',
minWidth: '200px',
formatter: (row: any) => {
return row.cellValue == -1 ? '/' : row.cellValue
}
}
]
},
{
title: '闪变超标情况',
children: [
{ field: 'flickerMonitorNumber', title: '超标点数(个)', minWidth: "200px", formatter: (row: any) => { return row.cellValue == -1 ? '/' : row.cellValue } },
{ field: 'flickerBiLi', title: '超标占比(%)', minWidth: '120px', formatter: (row: any) => { return row.cellValue == -1 ? '/' : row.cellValue } },
{ field: 'flickerOverDayBiLi', title: '平均超标数(天/点)', minWidth: "200px", formatter: (row: any) => { return row.cellValue == -1 ? '/' : row.cellValue } },
],
{
field: 'flickerMonitorNumber',
title: '超标数(天/点)',
minWidth: '200px',
formatter: (row: any) => {
return row.cellValue == -1 ? '/' : row.cellValue
}
},
{
field: 'flickerBiLi',
title: '超标占比(%)',
minWidth: '120px',
formatter: (row: any) => {
return row.cellValue == -1 ? '/' : row.cellValue
}
},
{
field: 'flickerOverDayBiLi',
title: '平均超标天数(天/点)',
minWidth: '200px',
formatter: (row: any) => {
return row.cellValue == -1 ? '/' : row.cellValue
}
}
]
},
{
title: '负序电流超标情况',
children: [
{ field: 'negativeMonitorNumber', title: '超标点数(个)', minWidth: "200px", formatter: (row: any) => { return row.cellValue == -1 ? '/' : row.cellValue } },
{ field: 'negativeBiLi', title: '超标占比(%)', minWidth: '120px', formatter: (row: any) => { return row.cellValue == -1 ? '/' : row.cellValue } },
{ field: 'negativeOverDayBiLi', title: '平均超标数(天/点)', minWidth: "200px", formatter: (row: any) => { return row.cellValue == -1 ? '/' : row.cellValue } },
],
{
field: 'negativeMonitorNumber',
title: '超标数(天/点)',
minWidth: '200px',
formatter: (row: any) => {
return row.cellValue == -1 ? '/' : row.cellValue
}
},
{
field: 'negativeBiLi',
title: '超标占比(%)',
minWidth: '120px',
formatter: (row: any) => {
return row.cellValue == -1 ? '/' : row.cellValue
}
},
{
field: 'negativeOverDayBiLi',
title: '平均超标天数(天/点)',
minWidth: '200px',
formatter: (row: any) => {
return row.cellValue == -1 ? '/' : row.cellValue
}
}
]
},
{
title: '间谐波电压超标情况',
children: [
{ field: 'interHarmonicMonitorNumber', title: '超标点数(个)', minWidth: "200px", formatter: (row: any) => { return row.cellValue == -1 ? '/' : row.cellValue } },
{ field: 'interHarmonicBiLi', title: '超标占比(%)', minWidth: '120px', formatter: (row: any) => { return row.cellValue == -1 ? '/' : row.cellValue } },
{ field: 'interHarmonicOverDayBiLi', title: '平均超标数(天/点)', minWidth: "200px", formatter: (row: any) => { return row.cellValue == -1 ? '/' : row.cellValue } },
],
{
field: 'interHarmonicMonitorNumber',
title: '超标数(天/点)',
minWidth: '200px',
formatter: (row: any) => {
return row.cellValue == -1 ? '/' : row.cellValue
}
},
{
field: 'interHarmonicBiLi',
title: '超标占比(%)',
minWidth: '120px',
formatter: (row: any) => {
return row.cellValue == -1 ? '/' : row.cellValue
}
},
{
field: 'interHarmonicOverDayBiLi',
title: '平均超标天数(天/点)',
minWidth: '200px',
formatter: (row: any) => {
return row.cellValue == -1 ? '/' : row.cellValue
}
}
]
}
],
beforeSearchFun: () => {
tableStore.options.column[1].title = tableStore.table.params.statisticalType.name
num.value += 1
},
}
})
tableStore.table.params.statisticalType = classificationData[0]
tableStore.table.params.serverName = "harmonic-boot"
tableStore.table.params.serverName = 'harmonic-boot'
tableStore.table.params.powerFlag = 2
tableStore.table.params.monitorFlag = 2
tableStore.table.params.scale = []
@@ -155,9 +382,4 @@ provide('tableStore', tableStore)
onMounted(() => {
tableStore.index()
})
</script>

View File

@@ -87,15 +87,15 @@ const init = () => {
let yData = [],
yData2 = []
for (let i = 0; i < steadyInfoList.length; i++) {
if (steadyInfoList[i] == 3.1415) {
steadyInfoList[i] = 1
// if (steadyInfoList[i] == 3.1415) {
// steadyInfoList[i] = 1
// yData.push(steadyInfoList[i])
// } else if (steadyInfoList[i] == 3.14159) {
// steadyInfoList[i] = 1
// yData.push(steadyInfoList[i])
// } else if (steadyInfoList[i] !== 3.14159) {
yData.push(steadyInfoList[i])
} else if (steadyInfoList[i] == 3.14159) {
steadyInfoList[i] = 1
yData.push(steadyInfoList[i])
} else if (steadyInfoList[i] !== 3.14159) {
yData.push(steadyInfoList[i])
}
// }
}
for (let i = 0; i < steadyInfoData.length; i++) {
if (steadyInfoData[i] == 3.1415) {
@@ -169,6 +169,8 @@ const init = () => {
return gradeColor3[0]
} else if (params.value > 60) {
return gradeColor3[1]
} else if (params.value == 3.14159) {
return '#ccc'
} else {
return gradeColor3[2]
}
@@ -224,7 +226,7 @@ const init = () => {
opacity: 0.35,
fontSize: 14
},
backgroundColor: 'rgba(0,0,0,0.55)',
backgroundColor: 'rgba(0,0,0,0.55)'
// formatter: function (params: any) {
// //console.log(params)
// let msg = ''

View File

@@ -13,9 +13,17 @@
<div v-for="(item, i) in list" class="cardBox" :style="i == 1 ? 'flex:1.3' : ''">
<div class="card">
<span style="cursor: pointer" @click="GridDiagram(i)">{{ item.title }}</span>
<span :style="`color: ${item.color[0]}; cursor:pointer`"
@click="LookMap(item.list[4].numOneList, item.list[4].numTwoList, 0)">
{{ item.list[4].numOne }}
<span
:style="`color: ${item.color[0]}; cursor:pointer`"
@click="
LookMap(
item.list[item.list.length - 1].numOneList,
item.list[item.list.length - 1].numTwoList,
0
)
"
>
{{ item.list[item.list.length - 1]?.numOne }}
</span>
</div>
</div>
@@ -23,8 +31,10 @@
<!-- 监测规模 列表 -->
<div>
<div class="vcl mt5">
<p v-for="(item, i) in vList"
:style="i == 0 ? 'width: 60px' : i == 5 ? 'width: 32px' : 'flex:1'">
<p
v-for="(item, i) in vList"
:style="i == 0 ? 'width: 60px' : 'flex:1'"
>
{{ item }}
</p>
</div>
@@ -36,7 +46,14 @@
详情
</span> -->
</p>
<p class="numOne" @click="LookMap(item.list[0].numOneList, item.list[0].numTwoList, 0)">
<p
v-for="(k, i) in vList?.slice(0, vList.length - 1)"
class="numOne"
@click="LookMap(item.list[i].numOneList, item.list[i].numTwoList, 0)"
>
{{ item.list[i]?.numOne }}
</p>
<!-- <p class="numOne" @click="LookMap(item.list[0].numOneList, item.list[0].numTwoList, 0)">
{{ item.list[0].numOne }}
</p>
<p class="numOne" @click="LookMap(item.list[1].numOneList, item.list[1].numTwoList, 0)">
@@ -47,7 +64,7 @@
</p>
<p class="numOne" @click="LookMap(item.list[3].numOneList, item.list[3].numTwoList, 0)">
{{ item.list[3].numOne }}
</p>
</p> -->
<!-- <p
style="font-size: 12px; width: 32px; cursor: pointer; color: var(--el-color-primary)"
@click.stop="open(i)"
@@ -71,8 +88,11 @@
<img src="@/assets/img/TJ.png" />
{{ item.title }}
</div>
<div class="card-Box" :style="`height:calc((${boxHeight.height} - 50px )/ 3);`"
v-for="val in item.children">
<div
class="card-Box"
:style="`height:calc((${boxHeight.height} - 50px )/ 3);`"
v-for="val in item.children"
>
<div>
<span class="line"></span>
<span class="vol">{{ val.title }}</span>
@@ -129,8 +149,12 @@
</div>
</div>
<img class="imgL" :style="show ? 'transform: rotate(0deg);' : 'transform: rotate(180deg);'"
@click="show = !show" src="@/assets/img/QH.png" />
<img
class="imgL"
:style="show ? 'transform: rotate(0deg);' : 'transform: rotate(180deg);'"
@click="show = !show"
src="@/assets/img/QH.png"
/>
<!-- 变电站详情 -->
<stand ref="standRef" />
@@ -307,7 +331,8 @@ const linList: any = ref([
title: ['电能质量指标', '未超标', '超标']
}
])
const vList = ['', '500kV', '220kV', '110kV', '35kV',]
const panoramicVoltage: any = dictData.getBasicData('Dev_Voltage_Stand')
const vList =ref( ['', '500kV', '220kV', '110kV', '35kV'])
const formRow: any = ref({})
const height = mainHeight(30)
const boxHeight = mainHeight(290, 2)
@@ -335,10 +360,14 @@ const info = async (row: any) => {
}
countList.value[0].title = row.areaName
formRow.value = form
vList.value = ['']
// 变电站
getSubLineGiveAnAlarm(form).then(res => {
let data = row.isUpToGrid == 1 ? res.data.gwInfo : res.data.info
data[0].data.forEach((item: any) => {
if (item.columnName) vList.value.push(panoramicVoltage.find((v: any) => v.id == item.columnName).name)
})
list.value[0].list = data[0].data
})
// 终端
@@ -359,10 +388,10 @@ const info = async (row: any) => {
}
})
list.value[2].list.push({
numOne: 0,
numOneList: []
})
// list.value[2].list.push({
// numOne: 0,
// numOneList: []
// })
})
// 监测点指标统计
getGridDiagramStatistics(form).then(res => {
@@ -392,7 +421,7 @@ const LookMap = (coutList: object, alarmList: object, key?: any) => {
const GridDiagram = (k: any) => {
emit('GridDiagram', k, 3)
}
onMounted(() => { })
onMounted(() => {})
defineExpose({ info, show })
</script>

View File

@@ -34,15 +34,15 @@
<div class="monitoringPoints">
<div>
<span class="line"></span>
在线监测点数{{ monitorList.onlineNum }}
在线监测点数{{ monitorList?.onlineNum }}
</div>
<div>
<span class="line"></span>
超标监测点数{{ monitorList.overNum }}
超标监测点数{{ monitorList?.overNum }}
</div>
<div>
<span class="line"></span>
超标监测点占比{{ monitorList.overRatio }}
超标监测点占比{{ monitorList?.overRatio }}
</div>
</div>
@@ -262,7 +262,7 @@ const info = (row: any) => {
},
options: {
toolbox:null,
toolbox: null,
dataZoom: null,
series: optionData.series
}
@@ -350,7 +350,7 @@ const info = (row: any) => {
},
xAxis: {
type: 'category',
data: res.data[0].list?.map((item: any) => {
data: res.data[0]?.list?.map((item: any) => {
return item.targetName.length > 4
? item.targetName.slice(0, 4) + '\n ' + item.targetName.slice(4)
: item.targetName
@@ -367,12 +367,12 @@ const info = (row: any) => {
},
options: {
toolbox:null,
toolbox: null,
series: [
{
name: '超标监测点数',
type: 'bar',
data: res.data[0].list?.map((item: any) => item.overNum),
data: res.data[0]?.list?.map((item: any) => item.overNum),
label: {
show: true,
position: 'top',
@@ -385,7 +385,7 @@ const info = (row: any) => {
{
name: '超标天数',
type: 'bar',
data: res.data[0].list?.map((item: any) => item.overDay),
data: res.data[0]?.list?.map((item: any) => item.overDay),
label: {
show: true,
position: 'top',
@@ -451,7 +451,7 @@ const info = (row: any) => {
},
color: [config.layout.elementUiPrimary[0], '#FFBF00', '#FF9100'],
options: {
toolbox:null,
toolbox: null,
dataZoom: null,
series: [
{

View File

@@ -131,7 +131,7 @@
<el-option label="年" value="1" />
<el-option label="月" value="3" />
</el-select> -->
<div style="position: absolute; width: 100px; top: 0px; right: 0px; z-index: 1">
<div style="position: absolute; width: 100px; top: 0px; right: 15px; z-index: 1">
<el-radio-group v-model="city" size="small" @change="analysis">
<el-radio-button label="0"></el-radio-button>
<el-radio-button label="1"></el-radio-button>
@@ -176,7 +176,7 @@ const analysis = () => {
text: '各地市综合评估趋势对比'
},
legend: {
right: 120,
right: 125,
top: 20
},
// tooltip: {

View File

@@ -1,6 +1,6 @@
<template>
<DatePicker ref="datePickerRef" style="display: none" theCurrentTime />
<el-select class="conditions" v-model="formData.conditions" placeholder="请选择指标" style="width: 200px"
<el-select class="conditions mr20" v-model="formData.conditions" placeholder="请选择指标" style="width: 200px"
@change="History">
<el-option-group v-for="group in indexOptions" :key="group.label" :label="group.label">
<el-option v-for="item in group.options" :key="item.value" :label="item.label"
@@ -1351,7 +1351,7 @@ const getEcharts = () => {
}
],
toolbox: {
show: true,
show: false,
feature: {
dataZoom: {
// bottom: '10px',

View File

@@ -653,6 +653,7 @@ const echart = (row: any) => {
data: [item.ratioList]
})
})
console.log("🚀 ~ echart ~ option:", option)
chart.setOption(option)
}

View File

@@ -235,7 +235,7 @@ const AreaData: any = ref([])
const PopKey: any = ref(2)
const imgUrl0 = new URL('@/assets/img/BDZ-ZS.png', import.meta.url).href
const imgUrl1 = new URL('@/assets/img/ZD-ZS.png', import.meta.url).href
const imgUrl2 = new URL('@/assets/img/JCD-ZS.png', import.meta.url).hre
const imgUrl2 = new URL('@/assets/img/JCD-ZS.png', import.meta.url).href
const boundaryList: any = ref([
// {
// orgName: '唐山',
@@ -534,7 +534,6 @@ const grids = (row: any) => {
getGridDiagramAreaData({ ...form, deptIndex: deptIndex.value }).then((res: any) => {
AreaData.value = res.data
console.log('🚀 ~ getGridDiagramAreaData ~ AreaData.value:', AreaData.value)
GridDiagramArea()
})
// if (powerManageGridMap.value) powerLoad()
@@ -546,6 +545,8 @@ const radiusPop = (k: any) => {
}
const GridDiagramArea = () => {
boundaryList.value.forEach((item: any) => {
assessList.value &&
assessList.value.forEach((y: any) => {
if (item.orgName == y.name) {
if (y.score == 3.14159) {

View File

@@ -13,9 +13,17 @@
<div v-for="(item, i) in list" class="cardBox" :style="i == 1 ? 'flex:1.3' : ''">
<div class="card">
<span style="cursor: pointer" @click="GridDiagram(i)">{{ item.title }}</span>
<span :style="`color: ${item.color[0]}; cursor:pointer`"
@click="LookMap(item.list[4].numOneList, item.list[4].numTwoList, 0)">
{{ item.list[4].numOne }}
<span
:style="`color: ${item.color[0]}; cursor:pointer`"
@click="
LookMap(
item.list?.[item.list.length - 1]?.numOneList,
item.list?.[item.list.length - 1]?.numTwoList,
0
)
"
>
{{ item.list?.[item.list.length - 1]?.numOne }}
</span>
</div>
</div>
@@ -23,8 +31,10 @@
<!-- 监测规模 列表 -->
<div>
<div class="vcl mt5">
<p v-for="(item, i) in vList"
:style="i == 0 ? 'width: 60px' : i == 5 ? 'width: 32px' : 'flex:1'">
<p
v-for="(item, i) in vList"
:style="i == 0 ? 'width: 60px' : i == vList?.length - 1 ? 'width: 32px' : 'flex:1'"
>
{{ item }}
</p>
</div>
@@ -32,14 +42,15 @@
<div v-for="(item, i) in list" class="vcl">
<p style="width: 60px">
{{ item.title }}
<!-- <span style="position: absolute; font-size: 10px; top: -10px; right: -5px; color: #575757">
详情
</span> -->
</p>
<p class="numOne" @click="LookMap(item.list[0].numOneList, item.list[0].numTwoList, 0)">
{{ item.list[0].numOne }}
<p
v-for="(k, i) in vList?.slice(0, vList.length - 2)"
class="numOne"
@click="LookMap(item.list[i].numOneList, item.list[i].numTwoList, 0)"
>
{{ item.list[i]?.numOne }}
</p>
<p class="numOne" @click="LookMap(item.list[1].numOneList, item.list[1].numTwoList, 0)">
<!-- <p class="numOne" @click="LookMap(item.list[1].numOneList, item.list[1].numTwoList, 0)">
{{ item.list[1].numOne }}
</p>
<p class="numOne" @click="LookMap(item.list[2].numOneList, item.list[2].numTwoList, 0)">
@@ -47,9 +58,11 @@
</p>
<p class="numOne" @click="LookMap(item.list[3].numOneList, item.list[3].numTwoList, 0)">
{{ item.list[3].numOne }}
</p>
<p style="font-size: 12px; width: 32px; cursor: pointer; color: var(--el-color-primary)"
@click.stop="open(i)">
</p> -->
<p
style="font-size: 12px; width: 32px; cursor: pointer; color: var(--el-color-primary)"
@click.stop="open(i)"
>
详情
</p>
</div>
@@ -69,8 +82,11 @@
<img src="@/assets/img/TJ.png" />
{{ item.title }}
</div>
<div class="card-Box" :style="`height:calc((${boxHeight.height} - 50px )/ 3);`"
v-for="val in item.children">
<div
class="card-Box"
:style="`height:calc((${boxHeight.height} - 50px )/ 3);`"
v-for="val in item.children"
>
<div>
<span class="line"></span>
<span class="vol">{{ val.title }}</span>
@@ -127,8 +143,12 @@
</div>
</div>
<img class="imgL" :style="show ? 'transform: rotate(0deg);' : 'transform: rotate(180deg);'"
@click="show = !show" src="@/assets/img/QH.png" />
<img
class="imgL"
:style="show ? 'transform: rotate(0deg);' : 'transform: rotate(180deg);'"
@click="show = !show"
src="@/assets/img/QH.png"
/>
<div class="legeng">
<div v-for="item in legengList">
<span :style="`background-color: ${item.color};`"></span>
@@ -333,7 +353,8 @@ const legengList = [
title: '极差'
}
]
const vList = ['', '500kV', '220kV', '110kV', '35kV', '']
const panoramicVoltage: any = dictData.getBasicData('Dev_Voltage_Stand')
const vList = ref(['', '500kV', '220kV', '110kV', '35kV', ''])
const formRow: any = ref({})
const height = mainHeight(30)
const boxHeight = mainHeight(290, 2)
@@ -361,10 +382,14 @@ const info = async (row: any) => {
}
countList.value[0].title = row.areaName
formRow.value = form
vList.value = ['']
// 变电站
getSubLineGiveAnAlarm(form).then(res => {
let data = row.isUpToGrid == 1 ? res.data.gwInfo : res.data.info
data[0].data.forEach((item: any) => {
if (item.columnName) vList.value.push(panoramicVoltage.find((v: any) => v.id == item.columnName).name)
})
vList.value.push('')
list.value[0].list = data[0].data
})
// 终端
@@ -385,10 +410,10 @@ const info = async (row: any) => {
}
})
list.value[2].list.push({
numOne: 0,
numOneList: []
})
// list.value[2].list.push({
// numOne: 0,
// numOneList: []
// })
})
// 监测点指标统计
getGridDiagramStatistics(form).then(res => {
@@ -418,7 +443,7 @@ const LookMap = (coutList: object, alarmList: object, key?: any) => {
const GridDiagram = (k: any) => {
emit('GridDiagram', k)
}
onMounted(() => { })
onMounted(() => {})
defineExpose({ info, show })
</script>

View File

@@ -7,11 +7,11 @@
<Area ref="areaRef" :show-all-levels="false" v-model="form.orgNo" style="width: 100px"
@changeValue="changeValue" />
</el-form-item>
<el-form-item>
<!-- <el-form-item>
<el-select v-model="form.isUpToGrid" style="width: 100px" @change="info">
<el-option v-for="item in options" :key="item.id" :label="item.name" :value="item.id" />
</el-select>
</el-form-item>
</el-form-item> -->
<el-form-item>
<div class="Icon" @click="reset">
<Icon name="fa fa-refresh" />

File diff suppressed because it is too large Load Diff

View File

@@ -36,9 +36,9 @@ const info = () => {
yAxis: {
type: 'category',
data: dataSource.map(item => item.name),
axisLabel: {
color: '#fff'
},
// axisLabel: {
// color: '#fff'
// },
splitLine: {
show: false
}
@@ -48,9 +48,9 @@ const info = () => {
data: [1,2,3,4],
axisLabel: {
show: true,
textStyle: {
color: '#FFF'
},
// textStyle: {
// color: '#FFF'
// },
// formatter: function (value) {
// }

View File

@@ -1,135 +1,164 @@
<template>
<!-- <div :style="height">
<MyEChart :options="options" />
</div> -->
<div :style="height" class="boxBG">
<!-- <div class="appraise">
<div class="iconfont icon-zonghepingjia1"></div>
<span>综合评价</span>
<span style="color: #00cc00">98</span>
<span style="color: #00b07d"></span>
</div> -->
<div class="appraise">
<div class="iconfont icon-wanzhengshuaifenxi2"></div>
<span>完整率</span>
<span style="color: #00cc00">98</span>
<span style="color: #00b07d"></span>
<div :style="height" style="overflow-y: auto">
<div class="btnsBox">
<el-radio-group v-model="radio2" @change="info">
<el-radio-button label="电压" value="Voltage_Level" />
<el-radio-button label="厂家" value="Manufacturer" />
</el-radio-group>
</div>
<div class="appraise">
<div class="iconfont icon-zaixianshuaibaobiao0"></div>
<div class="boxBG">
<div
class="appraise"
v-for="(item, i) in List"
@click="clickRow(item, i)"
:class="rowColor == i ? 'hoverBox' : ''"
>
<!-- <div class="iconfont icon-wanzhengshuaifenxi2"></div> -->
<span>在线率</span>
<span style="color: #00cc00">98</span>
<span style="color: #00b07d"></span>
<div style="flex: 1">{{ item.name }}</div>
<div style="color: #0fff04; width: 150px">{{ Math.floor(item.evaluate * 100).toFixed(0) / 100 }}</div>
<div style="width: 40px" :style="`color:${ratingColor(item.evaluate)}`">
{{ rating(item.evaluate) }}
</div>
</div>
<div class="appraise">
<div class="iconfont icon-dianyahegeshuai"></div>
<span>合格率</span>
<span style="color: #00cc00">98</span>
<span style="color: #00b07d"></span>
</div>
</div>
</template>
<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import { ref, reactive, onMounted, onBeforeUnmount } from 'vue'
import MyEChart from '@/components/echarts/MyEchart.vue'
import { useDictData } from '@/stores/dictData'
import { getRunEvaluate } from '@/api/device-boot/runEvaluate'
import { mainHeight } from '@/utils/layout'
const options = ref({})
const emit = defineEmits(['reviewDetails'])
const props = defineProps({
params: {
type: Object,
default: () => {}
}
})
const rowColor = ref(0)
const List: any = ref([])
const dictData = useDictData()
const radio2 = ref('Voltage_Level')
const height = mainHeight(520, 1.5)
const timer: any = ref(null)
const classificationData = dictData.getBasicData('Statistical_Type', ['Report_Type'])
const info = () => {
options.value = {
xAxis: {
axisLabel: {
show: true,
textStyle: {
color: '#FFF'
getRunEvaluate({
...props.params,
statisticalType: classificationData.filter(item => item.code == radio2.value)[0]
}).then(res => {
clearInterval(timer.value)
List.value = res.data
clickRow(List.value[0], 0)
setTime()
})
}
const setTime = () => {
timer.value = setInterval(() => {
if (rowColor.value == List.value.length - 1) {
rowColor.value = 0
} else {
rowColor.value += 1
}
},
splitLine: {
show: false
},
axisTick: {
show: false
},
axisLine: {
show: true
},
data: ['运行', '调试', '停运']
},
grid: {
top: '30'
},
toolbox: {
show: false
},
yAxis: {
axisLine: {
show: true
},
axisLabel: {
color: '#fff'
},
splitLine: {
show: false
}
},
options: {
dataZoom: null,
series: [
{
type: 'bar',
data: [45, 5, 1],
itemStyle: {
color: function (params) {
// 根据索引返回不同颜色
var colorList = ['#00CC00', '#FF9900', '#CC0000']
return colorList[params.dataIndex]
}
}
}
]
}
clickRow(List.value[rowColor.value], rowColor.value)
}, 1000 * 5)
}
const rating = (num: number) => {
if (num >= 90) {
return '优秀'
} else if (num >= 80) {
return '良好'
} else if (num >= 70) {
return '一般'
} else {
return '较差'
}
}
const ratingColor = (num: number) => {
if (num >= 90) {
return '#0fff04'
} else if (num >= 80) {
return '#2b7fd3'
} else if (num >= 70) {
return '#ffcc33'
} else {
return '#97017e'
}
}
const clickRow = (item: any, i: number) => {
rowColor.value = i
emit('reviewDetails', item)
}
onMounted(() => {
info()
onBeforeUnmount(() => {
clearInterval(timer.value)
})
defineExpose({
info
})
</script>
<style lang="scss" scoped>
.btnsBox {
position: absolute;
right: 5px;
top: 0px;
}
::v-deep .el-radio-button__inner {
padding: 8px 18px;
background: var(--el-color-primary);
border: 1px solid #00fff4;
border-radius: 0;
font-weight: normal;
color: #ffffff;
text-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.73);
opacity: 0.52;
}
::v-deep .el-radio-button:last-child .el-radio-button__inner {
border-radius: 0;
}
::v-deep .el-radio-button:first-child .el-radio-button__inner {
border-radius: 0;
border-left: 1px solid #00fff4;
}
::v-deep .is-active {
border: 1px solid #00fff4;
opacity: 1 !important;
color: #ffffff;
background: var(--el-color-primary);
.el-radio-button__inner {
opacity: 1 !important;
border-left: 1px solid #00fff4 !important;
}
}
.boxBG {
display: flex;
// flex-wrap: wrap;
flex-direction: column;
// margin-top: 10px;
justify-content: space-around;
overflow: hidden;
width: 100%;
.appraise {
height: 30px;
// height: 30px;
width: 99%;
background-image: url('@/assets/imgs/bg02.png');
background-size: 100% 100%;
display: inline-block;
height: 20%;
min-height: 80px;
padding: 10px 30px 10px 10px;
margin-top: 10px;
color: #fff;
display: flex;
justify-content: space-around;
// justify-content: space-around;
align-items: center;
font-size: 20px;
span:nth-child(2) {
width: 80px;
font-size: 16px;
div {
text-align: center;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.iconfont {
display: flex;
@@ -145,4 +174,8 @@ onMounted(() => {
}
}
}
.hoverBox {
background-color: var(--el-color-primary-light-5);
// background-image: none !important;
}
</style>

View File

@@ -1,17 +1,22 @@
<template>
<div style="height:150px" class="box">
<div style="height: 150px" class="box1">
<div class="boxDiv">
<div style="color: #07ccca">300</div>
<div style="color: #07ccca">{{ props.params.allNum }}</div>
<img src="@/assets/imgs/ditu.png" />
<div class="mt10 divBot">总数</div>
</div>
<div class="boxDiv">
<div style="color: #339900">250</div>
<div style="color: #339900">{{ props.params.runNum }}</div>
<img src="@/assets/imgs/ditu.png" />
<div class="mt10 divBot">在运</div>
</div>
<div class="boxDiv">
<div style="color: #cc0000">50</div>
<div style="color: #ffbf00">{{ props.params.checkNum }}</div>
<img src="@/assets/imgs/ditu.png" />
<div class="mt10 divBot">调试</div>
</div>
<div class="boxDiv">
<div style="color: #cc0000">{{ props.params.stopRunNum }}</div>
<img src="@/assets/imgs/ditu.png" />
<div class="mt10 divBot">停运</div>
</div>
@@ -23,37 +28,41 @@ import MyEChart from '@/components/echarts/MyEchart.vue'
import { mainHeight } from '@/utils/layout'
import { color } from '@/components/echarts/color'
const height = mainHeight(330, 3)
const props = defineProps({
params: {
type: Object,
default: () => {}
}
})
const info = () => {}
onMounted(() => {
info()
})
</script>
<style lang="scss" scoped>
.box {
.box1 {
display: flex;
align-items: center;
.boxDiv {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
position: relative;
margin-top: 20px;
img {
width: 80%;
width: 90%;
}
div:nth-child(1) {
position: absolute;
font-size: 30px;
top: -10px;
top: -20px;
font-weight: 700;
}
.divBot {
font-size: 16px;
position: absolute;
top: -45px;
top: 10px;
}
color: #fff;
}

View File

@@ -1,12 +1,13 @@
<template>
<div :style="height" class="mt10">
<vxe-table height="auto" v-bind="defaultAttribute" :data="tableData">
<vxe-column type="seq" width="80px" title="序号"></vxe-column>
<vxe-column field="a" title="终端名称"></vxe-column>
<vxe-column field="b" title="所属电站"></vxe-column>
<vxe-column field="c" title="完整"></vxe-column>
<vxe-column field="d" title="在线率"></vxe-column>
<vxe-column field="e" title="合格率"></vxe-column>
<vxe-column type="seq" width="70px" title="序号"></vxe-column>
<vxe-column field="name" title="终端名称"></vxe-column>
<vxe-column field="subName" title="所属电站"></vxe-column>
<vxe-column field="integrityRate" title="完整率(%)"></vxe-column>
<vxe-column field="onLineRate" title="在线率(%)"></vxe-column>
<vxe-column field="passRate" title="合格率(%)"></vxe-column>
<vxe-column field="evaluate" title="评分(分)"></vxe-column>
</vxe-table>
</div>
</template>
@@ -14,27 +15,23 @@
import { ref, reactive, onMounted } from 'vue'
import { mainHeight } from '@/utils/layout'
import { defaultAttribute } from '@/components/table/defaultAttribute'
const tableData = ref([
{
a: '025875',
b: '测试变电站1',
c: '60',
d: '95',
e: '66'
},
{
a: '025876',
b: '测试变电站2',
c: '60',
d: '95',
e: '66'
import { getRunEvaluateDetail } from '@/api/device-boot/runEvaluate'
const props = defineProps({
params: {
type: Object,
default: () => {}
}
])
})
const tableData = ref([])
const height = mainHeight(360, 3)
const info = () => {}
onMounted(() => {
info()
const info = () => {
getRunEvaluateDetail({ ...props.params, ids: [] }).then(res => {
tableData.value = res.data
})
}
defineExpose({
info
})
</script>
<style lang="scss" scoped>
@@ -51,12 +48,12 @@ onMounted(() => {
background-color: #ffffff00 !important;
}
:deep(.vxe-table--body .vxe-body--row) {
background-color:#ffffff2e !important;
background-color: #ffffff2e !important;
}
:deep(.vxe-table--render-default .vxe-table--body-wrapper table) {
background-color: #00000000 !important;
color: #fff;
color: #000;
}
:deep(
.vxe-table--render-default.border--full .vxe-body--column,
@@ -66,17 +63,14 @@ onMounted(() => {
) {
background-image: linear-gradient(#00fff4, #00fff4), linear-gradient(#00fff4, #00fff4);
}
:deep(
.vxe-table--render-default.border--full .vxe-header--column
) {
:deep(.vxe-table--render-default.border--full .vxe-header--column) {
background-image: linear-gradient(#00fff4, #00fff4), linear-gradient(#00fff4, #00fff4) !important;
}
:deep(.vxe-table--render-default .vxe-table--border-line){
:deep(.vxe-table--render-default .vxe-table--border-line) {
border: var(--vxe-table-border-width) solid #00fff4;
}
:deep(.vxe-header--row) {
background: var(--el-color-primary);
color:#fff;
color: #fff;
}
</style>

View File

@@ -9,114 +9,114 @@ import echarts from '@/components/echarts/echarts'
import { useDictData } from '@/stores/dictData'
import { color } from '@/components/echarts/color'
import { mainHeight } from '@/utils/layout'
import { useConfig } from '@/stores/config'
const config = useConfig()
const height = mainHeight(330, 3)
const chartRef = ref<HTMLDivElement>()
const info = () => {
const info = (item: any) => {
let chart = echarts.init(chartRef.value as HTMLDivElement)
let everyDepartment = {
stages: [
{ name: '在线率', max: 100 },
{ name: '合格率', max: 100 },
{ name: '完整率', max: 100 }
],
scores: [item.onLineRate, item.passRate, item.integrityRate]
}
function contains(arr, obj) {
var i = arr.length
while (i--) {
if (arr[i].name === obj) {
return i
}
}
return false
}
let option = {
toolbox: {
backgroundColor: '',
color: ['#fff'],
radar: {
center: ['50%', '65%'],
radius: '80%',
triggerEvent: true,
name: {
rich: {
a: {
color: '#000',
fontSize: 14,
lineHeight: 20
},
b: {
color: config.layout.elementUiPrimary[0],
fontSize: 16,
align: 'center'
},
triggerEvent: true
},
formatter: (a, index) => {
let values = a.length > 6 ? a.slice(0, 6) + '...' : a
let i = contains(everyDepartment.stages, a) // 处理对应要显示的样式
return `{a| ${values}}{b| ${(everyDepartment.scores[i])}%}`
}
},
indicator: everyDepartment.stages,
startAngle: 90,
splitNumber: 5,
splitArea: {
areaStyle: {
color: ['#FFFFFF', '#F5F9FF'].reverse()
}
},
axisLabel: {
show: false
},
tooltip: {
trigger: 'item',
axisPointer: {
type: 'shadow',
label: {
color: '#fff',
fontSize: 14
}
},
textStyle: {
color: '#fff',
fontStyle: 'normal',
opacity: 0.35,
fontSize: 14
},
backgroundColor: 'rgba(0,0,0,0.55)',
borderWidth: 0,
confine: true
},
radar: {
shape: 'circle',
center: ['50%', '55%'],
name: {
textStyle: {
color: '#fff',
fontSize: 14
}
},
indicator: [
{
text: '完整率',
min: 0,
max: 100
},
{
text: '合格率',
min: 0,
max: 100
},
{
text: '在线率',
min: 0,
max: 100
}
],
splitArea: {
// 坐标轴在 grid 区域中的分隔区域,默认不显示。
show: true,
areaStyle: {
// 分隔区域的样式设置。
color: ['rgba(27, 50, 66, 0.4)']
}
},
axisLine: {
//指向外圈文本的分隔线样式
show: true,
lineStyle: {
color: '#5aa3d0'
color: '#D2E4F8'
}
},
splitLine: {
show: true,
lineStyle: {
color: 'rgba(99,192,251,0.2)', // 分隔线颜色
width: 2 // 分隔线线宽
color: '#D2E4F8'
}
}
},
series: {
name: '',
series: [
{
type: 'radar',
symbolSize: 8,
itemStyle: {
borderColor: color[1],
borderWidth: 2
},
// 外线框
symbol: 'none',
areaStyle: {
normal: {
width: 1,
opacity: 0.3
color: `${config.layout.elementUiPrimary[0]}69`
}
},
itemStyle: {
color: config.layout.elementUiPrimary[0]
},
data: [
{
itemStyle: {
normal: {
color: color[1]
}
},
value: [20, 33, 80]
value: everyDepartment.scores
}
]
}
]
}
chart.setOption(option)
window.addEventListener('resize', () => {
chart.resize() // 调用 resize 方法
})
}
onMounted(() => {
info()
defineExpose({
info
})
</script>
<style lang="scss" scoped></style>

View File

@@ -8,18 +8,23 @@ import { ref, reactive, onMounted } from 'vue'
import MyEChart from '@/components/echarts/MyEchart.vue'
import { mainHeight } from '@/utils/layout'
import { yMethod } from '@/utils/echartMethod'
import { lastWeekTrend } from '@/api/device-boot/runEvaluate'
const props = defineProps({
params: {
type: Object,
default: () => {}
}
})
const options = ref({})
const height = mainHeight(330, 3)
const height = mainHeight(290, 3)
const info = () => {
let [min, max] = yMethod([80, 99])
lastWeekTrend(props.params).then((res: any) => {
options.value = {
xAxis: {
axisLabel: {
show: true,
textStyle: {
color: '#FFF'
}
show: true
},
splitLine: {
show: false
@@ -30,90 +35,51 @@ const info = () => {
axisLine: {
show: true
},
data: ['03-24', '03-25', '03-26', '03-27', '03-28', '03-29', '03-30']
},
legend: {
textStyle: {
color: '#fff'
}
data: res.data.date
},
grid: {
top: '50',
left: '20',
right: '20'
top: '30',
left: '10',
right: '10'
},
toolbox: {
show: false
},
yAxis: {
min: min,
min: 0,
max: 100,
axisLine: {
show: true
},
axisLabel: {
color: '#fff'
},
splitLine: {
show: false
}
},
// color: [color[1]],
// ['承德', '唐山', '秦皇岛', '廊坊', '张家口']
legend:{
top: '5',
right: '5',
type: 'scroll',
},
options: {
dataZoom: null,
series: [
{
name: '承德',
type: 'line',
symbol: 'circle',
smooth: true,
showSymbol: false,
data: [80, 82, 90, 92, 97,100,100]
},
{
name: '唐山',
type: 'line',
symbol: 'circle',
smooth: true,
showSymbol: false,
data: [83, 84, 91, 93, 98,100,100]
},
{
name: '秦皇岛',
type: 'line',
symbol: 'circle',
smooth: true,
showSymbol: false,
data: [84, 82, 90, 90, 95,100,100]
},
{
name: '廊坊',
type: 'line',
symbol: 'circle',
smooth: true,
showSymbol: false,
data: [87, 82, 90, 94, 97,100,100]
},
{
name: '张家口',
type: 'line',
symbol: 'circle',
smooth: true,
showSymbol: false,
data: [90, 92, 95, 97, 100,100,100]
}
]
series: []
}
}
res.data.name.forEach((item: any, i: number) => {
options.value.options.series.push({
name: item,
type: 'line',
symbol: 'circle',
smooth: true,
showSymbol: false,
data: res.data.score[i]
})
})
})
}
onMounted(() => {
info()
onMounted(() => {})
defineExpose({
info
})
</script>
<style lang="scss" scoped></style>

View File

@@ -1,19 +1,19 @@
<template>
<div class="default-main" style="position: relative">
<TableHeader date-picker >
<TableHeader date-picker>
<template v-slot:select>
<el-form-item label="对象类型">
<el-form-item label="电网侧标识">
<el-select
v-model="tableStore.table.params.supvObjType"
v-model="tableStore.table.params.powerFlag"
clearable
style="width: 100%"
placeholder="请选择对象类型"
placeholder="请选择电网侧标识"
>
<el-option
v-for="item in supvObjTypeList"
v-for="item in powerFlagList"
:key="item.id"
:label="item.name"
:value="item.id"
:value="item.algoDescribe"
></el-option>
</el-select>
</el-form-item>
@@ -125,17 +125,19 @@
</template>
</TableHeader>
<!-- <div class="mapBox" >
<div class="mapBox">
<el-form :inline="true" class="demo-form-inline">
<el-form-item>
<Area ref="areaRef" :show-all-levels="false" v-model="tableStore.table.params.orgNo" style="width: 100px"
<Area
ref="areaRef"
@change-value="changeValue"
:show-all-levels="false"
v-model="tableStore.table.params.deptIndex"
style="width: 100px"
/>
</el-form-item>
</el-form>
</div> -->
</div>
<Map />
@@ -145,44 +147,44 @@
style="height: 200px"
:color="[color[0], color[0]]"
class="box"
:backgroundColor="`${color[0]}24`"
:backgroundColor="`#f3f1ec90`"
title="终端统计"
>
<div class="title">
<span class="iconfont icon-zhongduantongji-xian"></span>
终端统计
<!-- <el-button link icon="el-icon-View" @click="endpointStatistics">详情</el-button> -->
<!-- <el-button link class="view" icon="el-icon-View" @click="endpointStatistics">详情</el-button> -->
</div>
<statistics />
<statistics :params="tableStore.table.data" />
</BorderBox13>
<BorderBox13
:color="[color[0], color[0]]"
class="box"
style="flex: 1"
:backgroundColor="`${color[0]}24`"
:backgroundColor="`#f3f1ec90`"
title="终端运行评价"
>
<div class="title">
<span class="iconfont icon-daipingjia"></span>
终端运行评价
<el-button link icon="el-icon-View" @click="endpointStatistics">详情</el-button>
<!-- <el-button link class="view" icon="el-icon-View" @click="endpointStatistics">详情</el-button> -->
</div>
<run />
<run :params="tableStore.table.params" ref="runRef" @reviewDetails="reviewDetails" />
</BorderBox13>
<BorderBox13
:style="height3"
:color="[color[0], color[0]]"
class="box"
:backgroundColor="`${color[0]}24`"
:backgroundColor="`#f3f1ec90`"
title="终端运行评价详情"
>
<div class="title">
<span class="iconfont icon-a-qushi1"></span>
终端运行评价详情
<!-- <el-button link icon="el-icon-View">详情</el-button> -->
<!-- <el-button link class="view" icon="el-icon-View">详情</el-button> -->
</div>
<terminalOperation />
<terminalOperation :params="tableStore.table.params" ref="terminalOperationRef" />
</BorderBox13>
</div>
</transition>
@@ -192,13 +194,13 @@
<BorderBox13
:color="[color[0], color[0]]"
class="box box-2"
:backgroundColor="`${color[0]}24`"
:backgroundColor="`#f3f1ec90`"
title="区域终端运行评价"
>
<div class="title">
<span class="iconfont icon-a-ziyuan118"></span>
区域终端运行评价
<el-button link icon="el-icon-View" @click="regionEvaluation">详情</el-button>
<el-button link class="view" icon="el-icon-View" @click="regionEvaluation">详情</el-button>
</div>
<region />
</BorderBox13>
@@ -207,7 +209,7 @@
style="height: 100%"
:color="[color[0], color[0]]"
class="box"
:backgroundColor="`${color[0]}24`"
:backgroundColor="`#f3f1ec90`"
title="最近一周终端评价趋势"
>
<div class="title">
@@ -215,7 +217,7 @@
最近一周终端评价趋势
</div>
<week />
<week ref="weekRef" :params="tableStore.table.params"/>
</BorderBox13>
</div>
</div>
@@ -226,14 +228,14 @@
<BorderBox13
:color="[color[0], color[0]]"
class="box"
:backgroundColor="`${color[0]}24`"
:backgroundColor="`#f3f1ec90`"
title="异常终端详情"
>
<div class="title">
<span class="iconfont icon-yichangxiangqing-xian"></span>
异常终端详情
</div>
<terminalDetails />
<terminalDetails ref="terminalDetailsRef" :params="tableStore.table.params" />
<table />
</BorderBox13>
</div>
@@ -250,7 +252,7 @@ import TableHeader from '@/components/table/header/index.vue'
import TableStore from '@/utils/tableStore'
import { useDictData } from '@/stores/dictData'
import { mainHeight } from '@/utils/layout'
import Area from '@/components/form/area/index.vue'
import Map from './components/map.vue'
import { BorderBox13 } from '@kjgl77/datav-vue3'
import { useConfig } from '@/stores/config'
@@ -266,45 +268,36 @@ import regionDetails from './components/regionDetails.vue'
defineOptions({
name: 'runManage/runEvaluate'
})
const runRef = ref()
const weekRef = ref()
const terminalDetailsRef = ref()
const config = useConfig()
const color = config.layout.elementUiPrimary
const dictData = useDictData()
const height = mainHeight(115)
const height3 = mainHeight(115, 3)
const classificationData = dictData.getBasicData('Statistical_Type', ['Report_Type'])
//字典获取监督对象类型
const supvObjTypeList = dictData.getBasicData('supv_obj_type')
const powerFlagList = dictData.getBasicData('power_flag')
const tableStore = new TableStore({
url: '/user-boot/user/getAllUserSimpleList',
method: 'GET',
isWebPaging: true,
showPage: false,
publicHeight: 480,
column: [
{ title: '序号', width: 80 },
{ title: '监测对象类型', field: 'name3' },
{ title: '监测对象名称', field: 'name4' },
{ title: '电压等级', field: 'name5' },
{
title: '操作',
width: '120',
render: 'buttons',
buttons: [
{
name: 'edit',
title: '工单',
type: 'primary',
icon: 'el-icon-Plus',
render: 'basicButton',
click: row => {}
}
]
}
],
url: '/device-boot/dev/statisticDevNum',
method: 'POST',
column: [],
loadCallback: () => {
tableStore.table.data = []
runRef.value.info()
weekRef.value.info()
terminalDetailsRef.value.info()
}
})
tableStore.table.params.deptIndex = dictData.state.area[0].id
tableStore.table.params.loadType = dictData.getBasicData('Interference_Source')
tableStore.table.params.terminaloption = dictData.getBasicData('Dev_Manufacturers')
tableStore.table.params.scale = dictData.getBasicData('Dev_Voltage_Stand')
tableStore.table.params.statisticalType = classificationData.filter(item => item.name == '电网拓扑')[0] //dictData.getBasicData('Statistical_Type', ['Report_Type'])[0]
tableStore.table.params.monitorFlag = 2
tableStore.table.params.powerFlag = 2
tableStore.table.params.serverName = 'harmonicBoot'
provide('tableStore', tableStore)
const leftVisible = ref(true)
const rightVisible = ref(true)
@@ -317,14 +310,21 @@ const toggle = () => {
rightVisible.value = !rightVisible.value
centerVisible.value = !centerVisible.value
}
// 终端统计详情
const endpointStatistics = () => {
statisticsPopUpBoxRef.value.open()
// 区域变化
const changeValue = (val: any) => {
tableStore.index()
}
// 区域详情
const regionEvaluation = () => {
regionDetailsRef.value.open()
}
const terminalOperationRef = ref()
//渲染 在线率
const reviewDetails = (item: any) => {
terminalOperationRef.value.info(item)
}
onMounted(() => {
// 加载数据
@@ -439,7 +439,7 @@ onMounted(() => {
top: 80px;
left: calc(50% + 45px);
z-index: 1;
z-index: 10;
.el-select {
min-width: 100px;
@@ -473,4 +473,7 @@ onMounted(() => {
margin-right: 15px;
}
}
:deep(.view) {
color: #000 !important;
}
</style>

View File

@@ -62,7 +62,6 @@ const init = () => {
},
legend: {
data: ['上限', '下限', '可容忍事件', '不可容忍事件'],
x: 'left'
},
tooltip: {
trigger: 'item',

View File

@@ -61,7 +61,6 @@ const init = () => {
},
legend: {
data: ['上限', '下限', '可容忍事件', '不可容忍事件'],
x: 'left'
},
tooltip: {
trigger: 'item',

View File

@@ -48,7 +48,6 @@ const init = () => {
},
legend: {
show: true,
left: 10,
data: ['概率分布', '占比'],
textStyle: {

View File

@@ -117,7 +117,7 @@ const initFirst = () => {
},
legend: {
data: ['暂降次数'],
x: 'right'
},
xAxis: [
{
@@ -198,7 +198,6 @@ const initSecond = () => {
},
legend: {
orient: 'vertical',
left: 'left',
data: reaArray
},
series: [
@@ -274,7 +273,6 @@ const initThird = () => {
},
legend: {
orient: 'vertical',
left: 'left',
data: typeArray
},
series: [

View File

@@ -48,7 +48,6 @@ const init = () => {
},
legend: {
show: true,
left: 10,
data: ['概率分布', '占比'],
textStyle: {

View File

@@ -76,9 +76,9 @@
@click="markerClick(path)"
></bm-marker>
</BmlMarkerClusterer>
<bm-marker :position="infoWindowPoint" :icon="{ url: '1', size: { width: 0, height: 0 } }">
<bm-marker :position="infoWindowPoint" :icon="{ url: '1', size: { width: 0, height: 0 } }" >
<bm-info-window :show="infoWindowPoint.show" @close="infoWindowPoint.show = false">
<el-descriptions :title="infoWindowPoint.lineName" :column="1" v-if="infoWindowPoint.lineId">
<el-descriptions :title="infoWindowPoint.lineName" style="min-width: 240px;" :column="1" v-if="infoWindowPoint.lineId">
<el-descriptions-item label="供电公司">{{ infoWindowPoint.gdName }}</el-descriptions-item>
<el-descriptions-item label="变电站">{{ infoWindowPoint.subName }}</el-descriptions-item>
<el-descriptions-item label="母线">{{ infoWindowPoint.voltageName }}</el-descriptions-item>