manageWorkbench.vue 26 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968
  1. <!-- 管理端工作台 -->
  2. <template>
  3. <view class="manage-workbench">
  4. <img class="top-big-img" :src="homepageBanner">
  5. <top-warn></top-warn>
  6. <view class="min-icon-button-box" style="margin-bottom: 0;">
  7. <view @click="goPage('casuallyPat')">
  8. <img src="@/images/Version2.2/icon_sy_ssp.png">
  9. <view>随手拍</view>
  10. </view>
  11. <view @click="goPage('safetyInspect')">
  12. <img src="@/images/Version2.2/icon_sy_aqjc.png">
  13. <view>安全检查</view>
  14. </view>
  15. <view @click="goPage('photoInspection')">
  16. <img src="@/images/icon_dzt_pzjc.png">
  17. <view>拍照检查</view>
  18. </view>
  19. <view @click="goPage('accessQualification')">
  20. <img src="@/images/Version2.2/icon_sy_zrsq.png">
  21. <view>准入审核</view>
  22. </view>
  23. <view @click="goPage('gas')">
  24. <img src="@/images/Version3.0/icon_sy_qpgl.png">
  25. <view>气瓶管理</view>
  26. </view>
  27. <view @click="goPage('none')">
  28. <img src="@/images/Version3.0/icon_sy_hxp.png">
  29. <view>化学品管理</view>
  30. </view>
  31. <view @click="goPage('none')">
  32. <img src="@/images/Version3.0/icon_sy_tzsb.png">
  33. <view>特种设备</view>
  34. </view>
  35. <view @click="goPage('none')">
  36. <img src="@/images/Version3.0/icon_sy_aqxx.png">
  37. <view>安全档案</view>
  38. </view>
  39. </view>
  40. <view class=big-icon-button-box>
  41. <!-- 安全报警 -->
  42. <img src="@/images/Version2.3/button_1.png" @click="goPage('alarm')">
  43. <!-- 应急疏散 -->
  44. <img src="@/images/Version2.3/button_2.png" @click="goPage('emergencyEvacuation')">
  45. </view>
  46. <!-- 分级管控 -->
  47. <view class="grading">
  48. <img class="grading_l" src="@/images/icon_sy_fjgk.png"/>
  49. <view class="grading_c">分级管控</view>
  50. <view class="grading_r" @click="goPage('grading')">{{gradingCount>0?gradingCount+'项工作待完成':''}}<img src="@/images/icon_wdwg_gd.png"/></view>
  51. </view>
  52. <view class="for-title-p" @click="goSecurityAlertList" v-if="alarmList[0]">
  53. <img class="left-img" src="@/images/Version2.2/icon_aqbj.png">
  54. <view class="name-view">安全报警</view>
  55. <view class="num-view">{{securityAlertNum}}</view>
  56. <view class="null-view"></view>
  57. <img class="right-img" src="@/images/icon_04.png">
  58. </view>
  59. <view class="for-max-box-one" v-if="alarmList[0]">
  60. <view class="for-box" v-for="(item,index) in alarmList" :key="index">
  61. <view class="title-box">
  62. <view :style="'border:1rpx solid '+item.subDiyVo.fiedColor+';background:#fff;color:'+item.subDiyVo.fiedColor+';'">{{item.subDiyVo.levelName}}</view>
  63. <view>{{item.subDiyVo.name}}</view>
  64. </view>
  65. <view class="address-box"><span>{{item.subDiyVo.typeName}}</span>{{item.subDiyVo.deptName}}</view>
  66. <view class="address-box-two">
  67. <img src="@/images/icon_14.png">
  68. <view>{{item.subDiyVo.subAddrrStr}}</view>
  69. </view>
  70. <view class="for-img-box">
  71. <view class="for-img-min-box" v-for="(minItem,index) in item.sensorSet" :key="index">
  72. <img src="@/images/icon_15.png">
  73. <view>{{minItem}}</view>
  74. </view>
  75. </view>
  76. <view class="button-view" @click="laboratoryInfo(item)">查看详情</view>
  77. </view>
  78. </view>
  79. <view class="for-title-p" v-if="dataList[0]">
  80. <img class="left-img" src="@/images/Version2.2/icon_sy_wdsys.png">
  81. <view class="name-view">我的实验室</view>
  82. </view>
  83. <view class="for-max-box" v-if="dataList[0]">
  84. <img class="null-img" v-if="!dataList[0]" src="@/images/null-data-1.png">
  85. <view class="for-box" v-for="(item,index) in dataList" :key="index" @click="laboratoryInfoOne(item)">
  86. <view class="title-box">
  87. <view :style="'border:1rpx solid '+item.fiedColor+';background:#fff;color:'+item.fiedColor+';'">{{item.levelName}}</view>
  88. <view>{{item.name}}</view>
  89. <img src="@/images/icon_04.png">
  90. </view>
  91. <view class="address-box"><span>{{item.typeName}}</span>{{item.deptName}}</view>
  92. <view class="address-box-two" v-if='item.subAddrrStr!=" "'>
  93. <img src="@/images/icon_14.png">
  94. <view>{{item.subAddrrStr}}</view>
  95. </view>
  96. <view class="text-box" v-if="item.sensorFunctionList[0]">
  97. <view class="min-box" v-for="(minItem,index2) in item.sensorFunctionList" :key="index2">
  98. <view class="min-min-box">
  99. <img v-show="minItem.hasWarn" src="@/images/icon_15.png">
  100. <view :class="{'colorA':minItem.hasWarn}">{{minItem.funcName}}:{{minItem.formatVal?minItem.formatVal:'-'}}</view>
  101. </view>
  102. </view>
  103. </view>
  104. </view>
  105. </view>
  106. <tab-bar></tab-bar>
  107. </view>
  108. </template>
  109. <script>
  110. import $mqtt from '@/utils/mqtt.min.js';
  111. import { config } from '@/api/request/config.js'
  112. import { appReceivePhotoNote,getApprovalCount,subject_class,getSafeWarnList,laboratoryInfo,laboratoryList,getLoginUserInfo,outSubjectPhoto,gradingControl} from '@/api/index.js'
  113. import { tabBar } from '@/component/tabBar.vue'
  114. import { topWarn } from '@/component/topWarn.vue'
  115. export default {
  116. components: {
  117. tabBar,
  118. topWarn
  119. },
  120. data() {
  121. return {
  122. //随手拍数量
  123. appReceivePhotoNoteNum:0,
  124. //准入数量
  125. passedNum:"",
  126. subject_classData:[],
  127. securityAlertNum:"",
  128. //MQTT请求参数
  129. mtopic:"lab/bigview",
  130. mtopicOne:"lab/function/data",
  131. msg:"",
  132. client:{},
  133. //报警数据
  134. alarmList:[],
  135. //实验室数据
  136. dataList:[],
  137. //用户信息数据(用来决定是否可以跳转检查项)
  138. userInfo:{
  139. isadmin:null,
  140. ischeck:null,
  141. list:null,
  142. },
  143. buttonArray:[],
  144. gradingCount:0,//分级管控未完成总数
  145. homepageBanner:uni.getStorageSync('homepageBanner'),
  146. }
  147. },
  148. created() {
  149. },
  150. mounted(){
  151. this.appReceivePhotoNote();
  152. this.getApprovalCount();
  153. this.subject_class();
  154. this.laboratoryList();
  155. this.getSafeWarnList();
  156. this.getLoginUserInfo();
  157. this.getGrading();
  158. //监听报警信息
  159. getApp().watch(this.getSafeWarnList,'mqttAlarmData');
  160. },
  161. methods: {
  162. //暂无提示
  163. goCheckPage(){
  164. if(this.userInfo.isadmin){
  165. uni.navigateTo({
  166. url: '/pages_manage/workbench/problemRectification/rectifyList'
  167. });
  168. }else if(this.userInfo.ischeck == 1){
  169. uni.navigateTo({
  170. url: '/pages_manage/workbench/securityCheck/inspectionRecords'
  171. });
  172. }else{
  173. uni.showToast({
  174. title: '您没有该权限',
  175. icon:"none",
  176. mask:true,
  177. duration: 2000
  178. });
  179. }
  180. },
  181. //监听传感器信息
  182. getMqttSensorData(val){
  183. let self = this;
  184. if(val.subId){
  185. for(let i=0;i<self.dataList.length;i++){
  186. if(self.dataList[i].id == val.subId){
  187. self.$set(self.dataList[i],'sensorFunctionList',val.functionStatuses);
  188. }
  189. }
  190. }
  191. },
  192. //获取分级管控未完成总数
  193. async getGrading(){
  194. let obj = {
  195. }
  196. const {data} = await gradingControl(obj)
  197. if(data.code==200){
  198. this.gradingCount=data.data.length;
  199. }
  200. },
  201. async getLoginUserInfo(){
  202. const {data} = await getLoginUserInfo();
  203. if(data.code == 200){
  204. this.userInfo = data.data;
  205. let list = [];
  206. if(data.data.isadmin){
  207. //实验室负责人
  208. let obj = {
  209. id:"1",
  210. name:"检查记录",
  211. }
  212. list.push(obj)
  213. }
  214. if(data.data.ischeck == 1){
  215. //检查者
  216. let obj = {
  217. id:"2",
  218. name:"问题整改",
  219. }
  220. list.push(obj)
  221. }
  222. this.$set(this,'buttonArray',list);
  223. }
  224. },
  225. //获取报警信息详情
  226. async laboratoryInfo(item){
  227. const {data} = await laboratoryInfo(item.subDiyVo.id);
  228. if(data.code == 200){
  229. let obj = data.data[0];
  230. obj.subClassVO = item.subDiyVo.subClassVO;
  231. obj.name = item.subDiyVo.name;
  232. obj.subTypeLable = item.subDiyVo.subTypeLable;
  233. obj.deptName = item.subDiyVo.deptName;
  234. obj.subAddrrStr = item.subDiyVo.subAddrrStr;
  235. uni.navigateTo({
  236. url: '/pages_manage/workbench/laboratory/laboratoryInfo?item='+encodeURIComponent(JSON.stringify(obj))+'&deptId='+obj.deptId
  237. });
  238. }
  239. },
  240. //获取实验室详情
  241. async laboratoryInfoOne(item){
  242. const {data} = await laboratoryInfo(item.id);
  243. if(data.code == 200){
  244. let obj = data.data[0];
  245. obj.subClassVO = item.subClassVO;
  246. obj.name = item.name;
  247. obj.subTypeLable = item.subTypeLable;
  248. obj.deptName = item.deptName;
  249. obj.subAddrrStr = item.subAddrrStr;
  250. obj.sensorFunctionList = item.sensorFunctionList;
  251. uni.navigateTo({
  252. url: '/pages_manage/workbench/laboratory/laboratoryInfo?item='+encodeURIComponent(JSON.stringify(obj))+'&deptId='+item.deptId
  253. });
  254. }
  255. },
  256. //获取报警信息列表
  257. async getSafeWarnList(){
  258. let obj = {
  259. pageNum:1,
  260. pageSize:1,
  261. count:0,
  262. groupStatus:1,
  263. };
  264. const {data} = await getSafeWarnList(obj);
  265. if(data.code == 200){
  266. this.alarmList = data.rows;
  267. if(data.rows[0]){
  268. this.securityAlertNum = data.rows[0].todayHappenCount;
  269. }else{
  270. this.securityAlertNum = 0;
  271. }
  272. }
  273. },
  274. //获取实验室列表
  275. async laboratoryList(){
  276. let self = this;
  277. let obj = {
  278. deptId:this.facultyIndex?this.facultyList[this.facultyIndex].deptId:'',
  279. subDept:this.subjectIndex?this.subjectList[this.subjectIndex].dictValue:'',
  280. level:this.levelIndex?this.levelList[this.levelIndex].dictValue:'',
  281. };
  282. const {data} = await laboratoryList(obj);
  283. if(data.code == 200){
  284. for(let o=0;o<data.data.length;o++){
  285. if(data.data[o].labHardwareVOList){
  286. data.data[o].hardwareList = [];
  287. for(let i=0;i<data.data[o].labHardwareVOList.length;i++){
  288. if(data.data[o].labHardwareVOList[i].hardwareTypeEnum.code == 4 &&data.data[o].labHardwareVOList[i].hardwareNUM){
  289. if(data.data[o].hardwareNUM){
  290. data.data[o].hardwareNUM = data.data[o].hardwareNUM + ',' + data.data[o].labHardwareVOList[i].hardwareNUM
  291. }else{
  292. data.data[o].hardwareNUM = data.data[o].labHardwareVOList[i].hardwareNUM
  293. }
  294. }else{
  295. let obj = {
  296. name:"",
  297. type:"",
  298. };
  299. obj.name = data.data[o].labHardwareVOList[i].hardwareTypeEnum.hardwareTypeName
  300. obj.type = data.data[o].labHardwareVOList[i].state.code;
  301. obj.id = data.data[o].labHardwareVOList[i].id;
  302. data.data[o].hardwareList.push(obj);
  303. }
  304. }
  305. }
  306. }
  307. this.dataList = data.data;
  308. let list = [];
  309. let obj = {
  310. type:"lab/function/data",
  311. idList:[],
  312. }
  313. for(let i=0;i<self.dataList.length;i++){
  314. let num = 0;
  315. for(let o=0;o<obj.idList.length;o++){
  316. if(obj.idList[o] == self.dataList[i].id){
  317. num++
  318. }
  319. }
  320. if(num == 0){
  321. obj.idList.push(self.dataList[i].id)
  322. }
  323. }
  324. list.push({type:"lab/riskPlan/trigger/notice",});
  325. getApp().appMqttOn(1,list);
  326. }
  327. },
  328. //获取输入数量
  329. async getApprovalCount(){
  330. const {data} = await getApprovalCount()
  331. if(data.code == 200){
  332. this.passedNum = data.data.passed + '人已获得';
  333. }
  334. },
  335. //获取管理员工作台随手拍数量数据
  336. async appReceivePhotoNote(){
  337. const {data} = await appReceivePhotoNote();
  338. if(data.code == 200){
  339. this.appReceivePhotoNoteNum = data.data.photoCount;
  340. }
  341. },
  342. //获取学科字典
  343. async subject_class(){
  344. const {data} = await subject_class();
  345. if(data.code == 200){
  346. this.subject_classData = data.data;
  347. }
  348. },
  349. //去安全警报
  350. goSecurityAlertList(){
  351. uni.navigateTo({
  352. url: '/pages_manage/workbench/securityAlert/securityAlertList',//安全警报
  353. });
  354. },
  355. //页面跳转
  356. goPage(type){
  357. if(type=='casuallyPat'){
  358. uni.navigateTo({
  359. url: '/pages/casuallyPat',//随手拍
  360. });
  361. }else if(type=='receiveCasuallyPat'){//收到随手拍
  362. uni.navigateTo({
  363. url: '/pages_manage/workbench/receiveCasuallyPat/receiveCasuallyPat',
  364. });
  365. }else if(type=='accessQualification'){//收到随手拍
  366. uni.navigateTo({
  367. url: '/pages_manage/workbench/accessQualification/accessQualification',
  368. });
  369. }else if(type == 'safetyInspect'){//安全检查
  370. uni.navigateTo({
  371. url: '/pages_manage/workbench/securityCheck/safetyInspect',//安全警报
  372. });
  373. }
  374. else if(type == 'alarm'){
  375. uni.navigateTo({
  376. url: '/pages_manage/workbench/securityAlert/securityAlertList',//安全警报
  377. });
  378. }else if(type == 'emergencyEvacuation'){
  379. uni.navigateTo({
  380. url: '/pages_manage/emergencyEvacuationBig',//安全警报
  381. });
  382. }else if(type == 'photoInspection'){
  383. this.outSubjectPhoto();
  384. }else if(type == 'grading'){
  385. uni.navigateTo({
  386. url: '/pages_manage/gradingControl/gradingControl',//分级管控
  387. });
  388. }else if(type == 'gas'){//气瓶管理
  389. uni.navigateTo({
  390. url: '/pages_manage/gasManage/gasManage',
  391. });
  392. }else if(type == 'none'){
  393. uni.showToast({
  394. title: '暂未开放',
  395. icon:"none",
  396. mask:true,
  397. duration: 2000
  398. });
  399. }
  400. },//获取拍照检查配置
  401. async outSubjectPhoto(){
  402. const {data} = await outSubjectPhoto();
  403. if(data.code == 200){
  404. if(data.data == null){
  405. //需要检查(重新填写)
  406. let obj = {
  407. sub:"实验室照片",
  408. subUrl:"",
  409. garbage:"垃圾桶清理后照片",
  410. garbageUrl:"",
  411. dangerous:"使用危险设备照片(选填)",
  412. dangerousUrl:"",
  413. sourceRisk:"危险源设备使用登记本照片(选填)",
  414. sourceRiskUrl:"",
  415. };
  416. uni.navigateTo({
  417. url: '/pages_student/workbench/photoInspection?newData='+encodeURIComponent(JSON.stringify(obj)),
  418. });
  419. }else if(data.data == false){
  420. //不需要检查
  421. uni.showToast({
  422. title: '暂无检查数据',
  423. icon:"none",
  424. mask:true,
  425. duration: 2000
  426. });
  427. }else{
  428. //需要检查(修改内容)
  429. let obj = {
  430. id:data.data.id,
  431. sub:"实验室照片",
  432. subUrl:data.data.subUrl,
  433. garbage:"垃圾桶清理后照片",
  434. garbageUrl:data.data.garbageUrl,
  435. dangerous:"使用危险设备照片(选填)",
  436. dangerousUrl:data.data.dangerousUrl,
  437. sourceRisk:"危险源设备使用登记本照片(选填)",
  438. sourceRiskUrl:data.data.sourceRiskUrl,
  439. };
  440. uni.navigateTo({
  441. url: '/pages_student/workbench/photoInspection?newData='+encodeURIComponent(JSON.stringify(obj)),
  442. });
  443. }
  444. }
  445. },
  446. },
  447. beforeDestroy(){
  448. //断开mqtt连接
  449. getApp().offMQTT();
  450. //删除报警监听
  451. getApp().deleteAlarmWatch();
  452. //删除传感器监听
  453. getApp().deleteSensorWatch();
  454. }
  455. }
  456. </script>
  457. <style lang="stylus" scoped>
  458. .manage-workbench{
  459. height:100%;
  460. width:100%;
  461. overflow-y:scroll;
  462. .top-big-img{
  463. height:342rpx;
  464. width:750rpx;
  465. }
  466. .min-icon-button-box{
  467. display flex;
  468. justify-content: flex-start;
  469. flex-wrap: wrap;
  470. width:710rpx;
  471. margin:20rpx;
  472. background :#ffffff;
  473. border-radius:20rpx;
  474. padding-bottom: 20rpx;
  475. view{
  476. width: 176rpx;
  477. img{
  478. height:75rpx;
  479. width:75rpx;
  480. margin:30rpx auto 10rpx;
  481. }
  482. view{
  483. text-align center
  484. font-size:24rpx;
  485. }
  486. }
  487. }
  488. .big-icon-button-box{
  489. display flex;
  490. margin:20rpx;
  491. img{
  492. width:350rpx;
  493. height:150rpx;
  494. }
  495. img:nth-child(2){
  496. margin-left:10rpx;
  497. }
  498. }
  499. /* 分级管控 */
  500. .grading{
  501. width :712rpx;
  502. height :80rpx;
  503. background: #FFFFFF;
  504. border-radius: 20rpx;
  505. margin-left:20rpx;
  506. margin-bottom :20rpx;
  507. display:flex;
  508. justify-content :flex-start;
  509. align-items :center;
  510. .grading_l{
  511. width :34rpx;
  512. height :34rpx;
  513. margin-left:16rpx;
  514. }
  515. .grading_c{
  516. font-size: 28rpx;
  517. font-family: PingFang SC;
  518. font-weight: 500;
  519. color: #333333;
  520. margin-left:16rpx;
  521. }
  522. .grading_r{
  523. width :504rpx;
  524. height :80rpx;
  525. font-size: 26rpx;
  526. font-family: PingFang SC;
  527. font-weight: 500;
  528. color: #EE3A3A;
  529. display :flex;
  530. justify-content :flex-end;
  531. align-items: center;
  532. >img{
  533. width: 20rpx;
  534. height: 20rpx;
  535. margin-left :20rpx;
  536. margin-top :8rpx;
  537. }
  538. }
  539. }
  540. .top-max-box{
  541. height:300rpx;
  542. .top-min-box{
  543. display: flex
  544. margin:20rpx;
  545. .left-box{
  546. background #fff
  547. height:130rpx;
  548. width:345rpx;
  549. border-radius: 10px;
  550. display flex
  551. .left-img{
  552. height:80rpx;
  553. width:80rpx;
  554. margin:25rpx 30rpx;
  555. }
  556. view{
  557. line-height:130rpx;
  558. font-size: 28rpx;
  559. color:#333;
  560. flex:1;
  561. }
  562. .right-img{
  563. width:20rpx;
  564. height:20rpx;
  565. margin:55rpx 30rpx 0 0;
  566. }
  567. }
  568. .right-box{
  569. background #fff
  570. height:130rpx;
  571. width:345rpx;
  572. margin-left:20rpx;
  573. border-radius: 10rpx;
  574. display flex
  575. .left-img{
  576. height:80rpx;
  577. width:80rpx;
  578. margin:25rpx 30rpx;
  579. }
  580. .right-min-view{
  581. flex:1;
  582. .right-min-title{
  583. line-height:28rpx;
  584. font-size: 28rpx;
  585. margin-top:32rpx;
  586. color: #333333;
  587. }
  588. .right-bottom-min-box{
  589. display flex
  590. view{
  591. flex:1;
  592. text-align right
  593. margin:25rpx 14rpx 0 0;
  594. font-size: 22rpx;
  595. color: #999999;
  596. line-height: 22rpx;
  597. }
  598. img{
  599. width:20rpx;
  600. height:20rpx;
  601. margin:27rpx 80rpx 0 0;
  602. }
  603. }
  604. }
  605. }
  606. }
  607. .bottom-min-box{
  608. background #fff
  609. height:130rpx;
  610. width:710rpx;
  611. border-radius: 10px;
  612. margin:0 20rpx;
  613. display flex
  614. .left-img{
  615. height:80rpx;
  616. width:80rpx;
  617. margin:25rpx 30rpx;
  618. }
  619. view{
  620. flex:1;
  621. line-height:130rpx;
  622. }
  623. view:nth-child(2){
  624. font-size: 28rpx;
  625. color:#333;
  626. }
  627. view:nth-child(3){
  628. text-align right
  629. font-size: 22rpx;
  630. color:#999;
  631. margin-right:12rpx;
  632. }
  633. .right-img{
  634. width:20rpx;
  635. height:20rpx;
  636. margin:55rpx 30rpx 0 0;
  637. }
  638. }
  639. }
  640. .for-title-p{
  641. border-top-left-radius 20rpx
  642. border-top-right-radius 20rpx
  643. background #fff
  644. padding-left:25rpx;
  645. display flex
  646. margin:0 20rpx;
  647. border-bottom:1rpx solid #e0e0e0;
  648. .left-img{
  649. height:34rpx;
  650. width:34rpx;
  651. margin:22rpx 10rpx 0 0;
  652. }
  653. .name-view{
  654. line-height:77rpx;
  655. font-size:30rpx;
  656. color:#333;
  657. }
  658. .num-view{
  659. width:28rpx;
  660. height:28rpx;
  661. font-size:20rpx;
  662. background:#EE3A3A;
  663. border-radius:50%;
  664. text-align :center;
  665. line-height:24rpx;
  666. color:#fff;
  667. margin:26rpx 0 0 10rpx;
  668. }
  669. .null-view{
  670. flex:1;
  671. }
  672. .right-img{
  673. height:20rpx;
  674. width:10rpx;
  675. margin:28rpx 19rpx 0 0;
  676. }
  677. }
  678. .for-max-box-one{
  679. margin:0 20rpx;
  680. border-bottom-left-radius 20rpx
  681. border-bottom-right-radius 20rpx
  682. .for-box:nth-child(1){
  683. border-top:none;
  684. }
  685. .for-box{
  686. border-top:4rpx solid #dedede;
  687. background #fff
  688. margin-bottom:20rpx;
  689. overflow: hidden
  690. .title-box{
  691. margin:20rpx 20rpx 0;
  692. display flex
  693. view:nth-child(1){
  694. height:40rpx;
  695. line-height:40rpx;
  696. font-size:20rpx;
  697. border-radius:10rpx;
  698. padding:0 20rpx;
  699. color:#fff;
  700. margin-right:20rpx;
  701. }
  702. view:nth-child(2){
  703. line-height:42rpx;
  704. font-size:30rpx;
  705. color:#333;
  706. max-width:600rpx;
  707. flex:1;
  708. }
  709. .colorA{
  710. background:#aa2315;
  711. }
  712. .colorB{
  713. background:#ff9b09;
  714. }
  715. .colorC{
  716. background:#3ea3e9;
  717. }
  718. .colorD{
  719. background:#3ea34c;
  720. }
  721. }
  722. .address-box{
  723. margin:20rpx 20rpx;
  724. font-size:26rpx;
  725. color:#999999;
  726. span{
  727. margin-right:60rpx;
  728. }
  729. }
  730. .address-box-two{
  731. display flex
  732. margin:0 20rpx 20rpx 20rpx;
  733. img{
  734. width:28rpx;
  735. height:30rpx;
  736. margin-right:18rpx;
  737. }
  738. view{
  739. line-height:30rpx;
  740. font-size:24rpx;
  741. color:#999999;
  742. }
  743. }
  744. .for-img-box{
  745. border-top:1rpx solid #e0e0e0;
  746. margin:0 20rpx;
  747. .for-img-min-box{
  748. display flex
  749. img{
  750. width:30rpx;
  751. height:27rpx;
  752. margin-top:24rpx;
  753. margin-right:10rpx;
  754. }
  755. view{
  756. line-height:74rpx;
  757. text-align center
  758. font-size:28rpx;
  759. color:#EE3A3A;
  760. }
  761. }
  762. }
  763. .button-view{
  764. margin:0 20rpx;
  765. border-top:1rpx dashed #e0e0e0;
  766. line-height:90rpx;
  767. text-align :center;
  768. font-size:26rpx;
  769. color:#333;
  770. }
  771. }
  772. .get-null-box{
  773. height:100rpx;
  774. line-height:100rpx;
  775. color:#999;
  776. text-align center
  777. }
  778. }
  779. .for-max-box{
  780. margin:0 20rpx 120rpx;
  781. background: #fff
  782. overflow: hidden
  783. border-bottom-left-radius 20rpx
  784. border-bottom-right-radius 20rpx
  785. .null-img{
  786. display block
  787. width:276rpx;
  788. height:321rpx;
  789. margin:40rpx auto;
  790. }
  791. .for-box:nth-child(1){
  792. border-top:none;
  793. }
  794. .for-box{
  795. border-top:4rpx solid #dedede;
  796. overflow hidden
  797. background #ffffff
  798. margin-bottom:20rpx;
  799. .title-box{
  800. margin:20rpx 20rpx 0;
  801. display flex
  802. view:nth-child(1){
  803. height:40rpx;
  804. line-height:40rpx;
  805. font-size:20rpx;
  806. border-radius:10rpx;
  807. padding:0 20rpx;
  808. color:#fff;
  809. margin-right:20rpx;
  810. }
  811. view:nth-child(2){
  812. line-height:42rpx;
  813. font-size:30rpx;
  814. color:#333;
  815. max-width:600rpx;
  816. flex:1;
  817. }
  818. img{
  819. width:12rpx;
  820. height:20rpx;
  821. margin-top:11rpx;
  822. }
  823. .colorA{
  824. background:#aa2315;
  825. }
  826. .colorB{
  827. background:#ff9b09;
  828. }
  829. .colorC{
  830. background:#3ea3e9;
  831. }
  832. .colorD{
  833. background:#3ea34c;
  834. }
  835. }
  836. .address-box{
  837. margin:20rpx 20rpx;
  838. font-size:26rpx;
  839. color:#999999;
  840. span{
  841. margin-right:60rpx;
  842. }
  843. }
  844. .address-box-two{
  845. display flex
  846. margin:0 20rpx 20rpx 20rpx;
  847. img{
  848. width:28rpx;
  849. height:30rpx;
  850. margin-right:18rpx;
  851. }
  852. view{
  853. line-height:30rpx;
  854. font-size:24rpx;
  855. color:#999999;
  856. }
  857. }
  858. .text-box{
  859. /*border-top:1rpx dashed #e0e0e0;*/
  860. border-top:1rpx solid #E0E0E0;
  861. padding:20rpx 20rpx 0;
  862. /*
  863. overflow-x:scroll;
  864. overflow-y:hidden;
  865. white-space: nowrap;
  866. */
  867. .min-box{
  868. display inline-block
  869. /*padding:0 30rpx 0 10rpx;*/
  870. width:335rpx;
  871. .min-min-box{
  872. display: flex
  873. img{
  874. width:30rpx;
  875. height:27rpx;
  876. margin-top:24rpx;
  877. margin-right:10rpx;
  878. }
  879. view{
  880. line-height:74rpx;
  881. text-align center
  882. font-size:28rpx;
  883. color:#333;
  884. }
  885. .colorA{
  886. color:#EE3A3A;
  887. }
  888. }
  889. }
  890. }
  891. .sensor-max-box{
  892. margin:0 20rpx;
  893. border-top:1rpx solid #e0e0e0;
  894. border-bottom:1rpx solid #e0e0e0;
  895. display flex
  896. .for-sensor-box{
  897. flex:1;
  898. display flex
  899. font-size:28rpx;
  900. line-height:94rpx;
  901. view{
  902. margin-left:20rpx;
  903. font-size:25rpx;
  904. line-height:94rpx;
  905. color:#0183FA;
  906. }
  907. }
  908. }
  909. .button-max-box{
  910. .button-box{
  911. display flex
  912. view:nth-child(1){
  913. flex:1;
  914. line-height:90rpx;
  915. color:#333333;
  916. margin-left:30rpx;
  917. font-size:28rpx;
  918. }
  919. view:nth-child(2){
  920. width:142rpx;
  921. line-height:42rpx;
  922. border:4rpx solid #0183FA;
  923. border-radius:25rpx;
  924. color: #0183FA;
  925. font-size: 30rpx;
  926. text-align center;
  927. margin:20rpx 20rpx 20rpx 0;
  928. }
  929. }
  930. .for-button-box{
  931. display flex
  932. view{
  933. flex:1;
  934. line-height:90rpx;
  935. color:#333333;
  936. margin-left:30rpx;
  937. font-size:28rpx;
  938. }
  939. img{
  940. height:50rpx;
  941. width:100rpx;
  942. margin:20rpx 20rpx 20rpx 0;
  943. }
  944. view:nth-child(2){
  945. text-align right
  946. color:#999;
  947. margin-right:30rpx;
  948. }
  949. }
  950. }
  951. }
  952. }
  953. }
  954. </style>