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

Merge branch 'dev_trial' of https://gitea.free-sun.vip/free-sun/FS-IOT into dev_trial

release_0.0.2
巴林闲侠 3 years ago
parent
b0d21b367c 885c69d4d6
commit
13a97ea076
5 changed files with 136 additions and 125 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. 2
      code/VideoAccess-VCMP/web/client/src/index.less
  2. 23
      code/VideoAccess-VCMP/web/client/src/layout/components/sider/index.jsx
  3. 226
      code/VideoAccess-VCMP/web/client/src/sections/equipmentWarehouse/components/sideSheet.jsx
  4. 2
      code/VideoAccess-VCMP/web/package.json
  5. 8
      code/VideoAccess-VCMP/web/webpack.config.js

2
code/VideoAccess-VCMP/web/client/src/index.less
View File

@ -1,5 +1,5 @@
// webpack （vite 用 alias 兼容了） // webpack （vite 用 alias 兼容了）
@import '~@douyinfe/semi-ui/dist/css/semi.min.css'; // @import '~@douyinfe/semi-ui/dist/css/semi.min.css';
@import '~perfect-scrollbar/css/perfect-scrollbar.css'; @import '~perfect-scrollbar/css/perfect-scrollbar.css';
@import '~nprogress/nprogress.css'; @import '~nprogress/nprogress.css';

23
code/VideoAccess-VCMP/web/client/src/layout/components/sider/index.jsx
View File

@ -3,6 +3,7 @@ import PerfectScrollbar from 'perfect-scrollbar';
import { connect } from 'react-redux'; import { connect } from 'react-redux';
import { Nav } from '@douyinfe/semi-ui'; import { Nav } from '@douyinfe/semi-ui';
import { push } from 'react-router-redux'; import { push } from 'react-router-redux';
import { useLocation } from 'react-router';
let scrollbar = null let scrollbar = null
const homePath = '/equipmentWarehouse/nvr' const homePath = '/equipmentWarehouse/nvr'
@ -45,7 +46,6 @@ const Sider = props => {
} }
} }
} }
console.log(nextItems)
setItems(nextItems) setItems(nextItems)
const { selectedKeys, openKeys } = initKeys( const { selectedKeys, openKeys } = initKeys(
@ -74,9 +74,9 @@ const Sider = props => {
dispatch(push(homePath)) dispatch(push(homePath))
} }
}, []) }, [])
let routeSelectedKey = [useLocation().pathname.split('/')[1]]//没有子目录的
let routeSelectedKeys = [useLocation().pathname.split('/')[2]]//有子目录的
useEffect(()=>{ useEffect(()=>{
console.log(1)
let pathname_ = pathname == '/' ? homePath : pathname let pathname_ = pathname == '/' ? homePath : pathname
const initKeys = (items, lastKeys) => { const initKeys = (items, lastKeys) => {
for (let it of items) { for (let it of items) {
@ -93,16 +93,14 @@ const Sider = props => {
} }
} }
return lastKeys return lastKeys
return {
selectedKeys: [],
openKeys: []
}
} }
const lastSelectedKeys = localStorage.getItem('vcmp_selected_sider')
console.log(lastSelectedKeys) if(routeSelectedKeys[0]){
if (lastSelectedKeys) { setSelectedKeys(routeSelectedKeys)
setSelectedKeys(JSON.parse(lastSelectedKeys)) }
} else{
setSelectedKeys(routeSelectedKey)
}
const lastOpenKeys = localStorage.getItem('vcmp_open_sider') const lastOpenKeys = localStorage.getItem('vcmp_open_sider')
if (lastOpenKeys) { if (lastOpenKeys) {
setOpenKeys(JSON.parse(lastOpenKeys)) setOpenKeys(JSON.parse(lastOpenKeys))
@ -114,7 +112,6 @@ const Sider = props => {
scrollbar.update(); scrollbar.update();
} }
}) })
console.log(selectedKeys,openKeys)
return ( return (
<div id={'page-slider'} style={{ height: clientHeight, position: 'relative' }}> <div id={'page-slider'} style={{ height: clientHeight, position: 'relative' }}>
<Nav <Nav

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

@ -24,9 +24,7 @@ function SideSheets (props) {
const { equipmentWarehouse } = actions; const { equipmentWarehouse } = actions;
const [clickStyle, setclickStyle] = useState(); const [clickStyle, setclickStyle] = useState();
const [nvrDetails, setNvrDetails] = useState({ station: [] }); const [nvrDetails, setNvrDetails] = useState({ station: [] });
const [highStandard, setHighStandard] = useState(true); const [highStandard, setHighStandard] = useState(false);
const [solid, setSolid] = useState("solid");
const [light, setLight] = useState("light");
const list = ["项目名称", "关联结构物", "关联测点", "关联监测因素"]; const list = ["项目名称", "关联结构物", "关联测点", "关联监测因素"];
const information = { const information = {
nvr: [ nvr: [
@ -141,7 +139,6 @@ 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,
}); });
@ -265,6 +262,7 @@ function SideSheets (props) {
? (cameraSetup ? information.camera : information.nvr).map( ? (cameraSetup ? information.camera : information.nvr).map(
(item, index) => { (item, index) => {
let str = []; let str = [];
let high = nvrDetails.gbCamera ? nvrDetails.gbCamera.playUrl ? nvrDetails.gbCamera.playUrl.liveUrl ? nvrDetails.gbCamera.playUrl.liveUrl.hd : "" : "" : ""
if (index > 0) { if (index > 0) {
str.push( str.push(
<img <img
@ -290,7 +288,7 @@ function SideSheets (props) {
> >
{item.name} {item.name}
{cameraSetup ? ( {cameraSetup ? (
index == 1 ? ( index == 1 && high ? (
<div <div
style={{ style={{
display: "inline-block", display: "inline-block",
@ -298,17 +296,13 @@ function SideSheets (props) {
marginRight: 20, marginRight: 20,
}} }}
> >
<Button style={{ marginRight: 20 }} theme={solid} onClick={() => { <Button style={{ marginRight: 20 }} theme={highStandard ? "solid" : "light"} onClick={() => {
setHighStandard(true) setHighStandard(true)
setSolid("solid")
setLight("light")
}}> }}>
高清 高清
</Button> </Button>
<Button theme={light} onClick={() => { <Button theme={highStandard ? "light" : "solid"} onClick={() => {
setHighStandard(false) setHighStandard(false)
setSolid("light")
setLight("solid")
}}>标清</Button> }}>标清</Button>
</div> </div>
) : ( ) : (
@ -393,107 +387,109 @@ function SideSheets (props) {
}); });
} }
//接入信息/复制直播地址 //接入信息/复制直播地址
let broadcast=nvrDetails.gbCamera?nvrDetails.gbCamera.playUrl?nvrDetails.gbCamera.playUrl.liveUrl:"":"" let broadcast = nvrDetails.gbCamera ? nvrDetails.gbCamera.playUrl ? nvrDetails.gbCamera.playUrl.liveUrl ? nvrDetails.gbCamera.playUrl.liveUrl[highStandard ? "hd" : "sd"] : "" : "" : ""
console.log(broadcast)
if (index == 1) { if (index == 1) {
(cameraSetup ? item.liveBroadcast : item.access).map( if (cameraSetup) {
(item, index) => { if (broadcast) {
if (cameraSetup) { for (let key in broadcast) {
nvrDetails.videoUrl ? nvrDetails.videoUrl.liveUrl ?
str.push(
<div
key={"liveBroadcast" + index}
style={{
width: 120,
height: 130,
display: "inline-block",
borderRadius: 4,
border: "1px solid #D9D9D9",
margin: "20px 0 0 40px",
textAlign: "center",
color: clickStyle == item.name ? "white" : "",
background:
clickStyle == item.name ? "#1859C1" : "",
}}
onClick={() => {
if (highStandard) {
copy(nvrDetails.videoUrl.liveUrl.hd[item.key]);
} else {
copy(nvrDetails.videoUrl.liveUrl.sd[item.key]);
}
setclickStyle(item.name);
}}
>
<img
src={`/assets/images/background/${clickStyle == item.name
? "sewage_camera2"
: "sewage_camera1"
}.png`}
style={{ margin: "20px 0 8px 0" }}
/>
<div>
{item.name}
<img
src={`/assets/images/background/${clickStyle == item.name
? "copy2"
: "copy1"
}.png`}
style={{
paddingBottom: 10,
display: "inline-block",
width: 10,
height: 20,
}}
/>
</div>
</div>
) : "" : "";
} else {
str.push( str.push(
<div <div
key={"access" + index} key={key}
style={{ style={{
width: "50%", width: 120,
height: 130,
display: "inline-block", display: "inline-block",
marginTop: 20, borderRadius: 4,
border: "1px solid #D9D9D9",
margin: "20px 0 0 40px",
textAlign: "center",
color: clickStyle == key ? "white" : "",
background:
clickStyle == key ? "#1859C1" : "",
}}
onClick={() => {
copy(broadcast[key] ? broadcast[key] : "无相关地址");
setclickStyle(key);
}} }}
> >
<span <img
style={{ src={`/assets/images/background/${clickStyle == key
width: 150, ? "sewage_camera2"
display: "inline-block", : "sewage_camera1"
textAlign: "right", }.png`}
fontWeight: "400", style={{ margin: "20px 0 8px 0" }}
color: "rgba(0, 0, 0, 0.45)", />
}} <div>
> {key}
{item.name} <img
</span> src={`/assets/images/background/${clickStyle == key
<span ? "copy2"
style={{ : "copy1"
fontWeight: "400", }.png`}
color: " #34383E", style={{
}} paddingBottom: 10,
> display: "inline-block",
{item.difference == "difference" ? nvrDetails[item.key] : nvrDetails.accessInfo ? nvrDetails.accessInfo[item.key] : ""} width: 10,
</span> height: 20,
}}
/>
</div>
</div> </div>
); )
} }
return str; } else {
str.push(<div style={{ width: "100%", lineHeight: "120px", textAlign: "center", color: "rgba(151, 151, 151, .5)" }}>无相关信息</div>)
} }
);
} else {
item.access.map((item, index) => {
str.push(
<div
key={"access" + index}
style={{
width: "50%",
display: "inline-block",
marginTop: 20,
}}
>
<span
style={{
width: 150,
display: "inline-block",
textAlign: "right",
fontWeight: "400",
color: "rgba(0, 0, 0, 0.45)",
}}
>
{item.name}
</span>
<span
style={{
fontWeight: "400",
color: " #34383E",
}}
>
{item.difference == "difference" ? nvrDetails[item.key] : nvrDetails.accessInfo ? nvrDetails.accessInfo[item.key] : ""}
</span>
</div>
);
return str;
})
}
} }
//摄像头信息/复制回收地址 //摄像头信息/复制回收地址
let recovery = nvrDetails.gbCamera ? nvrDetails.gbCamera.playUrl ? nvrDetails.gbCamera.playUrl.replayUrl : "" : ""
if (index == 2) { if (index == 2) {
(cameraSetup ? item.recovery : nvrDetails.camera ? nvrDetails.camera : []).map( if (cameraSetup) {
(item, index) => { if (recovery) {
if (cameraSetup) { for (let key in recovery) {
nvrDetails.videoUrl?nvrDetails.videoUrl.replayUrl?
str.push( str.push(
<div <div
key={"liveBroadcast" + index} key={key}
style={{ style={{
width: 120, width: 120,
height: 130, height: 130,
@ -502,27 +498,27 @@ function SideSheets (props) {
border: "1px solid #D9D9D9", border: "1px solid #D9D9D9",
margin: "20px 0 0 40px", margin: "20px 0 0 40px",
textAlign: "center", textAlign: "center",
color: clickStyle == item.name ? "white" : "", color: clickStyle == key ? "white" : "",
background: background:
clickStyle == item.name ? "#1859C1" : "", clickStyle == key ? "#1859C1" : "",
}} }}
onClick={() => { onClick={() => {
copy(nvrDetails.videoUrl.replayUrl[item.key]); copy(recovery[key] ? recovery[key] : "无相关地址");
// alert("复制成功"); // alert("复制成功");
setclickStyle(item.name); setclickStyle(key);
}} }}
> >
<img <img
src={`/assets/images/background/${clickStyle == item.name src={`/assets/images/background/${clickStyle == key
? "store2" ? "store2"
: "store1" : "store1"
}.png`} }.png`}
style={{ margin: "20px 0 8px 0" }} style={{ margin: "20px 0 8px 0" }}
/> />
<div> <div>
{item.name} {`${key}`}
<img <img
src={`/assets/images/background/${clickStyle == item.name src={`/assets/images/background/${clickStyle == key
? "copy2" ? "copy2"
: "copy1" : "copy1"
}.png`} }.png`}
@ -535,8 +531,17 @@ function SideSheets (props) {
/> />
</div> </div>
</div> </div>
):"":""; )
} else { }
} else {
str.push(<div style={{ width: "100%", lineHeight: "120px", textAlign: "center", color: "rgba(151, 151, 151, .5)" }}>无相关信息</div>)
}
} else {
let nvrCamera = nvrDetails.camera ? nvrDetails.camera : []
if (nvrCamera.length > 0) {
nvrCamera.map((item, index) => {
str.push( str.push(
<div <div
key={"access" + index} key={"access" + index}
@ -577,12 +582,13 @@ function SideSheets (props) {
</p> </p>
</div> </div>
); );
} return str;
return str; })
} else {
str.push(<div style={{ width: "100%", lineHeight: "120px", textAlign: "center", color: "rgba(151, 151, 151, .5)" }}>无相关信息</div>)
} }
); }
} }
return str; return str;
} }
) )

2
code/VideoAccess-VCMP/web/package.json
View File

@ -48,9 +48,11 @@
}, },
"dependencies": { "dependencies": {
"@douyinfe/semi-ui": "^2.8.0", "@douyinfe/semi-ui": "^2.8.0",
"@douyinfe/semi-webpack-plugin": "^2.13.0",
"@fs/attachment": "^1.0.0", "@fs/attachment": "^1.0.0",
"@peace/components": "0.0.35", "@peace/components": "0.0.35",
"@peace/utils": "^0.0.48", "@peace/utils": "^0.0.48",
"@semi-bot/semi-theme-fsiot": "0.0.1",
"@vitejs/plugin-react": "^1.3.1", "@vitejs/plugin-react": "^1.3.1",
"@vitejs/plugin-react-refresh": "^1.3.6", "@vitejs/plugin-react-refresh": "^1.3.6",
"args": "^5.0.1", "args": "^5.0.1",

8
code/VideoAccess-VCMP/web/webpack.config.js
View File

@ -1,7 +1,7 @@
const path = require('path'); const path = require('path');
const webpack = require('webpack'); const webpack = require('webpack');
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin; const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
const SemiWebpackPlugin = require('@douyinfe/semi-webpack-plugin').default;
const PATHS = { const PATHS = {
app: path.join(__dirname, 'client/src'), app: path.join(__dirname, 'client/src'),
build: path.join(__dirname, 'client/build') build: path.join(__dirname, 'client/build')
@ -35,6 +35,12 @@ module.exports = {
new BundleAnalyzerPlugin({ new BundleAnalyzerPlugin({
analyzerPort: 8000, analyzerPort: 8000,
}), }),
new SemiWebpackPlugin({
theme: {
name: '@semi-bot/semi-theme-fsiot',
include: '~@semi-bot/semi-theme-fsiot/scss/local.scss'
}
}),
], ],
module: { module: {
rules: [{ rules: [{

Write Preview
Loading…
Cancel
Save