[Style 0000] 密闭监测及通用表格样式优化

src/components/Table/src/BasicTable.vue

@@ -489,7 +489,8 @@
     &-row__striped {
       td {
         // background-color: transparent;
-        background-color: @app-content-background;
+        // background-color: @app-content-background;
+        background-color: @table-striped-bg-color;
       }
     }
     // 代码逻辑说明: 【TV360X-1232】查询区域隐藏后点击刷新不走请求了(采用css隐藏)
@@ -533,7 +534,9 @@
       .ant-table.ant-table-bordered .ant-table-title {
         border: none !important;
       }
-
+      .ant-table-tbody > tr.ant-table-row:hover > td {
+        background-color: @table-row-hover-bg-color;
+      }
       .ant-table {
         background-color: unset;
 

src/design/color.less

@@ -145,7 +145,18 @@ html {
 @button-cancel-hover-bg-color: @white;
 @button-cancel-hover-border-color: @primary-color;
 
-@gradient-primary-color: linear-gradient(lighten(@primary-color, 20%), @primary-color);
-@gradient-secondary-color: linear-gradient(lighten(#284a7c, 40%), #284a7c);
+@gradient-primary-color: linear-gradient(#6fa1ff, #2b6ff0);
+// @gradient-primary-color: linear-gradient(lighten(@primary-color, 20%), @primary-color);
+@gradient-secondary-color: linear-gradient(#719fe3, #284877);
 
+// =================================
+// ==============table==============
+// =================================
 @table-thead-bg-color: #c5daf7;
+@table-row-hover-bg-color: #a4d3ee;
+@table-striped-bg-color: #e5f4fe;
+
+// =================================
+// ==============tabs===============
+// =================================
+@tabs-bg-not-active: #9e9e9e26;

src/layouts/default/tabs/index.less

@@ -98,6 +98,7 @@ html[data-theme='light'] {
       }
 
       .ant-tabs-tab:not(.ant-tabs-tab-active) {
+        background: @tabs-bg-not-active;
         &:hover {
           color: @primary-color;
         }

src/layouts/page/index.vue

@@ -118,7 +118,7 @@
     left: -20%;
     right: -20%;
     bottom: -20%;
-    filter: blur(30px);
+    filter: blur(15px);
     pointer-events: none;
     z-index: 0;
   }

src/views/dashboard/basicInfo/accessStatistics/index.vue

@@ -4,35 +4,35 @@
   </div>
 </template>
 <script lang="ts">
-import { defineComponent } from 'vue';
-import { BasicTable, useTable } from '/@/components/Table';
-import { getAccessStatisticsColumns } from './access.data';
-import { getGoafAccessCount } from '../basicInfo.api';
+  import { defineComponent } from 'vue';
+  import { BasicTable, useTable } from '/@/components/Table';
+  import { getAccessStatisticsColumns } from './access.data';
+  import { getGoafAccessCount } from '../basicInfo.api';
 
-export default defineComponent({
-  components: { BasicTable },
-  setup() {
-    const [registerTable] = useTable({
-      api: getGoafAccessCount,
-      columns: getAccessStatisticsColumns(),
-      pagination: true,
-      showIndexColumn: false,
-      // 合计行样式高亮（区分普通数据行）
-      rowClassName: (record) => record.region === '合计' ? 'bg-gray-50 font-medium' : '',
-    });
+  export default defineComponent({
+    components: { BasicTable },
+    setup() {
+      const [registerTable] = useTable({
+        api: getGoafAccessCount,
+        columns: getAccessStatisticsColumns(),
+        pagination: true,
+        showIndexColumn: false,
+        // 合计行样式高亮（区分普通数据行）
+        rowClassName: (record) => (record.region === '合计' ? 'bg-gray-50 font-medium' : ''),
+      });
 
-    return {
-      registerTable,
-    };
-  },
-});
+      return {
+        registerTable,
+      };
+    },
+  });
 </script>
 <style scoped>
-/* 合计行样式优化 */
-.bg-gray-50 {
-  background-color: #f9fafb;
-}
-.font-medium {
-  font-weight: 500;
-}
-</style>
+  /* 合计行样式优化 */
+  .bg-gray-50 {
+    background-color: #f9fafb;
+  }
+  .font-medium {
+    font-weight: 500;
+  }
+</style>

src/views/dashboard/basicInfo/dataQuality/index.vue

@@ -1,56 +1,44 @@
 <template>
   <div class="data-quality-page">
     <!-- 查询表单 -->
-    <BasicForm
-      @register="registerSearchForm"
-      :model="searchModel"
-      @finish="handleSearch"
-      class="form-part"
-    />
+    <BasicForm @register="registerSearchForm" :model="searchModel" @finish="handleSearch" class="form-part" />
 
     <!-- Tab标签页 -->
     <Tabs v-model:activeKey="activeKey" type="card" class="mb-4">
       <TabPane key="unresolved" tab="未解决">
         <div class="add-button">
-          <a-button type="primary" preIcon="mdi:page-next-outline" @click="handleOpenModal({}, 'add')" > 新增问题 </a-button>
+          <a-button type="primary" preIcon="mdi:page-next-outline" @click="handleOpenModal({}, 'add')"> 新增问题 </a-button>
         </div>
         <BasicTable @register="registerUnresolvedTable">
           <template #action="{ record }">
-            <div class="action-buttons">
-              <button @click="handleOpenModal(record, 'edit')" class="action-btn">
-                <img src="@/assets/images/basicInfo/dataQuality/icon-edit.svg" class="action-icon" />
-              </button>
-              <button @click="handleGoToPage(record,'/basicInfo/accessStatistics')" class="action-btn">
-                <img src="@/assets/images/basicInfo/dataQuality/icon-delete.svg" class="action-icon" />
-              </button>
-              <button @click="handleGoToPage(record,'/basicInfo/accessStatistics')" class="action-btn">
-                <img src="@/assets/images/basicInfo/dataQuality/icon-resolved.svg" class="action-icon" />
-              </button>
-              <button @click="handleGoToPage(record,'/basicInfo/accessStatistics')" class="action-btn">
-                <img src="@/assets/images/basicInfo/dataQuality/icon-details.svg" class="action-icon" />
-              </button>
-            </div>
+            <button @click="handleOpenModal(record, 'edit')" class="action-btn">
+              <SvgIcon name="edit" />
+            </button>
+            <button @click="handleGoToPage(record, '/basicInfo/accessStatistics')" class="action-btn">
+              <SvgIcon name="delete" />
+            </button>
+            <button @click="handleGoToPage(record, '/basicInfo/accessStatistics')" class="action-btn">
+              <SvgIcon name="resolved" />
+            </button>
+            <button @click="handleGoToPage(record, '/basicInfo/accessStatistics')" class="action-btn">
+              <SvgIcon name="details" />
+            </button>
           </template>
         </BasicTable>
       </TabPane>
       <TabPane key="resolved" tab="已解决">
         <BasicTable @register="registerResolvedTable">
           <template #action="{ record }">
-            <div class="action-buttons">
-              <button @click="handleOpenModal(record, 'view')" class="action-btn">
-                <img src="@/assets/images/basicInfo/dataQuality/icon-details.svg" class="action-icon" />
-              </button>
-            </div>
+            <button @click="handleOpenModal(record, 'view')" class="action-btn">
+              <SvgIcon name="details" />
+            </button>
           </template>
         </BasicTable>
       </TabPane>
     </Tabs>
 
     <!-- 处理弹框 -->
-    <DataQualityModal
-      @register="registerModal"
-      @success="handleModalSuccess"
-    />
+    <DataQualityModal @register="registerModal" @success="handleModalSuccess" />
   </div>
 </template>
 
@@ -62,12 +50,8 @@
   import { useModal } from '/@/components/Modal';
   import { Tabs, TabPane } from 'ant-design-vue';
   import DataQualityModal from './components/DataQualityModal.vue';
-  import {
-    columns,
-    searchFormSchema,
-    unresolvedData,
-    resolvedData,
-  } from './dataQuality.data';
+  import { SvgIcon } from '/@/components/Icon';
+  import { columns, searchFormSchema, unresolvedData, resolvedData } from './dataQuality.data';
 
   // 路由实例
   const router = useRouter();
@@ -80,12 +64,12 @@
   const originResolved = JSON.parse(JSON.stringify(resolvedData));
 
   // 为每条记录添加查看详情事件
-  originUnresolved.forEach(item => {
+  originUnresolved.forEach((item) => {
     item.onViewDetail = (record: any) => {
       handleOpenModal(record, 'view');
     };
   });
-  originResolved.forEach(item => {
+  originResolved.forEach((item) => {
     item.onViewDetail = (record: any) => {
       handleOpenModal(record, 'view');
     };
@@ -164,7 +148,6 @@
     // 刷新表格
     reloadUnresolved();
     reloadResolved();
-
   }
 
   // 打开弹框（处理/查看）函数
@@ -242,4 +225,4 @@
       margin-right: 0;
     }
   }
-</style>
+</style>

src/views/dashboard/basicInfo/minesInfo/index.vue

@@ -32,6 +32,7 @@
       labelWidth: 120,
       schemas: searchFormSchema,
       showAdvancedButton: false,
+      schemaGroupNames: ['常规查询', '高级查询'],
     },
     pagination: false,
     useSearchForm: true,

src/views/dashboard/basicInfo/minesInfo/minesInfo.data.ts

@@ -63,12 +63,14 @@ export const searchFormSchema: FormSchema[] = [
     label: '煤矿名称',
     component: 'Input',
     colProps: { span: 6 },
+    // groupName: '常规查询',
   },
   {
     field: 'mineNameAbbr',
     label: '煤矿简称',
     component: 'Input',
     colProps: { span: 6 },
+    groupName: '常规查询',
   },
   {
     field: 'productStatus',
@@ -82,6 +84,7 @@ export const searchFormSchema: FormSchema[] = [
       ],
     },
     colProps: { span: 6 },
+    groupName: '高级查询',
   },
   {
     field: 'isConnected',
@@ -94,8 +97,9 @@ export const searchFormSchema: FormSchema[] = [
       ],
     },
     colProps: { span: 6 },
+    groupName: '高级查询',
   },
-  
+
   {
     field: 'onlineStatus',
     label: '在线状态',
@@ -107,6 +111,7 @@ export const searchFormSchema: FormSchema[] = [
       ],
     },
     colProps: { span: 6 },
+    groupName: '高级查询',
   },
   {
     field: 'riskLevel',
@@ -120,6 +125,7 @@ export const searchFormSchema: FormSchema[] = [
       ],
     },
     colProps: { span: 6 },
+    groupName: '高级查询',
   },
   {
     field: 'statusChange',
@@ -132,34 +138,35 @@ export const searchFormSchema: FormSchema[] = [
       ],
     },
     colProps: { span: 6 },
+    groupName: '高级查询',
   },
 ];
 
 export const minesData = [
   {
-    orderNo:'61082400879',
-    enforcement:'执法二处',
-    mineName:'府谷县能源有限公司古城一号煤矿',
-    mineNameAbbr:'府谷县一号煤矿',
-    productStatus:'0',
-    riskLevel:'0',
-    connectStatus:'0',
-    onlineStatus:'0',
-    yingjieNum:'0',
-    yijieNum:'0',
-    weijieNum:'0',
-  },
-  {
-    orderNo:'61082400878',
-    enforcement:'执法二处',
-    mineName:'府谷县能源有限公司古城二号煤矿',
-    mineNameAbbr:'府谷县二号煤矿',
-    productStatus:'0',
-    riskLevel:'0',
-    connectStatus:'0',
-    onlineStatus:'0',
-    yingjieNum:'0',
-    yijieNum:'0',
-    weijieNum:'0',
-  }
-]
+    orderNo: '61082400879',
+    enforcement: '执法二处',
+    mineName: '府谷县能源有限公司古城一号煤矿',
+    mineNameAbbr: '府谷县一号煤矿',
+    productStatus: '0',
+    riskLevel: '0',
+    connectStatus: '0',
+    onlineStatus: '0',
+    yingjieNum: '0',
+    yijieNum: '0',
+    weijieNum: '0',
+  },
+  {
+    orderNo: '61082400878',
+    enforcement: '执法二处',
+    mineName: '府谷县能源有限公司古城二号煤矿',
+    mineNameAbbr: '府谷县二号煤矿',
+    productStatus: '0',
+    riskLevel: '0',
+    connectStatus: '0',
+    onlineStatus: '0',
+    yingjieNum: '0',
+    yijieNum: '0',
+    weijieNum: '0',
+  },
+];