Web/admin-sjzx
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

联调全景展示 省级 详情页

Browse Source
This commit is contained in:
GGJ
2024-04-27 22:18:58 +08:00
parent ec21d8430f
commit 8117b8673b
14 changed files with 680 additions and 482 deletions
Download Patch File Download Diff File Expand all files Collapse all files

305
src/views/pqs/qualityInspeection/panorama/components/mapR.vue
View File

@@ -1,7 +1,6 @@
<template>
<div>
<DatePicker ref="datePickerRef" style="display: none" />
<div class="boxLeft" :class="show ? 'show' : 'noshow'" :style="height">
<div :class="show ? 'show' : 'noshow'">
<div class="boxLeft" :style="height">
<!-- 综合评估 -->
<div>
<div class="title">
@@ -12,9 +11,29 @@
</span>
</div>
<div class="evaluate">
<div v-for="item in evaluate" style="width: 40px">
<div v-for="item in assessList" style="min-width: 50px">
<div>{{ item.name }}</div>
<div style="margin-top: 5px">{{ item.value }}</div>
<div
style="margin-top: 5px"
:style="{
color:
item.score == 3.14159
? ''
: item.score > 4.5
? '#339966'
: item.score > 4
? '#3399ff'
: item.score > 3
? '#ffcc33'
: item.score > 2
? '#ff9900'
: item.score > 0
? '#cc0000'
: ''
}"
>
{{ item.score == 3.14159 ? '/' : item.score }}
</div>
</div>
</div>
</div>
@@ -31,9 +50,11 @@
<div class="top">
<span>
监测点越限占比:
<span class="num">65%</span>
<span class="num">
{{ harmonicLineRatio == 3.14159 ? '暂无数据' : harmonicLineRatio + '%' }}
</span>
</span>
<el-select v-model="value" style="width: 120px" size="small">
<el-select v-model="harmonicType" style="width: 120px" @change="harmonicChange" size="small">
<el-option
v-for="item in options"
:key="item.value"
@@ -42,7 +63,7 @@
/>
</el-select>
</div>
<MyEChart :style="EchHeight" :options="WTCharts" />
<MyEChart :style="EchHeight" :options="harmonicCharts" />
</div>
</div>
<!-- 暂态电能质量水平评价 -->
@@ -58,15 +79,10 @@
<div class="top">
<span>
暂态事件严重度:
<span class="num">65%</span>
<span class="num">{{ transientNum }}%</span>
</span>
<el-select v-model="value" style="width: 120px" size="small">
<el-option
v-for="item in options1"
:key="item.value"
:label="item.label"
:value="item.value"
/>
<el-select v-model="value" style="width: 120px" size="small" @change="transientChange">
<el-option v-for="item in options1" :key="item.id" :label="item.name" :value="item.id" />
</el-select>
</div>
<MyEChart :style="EchHeight" :options="WTCharts" />
@@ -148,7 +164,7 @@ import Evaluate from './details/evaluate.vue'
import steadyState from './details/steadyState.vue'
import temporaryState from './details/temporaryState.vue'
import technique from './details/technique.vue'
import DatePicker from '@/components/form/datePicker/index.vue'
import { getAssessOverview, getEvaluationOverview, getEventLevelEvaluation } from '@/api/device-boot/panorama'
const dictData = useDictData()
const show = ref(false)
const height = mainHeight(30)
@@ -156,10 +172,14 @@ const boxHeight: any = mainHeight(270, 3)
const EchHeight: any = mainHeight(370, 3)
const evaluateRef = ref()
const steadyStateRef = ref()
const datePickerRef = ref()
const formRow: any = ref({})
const temporaryStateRef = ref()
const techniqueRef = ref()
const options = ref([
{
label: '全指标',
value: '0'
},
{
label: '电压偏差',
value: '1'
@@ -181,50 +201,14 @@ const options = ref([
value: '5'
}
])
const options1 = ref([
{
label: '暂降',
value: '1'
},
{
label: '暂升',
value: '2'
},
{
label: '中断',
value: '3'
const harmonicType = ref('0')
const transientNum = ref(0)
const options1: any = dictData.getBasicData('Event_Statis').filter(item => {
if (item.code == 'Voltage_Dip' || item.code == 'Voltage_Rise' || item.code == 'Short_Interruptions') {
return item
}
])
const evaluate = ref([
{
name: '承德',
value: 5
},
{
name: '廊坊',
value: 5
},
{
name: '张家口',
value: 5
},
{
name: '秦皇岛',
value: 5
},
{
name: '唐山',
value: 5
},
{
name: '超高压',
value: 5
},
{
name: '风光储',
value: 5
}
])
})
const assessList: any = ref([])
const JDlist = ref([
{
name: '技术监督计划',
@@ -243,72 +227,150 @@ const JDlist = ref([
value: 5
}
])
const WTCharts = ref({
xAxis: {
name: '%',
type: 'value',
max: 100
},
legend: {
show: false
},
yAxis: {
type: 'category',
data: ['承德', '廊坊', '唐山', '承德', '廊坊', '唐山']
},
grid: {
top: '10px',
left: '30px',
right: '30px',
bottom: '0px'
},
const harmonicCharts = ref()
const harmonicLineRatio: any = ref(0)
const WTCharts = ref({})
options: {
dataZoom: null,
series: [
{
name: '占比',
type: 'bar',
data: [3, 4, 5, 3, 4, 5],
label: {
show: true,
position: 'right',
fontSize: 12,
formatter: function (params: any) {
return `${params.value}%`
}
}
}
]
}
})
const value = ref('')
const value = ref(options1[0].id)
const open = (e: number) => {
if (e == 0) {
evaluateRef.value.open()
evaluateRef.value.open(formRow.value)
} else if (e == 1) {
steadyStateRef.value.open()
steadyStateRef.value.open(formRow.value)
} else if (e == 2) {
temporaryStateRef.value.open()
temporaryStateRef.value.open(formRow.value)
} else if (e == 3) {
techniqueRef.value.open()
techniqueRef.value.open(formRow.value)
}
}
const info = (row: any) => {
let form = {
...row,
id: row.orgNo,
deptIndex: row.orgNo,
orgId: row.orgNo,
ids: [],
statisticalType: dictData.getBasicData('Statistical_Type', ['Report_Type'])[0],
isUpToGrid: row.isUpToGrid,
startTime: datePickerRef.value.timeValue[0],
searchBeginTime: datePickerRef.value.timeValue[0],
endTime: datePickerRef.value.timeValue[1],
searchEndTime: datePickerRef.value.timeValue[1],
type: datePickerRef.value.interval
monitorFlag: row.isUpToGrid
}
formRow.value = form
// 综合评估
getAssessOverview(form).then(res => {
assessList.value = res.data
})
// 稳态电能质量水平评价概览数据
harmonicChange()
// 暂态统计详情
transientChange()
}
const harmonicChange = () => {
getEvaluationOverview({ ...formRow.value, harmonicType: harmonicType.value }).then(res => {
harmonicLineRatio.value = res.data.lineRatio
harmonicCharts.value = {
tooltip: {
formatter: function (params: any) {
return params[0].name + ':' + (params[0].value == 3.14159 ? '暂无数据' : params[0].value) + '%<br/>'
}
},
xAxis: {
name: '%',
type: 'value',
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}`
}
}
}
]
}
}
})
}
const transientChange = () => {
getEventLevelEvaluation({ ...formRow.value, ids: [value.value] }).then(res => {
let data = []
transientNum.value = 0
if (formRow.value.isUpToGrid == 0) {
data = res.data.info
transientNum.value = res.data.data
} else {
transientNum.value = res.data.gwData
data = res.data.gwInfo
}
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}`
}
}
}
]
}
}
})
}
defineExpose({ info })
</script>
@@ -316,8 +378,8 @@ defineExpose({ info })
<style lang="scss" scoped>
.boxLeft {
background-color: #fff;
width: 400px;
padding: 10px;
width: 100%;
padding: 10px 0px 10px 10px;
font-size: 13px;
overflow: hidden;
}
@@ -326,9 +388,9 @@ defineExpose({ info })
// height: ;
display: flex;
justify-content: space-between;
font-weight: 550;
font-size: 16px;
height: 22px;
line-height: 22px;
line-height: 23px;
padding-left: 5px;
width: 100%;
background-image: linear-gradient(to right, #a4e5da, #fff);
@@ -348,6 +410,8 @@ defineExpose({ info })
display: flex;
justify-content: space-around;
text-align: center;
overflow-x: auto;
overflow-y: hidden;
}
.boxR {
border: 1px solid #ccc;
@@ -384,14 +448,17 @@ defineExpose({ info })
cursor: pointer;
}
.show {
transition: all 0.3s ease;
width: 0px;
padding: 0;
overflow: hidden;
transition: all 0.3s ease;
.boxLeft {
padding: 0;
}
}
.noshow {
width: 400px;
padding: 10px;
width: 25%;
transition: all 0.3s ease;
.boxLeft {
padding: 10px 0px 10px 10px;
}
}
</style>