IOT/SourceCode/ui/fbs-ui_app2/pages/home/components/over.vue

<template>
	<view>
		<qiun-title-bar title="超标区域分析" />
		<view class="charts-box"><qiun-data-charts type="column" canvasId="chart1" :canvas2d="isCanvas2d" :opts="{ dataLabel: false, xAxis: { boundaryGap: 'center' }, extra: { column: { type: 'stack', width: 15, activeBgColor: '#000000', activeBgOpacity: 0.08, linearType: 'custom', seriesGap: 5, linearOpacity: 0.5, barBorderCircle: true } } }" :chartData="data1" /></view>
		<qiun-title-bar :title="`超标商户概览 (${overTotal})`" />
		<scroll-view :scroll-y="overTotal > 0" @scroll="scroll" :scroll-top="scrollTop" style="height: 390px;">
			<view class="over-list_none" v-if="overTotal == 0">
				<text>没有超标商户</text>
				<image src="/static/image/no-data.png"></image>
			</view>
			<view class="over-list" v-if="overTotal > 0">
				<view class="over-list_item" v-for="(item, index) in overList" :key="index" @click="jump(item.companyId, item.name)">
					<view class="left">
						<text class="name">{{ item.name }}</text>
						<text class="address">{{ item.address }}</text>
					</view>
					<view class="right">
						<text class="num">{{ item.times }}</text>
						<text>次</text>
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>
<script>
import api from "@/common/api.js";
import { log } from "@/utils/base.js";
export default {
	name: "over",
	data() {
		return {
			needQuery: true,
			isQuerying: false,
			overList: [],
			overTotal: 0,
			scrollTop: 0,
			oldScrollTop: 0,
			data1: { categories: [], series: [] },
			search: {
				pageIndex: 1,
				pageSize: 10,
				params: { type: 0 },
			},
			//#ifndef MP-WEIXIN
			isCanvas2d: false,
			//#endif
			//#ifdef MP-WEIXIN
			isCanvas2d: true,
			//#endif
		};
	},
	mounted() {
		//console.log(this.isCanvas2d);
		this.getInfo();
		this.query();
	},
	methods: {
		jump(id, name) {
			uni.navigateTo({
				url: `/pages_company/company?id=${id}&name=${name}`,
			});
		},
		getInfo() {
			api.getOverdueByOrg(0).then(({ data }) => {
				data = data.chartData[0];
				this.data1.categories = data.categories;
				this.data1.series = data.series;
				// .map(v => {
				// 	return {
				// 		name: v.name.replace("排放总量", ""),
				// 		data: v.data,
				// 	};
				// });
				//console.log("=========>>>>", this.data1);
			});
		},
		query(nextPage) {
			if (this.needQuery || !nextPage) {
				if (!nextPage) {
					this.overList = [];
					this.goTop();
				}
				api.getOverCompany(this.search).then(({ rows, total }) => {
					this.$emit("changeOver", total);
					this.$store.commit("setOverNum", total);
					this.overTotal = total;
					if ((this.search.pageIndex - 1) * this.search.pageSize < total) {
						this.overList.push(...rows);
						this.isQuerying = false;
					} else {
						this.needQuery = false;
					}
				});
			}
		},
		scroll(e) {
			this.oldScrollTop = e.detail.scrollTop;
			//console.log(e.detail.scrollHeight - e.detail.scrollTop, e.detail.scrollHeight, e.detail.scrollTop);
			if (e.detail.scrollHeight - e.detail.scrollTop <= 500 && !this.isQuerying) {
				log("到达底部");
				this.isQuerying = true;
				this.search.pageIndex++;
				this.query(true);
			}
		},
		goTop() {
			this.scrollTop = this.oldScrollTop;
			this.$nextTick(() => {
				this.scrollTop = 0;
			});
		},
	},
};
</script>

<style lang="scss">
.charts-box {
	width: 100%;
	height: 230px;
}
.over-list {
	border: 1px solid $uni-color-primary;
	border-radius: 5px;
	margin: 5px 10px;
	&_none {
		margin-top: 10%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		font-size: 20px;
		color: $uni-color-primary;
	}
	&_item {
		&:not(:last-child) {
			border-bottom: 1px dashed $uni-color-primary;
		}
		display: flex;
		padding: 10px 15px;
		justify-content: space-between;
		align-items: center;
		color: lighten($uni-color-primary, 15%);
		.left {
			display: flex;
			flex-direction: column;
			.name {
				font-weight: 600;
			}
		}
		.right {
			.num {
				font-weight: 600;
				margin-right: 10px;
			}
		}
	}
}
</style>