index.vue 5.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176
  1. <template>
  2. <div class="main">
  3. <div class="search">
  4. <el-radio-group v-model="mixins_query.categoryId" @change="mixins_search" class="zz-tab-button">
  5. <el-radio-button :label="1">水费</el-radio-button>
  6. <el-radio-button :label="2">电费</el-radio-button>
  7. </el-radio-group>
  8. <el-input class="search-input" v-model="mixins_query.name" placeholder="输入设备编号/名称/地址"></el-input>
  9. <el-select v-model="mixins_query.communityId" placeholder="选择社区" clearable>
  10. <el-option v-for="(item, index) in communityArr" :key="index" :label="item.communityName" :value="item.id"></el-option>
  11. </el-select>
  12. <el-select v-model="mixins_query.operationType" placeholder="选择操作类型" clearable>
  13. <el-option label="关阀" :value="0"></el-option>
  14. <el-option label="开阀" :value="1"></el-option>
  15. </el-select>
  16. <el-date-picker
  17. v-model="times"
  18. value-format="yyyyMMdd"
  19. type="daterange"
  20. range-separator="至"
  21. start-placeholder="选择开始日期"
  22. end-placeholder="选择结束日期"
  23. @change="effectiveDateToggle"
  24. ></el-date-picker>
  25. <el-button type="primary" class="search-btn" @click="mixins_search" icon="el-icon-search">查询 </el-button>
  26. </div>
  27. <zz-table
  28. :cols="cols"
  29. :settings="{ showIndex: true, stripe: true }"
  30. :loading="mixins_onQuery"
  31. :data="mixins_list"
  32. :pageset="mixins_pageset"
  33. @page-change="pageChange"
  34. >
  35. <template slot-scope="scope" slot="opt">
  36. <div class="opt">
  37. <el-tooltip class="item" effect="light" placement="bottom" content="详情">
  38. <i class="zoniot_font zoniot-icon-xiangqing" @click="lookPage(scope.row)"></i>
  39. </el-tooltip>
  40. </div>
  41. </template>
  42. </zz-table>
  43. </div>
  44. </template>
  45. <script>
  46. import list from '@utils/list.js';
  47. export default {
  48. mixins: [list],
  49. data() {
  50. let _this = this;
  51. return {
  52. cols: [
  53. {
  54. label: '所属社区',
  55. prop: 'communityName'
  56. },
  57. {
  58. label: '地址',
  59. prop: 'address'
  60. },
  61. {
  62. label: '设备编号',
  63. prop: 'deviceNo'
  64. },
  65. {
  66. label: '设备名称',
  67. prop: 'deviceName'
  68. },
  69. {
  70. label: '用途',
  71. prop: 'useType',
  72. format(val, data) {
  73. return val == 1 ? '房间表' : '公摊表';
  74. }
  75. },
  76. {
  77. label: '操作类型',
  78. prop: 'operationType',
  79. format(val, data) {
  80. let name = '';
  81. if (_this.mixins_query.categoryId === 1) {
  82. name = '阀';
  83. } else {
  84. name = '闸';
  85. }
  86. switch (val) {
  87. case 0:
  88. return '关' + name;
  89. case 1:
  90. return '开' + name;
  91. default:
  92. return '-';
  93. }
  94. }
  95. },
  96. {
  97. label: '操作原因',
  98. prop: 'operationCause'
  99. },
  100. {
  101. label: '操作结果',
  102. prop: 'operationResult',
  103. format(val, data) {
  104. switch (val) {
  105. case 0:
  106. return '发送';
  107. case 1:
  108. return '超时';
  109. case 2:
  110. return '成功';
  111. case 3:
  112. return '失败';
  113. default:
  114. return '-';
  115. }
  116. }
  117. },
  118. {
  119. label: '操作时间',
  120. prop: 'operationDate'
  121. },
  122. {
  123. label: '执行时间',
  124. prop: 'finishDate'
  125. },
  126. {
  127. label: '操作员',
  128. prop: 'createBy'
  129. }
  130. ],
  131. accountType: 2,
  132. mixins_post: 'get',
  133. communityArr: [],
  134. times: []
  135. };
  136. },
  137. created() {
  138. this.getorgTree();
  139. this.mixins_dataUrl = '/sc-energy/device/command/page';
  140. this.mixins_query.categoryId = 1;
  141. this.mixins_search();
  142. },
  143. mounted() {},
  144. methods: {
  145. getorgTree() {
  146. this.$http
  147. .get('/sc-community/assets/community/list')
  148. .then((data) => {
  149. this.communityArr = data.data;
  150. this.$store.commit('setAreaSelect', data.data);
  151. })
  152. .catch(function () {});
  153. },
  154. effectiveDateToggle(va) {
  155. let arr = va;
  156. if (!arr) {
  157. arr = ['', ''];
  158. }
  159. this.mixins_query.startDate = arr[0];
  160. this.mixins_query.endDate = arr[1];
  161. }
  162. }
  163. };
  164. </script>
  165. <style scoped lang='scss'>
  166. @import '@assets/css/public-style.scss';
  167. .search {
  168. .zz-tab-button {
  169. margin-right: 20px;
  170. }
  171. }
  172. </style>