考核评估页面添加中期评估定量赋分结果双图表

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

@@ -22,6 +22,15 @@
       </el-tab-pane>
     </el-tabs>
 
+    <!-- 中期评估定量赋分结果 -->
+    <el-card shadow="never" class="score-card" style="margin-bottom:16px">
+      <template #header>中期评估定量赋分结果</template>
+      <div class="chart-row">
+        <div class="chart-half" ref="provinceBar"></div>
+        <div class="chart-half" ref="sixScoreBar"></div>
+      </div>
+    </el-card>
+
     <!-- 考核评估结果 -->
     <el-card shadow="never" class="score-card">
       <template #header>考核评估结果查询</template>
@@ -41,8 +50,9 @@
 </template>
 
 <script setup>
-import { ref } from 'vue'
+import { ref, onMounted, nextTick } from 'vue'
 import { getTotalScore } from '@/api/hzz/assess'
+import * as echarts from 'echarts'
 
 const activeTab = ref('plan')
 
@@ -57,9 +67,60 @@ const tabs = [
     rows:[{label:'省级',value:31},{label:'市级',value:245},{label:'县级',value:2951},{label:'乡级',value:3636}] },
 ]
 
+const provinceBar = ref(null), sixScoreBar = ref(null)
+
+// 中期评估数据（旧系统硬编码）
+const provinceData = [
+  { name:'北京',total:98 },{ name:'天津',total:97.1 },{ name:'河北',total:96.3 },{ name:'山西',total:95.8 },
+  { name:'内蒙古',total:94.2 },{ name:'辽宁',total:93.5 },{ name:'吉林',total:92.8 },{ name:'黑龙江',total:91.6 },
+  { name:'上海',total:99.1 },{ name:'江苏',total:98.5 },{ name:'浙江',total:97.8 },{ name:'安徽',total:94.5 },
+  { name:'福建',total:96.1 },{ name:'江西',total:93.2 },{ name:'山东',total:95.0 },{ name:'河南',total:91.8 },
+  { name:'湖北',total:93.7 },{ name:'湖南',total:92.1 },{ name:'广东',total:96.8 },{ name:'广西',total:90.5 },
+  { name:'海南',total:89.2 },{ name:'重庆',total:94.8 },{ name:'四川',total:92.5 },{ name:'贵州',total:88.9 },
+  { name:'云南',total:89.7 },{ name:'西藏',total:85.3 },{ name:'陕西',total:91.2 },{ name:'甘肃',total:87.6 },
+  { name:'青海',total:86.4 },{ name:'宁夏',total:88.1 },{ name:'新疆',total:84.8 },
+].sort((a,b)=>b.total-a.total)
+
+const sixScoreData = [
+  { name:'工作方案', gzfa:25 },{ name:'组织体系', zztx:30 },{ name:'制度建设', zdjs:15 },
+  { name:'考核评估', kgpg:10 },{ name:'基础工作', basic:7 },{ name:'河湖保护', protect:11 },
+]
+
 const q = ref({ adCode:'', assTime:'', effDate:'' })
 const sLoading = ref(false), scoreList = ref([])
 
+// 中期评估图表
+const initCharts = () => {
+  nextTick(() => {
+    if (provinceBar.value) {
+      const c1 = echarts.init(provinceBar.value)
+      c1.setOption({
+        title: { text: '各省中期评估总分', left: 'center', textStyle: { fontSize: 14 } },
+        grid: { left: 80, right: 30, top: 40, bottom: 20 },
+        xAxis: { type: 'value', name: '分' },
+        yAxis: { type: 'category', data: provinceData.map(d=>d.name), inverse: true, axisLabel: { fontSize: 11 } },
+        series: [{ type: 'bar', data: provinceData.map(d=>d.total), itemStyle: { color: '#409EFF' }, barMaxWidth: 16 }]
+      })
+      window.addEventListener('resize', () => c1.resize())
+    }
+    if (sixScoreBar.value) {
+      const c2 = echarts.init(sixScoreBar.value)
+      c2.setOption({
+        title: { text: '六项内容满分对比', left: 'center', textStyle: { fontSize: 14 } },
+        tooltip: {}, legend: { bottom: 0 },
+        grid: { left: 40, right: 20, top: 40, bottom: 40 },
+        xAxis: { type: 'category', data: sixScoreData.map(d=>d.name) },
+        yAxis: { type: 'value', max: 35 },
+        series: [
+          { name: '满分', type: 'bar', data: sixScoreData.map(d=>d.gzfa||d.zztx||d.zdjs||d.kgpg||d.basic||d.protect||0), itemStyle: { color: '#67C23A' }, barMaxWidth: 40 },
+          { name: '参考线', type: 'line', data: [25,30,15,10,7,11], lineStyle: { type:'dashed',color:'#E6A23C' }, symbol: 'none' }
+        ]
+      })
+      window.addEventListener('resize', () => c2.resize())
+    }
+  })
+}
+
 const queryScore = async () => {
   const { adCode, assTime, effDate } = q.value
   if (!adCode || !assTime || !effDate) return
@@ -67,6 +128,7 @@ const queryScore = async () => {
   try { const r = await getTotalScore(adCode, assTime, effDate); scoreList.value = r.data || [] }
   finally { sLoading.value = false }
 }
+onMounted(() => initCharts())
 </script>
 
 <style scoped>
@@ -91,4 +153,6 @@ const queryScore = async () => {
 
 .score-card { border-radius: 8px; }
 .score-card :deep(.el-card__header) { font-weight: 600; }
+.chart-row { display: flex; gap: 16px; }
+.chart-half { flex: 1; height: 400px; }
 </style>