完成平台数据功能开发

src/api/datamanagement/dataplatform.ts

@@ -0,0 +1,96 @@
+import { http } from '@/utils/http/axios';
+
+
+
+export interface Records {
+    deptId: number,
+    deptName: string,
+    monthVisits: number,
+    nickName: string,
+    staffNo: string,
+    todayVisits: number,
+    totalVisits: number,
+    userId: number
+}
+
+
+export interface Visits<Records> {
+    pageNumber: number,
+    pageSize: number,
+    records: Records[],
+    totalPage: number,
+    totalRow: number
+}
+
+
+export interface MonthVisit {
+    visits: number,
+    workshopName: string,
+}
+
+export interface DayVisit {
+    visits: number,
+    workshopName: string,
+}
+
+export interface AllVisit {
+    visits: number,
+    workshopName: string,
+}
+
+export interface VisitsModel {
+    workshopName: string,
+    visits: number,
+}
+
+// 查询访问次数列表
+export function getList(pageNumber: number, pageSize: number) {
+    return http.request<Visits<Records>>({
+        url: '/platformData/getList',
+        method: 'get',
+        params: { pageNumber: pageNumber, pageSize: pageSize },
+    });
+}
+
+
+
+// 查询本月访问次数
+export function getMonthVisits(userId: number) {
+    return http.request<VisitsModel[]>({
+        url: '/platformData/getMonthVisits',
+        method: 'get',
+        params: { userId: userId },
+    });
+}
+
+
+// 查询个人访问次数
+export function getPersonalVisits(pageNumber: number, pageSize: number, staffNo?: string, deptId?: number, nickName?: string) {
+    return http.request<Visits<Records>>({
+        url: '/platformData/getPersonalVisits',
+        method: 'get',
+        params: { pageNumber: pageNumber, pageSize: pageSize, staffNo: staffNo, deptId: deptId, nickName: nickName },
+    });
+}
+
+
+
+
+
+// 查询今日访问次数
+export function getTodayVisits(userId: number) {
+    return http.request<VisitsModel[]>({
+        url: '/platformData/getTodayVisits',
+        method: 'get',
+        params: { userId: userId },
+    });
+}
+
+// 查询累计访问次数
+export function getTotalVisits(userId: number) {
+    return http.request<VisitsModel[]>({
+        url: '/platformData/getTotalVisits',
+        method: 'get',
+        params: { userId: userId },
+    });
+}

src/views/datamanager/systemdata/PlatformData.vue

@@ -0,0 +1,46 @@
+<template>
+    <div style="width: 100%">
+        <div>
+            <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
+                <el-tab-pane label="访问次数统计" name="count">
+                    <Table />
+                </el-tab-pane>
+                <el-tab-pane label="积分统计" name="score">
+                    <Score />
+                </el-tab-pane>
+
+            </el-tabs>
+        </div>
+
+
+
+    </div>
+</template>
+
+
+<script setup lang="ts">
+import { ref } from 'vue';
+import type { TabsPaneContext } from 'element-plus';
+import Table from './Table.vue'
+import Score from './Score.vue';
+
+
+
+const activeName = ref('count');
+export type LabelType = 'count' | 'score';
+const currentLabel = ref<LabelType>('count');
+
+const handleClick = (tab: TabsPaneContext) => {
+    console.log(tab.paneName);
+    if (tab.paneName === 'count') {
+        currentLabel.value = 'count';
+    } else {
+
+        currentLabel.value = 'score';
+
+    }
+};
+</script>
+
+
+<style scoped></style>

src/views/datamanager/systemdata/Score.vue

@@ -0,0 +1,129 @@
+<template>
+    <div>
+        <TableCommon :type="type" :query-data="queryData" :current-day-data="getDayData" :current-month-data="getMonthData"
+            :current-all-data="getAllData" :get-personal-visits="getPersonalVisitsData" />
+    </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'
+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();
+    });
+
+}
+
+// 查询本月访问次数
+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();
+    });
+}
+
+// 查询累计访问次数
+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 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();
+    });
+}
+
+</script>
+
+<style scoped></style>

src/views/datamanager/systemdata/Table.vue

@@ -0,0 +1,129 @@
+<template>
+    <div>
+        <TableCommon :type="type" :query-data="queryData" :current-day-data="getDayData" :current-month-data="getMonthData"
+            :current-all-data="getAllData" :get-personal-visits="getPersonalVisitsData" />
+    </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'
+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();
+    });
+
+}
+
+// 查询本月访问次数
+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();
+    });
+}
+
+// 查询累计访问次数
+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 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();
+    });
+}
+
+</script>
+
+<style scoped></style>

src/views/datamanager/systemdata/TableCommon.vue

@@ -0,0 +1,253 @@
+<template>
+    <div class="form">
+        <el-form ref="ruleFormRef" :model="ruleForm" inline label-width="60px">
+
+            <el-form-item label="姓名：" prop="nickName" style="margin-top: 15px;">
+                <el-input v-model="ruleForm.nickName" placeholder="请输入姓名！" style="width: 150px;"></el-input>
+            </el-form-item>
+
+            <el-form-item label="工号：" prop="staffNo" style="margin-top: 15px;">
+                <el-input v-model="ruleForm.staffNo" placeholder="请输入工号！" style="width: 150px;"></el-input>
+            </el-form-item>
+
+            <el-form-item label="部门：" prop="dept" style="margin-top: 15px;">
+                <el-select v-model="ruleForm.dept" placeholder="请选择部门" style="width: 100px ;">
+                    <el-option v-for="item in BoardDeptList" :key="item.value" :value="item.value"
+                        :label="item.label"></el-option>
+                </el-select>
+            </el-form-item>
+
+            <el-button type="primary" @click="submitForm(ruleFormRef)" style="width: 100px;">搜索</el-button>
+            <el-button @click="resetForm(ruleFormRef)" style="width: 100px;">重置</el-button>
+            <el-form-item>
+
+            </el-form-item>
+
+        </el-form>
+
+        <div>
+            <el-tag size="large">数据总表</el-tag>
+        </div>
+        <el-table style="width: 100%;margin-top: 20px;" :data="tableData" highlight-current-row
+            :default-sort="{ prop: 'todayVisits', order: 'descending' }">
+            <el-table-column label="序号" width="60" type="index"></el-table-column>
+            <el-table-column label="姓名" width="100" prop="nickName"></el-table-column>
+            <el-table-column label="工号" width="100" prop="staffNo"></el-table-column>
+            <el-table-column label="部门" width="120" prop="deptName"></el-table-column>
+            <el-table-column :label="`当日` + props.type" width="140" prop="todayVisits" sortable></el-table-column>
+            <el-table-column :label="`本月` + props.type" width="140" prop="monthVisits" sortable></el-table-column>
+            <el-table-column :label="`累计` + props.type" width="140" prop="totalVisits" sortable></el-table-column>
+            <el-table-column :label="props.type + '柱状图'" width="150">
+                <template #default="scoped">
+                    <el-button type="primary" :icon="TrendCharts" @click="openDialog(scoped.row)"></el-button>
+                </template>
+            </el-table-column>
+        </el-table>
+
+
+        <el-pagination v-model="currentPage" v-model:currentPageSize="currentPageSize" :page-sizes="[10, 20, 50, 100, 200]"
+            layout="total,sizes,prev,pager,next,jumper" :total="total" @size-change="handeSizeChange"
+            @current-change="handleCurrentPageChange" style="margin-left: 500px;" />
+
+    </div>
+
+
+    <TableEcharts v-model="dialogVisible" :dialog-visible="dialogVisible" :userId="userId"
+        :current-day-chart="currentDayData" :current-month-chart="currentMonthData" :all-datas-chart="currentAllData"
+        :close-dialog="closeDialog">
+    </TableEcharts>
+</template>
+
+<script setup lang="ts">
+
+import { ref, onMounted } from 'vue';
+import { FormInstance } from 'element-plus';
+import { BoardDeptEnum, BoardDeptList } from './config'
+import TableEcharts from './TableEcharts.vue';
+import { TrendCharts } from '@element-plus/icons-vue'
+import { Records, Visits, VisitsModel } from '../../../api/datamanagement/dataplatform';
+
+export interface TableModel {
+    deptId: number,
+    deptName: string,
+    monthVisits: number,
+    nickName: string,
+    staffNo: string,
+    todayVisits: number,
+    totalVisits: number,
+    userId: number,
+}
+
+// const props = defineProps<{ type: string }>()
+const props = defineProps<{
+    type: string,
+    queryData: (d1: number, d2: number) => Promise<Visits<Records>>,
+    currentDayData: (d: number) => Promise<VisitsModel[]>,
+    currentMonthData: (d: number) => Promise<VisitsModel[]>,
+    currentAllData: (d: number) => Promise<VisitsModel[]>,
+    getPersonalVisits: (d1: number | undefined, d2: string, d3: number, d4: number, d5: string) => Promise<Visits<Records>>,
+
+}>();
+
+const dialogVisible = ref(false);//控制弹框显示
+const currentPage = ref(1);
+const currentPageSize = ref(10);
+const total = ref(30);
+const tableData = ref<TableModel[]>()
+const userId = ref(10014);
+
+export interface FormModelCommon {
+    dept: number,
+    nickName: string,
+    staffNo: string,
+}
+
+const ruleForm = ref<FormModelCommon>({
+    dept: BoardDeptEnum.all,
+    nickName: '',
+    staffNo: '',
+})
+const ruleFormRef = ref<FormInstance>();
+
+
+// 查询数据列表
+function queryData() {
+    return props.queryData(currentPage.value, currentPageSize.value).then(res => {
+        console.log('tablecommon-querydata:', res)
+        tableData.value = res.records;
+        total.value = res.totalRow;
+    })
+
+}
+
+// 根据指定参数查询数据-搜索数据
+// function queryDataByParams() {
+//     props.queryDataByParams().then(res => {
+//         console.log(res)
+//     })
+//     // emit('queryDataByParams', data);
+// }
+
+// interface FormTable {
+//     text: string,
+//     dept: string,
+// }
+
+// 搜索数据
+function submitForm(formE1: FormInstance | undefined) {
+
+    if (!formE1) return
+    formE1.validate((valid, fields) => {
+        if (valid) {
+
+
+            getPersonalVisits(ruleForm.value)
+        }
+        else {
+            console.log('error submit!', fields);
+        }
+    })
+}
+
+// 重置表单
+function resetForm(formE1: FormInstance | undefined) {
+    if (!formE1) return
+    formE1.resetFields()
+    console.log('resetForm')
+    queryData();
+}
+
+// 翻页
+function handleCurrentPageChange(val: number) {
+    currentPage.value = val
+    console.log('currentPage:' + currentPage.value)
+    queryData();
+}
+
+// 页数
+function handeSizeChange(val: number) {
+    currentPageSize.value = val
+    console.log('currentPageSize:' + currentPageSize.value)
+    queryData()
+}
+
+function closeDialog() {
+    dialogVisible.value = false;
+}
+
+// 查询今日访问次数
+function currentDayData(userId: number) {
+    console.log('table-common-currentDayData:', userId)
+    return props.currentDayData(userId).then(res => {
+        console.log('table-common-currentdaydata:', res)
+        return res
+    })
+
+}
+
+// 查询本月访问次数
+function currentMonthData(userId: number) {
+    console.log('table-common-currentMonthData:', userId)
+    return props.currentMonthData(userId).then(res => {
+        console.log('table-common-currentmonthdata:', res);
+        return res
+    })
+
+}
+
+// 查询累计访问次数
+function currentAllData(userId: number) {
+    return props.currentAllData(userId).then(res => {
+        console.log('table-common:', res);
+        return res;
+    })
+
+}
+
+// 查询个人访问次数-搜索数据
+function getPersonalVisits(data: FormModelCommon) {
+    const newParam = {
+        pageNumber: currentPage.value,
+        pageSize: currentPageSize.value,
+        nickName: data.nickName,
+        deptId: data.dept === BoardDeptEnum.all ? undefined : data.dept,
+        staffNo: data.staffNo,
+    }
+    props.getPersonalVisits(newParam.deptId, newParam.nickName, newParam.pageNumber, newParam.pageSize, newParam.staffNo).then(res => {
+        console.log('table-common-getPersonalVisits:', res)
+        tableData.value = res.records;
+
+    })
+}
+
+// 打开数据表
+function openDialog(row: TableModel) {
+    console.log('tablecommon-opendialog');
+    console.log(row.userId);
+    // tbData.value=row;
+    userId.value = row.userId;
+    dialogVisible.value = true;
+
+    // currentDayData();
+}
+
+
+
+onMounted(() => {
+    queryData()
+})
+
+</script>
+
+<style scoped>
+.form {
+    /* width: 1100px; */
+    margin-top: 30px;
+    margin-bottom: 30px;
+}
+
+
+.el-pagination {
+    margin-top: 30px;
+}
+</style>

src/views/datamanager/systemdata/TableEcharts.vue

@@ -0,0 +1,400 @@
+<template>
+    <div>
+        <el-dialog v-model="visible" :before-close="handleClose" center style="width: 700px;">
+            <el-card>
+                <template #header>
+                    <div v-if="isShowAll === false" style="text-align: center;">
+                        <el-button type="text" @click="currentDayChart">今日</el-button>
+                        <el-button type="text" @click="currentMonthChart">本月</el-button>
+                        <el-button type="text" @click="allDatasChart">累计</el-button>
+
+                    </div>
+                    <div v-else>
+                        <el-form inline ref="ruleFormRef" :model="form" style="width:600px">
+                            <el-form-item style="margin-top: 20px;">
+                                <el-select v-model="form.workspace" placeholder="请选择车间"
+                                    style="width: 140px ;text-align: left;">
+                                    <el-option v-for="item in BoardDeptList" :key="item.value" :value="item.value"
+                                        :label="item.label"></el-option>
+                                </el-select>
+                            </el-form-item>
+                            <el-button style="text-align: left;width: 100px;" type="primary"
+                                @click="getDepartmentData">生成柱状图</el-button>
+                            <el-button style="text-align: left; margin-left: 180px;" type="text"
+                                @click="currentDayChart">今日</el-button>
+                            <el-button style="text-align: left;" type="text" @click="currentMonthChart">本月</el-button>
+                            <el-button style="text-align: left;" type="text" @click="allDatasChart">累计</el-button>
+
+                        </el-form>
+
+                    </div>
+                </template>
+                <div id="container" style="width: 600px; height: 470px;margin-left: 20px;"></div>
+            </el-card>
+        </el-dialog>
+    </div>
+</template>
+
+<script setup lang="ts">
+
+import * as echarts from 'echarts';
+import { ref, markRaw } from 'vue';
+import { ElMessageBox } from 'element-plus';
+import { BoardDeptList } from './config'
+import { watch } from 'vue';
+import { onMounted } from 'vue';
+import { VisitsModel } from '@/api/datamanagement/dataplatform';
+
+interface DataOption {
+    title: {},//标题
+    tooltip: {},//虚线
+    calculate: Boolean,
+    xAxis: {},
+    yAxis: {},
+    series: SerialModel[]
+}
+
+
+
+
+const visible = ref(false);
+const userId = ref(1);
+const isShowAll = ref(false);//控制标题是否居中
+const chart = ref<any>("");
+
+
+
+
+watch(
+    () => props.dialogVisible,
+    (newvisible) => {
+        visible.value = newvisible
+        console.log('tablechart', visible.value)
+    },
+    { immediate: true },
+)
+watch(
+    () => props.userId,
+    (newuserId) => {
+        userId.value = newuserId
+        console.log('tablechart-data:', userId.value)
+        currentDayChart()
+    },
+    { immediate: true },
+)
+
+const form = ref({
+    workspace: '',
+});
+
+
+const props = defineProps<{
+    dialogVisible: boolean,
+    userId: number,
+    currentDayChart: (d: number) => Promise<VisitsModel[]>,
+    currentMonthChart: (d: number) => Promise<VisitsModel[]>,
+    allDatasChart: (d: number) => Promise<VisitsModel[]>,
+    closeDialog(),
+    // getDepartmentData: () => Promise<unknown>,
+
+}>();
+
+
+
+// 关闭对话框
+function closeDialog() {
+    visible.value = false;
+    props.closeDialog();
+    // emit('closeDialog');
+}
+
+// 关闭对话框
+function handleClose(done: () => void) {
+    ElMessageBox.confirm('确认关闭?')
+        .then(() => {
+
+            done()
+            closeDialog();//关闭对话框
+        })
+        .catch(() => {
+
+            // catch error
+        })
+}
+
+// 查看今日数据
+function currentDayChart() {
+    isShowAll.value = false;
+    console.log('table-chart-currentday');
+    const daytitle = ref();
+    const seriesdata = ref()
+    props.currentDayChart(userId.value).then(res => {
+        daytitle.value = getHorizontalTitle(res);
+        seriesdata.value = getVorizontalData(res);
+        console.log('查看今日数据', res);
+        console.log('查看今日数据', daytitle);
+        console.log('查看今日数据', seriesdata);
+        initChart(optionday.value, daytitle.value, seriesdata.value)
+    })
+
+};
+
+// 查看本月数据
+function currentMonthChart() {
+    isShowAll.value = false;
+    console.log('currentmonth:', userId.value);
+    const monthtitle = ref();
+    const monthseriesdata = ref()
+    props.currentMonthChart(userId.value).then(res => {
+        console.log('table-chart-currentmonth:', res);
+        monthtitle.value = getHorizontalTitle(res);
+        monthseriesdata.value = getVorizontalData(res);
+        console.log('查看今日数据', res);
+        console.log('查看今日数据', monthtitle);
+        console.log('查看今日数据', monthseriesdata);
+        initChart(optionmonth.value, monthtitle.value, monthseriesdata.value)
+    })
+};
+
+
+// 查看累计数据
+function allDatasChart() {
+    isShowAll.value = true;
+    console.log('alldata');
+    const alltitle = ref();
+    const allseriesdata = ref()
+    props.allDatasChart(userId.value).then(res => {
+        console.log(res);
+        alltitle.value = getHorizontalTitle(res);
+        allseriesdata.value = getVorizontalData(res);
+        console.log('查看今日数据', res);
+        console.log('查看今日数据', alltitle);
+        console.log('查看今日数据', allseriesdata);
+        initChart(optionall.value, alltitle.value, allseriesdata.value)
+    })
+}
+
+interface SerialModel {
+    data: [],
+    type: string,
+}
+
+
+function initChart(data: DataOption, title: [], series: []) {
+    data.xAxis = {};
+    const dataseries = ref<SerialModel[]>([]);
+
+    const type = ref('category');
+    const horidata = ref([]) //todo，获取横坐标
+    const nameLocation = ref('center');
+    const axisLabel = { interval: 0, rotate: 30 };
+    const nameTextStyle = {
+        color: 'red',
+        fontSize: 6,
+    };
+    horidata.value = title;
+
+    data.xAxis = { type: type.value, data: horidata.value, nameLocation: nameLocation.value, axisLabel: axisLabel, nameTextStyle: nameTextStyle }
+
+
+    const seriesdata = ref<SerialModel>({
+        data: [],//todo，获取数值,
+        type: 'bar'
+    })
+    seriesdata.value.data = series;
+    dataseries.value.push(seriesdata.value)
+    data.series = dataseries.value;
+
+    console.log('data.xAxis.data', data.xAxis);
+    console.log('data.yAxis.data', data.series)
+    console.log(data)
+    createChart(data);
+
+}
+
+// 创建图表
+function createChart(option: DataOption) {
+    chart.value = markRaw(echarts.init(document.getElementById('container') as HTMLDivElement))
+
+    chart.value.setOption(option);
+
+    // 大小自适应
+    window.addEventListener('resize', () => {
+        chart.value.resize();
+    })
+}
+
+// 创建柱状图
+function getDepartmentData() {
+    // todo,原型未定义
+}
+
+
+
+function getHorizontalTitle(data: VisitsModel[]) {
+    console.log('getHorizontalTitle:', data)
+    const title = ref<string[]>([]);
+    for (var i = 0; i < data.length; i++) {
+        title.value.push(data[i].workshopName)
+        console.log('getHorizontalTitle-data-i', data[i].workshopName)
+    }
+    console.log('title:', title);
+    return title;
+}
+
+function getVorizontalData(data: VisitsModel[]) {
+    console.log('getvorizontaldata:', data)
+    const seriesData = ref<number[]>([]);
+    for (var i = 0; i < data.length; i++) {
+        seriesData.value.push(data[i].visits)
+        console.log('getHorizontalTitle-data-i', data[i].visits)
+    }
+    console.log('seriesData:', seriesData);
+    return seriesData;
+}
+
+const optionday = ref();
+optionday.value = {
+    title: {
+        text: '各车间地点访问次数柱状图(天)',
+        x: "center", //设置标题位置居中
+        textStyle: {//设置主标题的文字风格
+            fontSize: 10 //文字大小
+        },
+
+
+
+    },//标题
+    tooltip: {
+        trigger: 'axis'
+    },//虚线
+    calculate: true,//显示数据
+    xAxis: {
+        type: 'category',
+        data: [],//todo，获取横坐标
+        nameLocation: 'center',
+        axisLabel: { interval: 0, rotate: 30 },
+        nameTextStyle: {
+            color: 'red',
+            fontSize: 6,
+
+        }
+    },
+    yAxis: {
+        type: 'value',
+        name: '访问次数',
+        nameTextStyle: {
+            color: 'black',
+            fontSize: 8,
+            padding: 0,
+        }
+
+    },
+    series: [
+        {
+            data: [],//todo，获取数值,
+            type: 'bar'
+        }
+    ]
+};
+
+
+const optionmonth = ref();
+optionmonth.value = {
+    title: {
+        text: '各车间地点访问次数柱状图(月)',
+        x: "center", //设置标题位置居中
+        textStyle: {//设置主标题的文字风格
+            fontSize: 10 //文字大小
+        },
+
+
+
+    },//标题
+    tooltip: {
+        trigger: 'axis'
+    },//虚线
+    calculate: true,//显示数据
+    xAxis: {
+        type: 'category',
+        data: [],//todo，获取横坐标
+        nameLocation: 'center',
+        axisLabel: { interval: 0, rotate: 30 },
+        nameTextStyle: {
+            color: 'red',
+            fontSize: 6,
+
+        }
+    },
+    yAxis: {
+        type: 'value',
+        name: '访问次数',
+        nameTextStyle: {
+            color: 'black',
+            fontSize: 8,
+            padding: 0,
+        }
+
+    },
+    series: [
+        {
+            data: [],//todo，获取数值,
+            type: 'bar'
+        }
+    ]
+};
+
+
+const optionall = ref();
+optionall.value = {
+    title: {
+        text: '各车间地点访问次数柱状图(汇总)',
+        x: "center", //设置标题位置居中
+        textStyle: {//设置主标题的文字风格
+            fontSize: 10 //文字大小
+        },
+
+
+
+    },//标题
+    tooltip: {
+        trigger: 'axis'
+    },//虚线
+    calculate: true,//显示数据
+    xAxis: {
+        type: 'category',
+        data: [],//todo，获取横坐标
+        nameLocation: 'center',
+        axisLabel: { interval: 0, rotate: 30 },
+        nameTextStyle: {
+            color: 'red',
+            fontSize: 6,
+
+        }
+    },
+    yAxis: {
+        type: 'value',
+        name: '访问次数',
+        nameTextStyle: {
+            color: 'black',
+            fontSize: 8,
+            padding: 0,
+        }
+
+    },
+    series: [
+        {
+            data: [],//todo，获取数值,
+            type: 'bar'
+        }
+    ]
+};
+
+
+onMounted(() => {
+    isShowAll.value = false;
+})
+
+</script>
+
+<style scoped></style>

src/views/datamanager/systemdata/config.ts

@@ -0,0 +1,33 @@
+
+
+export const BoardSelectList = [
+    {
+        label: '姓名',
+        value: 0,
+    },
+    {
+        label: '工号',
+        value: 1,
+    },
+
+]
+
+
+export enum BoardDeptEnum {
+    all = 100,
+    '5g' = 0,
+    'c02' = 1,
+    'c12' = 2,
+    'top' = 12,
+}
+
+export const BoardDeptList = [
+    {
+        label: '全部',
+        value: BoardDeptEnum.all,
+    },
+    {
+        label: '总部公司',
+        value: BoardDeptEnum.top,
+    },
+]