zn-admin-vue3-wcs/src/views/mapPage/realTimeMap/components-tool/equipmentToolDialog.vue

<template>
  <Dialog v-model="dialogFormVisible" title="设备" width="586" class="equipment-form-dialog">
    <div class="device-list">
      <div class="device-item" v-for="(item, index) in deviceList" :key="index">
        <img class="img" :src="item.url" />
        <div class="name">{{ item.deviceNo }}</div>
        <el-icon color="#f56c6c" class="delete-icon" @click="deleteDeviceItem(item, index)"
          ><DeleteFilled
        /></el-icon>
      </div>
      <div class="add-device-item" @click="addDevice">
        <el-icon color="#C4C4C4" class="add-icon"><Plus /></el-icon>
        <div class="name">新增设备</div>
      </div>
    </div>
  </Dialog>

  <!-- 新增设备 -->
  <Dialog v-model="addDeviceVisible" title="设备" width="586" class="equipment-form-dialog">
    <el-form :model="deviceInfo" label-width="90">
      <el-form-item label="设备类型" required>
        <el-select
          v-model="deviceInfo.deviceType"
          class="!w-400px"
          clearable
          placeholder="请选择设备类型"
          @change="deviceTypeChange()"
        >
          <el-option
            v-for="dict in getIntDictOptions(DICT_TYPE.DEVICE_TYPE)"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="设备编号" required>
        <el-select
          v-model="deviceInfo.deviceInfoId"
          class="!w-400px"
          clearable
          placeholder="请选择设备编号"
        >
          <el-option
            v-for="item in allDeviceList"
            :key="item.id"
            :label="item.deviceNo"
            :value="item.id"
          />
        </el-select>
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="addDeviceVisible = false">取消</el-button>
        <el-button type="primary" @click="submitAddForm"> 确定 </el-button>
      </div>
    </template>
  </Dialog>
</template>

<script setup>
import { reactive, ref } from 'vue'
import * as MapApi from '@/api/map/map'
import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'

const message = useMessage() // 消息弹窗
const props = defineProps({
  positionMapId: {
    type: String,
    default: () => ''
  }
})

const dialogFormVisible = ref(false) //列表的
const addDeviceVisible = ref(false) //新增的

//获取设备信息
const deviceList = ref([]) //设备列表
const getDeviceList = async () => {
  deviceList.value = await MapApi.getDeviceInformationList({
    positionMapId: props.positionMapId
  })
}

//选中
const deleteDeviceItem = async (item, index) => {
  try {
    await message.delConfirm('是否取消绑定所选中数据？')
    await MapApi.mapBindDeviceInfo({
      positionMapId: item.positionMapId,
      deviceInfoId: item.id,
      type: 2
    })
    message.success('取消绑定成功')
    await getDeviceList()
  } catch {}
}

//新增
const deviceInfo = ref({
  positionMapId: '',
  deviceInfoId: '',
  deviceType: '',
  type: 1
})
const allDeviceList = ref()
//添加设备
const addDevice = () => {
  addDeviceVisible.value = true
  initAddForm()
}
//类型改变
const deviceTypeChange = async () => {
  getAllDeviceList()
}
const getAllDeviceList = async () => {
  allDeviceList.value = await MapApi.getDeviceInformationList({
    unboundFlag: 1,
    deviceType: deviceInfo.value.deviceType
  })
}
//新增表单新增
const submitAddForm = async () => {
  deviceInfo.value.positionMapId = props.positionMapId
  await MapApi.mapBindDeviceInfo(deviceInfo.value)
  message.success('新增成功')
  addDeviceVisible.value = false
  getDeviceList()
}

const open = (item) => {
  dialogFormVisible.value = true
  getDeviceList()
}

const initAddForm = () => {
  deviceInfo.value.deviceInfoId = ''
  deviceInfo.value.deviceType = ''
  getAllDeviceList()
}

defineExpose({ open }) // 提供 open 方法，用于打开弹窗
</script>

<style lang="scss">
.equipment-form-dialog {
  padding: 0px;

  .el-dialog__footer {
    padding: 0px 20px 20px 0;
    border-top: none !important;
  }

  .device-list {
    display: flex;
    flex-wrap: wrap;

    .device-item {
      position: relative;
      width: 164px;
      height: 118px;
      background: #ffffff;
      box-shadow: rgba(0, 0, 0, 0.05) 0px 0px 0px 1px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      margin: 10px;

      .img {
        width: 67px;
        height: 59px;
      }

      .name {
        margin-top: 8px;
        font-family:
          PingFangSC,
          PingFang SC;
        font-weight: 400;
        font-size: 14px;
        color: #91929e;
        line-height: 20px;
        text-align: left;
        font-style: normal;
      }

      .delete-icon {
        cursor: pointer;
        font-size: 18px;
        position: absolute;
        right: 8px;
        top: 8px;
      }
    }
  }

  .add-device-item {
    width: 164px;
    height: 118px;
    background: rgba(63, 140, 255, 0.04);
    border: 1px dashed #bac8e3;
    box-shadow: rgba(0, 0, 0, 0.05) 0px 0px 0px 1px;
    margin: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    .add-icon {
      font-size: 28px;
    }
    .name {
      margin-top: 8px;
      font-family:
        PingFangSC,
        PingFang SC;
      font-weight: 400;
      font-size: 14px;
      color: #91929e;
      line-height: 20px;
      text-align: left;
      font-style: normal;
    }
  }
}
</style>