You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
jin_ji_hu/src/views/homeTwo/index.vue

671 lines
24 KiB

<template>
<div class="home-box">
<el-row type="flex" class="main-row">
<el-col :span="16" class="home-main-left">
<div class="enterprise-header">
<span class="dataCloudMap-birght"></span>
<div class="enterprise-header-title">专项资金荣誉投资等统计</div>
</div>
<el-row class="home-enterprise-top">
<el-col
:span="12"
class="enterprise-honor"
id="one-table"
style="margin-right: 10px"
>
<div class="box-header" id="one-table-header">
<span class="garden"></span>
<span class="box-header-title">企业荣誉资质</span>
</div>
<div
class="two-tables"
:style="{ height: tabOneHeader + 'px' }"
v-if="enterpriseHonor.length > 0"
>
<div
class="table-items"
v-for="item in enterpriseHonor"
:key="item.id"
>
<div class="promoteProject-top">
<span class="span-one" @click="goProjectInfo(item)"
><dict-tag
:options="dict.type.project_small_type"
:value="item.projectSmallType"
/></span>
</div>
<div class="promoteProject-bottom">
<div class="promoteProject-bottom-left">
项目类别
<span class="span-two"
><dict-tag
:options="dict.type.project_categories"
:value="item.projectBigType"
/></span>
</div>
<div class="promoteProject-bottom-right">
申报时间
10 months ago
<span class="span-three">{{ formatYear(item) }}</span>
</div>
</div>
</div>
</div>
<el-empty
:style="{ height: tabOneHeader + 'px' }"
:image-size="160"
v-else
></el-empty>
</el-col>
<el-col :span="12" class="relevancy-project">
<div class="box-header">
<span class="garden"></span>
<span class="box-header-title">关联项目进展</span>
</div>
<div
class="promoteProject-box-wai-box"
:style="{ height: tableTwoHeight + 'px' }"
v-if="tableTwoData.length > 0"
>
<div
class="promoteProject-box-div"
v-for="(item, index) in tableTwoData"
:key="index"
>
<div class="promoteProject-top">
<span class="span-one" @click="goProjectInfo(item)"
><dict-tag
:options="dict.type.project_small_type"
:value="item.projectSmallType"
/></span
>
</div>
<div class="promoteProject-bottom">
<div class="promoteProject-bottom-left">
项目类别
<span class="span-two"
><dict-tag
:options="dict.type.project_categories"
:value="item.projectBigType"
/></span>
</div>
<div class="promoteProject-bottom-right">
申报时间
10 months ago
<span class="span-three">{{ formatYear(item) }}</span>
</div>
</div>
<div
class="promoteProject-position"
:class="
item.status == 0 ||
item.status == 1 ||
item.status == 2 ||
item.status == 3
? 'orange'
: item.status == 6
? 'green'
: item.status == 7 ||
item.status == 8 ||
item.status == 9 ||
item.status == 10
? 'red'
: ''
"
>
{{
item.status == 0
? "待填报"
: item.status == 1
? "初审中"
: item.status == 2
? "复审中"
: item.status == 3
? "终审中"
: item.status == 6
? "已填报"
: item.status == 7
? "复审不通过"
: item.status == 8
? "初审不通过"
: item.status == 9
? "终审不通过"
: item.status == 10
? "初审驳回"
: ""
}}
</div>
</div>
</div>
<el-empty
:style="{ height: tableTwoHeight + 'px' }"
:image-size="160"
v-else
></el-empty>
</el-col>
</el-row>
<el-row class="home-enterprise-bottom">
<el-col :span="24" class="capital-declare" id="table-two">
<div class="box-header" id="table-two-title">
<span class="garden"></span>
<span class="box-header-title">往年专项资金拨付情况</span>
</div>
<section>
<el-table
v-loading="loadingTab"
class="dataMap-two-table"
:data="tableData"
:height="tableTwoHeight"
border
:header-cell-style="{ background: '#E8F3FC' }"
>
<el-table-column
label="项目名称"
prop="projectName"
align="center"
>
<template slot-scope="scope">
<div
class="project-trace-table"
:class="
scope.row.projectName == '区级总部' ||
scope.row.projectName == '市级服务业领军'
? ''
: 'project-trace-table-gray'
"
@click="goProjectInfoLeft(scope.row)"
>
{{ scope.row.projectName }}
</div>
</template>
</el-table-column>
<el-table-column
label="项目类别"
prop="projectType"
align="center"
>
<template slot-scope="scope">
<div v-if="scope.row.projectBigType">
<dict-tag
:options="dict.type.project_categories"
:value="scope.row.projectBigType"
/>
</div>
<span v-else></span>
</template>
</el-table-column>
<el-table-column
label="拨付金额(万元)"
prop="fundAmount"
align="center"
/>
<el-table-column
label="专项资金拨付时间"
prop="time"
align="center"
>
<template slot-scope="scope">
<div class="project-trace-table-number">
{{
scope.row.appropriationTime
? formatDate(scope.row.appropriationTime, 2)
: ""
}}
</div>
</template>
</el-table-column>
<el-table-column label="企业名称" prop="qymc" align="center" />
<el-table-column
label="专项类型"
prop="specialType"
align="center"
/>
<el-table-column label="摘要" prop="summary" align="center" />
</el-table>
</section>
</el-col>
</el-row>
</el-col>
<el-col :span="8" class="home-main-right">
<el-row type="flex" class="main-two-row">
<el-col :span="24" class="work-main-left" style="height: 49.5%">
<div class="main-left">
<div class="left-header">
<div class="left-header-titleS">
<span class="dataCloudMap-birght"></span>
<div class="left-header-title">智能提醒</div>
</div>
<el-button
@click="enterjump"
type="text"
v-if="remindList.length > 0"
>>> 更多记录</el-button
>
</div>
<div class="left-main" v-if="remindList.length > 0">
<el-card
shadow="never"
v-for="(item, index) in remindList"
:key="index"
:class="item.isRead == 1 ? 'el-card-border' : ''"
>
<div class="warn-main">
<div class="warn-main-left" v-if="item.alertManner == 2">
<div class="warn-main-img">
<img src="@/assets/images/warn-green.png" alt="" />
</div>
<div class="warn-main-content">
<div class="content-title">
{{ item.declarationName }}预计{{
item.daysAdvance
}}天后填报结束
</div>
<div class="content-middle">
{{ item.alertContent }}
</div>
<!-- <div class="content-time">{{ item.alertTime }}</div> -->
<div class="tixing-duanxin">
<div class="content-time">{{ item.alertTime }}</div>
<div class="content-time content-time-two">
已发送短信
</div>
</div>
</div>
</div>
<div
class="warn-main-left"
v-else-if="
item.alertManner == 1 &&
item.qymc &&
item.alertRecipients == 2
"
>
<div class="warn-main-img">
<img src="@/assets/images/warn-orange.png" alt="" />
</div>
<div class="warn-main-content">
<div class="content-title" style="display: flex">
{{ item.qymc }}<dict-tag
:options="dict.type.project_small_type"
:value="item.declarationName"
/>
</div>
<div class="content-middle">
{{ item.alertContent }}
</div>
<!-- <div class="content-time">{{ item.alertTime }}</div> -->
<div class="tixing-duanxin">
<div class="content-time">{{ item.alertTime }}</div>
<div class="content-time content-time-two">
已发送短信
</div>
</div>
</div>
</div>
<div
class="warn-main-left"
v-else-if="item.alertManner == 1 && item.projectId"
>
<div class="warn-main-img">
<img src="@/assets/images/warn-orange.png" alt="" />
</div>
<div class="warn-main-content">
<div class="content-title">
{{ item.declarationName }}
</div>
<div class="content-middle">
{{ item.alertContent }}
</div>
<!-- <div class="content-time">{{ item.alertTime }}</div> -->
<div class="tixing-duanxin">
<div class="content-time">{{ item.alertTime }}</div>
<div class="content-time content-time-two">
已发送短信
</div>
</div>
</div>
</div>
<div
class="warn-main-left different-left"
v-else-if="item.alertManner == 1 && !item.projectId"
>
<div class="warn-main-img">
<img src="@/assets/images/warn-blue.png" alt="" />
</div>
<div class="warn-main-content">
<div class="content-title">{{ item.alertContent }}</div>
<!-- <div class="content-time">{{ item.alertTime }}</div> -->
<div class="tixing-duanxin">
<div class="content-time">{{ item.alertTime }}</div>
<div class="content-time content-time-two">
已发送短信
</div>
</div>
</div>
</div>
<div class="warn-main-right">
<div
class="warn-main-right-chakan"
@click="putMemo(item)"
>
查看
</div>
<div
class="warn-main-right-status"
:class="item.isRead == 1 ? 'status-unread' : ''"
>
{{ item.isRead == 1 ? "未读" : "已读" }}
</div>
</div>
</div>
</el-card>
</div>
<el-empty class="left-main" :image-size="160" v-else></el-empty>
<!-- <div class="right-main" v-else>
<el-divider content-position="center">暂无</el-divider>
</div> -->
</div>
</el-col>
<el-col :span="24" class="work-main-right" style="height: 49.5%">
<div class="main-right" id="task-box">
<div class="right-header" id="task-header">
<div class="right-header-box">
<span class="dataCloudMap-birght"></span>
<div class="right-header-title">待办任务</div>
</div>
<el-button
@click="enterjumpTask"
type="text"
v-if="backlogArray.length > 0"
>>> 更多记录</el-button
>
</div>
<div
class="right-main"
:style="{ height: tabHeader + 'px' }"
v-if="backlogArray.length > 0"
v-loading="loading"
>
<div
class="main-items"
v-for="(item, index) in backlogArray"
:key="index"
:class="index % 2 == 0 ? '' : 'main-item'"
>
<div>{{ item.enterpriseDirectory }}</div>
<!-- <div>{{ item.enterpriseName }}</div> -->
<div>
{{
item.status == 0
? "待填报"
: item.status == 8
? "初审不通过"
: item.status == 10
? "初审退回修改"
: item.status == 7
? "复审不通过"
: item.status == 9
? "终审不通过"
: item.status == 5
? "终审通过"
: item.status == 1
? "初审中"
: item.status == 2
? "复审中"
: item.status == 3
? "终审中"
: item.status == 6
? "已填报"
: ""
}}
</div>
<!-- <div>审批知识产权材料</div> -->
<div
@click="MoreRecords(item.status)"
class="last_child_item"
:class="
item.status == 0
? 'tab-red'
: item.status == 10
? 'tab-red'
: 'last_child_item'
"
>
{{
item.status == 0
? "去填报"
: item.status == 10
? "去修改"
: "去查看"
}}
</div>
</div>
</div>
<el-empty
:style="{ height: tabHeader + 'px' }"
:image-size="160"
v-else
></el-empty>
<!-- <div class="right-main" v-else>
<el-divider content-position="center">暂无</el-divider>
</div> -->
</div>
</el-col>
</el-row>
</el-col>
</el-row>
<el-dialog
title="详情"
:visible.sync="open"
width="400px"
append-to-body
:close-on-click-modal="false"
>
<div class="team-main">
<div>提醒时间:</div>
<div>{{ info.alertTime }}</div>
</div>
<div class="team-main">
<div>提醒内容:</div>
<div>{{ info.alertContent }}</div>
</div>
</el-dialog>
</div>
</template>
<script>
import { listRecords } from "@/api/onlineDeclartion/records";
import {
chiefAll,
enterpriseAll,
changeIsRead,
} from "@/api/jin_ji_hu/intelligentReminder";
import { usualFund, enterpriseProject } from "@/api/jin_ji_hu/zijinbiao";
export default {
dicts: ["project_small_type", "project_categories"],
data() {
// 项目类别展示大类; 项目名称展示小类
return {
// 判断登陆用户是何身份⌈ 01 企业 02 政务 ⌋
// userType: this.$store.state.user.userType,
backlogArray: [],
queryParams: {
current: 1,
size: 10,
creditCode: this.$store.state.user.name,
orderChange: 1,
// statusStr: [0, 5, 7, 8, 9, 10],
},
// 是否显示弹出层
open: false,
fileList: [],
uploadList: [],
loading: false,
loadingTab: false,
remindList: [],
info: {},
tabHeader: 200,
tabOneHeader: 200,
tableTwoHeight: null,
tableData: [],
tableTwoData: [],
enterpriseHonor: [],
};
},
mounted() {
this.getListTwo();
this.cancalDebounce();
window.addEventListener("resize", this.cancalDebounce);
this.entRemind();
// 往年资金拨付比例
this.getUsualFund();
// 企业荣誉资质
this.getEnterpriseProjectOne();
// 关联项目进展
this.getEnterpriseProjectTwo();
},
beforeDestroy() {
window.removeEventListener("resize", this.cancalDebounce);
},
methods: {
// 企业荣誉资质
getEnterpriseProjectOne() {
enterpriseProject({ type: 1 }).then((res) => {
this.enterpriseHonor = res.data;
});
},
// 关联项目进展
getEnterpriseProjectTwo() {
enterpriseProject({ type: 2 }).then((res) => {
this.tableTwoData = res.data;
});
},
// 往年资金拨付比例
getUsualFund() {
usualFund().then((res) => {
this.tableData = res.data;
});
},
// 待填报
getListTwo() {
this.loading = true;
listRecords(this.queryParams).then((response) => {
this.backlogArray = response.data.records;
this.loading = false;
});
},
// 企业端智能提醒
entRemind() {
enterpriseAll({ current: 1, size: 20 }).then((res) => {
this.remindList = res.data.records;
});
},
// 企业荣誉资质/关联项目进展跳转
goProjectInfo(item) {
this.$router.push({
name: "projectInfo",
query: { userId: Number(item.id) },
});
},
// 往年专项资金申报
goProjectInfoLeft(item) {
// console.log(item,"item");
if (
item.projectName == "区级总部" ||
item.projectName == "市级服务业领军"
) {
if (item.projectId) {
this.$router.push({
name: "projectInfo",
query: { userId: Number(item.projectId) },
});
}
}
},
// 智能提醒跳转
enterjump() {
this.$router.push({
name: "WarningReminder",
});
},
// 智能提醒去查看并修改状态
putMemo(item) {
if (item.isRead == 1) {
changeIsRead({ id: item.id }).then((res) => {
this.entRemind();
});
}
if (item.projectId) {
this.$router.push({
name: "projectInfo",
query: { userId: Number(item.projectId) },
});
} else if (item.alertRecipients == 1 && item.alertManner == 2) {
this.$router.push({
name: "Online",
params: { statusChange: "0" },
});
} else if (item.alertManner == 1) {
this.open = true;
this.info = item;
}
},
// 更多记录待办任务
enterjumpTask() {
this.$router.push({
name: "AbnormalRemind",
});
},
// 更多记录
MoreRecords(status) {
if (status == 0 || status == 10) {
this.$router.push({
name: "Online",
params: { statusChange: "0" },
});
} else {
this.$router.push({
name: "Online",
params: { statusChange: "1" },
});
}
},
formatYear(time) {
if (time.fileJson) {
return this.parseTime(time.createTime, "{y}-{m}-{d}");
} else {
return time.projectYear;
}
},
formatDate(dateString, id) {
const year = dateString.slice(0, 4);
const month = dateString.slice(4, 6);
const day = dateString.slice(6, 8);
if (id == 1) {
return `${year}${month}${day}`;
} else {
return `${year}-${month}-${day}`;
}
},
// 屏幕尺寸变化
cancalDebounce() {
const element = document.getElementById("task-box"); // 通过元素的 ID 获取元素
const header = document.getElementById("task-header"); // 通过元素的 ID 获取元素
const elementHeight = element.offsetHeight;
const headerHeight = header.offsetHeight;
this.tabHeader = elementHeight - headerHeight - 30;
const oneTable = document.getElementById("one-table"); // 通过元素的 ID 获取元素
const oneHeader = document.getElementById("one-table-header"); // 通过元素的 ID 获取元素
const oneTableHeight = oneTable.offsetHeight;
const oneHeaderHeight = oneHeader.offsetHeight;
this.tabOneHeader = oneTableHeight - oneHeaderHeight - 45;
const twoTable = document.getElementById("table-two"); // 通过元素的 ID 获取元素
const twoHeader = document.getElementById("table-two-title"); // 通过元素的 ID 获取元素
const twoTableHeight = twoTable.offsetHeight;
const twoHeaderHeight = twoHeader.offsetHeight;
this.tableTwoHeight = twoTableHeight - twoHeaderHeight - 45;
},
},
};
</script>
<style lang="scss" scoped></style>