jin_ji_hu/src/views/homeTwo/index.vue

<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">
                    申报时间：
                    <span class="span-three">{{ formatYear(item.createTime) }}</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">
                    申报时间：
                    <span class="span-three">{{ formatYear(item.createTime) }}</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" @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: {
        pageNum: 1,
        pageSize: 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.rows
        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){
      const year = time.slice(0, 4);
      let date = new Date();
      const currentYear = date.getFullYear(); //获取完整的年份(4位)
      if(Number(year) < Number(currentYear)) {
        return year;
      } else {
        return  this.parseTime(time, '{y}-{m}-{d}')
      }
    },
    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>