调整设备连接流程

This commit is contained in:
zyy 2020-07-14 16:07:43 +08:00
parent c2d158da5b
commit 77b02b947e
4 changed files with 82 additions and 85 deletions

View File

@ -2,9 +2,9 @@ export function getBaseUrl() {
let BASE_API; let BASE_API;
if (process.env.NODE_ENV === 'development') { if (process.env.NODE_ENV === 'development') {
// BASE_API = 'https://joylink.club/jlcloud'; // BASE_API = 'https://joylink.club/jlcloud';
BASE_API = 'https://test.joylink.club/jlcloud'; // BASE_API = 'https://test.joylink.club/jlcloud';
// BASE_API = 'http://192.168.3.5:9000'; // 袁琪 // BASE_API = 'http://192.168.3.5:9000'; // 袁琪
// BASE_API = 'http://192.168.3.6:9000'; // 旭强 BASE_API = 'http://192.168.3.6:9000'; // 旭强
// BASE_API = 'http://192.168.3.41:9000'; // 张赛 // BASE_API = 'http://192.168.3.41:9000'; // 张赛
// BASE_API = 'http://192.168.3.82:9000'; // 杜康 // BASE_API = 'http://192.168.3.82:9000'; // 杜康
// BASE_API = 'http://b29z135112.zicp.vip'; // BASE_API = 'http://b29z135112.zicp.vip';

View File

@ -14,7 +14,7 @@
<div style="margin-bottom: 3px; overflow: hidden;"> <div style="margin-bottom: 3px; overflow: hidden;">
<div class="plc_box">名称: {{ plcInfo.name }}</div> <div class="plc_box">名称: {{ plcInfo.name }}</div>
<div class="plc_box">状态: <span :style="{'color': plcInfo.status ? 'green' : 'red'}">{{ plcInfo.status ? '在线' : '不在线' }}</span></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="freshen">刷新</el-button> <el-button type="text" size="small" class="freshen_box" @click="getList">刷新</el-button>
</div> </div>
<el-table :data="tableData" border style="width: 100%; max-height: calc(100% - 24px); overflow: auto;"> <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="code" label="设备编号" width="180" />
@ -23,19 +23,12 @@
<template slot-scope="scope"> <template slot-scope="scope">
<div v-if="scope.row.vrDeviceCode" class="flex_box">{{ scope.row.vrDeviceCode }}</div> <div v-if="scope.row.vrDeviceCode" class="flex_box">{{ scope.row.vrDeviceCode }}</div>
<div v-if="!scope.row.vrDeviceCode" class="flex_box">()</div> <div v-if="!scope.row.vrDeviceCode" class="flex_box">()</div>
<div class="flex_box">
<el-button
:type="scope.row.buttonShowType ? 'danger' : 'primary'"
size="small"
@click="hover(scope.row, scope.$index)"
>激活</el-button>
</div>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="操作"> <el-table-column label="操作">
<template slot-scope="scope"> <template slot-scope="scope">
<el-button type="text" size="small" @click="handleClick(scope.row)">连接</el-button> <el-button :type="scope.row.buttonShowType ? 'danger' : 'primary'" size="small" @click="handleClick(scope.row, scope.$index)">连接</el-button>
<el-button type="text" size="small" @click="cancel(scope.row, scope.$index)">断开</el-button> <el-button size="small" @click="cancel(scope.row, scope.$index)">断开</el-button>
</template> </template>
</el-table-column> </el-table-column>
</el-table> </el-table>
@ -60,15 +53,24 @@ export default {
name: '', name: '',
status: '' status: ''
}, },
index: 0 index: 0,
selected: {},
typeObj: {
Section: '区段',
Signal: '信号机',
Switch: '道岔',
Psd: '屏蔽门',
StationStand: '站台'
}
}; };
}, },
mounted() { mounted() {
EventBus.$on('selectDevice', (data) => { EventBus.$on('selectDevice', (data) => {
this.tableData[this.index]['vrDeviceCode'] = data.code; this.selected = data;
this.tableData[this.index]['buttonShowType'] = false; this.tableData[this.index]['buttonShowType'] = false;
this.tableData.splice(this.index, 1, this.tableData[this.index]); this.tableData.splice(this.index, 1, this.tableData[this.index]);
this.$store.dispatch('map/selectDeviceCode', {flag: false, type: ''}); this.$store.dispatch('map/selectDeviceCode', {flag: false, type: ''});
this.connect(this.tableData[this.index]);
}); });
}, },
async beforeDestroy() { async beforeDestroy() {
@ -100,37 +102,32 @@ export default {
console.error(error); console.error(error);
} }
}, },
hover(row, index) { doClose() {
this.show = false;
},
handleClick(row, index) {
row.buttonShowType = !row.buttonShowType; row.buttonShowType = !row.buttonShowType;
this.index = index; this.index = index;
this.tableData.splice(index, 1, row); this.tableData.splice(index, 1, row);
this.$store.dispatch('map/selectDeviceCode', {flag: row.buttonShowType, type: row.type}); this.$store.dispatch('map/selectDeviceCode', {flag: row.buttonShowType, type: row.type});
}, },
freshen() { async connect(row) {
this.getList(); this.$confirm(`您确定连接${this.typeObj[this.selected._type] || '设备'}: ${this.selected.name}, 是否继续?`, '提示', {
}, confirmButtonText: '确定',
doClose() { cancelButtonText: '取消',
this.show = false; type: 'warning'
}, }).then(async () => {
async handleClick(row) { try {
if (row.vrDeviceCode) { const res = await postSimulationConnectById(this.group, row.id, this.selected.code);
this.$confirm('您确定将次设备连接, 是否继续?', '提示', { if (res && res.code == 200) {
confirmButtonText: '确定', this.$message.success('连接成功!');
cancelButtonText: '取消', this.tableData[this.index]['vrDeviceCode'] = this.selected.code;
type: 'warning' this.tableData.splice(this.index, 1, this.tableData[this.index]);
}).then(async () => {
try {
const res = await postSimulationConnectById(this.group, row.id, row.vrDeviceCode);
if (res && res.code == 200) {
this.$message.success('连接成功!');
}
} catch (error) {
console.error(error);
} }
}); } catch (error) {
} else { console.error(error);
this.$message.info('需要连接的设备编码为空,请选择'); }
} });
}, },
async cancel(row, index) { async cancel(row, index) {
this.$confirm('您确定将次设备断开, 是否继续?', '提示', { this.$confirm('您确定将次设备断开, 是否继续?', '提示', {

View File

@ -1,17 +1,9 @@
<template> <template>
<div class="menuTrainListOut" :class="{'xian_01' : lineCode == '11'}"> <div class="menuTrainListOut" :class="{'xian_01' : lineCode == '11', 'active': drawer}">
<div v-if="drawer" class="menuTrainListBtn" @click="clickBtn"> <div class="menuTrainListBtn" @click="clickBtn">
<i class="el-icon-more" style="font-size: 20px;margin-top: 9px;transform-origin: 50% 50%;transform: rotate(90deg);margin-left:0px;" /></div> <i class="el-icon-more" />
<div v-else class="menuTrainListBtn1" @click="clickBtn">
<div class="menuTrainListBtn1In">
<i class="el-icon-more" style="font-size: 20px;margin-top: 9px;transform-origin: 50% 50%;transform: rotate(90deg);" />
</div>
</div> </div>
<div <div :show-close="false" class="menuTrainList_box" style="height: 100%;">
v-show="drawer"
:show-close="false"
style="height: 100%;"
>
<div v-if="lineCode=='10'||lineCode=='11'" class="menuTrainList"> <div v-if="lineCode=='10'||lineCode=='11'" class="menuTrainList">
<div class="bottomTrainListInfo">下行列车详细信息</div> <div class="bottomTrainListInfo">下行列车详细信息</div>
<el-table :data="bottomTrainList" height="45%" :highlight-current-row="true" @row-click="selectTrain"> <el-table :data="bottomTrainList" height="45%" :highlight-current-row="true" @row-click="selectTrain">
@ -24,7 +16,6 @@
<div>{{ covert(scope.row.dt) }}</div> <div>{{ covert(scope.row.dt) }}</div>
</template> </template>
</el-table-column> </el-table-column>
<!-- <el-table-column property="right" label="是否上行" width="90" /> -->
</el-table> </el-table>
<div class="topTrainListInfo">上行列车详细信息</div> <div class="topTrainListInfo">上行列车详细信息</div>
<el-table :data="topTrainList" height="45%" :highlight-current-row="true" style="border-radius:0px 0px 0px 5px;" @row-click="selectTrain"> <el-table :data="topTrainList" height="45%" :highlight-current-row="true" style="border-radius:0px 0px 0px 5px;" @row-click="selectTrain">
@ -37,7 +28,6 @@
<div>{{ covert(scope.row.dt) }}</div> <div>{{ covert(scope.row.dt) }}</div>
</template> </template>
</el-table-column> </el-table-column>
<!-- <el-table-column property="right" label="是否上行" width="90" /> -->
</el-table> </el-table>
</div> </div>
<div v-else class="menuTrainList"> <div v-else class="menuTrainList">
@ -45,7 +35,6 @@
<el-table-column property="groupNumber" label="车组号" width="130" /> <el-table-column property="groupNumber" label="车组号" width="130" />
<el-table-column property="tripNumber" label="车次号" width="130" /> <el-table-column property="tripNumber" label="车次号" width="130" />
<el-table-column property="serviceNumber" label="表号" width="130" /> <el-table-column property="serviceNumber" label="表号" width="130" />
<!-- <el-table-column property="right" label="是否上行" width="90" /> -->
</el-table> </el-table>
</div> </div>
</div> </div>
@ -141,20 +130,17 @@ export default {
} }
}; };
</script> </script>
<style lang="scss" scoped> <style rel="stylesheet/scss" lang="scss" scoped>
.menuTrainListBtn1In{ .menuTrainListOut{
width: 20px;
height: 40px;
background: #fff;
text-align: center;
border-radius: 6px 0px 0px 6px;
cursor:pointer;
border: 1px #adadad solid;
}
.menuTrainListBtn1{
position: absolute; position: absolute;
top: 46%; right: 0;
right:2px; top: 15%;
height: 70%;
transform: translateX(400px);
transition: all 0.4s;
&.active{
transform: translateX(0px);
}
} }
.menuTrainListBtn{ .menuTrainListBtn{
width: 20px; width: 20px;
@ -164,24 +150,29 @@ export default {
border-radius: 6px 0px 0px 6px; border-radius: 6px 0px 0px 6px;
position: absolute; position: absolute;
top: 45%; top: 45%;
left: -20px;
z-index: 2; z-index: 2;
cursor:pointer; transform: translateX(-20px);
cursor: pointer;
.el-icon-more{
font-size: 20px;
margin-top: 9px;
transform-origin: 50% 50%;
transform: rotate(90deg);
margin-left:0px;
}
} }
.menuTrainListOut{ .menuTrainList_box{
position: absolute; height: 100%;
right: 0; .menuTrainList{
top: 15%; width: 400px;
height: 70%; height: 100%;
border-radius: 10px 0px 0px 10px;
background: #fff;
}
} }
.menuTrainList{
width: 400px; .topTrainListInfo,
height:100%; .bottomTrainListInfo{
border-radius: 10px 0px 0px 10px;
// padding: 5px;
background: #fff;
}
.topTrainListInfo,.bottomTrainListInfo{
padding: 10px 10px; padding: 10px 10px;
background: #cde2ef; background: #cde2ef;
font-size: 13px; font-size: 13px;

View File

@ -23,7 +23,14 @@ export default {
data() { data() {
return { return {
selected: null, selected: null,
menus: null menus: null,
typeObj: {
SECTION: '区段',
SIGNAL: '信号机',
SWITCH: '道岔',
PSD: '屏蔽门',
STATIONSTAND: '站台'
}
}; };
}, },
computed: { computed: {
@ -109,11 +116,13 @@ export default {
this.$store.dispatch('menuOperation/setMenuChange', {device: device, subType: em.subType}); this.$store.dispatch('menuOperation/setMenuChange', {device: device, subType: em.subType});
} }
this.$store.dispatch('training/emitTipFresh'); this.$store.dispatch('training/emitTipFresh');
if (this.$store.state.map.selectDevice && this.$store.state.map.selectDevice.flag) { if (this.$store.state.map.selectDevice && this.$store.state.map.selectDevice.flag && device._type) {
if (device._type.toUpperCase() == this.$store.state.map.selectDevice.type.toUpperCase()) { if (device._type.toUpperCase() == this.$store.state.map.selectDevice.type.toUpperCase()) {
EventBus.$emit('selectDevice', this.selected); EventBus.$emit('selectDevice', this.selected);
} else { } else {
this.$message.info('选择的设备类型不对'); const name = this.typeObj[this.$store.state.map.selectDevice.type];
const info = '选择的设备类型不正确' + (name ? `,请选择${name}类型` : '');
this.$message.info(info);
} }
} }