emergencyEvacuationBig.vue 40 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134113511361137113811391140114111421143114411451146114711481149115011511152115311541155115611571158115911601161116211631164116511661167116811691170117111721173117411751176117711781179118011811182118311841185118611871188118911901191119211931194119511961197119811991200120112021203120412051206120712081209121012111212121312141215121612171218121912201221122212231224122512261227122812291230123112321233123412351236123712381239124012411242124312441245124612471248124912501251125212531254125512561257125812591260126112621263126412651266126712681269127012711272127312741275127612771278127912801281128212831284128512861287128812891290129112921293129412951296129712981299130013011302130313041305130613071308130913101311131213131314131513161317131813191320132113221323132413251326132713281329133013311332133313341335133613371338133913401341134213431344134513461347134813491350135113521353135413551356135713581359136013611362136313641365136613671368136913701371137213731374137513761377137813791380138113821383138413851386138713881389139013911392139313941395139613971398139914001401140214031404140514061407140814091410141114121413141414151416141714181419142014211422142314241425142614271428142914301431143214331434143514361437143814391440144114421443144414451446144714481449145014511452145314541455145614571458145914601461146214631464146514661467146814691470147114721473147414751476147714781479148014811482148314841485148614871488148914901491149214931494149514961497149814991500150115021503150415051506150715081509151015111512151315141515151615171518151915201521152215231524152515261527152815291530153115321533153415351536153715381539154015411542154315441545154615471548154915501551155215531554155515561557155815591560156115621563156415651566156715681569157015711572
  1. <!-- 应急疏散 -->
  2. <template>
  3. <view id="emergencyEvacuationBig">
  4. <view class="setUpEvacuation" v-if="pageType == 1">
  5. <view class="evacuation-max-box">
  6. <view class="picker-max-box">
  7. <view class="picker-title-box">
  8. <view></view>
  9. <view>学院楼栋</view>
  10. </view>
  11. <picker @change="buildingChange"
  12. :range-key="'label'" :value="value" :range="buildingList">
  13. <view class="picker-min-box">
  14. <view>{{buildingName?buildingName:'请选择学院楼栋'}}</view>
  15. <img src="@/images/icon_06.png">
  16. </view>
  17. </picker>
  18. </view>
  19. <view class="picker-max-box">
  20. <view class="picker-title-box">
  21. <view></view>
  22. <view>楼层</view>
  23. </view>
  24. <picker @change="floorChange" :disabled="!buildingId"
  25. :range-key="'name'" :value="id" :range="floorList">
  26. <view class="picker-min-box">
  27. <view>{{floorName?floorName:'请选择楼层'}}</view>
  28. <img src="@/images/icon_06.png">
  29. </view>
  30. </picker>
  31. </view>
  32. <view class="picker-max-box">
  33. <view class="picker-title-box">
  34. <view></view>
  35. <view>实验室</view>
  36. </view>
  37. <picker @change="fjListChange" :disabled="!floorId"
  38. :range-key="'subjectName'" :value="id" :range="fjListArray">
  39. <view class="picker-min-box">
  40. <view>{{subName?subName:'请选择实验室'}}</view>
  41. <img src="@/images/icon_06.png">
  42. </view>
  43. </picker>
  44. </view>
  45. <!-- <view class="picker-max-box">
  46. <view class="picker-title-box">
  47. <view>*</view>
  48. <view>疏散路径:</view>
  49. </view>
  50. <picker @change="buttonChangeTwo"
  51. :range-key="'name'" :value="id" :range="buttonArray">
  52. <view class="picker-min-box">
  53. <view>{{buttonArrayIndex?buttonArray[buttonArrayIndex].name:'请选择疏散路径'}}</view>
  54. <img src="@/images/icon_06.png">
  55. </view>
  56. </picker>
  57. </view> -->
  58. </view>
  59. <view class="setUpEvacuation-bottom-button" @click="confirmBtn">确认</view>
  60. </view>
  61. <view class="implementEvacuation" v-if="pageType == 2">
  62. <view class="evacuation-max-box">
  63. <!-- 头部 -->
  64. <view class="evacuation-title-box">
  65. <view class="evacuation-title-name-box">{{subName}}</view>
  66. <view class="site"><img src="@/images/icon_14.png">{{address}}</view>
  67. </view>
  68. <!-- 视频监控-选择疏散路径 -->
  69. <!-- <view class="monito">
  70. <view class="monito_li">
  71. 视频监控
  72. <view class="monito_li_r monito_li_r_text" @click="goVideo()">查看监控<img src="@/images/icon_04.png"></view>
  73. </view>
  74. <view class="monito_li" style="border:0;">
  75. 选择疏散路径
  76. <view class="monito_li_r">
  77. <picker @change="buttonChange"
  78. :range-key="'name'" :value="id" :range="buttonArray">
  79. <view class="evacuation-title-button-box">
  80. <view :class="buttonArrayIndex?'colorB':'colorA'">{{buttonArrayIndex?buttonArray[buttonArrayIndex].name:'修改疏散路径'}}</view>
  81. <img src="@/images/icon_06.png">
  82. </view>
  83. </picker>
  84. </view>
  85. </view>
  86. </view> -->
  87. <!-- 滚动部分 -->
  88. <!-- <view class="evacuation-scroll-box">
  89. <view :class="videoIndex == index?'scroll-box-color':''"
  90. @click="scrollBoxClick(index)"
  91. v-for="(item,index) in videoList" :key="index">{{item.name}}</view>
  92. </view> -->
  93. <!-- 视频部分 -->
  94. <!-- <view class="evacuation-video-box">
  95. <video
  96. :class="index == videoIndex?'video-a':'video-b'"
  97. v-for="(item,index) in videoList" :key="index"
  98. :id="urlList.id" :src="item.url"
  99. poster="http://lab.sxitdlc.com:9300/statics/logo/logo.png"
  100. :custom-cache='false' :autoplay="true" :controls="true"
  101. :enable-danmu="false" :muted="true" :show-fullscreen-btn="true"
  102. :show-center-play-btn="false" :show-play-btn="false"
  103. @error="videoErrorCallback" >
  104. </video>
  105. </view> -->
  106. <!-- 地图部分 -->
  107. <view class="roadmap">
  108. <view class="roadmap_t">
  109. <view class="monito_li_r_l">选择疏散路径</view>
  110. <view class="monito_li_r">
  111. <picker @change="buttonChange"
  112. :range-key="'name'" :value="id" :range="buttonArray">
  113. <view class="evacuation-title-button-box">
  114. <view :class="buttonArrayIndex?'colorB':'colorA'">{{buttonArrayIndex?buttonArray[buttonArrayIndex].name:'修改疏散路径'}}</view>
  115. <img src="@/images/icon_06.png">
  116. </view>
  117. </picker>
  118. </view>
  119. </view>
  120. <view class="evacuation-map-box">
  121. <view class="evacuation-map-big-box" :class="floorId==5?'map-1':(floorId==6?'map-2':(floorId==7?'map-3':''))">
  122. <view class="evacuation-map-min-for-box" :class="subId == item.subjectId?'evacuation-map-min-for-box-color':''"
  123. v-for="(item,index) in fjList" :key="index">{{item.room}}</view>
  124. <img class="map-min-img" src="@/images/Version2.3/icon_zjt.gif" v-show="lightList[0].type">
  125. <img class="map-min-img" src="@/images/Version2.3/icon_yjt.gif" v-show="lightList[1].type">
  126. <img class="map-min-img" src="@/images/Version2.3/icon_zjt.gif" v-show="lightList[2].type">
  127. <img class="map-min-img" src="@/images/Version2.3/icon_yjt.gif" v-show="lightList[3].type">
  128. <img class="map-min-img" src="@/images/Version2.3/icon_zjt.gif" v-show="lightList[4].type">
  129. <img class="map-min-img" src="@/images/Version2.3/icon_yjt.gif" v-show="lightList[5].type">
  130. </view>
  131. </view>
  132. </view>
  133. <!-- 视频部分 -->
  134. <view class="video-max-box" v-if="urlList[0]">
  135. <video
  136. v-for="(item,index) in urlList" :key="index" :id="urlList.id" :src="item.url"
  137. poster="http://lab.sxitdlc.com:9300/statics/logo/logo.png"
  138. :custom-cache='false' :autoplay="true" :controls="true"
  139. :enable-danmu="false" :muted="true" :show-fullscreen-btn="true"
  140. :show-center-play-btn="false" :show-play-btn="false"
  141. @error="videoErrorCallback" >
  142. </video>
  143. </view>
  144. <view class="bottom-button-box">
  145. <view @click="shadeTypeClick()">语音广播</view>
  146. <view @click="lineEvacuate" v-if="isEvacuate">执行疏散</view>
  147. <view @click="closireButton" v-if="!isEvacuate">结束疏散</view>
  148. </view>
  149. </view>
  150. <view class="shade-max-big-box" v-if="broadcastType">
  151. <view class="null-box" @click="shadeTypeClick()"></view>
  152. <!-- 语音广播-执行疏散 -->
  153. <view class="broadcast">
  154. <view class="broadcast_t">语音广播<label>选择喇叭位置</label></view>
  155. <!-- 按钮部分 -->
  156. <view class="trumpet-max-box">
  157. <view @click="trumpetClick(index)"
  158. class="trumpet-for-box" :class="item.type?'trumpet-color-a':'trumpet-color-b'"
  159. v-for="(item,index) in trumpetList" :key="index">
  160. <img src="@/images/icon_sskz_zc.png" v-if="!item.type">
  161. <img src="@/images/icon_sskz_xz.png" v-if="item.type">
  162. {{item.name}}
  163. </view>
  164. </view>
  165. <view class="broadcast_m">
  166. <view class="broadcast_m_t" :class="liveType?'broadcast_m_t_back_a':'broadcast_m_t_back_b'" @longpress.stop="recordButton" @touchmove.stop="cancelButton" @touchend.stop="sendButton">
  167. <!-- <img src="@/images/icon_sskz_azsh.png" v-if="!liveType">
  168. <img src="@/images/icon_sskz_skfs.png" v-if="liveType"> -->
  169. <!-- <label class="slip_color" v-if="!liveType">按住说话</label>
  170. <label class="press_color" v-if="liveType">松开发送</label> -->
  171. {{liveType?'松开发送':'按住说话'}}
  172. </view>
  173. <view class="broadcast_m_b" v-if="!liveType">按住说话,录入广播内容</view>
  174. <view class="broadcast_m_b" v-if="liveType">松开发送,向上滑动取消发送</view>
  175. </view>
  176. </view>
  177. </view>
  178. <!-- <view class="live-button" :class="liveType?'live-color-a':'live-color-b'"
  179. @longpress.stop="recordButton" @touchmove.stop="cancelButton" @touchend.stop="sendButton">开始广播</view> -->
  180. </view>
  181. </view>
  182. </template>
  183. <script>
  184. import { config } from '@/api/request/config.js'
  185. import { lablayout,evacuate,closure,lineEvacuate,getRedis,getDeviceList,textParseUrlIps,
  186. getCameraByFloor,jinanGetStartList,nanhuGetStartList,wenchangGetStartList,lineEvacuateTow,treeselectByUser,getBuilding} from '@/api/index.js'
  187. export default {
  188. data() {
  189. return {
  190. //页面状态
  191. pageType:"",
  192. deptIndex:0,
  193. //院系楼栋数据
  194. buildingList:[],
  195. buildingName:"",
  196. buildingId:"",
  197. //楼层数据
  198. floorList:[],
  199. floorName:"",
  200. floorId:"",
  201. //实验室
  202. fjListArray:[],
  203. //疏散方向
  204. buttonArray:[
  205. {name:"向左疏散",id:"1"},
  206. {name:"向右疏散",id:"2"},
  207. {name:"两侧疏散",id:"0"},
  208. ],
  209. buttonArrayIndex:"2",
  210. //视频数据
  211. urlList:[],
  212. //布局数据
  213. fjList:[],
  214. lightList:[
  215. {
  216. id:"5",
  217. type:false,
  218. },
  219. {
  220. id:"2",
  221. type:false,
  222. },
  223. {
  224. id:"3",
  225. type:false,
  226. },
  227. {
  228. id:"4",
  229. type:false,
  230. },
  231. {
  232. id:"1",
  233. type:false,
  234. },
  235. {
  236. id:"6",
  237. type:false,
  238. },
  239. ],
  240. //接收参数
  241. subId:"",
  242. subName:"",
  243. title:"",
  244. type:"",
  245. //喇叭数据
  246. trumpetList:[],
  247. //广播相关
  248. liveType:false,
  249. sendLock: true, //发送锁,当为true时上锁,false时解锁发送
  250. recorderManager : wx.getRecorderManager(),
  251. isEvacuate:true,//疏散按钮控制,当为true时候执行疏散
  252. //滑动记录
  253. startPoint:{},
  254. //摄像头信息
  255. deptId:'',
  256. itemData:{
  257. hardwareNUM:'',
  258. name:'',
  259. },
  260. broadcastType:false,
  261. address:"",
  262. }
  263. },
  264. onLoad(option) {
  265. this.treeselectByUser(option);
  266. this.getAppExitLine();
  267. getApp().watch(this.getMqttLineData,'lineData');
  268. let self = this;
  269. //判断入口(执行疏散)
  270. },
  271. onShow(){
  272. // this.lablayout();
  273. // this.getCameraByFloor();
  274. },
  275. methods: {
  276. //根据账户信息查询学院楼栋数据
  277. async treeselectByUser(option){
  278. const {data} = await treeselectByUser()
  279. let list = [];
  280. for(let i=0;i<data.data.length;i++){
  281. for(let o=0;o<data.data[i].children.length;o++){
  282. let obj = {
  283. label:data.data[i].label+'-'+data.data[i].children[o].label,
  284. value:data.data[i].children[o].id,
  285. }
  286. list.push(obj);
  287. // if(i==0&&o==0){
  288. // this.$set(this,'buildingId',obj.value);
  289. // this.$set(this,'deptId',obj.value);
  290. // this.$set(this,'buildingName',obj.label);
  291. // }
  292. }
  293. }
  294. this.$set(this,'buildingList',list);
  295. this.$set(this,'buildingName',"");
  296. this.$set(this,'buildingId',"");
  297. this.$set(this,'deptId',"");
  298. this.$set(this,'floorList',[]);
  299. this.$set(this,'floorName',"");
  300. this.$set(this,'floorId',"");
  301. this.$set(this,'fjListArray',[]);
  302. this.$set(this,'subName',"");
  303. this.$set(this,'subId',"");
  304. // this.getBuilding(this.buildingId);
  305. if(option.item){
  306. let item = JSON.parse(decodeURIComponent(option.item));
  307. console.log("item",item)
  308. this.subId = item.subId;
  309. this.subName = item.subjectName;
  310. this.address = item.address
  311. this.buildingId = item.buildingId;
  312. this.deptId = item.buildingId;
  313. this.floorId = item.floorId;
  314. this.title = item.title;
  315. this.type = item.type;
  316. this.lablayout(this.buildingId,this.floorId);
  317. this.evacuateTwo();
  318. }else{
  319. //判断入口(首页按钮)
  320. this.getRedis();
  321. }
  322. },
  323. //根据账户信息查询学院楼栋数据
  324. async getBuilding(buildingId){
  325. const {data} = await getBuilding(buildingId)
  326. // 过滤了三楼
  327. let list = [];
  328. for(let i=0;i<data.data.length;i++){
  329. if(data.data[i].id != 7){
  330. list.push(data.data[i]);
  331. }
  332. }
  333. this.$set(this,'floorList',list);
  334. this.$set(this,'floorName',"");
  335. this.$set(this,'floorId',"");
  336. this.$set(this,'fjListArray',[]);
  337. this.$set(this,'subName',"");
  338. this.$set(this,'subId',"");
  339. // if(data.data[0]){
  340. // this.$set(this,'floorName',data.data[0].name);
  341. // this.$set(this,'floorId',data.data[0].id);
  342. // this.lablayout(this.buildingId,this.floorId);
  343. // }
  344. },
  345. //获取实验室布局
  346. async lablayout(buildingId,floorId){
  347. console.log('buildingId',buildingId)
  348. console.log('floorId',floorId)
  349. let self = this;
  350. const {data} = await lablayout(buildingId)
  351. if(data.code == 200){
  352. for(let i=0;i<data.data.length;i++){
  353. if(data.data[i].id == floorId){
  354. let newList = [];
  355. self.fjList = data.data[i].list;
  356. for(let o=0;o<data.data[i].list.length;o++){
  357. if(data.data[i].list[o].subjectId != -1){
  358. newList.push(data.data[i].list[o]);
  359. }
  360. }
  361. this.$set(this,'fjListArray',newList);
  362. // if(newList[0]){
  363. // console.log("newList",newList[0])
  364. // this.$set(this,'subName',newList[0].subjectName);
  365. // this.$set(this,'subId',newList[0].subjectId);
  366. // }
  367. }
  368. }
  369. }
  370. },
  371. //学院楼栋选中
  372. buildingChange(e){
  373. // this.$set(this,'buildingIndex',e.detail.value);
  374. this.$set(this,'buildingName',this.buildingList[e.detail.value].label);
  375. this.$set(this,'buildingId',this.buildingList[e.detail.value].value);
  376. this.$set(this,'deptId',this.buildingList[e.detail.value].value);
  377. this.getBuilding(this.buildingList[e.detail.value].value);
  378. },
  379. //楼层选中
  380. floorChange(e){
  381. // this.$set(this,'floorIndex',e.detail.value);
  382. this.$set(this,'floorName',this.floorList[e.detail.value].name);
  383. this.$set(this,'floorId',this.floorList[e.detail.value].id);
  384. this.lablayout(this.buildingId,this.floorList[e.detail.value].id);
  385. },
  386. //实验室选择
  387. fjListChange(e){
  388. this.$set(this,'subName',this.fjListArray[e.detail.value].subjectName);
  389. this.$set(this,'subId',this.fjListArray[e.detail.value].subjectId);
  390. this.itemData.name=this.fjListArray[e.detail.value].subjectName
  391. this.itemData.floorId=this.fjListArray[e.detail.value].floorId
  392. this.itemData.id=this.fjListArray[e.detail.value].id
  393. },
  394. getAppExitLine(){
  395. let list = [{type:"lab/exit/line"}];
  396. getApp().appMqttOn(1,list);
  397. },
  398. shadeTypeClick(){
  399. this.broadcastType = !this.broadcastType
  400. },
  401. async evacuateTwo(){
  402. const {data} = await lineEvacuateTow(this.subId,0)
  403. if(data.code == 200){
  404. if(data.data){
  405. this.pageType = 2;
  406. uni.showToast({
  407. title: '执行成功',
  408. icon:"none",
  409. mask:true,
  410. duration: 2000
  411. });
  412. this.initialization(data.data);
  413. }
  414. }
  415. },
  416. //跳转摄像头列表
  417. goVideo(){
  418. uni.navigateTo({
  419. url:'/pages_manage/workbench/laboratory/monitor?item='+encodeURIComponent(JSON.stringify(this.itemData))+'&deptId='+this.deptId
  420. })
  421. },
  422. //获取楼层摄像头列表
  423. async getCameraByFloor(){
  424. const {data} = await getCameraByFloor({floorId:this.floorId})
  425. if(data.code == 200){
  426. if(data.data[0]){
  427. this.itemData.hardwareNUM=data.data.join(',')
  428. this.wenchangGetStartList(data.data);
  429. // this.startUrl(response.data);
  430. }
  431. }
  432. },
  433. async wenchangGetStartList(rows){
  434. let self = this;
  435. let list = "";
  436. for(let i=0;i<rows.length;i++){
  437. list = list + rows[i]+","
  438. }
  439. let obj = {
  440. page:"1",
  441. count:"100",
  442. deviceIds:list,
  443. // deviceIds:'440102004920000000011111,2C440102004920000000011112',
  444. };
  445. const {data} = await jinanGetStartList(obj)
  446. if(data.code == 200){
  447. let list = [];
  448. for(let i=0;i<data.data.length;i++){
  449. let text = 'https://lab.sxitdlc.com/wenchang/stream/';
  450. let url = data.data[i].result.body.data.hls;
  451. url = url.split("rtp/");
  452. let newUrl = text+'rtp/'+url[1];
  453. let obj = {
  454. name:"楼道监控"+(i+1),
  455. id:data.data[i].result.body.data.deviceID,
  456. url:newUrl,
  457. }
  458. list.push(obj)
  459. }
  460. this.urlList = list;
  461. }
  462. },
  463. //点击选择喇叭
  464. trumpetClick(index){
  465. this.trumpetList[index].type = !this.trumpetList[index].type
  466. },
  467. //录制
  468. recordButton(e){
  469. console.log("按下")
  470. let self = this;
  471. let num = 0;
  472. for(let i=0;i<self.trumpetList.length;i++){
  473. if(self.trumpetList[i].type){
  474. num++
  475. }
  476. }
  477. if(num == 0){
  478. uni.showToast({
  479. title: '请选择喇叭',
  480. icon:"none",
  481. mask:true,
  482. duration: 2000
  483. });
  484. return
  485. }
  486. this.liveType=true;
  487. console.log('录制',e)
  488. this.startPoint = e.touches[0];//记录长按时开始点信息,后面用于计算上划取消时手指滑动的距离。
  489. const options = {
  490. duration: 10000,
  491. sampleRate: 16000,
  492. numberOfChannels: 1,
  493. encodeBitRate: 48000,
  494. format: 'mp3',
  495. frameSize: 50
  496. }
  497. this.recorderManager.start(options);//开始录音
  498. this.recorderManager.onStart(() => {
  499. console.log('recorder start')
  500. })
  501. this.recorderManager.onError((res) => {
  502. console.log(res);
  503. })
  504. wx.showToast({
  505. title: "正在录音,上划取消发送",
  506. icon: "none",
  507. duration: 60000//先定义个60秒,后面可以手动调用wx.hideToast()隐藏
  508. });
  509. this.sendLock = false;//长按时是不上锁的。
  510. },
  511. //取消
  512. cancelButton(e){
  513. console.log("移动")
  514. let self = this;
  515. let num = 0;
  516. for(let i=0;i<self.trumpetList.length;i++){
  517. if(self.trumpetList[i].type){
  518. num++
  519. }
  520. }
  521. if(num == 0){
  522. return
  523. }
  524. this.liveType=false;
  525. console.log('取消',e)
  526. let moveLenght = e.touches[e.touches.length - 1].clientY - this.startPoint.clientY; //移动距离
  527. if (Math.abs(moveLenght) > 50) {
  528. wx.showToast({
  529. title: "松开手指,取消发送",
  530. icon: "none",
  531. duration: 60000
  532. });
  533. this.sendLock = true;//触发了上滑取消发送,上锁
  534. } else {
  535. wx.showToast({
  536. title: "正在录音,上划取消发送",
  537. icon: "none",
  538. duration: 60000
  539. });
  540. this.sendLock = false;//上划距离不足,依然可以发送,不上锁
  541. }
  542. },
  543. //发送
  544. sendButton(e){
  545. console.log("松开")
  546. let self = this;
  547. let num = 0;
  548. for(let i=0;i<self.trumpetList.length;i++){
  549. if(self.trumpetList[i].type){
  550. num++
  551. }
  552. }
  553. if(num == 0){
  554. return
  555. }
  556. this.liveType=false;
  557. console.log('发送',e)
  558. wx.hideToast();//结束录音、隐藏Toast提示框
  559. this.recorderManager.stop();//结束录音
  560. this.recorderManager.onStop((res) => {
  561. if(!this.sendLock){
  562. console.log('1', this.recorderManager)
  563. this.uploadImg(res.tempFilePath);
  564. }
  565. console.log('停止录音', res.tempFilePath)
  566. console.log("sendLock",this.sendLock);
  567. })
  568. },
  569. //上传MP3
  570. async uploadImg(tempFilePaths){
  571. var self = this;
  572. uni.uploadFile({
  573. url: config.base_url+'/file/upload', //仅为示例,非真实的接口地址
  574. header:{'Authorization':uni.getStorageSync('token')},
  575. filePath: tempFilePaths,
  576. name: 'file',
  577. formData: {
  578. 'user': 'test'
  579. },
  580. success: (uploadFileRes) => {
  581. let res = JSON.parse(uploadFileRes.data);
  582. if(res.code == 200){
  583. console.log("上传成功",res)
  584. // self.textParseUrlIps(res.data.url);
  585. self.textParseUrlIps(config.base_url+ '/' +res.data.url);
  586. // self.newData.imgList.push(res.data.url);
  587. }else{
  588. uni.showToast({
  589. title: res.msg,
  590. icon:"none",
  591. mask:true,
  592. duration: 2000
  593. });
  594. }
  595. },
  596. fail: err => {
  597. uni.hideLoading()
  598. },
  599. complete: () => {
  600. }
  601. });
  602. },
  603. //发送语音
  604. async textParseUrlIps(text){
  605. let self = this;
  606. let newList = [];
  607. for(let i=0;i<self.trumpetList.length;i++){
  608. if(self.trumpetList[i].type){
  609. let obj = {
  610. sn:self.trumpetList[i].deviceSn,
  611. port:self.trumpetList[i].port,
  612. deviceIp:self.trumpetList[i].deviceIp,
  613. type:"",
  614. name:"",
  615. speed:"",
  616. params:{
  617. tid:"",
  618. vol:self.trumpetList[i].deviceVol,
  619. urls:[]
  620. }
  621. };
  622. newList.push(obj);
  623. }
  624. }
  625. const {data} = await textParseUrlIps(newList,text)
  626. if(data.code == 200){
  627. uni.showToast({
  628. title: '发送成功',
  629. icon:"none",
  630. mask:true,
  631. duration: 2000
  632. });
  633. }
  634. },
  635. //监听应急疏散数据变更
  636. getMqttLineData(val){
  637. console.log('收到疏散MQTT')
  638. let self = this;
  639. if(val.EXIT_LINE_MESSAGE){
  640. console.log('数据改变')
  641. this.evacuate();
  642. }else{
  643. console.log('应急疏散已结束')
  644. uni.showToast({
  645. title: '应急疏散已结束',
  646. icon:"none",
  647. mask:true,
  648. duration: 2000
  649. });
  650. setTimeout(function(){
  651. uni.navigateBack();
  652. },2000);
  653. }
  654. },
  655. //获取当前疏散数据
  656. async getRedis(){
  657. let self = this;
  658. const {data} = await getRedis()
  659. if(data.code == 200){
  660. if(data.data){
  661. this.isEvacuate=false;
  662. this.deptId = data.data.deptId;
  663. this.buildingId = data.data.buildId;
  664. this.floorId = data.data.floorId;
  665. this.subId = data.data.subId;
  666. this.subName = data.data.subName;
  667. this.address = data.data.deptName+'-'+data.data.buildName+'-'+data.data.floorName
  668. // this.lablayout(data.data.buildId,data.data.floorId);
  669. this.lablayout(this.buildingId,this.floorId);
  670. this.evacuate();
  671. // this.getBuilding(this.buildingId);
  672. }else{
  673. this.pageType = 1;
  674. this.isEvacuate=true;
  675. }
  676. }
  677. },
  678. //疏散路线选择
  679. buttonChangeTwo(e){
  680. this.buttonArrayIndex = e.detail.value;
  681. },
  682. //执行疏散
  683. async evacuate(){
  684. console.log("执行疏散")
  685. const {data} = await evacuate(this.subId)
  686. if(data.code == 200){
  687. if(data.data){
  688. this.initialization(data.data);
  689. }
  690. }
  691. },
  692. //结束疏散
  693. closireButton(){
  694. let self = this;
  695. uni.showModal({
  696. content: '确认结束疏散吗?',
  697. cancelColor:"#999",
  698. confirmColor:"#0183FA",
  699. success: function (res) {
  700. if (res.confirm) {
  701. self.closure();
  702. this.isEvacuate=true;
  703. console.log('用户点击确定');
  704. } else if (res.cancel) {
  705. console.log('用户点击取消');
  706. }
  707. }
  708. });
  709. },
  710. async closure(){
  711. const {data} = await closure(this.subId)
  712. if(data.code == 200){
  713. uni.showToast({
  714. title: '操作成功',
  715. icon:"none",
  716. mask:true,
  717. duration: 2000
  718. });
  719. setTimeout(function(){
  720. uni.navigateBack();
  721. },2000);
  722. }
  723. },
  724. buttonChange(e){
  725. this.buttonArrayIndex = e.detail.value;
  726. this.lineEvacuate();
  727. },
  728. /* 确认 */
  729. confirmBtn(){
  730. if(!this.subId){
  731. uni.showToast({
  732. title: '请选择实验室',
  733. icon:"none",
  734. mask:true,
  735. duration: 2000
  736. });
  737. return
  738. }
  739. this.address = this.buildingName+''+this.floorName
  740. this.lineEvacuateTow();
  741. this.getCameraByFloor();
  742. },
  743. /* 2.5获取疏散线路 */
  744. async lineEvacuateTow(){
  745. if(!this.buttonArrayIndex){
  746. uni.showToast({
  747. title: '请选择疏散路线',
  748. icon:"none",
  749. mask:true,
  750. duration: 2000
  751. });
  752. return
  753. }
  754. const {data} = await lineEvacuateTow(this.subId,this.buttonArray[this.buttonArrayIndex].id)
  755. if(data.code == 200){
  756. if(data.data){
  757. this.pageType = 2;
  758. uni.showToast({
  759. title: '执行成功',
  760. icon:"none",
  761. mask:true,
  762. duration: 2000
  763. });
  764. this.initialization(data.data);
  765. }
  766. }
  767. },
  768. //执行疏散
  769. async lineEvacuate(){
  770. if(!this.subId){
  771. uni.showToast({
  772. title: '请选择实验室',
  773. icon:"none",
  774. mask:true,
  775. duration: 2000
  776. });
  777. return
  778. }
  779. if(!this.buttonArrayIndex){
  780. uni.showToast({
  781. title: '请选择疏散路线',
  782. icon:"none",
  783. mask:true,
  784. duration: 2000
  785. });
  786. return
  787. }
  788. const {data} = await lineEvacuate(this.subId,this.buttonArray[this.buttonArrayIndex].id)
  789. if(data.code == 200){
  790. if(data.data){
  791. console.log('执行疏散')
  792. this.isEvacuate=false;
  793. uni.showToast({
  794. title: '执行成功',
  795. icon:"none",
  796. mask:true,
  797. duration: 2000
  798. });
  799. this.initialization(data.data);
  800. }
  801. }
  802. },
  803. //灯初始化
  804. initialization(list){
  805. console.log('灯数据',list);
  806. let self = this;
  807. let newList = [
  808. {
  809. id:"5",
  810. type:false,
  811. },
  812. {
  813. id:"2",
  814. type:false,
  815. },
  816. {
  817. id:"3",
  818. type:false,
  819. },
  820. {
  821. id:"4",
  822. type:false,
  823. },
  824. {
  825. id:"1",
  826. type:false,
  827. },
  828. {
  829. id:"6",
  830. type:false,
  831. },
  832. ];
  833. for(let i=0;i<list.length;i++){
  834. for(let o=0;o<newList.length;o++){
  835. if(list[i].lightId == newList[o].id){
  836. newList[o].type = true;
  837. }
  838. }
  839. }
  840. this.lightList = newList;
  841. console.log('灯数据改变',this.lightList);
  842. this.pageType = 2;
  843. this.$forceUpdate();
  844. this.getDeviceList();
  845. this.getCameraByFloor();
  846. },
  847. async getDeviceList(){
  848. let obj ={
  849. floorId:this.floorId,
  850. page:1,
  851. pageSize:100,
  852. };
  853. const {data} = await getDeviceList(obj)
  854. if(data.code == 200){
  855. for(let i=0;i<data.data.length;i++){
  856. data.data[i].type = false;
  857. }
  858. this.$set(this,'trumpetList',data.data)
  859. }
  860. },
  861. //摄像头切换
  862. scrollBoxClick(index){
  863. this.videoIndex = index;
  864. },
  865. },
  866. beforeDestroy(){
  867. //断开mqtt连接
  868. getApp().offMQTT();
  869. //删除应急疏散监听
  870. getApp().deleteLineData();
  871. }
  872. }
  873. </script>
  874. <style lang="stylus" scoped>
  875. #emergencyEvacuationBig{
  876. height:100%;
  877. width:100%;
  878. display:flex;
  879. flex-direction:column;
  880. overflow-y:scroll;
  881. .setUpEvacuation{
  882. flex:1;
  883. display:flex;
  884. flex-direction:column;
  885. overflow-y:scroll;
  886. .evacuation-max-box{
  887. width:710rpx;
  888. margin:20rpx 20rpx;
  889. background #fff
  890. border-radius:20rpx;
  891. padding:20rpx 0;
  892. .picker-max-box{
  893. .picker-title-box{
  894. padding:0 20rpx;
  895. display flex
  896. view{
  897. line-height:80rpx;
  898. font-size:28rpx;
  899. }
  900. view:nth-child(1){
  901. color:red;
  902. }
  903. view:nth-child(2){
  904. }
  905. view:nth-child(3){
  906. color:#999;
  907. }
  908. }
  909. .picker-min-box{
  910. display flex;
  911. height:80rpx;
  912. width:667rpx;
  913. border:1rpx solid #a2a2a2;
  914. border-radius:10rpx;
  915. margin:0 20rpx;
  916. view{
  917. flex:1;
  918. line-height:80rpx;
  919. padding:0 20rpx;
  920. color:#999;
  921. font-size:28rpx;
  922. }
  923. img{
  924. width:24rpx;
  925. height:12rpx;
  926. margin:35rpx 23rpx;
  927. }
  928. }
  929. }
  930. }
  931. }
  932. .implementEvacuation{
  933. flex:1;
  934. display:flex;
  935. flex-direction:column;
  936. overflow-y:scroll;
  937. .evacuation-max-box{
  938. width:710rpx;
  939. margin:20rpx 20rpx;
  940. /* background #fff */
  941. border-radius:20rpx;
  942. padding:20rpx 0 30rpx;
  943. .evacuation-title-box{
  944. // height:150rpx;
  945. //border-bottom:1rpx solid #dedede;
  946. background: #FFFFFF;
  947. border-radius: 20rpx;
  948. padding:34rpx 22rpx;
  949. box-sizing :border-box;
  950. .evacuation-title-name-box{
  951. font-size: 30rpx;
  952. font-family: PingFang SC;
  953. font-weight: 500;
  954. color: #333333;
  955. line-height: 30rpx;
  956. }
  957. .site{
  958. font-size: 28rpx;
  959. font-family: PingFang SC;
  960. font-weight: 500;
  961. color: #999999;
  962. line-height: 30rpx;
  963. margin-top:32rpx;
  964. display :flex;
  965. justify-content :flex-start;
  966. align-items center;
  967. >img{
  968. width: 28rpx;
  969. height: 30rpx;
  970. margin-right:18rpx;
  971. }
  972. }
  973. }
  974. /* 视频监控-选择疏散路线 */
  975. .monito{
  976. width: 710rpx;
  977. height: 161rpx;
  978. background: #FFFFFF;
  979. border-radius: 20rpx;
  980. padding :0 14rpx;
  981. box-sizing border-box;
  982. margin-top :20rpx;
  983. .monito_li{
  984. width: 680rpx;
  985. height: 80rpx;
  986. font-size: 30rpx;
  987. font-family: PingFang SC;
  988. font-weight: 500;
  989. color: #333333;
  990. line-height: 80rpx;
  991. border-bottom: 1rpx solid #E0E0E0;
  992. display :flex;
  993. justify-content :space-between;
  994. .monito_li_r_text{
  995. font-size:28rpx!important;
  996. padding-right:37rpx;
  997. }
  998. .monito_li_r{
  999. width :380rpx;
  1000. font-size: 24rpx;
  1001. font-family: PingFang SC;
  1002. font-weight: 500;
  1003. color: #0183FA;
  1004. line-height: 80rpx;
  1005. display :flex;
  1006. justify-content :flex-end;
  1007. align-items center;
  1008. >img{
  1009. width: 9rpx;
  1010. height: 22rpx;
  1011. margin-left :20rpx;
  1012. }
  1013. .evacuation-title-button-box{
  1014. display flex
  1015. overflow hidden
  1016. view{
  1017. line-height:61rpx;
  1018. font-size:28rpx;
  1019. }
  1020. .colorA{
  1021. color: #0183FA;
  1022. }
  1023. .colorB{
  1024. color:#0183FA;
  1025. }
  1026. img{
  1027. margin:28rpx 20rpx 0;
  1028. width:24rpx;
  1029. height:9rpx;
  1030. }
  1031. }
  1032. }
  1033. }
  1034. }
  1035. .evacuation-scroll-box{
  1036. height:95rpx;
  1037. overflow-x scroll
  1038. overflow-y hidden
  1039. white-space:nowrap;
  1040. margin:0 20rpx;
  1041. view{
  1042. line-height:95rpx;
  1043. font-size:28rpx;
  1044. display inline-block
  1045. margin-right:45rpx;
  1046. }
  1047. .scroll-box-color{
  1048. color:#0183FA;
  1049. }
  1050. }
  1051. .evacuation-video-box{
  1052. width:668rpx;
  1053. height:341rpx;
  1054. margin:0 auto;
  1055. position relative
  1056. video{
  1057. position absolute
  1058. top:0;
  1059. left:0;
  1060. width:668rpx;
  1061. height:341rpx;
  1062. margin:0 auto;
  1063. }
  1064. .video-a{
  1065. z-index:100;
  1066. }
  1067. .video-b{
  1068. z-index:0;
  1069. }
  1070. }
  1071. /* 路线图 */
  1072. .roadmap{
  1073. width: 710rpx;
  1074. height: 464rpx;
  1075. background: #FFFFFF;
  1076. border-radius: 20rpx;
  1077. padding :20rpx 20rpx 0;
  1078. box-sizing :border-box;
  1079. margin-top :20rpx;
  1080. .roadmap_t{
  1081. font-size: 30rpx;
  1082. font-family: PingFang SC;
  1083. font-weight: 500;
  1084. color: #333333;
  1085. line-height: 30rpx;
  1086. display:flex;
  1087. .monito_li_r_l{
  1088. flex:1;
  1089. line-height:61rpx;
  1090. font-size:28rpx;
  1091. }
  1092. .monito_li_r{
  1093. width :380rpx;
  1094. font-size: 24rpx;
  1095. font-family: PingFang SC;
  1096. font-weight: 500;
  1097. color: #0183FA;
  1098. line-height: 80rpx;
  1099. display :flex;
  1100. justify-content :flex-end;
  1101. align-items center;
  1102. >img{
  1103. width: 9rpx;
  1104. height: 22rpx;
  1105. margin-left :20rpx;
  1106. }
  1107. .evacuation-title-button-box{
  1108. display flex
  1109. overflow hidden
  1110. view{
  1111. line-height:61rpx;
  1112. font-size:28rpx;
  1113. }
  1114. .colorA{
  1115. color: #0183FA;
  1116. }
  1117. .colorB{
  1118. color:#0183FA;
  1119. }
  1120. img{
  1121. margin:28rpx 20rpx 0;
  1122. width:24rpx;
  1123. height:9rpx;
  1124. }
  1125. }
  1126. }
  1127. }
  1128. .evacuation-map-box{
  1129. width:668rpx;
  1130. height:348rpx;
  1131. margin:0 auto;
  1132. overflow:hidden;
  1133. border:1rpx solid #E0E0E0;
  1134. margin-top:20rpx;
  1135. .map-1{
  1136. background:url(../images/kuangdaMap/map1.png);
  1137. .evacuation-map-min-for-box:nth-child(1){
  1138. margin:4rpx 0 0 0;
  1139. width:54rpx;
  1140. height:102rpx;
  1141. }
  1142. .evacuation-map-min-for-box:nth-child(2){
  1143. margin:4rpx 54rpx 0 0;
  1144. width:54rpx;
  1145. height:102rpx;
  1146. }
  1147. .evacuation-map-min-for-box:nth-child(3){
  1148. margin:4rpx 54rpx 0 0;
  1149. width:100rpx;
  1150. height:102rpx;
  1151. }
  1152. .evacuation-map-min-for-box:nth-child(4){
  1153. margin:4rpx 0 0 0;
  1154. width:135rpx;
  1155. height:102rpx;
  1156. }
  1157. .evacuation-map-min-for-box:nth-child(5){
  1158. margin:4rpx 0 0 0;
  1159. width:95rpx;
  1160. height:102rpx;
  1161. }
  1162. .evacuation-map-min-for-box:nth-child(6){
  1163. margin:4rpx 0 0 0;
  1164. width:54rpx;
  1165. height:102rpx;
  1166. }
  1167. .evacuation-map-min-for-box:nth-child(7){
  1168. margin:78rpx 0 0 0;
  1169. width:130rpx;
  1170. height:102rpx;
  1171. }
  1172. .evacuation-map-min-for-box:nth-child(8){
  1173. margin:78rpx 0 0 0;
  1174. width:149rpx;
  1175. height:102rpx;
  1176. }
  1177. .evacuation-map-min-for-box:nth-child(9){
  1178. margin:78rpx 0 0 0;
  1179. width:84rpx;
  1180. height:102rpx;
  1181. }
  1182. .evacuation-map-min-for-box:nth-child(10){
  1183. margin:78rpx 0 0 0;
  1184. width:84rpx;
  1185. height:102rpx;
  1186. }
  1187. .evacuation-map-min-for-box:nth-child(11){
  1188. margin:78rpx 0 0 0;
  1189. width:94rpx;
  1190. height:102rpx;
  1191. }
  1192. .evacuation-map-min-for-box:nth-child(12){
  1193. margin:78rpx 0 0 0;
  1194. width:44rpx;
  1195. height:102rpx;
  1196. }
  1197. .evacuation-map-min-for-box:nth-child(13){
  1198. margin:78rpx 0 0 0;
  1199. width:64rpx;
  1200. height:102rpx;
  1201. }
  1202. .map-min-img:nth-child(14){
  1203. top: 134rpx;
  1204. left: 80rpx;
  1205. }
  1206. .map-min-img:nth-child(15){
  1207. top: 134rpx;
  1208. left: 160rpx;
  1209. }
  1210. .map-min-img:nth-child(16){
  1211. top: 134rpx;
  1212. left:280rpx;
  1213. }
  1214. .map-min-img:nth-child(17){
  1215. top: 134rpx;
  1216. left:340rpx;
  1217. }
  1218. .map-min-img:nth-child(18){
  1219. top: 134rpx;
  1220. left:460rpx;
  1221. }
  1222. .map-min-img:nth-child(19){
  1223. top: 134rpx;
  1224. left:540rpx;
  1225. }
  1226. }
  1227. .map-2{
  1228. background:url(../images/kuangdaMap/map2.png);
  1229. .evacuation-map-min-for-box:nth-child(1){
  1230. margin:4rpx 0 0 0;
  1231. width:54rpx;
  1232. height:102rpx;
  1233. }
  1234. .evacuation-map-min-for-box:nth-child(2){
  1235. margin:4rpx 54rpx 0 0;
  1236. width:54rpx;
  1237. height:102rpx;
  1238. }
  1239. .evacuation-map-min-for-box:nth-child(3){
  1240. margin:4rpx 54rpx 0 0;
  1241. width:100rpx;
  1242. height:102rpx;
  1243. }
  1244. .evacuation-map-min-for-box:nth-child(4){
  1245. margin:4rpx 0 0 0;
  1246. width:135rpx;
  1247. height:102rpx;
  1248. }
  1249. .evacuation-map-min-for-box:nth-child(5){
  1250. margin:4rpx 0 0 0;
  1251. width:145rpx;
  1252. height:102rpx;
  1253. }
  1254. .evacuation-map-min-for-box:nth-child(6){
  1255. margin:4rpx 0 0 0;
  1256. width:106rpx;
  1257. height:102rpx;
  1258. }
  1259. .evacuation-map-min-for-box:nth-child(7){
  1260. margin:78rpx 0 0 0;
  1261. width:106rpx;
  1262. height:102rpx;
  1263. }
  1264. .evacuation-map-min-for-box:nth-child(8){
  1265. margin:78rpx 0 0 0;
  1266. width:100rpx;
  1267. height:102rpx;
  1268. }
  1269. .evacuation-map-min-for-box:nth-child(9){
  1270. margin:78rpx 0 0 0;
  1271. width:100rpx;
  1272. height:102rpx;
  1273. }
  1274. .evacuation-map-min-for-box:nth-child(10){
  1275. margin:78rpx 0 0 0;
  1276. width:92rpx;
  1277. height:102rpx;
  1278. }
  1279. .evacuation-map-min-for-box:nth-child(11){
  1280. margin:78rpx 0 0 0;
  1281. width:90rpx;
  1282. height:102rpx;
  1283. }
  1284. .evacuation-map-min-for-box:nth-child(12){
  1285. margin:78rpx 0 0 0;
  1286. width:53rpx;
  1287. height:102rpx;
  1288. }
  1289. .map-min-img:nth-child(13){
  1290. top: 134rpx;
  1291. left: 80rpx;
  1292. }
  1293. .map-min-img:nth-child(14){
  1294. top: 134rpx;
  1295. left: 160rpx;
  1296. }
  1297. .map-min-img:nth-child(15){
  1298. top: 134rpx;
  1299. left:280rpx;
  1300. }
  1301. .map-min-img:nth-child(16){
  1302. top: 134rpx;
  1303. left:340rpx;
  1304. }
  1305. .map-min-img:nth-child(17){
  1306. top: 134rpx;
  1307. left:460rpx;
  1308. }
  1309. .map-min-img:nth-child(18){
  1310. top: 134rpx;
  1311. left:540rpx;
  1312. }
  1313. }
  1314. .map-3{
  1315. background:url(../images/kuangdaMap/map3.png);
  1316. }
  1317. .evacuation-map-big-box{
  1318. height:293rpx;
  1319. width:644rpx;
  1320. // background:url(../images/Version2.3/icon_bj_syspmtcy_jinan.png);
  1321. background-size 100%
  1322. margin:28rpx 13rpx ;
  1323. position relative
  1324. .evacuation-map-min-for-box{
  1325. overflow: hidden;
  1326. display: inline-block;
  1327. line-height:70rpx;
  1328. text-align: center;
  1329. font-size:14rpx;
  1330. }
  1331. .evacuation-map-min-for-box-color{
  1332. background: rgba(0,189,255,0.3);
  1333. }
  1334. .map-min-img{
  1335. position: absolute;
  1336. width:34rpx;
  1337. height:22rpx;
  1338. }
  1339. }
  1340. }
  1341. }
  1342. .video-max-box{
  1343. width: 710rpx;
  1344. height: 780rpx;
  1345. overflow-y scroll;
  1346. background: #FFFFFF;
  1347. border-radius: 20rpx;
  1348. padding :22rpx 30rpx 30rpx;
  1349. box-sizing :border-box;
  1350. margin-top :20rpx;
  1351. margin-bottom:120rpx;
  1352. video{
  1353. width:645rpx;
  1354. height:355rpx;
  1355. }
  1356. }
  1357. .bottom-button-box{
  1358. position absolute;
  1359. bottom:20rpx;
  1360. display flex;
  1361. width:670rpx;
  1362. margin:20rpx;
  1363. view{
  1364. width:335rpx;
  1365. height:100rpx;
  1366. line-height:100rpx;
  1367. text-align center;
  1368. color:#fff;
  1369. font-size:28rpx;
  1370. }
  1371. view:nth-child(1){
  1372. border-top-left-radius :50rpx;
  1373. border-bottom-left-radius :50rpx;
  1374. background:#FF9C00;
  1375. }
  1376. view:nth-child(2){
  1377. border-top-right-radius :50rpx;
  1378. border-bottom-right-radius :50rpx;
  1379. background:#0183FA;
  1380. }
  1381. }
  1382. }
  1383. .live-button{
  1384. width:650rpx;
  1385. height:100rpx;
  1386. line-height:100rpx;
  1387. text-align center;
  1388. font-size:28rpx;
  1389. margin:50rpx auto 0;
  1390. border-radius:20rpx;
  1391. }
  1392. .live-color-a{
  1393. color:#fff;
  1394. background:#FF8686;
  1395. }
  1396. .live-color-b{
  1397. color:#fff;
  1398. background:#25C95B;
  1399. }
  1400. .shade-max-big-box{
  1401. height:100%;
  1402. width:100%;
  1403. position fixed
  1404. display flex;
  1405. flex-direction column
  1406. z-index:10;
  1407. background :rgba(0,0,0,0.2);
  1408. .null-box{
  1409. flex:1;
  1410. }
  1411. /* 语音广播-执行疏散 */
  1412. .broadcast{
  1413. width: 100%;
  1414. // height: 532rpx;
  1415. background: #FFFFFF;
  1416. border-top-left-radius :20rpx;
  1417. border-top-right-radius :20rpx
  1418. padding :22rpx 30rpx 30rpx;
  1419. box-sizing :border-box;
  1420. margin-top:20rpx;
  1421. .broadcast_t{
  1422. font-size: 30rpx;
  1423. font-family: PingFang SC;
  1424. font-weight: 500;
  1425. color: #333333;
  1426. line-height: 30rpx;
  1427. >label{
  1428. font-size: 24rpx;
  1429. font-family: PingFang SC;
  1430. font-weight: 500;
  1431. color: #999999;
  1432. line-height: 30rpx;
  1433. margin-left :16rpx;
  1434. }
  1435. }
  1436. .trumpet-max-box{
  1437. display :flex;
  1438. justify-content :flex-start;
  1439. margin-top :22rpx;
  1440. flex-wrap: wrap;
  1441. .trumpet-for-box{
  1442. display:inline-block;
  1443. width:200rpx;
  1444. height:60rpx;
  1445. line-height:60rpx;
  1446. font-size:24rpx;
  1447. text-align center;
  1448. cursor: pointer;
  1449. overflow: hidden;
  1450. border: 1rpx solid #E0E0E0;
  1451. border-radius:10rpx;
  1452. color: #E0E0E0;
  1453. display :flex;
  1454. justify-content :center;
  1455. margin-right :20rpx;
  1456. margin-bottom: 10rpx;
  1457. >img{
  1458. width:36rpx;
  1459. height:34rpx;
  1460. margin :12rpx 20rpx 0 25rpx;
  1461. }
  1462. }
  1463. .trumpet-color-a{
  1464. border:1px solid #0183FA;
  1465. color:#0183FA;
  1466. }
  1467. .trumpet-color-b{
  1468. border:1px solid #CCCCCC;
  1469. color:#999;
  1470. }
  1471. }
  1472. .broadcast_m{
  1473. width :100%;
  1474. .broadcast_m_t{
  1475. width: 142rpx;
  1476. height: 142rpx;
  1477. margin :30rpx 0 0 258rpx;
  1478. position :relative;
  1479. font-size: 24rpx;
  1480. font-family: PingFang SC;
  1481. font-weight: 500;
  1482. line-height: 170rpx;
  1483. text-align center
  1484. >img{
  1485. width: 142rpx;
  1486. height: 142rpx;
  1487. position :absolute;
  1488. }
  1489. >label{
  1490. width :100%;
  1491. font-size: 24rpx;
  1492. font-family: PingFang SC;
  1493. font-weight: 500;
  1494. color: #0183FA;
  1495. line-height: 24rpx;
  1496. display :inline-block;
  1497. text-align :center;
  1498. position :absolute;
  1499. top:76rpx;
  1500. }
  1501. /* 按下 */
  1502. .press_color{
  1503. color: #FFFFFF;
  1504. }
  1505. /* 松开 */
  1506. .slip_color{
  1507. color: #0183FA;
  1508. }
  1509. }
  1510. .broadcast_m_t_back_a{
  1511. background:url(@/images/icon_sskz_skfs.png);
  1512. background-size 100%
  1513. color: #FFFFFF;
  1514. }
  1515. .broadcast_m_t_back_b{
  1516. background:url(@/images/icon_sskz_azsh.png);
  1517. background-size 100%
  1518. color: #0183FA;
  1519. }
  1520. .broadcast_m_b{
  1521. font-size: 24rpx;
  1522. font-family: PingFang SC;
  1523. font-weight: 500;
  1524. color: #999999;
  1525. line-height: 24rpx;
  1526. text-align center;
  1527. margin-top :14rpx;
  1528. }
  1529. }
  1530. /* 疏散按钮 */
  1531. .evacuation-button-box{
  1532. width:650rpx;
  1533. height:100rpx;
  1534. background #0183FA
  1535. color:#fff;
  1536. text-align center;
  1537. line-height:100rpx;
  1538. font-size:28rpx;
  1539. margin:88rpx auto 0;
  1540. border-radius:20rpx;
  1541. }
  1542. }
  1543. }
  1544. }
  1545. .setUpEvacuation-bottom-button{
  1546. width:650rpx;
  1547. height:100rpx;
  1548. background #0183FA
  1549. color:#fff;
  1550. text-align center;
  1551. line-height:100rpx;
  1552. font-size:28rpx;
  1553. margin:50rpx auto;
  1554. border-radius:20rpx;
  1555. }
  1556. }
  1557. </style>