From bf098fc8e1532e79f9dc6c31ea5908b74edda2ab Mon Sep 17 00:00:00 2001
From: joylink_cuiweidong <364937672@qq.com>
Date: Tue, 18 Oct 2022 16:50:54 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BB=A3=E7=A0=81=E8=B0=83=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../iscsSystemNew/config/pa/timePreviewPA.vue | 102 +++
 .../config/pis/emergencyRelease.vue           |  73 ++
 .../config/pis/infoBroadcast.vue              | 400 +++++++++++
 .../iscsSystemNew/config/pis/lcdControl.vue   | 231 ++++++
 .../iscsSystemNew/config/pis/mainScreen.vue   | 673 ++++++++++++++++++
 .../iscsSystemNew/config/pis/timePreview.vue  | 147 ++++
 .../iscsSystemNew/stationConfig/index.vue     |  16 +-
 7 files changed, 1639 insertions(+), 3 deletions(-)
 create mode 100644 src/views/iscs/iscsSystemNew/config/pa/timePreviewPA.vue
 create mode 100644 src/views/iscs/iscsSystemNew/config/pis/emergencyRelease.vue
 create mode 100644 src/views/iscs/iscsSystemNew/config/pis/infoBroadcast.vue
 create mode 100644 src/views/iscs/iscsSystemNew/config/pis/lcdControl.vue
 create mode 100644 src/views/iscs/iscsSystemNew/config/pis/mainScreen.vue
 create mode 100644 src/views/iscs/iscsSystemNew/config/pis/timePreview.vue

diff --git a/src/views/iscs/iscsSystemNew/config/pa/timePreviewPA.vue b/src/views/iscs/iscsSystemNew/config/pa/timePreviewPA.vue
new file mode 100644
index 000000000..e4dceabb2
--- /dev/null
+++ b/src/views/iscs/iscsSystemNew/config/pa/timePreviewPA.vue
@@ -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>
diff --git a/src/views/iscs/iscsSystemNew/config/pis/emergencyRelease.vue b/src/views/iscs/iscsSystemNew/config/pis/emergencyRelease.vue
new file mode 100644
index 000000000..ad922c621
--- /dev/null
+++ b/src/views/iscs/iscsSystemNew/config/pis/emergencyRelease.vue
@@ -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>
diff --git a/src/views/iscs/iscsSystemNew/config/pis/infoBroadcast.vue b/src/views/iscs/iscsSystemNew/config/pis/infoBroadcast.vue
new file mode 100644
index 000000000..f50753d52
--- /dev/null
+++ b/src/views/iscs/iscsSystemNew/config/pis/infoBroadcast.vue
@@ -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>
diff --git a/src/views/iscs/iscsSystemNew/config/pis/lcdControl.vue b/src/views/iscs/iscsSystemNew/config/pis/lcdControl.vue
new file mode 100644
index 000000000..6304bfd68
--- /dev/null
+++ b/src/views/iscs/iscsSystemNew/config/pis/lcdControl.vue
@@ -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>
diff --git a/src/views/iscs/iscsSystemNew/config/pis/mainScreen.vue b/src/views/iscs/iscsSystemNew/config/pis/mainScreen.vue
new file mode 100644
index 000000000..09667e730
--- /dev/null
+++ b/src/views/iscs/iscsSystemNew/config/pis/mainScreen.vue
@@ -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>
diff --git a/src/views/iscs/iscsSystemNew/config/pis/timePreview.vue b/src/views/iscs/iscsSystemNew/config/pis/timePreview.vue
new file mode 100644
index 000000000..34e3c71bd
--- /dev/null
+++ b/src/views/iscs/iscsSystemNew/config/pis/timePreview.vue
@@ -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>
diff --git a/src/views/iscs/iscsSystemNew/stationConfig/index.vue b/src/views/iscs/iscsSystemNew/stationConfig/index.vue
index 154e17f5c..60556801b 100644
--- a/src/views/iscs/iscsSystemNew/stationConfig/index.vue
+++ b/src/views/iscs/iscsSystemNew/stationConfig/index.vue
@@ -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 {