部门管理添加

public/iconFont/iconfont.css

 @font-face {
   font-family: "iconfont"; /* Project id 5072634 */
-  src: url('iconfont.woff2?t=1764314450961') format('woff2'),
-       url('iconfont.woff?t=1764314450961') format('woff'),
-       url('iconfont.ttf?t=1764314450961') format('truetype');
+  src: url('//at.alicdn.com/t/c/font_5072634_8c3g9zvwtne.woff2?t=1764660705764') format('woff2'),
+       url('//at.alicdn.com/t/c/font_5072634_8c3g9zvwtne.woff?t=1764660705764') format('woff'),
+       url('//at.alicdn.com/t/c/font_5072634_8c3g9zvwtne.ttf?t=1764660705764') format('truetype');
 }
 
 .iconfont {
@@ -13,6 +13,26 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+.icon-gengduo:before {
+  content: "\e73a";
+}
+
+.icon-shanchu:before {
+  content: "\e8c1";
+}
+
+.icon-bianji:before {
+  content: "\e607";
+}
+
+.icon-tianjia:before {
+  content: "\e6ea";
+}
+
+.icon-gedian:before {
+  content: "\e603";
+}
+
 .icon-gongzuotai:before {
   content: "\e605";
 }
@@ -20,4 +40,3 @@
 .icon-quanping:before {
   content: "\e62f";
 }
-

public/iconFont/iconfont.js

-window._iconfont_svg_string_5072634='<svg><symbol id="icon-gongzuotai" viewBox="0 0 1024 1024"><path d="M837.12 112.64H161.28c-43.52 0-76.8 35.84-76.8 76.8v468.48c0 43.52 35.84 76.8 76.8 76.8h276.48v156.16H215.04c-15.36 0-25.6 12.8-25.6 25.6 0 15.36 12.8 25.6 25.6 25.6h570.88c15.36 0 25.6-12.8 25.6-25.6 0-15.36-12.8-25.6-25.6-25.6h-243.2v-156.16h294.4c43.52 0 76.8-35.84 76.8-76.8V189.44c2.56-43.52-33.28-76.8-76.8-76.8z m25.6 545.28c0 15.36-12.8 25.6-25.6 25.6H161.28c-15.36 0-25.6-12.8-25.6-25.6V189.44c0-15.36 12.8-25.6 25.6-25.6h675.84c15.36 0 25.6 12.8 25.6 25.6v468.48z m0 0"  ></path></symbol><symbol id="icon-quanping" viewBox="0 0 1024 1024"><path d="M181 357.5V181.2h176.4c14.3 0 25.9-11.6 25.9-25.9v-31.1c0-14.3-11.6-25.9-25.9-25.9H118c-11 0-20 9-20 20v239.4c0 14.3 11.6 25.9 25.9 25.9H155c14.4-0.1 26-11.7 26-26.1zM668.6 181.2H845v176.4c0 14.3 11.6 25.9 25.9 25.9H902c14.3 0 25.9-11.6 25.9-25.9V118.2c0-11-9-20-20-20H668.6c-14.3 0-25.9 11.6-25.9 25.9v31.1c0 14.3 11.6 26 25.9 26zM357.4 845.2H181V668.8c0-14.3-11.6-25.9-25.9-25.9H124c-14.3 0-25.9 11.6-25.9 25.9v239.4c0 11 9 20 20 20h239.4c14.3 0 25.9-11.6 25.9-25.9v-31.1c-0.1-14.4-11.7-26-26-26zM845 668.8v176.4H668.6c-14.3 0-25.9 11.6-25.9 25.9v31.1c0 14.3 11.6 25.9 25.9 25.9H908c11 0 20-9 20-20V668.8c0-14.3-11.6-25.9-25.9-25.9H871c-14.4 0-26 11.6-26 25.9z"  ></path></symbol></svg>',(n=>{var t=(e=(e=document.getElementsByTagName("script"))[e.length-1]).getAttribute("data-injectcss"),e=e.getAttribute("data-disable-injectsvg");if(!e){var c,o,i,d,s,a=function(t,e){e.parentNode.insertBefore(t,e)};if(t&&!n.__iconfont__svg__cssinject__){n.__iconfont__svg__cssinject__=!0;try{document.write("<style>.svgfont {display: inline-block;width: 1em;height: 1em;fill: currentColor;vertical-align: -0.1em;font-size:16px;}</style>")}catch(t){console&&console.log(t)}}c=function(){var t,e=document.createElement("div");e.innerHTML=n._iconfont_svg_string_5072634,(e=e.getElementsByTagName("svg")[0])&&(e.setAttribute("aria-hidden","true"),e.style.position="absolute",e.style.width=0,e.style.height=0,e.style.overflow="hidden",e=e,(t=document.body).firstChild?a(e,t.firstChild):t.appendChild(e))},document.addEventListener?~["complete","loaded","interactive"].indexOf(document.readyState)?setTimeout(c,0):(o=function(){document.removeEventListener("DOMContentLoaded",o,!1),c()},document.addEventListener("DOMContentLoaded",o,!1)):document.attachEvent&&(i=c,d=n.document,s=!1,r(),d.onreadystatechange=function(){"complete"==d.readyState&&(d.onreadystatechange=null,l())})}function l(){s||(s=!0,i())}function r(){try{d.documentElement.doScroll("left")}catch(t){return void setTimeout(r,50)}l()}})(window);
+window._iconfont_svg_string_5072634='<svg><symbol id="icon-gengduo" viewBox="0 0 1024 1024"><path d="M223.962372 607.897867c-52.980346 0-95.983874-43.003528-95.983874-95.983874s43.003528-95.983874 95.983874-95.983874 95.983874 43.003528 95.983874 95.983874S276.942718 607.897867 223.962372 607.897867z" fill="#575B66" ></path><path d="M511.913993 607.897867c-52.980346 0-95.983874-43.003528-95.983874-95.983874s43.003528-95.983874 95.983874-95.983874 95.983874 43.003528 95.983874 95.983874S564.894339 607.897867 511.913993 607.897867z" fill="#575B66" ></path><path d="M800.037628 607.897867c-52.980346 0-95.983874-43.003528-95.983874-95.983874s43.003528-95.983874 95.983874-95.983874 95.983874 43.003528 95.983874 95.983874S852.84596 607.897867 800.037628 607.897867z" fill="#575B66" ></path></symbol><symbol id="icon-shanchu" viewBox="0 0 1024 1024"><path d="M106.666667 213.333333h810.666666v42.666667H106.666667z" fill="#3D3D3D" ></path><path d="M640 128v42.666667h42.666667V128c0-23.573333-19.093333-42.666667-42.538667-42.666667H383.872A42.496 42.496 0 0 0 341.333333 128v42.666667h42.666667V128h256z" fill="#3D3D3D" ></path><path d="M213.333333 896V256H170.666667v639.957333C170.666667 919.552 189.653333 938.666667 213.376 938.666667h597.248C834.218667 938.666667 853.333333 919.68 853.333333 895.957333V256h-42.666666v640H213.333333z" fill="#3D3D3D" ></path><path d="M320 341.333333h42.666667v384h-42.666667zM490.666667 341.333333h42.666666v384h-42.666666zM661.333333 341.333333h42.666667v384h-42.666667z" fill="#3D3D3D" ></path></symbol><symbol id="icon-bianji" viewBox="0 0 1024 1024"><path d="M153.6 902.656a32.256 32.256 0 0 1 0-64h716.8a32.256 32.256 0 0 1 0 64zM743.936 151.04l72.192 72.192a51.2 51.2 0 0 1 0 72.192L358.4 751.616a51.2 51.2 0 0 1-36.352 14.848H226.816a25.6 25.6 0 0 1-25.6-25.6v-97.792a51.2 51.2 0 0 1 14.848-36.352l455.68-455.68a51.2 51.2 0 0 1 72.192 0z m-478.72 497.152v54.272h54.272l442.88-442.88L708.096 204.8z" fill="#5A5A68" ></path></symbol><symbol id="icon-tianjia" viewBox="0 0 1024 1024"><path d="M924.9 337.6c-22.6-53.4-54.9-101.3-96-142.4-41.1-41.1-89.1-73.5-142.4-96-55.3-23.5-114-35.3-174.5-35.3S392.8 75.8 337.6 99.1c-53.4 22.6-101.3 54.9-142.4 96-41.1 41.1-73.5 89.1-96 142.4C75.8 392.8 64 451.5 64 512s11.9 119.2 35.2 174.4c22.6 53.4 54.9 101.3 96 142.4 41.1 41.1 89.1 73.5 142.4 96 55.3 23.4 114 35.2 174.5 35.2s119.2-11.9 174.4-35.2c53.4-22.6 101.3-54.9 142.4-96 41.1-41.1 73.5-89.1 96-142.4 23.4-55.3 35.2-114 35.2-174.4 0-60.5-11.8-119.2-35.2-174.4zM512 902.5c-215.3 0-390.5-175.2-390.5-390.5S296.7 121.5 512 121.5 902.5 296.7 902.5 512 727.3 902.5 512 902.5z"  ></path><path d="M681.7 483.2H540.8v-141c0-15.9-12.9-28.8-28.8-28.8s-28.8 12.9-28.8 28.8v140.9h-141c-15.9 0-28.8 12.9-28.8 28.8s12.9 28.8 28.8 28.8h140.9v140.9c0 15.9 12.9 28.8 28.8 28.8s28.8-12.9 28.8-28.8V540.8h140.9c15.9 0 28.8-12.9 28.8-28.8 0.2-15.9-12.8-28.8-28.7-28.8z"  ></path></symbol><symbol id="icon-gedian" viewBox="0 0 1024 1024"><path d="M371.29728 181.76A87.46752 87.46752 0 1 1 284.16 269.22752 87.296 87.296 0 0 1 371.29728 181.76z m278.84544 0a87.46752 87.46752 0 1 1-87.13984 87.46752A87.296 87.296 0 0 1 650.14272 181.76zM371.29728 461.65248A87.46752 87.46752 0 1 1 284.16 549.12a87.296 87.296 0 0 1 87.13728-87.46752z m278.84544 0a87.46752 87.46752 0 1 1-87.13984 87.46752 87.296 87.296 0 0 1 87.13984-87.46752zM371.29728 741.54752A87.46752 87.46752 0 1 1 284.16 829.01248a87.296 87.296 0 0 1 87.13728-87.46496z m278.84544 0a87.46752 87.46752 0 1 1-87.13984 87.46496 87.296 87.296 0 0 1 87.13984-87.46496z"  ></path></symbol><symbol id="icon-gongzuotai" viewBox="0 0 1024 1024"><path d="M837.12 112.64H161.28c-43.52 0-76.8 35.84-76.8 76.8v468.48c0 43.52 35.84 76.8 76.8 76.8h276.48v156.16H215.04c-15.36 0-25.6 12.8-25.6 25.6 0 15.36 12.8 25.6 25.6 25.6h570.88c15.36 0 25.6-12.8 25.6-25.6 0-15.36-12.8-25.6-25.6-25.6h-243.2v-156.16h294.4c43.52 0 76.8-35.84 76.8-76.8V189.44c2.56-43.52-33.28-76.8-76.8-76.8z m25.6 545.28c0 15.36-12.8 25.6-25.6 25.6H161.28c-15.36 0-25.6-12.8-25.6-25.6V189.44c0-15.36 12.8-25.6 25.6-25.6h675.84c15.36 0 25.6 12.8 25.6 25.6v468.48z m0 0"  ></path></symbol><symbol id="icon-quanping" viewBox="0 0 1024 1024"><path d="M181 357.5V181.2h176.4c14.3 0 25.9-11.6 25.9-25.9v-31.1c0-14.3-11.6-25.9-25.9-25.9H118c-11 0-20 9-20 20v239.4c0 14.3 11.6 25.9 25.9 25.9H155c14.4-0.1 26-11.7 26-26.1zM668.6 181.2H845v176.4c0 14.3 11.6 25.9 25.9 25.9H902c14.3 0 25.9-11.6 25.9-25.9V118.2c0-11-9-20-20-20H668.6c-14.3 0-25.9 11.6-25.9 25.9v31.1c0 14.3 11.6 26 25.9 26zM357.4 845.2H181V668.8c0-14.3-11.6-25.9-25.9-25.9H124c-14.3 0-25.9 11.6-25.9 25.9v239.4c0 11 9 20 20 20h239.4c14.3 0 25.9-11.6 25.9-25.9v-31.1c-0.1-14.4-11.7-26-26-26zM845 668.8v176.4H668.6c-14.3 0-25.9 11.6-25.9 25.9v31.1c0 14.3 11.6 25.9 25.9 25.9H908c11 0 20-9 20-20V668.8c0-14.3-11.6-25.9-25.9-25.9H871c-14.4 0-26 11.6-26 25.9z"  ></path></symbol></svg>',(c=>{var t=(e=(e=document.getElementsByTagName("script"))[e.length-1]).getAttribute("data-injectcss"),e=e.getAttribute("data-disable-injectsvg");if(!e){var i,n,o,a,d,h=function(t,e){e.parentNode.insertBefore(t,e)};if(t&&!c.__iconfont__svg__cssinject__){c.__iconfont__svg__cssinject__=!0;try{document.write("<style>.svgfont {display: inline-block;width: 1em;height: 1em;fill: currentColor;vertical-align: -0.1em;font-size:16px;}</style>")}catch(t){console&&console.log(t)}}i=function(){var t,e=document.createElement("div");e.innerHTML=c._iconfont_svg_string_5072634,(e=e.getElementsByTagName("svg")[0])&&(e.setAttribute("aria-hidden","true"),e.style.position="absolute",e.style.width=0,e.style.height=0,e.style.overflow="hidden",e=e,(t=document.body).firstChild?h(e,t.firstChild):t.appendChild(e))},document.addEventListener?~["complete","loaded","interactive"].indexOf(document.readyState)?setTimeout(i,0):(n=function(){document.removeEventListener("DOMContentLoaded",n,!1),i()},document.addEventListener("DOMContentLoaded",n,!1)):document.attachEvent&&(o=i,a=c.document,d=!1,s(),a.onreadystatechange=function(){"complete"==a.readyState&&(a.onreadystatechange=null,l())})}function l(){d||(d=!0,o())}function s(){try{a.documentElement.doScroll("left")}catch(t){return void setTimeout(s,50)}l()}})(window);
\ No newline at end of file

src/components/CommonComplete.vue

@@ -57,39 +57,39 @@ const props = defineProps({
   justify-content: center;
   align-items: center;
   .stat-card {
-    .vw(width, 170);
+    .vw(width, 180);
     .vw(border-radius, 5);
+    .vw(margin-right,10);
     .vw(padding, 10);
-    .vw(margin,10);
     background-image: url("@/assets/images/complete.png");
     background-repeat: no-repeat;
-    background-size: 100% 100%;
-    background-position: center;
     .stat-card-title {
       .font(12);
       text-align: center;
     }
     .stat-card-value {
       .font(12);
+      display: flex;
+      flex-direction: column;
+      justify-content: space-between;
+      .vh(margin-top,20);
+      .card-value-top {
+        .vh(margin-bottom,10);
+      }
       .card-value-top,
       .card-value-bottom {
         display: flex;
         justify-content: space-between;
-        p {
-          .vh(height,10);
-        }
         .pro-title {
           .font(10);
-          margin-bottom: -12px;
         }
         .pro-value {
-          .font(18);
+          .font(16);
           font-family: "DIN";
           color: @Color;
-          font-weight: 100;
           span {
             .font(10);
-            font-weight: 400;
+            // font-weight: 400;
           }
         }
       }
@@ -110,7 +110,7 @@ const props = defineProps({
           }
 
           .trend-icon {
-            font-size: 12px;
+            .font(12);
             color: #32d25a;
 
             &.down-trend {

src/components/CommonPlant.vue

@@ -30,20 +30,18 @@ const props = defineProps({
 .stat-cards-container {
   display: flex;
   .stat-card {
-    .vw(width, 170);
+    .vw(width, 180);
     .vw(border-radius, 5);
     .vw(padding, 10);
-    .vw(margin,10);
+    .vw(margin-right,10);
     background-image: url("@/assets/images/total2.png");
     background-repeat: no-repeat;
     background-size: 100% 100%;
-    background-position: center;
     .stat-card-title {
       .font(12);
-      font-weight: 700;
     }
     .stat-card-value {
-      .font(20);
+      .font(18);
       color: @Color;
       font-family: "DIN";
     }
@@ -52,7 +50,6 @@ const props = defineProps({
       justify-content: space-between;
       .amount-title {
         .font(10);
-        .vh(height, 5);
       }
       .amount-value {
         .font(16);

src/components/CommonTotal.vue

@@ -133,33 +133,28 @@ onMounted(() => {});
 
 <style scoped lang="less">
 .common-container {
-  display: flex;
-  justify-content: center;
   .stat-cards-container {
     display: flex;
     .stat-card {
-      .vw(width, 170);
+      .vw(width, 180);
       .vw(border-radius, 5);
-      .vw(padding, 20);
-      // .vw(margin,10);
+      .vw(padding, 10);
+      .vw(margin-right,10);
       background-image: url("@/assets/images/total2.png");
       background-repeat: no-repeat;
-      background-size: 90% 80%;
-      background-position: center;
+      background-size: contain;
       .stat-card-title {
         .font(12);
       }
       .stat-card-value {
-        .font(24);
+        .font(18);
         cursor: pointer;
         font-family: "DIN";
       }
     }
+    :last-child {
+      margin-right: 0;
+    }
   }
-}
-:deep(.el-dialog__title) {
-  font-weight: 900;
-}
-:deep(.el-dialog) {
 }
 </style>

src/styles/manage.less

 .tab-content{
     th{
-        text-align: center;
+        // text-align: center;
     }
 }
\ No newline at end of file

src/views/homePage/components/Construct.vue

@@ -11,16 +11,12 @@
     <div class="construct-right">
       <div>
         <div class="info-title">项目概况</div>
-        <div>
         <CommonTotal :numberList="projectList" />
       </div>
-      </div>
       <div>
         <div class="info-title">投资完成情况</div>
-        <div>
         <CommonTotal :numberList="investmentList" />
       </div>
-      </div>
       <div>
         <div class="info-title">投资完成情况</div>
         <div class="progress">
@@ -39,31 +35,35 @@
       </div>
       <div>
         <div class="info-title">投资回收完成情况</div>
-        <div>
         <CommonTotal :numberList="recycleList" />
       </div>
     </div>
   </div>
-  </div>
 </template>
 
 <script setup>
 import Map from "@/components/CommonMap.vue";
 import CommonTotal from "@/components/CommonTotal.vue";
-import { reactive, ref, onMounted, onUnmounted } from "vue";
+import { reactive, ref, onMounted, onUnmounted, shallowReactive, defineOptions } from "vue";
 import CircleProgress from "./CircleProgress.vue";
-const projectList = reactive([
+
+// 定义组件名称，用于keep-alive缓存
+defineOptions({
+  name: 'Construct'
+});
+// 使用shallowReactive减少深层响应式开销
+const projectList = shallowReactive([
   { title: "总个数（个）", value: "59" },
   { title: "总投资（亿元）", value: "2733.35" },
   { title: "总规模（公里）", value: "5116.72" },
 ]);
-const investmentList = reactive([
+const investmentList = shallowReactive([
   { title: "10月完成投资（亿元）", value: "0" },
   { title: "2025年完成投资（亿元）", value: "19.725" },
   { title: "累计完成投资（亿元）", value: "807.56" },
 ]);
 // recycleList
-const recycleList = reactive([
+const recycleList = shallowReactive([
   { title: "10月完成投资（亿元）", value: "0" },
   { title: "2025年完成投资（亿元）", value: "2.98" },
   { title: "完成率", value: "50.2%" },
@@ -74,7 +74,7 @@ const recycleList = reactive([
 .construct-container {
   display: flex;
   .construct-left {
-    flex: 1;
+    width: 100%;
     height: 100%;
     .tag-image {
       img {
@@ -94,11 +94,12 @@ const recycleList = reactive([
       .vw(width, 180);
       .vh(height, 30);
       .vh(line-height, 30);
-      .vw(margin-left,20);
-      .font(20);
-      .vw(padding-left,23);
+      .font(16);
+      .vw(padding-left,20);
+      .vh(margin-bottom,15);
       text-align: left;
       color: #fff;
+      white-space: nowrap;
       font-family: YouSheBiaoTiYuan;
       background-image: url("@/assets/images/tag.png");
       background-repeat: no-repeat;
@@ -132,24 +133,21 @@ const recycleList = reactive([
             .vw(left,65);
             width: 85%;
             height: 30%;
-            background-image: url(/src/assets/images/baseRate.png);
+            background-image: url("@/assets/images/baseRate.png");
             background-size: 100% 100%;
             background-repeat: no-repeat;
           }
           .progress-show-value-rel {
-            height: 100%;
-            background-image: url("@/assets/images/baseRateRel.png");
-            background-size: auto 100%;
-            -webkit-transform: skew(-30deg);
-            transform: skew(-30deg);
             position: absolute;
             .vh(top,26);
             .vw(left,65);
-            height: 30%;
             max-width: 83%;
+            height: 30%;
             background-image: url(/src/assets/images/progress.png);
             background-size: 100% 100%;
             background-repeat: no-repeat;
+            -webkit-transform: skew(-30deg);
+            transform: skew(-30deg);
           }
         }
       }

src/views/homePage/components/Operation.vue

@@ -11,36 +11,26 @@
     <div class="construct-right">
       <div>
         <div class="info-title">项目概况</div>
-        <div>
         <CommonTotal :numberList="projectList" />
       </div>
-      </div>
       <div>
         <div class="info-title">投资完成情况</div>
-        <div>
         <CommonTotal :numberList="investmentList" />
       </div>
-      </div>
       <div>
         <div class="info-title">经营计划完成情况</div>
-        <div>
         <CommonComplete :numberList="completeList" />
       </div>
-      </div>
       <div>
         <div class="info-title">投资回收完成情况</div>
-        <div>
         <CommonTotal :numberList="recycleList" />
       </div>
-      </div>
       <div>
         <div class="info-title">2025年经营计划完成进度</div>
-        <div>
         <CommonPlant :numberList="operationList" />
       </div>
     </div>
   </div>
-  </div>
 </template>
 
 <script setup>
@@ -48,28 +38,34 @@ import Map from "@/components/CommonMap.vue";
 import CommonTotal from "@/components/CommonTotal.vue";
 import CommonComplete from "@/components/CommonComplete.vue";
 import CommonPlant from "@/components/CommonPlant.vue";
-import { reactive, ref, onMounted, onUnmounted } from "vue";
-const projectList = reactive([
+import { shallowReactive, ref, onMounted, onUnmounted, defineOptions } from "vue";
+
+// 定义组件名称，用于keep-alive缓存
+defineOptions({
+  name: 'Operation'
+});
+// 使用shallowReactive减少深层响应式开销
+const projectList = shallowReactive([
   { title: "总个数（个）", value: "59" },
   { title: "总投资（亿元）", value: "2733.35" },
   { title: "总规模（公里）", value: "5116.72" },
 ]);
-const investmentList = reactive([
+const investmentList = shallowReactive([
   { title: "10月完成投资（亿元）", value: "0" },
   { title: "2025年完成投资（亿元）", value: "19.725" },
   { title: "累计完成投资（亿元）", value: "807.56" },
 ]);
-const recycleList = reactive([
+const recycleList = shallowReactive([
   { title: "10月完成投资（亿元）", value: "0" },
   { title: "2025年完成投资（亿元）", value: "2.98" },
   { title: "完成率", value: "50.2%" },
 ]);
-const operationList = reactive([
+const operationList = shallowReactive([
   { title: "营业收入完成进度", value: "68.1%" },
   { title: "运营成本完成进度", value: "68.1%" },
   { title: "利润总额完成进度", value: "68.1%" },
 ]);
-const completeList = reactive([
+const completeList = shallowReactive([
   {
     title: "营业收入",
     protitle: "11月完成",
@@ -101,7 +97,7 @@ const completeList = reactive([
 .construct-container {
   display: flex;
   .construct-left {
-    flex: 1;
+    width: 100%;
     height: 100%;
     .tag-image {
       img {
@@ -118,14 +114,16 @@ const completeList = reactive([
     flex-direction: column;
     justify-content: space-between;
     .info-title {
-      .vw(width, 230);
+      .vw(width, 180);
       .vh(height, 30);
       .vh(line-height, 30);
-      .vw(margin-left,10);
-      .font(20);
-      .vw(padding-left,28);
+      .font(16);
+      .vw(padding-left,20);
+      .vh(margin-bottom,15);
+      .vh(margin-top,15);
       text-align: left;
       color: #fff;
+      white-space: nowrap;
       font-family: YouSheBiaoTiYuan;
       background-image: url("@/assets/images/tag.png");
       background-repeat: no-repeat;

src/views/homePage/components/ProjectApproval.vue

 <template>
+  <div class="project-container">
     <CommonTotal :numberList="initiationList" />
+  </div>
   <Map />
 </template>
 
 <script setup>
 import CommonTotal from "@/components/CommonTotal.vue";
 import Map from "@/components/CommonMap.vue";
-import { onMounted, reactive, watch, ref } from "vue";
+import { onMounted, reactive, watch, ref, computed, shallowRef, defineOptions } from "vue";
+
+// 定义组件名称，用于keep-alive缓存
+defineOptions({
+  name: 'ProjectApproval'
+});
 
 const props = defineProps({
   currentName: {
@@ -14,64 +21,36 @@ const props = defineProps({
     default: "立项",
   },
 });
-const initiationList = ref([]);
-// 根据currentName设置不同的数据
-const setNumberList = (name) => {
-  if (name === "立项") {
-    initiationList.value = [
+// 使用静态数据避免重复创建
+const STATIC_DATA = {
+  立项: [
+    { title: "总个数（个）", value: "59" },
+    { title: "总投资（亿元）", value: "2733.35" },
+    { title: "总规模（公里）", value: "5116.72" },
+  ],
+  转让: [
     { title: "总个数（个）", value: "59" },
     { title: "总投资（亿元）", value: "2733.35" },
     { title: "总规模（公里）", value: "5116.72" },
-    ];
-  } else {
-    initiationList.value = [
+    { title: "累计完成投资（亿元）", value: "3116.44" },
+  ],
+  退出: [
     { title: "总个数（个）", value: "59" },
     { title: "总投资（亿元）", value: "2733.35" },
     { title: "总规模（公里）", value: "5116.72" },
     { title: "累计完成投资（亿元）", value: "3116.44" },
-    ];
-  }
+  ],
 };
 
-watch(
-  () => props.currentName,
-  (newVal) => {
-    setNumberList(newVal);
-  },
-  {
-    immediate: true,
-    deep: true,
-  }
-);
-
-onMounted(() => {
-  setNumberList(props.currentName);
+// 使用computed进行响应式计算，避免不必要的重新渲染
+const initiationList = computed(() => {
+  return STATIC_DATA[props.currentName] || STATIC_DATA.立项;
 });
 </script>
 
 <style scoped lang="less">
-.stat-cards-container {
+.project-container {
   display: flex;
   justify-content: center;
-  align-items: center;
-  .stat-card {
-    .vw(width, 180);
-    .vh(height, 80);
-    .vw(border-radius, 5);
-    .vw(padding, 10);
-    .vw(padding, 10);
-    .vw(margin,10);
-    background-image: url("@/assets/images/total.png");
-    background-repeat: no-repeat;
-    background-size: cover;
-    background-position: center;
-    .stat-card-title {
-      .font(14);
-    }
-    .stat-card-value {
-      .vh(margin-top, 20);
-      .font(20);
-    }
-  }
 }
 </style>

src/views/homePage/index.vue

@@ -55,6 +55,7 @@
           >{{ item.name }}
         </span>
       </div>
+      <keep-alive include="ProjectApproval,Construct,Operation">
         <ProjectApproval
           :currentName="selectedContentName"
           v-if="
@@ -65,6 +66,7 @@
         />
         <Construct v-else-if="selectedContentBtn === 2" />
         <Operation v-else />
+      </keep-alive>
     </div>
     <div class="bottom"></div>
   </div>
@@ -74,7 +76,7 @@
 import Construct from "./components/Construct.vue";
 import ProjectApproval from "./components/ProjectApproval.vue";
 import Operation from "./components/Operation.vue";
-import { reactive, ref } from "vue";
+import { reactive, ref, nextTick } from "vue";
 
 const selectedLeftBtn = ref("equity");
 const selectedRightBtn = ref("");
@@ -118,27 +120,43 @@ const selectRightBtn = (btn) => {
   selectedLeftBtn.value = "";
 };
 
+// 添加防抖功能，避免频繁切换造成的性能问题
+let debounceTimer = null;
 const selectContentBtn = (item) => {
+  // 清除之前的定时器
+  if (debounceTimer) {
+    clearTimeout(debounceTimer);
+  }
+  
+  // 使用防抖延迟切换
+  debounceTimer = setTimeout(() => {
     selectedContentBtn.value = item.index;
     selectedContentName.value = item.name;
-};
     
-const showProjectPopup = (event) => {
-  currentProject.value = {
-    name: "项目001",
-    data: [
-      { label: "数据01", value: "3654.89", unit: "单位" },
-      { label: "数据02", value: "3654.89", unit: "单位" },
-      { label: "数据03", value: "3654.89", unit: "单位" },
-    ],
-  };
-  popupStyle.value = {
-    left: `${event.clientX}px`,
-    top: `${event.clientY - 100}px`,
-  };
-  showPopup.value = true;
+    // 使用nextTick确保DOM更新完成
+    nextTick(() => {
+      // 可以在这里添加其他需要延迟执行的逻辑
+    });
+  }, 100); // 100ms防抖延迟
 };
 
+// 暂时注释未使用的函数，避免lint警告
+// const showProjectPopup = (event) => {
+//   currentProject.value = {
+//     name: "项目001",
+//     data: [
+//       { label: "数据01", value: "3654.89", unit: "单位" },
+//       { label: "数据02", value: "3654.89", unit: "单位" },
+//       { label: "数据03", value: "3654.89", unit: "单位" },
+//     ],
+//   };
+//   popupStyle.value = {
+//     left: `${event.clientX}px`,
+//     top: `${event.clientY - 100}px`,
+//   };
+//   showPopup.value = true;
+// };
+
 // 全屏切换功能
 const toggleFullscreen = () => {
   const homeContainer = document.querySelector(".home-container");

src/views/systemManage/userManage.vue

@@ -279,7 +279,7 @@ const formItems = computed(() => [
     filterable: true,
     checkStrictly: true,
     renderAfterExpand: false,
-    showCheckbox: true,
+    showCheckbox: false,
     multiple: true,
     collapseTags: true,
     maxCollapseTags: 2,
@@ -295,7 +295,7 @@ const formItems = computed(() => [
     filterable: true,
     checkStrictly: true,
     renderAfterExpand: false,
-    showCheckbox: true,
+    showCheckbox: false,
     multiple: true,
     collapseTags: true,
     maxCollapseTags: 2,
@@ -311,7 +311,7 @@ const formItems = computed(() => [
     filterable: true,
     checkStrictly: true,
     renderAfterExpand: false,
-    showCheckbox: true,
+    showCheckbox: false,
     multiple: true,
     collapseTags: true,
     maxCollapseTags: 2,