crmcard/subpages/pages/card/index.vue

<template>
	<view class="cardIndex">
		<uni-menubar title="数据分析" />
		<tm-tabs @change='tabClick' color="bg-gradient-blue-accent" v-model="active" range-key="name"
			:list="[{name:'客户轨迹',id:0},{name:'名片分析',id:1},{name:'文章分析',id:2}]">
		</tm-tabs>
		<tm-sheet :shadow="0">
			<tm-tabs model="rect" @change='tabsdataChange' :height="60" v-model="dataTabVal" range-key="name"
				color="blue"
				:list="[{name:'近1天',id:0},{name:'近7天',id:1},{name:'近30天',id:2},{name:'本年',id:3},{name:'自定义',id:4}]">
			</tm-tabs>
		</tm-sheet>
		<tm-sheet :shadow="0">
			<view class="flex flex-between text-align-center">
				<view v-for="(item,index) in total_list" :key="index">
					<!-- <tm-icons :size="70" :color="item.color" :name="item.icon"></tm-icons> -->
					<view class="text-size-s pt-10">{{item.title}}</view>
					<view class="text-size-xl pt-10 text-weight-b">{{item.count}}</view>
				</view>
			</view>
		</tm-sheet>
		<tm-sheet :padding="[0,0]">
			<view class="px-50 pt-30 text-weight-b text-size-n">
				访问类型
			</view>
			<view class="charts-box">
				<qiun-data-charts canvas2d type="pie" :opts="baropts" :chartData="piechart" />
			</view>
		</tm-sheet>
		<tm-sheet :padding="[0,0]">
			<view class="px-50 pt-30 text-weight-b text-size-n">
				访问趋势
			</view>
			<view class="charts-box">
				<qiun-data-charts canvas2d type="area" :opts="opts" :chartData="chart" />
			</view>
		</tm-sheet>
		<view>
			<tm-sheet :padding="[32,0]" color="transparent">
				<view style="font-size: 35rpx;">
					详细数据
				</view>
			</tm-sheet>
			<view v-if="group.length>0">
				<tm-sheet v-for="(item,index) in group" :key="index"  @click="custDetail(item)">
					<tm-col :grid="3">
						<view style="display: flex;align-items: center;">
							<tm-avatar :src="item.avatar" :size="120"></tm-avatar>
						</view>
					</tm-col>
					<tm-col :grid="9">
						<view style="font-size: 34rpx; font-weight:bloder;text-align: start;">{{item.nickname}}
						</view>
						<view class="mt-15" style="font-size: 24rpx; color:#cccccc;text-align: start;">
							{{item.label}}
						</view>
					</tm-col>
				</tm-sheet>
			</view>
			<view v-else class="">
				<tm-empty icon="icon-cry-fill" label="还没有详细数据~"></tm-empty>
			</view>
		</view>
		<tm-calendar v-if="showDetail" mode="rang" :value.sync="showDetail" @confirm="dateClick"
			color="bg-gradient-blue-accent"></tm-calendar>
		<uni-tabBar />
		<uni-suspension />
	</view>
</template>

<script>
	import qiunDataCharts from '@/subpages/components/qiun-data-charts/components/qiun-data-charts/qiun-data-charts.vue';
	export default {
		components: {
			qiunDataCharts
		},
		data() {
			return {
				chart: {},
				piechart: {},
				opts: {
					color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4",
						"#ea7ccc"
					],
					padding: [15, 15, 0, 15],
					legend: {
						show: false
					},
					xAxis: {
						disableGrid: true
					},
					yAxis: {
						gridType: "dash",
						dashLength: 2
					},
					extra: {
						area: {
							type: "curve",
							opacity: 0.4,
							addLine: true,
							width: 2,
							gradient: true
						}
					}
				},
				baropts: {
					color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4",
						"#ea7ccc"
					],
					padding: [5, 5, 5, 5],
					extra: {
						pie: {
							activeOpacity: 0.5,
							activeRadius: 10,
							offsetAngle: 0,
							labelWidth: 15,
							border: true,
							borderWidth: 3,
							borderColor: "#FFFFFF",
							linearType: "custom"
						}
					}
				},
				active: 1,
				dataTabVal: 0,
				params: {
					form: "card",
					time: "",
					date: "day",
					type: 0
				},
				datasList: {},
				echarts: [],
				showDetail: false,
				group: [],
				total_list: [],
				title: "查看名片",
				color: "#2196F3"
			}
		},
		mounted() {
			this.getEchart()
		},
		methods: {
			tabClick(e) {
				this.active = e
				if (e < 1) {
					uni.redirectTo({
						url: "/subpages/pages/radar/index"
					})
					return false
				}
				if (e == 1) {
					this.params = {
							form: "card",
							time: "",
							date: "day",
							type: 0
						},
						this.title = "查看名片"
					this.getEchart()
				} else if (e == 2) {
					this.params = {
						form: "art",
						time: "",
						date: "day",
						type: 0
					}
					this.title = "浏览文章"
					this.getEchart()
				}
			},
			//重新渲染echarts
			getEchart() {
				this.$tm.request.post('card/trackdata', this.params).then(res => {
					this.group = res.data.list
					this.total_list = res.data.total_list
					let charts = res.data.echarts
					let barcharts = res.data.bar_echarts
					let xDate = charts.map(val => val.months)
					let series = charts.map(val => val.count)
					res = {
						categories: xDate,
						series: [{
							name: "访问量",
							data: series
						}]
					};
					this.chart = JSON.parse(JSON.stringify(res));
					let piechart = {
						series: [{
							data: barcharts
						}]
					};
					this.piechart = JSON.parse(JSON.stringify(piechart));
				})
			},
			dateClick(selected) {
				let start = selected[0]
				let end = selected[1]
				this.params.date = ''
				this.params.time = [`${start.year}-${start.month}-${start.day}`, `${end.year}-${end.month}-${end.day}`]
				this.getEchart()
			},
			tabsdataChange(e) {
				this.dataTabVal = e
				if (e == 0) {
					this.params.date = "day"
				} else if (e == 1) {
					this.params.date = "week"
				} else if (e == 2) {
					this.params.date = "month"
				} else if (e == 3) {
					this.params.date = "year"
				} else(
					this.showDetail = true
				)
				if (e < 4) {
					this.getEchart()
				}
			},
			chatClick() {
				uni.navigateTo({
					url: "cardChat"
				})
			},
			lineInit(res) {
				// 初始化成功后返回的数据如下：
				const {
					width,
					height,
					chart
				} = res;
				//显示图表数据。
				this.$tm.request.post('card/trackdata', this.params).then(res => {
					this.group = res.data.list
					this.$nextTick(() => {
						chart.setOption(this.rOpts('bar', res.data.echarts));
					})
				})
			},
			custDetail(item){
				uni.navigateTo({
					url:"/subpages/pages/radar/drawPage?id="+item.uid
				})
			},
		}
	}
</script>

<style scoped lang="scss">

</style>