增加绘图实例此操作界面
This commit is contained in:
lVAL
parent
c14e0fc4c0
commit
0feea5cb1a
@ -964,6 +964,7 @@ export const asyncRouter = [
|
||||
children: [
|
||||
{
|
||||
path:'design',
|
||||
redirect: '/iscs/design/edit',
|
||||
component: IscsDesign,
|
||||
meta: {
|
||||
i18n: 'router.iscsDraw',
|
||||
@ -976,26 +977,6 @@ export const asyncRouter = [
|
||||
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
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
|
||||
@ -924,7 +924,6 @@ export default {
|
||||
.uploadDemo {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
// float: right;
|
||||
padding: 9px 15px;
|
||||
margin-right: 3px;
|
||||
cursor: pointer;
|
||||
|
||||
@ -1,22 +1,22 @@
|
||||
<template>
|
||||
<div class="app-wrapper">
|
||||
<map-create ref="mapCreate" :line-code="lineCode" @refresh="refresh1" />
|
||||
<div class="examList" :style="{width: widthLeft+'px'}">
|
||||
<div class="left-card" :class="{'hide': viewShow}">
|
||||
<div class="btn_right_box" @click="clickLeftBtn"><i :class="viewShow?'el-icon-arrow-right':'el-icon-arrow-left'" /></div>
|
||||
<div class="examList" style="width:100%">
|
||||
<demon-list ref="demonList" @createMap="createMap" />
|
||||
</div>
|
||||
<drap-left :width-left="widthLeft" @drapWidth="drapWidth" />
|
||||
</div>
|
||||
<transition>
|
||||
<router-view />
|
||||
</transition>
|
||||
<context-menu />
|
||||
<map-create ref="mapCreate" :line-code="lineCode" @refresh="refresh" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import demonList from './demonList';
|
||||
import drapLeft from '@/views/components/drapLeft/index';
|
||||
import { launchFullscreen } from '@/utils/screen';
|
||||
import localStore from 'storejs';
|
||||
import { getSessionStorage, setSessionStorage } from '@/utils/auth';
|
||||
import MapCreate from './mapmanage/create';
|
||||
import ContextMenu from './contextMenu';
|
||||
@ -25,14 +25,14 @@ export default {
|
||||
name: 'DesignPlatform',
|
||||
components: {
|
||||
demonList,
|
||||
drapLeft,
|
||||
MapCreate,
|
||||
ContextMenu
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
widthLeft: Number(localStore.get('LeftWidth')) || 450,
|
||||
lineCode: ''
|
||||
lineCode: '',
|
||||
viewShow: false,
|
||||
widthLeft: 450
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
@ -41,9 +41,6 @@ export default {
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
widthLeft(val) {
|
||||
this.setMapResize(val);
|
||||
},
|
||||
'$store.state.app.windowSizeCount': function() {
|
||||
this.resize();
|
||||
}
|
||||
@ -57,31 +54,26 @@ export default {
|
||||
launchFullscreen();
|
||||
setSessionStorage('againEnter', true);
|
||||
}
|
||||
this.widthLeft = Number(localStore.get('LeftWidth'));
|
||||
},
|
||||
methods: {
|
||||
refresh() {
|
||||
this.$refs && this.$refs.demonList && this.$refs.demonList.loadInitData();
|
||||
},
|
||||
refresh1() {
|
||||
this.$refs.demonList.loadInitData();
|
||||
},
|
||||
createMap() {
|
||||
this.$refs.mapCreate.show();
|
||||
},
|
||||
drapWidth(width) {
|
||||
this.widthLeft = Number(width);
|
||||
},
|
||||
resize() {
|
||||
this.widthLeft = Number(localStore.get('LeftWidth')) || this.widthLeft;
|
||||
const width = this.$store.state.app.width - this.widthLeft;
|
||||
const width = this.$store.state.app.width;
|
||||
const height = this.$store.state.app.height - 90;
|
||||
this.$store.dispatch('config/resize', { width: width, height: height });
|
||||
},
|
||||
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;
|
||||
this.$store.dispatch('config/resize', { width: width, height: height });
|
||||
},
|
||||
clickLeftBtn() {
|
||||
this.viewShow = !this.viewShow;
|
||||
}
|
||||
}
|
||||
};
|
||||
@ -97,8 +89,40 @@ export default {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.left-card{
|
||||
width: 470px;
|
||||
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>
|
||||
|
||||
@ -4,8 +4,8 @@
|
||||
<div class="map-view">
|
||||
<iscs-plate ref="iscsPlate" @iscsChange="iscsChange" />
|
||||
</div>
|
||||
<div class="map-draft" :class="{'hide': draftShow}">
|
||||
<div class="btn_left_box" @click="clickRightBtn"><i :class="draftShow?'el-icon-arrow-right':'el-icon-arrow-left'" /></div>
|
||||
<div class="right-card" :class="{'hide': draftShow}">
|
||||
<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-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" />
|
||||
@ -21,6 +21,10 @@
|
||||
<iscs-environment v-else-if="iscsMode=='environment02'" ref="" @iscsChange="iscsChange" @handleSave="handleSave" /> <!-- 环境与设备监控系统 -->
|
||||
<iscs-psd v-else-if="iscsMode=='psdSystem02'" ref="" @iscsChange="iscsChange" @handleSave="handleSave" /> <!-- 屏蔽门系统 -->
|
||||
</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>
|
||||
</transition>
|
||||
</template>
|
||||
@ -34,7 +38,6 @@ import IscsCctvOperate from './iscsCctvOperate/index';
|
||||
import IscsAfcOperate from './iscsAfcOperate/index';
|
||||
import IscsAcsOperate from './iscsAcsOperate/index';
|
||||
import IscsNetOperate from './IscsNetOperate/index';
|
||||
|
||||
import IscsAutomatic from './iscsAutomatic/index';
|
||||
import IscsCommunication from './iscsCommunication/index';
|
||||
import IscsFireAlarm from './iscsFireAlarm/index';
|
||||
@ -42,7 +45,6 @@ import IscsPowerMonitoring from './iscsPowerMonitoring/index';
|
||||
import IscsSignalSystem from './iscsSignalSystem/index';
|
||||
import IscsPsd from './iscsPsd/index';
|
||||
import IscsEnvironment from './iscsEnvironment/index';
|
||||
|
||||
import { saveIscsElement } from '@/api/iscs';
|
||||
|
||||
export default {
|
||||
@ -72,7 +74,8 @@ export default {
|
||||
height: this.$store.state.app.height - 60
|
||||
},
|
||||
widthLeft: Number(localStore.get('LeftWidth')) || 450,
|
||||
draftShow: false
|
||||
draftShow: false,
|
||||
tableShow: false
|
||||
};
|
||||
},
|
||||
computed:{
|
||||
@ -97,9 +100,12 @@ export default {
|
||||
this.$refs.iscsPlate.show(mode, system, part);
|
||||
this.$refs.iscsPlate.drawIscsInit();
|
||||
},
|
||||
clickRightBtn() {
|
||||
clickDraftBtn() {
|
||||
this.draftShow = !this.draftShow;
|
||||
},
|
||||
clickTableBtn() {
|
||||
this.tableShow = !this.tableShow;
|
||||
},
|
||||
handleSave(data) {
|
||||
const param = {
|
||||
graphData: data,
|
||||
@ -121,7 +127,17 @@ export default {
|
||||
<style rel="stylesheet/scss" lang="scss" scoped>
|
||||
@import "src/styles/mixin.scss";
|
||||
|
||||
.map-draft{
|
||||
.map-view {
|
||||
float: left;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.mapPaint{
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.right-card{
|
||||
width: 470px;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
@ -138,17 +154,8 @@ export default {
|
||||
&.hide{
|
||||
transform: translateX(0);
|
||||
}
|
||||
}
|
||||
|
||||
.map-view {
|
||||
float: left;
|
||||
width: 60%;
|
||||
}
|
||||
.mapPaint{
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
.btn_left_box{
|
||||
.btn_draft_box{
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 50%;
|
||||
@ -159,4 +166,17 @@ export default {
|
||||
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;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -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>
|
||||
@ -14,7 +14,6 @@
|
||||
<router-view />
|
||||
</div>
|
||||
</div>
|
||||
<!-- <bottom /> -->
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -23,7 +22,6 @@ import TopNav from './nav.vue';
|
||||
import GroupNav from './groupNav.vue';
|
||||
import StationNav from './stationNav.vue';
|
||||
import MenuBar from './menuBar.vue';
|
||||
// import bottom from './bottom.vue';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
@ -31,7 +29,6 @@ export default {
|
||||
GroupNav,
|
||||
MenuBar,
|
||||
StationNav
|
||||
// bottom
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user