修改技术监督
This commit is contained in:
@@ -204,6 +204,7 @@ const tableStore: any = new TableStore({
|
||||
tableStore.table.params.deptId = dictData.state.area[0].id
|
||||
tableStore.table.params.alarmDayLimit = 5
|
||||
tableStore.table.params.warnDayLimit = 1
|
||||
tableStore.table.params.lineRunFlag = 0
|
||||
const echart = () => {
|
||||
percentage.value = {
|
||||
color: ['#FF9100'],
|
||||
|
||||
@@ -10,7 +10,7 @@ $bg-color: () !default;
|
||||
$bg-color: map.merge(
|
||||
(
|
||||
'': #edf0f3,
|
||||
'overlay': #ffffff,
|
||||
'overlay': #ffffff
|
||||
),
|
||||
$bg-color
|
||||
);
|
||||
@@ -19,7 +19,7 @@ $bg-color: map.merge(
|
||||
$border-color: () !default;
|
||||
$border-color: map.merge(
|
||||
(
|
||||
'': #f6f6f6,
|
||||
'': #f6f6f6
|
||||
),
|
||||
$border-color
|
||||
);
|
||||
@@ -29,8 +29,10 @@ $border-color: map.merge(
|
||||
@include set-css-var-value('color-primary-light', $primary-light);
|
||||
@include set-component-css-var('bg-color', $bg-color);
|
||||
@include set-component-css-var('border-color', $border-color);
|
||||
// --vxe-table-row-current-background-color: var(--el-color-primary-light-7);
|
||||
// --vxe-table-row-hover-background-color: var(--el-color-primary-light-9);
|
||||
// --vxe-table-row-hover-current-background-color: var(--el-color-primary-light-7);
|
||||
// --vxe-table-row-hover-striped-background-color: var(--el-color-primary-light-9);
|
||||
--vxe-ui-table-row-current-background-color: var(--el-color-primary-light-8);
|
||||
--vxe-ui-table-row-hover-current-background-color: var(--el-color-primary-light-8);
|
||||
// --vxe-table-row-current-background-color: var(--el-color-primary-light-7);
|
||||
// --vxe-table-row-hover-background-color: var(--el-color-primary-light-9);
|
||||
// --vxe-table-row-hover-current-background-color: var(--el-color-primary-light-7);
|
||||
// --vxe-table-row-hover-striped-background-color: var(--el-color-primary-light-9);
|
||||
}
|
||||
|
||||
@@ -75,3 +75,4 @@
|
||||
.default-theme .splitpanes--vertical > .splitpanes__splitter:before {
|
||||
background-color: #000 !important;
|
||||
}
|
||||
|
||||
|
||||
@@ -579,7 +579,7 @@ const addMenu = () => {}
|
||||
:deep(.default) {
|
||||
display: flex;
|
||||
.row--current {
|
||||
background-color: var(--el-color-primary-light-8) !important;
|
||||
// background-color: var(--el-color-primary-light-8) !important;
|
||||
}
|
||||
}
|
||||
.custom-tree-node {
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<div class="default-main">
|
||||
<TableHeader date-picker ref="TableHeaderRef" >
|
||||
<TableHeader date-picker ref="TableHeaderRef">
|
||||
<template v-slot:select>
|
||||
<el-form-item label="运行状态">
|
||||
<el-select v-model="tableStore.table.params.lineRunFlag" clearable placeholder="请选择运行状态">
|
||||
@@ -56,7 +56,9 @@
|
||||
</div>
|
||||
<div class="echartTitle">
|
||||
<div>总的数据完整性</div>
|
||||
<div>{{ monitoringPoints.totalOnlineRate }}%</div>
|
||||
<div>
|
||||
{{ monitoringPoints.totalOnlineRate > 100 ? 100 : monitoringPoints.totalOnlineRate }}%
|
||||
</div>
|
||||
</div>
|
||||
<div style="height: 30px">
|
||||
<MyEchart :options="percentage"></MyEchart>
|
||||
@@ -165,8 +167,13 @@
|
||||
<vxe-column field="subStation" title="变电站" minWidth="110px"></vxe-column>
|
||||
<vxe-column field="manufacturer" title="终端厂家" minWidth="110px"></vxe-column>
|
||||
<vxe-column field="deviceName" title="终端名称" minWidth="110px"></vxe-column>
|
||||
<vxe-column field="ip" title="终端IP" :formatter="formatter" width="130px" ></vxe-column>
|
||||
<vxe-column field="lineName" title="监测点名称" :formatter="formatter" minWidth="110px"></vxe-column>
|
||||
<vxe-column field="ip" title="终端IP" :formatter="formatter" width="130px"></vxe-column>
|
||||
<vxe-column
|
||||
field="lineName"
|
||||
title="监测点名称"
|
||||
:formatter="formatter"
|
||||
minWidth="110px"
|
||||
></vxe-column>
|
||||
<vxe-column field="runFlag" title="运行状态" width="90px">
|
||||
<template #default="{ row }">
|
||||
<el-tag
|
||||
@@ -354,7 +361,13 @@ const echart = () => {
|
||||
name: '异常占比',
|
||||
type: 'bar',
|
||||
barWidth: 13,
|
||||
data: [monitoringPoints.value.totalOnlineRate == 0 ? '' : monitoringPoints.value.totalOnlineRate],
|
||||
data: [
|
||||
monitoringPoints.value.totalOnlineRate == 0
|
||||
? ''
|
||||
: monitoringPoints.value.totalOnlineRate > 100
|
||||
? 100
|
||||
: monitoringPoints.value.totalOnlineRate
|
||||
],
|
||||
z: 0,
|
||||
zlevel: 0,
|
||||
itemStyle: {
|
||||
@@ -481,7 +494,7 @@ tableStore.table.params.name = ''
|
||||
provide('tableStore', tableStore)
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
@import '@/assets/font/iconfont.css';
|
||||
@import '@/assets/font/iconfont.css';
|
||||
.card-list {
|
||||
display: flex;
|
||||
.monitoringPoints {
|
||||
|
||||
@@ -100,7 +100,7 @@ const url: any = [
|
||||
new URL(`@/assets/img/SB.png`, import.meta.url)
|
||||
]
|
||||
const tableData: any = ref([])
|
||||
const title = ['电压偏差(超标)', '频率偏差(超标)', '电压总谐波畸变率(超标)', '闪变(超标)', '三相电压不平衡度(超标)']
|
||||
const title = ['频率偏差(超标)', '电压偏差(超标)', '电压总谐波畸变率(超标)', '闪变(超标)', '三相电压不平衡度(超标)']
|
||||
|
||||
const echart = (row: any) => {
|
||||
let maxList: any = []
|
||||
|
||||
@@ -318,7 +318,7 @@ const options = ref([
|
||||
|
||||
])
|
||||
const technology: any = ref({})
|
||||
const harmonicType = ref('0')
|
||||
const harmonicType = ref('6')
|
||||
const transientNum = ref([0, 0])
|
||||
const options1: any = dictData.getBasicData('Event_Statis').filter(item => {
|
||||
if (item.code == 'Voltage_Dip' || item.code == 'Voltage_Rise' || item.code == 'Short_Interruptions') {
|
||||
|
||||
@@ -33,7 +33,7 @@
|
||||
<br />
|
||||
<span style="color: #ff9900">中度污染：(1.6 , 2]</span>
|
||||
<br />
|
||||
<span style="color: #A52a2a">重度污染：(2 , +∞)</span>
|
||||
<span style="color: #a52a2a">重度污染：(2 , +∞)</span>
|
||||
</div>
|
||||
</el-popover>
|
||||
</span>
|
||||
@@ -49,11 +49,11 @@
|
||||
<el-radio-button v-for="item in options" :label="item.id">{{ item.name }}</el-radio-button>
|
||||
</el-radio-group>
|
||||
</div>
|
||||
|
||||
<!-- :style="i == 3 ? `margin-left: 20%;` : ``" -->
|
||||
<div class="pie">
|
||||
<MyEChart
|
||||
v-for="(item, i) in picEChart"
|
||||
:style="i == 3 ? `margin-left: 20%;` : ``"
|
||||
|
||||
class="MyEChart"
|
||||
:options="item"
|
||||
/>
|
||||
@@ -72,6 +72,7 @@
|
||||
<vxe-column field="num3" sortable title="轻度污染数量" :formatter="formatter" />
|
||||
<vxe-column field="num4" sortable title="中度污染数量" :formatter="formatter" />
|
||||
<vxe-column field="num5" sortable title="重度污染数量" :formatter="formatter" />
|
||||
<vxe-column field="num6" sortable title="暂无数据数量" :formatter="formatter" />
|
||||
</vxe-table>
|
||||
</div>
|
||||
</el-dialog>
|
||||
@@ -88,11 +89,12 @@ const dictData = useDictData()
|
||||
const dialogVisible: any = ref(false)
|
||||
const time = ref('1')
|
||||
const Voltage = dictData.getBasicData('Dev_Voltage_Stand')
|
||||
const options: any = dictData.getBasicData('Pollution_Statis').filter(item => {
|
||||
if (item.code == 'V_Harmonic' || item.code == 'I_All') {
|
||||
return item
|
||||
}
|
||||
})
|
||||
const options: any = dictData.getBasicData('Pollution_Calc')
|
||||
// .filter(item => {
|
||||
// if (item.code == 'V_Harmonic' || item.code == 'I_All') {
|
||||
// return item
|
||||
// }
|
||||
// })
|
||||
const contaminate = ref(options[0].id)
|
||||
const rowList: any = ref({})
|
||||
const trendEChart: any = ref({})
|
||||
@@ -119,57 +121,223 @@ const open = async (row: any) => {
|
||||
}
|
||||
const contaminateC = () => {
|
||||
// rowList.value.deviceInfoParam.ids=[contaminate.value]
|
||||
getPollutionAlarmData({ ...rowList.value, ids: [contaminate.value] }).then(res => {
|
||||
let data = []
|
||||
// getPollutionAlarmData({ ...rowList.value, ids: [contaminate.value] }).then(res => {
|
||||
// let data = []
|
||||
|
||||
let a1 = 0
|
||||
let a2 = 0
|
||||
let a3 = 0
|
||||
let a4 = 0
|
||||
let a5 = 0
|
||||
if (rowList.value.isUpToGrid == 0) {
|
||||
data = res.data.info
|
||||
} else {
|
||||
data = res.data.gwInfo
|
||||
// let a1 = 0
|
||||
// let a2 = 0
|
||||
// let a3 = 0
|
||||
// let a4 = 0
|
||||
// let a5 = 0
|
||||
// if (rowList.value.isUpToGrid == 0) {
|
||||
// data = res.data.info
|
||||
// } else {
|
||||
// data = res.data.gwInfo
|
||||
// }
|
||||
// for (let i = 0; i < data.length; i++) {
|
||||
// if (data[i] >= 2) {
|
||||
// ++a5
|
||||
// } else if (data[i] >= 1.6 && data[i] < 2) {
|
||||
// ++a4
|
||||
// } else if (data[i] >= 1.2 && data[i] < 1.6) {
|
||||
// ++a3
|
||||
// } else if (data[i] >= 1 && data[i] < 1.2) {
|
||||
// ++a2
|
||||
// } else if (data[i] >= 0 && data[i] < 1) {
|
||||
// ++a1
|
||||
// }
|
||||
// }
|
||||
|
||||
// let list = [
|
||||
// {
|
||||
// value: ((a1 / data.length || 0) * 100).toFixed(2),
|
||||
// name: `无污染：${a1}座`
|
||||
// },
|
||||
// {
|
||||
// value: ((a2 / data.length || 0) * 100).toFixed(2),
|
||||
// name: `轻微污染：：${a2}座`
|
||||
// },
|
||||
// {
|
||||
// value: ((a3 / data.length || 0) * 100).toFixed(2),
|
||||
// name: `轻度污染：${a3}座`
|
||||
// },
|
||||
// {
|
||||
// value: ((a4 / data.length || 0) * 100).toFixed(2),
|
||||
// name: `中度污染：${a4}座`
|
||||
// },
|
||||
// {
|
||||
// value: ((a5 / data.length || 0) * 100).toFixed(2),
|
||||
// name: `重度污染：${a5}座`
|
||||
// }
|
||||
// ]
|
||||
// const color = ['#00B07D', '#3399ff', '#ffcc33', '#ff9900', '#A52a2a']
|
||||
|
||||
// list.forEach((item, i) => {
|
||||
// picEChart.value[i] = {
|
||||
// legend: {
|
||||
// type: 'scroll',
|
||||
// orient: 'vertical',
|
||||
// left: 10,
|
||||
// top: '10%'
|
||||
// },
|
||||
// xAxis: {
|
||||
// show: false
|
||||
// },
|
||||
// yAxis: {
|
||||
// show: false
|
||||
// },
|
||||
// options: {
|
||||
// toolbox:null,
|
||||
// dataZoom: null,
|
||||
// series: [
|
||||
// {
|
||||
// type: 'gauge',
|
||||
// startAngle: 180,
|
||||
// center: ['50%', '80%'],
|
||||
// radius: '135%',
|
||||
// endAngle: 0,
|
||||
// min: 0,
|
||||
// max: 100,
|
||||
// progress: {
|
||||
// show: true,
|
||||
// width: 15,
|
||||
// itemStyle: {
|
||||
// color: color[i]
|
||||
// }
|
||||
// },
|
||||
// pointer: {
|
||||
// show: false
|
||||
// },
|
||||
// axisLine: {
|
||||
// lineStyle: {
|
||||
// width: 15,
|
||||
// color: [[1, '#f4f4f4']]
|
||||
// }
|
||||
// },
|
||||
// axisTick: {
|
||||
// show: false
|
||||
// },
|
||||
// splitLine: {
|
||||
// show: false
|
||||
// },
|
||||
// axisLabel: {
|
||||
// show: false
|
||||
// // distance: 5,
|
||||
// // color: '#666',
|
||||
// // fontSize: 12,
|
||||
// // formatter: function (value: any) {
|
||||
// // if (value === 0 || value === 100) {
|
||||
// // return value + '%'
|
||||
// // }
|
||||
// // }
|
||||
// },
|
||||
// anchor: {
|
||||
// show: false,
|
||||
// showAbove: false,
|
||||
// size: 25,
|
||||
// itemStyle: {
|
||||
// borderWidth: 60
|
||||
// }
|
||||
// },
|
||||
// title: {
|
||||
// show: true,
|
||||
// offsetCenter: [0, '20%'],
|
||||
// fontSize: 14
|
||||
// },
|
||||
// detail: {
|
||||
// valueAnimation: true,
|
||||
// fontSize: 14,
|
||||
// lineHeight: 20,
|
||||
// color: color[i],
|
||||
// fontWeight: 'bold',
|
||||
// offsetCenter: [0, '-20%'],
|
||||
// formatter: function (value: any) {
|
||||
// return '{a|占比} ' + '\n' + value + '{a|%}'
|
||||
// },
|
||||
// rich: {
|
||||
// a: {
|
||||
// color: '#333',
|
||||
// fontSize: 16,
|
||||
// lineHeight: 30
|
||||
// }
|
||||
// }
|
||||
// },
|
||||
// data: [item]
|
||||
// }
|
||||
// ]
|
||||
// }
|
||||
// }
|
||||
// })
|
||||
// })
|
||||
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[6],
|
||||
num6: item[7]
|
||||
}
|
||||
for (let i = 0; i < data.length; i++) {
|
||||
if (data[i] >= 2) {
|
||||
++a5
|
||||
} else if (data[i] >= 1.6 && data[i] < 2) {
|
||||
++a4
|
||||
} else if (data[i] >= 1.2 && data[i] < 1.6) {
|
||||
++a3
|
||||
} else if (data[i] >= 1 && data[i] < 1.2) {
|
||||
++a2
|
||||
} else if (data[i] >= 0 && data[i] < 1) {
|
||||
++a1
|
||||
}
|
||||
}
|
||||
// console.log('🚀 ~ getPollutionAlarmData ~ a1 / data.length:', a1 / data.length)
|
||||
})
|
||||
console.log(123, tableData.value)
|
||||
|
||||
let data = []
|
||||
let a1 = tableData.value.reduce((t, item) => t + (item.num1 - 0 || 0), 0)
|
||||
let a2 = tableData.value.reduce((t, item) => t + (item.num2 - 0 || 0), 0)
|
||||
let a3 = tableData.value.reduce((t, item) => t + (item.num3 - 0 || 0), 0)
|
||||
let a4 = tableData.value.reduce((t, item) => t + (item.num4 - 0 || 0), 0)
|
||||
let a5 = tableData.value.reduce((t, item) => t + (item.num5 - 0 || 0), 0)
|
||||
let a6 = tableData.value.reduce((t, item) => t + (item.num6 - 0 || 0), 0)
|
||||
let total = a1 + a2 + a3 + a4 + a5 + a6
|
||||
// if (rowList.value.isUpToGrid == 0) {
|
||||
// data = res.data.info
|
||||
// } else {
|
||||
// data = res.data.gwInfo
|
||||
// }
|
||||
// for (let i = 0; i < data.length; i++) {
|
||||
// if (data[i] >= 2) {
|
||||
// ++a5
|
||||
// } else if (data[i] >= 1.6 && data[i] < 2) {
|
||||
// ++a4
|
||||
// } else if (data[i] >= 1.2 && data[i] < 1.6) {
|
||||
// ++a3
|
||||
// } else if (data[i] >= 1 && data[i] < 1.2) {
|
||||
// ++a2
|
||||
// } else if (data[i] >= 0 && data[i] < 1) {
|
||||
// ++a1
|
||||
// }
|
||||
// }
|
||||
|
||||
let list = [
|
||||
{
|
||||
value: ((a1 / data.length || 0) * 100).toFixed(2),
|
||||
value: ((a1 / total || 0) * 100).toFixed(2),
|
||||
name: `无污染：${a1}座`
|
||||
},
|
||||
{
|
||||
value: ((a2 / data.length || 0) * 100).toFixed(2),
|
||||
value: ((a2 / total || 0) * 100).toFixed(2),
|
||||
name: `轻微污染：：${a2}座`
|
||||
},
|
||||
{
|
||||
value: ((a3 / data.length || 0) * 100).toFixed(2),
|
||||
value: ((a3 / total || 0) * 100).toFixed(2),
|
||||
name: `轻度污染：${a3}座`
|
||||
},
|
||||
{
|
||||
value: ((a4 / data.length || 0) * 100).toFixed(2),
|
||||
value: ((a4 / total || 0) * 100).toFixed(2),
|
||||
name: `中度污染：${a4}座`
|
||||
},
|
||||
{
|
||||
value: ((a5 / data.length || 0) * 100).toFixed(2),
|
||||
value: ((a5 / total || 0) * 100).toFixed(2),
|
||||
name: `重度污染：${a5}座`
|
||||
}
|
||||
},
|
||||
{
|
||||
value: ((a6 / total || 0) * 100).toFixed(2),
|
||||
name: `暂无数据：${a6}座`
|
||||
},
|
||||
]
|
||||
const color = ['#00B07D', '#3399ff', '#ffcc33', '#ff9900', '#A52a2a']
|
||||
const color = ['#00B07D', '#3399ff', '#ffcc33', '#ff9900', '#A52a2a','#ccc']
|
||||
|
||||
list.forEach((item, i) => {
|
||||
picEChart.value[i] = {
|
||||
@@ -186,7 +354,7 @@ const contaminateC = () => {
|
||||
show: false
|
||||
},
|
||||
options: {
|
||||
toolbox:null,
|
||||
toolbox: null,
|
||||
dataZoom: null,
|
||||
series: [
|
||||
{
|
||||
@@ -268,19 +436,6 @@ 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[6]
|
||||
}
|
||||
})
|
||||
})
|
||||
}
|
||||
const analysis = (e: any) => {
|
||||
let time = rowList.value.searchBeginTime?.slice(0, 4) + `-01-01`
|
||||
|
||||
@@ -97,7 +97,7 @@ const url: any = [
|
||||
new URL(`@/assets/img/SB.png`, import.meta.url)
|
||||
]
|
||||
const tableData: any = ref([])
|
||||
const title = ['电压偏差(超标)', '频率偏差(超标)', '电压总谐波畸变率(超标)', '闪变(超标)', '三相电压不平衡度(超标)']
|
||||
const title = ['频率偏差(超标)', '电压偏差(超标)', '电压总谐波畸变率(超标)', '闪变(超标)', '三相电压不平衡度(超标)']
|
||||
|
||||
const echart = (row: any) => {
|
||||
let maxList: any = []
|
||||
|
||||
@@ -128,8 +128,7 @@ const LngLat = [
|
||||
import { getAssessOverview } from '@/api/device-boot/panorama'
|
||||
// narimap.publicKey =
|
||||
// 'MIGfMA0GCSqGSIb3DQEBAQUAA4GNADCBiQKBgQCRYFEiMdZVgY8+jIjx4GR1QbN7qVgCE0istwPZN8xRqdSV+hePUPIW1k9eCVh9gxIIWHAw2TfNZLb8l0Tmk9OH3XnZ009TNBjzZ2zWLrbjFQzgutKKI2JRLK+CaJbOZ0LiD78QnTo5Zk+ZuQBKgtyFJdp4T5gQS+Mnbj/c4EnK0QIDAQAB'
|
||||
narimap.publicKey =
|
||||
'JBb74325ae94dc49358b7d699660b692'
|
||||
narimap.publicKey = 'JBb74325ae94dc49358b7d699660b692'
|
||||
|
||||
narimap.Require(
|
||||
[
|
||||
@@ -198,15 +197,16 @@ const Query = () => {
|
||||
base: {
|
||||
outline: {
|
||||
paint: {
|
||||
'line-color': '#0D867F',
|
||||
'line-width': 1,
|
||||
'line-color': '#fff',
|
||||
'line-width': 2,
|
||||
'line-opacity': 1
|
||||
}
|
||||
},
|
||||
fill: {
|
||||
paint: {
|
||||
'fill-color': '#0D867F',
|
||||
'fill-opacity': 0.3
|
||||
// 'fill-opacity': 0.3
|
||||
'fill-opacity': 0
|
||||
}
|
||||
},
|
||||
label: {
|
||||
@@ -226,7 +226,7 @@ const Query = () => {
|
||||
},
|
||||
outline: {
|
||||
paint: {
|
||||
'line-color': '#0D867F',
|
||||
'line-color': '#fff',
|
||||
'line-width': 4,
|
||||
'line-opacity': 1
|
||||
}
|
||||
@@ -248,7 +248,8 @@ const Query = () => {
|
||||
)
|
||||
|
||||
powerManageGridMap.value.on('load', function () {
|
||||
powerLoad()
|
||||
// 区分区域颜色
|
||||
// powerLoad()
|
||||
})
|
||||
|
||||
setTimeout(() => {
|
||||
@@ -262,7 +263,100 @@ const Query = () => {
|
||||
}, 500)
|
||||
}, 500)
|
||||
}
|
||||
// 添加热力图
|
||||
const sourceList: any = ref([])
|
||||
const addSource = async () => {
|
||||
// const features = [
|
||||
// {
|
||||
// type: 'Feature',
|
||||
// geometry: {
|
||||
// type: 'Point',
|
||||
// coordinates: [117.651148, 41.121061]
|
||||
// },
|
||||
// properties: {
|
||||
// value: 64
|
||||
// }
|
||||
// }
|
||||
// ]
|
||||
console.log('🚀 ~ sourceList:', sourceList.value)
|
||||
|
||||
if (map.value.getSource('themeData')) {
|
||||
map.value.getSource('themeData').setData({
|
||||
type: 'FeatureCollection',
|
||||
features: sourceList.value
|
||||
})
|
||||
} else {
|
||||
map.value.addSource('themeData', {
|
||||
type: 'geojson',
|
||||
data: {
|
||||
type: 'FeatureCollection',
|
||||
features: sourceList.value
|
||||
}
|
||||
})
|
||||
}
|
||||
if (map.value.getLayer('earthquakes-paint')) {
|
||||
} else {
|
||||
map.value.addLayer({
|
||||
id: 'earthquakes-paint',
|
||||
type: 'heatmap',
|
||||
source: 'themeData',
|
||||
paint: {
|
||||
/**
|
||||
* 数据点的影响力，weight=10的点相当于十个weight=1的点
|
||||
* 下述为插值表达式，输入是点geojson的properties的mag，输出随mag线性增大
|
||||
*/
|
||||
'heatmap-weight': [
|
||||
'interpolate',
|
||||
['linear'],
|
||||
['get', 'value'],
|
||||
0,
|
||||
0.1,
|
||||
1,
|
||||
0.3,
|
||||
101,
|
||||
0.5,
|
||||
1001,
|
||||
0.7,
|
||||
10001,
|
||||
1
|
||||
],
|
||||
'heatmap-color': [
|
||||
'interpolate',
|
||||
['linear'],
|
||||
['heatmap-density'],
|
||||
0,
|
||||
'rgba(255, 0, 0, 0)',
|
||||
0.1,
|
||||
'rgba(7, 91, 243, .8)',
|
||||
0.3,
|
||||
'rgba(7, 208, 255, .6)',
|
||||
|
||||
0.5,
|
||||
'rgba(213, 251, 12, .8)',
|
||||
|
||||
0.7,
|
||||
'rgba(255, 191, 0, .8)',
|
||||
|
||||
1,
|
||||
'rgba(255, 0, 0, .8)'
|
||||
],
|
||||
|
||||
'heatmap-intensity': ['interpolate', ['linear'], ['zoom'], 0, 1, 12, 3],
|
||||
/**
|
||||
* 该值越大，热力图越平滑，信息越不详细。
|
||||
* 下述为插值表达式，输出随zoom线性变化，zoom为0时值为8，zoom为9时值为20
|
||||
*/
|
||||
'heatmap-radius': 30,
|
||||
/**
|
||||
* 透明度，输出为1则不透明
|
||||
* 下述为插值表达式，输出随zoom线性变化，zoom为5时值为0.8，zoom为12时值为0.4
|
||||
*/
|
||||
'heatmap-opacity': 1
|
||||
},
|
||||
maxzoom: 12
|
||||
})
|
||||
}
|
||||
}
|
||||
// 添加变电站线路
|
||||
const addLine = () => {
|
||||
//添加电网图层
|
||||
@@ -629,102 +723,8 @@ const addLayer = () => {
|
||||
}
|
||||
})
|
||||
}
|
||||
// 测试添加点
|
||||
const testAddLayer = () => {
|
||||
// 注册图片
|
||||
map.value.loadImage(
|
||||
new URL('@/assets/test5.png', import.meta.url).href, // 图片地址
|
||||
(error: any, image: any) => {
|
||||
if (error) throw error
|
||||
//添加图片到 map.value ，第一个参数为图片设置 id
|
||||
map.value.addImage('poi5', image)
|
||||
//添加 layer
|
||||
map.value.addLayer({
|
||||
id: 'test',
|
||||
type: 'symbol',
|
||||
minzoom: 6.5, //图片层级
|
||||
source: {
|
||||
type: 'geojson',
|
||||
data: {
|
||||
type: 'FeatureCollection',
|
||||
features: []
|
||||
}
|
||||
},
|
||||
layout: {
|
||||
// 为图层设置引用的图片ID
|
||||
'icon-image': 'poi5',
|
||||
'icon-pitch-alignment': 'map', //贴地
|
||||
'icon-ignore-placement': true,
|
||||
'icon-allow-overlap': true,
|
||||
'icon-anchor': 'center', // 中心点
|
||||
'icon-size': ['interpolate', ['linear'], ['zoom'], 6, 0.1, 50, 1] // 图符大小
|
||||
}
|
||||
})
|
||||
}
|
||||
)
|
||||
// 添加图片需要先注册图片才能加载
|
||||
setTimeout(() => {
|
||||
map.value.getSource('test').setData({
|
||||
type: 'FeatureCollection',
|
||||
features: [
|
||||
{
|
||||
type: 'Feature',
|
||||
geometry: {
|
||||
type: 'Point',
|
||||
coordinates: [115.3544544, 40.217797]
|
||||
}
|
||||
},
|
||||
{
|
||||
type: 'Feature',
|
||||
geometry: {
|
||||
type: 'Point',
|
||||
coordinates: [115.4544544, 40.317797]
|
||||
}
|
||||
}
|
||||
]
|
||||
})
|
||||
}, 1000)
|
||||
|
||||
// 地图连线
|
||||
map.value.addLayer({
|
||||
id: 'power-line',
|
||||
type: 'line',
|
||||
source: {
|
||||
type: 'geojson',
|
||||
data: {
|
||||
type: 'FeatureCollection',
|
||||
features: [
|
||||
{
|
||||
type: 'Feature',
|
||||
geometry: {
|
||||
type: 'MultiLineString', //MultiLineString3层数组可以绘制多条线 LineString2层数组
|
||||
coordinates: [
|
||||
[
|
||||
[117, 39],
|
||||
[116, 40]
|
||||
],
|
||||
[
|
||||
[116, 39],
|
||||
[115, 40]
|
||||
]
|
||||
]
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
|
||||
paint: {
|
||||
'line-color': '#ff0000',
|
||||
'line-width': 3,
|
||||
'line-opacity': 0.6
|
||||
}
|
||||
})
|
||||
setTimeout(() => {
|
||||
//先判断是否有图层 'power-line'是图层注册id
|
||||
if (map.value.getLayer('power-line')) map.value.removeLayer('power-line')
|
||||
}, 5000)
|
||||
}
|
||||
const PollutionList = dictData.getBasicData('Pollution_Calc').filter(item => item.name == '谐波电压')
|
||||
//添加多个监测点
|
||||
const addMarkers = async (row?: any, key?: any, num?: any) => {
|
||||
if (map.value == null) return
|
||||
@@ -735,6 +735,8 @@ const addMarkers = async (row?: any, key?: any, num?: any) => {
|
||||
searchBeginTime: datePickerRef.value.timeValue[0],
|
||||
searchEndTime: datePickerRef.value.timeValue[1],
|
||||
serverName: 'event-boot',
|
||||
dicData: [PollutionList[0].id],
|
||||
isPollution: 1,
|
||||
statisticalType: {},
|
||||
...row
|
||||
}
|
||||
@@ -744,6 +746,8 @@ const addMarkers = async (row?: any, key?: any, num?: any) => {
|
||||
let r = 0.0035
|
||||
let tempFeatureZ: any = []
|
||||
let tempFeatureT: any = []
|
||||
|
||||
sourceList.value = []
|
||||
data.forEach((item: any) => {
|
||||
if (item.children.length > 10 && item.children.length < 100) {
|
||||
r = 0.0055
|
||||
@@ -792,6 +796,31 @@ const addMarkers = async (row?: any, key?: any, num?: any) => {
|
||||
break
|
||||
}
|
||||
}
|
||||
let num = 20
|
||||
if (val.vharmonicValue > 10000) {
|
||||
num = 100
|
||||
} else if (val.vharmonicValue > 1000) {
|
||||
num = 80
|
||||
} else if (val.vharmonicValue > 100) {
|
||||
num = 60
|
||||
} else if (val.vharmonicValue > 0) {
|
||||
num = 40
|
||||
} else {
|
||||
num = 20
|
||||
}
|
||||
|
||||
sourceList.value.push({
|
||||
type: 'Feature',
|
||||
geometry: {
|
||||
type: 'Point',
|
||||
coordinates: [val.lng, val.lat]
|
||||
},
|
||||
properties: {
|
||||
value: val.vharmonicValue || 0
|
||||
// value: num //10 //val.vharmonicValue || 0
|
||||
// value: 0
|
||||
}
|
||||
})
|
||||
})
|
||||
})
|
||||
|
||||
@@ -856,7 +885,10 @@ const addMarkers = async (row?: any, key?: any, num?: any) => {
|
||||
type: 'FeatureCollection',
|
||||
features: [...tempFeatureT, ...tempFeatureZ]
|
||||
})
|
||||
addSource()
|
||||
//
|
||||
}
|
||||
|
||||
// 统计弹框数据
|
||||
const GridDiagramArea = () => {
|
||||
LngLat.forEach((item: any) => {
|
||||
|
||||
@@ -291,10 +291,10 @@ const countList: any = ref([
|
||||
{ title: '非电网侧监测点', num: 0, onLineNum: 0, integrityRate: 0 }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: '上送网公司',
|
||||
children: [{ title: '电网侧监测点', num: 0, onLineNum: 0, integrityRate: 0 }]
|
||||
}
|
||||
// {
|
||||
// title: '上送网公司',
|
||||
// children: [{ title: '电网侧监测点', num: 0, onLineNum: 0, integrityRate: 0 }]
|
||||
// }
|
||||
])
|
||||
const linList: any = ref([
|
||||
{
|
||||
@@ -394,7 +394,7 @@ const info = async (row: any) => {
|
||||
getGridDiagramStatistics(form).then(res => {
|
||||
countList.value[0].children[0] = { title: '电网侧监测点', ...res.data.data[0] }
|
||||
countList.value[0].children[1] = { title: '非电网侧监测点', ...res.data.data[1] }
|
||||
countList.value[1].children[0] = { title: '电网侧监测点', ...res.data.gwData[0] }
|
||||
// countList.value[1].children[0] = { title: '电网侧监测点', ...res.data.gwData[0] }
|
||||
})
|
||||
// 监测运行统计
|
||||
getGridDiagramRunData(form).then(res => {
|
||||
|
||||
@@ -318,7 +318,7 @@ const options = ref([
|
||||
|
||||
])
|
||||
const technology: any = ref({})
|
||||
const harmonicType = ref('0')
|
||||
const harmonicType = ref('6')
|
||||
const transientNum = ref([0, 0])
|
||||
const options1: any = dictData.getBasicData('Event_Statis').filter(item => {
|
||||
if (item.code == 'Voltage_Dip' || item.code == 'Voltage_Rise' || item.code == 'Short_Interruptions') {
|
||||
|
||||
@@ -91,10 +91,10 @@ const open = (data: anyObj, time: string[], num: number) => {
|
||||
searchBeginTime: time[0],
|
||||
searchEndTime: time[1]
|
||||
})
|
||||
.then(res => {
|
||||
.then(async(res) => {
|
||||
TableData.value = res.data
|
||||
tableRef.value.setCurrentRow(TableData.value[0])
|
||||
currentChangeEvent()
|
||||
await tableRef.value.setCurrentRow(TableData.value[0])
|
||||
await currentChangeEvent()
|
||||
loading.value = false
|
||||
})
|
||||
.catch(() => {
|
||||
@@ -145,7 +145,7 @@ defineExpose({ open })
|
||||
}
|
||||
:deep(.box) {
|
||||
.row--current {
|
||||
background-color: var(--el-color-primary-light-8) !important;
|
||||
//background-color: var(--el-color-primary-light-8) !important;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -17,6 +17,16 @@
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item> -->
|
||||
<el-form-item label="运行状态">
|
||||
<el-select v-model="tableStore.table.params.lineRunFlag" clearable placeholder="请选择运行状态">
|
||||
<el-option
|
||||
v-for="item in runFlagList"
|
||||
:key="item.id"
|
||||
:label="item.name"
|
||||
:value="item.id"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="终端厂家:">
|
||||
<el-select v-model="tableStore.table.params.manufacturer" clearable placeholder="请选择终端厂家">
|
||||
<el-option
|
||||
@@ -256,6 +266,14 @@ const segmentedList = ref([
|
||||
num: 0
|
||||
}
|
||||
])
|
||||
//定义监测点运行状态下拉框数据
|
||||
const runFlagList = [
|
||||
{ id: 0, name: '运行' },
|
||||
{ id: 1, name: '检修' },
|
||||
{ id: 2, name: '停运' },
|
||||
{ id: 3, name: '调试' },
|
||||
{ id: 4, name: '退运' }
|
||||
]
|
||||
const tableStore = new TableStore({
|
||||
url: '/device-boot/dataVerify/getMonitorVerifyData',
|
||||
method: 'POST',
|
||||
@@ -467,7 +485,7 @@ tableStore.table.params.objType = ''
|
||||
tableStore.table.params.alarmDayLimit = 5
|
||||
tableStore.table.params.warnDayLimit = 1
|
||||
tableStore.table.params.manufacturer = ''
|
||||
|
||||
tableStore.table.params.lineRunFlag = 0
|
||||
const quantityClick = (e: any, num: number) => {
|
||||
if (num == 0 && e.ids?.length == 0) return
|
||||
anomalyDetailsRef.value.open(e, time.value, num)
|
||||
|
||||
@@ -121,12 +121,14 @@ const open = (data: anyObj, time: string[], num: number) => {
|
||||
targetKey: num == 0 ? data.key : '',
|
||||
searchBeginTime: time[0],
|
||||
searchEndTime: time[1]
|
||||
}).then(res => {
|
||||
})
|
||||
.then(async res => {
|
||||
TableData.value = res.data
|
||||
tableRef.value.setCurrentRow(TableData.value[0])
|
||||
currentChangeEvent()
|
||||
await tableRef.value.setCurrentRow(TableData.value[0])
|
||||
await currentChangeEvent()
|
||||
loading.value = false
|
||||
}).catch(() => {
|
||||
})
|
||||
.catch(() => {
|
||||
loading.value = false
|
||||
})
|
||||
dialogVisible.value = true
|
||||
@@ -169,7 +171,7 @@ defineExpose({ open })
|
||||
}
|
||||
:deep(.box) {
|
||||
.row--current {
|
||||
background-color: var(--el-color-primary-light-8) !important;
|
||||
// background-color: var(--el-color-primary-light-8) !important;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -82,7 +82,7 @@ const dialogVisible = ref(false)
|
||||
const title: any = ref('')
|
||||
const industry = dictData.getBasicData('Business_Type')
|
||||
const form: any = ref({})
|
||||
const exceeded = dictData.getBasicData('Indicator_Type')
|
||||
const exceeded = dictData.getBasicData('Steady_Statis')
|
||||
const loading = ref(false)
|
||||
const resetForm = () => {
|
||||
form.value = {
|
||||
|
||||
@@ -1,20 +1,20 @@
|
||||
<template>
|
||||
<div class='default-main'>
|
||||
<el-tabs v-model='activeName' type='border-card'>
|
||||
<div class="default-main">
|
||||
<el-tabs v-model="activeName" type="border-card">
|
||||
<!-- <el-tab-pane label="概览" name="1"><overview v-if="activeName == '1'"/></el-tab-pane>
|
||||
<el-tab-pane label="技术监督管理" name="2"><technology v-if="activeName == '2'"/></el-tab-pane> -->
|
||||
|
||||
<el-tab-pane label='预警单列表' name='3'>
|
||||
<earlyWarn :id="id" :businessKey='key' v-if="activeName == '3'" />
|
||||
<el-tab-pane label="预警单列表" name="3" v-if="tabList.includes('3')">
|
||||
<earlyWarn :id="id" :businessKey="key" v-if="activeName == '3'" />
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label='告警单列表' name='4'>
|
||||
<alarm :id="id" :businessKey='key' v-if="activeName == '4'" />
|
||||
<el-tab-pane label="告警单列表" name="4" v-if="tabList.includes('4')">
|
||||
<alarm :id="id" :businessKey="key" v-if="activeName == '4'" />
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang='ts'>
|
||||
<script setup lang="ts">
|
||||
import earlyWarn from './components/earlyWarn.vue'
|
||||
import alarm from './components/alarm.vue'
|
||||
import { ref } from 'vue'
|
||||
@@ -26,15 +26,24 @@ const key = ref('')
|
||||
defineOptions({
|
||||
name: 'supervision/supervision/manage'
|
||||
})
|
||||
|
||||
let tabList = ['3', '4']
|
||||
const activeName: any = ref('3')
|
||||
onMounted(() => {
|
||||
let key = window.location.href.slice(-1)
|
||||
const isNumber = /^\d$/.test(key)
|
||||
// if (isNumber) {
|
||||
// tabList = [key]
|
||||
// activeName.value = key
|
||||
// }
|
||||
})
|
||||
|
||||
|
||||
watch(() => route.query.t, async (newValue, oldValue) => {
|
||||
watch(
|
||||
() => route.query.t,
|
||||
async (newValue, oldValue) => {
|
||||
if (route.fullPath.includes('supervision/supervision/manage')) {
|
||||
let type = (route.query.type as string) || 'null'
|
||||
if (type == 'null') { }
|
||||
else if (type == '0' || type == '3') {
|
||||
if (type == 'null') {
|
||||
} else if (type == '0' || type == '3') {
|
||||
activeName.value = '3'
|
||||
} else {
|
||||
activeName.value = '4'
|
||||
@@ -43,13 +52,14 @@ watch(() => route.query.t, async (newValue, oldValue) => {
|
||||
key.value = (route.query.key as string) || 'null'
|
||||
id.value = id.value + '@' + route.query.t
|
||||
}
|
||||
}, { deep: true, immediate: true })
|
||||
|
||||
},
|
||||
{ deep: true, immediate: true }
|
||||
)
|
||||
|
||||
const layout = mainHeight(63) as any
|
||||
</script>
|
||||
|
||||
<style lang='scss' scoped>
|
||||
<style lang="scss" scoped>
|
||||
.bars_w {
|
||||
width: 100%;
|
||||
height: 500px;
|
||||
|
||||
@@ -1,30 +1,30 @@
|
||||
<template>
|
||||
<div class="default-main">
|
||||
<el-tabs v-model="activeName" type="border-card">
|
||||
<el-tab-pane label="终端入网检测" name="1">
|
||||
<el-tab-pane label="终端入网检测" name="1" v-if="tabList.includes('1')">
|
||||
<terminal :id="id" v-if="activeName == '1'" />
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="监测点台账录入" name="2">
|
||||
<el-tab-pane label="监测点台账录入" name="2" v-if="tabList.includes('2')">
|
||||
<monitorpoint :id="id" v-if="activeName == '2'" />
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="监测点联调列表" name="3">
|
||||
<el-tab-pane label="监测点联调列表" name="3" v-if="tabList.includes('3')">
|
||||
<jointDebugList :id="id" v-if="activeName == '3'" />
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="终端周期检测" name="4">
|
||||
<cycleDetection :id="id" :businessKey='key' v-if="activeName == '4'" />
|
||||
<el-tab-pane label="终端周期检测" name="4" v-if="tabList.includes('4')">
|
||||
<cycleDetection :id="id" :businessKey="key" v-if="activeName == '4'" />
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue'
|
||||
import { ref, onMounted } from 'vue'
|
||||
import { mainHeight } from '@/utils/layout'
|
||||
import terminal from './components/terminainal/index.vue'
|
||||
import monitorpoint from './components/monitorpoint/index.vue'
|
||||
import jointDebugList from './components/jointDebugList/index.vue'
|
||||
import cycleDetection from './components/cycleDetection/index.vue'
|
||||
import { useRoute } from "vue-router";
|
||||
import { useRoute } from 'vue-router'
|
||||
|
||||
defineOptions({
|
||||
name: 'terminalNetwotk'
|
||||
@@ -34,12 +34,23 @@ const activeName = ref('1')
|
||||
const route = useRoute()
|
||||
const id = ref('')
|
||||
const key = ref('')
|
||||
let tabList = ['1', '2', '3', '4']
|
||||
onMounted(() => {
|
||||
let key = window.location.href.slice(-1)
|
||||
const isNumber = /^\d$/.test(key)
|
||||
if (isNumber) {
|
||||
tabList = [key]
|
||||
activeName.value = key
|
||||
}
|
||||
})
|
||||
|
||||
watch(() => route.query.t, async (newValue, oldValue) => {
|
||||
watch(
|
||||
() => route.query.t,
|
||||
async (newValue, oldValue) => {
|
||||
if (route.fullPath.includes('terminalNetwotk')) {
|
||||
let type = (route.query.type as string) || 'null'
|
||||
if (type == 'null') { }
|
||||
else if (type == '1') {
|
||||
if (type == 'null') {
|
||||
} else if (type == '1') {
|
||||
activeName.value = '1'
|
||||
} else if (type == '2') {
|
||||
activeName.value = '2'
|
||||
@@ -52,8 +63,9 @@ watch(() => route.query.t, async (newValue, oldValue) => {
|
||||
key.value = (route.query.key as string) || 'null'
|
||||
id.value = id.value + '@' + route.query.t
|
||||
}
|
||||
}, { deep: true, immediate: true })
|
||||
|
||||
},
|
||||
{ deep: true, immediate: true }
|
||||
)
|
||||
|
||||
const layout = mainHeight(63) as any
|
||||
</script>
|
||||
|
||||
@@ -164,6 +164,6 @@ const addRole = () => {
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
:deep(.row--current) {
|
||||
background-color: var(--el-color-primary-light-8) !important;
|
||||
// background-color: var(--el-color-primary-light-8) !important;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user