From 720ec4b0ce8f54f148237b97819ce2e0d52330e6 Mon Sep 17 00:00:00 2001
From: joylink_fanyuhong <18706759286@163.com>
Date: Tue, 4 Feb 2020 18:24:31 +0800
Subject: [PATCH] =?UTF-8?q?iscs=E4=BA=A4=E4=BA=92=E5=A4=84=E7=90=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../config/broadcast/centerHome.vue           |  23 +-
 .../iscsSystem/config/pis/infoBroadcast.vue   | 437 ++++++++++++++++++
 .../iscs/iscsSystem/config/pis/mainScreen.vue | 214 ++++++---
 3 files changed, 582 insertions(+), 92 deletions(-)
 create mode 100644 src/views/iscs/iscsSystem/config/pis/infoBroadcast.vue

diff --git a/src/views/iscs/iscsSystem/config/broadcast/centerHome.vue b/src/views/iscs/iscsSystem/config/broadcast/centerHome.vue
index 5c7c5866c..ce54fb38f 100644
--- a/src/views/iscs/iscsSystem/config/broadcast/centerHome.vue
+++ b/src/views/iscs/iscsSystem/config/broadcast/centerHome.vue
@@ -21,8 +21,7 @@
             </div>
             <div v-else>
               <div class="pa-table-content" @click="clickArea(i,j)">
-                <div v-if="isSelected(i, j)" class="pa-table-content-inside-selected" />
-                  <div v-else class="pa-table-content-inside" />
+                  <div class="pa-table-content-inside" :style="{background: selectedAreaList.includes(i + '-' + j)? '#2EFF74':'#CDCDCD'}" />
               </div>
               <div style="display: inline-block;margin-left: 5px;height: 18px;line-height: 18px;transform: translateY(-25%);color: #192780;">0</div>
             </div>
@@ -119,17 +118,12 @@ export default {
                 this.selectedAreaList.push(i + '-' + j);
             }
         },
-        isSelected(i, j) {
-            return this.selectedAreaList.includes(i + '-' + j);
-        },
         selectedAll() {
             const flag = this.checkSelectedAll();
             this.selectedAreaList = [];
             for (let i = 1; i < this.verticalHeader.length; i++) {
                 for (let j = 0; j < this.stationList.length; j++) {
-                    if (flag) {
-                        this.selectedAreaList = [];
-                    } else {
+                    if (!flag) {
                         this.selectedAreaList.push(i + '-' + j);
                     }
                 }
@@ -314,19 +308,6 @@ export default {
         border-right: 2px solid #898888;
         border-bottom: 2px solid #898888;
     }
-    .pa-table-content-inside-selected{
-        height: 10px;
-        width: 10px;
-        margin: auto;
-        background:#27FF27;
-        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;
-    }
     .pa-grey-box{
         position: absolute;
         left: 4%;
diff --git a/src/views/iscs/iscsSystem/config/pis/infoBroadcast.vue b/src/views/iscs/iscsSystem/config/pis/infoBroadcast.vue
new file mode 100644
index 000000000..d64fbd591
--- /dev/null
+++ b/src/views/iscs/iscsSystem/config/pis/infoBroadcast.vue
@@ -0,0 +1,437 @@
+<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">
+                    <el-radio label="realTime">实时信息</el-radio>
+                    <el-radio label="common">普通信息</el-radio>
+                    <el-radio label="emergency" class="iscs-pis-dialog-emergencyInfo">紧急信息</el-radio>
+                </el-radio-group>
+            </div>
+            <div v-show="addModel.infoType !== 'realTime'" class="secondary-title">{{ this.message[this.addModel.infoType].title }}</div>
+            <div v-show="addModel.infoType !== 'realTime'" class="information-description-box">
+                <div v-for="(item,index) in message[addModel.infoType].infoList" :key="index">
+                    <div class="information-box">{{item.title}}</div>
+                </div>
+            </div>
+            <div v-show="addModel.infoType === 'realTime'">
+                <el-row>
+                    <el-col :span="20">
+                        <div>
+                            <div class="secondary-title">实时信息显示内容</div>
+                            <div class="information-context-box">
+                                <el-input
+                                    type="textarea"
+                                    :rows="4"
+                                    placeholder="请输入内容"
+                                    v-model="addModel.infoContent">
+                                </el-input>
+                            </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 style="margin-top: 10px">
+                <div style="display: inline;">名称：</div>
+                <input class="pis-dialog-input" style="width: 550px;" v-model="addModel.infoTitle"/>
+                <input v-show="addModel.infoType !== 'emergency'" class="pis-dialog-input" style="width: 140px;" v-model="addModel.infoTime"/>
+                <div v-show="addModel.infoType !== 'emergency'" style="display: inline;">次</div>
+            </div>
+            <div v-show="addModel.infoType !== 'realTime'" class="secondary-title" style="margin-top: 10px">{{ this.message[this.addModel.infoType].title + '内容显示' }}</div>
+            <div v-show="addModel.infoType !== 'realTime'" class="information-context-box">站台有乘客越出X色安全线，站台乘客请返回安前线内站台有乘客越出X色安全线成熟的技术等级分类</div>
+            <div v-show="addModel.infoType === 'realTime'" 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 message[addModel.infoType].infoList" :key="index">
+                            <div class="information-box" @click="selectedRealTimeInfo(item)">{{item.title}}</div>
+                        </div>
+                    </el-col>
+                    <el-col>
+                        <div>{{ showRealTimeInfo }}</div>
+                    </el-col>
+                </el-row>
+            </div>
+            <div class="button-group">
+                <el-select v-show="addModel.infoType === 'realTime'" v-model="value" placeholder="信息选择">
+                    <el-option
+                        v-for="item in infoList"
+                        :key="item.value"
+                        :label="item.label"
+                        :value="item.value">
+                    </el-option>
+                </el-select>
+                <div v-show="addModel.infoType === 'realTime'" class="pis-button">储存</div>
+                <div class="button-group-content" :style="{left: addModel.infoType ==='realTime'?'280px':'550px'}">
+                    <div class="pis-button">设定中</div>
+                    <div class="pis-button" @click="releaseBroadcast">发布</div>
+                    <div class="pis-button">取消</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;position: relative; top: 8px;" />
+                            </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
+                                            arrow-control
+                                            v-model="form.endTime"
+                                            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
+                                            arrow-control
+                                            v-model="form.startTime"
+                                            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
+                                            arrow-control
+                                            v-model="form.durationTime"
+                                            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>
+    </el-dialog>
+</template>
+
+<script>
+export default {
+    name: 'VoiceBroadcast',
+    data() {
+        return {
+            visible: false,
+            addModel: {
+                infoType: 'common',
+                infoTitle: '',
+                infoTime: '',
+                infoContent: '',
+                priority: 'common'
+            },
+            form: {
+                startDate: '',
+                startTime: '',
+                durationTime: '',
+                endTime: '',
+                endDate: ''
+            },
+            infoList: [],
+            showRealTimeInfo: '',
+            message: {
+                realTime: {
+                    title: '实时信息',
+                    infoList:[
+                        {
+                            title: 'mes1实时信息',
+                            content: '站台有乘客越出X色安全线，站台乘客请返回安前线内站台有乘客越出X色安全线成熟的技术等级分类',
+                            time: 1
+                        },
+                        {
+                            title: 'mes2',
+                            content: '站台有乘客越出X色安全线，站台乘客请返回安前线内站台有乘客越出X色安全线成熟的技术等级分类',
+                            time: 1
+                        },
+                        {
+                            title: 'mes3',
+                            content: '站台有乘客越出X色安全线，站台乘客请返回安前线内站台有乘客越出X色安全线成熟的技术等级分类',
+                            time: 1
+                        },
+                        {
+                            title: 'mes4',
+                            content: '站台有乘客越出X色安全线，站台乘客请返回安前线内站台有乘客越出X色安全线成熟的技术等级分类',
+                            time: 1
+                        },
+                        {
+                            title: 'mes5',
+                            content: '站台有乘客越出X色安全线，站台乘客请返回安前线内站台有乘客越出X色安全线成熟的技术等级分类',
+                            time: 1
+                        },
+                        {
+                            title: 'mes6',
+                            content: '站台有乘客越出X色安全线，站台乘客请返回安前线内站台有乘客越出X色安全线成熟的技术等级分类',
+                            time: 1
+                        },
+                        {
+                            title: 'mes7',
+                            content: '站台有乘客越出X色安全线，站台乘客请返回安前线内站台有乘客越出X色安全线成熟的技术等级分类',
+                            time: 1
+                        }
+                    ]
+                },
+                common: {
+                    title: '普通信息',
+                    infoList:[
+                        {
+                            title: 'mes1普通信息',
+                            content: '站台有乘客越出X色安全线，站台乘客请返回安前线内站台有乘客越出X色安全线成熟的技术等级分类',
+                            time: 1
+                        },
+                        {
+                            title: 'mes2',
+                            content: '站台有乘客越出X色安全线，站台乘客请返回安前线内站台有乘客越出X色安全线成熟的技术等级分类',
+                            time: 1
+                        },
+                        {
+                            title: 'mes3',
+                            content: '站台有乘客越出X色安全线，站台乘客请返回安前线内站台有乘客越出X色安全线成熟的技术等级分类',
+                            time: 1
+                        },
+                        {
+                            title: 'mes4',
+                            content: '站台有乘客越出X色安全线，站台乘客请返回安前线内站台有乘客越出X色安全线成熟的技术等级分类',
+                            time: 1
+                        },
+                        {
+                            title: 'mes5',
+                            content: '站台有乘客越出X色安全线，站台乘客请返回安前线内站台有乘客越出X色安全线成熟的技术等级分类',
+                            time: 1
+                        }
+                    ]
+                },
+                emergency: {
+                    title: '紧急信息',
+                    infoList:[
+                        {
+                            title: '紧急信息',
+                            content: '站台有乘客越出X色安全线，站台乘客请返回安前线内站台有乘客越出X色安全线成熟的技术等级分类',
+                            time: 1
+                        },
+                        {
+                            title: 'mes2',
+                            content: '站台有乘客越出X色安全线，站台乘客请返回安前线内站台有乘客越出X色安全线成熟的技术等级分类',
+                            time: 1
+                        },
+                        {
+                            title: 'mes3',
+                            content: '站台有乘客越出X色安全线，站台乘客请返回安前线内站台有乘客越出X色安全线成熟的技术等级分类',
+                            time: 1
+                        },
+                        {
+                            title: 'mes4',
+                            content: '站台有乘客越出X色安全线，站台乘客请返回安前线内站台有乘客越出X色安全线成熟的技术等级分类',
+                            time: 1
+                        },
+                        {
+                            title: 'mes5',
+                            content: '站台有乘客越出X色安全线，站台乘客请返回安前线内站台有乘客越出X色安全线成熟的技术等级分类',
+                            time: 1
+                        }
+                    ]
+                }
+            }
+        };
+    },
+    mounted() {
+        this.showRealTimeInfo = '';
+    },
+    methods:{
+        doClose() {
+            this.visible = false;
+        },
+        doShow() {
+            this.visible = true;
+        },
+        releaseBroadcast() {
+            this.visible = false;
+        },
+        selectedRealTimeInfo(item) {
+            this.showRealTimeInfo = item.content;
+        }
+    }
+}
+</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;
+    }
+    .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 {
+        color: #606266;
+        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/iscsSystem/config/pis/mainScreen.vue b/src/views/iscs/iscsSystem/config/pis/mainScreen.vue
index 934530742..be6a5dea3 100644
--- a/src/views/iscs/iscsSystem/config/pis/mainScreen.vue
+++ b/src/views/iscs/iscsSystem/config/pis/mainScreen.vue
@@ -7,14 +7,14 @@
       <div class="screen_left">
         <div class="screen_left_tab">特定区域</div>
         <div class="sceen_left_content">
-          <div class="screen_operate_name" :class="allLine?'active':''" @click="clickIt">全线</div>
-          <div class="screen_operate_name">全站厅(LCD)</div>
-          <div class="screen_operate_name">全上行站台</div>
-          <div class="screen_operate_name">全下行站台</div>
-          <div class="screen_operate_name">全出入口</div>
-          <div class="screen_operate_name">全物业</div>
-          <div class="screen_operate_name">全天桥</div>
-          <div class="screen_operate_name">出入口(LED)</div>
+          <div class="screen_operate_name" @click="selectedAllLine">全线</div>
+          <div class="screen_operate_name" @click="selectedAreaBatch(0)">全站厅(LCD)</div>
+          <div class="screen_operate_name" @click="selectedAreaBatch(1)">全上行站台</div>
+          <div class="screen_operate_name" @click="selectedAreaBatch(2)">全下行站台</div>
+          <div class="screen_operate_name" @click="selectedAreaBatch(3)">全出入口</div>
+          <div class="screen_operate_name" @click="selectedAreaBatch(4)">全物业</div>
+          <div class="screen_operate_name" @click="selectedAreaBatch(5)">全天桥</div>
+          <div class="screen_operate_name" @click="selectedAreaBatch(6)">出入口(LED)</div>
         </div>
       </div>
       <div class="screen_main_content">
@@ -32,25 +32,26 @@
           </div>
           <div class="screen_right_group">
             <div class="screen_right_group_in">
-              <div v-for="station in stationList" :key="station.name" class="each_station_info">
-                <div class="each_data_info">
+              <div v-for="station in stationList" :key="station.stationName" 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.chidren&&station.chidren.length>0">
-                  <div v-for="(child,index) in station.chidren" :key="station.name+index" class="each_data_info">
-                    <div v-if="child.status=='default'" class="data_button_info button_default" />
+                <div v-if="station.children&&station.children.length>0">
+                  <div v-for="(child,index) in station.children" :key="station.stationName+index" class="each_data_info" @click="selectArea(station.stationName,index)" style="text-align: center;">
+                      <div v-if="child.status==='default'" class="button_default_content">
+                          <div class="button_default" :style="{background:selectedAreaList.includes(station.stationName + '-' + index)?'#2EFF74':'#CDCDCD'}" />
+                      </div>
                   </div>
                 </div>
               </div>
             </div>
-
           </div>
         </div>
       </div>
       <div class="screen_right">
         <div class="each_operate">
           <div class="each_operate_text">操作</div>
-          <div class="each_operate_button">信息发布<br>窗口</div>
+          <div class="each_operate_button" @click="showInfoBrroadcast">信息发布<br>窗口</div>
         </div>
         <div class="each_operate">
           <div class="each_operate_text">信息清除</div>
@@ -79,18 +80,22 @@
         </div>
       </div>
     </div>
+      <info-broadcast ref="infoBroadcast" />
   </div>
 </template>
 <script>
+import InfoBroadcast from './infoBroadcast';
 export default {
     name:'MainScreen',
+    components: {
+        InfoBroadcast
+    },
     data() {
         return {
-            allLine:false,
             stationList:[
                 {
                     stationName:'会展中心站',
-                    chidren:[
+                    children:[
                         {status:'none'}, {status:'default'},
                         {status:'default'}, {status:'default'},
                         {status:'none'}, {status:'none'},
@@ -99,7 +104,7 @@ export default {
                 },
                 {
                     stationName:'世纪大道站',
-                    chidren:[
+                    children:[
                         {status:'none'}, {status:'default'},
                         {status:'default'}, {status:'default'},
                         {status:'none'}, {status:'none'},
@@ -108,7 +113,7 @@ export default {
                 },
                 {
                     stationName:'交通大学站',
-                    chidren:[
+                    children:[
                         {status:'none'}, {status:'default'},
                         {status:'default'}, {status:'default'},
                         {status:'none'}, {status:'none'},
@@ -117,7 +122,7 @@ export default {
                 },
                 {
                     stationName:'市图书馆站',
-                    chidren:[
+                    children:[
                         {status:'none'}, {status:'default'},
                         {status:'default'}, {status:'default'},
                         {status:'none'}, {status:'none'},
@@ -126,7 +131,7 @@ export default {
                 },
                 {
                     stationName:'中心医院站',
-                    chidren:[
+                    children:[
                         {status:'none'}, {status:'default'},
                         {status:'default'}, {status:'default'},
                         {status:'none'}, {status:'none'},
@@ -135,7 +140,7 @@ export default {
                 },
                 {
                     stationName:'未来路站',
-                    chidren:[
+                    children:[
                         {status:'none'}, {status:'default'},
                         {status:'default'}, {status:'default'},
                         {status:'none'}, {status:'none'},
@@ -144,7 +149,7 @@ export default {
                 },
                 {
                     stationName:'火车站',
-                    chidren:[
+                    children:[
                         {status:'none'}, {status:'default'},
                         {status:'default'}, {status:'default'},
                         {status:'none'}, {status:'none'},
@@ -153,7 +158,7 @@ export default {
                 },
                 {
                     stationName:'人民广场站',
-                    chidren:[
+                    children:[
                         {status:'none'}, {status:'default'},
                         {status:'default'}, {status:'default'},
                         {status:'none'}, {status:'none'},
@@ -162,23 +167,103 @@ export default {
                 },
                 {
                     stationName:'体育中心站',
-                    chidren:[
+                    children:[
                         {status:'none'}, {status:'default'},
                         {status:'default'}, {status:'default'},
                         {status:'none'}, {status:'none'},
                         {status:'none'}, {status:'default'}
                     ]
                 }
-            ]
+            ],
+            selectedAreaList: []
         };
     },
     methods:{
-        clickIt(event) {
-            if (!this.allLine) {
-                this.allLine = true;
+        showInfoBrroadcast() {
+            this.$refs.infoBroadcast.doShow();
+        },
+        selectedAllLine() {
+            const flag = this.checkSelectedAllLine();
+            this.selectedAreaList = [];
+            this.stationList.forEach(station => {
+                station.children.forEach((item, index) => {
+                    if (item.status === 'default' && !flag) {
+                        this.selectedAreaList.push(station.stationName + '-' + index);
+                    }
+                });
+            });
+        },
+        checkSelectedAllLine() {
+            let selectedAllLineFlag = true;
+            this.stationList.some(station => {
+                station.children.some((item, index) => {
+                    if (item.status === 'default') {
+                        const elem = station.stationName + '-' + index;
+                        selectedAllLineFlag = this.selectedAreaList.includes(elem);
+                        return !selectedAllLineFlag;
+                    }
+                });
+                return !selectedAllLineFlag;
+            });
+            return selectedAllLineFlag;
+        },
+        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.allLine = false;
+                this.selectedAreaList.push(elem);
             }
+        },
+        selectedStation(station) {
+            const flag = this.checkStationSelected(station);
+            station.children.forEach((item, index) => {
+                const elem = station.stationName + '-' + 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.stationName + '-' + index);
+                    return !stationSelectedFlag;
+                }
+            });
+            return stationSelectedFlag;
+        },
+        selectedAreaBatch(areaIndex) {
+            const flag = this.checkAreaBatchSelected(areaIndex);
+            this.stationList.forEach(station => {
+                station.children.forEach((item, index) => {
+                    const elem = station.stationName + '-' + index;
+                    if (item.status === 'default' && index === areaIndex && flag) {
+                        const selectedAreaIndex = this.selectedAreaList.indexOf(elem);
+                        this.selectedAreaList.splice(selectedAreaIndex, 1);
+                    } else if (item.status === 'default' && index === areaIndex && !flag && !this.selectedAreaList.includes(elem)) {
+                        this.selectedAreaList.push(elem);
+                    }
+                });
+            });
+        },
+        checkAreaBatchSelected(areaIndex) {
+            let selectedAreaBatchFlag = true;
+            this.stationList.some(station => {
+                station.children.some((item, index) => {
+                    if (item.status === 'default' && index === areaIndex) {
+                        selectedAreaBatchFlag = this.selectedAreaList.includes(station.stationName + '-' + index);
+                        return !selectedAreaBatchFlag;
+                    }
+                });
+                return !selectedAreaBatchFlag;
+            });
+            return selectedAreaBatchFlag;
         }
     }
 };
@@ -247,6 +332,14 @@ border-top: 2px solid #8c8a89;border-left: 2px solid #8c8a89;border-right: 2px s
     border-right: 2px solid #9e9e9e;
     border-bottom: 2px solid #636667;
     cursor: pointer;
+    &.active,
+    &:hover{
+        background: #EBB570;
+        border-top: 2px solid #795B31;
+        border-left: 2px solid #795B31;
+        border-right: 2px solid #fff;
+        border-bottom: 2px solid #fff;
+    }
 }
 .screen_station_name{
     width: 120px;
@@ -263,7 +356,7 @@ border-top: 2px solid #8c8a89;border-left: 2px solid #8c8a89;border-right: 2px s
     //     border-bottom: 2px solid #fff;
     // }
 }
-.screen_operate_name.active,.screen_station_name.active{
+.screen_station_name.active{
     background: #EBB570;
     border-top: 2px solid #795B31;
     border-left: 2px solid #795B31;
@@ -279,49 +372,28 @@ border-top: 2px solid #8c8a89;border-left: 2px solid #8c8a89;border-right: 2px s
       position: relative;
 }
 .button_default{
-    border-top: 2px solid #edf1f2;border-left: 2px solid #d0d8dd;border-right: 2px solid #8c8a88;border-bottom: 2px solid #8a8887;
-}
-.button_default:before{
-    content:'';
-    border-top: 2px solid #d6d6d6;border-left: 2px solid #d0d8dd;border-right: 2px solid #a0a0a0;border-bottom: 2px solid #90999d;
-    min-width: 10px;
     height: 10px;
-    display: inline-block;
-    vertical-align: top;
-    background: #cccccc;
+    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::before{
-    content:'';
-    border-top: 2px solid #d6d6d6;border-left: 2px solid #d0d8dd;border-right: 2px solid #a0a0a0;border-bottom: 2px solid #90999d;
-    min-width: 10px;
-    height: 10px;
+.button_default_content{
+    margin:0 auto;
+    height: 18px;
+    width: 18px;
+    background: #D4D4D4;
     display: inline-block;
-    vertical-align: top;
-    background: #cccccc;
-}
-.button_default:after{
-    content:'';
-    border-top: 2px solid #fdfdfd;border-left: 2px solid #efefef;border-right: 2px solid #606060;border-bottom: 2px solid #606060;
-    min-width: 10px;
-    height: 10px;
-    display: inline-block;
-    vertical-align: top;
-    background: #c9c9c9;
-    position: absolute;
-    left: 0;
-    top: 0;
-}
-.button_default::after{
-    content:'';
-    border-top: 2px solid #fdfdfd;border-left: 2px solid #efefef;border-right: 2px solid #606060;border-bottom: 2px solid #606060;
-    min-width: 10px;
-    height: 10px;
-    display: inline-block;
-    vertical-align: top;
-    background: #c9c9c9;
-    position: absolute;
-    left: 0;
-    top: 0;
+    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;