feat: 微调设备状态模块样式，首页接口容错处理，梳理api文档资源

1 month ago · 0cad00f421
parent c70c88468a
commit 0cad00f421
22 changed files with 197 additions and 167 deletions
--- a/.env.production
+++ b/.env.production
@ -1,4 +1,4 @@
 # .env.production
 NODE_ENV = production
 VITE_APP_ENV = production
-VITE_APP_BASE_API = https://api.production.com
+VITE_APP_BASE_API = http://127.0.0.1:8000
--- a/api.md
+++ b/api.md
@ -53,7 +53,7 @@
 ```


-![alt text](微信图片_20250306134728.png)
+![alt text](localFiles/微信图片_20250306134728.png)

 # 检测总量汇总接口文档  

@ -117,7 +117,7 @@
    "errorMessage": ""
 }
 ```
-![alt text](1741680039157.png)
+![alt text](localFiles/1741680039157.png)
 # 设备信息接口文档  

 ## 1. 接口基本信息  
@ -181,7 +181,7 @@
    "errorMessage": ""
 }
 ```
-![alt text](1741680066982.png)
+![alt text](localFiles/1741680066982.png)
 # 车体检测问题分布接口文档  

 ## 1. 接口基本信息  
@ -294,7 +294,7 @@
    "errorMessage": ""
 }
 ```
-![alt text](1741680094060.png)
+![alt text](localFiles/1741680094060.png)
 # 实时监控画面接口文档  

 ## 1. 接口基本信息  
@ -334,4 +334,4 @@
  "errorMessage": ""
 }
 ```
-![alt text](1741680112113.png)
+![alt text](localFiles/1741680112113.png)
--- a/dashboard.md
+++ b/dashboard.md
@ -73,7 +73,7 @@
  "errorMessage": ""
 }
 ```
-![alt text](image-1.png)
+![alt text](localFiles/image-1.png)

 ## 二、设备历史视频列表接口  
 ### 2.1 接口基本信息  
@ -131,7 +131,7 @@
    "errorMessage": ""
 } 
 ```
-![alt text](image-2.png)
+![alt text](localFiles/image-2.png)

 # 撑杆监测模块（Pole Monitor）接口文档  

@ -217,7 +217,7 @@
    "errorMessage": ""
 }
 ```
-![alt text](image-3.png)
+![alt text](localFiles/image-3.png)

 ## 二、撑杆监测详情接口  
 ### 2.1 接口基本信息  
@ -300,7 +300,7 @@
    "errorMessage": ""
 } 
 ```
-![alt text](image-4.png)
+![alt text](localFiles/image-4.png)

 # 外观监测模块（Appearance Monitor）接口文档  
 ## 一、外观监测分页列表接口  
@ -386,7 +386,7 @@
    "errorMessage": ""
 }
 ```
-![alt text](image-5.png)
+![alt text](localFiles/image-5.png)

 # 外观监测模块（Appearance Monitor）接口文档  

@ -472,4 +472,4 @@
    "errorMessage": ""
 }
 ```
-![alt text](image-6.png)
+![alt text](localFiles/image-6.png)
--- a/index.html
+++ b/index.html
@ -2,7 +2,7 @@
 * @Author: donghao donghao@supervision.ltd
 * @Date: 2025-03-06 17:57:05
 * @LastEditors: donghao donghao@supervision.ltd
- * @LastEditTime: 2025-03-12 19:16:05
+ * @LastEditTime: 2025-03-18 11:08:34
 * @FilePath: \5G-Loading-Bay-Web\index.html
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 -->
@ -13,11 +13,11 @@
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>监控平台</title>
-    <script src="/public/adapter.min.js"></script>
-    <script src="/public/webrtcstreamer.js"></script>
-
+    
  </head>
  <body>
+    <script type="module" src="/adapter.min.js"></script>
+    <script type="module" src="/webrtcstreamer.js"></script>
    <div id="app"></div>
    <script type="module" src="/src/main.ts"></script>
  </body>
--- a/localFiles/1741680039157.png
+++ b/localFiles/1741680039157.png
--- a/localFiles/1741680066982.png
+++ b/localFiles/1741680066982.png
--- a/localFiles/1741680094060.png
+++ b/localFiles/1741680094060.png
--- a/localFiles/1741680112113.png
+++ b/localFiles/1741680112113.png
--- a/localFiles/image-1.png
+++ b/localFiles/image-1.png
--- a/localFiles/image-2.png
+++ b/localFiles/image-2.png
--- a/localFiles/image-3.png
+++ b/localFiles/image-3.png
--- a/localFiles/image-4.png
+++ b/localFiles/image-4.png
--- a/localFiles/image-5.png
+++ b/localFiles/image-5.png
--- a/localFiles/image-6.png
+++ b/localFiles/image-6.png
--- a/localFiles/image.png
+++ b/localFiles/image.png
--- a/localFiles/微信图片_20250306134728.png
+++ b/localFiles/微信图片_20250306134728.png
--- a/src/components/CustomTable/src/baseTable.scss
+++ b/src/components/CustomTable/src/baseTable.scss
@ -4,18 +4,17 @@
    border: none !important;
    background-color: transparent;
  }
+
  /* 去掉表头下边框 */
  .el-table__header-wrapper thead th {
    border-bottom: none !important;
    border: none !important;
-
  }
  /* 去掉单元格边框 */
  .el-table td,
  .el-table th.is-leaf {
    border-bottom: none !important;
    border: none !important;
-
  }
  /* 去掉纵向分割线 */
  .el-table--border::after,
@ -33,6 +32,7 @@
  .el-table th {
    border-right: none !important;
    border: none !important;
+    border-collapse: collapse !important;
  }

  .el-scrollbar__view {
@ -47,19 +47,35 @@
    cursor: pointer;
    .el-table__body {
      background: transparent;
+      border-collapse: collapse !important;
+      border: none !important;
      tr {
        color: #fff;
        background: transparent;
+
        &:hover td {
-          background-color: transparent;
+          background: transparent !important;
        }
        &:hover {
-          color: #37DBFF;
-          background: linear-gradient( 90deg, rgba(30,54,88,0) 0%, #0C4FAD 53%, rgba(65,117,190,0) 100%);
+          color: #37dbff;
+          background: linear-gradient(
+            90deg,
+            rgba(30, 54, 88, 0) 0%,
+            #0c4fad 53%,
+            rgba(65, 117, 190, 0) 100%
+          );
        }
-        &.selected-row{
-          color: #37DBFF;
-          background: linear-gradient( 90deg, rgba(30,54,88,0) 0%, #0C4FAD 53%, rgba(65,117,190,0) 100%);
+        &.selected-row {
+          color: #37dbff;
+          background: linear-gradient(
+            90deg,
+            rgba(30, 54, 88, 0) 0%,
+            #0c4fad 53%,
+            rgba(65, 117, 190, 0) 100%
+          );
+          // border-top: 1px solid;
+          // border-bottom: 1px solid;
+          // border-image: linear-gradient(90deg, rgba(12, 24, 64, 0), rgba(69, 174, 250, 1), rgba(102, 102, 102, 0));
        }
      }
    }
@ -75,7 +91,7 @@
      }
    }
  }
-  .fixed_pagination{
+  .fixed_pagination {
    padding: 12px 20px 0;
  }
  /* full_table */
@ -86,6 +102,7 @@
    .baseTable_box {
      cursor: default;
      .el-table__body {
+        border: none !important;
        background: linear-gradient(90deg, #082050 0%, #02102a 100%);
        tr {
          color: #fff;
@ -96,8 +113,12 @@
          &:nth-child(even) {
            background: linear-gradient(90deg, #102d65 0%, #081736 100%);
          }
+          &:hover {
+            border: none !important;
+          }
          &:hover td {
            background-color: transparent;
+          
          }
        }
      }
@ -113,7 +134,7 @@
        }
      }
    }
-    .fixed_pagination{
+    .fixed_pagination {
      padding: 28px 20px;
    }
  }
--- a/src/router/index.ts
+++ b/src/router/index.ts
@ -2,17 +2,17 @@
 * @Author: donghao donghao@supervision.ltd
 * @Date: 2025-03-06 13:53:22
 * @LastEditors: donghao donghao@supervision.ltd
- * @LastEditTime: 2025-03-10 09:59:29
+ * @LastEditTime: 2025-03-18 10:59:08
 * @FilePath: \vite-ai\data-dashboard\src\router\index.ts
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 */
-import { createRouter, createWebHistory } from "vue-router";
+import { createRouter, createWebHashHistory  } from "vue-router";
 import { useUserStore } from "@/stores/user";
 import { dashboardRoutes } from "./dashboard";
 import { buildHierarchyTree } from "@/utils/tree";

 const router = createRouter({
-  history: createWebHistory(),
+  history: createWebHashHistory (),
  routes: [
    {
      path: "/login",
@ -34,7 +34,6 @@ const router = createRouter({

 router.beforeEach((to) => {
  const userStore = useUserStore();
-
  if (to.meta.requiresAuth && !userStore.token) {
    return "/login";
  }
--- a/src/views/dashboard/DataOverview.vue
+++ b/src/views/dashboard/DataOverview.vue
@ -10,23 +10,19 @@
            </template>
            <template #extra>
              <div>
-                <el-button type="primary" class="month-btn" @click="getList('month')" :class="{ 'active-btn': activeBtn === 'month' }">
-                   月
+                <el-button type="primary" class="month-btn" @click="getList('month')"
+                  :class="{ 'active-btn': activeBtn === 'month' }">
+                  月
                </el-button>
                <el-button class="week-btn" @click="getList('week')" :class="{ 'active-btn': activeBtn === 'week' }">
-                   周
+                  周
                </el-button>
              </div>
            </template>
          </ContentHeader>
        </div>
        <div class="chart-container chart-container-bar">
-          <BarChart
-            :xData="xData"
-            :legendArr="legendArr"
-            :datas="datas"
-            :colorArr="colorArr"
-          />
+          <BarChart :xData="xData" :legendArr="legendArr" :datas="datas" :colorArr="colorArr" />
        </div>
      </div>
      <!-- 设备信息 -->
@ -51,15 +47,15 @@
          </div>
          <div class="device-list">
            <div class="device-card">
-              <div class="mb-3">车体检测设备: {{ carDevice.total }}</div>
+              <div class="mb-3">车体检测设备: {{ carDevice?.total || 0 }}</div>
              <DeviceStatus :deviceStatus="carDevice" />
            </div>
            <div class="device-card">
-              <div class="mb-3">撑杆检测设备: {{ poleDevice.total }}</div>
+              <div class="mb-3">撑杆检测设备: {{ poleDevice?.total || 0 }}</div>
              <DeviceStatus :deviceStatus="poleDevice" />
            </div>
            <div class="device-card">
-              <div class="mb-3">钩机检测设备: {{ excavatorDevice.total }}</div>
+              <div class="mb-3">钩机检测设备: {{ excavatorDevice?.total || 0 }}</div>
              <DeviceStatus :deviceStatus="excavatorDevice" />
            </div>
          </div>
@ -77,35 +73,32 @@
                <div class="w-[200px] bg_title bg_title_2"></div>
              </template>
              <template #extra>
-                  <el-select v-model="searchForm.car" placeholder="时间" class="custom-select" @change="getCarFault()">
-                    <el-option label="1月" value="1"></el-option>
-                    <el-option label="2月" value="2"></el-option>
-                    <el-option label="3月" value="3"></el-option>
-                    <el-option label="4月" value="4"></el-option>
-                    <el-option label="5月" value="5"></el-option>
-                    <el-option label="6月" value="6"></el-option>
-                    <el-option label="7月" value="7"></el-option>
-                    <el-option label="8月" value="8"></el-option>
-                    <el-option label="9月" value="9"></el-option>
-                    <el-option label="10月" value="10"></el-option>
-                    <el-option label="11月" value="11"></el-option>
-                    <el-option label="12月" value="12"></el-option>
+                <el-select v-model="searchForm.car" placeholder="时间" class="custom-select" @change="getCarFault()">
+                  <el-option label="1月" value="1"></el-option>
+                  <el-option label="2月" value="2"></el-option>
+                  <el-option label="3月" value="3"></el-option>
+                  <el-option label="4月" value="4"></el-option>
+                  <el-option label="5月" value="5"></el-option>
+                  <el-option label="6月" value="6"></el-option>
+                  <el-option label="7月" value="7"></el-option>
+                  <el-option label="8月" value="8"></el-option>
+                  <el-option label="9月" value="9"></el-option>
+                  <el-option label="10月" value="10"></el-option>
+                  <el-option label="11月" value="11"></el-option>
+                  <el-option label="12月" value="12"></el-option>
                </el-select>
              </template>
            </ContentHeader>
          </div>
          <div class="chart-container chart-pie-bg">
-            <PieChart
-              :data="carFaultTotal"
-              :colors="[
-                '#FF7C09',
-                '#0032FF',
-                '#04FFF2',
-                '#D19EFF',
-                '#FF0103',
-                '#9EFFF3',
-              ]"
-            />
+            <PieChart :data="carFaultTotal" :colors="[
+              '#FF7C09',
+              '#0032FF',
+              '#04FFF2',
+              '#D19EFF',
+              '#FF0103',
+              '#9EFFF3',
+            ]" />
          </div>
        </li>
        <li>
@ -117,26 +110,23 @@
              <template #extra>
                <el-select v-model="searchForm.pole" placeholder="时间" class="custom-select" @change="getPoleFault()">
                  <el-option label="1月" value="1"></el-option>
-                    <el-option label="2月" value="2"></el-option>
-                    <el-option label="3月" value="3"></el-option>
-                    <el-option label="4月" value="4"></el-option>
-                    <el-option label="5月" value="5"></el-option>
-                    <el-option label="6月" value="6"></el-option>
-                    <el-option label="7月" value="7"></el-option>
-                    <el-option label="8月" value="8"></el-option>
-                    <el-option label="9月" value="9"></el-option>
-                    <el-option label="10月" value="10"></el-option>
-                    <el-option label="11月" value="11"></el-option>
-                    <el-option label="12月" value="12"></el-option>
+                  <el-option label="2月" value="2"></el-option>
+                  <el-option label="3月" value="3"></el-option>
+                  <el-option label="4月" value="4"></el-option>
+                  <el-option label="5月" value="5"></el-option>
+                  <el-option label="6月" value="6"></el-option>
+                  <el-option label="7月" value="7"></el-option>
+                  <el-option label="8月" value="8"></el-option>
+                  <el-option label="9月" value="9"></el-option>
+                  <el-option label="10月" value="10"></el-option>
+                  <el-option label="11月" value="11"></el-option>
+                  <el-option label="12月" value="12"></el-option>
                </el-select>
              </template>
            </ContentHeader>
          </div>
          <div class="chart-container chart-pie-bg">
-            <PieChartSmall
-              :data="poleFaultTotal"
-              :colors="['#9DFFF3', '#FFA179']"
-            />
+            <PieChartSmall :data="poleFaultTotal" :colors="['#9DFFF3', '#FFA179']" />
          </div>
        </li>
      </ul>
@ -154,11 +144,11 @@
        </div>
        <div class="monitor-images">
          <div class="monitor-images-left">
-            <img :src="imageFault[0]?.url" alt="监控画面" />
+            <img :src="imageFault[0]?.url" />
            <div class="fault-info">{{ imageFault[0]?.fault_type }}</div>
          </div>
          <div class="monitor-images-right">
-            <img :src="imageFault[1]?.url" alt="监控画面" />
+            <img :src="imageFault[1]?.url"/>
            <div class="fault-info">{{ imageFault[1]?.fault_type }}</div>
          </div>
        </div>
@ -174,10 +164,11 @@ import BarChart from "./components/BarChart.vue";
 import PieChart from "./components/PieChart.vue";
 import PieChartSmall from "./components/PieChartSmall.vue";
 import DeviceStatus from "./components/DeviceStatus.vue";
-import { getDataOverviewApi,getDeviceInfowApi,getRecordFaultApi,getRealTimeApi } from '@/api/dashboard';
+import { getDataOverviewApi, getDeviceInfowApi, getRecordFaultApi, getRealTimeApi } from '@/api/dashboard';
+import { isSuccessApi } from "@/utils/forApi";

 defineOptions({
-    name: "DataOverviewWrap"
+  name: "DataOverviewWrap"
 });
 const xData = ref(["1月", "2月", "3月", "4月", "5月"]);
 const legendArr = ["车体检测", "撑杆检测"];
@ -190,13 +181,13 @@ const colorArr = [
  ["#FFDA8D", "#FFAC06"],
 ];
 const deviceStatus = ref({
-    onlineCount: 50,
-    errorCount: 10,
-    outlineCount: 10
+  onlineCount: 50,
+  errorCount: 10,
+  outlineCount: 10
 });
 const searchForm = reactive({
-    car: "1",
-    pole: "1",
+  car: "1",
+  pole: "1",
 });
 const deviceTotal = ref(0);
 const carDevice = ref({});
@ -206,53 +197,63 @@ const carFaultTotal = ref([]);
 const poleFaultTotal = ref([]);
 const imageFault = ref([]);
 const activeBtn = ref("month");
-const getList = async (dateType:string = "month") => {
-    activeBtn.value = dateType
-    const res = await getDataOverviewApi({ dateType })
-    const { data } = await res
+const getList = async (dateType: string = "month") => {
+  activeBtn.value = dateType
+  const res = await getDataOverviewApi({ dateType })
+  if (isSuccessApi(res)) {
+    const { data } = res
    datas.value[0] = data.appearance
    datas.value[1] = data.pole
-    if(dateType === "month") {
-      xData.value = data.dateArr.map((item:any) => {if(dateType === 'month') {
-          return item+'月'
+    if (dateType === "month") {
+      xData.value = data.dateArr.map((item: any) => {
+        if (dateType === 'month') {
+          return item + '月'
        }
      })
-    }else {
-      xData.value = ["周一","周二","周三","周四","周五","周六","周日"]
+    } else {
+      xData.value = ["周一", "周二", "周三", "周四", "周五", "周六", "周日"]
    }
    // console.log(data, 'getList_data')
+  }
+
 };
 const getDeviceInfo = async () => {
  try {
    const res = await getDeviceInfowApi();
-    const { data } = res;
-    deviceTotal.value = data.deviceTotal;
-    carDevice.value = data.appearance;
-    poleDevice.value = data.pole;
-    excavatorDevice.value = data.excavator;
-    // deviceStatus.value = data
+    if (isSuccessApi(res)) {
+      const { data } = res;
+      deviceTotal.value = data.deviceTotal;
+      carDevice.value = data.appearance;
+      poleDevice.value = data.pole;
+      excavatorDevice.value = data.excavator;
+      // deviceStatus.value = data
+    }
  } catch (error) {
    console.error('获取设备信息出错:', error);
  }
 }
 const getPoleFault = async () => {
  try {
-    const res = await getRecordFaultApi({dateType: 'month',value: searchForm.pole,type:"pole"});
-    const { data } = res;
-    poleFaultTotal.value = data;
-    // deviceStatus.value = data
-    console.log(data);
+    const res = await getRecordFaultApi({ dateType: 'month', value: searchForm.pole, type: "pole" });
+    if (isSuccessApi(res)) {
+      const { data } = res;
+      poleFaultTotal.value = data;
+      // deviceStatus.value = data
+      console.log(data);
+    }
  } catch (error) {
    console.error('获取设备信息出错:', error);
  }
 }
 const getCarFault = async () => {
  try {
-    const res = await getRecordFaultApi({dateType: 'month',value: searchForm.car,type:"appearance"});
-    const { data } = res;
-    carFaultTotal.value = data;
-    // deviceStatus.value = data
-    console.log(data);
+    const res = await getRecordFaultApi({ dateType: 'month', value: searchForm.car, type: "appearance" });
+    if (isSuccessApi(res)) {
+      const { data } = res;
+      carFaultTotal.value = data;
+      // deviceStatus.value = data
+      console.log(data);
+    }
  } catch (error) {
    console.error('获取设备信息出错:', error);
  }
@ -260,11 +261,13 @@ const getCarFault = async () => {

 const getRealTime = async () => {
  try {
-    const res = await getRealTimeApi({deviceType: ''});
-    const { data } = res;
-    imageFault.value = data;
-    // deviceStatus.value = data
-    console.log(data);
+    const res = await getRealTimeApi({ deviceType: '' });
+    if (isSuccessApi(res)) {
+      const { data } = res;
+      imageFault.value = data;
+      // deviceStatus.value = data
+      console.log(data);
+    }
  } catch (error) {
    console.error('获取设备信息出错:', error);
  }
--- a/src/views/dashboard/DeviceStatus.scss
+++ b/src/views/dashboard/DeviceStatus.scss
@ -1,9 +1,13 @@

-.device-status-content-box{
+.device-status-wrap{
+  height: 813px;
  background-image: url("@/assets/common/device_status_bg_line.png");
  background-size: 100% 100%;
  background-position: bottom;
  background-repeat: no-repeat;
+}
+.device-status-content-box{
+
  .el-scrollbar__view {
    background: transparent !important;
    height: 600px;
--- a/src/views/dashboard/DeviceStatus.vue
+++ b/src/views/dashboard/DeviceStatus.vue
@ -1,51 +1,53 @@
 <template>
    <div class="bg_basic_content">
-        <div class="device-status-header mt-[32px]">
-            <ContentHeader bgLayout="1855">
-                <template #title>
-                    <div class="w-[200px] bg_title bg_title_6">
-                    </div>
-                </template>
-            </ContentHeader>
-        </div>
-        <div class="px-[16px] device-status-content-box">
+        <div class="device-status-wrap">
+            <div class="device-status-header mt-[32px]">
+                <ContentHeader bgLayout="1855">
+                    <template #title>
+                        <div class="w-[200px] bg_title bg_title_6">
+                        </div>
+                    </template>
+                </ContentHeader>
+            </div>
+            <div class="px-[16px] device-status-content-box">

-            <div class="mt-[16px] bg-transparent baseTable_wrap full_table">
-                <template v-if="pagination.total > 0">
-                    <BaseTable class="bg-transparent baseTable_box" :total="pagination.total"
-                        :pageSize="pagination.pageSize" :dataSource="listData" :isFixedPagination="true"
-                        :columns="columns" :page="pagination.currentPage" @change="handleTableChange">
-                        <template v-slot:actionBar="{ row }">
-                            <ul class="flex table_action_box">
-                                <li class="flex items-center mr-[16px]" @click="openCurrent(row)">
-                                    <el-button text>
-                                        <span :style="{
-                                            fontSize: '14px',
-                                            color: '#37DBFF'
-                                        }">
-                                            即时视频
-                                        </span>
-                                    </el-button>
-                                </li>
-                                <li class="flex items-center" @click="openHistory(row)">
-                                    <el-button text>
-                                        <span :style="{
-                                            fontSize: '14px',
-                                            color: '#37DBFF'
-                                        }">
-                                            历史视频
-                                        </span>
-                                    </el-button>
-                                </li>
-                            </ul>
-                        </template>
-                    </BaseTable>
-                </template>
+                <div class="mt-[16px] bg-transparent baseTable_wrap full_table">
+                    <template v-if="pagination.total > 0">
+                        <BaseTable class="bg-transparent baseTable_box" :total="pagination.total"
+                            :pageSize="pagination.pageSize" :dataSource="listData" :isFixedPagination="true"
+                            :columns="columns" :page="pagination.currentPage" @change="handleTableChange">
+                            <template v-slot:actionBar="{ row }">
+                                <ul class="flex table_action_box">
+                                    <li class="flex items-center mr-[16px]" @click="openCurrent(row)">
+                                        <el-button text>
+                                            <span :style="{
+                                                fontSize: '14px',
+                                                color: '#37DBFF'
+                                            }">
+                                                即时视频
+                                            </span>
+                                        </el-button>
+                                    </li>
+                                    <li class="flex items-center" @click="openHistory(row)">
+                                        <el-button text>
+                                            <span :style="{
+                                                fontSize: '14px',
+                                                color: '#37DBFF'
+                                            }">
+                                                历史视频
+                                            </span>
+                                        </el-button>
+                                    </li>
+                                </ul>
+                            </template>
+                        </BaseTable>
+                    </template>
+                </div>
            </div>
+            <RealVideoModal v-model:value="isRealOpen" :info="currentRow" @close="isRealOpen = false" />
+            <HistoryVideoModal ref="historyModalRef" v-model:value="isHistoryOpen" :info="currentRow"
+                :historyVideos="historyVideos" @close="isHistoryOpen = false" />
        </div>
-        <RealVideoModal v-model:value="isRealOpen" :info="currentRow" @close="isRealOpen = false" />
-        <HistoryVideoModal ref="historyModalRef" v-model:value="isHistoryOpen" :info="currentRow"
-            :historyVideos="historyVideos" @close="isHistoryOpen = false" />
    </div>
 </template>

--- a/src/views/dashboard/components/HistoryVideoModal.vue
+++ b/src/views/dashboard/components/HistoryVideoModal.vue
@ -215,8 +215,9 @@ defineExpose({ loadData })
                width: 100%;
                display: flex;
                flex: 1;
-                // border-radius: 2px;
-                border: none;
+                border-radius: 2px;
+                // border: none;
+                border: 1px solid rgba(8, 139, 214, 0.4);



@ -224,7 +225,7 @@ defineExpose({ loadData })
                    width: 100%;

                    &.is-focused {
-                        // border: 1px solid rgba(8, 139, 214, 0.4);
+                       
                        box-shadow: none;
                    }