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
2025-03-26 19:28:18 +08:00
parent 716e62dd48
commit 4da8024b8c
10 changed files with 1839 additions and 223 deletions
Download Patch File Download Diff File Expand all files Collapse all files

176
src/views/pqs/runManage/runEvaluate/index.vue
View File

@@ -1,5 +1,5 @@
<template>
<div class="default-main">
<div class="default-main" style="position: relative">
<TableHeader date-picker>
<template v-slot:select>
<el-form-item label="对象类型">
@@ -22,14 +22,59 @@
<template v-slot:operation></template>
</TableHeader>
<Map />
<div class="container" :style="height">
<div class="left">
<BorderBox11 :color="[color[1], color[0]]" class="box" backgroundColor="#007D7B24" title="终端统计"></BorderBox11>
<BorderBox11 :color="[color[1], color[0]]" class="box" backgroundColor="#007D7B24" title="终端运行评价"></BorderBox11>
<BorderBox11 :color="[color[1], color[0]]" class="box" backgroundColor="#007D7B24" title="最近一周终端评价趋势"></BorderBox11>
</div>
</div>
<div class="left" :style="height">
<BorderBox13 :color="[color[0], color[0]]" class="box" :backgroundColor="`${color[0]}24`" title="终端统计">
<div class="title">
<span class="iconfont icon-zhongduantongji-xian"></span>
终端统计
</div>
</BorderBox13>
<BorderBox13
:color="[color[0], color[0]]"
class="box"
:backgroundColor="`${color[0]}24`"
title="终端运行评价"
>
<div class="title"> <span class="iconfont icon-daipingjia"></span>终端运行评价</div>
</BorderBox13>
<BorderBox13
:color="[color[0], color[0]]"
class="box"
:backgroundColor="`${color[0]}24`"
title="最近一周终端评价趋势"
>
<div class="title"> <span class="iconfont icon-a-qushi1"></span>最近一周终端评价趋势</div>
</BorderBox13>
</div>
<div class="center" :style="height3">
<BorderBox13
:color="[color[0], color[0]]"
class="box"
:backgroundColor="`${color[0]}24`"
title="异常终端详情"
>
<div class="title"> <span class="iconfont icon-yichangxiangqing-xian"></span>异常终端详情</div>
</BorderBox13>
</div>
<div class="right" :style="height">
<BorderBox13
:color="[color[0], color[0]]"
class="box box-2"
:backgroundColor="`${color[0]}24`"
title="区域终端运行评价"
>
<div class="title"> <span class="iconfont icon-a-ziyuan118"></span>区域终端运行评价</div>
</BorderBox13>
<BorderBox13
:color="[color[0], color[0]]"
class="box"
:backgroundColor="`${color[0]}24`"
title="终端运行评价详情"
>
<div class="title"> <span class="iconfont icon-yunhangxiangqing"></span>终端运行评价详情</div>
</BorderBox13>
</div>
<!-- <div class="container pt10 pl10" :style="height">
<div class="left">
<el-card class="box">
@@ -83,12 +128,13 @@ import TableStore from '@/utils/tableStore'
import { useDictData } from '@/stores/dictData'
import { mainHeight } from '@/utils/layout'
import Map from './components/map.vue'
import { BorderBox11 } from '@dataview/datav-vue3'
import { BorderBox13 } from '@dataview/datav-vue3'
import { useConfig } from '@/stores/config'
const config = useConfig()
const config = useConfig()
const color = config.layout.elementUiPrimary
const dictData = useDictData()
const height = mainHeight(90)
const height = mainHeight(115)
const height3 = mainHeight(115, 3)
//字典获取监督对象类型
const supvObjTypeList = dictData.getBasicData('supv_obj_type')
const tableStore = new TableStore({
@@ -131,54 +177,84 @@ onMounted(() => {
})
</script>
<style lang="scss" scoped>
.container {
// .container {
// display: flex;
// position: absolute;
// top: 70px;
// left: 10px;
// width: 100%;
// z-index: 999;
// .left,
// .center,
// .right {
// display: flex;
// flex-direction: column;
// // background: linear-gradient(to right, #cce5e5, #ffffff00);
// }
// .center {
// flex: 1.5;
// }
// .box {
// width: 500px;
// height: 100%;
// }
// .box-2 {
// flex: 2; /* 占2份高度 */
// }
// }
.left,
.right {
display: flex;
position: absolute;
top: 70px;
left: 10px;
width: 500px;
top: 80px;
width: 25%;
z-index: 999;
.left,
.center,
.right {
display: flex;
flex-direction: column;
flex: 1; /* 平分宽度 */
// background: linear-gradient(to right, #cce5e5, #ffffff00);
}
.center {
flex: 1.5;
}
min-width: 480px;
flex-direction: column;
z-index: 99;
}
.left {
left: 15px;
}
.right {
right: 15px !important;
.box {
width: 100%;
height: 100%;
flex: 1; /* 占2份高度 */
}
.box-2 {
flex: 2; /* 占2份高度 */
}
}
:deep(.el-card) {
border-radius: 10px;
.el-card__header {
padding: 10px;
border-bottom: 1px solid #ebebeb;
display: flex;
align-items: center;
font-weight: 600;
width: 100%;
div {
width: 8px;
height: 8px;
border-radius: 4px;
margin-right: 10px;
background-color: var(--el-color-primary);
}
.box {
padding: 20px 10px 10px;
}
.center {
position: absolute;
bottom: 16px;
left: 50%;
transform: translateX(-50%);
width: 48%;
min-width: 480px;
.box {
flex: 1; /* 占2份高度 */
padding: 20px 10px 10px;
}
}
.title {
// padding: 5px 5px 5px 10px;
background: linear-gradient(to right, var(--el-color-primary), #ffffff00);
font-size: 16px;
// font-weight: bold;
color: #fff;
display: flex;
align-items: center;
.iconfont {
font-size: 22px;
margin: 0 5px 0 10px;
}
}
// .container {
// width: 500px;
// height: 200px;
// }
</style>