web_dist/src/views/clinic/interactive/ClinicSatisfied.vue

<template>
  <page-layer>
    <template #header>
      <el-date-picker type="daterange" v-model="dateRange" style="width: 200px" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
      <el-button icon="Search" type="primary" @click="fetchAssessments" style="margin-left: 4px">检索</el-button>
      <el-divider direction="vertical"></el-divider>
      <el-checkbox v-model="inquiry.onlyShowUnsatisfied" @change="handleSatisfiedChange">只看含有“不满意”的问卷</el-checkbox>
      <el-button icon="DataAnalysis" type="success" @click="executeAssessmentAnalyse" style="margin-left: 12px">问卷分析</el-button>
      <el-button type="primary" icon="Upload" @click="exportExcel">导出Excel</el-button>
    </template>
    <template #main>
      <el-table :data="assessments.list" stripe :height="tableHeight" highlight-current-row>
        <el-table-column prop="item1" label="药剂科"></el-table-column>
        <el-table-column prop="item3" label="放射科"></el-table-column>
        <el-table-column prop="item5" label="超声影像科"></el-table-column>
        <el-table-column prop="item7" label="检验科"></el-table-column>
        <el-table-column prop="item9" label="收费窗口"></el-table-column>
        <el-table-column prop="item11" label="门诊医护"></el-table-column>
        <el-table-column prop="item13" label="急诊医护"></el-table-column>
        <el-table-column prop="createDatetime" label="问卷时间"></el-table-column>
        <el-table-column label="操作">
          <template #default="scope">
            <el-button v-if="scope.row.deleted === 0" icon="Delete" type="danger" @click="changeAssessmentStatus(scope.row, 1)">删除</el-button>
            <el-button v-else icon="Refresh" type="success" @click="changeAssessmentStatus(scope.row, 0)">恢复</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="inquiry.pageNum"
          :page-sizes="[30, 50, 70, 100]"
          :page-size="inquiry.pageSize"
          layout="total, sizes, prev, pager, next"
          :total="assessments.totalSize"
          style="margin-top: 5px"
      ></el-pagination>
      <el-dialog v-model="showAnalyzeResult" title="门诊满意度调查分析" width="80%" :close-on-click-modal="false">
        <div style="font-size: 14px; font-weight: bold; color: black; margin-top: -12px">
          问卷总量：{{ analyzeResult.totalAssessmentsCount }}
          <el-divider direction="vertical"></el-divider>
          不满意问卷量：{{ analyzeResult.totalUnsatisfiedCount }}
          <el-divider direction="vertical"></el-divider>
          整体不满意度：{{ analyzeResult.totalUnsatisfiedPercentage }}
        </div>
        <div class="flex-line">
          <div class="flex-child">
            <div class="department-name">● 药剂科</div>
            <div class="department-summary">不满意问卷量：{{ analyzeResult.yjkUnsatisfiedCount }}，不满意度：{{ analyzeResult.yjkUnsatisfiedPercentage }}</div>
            <div class="option-summary">- 不满意指标（总量：{{ analyzeResult.yjkUnsatisfiedOption.totalOptionSize }}）</div>
            <div class="option-detail"><span class="option-name">叫号服务</span>不满意数量：{{ analyzeResult.yjkUnsatisfiedOption.jhfwCount }}（{{analyzeResult.yjkUnsatisfiedOption.jhfwPercentage}}）</div>
            <div class="option-detail"><span class="option-name">等待时长</span>不满意数量：{{ analyzeResult.yjkUnsatisfiedOption.ddscCount }}（{{analyzeResult.yjkUnsatisfiedOption.ddscPercentage}}）</div>
            <div class="option-detail"><span class="option-name">服务态度</span>不满意数量：{{ analyzeResult.yjkUnsatisfiedOption.fwtdCount }}（{{analyzeResult.yjkUnsatisfiedOption.fwtdPercentage}}）</div>
            <div class="option-detail"><span class="option-name">沟通解释</span>不满意数量：{{ analyzeResult.yjkUnsatisfiedOption.gtjsCount }}（{{analyzeResult.yjkUnsatisfiedOption.gtjsPercentage}}）</div>
            <div class="option-detail"><span class="option-name">及时响应</span>不满意数量：{{ analyzeResult.yjkUnsatisfiedOption.jsxyCount }}（{{analyzeResult.yjkUnsatisfiedOption.jsxyPercentage}}）</div>
            <div class="option-detail"><span class="option-name">服装礼仪</span>不满意数量：{{ analyzeResult.yjkUnsatisfiedOption.fzlyCount }}（{{analyzeResult.yjkUnsatisfiedOption.fzlyPercentage}}）</div>
            <div class="option-detail"><span class="option-name">准确率</span>不满意数量：{{ analyzeResult.yjkUnsatisfiedOption.zqlCount }}（{{analyzeResult.yjkUnsatisfiedOption.zqlPercentage}}）</div>
          </div>
          <div class="flex-child">
            <div class="department-name">● 放射科</div>
            <div class="department-summary">不满意问卷量：{{ analyzeResult.fskUnsatisfiedCount }}，不满意度：{{ analyzeResult.fskUnsatisfiedPercentage }}</div>
            <div class="option-summary">- 不满意指标（总量：{{ analyzeResult.fskUnsatisfiedOption.totalOptionSize }}）</div>
            <div class="option-detail"><span class="option-name">叫号服务</span>不满意数量：{{ analyzeResult.fskUnsatisfiedOption.jhfwCount }}（{{analyzeResult.fskUnsatisfiedOption.jhfwPercentage}}）</div>
            <div class="option-detail"><span class="option-name">等待时长</span>不满意数量：{{ analyzeResult.fskUnsatisfiedOption.ddscCount }}（{{analyzeResult.fskUnsatisfiedOption.ddscPercentage}}）</div>
            <div class="option-detail"><span class="option-name">服务态度</span>不满意数量：{{ analyzeResult.fskUnsatisfiedOption.fwtdCount }}（{{analyzeResult.fskUnsatisfiedOption.fwtdPercentage}}）</div>
            <div class="option-detail"><span class="option-name">沟通解释</span>不满意数量：{{ analyzeResult.fskUnsatisfiedOption.gtjsCount }}（{{analyzeResult.fskUnsatisfiedOption.gtjsPercentage}}）</div>
            <div class="option-detail"><span class="option-name">及时响应</span>不满意数量：{{ analyzeResult.fskUnsatisfiedOption.jsxyCount }}（{{analyzeResult.fskUnsatisfiedOption.jsxyPercentage}}）</div>
            <div class="option-detail"><span class="option-name">服装礼仪</span>不满意数量：{{ analyzeResult.fskUnsatisfiedOption.fzlyCount }}（{{analyzeResult.fskUnsatisfiedOption.fzlyPercentage}}）</div>
            <div class="option-detail"><span class="option-name">准确率</span>不满意数量：{{ analyzeResult.fskUnsatisfiedOption.zqlCount }}（{{analyzeResult.fskUnsatisfiedOption.zqlPercentage}}）</div>
          </div>
          <div class="flex-child">
            <div class="department-name">● 超声影像科</div>
            <div class="department-summary">不满意问卷量：{{ analyzeResult.csyxkUnsatisfiedCount }}，不满意度：{{ analyzeResult.csyxkUnsatisfiedPercentage }}</div>
            <div class="option-summary">- 不满意指标（总量：{{ analyzeResult.csyxkUnsatisfiedOption.totalOptionSize }}）</div>
            <div class="option-detail"><span class="option-name">叫号服务</span>不满意数量：{{ analyzeResult.csyxkUnsatisfiedOption.jhfwCount }}（{{analyzeResult.csyxkUnsatisfiedOption.jhfwPercentage}}）</div>
            <div class="option-detail"><span class="option-name">等待时长</span>不满意数量：{{ analyzeResult.csyxkUnsatisfiedOption.ddscCount }}（{{analyzeResult.csyxkUnsatisfiedOption.ddscPercentage}}）</div>
            <div class="option-detail"><span class="option-name">服务态度</span>不满意数量：{{ analyzeResult.csyxkUnsatisfiedOption.fwtdCount }}（{{analyzeResult.csyxkUnsatisfiedOption.fwtdPercentage}}）</div>
            <div class="option-detail"><span class="option-name">沟通解释</span>不满意数量：{{ analyzeResult.csyxkUnsatisfiedOption.gtjsCount }}（{{analyzeResult.csyxkUnsatisfiedOption.gtjsPercentage}}）</div>
            <div class="option-detail"><span class="option-name">及时响应</span>不满意数量：{{ analyzeResult.csyxkUnsatisfiedOption.jsxyCount }}（{{analyzeResult.csyxkUnsatisfiedOption.jsxyPercentage}}）</div>
            <div class="option-detail"><span class="option-name">服装礼仪</span>不满意数量：{{ analyzeResult.csyxkUnsatisfiedOption.fzlyCount }}（{{analyzeResult.csyxkUnsatisfiedOption.fzlyPercentage}}）</div>
            <div class="option-detail"><span class="option-name">准确率</span>不满意数量：{{ analyzeResult.csyxkUnsatisfiedOption.zqlCount }}（{{analyzeResult.csyxkUnsatisfiedOption.zqlPercentage}}）</div>
          </div>
          <div class="flex-child">
            <div class="department-name">● 检验科</div>
            <div class="department-summary">不满意问卷量：{{ analyzeResult.jykUnsatisfiedCount }}，不满意度：{{ analyzeResult.jykUnsatisfiedPercentage }}</div>
            <div class="option-summary">- 不满意指标（总量：{{ analyzeResult.jykUnsatisfiedOption.totalOptionSize }}）</div>
            <div class="option-detail"><span class="option-name">叫号服务</span>不满意数量：{{ analyzeResult.jykUnsatisfiedOption.jhfwCount }}（{{analyzeResult.jykUnsatisfiedOption.jhfwPercentage}}）</div>
            <div class="option-detail"><span class="option-name">等待时长</span>不满意数量：{{ analyzeResult.jykUnsatisfiedOption.ddscCount }}（{{analyzeResult.jykUnsatisfiedOption.ddscPercentage}}）</div>
            <div class="option-detail"><span class="option-name">服务态度</span>不满意数量：{{ analyzeResult.jykUnsatisfiedOption.fwtdCount }}（{{analyzeResult.jykUnsatisfiedOption.fwtdPercentage}}）</div>
            <div class="option-detail"><span class="option-name">沟通解释</span>不满意数量：{{ analyzeResult.jykUnsatisfiedOption.gtjsCount }}（{{analyzeResult.jykUnsatisfiedOption.gtjsPercentage}}）</div>
            <div class="option-detail"><span class="option-name">及时响应</span>不满意数量：{{ analyzeResult.jykUnsatisfiedOption.jsxyCount }}（{{analyzeResult.jykUnsatisfiedOption.jsxyPercentage}}）</div>
            <div class="option-detail"><span class="option-name">服装礼仪</span>不满意数量：{{ analyzeResult.jykUnsatisfiedOption.fzlyCount }}（{{analyzeResult.jykUnsatisfiedOption.fzlyPercentage}}）</div>
            <div class="option-detail"><span class="option-name">准确率</span>不满意数量：{{ analyzeResult.jykUnsatisfiedOption.zqlCount }}（{{analyzeResult.jykUnsatisfiedOption.zqlPercentage}}）</div>
          </div>
        </div>
        <div style="width: 100%; height: 1px; background: black; margin: 12px 0 2px 0"></div>
        <div class="flex-line">
          <div class="flex-child">
            <div class="department-name">● 收费窗口</div>
            <div class="department-summary">不满意问卷量：{{ analyzeResult.sfckUnsatisfiedCount }}，不满意度：{{ analyzeResult.sfckUnsatisfiedPercentage }}</div>
            <div class="option-summary">- 不满意指标（总量：{{ analyzeResult.sfckUnsatisfiedOption.totalOptionSize }}）</div>
            <div class="option-detail"><span class="option-name">叫号服务</span>不满意数量：{{ analyzeResult.sfckUnsatisfiedOption.jhfwCount }}（{{analyzeResult.sfckUnsatisfiedOption.jhfwPercentage}}）</div>
            <div class="option-detail"><span class="option-name">等待时长</span>不满意数量：{{ analyzeResult.sfckUnsatisfiedOption.ddscCount }}（{{analyzeResult.sfckUnsatisfiedOption.ddscPercentage}}）</div>
            <div class="option-detail"><span class="option-name">服务态度</span>不满意数量：{{ analyzeResult.sfckUnsatisfiedOption.fwtdCount }}（{{analyzeResult.sfckUnsatisfiedOption.fwtdPercentage}}）</div>
            <div class="option-detail"><span class="option-name">沟通解释</span>不满意数量：{{ analyzeResult.sfckUnsatisfiedOption.gtjsCount }}（{{analyzeResult.sfckUnsatisfiedOption.gtjsPercentage}}）</div>
            <div class="option-detail"><span class="option-name">及时响应</span>不满意数量：{{ analyzeResult.sfckUnsatisfiedOption.jsxyCount }}（{{analyzeResult.sfckUnsatisfiedOption.jsxyPercentage}}）</div>
            <div class="option-detail"><span class="option-name">服装礼仪</span>不满意数量：{{ analyzeResult.sfckUnsatisfiedOption.fzlyCount }}（{{analyzeResult.sfckUnsatisfiedOption.fzlyPercentage}}）</div>
            <div class="option-detail"><span class="option-name">准确率</span>不满意数量：{{ analyzeResult.sfckUnsatisfiedOption.zqlCount }}（{{analyzeResult.sfckUnsatisfiedOption.zqlPercentage}}）</div>
          </div>
          <div class="flex-child">
            <div class="department-name">● 急诊医护人员</div>
            <div class="department-summary">不满意问卷量：{{ analyzeResult.jzyhUnsatisfiedCount }}，不满意度：{{ analyzeResult.jzyhUnsatisfiedPercentage }}</div>
            <div class="option-summary">- 不满意指标（总量：{{ analyzeResult.jzyhUnsatisfiedOption.totalOptionSize }}）</div>
            <div class="option-detail"><span class="option-name">叫号服务</span>不满意数量：{{ analyzeResult.jzyhUnsatisfiedOption.jhfwCount }}（{{analyzeResult.jzyhUnsatisfiedOption.jhfwPercentage}}）</div>
            <div class="option-detail"><span class="option-name">等待时长</span>不满意数量：{{ analyzeResult.jzyhUnsatisfiedOption.ddscCount }}（{{analyzeResult.jzyhUnsatisfiedOption.ddscPercentage}}）</div>
            <div class="option-detail"><span class="option-name">服务态度</span>不满意数量：{{ analyzeResult.jzyhUnsatisfiedOption.fwtdCount }}（{{analyzeResult.jzyhUnsatisfiedOption.fwtdPercentage}}）</div>
            <div class="option-detail"><span class="option-name">沟通解释</span>不满意数量：{{ analyzeResult.jzyhUnsatisfiedOption.gtjsCount }}（{{analyzeResult.jzyhUnsatisfiedOption.gtjsPercentage}}）</div>
            <div class="option-detail"><span class="option-name">及时响应</span>不满意数量：{{ analyzeResult.jzyhUnsatisfiedOption.jsxyCount }}（{{analyzeResult.jzyhUnsatisfiedOption.jsxyPercentage}}）</div>
            <div class="option-detail"><span class="option-name">服装礼仪</span>不满意数量：{{ analyzeResult.jzyhUnsatisfiedOption.fzlyCount }}（{{analyzeResult.jzyhUnsatisfiedOption.fzlyPercentage}}）</div>
            <div class="option-detail"><span class="option-name">准确率</span>不满意数量：{{ analyzeResult.jzyhUnsatisfiedOption.zqlCount }}（{{analyzeResult.jzyhUnsatisfiedOption.zqlPercentage}}）</div>
          </div>
          <div class="flex-child">
            <div class="department-name">● 门诊医护人员</div>
            <div class="department-summary">不满意问卷量：{{ analyzeResult.mzyhUnsatisfiedCount }}，不满意度：{{ analyzeResult.mzyhUnsatisfiedPercentage }}</div>
            <div class="option-summary">- 不满意指标（总量：{{ analyzeResult.mzyhUnsatisfiedOption.totalOptionSize }}）</div>
            <div class="option-detail"><span class="option-name">技术水平</span>不满意数量：{{ analyzeResult.mzyhUnsatisfiedOption.jsspCount }}（{{analyzeResult.mzyhUnsatisfiedOption.jsspPercentage}}）</div>
            <div class="option-detail"><span class="option-name">隐私保护</span>不满意数量：{{ analyzeResult.mzyhUnsatisfiedOption.ysbhCount }}（{{analyzeResult.mzyhUnsatisfiedOption.ysbhPercentage}}）</div>
            <div class="option-detail"><span class="option-name">服务态度</span>不满意数量：{{ analyzeResult.mzyhUnsatisfiedOption.fwtdCount }}（{{analyzeResult.mzyhUnsatisfiedOption.fwtdPercentage}}）</div>
            <div class="option-detail"><span class="option-name">沟通解释</span>不满意数量：{{ analyzeResult.mzyhUnsatisfiedOption.gtjsCount }}（{{analyzeResult.mzyhUnsatisfiedOption.gtjsPercentage}}）</div>
            <div class="option-detail"><span class="option-name">按时坐诊</span>不满意数量：{{ analyzeResult.mzyhUnsatisfiedOption.aszzCount }}（{{analyzeResult.mzyhUnsatisfiedOption.aszzPercentage}}）</div>
            <div class="option-detail"><span class="option-name">服装礼仪</span>不满意数量：{{ analyzeResult.mzyhUnsatisfiedOption.fzlyCount }}（{{analyzeResult.mzyhUnsatisfiedOption.fzlyPercentage}}）</div>
          </div>
        </div>
      </el-dialog>
    </template>
  </page-layer>
</template>
<script setup>
import PageLayer from "@/layout/PageLayer.vue";
import {
  getClinicSatisfiedBodies,
  updateAssessmentStatus,
  assessmentsAnalyse,
  getAllClinicSatisfiedBodies
} from "@/api/outpatient/clinic-satisfied";
import store from "@/store";
import {ElMessage} from "element-plus";
import {Export} from "@/utils/ExportExcel";
import {getDateRangeFormatDate} from "@/utils/date";

const windowSize = store.state.app.windowSize
const tableHeight = windowSize.h - 55

const dateRange = ref([])

const formatDateRange = () => {
  if (dateRange.value.length === 2) {
    const format = getDateRangeFormatDate(dateRange.value)
    inquiry.start = format.startTime
    inquiry.end = format.endTime
  }
}

const inquiry = reactive({
  start: null,
  end: null,
  pageNum: 1,
  pageSize: 30,
  onlyShowUnsatisfied: false
})

const assessments = reactive({
  totalSize: 0,
  list: []
})

const showAnalyzeResult = ref(false)
const analyzeResult = ref({})

const fetchAssessments = () => {
  formatDateRange()
  getClinicSatisfiedBodies(inquiry).then(res => {
    assessments.totalSize = res.totalSize
    assessments.list = res.list
  }).catch(() => {
    assessments.totalSize = 0
    assessments.list = []
  })
}

const executeAssessmentAnalyse = () => {
  formatDateRange()
  assessmentsAnalyse(inquiry).then(res => {
    analyzeResult.value = res
    showAnalyzeResult.value = true
  })
}

const handleSatisfiedChange = () =>　{
  inquiry.pageNum = 1
  fetchAssessments()
}

const handleSizeChange = (val) => {
  inquiry.pageSize = val
  fetchAssessments()
}
const handleCurrentChange = (val) => {
  inquiry.pageNum = val
  fetchAssessments()
}

const changeAssessmentStatus = (row, deleted) => {
  updateAssessmentStatus(row.id, deleted).then(res => {
    row.deleted = deleted
    ElMessage({
      message: res,
      type: 'success',
      showClose: true,
      duration: 2000
    })
  })
}

const exportExcel = () => {
  const fields = {
    item1: '对药剂科工作人员',
    item3: '对放射科工作人员',
    item5: '对超声影像科工作人员',
    item7: '对检验科工作人员',
    item9: '对收费窗口工作人员',
    item11: '对门诊医护人员',
    item13: '对急诊医护人员',
  }
  formatDateRange()
  getAllClinicSatisfiedBodies(inquiry).then(res => {
    Export(res, fields, '门诊满意度问卷')
  })
}

// onMounted(() => {
//   fetchAssessments()
// })
</script>

<style scoped>
.flex-line {
  display: flex;
}
.flex-child {
  width: 25%;
}
.department-name {
  font-weight: bold;
  margin-top: 12px;
}
.department-summary {
  margin-top: 4px;
  padding-left: 10px;
  color: darkred;
}
.option-summary {
  margin-top: 4px;
  padding-left: 10px;
  font-weight: bold;
}
.option-detail {
  margin-top: 4px;
  padding-left: 18px;
}
.option-name {
  color: #222222;
  font-weight: bold;
}
</style>