emergencyEvacuationBig.vue 36 KB

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