完成污区图
This commit is contained in:
6
auto-imports.d.ts
vendored
6
auto-imports.d.ts
vendored
@@ -46,6 +46,7 @@ declare global {
|
||||
const onServerPrefetch: typeof import('vue')['onServerPrefetch']
|
||||
const onUnmounted: typeof import('vue')['onUnmounted']
|
||||
const onUpdated: typeof import('vue')['onUpdated']
|
||||
const onWatcherCleanup: typeof import('vue')['onWatcherCleanup']
|
||||
const provide: typeof import('vue')['provide']
|
||||
const reactive: typeof import('vue')['reactive']
|
||||
const readonly: typeof import('vue')['readonly']
|
||||
@@ -66,10 +67,13 @@ declare global {
|
||||
const useAttrs: typeof import('vue')['useAttrs']
|
||||
const useCssModule: typeof import('vue')['useCssModule']
|
||||
const useCssVars: typeof import('vue')['useCssVars']
|
||||
const useId: typeof import('vue')['useId']
|
||||
const useLink: typeof import('vue-router')['useLink']
|
||||
const useModel: typeof import('vue')['useModel']
|
||||
const useRoute: typeof import('vue-router')['useRoute']
|
||||
const useRouter: typeof import('vue-router')['useRouter']
|
||||
const useSlots: typeof import('vue')['useSlots']
|
||||
const useTemplateRef: typeof import('vue')['useTemplateRef']
|
||||
const watch: typeof import('vue')['watch']
|
||||
const watchEffect: typeof import('vue')['watchEffect']
|
||||
const watchPostEffect: typeof import('vue')['watchPostEffect']
|
||||
@@ -78,6 +82,6 @@ declare global {
|
||||
// for type re-export
|
||||
declare global {
|
||||
// @ts-ignore
|
||||
export type { Component, ComponentPublicInstance, ComputedRef, ExtractDefaultPropTypes, ExtractPropTypes, ExtractPublicPropTypes, InjectionKey, PropType, Ref, VNode, WritableComputedRef } from 'vue'
|
||||
export type { Component, ComponentPublicInstance, ComputedRef, DirectiveBinding, ExtractDefaultPropTypes, ExtractPropTypes, ExtractPublicPropTypes, InjectionKey, PropType, Ref, MaybeRef, MaybeRefOrGetter, VNode, WritableComputedRef } from 'vue'
|
||||
import('vue')
|
||||
}
|
||||
|
||||
@@ -47,3 +47,24 @@ export function getOnlineRateData(data:any) {
|
||||
data: data
|
||||
})
|
||||
}
|
||||
export function getSubstationInfoById(data:any) {
|
||||
return request({
|
||||
url: '/harmonic-boot/PollutionSubstation/getSubstationInfoById',
|
||||
method: 'post',
|
||||
data: data
|
||||
})
|
||||
}
|
||||
export function getLineInfoById(data:any) {
|
||||
return request({
|
||||
url: '/harmonic-boot/PollutionSubstation/getLineInfoById',
|
||||
method: 'post',
|
||||
data: data
|
||||
})
|
||||
}
|
||||
export function getLineRank(data:any) {
|
||||
return request({
|
||||
url: 'harmonic-boot/PollutionSubstation/getLineRank',
|
||||
method: 'post',
|
||||
data: data
|
||||
})
|
||||
}
|
||||
|
||||
@@ -1,9 +1,11 @@
|
||||
<template>
|
||||
<div ref="chartRef" class="my-chart" />
|
||||
<div class="chart">
|
||||
<div ref="chartRef" class="my-chart" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { onBeforeUnmount, onMounted, ref, defineExpose, watch } from 'vue'
|
||||
import { onBeforeUnmount, onMounted, ref, defineExpose, watch, nextTick } from 'vue'
|
||||
// import echarts from './echarts'
|
||||
import * as echarts from 'echarts' // 全引入
|
||||
import 'echarts-gl'
|
||||
@@ -11,12 +13,15 @@ import 'echarts-liquidfill'
|
||||
import 'echarts/lib/component/dataZoom'
|
||||
import { color, gradeColor3 } from './color'
|
||||
import { useConfig } from '@/stores/config'
|
||||
import { saveAs } from 'file-saver'
|
||||
import { t } from 'vxe-table'
|
||||
// import { nextTick } from 'process'
|
||||
|
||||
const config = useConfig()
|
||||
color[0] = config.layout.elementUiPrimary[0]
|
||||
const chartRef = ref<HTMLDivElement>()
|
||||
|
||||
const props = defineProps(['options'])
|
||||
const props = defineProps(['options', 'isInterVal', 'pieInterVal'])
|
||||
let chart: echarts.ECharts | any = null
|
||||
const resizeHandler = () => {
|
||||
// 不在视野中的时候不进行resize
|
||||
@@ -29,16 +34,18 @@ const resizeHandler = () => {
|
||||
})
|
||||
}
|
||||
const initChart = () => {
|
||||
chart?.dispose()
|
||||
|
||||
if (!props.isInterVal && !props.pieInterVal) {
|
||||
chart?.dispose()
|
||||
}
|
||||
// chart?.dispose()
|
||||
chart = echarts.init(chartRef.value as HTMLDivElement)
|
||||
const options = {
|
||||
title: {
|
||||
left: 'center',
|
||||
textStyle: {
|
||||
color: '#000',
|
||||
fontSize: 18
|
||||
},
|
||||
// textStyle: {
|
||||
color: '#000',
|
||||
fontSize: 18,
|
||||
// },
|
||||
...(props.options?.title || null)
|
||||
},
|
||||
tooltip: {
|
||||
@@ -58,23 +65,37 @@ const initChart = () => {
|
||||
},
|
||||
backgroundColor: 'rgba(0,0,0,0.35)',
|
||||
borderWidth: 0,
|
||||
confine:true,
|
||||
...(props.options?.tooltip || null)
|
||||
},
|
||||
toolbox: {
|
||||
right: 20,
|
||||
top: 20,
|
||||
feature: {
|
||||
saveAsImage: {
|
||||
title: '保存图片',
|
||||
},
|
||||
...(props.options?.toolbox?.featureProps || null),
|
||||
|
||||
},
|
||||
// },
|
||||
...(props.options?.toolbox || null)
|
||||
},
|
||||
legend: {
|
||||
right: 20,
|
||||
top: 0,
|
||||
itemGap: 10,
|
||||
itemStyle: {},
|
||||
textStyle: {
|
||||
fontSize: 12,
|
||||
padding: [2, 0, 0, 0] //[上、右、下、左]
|
||||
},
|
||||
// textStyle: {
|
||||
fontSize: 12,
|
||||
padding: [2, 0, 0, 0], //[上、右、下、左]
|
||||
// },
|
||||
itemWidth: 15,
|
||||
itemHeight: 10,
|
||||
...(props.options?.legend || null)
|
||||
},
|
||||
grid: {
|
||||
top: '50px',
|
||||
top: '60px',
|
||||
left: '30px',
|
||||
right: '70px',
|
||||
bottom: props.options?.options?.dataZoom === null ? '10px' : '40px',
|
||||
@@ -98,14 +119,14 @@ const initChart = () => {
|
||||
end: 100
|
||||
}
|
||||
],
|
||||
toolbox: props.options?.toolbox || {},
|
||||
color: props.options?.color || color,
|
||||
series: props.options?.series,
|
||||
...props.options?.options
|
||||
}
|
||||
handlerBar(options)
|
||||
// 处理柱状图
|
||||
chart.setOption(options)
|
||||
chart.setOption(options,true)
|
||||
|
||||
setTimeout(() => {
|
||||
chart.resize()
|
||||
}, 0)
|
||||
@@ -151,7 +172,10 @@ const handlerYAxis = () => {
|
||||
},
|
||||
axisLabel: {
|
||||
color: '#000',
|
||||
fontSize: 14
|
||||
fontSize: 14,
|
||||
formatter: function (value) {
|
||||
return value.toFixed(0) // 格式化显示为一位小数
|
||||
}
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
@@ -182,16 +206,16 @@ const handlerXAxis = () => {
|
||||
type: 'category',
|
||||
axisTick: { show: false },
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: '#000'
|
||||
}
|
||||
// lineStyle: {
|
||||
color: '#000'
|
||||
// }
|
||||
},
|
||||
axisLabel: {
|
||||
textStyle: {
|
||||
fontFamily: 'dinproRegular',
|
||||
color: '#000',
|
||||
fontSize: '12'
|
||||
}
|
||||
// textStyle: {
|
||||
fontFamily: 'dinproRegular',
|
||||
color: '#000',
|
||||
fontSize: '12'
|
||||
// }
|
||||
}
|
||||
}
|
||||
// props.options?.xAxis 是数组还是对象
|
||||
@@ -209,6 +233,10 @@ const handlerXAxis = () => {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
let throttle: ReturnType<typeof setTimeout>
|
||||
// 动态计算table高度
|
||||
const resizeObserver = new ResizeObserver(entries => {
|
||||
@@ -239,8 +267,20 @@ watch(
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.my-chart {
|
||||
height: 100%;
|
||||
.chart {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
|
||||
.el-button {
|
||||
position: absolute;
|
||||
right: 0px;
|
||||
top: -60px;
|
||||
}
|
||||
|
||||
.my-chart {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -0,0 +1,106 @@
|
||||
<template>
|
||||
|
||||
<el-dialog v-model="dialogVisible" :title="title" width="70%">
|
||||
<vxe-table height="400px" auto-resize :data="tableData" v-loading="loading" v-bind="defaultAttribute"
|
||||
:key="key">
|
||||
|
||||
<vxe-column field="name" title="名称"></vxe-column>
|
||||
<vxe-column field="powerCompany" title="供电公司" v-if="voltageLevelFlag"></vxe-column>
|
||||
<vxe-column field="substation" title="变电站" v-if="voltageLevelFlag"></vxe-column>
|
||||
<vxe-column field="busBar" title="母线" v-if="voltageLevelFlag"></vxe-column>
|
||||
|
||||
<vxe-column field="voltageLevel" title="电压等级"
|
||||
v-if="statisticalName == '谐波电压(%)' && !voltageLevelFlag"></vxe-column>
|
||||
<vxe-column field="data" :title="statisticalName">
|
||||
<template #default="scope">
|
||||
<span v-if="scope.row.data == -1" type="primary" size="small">暂无数据</span>
|
||||
<span v-if="scope.row.data !== -1" type="primary" size="small">
|
||||
{{ scope.row.data }}
|
||||
</span>
|
||||
</template>
|
||||
</vxe-column>
|
||||
<vxe-column field="zd" title="评估">
|
||||
<template #default="scope">
|
||||
<span v-if="
|
||||
0 <= scope.row.data &&
|
||||
scope.row.data < 1 &&
|
||||
scope.row.data !== 3.14159
|
||||
" style=" font-weight: bold;color: #339966;">
|
||||
无污染
|
||||
</span>
|
||||
<span v-if="
|
||||
1 <= scope.row.data &&
|
||||
scope.row.data < 1.2 &&
|
||||
scope.row.data !== 3.14159
|
||||
" style=" font-weight: bold;color: #3399ff;">
|
||||
轻微污染
|
||||
</span>
|
||||
<span v-if="
|
||||
1.2 <= scope.row.data &&
|
||||
scope.row.data < 1.6 &&
|
||||
scope.row.data !== 3.14159
|
||||
" style=" font-weight: bold;color: #ffcc33;">
|
||||
轻度污染
|
||||
</span>
|
||||
<span v-if="
|
||||
1.6 <= scope.row.data &&
|
||||
scope.row.data < 2 &&
|
||||
scope.row.data !== 3.14159
|
||||
" style=" font-weight: bold;color: #ff9900;">
|
||||
中度污染
|
||||
</span>
|
||||
<span v-if="
|
||||
2 <= scope.row.data && scope.row.data && scope.row.data !== 3.14159
|
||||
" style=" font-weight: bold;color: #cc0000;">
|
||||
重度污染
|
||||
</span>
|
||||
<span v-if="scope.row.data == 3.14159" style="color: #000;">
|
||||
暂无评估
|
||||
</span>
|
||||
</template>
|
||||
</vxe-column>
|
||||
</vxe-table>
|
||||
|
||||
</el-dialog>
|
||||
|
||||
</template>
|
||||
<script setup lang='ts'>
|
||||
import { ref, reactive } from 'vue'
|
||||
import { defaultAttribute } from '@/components/table/defaultAttribute'
|
||||
import { getSubstationInfoById, getLineInfoById } from '@/api/harmonic-boot/area'
|
||||
const dialogVisible = ref(false)
|
||||
const loading = ref(false)
|
||||
const voltageLevelFlag = ref(false)
|
||||
const tableData = ref([])
|
||||
const title = ref('')
|
||||
const key = ref(0)
|
||||
const statisticalName = ref('')
|
||||
const open = (row: any, flag: boolean, params: any) => {
|
||||
voltageLevelFlag.value = flag
|
||||
loading.value = true
|
||||
title.value = row.name + '详情'
|
||||
statisticalName.value = params.statisticalType.name + '(%)'
|
||||
tableData.value = []
|
||||
if (flag) {
|
||||
getLineInfoById({ ...params, deptIndex: row.pid, id: row.id }).then((res: any) => {
|
||||
tableData.value = res.data
|
||||
loading.value = false
|
||||
}).catch(() => {
|
||||
loading.value = false
|
||||
})
|
||||
|
||||
} else {
|
||||
getSubstationInfoById({ ...params, deptIndex: row.id }).then((res: any) => {
|
||||
tableData.value = res.data
|
||||
loading.value = false
|
||||
}).catch(() => {
|
||||
loading.value = false
|
||||
})
|
||||
}
|
||||
|
||||
key.value += 1
|
||||
dialogVisible.value = true
|
||||
}
|
||||
defineExpose({ open })
|
||||
</script>
|
||||
<style lang="scss" scoped></style>
|
||||
@@ -0,0 +1,291 @@
|
||||
<template>
|
||||
|
||||
<el-dialog v-model="dialogVisible" title="排名前10的监测点" width="1200">
|
||||
<div style="height: 500px">
|
||||
<my-echart class="tall" :options="echartList" />
|
||||
</div>
|
||||
|
||||
</el-dialog>
|
||||
|
||||
</template>
|
||||
<script setup lang='ts'>
|
||||
import { ref, reactive } from 'vue'
|
||||
import MyEchart from '@/components/echarts/MyEchart.vue'
|
||||
import { getLineRank } from '@/api/harmonic-boot/area'
|
||||
import * as echarts from 'echarts/core'
|
||||
const dialogVisible = ref(false)
|
||||
|
||||
const echartList = ref({})
|
||||
|
||||
const open = (row: any,) => {
|
||||
getLineRank({ ...row, reportFlag: 3, id: '' }).then((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.data.map((item: any) => item.name),
|
||||
axisLabel: {
|
||||
fontFamily: 'dinproRegular',
|
||||
color: '#000',
|
||||
fontSize: '12',
|
||||
rotate: 30,
|
||||
}
|
||||
},
|
||||
yAxis: {
|
||||
name: '等级',// 给X轴加单位
|
||||
min: 0,
|
||||
max: 2,
|
||||
interval: 0.2,
|
||||
splitLine: {
|
||||
show: false
|
||||
},
|
||||
|
||||
axisLabel: {
|
||||
show: true,
|
||||
|
||||
// 这里重新定义就可以
|
||||
formatter: function (value, index) {
|
||||
var texts = []
|
||||
if (value === 1) {
|
||||
texts.push('1级')
|
||||
} else if (value === 1.2) {
|
||||
texts.push('2级')
|
||||
} else if (value === 1.4) {
|
||||
texts.push('3级')
|
||||
} else if (value === 1.6) {
|
||||
texts.push('4级')
|
||||
} else if (value === 2) {
|
||||
texts.push('5级')
|
||||
}
|
||||
return texts
|
||||
}
|
||||
|
||||
},
|
||||
},
|
||||
|
||||
options: {
|
||||
dataZoom: null,
|
||||
series: [
|
||||
{
|
||||
|
||||
type: 'bar',
|
||||
data: res.data.map((item: any) => {
|
||||
return item.data == 3.14159 ? 0.14159 : item.data
|
||||
}),
|
||||
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 || params.value == 0.14159) {
|
||||
return '#ccc'
|
||||
} else if (params.value > 2) {
|
||||
return new echarts.graphic.LinearGradient(
|
||||
0,
|
||||
1,
|
||||
0,
|
||||
0,
|
||||
[
|
||||
{
|
||||
offset: 1,
|
||||
color: '#CC0000'
|
||||
}
|
||||
],
|
||||
false
|
||||
)
|
||||
} else if (1.6 < params.value && params.value <= 2) {
|
||||
return new echarts.graphic.LinearGradient(
|
||||
0,
|
||||
1,
|
||||
0,
|
||||
0,
|
||||
[
|
||||
{
|
||||
offset: 1,
|
||||
color: '#FF9900'
|
||||
}
|
||||
],
|
||||
false
|
||||
)
|
||||
} else if (1.2 < params.value && params.value <= 1.6) {
|
||||
return new echarts.graphic.LinearGradient(
|
||||
0,
|
||||
1,
|
||||
0,
|
||||
0,
|
||||
[
|
||||
{
|
||||
offset: 1,
|
||||
color: '#FFCC33'
|
||||
}
|
||||
],
|
||||
false
|
||||
)
|
||||
} else if (1 < params.value && params.value <= 1.2) {
|
||||
return new echarts.graphic.LinearGradient(
|
||||
0,
|
||||
1,
|
||||
0,
|
||||
0,
|
||||
[
|
||||
{
|
||||
offset: 1,
|
||||
color: '#3399FF'
|
||||
}
|
||||
],
|
||||
false
|
||||
)
|
||||
} else if (
|
||||
0 < params.value &&
|
||||
params.value <= 1 &&
|
||||
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: 1,
|
||||
lineStyle: {
|
||||
color: '#339966'
|
||||
},
|
||||
label: {
|
||||
//position: "middle",
|
||||
formatter: '{b}',
|
||||
textStyle: {
|
||||
color: '#339966'
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
name: '',
|
||||
yAxis: 1.2,
|
||||
lineStyle: {
|
||||
color: '#3399FF'
|
||||
},
|
||||
label: {
|
||||
// position: "middle",
|
||||
formatter: '{b}',
|
||||
textStyle: {
|
||||
color: '#3399FF'
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
name: '',
|
||||
yAxis: 1.4,
|
||||
lineStyle: {
|
||||
color: '#FFCC33'
|
||||
},
|
||||
label: {
|
||||
// position: "middle",
|
||||
formatter: '{b}',
|
||||
textStyle: {
|
||||
color: '#FFCC33'
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
name: '',
|
||||
yAxis: 1.6,
|
||||
lineStyle: {
|
||||
color: '#FF9900'
|
||||
},
|
||||
label: {
|
||||
// position: "middle",
|
||||
formatter: '{b}',
|
||||
textStyle: {
|
||||
color: '#FF9900'
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
name: '',
|
||||
yAxis: 2,
|
||||
lineStyle: {
|
||||
color: '#CC0000'
|
||||
},
|
||||
label: {
|
||||
// position: "middle",
|
||||
formatter: '{b}',
|
||||
textStyle: {
|
||||
color: '#CC0000'
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
|
||||
|
||||
dialogVisible.value = true
|
||||
}
|
||||
defineExpose({ open })
|
||||
</script>
|
||||
<style lang="scss" scoped></style>
|
||||
@@ -8,7 +8,8 @@
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" icon="el-icon-DataAnalysis">排名前10监测点</el-button>
|
||||
<el-button type="primary" icon="el-icon-DataAnalysis"
|
||||
@click="rankingClick(null, true)">排名前10监测点</el-button>
|
||||
</el-form-item>
|
||||
</template>
|
||||
</TableHeader>
|
||||
@@ -29,36 +30,40 @@
|
||||
<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>
|
||||
<div style="cursor: pointer;" @click="queryline(item, false)">
|
||||
<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>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</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)">
|
||||
@click="queryline(item1, true)">
|
||||
<el-tag v-if="item1.data == 3.14159 || item1.data == 0"
|
||||
style="background: #ccc; color: #fff" size="small">
|
||||
无
|
||||
@@ -84,9 +89,9 @@
|
||||
5级
|
||||
</el-tag>
|
||||
<span class="xdf">
|
||||
<el-tooltip :open-delay="3000" effect="light" show-arrow
|
||||
:content="item1.name" popper-class="atooltip" placement="bottom-start">
|
||||
|
||||
<el-tooltip :show-arrow="false" :offset="-0" :content="item1.name"
|
||||
popper-class="atooltip" placement="bottom-start">
|
||||
|
||||
<div class="tooltipText">
|
||||
{{ item1.name }}
|
||||
</div>
|
||||
@@ -105,26 +110,69 @@
|
||||
<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 height="auto" auto-resize :data="tableStore.table.data" v-bind="defaultAttribute">
|
||||
|
||||
<vxe-column field="name" title="名称"></vxe-column>
|
||||
<vxe-column field="zc" title="污染值">
|
||||
<template #default="scope">
|
||||
<span v-if="scope.row.data == 3.14159" style="color: #000;">
|
||||
暂无数据
|
||||
</span>
|
||||
<span v-if="scope.row.data !== 3.14159" style="color: #000;">
|
||||
{{ scope.row.data }}
|
||||
</span>
|
||||
</template>
|
||||
</vxe-column>
|
||||
<vxe-column field="zd" title="评估">
|
||||
<template #default="scope">
|
||||
<span v-if="
|
||||
0 <= scope.row.data &&
|
||||
scope.row.data < 1 &&
|
||||
scope.row.data !== 3.14159
|
||||
" style=" font-weight: bold;color: #339966;">
|
||||
无污染
|
||||
</span>
|
||||
<span v-if="
|
||||
1 <= scope.row.data &&
|
||||
scope.row.data < 1.2 &&
|
||||
scope.row.data !== 3.14159
|
||||
" style=" font-weight: bold;color: #3399ff;">
|
||||
轻微污染
|
||||
</span>
|
||||
<span v-if="
|
||||
1.2 <= scope.row.data &&
|
||||
scope.row.data < 1.6 &&
|
||||
scope.row.data !== 3.14159
|
||||
" style=" font-weight: bold;color: #ffcc33;">
|
||||
轻度污染
|
||||
</span>
|
||||
<span v-if="
|
||||
1.6 <= scope.row.data &&
|
||||
scope.row.data < 2 &&
|
||||
scope.row.data !== 3.14159
|
||||
" style=" font-weight: bold;color: #ff9900;">
|
||||
中度污染
|
||||
</span>
|
||||
<span v-if="
|
||||
2 <= scope.row.data && scope.row.data && scope.row.data !== 3.14159
|
||||
" style=" font-weight: bold;color: #cc0000;">
|
||||
重度污染
|
||||
</span>
|
||||
<span v-if="scope.row.data == 3.14159" style="color: #000;">
|
||||
暂无评估
|
||||
</span>
|
||||
</template>
|
||||
</vxe-column>
|
||||
</vxe-table>
|
||||
</div>
|
||||
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
<!-- 详情 -->
|
||||
<provinceDetails ref="provinceDetailsRef" />
|
||||
<!-- 排名前10的监测点 -->
|
||||
<ranking ref="rankingRef" />
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
@@ -132,32 +180,34 @@ 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 * as echarts from 'echarts/core'
|
||||
defineOptions({
|
||||
name: 'Region/distribution'
|
||||
})
|
||||
|
||||
const dictData = useDictData()
|
||||
const echartList = ref({})
|
||||
const titleA = ref('')
|
||||
const provinceDetailsRef = ref()
|
||||
const rankingRef = 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)
|
||||
header.value.areaRef.change()
|
||||
|
||||
|
||||
|
||||
|
||||
}
|
||||
})
|
||||
@@ -167,35 +217,28 @@ 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.reportFlag = 3
|
||||
tableStore.table.params.serverName = 'event-boot'
|
||||
|
||||
|
||||
|
||||
|
||||
// 地图数处理
|
||||
const map = (res: any) => {
|
||||
|
||||
const rankingClick = () => {
|
||||
rankingRef.value.open(tableStore.table.params)
|
||||
}
|
||||
const queryline = (id: any, pid: any, name: any) => {
|
||||
|
||||
const queryline = (row: any, flag: boolean) => {
|
||||
provinceDetailsRef.value.open(row, flag, tableStore.table.params)
|
||||
}
|
||||
|
||||
// 表格数据处理
|
||||
// 柱状图数据处理
|
||||
const histogram = (res: any) => {
|
||||
console.log(123);
|
||||
|
||||
echartList.value = {
|
||||
title: {
|
||||
text:
|
||||
titleA.value == '电压等级'
|
||||
? '电压等级'
|
||||
: titleA.value == '终端厂家'
|
||||
? '终端厂家'
|
||||
: titleA.value == '干扰源类型'
|
||||
? '干扰源类型'
|
||||
: titleA.value == '电网拓扑'
|
||||
? header.value.areaRef.areaName
|
||||
: '' // 给X轴加单位
|
||||
text: '区域'
|
||||
},
|
||||
tooltip: {
|
||||
formatter: function (params: any) {
|
||||
@@ -203,49 +246,245 @@ const histogram = (res: any) => {
|
||||
var tips = ''
|
||||
for (var i = 0; i < params.length; i++) {
|
||||
tips += params[i].name + '</br/>'
|
||||
tips += '监测点数' + ':' + ' ' + ' ' + params[i].value + '</br/>'
|
||||
tips += '监测点数' + ':' + ' ' + ' ' + (params[i].value == 0.14159 ? '暂无数据' : 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)
|
||||
name: '区域',
|
||||
data: res.map((item: any) => item.name)
|
||||
},
|
||||
yAxis: {
|
||||
name: '监测点数（个）' // 给X轴加单位
|
||||
name: '等级',// 给X轴加单位
|
||||
min: 0,
|
||||
max: 2,
|
||||
interval: 0.2,
|
||||
splitLine: {
|
||||
show: false
|
||||
},
|
||||
axisLabel: {
|
||||
show: true,
|
||||
|
||||
// 这里重新定义就可以
|
||||
formatter: function (value, index) {
|
||||
var texts = []
|
||||
if (value === 1) {
|
||||
texts.push('1级')
|
||||
} else if (value === 1.2) {
|
||||
texts.push('2级')
|
||||
} else if (value === 1.4) {
|
||||
texts.push('3级')
|
||||
} else if (value === 1.6) {
|
||||
texts.push('4级')
|
||||
} else if (value === 2) {
|
||||
texts.push('5级')
|
||||
}
|
||||
return texts
|
||||
}
|
||||
},
|
||||
},
|
||||
|
||||
options: {
|
||||
dataZoom: null,
|
||||
series: [
|
||||
{
|
||||
// name: '暂降次数',
|
||||
|
||||
type: 'bar',
|
||||
data: distributionData.value.map((item: any) => item.jcd),
|
||||
data: res.map((item: any) => {
|
||||
return item.data == 3.14159 ? 0.14159 : item.data
|
||||
}),
|
||||
barMaxWidth: 30,
|
||||
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: '#07CCCA'
|
||||
// 随机显示
|
||||
//color:function(d){return "#"+Math.floor(Math.random()*(256*256*256-1)).toString(16);}
|
||||
|
||||
// 定制显示（按顺序）
|
||||
color: function (params) {
|
||||
if (params.value == 0 || params.value == 0.14159) {
|
||||
return '#ccc'
|
||||
} else if (params.value > 2) {
|
||||
return new echarts.graphic.LinearGradient(
|
||||
0,
|
||||
1,
|
||||
0,
|
||||
0,
|
||||
[
|
||||
{
|
||||
offset: 1,
|
||||
color: '#CC0000'
|
||||
}
|
||||
],
|
||||
false
|
||||
)
|
||||
} else if (1.6 < params.value && params.value <= 2) {
|
||||
return new echarts.graphic.LinearGradient(
|
||||
0,
|
||||
1,
|
||||
0,
|
||||
0,
|
||||
[
|
||||
{
|
||||
offset: 1,
|
||||
color: '#FF9900'
|
||||
}
|
||||
],
|
||||
false
|
||||
)
|
||||
} else if (1.2 < params.value && params.value <= 1.6) {
|
||||
return new echarts.graphic.LinearGradient(
|
||||
0,
|
||||
1,
|
||||
0,
|
||||
0,
|
||||
[
|
||||
{
|
||||
offset: 1,
|
||||
color: '#FFCC33'
|
||||
}
|
||||
],
|
||||
false
|
||||
)
|
||||
} else if (1 < params.value && params.value <= 1.2) {
|
||||
return new echarts.graphic.LinearGradient(
|
||||
0,
|
||||
1,
|
||||
0,
|
||||
0,
|
||||
[
|
||||
{
|
||||
offset: 1,
|
||||
color: '#3399FF'
|
||||
}
|
||||
],
|
||||
false
|
||||
)
|
||||
} else if (
|
||||
0 < params.value &&
|
||||
params.value <= 1 &&
|
||||
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
|
||||
)
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
label: {
|
||||
show: true,
|
||||
position: 'top',
|
||||
textStyle: {
|
||||
//数值样式
|
||||
color: '#000'
|
||||
markLine: {
|
||||
silent: false,
|
||||
symbol: 'circle',
|
||||
lineStyle: {
|
||||
color: 'red',
|
||||
width: 1
|
||||
},
|
||||
fontSize: 12
|
||||
}
|
||||
emphasis: {
|
||||
lineStyle: {
|
||||
width: 1
|
||||
}
|
||||
},
|
||||
data: [
|
||||
{
|
||||
name: '',
|
||||
yAxis: 1,
|
||||
lineStyle: {
|
||||
color: '#339966'
|
||||
},
|
||||
label: {
|
||||
//position: "middle",
|
||||
formatter: '{b}',
|
||||
textStyle: {
|
||||
color: '#339966'
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
name: '',
|
||||
yAxis: 1.2,
|
||||
lineStyle: {
|
||||
color: '#3399FF'
|
||||
},
|
||||
label: {
|
||||
// position: "middle",
|
||||
formatter: '{b}',
|
||||
textStyle: {
|
||||
color: '#3399FF'
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
name: '',
|
||||
yAxis: 1.4,
|
||||
lineStyle: {
|
||||
color: '#FFCC33'
|
||||
},
|
||||
label: {
|
||||
// position: "middle",
|
||||
formatter: '{b}',
|
||||
textStyle: {
|
||||
color: '#FFCC33'
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
name: '',
|
||||
yAxis: 1.6,
|
||||
lineStyle: {
|
||||
color: '#FF9900'
|
||||
},
|
||||
label: {
|
||||
// position: "middle",
|
||||
formatter: '{b}',
|
||||
textStyle: {
|
||||
color: '#FF9900'
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
name: '',
|
||||
yAxis: 2,
|
||||
lineStyle: {
|
||||
color: '#CC0000'
|
||||
},
|
||||
label: {
|
||||
// position: "middle",
|
||||
formatter: '{b}',
|
||||
textStyle: {
|
||||
color: '#CC0000'
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
|
||||
}
|
||||
]
|
||||
}
|
||||
@@ -294,8 +533,12 @@ const layout1 = mainHeight(93) as any
|
||||
.el-card__header {
|
||||
padding: 10px !important;
|
||||
color: #fff;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
div {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.el-card__body {
|
||||
@@ -314,6 +557,7 @@ const layout1 = mainHeight(93) as any
|
||||
margin-bottom: 20px;
|
||||
width: 50%;
|
||||
display: flex;
|
||||
cursor: pointer;
|
||||
|
||||
}
|
||||
|
||||
@@ -337,5 +581,4 @@ const layout1 = mainHeight(93) as any
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user