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

MicroApp 80%

release_1.3.0
巴林闲侠 3 years ago
parent
51cdd8d454
commit
cdf84d59fb
20 changed files with 105 additions and 78 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. 6
      code/VideoAccess-VCMP/web/client/index.html
  2. 4
      code/VideoAccess-VCMP/web/client/src/app.jsx
  3. 3
      code/VideoAccess-VCMP/web/client/src/index.jsx
  4. 6
      code/VideoAccess-VCMP/web/client/src/index.less
  5. 3
      code/VideoAccess-VCMP/web/client/src/layout/components/header/index.jsx
  6. 26
      code/VideoAccess-VCMP/web/client/src/layout/containers/layout/index.jsx
  7. 23
      code/VideoAccess-VCMP/web/client/src/layout/index.jsx
  8. 4
      code/VideoAccess-VCMP/web/client/src/public-path.js
  9. 5
      code/VideoAccess-VCMP/web/client/src/sections/microApp/containers/index.js
  10. 24
      code/VideoAccess-VCMP/web/client/src/sections/microApp/containers/microApp.jsx
  11. 13
      code/VideoAccess-VCMP/web/client/src/sections/microApp/nav-item.jsx
  12. 12
      code/VideoAccess-VCMP/web/client/src/sections/microApp/routes.js
  13. 0
      code/VideoAccess-VCMP/web/client/src/sections/noMatch/actions/index.js
  14. 5
      code/VideoAccess-VCMP/web/client/src/sections/noMatch/containers/index.js
  15. 27
      code/VideoAccess-VCMP/web/client/src/sections/noMatch/containers/noMatch.jsx
  16. 4
      code/VideoAccess-VCMP/web/client/src/sections/noMatch/index.js
  17. 5
      code/VideoAccess-VCMP/web/client/src/sections/noMatch/nav-item.jsx
  18. 0
      code/VideoAccess-VCMP/web/client/src/sections/noMatch/reducers/index.js
  19. 11
      code/VideoAccess-VCMP/web/client/src/sections/noMatch/routes.js
  20. 0
      code/VideoAccess-VCMP/web/client/src/sections/noMatch/style.less

6
code/VideoAccess-VCMP/web/client/index.html
View File

@ -4,17 +4,20 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="minimum-scale=1, initial-scale=1, width=device-width" /> <meta name="viewport" content="minimum-scale=1, initial-scale=1, width=device-width" />
<!-- <meta content="upgrade-insecure-requests" http-equiv="Content-Security-Policy"> 会将http转化成https,导致jessibuca视频播放不成功 --> <!-- <meta content="upgrade-insecure-requests" http-equiv="Content-Security-Policy"> 会将http转化成https,导致jessibuca视频播放不成功 -->
<link rel="shortcut icon" href="/assets/images/favicon.ico"> <link rel="shortcut icon" href="/assets/images/favicon.ico">
<script src="/assets/js/jessibuca/jessibuca.js"></script> <script src="/assets/js/jessibuca/jessibuca.js"></script>
<script src="https://lf1-cdn-tos.bytegoofy.com/obj/iconpark/icons_14797_10.b43556420cacd0119dedf94deff663bb.js"></script> <script src="https://lf1-cdn-tos.bytegoofy.com/obj/iconpark/icons_14797_10.b43556420cacd0119dedf94deff663bb.js"></script>
</head> </head>
<body> <body>
<div id='VcmpApp'></div> <div id='VcmpApp' style="height: 100%;"></div>
<!-- Webpack --> <!-- Webpack -->
<script type="text/javascript" src="http://localhost:5001/client/build/app.js"></script> <script type="text/javascript" src="http://localhost:5001/client/build/app.js"></script>
<!-- Vite --> <!-- Vite -->
<!-- <script type="module"> <!-- <script type="module">
import RefreshRuntime from "http://localhost:5002/@react-refresh" import RefreshRuntime from "http://localhost:5002/@react-refresh"
@ -26,6 +29,7 @@
</script> </script>
<script type="module" src="http://localhost:5002/src/index.jsx"></script> --> <script type="module" src="http://localhost:5002/src/index.jsx"></script> -->
<!-- Vite End --> <!-- Vite End -->
<script> <script>
//过滤掉一些无用的警告、没有价值的报错 //过滤掉一些无用的警告、没有价值的报错
//代理console.warn方法 //代理console.warn方法

4
code/VideoAccess-VCMP/web/client/src/app.jsx
View File

@ -14,6 +14,7 @@ import journaling from './sections/journaling';
import archive from './sections/archive'; import archive from './sections/archive';
import application from './sections/application'; import application from './sections/application';
import member from './sections/member'; import member from './sections/member';
import NoMatch from './sections/noMatch';
const App = props => { const App = props => {
const { projectName } = props const { projectName } = props
@ -28,7 +29,8 @@ const App = props => {
sections={[ sections={[
// Example, // Example,
Auth, Monitor, EquipmentWarehouse, AiAbility, offline, Auth, Monitor, EquipmentWarehouse, AiAbility, offline,
openness, journaling, archive, application, member, system openness, journaling, archive, application, member, system,
NoMatch
]} ]}
/> />
) )

3
code/VideoAccess-VCMP/web/client/src/index.jsx
View File

@ -5,8 +5,5 @@ import React from 'react';
import { render } from 'react-dom'; import { render } from 'react-dom';
import App from './app'; import App from './app';
import './index.less'; import './index.less';
import microApp from '@micro-zoe/micro-app'
microApp.start()
render((<App projectName="飞尚物联" />), document.getElementById('VcmpApp')); render((<App projectName="飞尚物联" />), document.getElementById('VcmpApp'));

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

@ -60,6 +60,10 @@ body {
} }
// SEMI 全局样式 // SEMI 全局样式
.semi-popover-content {
min-width: 300px
}
.semi-portal-inner { .semi-portal-inner {
min-width: 300px!important position: fixed;
} }

3
code/VideoAccess-VCMP/web/client/src/layout/components/header/index.jsx
View File

@ -6,6 +6,7 @@ import { Nav, Avatar, Dropdown } from "@douyinfe/semi-ui";
const Header = (props) => { const Header = (props) => {
const { dispatch, history, user, actions, socket } = props; const { dispatch, history, user, actions, socket } = props;
console.log(__webpack_public_path__);
return ( return (
<> <>
<Nav <Nav
@ -24,7 +25,7 @@ const Header = (props) => {
style={{ style={{
height: 60, height: 60,
minWidth: 520, minWidth: 520,
background: "url(/assets/images/background/header.png)", background: `url(${__webpack_public_path__}assets/images/background/header.png)`,
backgroundSize: "100% 100%", backgroundSize: "100% 100%",
color: "white", color: "white",
}} }}

26
code/VideoAccess-VCMP/web/client/src/layout/containers/layout/index.jsx
View File

@ -26,7 +26,8 @@ let scrollbar
const LayoutContainer = props => { const LayoutContainer = props => {
const { const {
dispatch, msg, user, copyright, children, sections, clientWidth, clientHeight, dispatch, msg, user, copyright, children, sections, clientWidth, clientHeight,
location, match, routes, history, authCrossLoading, socket location, match, routes, history, authCrossLoading, socket,
microAppWaiting
} = props } = props
const [collapsed, setCollapsed] = useState(false) const [collapsed, setCollapsed] = useState(false)
@ -34,8 +35,8 @@ const LayoutContainer = props => {
const resize_ = () => { const resize_ = () => {
dispatch(resize( dispatch(resize(
document.body.clientHeight, document.getElementById('VcmpApp').clientHeight,
document.body.clientWidth - (collapsed ? 120 : 240) document.getElementById('VcmpApp').clientWidth - (collapsed ? 120 : 240)
)); ));
} }
@ -86,17 +87,17 @@ const LayoutContainer = props => {
if (socket) { if (socket) {
socket.on('CAMERA_ONLINE', function (msg) { socket.on('CAMERA_ONLINE', function (msg) {
console.info(msg); console.info(msg);
if (msg.online=='ON') { if (msg.online == 'ON') {
Notification.success({ Notification.success({
title: 'Hi', title: 'Hi',
content: (<div><div>{msg.name}</div><div style={{marginTop:5}}>已上线。</div></div>), content: (<div><div>{msg.name}</div><div style={{ marginTop: 5 }}>已上线。</div></div>),
duration: 2, duration: 2,
}) })
} }
if (msg.online=='OFF') { if (msg.online == 'OFF') {
Notification.error({ Notification.error({
title: 'Hi', title: 'Hi',
content: (<div><div>{msg.name}</div><div style={{marginTop:5}}>发生离线。</div></div>), content: (<div><div>{msg.name}</div><div style={{ marginTop: 5 }}>发生离线。</div></div>),
duration: 2, duration: 2,
}) })
} }
@ -108,18 +109,19 @@ const LayoutContainer = props => {
}, [socket]) }, [socket])
return ( return (
<Layout id="layout"> <Layout id="layout" style={{ height: '100%' }}>
{ {
authCrossLoading ? authCrossLoading || microAppWaiting ?
<div style={{ <div style={{
position: 'absolute', height: '100%', width: '100%', // position: 'absolute',
height: '100%', width: '100%',
display: 'flex', alignItems: 'center', placeContent: 'center', display: 'flex', alignItems: 'center', placeContent: 'center',
backgroundColor: "#000" backgroundColor: "#000"
}}> }}>
<video <video
autoPlay loop muted autoPlay loop muted
style={{}} style={{}}
src="/assets/video/cross_loading.mp4" src={`${__webpack_public_path__}assets/video/cross_loading.mp4`}
type="video/mp4" type="video/mp4"
/> />
</div> </div>
@ -136,7 +138,7 @@ const LayoutContainer = props => {
history={history} history={history}
/> />
</Layout.Header> </Layout.Header>
<Layout> <Layout style={{ height: 'calc(100% - 60px)' }}>
<Layout.Sider> <Layout.Sider>
<Sider <Sider
sections={sections} sections={sections}

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

@ -11,6 +11,7 @@ import { ConfigProvider } from '@douyinfe/semi-ui';
import layoutActions from './actions'; import layoutActions from './actions';
import zhCN from '@douyinfe/semi-ui/lib/es/locale/source/zh_CN'; import zhCN from '@douyinfe/semi-ui/lib/es/locale/source/zh_CN';
import { basicReducer } from '@peace/utils'; import { basicReducer } from '@peace/utils';
import { push } from 'react-router-redux';
import 'moment/locale/zh-cn'; import 'moment/locale/zh-cn';
moment.locale('zh-cn'); moment.locale('zh-cn');
@ -25,6 +26,7 @@ const Root = props => {
const [combineRoutes, setCombineRoutes] = useState([]) const [combineRoutes, setCombineRoutes] = useState([])
const [innnerRoutes, setInnerRoutes] = useState([]) const [innnerRoutes, setInnerRoutes] = useState([])
const [authCrossLoading, setAuthCrossLoading] = useState(true) const [authCrossLoading, setAuthCrossLoading] = useState(true)
const [microAppWaiting, setMicroAppWaiting] = useState(true)
const [resourceRoot, setResourceRoot] = useState({}) const [resourceRoot, setResourceRoot] = useState({})
const flatRoutes = (routes) => { const flatRoutes = (routes) => {
@ -124,7 +126,8 @@ const Root = props => {
let history = createBrowserHistory(); let history = createBrowserHistory();
let store = configStore(reducers, history); let store = configStore(reducers, history);
store.dispatch(initLayout(title, copyright, sections, actions)); store.dispatch(initLayout(title, copyright, sections, actions));
store.dispatch(resize(document.body.clientHeight, document.body.clientWidth)); // store.dispatch(resize(document.body.clientHeight, document.body.clientWidth));
store.dispatch(resize(document.getElementById('VcmpApp').clientHeight, document.getElementById('VcmpApp').clientWidth));
store.dispatch(actions.auth.initAuth()); store.dispatch(actions.auth.initAuth());
const resourceRoot = await store.dispatch(initApiRoot()) const resourceRoot = await store.dispatch(initApiRoot())
setResourceRoot(resourceRoot.payload) setResourceRoot(resourceRoot.payload)
@ -166,6 +169,23 @@ const Root = props => {
setAuthCrossLoading(false) setAuthCrossLoading(false)
}); });
// setAuthCrossLoading(false) // setAuthCrossLoading(false)
// MicroApp
const microAppListen = async (data) => {
console.log('xxxx', data);
if (data.action == 'initMicro') {
await store.dispatch(push('/noMatch'));
setMicroAppWaiting(false)
}
}
if (window.__MICRO_APP_ENVIRONMENT__) {
console.info('MicroApp')
setAuthCrossLoading(false)
window.microApp.addDataListener(microAppListen, true)
} else {
console.info('NOT MicroApp')
setMicroAppWaiting(false)
}
}, []) }, [])
return ( return (
@ -183,6 +203,7 @@ const Root = props => {
history={history} history={history}
routes={innnerRoutes} routes={innnerRoutes}
authCrossLoading={authCrossLoading} authCrossLoading={authCrossLoading}
microAppWaiting={microAppWaiting}
> >
{combineRoutes} {combineRoutes}
</Layout> </Layout>

4
code/VideoAccess-VCMP/web/client/src/public-path.js
View File

@ -2,4 +2,6 @@
if (window.__MICRO_APP_ENVIRONMENT__) { if (window.__MICRO_APP_ENVIRONMENT__) {
// eslint-disable-next-line // eslint-disable-next-line
__webpack_public_path__ = window.__MICRO_APP_PUBLIC_PATH__ __webpack_public_path__ = window.__MICRO_APP_PUBLIC_PATH__
} } else {
__webpack_public_path__ = '/'
}

5
code/VideoAccess-VCMP/web/client/src/sections/microApp/containers/index.js
View File

@ -1,5 +0,0 @@
'use strict';
import MicroApp from './microApp';
export { MicroApp };

24
code/VideoAccess-VCMP/web/client/src/sections/microApp/containers/microApp.jsx
View File

@ -1,24 +0,0 @@
import React, { useEffect } from 'react';
import { connect } from 'react-redux';
import { Spin, Card } from '@douyinfe/semi-ui';
import '../style.less'
const { Meta } = Card;
const Example = (props) => {
const { dispatch, actions, } = props
return (
<Spin>
MicroApp
</Spin>
)
}
function mapStateToProps (state) {
const { auth, global } = state;
return {
};
}
export default connect(mapStateToProps)(Example);

13
code/VideoAccess-VCMP/web/client/src/sections/microApp/nav-item.jsx
View File

@ -1,13 +0,0 @@
import React from 'react';
import { IconCode } from '@douyinfe/semi-icons';
export function getNavItem (user, dispatch) {
return (
[
{
itemKey: 'MicroApp', text: 'MicroApp', icon: <IconCode />,
to: '/microApp',
},
]
);
}

12
code/VideoAccess-VCMP/web/client/src/sections/microApp/routes.js
View File

@ -1,12 +0,0 @@
'use strict';
import { MicroApp, } from './containers';
export default [{
type: 'inner',
route: {
path: '/microApp',
key: 'microApp',
breadcrumb: 'microApp',
component: MicroApp,
}
}];

0
code/VideoAccess-VCMP/web/client/src/sections/microApp/reducers/index.js → code/VideoAccess-VCMP/web/client/src/sections/noMatch/actions/index.js
View File

5
code/VideoAccess-VCMP/web/client/src/sections/noMatch/containers/index.js
View File

@ -0,0 +1,5 @@
'use strict';
import NoMatch from './noMatch';
export { NoMatch };

27
code/VideoAccess-VCMP/web/client/src/sections/noMatch/containers/noMatch.jsx
View File

@ -0,0 +1,27 @@
import React, { useEffect } from 'react';
import { connect } from 'react-redux';
import moment from 'moment';
import '../style.less'
const NoMatch = (props) => {
return (
<div>
<div style={{ textAlign: 'center', padding: 120 }}>
<p style={{ fontSize: 80, lineHeight: 1.5 }}>404</p>
<p style={{ fontSize: 32, lineHeight: 2 }}>PAGE NOT FOUND</p>
<p>很遗憾，您暂时无法访问该页面。</p>
<p>请检查您访问的链接地址是否正确。</p>
<p style={{ marginTop: 80 }}>Copyright © {moment().year()} 飞尚尚视</p>
</div>
</div>
)
}
function mapStateToProps (state) {
const { } = state;
return {
};
}
export default connect(mapStateToProps)(NoMatch);

4
code/VideoAccess-VCMP/web/client/src/sections/microApp/index.js → code/VideoAccess-VCMP/web/client/src/sections/noMatch/index.js
View File

@ -6,8 +6,8 @@ import actions from './actions';
import { getNavItem } from './nav-item'; import { getNavItem } from './nav-item';
export default { export default {
key: 'microApp', key: 'noMatch',
name: 'MicroApp', name: '404',
reducers: reducers, reducers: reducers,
routes: routes, routes: routes,
actions: actions, actions: actions,

5
code/VideoAccess-VCMP/web/client/src/sections/noMatch/nav-item.jsx
View File

@ -0,0 +1,5 @@
export function getNavItem (user, dispatch) {
return (
[]
);
}

0
code/VideoAccess-VCMP/web/client/src/sections/microApp/actions/index.js → code/VideoAccess-VCMP/web/client/src/sections/noMatch/reducers/index.js
View File

11
code/VideoAccess-VCMP/web/client/src/sections/noMatch/routes.js
View File

@ -0,0 +1,11 @@
'use strict';
import { NoMatch, } from './containers';
export default [{
type: 'outer',
route: {
path: '/noMatch',
key: 'noMatch',
component: NoMatch,
}
}];

0
code/VideoAccess-VCMP/web/client/src/sections/noMatch/style.less
View File

Write Preview
Loading…
Cancel
Save