free-sun
/
FS-IOT
15
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

表格设备名称的条件搜索

release_0.0.2
wenlele 3 years ago
parent
fa9cabdef0
commit
53515f4a3d
6 changed files with 1637 additions and 1623 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 4
      code/VideoAccess-VCMP/web/client/src/sections/equipmentWarehouse/components/cascadeCamera.jsx
  2. 31
      code/VideoAccess-VCMP/web/client/src/sections/equipmentWarehouse/components/fluoriteCamera.jsx
  3. 10
      code/VideoAccess-VCMP/web/client/src/sections/equipmentWarehouse/components/nvrModal.jsx
  4. 40
      code/VideoAccess-VCMP/web/client/src/sections/equipmentWarehouse/components/sideSheet.jsx
  5. 46
      code/VideoAccess-VCMP/web/client/src/sections/equipmentWarehouse/containers/camera.jsx
  6. 31
      code/VideoAccess-VCMP/web/client/src/sections/equipmentWarehouse/containers/nvr.jsx

4
code/VideoAccess-VCMP/web/client/src/sections/equipmentWarehouse/components/cascadeCamera.jsx
View File

@ -99,8 +99,8 @@ function cascadeCamera({ dRef, dispatch, actions }) {
rules={[{ required: true, message: "请选择SIP编号" }]} rules={[{ required: true, message: "请选择SIP编号" }]}
> >
{sip.map((item, index) => ( {sip.map((item, index) => (
<Form.Select.Option key={index} value={item.streamid}> <Form.Select.Option key={index} value={item.sipip}>
{item.streamid} {item.sipip}
</Form.Select.Option> </Form.Select.Option>
))} ))}
</Form.Select> </Form.Select>

31
code/VideoAccess-VCMP/web/client/src/sections/equipmentWarehouse/components/fluoriteCamera.jsx
View File

@ -2,7 +2,7 @@ import React, { useState, useRef, useEffect, useImperativeHandle } from "react";
import { connect } from "react-redux"; import { connect } from "react-redux";
import { Form, Row, Col } from "@douyinfe/semi-ui"; import { Form, Row, Col } from "@douyinfe/semi-ui";
import "./cameraModal.less"; import "./cameraModal.less";
function fluoriteCamera({ cRef, CameraKind, CameraAbility, cameraData }) { function fluoriteCamera ({ cRef, CameraKind, CameraAbility, cameraData }) {
const { TextArea } = Form; const { TextArea } = Form;
const form = useRef(); const form = useRef();
const [cloud, setcloud] = useState(""); //云台支持 const [cloud, setcloud] = useState(""); //云台支持
@ -44,11 +44,11 @@ function fluoriteCamera({ cRef, CameraKind, CameraAbility, cameraData }) {
setvoice(cameraData.voice || ""); setvoice(cameraData.voice || "");
setSwitching(cameraData.highDefinition || ""); setSwitching(cameraData.highDefinition || "");
}, []); }, []);
function handleLocation() { function handleLocation () {
//高德经纬度 //高德经纬度
window.open("https://lbs.amap.com/tools/picker", "_blank"); window.open("https://lbs.amap.com/tools/picker", "_blank");
} }
function positionForm(val) { function positionForm (val) {
//安装位置校验 //安装位置校验
let zz = /^(-?\d+)(\.\d+)?$/; let zz = /^(-?\d+)(\.\d+)?$/;
if (!val) { if (!val) {
@ -70,7 +70,7 @@ function fluoriteCamera({ cRef, CameraKind, CameraAbility, cameraData }) {
resetFluoriteCamera: form.current.reset, resetFluoriteCamera: form.current.reset,
toempty: empty, toempty: empty,
})); }));
function empty() { function empty () {
setcloud(""); setcloud("");
setvoice(""); setvoice("");
setSwitching(""); setSwitching("");
@ -83,22 +83,21 @@ function fluoriteCamera({ cRef, CameraKind, CameraAbility, cameraData }) {
labelWidth="115px" labelWidth="115px"
onValueChange={(values) => console.log(values)} onValueChange={(values) => console.log(values)}
initValues={{ initValues={{
name: cameraData ? cameraData.name : "", name: cameraData.name || "",
highDefinition: cameraData ? cameraData.highDefinition : "", highDefinition: cameraData.highDefinition || "",
memoryCard: cameraData ? cameraData.memoryCard : "", memoryCard: cameraData.memoryCard || "",
position: cameraData.longitude position: cameraData.longitude
? `${cameraData.longitude},${cameraData.latitude}` ? `${cameraData.longitude},${cameraData.latitude}`
: "", : "",
kindId: cameraData ? cameraData.kindId : "", kindId: cameraData.kindId || "",
abilityId: cameraData abilityId: cameraData.cameraAbilities
? cameraData.cameraAbilities
? cameraData.cameraAbilities.map((item) => item.id) ? cameraData.cameraAbilities.map((item) => item.id)
: "" : ""
: "", ,
cloudControl: cameraData ? cameraData.cloudControl : "", cloudControl: cameraData.cloudControl || "",
voice: cameraData ? cameraData.voice : "", voice: cameraData.voice || "",
serialNo: cameraData ? cameraData.serialNo : "", serialNo: cameraData.serialNo || "",
rtmp: cameraData ? cameraData.rtmp : "", rtmp: cameraData.rtmp || "",
}} }}
getFormApi={(formApi) => (form.current = formApi)} getFormApi={(formApi) => (form.current = formApi)}
> >
@ -472,7 +471,7 @@ function fluoriteCamera({ cRef, CameraKind, CameraAbility, cameraData }) {
</> </>
); );
} }
function mapStateToProps(state) { function mapStateToProps (state) {
const { auth, global, members } = state; const { auth, global, members } = state;
return { return {
loading: members.isRequesting, loading: members.isRequesting,

10
code/VideoAccess-VCMP/web/client/src/sections/equipmentWarehouse/components/nvrModal.jsx
View File

@ -46,9 +46,7 @@ function nvrModal(props) {
form.current form.current
.validate() .validate()
.then((values) => { .then((values) => {
//表单校验成功 //表单校验
console.log(values);
let valuesObj = JSON.parse(JSON.stringify(values)); let valuesObj = JSON.parse(JSON.stringify(values));
valuesObj.longitude = values.position.split(",")[0]; valuesObj.longitude = values.position.split(",")[0];
valuesObj.latitude = values.position.split(",")[1]; valuesObj.latitude = values.position.split(",")[1];
@ -56,7 +54,7 @@ function nvrModal(props) {
if (nvrData.id) { if (nvrData.id) {
valuesObj.id = nvrData.id; valuesObj.id = nvrData.id;
} }
var x = new moment(); var front = new moment(); //验证前时间
setloading(true); setloading(true);
dispatch( dispatch(
actions.equipmentWarehouse.getCheck({ actions.equipmentWarehouse.getCheck({
@ -64,8 +62,8 @@ function nvrModal(props) {
}) })
).then((res) => { ).then((res) => {
console.log(res); console.log(res);
var y = new moment(); var after = new moment(); //验证后时间
var duration = moment.duration(y.diff(x))._data.milliseconds; var duration = moment.duration(after.diff(front))._data.milliseconds;
if (res.success) { if (res.success) {
setTimeout( setTimeout(
() => { () => {

40
code/VideoAccess-VCMP/web/client/src/sections/equipmentWarehouse/components/sideSheet.jsx
View File

@ -8,7 +8,7 @@ import PerfectScrollbar from "perfect-scrollbar";
let projectScrollbar; let projectScrollbar;
let equipmentScrollbar; let equipmentScrollbar;
function SideSheets(props) { function SideSheets (props) {
const { const {
dispatch, dispatch,
actions, actions,
@ -48,15 +48,15 @@ function SideSheets(props) {
{ {
name: "接入信息", name: "接入信息",
access: [ access: [
{ name: "SIP服务编号：", key: "1111111111" }, { name: "SIP服务编号：", key: "Serial" },
{ name: "SIP域：", key: "KGU876J87" }, { name: "SIP域：", key: "Realm" },
{ name: "SIP端口号：", key: "port" }, { name: "SIP端口号：", key: "ListenAddr" },
{ name: "通道数量：", key: "channelCount" }, { name: "通道数量：", key: "channelCount", difference: "difference" },
{ name: "心跳周期：", key: "3600s" }, { name: "心跳周期：", key: "Expires" },
{ name: "最大心跳次数：", key: "3次" }, { name: "最大心跳次数：", key: "RemoveBanInterval" },
{ name: "注册密码：", key: "**********" }, { name: "注册密码：", key: "Password" },
{ name: "注册有效期：:", key: "3600s" }, { name: "注册有效期：", key: "" },
{ name: "接入识别模块：", key: "sssss" }, { name: "接入识别模块：", key: "" },
], ],
}, },
{ {
@ -138,16 +138,18 @@ function SideSheets(props) {
) )
).then((res) => { ).then((res) => {
setNvrDetails(res.payload.data); setNvrDetails(res.payload.data);
console.log(res.payload.data);
projectScrollbar = new PerfectScrollbar("#project_information", { projectScrollbar = new PerfectScrollbar("#project_information", {
suppressScrollX: true, suppressScrollX: true,
}); });
equipmentScrollbar = new PerfectScrollbar("#equipment_information", { equipmentScrollbar = new PerfectScrollbar("#equipment_information", {
suppressScrollX: true, suppressScrollX: true,
}); });
console.log(nvrDetails);
}); });
}, []); }, []);
useEffect(() => { useEffect(() => {
const domProject = document.getElementById("project_information"); const domProject = document.getElementById("project_information");
if (domProject && projectScrollbar) { if (domProject && projectScrollbar) {
@ -388,8 +390,7 @@ function SideSheets(props) {
}} }}
> >
<img <img
src={`/assets/images/background/${ src={`/assets/images/background/${clickStyle == item.name
clickStyle == item.name
? "sewage_camera2" ? "sewage_camera2"
: "sewage_camera1" : "sewage_camera1"
}.png`} }.png`}
@ -398,8 +399,7 @@ function SideSheets(props) {
<div> <div>
{item.name} {item.name}
<img <img
src={`/assets/images/background/${ src={`/assets/images/background/${clickStyle == item.name
clickStyle == item.name
? "copy2" ? "copy2"
: "copy1" : "copy1"
}.png`} }.png`}
@ -440,7 +440,7 @@ function SideSheets(props) {
color: " #34383E", color: " #34383E",
}} }}
> >
{nvrDetails[item.key]} {item.difference == "difference" ? nvrDetails[item.key] : nvrDetails.accessInfo[item.key]}
</span> </span>
</div> </div>
); );
@ -476,8 +476,7 @@ function SideSheets(props) {
}} }}
> >
<img <img
src={`/assets/images/background/${ src={`/assets/images/background/${clickStyle == item.name
clickStyle == item.name
? "store2" ? "store2"
: "store1" : "store1"
}.png`} }.png`}
@ -486,8 +485,7 @@ function SideSheets(props) {
<div> <div>
{item.name} {item.name}
<img <img
src={`/assets/images/background/${ src={`/assets/images/background/${clickStyle == item.name
clickStyle == item.name
? "copy2" ? "copy2"
: "copy1" : "copy1"
}.png`} }.png`}
@ -559,7 +557,7 @@ function SideSheets(props) {
); );
} }
function mapStateToProps(state) { function mapStateToProps (state) {
const { auth, global, members } = state; const { auth, global, members } = state;
return { return {
loading: members.isRequesting, loading: members.isRequesting,

46
code/VideoAccess-VCMP/web/client/src/sections/equipmentWarehouse/containers/camera.jsx
View File

@ -35,6 +35,7 @@ const CameraHeader = (props) => {
const [search, setearch] = useState({}); //搜索条件 const [search, setearch] = useState({}); //搜索条件
const [rowId, setRowId] = useState(); //表格数据id const [rowId, setRowId] = useState(); //表格数据id
const [cameraData, setCameraData] = useState({}); //表格数据 const [cameraData, setCameraData] = useState({}); //表格数据
const [deviceClick, setDeviceClick] = useState(false); //设备名称点击的不同效果
const { equipmentWarehouse } = actions; const { equipmentWarehouse } = actions;
const api = useRef(); const api = useRef();
@ -63,31 +64,28 @@ const CameraHeader = (props) => {
dispatch(equipmentWarehouse.getCamera({ ...query, ...search })); dispatch(equipmentWarehouse.getCamera({ ...query, ...search }));
} }
const equipmentStatus = { ON: "在线", ONLINE: "在线", OFF: "离线", Alarmed: "未知状态" } const equipmentStatus = { ON: "在线", ONLINE: "在线", OFF: "离线", Alarmed: "未知状态" }
const columns = [ const columns = [
{ {
title: "序号", title: "序号",
render: (text, record, index) => { dataIndex: "",
render: (text, r, index) => {
return index + 1; return index + 1;
}, },
}, },
{ {
title: "设备名称", title: "设备名称",
dataIndex: "name", dataIndex: "name",
render: (text, record, index) => { render: (_, row) => {
return ( return (
<div> <div>
<span {row.name}
style={{ <sapn style={{ color: "blue" }}
backgroundColor: record.avatarBg, onClick={() =>device_(row)}
width: "10px", >
height: "10px", {row.type == "nvr" ? `@${row.nvr.name}` : row.type == "cascade" ? `@${row.externalDomain}` : ""}
borderRadius: "50%", </sapn>
display: "inline-block", </div >
marginRight: "10px",
}}
/>
{record.name}
</div>
); );
}, },
}, },
@ -191,6 +189,26 @@ const CameraHeader = (props) => {
}, },
]; ];
const device_ = (r) => {
console.log(deviceClick)
if (deviceClick) {
// if (r.type == "nvr") {
// console.log(search)
// setearch({ ...search, nvrId: r.nvr.id })
// } else {
// setearch({ ...search, externalDomain: r.externalDomain })
// }
setDeviceClick(false)
} else {
// if (r.type == "nvr") {
// setearch({ ...search, nvrId: null })
// } else {
// setearch({ ...search, externalDomain: null })
// }
setDeviceClick(true)
}
}
//获取表格属性设置 //获取表格属性设置
function attribute (data) { function attribute (data) {
const arr = localStorage.getItem(CAMERAS) const arr = localStorage.getItem(CAMERAS)

31
code/VideoAccess-VCMP/web/client/src/sections/equipmentWarehouse/containers/nvr.jsx
View File

@ -23,16 +23,15 @@ import { skeletonScreen } from "../components/skeletonScreen";
import { ReminderBox } from "../../../components/index"; import { ReminderBox } from "../../../components/index";
export const accessType = [ export const accessType = [
{ name: "萤石云平台摄像头", key: "yingshi" }, { name: "萤石云", key: "yingshi" },
{ name: "NVR摄像头", key: "nvr" }, { name: "NVR", key: "nvr" },
{ name: "IPC 网络摄像头", key: "ipc" }, { name: "IPC", key: "ipc" },
{ name: "不明厂家", key: "cascade" }, { name: "级联", key: "cascade" },
]; ];
const NvrHeader = (props) => { const NvrHeader = (props) => {
const { dispatch, actions, user, loading, equipmentWarehouseNvr } = props; const { dispatch, actions, user, loading, equipmentWarehouseNvr } = props;
const { equipmentWarehouse } = actions; const { equipmentWarehouse } = actions;
// const [loading, setLoading] = useState(false);
const [setup, setSetup] = useState(false); const [setup, setSetup] = useState(false);
const [sideSheet, setSideSheet] = useState(false); const [sideSheet, setSideSheet] = useState(false);
const [setupp, setSetupp] = useState([]); const [setupp, setSetupp] = useState([]);
@ -40,13 +39,12 @@ const NvrHeader = (props) => {
const [query, setQuery] = useState({ limit: 10, page: 0 }); //页码信息 const [query, setQuery] = useState({ limit: 10, page: 0 }); //页码信息
const [search, setearch] = useState({}); //搜索条件 const [search, setearch] = useState({}); //搜索条件
const [rowId, setRowId] = useState(); //表格数据id const [rowId, setRowId] = useState(); //表格数据id
const [load, setLoad] = useState(); //骨架屏是否显现
const [reminder, setReminder] = useState(true); //提醒弹框 const [reminder, setReminder] = useState(true); //提醒弹框
const api = useRef(); const api = useRef();
const SETUPS = "setups"; const SETUPS = "setups";
useEffect(() => { useEffect(() => {
setLoad(loading);
dispatch(actions.equipmentWarehouse.getVender()).then((res) => { dispatch(actions.equipmentWarehouse.getVender()).then((res) => {
setvenderList(res.payload.data); setvenderList(res.payload.data);
attribute(res.payload.data); attribute(res.payload.data);
@ -60,11 +58,12 @@ const NvrHeader = (props) => {
: ""; : "";
// ; // ;
}, []); }, []);
useEffect(() => { useEffect(() => {
equipmentGetNvr(); equipmentGetNvr();
}, [query, search]); }, [query, search]);
function equipmentGetNvr() { function equipmentGetNvr () {
dispatch(equipmentWarehouse.getNvr({ ...query, ...search })); dispatch(equipmentWarehouse.getNvr({ ...query, ...search }));
} }
@ -91,7 +90,7 @@ const NvrHeader = (props) => {
title: "设备名称", title: "设备名称",
dataIndex: "name", dataIndex: "name",
render: (text, r, index) => { render: (text, r, index) => {
return r.name; return r.name
}, },
}, },
{ {
@ -148,7 +147,7 @@ const NvrHeader = (props) => {
]; ];
//获取表格属性设置 //获取表格属性设置
function attribute(data) { function attribute (data) {
const arr = localStorage.getItem(SETUPS) const arr = localStorage.getItem(SETUPS)
? JSON.parse(localStorage.getItem(SETUPS)) ? JSON.parse(localStorage.getItem(SETUPS))
: []; : [];
@ -219,6 +218,7 @@ const NvrHeader = (props) => {
dataIndex: "", dataIndex: "",
key: "name", key: "name",
render: (_, r, index) => { render: (_, r, index) => {
console.log(r)
return r.station.length == 0 return r.station.length == 0
? "" ? ""
: r.station.map((item, index) => { : r.station.map((item, index) => {
@ -271,7 +271,7 @@ const NvrHeader = (props) => {
} }
//表格请求数据中station属性数据的展示 //表格请求数据中station属性数据的展示
function station(first, whole, name) { function station (first, whole, name) {
return ( return (
<Popover <Popover
key="updateTime" key="updateTime"
@ -426,13 +426,14 @@ const NvrHeader = (props) => {
<Form.Select <Form.Select
label="状态查询：" label="状态查询："
labelPosition="left" labelPosition="left"
field="type2" field="state"
style={screen} style={screen}
placeholder="全部" placeholder="全部"
showClear showClear
> >
<Form.Select.Option value="yes">在线</Form.Select.Option> <Form.Select.Option value="ON">在线</Form.Select.Option>
<Form.Select.Option value="no">离线</Form.Select.Option> <Form.Select.Option value="OFF">离线</Form.Select.Option>
<Form.Select.Option value="UNKONW">未知</Form.Select.Option>
</Form.Select> </Form.Select>
{/* <Form.Select {/* <Form.Select
label="关联项目：" label="关联项目："
@ -635,7 +636,7 @@ const NvrHeader = (props) => {
); );
}; };
function mapStateToProps(state) { function mapStateToProps (state) {
const { auth, global, members, equipmentWarehouseNvr } = state; const { auth, global, members, equipmentWarehouseNvr } = state;
return { return {
loading: equipmentWarehouseNvr.isRequesting && !equipmentWarehouseNvr.data, loading: equipmentWarehouseNvr.isRequesting && !equipmentWarehouseNvr.data,

Write Preview
Loading…
Cancel
Save