完善首页折线图 删除多余文件

reado-app/components/ecahrts/demo.vue

@@ -1,158 +0,0 @@
-<template>
-	<view class="charts-box">
-		<qiun-data-charts ref="lineChart" type="line" :opts="opts" :chartData="chartData" :ontouch="true" canvas2d
-			canvasId="canvasId" :disableScroll="true" :onzoom="true" />
-	</view>
-</template>
-
-<script>
-	import {
-		nowDate,
-		timeToDate
-	} from '../../utils/date.js';
-	import uCharts from '@/uni_modules/qiun-data-charts/js_sdk/u-charts/u-charts.js';
-	export default {
-		props: {
-			echartsData: Object
-		},
-		data() {
-			return {
-				chartData: {},
-				//您可以通过修改 config-ucharts.js 文件中下标为 ['line'] 的节点来配置全局默认参数，如都是默认参数，此处可以不传 opts 。实际应用过程中 opts 只需传入与全局默认参数中不一致的【某一个属性】即可实现同类型的图表显示不同的样式，达到页面简洁的需求。
-				opts: {
-					color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4",
-						"#ea7ccc"
-					],
-					padding: [15, 10, 0, 15],
-					enableScroll: true,
-					legend: {},
-					xAxis: {
-						disableGrid: true,
-						scrollShow: true,
-						itemCount: 2,
-						format:"yAxisDemo1"
-					},
-					yAxis: {
-						gridType: "dash",
-						dashLength: 2
-					},
-					extra: {
-						line: {
-							type: "straight",
-							width: 2,
-							activeType: "hollow"
-						}
-					}
-				},
-				time: [],
-				series: []
-			};
-		},
-		mounted() {
-			this.getEmit()
-		},
-		methods: {
-			getServerData() {
-				const chartData = this.echartsData.chartItemList
-
-				const timeData = chartData[0].valueTimeList
-				const time = timeData.map(item => {
-					return item.substring(0, 19).replaceAll('-', "")
-				})
-				this.time = time
-				this.series = series
-				const series = chartData.map(item => {
-					return {
-						name: item.describe ? item.describe : item.itemName,
-						data: item.valueList
-					}
-				})
-				let res = {
-					categories: time,
-					series: series
-				};
-				this.chartData = JSON.parse(JSON.stringify(res));
-			},
-			getEmit() {
-				const {
-					bucketType,
-					bucketValue
-				} = this.echartsData
-				let time = null
-				switch (bucketType) {
-					case 0:
-						time = 86400000 * bucketValue
-
-						break;
-					case 1:
-						time = 3600000 * bucketValue
-
-						break;
-					case 2:
-						time = 60000 * bucketValue
-
-						break;
-					case 3:
-						time = 1000 * bucketValue
-
-						break;
-				}
-				this.getServerData()
-				this.lineTime = setInterval(() => {
-					const currentTime = nowDate();
-					let lastTime;
-					uni.getStorage({
-						key: 'sTime',
-						success: (o) => {
-							lastTime = o.data;
-						}
-					})
-					let chartParams = {
-						id: this.echartsData.id,
-						startTime: lastTime,
-						endTime: currentTime
-					}
-					uni.setStorage({
-						key: 'sTime',
-						data: currentTime
-					})
-					uni.$http.get('/chart/getChartById', chartParams).then(res => {
-						let chartItemList = res.data.data.chartItemList;
-						chartItemList.forEach((item, index) => {
-							if (item.itemId === this.echartsData.chartItemList[index].itemId) {
-								if (item.valueList.length !== 0) {
-									//执行将新数据添加进去，旧数据去除一个
-									this.echartsData.chartItemList[index].valueList.push(...item
-										.valueList)
-									this.echartsData.chartItemList[index].valueList.splice(0, item
-										.valueList.length)
-									// this.echartsData.chartItemList[index].valueList.slice(item
-									// 	.valueList.length, this.echartsData.chartItemList[
-									// 		index].valueList.length)
-									this.echartsData.chartItemList[index].valueTimeList.push(...
-										item
-										.valueTimeList)
-									this.echartsData.chartItemList[index].valueTimeList.splice(0,
-										item
-										.valueTimeList.length)
-									// this.echartsData.chartItemList[index].valueTimeList.slice(
-									// 	item
-									// 	.valueTimeList.length, this.echartsData.chartItemList[
-									// 		index].valueTimeList.length)
-								}
-							}
-						})
-					})
-				}, time)
-			}
-		}
-	};
-</script>
-
-<style scoped>
-	/* 请根据实际需求修改父元素尺寸，组件自动识别宽高 */
-	.charts-box {
-		width: 100%;
-		height: 540rpx;
-	}
-</style>

reado-app/components/ecahrts/demo1.vue

@@ -1,117 +0,0 @@
-<template>
-	<view class="dataTable">
-		<canvas id="myEcharts" style="width:100%;height:540rpx"></canvas>
-	</view>
-</template>
-
-<script>
-	// 将npm方式下载的echarts插件引入进来
-	import * as echarts from 'echarts';
-	export default {
-		data() {
-			return {
-				// 这里初始化一个null，待会儿用来充当echarts实例
-				myChart: null,
-			}
-		},
-		mounted(options) {
-			let that = this;
-			that.drawLines();
-		},
-		beforeDestroy() {
-			// 页面关闭时销毁echarts实例
-			this.myChart.clear();
-			this.myChart.dispose();
-		},
-		methods: {
-			async drawLines() {
-				// 这里是初始化的方式，通过id查询找到你的canvas标签
-				this.myChart = echarts.init(document.getElementById('myEcharts'));
-
-				let base = +new Date(1968, 9, 3);
-				let oneDay = 24 * 3600 * 1000;
-				let date = [];
-				let data = [Math.random() * 300];
-				for (let i = 1; i < 20000; i++) {
-					var now = new Date((base += oneDay));
-					date.push([now.getFullYear(), now.getMonth() + 1, now.getDate()].join('/'));
-					data.push(Math.round((Math.random() - 0.5) * 20 + data[i - 1]));
-				}
-				// 这里开始就是echarts的配置项了
-				let option = {
-					tooltip: {
-						trigger: 'axis',
-						position: function(pt) {
-							return [pt[0], '10%'];
-						}
-					},
-					title: {
-						left: 'center',
-						text: 'Large Area Chart'
-					},
-					toolbox: {
-						feature: {
-							dataZoom: {
-								yAxisIndex: 'none'
-							},
-							restore: {},
-							saveAsImage: {}
-						}
-					},
-					xAxis: {
-						type: 'category',
-						boundaryGap: false,
-						data: date
-					},
-					yAxis: {
-						type: 'value',
-						boundaryGap: [0, '100%']
-					},
-					dataZoom: [{
-							type: 'inside',
-							start: 0,
-							end: 10
-						},
-						{
-							start: 0,
-							end: 10
-						}
-					],
-					series: [{
-						name: 'Fake Data',
-						type: 'line',
-						symbol: 'none',
-						sampling: 'lttb',
-						itemStyle: {
-							color: 'rgb(255, 70, 131)'
-						},
-						areaStyle: {
-							color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
-									offset: 0,
-									color: 'rgb(255, 158, 68)'
-								},
-								{
-									offset: 1,
-									color: 'rgb(255, 70, 131)'
-								}
-							])
-						},
-						data: data
-					}]
-				}
-
-				// 这里不要忘记把option设置给echarts实例
-				this.myChart.setOption(option);
-
-				// 这里是用于窗口变化时的自适应，利用的是echarts自带的resize方法
-				// 如果你打印出来这个echarts实例，可以在函数里面找到这个方法
-				window.addEventListener('resize', () => {
-					this.myChart.resize()
-				});
-			},
-		},
-	}
-</script>
-
-<style>
-</style>

reado-app/components/ecahrts/line-echarts.vue

@@ -1,273 +0,0 @@
-<template>
-	<view>
-		<view id="echarts" class="echarts">
-		</view>
-	</view>
-</template>
-
-<script>
-	export default {
-		props: {
-			echartsData: Object
-		},
-		data() {
-			return {
-				option: {
-					padding: [15, 10, 0, 15],
-					legend: {
-						type: 'scroll',
-						pageIconSize: 18,
-						margin: 20,
-						itemGap: 20,
-						lineHeight: 20,
-						top: 0,
-					},
-					grid: {
-						bottom: '25%',
-						top: "50px",
-						left: "45px",
-						right: "30px"
-					},
-					xAxis: {
-						type: 'category',
-						data: [],
-						axisLabel: {
-							// interval: 60, // 自定义显示X轴坐标显示间隔
-							textStyle: {
-								color: '#626262',
-								fontSize: '10',
-							},
-							formatter: (value, index) => {
-								return value.substring(0, 9);
-							}
-						}
-					},
-					yAxis: {
-						type: 'value',
-						axisPointer: {
-							snap: true,
-							show: true,
-							type: 'line',
-							lineStyle: {
-								color: 'rgba(98, 98, 98, 0.7)',
-								type: 'solid'
-							}
-						}
-					},
-					series: [],
-					tooltip: {
-						trigger: 'axis',
-						axisPointer: {
-							type: 'cross',
-							label: {
-								show: false,
-								backgroundColor: 'rgba(98, 98, 98, 0.8)'
-							}
-						},
-						backgroundColor: 'rgba(50,50,50,0.5)',
-						position: function(pos, params, el, elRect, size) {
-							var obj = {
-								top: 10
-							};
-							obj[['left', 'right'][+(pos[0] < size.viewSize[0] / 2)]] = 30;
-							return obj;
-						},
-						formatter: function(params) {
-							let result = ''
-							for (let i in params) {
-								if (i == 0) {
-									result += params[i].axisValueLabel.substring(9, 17)
-								}
-								let value = '--'
-								if (params[i].data !== null) {
-									value = params[i].data
-								}
-								// #ifdef H5
-								result += '\n' + params[i].seriesName + '：' + value
-								// #endif
-
-								// #ifdef APP-PLUS
-								result += '<br/>' + params[i].marker + params[i].seriesName + '：' + value
-								// #endif
-							}
-							return result;
-						}
-					},
-					dataZoom: [{
-							type: 'slider',
-							show: true,
-							start: 95,
-							end: 100,
-							handleSize: 8
-						},
-						{
-							type: 'inside',
-							start: 95,
-							end: 100
-						},
-						{
-							type: 'slider',
-							show: false,
-							yAxisIndex: 0,
-							filterMode: 'empty',
-							width: 12,
-							height: '70%',
-							handleSize: 8,
-							showDataShadow: false,
-							left: '93%'
-						}
-					]
-				},
-				lineTime: null
-			}
-		},
-		onLoad() {
-
-		},
-		methods: {
-
-		}
-	}
-</script>
-
-<script module="echarts" lang="renderjs">
-	import {
-		nowDate,
-		timeToDate
-	} from '../../utils/date.js';
-	let myChart
-	export default {
-		beforeDestroy() {
-			clearInterval(this.lineTime)
-			this.lineTime = null
-		},
-		mounted() {
-			if (typeof window.echarts === 'function') {
-				this.initEcharts()
-			} else {
-				// 动态引入较大类库避免影响页面展示
-				const script = document.createElement('script')
-				// view 层的页面运行在 www 根目录，其相对路径相对于 www 计算
-				script.src = 'static/echarts.min.js'
-				script.onload = this.initEcharts.bind(this)
-				document.head.appendChild(script)
-			}
-			this.getEmit()
-		},
-		methods: {
-			initEcharts() {
-				myChart = echarts.init(document.getElementById('echarts'))
-
-				myChart.setOption(this.option)
-			},
-			getServerData() {
-				const chartData = this.echartsData.chartItemList
-
-				const timeData = chartData[0].valueTimeList
-				const time = timeData.map(item => {
-					return item.substring(0, 19).replaceAll('-', "")
-				})
-				const series = chartData.map(item => {
-					return {
-						type: 'line',
-						name: item.describe ? item.describe : item.itemName,
-						data: item.valueList
-					}
-				})
-				this.option.xAxis.data = time
-				this.option.series = series
-			},
-			getEmit() {
-				const {
-					bucketType,
-					bucketValue
-				} = this.echartsData
-				let time = null
-				switch (bucketType) {
-					case 0:
-						time = 86400000 * bucketValue
-
-						break;
-					case 1:
-						time = 3600000 * bucketValue
-
-						break;
-					case 2:
-						time = 60000 * bucketValue
-
-						break;
-					case 3:
-						time = 1000 * bucketValue
-
-						break;
-				}
-				this.getServerData()
-				this.lineTime = setInterval(() => {
-					const currentTime = nowDate();
-					let lastTime;
-					uni.getStorage({
-						key: 'sTime',
-						success: (o) => {
-							lastTime = o.data;
-						}
-					})
-					let chartParams = {
-						id: this.echartsData.id,
-						startTime: lastTime,
-						endTime: currentTime
-					}
-					uni.setStorage({
-						key: 'sTime',
-						data: currentTime
-					})
-					uni.$http.get('/chart/getChartById', chartParams).then(res => {
-						let chartItemList = res.data.data.chartItemList;
-						chartItemList.forEach((item, index) => {
-							if (item.itemId === this.echartsData.chartItemList[index].itemId) {
-								if (item.valueList.length !== 0) {
-									//执行将新数据添加进去，旧数据去除一个
-									this.echartsData.chartItemList[index].valueList.push(...item
-										.valueList)
-									// this.echartsData.chartItemList[index].valueList.slice(0, item
-									// 	.valueList.length)
-									this.echartsData.chartItemList[index].valueList.slice(item
-										.valueList.length, this.echartsData.chartItemList[
-											index].valueList.length)
-									this.echartsData.chartItemList[index].valueTimeList.push(...
-										item
-										.valueTimeList)
-									// this.echartsData.chartItemList[index].valueTimeList.splice(0,
-									// 	item
-									// 	.valueTimeList.length)
-									this.echartsData.chartItemList[index].valueTimeList.splice(
-										item
-										.valueTimeList.length, this.echartsData.chartItemList[
-											index].valueTimeList.length)
-
-								}
-							}
-						})
-						this.initEcharts()
-					})
-				}, time)
-			},
-			// updateEcharts(newValue, oldValue, ownerInstance, instance) {
-			// 	// 监听 service 层数据变更
-			// 	myChart.setOption(newValue)
-			// },
-			// onClick(event, ownerInstance) {
-			// 	// 调用 service 层的方法
-			// 	ownerInstance.callMethod('onViewClick', {
-			// 		test: 'test'
-			// 	})
-			// }
-		}
-	}
-</script>
-
-<style>
-	.echarts {
-		width: 100%;
-		height: 540rpx;
-	}
-</style>

reado-app/components/ecahrts/line-echarts1.vue

@@ -1,192 +0,0 @@
-<template>
-	<view class="charts-box">
-		<qiun-data-charts :eopts="opts" :chartData="chartData" :echartsH5="true" tooltipFormat="lineDemo" />
-	</view>
-</template>
-
-<script>
-	import {
-		nowDate,
-		timeToDate
-	} from '../../utils/date.js';
-	export default {
-		props: {
-			echartsData: Object
-		},
-		data() {
-			return {
-				chartData: {},
-				//您可以通过修改 config-ucharts.js 文件中下标为 ['line'] 的节点来配置全局默认参数，如都是默认参数，此处可以不传 opts 。实际应用过程中 opts 只需传入与全局默认参数中不一致的【某一个属性】即可实现同类型的图表显示不同的样式，达到页面简洁的需求。
-				opts: {
-					color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4",
-						"#ea7ccc"
-					],
-					padding: [15, 10, 0, 15],
-					legend: {
-						type: 'scroll',
-						pageIconSize: 18,
-						margin: 20,
-						itemGap: 20,
-						lineHeight: 20,
-						top: 0,
-					},
-					grid: {
-						bottom: '25%',
-						top: "50px",
-						left: "45px",
-						right: "30px"
-					},
-					xAxis: {
-						type: 'category',
-						axisLabel: {
-							interval: 60, // 自定义显示X轴坐标显示间隔
-							textStyle: {
-								color: '#626262',
-								fontSize: '10',
-							},
-							format:(value, index)=> {
-								console.log(value)
-							    return value + 'kg';
-							}
-						}
-					},
-					yAxis: {
-						type: 'value',
-						// axisPointer: {
-						// 	snap: true,
-						// 	show: true,
-						// 	type: 'line',
-						// 	lineStyle: {
-						// 		color: 'rgba(98, 98, 98, 0.7)',
-						// 		type: 'solid'
-						// 	}
-						// }
-					},
-					// tooltip: {
-					// 	trigger: 'axis',
-					// 	axisPointer: {
-					// 		type: 'cross',
-					// 		label: {
-					// 			show: false,
-					// 			backgroundColor: 'rgba(98, 98, 98, 0.8)'
-					// 		}
-					// 	},
-					// 	backgroundColor: 'rgba(50,50,50,0.5)'
-					// },
-					dataZoom: [
-						// {
-						// 	type: 'slider',
-						// 	show: true,
-						// 	xAxisIndex: [0],
-						// 	start: 90,
-						// 	end: 100,
-
-						// },
-						// {
-						// 	type: 'slider',
-						// 	show: true,
-						// 	yAxisIndex: [0],
-						// 	left: '93%',
-						// 	start: 60,
-						// 	end: 100
-						// },
-						{
-							type: 'inside',
-							xAxisIndex: [0],
-							start: 85,
-							end: 100
-							// preventDefaultMouseMove: false
-						},
-						// {
-						// 	type: 'inside',
-						// 	yAxisIndex: [0],
-						// 	start: 60,
-						// 	end: 100
-						// },
-
-					]
-				},
-				timeNum: 10,
-				lineTime: null,
-			};
-		},
-		mounted() {
-			this.getEmit();
-		},
-		beforeDestroy() {
-			clearInterval(this.lineTime)
-			this.lineTime = null
-		},
-		methods: {
-			getServerData() {
-				const chartData = this.echartsData.chartItemList
-
-				const timeData = chartData[0].valueTimeList
-				const time = timeData.map(item => {
-					return item.substring(0, 19).replaceAll('-', "")
-				})
-				const series = chartData.map(item => {
-					// let valueList=[];
-					// item.valueList.forEach(o=>{
-					//  valueList.push(o.split(""))
-					// })
-					return {
-						type: 'line',
-						name: item.describe ? item.describe : item.itemName,
-						data: item.valueList
-					}
-				})
-				this.opts.xAxis.data = time
-				let res = {
-					categories: time,
-					series: series
-				};
-				this.chartData = JSON.parse(JSON.stringify(res));
-			},
-			getEmit() {
-				const {
-					bucketType,
-					bucketValue
-				} = this.echartsData
-				let time = null
-				switch (bucketType) {
-					case 0:
-						time = 86400000 * bucketValue
-						this.timeNum = 4
-						break;
-					case 1:
-						time = 3600000 * bucketValue
-						this.timeNum = 13
-						break;
-					case 2:
-						time = 60000 * bucketValue
-						this.timeNum = 16
-						break;
-					case 3:
-						time = 1000 * bucketValue
-						this.timeNum = 19
-						break;
-				}
-				this.getServerData()
-				this.lineTime = setInterval(() => {
-					let chartParams = {
-						id: this.echartsData.id,
-						startTime: timeToDate(new Date().getTime() - 3600000),
-						endTime: nowDate()
-					}
-					uni.$http.get('/chart/getChartById', chartParams).then(res => {
-
-					})
-				}, time)
-			}
-		}
-	};
-</script>
-
-<style scoped>
-	/* 请根据实际需求修改父元素尺寸，组件自动识别宽高 */
-	.charts-box {
-		width: 100%;
-		height: 540rpx;
-	}
-</style>

reado-app/pages/homePage/index.vue

@@ -42,11 +42,8 @@
 </template>
 
 <script>
-	import lineEcharts from '../../components/ecahrts/line-echarts.vue'
 	import pieEcharts from '../../components/ecahrts/pie-echarts.vue'
 	import barEcharts from '../../components/ecahrts/bar-echarts.vue'
-	import demo from '../../components/ecahrts/demo.vue'
-	import demo1 from '../../components/ecahrts/demo1.vue'
 	import {
 		nowDate,
 		timeToDate,
@@ -56,11 +53,8 @@
 	} from '../../utils/date.js'
 	export default {
 		components: {
-			lineEcharts,
 			pieEcharts,
-			barEcharts,
-			demo,
-			demo1
+			barEcharts
 		},
 		data() {
 			return {

reado-app/static/webview/line-wv.html

@@ -65,7 +65,7 @@
 					data: [],
 					axisLabel: {
 						formatter: function(value) {
-							return value.substring(0, 10).split('-').join('')
+							return value.substring(11, 19) + "\n" + value.substring(0, 10).split('-').join('')
 						}
 					}
 				},
@@ -89,7 +89,6 @@
 					},
 					position: [0, 20],
 					formatter: function(params) {
-						console.log(params);
 						let result = ''
 						for (let i in params) {
 							if (i == 0) {
@@ -103,7 +102,6 @@
 							result += '\n' + params[i].seriesName + '：' +
 								value
 						}
-						console.log(result);
 						return result
 					}
 				},
@@ -116,7 +114,8 @@
 						type: 'slider',
 						show: true,
 						start: 0,
-						end: 10
+						end: 10,
+						bottom: 10
 					}
 				],
 				series: []
@@ -212,6 +211,8 @@
 								beforeSend: function(xhr) {
 									this.url =
 										`http://192.168.0.40:8081/chart/getChartById?id=${id}&startTime=${lastTime}&endTime=${currentTime}`
+									// this.url = window.location.origin +
+									// 	`/chart/getChartById?id=${id}&startTime=${startTime}&endTime=${endTime}` 
 									xhr.setRequestHeader("Authorization", "Bearer " +
 										token);
 									xhr.setRequestHeader("token", token);