<template> <div v-loading="loading" element-loading-text="数据加载中..." element-loading-background="rgba(122, 122, 122, 0.8)" class="app-container flex" id="container" > <div class="top flex flex_center"> <div v-for="(i, index) in topList" class="flex astic" :key="i.bg" :class="{ flexClass: index == 0, astic_border: clickList == i }" @click="TopClick(i)" :style="{ background: `url(${i.bg})` }" > <div v-if="index > 0" style="margin-right: 50px"></div> <div class="time flex"> <div class="year" :class="{ year_one: index == 0 }"> {{ i.name }} </div> <div v-if="index > 0" class="khtime">考核时间: {{ i.datetime }}</div> </div> <div v-if="index > 0" class="defen flex"> <div class="total">{{ i.score }}分</div> <div class="fenshu khtime">总得分</div> </div> </div> </div> <div class="center flex"> <div v-for="(i, index) in centerList" :key="i.itemTypeContent" class="flex astic" :class="{ flexClass: index == 0 }"> <div class="cont top flex"> <div> <span class="span"></span> <span class="name"> {{ i.itemTypeContent }} </span> </div> <div class="fz"> 分值 <span class="total">{{ i.totalScore }}</span> </div> </div> <div class="cont dfFlx"> <div class="fz">得分 <span style="color:#4285F4">{{ i.realScore }}</span></div> <el-progress class="progress" text-inside striped color="#4285F4" :format="format" :percentage="(i.realScore/i.totalScore *100).toFixed(2)||0" :stroke-width="15" /> </div> <div class="cont dfFlx"> <div class="fz">考核进展 </div> <el-progress class="progress" text-inside color="#45E28D" :percentage="i.progress" :stroke-width="15" striped /> </div> </div> </div> <div class="three flex"> <div class="left flex flexClass" style="overflow-y: auto "> <!-- 内涝防治 --> <div class="nnfzbz" v-for="(i, index) in threeLeftDate" > <div style="margin: 10px 0"> <span class="span" v-show="i.allname"> </span> <span class="tittle">{{ i.allname }} </span> </div> <div class="tittle"> <span class="racal" v-if="i.tittle"></span> {{ i.tittle }} <span v-if="i.tittle" style="color: #30dc7f;"> {{ nlfzdf?.realScore }}<span>/ {{nlfzdf?.totalScore }}</span></span> </div> <div class="dbqk"> <el-tag round :type="i.realScore - i.itemScore >= 0 ? 'success' : 'error'">{{ i.realScore - i.itemScore >= 0 ? '达标' : '未达标' }}</el-tag> <div class="dffz">得分/分值</div> <div class="dffzqk">{{ i.realScore||0 }}/{{ i.itemScore }}</div> </div> <div :class="{ dashbord: i.isBorder ? true : '' }"></div> <rightTop :style="{ margin: i.tittle ? '-17px 0' : 0 }" v-if="isChart1" :yData="i.yData" :yData2="i.yData2" :xData="i.xData" :realValue="i.realValue" :itemUnit="i.itemUnit" :bottom="i.bottom" :data="rightTopRef" :itemTarget="i.itemTarget" :all="i.all" > </rightTop> </div> <!-- 雨水收集与利用 --> <div class="nnfzbz" v-for="(i, index) in threeLeftDate1"> <div style="margin: 10px 0"> <span class="span" v-show="i.allname"></span> <span class="tittle">{{ i.allname }}</span> </div> <div class="tittle"> <span class="racal" v-if="i.tittle"></span> {{ i.tittle }} </div> <div class="dbqk"> <el-tag round :type=" i.realScore- i.itemScore >= 0 ? 'success' : 'error'">{{ i.realScore- i.itemScore >= 0? '达标' : '未达标' }}</el-tag> <div class="dffz">得分/分值</div> <div class="dffzqk">{{ i.realScore||0 }}/{{ i.itemScore }}</div> </div> <div :class="{ dashbord: i.isBorder ? true : '' }"></div> <rightTop :style="{ margin: i.tittle ? '-4px -4px 0 4px' : 0 }" v-if="isChart1" :yData="i.yData" :yData2="i.yData2" :xData="i.xData" :realValue="i.realValue" :itemUnit="i.itemUnit" :bottom="i.bottom" :data="rightTopRef" :itemTarget="i.itemTarget" :all="i.all" > </rightTop> </div> <!-- 其他相关指标 --> <div class="nnfzbz otherzb" v-for="(i, index) in threeLeftDate2" > <div style="margin: 10px 0"> <span class="span" v-show="i.allname"></span> <span class="tittle">{{ i.allname }}</span> </div> <div class="tittle" style="display: block"> <span class="racal" v-if="i.tittle"></span> {{ i.tittle }} <span style="margin:0 8px"> 分值/得分</span><span v-if="i.tittle" style="color: #30dc7f;"> {{ otherXgzb?.realScore }}<span>/{{otherXgzb?.totalScore }}</span></span> </div> <div class="dbqk" v-for="(k, index) in i.itemScore" style="width: 32%; display: inline-block; text-align: center"> <el-tag round :type="i.realScore[index]-i.itemScore[index] >= 0 ? 'success' : 'error'">{{ i.realScore[index]-i.itemScore[index] >= 0? '达标' : '未达标' }}</el-tag> <div class="dffz">得分/分值</div> <div class="dffzqk">{{ i.realScore[index] }}/{{ i.itemScore[index] }}</div> </div> <div :class="{ dashbord: i.isBorder ? true : '' }"></div> <centerRight :style="{ margin: i.tittle ? '1px 0' : 0 }" v-if="isChart1" :yData="i.yData" :yData2="i.yData2" :xData="i.xData" :bottom="i.bottom" :data="rightTopRef" :realValue="i.realValue" :itemUnit="i.itemUnit" :itemTarget="i.itemTarget" :all="i.all" > </centerRight> </div> <!-- 建设工程管理 --> <div v-for="(i, index) in fourList" class="jsgcgl nnfzbz" style="display: flex;"> <div style="margin: 18px 0" > </div> <div class="tittle flex tittle_foot" v-if='index==0' style="align-self: self-start;"> <div class="racal" v-if="i.tittle"></div> {{ i.tittle }} </div> <div class="bzqk" v-if='index==0'> <el-tag v-if="i.value != 'other'" round :type=" i.standardFlag === '' ? 'warning' :i.standardFlag === '1' ?'success': 'error'">{{ i.standardFlag === '' ? '未填报' : i.standardFlag === '1' ? '达标': '未达标' }}</el-tag> </div> <div class="tittle flex tittle_fs" v-if="i.value == 'jsgcgl' &&index==0"> <span class="df" >得分/分值 <div style="color: #30dc7f;text-align: center;margin: 10px 0;"> {{ i.realScore }} / {{ i.itemScore }} </div></span > </div> <div style="left:-6px" :class="{ dashbord: index==0 ? true : '' }"></div> <footLeft v-if="isChart1 && index == 0" :xData="i.xData" :yData="i.yData" :data="LeftFoot"></footLeft> </div> </div> </div> <div class="foot flex"> <!-- 资金绩效 --> <div class="right" > <div style="margin: 10px 0"> <span class="span"></span> <span class="tittle">资金绩效</span> </div> <div> <el-table :data="tableData" border style="width: 410px; height: 100%; overflow-y: scroll"> <el-table-column show-overflow-tooltip v-for="(col, i) in columnList" :key="i" :prop="col.prop" :label="col.label" align="center" > <template #default="{ row }" v-if="col.prop == 'standardFlag'"> <el-tag v-if="row.standardFlag===''" type="warning">未填报</el-tag> <el-tag v-else-if="row.standardFlag==='102'" type="warning">无法评价</el-tag> <el-tag v-else :type="row.standardFlag === '1' ? 'success' : 'error'">{{ row.standardFlag === '1' ? '达标' : '未达标' }}</el-tag> </template> </el-table-column> </el-table> </div> </div> <div class="left flex flexClass"> <div v-for="(i, index) in fourList" style="position: relative"> <div style="margin: 10px 0"> </div> <div class="tittle flex tittle_foot" v-if="index==1 ||index==2"> <div > <span class="span" v-show="i.name"> </span> <span class="tittle">{{ i.name }} </span> </div> <div class="tittle" style="font-size: 14px;"> <span class="racal" v-if="i.tittle"></span> {{ i.tittle }} </div> <span class="bzqk"> <el-tag v-if="i.value != 'other'" round :type=" footCenterRef?.xData[0]?.standardFlag == '1' &&footCenterRef?.xData[1]?.standardFlag == '1' ? 'success' : 'error'">{{ footCenterRef?.xData[0]?.standardFlag == '1' &&footCenterRef?.xData[1]?.standardFlag == '1' ? '达标' : '未达标' }}</el-tag> </span> </div> <div class="tittle flex tittle_fs" style="display: inline-block;" :key="k" v-for="k,v in footCenterRef.xData" > <div class="df" v-if="index == 1 && v==0" style="margin:0 1%" >得分/分值 <span> {{ realScoreAll }} / {{liFaStaticsListAll }} </span></div > </div> <!-- 立法及长效机制 --> <footCenter :data="footCenterRef" v-if=" index == 1 &&isChart1 "></footCenter> <div :class="{ dashbord:index ==2 ? true : '' }"></div> <!-- 其他相其他相管理绩效 --> <div v-if="index==2" class="footTable"> <el-table :data="tableData1" border style="width: 380px; height: 89%; overflow-y: scroll"> <el-table-column show-overflow-tooltip v-for="(col, i) in columnList1" :key="i" :prop="col.prop" :label="col.label" align="center" > <template #default="{ row }" v-if="col.prop == 'standardFlag'"> <el-tag v-if="row.standardFlag===''" type="warning">未填报</el-tag> <el-tag v-else-if="row.standardFlag==='102'" type="warning">无法评价</el-tag> <el-tag v-else :type="row.standardFlag === '1' ? 'success' : 'error'">{{ row.standardFlag == '1' ? '达标' : '未达标' }}</el-tag> </template> </el-table-column> </el-table> </div> </div> </div> <!-- 群众满意度曲线 --> <div class="right"> <div style="margin: 10px 0"> <span class="span"></span> <span class="tittle">群众满意度曲线</span> </div> <div class="flex" style="align-items: center; justify-content: space-between"> <span class="dw">单位%</span> <div> <span class="tittle df" >得分/分值<span style="color: #30dc7f; margin: 0 1px"> {{ qzmyd.realScore }}/{{ qzmyd.itemScore }}</span></span > <el-tag style="margin-left:-7px" :type="qzmyd.realValue=='有所提升' ?'success' :'warning'" round >{{ qzmyd.realValue }}</el-tag> </div> </div> <footRight v-if="isChart1" :data="footRightTopRef"></footRight> </div> </div> </div> </template> <script setup> import { ref, reactive, computed } from 'vue'; import footLeft from './home/rightComp/footLeft'; import rightTop from './home/rightComp/top'; import footCenter from './home/rightComp/footCenter'; import footRight from './home/rightComp/footRight'; import centerRight from './home/rightComp/centerRight'; import { LeftFoot, footRightTopRef, rightTopRef, footCenterRef, columnList, columnList1, fourList } from './home/leftComp/index'; import { three_year_statics, performanceEvaluateItem } from '@/api/home'; const isChart1 = ref(false); const clickList = ref({}); const tableData = ref([]); const loading = ref(true); const tableData1 = ref(); const qzmyd = ref({}); const topList = ref([{ name: '年度绩效考核得分', score: 0, bg: 'image4.png' }]); const centerList = ref([]); const threeLeftDate = ref([]); const threeLeftDate1 = ref([]); const nlfzdf=ref({}) const yssjlyl=ref({}) const otherXgzb=ref({}) const threeLeftDate2 = ref([{ itemScore: [], realScore: [], xData: [], yData: [], yData2: [], all: '' ,itemUnit:[],itemTarget:[],realValue:[] }]); function TopClick(v) { if (v.year) { clickList.value = v; isChart1.value = false; performanceEvaluateItemM(v.year); } } function format(percentage) { return `${percentage} %` } //获取三年数据 async function three_year_staticsM(p) { let { data } = await three_year_statics(p); if (data.length > 0) { data.map((i, index) => { topList.value.push({ year: i.year, name: i.year + '年度绩效考核得分', bg: (index + 1) + 'bg.png', score: i.score || 0, datetime: i.datetime, }); }); clickList.value = topList.value[2]; performanceEvaluateItemM(data[1].year); } } const liFaStaticsListAll=ref(0) const realScoreAll=ref(0) //年度统计报表数据 async function performanceEvaluateItemM(p) { loading.value = true; let { data: { typeStaticsList, chanChuStaticsList, ziJinStaticsList, otherStaticsList, liFaStaticsList, qunZongStaticsList, projectStatics, }, } = await performanceEvaluateItem(p); centerList.value = typeStaticsList; tableData.value = ziJinStaticsList; console.log("tableDatatableDatatableData", tableData) tableData1.value = otherStaticsList; qzmyd.value = qunZongStaticsList; footRightTopRef.value.yData = [qunZongStaticsList.lastYearSatisfyPercent, qunZongStaticsList.satisfyPercent]; footCenterRef.value.xData = liFaStaticsList; liFaStaticsListAll.value=liFaStaticsList.reduce((p,v)=>{ return p+=v.itemScore },0) realScoreAll.value=liFaStaticsList.reduce((p,v)=>{ return p+=Number(v.realScore) },0) threeLeftDate2.value = [{ itemScore: [], realScore: [], xData: [], yData: [], yData2: [], all: '',itemUnit:[],itemTarget:[],realValue:[] }]; //建设工程管理 fourList.value.map((i, index) => { if (i.value == 'jsgcgl') { i.itemScore = projectStatics?.itemScore || 0; i.realScore = projectStatics.realScore || 0; i.standardFlag = projectStatics.standardFlag; i.xData=[] i.yData=[] projectStatics.projectTypeStatisticsList.forEach(k => { i.xData.push(k.typeName); i.yData.push(k.typeCount); }); } }); let arrr1 = []; chanChuStaticsList.forEach(i => { switch (i.itemTypeContent) { case '其他相关指标': arrr1 = i.chanChuItemList; otherXgzb.value=i break; case '雨水收集与利用相关指标': threeLeftDate1.value = i.chanChuItemList; yssjlyl.value=i break; case '内涝防治相关指标': threeLeftDate.value = i.chanChuItemList; nlfzdf.value=i break; } }); // 内涝防治相关指标 threeLeftDate.value.map((i, k) => { i.xData = [i.itemContent]; i.yData = [i.realValue||0] ; i.yData2 = [i.itemTarget||0]; i.realValue = [i.realValue]; i.itemTarget = [i.itemTarget]; i.itemUnit = [i.itemUnit]; i.all = nlfzdf.value.totalScore; if (k == 0) { i.allname = '产出绩效'; i.tittle = '内涝防治'; } }); // 雨水收集与利用 threeLeftDate1.value.map((i, k) => { i.xData = [i.itemContent]; i.yData = [i.realValue||0] ; i.yData2 = [i.itemTarget||0]; i.realValue = [i.realValue]; i.itemTarget = [i.itemTarget]; i.itemUnit = [i.itemUnit]; i.all = yssjlyl.value.totalScore; if (k == 0) { i.tittle = '雨水收集与利用'; i.isBorder = 1; } }); //其他相关指标 threeLeftDate2.value.map((i, k) => { arrr1.forEach((m, n) => { i.xData.push(m.itemContent); i.yData.push(m.realValue||0); i.yData2.push(m.itemTarget); i.itemUnit.push(m.itemUnit||''); i.itemTarget.push(m.itemTarget||0); i.realValue .push(m.realValue||0); i.all = otherXgzb.value.totalScore || 0; i.itemScore.push(m.itemScore); i.realScore.push(m.realScore); }); if (k == 0) { i.tittle = '其他相关指标'; i.isBorder = 1; } }); console.log("threeLeftDate2", threeLeftDate2) isChart1.value = true; loading.value = false; } onMounted(() => { three_year_staticsM(); }); </script> <style scoped lang="scss"> @import './home/index.scss'; </style>