|
|
@@ -25,11 +25,7 @@
|
|
|
<!-- 中期评估定量赋分结果 -->
|
|
|
<el-card shadow="never" class="score-card" style="margin-bottom:16px">
|
|
|
<template #header>中期评估定量赋分结果</template>
|
|
|
- <div class="chart-row">
|
|
|
- <div class="chart-half" ref="scoreMap"></div>
|
|
|
- <div class="chart-half" ref="provinceBar"></div>
|
|
|
- <div class="chart-half" ref="sixScoreBar"></div>
|
|
|
- </div>
|
|
|
+ <div ref="provinceBar" style="height:350px"></div>
|
|
|
</el-card>
|
|
|
|
|
|
<!-- 考核评估结果 -->
|
|
|
@@ -54,7 +50,6 @@
|
|
|
import { ref, onMounted, nextTick } from 'vue'
|
|
|
import { getTotalScore } from '@/api/hzz/assess'
|
|
|
import * as echarts from 'echarts'
|
|
|
-import chinaGeo from '@/assets/geoData/china_xh.json'
|
|
|
|
|
|
const activeTab = ref('plan')
|
|
|
|
|
|
@@ -69,33 +64,14 @@ const tabs = [
|
|
|
rows:[{label:'省级',value:31},{label:'市级',value:245},{label:'县级',value:2951},{label:'乡级',value:3636}] },
|
|
|
]
|
|
|
|
|
|
-const provinceBar = ref(null), sixScoreBar = ref(null), scoreMap = ref(null)
|
|
|
-echarts.registerMap('taihu', chinaGeo)
|
|
|
-// 太湖流域5省数据(匹配GeoJSON ID: 320000江苏 330000浙江 340000安徽 350000福建 310000上海)
|
|
|
-const taihuMapData = [
|
|
|
- { name:'320000',value:98.5,label:'江苏' },{ name:'330000',value:97.8,label:'浙江' },
|
|
|
- { name:'340000',value:94.5,label:'安徽' },{ name:'350000',value:96.1,label:'福建' },
|
|
|
- { name:'310000',value:99.1,label:'上海' },
|
|
|
-]
|
|
|
-const taihuNameMap = Object.fromEntries(taihuMapData.map(d=>[d.name,d.label]))
|
|
|
+const provinceBar = ref(null)
|
|
|
|
|
|
-// 中期评估数据(旧系统硬编码)
|
|
|
+// 太湖流域5省中期评估数据
|
|
|
const provinceData = [
|
|
|
- { name:'北京',code:'110000',total:98 },{ name:'天津',code:'120000',total:97.1 },{ name:'河北',code:'130000',total:96.3 },{ name:'山西',code:'140000',total:95.8 },
|
|
|
- { name:'内蒙古',code:'150000',total:94.2 },{ name:'辽宁',code:'210000',total:93.5 },{ name:'吉林',code:'220000',total:92.8 },{ name:'黑龙江',code:'230000',total:91.6 },
|
|
|
- { name:'上海',code:'310000',total:99.1 },{ name:'江苏',code:'320000',total:98.5 },{ name:'浙江',code:'330000',total:97.8 },{ name:'安徽',code:'340000',total:94.5 },
|
|
|
- { name:'福建',code:'350000',total:96.1 },{ name:'江西',code:'360000',total:93.2 },{ name:'山东',code:'370000',total:95.0 },{ name:'河南',code:'410000',total:91.8 },
|
|
|
- { name:'湖北',code:'420000',total:93.7 },{ name:'湖南',code:'430000',total:92.1 },{ name:'广东',code:'440000',total:96.8 },{ name:'广西',code:'450000',total:90.5 },
|
|
|
- { name:'海南',code:'460000',total:89.2 },{ name:'重庆',code:'500000',total:94.8 },{ name:'四川',code:'510000',total:92.5 },{ name:'贵州',code:'520000',total:88.9 },
|
|
|
- { name:'云南',code:'530000',total:89.7 },{ name:'西藏',code:'540000',total:85.3 },{ name:'陕西',code:'610000',total:91.2 },{ name:'甘肃',code:'620000',total:87.6 },
|
|
|
- { name:'青海',code:'630000',total:86.4 },{ name:'宁夏',code:'640000',total:88.1 },{ name:'新疆',code:'650000',total:84.8 },
|
|
|
+ { name:'上海', total:99.1 },{ name:'江苏', total:98.5 },
|
|
|
+ { name:'浙江', total:97.8 },{ name:'福建', total:96.1 },
|
|
|
+ { name:'安徽', total:94.5 },
|
|
|
].sort((a,b)=>b.total-a.total)
|
|
|
-const nameMap = Object.fromEntries(provinceData.map(d => [d.code, d.name]))
|
|
|
-
|
|
|
-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([])
|
|
|
@@ -103,41 +79,16 @@ const sLoading = ref(false), scoreList = ref([])
|
|
|
// 中期评估图表
|
|
|
const initCharts = () => {
|
|
|
nextTick(() => {
|
|
|
- if (scoreMap.value) {
|
|
|
- const c0 = echarts.init(scoreMap.value)
|
|
|
- c0.setOption({
|
|
|
- title: { text: '太湖流域各省中期评估总分', left: 'center', textStyle: { fontSize: 14 } },
|
|
|
- tooltip: { trigger: 'item', formatter: (p) => `${taihuNameMap[p.name] || p.name}: ${p.value} 分` },
|
|
|
- visualMap: { min: 90, max: 100, left: 'left', bottom: 10, text: ['高', '低'], inRange: { color: ['#e0f3f8','#abd9e9','#74add1','#4575b4','#313695'] } },
|
|
|
- series: [{ type: 'map', map: 'taihu', roam: false, label: { show: true, fontSize: 12, formatter: (p) => taihuNameMap[p.name] || p.name }, data: taihuMapData }]
|
|
|
- })
|
|
|
- window.addEventListener('resize', () => c0.resize())
|
|
|
- }
|
|
|
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' }
|
|
|
- ]
|
|
|
+ const c = echarts.init(provinceBar.value)
|
|
|
+ c.setOption({
|
|
|
+ title: { text: '太湖流域各省中期评估总分', left: 'center', textStyle: { fontSize: 14 } },
|
|
|
+ grid: { left: 60, right: 40, top: 40, bottom: 20 },
|
|
|
+ yAxis: { type: 'category', data: provinceData.map(d=>d.name), inverse: true },
|
|
|
+ xAxis: { type: 'value', name: '分', min: 90, max: 100 },
|
|
|
+ series: [{ type: 'bar', data: provinceData.map(d=>d.total), itemStyle: { color: '#409EFF' }, barMaxWidth: 24, label: { show: true, position: 'right', formatter: '{c} 分' } }]
|
|
|
})
|
|
|
- window.addEventListener('resize', () => c2.resize())
|
|
|
+ window.addEventListener('resize', () => c.resize())
|
|
|
}
|
|
|
})
|
|
|
}
|