代码调整
This commit is contained in:
joylink_cuiweidong
parent
e049334401
commit
bf098fc8e1
102
src/views/iscs/iscsSystemNew/config/pa/timePreviewPA.vue
Normal file
102
src/views/iscs/iscsSystemNew/config/pa/timePreviewPA.vue
Normal file
@ -0,0 +1,102 @@
|
||||
<template>
|
||||
<div class="time_preview">
|
||||
<div class="time_preview_header">
|
||||
<div class="preview_header_text">中心广播控制一览</div>
|
||||
</div>
|
||||
<div class="time_preview_content">
|
||||
<el-table cell-class-name="time_preview_column" header-cell-class-name="time_preview_thead" :data="tableData" border style="width:100%;overflow-y: auto;" highlight-current-row height="496">
|
||||
<el-table-column prop="describe" label="信息描述" />
|
||||
<el-table-column prop="startdate" label="开始日期" width="100" />
|
||||
<el-table-column prop="starttime" label="开始时间" width="100" />
|
||||
<el-table-column prop="enddate" label="结束日期" width="100" />
|
||||
<el-table-column prop="endtime" label="结束时间" width="100" />
|
||||
<el-table-column prop="interAmplitude" label="延迟时间" width="100" />
|
||||
<el-table-column prop="grade" label="等级" width="100" />
|
||||
<el-table-column prop="status" label="指定状态" width="180" />
|
||||
</el-table>
|
||||
</div>
|
||||
<div class="time_preview_footer">
|
||||
<div class="preview_footer_top">操作</div>
|
||||
<div class="preview_footer_content">
|
||||
<div class="each_preview_btn">删除</div>
|
||||
<div class="each_preview_btn">停用</div>
|
||||
<div class="each_preview_btn">激活</div>
|
||||
<div class="each_preview_btn">修改</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
tableData:[
|
||||
{describe:'为了您和他人的安全，请不要在车厢内吸烟', startdate: '2018-06-15', starttime:'00:00:00', enddate: '2018-06-15', endtime:'23:59:59', interAmplitude:'00:00:30', grade: '普通', status:'0'},
|
||||
{describe:'手牵手积极防灾，心连心构建和谐家园', startdate: '2018-06-15', starttime:'00:01:32', enddate: '2018-06-15', endtime:'23:59:59', interAmplitude:'00:00:30', grade: '普通', status:'0'},
|
||||
{describe:'严禁携带易燃、易爆、剧毒、放射性、腐蚀性等危险物品', startdate: '2018-06-15', starttime:'00:00:00', enddate: '2018-06-15', endtime:'23:59:59', interAmplitude:'00:00:30', grade: '普通', status:'0'},
|
||||
{describe:'不要轻易给陌生人汇款、转账，谨防上当受骗', startdate: '2018-06-15', starttime:'00:00:00', enddate: '2018-06-15', endtime:'23:59:59', interAmplitude:'00:00:30', grade: '普通', status:'0'}
|
||||
]
|
||||
};
|
||||
},
|
||||
methods:{
|
||||
indexMethod(index) {
|
||||
return index + 1;
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
/deep/{
|
||||
.time_preview{padding:20px;}
|
||||
.preview_header_text{margin-top:10px;text-align: center;color: #9af1ec;font-size: 18px;padding-bottom: 10px;}
|
||||
.time_preview_content{
|
||||
width: 75%;
|
||||
height:500px;
|
||||
border-top: 2px solid #8c8a89;
|
||||
overflow-y: auto;
|
||||
margin: 20px auto 0;
|
||||
display:flex;
|
||||
border-left: 2px solid #8c8a89;
|
||||
border-right: 2px solid #fff;
|
||||
border-bottom: 2px solid #fff;
|
||||
}
|
||||
.time_preview_footer{width: 75%;margin: 0 auto;border-top: 2px solid #8c8a89;
|
||||
border-left: 2px solid #8c8a89;
|
||||
border-right: 2px solid #fff;
|
||||
border-bottom: 2px solid #fff;background:#aabbbb;}
|
||||
.el-table .time_preview_column .cell{font-size:12px;}
|
||||
.el-table td.time_preview_column{padding:5px 0px;}
|
||||
.preview_footer_top{width: 100%;font-weight:bold;padding:10px 0px;text-align:center;background:#000077;color:#fff;font-size:12px;}
|
||||
.each_preview_btn{
|
||||
width:80px;
|
||||
text-align:center;
|
||||
height:38px;
|
||||
display:flex;
|
||||
align-items: center;
|
||||
justify-content:center;
|
||||
margin-left:4px;
|
||||
font-size:12px;
|
||||
cursor: pointer;
|
||||
vertical-align:top;
|
||||
font-weight:bold;
|
||||
border-top: 3px solid #f9f9f9;
|
||||
border-left: 3px solid #f6f8f8;
|
||||
border-right: 3px solid #565656;
|
||||
border-bottom: 3px solid #565656;
|
||||
background: #cccccc;
|
||||
&:active{
|
||||
background: #cccccc;
|
||||
border-top: 3px solid #9c9c9c;
|
||||
border-left: 3px solid #9c9c9c;
|
||||
border-right: 3px solid #fff;
|
||||
border-bottom: 3px solid #fff;
|
||||
}
|
||||
}
|
||||
.el-table .time_preview_thead{background:#000077;color:#fff;padding: 5px 0px;text-align:center;font-size: 12px;}
|
||||
.preview_footer_content{margin-top:15px;margin-left:20px;margin-bottom:10px;display:flex; justify-content: center; align-items: center;}
|
||||
.current-row>td {
|
||||
background: #91AAC2 !important;
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
73
src/views/iscs/iscsSystemNew/config/pis/emergencyRelease.vue
Normal file
73
src/views/iscs/iscsSystemNew/config/pis/emergencyRelease.vue
Normal file
@ -0,0 +1,73 @@
|
||||
<template>
|
||||
<div class="emergency_release">
|
||||
<div class="emergency_release_header">
|
||||
<div class="emergency_header_text">中心PIS紧急信息一览</div>
|
||||
<el-table :data="tableData" :header-cell-style="headerCellStyle" :cell-style="cellStyle" :height="'60%'" style="width: 94%; position: relative;left: 3%;">
|
||||
<el-table-column prop="time" label="时间" width="150" />
|
||||
<el-table-column prop="description" label="信息描述" />
|
||||
<el-table-column prop="level" label="等级" />
|
||||
</el-table>
|
||||
<div style="margin-top: 10px;width: 100%;">
|
||||
<div style="width: 77%;background: #FFF;padding: 2px;display: inline-block;vertical-align:top;margin-left: 3%">
|
||||
<div style="width: 100%;text-align: center;font-size: 13px;padding-top:5px;">显示内容</div>
|
||||
<div style="width:100%; height: 100px; border: 1px solid #000;" />
|
||||
</div>
|
||||
<div style="width: 14%;background: #939FAC; display: inline-block;margin-left: 2%;">
|
||||
<div class="emergency_select_button">区域详细</div>
|
||||
<div style="width: 100%;text-align: center;color: #FFF;font-size: 13px;background: #121A86;height: 30px;line-height: 30px;">紧急信息清除</div>
|
||||
<div class="emergency_select_button">清除</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
name:'EmergencyRelease',
|
||||
data() {
|
||||
return {
|
||||
tableData: [],
|
||||
headerCellStyle: {background: '#121A86', height: '25px', color: '#FFF'},
|
||||
cellStyle: {height:'25px'}
|
||||
};
|
||||
}
|
||||
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.emergency_release{padding:20px;height: 100%;}
|
||||
.emergency_release_header{height: 100%;}
|
||||
.emergency_header_text{margin-top:10px;text-align: center;color: #9af1ec;font-size: 18px;padding-bottom: 10px;}
|
||||
.emergency_select_button {
|
||||
text-align: center;
|
||||
width: 90px;
|
||||
height: 30px;
|
||||
background: #A9A9A9;
|
||||
border-top: 2px solid #FFF;
|
||||
border-left: 2px solid #FFF;
|
||||
border-right: 2px solid #898888;
|
||||
border-bottom: 2px solid #898888;
|
||||
margin: 10px auto 5px;
|
||||
font-size: 14px;
|
||||
line-height: 30px;
|
||||
cursor:pointer;
|
||||
-webkit-user-select:none;
|
||||
-moz-user-select:none;
|
||||
-ms-user-select:none;
|
||||
user-select:none;
|
||||
}
|
||||
.emergency_select_button:active {
|
||||
border-top: 2px solid #898888;
|
||||
border-left: 2px solid #898888;
|
||||
border-right: 2px solid #FFF;
|
||||
border-bottom: 2px solid #FFF;
|
||||
}
|
||||
/deep/
|
||||
.el-table th{
|
||||
padding: 0;
|
||||
}
|
||||
/deep/
|
||||
.el-table td{
|
||||
padding: 0;
|
||||
}
|
||||
</style>
|
||||
400
src/views/iscs/iscsSystemNew/config/pis/infoBroadcast.vue
Normal file
400
src/views/iscs/iscsSystemNew/config/pis/infoBroadcast.vue
Normal file
@ -0,0 +1,400 @@
|
||||
<template>
|
||||
<el-dialog
|
||||
v-dialogDrag
|
||||
:visible.sync="visible"
|
||||
width="800px"
|
||||
:before-close="doClose"
|
||||
class="iscs-voice-broadcast-dialog"
|
||||
>
|
||||
<div>
|
||||
<div class="dialog-header">滚动信息发布</div>
|
||||
<div class="iscs-pis-dialog-info">
|
||||
<el-radio-group v-model="addModel.infoType" @change="getResourcesList">
|
||||
<el-radio label="REAL_TIME">实时信息</el-radio>
|
||||
<el-radio label="RECORDING">普通信息</el-radio>
|
||||
<el-radio label="EMERGENCY_RECORDING" class="iscs-pis-dialog-emergencyInfo">紧急信息</el-radio>
|
||||
</el-radio-group>
|
||||
</div>
|
||||
<div v-show="addModel.infoType !== 'REAL_TIME'" class="secondary-title">{{ this.message[this.addModel.infoType].title }}</div>
|
||||
<div v-show="addModel.infoType !== 'REAL_TIME'" class="information-description-box">
|
||||
<div v-for="(item,index) in resourcesList" :key="index">
|
||||
<div
|
||||
class="information-box"
|
||||
:style="{ background: index == resourceIndex? '#4169cc': '#DCDCDC' }"
|
||||
@click="chooseResources(item, index)"
|
||||
>
|
||||
{{ item.name }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-show="addModel.infoType === 'REAL_TIME'">
|
||||
<el-row>
|
||||
<el-col :span="20">
|
||||
<div>
|
||||
<div class="secondary-title">实时信息显示内容</div>
|
||||
<div class="information-context-box">
|
||||
<el-input
|
||||
v-model="addModel.infoContent"
|
||||
type="textarea"
|
||||
:rows="4"
|
||||
placeholder="请输入内容"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="3" :offset="1">
|
||||
<div class="iscs-pis-dialog-info" style="text-align: left">
|
||||
<div style="margin-bottom: 20px; font-size: 16px; margin-top: 10px;">优先等级</div>
|
||||
<el-radio v-model="addModel.priority" style="margin-bottom: 20px;" label="common">普通</el-radio>
|
||||
<el-radio v-model="addModel.priority" label="emergency">紧急</el-radio>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
<div v-show="addModel.infoType === 'REAL_TIME'" style="margin-top: 10px">
|
||||
<div style="display: inline;">名称：</div>
|
||||
<input v-model="addModel.infoTitle" 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>
|
||||
<div v-show="addModel.infoType !== 'REAL_TIME'" style="margin-top: 10px">
|
||||
<div style="display: inline;">名称：</div>
|
||||
<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>
|
||||
<div v-show="addModel.infoType !== 'REAL_TIME'" class="secondary-title" style="margin-top: 10px">{{ addModel.infoType === 'RECORDING'? '普通信息内容显示': '紧急信息内容显示' }}</div>
|
||||
<div v-show="addModel.infoType !== 'REAL_TIME'" class="information-context-box">{{ resource.desc }}</div>
|
||||
<div v-show="addModel.infoType === 'REAL_TIME'" class="information-description-box" style="margin-top: 15px;">
|
||||
<el-row>
|
||||
<el-col :span="6" style="border-right:2px solid #898888; min-height: 100px">
|
||||
<!--<div v-for="(item,index) in resourcesList" :key="index">-->
|
||||
<!--<div class="information-box" @click="selectedRealTimeInfo(item)">{{ item.name }}</div>-->
|
||||
<!--</div>-->
|
||||
</el-col>
|
||||
<el-col>
|
||||
<div>{{ showRealTimeInfo }}</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
<div class="button-group">
|
||||
<!--<el-select v-show="addModel.infoType === 'REAL_TIME'" v-model="value" :disabled="true" placeholder="信息选择" size="mini">-->
|
||||
<!--<el-option-->
|
||||
<!--v-for="item in infoList"-->
|
||||
<!--:key="item.value"-->
|
||||
<!--:label="item.label"-->
|
||||
<!--:value="item.value"-->
|
||||
<!--/>-->
|
||||
<!--</el-select>-->
|
||||
<!--<div v-show="addModel.infoType === 'REAL_TIME'" class="pis-button">储存</div>-->
|
||||
<div class="button-group-content" :style="{left: addModel.infoType ==='REAL_TIME'?'300px':'550px'}">
|
||||
<div class="pis-button">设定中</div>
|
||||
<div class="pis-button" @click="releaseBroadcast">发布</div>
|
||||
<div class="pis-button" @click="doClose">取消</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--<div class="pis-dialog-form-box">-->
|
||||
<!--<el-form ref="form" :model="form" label-width="95px">-->
|
||||
<!--<el-row>-->
|
||||
<!--<el-col :span="3">-->
|
||||
<!--<div class="pis-button" style="position: relative; top: 10px;left: 5px; padding: 7px 10px ;">导入描述</div>-->
|
||||
<!--</el-col>-->
|
||||
<!--<el-col :span="21">-->
|
||||
<!--<el-form-item prop="description" label-width="0">-->
|
||||
<!--<input v-model="form.description" style="width:600px;">-->
|
||||
<!--</el-form-item>-->
|
||||
<!--</el-col>-->
|
||||
<!--</el-row>-->
|
||||
<!--<el-row>-->
|
||||
<!--<el-col :span="21">-->
|
||||
<!--<el-row>-->
|
||||
<!--<el-col :span="12">-->
|
||||
<!--<el-form-item prop="startDate" label="开始日期">-->
|
||||
<!--<el-date-picker-->
|
||||
<!--v-model="form.startDate"-->
|
||||
<!--type="date"-->
|
||||
<!--size="mini"-->
|
||||
<!--placeholder="选择日期"-->
|
||||
<!--/>-->
|
||||
<!--</el-form-item>-->
|
||||
<!--</el-col>-->
|
||||
<!--<el-col :span="12">-->
|
||||
<!--<el-form-item prop="endTime" label="结束时间">-->
|
||||
<!--<el-time-picker-->
|
||||
<!--v-model="form.endTime"-->
|
||||
<!--arrow-control-->
|
||||
<!--size="mini"-->
|
||||
<!--placeholder="选择时间"-->
|
||||
<!--/>-->
|
||||
<!--</el-form-item>-->
|
||||
<!--</el-col>-->
|
||||
<!--</el-row>-->
|
||||
<!--<el-row>-->
|
||||
<!--<el-col :span="12">-->
|
||||
<!--<el-form-item prop="startTime" label="开始时间">-->
|
||||
<!--<el-time-picker-->
|
||||
<!--v-model="form.startTime"-->
|
||||
<!--arrow-control-->
|
||||
<!--size="mini"-->
|
||||
<!--placeholder="选择时间"-->
|
||||
<!--/>-->
|
||||
<!--</el-form-item>-->
|
||||
<!--</el-col>-->
|
||||
<!--<el-col :span="12">-->
|
||||
<!--<el-form-item prop="endDate" label="结束日期">-->
|
||||
<!--<el-date-picker-->
|
||||
<!--v-model="form.endDate"-->
|
||||
<!--type="date"-->
|
||||
<!--size="mini"-->
|
||||
<!--placeholder="选择日期"-->
|
||||
<!--/>-->
|
||||
<!--</el-form-item>-->
|
||||
<!--</el-col>-->
|
||||
<!--</el-row>-->
|
||||
<!--<el-row>-->
|
||||
<!--<el-col :span="12">-->
|
||||
<!--<el-form-item prop="durationTime" label="延续时间">-->
|
||||
<!--<el-time-picker-->
|
||||
<!--v-model="form.durationTime"-->
|
||||
<!--arrow-control-->
|
||||
<!--size="mini"-->
|
||||
<!--placeholder="选择时间"-->
|
||||
<!--/>-->
|
||||
<!--</el-form-item>-->
|
||||
<!--</el-col>-->
|
||||
<!--<el-col :span="12">-->
|
||||
<!--<div style="text-align: center;padding-top: 10px;">-->
|
||||
<!--<div class="pis-button">今日</div>-->
|
||||
<!--<div class="pis-button">一次</div>-->
|
||||
<!--<div class="pis-button">无截止</div>-->
|
||||
<!--</div>-->
|
||||
<!--</el-col>-->
|
||||
<!--</el-row>-->
|
||||
<!--</el-col>-->
|
||||
<!--<el-col :span="3">-->
|
||||
<!--<div class="each_operate_button">排定<br>确认</div>-->
|
||||
<!--</el-col>-->
|
||||
<!--</el-row>-->
|
||||
<!--</el-form>-->
|
||||
<!--</div>-->
|
||||
<!--</div>-->
|
||||
</div></el-dialog>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { queryIscsResourcesByGroup } from '@/api/simulation';
|
||||
export default {
|
||||
name: 'VoiceBroadcast',
|
||||
data() {
|
||||
return {
|
||||
visible: false,
|
||||
value: '',
|
||||
resourcesList: [],
|
||||
resourceIndex: 0,
|
||||
resource: {},
|
||||
addModel: {
|
||||
infoType: 'RECORDING',
|
||||
infoTitle: '',
|
||||
infoTime: '',
|
||||
infoContent: '',
|
||||
priority: 'common'
|
||||
},
|
||||
form: {
|
||||
startDate: '',
|
||||
startTime: '',
|
||||
durationTime: '',
|
||||
endTime: '',
|
||||
endDate: '',
|
||||
description: ''
|
||||
},
|
||||
infoList: [],
|
||||
showRealTimeInfo: '',
|
||||
message: {
|
||||
REAL_TIME: {
|
||||
title: '实时信息',
|
||||
infoList:[]
|
||||
},
|
||||
RECORDING: {
|
||||
title: '普通信息',
|
||||
infoList:[]
|
||||
},
|
||||
EMERGENCY_RECORDING: {
|
||||
title: '紧急信息',
|
||||
infoList:[]
|
||||
}
|
||||
}
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
this.showRealTimeInfo = '';
|
||||
},
|
||||
methods:{
|
||||
doClose() {
|
||||
this.visible = false;
|
||||
},
|
||||
doShow() {
|
||||
this.visible = true;
|
||||
this.getResourcesList();
|
||||
},
|
||||
releaseBroadcast() {
|
||||
this.visible = false;
|
||||
if (this.addModel.infoType === 'REAL_TIME') {
|
||||
if (!this.addModel.infoTitle) {
|
||||
this.$message.error('请输入实时信息标题！');
|
||||
} else if (!this.addModel.infoContent) {
|
||||
this.$message.error('请输入实时信息内容！');
|
||||
} else {
|
||||
this.$emit('releaseBroadcast', {name: this.addModel.infoTitle, content: this.addModel.infoContent }, this.addModel.infoType);
|
||||
this.addModel.infoContent = '';
|
||||
this.addModel.infoTitle = '';
|
||||
}
|
||||
} else if (this.resource) {
|
||||
this.$emit('releaseBroadcast', this.resource, this.addModel.infoType);
|
||||
}
|
||||
},
|
||||
selectedRealTimeInfo(item) {
|
||||
this.showRealTimeInfo = item.content;
|
||||
},
|
||||
chooseResources(item, index) {
|
||||
this.resource = item;
|
||||
this.resourceIndex = index;
|
||||
},
|
||||
getResourcesList() {
|
||||
if (this.addModel.infoType === 'REAL_TIME') {
|
||||
return;
|
||||
}
|
||||
const params = { system: 'PIS', type: this.addModel.infoType };
|
||||
queryIscsResourcesByGroup( this.$route.query.group, params).then(resp => {
|
||||
this.resourceIndex = 0;
|
||||
this.resourcesList = resp.data && resp.data[0] ? resp.data[0].resources : [];
|
||||
this.resource = this.resourcesList[0] ? this.resourcesList[0] : {};
|
||||
}).catch( () => {
|
||||
this.$message.error('获取广播资源列表失败！');
|
||||
} );
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.dialog-header{
|
||||
text-align: center;
|
||||
font-size: 28px;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
.pis-dialog-form-box{
|
||||
margin-top: 20px;
|
||||
padding: 10px 5px;
|
||||
border-top: 2px solid #898888;
|
||||
border-left: 2px solid #898888;
|
||||
border-right: 2px solid #fff;
|
||||
border-bottom: 2px solid #fff;
|
||||
}
|
||||
.information-description-box{
|
||||
height: 100px;
|
||||
width: 100%;
|
||||
background: #DCDCDC;
|
||||
border-left: 2px solid #898888;
|
||||
overflow-x: auto;
|
||||
overflow-y: auto;
|
||||
}
|
||||
.information-box{
|
||||
white-space: nowrap;
|
||||
background: #DCDCDC;
|
||||
margin-top: 2px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.secondary-title{
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
font-size: 18px;
|
||||
background: #A9A9A9;
|
||||
border-top: 2px solid #898888;
|
||||
border-left: 2px solid #898888;
|
||||
border-right: 2px solid #fff;
|
||||
border-bottom: 2px solid #fff;
|
||||
}
|
||||
.pis-dialog-input{
|
||||
background: #DCDCDC;
|
||||
border-top: 2px solid #898888;
|
||||
border-left: 2px solid #898888;
|
||||
border-right: 2px solid #fff;
|
||||
border-bottom: 2px solid #fff;
|
||||
}
|
||||
.information-context-box{
|
||||
background: #DCDCDC;
|
||||
width: 100%;
|
||||
height: 100px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
.button-group{
|
||||
margin-top: 20px;
|
||||
}
|
||||
.button-group-content{
|
||||
position: relative;
|
||||
left: 550px;
|
||||
display: inline;
|
||||
}
|
||||
.pis-button{
|
||||
background: #CCCCCC;
|
||||
color: #000;
|
||||
display: inline;
|
||||
font-weight: bold;
|
||||
padding: 7px 15px;
|
||||
border-top: 2px solid #fff;
|
||||
border-left: 2px solid #fff;
|
||||
border-right: 2px solid #454541;
|
||||
border-bottom: 2px solid #454541;
|
||||
cursor: default;
|
||||
}
|
||||
.iscs-pis-dialog-info{
|
||||
text-align: center;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.iscs-pis-dialog-emergencyInfo{
|
||||
color: #F00 !important;
|
||||
}
|
||||
.each_operate_button{
|
||||
position: relative;
|
||||
top: 100px;
|
||||
text-align: center;
|
||||
font-weight: bold;
|
||||
margin-top: 5px;
|
||||
cursor:pointer;
|
||||
color: #000;
|
||||
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: 5px 10px;
|
||||
line-height: 140%;}
|
||||
</style>
|
||||
<style>
|
||||
.iscs-voice-broadcast-dialog .el-dialog__body{
|
||||
background: #A9A9A9;
|
||||
padding-top: 10px;
|
||||
padding-bottom: 60px;
|
||||
}
|
||||
.iscs-voice-broadcast-dialog .el-dialog__headerbtn{
|
||||
top: 10px;
|
||||
}
|
||||
.iscs-voice-broadcast-dialog .el-dialog__header{
|
||||
background-image: linear-gradient(#FFE4C4, #F4A460, #FFE4C4);
|
||||
}
|
||||
.iscs-pis-dialog-info .el-radio__input.is-checked+.el-radio__label{
|
||||
color: #606266;
|
||||
font-size: 16px;
|
||||
}
|
||||
.iscs-pis-dialog-info .el-radio__input+.el-radio__label {
|
||||
font-size: 16px;
|
||||
}
|
||||
.iscs-pis-dialog-info .iscs-pis-dialog-emergencyInfo .el-radio__input.is-checked+.el-radio__label{
|
||||
color: #F00;
|
||||
}
|
||||
.iscs-voice-broadcast-dialog .information-context-box .el-textarea__inner {
|
||||
background: #DCDCDC;
|
||||
border-radius: 0;
|
||||
}
|
||||
</style>
|
||||
231
src/views/iscs/iscsSystemNew/config/pis/lcdControl.vue
Normal file
231
src/views/iscs/iscsSystemNew/config/pis/lcdControl.vue
Normal file
@ -0,0 +1,231 @@
|
||||
<template>
|
||||
<div class="iscs_lcd_box" style="width: 100%;height: 100%; position: relative;">
|
||||
<div class="lcdControl_title">LCD控制屏</div>
|
||||
<div class="area_select" style="margin-top: 110px;">
|
||||
<div class="area_select_title">特定区域</div>
|
||||
<div class="area_select_button" :class="{'active': activeFlag}" @click="selectedAllArea">全线</div>
|
||||
</div>
|
||||
<div class="area_select" style="margin-top: 200px;">
|
||||
<div>
|
||||
<el-radio v-model="lcdSwitch" :label="true" size="small" border style="margin-left: 12px;margin-bottom: 5px;margin-top: 10px;">开启LCD屏</el-radio>
|
||||
<br>
|
||||
<el-radio v-model="lcdSwitch" :label="false" size="small" border>关闭LCD屏</el-radio>
|
||||
</div>
|
||||
<div class="area_select_button" style="margin-top: 20px;">确定</div>
|
||||
</div>
|
||||
|
||||
<div class="lcd_content_box">
|
||||
<div style="display: inline-block;position:absolute;width: 50px;z-index: 2;background: #45607B;">
|
||||
<div class="lcd_content_box_left_title">车站</div>
|
||||
<div class="lcd_content_box_left_title">选择</div>
|
||||
</div>
|
||||
<div style="width: 100%; overflow-x: auto;white-space: nowrap;height: 100%;">
|
||||
<div style="position: relative; left: 50px;">
|
||||
<div v-for="(station, index) in stationList" :key="index" style="display: inline-block;text-align: center;">
|
||||
<div class="each_station_info" @click="selectedArea(station)">{{ station }}</div>
|
||||
<div class="button_default_content">
|
||||
<div class="button_default" :style="{background:selectedAreaList.includes(station)?'#2EFF74':'#CDCDCD'}" @click="selectedArea(station)" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { getByGroupStationList } from '@/api/jmap/map';
|
||||
export default {
|
||||
name:'LcdControl',
|
||||
data() {
|
||||
return {
|
||||
columns: ['车站', '选择'],
|
||||
stationList: ['会展中心站', '世纪大道站', '交通大学站', '市图书馆站', '中心医院站', '未来路站', '火车站', '人民广场站', '体育中心站'],
|
||||
lcdSwitch: true,
|
||||
activeFlag: false,
|
||||
selectedAreaList:[]
|
||||
};
|
||||
},
|
||||
async created () {
|
||||
// 请求当前线路车站列表
|
||||
try {
|
||||
const res = await getByGroupStationList(this.$route.query.group);
|
||||
if (res.code == 200) {
|
||||
this.stationList = [];
|
||||
res.data.forEach(station => {
|
||||
if (!station.depot) {
|
||||
this.stationList.push(station.name);
|
||||
}
|
||||
});
|
||||
}
|
||||
} catch (e) {
|
||||
this.$message.error('获取车站列表失败！');
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
selectedArea(station) {
|
||||
const index = this.selectedAreaList.indexOf(station);
|
||||
if (index < 0) {
|
||||
this.selectedAreaList.push(station);
|
||||
} else {
|
||||
this.selectedAreaList.splice(index, 1);
|
||||
}
|
||||
},
|
||||
selectedAllArea() {
|
||||
this.activeFlag = !this.activeFlag;
|
||||
if (this.activeFlag) {
|
||||
this.selectedAreaList = [...this.stationList];
|
||||
} else {
|
||||
this.selectedAreaList = [];
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.iscs_lcd_box {
|
||||
|
||||
}
|
||||
.lcdControl_title{
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
font-size: 26px;
|
||||
margin-top: 30px;
|
||||
color: #56E5DE;
|
||||
}
|
||||
.area_select {
|
||||
position: absolute;
|
||||
left: 25%;
|
||||
width: 120px;
|
||||
border-top: 3px solid #898888;
|
||||
border-left: 3px solid #898888;
|
||||
border-right: 3px solid #fff;
|
||||
border-bottom: 3px solid #fff;
|
||||
padding-top: 5px;
|
||||
text-align: center;
|
||||
}
|
||||
.area_select_title {
|
||||
color: #56E5DE;
|
||||
font-size: 12px;
|
||||
}
|
||||
.area_select_button {
|
||||
text-align: center;
|
||||
width: 90px;
|
||||
height: 30px;
|
||||
background: #A9A9A9;
|
||||
border-top: 2px solid #FFF;
|
||||
border-left: 2px solid #FFF;
|
||||
border-right: 2px solid #898888;
|
||||
border-bottom: 2px solid #898888;
|
||||
margin: 5px 12px 10px;
|
||||
font-size: 14px;
|
||||
line-height: 30px;
|
||||
cursor:pointer;
|
||||
-webkit-user-select:none;
|
||||
-moz-user-select:none;
|
||||
-ms-user-select:none;
|
||||
user-select:none;
|
||||
&:active,
|
||||
&.active {
|
||||
border-top: 2px solid #898888;
|
||||
border-left: 2px solid #898888;
|
||||
border-right: 2px solid #FFF;
|
||||
border-bottom: 2px solid #FFF;
|
||||
}
|
||||
}
|
||||
.each_station_info{
|
||||
vertical-align:top;
|
||||
font-size: 13px;
|
||||
padding: 2px 2px;
|
||||
background: #A9A9A9;
|
||||
border-top: 2px solid #FFF;
|
||||
border-left: 2px solid #FFF;
|
||||
border-right: 2px solid #898888;
|
||||
border-bottom: 2px solid #898888;
|
||||
margin-right: 5px;
|
||||
cursor:pointer;
|
||||
-webkit-user-select:none;
|
||||
-moz-user-select:none;
|
||||
-ms-user-select:none;
|
||||
user-select:none;
|
||||
}
|
||||
.lcd_content_box{
|
||||
margin-top: 110px;
|
||||
width: 700px;
|
||||
height: 330px;
|
||||
position: absolute;
|
||||
left: 35%;
|
||||
border-top: 3px solid #898888;
|
||||
border-left: 3px solid #898888;
|
||||
border-right: 3px solid #fff;
|
||||
border-bottom: 3px solid #fff;
|
||||
padding-top: 10px;
|
||||
}
|
||||
.lcd_content_box_left_title{
|
||||
vertical-align:top;
|
||||
font-size: 13px;
|
||||
color: #CBFFFF;
|
||||
padding: 5px 10px 10px;
|
||||
}
|
||||
.button_default_content{
|
||||
margin-top: 5px;
|
||||
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;
|
||||
text-align: center;
|
||||
}
|
||||
.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;
|
||||
}
|
||||
</style>
|
||||
<style lang="scss">
|
||||
.iscs_lcd_box .el-radio.is-bordered.is-checked {
|
||||
border-top: 2px solid #7CDAF3;
|
||||
border-left: 2px solid #7CDAF3;
|
||||
border-right: 2px solid #0C3A94;
|
||||
border-bottom: 2px solid #0C3A94;
|
||||
background: #089DF6;
|
||||
border-radius: 0;
|
||||
/*width: 80px;*/
|
||||
/*height: 20px;*/
|
||||
}
|
||||
.iscs_lcd_box .el-radio.is-bordered {
|
||||
border-top: 2px solid #FFF;
|
||||
border-left: 2px solid #FFF;
|
||||
border-right: 2px solid #898888;
|
||||
border-bottom: 2px solid #898888;
|
||||
background: #989898;
|
||||
border-radius: 0;
|
||||
color: #FFF;
|
||||
/*width: 80px;*/
|
||||
/*height: 20px;*/
|
||||
}
|
||||
.iscs_lcd_box .el-radio__input.is-checked+.el-radio__label {
|
||||
color: #FFF;
|
||||
}
|
||||
.iscs_lcd_box .el-radio__input.is-checked .el-radio__inner{
|
||||
background: #FFF;
|
||||
}
|
||||
.iscs_lcd_box .el-radio__input.is-checked .el-radio__inner::after{
|
||||
background: #1E84C7;
|
||||
}
|
||||
.iscs_lcd_box .el-radio--small.is-bordered {
|
||||
padding: 8px 5px 0 0;
|
||||
}
|
||||
</style>
|
||||
673
src/views/iscs/iscsSystemNew/config/pis/mainScreen.vue
Normal file
673
src/views/iscs/iscsSystemNew/config/pis/mainScreen.vue
Normal file
@ -0,0 +1,673 @@
|
||||
<template>
|
||||
<div class="main_screen">
|
||||
<div class="main_screen_header">
|
||||
<div class="screen_header_text">乘客信息</div>
|
||||
</div>
|
||||
<div class="main_screen_content">
|
||||
<div v-show="!isSingleStation" 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>
|
||||
</div>
|
||||
<div class="screen_main_content">
|
||||
<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>
|
||||
<div class="screen_right_group">
|
||||
<div class="screen_right_group_in">
|
||||
<div v-for="station in stationList" :key="station.code" class="each_station_info">
|
||||
<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>
|
||||
<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 verticalHeader" :key="index" class="each_data_info">{{ item.name }}</div>
|
||||
</div>
|
||||
<div class="content">
|
||||
<div v-if="currentStation && currentStation.children && currentStation.children.length > 0" class="list">
|
||||
<div class="stationButton" @click="selectedStation(currentStation)">
|
||||
<div class="screen_station_name">全车站</div>
|
||||
</div>
|
||||
<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>
|
||||
<div class="screen_right">
|
||||
<div class="each_operate">
|
||||
<div class="each_operate_text">操作</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>
|
||||
</div>
|
||||
</div>
|
||||
<div class="main_screen_footer">
|
||||
<textarea id="screen_footer_text" name="" cols="30" rows="10" />
|
||||
<div class="footer_button_group">
|
||||
<div class="each_footer_button">
|
||||
<div class="each_footer_button_icon screen_status_green" />
|
||||
<div class="each_footer_button_text">正常</div>
|
||||
</div>
|
||||
<div class="each_footer_button">
|
||||
<div class="each_footer_button_icon screen_status_red" />
|
||||
<div class="each_footer_button_text">故障</div>
|
||||
</div>
|
||||
<div class="each_footer_button">
|
||||
<div class="each_footer_button_icon screen_status_blue" />
|
||||
<div class="each_footer_button_text">通信故障</div>
|
||||
</div>
|
||||
<div class="each_footer_button">
|
||||
<div class="each_footer_button_icon screen_status_active" />
|
||||
<div class="each_footer_button_text">选定</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<audio id="voice" controls style="width: 0;height: 0;" />
|
||||
<info-broadcast ref="infoBroadcast" @releaseBroadcast="releaseBroadcast" />
|
||||
</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 }
|
||||
],
|
||||
statusColor: {
|
||||
normal: '#00ff00'
|
||||
},
|
||||
stationList: [],
|
||||
selectedAreaList: [],
|
||||
iscsDeviceMap: {},
|
||||
deviceMap: {}
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
currentStation() {
|
||||
return this.stationList.find(station => station.code === this.$route.query.stationId);
|
||||
},
|
||||
isSingleStation() {
|
||||
return this.$route.query.stationId.startsWith('Station');
|
||||
}
|
||||
},
|
||||
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;
|
||||
}
|
||||
}
|
||||
.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;
|
||||
}
|
||||
.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;
|
||||
}
|
||||
.stationButton {
|
||||
margin: 0;
|
||||
.screen_station_name {
|
||||
width: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.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;
|
||||
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;
|
||||
}
|
||||
.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;
|
||||
}
|
||||
.screen_right_group_in {
|
||||
display: -webkit-flex;
|
||||
display: flex;
|
||||
-webkit-flex-flow: row nowrap;
|
||||
}
|
||||
</style>
|
||||
147
src/views/iscs/iscsSystemNew/config/pis/timePreview.vue
Normal file
147
src/views/iscs/iscsSystemNew/config/pis/timePreview.vue
Normal file
@ -0,0 +1,147 @@
|
||||
<template>
|
||||
<div class="time_preview">
|
||||
<div class="time_preview_header">
|
||||
<div class="preview_header_text">中心PIS时间控制一览</div>
|
||||
</div>
|
||||
<div class="time_preview_content">
|
||||
<el-table
|
||||
cell-class-name="time_preview_column"
|
||||
header-cell-class-name="time_preview_thead"
|
||||
:data="tableData"
|
||||
border
|
||||
style="width:100%;overflow-y: auto;"
|
||||
height="496"
|
||||
>
|
||||
<el-table-column
|
||||
label=" "
|
||||
type="index"
|
||||
:index="indexMethod"
|
||||
width="40"
|
||||
/>
|
||||
<el-table-column
|
||||
prop="describe"
|
||||
label="信息描述"
|
||||
width="680"
|
||||
/>
|
||||
<el-table-column
|
||||
prop="starttime"
|
||||
label="开始时间"
|
||||
width="180"
|
||||
/>
|
||||
<el-table-column
|
||||
prop="endtime"
|
||||
label="结束时间"
|
||||
/>
|
||||
<el-table-column
|
||||
prop="interAmplitude"
|
||||
label="间幅"
|
||||
/>
|
||||
<el-table-column
|
||||
prop="status"
|
||||
label="状态"
|
||||
/>
|
||||
</el-table>
|
||||
</div>
|
||||
<div class="time_preview_footer">
|
||||
<div class="preview_footer_top">操作</div>
|
||||
<div class="preview_footer_content">
|
||||
<div class="each_preview_btn">区域<br>详细</div>
|
||||
<div class="each_preview_btn">删除</div>
|
||||
<div class="each_preview_btn">停用</div>
|
||||
<div class="each_preview_btn each_preview_back1">激活</div>
|
||||
<div class="each_preview_btn each_preview_back2">修改</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
tableData:[
|
||||
{describe:'为了您和他人的安全，请不要在车厢内吸烟', starttime:'2018-06-15 00:00:00', endtime:'2018-06-15 23:59:59', interAmplitude:'00:00:30', status:'0'},
|
||||
{describe:'手牵手积极防灾，心连心构建和谐家园', starttime:'2018-06-15 00:01:32', endtime:'2018-06-15 23:59:59', interAmplitude:'00:00:30', status:'0'},
|
||||
{describe:'严禁携带易燃、易爆、剧毒、放射性、腐蚀性等危险物品', starttime:'2018-06-15 00:00:00', endtime:'2018-06-15 23:59:59', interAmplitude:'00:00:30', status:'0'},
|
||||
{describe:'不要轻易给陌生人汇款、转账，谨防上当受骗', starttime:'2018-06-15 00:00:00', endtime:'2018-06-15 23:59:59', interAmplitude:'00:00:30', status:'0'}
|
||||
]
|
||||
};
|
||||
},
|
||||
methods:{
|
||||
indexMethod(index) {
|
||||
return index + 1;
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
/deep/{
|
||||
.time_preview{padding:20px;}
|
||||
.preview_header_text{margin-top:10px;text-align: center;color: #9af1ec;font-size: 18px;padding-bottom: 10px;}
|
||||
.time_preview_content{width:94%;height:500px;border-top: 2px solid #8c8a89;overflow-y: auto;margin-left:3%;margin-top:10px;display:flex;border-left: 2px solid #8c8a89;border-right: 2px solid #fff;border-bottom: 2px solid #fff;}
|
||||
.time_preview_footer{width:650px;margin-top:20px;border-top: 2px solid #8c8a89;margin-left:3%;
|
||||
border-left: 2px solid #8c8a89;
|
||||
border-right: 2px solid #fff;
|
||||
border-bottom: 2px solid #fff;background:#aabbbb;}
|
||||
.el-table .time_preview_column .cell{font-size:12px;}
|
||||
.el-table td.time_preview_column{padding:5px 0px;}
|
||||
.preview_footer_top{width:646px;font-weight:bold;padding:10px 0px;text-align:center;background:#000077;color:#fff;font-size:12px;}
|
||||
.each_preview_btn{
|
||||
width:80px;
|
||||
text-align:center;
|
||||
height:38px;
|
||||
display:flex;
|
||||
align-items: center;
|
||||
justify-content:center;
|
||||
margin-left:4px;
|
||||
font-size:12px;
|
||||
cursor: pointer;
|
||||
vertical-align:top;
|
||||
font-weight:bold;
|
||||
border-top: 3px solid #f9f9f9;
|
||||
border-left: 3px solid #f6f8f8;
|
||||
border-right: 3px solid #565656;
|
||||
border-bottom: 3px solid #565656;
|
||||
background: #cccccc;
|
||||
&:active{
|
||||
border-top: 3px solid #565656;
|
||||
border-left: 3px solid #565656;
|
||||
border-right: 3px solid #f6f8f8;
|
||||
border-bottom: 3px solid #f9f9f9;
|
||||
background: #cccccc;
|
||||
}
|
||||
}
|
||||
.each_preview_back1{
|
||||
border-top: 3px solid #63dcf8;
|
||||
border-left: 3px solid #7cdeed;
|
||||
border-right: 3px solid #2a5bab;
|
||||
border-bottom: 3px solid #1d61b4;
|
||||
background: #01abff;
|
||||
color:#fff;
|
||||
&:active{
|
||||
border-top: 3px solid #1d61b4;
|
||||
border-left: 3px solid #2a5bab;
|
||||
border-right: 3px solid #7cdeed;
|
||||
border-bottom: 3px solid #63dcf8;
|
||||
background: #01abff;
|
||||
}
|
||||
}
|
||||
.each_preview_back2{
|
||||
border-top: 3px solid #638df8;
|
||||
border-left: 3px solid #86a1e4;
|
||||
border-right: 3px solid #1d2881;
|
||||
border-bottom: 3px solid #1e3388;
|
||||
background: #0156ff;
|
||||
color:#fff;
|
||||
&:active{
|
||||
border-top: 3px solid #1e3388;
|
||||
border-left: 3px solid #1d2881;
|
||||
border-right: 3px solid #86a1e4;
|
||||
border-bottom: 3px solid #638df8;
|
||||
background: #0156ff;
|
||||
}
|
||||
}
|
||||
.el-table .time_preview_thead:not(:first-child){background:#000077;color:#fff;padding: 5px 0px;text-align:center;font-size: 12px;}
|
||||
.preview_footer_content{margin-top:15px;margin-left:20px;margin-bottom:10px;display:flex;flex-direction:row}
|
||||
}
|
||||
|
||||
</style>
|
||||
@ -10,11 +10,11 @@
|
||||
<ticket-or-entrance v-else-if="mode === 'autoTicket'||mode === 'afcTwo02'||mode === 'afcOne02'" :station-id="stationId" :station-name="stationName" :mode="mode" />
|
||||
<broadcast-home v-else-if="mode === 'paMain'" :station-id="stationId" />
|
||||
<radio-listening-pa v-else-if="mode === 'paMonitor'" />
|
||||
<!-- <time-preview-pa v-else-if="mode === 'paPreview'" />
|
||||
<time-preview-pa v-else-if="mode === 'paPreview'" />
|
||||
<pids-emergency v-else-if="mode === 'pidsEmergency'" />
|
||||
<pids-lcd v-else-if="mode === 'pidsLcd'" />
|
||||
<pids-main v-else-if="mode === 'pidsMain'" />
|
||||
<pids-preview v-else-if="mode === 'pidsPreview'" /> -->
|
||||
<pids-preview v-else-if="mode === 'pidsPreview'" />
|
||||
|
||||
</div>
|
||||
</template>
|
||||
@ -27,6 +27,11 @@ import SignalSystem from './signalSystem.vue';
|
||||
import TicketOrEntrance from './ticketOrEntrance';
|
||||
import BroadcastHome from '../config/broadcast/homeScreen';
|
||||
import RadioListeningPa from '../config/pa/radioListeningPA';
|
||||
import TimePreviewPa from '../config/pa/timePreviewPA';
|
||||
import PidsEmergency from '../config/pis/emergencyRelease';
|
||||
import PidsMain from '../config/pis/mainScreen';
|
||||
import PidsPreview from '../config/pis/timePreview';
|
||||
import PidsLcd from '../config/pis/lcdControl';
|
||||
|
||||
export default {
|
||||
name:'StationConfig',
|
||||
@ -38,7 +43,12 @@ export default {
|
||||
SignalSystem,
|
||||
TicketOrEntrance,
|
||||
BroadcastHome,
|
||||
RadioListeningPa
|
||||
RadioListeningPa,
|
||||
TimePreviewPa,
|
||||
PidsEmergency,
|
||||
PidsMain,
|
||||
PidsPreview,
|
||||
PidsLcd
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user