postdischarge-ui/src/views/system/TaskStatistics/index.vue

<template>
  <div class="app-container home" ref="layout">
    <!-- 搜索条件 -->
    <div ref="topform" class="form">
      <el-form :model="queryParams" ref="queryForm" size="small" :inline="true">
        <el-form-item label="任务时间" prop="taskStartTime" label-width="90px">
          <el-date-picker
            v-model="dischargeTime"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            style="width: 220px"
            value-format="yyyy-MM-dd"
            end-placeholder="结束日期"
            @change="changeTime"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="模板名称" prop="questionInfoId">
          <span>
            <TemplateName
              @on-template="messageontemplateword"
              :templateId="questionInfoId"
              :query="questionInfoIdname"
            ></TemplateName>
          </span>
        </el-form-item>

        <el-form-item
          label="出院/就诊时间"
          prop="visitStartTime"
          label-width="120px"
        >
          <el-date-picker
            v-model="dischargeTimevisit"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            style="width: 220px"
            value-format="yyyy-MM-dd"
            end-placeholder="结束日期"
          >
          </el-date-picker>
        </el-form-item>

        <el-form-item>
          <el-button
            type="primary"
            icon="el-icon-search"
            size="mini"
            @click="handleQuery"
            >搜索</el-button
          >
          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
            >重置</el-button
          >
        </el-form-item>
      </el-form>
    </div>
    <!-- 底部 -->
    <div
      ref="table"
      :style="{ 'max-height': maxTableHeight + 'px' }"
      class="bottomsstics"
    >
      <!-- 左侧 -->
      <div class="left">
        <!-- <div> -->
        <div
          v-for="(item, index) in NameList"
          :key="index"
          class="itemlist"
          :class="itemid == item.id ? 'allactive' : 'all'"
          @click="itemdata(item)"
        >
          <div
            style="width: 88%; margin: 0 auto; border-bottom: 1px solid #dcdfe6"
          >
            <!-- <el-popover
              placement="top"
              trigger="hover"
              :content="item.questionnaireName"
            >
              <div class="title" slot="reference">
                {{ item.questionnaireName }}
              </div>
            </el-popover> -->
            <div class="title" slot="reference">
              {{ item.questionnaireName }}
            </div>

            <div class="progress">时间:{{ item.createTime }}</div>
            <!-- <div class="times">填写率:{{ item.totle }}%</div>
            <div class="progress">
              <el-progress :percentage="50" :show-text="false"></el-progress>
              <span>12/45</span>
            </div> -->
          </div>
        </div>
        <!-- </div> -->
      </div>
      <!-- 右侧 -->
      <div class="right">
        <div class="righttitle">{{ newname }} {{ time }}</div>
        <div class="tabledata" v-for="(item, index) in tableData" :key="index">
          <div class="toptitle">
            第{{ index + 1 }}题:{{ item.questionName }}

            <span v-if="item.questionType == 'MULTIPLE_CHOICE'"
              >【单选题】</span
            >
            <span v-if="item.questionType == 'MULTIPLE_CHOICE_QUESTIONS'"
              >【多选题】</span
            >
            <span v-if="item.questionType == 'COMBINATION_RADIO_SUBJECT'"
              >【组合单选题】</span
            >
            <span v-if="item.questionType == 'COMBINATION_MULTIPLE_SUBJECT'"
              >【组合多选题】</span
            >
          </div>
          <div ref="table" class="tables">
            <el-table
              :max-height="maxTableHeight"
              v-loading="loading"
              :data="item.questionnaireTaskOptionStatisticsVos"
            >
              <el-table-column label="选项" align="center" prop="optionName" />
              <el-table-column
                label="人数"
                align="center"
                prop="choiceNumber"
              />
              <el-table-column
                label="比例"
                align="center"
                prop="choiceProportion"
              >
                <template slot-scope="scope">
                  <el-progress
                    :percentage="
                      scope.row.choiceProportion
                        ? scope.row.choiceProportion
                        : 0
                    "
                  ></el-progress>
                </template>
              </el-table-column>
              <el-table-column
                label="操作"
                align="center"
                class-name="small-padding fixed-width"
              >
                <template slot-scope="scope">
                  <el-button
                    size="mini"
                    type="text"
                    @click="handleUpdate(scope.row)"
                    >查看</el-button
                  >
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { questionnaireTaskStatistics, selectQuestionInfoList } from '@/api/system/TaskStatistics'
import TemplateName from "@/views/manage/components/TemplateName";

export default {
  name: "TaskStatistics",
  components: { TemplateName },
  data() {
    return {

      show: false,
      maxTableHeight: undefined,
      // 任务时间
      dischargeTime: [],
      // 出院/就诊时间
      dischargeTimevisit: [],
      loading: false,
      newname: '',//标题
      time: '',//时间
      NameList: [],
      //   列表、
      tableData: [],
      itemid: "",
      questionInfoId: '',
      questionInfoIdname: 0,
      queryParams: {
        taskStartTime: null,
        taskEndTime: null,
        visitStartTime: null,
        visitEndTime: null,
        questionInfoId: null,
      },
    }
  },
  watch: {
    dischargeTime: {
      handler(val) {
        if (val) {
          this.queryParams.taskStartTime = this.dischargeTime[0];
          this.queryParams.taskEndTime = this.dischargeTime[1];
  
        }else{
          this.dischargeTime = []
          this.queryParams.taskStartTime = null
          this.queryParams.taskEndTime = null

        }
      },
      deep: true,
      immediate: true,
    },
    dischargeTimevisit: {
      handler(val) {
        if (val) {
          this.queryParams.visitStartTime = this.dischargeTimevisit[0];
        this.queryParams.visitEndTime = this.dischargeTimevisit[1];
    
        }else{
          this.dischargeTimevisit = []
          this.queryParams.visitStartTime = null
          this.queryParams.visitEndTime = null
        }
      },
      deep: true,
      immediate: true,
    }
  },
  created() {
    // this.getDefaultDateRange()
    this.getlistleft()
  },
  mounted() {
    this.getMaxTableHeight()
    this.screenChange()

  },
  methods: {
    hidePopover() {
      this.showPopover = false;
    },
    // 右侧列表
    getlist() {
      questionnaireTaskStatistics(this.queryParams).then(res => {
        this.tableData = res.data.data
      })
    },
    // 左侧列表
    getlistleft() {
      selectQuestionInfoList().then(res => {
        this.NameList = res
        this.queryParams.questionInfoId = this.NameList[0].id
        this.itemid = this.NameList[0].id
        this.newname = this.NameList[0].questionnaireName
        this.time = this.NameList[0].createTime
        this.getlist()
      })

    },
    changeTime(e) {
      this.show = false;
    },
    //模版名称
    messageontemplateword(item) {
      this.queryParams.questionInfoId = item.questionInfoId;
      this.itemid = item.questionInfoId
      this.newname = item.questionnaireName
      this.time = item.createTime
    },
    //计算一周的时间
    getDefaultDateRange() {
      this.show = true;
      const endDate = new Date(); // 今天的日期
      const startDate = new Date();
      startDate.setDate(endDate.getDate() - 6); // 往前倒退七天
      console.log(startDate, endDate);
      this.dischargeTime[0] = startDate;
      this.dischargeTime[1] = endDate;
      this.queryParams.taskStartTime = this.formatDate(this.dischargeTime[0]);
      this.queryParams.taskEndTime = this.formatDate(this.dischargeTime[1]);
    },
    formatDate(date) {
      const year = date.getFullYear();
      const month = String(date.getMonth() + 1).padStart(2, '0'); // 月份从0开始，需要加1
      const day = String(date.getDate()).padStart(2, '0');
      return `${year}-${month}-${day}`;
    },
    // 查看
    handleUpdate(row) {
      this.$router.push({
        path: "/statisticalAnalysis/datialdata",
        query: {
          path: "/statisticalAnalysis/TaskStatistics",
          questionInfoId: row.questionInfoId ? row.questionInfoId : '',
          questionSubjectOptionId: row.questionSubjectOptionId ? row.questionSubjectOptionId : '',
          optionChooseSign: row.optionChooseSign ? row.optionChooseSign : '',

        },
      });

    },
    // 左侧点击
    itemdata(item) {
      this.itemid = item.id
      this.newname = item.questionnaireName
      this.time = item.createTime
      this.queryParams.questionInfoId = item.id
      // this.getlist()
      this.queryParams.questionInfoId = null
      this.questionInfoId = null
      this.questionInfoIdname += 1;
      var obj = {
        questionInfoId: item.id,
        taskStartTime: this.queryParams.taskStartTime,
        taskEndTime: this.queryParams.taskEndTime,
        visitStartTime: this.queryParams.visitStartTime,
        visitEndTime: this.queryParams.visitEndTime,
      }
      questionnaireTaskStatistics(obj).then(res => {
        this.tableData = res.data.data
      })
    },
    // 重置
    resetQuery() {
      this.queryParams.questionInfoId = null,
        this.questionInfoId = null,
        this.dischargeTime = [];
      this.dischargeTimevisit = [];
      this.queryParams.taskStartTime = "";
      this.queryParams.taskEndTime = "";
      this.resetForm("queryForm");
      this.questionInfoIdname += 1;
      console.log(this.queryParams, 'queryParams0000000000');
      this.getlistleft();
    },
    // 搜索
    handleQuery() {
      if (this.dischargeTime?.length > 0) {
        if (this.show == true) {
          this.queryParams.taskStartTime = this.formatDate(this.dischargeTime[0]);
          this.queryParams.taskEndTime = this.formatDate(this.dischargeTime[1]);

        } else if (this.show == false) {
          this.queryParams.taskStartTime = this.dischargeTime[0];
          this.queryParams.taskEndTime = this.dischargeTime[1];

        }

      }
      else {
        this.queryParams.taskStartTime = null;
        this.queryParams.taskEndTime = null;
      }
      if (this.dischargeTimevisit?.length > 0) {
        this.queryParams.visitStartTime = this.dischargeTimevisit[0];
        this.queryParams.visitEndTime = this.dischargeTimevisit[1];
      } else {
        this.queryParams.visitStartTime = null;
        this.queryParams.visitEndTime = null;

      }
      this.getlist();
    },
    changeTime() { },
    // 获取表格最高高度
    getMaxTableHeight() {
      const windowInnerHeight = window.innerHeight // 屏幕可视高度
      const formDiv = this.$refs.topform
      this.maxTableHeight = windowInnerHeight - 104 - this.getBoxHeight(formDiv)
    },
    // 屏幕resize监听
    screenChange() {
      // 屏幕resize监听事件：一旦屏幕宽高发生变化，就会执行resize
      window.addEventListener('resize', this.getMaxTableHeight, true)
      // 将屏幕监听事件移除
      // 这步是必须的。离开页面时不移除，再返回，或者进入到别的有相同元素的页面会报错
      // 或者将这里的方法直接写在beforeDestroy函数中也可以
      this.$once('hook:beforeDestroy', () => {
        window.removeEventListener('resize', this.getMaxTableHeight, true)
      })
    },

  }

}
</script>

<style scoped lang="scss">
::-webkit-scrollbar {
  width: 5px;
}

::-webkit-scrollbar-thumb {
  border-radius: 5px;
  background: #c0c0c0;
}

::-webkit-scrollbar-track {
  width: 5px;
}
::v-deep .el-progress {
  width: 64%;
  display: inline-block;
}
.app-container {
  padding: 0 !important;
}
.app-container {
  background: #f1f3f5;
  width: 100%;
  padding: 20px 20px 20px 20px;
}
.home {
  .form {
    width: 98%;
    margin: 10px auto;
    padding: 13px 0 0 0;
    background-color: #fff !important;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    margin: 10px auto 5px;
  }
  .bottomsstics {
    width: 98%;
    margin: 0 auto;
    height: 100%;
    overflow-y: auto;
    display: flex;
    justify-content: space-around;
    .left {
      height: 100%;
      width: 18%;
      background: #fff;
      overflow-y: auto;
      .allactive {
        width: 100%;
        background: #e8f4ff;
      }
      .all {
        width: 100%;
        margin: 0 auto;
        // height: 99px;
      }
      .itemlist {
        // width: 94%;
        margin: 0 auto;
        // height: 99px;

        .title {
          font-size: 19px;
          font-weight: 600;
          color: black;
          // overflow: hidden;
          // text-overflow: ellipsis;
          // white-space: nowrap;
          // padding: 8px 0 10px 0px;
          padding: 23px 0 10px 0px;
        }
        .times {
          padding: 0px 0 10px 0px;
          font-size: 16px;
          color: #aaacb2;
        }
        .progress {
          font-size: 16px;

          padding: 0px 0 23px 0px;
        }
        span {
          margin-left: 17px;
          color: #aaacb2;
        }
      }
    }
    .right {
      width: 100%;
      height: 100%;
      background: #fff;
      margin-left: 4px;
      overflow-y: auto;
      .righttitle {
        font-size: 19px;
        font-weight: 600;
        color: black;
        padding: 20px 0 10px 30px;
      }
      .tabledata {
        margin-bottom: 13px;
        .tables {
          margin: 0 auto;
          width: 97%;
        }
        .toptitle {
          font-size: 18px;
          font-weight: 600;
          color: black;
          padding: 20px 0 15px 30px;
        }
      }
    }
  }
  .col-item {
    margin-bottom: 20px;
  }

  ul {
    padding: 0;
    margin: 0;
  }

  font-family: "open sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 13px;
  color: #676a6c;
  overflow-x: hidden;
  overflow-y: hidden;

  ul {
    list-style-type: none;
  }

  h4 {
    margin-top: 0px;
  }

  h2 {
    margin-top: 10px;
    font-size: 26px;
    font-weight: 100;
  }

  p {
    margin-top: 10px;

    b {
      font-weight: 700;
    }
  }

  .update-log {
    ol {
      display: block;
      list-style-type: decimal;
      margin-block-start: 1em;
      margin-block-end: 1em;
      margin-inline-start: 0;
      margin-inline-end: 0;
      padding-inline-start: 40px;
    }
  }
}
</style>