您最多选择25个主题 主题必须以字母或数字开头,可以包含连字符 (-),并且长度不得超过35个字符
 
 
 

834 行
23 KiB

  1. <template>
  2. <view class="cented-box">
  3. <view class="Switchingbox">
  4. <view class="Switching1">
  5. <image class="Switching1-img" src="../../static/images/building.png" mode=""></image>
  6. </view>
  7. <view class="Switching2">楼盘:</view>
  8. <view class="Switching3">{{buildingname}}</view>
  9. <view class="Switching4" v-if="buildingishow" @click="piskbuilding()">切换楼盘</view>
  10. </view>
  11. <view class="title" style="margin-top: 30rpx;" v-if="Myworkcard">我的工牌</view>
  12. <view v-if="Myworkcard">
  13. <view class="Workcard" v-if="Whetheroffline==true">
  14. <view class="Workcard-box">
  15. <view class="Workcardimg">
  16. <view class="Workcardimg1">
  17. <view v-if="percentage>20" class="bar" :style="{width : percentage + '%' }"></view>
  18. <view v-if="percentage<20" class="bar1" :style="{width : percentage + '%' }"></view>
  19. </view>
  20. </view>
  21. <view class="Workcardtext">电量:{{percentage}}%</view>
  22. </view>
  23. <view class="Workcard-box">
  24. <view class="Workcardimg">
  25. <image v-if="signalDevice==''" class="Workcardimg2" src="../../static/images/signal0.png"
  26. mode=""></image>
  27. <image v-else-if="signalDevice<20 && signalDevice>0" class="Workcardimg2"
  28. src="../../static/images/signal1.png" mode=""></image>
  29. <image v-else-if="signalDevice<50 && signalDevice>20" class="Workcardimg2"
  30. src="../../static/images/signal2.png" mode=""></image>
  31. <image v-else-if="signalDevice<70 && signalDevice>50" class="Workcardimg2"
  32. src="../../static/images/signal3.png" mode=""></image>
  33. <image v-else-if="signalDevice<90 && signalDevice>70" class="Workcardimg2"
  34. src="../../static/images/signal4.png" mode=""></image>
  35. <image v-else-if="signalDevice<=100 && signalDevice>90" class="Workcardimg2"
  36. src="../../static/images/signal5.png" mode=""></image>
  37. </view>
  38. <view class="Workcardtext">信号:{{signalDevicetext}}</view>
  39. </view>
  40. <view class="Workcard-box">
  41. <view class="Workcardimg">
  42. <image v-if="audioStatus=='true'" class="Workcardimg3"
  43. src="../../static/images/Thtapedrive1.png" mode=""></image>
  44. <image v-if="audioStatus=='false'" class="Workcardimg3"
  45. src="../../static/images/Thtapedrive2.png" mode=""></image>
  46. </view>
  47. <view v-if="audioStatus=='true'" class="Workcardtext">录音:已开启</view>
  48. <view v-if="audioStatus=='false'" class="Workcardtext">录音:未开启</view>
  49. </view>
  50. </view>
  51. <view class="Workcard" v-if="Whetheroffline==false">
  52. <view class="Workcard-box">
  53. <view class="Workcardimg">
  54. <image class="Workcardimg4" src="../../static/images/offline.png" mode=""></image>
  55. </view>
  56. <view class="Workcardtext">设备离线</view>
  57. </view>
  58. </view>
  59. </view>
  60. <view class="title" v-if="equipmentisshow">设备</view>
  61. <view class="shebenbox" v-if="equipmentisshow" >
  62. <view class="shebenche" @click="tapjumpequipment(0)">
  63. <view class="shebenchenum">{{equipmentobj.totalNum || 0}}</view>
  64. <view class="shebenchetext">设备总数</view>
  65. </view>
  66. <view class="shebenche" @click="tapjumpequipment(1)">
  67. <view class="shebenchenum">{{equipmentobj.onlineNum || 0}}</view>
  68. <view class="shebenchetext">在线</view>
  69. </view>
  70. <view class="shebenche" @click="tapjumpequipment(3)">
  71. <view class="shebenchenum">{{equipmentobj.activeNum || 0}}</view>
  72. <view class="shebenchetext">活跃</view>
  73. </view>
  74. <view class="shebenche" @click="tapjumpequipment(2)">
  75. <view class="shebenchenum" style="color: red;">{{equipmentobj.lowPowerNum || 0}}</view>
  76. <view class="shebenchetext">急需充电</view>
  77. </view>
  78. </view>
  79. <view class="title">实时统计</view>
  80. <!-- <view class="real-timebox">
  81. <view class="timebox">
  82. </view>
  83. <view class="timebox">
  84. </view>
  85. </view> -->
  86. <view class="real-timebox">
  87. <view class="timebox">
  88. <view class="real" @click="tapjumpreception('1')">
  89. <view class="realnum">{{realtimeobj.receptionCount || 0}}</view>
  90. <view class="realtext">接待量</view>
  91. </view>
  92. <view class="real" @click="tapjumpreception('6')">
  93. <view class="realnum">{{realtimeobj.activeCustomer|| 0}}</view>
  94. <view class="realtext">有效接待</view>
  95. </view>
  96. <view class="real" @click="tapjumpreception('2')">
  97. <view class="realnum">{{realtimeobj.receivingCustomer || 0}}</view>
  98. <view class="realtext">正在接待</view>
  99. </view>
  100. <view class="real" @click="tapjumpreception('4')">
  101. <view class="realnum">{{realtimeobj.tagCustomer || 0}}</view>
  102. <view class="realtext">未标顾问</view>
  103. </view>
  104. </view>
  105. <view class="timebox">
  106. <view class="real" @click="tapjumpreception('1')">
  107. <view class="realnum">{{realtimeobj.avgDuration|| 0}}</view>
  108. <view class="realtext">平均接待时长</view>
  109. </view>
  110. <view class="real" @click="tapjumpreception('1')">
  111. <view class="realnum">{{realtimeobj.fraction || 0}}%</view>
  112. <view class="realtext">平均执行率</view>
  113. </view>
  114. <view class="real" >
  115. <view @click="prohibitedtap(1)" v-if="methodsisshow==true" class="realnum" style="color: red;" >{{realtimeobj.prohibitedCustomer || 0}}</view>
  116. <view @click="prohibitedtap(1)" v-if="methodsisshow==true" class="realtext">违禁预警</view>
  117. </view>
  118. <view class="real">
  119. <view class="realnum"></view>
  120. <view class="realtext"></view>
  121. </view>
  122. </view>
  123. </view>
  124. <view class="title" style="display: flex;">
  125. <view style="width: 55%;">概览</view>
  126. <view class="cet" style="display: flex;">
  127. <view class="cetview" :class="{ activecllasscet: zhixingcenterindex == 2 }" @click="tabtimeclick(2)">近7天</view>
  128. <view class="cetview" :class="{ activecllasscet: zhixingcenterindex == 6 }" @click="tabtimeclick(6)">近30天</view>
  129. <view class="cetview" :class="{ activecllasscet: zhixingcenterindex == 7 }" @click="tabtimeclick(7)">自定义</view>
  130. </view>
  131. </view>
  132. <view class="real-timebox">
  133. <view class="timebox">
  134. <view class="real" @click="tapjumpreception('3')">
  135. <view class="realnum">{{Thisweekobj.receptionCount || 0}}</view>
  136. <view class="realtext">接待量</view>
  137. </view>
  138. <view class="real" @click="tapjumpreception('7')">
  139. <view class="realnum">{{Thisweekobj.activeCustomer|| 0}}</view>
  140. <view class="realtext">有效接待</view>
  141. </view>
  142. <view class="real" @click="tapjumpreception('3')">
  143. <view class="realnum">{{Thisweekobj.fraction || 0}}%</view>
  144. <view class="realtext">平均执行率</view>
  145. </view>
  146. </view>
  147. <view class="timebox">
  148. <view class="real" @click="tapjumpreception('3')">
  149. <view class="realnum">{{Thisweekobj.avgDuration|| 0}}</view>
  150. <view class="realtext">平均接待时长</view>
  151. </view>
  152. <view class="real" @click="prohibitedtap(2)" v-if="methodsisshow==true">
  153. <view class="realnum" style="color: red;" >{{Thisweekobj.prohibitedCustomer || 0}}</view>
  154. <view class="realtext">违禁预警</view>
  155. </view>
  156. <view class="real">
  157. <view class="realnum"></view>
  158. <view class="realtext"></view>
  159. </view>
  160. </view>
  161. </view>
  162. <!-- <view class="real-timebox">
  163. <view class="timebox">
  164. </view>
  165. </view> -->
  166. <view class="title">常用功能</view>
  167. <view class="commonly-box">
  168. <view class="commonly" @click="Piabodata(item.name)" v-for="(item,index) in Menulist" :key='index'>
  169. <view class="commonly-img">
  170. <image v-if="item.name=='客户管理'" class="commonly-img1" src="../../static/images/function1.png"
  171. mode=""></image>
  172. <image v-if="item.name=='接待记录'" class="commonly-img1" src="../../static/images/function2.png"
  173. mode=""></image>
  174. <image v-if="item.name=='销讲数据'" class="commonly-img1" src="../../static/images/function4.png"
  175. mode=""></image>
  176. <image v-if="item.name=='设备管理'" class="commonly-img1" src="../../static/images/function5.png"
  177. mode=""></image>
  178. <image v-if="item.name=='值班顾问'" class="commonly-img1" src="../../static/images/function6.png"
  179. mode=""></image>
  180. <image v-if="item.name=='顾问排名'" class="commonly-img1" src="../../static/images/rankingguwen.png"
  181. mode=""></image>
  182. <image v-if="item.name=='违禁记录'" class="commonly-img1" src="../../static/images/prohibited.png"
  183. mode=""></image>
  184. </view>
  185. <view v-if="item.name=='标记有效无效接待'" class="commonly-text"></view>
  186. <view v-else class="commonly-text">{{item.name}}</view>
  187. </view>
  188. </view>
  189. <!-- 楼盘切换 -->
  190. <view v-if="Showhiddenunits">
  191. <u-select :mask-close-able="false" v-model="Showhiddenunits" mode="single-column" :list="lpanlist"
  192. @cancel="cancel" @confirm="confirm"></u-select>
  193. </view>
  194. <u-calendar v-model="totalTimeShow" mode="range" @change="totalTimeChange"></u-calendar>
  195. </view>
  196. </template>
  197. <script>
  198. var config = require("../../config");
  199. export default {
  200. data() {
  201. return {
  202. userInfo: {},
  203. Showhiddenunits: false,
  204. lpanlist: [], //楼盘列表
  205. buildingname: '', //楼盘名
  206. buildingID: '', //楼盘id
  207. buildingishow: false, //是否选择楼盘
  208. Myworkcard: false,
  209. percentage: '', //设备电量
  210. Whetheroffline: false, //是否离线
  211. signalDevice: 0, //信号
  212. signalDevicetext: "",
  213. audioStatus: false,
  214. equipmentisshow: false,
  215. equipmentobj: {
  216. totalNum: '',
  217. onlineNum: '',
  218. activeNum: '',
  219. lowPowerNum: '',
  220. },
  221. Menulist: [],
  222. realtimeobj: {
  223. sumCustomer: '',
  224. receivingCustomer: '',
  225. activeCustomer: '',
  226. prohibitedCustomer: '',
  227. tagCustomer: '',
  228. fraction: '',
  229. receptionCount:''
  230. },
  231. Thisweekobj: {
  232. sumCustomer: '',
  233. receivingCustomer: '',
  234. activeCustomer: '',
  235. prohibitedCustomer: '',
  236. tagCustomer: '',
  237. fraction: '',
  238. receptionCount:''
  239. },
  240. methodsisshow:false,
  241. zhixingcenterindex:2,
  242. totalTimeShow: false,
  243. statDateStart:'',
  244. statDateEnd:'',
  245. };
  246. },
  247. components: {},
  248. onShow() {
  249. this.userInfo = uni.getStorageSync('weapp_session_userInfo_data');
  250. this.Menulist = uni.getStorageSync('weapp_session_Menu_data');
  251. if(this.userInfo.dataCode==6 || this.userInfo.dataCode==3){
  252. this.methodsisshow=false;
  253. }else{
  254. this.methodsisshow=true;
  255. }
  256. if (this.userInfo.zkProperties.length == 1) {
  257. this.buildingID = uni.getStorageSync('buildingID').id;
  258. this.buildingname = uni.getStorageSync('buildingID').name;
  259. this.buildingishow = false;
  260. } else {
  261. this.buildingishow = true;
  262. this.buildingname = uni.getStorageSync('buildingID').name;
  263. this.buildingID = uni.getStorageSync('buildingID').id;
  264. this.userInfo.zkProperties.forEach(item => {
  265. item.label = item.propertyName;
  266. item.value = item.id
  267. })
  268. this.lpanlist = this.userInfo.zkProperties
  269. }
  270. if (this.userInfo.dataCode == 6) {
  271. this.Myworkcard = true;
  272. this.equipmentisshow = false;
  273. this.iniodianloang()
  274. } else {
  275. this.equipmentisshow = true;
  276. this.Myworkcard = false;
  277. this.initequipment()
  278. }
  279. this.initworkThisWeek()
  280. this.initrealTimeStatistics()
  281. },
  282. methods: {
  283. //自定义时间
  284. totalTimeChange(e) {
  285. this.statDateStart=e.startDate;
  286. this.statDateEnd=e.endDate;
  287. this.zhixingcenterindex=7;
  288. this.initworkThisWeek()
  289. },
  290. tabtimeclick(i){
  291. if(i==7){
  292. this.totalTimeShow = true;
  293. }else{
  294. this.zhixingcenterindex=i;
  295. this.initworkThisWeek()
  296. }
  297. },
  298. initworkThisWeek() {
  299. uni.request({
  300. url: config.service.workThisWeek,
  301. method: "POST",
  302. header: {
  303. 'content-type': 'application/json',
  304. 'Access-Token': uni.getStorageSync('weapp_session_login_data').token
  305. },
  306. data: {
  307. houseId: this.buildingID,
  308. dateType:this.zhixingcenterindex==7?null:this.zhixingcenterindex,
  309. statDateStart:this.statDateStart,
  310. statDateEnd:this.statDateEnd
  311. },
  312. success: (data) => {
  313. if (data.data.data == null) {
  314. return
  315. } else {
  316. this.Thisweekobj = {
  317. sumCustomer: data.data.data.sumCustomer,
  318. receivingCustomer: data.data.data.receivingCustomer,
  319. activeCustomer: data.data.data.activeCustomer,
  320. prohibitedCustomer: data.data.data.prohibitedCustomer,
  321. avgDuration: Math.floor(data.data.data.avgDuration/60) ||0,
  322. tagCustomer: data.data.data.tagCustomer,
  323. fraction: data.data.data.fraction,
  324. receptionCount:data.data.data.receptionCount
  325. }
  326. }
  327. }
  328. })
  329. },
  330. //实时统计
  331. initrealTimeStatistics() {
  332. uni.request({
  333. url: config.service.realTimeStatistics,
  334. method: "POST",
  335. header: {
  336. 'content-type': 'application/json',
  337. 'Access-Token': uni.getStorageSync('weapp_session_login_data').token
  338. },
  339. data: {
  340. houseId: this.buildingID
  341. },
  342. success: (data) => {
  343. if (data.data.data == null) {
  344. return
  345. } else {
  346. this.realtimeobj = {
  347. sumCustomer: data.data.data.sumCustomer,
  348. receivingCustomer: data.data.data.receivingCustomer,
  349. activeCustomer: data.data.data.activeCustomer,
  350. prohibitedCustomer: data.data.data.prohibitedCustomer,
  351. avgDuration: Math.floor(data.data.data.avgDuration/60) ||0,
  352. tagCustomer: data.data.data.tagCustomer,
  353. fraction: data.data.data.fraction,
  354. receptionCount:data.data.data.receptionCount
  355. }
  356. }
  357. }
  358. })
  359. },
  360. //设备
  361. initequipment() {
  362. uni.request({
  363. url: config.service.findEquipmentState,
  364. method: "POST",
  365. header: {
  366. 'content-type': 'application/json',
  367. 'Access-Token': uni.getStorageSync('weapp_session_login_data').token
  368. },
  369. data: {
  370. propertyId: this.buildingID
  371. },
  372. success: (data) => {
  373. if (data.data.data == null) {
  374. return
  375. } else {
  376. this.equipmentobj = {
  377. totalNum: data.data.data.totalNum,
  378. onlineNum: data.data.data.onlineNum,
  379. activeNum: data.data.data.activeNum,
  380. lowPowerNum: data.data.data.lowPowerNum,
  381. }
  382. }
  383. }
  384. })
  385. },
  386. //我的工牌
  387. iniodianloang() {
  388. uni.request({
  389. url: config.service.findElectricity,
  390. method: "POST",
  391. header: {
  392. 'content-type': 'application/json',
  393. 'Access-Token': uni.getStorageSync('weapp_session_login_data').token
  394. },
  395. data: {},
  396. success: (data) => {
  397. if (data.data.data == null) {
  398. return
  399. } else {
  400. if (data.data.data > 100) {
  401. this.percentage = 100;
  402. } else {
  403. if (data.data.data.onLine == 0) {
  404. this.Whetheroffline = false;
  405. } else {
  406. this.Whetheroffline = true;
  407. this.percentage = data.data.data.electricity;
  408. this.signalDevice = data.data.data.signalDevice / 1;
  409. console.log(this.signalDevice)
  410. this.audioStatus = data.data.data.audioStatus;
  411. if (this.signalDevice > 80) {
  412. this.signalDevicetext = '高';
  413. } else {
  414. if (this.signalDevice == 0) {
  415. this.signalDevicetext = '无';
  416. } else {
  417. this.signalDevicetext = '低';
  418. }
  419. }
  420. }
  421. }
  422. }
  423. }
  424. })
  425. },
  426. //选择楼盘弹框
  427. piskbuilding() {
  428. this.Showhiddenunits = true;
  429. },
  430. // 楼盘选择确认
  431. confirm(e) {
  432. this.buildingname = e[0].label;
  433. this.buildingID = e[0].value;
  434. let lopan = {
  435. id: e[0].value,
  436. name: e[0].label
  437. }
  438. uni.setStorageSync("buildingID", lopan); //楼盘id写入缓存
  439. this.initworkThisWeek()
  440. this.initrealTimeStatistics()
  441. this.initequipment()
  442. this.iniodianloang()
  443. },
  444. // 楼盘选择取消
  445. cancel() {
  446. this.Showhiddenunits = false;
  447. },
  448. tapjumpequipment(i){
  449. this.Menulist.forEach(item=>{
  450. if(item.name=='设备管理'){
  451. uni.navigateTo({
  452. url: '/pages/mine/equipment/index?active='+i
  453. });
  454. }
  455. })
  456. },
  457. prohibitedtap(i){
  458. if(i==1){
  459. uni.navigateTo({
  460. url: '/pages/center/prohibited/index?refresh='+'refresh'+'&activeTotal='+'0'
  461. });
  462. }else{
  463. if(this.zhixingcenterindex==2){
  464. uni.navigateTo({
  465. url: '/pages/center/prohibited/index?refresh='+'refresh'+'&activeTotal='+'2'
  466. });
  467. }else if(this.zhixingcenterindex==6){
  468. uni.navigateTo({
  469. url: '/pages/center/prohibited/index?refresh='+'refresh'+'&activeTotal='+'3'
  470. });
  471. }else{
  472. uni.navigateTo({
  473. url: '/pages/center/prohibited/index?refresh='+'refresh'+'&activeTotal='+'4'+'&staTime='+this.statDateStart+'&endtime='+this.statDateEnd
  474. });
  475. }
  476. }
  477. },
  478. tapjumpreception(i){
  479. this.Menulist.forEach(item=>{
  480. if(item.name=='接待记录'){
  481. if(i==1){
  482. uni.navigateTo({
  483. url: '/pages/center/records/index?refresh='+'refresh'+'&activeTotal='+'0'
  484. });
  485. }else if(i==2){
  486. uni.switchTab({
  487. url: '/pages/index/customer'
  488. });
  489. }else if(i==3){
  490. if(this.zhixingcenterindex==2){
  491. uni.navigateTo({
  492. url: '/pages/center/records/index?refresh='+'refresh'+'&activeTotal='+'2'
  493. });
  494. }else if(this.zhixingcenterindex==6){
  495. uni.navigateTo({
  496. url: '/pages/center/records/index?refresh='+'refresh'+'&activeTotal='+'3'
  497. });
  498. }else{
  499. uni.navigateTo({
  500. url: '/pages/center/records/index?refresh='+'refresh'+'&activeTotal='+'4'+'&staTime='+this.statDateStart+'&endtime='+this.statDateEnd
  501. });
  502. }
  503. }else if(i==6){
  504. uni.navigateTo({
  505. url: '/pages/center/records/index?refresh='+'refresh'+'&activeTotal='+'0'+'&validInvalid=0'
  506. });
  507. }else if(i==7){
  508. if(this.zhixingcenterindex==2){
  509. uni.navigateTo({
  510. url: '/pages/center/records/index?refresh='+'refresh'+'&activeTotal='+'2'+'&validInvalid=0'
  511. });
  512. }else if(this.zhixingcenterindex==6){
  513. uni.navigateTo({
  514. url: '/pages/center/records/index?refresh='+'refresh'+'&activeTotal='+'3'+'&validInvalid=0'
  515. });
  516. }else{
  517. uni.navigateTo({
  518. url: '/pages/center/records/index?refresh='+'refresh'+'&activeTotal='+'4'+'&staTime='+this.statDateStart+'&endtime='+this.statDateEnd+'&validInvalid=0'
  519. });
  520. }
  521. }else{
  522. uni.navigateTo({
  523. url: '/pages/center/records/index?refresh='+'refresh'+'&activeTotal=0'+'&markAdvisor=0'
  524. });
  525. }
  526. }
  527. })
  528. },
  529. Piabodata(item) {
  530. if (item == '销讲数据') {
  531. uni.navigateTo({
  532. url: '/pages/center/Piabodata/index'
  533. });
  534. } else if (item == '接待记录') {
  535. uni.navigateTo({
  536. url: '/pages/center/records/index?refresh='+'refresh'
  537. });
  538. } else if (item == '值班顾问') {
  539. uni.navigateTo({
  540. url: '/pages/mine/consultanonduty/index'
  541. });
  542. } else if (item == '设备管理') {
  543. uni.navigateTo({
  544. url: '/pages/mine/equipment/index'
  545. });
  546. } else if(item == '顾问排名') {
  547. uni.navigateTo({
  548. url: '/pages/center/Piabodata/Employeesstatistics'
  549. });
  550. }else if(item == '违禁记录'){
  551. uni.navigateTo({
  552. url: '/pages/center/prohibited/index?refresh='+'refresh'
  553. });
  554. }else{
  555. uni.navigateTo({
  556. url: '/pages/center/consumer/index?refresh='+'refresh'
  557. });
  558. }
  559. },
  560. },
  561. };
  562. </script>
  563. <style lang="scss" scoped>
  564. .activecllasscet{
  565. font-size: 28rpx;
  566. font-weight: 400;
  567. color: #008ef2;
  568. }
  569. .cet{
  570. font-size: 28rpx;
  571. font-weight: 400;
  572. color: #333333;
  573. .cetview{
  574. margin-left: 20rpx;
  575. }
  576. }
  577. .cented-box {
  578. padding: 30rpx;
  579. background: #F8F8F8;
  580. width: 100%;
  581. height: 100%;
  582. }
  583. .Switchingbox {
  584. width: 100%;
  585. height: 44rpx;
  586. display: flex;
  587. align-items: center;
  588. .Switching1 {
  589. width: 44rpx;
  590. height: 44rpx;
  591. .Switching1-img {
  592. width: 44rpx;
  593. height: 44rpx;
  594. }
  595. }
  596. .Switching2 {
  597. margin-left: 12rpx;
  598. font-size: 32rpx;
  599. color: #303030;
  600. font-weight: 500;
  601. }
  602. .Switching3 {
  603. width: calc(100% - 280rpx);
  604. font-size: 32rpx;
  605. color: #303030;
  606. font-weight: 500;
  607. }
  608. .Switching4 {
  609. width: 112rpx;
  610. font-size: 28rpx;
  611. color: #303030;
  612. font-weight: 400;
  613. text-align: right;
  614. text-decoration: underline
  615. }
  616. }
  617. .Workcard {
  618. width: 100%;
  619. background: #FFFFFF;
  620. height: 154rpx;
  621. box-shadow: 0px 0px 12px 0px rgba(224, 224, 224, 0.3);
  622. border-radius: 12rpx;
  623. display: flex;
  624. .Workcard-box {
  625. flex: 1;
  626. height: 100%;
  627. .Workcardimg {
  628. width: 100%;
  629. display: flex;
  630. justify-content: center;
  631. margin-top: 42rpx;
  632. .Workcardimg1 {
  633. width: 64rpx;
  634. height: 36rpx;
  635. background-image: url(../../static/images/battery.png);
  636. background-size: 100% 100%;
  637. padding: 8rpx;
  638. .bar {
  639. background-color: #43CD80;
  640. height: 100%;
  641. border-radius: 4rpx;
  642. }
  643. .bar1 {
  644. background-color: red;
  645. height: 100%;
  646. border-radius: 4rpx;
  647. }
  648. }
  649. .Workcardimg2 {
  650. width: 56rpx;
  651. height: 36rpx;
  652. }
  653. .Workcardimg3 {
  654. width: 34rpx;
  655. height: 36rpx;
  656. }
  657. .Workcardimg4 {
  658. width: 50rpx;
  659. height: 40rpx;
  660. }
  661. }
  662. .Workcardtext {
  663. width: 100%;
  664. text-align: center;
  665. font-size: 24rpx;
  666. font-weight: 400;
  667. color: #666666;
  668. margin-top: 20rpx;
  669. }
  670. }
  671. }
  672. .title {
  673. width: 100%;
  674. height: 30rpx;
  675. font-size: 30rpx;
  676. font-weight: 600;
  677. color: #333333;
  678. margin-top: 40rpx;
  679. margin-bottom: 24rpx;
  680. }
  681. .shebenbox {
  682. width: 100%;
  683. height: 156rpx;
  684. background: #FFFFFF;
  685. box-shadow: 0px 0px 12px 0px rgba(224, 224, 224, 0.3);
  686. border-radius: 12rpx;
  687. display: flex;
  688. .shebenche {
  689. width: 25%;
  690. height: 100%;
  691. .shebenchenum {
  692. width: 100%;
  693. font-size: 36rpx;
  694. font-weight: 600;
  695. color: #333333;
  696. text-align: center;
  697. margin-top: 28rpx;
  698. }
  699. .shebenchetext {
  700. width: 100%;
  701. font-size: 24rpx;
  702. font-weight: 400;
  703. color: #666666;
  704. text-align: center;
  705. margin-top: 24rpx;
  706. }
  707. }
  708. }
  709. .real-timebox {
  710. width: 100%;
  711. background: #FFFFFF;
  712. box-shadow: 0px 0px 12px 0px rgba(224, 224, 224, 0.3);
  713. border-radius: 12rpx;
  714. padding-bottom: 36rpx;
  715. .timebox {
  716. width: 100%;
  717. display: flex;
  718. .real {
  719. flex: 1;
  720. height: 100%;
  721. .realnum {
  722. width: 100%;
  723. font-size: 36rpx;
  724. font-weight: 600;
  725. color: #333333;
  726. text-align: center;
  727. margin-top: 36rpx;
  728. }
  729. .realtext {
  730. width: 100%;
  731. font-size: 24rpx;
  732. font-weight: 400;
  733. color: #666666;
  734. text-align: center;
  735. margin-top: 24rpx;
  736. }
  737. }
  738. }
  739. }
  740. .commonly-box {
  741. width: 100%;
  742. background: #FFFFFF;
  743. box-shadow: 0px 0px 12px 0px rgba(224, 224, 224, 0.3);
  744. border-radius: 12rpx;
  745. display: flex;
  746. flex-wrap: wrap;
  747. padding-bottom: 36rpx;
  748. .commonly {
  749. width: 25%;
  750. margin-top: 36rpx;
  751. .commonly-img {
  752. width: 100%;
  753. height: 68rpx;
  754. text-align: center;
  755. .commonly-img1 {
  756. width: 68rpx;
  757. height: 68rpx;
  758. border-radius: 50%;
  759. }
  760. }
  761. .commonly-text {
  762. width: 100%;
  763. text-align: center;
  764. font-size: 24rpx;
  765. font-weight: 400;
  766. color: #333333;
  767. margin-top: 16rpx;
  768. }
  769. }
  770. }
  771. </style>