系统坐标、坐标格式、设备管理

src/renderer/src/views/components/propertyBox/addDevice.vue

@@ -0,0 +1,196 @@
+<template>
+  <Dialog
+    ref="baseDialog"
+    class="addDevice"
+    :title="addTitle"
+    left="calc(50% - 160px)"
+    top="calc(50% - 120px)"
+  >
+    <template #content>
+      <el-form label-width="100px" :model="addForm" :rules="peopleRules" ref="peopleFormRef">
+        <el-form-item label="名称" prop="cameraName">
+          <el-input v-model="addForm.cameraName" clearable />
+        </el-form-item>
+        <el-form-item label="设备IP" prop="ip">
+          <el-input v-model="addForm.ip" clearable></el-input>
+        </el-form-item>
+        <el-form-item label="设备端口" prop="port">
+          <el-input v-model="addForm.port" clearable></el-input>
+        </el-form-item>
+        <el-form-item label="用户名" prop="userName">
+          <el-input v-model="addForm.userName" clearable></el-input>
+        </el-form-item>
+        <el-form-item label="密码" prop="password">
+          <el-input v-model="addForm.password" clearable></el-input>
+        </el-form-item>
+        <el-form-item label="设备类型" prop="type">
+          <el-select v-model="addForm.type" filterable placeholder="请选择">
+            <el-option label="海康" value="1"> </el-option>
+            <el-option label="大华" value="2"> </el-option>
+            <!-- <el-option label="手动录入" value="3"> </el-option> -->
+          </el-select>
+        </el-form-item>
+        <el-form-item v-if="addForm.type === '3'" label="视频流地址" prop="flvUrl">
+          <el-input v-model="addForm.flvUrl" clearable></el-input>
+        </el-form-item>
+        <el-form-item label="通道号" prop="channel">
+          <el-input v-model="addForm.channel" clearable></el-input>
+        </el-form-item>
+      </el-form>
+    </template>
+    <template #footer>
+      <el-button @click="cancel">取消</el-button>
+      <el-button type="primary" @click="submitProtal"> 确定 </el-button>
+    </template>
+  </Dialog>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import { inject } from 'vue'
+import { TreeApi } from '@/api/tree'
+import Dialog from '@/components/dialog/baseDialog.vue'
+import { initMapData } from '../../../common/initMapData'
+import { useTreeNode } from '../tree/hooks/treeNode'
+import { deviceApi } from '@/api/deviceManage/index'
+import { ElMessage, ElMessageBox } from 'element-plus'
+
+const { cusAddNodes } = useTreeNode()
+
+const baseDialog: any = ref(null)
+const eventBus: any = inject('bus')
+
+var addTitle = ref('')
+var peopleFormRef: any = ref('')
+
+var addForm: any = reactive({
+  cameraName: '',
+  ip: '',
+  port: '',
+  userName: '',
+  password: '',
+  type: '',
+  channel: '',
+  flvUrl: ''
+})
+
+const peopleRules: any = reactive({
+  cameraName: [{ required: true, message: '请输入名称', trigger: 'blur' }],
+  ip: [{ required: true, message: '请输入ip', trigger: 'blur' }],
+  port: [{ required: true, message: '请输入设备端口号', trigger: 'blur' }],
+  userName: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
+  password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
+  type: [{ required: true, message: '请选择设备类型', trigger: 'blur' }]
+})
+
+var cancel = () => {
+  // pDialogVisible.value = false
+  baseDialog.value?.close()
+
+  addForm = {
+    cameraName: '',
+    ip: '',
+    port: '',
+    userName: '',
+    password: '',
+    type: '',
+    channel: '',
+    flvUrl: ''
+  }
+}
+var submitProtal = () => {
+  peopleFormRef.value.validate(async (valid) => {
+    if (valid) {
+      if (addForm.channel === undefined || addForm.channel === '' || addForm.channel === null) {
+        addForm.channel = 1
+      }
+      if (addTitle.value == '添加设备') {
+        const res = await deviceApi.addDevice(addForm)
+
+        if (res.code === 200) {
+          ElMessage.success('操作成功')
+          eventBus.emit('addOptionResuit')
+        }
+      } else {
+        delete addForm.updatedAt
+        delete addForm.areaId
+        delete addForm.createdAt
+        const res = await deviceApi.updateDevice(addForm)
+        if (res.code === 200) {
+          ElMessage.success('操作成功')
+          eventBus.emit('addOptionResuit')
+        }
+      }
+      baseDialog.value?.close()
+    } else {
+      console.log('error submit!!')
+      return false
+    }
+  })
+}
+eventBus.on('openAddDevice', (params) => {
+  addTitle.value = params.title
+  if (addTitle.value != '添加设备') {
+    addForm = params.data
+  } else {
+    addForm = {
+      cameraName: '',
+      ip: '',
+      port: '',
+      userName: '',
+      password: '',
+      type: '',
+      channel: '',
+      flvUrl: ''
+    }
+  }
+  baseDialog.value?.open()
+})
+const open = () => {
+  baseDialog.value?.open()
+}
+const confirm = () => {
+  baseDialog.value?.close()
+}
+defineExpose({
+  open
+})
+</script>
+
+<style lang="scss">
+.YJ-custom-base-dialog.addDevice > .content input,
+.YJ-custom-base-dialog.addDevice > .content textarea {
+  background-color: transparent !important;
+  border: unset !important;
+}
+</style>
+<style scoped lang="scss">
+::v-deep .el-form-item--label-right .el-form-item__label {
+  color: #fff !important;
+}
+::v-deep .el-form-item .el-input__wrapper {
+  background-color: rgba(0, 0, 0, 0.5) !important;
+  box-shadow: 0 0 0 0.5px #00ffff inset !important; /* 新增此行 */
+}
+::v-deep .el-form-item .el-select__wrapper {
+  background-color: rgba(0, 0, 0, 0.5) !important;
+  box-shadow: 0 0 0 0.5px #00ffff inset !important; /* 新增此行 */
+  :deep(input) {
+    background-color: transparent !important;
+    border: unset !important;
+  }
+}
+::v-deep .el-form-item .el-input__inner {
+  color: #fff !important;
+}
+::v-deep .el-form-item .el-select__placeholder {
+  color: #fff !important;
+}
+::v-deep .el-input__wrapper {
+  padding: 0px !important;
+}
+::v-deep .el-button:hover {
+  background-color: rgba(0, 255, 255, 0.2) !important;
+  color: rgba(0, 255, 255, 1) !important;
+}
+</style>