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:
zyy 2020-08-03 17:30:01 +08:00
parent 0f03eee53f
commit d98e933e79
6 changed files with 121 additions and 63 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/utils/baseUrl.js
View File

@ -2,9 +2,9 @@ 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.6:9000'; // 旭强
// BASE_API = 'http://192.168.3.41:9000'; // 张赛
// BASE_API = 'http://192.168.3.82:9000'; // 杜康
// BASE_API = 'http://b29z135112.zicp.vip';

20
src/views/newMap/jlmapNew/index.vue
View File

@ -4,18 +4,18 @@
<div :id="canvasId" style="background: #000;" class="display_canvas" />
<progress-bar ref="progressBar" />
<!-- <zoom-box v-if="!showZoom && !isScreen" :scale-rate="dataZoom.scaleRate" @setShrink="setShrink" @setMagnify="setMagnify" /> -->
<show-mode v-show="isDesign" :local-station-show="localStationShow" @setShowMode="setShowMode" />
<switch-station v-show="isDesign && (showMode === '03') && localStationShow" ref="switchStation" :concentration-station-list="concentrationStationList" @setShowStation="setShowStation" />
<show-mode v-show="isDesign" :draft-show="draftShow" :local-station-show="localStationShow" @setShowMode="setShowMode" />
<switch-station v-show="isDesign && (showMode === '03') && localStationShow" ref="switchStation" :draft-show="draftShow" :concentration-station-list="concentrationStationList" @setShowStation="setShowStation" />
<div v-if="show && !isScreen" class="zoom-view" :style="{ width: width +'px'}">
<el-form :model="dataZoom" label-width="80px" size="mini" inline>
<el-form-item :label="$t(`global.offset`)">
<el-form :model="dataZoom" label-width="60px" size="mini" inline>
<el-form-item label="偏 移:">
<el-input v-model="dataZoom.offsetX" :disabled="true" style="width: 95px" />
</el-form-item>
<el-form-item>
<el-input v-model="dataZoom.offsetY" :disabled="true" style="width: 95px" />
</el-form-item>
<div style="display: inline-block">
<span class="title" style="">鼠标偏移:</span>
<span class="title" style="width: 90px; height: 28px; line-height: 30px;">鼠标偏移:</span>
<el-form-item label="x" label-width="12px">
<el-input ref="offsetX" v-model="offset.x" :disabled="true" style="width: 95px" />
</el-form-item>
@ -23,7 +23,7 @@
<el-input v-model="offset.y" :disabled="true" style="width: 95px" />
</el-form-item>
</div>
<el-form-item :label="$t(`global.zoom`)" style="float: right">
<el-form-item label="缩 放:">
<el-input v-model="dataZoom.scaleRate" :disabled="true" />
</el-form-item>
</el-form>
@ -52,6 +52,14 @@ export default {
ShowMode,
SwitchStation
},
props: {
draftShow: {
type: Boolean,
default() {
return false;
}
}
},
data() {
return {
loading: true,

27
src/views/newMap/jlmapNew/pendant/showMode.vue
View File

@ -14,6 +14,12 @@ export default {
default() {
return false;
}
},
draftShow: {
type: Boolean,
default() {
return false;
}
}
},
data() {
@ -21,6 +27,7 @@ export default {
offsetY: 15,
offsetX: 150,
swch: '03',
rightWidth: 0,
swchList: [
{ value: '03', name: '现地' },
{ value: '02', name: '行调' },
@ -32,6 +39,14 @@ export default {
'$store.state.config.menuBarLoadedCount': function (val) {
this.setPosition();
},
'draftShow': function(flag) {
if (flag) {
this.rightWidth = 520;
} else {
this.rightWidth = 0;
}
this.switchMode(this.swch);
},
'$route' () {
this.setOffsetX();
},
@ -64,23 +79,23 @@ export default {
},
setOffsetX() {
if (this.$route.path.indexOf('mapPreviewNew') !== -1) {
this.offsetX = this.localStationShow ? 150 : 20;
this.offsetX = (this.localStationShow ? 150 : 20) + this.rightWidth;
} else if (this.$route.path.indexOf('map/draw') !== -1) {
this.offsetX = this.localStationShow ? 270 : 140;
this.offsetX = (this.localStationShow ? 270 : 140) + this.rightWidth;
}
},
switchMode(val) {
if (val === '03' && this.localStationShow) {
if (this.$route.path.indexOf('mapPreviewNew') !== -1) {
this.offsetX = 150;
this.offsetX = 150 + this.rightWidth;
} else if (this.$route.path.indexOf('map/draw') !== -1) {
this.offsetX = 270;
this.offsetX = 270 + this.rightWidth;
}
} else {
if (this.$route.path.indexOf('mapPreviewNew') !== -1) {
this.offsetX = 20;
this.offsetX = 20 + this.rightWidth;
} else if (this.$route.path.indexOf('map/draw') !== -1) {
this.offsetX = 140;
this.offsetX = 140 + this.rightWidth;
}
}
this.$emit('setShowMode', val);

19
src/views/newMap/jlmapNew/pendant/switchStation.vue
View File

@ -14,6 +14,12 @@ export default {
default() {
return [];
}
},
draftShow: {
type: Boolean,
default() {
return false;
}
}
},
data() {
@ -21,6 +27,7 @@ export default {
offsetY: 15,
offsetX: 20,
showStation: '',
rightWidth: 0,
stationList: [
{ value: '', name: '全部' }
]
@ -33,6 +40,14 @@ export default {
'$route' () {
this.setOffsetX();
},
'draftShow': function(flag) {
if (flag) {
this.rightWidth = 520;
} else {
this.rightWidth = 0;
}
this.setOffsetX();
},
concentrationStationList(val) {
if (val.length) {
this.stationList = [...val];
@ -67,9 +82,9 @@ export default {
},
setOffsetX() {
if (this.$route.path.indexOf('mapPreviewNew') !== -1) {
this.offsetX = 20;
this.offsetX = 20 + this.rightWidth;
} else if (this.$route.path.indexOf('map/draw') !== -1) {
this.offsetX = 140;
this.offsetX = 140 + this.rightWidth;
}
},
switchMode(val) {

68
src/views/newMap/newMapdraft/index.vue
View File

@ -3,7 +3,7 @@
<div class="mapPaint">
<div v-show="maskOpen" class="mask" />
<div class="map-view">
<div class="operation_box">
<div class="operation_box" :class="{'rightShow': draftShow}">
<el-button-group>
<el-button size="small" :disabled="!stepData.length" @click="revocation">撤销</el-button>
<el-button size="small" :disabled="!recoverStepData.length" @click="recover">恢复</el-button>
@ -11,12 +11,13 @@
</div>
<div class="operation_box back_box">
<el-button size="small" @click="backRoute">返回</el-button>
<el-button size="small" @click="updateObjAxis">更新坐标</el-button>
<el-button size="small" style="margin-left: 5px;" @click="updateObjAxis">更新坐标</el-button>
</div>
<jlmap-visual ref="jlmapVisual" @onSelect="clickEvent" @onMenu="onContextmenu" />
<jlmap-visual ref="jlmapVisual" :draft-show="draftShow" @onSelect="clickEvent" @onMenu="onContextmenu" />
</div>
<div class="map-draft">
<div v-show="viewDraft === 'draft'" class="box">
<div class="map-draft" :class="{'hide': draftShow}">
<div class="btn_left_box" @click="clickRightBtn"><i class="el-icon-arrow-left" /></div>
<div v-show="viewDraft == 'draft'" class="box">
<map-operate
ref="mapOperate"
:map-info="mapInfo"
@ -40,10 +41,7 @@
@showMap="showMap"
/>
</div>
<config-map
ref="configMap"
@handleSelectPhysicalView="handleSelectPhysicalView"
/>
<config-map ref="configMap" @handleSelectPhysicalView="handleSelectPhysicalView" />
<ci-config ref="ciConfig" />
</div>
<pop-menu ref="popMenu" :menu="menu" />
@ -86,6 +84,7 @@ export default {
mapInfo: { name: this.$t('map.pleaseSelectMap') },
timeDemon: null,
oldDevice: null,
draftShow: false,
size: {
width: document.documentElement.clientWidth - 521,
height: document.documentElement.clientHeight - 90
@ -152,6 +151,9 @@ export default {
}
},
methods: {
clickRightBtn() {
this.draftShow = !this.draftShow;
},
getMapOrigin() {
const dataZoom = this.$store.state.map.dataZoom;
if (dataZoom && dataZoom.offsetX) {
@ -237,7 +239,9 @@ export default {
},
setWindowSize() {
this.$nextTick(() => {
const width = this.$store.state.app.width - 521;
// const width = this.$store.state.app.width - 521;
// const height = this.$store.state.app.height - 90;
const width = this.$store.state.app.width;
const height = this.$store.state.app.height - 90;
this.$store.dispatch('config/resize', { width, height });
});
@ -641,20 +645,27 @@ export default {
right: 20px;
top: 15px;
z-index: 9;
&.rightShow{
right: 540px;
}
}
.back_box{
left: 150px;
left: 10px;
display: inline-block;
width: 180px;
}
.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;
}
.map-draft{
/deep/{
.v-modal{
opacity: 0;
}
}
}
.box{
height: 100%;
}
@ -667,18 +678,27 @@ export default {
.map-view {
float: left;
width: calc(100% - 520px);
width: 100%;
position: relative;
}
.map-draft {
float: right;
width: 520px;
height: 100%;
// /deep/ .el-scrollbar__view {
// width: 510px !important;
// height: calc(100% - 40px);
// }
position: absolute;
right: 0;
transform: translateX(520px);
transition: all 0.5s;
background: #fff;
z-index: 9;
/deep/{
.v-modal{
opacity: 0;
}
}
&.hide{
transform: translateX(0);
}
}
.physical-view {