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-26 09:15:20 +08:00
parent 650c42846a
commit ec21d8430f
30 changed files with 2709 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

397
src/views/pqs/qualityInspeection/panorama/components/mapR.vue Normal file
View File

@@ -0,0 +1,397 @@
<template>
<div>
<DatePicker ref="datePickerRef" style="display: none" />
<div class="boxLeft" :class="show ? 'show' : 'noshow'" :style="height">
<!-- 综合评估 -->
<div>
<div class="title">
<span>综合评估</span>
<span class="info" @click="open(0)">
详情
<ArrowRight style="width: 12px" />
</span>
</div>
<div class="evaluate">
<div v-for="item in evaluate" style="width: 40px">
<div>{{ item.name }}</div>
<div style="margin-top: 5px">{{ item.value }}</div>
</div>
</div>
</div>
<!-- 稳态电能质量水平评估 -->
<div>
<div class="title">
<span>稳态电能质量水平评估</span>
<span class="info" @click="open(1)">
详情
<ArrowRight style="width: 12px" />
</span>
</div>
<div :style="boxHeight" class="boxR">
<div class="top">
<span>
监测点越限占比:
<span class="num">65%</span>
</span>
<el-select v-model="value" style="width: 120px" size="small">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
</div>
<MyEChart :style="EchHeight" :options="WTCharts" />
</div>
</div>
<!-- 暂态电能质量水平评价 -->
<div>
<div class="title">
<span>暂态电能质量水平评价</span>
<span class="info" @click="open(2)">
详情
<ArrowRight style="width: 12px" />
</span>
</div>
<div :style="boxHeight" class="boxR">
<div class="top">
<span>
暂态事件严重度:
<span class="num">65%</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>
</div>
<MyEChart :style="EchHeight" :options="WTCharts" />
</div>
</div>
<!-- 技术监督管理 -->
<div>
<div class="title">
<span>技术监督管理(问题数)</span>
<span class="info" @click="open(3)">
详情
<ArrowRight style="width: 12px" />
</span>
</div>
<div :style="boxHeight" 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>
</div>
<el-row style="height: calc(100% - 62px)">
<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>
</div>
</div>
<img
class="imgR"
:style="show ? 'transform: rotate(180deg);' : 'transform: rotate(0deg);'"
@click="show = !show"
src="@/assets/img/QH.png"
/>
<!-- 评估 -->
<Evaluate ref="evaluateRef" />
<!-- 稳态 -->
<steadyState ref="steadyStateRef" />
<!-- 暂态 -->
<temporaryState ref="temporaryStateRef" />
<!-- 技术 -->
<technique ref="techniqueRef" />
</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 { ArrowRight } from '@element-plus/icons-vue'
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'
const dictData = useDictData()
const show = ref(false)
const height = mainHeight(30)
const boxHeight: any = mainHeight(270, 3)
const EchHeight: any = mainHeight(370, 3)
const evaluateRef = ref()
const steadyStateRef = ref()
const datePickerRef = ref()
const temporaryStateRef = ref()
const techniqueRef = ref()
const options = ref([
{
label: '电压偏差',
value: '1'
},
{
label: '频率偏差',
value: '2'
},
{
label: '电压总谐波畸变率',
value: '3'
},
{
label: '电压闪变',
value: '4'
},
{
label: '三相电压不平衡度',
value: '5'
}
])
const options1 = ref([
{
label: '暂降',
value: '1'
},
{
label: '暂升',
value: '2'
},
{
label: '中断',
value: '3'
}
])
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 JDlist = ref([
{
name: '技术监督计划',
value: 5
},
{
name: '用户投诉',
value: 5
},
{
name: '谐波普测',
value: 5
},
{
name: '在线系统',
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'
},
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 open = (e: number) => {
if (e == 0) {
evaluateRef.value.open()
} else if (e == 1) {
steadyStateRef.value.open()
} else if (e == 2) {
temporaryStateRef.value.open()
} else if (e == 3) {
techniqueRef.value.open()
}
}
const info = (row: any) => {
let form = {
id: row.orgNo,
deptIndex: row.orgNo,
orgId: row.orgNo,
ids: [],
statisticalType: dictData.getBasicData('Statistical_Type', ['Report_Type'])[0],
isUpToGrid: row.isUpToGrid,
startTime: datePickerRef.value.timeValue[0],
searchBeginTime: datePickerRef.value.timeValue[0],
endTime: datePickerRef.value.timeValue[1],
searchEndTime: datePickerRef.value.timeValue[1],
type: datePickerRef.value.interval
}
}
defineExpose({ info })
</script>
<style lang="scss" scoped>
.boxLeft {
background-color: #fff;
width: 400px;
padding: 10px;
font-size: 13px;
overflow: hidden;
}
.title {
// height: ;
display: flex;
justify-content: space-between;
font-weight: 550;
height: 22px;
line-height: 22px;
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;
}
.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;
}
.show {
transition: all 0.3s ease;
width: 0px;
padding: 0;
overflow: hidden;
}
.noshow {
width: 400px;
padding: 10px;
transition: all 0.3s ease;
}
</style>