PIS滚动信息修改 && ISCS车站广播
This commit is contained in:
Yuan
parent
80b509464a
commit
8d314acc54
@ -24,12 +24,12 @@ export function handlerUrl(data) {
|
||||
if (process.env.NODE_ENV === 'development') {
|
||||
// const data = null;
|
||||
// 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.233/rtss-server';
|
||||
// BASE_API = 'http://114.116.51.125/jlcloud';
|
||||
// BASE_API = 'http://192.168.3.90:9100'; // 周寅
|
||||
// BASE_API = 'http://192.168.3.94:9000'; // 旭强
|
||||
// BASE_API = 'http://192.168.3.15:9000'; // 张赛
|
||||
BASE_API = 'http://192.168.3.15:9000'; // 张赛
|
||||
// BASE_API = 'http://192.168.3.5:9000'; // 夏增彬
|
||||
// BASE_API = 'http://192.168.3.37:9000'; // 卫志宏
|
||||
// BASE_API = 'http://b29z135112.zicp.vip';
|
||||
|
||||
@ -59,7 +59,7 @@
|
||||
</div>
|
||||
<div v-show="addModel.infoType !== 'REAL_TIME'" style="margin-top: 10px">
|
||||
<div style="display: inline;">名称：</div>
|
||||
<input v-model="resource.name" class="pis-dialog-input" style="width: 550px;">
|
||||
<input disabled v-model="resource.name" class="pis-dialog-input" style="width: 550px;">
|
||||
<!--<input v-model="addModel.infoTime" class="pis-dialog-input" style="width: 140px;">-->
|
||||
<!--<div style="display: inline;">次</div>-->
|
||||
</div>
|
||||
|
||||
@ -6,10 +6,19 @@
|
||||
<div class="main_screen_content">
|
||||
<div class="screen_left">
|
||||
<div class="screen_left_tab">特定区域</div>
|
||||
<el-row><el-button v-for="(item, index) in verticalHeader" :key="index" class="screen_operate_name" :class="{'active': item.active}" @click="selectedBatch(item)">{{ item.title }}</el-button></el-row>
|
||||
<el-row
|
||||
><el-button
|
||||
v-for="(item, index) in verticalHeader"
|
||||
:key="index"
|
||||
class="screen_operate_name"
|
||||
:class="{ active: item.active }"
|
||||
@click="selectedBatch(item)"
|
||||
>{{ item.title }}</el-button
|
||||
></el-row
|
||||
>
|
||||
</div>
|
||||
<div class="screen_main_content">
|
||||
<div class="screen_main_content_inner">
|
||||
<div v-show="!isSingleStation" class="screen_main_content_inner">
|
||||
<div class="screen_left_text_group">
|
||||
<div v-for="(item, index) in verticalHeader" :key="index" class="each_data_info">{{ item.name }}</div>
|
||||
</div>
|
||||
@ -19,27 +28,72 @@
|
||||
<div class="each_data_info" @click="selectedStation(station)">
|
||||
<div class="screen_station_name">{{ station.stationName }}</div>
|
||||
</div>
|
||||
<div v-if="station.children&&station.children.length>0">
|
||||
<div v-for="(child,index) in station.children" :key="station.code+index" class="each_data_info" style="display: flex;align-items: center;justify-content: center;" @click="selectArea(station.code,index)">
|
||||
<div v-if="child.status==='default'" class="button_default_content">
|
||||
<div class="button_default" :style="{background:selectedAreaList.includes(station.code + '-' + index)?'#2EFF74':'#CDCDCD'}" />
|
||||
<div v-if="station.children && station.children.length > 0">
|
||||
<div
|
||||
v-for="(child, index) in station.children"
|
||||
:key="station.code + index"
|
||||
class="each_data_info"
|
||||
style="display: flex;align-items: center;justify-content: center;"
|
||||
@click="selectArea(station.code, index)"
|
||||
>
|
||||
<div v-if="child.status === 'default'" class="button_default_content">
|
||||
<div
|
||||
class="button_default"
|
||||
:style="{ background: selectedAreaList.includes(station.code + '-' + index) ? '#2EFF74' : '#CDCDCD' }"
|
||||
/>
|
||||
</div>
|
||||
<div :id="station.code + '-' + index" style="width: 14px;height: 14px;margin-left: 5px;" />
|
||||
<div
|
||||
v-if="child.status === 'default'"
|
||||
:class="station.code + '-' + index"
|
||||
style="width: 14px;height: 14px;margin-left: 5px;"
|
||||
:style="{ backgroundColor: statusColor['normal'] }"
|
||||
/>
|
||||
<div>{{ `${station.code}-${index}` }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-show="isSingleStation" class="screen_main_content_inner_single_station">
|
||||
<div class="header">
|
||||
<div v-for="(item, index) in singleStationHeader" :key="index" class="each_data_info">{{ item.name }}</div>
|
||||
</div>
|
||||
<div class="content">
|
||||
<div class="list" v-if="currentStation && currentStation.children && currentStation.children.length > 0">
|
||||
<div
|
||||
v-for="(child, index) in currentStation.children"
|
||||
:key="currentStation.code + index"
|
||||
class="each_data_info"
|
||||
style="display: flex;align-items: center;justify-content: center;"
|
||||
@click="selectArea(currentStation.code, index)"
|
||||
>
|
||||
<div v-if="child.status === 'default'" class="button_default_content">
|
||||
<div
|
||||
class="button_default"
|
||||
:style="{ background: selectedAreaList.includes(currentStation.code + '-' + index) ? '#2EFF74' : '#CDCDCD' }"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
v-if="child.status === 'default'"
|
||||
:class="currentStation.code + '-' + index"
|
||||
style="width: 14px;height: 14px;margin-left: 5px;"
|
||||
:style="{ backgroundColor: statusColor['normal'] }"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>{{ isSingleStation }}</div>
|
||||
</div>
|
||||
<div class="screen_right">
|
||||
<div class="each_operate">
|
||||
<div class="each_operate_text">操作</div>
|
||||
<div class="each_operate_button" @click="showInfoBrroadcast">信息发布<br>窗口</div>
|
||||
<div class="each_operate_button" @click="showInfoBrroadcast">信息发布<br />窗口</div>
|
||||
</div>
|
||||
<div class="each_operate">
|
||||
<div class="each_operate_text">信息清除</div>
|
||||
<div class="each_operate_button" @click="stopBroadcast">清除<br>普通信息</div>
|
||||
<div class="each_operate_button" @click="stopBroadcast">清除<br />普通信息</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -69,354 +123,549 @@
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { getByGroupStationList } from '@/api/jmap/map';
|
||||
import { queryIscsDeviceCod } from '@/api/iscs';
|
||||
import InfoBroadcast from './infoBroadcast';
|
||||
import { sendCommandNew } from '@/api/jmap/training';
|
||||
import { creatSubscribe, clearSubscribe, getTopic } from '@/utils/stomp';
|
||||
import { getToken } from '@/utils/auth';
|
||||
export default {
|
||||
name:'MainScreen',
|
||||
components: {
|
||||
InfoBroadcast
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
verticalHeader: [
|
||||
{name: '车站', title: '全线', key: 'station', type: 'header', active: false},
|
||||
{name: '站厅(LCD)', title: '全站厅(LCD)', key: 'stationHall', type: 'checkBox', active: false},
|
||||
{name: '上行站台', title: '全上行站台', key: 'uplinkStation', type: 'checkBox', active: false},
|
||||
{name: '下行站台', title: '全下行站台', key: 'downlinkStation', type: 'checkBox', active: false},
|
||||
{name: '出入口', title: '全出入口', key: 'passageway', type: 'checkBox', active: false},
|
||||
{name: '物业', title: '全物业', key: 'property', type: 'checkBox', active: false},
|
||||
{name: '天桥1', title: '天桥1', key: 'overbridge1', type: 'checkBox', active: false},
|
||||
{name: '天桥2', title: '天桥2', key: 'overbridge2', type: 'checkBox', active: false},
|
||||
{name: 'LED', title: '出入口(LED)', key: 'LED', type: 'checkBox', active: false}
|
||||
],
|
||||
stationList:[],
|
||||
selectedAreaList: [],
|
||||
iscsDeviceMap: {},
|
||||
deviceMap: {}
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
'$store.state.socket.iscsStatePisMessages': function (list) {
|
||||
if (list && list.length) {
|
||||
list.forEach(item => {
|
||||
const index = this.iscsDeviceMap[item.code];
|
||||
if (index) {
|
||||
this.$set(this.deviceMap[index], 'state', item.state);
|
||||
const div = document.getElementById(index);
|
||||
div.style.background = item.state === 'normal' ? '#2EFF74' : '#D4D4D4';
|
||||
}
|
||||
});
|
||||
}
|
||||
import { getByGroupStationList } from '@/api/jmap/map'
|
||||
import { queryIscsDeviceCod } from '@/api/iscs'
|
||||
import InfoBroadcast from './infoBroadcast'
|
||||
import { sendCommandNew } from '@/api/jmap/training'
|
||||
import { creatSubscribe, clearSubscribe, getTopic } from '@/utils/stomp'
|
||||
import { getToken } from '@/utils/auth'
|
||||
|
||||
}
|
||||
export default {
|
||||
name: 'MainScreen',
|
||||
components: {
|
||||
InfoBroadcast,
|
||||
},
|
||||
computed: {
|
||||
currentStation() {
|
||||
return this.stationList.find(station => station.code === this.$route.query.stationId)
|
||||
},
|
||||
async created () {
|
||||
// 请求当前线路车站列表
|
||||
try {
|
||||
const positionMap = {
|
||||
LCD: 0,
|
||||
UP_STAND: 1,
|
||||
DOWN_STAND: 2,
|
||||
GATE: 3,
|
||||
PROPERTY: 4,
|
||||
OVERPASS1: 5,
|
||||
OVERPASS2: 6,
|
||||
LED:7
|
||||
};
|
||||
const res = await getByGroupStationList(this.$route.query.group);
|
||||
const resp = await queryIscsDeviceCod({ mapId: this.$route.query.mapId, system: 'PIS' });
|
||||
if (res.code == 200) {
|
||||
this.stationList = [];
|
||||
res.data.forEach(station => {
|
||||
if (!station.depot) {
|
||||
const children = [{status:'none'}, {status:'none'}, {status:'none'}, {status:'none'}, {status:'none'}, {status:'none'}, {status:'none'}, {status:'none'}];
|
||||
if (resp.code == 200) {
|
||||
resp.data && resp.data.forEach(item => {
|
||||
if (station.code == item.station) {
|
||||
const index = positionMap[item.position];
|
||||
if ( children[index]) {
|
||||
children[index].status = 'default';
|
||||
this.iscsDeviceMap[item.code] = station.code + '-' + index;
|
||||
this.deviceMap[station.code + '-' + index] = item;
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
const param = {
|
||||
stationName: station.name,
|
||||
code: station.code,
|
||||
children:children
|
||||
};
|
||||
this.stationList.push(param);
|
||||
}
|
||||
});
|
||||
}
|
||||
this.subscribe();
|
||||
} catch (e) {
|
||||
this.$message.error('获取车站列表失败！');
|
||||
}
|
||||
isSingleStation() {
|
||||
return this.$route.query.stationId.startsWith('Station')
|
||||
},
|
||||
beforeDestroy() {
|
||||
this.clearSubscribe();
|
||||
singleStationHeader() {
|
||||
return this.verticalHeader.slice(1)
|
||||
},
|
||||
methods:{
|
||||
showInfoBrroadcast() {
|
||||
this.$refs.infoBroadcast.doShow();
|
||||
},
|
||||
stopBroadcast() {
|
||||
const iscsDeviceCodes = [];
|
||||
this.selectedAreaList.forEach(item => {
|
||||
if (this.deviceMap[item]) {
|
||||
iscsDeviceCodes.push(this.deviceMap[item].code);
|
||||
}
|
||||
});
|
||||
if (!iscsDeviceCodes.length) {
|
||||
this.$message.error('请选择广播设备');
|
||||
return;
|
||||
}
|
||||
sendCommandNew(this.$route.query.group, 'ISCS_PIS_Stop_Playing', {iscsDeviceCodes: iscsDeviceCodes}).then(resp => {
|
||||
const audio = document.getElementById('voice');
|
||||
audio.pause();
|
||||
}).catch(() => {
|
||||
this.$message.error('广播终止播放失败！');
|
||||
});
|
||||
},
|
||||
releaseBroadcast(voice, type) {
|
||||
const iscsDeviceCodes = [];
|
||||
this.selectedAreaList.forEach(item => {
|
||||
if (this.deviceMap[item]) {
|
||||
iscsDeviceCodes.push(this.deviceMap[item].code);
|
||||
}
|
||||
});
|
||||
if (!iscsDeviceCodes.length) {
|
||||
this.$message.error('请选择广播设备');
|
||||
return;
|
||||
}
|
||||
const params = {
|
||||
resourceId: voice.id,
|
||||
iscsDeviceCodes: iscsDeviceCodes,
|
||||
name: voice.name,
|
||||
content: voice.content,
|
||||
type
|
||||
};
|
||||
sendCommandNew(this.$route.query.group, 'ISCS_PIS_Play', params).then(resp => {
|
||||
const voiceUrl = this.$store.state.user.resourcesUrl + (voice.url || resp.data);
|
||||
const audio = document.getElementById('voice');
|
||||
audio.src = voiceUrl;
|
||||
audio.play();
|
||||
}).catch(() => {
|
||||
this.$message.error('发布广播失败！');
|
||||
});
|
||||
},
|
||||
selectArea(stationName, index) {
|
||||
const elem = stationName + '-' + index;
|
||||
if (this.selectedAreaList.includes(elem)) {
|
||||
const areaIndex = this.selectedAreaList.indexOf(elem);
|
||||
this.selectedAreaList.splice(areaIndex, 1);
|
||||
} else {
|
||||
this.selectedAreaList.push(elem);
|
||||
}
|
||||
},
|
||||
selectedStation(station) {
|
||||
const flag = this.checkStationSelected(station);
|
||||
station.children.forEach((item, index) => {
|
||||
const elem = station.code + '-' + index;
|
||||
if (item.status === 'default' && flag) {
|
||||
const areaIndex = this.selectedAreaList.indexOf(elem);
|
||||
this.selectedAreaList.splice(areaIndex, 1);
|
||||
} else if (item.status === 'default' && !flag && !this.selectedAreaList.includes(elem)) {
|
||||
this.selectedAreaList.push(elem);
|
||||
}
|
||||
});
|
||||
},
|
||||
checkStationSelected(station) {
|
||||
let stationSelectedFlag = true;
|
||||
station.children.some((item, index) => {
|
||||
if (item.status === 'default') {
|
||||
stationSelectedFlag = this.selectedAreaList.includes(station.code + '-' + index);
|
||||
return !stationSelectedFlag;
|
||||
}
|
||||
});
|
||||
return stationSelectedFlag;
|
||||
},
|
||||
selectedBatch(data) {
|
||||
data.active = !data.active;
|
||||
if (data.key == 'station') {
|
||||
this.selectedAllLine(data);
|
||||
} else {
|
||||
let areaIndex;
|
||||
this.verticalHeader.map((item, index) => {
|
||||
if (item.key == data.key) {
|
||||
areaIndex = index;
|
||||
}
|
||||
});
|
||||
const flag = data.active;
|
||||
this.stationList.forEach(station => {
|
||||
station.children.forEach((item, index) => {
|
||||
const elem = station.code + '-' + index;
|
||||
if (item.status == 'default' && (index + 1) == areaIndex && !flag) {
|
||||
const selectedAreaIndex = this.selectedAreaList.indexOf(elem);
|
||||
this.selectedAreaList.splice(selectedAreaIndex, 1);
|
||||
} else if (item.status == 'default' && (index + 1) == areaIndex && flag) {
|
||||
this.selectedAreaList.push(elem);
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
},
|
||||
selectedAllLine(data) {
|
||||
const flag = data.active;
|
||||
this.selectedAreaList = [];
|
||||
this.stationList.forEach(station => {
|
||||
station.children.forEach((item, index) => {
|
||||
if (item.status === 'default' && flag) {
|
||||
this.selectedAreaList.push(station.code + '-' + index);
|
||||
}
|
||||
});
|
||||
});
|
||||
},
|
||||
subscribe() {
|
||||
this.clearSubscribe();
|
||||
const header = { group: this.$route.query.group || '', 'X-Token': getToken() };
|
||||
creatSubscribe(getTopic('ISCSPIS', this.$route.query.group ), header);
|
||||
this.$store.dispatch('app/animationsClose');
|
||||
},
|
||||
clearSubscribe() {
|
||||
clearSubscribe(getTopic('ISCSPIS', this.$route.query.group));
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
verticalHeader: [
|
||||
{ name: '车站', title: '全线', key: 'station', type: 'header', active: false },
|
||||
{ name: '站厅(LCD)', title: '全站厅(LCD)', key: 'stationHall', type: 'checkBox', active: false },
|
||||
{ name: '上行站台', title: '全上行站台', key: 'uplinkStation', type: 'checkBox', active: false },
|
||||
{ name: '下行站台', title: '全下行站台', key: 'downlinkStation', type: 'checkBox', active: false },
|
||||
{ name: '出入口', title: '全出入口', key: 'passageway', type: 'checkBox', active: false },
|
||||
{ name: '物业', title: '全物业', key: 'property', type: 'checkBox', active: false },
|
||||
{ name: '天桥1', title: '天桥1', key: 'overbridge1', type: 'checkBox', active: false },
|
||||
{ name: '天桥2', title: '天桥2', key: 'overbridge2', type: 'checkBox', active: false },
|
||||
{ name: 'LED', title: '出入口(LED)', key: 'LED', type: 'checkBox', active: false },
|
||||
],
|
||||
statusColor: {
|
||||
normal: '#00ff00',
|
||||
},
|
||||
stationList: [],
|
||||
selectedAreaList: [],
|
||||
iscsDeviceMap: {},
|
||||
deviceMap: {},
|
||||
}
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
// '$store.state.socket.iscsStatePisMessages': function(list) {
|
||||
// if (list && list.length) {
|
||||
// list.forEach(item => {
|
||||
// const index = this.iscsDeviceMap[item.code]
|
||||
// if (index) {
|
||||
// this.$set(this.deviceMap[index], 'state', item.state)
|
||||
// }
|
||||
// })
|
||||
// }
|
||||
// },
|
||||
},
|
||||
async created() {
|
||||
// 请求当前线路车站列表
|
||||
try {
|
||||
const positionMap = {
|
||||
LCD: 0,
|
||||
UP_STAND: 1,
|
||||
DOWN_STAND: 2,
|
||||
GATE: 3,
|
||||
PROPERTY: 4,
|
||||
OVERPASS1: 5,
|
||||
OVERPASS2: 6,
|
||||
LED: 7,
|
||||
}
|
||||
const res = await getByGroupStationList(this.$route.query.group)
|
||||
const resp = await queryIscsDeviceCod({ mapId: this.$route.query.mapId, system: 'PIS' })
|
||||
if (res.code == 200) {
|
||||
this.stationList = []
|
||||
res.data.forEach(station => {
|
||||
if (!station.depot) {
|
||||
const children = [
|
||||
{ status: 'none' },
|
||||
{ status: 'none' },
|
||||
{ status: 'none' },
|
||||
{ status: 'none' },
|
||||
{ status: 'none' },
|
||||
{ status: 'none' },
|
||||
{ status: 'none' },
|
||||
{ status: 'none' },
|
||||
]
|
||||
if (resp.code == 200) {
|
||||
resp.data &&
|
||||
resp.data.forEach(item => {
|
||||
if (station.code == item.station) {
|
||||
const index = positionMap[item.position]
|
||||
if (children[index]) {
|
||||
children[index].status = 'default'
|
||||
this.iscsDeviceMap[item.code] = station.code + '-' + index
|
||||
this.deviceMap[station.code + '-' + index] = item
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
const param = {
|
||||
stationName: station.name,
|
||||
code: station.code,
|
||||
children: children,
|
||||
}
|
||||
this.stationList.push(param)
|
||||
}
|
||||
})
|
||||
}
|
||||
this.subscribe()
|
||||
} catch (e) {
|
||||
this.$message.error('获取车站列表失败！')
|
||||
}
|
||||
},
|
||||
beforeDestroy() {
|
||||
this.clearSubscribe()
|
||||
},
|
||||
methods: {
|
||||
showInfoBrroadcast() {
|
||||
this.$refs.infoBroadcast.doShow()
|
||||
},
|
||||
stopBroadcast() {
|
||||
const iscsDeviceCodes = []
|
||||
this.selectedAreaList.forEach(item => {
|
||||
if (this.deviceMap[item]) {
|
||||
iscsDeviceCodes.push(this.deviceMap[item].code)
|
||||
}
|
||||
})
|
||||
if (!iscsDeviceCodes.length) {
|
||||
this.$message.error('请选择广播设备')
|
||||
return
|
||||
}
|
||||
sendCommandNew(this.$route.query.group, 'ISCS_PIS_Stop_Playing', { iscsDeviceCodes: iscsDeviceCodes })
|
||||
.then(resp => {
|
||||
const audio = document.getElementById('voice')
|
||||
audio.pause()
|
||||
})
|
||||
.catch(() => {
|
||||
this.$message.error('广播终止播放失败！')
|
||||
})
|
||||
},
|
||||
releaseBroadcast(voice, type) {
|
||||
const iscsDeviceCodes = []
|
||||
this.selectedAreaList.forEach(item => {
|
||||
if (this.isSingleStation && !item.startsWith(this.$route.query.stationId)) return
|
||||
if (this.deviceMap[item]) {
|
||||
iscsDeviceCodes.push(this.deviceMap[item].code)
|
||||
}
|
||||
})
|
||||
if (!iscsDeviceCodes.length) {
|
||||
this.$message.error('请选择广播设备')
|
||||
return
|
||||
}
|
||||
const params = {
|
||||
resourceId: voice.id,
|
||||
iscsDeviceCodes: iscsDeviceCodes,
|
||||
name: voice.name,
|
||||
content: voice.content,
|
||||
type,
|
||||
}
|
||||
sendCommandNew(this.$route.query.group, 'ISCS_PIS_Play', params)
|
||||
.then(resp => {
|
||||
const voiceUrl = this.$store.state.user.resourcesUrl + (voice.url || resp.data)
|
||||
const audio = document.getElementById('voice')
|
||||
audio.src = voiceUrl
|
||||
audio.play()
|
||||
})
|
||||
.catch(() => {
|
||||
this.$message.error('发布广播失败！')
|
||||
})
|
||||
},
|
||||
selectArea(stationName, index) {
|
||||
const elem = stationName + '-' + index
|
||||
if (this.selectedAreaList.includes(elem)) {
|
||||
const areaIndex = this.selectedAreaList.indexOf(elem)
|
||||
this.selectedAreaList.splice(areaIndex, 1)
|
||||
} else {
|
||||
this.selectedAreaList.push(elem)
|
||||
}
|
||||
},
|
||||
selectedStation(station) {
|
||||
const flag = this.checkStationSelected(station)
|
||||
station.children.forEach((item, index) => {
|
||||
const elem = station.code + '-' + index
|
||||
if (item.status === 'default' && flag) {
|
||||
const areaIndex = this.selectedAreaList.indexOf(elem)
|
||||
this.selectedAreaList.splice(areaIndex, 1)
|
||||
} else if (item.status === 'default' && !flag && !this.selectedAreaList.includes(elem)) {
|
||||
this.selectedAreaList.push(elem)
|
||||
}
|
||||
})
|
||||
},
|
||||
checkStationSelected(station) {
|
||||
let stationSelectedFlag = true
|
||||
station.children.some((item, index) => {
|
||||
if (item.status === 'default') {
|
||||
stationSelectedFlag = this.selectedAreaList.includes(station.code + '-' + index)
|
||||
return !stationSelectedFlag
|
||||
}
|
||||
})
|
||||
return stationSelectedFlag
|
||||
},
|
||||
selectedBatch(data) {
|
||||
data.active = !data.active
|
||||
if (data.key == 'station') {
|
||||
this.selectedAllLine(data)
|
||||
} else {
|
||||
let areaIndex
|
||||
this.verticalHeader.map((item, index) => {
|
||||
if (item.key == data.key) {
|
||||
areaIndex = index
|
||||
}
|
||||
})
|
||||
const flag = data.active
|
||||
this.stationList.forEach(station => {
|
||||
station.children.forEach((item, index) => {
|
||||
const elem = station.code + '-' + index
|
||||
if (item.status == 'default' && index + 1 == areaIndex && !flag) {
|
||||
const selectedAreaIndex = this.selectedAreaList.indexOf(elem)
|
||||
this.selectedAreaList.splice(selectedAreaIndex, 1)
|
||||
} else if (item.status == 'default' && index + 1 == areaIndex && flag) {
|
||||
this.selectedAreaList.push(elem)
|
||||
}
|
||||
})
|
||||
})
|
||||
}
|
||||
},
|
||||
selectedAllLine(data) {
|
||||
const flag = data.active
|
||||
this.selectedAreaList = []
|
||||
this.stationList.forEach(station => {
|
||||
station.children.forEach((item, index) => {
|
||||
if (item.status === 'default' && flag) {
|
||||
this.selectedAreaList.push(station.code + '-' + index)
|
||||
}
|
||||
})
|
||||
})
|
||||
},
|
||||
subscribe() {
|
||||
this.clearSubscribe()
|
||||
const header = { group: this.$route.query.group || '', 'X-Token': getToken() }
|
||||
creatSubscribe(getTopic('ISCSPIS', this.$route.query.group), header)
|
||||
this.$store.dispatch('app/animationsClose')
|
||||
},
|
||||
clearSubscribe() {
|
||||
clearSubscribe(getTopic('ISCSPIS', this.$route.query.group))
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
/deep/{
|
||||
.el-button{
|
||||
border-radius: 0 !important;
|
||||
color: #333 !important;
|
||||
width: 100% !important;
|
||||
}
|
||||
/deep/ {
|
||||
.el-button {
|
||||
border-radius: 0 !important;
|
||||
color: #333 !important;
|
||||
width: 100% !important;
|
||||
}
|
||||
}
|
||||
.screen_header_text{margin-top: 20px;text-align: center;color: #9af1ec;font-size: 18px;padding-right: 100px;padding-bottom: 10px;}
|
||||
.main_screen{padding-left: 50px;width: 100%;}
|
||||
.main_screen_header{}
|
||||
.screen_main_content_inner{width: 100%;height: 500px;border-top: 2px solid #8c8a89;overflow-y: auto;display:flex;border-left: 2px solid #8c8a89;border-right: 2px solid #fff;border-bottom: 2px solid #fff;}
|
||||
.main_screen_content{display:inline-block;width: 100%;padding-left:100px;padding-right:200px;position: relative;height:500px;}
|
||||
.screen_left{display: inline-block;padding-bottom: 10px;padding-top: 10px;width: 100px;border: 2px #ccc solid;
|
||||
border-top: 2px solid #8c8a89;border-left: 2px solid #8c8a89;border-right: 2px solid #fff;border-bottom: 2px solid #fff;position:absolute;left:0;}
|
||||
.screen_left_tab{
|
||||
font-size: 12px;
|
||||
text-align: center;
|
||||
color: #86e4d6;
|
||||
.screen_header_text {
|
||||
margin-top: 20px;
|
||||
text-align: center;
|
||||
color: #9af1ec;
|
||||
font-size: 18px;
|
||||
padding-right: 100px;
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
.sceen_left_content{}
|
||||
.screen_right{display: inline-block;position:absolute;right:0;top:0;width: 200px;}
|
||||
.each_operate{width: 92px;padding: 10px;border-top: 2px solid #8c8a89;border-left: 2px solid #8c8a89;border-right: 2px solid #fff;border-bottom: 2px solid #fff;margin-top: 30px;margin-left: 30px;}
|
||||
.each_operate_text{text-align: center;font-size: 12px;color: #a9f4f6;}
|
||||
.each_operate_button{text-align: center;font-size: 12px;margin-top: 5px;cursor:pointer;background: #CCCCCC;display: inline-block;border-top: 2px solid #fff;border-left: 2px solid #fff;border-right: 2px solid #565656;border-bottom: 2px solid #565656;padding: 2px 8px;line-height: 140%;}
|
||||
.footer_button_group{position: absolute;right: 0;top: 0;width: 160px;}
|
||||
.main_screen_footer{margin-left: 120px;padding-right:160px;position: relative;margin-top:10px;}
|
||||
#screen_footer_text{
|
||||
width:100%;
|
||||
resize:none;
|
||||
height: 190px;
|
||||
border-top: 2px solid #8c8a89;
|
||||
border-left: 2px solid #8c8a89;
|
||||
border-right: 2px solid #fff;
|
||||
border-bottom: 2px solid #fff;
|
||||
.main_screen {
|
||||
padding-left: 50px;
|
||||
width: 100%;
|
||||
}
|
||||
.each_footer_button{margin-left:20px;margin-top: 10px;}
|
||||
.each_footer_button_icon{width: 14px;height: 14px;display: inline-block;}
|
||||
.each_footer_button_text{font-size: 13px;color: #fff;margin-left: 5px;display: inline-block;vertical-align: top;margin-top: 1px;}
|
||||
.screen_main_content{padding-left: 20px;padding-right: 20px;}
|
||||
.screen_status_red{background:#ff0000;}
|
||||
.screen_status_green{background:#00ff00;}
|
||||
.screen_status_blue{background:#00aaff}
|
||||
.screen_status_active{border-top: 2px solid #f1f1f1;border-left: 2px solid #d0d8dd;border-right: 2px solid #959da0;border-bottom: 2px solid #90999d;}
|
||||
.screen_status_active:after{
|
||||
content:'';
|
||||
border-top: 2px solid #a6a2a6;
|
||||
border-left: 2px solid #a5aca5;
|
||||
border-right: 2px solid #ececec;
|
||||
border-bottom: 2px solid #e4e4e4;
|
||||
background: #00ff00;
|
||||
min-width: 10px;
|
||||
height: 10px;
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
.main_screen_header {
|
||||
}
|
||||
.screen_status_active::after{content:'';border-top: 2px solid #a6a2a6;border-left: 2px solid #a5aca5;border-right: 2px solid #ececec;border-bottom: 2px solid #e4e4e4;background: #00ff00;min-width: 10px;height: 10px;display: inline-block;vertical-align: top;}
|
||||
.screen_left_text_group{width:260px;padding: 0px 10px 10px 10px;font-size: 14px;color: #9de4e8;display: inline-block;}
|
||||
.each_data_info{margin-top:10px;height:20px;}
|
||||
.screen_right_group{display: inline-block;vertical-align: top;font-size:0;overflow-x: auto;min-height:100%;}
|
||||
.each_station_info{width:130px;display: inline-block;vertical-align:top;padding-right: 10px;}
|
||||
.screen_station_name,.screen_operate_name{
|
||||
padding: 2px 0px;
|
||||
font-size: 12px;
|
||||
.screen_main_content_inner {
|
||||
width: 100%;
|
||||
height: 500px;
|
||||
border-top: 2px solid #8c8a89;
|
||||
overflow-y: auto;
|
||||
display: flex;
|
||||
border-left: 2px solid #8c8a89;
|
||||
border-right: 2px solid #fff;
|
||||
border-bottom: 2px solid #fff;
|
||||
}
|
||||
.screen_main_content_inner_single_station {
|
||||
width: 100%;
|
||||
height: 500px;
|
||||
border-top: 2px solid #8c8a89;
|
||||
border-left: 2px solid #8c8a89;
|
||||
border-right: 2px solid #fff;
|
||||
border-bottom: 2px solid #fff;
|
||||
.header {
|
||||
display: flex;
|
||||
justify-content: space-evenly;
|
||||
color: #9af1ec;
|
||||
& > div {
|
||||
width: 11%;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
.content {
|
||||
.list {
|
||||
display: flex;
|
||||
justify-content: space-evenly;
|
||||
& > div {
|
||||
width: 11%;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.main_screen_content {
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
padding-left: 100px;
|
||||
padding-right: 200px;
|
||||
position: relative;
|
||||
height: 500px;
|
||||
}
|
||||
.screen_left {
|
||||
display: inline-block;
|
||||
padding-bottom: 10px;
|
||||
padding-top: 10px;
|
||||
width: 100px;
|
||||
border: 2px #ccc solid;
|
||||
border-top: 2px solid #8c8a89;
|
||||
border-left: 2px solid #8c8a89;
|
||||
border-right: 2px solid #fff;
|
||||
border-bottom: 2px solid #fff;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
}
|
||||
.screen_left_tab {
|
||||
font-size: 12px;
|
||||
text-align: center;
|
||||
color: #86e4d6;
|
||||
}
|
||||
.sceen_left_content {
|
||||
}
|
||||
.screen_right {
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
width: 200px;
|
||||
}
|
||||
.each_operate {
|
||||
width: 92px;
|
||||
padding: 10px;
|
||||
border-top: 2px solid #8c8a89;
|
||||
border-left: 2px solid #8c8a89;
|
||||
border-right: 2px solid #fff;
|
||||
border-bottom: 2px solid #fff;
|
||||
margin-top: 30px;
|
||||
margin-left: 30px;
|
||||
}
|
||||
.each_operate_text {
|
||||
text-align: center;
|
||||
font-size: 12px;
|
||||
color: #a9f4f6;
|
||||
}
|
||||
.each_operate_button {
|
||||
text-align: center;
|
||||
font-size: 12px;
|
||||
margin-top: 5px;
|
||||
cursor: pointer;
|
||||
background: #cccccc;
|
||||
display: inline-block;
|
||||
border-top: 2px solid #fff;
|
||||
border-left: 2px solid #fff;
|
||||
border-right: 2px solid #565656;
|
||||
border-bottom: 2px solid #565656;
|
||||
padding: 2px 8px;
|
||||
line-height: 140%;
|
||||
}
|
||||
.footer_button_group {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
width: 160px;
|
||||
}
|
||||
.main_screen_footer {
|
||||
margin-left: 120px;
|
||||
padding-right: 160px;
|
||||
position: relative;
|
||||
margin-top: 10px;
|
||||
}
|
||||
#screen_footer_text {
|
||||
width: 100%;
|
||||
resize: none;
|
||||
height: 190px;
|
||||
border-top: 2px solid #8c8a89;
|
||||
border-left: 2px solid #8c8a89;
|
||||
border-right: 2px solid #fff;
|
||||
border-bottom: 2px solid #fff;
|
||||
}
|
||||
.each_footer_button {
|
||||
margin-left: 20px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
.each_footer_button_icon {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
display: inline-block;
|
||||
}
|
||||
.each_footer_button_text {
|
||||
font-size: 13px;
|
||||
color: #fff;
|
||||
margin-left: 5px;
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
margin-top: 1px;
|
||||
}
|
||||
.screen_main_content {
|
||||
padding-left: 20px;
|
||||
padding-right: 20px;
|
||||
}
|
||||
.screen_status_red {
|
||||
background: #ff0000;
|
||||
}
|
||||
.screen_status_green {
|
||||
background: #00ff00;
|
||||
}
|
||||
.screen_status_blue {
|
||||
background: #00aaff;
|
||||
}
|
||||
.screen_status_active {
|
||||
border-top: 2px solid #f1f1f1;
|
||||
border-left: 2px solid #d0d8dd;
|
||||
border-right: 2px solid #959da0;
|
||||
border-bottom: 2px solid #90999d;
|
||||
}
|
||||
.screen_status_active:after {
|
||||
content: '';
|
||||
border-top: 2px solid #a6a2a6;
|
||||
border-left: 2px solid #a5aca5;
|
||||
border-right: 2px solid #ececec;
|
||||
border-bottom: 2px solid #e4e4e4;
|
||||
background: #00ff00;
|
||||
min-width: 10px;
|
||||
height: 10px;
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
}
|
||||
.screen_status_active::after {
|
||||
content: '';
|
||||
border-top: 2px solid #a6a2a6;
|
||||
border-left: 2px solid #a5aca5;
|
||||
border-right: 2px solid #ececec;
|
||||
border-bottom: 2px solid #e4e4e4;
|
||||
background: #00ff00;
|
||||
min-width: 10px;
|
||||
height: 10px;
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
}
|
||||
.screen_left_text_group {
|
||||
width: 260px;
|
||||
padding: 0px 10px 10px 10px;
|
||||
font-size: 14px;
|
||||
color: #9de4e8;
|
||||
display: inline-block;
|
||||
}
|
||||
.each_data_info {
|
||||
margin-top: 10px;
|
||||
height: 20px;
|
||||
}
|
||||
.screen_right_group {
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
font-size: 0;
|
||||
overflow-x: auto;
|
||||
min-height: 100%;
|
||||
}
|
||||
.each_station_info {
|
||||
width: 130px;
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
padding-right: 10px;
|
||||
}
|
||||
.screen_station_name,
|
||||
.screen_operate_name {
|
||||
padding: 2px 0px;
|
||||
font-size: 12px;
|
||||
background: #cccccc;
|
||||
text-align: center;
|
||||
border-top: 2px solid #f9f9f9;
|
||||
border-left: 2px solid #f6f8f8;
|
||||
border-right: 2px solid #9e9e9e;
|
||||
border-bottom: 2px solid #636667;
|
||||
cursor: pointer;
|
||||
margin-left: 0;
|
||||
margin-top: 10px;
|
||||
&:active,
|
||||
&.active {
|
||||
background: #cccccc;
|
||||
text-align: center;
|
||||
border-top: 2px solid #f9f9f9;
|
||||
border-left: 2px solid #f6f8f8;
|
||||
border-right: 2px solid #9e9e9e;
|
||||
border-bottom: 2px solid #636667;
|
||||
cursor: pointer;
|
||||
margin-left: 0;
|
||||
margin-top: 10px;
|
||||
&:active,
|
||||
&.active{
|
||||
background: #cccccc;
|
||||
border-top: 2px solid #9c9c9c;
|
||||
border-left: 2px solid #9c9c9c;
|
||||
border-right: 2px solid #fff;
|
||||
border-bottom: 2px solid #fff;
|
||||
}
|
||||
}
|
||||
.screen_station_name{
|
||||
width: 120px;
|
||||
}
|
||||
.screen_station_name.active{
|
||||
background: #EBB570;
|
||||
border-top: 2px solid #795B31;
|
||||
border-left: 2px solid #795B31;
|
||||
border-top: 2px solid #9c9c9c;
|
||||
border-left: 2px solid #9c9c9c;
|
||||
border-right: 2px solid #fff;
|
||||
border-bottom: 2px solid #fff;
|
||||
}
|
||||
}
|
||||
.screen_station_name {
|
||||
width: 120px;
|
||||
}
|
||||
.screen_station_name.active {
|
||||
background: #ebb570;
|
||||
border-top: 2px solid #795b31;
|
||||
border-left: 2px solid #795b31;
|
||||
border-right: 2px solid #fff;
|
||||
border-bottom: 2px solid #fff;
|
||||
}
|
||||
|
||||
.data_button_info{
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
display: inline-block;
|
||||
margin-left: 52px;
|
||||
position: relative;
|
||||
.data_button_info {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
display: inline-block;
|
||||
margin-left: 52px;
|
||||
position: relative;
|
||||
}
|
||||
.button_default{
|
||||
height: 10px;
|
||||
width: 10px;
|
||||
margin: auto;
|
||||
background:#CCCCCC;
|
||||
position: relative;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
border-top: 2px solid #fff;
|
||||
border-left: 2px solid #fff;
|
||||
border-right: 2px solid #898888;
|
||||
border-bottom: 2px solid #898888;
|
||||
.button_default {
|
||||
height: 10px;
|
||||
width: 10px;
|
||||
margin: auto;
|
||||
background: #cccccc;
|
||||
position: relative;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
border-top: 2px solid #fff;
|
||||
border-left: 2px solid #fff;
|
||||
border-right: 2px solid #898888;
|
||||
border-bottom: 2px solid #898888;
|
||||
}
|
||||
.button_default_content{
|
||||
height: 18px;
|
||||
width: 18px;
|
||||
background: #D4D4D4;
|
||||
display: inline-block;
|
||||
border-top: 2px solid #fff;
|
||||
border-left: 2px solid #fff;
|
||||
border-right: 2px solid #898888;
|
||||
border-bottom: 2px solid #898888;
|
||||
.button_default_content {
|
||||
height: 18px;
|
||||
width: 18px;
|
||||
background: #d4d4d4;
|
||||
display: inline-block;
|
||||
border-top: 2px solid #fff;
|
||||
border-left: 2px solid #fff;
|
||||
border-right: 2px solid #898888;
|
||||
border-bottom: 2px solid #898888;
|
||||
}
|
||||
.screen_right_group_in{
|
||||
display: -webkit-flex;
|
||||
display: flex;
|
||||
-webkit-flex-flow: row nowrap;
|
||||
.screen_right_group_in {
|
||||
display: -webkit-flex;
|
||||
display: flex;
|
||||
-webkit-flex-flow: row nowrap;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -2,17 +2,17 @@
|
||||
<div>
|
||||
<div class="station-nav-out">
|
||||
<div class="station-nav">
|
||||
<div class="station-line" />
|
||||
<div class="stationList">
|
||||
<div v-for="(item, index) in stationList" :key="index" class="station-box-out">
|
||||
<div class="station-box">
|
||||
<div class="station-line" />
|
||||
<div v-for="(item, index) in stationList" :key="index" class="station-box-out">
|
||||
<div class="station-box">
|
||||
<div class="leftRect" />
|
||||
<div class="rightRect" />
|
||||
<div class="station-list-box" :class="{'active': selectStation == item.id,'currentStation':tractionList.includes(item.name)}" @click="changeStation(item.id)" />
|
||||
</div>
|
||||
<div class="station-name" :class="index==0?'station-name-first':index%2==1?'station-name-up':'station-name-down'">{{ item.name }}</div>
|
||||
</div>
|
||||
<div class="station-name" :class="index==0?'station-name-first':index%2==1?'station-name-up':'station-name-down'">{{ item.name }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="rightButtonGroup">
|
||||
<div class="rightButtonGroupL">
|
||||
<div class="controlCenter">
|
||||
@ -512,10 +512,9 @@ export default {
|
||||
}
|
||||
.station-line{
|
||||
height: 12px;
|
||||
width: 80%;
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
background-image: linear-gradient(to bottom , #9c9c9c, #F0F0F0,#9c9c9c);
|
||||
left: 10px;
|
||||
top: 25px;
|
||||
border: 1px #505050 solid;
|
||||
}
|
||||
@ -574,7 +573,7 @@ export default {
|
||||
.station-box{
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
margin-right: 1.8vw;
|
||||
// margin-right: 1.8vw;
|
||||
width: 1.5vw;
|
||||
margin-top: 20px;
|
||||
cursor: pointer;
|
||||
@ -704,8 +703,13 @@ background:rgba(231,237,253,0.9);
|
||||
padding:0px 1vw;
|
||||
}
|
||||
.stationList{
|
||||
display: inline-block;
|
||||
// display: inline-block;
|
||||
display: flex;
|
||||
position: relative;
|
||||
justify-content: space-between;
|
||||
float: left;
|
||||
height: 100%;
|
||||
width: 82%;
|
||||
}
|
||||
.station-nav-out{
|
||||
position: absolute;
|
||||
|
||||
@ -44,8 +44,8 @@
|
||||
<div class="media">
|
||||
<div class="mediacontent"></div>
|
||||
<div class="banner">
|
||||
<div class="text">{{ bannerText }}</div>
|
||||
<div class="text">{{ bannerText }}</div>
|
||||
<div class="text">{{ standPisState.text }}</div>
|
||||
<div class="text">{{ standPisState.text }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tempratrue">
|
||||
@ -73,12 +73,12 @@
|
||||
</div>
|
||||
<div class="next block">
|
||||
<div class="up">
|
||||
<div>下一站</div>
|
||||
<div>{{ !!onboardPisState.parking ? '当前站' : '下一站' }}</div>
|
||||
<div>Next Station</div>
|
||||
</div>
|
||||
<div class="down">
|
||||
<div>{{ onboardPisState.nextStationName }}</div>
|
||||
<div>{{ onboardPisState.nextStationNameEN }}</div>
|
||||
<div>{{ onboardPisState.stationName }}</div>
|
||||
<div>{{ onboardPisState.stationNameEN }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -94,8 +94,8 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="banner">
|
||||
<div class="text">{{ bannerText }}</div>
|
||||
<div class="text">{{ bannerText }}</div>
|
||||
<div class="text">{{ onboardPisState.text }}</div>
|
||||
<div class="text">{{ onboardPisState.text }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -130,13 +130,14 @@ export default {
|
||||
firstEndStationName: '',
|
||||
secondTrainRemain: NaN,
|
||||
secondEndStationName: '',
|
||||
text: ''
|
||||
},
|
||||
bannerText:
|
||||
'党的十八大提出，倡导富强、民主、文明、和谐，倡导自由、平等、公正、法治，倡导爱国、敬业、诚信、友善，积极培育和践行社会主义核心价值观。富强、民主、文明、和谐是国家层面的价值目标，自由、平等、公正、法治是社会层面的价值取向，爱国、敬业、诚信、友善是公民个人层面的价值准则，这24个字是社会主义核心价值观的基本内容。',
|
||||
onboardPisState: {
|
||||
groupNumber: '',
|
||||
nextStationName: '',
|
||||
stationName: '',
|
||||
endStationName: '',
|
||||
parking: 0,
|
||||
text: '党的十八大提出，倡导富强、民主、文明、和谐，倡导自由、平等、公正、法治，倡导爱国、敬业、诚信、友善，积极培育和践行社会主义核心价值观。富强、民主、文明、和谐是国家层面的价值目标，自由、平等、公正、法治是社会层面的价值取向，爱国、敬业、诚信、友善是公民个人层面的价值准则，这24个字是社会主义核心价值观的基本内容。'
|
||||
},
|
||||
}
|
||||
},
|
||||
|
||||
Loading…
Reference in New Issue
Block a user