测试完成

WXL (wul)

4 天以前 15371b329484632c987e349e50f41cab90d3ae8c

 src/views/sfstatistics/percentage/index.vue

@@ -1,17 +1,369 @@
<template>
  <div>随访统计</div>
  <div class="follow-up-statistics">
    <!-- 搜索表单区域 -->
    <div class="search-section">
      <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="98px">
        <el-form-item label="统计类型" prop="userName">
          <el-select v-model="queryParams.statisticaltype" placeholder="请选择统计类型">
            <el-option v-for="item in Statisticallist" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
          <el-select
            style="margin-left: 10px"
            v-if="queryParams.statisticaltype == 1"
            v-model="queryParams.leavehospitaldistrictcodes"
            size="medium"
            multiple
            filterable
            placeholder="请选择病区"
          >
            <el-option v-for="item in flatArrayhospit" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
          <el-select
            v-else-if="queryParams.statisticaltype == 2"
            v-model="queryParams.deptcodes"
            size="medium"
            multiple
            filterable
            placeholder="请选择科室"
          >
            <el-option v-for="item in flatArraydept" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </el-form-item>

        <el-form-item label="服务类型" prop="userName">
          <el-select v-model="queryParams.serviceType" multiple placeholder="请选择">
            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </el-form-item>

        <el-form-item label-width="200" label="应随访时间范围" prop="userName">
          <el-date-picker
            v-model="queryParams.dateRange"
            value-format="yyyy-MM-dd HH:mm:ss"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :default-time="['00:00:00', '23:59:59']"
          />
        </el-form-item>

        <el-form-item>
          <el-button type="primary" icon="el-icon-search" size="medium" @click="handleQuery">搜索</el-button>
          <el-button icon="el-icon-refresh" size="medium" @click="resetQuery">重置</el-button>
        </el-form-item>

        <el-button type="warning" plain icon="el-icon-download" size="medium" @click="handleExport">导出</el-button>
        <el-button type="primary" plain icon="el-icon-data-line" size="medium" @click="showChartDialog">统计趋势图</el-button>
      </el-form>
    </div>

    <!-- Tab切换区域 -->
    <div class="tab-section">
      <el-tabs v-model="activeTab" @tab-click="handleTabClick">
        <el-tab-pane label="首次随访" name="first">
          <FirstFollowUp
            ref="firstFollowUp"
            :query-params="queryParams"
            :flat-array-hospit="flatArrayhospit"
            :flat-array-dept="flatArraydept"
            :options="options"
            :orgname="orgname"
            @view-details="viewDetails"
            @see-details="Seedetails"
          />
        </el-tab-pane>

        <el-tab-pane label="再次随访" name="second">
          <SecondFollowUp
            ref="secondFollowUp"
            :query-params="queryParams"
            :flat-array-hospit="flatArrayhospit"
            :flat-array-dept="flatArraydept"
            :options="options"
            :orgname="orgname"
            @view-details="viewDetails"
          />
        </el-tab-pane>

        <el-tab-pane label="延续护理统计" name="continued" v-if="orgname == '省立同德翠苑院区'">
          <ContinuedCare
            ref="continuedCare"
            :query-params="queryParams"
            :flat-array-hospit="flatArrayhospit"
            :flat-array-dept="flatArraydept"
            :options="options"
            :orgname="orgname"
            @view-details="viewDetails"
          />
        </el-tab-pane>
      </el-tabs>
    </div>

    <!-- 弹窗区域 -->
    <ChartDialog
      :visible="chartDialogVisible"
      :data="chartData"
      :active-tab="activeTab"
      @close="chartDialogVisible = false"
    />

    <DetailDialog
      :visible="infotitleVisible"
      :title="infotitle"
      :data="infotitlelist"
      :search-name="searchName"
      @close="infotitleVisible = false"
      @search="handleSearch"
      @details-go="SeedetailsgGo"
    />

    <TimelyRateDialog
      :visible="SeedetailsVisible"
      :loading="Seedloading"
      :data="logsheetlist"
      :total="patienttotal"
      :query-params="patientqueryParams"
      @close="SeedetailsVisible = false"
      @search="Seedetailstion"
      @details-go="SeedetailsgGo"
    />
  </div>
</template>

<script>
import FirstFollowUp from './components/FirstFollowUp.vue'
import SecondFollowUp from './components/SecondFollowUp.vue'
import ContinuedCare from './components/ContinuedCare.vue'
import ChartDialog from './components/ChartDialog.vue'
import DetailDialog from './components/DetailDialog.vue'
import TimelyRateDialog from './components/TimelyRateDialog.vue'


export default {
  data() {
    return {};
  name: 'FollowUpStatistics',
  components: {
    FirstFollowUp,
    SecondFollowUp,
    ContinuedCare,
    ChartDialog,
    DetailDialog,
    TimelyRateDialog
  },
  data() {
    return {
      activeTab: 'first',
      orgname: localStorage.getItem('orgname') || '',
      Statisticallist: [
        { label: '病区统计', value: 1 },
        { label: '科室统计', value: 2 }
      ],
      options: this.$store.getters.tasktypes,
      queryParams: {
        serviceType: [2],
        dateRange: [],
        statisticaltype: 1,
        leavehospitaldistrictcodes: ['all'],
        deptcodes: []
      },
      flatArrayhospit: [],
      flatArraydept: [],
      allDeptCodes: [],
      allWardCodes: [],
      showSearch: true,

  created() {},
      // 弹窗相关状态
      chartDialogVisible: false,
      chartData: [],
      infotitleVisible: false,
      SeedetailsVisible: false,
      searchName: '',
      infotitle: '',
      infotitlelist: [],
      patienttotal: 0,
      logsheetlist: [],
      Seedloading: false,
      patientqueryParams: {
        pn: 1,
        ps: 10
      }
    }
  },
  created() {
    this.getDeptTree()
  },
  methods: {
    getDeptTree() {
      // 科室列表
      this.flatArraydept = this.$store.getters.belongDepts.map((dept) => {
        return {
          label: dept.deptName,
          value: dept.deptCode
        }
      })
      this.allDeptCodes = this.$store.getters.belongDepts.map((dept) => dept.deptCode)

  methods: {},
};
      // 病区列表
      this.flatArrayhospit = this.$store.getters.belongWards.map((ward) => {
        return {
          label: ward.districtName,
          value: ward.districtCode
        }
      })
      this.allWardCodes = this.$store.getters.belongWards.map((ward) => ward.districtCode)

      this.flatArraydept.push({ label: '全部', value: 'all' })
      this.flatArrayhospit.push({ label: '全部', value: 'all' })
    },

    handleTabClick(tab) {
      this.activeTab = tab.name
      this.loadCurrentTabData()
    },

    loadCurrentTabData() {
      switch (this.activeTab) {
        case 'first':
          this.$refs.firstFollowUp.loadData()
          break
        case 'second':
          this.$refs.secondFollowUp.loadData()
          break
        case 'continued':
          this.$refs.continuedCare.loadData()
          break
      }
    },

    handleQuery() {
      this.queryParams.startTime = this.parseTime(this.queryParams.dateRange[0])
      this.queryParams.endTime = this.parseTime(this.queryParams.dateRange[1])

      if (this.queryParams.statisticaltype == 1) {
        this.queryParams.deptcodes = []
      } else if (this.queryParams.statisticaltype == 2) {
        this.queryParams.leavehospitaldistrictcodes = []
      }

      this.loadCurrentTabData()
    },

    resetQuery() {
      this.queryParams.dateRange = []
      this.queryParams.leavehospitaldistrictcodes = []
      this.handleQuery()
    },

    async handleExport() {
      switch (this.activeTab) {
        case 'first':
          await this.$refs.firstFollowUp.exportTable()
          break
        case 'second':
          await this.$refs.secondFollowUp.exportTable()
          break
        case 'continued':
          await this.$refs.continuedCare.exportTable()
          break
      }
    },

    showChartDialog() {
      this.chartData = this.getCurrentTabData()
      this.chartDialogVisible = true
    },

    getCurrentTabData() {
      switch (this.activeTab) {
        case 'first':
          return this.$refs.firstFollowUp.tableData
        case 'second':
          return this.$refs.secondFollowUp.tableData
        case 'continued':
          return this.$refs.continuedCare.tableData
        default:
          return []
      }
    },

    viewDetails(row, title) {
      this.infotitle = title
      this.infotitlelist = row
      this.infotitleVisible = true
    },

    Seedetails(row) {
      this.SeedetailsVisible = true
      this.Seedloading = true

      this.$refs.firstFollowUp.selectTimelyRate(row, this.queryParams.dateRange)
        .then(response => {
          this.logsheetlist = response.data.detail
          this.patienttotal = response.data.total
          this.Seedloading = false
        })
    },

    Seedetailstion() {
      this.$refs.firstFollowUp.selectTimelyRate(this.patientqueryParams)
        .then(response => {
          this.logsheetlist = response.data.detail
          this.patienttotal = response.data.total
        })
    },

    SeedetailsgGo(row) {
      this.SeedetailsVisible = false
      let type = ''
      if (row.preachformson && row.preachformson.includes('3')) {
        type = 1
      }
      setTimeout(() => {
        this.$router.push({
          path: '/followvisit/record/detailpage/',
          query: {
            taskid: row.taskid,
            patid: row.patid,
            id: row.id,
            Voicetype: type
          }
        })
      }, 300)
    },

    handleSearch() {
      // 搜索逻辑
    }
  }
}
</script>

<style lang="scss" scoped></style>
<style lang="scss" scoped>
.follow-up-statistics {
  padding: 20px;
  background: #ffff;
  border: 1px solid #dcdfe6;
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.12), 0 0 6px 0 rgba(0, 0, 0, 0.04);

  .search-section {
    margin-bottom: 20px;
  }

  .tab-section {
    ::v-deep .el-tabs__header {
      margin-bottom: 20px;
    }

    ::v-deep .el-tabs__item {
      font-size: 16px;
      padding: 0 20px;
      height: 40px;
      line-height: 40px;
    }

    ::v-deep .el-tabs__active-bar {
      height: 3px;
    }
  }
}
</style>