index.wpy 15 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528
  1. <style lang="less">
  2. .homeIndex {
  3. padding: 68px 0px 30px;
  4. position: relative;
  5. background-color: #ebf5fa;
  6. background-repeat: no-repeat;
  7. background-size: contain;
  8. .projectTitle {
  9. color: #1f2429;
  10. font-size: 22px;
  11. line-height: 32px;
  12. font-weight: 500;
  13. display: flex;
  14. padding-left: 20px;
  15. .name {
  16. margin-right: 5px;
  17. }
  18. }
  19. .projectInfo {
  20. padding-left: 20px;
  21. color: #626c78;
  22. font-size: 13px;
  23. line-height: 20px;
  24. margin-top: 8px;
  25. }
  26. .weather {
  27. color: #626c78;
  28. font-size: 13px;
  29. position: absolute;
  30. top: 108px;
  31. right: 12px;
  32. display: flex;
  33. .image {
  34. width: 20px;
  35. height: 20px;
  36. }
  37. .value {
  38. margin-left: 8px;
  39. margin-right: 8px;
  40. }
  41. .text {
  42. }
  43. }
  44. .scroll-view {
  45. position: relative;
  46. width: 100%;
  47. height: 350px;
  48. z-index: 2;
  49. white-space: nowrap;
  50. margin-top: 27px;
  51. // padding: 0 20px;
  52. // overflow: hidden;
  53. }
  54. .scroll-view-item {
  55. position: relative;
  56. overflow: hidden;
  57. display: inline-block;
  58. width: 280px;
  59. height: 350px;
  60. background: red;
  61. border-radius: 24px;
  62. margin-right: 12px;
  63. .itemCont {
  64. position: relative;
  65. bottom: -260px;
  66. padding-left: 20px;
  67. line-height: 32px;
  68. font-size: 22px;
  69. color: #fff;
  70. .spaceName {
  71. font-weight: 600;
  72. display: flex;
  73. align-items: center;
  74. .name {
  75. max-width: 180px;
  76. overflow: hidden;
  77. white-space: nowrap;
  78. text-overflow: ellipsis;
  79. }
  80. .resident {
  81. color: #1b2129;
  82. font-size: 11px;
  83. margin-left: 8px;
  84. padding: 0 5px;
  85. line-height: 18px;
  86. height: 18px;
  87. background: #96f2e3;
  88. border-radius: 4px;
  89. vertical-align: middle;
  90. }
  91. }
  92. .environment {
  93. font-size: 13px;
  94. color: rgba(255, 255, 255, 0.8);
  95. .param {
  96. margin-right: 20px;
  97. }
  98. }
  99. }
  100. .envirItem {
  101. // top: 270px;
  102. }
  103. }
  104. .scroll-view-item:nth-child(1) {
  105. margin-left: 20px;
  106. }
  107. .scroll-view-item:nth-last-child(1) {
  108. margin-right: 20px;
  109. }
  110. .scroll-view2 {
  111. position: relative;
  112. width: 100%;
  113. height: 76px;
  114. z-index: 2;
  115. white-space: nowrap;
  116. margin-top: 25px;
  117. // padding: 0 20px;
  118. // overflow: hidden;
  119. }
  120. .scroll-view-item2 {
  121. display: inline-block;
  122. min-width: 164px;
  123. height: 76px;
  124. margin-right: 8px;
  125. background: #fff;
  126. border-radius: 20px;
  127. padding-top: 15px;
  128. padding-left: 20px;
  129. padding-right: 20px;
  130. box-sizing: border-box;
  131. position: relative;
  132. .title {
  133. color: #1b2129;
  134. font-size: 16px;
  135. line-height: 24px;
  136. font-weight: 600;
  137. }
  138. .info {
  139. margin-top: 3px;
  140. color: #8b949e;
  141. font-size: 13px;
  142. line-height: 20px;
  143. display: flex;
  144. }
  145. .imageDiv {
  146. position: absolute;
  147. top: 0;
  148. right: 0;
  149. .image {
  150. width: 76px;
  151. height: 76px;
  152. }
  153. }
  154. }
  155. .scroll-view-item2:nth-child(1) {
  156. margin-left: 20px;
  157. }
  158. .scroll-view-item2:nth-last-child(1) {
  159. margin-right: 20px;
  160. }
  161. .menuWrap {
  162. padding: 0 20px;
  163. .menuHeader {
  164. color: #626c78;
  165. line-height: 24px;
  166. font-size: 16px;
  167. margin-top: 24px;
  168. }
  169. .menuList {
  170. margin-top: 8px;
  171. overflow: hidden;
  172. }
  173. .menuItem {
  174. width: 205rpx;
  175. height: 84px;
  176. border-radius: 20px;
  177. margin-right: 15rpx;
  178. float: left;
  179. background: #fff;
  180. margin-bottom: 16px;
  181. padding-top: 12px;
  182. box-sizing: border-box;
  183. .menuImg {
  184. text-align: center;
  185. .image {
  186. height: 32px;
  187. width: 32px;
  188. }
  189. }
  190. .menuTitle {
  191. font-size: 13px;
  192. color: #1b2129;
  193. text-align: center;
  194. }
  195. }
  196. }
  197. .projectPop {
  198. position: relative;
  199. overflow: hidden;
  200. .projectWrap {
  201. overflow-y: auto;
  202. max-height: 400px;
  203. .projectItem {
  204. height: 50px;
  205. text-align: center;
  206. line-height: 50px;
  207. font-size: 16px;
  208. color: #1b2129;
  209. &:hover {
  210. background: #f1f4f6;
  211. }
  212. &.sel {
  213. color: #1db1b2;
  214. }
  215. }
  216. }
  217. .button {
  218. width: 100%;
  219. font-size: 16px;
  220. background: #fff;
  221. color: #8b949e;
  222. height: 50px;
  223. text-align: center;
  224. line-height: 50px;
  225. border-top: 5px solid #f1f4f6;
  226. }
  227. }
  228. }
  229. .van-popup {
  230. }
  231. </style>
  232. <template>
  233. <div class="homeIndex" :style="{'background-image': 'url('+h5StaticPath+'homeBack.jpg)'}">
  234. <div class="projectTitle" @click="showProject"><span class="name">{{nowCompanyName}}</span><van-icon name="arrow-down" size="20"/></div>
  235. <div class="projectInfo">成为一家牛的让员工幸福的企业</div>
  236. <div class="weather"><image class="image" :src="h5StaticPath+weather.imgname"/><span class="value">{{weather.temperature}}℃</span><span class="text">{{weather.text}}</span></div>
  237. <scroll-view scroll-x="{{true}}" show-scrollbar="{{false}}" class="scroll-view" enhanced>
  238. <view class="scroll-view-item">
  239. <div class="itemCont" v-if="reSpaceId" @click="goEnv('homeShowEnv')">
  240. <div class="spaceName"><div class="name">{{ reSpaceName }}</div><span class="resident">常驻工区</span></div>
  241. <div class="environment"><span class="param">{{spaceParam.temperature||'--'}}℃</span><span class="param">{{spaceParam.co2||'--'}}ppm</span><span class="param">{{spaceParam.pm25||'--'}}μg/m³</span></div>
  242. </div>
  243. <div class="itemCont" v-if="!reSpaceId" @click="goEnv('homeSetSpace')">去设置<br>您的常驻工区<van-icon name="arrow" size="20"/></div>
  244. </view>
  245. <view class="scroll-view-item"><div class="itemCont envirItem" @click="goToIntroduce('environment')">环境健康小知识<van-icon name="arrow" size="20"/></div></view>
  246. </scroll-view>
  247. <scroll-view scroll-x="{{true}}" class="scroll-view2" show-scrollbar="{{false}}" enhanced>
  248. <view class="scroll-view-item2" v-if="showCard.openLight" @click="goEnv('openLamp')"><div class="title">开启照明</div><div class="info">快速启动</div><div class="imageDiv">
  249. <image class="image" :src="h5StaticPath+'lamb.png'"/>
  250. </div></view>
  251. <view class="scroll-view-item2" v-if="showCard.raiseTemperature" @click="goEnv('airAddOne')"><div class="title">调高温度</div><div class="info">快速启动</div><div class="imageDiv">
  252. <image class="image" :src="h5StaticPath+'airAdjust.png'"/>
  253. </div></view>
  254. <view class="scroll-view-item2" v-if="showCard.lowerTemperature" @click="goEnv('airReduceOne')"><div class="title">调低温度</div><div class="info">快速启动</div><div class="imageDiv">
  255. <image class="image" :src="h5StaticPath+'airAdjust.png'"/>
  256. </div></view>
  257. <view class="scroll-view-item2" v-if="showCard.oneClickFullClose" @click="goEnv('closeLampAir')"><div class="title">一键全关</div><div class="info">快速全关</div><div class="imageDiv">
  258. <image class="image" :src="h5StaticPath+'allClose.png'"/>
  259. </div></view>
  260. <view class="scroll-view-item2" @click="goToIntroduce('overtime')"><div class="title">如何预约加时?</div><div class="info">点击查看<van-icon name="arrow" size="14"/></div></view>
  261. <view class="scroll-view-item2" @click="goToIntroduce('resident')"><div class="title">如何设置常驻工区?</div><div class="info">点击查看<van-icon name="arrow" size="14"/></div></view>
  262. <view class="scroll-view-item2" @click="goToIntroduce('carboncredit')"><div class="title">如何获取碳积分?</div><div class="info">点击查看<van-icon name="arrow" size="14"/></div></view>
  263. </scroll-view>
  264. <div class="menuWrap">
  265. <div class="menuHeader">服务</div>
  266. <div class="menuList">
  267. <div class="menuItem" @click="goEnv('homeShowEnv')"><div class="menuImg"><image class="image" :src="h5StaticPath+'environment.png'"/></div><div class="menuTitle">环境调节</div></div>
  268. <div class="menuItem" @click="goToFind"><div class="menuImg"><image class="image" :src="h5StaticPath+'find.png'"/></div><div class="menuTitle">找一找</div></div>
  269. <div class="menuItem" @click="goPortrait"><div class="menuImg"><image class="image" :src="h5StaticPath+'myhabits.png'"/></div><div class="menuTitle">我的习惯</div></div>
  270. <div class="menuItem" @click="goPersonCenter"><div class="menuImg"><image class="image" :src="h5StaticPath+'myself.png'"/></div><div class="menuTitle">个人中心</div></div>
  271. </div>
  272. <div class="menuHeader" v-if="userInfo.manageUserType==3">管理</div>
  273. <div class="menuList" v-if="userInfo.manageUserType==3">
  274. <div class="menuItem" @click="goAdministration"><div class="menuImg"><image class="image" :src="h5StaticPath+'control.png'"/></div><div class="menuTitle">行政端管理</div></div>
  275. </div>
  276. </div>
  277. <van-popup :show="show" position="bottom" @close="hideProject" round>
  278. <div class="projectPop">
  279. <div class="projectWrap" style="max-height:{{screenHeight-200}}px">
  280. <div class="projectItem" :class="{'sel':item.id==userInfo.companyId}" v-for="(item, index) in companyList" :key="index" @click="projectClick(item)">{{ item.name }}</div>
  281. </div>
  282. <div class="button">取消</div>
  283. </div>
  284. </van-popup>
  285. </div>
  286. </template>
  287. <script>
  288. import wepy from '@wepy/core';
  289. import eventHub from '@/common/eventHub';
  290. import { mapState } from '@wepy/x';
  291. import store from '@/store';
  292. import config from '@/config';
  293. import {
  294. queryControlSpaceCompany,
  295. querySpaceFunctionCard,
  296. getSpaceProperty,
  297. switchCompany,
  298. getWeather,
  299. } from '@/api/home.js';
  300. import {
  301. getCompanyDataByPhone,
  302. wxLogin,
  303. checkHasUserInfo,
  304. checkLoginNew,
  305. } from '@/service/user.js';
  306. wepy.page({
  307. store,
  308. config: {},
  309. data: {
  310. show: false,
  311. h5StaticPath: config.h5StaticPath + '/page-home/',
  312. screenHeight: 560,
  313. companyList: [],
  314. controlSpaces: [], //租户可控空间
  315. reSpaceId: '', //常驻空间
  316. reSpaceName: '',
  317. showCard: {},
  318. spaceParam: {},
  319. weather: {},
  320. iii: 1,
  321. },
  322. computed: {
  323. ...mapState({
  324. userInfo: (state) => state.user.userInfo,
  325. projctId: (state) => state.user?.userInfo?.projctId,
  326. companyId: (state) => state.user?.userInfo?.companyId,
  327. }),
  328. nowCompanyName: function() {
  329. console.log('watchwatchwatch', this.companyId, this.companyList);
  330. var filter = this.companyList.filter((item) => {
  331. return item.id == this.companyId;
  332. });
  333. store.commit('setCompanyName', filter[0]?.name);
  334. return filter[0]?.name;
  335. },
  336. },
  337. watch: {
  338. // companyId: function(newSpaceId, oldSpaceId) {
  339. // console.log('watchwatchwatch', this);
  340. // var filter = this.companyList.filter((item) => {
  341. // return item.id == newSpaceId;
  342. // });
  343. // this.nowCompanyName = filter[0]?.name;
  344. // },
  345. },
  346. methods: {
  347. loadData() {
  348. var paramObj = {
  349. criteria: {
  350. companyId: this.userInfo.companyId,
  351. },
  352. };
  353. //查找租户可控空间
  354. queryControlSpaceCompany(paramObj)
  355. .then((res) => {
  356. this.controlSpaces = res.data || [];
  357. })
  358. .catch((err) => {});
  359. //常驻空间快速调节卡片
  360. querySpaceFunctionCard({
  361. userId: this.userInfo.userId,
  362. companyId: this.userInfo.companyId,
  363. })
  364. .then((res) => {
  365. //console.log('querySpaceFunctionCard', res);
  366. if (res.message == '该用户没有常驻空间') {
  367. this.reSpaceId = '';
  368. this.reSpaceName = '';
  369. this.showCard = {};
  370. return;
  371. }
  372. this.reSpaceId = res.spaceId || ''; //有常驻空间
  373. this.reSpaceName = res.spaceName || '';
  374. this.showCard = res || {};
  375. //console.log('showCardshowCard', this.showCard);
  376. //常驻空间参数属性
  377. this.reSpaceId &&
  378. getSpaceProperty({
  379. projectId: this.userInfo.projectId,
  380. spaceId: this.reSpaceId,
  381. })
  382. .then((res) => {
  383. this.spaceParam = res || {};
  384. })
  385. .catch((err) => {});
  386. })
  387. .catch((err) => {});
  388. },
  389. projectClick: function(item) {
  390. var _this = this;
  391. this.show = false;
  392. switchCompany(item.id)
  393. .then((res) => {
  394. if (res.result == 'success') {
  395. console.log('switchCompanyswitchCompany');
  396. wxLogin()
  397. .then((res) => {
  398. _this.loadData();
  399. })
  400. .catch((err) => {});
  401. }
  402. })
  403. .catch((err) => {});
  404. },
  405. hideProject: function() {
  406. this.show = false;
  407. },
  408. showProject: function() {
  409. this.show = true;
  410. },
  411. goEnv(param) {
  412. if (this.controlSpaces.length == 0) {
  413. wx.showToast({
  414. title: '您还未配置可控空间',
  415. icon: 'none',
  416. duration: 4000,
  417. });
  418. return;
  419. }
  420. // switch (param) {
  421. // case 'homeShowEnv':
  422. // break;
  423. // case 'homeSetSpace':
  424. // break;
  425. // case '':
  426. // break;
  427. // default:
  428. // }
  429. wx.navigateTo({
  430. url: `/packagesEnv/pages/officehome/index?from=${param}`,
  431. });
  432. },
  433. goToIntroduce(id) {
  434. //有没有可控空间
  435. var hasControlSpaces = this.controlSpaces.length == 0 ? 'no' : 'has';
  436. wx.navigateTo({
  437. url: `/packagesEnv/pages/home/${id}?hasControlSpaces=${hasControlSpaces}`,
  438. });
  439. },
  440. goToFind() {
  441. wx.navigateTo({
  442. url: '/packagesEnv/pages/search/index',
  443. });
  444. },
  445. goPortrait() {
  446. wx.navigateTo({
  447. url: '/packagesEnv/pages/portrait/home',
  448. });
  449. },
  450. goPersonCenter() {
  451. wx.navigateTo({
  452. url: '/packagesEnv/pages/personalCenter/index',
  453. });
  454. },
  455. goAdministration() {
  456. wx.navigateTo({
  457. url: `/packagesEnv/pages/administration/index`,
  458. });
  459. },
  460. },
  461. onLoad() {
  462. console.log("home----onLoad");
  463. checkLoginNew()
  464. .then(() => {
  465. checkHasUserInfo();
  466. //获取项目list
  467. getCompanyDataByPhone()
  468. .then((res) => {
  469. this.companyList = res || [];
  470. })
  471. .catch((err) => {});
  472. getWeather(this.userInfo.projectId)
  473. .then((res) => {
  474. this.weather = res.content || {}; //{ temperature: 30, text: '云' };
  475. var text = '云';
  476. var imgname = 'sunny.png';
  477. if (text.indexOf('晴') > -1) {
  478. imgname = 'sunny.png';
  479. } else if (text.indexOf('雨') > -1) {
  480. imgname = 'rain.png';
  481. } else if (text.indexOf('阴') > -1) {
  482. imgname = 'cloudy.png';
  483. } else if (text.indexOf('云') > -1) {
  484. imgname = 'muchCloud.png';
  485. } else if (text.indexOf('雾') > -1 || text.indexOf('霾') > -1) {
  486. imgname = 'fog.png';
  487. } else if (text.indexOf('风') > -1) {
  488. imgname = 'wind.png';
  489. } else if (text.indexOf('雪') > -1) {
  490. imgname = 'snow.png';
  491. }
  492. this.weather.imgname = imgname;
  493. })
  494. .catch((err) => {});
  495. this.loadData();
  496. })
  497. .catch((err) => {});
  498. // 获取系统信息
  499. const systemInfo = wx.getSystemInfoSync();
  500. this.screenHeight = systemInfo.screenHeight;
  501. },
  502. onShow() {
  503. console.log("home----onShow");
  504. this.loadData();
  505. },
  506. });
  507. </script>
  508. <config>
  509. {
  510. "navigationStyle":"custom",
  511. usingComponents: {
  512. "van-icon": "module:@vant/weapp/dist/icon",
  513. "van-popup": "module:@vant/weapp/dist/popup"
  514. }
  515. }
  516. </config>