Merge branch 'master' of http://94.191.59.107:3000/houwenfeng/scd_tools_ui

src/api/scd.js

@@ -71,6 +71,22 @@ function scdAllIed(data){
         params:data,
     })
 }
+// 获取指定scd下的crc效验结果
+function getCrc(data){
+    return request({
+        url:`/screen/scd/crc`,
+        method:"get",
+        params:data
+    })
+}
+// 获取scd详细信息
+function getScdById(data){
+    return request({
+        url:`/screen/scd/info`,
+        method:"get",
+        params:data
+    })
+}
 export default {
     getAllScd,
     getScdMiddle,
@@ -81,4 +97,6 @@ export default {
     stickIed,
     getTikIed,
     scdAllIed,
+    getCrc,
+    getScdById,
 }

src/api/slc/slc.js

@@ -0,0 +1,39 @@
+import request from "@/utils/request"
+//获取指定scd的汇总结果
+function getAllMission(data){
+    return request({
+        url:`/scd/check/sum/result`,
+        method:"get",
+        params:data
+    })
+}
+//按效验等级错误获取结果
+function getErrorByLevel(data){
+    return request({
+        url:`/scd/check/stat/level`,
+        method:"get",
+        params:data
+    })
+}
+// 获取指定SCD的校验结果
+function getScdByIdFromMission(data){
+    return request({
+        url:`/scd/check/resultlist`,
+        method:"get",
+        params:data
+    })
+}
+// 获取指定scd校验类型树
+function getScdByIdTree(data){
+    return request({
+        url:`/screen/scd/checktools/tree`,
+        method:"get",
+        params:data
+    })
+}
+export default{
+    getAllMission,
+    getErrorByLevel,
+    getScdByIdFromMission,
+    getScdByIdTree
+}

src/pages/mission/components/CreateMis.vue

@@ -270,7 +270,7 @@ export default {
                 text: '文件上传中',
                 background: 'rgba(0, 0, 0, 0.7)',
             })
-            cid.fileUpload({ station_id: 861, data_type: 'a_scd', file: e.file }).then(res => {
+            cid.fileUpload({ station_id: newMission.value.flashId - 0, data_type: 'a_scd', file: e.file }).then(res => {
                 scdLoading.value = true
                 if (res.code == 0) {
                     loading.close()
@@ -321,7 +321,7 @@ export default {
         }
         function tagClose(row, num) {
             mx.value.splice(mx.value.indexOf(row), 1)
-            iedName.value = mx.value.map(item => item.ied_name).join(', ');
+            iedName.value = mx.value.map(item => item.ied_name).join(',');
             console.log(iedName, 'iedname');
         }
         function checkTime() {
@@ -359,7 +359,7 @@ export default {
         }
         function iedArrBack(data) {
             mx.value = mx.value.concat(data)
-            iedName.value = mx.value.map(item => item.ied_name).join(', ');
+            iedName.value = mx.value.map(item => item.ied_name).join(',');
         }
 
         onMounted(() => {

src/pages/mission/components/HaveMis.vue

@@ -17,24 +17,25 @@
           <p class="norep">待检测任务</p>
         </div>
         <div style="display: flex;justify-content: flex-start;align-items: center;overflow-x: auto;">
-          <div class="intBox" v-if="nowRunList.name" :style="setImg(nowRunList)">
+          <div :class="setImg(nowRunList)" v-if="nowRunList.name">
             <div class="intBoxOne">
               <p class="intOne">
-                <span style="font-size: 18px;color: #1A2447;">{{ nowRunList.name }}</span>
+                <span style="font-size: 18px;color: white;">{{ nowRunList.name }}</span>
                 <span style="font-size: 12px;" @click="deldel(nowRunList)">删除</span>
               </p>
               <p>
-                <img style="width: 15px;height: 15px;" src="../../../assets/icon/flash_darkBlue.png" alt="" />
-                <span style="font-size: 12px;color:#7484AB" class="commonSpan">{{ nowRunList.station_name }}</span>
+                <img style="width: 15px;height: 15px;" src="../../../assets/icon/white_flash.png" alt="" />
+                <span style="font-size: 12px;color:white" class="commonSpan">{{ nowRunList.station_name }}</span>
               </p>
               <p>
-                <img style="width: 15px;height: 15px;" src="../../../assets/icon/clock_darkBlue.png" alt="" />
-                <span style="font-size: 12px;color:#7484AB" class="commonSpan">{{ nowRunList.ct }}</span>
+                <img style="width: 15px;height: 15px;" src="../../../assets/icon/white_clock.png" alt="" />
+                <span style="font-size: 12px;color:white" class="commonSpan">{{ nowRunList.ct }}</span>
               </p>
             </div>
             <!-- 点击检测 -->
             <div class="setNow">
-              <span style="font-size: 16px;color:green" class="setnowspan" @click="startNow(nowRunList)">正在检测中<em v-loading="emLoading"></em></span>
+              <span style="font-size: 16px;color:white" class="setnowspan" @click="startNow(nowRunList)">检测中<em
+                  v-loading="emLoading"></em></span>
             </div>
           </div>
           <div class="intBox" v-for="(item, index) in misList" :style="setImg(item, index)">
@@ -82,7 +83,7 @@
             </div>
             <!-- 点击检测 -->
             <div class="setNow">
-              <span class="setnowspan" @click="goNetStructPicture">scd可视化</span>
+              <span class="setnowspan" @click="goNetStructPicture(item)">scd可视化</span>
               <span class="setnowspan">|</span>
               <span class="setnowspan">检测结果</span>
             </div>
@@ -101,7 +102,7 @@ import imgs from "../jscom/img";
 import { ElLoading, ElMessage } from "element-plus";
 export default {
   setup(props, { emit }) {
-    let imgBack = ref(require("@/assets/image/card_blue.png"));
+    let imgBack = ref("@/assets/image/card_blue.png");
     let router = useRouter();
     let sizeNum = ref(1);
     let misList = ref([])//待检测任务列表
@@ -114,19 +115,20 @@ export default {
     function startNow(row, num) {
       if (row.name == null || row.name == '' || row.name == undefined) {
         ElMessage({
-          message:"暂无检测任务",
-          type:"info"
+          message: "暂无检测任务",
+          type: "info"
         })
       } else {
         sizeNum.value = 1;
         emit("hmBack", sizeNum.value, row);
       }
     }
-    function goNetStructPicture() {
+    function goNetStructPicture(row) {
+      console.log(row, 'push');
       router.push({
         path: "/home/netStructPicture",
         query: {
-          id: 4000002,
+          id: row.scd_id,
           name: 'UnitTest_检测任务',
         },
       });
@@ -175,8 +177,6 @@ export default {
           return
         } else {
           nowRunList.value = res.data[0]
-          console.log(res.data, 'res.data');
-          console.log(nowRunList.value, 'now');
         }
       })
     }
@@ -187,9 +187,9 @@ export default {
     }
     function setImg(row, num) {
       if (row.state == "1") {
-        return { 'background-image': `url(${imgBack})` }
+        return "intBoxCopy"
       } else {
-        return {}
+        return "intBox"
       }
     }
     onMounted(() => {
@@ -207,7 +207,7 @@ export default {
       nowRunList,//正在检测任务列表
       setImg,
       passList,//已完成列表
-      emLoading
+      emLoading,
     };
   },
 };
@@ -299,7 +299,18 @@ p {
   /* border: 1px solid brown; */
   /* background-image: url(../../../assets/image/card_blue.png); */
 }
-
+.intBoxCopy{
+  width: 269px;
+  height: 116px;
+  line-height: 20px;
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+  margin: 15px 15px;
+  background-color: #F6F9FF;
+  border-radius: 5px;
+  box-shadow: inset 0px -3px 3px 0px #C8D4EC;
+  background-image: url(../../../assets/image/card_blue.png);
+}
 .intBoxOne {
   padding-top: 5px;
 }
@@ -334,4 +345,11 @@ p {
   font-size: 17px;
   cursor: pointer;
 }
+
+:deep(.el-loading-spinner .circular) {
+  width: 16px;
+}
+:deep(.el-loading-spinner .path){
+  stroke: #ffffff;
+}
 </style>

src/pages/mission/components/StartMission.vue

@@ -69,7 +69,6 @@ export default {
                                     content: item.step_name
                                 }
                             })
-                            // clearInterval(countTime)
                         }
                     })
                 }, 2000)

src/pages/netStructPicture/components/CidTree.vue

@@ -23,12 +23,16 @@
 </template>
 
 <script>
-import { ref, onMounted, toRefs } from 'vue';
+import { ref, onMounted, toRefs, watch } from 'vue';
 import cid from "@/api/cid/cid"
 import scdCheck from '@/api/scdCheck/scdCheck';
+import { stringify } from 'uuid';
 export default {
     props: {
-
+        nowScdId: {
+            type: Number || String,
+            required: true
+        }
     },
     setup(props, { emit }) {
         let tagList = ref([])
@@ -75,10 +79,20 @@ export default {
             label: "label",
             children: "children"
         })
+        let scdId = ref("")//传递的scdid
+        watch(() => props.nowScdId, (newVal) => {
+            scdId.value = newVal
+        })
+        function reload() {
+            scdId.value = props.nowScdId
+            cid.getAll({ scd_id: scdId.value - 0, ied_name: "" }).then(res => {
+                tagList.value = res.data
+            })
+        }
         function tagClick(row, num) {
             tagChoose.value = num
             cid.findFile({
-                scd_id: 488000132,
+                scd_id: scdId.value - 0,
                 ied_name: row.desc,
                 pageno: 1,
                 pagesize: 10,
@@ -90,11 +104,10 @@ export default {
                 pageindex: 1,
                 pagesize: 10,
                 station_id: 861,
-                scd_id: 488000132,
+                scd_id: scdId.value - 0,
                 is_checkin: 2,
                 ied_name: row.ied_name
             }).then(res => {
-                console.log(res,'sss222');
                 let a = res.data.filter(item => item.type_name == 'CID')
                 if (a.length > 0) {
                     needName.value = a[0].file_name
@@ -106,9 +119,7 @@ export default {
             console.log(e, 'eee');
         }
         onMounted(() => {
-            cid.getAll({ scd_id: 488000132, ied_name: "" }).then(res => {
-                tagList.value = res.data
-            })
+            reload()
         })
         return {
             tagList,//标签数据
@@ -118,6 +129,7 @@ export default {
             defaultProps,//树形默认展示
             handleNodeClick,//树形点击事件
             needName,//返回父组件的名称
+            scdId,//传递的scdid
         }
     }
 }

src/pages/netStructPicture/components/scdMap.vue

@@ -103,6 +103,7 @@ export default {
         let lineList = []//线条显示
         let lookType = ref(0)//0为查看整体，1为新增，2为修改，3为删除
         watch(() => props.antherBack, (newVal) => {
+            if(newVal == null) return
             arrNew.value = newVal//监听传递数据变化
             if (!arrNew.value || !newVal) {
                 return

src/pages/netStructPicture/index.vue

@@ -17,7 +17,7 @@
         <div class="disappear" v-if="activeName == 'first' && activeNav == 0">
           <!-- 左侧树形数据 -->
           <div style="width: 15%;">
-            <CidTree @treeBack="treeBack"></CidTree>
+            <CidTree :nowScdId="nowScdId" @treeBack="treeBack"></CidTree>
           </div>
           <!-- 右侧展示图 -->
           <div style="width: 85%; height: calc(100vh - 280px);position: relative;">
@@ -61,6 +61,8 @@
             </div>
           </div>
         </div>
+        <CrcCheck v-if="activeName == 'first' && activeNav == 3" :nowScdId="nowScdId"></CrcCheck>
+        <SlcCheck v-if="activeName == 'first' && activeNav == 2" :nowScdId="nowScdId"></SlcCheck>
       </el-tab-pane>
       <el-tab-pane label="SCD可视化" name="second">
         <scd-visual></scd-visual>
@@ -78,11 +80,14 @@ import CidTree from "./components/CidTree.vue";
 import Gsix from "./components/Gsix.vue";
 import scdTree from "./components/scdTree.vue";
 import scdMap from "./components/scdMap.vue"
+import CrcCheck from "./newTitle/CrcCheck"
+import SlcCheck from "./newTitle/SlcCheck.vue";
 import { useRoute } from 'vue-router';
 import cid from "@/api/cid/cid";
 import { ElMessage } from "element-plus";
 import systemRow from "@/api/systemRow";
 import scdCheck from "@/api/scdCheck/scdCheck";
+let route = useRoute()
 const activeName = ref("first");//默认展示网络结构图
 const navtopData = ref([
   { name: "CID一致性校核" },
@@ -98,12 +103,16 @@ let upName = ref('')//上传的文件名称
 let arrName = ref('')//基准的文件名称
 let upFile = ref({})//上传文件流
 let backId = ref('')//返回id
+let nowScdId = ref('')//路由传参的scdid
 let antherBack = ref([])
 watch(() => antherBack.value, (newVal) => {
   antherBack.value = newVal
 }, {
   deep: true
 })
+const reload = () => {
+  nowScdId.value = route.query.id
+}
 const clickNav = (navIndex) => {  //点击导航栏事件
   activeNav.value = navIndex;
 }
@@ -126,15 +135,15 @@ const closeX = () => {
 const nowUpload = (file, e) => {
   upFile.value = file.file
   upName.value = file.file.name
-  cid.fileUpload({ station_id: 861, file: upFile.value,data_type:"cid" }).then(res => {
+  cid.fileUpload({ station_id: 861, file: upFile.value, data_type: "cid" }).then(res => {
     if (res.code == 0) {
       let idp = `${file.file.uid},${backId.value}`
       ElMessage({
         type: 'success',
         message: "上传成功!"
       })
-      scdCheck.scdStart({type:'cid',station_id:861,ids:idp}).then(res=>{
-        console.log(res,'show');
+      scdCheck.scdStart({ type: 'cid', station_id: 861, ids: idp }).then(res => {
+        console.log(res, 'show');
       })
     }
   })
@@ -164,7 +173,8 @@ const portExcel = () => {
     }
   })
 }
-onMounted(()=>{
+onMounted(() => {
+  reload()
 })
 </script>
 

src/pages/netStructPicture/newTitle/CrcCheck.vue

@@ -0,0 +1,132 @@
+<template>
+    <div class="bigBox">
+        <div class="header">
+            <h1>{{ needFlashName + "——" + needScdName + "——CRC效验结果" }}</h1>
+        </div>
+        <div class="antherHeader">
+            <span style="margin-right: 10px;">SCD文件CRC：<em>{{ scdAndCrc.scdcrc }}</em></span>
+            <span style="margin-right: 10px;">SCD效验CRC：<em>{{ scdAndCrc.checkcrc }}</em></span>
+            <span >效验结果：<em :style="{ color: isTrue ? 'green' : 'red' }">{{ isTrue?'一致':"不一致" }}</em></span>
+        </div>
+        <div class="table">
+            <el-table :data="tableList" stripe style="width: 100%;height: calc(100vh - 260px);">
+                <el-table-column width="80" label="序号">
+                    <template #default="scope">
+                        {{ scope.$index + 1 }}
+                    </template>
+                </el-table-column>
+                <el-table-column prop="iedname" label="装置名称" width="120" />
+                <el-table-column prop="ieddesc" label="装置描述" :show-overflow-tooltip="true" width="260" />
+                <el-table-column prop="manufacturer" label="厂家" width="100" />
+                <el-table-column prop="type" label="型号" />
+                <el-table-column prop="iedversion" label="ied版本" :show-overflow-tooltip="true" />
+                <el-table-column prop="" label="CCD CRC">
+                    <template #default="scope">
+                        无
+                    </template>
+                </el-table-column>
+                <el-table-column prop="scdcrc" label="SCD CRC" />
+                <el-table-column prop="checkcrc" label="效验CRC" />
+                <el-table-column label="效验结果">
+                    <template #default="scope">
+                        <span :style="{ color: scope.row.scdcrc === scope.row.checkcrc ? 'green' : 'red' }">
+                            {{ scope.row.scdcrc === scope.row.checkcrc ? '一致' : '不一致' }}
+                        </span>
+                    </template>
+                </el-table-column>
+            </el-table>
+        </div>
+    </div>
+</template>
+
+<script>
+import { ref, onMounted, watch, onBeforeUnmount, toRefs } from 'vue';
+import scd from "@/api/scd"
+import { ElMessage, ElLoading } from 'element-plus';
+export default {
+    props: {
+        nowScdId: {
+            type: String || Number,
+            required: true
+        }
+    },
+    setup(props, { emit }) {
+        let needScdId = ref("")//需要的scdid
+        let needScdName = ref("")//需要的scd名称
+        let needFlashName = ref("")//需要的变电站名称
+        let tableList = ref([])//crc效验结果表格数据
+        let scdAndCrc = ref({})//scdcrc
+        let isTrue = ref(false)//一致或不一致
+        watch(() => props.nowScdId, (newVal) => {
+            needScdId.value = newVal
+        })
+        function reload() {
+            needScdId.value = props.nowScdId
+            let loading = ElLoading.service({
+                lock: true,
+                text: '正在查询数据',
+                background: 'rgba(0, 0, 0, 0.7)',
+            })
+            Promise.all([
+                scd.getCrc({ scd_id: needScdId.value - 0 }),
+                scd.getScdById({ scd_id: needScdId.value - 0 })
+            ]).then(([res, resTo]) => {
+                if (res.data == null || resTo.data == null) {
+                    loading.close()
+                    ElMessage({
+                        message: "暂无数据",
+                        type: "info"
+                    })
+                    return
+                } else {
+                    tableList.value = res.data.list
+                    needScdName.value = resTo.data.scd_name
+                    needFlashName.value = resTo.data.station_name
+                    scdAndCrc.value = res.data.scdcrc
+                    const isConsistent = tableList.value.every(item => {
+                        return item.scdcrc === item.checkcrc;
+                    });
+                    isTrue.value = isConsistent
+                    loading.close()
+                }
+            })
+        }
+        onMounted(() => {
+            reload()
+        })
+        return {
+            reload,//初始化组件
+            needScdId,//需要的scdid
+            needScdName,//需要的scd名称
+            tableList,//crc效验结果表格数据
+            needFlashName,//需要的变电站名称
+            scdAndCrc,//scdcrc
+            isTrue,//一致或不一致
+        }
+    }
+}
+</script>
+
+<style scoped>
+em{
+    list-style: none;
+    font-style: normal;
+}
+.bigBox {
+    width: 97%;
+    height: calc(100vh - 230px);
+    margin-left: 18px;
+}
+
+.header {
+    width: 100%;
+    height: auto;
+    text-align: center;
+}
+
+.antherHeader {
+    width: 100%;
+    height: auto;
+    text-align: center;
+}
+</style>

src/pages/netStructPicture/newTitle/SlcCheck.vue

@@ -0,0 +1,193 @@
+<template>
+    <div class="bigBox">
+        <div class="header">
+            <h1>{{ flashName + '——' + scdName + '——SLC效验' }}</h1>
+        </div>
+        <div class="main">
+            <div class="treeBox">
+                <el-tree :data="treeData" :props="defaultProps" @node-click="handleNodeClick" />
+            </div>
+            <div class="tableBox">
+                <div class="allMis">
+                    <el-button type="primary" plain>导出所有结果</el-button>
+                    <el-button style="margin-right: 10px;" type="primary" plain>导出当前节点结果</el-button>
+                    <span style="margin-right: 10px;">全部：{{ errorNum - 0 + warningNum - 0 }}</span>
+                    <span style="margin-right: 10px;">错误：<em style="color: red;">{{ errorNum ? errorNum : 0 }}</em></span>
+                    <span style="margin-right: 10px;">告警：<em style="color: green;">{{ warningNum ? warningNum : 0 }}</em></span>
+                </div>
+                <div class="table">
+                    
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+import { ref, onMounted, toRefs, watch, reactive } from "vue"
+import scd from "@/api/scd";
+import slc from "@/api/slc/slc"
+import systemRow from "@/api/systemRow";
+import Pagnation from "../utils/Pagnation.vue";
+import { ElMessage, ElLoading } from "element-plus";
+export default {
+    props: {
+        nowScdId: {
+            type: String,
+            required: true
+        }
+    },
+    setup(props, { emit }) {
+        let scdid = ref('')//scdid
+        let scdName = ref('')//scd名称
+        let flashName = ref("")//变电站名称
+        let treeData = ref([
+            // {
+            //     label: "1号主变差动",
+            //     children: [],
+            //     pids: '6871',
+            //     name: "area"
+            // }, {
+            //     label: '一号主变本体',
+            //     children: [],
+            //     pids: "6875",
+            //     name: "area"
+            // }, {
+            //     label: "公用",
+            //     children: [],
+            //     pids: "6890",
+            //     name: "area"
+            // }, {
+            //     label: "SCL",
+            //     pids: "572000161",
+            //     children: [],
+            //     name: "SCL"
+            // }
+        ])//tree数据
+        let defaultProps = ref({
+            label: "title",
+            id: "id",
+            pids: "pid",
+            children: "children",
+            area: "area_id"
+        })
+        let errorNum = ref(0)
+        let warningNum = ref(0)
+        watch(() => props.nowScdId, (newVal) => {
+            scdid.value = newVal
+        })
+        let indexs = 0
+        function reload() {
+            scdid.value = props.nowScdId
+            let loading = ElLoading.service({
+                text: "等待数据中",
+                lock: true,
+                background: "rgba(0, 0, 0, 0.7)"
+            })
+            Promise.all([
+                scd.getScdById({ scd_id: scdid.value - 0 }),//获取scd详细信息scd1
+                slc.getAllMission({ scd_id: scdid.value - 0 }),//slc1
+                slc.getErrorByLevel({ scd_id: scdid.value - 0 }),//获取报错总数slc2
+                slc.getScdByIdFromMission({ pageno: 1, pagesize: 20, scd_id: scdid.value - 0 }),//slc3
+                slc.getScdByIdTree({ scd_id: scdid.value - 0 }),//获取tree数据slc4
+                systemRow.getChildren({ code: "voltage_level" })
+            ]).then(([scd1, slc1, slc2, slc3, slc4, flash]) => {
+                if (scd1.data != null) {
+                    scdName.value = scd1.data.scd_name
+                    flashName.value = scd1.data.station_name
+                }
+                if (slc4.data != null) {
+                    treeData.value = slc4.data
+                }
+                if (slc2.data != null) {
+                    errorNum.value = slc2.data[0].cnt//错误
+                    warningNum.value = slc2.data[1].cnt//告警
+                }
+                // treeData.value[3].children = slc4.data.slice(0, 3).map(item => {
+                //     return {
+                //         label: item.title,
+                //         id: item.id,
+                //         pids: item.pid
+                //     }
+                // })
+                // let a = slc4.data.map(item => {
+                //     return flash.data.find(param => item.voltage_level - 0 === param.id - 0);
+                // })
+                // a = a.filter((item, index, arr) => item !== undefined && arr.indexOf(item) === index);
+                // a.forEach(item => {
+                //     // 判断 treeData.value[3].children 是否已经存在相同的元素
+                //     const existingItem = treeData.value[3].children.find(child => child.id === item.id);
+                //     if (!existingItem) {
+                //         // 如果不存在相同元素，则将当前项插入到 children 中
+                //         treeData.value[3].children.splice(indexs, 0, {
+                //             label: item.name,
+                //             id: item.id,
+                //         });
+                //         indexs++; // 插入位置后移
+                //     }
+                // });
+                loading.close()
+            })
+        }
+        function handleNodeClick(e) {
+            console.log(e, 'hand');
+        }
+        onMounted(() => {
+            reload()
+        })
+        return {
+            scdid,//scdid
+            reload,//初始化组件
+            scdName,//scd名称
+            flashName,//变电站名称
+            treeData,//树形数据
+            defaultProps,//树形展示
+            handleNodeClick,//树形每行点击
+            errorNum,//错误数量
+            warningNum,//告警数量
+        }
+    },
+    components: {
+        Pagnation,
+    }
+}
+</script>
+
+<style scoped>
+em{
+    font-style: normal;
+}
+.bigBox {
+    width: 97%;
+    height: calc(100vh - 200px);
+    margin-left: 18px;
+}
+
+.header {
+    width: 100%;
+    height: auto;
+    text-align: center;
+}
+
+.main {
+    width: 100%;
+    height: calc(100vh - 260px);
+    margin: 0 auto;
+    border: 1px solid salmon;
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+}
+
+.treeBox {
+    width: 20%;
+    height: calc(100vh - 260px);
+    overflow-y: auto;
+    overflow-x: hidden;
+}
+
+.tableBox {
+    width: 80%;
+    height: calc(100vh - 260px);
+}
+</style>

src/pages/netStructPicture/utils/Pagnation.vue

@@ -0,0 +1,37 @@
+<template>
+    <div>
+        <el-pagination v-model:current-page="currentPage" :page-size="100" background layout="total, prev, pager, next"
+            :total="1000" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
+    </div>
+</template>
+
+<script>
+import { ref, onMounted, watch, toRefs } from 'vue';
+import { ElMessage } from 'element-plus';
+export default {
+    props: {
+
+    },
+    setup() {
+        function reload() {
+
+        }
+        function handleSizeChange(e) {
+            console.log(e, 'size');
+        }
+        function handleCurrentChange(e) {
+            console.log(e, 'current');
+        }
+        onMounted(() => {
+            reload()
+        })
+        return {
+            reload,//初始化组件
+            handleCurrentChange,
+            handleSizeChange,
+        }
+    }
+}
+</script>
+
+<style lang="scss" scoped></style>

vue.config.js

@@ -1,17 +1,20 @@
-const { defineConfig } = require('@vue/cli-service')
+const {
+    defineConfig
+} = require('@vue/cli-service')
 module.exports = defineConfig({
-  transpileDependencies: true
+    transpileDependencies: true
 })
 module.exports = {
-  devServer: {
-    proxy: {
-      '/api': {
-        target: 'http://8.142.173.95:9527', // 设置你的后端 API 地址
-        changeOrigin: true, // 允许跨域
-        // pathRewrite: {
-        //   '^/api': '', // 重写请求路径，去掉 '/api'
-        // },
-      },
+    devServer: {
+        proxy: {
+            '/api': {
+                // target: 'http://127.0.0.1:9527', // 设置你的后端 API 地址
+                target: 'http://8.142.173.95:9527', // 设置你的后端 API 地址
+                changeOrigin: true, // 允许跨域
+                // pathRewrite: {
+                //   '^/api': '', // 重写请求路径，去掉 '/api'
+                // },
+            },
+        },
     },
-  },
-};
+};