联调终端运行评价
This commit is contained in:
34
src/api/device-boot/runEvaluate.ts
Normal file
34
src/api/device-boot/runEvaluate.ts
Normal 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
|
||||
})
|
||||
}
|
||||
@@ -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}
|
||||
|
||||
16
src/main.ts
16
src/main.ts
@@ -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'
|
||||
|
||||
@@ -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) => {
|
||||
|
||||
@@ -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;">
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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 = ''
|
||||
|
||||
@@ -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>
|
||||
|
||||
|
||||
@@ -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: [
|
||||
{
|
||||
|
||||
@@ -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: {
|
||||
|
||||
@@ -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',
|
||||
|
||||
@@ -653,6 +653,7 @@ const echart = (row: any) => {
|
||||
data: [item.ratioList]
|
||||
})
|
||||
})
|
||||
console.log("🚀 ~ echart ~ option:", option)
|
||||
|
||||
chart.setOption(option)
|
||||
}
|
||||
|
||||
@@ -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) {
|
||||
|
||||
@@ -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>
|
||||
|
||||
|
||||
@@ -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
@@ -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) {
|
||||
|
||||
// }
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -62,7 +62,6 @@ const init = () => {
|
||||
},
|
||||
legend: {
|
||||
data: ['上限', '下限', '可容忍事件', '不可容忍事件'],
|
||||
x: 'left'
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'item',
|
||||
|
||||
@@ -61,7 +61,6 @@ const init = () => {
|
||||
},
|
||||
legend: {
|
||||
data: ['上限', '下限', '可容忍事件', '不可容忍事件'],
|
||||
x: 'left'
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'item',
|
||||
|
||||
@@ -48,7 +48,6 @@ const init = () => {
|
||||
},
|
||||
legend: {
|
||||
show: true,
|
||||
left: 10,
|
||||
data: ['概率分布', '占比'],
|
||||
|
||||
textStyle: {
|
||||
|
||||
@@ -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: [
|
||||
|
||||
@@ -48,7 +48,6 @@ const init = () => {
|
||||
},
|
||||
legend: {
|
||||
show: true,
|
||||
left: 10,
|
||||
data: ['概率分布', '占比'],
|
||||
|
||||
textStyle: {
|
||||
|
||||
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user