安全监控页面样式修改

src/views/vent/monitorManager/safetyMonitor/index.vue

@@ -29,11 +29,11 @@
                   <div v-if="!record.lowRange && column.dataIndex === 'lowRange'">-</div>
                   <div v-if="!record.dataTypeName && column.dataIndex === 'dataTypeName'">-</div>
                 </template>
-                <a-tag v-if="column.dataIndex === 'warnFlag'" :color="record.warnFlag == '0' ? 'green' : record.warnFlag == 1 ? '#FF5812' : 'gray'">
-                  {{ record.warnFlag == '0' ? '正常' : record.warnFlag == 1 ? '报警' : record.warnFlag == 2 ? '断开' : '未监测' }}</a-tag
+                <a-tag v-if="column.dataIndex === 'exceptionType_str'" :color="record.exceptionType_str == '正常' ? 'green' : '#f00'">
+                  {{ record.exceptionType_str == '正常' ? '正常' : '异常' }}</a-tag
                 >
-                <a-tag v-if="column.dataIndex === 'netStatus'" :color="record.netStatus == '0' ? '#f00' : 'green'">{{
-                  record.netStatus == '0' ? '断开' : '连接'
+                <a-tag v-if="column.dataIndex === 'netStatus_str'" :color="record.netStatus_str == '正常' ? 'green' : '#f00'">{{
+                  record.netStatus_str == '正常' ? '正常' : '异常'
                 }}</a-tag>
               </template>
             </MonitorTable>
@@ -62,11 +62,11 @@
                   <div v-if="!record.lowRange && column.dataIndex === 'lowRange'">-</div>
                   <div v-if="!record.dataTypeName && column.dataIndex === 'dataTypeName'">-</div>
                 </template>
-                <a-tag v-if="column.dataIndex === 'warnFlag'" :color="record.warnFlag == '0' ? 'green' : record.warnFlag == 1 ? '#FF5812' : 'gray'">
-                  {{ record.warnFlag == '0' ? '正常' : record.warnFlag == 1 ? '报警' : record.warnFlag == 2 ? '断开' : '未监测' }}</a-tag
+                <a-tag v-if="column.dataIndex === 'exceptionType_str'" :color="record.exceptionType_str == '正常' ? 'green' : '#f00'">
+                  {{ record.exceptionType_str == '正常' ? '正常' : '异常' }}</a-tag
                 >
-                <a-tag v-if="column.dataIndex === 'netStatus'" :color="record.netStatus == '0' ? '#f00' : 'green'">{{
-                  record.netStatus == '0' ? '断开' : '连接'
+                <a-tag v-if="column.dataIndex === 'netStatus_str'" :color="record.netStatus_str == '正常' ? 'green' : '#f00'">{{
+                  record.netStatus_str == '正常' ? '正常' : '异常'
                 }}</a-tag>
               </template>
             </MonitorTable>
@@ -185,466 +185,466 @@
 </template>
 
 <script setup lang="ts">
-  import { ref, onMounted, onUnmounted, shallowRef, defineProps, watch, inject, unref } from 'vue';
-  import { list, getDeviceList, safetyList, getExportUrl, subStationList, initSubStation } from './safety.api';
-  import AlarmHistoryCommentTable from '../comment/AlarmHistoryTable.vue';
-  import AlarmHistoryTable from './AlarmHistoryTable.vue';
-  import HistoryTable from './HistoryTable.vue';
-  import HandlerHistoryTable from '../comment/HandlerHistoryTable.vue';
-  import MonitorTable from '../comment/MonitorTable.vue';
-  import GroupMonitorTable from '../comment/GroupMonitorTable.vue';
-  import { useRouter } from 'vue-router';
-  import { formConfig, isHaveNoAction } from './safety.data';
-  import { getDictItemsByCode } from '/@/utils/dict';
-  import { usePermission } from '/@/hooks/web/usePermission';
-  import { useGlobSetting } from '/@/hooks/setting';
-  import { useMethods } from '/@/hooks/system/useMethods';
-  import { message } from 'ant-design-vue';
-
-  const { sysOrgCode } = useGlobSetting();
-  const { hasPermission } = usePermission();
-  const globalConfig = inject('globalConfig');
-
-  const { handleExportXls } = useMethods();
-
-  // import { BorderBox8 as DvBorderBox8 } from '@kjgl77/datav-vue3';
-
-  // const echartsOption = {
-  //   grid: {
-  //     top: '60px',
-  //     left: '10px',
-  //     right: '25px',
-  //     bottom: '5%',
-  //     containLabel: true,
-  //   },
-  //   toolbox: {
-  //     feature: {},
-  //   },
-  // };
-  // let alive = ref(true)
-
-  type DeviceType = { deviceType: string; deviceName: string; datalist: any[] };
-
-  const props = defineProps({
-    pageData: {
-      type: Object,
-      default: () => {},
-    },
-  });
-
-  const scroll = {
-    y: 360,
-  };
-  const defSort = {
-    column: 'strinstallpos',
-    order: 'desc',
-  };
-  const monitorTable = ref();
-  const historyTable = ref();
-  const alarmHistoryTable = ref();
-  const handlerHistoryTable = ref();
-
-  const isRefresh = ref(true);
-
-  const activeKey = ref('1'); // tab key
-  const dataSource = shallowRef([]); // 实时监测数据
-  const deviceType = ref(''); // 监测设备类型
-  const subStation = ref('');
-  const subStationOptions = ref([]);
-  // let dataSourceHis = shallowRef([])//历史数据
-
-  //历史数据
-  async function changeHis(data) {
-    // alive.value = false
-    // nextTick(() => {
-    //   dataSourceHis = data
-    //   alive.value = true
-    // })
-  }
-
-  async function tabChange(activeKeyVal) {
-    activeKey.value = activeKeyVal;
-    if (activeKey.value != '1') {
-      if (timer != undefined) {
-        clearTimeout(timer);
-        timer = undefined;
-      }
-    } else {
-      timer = null;
-      await getMonitor(true);
+import { ref, onMounted, onUnmounted, shallowRef, defineProps, watch, inject, unref } from 'vue';
+import { list, getDeviceList, safetyList, getExportUrl, subStationList, initSubStation } from './safety.api';
+import AlarmHistoryCommentTable from '../comment/AlarmHistoryTable.vue';
+import AlarmHistoryTable from './AlarmHistoryTable.vue';
+import HistoryTable from './HistoryTable.vue';
+import HandlerHistoryTable from '../comment/HandlerHistoryTable.vue';
+import MonitorTable from '../comment/MonitorTable.vue';
+import GroupMonitorTable from '../comment/GroupMonitorTable.vue';
+import { useRouter } from 'vue-router';
+import { formConfig, isHaveNoAction } from './safety.data';
+import { getDictItemsByCode } from '/@/utils/dict';
+import { usePermission } from '/@/hooks/web/usePermission';
+import { useGlobSetting } from '/@/hooks/setting';
+import { useMethods } from '/@/hooks/system/useMethods';
+import { message } from 'ant-design-vue';
+
+const { sysOrgCode } = useGlobSetting();
+const { hasPermission } = usePermission();
+const globalConfig = inject('globalConfig');
+
+const { handleExportXls } = useMethods();
+
+// import { BorderBox8 as DvBorderBox8 } from '@kjgl77/datav-vue3';
+
+// const echartsOption = {
+//   grid: {
+//     top: '60px',
+//     left: '10px',
+//     right: '25px',
+//     bottom: '5%',
+//     containLabel: true,
+//   },
+//   toolbox: {
+//     feature: {},
+//   },
+// };
+// let alive = ref(true)
+
+type DeviceType = { deviceType: string; deviceName: string; datalist: any[] };
+
+const props = defineProps({
+  pageData: {
+    type: Object,
+    default: () => {},
+  },
+});
+
+const scroll = {
+  y: 360,
+};
+const defSort = {
+  column: 'strinstallpos',
+  order: 'desc',
+};
+const monitorTable = ref();
+const historyTable = ref();
+const alarmHistoryTable = ref();
+const handlerHistoryTable = ref();
+
+const isRefresh = ref(true);
+
+const activeKey = ref('1'); // tab key
+const dataSource = shallowRef([]); // 实时监测数据
+const deviceType = ref(''); // 监测设备类型
+const subStation = ref('');
+const subStationOptions = ref([]);
+// let dataSourceHis = shallowRef([])//历史数据
+
+//历史数据
+async function changeHis(data) {
+  // alive.value = false
+  // nextTick(() => {
+  //   dataSourceHis = data
+  //   alive.value = true
+  // })
+}
+
+async function tabChange(activeKeyVal) {
+  activeKey.value = activeKeyVal;
+  if (activeKey.value != '1') {
+    if (timer != undefined) {
+      clearTimeout(timer);
+      timer = undefined;
     }
+  } else {
+    timer = null;
+    await getMonitor(true);
   }
-
-  // https获取监测数据
-  let timer: null | NodeJS.Timeout = null;
-  function getMonitor(flag?) {
-    if (deviceType.value) {
-      if (timer) timer = null;
-      if (Object.prototype.toString.call(timer) === '[object Null]') {
-        timer = setTimeout(
-          async () => {
-            await getDataSource();
-            if (timer) {
-              getMonitor();
-            }
-          },
-          flag ? 0 : 1000
-        );
-      }
+}
+
+// https获取监测数据
+let timer: null | NodeJS.Timeout = null;
+function getMonitor(flag?) {
+  if (deviceType.value) {
+    if (timer) timer = null;
+    if (Object.prototype.toString.call(timer) === '[object Null]') {
+      timer = setTimeout(
+        async () => {
+          await getDataSource();
+          if (timer) {
+            getMonitor();
+          }
+        },
+        flag ? 0 : 1000
+      );
     }
   }
-
-  async function getDataSource() {
-    const formData = monitorTable.value.getForm();
-    const res = await list({ devicetype: deviceType.value, filterParams: { ...formData.getFieldsValue() } });
-    if (res.msgTxt.length > 0) {
-      dataSource.value = [];
-      let dataArr = res.msgTxt[0].datalist || [];
-      dataArr.filter((data: any) => {
-        const readData = data.readData;
-        return Object.assign(data, readData);
-      });
-      if (deviceType.value == 'safetymonitor') {
-        // 如果是安全监控的数据时需要过滤常见设备数据，根据设定的常用安全监控字典去匹配
-        let dictCodes = getDictItemsByCode('safetynormal');
-        console.log(dictCodes, '111-----------');
-        const searchForm = formData.getFieldsValue();
-
-        if (searchForm && searchForm['dataTypeName'] && dictCodes && dictCodes.length > 0) {
-          console.log(searchForm, '000---------');
-          const tempData = [];
-          const tempData1 = [];
-          for (let i = 0; i < dataArr.length; i++) {
-            const item = dataArr[i];
-            let flag = false;
-            for (let i = 0; i < dictCodes.length; i++) {
-              const dict = dictCodes[i];
-              if (dict['value'] == item['dataTypeName']) {
-                flag = true;
-              }
-            }
-            if (flag) {
-              tempData.push(item);
-            } else {
-              tempData1.push(item);
+}
+
+async function getDataSource() {
+  const formData = monitorTable.value.getForm();
+  const res = await list({ devicetype: deviceType.value, filterParams: { ...formData.getFieldsValue() } });
+  if (res.msgTxt.length > 0) {
+    dataSource.value = [];
+    let dataArr = res.msgTxt[0].datalist || [];
+    dataArr.filter((data: any) => {
+      const readData = data.readData;
+      return Object.assign(data, readData);
+    });
+    if (deviceType.value == 'safetymonitor') {
+      // 如果是安全监控的数据时需要过滤常见设备数据，根据设定的常用安全监控字典去匹配
+      let dictCodes = getDictItemsByCode('safetynormal');
+      console.log(dictCodes, '111-----------');
+      const searchForm = formData.getFieldsValue();
+
+      if (searchForm && searchForm['dataTypeName'] && dictCodes && dictCodes.length > 0) {
+        console.log(searchForm, '000---------');
+        const tempData = [];
+        const tempData1 = [];
+        for (let i = 0; i < dataArr.length; i++) {
+          const item = dataArr[i];
+          let flag = false;
+          for (let i = 0; i < dictCodes.length; i++) {
+            const dict = dictCodes[i];
+            if (dict['value'] == item['dataTypeName']) {
+              flag = true;
             }
           }
-          if (sysOrgCode == 'zjtzqctmk' || hasPermission('btn:noGb')) {
-            dataSource.value = [...tempData, ...tempData1];
+          if (flag) {
+            tempData.push(item);
           } else {
-            dataSource.value = [...tempData];
+            tempData1.push(item);
           }
+        }
+        if (sysOrgCode == 'zjtzqctmk' || hasPermission('btn:noGb')) {
+          dataSource.value = [...tempData, ...tempData1];
         } else {
-          dataSource.value = dataArr;
+          dataSource.value = [...tempData];
         }
       } else {
         dataSource.value = dataArr;
       }
     } else {
-      dataSource.value = [];
+      dataSource.value = dataArr;
     }
+  } else {
+    dataSource.value = [];
   }
+}
 
-  async function getSubstation() {
-    const list: [] = await subStationList({ monitorparam: 'safetymonitor*' });
-    subStationOptions.value = list;
-    if (list.length > 0) {
-      subStation.value = list[0]['id'];
-    }
+async function getSubstation() {
+  const list: [] = await subStationList({ monitorparam: 'safetymonitor*' });
+  subStationOptions.value = list;
+  if (list.length > 0) {
+    subStation.value = list[0]['id'];
   }
-  function exportData() {
-    handleExportXls('安全监控导出', getExportUrl);
+}
+function exportData() {
+  handleExportXls('安全监控导出', getExportUrl);
+}
+
+function updateSubstation() {
+  if (subStation.value) {
+    initSubStation({ substationID: subStation.value }).then(() => {
+      message.success('分站同步完成！');
+    });
+  } else {
+    message.warning('请选择分站！');
   }
-
-  function updateSubstation() {
-    if (subStation.value) {
-      initSubStation({ substationID: subStation.value }).then(() => {
-        message.success('分站同步完成！');
-      });
-    } else {
-      message.warning('请选择分站！');
+}
+
+onMounted(async () => {
+  const { currentRoute } = useRouter();
+  if (unref(currentRoute)) {
+    const path = unref(currentRoute).path;
+    if (path) {
+      deviceType.value = path.substring(path.lastIndexOf('/') + 1);
     }
+    await getMonitor(true);
+    await getSubstation();
   }
+});
 
-  onMounted(async () => {
-    const { currentRoute } = useRouter();
-    if (unref(currentRoute)) {
-      const path = unref(currentRoute).path;
-      if (path) {
-        deviceType.value = path.substring(path.lastIndexOf('/') + 1);
-      }
-      await getMonitor(true);
-      await getSubstation();
-    }
-  });
-
-  onUnmounted(() => {
-    if (timer) {
-      clearTimeout(timer);
-    }
-    timer = undefined;
-  });
+onUnmounted(() => {
+  if (timer) {
+    clearTimeout(timer);
+  }
+  timer = undefined;
+});
 </script>
 
 <style lang="less" scoped>
-  @import '/@/design/theme.less';
-  @import '/@/design/vent/modal.less';
-  @ventSpace: zxm;
+@import '/@/design/theme.less';
+@import '/@/design/vent/modal.less';
+@ventSpace: zxm;
+
+.device-box {
+  width: 100%;
+  height: calc(100% - 100px);
+  padding-bottom: 10px;
+  margin-top: 20px;
+  display: flex;
+  justify-content: center;
+
+  .tabs-box {
+    width: calc(100% - 12px) !important;
+    height: 100% !important;
+    bottom: 3px !important;
+  }
 
-  .device-box {
-    width: 100%;
-    height: calc(100% - 100px);
-    padding-bottom: 10px;
-    margin-top: 20px;
+  .device-button-group {
+    position: absolute;
+    top: -30px;
     display: flex;
-    justify-content: center;
-
-    .tabs-box {
-      width: calc(100% - 12px) !important;
-      height: 100% !important;
-      bottom: 3px !important;
-    }
+    width: 100%;
 
-    .device-button-group {
-      position: absolute;
-      top: -30px;
+    .device-button {
+      height: 26px;
+      padding: 0 20px;
+      background: linear-gradient(45deg, #04e6fb55, #0c5cab55);
+      clip-path: polygon(10px 0, 0 50%, 10px 100%, 100% 100%, calc(100% - 10px) 50%, 100% 0);
       display: flex;
-      width: 100%;
-
-      .device-button {
-        height: 26px;
-        padding: 0 20px;
-        background: linear-gradient(45deg, #04e6fb55, #0c5cab55);
-        clip-path: polygon(10px 0, 0 50%, 10px 100%, 100% 100%, calc(100% - 10px) 50%, 100% 0);
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        color: #fff;
-        position: relative;
-        cursor: pointer;
-
-        &:nth-child(1) {
-          left: calc(-6px * 1);
-        }
-
-        &:nth-child(2) {
-          left: calc(-6px * 2);
-        }
+      justify-content: center;
+      align-items: center;
+      color: #fff;
+      position: relative;
+      cursor: pointer;
 
-        &:nth-child(3) {
-          left: calc(-6px * 3);
-        }
+      &:nth-child(1) {
+        left: calc(-6px * 1);
+      }
 
-        &:nth-child(4) {
-          left: calc(-6px * 4);
-        }
+      &:nth-child(2) {
+        left: calc(-6px * 2);
+      }
 
-        &:nth-child(5) {
-          left: calc(-6px * 5);
-        }
+      &:nth-child(3) {
+        left: calc(-6px * 3);
+      }
 
-        &:nth-child(6) {
-          left: calc(-6px * 6);
-        }
+      &:nth-child(4) {
+        left: calc(-6px * 4);
+      }
 
-        &:nth-child(7) {
-          left: calc(-6px * 7);
-        }
+      &:nth-child(5) {
+        left: calc(-6px * 5);
+      }
 
-        &:nth-child(8) {
-          left: calc(-6px * 8);
-        }
+      &:nth-child(6) {
+        left: calc(-6px * 6);
+      }
 
-        &:nth-child(9) {
-          left: calc(-6px * 9);
-        }
+      &:nth-child(7) {
+        left: calc(-6px * 7);
+      }
 
-        &:nth-child(10) {
-          left: calc(-6px * 10);
-        }
+      &:nth-child(8) {
+        left: calc(-6px * 8);
+      }
 
-        &:nth-child(11) {
-          left: calc(-6px * 11);
-        }
+      &:nth-child(9) {
+        left: calc(-6px * 9);
+      }
 
-        &:nth-child(12) {
-          left: calc(-6px * 12);
-        }
+      &:nth-child(10) {
+        left: calc(-6px * 10);
+      }
 
-        &:nth-child(13) {
-          left: calc(-6px * 13);
-        }
+      &:nth-child(11) {
+        left: calc(-6px * 11);
+      }
 
-        &:nth-child(14) {
-          left: calc(-6px * 14);
-        }
+      &:nth-child(12) {
+        left: calc(-6px * 12);
+      }
 
-        &:nth-child(15) {
-          left: calc(-6px * 15);
-        }
+      &:nth-child(13) {
+        left: calc(-6px * 13);
+      }
 
-        &:first-child {
-          clip-path: polygon(0 0, 10px 50%, 0 100%, 100% 100%, calc(100% - 10px) 50%, 100% 0);
-        }
+      &:nth-child(14) {
+        left: calc(-6px * 14);
       }
 
-      .device-active {
-        background: linear-gradient(45deg, #04e6fb, #0c5cab);
+      &:nth-child(15) {
+        left: calc(-6px * 15);
+      }
 
-        &::before {
-          border-color: #0efcff;
-          box-shadow: 1px 1px 3px 1px #0efcff inset;
-        }
+      &:first-child {
+        clip-path: polygon(0 0, 10px 50%, 0 100%, 100% 100%, calc(100% - 10px) 50%, 100% 0);
       }
     }
 
-    .enter-detail {
-      color: #fff;
-      cursor: pointer;
-      position: absolute;
-      right: 120px;
-      top: -6px;
-      padding: 5px;
-      border-radius: 5px;
-      margin-left: 8px;
-      margin-right: 8px;
-      width: auto;
-      height: 33px !important;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      color: #fff;
-      padding: 5px 15px 5px 15px;
-      cursor: pointer;
-
-      &:hover {
-        background: var(--vent-modal-bg2);
-      }
+    .device-active {
+      background: linear-gradient(45deg, #04e6fb, #0c5cab);
 
       &::before {
-        width: calc(100% - 6px);
-        height: 27px;
-        content: '';
-        position: absolute;
-        top: 3px;
-        right: 0;
-        left: 3px;
-        bottom: 0;
-        z-index: -1;
-        border-radius: inherit;
-        /*important*/
-        background: linear-gradient(#1fa6cb, #127cb5);
+        border-color: #0efcff;
+        box-shadow: 1px 1px 3px 1px #0efcff inset;
       }
     }
   }
-  .right-btn-group {
-    position: absolute;
+
+  .enter-detail {
     color: #fff;
-    right: 20px;
+    cursor: pointer;
+    position: absolute;
+    right: 120px;
+    top: -6px;
+    padding: 5px;
+    border-radius: 5px;
+    margin-left: 8px;
+    margin-right: 8px;
+    width: auto;
+    height: 33px !important;
     display: flex;
-    .export-btn {
+    align-items: center;
+    justify-content: center;
+    color: #fff;
+    padding: 5px 15px 5px 15px;
+    cursor: pointer;
+
+    &:hover {
+      background: var(--vent-modal-bg2);
     }
-    .update-btn {
-      margin-right: 10px;
-      display: flex;
-      align-items: center;
-      .btn {
-        background: var(--vent-modal-bg2);
-      }
+
+    &::before {
+      width: calc(100% - 6px);
+      height: 27px;
+      content: '';
+      position: absolute;
+      top: 3px;
+      right: 0;
+      left: 3px;
+      bottom: 0;
+      z-index: -1;
+      border-radius: inherit;
+      /*important*/
+      background: linear-gradient(#1fa6cb, #127cb5);
     }
+  }
+}
+.right-btn-group {
+  position: absolute;
+  color: #fff;
+  right: 20px;
+  display: flex;
+  .export-btn {
+  }
+  .update-btn {
+    margin-right: 10px;
+    display: flex;
+    align-items: center;
     .btn {
-      padding: 8px 20px;
-      position: relative;
-      border-radius: 2px;
-      color: #fff;
-      width: fit-content;
-      cursor: pointer;
+      background: var(--vent-modal-bg2);
+    }
+  }
+  .btn {
+    padding: 8px 20px;
+    position: relative;
+    border-radius: 2px;
+    color: #fff;
+    width: fit-content;
+    cursor: pointer;
 
-      &::before {
-        position: absolute;
-        display: block;
-        content: '';
-        width: calc(100% - 4px);
-        height: calc(100% - 4px);
-        top: 2px;
-        left: 2px;
-        border-radius: 2px;
-        z-index: -1;
-      }
+    &::before {
+      position: absolute;
+      display: block;
+      content: '';
+      width: calc(100% - 4px);
+      height: calc(100% - 4px);
+      top: 2px;
+      left: 2px;
+      border-radius: 2px;
+      z-index: -1;
     }
+  }
 
-    .btn1 {
-      border: 1px solid var(--vent-btn-primary-border-color);
+  .btn1 {
+    border: 1px solid var(--vent-btn-primary-border-color);
 
-      &::before {
-        background-image: linear-gradient(#2effee92, #0cb1d592);
-      }
+    &::before {
+      background-image: linear-gradient(#2effee92, #0cb1d592);
+    }
 
-      &:hover {
-        border: 1px solid #5cfaffaa;
+    &:hover {
+      border: 1px solid #5cfaffaa;
 
-        &::before {
-          background-image: linear-gradient(#2effee72, #0cb1d572);
-        }
+      &::before {
+        background-image: linear-gradient(#2effee72, #0cb1d572);
       }
     }
   }
-
-  :deep(.@{ventSpace}-tabs-tabpane-active) {
-    height: 100%;
-    border: 1px solid var(--vent-device-manager-box-border);
-    border-radius: 2px;
-    -webkit-backdrop-filter: blur(8px);
-    box-shadow: 0 0 20px #44b4ff33 inset;
-    background-color: var(--vent-device-manager-box-bg);
-    overflow-y: auto;
+}
+
+:deep(.@{ventSpace}-tabs-tabpane-active) {
+  height: 100%;
+  border: 1px solid var(--vent-device-manager-box-border);
+  border-radius: 2px;
+  -webkit-backdrop-filter: blur(8px);
+  box-shadow: 0 0 20px #44b4ff33 inset;
+  background-color: var(--vent-device-manager-box-bg);
+  overflow-y: auto;
+}
+
+:deep(.@{ventSpace}-tabs-card) {
+  .@{ventSpace}-tabs-tab {
+    background: var(--vent-modal-bg2);
+    border-color: var(--vent-btn-primary-border-color);
+    border-radius: 0%;
+
+    &:hover {
+      color: #64d5ff;
+    }
   }
 
-  :deep(.@{ventSpace}-tabs-card) {
-    .@{ventSpace}-tabs-tab {
-      background: var(--vent-modal-bg2);
-      border-color: var(--vent-btn-primary-border-color);
-      border-radius: 0%;
+  .@{ventSpace}-tabs-content {
+    height: 100% !important;
+  }
 
-      &:hover {
-        color: #64d5ff;
-      }
-    }
+  .@{ventSpace}-tabs-tab.@{ventSpace}-tabs-tab-active .@{ventSpace}-tabs-tab-btn {
+    color: var(--vent-font-action-link);
+  }
 
-    .@{ventSpace}-tabs-content {
-      height: 100% !important;
-    }
+  .@{ventSpace}-tabs-nav::before {
+    border-color: var(--vent-btn-primary-border-color);
+  }
 
-    .@{ventSpace}-tabs-tab.@{ventSpace}-tabs-tab-active .@{ventSpace}-tabs-tab-btn {
-      color: var(--vent-font-action-link);
-    }
+  .@{ventSpace}-picker,
+  .@{ventSpace}-select-selector {
+    width: 100% !important;
+    background: #00000017 !important;
+    border: 1px solid @vent-form-item-border !important;
 
-    .@{ventSpace}-tabs-nav::before {
-      border-color: var(--vent-btn-primary-border-color);
+    input,
+    .@{ventSpace}-select-selection-item,
+    .@{ventSpace}-picker-suffix {
+      color: #fff !important;
     }
 
-    .@{ventSpace}-picker,
-    .@{ventSpace}-select-selector {
-      width: 100% !important;
-      background: #00000017 !important;
-      border: 1px solid @vent-form-item-border !important;
-
-      input,
-      .@{ventSpace}-select-selection-item,
-      .@{ventSpace}-picker-suffix {
-        color: #fff !important;
-      }
-
-      .@{ventSpace}-select-selection-placeholder {
-        color: #b7b7b7 !important;
-      }
+    .@{ventSpace}-select-selection-placeholder {
+      color: #b7b7b7 !important;
     }
+  }
 
-    .@{ventSpace}-pagination-next,
-    .action,
-    .@{ventSpace}-select-arrow,
-    .@{ventSpace}-picker-separator {
-      color: #fff !important;
-    }
+  .@{ventSpace}-pagination-next,
+  .action,
+  .@{ventSpace}-select-arrow,
+  .@{ventSpace}-picker-separator {
+    color: #fff !important;
   }
+}
 </style>