emergencyEvacuationBig.vue 69 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134113511361137113811391140114111421143114411451146114711481149115011511152115311541155115611571158115911601161116211631164116511661167116811691170117111721173117411751176117711781179118011811182118311841185118611871188118911901191119211931194119511961197119811991200120112021203120412051206120712081209121012111212121312141215121612171218121912201221122212231224122512261227122812291230123112321233123412351236123712381239124012411242124312441245124612471248124912501251125212531254125512561257125812591260126112621263126412651266126712681269127012711272127312741275127612771278127912801281128212831284128512861287128812891290129112921293129412951296129712981299130013011302130313041305130613071308130913101311131213131314131513161317131813191320132113221323132413251326132713281329133013311332133313341335133613371338133913401341134213431344134513461347134813491350135113521353135413551356135713581359136013611362136313641365136613671368136913701371137213731374137513761377137813791380138113821383138413851386138713881389139013911392139313941395139613971398139914001401140214031404140514061407140814091410141114121413141414151416141714181419142014211422142314241425142614271428142914301431143214331434143514361437143814391440144114421443144414451446144714481449145014511452145314541455145614571458145914601461146214631464146514661467146814691470147114721473147414751476147714781479148014811482148314841485148614871488148914901491149214931494149514961497149814991500150115021503150415051506150715081509151015111512151315141515151615171518151915201521152215231524152515261527152815291530153115321533153415351536153715381539154015411542154315441545154615471548154915501551155215531554155515561557155815591560156115621563156415651566156715681569157015711572157315741575157615771578157915801581158215831584158515861587158815891590159115921593159415951596159715981599160016011602160316041605160616071608160916101611161216131614161516161617161816191620162116221623162416251626162716281629163016311632163316341635163616371638163916401641164216431644164516461647164816491650165116521653165416551656165716581659166016611662166316641665166616671668166916701671167216731674167516761677167816791680168116821683168416851686168716881689169016911692169316941695169616971698169917001701170217031704170517061707170817091710171117121713171417151716171717181719172017211722172317241725172617271728172917301731173217331734173517361737173817391740174117421743174417451746174717481749175017511752175317541755175617571758175917601761176217631764176517661767176817691770177117721773177417751776177717781779178017811782178317841785178617871788178917901791179217931794179517961797179817991800180118021803180418051806180718081809181018111812181318141815181618171818181918201821182218231824182518261827182818291830183118321833183418351836183718381839184018411842184318441845184618471848184918501851185218531854185518561857185818591860186118621863186418651866186718681869187018711872187318741875187618771878187918801881188218831884188518861887188818891890189118921893189418951896189718981899190019011902190319041905190619071908190919101911191219131914191519161917191819191920192119221923192419251926192719281929193019311932193319341935193619371938193919401941194219431944194519461947194819491950195119521953195419551956195719581959196019611962196319641965196619671968196919701971197219731974197519761977197819791980198119821983198419851986198719881989199019911992199319941995199619971998199920002001200220032004200520062007200820092010201120122013201420152016201720182019202020212022202320242025202620272028202920302031203220332034203520362037203820392040204120422043204420452046204720482049205020512052205320542055205620572058205920602061206220632064206520662067206820692070207120722073207420752076207720782079208020812082208320842085208620872088208920902091209220932094209520962097209820992100210121022103210421052106210721082109211021112112211321142115211621172118211921202121212221232124212521262127212821292130213121322133213421352136213721382139214021412142214321442145214621472148214921502151215221532154215521562157215821592160216121622163216421652166216721682169217021712172217321742175217621772178217921802181218221832184218521862187218821892190219121922193219421952196219721982199220022012202220322042205220622072208220922102211221222132214221522162217221822192220222122222223222422252226222722282229223022312232223322342235223622372238223922402241224222432244224522462247224822492250225122522253225422552256225722582259226022612262226322642265226622672268226922702271227222732274227522762277227822792280228122822283228422852286228722882289229022912292229322942295229622972298229923002301230223032304230523062307230823092310231123122313
  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" :range-key="'name'" :value="id" :range="buildingList">
  12. <view class="picker-min-box">
  13. <view>{{buildingName?buildingName:'请选择学院楼栋'}}</view>
  14. <img src="@/images/basicsModules/icon_06.png">
  15. </view>
  16. </picker>
  17. </view>
  18. <view class="picker-max-box">
  19. <view class="picker-title-box">
  20. <view></view>
  21. <view>楼层</view>
  22. </view>
  23. <picker @change="floorChange" :disabled="!buildingId" :range-key="'name'" :value="id"
  24. :range="floorList">
  25. <view class="picker-min-box">
  26. <view>{{floorName?floorName:'请选择楼层'}}</view>
  27. <img src="@/images/basicsModules/icon_06.png">
  28. </view>
  29. </picker>
  30. </view>
  31. <view class="picker-max-box">
  32. <view class="picker-title-box">
  33. <view></view>
  34. <view>实验室</view>
  35. </view>
  36. <picker @change="fjListChange" :disabled="!floorId" :range-key="'subName'" :value="subId"
  37. :range="fjListArray">
  38. <view class="picker-min-box">
  39. <view>{{subName?subName:'请选择实验室'}}</view>
  40. <img src="@/images/basicsModules/icon_06.png">
  41. </view>
  42. </picker>
  43. </view>
  44. </view>
  45. <view class="setUpEvacuation-bottom-button" @click="confirmBtn">确认</view>
  46. </view>
  47. <view class="implementEvacuation" v-if="pageType == 2">
  48. <view class="evacuation-max-box">
  49. <!-- 头部 -->
  50. <view class="evacuation-title-box">
  51. <view class="evacuation-title-left">
  52. <view class="evacuation-title-name-box">{{checkSubName}}</view>
  53. <view class="site"><img src="@/images/basicsModules/icon_14.png">{{address}}</view>
  54. </view>
  55. <view class="evacuation-title-right" @click="backButton()">选择房间</view>
  56. </view>
  57. <!-- 地图部分 -->
  58. <view class="roadmap">
  59. <view class="roadmap_t">
  60. <view class="monito_li_r_l"></view>
  61. <view class="monito_li_r_r_button" @click="goAllPage">全屏</view>
  62. </view>
  63. <view class="evacuation-map-box">
  64. <view class="emergencyEvacuationBigFullScreen-page" v-if="mapType"
  65. :style="'width:'+mapWidth+'rpx;height:'+mapHeight+'rpx;transform: scale('+zoomData+');margin-top:-'+mapHeight/2+'rpx;margin-left:-'+mapWidth/2+'rpx;'">
  66. <view class="map-max-box" :style="'width:'+mapWidth+'rpx;height:'+mapHeight+'rpx;'">
  67. <view class="map-max-for-box for-map-box" v-if="item.type == 1"
  68. v-for="(item,index) in mapList":key="index"
  69. :class="!item.policeType && checkSubId ==item.subId ? 'room-type-one':(
  70. item.policeType && checkSubId !=item.subId ? 'room-type-two':(
  71. item.policeType && checkSubId ==item.subId ? 'room-type-three':(
  72. !item.loginAdmin ? 'room-type-noe':'')))"
  73. :style="'top:'+item.y+'rpx;left:'+item.x+'rpx;width:'+(item.w-4)+'rpx;height:'+(item.h-4)+'rpx;'">
  74. <view class="map-max-for-min-box">
  75. <view class="map-for-name-p" :style="'margin-top:'+((item.h/2)-20)+'rpx;'">
  76. {{item.roomType == '-99'?item.roomName:item.subName}}</view>
  77. <view class="map-for-num-p">({{item.roomNum}})</view>
  78. <view class="position-box" src="@/images/evacuation3_2/icon_sysbjt_m.png"
  79. :class="minItem.toward=='top'?'center-move-door-p-t':(minItem.toward=='bottom'?'center-move-door-p-b':(minItem.toward=='left'?'center-move-door-p-l':(minItem.toward=='right'?'center-move-door-p-r':'')))"
  80. v-for="(minItem,minIndex) in item.doorList" :key="minIndex"
  81. :style="'top:'+minItem.y+'rpx;left:'+minItem.x+'rpx;width:'+minItem.w+'rpx;height:'+minItem.h+'rpx;'">
  82. </view>
  83. </view>
  84. </view>
  85. <view class="map-max-for-box for-map-box-one" v-if="item.type == 2" v-for="(item,index) in mapList"
  86. :key="index" :style="'top:'+item.y+'rpx;left:'+item.x+'rpx;width:'+item.w+'rpx;height:'+item.h+'rpx;'">
  87. <view class="map-max-for-min-box">
  88. <view class="position-box"
  89. :class="minItem.state=='1'&&minItem.openType?'lightTopOn':(minItem.state=='1'&&!minItem.openType?'lightTopOff':
  90. (minItem.state=='2'&&minItem.openType?'lightBottomOn':(minItem.state=='2'&&!minItem.openType?'lightBottomOff':
  91. (minItem.state=='3'&&minItem.openType?'lightLeftOn':(minItem.state=='3'&&!minItem.openType?'lightLeftOff':
  92. (minItem.state=='4'&&minItem.openType?'lightRightOn':(minItem.state=='4'&&!minItem.openType?'lightRightOff':'')))))))"
  93. v-for="(minItem,minIndex) in item.lightList" :key="minIndex"
  94. :style="'top:'+minItem.y+'rpx;left:'+minItem.x+'rpx;width:'+minItem.w+'rpx;height:'+minItem.h+'rpx;'">
  95. </view>
  96. </view>
  97. </view>
  98. <view class="map-max-for-box for-map-box-two" v-if="item.type == 3" v-for="(item,index) in mapList"
  99. :key="index" :class="item.roomCheckType?'for-map-box-two-check':''"
  100. :style="'top:'+item.y+'rpx;left:'+item.x+'rpx;width:'+item.w+'rpx;height:'+item.h+'rpx;'">
  101. </view>
  102. </view>
  103. </view>
  104. </view>
  105. </view>
  106. <!-- 一键灭火 -->
  107. <view class="outfire" v-if='fireType'>
  108. <view class="outfire_li" v-if="!fireListType">
  109. <img src="@/images/basicsModules/icon_sy_wt.png">
  110. <text style="color: #FF7B1A;">设备已离线,请及时处理。</text>
  111. </view>
  112. <view class="outfire_li" v-if="fireStartType">
  113. <img src="@/images/basicsModules/icon_sy_mhwc.png">
  114. <text style="color: #FF2333;">灭火中,灭火程序将于<text>{{conductCountdown}}</text>秒后结束</text>
  115. </view>
  116. <view class="outfire_li" v-if="outfireEnd">
  117. <img src="@/images/basicsModules/icon_sy_mhwc.png">
  118. <text style="color: #FF2333;" class="finish">自动灭火完成,请确保在关闭灭火一体机电源后补充灭火耗材,耗材补充完毕需要打开电源并点击一体机上的复位按钮</text>
  119. </view>
  120. <template v-if="fireListType && !fireStartType && !outfireEnd">
  121. <view class="outfire_li">
  122. <img v-if='!outfireData.smoke' src="@/images/basicsModules/icon_yw_zc.png">
  123. <img v-if='outfireData.smoke' src="@/images/basicsModules/icon_yw_yc.png">
  124. <text
  125. :class="outfireData.smoke?'abnormal':'normal'">{{outfireData.smoke?'有烟雾':'无烟雾'}}</text>
  126. </view>
  127. <view class="outfire_li">
  128. <img v-if='!outfireData.temperature' src="@/images/basicsModules/icon_wd_zc.png">
  129. <img v-if='outfireData.temperature' src="@/images/basicsModules/icon_wd_yc.png">
  130. <text
  131. :class="outfireData.temperature?'abnormal':'normal'">{{outfireData.temperature?'温度异常':'温度正常'}}</text>
  132. </view>
  133. <view class="outfire_li">
  134. <img v-if='!outfireData.fire' src="@/images/basicsModules/icon_hy_zc.png">
  135. <img v-if='outfireData.fire' src="@/images/basicsModules/icon_hy_yc.png">
  136. <text :class="outfireData.fire?'abnormal':'normal'">{{outfireData.fire?'发现火焰':'无火焰'}}</text>
  137. </view>
  138. </template>
  139. <view v-if="fireListType && !fireStartType && !outfireEnd"
  140. :class="fireListType?'outfire_yes_btn':'outfire_no_btn'" @click="outfireFun()">一键灭火
  141. </view>
  142. </view>
  143. <!-- 视频部分 -->
  144. <view class="video-max-box" v-if="urlList[0]">
  145. <video v-for="(item,index) in urlList" :key="index" ref="videoRef" :src="item.url"
  146. :poster="videoCover" :custom-cache='false' :autoplay="true" :controls="true"
  147. :enable-danmu="false" :muted="true" :show-fullscreen-btn="true" :show-center-play-btn="false"
  148. :show-play-btn="false" @error="videoErrorCallback">
  149. </video>
  150. </view>
  151. <view class="bottom-button-box">
  152. <view class="voice" @click="shadeTypeClick()">语音广播</view>
  153. <view class="plan" v-if="planStatus" @click="closePlan()">结束预案</view>
  154. <view class="evacuate" @click="evacuationButton(1)" v-if="isEvacuate">执行疏散</view>
  155. <view class="evacuate" @click="evacuationButton(2)" v-if="!isEvacuate">结束疏散</view>
  156. </view>
  157. </view>
  158. <!-- 语音广播-->
  159. <view class="shade-max-big-box" v-if="broadcastType">
  160. <view class="null-box" @click="shadeTypeClick()"></view>
  161. <!-- 语音广播-执行疏散 -->
  162. <view class="broadcast">
  163. <view class="broadcast_t">语音广播<label>选择喇叭位置</label></view>
  164. <!-- 按钮部分 -->
  165. <view class="trumpet-max-box">
  166. <view @click="trumpetClick(index)" class="trumpet-for-box"
  167. :class="item.type?'trumpet-color-a':'trumpet-color-b'" v-for="(item,index) in trumpetList"
  168. :key="index">
  169. <img src="@/images/basicsModules/icon_sskz_zc.png" v-if="!item.type">
  170. <img src="@/images/basicsModules/icon_sskz_xz.png" v-if="item.type">
  171. {{item.name}}
  172. </view>
  173. </view>
  174. <view class="broadcast_m">
  175. <view class="broadcast_m_t" :class="liveType?'broadcast_m_t_back_a':'broadcast_m_t_back_b'"
  176. @longpress.stop="recordButton" @touchmove.stop="cancelButton" @touchend.stop="sendButton">
  177. {{liveType?'松开发送':'按住说话'}}
  178. </view>
  179. <view class="broadcast_m_b" v-if="!liveType">按住说话,录入广播内容</view>
  180. <view class="broadcast_m_b" v-if="liveType">松开发送,向上滑动取消发送</view>
  181. </view>
  182. </view>
  183. </view>
  184. <!-- 一键灭火遮罩-->
  185. <view class="shade-outfire" v-if="dialogVisible">
  186. <view class="null-box" @click="dialogOutfire()"></view>
  187. <view class="shade-outfire-n">
  188. <img class="shade-outfire-n-t" src="@/images/basicsModules/icon_mh.png" />
  189. <view class="shade-outfire-n-m">一键灭火启动中,倒计时<text>{{countdown}}</text>秒</view>
  190. <view class="shade-outfire-n-b" @click="cancelOutfire()">放弃一键灭火</view>
  191. </view>
  192. </view>
  193. </view>
  194. <view></view>
  195. </view>
  196. </template>
  197. <script>
  198. import $mqtt from '@/utils/mqtt.min.js';
  199. import {
  200. config
  201. } from '@/api/request/config.js'
  202. import {
  203. lablayout,
  204. evacuate,
  205. closure,
  206. lineEvacuate,
  207. getRedis,
  208. getDeviceList,
  209. textParseUrlIps,
  210. laboratoryInfo,
  211. getCameraByFloor,
  212. lineEvacuateTow,
  213. treeselectByUser,
  214. getBuilding,
  215. getDeviceListBySub,
  216. GetStartList,
  217. firedeviceStatus,
  218. firedeviceStatusTiming,
  219. firedeviceStart,
  220. firedeviceCancel,
  221. closeRiskPlan
  222. } from '@/api/apiDemo/index.js'
  223. import {
  224. getBuildOrFloorList,
  225. getFloorData,
  226. getRedisEvacuation,
  227. openLight,
  228. closeLight,
  229. executeEvacuation,
  230. endEvacuation,
  231. selectTriggerInfo,
  232. riskPlanId
  233. } from '@/api/apiDemo/index.js'
  234. export default {
  235. data() {
  236. return {
  237. videoCover: uni.getStorageSync('videoCover'),
  238. //页面状态
  239. pageType: "1",
  240. deptIndex: 0,
  241. //院系楼栋数据
  242. buildingList: [],
  243. buildingName: "",
  244. buildingId: "",
  245. //楼层数据
  246. floorList: [],
  247. floorName: "",
  248. floorId: "",
  249. //实验室
  250. fjListArray: [],
  251. //疏散方向
  252. buttonArray: [{
  253. name: "向左疏散",
  254. id: "1"
  255. },
  256. {
  257. name: "向右疏散",
  258. id: "2"
  259. },
  260. {
  261. name: "两侧疏散",
  262. id: "0"
  263. },
  264. ],
  265. buttonArrayIndex: "2",
  266. //视频数据
  267. urlList: [],
  268. //布局数据
  269. fjList: [],
  270. lightList: [{
  271. id: "5",
  272. type: false,
  273. },
  274. {
  275. id: "2",
  276. type: false,
  277. },
  278. {
  279. id: "3",
  280. type: false,
  281. },
  282. {
  283. id: "4",
  284. type: false,
  285. },
  286. {
  287. id: "1",
  288. type: false,
  289. },
  290. {
  291. id: "6",
  292. type: false,
  293. },
  294. ],
  295. //接收参数
  296. subId: "",
  297. subName: "",
  298. title: "",
  299. type: "",
  300. //喇叭数据
  301. trumpetList: [],
  302. //广播相关
  303. liveType: false,
  304. sendLock: true, //发送锁,当为true时上锁,false时解锁发送
  305. recorderManager: wx.getRecorderManager(),
  306. isEvacuate: true, //疏散按钮控制,当为true时候执行疏散
  307. //滑动记录
  308. startPoint: {},
  309. //摄像头信息
  310. deptId: '',
  311. itemData: {
  312. hardwareNUM: '',
  313. name: '',
  314. },
  315. broadcastType: false,
  316. //选中楼栋
  317. checkSubName:"",
  318. address: "",
  319. videoHardwareNUM: [], //实验室和楼道摄像头编码
  320. countdown: '', //倒计时
  321. timer2: null, //倒计时
  322. dialogVisible: false, //一键灭火弹出层
  323. conductCountdown: '',
  324. timer3: null, //倒计时
  325. outfireEnd: false, //灭火结束状态
  326. //新布局地图相关数据
  327. zoomData: null,
  328. mapType:false,
  329. mapList: [],
  330. mapWidth: null, //40边框距离
  331. mapHeight: null, //40边框距离
  332. //新MQTT
  333. floorClient: {},
  334. evacuationTopic: "lab/newexit/line", //疏散
  335. //灭火设备MQTT相关
  336. fireClient:{},
  337. fireTopic:"lab/fireDevice/Warn/",//传感器状态异常
  338. fireOnlineTopic:"lab/fireDevice/isOnline/",//设备是否在线
  339. firePerformTopic:"lab/fireDevice/executing/",//是否正在执行灭火操作
  340. fireType:false,//有无火焰设备状态
  341. fireListType:false,//灭火设备在线离线
  342. fireCode:null,// //灭火设备code
  343. fireStartType:false, //灭火启动状态
  344. outfireData: {}, //一键灭火
  345. groupId:null,
  346. planStatus:false,
  347. }
  348. },
  349. onLoad(option) {
  350. if(option.item){
  351. let obj = JSON.parse(decodeURIComponent(option.item));
  352. this.$set(this,'buildingId',obj.buildId);
  353. this.$set(this,'deptId',obj.buildId);
  354. this.$set(this,'floorId',obj.floorId);
  355. this.$set(this,'subId',obj.subId);
  356. this.$set(this.itemData,'subjectId',obj.subId);
  357. this.$set(this,'groupId',obj.groupId);
  358. this.$set(this,'pageType',2);
  359. this.confirmBtn();
  360. this.riskPlanId(obj.groupId);
  361. }
  362. //一键灭火正式使用需要注销
  363. // this.itemData.subjectId=85
  364. // this.firedeviceStatus();
  365. },
  366. onShow() {
  367. this.treeselectByUser();
  368. if(this.floorId&&this.subId){
  369. this.getBuildingData();
  370. }
  371. },
  372. onUnload() {
  373. },
  374. methods: {
  375. //返回按钮
  376. backButton(){
  377. let self = this;
  378. this.offMQTT();
  379. // this.$set(this,'buildingName',null);
  380. // this.$set(this,'buildingId',null);
  381. // this.$set(this,'floorName',null);
  382. // this.$set(this,'floorId',null);
  383. // this.$set(this,'deptId',null);
  384. // this.$set(this,'subId',null);
  385. // this.$set(this,'subName',null);
  386. // console.log('this.$refs.videoRef',this.$refs.videoRef)
  387. // console.log('this.$refs.videoRef',this.$refs.videoRef.getTotalList())
  388. // for(let i=0;i<self.urlList.length;i++){
  389. // let id = self.urlList[i].id;
  390. // console.log(self.$refs.id);
  391. // console.log('urlList',this.urlList[i]);
  392. // let query = wx.createSelectorQuery();//创建节点查询器 query
  393. // query.select('#440102004920000000010014')
  394. // let a = query.select('#440102004920000000010014');
  395. // console.log('query',query.select('#440102004920000000010014'));
  396. // console.log('wx.createSelectorQuery',wx.createSelectorQuery('440102004920000000010014'));
  397. // let videoElement1 = document.getElementById('440102004920000000010014');
  398. // console.log('videoElement1',videoElement1);
  399. // let videoElement = document.getElementById(self.urlList[i].id);
  400. // console.log('videoElement',videoElement);
  401. // videoElement.pause();
  402. // videoElement.removeAttribute('src'); // empty source
  403. // videoElement.load();
  404. // // console.log('关闭',self.urlList[i].videoContext)
  405. // // self.urlList[i].videoContext.stop();
  406. // }
  407. // return
  408. this.$set(this,'pageType',1);
  409. this.$set(this,'urlList',[]);
  410. this.treeselectByUser();
  411. },
  412. //结束预案
  413. closePlan(){
  414. let self = this;
  415. uni.showModal({
  416. content: '传感器数据监测异常,确定要强制结束预案?关闭报警后,3分钟内系统不再触发预案报警,请核实确认后再执行此操作?',
  417. cancelColor:"#999",
  418. confirmColor:"#0183FA",
  419. success: function (res) {
  420. if (res.confirm) {
  421. self.closeRiskPlan();
  422. } else if (res.cancel) {
  423. }
  424. }
  425. });
  426. },
  427. async closeRiskPlan(){
  428. const {data} = await closeRiskPlan({id:this.groupId});
  429. if(data.code == 200){
  430. this.planStatus=false;
  431. uni.showToast({
  432. title: '操作成功',
  433. icon:"none",
  434. mask:true,
  435. duration: 2000
  436. });
  437. }
  438. },
  439. //全屏疏散页面
  440. goAllPage() {
  441. let obj = {
  442. buildingId:this.buildingId,
  443. floorId:this.floorId,
  444. type:1,
  445. }
  446. uni.navigateTo({
  447. url: '/pages_manage/emergencyEvacuationBigFullScreen?item='+encodeURIComponent(JSON.stringify(obj)),
  448. });
  449. },
  450. //一键灭火-查询设备状态
  451. async firedeviceStatus(type) {
  452. let _this = this;
  453. const {data} = await firedeviceStatus(_this.subId)
  454. if (data.code == 200) {
  455. if(data.data.isexist){//是否有灭火设备
  456. this.$set(this,'fireType',data.data.isexist);
  457. if(data.data.online){
  458. _this.outfireData = data.data
  459. _this.$set(this,'fireListType',data.data.online);
  460. _this.$set(this,'fireCode',data.data.fireDevice.deviceCode);
  461. if(type != 'mqtt'){
  462. _this.offMQTT('on');
  463. }
  464. if(data.data.temperature && data.data.smoke){
  465. if(!this.fireStartType){
  466. this.$set(this,'fireStartType',true);
  467. this.sendCode2(data.data.timeDifference);
  468. }
  469. }
  470. if(data.data.timeDifference != -1){
  471. if(!this.fireStartType){
  472. this.$set(this,'fireStartType',true);
  473. this.sendCode2(data.data.timeDifference);
  474. }
  475. }
  476. }else{
  477. this.$set(this,'fireListType',false);
  478. this.$set(this,'fireCode',null);
  479. if(type != 'mqtt'){
  480. _this.offMQTT('on');
  481. }
  482. }
  483. }else{
  484. this.$set(this,'fireType',false);
  485. if(type != 'mqtt'){
  486. _this.offMQTT('on');
  487. }
  488. }
  489. }
  490. },
  491. //启动灭火设备
  492. async firedeviceStart() {
  493. let _this = this;
  494. let obj={
  495. subjectId:this.subId,
  496. deviceCode:_this.fireCode
  497. }
  498. const {data} = await firedeviceStart(obj)
  499. if (data.code == 200) {
  500. if (data.data.online) {
  501. _this.dialogVisible = true;
  502. _this.$set(this,'fireListType',data.data.online);
  503. _this.countdown = data.data.waitTime;//灭火倒计时
  504. _this.sendCode() //倒计时
  505. } else {
  506. wx.showToast({
  507. title: '一键灭火启动失败!',
  508. icon: "none",
  509. duration: 6000
  510. });
  511. }
  512. }
  513. },
  514. //取消灭火设备
  515. async firedeviceCancel() {
  516. let _this = this;
  517. const {data} = await firedeviceCancel(_this.itemData.subjectId)
  518. if (data.code == 200) {
  519. wx.showToast({
  520. title: '放弃一键灭火!',
  521. icon: "none",
  522. duration: 2000
  523. });
  524. }
  525. },
  526. //一键灭火按钮
  527. outfireFun() {
  528. let _this = this;
  529. uni.showModal({
  530. title: "是否确认执行一键灭火?",
  531. content: '该操作存在风险,请您务必确认实验室内人员已安全撤离?',
  532. cancelColor: "#999",
  533. confirmColor: "#0183FA",
  534. success: function(res) {
  535. if (res.confirm) {
  536. _this.firedeviceStart(); //启动灭火设备
  537. } else if (res.cancel) {
  538. }
  539. }
  540. });
  541. },
  542. //一键灭火弹出层关闭
  543. dialogOutfire() {
  544. this.dialogVisible = !this.dialogVisible
  545. this.clearTimer(); //关闭定时器
  546. },
  547. //取消一键灭火
  548. cancelOutfire() {
  549. this.dialogVisible = false;
  550. this.clearTimer(); //关闭定时器
  551. this.firedeviceCancel()
  552. },
  553. //倒计时
  554. sendCode() {
  555. let _this = this;
  556. _this.loading(); //启动定时器
  557. _this.timer2 = setInterval(() => {
  558. //创建定时器
  559. if (_this.countdown === 1) {
  560. _this.clearTimer(); //关闭定时器
  561. } else {
  562. _this.loading();
  563. }
  564. }, 1000);
  565. },
  566. loading() {
  567. //启动定时器
  568. this.countdown--; //定时器减1
  569. },
  570. clearTimer() {
  571. //清除定时器
  572. clearInterval(this.timer2);
  573. this.timer2 = null;
  574. this.dialogVisible = false;
  575. },
  576. //进行中倒计时
  577. sendCode2(time) {
  578. let _this = this;
  579. _this.conductCountdown=time
  580. _this.loading2(); //启动定时器
  581. _this.timer3 = setInterval(() => {
  582. //创建定时器
  583. if (_this.conductCountdown <= 1) {
  584. _this.clearTimer2(); //关闭定时器
  585. _this.outfireEnd = true; //灭火倒计时结束
  586. _this.fireStartType = false; //灭火状态
  587. } else {
  588. _this.loading2();
  589. }
  590. }, 1000);
  591. },
  592. loading2() {
  593. //启动定时器
  594. this.conductCountdown--; //定时器减1
  595. },
  596. clearTimer2() {
  597. //清除定时器
  598. clearInterval(this.timer3);
  599. this.timer3 = null;
  600. },
  601. //获取楼栋数据
  602. async treeselectByUser(option) {
  603. const { data } = await getBuildOrFloorList({type:2,parentId:''})
  604. this.$set(this, 'buildingList', data.data);
  605. // this.$set(this, 'buildingName', "");
  606. // this.$set(this, 'buildingId', "");
  607. // this.$set(this, 'deptId', "");
  608. // this.$set(this, 'floorList', []);
  609. // this.$set(this, 'floorName', "");
  610. // this.$set(this, 'floorId', "");
  611. // this.$set(this, 'fjListArray', []);
  612. // this.$set(this, 'subName', "");
  613. // this.$set(this, 'subId', "");
  614. this.selectTriggerInfo(1);
  615. },
  616. //获取楼层数据
  617. async getBuilding(buildingId) {
  618. const { data } = await getBuildOrFloorList({type:3,parentId:buildingId})
  619. this.$set(this, 'floorList', data.data);
  620. this.$set(this, 'floorName', "");
  621. this.$set(this, 'floorId', "");
  622. this.$set(this, 'fjListArray', []);
  623. this.$set(this, 'subName', "");
  624. this.$set(this, 'subId', "");
  625. this.selectTriggerInfo(2);
  626. },
  627. //楼栋选中
  628. buildingChange(e) {
  629. this.$set(this, 'buildingName', this.buildingList[e.detail.value].name);
  630. this.$set(this, 'buildingId', this.buildingList[e.detail.value].id);
  631. this.$set(this, 'deptId', this.buildingList[e.detail.value].id);
  632. this.$set(this, 'floorId', null);
  633. this.$set(this, 'floorName', null);
  634. this.$set(this, 'subId', null);
  635. this.$set(this, 'subName', null);
  636. this.$set(this.itemData, 'subjectId', null);
  637. this.$set(this, 'floorList', []);
  638. this.$set(this, 'fjListArray', []);
  639. this.getBuilding(this.buildingList[e.detail.value].id);
  640. },
  641. //楼层选中
  642. floorChange(e) {
  643. this.$set(this, 'floorName', this.floorList[e.detail.value].name);
  644. this.$set(this, 'floorId', this.floorList[e.detail.value].id);
  645. this.$set(this, 'subId', null);
  646. this.$set(this, 'subName', null);
  647. this.$set(this.itemData, 'subjectId', null);
  648. this.$set(this, 'fjListArray', []);
  649. this.getBuildingData();
  650. },
  651. //实验室选择
  652. fjListChange(e) {
  653. this.$set(this, 'subName', this.fjListArray[e.detail.value].subName);
  654. this.$set(this, 'subId', this.fjListArray[e.detail.value].subId);
  655. this.$set(this.itemData, 'subjectId', this.fjListArray[e.detail.value].subId);
  656. },
  657. async riskPlanId(id){
  658. let obj = {
  659. groupId:id,
  660. ifCheck:1,
  661. };
  662. const {data} = await riskPlanId(obj);
  663. },
  664. //获取预案数据
  665. async selectTriggerInfo(type){
  666. let self = this;
  667. const {data} = await selectTriggerInfo();
  668. if(data.code == 200){
  669. if(type == 1){
  670. //标记楼栋
  671. for(let o=0;o<self.buildingList.length;o++){
  672. for(let i=0;i<data.data.length;i++){
  673. if(data.data[i].buildId == self.buildingList[o].id){
  674. self.buildingList[o].name.replace('(预案发生)')
  675. self.buildingList[o].name = '(预案发生) '+self.buildingList[o].name
  676. }
  677. }
  678. }
  679. }
  680. if(type == 2){
  681. //标记楼层
  682. for(let o=0;o<self.floorList.length;o++){
  683. for(let i=0;i<data.data.length;i++){
  684. if(data.data[i].floorId == self.floorList[o].id){
  685. self.floorList[o].name.replace('(预案发生)')
  686. self.floorList[o].name = '(预案发生) '+self.floorList[o].name
  687. }
  688. }
  689. }
  690. }
  691. if(type == 3){
  692. //标记实验室
  693. for(let o=0;o<self.fjListArray.length;o++){
  694. for(let i=0;i<data.data.length;i++){
  695. if(data.data[i].subId == self.fjListArray[o].subId){
  696. console.log('预案')
  697. console.log(data.data[i])
  698. self.planStatus=true;//如果有预案发生
  699. self.$set(this,'groupId',data.data[i].groupId)
  700. self.fjListArray[o].subName.replace('(预案发生)')
  701. self.fjListArray[o].subName = '(预案发生) '+self.fjListArray[o].subName
  702. }
  703. }
  704. }
  705. }
  706. }
  707. console.log('data.data',data.data);
  708. },
  709. getAppExitLine() {
  710. let list = [{
  711. type: "lab/exit/line"
  712. }, {
  713. type: "lab/fireDevice/Warn/"
  714. }];
  715. getApp().appMqttOn(1, list);
  716. },
  717. getAppOutfire() {
  718. // let list = [{type:"lab/fireDevice/Warn/"}]
  719. let list = [{
  720. type: "lab/function/data"
  721. }];
  722. getApp().appMqttOn(1, list);
  723. },
  724. shadeTypeClick() {
  725. this.broadcastType = !this.broadcastType
  726. },
  727. //获取实验室摄像头
  728. async laboratoryInfo() {
  729. let _this = this;
  730. const {
  731. data
  732. } = await laboratoryInfo(_this.itemData.subjectId);
  733. if (data.code == 200) {
  734. let list = data.data[0];
  735. list.labHardwareVOList.forEach(function(item) {
  736. if (item.hardwareTypeEnum.enumName == 'VIDEO_MONITOR') {
  737. console.log(item.hardwareNUM)
  738. _this.videoHardwareNUM.push(item.hardwareNUM)
  739. }
  740. })
  741. this.getCameraByFloor();
  742. }
  743. },
  744. //获取楼层摄像头列表
  745. async getCameraByFloor() {
  746. let _this = this;
  747. const {
  748. data
  749. } = await getCameraByFloor({
  750. floorId: this.floorId
  751. })
  752. if (data.code == 200) {
  753. if (data.data[0]) {
  754. let list = _this.videoHardwareNUM.concat(data.data)
  755. let qc = []
  756. for (var i = 0; i < list.length - 1; i++) {
  757. for (var j = i + 1; j < list.length; j++) {
  758. if (list[i] === list[j]) {
  759. list.splice(j, 1);
  760. j--;
  761. }
  762. }
  763. }
  764. this.GetStartList(list);
  765. } else {
  766. this.GetStartList(_this.videoHardwareNUM);
  767. }
  768. }
  769. },
  770. async GetStartList(rows) {
  771. console.log(rows)
  772. let self = this;
  773. if(!rows[0]){
  774. return
  775. }
  776. let list = "";
  777. for (let i = 0; i < rows.length; i++) {
  778. list = list + rows[i] + ","
  779. }
  780. let obj = {
  781. page: "1",
  782. count: "100",
  783. deviceIds: list,
  784. };
  785. const {
  786. data
  787. } = await GetStartList(obj)
  788. if (data.code == 200) {
  789. let list = [];
  790. for(let i=0;i<data.data.length;i++){
  791. let text = uni.getStorageSync('cameraUrl');
  792. let url = data.data[i].hls;
  793. url = url.split("rtp/");
  794. let newUrl = text + 'rtp/' + url[1];
  795. let obj = {
  796. name: "楼道监控" + (i + 1),
  797. id:data.data[i].deviceID,
  798. url: newUrl,
  799. videoContext:wx.createVideoContext(data.data[i].deviceID)
  800. }
  801. list.push(obj)
  802. }
  803. this.urlList = list;
  804. }
  805. },
  806. //点击选择喇叭
  807. trumpetClick(index) {
  808. this.trumpetList[index].type = !this.trumpetList[index].type
  809. // let _this = this;
  810. // if (_this.trumpetList[index].type == true) {
  811. // _this.trumpetList.forEach(function(item2) {
  812. // if (item2.deviceSn == _this.trumpetList[index].deviceSn) {
  813. // item2.type = true
  814. // } else {
  815. // item2.type = false
  816. // }
  817. // })
  818. // }
  819. },
  820. //录制
  821. recordButton(e) {
  822. console.log("按下")
  823. let self = this;
  824. let num = 0;
  825. for (let i = 0; i < self.trumpetList.length; i++) {
  826. if (self.trumpetList[i].type) {
  827. num++
  828. }
  829. }
  830. if (num == 0) {
  831. uni.showToast({
  832. title: '请选择喇叭',
  833. icon: "none",
  834. mask: true,
  835. duration: 2000
  836. });
  837. return
  838. }
  839. this.liveType = true;
  840. console.log('录制', e)
  841. this.startPoint = e.touches[0]; //记录长按时开始点信息,后面用于计算上划取消时手指滑动的距离。
  842. const options = {
  843. duration: 10000,
  844. sampleRate: 16000,
  845. numberOfChannels: 1,
  846. encodeBitRate: 48000,
  847. format: 'mp3',
  848. frameSize: 50
  849. }
  850. this.recorderManager.start(options); //开始录音
  851. this.recorderManager.onStart(() => {
  852. console.log('recorder start')
  853. })
  854. this.recorderManager.onError((res) => {
  855. console.log(res);
  856. })
  857. wx.showToast({
  858. title: "正在录音,上划取消发送",
  859. icon: "none",
  860. duration: 60000 //先定义个60秒,后面可以手动调用wx.hideToast()隐藏
  861. });
  862. this.sendLock = false; //长按时是不上锁的。
  863. },
  864. //取消
  865. cancelButton(e) {
  866. console.log("移动")
  867. let self = this;
  868. let num = 0;
  869. for (let i = 0; i < self.trumpetList.length; i++) {
  870. if (self.trumpetList[i].type) {
  871. num++
  872. }
  873. }
  874. if (num == 0) {
  875. return
  876. }
  877. this.liveType = false;
  878. console.log('取消', e)
  879. let moveLenght = e.touches[e.touches.length - 1].clientY - this.startPoint.clientY; //移动距离
  880. if (Math.abs(moveLenght) > 50) {
  881. wx.showToast({
  882. title: "松开手指,取消发送",
  883. icon: "none",
  884. duration: 60000
  885. });
  886. this.sendLock = true; //触发了上滑取消发送,上锁
  887. } else {
  888. wx.showToast({
  889. title: "正在录音,上划取消发送",
  890. icon: "none",
  891. duration: 60000
  892. });
  893. this.sendLock = false; //上划距离不足,依然可以发送,不上锁
  894. }
  895. },
  896. //发送
  897. sendButton(e) {
  898. console.log("松开")
  899. let self = this;
  900. let num = 0;
  901. for (let i = 0; i < self.trumpetList.length; i++) {
  902. if (self.trumpetList[i].type) {
  903. num++
  904. }
  905. }
  906. if (num == 0) {
  907. return
  908. }
  909. this.liveType = false;
  910. console.log('发送', e)
  911. wx.hideToast(); //结束录音、隐藏Toast提示框
  912. this.recorderManager.stop(); //结束录音
  913. this.recorderManager.onStop((res) => {
  914. if (!this.sendLock) {
  915. console.log('1', this.recorderManager)
  916. this.uploadImg(res.tempFilePath);
  917. }
  918. console.log('停止录音', res.tempFilePath)
  919. console.log("sendLock", this.sendLock);
  920. })
  921. },
  922. //上传MP3
  923. async uploadImg(tempFilePaths) {
  924. var self = this;
  925. uni.uploadFile({
  926. url: config.base_url + '/base/file/upload', //仅为示例,非真实的接口地址
  927. header: {
  928. 'Authorization': uni.getStorageSync('token')
  929. },
  930. filePath: tempFilePaths,
  931. name: 'file',
  932. formData: {
  933. 'user': 'test'
  934. },
  935. success: (uploadFileRes) => {
  936. let res = JSON.parse(uploadFileRes.data);
  937. if (res.code == 200) {
  938. console.log("上传成功", res)
  939. self.textParseUrlIps(config.base_url + '/' + res.data.url);
  940. } else {
  941. uni.showToast({
  942. title: res.msg,
  943. icon: "none",
  944. mask: true,
  945. duration: 2000
  946. });
  947. }
  948. },
  949. fail: err => {
  950. uni.hideLoading()
  951. },
  952. complete: () => {}
  953. });
  954. },
  955. //发送语音
  956. async textParseUrlIps(text) {
  957. let self = this;
  958. let newList = [];
  959. for (let i = 0; i < self.trumpetList.length; i++) {
  960. if (self.trumpetList[i].type) {
  961. let obj = {
  962. sn: self.trumpetList[i].deviceSn,
  963. port: self.trumpetList[i].port,
  964. deviceIp: self.trumpetList[i].deviceIp,
  965. type: "",
  966. name: "",
  967. speed: "",
  968. params: {
  969. tid: "",
  970. vol: self.trumpetList[i].deviceVol,
  971. urls: []
  972. }
  973. };
  974. newList.push(obj);
  975. }
  976. }
  977. const {
  978. data
  979. } = await textParseUrlIps(newList, text)
  980. if (data.code == 200) {
  981. uni.showToast({
  982. title: '发送成功',
  983. icon: "none",
  984. mask: true,
  985. duration: 2000
  986. });
  987. }
  988. },
  989. //监听应急疏散数据变更
  990. getMqttLineData(val) {
  991. console.log('收到疏散MQTT')
  992. let self = this;
  993. if (val.EXIT_LINE_MESSAGE) {
  994. console.log('数据改变')
  995. this.evacuate();
  996. } else {
  997. console.log('应急疏散已结束')
  998. uni.showToast({
  999. title: '应急疏散已结束',
  1000. icon: "none",
  1001. mask: true,
  1002. duration: 2000
  1003. });
  1004. setTimeout(function() {
  1005. uni.navigateBack();
  1006. }, 2000);
  1007. }
  1008. },
  1009. /* 确认 */
  1010. confirmBtn() {
  1011. if (!this.subId) {
  1012. uni.showToast({
  1013. title: '请选择实验室',
  1014. icon: "none",
  1015. mask: true,
  1016. duration: 2000
  1017. });
  1018. return
  1019. }
  1020. // if(this.subName){
  1021. // this.$set(this,'checkSubName',this.subName.replace('(预案发生) ',""));
  1022. // }
  1023. // if(this.buildingName){
  1024. // this.$set(this,'address',this.buildingName.replace('(预案发生) ',"") + '' + this.floorName.replace('(预案发生) ',""));
  1025. // }
  1026. this.$set(this,'pageType',2);
  1027. this.getDeviceList();
  1028. this.laboratoryInfo();
  1029. console.log(1111)
  1030. this.$set(this,'fireStartType',false);
  1031. if(this.conductCountdown){
  1032. this.clearTimer2()
  1033. this.$set(this,'conductCountdown',null);
  1034. }
  1035. this.firedeviceStatus();
  1036. this.getRedisEvacuation();
  1037. },
  1038. //执行疏散
  1039. async lineEvacuate() {
  1040. let obj = {
  1041. buildingId:this.buildingId,
  1042. floorId:this.floorId,
  1043. type:2,
  1044. }
  1045. uni.navigateTo({
  1046. url: '/pages_manage/emergencyEvacuationBigFullScreen?item='+encodeURIComponent(JSON.stringify(obj)),
  1047. });
  1048. },
  1049. //获取喇叭列表
  1050. async getDeviceList() {
  1051. let obj = {
  1052. subId: this.itemData.subjectId,
  1053. floorId: this.floorId,
  1054. page: 1,
  1055. pageSize: 100,
  1056. };
  1057. const {
  1058. data
  1059. } = await getDeviceListBySub(obj)
  1060. if (data.code == 200) {
  1061. for (let i = 0; i < data.data.length; i++) {
  1062. data.data[i].type = false;
  1063. }
  1064. this.$set(this, 'trumpetList', data.data)
  1065. }
  1066. },
  1067. //摄像头切换
  1068. scrollBoxClick(index) {
  1069. this.videoIndex = index;
  1070. },
  1071. /*新疏散相关接口*/
  1072. //地图数据
  1073. async getBuildingData() {
  1074. let self = this;
  1075. const {
  1076. data
  1077. } = await getFloorData(this.floorId)
  1078. console.log('data', data)
  1079. if (data.code == 200) {
  1080. if (data.data.buildFloorLayoutVoList[0]) {
  1081. let list = JSON.parse(data.data.labExitLineVertex.layoutJoinData)
  1082. this.zoomCalculate(list, 348, 668);
  1083. for (let i = 0; i < list.length; i++) {
  1084. if (list[i].type == '2') {
  1085. //楼道
  1086. for (let o = 0; o < list[i].lightList.length; o++) {
  1087. list[i].lightList[o].openType = false;
  1088. }
  1089. } else if (list[i].type == '1') {
  1090. for (let o = 0; o < data.data.buildFloorLayoutVoList.length; o++) {
  1091. if (list[i].key == data.data.buildFloorLayoutVoList[o].pointName) {
  1092. list[i].id = data.data.buildFloorLayoutVoList[o].id;
  1093. list[i].buildId = data.data.buildFloorLayoutVoList[o].buildId;
  1094. list[i].floorId = data.data.buildFloorLayoutVoList[o].floorId;
  1095. list[i].roomType = data.data.buildFloorLayoutVoList[o].roomType;
  1096. list[i].roomName = data.data.buildFloorLayoutVoList[o].roomName;
  1097. list[i].roomNum = data.data.buildFloorLayoutVoList[o].roomNum;
  1098. list[i].subName = data.data.buildFloorLayoutVoList[o].subName;
  1099. list[i].subId = data.data.buildFloorLayoutVoList[o].subId;
  1100. list[i].online = data.data.buildFloorLayoutVoList[o].online;
  1101. list[i].loginAdmin = data.data.buildFloorLayoutVoList[o].loginAdmin;
  1102. list[i].policeType = false;
  1103. }
  1104. }
  1105. } else if (list[i].type == 3) {
  1106. list[i].roomCheckType = false;
  1107. }
  1108. }
  1109. let subList = [];
  1110. for (let o = 0; o < data.data.buildFloorLayoutVoList.length; o++) {
  1111. if(data.data.buildFloorLayoutVoList[o].loginAdmin){
  1112. subList.push(data.data.buildFloorLayoutVoList[o])
  1113. }
  1114. if(self.subId == data.data.buildFloorLayoutVoList[o].subId){
  1115. self.$set(self,'checkSubName',data.data.buildFloorLayoutVoList[o].subName);
  1116. self.$set(self,'address',data.data.labExitLineVertex.buildName + '' + data.data.labExitLineVertex.floorName);
  1117. }
  1118. }
  1119. this.$set(this,'fjListArray', subList);
  1120. this.$set(this, 'mapList', JSON.parse(JSON.stringify(list)));
  1121. // this.$set(this, 'shadeMapList', JSON.parse(JSON.stringify(list)));
  1122. this.$set(this, 'mapType', true);
  1123. this.selectTriggerInfo(3);
  1124. }
  1125. setTimeout(function() {
  1126. self.getRedisEvacuation();
  1127. }, 500);
  1128. }
  1129. },
  1130. //获取疏散数据
  1131. async getRedisEvacuation() {
  1132. let self = this;
  1133. let obj = {
  1134. buildId: this.buildingId,
  1135. floorId: this.floorId,
  1136. }
  1137. const {
  1138. data
  1139. } = await getRedisEvacuation(obj)
  1140. if (data.code == 200) {
  1141. if (data.data.doorPointNames) {
  1142. for (let o = 0; o < self.mapList.length; o++) {
  1143. if (self.mapList[o].type == 2) {
  1144. for (let x = 0; x < self.mapList[o].lightList.length; x++) {
  1145. let num = 0;
  1146. for (let i = 0; i < data.data.lightPointSet.length; i++) {
  1147. if (data.data.lightPointSet[i]) { //处理后端返回的异常的NULL
  1148. if (self.mapList[o].lightList[x].key == data.data.lightPointSet[i].key) {
  1149. num++
  1150. }
  1151. }
  1152. }
  1153. console.log('灯',num)
  1154. self.mapList[o].lightList[x].openType = num != 0;
  1155. }
  1156. }
  1157. }
  1158. for (let i = 0; i < data.data.doorPointNames.length; i++) {
  1159. for (let o = 0; o < self.mapList.length; o++) {
  1160. if (self.mapList[o].type == 3) {
  1161. if (data.data.doorPointNames[i] == self.mapList[o].key) {
  1162. self.mapList[o].roomCheckType = true;
  1163. }
  1164. }
  1165. }
  1166. }
  1167. this.$set(this,'isEvacuate',false)
  1168. this.$forceUpdate();
  1169. }else{
  1170. this.$set(this,'isEvacuate',true)
  1171. }
  1172. };
  1173. },
  1174. //缩放计算
  1175. zoomCalculate(list, height, width) {
  1176. let maxWidth = 0
  1177. let maxHeight = 0
  1178. let zoomData = 1;
  1179. for (let i = 0; i < list.length; i++) {
  1180. if ((list[i].x + list[i].w) > maxWidth) {
  1181. maxWidth = list[i].x + list[i].w
  1182. }
  1183. if ((list[i].y + list[i].h) > maxHeight) {
  1184. maxHeight = list[i].y + list[i].h
  1185. }
  1186. }
  1187. //处理等值数据
  1188. if(maxHeight == height){
  1189. maxHeight--
  1190. }
  1191. if(maxWidth == width){
  1192. maxWidth--
  1193. }
  1194. this.$set(this, 'mapWidth', maxWidth);
  1195. this.$set(this, 'mapHeight', maxHeight);
  1196. //缩放判断
  1197. let zoomNumOne = height / maxHeight;
  1198. if(parseInt(this.accMul(zoomNumOne,maxHeight)) <= height && parseInt(this.accMul(zoomNumOne,maxWidth)) <= width){
  1199. zoomData = zoomNumOne;
  1200. this.$set(this,'zoomData',zoomNumOne);
  1201. }
  1202. let zoomNumTwo = width / maxWidth;
  1203. if(parseInt(this.accMul(zoomNumTwo,maxHeight)) <= height && parseInt(this.accMul(zoomNumTwo,maxWidth)) <= width){
  1204. zoomData = zoomNumTwo;
  1205. this.$set(this,'zoomData',zoomNumTwo);
  1206. }
  1207. // if(maxHeight>height&&maxWidth>width){
  1208. // if((maxHeight-height)>(maxWidth-width)){
  1209. // zoomData = height/maxHeight;
  1210. // this.$set(this,'zoomData',height/maxHeight);
  1211. // }else{
  1212. // zoomData = width / maxWidth;
  1213. // this.$set(this,'zoomData',width / maxWidth);
  1214. // }
  1215. // }else if(maxHeight<height&&maxWidth<width){
  1216. // if((height-maxHeight)>(width-maxWidth)){
  1217. // zoomData = width / maxWidth;
  1218. // this.$set(this,'zoomData',width / maxWidth);
  1219. // }else{
  1220. // zoomData = height / maxHeight;
  1221. // this.$set(this,'zoomData',height / maxHeight);
  1222. // }
  1223. // }else if(maxHeight<height&&maxWidth>width){
  1224. // zoomData = width / maxWidth;
  1225. // this.$set(this,'zoomData',width / maxWidth);
  1226. // }else if(maxHeight>height&&maxWidth<width){
  1227. // zoomData = height / maxHeight;
  1228. // this.$set(this,'zoomData',height / maxHeight);
  1229. // }
  1230. },
  1231. accMul(arg1,arg2){
  1232. var m=0,s1=arg1.toString(),s2=arg2.toString();
  1233. try{m+=s1.split(".")[1].length}catch(e){}
  1234. try{m+=s2.split(".")[1].length}catch(e){}
  1235. return Number(s1.replace(".",""))*Number(s2.replace(".",""))/Math.pow(10,m)
  1236. },
  1237. //结束疏散
  1238. evacuationButton() {
  1239. let self = this;
  1240. if(this.isEvacuate){
  1241. let obj = {
  1242. buildingId:this.buildingId,
  1243. floorId:this.floorId,
  1244. subId:this.subId,
  1245. type:2,
  1246. }
  1247. uni.navigateTo({
  1248. url: '/pages_manage/emergencyEvacuationBigFullScreen?item='+encodeURIComponent(JSON.stringify(obj)),
  1249. });
  1250. }else{
  1251. uni.showModal({
  1252. content: '确认'+(this.isEvacuate?'执行':'结束')+'疏散吗?',
  1253. cancelColor: "#999",
  1254. confirmColor: "#0183FA",
  1255. success: function(res) {
  1256. if (res.confirm) {
  1257. if(self.isEvacuate){
  1258. self.executeEvacuation();
  1259. }else{
  1260. self.endEvacuation();
  1261. }
  1262. console.log('用户点击确定');
  1263. } else if (res.cancel) {
  1264. console.log('用户点击取消');
  1265. }
  1266. }
  1267. });
  1268. }
  1269. },
  1270. //开始疏散
  1271. async executeEvacuation(){
  1272. let self = this;
  1273. let doorPointNames = [];
  1274. for(let i=0;i<self.mapList.length;i++){
  1275. if(self.mapList[i].type == 3){
  1276. doorPointNames.push(self.mapList[i].key)
  1277. }
  1278. }
  1279. let obj = {
  1280. buildId:this.buildingId,
  1281. floorId:this.floorId,
  1282. subId: this.subId,
  1283. badPointNames:[],
  1284. doorPointNames:doorPointNames,
  1285. }
  1286. const { data } = await executeEvacuation(obj)
  1287. console.log('data', data)
  1288. if (data.code == 200) {
  1289. this.$set(this,'isEvacuate',false);
  1290. uni.showToast({
  1291. title: '执行成功',
  1292. icon: "none",
  1293. mask: true,
  1294. duration: 2000
  1295. });
  1296. }
  1297. },
  1298. //结束疏散
  1299. async endEvacuation(){
  1300. let self = this;
  1301. let obj = {
  1302. buildId:this.buildingId,
  1303. floorId:this.floorId,
  1304. }
  1305. const { data } = await endEvacuation(obj)
  1306. console.log('data', data)
  1307. if (data.code == 200) {
  1308. this.$set(this,'isEvacuate',true);
  1309. uni.showToast({
  1310. title: '执行成功',
  1311. icon: "none",
  1312. mask: true,
  1313. duration: 2000
  1314. });
  1315. }
  1316. },
  1317. /*MQTT*/
  1318. //订阅
  1319. onMQTT() {
  1320. let self = this;
  1321. const mqttOptions = {
  1322. keepalive: 30,
  1323. clean: true, //保留会话
  1324. connectTimeout: 60000, // 超时时间
  1325. reconnectPeriod: 5000, // 重连间隔
  1326. clientId: uni.getStorageSync('token') + 'lab/function/data',
  1327. username: uni.getStorageSync('mqttUser'),
  1328. password: uni.getStorageSync('mqttPassword'),
  1329. }
  1330. const connectUrl = uni.getStorageSync('mqttUrl');
  1331. self.floorClient = $mqtt.connect('wxs://' + connectUrl, mqttOptions);
  1332. self.floorClient.on('connect', () => {
  1333. self.floorClient.subscribe(self.evacuationTopic + self.floorId, (err) => {
  1334. if (!err) {
  1335. console.log("疏散-订阅成功", )
  1336. self.getBuildingData();
  1337. }
  1338. });
  1339. self.floorClient.subscribe(self.fireTopic+self.fireCode, (err) => {
  1340. if (!err) {
  1341. console.log("火灾传感器状态-订阅成功:" + self.fireTopic+self.fireCode);
  1342. }
  1343. });
  1344. self.floorClient.subscribe(self.fireOnlineTopic+self.fireCode, (err) => {
  1345. if (!err) {
  1346. console.log("火灾设备是否在线-订阅成功:" + self.fireOnlineTopic+self.fireCode);
  1347. }
  1348. });
  1349. self.floorClient.subscribe(self.firePerformTopic+self.fireCode, (err) => {
  1350. if (!err) {
  1351. console.log("火灾是否正在执行灭火操作-订阅成功:" + self.firePerformTopic+self.fireCode);
  1352. }
  1353. });
  1354. });
  1355. // 自动重连
  1356. this.floorClient.on('reconnect', (msg) => {
  1357. console.log('自动重连-reconnect-1', msg)
  1358. });
  1359. // 错误
  1360. this.floorClient.on('error', () => {
  1361. console.log('错误-error-1')
  1362. });
  1363. // 断开
  1364. this.floorClient.on('end', () => {
  1365. console.log('断开-end-1')
  1366. });
  1367. // 掉线
  1368. this.floorClient.on('offline', (msg) => {
  1369. console.log('掉线-offline-1', msg)
  1370. });
  1371. // 收到消息
  1372. this.floorClient.on('message', (topic, message) => {
  1373. let data = JSON.parse(message)
  1374. console.log('设备状态'+data)
  1375. if (data) {
  1376. if (topic == (this.evacuationTopic + this.floorId)) {
  1377. console.log('疏散通知', data)
  1378. let pages = getCurrentPages();
  1379. let currPage = pages[pages.length - 1]
  1380. console.log('pages',pages)
  1381. // let currPage = pages[pages.length - 1] //当前页面
  1382. // let prePage = pages[pages.length - 2] //上一个页面
  1383. // prePage.$vm.aaa()
  1384. //疏散消息
  1385. if (data.data == 'FLOOR_EXITLINE') {
  1386. this.getRedisEvacuation();
  1387. if(currPage.route == 'pages_manage/emergencyEvacuationBigFullScreen'){
  1388. currPage.$vm.mqttPageFunction('FLOOR_EXITLINE')
  1389. }
  1390. } else if (data.data == 'FLOOR_OVER_EXITLINE') {
  1391. if(currPage.route == 'pages_manage/emergencyEvacuationBigFullScreen'){
  1392. currPage.$vm.mqttPageFunction('FLOOR_OVER_EXITLINE')
  1393. }
  1394. uni.showToast({
  1395. title: '疏散已结束',
  1396. icon: "none",
  1397. mask: true,
  1398. duration: 2000
  1399. });
  1400. setTimeout(function() {
  1401. self.getBuildingData();
  1402. }, 2000);
  1403. }
  1404. }else if(topic == (self.fireTopic + self.fireCode)){
  1405. //传感器状态
  1406. console.log('传感器状态');
  1407. self.firedeviceStatus('mqtt');
  1408. }else if(topic == (self.fireOnlineTopic + self.fireCode)){
  1409. //设备在线状态
  1410. console.log('设备在线状态');
  1411. self.firedeviceStatus('mqtt');
  1412. }else if(topic == (self.firePerformTopic + self.fireCode)){
  1413. console.log('灭火中'+data.fireStatus)
  1414. //灭火执行操作
  1415. if(data.fireStatus == 1){
  1416. if(!self.fireStartType){
  1417. self.firedeviceStatus('mqtt');
  1418. }
  1419. }else if(data.fireStatus == 0){
  1420. uni.showToast({
  1421. title: '一键灭火启动失败',
  1422. icon: "none",
  1423. mask: true,
  1424. duration: 2000
  1425. });
  1426. }
  1427. }
  1428. }
  1429. });
  1430. // 全局监听是否有关闭mqtt的消息的事件
  1431. uni.$on('closeMqtt', () => {
  1432. this.floorClient.end(true); // 主动断开连接
  1433. })
  1434. },
  1435. //关闭MQTT连接
  1436. offMQTT(type) {
  1437. let self = this;
  1438. if (this.floorClient.unsubscribe) {
  1439. this.floorClient.unsubscribe(this.evacuationTopic + this.floorId, error => {
  1440. if (error) {
  1441. console.log('疏散连接-关闭错误', error)
  1442. }
  1443. });
  1444. if(self.fireCode){
  1445. this.floorClient.unsubscribe(self.fireTopic+self.fireCode, error => {
  1446. if (error) {
  1447. console.log('火灾传感器状态-MQTT断开报错=>', error)
  1448. }
  1449. })
  1450. this.floorClient.unsubscribe(self.fireOnlineTopic+self.fireCode, error => {
  1451. if (error) {
  1452. console.log('火灾设备是否在线-MQTT断开报错=>', error)
  1453. }
  1454. })
  1455. this.floorClient.unsubscribe(self.firePerformTopic+self.fireCode, error => {
  1456. if (error) {
  1457. console.log('火灾是否正在执行灭火操作-MQTT断开报错=>', error)
  1458. }
  1459. })
  1460. }
  1461. this.floorClient.end(true);
  1462. this.$set(this, 'floorClient', {});
  1463. }
  1464. if (type) {
  1465. this.onMQTT();
  1466. }
  1467. },
  1468. videoErrorCallback(e){
  1469. //console.log("播放失败",e);
  1470. // uni.showToast({
  1471. // title: '视频播放失败',
  1472. // icon:"none",
  1473. // mask:true,
  1474. // duration: 3000
  1475. // });
  1476. },
  1477. },
  1478. beforeDestroy() {
  1479. this.offMQTT();
  1480. //断开mqtt连接
  1481. // getApp().offMQTT();
  1482. //删除应急疏散监听
  1483. // getApp().deleteLineData();
  1484. }
  1485. }
  1486. </script>
  1487. <style lang="stylus" scoped>
  1488. #emergencyEvacuationBig {
  1489. height: 100%;
  1490. width: 100%;
  1491. display: flex;
  1492. flex-direction: column;
  1493. overflow-y: scroll;
  1494. .setUpEvacuation {
  1495. flex: 1;
  1496. display: flex;
  1497. flex-direction: column;
  1498. overflow-y: scroll;
  1499. .evacuation-max-box {
  1500. width: 710rpx;
  1501. margin: 20rpx 20rpx;
  1502. background: #fff;
  1503. border-radius: 20rpx;
  1504. padding: 20rpx 0;
  1505. .picker-max-box {
  1506. .picker-title-box {
  1507. padding: 0 20rpx;
  1508. display: flex;
  1509. view {
  1510. line-height: 80rpx;
  1511. font-size: 28rpx;
  1512. }
  1513. view:nth-child(1) {
  1514. color: red;
  1515. }
  1516. view:nth-child(2) {}
  1517. view:nth-child(3) {
  1518. color: #999;
  1519. }
  1520. }
  1521. .picker-min-box {
  1522. display: flex;
  1523. height: 80rpx;
  1524. width: 667rpx;
  1525. border: 1rpx solid #a2a2a2;
  1526. border-radius: 10rpx;
  1527. margin: 0 20rpx;
  1528. view {
  1529. flex: 1;
  1530. line-height: 80rpx;
  1531. padding: 0 20rpx;
  1532. color: #999;
  1533. font-size: 28rpx;
  1534. overflow: hidden;
  1535. }
  1536. img {
  1537. width: 24rpx;
  1538. height: 12rpx;
  1539. margin: 35rpx 23rpx;
  1540. }
  1541. }
  1542. }
  1543. }
  1544. }
  1545. .implementEvacuation {
  1546. flex: 1;
  1547. display: flex;
  1548. flex-direction: column;
  1549. overflow-y: scroll;
  1550. .evacuation-max-box {
  1551. width: 710rpx;
  1552. margin: 20rpx 20rpx;
  1553. /* background #fff */
  1554. border-radius: 20rpx;
  1555. padding: 20rpx 0 30rpx;
  1556. .evacuation-title-box {
  1557. // height:150rpx;
  1558. //border-bottom:1rpx solid #dedede;
  1559. background: #FFFFFF;
  1560. border-radius: 20rpx;
  1561. padding: 34rpx 22rpx;
  1562. box-sizing: border-box;
  1563. display: flex;
  1564. .evacuation-title-left{
  1565. flex:1;
  1566. .evacuation-title-name-box {
  1567. font-size: 30rpx;
  1568. font-family: PingFang SC;
  1569. font-weight: 500;
  1570. color: #333333;
  1571. line-height: 30rpx;
  1572. }
  1573. .site {
  1574. font-size: 28rpx;
  1575. font-family: PingFang SC;
  1576. font-weight: 500;
  1577. color: #999999;
  1578. line-height: 30rpx;
  1579. margin-top: 32rpx;
  1580. display: flex;
  1581. justify-content: flex-start;
  1582. align-items: center;
  1583. >img {
  1584. width: 28rpx;
  1585. height: 30rpx;
  1586. margin-right: 18rpx;
  1587. }
  1588. }
  1589. }
  1590. .evacuation-title-right{
  1591. color:#0183FA;
  1592. font-size: 28rpx;
  1593. line-height: 100rpx;
  1594. }
  1595. }
  1596. /* 一键灭火 */
  1597. .outfire {
  1598. width: 710rpx;
  1599. height: auto;
  1600. background: #FFFFFF;
  1601. border-radius: 20rpx;
  1602. margin: 20rpx 0;
  1603. padding: 26 10rpx;
  1604. box-sizing: border-box;
  1605. display: flex;
  1606. justify-content: space-between;
  1607. align-items: center;
  1608. .outfire_li {
  1609. display: flex;
  1610. justify-content: flex-start;
  1611. padding: 20rpx 10rpx;
  1612. box-sizing: border-box;
  1613. //align-items: center;
  1614. .finish{
  1615. flex: 1;
  1616. }
  1617. >img {
  1618. width: 24rpx;
  1619. height: 30rpx;
  1620. margin-right: 12rpx;
  1621. margin-top: 8rpx;
  1622. }
  1623. .normal {
  1624. font-size: 24rpx;
  1625. font-family: PingFang SC;
  1626. font-weight: 500;
  1627. color: #333333;
  1628. }
  1629. .abnormal {
  1630. font-size: 24rpx;
  1631. font-family: PingFang SC;
  1632. font-weight: 500;
  1633. color: #F11C00;
  1634. }
  1635. }
  1636. .outfire_li:nth-of-type(1) {
  1637. >img {
  1638. width: 30rpx;
  1639. height: 28rpx;
  1640. margin-right: 12rpx;
  1641. }
  1642. }
  1643. .outfire_yes_btn {
  1644. width: 120rpx;
  1645. height: 40rpx;
  1646. font-size: 24rpx;
  1647. font-family: PingFang SC;
  1648. font-weight: 500;
  1649. color: #F21C00;
  1650. line-height: 40rpx;
  1651. border: 1px solid #F21C00;
  1652. border-radius: 8rpx;
  1653. text-align: center;
  1654. margin-left: 54rpx;
  1655. }
  1656. .outfire_no_btn {
  1657. width: 120rpx;
  1658. height: 40rpx;
  1659. font-size: 24rpx;
  1660. font-family: PingFang SC;
  1661. font-weight: 500;
  1662. color: #CCCCCC;
  1663. line-height: 40rpx;
  1664. border: 1px solid #E0E0E0;
  1665. border-radius: 8rpx;
  1666. text-align: center;
  1667. margin-left: 54rpx;
  1668. }
  1669. }
  1670. .evacuation-scroll-box {
  1671. height: 95rpx;
  1672. overflow-x: scroll;
  1673. overflow-y: hidden;
  1674. white-space: nowrap;
  1675. margin: 0 20rpx;
  1676. view {
  1677. line-height: 95rpx;
  1678. font-size: 28rpx;
  1679. display: inline-block;
  1680. margin-right: 45rpx;
  1681. }
  1682. .scroll-box-color {
  1683. color: #0183FA;
  1684. }
  1685. }
  1686. .evacuation-video-box {
  1687. width: 668rpx;
  1688. height: 341rpx;
  1689. margin: 0 auto;
  1690. position: relative;
  1691. video {
  1692. position: absolute;
  1693. top: 0;
  1694. left: 0;
  1695. width: 668rpx;
  1696. height: 341rpx;
  1697. margin: 0 auto;
  1698. }
  1699. .video-a {
  1700. z-index: 100;
  1701. }
  1702. .video-b {
  1703. z-index: 0;
  1704. }
  1705. }
  1706. /* 路线图 */
  1707. .roadmap {
  1708. width: 710rpx;
  1709. height: 464rpx;
  1710. background: #FFFFFF;
  1711. border-radius: 20rpx;
  1712. padding: 20rpx 20rpx 0;
  1713. box-sizing: border-box;
  1714. margin-top: 20rpx;
  1715. .roadmap_t {
  1716. font-size: 30rpx;
  1717. font-family: PingFang SC;
  1718. font-weight: 500;
  1719. color: #333333;
  1720. line-height: 30rpx;
  1721. display: flex;
  1722. .monito_li_r_l {
  1723. flex: 1;
  1724. line-height: 61rpx;
  1725. font-size: 28rpx;
  1726. }
  1727. .monito_li_r_r_button {
  1728. width: 100rpx;
  1729. text-align: center;
  1730. line-height: 61rpx;
  1731. font-size: 28rpx;
  1732. color: #0183FA;
  1733. }
  1734. .monito_li_r {
  1735. width: 380rpx;
  1736. font-size: 24rpx;
  1737. font-family: PingFang SC;
  1738. font-weight: 500;
  1739. color: #0183FA;
  1740. line-height: 80rpx;
  1741. display: flex;
  1742. justify-content: flex-end;
  1743. align-items: center;
  1744. >img {
  1745. width: 9rpx;
  1746. height: 22rpx;
  1747. margin-left: 20rpx;
  1748. }
  1749. .evacuation-title-button-box {
  1750. display: flex;
  1751. overflow: hidden;
  1752. view {
  1753. line-height: 61rpx;
  1754. font-size: 28rpx;
  1755. }
  1756. .colorA {
  1757. color: #0183FA;
  1758. }
  1759. .colorB {
  1760. color: #0183FA;
  1761. }
  1762. img {
  1763. margin: 28rpx 20rpx 0;
  1764. width: 24rpx;
  1765. height: 9rpx;
  1766. }
  1767. }
  1768. }
  1769. }
  1770. .evacuation-map-box {
  1771. width: 668rpx;
  1772. height: 348rpx;
  1773. margin: 0 auto;
  1774. overflow: hidden;
  1775. border: 1rpx solid #E0E0E0;
  1776. margin-top: 20rpx;
  1777. position: relative;
  1778. .emergencyEvacuationBigFullScreen-page {
  1779. // overflow: scroll;
  1780. overflow: hidden;
  1781. position: absolute;
  1782. top: 50%;
  1783. left: 50%;
  1784. .map-max-box {
  1785. position: relative;
  1786. .map-max-for-box {
  1787. position: absolute;
  1788. display: flex;
  1789. flex-direction: column;
  1790. .map-max-for-min-box {
  1791. position: relative;
  1792. .position-box {
  1793. position: absolute;
  1794. }
  1795. .map-for-name-p {
  1796. padding: 0 10rpx;
  1797. height: 20rpx;
  1798. line-height: 20rpx;
  1799. font-size: 14rpx;
  1800. text-align: center;
  1801. color: #333;
  1802. overflow: hidden;
  1803. text-overflow: ellipsis;
  1804. white-space: nowrap;
  1805. }
  1806. .map-for-num-p {
  1807. padding: 0 10rpx;
  1808. height: 20rpx;
  1809. line-height: 20rpx;
  1810. font-size: 14rpx;
  1811. text-align: center;
  1812. color: #333;
  1813. overflow: hidden;
  1814. text-overflow: ellipsis;
  1815. white-space: nowrap;
  1816. }
  1817. .center-move-door-p-t {
  1818. background: url("@/images/evacuation3_2/icon_sysbjt_m.png") !important;
  1819. background-size: 100% !important;
  1820. transform: rotate(180deg);
  1821. }
  1822. .center-move-door-p-b {
  1823. background: url("@/images/evacuation3_2/icon_sysbjt_m.png") !important;
  1824. background-size: 100% !important;
  1825. }
  1826. .center-move-door-p-l {
  1827. background: url("@/images/evacuation3_2/icon_sysbjt_m.png") !important;
  1828. background-size: 100% !important;
  1829. transform: rotate(90deg);
  1830. }
  1831. .center-move-door-p-r {
  1832. background: url("@/images/evacuation3_2/icon_sysbjt_m.png") !important;
  1833. background-size: 100% !important;
  1834. transform: rotateZ(270deg);
  1835. }
  1836. .lightTopOn {
  1837. background: url("@/images/evacuation3_2/icon_sjt.png");
  1838. background-size: 100%;
  1839. }
  1840. .lightTopOff {
  1841. background: url("@/images/evacuation3_2/icon_shang_hs.png");
  1842. background-size: 100%;
  1843. }
  1844. .lightBottomOn {
  1845. background: url("@/images/evacuation3_2/icon_xjt.png");
  1846. background-size: 100%;
  1847. }
  1848. .lightBottomOff {
  1849. background: url("@/images/evacuation3_2/icon_xia_hs.png");
  1850. background-size: 100%;
  1851. }
  1852. .lightLeftOn {
  1853. background: url("@/images/evacuation3_2/icon_zuo.png");
  1854. background-size: 100%;
  1855. }
  1856. .lightLeftOff {
  1857. background: url("@/images/evacuation3_2/icon_zou_hs.png");
  1858. background-size: 100%;
  1859. }
  1860. .lightRightOn {
  1861. background: url("@/images/evacuation3_2/icon_yuo.png");
  1862. background-size: 100%;
  1863. }
  1864. .lightRightOff {
  1865. background: url("@/images/evacuation3_2/icon_you_hs.png");
  1866. background-size: 100%;
  1867. }
  1868. }
  1869. }
  1870. .for-map-box {
  1871. border: 2rpx solid #fff;
  1872. background: #CEF2FD;
  1873. }
  1874. .for-map-box-one {
  1875. background: #CEFDD5;
  1876. }
  1877. .for-map-box-two {
  1878. background: url("@/images/evacuation3_2/icon_yjtd.png") center center no-repeat #006400;
  1879. background-size: 60rpx 60rpx;
  1880. }
  1881. .for-map-box-two-check {
  1882. background: url("@/images/evacuation3_2/icon_yjtd.png") center center no-repeat rgba(50, 205, 50, 1);
  1883. background-size: 80rpx 80rpx;
  1884. }
  1885. .room-type-one {
  1886. //选中
  1887. background: rgba(178, 235, 255, 1);
  1888. }
  1889. .room-type-two {
  1890. //报警
  1891. background: rgba(232, 0, 0, 0.4);
  1892. box-shadow: 0 0 10rpx 1rpx #E80000 inset;
  1893. }
  1894. .room-type-three {
  1895. //选中报警
  1896. background: rgba(178, 235, 255, 1);
  1897. box-shadow: 0 0 10rpx 1rpx #E80000 inset;
  1898. }
  1899. }
  1900. }
  1901. }
  1902. }
  1903. .video-max-box {
  1904. width: 710rpx;
  1905. height: 780rpx;
  1906. overflow-y: scroll;
  1907. background: #FFFFFF;
  1908. border-radius: 20rpx;
  1909. padding: 22rpx 30rpx 30rpx;
  1910. box-sizing: border-box;
  1911. margin-top: 20rpx;
  1912. margin-bottom: 120rpx;
  1913. video {
  1914. width: 645rpx;
  1915. height: 355rpx;
  1916. }
  1917. }
  1918. .bottom-button-box {
  1919. position: absolute;
  1920. bottom: 20rpx;
  1921. display: flex;
  1922. width: 670rpx;
  1923. margin: 20rpx;
  1924. view {
  1925. width: 335rpx;
  1926. height: 100rpx;
  1927. line-height: 100rpx;
  1928. text-align: center;
  1929. color: #fff;
  1930. font-size: 28rpx;
  1931. }
  1932. .voice {
  1933. border-top-left-radius: 50rpx;
  1934. border-bottom-left-radius: 50rpx;
  1935. background: #FF9C00;
  1936. }
  1937. .plan{
  1938. background: #21A743;
  1939. }
  1940. .evacuate{
  1941. border-top-right-radius: 50rpx;
  1942. border-bottom-right-radius: 50rpx;
  1943. background: #0183FA;
  1944. }
  1945. }
  1946. }
  1947. .live-button {
  1948. width: 650rpx;
  1949. height: 100rpx;
  1950. line-height: 100rpx;
  1951. text-align: center;
  1952. font-size: 28rpx;
  1953. margin: 50rpx auto 0;
  1954. border-radius: 20rpx;
  1955. }
  1956. .live-color-a {
  1957. color: #fff;
  1958. background: #FF8686;
  1959. }
  1960. .live-color-b {
  1961. color: #fff;
  1962. background: #25C95B;
  1963. }
  1964. /* 语音广播 */
  1965. .shade-max-big-box {
  1966. height: 100%;
  1967. width: 100%;
  1968. position: fixed;
  1969. display: flex;
  1970. flex-direction: column;
  1971. z-index: 10;
  1972. background: rgba(0, 0, 0, 0.2);
  1973. .null-box {
  1974. flex: 1;
  1975. }
  1976. /* 语音广播-执行疏散 */
  1977. .broadcast {
  1978. width: 100%;
  1979. // height: 532rpx;
  1980. background: #FFFFFF;
  1981. border-top-left-radius: 20rpx;
  1982. border-top-right-radius: 20rpx;
  1983. padding:22rpx 30rpx 30rpx;
  1984. box-sizing: border-box;
  1985. margin-top: 20rpx;
  1986. .broadcast_t {
  1987. font-size: 30rpx;
  1988. font-family: PingFang SC;
  1989. font-weight: 500;
  1990. color: #333333;
  1991. line-height: 30rpx;
  1992. >label {
  1993. font-size: 24rpx;
  1994. font-family: PingFang SC;
  1995. font-weight: 500;
  1996. color: #999999;
  1997. line-height: 30rpx;
  1998. margin-left: 16rpx;
  1999. }
  2000. }
  2001. .trumpet-max-box {
  2002. display: flex;
  2003. justify-content: flex-start;
  2004. margin-top: 22rpx;
  2005. flex-wrap: wrap;
  2006. .trumpet-for-box {
  2007. display: inline-block;
  2008. width: auto;
  2009. height: 60rpx;
  2010. line-height: 60rpx;
  2011. font-size: 24rpx;
  2012. text-align: center;
  2013. cursor: pointer;
  2014. overflow: hidden;
  2015. border: 1rpx solid #E0E0E0;
  2016. border-radius: 10rpx;
  2017. color: #E0E0E0;
  2018. display: flex;
  2019. justify-content: center;
  2020. margin-right: 20rpx;
  2021. margin-bottom: 10rpx;
  2022. padding: 0 12rpx;
  2023. box-sizing: border-box;
  2024. >img {
  2025. width: 36rpx;
  2026. height: 34rpx;
  2027. margin: 12rpx 20rpx 0 25rpx;
  2028. }
  2029. }
  2030. .trumpet-color-a {
  2031. border: 1px solid #0183FA;
  2032. color: #0183FA;
  2033. }
  2034. .trumpet-color-b {
  2035. border: 1px solid #CCCCCC;
  2036. color: #999;
  2037. }
  2038. }
  2039. .broadcast_m {
  2040. width: 100%;
  2041. .broadcast_m_t {
  2042. width: 142rpx;
  2043. height: 142rpx;
  2044. margin: 30rpx 0 0 258rpx;
  2045. position: relative;
  2046. font-size: 24rpx;
  2047. font-family: PingFang SC;
  2048. font-weight: 500;
  2049. line-height: 170rpx;
  2050. text-align: center;
  2051. >img {
  2052. width: 142rpx;
  2053. height: 142rpx;
  2054. position: absolute;
  2055. }
  2056. >label {
  2057. width: 100%;
  2058. font-size: 24rpx;
  2059. font-family: PingFang SC;
  2060. font-weight: 500;
  2061. color: #0183FA;
  2062. line-height: 24rpx;
  2063. display: inline-block;
  2064. text-align: center;
  2065. position: absolute;
  2066. top: 76rpx;
  2067. }
  2068. /* 按下 */
  2069. .press_color {
  2070. color: #FFFFFF;
  2071. }
  2072. /* 松开 */
  2073. .slip_color {
  2074. color: #0183FA;
  2075. }
  2076. }
  2077. .broadcast_m_t_back_a {
  2078. background: url(@/images/basicsModules/icon_sskz_skfs.png);
  2079. background-size: 100%;
  2080. color: #FFFFFF;
  2081. }
  2082. .broadcast_m_t_back_b {
  2083. background: url(@/images/basicsModules/icon_sskz_azsh.png);
  2084. background-size: 100%;
  2085. color: #0183FA;
  2086. }
  2087. .broadcast_m_b {
  2088. font-size: 24rpx;
  2089. font-family: PingFang SC;
  2090. font-weight: 500;
  2091. color: #999999;
  2092. line-height: 24rpx;
  2093. text-align: center;
  2094. margin-top: 14rpx;
  2095. }
  2096. }
  2097. /* 疏散按钮 */
  2098. .evacuation-button-box {
  2099. width: 650rpx;
  2100. height: 100rpx;
  2101. background: #0183FA;
  2102. color: #fff;
  2103. text-align center;
  2104. line-height: 100rpx;
  2105. font-size: 28rpx;
  2106. margin: 88rpx auto 0;
  2107. border-radius: 20rpx;
  2108. }
  2109. }
  2110. }
  2111. /* 一键灭火 */
  2112. .shade-outfire {
  2113. height: 100%;
  2114. width: 100%;
  2115. position: fixed;
  2116. display: flex;
  2117. flex-direction: column;
  2118. z-index: 10;
  2119. background: rgba(0, 0, 0, 0.2);
  2120. .null-box {
  2121. flex: 1;
  2122. }
  2123. /* 语音广播-执行疏散 */
  2124. .shade-outfire-n {
  2125. width: 625rpx;
  2126. height: 450rpx;
  2127. background: #FFFFFF;
  2128. border-radius: 20rpx;
  2129. position: absolute;
  2130. top: 370rpx;
  2131. left: 62rpx;
  2132. .shade-outfire-n-t {
  2133. width: 172rpx;
  2134. height: 172rpx;
  2135. margin: 38rpx 0 0 226rpx;
  2136. }
  2137. .shade-outfire-n-m {
  2138. font-size: 30rpx;
  2139. font-family: PingFang SC;
  2140. font-weight: 500;
  2141. color: #E30000;
  2142. line-height: 84rpx;
  2143. text-align: center;
  2144. border-bottom: 1px solid #E0E0E0;
  2145. >text {
  2146. font-size: 40rpx;
  2147. }
  2148. }
  2149. .shade-outfire-n-b {
  2150. width: 402rpx;
  2151. height: 82rpx;
  2152. background: #FFFFFF;
  2153. border: 2rpx solid #0183FA;
  2154. border-radius: 10rpx;
  2155. font-size: 28rpx;
  2156. line-height: 82rpx;
  2157. font-family: PingFang SC;
  2158. font-weight: 500;
  2159. color: #0183FA;
  2160. text-align: center;
  2161. margin: 30rpx 0 0 112rpx;
  2162. }
  2163. }
  2164. }
  2165. }
  2166. .setUpEvacuation-bottom-button {
  2167. width: 650rpx;
  2168. height: 100rpx;
  2169. background: #0183FA;
  2170. color:#fff;
  2171. text-align: center;
  2172. line-height: 100rpx;
  2173. font-size: 28rpx;
  2174. margin: 50rpx auto;
  2175. border-radius: 20rpx;
  2176. }
  2177. }
  2178. </style>