laboratoryInfo.vue 25 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804
  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="@/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="@/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. <view class="control-max-box" v-if="!saoCodeType">
  30. <view class="title-max-box">
  31. <view class="left-view"></view>
  32. <view class="right-view">智能控制</view>
  33. </view>
  34. <view class="button-max-box">
  35. <view class="button-box" v-if="itemData.videoNum>0">
  36. <view>视频监控</view>
  37. <view @click="goVideo()">查看</view>
  38. </view>
  39. <view class="button-box">
  40. <view>语音播报</view>
  41. <view @click="goWord()">播放文字</view>
  42. </view>
  43. <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'">
  44. <view>{{minItem.hardwareName}}</view>
  45. <img v-if="minItem.state.code=='3'" src="@/images/icon_10.png" @click="hardwareButton(minItem,'close')">
  46. <img v-if="minItem.state.code=='4'" src="@/images/icon_11.png" @click="hardwareButton(minItem,'open')">
  47. <view v-if="minItem.state.code=='0'">离线</view>
  48. <view v-if="minItem.state.code=='2'" style="color:#0183FA;">在线</view>
  49. </view>
  50. </view>
  51. </view>
  52. <view class="info-max-box">
  53. <view class="title-max-box" :class="{'title-max-box-none':!infoMaxBoxType}">
  54. <view class="left-view"></view>
  55. <view class="right-view">安全信息牌</view>
  56. <view class="click-view" @click="infoMaxBoxClick">
  57. <view>{{infoMaxBoxType?'收起':'展开'}}</view>
  58. <img v-if="infoMaxBoxType" src="@/images/icon_06_1.png">
  59. <img v-else src="@/images/icon_06.png">
  60. </view>
  61. </view>
  62. <view v-if="infoMaxBoxType">
  63. <view class="text-max-box">
  64. <view class="text-min-box">
  65. <view>责任单位:</view>
  66. <view>{{itemData.deptName}}</view>
  67. </view>
  68. <view class="text-min-box">
  69. <view>实验室负责人:</view>
  70. <view>{{itemData.safeInfo.subAdmin[0]?"":"未设置"}}</view>
  71. </view>
  72. <view class="text-min-box" v-for="(item,index) in itemData.safeInfo.subAdmin" :key="index">
  73. <view style="color:#999;">{{item.name}}</view>
  74. <view>{{item.phone?item.phone:'未填写'}}</view>
  75. </view>
  76. <view class="text-min-box">
  77. <view>安全负责人:</view>
  78. <view>{{itemData.safeInfo.safeUser[0]?"":"未设置"}}</view>
  79. </view>
  80. <view class="text-min-box" v-for="(item,index) in itemData.safeInfo.safeUser" :key="index">
  81. <view style="color:#999;">{{item.name}}</view>
  82. <view>{{item.phone?item.phone:'未填写'}}</view>
  83. </view>
  84. </view>
  85. <view class="safety-max-box" v-if="itemData.hazardCategory[0]||itemData.riskMeasure[0]||itemData.outfire[0]">
  86. <view class="max-for-box" v-if="itemData.hazardCategory[0]">
  87. <view class="title-box">主要危险类别</view>
  88. <view class="for-box" v-for="(item,index1) in itemData.hazardCategory" :key="index1">● {{item}}</view>
  89. </view>
  90. <view class="max-for-box" v-if="itemData.riskMeasure[0]">
  91. <view class="title-box">风险防控措施</view>
  92. <view class="for-box" v-for="(item,index1) in itemData.riskMeasure" :key="index1">● {{item}}</view>
  93. </view>
  94. <view class="max-for-box" v-if="itemData.outfire[0]">
  95. <view class="title-box">灭火要点</view>
  96. <view class="for-box" v-for="(item,index1) in itemData.outfire" :key="index1">● {{item}}</view>
  97. </view>
  98. </view>
  99. <view class="img-bottom-box" v-if="itemData.safeSigns[0]||itemData.qrCode">
  100. <view class="title-box">安全警示标识</view>
  101. <view class="for-box">
  102. <img class="img-ojb" src="@/images/icon_aqxxp_jzxy.png" v-if="item == 'xiyan'" v-for="(item,index) in itemData.safeSigns" :key="index">
  103. <img class="img-ojb" src="@/images/icon_aqxxp_jzys.png" v-if="item == 'yinshi'" v-for="(item,index) in itemData.safeSigns" :key="index">
  104. <img class="img-ojb" src="@/images/icon_aqxxp_dxaq.png" v-if="item == 'anquan'" v-for="(item,index) in itemData.safeSigns" :key="index">
  105. <img class="img-ojb" src="@/images/icon_aqxxp_gzf.png" v-if="item == 'gongzuofu'" v-for="(item,index) in itemData.safeSigns" :key="index">
  106. <img class="img-ojb" src="@/images/icon_aqxxp_gbmc.png" v-if="item == 'menchuang'" v-for="(item,index) in itemData.safeSigns" :key="index">
  107. <img class="img-ojb" src="@/images/icon_aqxxp_gbsd.png" v-if="item == 'shuidian'" v-for="(item,index) in itemData.safeSigns" :key="index">
  108. <img v-if="itemData.safeInfo.qrCode" class="code-img" :src="itemData.safeInfo.qrCode">
  109. </view>
  110. </view>
  111. </view>
  112. </view>
  113. </view>
  114. </template>
  115. <script>
  116. import $mqtt from '@/utils/mqtt.min.js';
  117. import { config } from '@/api/request/config.js'
  118. import { mySubjectList,subject_class,listDepartments,mangerControl,getDicts,laboratoryInfo } from '@/api/index.js'
  119. export default {
  120. data() {
  121. return {
  122. itemData:{},
  123. //MQTT请求参数-传感器
  124. mtopic:"lab/function/data",
  125. //MQTT请求参数-设备
  126. mtopicOne:"lab/hardware/data",
  127. msg:"",
  128. client:{},
  129. //安全信息牌
  130. infoMaxBoxType:false,
  131. subject:[],
  132. safetyWarning:[],
  133. hazardCategory:[],
  134. riskMeasure:[],
  135. extinguishingKeyPoints:[],
  136. deptId:"",
  137. saoCodeType:false,
  138. }
  139. },
  140. onLoad(option) {
  141. let self = this;
  142. if(uni.getStorageSync('saoCodeId')){
  143. this.saoCodeType = true;
  144. this.laboratoryInfo();
  145. }else{
  146. if(option.q){
  147. let text = decodeURIComponent(option.q)
  148. console.log('text',text)
  149. let codeId = "";
  150. let newList = text.split("?")[1].split("&")
  151. let list = newList[0].split("=")[1].split("-")
  152. codeId = list[0];
  153. uni.setStorageSync('saoCodeId',codeId)
  154. this.saoCodeType = true;
  155. this.laboratoryInfo();
  156. }else{
  157. this.deptId = JSON.parse(decodeURIComponent(option.deptId));
  158. this.itemData = JSON.parse(decodeURIComponent(option.item));
  159. self.itemData.videoNum = 0;
  160. self.itemData.hardwareNUM = "";
  161. for(let i=0;i<self.itemData.labHardwareVOList.length;i++){
  162. if(self.itemData.labHardwareVOList[i].hardwareTypeEnum.enumName=='VIDEO_MONITOR'){
  163. self.itemData.hardwareNUM = self.itemData.hardwareNUM+self.itemData.labHardwareVOList[i].hardwareNUM+',';
  164. self.itemData.videoNum++
  165. }
  166. }
  167. this.itemData.safeUserName = this.itemData.safeInfo.safeUserName
  168. this.itemData.safePhone = this.itemData.safeInfo.safePhone
  169. if(this.itemData.safeInfo.hazardCategory){
  170. this.itemData.hazardCategory = this.itemData.safeInfo.hazardCategory
  171. }
  172. if(this.itemData.safeInfo.riskMeasure){
  173. this.itemData.riskMeasure = this.itemData.safeInfo.riskMeasure
  174. }
  175. if(this.itemData.safeInfo.safeSigns){
  176. this.itemData.safeSigns = this.itemData.safeInfo.safeSigns
  177. }
  178. if(this.itemData.safeInfo.outfire){
  179. this.itemData.outfire = this.itemData.safeInfo.outfire
  180. }
  181. if(this.itemData.safeInfo.safeUserNameAdminPhone){
  182. let list = [];
  183. let newList = [];
  184. list = this.itemData.safeInfo.safeUserNameAdminPhone.split(",");
  185. for(let i=0;i<list.length;i++){
  186. list[i] = list[i].split("@");
  187. let obj = {
  188. name:list[i][0],
  189. phone:list[i][1]
  190. }
  191. newList.push(obj);
  192. }
  193. this.itemData.safeInfo.safeUser = newList;
  194. }
  195. if(this.itemData.safeInfo.adminNameAndPhone){
  196. let list = [];
  197. let newList = [];
  198. list = this.itemData.safeInfo.adminNameAndPhone.split(",");
  199. for(let i=0;i<list.length;i++){
  200. list[i] = list[i].split("@");
  201. let obj = {
  202. name:list[i][0],
  203. phone:list[i][1]
  204. }
  205. newList.push(obj);
  206. }
  207. this.itemData.safeInfo.subAdmin = newList;
  208. }
  209. this.saoCodeType = false;
  210. }
  211. }
  212. },
  213. onShow(){
  214. if(!this.saoCodeType){
  215. // //监听传感器信息
  216. getApp().watch(this.getMqttSensorData,'mqttSensorData')
  217. // //监听设备信息
  218. getApp().watch(this.getMqttDeviceData,'mqttDeviceData')
  219. }
  220. this.mqttInfo()
  221. },
  222. methods: {
  223. //详情页面MQTT
  224. mqttInfo(){
  225. let list = [];
  226. let obj = {
  227. type:"lab/function/data",
  228. idList:[this.itemData.id],
  229. }
  230. let objOne = {
  231. type:"lab/hardware/data",
  232. idList:[this.itemData.id],
  233. }
  234. list.push(obj);
  235. list.push(objOne);
  236. // mqtt订阅因为返回数据频率问题 暂时取消列表的MQTT刷新
  237. getApp().appMqttOn(1,list);
  238. },
  239. //查询详情
  240. async laboratoryInfo(){
  241. let self = this;
  242. let id = uni.getStorageSync('saoCodeId');
  243. const {data} = await laboratoryInfo(id);
  244. if(data.code == 200){
  245. uni.removeStorageSync('saoCodeId')
  246. this.itemData = data.data[0];
  247. self.itemData.videoNum = 0;
  248. self.itemData.hardwareNUM = "";
  249. this.itemData.safeUserName = this.itemData.safeInfo.safeUserName
  250. this.itemData.safePhone = this.itemData.safeInfo.safePhone
  251. if(this.itemData.safeInfo.hazardCategory){
  252. this.itemData.hazardCategory = this.itemData.safeInfo.hazardCategory
  253. }
  254. if(this.itemData.safeInfo.riskMeasure){
  255. this.itemData.riskMeasure = this.itemData.safeInfo.riskMeasure
  256. }
  257. if(this.itemData.safeInfo.safeSigns){
  258. this.itemData.safeSigns = this.itemData.safeInfo.safeSigns
  259. }
  260. if(this.itemData.safeInfo.outfire){
  261. this.itemData.outfire = this.itemData.safeInfo.outfire
  262. }
  263. if(this.itemData.safeInfo.safeUserNameAdminPhone){
  264. let list = [];
  265. let newList = [];
  266. list = this.itemData.safeInfo.safeUserNameAdminPhone.split(",");
  267. for(let i=0;i<list.length;i++){
  268. list[i] = list[i].split("@");
  269. let obj = {
  270. name:list[i][0],
  271. phone:list[i][1]
  272. }
  273. newList.push(obj);
  274. }
  275. this.itemData.safeInfo.safeUser = newList;
  276. }
  277. if(this.itemData.safeInfo.adminNameAndPhone){
  278. let list = [];
  279. let newList = [];
  280. list = this.itemData.safeInfo.adminNameAndPhone.split(",");
  281. for(let i=0;i<list.length;i++){
  282. list[i] = list[i].split("@");
  283. let obj = {
  284. name:list[i][0],
  285. phone:list[i][1]
  286. }
  287. newList.push(obj);
  288. }
  289. this.itemData.safeInfo.subAdmin = newList;
  290. }
  291. this.infoMaxBoxType = true;
  292. }
  293. },
  294. //监听传感器信息
  295. getMqttSensorData(val){
  296. let self = this;
  297. if(val.subId){
  298. if(self.itemData.id == val.subId){
  299. self.$set(self.itemData,'sensorFunctionList',val.functionStatuses);
  300. }
  301. }
  302. },
  303. //监听设备信息
  304. getMqttDeviceData(val){
  305. let self = this;
  306. // console.log('页面获取的-设备信息',val)
  307. for(let i=0;i<val.length;i++){
  308. for(let k=0;k<self.itemData.labHardwareVOList.length;k++){
  309. if(val[i].num == self.itemData.labHardwareVOList[k].id){
  310. if(val[i].hardwareOperate == 'CLOSE'){
  311. self.itemData.labHardwareVOList[k].state.code = 4;
  312. }else if(val[i].hardwareOperate == 'OPEN'){
  313. self.itemData.labHardwareVOList[k].state.code = 3;
  314. }else if(val[i].hardwareOperate == 'OFFLINE'){
  315. self.itemData.labHardwareVOList[k].state.code = 0;
  316. }else if(val[i].hardwareOperate == 'ONLINE'){
  317. self.itemData.labHardwareVOList[k].state.code = 2;
  318. }
  319. }
  320. }
  321. }
  322. },
  323. infoMaxBoxClick(){
  324. this.infoMaxBoxType = !this.infoMaxBoxType;
  325. },
  326. async getSafetyWarning(){
  327. const {data} = await getDicts('sys_safety_warning');
  328. if(data.code == 200){
  329. this.safetyWarning = data.data;
  330. }
  331. },
  332. async getHazardCategory(){
  333. const {data} = await getDicts('sys_hazard_category');
  334. if(data.code == 200){
  335. this.hazardCategory = data.data;
  336. }
  337. },
  338. async getRiskMeasure(){
  339. const {data} = await getDicts('sys_risk_measure');
  340. if(data.code == 200){
  341. this.riskMeasure = data.data;
  342. }
  343. },
  344. async getExtinguishingKeyPoints(){
  345. const {data} = await getDicts('sys_extinguishing_key_points');
  346. if(data.code == 200){
  347. this.extinguishingKeyPoints = data.data;
  348. }
  349. },
  350. //MQTT订阅-传感器
  351. subscriptionMQTT(){
  352. let self = this;
  353. const mqttOptions = {
  354. keepalive: 30,
  355. clean: false,//保留会话
  356. connectTimeout: 5000, // 超时时间
  357. reconnectPeriod:5000, // 重连间隔
  358. clientId: 'lab/function/data',
  359. username: config.username,
  360. password: config.password,
  361. }
  362. const connectUrl = config.mqtt_url;
  363. this.client = $mqtt.connect('wxs://' + connectUrl, mqttOptions);
  364. this.client.on('connect', () => {
  365. // 这是为了给自己发条消息,其它无作用
  366. this.client.subscribe(this.mtopic, (err) => {
  367. if (!err) {
  368. console.log("订阅传感器成功",this.mtopic)
  369. }
  370. })
  371. this.client.subscribe(this.mtopicOne, (err) => {
  372. if (!err) {
  373. console.log("订阅设备成功",this.mtopicOne)
  374. }
  375. })
  376. });
  377. // 自动重连
  378. this.client.on('reconnect', (msg) => {
  379. console.log('reconnect', msg)
  380. });
  381. // 错误
  382. this.client.on('error', () => {
  383. console.log('error')
  384. });
  385. // 断开
  386. this.client.on('end', () => {
  387. console.log('end')
  388. });
  389. // 掉线
  390. this.client.on('offline', (msg) => {
  391. console.log('offline',msg)
  392. });
  393. // 收到消息
  394. this.client.on('message', (topic, message) => {
  395. let data = JSON.parse(message)
  396. console.log('topic',topic)
  397. console.log('data',data)
  398. if(topic == this.mtopic){
  399. if(data.data.subId){
  400. if(self.itemData.id == data.data.subId){
  401. self.$set(self.itemData,'sensorFunctionList',data.data.functionStatuses);
  402. }
  403. }
  404. }else if(topic == this.mtopicOne){
  405. for(let i=0;i<data.data.length;i++){
  406. for(let k=0;k<self.itemData.labHardwareVOList.length;k++){
  407. if(data.data[i].num == self.itemData.labHardwareVOList[k].id){
  408. if(data.data[i].hardwareOperate == 'CLOSE'){
  409. self.itemData.labHardwareVOList[k].state.code = 4;
  410. }else if(data.data[i].hardwareOperate == 'OPEN'){
  411. self.itemData.labHardwareVOList[k].state.code = 3;
  412. }else if(data.data[i].hardwareOperate == 'OFFLINE'){
  413. self.itemData.labHardwareVOList[k].state.code = 0;
  414. }else if(data.data[i].hardwareOperate == 'ONLINE'){
  415. self.itemData.labHardwareVOList[k].state.code = 2;
  416. }
  417. }
  418. }
  419. }
  420. }
  421. })
  422. // 全局监听是否有关闭mqtt的消息的事件
  423. uni.$on('closeMqtt',() => {
  424. this.client.end(true); // 主动断开连接
  425. })
  426. },
  427. //取消订阅关闭MQTT连接
  428. offMQTT(){
  429. this.client.unsubscribe(this.mtopic, error => {
  430. if (error) {
  431. console.log('Unsubscribe error', error)
  432. }
  433. })
  434. this.client.end();
  435. this.client = {};
  436. },
  437. //设备开关按钮
  438. hardwareButton(minItem,command){
  439. let self = this;
  440. let text = '';
  441. if(command == 'close'){
  442. text = '关闭';
  443. }else if(command == 'open'){
  444. text = '开启';
  445. }
  446. uni.showModal({
  447. content: '确认要'+text+'吗?',
  448. cancelColor:"#999",
  449. confirmColor:"#0183FA",
  450. success: function (res) {
  451. if (res.confirm) {
  452. self.mangerControl(minItem,command);
  453. console.log('用户点击确定');
  454. } else if (res.cancel) {
  455. console.log('用户点击取消');
  456. }
  457. }
  458. });
  459. },
  460. //设备开关
  461. async mangerControl(minItem,command){
  462. let obj = {
  463. id:minItem.id,
  464. command:command,
  465. };
  466. const {data} = await mangerControl(obj);
  467. if(data.code == 200){
  468. if(command == 'open'){
  469. minItem.type = 3;
  470. }else if(command == 'close'){
  471. minItem.type = 4;
  472. }
  473. uni.showToast({
  474. title: '操作成功',
  475. icon:"none",
  476. mask:true,
  477. duration: 2000
  478. });
  479. }
  480. },
  481. goVideo(){
  482. this.itemData.floorId = this.itemData.subAddrr.floorId;
  483. uni.navigateTo({
  484. url:'/pages_manage/workbench/laboratory/monitor?item='+encodeURIComponent(JSON.stringify(this.itemData))+'&deptId='+this.deptId
  485. })
  486. },
  487. goWord(){
  488. uni.navigateTo({
  489. url:'/pages_manage/workbench/laboratory/word?item='+encodeURIComponent(JSON.stringify(this.itemData))
  490. })
  491. },
  492. },
  493. onHide(){
  494. // //删除传感器监听
  495. getApp().deleteSensorWatch();
  496. // //删除设备监听
  497. getApp().deleteDeviceWatch();
  498. console.log("onHide",this.mtopic);
  499. },
  500. beforeDestroy(){
  501. // //删除传感器监听
  502. getApp().deleteSensorWatch();
  503. // //删除设备监听
  504. getApp().deleteDeviceWatch();
  505. console.log("beforeDestroy",this.mtopic);
  506. }
  507. }
  508. </script>
  509. <style lang="stylus" scoped>
  510. #laboratoryInfo{
  511. height:100%;
  512. display flex
  513. flex-direction column
  514. .name-max-box{
  515. background #fff
  516. .title-box{
  517. margin:20rpx 20rpx 0;
  518. display flex
  519. view:nth-child(1){
  520. height:40rpx;
  521. line-height:40rpx;
  522. font-size:20rpx;
  523. border-radius:10rpx;
  524. padding:0 20rpx;
  525. color:#fff;
  526. margin-right:20rpx;
  527. }
  528. view:nth-child(2){
  529. line-height:42rpx;
  530. font-size:30rpx;
  531. color:#0183FA;
  532. max-width:600rpx;
  533. flex:1;
  534. }
  535. img{
  536. width:12rpx;
  537. height:20rpx;
  538. margin-top:11rpx;
  539. }
  540. .colorA{
  541. background:#aa2315;
  542. }
  543. .colorB{
  544. background:#ff9b09;
  545. }
  546. .colorC{
  547. background:#3ea3e9;
  548. }
  549. .colorD{
  550. background:#3ea34c;
  551. }
  552. }
  553. .address-box{
  554. margin:20rpx 20rpx;
  555. font-size:26rpx;
  556. color:#999999;
  557. span{
  558. margin-right:60rpx;
  559. }
  560. }
  561. .address-box-two{
  562. display flex
  563. margin:0 20rpx 20rpx 20rpx;
  564. img{
  565. width:28rpx;
  566. height:30rpx;
  567. margin-right:18rpx;
  568. }
  569. view{
  570. line-height:30rpx;
  571. font-size:24rpx;
  572. color:#999999;
  573. }
  574. }
  575. }
  576. .title-max-box-none{
  577. border:none!important;
  578. }
  579. .title-max-box{
  580. display flex
  581. height:80rpx;
  582. border-bottom:1rpx solid #E0E0E0;
  583. .left-view{
  584. width: 4rpx;
  585. height: 34rpx;
  586. margin:25rpx 24rpx 0 20rpx;
  587. background:#0D97EB;
  588. }
  589. .right-view{
  590. line-height:80rpx;
  591. font-size: 30rpx;
  592. color: #333333;
  593. flex:1;
  594. }
  595. .click-view{
  596. display flex
  597. padding:0 20rpx;
  598. view{
  599. line-height:80rpx;
  600. font-size: 24rpx;
  601. color: #666666;
  602. }
  603. img{
  604. width:20rpx;
  605. height:10rpx;
  606. margin:35rpx 0 0 20rpx;
  607. }
  608. }
  609. }
  610. .sensor-max-box{
  611. background #fff
  612. margin-top:20rpx;
  613. .text-box{
  614. /*border-top:1rpx dashed #e0e0e0;*/
  615. /*border-top:1rpx solid #E0E0E0;*/
  616. padding:0 20rpx;
  617. /*
  618. overflow-x:scroll;
  619. overflow-y:hidden;
  620. white-space: nowrap;
  621. */
  622. .min-box{
  623. display inline-block
  624. /*padding:0 30rpx 0 10rpx;*/
  625. width:355rpx;
  626. .min-min-box{
  627. display: flex
  628. img{
  629. width:30rpx;
  630. height:27rpx;
  631. margin-top:24rpx;
  632. margin-right:10rpx;
  633. }
  634. view{
  635. line-height:74rpx;
  636. text-align center
  637. font-size:28rpx;
  638. color:#333;
  639. }
  640. .colorA{
  641. color:#EE3A3A;
  642. }
  643. }
  644. }
  645. }
  646. }
  647. .control-max-box{
  648. background #fff
  649. margin-top:20rpx;
  650. .button-max-box{
  651. .button-box:last-child{
  652. border:none!important;
  653. }
  654. .button-box{
  655. display flex
  656. border-bottom:1rpx solid #e0e0e0;
  657. margin:0 20rpx;
  658. view:nth-child(1){
  659. flex:1;
  660. line-height:90rpx;
  661. color:#333333;
  662. font-size:28rpx;
  663. }
  664. view:nth-child(2){
  665. width:120rpx;
  666. line-height:42rpx;
  667. border:4rpx solid #0183FA;
  668. border-radius:30rpx;
  669. color: #0183FA;
  670. font-size: 24rpx;
  671. text-align center;
  672. margin:20rpx 0 20rpx 0;
  673. }
  674. }
  675. .for-button-box:last-child{
  676. border:none!important;
  677. }
  678. .for-button-box{
  679. display flex
  680. border-bottom:1rpx solid #e0e0e0;
  681. margin:0 20rpx;
  682. view{
  683. flex:1;
  684. line-height:90rpx;
  685. color:#333333;
  686. font-size:28rpx;
  687. }
  688. img{
  689. height:50rpx;
  690. width:100rpx;
  691. margin:20rpx 0 20rpx 0;
  692. }
  693. view:nth-child(2){
  694. text-align right
  695. color:#999;
  696. }
  697. }
  698. }
  699. }
  700. .info-max-box{
  701. background #fff
  702. margin-top:20rpx;
  703. .top-name-max-box{
  704. background #fff
  705. overflow hidden
  706. .name-box{
  707. margin:27rpx 20rpx 0;
  708. display:flex;
  709. view:nth-child(1){
  710. background:#f95f5f;
  711. color:#fff;
  712. border-radius:6rpx;
  713. font-size:20rpx;
  714. padding:0 10rpx;
  715. height:42rpx;
  716. line-height:42rpx;
  717. }
  718. view:nth-child(2){
  719. color:#333;
  720. margin-left:20rpx;
  721. font-size:28rpx;
  722. height:30rpx;
  723. line-height:42rpx;
  724. font-weight:700;
  725. }
  726. }
  727. .address-box{
  728. margin:22rpx 20rpx;
  729. font-size:26rpx;
  730. }
  731. }
  732. .text-max-box{
  733. background #fff
  734. padding:8rpx 20rpx;
  735. border-bottom:1rpx solid #e0e0e0;
  736. .text-min-box{
  737. display:flex;
  738. view{
  739. line-height:66rpx;
  740. height:66rpx;
  741. font-size:28rpx;
  742. }
  743. view:nth-child(1){
  744. width:220rpx;
  745. color:#333;
  746. }
  747. view:nth-child(2){
  748. flex:1;
  749. color:#999;
  750. text-align:right;
  751. }
  752. }
  753. }
  754. .safety-max-box{
  755. background #fff
  756. padding:8rpx 20rpx;
  757. .max-for-box{
  758. .title-box{
  759. line-height:76rpx;
  760. font-size:30rpx;
  761. color:#333;
  762. }
  763. .for-box{
  764. line-height:48rpx;
  765. font-size:28rpx;
  766. color:#999;
  767. }
  768. }
  769. }
  770. .img-bottom-box{
  771. margin-top:20rpx;
  772. background #fff
  773. padding:8rpx 20rpx 20rpx;
  774. .title-box{
  775. line-height:76rpx;
  776. font-size:28rpx;
  777. color:#333;
  778. }
  779. .for-box{
  780. line-height:48rpx;
  781. font-size:26rpx;
  782. color:#999;
  783. .img-ojb{
  784. display inline-block
  785. width:86rpx;
  786. height:114rpx;
  787. margin-left:30rpx;
  788. }
  789. .code-img{
  790. width:200rpx;
  791. height:200rpx;
  792. margin:20rpx auto 40rpx;
  793. }
  794. }
  795. }
  796. }
  797. }
  798. </style>