hotline-web/src/views/statistics/order/shSatisfied.vue

<template>
  <div class="statistics-department-satisfied-container layout-pd">
    <!-- 搜索  -->
    <el-card shadow="never">
      <el-form :model="state.queryParams" ref="ruleFormRef" @submit.native.prevent inline>
        <el-form-item label="部门名称" prop="OrgName">
          <el-input v-model="state.queryParams.OrgName" placeholder="部门名称" clearable @keyup.enter="handleQuery" class="keyword-input" />
        </el-form-item>
        <el-form-item label="时间段" prop="crTime">
          <el-date-picker
            v-model="state.queryParams.crTime"
            type="daterange"
            unlink-panels
            range-separator="至"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
            :shortcuts="shortcuts"
            @change="handleQuery"
            value-format="YYYY-MM-DD"
            :clearable="false"
          />
        </el-form-item>
        <!--				<el-form-item label="类型" prop="TypeId">
                  <el-select v-model="state.queryParams.TypeId" placeholder="类型" @change="handleQuery">
                    <el-option label="办件结果" value="1" />
                    <el-option label="办件态度" value="2" />
                  </el-select>
                </el-form-item>-->
        <el-form-item label="电话线路" prop="LineNum">
          <el-input v-model="state.queryParams.LineNum" placeholder="电话线路" clearable @keyup.enter="handleQuery" class="keyword-input" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleQuery" :loading="state.loading"> <SvgIcon name="ele-Search" class="mr5" />查询 </el-button>
          <el-button @click="resetQuery(ruleFormRef)" class="default-button" :loading="state.loading">
            <SvgIcon name="ele-Refresh" class="mr5" />重置
          </el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <el-card shadow="never">
      <ProTable
        ref="proTableRef"
        :columns="columns"
        :data="state.tableData"
        @updateTable="queryList"
        :loading="state.loading"
        show-summary
        border
        :pagination="false"
        :summary-method="getSummaries"
      >
        <template #orgName="{ row }">
          <el-button link type="primary" @click="onDetailOrg(row)" v-if="!['市直合计', '区县合计'].includes(row.orgName)">{{
              row.orgName
            }}</el-button>
          <span v-else>{{ row.orgName }}</span>
        </template>
        <template #verySatisfiedCount="{ row }">
          <el-button
            link
            type="primary"
            @click="onDetail(row.verySatisfiedKey, row, '非常满意')"
            v-if="!['市直合计', '区县合计'].includes(row.orgName)"
          >{{ row.verySatisfiedCount }}</el-button
          >
          <span v-else>{{ row.verySatisfiedCount }}</span>
        </template>
        <template #satisfiedCount="{ row }">
          <el-button link type="primary" @click="onDetail(row.satisfiedKey, row, '满意')" v-if="!['市直合计', '区县合计'].includes(row.orgName)">{{
              row.satisfiedCount
            }}</el-button>
          <span v-else>{{ row.satisfiedCount }}</span>
        </template>
        <template #regardedAsSatisfiedCount="{ row }">
          <el-button
            link
            type="primary"
            @click="onDetail(row.regardedAsSatisfiedKey, row, '视为满意')"
            v-if="!['市直合计', '区县合计'].includes(row.orgName)"
          >{{ row.regardedAsSatisfiedCount }}</el-button
          >
          <span v-else>{{ row.regardedAsSatisfiedCount }}</span>
        </template>
        <template #defaultSatisfiedCount="{ row }">
          <el-button
            link
            type="primary"
            @click="onDetail(row.defaultSatisfiedKey, row, '默认满意')"
            v-if="!['市直合计', '区县合计'].includes(row.orgName)"
          >{{ row.defaultSatisfiedCount }}</el-button
          >
          <span v-else>{{ row.defaultSatisfiedCount }}</span>
        </template>
        <template #noSatisfiedCount="{ row }">
          <el-button
            link
            type="primary"
            @click="onDetail(row.noSatisfiedKey, row, '不满意')"
            v-if="!['市直合计', '区县合计'].includes(row.orgName)"
          >{{ row.noSatisfiedCount }}</el-button
          >
          <span v-else>{{ row.noSatisfiedCount }}</span>
        </template>
        <template #noEvaluateCount="{ row }">
          <el-button
            link
            type="primary"
            @click="onDetail(row.noEvaluateKey, row, '未作评价')"
            v-if="!['市直合计', '区县合计'].includes(row.orgName)"
          >{{ row.noEvaluateCount }}</el-button
          >
          <span v-else>{{ row.noEvaluateCount }}</span>
        </template>
        <template #noPutThroughCount="{ row }">
          <el-button
            link
            type="primary"
            @click="onDetail(row.noPutThroughKey, row, '未接通')"
            v-if="!['市直合计', '区县合计'].includes(row.orgName)"
          >{{ row.noPutThroughCount }}</el-button
          >
          <span v-else>{{ row.noPutThroughCount }}</span>
        </template>
      </ProTable>
    </el-card>
  </div>
</template>
<script setup lang="tsx" name="statisticsOrderShSatisfied">
import { onMounted, reactive, ref } from 'vue';
import { FormInstance } from 'element-plus';
import { departmentSatisfaction } from '@/api/statistics/department';
import { defaultDate, shortcuts } from "@/utils/constants";
import { useRouter } from 'vue-router';
import { guid } from "@/utils/tools";

// 表格配置项
const columns = ref<any[]>([
  { type: 'index', fixed: 'left', width: 55, label: '序号', align: 'center' },
  { prop: 'orgName', label: '部门名称', minWidth: 200 },
  { prop: 'orgTypeText', label: '部门类别', minWidth: 120 },
  { prop: 'totalSumCount', label: '小计' },
  {
    prop: 'totalSumRate',
    label: '总满意率',
    minWidth: 120,
    render: ({ row }) => {
      return `${row.totalSumRate}%`;
    },
  },
  { prop: 'verySatisfiedCount', label: '非常满意', minWidth: 120 },
  {
    prop: 'verySatisfiedRate',
    label: '非常满意率',
    minWidth: 120,
    render: ({ row }) => {
      return `${row.verySatisfiedRate}%`;
    },
  },
  { prop: 'satisfiedCount', label: '满意', minWidth: 120 },
  {
    prop: 'satisfiedRate',
    label: '满意率',
    minWidth: 120,
    render: ({ row }) => {
      return `${row.satisfiedRate}%`;
    },
  },
  { prop: 'regardedAsSatisfiedCount', label: '视为满意', minWidth: 120 },
  {
    prop: 'regardedAsSatisfiedRate',
    label: '视为满意率',
    minWidth: 120,
    render: ({ row }) => {
      return `${row.regardedAsSatisfiedRate}%`;
    },
  },
  { prop: 'defaultSatisfiedCount', label: '默认满意', minWidth: 120 },
  {
    prop: 'defaultSatisfiedRate',
    label: '默认满意率',
    minWidth: 120,
    render: ({ row }) => {
      return `${row.defaultSatisfiedRate}%`;
    },
  },
  { prop: 'noSatisfiedCount', label: '不满意', minWidth: 120 },
  {
    prop: 'noSatisfiedRate',
    label: '不满意率',
    minWidth: 120,
    render: ({ row }) => {
      return `${row.noSatisfiedRate}%`;
    },
  },
  { prop: 'noEvaluateCount', label: '未作评价', minWidth: 120 },
  {
    prop: 'noEvaluateRate',
    label: '未作评价率',
    minWidth: 120,
    render: ({ row }) => {
      return `${row.noEvaluateRate}%`;
    },
  },
  { prop: 'noPutThroughCount', label: '未接通', minWidth: 120 },
  {
    prop: 'noPutThroughRate',
    label: '未接通率',
    minWidth: 120,
    render: ({ row }) => {
      return `${row.noPutThroughRate}%`;
    },
  },
]);
// 定义变量内容
const ruleFormRef = ref<RefType>(); // 表单ref
const state = reactive({
  queryParams: {
    // 查询条件
    PageIndex: 1,
    PageSize: 10,
    TypeId: '1', //
    LineNum: null,
    crTime: defaultDate, // 时间默认今天开始到今天结束
  },
  tableData: [], //表单
  loading: false, // 加载
  total: 0, // 总数
  totalCount: {},
});
/** 搜索按钮操作 */
const handleQuery = () => {
  // state.queryParams.PageIndex = 1;
  queryList();
};
/** 获取列表 */
const queryList = () => {
  /*state.loading = true;
  let StartDate = null;
  let EndDate = null;
  if (state.queryParams?.crTime) {
    StartDate = state.queryParams?.crTime[0];
    EndDate = state.queryParams?.crTime[1];
  }
  const request = {
    StartDate,
    EndDate,
    TypeId: state.queryParams.TypeId,
    LineNum: state.queryParams.LineNum,
  };
  departmentSatisfaction(request)
    .then((res: any) => {
      state.tableData = res.result?.dataList ?? [];
      if (res.result.dataList.length) {
        state.tableData.push(res.result.citySumModel);
        state.tableData.push(res.result.countySumModel);
      }
      state.totalCount = res.result.sumModel;
      state.loading = false;
    })
    .catch((err: any) => {
      state.loading = false;
    });*/
}
/** 重置按钮操作 */
const resetQuery = (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  formEl.resetFields();
  queryList();
}
// 合计
const getSummaries = (param: any) => {
  const { columns } = param;
  const sums: string[] = [];
  columns.forEach((column: { property: string }, index: number) => {
    if (index === 0) {
      sums[index] = '合计';
      return;
    }
    switch (column.property) {
      case 'totalSumCount':
        sums[index] = state.totalCount?.totalSumCount;
        break;
      case 'totalSumRate':
        sums[index] = `${state.totalCount?.totalSumRate}%`;
        break;
      case 'verySatisfiedCount':
        sums[index] = state.totalCount?.verySatisfiedCount;
        break;
      case 'verySatisfiedRate':
        sums[index] = `${state.totalCount?.verySatisfiedRate}%`;
        break;
      case 'satisfiedCount':
        sums[index] = state.totalCount?.satisfiedCount;
        break;
      case 'satisfiedRate':
        sums[index] = `${state.totalCount?.satisfiedRate}%`;
        break;
      case 'regardedAsSatisfiedCount':
        sums[index] = state.totalCount?.regardedAsSatisfiedCount;
        break;
      case 'regardedAsSatisfiedRate':
        sums[index] = `${state.totalCount?.regardedAsSatisfiedRate}%`;
        break;
      case 'defaultSatisfiedCount':
        sums[index] = state.totalCount?.defaultSatisfiedCount;
        break;
      case 'defaultSatisfiedRate':
        sums[index] = `${state.totalCount?.defaultSatisfiedRate}%`;
        break;
      case 'noSatisfiedCount':
        sums[index] = state.totalCount?.noSatisfiedCount;
        break;
      case 'noSatisfiedRate':
        sums[index] = `${state.totalCount?.noSatisfiedRate}%`;
        break;
      case 'noEvaluateCount':
        sums[index] = state.totalCount?.noEvaluateCount;
        break;
      case 'noEvaluateRate':
        sums[index] = `${state.totalCount?.noEvaluateRate}%`;
        break;
      case 'noPutThroughCount':
        sums[index] = state.totalCount?.noPutThroughCount;
        break;
      case 'noPutThroughRate':
        sums[index] = `${state.totalCount?.noPutThroughRate}%`;
        break;
      default:
        sums[index] = '';
        break;
    }
  });
  return sums;
};
const router = useRouter();
// 点击部门名称
const onDetailOrg = (row: any) => {
  let StartDate = null;
  let EndDate = null;
  if (state.queryParams?.crTime) {
    StartDate = state.queryParams?.crTime[0];
    EndDate = state.queryParams?.crTime[1];
  }
  router.push({
    name: 'statisticsDepartmentSatisfiedOrg',
    state: {
      StartDate,
      EndDate,
      OrgCode: row.orgCode,
      TypeId: state.queryParams.TypeId,
      LineNum: state.queryParams.LineNum,
    },
    params: {
      key: guid()
    },
  });
};
// 点击数字
const onDetail = (key: string, row, type: string) => {
  let StartDate = null;
  let EndDate = null;
  if (state.queryParams?.crTime) {
    StartDate = state.queryParams?.crTime[0];
    EndDate = state.queryParams?.crTime[1];
  }
  router.push({
    name: 'statisticsDepartmentSatisfiedDetail',
    params: {
      key: guid()
    },
    state: {
      StartDate,
      EndDate,
      OrgCode: row.orgCode,
      TypeId: state.queryParams.TypeId,
      LineNum: state.queryParams.LineNum,
      DateValue: key,
    },
  });
};
onMounted(() => {
  queryList();
});
</script>