lc_tunnel/web/src/view/admin/device/device.vue

<template>
  <el-container>
    <el-header class="gva-search-box">
      <el-form
        v-model="deviceSearch"
        :inline="true"
        style="line-height: 75px"
      >
        <el-form-item label="名称">
          <el-input
            v-model="deviceSearch.name"
          />
        </el-form-item>
        <el-form-item label="序号">
          <el-input
            v-model="deviceSearch.sn"
          />
        </el-form-item>
        <el-form-item label="类型">
          <el-select
            v-model.number="deviceSearch.genre"
            style="width: 240px"
            clearable
          >
            <el-option
              v-for="item in deviceGenre"
              :key="item.ID"
              :label="item.name"
              :value="item.ID"
            />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            @click="getData"
          >查询</el-button>
        </el-form-item>
      </el-form>
    </el-header>
    <el-main class="gva-table-box">
      <div style="margin: 0 0 20px 0 ">
        <el-button
          type="success"
          @click="isDeviceAddDialog"
        >添加</el-button>
        <el-divider direction="vertical" />
        <el-button
          type="primary"
          @click="deviceGenreDrawer = true"
        >类型操作</el-button>
      </div>
      <el-table
        :data="deviceData"
        style="width: 100%;min-height:600px"
      >
        <el-table-column
          type="selection"
          width="55"
          align="center"
        />
        <el-table-column
          prop="name"
          label="名称"
          align="center"
        />
        <el-table-column
          prop="sn"
          label="序号"
          align="center"
        />
        <el-table-column
          prop="deviceGenre.name"
          label="类型"
          align="center"
        />
        <el-table-column
          prop="tunnel.name"
          label="隧道"
          align="center"
        />
        <el-table-column
          label="操作"
          align="center"
        >
          <template #default="scope">
            <el-button
              type="primary"
              @click="isDeviceEditDialog(scope.row)"
            >
              修改
            </el-button>
            <el-button
              type="danger"
              @click="deviceDelete(scope.row)"
            >
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="gva-pagination">
        <el-pagination
          :current-page="deviceSearch.pageInfo.page"
          :page-size="deviceSearch.pageInfo.pageSize"
          :page-sizes="[10, 30, 50, 100]"
          :total="total"
          layout="total, sizes, prev, pager, next, jumper"
          @current-change="handleCurrentChange"
          @size-change="handleSizeChange"
        />
      </div>
    </el-main>
    <!--    设备类型操作-->
    <el-drawer
      v-model="deviceGenreDrawer"
      title="设备类型操作"
      direction="rtl"
      size="30%"
    >
      <div style="margin: 0 0 20px 0">
        <el-button
          type="success"
          @click="deviceGenreAddDialog=true"
        >添加</el-button>
      </div>
      <el-table
        :data="deviceGenre"
        style="width: 100%"
      >
        <el-table-column
          prop="name"
          label="名称"
        />
        <el-table-column
          prop="type"
          label="硬件类型"
        />
        <el-table-column label="操作">
          <template #default="scope">
            <el-button
              size="small"
              @click="isDeviceGenreEditDialog(scope.row)"
            >
              修改
            </el-button>
            <el-button
              size="small"
              type="danger"
              @click="deviceGenreDelete(scope.row)"
            >
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-drawer>
    <!--    设备类型新增-->
    <el-dialog
      v-model="deviceGenreAddDialog"
      title="设备类型新增"
      width="300"
      align-center
    >
      <el-form
        ref="deviceGenreRef"
        :model="deviceGenreData"
        :rules="deviceGenreRules"
      >
        <el-form-item
          label="类型名称"
          prop="name"
        >
          <el-input
            v-model="deviceGenreData.name"
            label="类型名称"
          />
        </el-form-item>
        <el-form-item
          label="硬件类型"
          prop="type"
        >
          <el-select
            v-model="deviceGenreData.type"
            style="width: 240px"
          >
            <el-option
              v-for="item in genreOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="设备图标">
          <typeIcon
            :meta="iconData"
            style="width: 100%"
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="deviceGenreAddDialog = false;deviceGenreRef.resetFields();">取消</el-button>
          <el-button
            type="primary"
            @click="deviceGenreAdd"
          >
            确定
          </el-button>
        </div>
      </template>
    </el-dialog>
    <!--    设备类型修改-->
    <el-dialog
      v-model="deviceGenreEditDialog"
      title="设备类型修改"
      width="300"
      align-center
    >
      <el-form
        ref="deviceGenreRef"
        :model="deviceGenreData"
        :rules="deviceGenreRules"
      >
        <el-form-item
          label="类型名称"
          prop="name"
        >
          <el-input
            v-model="deviceGenreData.name"
            label="类型名称"
          />
        </el-form-item>
        <el-form-item
          label="硬件类型"
          prop="type"
        >
          <el-select
            v-model="deviceGenreData.type"
            style="width: 240px"
          >
            <el-option
              v-for="item in genreOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="类型图标">
          <type-icon
            style="width: 100%"
            :meta="modifyIcon"
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="deviceGenreEditDialog = false;deviceGenreRef.resetFields();">取消</el-button>
          <el-button
            type="primary"
            @click="deviceGenreEdit"
          >
            确定
          </el-button>
        </div>
      </template>
    </el-dialog>
    <!--    设备添加-->
    <el-dialog
      v-model="deviceAddDialog"
      title="设备添加"
      width="500"
      align-center
    >
      <el-form
        ref="deviceRef"
        :model="device"
        :rules="deviceRules"
        style="line-height: 75px"
      >
        <el-form-item
          label="名称"
          prop="name"
        >
          <el-input
            v-model="device.name"
            style="width: 200px;"
          />
        </el-form-item>
        <el-form-item
          label="序号"
          prop="sn"
        >
          <el-input
            v-model="device.sn"
            disabled
            style="width: 200px;"
          />
        </el-form-item>
        <el-form-item
          label="类型"
          prop="genre"
        >
          <el-select
            v-model.number="device.genre"
            style="width: 240px"
            @change="changDevice"
          >
            <el-option
              v-for="item in deviceGenre"
              :key="item.ID"
              :label="item.name"
              :value="item.ID"
            />
          </el-select>
        </el-form-item>
        <el-form-item
          label="隧道"
          prop="tunnel"
        >
          <el-select
            v-model.number="device.tunnelId"
            style="width: 240px"
            clearable
          >
            <el-option
              v-for="item in tunnel"
              :key="item.ID"
              :label="item.name"
              :value="item.ID"
            />
          </el-select>
        </el-form-item>
        <el-form-item
          label="设备地址"
          prop="address"
        >
          <el-input
            v-model="device.address"
            style="width: 200px;"
          />
        </el-form-item>
        <el-form-item
          v-if="isDevice === '环境设备'"
          label="采集时间"
          prop="taskTime"
        >
          <el-input
            v-model.number="device.taskTime"
            style="width: 200px;"
          />
        </el-form-item>
        <el-form-item
          v-if="isDevice === '环境设备'"
          label="延迟时间"
          prop="waitTime"
        >
          <el-input
            v-model.number="device.waitTime"
            style="width: 200px;"
          />
        </el-form-item>
        <el-form-item
          v-if="isDevice === '开关设备'"
          label="雷达编号"
          prop="radarId"
        >
          <el-input
            v-model.number="device.radarId"
            style="width: 200px;"
          />
        </el-form-item>
        <el-form-item
          label="串口编号"
          prop="serialId"
        >
          <el-input
            v-model.number="device.serialId"
            style="width: 200px;"
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="deviceAddDialog = false;deviceRef.resetFields();">取消</el-button>
          <el-button
            type="primary"
            @click="deviceAdd"
          >
            确定
          </el-button>
        </div>
      </template>
    </el-dialog>
    <!--    设备修改-->
    <el-dialog
      v-model="deviceEditDialog"
      title="设备修改"
      width="500"
      align-center
    >
      <el-form
        ref="deviceRef"
        :model="device"
        :rules="deviceRules"
        style="line-height: 75px"
      >
        <el-form-item
          label="名称"
          prop="name"
        >
          <el-input
            v-model="device.name"
            style="width: 200px;"
          />
        </el-form-item>
        <el-form-item
          label="序号"
          prop="sn"
        >
          <el-input
            v-model="device.sn"
            disabled
            style="width: 200px;"
          />
        </el-form-item>
        <el-form-item
          label="类型"
          prop="genre"
        >
          <el-select
            v-model.number="device.genre"
            style="width: 240px"
            @change="changDevice"
          >
            <el-option
              v-for="item in deviceGenre"
              :key="item.ID"
              :label="item.name"
              :value="item.ID"
            />
          </el-select>
        </el-form-item>
        <el-form-item
          label="隧道"
          prop="tunnel"
        >
          <el-select
            v-model.number="device.tunnelId"
            style="width: 240px"
            clearable
          >
            <el-option
              v-for="item in tunnel"
              :key="item.ID"
              :label="item.name"
              :value="item.ID"
            />
          </el-select>
        </el-form-item>
        <el-form-item
          label="设备地址"
          prop="address"
        >
          <el-input
            v-model="device.address"
            style="width: 200px;"
          />
        </el-form-item>
        <el-form-item
          v-if="isDevice === '环境设备'"
          label="采集时间"
          prop="taskTime"
        >
          <el-input
            v-model.number="device.taskTime"
            style="width: 200px;"
          />
        </el-form-item>
        <el-form-item
          v-if="isDevice === '环境设备'"
          label="延迟时间"
          prop="waitTime"
        >
          <el-input
            v-model.number="device.waitTime"
            style="width: 200px;"
          />
        </el-form-item>
        <el-form-item
          v-if="isDevice === '开关设备'"
          label="雷达编号"
          prop="radarId"
        >
          <el-input
            v-model.number="device.radarId"
            style="width: 200px;"
          />
        </el-form-item>
        <el-form-item
          label="串口编号"
          prop="serialId"
        >
          <el-input
            v-model.number="device.serialId"
            style="width: 200px;"
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="deviceEditDialog = false;deviceRef.resetFields();">取消</el-button>
          <el-button
            type="primary"
            @click="deviceEdit"
          >
            确定
          </el-button>
        </div>
      </template>
    </el-dialog>
  </el-container>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import {
  createDevice,
  createDeviceGenre, deleteDevice,
  deleteDeviceGenre,
  queryAllDeviceGenres,
  queryDeviceList, updateDevice,
  updateDeviceGenre
} from '@/api/device'
import { queryAllTunnels } from '@/api/tunnel'
import typeIcon from '@/view/superAdmin/menu/icon.vue'

// 搜索条件
const deviceSearch = ref({
  pageInfo: {
    page: 1,
    pageSize: 10
  },
  name: '',
  sn: '',
  genre: undefined
})

const total = ref(0)

// 分页
const handleSizeChange = (val) => {
  deviceSearch.value.pageInfo.pageSize = val
  getData()
}

const handleCurrentChange = (val) => {
  deviceSearch.value.pageInfo.page = val
  getData()
}

const deviceGenre = ref()
const deviceData = ref()
const tunnel = ref()

const getData = async() => {
  await queryAllDeviceGenres().then(res => {
    deviceGenre.value = res.data
    device.value.genre = res.data[0].ID
  })
  await queryAllTunnels().then(res => {
    tunnel.value = res.data
  })
  await queryDeviceList(deviceSearch.value).then(res => {
    deviceData.value = res.data.list
    console.log(deviceData.value)
    deviceSearch.value.pageInfo.page = res.data.page
    deviceSearch.value.pageInfo.pageSize = res.data.pageSize
    total.value = res.data.total
  })
}

// 设备类型 --------------------------------------------------------------------
const deviceGenreDrawer = ref(false)
const deviceGenreData = ref({
  id: 0,
  name: '',
  type: '',
  iconAddress: ''
})

const genreOptions = [
  {
    value: '环境设备',
    label: '环境设备',
  },
  {
    value: '开关设备',
    label: '开关设备',
  }
]

const deviceGenreRef = ref(null)
const deviceGenreRules = reactive({
  name: [{ required: true, message: '名称不能为空', trigger: 'blur' }],
  type: [{ required: true, message: '硬件类型不能为空', trigger: 'blur' }]
})

// 添加
const deviceGenreAddDialog = ref(false)

const deviceGenreAdd = () => {
  deviceGenreRef.value.validate(async(valid) => {
    if (valid) {
      deviceGenreData.value.id = 0
      await createDeviceGenre(deviceGenreData.value).then(res => {
        deviceGenreAddDialog.value = false
        if (res.code === 0) {
          ElMessage.success('添加成功')
        }
        getData()
      })
    } else {
      console.log('验证失败，请检查输入')
      return false
    }
  })
}

// 修改
const deviceGenreEditDialog = ref(false)

const isDeviceGenreEditDialog = (val) => {
  deviceGenreEditDialog.value = true
  deviceGenreData.value = val
}
const deviceGenreEdit = async() => {
  deviceGenreData.value.iconAddress = modifyIcon.icon
  deviceGenreRef.value.validate(async(valid) => {
    if (valid) {
      await updateDeviceGenre(deviceGenreData.value).then(res => {
        deviceGenreEditDialog.value = false
        Object.assign(modifyIcon, {
          activeName: '',
          title: '',
          icon: '',
          defaultMenu: false,
          closeTab: false,
          keepAlive: false,
        })
        if (res.code === 0) {
          ElMessage.success('修改成功')
        }
        getData()
      })
    } else {
      console.log('验证失败，请检查输入')
      return false
    }
  })
}
// 删除
const deviceGenreDelete = async(val) => {
  ElMessageBox.confirm(
    '将永久删除改数据，请问继续吗?',
    '删除',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(async() => {
      await deleteDeviceGenre(val.ID).then(res => {
        if (res.code === 0) {
          ElMessage.success('删除成功')
        }
        getData()
      })
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '删除已取消',
      })
    })
}

// 设备 -------------------------------------------------------------------
// 初始数据
const device = ref({
  id: 0,
  name: '',
  sn: '',
  tunnelId: undefined,
  genre: undefined,
  address: '',
  taskTime: 0,
  waitTime: 0,
  radarId: 0,
  serialId: 1
})

const isDevice = ref('环境设备')

const changDevice = (item) => {
  isDevice.value = deviceGenre.value.find(item => item.ID === device.value.genre).type
  if (isDevice.value === '环境设备') {
    device.value.taskTime = 0
    device.value.waitTime = 0
  } else if (isDevice.value === '开关设备') {
    device.value.radarId = 0
  }
}

const deviceRef = ref(null)
const deviceRules = reactive({
  name: [{ required: true, message: '名称不能为空', trigger: 'blur' }],
  sn: [{ required: true, message: '名称不能为空', trigger: 'blur' }],
  genre: [{ required: true, message: '设备类型不能为空', trigger: 'blur' }],
  address: [{ required: true, message: '设备地址不能为空', trigger: 'blur' }],
  serialId: [{ required: true, message: '串口编号不能为空', trigger: 'blur' }],
})

// 新增
const deviceAddDialog = ref(false)

const isDeviceAddDialog = () => {
  deviceAddDialog.value = true
  device.value.sn = 'LC' + Date.now()
}
const deviceAdd = async() => {
  deviceRef.value.validate(async(valid) => {
    if (valid) {
      device.value.id = 0
      await createDevice(device.value).then(res => {
        deviceAddDialog.value = false
        if (res.code === 0) {
          ElMessage.success('添加成功')
        }
        getData()
      })
    } else {
      console.log('验证失败，请检查输入')
      return false
    }
  })
}
// 修改
const deviceEditDialog = ref(false)

const isDeviceEditDialog = (val) => {
  deviceEditDialog.value = true
  device.value = val
  isDevice.value = deviceGenre.value.find(item => item.ID === device.value.genre).type
}

const deviceEdit = async() => {
  deviceRef.value.validate(async(valid) => {
    if (valid) {
      await updateDevice(device.value).then(res => {
        deviceEditDialog.value = false
        if (res.code === 0) {
          ElMessage.success('修改成功')
        }
        getData()
      })
    } else {
      console.log('验证失败，请检查输入')
      return false
    }
  })
}

// 删除
const deviceDelete = (val) => {
  ElMessageBox.confirm(
    '将永久删除改数据，请问继续吗?',
    '删除',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(async() => {
      await deleteDevice(val.ID).then(res => {
        if (res.code === 0) {
          ElMessage.success('删除成功')
        }
        getData()
      })
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '删除已取消',
      })
    })
}

// 图标
const iconData = reactive({
  activeName: '',
  title: '',
  icon: '',
  defaultMenu: false,
  closeTab: false,
  keepAlive: false,
})

const modifyIcon = reactive({
  activeName: '',
  title: '',
  icon: '',
  defaultMenu: false,
  closeTab: false,
  keepAlive: false,
})

onMounted(() => {
  getData()
})
</script>

<style scoped lang="scss">

</style>