|
@@ -0,0 +1,345 @@
|
|
|
|
|
+<script setup lang="ts" name="Device">
|
|
|
|
|
+import apis from "@a"
|
|
|
|
|
+import message from "@@/utils/message"
|
|
|
|
|
+import dayjs from "dayjs"
|
|
|
|
|
+
|
|
|
|
|
+const groupIdOptions = computed(() => {
|
|
|
|
|
+ return [
|
|
|
|
|
+ { label: "请选择", value: "" },
|
|
|
|
|
+ { label: "", value: "" }
|
|
|
|
|
+ ]
|
|
|
|
|
+})
|
|
|
|
|
+
|
|
|
|
|
+const tableRef = ref()
|
|
|
|
|
+const modalRef = ref()
|
|
|
|
|
+const opts = reactive<any>({
|
|
|
|
|
+ columns: [
|
|
|
|
|
+ { field: "id", name: "ID", width: 100, visible: false, isSort: false, tooltip: true },
|
|
|
|
|
+ { field: "groupId", name: "设备分组", width: "auto", isSort: false, visible: true },
|
|
|
|
|
+ { field: "sn", name: "设备编码", width: "auto", isSort: true, visible: true },
|
|
|
|
|
+ { field: "name", name: "设备名称", width: "auto", isSort: true, visible: true },
|
|
|
|
|
+ { field: "type", name: "设备类型", width: 100, isSort: true, visible: true },
|
|
|
|
|
+ { field: "mode", name: "设备模式", width: 100, isSort: true, visible: true },
|
|
|
|
|
+ { field: "cycle", name: "上报周期", width: "auto", isSort: false, visible: true },
|
|
|
|
|
+ { field: "createdAt", name: "创建时间", width: 185, isSort: true, visible: true },
|
|
|
|
|
+ { field: "actions", name: `操作`, width: 150 }
|
|
|
|
|
+ ],
|
|
|
|
|
+ queryParams: {
|
|
|
|
|
+ groupId: undefined,
|
|
|
|
|
+ sn: undefined,
|
|
|
|
|
+ name: undefined,
|
|
|
|
|
+ type: undefined,
|
|
|
|
|
+ mode: undefined,
|
|
|
|
|
+ dateRange: []
|
|
|
|
|
+ },
|
|
|
|
|
+ searchFormItems: [
|
|
|
|
|
+ {
|
|
|
|
|
+ field: "groupId",
|
|
|
|
|
+ label: "设备分组",
|
|
|
|
|
+ class: "w-100",
|
|
|
|
|
+ component: "VS",
|
|
|
|
|
+ placeholder: "请选择设备分组",
|
|
|
|
|
+ data: () => groupIdOptions.value,
|
|
|
|
|
+ props: {
|
|
|
|
|
+ type: "select",
|
|
|
|
|
+ clearable: true
|
|
|
|
|
+ }
|
|
|
|
|
+ },
|
|
|
|
|
+ {
|
|
|
|
|
+ field: "sn",
|
|
|
|
|
+ label: "设备编码",
|
|
|
|
|
+ class: "w-100",
|
|
|
|
|
+ component: "I",
|
|
|
|
|
+ listeners: {
|
|
|
|
|
+ keyup: (e: any) => {
|
|
|
|
|
+ if (e.code == "Enter") {
|
|
|
|
|
+ handleQuery()
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+ },
|
|
|
|
|
+ {
|
|
|
|
|
+ field: "name",
|
|
|
|
|
+ label: "设备名称",
|
|
|
|
|
+ class: "w-100",
|
|
|
|
|
+ component: "I",
|
|
|
|
|
+ listeners: {
|
|
|
|
|
+ keyup: (e: any) => {
|
|
|
|
|
+ if (e.code == "Enter") {
|
|
|
|
|
+ handleQuery()
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+ },
|
|
|
|
|
+ {
|
|
|
|
|
+ field: "type",
|
|
|
|
|
+ label: "设备类型",
|
|
|
|
|
+ class: "w-100",
|
|
|
|
|
+ component: "Dict",
|
|
|
|
|
+ props: {
|
|
|
|
|
+ type: "radio",
|
|
|
|
|
+ placeholder: "请选择设备类型",
|
|
|
|
|
+ dictType: "iot_device_type"
|
|
|
|
|
+ }
|
|
|
|
|
+ },
|
|
|
|
|
+ {
|
|
|
|
|
+ field: "mode",
|
|
|
|
|
+ label: "设备模式",
|
|
|
|
|
+ class: "w-100",
|
|
|
|
|
+ component: "Dict",
|
|
|
|
|
+ props: {
|
|
|
|
|
+ type: "radio",
|
|
|
|
|
+ placeholder: "请选择设备模式",
|
|
|
|
|
+ dictType: "iot_device_mode"
|
|
|
|
|
+ }
|
|
|
|
|
+ },
|
|
|
|
|
+ {
|
|
|
|
|
+ field: "dateRange",
|
|
|
|
|
+ label: "创建时间",
|
|
|
|
|
+ class: "w-100",
|
|
|
|
|
+ component: "D",
|
|
|
|
|
+ placeholder: "请选择创建时间",
|
|
|
|
|
+ props: {
|
|
|
|
|
+ type: "daterange",
|
|
|
|
|
+ valueFormat: "YYYY-MM-DD",
|
|
|
|
|
+ rangeSeparator: "-",
|
|
|
|
|
+ startPlaceholder: "开始日期",
|
|
|
|
|
+ endPlaceholder: "结束日期"
|
|
|
|
|
+ },
|
|
|
|
|
+ listeners: {
|
|
|
|
|
+ change: (v: any) => {
|
|
|
|
|
+ queryParams.value.dateRange = v
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+ ] as any,
|
|
|
|
|
+ permission: "iot:device",
|
|
|
|
|
+ handleFuns: {},
|
|
|
|
|
+ customBtns: [],
|
|
|
|
|
+ tableListFun: apis.iot.deviceApi.listDevice,
|
|
|
|
|
+ getEntityFun: apis.iot.deviceApi.getDevice,
|
|
|
|
|
+ deleteEntityFun: apis.iot.deviceApi.delDevice,
|
|
|
|
|
+ formItems: [
|
|
|
|
|
+ {
|
|
|
|
|
+ field: "groupId",
|
|
|
|
|
+ label: "设备分组",
|
|
|
|
|
+ class: "w-100",
|
|
|
|
|
+ required: false,
|
|
|
|
|
+ component: "VS",
|
|
|
|
|
+ placeholder: "请选择设备分组",
|
|
|
|
|
+ data: () => groupIdOptions.value,
|
|
|
|
|
+ props: {
|
|
|
|
|
+ type: "select",
|
|
|
|
|
+ clearable: true
|
|
|
|
|
+ }
|
|
|
|
|
+ },
|
|
|
|
|
+ {
|
|
|
|
|
+ field: "sn",
|
|
|
|
|
+ label: "设备编码",
|
|
|
|
|
+ class: "w-100",
|
|
|
|
|
+ component: "I",
|
|
|
|
|
+ required: true
|
|
|
|
|
+ },
|
|
|
|
|
+ {
|
|
|
|
|
+ field: "name",
|
|
|
|
|
+ label: "设备名称",
|
|
|
|
|
+ class: "w-100",
|
|
|
|
|
+ component: "I",
|
|
|
|
|
+ required: true
|
|
|
|
|
+ },
|
|
|
|
|
+ {
|
|
|
|
|
+ field: "type",
|
|
|
|
|
+ label: "设备类型",
|
|
|
|
|
+ class: "w-100",
|
|
|
|
|
+ required: true,
|
|
|
|
|
+ component: "Dict",
|
|
|
|
|
+ props: {
|
|
|
|
|
+ type: "radio",
|
|
|
|
|
+ clearable: true,
|
|
|
|
|
+ placeholder: "请选择设备类型",
|
|
|
|
|
+ dictType: "iot_device_type"
|
|
|
|
|
+ }
|
|
|
|
|
+ },
|
|
|
|
|
+ {
|
|
|
|
|
+ field: "mode",
|
|
|
|
|
+ label: "设备模式",
|
|
|
|
|
+ class: "w-100",
|
|
|
|
|
+ required: true,
|
|
|
|
|
+ component: "Dict",
|
|
|
|
|
+ props: {
|
|
|
|
|
+ type: "radio",
|
|
|
|
|
+ clearable: true,
|
|
|
|
|
+ placeholder: "请选择设备模式",
|
|
|
|
|
+ dictType: "iot_device_mode"
|
|
|
|
|
+ }
|
|
|
|
|
+ },
|
|
|
|
|
+ {
|
|
|
|
|
+ field: "cycle",
|
|
|
|
|
+ label: "上报周期",
|
|
|
|
|
+ class: "w-100",
|
|
|
|
|
+ component: "I",
|
|
|
|
|
+ required: false
|
|
|
|
|
+ },
|
|
|
|
|
+ {
|
|
|
|
|
+ field: "description",
|
|
|
|
|
+ label: "设备描述",
|
|
|
|
|
+ class: "w-100",
|
|
|
|
|
+ component: "I",
|
|
|
|
|
+ required: false
|
|
|
|
|
+ },
|
|
|
|
|
+ {
|
|
|
|
|
+ field: "protocol",
|
|
|
|
|
+ label: "表计协议",
|
|
|
|
|
+ class: "w-100",
|
|
|
|
|
+ component: "I",
|
|
|
|
|
+ required: false
|
|
|
|
|
+ },
|
|
|
|
|
+ {
|
|
|
|
|
+ field: "address",
|
|
|
|
|
+ label: "表计地址",
|
|
|
|
|
+ class: "w-100",
|
|
|
|
|
+ component: "I",
|
|
|
|
|
+ required: false
|
|
|
|
|
+ },
|
|
|
|
|
+ {
|
|
|
|
|
+ field: "lvRef",
|
|
|
|
|
+ label: "表计线基准电压",
|
|
|
|
|
+ class: "w-100",
|
|
|
|
|
+ component: "I",
|
|
|
|
|
+ required: false
|
|
|
|
|
+ },
|
|
|
|
|
+ {
|
|
|
|
|
+ field: "pvRef",
|
|
|
|
|
+ label: "表计相基准电压",
|
|
|
|
|
+ class: "w-100",
|
|
|
|
|
+ component: "I",
|
|
|
|
|
+ required: false
|
|
|
|
|
+ }
|
|
|
|
|
+ ] as any,
|
|
|
|
|
+ resetForm: () => {
|
|
|
|
|
+ form.value = emptyFormData.value
|
|
|
|
|
+ },
|
|
|
|
|
+ emptyFormData: {
|
|
|
|
|
+ id: undefined,
|
|
|
|
|
+ groupId: undefined,
|
|
|
|
|
+ sn: undefined,
|
|
|
|
|
+ name: undefined,
|
|
|
|
|
+ type: undefined,
|
|
|
|
|
+ mode: undefined,
|
|
|
|
|
+ cycle: undefined,
|
|
|
|
|
+ description: undefined,
|
|
|
|
|
+ protocol: undefined,
|
|
|
|
|
+ address: undefined,
|
|
|
|
|
+ lvRef: undefined,
|
|
|
|
|
+ pvRef: undefined
|
|
|
|
|
+ }
|
|
|
|
|
+})
|
|
|
|
|
+const { queryParams, emptyFormData } = toRefs(opts)
|
|
|
|
|
+const form = ref<any>(emptyFormData.value)
|
|
|
|
|
+
|
|
|
|
|
+/** 修改按钮操作 */
|
|
|
|
|
+function handleUpdate(row: any) {
|
|
|
|
|
+ tableRef.value.defaultHandleFuns.handleUpdate("", row)
|
|
|
|
|
+}
|
|
|
|
|
+/** 删除按钮操作 */
|
|
|
|
|
+function handleDelete(rows: any[]) {
|
|
|
|
|
+ tableRef.value.defaultHandleFuns.handleDelete("", rows)
|
|
|
|
|
+}
|
|
|
|
|
+/** 提交按钮 */
|
|
|
|
|
+function submitForm() {
|
|
|
|
|
+ if (form.value.id != undefined) {
|
|
|
|
|
+ apis.iot.deviceApi.updateDevice(form.value).then(() => {
|
|
|
|
|
+ message.msgSuccess("修改成功")
|
|
|
|
|
+ handleQuery()
|
|
|
|
|
+ })
|
|
|
|
|
+ } else {
|
|
|
|
|
+ apis.iot.deviceApi.addDevice(form.value).then(() => {
|
|
|
|
|
+ message.msgSuccess("新增成功")
|
|
|
|
|
+ handleQuery()
|
|
|
|
|
+ })
|
|
|
|
|
+ }
|
|
|
|
|
+}
|
|
|
|
|
+/** 查询按钮 */
|
|
|
|
|
+function handleQuery() {
|
|
|
|
|
+ addDateRange(queryParams.value, queryParams.value.dateRange)
|
|
|
|
|
+ tableRef.value?.search()
|
|
|
|
|
+}
|
|
|
|
|
+/** 查询重置按钮 */
|
|
|
|
|
+function resetQuery() {
|
|
|
|
|
+ queryParams.value.dateRange = []
|
|
|
|
|
+ addDateRange(queryParams.value, queryParams.value.dateRange)
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+function init() {}
|
|
|
|
|
+
|
|
|
|
|
+onMounted(init)
|
|
|
|
|
+</script>
|
|
|
|
|
+
|
|
|
|
|
+<template>
|
|
|
|
|
+ <div class="app-container">
|
|
|
|
|
+ <VbDataTable
|
|
|
|
|
+ ref="tableRef"
|
|
|
|
|
+ :handle-perm="opts.permission"
|
|
|
|
|
+ :handle-funs="opts.handleFuns"
|
|
|
|
|
+ :search-form-items="opts.searchFormItems"
|
|
|
|
|
+ :columns="opts.columns"
|
|
|
|
|
+ :custom-btns="opts.customBtns"
|
|
|
|
|
+ :remote-fun="opts.tableListFun"
|
|
|
|
|
+ :get-entity-fun="opts.getEntityFun"
|
|
|
|
|
+ :delete-entity-fun="opts.deleteEntityFun"
|
|
|
|
|
+ sortField="createdAt"
|
|
|
|
|
+ sort-order="desc"
|
|
|
|
|
+ :modal="modalRef"
|
|
|
|
|
+ :reset-form-fun="opts.resetForm"
|
|
|
|
|
+ v-model:form-data="form"
|
|
|
|
|
+ :query-params="queryParams"
|
|
|
|
|
+ :check-multiple="true"
|
|
|
|
|
+ :has-checkbox="true"
|
|
|
|
|
+ :reset-search-form-fun="resetQuery"
|
|
|
|
|
+ :custom-search-fun="handleQuery">
|
|
|
|
|
+ <template #groupId="{ row }">
|
|
|
|
|
+ <vb-tag :value="row.groupId" :data="[]"></vb-tag>
|
|
|
|
|
+ </template>
|
|
|
|
|
+ <template #type="{ row }">
|
|
|
|
|
+ <DictTag :value="row.type" type="iot_device_type"></DictTag>
|
|
|
|
|
+ </template>
|
|
|
|
|
+ <template #mode="{ row }">
|
|
|
|
|
+ <DictTag :value="row.mode" type="iot_device_mode"></DictTag>
|
|
|
|
|
+ </template>
|
|
|
|
|
+ <template #createdAt="{ row }">
|
|
|
|
|
+ <span>{{ dayjs(row.createdAt).format("YYYY-MM-DD HH:mm:ss") }}</span>
|
|
|
|
|
+ </template>
|
|
|
|
|
+ <template #actions="{ row }">
|
|
|
|
|
+ <vb-tooltip content="修改" placement="top">
|
|
|
|
|
+ <el-button
|
|
|
|
|
+ link
|
|
|
|
|
+ type="primary"
|
|
|
|
|
+ @click="handleUpdate(row)"
|
|
|
|
|
+ v-hasPermission="'iot:device:edit'">
|
|
|
|
|
+ <template #icon>
|
|
|
|
|
+ <VbIcon icon-name="notepad-edit" icon-type="duotone" class="fs-3"></VbIcon>
|
|
|
|
|
+ </template>
|
|
|
|
|
+ </el-button>
|
|
|
|
|
+ </vb-tooltip>
|
|
|
|
|
+ <vb-tooltip content="删除" placement="top">
|
|
|
|
|
+ <el-button
|
|
|
|
|
+ link
|
|
|
|
|
+ type="primary"
|
|
|
|
|
+ @click="handleDelete([row])"
|
|
|
|
|
+ v-hasPermission="'iot:device:remove'">
|
|
|
|
|
+ <template #icon>
|
|
|
|
|
+ <VbIcon icon-name="trash-square" icon-type="duotone" class="fs-3"></VbIcon>
|
|
|
|
|
+ </template>
|
|
|
|
|
+ </el-button>
|
|
|
|
|
+ </vb-tooltip>
|
|
|
|
|
+ </template>
|
|
|
|
|
+ </VbDataTable>
|
|
|
|
|
+ <VbModal
|
|
|
|
|
+ v-model:modal="modalRef"
|
|
|
|
|
+ :title="opts.modalTitle"
|
|
|
|
|
+ :form-items="opts.formItems as any"
|
|
|
|
|
+ :form-data="form"
|
|
|
|
|
+ @confirm="submitForm"
|
|
|
|
|
+ append-to-body></VbModal>
|
|
|
|
|
+ </div>
|
|
|
|
|
+</template>
|