398 lines
11 KiB
Vue
398 lines
11 KiB
Vue
|
<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>
|