5 changed files with 199 additions and 14 deletions
@ -0,0 +1,147 @@ |
|||
<!-- |
|||
*@描述: 相机节点设置model框 |
|||
*@作者： |
|||
*@日期： |
|||
*@版本：1.0 |
|||
*/ |
|||
--> |
|||
<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-select v-model:value="formState.parentId" placeholder="请选中一个高位相机" style="width: 420px;" |
|||
:dropdownMenuStyle="{ color: '#000' }" :getPopupContainer="(triggerNode: any) => triggerNode.parentNode" |
|||
allowClear :options="nodeList" @change="nodeChange"> |
|||
</a-select> |
|||
</a-form-item> |
|||
<a-form-item label="相机参数"> |
|||
<!-- <a-input v-model:value="formState.CbCameraParamsId" /> --> |
|||
<a-select placeholder="请选中一个相机" v-model:value="formState.cbCameraId" style="width: 420px;" |
|||
:dropdownMenuStyle="{ color: '#000' }" :getPopupContainer="(triggerNode: any) => triggerNode.parentNode" |
|||
allowClear :options="parmasList" @change="cameraChange"> |
|||
</a-select> |
|||
</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 Msg from '@/utils/message'; |
|||
interface FormState { |
|||
id?: number |
|||
name: string; |
|||
isGroup: boolean; |
|||
cbCameraId: number | null |
|||
parentId: number | null |
|||
isDelete: boolean |
|||
} |
|||
const props = defineProps({ |
|||
editData: Object |
|||
}); |
|||
let labelCol = { span: 6 } |
|||
let wrapperCol = { span: 14 } |
|||
const formState: UnwrapRef<FormState> = reactive({ |
|||
id: 0, |
|||
name: '', |
|||
isGroup: true, |
|||
cbCameraId: null, |
|||
parentId: null, |
|||
isDelete: false |
|||
}); |
|||
|
|||
//新增 |
|||
function add() { |
|||
formState.id = Number(String(new Date().getTime()) + parseInt(Math.random() * 10000 + "")) |
|||
console.log(toRaw(formState)); |
|||
return cameraApi.AddNode(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 cameraChange(value: any) { |
|||
formState.cbCameraId = value |
|||
} |
|||
function nodeChange(value: any) { |
|||
formState.parentId = value |
|||
} |
|||
|
|||
//获取 CbCameraParamsId |
|||
const parmasList = ref([]) |
|||
const nodeList = ref([]) |
|||
function getCbCameraList() { |
|||
cameraApi.GetList().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 })) |
|||
} |
|||
}) |
|||
cameraApi.GetNodeList().then(res => { |
|||
// console.log("CbCameraParamsId",res); |
|||
if (res.data.data.length != 0) { |
|||
nodeList.value = res.data.data.map((item: any, i: number) => ({ label: item.name, value: item.id })) |
|||
} |
|||
}) |
|||
|
|||
} |
|||
|
|||
//暴露方法 |
|||
defineExpose({ |
|||
add, |
|||
}) |
|||
|
|||
//编辑/新增 |
|||
onMounted(() => { |
|||
|
|||
console.log("收到了", props.editData); |
|||
if (props.editData) { |
|||
formState.parentId = props.editData.id |
|||
} |
|||
//获取 CbCameraParamsId |
|||
getCbCameraList() |
|||
|
|||
}) |
|||
|
|||
</script> |
|||
|
|||
<style lang="less" scoped> |
|||
:deep(.ant-input), |
|||
:deep(.ant-select-item-option-content), |
|||
:deep(.ant-select-selection-item) { |
|||
color: #000; |
|||
} |
|||
</style> |
|||
Loading…
Reference in new issue