看板

components.d.ts

@@ -7,10 +7,24 @@ export {}
 
 declare module '@vue/runtime-core' {
   export interface GlobalComponents {
+    AButton: typeof import('ant-design-vue/es')['Button']
+    ACheckbox: typeof import('ant-design-vue/es')['Checkbox']
+    ACheckboxGroup: typeof import('ant-design-vue/es')['CheckboxGroup']
+    ADatePicker: typeof import('ant-design-vue/es')['DatePicker']
     ADropdown: typeof import('ant-design-vue/es')['Dropdown']
+    AForm: typeof import('ant-design-vue/es')['Form']
+    AFormItem: typeof import('ant-design-vue/es')['FormItem']
+    AInput: typeof import('ant-design-vue/es')['Input']
+    AInputPassword: typeof import('ant-design-vue/es')['InputPassword']
     AMenu: typeof import('ant-design-vue/es')['Menu']
     AMenuItem: typeof import('ant-design-vue/es')['MenuItem']
+    AModal: typeof import('ant-design-vue/es')['Modal']
+    ARadio: typeof import('ant-design-vue/es')['Radio']
+    ARadioGroup: typeof import('ant-design-vue/es')['RadioGroup']
     ARow: typeof import('ant-design-vue/es')['Row']
+    ASelect: typeof import('ant-design-vue/es')['Select']
+    ASelectOption: typeof import('ant-design-vue/es')['SelectOption']
+    ASwitch: typeof import('ant-design-vue/es')['Switch']
     ATree: typeof import('ant-design-vue/es')['Tree']
     Draggable: typeof import('./src/components/Draggable.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']

src/views/page/Aside/cameraRightMenu.vue

@@ -18,11 +18,36 @@
             <div class="buttomItem">
                 <div class="buttomName">工具箱</div>
             </div>
+            <div class="buttomItem" @click="openUserEdit">
+                <div class="buttomName">设置</div>
+            </div>
         </div>
+
+
+
+        <a-modal 
+            v-model:visible="visible" 
+            title="用户设置" 
+            @ok="handleOk"
+            width="90%"
+            wrapClassName="full-modal"
+        >
+            <userEdit></userEdit>
+        </a-modal>
+
 </template>
 
 <script setup lang='ts'>
+import userEdit from '@/views/page/aside/rightMenuItem/userEdit.vue'
+import { ref } from 'vue';
 
+const visible = ref(false)
+function openUserEdit(){  
+    visible.value = !visible.value
+}
+function handleOk(){
+    visible.value = false;
+}
 </script>
 
 <style scoped lang='less'>
@@ -79,4 +104,26 @@
         z-index: 2;
         font-size: 0.8em;
     }
+
+
+</style>
+<style lang="less" >
+
+
+.full-modal {
+  .ant-modal {
+    max-width: 100%;
+    top: 3vh;
+    padding-bottom: 0;
+    margin: auto;
+  }
+  .ant-modal-content {
+    display: flex;
+    flex-direction: column;
+    height: calc(90vh);
+  }
+  .ant-modal-body {
+    flex: 1;
+  }
+}
 </style>

src/views/page/userEdit.vue → src/views/page/aside/rightMenuItem/userEdit.vue

@@ -1,28 +1,40 @@
 <template>
 <div class="user-edit">
+    <a-button type="primary" @click="handleAdd" preIcon="ant-design:plus-outlined"> 新增</a-button>
     <Table
-    class="ant-table-striped"
-    size="middle"
-    :columns="columns"
-    :data-source="data"
-    :rowClassName="(record:any, index:number) => (index % 2 === 1 ? 'table-striped' : undefined)"
-    :pagination="pagination"
-  >
-  <template #action="{ record }">
-                        <a href="#" @click="edit_(record)">编辑</a>
-                        <Popconfirm v-if="data.length" title="确定删除吗?" ok-text="确定" cancel-text="取消"
-                            @confirm="del_(record.id, record.key-1)">
-                            <Divider type="vertical" />
-                            <a href="#" >删除</a>
-                        </Popconfirm>
-                    </template>
-</Table>
+        class="ant-table-striped"
+        size="middle"
+        :columns="columns"
+        :data-source="data"
+        :rowClassName="(record:any, index:number) => (index % 2 === 1 ? 'table-striped' : undefined)"
+        :pagination="pagination"
+    >
+        <template #action="{ record }">
+            <a href="#" @click="edit_(record)">编辑</a>
+            <Popconfirm v-if="data.length" title="确定删除吗?" ok-text="确定" cancel-text="取消"
+                @confirm="del_(record.id, record.key-1)">
+                <Divider type="vertical" />
+                <a href="#" >删除</a>
+            </Popconfirm>
+        </template>
+    </Table>
 </div>
+
+    <!-- 弹出框 -->
+    <a-modal 
+        v-model:visible="visible" 
+        title="设置表单" 
+        width="40%"
+        @ok="handleOk"
+    >
+    <userEditModal @handleOk='handleOk'></userEditModal>
+    </a-modal>
 </template>
 
 <script setup lang='ts'>
-import {ref} from"vue";
+import { ref } from"vue";
 import * as cameraApi from '@/axios/cameraBase/cameraApi';
+import userEditModal from '@/views/page/aside/rightMenuItem/userEditModal.vue'
 import {
     Table,
     Popconfirm,
@@ -31,6 +43,8 @@ import {
 import Msg from "@/utils/message";
 const columns = [
   { title: '序号', dataIndex: 'key' },
+  { title: '相机名称', dataIndex: 'name' },
+  { title: '相机IP', dataIndex: 'ip' },
   { title: '登录名', dataIndex: 'userName' },
   { title: '密码', dataIndex: 'password' },
   { title: '用户类型', dataIndex: 'userType' }, 
@@ -157,6 +171,8 @@ function loadTreeData() {
             return item
         })
         pagination.value.total=list.length
+        console.log(list);
+        
         data.value=list
        }
     });
@@ -165,6 +181,17 @@ loadTreeData()
 function edit_(item:any){
     
 }
+//添加
+let visible = ref();
+function handleAdd(){
+    visible.value = true;
+}
+//模态框方法
+const handleOk = (e: MouseEvent) => {
+      console.log(e);
+      visible.value = false;
+    };
+
 function del_(key:any,index:number){
     cameraApi.Delete({id:key}).then((res:any)=>{
         let resData=res.data
@@ -185,7 +212,7 @@ function del_(key:any,index:number){
 <style scoped lang='less'>
 .user-edit{
     padding: 20px;
-    background-color: #001529;
+    // background-color: #001529;
     height: 100%;
 }
 .ant-table-striped :deep(.table-striped) td {

src/views/page/aside/rightMenuItem/userEditModal.vue

@@ -0,0 +1,86 @@
+<template>
+<a-form :model="formState" :label-col="labelCol" :wrapper-col="wrapperCol">
+    <a-form-item label="相机名称">
+      <a-input v-model:value="formState.name" />
+    </a-form-item>
+    <a-form-item label="相机IP">
+      <a-input v-model:value="formState.ip" />
+    </a-form-item>
+    <a-form-item label="相机参数 Id">
+      <a-input v-model:value="formState.CbCameraParamsId" />
+    </a-form-item>
+    <a-form-item label="登录名">
+      <a-input v-model:value="formState.userName" />
+    </a-form-item>
+    <a-form-item label="密码">
+      <a-input-password v-model:value="formState.password" />
+    </a-form-item>
+    <a-form-item label="用户类型">
+      <a-select v-model:value="formState.userType" placeholder="请选择用户类型">
+        <a-select-option value="shanghai">Zone one</a-select-option>
+        <a-select-option value="beijing">Zone two</a-select-option>
+      </a-select>
+    </a-form-item>
+    <a-form-item label="是否启用">
+      <a-switch v-model:checked="formState.state" />
+    </a-form-item>
+    <a-form-item label="备注">
+      <a-input v-model:value="formState.remark" type="textarea" />
+    </a-form-item>
+    <!-- <a-form-item :wrapper-col="{ span: 14, offset: 4 }">
+      <a-button type="primary" @click="onSubmit">Create</a-button>
+      <a-button style="margin-left: 10px">Cancel</a-button>
+    </a-form-item> -->
+  </a-form>
+
+
+
+</template>
+
+<script setup lang='ts'>
+import { reactive, toRaw, UnwrapRef } from 'vue';
+interface FormState {
+  name: string;
+  ip: string;
+  CbCameraParamsId: string;
+  userName: string;
+  password: string;
+  userType: string | undefined;
+  state: boolean;
+  remark: string;
+}
+const props = defineProps({
+    handleOk: Function
+});
+
+let labelCol= { span: 6 }
+let wrapperCol= { span: 14 }
+const formState: UnwrapRef<FormState> = reactive({
+      name: '',
+      ip: '',
+      CbCameraParamsId: '',
+      userName: '',
+      password: '',
+      userType: undefined,
+      state: false,
+      remark: '',
+    });
+    const onSubmit = () => {
+      console.log('submit!', toRaw(formState));
+    };
+
+//提交
+function submit(){
+
+
+}
+
+
+</script>
+
+<style lang="less" scoped>
+
+:deep(.ant-input ){
+    color: #000;
+}
+</style>

src/views/page/cameraCenter.vue

@@ -35,6 +35,7 @@
 
         <CameraLeftMenu></CameraLeftMenu>
         <CameraRightMenu></CameraRightMenu>
+        <!-- 云台控制 -->
         <VideoControlSimple></VideoControlSimple>
     </div>
 </template>