微调 全景展示
This commit is contained in:
File diff suppressed because it is too large
Load Diff
@@ -26,7 +26,7 @@ const fetchConfig = async (name: string) => {
|
||||
// fetchConfig()
|
||||
|
||||
const emit = defineEmits(['getRegionByRegion', 'eliminate', 'clickMap'])
|
||||
onMounted(() => { })
|
||||
onMounted(() => {})
|
||||
|
||||
const GetEchar = async (name: string) => {
|
||||
let chartDom = document.getElementById('chartMap')
|
||||
@@ -187,7 +187,6 @@ const GetEchar = async (name: string) => {
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
}
|
||||
|
||||
const MapReturn = (name: string) => {
|
||||
@@ -213,6 +212,7 @@ const circle = () => {
|
||||
}
|
||||
const resizeHandler = () => {
|
||||
myCharts.value?.resize()
|
||||
myCharts.value?.setOption(myCharts.value.getOption()) // 强制更新配置
|
||||
}
|
||||
onBeforeUnmount(() => {
|
||||
window.removeEventListener('resize', resizeHandler)
|
||||
|
||||
@@ -11,6 +11,11 @@
|
||||
<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.label" :value="item.id" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" icon="el-icon-DataAnalysis" @click="rankingClick(null, true)">
|
||||
排名前10监测点
|
||||
@@ -21,17 +26,7 @@
|
||||
<div v-loading="tableStore.table.loading" class="pr10">
|
||||
<el-row>
|
||||
<el-col :span="12" class="pd10" style="position: relative">
|
||||
<el-radio-group v-model="radio1" class="ml10 group" @change="radioChange" size="small">
|
||||
<el-radio-button label="列表" :value="0" />
|
||||
<el-radio-button label="图形" :value="1" />
|
||||
</el-radio-group>
|
||||
<el-carousel
|
||||
ref="carouselRef"
|
||||
:autoplay="false"
|
||||
:arrow="'never'"
|
||||
:height="`calc(${layout.height} + 35px)`"
|
||||
>
|
||||
<el-carousel-item style="padding: 0 1px">
|
||||
<div class="legend">
|
||||
<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>
|
||||
@@ -42,7 +37,10 @@
|
||||
<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" class="mt10">
|
||||
</div>
|
||||
<el-tabs v-model="radio1" type="border-card" @tab-change="handleTabChange">
|
||||
<el-tab-pane label="列表" :name="0">
|
||||
<div :style="{ height: layout.height }" style="overflow-y: auto">
|
||||
<div class="cardBox">
|
||||
<el-card v-for="(item, index) in tableStore.table.data" :key="index">
|
||||
<template #header>
|
||||
@@ -161,11 +159,18 @@
|
||||
</el-card>
|
||||
</div>
|
||||
</div>
|
||||
</el-carousel-item>
|
||||
<el-carousel-item>
|
||||
<MyEchartMap ref="EchartMap" :options="echartMapList" class="map" />
|
||||
</el-carousel-item>
|
||||
</el-carousel>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="图形" :name="1">
|
||||
<MyEchartMap
|
||||
:style="layout"
|
||||
style="width: 100%"
|
||||
id="EchartMap"
|
||||
ref="EchartMap"
|
||||
:options="echartMapList"
|
||||
class="map"
|
||||
/>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<my-echart class="tall" :options="echartList" />
|
||||
@@ -260,15 +265,16 @@ const options = dictData.getBasicData('Pollution_Statis', [
|
||||
'Plt',
|
||||
'Freq_Dev'
|
||||
])
|
||||
const sign = ref([
|
||||
{ label: '电网侧', id: '0' },
|
||||
{ label: '用户侧', id: '1' }
|
||||
])
|
||||
const tableStore = new TableStore({
|
||||
url: '/harmonic-boot/PollutionSubstation/deptSubstationRelations',
|
||||
method: 'POST',
|
||||
column: [],
|
||||
loadCallback: () => {
|
||||
map(tableStore.table.data)
|
||||
histogram(tableStore.table.data)
|
||||
EchartMap.value.GetEchar(dictData.state.area[0].name)
|
||||
header.value.areaRef.change()
|
||||
}
|
||||
})
|
||||
provide('tableStore', tableStore)
|
||||
@@ -276,11 +282,16 @@ 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.powerFlag = '2'
|
||||
tableStore.table.params.reportFlag = 3
|
||||
tableStore.table.params.serverName = 'event-boot'
|
||||
const radioChange = (val: any) => {
|
||||
carouselRef.value.setActiveItem(val)
|
||||
const handleTabChange = (val: any) => {
|
||||
if (val == 0) return
|
||||
setTimeout(() => {
|
||||
map(tableStore.table.data)
|
||||
EchartMap.value.GetEchar(dictData.state.area[0].name)
|
||||
// header.value.areaRef.change()
|
||||
}, 100)
|
||||
}
|
||||
// 地图数处理
|
||||
const rankingClick = () => {
|
||||
@@ -629,6 +640,7 @@ const map = (res: any) => {
|
||||
max: 2,
|
||||
left: 25,
|
||||
bottom: 40,
|
||||
show: false,
|
||||
pieces: [
|
||||
{
|
||||
gt: 2,
|
||||
@@ -686,7 +698,7 @@ onMounted(() => {
|
||||
tableStore.index()
|
||||
}, 10)
|
||||
})
|
||||
const layout = mainHeight(133) as any
|
||||
const layout = mainHeight(160) as any
|
||||
const layout1 = mainHeight(93) as any
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
@@ -767,14 +779,15 @@ const layout1 = mainHeight(93) as any
|
||||
}
|
||||
.map {
|
||||
height: v-bind('layout.height');
|
||||
width: 100%;
|
||||
}
|
||||
:deep(.el-carousel__indicators) {
|
||||
display: none;
|
||||
}
|
||||
.group {
|
||||
.legend {
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
top: 10px;
|
||||
right: 15px;
|
||||
top: 17px;
|
||||
z-index: 99;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -10,8 +10,11 @@
|
||||
<div class="boxSteps">
|
||||
<el-steps>
|
||||
<template v-for="(item, i) in Voltage">
|
||||
<el-step :class="active == i ? 'highlight' : ''" :title="item.name"
|
||||
@click="handleClick(i)"></el-step>
|
||||
<el-step
|
||||
:class="active == i ? 'highlight' : ''"
|
||||
:title="item.name"
|
||||
@click="handleClick(i)"
|
||||
></el-step>
|
||||
</template>
|
||||
</el-steps>
|
||||
</div>
|
||||
@@ -56,12 +59,12 @@
|
||||
<vxe-colgroup :title="item" v-for="(item, i) in title">
|
||||
<vxe-column title="监测点数 " field="overNum">
|
||||
<template #default="scope">
|
||||
<span>{{ scope.row.list[i].overNum }}</span>
|
||||
<span>{{ scope.row.list == null ? '' : scope.row.list[i].overNum }}</span>
|
||||
</template>
|
||||
</vxe-column>
|
||||
<vxe-column title="天数" field="overDay">
|
||||
<template #default="scope">
|
||||
<span>{{ scope.row.list[i].overDay }}</span>
|
||||
<span>{{ scope.row.list == null ? '' : scope.row.list[i].overDay }}</span>
|
||||
</template>
|
||||
</vxe-column>
|
||||
</vxe-colgroup>
|
||||
@@ -108,7 +111,8 @@ const echart = (row: any) => {
|
||||
|
||||
let chart = echarts.init(chartRef.value as HTMLDivElement)
|
||||
|
||||
let dataname = ['频率偏差(Hz)',
|
||||
let dataname = [
|
||||
'频率偏差(Hz)',
|
||||
'电压偏差(%)',
|
||||
'电压总谐波畸变率(%)',
|
||||
'三相电压不平衡度(%)',
|
||||
@@ -116,7 +120,8 @@ const echart = (row: any) => {
|
||||
'谐波电压(%)',
|
||||
'谐波电流(%)',
|
||||
'间谐波电压(%)',
|
||||
'负序电流(A)']
|
||||
'负序电流(A)'
|
||||
]
|
||||
// let datamax = [100, 100, 100, 100, 100, 100]
|
||||
let indicator = []
|
||||
for (let i = 0; i < dataname.length; i++) {
|
||||
|
||||
Reference in New Issue
Block a user