更新 'src/pages/index/index.vue'

设备状态

src/pages/index/index.vue

@@ -1,699 +1,723 @@
 <template>
-	<view class="content">
-		<!--    <image class="logo" src="/static/logo.png"></image>
+  <view class="content">
+    <!--    <image class="logo" src="/static/logo.png"></image>
         <view class="text-area">
           <text class="title">{{ state.title }}</text>
         </view>-->
-		<uni-card class="w100">
-			<view class="header w100">
-				<view class="header-left">
-					<!--          <view >站点:</view>-->
-					<picker mode="selector" @change="handleStationCheck" :value="state.index" range-key="stationName"
-						:range="state.stationList">
-						<view class="uni-input">{{ state.stationList[state.index]?.stationName }}</view>
-					</picker>
-				</view>
-				<view class="header-right">
-					<view>{{ state.user?.username }}</view>
-				</view>
-			</view>
-		</uni-card>
-
-
-		<uni-card title="今日概要" type="line" class="w100">
-			<view class="content-summary">
-				<view v-for="item in state.statList" class="content-summary-item" :key="item.label">
-					<view>{{ item.label }}</view>
-					<view>{{ item.value }}</view>
-				</view>
-			</view>
-		</uni-card>
-		<view class="content1 w100">
-
-
-			<block class="w100">
-				<uni-card title="运营数据" padding="10px 0">
-					<uni-segmented-control :current="state.current" :values="state.items" @clickItem="handleClickPeriod"
-						styleType="text" activeColor="#4cd964"></uni-segmented-control>
-					<view v-for="canvas in state.canvasList" :key="canvas.id">
-						<view class="title">{{ canvas.label }}</view>
-						<canvas :id="canvas.id" :canvas-id="canvas.id" class="charts1" disable-scroll
-							@touchstart="handleTouchStart($event,canvas.id)"
-							@touchmove="handleTouchMove($event,canvas.id)" @touchend="handleTouchEnd($event,canvas.id)"
-							:style="{'width':state.cWidth+'px','height':state.cHeight+'px'}"></canvas>
-					</view>
-					<!--          <view>
-            <view class="title">总金额&服务费</view>
-            <canvas id="charge-ele-total" canvas-id="charge-ele-total" class="charts1"
-                    disable-scroll
-                    @touchstart="handleTouchStart($event,'charge-ele-total')"
-                    @touchmove="handleTouchMove($event,'charge-ele-total')"
-                    @touchend="handleTouchEnd($event,'charge-ele-total')"
-                    :style="{'width':state.cWidth+'px','height':state.cHeight+'px'}"></canvas>
+    <uni-card class="w100">
+      <view class="header w100">
+        <view class="header-left">
+          <!--          <view >站点:</view>-->
+          <picker mode="selector" @change="handleStationCheck" :value="state.index" range-key="stationName"
+                  :range="state.stationList">
+            <view class="uni-input">{{ state.stationList[state.index]?.stationName }}</view>
+          </picker>
+        </view>
+        <view class="header-right">
+          <view>{{ state.user?.username }}</view>
+        </view>
+      </view>
+    </uni-card>
+
+
+    <uni-card title="今日概要" type="line" class="w100">
+      <view class="content-summary">
+        <view v-for="item in state.statList" class="content-summary-item" :key="item.label">
+          <view>{{ item.label }}</view>
+          <view>{{ item.value }}</view>
+        </view>
+      </view>
+    </uni-card>
+    <view class="content1 w100">
+
+
+      <block class="w100">
+        <uni-card title="运营数据" padding="10px 0">
+          <uni-segmented-control :current="state.current" :values="state.items" @clickItem="handleClickPeriod"
+                                 styleType="text" activeColor="#4cd964"></uni-segmented-control>
+          <view v-for="canvas in state.canvasList" :key="canvas.id">
+            <view class="title">{{ canvas.label }}</view>
+            <canvas
+                :id="canvas.id"
+                :canvas-id="canvas.id"
+                class="charts1"
+                @touchstart="handleTouchStart($event,canvas.id)"
+                @touchmove="handleTouchMove($event,canvas.id)"
+                @touchend="handleTouchEnd($event,canvas.id)"
+                :style="{'width':state.cWidth+'px','height':state.cHeight+'px'}"></canvas>
           </view>
-          <view>
-            <view class="title">电量&电费</view>
-            <canvas id="elec-power" canvas-id="elec-power" class="charts1"
-                    disable-scroll
-                    @touchstart="handleTouchStart($event,'elec-power')"
-                    @touchmove="handleTouchMove($event,'elec-power')"
-                    @touchend="handleTouchEnd($event,'elec-power')"
-                    :style="{'width':state.cWidth+'px','height':state.cHeight+'px'}"></canvas>
-          </view>
-          <view>
-            <view class="title">充电客户&订单</view>
-            <canvas id="charge-user-order" canvas-id="charge-user-order" class="charts1" @touchend="tap" :style="{'width':state.cWidth+'px','height':state.cHeight+'px'}"></canvas>
-          </view>-->
-				</uni-card>
-			</block>
+        </uni-card>
+      </block>
 
 
-		</view>
-	</view>
+    </view>
+  </view>
 </template>
 
 <script setup>
-	import {
-		reactive,
-		watch,
-		nextTick
-	} from 'vue';
-	import {
-		onLoad,
-		onShow
-	} from '@dcloudio/uni-app'
-
-	import uCharts from "../../assets/u-charts.min";
-	import {
-		cfg,
-		get,
-		fmtMoney,
-		fmtDate,
-		msg
-	} from "../../assets/utils";
-
-
-	const state = reactive({
-		login: false,
-		title: '快与慢运营看板小程序',
-		cWidth: 750,
-		cHeight: 500,
-		statList: [{
-				label: '充电量',
-				value: '100'
-			},
-			{
-				label: '订单总金额',
-				value: '100'
-			},
-			{
-				label: '总电费',
-				value: '100'
-			},
-			{
-				label: '实付总服务费',
-				value: '100'
-			},
-			{
-				label: '充电人数',
-				value: '100'
-			},
-			{
-				label: '充电订单数',
-				value: '100'
-			},
-		],
-		user: null,
-		stationList: [],
-		index: 0,
-		items: ['7天', '30天', '90天'],
-		current: 0,
-		chartData: null,
-		uChartsInstance: {},
-		canvasList: [{
-				label: '总金额&服务费',
-				id: 'charge-ele-total'
-			},
-			{
-				label: '电量&电费',
-				id: 'elec-power'
-			},
-			{
-				label: '充电客户&订单',
-				id: 'charge-user-order'
-			}
-		]
-	})
-
-
-	/**
-	 * 监听站点切换
-	 */
-	watch(() => state.index, (newVal, oldVal) => {
-		loadTodayStat();
-		loadPeriodStat();
-	})
-
-
-	/**
-	 * 监听周期切换
-	 */
-	watch(() => state.current, (newVal, oldVal) => {
-		loadPeriodStat();
-	})
-
-
-	onLoad(() => {
-		//这里的 750 对应 css .charts 的 width
-		state.cWidth = uni.upx2px(750 - 30 - 70);
-		//这里的 500 对应 css .charts 的 height
-		state.cHeight = uni.upx2px(500);
-		checkLogin();
-	})
-
-	onShow(() => {
-		state.user = uni.getStorageSync(cfg.key.user);
-		if (state.user) {
-			loadStationList();
-		}
-	})
-
-	const loadStationList = () => {
-		get(`station/listStation`, {
-			pageNum: 1024
-		}).then((res) => {
-			state.stationList = res || []?.map(k => {
-				return {
-					stationId: k.stationId,
-					stationName: k.stationName
-				}
-			});
-			nextTick(() => {
-				loadTodayStat();
-				loadPeriodStat();
-			})
-		}).catch(e => {
-			console.error(e)
-		})
-	}
-
-	/**
-	 * 站点今日的统计数据
-	 */
-	const loadTodayStat = () => {
-		let station = state.stationList[state.index];
-		if (!station) {
-			return;
-		}
-		let stationId = state.stationList[state.index].stationId;
-		get(`stat/stationTodayStat?stationId=${stationId}`).then((res) => {
-			let {
-				chargeUsers,
-				totalOrders,
-				totalPower,
-				totalMoney,
-				payAmount,
-				elecMoney,
-				serviceMoney,
-				payServiceAmount
-			} = res;
-			state.statList[0].value = totalPower + 'Kwh';
-			state.statList[1].value = fmtMoney(totalMoney) + '元';
-			state.statList[2].value = fmtMoney(elecMoney) + '元';
-			state.statList[3].value = fmtMoney(payServiceAmount) + '元';
-			state.statList[4].value = chargeUsers;
-			state.statList[5].value = totalOrders;
-		}).catch(e => {
-			console.error(e)
-		})
-	}
-
-	/**
-	 * 站点最近趋势的统计数据
-	 */
-	const loadPeriodStat = () => {
-		let station = state.stationList[state.index];
-		if (!station) {
-			msg('无站点统计数据');
-			return;
-		}
-		let stationId = state.stationList[state.index].stationId;
-		const end = new Date()
-		const start = new Date()
-		let type = 'day'
-		if (state.current === 0) {
-			start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
-		} else if (state.current === 1) {
-			start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
-		} else if (state.current === 2) {
-			start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
-		}
-		let params = {
-			stationIds: [stationId],
-			startTime: fmtDate(start),
-			endTime: fmtDate(end),
-			type: type
-		}
-
-		get(`/stat/stationStatDetail`, params).then(res => {
-			console.log(res)
-			state.chartData = res;
-			//总金额和服务费折线图
-			drawServiceAndTotalMoneyChart(stationId);
-			//电费和电量折线图
-			drawElectricAndPowerChart(stationId);
-			//充电人数、订单
-			drawChargeUserChart(stationId);
-		})
-	}
-
-	/**
-	 * 总金额和服务费折线图
-	 */
-	const drawServiceAndTotalMoneyChart = (stationId) => {
-		let dataList = state.chartData[stationId]
-		if (!dataList || dataList.length == 0) {
-			return;
-		}
-		let categories = dataList.map(k => k.statDay.split('-').slice(1).join('-'));
-		let series = [{
-				name: '总金额',
-				data: dataList.map(k => fmtMoney(k.totalMoney))
-			},
-			{
-				name: '服务费',
-				data: dataList.map(k => fmtMoney(k.serviceMoney))
-			}
-		]
-		let options = {
-			type: "area",
-			color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4",
-				"#ea7ccc"
-			],
-			padding: [15, 15, 0, 0],
-			background: '#FFFFFF',
-			enableScroll: true,
-			canvas2d: true,
-			dataLabel: false,
-			width: state.cWidth,
-			height: state.cHeight,
-			categories: categories,
-			series: series,
-			xAxis: {
-				disabled: false,
-				disableGrid: true,
-				itemCount: 7,
-				labelCount: 5,
-				fontSize: 10,
-				marginTop: 7,
-				rotateLabel: true,
-				rotateAngle: 35,
-
-				// scrollShow:true,
-				// scrollAlign:'left',//滚动条初始位置
-				// scrollBackgroundColor:'#F7F7FF',//默认为 #EFEBEF
-				// scrollColor:'#DEE7F7',//默认为 #A6A6A6
-				// formatter:function (value,index,opts){
-				//   return value.split('-').slice(1).join('-');
-				// }
-			},
-			yAxis: {
-				// disabled:true,
-				gridType: "dash",
-				dashLength: 2,
-				data: [{
-					fontSize: 10
-				}],
-			},
-			extra: {
-				area: {
-					type: "curve",
-					opacity: 0.2,
-					addLine: true,
-					width: 2,
-					gradient: true,
-					activeType: "hollow"
-				},
-				tooltip: {
-					showCategory: true
-				}
-			}
-		}
-
-		let charts = state.uChartsInstance["charge-ele-total"];
-		if (charts) {
-			charts.updateData(options);
-		} else {
-			const ctx = uni.createCanvasContext("charge-ele-total");
-			options.context = ctx;
-			console.log(options)
-			console.log(state.cHeight, state.cWidth)
-			// charts.setChartData(options);
-			state.uChartsInstance["charge-ele-total"] = new uCharts(options);
-		}
-	}
-
-
-	/**
-	 * 电费和电量折线图
-	 */
-	const drawElectricAndPowerChart = (stationId) => {
-		let dataList = state.chartData[stationId]
-		if (!dataList || dataList.length == 0) {
-			return;
-		}
-		let categories = dataList.map(k => k.statDay.split('-').slice(1).join('-'));
-		let series = [{
-				name: '电量',
-				type: "area",
-				style: "curve",
-				data: dataList.map(k => k.totalPower)
-			},
-			{
-				name: '电费',
-				type: "line",
-				style: "curve",
-				color: "#1890ff",
-				data: dataList.map(k => fmtMoney(k.elecMoney))
-			}
-		]
-		let options = {
-			type: "mix",
-			color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4",
-				"#ea7ccc"
-			],
-			padding: [15, 15, 0, 0],
-			enableScroll: true,
-			animation: true,
-			canvas2d: true,
-			dataLabel: false,
-			width: state.cWidth,
-			height: state.cHeight,
-			categories: categories,
-			series: series,
-			background: '#FFFFFF',
-			xAxis: {
-				disableGrid: true,
-				itemCount: 7,
-				labelCount: 5,
-				fontSize: 10,
-				marginTop: 7,
-				rotateLabel: true,
-				rotateAngle: 35,
-				// formatter:function (value,index,opts){
-				//   return value.split('-').slice(1).join('-');
-				// }
-			},
-			yAxis: {
-				disabled: false,
-				disableGrid: false,
-				splitNumber: 5,
-				gridType: "dash",
-				dashLength: 4,
-				gridColor: "#CCCCCC",
-				padding: 10,
-				showTitle: true,
-				data: [{
-					position: "left",
-					title: "",
-					fontSize: 10,
-
-				}, ]
-			},
-			extra: {
-				mix: {
-					column: {
-						width: 20
-					}
-				},
-				tooltip: {
-					showCategory: true
-				}
-			}
-		}
-
-		let charts = state.uChartsInstance["elec-power"];
-		if (charts) {
-			charts.updateData(options);
-		} else {
-			const ctx = uni.createCanvasContext("elec-power", this);
-			options.context = ctx;
-			// charts.setChartData(options);
-			state.uChartsInstance["elec-power"] = new uCharts(options);
-		}
-	}
-
-
-	/**
-	 * 充电人数柱状图
-	 */
-	const drawChargeUserChart = (stationId) => {
-		let dataList = state.chartData[stationId]
-		if (!dataList || dataList.length == 0) {
-			return;
-		}
-		let categories = dataList.map(k => k.statDay.split('-').slice(1).join('-'));
-		let series = [{
-				name: '人次',
-				data: dataList.map(k => k.chargeUsers)
-			},
-			{
-				name: '订单',
-				data: dataList.map(k => k.validOrders)
-			}
-		]
-		let options = {
-			type: "column",
-			color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4",
-				"#ea7ccc"
-			],
-			padding: [15, 15, 0, 0],
-			background: '#FFFFFF',
-			enableScroll: true,
-			animation: true,
-			canvas2d: true,
-			dataLabel: false,
-			width: state.cWidth,
-			height: state.cHeight,
-			categories: categories,
-			series: series,
-			xAxis: {
-				itemCount: 7,
-				labelCount: 5,
-				fontSize: 10,
-				marginTop: 7,
-				rotateLabel: true,
-				rotateAngle: 35,
-				// scrollShow:true,
-				boundaryGap: "justify",
-				disableGrid: true,
-				min: 0,
-				axisLine: false,
-				max: 40,
-			},
-			yAxis: {
-				data: [{
-					min: 0,
-					fontSize: 10,
-				}]
-			},
-			extra: {
-				column: {
-					type: "group",
-					width: 30,
-					activeBgColor: "#000000",
-					activeBgOpacity: 0.08,
-					linearType: "custom",
-					seriesGap: 5,
-					linearOpacity: 0.5,
-					barBorderCircle: true,
-					customColor: [
-						"#1890FF",
-						"#91CB74"
-					]
-				},
-				tooltip: {
-					showCategory: true
-				}
-			}
-		}
-
-		let charts = state.uChartsInstance["charge-user-order"];
-		if (charts) {
-			charts.updateData(options);
-		} else {
-			const ctx = uni.createCanvasContext("charge-user-order", this);
-			options.context = ctx;
-			// charts.setChartData(options);
-			state.uChartsInstance["charge-user-order"] = new uCharts(options);
-		}
-	}
-
-	const handleTouchStart = (e, canvasId) => {
-		// console.log(e,canvasId)
-		let charts = state.uChartsInstance[canvasId];
-		if (charts) {
-			charts.scrollStart(e);
-		}
-	}
-
-	const handleTouchMove = (e, canvasId) => {
-		// console.error(e,canvasId)
-		let charts = state.uChartsInstance[canvasId];
-		if (charts) {
-			charts.scroll(e);
-		}
-	}
-
-	const handleTouchEnd = (e, canvasId) => {
-		// console.warn(e,canvasId)
-		let charts = state.uChartsInstance[canvasId];
-		if (charts) {
-			charts.scrollEnd(e);
-			charts.showToolTip(e, {
-				format: function(item, category) {
-					console.log(item, category)
-					return category + ' ' + item.name + ':' + item.data
-				}
-			})
-		}
-	}
-
-
-	const handleStationCheck = (e) => {
-		// console.log(e)
-		state.index = e.detail.value;
-	}
-
-	const handleClickPeriod = (e) => {
-		// console.log(e)
-		state.current = e.currentIndex;
-	}
-
-	const checkLogin = () => {
-		let user = uni.getStorageSync(cfg.key.user);
-		if (user) {
-			state.login = true;
-		} else {
-			state.login = false;
-			uni.navigateTo({
-				url: '/pages/login/index'
-			});
-		}
-	}
-
-	const tap = (e) => {
-		state.uChartsInstance[e.target.id].touchLegend(e);
-		state.uChartsInstance[e.target.id].showToolTip(e);
-	}
-
-
-	/**
-	 * DEMO
-	 * @param canvasId
-	 * @param data
-	 */
-	const drawCharts = (canvasId, data) => {
-		const ctx = uni.createCanvasContext(canvasId, this);
-		state.uChartsInstance[canvasId] = new uCharts({
-			type: "column",
-			context: ctx,
-			width: state.cWidth,
-			height: state.cHeight,
-			categories: data.categories,
-			series: data.series,
-			xAxis: {
-				disableGrid: true
-			},
-			yAxis: {
-				data: [{
-					min: 0
-				}]
-			},
-			extra: {
-				column: {
-					type: "group"
-				}
-			}
-		});
-
-	}
+import {
+  reactive,
+  watch,
+  nextTick
+} from 'vue';
+import {
+  onLoad,
+  onShow
+} from '@dcloudio/uni-app'
+
+import uCharts from "../../assets/u-charts.min";
+import {
+  cfg,
+  get,
+  fmtMoney,
+  fmtDate,
+  msg
+} from "../../assets/utils";
+
+
+const state = reactive({
+  login: false,
+  title: '快与慢运营看板小程序',
+  cWidth: 750,
+  cHeight: 500,
+  statList: [{
+    label: '充电量',
+    value: '100'
+  },
+    {
+      label: '订单总金额',
+      value: '100'
+    },
+    {
+      label: '总电费',
+      value: '100'
+    },
+    {
+      label: '实付总服务费',
+      value: '100'
+    },
+    {
+      label: '充电人数',
+      value: '100'
+    },
+    {
+      label: '充电订单数',
+      value: '100'
+    },
+  ],
+  user: null,
+  stationList: [],
+  index: 0,
+  items: ['7天', '30天', '90天'],
+  current: 0,
+  chartData: null,
+  uChartsInstance: {},
+  canvasList: [{
+    label: '总金额&服务费',
+    id: 'charge-ele-total'
+  },
+   /* {
+      label: '电量&电费',
+      id: 'elec-power'
+    },*/
+    {
+      label: '充电客户&订单',
+      id: 'charge-user-order'
+    },
+    {
+      label: '设备状态分布',
+      id: 'device-status'
+    },
+  ]
+})
+
+
+/**
+ * 监听站点切换
+ */
+watch(() => state.index, (newVal, oldVal) => {
+  loadTodayStat();
+  loadPeriodStat();
+})
+
+
+/**
+ * 监听周期切换
+ */
+watch(() => state.current, (newVal, oldVal) => {
+  loadPeriodStat();
+})
+
+
+onLoad(() => {
+  //这里的 750 对应 css .charts 的 width
+  state.cWidth = uni.upx2px(750 - 30 - 70);
+  //这里的 500 对应 css .charts 的 height
+  state.cHeight = uni.upx2px(500);
+  checkLogin();
+})
+
+onShow(() => {
+  state.user = uni.getStorageSync(cfg.key.user);
+  if (state.user) {
+    loadStationList();
+  }
+})
+
+const loadStationList = () => {
+  get(`station/listStation`, {
+    pageNum: 1024
+  }).then((res) => {
+    state.stationList = res || []?.map(k => {
+      return {
+        stationId: k.stationId,
+        stationName: k.stationName
+      }
+    });
+    nextTick(() => {
+      loadTodayStat();
+      loadPeriodStat();
+    })
+  }).catch(e => {
+    console.error(e)
+  })
+}
+
+/**
+ * 站点今日的统计数据
+ */
+const loadTodayStat = () => {
+  let station = state.stationList[state.index];
+  if (!station) {
+    return;
+  }
+  let stationId = state.stationList[state.index].stationId;
+  get(`stat/stationTodayStat?stationId=${stationId}`).then((res) => {
+    let {
+      chargeUsers,
+      totalOrders,
+      totalPower,
+      totalMoney,
+      payAmount,
+      elecMoney,
+      serviceMoney,
+      payServiceAmount
+    } = res;
+    state.statList[0].value = totalPower + 'Kwh';
+    state.statList[1].value = fmtMoney(totalMoney) + '元';
+    state.statList[2].value = fmtMoney(elecMoney) + '元';
+    state.statList[3].value = fmtMoney(payServiceAmount) + '元';
+    state.statList[4].value = chargeUsers;
+    state.statList[5].value = totalOrders;
+  }).catch(e => {
+    console.error(e)
+  })
+
+  //状态 '离线:0', '空闲:1', '已连接:2', '充电中:3', '预约中:4', '故障:255'
+  get(`/equipment/statEquipmentStatus?stationId=${stationId}`).then(res => {
+    drawDeviceStatusChart(res);
+  })
+}
+
+/**
+ * 站点最近趋势的统计数据
+ */
+const loadPeriodStat = () => {
+  let station = state.stationList[state.index];
+  if (!station) {
+    msg('无站点统计数据');
+    return;
+  }
+  let stationId = state.stationList[state.index].stationId;
+  const end = new Date()
+  const start = new Date()
+  let type = 'day'
+  if (state.current === 0) {
+    start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
+  } else if (state.current === 1) {
+    start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
+  } else if (state.current === 2) {
+    start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
+  }
+  let params = {
+    stationIds: [stationId],
+    startTime: fmtDate(start),
+    endTime: fmtDate(end),
+    type: type
+  }
+
+  get(`/stat/stationStatDetail`, params).then(res => {
+    console.log(res)
+    state.chartData = res;
+    //总金额和服务费折线图
+    drawServiceAndTotalMoneyChart(stationId);
+    //电费和电量折线图
+    // drawElectricAndPowerChart(stationId);
+    //充电人数、订单
+    drawChargeUserChart(stationId);
+  })
+}
+
+/**
+ * 总金额和服务费折线图
+ */
+const drawServiceAndTotalMoneyChart = (stationId) => {
+  let dataList = state.chartData[stationId]
+  if (!dataList || dataList.length == 0) {
+    return;
+  }
+  let categories = dataList.map(k => k.statDay.split('-').slice(1).join('-'));
+  let series = [{
+    name: '总金额',
+    data: dataList.map(k => fmtMoney(k.totalMoney))
+  },
+    {
+      name: '服务费',
+      data: dataList.map(k => fmtMoney(k.serviceMoney))
+    }
+  ]
+  let options = {
+    type: "area",
+    color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4",
+      "#ea7ccc"
+    ],
+    padding: [15, 15, 0, 0],
+    background: '#FFFFFF',
+    enableScroll: true,
+    canvas2d: true,
+    dataLabel: false,
+    width: state.cWidth,
+    height: state.cHeight,
+    categories: categories,
+    series: series,
+    xAxis: {
+      disabled: false,
+      disableGrid: true,
+      itemCount: 7,
+      labelCount: 5,
+      fontSize: 10,
+      marginTop: 7,
+      rotateLabel: true,
+      rotateAngle: 35,
+    },
+    yAxis: {
+      // disabled:true,
+      gridType: "dash",
+      dashLength: 2,
+      data: [{
+        fontSize: 10
+      }],
+    },
+    extra: {
+      area: {
+        type: "curve",
+        opacity: 0.2,
+        addLine: true,
+        width: 2,
+        gradient: true,
+        activeType: "hollow"
+      },
+      tooltip: {
+        showCategory: true,
+      }
+    }
+  }
+
+  let charts = state.uChartsInstance["charge-ele-total"];
+  if (charts) {
+    charts.updateData(options);
+  } else {
+    const ctx = uni.createCanvasContext("charge-ele-total");
+    options.context = ctx;
+    console.log(options)
+    console.log(state.cHeight, state.cWidth)
+    // charts.setChartData(options);
+    state.uChartsInstance["charge-ele-total"] = new uCharts(options);
+  }
+}
+
+
+/**
+ * 电费和电量折线图
+ */
+const drawElectricAndPowerChart = (stationId) => {
+  let dataList = state.chartData[stationId]
+  if (!dataList || dataList.length == 0) {
+    return;
+  }
+  let categories = dataList.map(k => k.statDay.split('-').slice(1).join('-'));
+  let series = [{
+    name: '电量',
+    type: "area",
+    style: "curve",
+    data: dataList.map(k => k.totalPower)
+  },
+    {
+      name: '电费',
+      type: "line",
+      style: "curve",
+      color: "#1890ff",
+      data: dataList.map(k => fmtMoney(k.elecMoney))
+    }
+  ]
+  let options = {
+    type: "mix",
+    color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4",
+      "#ea7ccc"
+    ],
+    padding: [15, 15, 0, 0],
+    enableScroll: true,
+    animation: true,
+    canvas2d: true,
+    dataLabel: false,
+    width: state.cWidth,
+    height: state.cHeight,
+    categories: categories,
+    series: series,
+    background: '#FFFFFF',
+    xAxis: {
+      disableGrid: true,
+      itemCount: 7,
+      labelCount: 5,
+      fontSize: 10,
+      marginTop: 7,
+      rotateLabel: true,
+      rotateAngle: 35,
+      // formatter:function (value,index,opts){
+      //   return value.split('-').slice(1).join('-');
+      // }
+    },
+    yAxis: {
+      disabled: false,
+      disableGrid: false,
+      splitNumber: 5,
+      gridType: "dash",
+      dashLength: 4,
+      gridColor: "#CCCCCC",
+      padding: 10,
+      showTitle: true,
+      data: [{
+        position: "left",
+        title: "",
+        fontSize: 10,
+
+      },]
+    },
+    extra: {
+      mix: {
+        column: {
+          width: 20
+        }
+      },
+      tooltip: {
+        showCategory: true
+      }
+    }
+  }
+
+  let charts = state.uChartsInstance["elec-power"];
+  if (charts) {
+    charts.updateData(options);
+  } else {
+    const ctx = uni.createCanvasContext("elec-power", this);
+    options.context = ctx;
+    // charts.setChartData(options);
+    state.uChartsInstance["elec-power"] = new uCharts(options);
+  }
+}
+
+
+/**
+ * 充电人数柱状图
+ */
+const drawChargeUserChart = (stationId) => {
+  let dataList = state.chartData[stationId]
+  if (!dataList || dataList.length == 0) {
+    return;
+  }
+  let categories = dataList.map(k => k.statDay.split('-').slice(1).join('-'));
+  let series = [{
+    name: '人次',
+    data: dataList.map(k => k.chargeUsers)
+  },
+    {
+      name: '订单',
+      data: dataList.map(k => k.validOrders)
+    }
+  ]
+  let options = {
+    type: "column",
+    color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4",
+      "#ea7ccc"
+    ],
+    padding: [15, 15, 0, 0],
+    background: '#FFFFFF',
+    enableScroll: true,
+    animation: true,
+    canvas2d: true,
+    dataLabel: false,
+    width: state.cWidth,
+    height: state.cHeight,
+    categories: categories,
+    series: series,
+    xAxis: {
+      itemCount: 7,
+      labelCount: 5,
+      fontSize: 10,
+      marginTop: 7,
+      rotateLabel: true,
+      rotateAngle: 35,
+      // scrollShow:true,
+      boundaryGap: "justify",
+      disableGrid: true,
+      min: 0,
+      axisLine: false,
+      max: 40,
+    },
+    yAxis: {
+      data: [{
+        min: 0,
+        fontSize: 10,
+      }]
+    },
+    extra: {
+      column: {
+        type: "group",
+        width: 10,
+        activeBgColor: "#000000",
+        activeBgOpacity: 0.08,
+        linearType: "custom",
+        seriesGap: 5,
+        linearOpacity: 0.5,
+        barBorderCircle: true,
+        customColor: [
+          "#1890FF",
+          "#91CB74"
+        ]
+      },
+      tooltip: {
+        showCategory: true
+      }
+    }
+  }
+
+  let charts = state.uChartsInstance["charge-user-order"];
+  if (charts) {
+    charts.updateData(options);
+  } else {
+    const ctx = uni.createCanvasContext("charge-user-order", this);
+    options.context = ctx;
+    // charts.setChartData(options);
+    state.uChartsInstance["charge-user-order"] = new uCharts(options);
+  }
+}
+
+/**
+ * 设置状态分布
+ */
+const drawDeviceStatusChart = (data) => {
+  if (Object.keys(data).length === 0) {
+    return;
+  }
+  let statusMap = {
+    '0': '离线', '1': '空闲', '2': '已连接', '3': '充电中', '4': '预约中', '255': '故障'
+  }
+  let seriesData = []
+  Object.keys(data).forEach(key=>{
+    seriesData.push({
+      name:statusMap[key],
+      value:data[key],
+      labelShow:true
+    })
+  })
+  let series = [{data:seriesData}]
+  console.log(series)
+  let options = {
+    tooltipShow:true,
+    type: "ring",
+    width: state.cWidth,
+    height: state.cHeight,
+    series: series,
+    animation: true,
+    rotate: false,
+    rotateLock: false,
+    background: "#FFFFFF",
+    color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4", "#ea7ccc"],
+    padding: [5, 5, 5, 5],
+    dataLabel: true,
+    enableScroll: false,
+    legend: {
+      show: true,
+      position: "right",
+      lineHeight: 25
+    },
+    title: {
+      name: "",
+      fontSize: 15,
+      color: "#666666"
+    },
+    subtitle: {
+      name: "",
+      fontSize: 25,
+      color: "#7cb5ec"
+    },
+    extra: {
+      ring: {
+        ringWidth: 60,
+        activeOpacity: 0.5,
+        activeRadius: 10,
+        offsetAngle: 0,
+        labelWidth: 15,
+        border: true,
+        borderWidth: 3,
+        borderColor: "#FFFFFF"
+      }
+    }
+  }
+
+  let charts = state.uChartsInstance["device-status"];
+  if (charts) {
+    charts.updateData(options);
+  } else {
+    const ctx = uni.createCanvasContext("device-status", this);
+    options.context = ctx;
+    state.uChartsInstance["device-status"] = new uCharts(options);
+  }
+}
+
+const handleTouchStart = (e, canvasId) => {
+  console.log(e,canvasId)
+  let charts = state.uChartsInstance[canvasId];
+  if (charts) {
+    charts.scrollStart(e);
+  }
+}
+
+const handleTouchMove = (e, canvasId) => {
+  console.error(e,canvasId)
+  let charts = state.uChartsInstance[canvasId];
+  if (charts) {
+    charts.scroll(e);
+  }
+}
+
+const handleTouchEnd = (e, canvasId) => {
+  console.warn(e,canvasId)
+  let charts = state.uChartsInstance[canvasId];
+  if (charts) {
+    charts.scrollEnd(e);
+    charts.showToolTip(e, {
+      format: function (item, category) {
+        console.error(item, category)
+        return category + ' ' + item.name + ':' + item.data
+      }
+    })
+  }
+}
+
+
+const handleStationCheck = (e) => {
+  // console.log(e)
+  state.index = e.detail.value;
+}
+
+const handleClickPeriod = (e) => {
+  // console.log(e)
+  state.current = e.currentIndex;
+}
+
+const checkLogin = () => {
+  let user = uni.getStorageSync(cfg.key.user);
+  if (user) {
+    state.login = true;
+  } else {
+    state.login = false;
+    uni.navigateTo({
+      url: '/pages/login/index'
+    });
+  }
+}
+
+const tap = (e) => {
+  state.uChartsInstance[e.target.id].touchLegend(e);
+  state.uChartsInstance[e.target.id].showToolTip(e);
+}
+
 </script>
 
 <style lang="scss">
-	.content {
-		display: flex;
-		flex-direction: column;
-		align-items: center;
-		justify-content: center;
-		padding: 15rpx 15rpx;
-	}
-
-	.header {
-		width: 100%;
-		padding: 15rpx;
-		display: inline-flex;
-		justify-content: space-between;
-
-		.header-left {
-			display: inline-flex;
-			align-content: center;
-			width: 60%;
-		}
-
-		.header-right {
-			text-align: right;
-			width: 35%;
-		}
-	}
-
-	.content-summary {
-		display: flex;
-		justify-content: space-between;
-		width: 100%;
-		margin-top: 30rpx;
-		margin-bottom: 30rpx;
-		flex-wrap: wrap;
-
-		.content-summary-item {
-			display: flex;
-			flex-direction: column;
-			align-items: center;
-			justify-content: center;
-			width: 115px;
-			padding: 5px;
-			//box-shadow: 2px   2px  2px 2px #e6e6e6;
-		}
-	}
-
-	.kanban-title {
-		display: inline-flex;
-	}
-
-	.content-chart {
-		width: 100%;
-		;
-	}
-
-
-	.logo {
-		height: 200rpx;
-		width: 200rpx;
-		margin-top: 200rpx;
-		margin-left: auto;
-		margin-right: auto;
-		margin-bottom: 5rpx;
-	}
-
-	.text-area {
-		display: flex;
-		justify-content: center;
-	}
-
-	.title {
-		margin-top: 30rpx;
-		margin-left: 20rpx;
-		font-size: 30rpx;
-		color: #8f8f94;
-	}
+.content {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 15rpx 15rpx;
+}
+
+.header {
+  width: 100%;
+  padding: 15rpx;
+  display: inline-flex;
+  justify-content: space-between;
+
+  .header-left {
+    display: inline-flex;
+    align-content: center;
+    width: 60%;
+  }
+
+  .header-right {
+    text-align: right;
+    width: 35%;
+  }
+}
+
+.content-summary {
+  display: flex;
+  justify-content: space-between;
+  width: 100%;
+  margin-top: 30rpx;
+  margin-bottom: 30rpx;
+  flex-wrap: wrap;
+
+  .content-summary-item {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    width: 115px;
+    padding: 5px;
+    //box-shadow: 2px   2px  2px 2px #e6e6e6;
+  }
+}
+
+.kanban-title {
+  display: inline-flex;
+}
+
+.content-chart {
+  width: 100%;;
+}
+
+
+.logo {
+  height: 200rpx;
+  width: 200rpx;
+  margin-top: 200rpx;
+  margin-left: auto;
+  margin-right: auto;
+  margin-bottom: 5rpx;
+}
+
+.text-area {
+  display: flex;
+  justify-content: center;
+}
+
+.title {
+  margin-top: 30rpx;
+  margin-left: 20rpx;
+  font-size: 30rpx;
+  color: #8f8f94;
+}
 </style>