diff --git a/src/assets/iscs_icon/music_icon.png b/src/assets/iscs_icon/music_icon.png
new file mode 100644
index 000000000..ca35529a6
Binary files /dev/null and b/src/assets/iscs_icon/music_icon.png differ
diff --git a/src/views/iscs/iscsSystem/config/broadcast/homeScreen.vue b/src/views/iscs/iscsSystem/config/broadcast/homeScreen.vue
index 0a3e5922e..f6561b531 100644
--- a/src/views/iscs/iscsSystem/config/broadcast/homeScreen.vue
+++ b/src/views/iscs/iscsSystem/config/broadcast/homeScreen.vue
@@ -1,5 +1,6 @@
 <template>
   <div>
+    <div style="position: absolute; left: 48%; top: 15%;font-size: 20px;color: #9EEBEF;">语音广播</div>
     <div class="area-selection">
       <el-row><div style="margin-top: 10px;margin-bottom: 5px; color: #9EEBEF;">特定区域</div></el-row>
       <el-row><div class="area-selection-button">全线</div></el-row>
@@ -11,28 +12,118 @@
       <el-row><div class="area-selection-button">全换乘通道</div></el-row>
     </div>
     <div class="broadcast-form">
-      <div v-for="item in verticalHeader">
-        <el-row>
-          <el-col :span="4"><div style="text-align: left; padding-left: 10px ">{{ item.name }}</div></el-col>
-          <div v-for="it in stationList">
-            <el-col :span="2">
-              <div v-if="item.type==='header'">
-                <div>{{ it }}</div>
+      <div v-for="item in verticalHeader" :style="{width: tableWidth+'px'}" class="iscs-pa-table">
+        <div class="left-header">{{ item.name }}</div>
+        <div style="position: relative; left: 5%;">
+          <div v-for="it in stationList" class="table-grid">
+            <div v-if="item.type==='header'" class="pa-table-header">
+              <div>{{ it }}</div>
+            </div>
+            <div v-else>
+              <div class="pa-table-content">
+                <div class="pa-table-content-inside" />
               </div>
-              <div v-else>
-                <div style="margin:0 auto;height: 10px;width: 10px;background: #FBFBFB" />
-              </div>
-            </el-col>
-
+              <div style="display: inline-block;margin-left: 5px;height: 18px;line-height: 18px;transform: translateY(-25%);color: #192780;">0</div>
+            </div>
           </div>
-        </el-row>
+        </div>
       </div>
     </div>
-
+    <div class="broadcast-mode">
+      <el-row>
+        <el-col :span="12"><div style="height: 40px;text-align: center; background: #000088;color: #fff;line-height: 40px">实时广播</div></el-col>
+        <el-col :span="12"><div class="broadcast-mode-button">广播</div></el-col>
+      </el-row>
+    </div>
+    <div class="broadcast-operations">
+      <el-row>
+        <el-col :span="12"><div style="height: 80px;text-align: center; background: #000088;color: #fff;padding-top: 30px">预备<br>广播</div></el-col>
+        <el-col :span="12">
+          <div class="broadcast-mode-button">
+            <div class="pa-check-box" />
+            <div style="position: relative; left: 5px;display: inline-block;">普通预录</div>
+          </div>
+          <br>
+          <div class="broadcast-mode-button">
+            <div class="pa-check-box" style="background: #CDCDCD;" />
+            <div style="position: relative; left: 5px;display: inline-block; color: #f00;">紧急预录</div>
+          </div>
+        </el-col>
+      </el-row>
+      <el-row style="padding-bottom: 10px">
+        <el-col :span="12">
+          <div class="broadcast-mode-button">广播内容</div>
+        </el-col>
+        <el-col :span="12">
+          <div class="broadcast-mode-button">广播停止</div>
+        </el-col>
+      </el-row>
+    </div>
+    <div class="background-music">
+      <el-row>
+        <el-col :span="12"><div style="height: 40px;text-align: center; background: #000088;color: #fff;line-height: 40px">背景音乐</div></el-col>
+      </el-row>
+      <el-row style="padding-bottom: 10px">
+        <el-col :span="12"><div class="broadcast-mode-button">播放音乐</div></el-col>
+        <el-col :span="12"><div class="broadcast-mode-button">停止音乐</div></el-col>
+      </el-row>
+    </div>
+    <div class="pa-grey-box" />
+    <div class="pa-statements">
+      <el-row style="margin-bottom: 10px" :gutter="10">
+        <el-col :span="3"><div style="background: #CCCCCC;color: #000; text-align: center">1</div></el-col>
+        <el-col :span="9"><div>没有占用</div></el-col>
+        <el-col :span="3"><div style="background: #887711;color: #000; text-align: center">7</div></el-col>
+        <el-col :span="9"><div>总调话筒口播</div></el-col>
+      </el-row>
+      <el-row style="margin-bottom: 10px" :gutter="10">
+        <el-col :span="3"><div style="background: #FF0000;color: #000; text-align: center">2</div></el-col>
+        <el-col :span="9"><div>车站消防广播</div></el-col>
+        <el-col :span="3"><div style="background: #006600;color: #000; text-align: center">8</div></el-col>
+        <el-col :span="9"><div>行调话筒口播</div></el-col>
+      </el-row>
+      <el-row style="margin-bottom: 10px" :gutter="10">
+        <el-col :span="3"><div style="background: #880000;color: #000; text-align: center">3</div></el-col>
+        <el-col :span="9"><div>联动消防广播</div></el-col>
+        <el-col :span="3"><div style="background: #778877;color: #000; text-align: center">9</div></el-col>
+        <el-col :span="9"><div>中心普通语录</div></el-col>
+      </el-row>
+      <el-row style="margin-bottom: 10px" :gutter="10">
+        <el-col :span="3"><div style="background: #0000FF;color: #000; text-align: center">5</div></el-col>
+        <el-col :span="9"><div>环调话筒广播</div></el-col>
+        <el-col :span="3"><div style="background: #555454;color: #000; text-align: center">11</div></el-col>
+        <el-col :span="9"><div>车站普通语录</div></el-col>
+      </el-row>
+      <el-row style="margin-bottom: 10px" :gutter="10">
+        <el-col :span="3"><div style="background: #554488;color: #000; text-align: center">6</div></el-col>
+        <el-col :span="9"><div>中心紧急语录</div></el-col>
+        <el-col :span="3"><div style="background: #556688;color: #000; text-align: center">12</div></el-col>
+        <el-col :span="9"><div>ATS预录</div></el-col>
+      </el-row>
+      <el-row style="margin-bottom: 10px" :gutter="10">
+        <el-col :span="3"><div style="background: #44CC55;color: #000; text-align: center">6</div></el-col>
+        <el-col :span="9"><div>车站话筒口播</div></el-col>
+        <el-col :span="3"><div style="background: #887711;color: #000; text-align: center">12</div></el-col>
+        <el-col :span="9"><div>故障</div></el-col>
+      </el-row>
+      <el-row style="margin-bottom: 10px" :gutter="10">
+        <el-col :span="3"><div style="background: #FF00FF;color: #000; text-align: center">7</div></el-col>
+        <el-col :span="9"><div>车站紧急语录</div></el-col>
+        <el-col :span="3"><div style="background: #115577;color: #000; text-align: center">13</div></el-col>
+        <el-col :span="9"><div>设备通讯失败</div></el-col>
+      </el-row>
+      <el-row style="margin-bottom: 10px" :gutter="10">
+        <el-col :span="3"><div><img style="width: 15px;" :src="musicIcon"></div></el-col>
+        <el-col :span="9"><div>背景音乐</div></el-col>
+        <el-col :span="3"><div style="background: #FFFFFF;width: 22px;height: 13px;"><div class="pa-check-box-small" /></div></el-col>
+        <el-col :span="9"><div>被选择</div></el-col>
+      </el-row>
+    </div>
   </div>
 </template>
 
 <script>
+import MusicIcon from '@/assets/iscs_icon/music_icon.png';
 export default {
     name: 'HomeScreen',
     data() {
@@ -46,8 +137,14 @@ export default {
                 {name: '办公区', type: 'checkBox'},
                 {name: '换乘通道', type: 'checkBox'}
             ],
+            musicIcon: MusicIcon,
             stationList: ['会展中心站', '世纪大道站', '交通大学站', '市图书馆站', '中心医院站', '未来路站', '火车站', '人民广场站', '体育中心站']
         };
+    },
+    computed: {
+        tableWidth() {
+            return this.stationList.length * 120 + 80;
+        }
     }
 };
 </script>
@@ -83,9 +180,160 @@ export default {
         border-right: 3px solid #fff;
         border-bottom: 3px solid #fff;
         width: 80%;
+        height: 40%;
         top: 200px;
         position: absolute;
         left: 7%;
+        overflow-x: auto;
+        padding-top: 20px;
+    }
+    .table-grid{
+        width: 120px;
+        display: inline-block;
+        padding-left: 10px;
+        margin-bottom: 10px;
+        font-size: 14px;
+    }
+    .left-header{
+        width: 120px;
+        height: 30px;
+        display: inline-block;
+        padding-left: 20px;
+        font-size: 14px;
+        text-align: left;
+        color: #A2E8EB;
+        position:fixed;
+        left: 7.15%;
+        background: #45607B;
+        z-index: 10;
+    }
+    .pa-table-header{
+        background: #cccccc;
+        border-top: 2px solid #fff;
+        border-left: 2px solid #fff;
+        border-right: 2px solid #898888;
+        border-bottom: 2px solid #898888;
+    }
+    .pa-table-content{
+        margin:0 auto;
+        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;
+    }
+    .pa-table-content-inside{
+        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;
+    }
+    .pa-grey-box{
+        position: absolute;
+        left: 4%;
+        top: 64%;
+        width: 81%;
+        height: 30%;
+        background: #DDDDDD;
+        border-top: 3px solid #898888;
+        border-left: 3px solid #898888;
+        border-right: 3px solid #fff;
+        border-bottom: 3px solid #fff;
+    }
+    .pa-statements{
+        position: absolute;
+        left: 86%;
+        top: 64%;
+        width: 13%;
+        height: 30%;
+        font-size: 12px;
+        color: #fff;
+    }
+    .broadcast-mode{
+        position: absolute;
+        left: 88%;
+        top: 25%;
+        border-top: 3px solid #898888;
+        border-left: 3px solid #898888;
+        border-right: 3px solid #fff;
+        border-bottom: 3px solid #fff;
+        width: 11%;
+        font-size: 12px;
+    }
+    .broadcast-mode-button{
+        height: 30px;
+        text-align: center;
+        background: #CCCCCC;
+        position: relative;
+        top: 5px;
+        width: 85%;
+        left: 5%;
+        line-height: 28px;
+        border-top: 2px solid #fff;
+        border-left: 2px solid #fff;
+        border-right: 2px solid #898888;
+        border-bottom: 2px solid #898888;
+    }
+    .broadcast-operations{
+        position: absolute;
+        left: 88%;
+        top: 32%;
+        border-top: 3px solid #898888;
+        border-left: 3px solid #898888;
+        border-right: 3px solid #fff;
+        border-bottom: 3px solid #fff;
+        width: 11%;
+        font-size: 12px;
+        background: #778899;
+    }
+    .pa-check-box{
+        position: relative;
+        display: inline-block;
+        left: 3px;
+        width: 12px;
+        height: 12px;
+        background: #2EFF74;
+        border-top: 2px solid #898888;
+        border-left: 2px solid #898888;
+        border-right: 2px solid #fff;
+        border-bottom: 2px solid #fff;
+    }
+    .pa-check-box-small{
+        position: relative;
+        left: 6px;
+        top: 2px;
+        width: 10px;
+        height:9px;
+        background: #27FF27;
+        border-top: 1px solid #FFF;
+        border-left: 1px solid #FFF;
+        border-right: 1px solid #898888;
+        border-bottom: 1px solid #898888;
+    }
+    .background-music{
+        position: absolute;
+        left: 88%;
+        top: 48%;
+        border-top: 3px solid #898888;
+        border-left: 3px solid #898888;
+        border-right: 3px solid #fff;
+        border-bottom: 3px solid #fff;
+        width: 11%;
+        font-size: 12px;
+        background: #778899;
+    }
+    ::-webkit-scrollbar {
+        width: 2px;
+        height: 6px;
     }
-
 </style>