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; let BASE_API;
if (process.env.NODE_ENV === 'development') { if (process.env.NODE_ENV === 'development') {
// BASE_API = 'https://joylink.club/jlcloud'; // 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.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.41:9000'; // 张赛
// BASE_API = 'http://192.168.3.82:9000'; // 杜康 // BASE_API = 'http://192.168.3.82:9000'; // 杜康
// BASE_API = 'http://b29z135112.zicp.vip'; // 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" /> <div :id="canvasId" style="background: #000;" class="display_canvas" />
<progress-bar ref="progressBar" /> <progress-bar ref="progressBar" />
<!-- <zoom-box v-if="!showZoom && !isScreen" :scale-rate="dataZoom.scaleRate" @setShrink="setShrink" @setMagnify="setMagnify" /> --> <!-- <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" /> <show-mode v-show="isDesign" :draft-show="draftShow" :local-station-show="localStationShow" @setShowMode="setShowMode" />
<switch-station v-show="isDesign && (showMode === '03') && localStationShow" ref="switchStation" :concentration-station-list="concentrationStationList" @setShowStation="setShowStation" /> <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'}"> <div v-if="show && !isScreen" class="zoom-view" :style="{ width: width +'px'}">
<el-form :model="dataZoom" label-width="80px" size="mini" inline> <el-form :model="dataZoom" label-width="60px" size="mini" inline>
<el-form-item :label="$t(`global.offset`)"> <el-form-item label="偏 移:">
<el-input v-model="dataZoom.offsetX" :disabled="true" style="width: 95px" /> <el-input v-model="dataZoom.offsetX" :disabled="true" style="width: 95px" />
</el-form-item> </el-form-item>
<el-form-item> <el-form-item>
<el-input v-model="dataZoom.offsetY" :disabled="true" style="width: 95px" /> <el-input v-model="dataZoom.offsetY" :disabled="true" style="width: 95px" />
</el-form-item> </el-form-item>
<div style="display: inline-block"> <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-form-item label="x" label-width="12px">
<el-input ref="offsetX" v-model="offset.x" :disabled="true" style="width: 95px" /> <el-input ref="offsetX" v-model="offset.x" :disabled="true" style="width: 95px" />
</el-form-item> </el-form-item>
@ -23,7 +23,7 @@
<el-input v-model="offset.y" :disabled="true" style="width: 95px" /> <el-input v-model="offset.y" :disabled="true" style="width: 95px" />
</el-form-item> </el-form-item>
</div> </div>
<el-form-item :label="$t(`global.zoom`)" style="float: right"> <el-form-item label="缩 放:">
<el-input v-model="dataZoom.scaleRate" :disabled="true" /> <el-input v-model="dataZoom.scaleRate" :disabled="true" />
</el-form-item> </el-form-item>
</el-form> </el-form>
@ -52,6 +52,14 @@ export default {
ShowMode, ShowMode,
SwitchStation SwitchStation
}, },
props: {
draftShow: {
type: Boolean,
default() {
return false;
}
}
},
data() { data() {
return { return {
loading: true, loading: true,

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

@ -1,5 +1,5 @@
<template> <template>
<div class="zoom-box" :style="{top: offsetY+'px', right: offsetX+ 'px'}"> <div class="zoom-box" :style="{top: offsetY + 'px', right: offsetX + 'px'}">
<el-select v-model="swch" size="small" :placeholder="$t('display.schema.selectProduct')" @change="switchMode"> <el-select v-model="swch" size="small" :placeholder="$t('display.schema.selectProduct')" @change="switchMode">
<el-option v-for="item in swchList" :key="item.value" :label="item.name" :value="item.value" /> <el-option v-for="item in swchList" :key="item.value" :label="item.name" :value="item.value" />
</el-select> </el-select>
@ -14,6 +14,12 @@ export default {
default() { default() {
return false; return false;
} }
},
draftShow: {
type: Boolean,
default() {
return false;
}
} }
}, },
data() { data() {
@ -21,6 +27,7 @@ export default {
offsetY: 15, offsetY: 15,
offsetX: 150, offsetX: 150,
swch: '03', swch: '03',
rightWidth: 0,
swchList: [ swchList: [
{ value: '03', name: '现地' }, { value: '03', name: '现地' },
{ value: '02', name: '行调' }, { value: '02', name: '行调' },
@ -32,6 +39,14 @@ export default {
'$store.state.config.menuBarLoadedCount': function (val) { '$store.state.config.menuBarLoadedCount': function (val) {
this.setPosition(); this.setPosition();
}, },
'draftShow': function(flag) {
if (flag) {
this.rightWidth = 520;
} else {
this.rightWidth = 0;
}
this.switchMode(this.swch);
},
'$route' () { '$route' () {
this.setOffsetX(); this.setOffsetX();
}, },
@ -64,23 +79,23 @@ export default {
}, },
setOffsetX() { setOffsetX() {
if (this.$route.path.indexOf('mapPreviewNew') !== -1) { 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) { } 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) { switchMode(val) {
if (val === '03' && this.localStationShow) { if (val === '03' && this.localStationShow) {
if (this.$route.path.indexOf('mapPreviewNew') !== -1) { if (this.$route.path.indexOf('mapPreviewNew') !== -1) {
this.offsetX = 150; this.offsetX = 150 + this.rightWidth;
} else if (this.$route.path.indexOf('map/draw') !== -1) { } else if (this.$route.path.indexOf('map/draw') !== -1) {
this.offsetX = 270; this.offsetX = 270 + this.rightWidth;
} }
} else { } else {
if (this.$route.path.indexOf('mapPreviewNew') !== -1) { if (this.$route.path.indexOf('mapPreviewNew') !== -1) {
this.offsetX = 20; this.offsetX = 20 + this.rightWidth;
} else if (this.$route.path.indexOf('map/draw') !== -1) { } else if (this.$route.path.indexOf('map/draw') !== -1) {
this.offsetX = 140; this.offsetX = 140 + this.rightWidth;
} }
} }
this.$emit('setShowMode', val); this.$emit('setShowMode', val);

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

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

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

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