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

Merge branch 'yly' into test

Browse Source
This commit is contained in:
Yuan 2022-08-18 18:09:11 +08:00
commit 515f51e578
3 changed files with 536 additions and 230 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

77
src/jmapNew/theme/datie_02/menus/components/menu.vue Normal file
View File

@ -0,0 +1,77 @@
<template>
<ul class="settings-menu" :class="{ 'pos-bottom': position === 'bottom', 'pos-right': position === 'right' }">
<li
class="settings-menu-item"
v-for="(item, i) in items"
:key="`li-${i}`"
@mouseenter="currMenuIndex = i"
@mouseleave="currMenuIndex = -1"
@click.stop="handleMenuItemClick(item.id)"
>
<span>{{ item.label }}</span>
<span :style="{ float: 'right' }" v-if="item.children">></span>
<settings-menu
@select="handleMenuItemClick(`${item.id}-${$event}`)"
v-if="item.children && currMenuIndex === i"
:items="item.children"
position="right"
/>
</li>
</ul>
</template>
<script>
export default {
name: 'SettingsMenu',
props: {
items: Array,
position: {
validator: val => ['right', 'bottom'].includes(val),
},
},
emits: ['select'],
computed: {
currentSubMenu() {},
},
data() {
return {
currMenuIndex: -1,
}
},
methods: {
handleMenuItemClick(id) {
if (!id) return
this.$emit('select', id)
},
},
}
</script>
<style lang="scss" scoped>
.settings-menu {
background-color: #add8e6;
line-height: 2rem;
min-width: 160px;
margin: 0;
padding: 0;
border: 1px solid #666;
border-top: 0;
}
.settings-menu-item {
list-style: none;
padding: 0 0 0 1rem;
border-top: 1px solid #666;
position: relative;
}
.settings-menu-item:hover {
background-color: #88d8ee;
}
.settings-menu-item:active {
background-color: #97e3f8;
}
.pos-right {
position: absolute;
top: 0;
left: 100%;
}
</style>

156
src/jmapNew/theme/datie_02/menus/dialog/boardViewSetting.vue Normal file
View File

@ -0,0 +1,156 @@
<template>
<el-dialog
v-dialogDrag
class="chengdou-03__systerm train-set-plan"
title="占线板显示配置"
:visible.sync="show"
width="800px"
:before-close="doClose"
:z-index="3000"
:append-to-body="true"
:modal="true"
>
<el-tabs v-model="activeName" type="card">
<el-tab-pane label="股道视图" name="railView"></el-tab-pane>
<el-tab-pane label="进路序列" name="routeSequence"></el-tab-pane>
<el-tab-pane label="股道视图显示参数" name="railViewParam"></el-tab-pane>
<el-tab-pane label="预览界面" name="preview"></el-tab-pane>
</el-tabs>
<div class="railView" v-if="activeName === 'railView'">
<div class="left">
<div class="list">
<div class="item">沈阳&amp;沈阳北</div>
<div class="item">沈阳</div>
</div>
<div class="btn-area">
<div class="row">
<div>显示名</div>
<el-input style="width:40%;" v-model="form.railView.displayName"></el-input>
<el-select style="width:30%;" v-model="form.railView.view.value">
<el-option
v-for="option in form.railView.view.options"
:key="option.value"
:label="option.label"
:value="option.value"
></el-option>
</el-select>
</div>
<div class="row">
<el-button>增加页面</el-button>
<el-button>修改名称</el-button>
<el-button>删除页面</el-button>
</div>
</div>
</div>
<div class="right">
<div class="list">
<div class="item">沈阳</div>
<div class="item">沈阳北</div>
</div>
<div class="btn-area">
<div class="row">
<el-select style="width:100%;" v-model="form.railView.station.value">
<el-option
v-for="option in form.railView.station.options"
:key="option.value"
:label="option.label"
:value="option.value"
></el-option>
</el-select>
</div>
<div class="row">
<el-button>增加视图</el-button>
<el-button>删除视图</el-button>
</div>
</div>
</div>
</div>
<div class="routeSequence" v-if="activeName === 'routeSequence'"></div>
<div class="railViewParam" v-if="activeName === 'railViewParam'"></div>
<div class="preview" v-if="activeName === 'preview'"></div>
<div class="optBar">
<el-button-group>
<el-button width="100px">生成默认股道视图设置</el-button>
<el-button>生成默认序列视图设置</el-button>
</el-button-group>
<el-button-group>
<el-button>保存</el-button>
<el-button @click="doClose">关闭</el-button>
</el-button-group>
</div>
</el-dialog>
</template>
<script>
export default {
name: 'BoardViewSetting',
data() {
return {
show: false,
activeName: 'railView',
form: {
railView: {
diaplayName: '',
view: {
value: 'rail',
options: [
{
label: '股道视图',
value: 'rail',
},
],
},
station: {
value: 'shenyang',
options: [{ label: '沈阳', value: 'shenyang' }],
},
},
},
}
},
methods: {
doShow() {
this.show = true
},
doClose() {
this.show = false
},
},
}
</script>
<style lang="scss" scoped>
// /deep/.el-dialog__body {
// background: #8d939d !important;
// }
.railView {
display: flex;
margin-bottom: 10px;
.left,
.right {
width: 50%;
}
.list {
margin: 10px;
background-color: #fff;
height: 10rem;
padding: 0 5px;
.item {
line-height: 1.2rem;
}
}
.row {
margin: 8px;
display: flex;
justify-content: space-around;
}
}
.optBar {
display: flex;
justify-content: space-between;
.el-button {
width: auto !important;
margin: 0 5px;
}
}
</style>

533
src/jmapNew/theme/datie_02/menus/menuPanel.vue
View File

@ -4,299 +4,372 @@
<div class="card" style="padding: 5px;">
<div style="background: #999EA7;display: flex;align-items: center;">
<div class="button-box">
<img :src="t3Pic" class="img-button">
<img :src="t3Pic" class="img-button" @click.stop="activeMenu = 't3'" />
<settings-menu :items="T3MenuItems" v-if="activeMenu === 't3'" @select="handleT3MenuSelect" />
</div>
<div class="button-box">
<img :src="panelPic" class="img-button" @click="showLineBoard">
<img :src="panelPic" class="img-button" @click="showLineBoard" />
</div>
<div class="button-box">
<img :src="trainPic" class="img-button">
<img :src="trainPic" class="img-button" />
</div>
<div class="button-box">
<img :src="linkPic" class="img-button">
<img :src="linkPic" class="img-button" />
</div>
<div class="button-box">
<img :src="cameraPic" class="img-button">
<img :src="cameraPic" class="img-button" />
</div>
<div style="width: 205px;height: 36px; background: #fff;border-radius: 5px;" />
<div class="button-box">
<img :src="settingPic" class="img-button">
<img :src="settingPic" class="img-button" @click.stop="activeMenu = 'setting'" />
<settings-menu :items="settingsMenuItems" v-if="activeMenu === 'setting'" @select="handleSettingsMenuSelect" />
</div>
<div class="button-box">
<img :src="shutdownPic" class="img-button">
<img :src="shutdownPic" class="img-button" />
</div>
</div>
</div>
<notice-info ref="noticeInfo" pop-class="chengdou-03__systerm" />
<BoardViewSetting ref="boardViewSetting" />
</div>
</template>
<script>
import { mapGetters } from 'vuex';
import { MouseEvent } from '@/scripts/ConstDic';
import NoticeInfo from '@/jmapNew/theme/components/menus/childDialog/noticeInfo';
import T3Pic from '@/assets/ctc_icon/t3.png';
import TrainPic from '@/assets/ctc_icon/train.png';
import PanelPic from '@/assets/ctc_icon/panel.png';
import LinkPic from '@/assets/ctc_icon/link.png';
import CameraPic from '@/assets/ctc_icon/camera.png';
import SettingPic from '@/assets/ctc_icon/setting.png';
import ShutdownPic from '@/assets/ctc_icon/shutdown.png';
import { EventBus } from '@/scripts/event-bus';
import { mapGetters } from 'vuex'
import { MouseEvent } from '@/scripts/ConstDic'
import NoticeInfo from '@/jmapNew/theme/components/menus/childDialog/noticeInfo'
import T3Pic from '@/assets/ctc_icon/t3.png'
import TrainPic from '@/assets/ctc_icon/train.png'
import PanelPic from '@/assets/ctc_icon/panel.png'
import LinkPic from '@/assets/ctc_icon/link.png'
import CameraPic from '@/assets/ctc_icon/camera.png'
import SettingPic from '@/assets/ctc_icon/setting.png'
import ShutdownPic from '@/assets/ctc_icon/shutdown.png'
import { EventBus } from '@/scripts/event-bus'
import SettingsMenu from './components/menu.vue'
import BoardViewSetting from './dialog/boardViewSetting.vue'
export default {
name: 'RouteCreate',
components: {
NoticeInfo
},
data() {
return {
dialogShow: true,
loading: false,
selected: null,
t3Pic: T3Pic,
panelPic: PanelPic,
trainPic: TrainPic,
linkPic: LinkPic,
cameraPic: CameraPic,
settingPic: SettingPic,
shutdownPic: ShutdownPic
};
},
computed: {
...mapGetters('map', [
'stationList',
'sectionList'
]),
show() {
return this.dialogShow && !this.$store.state.menuOperation.break;
name: 'RouteCreate',
components: {
NoticeInfo,
SettingsMenu,
BoardViewSetting,
},
data() {
return {
dialogShow: true,
loading: false,
selected: null,
t3Pic: T3Pic,
panelPic: PanelPic,
trainPic: TrainPic,
linkPic: LinkPic,
cameraPic: CameraPic,
settingPic: SettingPic,
shutdownPic: ShutdownPic,
activeMenu: '',
settingsMenuItems: [
{ label: '占线板视图设置', id: 'boardView' },
{ label: '股道视图显示设置', id: 'trackView' },
{
label: '方向显示设置',
id: 'directionView',
children: [{ label: '标准站', id: 'std' }, { label: '标准甲站', id: 'std1' }, { label: '标准乙站', id: 'std2' }],
},
createDisable() {
return !(this.groupNumber1 && this.groupNumber1.length === 4 && this.nowSectionCode && this.newTrainCode && this.newTrainCode.length === 8);
{
label: '调车参数配置',
id: 'shuntingParam',
children: [{ label: '标准站', id: 'std' }, { label: '标准甲站', id: 'std1' }, { label: '标准乙站', id: 'std2' }],
},
updateDisable() {
return !(this.newTrainCode && this.newTrainCode.length === 8);
{
label: '调车优先级配置',
id: 'shuntingPriority',
children: [{ label: '标准站', id: 'std' }, { label: '标准甲站', id: 'std1' }, { label: '标准乙站', id: 'std2' }],
},
moveDisable() {
return !this.newSectionCode;
{
label: '调车规则配置',
id: 'shuntingRule',
children: [{ label: '标准站', id: 'std' }, { label: '标准甲站', id: 'std1' }, { label: '标准乙站', id: 'std2' }],
},
deleteDisable() {
return !this.nowTrainCode;
}
},
watch: {
'$store.state.menuOperation.selectedCount':function(em) {
const device = this.$store.state.menuOperation.selected;
if (device && device.code && device._type === 'Section') {
this.nowSectionCode = device.code;
} else if (device && device.code && device._type === 'Train' && device._event === MouseEvent.Left) {
this.doShow(device);
}
}
},
mounted() {
this.dragEvent(); // 24
},
methods: {
doShow(selected) {
this.dialogShow = true;
this.$nextTick(function () {
this.dragEvent();
});
{
label: '功能按钮设置',
id: 'functionButton',
children: [{ label: '标准站', id: 'std' }, { label: '标准甲站', id: 'std1' }, { label: '标准乙站', id: 'std2' }],
},
doClose() {
this.loading = false;
this.dialogShow = false;
this.$store.dispatch('training/emitTipFresh');
},
showLineBoard() {
EventBus.$emit('showLineBoard');
},
dragEvent() {
const offset = this.offset;
const dragDom = document.querySelector('#faultChoose');
dragDom.style.cursor = 'move';
/** 获取原有属性 ie dom元素.currentStyle 火狐谷歌 window.getComputedStyle(dom元素, null);*/
const sty = dragDom.currentStyle || window.getComputedStyle(dragDom, null);
dragDom.onmousedown = (e) => {
/** 鼠标按下，计算当前元素距离可视区的距离*/
const disX = e.clientX;
const disY = e.clientY;
/** 获取到的值带px 正则匹配替换*/
let styL, styT;
/** 注意在ie中 第一次获取到的值为组件自带50% 移动之后赋值为px*/
if (sty.left.includes('%')) {
// eslint-disable-next-line no-useless-escape
styL = +document.body.clientWidth * (+sty.left.replace(/\%/g, '') / 100);
styT = +document.body.clientHeight * (+sty.top.replace(/\%/g, '') / 100);
} else {
// eslint-disable-next-line no-useless-escape
styL = +sty.left.replace(/\px/g, '');
// eslint-disable-next-line no-useless-escape
styT = +sty.top.replace(/\px/g, '');
}
document.onmousemove = function (e) {
/** 通过事件委托，计算移动的距离*/
const l = e.clientX - disX;
const t = e.clientY - disY;
/** 移动当前元素*/
// dragDom.style.left = `${l + styL}px`;
// dragDom.style.top = `${t + styT}px`;
/** 移动当前元素*/
if (l + styL < 0) {
dragDom.style.left = `0px`;
} else if (l + styL > document.body.clientWidth - dragDom.clientWidth - 10) {
dragDom.style.left = `${document.body.clientWidth - dragDom.clientWidth - 10}px`;
} else {
dragDom.style.left = `${l + styL}px`;
}
if (t + styT <= offset) {
dragDom.style.top = offset + `px`;
} else if (t + styT > document.body.clientHeight - dragDom.clientHeight - 10) {
dragDom.style.top = `${document.body.clientHeight - dragDom.clientHeight - 10}px`;
} else {
dragDom.style.top = `${t + styT}px`;
}
/** 将此时的位置传出去*/
// binding.value({ x: e.pageX, y: e.pageY });
};
document.onmouseup = function () {
document.onmousemove = null;
document.onmouseup = null;
};
};
}
{ label: '站场界面显示设置', id: 'UIDisplay' },
{ label: '报警提示设置', id: 'alarm' },
{ label: '版本信息', id: 'version' },
],
T3MenuItems: [
{ label: '设置供电臂状态', id: 'powerSupplyArm' },
{ label: '封锁设备操作', id: 'blockedDeviceOperation' },
{ label: '区域批量设备操作', id: 'regionBatchOperation', children: [{}] },
{ label: '站存车管理', id: 'stationTrainManage', children: [{}] },
{ label: '设备影响分析', id: 'deviceAffectAnalyze', children: [{}] },
{ label: '操作日志查询', id: 'operationLog' },
{ label: '防溜设置查询', id: 'deviceAffectAnalyze' },
{ label: '设备影响分析', id: 'deviceAffectAnalyze' },
],
}
};
},
computed: {
...mapGetters('map', ['stationList', 'sectionList']),
show() {
return this.dialogShow && !this.$store.state.menuOperation.break
},
createDisable() {
return !(
this.groupNumber1 &&
this.groupNumber1.length === 4 &&
this.nowSectionCode &&
this.newTrainCode &&
this.newTrainCode.length === 8
)
},
updateDisable() {
return !(this.newTrainCode && this.newTrainCode.length === 8)
},
moveDisable() {
return !this.newSectionCode
},
deleteDisable() {
return !this.nowTrainCode
},
},
watch: {
'$store.state.menuOperation.selectedCount': function(em) {
const device = this.$store.state.menuOperation.selected
if (device && device.code && device._type === 'Section') {
this.nowSectionCode = device.code
} else if (device && device.code && device._type === 'Train' && device._event === MouseEvent.Left) {
this.doShow(device)
}
},
},
mounted() {
this.dragEvent() // 24
window.addEventListener('click', this.closeMenus)
window.addEventListener('click', this.closeMenus)
},
unmounted() {
window.removeEventListener('click', this.closeMenus)
},
methods: {
doShow(selected) {
this.dialogShow = true
this.$nextTick(function() {
this.dragEvent()
})
},
doClose() {
this.loading = false
this.dialogShow = false
this.$store.dispatch('training/emitTipFresh')
},
showLineBoard() {
EventBus.$emit('showLineBoard')
},
closeMenus() {
this.activeMenu = ''
},
handleSettingsMenuSelect(id) {
this.closeMenus()
const params = id.split('-')
switch (params[0]) {
case 'boardView':
this.$refs.boardViewSetting.doShow()
break
}
},
handleT3MenuSelect(id) {
console.log(id)
},
dragEvent() {
const offset = this.offset
const dragDom = document.querySelector('#faultChoose')
dragDom.style.cursor = 'move'
/** 获取原有属性 ie dom元素.currentStyle 火狐谷歌 window.getComputedStyle(dom元素, null);*/
const sty = dragDom.currentStyle || window.getComputedStyle(dragDom, null)
dragDom.onmousedown = e => {
/** 鼠标按下，计算当前元素距离可视区的距离*/
const disX = e.clientX
const disY = e.clientY
/** 获取到的值带px 正则匹配替换*/
let styL, styT
/** 注意在ie中 第一次获取到的值为组件自带50% 移动之后赋值为px*/
if (sty.left.includes('%')) {
// eslint-disable-next-line no-useless-escape
styL = +document.body.clientWidth * (+sty.left.replace(/\%/g, '') / 100)
styT = +document.body.clientHeight * (+sty.top.replace(/\%/g, '') / 100)
} else {
// eslint-disable-next-line no-useless-escape
styL = +sty.left.replace(/\px/g, '')
// eslint-disable-next-line no-useless-escape
styT = +sty.top.replace(/\px/g, '')
}
document.onmousemove = function(e) {
/** 通过事件委托，计算移动的距离*/
const l = e.clientX - disX
const t = e.clientY - disY
/** 移动当前元素*/
// dragDom.style.left = `${l + styL}px`;
// dragDom.style.top = `${t + styT}px`;
/** 移动当前元素*/
if (l + styL < 0) {
dragDom.style.left = `0px`
} else if (l + styL > document.body.clientWidth - dragDom.clientWidth - 10) {
dragDom.style.left = `${document.body.clientWidth - dragDom.clientWidth - 10}px`
} else {
dragDom.style.left = `${l + styL}px`
}
if (t + styT <= offset) {
dragDom.style.top = offset + `px`
} else if (t + styT > document.body.clientHeight - dragDom.clientHeight - 10) {
dragDom.style.top = `${document.body.clientHeight - dragDom.clientHeight - 10}px`
} else {
dragDom.style.top = `${t + styT}px`
}
/** 将此时的位置传出去*/
// binding.value({ x: e.pageX, y: e.pageY });
}
document.onmouseup = function() {
document.onmousemove = null
document.onmouseup = null
}
}
},
},
}
</script>
<style lang="scss">
#faultChoose .el-button--mini {
margin-left: 5px;
margin-left: 5px;
}
.triggerFaultListLeft{
display: inline-block;
float: left;
width: 730px;
.triggerFaultListLeft {
display: inline-block;
float: left;
width: 730px;
}
// 谷歌、safari、qq浏览器、360浏览器滚动条样式
// 定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸
#faultChoose .el-table__body-wrapper::-webkit-scrollbar {
width: 6px;
height: 6px;
// height: 110px;
background-color: #FFFFFF;
width: 6px;
height: 6px;
// height: 110px;
background-color: #ffffff;
}
/*定义滚动条轨道 内阴影+圆角*/
#faultChoose .el-table__body-wrapper::-webkit-scrollbar-track {
// box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
border-radius: 10px;
background-color: #FFFFFF;;
// box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
border-radius: 10px;
background-color: #ffffff;
}
/*定义滑块 内阴影+圆角*/
#faultChoose .el-table__body-wrapper::-webkit-scrollbar-thumb {
border-radius: 10px;
// box-shadow: inset 0 0 6px rgba(0,0,0,.3);
background-color: #eaeaea;
border-radius: 10px;
// box-shadow: inset 0 0 6px rgba(0,0,0,.3);
background-color: #eaeaea;
}
/*滑块效果*/
#faultChoose .el-table__body-wrapper::-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);
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;/*背景颜色*/
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>
<style rel="stylesheet/scss" lang="scss" scoped>
.triggerFaultInfo{
margin-bottom:10px;
padding: 10px 0px 10px 15px;
.triggerFaultInfo {
margin-bottom: 10px;
padding: 10px 0px 10px 15px;
}
.triggerFaultList{
font-size: 14px;
margin-top: 10px;
line-height: 20px;
.triggerFaultList {
font-size: 14px;
margin-top: 10px;
line-height: 20px;
}
.triggerFaultTitle{
font-size: 15px;
font-weight: bold;
.triggerFaultTitle {
font-size: 15px;
font-weight: bold;
}
.falutChooseTitle{
cursor: all-scroll;
background-color: #c0c0c0;
height: 30px;
line-height: 30px;
color: #000;
padding-left: 10px;
border-radius: 6px 6px 0 0;
.falutChooseTitle {
cursor: all-scroll;
background-color: #c0c0c0;
height: 30px;
line-height: 30px;
color: #000;
padding-left: 10px;
border-radius: 6px 6px 0 0;
}
#faultChoose{
width: 510px;
position: absolute;
left: 50%;
top: 0;
border-radius: 6px;
z-index:2009;
background-color: #E2E2E2;
#faultChoose {
width: 510px;
position: absolute;
left: 50%;
top: 0;
border-radius: 6px;
z-index: 2009;
background-color: #e2e2e2;
}
.faultChooseFoot{
display: inline-block;
float: right;
margin-right: 20px;
margin-top: 20px;
.faultChooseFoot {
display: inline-block;
float: right;
margin-right: 20px;
margin-top: 20px;
}
.closeFalutChoose{
position: absolute;
right: 0px;
top: 0px;
width: 30px;
height: 30px;
cursor: pointer;
line-height: 30px;
.closeFalutChoose {
position: absolute;
right: 0px;
top: 0px;
width: 30px;
height: 30px;
cursor: pointer;
line-height: 30px;
}
.closeFalutChooseIn{
font-size: 20px;
margin-left: 5px;
background-color: #f00;
color: #FFF;
border: 1px solid #fff;
border-radius: 5px;
.closeFalutChooseIn {
font-size: 20px;
margin-left: 5px;
background-color: #f00;
color: #fff;
border: 1px solid #fff;
border-radius: 5px;
}
.img-button{
width: 30px;
height: 30px;
background: #EBEBEB;
border: 2px inset #fff;
border-radius: 5px;
.img-button {
width: 30px;
height: 30px;
background: #ebebeb;
border: 2px outset #fff;
border-radius: 5px;
}
.img-button:hover{
border: 2px outset #fff;
.img-button:hover {
border: 2px outset #fff;
}
.img-button:active{
border: 2px outset #fff;
.img-button:active {
border: 2px inset #fff;
}
.button-box{
padding: 3px;
background: #EBEBEB;
width: 36px;
height: 36px;
border-radius: 5px;
margin: 3px;
cursor: pointer;
.button-box {
padding: 3px;
background: #ebebeb;
width: 36px;
height: 36px;
border-radius: 5px;
margin: 3px;
cursor: pointer;
}
</style>