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

desc: 调整高度自适应， 调整地图绘制创建区段，道岔逻辑优化

Browse Source
This commit is contained in:
zyy 2019-10-28 17:51:59 +08:00
parent ab9d300e2e
commit 178e49187d
14 changed files with 165 additions and 134 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/i18n/langs/en/tip.js
View File

@ -205,5 +205,6 @@ export default {
publishTheCourseHint: 'This operation will publish the course. Are you sure?',
rejectedCourseReleaseApplicationSuccessful: 'Rejected course release application successful!',
rejectedCourseReleaseApplicationFailed: 'Rejected course release application failed!',
duplicatePlanFailedTips: 'The interval needs to be more than 30 seconds or the times is more than 1'
duplicatePlanFailedTips: 'The interval needs to be more than 30 seconds or the times is more than 1',
createSwitchPortion: 'The relevant turnout is not formed'
};

3
src/i18n/langs/zh/tip.js
View File

@ -205,5 +205,6 @@ export default {
publishTheCourseHint: '此操作将发布课程，是否确定？',
rejectedCourseReleaseApplicationSuccessful: '驳回课程发布申请成功！',
rejectedCourseReleaseApplicationFailed: '驳回课程发布申请失败！',
duplicatePlanFailedTips: '间隔时间需要大于30秒或次数大于1'
duplicatePlanFailedTips: '间隔时间需要大于30秒或次数大于1',
createSwitchPortion: '相关道岔未生成'
};

17
src/layout/components/AppMain.vue
View File

@ -1,17 +0,0 @@
<template>
<section class="app-main">
<el-scrollbar wrap-class="scrollbar-wrapper">
<transition name="fade" mode="out-in">
<router-view />
</transition>
</el-scrollbar>
</section>
</template>
<script>
export default {
name: 'AppMain',
computed: {
}
};
</script>

2
src/layout/components/index.js
View File

@ -1,3 +1,3 @@
export { default as Navbar } from './Navbar';
export { default as Sidebar } from './Sidebar';
export { default as AppMain } from './AppMain';
// export { default as AppMain } from './AppMain';

61
src/layout/index.vue
View File

@ -2,13 +2,12 @@
<div class="app-wrapper" :class="classObj">
<div class="main-container">
<navbar />
<!-- <app-main :style="{width: width+'px', height: height+'px'}" /> -->
<section class="app-main" :style="{height: height+'px'}">
<el-scrollbar wrap-class="scrollbar-wrapper app_scrollbar_box">
<transition name="fade" mode="out-in">
<router-view />
</transition>
</el-scrollbar>
<!-- <el-scrollbar wrap-class="scrollbar-wrapper app_scrollbar_box"> -->
<transition name="fade" mode="out-in">
<router-view />
</transition>
<!-- </el-scrollbar> -->
</section>
<el-footer style="height:30px;text-align:right;line-height: 30px;">
<span style="font-size:14px;">Copyright ©2018 北京玖琏科技有限公司 京ICP备18028522号</span>
@ -24,7 +23,6 @@ export default {
name: 'Layout',
components: {
Navbar
// AppMain
},
data() {
return {
@ -77,6 +75,10 @@ export default {
overflow: hidden;
}
.app-main{
overflow-y: auto;
}
.drawer-bg {
background: #000;
opacity: 0.3;
@ -94,4 +96,49 @@ export default {
height: 100%;
}
}
// 定义公共card样式
.joylink-card{
border: 1px solid #EBEEF5;
background-color: #FFF;
color: #303133;
transition: .3s;
box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
}
// 谷歌、safari、qq浏览器、360浏览器滚动条样式
// 定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸
::-webkit-scrollbar {
width: 6px;
height: 110px;
background-color: #FFFFFF;
}
/*定义滚动条轨道 内阴影+圆角*/
::-webkit-scrollbar-track {
// box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
border-radius: 10px;
background-color: #FFFFFF;;
}
/*定义滑块 内阴影+圆角*/
::-webkit-scrollbar-thumb {
border-radius: 10px;
// box-shadow: inset 0 0 6px rgba(0,0,0,.3);
background-color: #eaeaea;
}
/*滑块效果*/
::-webkit-scrollbar-thumb:hover {
border-radius: 5px;
// box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
background: rgba(0,0,0,0.4);
}
/*IE滚动条颜色*/
html {
scrollbar-face-color:#bfbfbf;/*滚动条颜色*/
scrollbar-highlight-color:#000;
scrollbar-3dlight-color:#000;
scrollbar-darkshadow-color:#000;
scrollbar-Shadow-color:#adadad;/*滑块边色*/
scrollbar-arrow-color:rgba(0,0,0,0.4);/*箭头颜色*/
scrollbar-track-color:#eeeeee;/*背景颜色*/
}
</style>

31
src/views/designPlatform/demonList.vue
View File

@ -1,17 +1,20 @@
<template>
<div>
<el-card v-loading="loading" class="map-list-main" :header="$t('map.publishedMapList')">
<div v-loading="loading" class="joylink-card map-list-main">
<div class="clearfix">
<span>{{ $t('map.publishedMapList') }}</span>
</div>
<div class="text_item" style="height: calc(100% - 47px);">
<filter-city ref="filerCity" filter-empty :query-function="queryFunction" :local-param-name="localParamName" @filterSelectChange="refresh" />
<el-input v-model="filterText" :placeholder="this.$t('global.filteringKeywords')" clearable />
<el-scrollbar wrap-class="scrollbar-wrapper" :style="{ height: (height-125) +'px' }">
<el-tree ref="tree" :data="treeList" node-key="id" :props="defaultProps" highlight-current :span="22" :filter-node-method="filterNode" @node-click="clickEvent">
<div style="height: calc(100% - 76px);">
<el-tree ref="tree" class="tree_box" :data="treeList" node-key="id" :props="defaultProps" highlight-current :span="22" :filter-node-method="filterNode" @node-click="clickEvent">
<span slot-scope="{ node:tnode, data }">
<span class="el-icon-tickets" :style="{color: data.valid ? 'green':''}" />
<span>&nbsp;{{ tnode.label }}</span>
</span>
</el-tree>
</el-scrollbar>
</el-card>
</div>
</div>
</div>
</template>
<script>
@ -57,11 +60,6 @@ export default {
cityCode: ''
};
},
computed: {
height() {
return this.$store.state.app.height - 93;
}
},
watch: {
filterText(val) {
this.treeList = this.treeData.filter((res) => {
@ -189,7 +187,18 @@ export default {
.map-list-main{
text-align:left;
height: 100%;
}
.clearfix{
padding: 0 20px;
border-bottom: 1px solid #EBEEF5;
box-sizing: border-box;
height: 47px;
line-height: 47px;
}
.tree_box{
height: 100%;
}
</style>
<style>
.el-tree {

18
src/views/designPlatform/index.vue
View File

@ -1,14 +1,12 @@
<template>
<div class="app-wrapper">
<el-scrollbar wrap-class="scrollbar-wrapper">
<div v-show="listShow" class="examList" :style="{width: widthLeft+'px'}">
<demon-list ref="demonList" :width="widthLeft" />
</div>
<drap-left :width-left="widthLeft" @drapWidth="drapWidth" />
<transition>
<router-view :product-list="productList" :width-left="widthLeft" />
</transition>
</el-scrollbar>
<div v-show="listShow" class="examList" :style="{width: widthLeft+'px'}">
<demon-list ref="demonList" :width="widthLeft" />
</div>
<drap-left :width-left="widthLeft" @drapWidth="drapWidth" />
<transition>
<router-view :product-list="productList" :width-left="widthLeft" />
</transition>
</div>
</template>
@ -99,8 +97,6 @@ export default {
}
.examList {
// position: fixed;
// top: 61px;
float: left;
height: 100%;
}

73
src/views/designPlatform/userDemonList.vue
View File

@ -1,39 +1,25 @@
<template>
<el-card v-loading="loading" class="map-list-main" :header="$t('map.myMapList')">
<el-input v-model="filterText" :placeholder="this.$t('global.filteringKeywords')" clearable />
<el-scrollbar wrap-class="scrollbar-wrapper" :style="{ height: (height-185) +'px' }">
<el-tree
ref="tree"
:data="treeList"
node-key="id"
:props="defaultProps"
highlight-current
:span="22"
:filter-node-method="filterNode"
@node-click="clickEvent"
@node-contextmenu="showContextMenu"
>
<span slot-scope="{ node:tnode, data }">
<span
class="el-icon-tickets"
:style="{color: data.valid ? 'green':''}"
/>
<span>&nbsp;{{ tnode.label }}</span>
</span>
</el-tree>
</el-scrollbar>
<div class="buttonList">
<el-button size="small" type="primary" class="eachButton uploadDemo ">
<input
ref="files"
type="file"
class="file_box"
accept=".json, application/json"
@change="importf"
>
{{ $t('map.importMap') }}
</el-button>
<el-button size="small" type="primary" class="eachButton" @click="createMap">{{ $t('map.newConstruction') }}</el-button>
<div v-loading="loading" class="joylink-card map-list-main">
<div class="clearfix">
<span>{{ $t('map.myMapList') }}</span>
</div>
<div class="text_item" style="height: calc(100% - 47px);">
<el-input v-model="filterText" :placeholder="this.$t('global.filteringKeywords')" clearable />
<div style="height: calc(100% - 89px); overflow-y: auto;">
<el-tree ref="tree" :data="treeList" node-key="id" :props="defaultProps" highlight-current :span="22" :filter-node-method="filterNode" @node-click="clickEvent" @node-contextmenu="showContextMenu">
<span slot-scope="{ node:tnode, data }">
<span class="el-icon-tickets" :style="{color: data.valid ? 'green':''}" />
<span>&nbsp;{{ tnode.label }}</span>
</span>
</el-tree>
</div>
<div class="buttonList">
<el-button size="small" type="primary" class="eachButton uploadDemo ">
<input ref="files" type="file" class="file_box" accept=".json, application/json" @change="importf">
{{ $t('map.importMap') }}
</el-button>
<el-button size="small" type="primary" class="eachButton" @click="createMap">{{ $t('map.newConstruction') }}</el-button>
</div>
</div>
<map-operate-menu
ref="menu"
@ -43,7 +29,7 @@
@refresh="loadInitData"
@jlmap3d="jlmap3d"
/>
</el-card>
</div>
</template>
<script>
import { DeviceMenu } from '@/scripts/ConstDic';
@ -59,10 +45,6 @@ export default {
MapOperateMenu
},
props: {
height: {
type: Number,
required: true
},
width: {
type: Number,
required: true
@ -223,6 +205,16 @@ export default {
};
</script>
<style lang="scss" scoped>
.clearfix{
padding: 0 20px;
border-bottom: 1px solid #EBEEF5;
box-sizing: border-box;
height: 47px;
line-height: 47px;
}
.tree_box{
height: 100%;
}
.buttonList{
padding: 8px 0px 8px 0px;
border-top: 1px #ccc solid;
@ -249,5 +241,6 @@ export default {
}
.map-list-main{
text-align:left;
height: 100%;
}
</style>

26
src/views/designPlatform/userIndex.vue
View File

@ -1,20 +1,13 @@
<template>
<div class="app-wrapper">
<div class="app-wrapper" style="height: 100%;">
<map-create ref="mapCreate" :skin-code="skinCode" @refresh="refresh1" @editmap="handleNodeClick" />
<!-- <el-scrollbar wrap-class="scrollbar-wrapper"> -->
<div>
<div v-show="listShow" class="examList" :style="{width: widthLeft+'px'}">
<demon-list ref="demonList" :height="height" :width="widthLeft" @createMap="createMap" />
</div>
<drap-left :width-left="widthLeft" @drapWidth="drapWidth" />
<transition>
<!-- position:'relative', -->
<!-- :style="{left:widthLeft+'px', width: (width - widthLeft)+'px'}" -->
<router-view :product-list="productList" />
</transition>
<div v-show="listShow" class="examList" :style="{width: widthLeft+'px'}">
<demon-list ref="demonList" :width="widthLeft" @createMap="createMap" />
</div>
<!-- </el-scrollbar> -->
<drap-left :width-left="widthLeft" @drapWidth="drapWidth" />
<transition>
<router-view :product-list="productList" />
</transition>
</div>
</template>
@ -47,9 +40,6 @@ export default {
...mapGetters([
'lessonbar'
]),
height() {
return this.$store.state.app.height - 50;
},
width() {
return this.$store.state.app.width;
}
@ -140,8 +130,6 @@ export default {
}
.examList {
// position: fixed;
// top: 61px;
float: left;
height: 100%;
}

4
src/views/map/mapdraft/mapedit/mapoperate/config/data.vue
View File

@ -104,6 +104,7 @@
<div class="point-section">
<template v-for="(point, index) in formModel[item.prop]">
<div :key="index" style="overflow: hidden;">
<span style="display: table; margin-right: 3px; font-size: 14px; float: left; line-height: 28px;">{{ index == 0 ? '(起点)' : index == formModel[item.prop].length - 1 ? '(终点)' : `(中点${index})` }}</span>
<el-form-item
label=""
:prop="'points[' + index + '].x'"
@ -120,7 +121,7 @@
label=""
:prop="'points[' + index + '].y'"
style="display: table; float: left; margin-right: 5px;"
label-width="10px"
label-width="4px"
>
<el-input-number v-model="point.y" :disabled="item.pointDisabled" />
</el-form-item>
@ -136,6 +137,7 @@
:disabled="index == 0 || index == formModel[item.prop].length - 1"
circle
class="point-button"
style="margin-left: 4px;"
@click="item.delPoint(index)"
/>
</div>

4
src/views/map/mapdraft/mapedit/mapoperate/config/list.vue
View File

@ -107,6 +107,7 @@
<div class="point-section" :style="{ width: `calc(100% - 10px - ${item.width})` }">
<template v-for="(point, index) in formModel[item.prop]">
<div :key="index" style="overflow: hidden;">
<span style="display: table; margin-right: 3px; font-size: 14px; float: left; line-height: 28px;" :style="{'margin-right': index == 0 || index == formModel[item.prop].length - 1 ? '9px' : '5px'}">{{ index == 0 ? '起 点' : index == formModel[item.prop].length - 1 ? '终 点' : `中点${index}` }}</span>
<el-form-item
label=""
:prop="'points[' + index + '].x'"
@ -123,7 +124,7 @@
label=""
:prop="'points[' + index + '].y'"
style="display: table; float: left; margin-right: 5px;"
label-width="10px"
label-width="4px"
>
<el-input-number v-model="point.y" :disabled="item.pointDisabled" />
</el-form-item>
@ -139,6 +140,7 @@
:disabled="index == 0 || index == formModel[item.prop].length - 1"
circle
class="point-button"
style="margin-left: 4px;"
@click="item.delPoint(index)"
/>
</div>

2
src/views/map/mapdraft/mapedit/mapoperate/line.vue
View File

@ -161,7 +161,7 @@ export default {
{ prop: 'code', label: this.$t('map.lineCoding'), type: 'select', optionLabel: 'code', optionValue: 'code', options: this.lineList, change: true, deviceChange: this.deviceChange },
{ prop: 'type', label: this.$t('map.lineType'), type: 'select', optionLabel: 'name', optionValue: 'code', options: this.LineTypeList },
{ prop: 'width', label: this.$t('map.lineWidth'), type: 'number', min: 1, placeholder: 'px' },
{ prop: 'points', label: this.$t('map.segmentCoordinates'), type: 'points', width: '120px', isHidden: !this.isPointsShow, addPoint: this.addPoint, delPoint: this.delPoint }
{ prop: 'points', label: this.$t('map.segmentCoordinates'), type: 'points', width: '100px', isHidden: !this.isPointsShow, addPoint: this.addPoint, delPoint: this.delPoint }
]
},
map: {

30
src/views/map/mapdraft/mapedit/mapoperate/section.vue
View File

@ -130,7 +130,7 @@
<el-tab-pane class="view-control" label="批量删除" name="five" :style="{ height: cardHeight + 30 +'px' }">
<div class="link_box_select">
<span style="margin-right: 12px;">选择link:</span>
<el-select v-model="linkCode" filterable size="mini">
<el-select v-model="linkCode" filterable multiple size="mini">
<el-option
v-for="item in linkList"
:key="item.code"
@ -343,7 +343,7 @@ export default {
{ prop: 'segmentationPosition.y', firstLevel: 'segmentationPosition', secondLevel: 'y', label: 'y:', type: 'number', labelWidth: '20px', disabled: true }
] },
{ prop: 'isCurve', label: this.$t('map.isCurve'), type: 'checkbox', isHidden: !this.isSectionType },
{ prop: 'points', label: this.$t('map.segmentCoordinates'), type: 'points', width: '140px', isHidden: !this.isPointsShow, pointDisabled: this.pointDisabledName, addPoint: this.addPoint, delPoint: this.delPoint }
{ prop: 'points', label: this.$t('map.segmentCoordinates'), type: 'points', width: '100px', isHidden: !this.isPointsShow, pointDisabled: this.pointDisabledName, addPoint: this.addPoint, delPoint: this.delPoint }
]
},
map: {
@ -836,7 +836,6 @@ export default {
}
}
});
console.log(models, remove);
const _that = this;
this.$confirm(this.$t('tip.confirmBatchGeneration'), this.$t('tip.hint'), {
@ -1101,17 +1100,19 @@ export default {
delRelevanceSection() {
const selected = [];
const switchList = [];
this.sectionList.forEach(section => {
if (section.linkCode == this.linkCode) {
const selectedSection = this.$store.getters['map/getDeviceByCode'](section.code);
selected.push(selectedSection);
this.switchList.forEach(switchEle => {
if (section.relSwitchCode == switchEle.code) {
const selectedSwitch = this.$store.getters['map/getDeviceByCode'](switchEle.code);
switchList.push(selectedSwitch);
}
});
}
this.linkCode.forEach(linkCode => {
this.sectionList.forEach(section => {
if (section.linkCode == linkCode) {
const selectedSection = this.$store.getters['map/getDeviceByCode'](section.code);
selected.push(selectedSection);
this.switchList.forEach(switchEle => {
if (section.relSwitchCode == switchEle.code) {
const selectedSwitch = this.$store.getters['map/getDeviceByCode'](switchEle.code);
switchList.push(selectedSwitch);
}
});
}
});
});
this.$confirm(this.$t('tip.confirmDeletion'), this.$t('tip.hint'), {
confirmButtonText: this.$t('tip.confirm'),
@ -1123,6 +1124,7 @@ export default {
});
await this.$emit('delMapModel', selected);
this.deviceSelect();
this.linkCode = '';
}).catch(() => {
this.$message.info(this.$t('tip.cancelledDelete'));
});

25
src/views/map/mapdraft/mapedit/mapoperate/switch.vue
View File

@ -171,15 +171,15 @@ export default {
create() { // 一键生成道岔
this.questionList = []; // 有问题区段列表
const models = [];
// const remove = [];
const linkObj = {};
this.linkList.forEach(link => {
if (link && link.leftFdCode && link.leftSdCode) { // 左侧同时都有关联link
linkObj[`${link.code}`] = { name: '', num: 0 };
} else if (link && link.rightFdCode && link.rightSdCode) { // 右侧同时都有关联link
linkObj[`${link.code}`] = { name: '', num: 0 };
} else if (link && link.leftFdCode && !link.leftSdCode && link.rightFdCode && !link.rightSdCode) { // 左右正向link关联，侧向link不关联检测
linkObj[`${link.code}`] = { name: '', num: 0 };
}
});
this.sectionList.forEach(section => {
for (const link in linkObj) {
@ -227,7 +227,7 @@ export default {
}
};
const swch = this.findSwitchData(model.sectionACode, model.sectionBCode, model.sectionCCode);
!swch && models.push(model);
!swch && models.push(model); // 已有的道岔不在创建
}
}
}
@ -273,6 +273,16 @@ export default {
}
}
});
const createArr = [];
models.forEach((item) => {
const sectionA = this.$store.getters['map/getDeviceByCode'](item.sectionACode);
const sectionB = this.$store.getters['map/getDeviceByCode'](item.sectionBCode);
const sectionC = this.$store.getters['map/getDeviceByCode'](item.sectionCCode);
if (linkObj[sectionA.linkCode].num != 1 && linkObj[sectionB.linkCode].num != 1 && linkObj[sectionC.linkCode].num != 1 ) {
createArr.push(item);
}
});
// console.log(models, createArr, '创建道岔list');
this.$confirm(this.$t('tip.confirmBatchGeneration'), this.$t('tip.hint'), {
confirmButtonText: this.$t('tip.confirm'),
cancelButtonText: this.$t('tip.cancel'),
@ -280,14 +290,11 @@ export default {
}).then(() => {
for (const link in linkObj) {
if (linkObj[link].num == 1) {
this.questionList.push(`${this.$t('map.section')}${linkObj[link].name}${this.$t('tip.linkNoneSplit')}`);
this.questionList.push(`${this.$t('map.section')}${linkObj[link].name}${this.$t('tip.linkNoneSplit')}, ${this.$t('tip.createSwitchPortion')}`);
}
}
if (!this.questionList.length) { // 没有问题list 再去创建
// this.$emit('delMapModel', remove);
this.$emit('addOrUpdateMapModel', models);
this.createSwitchSection(models);
}
this.$emit('addOrUpdateMapModel', createArr);
this.createSwitchSection(createArr);
}).catch(() => {
this.$message({
type: 'info',