Skip to content

J
JINRUN-PERPOSITION
Commit 85fddc22 authored by xinzhedeai's avatar xinzhedeai
Browse files
Options

add：echarts

parent 73119f4a
Show whitespace changes
Inline Side-by-side
Showing with 708 additions and 57 deletions
src/router/index.js
View file @ 85fddc22
......@@ -76,65 +76,65 @@ export const constantRoutes = [
}
]
},
{
path: '/dw',
// component: Layout,
hidden: true,
// {
// path: '/dw',
// // component: Layout,
// hidden: true,
component: EmptyLayout,
redirect: 'noredirect',
children: [
{
path: 'index',
component: () => import('@/views/index-dw'),
name: 'Index',
meta: { title: '首页2-dw', icon: 'dashboard', }
}
]
},
{
path: '/zz',
component: EmptyLayout,
hidden: true,
redirect: 'noredirect',
// component: EmptyLayout,
// redirect: 'noredirect',
// children: [
// {
// path: 'index',
// component: () => import('@/views/index-dw'),
// name: 'Index',
// meta: { title: '首页2-dw', icon: 'dashboard', }
// }
// ]
// },
// {
// path: '/zz',
// component: EmptyLayout,
// hidden: true,
// redirect: 'noredirect',
children: [
{
path: 'index',
component: () => import('@/views/index-zz'),
name: 'Index',
meta: { title: '首页2-zz', icon: 'dashboard', }
}
]
},
{
path: '/guiji',
component: EmptyLayout,
hidden: true,
redirect: 'noredirect',
children: [
{
path: 'index',
component: () => import('@/views/index-guiji'),
name: 'Index',
meta: { title: '首页2-gj', icon: 'dashboard', }
}
]
},
{
path: '/wl',
component: EmptyLayout,
hidden: true,
redirect: 'noredirect',
children: [
{
path: 'index',
component: () => import('@/views/index-wl'),
name: 'Screen',
meta: { title: '首页-WL', icon: 'dashboard', }
}
]
},
// children: [
// {
// path: 'index',
// component: () => import('@/views/index-zz'),
// name: 'Index',
// meta: { title: '首页2-zz', icon: 'dashboard', }
// }
// ]
// },
// {
// path: '/guiji',
// component: EmptyLayout,
// hidden: true,
// redirect: 'noredirect',
// children: [
// {
// path: 'index',
// component: () => import('@/views/index-guiji'),
// name: 'Index',
// meta: { title: '首页2-gj', icon: 'dashboard', }
// }
// ]
// },
// {
// path: '/wl',
// component: EmptyLayout,
// hidden: true,
// redirect: 'noredirect',
// children: [
// {
// path: 'index',
// component: () => import('@/views/index-wl'),
// name: 'Screen',
// meta: { title: '首页-WL', icon: 'dashboard', }
// }
// ]
// },
// 定位卡管理
{
......@@ -223,6 +223,19 @@ export const constantRoutes = [
}
]
},
{
path: '/tongji',
component: EmptyLayout,
redirect: 'noredirect',
children: [
{
path: 'renyuantongji',
component: () => import('@/views/tongji/renyuantongji'),
name: 'renyuantongji',
meta: { title: '人员统计', icon: 'dashboard', }
}
]
},
{
path: '/user',
component: Layout,
......
src/views/tongji/baojingtongji.vue 0 → 100644
View file @ 85fddc22
<template>
<div class="app-container">
<el-form
:model="queryParams"
ref="queryForm"
size="small"
:inline="true"
v-show="showSearch"
label-width="68px"
>
<el-form-item label="月份查询" prop="realName">
<el-input
v-model="queryParams.realName"
placeholder="请输入月份"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="创建时间">
<el-date-picker
v-model="queryParams.dateRange"
style="width: 240px"
value-format="yyyy-MM-dd"
type="daterange"
range-separator="-"
start-placeholder="开始日期"
end-placeholder="结束日期"
></el-date-picker>
</el-form-item>
<el-form-item>
<el-button
type="primary"
icon="el-icon-search"
size="mini"
@click="handleQuery"
>搜索</el-button
>
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
>重置</el-button
>
</el-form-item>
</el-form>
<el-row :gutter="10" class="mb8">
<el-col :span="1.5">
<el-button
type="warning"
plain
icon="el-icon-download"
size="mini"
@click="handleExport"
>导出</el-button
>
</el-col>
</el-row>
<el-table
v-loading="loading"
:data="infoList"
@selection-change="handleSelectionChange"
>
<el-table-column type="selection" width="55" align="center" />
<el-table-column label="序号" align="center" type="index" width="50" />
<el-table-column label="日期" align="center" prop="realName" />
<el-table-column label="矿区内人数" align="center" prop="deptName" />
<el-table-column label="矿区外人数" align="center" prop="positionName" />
<el-table-column label="矿区外人员姓名" align="center" prop="cardId" />
</el-table>
<pagination
v-show="total > 0"
:total="total"
:page.sync="queryParams.pageNum"
:limit.sync="queryParams.pageSize"
@pagination="getList"
/>
</div>
</template>
<script>
import { listInfo } from "@/api/jinrun/renyuan";
import { getDict } from "@/api/jinrun/common";
export default {
name: "Info",
data() {
return {
// 人员类型下拉列表数据
personTypeOptions: [],
// 遮罩层
loading: true,
// 选中数组
ids: [],
// 非单个禁用
single: true,
// 非多个禁用
multiple: true,
// 显示搜索条件
showSearch: true,
// 总条数
total: 0,
// 人员信息表格数据
infoList: [],
// 弹出层标题
title: "",
// 是否显示弹出层
open: false,
// 查询参数
queryParams: {
dateRange: null,
realName: null,
pageNum: 1,
pageSize: 10,
},
// 表单参数
form: {
personType: "",
},
};
},
created() {
this.getList();
},
methods: {
/** 查询人员信息列表 */
getList() {
this.loading = true;
listInfo(this.queryParams).then((response) => {
this.infoList = response.records;
this.total = response.total;
this.loading = false;
});
},
// 取消按钮
cancel() {
this.open = false;
this.reset();
},
/** 搜索按钮操作 */
handleQuery() {
this.queryParams.pageNum = 1;
this.getList();
},
/** 重置按钮操作 */
resetQuery() {
this.resetForm("queryForm");
this.handleQuery();
},
// 多选框选中数据
handleSelectionChange(selection) {
this.ids = selection.map((item) => item.personId);
this.single = selection.length !== 1;
this.multiple = !selection.length;
},
/** 导出按钮操作 */
handleExport() {
this.download(
"system/info/export",
{
...this.queryParams,
},
`info_${new Date().getTime()}.xlsx`
);
},
},
};
</script>
<style scoped lang="scss">
.image-slot {
display: flex;
justify-content: center;
align-items: center;
width: 50px;
height: 50px;
background-color: #f5f7fa;
color: #909399;
font-size: 20px;
}
</style>
\ No newline at end of file
src/views/tongji/renyuantongji.vue 0 → 100644
View file @ 85fddc22
<template>
<div class="app-container">
<!-- 统计模块 -->
<div
class="statistics-module"
style="
background-color: #f9fafd;
padding: 20px;
border-radius: 8px;
margin-bottom: 20px;
width: 500px;
"
>
<el-row :gutter="20">
<!-- 第一部分：人员统计 -->
<el-col :span="8">
<div
class="stat-item"
style="
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 10px;
"
>
<div
class="stat-icon"
style="font-size: 30px; color: #409eff; margin-bottom: 10px"
>
<svg-icon icon-class="user" />
</div>
<div class="stat-text" style="font-size: 16px; color: #000">
人员统计
</div>
</div>
</el-col>
<!-- 第二部分：今日员工人数 -->
<el-col :span="8">
<div
class="stat-item"
style="
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 10px;
border-left: 1px solid #ebeef5;
border-right: 1px solid #ebeef5;
"
>
<div
class="stat-label"
style="font-size: 14px; color: #000; margin-bottom: 12px"
>
今日员工人数
</div>
<div
class="stat-value"
style="font-size: 18px; font-weight: 400; color: #2196f3"
>
3人
</div>
</div>
</el-col>
<!-- 第三部分：今日访客人数 -->
<el-col :span="8">
<div
class="stat-item"
style="
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 10px;
"
>
<div
class="stat-label"
style="font-size: 14px; color: #000; margin-bottom: 12px"
>
今日访客人数
</div>
<div
class="stat-value"
style="font-size: 18px; font-weight: 400; color: #2196f3"
>
3人
</div>
</div>
</el-col>
</el-row>
</div>
<el-form
:model="queryParams"
ref="queryForm"
size="small"
:inline="true"
v-show="showSearch"
label-width="68px"
>
<label>人员数量趋势图</label>
<el-form-item label="" style="margin-top: -5px; margin-left: 20px">
<el-date-picker
v-model="queryParams.dateRange"
style="width: 240px"
value-format="yyyy-MM-dd"
type="daterange"
range-separator="-"
start-placeholder="开始日期"
end-placeholder="结束日期"
></el-date-picker>
</el-form-item>
<el-form-item style="margin-top: -5px; margin-left: 20px">
<el-button
type="primary"
icon="el-icon-search"
size="mini"
@click="handleQuery"
>搜索</el-button
>
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
>重置</el-button
>
</el-form-item>
</el-form>
<!-- 趋势图 -->
<div
class="qushitu"
style="width: 100%; height: 400px; margin-bottom: 20px"
></div>
<!-- <el-row :gutter="10" class="mb8">
<el-col :span="1.5">
<el-button
type="warning"
plain
icon="el-icon-download"
size="mini"
@click="handleExport"
>导出</el-button
>
</el-col>
</el-row> -->
<el-form
:model="queryParams"
ref="queryForm"
size="small"
:inline="true"
v-show="showSearch"
label-width="68px"
>
<label>人员明细表</label></el-form
>
<el-table
v-loading="loading"
:data="infoList"
@selection-change="handleSelectionChange"
>
<el-table-column label="序号" align="center" type="index" width="50" />
<el-table-column label="姓名" align="center" prop="realName" />
<el-table-column label="部门名称" align="center" prop="deptName" />
<el-table-column label="岗位名称" align="center" prop="positionName" />
<el-table-column label="定位卡号" align="center" prop="cardId" />
<el-table-column label="日期" align="center" prop="cardId" />
</el-table>
<pagination
v-show="total > 0"
:total="total"
:page.sync="queryParams.pageNum"
:limit.sync="queryParams.pageSize"
@pagination="getList"
/>
</div>
</template>
<script>
import { listInfo } from "@/api/jinrun/renyuan";
import { getDict } from "@/api/jinrun/common";
import * as echarts from "echarts"; // 导入ECharts
export default {
name: "Info",
data() {
return {
// 人员类型下拉列表数据
personTypeOptions: [],
// 遮罩层
loading: true,
// 选中数组
ids: [],
// 非单个禁用
single: true,
// 非多个禁用
multiple: true,
// 显示搜索条件
showSearch: true,
// 总条数
total: 0,
// 人员信息表格数据
infoList: [],
// 弹出层标题
title: "",
// 是否显示弹出层
open: false,
// 查询参数
queryParams: {
dateRange: null,
realName: null,
pageNum: 1,
pageSize: 10,
},
// 表单参数
form: {
personType: "",
},
};
},
created() {
this.getList();
},
mounted() {
this.initChart();
},
methods: {
/** 初始化图表 */
initChart() {
// 获取DOM元素并初始化图表
const chartDom = document.querySelector(".qushitu");
if (chartDom) {
this.chartInstance = echarts.init(chartDom);
// 设置初始配置
const option = {
title: {
// text: "人员数量趋势图",
left: "center",
},
tooltip: {
trigger: "axis",
formatter: function (params) {
return (
params[0].name + "<br/>" + "人员数量: " + params[0].value + "人"
);
},
},
grid: {
left: "3%",
right: "4%",
bottom: "3%",
containLabel: true,
},
xAxis: {
type: "category",
boundaryGap: false,
data: [], // 将由updateChart方法填充
axisLabel: {
// 修改formatter配置，正确显示年月日
formatter: function (value) {
// value是完整的日期字符串，如"2023-10-25"
return value.split("-").slice(1).join("-"); // 显示月-日，如"10-25"
// 如果需要显示完整年月日，可以使用：return value;
},
rotate: 45, // 添加旋转以避免日期重叠
interval: 0, // 显示所有标签
},
},
yAxis: {
type: "value",
name: "人员数量",
splitLine: {
show: true, // 显示每个刻度对应的横线
lineStyle: {
type: "solid",
color: "#f0f0f0",
},
},
minInterval: 1, // y轴最小间隔为1，避免显示小数
axisLabel: {
formatter: "{value}人",
},
},
series: [
{
name: "人员数量",
type: "line",
smooth: false,
symbol: "circle", // 数据点样式
symbolSize: 8, // 数据点大小
lineStyle: {
width: 3, // 线宽
color: "#1890ff", // 蓝色线条
},
itemStyle: {
color: "#1890ff", // 数据点颜色
},
areaStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: "rgba(24, 144, 255, 0.3)",
},
{
offset: 1,
color: "rgba(24, 144, 255, 0.05)",
},
]),
},
data: [], // 将由updateChart方法填充
},
],
};
this.chartInstance.setOption(option);
// 初始化后立即调用updateChart加载测试数据（添加这行）
this.updateChart();
// 监听窗口大小变化，自适应图表大小
window.addEventListener("resize", this.handleResize);
}
},
/** 更新图表数据 */
updateChart() {
if (this.chartInstance) {
// 模拟数据（实际项目中应根据后端返回数据处理）
const dateRange = this.queryParams.dateRange;
let dates = [];
let values = [];
if (dateRange && dateRange.length === 2) {
// 有日期范围时生成模拟数据
const start = new Date(dateRange[0]);
const end = new Date(dateRange[1]);
const days = Math.ceil((end - start) / (1000 * 60 * 60 * 24));
for (let i = 0; i <= days; i++) {
const currentDate = new Date(start);
currentDate.setDate(start.getDate() + i);
const dateStr =
currentDate.getFullYear() +
"-" +
(currentDate.getMonth() + 1).toString().padStart(2, "0") +
"-" +
currentDate.getDate().toString().padStart(2, "0");
dates.push(dateStr);
// 生成随机数据，范围在1-10之间
values.push(Math.floor(Math.random() * 10) + 1);
}
} else {
// 默认显示最近7天的数据
for (let i = 6; i >= 0; i--) {
const currentDate = new Date();
currentDate.setDate(currentDate.getDate() - i);
const dateStr =
currentDate.getFullYear() +
"-" +
(currentDate.getMonth() + 1).toString().padStart(2, "0") +
"-" +
currentDate.getDate().toString().padStart(2, "0");
dates.push(dateStr);
// 生成随机数据，范围在1-10之间
values.push(Math.floor(Math.random() * 10) + 1);
}
}
// 更新图表数据
this.chartInstance.setOption({
xAxis: {
data: dates,
},
series: [
{
data: values,
},
],
});
}
},
/** 处理窗口大小变化 */
handleResize() {
if (this.chartInstance) {
this.chartInstance.resize();
}
},
/** 查询人员信息列表 */
getList() {
this.loading = true;
listInfo(this.queryParams).then((response) => {
this.infoList = response.records;
this.total = response.total;
this.loading = false;
});
},
// 取消按钮
cancel() {
this.open = false;
this.reset();
},
/** 搜索按钮操作 */
handleQuery() {
this.queryParams.pageNum = 1;
this.getList();
// 搜索时更新图表数据（添加这行）
this.updateChart();
},
/** 重置按钮操作 */
resetQuery() {
this.resetForm("queryForm");
this.handleQuery();
},
// 多选框选中数据
handleSelectionChange(selection) {
this.ids = selection.map((item) => item.personId);
this.single = selection.length !== 1;
this.multiple = !selection.length;
},
/** 导出按钮操作 */
handleExport() {
this.download(
"system/info/export",
{
...this.queryParams,
},
`info_${new Date().getTime()}.xlsx`
);
},
},
/** 组件销毁时清理 */
beforeDestroy() {
if (this.chartInstance) {
this.chartInstance.dispose();
}
window.removeEventListener("resize", this.handleResize);
},
};
</script>
<style scoped lang="scss">
.image-slot {
display: flex;
justify-content: center;
align-items: center;
width: 50px;
height: 50px;
background-color: #f5f7fa;
color: #909399;
font-size: 20px;
}
</style>
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment