497 lines
21 KiB
Vue
497 lines
21 KiB
Vue
<template>
|
||
<div class="default-main">
|
||
<TableHeader datePicker ref="header">
|
||
<template v-slot:select>
|
||
<el-form-item label="统计类型">
|
||
<el-select v-model="tableStore.table.params.statisticalType" value-key="id" placeholder="请选择统计类型">
|
||
<el-option v-for="item in options" :key="item.id" :label="item.name" :value="item" />
|
||
</el-select>
|
||
</el-form-item>
|
||
<el-form-item label="电网标志">
|
||
<el-select v-model="tableStore.table.params.powerFlag" placeholder="请选择电网标志">
|
||
<el-option v-for="item in sign" :key="item.id" :label="item.name" :value="item.algoDescribe" />
|
||
</el-select>
|
||
</el-form-item>
|
||
<el-form-item>
|
||
<el-button type="primary" icon="el-icon-DataAnalysis"
|
||
@click="rankingClick">排名前10监测点</el-button>
|
||
</el-form-item>
|
||
</template>
|
||
</TableHeader>
|
||
<div v-loading="tableStore.table.loading" class="pr10">
|
||
<el-row>
|
||
<el-col :span="12" class="pd10">
|
||
<el-tag style="background: #339966; color: #fff" size="small">优</el-tag>
|
||
<span style="color: #339966">:优秀≤60%</span>
|
||
<el-tag style="background: #ffcc33; color: #fff" size="small">良</el-tag>
|
||
<span style="color: #ffcc33">:60%＜良好＜90% </span>
|
||
<el-tag style="background: #A52a2a; color: #fff" size="small">差</el-tag>
|
||
<span style="color: #A52a2a">:极差≥90%</span>
|
||
<div :style="{ height: layout.height }" style="overflow-y: auto" class="mt10">
|
||
<div class=" cardBox">
|
||
<el-card v-for="(item, index) in tableStore.table.data" :key="index">
|
||
<template #header>
|
||
<div style="cursor: pointer;" @click="queryline(item, false)">
|
||
<el-tag v-if="item.data < 60 && item.data >= 0"
|
||
style="color: #fff; background: #339966" size="small">
|
||
优
|
||
</el-tag>
|
||
<el-tag v-if="60 <= item.data && item.data < 90"
|
||
style="color: #fff; background: #ffcc33" size="small">
|
||
良
|
||
</el-tag>
|
||
<el-tag v-if="90 <= item.data && item.data"
|
||
style="color: #fff; background: #A52a2a" size="small">
|
||
差
|
||
</el-tag>
|
||
<el-tag v-if="item.data == 3.14159 "
|
||
style="color: #fff; background: #ccc" size="small">
|
||
无
|
||
</el-tag>
|
||
<span>{{ item.name }}</span>
|
||
</div>
|
||
|
||
</template>
|
||
<div class="card-content">
|
||
<div class="card-item" v-for="(item1, index1) in item.children"
|
||
:key="index1" @click="queryline(item1, true)">
|
||
|
||
<el-tag v-if="item1.data < 60 && item1.data >= 0"
|
||
style="color: #fff; background: #339966" size="small">
|
||
优
|
||
</el-tag>
|
||
<el-tag v-if="60 <= item1.data && item1.data < 90"
|
||
style="color: #fff; background: #ffcc33" size="small">
|
||
良
|
||
</el-tag>
|
||
<el-tag v-if="90 <= item1.data && item1.data"
|
||
style="color: #fff; background: #A52a2a" size="small">
|
||
差
|
||
</el-tag>
|
||
<el-tag v-if="item1.data == 3.14159 "
|
||
style="color: #fff; background: #ccc" size="small">
|
||
无
|
||
</el-tag>
|
||
<!-- <el-tag v-if="item1.data == 3.14159 || item1.data == 0"
|
||
style="background: #ccc; color: #fff" size="small">
|
||
无
|
||
</el-tag>
|
||
<el-tag
|
||
v-if="0 < item1.data && item1.data < 1 && item1.data !== 3.14159"
|
||
style="background: #339966; color: #fff" size="small">
|
||
1级
|
||
</el-tag>
|
||
<el-tag
|
||
v-if="1 <= item1.data && item1.data < 1.2 && item1.data !== 3.14159"
|
||
style="background: #3399ff; color: #fff" size="small">
|
||
2级
|
||
</el-tag>
|
||
<el-tag
|
||
v-if="1.2 <= item1.data && item1.data < 1.6 && item1.data !== 3.14159"
|
||
style="background: #ffcc33; color: #fff" size="small">
|
||
3级
|
||
</el-tag>
|
||
<el-tag
|
||
v-if="1.6 <= item1.data && item1.data < 2 && item1.data !== 3.14159"
|
||
style="background: #ff9900; color: #fff" size="small">
|
||
4级
|
||
</el-tag>
|
||
<el-tag v-if="2 <= item1.data && item1.data && item1.data !== 3.14159"
|
||
style="background: #A52a2a; color: #fff" size="small">
|
||
5级
|
||
</el-tag> -->
|
||
<span class="xdf">
|
||
<el-tooltip :show-arrow="false" :offset="-0" :content="item1.name"
|
||
popper-class="atooltip" placement="bottom-start">
|
||
|
||
<div class="tooltipText">
|
||
{{ item1.name }}
|
||
</div>
|
||
</el-tooltip>
|
||
</span>
|
||
</div>
|
||
</div>
|
||
</el-card>
|
||
</div>
|
||
</div>
|
||
</el-col>
|
||
<el-col :span="12">
|
||
<my-echart class="tall" :options="echartList" />
|
||
<div class="tall">
|
||
<vxe-table height="auto" auto-resize :data="dataList" v-bind="defaultAttribute">
|
||
<vxe-column field="name" title="名称"></vxe-column>
|
||
<vxe-column field="onlineCount" title="在运监测点数(个)">
|
||
<template #default="scope">
|
||
{{ scope.row.onlineCount == 3.14159 ? '暂无数据' : scope.row.onlineCount }}
|
||
</template>
|
||
</vxe-column>
|
||
<vxe-column field="overLineCount" title="超标监测点数(个)">
|
||
<template #default="scope">
|
||
{{ scope.row.overLineCount == 3.14159 ? '暂无数据' : scope.row.overLineCount }}
|
||
</template>
|
||
</vxe-column>
|
||
<vxe-column field="ratio" title="监测点超标占比(%)">
|
||
<template #default="scope">
|
||
{{ scope.row.lineRatio == 3.14159 ? '暂无数据' : scope.row.lineRatio }}
|
||
</template>
|
||
</vxe-column>
|
||
<vxe-column field="averageOverDay" title="平均超标天数(天/点)">
|
||
<template #default="scope">
|
||
{{ scope.row.averageOverDay == 3.14159 ? '暂无数据' : scope.row.averageOverDay }}
|
||
</template>
|
||
</vxe-column>
|
||
|
||
|
||
</vxe-table>
|
||
</div>
|
||
|
||
</el-col>
|
||
</el-row>
|
||
</div>
|
||
<!-- 详情 -->
|
||
<provinceDetails ref="provinceDetailsRef" />
|
||
<!-- 排名前10的监测点 -->
|
||
<ranking ref="rankingRef" />
|
||
</div>
|
||
</template>
|
||
<script setup lang="ts">
|
||
import TableHeader from '@/components/table/header/index.vue'
|
||
import { useDictData } from '@/stores/dictData'
|
||
import { defaultAttribute } from '@/components/table/defaultAttribute'
|
||
import provinceDetails from './components/provinceDetails.vue'
|
||
import ranking from './components/ranking.vue'
|
||
import MyEchart from '@/components/echarts/MyEchart.vue'
|
||
import TableStore from '@/utils/tableStore'
|
||
import { ref, onMounted, provide } from 'vue'
|
||
import { mainHeight } from '@/utils/layout'
|
||
import { deptInfo } from '@/api/harmonic-boot/area'
|
||
import * as echarts from 'echarts/core'
|
||
defineOptions({
|
||
name: 'harmonic-boot/detailedAnalysis/harmonictj'
|
||
})
|
||
const dictData = useDictData()
|
||
const echartList = ref({})
|
||
const provinceDetailsRef = ref()
|
||
const rankingRef = ref()
|
||
const dataList = ref([])
|
||
|
||
const header = ref()
|
||
const sign = dictData.getBasicData('power_flag')
|
||
const options = dictData.getBasicData('Indicator_Type', ['PLPC', 'DYPC', 'SXDYBPHD', 'CSSB', 'FXDL', 'JXBDY'])
|
||
const tableStore = new TableStore({
|
||
url: '/harmonic-boot/detailAnalysis/deptSubRelations',
|
||
method: 'POST',
|
||
column: [],
|
||
loadCallback: () => {
|
||
deptInfo(tableStore.table.params).then((res: any) => {
|
||
histogram(res.data)
|
||
dataList.value = res.data
|
||
})
|
||
header.value.areaRef.change()
|
||
}
|
||
})
|
||
provide('tableStore', tableStore)
|
||
|
||
tableStore.table.params.deptIndex = dictData.state.area[0].id
|
||
tableStore.table.params.statisticalType = options[0]
|
||
tableStore.table.params.monitorFlag = 2
|
||
tableStore.table.params.powerFlag = sign[0]?.algoDescribe || 0
|
||
tableStore.table.params.statFlag = true
|
||
tableStore.table.params.serverName = 'event-boot'
|
||
|
||
|
||
|
||
|
||
// 地图数处理
|
||
const rankingClick = () => {
|
||
rankingRef.value.open(tableStore.table.params)
|
||
}
|
||
const queryline = (row: any, flag: boolean) => {
|
||
provinceDetailsRef.value.open(row, flag, tableStore.table.params)
|
||
}
|
||
|
||
// 表格数据处理
|
||
// 柱状图数据处理
|
||
const histogram = (res: any) => {
|
||
|
||
|
||
echartList.value = {
|
||
title: {
|
||
text: '监测点超标占比'
|
||
},
|
||
tooltip: {
|
||
formatter: function (params: any) {
|
||
// console.log(params);
|
||
var tips = ''
|
||
for (var i = 0; i < params.length; i++) {
|
||
tips += params[i].name + '</br/>'
|
||
tips += '超标监测点占比' + ':' + ' ' + ' ' + (params[i].value == 0.14159 ? '暂无数据' : params[i].value) + '</br/>'
|
||
}
|
||
return tips
|
||
}
|
||
},
|
||
|
||
xAxis: {
|
||
name: '区域',
|
||
data: res.map((item: any) => item.name)
|
||
},
|
||
yAxis: {
|
||
name: '超标占比',// 给X轴加单位
|
||
min: 0,
|
||
max: 100,
|
||
|
||
splitLine: {
|
||
show: false
|
||
},
|
||
axisLabel: {
|
||
show: true,
|
||
|
||
// 这里重新定义就可以
|
||
|
||
},
|
||
},
|
||
|
||
options: {
|
||
dataZoom: null,
|
||
series: [
|
||
{
|
||
|
||
type: 'bar',
|
||
data: res.map((item: any) => {
|
||
return item.lineRatio == 3.14159 ? 0.14159 : item.lineRatio
|
||
}),
|
||
barMaxWidth: 30,
|
||
|
||
itemStyle: {
|
||
normal: {
|
||
// 随机显示
|
||
//color:function(d){return "#"+Math.floor(Math.random()*(256*256*256-1)).toString(16);}
|
||
|
||
// 定制显示（按顺序）
|
||
color: function (params) {
|
||
if ( params.value == 0.14159) {
|
||
return '#ccc'
|
||
} else if (params.value >= 90) {
|
||
return new echarts.graphic.LinearGradient(
|
||
0,
|
||
1,
|
||
0,
|
||
0,
|
||
[
|
||
{
|
||
offset: 1,
|
||
color: '#A52a2a'
|
||
}
|
||
],
|
||
false
|
||
)
|
||
} else if (60 < params.value && params.value < 90) {
|
||
return new echarts.graphic.LinearGradient(
|
||
0,
|
||
1,
|
||
0,
|
||
0,
|
||
[
|
||
{
|
||
offset: 1,
|
||
color: '#FFCC33'
|
||
}
|
||
],
|
||
false
|
||
)
|
||
} else if (
|
||
|
||
params.value <= 60 &&
|
||
params.value >= 0 &&
|
||
params.value !== 0.05
|
||
) {
|
||
return new echarts.graphic.LinearGradient(
|
||
0,
|
||
1,
|
||
0,
|
||
0,
|
||
[
|
||
{
|
||
offset: 1,
|
||
color: '#339966'
|
||
}
|
||
],
|
||
false
|
||
)
|
||
} else if (params.value == 0.05) {
|
||
return new echarts.graphic.LinearGradient(
|
||
0,
|
||
1,
|
||
0,
|
||
0,
|
||
[
|
||
{
|
||
offset: 1,
|
||
color: '#999999'
|
||
}
|
||
],
|
||
false
|
||
)
|
||
}
|
||
}
|
||
}
|
||
},
|
||
markLine: {
|
||
silent: false,
|
||
symbol: 'circle',
|
||
lineStyle: {
|
||
color: 'red',
|
||
width: 1
|
||
},
|
||
emphasis: {
|
||
lineStyle: {
|
||
width: 1
|
||
}
|
||
},
|
||
data: [
|
||
{
|
||
name: '',
|
||
yAxis: 60,
|
||
lineStyle: {
|
||
color: '#339966'
|
||
},
|
||
label: {
|
||
//position: "middle",
|
||
formatter: '{b}',
|
||
textStyle: {
|
||
color: '#339966'
|
||
}
|
||
}
|
||
},
|
||
|
||
{
|
||
name: '',
|
||
yAxis: 90,
|
||
lineStyle: {
|
||
color: '#FFCC33'
|
||
},
|
||
label: {
|
||
// position: "middle",
|
||
formatter: '{b}',
|
||
textStyle: {
|
||
color: '#FFCC33'
|
||
}
|
||
}
|
||
},
|
||
|
||
{
|
||
name: '',
|
||
yAxis: 100,
|
||
lineStyle: {
|
||
color: '#A52a2a'
|
||
},
|
||
label: {
|
||
// position: "middle",
|
||
formatter: '{b}',
|
||
textStyle: {
|
||
color: '#A52a2a'
|
||
}
|
||
}
|
||
}
|
||
]
|
||
},
|
||
|
||
}
|
||
]
|
||
}
|
||
}
|
||
}
|
||
|
||
onMounted(() => {
|
||
tableStore.index()
|
||
console.log(tableStore.da)
|
||
})
|
||
const layout = mainHeight(133) as any
|
||
const layout1 = mainHeight(93) as any
|
||
</script>
|
||
<style lang="scss" scoped>
|
||
.tall {
|
||
height: calc(v-bind('layout1.height') / 2);
|
||
}
|
||
|
||
.tag {
|
||
color: #fff;
|
||
border: #fff;
|
||
margin-left: 5px;
|
||
width: 28px;
|
||
}
|
||
|
||
.text {
|
||
font-weight: bold;
|
||
font-size: 12px;
|
||
}
|
||
|
||
:deep(.cardBox) {
|
||
|
||
box-sizing: border-box;
|
||
overflow: auto;
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
||
grid-template-rows: max-content;
|
||
grid-gap: 10px;
|
||
justify-content: center;
|
||
|
||
.el-card {
|
||
background-image: linear-gradient(var(--el-color-primary), var(--el-color-primary-light-3));
|
||
font-weight: bold;
|
||
|
||
|
||
|
||
.el-card__header {
|
||
padding: 10px !important;
|
||
color: #fff;
|
||
|
||
div {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
}
|
||
|
||
}
|
||
|
||
.el-card__body {
|
||
padding: 10px !important;
|
||
}
|
||
|
||
.card-content {
|
||
height: 200px;
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
justify-content: space-between;
|
||
overflow-y: auto;
|
||
color: #000;
|
||
|
||
.card-item {
|
||
margin-bottom: 20px;
|
||
width: 50%;
|
||
display: flex;
|
||
cursor: pointer;
|
||
|
||
}
|
||
|
||
.xdf {
|
||
width: 70%;
|
||
}
|
||
|
||
.tooltipText {
|
||
font-weight: 500;
|
||
font-size: 12px;
|
||
color: #fff;
|
||
// width: 50%;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
margin-left: 5px;
|
||
|
||
}
|
||
|
||
}
|
||
}
|
||
|
||
}
|
||
</style>
|