spectaculars.vue 3.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113
  1. <template>
  2. <view class="container" v-if="showList.length">
  3. <navigator v-if="isShow('设备')" url="/pages/facility/index?page=设备中心&status=在线" hover-class="navigator-hover"
  4. class="item">
  5. <view class="label">在线设备</view>
  6. <view class="count u-line-1">{{ statistics.today_devices }}</view>
  7. </navigator>
  8. <navigator v-if="isShow('设备')" url="/pages/facility/index?page=设备中心&status=离线" hover-class="navigator-hover"
  9. class="item">
  10. <view class="label">离线设备</view>
  11. <view class="count u-line-1">{{ statistics.today_devices_off }}</view>
  12. </navigator>
  13. <navigator v-if="isShow('今日警告')" url="/pages/alerts/index?date=今天" hover-class="navigator-hover" class="item">
  14. <view class="label">今日警告</view>
  15. <view class="count u-line-1">{{ statistics.today_warns }}</view>
  16. </navigator>
  17. <navigator v-if="isShow('今日工单')" url="/packageA/workOrder/index?date=今天" hover-class="navigator-hover" class="item">
  18. <view class="label">今日工单</view>
  19. <view class="count u-line-1">{{ statistics.today_orders }}</view>
  20. </navigator>
  21. </view>
  22. </template>
  23. <script>
  24. export default {
  25. name: 'spectaculars',
  26. data() {
  27. return {
  28. statistics: {
  29. today_devices: 0,
  30. today_warns: 0,
  31. today_orders: 0,
  32. },
  33. showList: []
  34. };
  35. },
  36. computed: {
  37. isShow() {
  38. return function (name) {
  39. return this.showList.includes(name)
  40. }
  41. }
  42. },
  43. created() {
  44. let auth = uni.getStorageSync('authList'),
  45. showList = [];
  46. typeof auth.设备中心 == 'object' && showList.push("设备");
  47. typeof auth.告警中心 == 'object' && showList.push("今日警告");
  48. typeof auth.工单 == 'object' && showList.push("今日工单");
  49. this.showList = showList;
  50. },
  51. methods: {
  52. getDetail() {
  53. this.$Http.basic({
  54. "id": 20230721153102,
  55. "content": {}
  56. }).then(res => {
  57. console.log("数据看板", res)
  58. if (this.cutoff(res.msg)) return;
  59. this.statistics = res.data;
  60. })
  61. }
  62. }
  63. }
  64. </script>
  65. <style lang="scss" scoped>
  66. .container {
  67. display: flex;
  68. width: 355px;
  69. // height: 72px;
  70. height: 68px;
  71. margin: 0 auto;
  72. margin-top: 10px;
  73. .item {
  74. // width: 112px;
  75. // height: 72px;
  76. width: 81.5px;
  77. height: 68px;
  78. padding: 10px 8px;
  79. box-sizing: border-box;
  80. border-radius: 4px;
  81. background: #FFFFFF;
  82. margin-right: 9.5px;
  83. flex-shrink: 0;
  84. .label {
  85. line-height: 20px;
  86. font-size: 14px;
  87. font-family: PingFang SC-Regular, PingFang SC;
  88. color: #333333;
  89. }
  90. .count {
  91. line-height: 22px;
  92. font-size: 16px;
  93. font-family: PingFang SC-Medium, PingFang SC;
  94. font-weight: bold;
  95. color: #3874F6;
  96. margin-top: 10px;
  97. }
  98. }
  99. .item:last-child {
  100. margin-right: 0;
  101. }
  102. }
  103. </style>