@@ -35,43 +55,89 @@
customerArr: [],
orderArr: [],
chartData: {},
+ // 时间段筛选
+ dateRange: this.getDefaultDateRange(),
+ pickerOptions: {
+ shortcuts: [{
+ text: '最近一周',
+ onClick(picker) {
+ const end = new Date();
+ const start = new Date();
+ start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
+ picker.$emit('pick', [start, end]);
+ }
+ }, {
+ text: '最近一个月',
+ onClick(picker) {
+ const end = new Date();
+ const start = new Date();
+ start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
+ picker.$emit('pick', [start, end]);
+ }
+ }, {
+ text: '最近三个月',
+ onClick(picker) {
+ const end = new Date();
+ const start = new Date();
+ start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
+ picker.$emit('pick', [start, end]);
+ }
+ }]
+ },
pieData:{
- // xArr:['普通访客','施工访客','物流车辆'],
yArr:[
{
- value:20,
- name:"普通访客"
+ value: 0,
+ name:"普通访客",
+ itemStyle: {
+ color: '#D1AC7B' // 普通访客卡片颜色
+ }
},{
- value:40,
- name:"施工访客"
+ value: 0,
+ name:"施工访客",
+ itemStyle: {
+ color: '#9193BC' // 施工访客卡片颜色
+ }
},{
- value:40,
- name:"物流车辆"
+ value: 0,
+ name:"物流车辆",
+ itemStyle: {
+ color: '#64A48E' // 物流车辆卡片颜色
+ }
}],
radiusArr:'50%'
},
LineData:{
- xArr: ['9:00-10:00','10:00-11:00','11:00-12:00','12:00-13:00'],
+ xArr: [],
legendArr: ["普通访客", "施工访客", "物流车辆"],
series:[
{
name: '普通访客',
type: 'line',
stack: 'Total',
- data: [20,10,40,70]
+ data: [],
+ itemStyle: {
+ color: '#D1AC7B' // 普通访客颜色
+ }
},
{
name: '施工访客',
type: 'line',
stack: 'Total',
- data: [15,75,35,45]
+ data: [],
+ itemStyle: {
+ color: '#9193BC' // 施工访客颜色
+ }
},
{
name: '物流车辆',
type: 'line',
stack: 'Total',
- data: [75,35,60,10]
+ data: [],
+ itemStyle: {
+ color: '#64A48E' // 物流车辆颜色
+ }
}
]
}
@@ -85,10 +151,118 @@
}
},
methods: {
- async loadData() {
- await getChartsHome().then((res) => {
- console.log(res);
+ // 获取默认时间范围（30天前到今天）
+ getDefaultDateRange() {
+ const today = new Date();
+ const thirtyDaysAgo = new Date();
+ thirtyDaysAgo.setDate(today.getDate() - 30);
+
+ return [
+ this.formatDate(thirtyDaysAgo),
+ this.formatDate(today)
+ ];
+ },
+
+ // 格式化日期为 YYYY-MM-DD
+ formatDate(date) {
+ const year = date.getFullYear();
+ const month = String(date.getMonth() + 1).padStart(2, '0');
+ const day = String(date.getDate()).padStart(2, '0');
+ return `${year}-${month}-${day}`;
+ },
+
+ // 更新圆饼图数据
+ updatePieChartData(listData) {
+ if (listData && listData.common_visit && listData.work_visit && listData.car_visit) {
+ this.pieData.yArr = [
+ {
+ value: listData.common_visit.total || 0,
+ name: "普通访客",
+ itemStyle: {
+ color: '#D1AC7B' // 普通访客卡片颜色
+ }
+ },
+ {
+ value: listData.work_visit.total || 0,
+ name: "施工访客",
+ itemStyle: {
+ color: '#9193BC' // 施工访客卡片颜色
+ }
+ },
+ {
+ value: listData.car_visit.total || 0,
+ name: "物流车辆",
+ itemStyle: {
+ color: '#64A48E' // 物流车辆卡片颜色
+ }
+ }
+ ];
+ }
+ },
+
+ // 更新曲线图数据
+ updateLineChartData(dateList) {
+ if (dateList && Array.isArray(dateList)) {
+ // 提取日期作为横坐标
+ this.LineData.xArr = dateList.map(item => {
+ // 格式化日期显示，只显示月-日
+ const date = new Date(item.date);
+ const month = String(date.getMonth() + 1).padStart(2, '0');
+ const day = String(date.getDate()).padStart(2, '0');
+ return `${month}-${day}`;
+ });
+
+ // 提取各类型访客数据
+ this.LineData.series[0].data = dateList.map(item => item.common_visit || 0);
+ this.LineData.series[1].data = dateList.map(item => item.work_visit || 0);
+ this.LineData.series[2].data = dateList.map(item => item.car_visit || 0);
+ }
+ },
+
+ // 时间段改变事件
+ handleDateChange(value) {
+ console.log('选择的时间段:', value);
+ },
+ // 查询按钮
+ handleSearch() {
+ if (this.dateRange && this.dateRange.length === 2) {
+ console.log('查询时间段:', {
+ startDate: this.dateRange[0],
+ endDate: this.dateRange[1]
+ });
+ // 调用接口获取筛选后的数据
+ this.loadData({
+ start_date: this.dateRange[0],
+ end_date: this.dateRange[1]
+ });
+ this.$message.success('查询成功');
+ } else {
+ this.$message.warning('请选择时间段');
+ }
+ },
+ // 重置按钮
+ handleReset() {
+ // 重置为默认时间范围（30天前到今天）
+ this.dateRange = this.getDefaultDateRange();
+ console.log('重置时间筛选');
+ // 使用默认时间范围重新加载数据
+ this.loadData({
+ start_date: this.dateRange[0],
+ end_date: this.dateRange[1]
+ });
+ this.$message.success('已重置');
+ },
+ async loadData(params = {}) {
+ await getChartsHome(params).then((res) => {
+ console.log('接口返回数据:', res);
this.list = res.list;
+
+ // 更新圆饼图数据
+ this.updatePieChartData(res.list);
+
+ // 更新曲线图数据
+ this.updateLineChartData(res.all_date_list);
+
// this.chartData = res;
// let _business_data = [];
// let _collect_data = [];
@@ -215,8 +389,11 @@
}
},
created() {
-
- this.loadData();
+ // 页面初始化时使用默认时间范围加载数据
+ this.loadData({
+ start_date: this.dateRange[0],
+ end_date: this.dateRange[1]
+ });
},
mounted() {
@@ -236,6 +413,17 @@
+
diff --git a/src/views/visit/component/showVisit.vue b/src/views/visit/component/showVisit.vue
index 40ffef7..5332db2 100644
--- a/src/views/visit/component/showVisit.vue
+++ b/src/views/visit/component/showVisit.vue
@@ -28,11 +28,11 @@
核销状态：
-
-
-
- {{item.value}}
-
+
+
-
-
-
+ placeholder="请输入入场牌"> -->
+
+
+
@@ -67,12 +67,12 @@
-
-
-
-
+ placeholder="请输入停车牌"> -->
+
+
+
+
@@ -208,16 +208,16 @@
{{form.company_name}}