DigitalScholl/Learun.Framework.Ultimate V7/LearunApp-2.2.0/pages/home.vue

<template>
	<view id="home" class="page">
		<!-- 顶部搜索栏 -->
		<view class="header text-white" v-if="false">
			<!-- #ifndef H5 -->
			<l-icon @click="scanClick" type="scan" color="white" class="header-left text-xxl margin-left-sm" />
			<!-- #endif -->
			<view @click="moreClick(1)" class="search header-mid margin-lr-sm">
				<l-icon type="search" color="white" class="margin-lr-sm" />
				搜索更多应用
			</view>
			<l-icon @click="msgClick" type="mail" color="white" class="header-right text-xxl margin-right-sm" />
		</view>
		<!-- 轮播图片 -->
		<template v-if="false">
			<swiper v-if="imgCount > 0" style="height: 120px">
				<swiper-item v-for="(item, index) of imgData" :key="index" style="height: 120px">
					<image :src="item" mode="aspectFill" style="height: 100%; width: 100%"></image>
				</swiper-item>
			</swiper>
		</template>

		<!-- 功能宫格列表 -->
		<view class="col-4 function-list cu-list grid no-border">
			<view v-for="(item, index) in funcListDisplay" @click="funcListClick(item)" :key="index"
				class="cu-item text-center flex flex-wrap justify-center align-center">
				<view class="app-item align-center flex flex-wrap justify-center align-center"
					style="position: relative;">
					<l-icon :type="item.icon" color="white" class="text-sl" />
					<view v-if="item.F_Name == '我的审批'&&CornerMarker" class="CornerMarker">
						{{CornerMarker}}
					</view>
				</view>
				<text>{{ item.F_Name }}</text>
			</view>
		</view>
		<view class="text-center bg-white margin-bottom" v-if="false"><text @click="moreClick(0)"
				class="function-more-btn margin-tb-sm text-gray">更多应用</text></view>

		<!-- 统计数据宫格 -->
		<l-title v-if="false">统计数据</l-title>
		<view v-if="false" class="count-list cu-list grid col-3 margin-bottom">
			<view v-for="(item, index) in countData" :key="index" class="cu-item text-center">
				<text class="margin-bottom-xs">{{ item.title || "(未命名)" }}</text>
				<text class="count-item-value">{{ item.value || "-" }}</text>
			</view>
		</view>

		<!-- 通知列表区块 -->
		<view v-if="false" v-for="(block, blockIndex) of noticeData" :key="blockIndex" class="margin-bottom">
			<!-- <view class="margin-top"></view> -->
			<l-title class="hasmoreBtn" @click="informClick(block.title)">
				{{ block.title }}
				<l-icon type="more" color="black" class="moreBtn header-left text-xxl margin-left" />
			</l-title>
			<l-list>
				<l-list-item v-for="(item, i) of block.content" @click="noticeClick(item)" :key="i" arrow>
					{{ item.f_title || "(无标题)" }}
					<l-tag slot="action" line="gray">{{
            postDateTime(item.f_time)
          }}</l-tag>
				</l-list-item>
			</l-list>
		</view>

		<!-- 图表区块 -->
		<view v-if="false" v-for="item of chartData" :key="item.id" class="margin-bottom">
			<l-title>{{ item.title }}</l-title>
			<view :style="{ width: cWidth + 'px', height: cHeight + 'px' }" class="chart-list">
				<!--#ifndef MP-ALIPAY -->
				<canvas v-if="item.type === 1" @tap="chartTap(item, $event)" @touchstart="touchStart(item.id, $event)"
					@touchmove="touchMove(item.id, $event)" @touchend="touchEnd(item.id, $event)"
					:style="{ width: cWidth + 'px', height: cHeight + 'px' }" :canvas-id="item.id" :id="item.id"
					class="charts"></canvas>
				<canvas v-else @tap="chartTap(item, $event)" :style="{ width: cWidth + 'px', height: cHeight + 'px' }"
					:canvas-id="item.id" :id="item.id" class="charts"></canvas>
				<!--#endif -->

				<!-- 阿里小程序，需要以2倍尺寸显示，然后缩放为50% -->
				<!--#ifdef MP-ALIPAY -->
				<canvas v-if="item.type === 1" @tap="chartTap(item, $event)" @touchstart="touchStart(item.id, $event)"
					@touchmove="touchMove(item.id, $event)" @touchend="touchEnd(item.id, $event)" :style="{
            width: cWidth * pixelRatio + 'px',
            height: cHeight * pixelRatio + 'px',
            transform: 'scale(' + 1 / pixelRatio + ')',
            marginLeft: (-cWidth * (pixelRatio - 1)) / 2 + 'px',
            marginTop: (-cHeight * (pixelRatio - 1)) / 2 + 'px',
          }" :canvas-id="item.id" :id="item.id" class="charts"></canvas>
				<canvas v-else @tap="chartTap(item, $event)" :style="{
            width: cWidth * pixelRatio + 'px',
            height: cHeight * pixelRatio + 'px',
            transform: 'scale(' + 1 / pixelRatio + ')',
            marginLeft: (-cWidth * (pixelRatio - 1)) / 2 + 'px',
            marginTop: (-cHeight * (pixelRatio - 1)) / 2 + 'px',
          }" :canvas-id="item.id" :id="item.id" class="charts"></canvas>
				<!--#endif -->
			</view>
		</view>
		<!-- <tabBar selectedIndex='/pages/home'></tabBar> -->
	</view>
</template>

<script>
	import moment from "moment";
	import mapValues from "lodash/mapValues";
	import uCharts from "@/common/u-charts.js";

	// 用于保存图表操作对象
	let chartsObject = {};
	let chartsConfig = {};

	export default {
		data() {
			return {
				imgData: [],
				listData: [],
				myList: [],

				countData: [],
				noticeData: [],
				chartData: [],

				pixelRatio: 1,
				cWidth: "",
				cHeight: "",
				chartsFontSize: 10,
				ready: false,
				CornerMarker: ''
			};
		},

		async onLoad(param) {
			await this.init1(param);
		},
		async onShow() {
			uni.hideTabBar()
			if (this.ready) {
				this.ready = false
				await this.refresh()
				this.ready = true
			}
		},

		// 本页面开启下拉刷新，用于刷新首页数据
		onPullDownRefresh() {
			this.refresh().then(() => {
				this.TOAST("已更新首页数据");
				uni.stopPullDownRefresh();
			});
		},

		methods: {
			// 页面初始化
			async init1(param) {
				this.HIDE_LOADING();
				// 有参数表示可能是打开分享消息；将数据存入全局变量以备后续跳转
				if (param && param.learun && param.pagePath) {
					this.SET_GLOBAL("jumpParam", param);
				}
				// 登录状态无效，则跳转到登录页
				const stateValid = await this.checkLoginState();
				if (!stateValid) {
					this.RELAUNCH_TO("/pages/login");
					return;
				}
				// await this.FETCH_CLIENTDATA();
				await this.refresh();
				this.ready = true
			},
			async init(param) {
				this.HIDE_LOADING();

				// 有参数表示可能是打开分享消息；将数据存入全局变量以备后续跳转
				if (param && param.learun && param.pagePath) {
					this.SET_GLOBAL("jumpParam", param);
				}

				// 登录状态无效，则跳转到登录页
				const stateValid = await this.checkLoginState();
				if (!stateValid) {
					this.RELAUNCH_TO("/pages/login");
					return;
				}
				// 图表相关参数初始化
				this.initCharts();

				// 加载页面数据和全局数据
				await this.FETCH_CLIENTDATA();
				await this.refresh();
				this.ready = true

				// 监听「我的应用」列表修改
				this.ON("home-list-change", () => {
					this.HTTP_GET("learun/adms/function/mylist").then((newList) => {
						this.myList = newList;
					});
				});

				this.SET_STORAGE("nextTime", null);

				// 处理小程序分享消息跳转
				// #ifdef MP
				const jumpParam = this.GET_GLOBAL("jumpParam");
				if (jumpParam) {
					this.SET_GLOBAL("jumpParam", null);
					this.MP_SHARE_DECODE(jumpParam);
				}
				// #endif
				//微信推送跳转
				if (!!param.page) {
					//通知公告
					if (param.page == "notice") {
						this.NAV_TO("/pages/LR_OAModule/list");
					}
					//邮件
					if (param.page == "mail") {
						this.NAV_TO("/pages/EducationalAdministration/SYS_ReceiveMessage/list");
					}
					//OA待办
					if (param.page == "oa") {
						this.NAV_TO("/pages/nworkflow/myflow/list");
					}
					//公文下发
					if (param.page == "file") {
						this.NAV_TO("/pages/EducationalAdministration/Sys_ReceiveFile/list");
					}
					return;
				}
			},

			// 验证登录状态
			async checkLoginState() {
				const token = this.GET_GLOBAL("token") || uni.getStorageSync("token");
				if (!token || token === "null" || token === "undefined") {
					this.RELAUNCH_TO("/pages/login");
					this.HIDE_LOADING();

					return false;
				}
				this.SET_GLOBAL("token", token);

				// 判断是否有 loginUser 对象
				if (this.GET_GLOBAL("loginUser")) {
					return true;
				}

				// 拉取用户信息验证登录态；如果失败则跳转至登录页
				const userInfo = await this.HTTP_GET("learun/adms/user/info");
				if (!userInfo) {
					this.SET_GLOBAL("token", null);
					this.SET_STORAGE("token", null);
					return false;
				}

				// 有登录态，则设置用户信息和全局数据
				const {
					baseinfo,
					mpinfo,
					post,
					role
				} = userInfo;
				const user = {
					...baseinfo,
					post,
					role
				};
				if (mpinfo && Array.isArray(mpinfo) && mpinfo.includes(this.PLATFORM)) {
					user.miniProgram = true;
				}
				this.SET_GLOBAL("loginUser", user);

				return true;
			},

			// 刷新首页数据
			async refresh() {
				// 清空页面数据
				chartsObject = {};

				this.imgData = [];
				this.listData = [];
				this.myList = [];

				this.countData = [];
				this.noticeData = [];
				this.chartData = [];

				// 同时发出请求，获取轮播图、所有功能列表、我的功能列表、商机通知提醒图表数据
				// 商机、通知提醒图表数据，获取的是数据ID，所以还需要进一步请求
				const [imgData, listData, myList, settingData] = await Promise.all([
					this.HTTP_GET(
						"learun/adms/desktop/imgid" +
						(this.CONFIG("isDistributed") == true ? "?isDistributed=true" : "")
					),
					this.HTTP_GET("learun/adms/function/list").then(
						(result) => result.data
					),
					this.HTTP_GET("learun/adms/function/mylist"),
					this.HTTP_GET("learun/adms/desktop/setting").then(
						(result) => result.data
					),
				]);
				this.imgData = imgData;
				if (!this.CONFIG("isDistributed"))
					// 轮播图需要加上 url 前缀
					this.imgData = imgData.map((t) => this.API + `/desktop/img?data=${t}`);

				// 功能区按钮需要处理 icon
				this.listData = listData.map((item) => {
					const icon = item.F_Icon ?
						item.F_Icon.replace(`iconfont icon-`, ``) :
						"";
					const existsIcon = this.getUiIcons().some((t) => t === icon);

					return {
						...item,
						icon: existsIcon ? icon : "roundright",
					};
				});
				// 我的应用列表需要过滤掉不存在的按钮
				this.myList = myList.filter((t) =>
					listData.find((item) => item.F_Id === t)
				);

				// 发出请求，获取商机信息、消息通知信息、图表信息；三类数据全部同时请求
				await Promise.all([
					...settingData.target.map((item) =>
						this.HTTP_GET("learun/adms/desktop/data", {
							type: "Target",
							id: item.F_Id,
						}).then((data) => {
							if (data && data.value) {
								const {
									value
								} = data;
								this.countData.push({
									title: item.F_Name,
									value,
								});
							}
						})
					),

					...settingData.list.map((item) =>
						this.HTTP_GET("learun/adms/desktop/data", {
							type: "list",
							id: item.F_Id,
						}).then((data) => {
							if (data && data.value) {
								let {
									value
								} = data;
								if (value && value.length) {
									value = value.sort((a, b) => {
										return new Date(b.f_time).valueOf() - new Date(a.f_time)
											.valueOf()
									})
								}
								if (item.F_Name == "待办事项") {
									this.CornerMarker = value.length || '0'
								}
								this.noticeData.push({
									title: item.F_Name,
									F_Sort: item.F_Sort,
									content: value,
								});
								this.noticeData = this.noticeData.sort((a, b) => a.F_Sort - b.F_Sort)
							}
						})
					),

					...settingData.chart.map((item) =>
						this.HTTP_GET("learun/adms/desktop/data", {
							type: "chart",
							id: item.F_Id,
						}).then((data) => {
							if (data && data.value) {
								const {
									value
								} = data;
								this.chartData.push({
									title: item.F_Name,
									value,
									id: item.F_Id,
									type: item.F_Type,
								});
							}
						})
					),
				]);

				// 渲染图表
				this.chartData.forEach((item) => {
					// 根据 item.type 的值选用对应的图表初始化配置项
					// 0=环形图；1=折线图；2=柱状图
					const charts = new uCharts(
						[{
								...chartsConfig,
								canvasId: item.id,
								type: "ring",
								series: item.value.map((t) => ({
									name: t.name,
									data: t.value,
								})),
								extra: {
									pie: {
										offsetAngle: -45,
										ringWidth: 20,
										labelWidth: 15,
									},
								},
								legend: {
									lineHeight: 20,
								},
							},
							{
								...chartsConfig,
								canvasId: item.id,
								type: "line",
								series: [{
									name: item.title,
									data: item.value.map((t) => t.value),
								}, ],
								categories: item.value.map((t) => t.name),
								extra: {
									line: {
										type: "straight",
									},
								},
								xAxis: {
									rotateLabel: true,
									fontSize: this.chartsFontSize,
									itemCount: 8,
								},
								enableScroll: true,
							},
							{
								...chartsConfig,
								canvasId: item.id,
								type: "column",
								series: [{
									name: item.title,
									data: item.value.map((t) => t.value),
								}, ],
								categories: item.value.map((t) => t.name),
								xAxis: {
									rotateLabel: true,
									fontSize: this.chartsFontSize,
								},
							},
						][item.type]
					);

					chartsObject[item.id] = charts;
				});
			},

			// 初始化图表
			initCharts() {
				// （阿里小程序）设置图表尺寸为2倍
				// #ifdef MP-ALIPAY
				const pixelRatio = uni.getSystemInfoSync().pixelRatio;
				if (pixelRatio > 1) {
					this.pixelRatio = 2;
					this.chartsFontSize = 15;
				}
				// #endif

				this.cWidth = uni.upx2px(750);
				this.cHeight = uni.upx2px(500);
				chartsConfig = {
					$this: this,
					pixelRatio: this.pixelRatio,
					width: this.cWidth * this.pixelRatio,
					height: this.cHeight * this.pixelRatio,
					background: "#FFFFFF",
					dataLabel: true,
					padding: [20, 15, 5, 15],
				};
			},

			// 图表点击事件
			chartTap(chartItem, e) {
				const format = ({
						name,
						data
					}, category) =>
					`${category || ""} ${name}: ${data}`;

				// #ifdef MP-DINGTALK
				const detail = e.detail;
				const item = detail;
				e.mp.changedTouches = [item];
				// #endif

				chartsObject[chartItem.id].showToolTip(e, {
					format,
				});
			},

			// 图表拖动事件（开始）
			touchStart(chartId, e) {
				chartsObject[chartId].scrollStart(e);
			},

			// 图表拖动事件（拖动）
			touchMove(chartId, e) {
				chartsObject[chartId].scroll(e);
			},

			// 图表拖动事件（结束）
			touchEnd(chartId, e) {
				chartsObject[chartId].scrollEnd(e);
			},

			// 格式化日期的显示（新闻列表、通知公告等）
			postDateTime(timeStr) {
				return moment(timeStr).fromNow();
			},

			// 点击功能按钮
			funcListClick(item) {
				if (item.F_IsSystem === 2) {
					this.NAV_TO(
						`/pages/customapp/list?formId=${item.F_FormId}`,
						item,
						true
					);
					return;
				}

				this.NAV_TO(`/pages/${item.F_Url}/list`);
			},

			// 点击通知公告的标题
			async noticeClick(item) {
				if (item.f_category !== undefined) {
					this.NAV_TO("/pages/home/notice", item, true);
				} else {
					// const result = await this.HTTP_GET(
					//   'learun/adms/newwf/mytask',
					//   {
					// 	pagination:{"rows":100,"page":1,"sidx":"F_CreateDate","sord":"DESC"},
					//     queryJson: JSON.stringify({keyword:item.f_title})
					//   },
					//   '加载任务时出错'
					// )
					// if(!result){
					// 	return
					// }
					// this.processId = this.currentTask.F_Id
					// this.taskId = this.currentTask.F_TaskId
					let params = {
						F_Id: item.f_processid,
						F_TaskId: item.f_id,
						mark: "pre",
						F_Title: item.f_title,
					}
					this.NAV_TO('/pages/nworkflow/myflow/single', params, true)
				}
			},
			informClick(titleName) {
				let categoryId = null;
				if (titleName == "待办事项") {
					this.NAV_TO("/pages/nworkflow/myflow/list", {
						tab: 1
					}, true);
				} else {
					if (titleName == "通知公告") categoryId = 1;
					if (titleName == "校园新闻") categoryId = 2;
					if (titleName == "教学工作") categoryId = 6;
					if (titleName == "常用下载") categoryId = 12;
					if (titleName == "规章制度") categoryId = 10;
					this.NAV_TO("/pages/LR_OAModule/list", {
						categoryId
					}, true, );
				}
			},

			// #ifndef H5
			// 点击左上角扫码图标，H5 无此功能
			scanClick() {
				uni.scanCode({
					scanType: ["qrCode", "barCode"],
					success: ({
						result,
						charSet
					}) => {
						// 您可以在这里自行定制扫码后的功能
					},
				});
			},
			// #endif

			// 点击更多功能按钮
			moreClick(openSearch) {
				this.NAV_TO(`/pages/home/more${openSearch ? "?search=1" : ""}`);
			},

			// 点击右上角的消息按钮
			msgClick() {
				this.TAB_TO("/pages/msg");
			},
		},

		computed: {
			// 「我的功能」区域按钮列表
			funcListDisplay() {
				const {
					myList,
					listData
				} = this;
				// const myFuncList = myList.reduce((list, id) => {
				// 	if (listData.find((t) => t.F_Id === id)) {
				// 		return [...list, listData.find((t) => t.F_Id === id)];
				// 	}
				// 	return list;
				// }, []);
				// return myFuncList;
				return listData;
			},

			// imgData 数组的长度
			imgCount() {
				return this.imgData.length;
			},
		},
	};
</script>

<style lang="less" scoped>
	.page {
		background-color: #fff;
		padding-bottom: 48px;

		.header {
			height: 100rpx;
			background-color: #0c86d8;
			display: flex;
			align-items: center;

			.header-left {
				flex-grow: 0;
			}

			.header-mid {
				flex-grow: 1;
				background-color: #3d9ee0;
				line-height: 60rpx;
				height: 60rpx;
				font-size: 24rpx;
				color: #fff;
				border-radius: 6rpx;
			}

			.header-right {
				flex-grow: 0;
			}
		}

		.content {
			background-color: #fff;
		}

		.function-list {
			padding-bottom: 0;

			.cu-item {
				.app-item {
					border-radius: 50%;
					height: 45px;
					width: 45px;
				}

				&:nth-child(7n + 1)>.app-item {
					background-color: #62bbff;
				}

				&:nth-child(7n + 2)>.app-item {
					background-color: #7bd2ff;
				}

				&:nth-child(7n + 3)>.app-item {
					background-color: #ffd761;
				}

				&:nth-child(7n + 4)>.app-item {
					background-color: #fe955c;
				}

				&:nth-child(7n + 5)>.app-item {
					background-color: #ff6283;
				}

				&:nth-child(7n + 6)>.app-item {
					background-color: #60e3f3;
				}

				&:nth-child(7n)>.app-item {
					background-color: #acc8fe;
				}
			}
		}

		.function-more-btn {
			display: inline-block;
			border: currentColor 1px solid;
			border-radius: 2px;
			padding: 10rpx 50rpx;
		}

		.count-list {
			&:after {
				content: "";
				clear: both;
				display: table;
			}

			.count-item-value {
				color: #0188d2;
				font-size: 24px;
			}
		}

		.chart-list {
			background-color: #fff;
			overflow: hidden;
		}
	}
</style>

<style lang="less">
	#home {
		width: 750rpx;
		overflow-x: hidden;

		.function-list .cu-item text[class*="cuIcon"] {
			margin-top: 0 !important;
		}
	}

	.CornerMarker {
		padding: 1px 2px;
		position: absolute;
		right: 0px;
		top: 0px;
		background-color: red;
		min-width: 14px;
		border-radius: 7px;
		font-size: 12px;
		color: #fff;
	}

	.hasmoreBtn {
		.action {
			width: 100%;
		}

		.text-xl {
			flex: 1;
			position: relative;
		}

		.moreBtn {
			position: absolute;
			right: 15px;
		}
	}
</style>