joylink/rt-sim-training-client
6
0
Fork 0
Code Issues 3 Pull Requests Actions Packages Projects Releases Wiki Activity

增加绘图实例此操作界面

Browse Source
This commit is contained in:
lVAL 2020-10-13 14:08:47 +08:00
parent c14e0fc4c0
commit 0feea5cb1a
6 changed files with 100 additions and 105 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
src/router/index_Common.js
View File

@ -963,7 +963,8 @@ export const asyncRouter = [
}, },
children: [ children: [
{ {
path:'design', path:'design',
redirect: '/iscs/design/edit',
component: IscsDesign, component: IscsDesign,
meta: { meta: {
i18n: 'router.iscsDraw', i18n: 'router.iscsDraw',
@ -976,26 +977,6 @@ export const asyncRouter = [
hidden: true hidden: true
} }
] ]
},
{
path: 'system',
component: IscsSystem,
meta: {
i18n: 'router.iscsSystem',
roles: [admin, user]
},
children: [
{
path: 'config/:mode',
component: IscsConfig,
hidden: true
},
{
path: 'stationConfig/:mode',
component: IscsStationConfig,
hidden: true
}
]
} }
] ]
}, },

1
src/views/iscs/iscsDesign/demonList.vue
View File

@ -924,7 +924,6 @@ export default {
.uploadDemo { .uploadDemo {
position: relative; position: relative;
overflow: hidden; overflow: hidden;
// float: right;
padding: 9px 15px; padding: 9px 15px;
margin-right: 3px; margin-right: 3px;
cursor: pointer; cursor: pointer;

78
src/views/iscs/iscsDesign/index.vue
View File

@ -1,22 +1,22 @@
<template> <template>
<div class="app-wrapper"> <div class="app-wrapper">
<map-create ref="mapCreate" :line-code="lineCode" @refresh="refresh1" /> <div class="left-card" :class="{'hide': viewShow}">
<div class="examList" :style="{width: widthLeft+'px'}"> <div class="btn_right_box" @click="clickLeftBtn"><i :class="viewShow?'el-icon-arrow-right':'el-icon-arrow-left'" /></div>
<demon-list ref="demonList" @createMap="createMap" /> <div class="examList" style="width:100%">
</div> <demon-list ref="demonList" @createMap="createMap" />
<drap-left :width-left="widthLeft" @drapWidth="drapWidth" /> </div>
</div>
<transition> <transition>
<router-view /> <router-view />
</transition> </transition>
<context-menu /> <context-menu />
<map-create ref="mapCreate" :line-code="lineCode" @refresh="refresh" />
</div> </div>
</template> </template>
<script> <script>
import demonList from './demonList'; import demonList from './demonList';
import drapLeft from '@/views/components/drapLeft/index';
import { launchFullscreen } from '@/utils/screen'; import { launchFullscreen } from '@/utils/screen';
import localStore from 'storejs';
import { getSessionStorage, setSessionStorage } from '@/utils/auth'; import { getSessionStorage, setSessionStorage } from '@/utils/auth';
import MapCreate from './mapmanage/create'; import MapCreate from './mapmanage/create';
import ContextMenu from './contextMenu'; import ContextMenu from './contextMenu';
@ -25,14 +25,14 @@ export default {
name: 'DesignPlatform', name: 'DesignPlatform',
components: { components: {
demonList, demonList,
drapLeft,
MapCreate, MapCreate,
ContextMenu ContextMenu
}, },
data() { data() {
return { return {
widthLeft: Number(localStore.get('LeftWidth')) || 450, lineCode: '',
lineCode: '' viewShow: false,
widthLeft: 450
}; };
}, },
computed: { computed: {
@ -41,9 +41,6 @@ export default {
} }
}, },
watch: { watch: {
widthLeft(val) {
this.setMapResize(val);
},
'$store.state.app.windowSizeCount': function() { '$store.state.app.windowSizeCount': function() {
this.resize(); this.resize();
} }
@ -57,32 +54,27 @@ export default {
launchFullscreen(); launchFullscreen();
setSessionStorage('againEnter', true); setSessionStorage('againEnter', true);
} }
this.widthLeft = Number(localStore.get('LeftWidth'));
}, },
methods: { methods: {
refresh() { refresh() {
this.$refs && this.$refs.demonList && this.$refs.demonList.loadInitData(); this.$refs && this.$refs.demonList && this.$refs.demonList.loadInitData();
}, },
refresh1() {
this.$refs.demonList.loadInitData();
},
createMap() { createMap() {
this.$refs.mapCreate.show(); this.$refs.mapCreate.show();
}, },
drapWidth(width) {
this.widthLeft = Number(width);
},
resize() { resize() {
this.widthLeft = Number(localStore.get('LeftWidth')) || this.widthLeft; const width = this.$store.state.app.width;
const width = this.$store.state.app.width - this.widthLeft;
const height = this.$store.state.app.height - 90; const height = this.$store.state.app.height - 90;
this.$store.dispatch('config/resize', { width: width, height: height }); this.$store.dispatch('config/resize', { width: width, height: height });
}, },
setMapResize(LeftWidth) { setMapResize(LeftWidth) {
const width = this.$store.state.app.width - LeftWidth; const width = this.$store.state.app.width;
const height = this.$store.state.app.height - 90; const height = this.$store.state.app.height - 90;
this.$store.dispatch('config/resize', { width: width, height: height }); this.$store.dispatch('config/resize', { width: width, height: height });
} },
clickLeftBtn() {
this.viewShow = !this.viewShow;
}
} }
}; };
</script> </script>
@ -97,8 +89,40 @@ export default {
overflow: hidden; overflow: hidden;
} }
.examList { .left-card{
float: left; width: 470px;
height: 100%; height: 100%;
position: absolute;
left: 0;
transform: translateX(-470px);
transition: all 0.5s;
background: #fff;
z-index: 9;
/deep/{
.v-modal{
opacity: 0;
}
}
&.hide{
transform: translateX(0);
}
.examList {
float: left;
height: 100%;
}
.btn_right_box{
position: absolute;
right: 0;
top: 50%;
padding: 8px 3px;
background: #fff;
z-index: 10;
transform: translateX(22px);
cursor: pointer;
border-radius: 0 5px 05px 0;
}
} }
</style> </style>

74
src/views/iscs/iscsDraw/index.vue
View File

@ -4,8 +4,8 @@
<div class="map-view"> <div class="map-view">
<iscs-plate ref="iscsPlate" @iscsChange="iscsChange" /> <iscs-plate ref="iscsPlate" @iscsChange="iscsChange" />
</div> </div>
<div class="map-draft" :class="{'hide': draftShow}"> <div class="right-card" :class="{'hide': draftShow}">
<div class="btn_left_box" @click="clickRightBtn"><i :class="draftShow?'el-icon-arrow-right':'el-icon-arrow-left'" /></div> <div class="btn_draft_box" @click="clickDraftBtn"><i :class="draftShow?'el-icon-arrow-right':'el-icon-arrow-left'" /></div>
<iscs-operate v-if="iscsMode==='fas'" ref="iscsOperate" @iscsChange="iscsChange" @handleSave="handleSave" /> <iscs-operate v-if="iscsMode==='fas'" ref="iscsOperate" @iscsChange="iscsChange" @handleSave="handleSave" />
<iscs-bas-operate v-else-if="iscsMode==='bas'" ref="iscsBasOperate" @iscsChange="iscsChange" @handleSave="handleSave" /> <iscs-bas-operate v-else-if="iscsMode==='bas'" ref="iscsBasOperate" @iscsChange="iscsChange" @handleSave="handleSave" />
<iscs-psd-operate v-else-if="iscsMode==='psd'" ref="iscsPsdOperate" @iscsChange="iscsChange" @handleSave="handleSave" /> <iscs-psd-operate v-else-if="iscsMode==='psd'" ref="iscsPsdOperate" @iscsChange="iscsChange" @handleSave="handleSave" />
@ -21,6 +21,10 @@
<iscs-environment v-else-if="iscsMode=='environment02'" ref="" @iscsChange="iscsChange" @handleSave="handleSave" /> <!-- 环境与设备监控系统 --> <iscs-environment v-else-if="iscsMode=='environment02'" ref="" @iscsChange="iscsChange" @handleSave="handleSave" /> <!-- 环境与设备监控系统 -->
<iscs-psd v-else-if="iscsMode=='psdSystem02'" ref="" @iscsChange="iscsChange" @handleSave="handleSave" /> <!-- 屏蔽门系统 --> <iscs-psd v-else-if="iscsMode=='psdSystem02'" ref="" @iscsChange="iscsChange" @handleSave="handleSave" /> <!-- 屏蔽门系统 -->
</div> </div>
<div class="right-card" :class="{'hide': tableShow}">
<div class="btn_table_box" @click="clickTableBtn"><i :class="tableShow?'el-icon-arrow-right':'el-icon-arrow-left'" /></div>
///
</div>
</div> </div>
</transition> </transition>
</template> </template>
@ -34,7 +38,6 @@ import IscsCctvOperate from './iscsCctvOperate/index';
import IscsAfcOperate from './iscsAfcOperate/index'; import IscsAfcOperate from './iscsAfcOperate/index';
import IscsAcsOperate from './iscsAcsOperate/index'; import IscsAcsOperate from './iscsAcsOperate/index';
import IscsNetOperate from './IscsNetOperate/index'; import IscsNetOperate from './IscsNetOperate/index';
import IscsAutomatic from './iscsAutomatic/index'; import IscsAutomatic from './iscsAutomatic/index';
import IscsCommunication from './iscsCommunication/index'; import IscsCommunication from './iscsCommunication/index';
import IscsFireAlarm from './iscsFireAlarm/index'; import IscsFireAlarm from './iscsFireAlarm/index';
@ -42,7 +45,6 @@ import IscsPowerMonitoring from './iscsPowerMonitoring/index';
import IscsSignalSystem from './iscsSignalSystem/index'; import IscsSignalSystem from './iscsSignalSystem/index';
import IscsPsd from './iscsPsd/index'; import IscsPsd from './iscsPsd/index';
import IscsEnvironment from './iscsEnvironment/index'; import IscsEnvironment from './iscsEnvironment/index';
import { saveIscsElement } from '@/api/iscs'; import { saveIscsElement } from '@/api/iscs';
export default { export default {
@ -72,7 +74,8 @@ export default {
height: this.$store.state.app.height - 60 height: this.$store.state.app.height - 60
}, },
widthLeft: Number(localStore.get('LeftWidth')) || 450, widthLeft: Number(localStore.get('LeftWidth')) || 450,
draftShow: false draftShow: false,
tableShow: false
}; };
}, },
computed:{ computed:{
@ -97,9 +100,12 @@ export default {
this.$refs.iscsPlate.show(mode, system, part); this.$refs.iscsPlate.show(mode, system, part);
this.$refs.iscsPlate.drawIscsInit(); this.$refs.iscsPlate.drawIscsInit();
}, },
clickRightBtn() { clickDraftBtn() {
this.draftShow = !this.draftShow; this.draftShow = !this.draftShow;
}, },
clickTableBtn() {
this.tableShow = !this.tableShow;
},
handleSave(data) { handleSave(data) {
const param = { const param = {
graphData: data, graphData: data,
@ -121,7 +127,17 @@ export default {
<style rel="stylesheet/scss" lang="scss" scoped> <style rel="stylesheet/scss" lang="scss" scoped>
@import "src/styles/mixin.scss"; @import "src/styles/mixin.scss";
.map-draft{ .map-view {
float: left;
width: 100%;
}
.mapPaint{
height: 100%;
overflow: hidden;
}
.right-card{
width: 470px; width: 470px;
height: 100%; height: 100%;
position: absolute; position: absolute;
@ -138,25 +154,29 @@ export default {
&.hide{ &.hide{
transform: translateX(0); transform: translateX(0);
} }
}
.map-view { .btn_draft_box{
float: left; position: absolute;
width: 60%; left: 0;
top: 50%;
padding: 8px 3px;
background: #fff;
z-index: 10;
transform: translateX(-22px);
cursor: pointer;
border-radius: 5px 0 0 5px;
}
.btn_table_box {
position: absolute;
left: 0;
top: calc(50% + 50px);
padding: 8px 3px;
background: #fff;
z-index: 10;
transform: translateX(-22px);
cursor: pointer;
border-radius: 5px 0 0 5px;
}
} }
.mapPaint{
height: 100%;
overflow: hidden;
}
.btn_left_box{
position: absolute;
left: 0;
top: 50%;
padding: 8px 3px;
background: #fff;
z-index: 10;
transform: translateX(-22px);
cursor: pointer;
border-radius: 5px 0 0 5px;
}
</style> </style>

26
src/views/iscs/iscsSystem/bottom.vue
View File

@ -1,26 +0,0 @@
<template>
<div class="bottom-box">
111
</div>
</template>
<script>
export default {
data() {
return {
mes: '1111'
};
}
};
</script>
<style lang="scss" scoped>
.bottom-box{
width: 100%;
height: 95px;
background-color: #ACACAC;
position: absolute;
bottom: 0;
left: 0;
}
</style>

3
src/views/iscs/iscsSystem/index.vue
View File

@ -14,7 +14,6 @@
<router-view /> <router-view />
</div> </div>
</div> </div>
<!-- <bottom /> -->
</div> </div>
</template> </template>
@ -23,7 +22,6 @@ import TopNav from './nav.vue';
import GroupNav from './groupNav.vue'; import GroupNav from './groupNav.vue';
import StationNav from './stationNav.vue'; import StationNav from './stationNav.vue';
import MenuBar from './menuBar.vue'; import MenuBar from './menuBar.vue';
// import bottom from './bottom.vue';
export default { export default {
components: { components: {
@ -31,7 +29,6 @@ export default {
GroupNav, GroupNav,
MenuBar, MenuBar,
StationNav StationNav
// bottom
}, },
data() { data() {
return { return {