Merge remote-tracking branch 'origin/master'

src/api/live/liveData.js

@@ -122,58 +122,56 @@ export function exportLiveDataCompany(data) {
   })
 }
 
+// 直播数据统计-数据概览（多直播间聚合指标）
+export function getLiveStatisticsOverview(liveIds) {
+  return request({
+    url: '/liveData/liveData/getLiveStatisticsOverview',
+    method: 'post',
+    data: liveIds || []
+  })
+}
+
+// 直播趋势-进入人数折线图
+export function getLiveEntryTrend(liveIds) {
+  return request({
+    url: '/liveData/liveData/getLiveEntryTrend',
+    method: 'post',
+    data: liveIds || []
+  })
+}
+
+// 直播间学员列表（分页）
+export function listLiveRoomStudents(data) {
+  return request({
+    url: '/liveData/liveData/listLiveRoomStudents',
+    method: 'post',
+    data: data || {}
+  })
+}
 
-//
-// // 直播数据统计-数据概览（12项指标）
-// export function getLiveStatisticsOverview(liveIds) {
-//     return request({
-//         url: '/liveData/liveData/getLiveStatisticsOverview',
-//         method: 'post',
-//         data: liveIds || []
-//     })
-// }
-//
-// // 直播趋势-进入人数折线图（基于 live_user_first_entry 与直播开始时间的相对时间）
-// export function getLiveEntryTrend(liveIds) {
-//     return request({
-//         url: '/liveData/liveData/getLiveEntryTrend',
-//         method: 'post',
-//         data: liveIds || []
-//     })
-// }
-//
-// // 直播间学员列表（分页）
-// export function listLiveRoomStudents(data) {
-//     return request({
-//         url: '/liveData/liveData/listLiveRoomStudents',
-//         method: 'post',
-//         data: data || {}
-//     })
-// }
-//
-// // 商品对比统计（商品名称、下单未支付人数、成交人数、成交金额）
-// export function listProductCompareStats(data) {
-//     return request({
-//         url: '/liveData/liveData/listProductCompareStats',
-//         method: 'post',
-//         data: data || {}
-//     })
-// }
-//
-// // 邀课对比-分享人选项列表（基于 live_user_first_entry 中存在的销售）
-// export function listInviteSalesOptions(liveIds) {
-//     return request({
-//         url: '/liveData/liveData/listInviteSalesOptions',
-//         method: 'post',
-//         data: liveIds || []
-//     })
-// }
-//
-// // 邀课对比统计（归属公司、销售名称、邀请人数、已支付订单数、订单总金额）
-// export function listInviteCompareStats(data) {
-//     return request({
-//         url: '/liveData/liveData/listInviteCompareStats',
-//         method: 'post',
-//         data: data || {}
-//     })
-// }
+// 商品对比统计
+export function listProductCompareStats(data) {
+  return request({
+    url: '/liveData/liveData/listProductCompareStats',
+    method: 'post',
+    data: data || {}
+  })
+}
+
+// 邀课对比-分享人选项列表
+export function listInviteSalesOptions(liveIds) {
+  return request({
+    url: '/liveData/liveData/listInviteSalesOptions',
+    method: 'post',
+    data: liveIds || []
+  })
+}
+
+// 邀课对比统计
+export function listInviteCompareStats(data) {
+  return request({
+    url: '/liveData/liveData/listInviteCompareStats',
+    method: 'post',
+    data: data || {}
+  })
+}

src/api/live/trainingCamp.js

@@ -0,0 +1,45 @@
+import request from '@/utils/request'
+
+const base = '/live/trainingCamp'
+
+// 训练营
+export function listTrainingCamp(query) {
+  return request({ url: base + '/camp/list', method: 'get', params: query })
+}
+export function getTrainingCamp(campId) {
+  return request({ url: base + '/camp/' + campId, method: 'get' })
+}
+export function addTrainingCamp(data) {
+  return request({ url: base + '/camp', method: 'post', data })
+}
+export function updateTrainingCamp(data) {
+  return request({ url: base + '/camp', method: 'put', data })
+}
+export function delTrainingCamp(campIds) {
+  return request({ url: base + '/camp/' + campIds, method: 'delete' })
+}
+
+// 营期
+export function listTrainingPeriod(query) {
+  return request({ url: base + '/period/list', method: 'get', params: query })
+}
+export function getTrainingPeriod(periodId) {
+  return request({ url: base + '/period/' + periodId, method: 'get' })
+}
+export function addTrainingPeriod(data) {
+  return request({ url: base + '/period', method: 'post', data })
+}
+export function updateTrainingPeriod(data) {
+  return request({ url: base + '/period', method: 'put', data })
+}
+export function delTrainingPeriod(periodIds) {
+  return request({ url: base + '/period/' + periodIds, method: 'delete' })
+}
+
+// 营期下直播间
+export function listTrainingLive(query) {
+  return request({ url: base + '/live/list', method: 'get', params: query })
+}
+export function addTrainingLive(data) {
+  return request({ url: base + '/live', method: 'post', data })
+}

src/api/watch/common.js

@@ -0,0 +1,9 @@
+import request from '@/utils/request'
+import { status } from 'nprogress'
+
+const baseURL = process.env.VUE_APP_BASE_API
+// watch端 通用下载方法
+export function watchDownload(fileName) {
+    window.location.href = "/watch-api/watchCommon/download?fileName=" + encodeURI(fileName) + "&delete=" + true;
+}
+

src/api/watch/deviceInfo.js

@@ -9,7 +9,6 @@ export function listDeviceInfo(query) {
     params: query
   })
 }
-
 // 查询设备信息列表
 export function myDeviceInfo(query) {
   return request({
@@ -18,7 +17,6 @@ export function myDeviceInfo(query) {
     params: query
   })
 }
-
 // 查询设备信息详细
 export function getDeviceInfo(deviceId) {
   return request({
@@ -90,11 +88,11 @@ export function exportMy(query) {
 }
 
   // 查询用户信息
-export function getUser(deviceId) {
+export function getUser(data) {
   return request({
     url: '/watch-api/device/set/up/getUserInfo',
     method: 'get',
-    params: { deviceId } 
+    params:data
   })
 }
 
@@ -123,6 +121,14 @@ export function queryByDate(date,deviceId) {
   })
 }
 
+export function queryHrList(data) {
+  return request({
+    url: `/watch-api/watch/heart/rate/list`,
+    method: 'get',
+    params: data
+  })
+}
+
 //exportHeartDate导出
 export function exportHeartDate(date,deviceId) {
   return request({
@@ -168,6 +174,15 @@ export function queryGlucoseDate(date,deviceId) {
   })
 }
 
+// 根据时间获取血糖数据
+export function queryGlucoseList(data) {
+  return request({
+    url: `/watch-api/watch/blood/glucose/list`,
+    method: 'get',
+    params: data
+  })
+}
+
 // 根据时间获取房颤数据
 export function queryAfDate(date,deviceId) {
   return request({
@@ -186,6 +201,15 @@ export function queryPressure(date,deviceId) {
   })
 }
 
+// 根据时间获取血压数据
+export function queryPressureList(data) {
+  return request({
+    url: `/watch-api/watch/blood/pressure/list`,
+    method: 'get',
+    params:data
+  })
+}
+
 // 根据时间获取温度数据
 export function queryTemperature(date,deviceId) {
   return request({
@@ -213,6 +237,15 @@ export function querySpo2(date,deviceId) {
   })
 }
 
+// 根据时间获取血氧数据
+export function querySpo2List(data) {
+  return request({
+    url: `/watch-api/watch/spo2/data/list`,
+    method: 'get',
+    params: data
+  })
+}
+
 // 根据时间获取睡眠数据
 export function querySleep(date,deviceId) {
   return request({
@@ -222,6 +255,15 @@ export function querySleep(date,deviceId) {
   })
 }
 
+// 根据时间获取睡眠数据
+export function querySleepList(data) {
+  return request({
+    url: `/watch-api/watch/sleep/data/list`,
+    method: 'get',
+    params: data
+  })
+}
+
 // 获取预警数据
 export function queryAlarm(status) {
   return request({
@@ -288,6 +330,15 @@ export function queryUaData(data) {
   })
 }
 
+//获取尿酸数据
+export function queryUaList(data) {
+  return request({
+      url: '/watch-api/watch/third/ua/list',
+      method: 'get',
+      params:data
+  })
+}
+
 //获最新健康数据
 export function queryLastHealthData(data) {
   return request({
@@ -350,4 +401,69 @@ export function queryTemperaturePageByDate(data) {
       method: 'get',
       params:data
   })
-}
+}
+
+//查询某个时间段的温度数据 分页
+export function queryBOPageByDate(data) {
+  return request({
+      url: '/watch-api/watch/continuous/spo2/data/queryPageByDateAndDeviceId',
+      method: 'get',
+      params:data
+  })
+}
+
+//物联网 分页
+export function queryIotList(data) {
+  return request({
+      url: '/watch-api/watch/deviceInfo/query',
+      method: 'get',
+      params:data
+  })
+}
+
+//查询某个时间段的压力数据 分页
+export function queryFatiguePageByDate(data) {
+  return request({
+      url: '/watch-api/watch/fatigue/page',
+      method: 'get',
+      params:data
+  })
+}
+
+// 根据时间获取压力数据
+export function queryFatigue(date,deviceId) {
+  return request({
+    url: `/watch-api/watch/fatigue/queryByDateAndDeviceId`,
+    method: 'get',
+    params: { date,deviceId } 
+  })
+}
+
+
+//健康周报-步数,卡路里,睡眠等信息
+export function getUserHealthInfoByDeviceId(data) {
+  return request({
+      url: '/watch-api/watch/sport/data/getUserHealthInfoByDeviceId',
+      method: 'get',
+      params:data
+  })
+}
+
+//健康周报-步数,卡路里,睡眠等信息
+export function queryHealthReport(data) {
+  return request({
+      url: '/watch-api/device/queryHealthReport',
+      method: 'get',
+      params:data
+  })
+}
+
+//舌诊
+export function queryTongueList(data) {
+  return request({
+      url: '/watch-api/device/getHealthTongueList',
+      method: 'get',
+      params:data
+  })
+}
+

src/components/DeviceInfo/AtrialFibrillation.vue

@@ -21,7 +21,7 @@
     </div>
     <div class="afib-diagnosis">
       <div class="afib-diagnosis-title">诊断结论:</div>
-      <div class="afib-diagnosis-note">{{conclusion||'没有房颤数据'}}</div>
+      <div class="afib-diagnosis-note">{{conclusion||'今日暂无数据，请选择其他日期'}}</div>
       <div class="afib-diagnosis-tips">
         注：非医疗诊断，供参考，请以医院确诊结论为准。
       </div>

src/components/DeviceInfo/BloodSugar.vue

@@ -17,6 +17,11 @@
             </el-table-column>
             <el-table-column prop="bloodGlucose" align="center" label="测量结果">
             </el-table-column>
+            <template #empty>
+                <div>
+                    今日暂无数据，请选择其他日期
+                </div>
+            </template>
         </el-table>
 
     </div>

src/components/DeviceInfo/Bloodoxygen.vue

@@ -22,6 +22,11 @@
             <el-table-column type="index" label="序号" align="center"/>
             <el-table-column label="时间" align="center" prop="time" />
             <el-table-column label="血氧" align="center" prop="avgBoxy" />
+            <template #empty>
+                <div>
+                    今日暂无数据，请选择其他日期
+                </div>
+            </template>
             </el-table>
             <pagination v-show="(total>0) && detailsType" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getDataPage"/>
         </div>
@@ -87,9 +92,9 @@ export default {
                 xAxis: {
                     type: "time",
                     splitNumber: 6,
-                    axisLine: {
-                        show: false,
-                    },
+                    // axisLine: {
+                    //     show: false,
+                    // },
                     axisTick: {
                         show: false,
                     },

src/components/DeviceInfo/Heartrate.vue

@@ -65,6 +65,11 @@
         <el-table-column label="最小心率" align="center" prop="minBpm" />
         <el-table-column label="状态" align="center" prop="status" :formatter="statusFormatter"/>
         <el-table-column label="时间" align="center" prop="createTime" />
+        <template #empty>
+            <div>
+                今日暂无数据，请选择其他日期
+            </div>
+        </template>
       </el-table>
       
     </div>

src/components/DeviceInfo/Pressure.vue

@@ -24,8 +24,13 @@
                 <el-table-column label="sbp(mmgh)" align="center" prop="sbp" />
                 <el-table-column label="dbp(mmgh)" align="center" prop="dbp" />
                 <el-table-column label="hr(次/分)" align="center" prop="hr" />
+                <template #empty>
+                    <div>
+                        今日暂无数据，请选择其他日期
+                    </div>
+                </template>
             </el-table>
-            <pagination v-show="(dataListTotal > 0) && detailsType" :total="dataListTotal" :page.sync="tqueryParams.pageNum" :limit.sync="tqueryParams.pageSize" @pagination="getTableList"/>
+            <pagination v-show="(dataListTotal>0) && detailsType" :total="dataListTotal" :page.sync="tqueryParams.pageNum" :limit.sync="tqueryParams.pageSize" @pagination="getTableList"/>
         </div>
     </div>
 </template>
@@ -66,9 +71,9 @@ export default {
                     boundaryGap: false,
                     type: "time",
                     splitNumber: 6,
-                    axisLine: {
-                        show: false,
-                    },
+                    // axisLine: {
+                    //     show: false,
+                    // },
                     axisTick: {
                         show: false,
                     },

src/components/DeviceInfo/PressureValue.vue

@@ -0,0 +1,291 @@
+<template>
+    <div>
+        <div class="box-header">
+            <div class="box-title boldtext">
+                压力 <span style="margin-left: 14px">{{ currentDate }}</span>
+            </div>
+            <div>
+                <!-- <el-button @click="exportData" size="small" style="margin-right: 20px"
+            >导出</el-button
+          > -->
+                <el-date-picker size="small" v-model="currentDatePicker" type="date" placeholder="选择日期"
+                    value-format="yyyy-MM-dd" @change="datePickerchange">
+                </el-date-picker>
+            </div>
+        </div>
+        <div v-show="!detailsType">
+            <div style="min-width: 841px; height: 320px; width: 100%;">
+                <div ref="heartrateChart" style="width: 100%; height: 100%;min-width: 783px;"></div>
+            </div>
+        </div>
+        <!-- 列表展示 -->
+        <div v-show="detailsType">
+            <el-table :data="dataList" style="width: 100%">
+                <el-table-column prop="createTime" label="时间" />
+                <el-table-column prop="pressure" label="压力值" />
+                <template #empty>
+                    <div>
+                        今日暂无数据，请选择其他日期
+                    </div>
+                </template>
+            </el-table>
+            <pagination v-show="(total > 0) && detailsType" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getDataPage"/>
+        </div>
+        
+    </div>
+</template>
+
+<script>
+import * as echarts from "echarts";
+import { queryFatiguePageByDate, queryFatigue} from "@/api/watch/deviceInfo";
+export default {
+    props: {
+        detailsType: { 
+            type: Boolean,
+            default: false
+        },
+        deviceId: {
+            type: String || Number,
+            default: "",
+        },
+    },
+    data() {
+        return {
+            total:0,
+            dataList:[],
+            queryParams:{
+                pageNum: 1,
+                pageSize: 10,
+                deviceId:"",
+                beginTime:"",
+                endTime:""
+            },
+            currentDate: this.parseTime(new Date(), "{y}-{m}-{d}"),
+            currentDatePicker: "",
+            exportLoading: false,
+            chart: null,
+            chartOptions: {
+                tooltip: {
+                    trigger: 'axis'
+                },
+                legend: {},
+                xAxis: {
+                    boundaryGap: false,
+                    type: "time",
+                    splitNumber: 6,
+                    axisTick: {
+                        show: false,
+                    },
+                    splitLine: {
+                        show: false,
+                    },
+                    axisLabel: {
+                        color: "#999999",
+                        margin: 20,
+                        // fontSize: 14,
+                        fontWeight: "bold",
+                        formatter: (value) => {
+                            return this.parseTime(value, "{h}:{i}");
+                        },
+                    }
+                },
+                yAxis: {
+                    type: 'value',
+                    max: 100, // 设置y轴最大值为100
+                    // splitLine: {
+                    //     show: false // 去掉y轴的横线
+                    // }
+                },
+                series: [
+                    {
+                        name: '压力值',
+                        type: 'line',
+                        data: [],
+                        smooth: true
+                    }
+                    
+                ]
+            }
+
+        }
+    },
+    methods: {
+        getDataPage(){
+            this.loading = true;
+            this.queryParams.deviceId = this.deviceId;
+            this.queryParams.beginTime = this.currentDate + " 00:00:00";
+            this.queryParams.endTime = this.currentDate + " 23:59:59";
+            queryFatiguePageByDate(this.queryParams)
+                .then((response) => {
+                if (response.data) {
+                    this.dataList = response.data.rows;
+                    this.total = response.data.total;
+                    this.loading = false;
+                } else {
+                    console.warn("分页数据返回为空或格式不正确:", response);
+                }
+                })
+                .catch((error) => {
+                console.error("获取分页数据失败:", error);
+                });
+        },
+        datePickerchange() {
+            this.currentDate = this.currentDatePicker || this.parseTime(new Date(), "{y}-{m}-{d}");
+            if(this.detailsType){
+                this.getDataPage();
+            } else{
+                this.getDetailsData();
+            }
+        },
+        initChart() {
+            const chartElement = this.$refs.heartrateChart;
+            const sportChartElement = this.$refs.sportHeartrate;
+            if (chartElement) {
+                this.chart = echarts.init(chartElement);
+                this.seChartOptions()
+            }
+            if (sportChartElement) {
+                this.sportChart = echarts.init(sportChartElement);
+                this.sportChart.setOption(this.sportChartOption);
+            }
+        },
+        seChartOptions() {
+            this.chartOptions.xAxis.min = this.currentDate + ' 00:00:00'
+            this.chartOptions.xAxis.max = this.currentDate + ' 23:59:59'
+            this.chart.setOption(this.chartOptions);
+        },
+        // 获取体温折线图
+        getDetailsData() {
+            queryFatigue(this.currentDate, this.deviceId)
+                .then((response) => {
+                    if (response && response.data) {
+                        // console.log("------------------" + JSON.stringify(response.data, null, 2))
+                        const data = response.data.map((item) => (
+                            {
+                                value: [
+                                    new Date(item.createTime).getTime(),
+                                    item.pressure,
+                                ],
+                            }));
+                     
+
+                        // 将数据分别赋值给不同的 series
+                        this.chartOptions.series[0].data = data;
+                        // 更新图表
+                        if (this.detailsType == false) {
+                            this.initChart();
+                        }
+                    } else {
+                        console.warn("数据返回为空或格式不正确:", response);
+                    }
+                })
+                .catch((error) => {
+                    console.error("获取数据失败:", error);
+                });
+        },
+       
+    },
+};
+</script>
+
+<style lang="scss" scoped>
+@mixin u-flex($flexD, $alignI, $justifyC) {
+    display: flex;
+    flex-direction: $flexD;
+    align-items: $alignI;
+    justify-content: $justifyC;
+}
+
+.fz15 {
+    font-size: 15px !important;
+}
+
+.boldtext {
+    font-size: 16px;
+    color: #292929;
+    line-height: 30px;
+    font-weight: 700;
+}
+
+.box-header {
+    padding: 0 15px;
+    @include u-flex(row, center, space-between);
+    height: 50px;
+}
+
+.box-title {
+    color: #292929;
+    font-size: 16px;
+    font-family: PingFang SC-Medium;
+    padding-left: 10px;
+    border-left: 4px solid #2284ff;
+    line-height: 13px;
+}
+
+.heartrate-data {
+    @include u-flex(row, center, space-around);
+    margin-top: 30px;
+
+    &-item {
+        height: 60px;
+        width: 196px;
+        border-radius: 4px;
+        box-shadow: 0 0 10px rgba(1, 24, 54, 0.1);
+        overflow: hidden;
+        @include u-flex(row, center, flex-start);
+
+        img {
+            height: 41px;
+            width: 41px;
+        }
+    }
+
+    &-imgbox {
+        flex-shrink: 0;
+        height: 60px;
+        width: 60px;
+        @include u-flex(row, center, center);
+    }
+
+    &-right {
+        flex: 1;
+        text-align: center;
+        font-size: 13px;
+        color: #606165;
+        font-family: PingFang SC-Medium;
+        background: #fff;
+        height: 60px;
+    }
+
+    &-num {
+        font-size: 22px;
+        color: #2c2c3b;
+        line-height: 38px;
+    }
+}
+
+.heartrate-sport {
+    @include u-flex(row, flex-start, flex-start);
+    margin-top: 20px;
+
+    &-l {
+        width: 490px;
+        flex-shrink: 0;
+    }
+
+    &-r {
+        flex: 1;
+        max-width: 720px;
+    }
+
+    &-lechart {
+        width: 490px;
+        height: 300px;
+    }
+
+    &-rechart {
+        width: 100%;
+        @include u-flex(row, center, center);
+    }
+}
+</style>

src/components/DeviceInfo/Pulse.vue

@@ -70,8 +70,13 @@
           <el-table-column type="index" label="序号" align="center"/>
           <el-table-column label="时间" align="center" prop="time" />
           <el-table-column label="脉搏" align="center" prop="pulseRate" />
+          <template #empty>
+              <div>
+                  今日暂无数据，请选择其他日期
+              </div>
+          </template>
         </el-table>
-        <pagination v-show="(dataListTotal > 0) && detailsType" :total="dataListTotal" :page.sync="tqueryParams.pageNum" :limit.sync="tqueryParams.pageSize" @pagination="getTableList"/>
+        <pagination v-show="(dataListTotal>0) && detailsType" :total="dataListTotal" :page.sync="tqueryParams.pageNum" :limit.sync="tqueryParams.pageSize" @pagination="getTableList"/>
       </div>
     </div>
   </template>

src/components/DeviceInfo/Report.vue

@@ -0,0 +1,1942 @@
+<template>
+    <div class="weekly-report no-scrollbar">
+      <div class="report-header">
+        <div class="report-title">
+          <img class="title-icon" src="@/assets/images/watchApi/title-icon.png" />
+          <span>周报</span>
+        </div>
+        <div class="date-selector">
+          <el-date-picker
+            :picker-options="{ firstDayOfWeek: 1 }"
+            v-model="selectedDate"
+            type="week"
+            format="yyyy 第 WW 周"
+            placeholder="选择周"
+            @change="handleDateChange"
+          ></el-date-picker>
+        </div>
+      </div>
+  
+      <el-card class="report-card">
+        <div class="progress-section">
+          <div class="progress-container">
+            <el-progress type="circle" :percentage="healthIndex" :width="120" color="#FF9F43"></el-progress>
+            <div class="progress-info">
+              <div class="progress-label">健康指数</div>
+            </div>
+            <div class="health-status">{{ healthStatus }}</div>
+            <div class="health-description">{{ healthDesc }}</div>
+          </div>
+          
+          <div class="health-metrics-container">
+            <div class="health-metrics-row">
+              <div class="metric-item">
+                <div class="metric-data">
+                  <div class="metric-value">{{ height }}<span class="metric-unit">cm</span></div>
+                  <div class="metric-label">身高</div>
+                </div>
+                <div class="metric-icon orange">
+                  <i class="el-icon-sort"></i>
+                </div>
+              </div>
+              <div class="metric-item">
+                <div class="metric-data">
+                  <div class="metric-value">{{ weight }}<span class="metric-unit">kg</span></div>
+                <div class="metric-label">体重</div>
+                </div>
+                <div class="metric-icon green">
+                  <i class="el-icon-top"></i>
+                </div>
+              </div>
+            </div>
+            
+            <div class="health-metrics-row">
+              <div class="metric-item">
+                <div class="metric-data">
+                  <div class="metric-value">{{ bmiStatus }}</div>
+                <div class="metric-label">BMI</div>
+                </div>
+                <div class="metric-icon blue">
+                  <i class="el-icon-plus"></i>
+                </div>
+              </div>
+              <div class="metric-item">
+                <div class="metric-data">
+                  <div class="metric-value">{{ caloriesData.value }}<span class="metric-unit">{{ caloriesData.unit }}</span></div>
+                  <div class="metric-label">{{ caloriesData.label }}</div>
+                </div>
+                <div class="metric-icon red">
+                  <i class="el-icon-hot-water"></i>
+                </div>
+              </div>
+            </div>
+            
+            <div class="health-metrics-row">
+              <div class="metric-item">
+                <div class="metric-data">
+                  <div class="metric-value">{{ stepsData.value }}<span class="metric-unit">{{ stepsData.unit }}</span></div>
+                  <div class="metric-label">{{ stepsData.label }}</div>
+                </div>
+                <div class="metric-icon orange">
+                  <i class="el-icon-s-promotion"></i>
+                </div>
+              </div>
+              <div class="metric-item">
+                <div class="metric-data">
+                  <div class="metric-value">{{ sleepCardData.status }}</div>
+                <div class="metric-label">{{ sleepCardData.label }}</div>
+                </div>
+                <div class="metric-icon purple">
+                  <i class="el-icon-moon"></i>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+  
+        <!-- 健康数据 (Health Data) Section -->
+        <div class="health-data-section">
+          <div class="section-title">健康数据</div>
+          
+          <!-- 血糖趋势 (Blood Sugar Trend) -->
+          <div class="trend-chart">
+            <div class="trend-title">血糖趋势</div>
+            <div class="trend-subtitle">单位: mmol/L</div>
+            <div class="line-chart-container" ref="bloodSugarChart"></div>
+            <div class="trend-advice">
+            </div>
+          </div>
+          
+          <!-- 尿酸趋势 (Uric Acid Trend) -->
+          <div class="trend-chart">
+            <div class="trend-title">尿酸趋势</div>
+            <div class="trend-subtitle">单位: μmol/L</div>
+            <div class="bar-chart-container" ref="uricAcidChart"></div>
+            <div class="legend">
+              <div class="legend-item">
+                <span class="legend-color" style="background-color: #4CD964;"></span>
+                <span>150~416μmol/L</span>
+              </div>
+              <div class="legend-item">
+                <span class="legend-color" style="background-color: #FFCC00;"></span>
+                <span>&lt;150μmol/L</span>
+              </div>
+              <div class="legend-item">
+                <span class="legend-color" style="background-color: #FF6B6B;"></span>
+                <span>&gt;416μmol/L</span>
+              </div>
+            </div>
+          </div>
+
+           <div class="trend-chart">
+            <div class="trend-title">血压趋势</div>
+            <div class="trend-subtitle">单位: mmgh</div>
+            <div class="line-chart-container" ref="bloodPressureChart"></div>
+          </div>
+
+           <div class="trend-chart">
+            <div class="trend-title">心率趋势</div>
+            <div class="trend-subtitle">单位: 次/分</div>
+            <div class="line-chart-container" ref="heartRateChart"></div>
+          </div>
+
+           <div class="trend-chart">
+            <div class="trend-title">血氧趋势</div>
+            <div class="trend-subtitle"></div>
+            <div class="line-chart-container" ref="bloodOxygenChart"></div>
+            <div class="legend">
+              <div class="legend-item">
+                <span class="legend-color" style="background-color: #4CD964;"></span>
+                <span>&lt;90%</span>
+              </div>
+              <div class="legend-item">
+                <span class="legend-color" style="background-color: #FFCC00;"></span>
+                <span>&lt;95%</span>
+              </div>
+              <div class="legend-item">
+                <span class="legend-color" style="background-color: #FF6B6B;"></span>
+                <span>其他</span>
+              </div>
+            </div>
+          </div>
+
+           <div class="trend-chart">
+            <div class="trend-title">睡眠趋势</div>
+            <div class="trend-subtitle"></div>
+            <div class="line-chart-container" ref="sleepChart"></div>
+            <div class="legend">
+              <div class="legend-item">
+                <span class="legend-color" style="background-color: #8C37E6;"></span>
+                <span>深睡</span>
+              </div>
+              <div class="legend-item">
+                <span class="legend-color" style="background-color: #D138CF;"></span>
+                <span>浅睡</span>
+              </div>
+              <div class="legend-item">
+                <span class="legend-color" style="background-color: #F88082;"></span>
+                <span>快速眼动</span>
+              </div>
+              <div class="legend-item">
+                <span class="legend-color" style="background-color: #FDBD27;"></span>
+                <span>清醒</span>
+              </div>
+            </div>
+          </div>
+          
+         
+        </div>
+  
+        
+        <div class="health-archive-section">
+          <div class="section-title">健康档案</div>
+          <div class="archive-items">
+            <!-- 健康预测 -->
+            <div class="archive-item">
+              <div class="archive-icon warning">
+                <i class="el-icon-warning-outline"></i>
+              </div>
+              <div class="archive-content">
+                <div class="archive-title">健康预测</div>
+                <div class="archive-text" v-for="(item, idx) in healthArchive" :key="'prediction' + idx">
+                  {{ item.prediction }}
+                </div>
+              </div>
+            </div>
+
+            <!-- 解析 -->
+            <div class="archive-item">
+              <div class="archive-icon analysis">
+                <i class="el-icon-data-analysis"></i>
+              </div>
+              <div class="archive-content">
+                <div class="archive-title">解析</div>
+                <div class="archive-text" v-for="(item, idx) in healthArchive" :key="'analysis' + idx">
+                  {{ item.analysis }}
+                </div>
+              </div>
+            </div>
+
+            <!-- 治疗建议 -->
+            <div class="archive-item">
+              <div class="archive-icon suggestion">
+                <i class="el-icon-first-aid-kit"></i>
+              </div>
+              <div class="archive-content">
+                <div class="archive-title">治疗建议</div>
+                <div class="archive-text" v-for="(item, idx) in healthArchive" :key="'suggestion' + idx">
+                  {{ item.suggestion }}
+                </div>
+              </div>
+            </div>
+
+            <!-- 注意事项 -->
+            <div class="archive-item">
+              <div class="archive-icon attention">
+                <i class="el-icon-info"></i>
+              </div>
+              <div class="archive-content">
+                <div class="archive-title">注意事项</div>
+                <div class="archive-text" v-for="(item, idx) in healthArchive" :key="'precautions' + idx">
+                  {{ item.precautions }}
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        
+        <!-- AI舌诊 (AI Tongue Diagnosis) Section -->
+        <div class="ai-diagnosis-section">
+          <div class="section-title">AI舌诊</div>
+          <div class="date-selector-tabs">
+            <div 
+              v-for="date in weekDates" 
+              :key="date"
+              :class="['date-tab', selectedDiagnosisDate === date ? 'active' : '']"
+              @click="selectedDiagnosisDate = date"
+            >
+              {{ date }}
+            </div>
+          </div>
+          
+          <div class="diagnosis-content" v-if="tongueData">
+            <div class="diagnosis-time">检测时间 {{ tongueData.createTime || '未知时间' }}</div>
+            
+            <div class="diagnosis-result">
+              <div class="diagnosis-label">您属于</div>
+              <div class="diagnosis-type">{{ tongueData.typeName || '未知体质' }}</div>
+            </div>
+            
+            <div class="diagnosis-section">
+              <div class="diagnosis-section-title">舌苔特征</div>
+              <div class="diagnosis-feature">
+                <div class="feature-dot"></div>
+                <div class="feature-title">{{ tongueData.taiseName || '未知' }}</div>
+                <div class="feature-description">{{ tongueData.taiseDesc || '未知' }}</div>
+              </div>
+              <div class="diagnosis-feature">
+                <div class="feature-dot"></div>
+                <div class="feature-title">{{ tongueData.shemianName || '未知' }}</div>
+                <div class="feature-description">{{ tongueData.shemianDesc || '未知' }}</div>
+              </div>
+            </div>
+            
+            <div class="diagnosis-section">
+              <!-- <div class="diagnosis-section-title">体质解析</div> -->
+              <div 
+                class="diagnosis-analysis" 
+                v-for="(item, index) in tongueData.typeJsonObj" 
+                :key="index"
+              >
+                <div class="diagnosis-section-title">{{ item.name }}</div>
+                <div class="analysis-content">{{ item.value }}</div>
+              </div>
+            </div>
+          </div>
+          <div class="diagnosis-content" v-else>
+            <div class="no-data">暂无舌诊数据</div>
+          </div>
+        </div>
+      </el-card>
+    </div>
+  </template>
+  
+  <script>
+  import * as echarts from 'echarts';
+  import {getUserHealthInfoByDeviceId,queryHealthReport,queryGlucoseList,queryUaList,queryPressureList,queryHrList,querySpo2List,querySleepList,queryTongueList} from "@/api/watch/deviceInfo";
+  export default {
+    props: {
+        // detailsType: { 
+        //     type: Boolean,
+        //     default: false
+        // },
+        userInfo: {
+          type: Object,
+          default: () => ({})
+        },
+        deviceId: {
+            type: String || Number,
+            default: "",
+        },
+    },
+    name: 'WeeklyReport',
+    data() {
+      return {
+        sleepDefaultInfo: {
+          4: { name: "浅睡", color: "#D138CF", yValue: 7 },
+          3: { name: "深睡", color: "#8C37E6", yValue: 3 },
+          6: { name: "清醒", color: "#FDBD27", yValue: 9 },
+          7: { name: "快速眼动", color: "#F88082", yValue: 12 },
+        },
+        startTime: null,
+        endTime:  null,
+        // 基础数据
+        height: '--',
+        weight: '--',
+        bmi: 0,
+        bmiStatus: '--',
+        healthIndex: 0,
+        healthStatus: '--',
+        healthDesc:"",
+        // 健康指标数据
+        caloriesData: {
+          value: '--',
+          unit: 'kcal',
+          label: '卡路里'
+        },
+        stepsData: {
+          value: '--',
+          unit: '步',
+          label: '步数'
+        },
+        sleepCardData: {
+          status: '--',
+          label: '睡眠'
+        },
+        selectedDate: new Date(),
+        // 健康档案
+        healthArchive: [],
+        selectedDiagnosisDate: '12/27',
+        bloodSugarChart: null,
+        uricAcidChart: null,
+        bloodPressureChart:null,
+        heartRateChart:null,
+        bloodOxygenChart:null,
+        sleepChart:null,
+        bloodSugarData: {
+          values: []
+        },
+       
+        uricAcidData: {
+          values: [
+          ]
+        },
+        bloodPressureData:{},
+        heartRateData:{},
+        bloodOxygenData:{values: []},
+        sleepData:[],
+        tongueData:null
+      };
+    },
+    mounted() {
+      this.$nextTick(() => {
+        this.initBloodSugarChart();
+        this.initBloodPressureChart();
+        this.initUricAcidChart();
+        this.initHeartRateChart();
+        this.initBloodOxygenChart();
+        this.initSleepChart();
+        this.setInitialDiagnosisDate();
+      });
+    },
+    computed: {
+      weekDates() {
+        const dates = [];
+        const startOfWeek = new Date(this.selectedDate);
+        startOfWeek.setDate(this.selectedDate.getDate() - (this.selectedDate.getDay() || 7) + 1); // Set to Monday
+        for (let i = 0; i < 7; i++) {
+          const date = new Date(startOfWeek);
+          date.setDate(startOfWeek.getDate() + i);
+          dates.push(this.formatDate(date));
+        }
+        return dates;
+      }
+    },
+    watch: {
+      userInfo: {
+        handler(newVal) {
+          if (newVal) {
+            this.updateUserInfo();
+          }
+        },
+        immediate: true,
+        deep: true
+      },
+      selectedDate() {
+        this.setInitialDiagnosisDate();
+      },
+      selectedDiagnosisDate(newVal) {
+        if (newVal) {
+          this.getTongueDate();
+        }
+      }
+    },
+    methods: {
+      formatDate(date) {
+        return `${date.getMonth() + 1}/${date.getDate()}`;
+      },
+      setInitialDiagnosisDate() {
+        this.selectedDiagnosisDate = this.weekDates[0] || null;
+      },
+      getWeekDates(date) {
+        const startOfWeek = new Date(date);
+        const endOfWeek = new Date(date);
+        startOfWeek.setDate(date.getDate() - (date.getDay() || 7) + 1); // 如果是周日，getDay() 返回 0，需要加 7
+         // 将日期设置为周一，时间为00:00:00
+        // startOfWeek.setDate(date.getDate() - date.getDay());
+        startOfWeek.setHours(0, 0, 0, 0);
+
+        // 将日期设置为周日，时间为23:59:59
+        endOfWeek.setDate(date.getDate() - (date.getDay() || 7) + 7); // 如果是周日，getDay() 返回 0，需要加 7
+        // endOfWeek.setDate(date.getDate() - date.getDay() + 6);
+        endOfWeek.setHours(23, 59, 59, 999);
+       
+        this.startTime= startOfWeek,
+        this.endTime=  endOfWeek
+      },
+      // 更新基本信息
+      updateUserInfo() {
+        if (this.userInfo) {
+          // 设置身高体重
+          this.height = this.userInfo.height || '--';
+          this.weight = this.userInfo.weight || '--';
+          
+          // 计算BMI
+          this.calculateBMI();}
+      },
+      // 计算BMI
+      calculateBMI() {
+        if (this.height && this.weight && this.height !== '--' && this.weight !== '--') {
+          // BMI = 体重(kg) / 身高(m)²
+          const heightInMeters = parseFloat(this.height) / 100;
+          const weightInKg = parseFloat(this.weight);
+          
+          if (!isNaN(heightInMeters) && !isNaN(weightInKg) && heightInMeters > 0) {
+            this.bmi = (weightInKg / (heightInMeters * heightInMeters)).toFixed(1);
+            
+            // 设置BMI状态
+            if (this.bmi < 18.5) {
+              this.bmiStatus = '偏瘦';
+            } else if (this.bmi >= 18.5 && this.bmi < 24) {
+              this.bmiStatus = '正常';
+            } else if (this.bmi >= 24 && this.bmi < 28) {
+              this.bmiStatus = '超重';
+            } else {
+              this.bmiStatus = '肥胖';
+            }
+          }
+        }
+      },
+      async getSportData() {
+        try{
+          const params = {
+            deviceId: this.deviceId,
+            startTime: this.parseTime(this.startTime),
+            endTime: this.parseTime(this.endTime),
+          };
+          const response = await getUserHealthInfoByDeviceId(params);
+          if(response.data){
+            this.caloriesData.value = response.data.calorie;
+            this.stepsData.value = response.data.step;
+            this.sleepData.status = response.data.sleepStatus;
+          }
+        }catch(error){
+          console.error("获取步数,卡路里,睡眠等信息数据失败:", error);
+        }
+      },
+
+      async getHealthArchive() {
+        try{
+          const params = {
+            deviceId: this.deviceId,
+            startTime: this.parseTime(this.startTime),
+            endTime: this.parseTime(this.endTime),
+          };
+          const response = await queryHealthReport(params);
+          if(response.data){
+            this.healthArchive = response.data.list;
+            this.healthIndex = response.data.score;
+            this.healthStatus = response.data.title;
+            this.healthDesc = response.data.desc;
+
+          }
+        }catch(error){
+          console.error("获取步数,卡路里,睡眠等信息数据失败:", error);
+        }
+      },
+      async getGlucoseDate() {
+        try{
+          const params = {
+            deviceId: this.deviceId,
+            startTime: this.parseTime(this.startTime,'{y}/{m}/{d} {h}:{i}:{s}'),
+            endTime: this.parseTime(this.endTime,'{y}/{m}/{d} {h}:{i}:{s}'),
+          };
+          const response = await queryGlucoseList(params);
+          if(response.data && response.data.length > 0){
+            const values = response.data.map(item => {
+              const timestamp = new Date(item.createTime).getTime();
+              return [timestamp, item.bloodGlucose, item.createTime];
+            });
+            this.bloodSugarData = {
+              values: values
+            };
+        
+          } else {
+            this.bloodSugarData = {
+              values: []
+            };
+          }
+        }catch(error){
+          console.error("获取血糖数据失败:", error);
+          this.bloodSugarData = {
+            values: []
+          };
+        }
+      },
+
+      async getUaDate() {
+        try{
+          const params = {
+            deviceId: this.deviceId,
+            startTime: this.parseTime(this.startTime,'{y}/{m}/{d} {h}:{i}:{s}'),
+            endTime: this.parseTime(this.endTime,'{y}/{m}/{d} {h}:{i}:{s}'),
+          };
+          const response = await queryUaList(params);
+          if(response.data && response.data.length > 0){
+            const values = response.data.map(item => {
+              const timestamp = new Date(item.createTime).getTime();
+              const val = item.val/10;
+              let color;
+              if (val < 150) {
+                  color = '#FFCC00';
+              } else if (val < 416) {
+                color = '#4CD964';
+              } else {
+                color = '#FF6B6B';
+              }
+              return [timestamp, val, item.createTime,color];
+            });
+            this.uricAcidData.values = values;
+        
+          } else {
+            this.uricAcidChart.values = [];
+          }
+        }catch(error){
+          console.error("获取尿酸数据失败:", error);
+          this.uricAcidChart.values = [];
+        }
+      },
+      async getSleepDate() {
+        try{
+          const params = {
+            deviceId: this.deviceId,
+            startTime: this.parseTime(this.startTime,'{y}/{m}/{d} {h}:{i}:{s}'),
+            endTime: this.parseTime(this.endTime,'{y}/{m}/{d} {h}:{i}:{s}'),
+          };
+          const response = await querySleepList(params);
+          if(response.data.sleepSection && response.data.sleepSection.length > 0){
+            this.sleepData = response.data.sleepSection;
+          }
+        }catch(error){
+          console.error("获取睡眠数据失败:", error);
+        }
+      },
+      async querySpo2Data() {
+        try{
+          const params = {
+            deviceId: this.deviceId,
+            startTime: this.parseTime(this.startTime,'{y}/{m}/{d} {h}:{i}:{s}'),
+            endTime: this.parseTime(this.endTime,'{y}/{m}/{d} {h}:{i}:{s}'),
+          };
+          const response = await querySpo2List(params);
+          if(response.data.list && response.data.list.length > 0){
+            const values = response.data.list.map(item => {
+              const timestamp = new Date(item.createTime).getTime();
+              const val = item.avgBoxy;
+              let color;
+              if (val < 150) {
+                  color = '#FFCC00';
+              } else if (val < 416) {
+                color = '#4CD964';
+              } else {
+                color = '#FF6B6B';
+              }
+              return [timestamp, val, item.createTime,color];
+            });
+            this.bloodOxygenData.values = values;
+        
+          } else {
+            this.bloodOxygenData.values = [];
+          }
+        }catch(error){
+          console.error("获取尿酸数据失败:", error);
+          this.bloodOxygenData.values = [];
+        }
+      },
+
+      async getHrDate() {
+        try{
+          const params = {
+            deviceId: this.deviceId,
+            startTime: this.parseTime(this.startTime,'{y}/{m}/{d} {h}:{i}:{s}'),
+            endTime: this.parseTime(this.endTime,'{y}/{m}/{d} {h}:{i}:{s}'),
+          };
+          const response = await queryHrList(params);
+          if(response.data.list && response.data.list.length > 0){
+            const values = response.data.list.map(item => {
+              const timestamp = new Date(item.createTime).getTime();
+              return [timestamp, (item.maxBpm + item.minBpm)/2, item.createTime];
+            });
+            this.heartRateData = {
+              values: values
+            };
+           
+          } else {
+            this.heartRateData = {
+              values: []
+            };
+          }
+        }catch(error){
+          console.error("获取心率数据失败:", error);
+          this.bloodSugarData = {
+            values: []
+          };
+        }
+      },
+
+      
+      async queryPressureData() {
+        try{
+          const params = {
+            deviceId: this.deviceId,
+            startTime: this.parseTime(this.startTime,'{y}/{m}/{d} {h}:{i}:{s}'),
+            endTime: this.parseTime(this.endTime,'{y}/{m}/{d} {h}:{i}:{s}'),
+          };
+          const response = await queryPressureList(params);
+          if(response.data && response.data.length > 0){
+            
+
+            const sbp = response.data.map((item) => ({
+              value: [
+                new Date(item.createTime).getTime(),
+                item.sbp,
+              ]
+            }));
+            const dbp = response.data.map((item) => ({
+              value: [
+                  new Date(item.createTime).getTime(),
+                  item.dbp,
+              ]
+            }));
+            const hr = response.data.map((item) => ({
+              value: [
+                  new Date(item.createTime).getTime(),
+                  item.hr,
+              ]
+            }));
+            const createTime = response.data.map((item) => ({
+              value: [
+                  item.createTime
+              ]
+            }));
+            this.bloodPressureData = {
+              sbp : sbp,
+              dbp : dbp,
+              hr : hr,
+              createTime:createTime,
+            };
+          } else {
+            this.bloodPressureData = {
+              sbp : [],
+              dbp : [],
+              hr :  [],
+              createTime:[]
+            };
+          }
+        }catch(error){
+          console.error("获取血压数据失败:", error);
+          this.bloodPressureData = {
+            sbp : [],
+            dbp : [],
+            hr :  [],
+            createTime:[]
+          };
+        }
+      },
+
+      formatCreateDay(dateStr) {
+        const [month, day] = dateStr.split('/').map(Number);
+        const year = this.selectedDate.getFullYear();
+        const date = new Date(year, month - 1, day);
+        return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`;
+      },
+
+      async getTongueDate(){
+        if(this.userInfo && this.userInfo.userId){
+          const params = {
+            userId: this.userInfo.userId,
+            createDay: this.formatCreateDay(this.selectedDiagnosisDate),
+          };
+          
+          const response = await queryTongueList(params);
+          if(response && response.rows.length > 0){
+            this.tongueData = response.rows[0]
+            this.tongueData.typeJsonObj = JSON.parse(this.tongueData.typeJson || '[]')
+            console.log(this.tongueData)
+          } else {
+            this.tongueData = null;
+          }
+        }
+      },
+      // 获取周报详情数据
+      async getDetailsData() {
+        try {
+          this.getWeekDates(this.selectedDate);
+          // 获取健康周报-步数,卡路里,睡眠等信息
+          await this.getSportData();
+          await this.getHealthArchive();
+          await this.getGlucoseDate();
+          await this.getUaDate();
+          await this.queryPressureData();
+          await this.getHrDate();
+          await this.querySpo2Data();
+          await this.getSleepDate();
+          await this.getTongueDate();
+          this.updateCharts();
+        } catch (error) {
+          console.error("获取周报数据失败:", error);
+        }
+      },
+
+        
+      handleDateChange(date) {
+        this.selectedDate = date || this.parseTime(new Date(), "{y}-{m}-{d}");
+        this.getDetailsData();
+      },
+     
+      initBloodSugarChart() {
+        const chartDom = this.$refs.bloodSugarChart;
+        this.bloodSugarChart = echarts.init(chartDom);
+        const option = {
+          tooltip: {
+            trigger: 'item',
+            formatter: function(params) {
+              if (!params.data || params.data.length < 3) {
+                return '无数据';
+              }
+              const value = params.data[1];
+              const createTime = params.data[2];
+              return `时间: ${createTime}<br/>血糖: ${value} mmol/L`;
+            }
+          },
+          grid: {
+            left: '3%',
+            right: '4%',
+            bottom: '3%',
+            top: '3%',
+            containLabel: true
+          },
+          xAxis: {
+            type: 'time',
+            boundaryGap: false,
+            splitNumber: 7,
+            min:new Date(this.startTime).getTime(),
+            max:new Date(this.endTime).getTime() + 1,
+            axisLabel: {
+              color: "#999999",
+              margin: 20,
+              // fontSize: 14,
+              fontWeight: "bold",
+              formatter: (value) => {
+                return this.parseTime(value, "{m}/{d}");
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+            splitLine: {
+              show: false,
+            },
+          },
+          yAxis: {
+            type: 'value',
+            min: 0,
+            max: 12,
+            interval: 2,
+            axisTick: {
+              show: false,
+            },
+            splitLine: {
+              show: false,
+            },
+          },
+          series: [
+            {
+              name: '血糖',
+              data: this.bloodSugarData.values,
+              type: 'line',
+              smooth: true,
+              symbol: 'circle',
+              symbolSize: 7,
+              itemStyle: {
+                color: '#FF9F43'
+              },
+              lineStyle: {
+                color: '#FF9F43'
+              },
+              areaStyle: {
+                color: {
+                  type: 'linear',
+                  x: 0,
+                  y: 0,
+                  x2: 0,
+                  y2: 1,
+                  colorStops: [
+                    {
+                      offset: 0,
+                      color: 'rgba(255, 159, 67, 0.3)'
+                    },
+                    {
+                      offset: 1,
+                      color: 'rgba(255, 159, 67, 0.1)'
+                    }
+                  ]
+                }
+              }
+            }
+          ]
+        };
+        
+        this.bloodSugarChart.setOption(option);
+        
+        // 响应式调整
+        window.addEventListener('resize', () => {
+          this.bloodSugarChart.resize();
+        });
+      },
+      initBloodPressureChart() {
+        const chartDom = this.$refs.bloodPressureChart;
+        this.bloodPressureChart = echarts.init(chartDom);
+        const option = {
+          tooltip: {
+            trigger: 'axis',
+            formatter: function(params) {
+              if (!params) {
+                return '无数据';
+              }
+              const sbp = params[0].data.value;
+              const dbp = params[1].data.value;
+              const hr = params[2].data.value;
+              const createTime = new Date(sbp[0]).toLocaleString();
+              return `时间: ${createTime}<br/>sbp: ${sbp[1]} mmgh<br/>bdp: ${dbp[1]} mmgh<br/>hr: ${hr[1]} 次/分`;
+            }
+          },
+          legend: {},
+          grid: {
+            left: '3%',
+            right: '4%',
+            bottom: '3%',
+            top: '3%',
+            containLabel: true
+          },
+          xAxis: {
+            type: "time",
+            boundaryGap: false,
+            splitNumber: 7,
+            min:new Date(this.startTime).getTime(),
+            max:new Date(this.endTime).getTime(),
+            axisLabel: {
+              color: "#999999",
+              margin: 20,
+              fontWeight: "bold",
+              formatter: (value) => {
+                return this.parseTime(value, "{m}/{d}");
+              },
+            },
+            axisTick: {
+                show: false,
+            },
+            splitLine: {
+                show: false,
+            },
+          },
+          yAxis: {
+              type: 'value',
+              min: 0,
+              max: 180,
+              interval: 30,
+              axisLabel: {
+                  formatter: '{value}'
+              },
+              axisTick: {
+                show: false,
+              },
+              splitLine: {
+                show: false,
+              },
+          },
+          
+          series: [
+              {
+                  name: 'sbp(mmgh)',
+                  type: "line",
+                  symbol: "none",
+                  data: this.bloodPressureData.sbp
+              },
+              {
+                  name: 'dbp(mmgh)',
+                  type: "line",
+                  symbol: "none",
+                  data: this.bloodPressureData.dbp
+              },
+              {
+                  name: 'hr(次/分)',
+                  type: "line",
+                  symbol: "none",
+                  data: this.bloodPressureData.hr
+              }
+          ]
+          
+        };
+        
+        this.bloodPressureChart.setOption(option);
+        
+        // 响应式调整
+        window.addEventListener('resize', () => {
+          this.bloodPressureChart.resize();
+        });
+      },
+      initUricAcidChart() {
+        const chartDom = this.$refs.uricAcidChart;
+        this.uricAcidChart = echarts.init(chartDom);
+
+        const data = this.uricAcidData.values.map((item, index) => {
+          return {
+            value: [item[0],item[1]],
+            itemStyle: {
+              color: item[3]
+            },
+            time:item[2]
+          };
+        });
+        
+        const option = {
+          tooltip: {
+            trigger: 'item',
+            formatter: function(params) {
+              if (!params.data || params.data.length < 4) {
+                return '无数据';
+              }
+              const value = params.data.value[1];
+              const createTime = params.data.time;
+              return `时间: ${createTime}<br/>尿酸: ${value} μmol/L`;
+            }
+          },
+          grid: {
+            left: '3%',
+            right: '4%',
+            bottom: '3%',
+            top: '3%',
+            containLabel: true
+          },
+          xAxis: {
+            type: 'time',
+            splitNumber: 7,
+            min:new Date(this.startTime).getTime(),
+            max:new Date(this.endTime).getTime() + 1,
+            axisLabel: {
+              color: "#999999",
+              margin: 20,
+              fontWeight: "bold",
+              formatter: (value) => {
+                return this.parseTime(value, "{m}/{d}");
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+            splitLine: {
+              show: false,
+            },
+          },
+          yAxis: {
+            type: 'value',
+            min: 0,
+            max: 600,
+            interval: 100,
+            axisTick: {
+              show: false,
+            },
+            splitLine: {
+              show: false,
+            },
+          },
+          series: [
+            {
+              name: '尿酸',
+              type: 'bar',
+              data: data,
+              // barWidth: '40%'
+              barWidth: 10, // 设置柱子的宽度为 20 像素
+            }
+          ]
+        };
+        
+        this.uricAcidChart.setOption(option);
+        
+        // 响应式调整
+        window.addEventListener('resize', () => {
+          if (this.uricAcidChart) {
+            this.uricAcidChart.resize();
+          }
+        });
+      },
+      initHeartRateChart(){
+        const chartDom = this.$refs.heartRateChart;
+        this.heartRateChart = echarts.init(chartDom);
+        const option = {
+          tooltip: {
+            trigger: 'item',
+            formatter: function(params) {
+              if (!params.data || params.data.length < 3) {
+                return '无数据';
+              }
+              const value = params.data[1];
+              const createTime = params.data[2];
+              return `时间: ${createTime}<br/>心率: ${value} 次/分`;
+            }
+          },
+          grid: {
+            left: '3%',
+            right: '4%',
+            bottom: '3%',
+            top: '3%',
+            containLabel: true
+          },
+          xAxis: {
+            type: 'time',
+            boundaryGap: false,
+            splitNumber: 7,
+            min:new Date(this.startTime).getTime(),
+            max:new Date(this.endTime).getTime() + 1,
+            axisLabel: {
+              color: "#999999",
+              margin: 20,
+              // fontSize: 14,
+              fontWeight: "bold",
+              formatter: (value) => {
+                return this.parseTime(value, "{m}/{d}");
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+            splitLine: {
+              show: false,
+            },
+          },
+          yAxis: {
+            type: 'value',
+            axisTick: {
+              show: false,
+            },
+            splitLine: {
+              show: false,
+            },
+          },
+          series: [
+            {
+              name: '心率',
+              data: this.heartRateData.values,
+              type: 'line',
+              smooth: true,
+              symbol: 'circle',
+              symbolSize: 7,
+              itemStyle: {
+                color: '#FF9F43'
+              },
+              lineStyle: {
+                color: '#FF9F43'
+              },
+              areaStyle: {
+                color: {
+                  type: 'linear',
+                  x: 0,
+                  y: 0,
+                  x2: 0,
+                  y2: 1,
+                  colorStops: [
+                    {
+                      offset: 0,
+                      color: 'rgba(255, 159, 67, 0.3)'
+                    },
+                    {
+                      offset: 1,
+                      color: 'rgba(255, 159, 67, 0.1)'
+                    }
+                  ]
+                }
+              }
+            }
+          ]
+        };
+        
+        this.heartRateChart.setOption(option);
+        
+        // 响应式调整
+        window.addEventListener('resize', () => {
+          this.heartRateChart.resize();
+        });
+      },
+      initBloodOxygenChart(){
+        const chartDom = this.$refs.bloodOxygenChart;
+        this.bloodOxygenChart = echarts.init(chartDom);
+
+        const data = this.bloodOxygenData.values.map((item, index) => {
+          return {
+            value: [item[0],item[1]],
+            itemStyle: {
+              color: item[3]
+            },
+            time:item[2]
+          };
+        });
+        
+        const option = {
+          tooltip: {
+            trigger: 'item',
+            formatter: function(params) {
+              if (!params.data || params.data.length < 4) {
+                return '无数据';
+              }
+              const value = params.data.value[1];
+              const createTime = params.data.time;
+              return `时间: ${createTime}<br/>血氧: ${value} %`;
+            }
+          },
+          grid: {
+            left: '3%',
+            right: '4%',
+            bottom: '3%',
+            top: '3%',
+            containLabel: true
+          },
+          xAxis: {
+            type: 'time',
+            splitNumber: 7,
+            min:new Date(this.startTime).getTime(),
+            max:new Date(this.endTime).getTime() + 1,
+            axisLabel: {
+              color: "#999999",
+              margin: 20,
+              fontWeight: "bold",
+              formatter: (value) => {
+                return this.parseTime(value, "{m}/{d}");
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+            splitLine: {
+              show: false,
+            },
+          },
+          yAxis: {
+            type: 'value',
+            axisTick: {
+              show: false,
+            },
+            splitLine: {
+              show: false,
+            },
+          },
+          series: [
+            {
+              name: '血氧',
+              type: 'bar',
+              data: data,
+              // barWidth: '40%'
+              barWidth: 10, // 设置柱子的宽度为 20 像素
+            }
+          ]
+        };
+        
+        this.bloodOxygenChart.setOption(option);
+        
+        // 响应式调整
+        window.addEventListener('resize', () => {
+          if (this.bloodOxygenChart) {
+            this.bloodOxygenChart.resize();
+          }
+        });
+      },
+      initSleepChart(){
+        const chartDom = this.$refs.sleepChart;
+        this.sleepChart = echarts.init(chartDom);
+        const option = {
+          tooltip: {
+            show: true,
+            formatter: (params) => {
+              const start = params.value[3]
+              const end = params.value[4]
+              return `${start}到${end}<br/>${params.name}`;
+            },
+          },
+          grid: {
+            left: '3%',
+            right: '4%',
+            bottom: '3%',
+            top: '3%',
+            containLabel: true
+          },
+          xAxis: {
+            type: 'time',
+            boundaryGap: false,
+            splitNumber: 7,
+            min:new Date(this.startTime).getTime(),
+            max:new Date(this.endTime).getTime() + 1,
+            axisLabel: {
+              color: "#999999",
+              margin: 20,
+              // fontSize: 14,
+              fontWeight: "bold",
+              formatter: (value) => {
+                return this.parseTime(value, "{m}/{d}");
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+            splitLine: {
+              show: false,
+            },
+          },
+          yAxis: {
+            max: 14,
+            show: false,
+            axisTick: {
+              show: false,
+            },
+            splitLine: {
+              show: false,
+            },
+          },
+          series: [
+          {
+            type: "custom",
+            renderItem: (params, api) => {
+              let yValue = api.value(2);
+              let start = api.coord([api.value(0), yValue]);
+              let size = api.size([api.value(1) - api.value(0), yValue]);
+              let style = api.style();
+              return {
+                type: "rect",
+                shape: {
+                  x: start[0],
+                  y: start[1],
+                  width: size[0],
+                  height: size[1],
+                },
+                style: style,
+              };
+            },
+            data: [],
+          },
+          ]
+        };
+        
+        this.sleepChart.setOption(option);
+        
+        // 响应式调整
+        window.addEventListener('resize', () => {
+          this.sleepChart.resize();
+        });
+      },
+      updateCharts() {
+        if (this.bloodSugarChart) {
+          // 更新血糖图表数据
+          this.bloodSugarChart.setOption({
+            series: [
+              {
+                data: this.bloodSugarData.values
+              }
+            ],
+            xAxis: {
+              min:new Date(this.startTime).getTime(),
+              max:new Date(this.endTime).getTime() + 1,
+            },
+          });
+        }
+
+        if (this.bloodPressureChart) {
+          this.bloodPressureChart.setOption({
+            series: [
+              {
+                name: 'sbp(mmgh)',
+                type: "line",
+                symbol: "none",
+                data: this.bloodPressureData.sbp
+              },
+              {
+                name: 'dbp(mmgh)',
+                type: "line",
+                symbol: "none",
+                data: this.bloodPressureData.dbp
+              },
+              {
+                name: 'hr(次/分)',
+                type: "line",
+                symbol: "none",
+                data: this.bloodPressureData.hr
+              },
+            ],
+            xAxis: {
+              min:new Date(this.startTime).getTime(),
+              max:new Date(this.endTime).getTime()  + 1,
+            },
+          });
+        }
+        
+        if (this.uricAcidChart) {
+          // 更新尿酸图表数据
+          const data = this.uricAcidData.values.map((item, index) => {
+            return {
+              value: [item[0],item[1]],
+              itemStyle: {
+                color: item[3]
+              },
+              time:item[2]
+            };
+          });
+          
+          this.uricAcidChart.setOption({
+            series: [
+              {
+                // type: 'bar',
+                data: data
+              }
+            ],
+            xAxis: {
+              min:new Date(this.startTime).getTime(),
+              max:new Date(this.endTime).getTime() + 1,
+            },
+          });
+        }
+        if (this.heartRateChart) {
+          this.heartRateChart.setOption({
+            series: [
+              {
+                data: this.heartRateData.values
+              }
+            ],
+            xAxis: {
+              min:new Date(this.startTime).getTime(),
+              max:new Date(this.endTime).getTime() + 1,
+            },
+          });
+        }
+        if (this.bloodOxygenChart) {
+          const data = this.bloodOxygenData.values.map((item, index) => {
+            return {
+              value: [item[0],item[1]],
+              itemStyle: {
+                color: item[3]
+              },
+              time:item[2]
+            };
+          });
+          
+          this.bloodOxygenChart.setOption({
+            series: [
+              {
+                // type: 'bar',
+                data: data
+              }
+            ],
+            xAxis: {
+              min:new Date(this.startTime).getTime(),
+              max:new Date(this.endTime).getTime() + 1,
+            },
+          });
+        }
+       
+        if (this.sleepChart) {
+          const chartData = this.sleepData.map((item, index) => {
+            return {
+              name: this.sleepDefaultInfo[item.type] && this.sleepDefaultInfo[item.type].name,
+              value: [
+                new Date(item.start).getTime(),
+                new Date(item.end).getTime(),
+                this.sleepDefaultInfo[item.type] && this.sleepDefaultInfo[item.type].yValue,
+                item.start,
+                item.end
+              ],
+              itemStyle: {
+                color: this.sleepDefaultInfo[item.type] && this.sleepDefaultInfo[item.type].color,
+              },
+            };
+          });
+          this.sleepChart.setOption({
+            series: [
+              {
+                data: chartData
+              }
+            ],
+            xAxis: {
+              min:new Date(this.startTime).getTime(),
+              max:new Date(this.endTime).getTime() + 1,
+            },
+          });
+        }
+      }
+    },
+    beforeDestroy() {
+      // 清除事件监听
+      window.removeEventListener('resize', this.resizeHandler);
+      
+      // 销毁图表实例
+      if (this.bloodSugarChart) {
+        this.bloodSugarChart.dispose();
+        this.bloodSugarChart = null;
+      }
+      if (this.bloodPressureChart) {
+        this.bloodPressureChart.dispose();
+        this.bloodPressureChart = null;
+      }
+      if (this.uricAcidChart) {
+        this.uricAcidChart.dispose();
+        this.uricAcidChart = null;
+      }
+      if (this.heartRateChart) {
+        this.heartRateChart.dispose();
+        this.heartRateChart = null;
+      }
+      if (this.bloodOxygenChart) {
+        this.bloodOxygenChart.dispose();
+        this.bloodOxygenChart = null;
+      }
+      if (this.sleepChart) {
+        this.sleepChart.dispose();
+        this.sleepChart = null;
+      }
+    }
+  };
+  </script>
+  
+  <style scoped lang="scss">
+  
+  /* 确保内容不会因为隐藏滚动条而被截断 */
+  .weekly-report {
+    padding: 20px;
+    background-color: #f5f7fa;
+    min-height: 100%;
+    overflow-y: auto;
+    overflow-x: hidden;
+  }
+  
+  .report-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 20px;
+  }
+  
+  .report-title {
+    display: flex;
+    align-items: center;
+    font-size: 18px;
+    font-weight: bold;
+    color: #2284ff;
+    
+    .title-icon {
+      width: 13px;
+      height: 20px;
+      margin-right: 10px;
+    }
+  }
+  
+  .report-card {
+    margin-bottom: 20px;
+    border-radius: 8px;
+    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+    overflow: hidden; /* 确保内容不会溢出卡片 */
+  }
+  
+  .progress-section {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding: 20px 0;
+    
+    @media (min-width: 768px) {
+      flex-direction: row;
+      justify-content: space-around;
+      align-items: flex-start;
+    }
+  }
+  
+  .progress-container {
+    position: relative;
+    margin-bottom: 20px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    
+    @media (min-width: 768px) {
+      margin-bottom: 0;
+    }
+    
+    .progress-info {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      text-align: center;
+      
+      .progress-value {
+        font-size: 24px;
+        font-weight: bold;
+        color: #FF9F43;
+        
+        .progress-unit {
+          font-size: 14px;
+        }
+      }
+      
+      .progress-label {
+        font-size: 12px;
+        color: #606266;
+      }
+    }
+    
+    .health-status {
+      margin-top: 10px;
+      font-size: 16px;
+      font-weight: bold;
+      color: #FF9F43;
+    }
+    .health-description {
+    margin-top: 8px;
+    font-size: 12px;
+    color: #606266;
+    text-align: center;
+    max-width: 240px;
+    line-height: 1.5;
+    padding: 0 10px;
+  }
+}
+  
+  .health-metrics-container {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    
+    @media (min-width: 768px) {
+      width: 60%;
+    }
+  }
+  
+  .health-metrics-row {
+    display: flex;
+    justify-content: space-between;
+    margin-bottom: 10px;
+  }
+  
+  .metric-item {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    background-color: #fff;
+    border-radius: 8px;
+    padding: 10px 15px;
+    width: 48%;
+    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
+    
+    .metric-data {
+      .metric-value {
+        font-size: 16px;
+        font-weight: bold;
+        
+        .metric-unit {
+          font-size: 12px;
+          font-weight: normal;
+        }
+      }
+      
+      .metric-label {
+        font-size: 12px;
+        color: #606266;
+      }
+    }
+    
+    .metric-icon {
+      width: 32px;
+      height: 32px;
+      border-radius: 50%;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      
+      i {
+        font-size: 16px;
+        color: white;
+      }
+      
+      &.green {
+        background-color: #4CD964;
+      }
+      
+      &.blue {
+        background-color: #2284FF;
+      }
+      
+      &.orange {
+        background-color: #FF9F43;
+      }
+      
+      &.red {
+        background-color: #FF6B6B;
+      }
+      
+      &.purple {
+        background-color: #8A70D6;
+      }
+    }
+  }
+  
+  .section-title {
+    font-size: 16px;
+    font-weight: bold;
+    margin: 20px 0 15px;
+    color: #303133;
+    padding-left: 10px;
+  }
+  
+  /* 健康数据部分 */
+  .health-data-section {
+    padding: 0 10px;
+  }
+  
+  .trend-chart {
+    background-color: #fff;
+    border-radius: 8px;
+    padding: 15px;
+    margin-bottom: 20px;
+    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
+  }
+  
+  .trend-title {
+    font-size: 14px;
+    font-weight: bold;
+    color: #303133;
+  }
+  
+  .trend-subtitle {
+    font-size: 12px;
+    color: #909399;
+    margin-bottom: 10px;
+  }
+  
+  .line-chart-container,
+  .bar-chart-container {
+    height: 250px;
+    width: 100%;
+  }
+  
+  .trend-advice {
+    font-size: 12px;
+    color: #606266;
+    background-color: #f5f7fa;
+    padding: 10px;
+    border-radius: 4px;
+    margin-top: 10px;
+  }
+  
+  .legend {
+    display: flex;
+    flex-wrap: wrap;
+    margin-top: 10px;
+  }
+  
+  .legend-item {
+    display: flex;
+    align-items: center;
+    margin-right: 15px;
+    font-size: 12px;
+    color: #606266;
+  }
+  
+  .legend-color {
+    display: inline-block;
+    width: 12px;
+    height: 12px;
+    margin-right: 5px;
+    border-radius: 2px;
+  }
+  
+  .health-tabs {
+    margin-top: 20px;
+  }
+  
+  /* 健康档案部分 */
+  .health-archive-section {
+    padding: 0 10px;
+  }
+  
+  .archive-items {
+    display: flex;
+    flex-direction: column;
+    gap: 15px;
+  }
+  
+  .archive-item {
+    display: flex;
+    background-color: #fff;
+    border-radius: 8px;
+    padding: 15px;
+    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
+  }
+  
+  .archive-icon {
+    width: 36px;
+    height: 36px;
+    border-radius: 50%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin-right: 15px;
+    flex-shrink: 0;
+    
+    i {
+      font-size: 18px;
+      color: white;
+    }
+    
+    &.warning {
+      background-color: #FF6B6B;
+    }
+    
+    &.analysis {
+      background-color: #4CD964;
+    }
+    
+    &.suggestion {
+      background-color: #2284FF;
+    }
+    
+    &.attention {
+      background-color: #FF9F43;
+    }
+  }
+  
+  .archive-content {
+    flex: 1;
+  }
+  
+  .archive-title {
+    font-size: 14px;
+    font-weight: bold;
+    color: #303133;
+    margin-bottom: 5px;
+  }
+  
+  .archive-text {
+    font-size: 12px;
+    color: #606266;
+    line-height: 1.5;
+  }
+  
+  /* AI舌诊部分 */
+  .ai-diagnosis-section {
+    padding: 0 10px 20px;
+  }
+  
+  .date-selector-tabs {
+    display: flex;
+    overflow-x: auto;
+    margin-bottom: 15px;
+  }
+  
+  .date-tab {
+    padding: 8px 15px;
+    background-color: #f5f7fa;
+    border-radius: 4px;
+    margin-right: 8px;
+    font-size: 14px;
+    cursor: pointer;
+    white-space: nowrap;
+    
+    &.active {
+      background-color: #FF9F43;
+      color: white;
+    }
+  }
+  
+  .diagnosis-content {
+    background-color: #fff;
+    border-radius: 8px;
+    padding: 15px;
+    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
+  }
+  
+  .diagnosis-time {
+    text-align: center;
+    font-size: 14px;
+    color: #909399;
+    margin-bottom: 15px;
+  }
+  
+  .diagnosis-result {
+    text-align: center;
+    margin-bottom: 20px;
+  }
+  
+  .diagnosis-label {
+    font-size: 14px;
+    color: #606266;
+  }
+  
+  .diagnosis-type {
+    font-size: 20px;
+    font-weight: bold;
+    color: #FF6B6B;
+    margin-top: 5px;
+  }
+  
+  .diagnosis-section {
+    margin-bottom: 20px;
+  }
+  
+  .diagnosis-section-title {
+    font-size: 16px;
+    font-weight: bold;
+    color: #FF9F43;
+    margin-bottom: 10px;
+    position: relative;
+    padding-left: 10px;
+    
+    &:before {
+      content: '';
+      position: absolute;
+      left: 0;
+      top: 50%;
+      transform: translateY(-50%);
+      width: 4px;
+      height: 16px;
+      background-color: #FF9F43;
+      border-radius: 2px;
+    }
+  }
+  
+  .diagnosis-feature {
+    margin-bottom: 10px;
+    display: flex;
+    flex-wrap: wrap;
+  }
+  
+  .feature-dot {
+    width: 8px;
+    height: 8px;
+    background-color: #FF9F43;
+    border-radius: 50%;
+    margin-right: 8px;
+    margin-top: 6px;
+  }
+  
+  .feature-title {
+    font-size: 14px;
+    font-weight: bold;
+    color: #303133;
+    margin-right: 10px;
+  }
+  
+  .feature-description {
+    font-size: 12px;
+    color: #606266;
+    flex: 1;
+  }
+  
+  .diagnosis-analysis {
+    margin-bottom: 15px;
+  }
+  
+  .analysis-title {
+    font-size: 14px;
+    font-weight: bold;
+    color: #303133;
+    margin-bottom: 5px;
+  }
+  
+  .analysis-content {
+    font-size: 12px;
+    color: #606266;
+    line-height: 1.5;
+  }
+  
+  .diagnosis-characteristics {
+    margin-bottom: 10px;
+  }
+  
+  .characteristics-title {
+    font-size: 13px;
+    font-weight: bold;
+    color: #303133;
+    margin-bottom: 3px;
+  }
+  
+  .characteristics-content {
+    font-size: 12px;
+    color: #606266;
+    line-height: 1.5;
+  }
+  </style>

src/components/DeviceInfo/SettingDialog/SetInfoDialog.vue

@@ -2,7 +2,6 @@
   <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body :close-on-click-modal="false">
     <el-form ref="form" :model="form" :rules="rules" label-width="80px">
       <el-row>
-        
         <el-col :span="24"
           v-if="type != 'goal' && type != 'languageSet' && type != 'messageSend' && type != 'fallcheckSensitivity' && type != 'measureIntervalHr' && type != 'measureIntervalOther' && type != 'phonebookSync'">
           <el-form-item label="开关设置" prop="flag">
@@ -10,51 +9,6 @@
             </el-switch>
           </el-form-item>
         </el-col>
-        <el-col :span="24" v-if="type == 'medication' && form.flag">
-          <el-form-item label="开始提醒时间" prop="medicationStart" label-width="110px">
-            <el-time-picker
-              value-format="HH:mm:ss"
-              v-model="form.medicationStart"
-              placeholder="请选择开始时间"
-              :picker-options="{
-                selectableRange: '00:00:00 - 23:59:59'
-              }"
-            ></el-time-picker>
-          </el-form-item>
-          <el-form-item label="结束提醒时间" prop="medicationEnd" label-width="110px">
-            <el-time-picker
-              value-format="HH:mm:ss"
-              v-model="form.medicationEnd"
-              placeholder="请选择结束时间"
-              :picker-options="{
-                selectableRange: '00:00:00 - 23:59:59'
-              }"
-            ></el-time-picker>
-          </el-form-item>
-        </el-col>
-        <el-col :span="24" v-if="type == 'study' && form.flag">
-          <el-form-item label="开始提醒时间" prop="studyStart" label-width="110px">
-            <el-time-picker
-              value-format="HH:mm:ss"
-              v-model="form.studyStart"
-              placeholder="请选择开始时间"
-              :picker-options="{
-                selectableRange: '00:00:00 - 23:59:59'
-              }"
-            ></el-time-picker>
-          </el-form-item>
-          <el-form-item label="结束提醒时间" prop="studyEnd" label-width="110px">
-            <el-time-picker
-              value-format="HH:mm:ss"
-              v-model="form.studyEnd"
-              placeholder="请选择结束时间"
-              :picker-options="{
-                selectableRange: '00:00:00 - 23:59:59'
-              }"
-            ></el-time-picker>
-          </el-form-item>
-        </el-col>
-
         <el-col :span="24" v-if="type == 'autolocate' || type == 'datafreq'">
           <el-form-item label="设备省电设置" prop="mode" label-width="105px">
             <el-radio-group v-model="form.mode">
@@ -303,8 +257,6 @@ import {
   fallcheck,
   autolocate,
   datafreq,
-  medication,
-  study,
   lcdgesture,
   hralarm,
   spo2alarm,
@@ -316,8 +268,7 @@ import {
   messageSend,
   fallcheckSensitivity,
   measureIntervalHr,
-  measureIntervalOther,
-  getSet
+  measureIntervalOther
 } from "@/api/watch/deviceInfoSet.js";
 
 export default {
@@ -329,50 +280,6 @@ export default {
         callback();
       }
     };
-    const checkStudyTimes = (rule, value, callback, type) => {
-      if (!value) {
-        return callback(new Error('时间不能为空'));
-      }
-
-      const start = this.form.studyStart;
-      const end = this.form.studyEnd;
-
-      if (type === 'start') {
-        if (end && start && new Date(start) >= new Date(end)) {
-          callback(new Error('开始时间必须小于结束时间'));
-        } else {
-          callback();
-        }
-      } else if (type === 'end') {
-        if (start && new Date(start) > new Date(end)) {
-          callback(new Error('结束时间必须大于开始时间'));
-        } else {
-          callback();
-        }
-      }
-    };
-    const checkMedicationTimes = (rule, value, callback, type) => {
-      if (!value) {
-        return callback(new Error('时间不能为空'));
-      }
-
-      const start = this.form.medicationStart;
-      const end = this.form.medicationEnd;
-
-      if (type === 'start') {
-        if (end && start && new Date(start) >= new Date(end)) {
-          callback(new Error('开始时间必须小于结束时间'));
-        } else {
-          callback();
-        }
-      } else if (type === 'end') {
-        if (start && new Date(start) > new Date(end)) {
-          callback(new Error('结束时间必须大于开始时间'));
-        } else {
-          callback();
-        }
-      }
-    };
     //  检查翻腕亮屏开始时间
     const checkStart = (rule, value, callback) => {
       if (value && this.form.end) {
@@ -568,12 +475,6 @@ export default {
       open: false,
       // 表单参数
       form: {},
-      //
-      param:{
-        flag:null,
-        start:null,
-        end:null
-      },
       // 表单校验
       rules: {
         time: [
@@ -587,22 +488,6 @@ export default {
           { required: true, message: "结束时间不能为空", trigger: ["blur", "change"] },
           { validator: checkEnd, trigger: ["blur", "change"] }
         ],
-        medicationStart: [
-          { required: true, message: "开始时间不能为空", trigger: "blur" },
-          { validator: (rule, value, callback) => checkMedicationTimes(rule, value, callback, 'start'), trigger: "blur" }
-        ],
-        medicationEnd: [
-          { required: true, message: "结束时间不能为空", trigger: "blur" },
-          { validator: (rule, value, callback) => checkMedicationTimes(rule, value, callback, 'end'), trigger: "blur" }
-        ],
-        studyStart: [
-          { required: true, message: "看课提醒开始时间不能为空", trigger: "blur" },
-          { validator: (rule, value, callback) => checkStudyTimes(rule, value, callback, 'start'), trigger: "blur" }
-        ],
-        studyEnd: [
-          { required: true, message: "看课提醒结束时间不能为空", trigger: "blur" },
-          { validator: (rule, value, callback) => checkStudyTimes(rule, value, callback, 'end'), trigger: "blur" }
-        ],
         high: [
           { required: true, message: "正常心率最高值不能为空", trigger: ["blur", "change"] },
           { validator: checkHigh, trigger: ["blur", "change"] }
@@ -732,14 +617,11 @@ export default {
         description: undefined, // 发送设备消息 描述
         fallThreshold: 14000, // 跌倒检测的灵敏度，默认14000
         measureIntervalHr: undefined, // 心率数据测量间隔设置 分钟
-        medicationStart: undefined, // 用药提醒的开始时间
-        medicationEnd: undefined, // 用药提醒的结束时间
-        studyStart: undefined, // 看课提醒的开始时间
-        studyEnd: undefined, // 看课提醒的结束时间
       };
       this.resetForm("form");
       this.btnLoading = false
     },
+    /** 修改按钮操作 */
     handleSet(deviceid, deviceNumber, item) {
       this.reset();
       this.form.deviceid = deviceid
@@ -748,35 +630,10 @@ export default {
       this.title = item.label;
       this.type = item.eventName
     },
-    handleTimeSet(item) {
-      console.log('设置用药提醒发送时间');
-      //查询对应设置
-      this.reset();
-      this.type = item.eventName;
-      this.open = true;
-      getSet({type:this.type}).then(response => {
-        this.param = response.data;
-        console.log("==========================",JSON.stringify(this.param,null,2));
-        this.form.flag = this.param.flag;
-        console.log("==========================开关:"+ this.form.flag);
-        this.title = item.label;
-        if(this.type == 'medication'){
-          this.form.medicationStart = this.param.start;
-          this.form.medicationEnd = this.param.end;
-        } else if(this.type == 'study'){
-          this.form.studyStart = this.param.start;
-          this.form.studyEnd = this.param.end;
-          console.log("==========================开关:"+ JSON.stringify(this.form,null,2));
-        }
-      });
-      
-    },
     /** 提交按钮 */
     submitForm() {
       this.$refs["form"].validate((valid) => {
-        if(this.type=='medication' || this.type=='study'){
-          this.confirmFun()
-        } else if (valid) {
+        if (valid) {
           if (this.form.deviceNumber != undefined) {
             this.confirmFun()
           } else {
@@ -791,31 +648,16 @@ export default {
         fallcheck: `是否确认${flagTxt}设备信息编号为${this.form.deviceNumber}的跌倒检测？`,
         autolocate: `是否确认${flagTxt}设备信息编号为${this.form.deviceNumber}的自动定位？`,
       }
-      if(this.type=='medication' || this.type=='study'){
-        this.$confirm(`是否确认对所有设备进行以上操作？`, "警告", {
-          confirmButtonText: "确定",
-          cancelButtonText: "取消",
-          type: "warning"
-        }).then(() => {
-          this.handleFun()
-        }).then(() => {
-          this.open = false
-          // this.$emit("refreshList")
-        }).catch(() => { });
-        
-      } else {
-        this.$confirm(typeTxt[this.type] || `是否确认对设备id为${this.form.deviceNumber}进行以上操作？`, "警告", {
-          confirmButtonText: "确定",
-          cancelButtonText: "取消",
-          type: "warning"
-        }).then(() => {
-          this.handleFun()
-        }).then(() => {
-          this.open = false
-          // this.$emit("refreshList")
-        }).catch(() => { });
-        }
-      
+      this.$confirm(typeTxt[this.type] || `是否确认对设备id为${this.form.deviceNumber}进行以上操作？`, "警告", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning"
+      }).then(() => {
+        this.handleFun()
+      }).then(() => {
+        this.open = false
+        // this.$emit("refreshList")
+      }).catch(() => { });
     },
     handleFun() {
       const options = {
@@ -838,18 +680,6 @@ export default {
           time: this.form.time,
           mode: this.form.mode
         }),
-        // 用药提醒设置
-        medication: () => medication({
-          flag: this.form.flag,
-          start: this.form.flag ? this.form.medicationStart : undefined,
-          end: this.form.flag ? this.form.medicationEnd : undefined
-        }),
-        // 看课提醒设置
-        study: () => study({
-          flag: this.form.flag,
-          start: this.form.flag ? this.form.studyStart : undefined,
-          end: this.form.flag ? this.form.studyEnd : undefined
-        }),
         // 翻腕亮屏设置
         lcdgesture: () => lcdgesture({
           deviceNumber: this.form.deviceNumber,

src/components/DeviceInfo/Sleep.vue

@@ -117,8 +117,13 @@
             <span v-if="scope.row.type === 7">快速眼动</span>
           </template>
         </el-table-column>
+        <template #empty>
+            <div>
+                今日暂无数据，请选择其他日期
+            </div>
+        </template>
       </el-table>
-      <pagination v-show="(total > 0) && detailsType" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getDataPage"/>
+      <pagination v-show="(total>0) && detailsType" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getDataPage"/>
     </div> 
   </div>
 </template>
@@ -157,10 +162,10 @@ export default {
       startTime: "2024-08-04 20:58:00",
       endTime: "2024-08-05 00:27:00",
       sleepDefaultInfo: {
-        4: { name: "浅睡", color: "#93c0fa", yValue: 7 },
-        3: { name: "深睡", color: "#427ff7", yValue: 3 },
-        6: { name: "清醒", color: "#fadeaf", yValue: 9 },
-        7: { name: "快速眼动", color: "#9899f5", yValue: 12 },
+        1: { name: "浅睡", color: "#93c0fa", yValue: 7 },
+        2: { name: "深睡", color: "#427ff7", yValue: 3 },
+        3: { name: "清醒", color: "#fadeaf", yValue: 9 },
+        4: { name: "快速眼动", color: "#9899f5", yValue: 12 },
       },
       sleepInfo: {
         score: '',
@@ -390,58 +395,48 @@ export default {
 
             //统计
             this.sleepInfo.score = response.data.score==null?0:response.data.score;
-            
             //浅睡
             if (response.data.lightSleep != null) {
-              // this.sportChartOption.series[0].data[0] = { value: response.data.lightSleep, name: '浅睡', itemStyle: { color: "#93c0fa" } };
+              this.sportChartOption.series[0].data[0] = { value: response.data.lightSleep, name: '浅睡', itemStyle: { color: "#93c0fa" } };
               this.sleepInfo.light_sleep = response.data.lightSleep;
 
             } else{
-              // this.sportChartOption.series[0].data[0] = { value: response.data.lightSleep, name: '浅睡', itemStyle: { color: "#93c0fa" } };
+              this.sportChartOption.series[0].data[0] = { value: response.data.lightSleep, name: '浅睡', itemStyle: { color: "#93c0fa" } };
               this.sleepInfo.light_sleep = 0;
             }
-            this.sportChartOption.series[0].data[0] = { value: response.data.lightSleep, name: '浅睡', itemStyle: { color: "#93c0fa" } };
-
             //深睡
             if (response.data.deepSleep != null) {
-              // this.sportChartOption.series[0].data[1] = { value: response.data.deepSleep, name: '深睡', itemStyle: { color: "#427ff7" } };
+              this.sportChartOption.series[0].data[1] = { value: response.data.deepSleep, name: '深睡', itemStyle: { color: "#427ff7" } };
               this.sleepInfo.deep_sleep = response.data.deepSleep;
 
             } else{
-              // this.sportChartOption.series[0].data[1] = { value: response.data.deepSleep, name: '深睡', itemStyle: { color: "#427ff7" } };
+              this.sportChartOption.series[0].data[1] = { value: response.data.deepSleep, name: '深睡', itemStyle: { color: "#427ff7" } };
               this.sleepInfo.deep_sleep = 0;
             }
-            this.sportChartOption.series[0].data[1] = { value: response.data.deepSleep, name: '深睡', itemStyle: { color: "#427ff7" } };
             //清醒
             if (response.data.weakSleep != null) {
-              // this.sportChartOption.series[0].data[2] = { value: response.data.weakSleep, name: '清醒', itemStyle: { color: "#fadeaf" } };
+              this.sportChartOption.series[0].data[2] = { value: response.data.weakSleep, name: '清醒', itemStyle: { color: "#fadeaf" } };
               this.sleepInfo.weak_sleep = response.data.weakSleep;
 
             } else{
-              // this.sportChartOption.series[0].data[2] = { value: response.data.weakSleep, name: '清醒', itemStyle: { color: "#fadeaf" } };
+              this.sportChartOption.series[0].data[2] = { value: response.data.weakSleep, name: '清醒', itemStyle: { color: "#fadeaf" } };
               this.sleepInfo.weak_sleep = 0;
             }
-            this.sportChartOption.series[0].data[2] = { value: response.data.weakSleep, name: '清醒', itemStyle: { color: "#fadeaf" } };
             //快速眼动
             if (response.data.eyemoveSleep != null) {
-              // this.sportChartOption.series[0].data[3] = { value: response.data.eyemoveSleep, name: '快速眼动', itemStyle: { color: "#9899f5" } };
+              this.sportChartOption.series[0].data[3] = { value: response.data.eyemoveSleep, name: '快速眼动', itemStyle: { color: "#9899f5" } };
               this.sleepInfo.eyemove_sleep = response.data.eyemoveSleep;
 
             } else{
-              // this.sportChartOption.series[0].data[3] = { value: response.data.eyemoveSleep, name: '快速眼动', itemStyle: { color: "#9899f5" } };
+              this.sportChartOption.series[0].data[3] = { value: response.data.eyemoveSleep, name: '快速眼动', itemStyle: { color: "#9899f5" } };
               this.sleepInfo.eyemove_sleep = 0;
             }
-            this.sportChartOption.series[0].data[3] = { value: response.data.eyemoveSleep, name: '快速眼动', itemStyle: { color: "#9899f5" } };
-            // if (this.sportChart) {
-            //   this.sportChart.setOption(this.sportChartOption);
-            // }
+            if (this.sportChart) {
+              this.sportChart.setOption(this.sportChartOption);
+            }
 
           } else {
-            this.defaultChart();
-            console.warn("睡眠数据返回为空", response);
-          }
-          if (this.sportChart) {
-              this.sportChart.setOption(this.sportChartOption);
+            console.warn("睡眠数据返回为空或格式不正确:", response);
           }
         })
         .catch((error) => {

src/components/DeviceInfo/Sports.vue

@@ -29,8 +29,13 @@
       <el-table-column prop="sportTime" label="运动时长(min)" />
       <el-table-column prop="startTime" label="开始时间" />
       <el-table-column prop="type" label="运动类型" />
+      <template #empty>
+          <div>
+              今日暂无数据，请选择其他日期
+          </div>
+      </template>
     </el-table>
-    <pagination v-show="(total > 0) && detailsType" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getDataPage"/>
+    <pagination v-show="(total>0) && detailsType" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getDataPage"/>
     </div>
   </div>
 </template>

src/components/DeviceInfo/Temperature.vue

@@ -24,9 +24,13 @@
                 <el-table-column prop="createTime" label="时间" />
                 <el-table-column prop="estTemp" label="体温(℃)" />
                 <el-table-column prop="shellTemp" label="体表温度(℃)" />
-                
+                <template #empty>
+                    <div>
+                        今日暂无数据，请选择其他日期
+                    </div>
+                </template>
             </el-table>
-            <pagination v-show="(total > 0) && detailsType" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getDataPage"/>
+            <pagination v-show="(total>0) && detailsType" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getDataPage"/>
         </div>
         
     </div>
@@ -70,9 +74,9 @@ export default {
                     boundaryGap: false,
                     type: "time",
                     splitNumber: 6,
-                    axisLine: {
-                        show: false,
-                    },
+                    // axisLine: {
+                    //     show: false,
+                    // },
                     axisTick: {
                         show: false,
                     },

src/components/DeviceInfo/Uricacid.vue

@@ -17,6 +17,11 @@
             </el-table-column>
             <el-table-column prop="val" label="测量结果">
             </el-table-column>
+            <template #empty>
+                <div>
+                    今日暂无数据，请选择其他日期
+                </div>
+            </template>
         </el-table>
 
     </div>

src/components/DeviceInfo/Urineketones.vue

@@ -16,6 +16,11 @@
             </el-table-column>
             <el-table-column prop="val" align="center" label="测量结果">
             </el-table-column>
+            <template #empty>
+                <div>
+                    今日暂无数据，请选择其他日期
+                </div>
+            </template>
         </el-table>
 
     </div>

src/views/company/companyConfig/index.vue

@@ -46,7 +46,9 @@
              <el-form-item label="是否允许重复客户导入" prop="allowRepeatCustomer">
               <el-switch v-model="cidConfig.allowRepeatCustomer"></el-switch>
             </el-form-item>
-
+            <el-form-item label="回调地址" prop="callbackUrl">
+               <el-input v-model="cidConfig.callbackUrl" style="width:800px"></el-input>
+            </el-form-item>
             <div class="line"></div>
             <div style="float:right;margin-right:20px">
               <el-button type="primary" @click="onSubmitCidConfig">提交</el-button>
@@ -365,7 +367,8 @@ export default {
       userIsDefaultBlack: null,
       redPacketConfig:{},
 
-      redPacketConfigForm:{}
+      redPacketConfigForm:{},
+      cidConfigForm:{}
     };
   },
   created() {

src/views/company/companyVoiceRobotic/index.vue

@@ -665,7 +665,7 @@
                             <i class="el-icon-s-operation"></i>
                             当前节点：<strong>{{ record.currentNodeTypeName }}</strong>
 
-                            <el-button
+                            <!-- <el-button
                               v-if="hasContent(record)"
                               size="mini"
                               type="primary"
@@ -674,7 +674,7 @@
                               style="margin-left: 8px;"
                               @click.stop="handleShowContent(record)">
                                 查看对话内容
-                            </el-button>
+                            </el-button> -->
                             <!-- 外呼未执行标识 -->
                             <el-button
                                 v-if="record.waitCallNode"
@@ -718,6 +718,16 @@
                           <div class="node-info">
                             <i :class="getNodeIcon(log.nodeKey)" class="node-icon"></i>
                             <span class="node-name">{{ log.nodeName }}</span>
+                            <el-button
+                              v-if="hasContent(log)"
+                              size="mini"
+                              type="primary"
+                              plain
+                              icon="el-icon-chat-dot-round"
+                              style="margin-left: 8px;"
+                              @click.stop="handleShowContent(record,log)">
+                                查看对话内容
+                            </el-button>
                           </div>
                           <el-tag
                             :type="getStatusTagType(log.statusName)"
@@ -1629,10 +1639,10 @@ export default {
       this.manualCallDialog.companyUserId = null;
       this.manualCallDialog.workflowInstanceId = null;
     },
-    handleShowContent(record) {
+     handleShowContent(record,log) {
       this.contentDialog.customerName = record.customerName || '';
       this.contentDialog.customerPhone = record.customerPhone || '';
-      this.contentDialog.content = record.contentList || '';
+      this.contentDialog.content = log.nodeContentList || '';
       this.contentDialog.visible = true;
     },
 
@@ -1660,12 +1670,12 @@ export default {
       }
     },
     hasContent(record) {
-      if (!record || !record.contentList) return false
+      if (!record || !record.nodeContentList) return false
 
       try {
-          const parsed = typeof record.contentList === 'string'
-              ? JSON.parse(record.contentList)
-              : record.contentList
+          const parsed = typeof record.nodeContentList === 'string'
+              ? JSON.parse(record.nodeContentList)
+              : record.nodeContentList
 
           if (!Array.isArray(parsed)) return false
 

src/views/company/companyWorkflow/design.vue

@@ -1430,6 +1430,12 @@ export default {
     startConnect(e, node, anchor) {
         if (this.readonlyMode) return
 
+        // 结束节点不能作为连线的起点（不允许结束节点有出边）
+        if (this.isEndNodeType(node.nodeType)) {
+          this.$message.warning('结束节点不能作为连线的起点')
+          return
+        }
+
         this.connecting = true
         const anchorPos = this.getAnchorPos(node, anchor)
         this.connectStart = {
@@ -1471,6 +1477,13 @@ export default {
         e.sourceNodeKey === sourceKey && e.targetNodeKey === targetKey)
       if (exists) return
 
+      // 不允许结束节点作为连线的起点（结束节点不能有出边）
+      const sourceNode = this.nodes.find(n => n.nodeKey === sourceKey)
+      if (sourceNode && this.isEndNodeType(sourceNode.nodeType)) {
+        this.$message.warning('结束节点不能作为连线的起点')
+        return
+      }
+
       this.edges.push({
         edgeKey: 'edge_' + Date.now(),
         sourceNodeKey: sourceKey,
@@ -1659,6 +1672,17 @@ export default {
         }
       }
 
+      // 校验除结束节点外，其他节点都必须有出边（只有结束节点才能作为最后一个节点）
+      const sourceNodeKeys = new Set(this.edges.map(e => e.sourceNodeKey))
+      const tailNodes = this.nodes.filter(node =>
+        !this.isEndNodeType(node.nodeType) && !sourceNodeKeys.has(node.nodeKey)
+      )
+      if (tailNodes.length > 0) {
+        const tailNames = tailNodes.map(n => n.nodeName).join('、')
+        this.$message.warning(`以下节点没有出线连接，只有结束节点才能作为最后一个节点：${tailNames}`)
+        return
+      }
+
       // 校验短信节点和外呼节点配置
       for (const node of this.nodes) {
         // 短信节点校验：短信模版必选

src/views/live/liveConfig/answer.vue

@@ -1,63 +1,65 @@
 <template>
   <div class="container-md">
     <div class="tip-box">
-      选择用于本节直播课程的题库试题，试题可用于直播间内发送
-      <el-link
-        type="primary"
-        style="margin-left: 5px;"
-        @click="handleToQuestionBank"
-      >配置题库试题 >></el-link>
+      为本直播间选择<strong>课程题库</strong>中的试题（也可先在题库中手动新增题目，再回到此处勾选添加）。
+<!--      <el-link-->
+<!--        type="primary"-->
+<!--        style="margin-left: 5px;"-->
+<!--        @click="handleToCourseQuestionBank"-->
+<!--      >打开课程题库 &gt;&gt;</el-link>-->
     </div>
 
     <el-button type="primary" icon="el-icon-plus" style="margin: 20px 0;" @click="handleAddQuestion">添加试题</el-button>
-    <!-- 试题列表表格 -->
     <el-table
       :data="questionLiveList"
       style="width: 100%"
       v-loading="loading"
     >
-      <!-- 题干列：显示试题的主要内容 -->
       <el-table-column
         prop="title"
         label="题干"
         show-overflow-tooltip
-      ></el-table-column>
-
-      <!-- 题型列：显示是单选还是多选 -->
+      />
       <el-table-column
         prop="type"
         label="题型"
+        width="100"
       >
         <template slot-scope="scope">
-          {{ scope.row.type === 1 ? '单选题' : '多选题' }}
+          {{ scope.row.type === 1 ? '单选题' : scope.row.type === 2 ? '多选题' : '—' }}
         </template>
       </el-table-column>
-
-      <!-- 创建时间列：显示试题创建的时间 -->
       <el-table-column
         prop="createTime"
         label="创建时间"
-      ></el-table-column>
-
-      <!-- 操作列：包含编辑和删除按钮 -->
+        width="170"
+      />
       <el-table-column
         label="操作"
-        width="180"
+        width="280"
         fixed="right"
       >
         <template slot-scope="scope">
-          <!-- 删除按钮：用于移除试题 -->
+          <el-button
+            type="text"
+            size="small"
+            @click="handleStartQuiz(scope.row)"
+          >开始答题</el-button>
+          <el-button
+            type="text"
+            size="small"
+            @click="handleCloseQuiz(scope.row)"
+          >结束答题</el-button>
           <el-button
             type="text"
             size="small"
             style="color: #F56C6C;"
             @click="handleDelete(scope.row)"
-          >删除</el-button>
+          >移除</el-button>
         </template>
       </el-table-column>
     </el-table>
 
-    <!-- 分页组件：用于分页展示试题列表 -->
     <pagination
       v-show="questionTotal > 0"
       :total="questionTotal"
@@ -67,82 +69,85 @@
       style="margin-top: 20px;"
     />
 
-    <!-- 添加试题弹窗 -->
     <el-dialog
       title="添加试题"
       :visible.sync="questionDialogVisible"
-      width="800px"
+      width="860px"
+      append-to-body
       :close-on-click-modal="false"
       :close-on-press-escape="false"
+      @open="onAddDialogOpen"
+      @closed="onAddDialogClosed"
     >
-      <div class="dialog-content">
-        <div style="text-align: right; margin-bottom: 20px;">
-          <el-input
-            v-model="searchTitle"
-            placeholder="请输入搜索内容"
-            style="width: 300px;"
-            @input="handleQuestionSearch"
-          ></el-input>
-        </div>
+      <el-tabs v-model="addQuestionTab">
+        <el-tab-pane label="从课程题库选择" name="bank">
+          <div class="dialog-toolbar">
+            <el-input
+              v-model="searchTitle"
+              placeholder="题干关键词"
+              clearable
+              size="small"
+              style="width: 220px; margin-right: 12px;"
+              @keyup.enter.native="handleQuestionSearch"
+            />
+            <el-select
+              v-model="optionTypeFilter"
+              placeholder="题型"
+              clearable
+              size="small"
+              style="width: 120px; margin-right: 12px;"
+            >
+              <el-option label="单选题" :value="1" />
+              <el-option label="多选题" :value="2" />
+            </el-select>
+            <el-button type="primary" icon="el-icon-search" size="small" @click="handleQuestionSearch">搜索</el-button>
+          </div>
 
-        <el-table
-          ref="questionTable"
-          :data="questionList"
-          style="width: 100%"
-          v-loading="questionLoading"
-          @selection-change="handleSelectionChange"
-          @row-click="handleRowClick"
-          row-key="id"
-        >
-          <!-- 复选框列：用于多选试题 -->
-          <el-table-column
-            type="selection"
-            width="55"
-          >
-          </el-table-column>
-          <!-- 题干列：显示试题的主要内容 -->
-          <el-table-column
-            prop="title"
-            label="题干"
-            class-name="clickable-column"
-          ></el-table-column>
-          <!-- 题型列：显示单选或多选 -->
-          <el-table-column
-            prop="type"
-            label="题型"
-            class-name="clickable-column"
+          <el-table
+            ref="questionTable"
+            :data="questionList"
+            style="width: 100%"
+            v-loading="questionLoading"
+            @selection-change="handleSelectionChange"
+            @row-click="handleRowClick"
+            row-key="id"
+            max-height="420"
           >
-            <template slot-scope="scope">
-              {{ scope.row.type === 1 ? '单选题' : '多选题' }}
-            </template>
-          </el-table-column>
-          <!-- 创建人列 -->
-          <el-table-column
-            prop="createBy"
-            label="创建人"
-            class-name="clickable-column"
-          ></el-table-column>
-          <!-- 创建时间列 -->
-          <el-table-column
-            prop="createTime"
-            label="创建时间"
-            width="150"
-            class-name="clickable-column"
-          ></el-table-column>
-        </el-table>
+            <el-table-column type="selection" width="50" align="center" reserve-selection />
+            <el-table-column prop="title" label="题干" min-width="200" show-overflow-tooltip class-name="clickable-column" />
+            <el-table-column prop="type" label="题型" width="90" class-name="clickable-column">
+              <template slot-scope="scope">
+                {{ scope.row.type === 1 ? '单选' : scope.row.type === 2 ? '多选' : '—' }}
+              </template>
+            </el-table-column>
+            <el-table-column prop="createBy" label="创建人" width="100" show-overflow-tooltip class-name="clickable-column" />
+            <el-table-column prop="createTime" label="创建时间" width="160" class-name="clickable-column" />
+          </el-table>
 
-        <pagination
-          v-show="total > 0"
-          :total="total"
-          :page.sync="queryParams.pageNum"
-          :limit.sync="queryParams.pageSize"
-          @pagination="getQuestionList"
-          style="margin-top: 20px;"
-        />
-      </div>
-      <div slot="footer" class="dialog-footer">
+          <pagination
+            v-show="total > 0"
+            :total="total"
+            :page.sync="queryParams.pageNum"
+            :limit.sync="queryParams.pageSize"
+            @pagination="getQuestionList"
+            style="margin-top: 16px;"
+          />
+        </el-tab-pane>
+        <el-tab-pane label="手动维护题库" name="manual">
+          <el-alert
+            title="自定义题目请先在「课程题库」中新增或编辑；保存后回到本页「从课程题库选择」勾选添加。"
+            type="info"
+            :closable="false"
+            show-icon
+            style="margin-bottom: 16px;"
+          />
+          <el-button type="primary" plain icon="el-icon-document" @click="handleToCourseQuestionBank">前往课程题库</el-button>
+        </el-tab-pane>
+      </el-tabs>
+
+      <div slot="footer" class="dialog-footer" v-show="addQuestionTab === 'bank'">
         <div style="display: flex; justify-content: space-between; align-items: center;">
-          <span class="selected-count">当前已选择 <span style="color: #00BFFF; font-style: italic;">{{ selectedQuestions.length }}</span> 题</span>
+          <span class="selected-count">当前已选择 <span class="num">{{ selectedQuestions.length }}</span> 题（题目来自课程题库）</span>
           <div>
             <el-button @click="questionDialogVisible = false">取 消</el-button>
             <el-button type="primary" @click="confirmAddQuestion">确 定</el-button>
@@ -154,12 +159,18 @@
 </template>
 
 <script>
-
-import {addLiveQuestionLive, listLiveQuestionLive, listLiveQuestionOptionList} from "@/api/live/liveQuestionLive";
+import {
+  addLiveQuestionLive,
+  listLiveQuestionLive,
+  listLiveQuestionOptionList,
+  deleteLiveQuestionLive
+} from '@/api/live/liveQuestionLive'
 
 export default {
+  name: 'LiveConfigAnswer',
   data() {
     return {
+      addQuestionTab: 'bank',
       questionDialogVisible: false,
       questionLoading: false,
       questionTotal: 0,
@@ -168,19 +179,21 @@ export default {
       questionList: [],
       loading: true,
       searchTitle: '',
+      optionTypeFilter: null,
       total: 0,
       queryParams: {
         pageNum: 1,
         pageSize: 10,
         title: null,
+        type: null,
         liveId: null
       },
       questionParams: {
         pageNum: 1,
         pageSize: 10,
         liveId: null
-      },
-    };
+      }
+    }
   },
   created() {
     this.liveId = this.$route.params.liveId
@@ -188,73 +201,171 @@ export default {
     this.questionParams.liveId = this.liveId
     this.getLiveQuestionLiveList()
   },
+  computed: {
+    userId() {
+      return this.$store.state.user.user.userId
+    }
+  },
   methods: {
+    sendLiveQuizCmd(cmd, data) {
+      const conn = this.$store.state.liveWs[this.liveId]
+      if (!conn || !conn.ws || conn.ws.readyState !== WebSocket.OPEN) {
+        this.$message.warning('直播 WebSocket 未连接，请从直播配置页进入并保持本页不刷新')
+        return false
+      }
+      const payload = {
+        cmd,
+        liveId: Number(this.liveId),
+        userId: this.userId,
+        data: JSON.stringify(data || {})
+      }
+      conn.send(JSON.stringify(payload))
+      return true
+    },
+    handleStartQuiz(row) {
+      if (!row || row.id == null) {
+        return
+      }
+      if (this.sendLiveQuizCmd('liveQuizStart', { relId: row.id })) {
+        this.$message.success('已向直播间广播本题')
+      }
+    },
+    handleCloseQuiz(row) {
+      const data = row && row.id != null ? { relId: row.id } : {}
+      if (this.sendLiveQuizCmd('liveQuizClose', data)) {
+        this.$message.success('已广播结束答题')
+      }
+    },
+    onAddDialogOpen() {
+      this.addQuestionTab = 'bank'
+      this.searchTitle = ''
+      this.optionTypeFilter = null
+      this.queryParams.pageNum = 1
+      this.queryParams.title = null
+      this.queryParams.type = null
+      this.getQuestionList()
+    },
+    onAddDialogClosed() {
+      this.selectedQuestions = []
+      this.$nextTick(() => {
+        const t = this.$refs.questionTable
+        if (t && typeof t.clearSelection === 'function') {
+          t.clearSelection()
+        }
+      })
+    },
     handleQuestionSearch() {
       this.queryParams.pageNum = 1
-      this.queryParams.title = this.searchTitle
+      this.queryParams.title = this.searchTitle || null
+      this.queryParams.type = this.optionTypeFilter
       this.getQuestionList()
     },
     getLiveQuestionLiveList() {
       this.loading = true
       listLiveQuestionLive(this.questionParams).then(response => {
-        this.questionLiveList = response.rows
-        this.questionTotal = response.total
+        this.questionLiveList = response.rows || []
+        this.questionTotal = response.total || 0
+        this.loading = false
+      }).catch(() => {
         this.loading = false
       })
     },
-    handleToQuestionBank() {
-      this.$router.push('/live/liveQuestionBank')
+    handleToCourseQuestionBank() {
+      this.$router.push('/course/courseQuestionBank')
     },
     handleAddQuestion() {
       this.questionDialogVisible = true
-      this.getQuestionList()
     },
     getQuestionList() {
       this.questionLoading = true
-      listLiveQuestionOptionList(this.queryParams).then(response => {
-        this.questionList = response.rows
-        this.total = response.total
+      const params = {
+        ...this.queryParams,
+        liveId: this.liveId
+      }
+      listLiveQuestionOptionList(params).then(response => {
+        this.questionList = response.rows || []
+        this.total = response.total || 0
+        this.questionLoading = false
+        this.$nextTick(() => this.syncTableSelection())
+      }).catch(() => {
         this.questionLoading = false
       })
     },
+    syncTableSelection() {
+      const table = this.$refs.questionTable
+      if (!table || !this.questionList.length) return
+      const selectedIds = new Set(this.selectedQuestions.map(l => l.id))
+      this.questionList.forEach(row => {
+        table.toggleRowSelection(row, selectedIds.has(row.id))
+      })
+    },
     handleSelectionChange(selection) {
-      this.selectedQuestions = selection
+      const sel = selection || []
+      const currentIds = new Set(this.questionList.map(r => r.id))
+      const fromOtherPages = this.selectedQuestions.filter(q => !currentIds.has(q.id))
+      const merged = [...fromOtherPages, ...sel]
+      if (merged.length > 15) {
+        this.$message.warning('最多一次添加 15 题')
+        this.$nextTick(() => this.syncTableSelection())
+        return
+      }
+      this.selectedQuestions = merged
     },
     confirmAddQuestion() {
       if (this.selectedQuestions.length === 0) {
-        this.$message({
-          message: '请选择要添加的试题',
-          type: 'warning'
-        })
+        this.$message.warning('请选择要添加的试题')
         return
       }
-      // 调用添加直播间试题接口
       addLiveQuestionLive({
         liveId: this.liveId,
         questionIds: this.selectedQuestions.map(item => item.id).join(',')
-      }).then(response => {
+      }).then(() => {
+        this.$message.success('添加成功')
         this.questionDialogVisible = false
         this.getLiveQuestionLiveList()
       })
     },
-    handleRowClick(row, column) {
-      // 如果点击的是复选框列，不进行处理
-      if (column.type === 'selection') {
+    handleDelete(row) {
+      if (!row || row.id == null) return
+      this.$confirm('确认从本直播间移除该试题？（不会删除课程题库中的题目）', '提示', {
+        type: 'warning'
+      }).then(() => {
+        return deleteLiveQuestionLive({ liveId: this.liveId, ids: String(row.id) })
+      }).then(() => {
+        this.$message.success('已移除')
+        this.getLiveQuestionLiveList()
+      }).catch(() => {})
+    },
+    handleRowClick(row, column, event) {
+      if (column && column.type === 'selection') {
         return
       }
-
-      // 获取表格实例
-      const table = this.$refs.questionTable[0]
+      const table = this.$refs.questionTable
       if (!table) {
         return
       }
-
-      // 判断当前行是否已经被选中
       const isSelected = this.selectedQuestions.some(item => item.id === row.id)
-
-      // 切换选中状态
       table.toggleRowSelection(row, !isSelected)
-    },
+    }
   }
-};
+}
 </script>
+
+<style scoped>
+.tip-box {
+  line-height: 1.6;
+  color: #606266;
+}
+.dialog-toolbar {
+  margin-bottom: 12px;
+}
+.selected-count {
+  font-size: 13px;
+  color: #606266;
+}
+.selected-count .num {
+  color: #409eff;
+  font-style: italic;
+  font-weight: 600;
+}
+</style>

src/views/live/liveConfig/index.vue

@@ -107,7 +107,7 @@ export default {
         { name: '红包配置', label: '红包配置', index: 'liveRedConf'},
         { name: '抽奖配置', label: '抽奖配置', index: 'liveLotteryConf'},
         { name: '优惠券配置', label: '优惠券配置', index: 'liveCoupon'},
-        // { name: '答题', label: '答题', index: 'answer'},
+        { name: '答题', label: '答题', index: 'answer'},
         { name: '直播商品', label: '直播商品', index: 'goods'},
         { name: '回放设置', label: '回放设置', index: 'liveReplay'},
         { name: '运营自动化', label: '运营自动化', index: 'task'},

src/views/live/liveStatistics/LiveStatisticsPanel.vue

@@ -0,0 +1,1203 @@
+<template>
+  <div class="app-container live-statistics-panel-root">
+    <el-alert
+      v-if="trainingPeriodId"
+      title="仅可选择当前营期下的直播间进行统计查询。"
+      type="info"
+      :closable="false"
+      show-icon
+      class="mb8"
+    />
+    <!-- 左上角：选择直播间（多选，最多展示8个，多余折叠）+ 查询按钮 -->
+    <el-row :gutter="10" class="mb8">
+      <el-col :span="1.5">
+        <div
+          class="live-select-input"
+          @click="openLiveSelectDialog">
+          <div class="live-select-content">
+            <template v-if="selectedLiveList.length === 0">
+              <span class="placeholder">请选择直播间</span>
+            </template>
+            <template v-else>
+              <template v-for="(item, idx) in displayedLives">
+                <span :key="item.liveId" class="live-tag">{{ item.liveName }}（{{ item.liveId }}）</span>
+                <span v-if="idx < displayedLives.length - 1 || selectedLiveList.length > 7" class="tag-sep">、</span>
+              </template>
+              <span v-if="selectedLiveList.length > 7" class="fold-text">等{{ selectedLiveList.length }}个</span>
+            </template>
+          </div>
+          <div class="live-select-suffix">
+            <i v-if="selectedLiveList.length > 0" class="el-icon-circle-close" @click.stop="handleClearLive"></i>
+            <i class="el-icon-arrow-down"></i>
+          </div>
+        </div>
+      </el-col>
+      <el-col :span="1">
+        <el-button
+          type="primary"
+          icon="el-icon-search"
+          size="small"
+          :loading="overviewLoading"
+          :disabled="selectedLiveList.length === 0"
+          @click="fetchOverview">
+          查询
+        </el-button>
+      </el-col>
+    </el-row>
+
+    <el-card ref="statsCard" class="box-card" shadow="never">
+      <div class="stats-main">
+        <!-- 固定导航栏：滚动时固定在顶部 -->
+        <div class="stats-nav-wrapper">
+          <div v-if="navFixed" ref="statsNavSpacer" class="stats-nav-spacer" :style="{ height: navHeight + 'px' }"/>
+          <div
+            ref="statsNavBar"
+            :class="['stats-nav-bar', { 'is-fixed': navFixed }]"
+            :style="navFixed ? navFixedStyle : {}">
+            <span
+              v-for="item in navItems"
+              :key="item.key"
+              :class="['nav-item', { active: activeNav === item.key }]"
+              @click="scrollToSection(item.key)">
+              {{ item.label }}
+            </span>
+          </div>
+        </div>
+        <!-- 四个板块竖排展示，每个板块独立卡片样式 -->
+        <el-card ref="sectionOverview" class="stats-section-card" shadow="never" data-section="overview">
+          <div slot="header" class="section-title">数据概览</div>
+          <div v-loading="overviewLoading" class="overview-content">
+            <template >
+              <!-- 直播数据 -->
+              <div class="overview-block">
+                <div class="overview-block-title">直播数据</div>
+                <el-row :gutter="16" class="overview-grid">
+                  <el-col :xs="24" :sm="12" :md="8" :lg="6" v-for="item in overviewItems" :key="item.key">
+                    <div class="overview-item">
+                      <div class="overview-label">{{ item.label }}</div>
+                      <div class="overview-value">{{ formatOverviewValue(overviewData[item.key]) }}</div>
+                    </div>
+                  </el-col>
+                </el-row>
+              </div>
+              <!-- 互动带货数据 -->
+              <div class="overview-block">
+                <div class="overview-block-title">互动带货数据</div>
+                <el-row :gutter="16" class="overview-grid">
+                  <el-col :xs="24" :sm="12" :md="8" :lg="6" v-for="item in interactionItems" :key="item.key">
+                    <div class="overview-item">
+                      <div class="overview-label">{{ item.label }}</div>
+                      <div class="overview-value">{{ formatOverviewValue(overviewData[item.key]) }}</div>
+                    </div>
+                  </el-col>
+                </el-row>
+              </div>
+            </template>
+          </div>
+        </el-card>
+        <el-card ref="sectionTrend" class="stats-section-card" shadow="never" data-section="trend">
+          <div slot="header" class="section-title">直播趋势</div>
+          <div v-loading="trendLoading" class="trend-chart-wrap">
+            <div  ref="trendChartRef" class="trend-chart"></div>
+          </div>
+        </el-card>
+        <el-card ref="sectionStudent" class="stats-section-card" shadow="never" data-section="student">
+          <div slot="header" class="section-title">直播间学员</div>
+          <div class="student-section">
+            <el-form :model="studentQueryParams" :inline="true" class="filter-form student-filter">
+              <el-form-item label="直播名称">
+                <el-select
+                  v-model="studentQueryParams.liveIds"
+                  multiple
+                  collapse-tags
+                  placeholder="不选则展示全部已选直播间"
+                  size="small"
+                  clearable
+                  style="width: 280px;">
+                  <el-option
+                    v-for="item in selectedLiveList"
+                    :key="item.liveId"
+                    :label="item.liveName + '（' + item.liveId + '）'"
+                    :value="item.liveId"/>
+                </el-select>
+              </el-form-item>
+              <el-form-item label="首次访问时间">
+                <el-date-picker
+                  v-model="studentFirstEntryRange"
+                  type="datetimerange"
+                  range-separator="至"
+                  start-placeholder="开始时间"
+                  end-placeholder="结束时间"
+                  value-format="yyyy-MM-dd HH:mm:ss"
+                  size="small"
+                  style="width: 340px;">
+                </el-date-picker>
+              </el-form-item>
+              <el-form-item>
+                <el-button type="primary" icon="el-icon-search" size="small" :loading="studentLoading" @click="fetchStudentList">查询</el-button>
+                <el-button icon="el-icon-refresh" size="small" @click="resetStudentQuery">重置</el-button>
+              </el-form-item>
+            </el-form>
+            <el-table
+              v-loading="studentLoading"
+              :data="studentList"
+              border
+              style="width: 100%">
+              <el-table-column label="用户名" align="center" min-width="160">
+                <template slot-scope="scope">
+                  <div class="user-name-cell">
+                    <el-avatar :size="28" :src="scope.row.avatar" icon="el-icon-user-solid"/>
+                    <el-tooltip :content="scope.row.userName" placement="top">
+                      <span class="user-name-text">{{ scope.row.userName && scope.row.userName.length > 8 ? scope.row.userName.substring(0, 8) + '...' : scope.row.userName }}</span>
+                    </el-tooltip>
+                  </div>
+                </template>
+              </el-table-column>
+              <el-table-column label="直播间名称" align="center" prop="liveName" min-width="150" show-overflow-tooltip/>
+              <el-table-column label="销售名称" align="center" prop="salesName" min-width="100" show-overflow-tooltip/>
+              <el-table-column label="用户创建时间" align="center" prop="userCreateTime" width="170"/>
+              <el-table-column label="联系方式" align="center" prop="contact" width="140"/>
+            </el-table>
+            <pagination
+              v-show="studentTotal > 0"
+              :total="studentTotal"
+              :page.sync="studentQueryParams.pageNum"
+              :limit.sync="studentQueryParams.pageSize"
+              :auto-scroll="false"
+              @pagination="fetchStudentList"
+            />
+          </div>
+        </el-card>
+        <el-card ref="sectionCompare" class="stats-section-card" shadow="never" data-section="compare">
+          <div slot="header" class="section-title">数据对比</div>
+          <div class="compare-tabs-wrap">
+            <el-radio-group v-model="compareTab" size="small" class="compare-tabs">
+              <el-radio-button label="invite">邀课对比</el-radio-button>
+              <el-radio-button label="product">商品对比</el-radio-button>
+            </el-radio-group>
+            <!-- 邀课对比 -->
+            <div v-show="compareTab === 'invite'" class="compare-panel">
+              <el-form :model="inviteCompareQueryParams" :inline="true" class="filter-form">
+                <el-form-item label="分享人">
+                  <el-select
+                    v-model="inviteCompareQueryParams.companyUserIds"
+                    multiple
+                    collapse-tags
+                    placeholder="请选择分享人（需先选择直播间并查询）"
+                    size="small"
+                    clearable
+                    style="width: 400px;">
+                    <el-option
+                      v-for="item in inviteSalesOptions"
+                      :key="(item.companyId || '') + '_' + (item.companyUserId || '')"
+                      :label="item.salesName + (item.companyName ? '（' + item.companyName + '）' : '')"
+                      :value="(item.companyId || '') + '_' + (item.companyUserId || '')"/>
+                  </el-select>
+                </el-form-item>
+                <el-form-item>
+                  <el-button type="primary" icon="el-icon-search" size="small" :loading="inviteCompareLoading" @click="fetchInviteCompareList">查询</el-button>
+                  <el-button icon="el-icon-refresh" size="small" @click="resetInviteCompareQuery">重置</el-button>
+                </el-form-item>
+              </el-form>
+              <el-table
+                v-loading="inviteCompareLoading"
+                :data="inviteCompareList"
+                border
+                style="width: 100%">
+                <el-table-column label="归属公司" align="center" prop="companyName" min-width="140" show-overflow-tooltip/>
+                <el-table-column label="销售名称" align="center" prop="salesName" min-width="120" show-overflow-tooltip/>
+                <el-table-column label="邀请人数" align="center" prop="inviteCount" width="120"/>
+                <el-table-column label="已支付订单数" align="center" prop="paidOrderCount" width="140"/>
+                <el-table-column label="订单总金额" align="center" prop="totalGmv" width="140">
+                  <template slot-scope="scope">
+                    {{ formatProductMoney(scope.row.totalGmv) }}
+                  </template>
+                </el-table-column>
+              </el-table>
+              <pagination
+                v-show="inviteCompareTotal > 0"
+                :total="inviteCompareTotal"
+                :page.sync="inviteCompareQueryParams.pageNum"
+                :limit.sync="inviteCompareQueryParams.pageSize"
+                :auto-scroll="false"
+                @pagination="fetchInviteCompareList"
+              />
+            </div>
+            <!-- 商品对比 -->
+            <div v-show="compareTab === 'product'" class="compare-panel">
+              <el-form :model="productCompareQueryParams" :inline="true" class="filter-form">
+                <el-form-item label="直播间带货的产品">
+                  <el-select
+                    v-model="productCompareQueryParams.productIds"
+                    multiple
+                    collapse-tags
+                    placeholder="请选择商品（需先选择直播间并查询）"
+                    size="small"
+                    clearable
+                    style="width: 400px;">
+                    <el-option
+                      v-for="item in liveProductOptions"
+                      :key="item.productId"
+                      :label="item.productName"
+                      :value="item.productId"/>
+                  </el-select>
+                </el-form-item>
+                <el-form-item>
+                  <el-button type="primary" icon="el-icon-search" size="small" :loading="productCompareLoading" @click="fetchProductCompareList">查询</el-button>
+                  <el-button icon="el-icon-refresh" size="small" @click="resetProductCompareQuery">重置</el-button>
+                </el-form-item>
+              </el-form>
+              <el-table
+                v-loading="productCompareLoading"
+                :data="productCompareList"
+                border
+                style="width: 100%">
+                <el-table-column label="商品名称" align="center" prop="productName" min-width="180" show-overflow-tooltip/>
+                <el-table-column label="下单未支付人数" align="center" prop="unpaidUserCount" width="140"/>
+                <el-table-column label="成交人数" align="center" prop="paidUserCount" width="120"/>
+                <el-table-column label="成交金额" align="center" prop="totalGmv" width="140">
+                  <template slot-scope="scope">
+                    {{ formatProductMoney(scope.row.totalGmv) }}
+                  </template>
+                </el-table-column>
+              </el-table>
+              <pagination
+                v-show="productCompareTotal > 0"
+                :total="productCompareTotal"
+                :page.sync="productCompareQueryParams.pageNum"
+                :limit.sync="productCompareQueryParams.pageSize"
+                :auto-scroll="false"
+                @pagination="fetchProductCompareList"
+              />
+            </div>
+          </div>
+        </el-card>
+      </div>
+    </el-card>
+
+    <!-- 选择直播间弹窗 -->
+    <el-dialog
+      title="选择直播间"
+      :visible.sync="liveSelectDialogVisible"
+      width="900px"
+      append-to-body
+      :close-on-click-modal="false"
+      @open="handleDialogOpen"
+      @close="handleDialogClose">
+      <!-- 上面：筛选条件 -->
+      <el-form :model="liveQueryParams" ref="liveQueryForm" :inline="true" label-width="100px" class="filter-form">
+        <el-form-item label="直播名称" prop="liveName">
+          <el-input
+            v-model="liveQueryParams.liveName"
+            placeholder="请输入直播名称"
+            clearable
+            size="small"
+            style="width: 160px;"
+            @keyup.enter.native="handleLiveSearch"/>
+        </el-form-item>
+        <el-form-item label="直播时间" prop="createTimeRange">
+          <el-date-picker
+            v-model="createTimeRange"
+            type="datetimerange"
+            range-separator="至"
+            start-placeholder="开始时间"
+            end-placeholder="结束时间"
+            value-format="yyyy-MM-dd HH:mm:ss"
+            size="small"
+            style="width: 340px;">
+          </el-date-picker>
+        </el-form-item>
+        <el-form-item v-if="!trainingPeriodId" label="公司名称" prop="companyName">
+          <el-input
+            v-model="liveQueryParams.companyName"
+            placeholder="请输入公司名称"
+            clearable
+            size="small"
+            style="width: 160px;"
+            @keyup.enter.native="handleLiveSearch"/>
+        </el-form-item>
+        <el-form-item label="直播状态" prop="status">
+          <el-select v-model="liveQueryParams.status" placeholder="请选择" clearable size="small" style="width: 120px;">
+            <el-option label="待直播" :value="1"></el-option>
+            <el-option label="直播中" :value="2"></el-option>
+            <el-option label="已结束" :value="3"></el-option>
+            <el-option label="直播回放中" :value="4"></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" icon="el-icon-search" size="small" @click="handleLiveSearch">搜索</el-button>
+          <el-button icon="el-icon-refresh" size="small" @click="resetLiveQuery">重置</el-button>
+        </el-form-item>
+      </el-form>
+
+      <!-- 下面：展示列表（多选，支持翻页继续选择） -->
+      <el-table
+        ref="liveTable"
+        v-loading="liveListLoading"
+        :data="liveList"
+        row-key="liveId"
+        @selection-change="handleSelectionChange"
+        border
+        max-height="400">
+        <el-table-column type="selection" width="55" align="center" reserve-selection />
+        <el-table-column label="直播ID" align="center" prop="liveId" width="100"/>
+        <el-table-column label="直播名称" align="center" prop="liveName" min-width="150" show-overflow-tooltip/>
+        <el-table-column label="直播状态" align="center" prop="status" width="120">
+          <template slot-scope="scope">
+            <el-tag v-if="scope.row.status === 1" size="small">待直播</el-tag>
+            <el-tag v-else-if="scope.row.status === 2" type="success" size="small">直播中</el-tag>
+            <el-tag v-else-if="scope.row.status === 3" type="info" size="small">已结束</el-tag>
+            <el-tag v-else-if="scope.row.status === 4" type="warning" size="small">直播回放中</el-tag>
+            <span v-else>---</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="直播公司" align="center" prop="companyName" min-width="120" show-overflow-tooltip>
+          <template slot-scope="scope">
+            {{ scope.row.companyName || '总台' }}
+          </template>
+        </el-table-column>
+      </el-table>
+
+      <pagination
+        v-show="liveTotal > 0"
+        :total="liveTotal"
+        :page.sync="liveQueryParams.pageNum"
+        :limit.sync="liveQueryParams.pageSize"
+        @pagination="getLiveList"
+      />
+
+      <div slot="footer" class="dialog-footer">
+        <span class="selected-count">已选 {{ selectedLiveList.length }}/15 个</span>
+        <el-button @click="liveSelectDialogVisible = false">取 消</el-button>
+        <el-button type="primary" @click="confirmSelectLive">确 定</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import * as echarts from 'echarts'
+import { listLive } from '@/api/live/live'
+import { listTrainingLive } from '@/api/live/trainingCamp'
+import { getLiveStatisticsOverview, getLiveEntryTrend, listLiveRoomStudents, listProductCompareStats, listInviteSalesOptions, listInviteCompareStats } from '@/api/live/liveData'
+import { listLiveGoods } from '@/api/live/liveGoods'
+
+export default {
+  name: 'LiveStatisticsPanel',
+  props: {
+    /** 若传入，则直播间选择范围仅限该营期（训练营工作台） */
+    trainingPeriodId: {
+      type: Number,
+      default: null
+    }
+  },
+  data() {
+    return {
+      // 已选择的直播间（多选）
+      selectedLiveList: [],
+      // 选择弹窗
+      liveSelectDialogVisible: false,
+      liveListLoading: false,
+      liveList: [],
+      liveTotal: 0,
+      // 直播间查询参数
+      liveQueryParams: {
+        pageNum: 1,
+        pageSize: 10,
+        liveName: null,
+        companyName: null,
+        status: null,
+        beginTime: null,
+        endTime: null
+      },
+      // 创建时间范围（用于日期选择器双向绑定）
+      createTimeRange: null,
+      // 当前激活的导航
+      activeNav: 'overview',
+      // 导航配置
+      navItems: [
+        { key: 'overview', label: '数据概览' },
+        { key: 'trend', label: '直播趋势' },
+        { key: 'student', label: '直播间学员' },
+        { key: 'compare', label: '数据对比' }
+      ],
+      // 导航栏固定
+      navFixed: false,
+      navHeight: 48,
+      navFixedStyle: {},
+      // 数据概览
+      overviewData: {},
+      overviewLoading: false,
+      // 直播趋势折线图
+      trendLoading: false,
+      trendChartData: { xAxis: [], series: [] },
+      trendChart: null,
+      // 直播间学员
+      studentList: [],
+      studentTotal: 0,
+      studentLoading: false,
+      studentQueryParams: {
+        liveIds: [],
+        pageNum: 1,
+        pageSize: 10
+      },
+      studentFirstEntryRange: null,
+      // 数据对比切换 tab：invite=邀课对比，product=商品对比
+      compareTab: 'invite',
+      // 商品对比（嵌入数据对比）
+      liveProductOptions: [],
+      productCompareList: [],
+      productCompareTotal: 0,
+      productCompareLoading: false,
+      productCompareQueryParams: {
+        productIds: [],
+        liveIds: [],
+        pageNum: 1,
+        pageSize: 10
+      },
+      // 邀课对比（嵌入数据对比）
+      inviteSalesOptions: [],
+      inviteCompareList: [],
+      inviteCompareTotal: 0,
+      inviteCompareLoading: false,
+      inviteCompareQueryParams: {
+        companyUserIds: [],
+        pageNum: 1,
+        pageSize: 10
+      }
+    }
+  },
+  computed: {
+    overviewItems() {
+      return [
+        { key: 'beforeLiveUv', label: '开播前访问人数（uv）' },
+        { key: 'totalWatchUv', label: '累计观看人数（uv）' },
+        { key: 'over10MinCount', label: '停留时长超过10分钟人数' },
+        { key: 'totalWatchMinutes', label: '总观看时长（分钟）' },
+        { key: 'avgWatchMinutes', label: '平均观看时长（分钟）' },
+        { key: 'replayWatchUv', label: '累计回放观看人数（uv）' },
+        { key: 'replayVisitPv', label: '累计回放访问人数（pv）' },
+        { key: 'replayOnlyCount', label: '仅看过回放的人数' },
+        { key: 'replayTotalMinutes', label: '回放总观看时长（分钟）' },
+        { key: 'replayAvgMinutes', label: '回放平均观看时长（分钟）' },
+        { key: 'completeCount', label: '完课人数' },
+        { key: 'subscribeCount', label: '预约人数' }
+      ]
+    },
+    interactionItems() {
+      return [
+        { key: 'lotteryCount', label: '抽奖次数' },
+        { key: 'lotteryJoinCount', label: '参与抽奖人数' },
+        { key: 'lotteryWinCount', label: '中奖人数' },
+        { key: 'paidUserCount', label: '支付点击人数' },
+        { key: 'unpaidUserCount', label: '未支付人数' },
+        { key: 'totalGmv', label: '总成交金额' },
+        { key: 'totalProductQty', label: '商品总销量' }
+      ]
+    },
+    headerOffset() {
+      const fixed = this.$store.state.settings.fixedHeader
+      const tagsView = this.$store.state.settings.tagsView
+      if (fixed && tagsView) return 84
+      if (fixed) return 50
+      return 0
+    },
+    displayedLives() {
+      return this.selectedLiveList.slice(0, 7)
+    },
+    hasTrendData() {
+      return this.trendChartData.xAxis && this.trendChartData.xAxis.length > 0
+    }
+  },
+  watch: {
+    trainingPeriodId() {
+      this.handleClearLive()
+      if (this.liveSelectDialogVisible) {
+        this.liveQueryParams.pageNum = 1
+        this.getLiveList()
+      }
+    }
+  },
+  mounted() {
+    this.$nextTick(() => this.measureNavHeight())
+    window.addEventListener('scroll', this.handleNavScroll, { passive: true })
+    window.addEventListener('resize', this.handleNavScroll)
+    window.addEventListener('resize', this.handleTrendChartResize)
+    this.trendChartData = this.getDefaultTrendData()
+    this.$nextTick(() => setTimeout(() => this.renderTrendChart(), 100))
+  },
+  beforeDestroy() {
+    window.removeEventListener('scroll', this.handleNavScroll)
+    window.removeEventListener('resize', this.handleNavScroll)
+    window.removeEventListener('resize', this.handleTrendChartResize)
+    if (this.trendChart) {
+      this.trendChart.dispose()
+      this.trendChart = null
+    }
+  },
+  methods: {
+    openLiveSelectDialog() {
+      this.liveSelectDialogVisible = true
+    },
+    handleClearLive() {
+      this.selectedLiveList = []
+      this.studentList = []
+      this.studentTotal = 0
+      this.studentQueryParams.liveIds = []
+      this.studentFirstEntryRange = null
+      this.liveProductOptions = []
+      this.productCompareList = []
+      this.productCompareTotal = 0
+      this.productCompareQueryParams.productIds = []
+      if (this.trendChart) {
+        this.trendChart.dispose()
+        this.trendChart = null
+      }
+      this.trendChartData = { xAxis: [], series: [] }
+      this.overviewData = {}
+      this.$nextTick(() => {
+        const table = this.$refs.liveTable
+        if (table && typeof table.clearSelection === 'function') {
+          table.clearSelection()
+        }
+        this.handleTrendChartResize()
+      })
+    },
+    handleDialogOpen() {
+      this.getLiveList()
+    },
+    handleDialogClose() {
+      this.resetLiveQuery()
+    },
+    handleLiveSearch() {
+      this.liveQueryParams.pageNum = 1
+      this.getLiveList()
+    },
+    resetLiveQuery() {
+      this.liveQueryParams = {
+        pageNum: 1,
+        pageSize: 10,
+        liveName: null,
+        companyName: null,
+        status: null,
+        beginTime: null,
+        endTime: null
+      }
+      this.createTimeRange = null
+    },
+    getLiveList() {
+      const params = { ...this.liveQueryParams }
+      if (this.createTimeRange && this.createTimeRange.length === 2) {
+        params.beginTime = this.createTimeRange[0]
+        params.endTime = this.createTimeRange[1]
+      }
+      this.liveListLoading = true
+      const req = this.trainingPeriodId != null
+        ? listTrainingLive({ ...params, trainingPeriodId: this.trainingPeriodId })
+        : listLive(params)
+      req.then(res => {
+        this.liveList = res.rows || []
+        this.liveTotal = res.total || 0
+        this.liveListLoading = false
+        this.$nextTick(() => this.setTableSelection())
+      }).catch(() => {
+        this.liveListLoading = false
+      })
+    },
+    handleSelectionChange(selection) {
+      if (selection && selection.length > 15) {
+        this.$message.warning('最多只能选择15个直播间')
+        this.$nextTick(() => this.setTableSelection())
+      } else {
+        this.selectedLiveList = selection || []
+      }
+    },
+    setTableSelection() {
+      this.$nextTick(() => {
+        const table = this.$refs.liveTable
+        if (!table || !this.liveList.length) return
+        const selectedIds = new Set(this.selectedLiveList.map(l => l.liveId))
+        this.liveList.forEach(row => {
+          table.toggleRowSelection(row, selectedIds.has(row.liveId))
+        })
+      })
+    },
+    confirmSelectLive() {
+      this.liveSelectDialogVisible = false
+      // 默认不选直播名称=展示全部已选直播间的人数
+    },
+    formatProductMoney(val) {
+      if (val === undefined || val === null) return '¥0.00'
+      const num = typeof val === 'number' ? val : parseFloat(val)
+      return '¥' + (isNaN(num) ? '0.00' : num.toFixed(2))
+    },
+    fetchLiveProductsForSelectedLives() {
+      const liveIds = (this.selectedLiveList || []).map(l => l.liveId)
+      if (!liveIds.length) {
+        this.liveProductOptions = []
+        return
+      }
+      const promises = liveIds.map(liveId => listLiveGoods({ liveId }).then(res => (res.rows || res.data?.rows || [])))
+      Promise.all(promises).then(results => {
+        const productMap = new Map()
+        results.flat().forEach(item => {
+          const pid = item.productId
+          if (pid && !productMap.has(pid)) {
+            productMap.set(pid, { productId: pid, productName: item.productName || item.name || '未知商品' })
+          }
+        })
+        this.liveProductOptions = Array.from(productMap.values())
+      }).catch(() => {
+        this.liveProductOptions = []
+      })
+    },
+    fetchProductCompareList() {
+      const liveIds = (this.selectedLiveList || []).map(l => l.liveId)
+      if (!liveIds.length) {
+        this.$message.warning('请先选择直播间')
+        return
+      }
+      const params = {
+        liveIds,
+        productIds: this.productCompareQueryParams.productIds,
+        pageNum: this.productCompareQueryParams.pageNum,
+        pageSize: this.productCompareQueryParams.pageSize
+      }
+      this.productCompareLoading = true
+      listProductCompareStats(params).then(res => {
+        this.productCompareList = res.rows || res.data?.rows || []
+        this.productCompareTotal = res.total || res.data?.total || 0
+        this.productCompareLoading = false
+      }).catch(() => {
+        this.productCompareLoading = false
+      })
+    },
+    resetProductCompareQuery() {
+      this.productCompareQueryParams.productIds = []
+      this.productCompareQueryParams.pageNum = 1
+      this.productCompareQueryParams.pageSize = 10
+      this.fetchProductCompareList()
+    },
+    fetchInviteSalesOptions() {
+      const liveIds = (this.selectedLiveList || []).map(l => l.liveId)
+      if (!liveIds.length) {
+        this.inviteSalesOptions = []
+        return
+      }
+      listInviteSalesOptions(liveIds).then(res => {
+        const data = res.data || res || []
+        this.inviteSalesOptions = Array.isArray(data) ? data : []
+      }).catch(() => {
+        this.inviteSalesOptions = []
+      })
+    },
+    fetchInviteCompareList() {
+      const liveIds = (this.selectedLiveList || []).map(l => l.liveId)
+      if (!liveIds.length) {
+        this.$message.warning('请先选择直播间')
+        return
+      }
+      const rawIds = this.inviteCompareQueryParams.companyUserIds || []
+      const companyUserIds = rawIds.map(v => {
+        if (typeof v === 'string' && v.includes('_')) {
+          return parseInt(v.split('_')[1], 10)
+        }
+        return typeof v === 'number' ? v : parseInt(v, 10)
+      }).filter(id => !isNaN(id))
+      const params = {
+        liveIds,
+        companyUserIds: companyUserIds.length ? companyUserIds : undefined,
+        pageNum: this.inviteCompareQueryParams.pageNum,
+        pageSize: this.inviteCompareQueryParams.pageSize
+      }
+      this.inviteCompareLoading = true
+      listInviteCompareStats(params).then(res => {
+        this.inviteCompareList = res.rows || res.data?.rows || []
+        this.inviteCompareTotal = res.total || res.data?.total || 0
+        this.inviteCompareLoading = false
+      }).catch(() => {
+        this.inviteCompareLoading = false
+      })
+    },
+    resetInviteCompareQuery() {
+      this.inviteCompareQueryParams.companyUserIds = []
+      this.inviteCompareQueryParams.pageNum = 1
+      this.inviteCompareQueryParams.pageSize = 10
+      this.fetchInviteCompareList()
+    },
+    fetchOverview() {
+      const liveIds = (this.selectedLiveList || []).map(l => l.liveId)
+      if (!liveIds.length) {
+        this.overviewData = {}
+        this.trendChartData = { xAxis: [], series: [] }
+        if (this.trendChart) {
+          this.trendChart.dispose()
+          this.trendChart = null
+        }
+        return
+      }
+      this.overviewLoading = true
+      getLiveStatisticsOverview(liveIds).then(res => {
+        this.overviewData = res.data || res || {}
+        this.overviewLoading = false
+        this.fetchTrend()
+        // 直播间学员：默认不选直播名称，自动查询全部已选直播间的用户
+        this.studentQueryParams.liveIds = []
+        this.studentFirstEntryRange = null
+        this.studentQueryParams.pageNum = 1
+        this.fetchStudentList()
+        // 商品对比：加载已选直播间的带货产品
+        this.fetchLiveProductsForSelectedLives()
+        // 邀课对比：加载已选直播间的分享人选项
+        this.fetchInviteSalesOptions()
+      }).catch(() => {
+        this.overviewLoading = false
+      })
+    },
+    fetchTrend() {
+      const liveIds = (this.selectedLiveList || []).map(l => l.liveId)
+      if (!liveIds.length) {
+        this.trendChartData = this.getDefaultTrendData()
+        this.$nextTick(() => {
+          setTimeout(() => this.renderTrendChart(), 150)
+        })
+        return
+      }
+      this.trendLoading = true
+      getLiveEntryTrend(liveIds).then(res => {
+        // 兼容多种返回格式: { code, msg, data: { xAxis, series } } 或 { data: [series] } 或 { xAxis, series }
+        const body = res && typeof res === 'object' && res.data !== undefined ? res.data : res
+        let xAxis = []
+        let series = []
+        const dataObj = body && typeof body === 'object' ? body : null
+        if (Array.isArray(body) && body.length > 0) {
+          series = body
+        } else if (dataObj && Array.isArray(dataObj.series) && dataObj.series.length > 0) {
+          xAxis = Array.isArray(dataObj.xAxis) ? dataObj.xAxis : []
+          series = dataObj.series
+        } else if (dataObj && Array.isArray(dataObj.data) && dataObj.data.length > 0) {
+          series = dataObj.data
+        } else if (dataObj && Array.isArray(dataObj.rows) && dataObj.rows.length > 0) {
+          series = dataObj.rows
+        }
+        series = Array.isArray(series) ? series : []
+        if (series.length && (!Array.isArray(xAxis) || !xAxis.length) && series[0] && Array.isArray(series[0].data)) {
+          const len = series[0].data.length
+          xAxis = ['开播前']
+          for (let m = 0; m < len - 1; m++) xAxis.push((m * 5) + 'min')
+        }
+        if (!series.length) {
+          this.trendChartData = this.getDefaultTrendData()
+        } else {
+          if (!xAxis.length) xAxis = this.getDefaultTrendData().xAxis
+          this.trendChartData = { xAxis, series }
+        }
+        this.trendLoading = false
+        this.$nextTick(() => {
+          setTimeout(() => {
+            this.renderTrendChart()
+            this.$nextTick(() => { if (this.trendChart) this.trendChart.resize() })
+          }, 80)
+        })
+      }).catch(() => {
+        this.trendChartData = this.getDefaultTrendData()
+        this.trendLoading = false
+        this.$nextTick(() => {
+          setTimeout(() => {
+            this.renderTrendChart()
+            this.$nextTick(() => {
+              if (this.trendChart) this.trendChart.resize()
+            })
+          }, 150)
+        })
+      })
+    },
+    getDefaultTrendData() {
+      const xAxis = ['开播前']
+      for (let m = 0; m <= 240; m += 5) {
+        xAxis.push(m + 'min')
+      }
+      const zeros = xAxis.map(() => 0)
+      return {
+        xAxis,
+        series: [{ name: '进入人数', data: zeros }]
+      }
+    },
+    renderTrendChart() {
+      const el = this.$refs.trendChartRef
+      if (!el) return
+      let xAxis = this.trendChartData.xAxis && Array.isArray(this.trendChartData.xAxis) ? this.trendChartData.xAxis : []
+      const series = this.trendChartData.series && Array.isArray(this.trendChartData.series) ? this.trendChartData.series : []
+      if (!series.length) return
+      if (!xAxis.length && series[0] && series[0].data) {
+        const len = series[0].data.length
+        xAxis = ['开播前']
+        for (let m = 0; m < len - 1; m++) xAxis.push((m * 5) + 'min')
+      }
+      if (!xAxis.length) xAxis = this.getDefaultTrendData().xAxis
+      if (this.trendChart) this.trendChart.dispose()
+      this.trendChart = echarts.init(el)
+      const option = {
+        title: { text: '相对直播开始时间的累计进入人数', left: 'center' },
+        tooltip: { trigger: 'axis' },
+        legend: { bottom: 0, type: 'scroll' },
+        grid: { left: '3%', right: '4%', bottom: '15%', top: 40, containLabel: true },
+        xAxis: { type: 'category', boundaryGap: false, data: xAxis },
+        yAxis: { type: 'value', name: '累计进入人数' },
+        series: series.map((s, i) => ({
+          name: s.name,
+          type: 'line',
+          smooth: true,
+          data: s.data || []
+        }))
+      }
+      this.trendChart.setOption(option)
+      this.$nextTick(() => {
+        if (this.trendChart) this.trendChart.resize()
+      })
+    },
+    handleTrendChartResize() {
+      if (this.trendChart) this.trendChart.resize()
+    },
+    fetchStudentList() {
+      const liveIds = this.studentQueryParams.liveIds && this.studentQueryParams.liveIds.length > 0
+        ? this.studentQueryParams.liveIds
+        : (this.selectedLiveList || []).map(l => l.liveId)
+      if (!liveIds.length) {
+        this.studentList = []
+        this.studentTotal = 0
+        return
+      }
+      const params = {
+        liveIds,
+        pageNum: this.studentQueryParams.pageNum || 1,
+        pageSize: this.studentQueryParams.pageSize || 10
+      }
+      if (this.studentFirstEntryRange && this.studentFirstEntryRange.length === 2) {
+        params.firstEntryTimeBegin = this.studentFirstEntryRange[0]
+        params.firstEntryTimeEnd = this.studentFirstEntryRange[1]
+      }
+      this.studentLoading = true
+      listLiveRoomStudents(params).then(res => {
+        this.studentList = res.rows || []
+        this.studentTotal = res.total || 0
+        this.studentLoading = false
+      }).catch(() => {
+        this.studentLoading = false
+      })
+    },
+    resetStudentQuery() {
+      this.studentQueryParams.liveIds = []
+      this.studentQueryParams.pageNum = 1
+      this.studentQueryParams.pageSize = 10
+      this.studentFirstEntryRange = null
+      this.fetchStudentList()
+    },
+    formatOverviewValue(val) {
+      if (val === undefined || val === null) return '0'
+      if (typeof val === 'number' && !Number.isInteger(val)) return Number(val).toFixed(2)
+      return String(val)
+    },
+    measureNavHeight() {
+      const nav = this.$refs.statsNavBar
+      if (nav) {
+        this.navHeight = nav.offsetHeight || 48
+      }
+    },
+    handleNavScroll() {
+      const nav = this.$refs.statsNavBar
+      const card = this.$refs.statsCard
+      if (!nav || !card) return
+
+      if (this.navFixed) {
+        const spacer = this.$refs.statsNavSpacer
+        if (spacer) {
+          const rect = spacer.getBoundingClientRect()
+          if (rect.top >= this.headerOffset) {
+            this.navFixed = false
+            this.navFixedStyle = {}
+          }
+        }
+      } else {
+        const rect = nav.getBoundingClientRect()
+        if (rect.top <= this.headerOffset) {
+          const cardRect = card.$el ? card.$el.getBoundingClientRect() : card.getBoundingClientRect()
+          this.navFixedStyle = {
+            left: cardRect.left + 'px',
+            top: this.headerOffset + 'px',
+            width: cardRect.width + 'px'
+          }
+          this.navFixed = true
+        }
+      }
+    },
+    scrollToSection(key) {
+      this.activeNav = key
+      const refMap = {
+        overview: 'sectionOverview',
+        trend: 'sectionTrend',
+        student: 'sectionStudent',
+        compare: 'sectionCompare'
+      }
+      const el = this.$refs[refMap[key]]
+      if (el && el.$el) {
+        el.$el.scrollIntoView({ behavior: 'smooth', block: 'start' })
+      } else if (el) {
+        el.scrollIntoView({ behavior: 'smooth', block: 'start' })
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+.live-select-input {
+  display: flex;
+  align-items: flex-start;
+  width: 100%;
+  min-width: 200px;
+  min-height: 32px;
+  padding: 6px 12px;
+  border: 1px solid #DCDFE6;
+  border-radius: 4px;
+  cursor: pointer;
+  background: #fff;
+  overflow: hidden;
+}
+.live-select-input:hover {
+  border-color: #C0C4CC;
+}
+.live-select-content {
+  flex: 1;
+  display: flex;
+  flex-wrap: wrap;
+  align-content: flex-start;
+  align-items: center;
+  gap: 6px 8px;
+  min-height: 22px;
+  min-width: 0;
+  overflow: hidden;
+}
+.live-select-content .placeholder {
+  color: #C0C4CC;
+  font-size: 14px;
+}
+.live-tag {
+  display: inline-block;
+  padding: 0 8px;
+  height: 22px;
+  line-height: 22px;
+  font-size: 12px;
+  color: #606266;
+  background: #f4f4f5;
+  border-radius: 4px;
+}
+.tag-sep {
+  color: #909399;
+  margin: 0 2px;
+}
+.fold-text {
+  font-size: 12px;
+  color: #909399;
+}
+.live-select-suffix {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding-left: 10px;
+}
+.live-select-suffix i {
+  color: #C0C4CC;
+  font-size: 14px;
+  cursor: pointer;
+}
+.live-select-suffix i:hover {
+  color: #909399;
+}
+.stats-main {
+  padding-top: 0;
+}
+.stats-nav-wrapper {
+  position: relative;
+}
+.stats-nav-spacer {
+  flex-shrink: 0;
+}
+.stats-nav-bar {
+  position: relative;
+  z-index: 100;
+  display: flex;
+  width: 100%;
+  flex: 1 1 auto;
+  background: #fff;
+  border-bottom: 1px solid #ebeef5;
+  margin: 0 -20px 20px -20px;
+  padding: 0;
+  box-shadow: 0 1px 2px rgba(0,0,0,0.03);
+}
+.stats-nav-bar.is-fixed {
+  position: fixed;
+  margin: 0;
+  left: 0;
+  right: 0;
+  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
+}
+.stats-nav-bar .nav-item {
+  flex: 1;
+  text-align: center;
+  padding: 14px 12px;
+  font-size: 14px;
+  color: #606266;
+  cursor: pointer;
+  border-bottom: 2px solid transparent;
+  margin-bottom: -1px;
+  transition: all 0.2s;
+}
+.stats-nav-bar .nav-item:hover {
+  color: #409EFF;
+}
+.stats-nav-bar .nav-item.active {
+  color: #409EFF;
+  font-weight: 500;
+  border-bottom-color: #409EFF;
+}
+.overview-content {
+  min-height: 120px;
+}
+.overview-grid {
+  margin-top: 8px;
+}
+.overview-item {
+  padding: 12px 16px;
+  margin-bottom: 12px;
+  background: #fafafa;
+  border-radius: 4px;
+  border-left: 3px solid #409EFF;
+  border: 1px solid #ebeef5;
+}
+.overview-label {
+  font-size: 13px;
+  color: #909399;
+  margin-bottom: 6px;
+  line-height: 1.4;
+}
+.overview-value {
+  font-size: 18px;
+  font-weight: 600;
+  color: #303133;
+}
+.overview-block {
+  margin-bottom: 24px;
+}
+.overview-block:last-child {
+  margin-bottom: 0;
+}
+.overview-block-title {
+  font-size: 14px;
+  font-weight: 600;
+  color: #303133;
+  margin-bottom: 12px;
+  padding-bottom: 8px;
+  border-bottom: 1px solid #ebeef5;
+}
+.stats-section-card {
+  margin-bottom: 30px;
+  /* 固定导航时：顶部 84px + 导航栏 ~48px ≈ 132，留足空间避免遮挡 */
+  scroll-margin-top: 140px;
+}
+.stats-section-card:last-child {
+  margin-bottom: 0;
+}
+.stats-section {
+  min-height: 300px;
+  padding: 20px 0;
+}
+.stats-section .section-title {
+  font-size: 16px;
+  font-weight: 500;
+  color: #303133;
+  margin-bottom: 16px;
+  padding-bottom: 12px;
+  padding-left: 10px;
+  border-bottom: 1px solid #ebeef5;
+  border-left: 3px solid #67C23A;
+}
+.box-card {
+  margin-bottom: 20px;
+}
+.filter-form {
+  margin-bottom: 16px;
+  padding-bottom: 16px;
+  border-bottom: 1px solid #ebeef5;
+}
+.dialog-footer {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 12px;
+}
+.dialog-footer .selected-count {
+  margin-right: auto;
+  font-size: 13px;
+  color: #606266;
+}
+.trend-chart-wrap {
+  min-height: 320px;
+}
+.trend-chart {
+  width: 100%;
+  height: 360px;
+}
+.student-section {
+  min-height: 200px;
+}
+.student-filter {
+  margin-bottom: 16px;
+}
+.user-name-cell {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+}
+.user-name-cell .user-name-text {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.overview-content {
+  min-height: 120px;
+}
+.overview-grid {
+  margin-top: 0;
+}
+.overview-item {
+  padding: 12px 16px;
+  margin-bottom: 12px;
+  background: #fafafa;
+  border-radius: 4px;
+  border: 1px solid #ebeef5;
+}
+.overview-label {
+  font-size: 13px;
+  color: #909399;
+  margin-bottom: 8px;
+  line-height: 1.4;
+}
+.overview-value {
+  font-size: 18px;
+  font-weight: 600;
+  color: #303133;
+}
+.compare-tabs-wrap {
+  padding-top: 4px;
+}
+.compare-tabs {
+  margin-bottom: 16px;
+}
+.compare-panel {
+  min-height: 200px;
+}
+</style>

src/views/live/liveStatistics/index.vue

@@ -1,1175 +1,12 @@
 <template>
-  <div class="app-container">
-    <!-- 左上角：选择直播间（多选，最多展示8个，多余折叠）+ 查询按钮 -->
-    <el-row :gutter="10" class="mb8">
-      <el-col :span="1.5">
-        <div
-          class="live-select-input"
-          @click="openLiveSelectDialog">
-          <div class="live-select-content">
-            <template v-if="selectedLiveList.length === 0">
-              <span class="placeholder">请选择直播间</span>
-            </template>
-            <template v-else>
-              <template v-for="(item, idx) in displayedLives">
-                <span :key="item.liveId" class="live-tag">{{ item.liveName }}（{{ item.liveId }}）</span>
-                <span v-if="idx < displayedLives.length - 1 || selectedLiveList.length > 7" class="tag-sep">、</span>
-              </template>
-              <span v-if="selectedLiveList.length > 7" class="fold-text">等{{ selectedLiveList.length }}个</span>
-            </template>
-          </div>
-          <div class="live-select-suffix">
-            <i v-if="selectedLiveList.length > 0" class="el-icon-circle-close" @click.stop="handleClearLive"></i>
-            <i class="el-icon-arrow-down"></i>
-          </div>
-        </div>
-      </el-col>
-      <el-col :span="1">
-        <el-button
-          type="primary"
-          icon="el-icon-search"
-          size="small"
-          :loading="overviewLoading"
-          :disabled="selectedLiveList.length === 0"
-          @click="fetchOverview">
-          查询
-        </el-button>
-      </el-col>
-    </el-row>
-
-    <el-card ref="statsCard" class="box-card" shadow="never">
-      <div class="stats-main">
-        <!-- 固定导航栏：滚动时固定在顶部 -->
-        <div class="stats-nav-wrapper">
-          <div v-if="navFixed" ref="statsNavSpacer" class="stats-nav-spacer" :style="{ height: navHeight + 'px' }"/>
-          <div
-            ref="statsNavBar"
-            :class="['stats-nav-bar', { 'is-fixed': navFixed }]"
-            :style="navFixed ? navFixedStyle : {}">
-            <span
-              v-for="item in navItems"
-              :key="item.key"
-              :class="['nav-item', { active: activeNav === item.key }]"
-              @click="scrollToSection(item.key)">
-              {{ item.label }}
-            </span>
-          </div>
-        </div>
-        <!-- 四个板块竖排展示，每个板块独立卡片样式 -->
-        <el-card ref="sectionOverview" class="stats-section-card" shadow="never" data-section="overview">
-          <div slot="header" class="section-title">数据概览</div>
-          <div v-loading="overviewLoading" class="overview-content">
-            <template >
-              <!-- 直播数据 -->
-              <div class="overview-block">
-                <div class="overview-block-title">直播数据</div>
-                <el-row :gutter="16" class="overview-grid">
-                  <el-col :xs="24" :sm="12" :md="8" :lg="6" v-for="item in overviewItems" :key="item.key">
-                    <div class="overview-item">
-                      <div class="overview-label">{{ item.label }}</div>
-                      <div class="overview-value">{{ formatOverviewValue(overviewData[item.key]) }}</div>
-                    </div>
-                  </el-col>
-                </el-row>
-              </div>
-              <!-- 互动带货数据 -->
-              <div class="overview-block">
-                <div class="overview-block-title">互动带货数据</div>
-                <el-row :gutter="16" class="overview-grid">
-                  <el-col :xs="24" :sm="12" :md="8" :lg="6" v-for="item in interactionItems" :key="item.key">
-                    <div class="overview-item">
-                      <div class="overview-label">{{ item.label }}</div>
-                      <div class="overview-value">{{ formatOverviewValue(overviewData[item.key]) }}</div>
-                    </div>
-                  </el-col>
-                </el-row>
-              </div>
-            </template>
-          </div>
-        </el-card>
-        <el-card ref="sectionTrend" class="stats-section-card" shadow="never" data-section="trend">
-          <div slot="header" class="section-title">直播趋势</div>
-          <div v-loading="trendLoading" class="trend-chart-wrap">
-            <div  ref="trendChartRef" class="trend-chart"></div>
-          </div>
-        </el-card>
-        <el-card ref="sectionStudent" class="stats-section-card" shadow="never" data-section="student">
-          <div slot="header" class="section-title">直播间学员</div>
-          <div class="student-section">
-            <el-form :model="studentQueryParams" :inline="true" class="filter-form student-filter">
-              <el-form-item label="直播名称">
-                <el-select
-                  v-model="studentQueryParams.liveIds"
-                  multiple
-                  collapse-tags
-                  placeholder="不选则展示全部已选直播间"
-                  size="small"
-                  clearable
-                  style="width: 280px;">
-                  <el-option
-                    v-for="item in selectedLiveList"
-                    :key="item.liveId"
-                    :label="item.liveName + '（' + item.liveId + '）'"
-                    :value="item.liveId"/>
-                </el-select>
-              </el-form-item>
-              <el-form-item label="首次访问时间">
-                <el-date-picker
-                  v-model="studentFirstEntryRange"
-                  type="datetimerange"
-                  range-separator="至"
-                  start-placeholder="开始时间"
-                  end-placeholder="结束时间"
-                  value-format="yyyy-MM-dd HH:mm:ss"
-                  size="small"
-                  style="width: 340px;">
-                </el-date-picker>
-              </el-form-item>
-              <el-form-item>
-                <el-button type="primary" icon="el-icon-search" size="small" :loading="studentLoading" @click="fetchStudentList">查询</el-button>
-                <el-button icon="el-icon-refresh" size="small" @click="resetStudentQuery">重置</el-button>
-              </el-form-item>
-            </el-form>
-            <el-table
-              v-loading="studentLoading"
-              :data="studentList"
-              border
-              style="width: 100%">
-              <el-table-column label="用户名" align="center" min-width="160">
-                <template slot-scope="scope">
-                  <div class="user-name-cell">
-                    <el-avatar :size="28" :src="scope.row.avatar" icon="el-icon-user-solid"/>
-                    <el-tooltip :content="scope.row.userName" placement="top">
-                      <span class="user-name-text">{{ scope.row.userName && scope.row.userName.length > 8 ? scope.row.userName.substring(0, 8) + '...' : scope.row.userName }}</span>
-                    </el-tooltip>
-                  </div>
-                </template>
-              </el-table-column>
-              <el-table-column label="直播间名称" align="center" prop="liveName" min-width="150" show-overflow-tooltip/>
-              <el-table-column label="销售名称" align="center" prop="salesName" min-width="100" show-overflow-tooltip/>
-              <el-table-column label="用户创建时间" align="center" prop="userCreateTime" width="170"/>
-              <el-table-column label="联系方式" align="center" prop="contact" width="140"/>
-            </el-table>
-            <pagination
-              v-show="studentTotal > 0"
-              :total="studentTotal"
-              :page.sync="studentQueryParams.pageNum"
-              :limit.sync="studentQueryParams.pageSize"
-              :auto-scroll="false"
-              @pagination="fetchStudentList"
-            />
-          </div>
-        </el-card>
-        <el-card ref="sectionCompare" class="stats-section-card" shadow="never" data-section="compare">
-          <div slot="header" class="section-title">数据对比</div>
-          <div class="compare-tabs-wrap">
-            <el-radio-group v-model="compareTab" size="small" class="compare-tabs">
-              <el-radio-button label="invite">邀课对比</el-radio-button>
-              <el-radio-button label="product">商品对比</el-radio-button>
-            </el-radio-group>
-            <!-- 邀课对比 -->
-            <div v-show="compareTab === 'invite'" class="compare-panel">
-              <el-form :model="inviteCompareQueryParams" :inline="true" class="filter-form">
-                <el-form-item label="分享人">
-                  <el-select
-                    v-model="inviteCompareQueryParams.companyUserIds"
-                    multiple
-                    collapse-tags
-                    placeholder="请选择分享人（需先选择直播间并查询）"
-                    size="small"
-                    clearable
-                    style="width: 400px;">
-                    <el-option
-                      v-for="item in inviteSalesOptions"
-                      :key="(item.companyId || '') + '_' + (item.companyUserId || '')"
-                      :label="item.salesName + (item.companyName ? '（' + item.companyName + '）' : '')"
-                      :value="(item.companyId || '') + '_' + (item.companyUserId || '')"/>
-                  </el-select>
-                </el-form-item>
-                <el-form-item>
-                  <el-button type="primary" icon="el-icon-search" size="small" :loading="inviteCompareLoading" @click="fetchInviteCompareList">查询</el-button>
-                  <el-button icon="el-icon-refresh" size="small" @click="resetInviteCompareQuery">重置</el-button>
-                </el-form-item>
-              </el-form>
-              <el-table
-                v-loading="inviteCompareLoading"
-                :data="inviteCompareList"
-                border
-                style="width: 100%">
-                <el-table-column label="归属公司" align="center" prop="companyName" min-width="140" show-overflow-tooltip/>
-                <el-table-column label="销售名称" align="center" prop="salesName" min-width="120" show-overflow-tooltip/>
-                <el-table-column label="邀请人数" align="center" prop="inviteCount" width="120"/>
-                <el-table-column label="已支付订单数" align="center" prop="paidOrderCount" width="140"/>
-                <el-table-column label="订单总金额" align="center" prop="totalGmv" width="140">
-                  <template slot-scope="scope">
-                    {{ formatProductMoney(scope.row.totalGmv) }}
-                  </template>
-                </el-table-column>
-              </el-table>
-              <pagination
-                v-show="inviteCompareTotal > 0"
-                :total="inviteCompareTotal"
-                :page.sync="inviteCompareQueryParams.pageNum"
-                :limit.sync="inviteCompareQueryParams.pageSize"
-                :auto-scroll="false"
-                @pagination="fetchInviteCompareList"
-              />
-            </div>
-            <!-- 商品对比 -->
-            <div v-show="compareTab === 'product'" class="compare-panel">
-              <el-form :model="productCompareQueryParams" :inline="true" class="filter-form">
-                <el-form-item label="直播间带货的产品">
-                  <el-select
-                    v-model="productCompareQueryParams.productIds"
-                    multiple
-                    collapse-tags
-                    placeholder="请选择商品（需先选择直播间并查询）"
-                    size="small"
-                    clearable
-                    style="width: 400px;">
-                    <el-option
-                      v-for="item in liveProductOptions"
-                      :key="item.productId"
-                      :label="item.productName"
-                      :value="item.productId"/>
-                  </el-select>
-                </el-form-item>
-                <el-form-item>
-                  <el-button type="primary" icon="el-icon-search" size="small" :loading="productCompareLoading" @click="fetchProductCompareList">查询</el-button>
-                  <el-button icon="el-icon-refresh" size="small" @click="resetProductCompareQuery">重置</el-button>
-                </el-form-item>
-              </el-form>
-              <el-table
-                v-loading="productCompareLoading"
-                :data="productCompareList"
-                border
-                style="width: 100%">
-                <el-table-column label="商品名称" align="center" prop="productName" min-width="180" show-overflow-tooltip/>
-                <el-table-column label="下单未支付人数" align="center" prop="unpaidUserCount" width="140"/>
-                <el-table-column label="成交人数" align="center" prop="paidUserCount" width="120"/>
-                <el-table-column label="成交金额" align="center" prop="totalGmv" width="140">
-                  <template slot-scope="scope">
-                    {{ formatProductMoney(scope.row.totalGmv) }}
-                  </template>
-                </el-table-column>
-              </el-table>
-              <pagination
-                v-show="productCompareTotal > 0"
-                :total="productCompareTotal"
-                :page.sync="productCompareQueryParams.pageNum"
-                :limit.sync="productCompareQueryParams.pageSize"
-                :auto-scroll="false"
-                @pagination="fetchProductCompareList"
-              />
-            </div>
-          </div>
-        </el-card>
-      </div>
-    </el-card>
-
-    <!-- 选择直播间弹窗 -->
-    <el-dialog
-      title="选择直播间"
-      :visible.sync="liveSelectDialogVisible"
-      width="900px"
-      append-to-body
-      :close-on-click-modal="false"
-      @open="handleDialogOpen"
-      @close="handleDialogClose">
-      <!-- 上面：筛选条件 -->
-      <el-form :model="liveQueryParams" ref="liveQueryForm" :inline="true" label-width="100px" class="filter-form">
-        <el-form-item label="直播名称" prop="liveName">
-          <el-input
-            v-model="liveQueryParams.liveName"
-            placeholder="请输入直播名称"
-            clearable
-            size="small"
-            style="width: 160px;"
-            @keyup.enter.native="handleLiveSearch"/>
-        </el-form-item>
-        <el-form-item label="直播时间" prop="createTimeRange">
-          <el-date-picker
-            v-model="createTimeRange"
-            type="datetimerange"
-            range-separator="至"
-            start-placeholder="开始时间"
-            end-placeholder="结束时间"
-            value-format="yyyy-MM-dd HH:mm:ss"
-            size="small"
-            style="width: 340px;">
-          </el-date-picker>
-        </el-form-item>
-        <el-form-item label="公司名称" prop="companyName">
-          <el-input
-            v-model="liveQueryParams.companyName"
-            placeholder="请输入公司名称"
-            clearable
-            size="small"
-            style="width: 160px;"
-            @keyup.enter.native="handleLiveSearch"/>
-        </el-form-item>
-        <el-form-item label="直播状态" prop="status">
-          <el-select v-model="liveQueryParams.status" placeholder="请选择" clearable size="small" style="width: 120px;">
-            <el-option label="待直播" :value="1"></el-option>
-            <el-option label="直播中" :value="2"></el-option>
-            <el-option label="已结束" :value="3"></el-option>
-            <el-option label="直播回放中" :value="4"></el-option>
-          </el-select>
-        </el-form-item>
-        <el-form-item>
-          <el-button type="primary" icon="el-icon-search" size="small" @click="handleLiveSearch">搜索</el-button>
-          <el-button icon="el-icon-refresh" size="small" @click="resetLiveQuery">重置</el-button>
-        </el-form-item>
-      </el-form>
-
-      <!-- 下面：展示列表（多选，支持翻页继续选择） -->
-      <el-table
-        ref="liveTable"
-        v-loading="liveListLoading"
-        :data="liveList"
-        row-key="liveId"
-        @selection-change="handleSelectionChange"
-        border
-        max-height="400">
-        <el-table-column type="selection" width="55" align="center" reserve-selection />
-        <el-table-column label="直播ID" align="center" prop="liveId" width="100"/>
-        <el-table-column label="直播名称" align="center" prop="liveName" min-width="150" show-overflow-tooltip/>
-        <el-table-column label="直播状态" align="center" prop="status" width="120">
-          <template slot-scope="scope">
-            <el-tag v-if="scope.row.status === 1" size="small">待直播</el-tag>
-            <el-tag v-else-if="scope.row.status === 2" type="success" size="small">直播中</el-tag>
-            <el-tag v-else-if="scope.row.status === 3" type="info" size="small">已结束</el-tag>
-            <el-tag v-else-if="scope.row.status === 4" type="warning" size="small">直播回放中</el-tag>
-            <span v-else>---</span>
-          </template>
-        </el-table-column>
-        <el-table-column label="直播公司" align="center" prop="companyName" min-width="120" show-overflow-tooltip>
-          <template slot-scope="scope">
-            {{ scope.row.companyName || '总台' }}
-          </template>
-        </el-table-column>
-      </el-table>
-
-      <pagination
-        v-show="liveTotal > 0"
-        :total="liveTotal"
-        :page.sync="liveQueryParams.pageNum"
-        :limit.sync="liveQueryParams.pageSize"
-        @pagination="getLiveList"
-      />
-
-      <div slot="footer" class="dialog-footer">
-        <span class="selected-count">已选 {{ selectedLiveList.length }}/15 个</span>
-        <el-button @click="liveSelectDialogVisible = false">取 消</el-button>
-        <el-button type="primary" @click="confirmSelectLive">确 定</el-button>
-      </div>
-    </el-dialog>
-  </div>
+  <live-statistics-panel />
 </template>
 
 <script>
-import * as echarts from 'echarts'
-import { listLive } from '@/api/live/live'
-import { getLiveStatisticsOverview, getLiveEntryTrend, listLiveRoomStudents, listProductCompareStats, listInviteSalesOptions, listInviteCompareStats } from '@/api/live/liveData'
-import { listLiveGoods } from '@/api/live/liveGoods'
+import LiveStatisticsPanel from './LiveStatisticsPanel.vue'
 
 export default {
   name: 'LiveStatistics',
-  data() {
-    return {
-      // 已选择的直播间（多选）
-      selectedLiveList: [],
-      // 选择弹窗
-      liveSelectDialogVisible: false,
-      liveListLoading: false,
-      liveList: [],
-      liveTotal: 0,
-      // 直播间查询参数
-      liveQueryParams: {
-        pageNum: 1,
-        pageSize: 10,
-        liveName: null,
-        companyName: null,
-        status: null,
-        beginTime: null,
-        endTime: null
-      },
-      // 创建时间范围（用于日期选择器双向绑定）
-      createTimeRange: null,
-      // 当前激活的导航
-      activeNav: 'overview',
-      // 导航配置
-      navItems: [
-        { key: 'overview', label: '数据概览' },
-        { key: 'trend', label: '直播趋势' },
-        { key: 'student', label: '直播间学员' },
-        { key: 'compare', label: '数据对比' }
-      ],
-      // 导航栏固定
-      navFixed: false,
-      navHeight: 48,
-      navFixedStyle: {},
-      // 数据概览
-      overviewData: {},
-      overviewLoading: false,
-      // 直播趋势折线图
-      trendLoading: false,
-      trendChartData: { xAxis: [], series: [] },
-      trendChart: null,
-      // 直播间学员
-      studentList: [],
-      studentTotal: 0,
-      studentLoading: false,
-      studentQueryParams: {
-        liveIds: [],
-        pageNum: 1,
-        pageSize: 10
-      },
-      studentFirstEntryRange: null,
-      // 数据对比切换 tab：invite=邀课对比，product=商品对比
-      compareTab: 'invite',
-      // 商品对比（嵌入数据对比）
-      liveProductOptions: [],
-      productCompareList: [],
-      productCompareTotal: 0,
-      productCompareLoading: false,
-      productCompareQueryParams: {
-        productIds: [],
-        liveIds: [],
-        pageNum: 1,
-        pageSize: 10
-      },
-      // 邀课对比（嵌入数据对比）
-      inviteSalesOptions: [],
-      inviteCompareList: [],
-      inviteCompareTotal: 0,
-      inviteCompareLoading: false,
-      inviteCompareQueryParams: {
-        companyUserIds: [],
-        pageNum: 1,
-        pageSize: 10
-      }
-    }
-  },
-  computed: {
-    overviewItems() {
-      return [
-        { key: 'beforeLiveUv', label: '开播前访问人数（uv）' },
-        { key: 'totalWatchUv', label: '累计观看人数（uv）' },
-        { key: 'over10MinCount', label: '停留时长超过10分钟人数' },
-        { key: 'totalWatchMinutes', label: '总观看时长（分钟）' },
-        { key: 'avgWatchMinutes', label: '平均观看时长（分钟）' },
-        { key: 'replayWatchUv', label: '累计回放观看人数（uv）' },
-        { key: 'replayVisitPv', label: '累计回放访问人数（pv）' },
-        { key: 'replayOnlyCount', label: '仅看过回放的人数' },
-        { key: 'replayTotalMinutes', label: '回放总观看时长（分钟）' },
-        { key: 'replayAvgMinutes', label: '回放平均观看时长（分钟）' },
-        { key: 'completeCount', label: '完课人数' },
-        { key: 'subscribeCount', label: '预约人数' }
-      ]
-    },
-    interactionItems() {
-      return [
-        { key: 'lotteryCount', label: '抽奖次数' },
-        { key: 'lotteryJoinCount', label: '参与抽奖人数' },
-        { key: 'lotteryWinCount', label: '中奖人数' },
-        { key: 'paidUserCount', label: '支付点击人数' },
-        { key: 'unpaidUserCount', label: '未支付人数' },
-        { key: 'totalGmv', label: '总成交金额' },
-        { key: 'totalProductQty', label: '商品总销量' }
-      ]
-    },
-    headerOffset() {
-      const fixed = this.$store.state.settings.fixedHeader
-      const tagsView = this.$store.state.settings.tagsView
-      if (fixed && tagsView) return 84
-      if (fixed) return 50
-      return 0
-    },
-    displayedLives() {
-      return this.selectedLiveList.slice(0, 7)
-    },
-    hasTrendData() {
-      return this.trendChartData.xAxis && this.trendChartData.xAxis.length > 0
-    }
-  },
-  mounted() {
-    this.$nextTick(() => this.measureNavHeight())
-    window.addEventListener('scroll', this.handleNavScroll, { passive: true })
-    window.addEventListener('resize', this.handleNavScroll)
-    window.addEventListener('resize', this.handleTrendChartResize)
-    this.trendChartData = this.getDefaultTrendData()
-    this.$nextTick(() => setTimeout(() => this.renderTrendChart(), 100))
-  },
-  beforeDestroy() {
-    window.removeEventListener('scroll', this.handleNavScroll)
-    window.removeEventListener('resize', this.handleNavScroll)
-    window.removeEventListener('resize', this.handleTrendChartResize)
-    if (this.trendChart) {
-      this.trendChart.dispose()
-      this.trendChart = null
-    }
-  },
-  methods: {
-    openLiveSelectDialog() {
-      this.liveSelectDialogVisible = true
-    },
-    handleClearLive() {
-      this.selectedLiveList = []
-      this.studentList = []
-      this.studentTotal = 0
-      this.studentQueryParams.liveIds = []
-      this.studentFirstEntryRange = null
-      this.liveProductOptions = []
-      this.productCompareList = []
-      this.productCompareTotal = 0
-      this.productCompareQueryParams.productIds = []
-      if (this.trendChart) {
-        this.trendChart.dispose()
-        this.trendChart = null
-      }
-      this.trendChartData = { xAxis: [], series: [] }
-      this.overviewData = {}
-      this.$nextTick(() => {
-        const table = this.$refs.liveTable
-        if (table && typeof table.clearSelection === 'function') {
-          table.clearSelection()
-        }
-        this.handleTrendChartResize()
-      })
-    },
-    handleDialogOpen() {
-      this.getLiveList()
-    },
-    handleDialogClose() {
-      this.resetLiveQuery()
-    },
-    handleLiveSearch() {
-      this.liveQueryParams.pageNum = 1
-      this.getLiveList()
-    },
-    resetLiveQuery() {
-      this.liveQueryParams = {
-        pageNum: 1,
-        pageSize: 10,
-        liveName: null,
-        companyName: null,
-        status: null,
-        beginTime: null,
-        endTime: null
-      }
-      this.createTimeRange = null
-    },
-    getLiveList() {
-      const params = { ...this.liveQueryParams }
-      if (this.createTimeRange && this.createTimeRange.length === 2) {
-        params.beginTime = this.createTimeRange[0]
-        params.endTime = this.createTimeRange[1]
-      }
-      this.liveListLoading = true
-      listLive(params).then(res => {
-        this.liveList = res.rows || []
-        this.liveTotal = res.total || 0
-        this.liveListLoading = false
-        this.$nextTick(() => this.setTableSelection())
-      }).catch(() => {
-        this.liveListLoading = false
-      })
-    },
-    handleSelectionChange(selection) {
-      if (selection && selection.length > 15) {
-        this.$message.warning('最多只能选择15个直播间')
-        this.$nextTick(() => this.setTableSelection())
-      } else {
-        this.selectedLiveList = selection || []
-      }
-    },
-    setTableSelection() {
-      this.$nextTick(() => {
-        const table = this.$refs.liveTable
-        if (!table || !this.liveList.length) return
-        const selectedIds = new Set(this.selectedLiveList.map(l => l.liveId))
-        this.liveList.forEach(row => {
-          table.toggleRowSelection(row, selectedIds.has(row.liveId))
-        })
-      })
-    },
-    confirmSelectLive() {
-      this.liveSelectDialogVisible = false
-      // 默认不选直播名称=展示全部已选直播间的人数
-    },
-    formatProductMoney(val) {
-      if (val === undefined || val === null) return '¥0.00'
-      const num = typeof val === 'number' ? val : parseFloat(val)
-      return '¥' + (isNaN(num) ? '0.00' : num.toFixed(2))
-    },
-    fetchLiveProductsForSelectedLives() {
-      const liveIds = (this.selectedLiveList || []).map(l => l.liveId)
-      if (!liveIds.length) {
-        this.liveProductOptions = []
-        return
-      }
-      const promises = liveIds.map(liveId => listLiveGoods({ liveId }).then(res => (res.rows || res.data?.rows || [])))
-      Promise.all(promises).then(results => {
-        const productMap = new Map()
-        results.flat().forEach(item => {
-          const pid = item.productId
-          if (pid && !productMap.has(pid)) {
-            productMap.set(pid, { productId: pid, productName: item.productName || item.name || '未知商品' })
-          }
-        })
-        this.liveProductOptions = Array.from(productMap.values())
-      }).catch(() => {
-        this.liveProductOptions = []
-      })
-    },
-    fetchProductCompareList() {
-      const liveIds = (this.selectedLiveList || []).map(l => l.liveId)
-      if (!liveIds.length) {
-        this.$message.warning('请先选择直播间')
-        return
-      }
-      const params = {
-        liveIds,
-        productIds: this.productCompareQueryParams.productIds,
-        pageNum: this.productCompareQueryParams.pageNum,
-        pageSize: this.productCompareQueryParams.pageSize
-      }
-      this.productCompareLoading = true
-      listProductCompareStats(params).then(res => {
-        this.productCompareList = res.rows || res.data?.rows || []
-        this.productCompareTotal = res.total || res.data?.total || 0
-        this.productCompareLoading = false
-      }).catch(() => {
-        this.productCompareLoading = false
-      })
-    },
-    resetProductCompareQuery() {
-      this.productCompareQueryParams.productIds = []
-      this.productCompareQueryParams.pageNum = 1
-      this.productCompareQueryParams.pageSize = 10
-      this.fetchProductCompareList()
-    },
-    fetchInviteSalesOptions() {
-      const liveIds = (this.selectedLiveList || []).map(l => l.liveId)
-      if (!liveIds.length) {
-        this.inviteSalesOptions = []
-        return
-      }
-      listInviteSalesOptions(liveIds).then(res => {
-        const data = res.data || res || []
-        this.inviteSalesOptions = Array.isArray(data) ? data : []
-      }).catch(() => {
-        this.inviteSalesOptions = []
-      })
-    },
-    fetchInviteCompareList() {
-      const liveIds = (this.selectedLiveList || []).map(l => l.liveId)
-      if (!liveIds.length) {
-        this.$message.warning('请先选择直播间')
-        return
-      }
-      const rawIds = this.inviteCompareQueryParams.companyUserIds || []
-      const companyUserIds = rawIds.map(v => {
-        if (typeof v === 'string' && v.includes('_')) {
-          return parseInt(v.split('_')[1], 10)
-        }
-        return typeof v === 'number' ? v : parseInt(v, 10)
-      }).filter(id => !isNaN(id))
-      const params = {
-        liveIds,
-        companyUserIds: companyUserIds.length ? companyUserIds : undefined,
-        pageNum: this.inviteCompareQueryParams.pageNum,
-        pageSize: this.inviteCompareQueryParams.pageSize
-      }
-      this.inviteCompareLoading = true
-      listInviteCompareStats(params).then(res => {
-        this.inviteCompareList = res.rows || res.data?.rows || []
-        this.inviteCompareTotal = res.total || res.data?.total || 0
-        this.inviteCompareLoading = false
-      }).catch(() => {
-        this.inviteCompareLoading = false
-      })
-    },
-    resetInviteCompareQuery() {
-      this.inviteCompareQueryParams.companyUserIds = []
-      this.inviteCompareQueryParams.pageNum = 1
-      this.inviteCompareQueryParams.pageSize = 10
-      this.fetchInviteCompareList()
-    },
-    fetchOverview() {
-      const liveIds = (this.selectedLiveList || []).map(l => l.liveId)
-      if (!liveIds.length) {
-        this.overviewData = {}
-        this.trendChartData = { xAxis: [], series: [] }
-        if (this.trendChart) {
-          this.trendChart.dispose()
-          this.trendChart = null
-        }
-        return
-      }
-      this.overviewLoading = true
-      getLiveStatisticsOverview(liveIds).then(res => {
-        this.overviewData = res.data || res || {}
-        this.overviewLoading = false
-        this.fetchTrend()
-        // 直播间学员：默认不选直播名称，自动查询全部已选直播间的用户
-        this.studentQueryParams.liveIds = []
-        this.studentFirstEntryRange = null
-        this.studentQueryParams.pageNum = 1
-        this.fetchStudentList()
-        // 商品对比：加载已选直播间的带货产品
-        this.fetchLiveProductsForSelectedLives()
-        // 邀课对比：加载已选直播间的分享人选项
-        this.fetchInviteSalesOptions()
-      }).catch(() => {
-        this.overviewLoading = false
-      })
-    },
-    fetchTrend() {
-      const liveIds = (this.selectedLiveList || []).map(l => l.liveId)
-      if (!liveIds.length) {
-        this.trendChartData = this.getDefaultTrendData()
-        this.$nextTick(() => {
-          setTimeout(() => this.renderTrendChart(), 150)
-        })
-        return
-      }
-      this.trendLoading = true
-      getLiveEntryTrend(liveIds).then(res => {
-        // 兼容多种返回格式: { code, msg, data: { xAxis, series } } 或 { data: [series] } 或 { xAxis, series }
-        const body = res && typeof res === 'object' && res.data !== undefined ? res.data : res
-        let xAxis = []
-        let series = []
-        const dataObj = body && typeof body === 'object' ? body : null
-        if (Array.isArray(body) && body.length > 0) {
-          series = body
-        } else if (dataObj && Array.isArray(dataObj.series) && dataObj.series.length > 0) {
-          xAxis = Array.isArray(dataObj.xAxis) ? dataObj.xAxis : []
-          series = dataObj.series
-        } else if (dataObj && Array.isArray(dataObj.data) && dataObj.data.length > 0) {
-          series = dataObj.data
-        } else if (dataObj && Array.isArray(dataObj.rows) && dataObj.rows.length > 0) {
-          series = dataObj.rows
-        }
-        series = Array.isArray(series) ? series : []
-        if (series.length && (!Array.isArray(xAxis) || !xAxis.length) && series[0] && Array.isArray(series[0].data)) {
-          const len = series[0].data.length
-          xAxis = ['开播前']
-          for (let m = 0; m < len - 1; m++) xAxis.push((m * 5) + 'min')
-        }
-        if (!series.length) {
-          this.trendChartData = this.getDefaultTrendData()
-        } else {
-          if (!xAxis.length) xAxis = this.getDefaultTrendData().xAxis
-          this.trendChartData = { xAxis, series }
-        }
-        this.trendLoading = false
-        this.$nextTick(() => {
-          setTimeout(() => {
-            this.renderTrendChart()
-            this.$nextTick(() => { if (this.trendChart) this.trendChart.resize() })
-          }, 80)
-        })
-      }).catch(() => {
-        this.trendChartData = this.getDefaultTrendData()
-        this.trendLoading = false
-        this.$nextTick(() => {
-          setTimeout(() => {
-            this.renderTrendChart()
-            this.$nextTick(() => {
-              if (this.trendChart) this.trendChart.resize()
-            })
-          }, 150)
-        })
-      })
-    },
-    getDefaultTrendData() {
-      const xAxis = ['开播前']
-      for (let m = 0; m <= 240; m += 5) {
-        xAxis.push(m + 'min')
-      }
-      const zeros = xAxis.map(() => 0)
-      return {
-        xAxis,
-        series: [{ name: '进入人数', data: zeros }]
-      }
-    },
-    renderTrendChart() {
-      const el = this.$refs.trendChartRef
-      if (!el) return
-      let xAxis = this.trendChartData.xAxis && Array.isArray(this.trendChartData.xAxis) ? this.trendChartData.xAxis : []
-      const series = this.trendChartData.series && Array.isArray(this.trendChartData.series) ? this.trendChartData.series : []
-      if (!series.length) return
-      if (!xAxis.length && series[0] && series[0].data) {
-        const len = series[0].data.length
-        xAxis = ['开播前']
-        for (let m = 0; m < len - 1; m++) xAxis.push((m * 5) + 'min')
-      }
-      if (!xAxis.length) xAxis = this.getDefaultTrendData().xAxis
-      if (this.trendChart) this.trendChart.dispose()
-      this.trendChart = echarts.init(el)
-      const option = {
-        title: { text: '相对直播开始时间的累计进入人数', left: 'center' },
-        tooltip: { trigger: 'axis' },
-        legend: { bottom: 0, type: 'scroll' },
-        grid: { left: '3%', right: '4%', bottom: '15%', top: 40, containLabel: true },
-        xAxis: { type: 'category', boundaryGap: false, data: xAxis },
-        yAxis: { type: 'value', name: '累计进入人数' },
-        series: series.map((s, i) => ({
-          name: s.name,
-          type: 'line',
-          smooth: true,
-          data: s.data || []
-        }))
-      }
-      this.trendChart.setOption(option)
-      this.$nextTick(() => {
-        if (this.trendChart) this.trendChart.resize()
-      })
-    },
-    handleTrendChartResize() {
-      if (this.trendChart) this.trendChart.resize()
-    },
-    fetchStudentList() {
-      const liveIds = this.studentQueryParams.liveIds && this.studentQueryParams.liveIds.length > 0
-        ? this.studentQueryParams.liveIds
-        : (this.selectedLiveList || []).map(l => l.liveId)
-      if (!liveIds.length) {
-        this.studentList = []
-        this.studentTotal = 0
-        return
-      }
-      const params = {
-        liveIds,
-        pageNum: this.studentQueryParams.pageNum || 1,
-        pageSize: this.studentQueryParams.pageSize || 10
-      }
-      if (this.studentFirstEntryRange && this.studentFirstEntryRange.length === 2) {
-        params.firstEntryTimeBegin = this.studentFirstEntryRange[0]
-        params.firstEntryTimeEnd = this.studentFirstEntryRange[1]
-      }
-      this.studentLoading = true
-      listLiveRoomStudents(params).then(res => {
-        this.studentList = res.rows || []
-        this.studentTotal = res.total || 0
-        this.studentLoading = false
-      }).catch(() => {
-        this.studentLoading = false
-      })
-    },
-    resetStudentQuery() {
-      this.studentQueryParams.liveIds = []
-      this.studentQueryParams.pageNum = 1
-      this.studentQueryParams.pageSize = 10
-      this.studentFirstEntryRange = null
-      this.fetchStudentList()
-    },
-    formatOverviewValue(val) {
-      if (val === undefined || val === null) return '0'
-      if (typeof val === 'number' && !Number.isInteger(val)) return Number(val).toFixed(2)
-      return String(val)
-    },
-    measureNavHeight() {
-      const nav = this.$refs.statsNavBar
-      if (nav) {
-        this.navHeight = nav.offsetHeight || 48
-      }
-    },
-    handleNavScroll() {
-      const nav = this.$refs.statsNavBar
-      const card = this.$refs.statsCard
-      if (!nav || !card) return
-
-      if (this.navFixed) {
-        const spacer = this.$refs.statsNavSpacer
-        if (spacer) {
-          const rect = spacer.getBoundingClientRect()
-          if (rect.top >= this.headerOffset) {
-            this.navFixed = false
-            this.navFixedStyle = {}
-          }
-        }
-      } else {
-        const rect = nav.getBoundingClientRect()
-        if (rect.top <= this.headerOffset) {
-          const cardRect = card.$el ? card.$el.getBoundingClientRect() : card.getBoundingClientRect()
-          this.navFixedStyle = {
-            left: cardRect.left + 'px',
-            top: this.headerOffset + 'px',
-            width: cardRect.width + 'px'
-          }
-          this.navFixed = true
-        }
-      }
-    },
-    scrollToSection(key) {
-      this.activeNav = key
-      const refMap = {
-        overview: 'sectionOverview',
-        trend: 'sectionTrend',
-        student: 'sectionStudent',
-        compare: 'sectionCompare'
-      }
-      const el = this.$refs[refMap[key]]
-      if (el && el.$el) {
-        el.$el.scrollIntoView({ behavior: 'smooth', block: 'start' })
-      } else if (el) {
-        el.scrollIntoView({ behavior: 'smooth', block: 'start' })
-      }
-    }
-  }
+  components: { LiveStatisticsPanel }
 }
 </script>
-
-<style scoped>
-.live-select-input {
-  display: flex;
-  align-items: flex-start;
-  width: 100%;
-  min-width: 200px;
-  min-height: 32px;
-  padding: 6px 12px;
-  border: 1px solid #DCDFE6;
-  border-radius: 4px;
-  cursor: pointer;
-  background: #fff;
-  overflow: hidden;
-}
-.live-select-input:hover {
-  border-color: #C0C4CC;
-}
-.live-select-content {
-  flex: 1;
-  display: flex;
-  flex-wrap: wrap;
-  align-content: flex-start;
-  align-items: center;
-  gap: 6px 8px;
-  min-height: 22px;
-  min-width: 0;
-  overflow: hidden;
-}
-.live-select-content .placeholder {
-  color: #C0C4CC;
-  font-size: 14px;
-}
-.live-tag {
-  display: inline-block;
-  padding: 0 8px;
-  height: 22px;
-  line-height: 22px;
-  font-size: 12px;
-  color: #606266;
-  background: #f4f4f5;
-  border-radius: 4px;
-}
-.tag-sep {
-  color: #909399;
-  margin: 0 2px;
-}
-.fold-text {
-  font-size: 12px;
-  color: #909399;
-}
-.live-select-suffix {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  padding-left: 10px;
-}
-.live-select-suffix i {
-  color: #C0C4CC;
-  font-size: 14px;
-  cursor: pointer;
-}
-.live-select-suffix i:hover {
-  color: #909399;
-}
-.stats-main {
-  padding-top: 0;
-}
-.stats-nav-wrapper {
-  position: relative;
-}
-.stats-nav-spacer {
-  flex-shrink: 0;
-}
-.stats-nav-bar {
-  position: relative;
-  z-index: 100;
-  display: flex;
-  width: 100%;
-  flex: 1 1 auto;
-  background: #fff;
-  border-bottom: 1px solid #ebeef5;
-  margin: 0 -20px 20px -20px;
-  padding: 0;
-  box-shadow: 0 1px 2px rgba(0,0,0,0.03);
-}
-.stats-nav-bar.is-fixed {
-  position: fixed;
-  margin: 0;
-  left: 0;
-  right: 0;
-  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
-}
-.stats-nav-bar .nav-item {
-  flex: 1;
-  text-align: center;
-  padding: 14px 12px;
-  font-size: 14px;
-  color: #606266;
-  cursor: pointer;
-  border-bottom: 2px solid transparent;
-  margin-bottom: -1px;
-  transition: all 0.2s;
-}
-.stats-nav-bar .nav-item:hover {
-  color: #409EFF;
-}
-.stats-nav-bar .nav-item.active {
-  color: #409EFF;
-  font-weight: 500;
-  border-bottom-color: #409EFF;
-}
-.overview-content {
-  min-height: 120px;
-}
-.overview-grid {
-  margin-top: 8px;
-}
-.overview-item {
-  padding: 12px 16px;
-  margin-bottom: 12px;
-  background: #fafafa;
-  border-radius: 4px;
-  border-left: 3px solid #409EFF;
-  border: 1px solid #ebeef5;
-}
-.overview-label {
-  font-size: 13px;
-  color: #909399;
-  margin-bottom: 6px;
-  line-height: 1.4;
-}
-.overview-value {
-  font-size: 18px;
-  font-weight: 600;
-  color: #303133;
-}
-.overview-block {
-  margin-bottom: 24px;
-}
-.overview-block:last-child {
-  margin-bottom: 0;
-}
-.overview-block-title {
-  font-size: 14px;
-  font-weight: 600;
-  color: #303133;
-  margin-bottom: 12px;
-  padding-bottom: 8px;
-  border-bottom: 1px solid #ebeef5;
-}
-.stats-section-card {
-  margin-bottom: 30px;
-  /* 固定导航时：顶部 84px + 导航栏 ~48px ≈ 132，留足空间避免遮挡 */
-  scroll-margin-top: 140px;
-}
-.stats-section-card:last-child {
-  margin-bottom: 0;
-}
-.stats-section {
-  min-height: 300px;
-  padding: 20px 0;
-}
-.stats-section .section-title {
-  font-size: 16px;
-  font-weight: 500;
-  color: #303133;
-  margin-bottom: 16px;
-  padding-bottom: 12px;
-  padding-left: 10px;
-  border-bottom: 1px solid #ebeef5;
-  border-left: 3px solid #67C23A;
-}
-.box-card {
-  margin-bottom: 20px;
-}
-.filter-form {
-  margin-bottom: 16px;
-  padding-bottom: 16px;
-  border-bottom: 1px solid #ebeef5;
-}
-.dialog-footer {
-  display: flex;
-  align-items: center;
-  justify-content: flex-end;
-  gap: 12px;
-}
-.dialog-footer .selected-count {
-  margin-right: auto;
-  font-size: 13px;
-  color: #606266;
-}
-.trend-chart-wrap {
-  min-height: 320px;
-}
-.trend-chart {
-  width: 100%;
-  height: 360px;
-}
-.student-section {
-  min-height: 200px;
-}
-.student-filter {
-  margin-bottom: 16px;
-}
-.user-name-cell {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 8px;
-}
-.user-name-cell .user-name-text {
-  flex: 1;
-  min-width: 0;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-.overview-content {
-  min-height: 120px;
-}
-.overview-grid {
-  margin-top: 0;
-}
-.overview-item {
-  padding: 12px 16px;
-  margin-bottom: 12px;
-  background: #fafafa;
-  border-radius: 4px;
-  border: 1px solid #ebeef5;
-}
-.overview-label {
-  font-size: 13px;
-  color: #909399;
-  margin-bottom: 8px;
-  line-height: 1.4;
-}
-.overview-value {
-  font-size: 18px;
-  font-weight: 600;
-  color: #303133;
-}
-.compare-tabs-wrap {
-  padding-top: 4px;
-}
-.compare-tabs {
-  margin-bottom: 16px;
-}
-.compare-panel {
-  min-height: 200px;
-}
-</style>

src/views/live/trainingCamp/PeriodWorkspace.vue

@@ -0,0 +1,302 @@
+<template>
+  <div class="app-container period-workspace">
+    <el-page-header
+      class="workspace-page-header"
+      @back="$emit('back')"
+      content="返回营期列表"
+    />
+    <el-card class="period-info-card" shadow="never">
+      <div class="period-info-body">
+        <div class="period-info-main">
+          <h2 class="period-info-name">{{ workspace.periodName || '—' }}</h2>
+          <p class="period-info-line">
+            <span class="label">开始时间</span>
+            <span class="value">{{ formatPeriodTime(workspace.startTime) }}</span>
+          </p>
+          <p class="period-info-line">
+            <span class="label">结束时间</span>
+            <span class="value">{{ formatPeriodTime(workspace.endTime) }}</span>
+          </p>
+          <p v-if="workspace.campName" class="period-info-line camp">
+            <span class="label">所属训练营</span>
+            <span class="value">{{ workspace.campName }}</span>
+          </p>
+        </div>
+        <div class="period-info-cover-col">
+          <el-image
+            v-if="workspace.periodImgUrl"
+            :src="workspace.periodImgUrl"
+            fit="cover"
+            class="period-info-cover-img"
+            :preview-src-list="[workspace.periodImgUrl]"
+          >
+            <div slot="error" class="period-info-cover-placeholder">
+              <span>加载失败</span>
+            </div>
+          </el-image>
+          <div v-else class="period-info-cover-placeholder">
+            <i class="el-icon-picture-outline" />
+            <span>暂无营期图片</span>
+          </div>
+        </div>
+      </div>
+    </el-card>
+    <el-tabs v-model="activeTab" class="workspace-tabs">
+      <el-tab-pane label="直播间" name="live">
+        <el-row class="mb8">
+          <el-col :span="24" align="right">
+            <el-button
+              v-hasPermi="['live:live:add', 'live:trainingCamp:live:add']"
+              type="primary"
+              plain
+              icon="el-icon-plus"
+              size="mini"
+              @click="$emit('add-live')"
+            >新增</el-button>
+          </el-col>
+        </el-row>
+        <el-table
+          v-loading="liveLoading"
+          :data="liveList"
+          border
+          size="small"
+        >
+          <el-table-column label="直播间ID" prop="liveId" width="100" align="center" show-overflow-tooltip />
+          <el-table-column label="直播名称" prop="liveName" min-width="140" show-overflow-tooltip />
+          
+          <el-table-column label="开始时间" min-width="158" align="center" show-overflow-tooltip>
+            <template slot-scope="scope">{{ formatPeriodTime(scope.row.startTime) }}</template>
+          </el-table-column>
+          <el-table-column label="结束时间" min-width="158" align="center" show-overflow-tooltip>
+            <template slot-scope="scope">{{ formatPeriodTime(scope.row.finishTime) }}</template>
+          </el-table-column>
+          <el-table-column label="状态" width="96" align="center">
+            <template slot-scope="scope">
+              <el-tag v-if="scope.row.status == 1" size="mini">待直播</el-tag>
+              <el-tag v-else-if="scope.row.status == 2" size="mini" type="danger">直播中</el-tag>
+              <el-tag v-else-if="scope.row.status == 3" size="mini" type="info">已结束</el-tag>
+              <el-tag v-else-if="scope.row.status == 4" size="mini" type="success">回放中</el-tag>
+              <span v-else>—</span>
+            </template>
+          </el-table-column>
+          <el-table-column label="操作" width="200" align="center" fixed="right">
+            <template slot-scope="scope">
+              <el-button
+                v-hasPermi="['live:live:edit']"
+                type="text"
+                size="mini"
+                icon="el-icon-edit"
+                @click="$emit('edit-live', scope.row)"
+              >修改</el-button>
+              <el-button
+                v-hasPermi="['live:live:query']"
+                type="text"
+                size="mini"
+                @click="goLiveConfig(scope.row)"
+              >配置</el-button>
+              <el-button
+                type="text"
+                size="mini"
+                @click="openConsole(scope.row)"
+              >控制台</el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+        <pagination
+          v-show="liveTotal > 0"
+          small
+          :total="liveTotal"
+          :page.sync="liveQuery.pageNum"
+          :limit.sync="liveQuery.pageSize"
+          @pagination="loadLiveList"
+        />
+      </el-tab-pane>
+      <el-tab-pane label="数据概览" name="overview">
+        <live-statistics-panel
+          v-if="activeTab === 'overview' && workspace.periodId"
+          :training-period-id="workspace.periodId"
+          :key="'camp-stats-' + workspace.periodId"
+        />
+      </el-tab-pane>
+    </el-tabs>
+  </div>
+</template>
+
+<script>
+import { listTrainingLive } from '@/api/live/trainingCamp'
+import LiveStatisticsPanel from '@/views/live/liveStatistics/LiveStatisticsPanel.vue'
+
+export default {
+  name: 'PeriodWorkspace',
+  components: { LiveStatisticsPanel },
+  props: {
+    workspace: {
+      type: Object,
+      required: true,
+      default: () => ({
+        periodId: null,
+        periodName: '',
+        campName: '',
+        periodImgUrl: '',
+        startTime: null,
+        endTime: null
+      })
+    }
+  },
+  data() {
+    return {
+      activeTab: 'live',
+      liveLoading: false,
+      liveList: [],
+      liveTotal: 0,
+      liveQuery: { pageNum: 1, pageSize: 10 }
+    }
+  },
+  watch: {
+    workspace: {
+      deep: true,
+      immediate: true,
+      handler(val) {
+        if (val && val.periodId) {
+          this.liveQuery.pageNum = 1
+          this.activeTab = 'live'
+          this.loadLiveList()
+        } else {
+          this.liveList = []
+          this.liveTotal = 0
+        }
+      }
+    }
+  },
+  methods: {
+    formatPeriodTime(val) {
+      if (!val) return '—'
+      const s = String(val).replace('T', ' ')
+      if (s.length >= 19) {
+        return s.slice(0, 10) + ' ' + s.slice(11, 19)
+      }
+      return s.length >= 16 ? s.slice(0, 16) : s
+    },
+    loadLiveList() {
+      if (!this.workspace.periodId) return
+      this.liveLoading = true
+      listTrainingLive({
+        ...this.liveQuery,
+        trainingPeriodId: this.workspace.periodId
+      }).then(res => {
+        this.liveList = res.rows || []
+        this.liveTotal = res.total || 0
+        this.liveLoading = false
+      }).catch(() => {
+        this.liveLoading = false
+      })
+    },
+    /** 父组件在新建直播间成功后调用 */
+    refreshLiveList() {
+      this.loadLiveList()
+    },
+    goLiveConfig(row) {
+      this.$router.push('/live/liveConfig/' + row.liveId)
+    },
+    openConsole(row) {
+      const r = this.$router.resolve({ path: '/live/liveConsole/' + row.liveId })
+      window.open(r.href, '_blank')
+    }
+  }
+}
+</script>
+
+<style scoped>
+.workspace-page-header {
+  margin-bottom: 16px;
+}
+.period-info-card {
+  margin-bottom: 16px;
+  border-radius: 8px;
+}
+.period-info-card >>> .el-card__body {
+  padding: 20px 24px;
+}
+.period-info-body {
+  display: flex;
+  align-items: stretch;
+  justify-content: space-between;
+  gap: 24px;
+  min-height: 132px;
+}
+.period-info-main {
+  flex: 1;
+  min-width: 0;
+}
+.period-info-name {
+  margin: 0 0 16px 0;
+  font-size: 20px;
+  font-weight: 600;
+  color: #303133;
+  line-height: 1.3;
+}
+.period-info-line {
+  margin: 0 0 10px 0;
+  font-size: 14px;
+  color: #606266;
+  line-height: 1.5;
+}
+.period-info-line:last-child {
+  margin-bottom: 0;
+}
+.period-info-line .label {
+  display: inline-block;
+  width: 88px;
+  color: #909399;
+}
+.period-info-line .value {
+  color: #303133;
+}
+.period-info-line.camp .value {
+  font-weight: 500;
+}
+.period-info-cover-col {
+  flex-shrink: 0;
+  width: 220px;
+  height: 132px;
+}
+.period-info-cover-img {
+  width: 220px;
+  height: 132px;
+  border-radius: 8px;
+  border: 1px solid #ebeef5;
+  overflow: hidden;
+}
+.period-info-cover-img >>> .el-image__inner {
+  width: 220px;
+  height: 132px;
+  object-fit: cover;
+}
+.period-info-cover-placeholder {
+  width: 220px;
+  height: 132px;
+  border-radius: 8px;
+  border: 1px dashed #dcdfe6;
+  background: #fafafa;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  color: #c0c4cc;
+  font-size: 13px;
+}
+.period-info-cover-placeholder i {
+  font-size: 36px;
+}
+.workspace-tabs {
+  margin-top: 8px;
+}
+/* 数据概览内嵌统计页：避免双层 app-container 顶距过大 */
+.workspace-tabs >>> .live-statistics-panel-root.app-container {
+  padding-top: 0;
+}
+.mb8 {
+  margin-bottom: 8px;
+}
+</style>

src/views/live/trainingCamp/index.vue

@@ -0,0 +1,809 @@
+<template>
+  <div class="training-camp-root">
+    <!-- 训练营列表：左侧 30% + 营期 70% -->
+    <div v-show="!periodWorkspace.periodId" class="app-container training-camp-page">
+      <el-alert
+        title="训练营直播间与普通直播相互独立：此处仅管理「训练营 → 营期」；进入营期后在「直播间」页签中管理直播。普通直播仍在「直播管理」中维护。"
+        type="info"
+        :closable="false"
+        show-icon
+        class="mb12"
+      />
+
+      <el-row :gutter="16">
+        <el-col :span="7">
+          <el-card shadow="never" class="box-card">
+            <div slot="header" class="clearfix">
+              <span>训练营</span>
+              <el-button
+                v-hasPermi="['live:trainingCamp:add']"
+                style="float: right; padding: 3px 0"
+                type="text"
+                icon="el-icon-plus"
+                @click="openCampForm()"
+              >新建</el-button>
+            </div>
+            <el-table
+              ref="campTable"
+              v-loading="campLoading"
+              :data="campList"
+              highlight-current-row
+              border
+              size="small"
+              @current-change="onCampChange"
+            >
+              <el-table-column label="名称" prop="campName" min-width="100" show-overflow-tooltip />
+              <el-table-column label="排序" prop="sortOrder" width="56" align="center" />
+              <el-table-column label="状态" width="68" align="center">
+                <template slot-scope="scope">
+                  <el-tag v-if="scope.row.status === 0" size="mini" type="success">正常</el-tag>
+                  <el-tag v-else size="mini" type="info">停用</el-tag>
+                </template>
+              </el-table-column>
+              <el-table-column label="操作" width="96" align="center" fixed="right">
+                <template slot-scope="scope">
+                  <el-button
+                    v-hasPermi="['live:trainingCamp:edit']"
+                    type="text"
+                    size="mini"
+                    @click.stop="openCampForm(scope.row)"
+                  >编辑</el-button>
+                  <el-button
+                    v-hasPermi="['live:trainingCamp:remove']"
+                    type="text"
+                    size="mini"
+                    @click.stop="removeCamp(scope.row)"
+                  >删除</el-button>
+                </template>
+              </el-table-column>
+            </el-table>
+          </el-card>
+        </el-col>
+
+        <el-col :span="17">
+          <el-card shadow="never" class="box-card box-card-period">
+            <div slot="header" class="period-header">
+              <div class="period-header-left">
+                <span>营期</span>
+                <span v-if="currentCamp" class="sub-hint">（{{ currentCamp.campName }}）</span>
+              </div>
+              <div class="period-header-actions">
+                <el-button
+                  type="primary"
+                  plain
+                  size="small"
+                  icon="el-icon-right"
+                  :disabled="!currentPeriod"
+                  @click="enterPeriodWorkspace(currentPeriod)"
+                >进入营期</el-button>
+                <el-button
+                  v-hasPermi="['live:trainingCamp:add']"
+                  type="primary"
+                  size="small"
+                  icon="el-icon-plus"
+                  :disabled="!currentCamp"
+                  @click="openPeriodForm()"
+                >新建营期</el-button>
+              </div>
+            </div>
+            <el-empty v-if="!currentCamp" description="请先选择训练营" :image-size="64" />
+            <el-table
+              v-else
+              ref="periodTable"
+              v-loading="periodLoading"
+              :data="periodList"
+              highlight-current-row
+              border
+              size="small"
+              @current-change="onPeriodChange"
+            >
+              <el-table-column label="营期名称" prop="periodName" min-width="120" show-overflow-tooltip />
+              <el-table-column label="营期图" width="76" align="center">
+                <template slot-scope="scope">
+                  <el-image
+                    v-if="scope.row.periodImgUrl"
+                    class="period-thumb"
+                    :src="scope.row.periodImgUrl"
+                    fit="cover"
+                    :preview-src-list="[scope.row.periodImgUrl]"
+                  />
+                  <span v-else class="period-thumb-empty">—</span>
+                </template>
+              </el-table-column>
+              <el-table-column label="开始" prop="startTime" width="100" show-overflow-tooltip>
+                <template slot-scope="scope">{{ formatDt(scope.row.startTime) }}</template>
+              </el-table-column>
+              <el-table-column label="结束" prop="endTime" width="100" show-overflow-tooltip>
+                <template slot-scope="scope">{{ formatDt(scope.row.endTime) }}</template>
+              </el-table-column>
+              <el-table-column label="操作" width="168" align="center" fixed="right">
+                <template slot-scope="scope">
+                  <el-button
+                    type="text"
+                    size="mini"
+                    icon="el-icon-right"
+                    @click.stop="enterPeriodWorkspace(scope.row)"
+                  >进入营期</el-button>
+                  <el-button
+                    v-hasPermi="['live:trainingCamp:edit']"
+                    type="text"
+                    size="mini"
+                    @click.stop="openPeriodForm(scope.row)"
+                  >编辑</el-button>
+                  <el-button
+                    v-hasPermi="['live:trainingCamp:remove']"
+                    type="text"
+                    size="mini"
+                    @click.stop="removePeriod(scope.row)"
+                  >删除</el-button>
+                </template>
+              </el-table-column>
+            </el-table>
+          </el-card>
+        </el-col>
+      </el-row>
+    </div>
+
+    <period-workspace
+      v-show="periodWorkspace.periodId"
+      ref="periodWorkspaceRef"
+      :workspace="periodWorkspace"
+      @back="closePeriodWorkspace"
+      @add-live="openLiveForm"
+      @edit-live="openLiveFormEdit"
+    />
+
+    <!-- 训练营表单 -->
+    <el-dialog :title="campForm.campId ? '编辑训练营' : '新建训练营'" :visible.sync="campOpen" width="480px" append-to-body>
+      <el-form ref="campFormRef" :model="campForm" :rules="campRules" label-width="88px">
+        <el-form-item label="名称" prop="campName">
+          <el-input v-model="campForm.campName" maxlength="128" show-word-limit placeholder="训练营名称" />
+        </el-form-item>
+        <el-form-item label="排序" prop="sortOrder">
+          <el-input-number v-model="campForm.sortOrder" :min="0" :max="9999" controls-position="right" />
+        </el-form-item>
+        <el-form-item label="状态" prop="status">
+          <el-radio-group v-model="campForm.status">
+            <el-radio :label="0">正常</el-radio>
+            <el-radio :label="1">停用</el-radio>
+          </el-radio-group>
+        </el-form-item>
+        <el-form-item label="说明" prop="description">
+          <el-input v-model="campForm.description" type="textarea" rows="3" maxlength="512" show-word-limit />
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="campOpen = false">取 消</el-button>
+        <el-button type="primary" @click="submitCamp">确 定</el-button>
+      </div>
+    </el-dialog>
+
+    <!-- 营期表单 -->
+    <el-dialog :title="periodForm.periodId ? '编辑营期' : '新建营期'" :visible.sync="periodOpen" width="520px" append-to-body>
+      <el-form ref="periodFormRef" :model="periodForm" :rules="periodRules" label-width="88px">
+        <el-form-item label="营期名称" prop="periodName">
+          <el-input v-model="periodForm.periodName" maxlength="128" show-word-limit />
+        </el-form-item>
+        <el-form-item label="营期图片" prop="periodImgUrl">
+          <image-upload v-model="periodForm.periodImgUrl" :limit="1" />
+        </el-form-item>
+        <el-form-item label="开始时间" prop="startTime">
+          <el-date-picker
+            v-model="periodForm.startTime"
+            type="datetime"
+            value-format="yyyy-MM-dd HH:mm:ss"
+            placeholder="选择开始时间"
+            style="width: 100%"
+          />
+        </el-form-item>
+        <el-form-item label="结束时间" prop="endTime">
+          <el-date-picker
+            v-model="periodForm.endTime"
+            type="datetime"
+            value-format="yyyy-MM-dd HH:mm:ss"
+            placeholder="选择结束时间"
+            style="width: 100%"
+          />
+        </el-form-item>
+        <el-form-item label="排序" prop="sortOrder">
+          <el-input-number v-model="periodForm.sortOrder" :min="0" :max="9999" controls-position="right" />
+        </el-form-item>
+        <el-form-item label="状态" prop="status">
+          <el-radio-group v-model="periodForm.status">
+            <el-radio :label="0">正常</el-radio>
+            <el-radio :label="1">停用</el-radio>
+          </el-radio-group>
+        </el-form-item>
+        <el-form-item label="说明" prop="description">
+          <el-input v-model="periodForm.description" type="textarea" rows="3" maxlength="512" show-word-limit />
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="periodOpen = false">取 消</el-button>
+        <el-button type="primary" @click="submitPeriod">确 定</el-button>
+      </div>
+    </el-dialog>
+
+    <!-- 新增/修改直播间（与「直播管理」表单一致；新增走营期接口，修改走直播更新接口） -->
+    <el-dialog :title="liveUpsertMode === 'edit' ? '修改直播间' : '添加直播间'" :visible.sync="liveOpen" width="900px" append-to-body>
+      <el-form ref="liveUpsertFormRef" :model="liveUpsertForm" :rules="liveUpsertRules" label-width="80px">
+        <el-form-item label="直播名称" prop="liveName">
+          <el-input v-model="liveUpsertForm.liveName" placeholder="请输入直播名称" />
+        </el-form-item>
+        <el-form-item label="显示类型" prop="showType">
+          <el-radio-group v-model="liveUpsertForm.showType">
+            <el-radio :label="1">横屏</el-radio>
+            <el-radio :label="2">竖屏</el-radio>
+          </el-radio-group>
+        </el-form-item>
+        <el-form-item label="直播类型" prop="liveType">
+          <el-radio-group v-model="liveUpsertForm.liveType">
+            <el-radio
+              v-for="item in liveTypeDictList"
+              :key="item.dictValue"
+              :label="parseInt(item.dictValue)"
+            >
+              {{ item.dictLabel }}
+            </el-radio>
+          </el-radio-group>
+        </el-form-item>
+        <el-form-item label="直播描述" prop="liveDesc">
+          <Editor ref="liveUpsertEditor" :height="300" @on-text-change="onLiveDescChange" />
+        </el-form-item>
+        <el-form-item label="录播视屏" prop="videoUrl" v-if="liveUpsertForm.liveType == 2">
+          <video-upload
+            :fileKey.sync="liveUpsertForm.fileKey"
+            :fileSize.sync="liveUpsertForm.fileSize"
+            :videoUrl.sync="liveUpsertForm.videoUrl"
+            :fileName.sync="liveUpsertForm.fileName"
+            :line_1.sync="liveUpsertForm.lineOne"
+            :uploadType.sync="liveUpsertForm.uploadType"
+            :isTranscode.sync="liveUpsertForm.isTranscode"
+            ref="liveUpsertVideoUpload"
+            :transcodeFileKey.sync="liveUpsertForm.transcodeFileKey"
+            @video-duration="onLiveVideoDuration"
+            @change="onLiveVideoChange"
+          />
+        </el-form-item>
+        <el-form-item label="开始时间" prop="startTime">
+          <el-date-picker
+            size="small"
+            v-model="liveUpsertForm.startTime"
+            @change="onLiveStartTimeChange"
+            type="datetime"
+            format="yyyy-MM-dd HH:mm:ss"
+            value-format="yyyy-MM-dd HH:mm:ss"
+            :picker-options="{
+              timePickerOptions: {
+                selectableRange: '00:00:00 - 23:59:59',
+                format: 'HH:mm:ss'
+              }
+            }"
+            placeholder="选择开始时间"
+          />
+        </el-form-item>
+        <el-form-item label="结束时间" prop="finishTime" v-loading="liveTimeLoading">
+          <el-date-picker
+            size="small"
+            v-model="liveUpsertForm.finishTime"
+            type="datetime"
+            format="yyyy-MM-dd HH:mm:ss"
+            value-format="yyyy-MM-dd HH:mm:ss"
+            :picker-options="{
+              timePickerOptions: {
+                selectableRange: '00:00:00 - 23:59:59',
+                format: 'HH:mm:ss'
+              }
+            }"
+            placeholder="视屏播放结束"
+          />
+        </el-form-item>
+        <el-form-item label="直播封面" prop="liveImgUrl">
+          <image-upload v-model="liveUpsertForm.liveImgUrl" :limit="1" />
+        </el-form-item>
+        <el-form-item label="上下架" prop="isShow">
+          <el-radio-group v-model="liveUpsertForm.isShow">
+            <el-radio :label="1">上架</el-radio>
+            <el-radio :label="2">下架</el-radio>
+          </el-radio-group>
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="submitLive">确 定</el-button>
+        <el-button @click="cancelLiveDialog">取 消</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import {
+  listTrainingCamp,
+  addTrainingCamp,
+  updateTrainingCamp,
+  delTrainingCamp,
+  listTrainingPeriod,
+  addTrainingPeriod,
+  updateTrainingPeriod,
+  delTrainingPeriod,
+  addTrainingLive,
+  getTrainingPeriod
+} from '@/api/live/trainingCamp'
+import { getLive, updateLive } from '@/api/live/live'
+import PeriodWorkspace from './PeriodWorkspace.vue'
+import Editor from '@/components/Editor/wang'
+import VideoUpload from '@/components/LiveVideoUpload/single.vue'
+
+export default {
+  name: 'LiveTrainingCamp',
+  components: { PeriodWorkspace, Editor, VideoUpload },
+  data() {
+    return {
+      campLoading: false,
+      periodLoading: false,
+      campList: [],
+      periodList: [],
+      currentCamp: null,
+      currentPeriod: null,
+      campOpen: false,
+      periodOpen: false,
+      liveOpen: false,
+      /** add | edit */
+      liveUpsertMode: 'add',
+      campForm: {},
+      periodForm: {},
+      liveTypeDictList: [],
+      liveUpsertForm: {
+        uploadType: 1,
+        isTranscode: 0,
+        transcodeFileKey: null,
+        videoUrl: null,
+        fileKey: null,
+        fileName: null,
+        fileSize: null,
+        lineOne: null
+      },
+      liveVideoUrl: '',
+      liveTimeLoading: false,
+      periodWorkspace: {
+        periodId: null,
+        periodName: '',
+        campName: '',
+        periodImgUrl: '',
+        startTime: null,
+        endTime: null
+      },
+      campRules: {
+        campName: [{ required: true, message: '请输入训练营名称', trigger: 'blur' }]
+      },
+      periodRules: {
+        periodName: [{ required: true, message: '请输入营期名称', trigger: 'blur' }]
+      },
+      liveUpsertRules: {
+        liveName: [{ required: true, message: '不能为空', trigger: 'blur' }],
+        showType: [{ required: true, message: '不能为空', trigger: 'blur' }],
+        liveType: [{ required: true, message: '不能为空', trigger: 'blur' }],
+        startTime: [{ required: true, message: '不能为空', trigger: 'blur' }],
+        liveImgUrl: [{ required: true, message: '不能为空', trigger: 'blur' }],
+        isShow: [{ required: true, message: '不能为空', trigger: 'change' }]
+      }
+    }
+  },
+  watch: {
+    'liveUpsertForm.startTime': {
+      handler(newVal) {
+        if (!newVal) return
+        const timeObj = new Date(newVal)
+        if (isNaN(timeObj.getTime())) return
+        timeObj.setSeconds(1)
+        const formattedSeconds = this.padTime(timeObj.getSeconds())
+        const year = timeObj.getFullYear()
+        const month = this.padTime(timeObj.getMonth() + 1)
+        const day = this.padTime(timeObj.getDate())
+        const hours = this.padTime(timeObj.getHours())
+        const minutes = this.padTime(timeObj.getMinutes())
+        this.liveUpsertForm.startTime = `${year}-${month}-${day} ${hours}:${minutes}:${formattedSeconds}`
+      },
+      immediate: true,
+      deep: false
+    },
+    '$route.query.periodId'(val) {
+      if (!val) {
+        this.resetWorkspaceState(false)
+        return
+      }
+      const id = Number(val)
+      if (Number.isNaN(id)) return
+      if (this.periodWorkspace.periodId === id) return
+      this.restoreWorkspaceFromRoute(id)
+    }
+  },
+  created() {
+    this.loadCamps()
+    this.getDicts('live_type').then(response => {
+      this.liveTypeDictList = response.data
+    })
+    const pid = this.$route.query.periodId
+    if (pid) {
+      const id = Number(pid)
+      if (!Number.isNaN(id)) {
+        this.$nextTick(() => this.restoreWorkspaceFromRoute(id))
+      }
+    }
+  },
+  methods: {
+    formatDt(val) {
+      if (!val) return '—'
+      const s = String(val).replace('T', ' ')
+      return s.length >= 16 ? s.slice(0, 16) : s
+    },
+    resetWorkspaceState(updateRoute) {
+      this.periodWorkspace = {
+        periodId: null,
+        periodName: '',
+        campName: '',
+        periodImgUrl: '',
+        startTime: null,
+        endTime: null
+      }
+      if (updateRoute !== false) {
+        const q = { ...this.$route.query }
+        delete q.periodId
+        this.$router.replace({ path: this.$route.path, query: q }).catch(() => {})
+      }
+    },
+    enterPeriodWorkspace(row) {
+      if (!row || !row.periodId) {
+        this.$message.warning('请先选中一行营期，或点击操作栏「进入营期」')
+        return
+      }
+      const campName = (this.currentCamp && this.currentCamp.campName) || row.campName || ''
+      this.periodWorkspace = {
+        periodId: row.periodId,
+        periodName: row.periodName || '',
+        campName,
+        periodImgUrl: row.periodImgUrl || '',
+        startTime: row.startTime || null,
+        endTime: row.endTime || null
+      }
+      this.$router.replace({
+        path: this.$route.path,
+        query: { ...this.$route.query, periodId: String(row.periodId) }
+      }).catch(() => {})
+    },
+    restoreWorkspaceFromRoute(periodId) {
+      getTrainingPeriod(periodId).then(res => {
+        const data = res.data
+        if (!data) {
+          this.$message.error('营期不存在或无权限')
+          this.resetWorkspaceState()
+          return
+        }
+        this.periodWorkspace = {
+          periodId: data.periodId,
+          periodName: data.periodName || '',
+          campName: data.campName || '',
+          periodImgUrl: data.periodImgUrl || '',
+          startTime: data.startTime || null,
+          endTime: data.endTime || null
+        }
+      }).catch(() => {
+        this.resetWorkspaceState()
+      })
+    },
+    closePeriodWorkspace() {
+      this.resetWorkspaceState(true)
+    },
+    loadCamps() {
+      this.campLoading = true
+      listTrainingCamp({ pageNum: 1, pageSize: 500 }).then(res => {
+        this.campList = res.rows || []
+        this.campLoading = false
+        this.$nextTick(() => {
+          if (this.currentCamp) {
+            const hit = this.campList.find(c => c.campId === this.currentCamp.campId)
+            if (hit) {
+              this.$refs.campTable && this.$refs.campTable.setCurrentRow(hit)
+            } else {
+              this.currentCamp = null
+              this.currentPeriod = null
+              this.periodList = []
+            }
+          }
+        })
+      }).catch(() => { this.campLoading = false })
+    },
+    onCampChange(row) {
+      this.currentCamp = row || null
+      this.currentPeriod = null
+      this.periodList = []
+      if (!row) return
+      this.loadPeriods()
+    },
+    loadPeriods() {
+      if (!this.currentCamp) return
+      this.periodLoading = true
+      listTrainingPeriod({ campId: this.currentCamp.campId, pageNum: 1, pageSize: 500 }).then(res => {
+        this.periodList = res.rows || []
+        this.periodLoading = false
+      }).catch(() => { this.periodLoading = false })
+    },
+    onPeriodChange(row) {
+      this.currentPeriod = row || null
+    },
+    openCampForm(row) {
+      this.campForm = row
+        ? { ...row }
+        : { campName: '', sortOrder: 0, status: 0, description: '' }
+      this.campOpen = true
+      this.$nextTick(() => this.$refs.campFormRef && this.$refs.campFormRef.clearValidate())
+    },
+    submitCamp() {
+      this.$refs.campFormRef.validate(valid => {
+        if (!valid) return
+        const req = this.campForm.campId ? updateTrainingCamp(this.campForm) : addTrainingCamp(this.campForm)
+        req.then(res => {
+          this.$message.success((res && res.msg) || '保存成功')
+          this.campOpen = false
+          this.loadCamps()
+        })
+      })
+    },
+    removeCamp(row) {
+      this.$confirm('确认删除训练营「' + row.campName + '」？须先清空营期。').then(() => {
+        return delTrainingCamp(row.campId)
+      }).then(res => {
+        this.$message.success((res && res.msg) || '已删除')
+        if (this.currentCamp && this.currentCamp.campId === row.campId) {
+          this.currentCamp = null
+          this.currentPeriod = null
+          this.periodList = []
+        }
+        this.loadCamps()
+      }).catch(() => {})
+    },
+    openPeriodForm(row) {
+      if (!this.currentCamp) return
+      this.periodForm = row
+        ? { ...row, campId: row.campId }
+        : {
+          campId: this.currentCamp.campId,
+          periodName: '',
+          periodImgUrl: '',
+          startTime: null,
+          endTime: null,
+          sortOrder: 0,
+          status: 0,
+          description: ''
+        }
+      this.periodOpen = true
+      this.$nextTick(() => this.$refs.periodFormRef && this.$refs.periodFormRef.clearValidate())
+    },
+    submitPeriod() {
+      this.$refs.periodFormRef.validate(valid => {
+        if (!valid) return
+        const req = this.periodForm.periodId ? updateTrainingPeriod(this.periodForm) : addTrainingPeriod(this.periodForm)
+        req.then(res => {
+          this.$message.success((res && res.msg) || '保存成功')
+          this.periodOpen = false
+          if (this.periodWorkspace.periodId && this.periodForm.periodId === this.periodWorkspace.periodId) {
+            this.periodWorkspace = {
+              ...this.periodWorkspace,
+              periodName: this.periodForm.periodName || '',
+              periodImgUrl: this.periodForm.periodImgUrl || '',
+              startTime: this.periodForm.startTime || null,
+              endTime: this.periodForm.endTime || null
+            }
+          }
+          this.loadPeriods()
+        })
+      })
+    },
+    removePeriod(row) {
+      this.$confirm('确认删除营期「' + row.periodName + '」？须先删除营期下直播间。').then(() => {
+        return delTrainingPeriod(row.periodId)
+      }).then(res => {
+        this.$message.success((res && res.msg) || '已删除')
+        if (this.currentPeriod && this.currentPeriod.periodId === row.periodId) {
+          this.currentPeriod = null
+        }
+        if (this.periodWorkspace.periodId === row.periodId) {
+          this.closePeriodWorkspace()
+        }
+        this.loadPeriods()
+      }).catch(() => {})
+    },
+    initLiveUpsertDefaults() {
+      this.liveUpsertForm = {
+        showType: 1,
+        liveType: 2,
+        isShow: 1,
+        isTranscode: 0,
+        uploadType: 1,
+        transcodeFileKey: null
+      }
+      this.liveVideoUrl = ''
+    },
+    cancelLiveDialog() {
+      this.liveOpen = false
+      this.liveUpsertMode = 'add'
+      this.initLiveUpsertDefaults()
+    },
+    padTime(n) {
+      return n < 10 ? `0${n}` : String(n)
+    },
+    formatLiveEndDate(date) {
+      const y = date.getFullYear()
+      const m = (date.getMonth() + 1).toString().padStart(2, '0')
+      const d = date.getDate().toString().padStart(2, '0')
+      const h = date.getHours().toString().padStart(2, '0')
+      const min = date.getMinutes().toString().padStart(2, '0')
+      const s = date.getSeconds().toString().padStart(2, '0')
+      return `${y}-${m}-${d} ${h}:${min}:${s}`
+    },
+    onLiveStartTimeChange() {
+      if (!this.liveUpsertForm.startTime) return
+      if (!this.liveUpsertForm.duration) return
+      const startDateTime = new Date(this.liveUpsertForm.startTime)
+      const endDateTime = new Date(startDateTime.getTime() + this.liveUpsertForm.duration * 1000)
+      this.liveUpsertForm.finishTime = this.formatLiveEndDate(endDateTime)
+    },
+    onLiveVideoDuration(duration) {
+      this.liveUpsertForm.duration = duration
+    },
+    onLiveVideoChange(videoUrl) {
+      this.liveVideoUrl = videoUrl
+      this.liveUpsertForm.videoUrl = videoUrl
+    },
+    onLiveDescChange(text) {
+      setTimeout(() => {
+        this.liveUpsertForm.liveDesc = text
+      }, 1)
+    },
+    openLiveForm() {
+      if (!this.periodWorkspace.periodId) {
+        this.$message.warning('请先进入营期')
+        return
+      }
+      this.liveUpsertMode = 'add'
+      this.initLiveUpsertDefaults()
+      this.liveOpen = true
+      this.$nextTick(() => {
+        if (this.$refs.liveUpsertFormRef) {
+          this.$refs.liveUpsertFormRef.clearValidate()
+        }
+        setTimeout(() => {
+          if (this.$refs.liveUpsertEditor) {
+            this.$refs.liveUpsertEditor.setText('')
+          }
+          if (this.$refs.liveUpsertVideoUpload) {
+            this.$refs.liveUpsertVideoUpload.reset()
+          }
+        }, 100)
+      })
+    },
+    openLiveFormEdit(row) {
+      if (!this.periodWorkspace.periodId) {
+        this.$message.warning('请先进入营期')
+        return
+      }
+      if (!row || !row.liveId) {
+        this.$message.warning('直播间信息无效')
+        return
+      }
+      this.liveUpsertMode = 'edit'
+      getLive(row.liveId).then(res => {
+        const d = res.data
+        if (!d) {
+          this.$message.error('获取直播间失败')
+          this.liveUpsertMode = 'add'
+          return
+        }
+        this.liveUpsertForm = { ...d }
+        this.liveVideoUrl = d.videoUrl || ''
+        this.liveOpen = true
+        this.$nextTick(() => {
+          if (this.$refs.liveUpsertFormRef) {
+            this.$refs.liveUpsertFormRef.clearValidate()
+          }
+          setTimeout(() => {
+            if (this.$refs.liveUpsertEditor) {
+              this.$refs.liveUpsertEditor.setText(d.liveDesc || '')
+            }
+            if (d.videoUrl) {
+              this.liveUpsertForm.videoUrl = d.videoUrl
+            }
+          }, 100)
+        })
+      }).catch(() => {
+        this.liveUpsertMode = 'add'
+      })
+    },
+    submitLive() {
+      if (this.liveUpsertForm.liveType === 2 && (!this.liveVideoUrl || this.liveVideoUrl.length === 0)) {
+        this.$message.error('请上传视频')
+        return
+      }
+      this.$refs.liveUpsertFormRef.validate(valid => {
+        if (!valid) return
+        if (!this.periodWorkspace.periodId) {
+          this.$message.warning('营期已失效，请返回列表重新进入')
+          return
+        }
+        const body = { ...this.liveUpsertForm }
+        body.videoUrl = this.liveVideoUrl
+        body.trainingPeriodId = this.periodWorkspace.periodId
+        if (this.liveUpsertMode === 'add') {
+          delete body.liveId
+          addTrainingLive(body).then(res => {
+            this.$message.success((res && res.msg) || '新增成功')
+            this.liveOpen = false
+            this.liveUpsertMode = 'add'
+            this.initLiveUpsertDefaults()
+            this.$refs.periodWorkspaceRef && this.$refs.periodWorkspaceRef.refreshLiveList()
+          })
+        } else {
+          if (!body.liveId) {
+            this.$message.error('缺少直播间ID')
+            return
+          }
+          updateLive(body).then(res => {
+            this.$message.success((res && res.msg) || '修改成功')
+            this.liveOpen = false
+            this.liveUpsertMode = 'add'
+            this.initLiveUpsertDefaults()
+            this.$refs.periodWorkspaceRef && this.$refs.periodWorkspaceRef.refreshLiveList()
+          })
+        }
+      })
+    },
+  }
+}
+</script>
+
+<style scoped>
+.training-camp-root {
+  min-height: 100%;
+}
+.training-camp-page .mb12 {
+  margin-bottom: 12px;
+}
+.box-card {
+  min-height: 420px;
+}
+.box-card-period {
+  min-height: 420px;
+}
+.period-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+.period-header-left {
+  flex: 1;
+  min-width: 0;
+}
+.period-header-actions {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex-shrink: 0;
+}
+.sub-hint {
+  color: #909399;
+  font-size: 12px;
+  margin-left: 6px;
+}
+.period-thumb {
+  width: 48px;
+  height: 48px;
+  border-radius: 4px;
+  vertical-align: middle;
+}
+.period-thumb-empty {
+  color: #c0c4cc;
+  font-size: 12px;
+}
+</style>

src/views/watch/deviceInfo/details.vue

@@ -64,7 +64,7 @@
           </div>
         </div>
         <div class="equipment-day">
-          已绑定 <span>400</span> 天, 佩戴 <span>4365</span> 天
+          <!-- 已绑定 <span>400</span> 天, 佩戴 <span>4365</span> 天 -->
         </div>
         <div class="equipment-btn">
           <el-button type="primary" size="small">一键上传</el-button>
@@ -83,7 +83,7 @@
       </el-tabs>
       
       <keep-alive>
-        <component :ref="currentTabComponent" :is="currentTabComponent" :deviceId="deviceId" :basicInfo="basicInfo" :detailsType="detailsType">
+        <component :ref="currentTabComponent" :is="currentTabComponent" :deviceId="deviceId" :basicInfo="basicInfo" :detailsType="detailsType" :userInfo="userInfo">
         </component>
       </keep-alive>
     </el-main>
@@ -115,6 +115,8 @@ import Overview from '@/components/DeviceInfo/Overview.vue';
 import Bloodoxygen from '@/components/DeviceInfo/Bloodoxygen.vue';
 import Uricacid from '@/components/DeviceInfo/Uricacid.vue';
 import Urineketones from '@/components/DeviceInfo/Urineketones.vue';
+import PressureValue from '@/components/DeviceInfo/PressureValue.vue';
+import Report from '@/components/DeviceInfo/Report.vue';
 
 export default {
   name: "DeviceDetails",
@@ -134,7 +136,9 @@ export default {
     Overview,
     Bloodoxygen,
     Uricacid,
-    Urineketones
+    Urineketones,
+    PressureValue,
+    Report
   },
   data() {
     return {
@@ -179,10 +183,10 @@ export default {
           label: '位置',
           name: 'location'
         },
-        {
-          label: '脉搏',
-          name: 'pulse'
-        },
+        // {
+        //   label: '脉搏',
+        //   name: 'pulse'
+        // },
         {
           label: '血糖',
           name: 'bloodsugar'
@@ -191,10 +195,10 @@ export default {
           label: '血压',
           name: 'bloodpressure'
         },
-        {
-          label: '血酮',
-          name: 'urineketones'
-        },
+        // {
+        //   label: '血酮',
+        //   name: 'urineketones'
+        // },
         {
           label: '尿酸',
           name: 'uricacid'
@@ -211,6 +215,14 @@ export default {
         //   label: '血脂',
         //   name: 'bloodfat'
         // },
+        {
+          label: '压力',
+          name: 'pressureValue'
+        },
+        {
+          label: '周报',
+          name: 'report'
+        },
       ]
     };
   },
@@ -238,7 +250,9 @@ export default {
         overview: Overview,
         bloodoxygen: Bloodoxygen,
         uricacid: Uricacid,
-        urineketones: Urineketones
+        urineketones: Urineketones,
+        pressureValue:PressureValue,
+        report:Report
 
 
 
@@ -342,9 +356,12 @@ export default {
      */
     async getUserinfo(deviceId) {
       try {
-        const response = await getUser(deviceId);
+        const userId = this.$route.params.userId;
+        const selectType = this.$route.params.selectType;
+        const response = await getUser({deviceId:deviceId,userId:userId,selectType});
         if (response && response.data) {
           this.userInfo = response.data; // 确保数据被正确赋值
+          this.userInfo.userId = userId;
           // console.log("用户信息:", this.userInfo);
         } else {
           console.warn("用户信息返回为空或格式不正确:", response);
@@ -517,6 +534,11 @@ export default {
   // line-height: 160px;
   padding: 0;
 }
+::v-deep .el-main::-webkit-scrollbar {
+  width: 0;
+  display: none;  /* Chrome, Safari and Opera */
+}
+
 
 body>.el-container {
   margin-bottom: 40px;

src/views/watch/deviceInfo/index.vue

@@ -5,10 +5,17 @@
         <el-input v-model="queryParams.doctorName" placeholder="请输入所属医生" clearable size="small"
           @keyup.enter.native="handleQuery" />
       </el-form-item>
-      <el-form-item label="绑定用户" prop="watchUserName">
+      <el-form-item label="所属员工" prop="companyUserId">
+        <el-select v-model="queryParams.companyUserId" placeholder="请选择所属员工" clearable size="small">
+          <el-option v-for="item in companyUserList" :key="item.userId" :label="item.nickName"
+            :value="item.userId">
+          </el-option>
+        </el-select>
+      </el-form-item>
+      <!-- <el-form-item label="绑定用户" prop="watchUserName">
         <el-input v-model="queryParams.watchUserName" placeholder="请输入绑定用户" clearable size="small"
           @keyup.enter.native="handleQuery" />
-      </el-form-item>
+      </el-form-item> -->
       <el-form-item label="设备编号" prop="deviceNumber">
         <el-input v-model="queryParams.deviceNumber" placeholder="请输入设备编号" clearable size="small"
           @keyup.enter.native="handleQuery" />
@@ -27,6 +34,12 @@
           </el-option>
         </el-select>
       </el-form-item>
+      <el-form-item label="健康状态" prop="isNormal">
+        <el-select v-model="queryParams.isNormal" placeholder="请选择健康状态" clearable size="small">
+          <el-option v-for="item in healthOptions" :key="item.value" :label="item.label" :value="item.value">
+          </el-option>
+        </el-select>
+      </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>
@@ -82,8 +95,29 @@
     <el-table v-loading="loading" :data="deviceInfoList" @selection-change="handleSelectionChange">
       <el-table-column type="selection" width="55" align="center" />
       <el-table-column label="设备id" align="center" prop="deviceId" />
+      <el-table-column label="所属员工" align="center" prop="companyUserName" />
       <el-table-column label="所属医生" align="center" prop="doctorName" />
-      <el-table-column label="绑定用户" align="center" prop="watchUserName" />
+      <el-table-column  label="绑定用户"  align="center" prop="watchUserName">
+        <!-- <template slot-scope="scope"> 
+          <div v-if="scope.row.users && scope.row.users!=null">
+              <el-link :underline="false" @click="handleDetails(scope.row.deviceId, scope.row.users.userId)">
+                {{ scope.row.users.nickName }}
+              </el-link>
+          </div>
+        </template> -->
+        
+      </el-table-column>
+      <el-table-column  label="绑定家人用户"  align="center" prop="familyUserName">
+          <!-- <template slot-scope="scope">
+            <div v-if="scope.row.familyUsers">
+              <div v-for="(item, index) in scope.row.familyUsers" :key="index">
+                <el-link :underline="false" @click="handleDetails(scope.row.deviceId, item.userId)">
+                  {{ item.nickName }}
+                </el-link>
+              </div>
+            </div>
+          </template> -->
+      </el-table-column>
       <el-table-column label="设备编号" align="center" prop="deviceNumber" width="150"/>
       <el-table-column label="电量" align="center" prop="battery" />
       <el-table-column label="信号" align="center" prop="rssi" />
@@ -97,20 +131,71 @@
           >
             最新数据
           </span>
-          <el-tag size="mini" :type="scope.row.isNormal == '异常'?'danger':'primary'">{{scope.row.isNormal}}</el-tag>
+          <el-tag size="mini" :type="scope.row.isNormal == 0?'danger':'primary'">{{ scope.row.isNormal === 1 ? '正常' : '异常' }}</el-tag>
 
         </template>
       </el-table-column>
       <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
         <template slot-scope="scope">
-          <el-button size="mini" type="text" icon="el-icon-view" @click="handleDetails(scope.row.deviceId)"
+          <el-button size="mini" type="text" icon="el-icon-view" @click="handleDetailsAndType(scope.row)"
             v-hasPermi="['watchApi:deviceInfo:query']">查询详情</el-button>
           <el-button size="mini" type="text" icon="el-icon-phone-outline" @click="handleSoSPeople(scope.row.deviceNumber)"
             v-hasPermi="['watchApi:deviceInfo:query']">查看紧急联系人</el-button>
+          <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)"
+            v-hasPermi="['watchApi:deviceInfo:edit']">修改</el-button>  
         </template>
       </el-table-column>
     </el-table>
 
+    <!-- 添加或修改设备信息对话框 -->
+    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
+      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
+        
+        <el-form-item label="所属员工" prop="companyUserId">
+          <template #label>
+            <span class="required-label">所属员工</span>
+          </template>
+          <el-select v-model="form.companyUserId" placeholder="请选择所属员工" clearable size="small">
+            <el-option v-for="item in companyUserList" :key="item.userId" :label="item.nickName"
+              :value="item.userId">
+            </el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="所属医生" prop="doctorId">
+          <template #label>
+            <span class="required-label">所属医生</span>
+          </template>
+          <el-select v-model="form.doctorId" placeholder="请选择所属医生" clearable size="small">
+            <el-option v-for="item in doctorList" :key="item.doctorId" :label="item.doctorName"
+              :value="item.doctorId">
+            </el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="设备编号" prop="deviceNumber">
+          <el-input v-model="form.deviceNumber" placeholder="请输入设备编号" disabled/>
+        </el-form-item>
+        <el-form-item label="电量" prop="battery">
+          <el-input v-model="form.battery" placeholder="请输入电量" disabled/>
+        </el-form-item>
+        <el-form-item label="信号" prop="rssi">
+          <el-input v-model="form.rssi" placeholder="请输入信号" disabled/>
+        </el-form-item>
+        <el-form-item label="设备状态">
+          <el-radio-group v-model="form.status">
+            <el-radio :label="0">OFFLINE</el-radio>
+            <el-radio :label="1">ONLINE</el-radio>
+            <el-radio :label="2">UNACTIVE</el-radio>
+            <el-radio :label="3">DISABLE</el-radio>
+            <el-radio :label="4">NOT EXIST</el-radio>
+          </el-radio-group>
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="submitForm">确 定</el-button>
+        <el-button @click="cancel">取 消</el-button>
+      </div>
+    </el-dialog>
+
     <!-- 弹窗展示紧急联系人列表 -->
     <el-dialog :visible.sync="sosVisible" title="紧急联系人" width="50%">
         <el-table v-loading="sosLoading" :data="sosPeopleList">
@@ -169,15 +254,15 @@
 
 <script>
 import { listDeviceInfo, getDeviceInfo, delDeviceInfo, addDeviceInfo, updateDeviceInfo, exportDeviceInfo, queryAlarm, setStatus, queryPageAlarm,queryLastHealthData,querySos} from "@/api/watch/deviceInfo";
-import { getAllUserlist } from "@/api/company/companyUser";
+import { getSelectUserList } from "@/api/company/companyUser";
 import { messageSend } from "@/api/watch/deviceInfoSet.js";
+import { listDoctor } from "@/api/doctor/doctor";
 import setUpUserInfoDialog from "@/components/DeviceInfo/SettingDialog/setUpUserInfoDialog.vue";
 import SetInfoDialog from "@/components/DeviceInfo/SettingDialog/SetInfoDialog.vue";
 import Phonebook from "@/components/DeviceInfo/SettingDialog/Phonebook.vue";
 import Clockalarm from "@/components/DeviceInfo/SettingDialog/Clockalarm.vue";
 import Sedentary from "@/components/DeviceInfo/SettingDialog/Sedentary.vue";
-// import {getInfo} from "@/api/login"
-
+import {watchDownload} from "@/api/watch/common";
 export default {
   name: "DeviceInfo",
   components: {
@@ -273,6 +358,13 @@ export default {
           { max: 240, message: '详情最多240个字节', trigger: 'blur' }
         ]
       },
+      healthOptions: [{
+          value: 0,
+          label: '异常'
+        }, {
+          value: 1,
+          label: '正常'
+        }],
       options: [{
         value: '0',
         label: 'OFFLINE'
@@ -311,6 +403,8 @@ export default {
   },
   created() {
     this.getList();
+    this.getCompanyUserList();
+    this.getDoctorList();
   },
   computed: {
     // 计算属性来控制按钮的disabled状态
@@ -319,9 +413,51 @@ export default {
     }
   },
   methods: {
+    getDoctorList(){
+      listDoctor({ doctorType:1,isAudit:1 }).then(response => {
+        this.doctorList = response.rows;
+      });
+    },
+    getCompanyUserList(){
+      getSelectUserList().then(response => {
+          this.companyUserList = response.rows;
+        }).catch(error => {
+          console.error("获取员工列表失败:", error);
+        });
+    },
+    /** 修改按钮操作 */
+    handleUpdate(row) {
+      this.reset();
+      const deviceId = row.deviceId || this.ids
+      getDeviceInfo(deviceId).then(response => {
+        this.form = response.data;
+        this.open = true;
+        this.title = "修改设备信息";
+      });
+    },
+    /** 提交按钮 */
+    submitForm() {
+      this.$refs["form"].validate(valid => {
+        if (valid) {
+          if (this.form.deviceId != null) {
+            console.log("===============================" + JSON.stringify(this.form, null, 2))
+            updateDeviceInfo(this.form).then(response => {
+              this.msgSuccess("修改成功");
+              this.open = false;
+              this.getList();
+            });
+          } else {
+            addDeviceInfo(this.form).then(response => {
+              this.msgSuccess("新增成功");
+              this.open = false;
+              this.getList();
+            });
+          }
+        }
+      });
+    },
     rowClassName({row}) {
-      if (row.status && row.status.includes('偏')) {
-        // console.log("=============================" + JSON.stringify(row.status, null, 2))
+      if (row.status && (!row.status.includes('正常') && !row.status.includes('得分') && !row.status.includes('无结果') && !row.status.includes('窦性心率'))) {
         return 'text-red';
         // return true
       }
@@ -403,9 +539,18 @@ export default {
 
       }
     },
+    handleDetailsAndType(row){
+      if(row.userId != null){
+        this.handleDetails(row.deviceId,row.userId)
+      } else if(row.familyUserId !=null){
+        this.handleDetails(row.deviceId,row.familyUserId)
+      } else {
+        this.handleDetails(row.deviceId,null);
+      }
+    },
     /** 处理查询详情按钮点击事件 */
-    handleDetails(deviceId) {
-      this.$router.push({ name: 'details', params: { deviceId } });
+    handleDetails(deviceId,userId,type) {
+      this.$router.push({ name: 'details', params: { deviceId:deviceId,userId:userId,selectType:type } });
     },
 
     /** 查询设备信息列表 */
@@ -501,7 +646,9 @@ export default {
         this.exportLoading = true;
         return exportDeviceInfo(queryParams);
       }).then(response => {
-        this.download(response.msg);
+        debugger;
+        // this.download(response.msg);
+        watchDownload(response.msg);
         this.exportLoading = false;
       }).catch(() => { });
     },

src/views/watch/deviceInfo/my.vue

@@ -27,6 +27,12 @@
             </el-option>
           </el-select>
         </el-form-item>
+        <el-form-item label="健康状态" prop="isNormal">
+        <el-select v-model="queryParams.isNormal" placeholder="请选择健康状态" clearable size="small">
+          <el-option v-for="item in healthOptions" :key="item.value" :label="item.label" :value="item.value">
+          </el-option>
+        </el-select>
+      </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>
@@ -83,15 +89,26 @@
         <el-table-column type="selection" width="55" align="center" />
         <el-table-column label="设备id" align="center" prop="deviceId" />
         <el-table-column label="所属医生" align="center" prop="doctorName" />
-        <el-table-column  label="绑定用户"  align="center">
-          <template slot-scope="scope">
-              <el-link :underline="false" prop="item.userId" v-for="(item, index) in scope.row.users"  v-if="scope.row.users"  @click="handleDetails(scope.row.deviceId,item.userId,0)">{{item.nickName}}</el-link>
-          </template>
+        <el-table-column  label="绑定用户"  align="center" prop="watchUserName">
+          <!-- <template slot-scope="scope"> 
+          <div v-if="scope.row.users && scope.row.users!=null">
+              <el-link :underline="false" @click="handleDetails(scope.row.deviceId, scope.row.users.userId)">
+                {{ scope.row.users.nickName }}
+              </el-link>
+          </div>
+        </template> -->
+          
         </el-table-column>
-        <el-table-column  label="绑定家人用户"  align="center">
-            <template slot-scope="scope">
-                <el-link :underline="false" prop="item.userId" v-for="(item, index) in scope.row.familyUsers"  v-if="scope.row.familyUsers"  @click="handleDetails(scope.row.deviceId,item.userId,1)">{{item.nickName}}</el-link>
-            </template>
+        <el-table-column  label="绑定家人用户"  align="center" prop="familyUserName">
+            <!-- <template slot-scope="scope">
+              <div v-if="scope.row.familyUsers">
+                <div v-for="(item, index) in scope.row.familyUsers" :key="index">
+                  <el-link :underline="false" @click="handleDetails(scope.row.deviceId, item.userId)">
+                    {{ item.nickName }}
+                  </el-link>
+                </div>
+              </div>
+            </template> -->
         </el-table-column>
         <el-table-column label="设备编号" align="center" prop="deviceNumber" width="150"/>
         <el-table-column label="电量" align="center" prop="battery" />
@@ -106,13 +123,13 @@
             >
               最新数据
             </span>
-            <el-tag size="mini" :type="scope.row.isNormal == '异常'?'danger':'primary'">{{scope.row.isNormal}}</el-tag>
+            <el-tag size="mini" :type="scope.row.isNormal == 0?'danger':'primary'">{{ scope.row.isNormal === 1 ? '正常' : '异常' }}</el-tag>
   
           </template>
         </el-table-column>
         <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
           <template slot-scope="scope">
-            <el-button size="mini" type="text" icon="el-icon-view" @click="handleDetails(scope.row.deviceId,null,0)"
+            <el-button size="mini" type="text" icon="el-icon-view" @click="handleDetailsAndType(scope.row)"
               v-hasPermi="['watchApi:deviceInfo:query']">查询详情</el-button>
             <el-button size="mini" type="text" icon="el-icon-phone-outline" @click="handleSoSPeople(scope.row.deviceNumber)"
               v-hasPermi="['watchApi:deviceInfo:query']">查看紧急联系人</el-button>
@@ -186,7 +203,7 @@
   import Clockalarm from "@/components/DeviceInfo/SettingDialog/Clockalarm.vue";
   import Sedentary from "@/components/DeviceInfo/SettingDialog/Sedentary.vue";
   // import {getInfo} from "@/api/login"
-  
+  import {watchDownload} from "@/api/watch/common";
   export default {
     name: "my",
     components: {
@@ -282,6 +299,13 @@
             { max: 240, message: '详情最多240个字节', trigger: 'blur' }
           ]
         },
+        healthOptions: [{
+          value: 0,
+          label: '异常'
+        }, {
+          value: 1,
+          label: '正常'
+        }],
         options: [{
           value: '0',
           label: 'OFFLINE'
@@ -329,8 +353,7 @@
     },
     methods: {
       rowClassName({row}) {
-        if (row.status && row.status.includes('偏')) {
-          // console.log("=============================" + JSON.stringify(row.status, null, 2))
+        if (row.status && (!row.status.includes('正常') && !row.status.includes('得分') && !row.status.includes('无结果') && !row.status.includes('窦性心率'))) {
           return 'text-red';
           // return true
         }
@@ -412,6 +435,15 @@
   
         }
       },
+      handleDetailsAndType(row){
+        if(row.userId != null){
+          this.handleDetails(row.deviceId,row.userId,0)
+        } else if(row.familyUserId !=null ){
+          this.handleDetails(row.deviceId,row.familyUserId,1)
+        } else {
+          this.handleDetails(row.deviceId,null,0);
+        }
+      },
       /** 处理查询详情按钮点击事件 */
       handleDetails(deviceId,userId,type) {
         this.$router.push({ name: 'details', params: { deviceId:deviceId,userId:userId,selectType:type } });
@@ -510,7 +542,7 @@
           this.exportLoading = true;
           return exportMy(queryParams);
         }).then(response => {
-          this.download(response.msg);
+          watchDownload(response.msg);
           this.exportLoading = false;
         }).catch(() => { });
       },