移动端监督页面修改

zdxt-web-client/zdxt-efcode-enforcement-app/src/views/enforcement/enforce/enforcementRecord.vue

@@ -50,27 +50,15 @@
                 <!-- Tab切换栏：执法维度 -->
                 <van-tabs v-model:active="overviewTab" color="#2563eb" title-active-color="#2563eb"
                     title-inactive-color="#666" swipeable animated line-width="20px" line-height="2px">
-                    <van-tab title="执法力量"></van-tab>
                     <van-tab title="执法力度"></van-tab>
+                    <van-tab title="执法力量"></van-tab>
                     <van-tab title="执法频次"></van-tab>
                     <van-tab title="执法效率"></van-tab>
                     <van-tab title="执法结果"></van-tab>
                 </van-tabs>
 
-                <!-- 执法力量 -->
-                <div v-if="overviewTab === 0" class="tab-content-cards">
-                    <div class="large-card">
-                        <div class="large-card-value">422家</div>
-                        <div class="large-card-label">执法单位数</div>
-                    </div>
-                    <div class="large-card">
-                        <div class="large-card-value">19020人</div>
-                        <div class="large-card-label">执法人员数</div>
-                    </div>
-                </div>
-
                 <!-- 执法力度图表 -->
-                <div v-if="overviewTab === 1" class="force-chart-wrapper">
+                <div v-if="overviewTab === 0" class="force-chart-wrapper">
                     <div class="force-chart" ref="forceChartRef"></div>
                     <div class="force-legend">
                         <div v-for="(item, index) in forceChartData" :key="index" class="fl-item">
@@ -82,6 +70,18 @@
                     </div>
                 </div>
 
+                <!-- 执法力量 -->
+                <div v-if="overviewTab === 1" class="tab-content-cards">
+                    <div class="large-card">
+                        <div class="large-card-value">422家</div>
+                        <div class="large-card-label">执法单位数</div>
+                    </div>
+                    <div class="large-card">
+                        <div class="large-card-value">19020人</div>
+                        <div class="large-card-label">执法人员数</div>
+                    </div>
+                </div>
+
                 <!-- 执法频次 -->
                 <div v-if="overviewTab === 2" class="tab-content-cards">
                     <div class="large-card">
@@ -285,7 +285,7 @@ const renderForceChart = () => {
 
 // 监听 Tab 切换
 watch(overviewTab, (val) => {
-    if (val === 1) {
+    if (val === 0) {
         nextTick(() => renderForceChart());
     } else if (forceChartInstance) {
         forceChartInstance.dispose();
@@ -346,6 +346,11 @@ onMounted(() => {
     if (container) {
         container.addEventListener('scroll', handleScroll, { passive: true });
     }
+    nextTick(() => {
+        if (overviewTab.value === 0) {
+            renderForceChart();
+        }
+    });
 });
 
 onUnmounted(() => {
@@ -678,8 +683,8 @@ const currentTableData = computed(() => {
 
     .fl-value {
         color: #333;
-        width: 40px;
+        width: 56px;
-        text-align: right;
+        text-align: center;
         flex-shrink: 0;
     }