<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="topBox">
<div class="Annualperformance">
<div
class="bag_z"
v-for="(i, index) in topList"
@click="TopClick(i)"
:key="i.bg"
:class="{ flexClass: index == 0, astic_border: clickList == i }"
:style="{ background: `url(${i.bg})` }"
>
<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="achievements">
<div v-for="(i, index) in centerList" :key="i.itemTypeContent" :class="{ flexClass: index == 0 }" class="bag_a">
<div class="conttop">
<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="dfFlxa">
<div class="fz">考核进展</div>
<el-progress class="progress" text-inside color="#3AFFF8" :percentage="i.progress" :stroke-width="15" striped />
<div></div>
</div>
</div>
</div>
</div>
<!-- <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">考核进展</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: #3afff8">
{{ nlfzdf?.realScore }}<span>/ {{ nlfzdf?.totalScore }}</span></span
>
</div>
<div class="dbqk">
<el-tag round effect="dark" :type="i.realScore - i.itemScore >= 0 ? 'success' : 'error'">{{
i.realScore - i.itemScore >= 0 ? '达标' : '未达标'
}}</el-tag>
<div class="dffz">1得分/分值</div>
<div class="dffzqk">{{ i.realScore || 0 }}/{{ i.itemScore }}</div>
</div>
<div :class="{ dashbord: i.isBorder ? true : '' }"></div>
<rightTop
:style="{ margin: i.tittle ? '-14px 0 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 effect="dark" :type="i.realValue - i.itemTarget >= 0 ? 'success' : 'error'">{{
i.realValue - i.itemTarget >= 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: #3afff8">
{{ 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 effect="dark" :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
effect="dark"
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: #3afff8; 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" height="260px">
<el-table-column show-overflow-tooltip v-for="(col, i) in columnList" :key="i" :prop="col.prop" :label="col.label">
<template #default="{ row }" v-if="col.prop == 'standardFlag'">
<el-tag effect="dark" v-if="row.standardFlag === ''" type="warning">未填报</el-tag>
<el-tag effect="dark" 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" style="justify-content: space-around">
<div v-for="(i, index) in fourList">
<div class="tittle flex tittle_foot" v-if="index == 1 || index == 2">
<div style="margin-top: 10px">
<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
effect="dark"
v-if="i.value != 'other'"
round
:type="footCenterRef?.xData[0]?.standardFlag === '1' ? 'success' : 'error'"
>
{{ footCenterRef?.xData[0]?.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" style="margin: -10px 0">
<el-table :data="tableData1" height="240px">
<el-table-column show-overflow-tooltip v-for="(col, i) in columnList1" :key="i" :prop="col.prop" :label="col.label">
<template #default="{ row }" v-if="col.prop == 'standardFlag'">
<el-tag effect="dark" v-if="row.standardFlag === ''" type="warning">未填报</el-tag>
<el-tag effect="dark" 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: #3afff8; margin: 0 18px"> {{ qzmyd.realScore }}/{{ qzmyd.itemScore }}</span></span
>
<el-tag effect="dark" :type="qzmyd.standardFlag == 1 ? 'success' : 'warning'" round style="float: left">{{
qzmyd.standardFlag == 1 ? '有所提升' : qzmyd.standardFlag == 0 ? '有所降低' : '未填报'
}}</el-tag>
</div>
</div>
<footRight v-if="isChart1" :data="footRightTopRef"></footRight>
</div>
</div>
</div>
</template>
<script setup>
import footLeft from './footLeft';
import rightTop from './top';
import footCenter from './footCenter';
import footRight from './footRight';
import centerRight from './centerRight';
import { LeftFoot, footRightTopRef, rightTopRef, footCenterRef, columnList, columnList1, fourList } from './chart';
import { three_year_statics, performanceEvaluateItem } from '@/api/spongePerformance/home';
const { proxy } = getCurrentInstance();
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) {
// console.log(v.year, 'v.year');
if (v.year == 2024) {
proxy.$modal.msgWarning('请添加2024年数据');
return;
}
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) => {
console.log(i, 'iii');
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];
// 暂时假数据
// topList.value[1].score = '--';
// topList.value[2].score = 91;
// topList.value[3].score = '--';
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) => {
console.log(i, 'iiiii');
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 = '内涝防治';
}
});
console.log(threeLeftDate.value, 'threeLeftDate.value');
// 雨水收集与利用
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 './index.scss';
</style>
