8 changed files with 508 additions and 19 deletions
@ -1,6 +1,7 @@ |
|||||
export const apiUrl = { |
export const apiUrl = { |
||||
CisApiUrl: 'http://192.168.1.119:800/api', |
CisApiUrl: 'http://192.168.1.119:800/api', |
||||
WebRtcUrl: 'http://192.168.1.119:8000', |
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'
|
// CisApiUrl: 'https://192.168.1.119:5001/api'
|
||||
} |
} |
||||
|
|||||
@ -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 }) |
||||
@ -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> |
||||
@ -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> |
||||
Loading…
Reference in new issue