iscs新版绘图界面调整
This commit is contained in:
joylink_cuiweidong
parent
9277754f5e
commit
72fadaa866
@ -59,6 +59,9 @@ const IscsDesign = () => import('@/views/iscs/iscsDesign/index');
|
||||
const IscsConfig = () => import('@/views/iscs/iscsSystem/config/index');
|
||||
const IscsStationConfig = () => import('@/views/iscs/iscsSystem/stationConfig/index');
|
||||
|
||||
const IscsNewDesign = () => import('@/views/iscs_new/iscsDesign/index');
|
||||
const IscsNewDraw = () => import('@/views/iscs_new/iscsDraw/index');
|
||||
|
||||
const NewMapDraft = () => import('@/views/newMap/newMapdraft/index');
|
||||
const NewDesignPlatformUser = () => import('@/views/newMap/newDesignUser/index');
|
||||
|
||||
@ -1138,6 +1141,33 @@ export const asyncRouter = [
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
path: '/iscs_new',
|
||||
component: Layout,
|
||||
hidden: true,
|
||||
meta: {
|
||||
i18n: 'router.iscsSystem',
|
||||
roles: [admin]
|
||||
},
|
||||
children: [
|
||||
{
|
||||
path:'design',
|
||||
redirect: '/iscs/design/edit',
|
||||
component: IscsNewDesign,
|
||||
meta: {
|
||||
i18n: 'router.iscsDraw',
|
||||
roles: [admin]
|
||||
},
|
||||
children: [
|
||||
{
|
||||
path: 'edit',
|
||||
component: IscsNewDraw,
|
||||
hidden: true
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{ // iscs系统
|
||||
path: '/iscs',
|
||||
component: Layout,
|
||||
|
||||
128
src/views/iscs_new/iscsDesign/index.vue
Normal file
128
src/views/iscs_new/iscsDesign/index.vue
Normal file
@ -0,0 +1,128 @@
|
||||
<template>
|
||||
<div class="app-wrapper">
|
||||
<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>
|
||||
</div>
|
||||
<transition>
|
||||
<router-view />
|
||||
</transition>
|
||||
<!-- <context-menu /> -->
|
||||
<!-- <map-create ref="mapCreate" :line-code="lineCode" @refresh="refresh" /> -->
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// import demonList from './demonList';
|
||||
import { launchFullscreen } from '@/utils/screen';
|
||||
import { getSessionStorage, setSessionStorage } from '@/utils/auth';
|
||||
// import MapCreate from './mapmanage/create';
|
||||
// import ContextMenu from './contextMenu';
|
||||
|
||||
export default {
|
||||
name: 'DesignPlatform',
|
||||
components: {
|
||||
// demonList,
|
||||
// MapCreate,
|
||||
// ContextMenu
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
lineCode: '',
|
||||
viewShow: false,
|
||||
widthLeft: 450
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
width() {
|
||||
return this.$store.state.app.width;
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
'$store.state.app.windowSizeCount': function() {
|
||||
this.resize();
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.resize();
|
||||
},
|
||||
mounted() {
|
||||
const againEnter = getSessionStorage('againEnter') || null;
|
||||
if (!againEnter) {
|
||||
launchFullscreen();
|
||||
setSessionStorage('againEnter', true);
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
refresh() {
|
||||
this.$refs && this.$refs.demonList && this.$refs.demonList.loadInitData();
|
||||
},
|
||||
// createMap() {
|
||||
// this.$refs.mapCreate.show();
|
||||
// },
|
||||
resize() {
|
||||
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;
|
||||
const height = this.$store.state.app.height - 90;
|
||||
this.$store.dispatch('config/resize', { width: width, height: height });
|
||||
},
|
||||
clickLeftBtn() {
|
||||
this.viewShow = !this.viewShow;
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style rel="stylesheet/scss" lang="scss" scoped>
|
||||
@import "src/styles/mixin.scss";
|
||||
|
||||
.app-wrapper {
|
||||
@include clearfix;
|
||||
position: relative;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
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>
|
||||
191
src/views/iscs_new/iscsDraw/index.vue
Normal file
191
src/views/iscs_new/iscsDraw/index.vue
Normal file
@ -0,0 +1,191 @@
|
||||
<template>
|
||||
<transition name="el-zoom-in-center">
|
||||
<div class="mapPaint">
|
||||
<div class="map-view">
|
||||
<iscs-plate ref="iscsPlate" @iscsChange="iscsChange" />
|
||||
</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" /> -->
|
||||
<!-- <iscs-cctv-operate v-else-if="iscsMode==='cctv'" ref="iscsCctvOperate" @iscsChange="iscsChange" @handleSave="handleSave" /> -->
|
||||
<!-- <iscs-afc-operate v-else-if="iscsMode==='afc'" ref="iscsAfcOperate" @iscsChange="iscsChange" @handleSave="handleSave" /> -->
|
||||
<!-- <iscs-acs-operate v-else-if="iscsMode==='acs'" ref="iscsAcsOperate" @iscsChange="iscsChange" @handleSave="handleSave" /> -->
|
||||
<!-- <iscs-net-operate v-else-if="iscsMode==='netState'" ref="iscsNetOperate" @iscsChange="iscsChange" @handleSave="handleSave" /> -->
|
||||
<!-- <iscs-automatic v-else-if="iscsMode==='afc02'" ref="" @iscsChange="iscsChange" @handleSave="handleSave" /> -->
|
||||
<!-- 自动售检票/门禁 -->
|
||||
<!-- <iscs-communication v-else-if="iscsMode==='communication02'" ref="" @iscsChange="iscsChange" @handleSave="handleSave" /> -->
|
||||
<!-- 通信 -->
|
||||
<!-- <iscs-fire-alarm v-else-if="iscsMode==='fas02'" ref="" @iscsChange="iscsChange" @handleSave="handleSave" /> -->
|
||||
<!-- 火灾报警系统 -->
|
||||
<!-- <iscs-power-monitoring v-else-if="iscsMode==='powerMonitoring02'" ref="" @iscsChange="iscsChange" @handleSave="handleSave" /> -->
|
||||
<!-- 电力监控系统 -->
|
||||
<!-- <iscs-signal-system v-else-if="iscsMode==='signalSystem02'" 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" /> -->
|
||||
<!-- 屏蔽门系统 -->
|
||||
</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>
|
||||
<!-- <group-card @handleSave="handleSave" /> -->
|
||||
</div>
|
||||
</div>
|
||||
</transition>
|
||||
</template>
|
||||
<script>
|
||||
import localStore from 'storejs';
|
||||
import IscsPlate from '@/views/iscsSystem/index';
|
||||
// import IscsOperate from './iscsOperate/index';
|
||||
// import IscsBasOperate from './iscsBasOperate/index';
|
||||
// import IscsPsdOperate from './iscsPsdOperate/index';
|
||||
// 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';
|
||||
// import IscsPowerMonitoring from './iscsPowerMonitoring/index';
|
||||
// import IscsSignalSystem from './iscsSignalSystem/index';
|
||||
// import IscsPsd from './iscsPsd/index';
|
||||
// import IscsEnvironment from './iscsEnvironment/index';
|
||||
// import GroupCard from './group/card.vue';
|
||||
import { saveIscsElement } from '@/api/iscs';
|
||||
|
||||
export default {
|
||||
name: 'IscsView',
|
||||
components: {
|
||||
IscsPlate
|
||||
// IscsOperate,
|
||||
// IscsBasOperate,
|
||||
// IscsPsdOperate,
|
||||
// IscsCctvOperate,
|
||||
// IscsAfcOperate,
|
||||
// IscsAcsOperate,
|
||||
// IscsNetOperate,
|
||||
// IscsAutomatic,
|
||||
// IscsCommunication,
|
||||
// IscsFireAlarm,
|
||||
// IscsPowerMonitoring,
|
||||
// IscsSignalSystem,
|
||||
// IscsPsd,
|
||||
// IscsEnvironment,
|
||||
// GroupCard
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
size: {
|
||||
width: this.$store.state.app.width - 521,
|
||||
height: this.$store.state.app.height - 60
|
||||
},
|
||||
widthLeft: Number(localStore.get('LeftWidth')) || 450,
|
||||
draftShow: false,
|
||||
tableShow: false
|
||||
};
|
||||
},
|
||||
computed:{
|
||||
iscsMode() {
|
||||
return this.$route.query.mode;
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
$route(val) {
|
||||
this.iscsChange(this.$route.query.mode, this.$route.query.system, this.$route.query.part);
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.$refs.iscsPlate.show(this.$route.query.mode, this.$route.query.system, this.$route.query.part);
|
||||
this.$refs.iscsPlate.drawIscsInit();
|
||||
},
|
||||
beforeDestroy() {
|
||||
|
||||
},
|
||||
methods: {
|
||||
iscsChange(mode, system, part) {
|
||||
this.$refs.iscsPlate.show(mode, system, part);
|
||||
this.$refs.iscsPlate.drawIscsInit();
|
||||
},
|
||||
clickDraftBtn() {
|
||||
this.draftShow = !this.draftShow;
|
||||
},
|
||||
clickTableBtn() {
|
||||
this.tableShow = !this.tableShow;
|
||||
},
|
||||
handleSave(data) {
|
||||
const param = {
|
||||
graphData: data,
|
||||
mapId: this.$route.query.mapId,
|
||||
system: this.$route.query.system,
|
||||
totalSystem: this.$route.query.mode,
|
||||
userInterface: this.$route.query.part
|
||||
};
|
||||
saveIscsElement(param).then(resp => {
|
||||
this.$message.success('ISCS数据保存成功！');
|
||||
}).catch(() => {
|
||||
this.$message.error('ISCS数据保存异常！');
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style rel="stylesheet/scss" lang="scss" scoped>
|
||||
@import "src/styles/mixin.scss";
|
||||
|
||||
.map-view {
|
||||
float: left;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.mapPaint{
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.right-card{
|
||||
width: 470px;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
transform: translateX(470px);
|
||||
transition: all 0.5s;
|
||||
background: #fff;
|
||||
z-index: 9;
|
||||
/deep/{
|
||||
.v-modal{
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
&.hide{
|
||||
transform: translateX(0);
|
||||
}
|
||||
|
||||
.btn_draft_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;
|
||||
box-shadow: -2px 0px 2px #000000;
|
||||
}
|
||||
|
||||
.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;
|
||||
box-shadow: -2px 0px 2px #000000;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue
Block a user