feat: 样式修改

src/views/stationData/index.vue

@@ -1,16 +1,16 @@
 <template>
   <div class="flex-col gap-16 wh-full">
     <template v-if="env.VITE_APP_ENV == 'local'">
-      <EdfsWrap title="当前连接站点" shape="circle" shapeColor="#4B9E5F"
+      <EdfsWrap class="h-auto max-h[48%] min-h-[258px]" shape="circle" shapeColor="#4B9E5F"
-                class="h-auto max-h[48%] min-h-[258px]">
+                title="当前连接站点">
         <el-scrollbar>
           <div class="station-list-flow">
-            <div class="wh-full flex-center items-center"
+            <div v-if="!Array.from(siteMap.values()).length"
-                 v-if="!Array.from(siteMap.values()).length">
+                 class="wh-full flex-center items-center">
-              <el-empty style="height: 180px;" :image-size="130"/>
+              <el-empty :image-size="130" style="height: 180px;"/>
               <!--  :description=""-->
             </div>
-            <template v-else v-for=" site in Array.from(siteMap.values())">
+            <template v-for=" site in Array.from(siteMap.values())" v-else>
               <div class="station-item">
                 <div class="title bg-[#4B9E5F]">
                   <div>{{ site.id }}</div>
@@ -35,7 +35,7 @@
                 </div>
                 <div class="footer row-end-0">
                   <div class="m-l-auto p-b-8">
-                    <el-button type="primary" style="height: 28px; padding: 0 12px" color="#4B9E5F"
+                    <el-button color="#4B9E5F" style="height: 28px; padding: 0 12px" type="primary"
                                @click="onTransferData(site)">设备详情
                     </el-button>
                   </div>
@@ -48,11 +48,11 @@
     </template>
 
     <EdfsWrap :title="`${env.VITE_APP_ENV == 'local' ? '数据导出历史' : '数据导入历史'}`"
-              shape="circle" shapeColor="#F1BF63"
+              class="flex-1 overflow-auto" shape="circle"
-              class="flex-1 overflow-auto" useScrollBar>
+              shapeColor="#F1BF63" useScrollBar>
       <el-scrollbar>
         <div class="station-list-flow">
-          <div class="station-item" v-for="item in siteList" :key="item.id">
+          <div v-for="item in siteList" :key="item.id" class="station-item">
             <div class="title bg-[#F1BF63]">
               {{ item.name }}
               <div class="flex items-center gap-col-2">
@@ -101,7 +101,7 @@
 
 </template>
 
-<script setup lang="ts">
+<script lang="ts" setup>
 import { type SiteInfo, useTransferDataStore } from '@/stores/transferData'
 import { storeToRefs } from 'pinia'
 import { getSiteList, type ISite } from '@/api/module/transfer'
@@ -143,7 +143,9 @@ const siteList = ref<ISite[]>([])
 async function loadSiteList() {
   const res = await getSiteList()
   if (res.code === 200 || res.code === 0) {
-    siteList.value = res.data
+    Array.from({ length: 10 }).map(() => {
+      siteList.value.push(...res.data)
+    })
   } else {
     message.error(res?.msg || '获取站点列表失败')
   }
@@ -164,13 +166,11 @@ onMounted(() => {
 .station-list-flow {
   width: 100%;
   height: 100%;
-  display: flex;
+  display: grid;
-  flex-wrap: wrap;
+  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
-  column-gap: 20px;
+  gap: 16px;
-  row-gap: 24px;
 
   .station-item {
-    width: 280px;
     height: 180px;
     border: 1px solid var(--station-card-border-color);
     border-radius: 6px;

src/views/stationData/transfer/index.vue

@@ -1,23 +1,20 @@
 <template>
   <div class="flex-col gap-16 wh-full">
-    <el-button type="primary" @click="onBack" class="w-150px">
+    <el-button class="w-150px" type="primary" @click="onBack">
       <i class="i-line-md:arrow-left"></i>返回站点数据
     </el-button>
     <EdfsWrap
+      :shapeColor="isonLineTransfer ? '#4B9E5F' : '#F1BF63'"
       :title="isonLineTransfer ? `在线设备列表` : `历史设备列表`"
       class="flex-1"
       useScrollBar
-      :shapeColor="isonLineTransfer ? '#4B9E5F' : '#F1BF63'"
     >
       <template #title-right>
         <template v-if="env.VITE_APP_ENV == 'local'">
           <template v-if="isBatchTransfer || isBatchUpgrade">
-            <el-button
+            <el-button color="#3894FF" @click="onSelectAllCheckbox">
-              color="#3894FF"
+              <span class="text-white"
-              @click="onSelectAllCheckbox">
+                >{{ isSelectAllCheckbox ? '取消全选' : '全选' }}
-              <span class="text-white">{{
-                  isSelectAllCheckbox ? '取消全选' : '全选'
-                }}
               </span>
             </el-button>
             <el-button type="primary" @click="onBatchSave">
@@ -27,41 +24,41 @@
           </template>
           <template v-else>
             <el-button type="primary" @click="onBatchTransfer">
-              <i class="i-mdi:database-arrow-right-outline mr-1"/>
+              <i class="i-mdi:database-arrow-right-outline mr-1" />
               {{ localTransferBtnText }}
             </el-button>
             <el-button v-if="isonLineTransfer" type="primary" @click="onBatchUpgrade">
-              <i class="i-codicon:chip mr-1"/>批量升级
+              <i class="i-codicon:chip mr-1" />批量升级
             </el-button>
           </template>
         </template>
       </template>
       <div class="device-list-wrap">
         <el-checkbox-group v-model="checkDeviceList">
-          <div class="device-item" v-for="item in devices">
+          <div v-for="item in devices" class="device-item">
             <div class="device-item-header">
               <div class="flex items-center">
                 <el-checkbox
-                  :value="item.sn"
                   v-if="(isBatchTransfer || isBatchUpgrade) && item.status !== '离线'"
+                  :value="item.sn"
                 >
                   <div>设备ID: {{ item.sn }}</div>
                 </el-checkbox>
-                <div v-else
+                <div v-else class="h-32 leading-32px">
-                     class="h-32 leading-32px">
+                  <div class="overflow-hidden text-ellipsis whitespace-nowrap w-140">
-                  <div class="overflow-hidden text-ellipsis whitespace-nowrap w-140">设备ID:
+                    设备ID:
-                    <el-tooltip :content="item.sn "> {{ item.sn }}</el-tooltip>
+                    <el-tooltip :content="item.sn"> {{ item.sn }}</el-tooltip>
                   </div>
                 </div>
               </div>
               <div
-                class="flex items-center gap-col-1"
                 v-if="!(isBatchTransfer || isBatchUpgrade)"
+                class="flex items-center gap-col-1"
               >
                 <template v-if="env.VITE_APP_ENV == 'local'">
                   <el-tooltip
-                    :content="isonLineTransfer ? '数据导出' : '数据导入'"
                     v-if="isonLineTransfer ? item.status === '在线' : true"
+                    :content="isonLineTransfer ? '数据导出' : '数据导入'"
                   >
                     <i
                       class="i-mdi:database-arrow-right-outline :hover:color-[#8ACE6A] color-[#4B9E5F] cursor-pointer text-20px"
@@ -69,8 +66,8 @@
                     />
                   </el-tooltip>
                   <el-tooltip
-                    content="固件升级"
                     v-if="isonLineTransfer && item.status === '在线'"
+                    content="固件升级"
                   >
                     <i
                       class="i-codicon:chip :hover:color-[#8ACE6A] color-[#4B9E5F] cursor-pointer text-20px"
@@ -85,26 +82,25 @@
                     @click="onDeviceDetails(item)"
                   />
                 </el-tooltip>
-                <el-tooltip content="拓扑详情" v-if="isonLineTransfer">
+                <el-tooltip v-if="isonLineTransfer" content="拓扑详情">
                   <i
                     class="i-hugeicons:node-edit :hover:color-[#8ACE6A] color-[#4B9E5F] cursor-pointer text-20px"
                     @click="onTopology(item)"
                   />
                 </el-tooltip>
-
               </div>
             </div>
 
             <div class="device-item-body relative">
               <template v-if="isonLineTransfer">
                 <template v-for="key in Object.keys(onlineDeviceMap)">
-                  <div class="info-item" v-if="isonLineTransfer && key === 'status'">
+                  <div v-if="isonLineTransfer && key === 'status'" class="info-item">
                     <div>{{ onlineDeviceMap.status }}:</div>
                     <el-tag :type="item.status === '在线' ? 'success' : 'danger'">
                       {{ item.status }}
                     </el-tag>
                   </div>
-                  <div class="info-item" v-else>
+                  <div v-else class="info-item">
                     <div>{{ onlineDeviceMap[key as keyof typeof onlineDeviceMap] }}:</div>
                     <div>{{ item[key] }}</div>
                   </div>
@@ -112,14 +108,16 @@
               </template>
               <template v-else>
                 <template v-for="key in Object.keys(offlineDeviceMap)">
-                  <div class="info-item"
+                  <div
-                       v-if="['create_time','end_time','start_time'].includes(key)">
+                    v-if="['create_time', 'end_time', 'start_time'].includes(key)"
+                    class="info-item"
+                  >
                     <div>
                       {{ offlineDeviceMap[key as keyof typeof offlineDeviceMap] }}:
                     </div>
                     <div>{{ dayjs(item[key]).format('YYYY-MM-DD HH:mm:ss') }}</div>
                   </div>
-                  <div class="info-item" v-else>
+                  <div v-else class="info-item">
                     <div>
                       {{ offlineDeviceMap[key as keyof typeof offlineDeviceMap] }}:
                     </div>
@@ -136,8 +134,8 @@
 
   <OnLineTransferDlg
     ref="onLineTransferDlgRef"
-    @on-save="onLineDeviceTransfer"
     :is-batch-transfer="isBatchTransfer"
+    @on-save="onLineDeviceTransfer"
   />
   <OffTransferDlg
     ref="offTransferDlgRef"
@@ -146,14 +144,14 @@
     @on-save="onOffDeviceTransfer"
   />
   <DeviceDrawer
-    v-model="isShowDetails"
     ref="deviceDrawerRef"
-    :siteInfo="siteInfo"
+    v-model="isShowDetails"
     :is-transfer="isonLineTransfer"
+    :siteInfo="siteInfo"
   />
 </template>
 
-<script setup lang="ts">
+<script lang="ts" setup>
 import dayjs from 'dayjs'
 import OnLineTransferDlg from './components/onLineTransferDlg.vue'
 import OffTransferDlg from './components/offTransferDlg.vue'
@@ -166,23 +164,24 @@ import DeviceDrawer from './components/deviceDrawer.vue'
 
 import { getFirmwarePath } from '@/api/module/firmware'
 import { createTask, type TaskCreateParams } from '@/api/module/taks'
-import EdfsWrap from "@/components/Edfs-wrap.vue";
+import EdfsWrap from '@/components/Edfs-wrap.vue'
-import { computed } from "vue";
+import { computed } from 'vue'
 
 const env = import.meta.env
 const onLineTransferDlgRef = ref<typeof OnLineTransferDlg>()
 const router = useRouter()
 const route = useRoute()
 const siteInfo = ref<ISite>(
-  route.query.site ? JSON.parse(route.query.site as string) : null
+  route.query.site ? JSON.parse(route.query.site as string) : null,
 )
 
 const type = ref<'export' | 'details'>(route.query.type as 'export' | 'details')
 const isonLineTransfer = computed(() => type.value === 'export')
 const message = useMessage()
 
-
+const localTransferBtnText = computed(() =>
-const localTransferBtnText = computed(() => isonLineTransfer.value ? '数据导出' : '数据导入')
+  isonLineTransfer.value ? '数据导出' : '数据导入',
+)
 
 const transferDataStore = useTransferDataStore()
 const { devicesMap } = storeToRefs(transferDataStore)
@@ -217,7 +216,10 @@ const onlineDeviceMap: Record<
   footprint: '数据占用空间',
 }
 const offlineDeviceMap: Record<
-  keyof Pick<IOfflineDevice, 'site_id' | 'db' | 'create_time' | 'start_time' | 'end_time'>,
+  keyof Pick<
+    IOfflineDevice,
+    'site_id' | 'db' | 'create_time' | 'start_time' | 'end_time'
+  >,
   string
 > = {
   site_id: '站点名称',
@@ -281,17 +283,19 @@ function onBatchUpgrade() {
 }
 
 const batchText = computed(() => {
-  return isBatchTransfer.value ? isonLineTransfer.value ? '导出' : '导入' : '升级'
+  return isBatchTransfer.value ? (isonLineTransfer.value ? '导出' : '导入') : '升级'
 })
 
-const isSelectAllCheckbox = computed(() => checkDeviceList.value.length === devices.value.length)
+const isSelectAllCheckbox = computed(
+  () => checkDeviceList.value.length === devices.value.length,
+)
 
 function onSelectAllCheckbox() {
   if (isSelectAllCheckbox.value) {
     checkDeviceList.value = []
     return
   }
-  checkDeviceList.value = devices.value.map((item) => item.sn)
+  checkDeviceList.value = devices.value.map(item => item.sn)
 }
 
 function onBatchSave() {
@@ -390,10 +394,12 @@ function onTopology(item: IDevice) {
     router.push({
       path: '/station/topology',
       query: {
-        deviceInfo: JSON.stringify(Object.assign(obj, item, {
+        deviceInfo: JSON.stringify(
+          Object.assign(obj, item, {
             isonLine: isonLineTransfer.value,
-        }))
+          }),
-      }
+        ),
+      },
     })
   }
 }
@@ -457,7 +463,7 @@ function onOffDeviceTransfer() {
 // }, { deep: true })
 </script>
 
-<style scoped lang="scss">
+<style lang="scss" scoped>
 .transfer-log-wrap {
   margin-top: 10px;
   @apply border-radius-8px bg-[#F9FAFB] p-10;
@@ -471,7 +477,8 @@ function onOffDeviceTransfer() {
   @apply wh-full;
 
   :deep(.el-checkbox-group) {
-    @apply wh-full flex flex-wrap gap-col-6 gap-row-4;
+    @apply wh-full grid gap-16;
+    grid-template-columns: repeat(auto-fill, minmax(292px, 1fr));
   }
 
   :deep(.el-checkbox__inner) {
@@ -488,7 +495,7 @@ function onOffDeviceTransfer() {
   }
 
   .device-item {
-    @apply w-292  border border-solid border-[#E0E0E0] rounded-8px p-x-14 p-y-10 flex-col;
+    @apply border border-solid border-[#E0E0E0] rounded-8px p-x-14 p-y-10 flex-col;
 
     .device-item-header {
       @apply w-full text-black text-18px font-500 flex items-center justify-between;