还原pis语音播放

src/views/iscs/iscsSystem/config/pis/mainScreen.vue

@@ -6,16 +6,13 @@
     <div class="main_screen_content">
       <div v-show="!isSingleStation" class="screen_left">
         <div class="screen_left_tab">特定区域</div>
-        <el-row
+        <el-row><el-button
-          ><el-button
+          v-for="(item, index) in verticalHeader"
-            v-for="(item, index) in verticalHeader"
+          :key="index"
-            :key="index"
+          class="screen_operate_name"
-            class="screen_operate_name"
+          :class="{ active: item.active }"
-            :class="{ active: item.active }"
+          @click="selectedBatch(item)"
-            @click="selectedBatch(item)"
+        >{{ item.title }}</el-button></el-row>
-            >{{ item.title }}</el-button
-          ></el-row
-        >
       </div>
       <div class="screen_main_content">
         <div v-show="!isSingleStation" class="screen_main_content_inner">
@@ -60,7 +57,7 @@
             <div v-for="(item, index) in verticalHeader" :key="index" class="each_data_info">{{ item.name }}</div>
           </div>
           <div class="content">
-            <div class="list" v-if="currentStation && currentStation.children && currentStation.children.length > 0">
+            <div v-if="currentStation && currentStation.children && currentStation.children.length > 0" class="list">
               <div class="stationButton" @click="selectedStation(currentStation)">
                 <div class="screen_station_name">全车站</div>
               </div>
@@ -91,11 +88,11 @@
       <div class="screen_right">
         <div class="each_operate">
           <div class="each_operate_text">操作</div>
-          <div class="each_operate_button" @click="showInfoBrroadcast">滚动信息<br />发布</div>
+          <div class="each_operate_button" @click="showInfoBrroadcast">滚动信息<br>发布</div>
         </div>
         <div class="each_operate">
           <div class="each_operate_text">信息清除</div>
-          <div class="each_operate_button" @click="stopBroadcast">清除<br />普通信息</div>
+          <div class="each_operate_button" @click="stopBroadcast">清除<br>普通信息</div>
         </div>
       </div>
     </div>
@@ -125,49 +122,49 @@
   </div>
 </template>
 <script>
-import { getByGroupStationList } from '@/api/jmap/map'
+import { getByGroupStationList } from '@/api/jmap/map';
-import { queryIscsDeviceCod } from '@/api/iscs'
+import { queryIscsDeviceCod } from '@/api/iscs';
-import InfoBroadcast from './infoBroadcast'
+import InfoBroadcast from './infoBroadcast';
-import { sendCommandNew } from '@/api/jmap/training'
+import { sendCommandNew } from '@/api/jmap/training';
-import { creatSubscribe, clearSubscribe, getTopic } from '@/utils/stomp'
+import { creatSubscribe, clearSubscribe, getTopic } from '@/utils/stomp';
-import { getToken } from '@/utils/auth'
+import { getToken } from '@/utils/auth';
 
 export default {
-  name: 'MainScreen',
+    name: 'MainScreen',
-  components: {
+    components: {
-    InfoBroadcast,
+        InfoBroadcast
-  },
-  computed: {
-    currentStation() {
-      return this.stationList.find(station => station.code === this.$route.query.stationId)
     },
-    isSingleStation() {
+    data() {
-      return this.$route.query.stationId.startsWith('Station')
+        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: {
-  data() {
+        currentStation() {
-    return {
+            return this.stationList.find(station => station.code === this.$route.query.stationId);
-      verticalHeader: [
+        },
-        { name: '车站', title: '全线', key: 'station', type: 'header', active: false },
+        isSingleStation() {
-        { name: '站厅(LCD)', title: '全站厅(LCD)', key: 'stationHall', type: 'checkBox', active: false },
+            return this.$route.query.stationId.startsWith('Station');
-        { name: '上行站台', title: '全上行站台', key: 'uplinkStation', type: 'checkBox', active: false },
+        }
-        { name: '下行站台', title: '全下行站台', key: 'downlinkStation', type: 'checkBox', active: false },
+    },
-        { name: '出入口', title: '全出入口', key: 'passageway', type: 'checkBox', active: false },
+    watch: {
-        { name: '物业', title: '全物业', key: 'property', type: 'checkBox', active: false },
-        { name: '天桥1', title: '天桥1', key: 'overbridge1', type: 'checkBox', active: false },
-        { name: '天桥2', title: '天桥2', key: 'overbridge2', type: 'checkBox', active: false },
-        { name: 'LED', title: '出入口(LED)', key: 'LED', type: 'checkBox', active: false },
-      ],
-      statusColor: {
-        normal: '#00ff00',
-      },
-      stationList: [],
-      selectedAreaList: [],
-      iscsDeviceMap: {},
-      deviceMap: {},
-    }
-  },
-  watch: {
     // '$store.state.socket.iscsStatePisMessages': function(list) {
     //   if (list && list.length) {
     //     list.forEach(item => {
@@ -178,198 +175,198 @@ export default {
     //     })
     //   }
     // },
-  },
+    },
-  async created() {
+    async created() {
     // 请求当前线路车站列表
-    try {
+        try {
-      const positionMap = {
+            const positionMap = {
-        LCD: 0,
+                LCD: 0,
-        UP_STAND: 1,
+                UP_STAND: 1,
-        DOWN_STAND: 2,
+                DOWN_STAND: 2,
-        GATE: 3,
+                GATE: 3,
-        PROPERTY: 4,
+                PROPERTY: 4,
-        OVERPASS1: 5,
+                OVERPASS1: 5,
-        OVERPASS2: 6,
+                OVERPASS2: 6,
-        LED: 7,
+                LED: 7
-      }
+            };
-      const res = await getByGroupStationList(this.$route.query.group)
+            const res = await getByGroupStationList(this.$route.query.group);
-      const resp = await queryIscsDeviceCod({ mapId: this.$route.query.mapId, system: 'PIS' })
+            const resp = await queryIscsDeviceCod({ mapId: this.$route.query.mapId, system: 'PIS' });
-      if (res.code == 200) {
+            if (res.code == 200) {
-        this.stationList = []
+                this.stationList = [];
-        res.data.forEach(station => {
+                res.data.forEach(station => {
-          if (!station.depot) {
+                    if (!station.depot) {
-            const children = [
+                        const children = [
-              { status: 'none' },
+                            { status: 'none' },
-              { status: 'none' },
+                            { status: 'none' },
-              { status: 'none' },
+                            { status: 'none' },
-              { status: 'none' },
+                            { status: 'none' },
-              { status: 'none' },
+                            { status: 'none' },
-              { status: 'none' },
+                            { status: 'none' },
-              { status: 'none' },
+                            { status: 'none' },
-              { status: 'none' },
+                            { status: 'none' }
-            ]
+                        ];
-            if (resp.code == 200) {
+                        if (resp.code == 200) {
-              resp.data &&
+                            resp.data &&
                 resp.data.forEach(item => {
-                  if (station.code == item.station) {
+                    if (station.code == item.station) {
-                    const index = positionMap[item.position]
+                        const index = positionMap[item.position];
-                    if (children[index]) {
+                        if (children[index]) {
-                      children[index].status = 'default'
+                            children[index].status = 'default';
-                      this.iscsDeviceMap[item.code] = station.code + '-' + index
+                            this.iscsDeviceMap[item.code] = station.code + '-' + index;
-                      this.deviceMap[station.code + '-' + index] = item
+                            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 param = {
+            const params = {
-              stationName: station.name,
+                resourceId: voice.id,
-              code: station.code,
+                iscsDeviceCodes: iscsDeviceCodes,
-              children: children,
+                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);
             }
-            this.stationList.push(param)
+        },
-          }
+        selectedStation(station) {
-        })
+            const flag = this.checkStationSelected(station);
-      }
+            station.children.forEach((item, index) => {
-      this.subscribe()
+                const elem = station.code + '-' + index;
-    } catch (e) {
+                if (item.status === 'default' && flag) {
-      this.$message.error('获取车站列表失败！')
+                    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));
+        }
     }
-  },
+};
-  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/ {

src/views/iscs/iscsSystemNew/config/pis/mainScreen.vue

@@ -262,8 +262,8 @@ export default {
             }
             sendCommandNew(this.$route.query.group, 'ISCS_PIS_Stop_Playing', { iscsDeviceCodes: iscsDeviceCodes })
                 .then(resp => {
-                    // const audio = document.getElementById('voice')
+                    const audio = document.getElementById('voice');
-                    // audio.pause()
+                    audio.pause();
                 })
                 .catch(() => {
                     this.$message.error('广播终止播放失败！');
@@ -290,10 +290,10 @@ export default {
             };
             sendCommandNew(this.$route.query.group, 'ISCS_PIS_Play', params)
                 .then(resp => {
-                    // const voiceUrl = this.$store.state.user.resourcesUrl + (voice.url || resp.data)
+                    const voiceUrl = this.$store.state.user.resourcesUrl + (voice.url || resp.data);
-                    // const audio = document.getElementById('voice')
+                    const audio = document.getElementById('voice');
-                    // audio.src = voiceUrl
+                    audio.src = voiceUrl;
-                    // audio.play()
+                    audio.play();
                 })
                 .catch(() => {
                     this.$message.error('发布广播失败！');