yd_qycpfb/jp-ui/src/views/modules/reportmanage/reportContinueQuestion.vue

<template>
  <div class="page">
    <h2 style="text-align: center;">全区"企业大走访"正在推动解决问题一览表（截止{{searchForm.end}}）</h2>
    <div style="margin: 5px;">日期选择：<el-date-picker size="mini" v-model="value2" type="daterange" @change="changeTime"
        unlink-panels range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" align="right" unlink-panels>
      </el-date-picker></div>
    <div class="report_main">
      <table border="1">
        <tr>
          <!-- <td rowspan="2">总序号</td> -->
          <td style="width: 60px;" rowspan="2">序号</td>
          <td style="width: 7%" rowspan="2">企业名称</td>
          <td style="width: 7%" rowspan="2">走访领导及区直单位</td>
          <td style="width: 7%" rowspan="2">属地</td>
          <td style="width: 7%" rowspan="2">问题类型</td>
          <td style="width: 7%" rowspan="2">企业提交问题时间</td>
          <td style="width: 15%" rowspan="2">问题详情描述</td>
          <td style="width: 20%" rowspan="2">目前进展情况</td>
          <td style="width: 7%" rowspan="2">办理结果</td>
          <td style="width: 7%" rowspan="2">办结时间</td>
          <td colspan="2">主办单位</td>
        </tr>
        <tr>
          <td style="width: 8%">主办</td>
          <td style="width: 8%">协办</td>
        </tr>
        <tr>
          <td colspan="13" style="text-align: left;">(一) 正在办理问题{{onesum}}个
          </td>
        </tr>
        <template v-if="oneList.length > 0" v-for="(item,index) in oneList">
          <tr>
            <td v-if="item.length > 0" colspan="13" style="text-align: left;">({{index + 1}})
              {{item[0].q_type}}{{item.length}}个
            </td>
          </tr>
          <tr v-for="(item1,i) in item" :key="item1.record_id">
            <td>{{i + 1}}</td>
            <td>{{item1.qy_name}}</td>
            <td>{{item1.officer}}</td>
            <td>{{item1.qy_sd}}</td>
            <td>{{item1.q_type}}</td>
            <td>{{item1.subtime}}</td>
            <td>{{item1.des}}</td>
            <td>{{item1.des6}}</td>
            <td>{{item1.op_type_name}}</td>
            <td>{{item1.create_date}}</td>
            <td>{{item1.des2}}</td>
            <td>{{item1.des4}}</td>
          </tr>
        </template>
        <tr v-if="oneList.length <= 0"><td colspan="13">暂无数据</td></tr>
        <tr>
          <td colspan="13" style="text-align: left;">(二) 难以解决问题{{twosum}}个
          </td>
        </tr>
        <template v-if="twoList.length > 0" v-for="(item,index) in twoList">
          <tr>
            <td v-if="item.length > 0" colspan="13" style="text-align: left;">({{index + 1}})
              {{item[0].q_type}}{{item.length}}个
            </td>
          </tr>
          <tr v-for="(item1,i) in item" :key="item1.record_id">
            <td>{{i + 1}}</td>
            <td>{{item1.qy_name}}</td>
            <td>{{item1.officer}}</td>
            <td>{{item1.qy_sd}}</td>
            <td>{{item1.q_type}}</td>
            <td>{{item1.subtime}}</td>
            <td>{{item1.des}}</td>
            <td>{{item1.des6}}</td>
            <td>{{item1.op_type_name}}</td>
            <td>{{item1.create_date}}</td>
            <td>{{item1.des2}}</td>
            <td>{{item1.des4}}</td>
          </tr>
        </template>
         <tr v-if="twoList.length <= 0"><td colspan="13">暂无数据</td></tr>
        <tr>
          <td colspan="13" style="text-align: left;">(三) 持续跟踪问题{{threesum}}个
          </td>
        </tr>
        <template v-if="threeList.length > 0" v-for="(item,index) in threeList">
          <tr>
            <td v-if="item.length > 0" colspan="13" style="text-align: left; padding-left: 10px;">({{index + 1}})
              {{item[0].q_type}}{{item.length}}个
            </td>
          </tr>
          <tr v-for="(item1,i) in item" :key="item1.record_id">
            <td>{{i + 1}}</td>
            <td>{{item1.qy_name}}</td>
            <td>{{item1.officer}}</td>
            <td>{{item1.qy_sd}}</td>
            <td>{{item1.q_type}}</td>
            <td>{{item1.subtime}}</td>
            <td>{{item1.des}}</td>
            <td>{{item1.des6}}</td>
            <td>{{item1.op_type_name}}</td>
            <td>{{item1.create_date}}</td>
            <td>{{item1.des2}}</td>
            <td>{{item1.des4}}</td>
          </tr>
        </template>
        <tr v-if="threeList.length <= 0"><td colspan="13">暂无数据</td></tr>
      </table>
    </div>
  </div>
</template>

<script>
  import dzfQuestionService from '@/api/question/dzfQuestionService'
  export default {
    data() {
      return {
        searchForm: {
          start: '2025-04-01',
          end: '',
        },
        value2: [new Date()],
        onesum:0,
        twosum:0,
        threesum:0,
        loading: false,
        oneList: [],
        twoList: [],
        threeList: []
      }
    },
    activated() {
      const start = new Date();
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
      this.searchForm.start = start
      this.searchForm.end = this.formatDate(new Date())
      this.value2 = [this.searchForm.start, this.searchForm.end]
      this.getData();
    },
    methods: {
      getData() {
        dzfQuestionService.getReportContinueVisit(this.searchForm.start, this.searchForm.end).then(({
          data
        }) => {
          this.oneList = data.one
          this.twoList = data.two
          this.threeList = data.three
          this.onesum = data.oneSum
          this.twosum = data.twoSum
          this.threesum = data.threeSum
        })
      },
      formatDate(date) {
        const year = date.getFullYear();
        const month = date.getMonth() + 1;
        const day = date.getDate();

        const formattedDate = `${year}-${month.toString().padStart(2, '0')}-${day.toString().padStart(2, '0')}`;
        return formattedDate;
      },
      changeTime() {
        this.searchForm.start = this.formatDate(this.value2[0])
        this.searchForm.end = this.formatDate(this.value2[1])
        this.getData()
      }
    },
  }
</script>

<style>
  .page {
    background-color: #fff;
  }

  .report_main {
    text-align: center;
    height: 75vh;
    overflow: auto;
  }

  .report_main table {
    margin-left: auto;
    margin-right: auto;
    display: inline-block;
    width: 80%;

  }

  .report_main table {
    border-collapse: collapse;
    line-height: 20px;
    /* 使边框合并 */
  }

  .report_main td,
  .report_main th {
    border: 1px solid black;
    height: 30px;
    padding: 5px;
  }
</style>