feat: 页面整体适配、数据mock

1 year ago · b2189f9c94
parent 10f687a43e
commit b2189f9c94
25 changed files with 464 additions and 155 deletions
--- a/mock/pools/alarmData.ts
+++ b/mock/pools/alarmData.ts
@ -1,3 +1,11 @@
+/*
+ * @Author: donghao donghao@supervision.ltd
+ * @Date: 2024-02-22 13:38:04
+ * @LastEditors: donghao donghao@supervision.ltd
+ * @LastEditTime: 2024-02-29 17:53:39
+ * @FilePath: \General-AI-Platform-Web-Client\mock\pools\alarmData.ts
+//  * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
+ */
 function generateRandomDateTime(year) {
  // 生成随机月份（1-12）
  const month = Math.floor(Math.random() * 12) + 1;
@ -23,23 +31,43 @@ function generateRandomDateTime(year) {
 }
 function fetchList(): Record<string, any>[] {
  const currList: Record<string, any>[] = [];
-  // const nameArr = ["玩手机监测", "控制器", "视频监控"];
-  // const deviceGroupArr = [""]
+  const nameArr = [
+    "摄像模组表面缺陷检测",
+    "镜片表面缺陷检测",
+    "中板表面缺陷检测",
+    "Logo表面缺陷检测",
+    "手机电池表面缺陷检测",
+    "部件表面缺陷检测",
+    "边距缺陷检测",
+    "成品组装缺陷检测",
+    "金属工件表面缺陷检测",
+    "管材表面缺陷检测"
+  ];
+
+  const codeArr = ["MSRF", "RL0F", "TLOC", "E1AIS"];
+  const deviceGroupArr = ["核心检测组", "无尘总装组", "送料监测线"];
+
  for (let i = 0; i < 35; i++) {
    currList.push({
      id: 1,
      createTime: generateRandomDateTime(2023),
      updateTime: "2023-10-17T02:35:41.14308Z",
-      name: "表面缺陷",
-      code: "DC0000" + i,
+      name: nameArr[Math.floor(Math.random() * 3)],
+      code: codeArr[Math.floor(Math.random() * 4)] + "-" + i,
      level: Math.floor(Math.random() * 6) + 1,
-      deviceGroup: "设备组" + parseInt(Math.random() * 10) + 1,
+      deviceGroup:
+        deviceGroupArr[Math.floor(Math.random() * 3)] +
+        (Math.floor(Math.random() * 3) + 1),
      remark: ""
    });
  }
  return currList;
 }

+// 缺陷从EXL里选几个就好了
+// 告警代码MSRF-0 RL0F HTFIF-02 TLOC-1 E1AIS-05
+// 设备组：核心检测组001 无尘总装组005 送料监测线02
+
 const currentData = fetchList();

 export const alarmListData = {
--- a/package.json
+++ b/package.json
@ -42,6 +42,7 @@
    "element-plus": "2.3.6",
    "fabric": "^5.3.0",
    "js-cookie": "^3.0.5",
+    "lib-flexible": "^0.3.2",
    "lottie-web": "^5.12.2",
    "mitt": "^3.0.0",
    "mockjs": "^1.1.0",
@ -53,12 +54,14 @@
    "responsive-storage": "^2.2.0",
    "sortablejs": "^1.15.0",
    "swiper": "^11.0.5",
+    "v3-infinite-loading": "^1.2.2",
    "vue": "^3.3.4",
    "vue-i18n": "^9.2.2",
    "vue-router": "^4.2.2",
    "vue-types": "^5.1.0",
-    "v3-infinite-loading": "^1.2.2",
-    "vue-waterfall-plugin-next": "^2.2.1"
+    "vue-waterfall-plugin-next": "^2.2.1",
+    "vue3-scale-box": "^0.1.9",
+    "安装插件": "link://安装插件"
  },
  "devDependencies": {
    "@commitlint/cli": "^17.6.6",
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@ -47,6 +47,9 @@ dependencies:
  js-cookie:
    specifier: ^3.0.5
    version: 3.0.5
+  lib-flexible:
+    specifier: ^0.3.2
+    version: 0.3.2
  lottie-web:
    specifier: ^5.12.2
    version: 5.12.2
@ -98,6 +101,12 @@ dependencies:
  vue-waterfall-plugin-next:
    specifier: ^2.2.1
    version: 2.2.1(vue@3.3.4)
+  vue3-scale-box:
+    specifier: ^0.1.9
+    version: 0.1.9
+  安装插件:
+    specifier: link://安装插件
+    version: link:../../../../安装插件

 devDependencies:
  "@commitlint/cli":
@ -5885,6 +5894,13 @@ packages:
      type-check: 0.4.0
    dev: true

+  /lib-flexible@0.3.2:
+    resolution:
+      {
+        integrity: sha512-9yowMWA70tKhKdCJDaltY0mNQG4OWo7pWKScnTp9aiSxS7s20ZYlwBRE3335nweOf5qKXVC7sDxJwMPM8/MFZg==
+      }
+    dev: false
+
  /lilconfig@2.1.0:
    resolution:
      {
@ -9764,6 +9780,13 @@ packages:
      - vue
    dev: false

+  /vue3-scale-box@0.1.9:
+    resolution:
+      {
+        integrity: sha512-URKBWivTHglmwoqQTs9UBA+lWg7pMuyYusxI5ghU1ks3qZHcM+jCF5uoSiwlKpSd9XP47R3sO12oS+Sc5lW9ig==
+      }
+    dev: false
+
  /vue@3.3.4:
    resolution:
      {
--- a/src/assets/dataScreen/common/deviceListLeft.svg
+++ b/src/assets/dataScreen/common/deviceListLeft.svg
@ -1,29 +0,0 @@
-<svg width="1399" height="794" viewBox="0 0 1399 794" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M29.8606 4.98828L6.48659 28.5681L4 761.016L33.3418 790H1368.14L1395 763.472V29.0593L1357.2 4.98828H29.8606Z" fill="#00183E" fill-opacity="0.8"/>
-<path d="M5.06619 27.1601L4.48939 27.742L4.4866 28.5613L2.00001 761.009L1.99716 761.849L2.5945 762.439L31.9363 791.422L32.5206 792H33.3418H1368.14H1368.97L1369.55 791.422L1396.41 764.895L1397 764.308V763.472V29.0593V27.9619L1396.07 27.3724L1358.28 3.30134L1357.79 2.98828H1357.2H29.8606H29.027L28.4402 3.58028L5.06619 27.1601Z" stroke="#20A0FD" stroke-opacity="0.4" stroke-width="4"/>
-<path d="M28.5 5.06816L7 27.3121V41.3349V52.5218H1395V36.0954V27.3121L1361 4.96582L28.5 5.06816Z" fill="#0B255C"/>
-<rect x="101" y="783.78" width="6" height="6.21928" fill="#01F8FE"/>
-<rect x="113" y="783.78" width="6" height="6.21928" fill="#01F8FE"/>
-<rect x="125" y="783.78" width="6" height="6.21928" fill="#01F8FE"/>
-<rect x="137" y="783.78" width="6" height="6.21928" fill="#01F8FE"/>
-<rect x="149" y="783.78" width="6" height="6.21928" fill="#01F8FE"/>
-<rect x="4" y="178.156" width="6" height="6.21928" fill="#09E8FB"/>
-<rect x="4" y="195.776" width="6" height="6.21928" fill="#FBE500"/>
-<rect x="4" y="213.396" width="6" height="6.21928" fill="#EF680F"/>
-<path d="M72 5.06787H160" stroke="#00D0D4" stroke-width="2"/>
-<path d="M4 17.5468V2H19L4 17.5468Z" fill="#0FDEF2" stroke="#0FDEF2" stroke-width="2"/>
-<rect x="249" y="783.78" width="116" height="6.21928" fill="#00FBFF"/>
-<rect x="551" y="783.78" width="6" height="6.21928" fill="#01F8FE"/>
-<rect x="563" y="783.78" width="6" height="6.21928" fill="#01F8FE"/>
-<rect x="575" y="783.78" width="6" height="6.21928" fill="#01F8FE"/>
-<rect x="587" y="783.78" width="6" height="6.21928" fill="#01F8FE"/>
-<rect x="599" y="783.78" width="6" height="6.21928" fill="#01F8FE"/>
-<rect x="699" y="783.78" width="116" height="6.21928" fill="#00FBFF"/>
-<rect x="1041" y="783.78" width="6" height="6.21928" fill="#01F8FE"/>
-<rect x="1053" y="783.78" width="6" height="6.21928" fill="#01F8FE"/>
-<rect x="1065" y="783.78" width="6" height="6.21928" fill="#01F8FE"/>
-<rect x="1077" y="783.78" width="6" height="6.21928" fill="#01F8FE"/>
-<rect x="1089" y="783.78" width="6" height="6.21928" fill="#01F8FE"/>
-<rect x="1189" y="783.78" width="116" height="6.21928" fill="#00FBFF"/>
-<path d="M4 75.8661L10 70.2144V130.329L4 124.677V75.8661Z" fill="#0FDEF2" stroke="#0FDEF2" stroke-width="2"/>
-</svg>
--- a/src/assets/dataScreen/common/deviceListRight.svg
+++ b/src/assets/dataScreen/common/deviceListRight.svg
@ -1,64 +0,0 @@
-<svg width="433" height="792" viewBox="0 0 433 792" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g filter="url(#filter0_iii_8592_97022)">
-<path d="M2 774.13V3H416.766L432 21.6778V774.13L418.24 791H15.76L2 774.13Z" fill="#00183E" fill-opacity="0.9"/>
-</g>
-<path d="M2 774.13V3H416.766L432 21.6778V774.13L418.24 791H15.76L2 774.13Z" stroke="#20A0FD" stroke-opacity="0.4" stroke-width="1.5"/>
-<path d="M413 12.88L415.88 10L425 19.12L422.12 22L413 12.88Z" fill="white"/>
-<path d="M378 3H416.86L432 20.6882V50" stroke="#2ABAF0" stroke-width="2"/>
-<g clip-path="url(#clip0_8592_97022)">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M3 1H451.786V51H3V1Z" fill="url(#paint0_linear_8592_97022)"/>
-<line x1="3" y1="50.5" x2="11" y2="50.5" stroke="#3656C8"/>
-<line x1="13" y1="50.5" x2="21" y2="50.5" stroke="#3656C8" stroke-opacity="0.6"/>
-<line x1="23" y1="50.5" x2="31" y2="50.5" stroke="#3656C8" stroke-opacity="0.2"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M3 1H451.786V3H3V1Z" fill="url(#paint1_linear_8592_97022)"/>
-<rect x="3" y="18" width="2" height="16" fill="#3656C8"/>
-</g>
-<path opacity="0.3" d="M405.464 50.0007H37L37.7086 51C38.042 50.9963 405.909 50.9364 405.874 50.9963L409 47.0029C409 46.9993 408.479 46 408.479 46L405.464 50.0007Z" fill="#3656C8"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M205.476 50H230.524V51H205.476V50Z" fill="url(#paint2_linear_8592_97022)"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M405.528 48H421.554L418.027 51H402L405.528 48Z" fill="url(#paint3_linear_8592_97022)"/>
-<path d="M2 37V2H74" stroke="#2CCAFF" stroke-width="3"/>
-<defs>
-<filter id="filter0_iii_8592_97022" x="1.25" y="-1.75" width="431.5" height="797.5" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
-<feFlood flood-opacity="0" result="BackgroundImageFix"/>
-<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
-<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
-<feOffset dy="-4"/>
-<feGaussianBlur stdDeviation="4"/>
-<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
-<feColorMatrix type="matrix" values="0 0 0 0 0.109804 0 0 0 0 0.498039 0 0 0 0 0.94902 0 0 0 0.6 0"/>
-<feBlend mode="normal" in2="shape" result="effect1_innerShadow_8592_97022"/>
-<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
-<feOffset dy="-4"/>
-<feGaussianBlur stdDeviation="4"/>
-<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
-<feColorMatrix type="matrix" values="0 0 0 0 0.109804 0 0 0 0 0.498039 0 0 0 0 0.94902 0 0 0 0.6 0"/>
-<feBlend mode="normal" in2="effect1_innerShadow_8592_97022" result="effect2_innerShadow_8592_97022"/>
-<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
-<feOffset dy="4"/>
-<feGaussianBlur stdDeviation="4"/>
-<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
-<feColorMatrix type="matrix" values="0 0 0 0 0.109804 0 0 0 0 0.498039 0 0 0 0 0.94902 0 0 0 0.6 0"/>
-<feBlend mode="normal" in2="effect2_innerShadow_8592_97022" result="effect3_innerShadow_8592_97022"/>
-</filter>
-<linearGradient id="paint0_linear_8592_97022" x1="3" y1="34.7505" x2="451.786" y2="34.7505" gradientUnits="userSpaceOnUse">
-<stop stop-color="#3252C6" stop-opacity="0"/>
-<stop stop-color="#3252C6" stop-opacity="0.4"/>
-<stop offset="1" stop-color="#3252C6" stop-opacity="0"/>
-</linearGradient>
-<linearGradient id="paint1_linear_8592_97022" x1="3" y1="2.00164" x2="451.786" y2="2.00164" gradientUnits="userSpaceOnUse">
-<stop stop-color="#3656C8"/>
-<stop offset="1" stop-color="#2994FC" stop-opacity="0"/>
-</linearGradient>
-<linearGradient id="paint2_linear_8592_97022" x1="218" y1="50" x2="218" y2="51" gradientUnits="userSpaceOnUse">
-<stop stop-color="#FEF643"/>
-<stop offset="1" stop-color="#FFA217"/>
-</linearGradient>
-<linearGradient id="paint3_linear_8592_97022" x1="411.777" y1="48" x2="411.777" y2="51" gradientUnits="userSpaceOnUse">
-<stop stop-color="#FEF643"/>
-<stop offset="1" stop-color="#FFA217"/>
-</linearGradient>
-<clipPath id="clip0_8592_97022">
-<rect width="430" height="50" fill="white" transform="translate(3 1)"/>
-</clipPath>
-</defs>
-</svg>
--- a/src/assets/dataScreen/common/tipIcon.svg
+++ b/src/assets/dataScreen/common/tipIcon.svg
@ -0,0 +1,5 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12 22C14.7614 22 17.2614 20.8807 19.0711 19.0711C20.8807 17.2614 22 14.7614 22 12C22 9.2386 20.8807 6.7386 19.0711 4.92893C17.2614 3.11929 14.7614 2 12 2C9.2386 2 6.7386 3.11929 4.92893 4.92893C3.11929 6.7386 2 9.2386 2 12C2 14.7614 3.11929 17.2614 4.92893 19.0711C6.7386 20.8807 9.2386 22 12 22Z" stroke="#FAAD14" stroke-width="1.5" stroke-linejoin="round"/>
+<path d="M12 14.3125V12.3125C13.6568 12.3125 15 10.9693 15 9.3125C15 7.65565 13.6568 6.3125 12 6.3125C10.3432 6.3125 9 7.65565 9 9.3125" stroke="#FAAD14" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12 18.8125C12.6904 18.8125 13.25 18.2529 13.25 17.5625C13.25 16.8722 12.6904 16.3125 12 16.3125C11.3097 16.3125 10.75 16.8722 10.75 17.5625C10.75 18.2529 11.3097 18.8125 12 18.8125Z" fill="#FAAD14"/>
+</svg>
--- a/src/assets/dataScreen/deviceList/deviceListLeft.svg
+++ b/src/assets/dataScreen/deviceList/deviceListLeft.svg
@ -0,0 +1,7 @@
+<svg width="1401" height="800" viewBox="0 0 1401 800" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M26.7915 4.10352L4 27.6976V767.839L30.3369 795.104H1368.21L1391 771.509L1396 27.6976L1360 4.10352H26.7915Z" fill="#00183E" fill-opacity="0.8"/>
+<path d="M2.56153 26.3081L2 26.8894V27.6976V767.839V768.647L2.56153 769.229L28.8984 796.493L29.4881 797.104H30.3369H1368.21H1369.06L1369.65 796.493L1392.44 772.899L1392.99 772.323L1393 771.523L1398 27.7111L1398.01 26.6219L1397.1 26.0249L1361.1 2.43076L1360.6 2.10352H1360H26.7915H25.9428L25.3531 2.71398L2.56153 26.3081Z" stroke="#20A0FD" stroke-opacity="0.4" stroke-width="4"/>
+<path d="M25.5 4.10352L4 26.6035V40.7878V52.1035H1392V35.488V26.6035L1358 4L25.5 4.10352Z" fill="#0B255C"/>
+<path d="M69 3H157" stroke="#00D0D4" stroke-width="2"/>
+<path d="M4 19.8293V4.10352H19L4 19.8293Z" fill="#0FDEF2" stroke="#0FDEF2" stroke-width="2"/>
+</svg>
--- a/src/assets/dataScreen/deviceList/deviceListLeftBottom.svg
+++ b/src/assets/dataScreen/deviceList/deviceListLeftBottom.svg
@ -0,0 +1,20 @@
+<svg width="1204" height="8" viewBox="0 0 1204 8" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect y="0.78125" width="6" height="6.29032" fill="#01F8FE"/>
+<rect x="12" y="0.78125" width="6" height="6.29032" fill="#01F8FE"/>
+<rect x="24" y="0.78125" width="6" height="6.29032" fill="#01F8FE"/>
+<rect x="36" y="0.78125" width="6" height="6.29032" fill="#01F8FE"/>
+<rect x="48" y="0.78125" width="6" height="6.29032" fill="#01F8FE"/>
+<rect x="148" y="0.78125" width="116" height="6.29032" fill="#00FBFF"/>
+<rect x="450" y="0.78125" width="6" height="6.29032" fill="#01F8FE"/>
+<rect x="462" y="0.78125" width="6" height="6.29032" fill="#01F8FE"/>
+<rect x="474" y="0.78125" width="6" height="6.29032" fill="#01F8FE"/>
+<rect x="486" y="0.78125" width="6" height="6.29032" fill="#01F8FE"/>
+<rect x="498" y="0.78125" width="6" height="6.29032" fill="#01F8FE"/>
+<rect x="598" y="0.78125" width="116" height="6.29032" fill="#00FBFF"/>
+<rect x="940" y="0.78125" width="6" height="6.29032" fill="#01F8FE"/>
+<rect x="952" y="0.78125" width="6" height="6.29032" fill="#01F8FE"/>
+<rect x="964" y="0.78125" width="6" height="6.29032" fill="#01F8FE"/>
+<rect x="976" y="0.78125" width="6" height="6.29032" fill="#01F8FE"/>
+<rect x="988" y="0.78125" width="6" height="6.29032" fill="#01F8FE"/>
+<rect x="1088" y="0.78125" width="116" height="6.29032" fill="#00FBFF"/>
+</svg>
--- a/src/assets/dataScreen/deviceList/deviceListLeftLeft.svg
+++ b/src/assets/dataScreen/deviceList/deviceListLeftLeft.svg
@ -0,0 +1,6 @@
+<svg width="8" height="155" viewBox="0 0 8 155" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M1 8.8687L7 3.15186V63.9583L1 58.2415V8.8687Z" fill="#0FDEF2" stroke="#0FDEF2" stroke-width="2"/>
+<rect x="1" y="112.184" width="6" height="6.29032" fill="#09E8FB"/>
+<rect x="1" y="130.007" width="6" height="6.29032" fill="#FBE500"/>
+<rect x="1" y="147.829" width="6" height="6.29032" fill="#EF680F"/>
+</svg>
--- a/src/assets/dataScreen/deviceList/deviceListRight.svg
+++ b/src/assets/dataScreen/deviceList/deviceListRight.svg
@ -0,0 +1,64 @@
+<svg width="433" height="800" viewBox="0 0 433 800" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g filter="url(#filter0_iii_10194_57920)">
+<path d="M2 782.024V3.01025H416.766L432 21.8059V782.024L418.24 799H15.76L2 782.024Z" fill="#00183E" fill-opacity="0.9"/>
+</g>
+<path d="M2 782.024V3.01025H416.766L432 21.8059V782.024L418.24 799H15.76L2 782.024Z" stroke="#20A0FD" stroke-opacity="0.4" stroke-width="1.5"/>
+<path d="M413 12.9404L415.88 10.0459L425 19.2118L422.12 22.1064L413 12.9404Z" fill="white"/>
+<path d="M378 3.01025H416.86L432 20.7875V50.247" stroke="#2ABAF0" stroke-width="2"/>
+<g clip-path="url(#clip0_10194_57920)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M3 1H451.786V51.2519H3V1Z" fill="url(#paint0_linear_10194_57920)"/>
+<line x1="3" y1="50.5" x2="11" y2="50.5" stroke="#3656C8"/>
+<line x1="13" y1="50.5" x2="21" y2="50.5" stroke="#3656C8" stroke-opacity="0.6"/>
+<line x1="23" y1="50.5" x2="31" y2="50.5" stroke="#3656C8" stroke-opacity="0.2"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M3 1H451.786V3.01008H3V1Z" fill="url(#paint1_linear_10194_57920)"/>
+<rect x="3" y="18" width="2" height="16" fill="#3656C8"/>
+</g>
+<path opacity="0.3" d="M405.464 50.2479H37L37.7086 51.2522C38.042 51.2486 405.909 51.1883 405.874 51.2486L409 47.235C409 47.2314 408.479 46.2271 408.479 46.2271L405.464 50.2479Z" fill="#3656C8"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M205.476 50.2466H230.524V51.2516H205.476V50.2466Z" fill="url(#paint2_linear_10194_57920)"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M405.528 48.2373H421.554L418.027 51.2524H402L405.528 48.2373Z" fill="url(#paint3_linear_10194_57920)"/>
+<path d="M2 37.1817V2.00537H74" stroke="#2CCAFF" stroke-width="3"/>
+<defs>
+<filter id="filter0_iii_10194_57920" x="1.25" y="-1.73975" width="431.5" height="805.49" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="-4"/>
+<feGaussianBlur stdDeviation="4"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.109804 0 0 0 0 0.498039 0 0 0 0 0.94902 0 0 0 0.6 0"/>
+<feBlend mode="normal" in2="shape" result="effect1_innerShadow_10194_57920"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="-4"/>
+<feGaussianBlur stdDeviation="4"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.109804 0 0 0 0 0.498039 0 0 0 0 0.94902 0 0 0 0.6 0"/>
+<feBlend mode="normal" in2="effect1_innerShadow_10194_57920" result="effect2_innerShadow_10194_57920"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="4"/>
+<feGaussianBlur stdDeviation="4"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.109804 0 0 0 0 0.498039 0 0 0 0 0.94902 0 0 0 0.6 0"/>
+<feBlend mode="normal" in2="effect2_innerShadow_10194_57920" result="effect3_innerShadow_10194_57920"/>
+</filter>
+<linearGradient id="paint0_linear_10194_57920" x1="3" y1="34.9205" x2="451.786" y2="34.9205" gradientUnits="userSpaceOnUse">
+<stop stop-color="#3252C6" stop-opacity="0"/>
+<stop stop-color="#3252C6" stop-opacity="0.4"/>
+<stop offset="1" stop-color="#3252C6" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint1_linear_10194_57920" x1="3" y1="2.00668" x2="451.786" y2="2.00668" gradientUnits="userSpaceOnUse">
+<stop stop-color="#3656C8"/>
+<stop offset="1" stop-color="#2994FC" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint2_linear_10194_57920" x1="218" y1="50.2466" x2="218" y2="51.2516" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FEF643"/>
+<stop offset="1" stop-color="#FFA217"/>
+</linearGradient>
+<linearGradient id="paint3_linear_10194_57920" x1="411.777" y1="48.2373" x2="411.777" y2="51.2524" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FEF643"/>
+<stop offset="1" stop-color="#FFA217"/>
+</linearGradient>
+<clipPath id="clip0_10194_57920">
+<rect width="430" height="50.2519" fill="white" transform="translate(3 1)"/>
+</clipPath>
+</defs>
+</svg>
--- a/src/components/DsBox/src/dsBox2.tsx
+++ b/src/components/DsBox/src/dsBox2.tsx
@ -2,7 +2,7 @@
 * @Author: donghao donghao@supervision.ltd
 * @Date: 2024-02-26 17:24:07
 * @LastEditors: donghao donghao@supervision.ltd
- * @LastEditTime: 2024-02-28 09:48:45
+ * @LastEditTime: 2024-02-29 14:37:59
 * @FilePath: \General-AI-Platform-Web-Client\src\components\DsBox\src\dsBox2.tsx
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 */
@ -10,8 +10,8 @@
 * @背景框尺寸说明
 *
 * 1、整体框
- * w1 1856px w2 1392px w3 430px w4 364px
- * h1 788px  h2 763px h3 608px
+ * w1 1856px w2 1401px w3 430px w4 364px w5 434px
+ * h1 800px  h2 763px h3 608px
 * 默认标题
 */

@ -61,14 +61,14 @@ export default defineComponent({
          break;
        case "w2h1":
          options = {
-            width: "1391px",
-            height: "788px"
+            width: "1401px",
+            height: "800px"
          };
          break;
-        case "w3h1":
+        case "w5h1":
          options = {
-            width: "430px",
-            height: "788px"
+            width: "434px",
+            height: "800px"
          };
          break;
        case "w4h3":
@ -77,7 +77,7 @@ export default defineComponent({
            height: "604px"
          };
          break;
-        case "w5h1":
+        case "w5h3":
          options = {
            width: "434px",
            height: "608px"
--- a/src/layout/components/dsFooterbar.vue
+++ b/src/layout/components/dsFooterbar.vue
@ -115,7 +115,7 @@ $--noneSelectedColor: rgb(255 255 255 / 80%);
  .menu_icon {
    width: 66px;
    height: 66px;
-    opacity: 0.8;
+    opacity: 0.5;
    margin-bottom: 15px;
  }

@ -123,6 +123,7 @@ $--noneSelectedColor: rgb(255 255 255 / 80%);
    font-size: 14px;
    color: $--noneSelectedColor;
    text-align: center;
+    color: #666666;

    & > li {
      cursor: pointer;
--- a/src/layout/dataScreenIndex.vue
+++ b/src/layout/dataScreenIndex.vue
@ -12,6 +12,7 @@ import { ref, reactive, computed, onMounted, onBeforeMount } from "vue";
 import DsNavbar from "./components/dsNavbar.vue";
 import DsFooterbar from "./components/dsFooterbar.vue";
 import { useRoute } from "vue-router";
+import ScaleBox from "vue3-scale-box";

 const route = useRoute();
 const appWrapperRef = ref();
@ -91,7 +92,7 @@ useResizeObserver(appWrapperRef, entries => {
    isAutoCloseSidebar = false;
  }
 });
-
+// TODO 动态设置屏幕高度
 // 改变路由
 function changeRoute(routes) {
  console.log("changeRoute_routes", routes);
@ -115,20 +116,20 @@ onBeforeMount(() => {
    ref="appWrapperRef"
    :class="['dsPage_wrap', set.classes, route?.meta?.bodyClass]"
  >
-    <dv-full-screen-container>
-      <div class="w-full ds_app_box">
-        <header>
-          <DsNavbar />
-        </header>
-        <!-- 主体内容 -->
+    <div class="w-full ds_app_box">
+      <header>
+        <DsNavbar />
+      </header>
+      <!-- 主体内容 -->
+      <ScaleBox :width="1920" :height="1080" class="ds_scale_wrap">
        <main>
          <router-view />
        </main>
-        <footer class="w-full">
-          <DsFooterbar />
-        </footer>
-      </div>
-    </dv-full-screen-container>
+      </ScaleBox>
+      <footer class="w-full">
+        <DsFooterbar />
+      </footer>
+    </div>
  </div>
 </template>

@ -137,22 +138,25 @@ onBeforeMount(() => {
  position: relative;
  width: 100%;
  height: 100%;
-  background-color: #000;
  color: white;
+  font-size: 16px;
 }
 .ds_app_box {
  header {
    height: 64px;
  }
  main {
-    height: calc(100vh - 64px);
+    padding-top: 64px;
+    position: relative;
+    // height: calc(100vh - 64px);
  }
  footer {
    position: fixed;
    background-color: transparent;
    height: 120px;
    bottom: 0;
-    z-index: 1;
+    z-index: 10000;
+    // background-color: red;
  }
  &::after {
    content: "";
--- a/src/main.ts
+++ b/src/main.ts
@ -1,3 +1,11 @@
+/*
+ * @Author: donghao donghao@supervision.ltd
+ * @Date: 2024-02-22 13:38:04
+ * @LastEditors: donghao donghao@supervision.ltd
+ * @LastEditTime: 2024-02-29 10:18:23
+ * @FilePath: \General-AI-Platform-Web-Client\src\main.ts
+ * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
+ */
 import App from "./App.vue";
 import router from "./router";
 import { setupStore } from "@/store";
--- a/src/pages/dataScreen/components/deviceStatus.vue
+++ b/src/pages/dataScreen/components/deviceStatus.vue
@ -2,7 +2,7 @@
 * @Author: donghao donghao@supervision.ltd
 * @Date: 2024-01-12 13:27:07
 * @LastEditors: donghao donghao@supervision.ltd
- * @LastEditTime: 2024-02-28 16:24:16
+ * @LastEditTime: 2024-02-29 15:32:17
 * @FilePath: \General-AI-Platform-Web-Client\src\views\workbench\components\DeviceStatus.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 -->
--- a/src/pages/dataScreen/components/modelCofrimBox.vue
+++ b/src/pages/dataScreen/components/modelCofrimBox.vue
@ -0,0 +1,90 @@
+<!--
+ * @Author: donghao donghao@supervision.ltd
+ * @Date: 2024-02-29 14:54:59
+ * @LastEditors: donghao donghao@supervision.ltd
+ * @LastEditTime: 2024-02-29 17:57:31
+ * @FilePath: \General-AI-Platform-Web-Client\src\pages\dataScreen\components\modelCofrimBox.vue
+ * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
+-->
+<script setup lang="ts">
+import { ref, PropType } from "vue";
+
+defineOptions({
+  name: "ModelCofrimBox"
+});
+
+const props = defineProps({
+  isOpen: {
+    type: Boolean as PropType<boolean>,
+    default: false
+  },
+  title: {
+    type: String as PropType<string>,
+    default: ""
+  },
+  content: {
+    type: String as PropType<string>,
+    default: ""
+  }
+});
+
+const dialogVisible = ref<boolean>(true);
+
+// const emit = defineEmits(["update:isOpen"]);
+</script>
+
+<template>
+  <div class="dialog_confirm_wrap">
+    <el-dialog
+      v-model="dialogVisible"
+      width="560"
+      draggable
+      overflow
+      :show-close="false"
+    >
+      <template #header>
+        <div class="flex items-center dialog_header">
+          <div class="tip_icon" />
+          <p class="pl-[8px]">{{ props.title }}</p>
+        </div>
+      </template>
+      <div class="main_info">
+        <p>确定删除玩手机监测告警吗？删除后将找不到此告警，请谨慎操作。</p>
+        <div class="flex justify-end dialog_footer">
+          <el-button @click="dialogVisible = false">取消</el-button>
+          <el-button type="primary" @click="dialogVisible = false">
+            确认
+          </el-button>
+        </div>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<style lang="scss">
+.dialog_confirm_wrap {
+  .el-dialog {
+    border-radius: 8px 8px 8px 8px;
+    border: 1px solid #438cff;
+    background: #021f4e;
+    font-size: 16px;
+    .el-dialog__header {
+      padding: 40px 24px 0;
+    }
+    .el-dialog__body {
+      padding: 14px 24px 40px;
+    }
+    .tip_icon {
+      width: 20px;
+      height: 20px;
+      background: url("@/assets/dataScreen/common/tipIcon.svg") no-repeat;
+      background-size: contain;
+    }
+    .main_info {
+      & > p {
+        padding-bottom: 32px;
+      }
+    }
+  }
+}
+</style>
--- a/src/pages/dataScreen/main.ts
+++ b/src/pages/dataScreen/main.ts
@ -2,7 +2,7 @@
 * @Author: donghao donghao@supervision.ltd
 * @Date: 2024-02-22 14:04:38
 * @LastEditors: donghao donghao@supervision.ltd
- * @LastEditTime: 2024-02-27 10:04:19
+ * @LastEditTime: 2024-02-29 10:42:01
 * @FilePath: \General-AI-Platform-Web-Client\src\pages\dataScreen\main.ts
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 */
--- a/src/pages/dataScreen/router/index.ts
+++ b/src/pages/dataScreen/router/index.ts
@ -100,7 +100,7 @@ export function resetRouter() {
 const whiteList = ["/login"];

 const { VITE_HIDE_HOME } = import.meta.env;
-
+// TODO 暂时将以下登录鉴权注释
 router.beforeEach((to: ToRouteType, _from, next) => {
  if (to.meta?.keepAlive) {
    handleAliveRoute(to, "add");
--- a/src/pages/dataScreen/views/alarm/alarmInfoIndex.scss
+++ b/src/pages/dataScreen/views/alarm/alarmInfoIndex.scss
@ -9,3 +9,63 @@
  // bgAlarmTable.svg
  background: url("@/assets/dataScreen/common/bgAlarmTable.svg") no-repeat;
 }
+
+.dialog_confirm_wrap {
+  .el-dialog {
+    border-radius: 8px 8px 8px 8px;
+    border: 1px solid #438cff;
+    background: #021f4e;
+    font-size: 16px;
+    .el-dialog__header {
+      padding: 40px 24px 0;
+    }
+    .el-dialog__body {
+      padding: 14px 24px 40px;
+    }
+    .tip_icon {
+      width: 20px;
+      height: 20px;
+      background: url("@/assets/dataScreen/common/tipIcon.svg") no-repeat;
+      background-size: contain;
+    }
+    .main_info {
+      & > p {
+        padding-bottom: 32px;
+      }
+    }
+  }
+}
+
+// 大屏的列表
+// .ds_table {
+.baseTable_wrap {
+  .ds_table.baseTable_box {
+    .el-table__body {
+      /* 表格宽度占据父容器的100% */
+      tr {
+        & > td:nth-child(1) {
+          border-left: 1px solid transparent;
+          border-radius: 4px 0 0 4px;
+        }
+
+        & > td:last-child {
+          border-right: 1px solid transparent !important;
+          border-radius: 0 4px 4px 0;
+        }
+      }
+    }
+
+    .el-table__header > thead {
+      th {
+        background-color: rgba(21, 77, 221, 0.1) !important;
+      }
+    }
+
+    &.el-table td.el-table__cell {
+      border-top: 1px solid transparent;
+      border-bottom: 1px solid transparent;
+      background: rgba(249, 251, 255, 0.05);
+    }
+  }
+}
+// }
--- a/src/pages/dataScreen/views/alarm/alarmInfoIndex.vue
+++ b/src/pages/dataScreen/views/alarm/alarmInfoIndex.vue
@ -2,7 +2,7 @@
 * @Author: donghao donghao@supervision.ltd
 * @Date: 2024-02-23 09:55:26
 * @LastEditors: donghao donghao@supervision.ltd
- * @LastEditTime: 2024-02-27 11:27:38
+ * @LastEditTime: 2024-02-29 17:57:02
 * @FilePath: \General-AI-Platform-Web-Client\src\pages\dataScreen\views\alarm\alarmInfoIndex.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 -->
@ -12,6 +12,7 @@ import { getAlarmList } from "@/api/list";
 import { onMounted, ref, reactive, h } from "vue";
 import { BaseTable } from "@/components/CustomTable";
 import { getConfig } from "@/config";
+// import ModelCofrimBox from "../../components/modelCofrimBox.vue";

 defineOptions({
  name: "alarmInfoIndex"
@ -65,14 +66,22 @@ const alarmLevelStatusEnum: Record<string, any>[] = [
  }
 ];

+const deleteModel = reactive<{
+  isShowDelete: boolean;
+}>({
+  isShowDelete: false
+});
+
+const currentRow = ref<Record<string, any>>({});
+
 function handleDelete(row) {
  console.log(row, "handleDelete_row");
 }

 const columns = [
-  {
-    type: "selection"
-  },
+  // {
+  //   type: "selection"
+  // },
  {
    label: "告警名称",
    property: "name"
@ -209,10 +218,14 @@ function handleTableChange(record) {
 /**操作栏事件 */
 function handleDel(row) {
  console.log(row, "handleDel");
+  deleteModel.isShowDelete = true;
 }

 onMounted(() => {
  getList();
+  // setInterval(() => {
+  //   console.log(123);
+  // }, 1000);
 });
 </script>

@ -223,7 +236,6 @@ onMounted(() => {
    <div class="alarm_main_info">
      <DsBox2 bgClass="bg_alarmTable">
        <template #default>
-          <!-- <div class="w-full h-full">表格</div> -->
          <div class="main alarm_wrap pt-[18px] px-[24px]">
            <el-form
              :inline="true"
@ -236,8 +248,8 @@ onMounted(() => {
                  placeholder="告警名称"
                  clearable
                >
-                  <el-option label="名称1" value="1" />
-                  <el-option label="名称2" value="2" />
+                  <!-- <el-option label="名称1" value="1" />
+                  <el-option label="名称2" value="2" /> -->
                </el-select>
              </el-form-item>
              <el-form-item label="告警等级">
@ -300,6 +312,43 @@ onMounted(() => {
        </template>
      </DsBox2>
    </div>
+
+    <!-- <ModelCofrimBox
+      v-model:isOpen="deleteModel.isShowDelete"
+      title="确定删除玩手机监测告警吗？"
+      content="确定删除玩手机监测告警吗？删除后将找不到此告警，请谨慎操作。"
+    /> -->
+    <div class="dialog_confirm_wrap">
+      <el-dialog
+        v-model="deleteModel.isShowDelete"
+        width="560"
+        draggable
+        overflow
+        :show-close="false"
+      >
+        <template #header>
+          <div class="flex items-center dialog_header">
+            <div class="tip_icon" />
+            <p class="pl-[8px]">确定删除{{ currentRow.name }}监测告警吗？</p>
+          </div>
+        </template>
+        <div class="main_info">
+          <p>
+            确定删除{{
+              currentRow.name
+            }}监测告警吗？删除后将找不到此告警，请谨慎操作。
+          </p>
+          <div class="flex justify-end dialog_footer">
+            <el-button @click="deleteModel.isShowDelete = false"
+              >取消</el-button
+            >
+            <el-button type="primary" @click="deleteModel.isShowDelete = false">
+              确认
+            </el-button>
+          </div>
+        </div>
+      </el-dialog>
+    </div>
  </div>
 </template>

--- a/src/pages/dataScreen/views/device/deviceList.scss
+++ b/src/pages/dataScreen/views/device/deviceList.scss
@ -1,23 +1,46 @@
 .deviceList_wrap {
  padding: 32px;
  .bg_device_left {
-    background: url("@/assets/dataScreen/common/deviceListLeft.svg") no-repeat;
+    background: url("@/assets/dataScreen/deviceList/deviceListLeft.svg")
+      no-repeat;
    .bg_device_left_head {
      padding-left: 26px;
    }
  }

  .bg_device_right {
-    background: url("@/assets/dataScreen/common/deviceListRight.svg") no-repeat;
+    background: url("@/assets/dataScreen/deviceList/deviceListRight.svg")
+      no-repeat;
  }
  .device_left_box {
    position: relative;
    canvas {
-      border-radius: 0 0px 30px 30px;
+      border-radius: 0 0px 50px 50px;
      overflow: hidden;
    }
  }

+  .deviceList_left_des_wrap {
+    .left_des {
+      position: absolute;
+      left: 0;
+      top: 0;
+      width: 10px;
+      height: 100%;
+      background: url("@/assets/dataScreen/deviceList/deviceListLeftLeft.svg")
+        no-repeat;
+    }
+    .bottom_des {
+      position: absolute;
+      left: 94px;
+      bottom: -1px;
+      width: calc(100% - 94px);
+      height: 10px;
+      background: url("@/assets/dataScreen/deviceList/deviceListLeftBottom.svg")
+        no-repeat;
+    }
+  }
+
  /* 设备列表 */
  .deviceList_params {
    position: absolute;
--- a/src/pages/dataScreen/views/device/deviceList.vue
+++ b/src/pages/dataScreen/views/device/deviceList.vue
@ -2,7 +2,7 @@
 * @Author: donghao donghao@supervision.ltd
 * @Date: 2024-02-23 10:14:31
 * @LastEditors: donghao donghao@supervision.ltd
- * @LastEditTime: 2024-02-28 15:28:08
+ * @LastEditTime: 2024-02-29 16:54:28
 * @FilePath: \General-AI-Platform-Web-Client\src\pages\dataScreen\views\device\deviceList.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 -->
@ -35,8 +35,8 @@ const clipPathData = ref<{
  width: number;
  height: number;
 }>({
-  width: 1380, // 宽
-  height: 728 // 高
+  width: 1392, // 宽
+  height: 742 // 高
 });
 const canvasRef = ref<any>(null);
 const cvs = ref<any>(null);
@ -157,8 +157,9 @@ onMounted(() => {
      >
        <template #default>
          <div
-            class="flex items-center justify-end w-full h-full device_left_box"
+            class="flex items-center justify-center w-full h-full device_left_box"
          >
+            <!-- canvas 构图实现底部左右侧斜切 -->
            <canvas
              ref="canvasRef"
              :width="clipPathData.width"
@ -178,6 +179,10 @@ onMounted(() => {
                />
              </el-select>
            </div>
+            <div class="deviceList_left_des_wrap">
+              <div class="left_des" />
+              <div class="bottom_des" />
+            </div>
          </div>
        </template>
      </DsBox2>
--- a/src/pages/dataScreen/views/device/testData/fabricDeviceList.ts
+++ b/src/pages/dataScreen/views/device/testData/fabricDeviceList.ts
@ -27,7 +27,7 @@ const startData: Record<string, any> = {
      deviceName: "核心检测摄002", // 模型名称
      deviceCode: "GigEPRO_gmcam_01_002",
      deviceLocation: "南京苏胜天信息科技有限公司",
-      deviceParams: "89hufd",
+      deviceParams: "23afhf",
      deviceCategory: "摄像设备",
      diviceGroup: "组1",
      createTime: "2024-01-15 14:05",
@ -44,7 +44,7 @@ const startData: Record<string, any> = {
      deviceName: "核心检测摄003", // 模型名称
      deviceCode: "GigEPRO_gmcam_01_003",
      deviceLocation: "南京苏胜天信息科技有限公司",
-      deviceParams: "89hufd",
+      deviceParams: "81jfhh",
      deviceCategory: "摄像设备",
      diviceGroup: "组1",
      createTime: "2024-01-15 14:35",
@ -61,7 +61,7 @@ const startData: Record<string, any> = {
      deviceName: "核心检测摄004", // 模型名称
      deviceCode: "GigEPRO_gmcam_01_004",
      deviceLocation: "南京苏胜天信息科技有限公司",
-      deviceParams: "89hufd",
+      deviceParams: "54ryef",
      deviceCategory: "摄像设备",
      diviceGroup: "组1",
      createTime: "2024-01-15 14:55",
@ -78,7 +78,7 @@ const startData: Record<string, any> = {
      deviceName: "核心检测摄005", // 模型名称
      deviceCode: "GigEPRO_gmcam_01_005",
      deviceLocation: "南京苏胜天信息科技有限公司",
-      deviceParams: "89hufd",
+      deviceParams: "17dssf",
      deviceCategory: "摄像设备",
      diviceGroup: "组1",
      createTime: "2024-01-15 14:55",
@ -162,8 +162,8 @@ export const currJson = {
    originY: "top",
    left: 0,
    top: 0,
-    width: 1380,
-    height: 728,
+    width: 1392,
+    height: 742,
    fill: "rgba(255,255,255,1)",
    stroke: null,
    strokeWidth: 0,
--- a/src/pages/dataScreen/views/device/testData/fabricImageSvg.ts
+++ b/src/pages/dataScreen/views/device/testData/fabricImageSvg.ts
--- a/src/style/element-plus.scss
+++ b/src/style/element-plus.scss
@ -200,3 +200,10 @@
    padding: 0;
  }
 }
+
+.el-table--border .el-table__inner-wrapper::after,
+.el-table--border::after,
+.el-table--border::before,
+.el-table__inner-wrapper::before {
+  background-color: transparent !important;
+}