feat:设备管理中样式调整

shuishen

2025-09-29 56ef9f1590edae76ac19c8678875e5a844d1b1b7

feat:设备管理中样式调整

 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>