Commit 18bfc848 authored by xinzhedeai's avatar xinzhedeai

add:dp init

parent d7899a86
...@@ -12,6 +12,9 @@ ...@@ -12,6 +12,9 @@
</title> </title>
<script src="./Cesium/Cesium.js"></script> <script src="./Cesium/Cesium.js"></script>
<link rel="stylesheet" href="./Cesium/Widgets/widgets.css"> <link rel="stylesheet" href="./Cesium/Widgets/widgets.css">
<script src="js/qf_web.min.js"></script>
<script type="text/javascript">qf.openCalcLayout({ dpr: 1 });</script>
<!--[if lt IE 11]><script>window.location.href='/html/ie.html';</script><![endif]--> <!--[if lt IE 11]><script>window.location.href='/html/ie.html';</script><![endif]-->
......
This diff is collapsed.
This diff is collapsed.
<template>
<div :class="classObj" class="app-wrapper" :style="{'--current-color': theme}">
<div v-if="device==='mobile'&&sidebar.opened" class="drawer-bg" @click="handleClickOutside"/>
<sidebar v-if="!sidebar.hide" class="sidebar-container"/>
<div :class="{hasTagsView:needTagsView,sidebarHide:sidebar.hide}" class="main-container">
<div :class="{'fixed-header':fixedHeader}">
<navbar/>
<tags-view v-if="needTagsView"/>
</div>
<app-main/>
<right-panel>
<settings/>
</right-panel>
</div>
</div>
</template>
<script>
import RightPanel from '@/components/RightPanel'
import { AppMain, Navbar, Settings, Sidebar, TagsView } from './components'
import ResizeMixin from './mixin/ResizeHandler'
import { mapState } from 'vuex'
import variables from '@/assets/styles/variables.scss'
export default {
name: 'Layout',
components: {
AppMain,
Navbar,
RightPanel,
Settings,
Sidebar,
TagsView
},
mixins: [ResizeMixin],
computed: {
...mapState({
theme: state => state.settings.theme,
sideTheme: state => state.settings.sideTheme,
sidebar: state => state.app.sidebar,
device: state => state.app.device,
needTagsView: state => state.settings.tagsView,
fixedHeader: state => state.settings.fixedHeader
}),
classObj() {
return {
hideSidebar: !this.sidebar.opened,
openSidebar: this.sidebar.opened,
withoutAnimation: this.sidebar.withoutAnimation,
mobile: this.device === 'mobile'
}
},
variables() {
return variables;
}
},
methods: {
handleClickOutside() {
this.$store.dispatch('app/closeSideBar', { withoutAnimation: false })
}
}
}
</script>
<style lang="scss" scoped>
@import "~@/assets/styles/mixin.scss";
@import "~@/assets/styles/variables.scss";
.app-wrapper {
@include clearfix;
position: relative;
height: 100%;
width: 100%;
&.mobile.openSidebar {
position: fixed;
top: 0;
}
}
.drawer-bg {
background: #000;
opacity: 0.3;
width: 100%;
top: 0;
height: 100%;
position: absolute;
z-index: 999;
}
.fixed-header {
position: fixed;
top: 0;
right: 0;
z-index: 9;
width: calc(100% - #{$base-sidebar-width});
transition: width 0.28s;
}
.hideSidebar .fixed-header {
width: calc(100% - 54px);
}
.sidebarHide .fixed-header {
width: 100%;
}
.mobile .fixed-header {
width: 100%;
}
</style>
<template>
<div
:class="classObj"
class="app-wrapper"
:style="{ '--current-color': theme }"
>
<!-- <div
v-if="device === 'mobile' && sidebar.opened"
class="drawer-bg"
@click="handleClickOutside"
/>
<sidebar v-if="!sidebar.hide" class="sidebar-container" /> -->
<div
:class="{ hasTagsView: needTagsView, sidebarHide: sidebar.hide }"
class="main-container"
>
<!-- <div :class="{ 'fixed-header': fixedHeader }">
<navbar />
<tags-view v-if="needTagsView" />
</div> -->
<app-main />
<!-- <right-panel>
<settings/>
</right-panel> -->
</div>
</div>
</template>
<script>
import RightPanel from "@/components/RightPanel";
import { AppMain, Navbar, Settings, Sidebar, TagsView } from "./components";
import ResizeMixin from "./mixin/ResizeHandler";
import { mapState } from "vuex";
import variables from "@/assets/styles/variables.scss";
export default {
name: "Layout",
components: {
AppMain,
Navbar,
RightPanel,
Settings,
Sidebar,
TagsView,
},
mixins: [ResizeMixin],
computed: {
...mapState({
theme: (state) => state.settings.theme,
sideTheme: (state) => state.settings.sideTheme,
sidebar: (state) => state.app.sidebar,
device: (state) => state.app.device,
needTagsView: (state) => state.settings.tagsView,
fixedHeader: (state) => state.settings.fixedHeader,
}),
classObj() {
return {
hideSidebar: !this.sidebar.opened,
openSidebar: this.sidebar.opened,
withoutAnimation: this.sidebar.withoutAnimation,
mobile: this.device === "mobile",
};
},
variables() {
return variables;
},
},
methods: {
handleClickOutside() {
this.$store.dispatch("app/closeSideBar", { withoutAnimation: false });
},
},
};
</script>
<style lang="scss" scoped>
@import "~@/assets/styles/mixin.scss";
@import "~@/assets/styles/variables.scss";
.app-wrapper {
@include clearfix;
position: relative;
height: 100%;
width: 100%;
&.mobile.openSidebar {
position: fixed;
top: 0;
}
}
.drawer-bg {
background: #000;
opacity: 0.3;
width: 100%;
top: 0;
height: 100%;
position: absolute;
z-index: 999;
}
.fixed-header {
position: fixed;
top: 0;
right: 0;
z-index: 9;
width: calc(100% - #{$base-sidebar-width});
transition: width 0.28s;
}
.hideSidebar .fixed-header {
width: calc(100% - 54px);
}
.sidebarHide .fixed-header {
width: 100%;
}
.mobile .fixed-header {
width: 100%;
}
.main-container {
margin-left: 0px !important;
}
</style>
<template> <template>
<div :class="classObj" class="app-wrapper" :style="{'--current-color': theme}"> <div
<div v-if="device==='mobile'&&sidebar.opened" class="drawer-bg" @click="handleClickOutside"/> :class="classObj"
<sidebar v-if="!sidebar.hide" class="sidebar-container"/> class="app-wrapper"
<div :class="{hasTagsView:needTagsView,sidebarHide:sidebar.hide}" class="main-container"> :style="{ '--current-color': theme }"
<div :class="{'fixed-header':fixedHeader}"> >
<navbar/> <!-- <div
<tags-view v-if="needTagsView"/> v-if="device === 'mobile' && sidebar.opened"
</div> class="drawer-bg"
<app-main/> @click="handleClickOutside"
<right-panel> />
<sidebar v-if="!sidebar.hide" class="sidebar-container" /> -->
<div
:class="{ hasTagsView: needTagsView, sidebarHide: sidebar.hide }"
class="main-container"
>
<!-- <div :class="{ 'fixed-header': fixedHeader }">
<navbar />
<tags-view v-if="needTagsView" />
</div> -->
<app-main />
<!-- <right-panel>
<settings/> <settings/>
</right-panel> </right-panel> -->
</div> </div>
</div> </div>
</template> </template>
<script> <script>
import RightPanel from '@/components/RightPanel' import RightPanel from "@/components/RightPanel";
import { AppMain, Navbar, Settings, Sidebar, TagsView } from './components' import { AppMain, Navbar, Settings, Sidebar, TagsView } from "./components";
import ResizeMixin from './mixin/ResizeHandler' import ResizeMixin from "./mixin/ResizeHandler";
import { mapState } from 'vuex' import { mapState } from "vuex";
import variables from '@/assets/styles/variables.scss' import variables from "@/assets/styles/variables.scss";
export default { export default {
name: 'Layout', name: "Layout",
components: { components: {
AppMain, AppMain,
Navbar, Navbar,
RightPanel, RightPanel,
Settings, Settings,
Sidebar, Sidebar,
TagsView TagsView,
}, },
mixins: [ResizeMixin], mixins: [ResizeMixin],
computed: { computed: {
...mapState({ ...mapState({
theme: state => state.settings.theme, theme: (state) => state.settings.theme,
sideTheme: state => state.settings.sideTheme, sideTheme: (state) => state.settings.sideTheme,
sidebar: state => state.app.sidebar, sidebar: (state) => state.app.sidebar,
device: state => state.app.device, device: (state) => state.app.device,
needTagsView: state => state.settings.tagsView, needTagsView: (state) => state.settings.tagsView,
fixedHeader: state => state.settings.fixedHeader fixedHeader: (state) => state.settings.fixedHeader,
}), }),
classObj() { classObj() {
return { return {
hideSidebar: !this.sidebar.opened, hideSidebar: !this.sidebar.opened,
openSidebar: this.sidebar.opened, openSidebar: this.sidebar.opened,
withoutAnimation: this.sidebar.withoutAnimation, withoutAnimation: this.sidebar.withoutAnimation,
mobile: this.device === 'mobile' mobile: this.device === "mobile",
} };
}, },
variables() { variables() {
return variables; return variables;
} },
}, },
methods: { methods: {
handleClickOutside() { handleClickOutside() {
this.$store.dispatch('app/closeSideBar', { withoutAnimation: false }) this.$store.dispatch("app/closeSideBar", { withoutAnimation: false });
} },
} },
} };
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@import "~@/assets/styles/mixin.scss"; @import "~@/assets/styles/mixin.scss";
@import "~@/assets/styles/variables.scss"; @import "~@/assets/styles/variables.scss";
.app-wrapper { .app-wrapper {
@include clearfix; @include clearfix;
position: relative; position: relative;
height: 100%; height: 100%;
...@@ -76,9 +87,9 @@ export default { ...@@ -76,9 +87,9 @@ export default {
position: fixed; position: fixed;
top: 0; top: 0;
} }
} }
.drawer-bg { .drawer-bg {
background: #000; background: #000;
opacity: 0.3; opacity: 0.3;
width: 100%; width: 100%;
...@@ -86,26 +97,30 @@ export default { ...@@ -86,26 +97,30 @@ export default {
height: 100%; height: 100%;
position: absolute; position: absolute;
z-index: 999; z-index: 999;
} }
.fixed-header { .fixed-header {
position: fixed; position: fixed;
top: 0; top: 0;
right: 0; right: 0;
z-index: 9; z-index: 9;
width: calc(100% - #{$base-sidebar-width}); width: calc(100% - #{$base-sidebar-width});
transition: width 0.28s; transition: width 0.28s;
} }
.hideSidebar .fixed-header { .hideSidebar .fixed-header {
width: calc(100% - 54px); width: calc(100% - 54px);
} }
.sidebarHide .fixed-header { .sidebarHide .fixed-header {
width: 100%; width: 100%;
} }
.mobile .fixed-header { .mobile .fixed-header {
width: 100%; width: 100%;
} }
.main-container {
margin-left: 0px !important;
}
</style> </style>
...@@ -88,6 +88,19 @@ export const constantRoutes = [ ...@@ -88,6 +88,19 @@ export const constantRoutes = [
} }
] ]
}, },
{
path: '/dp',
component: Layout,
redirect: 'noredirect',
children: [
{
path: 'screen',
component: () => import('@/views/index-dp'),
name: 'Screen',
meta: { title: '首页-DP', icon: 'dashboard', affix: true }
}
]
},
{ {
path: '/user', path: '/user',
component: Layout, component: Layout,
...@@ -204,7 +217,7 @@ router.beforeEach((to, from, next) => { ...@@ -204,7 +217,7 @@ router.beforeEach((to, from, next) => {
// const token = localStg.get('token') // const token = localStg.get('token')
// if (token && !wsManager.isOpen()) { // if (token && !wsManager.isOpen()) {
// wsManager.init(wsUrl) // wsManager.init(wsUrl)
connect() // connect()
// } // }
next() next()
}) })
......
This diff is collapsed.
This diff is collapsed.
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment