zhgdyunapp_vue3/pages/homePage/components/progressCurve.vue

<template>
	<view class="container">
		<view class="right-top_header">
			<view class="right-top_header_right">
				<view class="titleItem">
					<view>
						切换计划
					</view>
					<view class="regionText">
						<picker @click="$refs.locationTree1._show()" :disabled="true">
							<view v-if="planTreeInfo.planPbsName==''" style="color: gray;">
								请选择
							</view>
							<view v-else>
								<view style="width: 98%;text-align: right" class="ellipsis">
									{{planTreeInfo.planPbsName}}
								</view>
							</view>
						</picker>
						<image src="/static/icon-right-ccc.png"
							style="width: 10rpx;height: 20rpx;display: inline-block;"></image>
					</view>
				</view>
				<view class="titleItem">
					<view>
						切换WBS/TASK
					</view>
					<view class="regionText">
						<picker @click="$refs.locationTree2._show()" :disabled="true">
							<view v-if="planTreeInfo.planWbsTaskName==''" style="color: gray;">
								请选择
							</view>
							<view v-else>
								<view style="width: 98%;text-align: right" class="ellipsis">
									{{planTreeInfo.planWbsTaskName}}
								</view>
							</view>
						</picker>
						<image src="/static/icon-right-ccc.png"
							style="width: 10rpx;height: 20rpx;display: inline-block;"></image>
					</view>
				</view>
			</view>
			<view class="right-top_header_left">
				<view @click="onDeviceYearClick(item)" :class="{ active: deviceYearInfo.id == item.id }"
					v-for="item in deviceYearList" :key="item.id">
					{{ item.year }}
				</view>
			</view>
		</view>
		<view class="minCharts_container">
			<view class="container_title">
				进度曲线
			</view>
			<view class="minCharts">
				<view class="" v-if="columnarChart1.categories.length > 0">
					<!-- <u-charts canvas-id="columnarChart1" chartType="mix" :opts="columnarChart1" ref="columnarChart1"
						:cWidth="cWidth" :cHeight="cHeight" :legends="true" /> -->
					<qiun-data-charts type="mix" :ontouch="true" :opts="opts" :chartData="columnarChart1" />
				</view>
				<view class="no_data" v-else>
					<image src="/static/bthgIcon/noData.png"></image>
					<view>暂无数据</view>
				</view>
			</view>
		</view>
		<!-- 检查部位 -->
		<tki-tree style="z-index: 9999;" ref="locationTree1" @confirm="(val) => onPlanPbsChange(val)" idKey='id'
			:range="planPbsTreeList" rangeKey="name" confirmColor="#4e8af7" :selectParent="true" />
		<tki-tree style="z-index: 9999;" ref="locationTree2" @confirm="(val) => onPlanWbsTaskChange(val)" idKey='id'
			:range="planTreeList" rangeKey="jobName" confirmColor="#4e8af7" :selectParent="true" />
	</view>
</template>

<script>
	import uCharts from '@/components/u-charts/component.vue';
	import {
		pxToRpx,
		dateformat
	} from "@/utils/tool.js";
	export default {
		components: {
			uCharts,
		},
		data() {
			return {
				projectSn: "",
				cWidth: 0,
				cHeight: 0,
				safeDetailInfo: {},
				safeProblemList: [],
				columnarChart1: {
					categories: [],
					series: [{
							name: '当期计划',
							index: 1,
							color: "#80ABD4",
							type: "column",
							data: []
						},
						{
							name: '当期实际',
							index: 1,
							color: "#D3D1FC",
							type: "column",
							data: []
						},
						{
							name: '累计计划',
							type: "line",
							color: "#0458AA",
							data: []
						},
						{
							name: '累计实际',
							type: "line",
							color: "#08B1CA",
							data: []
						},
					]
				},
				opts: {},

				deviceYearInfo: {},
				deviceYearList: [],
				planTreeList: [],
				planPbsTreeList: [],
				planTreeInfo: {
					planPbsId: '',
					planPbsName: '',
					planWbsTaskId: '',
					planWbsTaskName: '',
				}
			}
		},
		created() {

			const that = this;
			// uni.getSystemInfo({
			// 	success: function(res) {
			// 		that.cWidth = res.windowWidth - pxToRpx(28) - pxToRpx(24);
			// 	}
			// });
		},
		mounted() {
			const that = this;
			uni.getSystemInfo({
				success: function(res) {
					console.log(res.windowWidth);
					console.log(11111, res.windowHeight);
					that.cWidth = res.windowWidth - uni.upx2px(36 + 14) - uni.upx2px(30 + 14) - uni.upx2px(24 +
						14);
					that.cHeight = uni.upx2px(530)
				}
			});
			this.projectSn = JSON.parse(uni.getStorageSync('projectDetail')).projectSn;
			// this.getDeviceYearList();
			this.getPlanPbsTreeList();
		},
		onShow() {

		},
		onLoad(options) {

		},
		methods: {
			getPlanRecordTreeList() {
				const that = this;
				let data = {
					projectSn: this.projectSn,
					pageNo: 1,
					pageSize: -1,
					pbsId: this.planTreeInfo.planPbsId
				};
				this.sendRequest({
					url: 'xmgl/planRecord/tree/page',
					data,
					method: 'get',
					success(result) {
						if (result.success) {
							that.planTreeList = result.result.records.map((item, index) => {
								if (index == 0) {
									item.checked = true;
									that.planTreeInfo.planWbsTaskId = item.id;
									that.planTreeInfo.planWbsTaskName = item.jobName
								}
								return item
							});
							that.getDeviceYearList();
						}
					}
				})
			},
			getPlanPbsTreeList() {
				const that = this;
				let data = {
					projectSn: this.projectSn,
					// title: this.switchScheduleInfo.title,
					pageNo: 1,
					pageSize: -1
				};
				this.sendRequest({
					url: 'xmgl/planPbs/tree/page',
					data,
					method: 'get',
					success(result) {
						if (result.success) {
							that.planPbsTreeList = result.result.records.map((item, index) => {
								if (index == 0) {
									item.checked = true;
									that.planTreeInfo.planPbsId = item.id;
									that.planTreeInfo.planPbsName = item.name
								}
								return item
							});
							that.getPlanRecordTreeList();
						}
					}
				})
			},
			onPlanPbsChange(val) {
				this.planTreeInfo.planPbsId = val[0].id;
				this.planTreeInfo.planPbsName = val[0].name
				this.getPlanRecordTreeList();
			},
			onPlanWbsTaskChange(val) {
				this.planTreeInfo.planWbsTaskId = val[0].id;
				this.planTreeInfo.planWbsTaskName = val[0].jobName;
				console.log(val, 33333334444)
				this.getDeviceYearList();
			},
			//查询装置主进度计划年份信息
			getDeviceYearList() {
				// const that = this;
				// let data = {
				// 	recordId: this.planTreeInfo.planWbsTaskId,
				// 	projectSn: this.projectSn,
				// 	pageNo: 1,
				// 	pageSize: -1,
				// 	deviceUnitId: '',
				// 	year: ""
				// };
				// console.log(this.projectSn)
				// this.sendRequest({
				// 	url: 'xmgl/planRecord/getPlanCurve',
				// 	data,
				// 	method: 'get',
				// 	success(res) {
				// 		if (res.code == 200) {
				// 			that.deviceYearList = res.result.reduce((prev, cur) => {
				// 					const findIndex = prev.findIndex(item => item.year == dateformat(cur
				// 						.time, 'yyyy'));
				// 					if (findIndex == -1) {
				// 						prev.push({
				// 							id: prev.length,
				// 							year: dateformat(cur.time, 'yyyy'),
				// 						});
				// 					}
				// 					return prev;
				// 				},
				// 				[]);
				// 			that.deviceYearInfo = that.deviceYearList[0];
				// 			console.log(
				// 				'查询装置主进度计划年份信息', that.deviceYearList);
				// 			that.getDeviceScheduleList();
				// 		}
				// 	}
				// })
				this.deviceYearInfo = {
					id: '',
					year: '全部'
				};
				this.getDeviceScheduleList();
			},
			onDeviceYearClick(row) {
				if (row.id == this.deviceYearInfo.id) return;
				this.deviceYearInfo = row;
				this.getDeviceScheduleList();
			},
			getDeviceScheduleList() {
				const that = this;
				let data = {
					projectSn: this.projectSn,
					pageNo: 1,
					pageSize: -1,
					deviceUnitId: '',
					recordId: this.planTreeInfo.planWbsTaskId,
					year: this.deviceYearInfo.year == '全部' ? '' : this.deviceYearInfo.year
				};
				console.log(this.projectSn)
				this.sendRequest({
					url: 'xmgl/planRecord/getPlanCurve',
					data,
					method: 'get',
					success(res) {
						if (res.code == 200) {
							that.deviceYearList = res.result.reduce((prev, cur) => {
									const findIndex = prev.findIndex(item => item.year == dateformat(cur
										.time, 'yyyy'));
									if (findIndex == -1) {
										prev.push({
											id: prev.length,
											year: dateformat(cur.time, 'yyyy'),
										});
									}
									return prev;
								},
								[]);
							that.deviceYearInfo = that.deviceYearList[0];
							const resultList = res.result;
							
							that.opts = {
								color: [
									"#5181F6",
									"#00DBB6",
									"#F67F51",
									"#FF515A",
									"#8B5CFF",
									"#00CA69",
								],
								width: that.cWidth,
								height: that.cHeight,
								
								padding: [uni.upx2px(30), 0, uni.upx2px(20), uni.upx2px(20)],
								enableScroll: true,
								animation: false,
								duration:  0,
								legend: {
									show: true,
									itemGap: uni.upx2px(10),
								},
								fontSize: uni.upx2px(22),
							
								dataLabel: false,
								dataPointShape: true,
								background: "#FFFFFF",
								xAxis: {
									disableGrid: true,
									// type: "grid",
									axisLine: false,
									gridColor: "#fff",
									gridType: "dash",
									dashLength: 7,
									itemCount: 6,
									fontSize: uni.upx2px(23),
									lineHeight: uni.upx2px(40),
									// scrollShow: true,
								},
								yAxis: {
									disabled: false,
									disableGrid: false,
									splitNumber: 5,
									gridType: "dash",
									dashLength: uni.upx2px(8),
									gridColor: "#CCCCCC",
									padding: uni.upx2px(20),
									showTitle: true,
									data: [{
											position: "left",
											title: "累计",
											titleFontSize: uni.upx2px(26),
											titleOffsetY: uni.upx2px(-5),
										},
										{
											position: "right",
											title: "当期",
											textAlign: "left",
											titleFontSize: uni.upx2px(26),
											titleOffsetY: uni.upx2px(-5),
										},
									],
								},
								extra: {
									mix: {
										column: {
											width: uni.upx2px(20),
										},
										line: {
											width: uni.upx2px(4),
										}
									},
								},
							};
							
							that.columnarChart1 = {
								categories: resultList.map(item => dateformat(item.time, 'MM-dd')),
								series: [{
										name: '当期计划',
										index: 1,
										color: 'rgba(255,127,80,1)',
										type: "column",
										data: resultList.map(item => item.plan)
									},
									{
										name: '当期实际',
										index: 1,
										color: 'rgba(136,206,251,1)',
										type: "column",
										data: resultList.map(item => item.actual)
									},
									{
										name: '累计计划',
										type: "line",
										color: 'rgba(218,112,214,1)',
										data: resultList.map(item => item.planTotal)
									},
									{
										name: '累计实际',
										type: "line",
										color: 'rgba(50,205,50,1)',
										data: resultList.map(item => item.actualTotal)
									},
								]
							};
							console.log(222222, that.columnarChart1)
							
							// that.$nextTick(() => {
							// 	that.$refs.columnarChart1.changeData('columnarChart1', that.columnarChart1)
							// })
						}
					}
				})
			}
		},
	}
</script>

<style lang="scss" scoped>
	.titleItem:not(:first-child) {
		padding: 20rpx 0;
	}

	.titleItem {
		font-size: 28rpx;
		display: flex;


		>view:first-child {
			width: 200rpx;
		}

		.regionText {
			flex: 1;
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-left: 16%;
			width: 380rpx;
			white-space: nowrap;
			text-overflow: ellipsis;
			overflow: hidden;

			uni-picker {
				width: 100%;
			}
		}
	}

	.no_data {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		text-align: center;
		color: rgba(0, 0, 0, 0.5);
		font-size: 28rpx;

		uni-image {
			width: 300rpx;
			height: 300rpx;
			display: block;
			margin: 0 auto;
		}
	}

	.container {
		margin-top: 24rpx;
		// padding: 0 20rpx 20rpx;
		padding: 0 32rpx;

		.minCharts_container {
			// padding: 0 32rpx;

			.minCharts {
				width: calc(100%);
				background: #FFFFFF;
				box-shadow: 0px 10rpx 20rpx 0px rgba(46, 91, 255, 0.2);
				border-radius: 8rpx;
				border: 2rpx solid rgba(102, 111, 232, 0.08);
				padding: 24rpx;
				margin-top: 20rpx;
				min-height: calc(400rpx);
				position: relative;
			}
		}


		.right-top_header {
			display: flex;
			flex-direction: column;
			align-items: flex-start;
			justify-content: space-between;
			overflow-y: scroll;

			.right-top_header_right {
				width: 100%;
			}

			.right-top_header_left {
				display: flex;

				>view {
					border: 1px solid #0056A8;
					padding: 6rpx 12rpx;
					font-size: 24rpx;
					color: #0056a8;
					cursor: pointer;
					position: relative;
					border-radius: 6rpx;
				}

				>view:not(:first-child) {
					margin-left: 20rpx;
				}

				>view.active {
					background-color: #2B8DF3;
					border-color: #2B8DF3;
					color: white;
				}
			}
		}
	}

	.container_title {
		font-size: 30rpx;
		font-weight: bold;
		position: relative;
		margin-left: 20rpx;
		margin-bottom: 16rpx;
		margin-top: 32rpx;
		color: #2D8EF3;
	}

	.container_title::after {
		content: '';
		position: absolute;
		left: -20rpx;
		top: 50%;
		width: 4rpx;
		height: 80%;
		transform: translateY(-50%);
		background-color: #2D8EF3;
	}
</style>