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-28 16:05:03 +08:00
parent 76f41e9a24
commit ef04022f14
153 changed files with 4208 additions and 3480 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -19,116 +19,104 @@
</el-form-item>
</template>
<template v-slot:operation></template>
<template v-slot:operation>
<el-button type="primary" class="ml10" @click="toggle" :icon="leftVisible ? 'el-icon-Hide' : 'el-icon-View'">
{{ leftVisible ? '隐藏' : '显示' }}
</el-button>
</template>
</TableHeader>
<Map />
<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">
<template #header>
<div></div>
<span>终端统计</span>
</template>
</el-card>
<el-card class="box">
<template #header>
<div></div><span>终端运行评价</span>
</template>
</el-card>
<el-card class="box">
<template #header>
<div></div><span>最近一周终端评价趋势</span>
</template>
</el-card>
<transition name="slide-left">
<div class="left" :style="height" v-if="leftVisible">
<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">
<el-card class="box box-2">
<template #header>
<div></div><span>异常详情统计</span>
</template>
</el-card>
<el-card class="box">
<template #header>
<div></div><span>异常终端详情</span>
</template>
</el-card>
</transition>
<transition name="slide-right">
<div class="right" :style="height" v-if="rightVisible">
<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="right">
<el-card class="box box-2">
<template #header>
<div></div><span>区域终端运行评价</span>
</template>
</el-card>
<el-card class="box">
<template #header>
<div></div><span>终端运行评价详情</span>
</template>
</el-card>
</transition>
<transition name="slide-bottom">
<div class="center" :style="height3" v-if="centerVisible">
<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> -->
</transition>
</div>
</template>
<script setup lang="ts">
import { ref, reactive } from 'vue'
import { ref, reactive, onMounted, provide } from 'vue'
import TableHeader from '@/components/table/header/index.vue'
import TableStore from '@/utils/tableStore'
import { useDictData } from '@/stores/dictData'
import { mainHeight } from '@/utils/layout'
import Map from './components/map.vue'
import { BorderBox13 } from '@dataview/datav-vue3'
import { BorderBox13 } from '@kjgl77/datav-vue3'
import { useConfig } from '@/stores/config'
const config = useConfig()
const color = config.layout.elementUiPrimary
@@ -145,11 +133,9 @@ const tableStore = new TableStore({
publicHeight: 480,
column: [
{ title: '序号', width: 80 },
{ title: '监测对象类型', field: 'name3' },
{ title: '监测对象名称', field: 'name4' },
{ title: '电压等级', field: 'name5' },
{
title: '操作',
width: '120',
@@ -171,51 +157,31 @@ const tableStore = new TableStore({
}
})
provide('tableStore', tableStore)
const leftVisible = ref(true)
const rightVisible = ref(true)
const centerVisible = ref(true)
const toggle = () => {
leftVisible.value = !leftVisible.value
rightVisible.value = !rightVisible.value
centerVisible.value = !centerVisible.value
}
onMounted(() => {
// 加载数据
tableStore.index()
})
</script>
<style lang="scss" scoped>
// .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: 80px;
width: 25%;
min-width: 480px;
flex-direction: column;
z-index: 99;
transition: all 0.3s ease;
}
.left {
left: 15px;
@@ -235,14 +201,15 @@ onMounted(() => {
.center {
position: absolute;
bottom: 16px;
left: 50%;
transform: translateX(-50%);
left: 26%;
// transform: translateX(-50%);
width: 48%;
min-width: 480px;
.box {
flex: 1; /* 占2份高度 */
padding: 20px 10px 10px;
}
transition: all 0.3s ease;
}
.title {
// padding: 5px 5px 5px 10px;
@@ -257,4 +224,37 @@ onMounted(() => {
margin: 0 5px 0 10px;
}
}
.toggle-btn {
position: absolute;
z-index: 100;
padding: 5px 10px;
cursor: pointer;
}
.slide-left-enter-active,
.slide-left-leave-active {
transition: all 0.3s ease;
}
.slide-left-enter-from,
.slide-left-leave-to {
transform: translateX(-100%);
opacity: 0;
}
.slide-right-enter-active,
.slide-right-leave-active {
transition: all 0.3s ease;
}
.slide-right-enter-from,
.slide-right-leave-to {
transform: translateX(100%);
opacity: 0;
}
.slide-bottom-enter-active,
.slide-bottom-leave-active {
transition: all 0.3s ease;
}
.slide-bottom-enter-from,
.slide-bottom-leave-to {
transform: translateY(100%);
opacity: 0;
}
</style>