laboratoryInfo.vue 50 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150115111521153115411551156115711581159116011611162116311641165116611671168116911701171117211731174117511761177117811791180118111821183118411851186118711881189119011911192119311941195119611971198119912001201120212031204120512061207120812091210121112121213121412151216121712181219122012211222122312241225122612271228122912301231123212331234123512361237123812391240124112421243124412451246124712481249125012511252125312541255125612571258125912601261126212631264126512661267126812691270127112721273127412751276127712781279128012811282128312841285128612871288128912901291129212931294129512961297129812991300130113021303130413051306130713081309131013111312131313141315131613171318131913201321132213231324132513261327132813291330133113321333133413351336133713381339134013411342134313441345134613471348134913501351135213531354135513561357135813591360136113621363136413651366136713681369137013711372137313741375137613771378137913801381138213831384138513861387138813891390139113921393139413951396139713981399140014011402140314041405140614071408140914101411141214131414141514161417141814191420142114221423142414251426142714281429143014311432143314341435143614371438143914401441144214431444144514461447144814491450145114521453145414551456145714581459146014611462146314641465146614671468146914701471147214731474147514761477147814791480148114821483148414851486148714881489149014911492149314941495149614971498149915001501150215031504150515061507150815091510151115121513151415151516151715181519152015211522152315241525152615271528152915301531153215331534153515361537153815391540154115421543154415451546154715481549155015511552155315541555155615571558155915601561156215631564156515661567156815691570157115721573157415751576157715781579158015811582158315841585158615871588158915901591159215931594159515961597159815991600160116021603160416051606160716081609161016111612161316141615161616171618161916201621162216231624162516261627162816291630163116321633163416351636163716381639164016411642164316441645164616471648164916501651165216531654165516561657165816591660166116621663166416651666166716681669167016711672167316741675167616771678167916801681168216831684168516861687168816891690169116921693169416951696169716981699170017011702170317041705
  1. <!-- 我的实验室 -->
  2. <template>
  3. <view id="laboratoryInfo">
  4. <view class="name-max-box">
  5. <view class="title-box">
  6. <view :style="'border:1rpx solid '+itemData.fiedColor+';background:#fff;color:'+itemData.fiedColor+';'">{{itemData.levelName}}</view>
  7. <view>{{itemData.name}}</view>
  8. </view>
  9. <view class="address-box"><span>{{itemData.typeName}}</span>{{itemData.deptName}}</view>
  10. <view class="address-box-two">
  11. <img src="@/pages_manage/images/icon_14.png">
  12. <view>{{itemData.subAddrrStr}}</view>
  13. </view>
  14. </view>
  15. <view class="sensor-max-box" v-if="itemData.sensorFunctionList[0]&&!saoCodeType">
  16. <view class="title-max-box">
  17. <view class="left-view"></view>
  18. <view class="right-view">传感器</view>
  19. </view>
  20. <view class="text-box">
  21. <view class="min-box" v-for="(minItem,index2) in itemData.sensorFunctionList" :key="index2">
  22. <view class="min-min-box">
  23. <img v-show="minItem.hasWarn" src="@/pages_manage/images/icon_15.png">
  24. <view :class="{'colorA':minItem.hasWarn}">{{minItem.funcName}}:{{minItem.formatVal?minItem.formatVal:'-'}}</view>
  25. </view>
  26. </view>
  27. </view>
  28. </view>
  29. <!-- 一键灭火 -->
  30. <view class="outfire" v-if='fireType'>
  31. <view class="outfire_li" v-if="!fireListType">
  32. <img src="@/pages_manage/images/icon_sy_wt.png">
  33. <text style="color: #FF7B1A;">设备已离线,请及时处理。</text>
  34. </view>
  35. <view class="outfire_li" v-if="fireStartType">
  36. <img src="@/pages_manage/images/icon_sy_mhwc.png">
  37. <text style="color: #FF2333;">灭火中,灭火程序将于<text>{{conductCountdown}}</text>秒后结束</text>
  38. </view>
  39. <view class="outfire_li" v-if="outfireEnd">
  40. <img src="@/pages_manage/images/icon_sy_mhwc.png">
  41. <text style="color: #FF2333;" class="finish">自动灭火完成,请确保在关闭灭火一体机电源后补充灭火耗材,耗材补充完毕需要打开电源并点击一体机上的复位按钮</text>
  42. </view>
  43. <template v-if="fireListType && !fireStartType && !outfireEnd">
  44. <view class="outfire_li">
  45. <img v-if='!outfireData.smoke' src="@/pages_manage/images/icon_yw_zc.png">
  46. <img v-if='outfireData.smoke' src="@/pages_manage/images/icon_yw_yc.png">
  47. <text
  48. :class="outfireData.smoke?'abnormal':'normal'">{{outfireData.smoke?'有烟雾':'无烟雾'}}</text>
  49. </view>
  50. <view class="outfire_li">
  51. <img v-if='!outfireData.temperature' src="@/pages_manage/images/icon_wd_zc.png">
  52. <img v-if='outfireData.temperature' src="@/pages_manage/images/icon_wd_yc.png">
  53. <text
  54. :class="outfireData.temperature?'abnormal':'normal'">{{outfireData.temperature?'温度异常':'温度正常'}}</text>
  55. </view>
  56. <view class="outfire_li">
  57. <img v-if='!outfireData.fire' src="@/pages_manage/images/icon_hy_zc.png">
  58. <img v-if='outfireData.fire' src="@/pages_manage/images/icon_hy_yc.png">
  59. <text :class="outfireData.fire?'abnormal':'normal'">{{outfireData.fire?'发现火焰':'无火焰'}}</text>
  60. </view>
  61. </template>
  62. <view v-if="fireListType && !fireStartType && !outfireEnd"
  63. :class="fireListType?'outfire_yes_btn':'outfire_no_btn'" @click="outfireFun()">一键灭火
  64. </view>
  65. </view>
  66. <view class="control-max-box" v-if="!saoCodeType">
  67. <view class="title-max-box">
  68. <view class="left-view"></view>
  69. <view class="right-view">智能控制</view>
  70. </view>
  71. <view class="button-max-box">
  72. <view class="button-box">
  73. <view @click="goVideo()" v-if="itemData.videoNum>0">视频监控</view>
  74. <view @click="shadeTypeClick()" v-if="trumpetList.length>0">语音广播</view>
  75. </view>
  76. <view class="for-button-box" v-for="(minItem,minIndex) in itemData.labHardwareVOList" :key="minIndex" v-if="minItem.hardwareTypeEnum.enumName!='VIDEO_MONITOR' && minItem.hardwareTypeEnum.enumName!='RFID_RECOGNIZER'&& minItem.hardwareTypeEnum.enumName!='AI_TERMINAL'&& minItem.hardwareTypeEnum.enumName!='AI_DOORLOCK'&& minItem.hardwareTypeEnum.enumName!='AI_CABINETLOCK' && minItem.hardwareName!='一键灭火' && minItem.isPcfire != '1'">
  77. <view class="for-button-p">{{minItem.hardwareName}}<text v-if="minItem.state.code=='3'&& minItem.hardwareTypeEnum.hardwareTypeCode==2">({{minItem.dictLabel}})</text></view>
  78. <img v-if="minItem.state.code=='3' && minItem.pcType != 1" src="@/pages_manage/images/icon_10.png" @click="hardwareButton(minItem,'close')">
  79. <img v-if="minItem.state.code=='4' && minItem.pcType != 1" src="@/pages_manage/images/icon_11.png" @click="hardwareButton(minItem,'open')">
  80. <view class="for-button-p" v-if="minItem.state.code=='0' && minItem.pcType != 1">离线</view>
  81. <view class="for-button-p" v-if="minItem.state.code=='2' && minItem.pcType != 1" style="color:#0183FA;">在线</view>
  82. <view v-if="minItem.pcType == 1" class="pcType-button" @click="pcTypeButtonClick(minItem.id)">操作</view>
  83. </view>
  84. </view>
  85. </view>
  86. <view class="info-max-box">
  87. <view class="title-max-box" :class="{'title-max-box-none':!infoMaxBoxType}">
  88. <view class="left-view"></view>
  89. <view class="right-view">安全信息牌</view>
  90. <view class="click-view" @click="infoMaxBoxClick">
  91. <view>{{infoMaxBoxType?'收起':'展开'}}</view>
  92. <img v-if="infoMaxBoxType" src="@/pages_manage/images/icon_06_1.png">
  93. <img v-else src="@/pages_manage/images/icon_06.png">
  94. </view>
  95. </view>
  96. <view v-if="infoMaxBoxType">
  97. <view class="text-max-box">
  98. <view class="text-min-box">
  99. <view>责任单位:</view>
  100. <view>{{itemData.deptName}}</view>
  101. </view>
  102. <view class="text-min-box">
  103. <view>实验室负责人:</view>
  104. <view>{{itemData.safeInfo.subAdmin[0]?"":"未设置"}}</view>
  105. </view>
  106. <view class="text-min-box" v-for="(item,index) in itemData.safeInfo.subAdmin" :key="index">
  107. <view style="color:#999;">{{item.name}}</view>
  108. <view>{{item.phone?item.phone:'未填写'}}</view>
  109. </view>
  110. <view class="text-min-box">
  111. <view>安全负责人:</view>
  112. <view>{{itemData.safeInfo.safeUser[0]?"":"未设置"}}</view>
  113. </view>
  114. <view class="text-min-box" v-for="(item,index) in itemData.safeInfo.safeUser" :key="index">
  115. <view style="color:#999;">{{item.name}}</view>
  116. <view>{{item.phone?item.phone:'未填写'}}</view>
  117. </view>
  118. </view>
  119. <view class="safety-max-box" v-if="itemData.hazardCategory[0]||itemData.riskMeasure[0]||itemData.outfire[0]">
  120. <view class="max-for-box" v-if="itemData.hazardCategory[0]">
  121. <view class="title-box">主要危险类别</view>
  122. <view class="for-box" v-for="(item,index1) in itemData.hazardCategory" :key="index1">● {{item}}</view>
  123. </view>
  124. <view class="max-for-box" v-if="itemData.riskMeasure[0]">
  125. <view class="title-box">风险防控措施</view>
  126. <view class="for-box" v-for="(item,index1) in itemData.riskMeasure" :key="index1">● {{item}}</view>
  127. </view>
  128. <view class="max-for-box" v-if="itemData.outfire[0]">
  129. <view class="title-box">灭火要点</view>
  130. <view class="for-box" v-for="(item,index1) in itemData.outfire" :key="index1">● {{item}}</view>
  131. </view>
  132. </view>
  133. <view class="img-bottom-box" v-if="itemData.safeSigns[0]||itemData.qrCode">
  134. <view class="title-box">安全警示标识</view>
  135. <view class="for-box">
  136. <img class="img-ojb" src="@/pages_manage/images/icon_aqxxp_jzxy.png" v-if="item == 'xiyan'" v-for="(item,index) in itemData.safeSigns" :key="index">
  137. <img class="img-ojb" src="@/pages_manage/images/icon_aqxxp_jzys.png" v-if="item == 'yinshi'" v-for="(item,index) in itemData.safeSigns" :key="index">
  138. <img class="img-ojb" src="@/pages_manage/images/icon_aqxxp_dxaq.png" v-if="item == 'anquan'" v-for="(item,index) in itemData.safeSigns" :key="index">
  139. <img class="img-ojb" src="@/pages_manage/images/icon_aqxxp_gzf.png" v-if="item == 'gongzuofu'" v-for="(item,index) in itemData.safeSigns" :key="index">
  140. <img class="img-ojb" src="@/pages_manage/images/icon_aqxxp_gbmc.png" v-if="item == 'menchuang'" v-for="(item,index) in itemData.safeSigns" :key="index">
  141. <img class="img-ojb" src="@/pages_manage/images/icon_aqxxp_gbsd.png" v-if="item == 'shuidian'" v-for="(item,index) in itemData.safeSigns" :key="index">
  142. <img v-if="baseUrl+itemData.safeInfo.qrCode" class="code-img" :src="baseUrl+itemData.safeInfo.qrCode">
  143. </view>
  144. </view>
  145. </view>
  146. </view>
  147. <!-- 一键灭火遮罩-->
  148. <view class="shade-outfire" v-if="dialogVisible">
  149. <view class="null-box" @click="dialogOutfire()"></view>
  150. <view class="shade-outfire-n">
  151. <img class="shade-outfire-n-t" src="@/pages_manage/images/icon_mh.png" />
  152. <view class="shade-outfire-n-m">一键灭火启动中,倒计时<text>{{countdown}}</text>秒</view>
  153. <view class="shade-outfire-n-b" @click="cancelOutfire()">放弃一键灭火</view>
  154. </view>
  155. </view>
  156. <!-- 语音广播-->
  157. <view class="shade-max-big-box" v-if="broadcastType">
  158. <view class="null-box" @click="shadeTypeClick()"></view>
  159. <!-- 语音广播-执行疏散 -->
  160. <view class="broadcast">
  161. <view class="broadcast_t">语音广播<label>选择喇叭位置</label></view>
  162. <!-- 按钮部分 -->
  163. <view class="trumpet-max-box">
  164. <view @click="trumpetClick(index)" class="trumpet-for-box"
  165. :class="item.type?'trumpet-color-a':'trumpet-color-b'" v-for="(item,index) in trumpetList"
  166. :key="index">
  167. <img src="@/pages_manage/images/icon_sskz_zc.png" v-if="!item.type">
  168. <img src="@/pages_manage/images/icon_sskz_xz.png" v-if="item.type">
  169. {{item.name}}
  170. </view>
  171. </view>
  172. <view class="broadcast_m">
  173. <view class="broadcast_m_t" :class="liveType?'broadcast_m_t_back_a':'broadcast_m_t_back_b'"
  174. @longpress.stop="recordButton" @touchmove.stop="cancelButton" @touchend.stop="sendButton">
  175. {{liveType?'松开发送':'按住说话'}}
  176. </view>
  177. <view class="broadcast_m_b" v-if="!liveType">按住说话,录入广播内容</view>
  178. <view class="broadcast_m_b" v-if="liveType">松开发送,向上滑动取消发送</view>
  179. </view>
  180. </view>
  181. </view>
  182. </view>
  183. </template>
  184. <script>
  185. import $mqtt from '@/utils/mqtt.min.js';
  186. import { config } from '@/api/request/config.js'
  187. import { mySubjectList,subject_class,listDepartments,mangerControl,getDicts,laboratoryInfo,
  188. firedeviceStatus,firedeviceStart,firedeviceCancel,controlSwitch,getDeviceListBySub, textParseUrlIps,listData} from '@/api/index.js'
  189. export default {
  190. data() {
  191. return {
  192. baseUrl:config.base_url,
  193. itemData:{},
  194. //MQTT请求参数-传感器
  195. mtopic:"lab/function/data",
  196. //MQTT请求参数-设备
  197. mtopicOne:"lab/hardware/data",
  198. msg:"",
  199. client:{},
  200. //安全信息牌
  201. infoMaxBoxType:false,
  202. subject:[],
  203. safetyWarning:[],
  204. hazardCategory:[],
  205. riskMeasure:[],
  206. extinguishingKeyPoints:[],
  207. deptId:"",
  208. saoCodeType:false,
  209. countdown: '', //倒计时
  210. timer2: null, //倒计时
  211. dialogVisible: false, //一键灭火弹出层
  212. conductCountdown: '',
  213. timer3: null, //倒计时
  214. outfireEnd: false, //灭火结束状态
  215. //新布局地图相关数据
  216. zoomData: null,
  217. mapType:false,
  218. mapList: [],
  219. mapWidth: null, //40边框距离
  220. mapHeight: null, //40边框距离
  221. //新MQTT
  222. floorClient: {},
  223. evacuationTopic: "lab/newexit/line", //疏散
  224. //灭火设备MQTT相关
  225. fireClient:{},
  226. fireTopic:"lab/fireDevice/Warn/",//传感器状态异常
  227. fireOnlineTopic:"lab/fireDevice/isOnline/",//设备是否在线
  228. firePerformTopic:"lab/fireDevice/executing/",//是否正在执行灭火操作
  229. fireType:false,//有无火焰设备状态
  230. fireListType:false,//灭火设备在线离线
  231. fireCode:null,// //灭火设备code
  232. fireStartType:false, //灭火启动状态
  233. outfireData: {}, //一键灭火
  234. subId:'',
  235. broadcastType: false,
  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. },
  247. onLoad(option) {
  248. let self = this;
  249. if(uni.getStorageSync('saoCodeId')){
  250. this.saoCodeType = true;
  251. this.subId=uni.getStorageSync('saoCodeId');
  252. this.laboratoryInfo();
  253. }else{
  254. if(option.q){
  255. let text = decodeURIComponent(option.q)
  256. console.log('text',text)
  257. let codeId = "";
  258. let newList = text.split("?")[1].split("&")
  259. let list = newList[0].split("=")[1].split("-")
  260. codeId = list[0];
  261. uni.setStorageSync('saoCodeId',codeId)
  262. this.subId=uni.getStorageSync('saoCodeId');
  263. this.saoCodeType = true;
  264. this.laboratoryInfo();
  265. }else{
  266. this.deptId = JSON.parse(decodeURIComponent(option.deptId));
  267. this.itemData = JSON.parse(decodeURIComponent(option.item));
  268. this.subId=this.itemData.id;
  269. self.itemData.videoNum = 0;
  270. self.itemData.hardwareNUM = "";
  271. for(let i=0;i<self.itemData.labHardwareVOList.length;i++){
  272. if(self.itemData.labHardwareVOList[i].hardwareTypeEnum.enumName=='VIDEO_MONITOR'){
  273. self.itemData.hardwareNUM = self.itemData.hardwareNUM+self.itemData.labHardwareVOList[i].hardwareNUM+',';
  274. self.itemData.videoNum++
  275. }
  276. }
  277. this.itemData.safeUserName = this.itemData.safeInfo.safeUserName
  278. this.itemData.safePhone = this.itemData.safeInfo.safePhone
  279. if(this.itemData.safeInfo.hazardCategory){
  280. this.itemData.hazardCategory = this.itemData.safeInfo.hazardCategory
  281. }
  282. if(this.itemData.safeInfo.riskMeasure){
  283. this.itemData.riskMeasure = this.itemData.safeInfo.riskMeasure
  284. }
  285. if(this.itemData.safeInfo.safeSigns){
  286. this.itemData.safeSigns = this.itemData.safeInfo.safeSigns
  287. }
  288. if(this.itemData.safeInfo.outfire){
  289. this.itemData.outfire = this.itemData.safeInfo.outfire
  290. }
  291. if(this.itemData.safeInfo.safeUserNameAdminPhone){
  292. let list = [];
  293. let newList = [];
  294. list = this.itemData.safeInfo.safeUserNameAdminPhone.split(",");
  295. for(let i=0;i<list.length;i++){
  296. list[i] = list[i].split("@");
  297. let obj = {
  298. name:list[i][0],
  299. phone:list[i][1]
  300. }
  301. newList.push(obj);
  302. }
  303. this.itemData.safeInfo.safeUser = newList;
  304. }
  305. if(this.itemData.safeInfo.adminNameAndPhone){
  306. let list = [];
  307. let newList = [];
  308. list = this.itemData.safeInfo.adminNameAndPhone.split(",");
  309. for(let i=0;i<list.length;i++){
  310. list[i] = list[i].split("@");
  311. let obj = {
  312. name:list[i][0],
  313. phone:list[i][1]
  314. }
  315. newList.push(obj);
  316. }
  317. this.itemData.safeInfo.subAdmin = newList;
  318. }
  319. this.saoCodeType = false;
  320. }
  321. }
  322. this.firedeviceStatus();
  323. this.getListData();
  324. this.getDeviceListBySub();
  325. },
  326. onShow(){
  327. if(!this.saoCodeType){
  328. // //监听传感器信息
  329. getApp().watch(this.getMqttSensorData,'mqttSensorData')
  330. // //监听设备信息
  331. getApp().watch(this.getMqttDeviceData,'mqttDeviceData')
  332. //一键灭火-灭火传感器状态异常
  333. getApp().watch(this.getMqttfireData,'mqttfireData')
  334. //一键灭火-是否正在执行灭火操作
  335. getApp().watch(this.getMqttPerformData,'mqttPerformData')
  336. }
  337. },
  338. methods: {
  339. shadeTypeClick() {
  340. this.broadcastType = !this.broadcastType
  341. },
  342. //查询控制记录触发方式
  343. async getListData() {
  344. let _this = this;
  345. let obj={
  346. pageNum:1,
  347. pageSize:20,
  348. dictType:'trigger_modes'
  349. }
  350. const {data} = await listData(obj)
  351. if (data.code == 200) {
  352. this.fanList=data.rows
  353. }
  354. },
  355. //一键灭火-查询设备状态
  356. async firedeviceStatus() {
  357. let _this = this;
  358. const {data} = await firedeviceStatus(_this.subId)
  359. if (data.code == 200) {
  360. if(data.data.isexist){//是否有灭火设备
  361. this.$set(this,'fireType',data.data.isexist);
  362. if(data.data.online){
  363. _this.outfireData = data.data
  364. _this.$set(this,'fireListType',data.data.online);
  365. _this.$set(this,'fireCode',data.data.fireDevice.deviceCode);
  366. if(data.data.temperature && data.data.smoke){
  367. if(!this.fireStartType){
  368. this.$set(this,'fireStartType',true);
  369. this.sendCode2(data.data.timeDifference);
  370. }
  371. }
  372. if(data.data.timeDifference != -1){
  373. if(!this.fireStartType){
  374. this.$set(this,'fireStartType',true);
  375. this.sendCode2(data.data.timeDifference);
  376. }
  377. }
  378. }else{
  379. this.$set(this,'fireListType',false);
  380. this.$set(this,'fireCode',null);
  381. }
  382. }else{
  383. this.$set(this,'fireType',false);
  384. }
  385. this.mqttInfo()
  386. }
  387. },
  388. //启动灭火设备
  389. async firedeviceStart() {
  390. let _this = this;
  391. let obj={
  392. subjectId:this.subId,
  393. deviceCode:_this.fireCode
  394. }
  395. const {data} = await firedeviceStart(obj)
  396. if (data.code == 200) {
  397. if (data.data.online) {
  398. _this.dialogVisible = true;
  399. _this.$set(this,'fireListType',data.data.online);
  400. _this.countdown = data.data.waitTime;//灭火倒计时
  401. _this.sendCode() //倒计时
  402. } else {
  403. wx.showToast({
  404. title: '一键灭火启动失败!',
  405. icon: "none",
  406. duration: 6000
  407. });
  408. }
  409. }
  410. },
  411. //取消灭火设备
  412. async firedeviceCancel() {
  413. let _this = this;
  414. const {data} = await firedeviceCancel(_this.itemData.subjectId)
  415. if (data.code == 200) {
  416. wx.showToast({
  417. title: '放弃一键灭火!',
  418. icon: "none",
  419. duration: 2000
  420. });
  421. }
  422. },
  423. //一键灭火按钮
  424. outfireFun() {
  425. let _this = this;
  426. uni.showModal({
  427. title: "是否确认执行一键灭火?",
  428. content: '该操作存在风险,请您务必确认实验室内人员已安全撤离?',
  429. cancelColor: "#999",
  430. confirmColor: "#0183FA",
  431. success: function(res) {
  432. if (res.confirm) {
  433. _this.firedeviceStart(); //启动灭火设备
  434. } else if (res.cancel) {
  435. }
  436. }
  437. });
  438. },
  439. //一键灭火弹出层关闭
  440. dialogOutfire() {
  441. this.dialogVisible = !this.dialogVisible
  442. this.clearTimer(); //关闭定时器
  443. },
  444. //取消一键灭火
  445. cancelOutfire() {
  446. this.dialogVisible = false;
  447. this.clearTimer(); //关闭定时器
  448. this.firedeviceCancel()
  449. },
  450. //倒计时
  451. sendCode() {
  452. let _this = this;
  453. _this.loading(); //启动定时器
  454. _this.timer2 = setInterval(() => {
  455. //创建定时器
  456. if (_this.countdown === 1) {
  457. _this.clearTimer(); //关闭定时器
  458. } else {
  459. _this.loading();
  460. }
  461. }, 1000);
  462. },
  463. loading() {
  464. //启动定时器
  465. this.countdown--; //定时器减1
  466. },
  467. clearTimer() {
  468. //清除定时器
  469. clearInterval(this.timer2);
  470. this.timer2 = null;
  471. this.dialogVisible = false;
  472. },
  473. //进行中倒计时
  474. sendCode2(time) {
  475. let _this = this;
  476. _this.conductCountdown=time
  477. _this.loading2(); //启动定时器
  478. _this.timer3 = setInterval(() => {
  479. //创建定时器
  480. if (_this.conductCountdown <= 1) {
  481. _this.clearTimer2(); //关闭定时器
  482. _this.outfireEnd = true; //灭火倒计时结束
  483. _this.fireStartType = false; //灭火状态
  484. console.log()
  485. } else {
  486. _this.loading2();
  487. }
  488. }, 1000);
  489. },
  490. loading2() {
  491. //启动定时器
  492. this.conductCountdown--; //定时器减1
  493. },
  494. clearTimer2() {
  495. //清除定时器
  496. clearInterval(this.timer3);
  497. this.timer3 = null;
  498. },
  499. //详情页面MQTT
  500. mqttInfo(){
  501. let list = [];
  502. let obj = {
  503. type:"lab/function/data",
  504. idList:[this.itemData.id],
  505. }
  506. let objOne = {
  507. type:"lab/hardware/data",
  508. idList:[this.itemData.id],
  509. }
  510. let objTow = {
  511. type:"lab/fireDevice/Warn/",
  512. fireCode:this.fireCode,
  513. }
  514. let objThree = {
  515. type:"lab/fireDevice/isOnline/",
  516. fireCode:this.fireCode,
  517. }
  518. let objFour = {
  519. type:"lab/fireDevice/executing/",
  520. fireCode:this.fireCode,
  521. }
  522. list.push(obj);
  523. list.push(objOne);
  524. list.push(objTow);
  525. list.push(objThree);
  526. list.push(objFour);
  527. // mqtt订阅因为返回数据频率问题 暂时取消列表的MQTT刷新
  528. getApp().appMqttOn(1,list);
  529. },
  530. //查询详情
  531. async laboratoryInfo(){
  532. let self = this;
  533. let id = uni.getStorageSync('saoCodeId');
  534. const {data} = await laboratoryInfo(id);
  535. if(data.code == 200){
  536. uni.removeStorageSync('saoCodeId')
  537. this.itemData = data.data[0];
  538. self.itemData.videoNum = 0;
  539. self.itemData.hardwareNUM = "";
  540. this.itemData.safeUserName = this.itemData.safeInfo.safeUserName
  541. this.itemData.safePhone = this.itemData.safeInfo.safePhone
  542. if(this.itemData.safeInfo.hazardCategory){
  543. this.itemData.hazardCategory = this.itemData.safeInfo.hazardCategory
  544. }
  545. if(this.itemData.safeInfo.riskMeasure){
  546. this.itemData.riskMeasure = this.itemData.safeInfo.riskMeasure
  547. }
  548. if(this.itemData.safeInfo.safeSigns){
  549. this.itemData.safeSigns = this.itemData.safeInfo.safeSigns
  550. }
  551. if(this.itemData.safeInfo.outfire){
  552. this.itemData.outfire = this.itemData.safeInfo.outfire
  553. }
  554. if(this.itemData.safeInfo.safeUserNameAdminPhone){
  555. let list = [];
  556. let newList = [];
  557. list = this.itemData.safeInfo.safeUserNameAdminPhone.split(",");
  558. for(let i=0;i<list.length;i++){
  559. list[i] = list[i].split("@");
  560. let obj = {
  561. name:list[i][0],
  562. phone:list[i][1]
  563. }
  564. newList.push(obj);
  565. }
  566. this.itemData.safeInfo.safeUser = newList;
  567. }
  568. if(this.itemData.safeInfo.adminNameAndPhone){
  569. let list = [];
  570. let newList = [];
  571. list = this.itemData.safeInfo.adminNameAndPhone.split(",");
  572. for(let i=0;i<list.length;i++){
  573. list[i] = list[i].split("@");
  574. let obj = {
  575. name:list[i][0],
  576. phone:list[i][1]
  577. }
  578. newList.push(obj);
  579. }
  580. this.itemData.safeInfo.subAdmin = newList;
  581. }
  582. this.infoMaxBoxType = true;
  583. //循环判断如果是排风扇的话,启动的时候是人工还是预案还是定时
  584. for(let i=0;i<self.itemData.labHardwareVOList.length;i++){
  585. if(self.itemData.labHardwareVOList[i].hardwareTypeEnum.hardwareTypeCode == '2'){
  586. for(let b=0;b<self.fanList.length;b++){
  587. if(self.fanList[b].dictValue==self.itemData.labHardwareVOList[i].triggerModes){
  588. self.itemData.labHardwareVOList[i].dictLabel=self.fanList[b].dictLabel
  589. }
  590. }
  591. }
  592. }
  593. }
  594. },
  595. //一键灭火-传感器状态异常
  596. getMqttfireData(val){
  597. let self = this;
  598. if(val){
  599. //传感器状态
  600. console.log('传感器状态');
  601. self.firedeviceStatus();
  602. }
  603. },
  604. //一键灭火-是否正在执行灭火操作
  605. getMqttPerformData(val){
  606. let self = this;
  607. if(val){
  608. //灭火执行操作
  609. if(val.fireStatus == 1){
  610. if(!self.fireStartType){
  611. self.firedeviceStatus();
  612. }else if(val.fireStatus == 0){
  613. uni.showToast({
  614. title: '一键灭火启动失败',
  615. icon: "none",
  616. mask: true,
  617. duration: 2000
  618. });
  619. }
  620. }
  621. }
  622. },
  623. //监听传感器信息
  624. getMqttSensorData(val){
  625. let self = this;
  626. if(val.subId){
  627. if(self.itemData.id == val.subId){
  628. self.$set(self.itemData,'sensorFunctionList',val.functionStatuses);
  629. }
  630. }
  631. },
  632. //监听设备信息
  633. getMqttDeviceData(val){
  634. let self = this;
  635. //console.log('页面获取的-设备信息',val)
  636. for(let i=0;i<val.length;i++){
  637. for(let k=0;k<self.itemData.labHardwareVOList.length;k++){
  638. if(val[i].num == self.itemData.labHardwareVOList[k].id){
  639. if(val[i].hardwareOperate == 'CLOSE'){
  640. self.itemData.labHardwareVOList[k].state.code = 4;
  641. }else if(val[i].hardwareOperate == 'OPEN'){
  642. self.itemData.labHardwareVOList[k].state.code = 3;
  643. }else if(val[i].hardwareOperate == 'OFFLINE'){
  644. self.itemData.labHardwareVOList[k].state.code = 0;
  645. }else if(val[i].hardwareOperate == 'ONLINE'){
  646. self.itemData.labHardwareVOList[k].state.code = 2;
  647. }
  648. }
  649. if(self.itemData.labHardwareVOList[k].hardwareTypeEnum.hardwareTypeCode == '2'){
  650. for(let b=0;b<self.fanList.length;b++){
  651. if(self.fanList[b].dictValue==self.itemData.labHardwareVOList[k].triggerModes){
  652. self.itemData.labHardwareVOList[k].dictLabel=self.fanList[b].dictLabel
  653. }
  654. }
  655. }
  656. }
  657. }
  658. },
  659. infoMaxBoxClick(){
  660. this.infoMaxBoxType = !this.infoMaxBoxType;
  661. },
  662. async getSafetyWarning(){
  663. const {data} = await getDicts('sys_safety_warning');
  664. if(data.code == 200){
  665. this.safetyWarning = data.data;
  666. }
  667. },
  668. async getHazardCategory(){
  669. const {data} = await getDicts('sys_hazard_category');
  670. if(data.code == 200){
  671. this.hazardCategory = data.data;
  672. }
  673. },
  674. async getRiskMeasure(){
  675. const {data} = await getDicts('sys_risk_measure');
  676. if(data.code == 200){
  677. this.riskMeasure = data.data;
  678. }
  679. },
  680. async getExtinguishingKeyPoints(){
  681. const {data} = await getDicts('sys_extinguishing_key_points');
  682. if(data.code == 200){
  683. this.extinguishingKeyPoints = data.data;
  684. }
  685. },
  686. //MQTT订阅-传感器
  687. subscriptionMQTT(){
  688. let self = this;
  689. const mqttOptions = {
  690. keepalive: 30,
  691. clean: false,//保留会话
  692. connectTimeout: 5000, // 超时时间
  693. reconnectPeriod:5000, // 重连间隔
  694. clientId: 'lab/function/data',
  695. username: uni.getStorageSync('mqttUser'),
  696. password: uni.getStorageSync('mqttPassword'),
  697. }
  698. const connectUrl = uni.getStorageSync('mqttUrl');
  699. this.client = $mqtt.connect('wxs://' + connectUrl, mqttOptions);
  700. this.client.on('connect', () => {
  701. // 这是为了给自己发条消息,其它无作用
  702. this.client.subscribe(this.mtopic, (err) => {
  703. if (!err) {
  704. console.log("订阅传感器成功",this.mtopic)
  705. }
  706. })
  707. this.client.subscribe(this.mtopicOne, (err) => {
  708. if (!err) {
  709. console.log("订阅设备成功",this.mtopicOne)
  710. }
  711. })
  712. });
  713. // 自动重连
  714. this.client.on('reconnect', (msg) => {
  715. console.log('reconnect', msg)
  716. });
  717. // 错误
  718. this.client.on('error', () => {
  719. console.log('error')
  720. });
  721. // 断开
  722. this.client.on('end', () => {
  723. console.log('end')
  724. });
  725. // 掉线
  726. this.client.on('offline', (msg) => {
  727. console.log('offline',msg)
  728. });
  729. // 收到消息
  730. this.client.on('message', (topic, message) => {
  731. let data = JSON.parse(message)
  732. console.log('topic',topic)
  733. console.log('data',data)
  734. if(topic == this.mtopic){
  735. if(data.data.subId){
  736. if(self.itemData.id == data.data.subId){
  737. self.$set(self.itemData,'sensorFunctionList',data.data.functionStatuses);
  738. }
  739. }
  740. }else if(topic == this.mtopicOne){
  741. for(let i=0;i<data.data.length;i++){
  742. for(let k=0;k<self.itemData.labHardwareVOList.length;k++){
  743. if(data.data[i].num == self.itemData.labHardwareVOList[k].id){
  744. if(data.data[i].hardwareOperate == 'CLOSE'){
  745. self.itemData.labHardwareVOList[k].state.code = 4;
  746. }else if(data.data[i].hardwareOperate == 'OPEN'){
  747. self.itemData.labHardwareVOList[k].state.code = 3;
  748. }else if(data.data[i].hardwareOperate == 'OFFLINE'){
  749. self.itemData.labHardwareVOList[k].state.code = 0;
  750. }else if(data.data[i].hardwareOperate == 'ONLINE'){
  751. self.itemData.labHardwareVOList[k].state.code = 2;
  752. }
  753. }
  754. }
  755. }
  756. }
  757. })
  758. // 全局监听是否有关闭mqtt的消息的事件
  759. uni.$on('closeMqtt',() => {
  760. this.client.end(true); // 主动断开连接
  761. })
  762. },
  763. //取消订阅关闭MQTT连接
  764. offMQTT(){
  765. this.client.unsubscribe(this.mtopic, error => {
  766. if (error) {
  767. console.log('Unsubscribe error', error)
  768. }
  769. })
  770. this.client.end();
  771. this.client = {};
  772. },
  773. pcTypeButtonClick(id){
  774. let self = this;
  775. uni.showModal({
  776. content: '确认要操作该设备吗?',
  777. cancelColor:"#999",
  778. confirmColor:"#0183FA",
  779. success: function (res) {
  780. if (res.confirm) {
  781. self.controlSwitch(id);
  782. console.log('用户点击确定');
  783. } else if (res.cancel) {
  784. console.log('用户点击取消');
  785. }
  786. }
  787. });
  788. },
  789. async controlSwitch(id){
  790. const {data} = await controlSwitch({id:id});
  791. if(data.code == 200){
  792. uni.showToast({
  793. title: '操作成功',
  794. icon:"none",
  795. mask:true,
  796. duration: 2000
  797. });
  798. }
  799. },
  800. //设备开关按钮
  801. hardwareButton(minItem,command){
  802. let self = this;
  803. let text = '';
  804. if(command == 'close'){
  805. text = '关闭';
  806. }else if(command == 'open'){
  807. text = '开启';
  808. }
  809. uni.showModal({
  810. content: '确认要'+text+'吗?',
  811. cancelColor:"#999",
  812. confirmColor:"#0183FA",
  813. success: function (res) {
  814. if (res.confirm) {
  815. self.mangerControl(minItem,command);
  816. console.log('用户点击确定');
  817. } else if (res.cancel) {
  818. console.log('用户点击取消');
  819. }
  820. }
  821. });
  822. },
  823. //设备开关
  824. async mangerControl(minItem,command){
  825. let obj = {
  826. id:minItem.id,
  827. command:command,
  828. };
  829. const {data} = await mangerControl(obj);
  830. if(data.code == 200){
  831. if(command == 'open'){
  832. minItem.type = 3;
  833. }else if(command == 'close'){
  834. minItem.type = 4;
  835. }
  836. uni.showToast({
  837. title: '操作成功',
  838. icon:"none",
  839. mask:true,
  840. duration: 2000
  841. });
  842. }
  843. },
  844. //获取喇叭列表
  845. async getDeviceListBySub() {
  846. let _this=this;
  847. let obj = {
  848. subId: _this.subId,
  849. floorId: _this.itemData.subAddrr.floorId,
  850. page: 1,
  851. pageSize: 100,
  852. };
  853. const {
  854. data
  855. } = await getDeviceListBySub(obj)
  856. if (data.code == 200) {
  857. for (let i = 0; i < data.data.length; i++) {
  858. data.data[i].type = false;
  859. }
  860. this.$set(this, 'trumpetList', data.data)
  861. }
  862. },
  863. //点击选择喇叭
  864. trumpetClick(index) {
  865. this.trumpetList[index].type = !this.trumpetList[index].type
  866. },
  867. //录制
  868. recordButton(e) {
  869. console.log("按下")
  870. let self = this;
  871. let num = 0;
  872. for (let i = 0; i < self.trumpetList.length; i++) {
  873. if (self.trumpetList[i].type) {
  874. num++
  875. }
  876. }
  877. if (num == 0) {
  878. uni.showToast({
  879. title: '请选择喇叭',
  880. icon: "none",
  881. mask: true,
  882. duration: 2000
  883. });
  884. return
  885. }
  886. this.liveType = true;
  887. console.log('录制', e)
  888. this.startPoint = e.touches[0]; //记录长按时开始点信息,后面用于计算上划取消时手指滑动的距离。
  889. const options = {
  890. duration: 10000,
  891. sampleRate: 16000,
  892. numberOfChannels: 1,
  893. encodeBitRate: 48000,
  894. format: 'mp3',
  895. frameSize: 50
  896. }
  897. this.recorderManager.start(options); //开始录音
  898. this.recorderManager.onStart(() => {
  899. console.log('recorder start')
  900. })
  901. this.recorderManager.onError((res) => {
  902. console.log(res);
  903. })
  904. wx.showToast({
  905. title: "正在录音,上划取消发送",
  906. icon: "none",
  907. duration: 60000 //先定义个60秒,后面可以手动调用wx.hideToast()隐藏
  908. });
  909. this.sendLock = false; //长按时是不上锁的。
  910. },
  911. //取消
  912. cancelButton(e) {
  913. console.log("移动")
  914. let self = this;
  915. let num = 0;
  916. for (let i = 0; i < self.trumpetList.length; i++) {
  917. if (self.trumpetList[i].type) {
  918. num++
  919. }
  920. }
  921. if (num == 0) {
  922. return
  923. }
  924. this.liveType = false;
  925. console.log('取消', e)
  926. let moveLenght = e.touches[e.touches.length - 1].clientY - this.startPoint.clientY; //移动距离
  927. if (Math.abs(moveLenght) > 50) {
  928. wx.showToast({
  929. title: "松开手指,取消发送",
  930. icon: "none",
  931. duration: 60000
  932. });
  933. this.sendLock = true; //触发了上滑取消发送,上锁
  934. } else {
  935. wx.showToast({
  936. title: "正在录音,上划取消发送",
  937. icon: "none",
  938. duration: 60000
  939. });
  940. this.sendLock = false; //上划距离不足,依然可以发送,不上锁
  941. }
  942. },
  943. //发送
  944. sendButton(e) {
  945. console.log("松开")
  946. let self = this;
  947. let num = 0;
  948. for (let i = 0; i < self.trumpetList.length; i++) {
  949. if (self.trumpetList[i].type) {
  950. num++
  951. }
  952. }
  953. if (num == 0) {
  954. return
  955. }
  956. this.liveType = false;
  957. console.log('发送', e)
  958. wx.hideToast(); //结束录音、隐藏Toast提示框
  959. this.recorderManager.stop(); //结束录音
  960. this.recorderManager.onStop((res) => {
  961. if (!this.sendLock) {
  962. console.log('1', this.recorderManager)
  963. this.uploadImg(res.tempFilePath);
  964. }
  965. console.log('停止录音', res.tempFilePath)
  966. console.log("sendLock", this.sendLock);
  967. })
  968. },
  969. //上传MP3
  970. async uploadImg(tempFilePaths) {
  971. var self = this;
  972. uni.uploadFile({
  973. url: config.base_url + '/base/file/upload', //仅为示例,非真实的接口地址
  974. header: {
  975. 'Authorization': uni.getStorageSync('token')
  976. },
  977. filePath: tempFilePaths,
  978. name: 'file',
  979. formData: {
  980. 'user': 'test'
  981. },
  982. success: (uploadFileRes) => {
  983. let res = JSON.parse(uploadFileRes.data);
  984. if (res.code == 200) {
  985. console.log("上传成功", res)
  986. self.textParseUrlIps(config.base_url + '/' + res.data.url);
  987. } else {
  988. uni.showToast({
  989. title: res.msg,
  990. icon: "none",
  991. mask: true,
  992. duration: 2000
  993. });
  994. }
  995. },
  996. fail: err => {
  997. uni.hideLoading()
  998. },
  999. complete: () => {}
  1000. });
  1001. },
  1002. //发送语音
  1003. async textParseUrlIps(text) {
  1004. let self = this;
  1005. let newList = [];
  1006. for (let i = 0; i < self.trumpetList.length; i++) {
  1007. if (self.trumpetList[i].type) {
  1008. let obj = {
  1009. sn: self.trumpetList[i].deviceSn,
  1010. port: self.trumpetList[i].port,
  1011. deviceIp: self.trumpetList[i].deviceIp,
  1012. type: "",
  1013. name: "",
  1014. speed: "",
  1015. params: {
  1016. tid: "",
  1017. vol: self.trumpetList[i].deviceVol,
  1018. urls: []
  1019. }
  1020. };
  1021. newList.push(obj);
  1022. }
  1023. }
  1024. const {
  1025. data
  1026. } = await textParseUrlIps(newList, text)
  1027. if (data.code == 200) {
  1028. uni.showToast({
  1029. title: '发送成功',
  1030. icon: "none",
  1031. mask: true,
  1032. duration: 2000
  1033. });
  1034. }
  1035. },
  1036. goVideo(){
  1037. this.itemData.floorId = this.itemData.subAddrr.floorId;
  1038. uni.navigateTo({
  1039. url:'/pages_manage/workbench/laboratory/monitor?item='+encodeURIComponent(JSON.stringify(this.itemData))+'&deptId='+this.deptId
  1040. })
  1041. },
  1042. goWord(){
  1043. uni.navigateTo({
  1044. url:'/pages_manage/workbench/laboratory/word?item='+encodeURIComponent(JSON.stringify(this.itemData))
  1045. })
  1046. },
  1047. },
  1048. onHide(){
  1049. // //删除传感器监听
  1050. getApp().deleteSensorWatch();
  1051. // //删除设备监听
  1052. getApp().deleteDeviceWatch();
  1053. //删除一键灭火-传感器状态
  1054. getApp().deletefireData();
  1055. //删除一键灭火-设备是否在线
  1056. getApp().deleteOnlineData();
  1057. //删除一键灭火-是否正在执行灭火
  1058. getApp().deletePerformData();
  1059. },
  1060. beforeDestroy(){
  1061. // //删除传感器监听
  1062. getApp().deleteSensorWatch();
  1063. // //删除设备监听
  1064. getApp().deleteDeviceWatch();
  1065. //删除一键灭火-传感器状态
  1066. getApp().deletefireData();
  1067. //删除一键灭火-设备是否在线
  1068. getApp().deleteOnlineData();
  1069. //删除一键灭火-是否正在执行灭火
  1070. getApp().deletePerformData();
  1071. }
  1072. }
  1073. </script>
  1074. <style lang="stylus" scoped>
  1075. #laboratoryInfo{
  1076. height:100%;
  1077. display flex;
  1078. flex-direction column;
  1079. /* 语音广播 */
  1080. .shade-max-big-box {
  1081. height: 100%;
  1082. width: 100%;
  1083. position: fixed;
  1084. display: flex;
  1085. flex-direction: column;
  1086. z-index: 10;
  1087. background: rgba(0, 0, 0, 0.2);
  1088. .null-box {
  1089. flex: 1;
  1090. }
  1091. /* 语音广播-执行疏散 */
  1092. .broadcast {
  1093. width: 100%;
  1094. // height: 532rpx;
  1095. background: #FFFFFF;
  1096. border-top-left-radius: 20rpx;
  1097. border-top-right-radius: 20rpx;
  1098. padding:22rpx 30rpx 30rpx;
  1099. box-sizing: border-box;
  1100. margin-top: 20rpx;
  1101. .broadcast_t {
  1102. font-size: 30rpx;
  1103. font-family: PingFang SC;
  1104. font-weight: 500;
  1105. color: #333333;
  1106. line-height: 30rpx;
  1107. >label {
  1108. font-size: 24rpx;
  1109. font-family: PingFang SC;
  1110. font-weight: 500;
  1111. color: #999999;
  1112. line-height: 30rpx;
  1113. margin-left: 16rpx;
  1114. }
  1115. }
  1116. .trumpet-max-box {
  1117. display: flex;
  1118. justify-content: flex-start;
  1119. margin-top: 22rpx;
  1120. flex-wrap: wrap;
  1121. .trumpet-for-box {
  1122. display: inline-block;
  1123. width: auto;
  1124. height: 60rpx;
  1125. line-height: 60rpx;
  1126. font-size: 24rpx;
  1127. text-align: center;
  1128. cursor: pointer;
  1129. overflow: hidden;
  1130. border: 1rpx solid #E0E0E0;
  1131. border-radius: 10rpx;
  1132. color: #E0E0E0;
  1133. display: flex;
  1134. justify-content: center;
  1135. margin-right: 20rpx;
  1136. margin-bottom: 10rpx;
  1137. padding: 0 12rpx;
  1138. box-sizing: border-box;
  1139. >img {
  1140. width: 36rpx;
  1141. height: 34rpx;
  1142. margin: 12rpx 20rpx 0 25rpx;
  1143. }
  1144. }
  1145. .trumpet-color-a {
  1146. border: 1px solid #0183FA;
  1147. color: #0183FA;
  1148. }
  1149. .trumpet-color-b {
  1150. border: 1px solid #CCCCCC;
  1151. color: #999;
  1152. }
  1153. }
  1154. .broadcast_m {
  1155. width: 100%;
  1156. .broadcast_m_t {
  1157. width: 142rpx;
  1158. height: 142rpx;
  1159. margin: 30rpx 0 0 258rpx;
  1160. position: relative;
  1161. font-size: 24rpx;
  1162. font-family: PingFang SC;
  1163. font-weight: 500;
  1164. line-height: 170rpx;
  1165. text-align: center;
  1166. >img {
  1167. width: 142rpx;
  1168. height: 142rpx;
  1169. position: absolute;
  1170. }
  1171. >label {
  1172. width: 100%;
  1173. font-size: 24rpx;
  1174. font-family: PingFang SC;
  1175. font-weight: 500;
  1176. color: #0183FA;
  1177. line-height: 24rpx;
  1178. display: inline-block;
  1179. text-align: center;
  1180. position: absolute;
  1181. top: 76rpx;
  1182. }
  1183. /* 按下 */
  1184. .press_color {
  1185. color: #FFFFFF;
  1186. }
  1187. /* 松开 */
  1188. .slip_color {
  1189. color: #0183FA;
  1190. }
  1191. }
  1192. .broadcast_m_t_back_a {
  1193. background: url(@/images/icon_sskz_skfs.png);
  1194. background-size: 100%;
  1195. color: #FFFFFF;
  1196. }
  1197. .broadcast_m_t_back_b {
  1198. background: url(@/images/icon_sskz_azsh.png);
  1199. background-size: 100%;
  1200. color: #0183FA;
  1201. }
  1202. .broadcast_m_b {
  1203. font-size: 24rpx;
  1204. font-family: PingFang SC;
  1205. font-weight: 500;
  1206. color: #999999;
  1207. line-height: 24rpx;
  1208. text-align: center;
  1209. margin-top: 14rpx;
  1210. }
  1211. }
  1212. /* 疏散按钮 */
  1213. .evacuation-button-box {
  1214. width: 650rpx;
  1215. height: 100rpx;
  1216. background: #0183FA;
  1217. color: #fff;
  1218. text-align center;
  1219. line-height: 100rpx;
  1220. font-size: 28rpx;
  1221. margin: 88rpx auto 0;
  1222. border-radius: 20rpx;
  1223. }
  1224. }
  1225. }
  1226. /* 一键灭火 */
  1227. .outfire {
  1228. width: 750rpx;
  1229. height: auto;
  1230. background: #FFFFFF;
  1231. margin: 20rpx 0;
  1232. padding: 20rpx 10rpx;
  1233. box-sizing: border-box;
  1234. display: flex;
  1235. justify-content: space-between;
  1236. align-items: center;
  1237. .outfire_li {
  1238. display: flex;
  1239. justify-content: flex-start;
  1240. //align-items: center;
  1241. >img {
  1242. width: 24rpx;
  1243. height: 30rpx;
  1244. margin-right: 12rpx;
  1245. margin-top: 8rpx;
  1246. }
  1247. .finish{
  1248. flex: 1;
  1249. }
  1250. .normal {
  1251. font-size: 24rpx;
  1252. font-family: PingFang SC;
  1253. font-weight: 500;
  1254. color: #333333;
  1255. }
  1256. .abnormal {
  1257. font-size: 24rpx;
  1258. font-family: PingFang SC;
  1259. font-weight: 500;
  1260. color: #F11C00;
  1261. }
  1262. }
  1263. .outfire_li:nth-of-type(1) {
  1264. >img {
  1265. width: 30rpx;
  1266. height: 28rpx;
  1267. margin-right: 12rpx;
  1268. }
  1269. }
  1270. .outfire_yes_btn {
  1271. width: 120rpx;
  1272. height: 40rpx;
  1273. font-size: 24rpx;
  1274. font-family: PingFang SC;
  1275. font-weight: 500;
  1276. color: #F21C00;
  1277. line-height: 40rpx;
  1278. border: 1px solid #F21C00;
  1279. border-radius: 8rpx;
  1280. text-align: center;
  1281. margin-left: 54rpx;
  1282. }
  1283. .outfire_no_btn {
  1284. width: 120rpx;
  1285. height: 40rpx;
  1286. font-size: 24rpx;
  1287. font-family: PingFang SC;
  1288. font-weight: 500;
  1289. color: #CCCCCC;
  1290. line-height: 40rpx;
  1291. border: 1px solid #E0E0E0;
  1292. border-radius: 8rpx;
  1293. text-align: center;
  1294. margin-left: 54rpx;
  1295. }
  1296. }
  1297. /* 一键灭火 */
  1298. .shade-outfire {
  1299. height: 100%;
  1300. width: 100%;
  1301. position: fixed;
  1302. display: flex;
  1303. flex-direction: column;
  1304. z-index: 10;
  1305. background: rgba(0, 0, 0, 0.2);
  1306. .null-box {
  1307. flex: 1;
  1308. }
  1309. .shade-outfire-n {
  1310. width: 625rpx;
  1311. height: 450rpx;
  1312. background: #FFFFFF;
  1313. border-radius: 20rpx;
  1314. position: absolute;
  1315. top: 370rpx;
  1316. left: 62rpx;
  1317. .shade-outfire-n-t {
  1318. width: 172rpx;
  1319. height: 172rpx;
  1320. margin: 38rpx 0 0 226rpx;
  1321. }
  1322. .shade-outfire-n-m {
  1323. font-size: 30rpx;
  1324. font-family: PingFang SC;
  1325. font-weight: 500;
  1326. color: #E30000;
  1327. line-height: 84rpx;
  1328. text-align: center;
  1329. border-bottom: 1px solid #E0E0E0;
  1330. >text {
  1331. font-size: 40rpx;
  1332. }
  1333. }
  1334. .shade-outfire-n-b {
  1335. width: 402rpx;
  1336. height: 82rpx;
  1337. background: #FFFFFF;
  1338. border: 2rpx solid #0183FA;
  1339. border-radius: 10rpx;
  1340. font-size: 28rpx;
  1341. line-height: 82rpx;
  1342. font-family: PingFang SC;
  1343. font-weight: 500;
  1344. color: #0183FA;
  1345. text-align: center;
  1346. margin: 30rpx 0 0 112rpx;
  1347. }
  1348. }
  1349. }
  1350. .name-max-box{
  1351. background #fff
  1352. .title-box{
  1353. margin:20rpx 20rpx 0;
  1354. display flex
  1355. view:nth-child(1){
  1356. height:40rpx;
  1357. line-height:40rpx;
  1358. font-size:20rpx;
  1359. border-radius:10rpx;
  1360. padding:0 20rpx;
  1361. color:#fff;
  1362. margin-right:20rpx;
  1363. }
  1364. view:nth-child(2){
  1365. line-height:42rpx;
  1366. font-size:30rpx;
  1367. color:#0183FA;
  1368. max-width:600rpx;
  1369. flex:1;
  1370. }
  1371. img{
  1372. width:12rpx;
  1373. height:20rpx;
  1374. margin-top:11rpx;
  1375. }
  1376. .colorA{
  1377. background:#aa2315;
  1378. }
  1379. .colorB{
  1380. background:#ff9b09;
  1381. }
  1382. .colorC{
  1383. background:#3ea3e9;
  1384. }
  1385. .colorD{
  1386. background:#3ea34c;
  1387. }
  1388. }
  1389. .address-box{
  1390. margin:20rpx 20rpx;
  1391. font-size:26rpx;
  1392. color:#999999;
  1393. span{
  1394. margin-right:60rpx;
  1395. }
  1396. }
  1397. .address-box-two{
  1398. display flex
  1399. margin:0 20rpx 20rpx 20rpx;
  1400. img{
  1401. width:28rpx;
  1402. height:30rpx;
  1403. margin-right:18rpx;
  1404. }
  1405. view{
  1406. line-height:30rpx;
  1407. font-size:24rpx;
  1408. color:#999999;
  1409. }
  1410. }
  1411. }
  1412. .title-max-box-none{
  1413. border:none!important;
  1414. }
  1415. .title-max-box{
  1416. display flex
  1417. height:80rpx;
  1418. border-bottom:1rpx solid #E0E0E0;
  1419. .left-view{
  1420. width: 4rpx;
  1421. height: 34rpx;
  1422. margin:25rpx 24rpx 0 20rpx;
  1423. background:#0D97EB;
  1424. }
  1425. .right-view{
  1426. line-height:80rpx;
  1427. font-size: 30rpx;
  1428. color: #333333;
  1429. flex:1;
  1430. }
  1431. .click-view{
  1432. display flex
  1433. padding:0 20rpx;
  1434. view{
  1435. line-height:80rpx;
  1436. font-size: 24rpx;
  1437. color: #666666;
  1438. }
  1439. img{
  1440. width:20rpx;
  1441. height:10rpx;
  1442. margin:35rpx 0 0 20rpx;
  1443. }
  1444. }
  1445. }
  1446. .sensor-max-box{
  1447. background #fff
  1448. margin-top:20rpx;
  1449. .text-box{
  1450. /*border-top:1rpx dashed #e0e0e0;*/
  1451. /*border-top:1rpx solid #E0E0E0;*/
  1452. padding:0 20rpx;
  1453. /*
  1454. overflow-x:scroll;
  1455. overflow-y:hidden;
  1456. white-space: nowrap;
  1457. */
  1458. .min-box{
  1459. display inline-block
  1460. /*padding:0 30rpx 0 10rpx;*/
  1461. width:355rpx;
  1462. .min-min-box{
  1463. display: flex
  1464. img{
  1465. width:30rpx;
  1466. height:27rpx;
  1467. margin-top:24rpx;
  1468. margin-right:10rpx;
  1469. }
  1470. view{
  1471. line-height:74rpx;
  1472. text-align center
  1473. font-size:28rpx;
  1474. color:#333;
  1475. }
  1476. .colorA{
  1477. color:#EE3A3A;
  1478. }
  1479. }
  1480. }
  1481. }
  1482. }
  1483. .control-max-box{
  1484. background #fff
  1485. margin-top:20rpx;
  1486. .button-max-box{
  1487. .button-box:last-child{
  1488. border:none!important;
  1489. }
  1490. .button-box{
  1491. display flex
  1492. border-bottom:1rpx solid #e0e0e0;
  1493. margin:0 20rpx;
  1494. view{
  1495. width:200rpx;
  1496. line-height:70rpx;
  1497. border: 2rpx solid #0183FA;
  1498. border-radius: 35rpx;
  1499. color: #0183FA;
  1500. font-size: 24rpx;
  1501. text-align center;
  1502. margin:30rpx 0 30rpx 0;
  1503. }
  1504. view:nth-child(1){
  1505. margin-right: 18rpx;
  1506. }
  1507. view:nth-child(2){
  1508. }
  1509. }
  1510. .for-button-box:last-child{
  1511. border:none!important;
  1512. }
  1513. .for-button-box{
  1514. display flex
  1515. border-bottom:1rpx solid #e0e0e0;
  1516. margin:0 20rpx;
  1517. .for-button-p{
  1518. flex:1;
  1519. line-height:90rpx;
  1520. color:#333333;
  1521. font-size:28rpx;
  1522. >text{
  1523. font-size: 28rpx;
  1524. color: #0183FA;
  1525. }
  1526. }
  1527. img{
  1528. height:50rpx;
  1529. width:100rpx;
  1530. margin:20rpx 0 20rpx 0;
  1531. }
  1532. view:nth-child(2){
  1533. text-align right
  1534. color:#999;
  1535. }
  1536. .pcType-button{
  1537. width:120rpx;
  1538. line-height:42rpx;
  1539. border:4rpx solid #0183FA;
  1540. border-radius:30rpx;
  1541. color: #0183FA !important;
  1542. font-size: 24rpx;
  1543. text-align center !important;
  1544. margin:20rpx 0 20rpx 0;
  1545. }
  1546. }
  1547. }
  1548. }
  1549. .info-max-box{
  1550. background #fff
  1551. margin-top:20rpx;
  1552. .top-name-max-box{
  1553. background #fff
  1554. overflow hidden
  1555. .name-box{
  1556. margin:27rpx 20rpx 0;
  1557. display:flex;
  1558. view:nth-child(1){
  1559. background:#f95f5f;
  1560. color:#fff;
  1561. border-radius:6rpx;
  1562. font-size:20rpx;
  1563. padding:0 10rpx;
  1564. height:42rpx;
  1565. line-height:42rpx;
  1566. }
  1567. view:nth-child(2){
  1568. color:#333;
  1569. margin-left:20rpx;
  1570. font-size:28rpx;
  1571. height:30rpx;
  1572. line-height:42rpx;
  1573. font-weight:700;
  1574. }
  1575. }
  1576. .address-box{
  1577. margin:22rpx 20rpx;
  1578. font-size:26rpx;
  1579. }
  1580. }
  1581. .text-max-box{
  1582. background #fff
  1583. padding:8rpx 20rpx;
  1584. border-bottom:1rpx solid #e0e0e0;
  1585. .text-min-box{
  1586. display:flex;
  1587. view{
  1588. line-height:66rpx;
  1589. height:66rpx;
  1590. font-size:28rpx;
  1591. }
  1592. view:nth-child(1){
  1593. width:220rpx;
  1594. color:#333;
  1595. }
  1596. view:nth-child(2){
  1597. flex:1;
  1598. color:#999;
  1599. text-align:right;
  1600. }
  1601. }
  1602. }
  1603. .safety-max-box{
  1604. background #fff
  1605. padding:8rpx 20rpx;
  1606. .max-for-box{
  1607. .title-box{
  1608. line-height:76rpx;
  1609. font-size:30rpx;
  1610. color:#333;
  1611. }
  1612. .for-box{
  1613. line-height:48rpx;
  1614. font-size:28rpx;
  1615. color:#999;
  1616. }
  1617. }
  1618. }
  1619. .img-bottom-box{
  1620. margin-top:20rpx;
  1621. background #fff
  1622. padding:8rpx 20rpx 20rpx;
  1623. .title-box{
  1624. line-height:76rpx;
  1625. font-size:28rpx;
  1626. color:#333;
  1627. }
  1628. .for-box{
  1629. line-height:48rpx;
  1630. font-size:26rpx;
  1631. color:#999;
  1632. .img-ojb{
  1633. display inline-block
  1634. width:86rpx;
  1635. height:114rpx;
  1636. margin-left:30rpx;
  1637. }
  1638. .code-img{
  1639. width:200rpx;
  1640. height:200rpx;
  1641. margin:20rpx auto 40rpx;
  1642. }
  1643. }
  1644. }
  1645. }
  1646. }
  1647. </style>