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-05-09 18:00:04 +08:00
parent 06611f527a
commit 6d7f1bca56
46 changed files with 44063 additions and 1586 deletions
Download Patch File Download Diff File Expand all files Collapse all files

184
src/views/pqs/qualityInspeection/panorama/components/cityMapL.vue
View File

@@ -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>