|
|
@@ -37,6 +37,12 @@
|
|
|
@change="handleQuery">
|
|
|
</el-date-picker>
|
|
|
</el-form-item>
|
|
|
+ <el-form-item>
|
|
|
+ <div class="night-time-display">
|
|
|
+ <span class="night-time-label">当前配置的夜间时段:</span>
|
|
|
+ <span class="night-time-value">{{ nightTimeRange }}</span>
|
|
|
+ </div>
|
|
|
+ </el-form-item>
|
|
|
</el-form>
|
|
|
|
|
|
<!-- 统计数据卡片 -->
|
|
|
@@ -77,9 +83,9 @@
|
|
|
|
|
|
<!-- 趋势图 -->
|
|
|
<el-row :gutter="10" style="margin-bottom: 20px;">
|
|
|
- <div style="height: 500px; width: 100%;">
|
|
|
+ <div style="height: 400px; width: 100%;">
|
|
|
<div class="table_caption" style="height: 30px; line-height: 30px;">夜间出入境人员数量趋势图</div>
|
|
|
- <div style="height: 470px; width: 100%; border: 1px solid #ededed; background: #fff;" ref="trendChartContainer">
|
|
|
+ <div style="height: 370px; width: 100%; border: 1px solid #ededed; background: #fff;" ref="trendChartContainer">
|
|
|
<div id="trendChart" style="height: 100%; width: 100%;"></div>
|
|
|
</div>
|
|
|
</div>
|
|
|
@@ -282,6 +288,7 @@
|
|
|
<script setup name="Night">
|
|
|
import * as echarts from 'echarts'
|
|
|
import { getNightInOutStats, getNightInOutDetail } from "@/api/biz/anal";
|
|
|
+import { getOther } from "@/api/biz/other";
|
|
|
import { getCurrentInstance, nextTick, onMounted, onUnmounted, reactive, ref, toRefs, watch } from 'vue';
|
|
|
import Pagination from "@/components/Pagination/index.vue";
|
|
|
import { parseTime, resetForm } from "@/utils/ruoyi";
|
|
|
@@ -301,6 +308,9 @@ const statistics = ref({
|
|
|
maxFrequency: 0
|
|
|
});
|
|
|
|
|
|
+// 夜间时段配置
|
|
|
+const nightTimeRange = ref("未知");
|
|
|
+
|
|
|
// 出入境记录明细相关
|
|
|
const recordDetailOpen = ref(false);
|
|
|
const recordDetailLoading = ref(false);
|
|
|
@@ -615,11 +625,11 @@ function renderTrendChart(trendData, queryType) {
|
|
|
seriesData = [0];
|
|
|
}
|
|
|
|
|
|
- const option = {
|
|
|
- title: {
|
|
|
- text: getTrendChartTitle(queryType),
|
|
|
- left: 'center'
|
|
|
- },
|
|
|
+ const option = { // 饼图禁止显示自带title,因上方已有文字标题,避免重复展示
|
|
|
+ // title: {
|
|
|
+ // text: getTrendChartTitle(queryType),
|
|
|
+ // left: 'center'
|
|
|
+ // }, // 移除图表自带标题
|
|
|
tooltip: {
|
|
|
trigger: 'axis',
|
|
|
axisPointer: {
|
|
|
@@ -704,9 +714,30 @@ function handleRowClick(row) {
|
|
|
recordDetailOpen.value = true;
|
|
|
}
|
|
|
|
|
|
+// 获取夜间时段配置
|
|
|
+function getNightTimeConfig() {
|
|
|
+ getOther(1).then(response => {
|
|
|
+ if (response.code === 200 && response.data) {
|
|
|
+ const config = response.data;
|
|
|
+ if (config.cfg1) {
|
|
|
+ // cfg1 格式可能是 "22:00-06:00" 这样的时间段
|
|
|
+ nightTimeRange.value = config.cfg1;
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ console.error('获取夜间时段配置失败:', response.msg);
|
|
|
+ nightTimeRange.value = '获取失败';
|
|
|
+ }
|
|
|
+ }).catch(error => {
|
|
|
+ console.error('获取夜间时段配置异常:', error);
|
|
|
+ nightTimeRange.value = '获取异常';
|
|
|
+ });
|
|
|
+}
|
|
|
+
|
|
|
// 在组件挂载后,根据默认查询类型执行查询
|
|
|
onMounted(() => {
|
|
|
-
|
|
|
+ // 先获取夜间时段配置
|
|
|
+ getNightTimeConfig();
|
|
|
+
|
|
|
// 确保在DOM更新后再执行查询
|
|
|
nextTick(() => {
|
|
|
handleQuery();
|
|
|
@@ -762,4 +793,25 @@ onUnmounted(() => {
|
|
|
padding-left: 10px;
|
|
|
background-color: #f5f7fa;
|
|
|
}
|
|
|
+
|
|
|
+.night-time-display {
|
|
|
+ display: inline-block;
|
|
|
+ background: #f5f7fa;
|
|
|
+ border: 1px solid #dcdfe6;
|
|
|
+ padding: 6px 12px;
|
|
|
+ border-radius: 4px;
|
|
|
+ font-size: 12px;
|
|
|
+ color: #909399;
|
|
|
+}
|
|
|
+
|
|
|
+.night-time-label {
|
|
|
+ font-weight: 600;
|
|
|
+ color: #606266;
|
|
|
+}
|
|
|
+
|
|
|
+.night-time-value {
|
|
|
+ font-weight: normal;
|
|
|
+ color: #606266;
|
|
|
+ margin-left: 5px;
|
|
|
+}
|
|
|
</style>
|