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

调整ibp绘制地图

Browse Source
This commit is contained in:
joylink_zyy 2020-03-13 21:17:20 +08:00
parent 6576f3c559
commit 0e570584bc
4 changed files with 153 additions and 80 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/utils/baseUrl.js
View File

@ -3,10 +3,10 @@ export function getBaseUrl() {
let BASE_API;
if (process.env.NODE_ENV === 'development') {
// BASE_API = 'https://joylink.club/jlcloud';
// BASE_API = 'https://test.joylink.club/jlcloud';
BASE_API = 'https://test.joylink.club/jlcloud';
// BASE_API = 'http://192.168.3.5:9000'; // 袁琪
// BASE_API = 'http://192.168.3.6:9000'; // 旭强
BASE_API = 'http://192.168.3.41:9000'; // 张赛
// BASE_API = 'http://192.168.3.41:9000'; // 张赛
// BASE_API = 'http://192.168.3.82:9000'; // 杜康
// BASE_API = 'http://b29z135112.zicp.vip';
// BASE_API = 'http://2925963m2a.zicp.vip'; // 杜康

21
src/views/ibpsystem/index.vue
View File

@ -1,6 +1,6 @@
<template>
<div>
<div :id="ibpId" v-loading="loading" :style="{ width: this.canvasWidth +'px', height: this.canvasHeight +'px',background:'#000' }" class="ibp-canvas" />
<div :id="ibpId" v-loading="loading" :style="{ width: canvasWidth+'px', height: canvasHeight +'px',background:'#000' }" class="ibp-canvas" />
<el-button v-if="showBackButton" class="ibp-button" type="primary" @click="back">{{ $t('global.back') }}</el-button>
</div>
</template>
@ -58,6 +58,9 @@ export default {
]),
ibpId() {
return ['ibp', (Math.random().toFixed(5)) * 100000].join('_');
},
width() {
return this.canvasWidth - 200;
}
},
watch: {
@ -198,18 +201,14 @@ export default {
this.$ibp.setClockStart(started);
},
reSize() {
this.$nextTick(() => {
this.width = this.$store.state.config.width;
this.height = this.$store.state.config.height;
this.$ibp && this.$ibp.resize({ width: this.width, height: this.height });
});
this.width = this.$store.state.config.width;
this.height = this.$store.state.config.height;
this.$ibp && this.$ibp.resize({ width: this.width, height: this.height });
},
setWindowSize() {
this.$nextTick(() => {
const width = this.size ? this.size.width : this.$store.state.app.width;
const height = this.size ? this.size.height : this.$store.state.app.height;
this.$store.dispatch('config/resize', { width: width, height: height });
});
const width = this.size ? this.size.width : this.$store.state.app.width;
const height = this.size ? this.size.height : this.$store.state.app.height;
this.$store.dispatch('config/resize', { width: width, height: height });
},
back() {
this.group = this.$route.query.group;

199
src/views/system/ibpDraw/ibpOperate/index.vue
View File

@ -1,141 +1,159 @@
<template>
<transition name="el-zoom-in-center">
<div class="map-control">
<el-card type="border-card">
<div slot="header" class="clearfix">
<span>{{ $t('ibp.stationName') }}</span>
<el-select v-model="stationCode" :placeholder="this.$t('rules.selectStation')" @change="changeStationCode">
<el-option
v-for="item in stationOptions"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
<el-button
type="text"
style="float: right; padding: 3px 0; margin-right: 5px;"
@click="handleSave"
>{{ $t('ibp.save') }}</el-button>
</div>
<el-tabs v-model="enabledTab" class="mapEdit" type="card" @tab-click="handleTabClick">
<el-tab-pane :label="this.$t('ibp.background')" name="Background">
<div class="clearfix">
<span style="padding-top: 5px;">{{ $t('ibp.stationName') }}</span>
<el-select v-model="stationCode" :placeholder="this.$t('rules.selectStation')" @change="changeStationCode" style="padding-top: 5px;">
<el-option
v-for="item in stationOptions"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
<el-button type="text" style="float: right; padding: 15px 0; margin-right: 5px;" @click="handleSave" >{{ $t('ibp.save') }}</el-button>
</div>
<el-tabs v-model="enabledTab" class="ibpEdit" type="card" @tab-click="handleTabClick">
<el-tab-pane :label="this.$t('ibp.background')" name="Background">
<el-scrollbar wrap-class="scrollbar-wrapper" :style="{ height: height+'px' }">
<ibp-bg
ref="background"
style="width:90%"
@updateBg="createDataModel"
/>
</el-tab-pane>
<el-tab-pane :label="this.$t('ibp.line')" name="IbpLine">
</el-scrollbar>
</el-tab-pane>
<el-tab-pane :label="this.$t('ibp.line')" name="IbpLine">
<el-scrollbar wrap-class="scrollbar-wrapper" :style="{ height: height+'px' }">
<ibp-line
ref="ibpline"
style="width:90%"
@createLine="createDataModel"
@deleteDataModel="deleteDataModel"
/>
</el-tab-pane>
<el-tab-pane :label="this.$t('ibp.text')" name="IbpText">
<el-scrollbar wrap-class="scrollbar-wrapper" :style="{ height: height+'px' }">
<ibp-text
ref="ibptext"
style="width:90%"
@createText="createDataModel"
@deleteDataModel="deleteDataModel"
/>
</el-scrollbar>
</el-tab-pane>
<el-tab-pane :label="this.$t('ibp.rect')" name="TipBox">
<el-scrollbar wrap-class="scrollbar-wrapper" :style="{ height: height+'px' }">
<ibp-tip-box
ref="tipbox"
style="width:90%"
@createTipBox="createDataModel"
@deleteDataModel="deleteDataModel"
/>
</el-scrollbar>
</el-tab-pane>
<el-tab-pane :label="this.$t('ibp.button')" name="SquareButton">
</el-scrollbar>
</el-tab-pane>
<el-tab-pane :label="this.$t('ibp.text')" name="IbpText">
<el-scrollbar wrap-class="scrollbar-wrapper" :style="{ height: height+'px' }">
<ibp-text
ref="ibptext"
style="width:90%"
@createText="createDataModel"
@deleteDataModel="deleteDataModel"
/>
</el-scrollbar>
</el-tab-pane>
<el-tab-pane :label="this.$t('ibp.rect')" name="TipBox">
<el-scrollbar wrap-class="scrollbar-wrapper" :style="{ height: height+'px' }">
<ibp-tip-box
ref="tipbox"
style="width:90%"
@createTipBox="createDataModel"
@deleteDataModel="deleteDataModel"
/>
</el-scrollbar>
</el-tab-pane>
<el-tab-pane :label="this.$t('ibp.button')" name="SquareButton">
<el-scrollbar wrap-class="scrollbar-wrapper" :style="{ height: height+'px' }">
<ibp-button
ref="squarebutton"
style="width:90%"
@createButton="createDataModel"
@deleteDataModel="deleteDataModel"
/>
</el-tab-pane>
<el-tab-pane :label="this.$t('ibp.circularLamp')" name="CircularLamp">
</el-scrollbar>
</el-tab-pane>
<el-tab-pane :label="this.$t('ibp.circularLamp')" name="CircularLamp">
<el-scrollbar wrap-class="scrollbar-wrapper" :style="{ height: height+'px' }">
<ibp-lamp
ref="circularlamp"
style="width:90%"
@createLamp="createDataModel"
@deleteDataModel="deleteDataModel"
/>
</el-tab-pane>
<el-tab-pane :label="this.$t('ibp.arrow')" name="Arrow">
</el-scrollbar>
</el-tab-pane>
<el-tab-pane :label="this.$t('ibp.arrow')" name="Arrow">
<el-scrollbar wrap-class="scrollbar-wrapper" :style="{ height: height+'px' }">
<ibp-arrow
ref="arrow"
style="width:90%"
@createArrow="createDataModel"
@deleteDataModel="deleteDataModel"
/>
</el-tab-pane>
<el-tab-pane :label="this.$t('ibp.escalatorFrame')" name="AppendageBox">
</el-scrollbar>
</el-tab-pane>
<el-tab-pane :label="this.$t('ibp.escalatorFrame')" name="AppendageBox">
<el-scrollbar wrap-class="scrollbar-wrapper" :style="{ height: height+'px' }">
<ibp-appendage-box
ref="appendagebox"
style="width:90%"
@createAppendageBox="createDataModel"
@deleteDataModel="deleteDataModel"
/>
</el-tab-pane>
<el-tab-pane :label="this.$t('ibp.alarm')" name="Alarm">
</el-scrollbar>
</el-tab-pane>
<el-tab-pane :label="this.$t('ibp.alarm')" name="Alarm">
<el-scrollbar wrap-class="scrollbar-wrapper" :style="{ height: height+'px' }">
<ibp-alarm
ref="alarm"
style="width:90%"
@createAlarm="createDataModel"
@deleteDataModel="deleteDataModel"
/>
</el-tab-pane>
<el-tab-pane :label="this.$t('ibp.telephoneTerminal')" name="TeleTerminal">
</el-scrollbar>
</el-tab-pane>
<el-tab-pane :label="this.$t('ibp.telephoneTerminal')" name="TeleTerminal">
<el-scrollbar wrap-class="scrollbar-wrapper" :style="{ height: height+'px' }">
<ibp-telephone-terminal
ref="teleTerminal"
style="width:90%"
@createTeleTerminal="createDataModel"
@deleteDataModel="deleteDataModel"
/>
</el-tab-pane>
<el-tab-pane :label="this.$t('ibp.escalator')" name="Elevator">
</el-scrollbar>
</el-tab-pane>
<el-tab-pane :label="this.$t('ibp.escalator')" name="Elevator">
<el-scrollbar wrap-class="scrollbar-wrapper" :style="{ height: height+'px' }">
<ibp-elevator
ref="elevator"
style="width:90%"
@createElevator="createDataModel"
@deleteDataModel="deleteDataModel"
/>
</el-tab-pane>
<el-tab-pane :label="this.$t('ibp.key')" name="Key">
</el-scrollbar>
</el-tab-pane>
<el-tab-pane :label="this.$t('ibp.key')" name="Key">
<el-scrollbar wrap-class="scrollbar-wrapper" :style="{ height: height+'px' }">
<ibp-key
ref="key"
style="width:90%"
@createKey="createDataModel"
@deleteDataModel="deleteDataModel"
/>
</el-tab-pane>
<el-tab-pane :label="this.$t('ibp.digitalClock')" name="Clock">
</el-scrollbar>
</el-tab-pane>
<el-tab-pane :label="this.$t('ibp.digitalClock')" name="Clock">
<el-scrollbar wrap-class="scrollbar-wrapper" :style="{ height: height+'px' }">
<ibp-clock
ref="clock"
style="width:90%"
@createClock="createDataModel"
@deleteDataModel="deleteDataModel"
/>
</el-tab-pane>
<el-tab-pane :label="this.$t('ibp.rotateTip')" name="RotateTip">
</el-scrollbar>
</el-tab-pane>
<el-tab-pane :label="this.$t('ibp.rotateTip')" name="RotateTip">
<el-scrollbar wrap-class="scrollbar-wrapper" :style="{ height: height+'px' }">
<ibp-rotate-tip
ref="rotateTip"
style="width:90%"
@createRotateTip="createDataModel"
@deleteDataModel="deleteDataModel"
/>
</el-tab-pane>
</el-tabs>
</el-card>
</el-scrollbar>
</el-tab-pane>
</el-tabs>
</div>
</transition>
</template>
@ -254,5 +272,58 @@ export default {
.map-control {
float: right;
width: 100%;
height: 100%;
}
.clearfix{
height: 50px;
padding: 0 22px;
}
.ibpEdit{
height: calc(100% - 50px);
}
/deep/ {
.ibpEdit .el-tabs__nav-wrap.is-scrollable {
padding: 0 20px;
}
.ibpEdit .el-tabs__header{
margin: 0;
}
.ibpEdit .el-tabs__header .el-tabs__item.is-active {
border-bottom-color: #f5f7fa;
background: #f5f7fa;
}
.ibpEdit .el-tabs__active-bar{
background: transparent;
}
.ibpEdit .el-tabs__content {
height: calc(100% - 56px);
padding-top: 15px;
// overflow-y: scroll;
}
.card .el-tabs__nav .el-tabs__item.is-active {
border-bottom: 2px solid #E4E7ED;
background: #409eff;
color: #fff;
}
.ibpEdit .el-tabs__nav-prev {
width: 20px;
height: 41px;
display: flex;
justify-content: center;
align-items: center;
box-shadow: 1px 1px 4px #ccc;
}
.ibpEdit .el-tabs__nav-next {
width: 20px;
height: 41px;
display: flex;
justify-content: center;
align-items: center;
box-shadow: 1px 1px 4px #ccc;
}
}
</style>

9
src/views/system/ibpDraw/index.vue
View File

@ -13,6 +13,7 @@
<script>
import IbpPlate from '@/views/ibpsystem/index';
import IbpOperate from './ibpOperate/index';
import localStore from 'storejs';
export default {
name: 'IbpView',
@ -22,19 +23,20 @@ export default {
},
data() {
return {
widthLeft: Number(localStore.get('LeftWidth')) || 450,
size: {
width: this.$store.state.app.width - 521,
width: this.$store.state.app.width - 521 - Number(localStore.get('LeftWidth')) || 450,
height: this.$store.state.app.height - 60
}
};
},
watch: {
'$store.state.app.windowSizeCount': function() {
this.$store.dispatch('config/resize', { width: this.$store.state.app.width - 521, height: this.$store.state.app.height - 60 });
this.$store.dispatch('config/resize', { width: this.$store.state.app.width - 521 - this.widthLeft, height: this.$store.state.app.height - 60 });
}
},
created() {
this.$store.dispatch('config/resize', { width: this.$store.state.app.width - 521, height: this.$store.state.app.height - 60 });
this.$store.dispatch('config/resize', { width: this.$store.state.app.width - 521 - this.widthLeft, height: this.$store.state.app.height - 60 });
},
mounted() {
this.$refs.ibpPlate.show();
@ -73,6 +75,7 @@ export default {
.map-draft {
float: right;
width: 520px;
height: 100%;
// /deep/ .el-scrollbar__view {
// width: 510px !important;