对接运营分析剩余接口

common/apiurl.js

@@ -3,6 +3,8 @@ export const apiurl = {
 	loginUrl: '/operator/auth/login',
 	// 退出登录接口
 	logoutUrl: '/operator/auth/loginOut',
+	// 获取数据字典
+	getDictUrl: 'admin/dict/data/type/',
 	// 今日概况模块接口
 	todayOverview: {
 		// 获取今日概况接口
@@ -25,6 +27,14 @@ export const apiurl = {
 		// 获取营收趋势统计接口
 		getRevenueTrendsDataUrl: '/admin/statis/roadamt',
 		// 获取路段分析车流量分析接口
-		getRoadTrafficFlowDataUrl: '/admin/statis/roadvehicle'
+		getRoadTrafficFlowDataUrl: '/admin/statis/roadvehicle',
+		// 获取欠费分许接口
+		getArrearsDataUrl: '/admin/statis/oweamt',
+		// 获取收入分析接口
+		getIncomeDataUrl: '/admin/income/amt',
+		// 获取支付方式占比接口
+		getPaymentWaysDataUrl: '/admin/overview/paysource',
+		// 获取支付来源分析接口
+		getPaySourceDataUrl: '/admin/overview/payplat'
 	}
 }

common/http.api.js

@@ -8,6 +8,8 @@ const install = (Vue, vm) => {
 	let loginApi = (params = {}) => vm.$u.http.post(apiurl.loginUrl, params);
 	// 退出登录
 	let logoutApi = (params = {}) => vm.$u.http.get(apiurl.logoutUrl, params);
+	// 获取字典数据
+	let getDictApi = (params = {}) => vm.$u.http.get(apiurl.getDictUrl + params.type);
 	// 今日概况
 	let todayOverviewApi = {
 		// 获取今日概况
@@ -30,13 +32,22 @@ const install = (Vue, vm) => {
 		// 获取营收趋势统计
 		getRevenueTrendsDataApi: (params = {}) => vm.$u.http.get(apiurl.operationalAnalysis.getRevenueTrendsDataUrl, { params }),
 		// 获取路段分析车流量分析
-		getRoadTrafficFlowDataApi: (params = {}) => vm.$u.http.get(apiurl.operationalAnalysis.getRoadTrafficFlowDataUrl, { params })
+		getRoadTrafficFlowDataApi: (params = {}) => vm.$u.http.get(apiurl.operationalAnalysis.getRoadTrafficFlowDataUrl, { params }),
+		// 获取欠费分析
+		getArrearsDataApi: (params = {}) => vm.$u.http.get(apiurl.operationalAnalysis.getArrearsDataUrl, { params }),
+		// 获取收入分析
+		getIncomeDataApi: (params = {}) => vm.$u.http.get(apiurl.operationalAnalysis.getIncomeDataUrl, { params }),
+		// 获取支付方式占比分析
+		getPaymentWaysDataApi: (params = {}) => vm.$u.http.get(apiurl.operationalAnalysis.getPaymentWaysDataUrl, { params }),
+		// 获取支付来源
+		getPaySourceDataApi: (params = {}) => vm.$u.http.get(apiurl.operationalAnalysis.getPaySourceDataUrl, { params })
 	}
 	
 	// 将各个定义的接口名称，统一放进对象挂载到vm.$u.api(因为vm就是this，也即this.$u.api)下
 	vm.$u.api = {
 		loginApi,
 		logoutApi,
+		getDictApi,
 		todayOverviewApi,
 		operationalAnalysisApi
 	};

pages/dataOverview/operationalAnalysis/components/arrearsAnalysis.vue

@@ -2,7 +2,10 @@
 <template>
 	<view class="arrears">
 		<view class="arrears-line">
-			<LineChart :chartData="chartData" :title="title" :opts="opts"/>
+			<LineChart v-if="chartData.series[0].data.length" :chartData="chartData" :title="title" :opts="opts"/>
+			<view class="empty" v-else>
+				<u-empty></u-empty>
+			</view>
 		</view>
 	</view>
 </template>
@@ -18,12 +21,6 @@
 				type: String,
 				default: ''
 			},
-			chartData: {
-				type: Object,
-				default: () => {
-					return {}
-				}
-			},
 			opts: {
 				type: Object,
 				default: () => {
@@ -52,6 +49,55 @@
 					}
 				}
 			}
+		},
+		data() {
+			return {
+				chartData: {
+					categories: [],
+					series: [{
+						name: '',
+						data: []
+					}]
+				}
+			}
+		},
+		methods: {
+			getData({ reportType, queryDate }) {
+				this.reportType = reportType
+				this.queryDate = queryDate
+				this.getArrearsData()
+			},
+			getArrearsData() {
+				uni.$u.api.operationalAnalysisApi.getArrearsDataApi({
+					reportType: this.reportType,
+					queryDate: this.queryDate
+				}).then(res => {
+					console.log(res)
+					if (res.code === 200) {
+						if (res.data.itemList && res.data.itemList.length) {
+							this.chartData.categories = res.data.itemList.map(item => {
+								return item.statisTime
+							})
+							this.chartData.series[0].data = res.data.itemList.map(item => {
+								return item.amt
+							})
+						} else {
+							this.chartData.categories = []
+							this.chartData.series[0].data = []
+						}
+					}
+				})
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	.arrears {
+		background-color: #fff;
+		border-radius: 5px;
+		.empty {
+			padding: 15px;
 		}
 	}
-</script>
+</style>

pages/dataOverview/operationalAnalysis/components/incomeAnalysis.vue

@@ -1,9 +1,31 @@
 <!-- 收入分析 -->
 <template>
 	<view class="revenue">
+		<view class="revenue-search">
+			<view class="revenue-search-item" @click="incomeTypePicker = true">
+				<u--input
+					placeholder="请输入内容"
+					v-model="searchContent.text"
+					suffixIcon="arrow-down"
+					:readonly="true"
+				></u--input>
+			</view>
+			<view class="revenue-search-item">
+				<!-- <u-button text="搜索" type="primary" class="revenue-search-item-btn" @click="searchClick"></u-button> -->
+			</view>
+		</view>
 		<view class="revenue-line">
-			<ColumnChart :chartData="chartData" :title="title" :opts="opts"/>
+			<ColumnChart v-if="chartData.series[0].data.length" :chartData="chartData" :title="title" :opts="opts"/>
+			<view class="empty" v-else>
+				<u-empty></u-empty>
+			</view>
 		</view>
+		<u-picker
+			:show="incomeTypePicker"
+			:columns="dictList"
+			@confirm="incomeTypeConfirm"
+			@cancel="incomeTypePicker = false"
+		></u-picker>
 	</view>
 </template>
 
@@ -18,12 +40,6 @@
 				type: String,
 				default: ''
 			},
-			chartData: {
-				type: Object,
-				default: () => {
-					return {}
-				}
-			},
 			opts: {
 				type: Object,
 				default: () => {
@@ -52,6 +68,103 @@
 					}
 				}
 			}
+		},
+		data() {
+			return {
+				chartData: {
+					categories: [],
+					series: [{
+						name: '',
+						data: []
+					}]
+				},
+				searchContent: {
+					text: '',
+					value: ''
+				},
+				dictList: [[]],
+				incomeTypePicker: false,
+				reportType: '',
+				queryDate: ''
+			}
+		},
+		created() {
+			this.getDict();
+		},
+		methods: {
+			getData({ reportType, queryDate }) {
+				this.reportType = reportType
+				this.queryDate = queryDate
+				this.getIncomeData()
+			},
+			getDict() {
+				uni.$u.api.getDictApi({  type: 'income_type'}).then(res => {
+					console.log(res)
+					if (res.code === 200) {
+							let list = res.data.map((item => {
+								return {
+									text: item.dictLabel,
+									value: item.dictValue
+								}
+							}))
+							this.dictList = [list]
+							this.searchContent = this.dictList[0][0]
+					}
+				})
+			},
+			getIncomeData() {
+				uni.$u.api.operationalAnalysisApi.getIncomeDataApi({
+					reportType: this.reportType,
+					queryDate: this.queryDate,
+					incomeType: this.searchContent.value
+				}).then(res => {
+					console.log(res)
+					if (res.code === 200) {
+						if (res.data.itemList && res.data.itemList.length) {
+							this.chartData.categories = res.data.itemList.map(item => {
+								return item.statisTime
+							})
+							this.chartData.series[0].data = res.data.itemList.map(item => {
+								return item.amt
+							})
+						} else {
+							this.chartData.categories = []
+							this.chartData.series[0].data = []
+						}
+					}
+				})
+			},
+			incomeTypeConfirm(e) {
+				this.searchContent = e.value[0]
+				this.getIncomeData()
+				this.incomeTypePicker = false
+			},
+			searchClick() {
+				// this.getIncomeData()
+			}
 		}
 	}
-</script>
+</script>
+
+<style lang="scss" scoped>
+	.revenue {
+		background-color: #fff;
+		border-radius: 5px;
+		&-search {
+			margin-bottom: 12px;
+			padding: 19px 15px 0 15px;
+			display: flex;
+			&-item {
+				width: 48%;
+				margin-right: 2%;
+				&-btn {
+					width: 50%;
+					height: 38px;
+				}
+			}
+		}
+	}
+	.empty {
+		padding: 15px;
+	}
+</style>

pages/dataOverview/operationalAnalysis/components/paymentMethod.vue

@@ -2,7 +2,10 @@
 <template>
 	<view class="revenue">
 		<view class="revenue-line">
-			<PieChart :chartData="chartData" :title="title"/>
+			<PieChart v-if="chartData.series[0].data.length" :chartData="chartData" :title="title"/>
+			<view class="empty" v-else>
+				<u-empty></u-empty>
+			</view>
 		</view>
 	</view>
 </template>
@@ -17,13 +20,76 @@
 			title: {
 				type: String,
 				default: ''
-			},
-			chartData: {
-				type: Object,
-				default: () => {
-					return {}
+			}
+		},
+		data() {
+			return {
+				reportType: '',
+				queryDate: '',
+				paySourceList: [],
+				chartData: {
+					series: [{
+						data: []
+					}]
 				}
 			}
+		},
+		created() {
+			this.getDict()
+		},
+		methods: {
+			getData({ reportType, queryDate }) {
+				this.reportType = reportType
+				this.queryDate = queryDate
+				this.getPaymentWaysData()
+			},
+			getDict() {
+				uni.$u.api.getDictApi({  type: 'pay_source'}).then(res => {
+					if (res.code === 200) {
+						this.paySourceList = res.data
+					}
+				})
+			},
+			getPaymentWaysData() {
+				uni.$u.api.operationalAnalysisApi.getPaymentWaysDataApi({
+					reportType: this.reportType,
+					queryDate: this.queryDate
+				}).then(res => {
+					if (res.code === 200) {
+						if (res.data.itemList && res.data.itemList.length) {
+							let list = res.data.itemList.map(item => {
+								return {
+									name: this.getDictLabel(item.paySource),
+									value: item.amt
+								}
+							})
+							this.chartData.series[0].data = list
+						} else {
+							this.chartData.series[0].data = []
+						}
+					}
+				})
+			},
+			getDictLabel(value) {
+				let name
+				this.paySourceList.forEach(item => {
+					if (item.dictValue == value) {
+						name = item.dictLabel
+					}
+				})
+				if (!name) name = '其他'
+				return name
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	.revenue {
+		background-color: #fff;
+		border-radius: 5px;
+		.empty {
+			padding: 15px;
 		}
 	}
-</script>
+</style>

pages/dataOverview/operationalAnalysis/components/revenueAnalysis.vue

@@ -3,12 +3,18 @@
 	<view class="revenue">
 		<template v-if="type === 'line'">
 			<view class="revenue-line">
-				<LineChart :chartData="chartData" :title="title"/>
+				<LineChart v-if="chartData.series[0].data.length" :chartData="chartData" :title="title"/>
+				<view class="empty" v-else>
+					<u-empty></u-empty>
+				</view>
 			</view>
 		</template>
 		<template v-else>
 			<view class="revenue-line">
-				<ColumnChart :chartData="chartData" :title="title"/>
+				<ColumnChart v-if="chartData.series[0].data.length" :chartData="chartData" :title="title"/>
+				<view class="empty" v-else>
+					<u-empty></u-empty>
+				</view>
 			</view>
 		</template>
 	</view>
@@ -70,4 +76,14 @@
 			}
 		}
 	}
-</script>
+</script>
+
+<style lang="scss" scoped>
+	.revenue {
+		background-color: #fff;
+		border-radius: 5px;
+		.empty {
+			padding: 15px;
+		}
+	}
+</style>

pages/dataOverview/operationalAnalysis/components/sectionAnalysis.vue

@@ -5,13 +5,19 @@
 		<view class="section-part">
 			<view class="section-part-title"><text>|</text>营收趋势分析</view>
 			<view class="section-part-content">
-				<ColumnChart :chartData="revenueTrendsData" :title="title" :opts="opts1"/>
+				<ColumnChart v-if="revenueTrendsData.series[0].data.length" :chartData="revenueTrendsData" :title="title" :opts="opts1"/>
+				<view class="empty" v-else>
+					<u-empty></u-empty>
+				</view>
 			</view>
 		</view>
 		<view class="section-part">
 			<view class="section-part-title"><text>|</text>车流量统计</view>
 			<view class="section-part-content">
-				<ColumnChart :chartData="trafficFlowData" :title="title" :opts="opts2"/>
+				<ColumnChart v-if="trafficFlowData.series[0].data.length" :chartData="trafficFlowData" :title="title" :opts="opts2"/>
+				<view class="empty" v-else>
+					<u-empty></u-empty>
+				</view>
 			</view>
 		</view>
 	</view>
@@ -163,5 +169,8 @@
 				}
 			}
 		}
+		.empty {
+			padding: 15px;
+		}
 	}
 </style>

pages/dataOverview/operationalAnalysis/components/sourceOfPayment.vue

@@ -2,7 +2,10 @@
 <template>
 	<view class="revenue">
 		<view class="revenue-line">
-			<LineChart :chartData="chartData" :title="title" :opts="opts"/>
+			<LineChart v-if="chartData.series[0].data.length" :chartData="chartData" :title="title" :opts="opts"/>
+			<view class="empty" v-else>
+				<u-empty></u-empty>
+			</view>
 		</view>
 	</view>
 </template>
@@ -18,12 +21,6 @@
 				type: String,
 				default: ''
 			},
-			chartData: {
-				type: Object,
-				default: () => {
-					return {}
-				}
-			},
 			opts: {
 				type: Object,
 				default: () => {
@@ -51,6 +48,80 @@
 					}
 				}
 			}
+		},
+		data() {
+			return {
+				paySourceList: [],
+				chartData: {
+					categories: [],
+					series: [{
+						name: '',
+						data: []
+					}]
+				},
+				reportType: '',
+				queryDate: ''
+			}
+		},
+		created() {
+			this.getDict()
+		},
+		methods: {
+			getData({ reportType, queryDate }) {
+				this.reportType = reportType
+				this.queryDate = queryDate
+				this.getPaySourceData()
+			},
+			getDict() {
+				uni.$u.api.getDictApi({ type: 'pay_platform' }).then(res => {
+					if (res.code === 200) {
+						this.paySourceList = res.data
+					}
+				})
+			},
+			getPaySourceData() {
+				uni.$u.api.operationalAnalysisApi.getPaySourceDataApi({
+					reportType: this.reportType,
+					queryDate: this.queryDate
+				}).then(res => {
+					console.log(res)
+					if (res.code === 200) {
+						if (res.data.itemList && res.data.itemList.length) {
+							let cateList = []
+							res.data.itemList.forEach(item => {
+								cateList.push(this.getDictLabel(item.payPlatform))
+							})
+							this.chartData.categories = cateList
+							this.chartData.series[0].data = res.data.itemList.map(item => {
+								return item.amt
+							})
+						} else {
+							this.chartData.categories = []
+							this.chartData.series[0].data = []
+						}
+					}
+				})
+			},
+			getDictLabel(value) {
+				let name
+				this.paySourceList.forEach(item => {
+					if (item.dictValue == value) {
+						name = item.dictLabel
+					}
+				})
+				if (!name) name = '其他'
+				return name
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	.revenue {
+		background-color: #fff;
+		border-radius: 5px;
+		.empty {
+			padding: 15px;
 		}
 	}
-</script>
+</style>

pages/dataOverview/operationalAnalysis/components/tollCollectorPerformance.vue

@@ -5,7 +5,10 @@
 			<TableRanking :loading="loading" :title="title" :tableTh="tableTh" :tableData="tableData"  @pageChange="pageChange"/>
 		</template>
 		<template v-else>
-			<LineChart :chartData="chartData" :title="title"/>
+			<LineChart v-if="chartData.series[0].data.length" :chartData="chartData" :title="title"/>
+			<view class="empty" v-else>
+				<u-empty></u-empty>
+			</view>
 		</template>
 	</view>
 </template>
@@ -110,3 +113,13 @@
 		}
 	}
 </script>
+
+<style lang="scss" scoped>
+	.performance {
+		background-color: #fff;
+		border-radius: 5px;
+		.empty {
+			padding: 15px;
+		}
+	}
+</style>

pages/dataOverview/operationalAnalysis/components/trafficFlow.vue

@@ -2,7 +2,10 @@
 <template>
 	<view class="revenue">
 		<view class="revenue-line">
-			<LineChart :chartData="chartData" :title="title" :opts="opts"/>
+			<LineChart v-if="chartData.series[0].data.length" :chartData="chartData" :title="title" :opts="opts"/>
+			<view class="empty" v-else>
+				<u-empty></u-empty>
+			</view>
 		</view>
 	</view>
 </template>
@@ -78,4 +81,14 @@
 			}
 		}
 	}
-</script>
+</script>
+
+<style lang="scss" scoped>
+	.revenue {
+		background-color: #fff;
+		border-radius: 5px;
+		.empty {
+			padding: 15px;
+		}
+	}
+</style>

pages/dataOverview/operationalAnalysis/operationalAnalysis.vue

@@ -36,16 +36,16 @@
 				<SectionAnalysis ref="sectionAnalysis" :title="title"/>
 			</template>
 			<template v-else-if="currentType.value === 8">
-				<ArrearsAnalysis :chartData="currentType.data" :title="title"/>
+				<ArrearsAnalysis ref="arrearsAnalysis" :title="title"/>
 			</template>
 			<template v-else-if="currentType.value === 9">
-				<IncomeAnalysis :chartData="currentType.data" :title="title"/>
+				<IncomeAnalysis ref="incomeAnalysis" :title="title"/>
 			</template>
 			<template v-else-if="currentType.value === 10">
-				<PaymentMethod :chartData="currentType.data" :title="title"/>
+				<PaymentMethod ref="paymentMethod" :title="title"/>
 			</template>
 			<template v-else-if="currentType.value === 11">
-				<SourceOfPayment :chartData="currentType.data" :title="title"/>
+				<SourceOfPayment ref="sourceOfPayment" :title="title"/>
 			</template>
 		</view>
 		<!-- 分析类型 -->
@@ -149,64 +149,22 @@
 						{
 							text: '欠费分析',
 							value: 8,
-							data: {
-								categories: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
-								series: [{
-									name: '',
-									data: [10, 10, 20, 30, 40, 0, 0, 0, 0, 0, 0, 0]
-								}]
-							}
+							key: 'arrearsAnalysis'
 						},
 						{
 							text: '收入分析',
 							value: 9,
-							data: {
-								categories: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
-								series: [{
-									name: '',
-									data: [10, 10, 20, 30, 40, 0, 0, 0, 0, 0, 0, 0]
-								}]
-							}
+							key: 'incomeAnalysis'
 						},
 						{
 							text: '支付方式占比',
 							value: 10,
-							data: {
-								series: [{
-									data: [{
-											"name": "一班",
-											"value": 50
-										},
-										{
-											"name": "二班",
-											"value": 30
-										},
-										{
-											"name": "三班",
-											"value": 20
-										},
-										{
-											"name": "四班",
-											"value": 18
-										},
-										{
-											"name": "五班",
-											"value": 8
-										}
-									]
-								}]
-							}
+							key: 'paymentMethod'
 						},
 						{
 							text: '支付来源分析',
 							value: 11,
-							data: {
-								categories: [1, 2, 3, 4, 5],
-								series: [{
-									name: '',
-									data: [10, 10, 20, 30, 40]
-								}]
-							}
+							key: 'sourceOfPayment'
 						}
 					]
 				],

vue.config.js

@@ -4,7 +4,7 @@ module.exports = {
 		disableHostCheck:true,
 		proxy:{
 			'/api':{
-				target: 'http://172.16.90.64:7000/',
+				target: 'http://parking.hw.hongweisoft.com/pudprod-api/',
 				changeOrigin: true,
 				pathRewrite:{
 					'^/api': ''