Browse Source

feat: 样式修改

main
betaqi 1 week ago
parent
commit
a31599757e
  1. 56
      src/views/stationData/index.vue

56
src/views/stationData/index.vue

@ -1,16 +1,22 @@ @@ -1,16 +1,22 @@
<template>
<div class="flex-col gap-16 wh-full">
<template v-if="env.VITE_APP_ENV == 'local'">
<EdfsWrap class="h-auto max-h[48%] min-h-[258px]" shape="circle" shapeColor="#4B9E5F"
title="当前连接站点">
<EdfsWrap
class="h-auto max-h[48%] min-h-[258px]"
shape="circle"
shapeColor="#4B9E5F"
title="当前连接站点"
>
<el-scrollbar>
<div class="station-list-flow">
<div v-if="!Array.from(siteMap.values()).length"
class="wh-full flex-center items-center">
<el-empty :image-size="130" style="height: 180px;"/>
<div
v-if="!Array.from(siteMap.values()).length"
class="wh-full flex-center items-center"
>
<el-empty :image-size="130" style="height: 180px"/>
<!-- :description=""-->
</div>
<template v-for=" site in Array.from(siteMap.values())" v-else>
<template v-for="site in Array.from(siteMap.values())" v-else>
<div class="station-item">
<div class="title bg-[#4B9E5F]">
<div>{{ site.id }}</div>
@ -27,7 +33,9 @@ @@ -27,7 +33,9 @@
<div class="info-item">
<div class="info-item-label">离线设备</div>
<div class="info-item-value">
<div class="i-octicon:cloud-offline-16 color-[#F44336] text-16px"></div>
<div
class="i-octicon:cloud-offline-16 color-[#F44336] text-16px"
></div>
{{ site.offlineCount }}
</div>
</div>
@ -35,8 +43,12 @@ @@ -35,8 +43,12 @@
</div>
<div class="footer row-end-0">
<div class="m-l-auto p-b-8">
<el-button color="#4B9E5F" style="height: 28px; padding: 0 12px" type="primary"
@click="onTransferData(site)">设备详情
<el-button
color="#4B9E5F"
style="height: 28px; padding: 0 12px"
type="primary"
@click="onTransferData(site)"
>设备详情
</el-button>
</div>
</div>
@ -47,9 +59,13 @@ @@ -47,9 +59,13 @@
</EdfsWrap>
</template>
<EdfsWrap :title="`${env.VITE_APP_ENV == 'local' ? '数据导出历史' : '数据导入历史'}`"
class="flex-1 overflow-auto" shape="circle"
shapeColor="#F1BF63" useScrollBar>
<EdfsWrap
:title="`${env.VITE_APP_ENV == 'local' ? '数据导出历史' : '数据导入历史'}`"
class="flex-1 overflow-auto"
shape="circle"
shapeColor="#F1BF63"
useScrollBar
>
<el-scrollbar>
<div class="station-list-flow">
<div v-for="item in siteList" :key="item.id" class="station-item">
@ -59,7 +75,8 @@ @@ -59,7 +75,8 @@
<el-tooltip content="详情">
<div
class="i-material-symbols:info-outline :hover:color-[#ddd] color-[#FFFFFF] cursor-pointer text-20px"
@click="onSiteDetails(item)"></div>
@click="onSiteDetails(item)"
></div>
</el-tooltip>
</div>
</div>
@ -98,14 +115,13 @@ @@ -98,14 +115,13 @@
</el-scrollbar>
</EdfsWrap>
</div>
</template>
<script lang="ts" setup>
import { type SiteInfo, useTransferDataStore } from '@/stores/transferData'
import { storeToRefs } from 'pinia'
import { getSiteList, type ISite } from '@/api/module/transfer'
import EdfsWrap from "@/components/Edfs-wrap.vue";
import EdfsWrap from '@/components/Edfs-wrap.vue'
import { useMessage } from '@/utils/useMessage'
const message = useMessage()
@ -115,8 +131,7 @@ const env = import.meta.env @@ -115,8 +131,7 @@ const env = import.meta.env
const router = useRouter()
const transferDataStore = useTransferDataStore()
const { connectSite, siteMap, onlineCount, offlineCount } =
storeToRefs(transferDataStore)
const { connectSite, siteMap, onlineCount, offlineCount } = storeToRefs(transferDataStore)
function onTransferData(site: SiteInfo) {
router.push({
@ -143,9 +158,7 @@ const siteList = ref<ISite[]>([]) @@ -143,9 +158,7 @@ const siteList = ref<ISite[]>([])
async function loadSiteList() {
const res = await getSiteList()
if (res.code === 200 || res.code === 0) {
Array.from({ length: 10 }).map(() => {
siteList.value.push(...res.data)
})
siteList.value = res.data
} else {
message.error(res?.msg || '获取站点列表失败')
}
@ -224,7 +237,8 @@ onMounted(() => { @@ -224,7 +237,8 @@ onMounted(() => {
color: var(--label-color);
}
.info-item-value, .info-item-path {
.info-item-value,
.info-item-path {
font-size: 20px;
font-weight: 500;
margin-top: 4px;

Loading…
Cancel
Save