realty/virgo.wzfrontend/workark/src/views/work/index.vue

<template>
	<div class="work-index">
		<div class="work-index-content">
			<div class="work-left">
				<div class="work-box">
					<div class="title">
						<div class="label">个人信息</div>
					</div>
					<div class="content user-content">
						<div class="user-avatar">
							<div class="user-avatar-img">
								<avatar :user="user" :size="20"></avatar>
							</div>
							<div class="user-avatar-name">{{user.userName}}</div>
						</div>
						<div class="user-list">
							<div class="user-item">
								<div class="user-key">公司名称</div>
								<div class="user-value">{{organization.name}}</div>
							</div>
							<div class="user-item">
								<div class="user-key">公司部门</div>
								<div class="user-value">智慧城市事业部</div>
							</div>
							<div class="user-item">
								<div class="user-key">联系方式</div>
								<div class="user-value">{{user.phone}}</div>
							</div>
						</div>
					</div>
				</div>
				<div class="work-box">
					<div class="title">
						<div class="label">公告</div>
						<div class="more" @click="$router.push('/work/notice')">查看更多>></div>
					</div>
					<div class="content notice-content" v-if="noticeList.length >0">
						<div class="notice-item" v-for="(item,index) in noticeList" :key="item.id"
							@click="openNotice(item)">
							<div class="notice-dage"></div>
							<div class="notice-label hui-ellipsis">{{item.content}}</div>
							<div class="notice-date alibaba">{{$dayjs(item.publishTime).format('YYYY-MM-DD')}}</div>
						</div>
					</div>
					<div class="content notice-content" v-else>
						<el-empty description="暂无公告" :image-size="80"></el-empty>
					</div>
				</div>
				<div class="work-box message-work-box">
					<div class="title">
						<div class="label">消息通知</div>
						<div class="more" @click="$router.push('/work/message')">查看更多>></div>
					</div>
					<div class="content message-content" v-if="messageList.length >0">
						<div class="message-item hui-ellipsis" v-for="(item,index) in messageList" :key="item.id">
							{{item.message}}
						</div>
					</div>
					<div class="content message-content" v-else>
						<el-empty description="暂无消息通知" :image-size="80"></el-empty>
					</div>
				</div>
			</div>
			<div class="work-right">
				<div class="work-box message-work-box">
					<div class="title">
						<div class="label">服务数据</div>
						<div class="title-option">
							<div v-for="(item,index) in versionList"
								:class="nowVersion.id === item.id ?'option-item active':'option-item'"
								@click="changeVersion(item)">
								{{item.name}}
							</div>
						</div>
					</div>
					<div class="content count-serve-content">
						<div class="count-serve-item color-primary">
							<div class="count-serve-title hanyiyaku">{{nowVersion.id === 1 ? '消费金额' : '成交金额'}}</div>
							<div class="count-serve-value alibaba">{{orderCountNumber[nowVersion.type].totalFee}}</div>
						</div>
						<div class="count-serve-item color-success">
							<div class="count-serve-title hanyiyaku">订单数</div>
							<div class="count-serve-value alibaba">{{orderCountNumber[nowVersion.type].orders}}</div>
						</div>
						<div class="count-serve-item color-warning">
							<div class="count-serve-title hanyiyaku">发票数</div>
							<div class="count-serve-value alibaba">{{orderCountNumber[nowVersion.type].invoice}}</div>
						</div>
						<div class="count-serve-item color-warning">
							<div class="count-serve-title hanyiyaku">合同数</div>
							<div class="count-serve-value alibaba">{{orderCountNumber[nowVersion.type].contract}}</div>
						</div>
					</div>
					<div class="title">
						<div class="label">订单统计</div>
						<div>
							<el-date-picker size="small" v-model="timeData" type="daterange" range-separator="至"
								start-placeholder="开始日期" end-placeholder="结束日期" @change="initOrderByTime"
								value-format="yyyy-MM-dd" :clearable="false" align="center">
							</el-date-picker>
						</div>
					</div>
					<div ref="chart1" class="content order-count"></div>
					<div class="title">
						<div class="label">{{nowVersion.id === 1 ? '购买排行' : '销量排行'}}</div>
					</div>
					<div class="content pay-count">
						<div class="pay-header tr">
							<div class="td td-150">排名</div>
							<div class="td td-flex">产品</div>
							<div class="td td-150">单价</div>
							<div class="td td-150">{{nowVersion.id === 1 ? '购买次数' : '销量'}}</div>
						</div>
						<div class="pay-table" v-if="orderCount[nowVersion.type].length>0">
							<div class="pay-tr tr" v-for="(item,index) in orderCount[nowVersion.type]" :key="item.id">
								<div class="td td-150">{{index+1}}</div>
								<div class="td td-flex">
									<div class="serve-item">
										<img :src="imageUrl(item.rotatingImages)" alt="payment.png">
										<span>{{item.name}}</span>
									</div>
								</div>
								<div class="td td-150">¥{{item.price}}</div>
								<div class="td td-150">{{item.orders}}</div>
							</div>
						</div>
						<div class="pay-table" v-else>
							<el-empty description="暂无记录" :image-size="80"></el-empty>
						</div>
					</div>
				</div>
			</div>
		</div>
		<el-dialog :close-on-click-modal="false" title="公告详情" :visible.sync="visible" width="900px"
			:append-to-body="true">
			<dialog-detail v-if="visible" :detailId="detailId"></dialog-detail>
		</el-dialog>
	</div>
</template>

<script>
	import {
		getAnnouncementListByQueryAndPage
	} from '@/api/organization'
	import {
		getMessagePageListByQuery
	} from '@/api/message'
	import {
		getOrdeCount,
		getOrdeCountByDate,
		getOrdeCountPay
	} from '@/api/serve'
	const dialogDetail = () => import('@/components/work/organization/announcement/dialogDetail');
	export default {
		components: {
			dialogDetail
		},
		data() {
			return {
				user: {},
				organization: {},
				versionList: [{
					id: 1,
					type: 'payOrganization',
					name: '企业版'
				}, {
					id: 2,
					type: 'organization',
					name: '商业版'
				}],
				nowVersion: {
					id: 1,
					type: 'payOrganization',
					name: '企业版'
				},
				noticeList: [],
				messageList: [],
				orderCount: {
					organization: [],
					payOrganization: []
				},
				orderCountNumber: {
					organization: {
						totalFee: 0,
						contract: 0,
						orders: 0,
						invoice: 0
					},
					payOrganization: {
						totalFee: 0,
						contract: 0,
						orders: 0,
						invoice: 0
					}
				},
				timeData: [],
				visible: false,
				detailId: ''
			}
		},
		mounted() {
			this.user = this.$store.getters.user;
			this.organization = this.$store.getters.organization;
			this.timeData = [this.$dayjs().subtract(1, 'month').format('YYYY-MM-DD'), this.$dayjs().format('YYYY-MM-DD')];
			this.init();
		},
		methods: {
			init() {
				this.initNotice();
				this.initMessage();
				this.initOrder();
				this.initOrderByTime();
			},
			initNotice() {
				getAnnouncementListByQueryAndPage(1, 6, {
					organizationId: this.$store.getters.organization.id,
					projectId: this.$store.getters.id,
					status: 1
				}).then(res => {
					if (res.state) {
						this.noticeList = res.data.dataList;
					}
				})
			},
			initMessage() {
				getMessagePageListByQuery(1, 10, {
					organizationId: this.$store.getters.organization.id,
					projectId: this.$store.getters.id,
					userId: this.$store.getters.user.userId
				}).then(res => {
					if (res.state) {
						this.messageList = res.data.dataList.map(node => {
							return Object.assign(node, JSON.parse(node.json));
						});
					}
				})
			},
			initOrder() {
				getOrdeCountPay(this.$store.getters.organization.id).then(res => {
					if (res.state) {
						this.orderCount = res.data;
					}
				});
				getOrdeCount(this.$store.getters.organization.id).then(res => {
					if (res.state) {
						this.orderCountNumber = res.data;
					}
				});
			},
			initOrderByTime() {
				getOrdeCountByDate(this.$store.getters.organization.id, this.timeData[0], this.timeData[1]).then(res => {
					if (res.state) {
						let data = res.data[this.nowVersion.type];
						this.chart(this.$refs.chart1, [data.map(node => node.orders)], ['#32a0ff'], data.map(
							node => node.day), [new echarts.graphic.LinearGradient(0,
							0, 0, 1, [{
								offset: 0,
								color: 'rgba(50,160,255, 0.35)'
							}, {
								offset: 1,
								color: 'rgba(50,160,255, 0)'
							}])])
					}
				});
			},
			imageUrl(data) {
				if (!data) return 'https://assets.api.uizard.io/api/cdn/stream/c05650d2-192b-4a56-ae97-05638f53804c.png';
				let imgData = JSON.parse(data)[0];
				if (!imgData) {
					return 'https://assets.api.uizard.io/api/cdn/stream/c05650d2-192b-4a56-ae97-05638f53804c.png';
				}
				return imgData.url;
			},
			changeVersion(item) {
				this.nowVersion = item;
				this.initOrderByTime();
			},
			openNotice(item) {
				this.detailId = item.id;
				this.visible = true;
			},
			chart(elem, data, color, x, areaColor) {
				let chart = echarts.init(elem);
				let series = [];
				for (var i = 0; i < data.length; i++) {
					series = series.concat([{
						data: data[i],
						type: 'line',
						symbolSize: 6,
						color: color[i],
						lineStyle: {
							width: 1
						},
						areaStyle: {
							color: areaColor[i]
						},
						z: 99
					}, {
						data: data[i],
						type: 'line',
						showSymbol: false,
						label: {
							show: true,
							color: '#32a0ff'
						},
						lineStyle: {
							width: 1
						},
						color: color[i],
						z: 99
					}]);
				}
				let option = {
					tooltip: {
						show: true,
						trigger: 'axis',
						formatter: function() {
							return ''
						},
						backgroundColor: 'rgba(255,255,255,0)',
						borderWidth: 0,
						padding: 0,
						axisPointer: {
							lineStyle: {
								type: 'solid',
								color: '#32a0ff',
							}
						}
					},
					grid: {
						left: '15',
						top: '35',
						right: '15',
						bottom: '25',
						containLabel: true
					},
					xAxis: {
						type: 'category',
						data: x,
						axisLabel: {
							margin: 4,
							color: '#707b85',
							fontSize: 12,
							fontWeight: 'bold'
						},
						boundaryGap: true,
						axisLine: {
							lineStyle: {
								color: '#707b85'
							}
						},
						axisTick: {
							show: false
						}
					},
					yAxis: {
						type: 'value',
						name: '订单数',
						axisLabel: {
							margin: 10,
							color: '#707b85',
							fontSize: 12,
							fontWeight: 'bold'
						},
						splitLine: {
							show: true,
							lineStyle: {
								color: 'rgba(108,128,151,0.3)',
								type: 'dashed'
							}
						}
					},
					series: series
				};
				chart.setOption(option);
			},

		},
	}
</script>

<style lang="scss">
	.work-index {
		width: 100%;
		height: 100%;
		overflow-y: auto;

		.work-index-content {
			display: flex;
			min-height: 100%;
		}

		.work-left {
			width: 420px;
			margin-right: 15px;
			display: flex;
			flex-direction: column;
		}

		.work-right {
			flex: 1;
			width: 0;
			display: flex;
			flex-direction: column;
		}

		.work-box {
			background: #fff;
			border-radius: 4px;
			margin-bottom: 15px;

			&:last-child {
				margin-bottom: 0;
			}

			&.message-work-box {
				flex: 1;
				height: 0;
				margin-bottom: 0;
				display: flex;
				flex-direction: column;
			}

			.title {
				height: 44px;
				line-height: 44px;
				padding: 0 15px;
				display: flex;
				justify-content: space-between;
				align-items: center;

				.more {
					color: $--color-text-secondary;
					cursor: pointer;
					font-size: $--font-size-small;

					&:hover {
						color: $--color-primary;
					}
				}

				.label {
					font-size: $--font-size-large;
					font-weight: bold;
				}

				.title-option {
					display: flex;
					align-items: center;
					height: 24px;
					border-radius: 2px;
					border: 1px solid $--color-primary;
				}

				.option-item {
					width: 60px;
					height: 24px;
					font-size: 12px;
					text-align: center;
					line-height: 24px;
					border-radius: 2px;
					cursor: pointer;
				}

				.option-item.active {
					background: $--color-primary;
					color: #fff;
				}

				.option-item:hover {
					color: $--color-primary;
				}

				.option-item.active:hover {
					color: #fff;
				}
			}

			.content {
				padding: 0 15px;
			}

			.pay-count {
				.tr {
					display: flex;
				}

				.td-150 {
					width: 150px;
					justify-content: center;
				}

				.td-flex {
					flex: 1;
					width: 0;
				}

				.td {
					display: flex;
					align-items: center;
				}

				.pay-tr {

					.td {
						padding: 5px 0;
					}
				}

				.pay-header {
					background: $--background-color-base;

					.td {
						font-weight: bold;
						height: 44px;
					}
				}

				.serve-item {
					display: flex;
					align-items: center;

					img {
						width: 50px;
						height: 50px;
						border-radius: 4px;
						margin-right: 10px;
					}
				}
			}

			.message-content {
				flex: 1;
				height: 0;
				overflow-y: auto;
				margin-bottom: 15px;

				.message-item {
					line-height: 40px;
					padding: 0 10px;
					cursor: pointer;
				}

				.message-item:nth-child(2n-1) {
					background: $--background-color-base;
				}

				.message-item:hover {
					color: $--color-primary;
				}
			}

			.order-count {
				height: 293px;
			}

			.notice-content {
				height: 210px;
				overflow-y: auto;
			}

			.notice-item {
				display: flex;
				align-items: center;
				padding-bottom: 15px;
				cursor: pointer;

				&:hover {
					color: $--color-primary;

					.notice-date {
						color: $--color-primary;
					}
				}
			}

			.notice-dage {
				width: 6px;
				height: 6px;
				border-radius: 6px;
				background: $--color-danger;
				margin-right: 10px;

				&.ready {
					background: $--color-info;
				}
			}

			.notice-label {
				flex: 1;
				width: 0;
			}

			.notice-date {
				color: $--color-text-secondary;
				margin-left: 15px;
			}

			.count-serve-content {
				display: flex;
			}

			.count-serve-item {
				flex: 1;
				width: 0;
				height: 110px;
				padding: 15px;
				background: linear-gradient(to top, #fff, #f2f3f5);
				/* 如果需要兼容旧版浏览器，可以添加带厂商前缀的代码 */
				background: -webkit-linear-gradient(bottom, #f2f3f5, #fff);
				/* Safari 5.1-6.0 */
				background: -o-linear-gradient(bottom, #f2f3f5, #fff);
				/* Opera 11.1-12.0 */
				background: -moz-linear-gradient(bottom, #f2f3f5, #fff);
				/* Firefox 3.6-15 */
				border-radius: 8px;
				margin: 0 10px;
			}

			.count-serve-title {
				margin-bottom: 5px;
			}

			.count-serve-value {
				font-size: 30px;
			}

			.user-content {
				display: flex;
				padding-bottom: 15px;
			}

			.user-avatar {
				width: 110px;
				background: linear-gradient(to top, #f8f8f8, #f2f3f5);
				/* 如果需要兼容旧版浏览器，可以添加带厂商前缀的代码 */
				background: -webkit-linear-gradient(bottom, #f2f3f5, #f8f8f8);
				/* Safari 5.1-6.0 */
				background: -o-linear-gradient(bottom, #f2f3f5, #f8f8f8);
				/* Opera 11.1-12.0 */
				background: -moz-linear-gradient(bottom, #f2f3f5, #f8f8f8);
				/* Firefox 3.6-15 */
				border-radius: 4px;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				margin-right: 5px;

				.user-avatar-img {
					width: 64px;
					height: 64px;
					border: 2px solid $--border-color-base;
					border-radius: 50%;
					overflow: hidden;
				}

				.user-avatar-name {
					margin-top: 6px;
					font-weight: bold;
				}
			}

			.user-list {
				flex: 1;
				width: 0;

				.user-item {
					display: flex;
					margin-bottom: 2px;

					.user-key {
						width: 90px;
					}

					.user-value {
						flex: 1;
						width: 0;
						margin-left: 2px;
						overflow: hidden;
						white-space: nowrap;
						text-overflow: ellipsis;
					}
				}

				.user-item>div {
					background: linear-gradient(to top, #f8f8f8, #f2f3f5);
					/* 如果需要兼容旧版浏览器，可以添加带厂商前缀的代码 */
					background: -webkit-linear-gradient(bottom, #f2f3f5, #f8f8f8);
					/* Safari 5.1-6.0 */
					background: -o-linear-gradient(bottom, #f2f3f5, #f8f8f8);
					/* Opera 11.1-12.0 */
					background: -moz-linear-gradient(bottom, #f2f3f5, #f8f8f8);
					/* Firefox 3.6-15 */
					border-radius: 4px;
					line-height: 36px;
					padding: 0 16px;
				}

				.user-item:last-child {
					margin-bottom: 0;
				}
			}
		}
	}
</style>