mod:话务简报

src/assets/style.css

@@ -782,6 +782,10 @@ video {
   margin-top: auto;
 }
 
+.mb-3 {
+  margin-bottom: 0.75rem;
+}
+
 .line-clamp-2 {
   overflow: hidden;
   display: -webkit-box;
@@ -869,6 +873,10 @@ video {
   height: 100%;
 }
 
+.h-\[160px\] {
+  height: 160px;
+}
+
 .max-h-96 {
   max-height: 24rem;
 }
@@ -889,6 +897,10 @@ video {
   min-height: calc(100vh - 120px);
 }
 
+.\!w-\[400px\] {
+  width: 400px !important;
+}
+
 .w-1 {
   width: 0.25rem;
 }
@@ -945,6 +957,10 @@ video {
   width: 100%;
 }
 
+.w-\[300px\] {
+  width: 300px;
+}
+
 .w-\[320px\] {
   width: 320px;
 }
@@ -965,10 +981,22 @@ video {
   width: 1px;
 }
 
+.w-\[330px\] {
+  width: 330px;
+}
+
+.w-\[350px\] {
+  width: 350px;
+}
+
 .max-w-7xl {
   max-width: 80rem;
 }
 
+.max-w-3xl {
+  max-width: 48rem;
+}
+
 .flex-1 {
   flex: 1 1 0%;
 }
@@ -1003,6 +1031,10 @@ video {
   resize: both;
 }
 
+.grid-cols-1 {
+  grid-template-columns: repeat(1, minmax(0, 1fr));
+}
+
 .grid-cols-2 {
   grid-template-columns: repeat(2, minmax(0, 1fr));
 }
@@ -1162,6 +1194,10 @@ video {
   border-top-width: 1px;
 }
 
+.border-l-4 {
+  border-left-width: 4px;
+}
+
 .border-blue-200 {
   --tw-border-opacity: 1;
   border-color: rgb(191 219 254 / var(--tw-border-opacity, 1));
@@ -1354,6 +1390,10 @@ video {
   padding: 1.5rem;
 }
 
+.p-8 {
+  padding: 2rem;
+}
+
 .px-2 {
   padding-left: 0.5rem;
   padding-right: 0.5rem;
@@ -1417,6 +1457,10 @@ video {
   padding-top: 1.75rem;
 }
 
+.pl-3 {
+  padding-left: 0.75rem;
+}
+
 .text-center {
   text-align: center;
 }
@@ -1546,6 +1590,11 @@ video {
   color: rgb(31 41 55 / var(--tw-text-opacity, 1));
 }
 
+.text-gray-900 {
+  --tw-text-opacity: 1;
+  color: rgb(17 24 39 / var(--tw-text-opacity, 1));
+}
+
 .text-green-500 {
   --tw-text-opacity: 1;
   color: rgb(34 197 94 / var(--tw-text-opacity, 1));

src/views/main/report/connectionVolumes/bulletin.vue

@@ -0,0 +1,557 @@
+<template>
+  <div class="min-h-screen bg-gray-50 p-4">
+    <div class="mx-auto max-w-8xl">
+      <!-- 查询区域 -->
+      <div class="bg-white rounded-lg shadow-sm p-4 mb-4">
+        <div class="flex items-center gap-4">
+          <div class="flex items-center gap-2">
+            <span class="text-gray-600">时间范围</span>
+            <el-date-picker
+              v-model="dateRange"
+              type="daterange"
+              range-separator="至"
+              start-placeholder="开始日期"
+              end-placeholder="结束日期"
+              :shortcuts="dateShortcuts"
+              value-format="YYYY-MM-DD"
+              class="!w-[400px]"
+            />
+          </div>
+          <el-button
+            type="primary"
+            :loading="loading"
+            class="!rounded-button whitespace-nowrap"
+            @click="handleSearch"
+          >
+            <el-icon class="mr-1"><search /></el-icon>查询
+          </el-button>
+          <el-button
+            class="!rounded-button whitespace-nowrap"
+            @click="handleReset"
+          >
+            <el-icon class="mr-1"><Refresh /></el-icon>重置
+          </el-button>
+          <el-button
+            class="!rounded-button whitespace-nowrap"
+            @click="handleDownload"
+          >
+            <el-icon class="mr-1"><Download /></el-icon>导出
+          </el-button>
+        </div>
+      </div>
+      <!-- 数据展示区域 -->
+      <div class="grid grid-cols-1 gap-4">
+        <!-- 基础话务数据 -->
+        <div class="bg-white rounded-lg shadow-sm p-4">
+          <h3
+            class="text-lg font-semibold mb-4 text-gray-900 border-l-4 border-blue-500 pl-3"
+          >
+            话务数据
+          </h3>
+          <div class="flex">
+            <dl class="grid grid-cols-4 gap-4 flex-1">
+              <div class="stat-item">
+                <dt class="text-gray-600">话务总量</dt>
+                <dd class="text-xl font-semibold text-gray-900">
+                  {{ stats.totalCalls }}
+                </dd>
+              </div>
+              <div class="stat-item">
+                <dt class="text-gray-600">平均话务量</dt>
+                <dd class="text-2xl font-semibold text-gray-900">
+                  {{ stats.averageCalls }}
+                </dd>
+              </div>
+              <div class="stat-item">
+                <dt class="text-gray-600">平均接通率</dt>
+                <dd class="text-2xl font-semibold text-blue-600">
+                  {{ stats.averageConnectedRate }}
+                </dd>
+              </div>
+            </dl>
+            <div ref="basicChart" class="w-[350px] h-[160px]"></div>
+          </div>
+        </div>
+        <!-- 呼入数据 -->
+        <div class="bg-white rounded-lg shadow-sm p-4">
+          <h3
+            class="text-lg font-semibold mb-4 text-gray-900 border-l-4 border-blue-500 pl-3"
+          >
+            呼入数据
+          </h3>
+          <div class="flex">
+            <dl class="grid grid-cols-4 gap-4 flex-1">
+              <div class="stat-item">
+                <dt class="text-gray-600">呼入总量</dt>
+                <dd class="text-2xl font-semibold text-gray-900">
+                  {{ stats.inboundTotal }}
+                </dd>
+              </div>
+              <div class="stat-item">
+                <dt class="text-gray-600">呼入接通量</dt>
+                <dd class="text-2xl font-semibold text-green-600">
+                  {{ stats.inboundConnected }}
+                </dd>
+              </div>
+              <div class="stat-item">
+                <dt class="text-gray-600">呼入未接通量</dt>
+                <dd class="text-2xl font-semibold text-red-600">
+                  {{ stats.inboundNotConnected }}
+                </dd>
+              </div>
+              <div class="stat-item">
+                <dt class="text-gray-600">呼入接通率</dt>
+                <dd class="text-2xl font-semibold text-green-600">
+                  {{ stats.inboundConnectedRate }}
+                </dd>
+              </div>
+              <div class="stat-item">
+                <dt class="text-gray-600">呼入未接通率</dt>
+                <dd class="text-2xl font-semibold text-red-600">
+                  {{ stats.inboundNotConnectedRate }}
+                </dd>
+              </div>
+              <div class="stat-item">
+                <dt class="text-gray-600">呼入总时长</dt>
+                <dd class="text-2xl font-semibold text-gray-900">
+                  {{ stats.callDurations }}
+                </dd>
+              </div>
+              <div class="stat-item">
+                <dt class="text-gray-600">呼入平均时长</dt>
+                <dd class="text-2xl font-semibold text-gray-900">
+                  {{ stats.averageCallDuration }}
+                </dd>
+              </div>
+            </dl>
+            <div ref="inboundChart" class="w-[350px] h-[160px]"></div>
+          </div>
+        </div>
+        <!-- 呼出数据 -->
+        <div class="bg-white rounded-lg shadow-sm p-4">
+          <h3
+            class="text-lg font-semibold mb-4 text-gray-900 border-l-4 border-blue-500 pl-3"
+          >
+            呼出数据
+          </h3>
+          <div class="flex">
+            <dl class="grid grid-cols-4 gap-4 flex-1">
+              <div class="stat-item">
+                <dt class="text-gray-600">呼出总量</dt>
+                <dd class="text-2xl font-semibold text-gray-900">
+                  {{ stats.outboundTotal }}
+                </dd>
+              </div>
+              <div class="stat-item">
+                <dt class="text-gray-600">呼出接通量</dt>
+                <dd class="text-2xl font-semibold text-green-600">
+                  {{ stats.outboundConnected }}
+                </dd>
+              </div>
+              <div class="stat-item">
+                <dt class="text-gray-600">呼出未接通量</dt>
+                <dd class="text-2xl font-semibold text-red-600">
+                  {{ stats.outboundNotConnected }}
+                </dd>
+              </div>
+              <div class="stat-item">
+                <dt class="text-gray-600">呼出接通率</dt>
+                <dd class="text-2xl font-semibold text-green-600">
+                  {{ stats.outboundConnectedRate }}
+                </dd>
+              </div>
+              <div class="stat-item">
+                <dt class="text-gray-600">呼出未接通率</dt>
+                <dd class="text-2xl font-semibold text-red-600">
+                  {{ stats.outboundNotConnectedRate }}
+                </dd>
+              </div>
+              <!-- <div class="stat-item">
+                <dt class="text-gray-600">呼出总时长</dt>
+                <dd class="text-2xl font-semibold text-gray-900">1,890小时</dd>
+              </div>
+              <div class="stat-item">
+                <dt class="text-gray-600">呼出平均时长</dt>
+                <dd class="text-2xl font-semibold text-gray-900">12分钟</dd>
+              </div> -->
+            </dl>
+            <div ref="outboundChart" class="w-[350px] h-[160px]"></div>
+          </div>
+        </div>
+        <!-- 满意度数据 -->
+        <div class="bg-white rounded-lg shadow-sm p-4">
+          <h3
+            class="text-lg font-semibold mb-4 text-gray-900 border-l-4 border-blue-500 pl-3"
+          >
+            满意度评价
+          </h3>
+          <div class="flex">
+            <dl class="grid grid-cols-4 gap-4 flex-1">
+              <div class="stat-item">
+                <dt class="text-gray-600">评价总量</dt>
+                <dd class="text-2xl font-semibold text-gray-900">
+                  {{ stats.mydTotal }}
+                </dd>
+              </div>
+              <div class="stat-item">
+                <dt class="text-gray-600">
+                  满意量
+                </dt>
+                <dd class="text-2xl font-semibold text-green-600">
+                  {{ stats.satisfied }}
+                </dd>
+              </div>
+              <div class="stat-item">
+                <dt class="text-gray-600">
+                  基本满意量
+                </dt>
+                <dd class="text-2xl font-semibold text-blue-600">
+                  {{ stats.basically }}
+                </dd>
+              </div>
+              <div class="stat-item">
+                <dt class="text-gray-600">
+                  不满意量
+                </dt>
+                <dd class="text-2xl font-semibold text-red-600">
+                  {{ stats.dissatisfied }}
+                </dd>
+              </div>
+              <div class="stat-item">
+                <dt class="text-gray-600">评价占比</dt>
+                <dd class="text-2xl font-semibold text-gray-900">
+                  {{ stats.mydRate }}
+                </dd>
+              </div>
+              <div class="stat-item">
+                <dt class="text-gray-600">
+                  满意率
+                </dt>
+                <dd class="text-2xl font-semibold text-green-600">
+                  {{ stats.satisfiedRate }}
+                </dd>
+              </div>
+              <div class="stat-item">
+                <dt class="text-gray-600">
+                  基本满意率
+                </dt>
+                <dd class="text-2xl font-semibold text-blue-600">
+                  {{ stats.basicallyRate }}
+                </dd>
+              </div>
+              <div class="stat-item">
+                <dt class="text-gray-600">
+                  不满意率
+                </dt>
+                <dd class="text-2xl font-semibold text-red-600">
+                  {{ stats.dissatisfiedRate }}
+                </dd>
+              </div>
+              <!-- <div class="stat-item">
+                <dt class="text-gray-600">评价参与率</dt>
+                <dd class="text-2xl font-semibold text-gray-900">85.6%</dd>
+              </div>
+              <div class="stat-item">
+                <dt class="text-gray-600">平均评分</dt>
+                <dd class="text-2xl font-semibold text-blue-600">4.5分</dd>
+              </div> -->
+            </dl>
+            <div ref="satisfactionChart" class="w-[350px] h-[160px]"></div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref, onMounted } from "vue";
+import { Search, Refresh, Download } from "@element-plus/icons-vue";
+import * as echarts from "echarts";
+import moment from "moment";
+import { getPageListData } from '@/api/main/system/system';
+const loading = ref(false);
+const dateRange = ref<[string, string]>(['', '']);
+const dateShortcuts = [
+  {
+    text: "最近一周",
+    value: () => {
+      const end = new Date();
+      const start = new Date();
+      start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
+      return [start, end];
+    },
+  },
+  {
+    text: "最近一个月",
+    value: () => {
+      const end = new Date();
+      const start = new Date();
+      start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
+      return [start, end];
+    },
+  },
+  {
+    text: "最近三个月",
+    value: () => {
+      const end = new Date();
+      const start = new Date();
+      start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
+      return [start, end];
+    },
+  },
+];
+const stats = ref({
+  mydRate: '',
+  averageConnectedRate: "0.00%",
+  "totalCalls": 0,
+  "averageCalls": 0,
+  "inboundTotal": 0,
+  "inboundConnected": 0,
+  "inboundNotConnected": 0,
+  "inboundConnectedRate": "0.00%",
+  "inboundNotConnectedRate": "0.00%",
+  "outboundTotal": 0,
+  "outboundConnected": 0,
+  "outboundNotConnected": 0,
+  "outboundConnectedRate": "0.00%",
+  "outboundNotConnectedRate": "0.00%",
+  "callDuration": 0,
+  "callDurations": "0分钟",
+  "averageCallDuration": "0分钟",
+  "mydTotal": 0,
+  "basically": 0,
+  "satisfied": 0,
+  "dissatisfied": 0,
+  "basicallyRate": "0.00%",
+  "satisfiedRate": "0.00%",
+  "dissatisfiedRate": "0.00%"
+});
+const handleSearch = () => {
+  loading.value = true;
+  getBulletingData();
+};
+const handleReset = () => {
+  const startTime = moment().subtract(7, "days").format("YYYY-MM-DD");
+  const endTime = moment().format("YYYY-MM-DD");
+  dateRange.value = [startTime, endTime];
+  getBulletingData();
+};
+const basicChart: any = ref<HTMLElement | null>(null);
+const inboundChart: any = ref<HTMLElement | null>(null);
+const outboundChart: any = ref<HTMLElement | null>(null);
+const satisfactionChart: any = ref<HTMLElement | null>(null);
+const { proxy } = getCurrentInstance()
+
+const handleDownload = () => {
+  proxy.download(
+        '/WorkReport/exportExcelTelephoneBriefing',
+        {
+    startTime: dateRange.value[0],
+    endTime: dateRange.value[1],
+  },
+        `话务简报.xlsx`
+      )
+}
+
+const getBulletingData = () => {
+  loading.value = true;
+  const params = {
+    startTime: dateRange.value[0],
+    endTime: dateRange.value[1],
+  };
+  getPageListData('/WorkReport/selectTelephoneBriefing', params).then(res => {
+    console.log(res);
+    loading.value = false;
+    const data = res.data || {};
+    const averageConnectedRate = data.totalCalls === 0 ? '0.00%' : `${((data.inboundConnected + data.outboundConnected) / data.totalCalls * 100).toFixed(2)}%`;
+    const mydRate = data.mydTotal === 0 ? '0.00%' : `${((data.satisfied || 0 + data.basically || 0) / data.mydTotal * 100).toFixed(2)}%`;
+    stats.value = { 
+      mydRate,
+      averageConnectedRate,
+      ...data,
+    }
+    initCharts();
+  }).catch(err => {
+    loading.value = false;
+  })
+}
+
+const initCharts = () => {
+  // 基础话务数据图表
+  const basicChartInstance = echarts.init(basicChart.value!);
+  basicChartInstance.setOption({
+    animation: false,
+    tooltip: {
+      trigger: "item",
+    },
+    legend: {
+      orient: "vertical",
+      right: 30,
+      top: "center",
+    },
+    series: [
+      {
+        name: "话务分布",
+        type: "pie",
+        radius: ["40%", "70%"],
+        avoidLabelOverlap: false,
+        itemStyle: {
+          borderRadius: 10,
+          borderColor: "#fff",
+          borderWidth: 2,
+        },
+        label: {
+          show: false,
+        },
+        emphasis: {
+          label: {
+            show: true,
+            fontSize: 14,
+            fontWeight: "bold",
+          },
+        },
+        data: [
+          { value: stats.value.inboundTotal || 0, name: "呼入" },
+          { value: stats.value.outboundTotal || 0, name: "呼出" },
+        ],
+      },
+    ],
+  });
+  // 呼入数据图表
+  const inboundChartInstance = echarts.init(inboundChart.value!);
+  inboundChartInstance.setOption({
+    animation: false,
+    tooltip: {
+      trigger: "item",
+    },
+    legend: {
+      orient: "vertical",
+      right: 30,
+      top: "center",
+    },
+    series: [
+      {
+        name: "呼入情况",
+        type: "pie",
+        radius: ["40%", "70%"],
+        avoidLabelOverlap: false,
+        itemStyle: {
+          borderRadius: 10,
+          borderColor: "#fff",
+          borderWidth: 2,
+        },
+        label: {
+          show: false,
+        },
+        emphasis: {
+          label: {
+            show: true,
+            fontSize: 14,
+            fontWeight: "bold",
+          },
+        },
+        data: [
+          { value: stats.value.inboundConnected || 0, name: "接通", itemStyle: { color: "#10B981" } },
+          { value: stats.value.inboundNotConnected || 0, name: "未接通", itemStyle: { color: "#EF4444" } },
+        ],
+      },
+    ],
+  });
+  // 呼出数据图表
+  const outboundChartInstance = echarts.init(outboundChart.value!);
+  outboundChartInstance.setOption({
+    animation: false,
+    tooltip: {
+      trigger: "item",
+    },
+    legend: {
+      orient: "vertical",
+      right: 30,
+      top: "center",
+    },
+    series: [
+      {
+        name: "呼出情况",
+        type: "pie",
+        radius: ["40%", "70%"],
+        avoidLabelOverlap: false,
+        itemStyle: {
+          borderRadius: 10,
+          borderColor: "#fff",
+          borderWidth: 2,
+        },
+        label: {
+          show: false,
+        },
+        emphasis: {
+          label: {
+            show: true,
+            fontSize: 14,
+            fontWeight: "bold",
+          },
+        },
+        data: [
+          { value: stats.value.outboundConnected || 0, name: "接通", itemStyle: { color: "#10B981" } },
+          { value: stats.value.outboundNotConnected || 0, name: "未接通", itemStyle: { color: "#EF4444" } },
+        ],
+      },
+    ],
+  });
+  // 满意度数据图表
+  const satisfactionChartInstance = echarts.init(satisfactionChart.value!);
+  satisfactionChartInstance.setOption({
+    animation: false,
+    tooltip: {
+      trigger: "item",
+    },
+    legend: {
+      orient: "vertical",
+      right: 30,
+      top: "center",
+    },
+    series: [
+      {
+        name: "满意度评价",
+        type: "pie",
+        radius: ["40%", "70%"],
+        avoidLabelOverlap: false,
+        itemStyle: {
+          borderRadius: 10,
+          borderColor: "#fff",
+          borderWidth: 2,
+        },
+        label: {
+          show: false,
+        },
+        emphasis: {
+          label: {
+            show: true,
+            fontSize: 14,
+            fontWeight: "bold",
+          },
+        },
+        data: [
+          { value: stats.value.satisfied || 0, name: "满意", itemStyle: { color: "#10B981" } },
+          { value: stats.value.basically || 0, name: "基本满意", itemStyle: { color: "#3B82F6" } },
+          { value: stats.value.dissatisfied || 0, name: "不满意", itemStyle: { color: "#EF4444" } },
+        ],
+      },
+    ],
+  });
+};
+onMounted(() => {
+  handleReset();
+  // getBulletingData();
+  // initCharts();
+});
+</script>
+
+<style scoped>
+.stat-item {
+  @apply p-3 rounded-lg bg-gray-50;
+}
+.stat-item dt {
+  @apply mb-2;
+}
+</style>

src/views/main/report/connectionVolumes/connectionVolumes.vue

@@ -2,7 +2,7 @@
 
 <template>
     <div class="min-h-screen bg-gray-50 p-6">
-      <div class="mx-auto">
+      <div class="mx-auto max-w-7xl">
         <!-- 顶部搜索区域 -->
         <div class="mb-6 flex items-center justify-between bg-white p-4 shadow-sm">
           <div class="flex gap-4">
@@ -29,10 +29,10 @@
               :size="'default'"
               @change="handleDateChange"
             />
-            <button class="!rounded-button whitespace-nowrap bg-blue-500 px-4 py-2 text-white hover:bg-blue-600">
+            <!-- <button class="!rounded-button whitespace-nowrap bg-blue-500 px-4 py-2 text-white hover:bg-blue-600" >
               <el-icon class="mr-1"><Search /></el-icon>
               查询
-            </button>
+            </button> -->
           </div>
         </div>
   
@@ -40,10 +40,10 @@
         <div class="mb-6 bg-white p-6 shadow-sm">
           <div class="mb-4 flex items-center justify-between">
             <h2 class="text-xl font-bold">通话接通量统计</h2>
-            <button class="!rounded-button whitespace-nowrap bg-green-500 px-4 py-2 text-white hover:bg-green-600">
+            <!-- <button class="!rounded-button whitespace-nowrap bg-green-500 px-4 py-2 text-white hover:bg-green-600">
               <el-icon class="mr-1"><Download /></el-icon>
               导出数据
-            </button>
+            </button> -->
           </div>
           <div class="h-[400px]">
             <div ref="dailyFlowChart" class="h-full w-full"></div>
@@ -59,11 +59,12 @@
   import { Search, Download } from '@element-plus/icons-vue';
   import * as echarts from 'echarts';
   import { getPageListData } from '@/api/main/system/system';
+  import moment from 'moment';
 
   import type { EChartsOption } from 'echarts';
   
   const dateRange = ref([]);
-  const selectedQuickBtn = ref('30days');
+  const selectedQuickBtn = ref('today');
   
   const quickButtons = [
     { label: '今天', value: 'today' },
@@ -72,32 +73,58 @@
     { label: '近30天', value: '30days' },
   ];
   
-  const callVolumeChart = ref<HTMLElement | null>(null);
-  const dailyFlowChart = ref<HTMLElement | null>(null);
-  const monthlyFlowChart = ref<HTMLElement | null>(null);
-  
-  const totalYearlyFlow = ref(2456789);
+  const dailyFlowChart: any = ref<HTMLElement | null>(null);
   
   const handleQuickSelect = (value: string) => {
     selectedQuickBtn.value = value;
     // 处理快速选择逻辑
+    if (value === 'today') {
+      startTime.value = moment().format('YYYY-MM-DD');
+      endTime.value = moment().format('YYYY-MM-DD');
+    } else if (value === 'yesterday') {
+      startTime.value = moment().subtract(1, 'days').startOf('day').format('YYYY-MM-DD');
+      endTime.value = moment().subtract(1, 'days').endOf('day').format('YYYY-MM-DD');
+    } else if (value === '7days') {
+      startTime.value = moment().subtract(7, 'days').startOf('day').format('YYYY-MM-DD');
+      endTime.value = moment().endOf('day').format('YYYY-MM-DD');
+    } else if (value === '30days') {
+      startTime.value = moment().subtract(30, 'days').startOf('day').format('YYYY-MM-DD');
+      endTime.value = moment().endOf('day').format('YYYY-MM-DD');
+    }
+
+    getDailyFlow();
   };
   
-  const handleDateChange = () => {
+  const handleDateChange = (val) => {
     // 处理日期变化逻辑
+    console.log(val);
+    selectedQuickBtn.value = '';
+    startTime.value = moment(val[0]).format('YYYY-MM-DD');
+    endTime.value = moment(val[1]).format('YYYY-MM-DD');
+    getDailyFlow();
+
   };
+  const startTime = ref();
+  const endTime = ref();
   
   onMounted(() => {
+    selectedQuickBtn.value = 'today';
+    startTime.value = moment().startOf('day').format('YYYY-MM-DD');
+    endTime.value = moment().format('YYYY-MM-DD');
     getDailyFlow()  // 日流量统计图表
   
   });
+
+  
   
   // 日流量统计图表
   function getDailyFlow(){
-
-    // getPageListData('/WorkReport/selectConnection').then(res => {
-        // console.log(res);
-        const dailyFlow = echarts.init(dailyFlowChart.value!);
+    const params = {
+      startTime: startTime.value,
+      endTime: endTime.value,
+    };
+    getPageListData('/WorkReport/selectConnection', params).then(res => {
+        const dailyFlow = echarts.init(dailyFlowChart.value);
         const dailyFlowOption: EChartsOption = {
             animation: false,
             tooltip: {
@@ -111,16 +138,16 @@
             },
             xAxis: {
                 type: 'category',
-                data: Array.from({length: 24}, (_, i) => `${i}:00`)
+                data: res.data?.map(item => item.date),
             },
             yAxis: {
                 type: 'value'
             },
             series: [{
-                name: '流量',
+                name: '接通量',
                 type: 'line',
                 smooth: true,
-                data: Array.from({length: 24}, () => Math.floor(Math.random() * 200 + 100)),
+                data: res.data?.map(item => item.number),
                 itemStyle: {
                 color: '#10B981'
                 },
@@ -146,7 +173,7 @@
         window.addEventListener('resize', () => {
             dailyFlow.resize();
         });
-    // });
+    });
   }
 
   </script>