Browse Source

feat: 设备数据侧边设备点位收缩功能

main
betaqi 2 days ago
parent
commit
60dba85268
  1. 7
      src/views/stationData/component/pointCheckbox.vue
  2. 11
      src/views/stationData/topology/components/detailDrawer.vue
  3. 13
      src/views/stationData/transfer/components/deviceDrawer.vue

7
src/views/stationData/component/pointCheckbox.vue

@ -1,5 +1,6 @@ @@ -1,5 +1,6 @@
<template>
<div class="w-320 h-full" v-loading="loadingPoints" element-loading-text="数据加载中...">
<div class="w-320 flex h-full" v-loading="loadingPoints" element-loading-text="数据加载中...">
<div class="flex-1">
<template v-if="!pointList.length">
<el-empty></el-empty>
</template>
@ -11,6 +12,10 @@ @@ -11,6 +12,10 @@
</el-checkbox-group>
</el-scrollbar>
</div>
<el-divider direction="vertical" style="height: 100%;"/>
</div>
</template>
<script setup lang="ts">

11
src/views/stationData/topology/components/detailDrawer.vue

@ -4,14 +4,15 @@ @@ -4,14 +4,15 @@
v-model="isShowDrawer"
:title="title"
direction="rtl"
size="90%"
size="100%"
modal-class="model-dev-opn"
:before-close="handleBeforeClose"
@opened="onDrawerOpened">
<main class="wh-full flex">
<EdfsWrap title="点位选择"
class="p-r-4 h-full w-340 border-r-1 border-solid border-r-#e4e7ed">
isCollapse :collapsed="collapsed" @collapse="onCollapse"
:style="{width: `${collapsed ? 0 : 340}px`}">
<el-select
v-if="currentGroup?.customNode"
v-model="selectValue"
@ -109,6 +110,7 @@ async function open(device: IDevice & { @@ -109,6 +110,7 @@ async function open(device: IDevice & {
}, group: IPointGroupOV) {
curDevice.value = device
currentGroup.value = group
onCollapse(false)
if (
currentGroup.value.customNode &&
currentGroup.value.brother &&
@ -215,6 +217,7 @@ async function loadChardData() { @@ -215,6 +217,7 @@ async function loadChardData() {
return
}
clearData()
onCollapse(true)
const limit = chartLimit.value
const offset = chartOffset.value
const options: any = {
@ -389,6 +392,10 @@ const disabledDate = (time: any) => { @@ -389,6 +392,10 @@ const disabledDate = (time: any) => {
}
const getBeforeMonth = dayjs().startOf('month').subtract(1, 'month').startOf('month').toDate()
const collapsed = ref(false)
function onCollapse(value?:boolean) {
collapsed.value = value ?? !collapsed.value
}
defineExpose({
open,

13
src/views/stationData/transfer/components/deviceDrawer.vue

@ -1,10 +1,11 @@ @@ -1,10 +1,11 @@
<template>
<div class="fault-rule-drawer">
<el-drawer v-model="isShowDrawer" :title="title" direction="rtl" size="90%"
<el-drawer v-model="isShowDrawer" :title="title" direction="rtl" size="100%"
modal-class="model-dev-opn"
:before-close="handleBeforeClose" @opened="onDrawerOpened">
<main class="wh-full flex">
<EdfsWrap title="点位组" class="p-r-4 h-full border-r-1 border-solid border-r-#e4e7ed">
<EdfsWrap title="点位组" isCollapse :collapsed="collapsed" @collapse="onCollapse"
:style="{width: `${collapsed ? 0 : 600}px`}">
<PointGroupTree
v-if="isShowDrawer"
:data="pointGroup"
@ -100,6 +101,7 @@ const curDevice = ref<IOfflineDevice | IOnlineDevice>() @@ -100,6 +101,7 @@ const curDevice = ref<IOfflineDevice | IOnlineDevice>()
async function open(device: IOfflineDevice | IOnlineDevice) {
curDevice.value = device
onCollapse(false)
await loadPointGroup()
.then(async () => {
await loadDeviceDetails()
@ -187,6 +189,7 @@ async function loadChardData() { @@ -187,6 +189,7 @@ async function loadChardData() {
message.error('请选择点位')
return
}
onCollapse(true)
clearData()
const limit = chartLimit.value
const offset = chartOffset.value
@ -396,6 +399,12 @@ const disabledDate = (time: any) => { @@ -396,6 +399,12 @@ const disabledDate = (time: any) => {
}
}
const collapsed = ref(false)
function onCollapse(value?:boolean) {
collapsed.value = value ?? !collapsed.value
}
const getBeforeMonth = dayjs().startOf('month').subtract(1, 'month').startOf('month').toDate()
defineExpose({
open,

Loading…
Cancel
Save