prod.vue 7.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258
  1. <template>
  2. <div class="app-container">
  3. <el-row :gutter="20">
  4. <el-col :span="4" :xs="24">
  5. <div class="head-container">
  6. <el-input v-model="areaName" placeholder="请输入区域名称" clearable size="small" prefix-icon="el-icon-search"
  7. style="margin-bottom: 20px" />
  8. </div>
  9. <div class="head-container" style="height: 100vh; overflow: hidden; position: relative;">
  10. <el-tree :data="areaOptions" :props="defaultProps" :expand-on-click-node="false"
  11. :filter-node-method="filterNode" ref="tree" node-key="id" default-expand-all highlight-current
  12. @node-click="handleNodeClick" style="height: calc(100vh - 50px); overflow-y: auto;" />
  13. </div>
  14. </el-col>
  15. <el-col :span="20" :xs="24">
  16. <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
  17. <el-form-item label="选择设施" prop="facsCode">
  18. <el-select v-model="queryParams.facsCode" clearable>
  19. <el-option v-for="item in facsOptions" :label="item.facsName" :value="item.facsCode"
  20. :key="item.facsCode"
  21. />
  22. </el-select>
  23. </el-form-item>
  24. <el-form-item label="开始日期" prop="date">
  25. <el-date-picker clearable
  26. v-model="queryParams.startRecTime"
  27. type="date"
  28. value-format="yyyy-MM-dd"
  29. placeholder="请选择日期">
  30. </el-date-picker>
  31. </el-form-item>
  32. <el-form-item>
  33. <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
  34. <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
  35. </el-form-item>
  36. </el-form>
  37. <el-row :gutter="10" class="mb8">
  38. <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
  39. </el-row>
  40. <el-table v-loading="loading" :data="predictionProdList" >
  41. <el-table-column label="位置名称" align="center" prop="areaName"/>
  42. <el-table-column label="设施名称" align="center" prop="facsName"/>
  43. <el-table-column label="日期" align="center" prop="date" width="180">
  44. <template slot-scope="scope">
  45. <span>{{ parseTime(scope.row.date, '{y}-{m}-{d}') }}</span>
  46. </template>
  47. </el-table-column>
  48. <el-table-column label="发电量(kW·h)" align="center" prop="elecProdQuantity"/>
  49. <el-table-column label="平均功率(kW)" align="center" prop="avgPower"/>
  50. </el-table>
  51. <pagination
  52. v-show="total>0"
  53. :total="total"
  54. :page.sync="queryParams.pageNum"
  55. :limit.sync="queryParams.pageSize"
  56. @pagination="getList"
  57. />
  58. </el-col>
  59. </el-row>
  60. </div>
  61. </template>
  62. <script>
  63. import { listPredictionProd } from '@/api/prediction/predictionProd';
  64. import { areaTreeByFacsCategory } from '@/api/basecfg/area'
  65. import { listAllFacs } from '@/api/basecfg/emsfacs'
  66. export default {
  67. name: 'PredictionProd',
  68. data() {
  69. return {
  70. // 遮罩层
  71. loading: true,
  72. // 选中数组
  73. ids: [],
  74. // 非单个禁用
  75. single: true,
  76. // 非多个禁用
  77. multiple: true,
  78. // 显示搜索条件
  79. showSearch: true,
  80. // 总条数
  81. total: 0,
  82. // 电力产能预测表格数据
  83. predictionProdList: [],
  84. // 弹出层标题
  85. title: '',
  86. // 是否显示弹出层
  87. open: false,
  88. // 表单参数
  89. areaOptions: [],
  90. areaName: undefined,
  91. facsCategory: 'E',
  92. facsSubCategory: 'E5',
  93. // 设施选项
  94. facsOptions: undefined,
  95. defaultProps: {
  96. children: "children",
  97. label: "label"
  98. },
  99. // 查询参数
  100. queryParams: {
  101. pageNum: 1,
  102. pageSize: 10,
  103. areaCode: null,
  104. facsCode: null,
  105. startRecTime: null,
  106. elecProdQuantity: null,
  107. avgPower: null,
  108. },
  109. // 表单参数
  110. form: {},
  111. // 表单校验
  112. rules: {
  113. areaCode: [
  114. {
  115. required: true,
  116. message: '园区代码不能为空',
  117. trigger: 'blur',
  118. },
  119. ],
  120. facsCode: [
  121. {
  122. required: true,
  123. message: '设施代码不能为空',
  124. trigger: 'blur',
  125. },
  126. ],
  127. date: [
  128. {
  129. required: true,
  130. message: '日期不能为空',
  131. trigger: 'blur',
  132. },
  133. ],
  134. elecProdQuantity: [
  135. {
  136. required: true,
  137. message: '发电量不能为空',
  138. trigger: 'blur',
  139. },
  140. ],
  141. avgPower: [
  142. {
  143. required: true,
  144. message: '功率不能为空',
  145. trigger: 'blur',
  146. },
  147. ],
  148. },
  149. };
  150. },
  151. watch: {
  152. // 根据名称筛选区域树
  153. areaName (val) {
  154. this.$refs.tree.filter(val)
  155. }
  156. },
  157. created() {
  158. this.getAreaList();
  159. this.getFacsOptions();
  160. this.setTodayDate();
  161. this.getList();
  162. },
  163. methods: {
  164. /** 查询电力产能预测列表 */
  165. getList() {
  166. this.loading = true;
  167. listPredictionProd(this.queryParams).then(response => {
  168. this.predictionProdList = response.rows;
  169. this.total = response.total;
  170. this.loading = false;
  171. });
  172. },
  173. // 查询区域列表
  174. async getAreaList () {
  175. await areaTreeByFacsCategory(this.facsCategory, this.facsSubCategory, false).then(response => {
  176. this.areaOptions = [{
  177. id: '-1',
  178. label: '全部',
  179. children: []
  180. }].concat(response.data)
  181. this.selectedLabel = '全部'
  182. this.queryParams.areaCode = '-1'
  183. })
  184. },
  185. getFacsOptions() {
  186. const getFacsParams = {
  187. facsCategory: this.facsCategory,
  188. subCategory: this.queryParams.deviceSubCategory,
  189. refArea: this.queryParams.areaCode,
  190. }
  191. listAllFacs(getFacsParams).then(response => {
  192. this.facsOptions = response.data
  193. })
  194. },
  195. // 取消按钮
  196. cancel() {
  197. this.open = false;
  198. this.reset();
  199. },
  200. // 表单重置
  201. reset() {
  202. this.form = {
  203. id: null,
  204. areaCode: null,
  205. facsCode: null,
  206. date: null,
  207. elecProdQuantity: null,
  208. avgPower: null,
  209. };
  210. this.resetForm('form');
  211. },
  212. /** 搜索按钮操作 */
  213. handleQuery() {
  214. this.queryParams.pageNum = 1;
  215. this.getList();
  216. },
  217. /** 重置按钮操作 */
  218. resetQuery() {
  219. this.resetForm('queryForm');
  220. this.handleQuery();
  221. },
  222. handle(selection) {
  223. this.ids = selection.map(item => item.id);
  224. this.single = selection.length !== 1;
  225. this.multiple = !selection.length;
  226. },
  227. setTodayDate() {
  228. // 获取当前日期
  229. const today = new Date();
  230. // 格式化日期为 yyyy-MM-dd 格式
  231. const year = today.getFullYear();
  232. const month = String(today.getMonth() + 1).padStart(2, '0');
  233. const day = String(today.getDate()).padStart(2, '0');
  234. // 设置日期选择器的值
  235. this.queryParams.startRecTime = `${year}-${month}-${day}`;
  236. },
  237. // 筛选节点
  238. filterNode (value, data) {
  239. if (!value) return true
  240. return data.label.indexOf(value) !== -1
  241. },
  242. // 节点单击事件
  243. handleNodeClick (data) {
  244. this.queryParams.areaCode = data.id
  245. this.selectedLabel = data.label
  246. this.queryParams.facsCode = undefined
  247. this.getFacsOptions()
  248. this.getList()
  249. },
  250. },
  251. };
  252. </script>