feat:新增部门受理类型统计周期;

src/api/statistics/order.ts

@@ -145,4 +145,15 @@ export const centerReport = (params: object) => {
 		method: 'get',
 		params,
 	});
+}
+/**
+ * @description 部门受理类型统计周期
+ * @param {object} params
+ */
+export const departmentAcceptType = (params: object) => {
+	return request({
+		url: `/api/v1/BiOrder/department_acceptance_type_statistics`,
+		method: 'get',
+		params,
+	});
 }

src/components/ComTable/Custom-column.vue

@@ -0,0 +1,83 @@
+<template>
+  <el-table-column v-for="column in newTableHeader" v-bind="column">
+    <template v-for="(value, key) in column.slot" #[key]="scope">
+      <slot :name="value" v-bind="scope">
+        <div v-if="column.inner && String(key) == 'default'">
+          <div
+            v-if="typeof column.inner == 'string'"
+            v-html="column.inner"
+          ></div>
+          <component v-else :is="column.inner"></component>
+        </div>
+      </slot>
+    </template>
+    <template v-if="!column.slot" #default>
+      <div v-if="column.inner">
+        <div v-if="typeof column.inner == 'string'" v-html="column.inner"></div>
+        <component v-else :is="column.inner"></component>
+      </div>
+    </template>
+  </el-table-column>
+</template>
+
+<script lang="ts" setup>
+import { ref, onMounted, onBeforeUpdate, useSlots } from "vue";
+export type Mapper<T> = {
+  [P in keyof T as string]?: string | object;
+};
+const prop = defineProps<{
+  tableHeaders: Mapper<any>;
+}>();
+const slots = useSlots();
+const newTableHeader = ref<any>({});
+const genNewTableHeader = () => {
+  newTableHeader.value = { ...prop.tableHeaders };
+  const rawAttr = prop.tableHeaders;
+  for (let key in rawAttr) {
+    let column = rawAttr[key];
+    if (typeof column === "string") {
+      Reflect.set(newTableHeader.value, key, {
+        key: key,
+        prop: key,
+        label: column,
+      });
+    }
+
+    // 其实此时一定是对象了，此处判断是用于ts类型收窄
+    if (typeof column === "object") {
+      // 设置默认的key
+      if (!Reflect.has(column, "key")) {
+        Reflect.set(column, "key", key);
+      }
+      if (!Reflect.has(column, "label")) {
+        Reflect.set(column, "label", key);
+      }
+      // 设置默认的prop，如果该列是多选项，则不需要prop
+      if (
+        !Reflect.has(column, "prop") &&
+        !(
+          Reflect.has(column, "type") &&
+          Reflect.get(column, "type") == "selection"
+        )
+      ) {
+        Reflect.set(column, "prop", key);
+      }
+      // 处理插槽
+      const slotKeys = Object.keys(slots);
+      for (let key of slotKeys) {
+        const res = key.match(/^(\S+)-(\S+)/);
+        // 查找不到则res为null
+        if (res && res[2] == Reflect.get(column, "key")) {
+          if (!Reflect.has(column, "slot")) {
+            Reflect.set(column, "slot", {});
+          }
+          Reflect.set(Reflect.get(column, "slot"), res[1], res[0]);
+        }
+      }
+    }
+  }
+  console.log(newTableHeader.value);
+};
+onMounted(genNewTableHeader);
+onBeforeUpdate(genNewTableHeader);
+</script>

src/components/ComTable/Custom-table.vue

@@ -0,0 +1,13 @@
+<template>
+  <el-table :data="tableData" style="width: 100%">
+    <template v-for="slot in Object.keys($slots)" #[slot]>
+      <slot :name="slot"></slot>
+    </template>
+  </el-table>
+</template>
+
+<script setup lang="ts">
+defineProps<{
+  tableData: Array<any>;
+}>();
+</script>

src/views/business/order/index.vue

@@ -297,16 +297,17 @@
 					</el-button>
 				</div>
 				<!-- 筛选按钮 -->
-<!--				<el-popover trigger="click" width="40">
-					<el-checkbox-group v-model="checkedColumns">
-						<el-checkbox v-for="item in checkBoxGroup" :key="item.prop" :label="item.label" :value="item.prop"></el-checkbox>
-					</el-checkbox-group>
+<!--				<el-popover trigger="click" width="165" placement="bottom-end">
+            <el-scrollbar wrap-class="scrollbar-wrapper" max-height="400px">
+              <el-checkbox-group v-model="checkedColumns">
+                <el-checkbox v-for="item in checkBoxGroup" :key="item.prop" :label="item.label" :value="item.prop"></el-checkbox>
+              </el-checkbox-group>
+            </el-scrollbar>
 					<template #reference>
 						<el-button><SvgIcon name="ele-Operation" /></el-button>
 					</template>
 				</el-popover>-->
 			</div>
-
 			<!-- 表格 -->
 			<el-table
 				:data="state.tableData"
@@ -378,6 +379,7 @@
 					<Empty />
 				</template>
 			</el-table>
+
 			<!-- 分页 -->
 			<pagination
 				:total="state.total"
@@ -408,6 +410,8 @@ import { treeArea } from "@/api/auxiliary/area";
 const OrderDetail = defineAsyncComponent(() => import('@/components/OrderDetail/index.vue')); // 工单详情
 const RepeatEventEdit = defineAsyncComponent(() => import('@/views/business/repeatEvent/components/Repeat-event-edit.vue')); // 编辑重复性事件
 const HotSpotSelect = defineAsyncComponent(() => import('@/components/Hotspot/index.vue')); // 选择热点
+const TableToolBar = defineAsyncComponent(() => import('@/components/ComTable/Custom-table.vue')); // 表格工具栏
+const ComTable = defineAsyncComponent(() => import('@/components/ComTable/Custom-column.vue')); // 表格
 
 // 定义变量内容
 const state = reactive(<any>{

src/views/statistics/order/departmentAcceptType.vue

@@ -0,0 +1,146 @@
+<template>
+  <div class="statistics-order-department-accept-type-container layout-pd">
+    <!-- 搜索  -->
+    <el-card shadow="never">
+      <el-form :model="state.queryParams" ref="ruleFormRef" @submit.native.prevent  inline>
+        <el-form-item label="归档类型" prop="TypeCode">
+          <el-select v-model="state.queryParams.TypeCode" placeholder="部门名称" @change="queryList">
+            <el-option label="全部" value="0" />
+            <el-option label="中心归档" value="1" />
+            <el-option label="部门归档" value="2" />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="时间段" prop="crTime">
+          <el-date-picker
+            v-model="state.queryParams.crTime"
+            type="datetimerange"
+            unlink-panels
+            range-separator="至"
+            start-placeholder="开始时间"
+            end-placeholder="结束时间"
+            :shortcuts="shortcuts"
+            @change="queryList"
+            value-format="YYYY-MM-DD[T]HH:mm:ss"
+          />
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" @click="queryList" :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">
+      <!-- 表格 -->
+      <el-table
+        :data="state.tableData"
+        v-loading="state.loading"
+        show-summary
+      >
+        <el-table-column type="selection" width="55" align="center" />
+        <el-table-column prop="orgName" label="部门名称" show-overflow-tooltip align="center" min-width="120"></el-table-column>
+        <el-table-column prop="orgType" label="部门类别" show-overflow-tooltip align="center" min-width="120"></el-table-column>
+        <el-table-column label="所有类型" align="center">
+          <el-table-column label="总件数" show-overflow-tooltip align="center" prop="allCount"></el-table-column>
+          <el-table-column prop="allTimes" label="总时长" show-overflow-tooltip align="center"></el-table-column>
+          <el-table-column prop="averageTime" label="总平均" show-overflow-tooltip align="center"></el-table-column>
+        </el-table-column>
+        <el-table-column label="咨询类" align="center">
+          <el-table-column prop="zxAllCount" label="咨询件数" show-overflow-tooltip align="center" min-width="90px"></el-table-column>
+          <el-table-column prop="zxAllTimes" label="咨询时长" show-overflow-tooltip align="center" min-width="90px"></el-table-column>
+          <el-table-column prop="zxAverageTime" label="咨询平均" show-overflow-tooltip align="center" min-width="90px"></el-table-column>
+        </el-table-column>
+        <el-table-column label="举报类" align="center">
+          <el-table-column prop="jbAllCount" label="举报件数" show-overflow-tooltip align="center" min-width="90px"></el-table-column>
+          <el-table-column prop="jbAllTimes" label="举报时长" show-overflow-tooltip align="center" min-width="90px"></el-table-column>
+          <el-table-column prop="jbAverageTime" label="举报平均" show-overflow-tooltip align="center" min-width="90px"></el-table-column>
+        </el-table-column>
+        <el-table-column label="投诉类" align="center">
+          <el-table-column prop="tsAllCount" label="投诉件数" show-overflow-tooltip align="center" min-width="90px"></el-table-column>
+          <el-table-column prop="tsAllTimes" label="投诉时长" show-overflow-tooltip align="center" min-width="90px"></el-table-column>
+          <el-table-column prop="tsAverageTime" label="投诉平均" show-overflow-tooltip align="center" min-width="90px"></el-table-column>
+        </el-table-column>
+        <el-table-column label="求助类" align="center">
+          <el-table-column prop="qzAllCount" label="求助件数" show-overflow-tooltip align="center" min-width="90px"></el-table-column>
+          <el-table-column prop="qzAllTimes" label="求助时长" show-overflow-tooltip align="center" min-width="90px"></el-table-column>
+          <el-table-column prop="qzAverageTime" label="求助平均" show-overflow-tooltip align="center" min-width="90px"></el-table-column>
+        </el-table-column>
+        <el-table-column label="建议类" align="center">
+          <el-table-column prop="jyAllCount" label="建议件数" show-overflow-tooltip align="center" min-width="90px"></el-table-column>
+          <el-table-column prop="jyAllTimes" label="建议时长" show-overflow-tooltip align="center" min-width="90px"></el-table-column>
+          <el-table-column prop="jyAverageTime" label="建议平均" show-overflow-tooltip align="center" min-width="90px"></el-table-column>
+        </el-table-column>
+<!--        <el-table-column label="意见类" align="center">
+          <el-table-column prop="centreArchive" label="意见件数" show-overflow-tooltip align="center" min-width="90px"></el-table-column>
+          <el-table-column prop="centreCareOf" label="意见时长" show-overflow-tooltip align="center" min-width="90px"></el-table-column>
+          <el-table-column prop="centreCareOf" label="意见平均" show-overflow-tooltip align="center" min-width="90px"></el-table-column>
+        </el-table-column>-->
+        <template #empty>
+          <Empty />
+        </template>
+      </el-table>
+    </el-card>
+  </div>
+</template>
+<script setup lang="ts" name="statisticsOrderDepartmentAcceptType">
+import { onMounted, reactive, ref } from 'vue';
+import { ElButton, FormInstance } from 'element-plus';
+import { throttle } from '@/utils/tools';
+import { departmentAcceptType } from '@/api/statistics/order';
+import { shortcuts } from '@/utils/constants';
+import dayjs from 'dayjs';
+// 定义变量内容
+const ruleFormRef = ref<RefType>(); // 表单ref
+const state = reactive(<any>{
+  queryParams: {
+    // 查询条件
+    TypeCode: '0', // 关键词
+    crTime: [dayjs().startOf('day').format('YYYY-MM-DD HH:mm:ss'), dayjs().endOf('day').format('YYYY-MM-DD HH:mm:ss')], // 时间默认今天开始到今天结束
+  },
+  tableData: [], //表单
+  loading: false, // 加载
+  total: 0, // 总数
+});
+/** 获取列表 */
+const queryList = throttle(() => {
+  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,
+    TypeCode:state.queryParams.TypeCode,
+  };
+  departmentAcceptType(request)
+    .then((res: any) => {
+      state.tableData = res.result ?? [];
+      state.total = res.result?.total ?? 0;
+      state.loading = false;
+    })
+    .catch(() => {
+      state.loading = false;
+    });
+}, 300);
+// 排序
+/** 重置按钮操作 */
+const resetQuery = throttle((formEl: FormInstance | undefined) => {
+  if (!formEl) return;
+  formEl.resetFields();
+  queryList();
+}, 300);
+// 表格多选
+const multipleTableRef = ref<RefType>();
+const multipleSelection = ref<any>([]);
+const handleSelectionChange = (val: any[]) => {
+  multipleSelection.value = val;
+};
+
+onMounted(() => {
+  queryList();
+});
+</script>