index.vue 4.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162
  1. <template>
  2. <view>
  3. <cu-custom id="custom"
  4. bgImage="https://yostest175549.obs.cn-east-2.myhuaweicloud.com:443/202306151686796745663B52544232.png"
  5. :isBack="true">
  6. <block slot="backText">返回</block>
  7. <block slot="content">
  8. 告警中心
  9. </block>
  10. </cu-custom>
  11. <u-tabs :list="list1" :activeStyle="{ fontWeight: 'bold' }" @change="tabChange">
  12. <!-- <navigator url="#" slot="right" class="right" @tap="openSearch">
  13. <view :style="{ color: showSearch ? '#007aff' : '#fff' }" class="iconfont icon-a-sousuolansousuo" />
  14. </navigator> -->
  15. </u-tabs>
  16. <u-transition :show="showSearch" mode="fade-down">
  17. <My_search ref="Search" :focus="focus" @onFilter="onFilter" :dateRange="true" @startSearch="startSearch" />
  18. </u-transition>
  19. <view style="height: 5px;" v-if="!focus" />
  20. <My_listbox ref="List" @getlist="getlist" :empty='empty'>
  21. <List :list="list" />
  22. </My_listbox>
  23. </view>
  24. </template>
  25. <script>
  26. import List from "./modules/list.vue"
  27. export default {
  28. name: "alerts",
  29. components: { List },
  30. data() {
  31. return {
  32. showSearch: true,
  33. empty: true,
  34. list1: [{
  35. name: '待处理',
  36. badge: {
  37. value: 0,
  38. }
  39. }, {
  40. name: '已处理',
  41. badge: {
  42. value: 0,
  43. }
  44. }],
  45. content: {
  46. pageNumber: 1,
  47. pageTotal: 1,
  48. pageSize: 20,
  49. isWeChat: true,
  50. where: {
  51. condition: "",
  52. buildtype: "",
  53. level: "",
  54. status: "待处理",
  55. begindate: "",
  56. enddate: ""
  57. }
  58. },
  59. focus: false,
  60. list: []
  61. }
  62. },
  63. mounted() {
  64. this.getlist(true);
  65. setTimeout(() => {
  66. this.$refs.List.setHeight();
  67. }, 350)
  68. },
  69. methods: {
  70. getlist(init) {
  71. let content = this.content;
  72. if (init) {
  73. content.pageNumber = 1;
  74. content.pageTotal = 1;
  75. }
  76. if (content.pageNumber > content.pageTotal) return;
  77. this.$Http.basic({
  78. "id": 20230816095802,
  79. content
  80. }).then(res => {
  81. console.log("告警列表", res)
  82. if (this.cutoff(res.msg)) return;
  83. this.$refs.List.RefreshToComplete();
  84. this.$refs.List.setHeight();
  85. this.$refs.Search.onFinish();
  86. this.empty = !res.data.length;
  87. content.pageNumber = res.pageNumber + 1;
  88. content.pageTotal = res.pageTotal;
  89. console.log("content", content)
  90. try {
  91. switch (content.where.status) {
  92. case "待处理":
  93. this.list1[0].badge.value = res.tips.undeal.count;
  94. this.list1[1].badge.value = "";
  95. break;
  96. case "已处理":
  97. this.list1[0].badge.value = "";
  98. this.list1[1].badge.value = res.tips.deal.count;
  99. break;
  100. }
  101. } catch (error) {
  102. }
  103. this.list = res.pageNumber == 1 ? res.data : this.list.concat(res.data)
  104. this.content = content;
  105. })
  106. },
  107. openSearch() {
  108. this.showSearch = !this.showSearch;
  109. setTimeout(() => {
  110. this.$refs.List.setHeight();
  111. this.focus = this.showSearch;
  112. }, 350)
  113. },
  114. tabChange(e) {
  115. this.content.where.status = e.name;
  116. this.getlist(true)
  117. },
  118. startSearch(condition) {
  119. if (condition == this.content.where.condition) return;
  120. this.content.where.condition = condition;
  121. this.getlist(true)
  122. },
  123. onFilter(e) {
  124. this.content.where = Object.assign(this.content.where, e);
  125. console.log(this.content.where)
  126. this.getlist(true);
  127. },
  128. },
  129. }
  130. </script>
  131. <style lang="scss" scoped>
  132. /deep/.u-tabs {
  133. height: 44px;
  134. // background: #052E5D;
  135. .u-tabs__wrapper__nav {
  136. height: 44px;
  137. .u-tabs__wrapper__nav__item {
  138. height: 44px !important;
  139. .u-tabs__wrapper__nav__item__text {
  140. color: #fff !important;
  141. }
  142. }
  143. }
  144. }
  145. .right {
  146. height: 44px;
  147. line-height: 44px;
  148. width: 44px;
  149. text-align: center;
  150. .iconfont {
  151. font-size: 16px;
  152. }
  153. }
  154. </style>