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

412
src/views/pqs/qualityInspeection/panorama/components/mapL.vue
View File

@@ -9,235 +9,94 @@
<ArrowRight style="width: 12px" />
</span>
</div>
<!-- <div style="border: 1px solid #ccc; margin-top: 10px">
<div class="infoTop">
<div class="infoL">
<img :src="item.img" />
<div style="display: flex" class="mt2">
<img src="@/assets/img/FGX.png" />
</div>
<div class="cardBox">
<div class="card" style="width: 98%">
<el-row :gutter="20">
<el-col :span="12" class="cor">
<img :src="item.img[0]" />
{{ item.titleT[0] }}：
<span :style="`color: ${item.color[0]}`">{{ item.list[4].numOne }}</span>
</el-col>
<el-col :span="12" class="cor">
<img :src="item.img[1]" />
{{ item.titleT[1] }}：
<span :style="`color: ${item.color[1]}`">{{ item.list[4].numTwo }}</span>
</el-col>
</el-row>
</div>
<div :style="`height:calc(${boxHeight.height} - 90px);width: 100%;overflow-y: auto;`" class="BoxA">
<div class="card-Box">
<div>
<span class="line"></span>
<span class="vol">500kV</span>
</div>
<div class="num">
<div>
{{ item.titleT[0] }}:
<span :style="`color: ${item.color[0]}`">{{ item.list[0].numOne }}</span>
</div>
<div>
{{ item.titleT[1] }}:
<span :style="`color: ${item.color[1]}`">{{ item.list[0].numTwo }}</span>
</div>
</div>
</div>
<div class="infoR">
<div class="top">{{ item.infoT }}</div>
<div class="bottom">
<div v-for="(num, k) in item.num">
<span :style="{ color: item.color[k] }">{{ num.a }}</span>
/
<span :style="{ color: item.color[4] }">{{ num.b }}</span>
<div class="card-Box">
<div>
<span class="line"></span>
<span class="vol">220kV</span>
</div>
<div class="num">
<div>
{{ item.titleT[0] }}:
<span :style="`color: ${item.color[0]}`">{{ item.list[1].numOne }}</span>
</div>
<div>
{{ item.titleT[1] }}:
<span :style="`color: ${item.color[1]}`">{{ item.list[1].numTwo }}</span>
</div>
</div>
</div>
<div class="card-Box">
<div>
<span class="line"></span>
<span class="vol">110kV</span>
</div>
<div class="num">
<div>
{{ item.titleT[0] }}:
<span :style="`color: ${item.color[0]}`">{{ item.list[2].numOne }}</span>
</div>
<div>
{{ item.titleT[1] }}:
<span :style="`color: ${item.color[1]}`">{{ item.list[2].numTwo }}</span>
</div>
</div>
</div>
<div class="card-Box">
<div>
<span class="line"></span>
<span class="vol">350kV</span>
</div>
<div class="num">
<div>
{{ item.titleT[0] }}:
<span :style="`color: ${item.color[0]}`">{{ item.list[3].numOne }}</span>
</div>
<div>
{{ item.titleT[1] }}:
<span :style="`color: ${item.color[1]}`">{{ item.list[3].numTwo }}</span>
</div>
</div>
</div>
</div>
<el-table size="small" :height="tabHeight" :data="item.list">
<el-table-column prop="name" width="60px" label=""></el-table-column>
<el-table-column prop="a" label="500kV" width="63px" align="center"></el-table-column>
<el-table-column prop="b" label="220kV" width="63px" align="center"></el-table-column>
<el-table-column prop="d" label="110KV" width="63px" align="center"></el-table-column>
<el-table-column prop="d" label="35KV" width="63px" align="center"></el-table-column>
<el-table-column prop="d" label="总数" width="63px" align="center"></el-table-column>
</el-table>
</div> -->
<div class="cardBox">
<el-card class="card" style="width: 98%">
<div style="display: flex">
<img :src="item.img" />
<div class="row">
<el-row :gutter="20">
<el-col :span="12">{{ item.titleT[0] }}</el-col>
<el-col :span="12">{{ item.titleT[1] }}</el-col>
</el-row>
<el-row :gutter="20" class="mt4">
<el-col :span="12" style="color: #2dcd28">{{ item.list[4].numOne }}</el-col>
<el-col :span="12" style="color: #bd3124">{{ item.list[4].numTwo }}</el-col>
</el-row>
</div>
</div>
</el-card>
<el-card class="card">
<div style="display: flex; align-items: center">
<img src="@/assets/img/500kv.png" alt="" />
<div class="row">
<el-row>
<el-col :span="12" style="color: #2dcd28">{{ item.list[0].numOne }}</el-col>
<el-col :span="12" style="color: #bd3124">{{ item.list[0].numTwo }}</el-col>
</el-row>
</div>
</div>
</el-card>
<el-card class="card">
<div style="display: flex; align-items: center">
<img src="@/assets/img/220kv.png" />
<div class="row">
<el-row>
<el-col :span="12" style="color: #2dcd28">{{ item.list[1].numOne }}</el-col>
<el-col :span="12" style="color: #bd3124">{{ item.list[1].numTwo }}</el-col>
</el-row>
</div>
</div>
</el-card>
<el-card class="card">
<div style="display: flex; align-items: center">
<img src="@/assets/img/110kv.png" />
<div class="row">
<el-row>
<el-col :span="12" style="color: #2dcd28">{{ item.list[2].numOne }}</el-col>
<el-col :span="12" style="color: #bd3124">{{ item.list[2].numTwo }}</el-col>
</el-row>
</div>
</div>
</el-card>
<el-card class="card">
<div style="display: flex; align-items: center">
<img src="@/assets/img/35kv.png" />
<div class="row">
<el-row>
<el-col :span="12" style="color: #2dcd28">{{ item.list[3].numOne }}</el-col>
<el-col :span="12" style="color: #bd3124">{{ item.list[3].numTwo }}</el-col>
</el-row>
</div>
</div>
</el-card>
</div>
</div>
<!-- <div :style="boxHeight">
<div class="title">
<span>终端统计</span>
<span class="info" @click="open(1)">
详情
<ArrowRight style="width: 12px" />
</span>
</div>
<div class="cardBox">
<el-card class="card" style="width: 98%">
<div style="display: flex">
<img src="@/assets/img/ZD.png" />
<div class="row">
<el-row :gutter="20">
<el-col :span="12">终端个数</el-col>
<el-col :span="12">终端在线率</el-col>
</el-row>
<el-row :gutter="20" class="mt4">
<el-col :span="12" style="color: #2dcd28">480</el-col>
<el-col :span="12" style="color: #bd3124">120</el-col>
</el-row>
</div>
</div>
</el-card>
<el-card class="card">
<div style="display: flex; align-items: center">
<img src="@/assets/img/500kv.png" alt="" />
<div class="row">
<el-row>
<el-col :span="12" style="color: #2dcd28">120</el-col>
<el-col :span="12" style="color: #bd3124">30</el-col>
</el-row>
</div>
</div>
</el-card>
<el-card class="card">
<div style="display: flex; align-items: center">
<img src="@/assets/img/220kv.png" />
<div class="row">
<el-row>
<el-col :span="12" style="color: #2dcd28">120</el-col>
<el-col :span="12" style="color: #bd3124">30</el-col>
</el-row>
</div>
</div>
</el-card>
<el-card class="card">
<div style="display: flex; align-items: center">
<img src="@/assets/img/110kv.png" />
<div class="row">
<el-row>
<el-col :span="12" style="color: #2dcd28">120</el-col>
<el-col :span="12" style="color: #bd3124">30</el-col>
</el-row>
</div>
</div>
</el-card>
<el-card class="card">
<div style="display: flex; align-items: center">
<img src="@/assets/img/35kv.png" />
<div class="row">
<el-row>
<el-col :span="12" style="color: #2dcd28">120</el-col>
<el-col :span="12" style="color: #bd3124">30</el-col>
</el-row>
</div>
</div>
</el-card>
</div>
</div>
<div :style="boxHeight">
<div class="title">
<span>监测点统计</span>
<span class="info" @click="open(2)">
详情
<ArrowRight style="width: 12px" />
</span>
</div>
<div class="cardBox">
<el-card class="card" style="width: 98%">
<div style="display: flex">
<img src="@/assets/img/JCD.png" />
<div class="row">
<el-row :gutter="20">
<el-col :span="12">总数</el-col>
<el-col :span="12">在线</el-col>
</el-row>
<el-row :gutter="20" class="mt4">
<el-col :span="12" style="color: #2dcd28">480</el-col>
<el-col :span="12" style="color: #bd3124">120</el-col>
</el-row>
</div>
</div>
</el-card>
<el-card class="card">
<div style="display: flex; align-items: center">
<img src="@/assets/img/500kv.png" alt="" />
<div class="row">
<el-row>
<el-col :span="12" style="color: #2dcd28">120</el-col>
<el-col :span="12" style="color: #bd3124">30</el-col>
</el-row>
</div>
</div>
</el-card>
<el-card class="card">
<div style="display: flex; align-items: center">
<img src="@/assets/img/220kv.png" />
<div class="row">
<el-row>
<el-col :span="12" style="color: #2dcd28">120</el-col>
<el-col :span="12" style="color: #bd3124">30</el-col>
</el-row>
</div>
</div>
</el-card>
<el-card class="card">
<div style="display: flex; align-items: center">
<img src="@/assets/img/110kv.png" />
<div class="row">
<el-row>
<el-col :span="12" style="color: #2dcd28">120</el-col>
<el-col :span="12" style="color: #bd3124">30</el-col>
</el-row>
</div>
</div>
</el-card>
<el-card class="card">
<div style="display: flex; align-items: center">
<img src="@/assets/img/35kv.png" />
<div class="row">
<el-row>
<el-col :span="12" style="color: #2dcd28">120</el-col>
<el-col :span="12" style="color: #bd3124">30</el-col>
</el-row>
</div>
</div>
</el-card>
</div>
</div> -->
</div>
<img
class="imgL"
@@ -273,7 +132,8 @@ const pointRef = ref()
const list: any = ref([
{
title: '变电站',
img: new URL(`@/assets/img/BDZ.png`, import.meta.url),
img: [new URL(`@/assets/img/BDZ-ZS.png`, import.meta.url), new URL(`@/assets/img/BDZ-GJ.png`, import.meta.url)],
color: ['#000', '#bd3124'],
titleT: ['总数', '告警'],
list: [
{
@@ -299,9 +159,10 @@ const list: any = ref([
]
},
{
title: '终端统计',
img: new URL(`@/assets/img/ZD.png`, import.meta.url),
titleT: ['终端个数', '终端在线率'],
title: '终端',
img: [new URL(`@/assets/img/ZD-ZS.png`, import.meta.url), new URL(`@/assets/img/ZD-ZX.png`, import.meta.url)],
titleT: ['总数', '在线'],
color: ['#000', '#2dcd28'],
list: [
{
numOne: 0,
@@ -326,9 +187,10 @@ const list: any = ref([
]
},
{
title: '监测点统计',
img: new URL(`@/assets/img/JCD.png`, import.meta.url),
title: '监测点',
img: [new URL(`@/assets/img/JCD-ZS.png`, import.meta.url), new URL(`@/assets/img/JCD-ZX.png`, import.meta.url)],
titleT: ['总数', '在线'],
color: ['#000', '#2dcd28'],
list: [
{
numOne: 0,
@@ -356,7 +218,7 @@ const list: any = ref([
const formRow: any = ref({})
const height = mainHeight(30)
const boxHeight = mainHeight(40, 3)
const tabHeight: any = mainHeight(320, 3).height
// 详情
const open = (e: any) => {
if (e == 0) {
@@ -376,7 +238,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
}
formRow.value = form
// 变电站
@@ -402,7 +264,7 @@ const info = (row: any) => {
})
}
onMounted(() => {})
defineExpose({ info })
defineExpose({ info, show })
</script>
<style lang="scss" scoped>
@@ -410,6 +272,7 @@ defineExpose({ info })
background-color: #fff;
width: 100%;
padding: 10px 10px 10px 10px;
border-radius: 5px;
font-size: 13px;
overflow: hidden;
}
@@ -421,15 +284,57 @@ defineExpose({ info })
margin-top: 10px;
width: 48%;
margin-right: 2%;
.cor {
display: flex;
align-items: center;
font-size: 12px;
color: #6d6d6d;
span {
font-size: 16px;
font-weight: 550;
}
}
img {
width: 40px;
height: 40px;
margin: 0 5%;
}
.row {
width: 80%;
text-align: center;
font-size: 16px;
}
.BoxA {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 80px;
.card-Box {
display: grid;
grid-template-rows: 1fr 1fr;
align-items: center;
margin: 5px;
padding: 10px;
background-color: #edededc0;
border-radius: 10px;
max-height: 80px;
.line {
display: inline-block;
width: 0.5rem;
height: 0.5rem;
border-radius: 0.25rem;
background: var(--el-color-primary);
margin-right: 5px;
margin-bottom: 2px;
}
.num {
margin-left: 10px;
display: grid;
text-align: center;
grid-template-columns: 1fr 1fr;
font-size: 12px;
color: #6d6d6d;
span {
font-size: 14px;
font-weight: 550;
}
}
}
}
}
@@ -438,52 +343,27 @@ 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;
}
}
.infoTop {
display: flex;
height: 50px;
padding-right: 10px;
.infoL {
width: 60px;
img {
width: 40px;
margin: 10px;
}
}
.infoR {
flex: 1;
.top {
// margin-top: 2px;
height: 22px;
border-bottom: 2px solid #93dee2;
}
.bottom {
margin-top: 3px;
display: flex;
font-size: 12px;
justify-content: space-around;
}
}
}
.imgL {
position: absolute;
padding: 10px;
top: calc(50% - 80px);
right: -23px;
z-index: 1;
transform: rotate(180deg);
height: 200px;
cursor: pointer;