冀北项目添加表格导出功能 技术监督添加下载模版上传功能

src/views/pqs/runManage/assessment/index.vue

@@ -8,10 +8,12 @@
     </div>
 </template>
 <script setup lang="ts">
+import { yMethod } from '@/utils/echartMethod'
 defineOptions({
     name: 'runManage/assessment'
 })
 import User from '@/views/pqs/runManage/assessment/components/uese/index.vue'
 import { ref, reactive } from 'vue'
+console.log("🚀 ~ reactive:", yMethod([3.2,3.2]))
 </script>
 <style lang="scss" scoped></style>

src/views/pqs/runManage/cleaning/index.vue

@@ -1,9 +1,8 @@
 <template>
     <div class="default-main">
         <el-tabs type="border-card">
-            <el-tab-pane label="异常数据清洗"><abnormal/></el-tab-pane>
-            <el-tab-pane label="稳态告警统计"><alarm/></el-tab-pane>
-
+            <el-tab-pane label="异常数据清洗"><abnormal /></el-tab-pane>
+            <el-tab-pane label="稳态告警统计"><alarm /></el-tab-pane>
         </el-tabs>
     </div>
 </template>

src/views/pqs/runManage/runEvaluate/index.vue

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