同步现场代码
This commit is contained in:
@@ -0,0 +1,277 @@
|
||||
<!-- 稳态 -->
|
||||
<template>
|
||||
<!-- 终端 -->
|
||||
<el-dialog draggable title="稳态指标超标占比统计" v-model="dialogVisible" width="1400px">
|
||||
<el-row style="height: 330px" :gutter="20">
|
||||
<el-col :span="12">
|
||||
<div class="title">
|
||||
<span>稳态指标超标占比</span>
|
||||
</div>
|
||||
<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="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.sd }}</span>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<!-- <div class="title">
|
||||
<span>稳态电能质量水平评估环比变化</span>
|
||||
</div>
|
||||
<div class="pie">
|
||||
<div style="height: 260px; width: 100%" ref="chartRef"></div>
|
||||
</div> -->
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-dialog>
|
||||
</template>
|
||||
<script setup lang="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 rowList = ref({})
|
||||
const active: any = ref(1)
|
||||
const evaluationData: any = ref([])
|
||||
|
||||
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 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 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: any = {
|
||||
tooltip: {
|
||||
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: row.map((item: any) => item.time),
|
||||
type: 'scroll',
|
||||
orient: 'vertical',
|
||||
icon: 'roundRect',
|
||||
right: '20',
|
||||
|
||||
itemGap: 10,
|
||||
itemWidth: 16,
|
||||
itemHeight: 16,
|
||||
textStyle: {
|
||||
fontSize: '15',
|
||||
color: '#656565'
|
||||
}
|
||||
},
|
||||
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: indicator
|
||||
},
|
||||
|
||||
series: []
|
||||
}
|
||||
|
||||
row.forEach((item: any, i: any) => {
|
||||
option.series.push({
|
||||
name: item.time,
|
||||
type: 'radar',
|
||||
symbol: 'none',
|
||||
areaStyle: {
|
||||
normal: {
|
||||
color: color[i + 1]
|
||||
}
|
||||
},
|
||||
itemStyle: {
|
||||
color: color[i + 1]
|
||||
},
|
||||
data: [item.ratioList]
|
||||
})
|
||||
})
|
||||
|
||||
chart.setOption(option)
|
||||
}
|
||||
|
||||
const open = async (row: any) => {
|
||||
rowList.value = row
|
||||
dialogVisible.value = true
|
||||
// 稳态电能质量水平评估
|
||||
handleClick(0)
|
||||
}
|
||||
// 点击电压等级
|
||||
const handleClick = (i: any) => {
|
||||
active.value = i
|
||||
getEvaluationData({
|
||||
...rowList.value,
|
||||
voltageLevel: Voltage[i].id
|
||||
}).then(res => {
|
||||
evaluationData.value = res.data
|
||||
})
|
||||
}
|
||||
|
||||
defineExpose({ open })
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
:deep(.el-select) {
|
||||
min-width: 80px;
|
||||
}
|
||||
.title {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin: 10px;
|
||||
span {
|
||||
font-weight: 550;
|
||||
font-size: 18px;
|
||||
}
|
||||
}
|
||||
.pie {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
}
|
||||
.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>
|
||||
@@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<!-- 综合评估详情 -->
|
||||
<el-dialog draggable title="指标合格率统计详情" v-model="dialogVisible" width="1400px">
|
||||
<el-dialog draggable title="指标合格率统计统计" v-model="dialogVisible" width="1400px">
|
||||
<div>
|
||||
<vxe-table v-bind="defaultAttribute" ref="vxeRef" height="600px" :data="tableData">
|
||||
<vxe-column field="substationName" title="变电站名称" />
|
||||
|
||||
@@ -1,201 +0,0 @@
|
||||
<template>
|
||||
<div class="boxLeft">
|
||||
<!-- 监测点 -->
|
||||
<el-card>
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span>技术监督</span>
|
||||
</div>
|
||||
</template>
|
||||
<div :style="boxHeight">
|
||||
<el-segmented v-model="segmentedValue" :options="segmentedList" block />
|
||||
|
||||
<el-row style="height: calc(100% - 62px); margin-top: 20px">
|
||||
<el-col :span="12" class="col" style="border-right: 1px solid #ccc">
|
||||
<div>
|
||||
<span>异常问题总数：</span>
|
||||
<span style="color: #2dcd28">60个</span>
|
||||
</div>
|
||||
<div>
|
||||
<span style="width: 120px">已关联工单数：</span>
|
||||
<span style="color: #81b337">60个</span>
|
||||
</div>
|
||||
<div>
|
||||
<span style="width: 120px"> 工单转换率：</span>
|
||||
<span style="color: #338dff">60%</span>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="12" class="col">
|
||||
<div>
|
||||
<span>异常问题总数：</span>
|
||||
<span style="color: #2dcd28">60个</span>
|
||||
</div>
|
||||
<div>
|
||||
<span style="width: 120px">已关联工单数：</span>
|
||||
<span style="color: #81b337">60个</span>
|
||||
</div>
|
||||
<div>
|
||||
<span style="width: 120px"> 工单转换率：</span>
|
||||
<span style="color: #338dff">60%</span>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</el-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { onMounted, reactive, ref, provide } from 'vue'
|
||||
import MyEChart from '@/components/echarts/MyEchart.vue'
|
||||
import { useDictData } from '@/stores/dictData'
|
||||
import { mainHeight } from '@/utils/layout'
|
||||
import {} from '@/api/device-boot/panorama'
|
||||
const dictData = useDictData()
|
||||
const boxHeight: any = mainHeight(220, 3)
|
||||
const formRow: any = ref({})
|
||||
|
||||
const segmentedValue = ref('0')
|
||||
const segmentedList = [
|
||||
{
|
||||
label: '监督计划',
|
||||
value: '0'
|
||||
},
|
||||
{
|
||||
label: '系统监测',
|
||||
value: '1'
|
||||
},
|
||||
{
|
||||
label: '现场测试',
|
||||
value: '2'
|
||||
},
|
||||
{
|
||||
label: '用户投诉',
|
||||
value: '3'
|
||||
}
|
||||
]
|
||||
|
||||
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
|
||||
}
|
||||
let loadType = dictData.getBasicData('Statistical_Type').find(item => item.code == 'Load_Type')
|
||||
|
||||
formRow.value = form
|
||||
}
|
||||
|
||||
defineExpose({ info })
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.boxLeft {
|
||||
// width: calc(50% - 10px);
|
||||
width: 50%;
|
||||
padding: 10px 10px 10px 10px;
|
||||
font-size: 13px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.title {
|
||||
// height: ;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
font-size: 16px;
|
||||
height: 22px;
|
||||
line-height: 23px;
|
||||
padding-left: 5px;
|
||||
width: 100%;
|
||||
background-image: linear-gradient(to right, #a4e5da, #fff);
|
||||
|
||||
.info {
|
||||
font-weight: normal;
|
||||
display: flex;
|
||||
font-size: 12px;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
.evaluate {
|
||||
height: 60px;
|
||||
border: 1px solid #ccc;
|
||||
margin: 10px 0;
|
||||
padding: 10px 0;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
text-align: center;
|
||||
overflow-x: auto;
|
||||
overflow-y: hidden;
|
||||
}
|
||||
.boxR {
|
||||
border: 1px solid #ccc;
|
||||
margin: 10px 0;
|
||||
padding: 5px;
|
||||
.num {
|
||||
color: #2478f2;
|
||||
}
|
||||
.top {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.bottom {
|
||||
margin: 0;
|
||||
border: 0px;
|
||||
}
|
||||
}
|
||||
:deep(.el-select) {
|
||||
min-width: 120px;
|
||||
}
|
||||
.col {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
}
|
||||
.imgR {
|
||||
position: absolute;
|
||||
padding: 10px;
|
||||
top: calc(50% - 80px);
|
||||
left: -23px;
|
||||
z-index: 1;
|
||||
height: 200px;
|
||||
cursor: pointer;
|
||||
}
|
||||
:deep(.el-card) {
|
||||
.el-card__header {
|
||||
padding: 5px 20px;
|
||||
font-size: 1.2rem;
|
||||
&::before {
|
||||
width: 0.3rem;
|
||||
height: 1.2rem;
|
||||
margin-top: 0.3rem;
|
||||
position: absolute;
|
||||
content: '';
|
||||
background: var(--el-color-primary);
|
||||
border-radius: 0.02rem;
|
||||
left: 1.2rem;
|
||||
}
|
||||
}
|
||||
.el-card__body {
|
||||
padding: 10px;
|
||||
}
|
||||
}
|
||||
.col {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
grid-template-rows:repeat(3,auto);
|
||||
text-align: center;
|
||||
|
||||
// flex-wrap: wrap;
|
||||
// justify-content: space-around;
|
||||
// align-items: center;
|
||||
}
|
||||
:deep(.el-segmented) {
|
||||
--el-border-radius-base: 16px;
|
||||
}
|
||||
</style>
|
||||
@@ -1,40 +1,46 @@
|
||||
<template>
|
||||
<div class="boxLeft" :style="height">
|
||||
<!-- 在线监测规模 -->
|
||||
|
||||
<el-card>
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<div :class="show ? 'show' : 'noshow'">
|
||||
<div class="boxLeft" :style="height">
|
||||
<!-- 在线监测规模 -->
|
||||
<div :style="boxHeight">
|
||||
<div class="title">
|
||||
<span>在线监测规模</span>
|
||||
</div>
|
||||
</template>
|
||||
<MyEChart :style="boxHeight" :options="onlineCharts" />
|
||||
</el-card>
|
||||
|
||||
<!-- 监测终端状态 -->
|
||||
|
||||
<el-card>
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<div style="display: flex" class="mt2">
|
||||
<img src="@/assets/img/FGX.png" />
|
||||
</div>
|
||||
<MyEChart :style="tabHeight" :options="onlineCharts" />
|
||||
</div>
|
||||
<!-- 监测终端状态 -->
|
||||
<div :style="boxHeight">
|
||||
<div class="title">
|
||||
<span>监测终端状态</span>
|
||||
</div>
|
||||
</template>
|
||||
<div>
|
||||
<MyEChart :style="boxHeight" :options="terminalCharts" />
|
||||
</div>
|
||||
</el-card>
|
||||
<!-- 监测点 -->
|
||||
<el-card>
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span>监测点</span>
|
||||
|
||||
<div style="display: flex" class="mt2">
|
||||
<img src="@/assets/img/FGX.png" />
|
||||
</div>
|
||||
<MyEChart :style="tabHeight" :options="terminalCharts" />
|
||||
</div>
|
||||
<!-- 监测点 -->
|
||||
<div :style="boxHeight">
|
||||
<div class="title">
|
||||
<span>监测点数据完整率</span>
|
||||
</div>
|
||||
</template>
|
||||
<MyEChart :style="boxHeight" :options="dotCharts" />
|
||||
</el-card>
|
||||
|
||||
|
||||
|
||||
<div style="display: flex" class="mt2">
|
||||
<img src="@/assets/img/FGX.png" />
|
||||
</div>
|
||||
<MyEChart :style="tabHeight" :options="dotCharts" />
|
||||
</div>
|
||||
</div>
|
||||
<img
|
||||
class="imgL"
|
||||
:style="show ? 'transform: rotate(0deg);' : 'transform: rotate(180deg);'"
|
||||
@click="show = !show"
|
||||
src="@/assets/img/QH.png"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -47,9 +53,10 @@ import { mainHeight } from '@/utils/layout'
|
||||
import { getPracticalRunDeviceInfo, getGridDiagramCityDev, getGridDiagramLineData } from '@/api/device-boot/panorama'
|
||||
|
||||
const dictData = useDictData()
|
||||
const height = mainHeight(20)
|
||||
const boxHeight: any = mainHeight(220, 3)
|
||||
|
||||
const height = mainHeight(30)
|
||||
const boxHeight = mainHeight(40, 3)
|
||||
const tabHeight: any = mainHeight(150, 3)
|
||||
const show = ref(false)
|
||||
const formRow: any = ref({})
|
||||
const terminalCharts: any = ref({})
|
||||
|
||||
@@ -57,7 +64,6 @@ const dotCharts = ref()
|
||||
|
||||
const onlineCharts = ref()
|
||||
|
||||
|
||||
const info = (row: any) => {
|
||||
let form = {
|
||||
...row,
|
||||
@@ -67,7 +73,7 @@ const info = (row: any) => {
|
||||
ids: [],
|
||||
statisticalType: dictData.getBasicData('Statistical_Type', ['Report_Type'])[0],
|
||||
isUpToGrid: row.isUpToGrid,
|
||||
monitorFlag: row.isUpToGrid
|
||||
monitorFlag: row.isUpToGrid == 0 ? null : row.isUpToGrid
|
||||
}
|
||||
let loadType = dictData.getBasicData('Statistical_Type').find(item => item.code == 'Load_Type')
|
||||
|
||||
@@ -77,12 +83,13 @@ const info = (row: any) => {
|
||||
onlineCharts.value = {
|
||||
tooltip: {},
|
||||
yAxis: {
|
||||
type: 'value'
|
||||
type: 'value',
|
||||
name:'个'
|
||||
},
|
||||
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: ['变电站', '监测装置', '监测点'],
|
||||
data: ['变电站', '监测终端', '监测点'],
|
||||
axisLabel: {
|
||||
color: '#000',
|
||||
fontSize: 12
|
||||
@@ -98,7 +105,7 @@ const info = (row: any) => {
|
||||
dataZoom: null,
|
||||
series: [
|
||||
{
|
||||
name: '',
|
||||
name: '个数',
|
||||
type: 'bar',
|
||||
data: [
|
||||
res.data[0].subIndexes.length,
|
||||
@@ -130,7 +137,7 @@ const info = (row: any) => {
|
||||
},
|
||||
yAxis: [
|
||||
{
|
||||
name: '个数',
|
||||
name: '个',
|
||||
type: 'value'
|
||||
},
|
||||
{
|
||||
@@ -196,7 +203,7 @@ const info = (row: any) => {
|
||||
}
|
||||
},
|
||||
yAxis: {
|
||||
name: '',
|
||||
name: '%',
|
||||
min: 0,
|
||||
max: 100
|
||||
},
|
||||
@@ -209,7 +216,7 @@ const info = (row: any) => {
|
||||
dataZoom: null,
|
||||
series: [
|
||||
{
|
||||
name: '数据完整性',
|
||||
name: '数据完整率',
|
||||
type: 'bar',
|
||||
|
||||
data: res.data.map((item: any) => item.integrityRate),
|
||||
@@ -225,14 +232,15 @@ const info = (row: any) => {
|
||||
})
|
||||
}
|
||||
|
||||
defineExpose({ info })
|
||||
defineExpose({ info, show })
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.boxLeft {
|
||||
// background-color: #fff;
|
||||
width: 25%;
|
||||
padding: 10px 0px 10px 10px;
|
||||
background-color: #fff;
|
||||
width: 100%;
|
||||
padding: 10px 10px 10px 10px;
|
||||
border-radius: 5px;
|
||||
font-size: 13px;
|
||||
overflow: hidden;
|
||||
}
|
||||
@@ -241,84 +249,50 @@ defineExpose({ info })
|
||||
// height: ;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
font-size: 16px;
|
||||
height: 22px;
|
||||
font-size: 15px;
|
||||
line-height: 23px;
|
||||
padding-left: 5px;
|
||||
width: 100%;
|
||||
background-image: linear-gradient(to right, #a4e5da, #fff);
|
||||
font-weight: 550;
|
||||
|
||||
.info {
|
||||
font-weight: normal;
|
||||
display: flex;
|
||||
font-size: 12px;
|
||||
cursor: pointer;
|
||||
color: #757575;
|
||||
}
|
||||
}
|
||||
.evaluate {
|
||||
height: 60px;
|
||||
border: 1px solid #ccc;
|
||||
margin: 10px 0;
|
||||
padding: 10px 0;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
text-align: center;
|
||||
overflow-x: auto;
|
||||
overflow-y: hidden;
|
||||
}
|
||||
.boxR {
|
||||
border: 1px solid #ccc;
|
||||
margin: 10px 0;
|
||||
padding: 5px;
|
||||
.num {
|
||||
color: #2478f2;
|
||||
}
|
||||
.top {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.bottom {
|
||||
margin: 0;
|
||||
border: 0px;
|
||||
}
|
||||
}
|
||||
:deep(.el-select) {
|
||||
min-width: 120px;
|
||||
}
|
||||
.col {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
}
|
||||
.imgR {
|
||||
|
||||
.imgL {
|
||||
position: absolute;
|
||||
padding: 10px;
|
||||
top: calc(50% - 80px);
|
||||
left: -23px;
|
||||
z-index: 1;
|
||||
right: -23px;
|
||||
|
||||
transform: rotate(180deg);
|
||||
height: 200px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.show {
|
||||
width: 0px;
|
||||
transition: all 0.3s ease;
|
||||
.boxLeft {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
.noshow {
|
||||
width: 25%;
|
||||
transition: all 0.3s ease;
|
||||
.boxLeft {
|
||||
padding: 10px 10px 10px 10px;
|
||||
}
|
||||
}
|
||||
:deep(.el-card) {
|
||||
.el-card__header {
|
||||
padding: 5px 20px;
|
||||
font-size: 1.2rem;
|
||||
&::before {
|
||||
width: 0.3rem;
|
||||
height: 1.2rem;
|
||||
margin-top: 0.3rem;
|
||||
position: absolute;
|
||||
content: '';
|
||||
background: var(--el-color-primary);
|
||||
border-radius: 0.02rem;
|
||||
left: 1.2rem;
|
||||
}
|
||||
}
|
||||
.el-card__body {
|
||||
padding: 10px;
|
||||
}
|
||||
margin-bottom: 10px;
|
||||
margin-right: 10px;
|
||||
--el-card-padding: 10px !important;
|
||||
}
|
||||
:deep(.el-table thead) {
|
||||
color: #000;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,131 +1,172 @@
|
||||
<template>
|
||||
<div class="boxLeft" :style="height">
|
||||
<!-- 指标合格率统计 -->
|
||||
|
||||
<el-card>
|
||||
<template #header>
|
||||
<div class="card-header" style="display: flex; justify-content: space-between">
|
||||
<div :class="show ? 'show' : 'noshow'">
|
||||
<div class="boxLeft" :style="height">
|
||||
<!-- 指标合格率统计 -->
|
||||
<div :style="`height:calc(${boxHeight.height} - 40px)`">
|
||||
<div class="title">
|
||||
<span>指标合格率统计</span>
|
||||
<span class="info" @click="open(0)">
|
||||
详情
|
||||
<ArrowRight style="width: 12px" />
|
||||
</span>
|
||||
</div>
|
||||
</template>
|
||||
<MyEChart :style="`height:calc(${boxHeight.height} - 40px)`" :options="passingCharts" />
|
||||
</el-card>
|
||||
|
||||
<el-card>
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<div style="display: flex" class="mt2">
|
||||
<img src="@/assets/img/FGX.png" />
|
||||
</div>
|
||||
<MyEChart :style="`height:calc(${EchHeight.height} - 40px)`" :options="passingCharts" />
|
||||
</div>
|
||||
|
||||
<!-- 稳态指标超标占比 -->
|
||||
<div :style="`height:calc(${boxHeight.height} + 40px)`">
|
||||
<div class="title">
|
||||
<span>稳态指标超标占比</span>
|
||||
</div>
|
||||
</template>
|
||||
<div>
|
||||
<div class="monitoringPoints">
|
||||
<div>在线监测点数：{{ monitorList.onlineNum }}</div>
|
||||
<div>超标监测点数：{{ monitorList.overNum }}</div>
|
||||
<div>超标监测点占比：{{ monitorList.overRatio }}</div>
|
||||
<span class="info" @click="open(1)">
|
||||
详情
|
||||
<ArrowRight style="width: 12px" />
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<MyEChart :style="boxHeight" :options="exceededCharts" />
|
||||
</div>
|
||||
</el-card>
|
||||
<!-- 稳态电能质量指标水平评估 -->
|
||||
<el-card>
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span>稳态电能质量指标水平评估</span>
|
||||
<div style="display: flex" class="mt2">
|
||||
<img src="@/assets/img/FGX.png" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<div :style="`height:calc(${boxHeight.height} + 20px)`" class="boxSteps">
|
||||
<el-segmented v-model="active" :options="Voltage" block @change="handleClick" />
|
||||
<div class="evaluationData mt10">
|
||||
<div v-for="(item, i) in 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="12" style="display: flex">
|
||||
<div style="width: 50%">
|
||||
均值：
|
||||
<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>
|
||||
<div class="monitoringPoints">
|
||||
<div>在线监测点数：{{ monitorList.onlineNum }}</div>
|
||||
<div>超标监测点数：{{ monitorList.overNum }}</div>
|
||||
<div>超标监测点占比：{{ monitorList.overRatio }}</div>
|
||||
</div>
|
||||
|
||||
<MyEChart :style="`height:calc(${EchHeight.height} + 10px)`" :options="exceededCharts" />
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
|
||||
<!-- 暂态事件统计 -->
|
||||
<el-card>
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<!-- 暂态事件统计 -->
|
||||
<div :style="`height:calc(${boxHeight.height} - 10px)`">
|
||||
<div class="title">
|
||||
<span>暂态事件统计</span>
|
||||
</div>
|
||||
</template>
|
||||
<MyEChart :style="boxHeight" :options="statisticsCharts" />
|
||||
</el-card>
|
||||
<!-- 指标合格率统计 -->
|
||||
<statistics ref="statisticsRef" />
|
||||
|
||||
<div style="display: flex" class="mt2">
|
||||
<img src="@/assets/img/FGX.png" />
|
||||
</div>
|
||||
<MyEChart :style="`height:calc(${EchHeight.height} - 10px)`" :options="statisticsCharts" />
|
||||
</div>
|
||||
|
||||
<!-- 稳态电能质量指标水平评估 -->
|
||||
<div>
|
||||
<div class="title">
|
||||
<span>技术监督管理</span>
|
||||
<!-- <span class="info" @click="open(3)">
|
||||
详情
|
||||
<ArrowRight style="width: 12px" />
|
||||
</span> -->
|
||||
</div>
|
||||
<div style="display: flex" class="mt2">
|
||||
<img src="@/assets/img/FGX.png" />
|
||||
</div>
|
||||
<div style="height: 150px" class="boxR">
|
||||
<el-segmented v-model="active" :options="Voltage" block />
|
||||
<el-row
|
||||
style="height: calc(100% - 45px); display: flex; justify-content: space-around"
|
||||
class="ml10 mr10 mt5"
|
||||
>
|
||||
<el-col :span="11" class="col pt10">
|
||||
<div>
|
||||
<span>异常问题总数：</span>
|
||||
<span style="color: #2dcd28">60个</span>
|
||||
</div>
|
||||
<div>
|
||||
<span style="width: 120px">已关联工单数：</span>
|
||||
<span style="color: #81b337">60个</span>
|
||||
</div>
|
||||
<div>
|
||||
<span style="width: 120px"> 工单转换率：</span>
|
||||
<span style="color: #338dff">60%</span>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="11" class="col pt10" :offset="0.5">
|
||||
<div>
|
||||
<span>异常问题总数：</span>
|
||||
<span style="color: #2dcd28">60个</span>
|
||||
</div>
|
||||
<div>
|
||||
<span style="width: 120px">已关联工单数：</span>
|
||||
<span style="color: #81b337">60个</span>
|
||||
</div>
|
||||
<div>
|
||||
<span style="width: 120px"> 工单转换率：</span>
|
||||
<span style="color: #338dff">60%</span>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 指标合格率统计 -->
|
||||
<statistics ref="statisticsRef" />
|
||||
<!-- 稳态指标超标占比 -->
|
||||
<exceeded ref="exceededRef" />
|
||||
</div>
|
||||
<img
|
||||
class="imgR"
|
||||
:style="show ? 'transform: rotate(180deg);' : 'transform: rotate(0deg);'"
|
||||
@click="show = !show"
|
||||
src="@/assets/img/QH.png"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { onMounted, reactive, ref, provide } from 'vue'
|
||||
import statistics from '../components/city/statistics.vue'
|
||||
import exceeded from '../components/city/exceeded.vue'
|
||||
import MyEChart from '@/components/echarts/MyEchart.vue'
|
||||
import { useDictData } from '@/stores/dictData'
|
||||
import { mainHeight } from '@/utils/layout'
|
||||
|
||||
import { color } from '@/components/echarts/color'
|
||||
import { ArrowRight } from '@element-plus/icons-vue'
|
||||
import { getAssessDetail, evaluationDetail, getGeneralSituation, getEvaluationData } from '@/api/device-boot/panorama'
|
||||
import { getAssessDetail, evaluationDetail, getGeneralSituation } from '@/api/device-boot/panorama'
|
||||
|
||||
const dictData = useDictData()
|
||||
const height = mainHeight(20)
|
||||
const boxHeight: any = mainHeight(280, 4)
|
||||
const height = mainHeight(30)
|
||||
const show = ref(false)
|
||||
const boxHeight: any = mainHeight(220, 3)
|
||||
const EchHeight: any = mainHeight(320, 3)
|
||||
const statisticsRef = ref()
|
||||
const exceededRef = ref()
|
||||
const formRow: any = ref({})
|
||||
const monitorList: any = ref({})
|
||||
const statisticsCharts: any = ref({})
|
||||
const rowList: any = ref({})
|
||||
const chartRef = ref()
|
||||
const evaluationData: any = ref([])
|
||||
|
||||
const passingCharts = ref()
|
||||
const exceededCharts = ref()
|
||||
|
||||
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
|
||||
}
|
||||
})
|
||||
.map(item => {
|
||||
return {
|
||||
label: item.name,
|
||||
value: item.id
|
||||
}
|
||||
})
|
||||
const active: any = ref(Voltage[0].value)
|
||||
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 Voltage: any = [
|
||||
{
|
||||
label: '技术监督计划',
|
||||
value: '0'
|
||||
},
|
||||
{
|
||||
label: '在线监测',
|
||||
value: '1'
|
||||
},
|
||||
{
|
||||
label: '用户投诉',
|
||||
value: '2'
|
||||
},
|
||||
{
|
||||
label: '谐波普测',
|
||||
value: '3'
|
||||
}
|
||||
]
|
||||
|
||||
const active: any = ref(Voltage[0].value)
|
||||
|
||||
const open = (e: number) => {
|
||||
if (e == 0) {
|
||||
statisticsRef.value.open(formRow.value)
|
||||
} else if (e == 1) {
|
||||
exceededRef.value.open(formRow.value)
|
||||
}
|
||||
}
|
||||
const info = (row: any) => {
|
||||
@@ -137,7 +178,7 @@ const info = (row: any) => {
|
||||
ids: [],
|
||||
statisticalType: dictData.getBasicData('Statistical_Type', ['Report_Type'])[0],
|
||||
isUpToGrid: row.isUpToGrid,
|
||||
monitorFlag: row.isUpToGrid
|
||||
monitorFlag: row.isUpToGrid == 0 ? null : row.isUpToGrid
|
||||
}
|
||||
formRow.value = form
|
||||
// 指标合格率统计
|
||||
@@ -300,7 +341,8 @@ const info = (row: any) => {
|
||||
}),
|
||||
axisLabel: {
|
||||
color: '#000',
|
||||
fontSize: 12
|
||||
fontSize: 12,
|
||||
interval:0
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
@@ -344,8 +386,6 @@ const info = (row: any) => {
|
||||
})
|
||||
// 稳态电能质量指标水平评估
|
||||
|
||||
handleClick(active.value)
|
||||
// 暂态电能质量水平评估
|
||||
getGeneralSituation({ ...form, monitorFlag: form.isUpToGrid == 0 ? 2 : 1 }).then(res => {
|
||||
statisticsCharts.value = {
|
||||
tooltip: {},
|
||||
@@ -384,51 +424,65 @@ const info = (row: any) => {
|
||||
})
|
||||
}
|
||||
|
||||
// 点击电压等级
|
||||
const handleClick = (i: any) => {
|
||||
active.value = i
|
||||
getEvaluationData({
|
||||
...formRow.value,
|
||||
voltageLevel: i
|
||||
}).then(res => {
|
||||
evaluationData.value = res.data
|
||||
})
|
||||
}
|
||||
|
||||
defineExpose({ info })
|
||||
defineExpose({ info, show })
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.boxLeft {
|
||||
// background-color: #fff;
|
||||
width: 25%;
|
||||
padding: 10px 0px 10px 10px;
|
||||
background-color: #fff;
|
||||
width: 100%;
|
||||
padding: 10px 10px 10px 10px;
|
||||
font-size: 13px;
|
||||
overflow: hidden;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.info {
|
||||
font-weight: normal;
|
||||
.title {
|
||||
// height: ;
|
||||
display: flex;
|
||||
font-size: 12px;
|
||||
cursor: pointer;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
font-size: 15px;
|
||||
line-height: 23px;
|
||||
padding-left: 5px;
|
||||
width: 100%;
|
||||
font-weight: 550;
|
||||
|
||||
.info {
|
||||
font-weight: normal;
|
||||
display: flex;
|
||||
font-size: 12px;
|
||||
cursor: pointer;
|
||||
color: #757575;
|
||||
}
|
||||
}
|
||||
.TJTop {
|
||||
display: flex;
|
||||
img {
|
||||
height: 1.2rem;
|
||||
width: 1.2rem;
|
||||
margin-right: 5px;
|
||||
}
|
||||
}
|
||||
.evaluate {
|
||||
height: 60px;
|
||||
border: 1px solid #ccc;
|
||||
margin: 10px 0;
|
||||
padding: 10px 0;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
text-align: center;
|
||||
overflow-x: auto;
|
||||
overflow-y: hidden;
|
||||
.line {
|
||||
display: inline-block;
|
||||
width: 0.5rem;
|
||||
height: 0.5rem;
|
||||
border-radius: 0.25rem;
|
||||
background: var(--el-color-primary);
|
||||
margin-right: 2px;
|
||||
margin-bottom: 1px;
|
||||
}
|
||||
}
|
||||
.boxR {
|
||||
border: 1px solid #ccc;
|
||||
margin: 10px 0;
|
||||
padding: 5px;
|
||||
margin: 10px 0 0 0;
|
||||
|
||||
.num {
|
||||
color: #2478f2;
|
||||
}
|
||||
@@ -440,48 +494,62 @@ defineExpose({ info })
|
||||
margin: 0;
|
||||
border: 0px;
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.el-card) {
|
||||
.el-card__header {
|
||||
padding: 5px 20px;
|
||||
font-size: 1.2rem;
|
||||
&::before {
|
||||
width: 0.3rem;
|
||||
height: 1.2rem;
|
||||
margin-top: 0.3rem;
|
||||
position: absolute;
|
||||
content: '';
|
||||
background: var(--el-color-primary);
|
||||
border-radius: 0.02rem;
|
||||
left: 1.2rem;
|
||||
.harmonic {
|
||||
display: grid;
|
||||
.progress {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.text {
|
||||
width: 50px;
|
||||
font-size: 12px;
|
||||
}
|
||||
.el-progress {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
.el-card__body {
|
||||
padding: 10px;
|
||||
}
|
||||
:deep(.el-select) {
|
||||
min-width: 120px;
|
||||
}
|
||||
.col {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
border-radius: 10px;
|
||||
text-align: center;
|
||||
background-color: #edededc0;
|
||||
}
|
||||
.imgR {
|
||||
position: absolute;
|
||||
padding: 10px;
|
||||
top: calc(50% - 80px);
|
||||
left: -23px;
|
||||
|
||||
height: 200px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.show {
|
||||
width: 0px;
|
||||
transition: all 0.3s ease;
|
||||
.boxLeft {
|
||||
padding: 0;
|
||||
}
|
||||
margin-bottom: 10px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
.noshow {
|
||||
width: 25%;
|
||||
transition: all 0.3s ease;
|
||||
.boxLeft {
|
||||
padding: 10px 10px 10px 10px;
|
||||
}
|
||||
}
|
||||
:deep(.el-progress__text) {
|
||||
font-size: 0.8rem !important ;
|
||||
}
|
||||
.monitoringPoints {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr 1fr;
|
||||
text-align: center;
|
||||
}
|
||||
:deep(.boxSteps) {
|
||||
font-size: 1rem;
|
||||
.evaluationData {
|
||||
display: grid;
|
||||
height: calc(100% - 30px);
|
||||
grid-template-rows: repeat(5, auto);
|
||||
}
|
||||
img {
|
||||
width: 1.3rem;
|
||||
height: 1.3rem;
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
:deep(.el-segmented) {
|
||||
--el-border-radius-base: 16px;
|
||||
margin-top: 10px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,9 +1,9 @@
|
||||
<template>
|
||||
<!-- 综合评估详情 -->
|
||||
<el-dialog draggable title="综合评估详情" v-model="dialogVisible" width="1400px">
|
||||
<el-dialog draggable title="综合评估统计" v-model="dialogVisible" width="1400px">
|
||||
<div>
|
||||
<vxe-table v-bind="defaultAttribute" ref="vxeRef" height="300px" :data="tableData">
|
||||
<vxe-column field="deptName" title="所属区域" />
|
||||
<vxe-column field="deptName" title="地市" />
|
||||
<vxe-column field="assessData" title="综合评估得分" :formatter="formatter" />
|
||||
<vxe-column field="qualifyData" title="指标合格率" :formatter="formatter" />
|
||||
<vxe-colgroup title="各项指标得分">
|
||||
@@ -55,8 +55,8 @@ const open = async (row: any) => {
|
||||
text: '各地市综合评估趋势对比'
|
||||
},
|
||||
xAxis: {
|
||||
name: '(区域)',
|
||||
data: res.data.map((item: any) => item.deptName)
|
||||
name: '时间',
|
||||
data: res.data[0].children.map((item: any) => item.dataTime)
|
||||
},
|
||||
grid: {
|
||||
bottom: '10px'
|
||||
@@ -73,13 +73,10 @@ const open = async (row: any) => {
|
||||
let list: any = []
|
||||
let time: any = []
|
||||
res.data.forEach((item: any, num: any) => {
|
||||
time = []
|
||||
time.push(item.deptName)
|
||||
list.push([])
|
||||
item.children.forEach((val: any, i: any) => {
|
||||
if (num == 0) {
|
||||
list.push([])
|
||||
}
|
||||
time.push(val.dataTime)
|
||||
list[i].push(val.score == 3.14159 ? null : val.score)
|
||||
list[num].push(val.score == 3.14159 ? null : val.score)
|
||||
})
|
||||
})
|
||||
list.forEach((item: any, i: any) => {
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<!-- 监测点详情 -->
|
||||
<el-dialog draggable title="监测点详情" v-model="dialogVisible" width="1400px" :before-close="handleClose">
|
||||
<el-dialog draggable title="监测点统计" v-model="dialogVisible" width="1400px" :before-close="handleClose">
|
||||
<el-row style="height: 300px" :gutter="20">
|
||||
<el-col :span="12">
|
||||
<div class="title">
|
||||
@@ -18,7 +18,7 @@
|
||||
<el-select
|
||||
v-model="statisticalType"
|
||||
value-key="id"
|
||||
style="width: 120px; margin-right: 80px"
|
||||
style="width: 120px; margin-right: 80px"
|
||||
@change="statiStics"
|
||||
>
|
||||
<el-option v-for="item in options" :key="item.id" :label="item.name" :value="item" />
|
||||
@@ -31,22 +31,14 @@
|
||||
</el-row>
|
||||
<div>
|
||||
<div class="title">
|
||||
<span>监测点详细列表</span>
|
||||
<span>区域监测点统计</span>
|
||||
</div>
|
||||
<vxe-table v-bind="defaultAttribute" ref="vxeRef" height="300px" :data="tableData">
|
||||
<vxe-column field="lineName" title="监测点名称" />
|
||||
<vxe-column field="areaName" title="所属区域" />
|
||||
<vxe-column field="subName" title="所属变电站" />
|
||||
<vxe-column field="voltageScale" title="电压等级" :formatter="formatter" />
|
||||
<vxe-column field="loadType" title="负荷类型" :formatter="formatter" />
|
||||
<vxe-column field="comFlag" title="通讯状态">
|
||||
<template #default="scope">
|
||||
<el-tag type="success" v-if="scope.row.comFlag == 1">正常</el-tag>
|
||||
<el-tag type="danger" v-else>中断</el-tag>
|
||||
</template>
|
||||
</vxe-column>
|
||||
<vxe-column field="onlineRate" title="在线率(%)" />
|
||||
<vxe-column field="integrityData" title="数据完整性(%)" />
|
||||
<vxe-column field="orgName" title="区域" :formatter="formatter" />
|
||||
<vxe-column field="num" title="监测点个数" :formatter="formatter" />
|
||||
<vxe-column field="integrityRate" title="数据完整率(%)" />
|
||||
<vxe-column field="onLineRate" title="数据在线率(%)" />
|
||||
<vxe-column field="outOfStandardRate" title="超标监测点占比(%)" />
|
||||
</vxe-table>
|
||||
</div>
|
||||
</el-dialog>
|
||||
@@ -62,7 +54,7 @@ const dialogVisible: any = ref(false)
|
||||
|
||||
const Voltage = dictData.getBasicData('Dev_Voltage_Stand')
|
||||
const tableData: any = ref([])
|
||||
const options = dictData.getBasicData('Statistical_Type', ['Report_Type'])
|
||||
const options = dictData.getBasicData('Statistical_Type', ['Report_Type', 'Power_Network'])
|
||||
const time = ref('1')
|
||||
const statisticalType = ref(options[0])
|
||||
const loadTypeArr = dictData.getBasicData('Interference_Source')
|
||||
@@ -84,8 +76,11 @@ const open = async (row: any) => {
|
||||
// 统计
|
||||
statiStics()
|
||||
// 监测点列表
|
||||
getHalfReport(rowList.value).then((res: any) => {
|
||||
tableData.value = res.data.records
|
||||
getGridDiagramLineData({
|
||||
...rowList.value,
|
||||
statisticalType: rowList.value.deviceInfoParam.statisticalType
|
||||
}).then((res: any) => {
|
||||
tableData.value = res.data
|
||||
})
|
||||
|
||||
dialogVisible.value = true
|
||||
@@ -145,15 +140,15 @@ const statiStics = () => {
|
||||
text: ''
|
||||
},
|
||||
xAxis: {
|
||||
|
||||
data: res.data.map((item: any) => item.orgName)
|
||||
},
|
||||
yAxis: {
|
||||
name: '',
|
||||
name: '%',
|
||||
min: 0,
|
||||
max: 100
|
||||
},
|
||||
options: {
|
||||
dataZoom: null,
|
||||
series: [
|
||||
{
|
||||
name: '数据完整性',
|
||||
@@ -192,10 +187,10 @@ const statiStics = () => {
|
||||
})
|
||||
}
|
||||
const formatter = (row: any) => {
|
||||
if (row.column.field == 'loadType') {
|
||||
return loadTypeArr.filter((item: any) => item.id == row.cellValue)[0]?.name
|
||||
} else if (row.column.field == 'voltageScale') {
|
||||
return Voltage.filter((item: any) => item.id == row.cellValue)[0]?.name
|
||||
if (row.column.field == 'orgName') {
|
||||
return row.cellValue.match(/[\u4e00-\u9fa5]+/g).join('')
|
||||
} else if (row.column.field == 'num') {
|
||||
return row.row.orgName.match(/\(([^]+)\)/)[1]
|
||||
} else {
|
||||
return row.cellValue
|
||||
}
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<!-- 变电站 -->
|
||||
<el-dialog draggable title="变电站详情" v-model="dialogVisible" width="1400px" :before-close="handleClose">
|
||||
<el-dialog draggable title="变电站统计" v-model="dialogVisible" width="1400px" :before-close="handleClose">
|
||||
<el-row style="height: 300px" :gutter="20">
|
||||
<el-col :span="12">
|
||||
<div class="title">
|
||||
@@ -39,16 +39,21 @@
|
||||
</div>
|
||||
|
||||
<div class="pie">
|
||||
<MyEChart v-for="item in picEChart" class="MyEChart" :options="item" />
|
||||
<MyEChart
|
||||
v-for="(item, i) in picEChart"
|
||||
:style="i == 3 ? `margin-left: 20%;` : ``"
|
||||
class="MyEChart"
|
||||
:options="item"
|
||||
/>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<div>
|
||||
<div class="title mb10">
|
||||
<span>变电站详细列表</span>
|
||||
<span>区域变电站统计</span>
|
||||
</div>
|
||||
<vxe-table v-bind="defaultAttribute" ref="vxeRef" height="300px" :data="tableData">
|
||||
<vxe-column field="name" title="所属区域" />
|
||||
<vxe-column field="name" title="区域" />
|
||||
<vxe-column field="num" title="变电站总数" />
|
||||
<vxe-column field="num1" title="无污染数量" :formatter="formatter" />
|
||||
<vxe-column field="num2" title="轻微污染数量" :formatter="formatter" />
|
||||
@@ -96,23 +101,11 @@ const open = async (row: any) => {
|
||||
// 污染
|
||||
contaminateC()
|
||||
// 列表
|
||||
getPollutionAlarmList(rowList.value).then(res => {
|
||||
tableData.value = res.data.map((item: any) => {
|
||||
return {
|
||||
name: item[0],
|
||||
num: item[1],
|
||||
num1: item[2],
|
||||
num2: item[3],
|
||||
num3: item[4],
|
||||
num4: item[5],
|
||||
num5: item[5]
|
||||
}
|
||||
})
|
||||
})
|
||||
|
||||
dialogVisible.value = true
|
||||
}
|
||||
const contaminateC = () => {
|
||||
// rowList.value.deviceInfoParam.ids=[contaminate.value]
|
||||
getPollutionAlarmData({ ...rowList.value, ids: [contaminate.value] }).then(res => {
|
||||
let data = []
|
||||
|
||||
@@ -213,14 +206,15 @@ const contaminateC = () => {
|
||||
show: false
|
||||
},
|
||||
axisLabel: {
|
||||
distance: 5,
|
||||
color: '#666',
|
||||
fontSize: 12,
|
||||
formatter: function (value: any) {
|
||||
if (value === 0 || value === 100) {
|
||||
return value + '%'
|
||||
}
|
||||
}
|
||||
show: false
|
||||
// distance: 5,
|
||||
// color: '#666',
|
||||
// fontSize: 12,
|
||||
// formatter: function (value: any) {
|
||||
// if (value === 0 || value === 100) {
|
||||
// return value + '%'
|
||||
// }
|
||||
// }
|
||||
},
|
||||
anchor: {
|
||||
show: false,
|
||||
@@ -260,6 +254,19 @@ const contaminateC = () => {
|
||||
}
|
||||
})
|
||||
})
|
||||
getPollutionAlarmList({ ...rowList.value, ids: [contaminate.value] }).then(res => {
|
||||
tableData.value = res.data.map((item: any) => {
|
||||
return {
|
||||
name: item[0],
|
||||
num: item[1],
|
||||
num1: item[2],
|
||||
num2: item[3],
|
||||
num3: item[4],
|
||||
num4: item[5],
|
||||
num5: item[5]
|
||||
}
|
||||
})
|
||||
})
|
||||
}
|
||||
const analysis = (e: any) => {
|
||||
let time = rowList.value.searchBeginTime?.slice(0, 4) + `-01-01`
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<!-- 稳态 -->
|
||||
<template>
|
||||
<!-- 终端 -->
|
||||
<el-dialog draggable title="稳态电能质量水平评估详情" v-model="dialogVisible" width="1400px">
|
||||
<el-dialog draggable title="稳态电能质量水平评估统计" v-model="dialogVisible" width="1400px">
|
||||
<el-row style="height: 330px" :gutter="20">
|
||||
<el-col :span="12">
|
||||
<div class="title">
|
||||
@@ -31,7 +31,7 @@
|
||||
</div>
|
||||
<div>
|
||||
标准差：
|
||||
<span style="color: #ff9900">{{ item.avg == 3.14159 ? '--' : item.avg }}</span>
|
||||
<span style="color: #ff9900">{{ item.avg == 3.14159 ? '--' : item.sd }}</span>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
@@ -48,10 +48,10 @@
|
||||
</el-row>
|
||||
<div>
|
||||
<div class="title">
|
||||
<span>稳态电能质量水平评估详细列表</span>
|
||||
<span>区域稳态电能质量水平评估</span>
|
||||
</div>
|
||||
<vxe-table v-bind="defaultAttribute" ref="vxeRef" height="300px" :data="tableData">
|
||||
<vxe-column field="deptName" title="区域名称" />
|
||||
<vxe-column field="deptName" title="区域" />
|
||||
<vxe-column field="onlineNum" title="在线监测点数量(个)" />
|
||||
<vxe-column field="overNum" title="超标监测点数量(个)" />
|
||||
<vxe-column field="overRatio" title="超标监测点占比(%)" />
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<!-- 技术 -->
|
||||
<template>
|
||||
<el-dialog draggable title="技术监督管理详情" v-model="dialogVisible" width="1400px">
|
||||
<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" />
|
||||
@@ -24,11 +24,7 @@ import { defaultAttribute } from '@/components/table/defaultAttribute'
|
||||
|
||||
const dialogVisible: any = ref(false)
|
||||
|
||||
const tableData: any = ref([
|
||||
{
|
||||
devName: 123
|
||||
}
|
||||
])
|
||||
const tableData: any = ref([])
|
||||
|
||||
const picEChart = ref({
|
||||
title: {
|
||||
|
||||
@@ -1,9 +1,9 @@
|
||||
<!-- 暂态 -->
|
||||
<template>
|
||||
<el-dialog draggable title="暂态电能质量水平评估详情" v-model="dialogVisible" width="1400px">
|
||||
<el-dialog draggable title="暂态电能质量水平评估统计" v-model="dialogVisible" width="1400px">
|
||||
<div>
|
||||
<vxe-table v-bind="defaultAttribute" ref="vxeRef" height="300px" :data="tableData">
|
||||
<vxe-column field="name" title="所属区域" />
|
||||
<vxe-column field="name" title="区域" />
|
||||
|
||||
<vxe-column field="sagTimes" title="暂降次数" />
|
||||
<vxe-column field="swellTimes" title="暂升次数" />
|
||||
@@ -32,7 +32,7 @@
|
||||
<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="name" label="暂降类型" width="80px" align="center" />
|
||||
<el-table-column prop="value" label="暂降次数" width="80px" align="center" />
|
||||
</el-table>
|
||||
</div>
|
||||
@@ -66,7 +66,8 @@ const open = async (row: any) => {
|
||||
trigger: 'item'
|
||||
},
|
||||
legend: {
|
||||
orient: 'vertical'
|
||||
orient: 'vertical',
|
||||
left: '10px'
|
||||
},
|
||||
xAxis: {
|
||||
show: false
|
||||
@@ -79,7 +80,7 @@ const open = async (row: any) => {
|
||||
series: [
|
||||
{
|
||||
type: 'pie',
|
||||
center: ['40%', '50%'],
|
||||
center: ['60%', '50%'],
|
||||
radius: '50%',
|
||||
label: {
|
||||
show: false,
|
||||
@@ -98,7 +99,8 @@ const open = async (row: any) => {
|
||||
trigger: 'item'
|
||||
},
|
||||
legend: {
|
||||
orient: 'vertical'
|
||||
orient: 'vertical',
|
||||
left: '10px'
|
||||
},
|
||||
xAxis: {
|
||||
show: false
|
||||
@@ -111,7 +113,7 @@ const open = async (row: any) => {
|
||||
series: [
|
||||
{
|
||||
type: 'pie',
|
||||
center: ['40%', '50%'],
|
||||
center: ['60%', '50%'],
|
||||
radius: '50%',
|
||||
label: {
|
||||
show: false,
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<!-- 终端 -->
|
||||
<el-dialog draggable title="终端统计详情" v-model="dialogVisible" width="1400px" :before-close="handleClose">
|
||||
<el-dialog draggable title="终端统计" v-model="dialogVisible" width="1400px" :before-close="handleClose">
|
||||
<el-row style="height: 300px" :gutter="20">
|
||||
<el-col :span="12">
|
||||
<div class="title">
|
||||
@@ -50,30 +50,14 @@
|
||||
</el-row>
|
||||
<div>
|
||||
<div class="title">
|
||||
<span>终端统计细列表</span>
|
||||
<span>区域终端统计</span>
|
||||
</div>
|
||||
<vxe-table v-bind="defaultAttribute" ref="vxeRef" height="300px" :data="tableData">
|
||||
<vxe-column field="devName" title="终端名称" />
|
||||
<vxe-column field="areaName" title="所属区域" />
|
||||
<vxe-column field="bdName" title="所属变电站" />
|
||||
<vxe-column field="devType" title="终端型号" />
|
||||
<vxe-column field="loginTime" title="投运时间" />
|
||||
<vxe-column field="runFlag" title="终端状态">
|
||||
<template #default="scope">
|
||||
<el-tag :type="scope.row.runFlag == '投运' ? 'success' : 'danger'">
|
||||
{{ scope.row.runFlag }}
|
||||
</el-tag>
|
||||
</template>
|
||||
</vxe-column>
|
||||
<vxe-column field="comFlag" title="通讯状态">
|
||||
<template #default="scope">
|
||||
<el-tag :type="scope.row.comFlag == '正常' ? 'success' : 'danger'">
|
||||
{{ scope.row.comFlag }}
|
||||
</el-tag>
|
||||
</template>
|
||||
</vxe-column>
|
||||
<vxe-column field="updateTime" title="最新数据时间" />
|
||||
<vxe-column field="onlineEvaluate" title="终端在线率(%)" :formatter="formatter" />
|
||||
<vxe-column field="orgName" title="区域" />
|
||||
<vxe-column field="runNum" title="运行个数 " />
|
||||
<vxe-column field="overhaulNum" title="检修个数 " />
|
||||
<vxe-column field="refundNum" title="退役个数" />
|
||||
<vxe-column field="onLineRate" title="数据在线率(%)" />
|
||||
</vxe-table>
|
||||
</div>
|
||||
</el-dialog>
|
||||
@@ -83,7 +67,7 @@ import { ref } from 'vue'
|
||||
import { useDictData } from '@/stores/dictData'
|
||||
import MyEChart from '@/components/echarts/MyEchart.vue'
|
||||
import { defaultAttribute } from '@/components/table/defaultAttribute'
|
||||
import { getGridDiagramDevTendency, getGridDiagramDevData, getRuntimeData } from '@/api/device-boot/panorama'
|
||||
import { getGridDiagramDevTendency, getGridDiagramDevData, getGridDiagramDevDataList } from '@/api/device-boot/panorama'
|
||||
const dictData = useDictData()
|
||||
const dialogVisible: any = ref(false)
|
||||
const time = ref('1')
|
||||
@@ -122,6 +106,10 @@ const open = async (row: any) => {
|
||||
})
|
||||
|
||||
picEChart.value = {
|
||||
tooltip: {
|
||||
trigger: 'item',
|
||||
formatter: '{b} :在运终端数 {c} 台'
|
||||
},
|
||||
legend: {
|
||||
show: false
|
||||
},
|
||||
@@ -161,13 +149,23 @@ const open = async (row: any) => {
|
||||
}
|
||||
})
|
||||
// 列表
|
||||
getRuntimeData({
|
||||
getGridDiagramDevDataList({
|
||||
deviceInfoParam: {
|
||||
...row,
|
||||
serverName: 'pqs-common',
|
||||
ids: [row.id],
|
||||
runFlag: [],
|
||||
comFlag: [],
|
||||
manufacturer: dictData.getBasicData('Dev_Manufacturers'),
|
||||
statisticalType: dictData.getBasicData('Statistical_Type', ['Report_Type'])[0]
|
||||
},
|
||||
...row,
|
||||
serverName: 'pqs-common',
|
||||
ids: [row.id],
|
||||
runFlag: [],
|
||||
comFlag: [],
|
||||
manufacturer: dictData.getBasicData('Dev_Manufacturers'),
|
||||
statisticalType: {}
|
||||
statisticalType: dictData.getBasicData('Statistical_Type', ['Report_Type'])[0]
|
||||
}).then((res: any) => {
|
||||
tableData.value = res.data
|
||||
})
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,613 @@
|
||||
<template>
|
||||
<div class="default-main lineInfo" :style="height">
|
||||
<DatePicker ref="datePickerRef" style="display: none" />
|
||||
<el-page-header :icon="ArrowLeft" @back="emit('back')">
|
||||
<template #content>
|
||||
<span class="text-large font-600 mr-3">{{ dropList.lineName }}详情</span>
|
||||
</template>
|
||||
</el-page-header>
|
||||
<el-row :gutter="20" class="mt10" :style="`height:${rowHeight}`">
|
||||
<el-col :span="8">
|
||||
<h3 class="mb10 iconBox">
|
||||
<span></span>
|
||||
台账信息
|
||||
</h3>
|
||||
<el-descriptions title="" border :column="2">
|
||||
<el-descriptions-item label="监测点名称">{{ dropList.lineName }}</el-descriptions-item>
|
||||
<el-descriptions-item label="所属厂家">{{ dropList.manufacturer }}</el-descriptions-item>
|
||||
<el-descriptions-item label="电压等级">{{ dropList.scale }}</el-descriptions-item>
|
||||
<el-descriptions-item label="投运日期">{{ dropList.loginTime }}</el-descriptions-item>
|
||||
<el-descriptions-item label="PT">{{ dropList.pt }}</el-descriptions-item>
|
||||
<el-descriptions-item label="CT">{{ dropList.ct }}</el-descriptions-item>
|
||||
<el-descriptions-item label="干扰源类型">{{ dropList.loadType }}</el-descriptions-item>
|
||||
<el-descriptions-item label="通讯状态">
|
||||
<el-tag size="small" :type="dropList.comFlag == '正常' ? 'success' : 'danger'" effect="dark">
|
||||
{{ dropList.comFlag }}
|
||||
</el-tag>
|
||||
</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<h3 class="mb10 iconBox">
|
||||
<span></span>
|
||||
数据质量
|
||||
</h3>
|
||||
<div style="display: flex">
|
||||
<MyEChart :style="`height: calc(${rowHeight} - 31px)`" :options="ComCharts" />
|
||||
<MyEChart :style="`height: calc(${rowHeight} - 31px)`" :options="onLineCharts" />
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<h3 class="mb10 iconBox">
|
||||
<span></span>
|
||||
监测点总体评价结论
|
||||
</h3>
|
||||
|
||||
|
||||
<div class="evaluationData">
|
||||
<el-row style="width: 96%" class="row pb5">
|
||||
<el-col :span="12" style="display: flex">
|
||||
<span>{{ dropList.lineName }}</span>
|
||||
</el-col>
|
||||
<el-col :span="12" style="display: flex">
|
||||
<div>
|
||||
综合评估得分:
|
||||
<span style="color: #299edf">
|
||||
{{ dropList.assessData == 3.14159 ? '--' : dropList.assessData }}
|
||||
</span>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row style="width: 96%" v-for="(item, i) in evaluationData" class="row pb5">
|
||||
<el-col :span="14" style="display: flex">
|
||||
<img :src="url[i]" />
|
||||
<span>{{ item.targetName }}</span>
|
||||
</el-col>
|
||||
<el-col :span="10" style="display: flex">
|
||||
<div style="width: 100%">
|
||||
评估得分：
|
||||
<span style="color: #299edf">{{ item.avg == 3.14159 ? '--' : item.avg }}</span>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="20" class="mt10" :style="`height:${rowHeight}`">
|
||||
<el-col :span="8">
|
||||
<h3 class="mb10 iconBox">
|
||||
<span></span>
|
||||
稳态指标合格率
|
||||
</h3>
|
||||
<div :style="`height: calc(${rowHeight} - 31px)`" ref="chartRef"></div>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<h3 class="mb10 iconBox">
|
||||
<span></span>
|
||||
暂态事件统计
|
||||
</h3>
|
||||
<MyEChart :style="`height: calc(${rowHeight} - 31px)`" :options="incidentCharts" />
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="20" class="mt10" :style="`height:${rowHeight}`">
|
||||
<el-col :span="24">
|
||||
<h3 class="mb10 iconBox">
|
||||
<span></span>
|
||||
历史趋势图
|
||||
</h3>
|
||||
<history :lineId="lineId" ref="historyRef" />
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { onMounted, reactive, ref, provide } from 'vue'
|
||||
import { ArrowLeft } from '@element-plus/icons-vue'
|
||||
import { mainHeight } from '@/utils/layout'
|
||||
import history from './history.vue'
|
||||
import { color } from '@/components/echarts/color'
|
||||
import DatePicker from '@/components/form/datePicker/index.vue'
|
||||
import MyEChart from '@/components/echarts/MyEchart.vue'
|
||||
import echarts from '@/components/echarts/echarts'
|
||||
|
||||
import { getLineDetailData } from '@/api/advance-boot/bearingCapacity'
|
||||
import {
|
||||
getTotalIntegrityByLineIds,
|
||||
getTotalOnlineRates,
|
||||
lineQualifiedDetail,
|
||||
getLineAssess,
|
||||
getEventDetailByLineId
|
||||
} from '@/api/device-boot/panorama'
|
||||
import { title } from 'process'
|
||||
import { fontWeight } from 'html2canvas/dist/types/css/property-descriptors/font-weight'
|
||||
const emit = defineEmits(['back'])
|
||||
const dropList: any = ref({})
|
||||
const evaluationData: any = ref([])
|
||||
const incidentCharts: any = ref({})
|
||||
const ComCharts: any = ref({})
|
||||
const onLineCharts: any = ref({})
|
||||
const datePickerRef = ref()
|
||||
const chartRef = ref<HTMLDivElement>()
|
||||
const historyRef = ref()
|
||||
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 lineId: any = ref('')
|
||||
const height = mainHeight(20)
|
||||
const rowHeight = mainHeight(190, 3).height
|
||||
|
||||
// 查询
|
||||
const open = async (id: string) => {
|
||||
let form = {
|
||||
comFlag: 1,
|
||||
endTime: datePickerRef.value.timeValue[1],
|
||||
lineIds: [id],
|
||||
|
||||
ids: [id],
|
||||
searchValue: '',
|
||||
startTime: datePickerRef.value.timeValue[0]
|
||||
}
|
||||
lineId.value = id
|
||||
const { data } = await getLineDetailData({ id: id })
|
||||
dropList.value = data
|
||||
// 运行状态
|
||||
// 完整性
|
||||
getTotalIntegrityByLineIds(form).then((res: any) => {
|
||||
let num = (res.data || 0) / 100
|
||||
ComCharts.value = {
|
||||
title: {
|
||||
text: '完整性',
|
||||
bottom: '10%',
|
||||
left: 'center',
|
||||
textStyle: {
|
||||
fontSize: 16
|
||||
}
|
||||
},
|
||||
xAxis: {
|
||||
show: false
|
||||
},
|
||||
yAxis: {
|
||||
show: false
|
||||
},
|
||||
|
||||
options: {
|
||||
dataZoom: null,
|
||||
series: [
|
||||
{
|
||||
//第二个球的填充
|
||||
type: 'liquidFill',
|
||||
radius: '65%',
|
||||
center: ['50%', '40%'], //中心点
|
||||
color: [
|
||||
{
|
||||
type: 'linear',
|
||||
x: 0,
|
||||
y: 0,
|
||||
x2: 0,
|
||||
y2: 1,
|
||||
colorStops: [
|
||||
{
|
||||
offset: 1,
|
||||
color: '#2aa1e3'
|
||||
}
|
||||
],
|
||||
globalCoord: false
|
||||
}
|
||||
],
|
||||
data: [num, num], // data个数代表波浪数
|
||||
backgroundStyle: {
|
||||
borderWidth: 1,
|
||||
color: '#f7f8fc'
|
||||
},
|
||||
label: {
|
||||
normal: {
|
||||
textStyle: {
|
||||
fontSize: 20,
|
||||
color: '#000'
|
||||
}
|
||||
}
|
||||
},
|
||||
outline: {
|
||||
// show: false
|
||||
borderDistance: 0,
|
||||
itemStyle: {
|
||||
borderWidth: 2,
|
||||
borderColor: '#fff'
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
// 稳态指标合格率
|
||||
})
|
||||
// 在线率
|
||||
getTotalOnlineRates(form).then((res: any) => {
|
||||
let num = (res.data || 0) / 100
|
||||
onLineCharts.value = {
|
||||
title: {
|
||||
text: '在线率',
|
||||
bottom: '10%',
|
||||
left: 'center',
|
||||
textStyle: {
|
||||
fontSize: 16
|
||||
}
|
||||
},
|
||||
xAxis: {
|
||||
show: false
|
||||
},
|
||||
yAxis: {
|
||||
show: false
|
||||
},
|
||||
|
||||
options: {
|
||||
dataZoom: null,
|
||||
series: [
|
||||
{
|
||||
//第二个球的填充
|
||||
type: 'liquidFill',
|
||||
radius: '65%',
|
||||
center: ['50%', '40%'], //中心点
|
||||
color: [
|
||||
{
|
||||
type: 'linear',
|
||||
x: 0,
|
||||
y: 0,
|
||||
x2: 0,
|
||||
y2: 1,
|
||||
colorStops: [
|
||||
{
|
||||
offset: 1,
|
||||
color: '#67c23a'
|
||||
}
|
||||
],
|
||||
globalCoord: false
|
||||
}
|
||||
],
|
||||
data: [num, num], // data个数代表波浪数
|
||||
backgroundStyle: {
|
||||
color: '#f7f8fc'
|
||||
},
|
||||
label: {
|
||||
normal: {
|
||||
textStyle: {
|
||||
fontSize: 20,
|
||||
color: '#000'
|
||||
}
|
||||
}
|
||||
},
|
||||
outline: {
|
||||
// show: false
|
||||
borderDistance: 0,
|
||||
itemStyle: {
|
||||
borderWidth: 2,
|
||||
borderColor: '#fff'
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
// 监测点总体评价结论
|
||||
getLineAssess({
|
||||
lineId: id,
|
||||
startTime: datePickerRef.value.timeValue[0],
|
||||
endTime: datePickerRef.value.timeValue[1]
|
||||
}).then((res: any) => {
|
||||
dropList.value.assessData = res.data.assessData
|
||||
evaluationData.value = [
|
||||
{
|
||||
targetName: '频率偏差',
|
||||
avg: res.data.freqAssessData,
|
||||
sd: res.data.freqQualifyData
|
||||
},
|
||||
{
|
||||
targetName: '电压偏差',
|
||||
avg: res.data.vdevAssessData,
|
||||
sd: res.data.vdevQualifyData
|
||||
},
|
||||
{
|
||||
targetName: '电压总谐波畸变率',
|
||||
avg: res.data.harmAssessData,
|
||||
sd: res.data.harmQualifyData
|
||||
},
|
||||
{
|
||||
targetName: '三相电压不平衡度',
|
||||
avg: res.data.unbalanceAssessData,
|
||||
sd: res.data.unbalanceQualifyData
|
||||
},
|
||||
{
|
||||
targetName: '闪变',
|
||||
avg: res.data.flickerAssessData,
|
||||
sd: res.data.flickerQualifyData
|
||||
}
|
||||
]
|
||||
})
|
||||
// 稳态指标合格率
|
||||
|
||||
lineQualifiedDetail({
|
||||
lineId: id,
|
||||
startTime: datePickerRef.value.timeValue[0],
|
||||
endTime: datePickerRef.value.timeValue[1]
|
||||
}).then(res => {
|
||||
echart([
|
||||
{
|
||||
time: datePickerRef.value.timeValue[0].substring(0, 7),
|
||||
targetList: ['频率偏差', '电压偏差', '电压总谐波畸变率', '三相电压不平衡度', '闪变'],
|
||||
ratioList: [
|
||||
res.data.freqDev == 3.14159 ? null : res.data.freqDev,
|
||||
res.data.vdev == 3.14159 ? null : res.data.vdev,
|
||||
res.data.vthd == 3.14159 ? null : res.data.vthd,
|
||||
res.data.ubalance == 3.14159 ? null : res.data.ubalance,
|
||||
res.data.plt == 3.14159 ? null : res.data.plt
|
||||
]
|
||||
}
|
||||
])
|
||||
})
|
||||
|
||||
// 暂态事件统计
|
||||
getEventDetailByLineId({
|
||||
id: id,
|
||||
startTime: datePickerRef.value.timeValue[0],
|
||||
endTime: datePickerRef.value.timeValue[1],
|
||||
type: datePickerRef.value.interval
|
||||
}).then((res: any) => {
|
||||
let data = [
|
||||
{
|
||||
name: '电压暂升',
|
||||
value: res.data?.swellTimes || 0
|
||||
},
|
||||
{
|
||||
name: '电压暂降',
|
||||
value: res.data?.sagTimes || 0
|
||||
},
|
||||
{
|
||||
name: '电压中断',
|
||||
value: res.data?.interruptTimes || 0
|
||||
}
|
||||
]
|
||||
incidentCharts.value = {
|
||||
title: {
|
||||
text: `${res.data?.swellTimes + res.data?.sagTimes + res.data?.interruptTimes}`,
|
||||
left: '37%',
|
||||
top: '40%',
|
||||
textStyle: {
|
||||
fontWeight: 600,
|
||||
fontSize: 16
|
||||
},
|
||||
subtext: '总数',
|
||||
subtextStyle: {
|
||||
fontWeight: 550,
|
||||
fontSize: 14
|
||||
}
|
||||
},
|
||||
|
||||
tooltip: {
|
||||
trigger: 'item'
|
||||
},
|
||||
legend: {
|
||||
orient: 'vertical',
|
||||
top: 'center',
|
||||
right: '10%',
|
||||
formatter: function (e: any) {
|
||||
console.log('🚀 ~ open ~ e:', e)
|
||||
return e + ' ' + data.filter(item => item.name == e)[0].value + '条'
|
||||
}
|
||||
},
|
||||
xAxis: {
|
||||
show: false
|
||||
},
|
||||
yAxis: {
|
||||
show: false
|
||||
},
|
||||
options: {
|
||||
dataZoom: null,
|
||||
series: [
|
||||
{
|
||||
type: 'pie',
|
||||
center: ['40%', '50%'],
|
||||
radius: ['50%', '70%'],
|
||||
label: {
|
||||
show: false,
|
||||
position: 'outside',
|
||||
textStyle: {
|
||||
//数值样式
|
||||
}
|
||||
},
|
||||
|
||||
data: data
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
// incidentCharts.value = {
|
||||
// title: {
|
||||
// text: ''
|
||||
// },
|
||||
// legend: {
|
||||
// show: true,
|
||||
// right: 90
|
||||
// },
|
||||
// xAxis: {
|
||||
// data: ['电压暂升', '电压暂降', '电压中断']
|
||||
// },
|
||||
// yAxis: {
|
||||
// name: '条'
|
||||
// },
|
||||
// grid: {
|
||||
// top: '35px',
|
||||
// left: '20px',
|
||||
// right: '20px'
|
||||
// },
|
||||
// options: {
|
||||
// dataZoom: null,
|
||||
// series: [
|
||||
// {
|
||||
// type: 'bar',
|
||||
|
||||
// data: [res.data?.swellTimes, res.data?.sagTimes, res.data?.interruptTimes],
|
||||
// label: {
|
||||
// show: true,
|
||||
// position: 'top',
|
||||
// fontSize: 12
|
||||
// }
|
||||
// }
|
||||
// ]
|
||||
// }
|
||||
// }
|
||||
})
|
||||
}
|
||||
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: any = {
|
||||
tooltip: {
|
||||
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: row.map((item: any) => item.time),
|
||||
type: 'scroll',
|
||||
orient: 'vertical',
|
||||
icon: 'roundRect',
|
||||
right: '20',
|
||||
|
||||
itemGap: 10,
|
||||
itemWidth: 16,
|
||||
itemHeight: 16,
|
||||
textStyle: {
|
||||
fontSize: '15',
|
||||
color: '#656565'
|
||||
}
|
||||
},
|
||||
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: indicator
|
||||
},
|
||||
|
||||
series: []
|
||||
}
|
||||
|
||||
row.forEach((item: any, i: any) => {
|
||||
option.series.push({
|
||||
name: item.time,
|
||||
type: 'radar',
|
||||
symbol: 'none',
|
||||
areaStyle: {
|
||||
normal: {
|
||||
color: '#2a9fe069'
|
||||
}
|
||||
},
|
||||
itemStyle: {
|
||||
color: '#2a9fe0'
|
||||
},
|
||||
data: [item.ratioList]
|
||||
})
|
||||
})
|
||||
|
||||
chart.setOption(option)
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
// open('4c87b7dff2281254fc55c25a4da31506')
|
||||
})
|
||||
defineExpose({ open })
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.lineInfo {
|
||||
padding: 0 10px 10px 10px;
|
||||
}
|
||||
:deep(.el-page-header__header) {
|
||||
height: 45px;
|
||||
border-bottom: 1px solid #f1eded;
|
||||
}
|
||||
:deep(.el-descriptions__header) {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.evaluationData {
|
||||
display: grid;
|
||||
grid-template-rows: repeat(5, auto);
|
||||
.row {
|
||||
margin: 5px 2%;
|
||||
width: 100%;
|
||||
box-shadow: 1px 1px 1px 1px #e8e3e3;
|
||||
}
|
||||
img {
|
||||
width: 7%;
|
||||
margin: 0px 15px;
|
||||
}
|
||||
}
|
||||
.iconBox {
|
||||
display: flex;
|
||||
span {
|
||||
display: inline-block;
|
||||
width: 3px;
|
||||
height: 18px;
|
||||
background: var(--el-color-primary);
|
||||
margin-right: 5px;
|
||||
margin-left: 3px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
717
src/views/pqs/qualityInspeection/panorama/components/map1.vue
Normal file
717
src/views/pqs/qualityInspeection/panorama/components/map1.vue
Normal file
@@ -0,0 +1,717 @@
|
||||
<template>
|
||||
<DatePicker ref="datePickerRef" style="display: none" />
|
||||
<div id="map" style="width: 100%; height: 100%" v-show="prop.lineInfo"></div>
|
||||
<div id="nrDeviceCard"></div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { onMounted, reactive, ref, nextTick } from 'vue'
|
||||
import { mainHeight } from '@/utils/layout'
|
||||
import { useDictData } from '@/stores/dictData'
|
||||
// import { devicesDemo } from '@/assets/panorama/devicesDemo.js'
|
||||
import { getAreaLineInfo } from '@/api/event-boot/areaInfo'
|
||||
import DatePicker from '@/components/form/datePicker/index.vue'
|
||||
import '@/assets/panorama/narimap.css'
|
||||
import '@/assets/panorama/nrgisCommon.css'
|
||||
const emit = defineEmits(['changeValue', 'drop', 'show'])
|
||||
const prop = defineProps({
|
||||
lineInfo: {
|
||||
type: Boolean
|
||||
}
|
||||
})
|
||||
const narimap = window?.narimap
|
||||
const dictData = useDictData()
|
||||
const datePickerRef = ref()
|
||||
const map: any = ref(null)
|
||||
const deviceCard: any = ref(null)
|
||||
const popup: any = ref(null)
|
||||
const markerGroup: any = ref(null)
|
||||
const orgId = ref(dictData.state.area[0].code)
|
||||
narimap.Require(
|
||||
['PSRMap', 'Thematic', 'Components.Query', 'Components.RegionSelector', 'Components.DeviceTreeGW'],
|
||||
() => {
|
||||
if (narimap.Config.examples.notlogin) {
|
||||
initMap(narimap.Config.styles.sjDark)
|
||||
} else {
|
||||
//电网GIS地图服务登录
|
||||
narimap.SGAuth.login()
|
||||
.then((result: any) => {
|
||||
if (result.success) {
|
||||
console.log('登录成功')
|
||||
} else {
|
||||
console.log('登录失败', result)
|
||||
}
|
||||
//默认打开电网GIS影像图
|
||||
initMap(narimap.Config.styles.sjDark)
|
||||
})
|
||||
.catch((err: any) => {
|
||||
console.log('错误', err)
|
||||
})
|
||||
}
|
||||
}
|
||||
)
|
||||
function initMap(styleurl: any) {
|
||||
map.value = new narimap.Map({
|
||||
container: 'map',
|
||||
style: styleurl,
|
||||
zoom: 6,
|
||||
center: [116.478935, 39.997761],
|
||||
controls: false,
|
||||
country: true,
|
||||
// 地图默认字体
|
||||
localIdeographFontFamily: 'Microsoft YoHei'
|
||||
})
|
||||
map.value.on('load', () => {
|
||||
nextTick(() => {
|
||||
// 加载点
|
||||
addMarkers()
|
||||
// 查询组件
|
||||
|
||||
Query()
|
||||
})
|
||||
})
|
||||
}
|
||||
const Query = () => {
|
||||
// 添加行政区划
|
||||
let powerManageGridMap = new narimap.ManageGrid.PowerManageGridMap(map.value)
|
||||
powerManageGridMap.init(
|
||||
{
|
||||
base: {
|
||||
outline: {
|
||||
paint: {
|
||||
'line-color': '#0D867F',
|
||||
'line-width': 1,
|
||||
'line-opacity': 1
|
||||
}
|
||||
},
|
||||
fill: {
|
||||
paint: {
|
||||
'fill-color': '#0D867F',
|
||||
'fill-opacity': 0
|
||||
}
|
||||
},
|
||||
label: {
|
||||
paint: {
|
||||
'text-color': '#063094',
|
||||
'text-halo-color': '#ffffff',
|
||||
'text-halo-width': 1
|
||||
}
|
||||
},
|
||||
hover: {
|
||||
enable: !0,
|
||||
type: 'all',
|
||||
fill: {
|
||||
enable: !0,
|
||||
paint: {
|
||||
'fill-color': 'rgba(1,1,1,0)',
|
||||
'fill-opacity': 0
|
||||
}
|
||||
},
|
||||
outline: {
|
||||
enable: !0,
|
||||
paint: {
|
||||
'line-color': '#0D867F',
|
||||
'line-width': 4,
|
||||
'line-opacity': 1
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
initOrgIds: [orgId.value],
|
||||
//是否联级，包含下属全部子部门，即同样显示编码对应的所属下级
|
||||
cascade: true
|
||||
}
|
||||
)
|
||||
// 添加区域选择
|
||||
let component = new narimap.Components.RegionSelector(map.value, {
|
||||
isIntegratedGridmap: true,
|
||||
//是否联级，包含下属全部子部门，即同样显示编码对应的所属下级
|
||||
cascade: true,
|
||||
orgId: orgId.value
|
||||
})
|
||||
component.on('regionSelect', (e: any) => {
|
||||
emit('changeValue', e)
|
||||
})
|
||||
setTimeout(() => {
|
||||
addLine()
|
||||
const query = new narimap.Components.Query(map.value)
|
||||
query.init(map.value.getContainer())
|
||||
query.setQueryOrgId(orgId.value)
|
||||
}, 500)
|
||||
}
|
||||
// 添加变电站线路
|
||||
const addLine = () => {
|
||||
//添加电网图层
|
||||
let psrmap = new narimap.PSRMap(map.value, {
|
||||
orgId: orgId.value == '1100F3DE20806FADE050007F01006CBE' ? '' : orgId.value
|
||||
})
|
||||
psrmap.addPSR()
|
||||
initDeviceCard()
|
||||
const devTree = new narimap.Components.DeviceTreeGW(map.value)
|
||||
|
||||
devTree.init({ orgId: orgId.value })
|
||||
|
||||
//添加电网要素点击事件
|
||||
// device-tree-gw__button
|
||||
document.querySelectorAll('.device-tree-gw__button')[0].onclick = function (v: any) {
|
||||
emit('show', true)
|
||||
}
|
||||
//添加电网要素点击事件
|
||||
psrmap.on('click', (features: any) => {
|
||||
console.log(features)
|
||||
})
|
||||
}
|
||||
// 添加变电站弹框
|
||||
const initDeviceCard = () => {
|
||||
deviceCard.value && deviceCard.value.close()
|
||||
|
||||
let options = {
|
||||
map: map.value, // map实例
|
||||
container: 'nrDeviceCard', // details容器id，为用户自定义的容器名
|
||||
narimap: narimap, //nariMap实例
|
||||
//用户自定义功能
|
||||
customButtons: {
|
||||
popupButtons: {
|
||||
buttons: []
|
||||
},
|
||||
detailsButtons: {
|
||||
buttons: []
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
deviceCard.value = new nrgisCommon.EquipmentAccount.DeviceCard(options)
|
||||
deviceCard.value.on('click', (res: any) => {
|
||||
if (res.button.id == 'nariPopupViewDetail') {
|
||||
emit('show', true)
|
||||
}
|
||||
setTimeout(() => {
|
||||
document.querySelectorAll('.nari-tabs__close')[0].onclick = function (v: any) {
|
||||
emit('show', false)
|
||||
}
|
||||
}, 10)
|
||||
})
|
||||
//
|
||||
}
|
||||
|
||||
//添加多个监测点
|
||||
const addMarkers = async () => {
|
||||
let params = {
|
||||
deptIndex: dictData.state.area[0].id,
|
||||
monitorFlag: 2,
|
||||
powerFlag: 2,
|
||||
searchBeginTime: datePickerRef.value.timeValue[0],
|
||||
searchEndTime: datePickerRef.value.timeValue[1],
|
||||
serverName: 'event-boot',
|
||||
statisticalType: {}
|
||||
}
|
||||
let { data } = await getAreaLineInfo(params)
|
||||
let r = 0.0035
|
||||
let tempFeatureZ: any = []
|
||||
let tempFeatureT: any = []
|
||||
data.forEach((item: any) => {
|
||||
if (item.children.length > 10 && item.children.length < 100) {
|
||||
r = 0.0055
|
||||
} else if (item.children.length >= 100) {
|
||||
r = 0.01055
|
||||
}
|
||||
|
||||
item.children.forEach((val: any, i: number) => {
|
||||
val.lng = item.lng + r * Math.cos((2 * Math.PI * i) / item.children.length)
|
||||
val.lat = item.lat + r * Math.sin((2 * Math.PI * i) / item.children.length)
|
||||
val.imageUrl =
|
||||
val.comFlag == 0
|
||||
? new URL('@/assets/txzdwzj.png', import.meta.url).href
|
||||
: new URL('@/assets/txzcwzj.png', import.meta.url).href
|
||||
// // 监测点图标
|
||||
|
||||
let tempFeature = {
|
||||
type: 'Feature',
|
||||
|
||||
geometry: {
|
||||
type: 'Point',
|
||||
coordinates: [val.lng, val.lat]
|
||||
},
|
||||
properties: {
|
||||
name: val.lineName,
|
||||
list: val
|
||||
}
|
||||
}
|
||||
|
||||
switch (val.comFlag) {
|
||||
case 0:
|
||||
tempFeatureT.push(tempFeature)
|
||||
break
|
||||
case 1:
|
||||
tempFeatureZ.push(tempFeature)
|
||||
break
|
||||
}
|
||||
})
|
||||
})
|
||||
|
||||
map.value.loadImage(
|
||||
new URL('@/assets/txzcwzj.png', import.meta.url).href, // 图片地址
|
||||
(error: any, image: any) => {
|
||||
if (error) throw error
|
||||
|
||||
//添加图片到map，第一个参数为图片设置id
|
||||
map.value.addImage('poi1', image)
|
||||
map.value.addLayer({
|
||||
id: 'spotImg-ZY',
|
||||
type: 'symbol',
|
||||
minzoom: 8,
|
||||
source: {
|
||||
type: 'geojson',
|
||||
data: {
|
||||
type: 'FeatureCollection',
|
||||
features: tempFeatureZ
|
||||
}
|
||||
},
|
||||
layout: {
|
||||
// 为图层设置引用的图片ID
|
||||
'icon-image': 'poi1',
|
||||
'icon-size': 0.7,
|
||||
'icon-ignore-placement': true,
|
||||
'icon-allow-overlap': true
|
||||
}
|
||||
})
|
||||
map.value.addLayer({
|
||||
id: 'spotName-ZY',
|
||||
type: 'symbol',
|
||||
minzoom: 10,
|
||||
source: {
|
||||
type: 'geojson',
|
||||
data: {
|
||||
type: 'FeatureCollection',
|
||||
features: tempFeatureZ
|
||||
}
|
||||
},
|
||||
layout: {
|
||||
// 为图层设置引用的图片ID
|
||||
|
||||
'text-field': '{name}',
|
||||
'icon-ignore-placement': true,
|
||||
'text-ignore-placement': false,
|
||||
'text-size': 12,
|
||||
'text-max-width': 8,
|
||||
'text-offset': [0, 2],
|
||||
'text-font': ['Microsoft YaHei Regular']
|
||||
},
|
||||
paint: {
|
||||
'text-color': '#ccc',
|
||||
|
||||
'text-halo-width': 1.33333
|
||||
}
|
||||
})
|
||||
}
|
||||
)
|
||||
map.value.loadImage(
|
||||
new URL('@/assets/txzdwzj.png', import.meta.url).href, // 图片地址
|
||||
(error: any, image: any) => {
|
||||
if (error) throw error
|
||||
|
||||
//添加图片到map，第一个参数为图片设置id
|
||||
map.value.addImage('poi2', image)
|
||||
map.value.addLayer({
|
||||
id: 'spotImg-TY',
|
||||
type: 'symbol',
|
||||
minzoom: 8,
|
||||
source: {
|
||||
type: 'geojson',
|
||||
|
||||
data: {
|
||||
type: 'FeatureCollection',
|
||||
features: tempFeatureT
|
||||
}
|
||||
},
|
||||
layout: {
|
||||
// 为图层设置引用的图片ID
|
||||
'icon-image': 'poi2',
|
||||
'icon-size': 0.7,
|
||||
// 'text-field': '{name}',
|
||||
'icon-ignore-placement': true,
|
||||
'icon-allow-overlap': true
|
||||
// 'text-ignore-placement': false,
|
||||
// 'text-size': 12,
|
||||
// 'text-max-width': 8,
|
||||
// 'text-offset': [0, 2],
|
||||
// 'text-font': ['Microsoft YaHei Regular']
|
||||
}
|
||||
// paint: {
|
||||
// 'text-color': '#ccc',
|
||||
// // 'text-halo-color': '#FFFFFF',
|
||||
// 'text-halo-width': 1.33333
|
||||
// }
|
||||
})
|
||||
map.value.addLayer({
|
||||
id: 'spotName-TyY',
|
||||
type: 'symbol',
|
||||
minzoom: 8,
|
||||
source: {
|
||||
type: 'geojson',
|
||||
|
||||
data: {
|
||||
type: 'FeatureCollection',
|
||||
features: tempFeatureT
|
||||
}
|
||||
},
|
||||
layout: {
|
||||
// 为图层设置引用的图片ID
|
||||
// 'icon-image': 'poi2',
|
||||
// 'icon-size': 0.7,
|
||||
'text-field': '{name}',
|
||||
'icon-ignore-placement': true,
|
||||
'text-ignore-placement': false,
|
||||
'text-size': 12,
|
||||
'text-max-width': 8,
|
||||
'text-offset': [0, 2],
|
||||
'text-font': ['Microsoft YaHei Regular']
|
||||
},
|
||||
paint: {
|
||||
'text-color': '#ccc',
|
||||
// 'text-halo-color': '#FFFFFF',
|
||||
'text-halo-width': 1.33333
|
||||
}
|
||||
})
|
||||
}
|
||||
)
|
||||
map.value.on('click', (e: any) => {
|
||||
const features = map.value.queryRenderedFeatures(e.point, {
|
||||
layers: ['spotImg-ZY', 'spotImg-TY']
|
||||
})
|
||||
|
||||
if (features.length > 0) {
|
||||
popup.value && popup.value.remove()
|
||||
setTimeout(() => {
|
||||
deviceCard.value.popup && deviceCard.value.popup.remove()
|
||||
}, 10)
|
||||
let data = JSON.parse(features[0].properties.list)
|
||||
let markerHeight = 20
|
||||
let markerRadius = 10
|
||||
let linearOffset = 25
|
||||
let popupOffsets = {
|
||||
top: [0, 0],
|
||||
'top-left': [0, 0],
|
||||
'top-right': [0, 0],
|
||||
bottom: [0, -markerHeight + 10],
|
||||
'bottom-left': [linearOffset, (markerHeight - markerRadius + linearOffset) * -1],
|
||||
'bottom-right': [-linearOffset, (markerHeight - markerRadius + linearOffset) * -1],
|
||||
left: [markerRadius, (markerHeight - markerRadius) * -1],
|
||||
right: [-markerRadius, (markerHeight - markerRadius) * -1]
|
||||
}
|
||||
|
||||
popup.value = new narimap.Popup({ offset: popupOffsets, className: 'my-popup' })
|
||||
.setLngLat([data.lng, data.lat])
|
||||
.setHTML(
|
||||
`<div class="popup-box"><div class="popup_content">
|
||||
<img src="${data.imageUrl}"/>
|
||||
<div>
|
||||
<div style="display: flex">
|
||||
<span class="title">${data.lineName}</span>
|
||||
<span class="state" style="background-color: ${data.comFlag == 0 ? '#ff0000' : '#3ab34a'};">${
|
||||
data.comFlag == 0 ? '停运' : '在运'
|
||||
}</span>
|
||||
</div>
|
||||
<div class="info">
|
||||
<span>监测点</span>
|
||||
<span>${data.voltageScale}</span>
|
||||
<span>${data.gdName} </span>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="popup_footer">
|
||||
<span id="ids" data-sid="${data.lineId}">查看详情</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
`
|
||||
)
|
||||
.addTo(map.value)
|
||||
document.getElementById('ids').onclick = function (v: any) {
|
||||
// console.log(e.target.dataset.sid)
|
||||
emit('drop', v.target.dataset.sid)
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
//添加多个监测点
|
||||
// const addMarkers = async () => {
|
||||
// let params = {
|
||||
// deptIndex: dictData.state.area[0].id,
|
||||
// monitorFlag: 2,
|
||||
// powerFlag: 2,
|
||||
// searchBeginTime: datePickerRef.value.timeValue[0],
|
||||
// searchEndTime: datePickerRef.value.timeValue[1],
|
||||
// serverName: 'event-boot',
|
||||
// statisticalType: {}
|
||||
// }
|
||||
// let markerGroup = new narimap.MarkerGroup(map.value)
|
||||
// let { data } = await getAreaLineInfo(params)
|
||||
// let r = 0.0035
|
||||
|
||||
// data.forEach((item: any) => {
|
||||
// if (item.children.length > 10 && item.children.length < 100) {
|
||||
// r = 0.0055
|
||||
// } else if (item.children.length >= 100) {
|
||||
// r = 0.01055
|
||||
// }
|
||||
// item.children.forEach((val: any, i: number) => {
|
||||
// val.lng = item.lng + r * Math.cos((2 * Math.PI * i) / item.children.length)
|
||||
// val.lat = item.lat + r * Math.sin((2 * Math.PI * i) / item.children.length)
|
||||
// // // 监测点图标
|
||||
// val.icon = {
|
||||
// imageUrl: '',
|
||||
// iconSize: [24, 24] // 设置图标大小
|
||||
// }
|
||||
// switch (val.comFlag) {
|
||||
// case 0:
|
||||
// val.icon.imageUrl = new URL('@/assets/txzdwzj.png', import.meta.url).href
|
||||
// break
|
||||
// case 1:
|
||||
// val.icon.imageUrl = new URL('@/assets/txzcwzj.png', import.meta.url).href
|
||||
// break
|
||||
// }
|
||||
|
||||
// let marker = new narimap.Marker().setLngLat([val.lng, val.lat]).setImage(val.icon)
|
||||
// marker.data = val
|
||||
// markerGroup.addMarker(val.lineId, marker)
|
||||
// markerGroup.hide()
|
||||
// })
|
||||
// })
|
||||
// setTimeout(() => {
|
||||
// markerGroup.on('click', (e: any) => {
|
||||
// popup.value && popup.value.close()
|
||||
// deviceCard.value.popup && deviceCard.value.popup.remove()
|
||||
|
||||
// let data = e.marker.data
|
||||
// let markerHeight = 20
|
||||
// let markerRadius = 10
|
||||
// let linearOffset = 25
|
||||
// let popupOffsets = {
|
||||
// top: [0, 0],
|
||||
// 'top-left': [0, 0],
|
||||
// 'top-right': [0, 0],
|
||||
// bottom: [0, -markerHeight],
|
||||
// 'bottom-left': [linearOffset, (markerHeight - markerRadius + linearOffset) * -1],
|
||||
// 'bottom-right': [-linearOffset, (markerHeight - markerRadius + linearOffset) * -1],
|
||||
// left: [markerRadius, (markerHeight - markerRadius) * -1],
|
||||
// right: [-markerRadius, (markerHeight - markerRadius) * -1]
|
||||
// }
|
||||
|
||||
// popup.value = new narimap.Popup({ offset: popupOffsets, className: 'my-popup' })
|
||||
// .setLngLat([data.lng, data.lat])
|
||||
// .setHTML(
|
||||
// `<div class="popup-box"><div class="popup_content">
|
||||
// <img src="${data.icon.imageUrl}"/>
|
||||
// <div>
|
||||
// <div style="display: flex">
|
||||
// <span class="title">${data.lineName}</span>
|
||||
// <span class="state" style="background-color: ${data.comFlag == 0 ? '#ff0000' : '#3ab34a'};">${
|
||||
// data.comFlag == 0 ? '停运' : '在运'
|
||||
// }</span>
|
||||
// </div>
|
||||
// <div class="info">
|
||||
// <span>监测点</span>
|
||||
// <span>${data.voltageScale}</span>
|
||||
// <span>${data.gdName} </span>
|
||||
// </div>
|
||||
|
||||
// </div>
|
||||
// </div>
|
||||
// <div class="popup_footer">
|
||||
// <span id="ids" data-sid="${data.lineId}">查看详情</span>
|
||||
// </div>
|
||||
// </div>
|
||||
|
||||
// `
|
||||
// )
|
||||
// .addTo(map.value)
|
||||
// document.getElementById('ids').onclick = function (v: any) {
|
||||
// // console.log(e.target.dataset.sid)
|
||||
// emit('drop', v.target.dataset.sid)
|
||||
// }
|
||||
// })
|
||||
// }, 0)
|
||||
// map.value.on('zoom', (e: any) => {
|
||||
// // map.value.getZoom()
|
||||
// if (map.value.getZoom() > 7) {
|
||||
// markerGroup.show()
|
||||
// } else {
|
||||
// markerGroup.hide()
|
||||
// }
|
||||
// })
|
||||
// }
|
||||
|
||||
onMounted(() => {
|
||||
// 监听地图初始化完成事件
|
||||
})
|
||||
|
||||
// const locatePositions = (e: any) => {
|
||||
// let mapList = [
|
||||
// {
|
||||
// code: '1100F3DE20806FADE050007F01006CBE', //冀北
|
||||
// centralCoordinate: [116.13740482, 39.5478448705],
|
||||
// zoom: 6
|
||||
// },
|
||||
// {
|
||||
// code: '1100F3DE22316FADE050007F01006CBE', //"唐山"
|
||||
// centralCoordinate: [118.335849137, 39.7213593355],
|
||||
// zoom: 7
|
||||
// },
|
||||
// {
|
||||
// code: '1100F3DE20816FADE050007F01006CBE', //张家口
|
||||
// centralCoordinate: [115.032504679, 40.8651549951],
|
||||
// zoom: 7
|
||||
// },
|
||||
// {
|
||||
// code: '1100F3DE23F96FADE050007F01006CBE', //秦皇岛
|
||||
// centralCoordinate: [119.185113833, 40.0879119754],
|
||||
// zoom: 7
|
||||
// },
|
||||
// {
|
||||
// code: '1100F3DE23466FADE050007F01006CBE', //承德
|
||||
// centralCoordinate: [117.548498365, 41.3475890632],
|
||||
// zoom: 7
|
||||
// },
|
||||
// {
|
||||
// code: '1100F3DE218D6FADE050007F01006CBE', //廊坊
|
||||
// centralCoordinate: [116.628004129, 39.2589378611],
|
||||
// zoom: 7
|
||||
// }
|
||||
// ]
|
||||
// let data: any = []
|
||||
// data = mapList.filter(item => item.code == e.data.code) || []
|
||||
|
||||
// if (data.length > 0) {
|
||||
// // orgId.value = e.data.code
|
||||
// // addCity()
|
||||
|
||||
// console.log('🚀 ~ locatePositions ~ data[0].zoom:', data[0].zoom)
|
||||
// map.value.locatePositions(data[0].centralCoordinate, {
|
||||
// zoom: data[0].zoom
|
||||
// })
|
||||
// }
|
||||
// }
|
||||
// defineExpose({ locatePositions })
|
||||
const height = mainHeight(20)
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
:deep(.query-box-wrap) {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
left: calc(50% - 385px);
|
||||
.query-box {
|
||||
border-radius: 8px 0 0 8px;
|
||||
}
|
||||
}
|
||||
:deep(.device-tree-gw__button) {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
border-radius: 0 8px 8px 0;
|
||||
left: calc(50% - 55px);
|
||||
z-index: 0 !important;
|
||||
}
|
||||
|
||||
:deep(.province-selector) {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
left: 50%;
|
||||
.distribution__body {
|
||||
height: auto;
|
||||
}
|
||||
.province-selector__options {
|
||||
height: auto;
|
||||
}
|
||||
.province-op {
|
||||
width: 48%;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
.province-selector__button {
|
||||
width: 100px;
|
||||
padding: 4px 12px;
|
||||
span {
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
.province-selector__options {
|
||||
z-index: 1;
|
||||
}
|
||||
}
|
||||
:deep(.sgmap-canvas) {
|
||||
width: 100% !important;
|
||||
}
|
||||
:deep(.my-popup) {
|
||||
max-width: 400px !important;
|
||||
.popup-box {
|
||||
width: 260px;
|
||||
height: 70px;
|
||||
.popup_content {
|
||||
display: grid;
|
||||
grid-template-columns: 50px 1fr;
|
||||
img {
|
||||
width: 42px;
|
||||
height: 42px;
|
||||
}
|
||||
.title {
|
||||
font-weight: 550;
|
||||
}
|
||||
.state {
|
||||
width: 45px;
|
||||
margin-left: 5px;
|
||||
text-align: center;
|
||||
border-radius: 3px;
|
||||
color: #fff;
|
||||
}
|
||||
.info {
|
||||
color: #18181b99;
|
||||
margin: 5px 0;
|
||||
span {
|
||||
&::after {
|
||||
display: inline-block;
|
||||
margin: 0 5px;
|
||||
content: ' ';
|
||||
width: 2px;
|
||||
height: 11px;
|
||||
background: #e5e6eb73;
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.popup_footer {
|
||||
padding: 5px 5px;
|
||||
border-top: 1px solid #e5e6eb;
|
||||
color: var(--el-color-primary);
|
||||
span {
|
||||
margin-right: 8px;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
.sgmap-popup-content {
|
||||
padding: 15px 10px 10px !important;
|
||||
}
|
||||
.sgmap-popup-close-button {
|
||||
position: absolute;
|
||||
right: 5px;
|
||||
top: 5px;
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
#nrDeviceCard {
|
||||
position: absolute;
|
||||
top: 11px;
|
||||
right: 70px;
|
||||
width: 450px;
|
||||
z-index: 0;
|
||||
}
|
||||
</style>
|
||||
@@ -9,235 +9,94 @@
|
||||
<ArrowRight style="width: 12px" />
|
||||
</span>
|
||||
</div>
|
||||
<!-- <div style="border: 1px solid #ccc; margin-top: 10px">
|
||||
<div class="infoTop">
|
||||
<div class="infoL">
|
||||
<img :src="item.img" />
|
||||
|
||||
<div style="display: flex" class="mt2">
|
||||
<img src="@/assets/img/FGX.png" />
|
||||
</div>
|
||||
|
||||
<div class="cardBox">
|
||||
<div class="card" style="width: 98%">
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="12" class="cor">
|
||||
<img :src="item.img[0]" />
|
||||
{{ item.titleT[0] }}：
|
||||
<span :style="`color: ${item.color[0]}`">{{ item.list[4].numOne }}</span>
|
||||
</el-col>
|
||||
<el-col :span="12" class="cor">
|
||||
<img :src="item.img[1]" />
|
||||
{{ item.titleT[1] }}：
|
||||
<span :style="`color: ${item.color[1]}`">{{ item.list[4].numTwo }}</span>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
<div :style="`height:calc(${boxHeight.height} - 90px);width: 100%;overflow-y: auto;`" class="BoxA">
|
||||
<div class="card-Box">
|
||||
<div>
|
||||
<span class="line"></span>
|
||||
<span class="vol">500kV</span>
|
||||
</div>
|
||||
<div class="num">
|
||||
<div>
|
||||
{{ item.titleT[0] }}:
|
||||
<span :style="`color: ${item.color[0]}`">{{ item.list[0].numOne }}</span>
|
||||
</div>
|
||||
<div>
|
||||
{{ item.titleT[1] }}:
|
||||
<span :style="`color: ${item.color[1]}`">{{ item.list[0].numTwo }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="infoR">
|
||||
<div class="top">{{ item.infoT }}</div>
|
||||
<div class="bottom">
|
||||
<div v-for="(num, k) in item.num">
|
||||
<span :style="{ color: item.color[k] }">{{ num.a }}</span>
|
||||
/
|
||||
<span :style="{ color: item.color[4] }">{{ num.b }}</span>
|
||||
<div class="card-Box">
|
||||
<div>
|
||||
<span class="line"></span>
|
||||
<span class="vol">220kV</span>
|
||||
</div>
|
||||
<div class="num">
|
||||
<div>
|
||||
{{ item.titleT[0] }}:
|
||||
<span :style="`color: ${item.color[0]}`">{{ item.list[1].numOne }}</span>
|
||||
</div>
|
||||
<div>
|
||||
{{ item.titleT[1] }}:
|
||||
<span :style="`color: ${item.color[1]}`">{{ item.list[1].numTwo }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-Box">
|
||||
<div>
|
||||
<span class="line"></span>
|
||||
<span class="vol">110kV</span>
|
||||
</div>
|
||||
<div class="num">
|
||||
<div>
|
||||
{{ item.titleT[0] }}:
|
||||
<span :style="`color: ${item.color[0]}`">{{ item.list[2].numOne }}</span>
|
||||
</div>
|
||||
<div>
|
||||
{{ item.titleT[1] }}:
|
||||
<span :style="`color: ${item.color[1]}`">{{ item.list[2].numTwo }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-Box">
|
||||
<div>
|
||||
<span class="line"></span>
|
||||
<span class="vol">350kV</span>
|
||||
</div>
|
||||
<div class="num">
|
||||
<div>
|
||||
{{ item.titleT[0] }}:
|
||||
<span :style="`color: ${item.color[0]}`">{{ item.list[3].numOne }}</span>
|
||||
</div>
|
||||
<div>
|
||||
{{ item.titleT[1] }}:
|
||||
<span :style="`color: ${item.color[1]}`">{{ item.list[3].numTwo }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<el-table size="small" :height="tabHeight" :data="item.list">
|
||||
<el-table-column prop="name" width="60px" label=""></el-table-column>
|
||||
<el-table-column prop="a" label="500kV" width="63px" align="center"></el-table-column>
|
||||
<el-table-column prop="b" label="220kV" width="63px" align="center"></el-table-column>
|
||||
<el-table-column prop="d" label="110KV" width="63px" align="center"></el-table-column>
|
||||
<el-table-column prop="d" label="35KV" width="63px" align="center"></el-table-column>
|
||||
<el-table-column prop="d" label="总数" width="63px" align="center"></el-table-column>
|
||||
</el-table>
|
||||
</div> -->
|
||||
<div class="cardBox">
|
||||
<el-card class="card" style="width: 98%">
|
||||
<div style="display: flex">
|
||||
<img :src="item.img" />
|
||||
<div class="row">
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="12">{{ item.titleT[0] }}</el-col>
|
||||
<el-col :span="12">{{ item.titleT[1] }}</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="20" class="mt4">
|
||||
<el-col :span="12" style="color: #2dcd28">{{ item.list[4].numOne }}</el-col>
|
||||
<el-col :span="12" style="color: #bd3124">{{ item.list[4].numTwo }}</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
<el-card class="card">
|
||||
<div style="display: flex; align-items: center">
|
||||
<img src="@/assets/img/500kv.png" alt="" />
|
||||
<div class="row">
|
||||
<el-row>
|
||||
<el-col :span="12" style="color: #2dcd28">{{ item.list[0].numOne }}</el-col>
|
||||
<el-col :span="12" style="color: #bd3124">{{ item.list[0].numTwo }}</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
<el-card class="card">
|
||||
<div style="display: flex; align-items: center">
|
||||
<img src="@/assets/img/220kv.png" />
|
||||
<div class="row">
|
||||
<el-row>
|
||||
<el-col :span="12" style="color: #2dcd28">{{ item.list[1].numOne }}</el-col>
|
||||
<el-col :span="12" style="color: #bd3124">{{ item.list[1].numTwo }}</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
<el-card class="card">
|
||||
<div style="display: flex; align-items: center">
|
||||
<img src="@/assets/img/110kv.png" />
|
||||
<div class="row">
|
||||
<el-row>
|
||||
<el-col :span="12" style="color: #2dcd28">{{ item.list[2].numOne }}</el-col>
|
||||
<el-col :span="12" style="color: #bd3124">{{ item.list[2].numTwo }}</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
<el-card class="card">
|
||||
<div style="display: flex; align-items: center">
|
||||
<img src="@/assets/img/35kv.png" />
|
||||
<div class="row">
|
||||
<el-row>
|
||||
<el-col :span="12" style="color: #2dcd28">{{ item.list[3].numOne }}</el-col>
|
||||
<el-col :span="12" style="color: #bd3124">{{ item.list[3].numTwo }}</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
</div>
|
||||
</div>
|
||||
<!-- <div :style="boxHeight">
|
||||
<div class="title">
|
||||
<span>终端统计</span>
|
||||
<span class="info" @click="open(1)">
|
||||
详情
|
||||
<ArrowRight style="width: 12px" />
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="cardBox">
|
||||
<el-card class="card" style="width: 98%">
|
||||
<div style="display: flex">
|
||||
<img src="@/assets/img/ZD.png" />
|
||||
<div class="row">
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="12">终端个数</el-col>
|
||||
<el-col :span="12">终端在线率</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="20" class="mt4">
|
||||
<el-col :span="12" style="color: #2dcd28">480</el-col>
|
||||
<el-col :span="12" style="color: #bd3124">120</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
<el-card class="card">
|
||||
<div style="display: flex; align-items: center">
|
||||
<img src="@/assets/img/500kv.png" alt="" />
|
||||
<div class="row">
|
||||
<el-row>
|
||||
<el-col :span="12" style="color: #2dcd28">120</el-col>
|
||||
<el-col :span="12" style="color: #bd3124">30</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
<el-card class="card">
|
||||
<div style="display: flex; align-items: center">
|
||||
<img src="@/assets/img/220kv.png" />
|
||||
<div class="row">
|
||||
<el-row>
|
||||
<el-col :span="12" style="color: #2dcd28">120</el-col>
|
||||
<el-col :span="12" style="color: #bd3124">30</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
<el-card class="card">
|
||||
<div style="display: flex; align-items: center">
|
||||
<img src="@/assets/img/110kv.png" />
|
||||
<div class="row">
|
||||
<el-row>
|
||||
<el-col :span="12" style="color: #2dcd28">120</el-col>
|
||||
<el-col :span="12" style="color: #bd3124">30</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
<el-card class="card">
|
||||
<div style="display: flex; align-items: center">
|
||||
<img src="@/assets/img/35kv.png" />
|
||||
<div class="row">
|
||||
<el-row>
|
||||
<el-col :span="12" style="color: #2dcd28">120</el-col>
|
||||
<el-col :span="12" style="color: #bd3124">30</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
</div>
|
||||
</div>
|
||||
<div :style="boxHeight">
|
||||
<div class="title">
|
||||
<span>监测点统计</span>
|
||||
<span class="info" @click="open(2)">
|
||||
详情
|
||||
<ArrowRight style="width: 12px" />
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="cardBox">
|
||||
<el-card class="card" style="width: 98%">
|
||||
<div style="display: flex">
|
||||
<img src="@/assets/img/JCD.png" />
|
||||
<div class="row">
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="12">总数</el-col>
|
||||
<el-col :span="12">在线</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="20" class="mt4">
|
||||
<el-col :span="12" style="color: #2dcd28">480</el-col>
|
||||
<el-col :span="12" style="color: #bd3124">120</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
<el-card class="card">
|
||||
<div style="display: flex; align-items: center">
|
||||
<img src="@/assets/img/500kv.png" alt="" />
|
||||
<div class="row">
|
||||
<el-row>
|
||||
<el-col :span="12" style="color: #2dcd28">120</el-col>
|
||||
<el-col :span="12" style="color: #bd3124">30</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
<el-card class="card">
|
||||
<div style="display: flex; align-items: center">
|
||||
<img src="@/assets/img/220kv.png" />
|
||||
<div class="row">
|
||||
<el-row>
|
||||
<el-col :span="12" style="color: #2dcd28">120</el-col>
|
||||
<el-col :span="12" style="color: #bd3124">30</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
<el-card class="card">
|
||||
<div style="display: flex; align-items: center">
|
||||
<img src="@/assets/img/110kv.png" />
|
||||
<div class="row">
|
||||
<el-row>
|
||||
<el-col :span="12" style="color: #2dcd28">120</el-col>
|
||||
<el-col :span="12" style="color: #bd3124">30</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
<el-card class="card">
|
||||
<div style="display: flex; align-items: center">
|
||||
<img src="@/assets/img/35kv.png" />
|
||||
<div class="row">
|
||||
<el-row>
|
||||
<el-col :span="12" style="color: #2dcd28">120</el-col>
|
||||
<el-col :span="12" style="color: #bd3124">30</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
</div>
|
||||
</div> -->
|
||||
</div>
|
||||
<img
|
||||
class="imgL"
|
||||
@@ -273,7 +132,8 @@ const pointRef = ref()
|
||||
const list: any = ref([
|
||||
{
|
||||
title: '变电站',
|
||||
img: new URL(`@/assets/img/BDZ.png`, import.meta.url),
|
||||
img: [new URL(`@/assets/img/BDZ-ZS.png`, import.meta.url), new URL(`@/assets/img/BDZ-GJ.png`, import.meta.url)],
|
||||
color: ['#000', '#bd3124'],
|
||||
titleT: ['总数', '告警'],
|
||||
list: [
|
||||
{
|
||||
@@ -299,9 +159,10 @@ const list: any = ref([
|
||||
]
|
||||
},
|
||||
{
|
||||
title: '终端统计',
|
||||
img: new URL(`@/assets/img/ZD.png`, import.meta.url),
|
||||
titleT: ['终端个数', '终端在线率'],
|
||||
title: '终端',
|
||||
img: [new URL(`@/assets/img/ZD-ZS.png`, import.meta.url), new URL(`@/assets/img/ZD-ZX.png`, import.meta.url)],
|
||||
titleT: ['总数', '在线'],
|
||||
color: ['#000', '#2dcd28'],
|
||||
list: [
|
||||
{
|
||||
numOne: 0,
|
||||
@@ -326,9 +187,10 @@ const list: any = ref([
|
||||
]
|
||||
},
|
||||
{
|
||||
title: '监测点统计',
|
||||
img: new URL(`@/assets/img/JCD.png`, import.meta.url),
|
||||
title: '监测点',
|
||||
img: [new URL(`@/assets/img/JCD-ZS.png`, import.meta.url), new URL(`@/assets/img/JCD-ZX.png`, import.meta.url)],
|
||||
titleT: ['总数', '在线'],
|
||||
color: ['#000', '#2dcd28'],
|
||||
list: [
|
||||
{
|
||||
numOne: 0,
|
||||
@@ -356,7 +218,7 @@ const list: any = ref([
|
||||
const formRow: any = ref({})
|
||||
const height = mainHeight(30)
|
||||
const boxHeight = mainHeight(40, 3)
|
||||
const tabHeight: any = mainHeight(320, 3).height
|
||||
|
||||
// 详情
|
||||
const open = (e: any) => {
|
||||
if (e == 0) {
|
||||
@@ -376,7 +238,7 @@ const info = (row: any) => {
|
||||
ids: [],
|
||||
statisticalType: dictData.getBasicData('Statistical_Type', ['Report_Type'])[0],
|
||||
isUpToGrid: row.isUpToGrid,
|
||||
monitorFlag: row.isUpToGrid
|
||||
monitorFlag: row.isUpToGrid == 0 ? null : row.isUpToGrid
|
||||
}
|
||||
formRow.value = form
|
||||
// 变电站
|
||||
@@ -402,7 +264,7 @@ const info = (row: any) => {
|
||||
})
|
||||
}
|
||||
onMounted(() => {})
|
||||
defineExpose({ info })
|
||||
defineExpose({ info, show })
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@@ -410,6 +272,7 @@ defineExpose({ info })
|
||||
background-color: #fff;
|
||||
width: 100%;
|
||||
padding: 10px 10px 10px 10px;
|
||||
border-radius: 5px;
|
||||
font-size: 13px;
|
||||
overflow: hidden;
|
||||
}
|
||||
@@ -421,15 +284,57 @@ defineExpose({ info })
|
||||
margin-top: 10px;
|
||||
width: 48%;
|
||||
margin-right: 2%;
|
||||
|
||||
.cor {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 12px;
|
||||
color: #6d6d6d;
|
||||
span {
|
||||
font-size: 16px;
|
||||
font-weight: 550;
|
||||
}
|
||||
}
|
||||
img {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
margin: 0 5%;
|
||||
}
|
||||
.row {
|
||||
width: 80%;
|
||||
text-align: center;
|
||||
font-size: 16px;
|
||||
}
|
||||
.BoxA {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
grid-template-rows: 80px;
|
||||
.card-Box {
|
||||
display: grid;
|
||||
grid-template-rows: 1fr 1fr;
|
||||
|
||||
align-items: center;
|
||||
margin: 5px;
|
||||
padding: 10px;
|
||||
background-color: #edededc0;
|
||||
border-radius: 10px;
|
||||
max-height: 80px;
|
||||
.line {
|
||||
display: inline-block;
|
||||
width: 0.5rem;
|
||||
height: 0.5rem;
|
||||
border-radius: 0.25rem;
|
||||
background: var(--el-color-primary);
|
||||
margin-right: 5px;
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
.num {
|
||||
margin-left: 10px;
|
||||
display: grid;
|
||||
text-align: center;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
font-size: 12px;
|
||||
color: #6d6d6d;
|
||||
span {
|
||||
font-size: 14px;
|
||||
font-weight: 550;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -438,52 +343,27 @@ defineExpose({ info })
|
||||
// height: ;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
font-size: 16px;
|
||||
height: 22px;
|
||||
font-size: 15px;
|
||||
line-height: 23px;
|
||||
padding-left: 5px;
|
||||
width: 100%;
|
||||
background-image: linear-gradient(to right, #a4e5da, #fff);
|
||||
font-weight: 550;
|
||||
|
||||
.info {
|
||||
font-weight: normal;
|
||||
display: flex;
|
||||
font-size: 12px;
|
||||
cursor: pointer;
|
||||
color: #757575;
|
||||
}
|
||||
}
|
||||
.infoTop {
|
||||
display: flex;
|
||||
height: 50px;
|
||||
padding-right: 10px;
|
||||
.infoL {
|
||||
width: 60px;
|
||||
img {
|
||||
width: 40px;
|
||||
margin: 10px;
|
||||
}
|
||||
}
|
||||
.infoR {
|
||||
flex: 1;
|
||||
.top {
|
||||
// margin-top: 2px;
|
||||
height: 22px;
|
||||
border-bottom: 2px solid #93dee2;
|
||||
}
|
||||
.bottom {
|
||||
margin-top: 3px;
|
||||
display: flex;
|
||||
font-size: 12px;
|
||||
justify-content: space-around;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.imgL {
|
||||
position: absolute;
|
||||
padding: 10px;
|
||||
top: calc(50% - 80px);
|
||||
right: -23px;
|
||||
z-index: 1;
|
||||
|
||||
transform: rotate(180deg);
|
||||
height: 200px;
|
||||
cursor: pointer;
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
<div :class="show ? 'show' : 'noshow'">
|
||||
<div class="boxLeft" :style="height">
|
||||
<!-- 综合评估 -->
|
||||
<div>
|
||||
<div style="height: 110px">
|
||||
<div class="title">
|
||||
<span>综合评估</span>
|
||||
<span class="info" @click="open(0)">
|
||||
@@ -10,9 +10,35 @@
|
||||
<ArrowRight style="width: 12px" />
|
||||
</span>
|
||||
</div>
|
||||
<div style="display: flex" class="mt2">
|
||||
<img src="@/assets/img/FGX.png" />
|
||||
</div>
|
||||
<div class="mt10 TJTop">
|
||||
<img src="@/assets/img/TJ.png" />
|
||||
综合评估得分：
|
||||
<span :style="{
|
||||
color:
|
||||
assessList.score == 3.14159
|
||||
? ''
|
||||
:assessList.score > 4.5
|
||||
? '#339966'
|
||||
:assessList.score > 4
|
||||
? '#3399ff'
|
||||
:assessList.score > 3
|
||||
? '#ffcc33'
|
||||
:assessList.score > 2
|
||||
? '#ff9900'
|
||||
:assessList.score > 0
|
||||
? '#cc0000'
|
||||
: ''
|
||||
}">{{assessList.score}}</span>
|
||||
</div>
|
||||
<div class="evaluate">
|
||||
<div v-for="item in assessList" style="min-width: 50px">
|
||||
<div>{{ item.name }}</div>
|
||||
<div v-for="item in assessList.children" style="min-width: 50px">
|
||||
<div>
|
||||
<span class="line"></span>
|
||||
{{ item.name }}
|
||||
</div>
|
||||
<div
|
||||
style="margin-top: 5px"
|
||||
:style="{
|
||||
@@ -46,14 +72,19 @@
|
||||
<ArrowRight style="width: 12px" />
|
||||
</span>
|
||||
</div>
|
||||
<div style="display: flex" class="mt2">
|
||||
<img src="@/assets/img/FGX.png" />
|
||||
</div>
|
||||
<div :style="boxHeight" class="boxR">
|
||||
<div class="top">
|
||||
<span>
|
||||
<div class="TJTop">
|
||||
<img src="@/assets/img/TJ.png" />
|
||||
监测点越限占比:
|
||||
<span class="num">
|
||||
{{ harmonicLineRatio == 3.14159 ? '暂无数据' : harmonicLineRatio + '%' }}
|
||||
{{ harmonicLineRatio == 3.14159 ? '0' : harmonicLineRatio + '%' }}
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<el-select v-model="harmonicType" style="width: 120px" @change="harmonicChange" size="small">
|
||||
<el-option
|
||||
v-for="item in options"
|
||||
@@ -63,7 +94,13 @@
|
||||
/>
|
||||
</el-select>
|
||||
</div>
|
||||
<MyEChart :style="EchHeight" :options="harmonicCharts" />
|
||||
<!-- <MyEChart :style="EchHeight" :options="harmonicList" /> -->
|
||||
<div :style="EchHeight" class="harmonic mt5">
|
||||
<div class="progress" v-for="item in harmonicList">
|
||||
<span class="text">{{ item.deptName }}</span>
|
||||
<el-progress :percentage="item.ratio" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 暂态电能质量水平评估 -->
|
||||
@@ -75,37 +112,55 @@
|
||||
<ArrowRight style="width: 12px" />
|
||||
</span>
|
||||
</div>
|
||||
<div style="display: flex" class="mt2">
|
||||
<img src="@/assets/img/FGX.png" />
|
||||
</div>
|
||||
<div :style="boxHeight" class="boxR">
|
||||
<div class="top">
|
||||
<span>
|
||||
暂态事件严重度:
|
||||
<span class="num">{{ transientNum }}%</span>
|
||||
</span>
|
||||
<div class="TJTop">
|
||||
<img src="@/assets/img/TJ.png" />
|
||||
<span>
|
||||
暂态事件严重度：
|
||||
<span class="num">{{ transientNum }}%</span>
|
||||
</span>
|
||||
</div>
|
||||
<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" />
|
||||
<!-- <MyEChart :style="EchHeight" :options="WTList" /> -->
|
||||
<div :style="EchHeight" class="harmonic mt5">
|
||||
<div class="progress" v-for="item in WTList">
|
||||
<span class="text">{{ item.orgName }}</span>
|
||||
<el-progress :percentage="item.count" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 技术监督管理 -->
|
||||
<div>
|
||||
<div class="title">
|
||||
<span>技术监督管理(问题数)</span>
|
||||
<span>技术监督管理</span>
|
||||
<span class="info" @click="open(3)">
|
||||
详情
|
||||
<ArrowRight style="width: 12px" />
|
||||
</span>
|
||||
</div>
|
||||
<div :style="boxHeight" class="boxR">
|
||||
<div style="display: flex" class="mt2">
|
||||
<img src="@/assets/img/FGX.png" />
|
||||
</div>
|
||||
<div style="height: 150px" class="boxR">
|
||||
<div class="evaluate bottom">
|
||||
<div v-for="item in JDlist" style="width: 80px">
|
||||
<div>{{ item.name }}</div>
|
||||
<div style="margin-top: 5px">{{ item.value }}</div>
|
||||
<div style="margin-top: 5px; font-weight: 550">{{ item.value }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<el-row style="height: calc(100% - 62px)">
|
||||
<el-col :span="12" class="col" style="border-right: 1px solid #ccc">
|
||||
<el-row
|
||||
style="height: calc(100% - 45px); display: flex; justify-content: space-around"
|
||||
class="ml10 mr10 mt5"
|
||||
>
|
||||
<el-col :span="11" class="col pt10">
|
||||
<div>
|
||||
<span>异常问题总数：</span>
|
||||
<span style="color: #2dcd28">60个</span>
|
||||
@@ -119,7 +174,7 @@
|
||||
<span style="color: #338dff">60%</span>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="12" class="col">
|
||||
<el-col :span="11" class="col pt10" :offset="0.5">
|
||||
<div>
|
||||
<span>异常问题总数：</span>
|
||||
<span style="color: #2dcd28">60个</span>
|
||||
@@ -168,8 +223,8 @@ import { getAssessOverview, getEvaluationOverview, getEventLevelEvaluation } fro
|
||||
const dictData = useDictData()
|
||||
const show = ref(false)
|
||||
const height = mainHeight(30)
|
||||
const boxHeight: any = mainHeight(270, 3)
|
||||
const EchHeight: any = mainHeight(370, 3)
|
||||
const boxHeight: any = mainHeight(420, 2)
|
||||
const EchHeight: any = mainHeight(490, 2)
|
||||
const evaluateRef = ref()
|
||||
const steadyStateRef = ref()
|
||||
const formRow: any = ref({})
|
||||
@@ -214,6 +269,10 @@ const JDlist = ref([
|
||||
name: '技术监督计划',
|
||||
value: 5
|
||||
},
|
||||
{
|
||||
name: '在线监测',
|
||||
value: 5
|
||||
},
|
||||
{
|
||||
name: '用户投诉',
|
||||
value: 5
|
||||
@@ -221,15 +280,11 @@ const JDlist = ref([
|
||||
{
|
||||
name: '谐波普测',
|
||||
value: 5
|
||||
},
|
||||
{
|
||||
name: '在线系统',
|
||||
value: 5
|
||||
}
|
||||
])
|
||||
const harmonicCharts = ref()
|
||||
const harmonicList: any = ref([])
|
||||
const harmonicLineRatio: any = ref(0)
|
||||
const WTCharts = ref({})
|
||||
const WTList: any = ref([])
|
||||
|
||||
const value = ref(options1[0].id)
|
||||
const open = (e: number) => {
|
||||
@@ -252,7 +307,7 @@ const info = (row: any) => {
|
||||
ids: [],
|
||||
statisticalType: dictData.getBasicData('Statistical_Type', ['Report_Type'])[0],
|
||||
isUpToGrid: row.isUpToGrid,
|
||||
monitorFlag: row.isUpToGrid
|
||||
monitorFlag: row.isUpToGrid == 0 ? null : row.isUpToGrid
|
||||
}
|
||||
formRow.value = form
|
||||
// 综合评估
|
||||
@@ -267,51 +322,55 @@ const info = (row: any) => {
|
||||
const harmonicChange = () => {
|
||||
getEvaluationOverview({ ...formRow.value, harmonicType: harmonicType.value }).then(res => {
|
||||
harmonicLineRatio.value = res.data.lineRatio
|
||||
harmonicList.value = res.data.childrenList.map((item: any) => {
|
||||
item.ratio = item.ratio == 3.14159 ? 0 : item.ratio
|
||||
return item
|
||||
})
|
||||
|
||||
harmonicCharts.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: res.data.childrenList.map((item: any) => item.deptName)
|
||||
},
|
||||
grid: {
|
||||
top: '10px',
|
||||
left: '30px',
|
||||
right: '30px',
|
||||
bottom: '0px'
|
||||
},
|
||||
// harmonicList.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: res.data.childrenList.map((item: any) => item.deptName)
|
||||
// },
|
||||
// grid: {
|
||||
// top: '10px',
|
||||
// left: '30px',
|
||||
// right: '30px',
|
||||
// bottom: '0px'
|
||||
// },
|
||||
|
||||
options: {
|
||||
dataZoom: null,
|
||||
series: [
|
||||
{
|
||||
name: '占比',
|
||||
type: 'bar',
|
||||
data: res.data.childrenList.map((item: any) => item.ratio),
|
||||
label: {
|
||||
show: true,
|
||||
position: 'right',
|
||||
fontSize: 12,
|
||||
formatter: function (params: any) {
|
||||
return `${params.value == 3.14159 ? '' : params.value}`
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
// options: {
|
||||
// dataZoom: null,
|
||||
// series: [
|
||||
// {
|
||||
// name: '占比',
|
||||
// type: 'bar',
|
||||
// data: res.data.childrenList.map((item: any) => item.ratio),
|
||||
// label: {
|
||||
// show: true,
|
||||
// position: 'right',
|
||||
// fontSize: 12,
|
||||
// formatter: function (params: any) {
|
||||
// return `${params.value == 3.14159 ? '' : params.value}`
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// ]
|
||||
// }
|
||||
// }
|
||||
})
|
||||
}
|
||||
const transientChange = () => {
|
||||
@@ -325,54 +384,54 @@ const transientChange = () => {
|
||||
transientNum.value = res.data.gwData
|
||||
data = res.data.gwInfo
|
||||
}
|
||||
WTList.value = data
|
||||
// WTList.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'
|
||||
// },
|
||||
|
||||
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}`
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
// 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}`
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// ]
|
||||
// }
|
||||
// }
|
||||
})
|
||||
}
|
||||
defineExpose({ info })
|
||||
defineExpose({ info, show })
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@@ -382,41 +441,55 @@ defineExpose({ info })
|
||||
padding: 10px 10px 10px 10px;
|
||||
font-size: 13px;
|
||||
overflow: hidden;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.title {
|
||||
// height: ;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
font-size: 16px;
|
||||
height: 22px;
|
||||
font-size: 15px;
|
||||
line-height: 23px;
|
||||
padding-left: 5px;
|
||||
width: 100%;
|
||||
background-image: linear-gradient(to right, #a4e5da, #fff);
|
||||
font-weight: 550;
|
||||
|
||||
.info {
|
||||
font-weight: normal;
|
||||
display: flex;
|
||||
font-size: 12px;
|
||||
cursor: pointer;
|
||||
color: #757575;
|
||||
}
|
||||
}
|
||||
.TJTop {
|
||||
display: flex;
|
||||
img {
|
||||
height: 1.2rem;
|
||||
width: 1.2rem;
|
||||
margin-right: 5px;
|
||||
}
|
||||
}
|
||||
.evaluate {
|
||||
height: 60px;
|
||||
border: 1px solid #ccc;
|
||||
margin: 10px 0;
|
||||
padding: 10px 0;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
text-align: center;
|
||||
overflow-x: auto;
|
||||
overflow-y: hidden;
|
||||
.line {
|
||||
display: inline-block;
|
||||
width: 0.5rem;
|
||||
height: 0.5rem;
|
||||
border-radius: 0.25rem;
|
||||
background: var(--el-color-primary);
|
||||
margin-right: 2px;
|
||||
margin-bottom: 1px;
|
||||
}
|
||||
}
|
||||
.boxR {
|
||||
border: 1px solid #ccc;
|
||||
margin: 10px 0;
|
||||
padding: 5px;
|
||||
margin: 10px 0 0 0;
|
||||
|
||||
.num {
|
||||
color: #2478f2;
|
||||
}
|
||||
@@ -428,6 +501,21 @@ defineExpose({ info })
|
||||
margin: 0;
|
||||
border: 0px;
|
||||
}
|
||||
|
||||
.harmonic {
|
||||
display: grid;
|
||||
.progress {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.text {
|
||||
width: 50px;
|
||||
font-size: 12px;
|
||||
}
|
||||
.el-progress {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
:deep(.el-select) {
|
||||
min-width: 120px;
|
||||
@@ -435,14 +523,16 @@ defineExpose({ info })
|
||||
.col {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
border-radius: 10px;
|
||||
text-align: center;
|
||||
background-color: #edededc0;
|
||||
}
|
||||
.imgR {
|
||||
position: absolute;
|
||||
padding: 10px;
|
||||
top: calc(50% - 80px);
|
||||
left: -23px;
|
||||
z-index: 1;
|
||||
|
||||
height: 200px;
|
||||
cursor: pointer;
|
||||
}
|
||||
@@ -460,4 +550,7 @@ defineExpose({ info })
|
||||
padding: 10px 10px 10px 10px;
|
||||
}
|
||||
}
|
||||
:deep(.el-progress__text) {
|
||||
font-size: 0.8rem !important ;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user