联调全景展示 省级 详情页
This commit is contained in:
@@ -49,3 +49,39 @@ export function getGridDiagramMonitor(data: any) {
|
||||
export function getHalfReport(data: any) {
|
||||
return request({ url: '/device-boot/line/getHalfReport', method: 'post', data })
|
||||
}
|
||||
// 综合评估概览数据
|
||||
export function getAssessOverview(data: any) {
|
||||
return request({ url: '/harmonic-boot/grid/getAssessOverview', method: 'post', data })
|
||||
}
|
||||
// 稳态电能质量水平评价概览数据
|
||||
export function getEvaluationOverview(data: any) {
|
||||
return request({ url: '/harmonic-boot/grid/getEvaluationOverview', method: 'post', data })
|
||||
}
|
||||
// 综合评估详细数据
|
||||
export function getAssessDetail(data: any) {
|
||||
return request({ url: '/harmonic-boot/grid/getAssessDetail', method: 'post', data })
|
||||
}
|
||||
// 稳态电能质量水平平均值、标准差
|
||||
export function getEvaluationData(data: any) {
|
||||
return request({ url: '/harmonic-boot/grid/getEvaluationData', method: 'post', data })
|
||||
}
|
||||
// 稳态指标超标详情
|
||||
export function evaluationDetail(data: any) {
|
||||
return request({ url: '/harmonic-boot/grid/evaluationDetail', method: 'post', data })
|
||||
}
|
||||
// 各稳态指标的环比
|
||||
export function evaluationRatio(data: any) {
|
||||
return request({ url: '/harmonic-boot/grid/evaluationRatio', method: 'post', data })
|
||||
}
|
||||
// 暂态统计评价
|
||||
export function getEventLevelEvaluation(data: any) {
|
||||
return request({ url: '/event-boot/gridDiagram/getEventLevelEvaluation', method: 'post', data })
|
||||
}
|
||||
// 暂态统计详情
|
||||
export function getEventStatisticsList(data: any) {
|
||||
return request({ url: '/event-boot/gridDiagram/getEventStatisticsList', method: 'post', data })
|
||||
}
|
||||
// 获取监测点暂降事件分析
|
||||
export function getEventReason(data: any) {
|
||||
return request({ url: '/event-boot/areaAnalysis/getEventReason', method: 'post', data })
|
||||
}
|
||||
|
||||
BIN
src/assets/img/DYPC.png
Normal file
BIN
src/assets/img/DYPC.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 851 B |
BIN
src/assets/img/JBL.png
Normal file
BIN
src/assets/img/JBL.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 700 B |
BIN
src/assets/img/PLPC.png
Normal file
BIN
src/assets/img/PLPC.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.0 KiB |
BIN
src/assets/img/SB.png
Normal file
BIN
src/assets/img/SB.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 474 B |
BIN
src/assets/img/SXDY.png
Normal file
BIN
src/assets/img/SXDY.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 935 B |
@@ -3,29 +3,29 @@
|
||||
<el-dialog draggable title="综合评估详情" v-model="dialogVisible" width="1400px">
|
||||
<div>
|
||||
<vxe-table v-bind="defaultAttribute" ref="vxeRef" height="300px" :data="tableData">
|
||||
<vxe-column field="devName" title="所属区域" />
|
||||
<vxe-column field="devName" title="综合评估得分" />
|
||||
<vxe-column field="devName" title="指标合格率" />
|
||||
<vxe-column field="deptName" title="所属区域" />
|
||||
<vxe-column field="assessData" title="综合评估得分" :formatter="formatter" />
|
||||
<vxe-column field="qualifyData" title="指标合格率" :formatter="formatter" />
|
||||
<vxe-colgroup title="各项指标得分">
|
||||
<vxe-colgroup title="电压偏差">
|
||||
<vxe-column field="devName" title="评估得分" />
|
||||
<vxe-column field="devName" title="指标合格率" />
|
||||
<vxe-column field="vdevAssessData" title="评估得分" :formatter="formatter" />
|
||||
<vxe-column field="vdevQualifyData" title="指标合格率" :formatter="formatter" />
|
||||
</vxe-colgroup>
|
||||
<vxe-colgroup title="评率偏差">
|
||||
<vxe-column field="devName" title="评估得分" />
|
||||
<vxe-column field="devName" title="指标合格率" />
|
||||
<vxe-colgroup title="频率偏差">
|
||||
<vxe-column field="freqAssessData" title="评估得分" :formatter="formatter" />
|
||||
<vxe-column field="freqQualifyData" title="指标合格率" :formatter="formatter" />
|
||||
</vxe-colgroup>
|
||||
<vxe-colgroup title="谐波含量">
|
||||
<vxe-column field="devName" title="评估得分" />
|
||||
<vxe-column field="devName" title="指标合格率" />
|
||||
<vxe-column field="harmAssessData" title="评估得分" :formatter="formatter" />
|
||||
<vxe-column field="harmQualifyData" title="指标合格率" :formatter="formatter" />
|
||||
</vxe-colgroup>
|
||||
<vxe-colgroup title="电压闪变">
|
||||
<vxe-column field="devName" title="评估得分" />
|
||||
<vxe-column field="devName" title="指标合格率" />
|
||||
<vxe-column field="flickerAssessData" title="评估得分" :formatter="formatter" />
|
||||
<vxe-column field="flickerQualifyData" title="指标合格率" :formatter="formatter" />
|
||||
</vxe-colgroup>
|
||||
<vxe-colgroup title="三相不平衡度">
|
||||
<vxe-column field="devName" title="评估得分" />
|
||||
<vxe-column field="devName" title="指标合格率" />
|
||||
<vxe-column field="unbalanceAssessData" title="评估得分" :formatter="formatter" />
|
||||
<vxe-column field="unbalanceQualifyData" title="指标合格率" :formatter="formatter" />
|
||||
</vxe-colgroup>
|
||||
</vxe-colgroup>
|
||||
</vxe-table>
|
||||
@@ -39,22 +39,35 @@
|
||||
import { ref } from 'vue'
|
||||
import MyEChart from '@/components/echarts/MyEchart.vue'
|
||||
import { defaultAttribute } from '@/components/table/defaultAttribute'
|
||||
|
||||
import { getAssessDetail } from '@/api/device-boot/panorama'
|
||||
const dialogVisible: any = ref(false)
|
||||
|
||||
const tableData: any = ref([
|
||||
{
|
||||
devName: 123
|
||||
}
|
||||
])
|
||||
const tableData: any = ref([])
|
||||
|
||||
const picEChart = ref({
|
||||
const picEChart = ref()
|
||||
const open = async (row: any) => {
|
||||
getAssessDetail(row).then(res => {
|
||||
tableData.value = res.data
|
||||
picEChart.value = {
|
||||
tooltip: {
|
||||
formatter: function (params: any) {
|
||||
let tips = ''
|
||||
|
||||
if (params[0].value == 3.14159) {
|
||||
tips += params[0].name + ':暂无数据<br/>'
|
||||
} else {
|
||||
tips += params[0].name + ':' + params[0].value + '%<br/>'
|
||||
}
|
||||
|
||||
return tips
|
||||
}
|
||||
},
|
||||
title: {
|
||||
text: ''
|
||||
},
|
||||
xAxis: {
|
||||
name: '(区域)',
|
||||
data: ['承德', '承德', '承德', '承德', '承德', '承德', '承德']
|
||||
data: res.data.map((item: any) => item.deptName)
|
||||
},
|
||||
yAxis: {
|
||||
name: '',
|
||||
@@ -67,14 +80,22 @@ const picEChart = ref({
|
||||
name: '评估得分',
|
||||
type: 'bar',
|
||||
|
||||
data: [12, 12, 12, 12, 12, 12, 12]
|
||||
data: res.data.map((item: any) => item.assessData)
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
})
|
||||
const open = async (row: any) => {
|
||||
|
||||
dialogVisible.value = true
|
||||
}
|
||||
const formatter = (row: any) => {
|
||||
if (row.cellValue == 3.14159) {
|
||||
return '暂无数据'
|
||||
} else {
|
||||
return row.cellValue
|
||||
}
|
||||
}
|
||||
|
||||
defineExpose({ open })
|
||||
</script>
|
||||
|
||||
@@ -15,8 +15,13 @@
|
||||
<el-col :span="12">
|
||||
<div class="title">
|
||||
<span>分布统计</span>
|
||||
<el-select v-model="time" style="width: 120px; margin-right: 80px" @change="statiStics">
|
||||
<el-option v-for="item in options" :key="item.id" :label="item.name" :value="item.id" />
|
||||
<el-select
|
||||
v-model="statisticalType"
|
||||
:value-key='id'
|
||||
style="width: 120px; margin-right: 80px"
|
||||
@change="statiStics"
|
||||
>
|
||||
<el-option v-for="item in options" :key="item.id" :label="item.name" :value="item" />
|
||||
</el-select>
|
||||
</div>
|
||||
<div class="pie">
|
||||
@@ -54,10 +59,12 @@ import { useDictData } from '@/stores/dictData'
|
||||
import { getGridDiagramLineTendency, getGridDiagramLineData, getHalfReport } from '@/api/device-boot/panorama'
|
||||
const dictData = useDictData()
|
||||
const dialogVisible: any = ref(false)
|
||||
const time = ref('1')
|
||||
|
||||
const Voltage = dictData.getBasicData('Dev_Voltage_Stand')
|
||||
const tableData: any = ref([])
|
||||
const options = dictData.getBasicData('Statistical_Type', ['Report_Type'])
|
||||
const time = ref('1')
|
||||
const statisticalType = ref(options[0])
|
||||
const loadTypeArr = dictData.getBasicData('Interference_Source')
|
||||
|
||||
const rowList: any = ref({})
|
||||
@@ -132,13 +139,13 @@ const analysis = (e: any) => {
|
||||
}
|
||||
// 统计
|
||||
const statiStics = () => {
|
||||
getGridDiagramLineData(rowList.value).then(res => {
|
||||
getGridDiagramLineData({ ...rowList.value, statisticalType: statisticalType.value }).then(res => {
|
||||
picEChart.value = {
|
||||
title: {
|
||||
text: ''
|
||||
},
|
||||
xAxis: {
|
||||
name: '(区域)',
|
||||
|
||||
data: res.data.map((item: any) => item.orgName)
|
||||
},
|
||||
yAxis: {
|
||||
|
||||
@@ -2,43 +2,47 @@
|
||||
<template>
|
||||
<!-- 终端 -->
|
||||
<el-dialog draggable title="稳态电能质量水平评估详情" v-model="dialogVisible" width="1400px">
|
||||
<el-row style="height: 300px" :gutter="20">
|
||||
<el-col :span="14">
|
||||
<el-row style="height: 330px" :gutter="20">
|
||||
<el-col :span="12">
|
||||
<div class="title">
|
||||
<span>稳态电能质量水平评估</span>
|
||||
</div>
|
||||
<vxe-table v-bind="defaultAttribute" size="mini" ref="vxeRef" height="260px" :data="tableData">
|
||||
<vxe-column field="devName" width="110px" />
|
||||
|
||||
<vxe-colgroup title="500kV">
|
||||
<vxe-column field="devName" title="均值" />
|
||||
<vxe-column field="devName" title="标准差" />
|
||||
</vxe-colgroup>
|
||||
<vxe-colgroup title="220kV">
|
||||
<vxe-column field="devName" title="均值" />
|
||||
<vxe-column field="devName" title="标准差" />
|
||||
</vxe-colgroup>
|
||||
<vxe-colgroup title="110kV">
|
||||
<vxe-column field="devName" title="均值" />
|
||||
<vxe-column field="devName" title="标准差" />
|
||||
</vxe-colgroup>
|
||||
<vxe-colgroup title="35kV">
|
||||
<vxe-column field="devName" title="均值" />
|
||||
<vxe-column field="devName" title="标准差" />
|
||||
</vxe-colgroup>
|
||||
<vxe-colgroup title="其他">
|
||||
<vxe-column field="devName" title="均值" />
|
||||
<vxe-column field="devName" title="标准差" />
|
||||
</vxe-colgroup>
|
||||
</vxe-table>
|
||||
<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>
|
||||
</template>
|
||||
</el-steps>
|
||||
</div>
|
||||
<div v-for="(item, i) in evaluationData" class="evaluationData">
|
||||
<el-row style="width: 100%">
|
||||
<el-col :span="12" style="display: flex">
|
||||
<img :src="url[i]" />
|
||||
<span>{{ item.targetName }}</span>
|
||||
</el-col>
|
||||
<el-col :span="10">
|
||||
<el-col :span="12" style="display: flex">
|
||||
<div style="width: 150px">
|
||||
均值：
|
||||
<span style="color: #339966">{{ item.avg == 3.14159 ? '--' : item.avg }}</span>
|
||||
</div>
|
||||
<div>
|
||||
标准差：
|
||||
<span style="color: #ff9900">{{ item.avg == 3.14159 ? '--' : item.avg }}</span>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<div class="title">
|
||||
<span>稳态电能质量水平评估环比变化</span>
|
||||
</div>
|
||||
<div class="pie">
|
||||
<MyEChart style="height: 260px" :options="trendEChart" />
|
||||
<!-- <div style="height: 260px" ref="chartRef" /> -->
|
||||
<div style="height: 260px; width: 100%" ref="chartRef"></div>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
@@ -47,153 +51,97 @@
|
||||
<span>稳态电能质量水平评估详细列表</span>
|
||||
</div>
|
||||
<vxe-table v-bind="defaultAttribute" ref="vxeRef" height="300px" :data="tableData">
|
||||
<vxe-column field="devName" title="变电站名称" />
|
||||
<vxe-column field="devName" title="超标天数" />
|
||||
<vxe-column field="devName" title="超标差值" />
|
||||
<vxe-column field="devName" title="在线监测点数量(个)" />
|
||||
<vxe-column field="devName" title="超标监测点数量(个)" />
|
||||
<vxe-column field="devName" title="超标监测点占比(%)" />
|
||||
<vxe-column field="deptName" title="区域名称" />
|
||||
<vxe-column field="onlineNum" title="在线监测点数量(个)" />
|
||||
<vxe-column field="overNum" title="超标监测点数量(个)" />
|
||||
<vxe-column field="overRatio" title="超标监测点占比(%)" />
|
||||
|
||||
<vxe-colgroup :title="item" v-for="(item, i) in title">
|
||||
<vxe-column title="超标天数">
|
||||
<template #default="scope">
|
||||
<span>{{ scope.row.list[i].overDay }}</span>
|
||||
</template>
|
||||
</vxe-column>
|
||||
<vxe-column title="超标监测点数 ">
|
||||
<template #default="scope">
|
||||
<span>{{ scope.row.list[i].overNum }}</span>
|
||||
</template>
|
||||
</vxe-column>
|
||||
</vxe-colgroup>
|
||||
</vxe-table>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue'
|
||||
import MyEChart from '@/components/echarts/MyEchart.vue'
|
||||
import echarts from '@/components/echarts/echarts.ts'
|
||||
import { ref, nextTick } from 'vue'
|
||||
import echarts from '@/components/echarts/echarts'
|
||||
import { useDictData } from '@/stores/dictData'
|
||||
import { color } from '@/components/echarts/color'
|
||||
import { defaultAttribute } from '@/components/table/defaultAttribute'
|
||||
|
||||
import { getEvaluationData, evaluationDetail, evaluationRatio } from '@/api/device-boot/panorama'
|
||||
const dialogVisible: any = ref(false)
|
||||
const chartRef = ref()
|
||||
const tableData: any = ref([
|
||||
{
|
||||
devName: 123
|
||||
}
|
||||
])
|
||||
const rowList = ref({})
|
||||
const active: any = ref(1)
|
||||
const evaluationData: any = ref([])
|
||||
|
||||
const trendEChart = ref({
|
||||
xAxis: {
|
||||
show: false
|
||||
},
|
||||
legend: {
|
||||
data: ['1月', '2月', '3月']
|
||||
},
|
||||
yAxis: {
|
||||
show: false
|
||||
},
|
||||
|
||||
options: {
|
||||
dataZoom: null,
|
||||
radar: {
|
||||
center: ['50%', '50%'],
|
||||
radius: '65%',
|
||||
startAngle: 90,
|
||||
splitNumber: 5,
|
||||
splitArea: {
|
||||
areaStyle: {
|
||||
color: ['#FFFFFF', '#F5F9FF'].reverse()
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
show: false
|
||||
},
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: '#D2E4F8'
|
||||
}
|
||||
},
|
||||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: '#D2E4F8'
|
||||
}
|
||||
},
|
||||
name: {
|
||||
formatter: '{value}',
|
||||
textStyle: {
|
||||
color: '#656565',
|
||||
fontSize: 15
|
||||
}
|
||||
},
|
||||
indicator: [
|
||||
{
|
||||
name: '评率偏差',
|
||||
max: 100
|
||||
},
|
||||
{
|
||||
name: '电压偏差',
|
||||
max: 100
|
||||
},
|
||||
{
|
||||
name: '闪变',
|
||||
max: 100
|
||||
},
|
||||
{
|
||||
name: '电压总谐波畸变率',
|
||||
max: 100
|
||||
},
|
||||
{
|
||||
name: '三相电压不平衡度',
|
||||
max: 100
|
||||
}
|
||||
]
|
||||
},
|
||||
|
||||
series: [
|
||||
{
|
||||
name: '1月',
|
||||
// type: 'radar',
|
||||
symbol: 'none',
|
||||
symbolSize: 6,
|
||||
areaStyle: {
|
||||
normal: {
|
||||
color: '#80B2FF'
|
||||
}
|
||||
},
|
||||
itemStyle: {
|
||||
color: '#80B2FF'
|
||||
},
|
||||
lineStyle: {
|
||||
normal: {
|
||||
color: '#80B2FF',
|
||||
width: 2
|
||||
}
|
||||
},
|
||||
data: [9, 16, 16, 15, 12]
|
||||
}
|
||||
]
|
||||
const dictData = useDictData()
|
||||
const Voltage: any = dictData.getBasicData('Dev_Voltage_Stand').filter(item => {
|
||||
if (item.code == '35kV' || item.code == '500kV' || item.code == '220kV' || item.code == '110kV') {
|
||||
return item
|
||||
}
|
||||
})
|
||||
const echart = () => {
|
||||
let chart = echarts.init(chartRef.value)
|
||||
var dataname = ['评率偏差', '电压偏差', '闪变', '电压总谐波畸变率', '三相电压不平衡度']
|
||||
var datamax = [20, 20, 20, 20, 20, 20]
|
||||
var datavaule = [9, 16, 16, 15, 12, 8]
|
||||
var datavaule1 = [6, 8, 10, 6, 5, 8]
|
||||
var datavaule2 = [19, 19, 19, 19, 19, 19]
|
||||
|
||||
var indicator = []
|
||||
for (var i = 0; i < dataname.length; i++) {
|
||||
const chartRef = ref<HTMLDivElement>()
|
||||
const url: any = [
|
||||
new URL(`@/assets/img/PLPC.png`, import.meta.url),
|
||||
new URL(`@/assets/img/DYPC.png`, import.meta.url),
|
||||
new URL(`@/assets/img/JBL.png`, import.meta.url),
|
||||
new URL(`@/assets/img/SXDY.png`, import.meta.url),
|
||||
new URL(`@/assets/img/SB.png`, import.meta.url)
|
||||
]
|
||||
const tableData: any = ref([])
|
||||
const title = ['电压偏差', '频率偏差', '电压总谐波畸变率', '闪变', '三相电压不平衡度']
|
||||
|
||||
const echart = (row: any) => {
|
||||
let chart = echarts.init(chartRef.value as HTMLDivElement)
|
||||
|
||||
let dataname = ['频率偏差', '电压偏差', '电压总谐波畸变率', '三相电压不平衡度', '闪变']
|
||||
let datamax = [100, 100, 100, 100, 100, 100]
|
||||
let indicator = []
|
||||
for (let i = 0; i < dataname.length; i++) {
|
||||
indicator.push({
|
||||
name: dataname[i],
|
||||
max: datamax[i]
|
||||
})
|
||||
}
|
||||
|
||||
let option = {
|
||||
let option: any = {
|
||||
tooltip: {
|
||||
show: true,
|
||||
trigger: 'item'
|
||||
trigger: 'item',
|
||||
axisPointer: {
|
||||
type: 'shadow',
|
||||
label: {
|
||||
color: '#fff',
|
||||
fontSize: 16
|
||||
}
|
||||
},
|
||||
textStyle: {
|
||||
color: '#fff',
|
||||
fontStyle: 'normal',
|
||||
opacity: 0.35,
|
||||
fontSize: 14
|
||||
},
|
||||
backgroundColor: 'rgba(0,0,0,0.35)',
|
||||
borderWidth: 0
|
||||
},
|
||||
legend: {
|
||||
data: ['1月', '2月', '3月'],
|
||||
data: row.map((item: any) => item.time),
|
||||
type: 'scroll',
|
||||
orient: 'vertical',
|
||||
icon: 'roundRect',
|
||||
right: '20',
|
||||
top: 'center',
|
||||
itemGap: 30,
|
||||
|
||||
itemGap: 10,
|
||||
itemWidth: 16,
|
||||
itemHeight: 16,
|
||||
textStyle: {
|
||||
@@ -236,77 +184,69 @@ const echart = () => {
|
||||
indicator: indicator
|
||||
},
|
||||
|
||||
series: [
|
||||
{
|
||||
name: '1月',
|
||||
series: []
|
||||
}
|
||||
|
||||
row.forEach((item: any, i: any) => {
|
||||
option.series.push({
|
||||
name: item.time,
|
||||
type: 'radar',
|
||||
symbol: 'none',
|
||||
symbolSize: 6,
|
||||
areaStyle: {
|
||||
normal: {
|
||||
color: '#80B2FF'
|
||||
color: color[i + 1]
|
||||
}
|
||||
},
|
||||
itemStyle: {
|
||||
color: '#80B2FF'
|
||||
color: color[i + 1]
|
||||
},
|
||||
lineStyle: {
|
||||
normal: {
|
||||
color: '#80B2FF',
|
||||
width: 2
|
||||
}
|
||||
},
|
||||
data: [datavaule]
|
||||
},
|
||||
{
|
||||
name: '2月',
|
||||
data: [item.ratioList]
|
||||
})
|
||||
})
|
||||
|
||||
row.forEach((item: any, i: any) => {
|
||||
option.series.push({
|
||||
name: item.time + 1,
|
||||
type: 'radar',
|
||||
symbol: 'none',
|
||||
symbolSize: 6,
|
||||
areaStyle: {
|
||||
normal: {
|
||||
color: '#80B2FF'
|
||||
color: color[i + 1]
|
||||
}
|
||||
},
|
||||
itemStyle: {
|
||||
color: '#80B2FF'
|
||||
color: color[i + 1]
|
||||
},
|
||||
lineStyle: {
|
||||
normal: {
|
||||
color: '#80B2FF',
|
||||
width: 2
|
||||
}
|
||||
},
|
||||
data: [datavaule1]
|
||||
},
|
||||
{
|
||||
name: '3月',
|
||||
type: 'radar',
|
||||
symbol: 'none',
|
||||
symbolSize: 6,
|
||||
areaStyle: {
|
||||
normal: {
|
||||
color: '#80B2FF'
|
||||
}
|
||||
},
|
||||
itemStyle: {
|
||||
color: '#80B2FF'
|
||||
},
|
||||
lineStyle: {
|
||||
normal: {
|
||||
color: '#80B2FF',
|
||||
width: 2
|
||||
}
|
||||
},
|
||||
data: [datavaule2]
|
||||
}
|
||||
]
|
||||
}
|
||||
data: [item.ratioList]
|
||||
})
|
||||
})
|
||||
|
||||
chart.setOption(option)
|
||||
}
|
||||
// echart()
|
||||
|
||||
const open = async (row: any) => {
|
||||
rowList.value = row
|
||||
dialogVisible.value = true
|
||||
// 稳态电能质量水平评估
|
||||
handleClick(0)
|
||||
//环比
|
||||
evaluationRatio(row).then(res => {
|
||||
echart(res.data)
|
||||
})
|
||||
// 稳态电能质量水平评估详细列表
|
||||
evaluationDetail(row).then(res => {
|
||||
tableData.value = res.data
|
||||
})
|
||||
}
|
||||
// 点击电压等级
|
||||
const handleClick = (i: any) => {
|
||||
active.value = i
|
||||
getEvaluationData({
|
||||
...rowList.value,
|
||||
voltageLevel: Voltage[i].id
|
||||
}).then(res => {
|
||||
evaluationData.value = res.data
|
||||
})
|
||||
}
|
||||
|
||||
defineExpose({ open })
|
||||
@@ -328,7 +268,60 @@ defineExpose({ open })
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
}
|
||||
:deep(.el-table thead) {
|
||||
color: #000;
|
||||
.evaluationData {
|
||||
height: 40px;
|
||||
margin: 8px 30px;
|
||||
width: 100%;
|
||||
box-shadow: 1px 1px 1px 1px #e8e3e3;
|
||||
display: flex;
|
||||
font-size: 18px;
|
||||
line-height: 40px;
|
||||
img {
|
||||
height: 30px;
|
||||
width: 30px;
|
||||
margin: 5px 30px;
|
||||
}
|
||||
}
|
||||
|
||||
.el-steps {
|
||||
margin-top: 5px;
|
||||
}
|
||||
:deep(.el-step__icon) {
|
||||
border: none;
|
||||
background: #ccc;
|
||||
margin-top: 5px;
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
}
|
||||
:deep(.el-step__icon-inner) {
|
||||
display: none;
|
||||
}
|
||||
:deep(.boxSteps) {
|
||||
border-radius: 50px;
|
||||
width: 60%;
|
||||
height: 25px;
|
||||
margin: auto;
|
||||
margin-top: 30px;
|
||||
.el-step__title {
|
||||
line-height: 18px;
|
||||
font-size: 16px;
|
||||
margin-left: -10px;
|
||||
font-weight: 500;
|
||||
color: #000 !important;
|
||||
position: relative;
|
||||
top: -50px;
|
||||
}
|
||||
}
|
||||
:deep(.highlight) {
|
||||
.el-step__icon {
|
||||
background: var(--el-color-primary);
|
||||
}
|
||||
.el-step__title {
|
||||
font-weight: 700 !important;
|
||||
color: var(--el-color-primary) !important;
|
||||
}
|
||||
// .is-wait {
|
||||
// color: var(--el-color-primary) !important;
|
||||
// }
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -18,8 +18,26 @@
|
||||
</vxe-table>
|
||||
</div>
|
||||
<div style="height: 300px; margin-top: 10px; display: flex">
|
||||
<MyEChart style="height: 300px; width: 50%" :options="picEChart" />
|
||||
<MyEChart style="height: 300px; width: 50%" :options="picEChart" />
|
||||
<!--
|
||||
-->
|
||||
<div class="statistics-main">
|
||||
<div class="statistics-box">
|
||||
<MyEChart style="height: 300px" :options="picEChart" />
|
||||
|
||||
<el-table size="small" height="300px" :data="descentData">
|
||||
<el-table-column prop="name" label="暂降原因" width="80px" align="center" />
|
||||
<el-table-column prop="value" label="暂降次数" width="80px" align="center" />
|
||||
</el-table>
|
||||
</div>
|
||||
|
||||
<div class="statistics-box">
|
||||
<MyEChart style="height: 300px" :options="picEChart1" />
|
||||
<el-table size="small" height="300px" :data="resembleData">
|
||||
<el-table-column prop="name" label="暂降原因" width="80px" align="center" />
|
||||
<el-table-column prop="value" label="暂降次数" width="80px" align="center" />
|
||||
</el-table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</template>
|
||||
@@ -27,16 +45,27 @@
|
||||
import { ref } from 'vue'
|
||||
import MyEChart from '@/components/echarts/MyEchart.vue'
|
||||
import { defaultAttribute } from '@/components/table/defaultAttribute'
|
||||
import { getEventStatisticsList, getEventReason } from '@/api/device-boot/panorama'
|
||||
|
||||
const dialogVisible: any = ref(false)
|
||||
|
||||
const tableData: any = ref([
|
||||
{
|
||||
devName: 123
|
||||
}
|
||||
])
|
||||
const tableData: any = ref([])
|
||||
const descentData = ref([])
|
||||
const resembleData = ref([])
|
||||
|
||||
const picEChart = ref({
|
||||
const picEChart = ref({})
|
||||
const picEChart1 = ref({})
|
||||
const open = async (row: any) => {
|
||||
getEventStatisticsList(row).then((res: any) => {
|
||||
tableData.value = res.data
|
||||
})
|
||||
getEventReason(row).then(res => {
|
||||
descentData.value = res.data.reason
|
||||
resembleData.value = res.data.type
|
||||
picEChart.value = {
|
||||
tooltip: {
|
||||
trigger: 'item'
|
||||
},
|
||||
legend: {
|
||||
orient: 'vertical'
|
||||
},
|
||||
@@ -51,39 +80,70 @@ const picEChart = ref({
|
||||
series: [
|
||||
{
|
||||
type: 'pie',
|
||||
|
||||
center: ['50%', '50%'],
|
||||
center: ['40%', '50%'],
|
||||
radius: '50%',
|
||||
label: {
|
||||
formatter: function (e: any) {
|
||||
let {
|
||||
data: { value, name }
|
||||
} = e
|
||||
return `${name}：${value}`
|
||||
show: false,
|
||||
position: 'outside',
|
||||
textStyle: {
|
||||
//数值样式
|
||||
}
|
||||
},
|
||||
|
||||
data: [
|
||||
{
|
||||
name: '其他',
|
||||
value: 53.4,
|
||||
itemStyle: {
|
||||
color: '#ff0000'
|
||||
}
|
||||
},
|
||||
{
|
||||
name: '大型感应电动机启动',
|
||||
value: 3.4
|
||||
data: res.data.reason
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
picEChart1.value = {
|
||||
tooltip: {
|
||||
trigger: 'item'
|
||||
},
|
||||
legend: {
|
||||
orient: 'vertical'
|
||||
},
|
||||
xAxis: {
|
||||
show: false
|
||||
},
|
||||
yAxis: {
|
||||
show: false
|
||||
},
|
||||
options: {
|
||||
dataZoom: null,
|
||||
series: [
|
||||
{
|
||||
type: 'pie',
|
||||
center: ['40%', '50%'],
|
||||
radius: '50%',
|
||||
label: {
|
||||
show: false,
|
||||
position: 'outside',
|
||||
textStyle: {
|
||||
//数值样式
|
||||
}
|
||||
},
|
||||
data: res.data.type
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
})
|
||||
const open = async (row: any) => {
|
||||
dialogVisible.value = true
|
||||
}
|
||||
|
||||
defineExpose({ open })
|
||||
</script>
|
||||
<style lang="scss" scoped></style>
|
||||
<style lang="scss" scoped>
|
||||
.statistics-main {
|
||||
height: 300px;
|
||||
display: grid;
|
||||
width: 100%;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
|
||||
.statistics-box {
|
||||
height: 300px;
|
||||
// display: flex;
|
||||
display: grid;
|
||||
grid-template-columns: 2fr 1fr;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -17,8 +17,8 @@
|
||||
<span>分布统计</span>
|
||||
</div>
|
||||
<div class="pie">
|
||||
<MyEChart style="height: 260px; width: 50%" :options="picEChart" />
|
||||
<el-table size="small" height="260px" style="width: 240px" :data="picList">
|
||||
<MyEChart style="height: 260px; width: 60%" :options="picEChart" />
|
||||
<el-table size="small" height="260px" style="width: 35%" :data="picList">
|
||||
<el-table-column prop="orgName" width="80px" align="center"></el-table-column>
|
||||
<el-table-column prop="onlineEvaluate" label="终端评价" align="center">
|
||||
<template #default="scope">
|
||||
@@ -113,7 +113,7 @@ const open = async (row: any) => {
|
||||
res.data.forEach((item: any) => {
|
||||
picData.push({
|
||||
value: item.devCount,
|
||||
name: `${item.orgName}：${item.devCount}台`,
|
||||
name: `${item.orgName}`,
|
||||
itemStyle: {
|
||||
color: item.onlineEvaluate < 60 ? 'red' : item.onlineEvaluate < 90 ? 'orange' : 'green'
|
||||
}
|
||||
@@ -136,13 +136,21 @@ const open = async (row: any) => {
|
||||
{
|
||||
type: 'pie',
|
||||
startAngle: 360,
|
||||
center: ['50%', '50%'],
|
||||
radius: ['25%', '35%'],
|
||||
center: ['50%', '55%'],
|
||||
radius: ['40%', '60%'],
|
||||
endAngle: 0,
|
||||
|
||||
labelLine: {
|
||||
length: 8,
|
||||
length2: 50,
|
||||
show: true
|
||||
},
|
||||
label: {
|
||||
padding: [0, -50],
|
||||
formatter: '{b}:{c}台\n\n'
|
||||
},
|
||||
itemStyle: {
|
||||
borderColor: '#fff',
|
||||
borderWidth: 5
|
||||
borderWidth: 1
|
||||
},
|
||||
|
||||
data: picData
|
||||
|
||||
@@ -1,7 +1,6 @@
|
||||
<template>
|
||||
<div>
|
||||
<DatePicker ref="datePickerRef" style="display: none" />
|
||||
<div class="boxLeft" :class="show ? 'show' : 'noshow'" :style="height">
|
||||
<div :class="show ? 'show' : 'noshow'">
|
||||
<div class="boxLeft" :style="height">
|
||||
<div v-for="(item, i) in list" :style="boxHeight">
|
||||
<div class="title">
|
||||
<span>{{ item.title }}</span>
|
||||
@@ -258,7 +257,6 @@
|
||||
|
||||
<script setup lang="ts">
|
||||
import { onMounted, reactive, ref, provide } from 'vue'
|
||||
import DatePicker from '@/components/form/datePicker/index.vue'
|
||||
import { useDictData } from '@/stores/dictData'
|
||||
import { mainHeight } from '@/utils/layout'
|
||||
import { ArrowRight } from '@element-plus/icons-vue'
|
||||
@@ -272,7 +270,6 @@ const show = ref(false)
|
||||
const standRef = ref()
|
||||
const terminalRef = ref()
|
||||
const pointRef = ref()
|
||||
const datePickerRef = ref()
|
||||
const list: any = ref([
|
||||
{
|
||||
title: '变电站',
|
||||
@@ -372,22 +369,14 @@ const open = (e: any) => {
|
||||
}
|
||||
const info = (row: any) => {
|
||||
let form = {
|
||||
...row,
|
||||
id: row.orgNo,
|
||||
deptIndex: row.orgNo,
|
||||
orgId: row.orgNo,
|
||||
ids: [],
|
||||
statisticalType: dictData.getBasicData('Statistical_Type', ['Report_Type'])[0],
|
||||
isUpToGrid: row.isUpToGrid,
|
||||
monitorFlag: row.isUpToGrid,
|
||||
// startTime: datePickerRef.value.timeValue[0],
|
||||
// searchBeginTime: datePickerRef.value.timeValue[0],
|
||||
// endTime: datePickerRef.value.timeValue[1],
|
||||
// searchEndTime: datePickerRef.value.timeValue[1],
|
||||
startTime:`2023-07-01`,
|
||||
searchBeginTime: `2023-07-01`,
|
||||
endTime: `2023-07-30`,
|
||||
searchEndTime: `2023-07-30`,
|
||||
type: datePickerRef.value.interval
|
||||
monitorFlag: row.isUpToGrid
|
||||
}
|
||||
formRow.value = form
|
||||
getSubLineGiveAnAlarm(form).then()
|
||||
@@ -401,8 +390,8 @@ defineExpose({ info })
|
||||
<style lang="scss" scoped>
|
||||
.boxLeft {
|
||||
background-color: #fff;
|
||||
width: 400px;
|
||||
padding: 10px;
|
||||
width: 100%;
|
||||
padding: 10px 0px 10px 10px;
|
||||
font-size: 13px;
|
||||
overflow: hidden;
|
||||
}
|
||||
@@ -431,9 +420,9 @@ defineExpose({ info })
|
||||
// height: ;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
font-weight: 550;
|
||||
font-size: 16px;
|
||||
height: 22px;
|
||||
line-height: 22px;
|
||||
line-height: 23px;
|
||||
padding-left: 5px;
|
||||
width: 100%;
|
||||
background-image: linear-gradient(to right, #a4e5da, #fff);
|
||||
@@ -444,6 +433,7 @@ defineExpose({ info })
|
||||
font-size: 12px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
}
|
||||
.infoTop {
|
||||
display: flex;
|
||||
@@ -481,16 +471,20 @@ defineExpose({ info })
|
||||
height: 200px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.show {
|
||||
width: 0px;
|
||||
padding: 0;
|
||||
|
||||
transition: all 0.3s ease;
|
||||
.boxLeft {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
.noshow {
|
||||
width: 400px;
|
||||
padding: 10px;
|
||||
width: 25%;
|
||||
transition: all 0.3s ease;
|
||||
.boxLeft {
|
||||
padding: 10px 0px 10px 10px;
|
||||
}
|
||||
}
|
||||
:deep(.el-card) {
|
||||
--el-card-padding: 10px !important;
|
||||
|
||||
@@ -1,7 +1,6 @@
|
||||
<template>
|
||||
<div>
|
||||
<DatePicker ref="datePickerRef" style="display: none" />
|
||||
<div class="boxLeft" :class="show ? 'show' : 'noshow'" :style="height">
|
||||
<div :class="show ? 'show' : 'noshow'">
|
||||
<div class="boxLeft" :style="height">
|
||||
<!-- 综合评估 -->
|
||||
<div>
|
||||
<div class="title">
|
||||
@@ -12,9 +11,29 @@
|
||||
</span>
|
||||
</div>
|
||||
<div class="evaluate">
|
||||
<div v-for="item in evaluate" style="width: 40px">
|
||||
<div v-for="item in assessList" style="min-width: 50px">
|
||||
<div>{{ item.name }}</div>
|
||||
<div style="margin-top: 5px">{{ item.value }}</div>
|
||||
<div
|
||||
style="margin-top: 5px"
|
||||
:style="{
|
||||
color:
|
||||
item.score == 3.14159
|
||||
? ''
|
||||
: item.score > 4.5
|
||||
? '#339966'
|
||||
: item.score > 4
|
||||
? '#3399ff'
|
||||
: item.score > 3
|
||||
? '#ffcc33'
|
||||
: item.score > 2
|
||||
? '#ff9900'
|
||||
: item.score > 0
|
||||
? '#cc0000'
|
||||
: ''
|
||||
}"
|
||||
>
|
||||
{{ item.score == 3.14159 ? '/' : item.score }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -31,9 +50,11 @@
|
||||
<div class="top">
|
||||
<span>
|
||||
监测点越限占比:
|
||||
<span class="num">65%</span>
|
||||
<span class="num">
|
||||
{{ harmonicLineRatio == 3.14159 ? '暂无数据' : harmonicLineRatio + '%' }}
|
||||
</span>
|
||||
<el-select v-model="value" style="width: 120px" size="small">
|
||||
</span>
|
||||
<el-select v-model="harmonicType" style="width: 120px" @change="harmonicChange" size="small">
|
||||
<el-option
|
||||
v-for="item in options"
|
||||
:key="item.value"
|
||||
@@ -42,7 +63,7 @@
|
||||
/>
|
||||
</el-select>
|
||||
</div>
|
||||
<MyEChart :style="EchHeight" :options="WTCharts" />
|
||||
<MyEChart :style="EchHeight" :options="harmonicCharts" />
|
||||
</div>
|
||||
</div>
|
||||
<!-- 暂态电能质量水平评价 -->
|
||||
@@ -58,15 +79,10 @@
|
||||
<div class="top">
|
||||
<span>
|
||||
暂态事件严重度:
|
||||
<span class="num">65%</span>
|
||||
<span class="num">{{ transientNum }}%</span>
|
||||
</span>
|
||||
<el-select v-model="value" style="width: 120px" size="small">
|
||||
<el-option
|
||||
v-for="item in options1"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
/>
|
||||
<el-select v-model="value" style="width: 120px" size="small" @change="transientChange">
|
||||
<el-option v-for="item in options1" :key="item.id" :label="item.name" :value="item.id" />
|
||||
</el-select>
|
||||
</div>
|
||||
<MyEChart :style="EchHeight" :options="WTCharts" />
|
||||
@@ -148,7 +164,7 @@ import Evaluate from './details/evaluate.vue'
|
||||
import steadyState from './details/steadyState.vue'
|
||||
import temporaryState from './details/temporaryState.vue'
|
||||
import technique from './details/technique.vue'
|
||||
import DatePicker from '@/components/form/datePicker/index.vue'
|
||||
import { getAssessOverview, getEvaluationOverview, getEventLevelEvaluation } from '@/api/device-boot/panorama'
|
||||
const dictData = useDictData()
|
||||
const show = ref(false)
|
||||
const height = mainHeight(30)
|
||||
@@ -156,10 +172,14 @@ const boxHeight: any = mainHeight(270, 3)
|
||||
const EchHeight: any = mainHeight(370, 3)
|
||||
const evaluateRef = ref()
|
||||
const steadyStateRef = ref()
|
||||
const datePickerRef = ref()
|
||||
const formRow: any = ref({})
|
||||
const temporaryStateRef = ref()
|
||||
const techniqueRef = ref()
|
||||
const options = ref([
|
||||
{
|
||||
label: '全指标',
|
||||
value: '0'
|
||||
},
|
||||
{
|
||||
label: '电压偏差',
|
||||
value: '1'
|
||||
@@ -181,50 +201,14 @@ const options = ref([
|
||||
value: '5'
|
||||
}
|
||||
])
|
||||
const options1 = ref([
|
||||
{
|
||||
label: '暂降',
|
||||
value: '1'
|
||||
},
|
||||
{
|
||||
label: '暂升',
|
||||
value: '2'
|
||||
},
|
||||
{
|
||||
label: '中断',
|
||||
value: '3'
|
||||
const harmonicType = ref('0')
|
||||
const transientNum = ref(0)
|
||||
const options1: any = dictData.getBasicData('Event_Statis').filter(item => {
|
||||
if (item.code == 'Voltage_Dip' || item.code == 'Voltage_Rise' || item.code == 'Short_Interruptions') {
|
||||
return item
|
||||
}
|
||||
])
|
||||
const evaluate = ref([
|
||||
{
|
||||
name: '承德',
|
||||
value: 5
|
||||
},
|
||||
{
|
||||
name: '廊坊',
|
||||
value: 5
|
||||
},
|
||||
{
|
||||
name: '张家口',
|
||||
value: 5
|
||||
},
|
||||
{
|
||||
name: '秦皇岛',
|
||||
value: 5
|
||||
},
|
||||
{
|
||||
name: '唐山',
|
||||
value: 5
|
||||
},
|
||||
{
|
||||
name: '超高压',
|
||||
value: 5
|
||||
},
|
||||
{
|
||||
name: '风光储',
|
||||
value: 5
|
||||
}
|
||||
])
|
||||
})
|
||||
const assessList: any = ref([])
|
||||
const JDlist = ref([
|
||||
{
|
||||
name: '技术监督计划',
|
||||
@@ -243,7 +227,53 @@ const JDlist = ref([
|
||||
value: 5
|
||||
}
|
||||
])
|
||||
const WTCharts = ref({
|
||||
const harmonicCharts = ref()
|
||||
const harmonicLineRatio: any = ref(0)
|
||||
const WTCharts = ref({})
|
||||
|
||||
const value = ref(options1[0].id)
|
||||
const open = (e: number) => {
|
||||
if (e == 0) {
|
||||
evaluateRef.value.open(formRow.value)
|
||||
} else if (e == 1) {
|
||||
steadyStateRef.value.open(formRow.value)
|
||||
} else if (e == 2) {
|
||||
temporaryStateRef.value.open(formRow.value)
|
||||
} else if (e == 3) {
|
||||
techniqueRef.value.open(formRow.value)
|
||||
}
|
||||
}
|
||||
const info = (row: any) => {
|
||||
let form = {
|
||||
...row,
|
||||
id: row.orgNo,
|
||||
deptIndex: row.orgNo,
|
||||
orgId: row.orgNo,
|
||||
ids: [],
|
||||
statisticalType: dictData.getBasicData('Statistical_Type', ['Report_Type'])[0],
|
||||
isUpToGrid: row.isUpToGrid,
|
||||
monitorFlag: row.isUpToGrid
|
||||
}
|
||||
formRow.value = form
|
||||
// 综合评估
|
||||
getAssessOverview(form).then(res => {
|
||||
assessList.value = res.data
|
||||
})
|
||||
// 稳态电能质量水平评价概览数据
|
||||
harmonicChange()
|
||||
// 暂态统计详情
|
||||
transientChange()
|
||||
}
|
||||
const harmonicChange = () => {
|
||||
getEvaluationOverview({ ...formRow.value, harmonicType: harmonicType.value }).then(res => {
|
||||
harmonicLineRatio.value = res.data.lineRatio
|
||||
|
||||
harmonicCharts.value = {
|
||||
tooltip: {
|
||||
formatter: function (params: any) {
|
||||
return params[0].name + ':' + (params[0].value == 3.14159 ? '暂无数据' : params[0].value) + '%<br/>'
|
||||
}
|
||||
},
|
||||
xAxis: {
|
||||
name: '%',
|
||||
type: 'value',
|
||||
@@ -254,7 +284,7 @@ const WTCharts = ref({
|
||||
},
|
||||
yAxis: {
|
||||
type: 'category',
|
||||
data: ['承德', '廊坊', '唐山', '承德', '廊坊', '唐山']
|
||||
data: res.data.childrenList.map((item: any) => item.deptName)
|
||||
},
|
||||
grid: {
|
||||
top: '10px',
|
||||
@@ -269,46 +299,78 @@ const WTCharts = ref({
|
||||
{
|
||||
name: '占比',
|
||||
type: 'bar',
|
||||
data: [3, 4, 5, 3, 4, 5],
|
||||
data: res.data.childrenList.map((item: any) => item.ratio),
|
||||
label: {
|
||||
show: true,
|
||||
position: 'right',
|
||||
fontSize: 12,
|
||||
formatter: function (params: any) {
|
||||
return `${params.value}%`
|
||||
return `${params.value == 3.14159 ? '' : params.value}`
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
const transientChange = () => {
|
||||
getEventLevelEvaluation({ ...formRow.value, ids: [value.value] }).then(res => {
|
||||
let data = []
|
||||
transientNum.value = 0
|
||||
if (formRow.value.isUpToGrid == 0) {
|
||||
data = res.data.info
|
||||
transientNum.value = res.data.data
|
||||
} else {
|
||||
transientNum.value = res.data.gwData
|
||||
data = res.data.gwInfo
|
||||
}
|
||||
|
||||
const value = ref('')
|
||||
const open = (e: number) => {
|
||||
if (e == 0) {
|
||||
evaluateRef.value.open()
|
||||
} else if (e == 1) {
|
||||
steadyStateRef.value.open()
|
||||
} else if (e == 2) {
|
||||
temporaryStateRef.value.open()
|
||||
} else if (e == 3) {
|
||||
techniqueRef.value.open()
|
||||
WTCharts.value = {
|
||||
tooltip: {
|
||||
formatter: function (params: any) {
|
||||
return params[0].name + ':' + (params[0].value == 3.14159 ? '暂无数据' : params[0].value) + '%<br/>'
|
||||
}
|
||||
},
|
||||
xAxis: {
|
||||
name: '%',
|
||||
type: 'value',
|
||||
max: 100
|
||||
},
|
||||
legend: {
|
||||
show: false
|
||||
},
|
||||
yAxis: {
|
||||
type: 'category',
|
||||
data: data.map((item: any) => item.orgName)
|
||||
},
|
||||
grid: {
|
||||
top: '10px',
|
||||
left: '30px',
|
||||
right: '30px',
|
||||
bottom: '0px'
|
||||
},
|
||||
|
||||
options: {
|
||||
dataZoom: null,
|
||||
series: [
|
||||
{
|
||||
name: '占比',
|
||||
type: 'bar',
|
||||
data: data.map((item: any) => item.count),
|
||||
label: {
|
||||
show: true,
|
||||
position: 'right',
|
||||
fontSize: 12,
|
||||
formatter: function (params: any) {
|
||||
return `${params.value}`
|
||||
}
|
||||
}
|
||||
const info = (row: any) => {
|
||||
let form = {
|
||||
id: row.orgNo,
|
||||
deptIndex: row.orgNo,
|
||||
orgId: row.orgNo,
|
||||
ids: [],
|
||||
statisticalType: dictData.getBasicData('Statistical_Type', ['Report_Type'])[0],
|
||||
isUpToGrid: row.isUpToGrid,
|
||||
startTime: datePickerRef.value.timeValue[0],
|
||||
searchBeginTime: datePickerRef.value.timeValue[0],
|
||||
endTime: datePickerRef.value.timeValue[1],
|
||||
searchEndTime: datePickerRef.value.timeValue[1],
|
||||
type: datePickerRef.value.interval
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
defineExpose({ info })
|
||||
</script>
|
||||
@@ -316,8 +378,8 @@ defineExpose({ info })
|
||||
<style lang="scss" scoped>
|
||||
.boxLeft {
|
||||
background-color: #fff;
|
||||
width: 400px;
|
||||
padding: 10px;
|
||||
width: 100%;
|
||||
padding: 10px 0px 10px 10px;
|
||||
font-size: 13px;
|
||||
overflow: hidden;
|
||||
}
|
||||
@@ -326,9 +388,9 @@ defineExpose({ info })
|
||||
// height: ;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
font-weight: 550;
|
||||
font-size: 16px;
|
||||
height: 22px;
|
||||
line-height: 22px;
|
||||
line-height: 23px;
|
||||
padding-left: 5px;
|
||||
width: 100%;
|
||||
background-image: linear-gradient(to right, #a4e5da, #fff);
|
||||
@@ -348,6 +410,8 @@ defineExpose({ info })
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
text-align: center;
|
||||
overflow-x: auto;
|
||||
overflow-y: hidden;
|
||||
}
|
||||
.boxR {
|
||||
border: 1px solid #ccc;
|
||||
@@ -384,14 +448,17 @@ defineExpose({ info })
|
||||
cursor: pointer;
|
||||
}
|
||||
.show {
|
||||
transition: all 0.3s ease;
|
||||
width: 0px;
|
||||
transition: all 0.3s ease;
|
||||
.boxLeft {
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
.noshow {
|
||||
width: 400px;
|
||||
padding: 10px;
|
||||
width: 25%;
|
||||
transition: all 0.3s ease;
|
||||
.boxLeft {
|
||||
padding: 10px 0px 10px 10px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
<template>
|
||||
<div class="default-main" :style="height">
|
||||
<div class="box">
|
||||
<DatePicker ref="datePickerRef" style="display: none" />
|
||||
<el-form :inline="true" :model="form" class="demo-form-inline">
|
||||
<el-form-item>
|
||||
<el-input v-model="form.name" placeholder="请输入设备名称" :suffix-icon="Search">
|
||||
@@ -49,11 +50,12 @@ import { mainHeight } from '@/utils/layout'
|
||||
import { Search, Refresh } from '@element-plus/icons-vue'
|
||||
import mapL from './components/mapL.vue'
|
||||
import mapR from './components/mapR.vue'
|
||||
import DatePicker from '@/components/form/datePicker/index.vue'
|
||||
const dictData = useDictData()
|
||||
defineOptions({
|
||||
name: '/panorama'
|
||||
})
|
||||
|
||||
const datePickerRef = ref()
|
||||
const areaRef = ref()
|
||||
const mapLRef = ref()
|
||||
const mapRRef = ref()
|
||||
@@ -67,7 +69,7 @@ const options: any = ref([
|
||||
id: 1
|
||||
}
|
||||
])
|
||||
const form = ref({
|
||||
const form: any = ref({
|
||||
name: '',
|
||||
orgNo: dictData.state.area[0].id,
|
||||
isUpToGrid: 0
|
||||
@@ -88,6 +90,16 @@ const reset = () => {
|
||||
info()
|
||||
}
|
||||
const info = () => {
|
||||
// form.value.startTime = datePickerRef.value.timeValue[0]
|
||||
// form.value.searchBeginTime = datePickerRef.value.timeValue[0]
|
||||
// form.value.endTime = datePickerRef.value.timeValue[1]
|
||||
// form.value.searchEndTime = datePickerRef.value.timeValue[1]
|
||||
form.value.startTime = `2023-01-01`
|
||||
form.value.searchBeginTime = `2023-01-01`
|
||||
form.value.endTime = `2024-07-30`
|
||||
form.value.searchEndTime = `2024-07-30`
|
||||
form.value.type = datePickerRef.value.interval
|
||||
|
||||
mapLRef.value.info(form.value)
|
||||
mapRRef.value.info(form.value)
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user