<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 ? '-13px 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 :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==1" 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 :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 11px"> {{ qzmyd.realScore }}/{{ qzmyd.itemScore }}</span></span
>
<el-tag :type="qzmyd.realValue=='有所提升' ?'success' :'warning'" round style="float:right">{{ 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.itemScore)
},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>
