Web/admin-sjzx
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

技术监督新增查看功能

Browse Source
This commit is contained in:
GGJ
2024-10-31 15:47:02 +08:00
parent 1df2b26b04
commit 0645462ab8
19 changed files with 921 additions and 148 deletions
Download Patch File Download Diff File Expand all files Collapse all files

341
src/views/pqs/harmonicMonitoring/detailed/dirtyAreas/index.vue Normal file
View File

@@ -0,0 +1,341 @@
<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>
<el-button type="primary" icon="el-icon-DataAnalysis">排名前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;" class="tag" size="small">1级</el-tag>
<span style="color: #339966;" class="text">:无污染(0,1]</span>
<el-tag style="background: #3399ff;" class="tag" size="small">2级</el-tag>
<span style="color: #3399ff;" class="text">:轻微污染(1,1.2]</span>
<el-tag style="background: #ffcc33;" class="tag" size="small">3级</el-tag>
<span style="color: #ffcc33;" class="text">:轻度污染(1.2,1.6]</span>
<el-tag style="background: #ff9900;" class="tag" size="small">4级</el-tag>
<span style="color: #ff9900;" class="text">:中度污染(1.6,2]</span>
<el-tag style="background: #cc0000;" class="tag" size="small">5级</el-tag>
<span style="color: #cc0000;" class="text">:重度污染(2,+∞)</span>
<div :style="{ height: layout.height }" style="overflow-y: auto">
<div class="mt10 cardBox">
<el-card v-for="(item, index) in tableStore.table.data" :key="index">
<template #header>
<el-tag v-if="item.data == 3.14159 || item.data == 0"
style="background: #ccc; color: #fff" size="small">
无
</el-tag>
<el-tag v-if="0 < item.data && item.data < 1 && item.data !== 3.14159"
style="background: #339966; color: #fff" size="small">
1级
</el-tag>
<el-tag v-if="1 <= item.data && item.data < 1.2 && item.data !== 3.14159"
style="background: #3399ff; color: #fff" size="small">
2级
</el-tag>
<el-tag v-if="1.2 <= item.data && item.data < 1.6 && item.data !== 3.14159"
style="background: #ffcc33; color: #fff" size="small">
3级
</el-tag>
<el-tag v-if="1.6 <= item.data && item.data < 2 && item.data !== 3.14159"
style="background: #ff9900; color: #fff" size="small">
4级
</el-tag>
<el-tag v-if="2 <= item.data && item.data && item.data !== 3.14159"
style="background: #cc0000; color: #fff" size="small">
5级
</el-tag>
<span>{{ item.name }}</span>
</template>
<div class="card-content">
<div class="card-item" v-for="(item1, index1) in item.children" :key="index1"
@click="queryline(item1.id, item1.pid, item1.name)">
<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: #cc0000; color: #fff" size="small">
5级
</el-tag>
<span class="xdf">
<el-tooltip :open-delay="3000" effect="light" show-arrow
: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="distributionData" v-bind="defaultAttribute">
>
<vxe-column field="qy" :title="titleA == '电压等级'
? '电压等级'
: titleA == '终端厂家'
? '终端厂家'
: titleA == '干扰源类型'
? '干扰源类型'
: titleA == '电网拓扑'
? '区域'
: ''
" show-overflow-tooltip></vxe-column>
<vxe-column field="jcd" title="监测点数(个数)"></vxe-column>
<vxe-column field="zc" title="通讯正常(个数)" sortable></vxe-column>
<vxe-column field="zd" title="通讯中断(个数)" sortable></vxe-column>
</vxe-table>
</div>
</el-col>
</el-row>
</div>
</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 MyEchart from '@/components/echarts/MyEchart.vue'
import TableStore from '@/utils/tableStore'
import { ref, onMounted, provide } from 'vue'
import { mainHeight } from '@/utils/layout'
defineOptions({
name: 'Region/distribution'
})
const dictData = useDictData()
const echartList = ref({})
const titleA = ref('')
const header = ref()
const distributionData: any = ref([])
const options = dictData.getBasicData('Pollution_Statis', ['I_Neg', 'V_Inharm', 'V_Dev', 'V_Unbalance', 'Plt', 'Freq_Dev'])
const tableStore = new TableStore({
url: '/harmonic-boot/PollutionSubstation/deptSubstationRelations',
method: 'POST',
column: [],
loadCallback: () => {
titleA.value = tableStore.table.params.statisticalType.name
header.value.areaRef.change()
// 处理地图数据
map(tableStore.table.data)
histogram(tableStore.table.data)
}
})
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 = 2
tableStore.table.params.reportFlag = 2
tableStore.table.params.serverName = 'event-boot'
// 地图数处理
const map = (res: any) => {
}
const queryline = (id: any, pid: any, name: any) => {
}
// 表格数据处理
// 柱状图数据处理
const histogram = (res: any) => {
echartList.value = {
title: {
text:
titleA.value == '电压等级'
? '电压等级'
: titleA.value == '终端厂家'
? '终端厂家'
: titleA.value == '干扰源类型'
? '干扰源类型'
: titleA.value == '电网拓扑'
? header.value.areaRef.areaName
: '' // 给X轴加单位
},
tooltip: {
formatter: function (params: any) {
// console.log(params);
var tips = ''
for (var i = 0; i < params.length; i++) {
tips += params[i].name + '</br/>'
tips += '监测点数' + ':' + '&nbsp' + '&nbsp' + params[i].value + '</br/>'
}
return tips
}
},
xAxis: {
name:
titleA.value == '电压等级'
? '(电压\n等级)'
: titleA.value == '终端厂家'
? '(终端\n厂家)'
: titleA.value == '干扰源类型'
? '(干扰\n源类型)'
: titleA.value == '电网拓扑'
? '(区域)'
: '', // 给X轴加单位
data: distributionData.value.map((item: any) => item.qy)
},
yAxis: {
name: '监测点数（个）' // 给X轴加单位
},
options: {
series: [
{
// name: '暂降次数',
type: 'bar',
data: distributionData.value.map((item: any) => item.jcd),
barMaxWidth: 30,
itemStyle: {
normal: {
color: '#07CCCA'
}
},
label: {
show: true,
position: 'top',
textStyle: {
//数值样式
color: '#000'
},
fontSize: 12
}
}
]
}
}
}
onMounted(() => {
tableStore.index()
})
const layout = mainHeight(123) 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;
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;
}
.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>