boosterAlarm.vue 4.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190
  1. <template>
  2. <div>
  3. <div class="query mg-b-8">
  4. <div class="query-items">
  5. <div class="query-item">
  6. <div class="lable">场站:</div>
  7. <div class="search-input">
  8. <el-select v-model="stationId" clearable placeholder="请选择" popper-class="select">
  9. <el-option
  10. v-for="item in ChangZhan"
  11. :key="item.id"
  12. :value="item.id"
  13. :label="item.name"
  14. ></el-option>
  15. </el-select>
  16. </div>
  17. </div>
  18. <div class="query-item">
  19. <div class="lable">开始日期:</div>
  20. <div class="search-input">
  21. <el-date-picker
  22. v-model="startDate"
  23. type="datetime"
  24. placeholder="开始日期"
  25. popper-class="date-select"
  26. value-format="YYYY-MM-DD HH:mm:ss"
  27. ></el-date-picker>
  28. </div>
  29. </div>
  30. <div class="query-item">
  31. <div class="lable">结束日期:</div>
  32. <div class="search-input">
  33. <el-date-picker
  34. v-model="endDate"
  35. type="datetime"
  36. placeholder="开始日期"
  37. popper-class="date-select"
  38. value-format="YYYY-MM-DD HH:mm:ss"
  39. ></el-date-picker>
  40. </div>
  41. </div>
  42. <div class="query-actions">
  43. <button class="btn green" @click="getTable()">查询</button>
  44. <button class="btn green" @click="exportExcel()">导出</button>
  45. </div>
  46. </div>
  47. </div>
  48. <div class="table-box">
  49. <div class="title">升压站报警</div>
  50. <ComTable
  51. ref="curRef"
  52. :data="tableData"
  53. :pageSize="20"
  54. @onPagging="onChangePage"
  55. height="73vh"
  56. v-loading="tableLoading"
  57. element-loading-text="拼命加载中.."
  58. element-loading-background="rgba(0, 0, 0, 0.8)"
  59. ></ComTable>
  60. </div>
  61. </div>
  62. </template>
  63. <script>
  64. import ComTable from "@/components/coms/table/table.vue";
  65. export default {
  66. name: "boosterAlarm",
  67. components: { ComTable },
  68. data() {
  69. let that = this;
  70. return {
  71. ChangZhan: [],
  72. stationId: "MHS_FDC",
  73. startDate: "",
  74. endDate: "",
  75. tableLoading: true,
  76. pageIndex: 1,
  77. pageSize: 20,
  78. tableData: {
  79. column: [
  80. {
  81. name: "场站",
  82. field: "stationName",
  83. is_num: false,
  84. is_light: false,
  85. sortable: true,
  86. id: "id"
  87. },
  88. {
  89. name: "变电站",
  90. field: "",
  91. is_num: false,
  92. is_light: false,
  93. sortable: true,
  94. id: "id"
  95. },
  96. {
  97. name: "报警时间",
  98. field: "alertTime",
  99. is_num: false,
  100. is_light: false,
  101. sortable: true,
  102. id: "id"
  103. },
  104. {
  105. name: "报警描述",
  106. field: "alertText",
  107. is_num: false,
  108. is_light: false,
  109. sortable: true,
  110. id: "id"
  111. },
  112. {
  113. name: "处理方式",
  114. field: "",
  115. is_num: false,
  116. is_light: false,
  117. sortable: true,
  118. id: "id"
  119. }
  120. ],
  121. data: [],
  122. currentPageTotal: 0
  123. }
  124. };
  125. },
  126. created() {
  127. this.ChangZhanVal();
  128. let end = new Date();
  129. let start = new Date(end.getTime() - 1 * 24 * 60 * 60 * 1000);
  130. this.endDate = end.formatDate("yyyy-MM-dd hh:mm:ss");
  131. this.startDate = start.formatDate("yyyy-MM-dd hh:mm:ss");
  132. this.getTable();
  133. },
  134. methods: {
  135. // 场站
  136. ChangZhanVal() {
  137. var that = this;
  138. that.API.requestData({
  139. method: "GET",
  140. baseURL: "http://10.155.32.4:9001/",
  141. subUrl: "benchmarking/wplist",
  142. success(res) {
  143. that.ChangZhan = res.data;
  144. that.stationId = res.data[0].id;
  145. }
  146. });
  147. },
  148. getTable() {
  149. let that = this;
  150. this.tableLoading = true;
  151. this.API.requestData({
  152. timeout: 30000,
  153. method: "GET",
  154. baseURL: "http://192.168.1.18:8075/",
  155. subUrl: "alarm/history/page",
  156. data: {
  157. category1: "SYZ",
  158. stationid: this.stationId,
  159. starttime: this.startDate,
  160. endtime: this.endDate,
  161. pagenum: this.pageIndex,
  162. pagesize: this.pageSize
  163. },
  164. success(res) {
  165. that.tableData.data = res.data.records;
  166. that.tableLoading = false;
  167. that.tableData.total = res.data.total;
  168. }
  169. });
  170. },
  171. onChangePage(params) {
  172. this.pageIndex = params.pageIndex;
  173. this.pageSize = params.pageSize;
  174. this.getTable();
  175. },
  176. exportExcel(){
  177. this.BASE.exportExcel(this.tableData,"升压站报警");
  178. }
  179. }
  180. };
  181. </script>
  182. <style scoped>
  183. .title {
  184. background: rgba(255, 255, 255, 0.1);
  185. margin-bottom: 8px;
  186. padding: 1vh;
  187. }
  188. </style>