wangqi
/
EDFS-MCU
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

feat: 样式修改

main
betaqi 1 week ago
parent
aba07c78e9
commit
5b08c41a5c
2 changed files with 71 additions and 64 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 34
      src/views/stationData/index.vue
  2. 97
      src/views/stationData/transfer/index.vue

34
src/views/stationData/index.vue
Unescape View File

@ -1,16 +1,16 @@ @@ -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"
class="h-auto max-h[48%] min-h-[258px]">
<EdfsWrap class="h-auto max-h[48%] min-h-[258px]" shape="circle" shapeColor="#4B9E5F"
title="当前连接站点">
<el-scrollbar>
<div class="station-list-flow">
<div class="wh-full flex-center items-center"
v-if="!Array.from(siteMap.values()).length">
<el-empty style="height: 180px;" :image-size="130"/>
<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-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 @@ @@ -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 @@ @@ -48,11 +48,11 @@
</template>
<EdfsWrap :title="`${env.VITE_APP_ENV == 'local' ? '数据导出历史' : '数据导入历史'}`"
shape="circle" shapeColor="#F1BF63"
class="flex-1 overflow-auto" useScrollBar>
class="flex-1 overflow-auto" shape="circle"
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 @@ @@ -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[]>([]) @@ -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(() => { @@ -164,13 +166,11 @@ onMounted(() => {
.station-list-flow {
width: 100%;
height: 100%;
display: flex;
flex-wrap: wrap;
column-gap: 20px;
row-gap: 24px;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 16px;
.station-item {
width: 280px;
height: 180px;
border: 1px solid var(--station-card-border-color);
border-radius: 6px;

97
src/views/stationData/transfer/index.vue
Unescape View File

@ -1,23 +1,20 @@ @@ -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
color="#3894FF"
@click="onSelectAllCheckbox">
<span class="text-white">{{
isSelectAllCheckbox ? '取消全选' : '全选'
}}
<el-button color="#3894FF" @click="onSelectAllCheckbox">
<span class="text-white"
>{{ isSelectAllCheckbox ? '取消全选' : '全选' }}
</span>
</el-button>
<el-button type="primary" @click="onBatchSave">
@ -27,41 +24,41 @@ @@ -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
class="h-32 leading-32px">
<div class="overflow-hidden text-ellipsis whitespace-nowrap w-140">设备ID:
<el-tooltip :content="item.sn "> {{ item.sn }}</el-tooltip>
<div v-else class="h-32 leading-32px">
<div class="overflow-hidden text-ellipsis whitespace-nowrap w-140">
设备ID:
<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 @@ @@ -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 @@ @@ -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 @@ @@ -112,14 +108,16 @@
</template>
<template v-else>
<template v-for="key in Object.keys(offlineDeviceMap)">
<div class="info-item"
v-if="['create_time','end_time','start_time'].includes(key)">
<div
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 @@ @@ -136,8 +134,8 @@
<OnLineTransferDlg
ref="onLineTransferDlgRef"
@on-save="onLineDeviceTransfer"
:is-batch-transfer="isBatchTransfer"
@on-save="onLineDeviceTransfer"
/>
<OffTransferDlg
ref="offTransferDlgRef"
@ -146,14 +144,14 @@ @@ -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' @@ -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 { computed } from "vue";
import EdfsWrap from '@/components/Edfs-wrap.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(() => isonLineTransfer.value ? '数据导出' : '数据导入')
const localTransferBtnText = computed(() =>
isonLineTransfer.value ? '数据导出' : '数据导入',
)
const transferDataStore = useTransferDataStore()
const { devicesMap } = storeToRefs(transferDataStore)
@ -217,7 +216,10 @@ const onlineDeviceMap: Record< @@ -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() { @@ -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) { @@ -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() { @@ -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() { @@ -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() { @@ -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;

Write Preview
Loading…
Cancel
Save