Showing
4 changed files
with
227 additions
and
22 deletions
... | ... | @@ -8,26 +8,28 @@ function initChart(canvas: any, width: any, height: any, data: any, dpr: any) { |
8 | 8 | devicePixelRatio: dpr // new |
9 | 9 | }); |
10 | 10 | canvas.setChart(chart); |
11 | - var color = ["#165DFF", "#14C9C9"] | |
11 | + var color = ["#165DFF", "#14C9C9", "#fac858", "#ee6666"] | |
12 | 12 | var option = { |
13 | 13 | |
14 | 14 | legend: { |
15 | - // data: ['预算', '实际'],//legend | |
16 | - top: 20, | |
15 | + data: data.nameList,//legend | |
16 | + top: 5, | |
17 | 17 | right: 20, |
18 | 18 | icon: "rect", |
19 | + width: "80%", | |
19 | 20 | textStyle: { |
20 | 21 | fontSize: 12, |
21 | 22 | color: '#323241', |
22 | 23 | }, |
24 | + | |
23 | 25 | itemHeight: 4, |
24 | 26 | itemWidth: 16 |
25 | 27 | }, |
26 | 28 | grid: { |
27 | 29 | containLabel: true, |
28 | 30 | bottom: "10", |
29 | - left:"10", | |
30 | - right:"10" | |
31 | + left: "10", | |
32 | + right: "10" | |
31 | 33 | }, |
32 | 34 | color: color, |
33 | 35 | tooltip: { |
... | ... | @@ -36,12 +38,13 @@ function initChart(canvas: any, width: any, height: any, data: any, dpr: any) { |
36 | 38 | }, |
37 | 39 | xAxis: { |
38 | 40 | type: 'category', |
39 | - boundaryGap: true,//不从0开始 | |
41 | + // boundaryGap: false,//不从0开始 | |
40 | 42 | axisLine: {//不显示 |
41 | 43 | show: false |
42 | 44 | }, |
43 | 45 | axisLabel: { |
44 | 46 | show: true, // x轴文字是否显示,刻度值 |
47 | + interval: 10, | |
45 | 48 | textStyle: { |
46 | 49 | color: '#999999', // 文本颜色 |
47 | 50 | fontSize: 10 // 文本字体大小 |
... | ... | @@ -51,8 +54,8 @@ function initChart(canvas: any, width: any, height: any, data: any, dpr: any) { |
51 | 54 | show: false, |
52 | 55 | alignWithLabel: true |
53 | 56 | }, |
54 | - data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'], | |
55 | - // show: false | |
57 | + data: data.dateList, | |
58 | + show: false | |
56 | 59 | }, |
57 | 60 | yAxis: { |
58 | 61 | x: 'center', | ... | ... |
1 | 1 | // pages/monitor/monitor.ts |
2 | 2 | import Toast from '@vant/weapp/toast/toast'; |
3 | 3 | import { API_CONST } from "./../../api/smartElectric"; |
4 | -import { getUnitEvent, getCardEvent } from './../../utils/util' | |
4 | +import { getUnitEvent, getCardEvent, getEchartLineType } from './../../utils/util' | |
5 | 5 | import { HTTPService as HTTP } from "./../../services/HTTPService"; |
6 | 6 | |
7 | 7 | Page({ |
... | ... | @@ -99,15 +99,25 @@ Page({ |
99 | 99 | tableList: [], |
100 | 100 | allcardList: [],// 卡片list数据 |
101 | 101 | myLineObj: { |
102 | - dataList: [[18, 36, 65, 30, 78, 40, 33], [12, 50, 51, 35, 70, 30, 20]], | |
103 | - nameList: ['预算', '实际'] | |
102 | + dataList: [], | |
103 | + nameList: [] | |
104 | 104 | }, |
105 | 105 | homeLineObj: { |
106 | - dataList: [[180, 306, 65, 30, 78, 40, 133], [12, 50, 251, 235, 170, 30, 20]], | |
107 | - nameList: ['总电压', '总电流'] | |
106 | + dataList: [], | |
107 | + nameList: [] | |
108 | 108 | }, |
109 | 109 | tableHeaderList: [ |
110 | 110 | { |
111 | + type: "INDEX", | |
112 | + val: "bms", | |
113 | + one: "", | |
114 | + two: "", | |
115 | + three: "", | |
116 | + key_one: "", | |
117 | + key_two: "", | |
118 | + key_three: "" | |
119 | + }, | |
120 | + { | |
111 | 121 | type: "BMS", |
112 | 122 | val: "bms", |
113 | 123 | one: "BMS-最高电压模块", |
... | ... | @@ -166,6 +176,7 @@ Page({ |
166 | 176 | */ |
167 | 177 | onLoad() { |
168 | 178 | this.__getOpenQxCustomHczdInde() |
179 | + this.__getOpenQxCustomHczdGetDateEchartLine("INDEX_MAP") | |
169 | 180 | }, |
170 | 181 | |
171 | 182 | /** |
... | ... | @@ -179,7 +190,9 @@ Page({ |
179 | 190 | * 生命周期函数--监听页面显示 |
180 | 191 | */ |
181 | 192 | onShow() { |
182 | - | |
193 | + // const pages = getCurrentPages() // 切换tabbar 刷新页面是否执行 | |
194 | + // const perpage = pages[pages.length - 1] | |
195 | + // perpage.onLoad() | |
183 | 196 | }, |
184 | 197 | |
185 | 198 | /** |
... | ... | @@ -200,7 +213,7 @@ Page({ |
200 | 213 | * 页面相关事件处理函数--监听用户下拉动作 |
201 | 214 | */ |
202 | 215 | onPullDownRefresh() { |
203 | - | |
216 | + this.__getOpenQxCustomHczdInde() | |
204 | 217 | }, |
205 | 218 | |
206 | 219 | /** |
... | ... | @@ -235,10 +248,12 @@ Page({ |
235 | 248 | return "EM" |
236 | 249 | break; |
237 | 250 | default: |
238 | - return "" | |
251 | + return "INDEX" | |
239 | 252 | break; |
240 | 253 | } |
241 | 254 | }, |
255 | + | |
256 | + | |
242 | 257 | tabsItemChange(e: any) { |
243 | 258 | this.setData({ |
244 | 259 | dashboardList: [], |
... | ... | @@ -267,9 +282,13 @@ Page({ |
267 | 282 | allcardList: allcardListNew, |
268 | 283 | tableHeader: tableHeaderNew |
269 | 284 | }) |
270 | - if (idx !== 0) { | |
271 | - this.__getOpenQxCustomHczdGetDate(idxToName) | |
285 | + if (idx !== "0") { | |
286 | + this.__getOpenQxCustomHczdGetDate(idxToName)// list | |
287 | + this.__getOpenQxCustomHczdGetDateEchartLine(`${idxToName}_MAP`) // 非首页曲线图 | |
288 | + } else { | |
289 | + this.__getOpenQxCustomHczdGetDateEchartLine("INDEX_MAP") // 首页 曲线图 | |
272 | 290 | } |
291 | + | |
273 | 292 | console.log(dashboardListNew, 'dashboardListdashboardList', this.data.dashboardList) |
274 | 293 | |
275 | 294 | }, |
... | ... | @@ -287,6 +306,7 @@ Page({ |
287 | 306 | } |
288 | 307 | }).then((data: any) => { |
289 | 308 | Toast.clear() |
309 | + wx.stopPullDownRefresh() | |
290 | 310 | console.log(data, '-----------datat') |
291 | 311 | if (data.success) { |
292 | 312 | |
... | ... | @@ -577,7 +597,7 @@ Page({ |
577 | 597 | }) |
578 | 598 | }, |
579 | 599 | |
580 | - __getOpenQxCustomHczdGetDate(type: String) {//列表滚动数据 | |
600 | + __getOpenQxCustomHczdGetDate(type: String) {//列表滚动数据 | |
581 | 601 | HTTP.POST({ |
582 | 602 | ...API_CONST.home.getDate, |
583 | 603 | payload: { |
... | ... | @@ -602,5 +622,46 @@ Page({ |
602 | 622 | } |
603 | 623 | |
604 | 624 | }) |
625 | + }, | |
626 | + | |
627 | + | |
628 | + __getOpenQxCustomHczdGetDateEchartLine(type: String) {//曲线图 | |
629 | + HTTP.POST({ | |
630 | + ...API_CONST.home.getDate, | |
631 | + payload: { | |
632 | + corpCode: "default", | |
633 | + type: type | |
634 | + } | |
635 | + }).then((res: any) => { | |
636 | + console.log(res, 'res-----------getDate') | |
637 | + var that = this | |
638 | + if (res.success) { | |
639 | + that.setData({ | |
640 | + myLineObj: {}, | |
641 | + homeLineObj: {} | |
642 | + }) | |
643 | + if (type === "INDEX_MAP") { | |
644 | + that.setData({ | |
645 | + myLineObj: getEchartLineType(type, res.data) | |
646 | + }) | |
647 | + } else { | |
648 | + that.setData({ | |
649 | + homeLineObj: getEchartLineType(type, res.data) | |
650 | + }) | |
651 | + } | |
652 | + | |
653 | + } else { | |
654 | + that.setData({ | |
655 | + myLineObj: {}, | |
656 | + homeLineObj: {} | |
657 | + }) | |
658 | + wx.showToast({ | |
659 | + title: '请求失败', | |
660 | + icon: 'error', | |
661 | + duration: 2000 | |
662 | + }); | |
663 | + } | |
664 | + | |
665 | + }) | |
605 | 666 | } |
606 | 667 | }) |
\ No newline at end of file | ... | ... |
... | ... | @@ -32,7 +32,7 @@ |
32 | 32 | </view> |
33 | 33 | <view class="deviceStatistics" wx:if="{{allData&&allData.deviceInfo }}"> |
34 | 34 | <topTitle topTitleName="设备统计"></topTitle> |
35 | - <circularDiagram deviceInfo="{{allData.deviceInfo}}"></circularDiagram> | |
35 | + <circularDiagram deviceInfo="{{allData.deviceInfo}}"></circularDiagram> | |
36 | 36 | <deviceData deviceDataList="{{deviceDataList}}"></deviceData> |
37 | 37 | </view> |
38 | 38 | <view class="overallOperationStatus" wx:if="{{overallDataList.length>0}}"> |
... | ... | @@ -43,7 +43,7 @@ |
43 | 43 | <topTitle topTitleName="场景统计"></topTitle> |
44 | 44 | <sceneStatistics></sceneStatistics> |
45 | 45 | </view> |
46 | - <view class="loadCurveEchart"> | |
46 | + <view class="loadCurveEchart" wx:if="{{myLineObj&&myLineObj.dataList.length>0}}"> | |
47 | 47 | <topTitle topTitleName="负荷曲线"></topTitle> |
48 | 48 | <loadCurveEchart echartData="{{myLineObj}}"></loadCurveEchart> |
49 | 49 | </view> |
... | ... | @@ -63,7 +63,7 @@ |
63 | 63 | <dashboardList dashboardList="{{dashboardList}}"></dashboardList> |
64 | 64 | </view> |
65 | 65 | |
66 | - <view class="loadCurveEchart_home"> | |
66 | + <view class="loadCurveEchart_home" wx:if="{{homeLineObj&&homeLineObj.dataList.length>0}}"> | |
67 | 67 | <loadCurveEchart echartData="{{homeLineObj}}"></loadCurveEchart> |
68 | 68 | </view> |
69 | 69 | ... | ... |
... | ... | @@ -986,4 +986,145 @@ export const getCardEvent = (n: number, Obj: any) => { |
986 | 986 | |
987 | 987 | return res |
988 | 988 | } |
989 | +// echarts 曲线数据统一处理 | |
990 | +export const getEchartLineType = (type: String, arrayList: Array<any>) => { | |
991 | + let lineObjLegend = {} | |
992 | + let dateList: Array<String> =arrayList.map((item: any) => { | |
993 | + return item.date | |
994 | + }) | |
995 | + switch (type) { | |
996 | + case "INDEX_MAP": //首页 | |
997 | + let bmsList: Array<String> = arrayList.map((item: any) => { | |
998 | + return item.bms02 | |
999 | + }) | |
989 | 1000 | |
1001 | + let cpList: Array<String> = arrayList.map((item: any) => { | |
1002 | + return item.cp02 | |
1003 | + }) | |
1004 | + | |
1005 | + let pvList: Array<String> = arrayList.map((item: any) => { | |
1006 | + return item.pv03 | |
1007 | + }) | |
1008 | + | |
1009 | + let emList: Array<String> = arrayList.map(() => { | |
1010 | + return "0" | |
1011 | + }) | |
1012 | + lineObjLegend = { | |
1013 | + dataList: [pvList, bmsList, cpList, emList], | |
1014 | + nameList: ["PV-总功只留功率", "BMS-总电流", "CP-当前功率", "EM-电流变比"], | |
1015 | + dateList: dateList | |
1016 | + } | |
1017 | + return lineObjLegend | |
1018 | + break; | |
1019 | + | |
1020 | + case "BMS_MAP": // BMS监控 | |
1021 | + let bmsOne: Array<String> = arrayList.map((item: any) => { | |
1022 | + return item.bms01 | |
1023 | + }) | |
1024 | + | |
1025 | + let bmsTwo: Array<String> = arrayList.map((item: any) => { | |
1026 | + return item.bms02 | |
1027 | + }) | |
1028 | + | |
1029 | + let bmsThree: Array<String> = arrayList.map((item: any) => { | |
1030 | + return item.bms03 | |
1031 | + }) | |
1032 | + | |
1033 | + let bmsFour: Array<String> = arrayList.map((item: any) => { | |
1034 | + return item.bms05 | |
1035 | + }) | |
1036 | + lineObjLegend = { | |
1037 | + dataList: [bmsOne, bmsTwo, bmsThree, bmsFour], | |
1038 | + nameList: ["BMS-允许放电电流", "BMS-总电流", "BMS-总电压", "BMS-SOC"], | |
1039 | + dateList: dateList | |
1040 | + } | |
1041 | + return lineObjLegend | |
1042 | + | |
1043 | + case "PCS_MAP": // PCS 监视 | |
1044 | + let pcsOne: Array<String> = arrayList.map((item: any) => { | |
1045 | + return item.bms01 | |
1046 | + }) | |
1047 | + | |
1048 | + let pcsTwo: Array<String> = arrayList.map((item: any) => { | |
1049 | + return item.bms02 | |
1050 | + }) | |
1051 | + | |
1052 | + let pcsThree: Array<String> = arrayList.map((item: any) => { | |
1053 | + return item.bms03 | |
1054 | + }) | |
1055 | + | |
1056 | + | |
1057 | + lineObjLegend = { | |
1058 | + dataList: [pcsOne, pcsTwo, pcsThree], | |
1059 | + nameList: ["PCS-交流A相电流", "PCS-最大放电电流", "PCS-交流C相电流"], | |
1060 | + dateList: dateList | |
1061 | + } | |
1062 | + return lineObjLegend | |
1063 | + | |
1064 | + case "CP_MAP": // CP 充电桩 | |
1065 | + let cpOne: Array<String> = arrayList.map((item: any) => { | |
1066 | + return item.pcs21 | |
1067 | + }) | |
1068 | + | |
1069 | + let cpTwo: Array<String> = arrayList.map((item: any) => { | |
1070 | + return item.pcs22 | |
1071 | + }) | |
1072 | + | |
1073 | + let cpThree: Array<String> = arrayList.map((item: any) => { | |
1074 | + return item.pcs23 | |
1075 | + }) | |
1076 | + | |
1077 | + | |
1078 | + lineObjLegend = { | |
1079 | + dataList: [cpOne, cpTwo, cpThree], | |
1080 | + nameList: ["PCS-交流A相电流", "PCS-交流B相电流", "PCS-交流C相电流"], | |
1081 | + dateList: dateList | |
1082 | + } | |
1083 | + return lineObjLegend | |
1084 | + | |
1085 | + case "PV_MAP": // PV 光伏 | |
1086 | + let pvOne: Array<String> = arrayList.map((item: any) => { | |
1087 | + return item.pv10 | |
1088 | + }) | |
1089 | + | |
1090 | + let pvTwo: Array<String> = arrayList.map((item: any) => { | |
1091 | + return item.pv11 | |
1092 | + }) | |
1093 | + | |
1094 | + let pvThree: Array<String> = arrayList.map((item: any) => { | |
1095 | + return item.pv12 | |
1096 | + }) | |
1097 | + | |
1098 | + | |
1099 | + lineObjLegend = { | |
1100 | + dataList: [pvOne, pvTwo, pvThree], | |
1101 | + nameList: ["PV-交流A相电流", "PV-交流B相电流", "PV-交流C相电流"], | |
1102 | + dateList: dateList | |
1103 | + } | |
1104 | + return lineObjLegend | |
1105 | + case "EM_MAP": // EM 电能表 | |
1106 | + let emOne: Array<String> = arrayList.map((item: any) => { | |
1107 | + return item.em01 | |
1108 | + }) | |
1109 | + | |
1110 | + let emTwo: Array<String> = arrayList.map((item: any) => { | |
1111 | + return item.em02 | |
1112 | + }) | |
1113 | + | |
1114 | + let emThree: Array<String> = arrayList.map((item: any) => { | |
1115 | + return item.em03 | |
1116 | + }) | |
1117 | + | |
1118 | + | |
1119 | + lineObjLegend = { | |
1120 | + dataList: [emOne, emTwo, emThree], | |
1121 | + nameList: ["EM-CA线电流", "EM-BC线电流", "EM-AB线电流"], | |
1122 | + dateList: dateList | |
1123 | + } | |
1124 | + return lineObjLegend | |
1125 | + | |
1126 | + default: | |
1127 | + return lineObjLegend | |
1128 | + break; | |
1129 | + } | |
1130 | +} | |
\ No newline at end of file | ... | ... |