IOT/SourceCode/ui/fbs-ui_app2/pages/onlineData/onlineData.vue

<template>
	<view>
		<qiun-title-bar title="7天排放趋势" />
		<view class="charts-box">
			<view class="charts-box">
				<qiun-data-charts
					type="area"
					:canvas2d="isCanvas2d"
					canvasId="chart51"
					:opts="{
						dataLabel: false,
						xAxis: {
							boundaryGap: 'justify',
						},
						extra: { area: { type: 'curve', addLine: true, gradient: true } },
					}"
					:chartData="data1"
				/>
			</view>
		</view>
		<view style="position: relative;">
			<qiun-title-bar :title="`企业监控列表 (${companyTotal})`" />
			<view class="org-name" @click="showOrgSelect">
				<text>{{ orgName }}</text>
				<u-icon class="icon" name="arrow-down-fill" color="#2979ff" size="18" customStyle="position: absolute; top: 0;right: 0;"></u-icon>
			</view>
			<tki-tree ref="tkitree" :selectParent="true" :range="orgData" :rangeKey="'label'" :idKey="'key'" confirmColor="#4e8af7" title="请选择区域" @confirm="orgSelectConfirm" @cancel="orgSelectCancel" />
			<scroll-view class="" :scroll-y="companyTotal > 0" @scroll="scroll" :scroll-top="scrollTop" style="height: 420px;">
				<view class="company-list_none" v-if="companyTotal == 0">
					<text>{{ noDataText }}</text>
					<image src="/static/image/no-data.png"></image>
				</view>
				<view v-if="companyTotal > 0" class="company-list">
					<view class="company-list_item" v-for="(item, index) in companyList" :key="index" @click="jump(item.company_id, item.name)">
						<!-- <view class="img" @click="jumpMap(item.company_id)"><image style="width: 100%;height: 100%;" src="/static/image/blue-location.png"></image></view> -->
						<view class="left">
							<text class="name">{{ item.name }}</text>
							<text class="address">{{ item.address }}</text>
						</view>
						<text class="right">
							设施:
							<text class="num">{{ item.monitor1.length }}</text>
							处
						</text>
					</view>
				</view>
			</scroll-view>
		</view>

		<tabbar :currentTab="2"></tabbar>
	</view>
</template>

<script>
import api from "@/common/api.js";
import { log } from "@/utils/base.js";
import tabbar from "@/components/tabbar";
import tkiTree from "@/components/tki-tree/tki-tree.vue";
export default {
	components: {
		tabbar,
		tkiTree,
	},
	data() {
		return {
			data1: { categories: [], series: [] },
			orgData: [],
			orgId: "",
			orgName: "",
			needQuery: true,
			isQuerying: false,
			companyList: [],
			companyTotal: 0,
			noDataText: "",
			scrollTop: 0,
			oldScrollTop: 0,
			search: {
				pageIndex: 1,
				pageSize: 10,
				params: {
					org_id: "",
				},
			},
			//#ifndef MP-WEIXIN
			isCanvas2d: false,
			//#endif
			//#ifdef MP-WEIXIN
			isCanvas2d: true,
			//#endif
		};
	},
	mounted() {
		this.getInfo();
		this.getOrg();
	},
	watch: {
		orgId(newV, oldV) {
			this.getCompany(newV);
		},
	},
	methods: {
		jump(id, name) {
			uni.navigateTo({
				url: `/pages_company/company?id=${id}&name=${name}`,
			});
		},
		jumpMap(id) {
			uni.navigateTo({
				url: `/pages_map/map?id=${id}`,
			});
		},
		getInfo() {
			api.getSmokeTendency(0).then(({ data }) => {
				//this.data1 = { categories: [], series: [] };
				data = data.chartData[0];
				this.data1.categories = data.categories.slice(-7).map(v => {
					return v.substr(5);
				});
				this.data1.series = data.series.map(v => {
					return {
						name: v.name.replace("排放总量", ""),
						data: v.data.slice(-7),
					};
				});
				//console.log("=========>>>>", this.data1);
			});
		},
		getOrg() {
			api.getOrgList().then(({ data }) => {
				this.orgData = data;
				this.orgName = data[0].label;
				this.orgId = data[0].key;
				//console.log(this.orgData);
			});
		},
		getCompany(id) {
			this.noDataText = "";
			if (this.needQuery || id) {
				if (id) {
					this.companyList = [];
					this.search.pageIndex = 1;
					this.needQuery = true;
					this.goTop();
				}
				id = id || this.orgId;
				this.search.params.org_id = id;
				api.getCompanyListByOrg(this.search).then(({ rows, total }) => {
					//console.log("=====>", rows, total);
					this.companyTotal = total;
					if (total == 0) {
						this.goTop();
						this.noDataText = "未查询到企业";
					}
					if ((this.search.pageIndex - 1) * this.search.pageSize < total) {
						this.companyList.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 <= 550 && !this.isQuerying) {
				log("到达底部");
				this.isQuerying = true;
				this.search.pageIndex++;
				this.getCompany();
			}
		},
		goTop() {
			this.scrollTop = this.oldScrollTop;
			this.$nextTick(() => {
				this.scrollTop = 0;
			});
		},
		showOrgSelect() {
			this.$refs.tkitree._show();
		},
		orgSelectCancel() {
			this.$refs.tkitree._hide();
		},
		orgSelectConfirm(e) {
			this.orgId = e[0].key;
			this.orgName = getOrgName(e[0]);
			function getOrgName(data) {
				let str = `${data.label}${str ? `/${str}` : ""}`;
				let str1 = "";
				if (data.parents && data.parents.length) {
					data.parents.forEach(v => {
						str1 += `${v.label}/`;
					});
				}
				return `${str1}${str}`;
			}
			console.log(e);
		},
	},
};
</script>

<style lang="scss">
.charts-box {
	width: 100%;
	height: 230px;
}
.org-name {
	position: absolute;
	top: 12px;
	right: 20px;
	color: #666;
	font-size: 14px;
	color: $uni-color-primary;
	padding-right: 23px;
	.icon {
		position: absolute;
		top: 0;
		right: 0;
	}
}
.company-list {
	border: 1px solid $uni-color-primary;
	border-radius: 5px;
	margin: 5px 10px;
	&_none {
		margin-top: 10%;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 20px;
		color: $uni-color-primary;
		flex-direction: column;
	}
	&_item {
		&:not(:last-child) {
			border-bottom: 1px dashed $uni-color-primary;
		}
		display: flex;
		cursor: pointer;
		padding: 10px 15px;
		justify-content: space-between;
		align-items: center;
		color: lighten($uni-color-primary, 15%);
		position: relative;
		.img {
			position: absolute;
			top: 5px;
			right: 10px;
			width: 25px;
			height: 25px;
			border-radius: 50%;
		}
		.left {
			display: flex;
			flex-direction: column;
			.name {
				font-weight: 600;
			}
		}
		.right {
			min-width: 100px;
			text-align: right;
			.num {
				font-weight: 600;
				margin: 0 8px;
			}
		}
	}
}
</style>