8 changed files with 508 additions and 19 deletions
@ -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'
|
|||
} |
|||
|
|||
@ -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