xqjsl.vue 4.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165
  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-date-picker
  9. v-model="value1"
  10. @change="BeginChange(value1)"
  11. type="date"
  12. value-format="YYYY-MM-DD"
  13. placeholder="选择日期"
  14. popper-class="date-select"
  15. >
  16. </el-date-picker>
  17. </div>
  18. </div>
  19. <div class="query-item">
  20. <div class="lable">结束日期:</div>
  21. <div class="search-input">
  22. <el-date-picker
  23. v-model="value2"
  24. @change="EndChange(value2)"
  25. type="date"
  26. value-format="YYYY-MM-DD"
  27. placeholder="选择日期"
  28. popper-class="date-select"
  29. >
  30. </el-date-picker>
  31. <div class="unit svg-icon svg-icon-gray">
  32. <svg-icon :svgid="''" />
  33. </div>
  34. </div>
  35. </div>
  36. </div>
  37. <div class="query-actions">
  38. <button class="btn green" @click="handleSubmit">计算</button>
  39. </div>
  40. </div>
  41. <div class="table-box">
  42. <ComTable
  43. :data="tableData"
  44. :pageSize="20"
  45. height="85vh"
  46. v-loading="tableLoading"
  47. element-loading-text="拼命加载中"
  48. element-loading-background="rgba(0, 0, 0, 0.8)"
  49. ></ComTable>
  50. </div>
  51. </div>
  52. </template>
  53. <script>
  54. import ComTable from "@/components/coms/table/table.vue";
  55. export default {
  56. name: "fwjsl",
  57. components: { ComTable },
  58. data() {
  59. return {
  60. value1: "",
  61. value2: "",
  62. tableLoading: true,
  63. tableData: {
  64. column: [
  65. {
  66. name: "风电场",
  67. field: "wpid",
  68. is_num: false,
  69. is_light: false,
  70. sortable: true
  71. },
  72. {
  73. name: "故障次数",
  74. field: "gzCount",
  75. is_num: false,
  76. is_light: false,
  77. sortable: true
  78. },
  79. {
  80. name: "消缺及时次数",
  81. field: "xqCount",
  82. is_num: false,
  83. is_light: false,
  84. sortable: true
  85. },
  86. {
  87. name: "消缺及时次数",
  88. field: "xqjsl",
  89. is_num: false,
  90. is_light: false,
  91. sortable: true
  92. }
  93. ],
  94. date: []
  95. }
  96. };
  97. },
  98. mounted() {
  99. this.getTable();
  100. },
  101. created() {
  102. this.value1 = this.getTime(1);
  103. this.value2 = this.getTime(2);
  104. },
  105. methods: {
  106. // 获取表格数据
  107. getTable() {
  108. let that = this;
  109. that.tableLoading = true;
  110. that.API.requestData({
  111. method: "GET",
  112. baseURL: "http://10.155.32.4:8034/",
  113. subUrl: "/threerate/xqjsl",
  114. data: {
  115. beginDate: this.value1,
  116. endDate: this.value2
  117. },
  118. success(res) {
  119. that.tableLoading = false;
  120. console.log(res);
  121. if (res.code === 200) {
  122. that.tableData.data = res.data;
  123. }
  124. }
  125. });
  126. },
  127. // 开始日期:
  128. BeginChange(vl) {
  129. this.value1 = vl;
  130. },
  131. // 结束日期
  132. EndChange(vl) {
  133. this.value1 = vl;
  134. },
  135. // 计算
  136. handleSubmit() {
  137. if (this.value1 == "" || this.value1 == null) {
  138. this.$message.error("请选择开始时间");
  139. } else if (this.value2 == "" || this.value2 == null) {
  140. this.$message.error("请选择结束时间");
  141. } else {
  142. this.getTable();
  143. }
  144. },
  145. // 默认开始时间
  146. getTime(val) {
  147. //时间戳处理,val=1是默认开始时间(当前月第一天),val=2是默认结束时间(今天)
  148. var date = new Date();
  149. var year = date.getFullYear(),
  150. month = date.getMonth() + 1,
  151. day = date.getDate();
  152. month >= 1 && month <= 9 ? (month = "0" + month) : "";
  153. day >= 0 && day <= 9 ? (day = "0" + day) : "";
  154. var begin = year + "-" + month + "-01";
  155. var end = year + "-" + month + "-" + day;
  156. if (val == 1) {
  157. return begin;
  158. } else if (val == 2) {
  159. return end;
  160. }
  161. }
  162. }
  163. };
  164. </script>