From f38308d5cf3ea17db4fc2078bbb3c8f27d8050ea Mon Sep 17 00:00:00 2001
From: DIAMOND <276397553@qq.com>
Date: Thu, 29 Dec 2022 16:40:24 +0800
Subject: [PATCH] =?UTF-8?q?=E7=94=A8=E6=88=B7=E8=AE=BE=E7=BD=AE=E3=80=81?=
 =?UTF-8?q?=E7=9B=B8=E6=9C=BA=E8=AE=BE=E7=BD=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

# Conflicts:
#	src/views/page/Aside/cameraRightMenu.vue
---
 components.d.ts                               |   3 +-
 src/axios/cameraBase/cameraApi.ts             |  19 ++
 src/axios/index.ts                            |   3 +-
 src/axios/system/sysDictDataApi.ts            |  40 ++++
 src/views/page/Aside/cameraRightMenu.vue      |  47 +++-
 .../page/aside/rightMenuItem/cameraEdit.vue   | 162 ++++++++++++++
 .../aside/rightMenuItem/cameraEditModal.vue   | 211 ++++++++++++++++++
 .../aside/rightMenuItem/userEditModal.vue     |  42 +++-
 8 files changed, 508 insertions(+), 19 deletions(-)
 create mode 100644 src/axios/system/sysDictDataApi.ts
 create mode 100644 src/views/page/aside/rightMenuItem/cameraEdit.vue
 create mode 100644 src/views/page/aside/rightMenuItem/cameraEditModal.vue

diff --git a/components.d.ts b/components.d.ts
index 4700c74..94eb12f 100644
--- a/components.d.ts
+++ b/components.d.ts
@@ -12,14 +12,13 @@ declare module '@vue/runtime-core' {
     AForm: typeof import('ant-design-vue/es')['Form']
     AFormItem: typeof import('ant-design-vue/es')['FormItem']
     AInput: typeof import('ant-design-vue/es')['Input']
+    AInputNumber: typeof import('ant-design-vue/es')['InputNumber']
     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']
     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']
diff --git a/src/axios/cameraBase/cameraApi.ts b/src/axios/cameraBase/cameraApi.ts
index 9db659c..0d94fd8 100644
--- a/src/axios/cameraBase/cameraApi.ts
+++ b/src/axios/cameraBase/cameraApi.ts
@@ -12,6 +12,16 @@ enum Api {
     GetTreeList = '/cbCameraNode/getTree'
 }
 
+//相机参数服务
+enum paramsApi{
+    GetList = '/cbCameraParams/getList',
+    Add = '/cbCameraParams/add',
+    Update = '/cbCameraParams/update',
+    Delete = '/cbCameraParams/delete',
+    Get = '/cbCameraParams/get',
+    GetPageList = '/cbCameraParams/getPageList',
+}
+
 const CisApiUrl = apiUrl.CisApiUrl;
 
 export const Add = (params?: any) => axios.post(CisApiUrl + Api.Add, qs.stringify(params))
@@ -27,3 +37,12 @@ export const GetList = (params?: any) => axios.get(CisApiUrl + Api.GetList, { pa
 export const GetPageList = (params?: any) => axios.get(CisApiUrl + Api.GetPageList, { params: params })
 
 export const GetTreeList = (params?: any) => axios.get(CisApiUrl + Api.GetTreeList, { params: params })
+
+//相机参数服务
+export const GetParamsList = (params?: any) => axios.get(CisApiUrl + paramsApi.GetList, { params: params })
+
+export const paramsDelete = (params?: any) => axios.post(CisApiUrl + paramsApi.Delete, qs.stringify(params))
+
+export const paramsAdd = (params?: any) => axios.post(CisApiUrl + paramsApi.Add, qs.stringify(params))
+
+export const paramsUpdate = (params?: any) => axios.post(CisApiUrl + paramsApi.Update, qs.stringify(params))
\ No newline at end of file
diff --git a/src/axios/index.ts b/src/axios/index.ts
index c1063ad..81a71d0 100644
--- a/src/axios/index.ts
+++ b/src/axios/index.ts
@@ -1,6 +1,7 @@
 export const apiUrl = {
     CisApiUrl: 'http://192.168.1.119:800/api',
     WebRtcUrl: 'http://192.168.1.119:8000',
-    OnvifApiUrl: 'http://192.168.1.119:800/api'
+    OnvifApiUrl: 'http://192.168.1.119:800/api',
+    SysApiUrl: 'http://192.168.1.119:800/api',
     // CisApiUrl: 'https://192.168.1.119:5001/api'
 }
diff --git a/src/axios/system/sysDictDataApi.ts b/src/axios/system/sysDictDataApi.ts
new file mode 100644
index 0000000..3941b30
--- /dev/null
+++ b/src/axios/system/sysDictDataApi.ts
@@ -0,0 +1,40 @@
+import { axios } from '@/utils/axios';
+import { apiUrl } from "@/axios";
+import qs from "qs";
+
+enum dataApi {
+    Add = '/sysDictData/add',
+    Update = '/sysDictData/update',
+    Delete = '/sysDictData/delete',
+    Get = '/sysDictData/get',
+    GetList = '/sysDictData/getList',
+    GetPageList = '/sysDictData/getPageList',
+    GetTreeList = '/sysDictData/getTree'
+}
+enum typeApi{
+
+    //获取实体类BO
+    getBOByCode = '/sysDictType/getBOByCode'
+}
+
+const SysApiUrl = apiUrl.SysApiUrl;
+
+//系统字典值服务
+export const Add = (params?: any) => axios.post(SysApiUrl + dataApi.Add, qs.stringify(params))
+
+export const Update = (params?: any) => axios.post(SysApiUrl + dataApi.Update, qs.stringify(params))
+
+export const Delete = (params?: any) => axios.post(SysApiUrl + dataApi.Delete, qs.stringify(params))
+
+export const Get = (params?: any) => axios.get(SysApiUrl + dataApi.Get, { params: params })
+
+export const GetList = (params?: any) => axios.get(SysApiUrl + dataApi.GetList, { params: params })
+
+export const GetPageList = (params?: any) => axios.get(SysApiUrl + dataApi.GetPageList, { params: params })
+
+export const GetTreeList = (params?: any) => axios.get(SysApiUrl + dataApi.GetTreeList, { params: params })
+
+//系统字典类型服务
+
+//获取实体类BO
+export const getBOByCode = (params?: any) => axios.get(SysApiUrl + typeApi.getBOByCode, { params: params })
\ No newline at end of file
diff --git a/src/views/page/Aside/cameraRightMenu.vue b/src/views/page/Aside/cameraRightMenu.vue
index 3d43d73..4c1ad4a 100644
--- a/src/views/page/Aside/cameraRightMenu.vue
+++ b/src/views/page/Aside/cameraRightMenu.vue
@@ -28,13 +28,32 @@
         <div class="buttomItem">
             <div class="buttomName">工具箱</div>
         </div>
-        <div class="buttomItem" @click="openUserEdit">
+        <!-- <div class="buttomItem" @click="openUserEdit">
             <div class="buttomName">设置</div>
-        </div>
+        </div> -->
+
+        <Popover placement="left" trigger="hover">
+            <template #content>
+                <ul>
+                    <p @click="openSetting('user')">用户设置</p>
+                    <p @click="openSetting('camera')">相机设置</p>
+                </ul>
+            </template>
+            <div class="buttomItem">
+                <div class="buttomName">设置</div>
+            </div>
+        </Popover>
     </div>
-    <a-modal v-model:visible="visible" title="用户设置" width="90%" wrapClassName="full-modal" :footer="null">
-        <userEdit></userEdit>
-    </a-modal>
+    <a-modal 
+            v-model:visible="visible" 
+            :title="type == 'user'? '用户设置': '相机设置'" 
+            width="90%"
+            wrapClassName="full-modal"
+            :footer="null"
+        >
+            <userEdit v-if="type == 'user'"></userEdit>
+            <CameraEdit  v-if="type == 'camera'"></CameraEdit>
+        </a-modal>
 
 </template>
 
@@ -44,10 +63,15 @@ import { ref, onMounted } from 'vue';
 import { Popover } from 'ant-design-vue';
 import { useStore } from '@/store/index';
 import * as markGroupApi from '@/axios/cameraMark/markGroupApi';
+import CameraEdit from './rightMenuItem/cameraEdit.vue';
+
+
 const visible = ref(false)
 const labelList :any=ref([])
-function openUserEdit() {
+const type = ref('')    //设置类型
+function openSetting(editType:string) {
     visible.value = !visible.value
+    type.value = editType
 }
 let piniaStore = useStore();
 function addLabelFn(str: string,id:number) {
@@ -123,15 +147,14 @@ onMounted(() => {
     z-index: 2;
     font-size: 0.8em;
 }
-
-ul {
+ul{
     padding: 0;
     margin: 0;
-
-    p:last-child {
-        margin: 0;
-    }
+    p:last-child{
+    margin: 0;
 }
+}
+
 </style>
 <style lang="less" >
 .full-modal {
diff --git a/src/views/page/aside/rightMenuItem/cameraEdit.vue b/src/views/page/aside/rightMenuItem/cameraEdit.vue
new file mode 100644
index 0000000..fb07a92
--- /dev/null
+++ b/src/views/page/aside/rightMenuItem/cameraEdit.vue
@@ -0,0 +1,162 @@
+<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>
+    </div>
+
+    <!-- 弹出框 -->
+    <a-modal v-model:visible="visible" title="设置表单" width="40%" @ok="handleOk" @cancel="handelCancel" destroyOnClose>
+        <cameraEditModal ref="childRef" :editData="editData"></cameraEditModal>
+    </a-modal>
+</template>
+
+<script setup lang='ts'>
+import { onMounted, ref, watch } from "vue";
+import * as cameraApi from '@/axios/cameraBase/cameraApi';
+import cameraEditModal from '@/views/page/aside/rightMenuItem/cameraEditModal.vue'
+import {
+    Table,
+    Popconfirm,
+    Divider,
+} from "ant-design-vue";
+import Msg from "@/utils/message";
+const columns = [
+    { title: '序号', dataIndex: 'key' },
+    { title: '相机名称', dataIndex: 'name' },
+    { title: '相机厂商', dataIndex: 'manufactor' },
+    { title: 'sdk端口', dataIndex: 'sdkPort' },
+    { title: '相机类型', dataIndex: 'type' },
+    { title: 'FocusX', dataIndex: 'focusX' },
+    { title: 'FocusY', dataIndex: 'focusY' },
+    { title: 'zoom变化函数', dataIndex: 'zoomVaryFunc' },
+    {
+        title: "操作",
+        dataIndex: "",
+        key: "x",
+        slots: {
+            customRender: "action",
+        },
+    },
+];
+let data = ref();
+const pagination = ref({
+    pageSize: 10,
+    total: 0,
+    size: "small",
+});
+function loadTreeData() {
+    cameraApi.GetParamsList().then((res: any) => {
+        let list: Array<any> = res.data.data;
+            
+        if (list.length != 0) {
+            list = list.map((item: any, index: number) => {
+                item.key = index + 1
+                return item
+            })
+            pagination.value.total = list.length
+            // console.log(list);
+
+            data.value = list
+        }
+    });
+}
+
+
+onMounted(() => {
+    loadTreeData()
+})
+
+
+
+//编辑
+let editData = ref()
+function edit_(item: any) {
+    // console.log(item);
+    editData.value = item
+    visible.value = true
+}
+//返回
+function handelCancel(){
+    editData.value = null;
+    visible.value = false
+}
+
+
+//添加
+let visible = ref();
+function handleAdd() {
+    visible.value = true;
+}
+//模态框方法
+const childRef = ref(null);
+const handleOk = async (e: MouseEvent) => {
+    //   console.log(e);
+    let result
+    if (editData.value == null) {
+        result = await childRef.value.add();
+    }
+    else {
+        result = await childRef.value.edit();
+    }
+    //   console.log("result",result);
+    if (result) { //成功关闭弹窗
+        visible.value = false;
+       
+    }
+    else {
+        visible.value = true;
+    }
+    //清空
+    editData.value = null
+};
+//删除
+function del_(key: any, index: number) {
+    cameraApi.paramsDelete({ id: key }).then((res: any) => {
+        let resData = res.data
+        if (resData) {
+            Msg.success("删除成功")
+            data.value.splice(index, 1)
+            data.value = data.value.map((item: any, i: number) => {
+                if (index < item.key) {
+                    item.key--
+                }
+                return item
+            })
+        }
+    })
+}
+
+
+//监听 重新获取
+watch(visible, (nv, ov) => {
+    loadTreeData()
+})
+
+</script>
+
+<style scoped lang='less'>
+.user-edit {
+    padding: 20px;
+    // background-color: #001529;
+    height: 100%;
+}
+
+.ant-table-striped :deep(.table-striped) td {
+    background-color: #fafafa;
+}
+
+:deep(.ant-table-cell) {
+    color: #000 !important;
+}
+</style>
\ No newline at end of file
diff --git a/src/views/page/aside/rightMenuItem/cameraEditModal.vue b/src/views/page/aside/rightMenuItem/cameraEditModal.vue
new file mode 100644
index 0000000..2eadad7
--- /dev/null
+++ b/src/views/page/aside/rightMenuItem/cameraEditModal.vue
@@ -0,0 +1,211 @@
+<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="相机厂商">
+      <!-- <a-input  v-model:value="formState.manufactor" /> -->
+      <a-select
+          v-model:value="formState.manufactor"
+          show-search
+          placeholder="请选中相机厂商"
+          style="width: 420px;"
+          :dropdownMenuStyle="{ color: '#000' }"
+          :getPopupContainer="(triggerNode: any) => triggerNode.parentNode" 
+          allowClear
+          :options="manufactorList"
+        >
+      </a-select>
+    </a-form-item>
+    <a-form-item label="sdk端口">
+      <!-- <a-input  v-model:value="formState.sdkPort" /> -->
+      <a-select
+          v-model:value="formState.sdkPort"
+          show-search
+          placeholder="请选中端口"
+          style="width: 420px;"
+          :dropdownMenuStyle="{ color: '#000' }"
+          :getPopupContainer="(triggerNode: any) => triggerNode.parentNode" 
+          allowClear
+          :options="sdkPortList"
+        >
+      </a-select>
+    </a-form-item>
+    <a-form-item label="相机类型">
+      <!-- <a-input v-model:value="formState.type" /> -->
+      <a-select
+          v-model:value="formState.type"
+          show-search
+          placeholder="请选中相机类型"
+          style="width: 420px;"
+          :dropdownMenuStyle="{ color: '#000' }"
+          :getPopupContainer="(triggerNode: any) => triggerNode.parentNode" 
+          allowClear
+          :options="typeList"
+        >
+      </a-select>
+
+    </a-form-item>
+    <a-form-item label="FocusX">
+      <a-input-number :step="0.1" v-model:value="formState.focusX" />
+    </a-form-item>
+    <a-form-item label="FocusY">
+      <a-input-number :step="0.1"  v-model:value="formState.focusY" />
+    </a-form-item>
+    <a-form-item label="zoom变化函数">
+      <a-input v-model:value="formState.zoomVaryFunc" />
+    </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 { onMounted, reactive, ref, toRaw, UnwrapRef, watch } from 'vue';
+import * as cameraApi from '@/axios/cameraBase/cameraApi';
+import * as sysDictDataApi from '@/axios/system/sysDictDataApi';
+import Msg from '@/utils/message';
+interface FormState {
+  id: string
+  name: string;
+  manufactor: number;
+  sdkPort: number;
+  type: number;
+  focusX: number;
+  focusY: number;
+  zoomVaryFunc: string;
+}
+const props = defineProps({
+  editData: Object
+});
+
+let labelCol = { span: 6 }
+let wrapperCol = { span: 14 }
+const formState: UnwrapRef<FormState> = reactive({
+  // id: '',
+  name: '',
+  manufactor: null,
+  sdkPort: null,
+  type: null,
+  focusX: null,
+  focusY: null,
+  zoomVaryFunc: '',
+});
+
+//新增
+function add() {
+  console.log('新增!', toRaw(formState));
+  return cameraApi.paramsAdd(toRaw(formState)).then(res => {
+    console.log(res);
+    if (res.data.code == 200) {
+      Msg.success('添加成功')
+      return true
+    }
+    else {
+      Msg.error('添加失败,' + res.data.message)
+      return false
+    }
+  }).catch((err: any) => {
+    Msg.error('添加失败,' + err)
+    return false
+  })
+}
+
+//编辑
+function edit() {
+  console.log('编辑!', toRaw(formState));
+  return cameraApi.paramsUpdate(toRaw(formState)).then(res => {
+    console.log(res);
+    if (res.data.data == true) {
+      Msg.success('编辑成功')
+      return true
+    }
+    else {
+      Msg.error('编辑失败,' + res.data.message)
+      return false
+    }
+  }).catch((err: any) => {
+    Msg.error('编辑失败,' + err)
+    return false
+  })
+}
+
+
+const manufactorList = ref([])//相机厂商
+const sdkPortList = ref([])//相机SDK端口
+const typeList = ref([])//相机类型
+function getSysDataList(){
+  //相机厂商
+  sysDictDataApi.getBOByCode({code:'camera_manufactor'}).then(res => {
+    console.log("相机厂商",res);
+    if (res.data.data.sysDictDataList.length != 0) {
+      manufactorList.value = res.data.data.sysDictDataList.map((item: any, i: number) => ({ label: item.name, value: item.value }))
+    }
+
+  })
+  //相机SDK端口
+  sysDictDataApi.getBOByCode({code:'camera_sdk_port'}).then(res => {
+    console.log("相机SDK端口",res);
+    if (res.data.data.sysDictDataList.length != 0) {
+      sdkPortList.value = res.data.data.sysDictDataList.map((item: any, i: number) => ({ label: item.name, value: item.value }))
+    }
+})
+  //相机类型
+  sysDictDataApi.getBOByCode({code:'camera_type'}).then(res => {
+    console.log("相机类型",res);
+    if (res.data.data.sysDictDataList.length != 0) {
+      typeList.value = res.data.data.sysDictDataList.map((item: any, i: number) => ({ label: item.name, value: item.value }))
+    }
+})
+
+
+
+}
+
+//暴露方法
+defineExpose({
+  add,
+  edit
+})
+
+//编辑/新增
+onMounted(() => {
+  console.log("收到了", props.editData);
+  if (props.editData != null || props.editData != undefined){
+    formState.id = props.editData.id;
+    formState.name = props.editData.name;
+    formState.manufactor = props.editData.manufactor;
+    formState.sdkPort = props.editData.sdkPort;
+    formState.type = props.editData.type;
+    formState.focusX = props.editData.focusX;
+    formState.focusY = props.editData.focusY;
+    formState.zoomVaryFunc = props.editData.zoomVaryFunc;
+  }
+
+  getSysDataList();
+})
+
+</script>
+
+<style lang="less" scoped>
+:deep(.ant-input) {
+  color: #000;
+}
+</style>
\ No newline at end of file
diff --git a/src/views/page/aside/rightMenuItem/userEditModal.vue b/src/views/page/aside/rightMenuItem/userEditModal.vue
index bbf0ce5..af3793e 100644
--- a/src/views/page/aside/rightMenuItem/userEditModal.vue
+++ b/src/views/page/aside/rightMenuItem/userEditModal.vue
@@ -7,7 +7,19 @@
       <a-input v-model:value="formState.ip" />
     </a-form-item>
     <a-form-item label="相机参数 Id">
-      <a-input v-model:value="formState.CbCameraParamsId" />
+      <!-- <a-input v-model:value="formState.CbCameraParamsId" /> -->
+      <a-select
+          v-model:value="formState.CbCameraParamsId"
+          show-search
+          placeholder="请选中一个相机"
+          style="width: 420px;"
+          :dropdownMenuStyle="{ color: '#000' }"
+          :getPopupContainer="(triggerNode: any) => triggerNode.parentNode" 
+          allowClear
+          :options="parmasList"
+          @change="handleChange"
+        >
+      </a-select>
     </a-form-item>
     <a-form-item label="登录名">
       <a-input v-model:value="formState.userName" />
@@ -38,7 +50,7 @@
 </template>
 
 <script setup lang='ts'>
-import { onMounted, reactive, toRaw, UnwrapRef, watch } from 'vue';
+import { onMounted, reactive, ref, toRaw, UnwrapRef, watch } from 'vue';
 import * as cameraApi from '@/axios/cameraBase/cameraApi';
 import Msg from '@/utils/message';
 interface FormState {
@@ -59,7 +71,7 @@ const props = defineProps({
 let labelCol = { span: 6 }
 let wrapperCol = { span: 14 }
 const formState: UnwrapRef<FormState> = reactive({
-  id: '',
+  // id: '',
   name: '',
   ip: '',
   CbCameraParamsId: '',
@@ -108,6 +120,24 @@ function edit() {
   })
 }
 
+function handleChange(){
+  // console.log("111",formState.CbCameraParamsId);
+  
+}
+
+//获取 CbCameraParamsId
+const parmasList = ref([])
+function getCbCameraParamsIdList(){
+  cameraApi.GetParamsList().then( res =>{
+    // console.log("CbCameraParamsId",res);
+    if (res.data.data.length != 0) {
+        parmasList.value = res.data.data.map((item: any, i: number) => ({ label: item.name, value: item.id }))
+        }
+        // console.log("parmasList",parmasList);
+  })
+
+}
+
 //暴露方法
 defineExpose({
   add,
@@ -116,7 +146,8 @@ defineExpose({
 
 //编辑/新增
 onMounted(() => {
-  console.log("收到了", props.editData);
+
+  // console.log("收到了", props.editData);
   if (props.editData != null || props.editData != undefined){
     formState.id = props.editData.id;
     formState.name = props.editData.name;
@@ -126,6 +157,9 @@ onMounted(() => {
     formState.password = props.editData.password;
   }
 
+  //获取 CbCameraParamsId
+  getCbCameraParamsIdList() 
+
 })
 
 </script>