From 96e04ea0db04cf9a0beb8aab8d6c3afb3bdbae82 Mon Sep 17 00:00:00 2001 From: wenlele Date: Tue, 28 Jun 2022 17:34:35 +0800 Subject: [PATCH] =?UTF-8?q?=E6=B5=8B=E8=AF=95=E7=BD=AE=E7=81=B0=E5=AE=8C?= =?UTF-8?q?=E6=88=90?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/layout/components/sider/index.jsx | 39 +- .../components/cameraModal.jsx | 17 +- .../components/cascadeCamera.jsx | 25 +- .../components/fluoriteCamera.jsx | 17 +- .../components/ipcCamera.jsx | 806 +++++++++--------- .../components/sideSheet.jsx | 2 + .../equipmentWarehouse/containers/camera.jsx | 6 +- .../equipmentWarehouse/containers/nvr.jsx | 2 +- 8 files changed, 502 insertions(+), 412 deletions(-) diff --git a/code/VideoAccess-VCMP/web/client/src/layout/components/sider/index.jsx b/code/VideoAccess-VCMP/web/client/src/layout/components/sider/index.jsx index 0607a3a..f2412d5 100644 --- a/code/VideoAccess-VCMP/web/client/src/layout/components/sider/index.jsx +++ b/code/VideoAccess-VCMP/web/client/src/layout/components/sider/index.jsx @@ -45,6 +45,7 @@ const Sider = props => { } } } + console.log(nextItems) setItems(nextItems) const { selectedKeys, openKeys } = initKeys( @@ -74,16 +75,52 @@ const Sider = props => { } }, []) + useEffect(()=>{ + console.log(1) + let pathname_ = pathname == '/' ? homePath : pathname + const initKeys = (items, lastKeys) => { + for (let it of items) { + if (it.to && it.to == pathname_) { + lastKeys.selectedKeys.push(it.itemKey) + return lastKeys + } else if (it.items && it.items.length) { + const preLastKeys = JSON.parse(JSON.stringify(lastKeys)) + preLastKeys.openKeys.push(it.itemKey) + const nextKeys = initKeys(it.items, JSON.parse(JSON.stringify(preLastKeys))) + if (nextKeys.selectedKeys.length > preLastKeys.selectedKeys.length || nextKeys.openKeys.length > preLastKeys.openKeys.length) { + return nextKeys + } + } + } + return lastKeys + return { + selectedKeys: [], + openKeys: [] + } + } + const lastSelectedKeys = localStorage.getItem('vcmp_selected_sider') + console.log(lastSelectedKeys) + if (lastSelectedKeys) { + setSelectedKeys(JSON.parse(lastSelectedKeys)) + } + const lastOpenKeys = localStorage.getItem('vcmp_open_sider') + if (lastOpenKeys) { + setOpenKeys(JSON.parse(lastOpenKeys)) + } + },[window.localStorage.vcmp_open_sider,window.localStorage.vcmp_selected_sider]) + useEffect(() => { if (scrollbar) { scrollbar.update(); } }) - +console.log(selectedKeys,openKeys) return (
diff --git a/code/VideoAccess-VCMP/web/client/src/sections/equipmentWarehouse/components/cascadeCamera.jsx b/code/VideoAccess-VCMP/web/client/src/sections/equipmentWarehouse/components/cascadeCamera.jsx index a99953e..4a922d5 100644 --- a/code/VideoAccess-VCMP/web/client/src/sections/equipmentWarehouse/components/cascadeCamera.jsx +++ b/code/VideoAccess-VCMP/web/client/src/sections/equipmentWarehouse/components/cascadeCamera.jsx @@ -6,7 +6,7 @@ import "./cameraModal.less"; import PerfectScrollbar from "perfect-scrollbar"; let equipmentScrollbar; -function cascadeCamera ({ dRef, dispatch, actions, cameraData, parentCamera, testComplete, close }) { +function cascadeCamera ({ dRef, dispatch, actions, cameraData, parentCamera, testComplete, close, ashTrue, ashFalse }) { const form = useRef(); const { equipmentWarehouse } = actions; const [sip, setSip] = useState([]); @@ -14,11 +14,11 @@ function cascadeCamera ({ dRef, dispatch, actions, cameraData, parentCamera, tes const [CheckList, setCheckList] = useState([]); //nvr视频流多选 const [isAllChoose, setIsAllChoose] = useState(false); //全选 const [formData, setFormData] = useState() //表单数据 - + console.log(cameraData.externalDomain) useEffect(() => { dispatch(equipmentWarehouse.getCascadeSIP()).then((res) => { setSip(res.payload.data); - if (cameraData) { + if (cameraData.id) { let sip = res.payload.data.find((item) => item.streamid == cameraData.topSerialNo) dispatch(equipmentWarehouse.getCascadeStream({ sip: sip.sipip })).then((res) => { let oneData = res.payload.data[0]; @@ -155,7 +155,7 @@ function cascadeCamera ({ dRef, dispatch, actions, cameraData, parentCamera, tes e.stopPropagation(); } function onDisabled (id) { - if (id == cameraData.gbId||!cameraData.gbId) { + if (id == cameraData.gbId || !cameraData.gbId) { return false; } else { return true; @@ -177,15 +177,27 @@ function cascadeCamera ({ dRef, dispatch, actions, cameraData, parentCamera, tes return ( <>
{ - console.log(values); + console.log(values) setFormData(values) + let setting = ["externalDomain", "cascadeType", "sip"] + let b = {} + setting.map((item) => { + if (values.hasOwnProperty(item)) { + return b.true = values.hasOwnProperty(item) + } else { + return b.false = values.hasOwnProperty(item) + } + }) + Object.keys(b).length == 1 ? ashTrue() : ashFalse() }} + initValues={{ + externalDomain: cameraData.externalDomain || "" + }} getFormApi={(formApi) => (form.current = formApi)} > @@ -194,7 +206,6 @@ function cascadeCamera ({ dRef, dispatch, actions, cameraData, parentCamera, tes field="externalDomain" label="外域名称:" maxLength="36" - initValue={cameraData.externalDomain || ""} placeholder="请输入外域 名称，例如“xxx市级平台”" style={{ width: 307 }} rules={[{ required: true, message: "请输入外域名称" }]} diff --git a/code/VideoAccess-VCMP/web/client/src/sections/equipmentWarehouse/components/fluoriteCamera.jsx b/code/VideoAccess-VCMP/web/client/src/sections/equipmentWarehouse/components/fluoriteCamera.jsx index 497b073..8a621ab 100644 --- a/code/VideoAccess-VCMP/web/client/src/sections/equipmentWarehouse/components/fluoriteCamera.jsx +++ b/code/VideoAccess-VCMP/web/client/src/sections/equipmentWarehouse/components/fluoriteCamera.jsx @@ -1,8 +1,8 @@ import React, { useState, useRef, useEffect, useImperativeHandle } from "react"; import { connect } from "react-redux"; -import { Form, Row, Col,Spin } from "@douyinfe/semi-ui"; +import { Form, Row, Col, Spin } from "@douyinfe/semi-ui"; import "./cameraModal.less"; -function fluoriteCamera ({ cRef, CameraKind, CameraAbility, cameraData }) { +function fluoriteCamera ({ cRef, CameraKind, CameraAbility, cameraData, ashTrue, ashFalse }) { const { TextArea } = Form; const form = useRef(); const [cloud, setcloud] = useState(""); //云台支持 @@ -81,7 +81,18 @@ function fluoriteCamera ({ cRef, CameraKind, CameraAbility, cameraData }) { labelPosition="left" labelAlign="left" labelWidth="115px" - onValueChange={(values) => console.log(values)} + onValueChange={(values) => { + let setting = ["abilityId", "cloudControl", "highDefinition", "kindId", "name", "position", "rtmp", "serialNo",] + let b = {} + setting.map((item) => { + if (values.hasOwnProperty(item)) { + return b.true = values.hasOwnProperty(item) + } else { + return b.false = values.hasOwnProperty(item) + } + }) + Object.keys(b).length == 1 ? ashTrue() : ashFalse() + }} initValues={{ name: cameraData.name || "", highDefinition: cameraData.highDefinition || "", diff --git a/code/VideoAccess-VCMP/web/client/src/sections/equipmentWarehouse/components/ipcCamera.jsx b/code/VideoAccess-VCMP/web/client/src/sections/equipmentWarehouse/components/ipcCamera.jsx index bce9ebd..39d5e18 100644 --- a/code/VideoAccess-VCMP/web/client/src/sections/equipmentWarehouse/components/ipcCamera.jsx +++ b/code/VideoAccess-VCMP/web/client/src/sections/equipmentWarehouse/components/ipcCamera.jsx @@ -2,411 +2,427 @@ import React, { useState, useRef, useEffect, useImperativeHandle } from "react"; import { connect } from "react-redux"; import { Form, Row, Col } from "@douyinfe/semi-ui"; import "./cameraModal.less"; -function ipcCamera({ - aRef, - CameraKind, - CameraAbility, - venderList, - cameraData, +function ipcCamera ({ + aRef, + CameraKind, + CameraAbility, + venderList, + cameraData, + ashTrue, + ashFalse }) { - const { TextArea } = Form; - const form = useRef(); - const [cloud, setcloud] = useState(""); //云台支持 - const [voice, setvoice] = useState(""); //语音支持 - const [memoryList, setMemoryList] = useState([ - { - id: 1, - value: "8g", - }, - { - id: 2, - value: "16g", - }, - { - id: 3, - value: "32g", - }, - { - id: 4, - value: "64g", - }, - { - id: 5, - value: "128g", - }, - { - id: 6, - value: "256g", - }, - { - id: 7, - value: ">256g", - }, - ]); //内存卡列表 + const { TextArea } = Form; + const form = useRef(); + const [cloud, setcloud] = useState(""); //云台支持 + const [voice, setvoice] = useState(""); //语音支持 + const [memoryList, setMemoryList] = useState([ + { + id: 1, + value: "8g", + }, + { + id: 2, + value: "16g", + }, + { + id: 3, + value: "32g", + }, + { + id: 4, + value: "64g", + }, + { + id: 5, + value: "128g", + }, + { + id: 6, + value: "256g", + }, + { + id: 7, + value: ">256g", + }, + ]); //内存卡列表 - useEffect(() => { - setcloud(cameraData.cloudControl || ""); - setvoice(cameraData.voice || ""); - }, []); - function handleLocation() { - //高德经纬度 - window.open("https://lbs.amap.com/tools/picker", "_blank"); - } - function positionForm(val) { - //安装位置校验 - let zz = /^(-?\d+)(\.\d+)?$/; - if (!val) { - return "请输入或拾取高德经纬度坐标"; - } else if (val.split(",").length != 2) { - return "请输入格式为116.354169,39.835452的经纬度坐标"; - } else if (!zz.test(val.split(",")[0])) { - return "只能填写数字"; - } else if (!zz.test(val.split(",")[1])) { - return "只能填写数字"; - } else { - return ""; + useEffect(() => { + setcloud(cameraData.cloudControl || ""); + setvoice(cameraData.voice || ""); + }, []); + function handleLocation () { + //高德经纬度 + window.open("https://lbs.amap.com/tools/picker", "_blank"); } - } - useImperativeHandle(aRef, () => ({ - //传给父组件方法 - //子组件暴露给父组件的方法 - ipcCameraForm: form.current.validate, - resetIpcCamera: form.current.reset, - toempty: empty, - })); - function empty() { - setcloud(null); - setvoice(null); - } - return ( - <> - console.log(values)} - initValues={{ - name: cameraData ? cameraData.name : "", - venderId: cameraData ? cameraData.venderId : "", - memoryCard: cameraData ? cameraData.memoryCard : "", - position: cameraData.longitude - ? `${cameraData.longitude},${cameraData.latitude}` - : "", - kindId: cameraData ? cameraData.kindId : "", - abilityId: cameraData - ? cameraData.cameraAbilities - ? cameraData.cameraAbilities.map((item) => item.id) - : "" - : "", - cloudControl: cameraData ? cameraData.cloudControl : "", - voice: cameraData ? cameraData.voice : "", - serialNo: cameraData ? cameraData.serialNo : "", - rtmp: cameraData ? cameraData.rtmp : "", - }} - getFormApi={(formApi) => (form.current = formApi)} - > - - - - - {venderList.map((item, index) => ( - - {item.name} - - ))} - - - {memoryList.map((item, index) => ( - - {item.value} - - ))} - -
- -
- -
-
- - - {CameraKind.map((item, index) => ( - - {item.kind} - - ))} - + function positionForm (val) { + //安装位置校验 + let zz = /^(-?\d+)(\.\d+)?$/; + if (!val) { + return "请输入或拾取高德经纬度坐标"; + } else if (val.split(",").length != 2) { + return "请输入格式为116.354169,39.835452的经纬度坐标"; + } else if (!zz.test(val.split(",")[0])) { + return "只能填写数字"; + } else if (!zz.test(val.split(",")[1])) { + return "只能填写数字"; + } else { + return ""; + } + } + useImperativeHandle(aRef, () => ({ + //传给父组件方法 + //子组件暴露给父组件的方法 + ipcCameraForm: form.current.validate, + resetIpcCamera: form.current.reset, + toempty: empty, + })); + function empty () { + setcloud(null); + setvoice(null); + } + return ( + <> + { + let setting = ["abilityId", "cloudControl", "highDefinition", "kindId", "name", "position", "rtmp", "serialNo"] + let b = {} + setting.map((item) => { + if (values.hasOwnProperty(item)) { + return b.true = values.hasOwnProperty(item) + } else { + return b.false = values.hasOwnProperty(item) + } + }) + Object.keys(b).length == 1 ? ashTrue() : ashFalse() - - {CameraAbility.map((item, index) => ( - - {item.ability} - - ))} - - - - { - console.log(checked.target.value); - if (checked.target.value == true) { - setcloud(true); - } else { - setcloud(false); - } - }} - > - -
- 支持 -
- {cloud == true ? ( -
- 1 -
- ) : ( - "" - )} - - item.id) + : "" + : "", + cloudControl: cameraData ? cameraData.cloudControl : "", + voice: cameraData ? cameraData.voice : "", + serialNo: cameraData ? cameraData.serialNo : "", + rtmp: cameraData ? cameraData.rtmp : "", }} - > -
- 不支持 -
- {cloud == false && cloud !== "" ? ( -
- 1 -
- ) : ( - "" - )} - - - { - if (checked.target.value == true) { - setvoice(true); - } else { - setvoice(false); - } - }} + getFormApi={(formApi) => (form.current = formApi)} > - -
- 支持 -
- {voice == true ? ( -
- 1 -
- ) : ( - "" - )} - - -
- 不支持 -
- {voice == false && voice !== "" ? ( -
- 1 -
- ) : ( - "" - )} - - -
- -
-