From 56ef9f1590edae76ac19c8678875e5a844d1b1b7 Mon Sep 17 00:00:00 2001
From: shuishen <1109946754@qq.com>
Date: Mon, 29 Sep 2025 14:57:05 +0800
Subject: [PATCH] feat:设备管理中样式调整
---
src/views/device/airport.vue | 143 ++++++++++++++++++++++++-----------------------
1 files changed, 73 insertions(+), 70 deletions(-)
diff --git a/src/views/device/airport.vue b/src/views/device/airport.vue
index 64a48d0..b6dbe57 100644
--- a/src/views/device/airport.vue
+++ b/src/views/device/airport.vue
@@ -52,52 +52,57 @@
</span>
</template>
<template #mode_code="{ row }">
- <span class="text" v-if="row.domain == 3 || row.domain == 0" :style="row.mode_code != '-1' ? 'color: #00ee8b' : 'color: #de5e5e'">
+ <span class="text" v-if="row.domain == 3 || row.domain == 0"
+ :style="row.mode_code != '-1' ? 'color: #00ee8b' : 'color: #de5e5e'">
{{ getModelText(row.mode_code) }}
</span>
</template>
<template #menu="scope">
<el-dropdown>
- <el-button type="primary" text v-if="permission.oss_set"><el-icon><MoreFilled /></el-icon>更多</el-button>
- <template #dropdown v-if="scope.row.domain == 3">
- <el-dropdown-menu teleported>
- <el-dropdown-item command="a">
- <el-button type="primary" text icon="el-icon-paperclip" v-if="permission.oss_set" @click.stop="handleOpenOssSet(scope.row, scope.index)">存储配置</el-button>
- </el-dropdown-item>
- <el-dropdown-item command="b">
- <el-button type="primary" text icon="el-icon-share" v-if="permission.per_share && scope.row.domain == 3"
- @click.stop="handleOpenDevicePerShare(scope.row, scope.index)">机场授权</el-button>
- </el-dropdown-item>
- <el-dropdown-item command="c"> <el-button type="primary" text icon="el-icon-position" :disabled="!scope.row.status"
- v-if="permission.rang_con && scope.row.domain == 3"
- @click.stop="handleOpenRemoteDebugging(scope.row, scope.index)">远程调试</el-button>
- </el-dropdown-item>
- <el-dropdown-item command="d"><el-button type="primary" text icon="el-icon-collection" v-if="permission.fly_device_offline"
- @click.stop="rollFirmware(scope.row)">固件版本管理</el-button>
- </el-dropdown-item>
- <el-dropdown-item command="d" v-if="!scope.row.status">
- <el-button type="primary" text icon="el-icon-collection" @click.stop="dockNotLine(scope.row)">
- {{ scope.row.hidden_flag === 1 ? '设备上线' : '设备下线'}}
- </el-button>
- </el-dropdown-item>
- <el-dropdown-item command="e"><el-button type="primary" text icon="el-icon-document-delete" v-if="permission.fly_device_offline"
- @click.stop="handleDeviceOffline(scope.row)">注销</el-button>
- </el-dropdown-item>
- </el-dropdown-menu>
- </template>
- <template #dropdown v-else>
- <el-dropdown-menu teleported>
- <!-- <el-dropdown-item command="a">
+ <el-button type="primary" text v-if="permission.oss_set"><el-icon>
+ <MoreFilled />
+ </el-icon>更多</el-button>
+ <template #dropdown v-if="scope.row.domain == 3">
+ <el-dropdown-menu teleported>
+ <el-dropdown-item command="a">
+ <el-button type="primary" text icon="el-icon-paperclip" v-if="permission.oss_set"
+ @click.stop="handleOpenOssSet(scope.row, scope.index)">存储配置</el-button>
+ </el-dropdown-item>
+ <el-dropdown-item command="b">
+ <el-button type="primary" text icon="el-icon-share" v-if="permission.per_share && scope.row.domain == 3"
+ @click.stop="handleOpenDevicePerShare(scope.row, scope.index)">机场授权</el-button>
+ </el-dropdown-item>
+ <el-dropdown-item command="c"> <el-button type="primary" text icon="el-icon-position"
+ :disabled="!scope.row.status" v-if="permission.rang_con && scope.row.domain == 3"
+ @click.stop="handleOpenRemoteDebugging(scope.row, scope.index)">远程调试</el-button>
+ </el-dropdown-item>
+ <el-dropdown-item command="d"><el-button type="primary" text icon="el-icon-collection"
+ v-if="permission.fly_device_offline" @click.stop="rollFirmware(scope.row)">固件版本管理</el-button>
+ </el-dropdown-item>
+ <el-dropdown-item command="d" v-if="!scope.row.status">
+ <el-button type="primary" text icon="el-icon-collection" @click.stop="dockNotLine(scope.row)">
+ {{ scope.row.hidden_flag === 1 ? '设备上线' : '设备下线' }}
+ </el-button>
+ </el-dropdown-item>
+ <el-dropdown-item command="e"><el-button type="primary" text icon="el-icon-document-delete"
+ v-if="permission.fly_device_offline" @click.stop="handleDeviceOffline(scope.row)">注销</el-button>
+ </el-dropdown-item>
+ </el-dropdown-menu>
+ </template>
+ <template #dropdown v-else>
+ <el-dropdown-menu teleported>
+ <!-- <el-dropdown-item command="a">
<el-button type="primary" text icon="el-icon-circle-close" @click.stop="rowDel(scope.row, scope.index)">删除</el-button>
</el-dropdown-item> -->
- <!-- <el-dropdown-item command="a">
+ <!-- <el-dropdown-item command="a">
<el-button type="primary" text icon="el-icon-key" v-if="permission.operate_password_set" @click.stop="handleOperatePassword(scope.row, scope.index)">操控密码设置</el-button>
</el-dropdown-item> -->
- <el-dropdown-item command="d"><el-button type="primary" text icon="el-icon-collection" @click.stop="rollFirmware(scope.row)">固件版本管理</el-button>
- </el-dropdown-item>
- </el-dropdown-menu>
- </template>
- </el-dropdown>
+ <el-dropdown-item command="d"><el-button type="primary" text icon="el-icon-collection"
+ @click.stop="rollFirmware(scope.row)">固件版本管理</el-button>
+ </el-dropdown-item>
+ </el-dropdown-menu>
+ </template>
+ </el-dropdown>
</template>
<!-- 添加行政区划显示模板 -->
@@ -131,8 +136,9 @@
<div style="display: flex;justify-content: center;margin-bottom: 10px;">注销
<span style="color:cornflowerblue;font-weight: bolder;margin: 0px 4px;">
{{ cancelSNName }}
- </span> 设备可能会影响相关数据,确认注销吗?</div>
- <div style="display: flex;justify-content: center;color:red;font-size: 12px;">*删除相关图片、视频、事件</div>
+ </span> 设备可能会影响相关数据,确认注销吗?
+ </div>
+ <div style="display: flex;justify-content: center;color:red;font-size: 12px;">*删除相关图片、视频、事件</div>
<template #footer>
<span class="dialog-footer" style="display: flex;justify-content: center;">
<el-button @click="cancenOperate = false">取 消</el-button>
@@ -201,7 +207,7 @@
<script>
import { ElMessage, ElMessageBox } from 'element-plus'
-import { getRegionTreeAll } from '@/api/job/task';
+import { getRegionTreeAll } from '@/api/job/task'
import { pxToRem } from '@/utils/rem'
import {
getList,
@@ -225,8 +231,8 @@
import FirmwareManage from './components/firmwareManage.vue'
import DevicePerShare from './components/devicePerShare.vue'
import DockControlPanel from './components/DockControlPanel.vue'
-import { getWebsocketUrl } from '@/utils/websocket/config';
-import ConnectWebSocket from '@/utils/websocket';
+import { getWebsocketUrl } from '@/utils/websocket/config'
+import ConnectWebSocket from '@/utils/websocket'
export default {
components: {
FirmwareManage,
@@ -327,7 +333,7 @@
grid: false,
height: 'auto',
- calcHeight: 180,
+ calcHeight: 20,
column: [
{
@@ -450,8 +456,8 @@
const statusMap = {
0: '关',
1: '开',
- };
- return statusMap[cellValue] || '/';
+ }
+ return statusMap[cellValue] || '/'
}
},
@@ -484,7 +490,7 @@
},
],
formatter: (row, value) => {
- return value[0]? `${this.$dayjs(value[0]).format('YYYY-MM-DD')}~${this.$dayjs(value[1]).format('YYYY-MM-DD')}` : '/';
+ return value[0] ? `${this.$dayjs(value[0]).format('YYYY-MM-DD')}~${this.$dayjs(value[1]).format('YYYY-MM-DD')}` : '/'
},
},
// {
@@ -786,11 +792,11 @@
}
})
},
- mounted() {
+ mounted () {
getRegionTreeAll({ parentCode: this.userInfo.detail.areaCode }).then(res => {
- const column = this.findObject(this.option.column, 'area_code');
- column.dicData = res.data.data ? [res.data.data] : [];
- });
+ const column = this.findObject(this.option.column, 'area_code')
+ column.dicData = res.data.data ? [res.data.data] : []
+ })
},
methods: {
getDockModeText (value) {
@@ -800,11 +806,11 @@
let txt = '离线'
if (value === 0 || value === 4) {
txt = '在线'
- } else if(value === 1) {
+ } else if (value === 1) {
txt = '现场调试'
- } else if(value === 2) {
+ } else if (value === 2) {
txt = '远程调试'
- } else if(value === 3) {
+ } else if (value === 3) {
txt = '固件升级中'
}
return txt
@@ -890,7 +896,7 @@
this.cancenOperate = true
this.cancelSNName = row.nickname
this.cancenOperateRow = row
-
+
},
cancenOperateDo () {
@@ -898,7 +904,7 @@
this.deleteFlag = false
deviceOffline(this.cancenOperateRow.device_sn, true).then(res => {
ElMessage.success('注销成功')
-
+
this.init()
}).catch(error => {
ElMessage.error('注销失败')
@@ -930,16 +936,16 @@
})
},
// 设备下线
- dockNotLine(row) {
- let txt = row.hidden_flag === 1?'上线':'下线'
+ dockNotLine (row) {
+ let txt = row.hidden_flag === 1 ? '上线' : '下线'
ElMessageBox.confirm(`确定${txt}该设备吗?`, '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning',
})
.then(() => {
- let hidden_flag = row.hidden_flag === 1?0:1
- devicesUpAndDown({id:row.id, hidden_flag:hidden_flag})
+ let hidden_flag = row.hidden_flag === 1 ? 0 : 1
+ devicesUpAndDown({ id: row.id, hidden_flag: hidden_flag })
.then(res => {
ElMessage.success(`${txt}成功`)
this.init()
@@ -1387,7 +1393,7 @@
}
values['type'] = 1
if (values.area_code) {
- values['area_code'] = values.area_code.split(',').pop()
+ values['area_code'] = values.area_code.split(',').pop()
}
this.loading = true
getList(page.currentPage, page.pageSize, values).then(res => {
@@ -1493,8 +1499,10 @@
display: flex;
flex-direction: column;
align-items: center;
- .el-tag:first-child{
- margin-bottom: 5px;}
+
+ .el-tag:first-child {
+ margin-bottom: 5px;
+ }
}
.onlineStatus {
@@ -1535,12 +1543,15 @@
border-color: #409eff;
}
}
+
:deep(.avue-crud__menu) {
display: flex;
}
+
.more-container {
position: relative;
}
+
.show-more-do {
position: absolute;
background-color: #ffffff;
@@ -1553,12 +1564,4 @@
height: 190px;
right: 0;
}
-
-:deep(.avue-crud__pagination) {
- position: fixed;
- bottom: 10px;
- right: 30px;
-}
-
-
</style>
--
Gitblit v1.9.3