consume.vue 14 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459
  1. <template>
  2. <div class="app-container">
  3. <el-row :gutter="10">
  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. <div class="container-block">
  17. <el-card>
  18. <div style="display: flex;justify-content: space-between;">
  19. <SubTitle :title="`平均功率-15分钟【${selectedLabel}】`" />
  20. <el-button-group>
  21. <el-button v-for="item in btnGroup" :key="item.name" size="mini"
  22. :type="item.name === activeBtn ? 'primary' : ''" :icon="item.icon" @click="btnChange(item)" />
  23. </el-button-group>
  24. </div>
  25. <div class="ctl-container">
  26. <el-date-picker v-model="dateRange" type="datetimerange" @change="getPowerChart"
  27. :picker-options="pickerOptions" value-format="yyyy-MM-dd hh:mm:ss" range-separator="至"
  28. start-placeholder="开始日期" end-placeholder="结束日期" align="right" :clearable="false">
  29. </el-date-picker>
  30. </div>
  31. <el-table v-if="activeBtn == 'table'" :data="powerChartData" max-height="400px">
  32. <el-table-column label="日期" align="center" prop="date" width="100" fixed="left">
  33. </el-table-column>
  34. <el-table-column label="时间" align="center" prop="time" width="100" fixed="left">
  35. </el-table-column>
  36. <el-table-column label="电流(A)" align="center" show-overflow-tooltip width="200">
  37. <template slot-scope="scope">
  38. <span>A相:{{ scope.row.la }}A;</span>
  39. <span>B相:{{ scope.row.lb }}A;</span>
  40. <span>C相:{{ scope.row.lc }}A</span>
  41. </template>
  42. </el-table-column>
  43. <el-table-column label="电压(V)" align="center" show-overflow-tooltip width="200">
  44. <template slot-scope="scope">
  45. <span>A相:{{ scope.row.ua }}V;</span>
  46. <span>B相:{{ scope.row.ub }}V;</span>
  47. <span>C相:{{ scope.row.uc }}V</span>
  48. </template>
  49. </el-table-column>
  50. <el-table-column label="有功功率(kW)" align="center" show-overflow-tooltip width="250" >
  51. <template slot-scope="scope">
  52. <span>A相:{{ scope.row.pa }}kW;</span>
  53. <span>B相:{{ scope.row.pb }}kW;</span>
  54. <span>C相:{{ scope.row.pc }}kW</span>
  55. </template>
  56. </el-table-column>
  57. <el-table-column label="无功功率(kW)" align="center" show-overflow-tooltip width="250" >
  58. <template slot-scope="scope">
  59. <span>A相:{{ scope.row.qa }}kW;</span>
  60. <span>B相:{{ scope.row.qb }}kW;</span>
  61. <span>C相:{{ scope.row.qc }}kW</span>
  62. </template>
  63. </el-table-column>
  64. <el-table-column label="功率因素" align="center" prop="pf" width="100" />
  65. </el-table>
  66. <BaseChart v-else width="100%" height="400px" :option="powerLineOptions" />
  67. </el-card>
  68. <el-card style="margin-top: 10px;">
  69. <div style="display: flex;justify-content: space-between;">
  70. <SubTitle :title="`峰值功率-日【${selectedLabel}】`" />
  71. <el-date-picker v-model="maxPowerDate" type="daterange" @change="getDayMaxLoad"
  72. :picker-options="pickerOptions" value-format="yyyy-MM-dd" range-separator="至" start-placeholder="开始日期"
  73. end-placeholder="结束日期" align="right" :clearable="false">
  74. </el-date-picker>
  75. </div>
  76. <BaseChart width="100%" height="400px" :option="maxLoadLineOptions" />
  77. </el-card>
  78. </div>
  79. </el-col>
  80. </el-row>
  81. </div>
  82. </template>
  83. <script>
  84. import {getPowerData, getPowerMaxLoad, getPowerDayMaxLoad} from '@/api/mgr/elecUseH'
  85. import {areaWithFacsCategoryAsTree} from '@/api/basecfg/area'
  86. import BaseChart from '@/components/BaseChart'
  87. import SubTitle from '@/components/SubTitle'
  88. import Treeselect from "@riophae/vue-treeselect";
  89. import "@riophae/vue-treeselect/dist/vue-treeselect.css";
  90. import {dateFormat, getDayAgoDate} from '@/utils'
  91. export default {
  92. name: 'Comsume',
  93. components: {
  94. Treeselect,
  95. BaseChart,
  96. SubTitle
  97. },
  98. data () {
  99. const lastWeek = dateFormat(getDayAgoDate(7), 'yyyy-MM-dd')
  100. const nowDay = dateFormat(new Date(), 'yyyy-MM-dd')
  101. return {
  102. // 遮罩层
  103. facsCategory: 'Z',
  104. facsSubCategory: '',
  105. areaName: undefined,
  106. defaultProps: {
  107. children: "children",
  108. label: "label"
  109. },
  110. selectedLabel: '',
  111. // 查询参数
  112. queryParams: {
  113. areaCode: ''
  114. },
  115. pickerOptions: {
  116. shortcuts: [
  117. {
  118. text: '最近一周',
  119. onClick (picker) {
  120. const end = new Date()
  121. const start = new Date()
  122. start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
  123. picker.$emit('pick', [start, end])
  124. }
  125. }, {
  126. text: '最近一个月',
  127. onClick (picker) {
  128. const end = new Date()
  129. const start = new Date()
  130. start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
  131. picker.$emit('pick', [start, end])
  132. }
  133. }, {
  134. text: '最近三个月',
  135. onClick (picker) {
  136. const end = new Date()
  137. const start = new Date()
  138. start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
  139. picker.$emit('pick', [start, end])
  140. }
  141. }
  142. ]
  143. },
  144. // 表单参数
  145. areaOptions: [],
  146. dateRange: [`${lastWeek} 00:00:00`, `${nowDay} 23:59:59`],
  147. activeBtn: 'chart', //--chart图表 --table表格
  148. btnGroup: [
  149. {
  150. name: 'chart',
  151. icon: 'el-icon-s-data'
  152. },
  153. {
  154. name: 'table',
  155. icon: 'el-icon-menu'
  156. }],
  157. powerChartData: [],
  158. powerMaxLoad: '',
  159. maxPowerDate: [`${lastWeek} 00:00:00`, `${nowDay} 23:59:59`],
  160. maxLoadData: []
  161. }
  162. },
  163. computed: {
  164. powerLineOptions () {
  165. const xAxisData = this.powerChartData.map(item => `${item.date.substr(5)} ${item.time.substr(0, 5)} `);
  166. const yData1 = this.powerChartData.map(item => parseFloat(item.s).toFixed(2));
  167. const yData2 = this.powerChartData.map(item => item.p);
  168. const yData3 = this.powerChartData.map(item => item.q);
  169. return {
  170. toolbox: {
  171. itemGap: 10,
  172. itemSize: 16,
  173. right: 10,
  174. top: 0,
  175. show: true,
  176. feature: {
  177. magicType: {
  178. show: true,
  179. type: ['bar', 'line']
  180. },
  181. saveAsImage: {
  182. show: true
  183. }
  184. }
  185. },
  186. tooltip: {
  187. trigger: 'axis',
  188. axisPointer: {
  189. type: 'shadow'
  190. },
  191. formatter: (params) => {
  192. var relVal = params[0].name
  193. for (var i = 0, l = params.length; i < l; i++) {
  194. const unit = 'kW'
  195. relVal =`${relVal}<br/>${params[i].marker}${params[i].seriesName}&nbsp;&nbsp;&nbsp;${params[i].value}${unit}`
  196. }
  197. return relVal
  198. }
  199. },
  200. legend: {
  201. },
  202. xAxis: {
  203. type: 'category',
  204. data: xAxisData
  205. },
  206. yAxis: {
  207. name: 'kW(千瓦)',
  208. type: 'value',
  209. },
  210. dataZoom: [
  211. {
  212. type: "slider",
  213. start: 0,
  214. end: 100,
  215. height: 10,
  216. bottom: '5%',
  217. showDetail: false,
  218. showDataShadow: false,
  219. borderColor: "transparent"
  220. },
  221. {
  222. type: "inside",
  223. start: 0,
  224. end: 100,
  225. },
  226. ],
  227. series: [{
  228. name: '视在功率',
  229. type: 'line',
  230. data: yData1,
  231. markLine: {
  232. symbol: 'none',
  233. silent: true,
  234. lineStyle: {normal: {type: 'dashed'}},
  235. label: {position: 'end'},
  236. data: [
  237. {
  238. yAxis: this.powerMaxLoad,
  239. lineStyle: {width: 1.656, color: '#ff6367'},
  240. label: {
  241. show: true,
  242. textStyle: {
  243. color: '#ff6367'
  244. }
  245. }
  246. },
  247. ]
  248. },
  249. markPoint: {
  250. silent: true,
  251. data: [
  252. {
  253. yAxis: this.powerMaxLoad,
  254. x: '100%',
  255. symbolSize: 0.1,
  256. symbolOffset: [0, 0],
  257. label: {
  258. textStyle: {color: '#ff6367'},
  259. fontSize: 12,
  260. position: 'left',
  261. formatter: '最高负荷'
  262. }
  263. },
  264. ]
  265. },
  266. },
  267. {
  268. name: '有功功率',
  269. type: 'line',
  270. data: yData2,
  271. },
  272. {
  273. name: '无功功率',
  274. type: 'line',
  275. data: yData3,
  276. },]
  277. };
  278. },
  279. maxLoadLineOptions () {
  280. const xAxisData = this.maxLoadData.map(item => item.date);
  281. const yData1 = this.maxLoadData.map(item => parseFloat(item.s).toFixed(2));
  282. const yData2 = this.maxLoadData.map(item => item.p);
  283. const yData3 = this.maxLoadData.map(item => item.q);
  284. return {
  285. toolbox: {
  286. itemGap: 10,
  287. itemSize: 16,
  288. right: 10,
  289. top: 0,
  290. show: true,
  291. feature: {
  292. magicType: {
  293. show: true,
  294. type: ['bar', 'line']
  295. },
  296. saveAsImage: {
  297. show: true
  298. }
  299. }
  300. },
  301. tooltip: {
  302. trigger: 'axis',
  303. axisPointer: {
  304. type: 'shadow'
  305. },
  306. formatter: (params) => {
  307. var relVal = params[0].name
  308. for (var i = 0, l = params.length; i < l; i++) {
  309. const unit = 'kW'
  310. relVal =`${relVal}<br/>${params[i].marker}${params[i].seriesName}&nbsp;&nbsp;&nbsp;${params[i].value}${unit}`
  311. }
  312. return relVal
  313. }
  314. },
  315. legend: {
  316. },
  317. xAxis: {
  318. type: 'category',
  319. data: xAxisData
  320. },
  321. yAxis: {
  322. name: 'kW(千瓦)',
  323. type: 'value',
  324. },
  325. dataZoom: [
  326. {
  327. type: "slider",
  328. start: 0,
  329. end: 100,
  330. height: 10,
  331. bottom: '5%',
  332. showDetail: false,
  333. showDataShadow: false,
  334. borderColor: "transparent"
  335. },
  336. {
  337. type: "inside",
  338. start: 0,
  339. end: 100,
  340. },
  341. ],
  342. series: [{
  343. name: '视在功率',
  344. type: 'line',
  345. data: yData1,
  346. },
  347. {
  348. name: '有功功率',
  349. type: 'line',
  350. data: yData2,
  351. },
  352. {
  353. name: '无功功率',
  354. type: 'line',
  355. data: yData3,
  356. },]
  357. };
  358. },
  359. },
  360. watch: {
  361. // 根据名称筛选区域树
  362. areaName (val) {
  363. this.$refs.tree.filter(val)
  364. }
  365. },
  366. async created () {
  367. await this.getAreaList()
  368. this.getPowerChart()
  369. this.getDayMaxLoad()
  370. },
  371. methods: {
  372. btnChange (item) {
  373. this.activeBtn = item.name
  374. },
  375. getPowerChart () {
  376. this.powerMaxLoad = ''
  377. this.powerChartData = []
  378. const [startTime, endTime] = this.dateRange
  379. const params = {
  380. startTime,
  381. endTime,
  382. areaCode: this.queryParams.areaCode,
  383. objType: '1',
  384. }
  385. getPowerData({
  386. ...params,
  387. pageNum: 1,
  388. pageSize: 999
  389. }).then(({code, rows}) => {
  390. if (code === 200) {
  391. this.powerChartData = rows
  392. }
  393. })
  394. getPowerMaxLoad(params).then(({code, data}) => {
  395. if (code === 200) {
  396. this.powerMaxLoad = parseFloat(data.s).toFixed(2)
  397. }
  398. })
  399. },
  400. getDayMaxLoad () {
  401. const [startTime, endTime] = this.maxPowerDate
  402. getPowerDayMaxLoad({
  403. startTime,
  404. endTime,
  405. areaCode: this.queryParams.areaCode,
  406. objType: '1',
  407. }).then(({code, rows}) => {
  408. if (code === 200) {
  409. this.maxLoadData = rows || []
  410. }
  411. })
  412. },
  413. // 查询区域列表
  414. async getAreaList () {
  415. await areaWithFacsCategoryAsTree(this.facsCategory, this.facsSubCategory).then(response => {
  416. this.areaOptions = [{
  417. id: '-1',
  418. label: '全部',
  419. children: []
  420. }].concat(response.data)
  421. this.selectedLabel = '全部'
  422. this.queryParams.areaCode = '-1'
  423. })
  424. },
  425. // 筛选节点
  426. filterNode (value, data) {
  427. if (!value) return true
  428. return data.label.indexOf(value) !== -1
  429. },
  430. // 节点单击事件
  431. handleNodeClick (data) {
  432. this.queryParams.areaCode = data.id
  433. this.selectedLabel = data.label
  434. this.getPowerChart()
  435. this.getDayMaxLoad()
  436. },
  437. }
  438. }
  439. </script>
  440. <style lang="scss" scoped>
  441. @import './index.scss';
  442. .app-container {
  443. ::v-deep .el-tabs__content {
  444. overflow: initial;
  445. }
  446. }
  447. .ctl-container {
  448. display: flex;
  449. justify-content: flex-end;
  450. margin: 10px 0;
  451. }
  452. </style>