|
|
@@ -1,164 +1,162 @@
|
|
|
<template>
|
|
|
<div>
|
|
|
- <el-button type="primary">数据总表</el-button>
|
|
|
- <PlatformTable :table-data="tableData" table-label="积分"/>
|
|
|
+ <el-button type="primary" @click="onOpenScoreChart">数据总表</el-button>
|
|
|
+ <ScoreTable
|
|
|
+ v-if="tableData !== undefined"
|
|
|
+ :department-list="departmentList"
|
|
|
+ :table-data="tableData"
|
|
|
+ @table-params-changed="
|
|
|
+ (v) => {
|
|
|
+ tableQueryParams = _.cloneDeep(v);
|
|
|
+ }
|
|
|
+ "
|
|
|
+ />
|
|
|
+ <el-dialog
|
|
|
+ v-model="dialogVisible"
|
|
|
+ width="1000px"
|
|
|
+ title="各分数段所对应人数折线图"
|
|
|
+ :close-on-click-modal="true"
|
|
|
+ :destroy-on-close="true"
|
|
|
+ @open="handleDialogOpen"
|
|
|
+ center
|
|
|
+ >
|
|
|
+ <div class="dialog-header">
|
|
|
+ <div class="dept-select">
|
|
|
+ <el-tree-select
|
|
|
+ v-model="dept"
|
|
|
+ :data="departmentList"
|
|
|
+ :render-after-expand="false"
|
|
|
+ :default-expand-all="true"
|
|
|
+ style="width: 240px"
|
|
|
+ multiple
|
|
|
+ clearable
|
|
|
+ collapse-tags
|
|
|
+ show-checkbox
|
|
|
+ check-strictly
|
|
|
+ placeholder="请选择组织"
|
|
|
+ class="protocal-select"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ <el-button
|
|
|
+ @click="onSearch"
|
|
|
+ type="primary"
|
|
|
+ style="width: 95px; height: 32px; margin-left: 16px"
|
|
|
+ >生成折线图
|
|
|
+ </el-button>
|
|
|
+ </div>
|
|
|
+ <ScoreLineChart :chart-data="chartData.val" :chart-lable="chartData.label" />
|
|
|
+ </el-dialog>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script setup lang="ts">
|
|
|
- // import {
|
|
|
- // getList,
|
|
|
- // getMonthVisits,
|
|
|
- // getPersonalVisits,
|
|
|
- // getTodayVisits,
|
|
|
- // getTotalVisits,
|
|
|
- // } from '@/api/datamanagement/dataplatform';
|
|
|
- // import TableCommon from './TableCommon.vue';
|
|
|
- import { ref } from 'vue';
|
|
|
- // import { ElMessageBox, ElMessage } from 'element-plus';
|
|
|
- import PlatformTable from '../common/PlatformTable.vue';
|
|
|
- import { TableModel } from '@/api/datamanagement/dataplatform';
|
|
|
-
|
|
|
- const tableData = ref<TableModel[]>([
|
|
|
- {
|
|
|
- deptId: 1,
|
|
|
- deptName: '部门1',
|
|
|
- monthVisits: 1,
|
|
|
- nickName: '张三',
|
|
|
- staffNo: '10001',
|
|
|
- todayVisits: 1,
|
|
|
- totalVisits: 1,
|
|
|
- userId: 10014,
|
|
|
+ import {
|
|
|
+ type ScoreTableRecord,
|
|
|
+ type ScoreTableQueryBody,
|
|
|
+ getScoreTable,
|
|
|
+ getScoreChartData,
|
|
|
+ } from '@/api/datamanagement/dataplatform';
|
|
|
+ import { ref, onMounted, watch } from 'vue';
|
|
|
+ import { useSceneInfos } from '@/hooks/useSceneInfos';
|
|
|
+ import ScoreTable from '../common/ScoreTable.vue';
|
|
|
+ import ScoreLineChart from '../../charts/ScoreLineChart.vue';
|
|
|
+ import { deptTreeList } from '@/api/auth/dept';
|
|
|
+ import _ from 'lodash-es';
|
|
|
+
|
|
|
+ const departmentList = ref<any[]>([]);
|
|
|
+
|
|
|
+ // 下拉菜单车间列表数据
|
|
|
+ const sceneInfos = useSceneInfos();
|
|
|
+ const { getScenesTree, calculateTreeData } = sceneInfos;
|
|
|
+ onMounted(() => {
|
|
|
+ getScenesTree({ level: 1, valueKey: 'code', labelKey: 'name', disabled: true });
|
|
|
+ deptTreeList().then((res) => {
|
|
|
+ departmentList.value = calculateTreeData(
|
|
|
+ res,
|
|
|
+ { level: 3, valueKey: 'deptId', labelKey: 'deptName' },
|
|
|
+ 1,
|
|
|
+ );
|
|
|
+ });
|
|
|
+ });
|
|
|
+
|
|
|
+ // 请求表格数据
|
|
|
+ const tableQueryParams = ref<ScoreTableQueryBody>({
|
|
|
+ pageNumber: 1,
|
|
|
+ pageSize: 10,
|
|
|
+ });
|
|
|
+ const tableData = ref<ScoreTableRecord>();
|
|
|
+
|
|
|
+ watch(
|
|
|
+ () => tableQueryParams.value,
|
|
|
+ async () => {
|
|
|
+ getScoreTable(tableQueryParams.value).then((res) => {
|
|
|
+ tableData.value = res;
|
|
|
+ });
|
|
|
},
|
|
|
{
|
|
|
- deptId: 2,
|
|
|
- deptName: '部门2',
|
|
|
- monthVisits: 2,
|
|
|
- nickName: '李四',
|
|
|
- staffNo: '10002',
|
|
|
- todayVisits: 2,
|
|
|
- totalVisits: 2,
|
|
|
- userId: 10014,
|
|
|
+ immediate: true,
|
|
|
+ deep: true,
|
|
|
},
|
|
|
- ]);
|
|
|
-
|
|
|
- // const type = ref('积分');
|
|
|
- // // 查询数据列表
|
|
|
- // function queryData(pageNumber: number, pageSize: number) {
|
|
|
- // return getList(pageNumber, pageSize)
|
|
|
- // .then((res) => {
|
|
|
- // console.log('table-querydata:', res);
|
|
|
- // return res;
|
|
|
- // })
|
|
|
- // .catch((error) => {
|
|
|
- // ElMessageBox.alert(error, '异常', {
|
|
|
- // confirmButtonText: 'OK',
|
|
|
- // callback: () => {
|
|
|
- // ElMessage({
|
|
|
- // type: 'info',
|
|
|
- // message: `查询数据失败`,
|
|
|
- // });
|
|
|
- // },
|
|
|
- // });
|
|
|
- // return Promise.reject();
|
|
|
- // });
|
|
|
- // }
|
|
|
+ );
|
|
|
|
|
|
- // // 查询今日访问次数
|
|
|
- // function getDayData(userId: number) {
|
|
|
- // return getTodayVisits(userId)
|
|
|
- // .then((res) => {
|
|
|
- // console.log('table-getdaydata:', res);
|
|
|
- // return res;
|
|
|
- // })
|
|
|
- // .catch((error) => {
|
|
|
- // ElMessageBox.alert(error, '异常', {
|
|
|
- // confirmButtonText: 'OK',
|
|
|
- // callback: () => {
|
|
|
- // ElMessage({
|
|
|
- // type: 'info',
|
|
|
- // message: `查询数据失败`,
|
|
|
- // });
|
|
|
- // },
|
|
|
- // });
|
|
|
- // return Promise.reject();
|
|
|
- // });
|
|
|
- // }
|
|
|
+ // dialog显示
|
|
|
+ const dialogVisible = ref(false);
|
|
|
+ const onOpenScoreChart = () => {
|
|
|
+ dialogVisible.value = true;
|
|
|
+ };
|
|
|
|
|
|
- // // 查询本月访问次数
|
|
|
- // function getMonthData(userId: number) {
|
|
|
- // console.log('table-getmonthdata:', userId);
|
|
|
- // return getMonthVisits(userId)
|
|
|
- // .then((res) => {
|
|
|
- // console.log('table-getmonthdata:', res);
|
|
|
- // return res;
|
|
|
- // })
|
|
|
- // .catch((error) => {
|
|
|
- // ElMessageBox.alert(error, '异常', {
|
|
|
- // confirmButtonText: 'OK',
|
|
|
- // callback: () => {
|
|
|
- // ElMessage({
|
|
|
- // type: 'info',
|
|
|
- // message: `查询数据失败`,
|
|
|
- // });
|
|
|
- // },
|
|
|
- // });
|
|
|
- // return Promise.reject();
|
|
|
- // });
|
|
|
- // }
|
|
|
+ const handleDialogOpen = () => {
|
|
|
+ dept.value = getAllIds(departmentList.value as { value: number; children: [] }[]);
|
|
|
+ onSearch();
|
|
|
+ };
|
|
|
|
|
|
- // // 查询累计访问次数
|
|
|
- // function getAllData(userId: number) {
|
|
|
- // return getTotalVisits(userId)
|
|
|
- // .then((res) => {
|
|
|
- // console.log('table-getalldata:', res);
|
|
|
- // return res;
|
|
|
- // })
|
|
|
- // .catch((error) => {
|
|
|
- // ElMessageBox.alert(error, '异常', {
|
|
|
- // confirmButtonText: 'OK',
|
|
|
- // callback: () => {
|
|
|
- // ElMessage({
|
|
|
- // type: 'info',
|
|
|
- // message: `查询数据失败`,
|
|
|
- // });
|
|
|
- // },
|
|
|
- // });
|
|
|
- // return Promise.reject();
|
|
|
- // });
|
|
|
- // }
|
|
|
+ function getAllIds(list: { value: number; children: [] }[] = [], ids: number[] = []) {
|
|
|
+ for (let item of list) {
|
|
|
+ !ids.includes(item.value) && ids.push(item.value);
|
|
|
+ if (item.children && item.children.length) getAllIds(item.children, ids);
|
|
|
+ }
|
|
|
+ return ids;
|
|
|
+ }
|
|
|
|
|
|
- // // 查询个人访问次数-
|
|
|
- // function getPersonalVisitsData(
|
|
|
- // deptId: number,
|
|
|
- // nickName: string,
|
|
|
- // pageNumber: number,
|
|
|
- // pageSize: number,
|
|
|
- // staffNo: string,
|
|
|
- // ) {
|
|
|
- // console.log('table-getPersonalVisitsData-deptid', deptId);
|
|
|
- // console.log('table-getPersonalVisitsData-nama', nickName);
|
|
|
- // console.log('table-getPersonalVisitsData', pageNumber, pageSize);
|
|
|
- // console.log('table-getPersonalVisitsData-staffno', staffNo);
|
|
|
- // return getPersonalVisits(pageNumber, pageSize, staffNo, deptId, nickName)
|
|
|
- // .then((res) => {
|
|
|
- // console.log('table-getPersonalVisitsData:', res);
|
|
|
- // return res;
|
|
|
- // })
|
|
|
- // .catch((error) => {
|
|
|
- // ElMessageBox.alert(error, '异常', {
|
|
|
- // confirmButtonText: 'OK',
|
|
|
- // callback: () => {
|
|
|
- // ElMessage({
|
|
|
- // type: 'info',
|
|
|
- // message: `查询数据失败`,
|
|
|
- // });
|
|
|
- // },
|
|
|
- // });
|
|
|
- // return Promise.reject();
|
|
|
- // });
|
|
|
- // }
|
|
|
+ // 折线图筛选
|
|
|
+ const dept = ref<number[]>([]);
|
|
|
+ const chartData = ref<{
|
|
|
+ label: number[];
|
|
|
+ val: any[];
|
|
|
+ }>({
|
|
|
+ label: [],
|
|
|
+ val: [],
|
|
|
+ });
|
|
|
+ const onSearch = () => {
|
|
|
+ const deptIdList = dept.value.join(',');
|
|
|
+ getScoreChartData(deptIdList).then((res) => {
|
|
|
+ chartData.value = {
|
|
|
+ label: res.map((item) => (item.scoreSection[0] + item.scoreSection[1]) / 2),
|
|
|
+ val: res.map((item) => item.num),
|
|
|
+ };
|
|
|
+ });
|
|
|
+ };
|
|
|
</script>
|
|
|
|
|
|
-<style scoped>
|
|
|
+<style scoped lang="scss">
|
|
|
+ :deep(.el-dialog__header) {
|
|
|
+ text-align: left;
|
|
|
+ border-bottom: 1px solid rgba(232, 232, 232, 1);
|
|
|
+ padding-bottom: 16px;
|
|
|
+ margin-bottom: 16px;
|
|
|
+ }
|
|
|
+
|
|
|
+ :deep(.el-dialog__title) {
|
|
|
+ font-weight: 600;
|
|
|
+ font-size: 16px;
|
|
|
+ color: rgba(0, 0, 0, 0.88);
|
|
|
+ line-height: 24px;
|
|
|
+ }
|
|
|
+ .dialog-header {
|
|
|
+ padding-right: 25px;
|
|
|
+ width: 100%;
|
|
|
+ display: flex;
|
|
|
+ justify-content: flex-start;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
</style>
|