`添加设备`

src/main.ts

@@ -35,6 +35,7 @@ import 'element-tree-line/dist/style.css';
 
 // 国际化
 import i18n from '@/lang/index';
+import EZUIKit from 'ezuikit-js';
 
 const app = createApp(App);
 // 全局方法挂载

src/views/yunying/video/index.vue

@@ -48,7 +48,7 @@
       </div>
       <div style="width: 77%; margin-left: 2%">
         <div class="card-header">
-          <div style="display: flex; flex-direction: row">
+          <div style="display: flex; flex-direction: row;position: relative">
             <div style="width: 4px; height: 19px; opacity: 1; background: #409eff"></div>
             <span
               style="
@@ -62,7 +62,10 @@
               >站点设备</span
             >
             <span style="margin-left: 30px; font-size: 14px">{{currentdata?.label}}</span>
+
+
           </div>
+           <el-button v-if="tableData.length>0 && tableData.length<4" type="primary" style="position: absolute;right: 20px;" @click="dialogVisible = true">添加设备</el-button>
         </div>
         <div style="margin-top: 20px">
           <el-table :data="tableData" border style="width: 100%">
@@ -91,6 +94,7 @@
             <el-table-column prop="code" label="操作" >
                 <template #default="scope">
                    <div>
+                        <el-button type="primary" link size="small" @click="deleteDevice(scope.row)">删除</el-button>
                         <el-button v-if="scope.row.type=='cabinet'"  type="primary" link size="small">立即同步</el-button>
                    </div>
                 </template>
@@ -116,6 +120,36 @@
         </div>
       </div>
     </div>
+
+<el-dialog  v-model="dialogVisible" title="添加设备" width="500">
+  <el-form :model="formdata" ref="ruleForm" label-width="100px" class="demo-ruleForm">
+     <el-form-item label="名称">
+      <el-input v-model="formdata.name" />
+    </el-form-item>
+    <el-form-item label="类型">
+      <el-select v-model="formdata.type" placeholder="请选择设备类型">
+        <el-option v-if="tableData.filter(i=>i.type=='tts').length<1" label="tts" value="tts" />
+        <el-option v-if="tableData.filter(i=>i.type=='led').length<1" label="led" value="led" />
+        <el-option v-if="tableData.filter(i=>i.type=='cabinet').length<1" label="快递柜" value="cabinet" />
+        <el-option v-if="tableData.filter(i=>i.type=='camera').length<1" label="摄像头" value="camera" />
+      </el-select>
+    </el-form-item>
+    <el-form-item label="序列号">
+      <el-input v-model="formdata.code" />
+    </el-form-item>
+  </el-form>
+  <template #footer>
+      <div class="dialog-footer">
+        <el-button @click="dialogVisible = false">取消</el-button>
+        <el-button type="primary" @click="addDevice">
+          保存
+        </el-button>
+      </div>
+    </template>
+
+
+</el-dialog>
+
   </div>
 </template>
 
@@ -130,7 +164,11 @@ import imgulock from "@/assets/images/unlock@2x.png";
 const { proxy } = getCurrentInstance() as ComponentInternalInstance;
 const { tbl_sites } = toRefs<any>(proxy?.useDict('tbl_sites'));
 
-
+const formdata = ref({
+  name: "",
+  type: "",
+  code:""
+})
 
 
 const route = useRoute();
@@ -142,6 +180,7 @@ const activeName=ref("camera")
 
 const filterText = ref("");
 const treeRef = ref(null);
+const dialogVisible = ref(false);
 
 const gettreeheight = () => {
   return document.body.clientHeight - 100;
@@ -174,6 +213,20 @@ const savedata = () => {
   })
 }
 
+const deleteDevice = (datac) => {
+  tableData.value = tableData.value.filter(i => i.type != datac.type);
+  var data = {
+    dictCode: currentdata.value.dictCode,
+    dictValue: currentdata.value.value,
+    dictLabel: currentdata.value.label,
+    dictType: "tbl_sites",
+    remark: JSON.stringify(tableData.value)
+  }
+   updateData(data).then(res => {
+    ElMessage.success("成功!");
+  })
+}
+
 const handleTabClick = () => {
 
 }
@@ -216,6 +269,40 @@ const treeclick = (data: TreeNodeData, node: TreeNode) => {
 
 }
 
+
+const addDevice = () => {
+  dialogVisible.value = false;
+  if (formdata.value.name == "") {
+    ElMessage.warning("设备名称未填写");
+    return;
+  }
+  if (formdata.value.type == "") {
+    ElMessage.warning("设备类型未填写");
+    return;
+  }
+  if (formdata.value.code == "") {
+    ElMessage.warning("设备序列号未填写");
+    return;
+  }
+   if (tableData.value.filter(i => i.type == formdata.value.type).length >0) {
+    ElMessage.warning("存在相同类型的设备");
+    return;
+  }
+  tableData.value.push(formdata.value);
+   var data = {
+    dictCode: currentdata.value.dictCode,
+    dictValue: currentdata.value.value,
+    dictLabel: currentdata.value.label,
+    dictType: "tbl_sites",
+    remark: JSON.stringify(tableData.value)
+   }
+  updateData(data).then(res => {
+    ElMessage.success("成功!");
+  })
+
+
+}
+
 const currentCabinet = ref({
   total: 40,
   unused: 10,