增加大铁仿真display
This commit is contained in:
ival
parent
932b2e1d79
commit
7b9bb93103
@ -23,10 +23,38 @@ export default {
|
||||
data () {
|
||||
return {
|
||||
visible: true,
|
||||
graphicType: Object.fromEntries(Object.keys(graphic).filter(type => !['Group'].includes(type)).map(type => [type, type]))
|
||||
shapeType: 'compose',
|
||||
graphicType: [],
|
||||
builderMap: {
|
||||
'Compose': {
|
||||
init() {
|
||||
this.graphicType = Object.fromEntries(Object.keys(graphic).filter(type => !['Group'].includes(type)).map(type => [type, type]))
|
||||
},
|
||||
doBuilder(type) {
|
||||
|
||||
}
|
||||
},
|
||||
'Map': {
|
||||
init() {
|
||||
|
||||
},
|
||||
doBuilder(type) {
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
|
||||
},
|
||||
methods: {
|
||||
init() {
|
||||
if (shapeType) {
|
||||
this.graphicType = Object.fromEntries(Object.keys(graphic).filter(type => !['Group'].includes(type)).map(type => [type, type]));
|
||||
}
|
||||
},
|
||||
doBuilder(type) {
|
||||
const form = formBuilder.buildForm(elementConst[type]);
|
||||
const model = utils.deepClone(form.model);
|
||||
|
||||
79
src/iscs_new/plugins/shapeState/entry.vue
Normal file
79
src/iscs_new/plugins/shapeState/entry.vue
Normal file
@ -0,0 +1,79 @@
|
||||
<template>
|
||||
<div class="builder" v-show="visible">
|
||||
<div class="container">
|
||||
////
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import * as graphic from '../../core/graphic';
|
||||
import * as utils from '@/iscs_new/utils/utils';
|
||||
import shapeType from '@/iscs_new/constant/shapeType.js';
|
||||
import orders from '@/iscs_new/utils/orders';
|
||||
import elementConst from '@/iscs_new/core/form/elementConst';
|
||||
import formBuilder from '@/iscs_new/core/form/formBuilder';
|
||||
import { EventBus } from '@/scripts/event-bus';
|
||||
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
visible: true,
|
||||
graphicType: Object.fromEntries(Object.keys(graphic).filter(type => !['Group'].includes(type)).map(type => [type, type]))
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
doBuilder(type) {
|
||||
const form = formBuilder.buildForm(elementConst[type]);
|
||||
const model = utils.deepClone(form.model);
|
||||
model.code = utils.getUID(type);
|
||||
model.type = type;
|
||||
model.name = '<名称>';
|
||||
model.base.position = [300, 100];
|
||||
model.stateList = [];
|
||||
this.$iscs && this.$iscs.render([{model, action: {shapeType: shapeType.Element, order: orders.Add}}]);
|
||||
EventBus.$emit('getComposeElemList');
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.builder {
|
||||
background: #f1f1f1;
|
||||
height: 100%;
|
||||
width: 130px;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
/*滚动条整体样式*/
|
||||
width : 5px;
|
||||
/*高宽分别对应横竖滚动条的尺寸*/
|
||||
height: 1px;
|
||||
}
|
||||
&::-webkit-scrollbar-thumb {
|
||||
/*滚动条里面小方块*/
|
||||
border-radius : 10px;
|
||||
background-color: lightskyblue;
|
||||
background-image: -webkit-linear-gradient(
|
||||
45deg,
|
||||
rgba(255, 255, 255, 0.2) 25%,
|
||||
transparent 25%,
|
||||
transparent 50%,
|
||||
rgba(255, 255, 255, 0.2) 50%,
|
||||
rgba(255, 255, 255, 0.2) 75%,
|
||||
transparent 75%,
|
||||
transparent
|
||||
);
|
||||
}
|
||||
&::-webkit-scrollbar-track {
|
||||
/*滚动条里面轨道*/
|
||||
box-shadow : inset 0 0 5px rgba(0, 0, 0, 0.2);
|
||||
background : #ededed;
|
||||
border-radius: 7px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
67
src/iscs_new/plugins/shapeState/index.js
Normal file
67
src/iscs_new/plugins/shapeState/index.js
Normal file
@ -0,0 +1,67 @@
|
||||
import Vue from 'vue';
|
||||
import events from '@/iscs_new/utils/events';
|
||||
import entry from './entry.vue';
|
||||
|
||||
const VuePage = Vue.extend(entry);
|
||||
|
||||
const handle = {
|
||||
onClick(e) {
|
||||
if (!e) {
|
||||
this.page.type = '';
|
||||
}
|
||||
},
|
||||
onContextMenu(e) {
|
||||
if (!e) {
|
||||
this.page.type = '';
|
||||
}
|
||||
}
|
||||
}
|
||||
class ShapeBuilder {
|
||||
constructor(map) {
|
||||
this.zr = map.getZr();
|
||||
this.map = map;
|
||||
this.page = this.initUI();
|
||||
}
|
||||
|
||||
initUI() {
|
||||
const el = this.zr.dom;
|
||||
const page = new VuePage({
|
||||
el: document.createElement('div'),
|
||||
data () {}
|
||||
});
|
||||
|
||||
el.page = page;
|
||||
el.dom = page.$el;
|
||||
el.grSelectStyle = {};
|
||||
el.appendChild(el.dom);
|
||||
return page;
|
||||
}
|
||||
|
||||
addEventListener() {
|
||||
if (this.map) {
|
||||
this.map.on(events.Click, handle.onClick, this);
|
||||
this.map.on(events.ContextMenu, handle.onContextMenu, this);
|
||||
}
|
||||
}
|
||||
|
||||
removeEventListener() {
|
||||
if (this.map) {
|
||||
this.map.off(events.Click, handle.onClick, this);
|
||||
this.map.off(events.ContextMenu, handle.onContextMenu, this);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export default {
|
||||
el: null,
|
||||
install(map) {
|
||||
this.el = new ShapeBuilder(map);
|
||||
this.el.addEventListener();
|
||||
},
|
||||
uninstall(map) {
|
||||
if (this.el) {
|
||||
this.el.removeEventListener();
|
||||
this.el = null;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -30,6 +30,7 @@ const Jlmap3dOtherVR = () => import('@/views/jlmap3d/maintainer/jl3dothervr');
|
||||
// const Jl3dMaintainer = () => import('@/views/jlmap3d/maintainer/jl3dmaintainer');
|
||||
|
||||
const DisplayNew = () => import('@/views/newMap/displayNew/index');
|
||||
const DisplayCity = () => import('@/views/newMap/displayCity/index');
|
||||
const DesignDisplayNew = () => import('@/views/newMap/displayNew/scriptDisplay/scriptPreview/index');
|
||||
const PracticeDisplay = () => import('@/views/newMap/displayNew/practiceDisplay');
|
||||
const BigLPFStrategy = () => import('@/views/newMap/displayNew/bigLPFStrategy');
|
||||
@ -371,6 +372,11 @@ export const publicAsyncRoute = [
|
||||
component: DisplayNew,
|
||||
hidden: true
|
||||
},
|
||||
{
|
||||
path: '/displayCity/:mode',
|
||||
component: DisplayCity,
|
||||
hidden: true
|
||||
},
|
||||
{
|
||||
path: '/design/displayNew/:mode',
|
||||
component: DesignDisplayNew,
|
||||
|
||||
284
src/views/newMap/displayCity/demon/addFault.vue
Normal file
284
src/views/newMap/displayCity/demon/addFault.vue
Normal file
@ -0,0 +1,284 @@
|
||||
<template>
|
||||
<div class="addRules">
|
||||
<div class="addRulesInner">
|
||||
<div class="addRulesInnerTitle">新增故障</div>
|
||||
<div class="closeAddRulesInner" @click="addRulesClose">
|
||||
<span class="el-icon-close closeAddRulesIn" />
|
||||
</div>
|
||||
<el-form ref="form" :model="faultRule" label-width="100px" style="margin-left:15px;">
|
||||
<el-form-item label="目标设备">
|
||||
<!-- faultRule.targetDeviceCode -->
|
||||
<el-input v-model="targetDevice.name" disabled size="small" class="inputModelClass" />
|
||||
<!--<el-button :type="field === 'targetActive' ? 'danger' : 'primary'" size="small" @click="hover('targetActive')">{{ $t('map.activate') }}</el-button>-->
|
||||
</el-form-item>
|
||||
<el-form-item label="触发方式">
|
||||
<el-select v-model="triggerMode" @change="changeTriggerMode">
|
||||
<el-option
|
||||
v-for="item in triggerModeList"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="故障类型">
|
||||
<el-select v-model="faultRule.faultType" placeholder="请选择" class="inputModelClass">
|
||||
<el-option
|
||||
v-for="item in faultTypeList"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item v-if="triggerMode === 'DEVICE'" label="触发设备">
|
||||
<!-- faultRule.condition.triggerDeviceCode -->
|
||||
<el-input v-model="triggerDevice" size="small" disabled class="inputModelClass" />
|
||||
<el-button :type="field === 'triggerActive' ? 'danger' : 'primary'" size="small" @click="hover('triggerActive')">{{ $t('map.activate') }}</el-button>
|
||||
</el-form-item>
|
||||
<el-form-item v-if="triggerMode === 'DEVICE'" label="触发状态">
|
||||
<!-- <el-input v-model="faultRule.condition.triggerDeviceStatus" size="small" class="inputModelClass" /> -->
|
||||
<el-select v-model="faultRule.condition.triggerDeviceStatus" placeholder="请选择" class="inputModelClass">
|
||||
<el-option
|
||||
v-for="item in triggerStatusList"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item v-if="triggerMode === 'DEVICE'" label="关联设备">
|
||||
<el-input v-model="triggerAssociatedDevice" size="small" disabled class="inputModelClass" />
|
||||
<el-button :type="field === 'triggerAssociated'? 'danger': 'primary'" size="small" @click="hover('triggerAssociated')">{{ $t('map.activate') }}</el-button>
|
||||
</el-form-item>
|
||||
<el-form-item v-if="triggerMode === 'TIME'" label="触发时间">
|
||||
<el-date-picker
|
||||
v-model="faultRule.condition.triggeringTime"
|
||||
type="datetime"
|
||||
placeholder="选择日期时间"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<span class="addRulesFooter">
|
||||
<el-button size="medium" type="primary" @click="addRulesCreate">{{ $t('global.confirm') }}</el-button>
|
||||
<el-button size="medium" @click="addRulesClose">{{ $t('global.cancel') }}</el-button>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { FaultStatusEnum } from '@/scripts/FaultDicNew';
|
||||
import { setFailureModeNew} from '@/api/simulation';
|
||||
import { deviceFaultType} from '@/scripts/cmdPlugin/Config';
|
||||
// 添加故障
|
||||
export default {
|
||||
name: 'AddChoose',
|
||||
props: {
|
||||
targetDevice: {
|
||||
type: Object,
|
||||
required: true
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
field:'',
|
||||
triggerStatusList:[],
|
||||
faultTypeList:[],
|
||||
faultRule:{
|
||||
targetDeviceCode:'',
|
||||
targetDeviceType:'',
|
||||
faultType:'',
|
||||
condition:{
|
||||
triggerDeviceCode:'',
|
||||
triggerDeviceStatus:'',
|
||||
triggerDeviceType :'',
|
||||
type:'DEVICE',
|
||||
triggeringTime: '',
|
||||
triggerAssociatedDeviceCode: ''
|
||||
}
|
||||
},
|
||||
// targetDevice:'',
|
||||
triggerDevice:'',
|
||||
triggerAssociatedDevice: '',
|
||||
triggerMode: 'DEVICE',
|
||||
triggerModeList: [
|
||||
{label: '设备触发', value: 'DEVICE'},
|
||||
{label: '时间触发', value: 'TIME'}
|
||||
]
|
||||
// rules:{
|
||||
// targetDevice:[
|
||||
// { required: true, message:'请选择目标设备', trigger: 'blur' }
|
||||
// ],
|
||||
// triggerDevice:[
|
||||
// { required: true, message:'请选择触发设备', trigger: 'blur' }
|
||||
// ],
|
||||
// faultRule:{
|
||||
// faultType:[
|
||||
// { required: true, message:'请选择故障类型', trigger: 'blur' },
|
||||
// { required: true, message:'请选择故障类型', trigger: 'change' }
|
||||
// ]
|
||||
// }
|
||||
// }
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
'$store.state.menuOperation.selectedCount':function(em) {
|
||||
const device = this.$store.state.menuOperation.selected;
|
||||
if (device.code) {
|
||||
this.deviceSelect(device);
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
},
|
||||
methods:{
|
||||
deviceSelect(em) {
|
||||
if (this.field.toUpperCase() === 'triggerAssociated'.toUpperCase()) {
|
||||
// if (em._type == 'Station') {
|
||||
// em = this.$store.getters['map/getDeviceByCode'](em.zcCode);
|
||||
// }
|
||||
// this.faultRule.targetDeviceType = this.covertType(em._type);
|
||||
// this.faultRule.targetDeviceCode = em.code;
|
||||
if (em._type.toUpperCase() === 'Section'.toUpperCase() && em.parentName) {
|
||||
this.triggerAssociatedDevice = em._type + '-' + em.parentName + '-' + em.name;
|
||||
} else {
|
||||
this.triggerAssociatedDevice = em._type + '-' + em.name;
|
||||
}
|
||||
this.faultRule.condition.triggerAssociatedDeviceCode = em.code;
|
||||
} else if (this.field.toUpperCase() === 'triggerActive'.toUpperCase()) {
|
||||
this.faultRule.condition.triggerDeviceType = this.covertType(em._type);
|
||||
this.faultRule.condition.triggerDeviceCode = em.code;
|
||||
if (em._type.toUpperCase() === 'Section'.toUpperCase() && em.parentName) {
|
||||
this.triggerDevice = em._type + '-' + em.parentName + '-' + em.name;
|
||||
} else if (em._type.toUpperCase() === 'Train'.toUpperCase()) {
|
||||
this.triggerDevice = em._type + '-' + em.code;
|
||||
} else {
|
||||
this.triggerDevice = em._type + '-' + em.name;
|
||||
}
|
||||
this.triggerStatusList = [];
|
||||
const faultStatus = FaultStatusEnum[this.faultRule.condition.triggerDeviceType];
|
||||
if (faultStatus) {
|
||||
const list = Object.keys(faultStatus);
|
||||
list.forEach(key=>{
|
||||
this.triggerStatusList.push({label:faultStatus[key], value:key});
|
||||
});
|
||||
}
|
||||
this.field = '';
|
||||
this.faultRule.condition.triggerDeviceStatus = '';
|
||||
}
|
||||
},
|
||||
covertType(type) {
|
||||
switch (type) {
|
||||
case 'Section':return 'SECTION';
|
||||
case 'Signal':return 'SIGNAL';
|
||||
case 'Switch':return 'SWITCH';
|
||||
case 'Station':return 'STATION';
|
||||
case 'ZcControl':return 'ZC';
|
||||
case 'StationStand':return 'STAND';
|
||||
case 'Train':return 'TRAIN';
|
||||
}
|
||||
},
|
||||
hover(field) {
|
||||
if (this.field == '') {
|
||||
this.field = field;
|
||||
} else {
|
||||
this.field = '';
|
||||
}
|
||||
},
|
||||
addRulesCreate() {
|
||||
if (this.triggerDevice == '') {
|
||||
this.$messageBox('请选择触发设备');
|
||||
return;
|
||||
}
|
||||
if (this.faultRule.condition.triggerDeviceStatus == '') {
|
||||
this.$messageBox('请选择触发状态');
|
||||
return;
|
||||
}
|
||||
if (this.faultRule.faultType == '') {
|
||||
this.$messageBox('请选择故障类型');
|
||||
return;
|
||||
}
|
||||
console.log(this.faultRule, '-------------');
|
||||
setFailureModeNew(this.faultRule, this.$route.query.group).then(res=>{
|
||||
this.$emit('closeAddRules');
|
||||
this.$emit('reload');
|
||||
}).catch((error)=>{
|
||||
this.$messageBox('创建故障失败: ' + error.message);
|
||||
});
|
||||
},
|
||||
addRulesClose() {
|
||||
this.resetForm();
|
||||
this.$emit('closeAddRules');
|
||||
},
|
||||
|
||||
initValue() {
|
||||
this.faultTypeList = deviceFaultType[this.targetDevice._type];
|
||||
this.faultRule.targetDeviceCode = this.targetDevice.code;
|
||||
this.faultRule.targetDeviceType = this.covertType(this.targetDevice._type);
|
||||
},
|
||||
resetForm() {
|
||||
this.triggerDevice = '';
|
||||
this.faultRule = {
|
||||
targetDeviceCode:'',
|
||||
targetDeviceType:'',
|
||||
faultType:'',
|
||||
condition:{
|
||||
triggerDeviceCode:'',
|
||||
triggerDeviceStatus:'',
|
||||
triggerDeviceType :'',
|
||||
type:'DEVICE',
|
||||
triggeringTime: '',
|
||||
triggerAssociatedDeviceCode: ''
|
||||
}
|
||||
};
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.addRules{
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
left: 0;
|
||||
top: 40px;
|
||||
}
|
||||
.addRulesInner{
|
||||
position: relative;
|
||||
width: 380px;
|
||||
margin-top:6px;
|
||||
background: #fff;
|
||||
border-radius: 10px;
|
||||
border: 1px #ccc solid;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
box-shadow: 3px 3px 3px #a0a0a0;
|
||||
z-index:2;
|
||||
}
|
||||
.queryList{
|
||||
height: 300px;
|
||||
overflow: auto;
|
||||
}
|
||||
.inputModelClass{
|
||||
width:150px;
|
||||
}
|
||||
.addRulesInnerTitle{
|
||||
padding: 10px;
|
||||
font-size: 14px;
|
||||
}
|
||||
.closeAddRulesInner{
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
top: 9px;
|
||||
width: 19px;
|
||||
height: 19px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.closeAddRulesIn{
|
||||
font-size: 19px;
|
||||
}
|
||||
.addRulesFooter{
|
||||
margin-left: 116px;
|
||||
display: inline-block;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
</style>
|
||||
196
src/views/newMap/displayCity/demon/equipment.vue
Normal file
196
src/views/newMap/displayCity/demon/equipment.vue
Normal file
@ -0,0 +1,196 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-drawer
|
||||
title="设备管理"
|
||||
:visible.sync="show"
|
||||
direction="ltr"
|
||||
:before-close="doClose"
|
||||
custom-class="dialog_box"
|
||||
size="43%"
|
||||
>
|
||||
<div style="margin-bottom: 3px; overflow: hidden; padding: 0 10px;">
|
||||
<div class="plc_box">名称: {{ plcInfo.name }}</div>
|
||||
<div class="plc_box">状态: <span :style="{'color': plcInfo.status ? 'green' : 'red'}">{{ plcInfo.status ? '在线' : '不在线' }}</span></div>
|
||||
<el-button type="text" size="small" class="freshen_box" @click="getList">刷新</el-button>
|
||||
</div>
|
||||
<el-table :data="tableData" border style="width: 100%; max-height: calc(100% - 24px); overflow: auto;">
|
||||
<el-table-column prop="code" label="设备编号" width="180" />
|
||||
<el-table-column prop="typeName" label="设备类型" width="180" />
|
||||
<el-table-column prop="vrDeviceCode" label="连接设备编码">
|
||||
<template slot-scope="scope">
|
||||
<div v-if="scope.row.vrDeviceCode" class="flex_box">{{ scope.row.vrDeviceName }}</div>
|
||||
<div v-if="!scope.row.vrDeviceCode" class="flex_box">(空)</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作">
|
||||
<template slot-scope="scope">
|
||||
<el-button :type="scope.row.buttonShowType ? 'danger' : 'primary'" size="small" @click="handleClick(scope.row, scope.$index)">连接</el-button>
|
||||
<el-button size="small" @click="cancel(scope.row, scope.$index)">断开</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-drawer>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getAllSimulationList, postSimulationConnectById, putSimulationDisconnectById } from '@/api/simulation.js';
|
||||
import ConstConfig from '@/scripts/ConstConfig';
|
||||
import { EventBus } from '@/scripts/event-bus';
|
||||
import { getSessionStorage } from '@/utils/auth';
|
||||
|
||||
export default {
|
||||
name: 'Equipment',
|
||||
data() {
|
||||
return {
|
||||
show: false,
|
||||
group: '',
|
||||
tableData: [],
|
||||
typeList: ConstConfig.ConstSelect.projectDeviceTypeList,
|
||||
plcInfo: {
|
||||
name: '',
|
||||
status: ''
|
||||
},
|
||||
index: 0,
|
||||
selected: {},
|
||||
typeObj: {
|
||||
Section: '区段',
|
||||
Signal: '信号机',
|
||||
Switch: '道岔',
|
||||
Psd: '屏蔽门',
|
||||
StationStand: '站台'
|
||||
}
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
project() {
|
||||
return getSessionStorage('project');
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
EventBus.$on('selectDevice', (data) => {
|
||||
this.selected = data;
|
||||
this.tableData[this.index]['buttonShowType'] = false;
|
||||
this.tableData.splice(this.index, 1, this.tableData[this.index]);
|
||||
this.$store.dispatch('map/selectDeviceCode', {flag: false, type: ''});
|
||||
this.connect(this.tableData[this.index]);
|
||||
});
|
||||
},
|
||||
async beforeDestroy() {
|
||||
EventBus.$off('selectDevice');
|
||||
},
|
||||
methods: {
|
||||
async doShow() {
|
||||
this.show = true;
|
||||
this.group = this.$route.query.group;
|
||||
this.getList();
|
||||
},
|
||||
async getList() {
|
||||
try {
|
||||
const res = await getAllSimulationList(this.group);
|
||||
this.tableData = [];
|
||||
res.data.forEach((item, index) => {
|
||||
if (item.type == 'PLC_GATEWAY') {
|
||||
this.plcInfo = {
|
||||
name: 'PLC网关',
|
||||
status: item.online
|
||||
};
|
||||
} else {
|
||||
item.buttonShowType = false;
|
||||
item.typeName = this.typeList.find(el => el.value == item.type).label;
|
||||
if (item.vrDeviceCode) {
|
||||
item.vrDeviceName = this.$store.getters['map/getDeviceByCode'](item.vrDeviceCode).name;
|
||||
}
|
||||
if (this.project == 'heb' || this.project == 'designheb') {
|
||||
if (item.type == 'SWITCH') {
|
||||
this.tableData.push(item);
|
||||
}
|
||||
} else {
|
||||
this.tableData.push(item);
|
||||
}
|
||||
}
|
||||
});
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
}
|
||||
},
|
||||
doClose() {
|
||||
this.show = false;
|
||||
},
|
||||
handleClick(row, index) {
|
||||
row.buttonShowType = !row.buttonShowType;
|
||||
this.index = index;
|
||||
this.tableData.splice(index, 1, row);
|
||||
this.$store.dispatch('map/selectDeviceCode', {flag: row.buttonShowType, type: row.type});
|
||||
},
|
||||
async connect(row) {
|
||||
this.$confirm(`您确定连接${this.typeObj[this.selected._type] || '设备'}: ${this.selected.name}, 是否继续?`, '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}).then(async () => {
|
||||
try {
|
||||
const res = await postSimulationConnectById(this.group, row.id, this.selected.code);
|
||||
if (res && res.code == 200) {
|
||||
this.$message.success('连接成功!');
|
||||
this.tableData[this.index]['vrDeviceCode'] = this.selected.code;
|
||||
this.tableData[this.index]['vrDeviceName'] = this.selected.name;
|
||||
this.tableData.splice(this.index, 1, this.tableData[this.index]);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
}
|
||||
});
|
||||
},
|
||||
async cancel(row, index) {
|
||||
this.$confirm('您确定将次设备断开, 是否继续?', '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}).then(async () => {
|
||||
if (row.vrDeviceCode) {
|
||||
row.vrDeviceCode = '';
|
||||
row.vrDeviceName = '';
|
||||
this.tableData.splice(index, 1, row);
|
||||
try {
|
||||
const res = await putSimulationDisconnectById(this.group, row.id);
|
||||
if (res && res.code == 200) {
|
||||
this.$message.success('断开成功!');
|
||||
}
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style rel="stylesheet/scss" lang="scss" scoped>
|
||||
.plc_box{
|
||||
float: left;
|
||||
margin-right: 40px;
|
||||
padding: 9px;
|
||||
}
|
||||
.freshen_box{
|
||||
float: right;
|
||||
}
|
||||
.flex_box{
|
||||
float: left;
|
||||
margin-right: 5px;
|
||||
line-height: 30px;
|
||||
}
|
||||
/deep/ {
|
||||
.el-dialog__wrapper{
|
||||
width: 800px;
|
||||
}
|
||||
.dialog_box{
|
||||
height: 100%;
|
||||
}
|
||||
.el-dialog__body{
|
||||
padding-top: 6px;
|
||||
height: calc(100% - 54px);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
600
src/views/newMap/displayCity/demon/faultChoose.vue
Normal file
600
src/views/newMap/displayCity/demon/faultChoose.vue
Normal file
@ -0,0 +1,600 @@
|
||||
<template>
|
||||
<div v-if="dialogShow" id="faultChoose">
|
||||
<div class="falutChooseTitle">{{ title }}</div>
|
||||
<div class="closeFalutChoose" @click="closeFaultChoose">
|
||||
<span class="el-icon-close closeFalutChooseIn" />
|
||||
</div>
|
||||
<el-card class="triggerFaultInfo">
|
||||
<el-button type="primary" size="small" style="margin-bottom:10px;" @click="isTableShow=!isTableShow">{{ isTableShow?'隐藏列表':'显示列表' }}</el-button>
|
||||
<el-table v-if="isTableShow" :data="faultList" height="300" border style="width: 100%;font-size:13px;">
|
||||
<el-table-column prop="targetDeviceCode" label="目标设备" width="220">
|
||||
<template slot-scope="scope">
|
||||
<span>{{ `${deviceMap[scope.row.targetDeviceType]}${formatNameByCode(scope.row.targetDeviceCode)}` }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="faultType" label="故障类型">
|
||||
<template slot-scope="scope">
|
||||
<span>{{ covertFaultType(scope.row) }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="condition" label="列车" width="100">
|
||||
<template slot-scope="scope">
|
||||
<span>{{ `${deviceMap[scope.row.condition.triggerDeviceType] || ''}${formatNameByCode(scope.row.condition.triggerDeviceCode)}` }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="condition" label="到达区段" width="180">
|
||||
<template slot-scope="scope">
|
||||
<span>{{ `${formatNameByCode(scope.row.condition.triggerAssociatedDeviceCode)}` }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="condition.condition.triggerTime" label="触发时间" width="150" />
|
||||
<el-table-column prop="triggeringTime" label="故障状态">
|
||||
<template slot-scope="scope">
|
||||
<span>{{ scope.row.triggeringTime? '已触发': '未触发' }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作">
|
||||
<template slot-scope="scope">
|
||||
<el-button v-if="!scope.row.triggeringTime" type="text" size="small" @click="handleDelete(scope.row)">取消</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-card>
|
||||
<div class="targetCard">
|
||||
<div class="targetCardHead">
|
||||
<el-button style="padding:3px 0" type="text" @click="addRulesCreate">新增</el-button>
|
||||
</div>
|
||||
<div>
|
||||
<el-form ref="form" :model="faultRule" :inline="true" label-width="100px" style="margin-left:15px;">
|
||||
<el-form-item label="目标设备" class="targetFormItem">
|
||||
<el-input v-model="targetDeviceName" disabled size="small" class="inputModelClass" style="width: 300px;" />
|
||||
</el-form-item>
|
||||
<el-form-item label="故障类型" class="targetFormItem">
|
||||
<el-select v-model="faultRule.faultType" placeholder="请选择" class="inputModelClass" size="small" style="width: 300px;">
|
||||
<el-option
|
||||
v-for="item in faultTypeList"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item v-if="triggerMode === 'DEVICE'" label="列车" class="targetFormItem">
|
||||
<el-input v-model="triggerDevice" size="small" disabled class="inputModelClass" style="width: 240px;" />
|
||||
<el-button :type="field === 'triggerActive' ? 'danger' : 'primary'" size="small" @click="hover('triggerActive')">{{ $t('map.activate') }}</el-button>
|
||||
</el-form-item>
|
||||
<el-form-item v-if="triggerMode === 'DEVICE'" label="到达区段" class="targetFormItem">
|
||||
<el-input v-model="triggerAssociatedDevice" size="small" disabled class="inputModelClass" style="width: 240px;" />
|
||||
<el-button :type="field === 'triggerAssociated'? 'danger': 'primary'" size="small" @click="hover('triggerAssociated')">{{ $t('map.activate') }}</el-button>
|
||||
</el-form-item>
|
||||
<el-form-item v-if="triggerMode === 'TIME'" label="触发时间" class="targetFormItem">
|
||||
<el-date-picker
|
||||
v-model="faultRule.condition.triggerTime"
|
||||
size="small"
|
||||
format="yyyy-MM-dd HH:mm:ss"
|
||||
value-format="yyyy-MM-dd HH:mm:ss"
|
||||
type="datetime"
|
||||
placeholder="选择日期时间"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getSimulationFaultRules, setFailureModeNew, deleteFailureRule, cancelFailureModeNew } from '@/api/simulation';
|
||||
import ConstConfig from '@/scripts/ConstConfig';
|
||||
import { FaultStatusEnum } from '@/scripts/FaultDicNew';
|
||||
import ModelType from '@/jmapNew/constant/deviceType';
|
||||
import { deviceFaultType } from '@/scripts/cmdPlugin/Config';
|
||||
|
||||
// 故障列表
|
||||
export default {
|
||||
name: 'FaultChoose',
|
||||
props: {
|
||||
group: {
|
||||
type: String,
|
||||
required: true
|
||||
},
|
||||
offset: {
|
||||
type: Number,
|
||||
required: true
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
dialogShow: false,
|
||||
loading: false,
|
||||
isAdd:false,
|
||||
isTableShow:true,
|
||||
deviceMap: {},
|
||||
simulationFault:{},
|
||||
faultList: [],
|
||||
faultRule:{
|
||||
targetDeviceCode:'',
|
||||
targetDeviceType:'',
|
||||
faultType:'',
|
||||
condition:{
|
||||
triggerDeviceCode:'',
|
||||
triggerDeviceStatus:'',
|
||||
triggerDeviceType :'',
|
||||
type:'DEVICE',
|
||||
triggerTime: '',
|
||||
triggerAssociatedDeviceCode: ''
|
||||
}
|
||||
},
|
||||
triggerDevice:'',
|
||||
triggerAssociatedDevice: '',
|
||||
triggerMode: 'DEVICE',
|
||||
triggerModeList: [
|
||||
{label: '设备触发', value: 'DEVICE'},
|
||||
{label: '时间触发', value: 'TIME'}
|
||||
],
|
||||
field:'',
|
||||
triggerStatusList:[],
|
||||
faultTypeList:[],
|
||||
targetDeviceName: ''
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
title() {
|
||||
return '自动故障设置';
|
||||
},
|
||||
lineCode() {
|
||||
return this.$route.query.lineCode;
|
||||
},
|
||||
targetDevice() {
|
||||
return this.$store.state.training.triggerFaultDevice;
|
||||
}
|
||||
},
|
||||
watch:{
|
||||
'$store.state.socket.autoFaultTrigger':function(val) {
|
||||
this.dialogShow && this.getSimulationFaultRules();
|
||||
},
|
||||
'$store.state.menuOperation.selectedCount':function(em) {
|
||||
const device = this.$store.state.menuOperation.selected;
|
||||
if (device && device.code) {
|
||||
this.deviceSelect(device);
|
||||
}
|
||||
},
|
||||
targetDevice: function(device) {
|
||||
this.targetDeviceName = this.targetDevice.name || this.targetDevice.code;
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.deviceMap = [];
|
||||
ConstConfig.ConstSelect.simulationDeviceList.forEach(elem => {
|
||||
this.deviceMap[elem.value] = elem.label;
|
||||
});
|
||||
},
|
||||
methods: {
|
||||
formatNameByCode(code) {
|
||||
let name = '';
|
||||
const device = this.$store.getters['map/getDeviceByCode'](code);
|
||||
if (device) {
|
||||
switch (device._type) {
|
||||
case ModelType.Signal:
|
||||
case ModelType.Switch:
|
||||
case ModelType.Station:
|
||||
case ModelType.Section: {
|
||||
if (device.parentName) {
|
||||
name += device.parentName + '-' + device.name;
|
||||
} else {
|
||||
name += device.name;
|
||||
}
|
||||
|
||||
break;
|
||||
}
|
||||
case ModelType.Train:
|
||||
name = device.code;
|
||||
break;
|
||||
}
|
||||
if (device.stationCode) {
|
||||
const station = this.$store.getters['map/getDeviceByCode'](device.stationCode);
|
||||
if (station) {
|
||||
name += '【' + station.name + '】';
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return name;
|
||||
},
|
||||
hover(field) {
|
||||
if (this.field == '') {
|
||||
this.field = field;
|
||||
} else {
|
||||
this.field = '';
|
||||
}
|
||||
},
|
||||
handleDelete(row) {
|
||||
cancelFailureModeNew(row.id, this.$route.query.group).then(resp => {
|
||||
this.getSimulationFaultRules();
|
||||
}).catch(() => {
|
||||
this.$message.error('取消故障失败！');
|
||||
});
|
||||
},
|
||||
covertType(type) {
|
||||
switch (type) {
|
||||
case 'SECTION':return 'Section';
|
||||
case 'SIGNAL':return 'Signal';
|
||||
case 'SWITCH':return 'Switch';
|
||||
case 'STATION':return 'Station';
|
||||
case 'ZC':return 'ZcControl';
|
||||
case 'STAND':return 'StationStand';
|
||||
case 'TRAIN':return 'Train';
|
||||
case 'Section':return 'SECTION';
|
||||
case 'Signal':return 'SIGNAL';
|
||||
case 'Switch':return 'SWITCH';
|
||||
case 'Station':return 'STATION';
|
||||
case 'ZcControl':return 'ZC';
|
||||
case 'StationStand':return 'STAND';
|
||||
case 'Train':return 'TRAIN';
|
||||
}
|
||||
},
|
||||
covertFaultType(row) {
|
||||
let faultType = '';
|
||||
if (row && row.id) {
|
||||
let type = this.covertType(row.targetDeviceType);
|
||||
if (type == 'Station') {
|
||||
type = 'ZcControl';
|
||||
}
|
||||
const currentList = deviceFaultType[type];
|
||||
currentList.forEach(temp=>{
|
||||
if (temp.value === row.faultType) {
|
||||
faultType = temp.label;
|
||||
}
|
||||
});
|
||||
}
|
||||
return faultType;
|
||||
},
|
||||
closeFaultChoose() {
|
||||
this.dialogShow = false;
|
||||
this.isAdd = false;
|
||||
if (this.$refs.addFault) {
|
||||
this.$refs.addFault.resetForm();
|
||||
}
|
||||
},
|
||||
closeAddRules() {
|
||||
this.isAdd = false;
|
||||
},
|
||||
getSimulationFaultRules() {
|
||||
if (this.dialogShow) {
|
||||
getSimulationFaultRules(this.$route.query.group).then(resp => {
|
||||
this.faultList = resp.data;
|
||||
}).catch(() => {
|
||||
this.$messageBox('获取数据异常');
|
||||
});
|
||||
}
|
||||
},
|
||||
changeTriggerMode(val) {
|
||||
this.resetForm();
|
||||
this.triggerMode = val;
|
||||
this.faultRule.condition.type = val;
|
||||
},
|
||||
doShow() {
|
||||
this.dialogShow = true;
|
||||
this.getSimulationFaultRules();
|
||||
this.resetForm();
|
||||
this.faultTypeList = deviceFaultType[this.targetDevice._type];
|
||||
this.faultRule.targetDeviceCode = this.targetDevice.code;
|
||||
this.faultRule.targetDeviceType = this.covertType(this.targetDevice._type);
|
||||
this.faultRule.faultType = (this.faultTypeList[0] || {}).value;
|
||||
this.$nextTick(()=>{
|
||||
this.dragEvent();
|
||||
});
|
||||
},
|
||||
resetForm() {
|
||||
this.getSimulationFaultRules();
|
||||
this.field = '';
|
||||
this.triggerDevice = '';
|
||||
this.triggerAssociatedDevice = '';
|
||||
this.faultRule = {
|
||||
targetDeviceCode:this.targetDevice.code,
|
||||
targetDeviceType:this.covertType(this.targetDevice._type),
|
||||
faultType:'',
|
||||
condition:{
|
||||
triggerDeviceCode:'',
|
||||
triggerDeviceStatus:'',
|
||||
triggerDeviceType :'',
|
||||
type:'DEVICE',
|
||||
triggerTime: '',
|
||||
triggerAssociatedDeviceCode: ''
|
||||
}
|
||||
};
|
||||
},
|
||||
doClose() {
|
||||
this.dialogShow = false;
|
||||
},
|
||||
handleAdd() {
|
||||
this.isAdd = true;
|
||||
this.$nextTick(() => {
|
||||
this.$refs.addFault.initValue();
|
||||
});
|
||||
},
|
||||
deleteFailure(index, row) {
|
||||
event.cancelBubble = true;
|
||||
this.$confirm('删除故障规则，是否继续？', '提 示', {
|
||||
confirmButtonText: '确 定',
|
||||
cancelButtonText: '取 消',
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
deleteFailureRule(row.id).then(resp => {
|
||||
}).catch(error => {
|
||||
this.$message.error(`删除故障规则失败: ${error.message}`);
|
||||
});
|
||||
}).catch( () => { });
|
||||
},
|
||||
settingFailure(index, row, idx) {
|
||||
const faultModel = {ruleId: row.id, auto:true};
|
||||
// row['loading' + idx] = true;
|
||||
setFailureModeNew(faultModel, this.group).then(() => {
|
||||
this.getSimulationFaultRules();
|
||||
this.$message.success('设置自动故障成功');
|
||||
}).catch(() => {
|
||||
this.$messageBox('设置自动故障失败');
|
||||
});
|
||||
},
|
||||
cancleAutoFault() {
|
||||
const faultModel = {auto:false};
|
||||
setFailureModeNew(faultModel, this.group).then(() => {
|
||||
this.getSimulationFaultRules();
|
||||
this.$message.success('取消自动故障成功');
|
||||
}).catch(() => {
|
||||
this.$messageBox('取消自动故障失败');
|
||||
});
|
||||
},
|
||||
addRulesCreate() {
|
||||
if (this.triggerMode === 'DEVICE' && this.triggerDevice == '') {
|
||||
this.$messageBox('请选择触发设备');
|
||||
return;
|
||||
}
|
||||
if (this.triggerMode === 'DEVICE' && this.faultRule.condition.triggerDeviceStatus == '') {
|
||||
this.$messageBox('请选择触发状态');
|
||||
return;
|
||||
}
|
||||
if (this.faultRule.faultType == '') {
|
||||
this.$messageBox('请选择故障类型');
|
||||
return;
|
||||
}
|
||||
if (this.triggerMode === 'TIME' && this.faultRule.condition.triggerTime == '') {
|
||||
this.$messageBox('请选择触发时间');
|
||||
return;
|
||||
}
|
||||
if (this.triggerMode === 'DEVICE' && this.faultRule.condition.triggerDeviceType === 'TRAIN' && this.faultRule.condition.triggerDeviceStatus === 'Section' && this.faultRule.condition.triggerAssociatedDeviceCode == '') {
|
||||
this.$messageBox('请选择关联设备');
|
||||
return;
|
||||
}
|
||||
const param = {
|
||||
targetDeviceCode:this.targetDevice.code,
|
||||
targetDeviceType:this.covertType(this.targetDevice._type),
|
||||
faultType: this.faultRule.faultType,
|
||||
condition:{
|
||||
triggerDeviceCode: this.faultRule.condition.triggerDeviceCode || null,
|
||||
triggerDeviceStatus:this.faultRule.condition.triggerDeviceStatus || null,
|
||||
triggerDeviceType :this.faultRule.condition.triggerDeviceType || null,
|
||||
type:this.faultRule.condition.type,
|
||||
triggerTime: this.faultRule.condition.triggerTime || null,
|
||||
triggerAssociatedDeviceCode: this.faultRule.condition.triggerAssociatedDeviceCode || null
|
||||
}
|
||||
};
|
||||
setFailureModeNew(param, this.$route.query.group).then(res=>{
|
||||
this.$message.success('创建故障成功！');
|
||||
this.resetForm();
|
||||
}).catch((error)=>{
|
||||
this.$messageBox('创建故障失败: ' + error.message);
|
||||
});
|
||||
},
|
||||
deviceSelect(em) {
|
||||
if (this.field.toUpperCase() === 'triggerAssociated'.toUpperCase() && em._type.toUpperCase() === 'Section'.toUpperCase()) {
|
||||
if (em._type.toUpperCase() === 'Section'.toUpperCase() && em.parentName) {
|
||||
this.triggerAssociatedDevice = em._type + '-' + em.parentName + '-' + em.name;
|
||||
} else {
|
||||
this.triggerAssociatedDevice = em._type + '-' + em.name;
|
||||
}
|
||||
this.faultRule.condition.triggerAssociatedDeviceCode = em.code;
|
||||
} else if (this.field.toUpperCase() === 'triggerActive'.toUpperCase() && em._type.toUpperCase() === 'Train'.toUpperCase()) {
|
||||
this.faultRule.condition.triggerDeviceType = this.covertType(em._type);
|
||||
this.faultRule.condition.triggerDeviceCode = em.code;
|
||||
if (em._type.toUpperCase() === 'Section'.toUpperCase() && em.parentName) {
|
||||
this.triggerDevice = em._type + '-' + em.parentName + '-' + em.name;
|
||||
} else if (em._type.toUpperCase() === 'Train'.toUpperCase()) {
|
||||
this.triggerDevice = em._type + '-' + em.code;
|
||||
} else {
|
||||
this.triggerDevice = em._type + '-' + em.name;
|
||||
}
|
||||
this.triggerStatusList = [];
|
||||
const faultStatus = FaultStatusEnum[this.faultRule.condition.triggerDeviceType];
|
||||
if (faultStatus) {
|
||||
const list = Object.keys(faultStatus);
|
||||
list.forEach(key=>{
|
||||
this.triggerStatusList.push({label:faultStatus[key], value:key});
|
||||
});
|
||||
}
|
||||
this.field = '';
|
||||
this.faultRule.condition.triggerDeviceStatus = (this.triggerStatusList[0] || {}).value;
|
||||
}
|
||||
},
|
||||
dragEvent() {
|
||||
const offset = this.offset;
|
||||
const dialogHeaderEl = document.querySelector('.falutChooseTitle');
|
||||
const dragDom = document.querySelector('#faultChoose');
|
||||
dialogHeaderEl.style.cursor = 'move';
|
||||
|
||||
/** 获取原有属性 ie dom元素.currentStyle 火狐谷歌 window.getComputedStyle(dom元素, null);*/
|
||||
const sty = dragDom.currentStyle || window.getComputedStyle(dragDom, null);
|
||||
|
||||
dialogHeaderEl.onmousedown = (e) => {
|
||||
/** 鼠标按下，计算当前元素距离可视区的距离*/
|
||||
const disX = e.clientX - dialogHeaderEl.offsetLeft;
|
||||
const disY = e.clientY - dialogHeaderEl.offsetTop;
|
||||
|
||||
/** 获取到的值带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 .card .queryList .el-card .el-card__body .el-table--border .el-table__body-wrapper{
|
||||
height: 135px !important;
|
||||
overflow-y: auto !important;
|
||||
}
|
||||
#faultChoose .el-button--mini {
|
||||
margin-left: 5px;
|
||||
}
|
||||
.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;
|
||||
}
|
||||
/*定义滚动条轨道 内阴影+圆角*/
|
||||
#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;;
|
||||
}
|
||||
/*定义滑块 内阴影+圆角*/
|
||||
#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;
|
||||
}
|
||||
/*滑块效果*/
|
||||
#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);
|
||||
}
|
||||
/*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>
|
||||
<style scoped rel="stylesheet/scss" lang="scss">
|
||||
.triggerFaultInfo{
|
||||
margin-bottom:10px;
|
||||
padding: 10px 10px 10px 15px;
|
||||
}
|
||||
.triggerFaultList{
|
||||
font-size: 14px;
|
||||
margin-top: 10px;
|
||||
line-height: 20px;
|
||||
}
|
||||
.triggerFaultTitle{
|
||||
font-size: 15px;
|
||||
font-weight: bold;
|
||||
}
|
||||
.falutChooseTitle{
|
||||
padding: 15px;
|
||||
cursor: all-scroll;
|
||||
}
|
||||
#faultChoose{
|
||||
width: 1000px;
|
||||
position: absolute;
|
||||
left: 30%;
|
||||
top: 20%;
|
||||
background: #fff;
|
||||
padding:0px 0px 15px 0px;
|
||||
// transform: translate3d(-50%,-50%,0);
|
||||
border-radius: 6px;
|
||||
z-index:999;
|
||||
}
|
||||
.faultChooseFoot{
|
||||
display: inline-block;
|
||||
float: right;
|
||||
margin-right: 20px;
|
||||
margin-top: 20px;
|
||||
}
|
||||
.closeFalutChoose{
|
||||
position: absolute;
|
||||
right: 0px;
|
||||
top: 0px;
|
||||
width: 35px;
|
||||
height: 35px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.closeFalutChooseIn{
|
||||
font-size: 20px;
|
||||
margin-left: 5px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
.targetCard{
|
||||
box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
|
||||
border-top: 1px #ebeef5 solid;
|
||||
}
|
||||
.targetFormItem{
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
.targetCardHead{
|
||||
padding: 5px;
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
margin-bottom: 10px;
|
||||
border-bottom: 1px #f4f4f4 solid;
|
||||
text-align: right;
|
||||
padding-right: 15px;
|
||||
}
|
||||
</style>
|
||||
118
src/views/newMap/displayCity/demon/setTime.vue
Normal file
118
src/views/newMap/displayCity/demon/setTime.vue
Normal file
@ -0,0 +1,118 @@
|
||||
<template>
|
||||
<el-dialog v-dialogDrag :title="title" :visible.sync="show" width="550px" :before-close="doClose">
|
||||
<el-form ref="form" label-width="120px" :model="formModel" :rules="rules">
|
||||
<el-form-item :label="$t('display.setTime.systemTime')" prop="initTime">
|
||||
<el-time-picker
|
||||
v-model="formModel.initTime"
|
||||
:picker-options="pickerOptions"
|
||||
:placeholder="$t('display.setTime.anyTime')"
|
||||
@change="handleChange"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item v-if="hasNumber" :label="$t('display.setTime.loadTrainNum')" prop="loadNum">
|
||||
<el-input-number v-model="formModel.loadNum" :min="1" :max="maxNumber" :label="$t('display.setTime.selectLoadTrainNum')" />
|
||||
<span> {{ ` (${$t('display.setTime.maxTrainNum')} ：${maxNumber}) ` }} </span>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button @click="show = false">{{ $t('global.cancel') }}</el-button>
|
||||
<el-button type="primary" :loading="status" @click="handleSure">{{ $t('global.confirm') }}</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { prefixIntrger } from '@/utils/date';
|
||||
import { getLoadTrainNumber } from '@/api/simulation';
|
||||
|
||||
// 计划行车时间选择
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
show: false,
|
||||
formModel: {
|
||||
initTime: new Date(),
|
||||
loadNum: 1
|
||||
},
|
||||
maxNumber: 1,
|
||||
pickerOptions: { selectableRange: '00:00:00 - 23:59:59' },
|
||||
status: false
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
title() {
|
||||
return this.$t('display.setTime.setSimulationSystemTime');
|
||||
},
|
||||
hasNumber() {
|
||||
return this.$route.params.mode == 'demon' && this.$route.query.prdType == '04';
|
||||
},
|
||||
group() {
|
||||
return this.$route.query.group;
|
||||
},
|
||||
rules() {
|
||||
return {
|
||||
initTime: [
|
||||
{ required: true, message: this.$t('display.setTime.selectSystemTime'), trigger: 'change' },
|
||||
{
|
||||
validator(rule, value, callback) {
|
||||
if (this.maxNumber == 0) {
|
||||
callback(new Error(this.$t('display.setTime.selectValidStartTime')));
|
||||
} else {
|
||||
callback();
|
||||
}
|
||||
},
|
||||
trigger: 'change',
|
||||
maxNumber: this.maxNumber
|
||||
}
|
||||
],
|
||||
loadNum: [
|
||||
{ required: true, message: this.$t('display.setTime.selectTrainNum'), trigger: 'change' }
|
||||
|
||||
]
|
||||
};
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
doShow() {
|
||||
this.formModel.initTime = new Date(this.$store.state.training.initTime || null);
|
||||
this.handleChange(this.formModel.initTime);
|
||||
this.show = true;
|
||||
},
|
||||
doClose() {
|
||||
this.status = false;
|
||||
this.show = false;
|
||||
},
|
||||
handleChange(initTime) {
|
||||
this.formModel.loadNum = 0;
|
||||
if (this.hasNumber) {
|
||||
getLoadTrainNumber({ time: this.formatTime(initTime) }, this.group).then(resp => {
|
||||
this.maxNumber = parseInt(resp.data);
|
||||
});
|
||||
}
|
||||
},
|
||||
formatTime(initTime) {
|
||||
const hh = prefixIntrger(initTime.getHours(), 2);
|
||||
const mm = prefixIntrger(initTime.getMinutes(), 2);
|
||||
const ss = prefixIntrger(initTime.getSeconds(), 2);
|
||||
return `${hh}:${mm}:${ss}`;
|
||||
},
|
||||
handleSure() {
|
||||
this.$refs.form.validate((valid) => {
|
||||
if (valid) {
|
||||
this.status = true;
|
||||
const model = {
|
||||
initTime: this.formatTime(this.formModel.initTime)
|
||||
};
|
||||
|
||||
if (this.hasNumber) {
|
||||
model['loadNum'] = this.formModel.loadNum;
|
||||
}
|
||||
|
||||
this.$emit('ConfirmSelectBeginTime', model);
|
||||
this.doClose();
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
190
src/views/newMap/displayCity/demonMenu.vue
Normal file
190
src/views/newMap/displayCity/demonMenu.vue
Normal file
@ -0,0 +1,190 @@
|
||||
<template>
|
||||
<div>
|
||||
<div v-if="isAllShow&&project != 'bjd'" class="display_top_draft" :style="allStyle">
|
||||
<div class="btn_hover" @click="menuClick">菜单</div>
|
||||
<el-button-group ref="button_group_box" class="button_group_box" :style="`margin-left:-${btnWidth}px`">
|
||||
<el-button v-if="jl3dmodelShow && !isContest && project !== 'bjd'" size="small" @click="jumpjlmap3dmodel">{{ jl3dmodel }}</el-button>
|
||||
</el-button-group>
|
||||
</div>
|
||||
<Jl3d-Device
|
||||
v-if="deviceif"
|
||||
v-show="deviceShow"
|
||||
ref="Jl3dDevice"
|
||||
:panel-show="deviceShow"
|
||||
@closedevice3dview="jumpjlmap3dmodel"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import Jl3dDevice from '@/views/jlmap3d/device/jl3ddevice';
|
||||
import { getToken } from '@/utils/auth';
|
||||
import { getSessionStorage } from '@/utils/auth';
|
||||
import { EventBus } from '@/scripts/event-bus';
|
||||
import { getPostByProjectCode } from '@/api/learn';
|
||||
import { ProjectCode } from '@/scripts/ProjectConfig';
|
||||
export default {
|
||||
name:'DemonMenu',
|
||||
components:{
|
||||
Jl3dDevice,
|
||||
},
|
||||
props:{
|
||||
isAllShow:{
|
||||
type:Boolean,
|
||||
require:true
|
||||
},
|
||||
jl3dmodelShow:{
|
||||
type:Boolean,
|
||||
require:true
|
||||
},
|
||||
jl3dnameShow:{
|
||||
type:Boolean,
|
||||
require:true
|
||||
},
|
||||
cctvShow:{
|
||||
type:Boolean,
|
||||
require:true
|
||||
},
|
||||
trafficplanShow:{
|
||||
type:Boolean,
|
||||
require:true
|
||||
},
|
||||
traffictrainShow:{
|
||||
type:Boolean,
|
||||
require:true
|
||||
},
|
||||
scheduleLoadShow:{
|
||||
type:Boolean,
|
||||
require:true
|
||||
},
|
||||
driverShow:{
|
||||
type:Boolean,
|
||||
require:true
|
||||
},
|
||||
schedulePreviewShow:{
|
||||
type:Boolean,
|
||||
require:true
|
||||
},
|
||||
jlmap3dFaultShow:{
|
||||
type:Boolean,
|
||||
require:true
|
||||
},
|
||||
allStyle:{
|
||||
type:String,
|
||||
default() {
|
||||
return '';
|
||||
}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
hoverBtn: false,
|
||||
btnWidth: 0,
|
||||
group:'',
|
||||
mapId:'',
|
||||
lineCode:'',
|
||||
practiceDisabled:false,
|
||||
deviceif:false,
|
||||
deviceShow: true,
|
||||
drivingShow: false,
|
||||
messageBoard: false,
|
||||
jl3dtrafficplan:this.$t('display.demon.trafficplantext'),
|
||||
jl3dtraffictrain:this.$t('display.demon.traffictraintext'),
|
||||
jl3dpassflow:this.$t('display.demon.passengerflow'),
|
||||
jl3dname: this.$t('display.demon.threeDimensionalView'),
|
||||
jl3dmodel: this.$t('display.demon.deviceView')
|
||||
};
|
||||
},
|
||||
computed:{
|
||||
isDrive() {
|
||||
return this.$route.query.prdType == '04';
|
||||
},
|
||||
project() {
|
||||
return getSessionStorage('project');
|
||||
},
|
||||
isContest() {
|
||||
return this.$route.params.mode === 'demon' && this.project == 'drts';
|
||||
},
|
||||
running() {
|
||||
return this.$store.state.training.started;
|
||||
},
|
||||
isLocal() { // 是否为本地项目
|
||||
return process.env.VUE_APP_PRO === 'local';
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.group = this.$route.query.group;
|
||||
this.mapId = this.$route.query.mapId;
|
||||
this.lineCode = this.$route.query.lineCode;
|
||||
EventBus.$on('loadScene', () => {
|
||||
this.practiceDisabled = true;
|
||||
});
|
||||
EventBus.$on('quitScene', () => {
|
||||
this.practiceDisabled = false;
|
||||
});
|
||||
if (this.project) {
|
||||
getPostByProjectCode(ProjectCode[this.project]).then(resp => {
|
||||
if (resp.data) {
|
||||
this.messageBoard = true;
|
||||
}
|
||||
}).catch(() => {
|
||||
console.log('获取留言板信息失败');
|
||||
});
|
||||
}
|
||||
},
|
||||
methods:{
|
||||
menuClick() {
|
||||
this.hoverBtn = !this.hoverBtn;
|
||||
if (this.hoverBtn) {
|
||||
this.btnWidth = 600;
|
||||
} else {
|
||||
this.btnWidth = 0;
|
||||
}
|
||||
},
|
||||
jumpjlmap3dmodel() {
|
||||
if (this.deviceif == false) {
|
||||
this.deviceif = true;
|
||||
} else {
|
||||
if (this.deviceShow == false) {
|
||||
this.deviceShow = true;
|
||||
} else {
|
||||
this.deviceShow = false;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.display_top_draft{
|
||||
position: absolute;
|
||||
left: 5px;
|
||||
top: 15px;
|
||||
height: 32px;
|
||||
overflow: hidden;
|
||||
padding-left: 44px;
|
||||
z-index: 35;
|
||||
.btn_hover{
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
z-index: 2;
|
||||
color: #4e4d4d;
|
||||
font-size: 14px;
|
||||
background: #fff;
|
||||
padding: 8px;
|
||||
border-radius: 5px;
|
||||
display: block;
|
||||
cursor: pointer;
|
||||
float: left;
|
||||
height: 32px;
|
||||
}
|
||||
.button_group_box{
|
||||
float: left;
|
||||
transition: all 0.5s;
|
||||
overflow: hidden;
|
||||
margin-left: -700px;
|
||||
// transform: translateX(0px);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
307
src/views/newMap/displayCity/index.vue
Normal file
307
src/views/newMap/displayCity/index.vue
Normal file
@ -0,0 +1,307 @@
|
||||
<template>
|
||||
<div class="main" :style="{width: canvasWidth+'px',height:'100%',position:'absolute',overflow:'hidden'}">
|
||||
<template>
|
||||
<transition name="el-zoom-in-bottom">
|
||||
<map-system-draft ref="mapCanvas" @back="back" />
|
||||
</transition>
|
||||
<menu-demon v-if="isDemon" ref="menuDemon" :offset="offset" :offset-bottom="offsetBottom" :data-error="dataError" :text-status-height="textStatusHeight" @start="start" @end="end" />
|
||||
</template>
|
||||
<menu-system-time ref="menuSystemTime" :offset="offset" :group="group" />
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { getSessionStorage } from '@/utils/auth';
|
||||
import { mapGetters } from 'vuex';
|
||||
import { OperateMode } from '@/scripts/ConstDic';
|
||||
import { timeFormat } from '@/utils/date';
|
||||
import MapSystemDraft from '@/views/newMap/mapsystemNew/index';
|
||||
import MenuDemon from './menuDemon';
|
||||
import MenuSystemTime from '@/views/newMap/displayCity/menuSystemTime';
|
||||
import { clearSimulation, getSimulationInfoNew, ranAsPlan, exitRunPlan } from '@/api/simulation';
|
||||
import { loadMapDataById } from '@/utils/loaddata';
|
||||
import { EventBus } from '@/scripts/event-bus';
|
||||
|
||||
export default {
|
||||
name: 'DisplayDraft',
|
||||
components: {
|
||||
MapSystemDraft,
|
||||
MenuDemon,
|
||||
MenuSystemTime
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
offset: 15,
|
||||
offsetBottom: 15,
|
||||
tipBottom: 0,
|
||||
textStatusHeight: 0,
|
||||
planRunning:false,
|
||||
dataError: false,
|
||||
group:''
|
||||
};
|
||||
},
|
||||
computed:{
|
||||
...mapGetters([
|
||||
'canvasWidth'
|
||||
]),
|
||||
mode() {
|
||||
return this.$route.params.mode;
|
||||
},
|
||||
project() {
|
||||
return getSessionStorage('project');
|
||||
},
|
||||
isDemon() {
|
||||
return this.mode === 'demon' && this.project != 'drts';
|
||||
},
|
||||
isContest() {
|
||||
return this.mode === 'demon' && this.project == 'drts';
|
||||
},
|
||||
isExam() {
|
||||
return this.mode === 'exam';
|
||||
},
|
||||
isLesson() {
|
||||
return (this.mode === 'teach' || this.mode === 'manage');
|
||||
},
|
||||
isScript() {
|
||||
return this.mode === 'script';
|
||||
},
|
||||
mapId() {
|
||||
return this.$route.query.mapId;
|
||||
},
|
||||
width() {
|
||||
return this.$store.state.app.width;
|
||||
},
|
||||
height() {
|
||||
return this.$store.state.app.height;
|
||||
}
|
||||
},
|
||||
watch:{
|
||||
'$store.state.socket.permissionOver': function () {
|
||||
this.$alert('用户权限已被收回', '提示', {
|
||||
confirmButtonText: '确定',
|
||||
callback: action => {
|
||||
this.back();
|
||||
}
|
||||
});
|
||||
},
|
||||
// 此处代码似乎没什么用，之前从menuSchema复制过来的
|
||||
'$store.state.training.prdType':function(val) {
|
||||
if (val == '01') { this.switchModeInner('01'); } else { this.switchModeInner('02'); }
|
||||
},
|
||||
'$store.state.config.menuBarLoadedCount': function (val) { // menuBar加载完成
|
||||
this.setPosition();
|
||||
},
|
||||
'$store.state.app.windowSizeCount': function() { // 窗口缩放
|
||||
this.setWindowSize();
|
||||
},
|
||||
'$store.state.training.prdType': function (val) { // 根据权限类型计算高度
|
||||
this.setPosition();
|
||||
},
|
||||
'$store.state.map.mapViewLoadedCount': function (val) { // 地图视图加载完成标识 开始加载默认状态
|
||||
if (this.planRunning) {
|
||||
this.$store.dispatch('training/simulationStart');
|
||||
}
|
||||
},
|
||||
$route() {
|
||||
if (!this.isLesson && !this.isExam) {
|
||||
this.initLoadData();
|
||||
}
|
||||
}
|
||||
},
|
||||
beforeDestroy() {
|
||||
clearSimulation(this.group);
|
||||
this.$store.dispatch('training/reset');
|
||||
// this.$store.dispatch('map/mapClear');
|
||||
},
|
||||
async mounted() {
|
||||
this.setWindowSize();
|
||||
this.initLoadData();
|
||||
},
|
||||
methods:{
|
||||
// 结束加载状态
|
||||
endViewLoading(isSuccess) {
|
||||
if (!isSuccess) {
|
||||
this.$store.dispatch('map/mapClear');
|
||||
}
|
||||
this.$nextTick(() => {
|
||||
EventBus.$emit('viewLoading', false);
|
||||
});
|
||||
},
|
||||
// 仿真错误时，被动退出时调用
|
||||
async back() {
|
||||
if (this.isExam) {
|
||||
await this.$refs.menuExam.back();
|
||||
} else if (this.isLesson) {
|
||||
await this.$refs.lessonMenu.back();
|
||||
} else if (this.isDemon) {
|
||||
await this.$refs.menuDemon.back();
|
||||
} else if (this.isScript) {
|
||||
await this.$refs.menuScript.back();
|
||||
} else if (this.isContest) {
|
||||
await this.$refs.menuDispatherContest.back();
|
||||
}
|
||||
},
|
||||
// 设置各个按钮的定位
|
||||
setPosition() {
|
||||
this.$nextTick(() => {
|
||||
this.offset = 10;
|
||||
this.offsetBottom = 15;
|
||||
const menuBar = document.getElementById('menuBar');
|
||||
const menuTool = document.getElementById('menuTool');
|
||||
const menuBottom = document.getElementById('menuButton');
|
||||
const menuButtonsBox = document.getElementById('menuButtons_box');
|
||||
const textStatus = document.getElementById('textStatus');
|
||||
if (menuBar) {
|
||||
this.offset = (menuBar.offsetHeight || 0) + 15;
|
||||
}
|
||||
if (menuTool) {
|
||||
this.offset = (menuTool.offsetHeight || 0) + 15;
|
||||
}
|
||||
const buttonWidth = this.width - 1200; // B box widht
|
||||
if (menuBottom && buttonWidth < 780) {
|
||||
this.offsetBottom = (menuBottom.offsetHeight || 0) + 15;
|
||||
}
|
||||
if (menuButtonsBox) {
|
||||
this.tipBottom = (menuButtonsBox.offsetHeight || 0) + 15;
|
||||
}
|
||||
if (textStatus) {
|
||||
this.textStatusHeight = textStatus.offsetHeight || 0;
|
||||
textStatus.style.top = this.offset - 15 + 'px';
|
||||
}
|
||||
});
|
||||
},
|
||||
// 缩放设置
|
||||
setWindowSize() {
|
||||
const width = this.width;
|
||||
const height = this.height;
|
||||
this.$store.dispatch('config/resize', { width, height });
|
||||
// this.$store.dispatch('training/updateOffsetStationCode', { offsetStationCode: this.offsetStationCode });
|
||||
},
|
||||
// 初始化
|
||||
initLoadData() {
|
||||
this.group = this.$route.query.group;
|
||||
this.$store.dispatch('training/reset');
|
||||
this.loadSimulationInfo();
|
||||
this.loadMapData();
|
||||
},
|
||||
// 新版地图根据仿真group获取仿真基础信息
|
||||
async loadSimulationInfo() {
|
||||
const resp = await getSimulationInfoNew(this.group);
|
||||
if (resp && resp.code == 200 && resp.data) {
|
||||
if (!resp.data.dataError) {
|
||||
this.$store.dispatch('scriptRecord/updateSimulationPause', resp.data.pause); // 是否暂停判断
|
||||
this.$store.dispatch('training/setInitTime', +new Date(`${new Date().toLocaleDateString()} ${timeFormat(resp.data.systemTime)}`));
|
||||
this.$store.dispatch('training/countTime');
|
||||
this.$store.dispatch('runPlan/setRunPlanInfo', resp.data.runPlan);
|
||||
this.planRunning = resp.data.planRunning;
|
||||
if (resp.data.planRunning) {
|
||||
this.$store.commit('training/start');
|
||||
}
|
||||
} else {
|
||||
this.$messageBox('此地图数据正在维护中,无法运行！');
|
||||
}
|
||||
this.dataError = resp.data.dataError;
|
||||
}
|
||||
},
|
||||
// 通过showMode切换显示效果
|
||||
switchModeInner(swch) {
|
||||
let showMode = '03';
|
||||
if (swch == '01') {
|
||||
showMode = '03';
|
||||
} else if (swch == '02') {
|
||||
showMode = '02';
|
||||
}
|
||||
|
||||
const nameList = Object.keys(this.$store.state.map.map || {});
|
||||
let list = [];
|
||||
nameList.forEach(item => {
|
||||
if (item !== 'skinVO') {
|
||||
const data = this.$store.state.map.map[item];
|
||||
if (data && data.constructor === Array) {
|
||||
list = [...list, ...data];
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
if (swch == '01') {
|
||||
this.$jlmap.updateShowStation(list, this.$store.state.training.centerStationCode); // 显示全部元素
|
||||
} else {
|
||||
this.$jlmap.updateShowStation(list, ''); // 显示全部元素
|
||||
}
|
||||
|
||||
this.$jlmap.updateShowMode(list, showMode); // 二次过滤
|
||||
},
|
||||
// 加载地图数据
|
||||
loadMapData() {
|
||||
if (parseInt(this.mapId)) {
|
||||
this.$store.dispatch('training/changeOperateMode', { mode: OperateMode.NORMAL }); // 默认为正常模式
|
||||
loadMapDataById(this.mapId, 'simulation');
|
||||
} else {
|
||||
this.endViewLoading();
|
||||
}
|
||||
},
|
||||
start(model) { // 开始仿真
|
||||
const data = {
|
||||
time: model.initTime
|
||||
};
|
||||
if (this.$route.query.prdType === '04') {
|
||||
data.loadNumber = model.loadNum;
|
||||
}
|
||||
ranAsPlan(data, this.group).then(res => {
|
||||
this.$store.dispatch('training/setInitTime', +new Date(`${new Date().toLocaleDateString()} ${model.initTime}`));
|
||||
}).catch(error => {
|
||||
let message = '';
|
||||
switch (error.code) {
|
||||
case '5001':
|
||||
message = this.$t('error.mapDataError');
|
||||
break;
|
||||
case '5002':
|
||||
message = this.$t('error.runningChartDataError');
|
||||
break;
|
||||
case '5003':
|
||||
message = this.$t('error.runningChartIsNotLoaded');
|
||||
break;
|
||||
case '5004':
|
||||
message = this.$t('error.runningDataError');
|
||||
break;
|
||||
case '5000':
|
||||
message = this.$t('error.systemError');
|
||||
break;
|
||||
case '4000':
|
||||
message = this.$t('error.simulationDoesNotExist');
|
||||
break;
|
||||
case '4001':
|
||||
message = this.$t('error.simulationOperationIsNotDefined');
|
||||
break;
|
||||
case '4002':
|
||||
message = this.$t('error.simulationOperationProcessingMethodNotFound');
|
||||
break;
|
||||
case '4003':
|
||||
message = this.$t('error.simulationOperationFailed');
|
||||
break;
|
||||
case '4004':
|
||||
message = this.$t('error.operationConflict');
|
||||
break;
|
||||
default:
|
||||
message = '按计划行车异常,请退出重试!';
|
||||
// this.$messageBox('按计划行车异常,请退出重试!');
|
||||
break;
|
||||
}
|
||||
this.$messageBox(message + '，' + this.$t('error.startSimulationFailed'));
|
||||
});
|
||||
},
|
||||
end() {
|
||||
exitRunPlan(this.group).then(() => {
|
||||
this.$store.dispatch('training/over').then(() => {
|
||||
this.$store.dispatch('training/setMapDefaultState').then(() => {
|
||||
this.$store.dispatch('map/clearJlmapTrainView');
|
||||
this.$store.dispatch('map/resetActiveTrainList', false);
|
||||
this.$store.dispatch('map/setTrainWindowShow', false);
|
||||
});
|
||||
});
|
||||
}).catch(() => {
|
||||
this.$messageBox(this.$t('display.demon.endSimulationFail'));
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
310
src/views/newMap/displayCity/menuDemon.vue
Normal file
310
src/views/newMap/displayCity/menuDemon.vue
Normal file
@ -0,0 +1,310 @@
|
||||
<template>
|
||||
<div>
|
||||
<demon-menu
|
||||
ref="demonMenu"
|
||||
:is-all-show="!dataError"
|
||||
:jl3dmodel-show="isShow3dmodel && !isShowScheduling && !isDrive"
|
||||
:jl3dname-show="!isShowScheduling&&!isDrive"
|
||||
:cctv-show="!isShowScheduling"
|
||||
:trafficplan-show="!isShowScheduling"
|
||||
:schedule-load-show="isShowScheduling && !runing"
|
||||
:schedule-preview-show="isShowScheduling && runing"
|
||||
:jlmap3d-fault-show="false"
|
||||
:driver-show="isDrive"
|
||||
:all-style="'top:'+(offset+textStatusHeight)+'px'"
|
||||
/>
|
||||
|
||||
<menu-schema
|
||||
ref="menuSchema"
|
||||
:offset="offset"
|
||||
:data-error="dataError"
|
||||
:offset-bottom="offsetBottom"
|
||||
/>
|
||||
|
||||
<div class="display-draft" :class="{'haerbin_btn_box': $route.query.lineCode == '07'||$route.query.lineCode == '14'}" :style="{bottom: offsetBottom + 'px'}">
|
||||
<el-button-group class="button-group-box">
|
||||
<template v-if="!dataError">
|
||||
<template v-if="!projectDevice">
|
||||
<el-button type="danger" size="small" @click="end">{{ $t('display.demon.initialize') }}</el-button>
|
||||
</template>
|
||||
</template>
|
||||
<el-button v-if="project !='bjd'" type="primary" size="small" @click="back">{{ projectDevice?'退出':$t('display.demon.back') }}</el-button>
|
||||
</el-button-group>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
<!-- 单人仿真 -->
|
||||
<script>
|
||||
import DemonMenu from './demonMenu';
|
||||
import { Notification } from 'element-ui';
|
||||
import MenuSchema from '@/views/newMap/displayCity/menuSchema';
|
||||
import { getGoodsTryUse } from '@/api/management/goods';
|
||||
import {getSimulationInfoNew, clearSimulation } from '@/api/simulation';
|
||||
import { PermissionType } from '@/scripts/ConstDic';
|
||||
import { getCountTime } from '@/utils/index';
|
||||
import { TrainingMode } from '@/scripts/ConstDic';
|
||||
import { quitScriptNew } from '@/api/simulation';
|
||||
import { setGoodsTryUse } from '@/api/management/goods';
|
||||
import {loadScriptNew } from '@/api/simulation';
|
||||
import StatusIcon from '@/views/components/StatusIcon/statusIcon';
|
||||
import Vue from 'vue';
|
||||
import { getSessionStorage } from '@/utils/auth';
|
||||
import { EventBus } from '@/scripts/event-bus';
|
||||
|
||||
export default {
|
||||
name: 'MenuDemon',
|
||||
components: {
|
||||
MenuSchema,
|
||||
DemonMenu,
|
||||
StatusIcon
|
||||
},
|
||||
props: {
|
||||
offset: {
|
||||
type: Number,
|
||||
required: true
|
||||
},
|
||||
offsetBottom: {
|
||||
type: Number,
|
||||
required: true
|
||||
},
|
||||
dataError: {
|
||||
type: Boolean,
|
||||
default() {
|
||||
return false;
|
||||
}
|
||||
},
|
||||
textStatusHeight: {
|
||||
type: Number,
|
||||
default() {
|
||||
return 0;
|
||||
}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
tryTime: 0, // 进入页面多少秒
|
||||
timeNow: 0, // 进入页面 相对时间
|
||||
time: null, // 定时器
|
||||
countTime: 0, // 显示 倒计时
|
||||
remainingTime: 0,
|
||||
userRole:'AUDIENCE',
|
||||
goodsId: this.$route.query.goodsId,
|
||||
try: this.$route.query.try, // 是否是试用权限
|
||||
training: {
|
||||
id: '',
|
||||
name: '',
|
||||
remarks: ''
|
||||
},
|
||||
isScriptRun:false,
|
||||
jl3dname: this.$t('display.demon.threeDimensionalView'),
|
||||
jl3dmodel: this.$t('display.demon.deviceView'),
|
||||
isShow3dmodel :true,
|
||||
isGoback: false,
|
||||
runing:false,
|
||||
prdTypeMap: {
|
||||
'01': '01', // 现地 => 现地
|
||||
'02': '02', // 行调 => 行调
|
||||
'04': '02', // 司机 => 行调
|
||||
'05': '' // 派班 => null
|
||||
}
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
isShowScheduling() {
|
||||
return this.$route.query.prdType == '05';
|
||||
},
|
||||
isDrive() {
|
||||
return this.$route.query.prdType == '04';
|
||||
},
|
||||
group() {
|
||||
return this.$route.query.group;
|
||||
},
|
||||
projectDevice() {
|
||||
return this.$route.query.projectDevice;
|
||||
},
|
||||
project() {
|
||||
return getSessionStorage('project');
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
'$store.state.training.subscribeCount': function () {
|
||||
this.group && this.initLoadPage();
|
||||
},
|
||||
'$store.state.socket.simulationRoleList':function(val) {
|
||||
(val || []).forEach(item => {
|
||||
if (item.messageType === 'KICK_OUT' && item.userId == this.$store.state.user.id) {
|
||||
!this.isGoback && this.back();
|
||||
}
|
||||
});
|
||||
},
|
||||
'$store.state.socket.simulationOver':function(val) {
|
||||
!this.isGoback && this.back();
|
||||
},
|
||||
'$store.state.socket.simulationStart':function(val) {
|
||||
if (val) {
|
||||
this.setRuning(true);
|
||||
this.$store.dispatch('training/simulationStart').then(() => {
|
||||
this.$store.dispatch('map/setShowCentralizedStationNum');
|
||||
});
|
||||
}
|
||||
},
|
||||
'$store.state.socket.simulationReset':function(val) {
|
||||
this.setRuning(false);
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.$store.dispatch('training/setPrdType', this.$route.query.prdType);
|
||||
switch (this.$store.state.training.prdType) {
|
||||
case '02': { this.userRole = 'DISPATCHER'; break; }
|
||||
case '01': { this.userRole = 'STATION_SUPERVISOR'; break; }
|
||||
case '04': { this.userRole = 'DRIVER'; break; }
|
||||
case '05': { this.userRole = 'DEPOT_DISPATCHER'; break; }
|
||||
default: { this.userRole = 'AUDIENCE'; break; }
|
||||
}
|
||||
},
|
||||
beforeDestroy() {
|
||||
if (this.time) {
|
||||
this.setTryTime();
|
||||
clearTimeout(this.time);
|
||||
}
|
||||
this.$store.dispatch('scriptRecord/updateSimulationPause', false);
|
||||
this.$store.dispatch('map/resetActiveTrainList', true);
|
||||
},
|
||||
mounted() {
|
||||
this.$store.dispatch('training/end', TrainingMode.NORMAL);
|
||||
this.$nextTick(() => {
|
||||
this.$refs.demonMenu.menuClick();
|
||||
});
|
||||
},
|
||||
methods: {
|
||||
async initLoadPage() {
|
||||
try {
|
||||
if (this.try != '0') {
|
||||
this.loadInitData();
|
||||
}
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
}
|
||||
},
|
||||
loadInitData() {
|
||||
const data = {
|
||||
mapId: this.$route.query.mapId,
|
||||
prdType: this.$route.query.prdType,
|
||||
permissionType: PermissionType.SIMULATION
|
||||
};
|
||||
getGoodsTryUse(data).then(res => {
|
||||
this.remainingTime = res.data.tryTime;
|
||||
this.timeNow = Date.parse(new Date()) / 1000 + this.remainingTime;
|
||||
if (this.try) {
|
||||
this.time = setInterval(() => {
|
||||
this.tryTime += 1;
|
||||
this.countTime = getCountTime(this.timeNow);
|
||||
if (this.countTime == -1) {
|
||||
this.back();
|
||||
}
|
||||
}, 1000);
|
||||
}
|
||||
}).catch(() => {
|
||||
this.$messageBox(this.$t('display.demon.getTimeFail'));
|
||||
});
|
||||
},
|
||||
selectBeginTime() {
|
||||
this.$refs.setTime.doShow();
|
||||
},
|
||||
start(model) {
|
||||
this.$emit('start', model);
|
||||
},
|
||||
setRuning(run) {
|
||||
this.runing = run;
|
||||
this.$refs.demonMenu.hideScheduling(run);
|
||||
},
|
||||
end() {
|
||||
this.$emit('end');
|
||||
},
|
||||
clearAllData() {
|
||||
this.$refs.chatbox.clearAllData();
|
||||
},
|
||||
async back() {
|
||||
this.isGoback = true;
|
||||
if (this.projectDevice) {
|
||||
// || this.project === 'bjd'
|
||||
clearSimulation(this.group).then(res=>{
|
||||
this.$store.dispatch('training/over').then(() => {
|
||||
this.$store.dispatch('LogOut').then(() => {
|
||||
// this.$store.dispatch('training/reset');
|
||||
// this.$store.dispatch('map/mapClear');
|
||||
location.reload();
|
||||
});
|
||||
});
|
||||
});
|
||||
} else {
|
||||
if (this.project === 'bjd') {
|
||||
window.close();
|
||||
} else {
|
||||
this.$store.dispatch('map/setShowCentralizedStationCode', '');
|
||||
history.go(-1);
|
||||
Notification.closeAll();
|
||||
}
|
||||
|
||||
}
|
||||
},
|
||||
setTryTime() {
|
||||
if (this.try) {
|
||||
const data = { time: this.tryTime, goodsId: this.goodsId };
|
||||
if (data.goodsId) {
|
||||
setGoodsTryUse(data);
|
||||
}
|
||||
|
||||
}
|
||||
},
|
||||
quit() {
|
||||
window.close();
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style rel="stylesheet/scss" lang="scss" scoped>
|
||||
@import "src/styles/mixin.scss";
|
||||
|
||||
.display-card {
|
||||
z-index: 9;
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
top: 17px;
|
||||
left: 160px;
|
||||
height: 32px;
|
||||
}
|
||||
|
||||
.display-card .el-row {
|
||||
line-height: 32px !important;
|
||||
}
|
||||
|
||||
.display-score {
|
||||
background-color: black;
|
||||
display: -moz-inline-box;
|
||||
display: inline-block;
|
||||
text-align: left;
|
||||
height: 32px;
|
||||
line-height: 24px;
|
||||
border-radius: 4px;
|
||||
padding-left: 2px;
|
||||
margin-left: 10px;
|
||||
font-family: "Microsoft" !important;
|
||||
font-size: 18px !important;
|
||||
color: #fff;
|
||||
}
|
||||
.haerbin_btn_box{
|
||||
width: 450px;
|
||||
bottom: 15px!important;
|
||||
}
|
||||
.display-draft {
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
bottom: 15px;
|
||||
.button-group-box{
|
||||
float: right;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
111
src/views/newMap/displayCity/menuSchema.vue
Normal file
111
src/views/newMap/displayCity/menuSchema.vue
Normal file
@ -0,0 +1,111 @@
|
||||
<template>
|
||||
<div class="schema" :style="{top: offset+'px'}">
|
||||
<el-button v-if="!isScheduling" size="small" :type="faultMode ? '':'primary' " @click="changeOperateMode()">{{ faultMode?'切换到普通模式[Tab]':'切换到故障模式[Tab]' }}</el-button>
|
||||
<fault-choose ref="faultChoose" :group="group" :offset="offset" />
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import FaultChoose from './demon/faultChoose';
|
||||
import { OperateMode } from '@/scripts/ConstDic';
|
||||
import { getByGroupStationList } from '@/api/jmap/map';
|
||||
import { getSessionStorage } from '@/utils/auth';
|
||||
import { loadRunPlanData } from '@/utils/loaddata';
|
||||
import { EventBus } from '@/scripts/event-bus';
|
||||
|
||||
// 右上角操作
|
||||
export default {
|
||||
name: 'MenuSchema',
|
||||
components: {
|
||||
FaultChoose
|
||||
},
|
||||
props: {
|
||||
offset: {
|
||||
type: Number,
|
||||
required: true
|
||||
},
|
||||
dataError: {
|
||||
type: Boolean,
|
||||
default() {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
mode: OperateMode.NORMAL,
|
||||
OperateMode: OperateMode,
|
||||
viewDisabled: true,
|
||||
faultMode: false
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
group() {
|
||||
return this.$route.query.group;
|
||||
},
|
||||
isScript() {
|
||||
return this.$route.params.mode === 'script';
|
||||
},
|
||||
isDemon() {
|
||||
return this.$route.params.mode === 'demon';
|
||||
},
|
||||
isScheduling() {
|
||||
return this.$route.query.prdType === '05';
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
'$store.state.training.triggerFaultCount': function () {
|
||||
this.setFault();
|
||||
},
|
||||
'$store.state.runPlan.loadRunPlanCount': function () {
|
||||
this.viewDisabled = false;
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
EventBus.$on('CheckFaultModeEvent', () => {
|
||||
if (!this.isScheduling) {
|
||||
this.changeOperateMode();
|
||||
}
|
||||
});
|
||||
},
|
||||
methods: {
|
||||
loadRunData() {
|
||||
this.$store.dispatch('runPlan/clear').then(() => {
|
||||
if (this.group) {
|
||||
this.viewDisabled = true;
|
||||
// 获取排序的车站列表
|
||||
getByGroupStationList(this.group).then(response => {
|
||||
this.$store.dispatch('runPlan/setStations', response.data).then(() => {
|
||||
loadRunPlanData(this.group, this.dataError);
|
||||
});
|
||||
}).catch(() => {
|
||||
this.$messageBox(this.$t('display.schema.getStationListFail'));
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
changeOperateMode() {
|
||||
this.faultMode = !this.faultMode;
|
||||
let mode = OperateMode.NORMAL;
|
||||
if (this.faultMode) {
|
||||
mode = OperateMode.FAULT;
|
||||
}
|
||||
this.$store.dispatch('training/changeOperateMode', { mode: mode });
|
||||
},
|
||||
setFault() {
|
||||
this.$refs.faultChoose.doShow();
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style rel="stylesheet/scss" lang="scss" scoped>
|
||||
.schema {
|
||||
z-index: 36;
|
||||
display: inline;
|
||||
position: absolute;
|
||||
right: 5px;
|
||||
}
|
||||
|
||||
/deep/ .el-button+.el-button {
|
||||
margin-left: 0px;
|
||||
}
|
||||
</style>
|
||||
154
src/views/newMap/displayCity/menuSystemTime.vue
Normal file
154
src/views/newMap/displayCity/menuSystemTime.vue
Normal file
@ -0,0 +1,154 @@
|
||||
<template>
|
||||
<div v-if="isShowSystemTime" class="display-card" :style="{top: top+'px', right: newRight+'px'}">
|
||||
<template v-if="pause">
|
||||
<span class="display-pause">{{ $t('display.systemTime.timePause') }}</span>
|
||||
</template>
|
||||
<template v-else>
|
||||
<system-time
|
||||
class="display-time"
|
||||
:time="time"
|
||||
/>
|
||||
<div v-if="isShowDate" style="width: 80px;height: 58px;float: right;box-shadow: 0 0 5px #eee;">
|
||||
<div class="display-date-box">{{ dateString }}</div>
|
||||
<div class="display-date-box">{{ dayString }}</div>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { prefixIntrger } from '@/utils/date';
|
||||
import SystemTime from '@/views/components/systemTime/index';
|
||||
import { timeFormat } from '@/utils/date';
|
||||
|
||||
// 顶部时间栏显示
|
||||
export default {
|
||||
name: 'MenuSystemTime',
|
||||
components: {
|
||||
SystemTime
|
||||
},
|
||||
props: {
|
||||
offset: {
|
||||
type: Number,
|
||||
required: true
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
time: '00:0000',
|
||||
dateString: '00/00/00',
|
||||
dayString: ''
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
isShowSystemTime() {
|
||||
return this.$route.params.mode == 'demon' ||
|
||||
this.$route.params.mode == 'dp' ||
|
||||
this.$route.params.mode == 'plan' ||
|
||||
this.$route.params.mode == 'script' ||
|
||||
this.$route.params.mode == 'practice' ||
|
||||
!this.$route.params.mode;
|
||||
},
|
||||
pause() {
|
||||
return this.$store.state.scriptRecord.simulationPause;
|
||||
},
|
||||
isDisplay() {
|
||||
return this.$route.path.includes('displayCity') || this.$route.path.includes('scriptdisplayCity');
|
||||
},
|
||||
isShowDate() { // 西安一 三号线
|
||||
return (this.$route.query.lineCode == 10 || this.$route.query.lineCode == 11) && this.isDisplay;
|
||||
},
|
||||
top() {
|
||||
return this.isShowDate ? (this.$route.query.prdType == '05' ? 5 : this.offset - 10) : this.offset;
|
||||
},
|
||||
newRight() {
|
||||
return this.isShowDate ? this.$store.state.config.width - 420 : this.$store.state.config.width / 2 - 55;
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
'$store.state.training.initTime': function (initTime) {
|
||||
const date = new Date(initTime);
|
||||
this.initDate(date);
|
||||
},
|
||||
'$store.state.socket.simulationTimeSync': function (time) { // 仿真时间更新
|
||||
this.$store.dispatch('training/setInitTime', +new Date(`${new Date().toLocaleDateString()} ${timeFormat(time)}`));
|
||||
const date = new Date(+new Date(`${new Date().toLocaleDateString()} ${timeFormat(time)}`));
|
||||
this.initDate(date);
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
const initTime = this.$store.state.training.initTime;
|
||||
if (initTime > 0) {
|
||||
const date = new Date(initTime);
|
||||
this.initDate(date);
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
initDate(date) {
|
||||
this.time = `${prefixIntrger(date.getHours(), 2)}:${prefixIntrger(date.getMinutes(), 2)}${prefixIntrger(date.getSeconds(), 2)}`;
|
||||
const years = date.getFullYear() + '';
|
||||
let months = date.getMonth() + 1 + '';
|
||||
let dates = date.getDate() + '';
|
||||
if (months.length < 2) { months = '0' + months; }
|
||||
if (dates.length < 2) { dates = '0' + dates; }
|
||||
this.dateString = dates + '/' + months + '/' + years.slice(2);
|
||||
const day = date.getDay();
|
||||
switch (day) {
|
||||
case 0:
|
||||
this.dayString = '星 期 日';
|
||||
break;
|
||||
case 1:
|
||||
this.dayString = '星 期 一';
|
||||
break;
|
||||
case 2:
|
||||
this.dayString = '星 期 二';
|
||||
break;
|
||||
case 3:
|
||||
this.dayString = '星 期 三';
|
||||
break;
|
||||
case 4:
|
||||
this.dayString = '星 期 四';
|
||||
break;
|
||||
case 5:
|
||||
this.dayString = '星 期 五';
|
||||
break;
|
||||
case 6:
|
||||
this.dayString = '星 期 六';
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style rel="stylesheet/scss" lang="scss" scoped>
|
||||
@import "src/styles/mixin.scss";
|
||||
|
||||
.display-card {
|
||||
z-index: 9;
|
||||
display: inline;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.display-pause {
|
||||
font-size: 21px;
|
||||
font-weight: bold;
|
||||
color: yellow;
|
||||
}
|
||||
|
||||
.display-time{
|
||||
padding: 3px 5px;
|
||||
border: 1px solid rgba(255,255,255,.2);
|
||||
box-shadow: 0 2px 12px 0 rgba(255,255,255,.3);
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.display-card .el-row {
|
||||
line-height: 32px !important;
|
||||
}
|
||||
.display-date-box{
|
||||
height: 29px;
|
||||
line-height: 29px;
|
||||
background: #404040;
|
||||
color: #1DEA1E;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
</style>
|
||||
58
src/views/newMap/displayCity/utils.js
Normal file
58
src/views/newMap/displayCity/utils.js
Normal file
@ -0,0 +1,58 @@
|
||||
import ConstConfig from '@/scripts/ConstConfig';
|
||||
import Cookies from 'js-cookie';
|
||||
import store from '@/store/index';
|
||||
export function covertMemberData (activeTrainList, resp) {
|
||||
let lastData = JSON.stringify(resp);
|
||||
const roleTypeList = ConstConfig.ConstSelect.roleTypeNew;
|
||||
roleTypeList.forEach(function(element) {
|
||||
const rolename = element.value;
|
||||
if (Cookies.get('user_lang') == 'en') {
|
||||
lastData = lastData.replace(new RegExp(rolename, 'g'), element.enLabel);
|
||||
} else {
|
||||
lastData = lastData.replace(new RegExp(rolename, 'g'), element.label);
|
||||
}
|
||||
});
|
||||
lastData = JSON.parse(lastData);
|
||||
const lastMemberList = [];
|
||||
// const electricDispatcherList = [];
|
||||
const deviceListData = [[], [], [], [], [], [], [], []];
|
||||
const driverList = [];
|
||||
lastData.forEach((member, index)=>{
|
||||
if (member.userId && member.userId == store.state.user.id) {
|
||||
member.disabled = true;
|
||||
member.userName = store.state.user.nickname;
|
||||
store.dispatch('training/setOrignalUserRoleId', member.id);
|
||||
} else {
|
||||
member.disabled = false;
|
||||
}
|
||||
const userName = member.userName ? '-' + member.userName : '';
|
||||
const name = member.name ? '-' + member.name : '';
|
||||
if (member.deviceCode) {
|
||||
const device = store.getters['map/getDeviceByCode'](member.deviceCode);
|
||||
member.deviceName = device.name || device.groupNumber;
|
||||
member.label = member.type + member.deviceName + name + userName;
|
||||
member.normalName = member.type + member.deviceName + name;
|
||||
} else {
|
||||
member.deviceName = '';
|
||||
member.label = member.type + name + userName;
|
||||
member.normalName = member.type + name;
|
||||
}
|
||||
const deviceType = ['行调', '通号', '行值', '司机', '车辆段信号楼', '上级部门', '电力调度', '停车场信号楼'];
|
||||
const deviceTypeIndex = deviceType.indexOf(member.type);
|
||||
if (deviceTypeIndex >= 0) {
|
||||
if (deviceTypeIndex == 3) {
|
||||
if (activeTrainList.length > 0) {
|
||||
if (activeTrainList.includes(member.deviceCode)) {
|
||||
deviceListData[deviceTypeIndex].push(member);
|
||||
}
|
||||
}
|
||||
lastMemberList.push(member);
|
||||
driverList.push(member);
|
||||
} else {
|
||||
deviceListData[deviceTypeIndex].push(member);
|
||||
lastMemberList.push(member);
|
||||
}
|
||||
}
|
||||
});
|
||||
return {lastMemberList:lastMemberList, deviceListData:deviceListData, driverList:driverList};
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user