Commit df19d4d91596f46e4241ade5258afe570f27e842

Authored by 周铨
1 parent 92858ea4

调试echart曲线图接口和页面展示

... ... @@ -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
... ...