You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 

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