6

src/compoments/IntAndScd.vue

@@ -12,12 +12,13 @@
 
 <script>
 import { ref, onMounted } from 'vue';
-import { useRouter } from 'vue-router'
+import { useRouter,useRoute } from 'vue-router'
 export default {
     props: {
     },
     setup(props, { emit }) {
         let router = useRouter()
+        let route = useRoute()
         let listArr = ref([
             {
                 name: "网络结构图",
@@ -38,12 +39,22 @@ export default {
                 router.push("/home/scdMap")
             }
         }
+        function getRoutes(){
+            if(route.path=='/home/scdMap'){
+                selectsNum.value = 1
+            }
+            if(route.path == '/home/int'){
+                selectsNum.value = 0
+            }
+        }
         onMounted(() => {
+            getRoutes()
         })
         return {
             listArr,
             selectsNum,
             spanClick,
+            getRoutes,
         }
     }
 }

src/pages/components/SideMenu.vue

@@ -14,7 +14,7 @@
 
 <script>
 import { ref, onMounted } from 'vue'
-import { useRouter } from 'vue-router'
+import { useRouter, useRoute } from 'vue-router'
 import allImg from "../../../src/utils/allImg.js"
 export default {
     setup() {
@@ -53,6 +53,7 @@ export default {
             },
         ])//路由菜单
         let router = useRouter()//初始化路由实例
+        let route = useRoute()//获取路由信息
         // 路由盒子
         function routeBoxClick(row) {
             // 设置所有菜单项的 isChosen 为 false
@@ -63,12 +64,20 @@ export default {
             row.isChosen = true;
             router.push(row.route)
         }
+        // 拿到路由信息
+        function getRoute() {
+            let path = route.path
+            menuList.value.forEach(item => {
+                item.isChosen = item.route === path;
+            });
+        }
         onMounted(() => {
-
+            getRoute()
         })
         return {
             menuList,//路由菜单
             routeBoxClick,//路由盒子点击事件
+            getRoute,//拿到路由信息
         }
     }
 }

src/pages/home/HomePage.vue

@@ -37,20 +37,20 @@ export default {
 
 <style scoped>
 .bigBox {
-    width: 99vw;
-    height: 97vh;
+    width: 100vw;
+    height: 100vh;
     background-color: #1B2446;
 }
 
 .sideMenu {
     width: 110px;
-    height: 89vh;
+    height: 91vh;
     text-align: center;
     line-height: 100px;
     background-image: url('../../assets/image/leftSide.png');
     background-repeat: no-repeat;
     background-position: 13px 0px;
-    background-size: 80% 98%;
+    background-size: 80% 100%;
 }
 
 .headMenu {
@@ -60,12 +60,12 @@ export default {
 }
 
 .elMain {
-    width: 80vw;
-    height: 89vh;
+    width: 85vw;
+    height: 91vh;
     background-image: url('../../assets/image/rightSide.png');
     background-repeat: no-repeat;
     /* background-position: 20px 20px; */
-    background-size: 99% 98%;
+    background-size: 99% 100%;
     margin: 0;
     padding: 0;
 }

src/pages/login/LoginNow.vue

@@ -12,12 +12,12 @@
             </div>
             <!-- 登录信息 -->
             <div class="formBox">
-                <el-form :model="loginForm" label-width="25px" style="padding-top: 24px;">
-                    <el-form-item>
+                <el-form :model="loginForm" label-width="45px" style="padding-top: 24px;">
+                    <el-form-item label="账号">
                         <el-input class="loginInp" v-model="loginForm.username" placeholder="你的账号..."  maxlength="32" />
                     </el-form-item>
                     <el-form-item label="密码">
-                        <el-input class="loginInp" type="password" v-model="loginForm.userpass"  show-passwordplaceholder="你的密码..." maxlength="32" />
+                        <el-input class="loginInp" type="password" v-model="loginForm.userpass"  show-password placeholder="你的密码..." maxlength="32" />
                     </el-form-item>
                 </el-form>
                 <el-button class="loginBtn" type="primary" @click="sureLog">登录</el-button>
@@ -67,8 +67,8 @@ export default {
                 console.log(res, 'login');
                 if (res.returncode === 200) {
                     isLogin.value = true
-                    localStorage.setItem("loginStatus", isLogin.value)
-                    localStorage.setItem("userInfo",JSON.stringify(res.data))
+                    sessionStorage.setItem("loginStatus", isLogin.value)
+                    sessionStorage.setItem("userInfo",JSON.stringify(res.data))
                     if (typeof(window.windowEx)!="undefined")
                     {
                         windowEx.Size(0,0) //全屏

src/pages/mission/MissionVue.vue

@@ -12,11 +12,14 @@
             <!-- 功能盒子 -->
             <div class="settingBox">
                 <!-- 无检测任务时显示的盒子 -->
-                <NoBox v-if="btnSelect == 0 && taskList.length == 0" :btnSelect="btnSelect" :taskList="taskList"
-                    @backToMission="backToMission"></NoBox>
+                <NoBox v-if="btnSelect == 0 && taskList.length == 0 && sizeNum == 0" :btnSelect="btnSelect"
+                    :taskList="taskList" @backToMission="backToMission"></NoBox>
+                <!-- 有检测任务的盒子 -->
+                <HaveMis v-if="btnSelect == 0 && taskList.length != 0 && sizeNum == 0"  @hmBack="hmBack"></HaveMis>
                 <!-- 新建任务盒子 -->
                 <CreateNew v-if="btnSelect == 1" :btnSelect="btnSelect" :taskList="taskList"></CreateNew>
-
+                <!-- 正在检测盒子 -->
+                <StartMission v-if="btnSelect == 0 && sizeNum == 1"></StartMission>
             </div>
         </div>
     </div>
@@ -26,10 +29,13 @@
 import { ref, onMounted } from 'vue';
 import NoBox from './components/NoMisBox'
 import CreateNew from './components/CreateMis'
+import HaveMis from './components/HaveMis.vue';
+import StartMission from './components/StartMission.vue';
 import task from '@/api/task';
 export default {
     setup() {
         document.documentElement.style.fontSize = (window.innerWidth / 1920 * 12) + "px"
+        let sizeNum = ref(0)//判断是否开始检测。0为未开始，1为开始
         let btnList = ref([
             {
                 name: "当前检测任务",
@@ -44,7 +50,11 @@ export default {
                 value: "3"
             }
         ])//按钮列表
-        let taskList = ref([])//任务表单
+        let taskList = ref([
+            {
+                name:"95588"
+            }
+        ])//任务表单
         let btnSelect = ref(0)//选择的菜单
         function searchAllTask() {
             task.getTask({}).then(res => {
@@ -62,6 +72,9 @@ export default {
         function backToMission(data) {
             btnSelect.value = data
         }
+        function hmBack(data) {
+            sizeNum.value = data
+        }
         onMounted(() => {
             searchAllTask()
         })
@@ -73,11 +86,15 @@ export default {
             searchAllTask,//获取所有检测任务
             taskList,//选择的菜单
             backToMission,//返回的菜单数据
+            sizeNum,//判断是否开始检测
+            hmBack,//开始检测子组件返回
         }
     },
     components: {
         NoBox,
         CreateNew,
+        HaveMis,
+        StartMission
     }
 }
 </script>

src/pages/mission/components/CreateMis.vue

@@ -50,7 +50,7 @@
                 </div>
                 <!-- 装置列表 -->
                 <div class="unitBox">
-
+                    <el-button @click="modelOpen">打开测试</el-button>
                 </div>
             </div>
             <div>
@@ -61,6 +61,7 @@
         <!-- 模态框组件 -->
         <div>
             <LookScd v-if="scdLooks" :scdLooks="scdLooks" @nowBack="nowBack"></LookScd>
+            <ModelTree v-if="treeMool" :treeMool="treeMool" @treeBack="treeBack"></ModelTree>
         </div>
     </div>
 </template>
@@ -70,6 +71,7 @@ import { ref, onMounted, reactive } from 'vue';
 import flashPower from '../../../api/flashPower'
 import scd from "../../../api/scd"
 import LookScd from '../modalComp/LookScd.vue';
+import ModelTree from '../modalComp/ModelTree.vue';
 export default {
     props: {
         btnSelect: {
@@ -111,6 +113,7 @@ export default {
         })//表单验证
         let flashList = ref([])//表单选择的变电站
         let scdLooks = ref(false)//选择scd文件时的显示与否
+        let treeMool = ref(false)//选择模型模态框
         let btnName = ref('点击选择scd文件')
         function searchAllFlash() {
             flashPower.getAllArea({}).then(res => {
@@ -128,7 +131,7 @@ export default {
 
         //变电站下拉框change事件
         function flashChange(e) {
-            searchScd(e)
+            // searchScd(e)
         }
         // 选择scd文件
         function chooseScdFile() {
@@ -148,6 +151,12 @@ export default {
                 })
             }
         }
+        function treeBack(data){
+            treeMool.value = data
+        }
+        function modelOpen(){
+            treeMool.value = true
+        }
         onMounted(() => {
             searchAllFlash()
         })
@@ -163,10 +172,14 @@ export default {
             chooseScdFile,// 选择scd文件
             nowBack, // lookscd组件传回得数据
             btnName,//按钮内修改文字
+            treeMool,//选择模型显示与否
+            treeBack,//modeltree传回数据
+            modelOpen,//选择模型打开模态框
         }
     },
     components: {
         LookScd,
+        ModelTree,//选择模型
     }
 }
 </script>

src/pages/mission/components/HaveMis.vue

@@ -1,21 +1,218 @@
 <template>
     <div>
-
+        <div class="bigBox">
+            <!-- 点击开始检测盒子 -->
+            <div class="startBox">
+                <p class="nowIn">正在检测的任务名称</p>
+                <p class="createDate">创建日期:2000-00-00</p>
+                <img src="../../../assets/image/start_btn.png" alt="">
+                <p class="nowModel">当前模型:<em class="nowEm">110kv线路保护<img src="../../../assets/icon/pencil.png" alt=""></em>
+                </p>
+            </div>
+            <!-- 待检测任务 -->
+            <div class="noReportBox">
+                <div>
+                    <p class="norep">待检测任务</p>
+                </div>
+                <div>
+                    <!-- <template> -->
+                    <div class="intBox" :style="{ 'background-image': `url(${imgBack})` }">
+                        <div class="intBoxOne">
+                            <p class="intOne">
+                                <span>检测任务名称</span>
+                                <span>详情→</span>
+                            </p>
+                            <p>
+                                <img src="../../../assets/icon/white_flash.png" alt="">
+                                <span class="commonSpan">某个变电站</span>
+                            </p>
+                            <p>
+                                <img src="../../../assets/icon//white_clock.png" alt="">
+                                <span class="commonSpan">2000-00-00</span>
+                            </p>
+                        </div>
+                        <!-- 点击检测 -->
+                        <div class="setNow">
+                            <span class="setnowspan" @click="startNow">立即检测</span>
+                        </div>
+                    </div>
+                    <!-- </template> -->
+                </div>
+            </div>
+            <!-- 已完成 -->
+            <div class="noReportBox">
+                <div>
+                    <p class="norep">最近检测任务-已完成</p>
+                </div>
+                <div>
+                    <!-- <template> -->
+                    <div class="intBox" :style="{ 'background-image': `url(${imgBack})` }">
+                        <div class="intBoxOne">
+                            <p class="intOne">
+                                <span>检测任务名称</span>
+                                <span>详情→</span>
+                            </p>
+                            <p>
+                                <img src="../../../assets/icon/white_flash.png" alt="">
+                                <span class="commonSpan">某个变电站</span>
+                            </p>
+                            <p>
+                                <img src="../../../assets/icon//white_clock.png" alt="">
+                                <span class="commonSpan">2000-00-00</span>
+                            </p>
+                        </div>
+                        <!-- 点击检测 -->
+                        <div class="setNow">
+                            <span class="setnowspan" @click="scdLink">scd可视化</span>
+                            <span class="setnowspan">|</span>
+                            <span class="setnowspan">检测结果</span>
+                        </div>
+                    </div>
+                    <!-- </template> -->
+                </div>
+            </div>
+        </div>
     </div>
 </template>
 
 <script>
+import { ref, onMounted, computed, toRefs } from 'vue';
+import { useRouter } from 'vue-router';
+import imgs from '../jscom/img'
 export default {
-    setup () {
-        
-
+    setup(props, { emit }) {
+        let { startNow } = toRefs(props)
+        let imgBack = ref(require('@/assets/image/card_blue.png'))
+        let router = useRouter()
+        let sizeNum = ref(1)
+        function scdLink() {
+            router.push("/home/scdMap")
+        }
+        function getStart() {
+            sizeNum.value = 1
+            emit("hmBack", sizeNum.value)
+        }
         return {
-            
+            imgBack,
+            scdLink,
+            startNow: getStart,
+            sizeNum,
         }
     }
 }
 </script>
 
-<style lang="scss" scoped>
+<style scoped>
+p {
+    margin: 0;
+    padding: 0;
+}
+
+.bigBox {
+    width: 99%;
+    height: 100%;
+    /* border: 1px solid saddlebrown; */
+}
+
+.startBox {
+    width: 320px;
+    height: 335px;
+    margin: 0 auto;
+    /* border: 1px solid black; */
+    text-align: center;
+    line-height: 25px;
+}
+
+.nowIn {
+    /* width: 180px;
+    height: 28px; */
+    font-size: 20px;
+    font-family: Source Han Sans CN-Bold, Source Han Sans CN;
+    font-weight: bold;
+    color: #1A2447;
+    /* line-height: 28px; */
+}
+
+.createDate {
+    /* width: 168px;
+    height: 22px; */
+    font-size: 16px;
+    font-family: Source Han Sans CN-Regular, Source Han Sans CN;
+    font-weight: 400;
+    color: #7484AB;
+    /* line-height: 22px; */
+}
+
+.nowModel {
+    font-size: 18px;
+    font-family: Source Han Sans CN-Regular, Source Han Sans CN;
+    font-weight: 400;
+    color: #1A2447;
+}
+
+.nowEm {
+    font-style: normal;
+    font-size: 18px;
+    font-family: Source Han Sans CN-Medium, Source Han Sans CN;
+    font-weight: 500;
+    color: #255CE7;
+    line-height: 24px;
+    border-bottom: 1px solid #255CE7;
+}
+
+.noReportBox {
+    width: 99%;
+    height: 100%;
+    margin-left: 8px;
+    /* border: 1px solid salmon; */
+}
 
+.norep {
+    font-size: 16px;
+    font-family: Source Han Sans CN-Regular, Source Han Sans CN;
+    font-weight: 400;
+    color: #7484AB;
+}
+
+.intBox {
+    width: 269px;
+    height: 116px;
+    line-height: 20px;
+    background-repeat: no-repeat;
+    background-size: 100% 100%;
+    /* border: 1px solid brown; */
+    /* background-image: url(../../../assets/image/card_blue.png); */
+}
+
+.intBoxOne {
+    padding-top: 5px;
+}
+
+.intOne span:nth-child(2) {
+    margin-left: 100px;
+    font-size: 14px;
+    color: white;
+}
+
+.intOne span:nth-child(1) {
+    margin-left: 5px;
+    font-size: 18px;
+    color: white;
+}
+
+.commonSpan {
+    font-size: 14px;
+    color: white;
+}
+
+.setNow {
+    text-align: center;
+    margin-top: 10px;
+}
+
+.setnowspan {
+    color: white;
+    font-size: 17px;
+    cursor: pointer;
+}
 </style>

src/pages/mission/components/NoMisBox.vue

@@ -5,7 +5,7 @@
             <p style="text-align: center;width: 240px;">当前没有需要检测的任务</p>
             <p class="createMisp" @click="createMis">
                 <img style="width: 20px;height: 20px;" src="../../../assets/icon/create_btn.png" alt="">
-                <span>点击创建任务</span>
+                <span style="font-size: 18px;">点击创建任务</span>
             </p>
         </div>
     </div>
@@ -49,4 +49,9 @@ export default {
     text-align: center;
     line-height: 20px;
 }
+.createMisp{
+    margin-left: 25px;
+    text-align: center;
+    line-height: 10px;
+}
 </style>

src/pages/mission/components/StartMission.vue

@@ -0,0 +1,106 @@
+<template>
+    <div>
+        <div class="bigBox">
+            <!-- 检测任务信息 -->
+            <div class="missionBox">
+                <p class="nowMis">正在检测的任务名称</p>
+                <p class="dateMis">创建日期:2000-00-00</p>
+                <img src="../../../assets/image/start_mission.png" style="width: 200px;height: 20   0px;" alt="">
+                <p class="loading1">请耐心等待检测完成</p>
+                <el-button type="primary">取消</el-button>
+            </div>
+            <!-- 步骤和结果 -->
+            <div class="stepAndEnd">
+                <!-- 步骤条 -->
+                <div class="stepBox">
+                    <StepMethod></StepMethod>
+                </div>
+                <!-- 结果 -->
+                <div class="endBox">
+                    
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+import { ref, onMounted, toRefs } from 'vue';
+import StepMethod from './StepMethod.vue';
+export default {
+    setup() {
+
+
+        return {}
+    },
+    components: {
+        StepMethod
+    }
+}
+</script>
+
+<style  scoped>
+p {
+    margin: 0;
+    padding: 0;
+}
+
+.bigBox {
+    width: 98%;
+    height: calc(100vh - 150px);
+    border: 1px solid black;
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+}
+
+.missionBox {
+    width: 30%;
+    height: 100%;
+    border: 1px solid purple;
+    text-align: center;
+    line-height: 30px;
+}
+
+.stepAndEnd {
+    width: 68%;
+    height: 100%;
+    border: 1px solid brown;
+}
+
+.stepBox {
+    width: 100%;
+    height: calc(100vh - 530px);
+    border: 1px solid red;
+    overflow-y: auto;
+    background-color: #F7F8FB;
+}
+
+.endBox {
+    width: 100%;
+    height: calc(100vh - 420px);
+    border: 1px solid green;
+    margin-top: 20px;
+}
+
+.nowMis {
+    font-size: 20px;
+    font-family: Source Han Sans CN-Bold, Source Han Sans CN;
+    font-weight: bold;
+    color: #1A2447;
+}
+
+.dateMis {
+    font-size: 14px;
+    font-family: Source Han Sans CN-Regular, Source Han Sans CN;
+    font-weight: 400;
+    color: #7484AB;
+}
+
+.loading1 {
+    font-size: 16px;
+    font-family: Source Han Sans CN-Regular, Source Han Sans CN;
+    font-weight: 400;
+    color: #255CE7;
+}
+</style>

src/pages/mission/components/StepMethod.vue

@@ -0,0 +1,49 @@
+<template>
+    <div>
+        <div class="bigBox">
+            <el-steps :active="activeStep" space="10px" finish-status="success" direction="vertical">
+                <el-step v-for="(step, index) in steps" :key="index" :title="step.title">
+                    {{ step.content }}
+                </el-step>
+            </el-steps>
+            <!-- <el-button @click="nextStep">下一步</el-button> -->
+        </div>
+    </div>
+</template>
+  
+<script>
+import { ref,onMounted } from "vue";
+export default {
+    setup() {
+        let activeStep = ref(0); // 当前激活的步骤
+        let steps = ref([       // 步骤的数据
+            { title: "done", content: "这是步骤 1 的内容" },
+            { title: "步骤 2", content: "这是步骤 2 的内容" },
+            { title: "步骤 3", content: "这是步骤 3 的内容" },
+            { title: "步骤 4", content: "这是步骤 3 的内容" },
+            { title: "步骤 5", content: "这是步骤 3 的内容" },
+            { title: "步骤 6", content: "这是步骤 3 的内容" },
+            // 添加更多步骤
+        ])
+        function nextStep() {
+            if (activeStep.value < steps.value.length) {
+                activeStep.value++;
+            }
+        };
+        onMounted(()=>{
+            setInterval(() => {
+                nextStep()
+            }, 1000);
+        })
+        return {
+            activeStep,
+            steps,
+            nextStep,
+        };
+    },
+};
+</script>
+<style>
+
+</style>
+  

src/pages/mission/jscom/img.js

@@ -0,0 +1,6 @@
+import cardBlue from '@/assets/image/card_blue.png'
+import startBtn from '@/assets/image/start_btn.png'
+export default{
+    cardBlue,
+    startBtn,
+}

src/pages/mission/modalComp/ModelTree.vue

@@ -0,0 +1,138 @@
+<template>
+    <div>
+        <div class="bigBox">
+            <el-dialog v-model="dialogVisible" title="选择数据" width="30%" @close="sureclose">
+                <el-tree :data="treeData" show-checkbox node-key="id" default-expand-all :expand-on-click-node="false"
+                    :props="{ class: customNodeClass }" />
+                <template #footer>
+                    <span class="dialog-footer">
+                        <el-button @click="cleanBox">取消</el-button>
+                        <el-button type="primary" @click="sureArr">
+                            确认
+                        </el-button>
+                    </span>
+                </template>
+            </el-dialog>
+        </div>
+
+    </div>
+</template>
+
+<script>
+import { ref, onMounted, toRefs } from 'vue';
+export default {
+    props: {
+        treeMool: {
+            type: Boolean,
+            required: true
+        }
+    },
+    setup(props, { emit }) {
+        let treeData = ref([
+            {
+                id: 1,
+                label: 'Level one 1',
+                children: [
+                    {
+                        id: 4,
+                        label: 'Level two 1-1',
+                        isPenultimate: true,
+                        children: [
+                            {
+                                id: 9,
+                                label: 'Level three 1-1-1',
+                            },
+                            {
+                                id: 10,
+                                label: 'Level three 1-1-2',
+                            },
+                        ],
+                    },
+                ],
+            },
+            {
+                id: 2,
+                label: 'Level one 2',
+                isPenultimate: true,
+                children: [
+                    {
+                        id: 5,
+                        label: 'Level two 2-1',
+                    },
+                    {
+                        id: 6,
+                        label: 'Level two 2-2',
+                    },
+                ],
+            },
+            {
+                id: 3,
+                label: 'Level one 3',
+                isPenultimate: true,
+                children: [
+                    {
+                        id: 7,
+                        label: 'Level two 3-1',
+                    },
+                    {
+                        id: 8,
+                        label: 'Level two 3-2',
+                    },
+                ],
+            },
+        ])
+        let result = props.treeMool
+        let { cleanBox, sureArr } = toRefs(props)
+        let dialogVisible = ref(false)
+        function getLine() {
+            dialogVisible.value = result
+        }
+        function customNodeClass(data, node) {
+            if (data.isPenultimate) {
+                return 'is-penultimate'
+            }
+            return null
+        }
+        function getBack() {
+            dialogVisible.value = false
+            emit("treeBack", dialogVisible.value)
+        }
+        function nowBack() {
+            dialogVisible.value = false
+            emit("treeBack", dialogVisible.value)
+        }
+        function sureclose() {
+            dialogVisible.value = false
+            emit("treeBack", dialogVisible.value)
+        }
+        onMounted(() => {
+            getLine()
+        })
+        return {
+            treeData,
+            customNodeClass,
+            dialogVisible,
+            cleanBox: getBack,
+            sureArr: nowBack,
+            sureclose,
+            getLine,
+            result,
+        }
+    }
+}
+</script>
+
+<style scoped>
+.is-penultimate>.el-tree-node__content {
+    color: #626aef;
+}
+
+.el-tree-node.is-expanded.is-penultimate>.el-tree-node__children {
+    display: flex;
+    flex-direction: row;
+}
+
+.is-penultimate>.el-tree-node__children>div {
+    width: 25%;
+}
+</style>

src/pages/report/ReportVue.vue

@@ -1,19 +1,86 @@
 <template>
     <div>
-        <h1>这里是测试</h1>
+        <div class="bigBox">
+            <div class="tableBox">
+                <el-table :data="reportList" height="250" style="width: 100%" :stripe="true">
+                    <el-table-column label="序号" width="auto">
+                        <template #default="{ $index }">{{ $index + 1 }}</template>
+                    </el-table-column>
+                    <el-table-column prop="name" label="任务名称" width="auto" />
+                    <el-table-column prop="flash" label="变电站" width="auto" />
+                    <el-table-column prop="scd" label="SCD名称" width="auto" />
+                    <el-table-column prop="date" label="检测日期" width="auto" />
+                    <el-table-column fixed="right" label="操作" width="auto">
+                        <template #default>
+                            <el-button text type="primary" size="small" ><el-icon><View /></el-icon>查看</el-button>
+                            <el-button text type="primary" size="small"><el-icon><Download /></el-icon>下载</el-button>
+                        </template>
+                    </el-table-column>
+                </el-table>
+            </div>
+            <!-- 分页组件 -->
+            <div class="pageBox">
+                <Pagination :total="reportList.length"></Pagination>
+            </div>
+        </div>
     </div>
 </template>
 
 <script>
+import { ref, onMounted } from 'vue'
+import Pagination from './components/Pagination.vue'
 export default {
-    setup () {
-        
+    setup() {
+        let reportList = ref([
+            {
+                name:"测试",
+                flash:"测试1",
+                scd:"sss.scd",
+                date:"2000-00-00"
+            },
+            {
+                name:"测试2",
+                flash:"测试2",
+                scd:"sss.scd",
+                date:"2000-00-00"
+            },
+            {
+                name:"测试3",
+                flash:"测试3",
+                scd:"sss.scd",
+                date:"2000-00-00"
+            },
+        ])
 
-        return {}
+        return {
+            reportList,
+        }
+    },
+    components:{
+        Pagination
     }
 }
 </script>
 
-<style lang="scss" scoped>
-
+<style scoped>
+.bigBox{
+    width: 98%;
+    height: 100%;
+    margin: 0 auto;
+    position: relative;
+}
+.tableBox{
+    width: 100%;
+    height: 100%;
+}
+.pageBox{
+    width: 420px;
+    height: auto;
+    position: absolute;
+    top: 65rem;
+    right: 2rem;
+}
+:deep(.el-scrollbar__view){
+    width: 100%;
+}
 </style>

src/pages/report/components/Pagination.vue

@@ -0,0 +1,45 @@
+<template>
+    <div>
+        <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize" :page-sizes="[10, 20, 30, 40]"
+            :small="small" :disabled="disabled" :background="background" layout="total, sizes, prev, pager, next, jumper"
+            :total="realTotal" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
+    </div>
+</template>
+
+<script>
+import { ref, onMounted } from 'vue';
+export default {
+    props: {
+        total: {
+            type: Number,
+            required: true
+        }
+    },
+    setup(props, { emit }) {
+        let realTotal = props.total
+        let currentPage = ref(1)
+        let pageSize = ref(10)
+        let small = ref(false)
+        let background = ref(false)
+        let disabled = ref(false)
+        function handleSizeChange(val) {
+            console.log(`${val} items per page`)
+        }
+        function handleCurrentChange(val) {
+            console.log(`current page: ${val}`)
+        }
+        return {
+            currentPage,
+            pageSize,
+            small,
+            background,
+            disabled,
+            handleSizeChange,
+            handleCurrentChange,
+            realTotal,
+        }
+    }
+}
+</script>
+
+<style lang="scss" scoped></style>

src/pages/setting/SettingPage.vue

@@ -0,0 +1,19 @@
+<template>
+    <div>
+        <h1>这里是基础设置</h1>
+    </div>
+</template>
+
+<script>
+export default {
+    setup () {
+        
+
+        return {}
+    }
+}
+</script>
+
+<style lang="scss" scoped>
+
+</style>

src/pages/system/SystemPage.vue

@@ -0,0 +1,19 @@
+<template>
+    <div>
+        <h1>这里是系统管理</h1>
+    </div>
+</template>
+
+<script>
+export default {
+    setup () {
+        
+
+        return {}
+    }
+}
+</script>
+
+<style lang="scss" scoped>
+
+</style>

src/router/index.js

@@ -55,6 +55,20 @@ const routes = [
                 meta: {
                     name: "scdMap"
                 }
+            },
+            {
+                path:"/home/setting",
+                component:()=>import("@/pages/setting/SettingPage.vue"),
+                meta:{
+                    name:"setting"
+                }
+            },
+            {
+                path:"/home/system",
+                component:()=>import("@/pages/system/SystemPage.vue"),
+                meta:{
+                    name:"system"
+                }
             }
         ]
     }

src/utils/request.js

@@ -77,8 +77,8 @@ service.interceptors.response.use(
                 type: "error"
             })
             router.push("/login")
-            localStorage.removeItem('userInfo')
-            localStorage.removeItem('userToken')
+            sessionStorage.removeItem('userInfo')
+            sessionStorage.removeItem('userToken')
         }
         // Message({
         //   message: '' + error.response.data.message,