- <template>
- <div class="app-container home" v-loading="isLoading">
- <div class="top">
- <div class="topLeft">
- <div class="tittle flex">
- <img src="@/assets/images/preassess/projectCont.png" alt="" />
- <div class="conttittle">奖励项目统计</div>
- </div>
- <div class="flex cont">
- <div v-for="i in projectList">
- <div class="box">{{ DaprojectList[i.value] }}<span>个</span></div>
- <div class="label" :style="{ color: i.label == '延期' ? '#FF4F4FFF' : '' }">
- {{ i.label }}
- </div>
- </div>
- </div>
- </div>
- <div class="topRight">
- <div class="tittle flex">
- <img src="@/assets/images/preassess/projectMongy.png" alt="" />
- <div class="conttittle">累计项目奖励金额</div>
- </div>
- <div class="flex cont">
- <div v-for="i in conttList">
- <div class="box">{{ DaprojectList[i.value] }} <span>万元</span></div>
- <div class="label">{{ i.label }}</div>
- </div>
- </div>
- </div>
- </div>
- <div class="center flex">
- <div class="centerLeft">
- <div class="ectittle conttittle">项目类型统计</div>
- <homeEcharts v-if="isChart4" :data="data1"></homeEcharts>
- </div>
- <div class="center_div">
- <div class="ectittle conttittle">建设单位统计</div>
- <project v-if="isChart" :data="data2"></project>
- </div>
- <div class="centerright">
- <div class="ectittle conttittle">月度发放金额统计</div>
- <queryChat v-if="isChart2 && data3.xData.length > 0" :data="data3"></queryChat>
-
- <div style="text-align: center; margin-top: 30%; color: #ddd" v-else>暂无数据</div>
- </div>
- </div>
- <div class="footer flex">
- <div class="footerLeft">
- <div class="top">
- <div class="topLeft">
- <div class="tittle flex">
- <div class="conttittle">项目类型发放金额统计</div>
- </div>
- </div>
- </div>
- <minxChar v-if="isChart4 && data4.xData.length > 0" :data="data4"></minxChar>
- <div style="text-align: center; margin-top: 30%; color: #ddd" v-else>暂无数据</div>
- </div>
- <div class="footerright" style="position: relative">
- <div class="ectittle conttittle">年度发放金额统计</div>
- <VBar v-if="isChart5" :data="data5"></VBar>
- </div>
- </div>
- </div>
- </template>
- <script setup name="Index">
- import homeEcharts from './homeEcharts/index.vue';
- import VBar from './homeEcharts/VBar.vue';
- import queryChat from './homeEcharts/queryChat.vue';
- import minxChar from './homeEcharts/minxChar.vue';
- import project from './homeEcharts/project.vue';
- import {
- projectTypeList,
- selectProjectCount,
- selectProjectMoneyTotal,
- selectProjectEchartByYear,
- selectProjectQualityHomePage,
- selectProjectContractHomePage,
- selectProjectPatrolHomePage,
- } from '@/api/project/mainReward';
- import { data1, data2, data3, data4, data5, conttList, projectCont, projectList } from './homeEcharts/index';
- const activeName = ref('build');
- let years = ref('');
- const isLoading = ref(true);
- const data = new Date();
- const year = data.getFullYear();
- const date1 = ref(data);
- const date2 = ref(data);
- const date3 = ref(data);
- const date4 = ref(data);
- const date5 = ref(data);
- const date6 = ref(data);
- const date7 = ref(data);
- const isChart = ref(false);
- const isChart1 = ref(false);
- const isChart2 = ref(false);
- const isChart4 = ref(false);
- const isChart5 = ref(false);
- const DaprojectList = ref([]);
- const DaconttList = ref([]);
- const DaprojectCont = ref([]);
- //x项目统计
- const selectProjectCountM = async p => {
- let { data } = await selectProjectCount(p);
- DaprojectList.value = data;
-
- data5.value.xData = [];
- data5.value.yData = [];
- data.variousYearStatistics?.forEach(i => {
- data5.value.xData.push(i.key + '年');
- data5.value.yData.push(i.value);
- isChart5.value = true;
- });
- isLoading.value = false;
- isLoading.value = false;
- };
- //项目金额
- const selectProjectMoneyTotalM = async p => {
- let { data } = await selectProjectMoneyTotal(p);
- DaconttList.value = data;
- isLoading.value = false;
- };
- // 项目类型、项目建设状态、项目状态的统计
- const selectProjectEchartByYearM = async p => {
- let { data } = await selectProjectEchartByYear(p);
- let array1 = [];
- let array2 = [];
- data.forEach(i => {
- array1.push(getprojectTList(i.key));
- array2.push(i.value);
- });
- data2.value.xData = array1;
- data2.value.yData = array2;
-
- isLoading.value = false;
- isChart.value = true;
- };
- //切换tabs 查询 项目类型、项目建设状态、项目状态的统计
- function handleClick({ props: { name } }) {
- isLoading.value = true;
- isChart1.value = false;
- selectProjectEchartByYearM({
- year: years.value || year,
- searchModel: name,
- });
- if (name == 'projectStatus') {
- data2.value.padding = [0, 108, 0, 0];
- } else {
- data2.value.padding = [0, 0, 0, 0];
- }
- }
- //项目质量统计
- const selectProjectQualityHomePageM = async p => {
- let { data } = await selectProjectQualityHomePage(p);
- data3.value.xData = [];
- data3.value.yData = [];
- // let arr1 = [];
- let arr2 = [];
- data.forEach(i => {
- data3.value.xData.push(i.key + '月' || '无标题');
- arr2.push(i.totalMoney);
- data3.value.yData = {
- paymentMoney: arr2,
- };
- isChart2.value = true;
- });
- isLoading.value = false;
- };
- //项目类型发放金额统计
- const selectProjectContractHomePageM = async p => {
- let { data } = await selectProjectContractHomePage(p);
- DaprojectCont.value = data;
- let arr1 = [];
- let array2 = [];
- let arr3 = [];
- data4.value.xData = [];
- data4.value.yData = [];
- data.forEach(i => {
- arr1.push(i.totalMoney);
- array2.push({ name: getprojectTList(i.key), value: i.value });
- arr3.push(i.value);
- data4.value.xData.push(getprojectTList(i.key));
- data4.value.yData = {
- contractMoney: arr1,
- contractCount: arr3,
- };
- data1.value.xData = array2;
- isChart4.value = true;
- });
- isLoading.value = false;
- };
-
- //获取项目类型
- function getprojectTList(i) {
- let arr = '';
- projectTList.value.forEach(k => {
- if (i == k.id) {
- arr = k.projectTypeName;
- } else {
- arr = '其它';
- }
- });
- return arr;
- }
- const projectTList = ref([]);
- async function projectTypeListM(i) {
- let { data } = await projectTypeList();
- projectTList.value = data;
- selectProjectContractHomePageM(year);
- }
- onMounted(() => {
- selectProjectEchartByYearM(year);
- selectProjectCountM();
- selectProjectMoneyTotalM({ year });
- selectProjectQualityHomePageM(year);
- projectTypeListM();
- });
- </script>
- <style scoped lang="scss">
- @import '@/assets/styles/variables.module.scss';
- .home {
- height: calc(100vh - 100px);
- width: 100%;
- overflow: hidden;
-
- .top {
- display: flex;
- justify-content: space-between;
- .topLeft,
- .topRight {
- height: 120px;
- box-shadow: 0px 2px 3px 0px $mainColor2;
- background-color: $mainColor1;
- border-radius: 6px;
- margin: 10px 15px;
- flex: 1;
- .tittle {
- font-weight: bold;
- color: #fff;
- padding: 5px;
- position: relative;
- .top_time {
- position: absolute;
- right: 0.5%;
- }
- div {
- margin-left: 10px;
- }
- }
- .label {
- font-size: 14px;
- }
- }
- }
- .ectittle {
- font-size: 18px;
- font-weight: bold;
- color: #fff;
- position: absolute;
- left: 3%;
- top: 2%;
- }
- }
- .center {
- justify-content: space-between;
- margin: 10px 10px 10px 15px;
- .center_div,
- .centerLeft,
- .centerright {
- height: 270px;
- flex: 1;
- box-shadow: 0px 2px 3px 0px $mainColor2;
- background-color: $mainColor1;
- position: relative;
-
- .center_time {
- position: absolute;
- right: 0.5%;
- z-index: 1;
- }
- }
- .center_div {
- margin: 0 20px;
- padding: 0 10px;
- }
- }
-
- .flex {
- display: flex;
- align-items: center;
- }
-
- .cont {
- justify-content: center;
- text-align: center;
-
- div {
- flex: 1;
- }
-
- .box {
- border-right: none;
- font-size: 22px;
- font-family: Source Han Sans CN;
- font-weight: bold;
- color: #fff;
- span {
- color: '#fff';
- font-size: 14px;
- font-weight: 500;
- }
- }
- }
-
- .footer {
- width: 100%;
- display: flex;
- justify-content: space-between;
-
- .footerLeft,
- .footerright {
- flex: 1;
- box-shadow: 0px 2px 3px 0px $mainColor2;
- background-color: $mainColor1;
-
- .top {
- height: 20px;
- .topLeft {
- box-shadow: 0px 0 0 0;
- }
- }
- }
-
- .footerLeft {
- width: 65.7%;
- margin-left: 10px;
- }
-
- .footerright {
- width: 33%;
- margin: 0 20px;
- }
- }
-
- :deep .el-tabs__nav-wrap::after {
- background-color: #fff;
- }
-
- :deep .el-tabs__item.is-active {
- font-size: 16px;
- font-weight: bold;
- }
-
- :deep .el-tabs__active-bar {
- bottom: 0;
- left: 35px;
- height: 3px;
- width: 30px !important;
- }
- .conttittle {
- font-weight: 800;
- font-size: 18px;
- }
- </style>