IOT/SourceCode/ui/fbs-ui_app2/pages_company/components/charts.vue

<template>
	<view class="container">
		<qiun-title-bar title="浓度超标次数统计图" />
		<u--form labelPosition="left">
			<u-form-item
				label="查询日期"
				labelWidth="80"
				borderBottom
				@click="
					showCalendarFun(0);
					hideKeyboard();
				"
			>
				<u--input v-model="date1_1" disabled disabledColor="#ffffff" placeholder="请选择查询日期" border="none"></u--input>
				<u-icon slot="right" name="arrow-right"></u-icon>
			</u-form-item>
		</u--form>
		<view class="charts-box"><qiun-data-charts :canvas2d="isCanvas2d" canvasId="chart41" type="line" :opts="{ dataLabel: true, legend: {}, xAxis: { disableGrid: true }, yAxis: { gridType: 'dash', dashLength: 2 }, extra: { line: { type: 'straight', width: 2 } } }" :chartData="data1" /></view>
		<qiun-title-bar title="商户排放总量统计" />
		<u--form labelPosition="left">
			<u-form-item
				label="查询日期"
				labelWidth="80"
				borderBottom
				@click="
					showCalendarFun(1);
					hideKeyboard();
				"
			>
				<u--input v-model="date2_1" disabled disabledColor="#ffffff" placeholder="请选择查询日期" border="none"></u--input>
				<u-icon slot="right" name="arrow-right"></u-icon>
			</u-form-item>
		</u--form>
		<view class="charts-box">
			<qiun-data-charts
				type="area"
				:canvas2d="isCanvas2d"
				canvasId="chart2"
				:opts="{
					dataLabel: false,
					legend: {},
					xAxis: { disableGrid: true },
					yAxis: { gridType: 'dash', dashLength: 2 },
					extra: {
						area: {
							type: 'curve',
							opacity: 0.2,
							addLine: true,
							width: 2,
							gradient: true,
						},
					},
				}"
				:chartData="data2"
			/>
		</view>
		<u-calendar :show="showCalendar" :defaultDate="alarmDateArr" :minDate="calendarMinDate" :maxDate="calendarMaxDate" :allowSameDay="true" :closeOnClickOverlay="true" mode="range" @confirm="calendarConfirm" :maxRange="7" @close="calendarClose" startText="开始时间" endText="结束时间" confirmDisabledText="请选择查询日期范围"></u-calendar>
	</view>
</template>
<script>
import moment from "moment";
import api from "@/common/api.js";
export default {
	data() {
		return {
			date1: [moment().add(-3, "d"), moment()],
			data1: { categories: [], series: [] },
			date2: [moment().add(-3, "d"), moment()],
			data2: { categories: [], series: [] },
			alarmDateArr: [],
			calendarMinDate: moment()
				.add(-10, "d")
				.format("YYYY-MM-DD"),
			calendarMaxDate: moment()
				.add(1, "d")
				.format("YYYY-MM-DD"),
			showCalendar: false,
			calendarIndex: 0,
			//#ifndef MP-WEIXIN
			isCanvas2d: false,
			//#endif
			//#ifdef MP-WEIXIN
			isCanvas2d: true,
			//#endif
		};
	},
	onLoad() {},
	computed: {
		date1_1: {
			get() {
				return `${this.date1[0].format("YYYY-MM-DD")} 至 ${this.date1[1].format("YYYY-MM-DD")}`;
			},
			set() {},
		},
		date2_1: {
			get() {
				return `${this.date2[0].format("YYYY-MM-DD")} 至 ${this.date2[1].format("YYYY-MM-DD")}`;
			},
			set() {},
		},
	},
	props: {
		companyId: {
			type: String,
			required: true,
		},
	},
	mounted() {
		this.date1 = [moment().add(-6, "d"), moment()];
		this.date2 = [moment().add(-6, "d"), moment()];
		//#ifdef MP-WEIXIN
		this.isCanvas2d = true;
		//#endif
		console.log(this.isCanvas2d);
	},
	watch: {
		date1() {
			this.getInfo1();
		},
		date2() {
			this.getInfo2();
		},
	},
	methods: {
		getInfo1() {
			api.getOverWarnBar(`10_${this.companyId}`, this.date1[0].format("YYYYMMDD"), this.date1[1].format("YYYYMMDD")).then(({ data }) => {
				this.data1 = data.chartData[0];
			});
		},

		getInfo2() {
			api.getOverWarnBar(`10_${this.companyId}`, this.date2[0].format("YYYYMMDD"), this.date2[1].format("YYYYMMDD")).then(({ data }) => {
				this.data2 = data.chartData[0];
			});
		},
		hideKeyboard() {
			uni.hideKeyboard();
		},
		showCalendarFun(index) {
			this.showCalendar = true;
			this.calendarIndex = index;
			switch (this.calendarIndex) {
				case 0:
					this.alarmDateArr = Object.assign([], this.date1);
					break;
				case 1:
					this.alarmDateArr = Object.assign([], this.date2);
					break;
			}
		},
		calendarConfirm(e) {
			this.showCalendar = false;
			switch (this.calendarIndex) {
				case 0:
					this.date1 = [moment(e[0]), moment(e[e.length - 1])];
					break;
				case 1:
					this.date2 = [moment(e[0]), moment(e[e.length - 1])];
					break;
			}
		},
		calendarClose() {
			this.showCalendar = false;
		},
	},
};
</script>

<style>
.container {
	padding: 0 10px;
	font-size: 14px;
	line-height: 24px;
}
.charts-box {
	width: 100%;
	height: 260px;
}
</style>