workbench.vue 3.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118
  1. <template>
  2. <view class="container">
  3. <swiper class="swiper square-dot" indicator-color="#D7E3FD" indicator-active-color="#3874F6" :indicator-dots="true"
  4. :circular="true" duration="500">
  5. <swiper-item class="swiper-item" v-for="(it, i) in apps" :key="i">
  6. <navigator :url="item.path" open-type="navigate" class="app" v-for="item in it" :key="item.label">
  7. <view class="icon" :style="{ backgroundColor: item.color }">
  8. <text class="iconfont" :class="item.icon" style="font-size: 6.400vw;" />
  9. </view>
  10. <view class="label u-line-1">
  11. {{ item.label }}
  12. </view>
  13. </navigator>
  14. </swiper-item>
  15. </swiper>
  16. </view>
  17. </template>
  18. <script>
  19. export default {
  20. name: 'workbench',
  21. data() {
  22. return {
  23. apps: []
  24. };
  25. },
  26. created() {
  27. this.rander();
  28. },
  29. methods: {
  30. rander() {
  31. const clist = ['#5487F7', '#F29C37', '#9A6FF8', '#5AB73F', '#5487F7']
  32. let authList = uni.getStorageSync('authList'),
  33. list = [{
  34. label: "设备中心",
  35. icon: "icon-xunjianzhongxin",
  36. path: "/pages/facility/index?page=设备中心"
  37. }, {
  38. label: "巡检中心",
  39. icon: "icon-xunjianzhongxin"
  40. }, {
  41. label: "告警中心",
  42. icon: "icon-gaojingzhongxin",
  43. path: "/pages/alerts/index"
  44. }, {
  45. label: "取水系统",
  46. icon: "icon-xunjianzhongxin"
  47. }, {
  48. label: "雨洪系统",
  49. icon: "icon-xunjianzhongxin"
  50. }, {
  51. label: "工单",
  52. icon: "icon-gongdan",
  53. path: "/packageA/workOrder/index"
  54. }].filter(v => authList[v.label]),
  55. apps = [];
  56. for (let i = list.length / 5; i > 0; i--) {
  57. apps[apps.length] = list.splice(0, 5).map((v, i) => {
  58. v.color = clist[i]
  59. return v
  60. })
  61. };
  62. this.apps = apps;
  63. }
  64. }
  65. }
  66. </script>
  67. <style lang="scss" scoped>
  68. .container {
  69. width: 355px;
  70. margin: 0 auto;
  71. margin-top: 10px;
  72. background: #fff;
  73. border-radius: 4px;
  74. overflow: hidden;
  75. .swiper {
  76. height: 96px;
  77. .swiper-item {
  78. display: flex;
  79. margin-top: 5px;
  80. box-sizing: border-box;
  81. padding: 0 10px;
  82. .app {
  83. width: 68px;
  84. height: 69px;
  85. display: flex;
  86. flex-direction: column;
  87. align-items: center;
  88. padding: 5px 0;
  89. box-sizing: content-box;
  90. border-radius: 4px;
  91. .icon {
  92. display: flex;
  93. justify-content: center;
  94. align-items: center;
  95. width: 44px;
  96. height: 44px;
  97. border-radius: 4px;
  98. color: #fff;
  99. }
  100. .label {
  101. font-size: 12px;
  102. color: #333333;
  103. margin-top: 8px;
  104. width: 60px;
  105. text-align: center;
  106. }
  107. }
  108. }
  109. }
  110. }
  111. </style>