1182 lines
44 KiB
Vue
1182 lines
44 KiB
Vue
<template>
|
|
<div>
|
|
<div style="position: fixed;right: 0;top: 15%;z-index:99999999999">
|
|
<!-- 组件通过传入的have去判断组件在哪个页面 然后哪个页面的标志就不显示 -->
|
|
<commercial-type :have="0"/>
|
|
</div>
|
|
<div class="main" v-if="isHaveData">
|
|
<div class="header" :style="{backgroundImage: 'url('+ 'https://eshangtech.com/ShopICO/ahyd-BID/commercial/car.svg' +')'}">
|
|
<div class="analyse">
|
|
<text class="title">分析</text>
|
|
<text class="content">{{analyseText}}</text>
|
|
</div>
|
|
<div class="headerTop" :style="{height:(menu.bottom + 6) + 'px'}">
|
|
<div class="box" :style="{top:(menu.bottom - (menu.height / 2)) + 'px'}">
|
|
<div class="icon" @click="handleBack">
|
|
<image class="img" src="https://eshangtech.com/ShopICO/ahyd-BID/commercial/navigation-left.svg"></image>
|
|
</div>
|
|
<text class="title">车流画像</text>
|
|
<!-- 占位 -->
|
|
<div class="seize"></div>
|
|
</div>
|
|
</div>
|
|
<div class="serviceArea" :style="{top : (menu.bottom + 14) + 'px'}" @click="handleGoSelectService">
|
|
<div class="picker">
|
|
<div class="selectService">
|
|
<image class="img" src="https://eshangtech.com/ShopICO/ahyd-BID/commercial/fixed.svg"></image>
|
|
<view class="select">
|
|
<view class="content">
|
|
<view class="uni-input">{{serviceInfo.SERVERPART_NAME}}</view>
|
|
<p class="area">{{serviceInfo.SPREGIONTYPE_NAME}}</p>
|
|
<image class="rightArrow" src="https://eshangtech.com/ShopICO/ahyd-BID/commercial/rightArrow.svg"></image>
|
|
</view>
|
|
</view>
|
|
</div>
|
|
</div>
|
|
<div class="other">
|
|
<div class="label">
|
|
<div v-for="(item,index) in labelList" :key="index" :class="index===0?'item0 item':index===1?'item1 item':index===2?'item2 item':index===3?'item3 item':index===4?'item4 item':'item'">
|
|
{{item}}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="charts">
|
|
<div class="chartsItem">
|
|
<div style="display: flex;align-items: center;justify-content: space-between">
|
|
<p class="title">昨日入区车流</p>
|
|
<div class="item">
|
|
<text class="value">{{time}}</text>
|
|
</div>
|
|
</div>
|
|
<div v-if="carData.length>0">
|
|
<entry-zone :carData="carData" :time="time" :month="thisMonth"/>
|
|
<analyse :analyseInfo="{analysisins_type: 1102,analysisins_format: 2000}" />
|
|
</div>
|
|
<no-data v-if="!carData.length" :type="'car'"/>
|
|
</div>
|
|
|
|
|
|
<div class="chartsItem" style="margin-top: 32px">
|
|
<p class="title">月度车流累计</p>
|
|
<div>
|
|
<month-total :data="monthTotalList"/>
|
|
<analyse :analyseInfo="{analysisins_type: 1107,analysisins_format: 2000}" />
|
|
</div>
|
|
</div>
|
|
|
|
<div class="chartsItem" style="margin-top: 32px">
|
|
<div class="time">
|
|
<text class="thisTime"></text>
|
|
<div class="select">
|
|
<picker mode="date" fields="month" :value="single" :end="endData" @change="bindDateChange" >
|
|
<view class="time">
|
|
<view class="uni-input" style="background: transparent;padding: 0;height:100%">{{ single }}</view>
|
|
<image class="icon" src="/static/images/index/arrow_bottom.svg"></image>
|
|
</view>
|
|
</picker>
|
|
</div>
|
|
</div>
|
|
<view class="tab" >
|
|
<view v-for="(item,index) in tabList" :key="index" :class="selectTab===item.value?'tabItem tabItemActive':'tabItem'" @click="handleChangeTab(item.value)">{{item.name}}</view>
|
|
</view>
|
|
|
|
|
|
<p class="title">{{thisMonth?thisMonth:'-'}}月车辆归属地</p>
|
|
<div v-if="homePlace.length>0">
|
|
<home-place :homeData="homePlace" :homeCity="cityPlace" />
|
|
<div class="selectType">
|
|
<div :class="item.select?'item itemSelect':'item itemUnSelect'" v-for="(item,index) in carTypeList" :key="index" @click="handleCarType(item)">
|
|
<div class="text">{{item.name}}</div>
|
|
</div>
|
|
</div>
|
|
<analyse :analyseInfo="{analysisins_type: 1103,analysisins_format: 2000}" />
|
|
</div>
|
|
<no-data v-if="!homePlace.length" :type="'car'"/>
|
|
</div>
|
|
<div class="chartsItem" style="margin-top: 32px">
|
|
<p class="title">{{thisMonth?thisMonth:'-'}}月车型停留分析/日均</p>
|
|
<div v-if="carTypeTimeData.series.length>0">
|
|
<car-type-time :data="carTypeTimeData"/>
|
|
<analyse :analyseInfo="{analysisins_type: 1104,analysisins_format: 2000}" />
|
|
</div>
|
|
<no-data v-if="!carTypeTimeData.series.length" :type="'car'"/>
|
|
</div>
|
|
<div class="chartsItem" style="margin-top: 32px">
|
|
<p class="title">{{thisMonth?thisMonth:'-'}}月车型停留分布图/日均</p>
|
|
<div v-if="timeAnalysisData.series.length>0">
|
|
<time-analysis :data="timeAnalysisData"/>
|
|
<analyse :analyseInfo="{analysisins_type: 1105,analysisins_format: 2000}" />
|
|
</div>
|
|
<no-data v-if="!timeAnalysisData.series.length" :type="'car'"/>
|
|
</div>
|
|
<div class="chartsItem" style="margin-top: 32px">
|
|
<div class="topItem" >
|
|
<p class="title">{{thisMonth?thisMonth:'-'}}月入区车型占比</p>
|
|
<div class="box" v-if="allEntry">
|
|
<text class="value">{{allEntry?allEntry:'-'}}%</text>
|
|
<view class="right" v-if="addAllEntry">
|
|
<text class="compare">(较上月)</text>
|
|
<image class="arrowTop" :src="Number(addAllEntry)>0?'https://eshangtech.com/ShopICO/ahyd-BID/index/addIcon.svg':'https://eshangtech.com/ShopICO/ahyd-BID/index/reduce.svg'"></image>
|
|
<text class="text">{{addAllEntry?Math.abs(addAllEntry) + '%':'-' + '%'}}</text>
|
|
</view>
|
|
</div>
|
|
</div>
|
|
<div v-if="percentEntryData.length>0">
|
|
<percent-entry :data="percentEntryData" />
|
|
<analyse :analyseInfo="{analysisins_type: 1106,analysisins_format: 2000}" />
|
|
</div>
|
|
<no-data v-if="!percentEntryData.length" :type="'car'"/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div v-else class="noData">
|
|
<div class="box">
|
|
<image class="img" src="https://eshangtech.com/ShopICO/ahyd-BID/commercial/noData.svg"></image>
|
|
<p class="text">抱歉,第三方数据未传,无法分析</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import request from '@/util/index.js'
|
|
import EntryZone from "./components/car/entryZone.vue";
|
|
import HomePlace from "./components/car/homePlace.vue";
|
|
import CarTypeTime from "./components/car/carTypeTime.vue";
|
|
import timeAnalysis from "./components/car/timeAnalysis.vue";
|
|
import PercentEntry from "./components/car/percentEntry.vue";
|
|
import MonthTotal from "./components/car/monthTotal.vue";
|
|
import NoData from "./components/noData.vue";
|
|
import Analyse from "./components/analyse.vue";
|
|
import CommercialType from "./commercialType.vue";
|
|
export default {
|
|
name: "carPortrait",
|
|
data(){
|
|
const lastDay = this.$util.cutDate(new Date(), 'YYYY-MM-DD', -1)
|
|
return {
|
|
menu:{}, //手机参数
|
|
serviceArray:["123465","123465","123465","123465","123465"], // 选择服务区的列表
|
|
serviceIndex:0, //选中的服务区列表的第几个
|
|
area:'片区', //属于哪个片区
|
|
labelList:[], //标签
|
|
time:'',//当前时间
|
|
Serverpart_ID:'',//服务区id
|
|
chartData:{},
|
|
selectTab: 0,
|
|
tabIsTrue: true,
|
|
tabList:[],//选项卡列表
|
|
carTypeList:[],//车型选项卡
|
|
carNumAll : 0,//一共的入区车流数
|
|
monthTotalList:[],//月累计
|
|
carData:[],//入区车流的数据
|
|
homePlaceAll:[],//车辆归属地两区总和列表
|
|
homePlace:[],//车辆归属地
|
|
cityPlaceAll:[],//车辆归属地的城市总和列表
|
|
cityPlace:[],//车辆归属地的城市
|
|
carTypeTimeDataAll:[{},{},{}],//车辆类型占比与停留时间总和列表
|
|
carTypeTimeData:[],//车辆类型占比与停留时间
|
|
timeAnalysisData:[],// 车辆价值与停留时间分析
|
|
percentEntryData:[],//入区率占比
|
|
percentEntryDataAll:[],// 入区率占比总的
|
|
serviceInfo:{}, //当前服务区信息
|
|
backType:'',//返回的页面类型
|
|
analyseText:'',//分析的文字
|
|
single:'',//显示时间
|
|
lastDay:lastDay,
|
|
endTime:'',
|
|
thisMonth:'',//几月
|
|
allEntry:'',//一共的入区率占比
|
|
addAllEntry:'',//相较上月增加的入区率
|
|
endData:'',//截止日期
|
|
isFirst:true,//是不是第一次调用
|
|
}
|
|
},
|
|
components: {
|
|
CommercialType,
|
|
Analyse, NoData, PercentEntry, CarTypeTime, HomePlace, EntryZone,timeAnalysis,MonthTotal},
|
|
computed:{
|
|
isHaveData(){
|
|
return true
|
|
}
|
|
},
|
|
onLoad(option){
|
|
this.backType = option.type
|
|
},
|
|
onShow(){
|
|
this.isFirst = true
|
|
// 总的来说商业bi的五个页面都是 往组件里面传值 就可以出现图表和要求的东西
|
|
// 外面的一层页面主要用于处理数据
|
|
let nowTime = new Date()
|
|
let y = nowTime.getFullYear()
|
|
let month = nowTime.getMonth() + 1
|
|
if (month<10){
|
|
month = '0'+ month
|
|
}
|
|
this.endData = `${y}-${month}`
|
|
let storeTime = uni.getStorageSync('lastDay')
|
|
if (storeTime){
|
|
this.time = storeTime
|
|
}
|
|
this.single = this.$util.getThisMonthHave(this.time)
|
|
const date = new Date(this.single)
|
|
//设置日期选择器的开始时间和结束时间
|
|
let m = date.getMonth() + 1
|
|
if (m<10){
|
|
m = '0' + m
|
|
}
|
|
this.thisMonth = m
|
|
// 获取手机参数对页面进行适配
|
|
let systemInfo = uni.getSystemInfoSync()
|
|
// 把获取到的手机参数保存
|
|
uni.setStorageSync('phoneInfo',systemInfo)
|
|
this.statusBarHeight = Number(systemInfo.statusBarHeight)
|
|
this.menu = uni.getMenuButtonBoundingClientRect()
|
|
// 把获取图表数据的方法统一放在一起 然后去请求接口拿到数据 再分批传到相对应的图标组件
|
|
// 每个图表都是用组件的方式引入的 数据是通过prop传入的
|
|
let storeServiceInfo = uni.getStorageSync('currentService')
|
|
let nearServiceInfo = uni.getStorageSync('nearService')
|
|
if (!storeServiceInfo){
|
|
this.serviceInfo = nearServiceInfo
|
|
}else{
|
|
this.serviceInfo = storeServiceInfo
|
|
}
|
|
//获取服务区基本信息
|
|
this.getServiceInfo()
|
|
//月累计
|
|
this.getMonthTotalList()
|
|
// 入区车流分析
|
|
this.getCarData()
|
|
// 车辆归属地
|
|
this.getHomeData()
|
|
// 车辆类型占比与停留时间
|
|
this.getCarTypeTime()
|
|
// 车辆价值与停留时间分析
|
|
this.getTimeAnalysis('')
|
|
//入区率占比
|
|
this.getPercentEntry()
|
|
//获得标签
|
|
this.getLabelDetail()
|
|
},
|
|
onReady(){
|
|
|
|
},
|
|
methods:{
|
|
//车型选择
|
|
handleCarType(selectItem){
|
|
this.carTypeList.forEach(item=>{
|
|
if (item.value === selectItem.value){
|
|
if (item.select){
|
|
item.select = false
|
|
}else{
|
|
item.select = true
|
|
}
|
|
}else{
|
|
item.select = false
|
|
}
|
|
})
|
|
let type
|
|
this.carTypeList.forEach(item=>{
|
|
if (item.select){
|
|
type = item.value
|
|
}
|
|
})
|
|
|
|
|
|
this.getHomeData(type)
|
|
},
|
|
//获取服务区基本信息
|
|
async getServiceInfo(){
|
|
let id = ''
|
|
let currentService = uni.getStorageSync('currentService')
|
|
let nearService = uni.getStorageSync('nearService')
|
|
if (!currentService){
|
|
id = nearService.Serverpart_ID
|
|
}else{
|
|
id = currentService.Serverpart_ID
|
|
}
|
|
let req = {
|
|
ServerpartId:id
|
|
}
|
|
const total = await request.$webGet('CommercialApi/BaseInfo/GetServerpartInfo',req)
|
|
// 每次调用接口不能破坏tabList的数据格式
|
|
let tabList = [{name:'全部',value:0}]
|
|
total.Result_Data.RegionInfo.forEach((item,index)=>{
|
|
tabList.push({name:item.SERVERPART_REGIONNAME,value:index+1})
|
|
})
|
|
this.tabList = tabList
|
|
},
|
|
// 时间选择器改变的时间
|
|
bindDateChange(e){
|
|
const date = new Date(e.detail.value)
|
|
let m = date.getMonth() + 1
|
|
if (m<10){
|
|
m = '0' + m
|
|
}
|
|
this.thisMonth = m
|
|
this.single = e.detail.value
|
|
let d = this.$util.getThisMonthDay(e.detail.value)
|
|
this.endTime = e.detail.value + '-' + d
|
|
this.onRefresh()
|
|
},
|
|
//重新调一遍页面数据的方法
|
|
onRefresh(){
|
|
// 车辆归属地
|
|
this.getHomeData()
|
|
// 车辆类型占比与停留时间
|
|
this.getCarTypeTime()
|
|
// 车辆价值与停留时间分析
|
|
this.getTimeAnalysis('')
|
|
//入区率占比
|
|
this.getPercentEntry()
|
|
},
|
|
//获得标签
|
|
async getLabelDetail(){
|
|
//六个标签
|
|
let req = {
|
|
SearchParameter:{
|
|
STATISTICS_DATE:this.time,
|
|
ANALYSISINS_TYPE:1101,
|
|
ANALYSISINS_FORMAT:1000,
|
|
ANALYSISINS_STATE:1,
|
|
SERVERPART_ID:this.serviceInfo.Serverpart_ID,
|
|
},
|
|
PageIndex:1,
|
|
PageSize:10
|
|
}
|
|
//分析的文字
|
|
let reqText = {
|
|
SearchParameter:{
|
|
STATISTICS_DATE:this.time,
|
|
ANALYSISINS_TYPE:1101,
|
|
ANALYSISINS_FORMAT:2000,
|
|
ANALYSISINS_STATE:1,
|
|
SERVERPART_ID:this.serviceInfo.Serverpart_ID,
|
|
},
|
|
PageIndex:1,
|
|
PageSize:10
|
|
}
|
|
//六个标签
|
|
const data = await request.$webPost('CommercialApi/Analysis/GetANALYSISINSList',req)
|
|
let list = []
|
|
data.Result_Data.List.forEach(item=>{
|
|
list.push(item.ANALYSIS_CONTENT)
|
|
})
|
|
this.labelList = list
|
|
//分析的文字
|
|
const total = await request.$webPost('CommercialApi/Analysis/GetANALYSISINSList',reqText)
|
|
this.analyseText = total.Result_Data.List[0]?total.Result_Data.List[0].ANALYSIS_CONTENT:''
|
|
},
|
|
//当前最近的服务区数据
|
|
async nearestService(){
|
|
let storeServiceInfo = uni.getStorageSync('currentService')
|
|
let nearServiceInfo = uni.getStorageSync('nearService')
|
|
// 判断如果已经有了当前服务区 就用当前服务区 没有就用最近的服务区
|
|
if (storeServiceInfo){
|
|
this.serviceInfo = storeServiceInfo
|
|
}else {
|
|
this.serviceInfo = nearServiceInfo
|
|
}
|
|
},
|
|
//跳转到地图
|
|
handleGoSelectService() {
|
|
uni.navigateTo({
|
|
url:`/pages/map/index?chartType=${true}&page=/pages/commercialBI/carPortrait&serviceInfo=${JSON.stringify(this.serviceInfo)}`
|
|
})
|
|
},
|
|
handleBack(){
|
|
// 因为首页 和 用户页面都可以跳进来 做个判断
|
|
if (this.backType==='userCenter'){
|
|
uni.switchTab({
|
|
url: '/pages/userCenter/userCenter'
|
|
})
|
|
}else{
|
|
uni.switchTab({
|
|
url: '/pages/index/index'
|
|
})
|
|
}
|
|
},
|
|
//切换改变选项卡
|
|
// 因为只让接口调用一次 所以要把全部和不同区域的内容要放在同一个列表里面 然后通过选项卡的点击来切换展示哪一块的数据
|
|
handleChangeTab(value){
|
|
let Serverpart_Region = ''
|
|
this.tabList.forEach(item=>{
|
|
if (item.value === value && item.value!==0){
|
|
Serverpart_Region = item.name
|
|
}
|
|
})
|
|
// if (this.tabIsTrue){
|
|
this.selectTab = value
|
|
// 车辆归属地
|
|
this.homePlace = this.homePlaceAll[this.selectTab]?this.homePlaceAll[this.selectTab]:[]
|
|
this.cityPlace = this.cityPlaceAll[this.selectTab]?this.cityPlaceAll[this.selectTab]:[]
|
|
// 车辆类型占比与停留时间
|
|
this.carTypeTimeData = this.carTypeTimeDataAll[this.selectTab]?this.carTypeTimeDataAll[this.selectTab]:[]
|
|
// 车辆价值与停留时间分析
|
|
this.getTimeAnalysis(Serverpart_Region)
|
|
//入区率占比
|
|
this.getPercentEntry(this.tabList[this.selectTab].name)
|
|
// }
|
|
|
|
},
|
|
async getMonthTotalList(){
|
|
let time
|
|
let nowYear
|
|
let yerYear
|
|
if (this.endTime){
|
|
const date = new Date(this.endTime)
|
|
let y = date.getFullYear() - 1
|
|
let m = date.getMonth() + 1
|
|
if (m<10){
|
|
m = '0'+ m
|
|
}
|
|
let d = date.getDate()
|
|
time = `${y}-${m}-${d}`
|
|
nowYear = y + 1
|
|
yerYear = y
|
|
}else{
|
|
const date = new Date(this.time)
|
|
let y = date.getFullYear() - 1
|
|
let m = date.getMonth() + 1
|
|
if (m<10){
|
|
m = '0'+ m
|
|
}
|
|
let d = date.getDate()
|
|
time = `${y}-${m}-${d}`
|
|
nowYear = y + 1
|
|
yerYear = y
|
|
}
|
|
const req = {
|
|
StatisticsDate:this.endTime?this.endTime:this.time,
|
|
Serverpart_ID:this.serviceInfo.Serverpart_ID
|
|
}
|
|
const data = await request.$webGet('CommercialApi/BigData/GetMonthAnalysis',req)
|
|
let monthList = []
|
|
let carCount = []
|
|
let carCountMax = 0
|
|
let moneyCount = []
|
|
let monetCountMax = 0
|
|
let info = []
|
|
data.Result_Data.List.forEach(item=>{
|
|
monthList.push(item.Statistics_Month + '月')
|
|
if (carCountMax<item.Vehicle_Count){
|
|
carCountMax = item.Vehicle_Count
|
|
}
|
|
if (monetCountMax<item.RevenueAmount){
|
|
monetCountMax = item.RevenueAmount
|
|
}
|
|
if (item.Vehicle_Count === 0){
|
|
carCount.push(0)
|
|
}else{
|
|
carCount.push(Number((item.Vehicle_Count / 10000)))
|
|
}
|
|
moneyCount.push(Number((item.RevenueAmount / 10000)))
|
|
// showTip要展示的信息
|
|
info.push({
|
|
allCarCount : item.Vehicle_Count,
|
|
region:item.RegionList,
|
|
rate:item.Entry_Rate,
|
|
money:item.RevenueAmount,
|
|
year:nowYear
|
|
})
|
|
})
|
|
|
|
|
|
const reqYes = {
|
|
StatisticsDate:time,
|
|
Serverpart_ID:this.serviceInfo.Serverpart_ID
|
|
}
|
|
const dataYes = await request.$webGet('CommercialApi/BigData/GetMonthAnalysis',reqYes)
|
|
let monthListYes = []
|
|
let carCountYes = []
|
|
let carCountMaxYes = 0
|
|
let moneyCountYes = []
|
|
let monetCountMaxYes = 0
|
|
let infoYes = []
|
|
dataYes.Result_Data.List.forEach(item=>{
|
|
monthListYes.push(item.Statistics_Month + '月')
|
|
if (carCountMaxYes<item.Vehicle_Count){
|
|
carCountMaxYes = item.Vehicle_Count
|
|
}
|
|
if (monetCountMaxYes<item.RevenueAmount){
|
|
monetCountMaxYes = item.RevenueAmount
|
|
}
|
|
if (item.Vehicle_Count === 0){
|
|
carCountYes.push(0)
|
|
}else{
|
|
carCountYes.push(Number((item.Vehicle_Count / 10000)))
|
|
}
|
|
moneyCountYes.push(Number((item.RevenueAmount / 10000)))
|
|
// showTip要展示的信息
|
|
infoYes.push({
|
|
allCarCount : item.Vehicle_Count,
|
|
region:item.RegionList,
|
|
rate:item.Entry_Rate,
|
|
money:item.RevenueAmount,
|
|
year:yerYear
|
|
})
|
|
})
|
|
|
|
let res = {
|
|
categories: monthList,
|
|
series:[{name:`${nowYear}年车流量`,data:carCount,type:'column',index:0,info:info,max:carCountMax / 10000,year:nowYear},
|
|
{name:`${yerYear}年车流量`,data:carCountYes,type:'column',index:0,info:infoYes,max:carCountMaxYes / 10000,year:yerYear},
|
|
{name:`${nowYear}年交易额`,data:moneyCount,type:'line',index:1,info:info,max:monetCountMax / 10000,year:nowYear},
|
|
{name:`${yerYear}年交易额`,data:moneyCountYes,type:'line',index:1,info:infoYes,max:monetCountMaxYes / 10000,year:yerYear}]
|
|
}
|
|
this.monthTotalList = res
|
|
// categories: ["小型车","中型车","大货车","新能源车"],
|
|
// series: [{name:'新能源',data:[30,38,20,10]},
|
|
// {name:'燃油车',data:[20,17,23,32]},
|
|
// {name:'停留时间',data:[62,38,50,84]}]
|
|
},
|
|
getCarData(){
|
|
request.$webGet('CommercialApi/Revenue/GetBayonetEntryList',{
|
|
StatisticsDate: this.time,
|
|
Serverpart_ID :this.serviceInfo.Serverpart_ID,
|
|
ShowAddUpCount:true
|
|
}).then(res=>{
|
|
this.carData = res.Result_Data.List
|
|
})
|
|
},
|
|
getHomeData(type){
|
|
console.log('type',type)
|
|
const date = new Date(this.endTime?this.endTime:this.time)
|
|
let y = date.getFullYear()
|
|
let m = date.getMonth() + 1
|
|
if (m<10){
|
|
m='0'+m
|
|
}
|
|
let statistic = `${y}${m}`
|
|
let req
|
|
if (type){
|
|
req = {
|
|
StatisticsMonth:statistic,
|
|
Serverpart_ID:this.serviceInfo.Serverpart_ID,
|
|
ContainWhole:true,
|
|
VehicleType:type
|
|
}
|
|
}else{
|
|
req = {
|
|
StatisticsMonth:statistic,
|
|
Serverpart_ID:this.serviceInfo.Serverpart_ID,
|
|
ContainWhole:true
|
|
}
|
|
}
|
|
request.$webGet('CommercialApi/Revenue/GetBayonetOAList',req).then(res=>{
|
|
if (this.isFirst){
|
|
let list = []
|
|
res.Result_Data.OtherData.forEach(item=>{
|
|
list.push({name:item,value:item,select:false})
|
|
})
|
|
this.carTypeList =list
|
|
this.isFirst = false
|
|
}
|
|
|
|
// 因为只让接口调用一次 所以要把全部和不同区域的内容要放在同一个列表里面 然后通过选项卡的点击来切换展示哪一块的数据
|
|
let result = res.Result_Data.List
|
|
result.forEach(item=>{
|
|
let priceAll = 0
|
|
item.OwnerProvinceList.forEach(subItem=>{
|
|
priceAll+=Number(subItem.value)
|
|
})
|
|
item.OwnerCityList.forEach(subItem=>{
|
|
subItem.value = Number(subItem.value)
|
|
subItem.rate = ((Number(subItem.value) / item.Vehicle_Count)*100)
|
|
})
|
|
item.OwnerProvinceList.forEach(subItem=>{
|
|
subItem.rate = ((Number(subItem.value) / priceAll)*100).toFixed(2)
|
|
subItem.name = subItem.name +' '+subItem.rate+'%'
|
|
})
|
|
})
|
|
let dataList = []
|
|
let cityList = []
|
|
result.forEach(item=>{
|
|
let list = []
|
|
item.OwnerProvinceList.forEach(subItem=>{
|
|
list.push({name:subItem.name,value:Number(subItem.value)})
|
|
})
|
|
cityList.push(item.OwnerCityList)
|
|
dataList.push(list)
|
|
})
|
|
//城市
|
|
this.cityPlaceAll = cityList
|
|
this.cityPlace = cityList[this.selectTab]?cityList[this.selectTab]:[]
|
|
//省份
|
|
this.homePlaceAll = dataList
|
|
this.homePlace = dataList[this.selectTab]?dataList[this.selectTab]:[]
|
|
|
|
})
|
|
},
|
|
getCarTypeTime(){
|
|
request.$webGet('CommercialApi/Revenue/GetBayonetSTAList',{
|
|
StatisticsDate:this.endTime?this.endTime:this.time,
|
|
Serverpart_ID:this.serviceInfo.Serverpart_ID,
|
|
ContainWhole:true
|
|
}).then(res=>{
|
|
let result = res.Result_Data.List
|
|
let series = []
|
|
if (result.length>0){
|
|
result.forEach(item=>{
|
|
let stayTime = []
|
|
let stayTimeMax = 0
|
|
let carType = []
|
|
let valueList = []
|
|
let typeAll = 0
|
|
item.StayTimesList.forEach(subItem=>{
|
|
if (stayTimeMax<Number(subItem.value)){
|
|
stayTimeMax = Number(subItem.value)
|
|
}
|
|
stayTime.push(Number(subItem.value))
|
|
})
|
|
item.VehicleCountList.forEach(subItem=>{
|
|
typeAll+=Number(subItem.value)
|
|
valueList.push(subItem.value)
|
|
})
|
|
item.VehicleCountList.forEach(subItem=>{
|
|
subItem.rate = ((Number(subItem.value) / typeAll)*100).toFixed(2)
|
|
carType.push(Number(subItem.rate))
|
|
})
|
|
series.push({
|
|
index:1,
|
|
name:'停留时间',data:stayTime,
|
|
max:stayTimeMax
|
|
})
|
|
series.push({
|
|
index:0,
|
|
name:'车辆类型',data:carType,valueList:valueList
|
|
})
|
|
})
|
|
if (result.length === 1){
|
|
this.carTypeTimeDataAll[0] ={categories:result[0].Vehicle_Type?result[0].Vehicle_Type:[], series:[series[1],series[0]]}
|
|
} else if(result.length === 2){
|
|
this.carTypeTimeDataAll[0] ={categories:result[0].Vehicle_Type?result[0].Vehicle_Type:[], series:[series[1],series[0]]}
|
|
this.carTypeTimeDataAll[1] ={categories:result[1].Vehicle_Type?result[1].Vehicle_Type:[], series:[series[3],series[2]]}
|
|
}else if(result.length === 3){
|
|
this.carTypeTimeDataAll[0] ={categories:result[0].Vehicle_Type?result[0].Vehicle_Type:[], series:[series[1],series[0]]}
|
|
this.carTypeTimeDataAll[1] ={categories:result[1].Vehicle_Type?result[1].Vehicle_Type:[], series:[series[3],series[2]]}
|
|
this.carTypeTimeDataAll[2] ={categories:result[2].Vehicle_Type?result[2].Vehicle_Type:[], series:[series[5],series[4]]}
|
|
}
|
|
this.carTypeTimeData = this.carTypeTimeDataAll[this.selectTab]?this.carTypeTimeDataAll[this.selectTab]:[]
|
|
}else{
|
|
this.carTypeTimeDataAll = []
|
|
this.carTypeTimeData = []
|
|
}
|
|
})
|
|
// categories: ["小型车","中型车","大货车","新能源车"],
|
|
// series: [{name:'新能源',data:[30,38,20,10]},
|
|
// {name:'燃油车',data:[20,17,23,32]},
|
|
// {name:'停留时间',data:[62,38,50,84]}]
|
|
},
|
|
getTimeAnalysis(data){
|
|
const date = new Date(this.endTime?this.endTime:this.time)
|
|
let y = date.getFullYear()
|
|
let m = date.getMonth()+1
|
|
m = m<10?'0'+m:m
|
|
request.$webGet('CommercialApi/Revenue/GetBayonetSTAnalysis',{
|
|
StartMonth:`${y}${m}`,
|
|
EndMonth:`${y}${m}`,
|
|
Province_Code:'340000',
|
|
Serverpart_ID:this.serviceInfo.Serverpart_ID,
|
|
Serverpart_Region: data,
|
|
TimeSpan: 2
|
|
}).then(res=>{
|
|
let result = res.Result_Data.List
|
|
// this.timeAnalysisData = result
|
|
let categories = [0,2,4,6,8,10,12,14,16,18,20,22]
|
|
let series = []
|
|
let max = 0
|
|
result.forEach(item=>{
|
|
let obj = {name:'',data:[]}
|
|
obj.name = item.name
|
|
let valueList = []
|
|
item.data.forEach(subItem=>{
|
|
valueList.push(Number((subItem[1] * 60).toFixed(0)))
|
|
})
|
|
obj.data = valueList
|
|
valueList.forEach(item=>{
|
|
if (item>max){
|
|
max = item
|
|
}
|
|
})
|
|
series.push(obj)
|
|
})
|
|
let list = {
|
|
categories:categories,
|
|
series:series,
|
|
max:max
|
|
}
|
|
this.timeAnalysisData = list
|
|
})
|
|
// res = {
|
|
// categories: ["2018","2019","2020","2021","2022","2023"],
|
|
// series: [
|
|
// {name: "成交量A", data: [35,8,25,37,4,20]},
|
|
// {name: "成交量B", data: [70,40,65,100,44,68]},
|
|
// {name: "成交量C", data: [100,80,95,150,112,132]}
|
|
// ]
|
|
// }
|
|
},
|
|
getPercentEntry(type){
|
|
const date = new Date(this.single)
|
|
const nowDate = new Date()
|
|
let nowMonth = nowDate.getMonth() + 1
|
|
let nowYear = nowDate.getFullYear()
|
|
let m = date.getMonth() + 1
|
|
let y = date.getFullYear()
|
|
let endTime = ''
|
|
if (m === nowMonth && nowYear === y){
|
|
endTime = this.time
|
|
}else{
|
|
endTime = this.endTime
|
|
}
|
|
let req = {}
|
|
if (type==='全部' || !type){
|
|
req = {
|
|
Statistics_Date: this.endTime?endTime:this.time,
|
|
Province_Code:'340000',
|
|
Serverpart_ID :this.serviceInfo.Serverpart_ID,
|
|
GroupType:2,
|
|
ShowGrowthRate:true
|
|
}
|
|
}else{
|
|
req = {
|
|
Statistics_Date: this.endTime?endTime:this.time,
|
|
Province_Code:'340000',
|
|
Serverpart_ID :this.serviceInfo.Serverpart_ID,
|
|
GroupType:2,
|
|
ShowGrowthRate:true,
|
|
Serverpart_Region:type.slice(0,1)
|
|
}
|
|
}
|
|
request.$webGet('CommercialApi/Revenue/GetSPBayonetList',req).then(res=>{
|
|
this.percentEntryData = res.Result_Data.List
|
|
if (this.percentEntryData.length>0){
|
|
this.allEntry = res.Result_Data.List[0].Entry_Rate
|
|
this.addAllEntry = res.Result_Data.List[0].Entry_GrowthRate
|
|
}else{
|
|
this.allEntry = ''
|
|
this.addAllEntry = ''
|
|
}
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.main{
|
|
width:100%;
|
|
background: #fff;
|
|
.header{
|
|
width: 100%;
|
|
height: calc(1.056 * 100vw);
|
|
padding: 0 16px;
|
|
box-sizing: border-box;
|
|
position: relative;
|
|
background-repeat: no-repeat;
|
|
background-size: cover;
|
|
.car{
|
|
width: 100vw;
|
|
height: 100%;
|
|
position: absolute;
|
|
z-index: 0;
|
|
top: 0;left: 0;
|
|
}
|
|
.analyse{
|
|
width: calc(100vw - 32px);
|
|
height: 48px;
|
|
box-sizing: border-box;
|
|
padding: 6px 12px;
|
|
background: #fff;
|
|
margin-top: 16px;
|
|
border-radius: 4px;
|
|
display: flex;
|
|
position: absolute;
|
|
bottom: 16px;
|
|
.title{
|
|
width: 28px;
|
|
height: 18px;
|
|
font-size: 12px;
|
|
font-family: PingFangSC-Regular, PingFang SC;
|
|
font-weight: 400;
|
|
color: #160002;
|
|
line-height: 18px;
|
|
padding: 0 4px;
|
|
text-align: center;
|
|
border-radius: 4px;
|
|
background:rgba(6, 93, 255, 0.1);
|
|
}
|
|
.content{
|
|
width: calc(100% - 46px);
|
|
padding-left: 6px;
|
|
font-size: 12px;
|
|
font-family: PingFangSC-Regular, PingFang SC;
|
|
font-weight: 400;
|
|
color: #786B6C;
|
|
line-height: 18px;
|
|
display: -webkit-box;
|
|
-webkit-box-orient: vertical;
|
|
overflow: hidden;
|
|
-webkit-line-clamp: 2;
|
|
}
|
|
}
|
|
|
|
.headerTop{
|
|
width: 100vw;
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
z-index: 9999999999999;
|
|
background: linear-gradient(180deg, #A2B9E8 0%, #B2C6ED 100%);
|
|
.box{
|
|
padding: 0 16px;
|
|
position: absolute;
|
|
box-sizing: border-box;
|
|
width: 100%;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
transform: translateY(-50%);
|
|
.icon{
|
|
width: 24px;
|
|
height: 24px;
|
|
.img{
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
.title{
|
|
font-size: 36rpx;
|
|
font-family: PingFangSC-Medium, PingFang SC;
|
|
font-weight: 600;
|
|
color: #1C2130;
|
|
line-height: 56rpx;
|
|
}
|
|
.seize{
|
|
width: 24px;
|
|
height: 24px;
|
|
}
|
|
}
|
|
}
|
|
.serviceArea{
|
|
position: absolute;
|
|
box-sizing: border-box;
|
|
.picker{
|
|
.selectService{
|
|
display: flex;
|
|
align-items: center;
|
|
.img{
|
|
width: 40px;
|
|
height: 40px;
|
|
z-index: 2;
|
|
}
|
|
.select{
|
|
height: 32px;
|
|
background: #F8F8FA;
|
|
border-radius: 0 16px 16px 0;
|
|
transform: translateX(-20px);
|
|
box-sizing: border-box;
|
|
padding-left: 25px;
|
|
display: flex;
|
|
align-items: center;
|
|
.content{
|
|
display: flex;
|
|
align-items: center;
|
|
.uni-input{
|
|
padding: 0;
|
|
background: transparent;
|
|
font-size: 14px;
|
|
font-family: PingFangSC-Semibold, PingFang SC;
|
|
font-weight: 600;
|
|
color: #160002;
|
|
}
|
|
.area{
|
|
font-size: 12px;
|
|
font-family: PingFangSC-Regular, PingFang SC;
|
|
font-weight: 400;
|
|
color: #786B6C;
|
|
line-height: 40px;
|
|
margin-left: 4px;
|
|
}
|
|
.rightArrow{
|
|
width: 24px;
|
|
height: 12px;
|
|
}
|
|
}
|
|
|
|
}
|
|
}
|
|
}
|
|
.other{
|
|
margin-top: 12px;
|
|
width: calc(100vw - 32px);
|
|
text-align: center;
|
|
.label{
|
|
height: 54px;
|
|
position: relative;
|
|
.item{
|
|
position: absolute;
|
|
font-size: 32rpx;
|
|
font-family: PingFangSC-Regular, PingFang SC;
|
|
font-weight: 400;
|
|
color: #FFFFFF;
|
|
line-height: 44rpx;
|
|
padding: 4px 12px;
|
|
border-radius: 8rpx 8rpx 0rpx 8rpx;
|
|
}
|
|
.item{
|
|
background: linear-gradient(180deg, #3190FF 0%, #1657FF 100%);
|
|
top: 0px;
|
|
}
|
|
.item0{
|
|
left: 50%;
|
|
top: 50%;
|
|
transform: translateX(-50%);
|
|
z-index:3;
|
|
background: linear-gradient(180deg, rgba(49, 144, 255, 0.8) 0%, rgba(22, 87, 255, 0.8) 100%);
|
|
}
|
|
.item1{
|
|
left: 25%;
|
|
top: 80%;
|
|
z-index:2;
|
|
background: linear-gradient(180deg, rgba(49, 144, 255, 0.7) 0%, rgba(22, 87, 255, 0.7) 100%);
|
|
}
|
|
.item2{
|
|
right: 15%;
|
|
top: 80%;
|
|
z-index:2;
|
|
background: linear-gradient(180deg, rgba(49, 144, 255, 0.6) 0%, rgba(22, 87, 255, 0.6) 100%);
|
|
}
|
|
.item3{
|
|
right: 2%;
|
|
top:100%;
|
|
z-index:1;
|
|
background: linear-gradient(180deg, rgba(49, 144, 255, 0.5) 0%, rgba(22, 87, 255, 0.5) 100%);
|
|
}
|
|
.item4{
|
|
left: 2%;
|
|
top:100%;
|
|
z-index:1;
|
|
background: linear-gradient(180deg, rgba(49, 144, 255, 0.4) 0%, rgba(22, 87, 255, 0.4) 100%);
|
|
}
|
|
}
|
|
.car{
|
|
width: 228px;
|
|
height: 95px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.charts{
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
padding: 28px 16px 0;
|
|
.chartsItem{
|
|
.top{
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
.title{
|
|
font-size: 34rpx;
|
|
font-family: PingFangSC-Semibold, PingFang SC;
|
|
font-weight: 600;
|
|
color: #160002;
|
|
line-height: 48rpx;
|
|
}
|
|
.value{
|
|
font-size: 14px;
|
|
font-family: PingFangSC-Semibold, PingFang SC;
|
|
font-weight: 600;
|
|
color: #160002;
|
|
line-height: 20px;
|
|
}
|
|
}
|
|
.topItem{
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
.title{
|
|
font-size: 17px;
|
|
font-family: PingFangSC-Semibold, PingFang SC;
|
|
font-weight: 600;
|
|
color: #160002;
|
|
line-height: 24px;
|
|
}
|
|
.box{
|
|
display: flex;
|
|
align-items: center;
|
|
.value{
|
|
font-size: 16px;
|
|
font-family: PingFangSC-Regular, PingFang SC;
|
|
font-weight: 600;
|
|
color: #000;
|
|
line-height: 20px;
|
|
}
|
|
.right{
|
|
margin-left: 4px;
|
|
display: flex;
|
|
align-items: center;
|
|
.arrowTop {
|
|
width: 14px;
|
|
height: 14px;
|
|
margin-right: 4px;
|
|
}
|
|
.text {
|
|
font-size: 14px;
|
|
font-family: PingFangSC-Regular, PingFang SC;
|
|
font-weight: 400;
|
|
color: #782717;
|
|
line-height: 20px;
|
|
margin-right: 4px;
|
|
}
|
|
.compare {
|
|
font-size: 14px;
|
|
font-family: PingFangSC-Regular, PingFang SC;
|
|
font-weight: 400;
|
|
color: #a69e9f;
|
|
line-height: 20px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.time{
|
|
margin-bottom: 4px;
|
|
.thisTime{
|
|
font-size: 14px;
|
|
font-family: PingFangSC-Semibold, PingFang SC;
|
|
font-weight: 500;
|
|
color: #160002;
|
|
}
|
|
.select{
|
|
margin-left: 8px;
|
|
display: inline-block;
|
|
.time {
|
|
display: flex;
|
|
align-items: center;
|
|
margin-right: 4px;
|
|
.day {
|
|
font-size: 32rpx;
|
|
font-family: PingFangSC-Regular, PingFang SC;
|
|
font-weight: 400;
|
|
color: #782717;
|
|
line-height: 44rpx;
|
|
margin-right: 4px;
|
|
}
|
|
.uni-input {
|
|
font-size: 14px;
|
|
font-family: PingFangSC-Regular, PingFang SC;
|
|
font-weight: 400;
|
|
color: #ae664e;
|
|
line-height: 36rpx;
|
|
}
|
|
.icon {
|
|
width: 24px;
|
|
height: 16px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.selectType{
|
|
width: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
margin: 12px auto;
|
|
.item{
|
|
border-radius: 4px;
|
|
padding:2px 6px;
|
|
margin-right: 6px;
|
|
margin-bottom: 6px;
|
|
box-sizing: border-box;
|
|
.icon{
|
|
width: 10px;
|
|
height: 10px;
|
|
margin-right: 4px;
|
|
}
|
|
.text{
|
|
font-size: 12px;
|
|
font-family: PingFangSC-Regular, PingFang SC;
|
|
font-weight: 400;
|
|
color: #786B6C;
|
|
}
|
|
}
|
|
.itemSelect{
|
|
border:1px solid #ccc;
|
|
background: rgba(237, 239, 244, 0.2);
|
|
}
|
|
.itemUnSelect{
|
|
border:1px solid #ccc;
|
|
background: rgba(202, 208, 218, 0.5);
|
|
}
|
|
}
|
|
.tab{
|
|
width: 100%;
|
|
height: 38px;
|
|
background: #F2F1F1;
|
|
border-radius: 4px;
|
|
box-sizing: border-box;
|
|
padding:4px;
|
|
display: flex;
|
|
align-items: center;
|
|
margin-bottom: 12px;
|
|
.tabItem{
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
width: calc(100% / 3);
|
|
height: 30px;
|
|
border-radius: 4px;
|
|
font-size: 14px;
|
|
font-family: PingFangSC-Regular, PingFang SC;
|
|
font-weight: 400;
|
|
color: #786B6C;
|
|
}
|
|
.tabItemActive{
|
|
color:#160002;
|
|
background: #FFFFFF;
|
|
}
|
|
}
|
|
.title{
|
|
font-size: 34rpx;
|
|
font-family: PingFangSC-Semibold, PingFang SC;
|
|
font-weight: 600;
|
|
color: #160002;
|
|
line-height: 48rpx;
|
|
}
|
|
.homePlace{
|
|
|
|
}
|
|
}
|
|
.chartsItem:last-child{
|
|
padding-bottom: 32px;
|
|
}
|
|
}
|
|
}
|
|
.noData{
|
|
width: 100%;
|
|
height: 100vh;
|
|
position: relative;
|
|
.box{
|
|
margin: 30vh auto 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
.img{
|
|
width: 20vw;
|
|
height: 24vw;
|
|
margin-bottom: 15px;
|
|
}
|
|
.text{
|
|
font-size: 14px;
|
|
font-family: PingFangSC-Regular, PingFang SC;
|
|
font-weight: 400;
|
|
color: #6C737A;
|
|
line-height: 20px;
|
|
}
|
|
}
|
|
|
|
}
|
|
</style>
|