列表

web/src/api/device.js

@@ -35,11 +35,10 @@ export const obtainDeviceCode = (code) => {
 }
 
 // 获取设备列表
-export const obtainDeviceList = (params) => {
+export const obtainDeviceList = () => {
     return service({
         url: '/parking/device/list',
-        method: 'get',
-        params
+        method: 'get'
     })
 }
 

web/src/view/parking/carOwner.vue

@@ -9,7 +9,7 @@
         </el-input>
       </el-form-item>
       <el-form-item>
-        <el-button icon="Plus">新增</el-button>
+        <el-button icon="Plus" @click="openCarOwner('新增车主','')">新增</el-button>
       </el-form-item>
       <el-form-item>
         <el-button icon="Edit">编辑</el-button>
@@ -33,19 +33,76 @@
         <el-button icon="ChatLineRound">其他</el-button>
       </el-form-item>
     </el-form>
-    <el-table>
+    <el-table :data="carOwnerList">
       <el-table-column label="名字"></el-table-column>
       <el-table-column label="姓氏"></el-table-column>
       <el-table-column label="手机"></el-table-column>
       <el-table-column label="邮箱"></el-table-column>
       <el-table-column label="住址"></el-table-column>
       <el-table-column label="备注"></el-table-column>
+      <el-table-column label="操作">
+        <template #default="scope">
+          <el-button @click="putCarOwner" icon="edit">编辑</el-button>
+          <el-button @click="deleteCarOwner" icon="delete">删除</el-button>
+        </template>
+      </el-table-column>
     </el-table>
+    <el-dialog v-model="carOwnerShow" :title="carOwnerTitle">
+      <el-form label-width="100">
+        <el-form-item label="名称：">
+          <el-input/>
+        </el-form-item>
+        <el-form-item label="姓氏：">
+          <el-input/>
+        </el-form-item>
+        <el-form-item label="手机：">
+          <el-input/>
+        </el-form-item>
+        <el-form-item label="邮箱：">
+          <el-input/>
+        </el-form-item>
+        <el-form-item label="vip：">
+          <el-input/>
+        </el-form-item>
+      </el-form>
+    </el-dialog>
   </div>
 </template>
 
 <script setup>
+import { obtainCarOwnerList } from '@/api/carOwner'
+import { onMounted, reactive, ref } from 'vue'
+const carOwnerList = reactive([])
+const carOwnerShow = ref(false)
+const carOwnerTitle = ref('')
+const getCarOwnerList = () => {
+  obtainCarOwnerList().then(res => {
+    if (res.code === 0) {
+      console.log(res.data)
+      carOwnerList.length = 0
+      carOwnerList.push(...res.data.list)
+    }
+  })
+}
 
+const deleteCarOwner = () => {
+
+}
+
+const putCarOwner = () => {
+
+}
+
+const openCarOwner = (head,data) => {
+
+}
+
+const carOwnerOperation = () => {
+
+}
+onMounted(() => {
+  getCarOwnerList()
+})
 </script>
 
 <style scoped lang="scss">

web/src/view/parking/parkingInfo.vue

@@ -108,7 +108,7 @@
         >
           <el-form inline>
             <el-form-item>
-              <el-button icon="Plus" text type="success">新增</el-button>
+              <el-button icon="Plus" text type="success" @click="deviceTypeShow = true">新增</el-button>
             </el-form-item>
             <el-form-item>
               <el-button icon="Edit" text type="warning">编辑</el-button>
@@ -120,14 +120,20 @@
               <el-button icon="Refresh" text type="primary">刷新</el-button>
             </el-form-item>
           </el-form>
-          <el-table size="small">
-            <el-table-column label="编码" align="center" width="100"></el-table-column>
-            <el-table-column label="名称" align="center" width="250"></el-table-column>
-            <el-table-column label="类别" align="center" width="150"></el-table-column>
-            <el-table-column label="IP地址" align="center" width="200"></el-table-column>
+          <el-table size="small" :data="deviceList">
+            <el-table-column label="编码" align="center" width="100" prop="device_code"></el-table-column>
+            <el-table-column label="名称" align="center" width="250" prop="device_name"></el-table-column>
+            <el-table-column label="类别" align="center" width="150" prop="device_type"></el-table-column>
+            <el-table-column label="IP地址" align="center" width="200" prop="ip_address"></el-table-column>
             <el-table-column label="端口" align="center" width="150"></el-table-column>
             <el-table-column label="在线状态" align="center" width="150"></el-table-column>
-            <el-table-column label="备注" align="center"></el-table-column>
+            <el-table-column label="操作" align="center">
+              <template #default="scope">
+                <el-button type="primary" icon="edit" text>备注</el-button>
+                <el-button type="primary" icon="edit" text>编辑</el-button>
+                <el-button type="primary" icon="delete" text>删除</el-button>
+              </template>
+            </el-table-column>
           </el-table>
         </el-tab-pane>
       </el-tabs>
@@ -193,8 +199,8 @@
         </div>
       </template>
     </el-dialog>
-    <el-dialog v-model="deviceShow" :title="deviceTitle" width="500">
-      <el-form>
+    <el-dialog v-model="deviceShow" title="设备添加" width="500">
+      <el-form label-width="80">
         <el-form-item label="IP地址：">
           <el-input v-model="deviceData.ip_address"></el-input>
         </el-form-item>
@@ -211,12 +217,23 @@
       <template #footer>
         <div class="dialog-footer">
           <el-button @click="deviceShow = false">取消</el-button>
-          <el-button type="primary" @click="deviceOperation">
+          <el-button type="primary" @click="deviceVlprAdd">
             确认
           </el-button>
         </div>
       </template>
     </el-dialog>
+    <el-dialog v-model="deviceTypeShow" title="设备类型" width="500">
+      <el-select v-model="deviceData.device_type" placeholder="请选择设备类型" style="width: 240px">
+        <el-option label="VLPR" value="VLPR" />
+        <el-option label="ASeries" value="ASeries" />
+        <el-option label="ASeries-G" value="ASeries-G" />
+      </el-select>
+      <template #footer>
+        <el-button @click="deviceTypeShow = false">取消</el-button>
+        <el-button type="primary" @click="confirmType">确定</el-button>
+      </template>
+    </el-dialog>
   </el-row>
 </template>
 
@@ -235,6 +252,7 @@ import {
   obtainChannelList,
   deleteChannel
 } from '@/api/channel'
+import {addDevice,obtainDeviceList} from '@/api/device'
 import { ElMessage, ElMessageBox } from 'element-plus'
 
 const activeName = ref('detail')
@@ -404,27 +422,55 @@ const getChannelList = () => {
   })
 }
 
-//设备管理
+//设备管理...............................................
 const deviceData = reactive({
   device_code:'',
   device_name:'',
-  device_type:'',
+  device_type:'VLPR',
   ip_address:'',
-  port:'',
+  port:0,
   description:''
 })
 
 const deviceShow = ref(false)
 
-const deviceTitle = ref('')
+const deviceVlprAdd = async () => {
+  await addDevice(deviceData).then(res => {
+    if (res.code === 0) {
+      ElMessage.success('添加成功')
+      deviceShow.value = false
+      deviceTypeShow.value = false
+      getDeviceList()
+    } else {
+      ElMessage.error('添加失败')
+    }
+  })
+}
+
+const deviceTypeShow = ref(false)
+
+const deviceList = reactive([])
 
-const deviceOperation = () => {
+const confirmType = () => {
+  if (deviceData.device_type === 'VLPR') {
+    deviceShow.value = true
+  }
+}
 
+const getDeviceList = async () => {
+  await obtainDeviceList().then(res => {
+    if (res.code === 0) {
+      console.log('设备列表', res.data.list)
+      deviceList.length = 0
+      deviceList.push(...res.data.list)
+    }
+  })
 }
 
 onMounted(() => {
   getGuardBoothList()
   getChannelList()
+  getDeviceList()
 })
 </script>