manageWorkbench.vue 25 KB

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