bolinscreening-miniapp/pages/chart/index.vue

<template>
	<div>
		<scroll-view>
			<div class="chart-1">
				<div class="chart-title"><span>裸眼数据</span></div>
				<qiun-data-charts type="line" :chartData="chartsDataA" :opts="chartsOpts" :canvasId="chartsOpts.canvasId"  :canvas2d="true" :inScrollView="true" />
			</div>
			<div class="line"></div>
			<div class="chart-1">
				<div class="chart-title"><span>戴镜数据</span></div>
				<qiun-data-charts type="line" :chartData="chartsDataB" :opts="chartsOpts" :canvasId="chartsOpts.canvasId"  :canvas2d="true" :inScrollView="true" />
			</div>
			<div class="line"></div>
			<div class="chart-1">
				<div class="chart-title"><span>屈光数据-球镜</span></div>
				<qiun-data-charts type="line" :chartData="chartsDataC" :opts="chartsOpts1" :canvasId="chartsOpts.canvasId"  :canvas2d="true" :inScrollView="true" />
			</div>
			<div class="line"></div>
			<div class="chart-1">
				<div class="chart-title"><span>屈光数据-柱镜</span></div>
				<qiun-data-charts type="line" :chartData="chartsDataD" :opts="chartsOpts2" :canvasId="chartsOpts.canvasId"  :canvas2d="true" :inScrollView="true" />
			</div>
			<div class="line"></div>
			<div class="chart-1">
				<div class="chart-title"><span>屈光数据-轴位</span></div>
				<qiun-data-charts type="line" :chartData="chartsDataE" :opts="chartsOpts3" :canvasId="chartsOpts.canvasId"  :canvas2d="true" :inScrollView="true" />
			</div>
		</scroll-view>
		<!-- 名词解释弹窗 -->
		<uni-popup ref="popupShow" type="bottom">
			<div class="popup-content">
				<span class="close-btn" @click="$refs.popupShow.close()"><i class="iconfont icon-quxiaoguanbi"></i></span>
				<div class="bl-describe-con">
					<div class="describe-title">名词解释</div>
					<div class="describe-box">
						<div class="describe-tag">
							<span>
								<i>{{ popupData.title }}</i>
							</span>
						</div>
						<img v-if="popupData.img" class="describe-img" :src="baseUrl + '/device/' + popupData.img" />
						<scroll-view scroll-y="true" class="describe-text"><div v-html="popupData.content"></div></scroll-view>
					</div>
				</div>
			</div>
		</uni-popup>
	</div>
</template>

<script>
import methods from './methods.js';
import uniPopup from '@/components/uni-popup/uni-popup';
import qiunDataCharts from '@/components/qiun-data-charts/qiun-data-charts';
export default {
	components: {
		uniPopup,
		qiunDataCharts
	},
	data() {
		return {
			imgUrl: '',
			baseUrl: '',
			cWidth: '',
			cHeight: '',
			patientId: '',
			data: '',
			popupData: {
				title: '',
				img: '',
				content: ''
			},
			chartsDataA: {},
			chartsDataB: {},
			chartsDataC: {},
			chartsDataD: {},
			chartsDataE: {},
			chartsOpts: {},
			chartsOpts1: {},
			chartsOpts2: {},
			chartsOpts3: {}
		};
	},
	onLoad(options) {
		let app = getApp();
		this.imgUrl = app.globalData.imgUrl;
		this.baseUrl = app.globalData.baseUrl;
		this.patientId = options.id;
		this.cWidth = uni.upx2px(750);
		this.cHeight = uni.upx2px(600);
		this.inData();
	},
	onShow() {},
	methods: {
		...methods
	}
};
</script>
<style lang="scss" scoped>
@import './style.scss';
</style>