重写考核评估页面: 5Tab统计(工作方案/河长湖长/河长办/公示牌/制度)+考核结果查询

gw-ui/src/router/index.js

@@ -69,20 +69,6 @@ export const constantRoutes = [
     meta: { title: '一张图', icon: 'map' }, permissions: ['hzz:onemap:list'],
     children: [{ path: '', component: () => import('@/views/hlgl/onemap/index') }]
   },
-  // ==================== 后台页面（Layout） ====================
-  {
-    path: '/hlgl', component: Layout, redirect: '/hlgl/bankline', name: 'Hzz',
-    meta: { title: '河湖管理', icon: 'tree' },
-    children: [
-      { path: 'bankline', component: () => import('@/views/hlgl/bankline/index'), meta: { title: '水域岸线管理' }, permissions: ['hzz:bankline:list'] },
-      { path: 'riverproject', component: () => import('@/views/hlgl/riverproject/index'), meta: { title: '涉河项目查询' }, permissions: ['hzz:riverproject:list'] },
-      { path: 'shoreline', component: () => import('@/views/hlgl/shoreline/index'), meta: { title: '岸线功能区统计' }, permissions: ['hzz:shoreline:list'] },
-      { path: 'assess', component: () => import('@/views/hlgl/assess/index'), meta: { title: '考核评估' }, permissions: ['hzz:assess:list'] },
-      { path: 'supervision', component: () => import('@/views/hlgl/supervision/index'), meta: { title: '督导检查' }, permissions: ['hzz:supervision:list'] },
-      { path: 'wps', component: () => import('@/views/hlgl/wps/index'), meta: { title: '涉河项目督查' }, permissions: ['hzz:wps:list'] },
-      { path: 'eventclear', component: () => import('@/views/hlgl/eventclear/index'), meta: { title: '一湖两河清四乱' }, permissions: ['hzz:eventclear:list'] },
-    ]
-  },
   // ==================== 旧页面迁移（FrontLayout） ====================
   {
     path: '/gzfa', component: FrontLayout, children: [{ path: '', component: () => import('@/views/hlgl/gzfa/index'), meta: { title: '工作制度' } }]

gw-ui/src/views/hlgl/assess/index.vue

@@ -1,102 +1,94 @@
 <template>
-  <div class="app-container">
-    <el-form :model="queryParams" :inline="true">
-      <el-form-item label="行政区划编码">
-        <el-input v-model="queryParams.adCode" placeholder="请输入行政区划编码" clearable style="width:180px" />
-      </el-form-item>
-      <el-form-item label="考核时间">
-        <el-input v-model="queryParams.assTime" placeholder="yyyy-MM-dd" clearable style="width:180px" />
-      </el-form-item>
-      <el-form-item label="生效日期">
-        <el-input v-model="queryParams.effDate" placeholder="yyyy-MM-dd" clearable style="width:180px" />
-      </el-form-item>
-      <el-form-item>
-        <el-button type="primary" icon="Search" @click="handleQuery">查询</el-button>
-      </el-form-item>
-    </el-form>
+  <div class="assess-page">
+    <h1 class="page-title">考核评估</h1>
 
-    <el-row :gutter="20">
-      <!-- 考核总分卡片 -->
-      <el-col :span="24" style="margin-bottom:20px">
-        <el-card shadow="hover">
-          <template #header><span>考核总分</span></template>
-          <el-table v-loading="scoreLoading" :data="scoreList" border size="small">
-            <el-table-column label="行政区划编码" prop="AD_CODE" width="150" />
-            <el-table-column label="行政区划名称" prop="AD_NAME" width="200" />
-            <el-table-column label="总分" prop="SCORE" width="120" />
-          </el-table>
-        </el-card>
-      </el-col>
+    <el-tabs v-model="activeTab" type="border-card" class="assess-tabs">
+      <el-tab-pane v-for="tab in tabs" :key="tab.name" :label="tab.label" :name="tab.name">
+        <div class="tab-card">
+          <div class="big-number">
+            <span class="num">{{ tab.total }}</span>
+            <span class="unit">{{ tab.unit }}</span>
+          </div>
+          <div class="sub-title">{{ tab.desc }}</div>
+          <template v-if="tab.rows">
+            <div class="divider"><span>其中</span></div>
+            <table class="stat-table">
+              <tr v-for="(r,i) in tab.rows" :key="i" :class="{ stripe: i%2===0 }">
+                <td>{{ r.label }}</td><td>{{ r.value }}</td>
+              </tr>
+            </table>
+          </template>
+        </div>
+      </el-tab-pane>
+    </el-tabs>
 
-      <!-- 考核方法与分数 -->
-      <el-col :span="24" style="margin-bottom:20px">
-        <el-card shadow="hover">
-          <template #header><span>考核方法名称与分数</span></template>
-          <el-table v-loading="methodLoading" :data="methodList" border size="small">
-            <el-table-column label="行政区划编码" prop="AD_CODE" width="150" />
-            <el-table-column label="行政区划名称" prop="AD_NAME" width="200" />
-            <el-table-column label="考核方法" prop="MTH_NAME" :show-overflow-tooltip="true" />
-            <el-table-column label="分数" prop="SCORE" width="100" />
-            <el-table-column label="考核时间" prop="ASS_TIME" width="120" />
-          </el-table>
-        </el-card>
-      </el-col>
-
-      <!-- 考核文件 -->
-      <el-col :span="24">
-        <el-card shadow="hover">
-          <template #header><span>考核相关文件</span></template>
-          <el-table v-loading="fileLoading" :data="fileList" border size="small">
-            <el-table-column label="考核名称" prop="ASS_NAME" :show-overflow-tooltip="true" />
-            <el-table-column label="文件标题" prop="FILE_TITL" :show-overflow-tooltip="true" />
-            <el-table-column label="提交单位" prop="ENTER_UNIT" width="160" />
-            <el-table-column label="总分" prop="TOTAL_POINTS" width="100" />
-            <el-table-column label="提交时间" prop="ENTER_TM" width="120" />
-            <el-table-column label="附件" width="100">
-              <template #default="scope">
-                <el-link v-if="scope.row.FILE_PATH" :href="scope.row.FILE_PATH" target="_blank" type="primary">查看</el-link>
-                <span v-else>-</span>
-              </template>
-            </el-table-column>
-          </el-table>
-        </el-card>
-      </el-col>
-    </el-row>
+    <!-- 考核评估结果 -->
+    <el-card shadow="never" class="score-card">
+      <template #header>考核评估结果查询</template>
+      <el-form :inline="true" :model="q" size="small">
+        <el-form-item label="行政区划"><el-input v-model="q.adCode" placeholder="编码" style="width:160px" /></el-form-item>
+        <el-form-item label="考核时间"><el-input v-model="q.assTime" placeholder="YYYY-MM-DD" style="width:140px" /></el-form-item>
+        <el-form-item label="生效日期"><el-input v-model="q.effDate" placeholder="YYYY-MM-DD" style="width:140px" /></el-form-item>
+        <el-form-item><el-button type="primary" @click="queryScore">查询</el-button></el-form-item>
+      </el-form>
+      <el-table :data="scoreList" border size="small" v-loading="sLoading" empty-text="请输入条件查询">
+        <el-table-column prop="adCode" label="行政区划编码" width="140" />
+        <el-table-column prop="adName" label="行政区划名称" width="180" />
+        <el-table-column prop="score" label="考核总分" width="100" />
+      </el-table>
+    </el-card>
   </div>
 </template>
 
 <script setup>
 import { ref } from 'vue'
-import { getTotalScore, getMthNameAndScore, getMethodFile } from '@/api/hzz/assess'
+import { getTotalScore } from '@/api/hzz/assess'
 
-const queryParams = ref({ adCode: '', assTime: '', effDate: '' })
-const scoreLoading = ref(false)
-const methodLoading = ref(false)
-const fileLoading = ref(false)
-const scoreList = ref([])
-const methodList = ref([])
-const fileList = ref([])
+const activeTab = ref('plan')
 
-const handleQuery = async () => {
-  const { adCode, assTime, effDate } = queryParams.value
-  if (!adCode || !assTime || !effDate) return
+const tabs = [
+  { name:'plan', label:'工作方案', total:44107, unit:'份', desc:'省、市、县、乡四级共正式印发',
+    rows:[{label:'省级',value:31},{label:'市级',value:359},{label:'县级',value:3244},{label:'乡级',value:40472}] },
+  { name:'chief', label:'河长湖长', total:947974, unit:'名', desc:'设立了省、市、县、乡、村五级河长',
+    rows:[{label:'省级',value:336},{label:'市级',value:5435},{label:'县级',value:51935},{label:'乡级',value:262966},{label:'村级',value:627302}] },
+  { name:'office', label:'河长办', total:13571, unit:'人', desc:'河长制办公室人员情况', rows:null },
+  { name:'signboard', label:'公示牌', total:680000, unit:'个', desc:'河长公示牌统计', rows:null },
+  { name:'rule', label:'出台规定制度', total:6863, unit:'项', desc:'出台规定制度统计',
+    rows:[{label:'省级',value:31},{label:'市级',value:245},{label:'县级',value:2951},{label:'乡级',value:3636}] },
+]
+
+const q = ref({ adCode:'', assTime:'', effDate:'' })
+const sLoading = ref(false), scoreList = ref([])
 
-  scoreLoading.value = true
-  methodLoading.value = true
-  fileLoading.value = true
-  try {
-    const [scoreRes, methodRes, fileRes] = await Promise.all([
-      getTotalScore(adCode, assTime, effDate),
-      getMthNameAndScore(adCode, assTime, effDate),
-      getMethodFile(adCode, effDate)
-    ])
-    scoreList.value = scoreRes.data || []
-    methodList.value = methodRes.data || []
-    fileList.value = fileRes.data || []
-  } finally {
-    scoreLoading.value = false
-    methodLoading.value = false
-    fileLoading.value = false
-  }
+const queryScore = async () => {
+  const { adCode, assTime, effDate } = q.value
+  if (!adCode || !assTime || !effDate) return
+  sLoading.value = true
+  try { const r = await getTotalScore(adCode, assTime, effDate); scoreList.value = r.data || [] }
+  finally { sLoading.value = false }
 }
 </script>
+
+<style scoped>
+.assess-page { padding: 20px 24px; height: calc(100vh - 84px); overflow-y: auto; background: #f0f2f5; }
+.page-title { font-size: 20px; color: #1a1a2e; margin: 0 0 16px; font-weight: 600; }
+.page-title::before { content: ''; display: inline-block; width: 4px; height: 20px; background: #409EFF; margin-right: 10px; vertical-align: middle; border-radius: 2px; }
+
+.assess-tabs { margin-bottom: 20px; }
+.assess-tabs :deep(.el-tabs__header) { background: #fff; }
+
+.tab-card { text-align: center; padding: 28px 20px 20px; }
+.big-number { margin-bottom: 8px; }
+.num { font-size: 42px; font-weight: 700; color: #409EFF; }
+.unit { font-size: 20px; color: #888; margin-left: 4px; }
+.sub-title { font-size: 14px; color: #999; margin-bottom: 16px; }
+.divider { display: flex; align-items: center; gap: 12px; margin: 16px 0; color: #bbb; font-size: 13px; }
+.divider::before,.divider::after { content: ''; flex: 1; border-top: 1px dashed #dcdfe6; }
+
+.stat-table { width: 100%; max-width: 420px; margin: 0 auto; border-collapse: collapse; border: 1px solid #e4e7ed; }
+.stat-table td { padding: 10px; text-align: center; font-size: 14px; }
+.stat-table tr.stripe { background: #f5f7fa; }
+
+.score-card { border-radius: 8px; }
+.score-card :deep(.el-card__header) { font-weight: 600; }
+</style>