index.vue 15 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549
  1. <template>
  2. <view class="content">
  3. <view class="topnames" >
  4. 首页
  5. </view>
  6. <!--<view class="Homepage_header">-->
  7. <!--</view>-->
  8. <view class="Homepage_suspension"
  9. v-if="$has('app:InspectionRecord')||$has('app:OnlineReport')||$has('app:WithholdingRecord')">
  10. <view class="Suspension">
  11. <view class="online" @click="Onlinewarranty" v-if="$has('app:OnlineReport')">
  12. <view>
  13. <!-- <img :src="srcxianshang1" alt="" style="margin-left: 5rpx;"> -->
  14. <u--image mode="widthFix" :src="srcxianshang1" width="80rpx" height="80rpx"></u--image>
  15. </view>
  16. <view style="font-size: 28rpx;color: #697081;">线上报修</view>
  17. </view>
  18. <view class="online" @click="Inspectionrecord" v-if="$has('app:InspectionRecord')">
  19. <view>
  20. <u--image mode="widthFix" :src="srcxianshang2" width="80rpx" height="80rpx"></u--image>
  21. </view>
  22. <view style="font-size: 28rpx;color: #697081;">巡检记录</view>
  23. </view>
  24. <view class="online" @click="Withholdingrecord" v-if="$has('app:WithholdingRecord')">
  25. <view>
  26. <u--image mode="widthFix" :src="srcxianshang3" width="80rpx" height="80rpx"></u--image>
  27. </view>
  28. <view style="font-size: 28rpx;color: #697081;">扣缴记录</view>
  29. </view>
  30. </view>
  31. </view>
  32. <view class="pending" v-if="$has('app:RealtimeInspection')">
  33. <view class="pending_middle">
  34. <view class="all">
  35. <view class="work">
  36. <span style="font-size: 30rpx;font-weight: bold;">实时巡检</span>
  37. </view>
  38. <view class="processing" v-if="$has('app:ImmediateInspection')">
  39. <view class="immediately" @click="Immediateinspection">
  40. <span style="font-size: 25rpx; color: #5c8fff; ">立即巡检</span>
  41. <u-icon name="arrow-right" color="#5c8fff" size="16rpx"></u-icon>
  42. </view>
  43. </view>
  44. </view>
  45. <view class="wait">
  46. <view>
  47. <view style="font-size: 26rpx;color: #697081;">今日待巡检</view>
  48. <view style="text-align: center;font-size: 32rpx;color: #0C1935;padding-top: 15rpx;">
  49. {{inspectionInfoList.todayTotalNum}}
  50. </view>
  51. </view>
  52. <view>
  53. <view style="font-size: 26rpx;color: #697081;">今日已巡检</view>
  54. <view style="text-align: center;font-size: 32rpx;color: #0C1935;padding-top: 15rpx;">
  55. {{inspectionInfoList.todayNum}}
  56. </view>
  57. </view>
  58. </view>
  59. </view>
  60. </view>
  61. <view class="pending" v-if="$has('app:Tobeassigned')||$has('app:Toberepaired')||$has('app:hasrepaired')">
  62. <view class="pending_middle">
  63. <view class="all">
  64. <view class="work">
  65. <span style="font-size: 30rpx;font-weight: bold;">工单待办</span>
  66. </view>
  67. <view class="processing" v-if="$has('app:WorkorderTobeDone')">
  68. <view class="immediately" @click="Workordertodone">
  69. <span style="font-size: 25rpx; color: #5c8fff; ">立即处理</span>
  70. <u-icon name="arrow-right" color="#5c8fff" size="16rpx"></u-icon>
  71. </view>
  72. </view>
  73. </view>
  74. <view class="wait">
  75. <view v-if="$has('app:Tobeassigned')">
  76. <view style="font-size: 26rpx;color: #697081;">待指派</view>
  77. <view style="text-align: center;font-size: 32rpx;color: #0C1935;padding-top: 15rpx;">
  78. {{workList[1]}}
  79. </view>
  80. </view>
  81. <view v-if="$has('app:Toberepaired')">
  82. <view style="font-size: 26rpx;color: #697081;">待维修</view>
  83. <view style="text-align: center;font-size: 32rpx;color: #0C1935;padding-top: 15rpx;">
  84. {{workList[2]}}
  85. </view>
  86. </view>
  87. <view v-if="$has('app:hasrepaired')">
  88. <view style="font-size: 26rpx;color: #697081;">已维修</view>
  89. <view style="text-align: center;font-size: 32rpx;color: #0C1935;padding-top: 15rpx;">
  90. {{workList[3]}}
  91. </view>
  92. </view>
  93. </view>
  94. </view>
  95. </view>
  96. <view class="equipment" v-if="$has('app:EquipmentException')">
  97. <view class="pending_middle">
  98. <view class="all">
  99. <view class="work">
  100. <span style="font-size: 30rpx;font-weight: bold;">设备异常</span>
  101. </view>
  102. <view class="processing" v-if="$has('app:LookatImmediately')">
  103. <view class="immediately" @click="EquipmentException">
  104. <span style="font-size: 25rpx; color: #5c8fff; ">立即查看</span>
  105. <u-icon name="arrow-right" color="#5c8fff" size="16rpx"></u-icon>
  106. </view>
  107. </view>
  108. </view>
  109. <view class="wait">
  110. <view>
  111. <view style="font-size: 26rpx;color: #697081;">异常总数</view>
  112. <view style="text-align: center;font-size: 32rpx;color: #FA5555;padding-top: 15rpx;">
  113. {{deviceArr.AirConditioner}}
  114. </view>
  115. </view>
  116. <view>
  117. <view style="font-size: 26rpx;color: #697081;">空调异常</view>
  118. <view style="text-align: center;font-size: 32rpx;color: #FA5555;padding-top: 15rpx;">
  119. {{deviceArr.Ammeter}}
  120. </view>
  121. </view>
  122. <view>
  123. <view style="font-size: 26rpx;color: #697081;">水表异常</view>
  124. <view style="text-align: center;font-size: 32rpx;color: #FA5555;padding-top: 15rpx;">
  125. {{deviceArr.WaterMeter}}
  126. </view>
  127. </view>
  128. <view>
  129. <view style="font-size: 26rpx;color: #697081;">电表异常</view>
  130. <view style="text-align: center;font-size: 32rpx;color: #FA5555;padding-top: 15rpx;">
  131. {{deviceArr.Relay}}
  132. </view>
  133. </view>
  134. </view>
  135. </view>
  136. </view>
  137. <!-- 管理员界面 -->
  138. <view class="arrears" v-if="$has('app:ArrearstobeCollected')">
  139. <view class="pending_middle">
  140. <view class="all">
  141. <view class="work">
  142. <span style="font-size: 30rpx;font-weight: bold;">欠费待收</span>
  143. </view>
  144. <view class="processing" v-if="$has('app:ImmediateCollection')">
  145. <view class="immediately" @click="Immediatecollection">
  146. <span style="font-size: 25rpx; color: #5c8fff; ">立即催收</span>
  147. <u-icon name="arrow-right" color="#5c8fff" size="16rpx"></u-icon>
  148. </view>
  149. </view>
  150. </view>
  151. <t-table style="background-color: #fff;margin-top: 10rpx;">
  152. <t-tr>
  153. <t-th>欠费类型</t-th>
  154. <t-th>欠费租户数</t-th>
  155. <t-th>累计欠费(元)</t-th>
  156. </t-tr>
  157. <t-tr v-for="item in tableList" :key="item.name">
  158. <t-td>{{ item.name }}</t-td>
  159. <t-td>{{ item.tenant }}</t-td>
  160. <t-td>{{ item.arrears }}</t-td>
  161. </t-tr>
  162. </t-table>
  163. </view>
  164. </view>
  165. <!-- 租户界面 -->
  166. <view class="arrears1" v-if="$has('app:BillPending')">
  167. <view class="pending_middle">
  168. <view class="all">
  169. <view class="work">
  170. <span style="font-size: 30rpx;font-weight: bold;">账单待缴</span>
  171. </view>
  172. <view class="processing" v-if="$has('app:ImmediatePayment')">
  173. <view class="immediately" @click="BillPending">
  174. <span style="font-size: 25rpx; color: #5c8fff; ">立即缴费</span>
  175. <u-icon name="arrow-right" color="#5c8fff" size="16rpx"></u-icon>
  176. </view>
  177. </view>
  178. </view>
  179. <t-table style="background-color: #fff;margin-top: 10rpx;">
  180. <t-tr>
  181. <t-th>欠费类型</t-th>
  182. <t-th>本期待缴金额(元)</t-th>
  183. <t-th>累计待缴金额(元)</t-th>
  184. </t-tr>
  185. <t-tr v-for="item in tableList" :key="item.name">
  186. <t-td>{{ item.name }}</t-td>
  187. <t-td>{{ item.currentAmount }}</t-td>
  188. <t-td>{{ item.cumulativeAmount }}</t-td>
  189. </t-tr>
  190. </t-table>
  191. </view>
  192. </view>
  193. <u-tabbar class="tabberall" :value="value1" :fixed="true" :placeholder="true" @change="name => value1 = name"
  194. :safeAreaInsetBottom="true">
  195. <u-tabbar-item text="首页" @click="click1">
  196. <image class="u-page__item__slot-icon" slot="active-icon" :src="tabimg1"></image>
  197. <image class="u-page__item__slot-icon" slot="inactive-icon" :src="tabimg2"></image>
  198. </u-tabbar-item>
  199. <u-tabbar-item v-if="$has('app:worktable')" text="工作台" @click="click2">
  200. <image class="u-page__item__slot-icon" slot="active-icon" :src="tabimg3"></image>
  201. <image class="u-page__item__slot-icon" slot="inactive-icon" :src="tabimg4"></image>
  202. </u-tabbar-item>
  203. <u-tabbar-item text="我的" @click="click3">
  204. <image class="u-page__item__slot-icon" slot="active-icon" :src="tabimg5"></image>
  205. <image class="u-page__item__slot-icon" slot="inactive-icon" :src="tabimg6"></image>
  206. </u-tabbar-item>
  207. </u-tabbar>
  208. <!-- 水印 -->
  209. <!-- <canvas v-if="showCanvas" class="watermarkCans" canvas-id="watermarkCanvas"></canvas> -->
  210. </view>
  211. </template>
  212. <script>
  213. import watermark from '@/js_sdk/ly-watermark/commons/watermark.js'
  214. import tTable from '@/components/t-table/t-table.vue';
  215. import tTh from '@/components/t-table/t-th.vue';
  216. import tTr from '@/components/t-table/t-tr.vue';
  217. import tTd from '@/components/t-table/t-td.vue';
  218. export default {
  219. // mixins: [watermark], // 水印
  220. components: {
  221. tTable,
  222. tTh,
  223. tTr,
  224. tTd
  225. },
  226. data() {
  227. return {
  228. canvasText: '',
  229. value1: 0,
  230. tabimg1: require('@/static/tab/h2.png'),
  231. tabimg2: require('@/static/tab/h1.png'),
  232. tabimg3: require('@/static/tab/w2.png'),
  233. tabimg4: require('@/static/tab/w1.png'),
  234. tabimg5: require('@/static/tab/y2.png'),
  235. tabimg6: require('@/static/tab/y1.png'),
  236. srcxianshang1: require('@/static/index/repair-online.svg'),
  237. srcxianshang2: require('@/static/index/check-review.svg'),
  238. srcxianshang3: require('@/static/index/reduce-record.svg'),
  239. tableList: [],
  240. tabbardata: 0,
  241. workList: {}, //工单代办
  242. deviceArr: {}, //设备异常数据
  243. getuserInfo: {},
  244. inspectionInfoList: {},
  245. }
  246. },
  247. onLoad() {
  248. this.getalldata();
  249. this.getuserInfo = uni.getStorageSync('getuserInfo');
  250. this.canvasText=this.getuserInfo.realName;
  251. },
  252. mounted() {
  253. // this.initWatermark(); // 可以在水印内容准备好后执行初始化
  254. },
  255. onPullDownRefresh() {
  256. // console.log('我下拉刷新页面了!!!!!!!!!!!!!!!', )
  257. this.getalldata();
  258. },
  259. methods: {
  260. click1() {
  261. uni.navigateTo({
  262. url: '/pages/index/index'
  263. })
  264. },
  265. click2() {
  266. uni.navigateTo({
  267. url: '/pages/Workorder/Workorder'
  268. })
  269. },
  270. click3() {
  271. uni.navigateTo({
  272. url: '/pages/my/my'
  273. })
  274. },
  275. getalldata() {
  276. this.$api.get('/home/homedata', {})
  277. .then(res => {
  278. uni.stopPullDownRefresh() //刷新数据之后停止刷新效果
  279. //console.log('111111111111111111', res.data.data)
  280. this.workList = res.data.data.workOrder;
  281. this.deviceArr = res.data.data.equip.maps;
  282. this.inspectionInfoList = res.data.data.inspectionInfo;
  283. this.tableList = res.data.data.billPaymentList.map(item => {
  284. let json = {};
  285. if (item.payType == 'Water') {
  286. item.payType = '水费'
  287. } else if (item.payType == 'Elec') {
  288. item.payType = '电费'
  289. } else if (item.payType == 'PropertyFee') {
  290. item.payType = '物业费'
  291. }
  292. json.name = item.payType;
  293. json.tenant = item.arrearageNum;
  294. json.arrears = item.arrearageAmount;
  295. json.currentAmount = item.currentAmount;
  296. json.cumulativeAmount = item.cumulativeAmount;
  297. return json
  298. })
  299. })
  300. },
  301. BillPending() {
  302. // console.log('111111111111111111',this.getuserInfo)
  303. uni.navigateTo({
  304. url: '/pages/index/BillPending/BillPending?info=' + encodeURIComponent(JSON.stringify(this
  305. .getuserInfo))
  306. });
  307. },
  308. Immediatecollection() {
  309. uni.navigateTo({
  310. url: '/pages/index/Immediatecollection/Immediatecollection'
  311. })
  312. },
  313. Workordertodone() {
  314. uni.navigateTo({
  315. url: '/pages/index/Workordertodone/Workordertodone'
  316. })
  317. },
  318. EquipmentException() {
  319. uni.navigateTo({
  320. url: '/pages/index/EquipmentException/EquipmentException'
  321. })
  322. },
  323. Onlinewarranty() {
  324. uni.navigateTo({
  325. url: '/pages/index/Onlinewarranty/Onlinewarranty'
  326. })
  327. },
  328. Immediateinspection() {
  329. uni.navigateTo({
  330. url: '/pages/index/Immediateinspection/Immediateinspection'
  331. })
  332. },
  333. Inspectionrecord() {
  334. uni.navigateTo({
  335. url: '/pages/index/Inspectionrecord/Inspectionrecord'
  336. })
  337. },
  338. Withholdingrecord() {
  339. uni.navigateTo({
  340. url: '/pages/index/Withholdingrecord/Withholdingrecord'
  341. })
  342. },
  343. }
  344. }
  345. </script>
  346. <style lang="scss">
  347. * {
  348. margin: 0;
  349. padding: 0;
  350. list-style: none;
  351. text-decoration: none;
  352. }
  353. .watermarkCans {
  354. width: 250rpx;
  355. height: 250rpx;
  356. position: absolute;
  357. z-index: -1;
  358. }
  359. // .u-tabbar__content{
  360. // .u-tabbar-item__icon{
  361. // .u-tabbar-item__icon{
  362. // font-size: 19px!important;
  363. // }
  364. // }
  365. // }
  366. .u-page__item__slot-icon {
  367. width: 40rpx;
  368. height: 40rpx;
  369. }
  370. .online {
  371. display: flex;
  372. flex-direction: column;
  373. justify-content: center;
  374. align-items: center;
  375. }
  376. .Homepage_header {
  377. width: 750rpx;
  378. height: 200rpx;
  379. background-color: #5c8fff;
  380. border-radius: 0px 0px 16px 16px;
  381. position: fixed;
  382. top: 0px;
  383. }
  384. .kongbai {
  385. height: 100rpx;
  386. width: 750rpx;
  387. }
  388. .Homepage_suspension {
  389. width: 690rpx;
  390. height: 200rpx;
  391. margin: 0 auto;
  392. background-color: #fff;
  393. display: flex;
  394. align-items: center;
  395. justify-content: space-between;
  396. border-radius: 10rpx;
  397. }
  398. .Suspension {
  399. width: 690rpx;
  400. // height: 200rpx;
  401. display: flex;
  402. align-items: center;
  403. justify-content: space-around;
  404. }
  405. .pending1 {
  406. width: 750rpx;
  407. height: 220rpx;
  408. // background-color: #ccc;
  409. display: flex;
  410. align-items: center;
  411. justify-content: center;
  412. position: relative;
  413. margin-top: 120rpx;
  414. }
  415. .pending {
  416. width: 750rpx;
  417. height: 260rpx;
  418. // background-color: #ccc;
  419. display: flex;
  420. align-items: center;
  421. justify-content: center;
  422. position: relative;
  423. }
  424. .pending_middle {
  425. width: 690rpx;
  426. // height: 100px;
  427. // background-color: #fff;
  428. }
  429. .all {
  430. width: 100%;
  431. display: flex;
  432. align-items: center;
  433. justify-content: space-between;
  434. }
  435. .work {
  436. // padding-left: 20rpx;
  437. // padding-top: 2rpx;
  438. }
  439. .wait {
  440. width: 690rpx;
  441. display: flex;
  442. align-items: center;
  443. background-color: #fff;
  444. justify-content: space-around;
  445. padding-top: 30rpx;
  446. text-align: center;
  447. height: 140rpx;
  448. margin-top: 10rpx;
  449. border-radius: 10rpx;
  450. }
  451. .immediately {
  452. display: flex;
  453. // padding-top: 2rpx;
  454. }
  455. .equipment {
  456. width: 750rpx;
  457. // height: 200rpx;
  458. display: flex;
  459. align-items: center;
  460. justify-content: center;
  461. position: relative;
  462. top: 20rpx;
  463. }
  464. .arrears {
  465. // width: 750rpx;
  466. // height: 350rpx;
  467. display: flex;
  468. flex: 1;
  469. align-items: center;
  470. justify-content: center;
  471. position: relative;
  472. top: 50rpx;
  473. }
  474. .arrears1 {
  475. // width: 750rpx;
  476. // height: 350rpx;
  477. display: flex;
  478. flex: 1;
  479. align-items: center;
  480. justify-content: center;
  481. position: relative;
  482. top: 80rpx;
  483. margin-bottom: 100rpx;
  484. }
  485. .type {
  486. display: flex;
  487. align-items: center;
  488. justify-content: space-around;
  489. text-align: center;
  490. flex: 1;
  491. margin-top: 10rpx;
  492. font-size: 30rpx;
  493. }
  494. tr {
  495. background-color: #fff;
  496. }
  497. </style>