|
|
@@ -72,8 +72,11 @@
|
|
|
canvas-id="temperatureChart"
|
|
|
id="temperatureChart"
|
|
|
class="chart"
|
|
|
+ @touchstart="touchLineA($event)"
|
|
|
+ @touchmove="moveLineA($event)"
|
|
|
+ @touchend="touchEndLineA($event)"
|
|
|
+ disable-scroll="true"
|
|
|
></canvas>
|
|
|
- <!-- <baseCharts /> -->
|
|
|
</view>
|
|
|
<view class="no-data" v-else>
|
|
|
<text>暂无数据</text>
|
|
|
@@ -108,7 +111,9 @@
|
|
|
<scroll-view class="scroll-column" scroll-x="true">
|
|
|
<view class="scroll-content">
|
|
|
<view class="table-row">
|
|
|
- <view class="table-cell header">{{ activeChartInfo.name + '(' + activeChartInfo.unit + ')' }}</view>
|
|
|
+ <view class="table-cell header">{{
|
|
|
+ activeChartInfo.name + "(" + activeChartInfo.unit + ")"
|
|
|
+ }}</view>
|
|
|
</view>
|
|
|
<view class="table-row" v-for="(item, idx) in tableList" :key="idx">
|
|
|
<view class="table-cell">{{ item[activeChartInfo.title] }}</view>
|
|
|
@@ -118,13 +123,23 @@
|
|
|
</view>
|
|
|
|
|
|
<view class="pagination">
|
|
|
- <view class="page-item prev" @click="prevPage" :class="{ disabled: currentPage === 1 }">上一页</view>
|
|
|
+ <view
|
|
|
+ class="page-item prev"
|
|
|
+ @click="prevPage"
|
|
|
+ :class="{ disabled: currentPage === 1 }"
|
|
|
+ >上一页</view
|
|
|
+ >
|
|
|
<view class="page-info">
|
|
|
<text class="curret-page">{{ currentPage }}</text>
|
|
|
<text>/</text>
|
|
|
<text>{{ totalPages }}</text>
|
|
|
</view>
|
|
|
- <view class="page-item next" @click="nextPage" :class="{ disabled: currentPage >= totalPages }">下一页</view>
|
|
|
+ <view
|
|
|
+ class="page-item next"
|
|
|
+ @click="nextPage"
|
|
|
+ :class="{ disabled: currentPage >= totalPages }"
|
|
|
+ >下一页</view
|
|
|
+ >
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
@@ -138,6 +153,7 @@ export default {
|
|
|
onLoad(options) {
|
|
|
const deviceInfo = JSON.parse(decodeURIComponent(options.deviceInfo));
|
|
|
console.log(deviceInfo, "deviceInfo");
|
|
|
+ this.eleKey = options.eleKey || "";
|
|
|
this.initDateRange(deviceInfo.uptime);
|
|
|
this.deviceInfo = deviceInfo;
|
|
|
this.getChartData();
|
|
|
@@ -165,14 +181,15 @@ export default {
|
|
|
series: [],
|
|
|
},
|
|
|
activeChartInfo: {},
|
|
|
+ eleKey: "",
|
|
|
};
|
|
|
},
|
|
|
- computed: {
|
|
|
- totalPages() {
|
|
|
- return Math.ceil(this.total / this.pageSize);
|
|
|
- }
|
|
|
+ computed: {
|
|
|
+ totalPages() {
|
|
|
+ return Math.ceil(this.total / this.pageSize);
|
|
|
},
|
|
|
- methods: {
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
initDateRange(timestamp) {
|
|
|
if (!timestamp) {
|
|
|
const today = new Date();
|
|
|
@@ -197,12 +214,12 @@ export default {
|
|
|
initChart() {
|
|
|
const ctx = uni.createCanvasContext("temperatureChart", this);
|
|
|
const currentEle = this.eleTabs[this.eleActive];
|
|
|
- console.log(currentEle, 'currentEle')
|
|
|
- currentEle.data.forEach(item => {
|
|
|
- if (item.value === '/') {
|
|
|
- item.value = '0'
|
|
|
+ console.log(currentEle, "currentEle");
|
|
|
+ currentEle.data.forEach((item) => {
|
|
|
+ if (item.value === "/") {
|
|
|
+ item.value = "0";
|
|
|
}
|
|
|
- })
|
|
|
+ });
|
|
|
const series = [
|
|
|
{
|
|
|
name: currentEle.name,
|
|
|
@@ -245,8 +262,9 @@ export default {
|
|
|
axisLineColor: "#E4E7ED",
|
|
|
disableGrid: true,
|
|
|
fontColor: "#656565",
|
|
|
- tickCount: 5,
|
|
|
fontSize: 10,
|
|
|
+ itemCount: 5,
|
|
|
+ scrollShow: true,
|
|
|
},
|
|
|
yAxis: {
|
|
|
splitNumber: 4,
|
|
|
@@ -258,6 +276,8 @@ export default {
|
|
|
fontSize: 10,
|
|
|
},
|
|
|
dataLabel: false,
|
|
|
+ enableScroll: true,
|
|
|
+ background: "#FFFFFF",
|
|
|
extra: {
|
|
|
line: {
|
|
|
type: "curve",
|
|
|
@@ -267,6 +287,22 @@ export default {
|
|
|
},
|
|
|
});
|
|
|
},
|
|
|
+ touchLineA(e) {
|
|
|
+ this.temperatureChart.scrollStart(e);
|
|
|
+ },
|
|
|
+ moveLineA(e) {
|
|
|
+ this.temperatureChart.scroll(e);
|
|
|
+ },
|
|
|
+ touchEndLineA(e) {
|
|
|
+ this.temperatureChart.scrollEnd(e);
|
|
|
+ //下面是toolTip事件，如果滚动后不需要显示，可不填写
|
|
|
+ // this.temperatureChart.showToolTip(e, {
|
|
|
+ // format: function(item, category) {
|
|
|
+ // console.log(item, 'iyee', e)
|
|
|
+ // return category + ' ' + item.name + ':' + item.data
|
|
|
+ // }
|
|
|
+ // });
|
|
|
+ },
|
|
|
|
|
|
// 打开日期选择器
|
|
|
openDatePicker() {
|
|
|
@@ -384,8 +420,11 @@ export default {
|
|
|
if (res && Array.isArray(res) && res.length > 0) {
|
|
|
this.eleTabs = res;
|
|
|
this.hasData = true;
|
|
|
- this.activeChartInfo = this.eleTabs[this.eleActive];
|
|
|
- console.log(this.activeChartInfo, 'activeChartInfo')
|
|
|
+ this.activeChartInfo =
|
|
|
+ this.eleTabs.find((item) => item.title === this.eleKey) ||
|
|
|
+ this.eleTabs[0];
|
|
|
+ this.eleActive = this.eleTabs.indexOf(this.activeChartInfo);
|
|
|
+ console.log(this.activeChartInfo, "activeChartInfo");
|
|
|
this.$nextTick(() => {
|
|
|
this.initChart();
|
|
|
});
|
