ylj/ahyd_DIB
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update

Browse Source
This commit is contained in:
cclu 2023-04-11 19:00:34 +08:00
parent 6584176b3a
commit 3ed8af69d4
28 changed files with 1807 additions and 480 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
common/utils.js
View File

@ -249,7 +249,26 @@ function getThisMonth(value){
}
return `${y}${m}`
}
//有横杠
function getThisMonthHave(value){
const date = new Date(value)
let y = date.getFullYear()
let m = date.getMonth()+1
if (m<10){
m = '0'+m
}
return `${y}-${m}`
}
// 输入时间拿到月份 输出月份的字符串
function getThisTimeMonth(value){
const date = new Date(value)
let m = date.getMonth()+1
if (m<10){
m = '0'+m
}
return `${m}`
}
// 视频播放
const EZUIPlayer = require('./ezuikit.js');
@ -263,6 +282,8 @@ export default {
cutDate,
getThisMonthDay,
getThisMonth,
getThisMonthHave,
getThisTimeMonth,
fmoney,
noDecimal,
changeStringToDate,

2
manifest.json
View File

@ -68,7 +68,7 @@
},
"plugins": {
"routePlan": {
"version": "1.0.18",
"version": "1.0.19",
"provider": "wx50b5593e81dd937a"
}
},

3
pages.json
View File

@ -149,7 +149,8 @@
"style":
{
"navigationBarTitleText": "",
"navigationStyle": "custom"
"navigationStyle": "custom",
"disableScroll": true
}
}
],

3
pages/commercialBI/businessPortrait.vue
View File

@ -90,8 +90,7 @@ export default {
serviceInfo:{} ,//当前服务区信息
backType:'',//返回的页面类型
analyseInfo:{
analysisins_type1: 1401,
analysisins_type2: 1402
analysisins_type: 1401
},
}
},

245
pages/commercialBI/carPortrait.vue
View File

@ -40,27 +40,68 @@
</div>
<div class="charts">
<div class="chartsItem">
<p class="title">入区车流分析</p>
<entry-zone :carData="carData" />
<div style="display: flex;align-items: center;justify-content: space-between">
<p class="title">入区车流分析</p>
<div class="item">
<text class="value">日期：</text>
<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-else :type="'car'"/>
</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}}{{index!==0?'区':''}}</view>
</view>
<p class="title">车辆归属地</p>
<home-place :homeData="homePlace" :homeCity="cityPlace" />
<p class="title">{{thisMonth?thisMonth:'-'}}月车辆归属地</p>
<div v-if="cityPlaceAll.length>0">
<home-place :homeData="homePlace" :homeCity="cityPlace" />
<analyse :analyseInfo="{analysisins_type: 1103,analysisins_format: 2000}" />
</div>
<no-data v-else :type="'car'"/>
</div>
<div class="chartsItem" style="margin-top: 32px">
<p class="title">车辆类型占比与停留时间</p>
<car-type-time :data="carTypeTimeData"/>
<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-else :type="'car'"/>
</div>
<div class="chartsItem" style="margin-top: 32px">
<p class="title">车辆价值与停留时间分析</p>
<time-analysis :data="timeAnalysisData"/>
<p class="title">{{thisMonth?thisMonth:'-'}}月车车辆类型-停留时间（日均）</p>
<div v-if="timeAnalysisData.length>0">
<time-analysis :data="timeAnalysisData"/>
<analyse :analyseInfo="{analysisins_type: 1105,analysisins_format: 2000}" />
</div>
<no-data v-else :type="'car'"/>
</div>
<div class="chartsItem" style="margin-top: 32px">
<p class="title">入区率占比</p>
<percent-entry :data="percentEntryData" />
<div class="top">
<p class="title">{{thisMonth?thisMonth:'-'}}月入区率占比</p>
<text class="value">{{allEntry?allEntry:'-'}}%</text>
</div>
<div v-if="percentEntryData.length>0">
<percent-entry :data="percentEntryData" />
<analyse :analyseInfo="{analysisins_type: 1106,analysisins_format: 2000}" />
</div>
<no-data v-else :type="'car'"/>
</div>
</div>
</div>
@ -80,9 +121,13 @@ 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 {timestampToTime} from "../../util/dateTime";
import NoData from "./components/noData.vue";
import Analyse from "./components/analyse.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"], // 选择服务区的列表
@ -109,9 +154,15 @@ export default {
serviceInfo:{}, //当前服务区信息
backType:'',//返回的页面类型
analyseText:'',//分析的文字
single:'',//显示时间
lastDay:lastDay,
endTime:'',
thisMonth:'',//几月
allEntry:'',//一共的入区率占比
endData:''//截止日期
}
},
components: {PercentEntry, CarTypeTime, HomePlace, EntryZone,timeAnalysis},
components: {Analyse, NoData, PercentEntry, CarTypeTime, HomePlace, EntryZone,timeAnalysis},
computed:{
isHaveData(){
return true
@ -120,21 +171,27 @@ export default {
onLoad(option){
console.log('option',option)
this.backType = option.type
let serviceInfo = JSON.parse(option.serviceInfo)
this.serviceInfo = serviceInfo
console.log('this.serviceInfo',this.serviceInfo)
//跳转的时候带上时间
this.time = option.time
},
onShow(){
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
}
let storeServiceInfo = uni.getStorageSync('currentService')
if (storeServiceInfo){
this.serviceInfo = storeServiceInfo
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()
// 把获取到的手机参数保存
@ -143,9 +200,14 @@ export default {
this.menu = uni.getMenuButtonBoundingClientRect()
// 把获取图表数据的方法统一放在一起 然后去请求接口拿到数据 再分批传到相对应的图标组件
// 每个图表都是用组件的方式引入的 数据是通过prop传入的
let storeServiceInfo = uni.getStorageSync('currentService')
let nearServiceInfo = uni.getStorageSync('nearService')
if (!storeServiceInfo){
this.nearestService()
this.serviceInfo = nearServiceInfo
}else{
this.serviceInfo = storeServiceInfo
}
console.log('this.serviceInfo',this.serviceInfo)
// 入区车流分析
this.getCarData()
// 车辆归属地
@ -163,6 +225,30 @@ export default {
},
methods:{
// 时间选择器改变的时间
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(){
//六个标签
@ -202,23 +288,13 @@ export default {
},
//当前最近的服务区数据
async nearestService(){
let seat = uni.getStorageSync('seatInfo');
let req = {
longitude:seat.longitude,
Province_Code:'340000',
latitude:seat.latitude,
let storeServiceInfo = uni.getStorageSync('currentService')
let nearServiceInfo = uni.getStorageSync('nearService')
if (storeServiceInfo){
this.serviceInfo = storeServiceInfo
}else {
this.serviceInfo = nearServiceInfo
}
console.log('req',req)
const data = await request.$webGet('CommercialApi/BaseInfo/GetServerpartList',req)
console.log('nearestService',data)
let res = {
SERVERPART_NAME:data.Result_Data.List[0].SERVERPART_NAME,//服务区
SPREGIONTYPE_NAME:data.Result_Data.List[0].SPREGIONTYPE_NAME,//片区
Serverpart_ID:data.Result_Data.List[0].SERVERPART_ID,
longitude:data.Result_Data.List[0].SERVERPART_X,
latitude:data.Result_Data.List[0].SERVERPART_Y,
}
uni.setStorageSync('currentService',res)
},
//跳转到地图
handleGoSelectService() {
@ -263,21 +339,18 @@ export default {
// },2000)
// }
},
bindPickerChange:function (e){
},
getCarData(){
console.log('this.serviceInfo',this.serviceInfo)
request.$webGet('CommercialApi/Revenue/GetBayonetEntryList',{
StatisticsDate: this.time,
Serverpart_ID :this.serviceInfo.Serverpart_ID
Serverpart_ID :this.serviceInfo.Serverpart_ID,
ShowAddUpCount:true
}).then(res=>{
console.log('res.Result_Data.List',res)
this.carData = res.Result_Data.List
})
},
getHomeData(){
const date = new Date(this.time)
const date = new Date(this.endTime?this.endTime:this.time)
let y = date.getFullYear()
let m = date.getMonth() + 1
if (m<10){
@ -326,7 +399,7 @@ export default {
},
getCarTypeTime(){
request.$webGet('CommercialApi/Revenue/GetBayonetSTAList',{
StatisticsDate:this.time,
StatisticsDate:this.endTime?this.endTime:this.time,
Serverpart_ID:this.serviceInfo.Serverpart_ID,
ContainWhole:true
}).then(res=>{
@ -335,12 +408,14 @@ export default {
result.forEach(item=>{
let stayTime = []
let carType = []
let valueList = []
let typeAll = 0
item.StayTimesList.forEach(subItem=>{
stayTime.push(Number(subItem.value))
})
item.VehicleCountList.forEach(subItem=>{
typeAll+=Number(subItem.value)
valueList.push(subItem.value)
})
item.VehicleCountList.forEach(subItem=>{
@ -354,7 +429,7 @@ export default {
})
series.push({
index:0,
name:'车辆类型',data:carType
name:'车辆类型',data:carType,valueList:valueList
})
})
this.carTypeTimeDataAll[0] ={categories:result[0].Vehicle_Type, series:[series[1],series[0]]}
@ -368,7 +443,7 @@ export default {
// {name:'停留时间',data:[62,38,50,84]}]
},
getTimeAnalysis(data){
const date = new Date(this.time)
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
@ -377,7 +452,8 @@ export default {
EndMonth:`${y}${m}`,
Province_Code:'340000',
Serverpart_ID:this.serviceInfo.Serverpart_ID,
Serverpart_Region: data
Serverpart_Region: data,
TimeSpan: 2
}).then(res=>{
let result = res.Result_Data.List
this.timeAnalysisData = result
@ -391,14 +467,33 @@ export default {
// ]
},
getPercentEntry(){
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
}
request.$webGet('CommercialApi/Revenue/GetSPBayonetList',{
Statistics_Date: this.time,
Statistics_Date: this.endTime?endTime:this.time,
Province_Code:'340000',
Serverpart_ID :this.serviceInfo.Serverpart_ID,
GroupType:2
}).then(res=>{
this.percentEntryDataAll = [ res.Result_Data.List, [res.Result_Data.List[0]], [res.Result_Data.List[1]]]
this.percentEntryData = this.percentEntryDataAll[this.selectTab]
let Vehicle_CountAll=0
let SectionFlow_CountAll=0
this.percentEntryData.forEach(item=>{
Vehicle_CountAll+= item.Vehicle_Count
SectionFlow_CountAll+= item.SectionFlow_Count
})
this.allEntry = ((Vehicle_CountAll/SectionFlow_CountAll)*100).toFixed(2)
})
}
}
@ -614,6 +709,62 @@ export default {
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;
}
}
.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;
}
}
}
}
.tab{
width: 100%;
height: 38px;

6
pages/commercialBI/components/analyse.vue
View File

@ -60,7 +60,6 @@ export default {
<style scoped lang="scss">
.main{
width: 100%;
height: 48px;
box-sizing: border-box;
padding: 6px 8px;
background: #F1F3F7;
@ -88,10 +87,7 @@ export default {
font-weight: 400;
color: #786B6C;
line-height: 18px;
display: -webkit-box;
-webkit-box-orient: vertical;
overflow: hidden;
-webkit-line-clamp: 2;
}
}
</style>

5
pages/commercialBI/components/bussiness/bestsellerShop.vue
View File

@ -122,9 +122,14 @@ export default {
flex-direction: column;
justify-content: center;
align-items: center;
position: relative;
.canvas{
width: 100%;
height: 170px;
overflow: hidden;
.hotSales{
position: absolute;
}
}
.list{
width: 90%;

32
pages/commercialBI/components/car/carTypeTime.vue
View File

@ -1,13 +1,9 @@
<template>
<div style="min-height: 100px;">
<div v-if="isShowData">
<div class="carTypeTime" >
<canvas v-if="!carTypeTimePath" class="canvas" canvas-id="carTypeTime" id="carTypeTime"/>
<canvas v-if="!carTypeTimePath" class="canvas" canvas-id="carTypeTime" id="carTypeTime" @tap="handleTap"/>
<image v-if="carTypeTimePath" class="canvas" :src="carTypeTimePath"></image>
</div>
<analyse :analyseInfo="analyseInfo"/>
</div>
<no-data v-if="!isShowData"/>
</div>
</template>
@ -29,6 +25,7 @@ export default {
analysisins_type: 1104,
analysisins_format: 2000
},
num:0
}
},
props: {
@ -40,17 +37,34 @@ export default {
watch: {
data: {
handler(value) {
if (value){
this.isShowData = true
}
console.log('value232312',value)
this.info = value
this.carTypeTimePath=''
this.handleCarData(value)
},
immediate:true,
deep:true
}
},
methods: {
//点击事件
handleTap(e){
uChartsInstance[e.target.id].showToolTip(e,{
formatter: (item, category, index, opts) =>{
console.log('item',item)
console.log('opts',opts)
console.log('category',category)
console.log('index',index)
if (this.num===0){
this.num++
return item.name + ":" + opts.series[0].valueList[index] + '辆';
}else{
this.num=0
return item.name + ":" + item.data + '分';
}
}
});
},
// 处理传入的数据
handleCarData(value) {
let res = {
@ -124,7 +138,7 @@ export default {
}
});
setTimeout( ()=>{
this.canvasToTempImage('carTypeTime')
// this.canvasToTempImage('carTypeTime')
},1000)
},
canvasToTempImage(id){

213
pages/commercialBI/components/car/entryZone.vue
View File

@ -1,31 +1,56 @@
<template>
<div style="min-height: 100px;">
<div v-if="isShowData">
<div class="car">
<div class="item">
<canvas v-if="!carNumPath" class="carNum" canvas-id="carNum" id="carNum"/>
<image v-if="carNumPath" class="carNum" :src="carNumPath"></image>
<div class="item" style="left: -16px;width: calc(46% + 16px)">
<canvas style="left: 0" v-if="!carNumPath" class="carNum" canvas-id="carNum" id="carNum"/>
<image style="left: 0" v-if="carNumPath" class="carNum" :src="carNumPath"></image>
</div>
<div class="item">
<canvas v-if="!probabilityPath" class="carNum" canvas-id="probability" id="probability"/>
<image v-if="probabilityPath" class="carNum" :src="probabilityPath"></image>
<div class="item" style="right: -16px;width: calc(54% + 16px)">
<canvas style="right: 0" v-if="!probabilityPath" class="carNum" canvas-id="probability" id="probability"/>
<image style="right: 0" v-if="probabilityPath" class="carNum" :src="probabilityPath"></image>
</div>
</div>
<div class="info">
<div class="item">
<text class="title">{{month}}月累计：</text>
</div>
<div class="other">
<div class="item">
<p class="title">
<text class="text">入区</text>
<text class="textRight">{{allAddUpCount}}辆</text>
</p>
<div class="box">
<p class="value" v-for="(item,index) in dataList" :key="index">
<text class="text">{{item.Serverpart_Region + '区 '}}</text>
<text class="textRight">{{item.AddUpCount + '辆' }}</text>
</p>
</div>
</div>
<div class="item">
<p class="title">
<text class="text">入区率</text>
<text class="textRight">{{ allEntryAddUpRate }}%</text>
</p>
<div class="box">
<p class="value" v-for="(item,index) in dataList" :key="index">
<text class="text">{{item.Serverpart_Region + '区 '}}</text>
<text class="textRight">{{item.EntryAddUp_Rate + '%' }}</text>
</p>
</div>
</div>
</div>
</div>
<analyse :analyseInfo="analyseInfo" />
</div>
<no-data v-if="carData.length===0"/>
</div>
</template>
<script>
import uCharts from '@/components/u-charts.js';
import NoData from "../noData.vue";
import Analyse from "../analyse.vue";
var uChartsInstance = {};
export default {
name: "entryZone",
components: {Analyse, NoData},
data(){
return {
dataList :[],
@ -39,23 +64,46 @@ export default {
analysisins_type: 1102,
analysisins_format: 2000
},
allAddUpCount:0,
allEntryAddUpRate:0
}
},
props:{
carData:{
type:Array,
default:()=>[]
},
time:{
type:String,
default:''
},
month:{
type:String,
default:''
}
},
watch:{
carData:{
handler(value){
if (value.length!==0){
console.log('valuefirst',value)
if (value.length>0){
this.isShowData = true
}
this.carNumPath = ''
this.probabilityPath = ''
this.handleCarData(value)
this.dataList = value
let allCount = 0
let allRate = 0
this.dataList.forEach(item=>{
item.AddUpCount = this.$util.noDecimal(item.Vehicle_AddUpCount)
allCount +=item.Vehicle_AddUpCount
allRate +=item.EntryAddUp_Rate
})
this.allAddUpCount = this.$util.noDecimal(allCount)
this.allEntryAddUpRate = allRate.toFixed(2)
},
immediate:true,
deep:true
}
},
@ -116,13 +164,13 @@ export default {
console.log('res1111',res)
console.log('probabilityRes1111',probabilityRes)
this.drawCharts('carNum' , res,configCarNum )
this.drawCharts('probability',probabilityRes,config)
this.drawCharts2('probability',probabilityRes,config)
},
drawCharts(id,data,config){
const ctx = uni.createCanvasContext(id, this);
let _this = this
let phoneInfo = uni.getStorageSync('phoneInfo')
this.width = (phoneInfo.screenWidth - 16) / 2
this.width = (phoneInfo.screenWidth ) / 2
console.log('this.width',this.width)
uChartsInstance[id] = new uCharts({
type: "ring",
@ -152,7 +200,60 @@ export default {
show: true,
position: "bottom",
lineHeight: 25,
float: 'center'
float: 'center',
fontSize:11,
},
extra: {
ring: {
ringWidth: 14,
activeOpacity: 0.5,
activeRadius: 10,
offsetAngle: -90,
labelWidth: 15,
border: false,
borderWidth: 3,
borderColor: "#FFFFFF"
}
}
});
setTimeout( ()=>{
this.canvasToTempImage1('carNum')
this.canvasToTempImage2('probability')
},1000)
},
drawCharts2(id,data,config){
const ctx = uni.createCanvasContext(id, this);
let _this = this
uChartsInstance[id] = new uCharts({
type: "ring",
context: ctx,
width: 215,
height: 208,
series: data.series,
animation: false,
rotate: false,
rotateLock: false,
background: "#FFFFFF",
color: ["#1E80FF","#00C2FF"],
padding: [5,5,5,5],
dataLabel: false,
enableScroll: false,
title: {
name: config.title,
fontSize: 14,
color: "#341D00"
},
subtitle: {
name: config.subtitle,
fontSize: 10,
color: "#786B6C",
},
legend: {
show: true,
position: "bottom",
lineHeight: 25,
float: 'center',
fontSize:12,
},
extra: {
ring: {
@ -214,18 +315,84 @@ export default {
.car{
width: 100%;
height: 188px;
display: flex;
position: relative;
.item{
width: calc(100vw / 2);
position: absolute;
top: 0;
height: 100%;
box-sizing: border-box;
display: flex;
justify-content: center;
align-items: center;
.carNum{
position: absolute;
width: 100%;
height: 100%;
}
}
}
.info{
width: 100%;
display: flex;
justify-content: space-between;
margin-top: 8px;
.item{
display: inline-block;
.title{
font-size: 14px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 600;
color: #160002;
margin-bottom: 2px;
}
}
.other{
flex: 1;
display: flex;
justify-content: space-between;
.item{
width: 45%;
text-align: left;
.title{
font-size: 14px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #786B6C;
line-height: 20px;
display: inline-block;
width: 100%;
.text{
display: inline-block;
width: 40%;
color: #786B6C;
}
.textRight{
display: inline-block;
width: 60%;
text-align: right;
color: #786B6C;
}
}
.box{
text-align: left;
.value{
font-size: 14px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #786B6C;
line-height: 20px;
display: inline-block;
width: 100%;
.text{
display: inline-block;
width: 40%;
color: #786B6C;
}
.textRight{
display: inline-block;
width: 60%;
text-align: right;
color: #786B6C;
}
}
}
}
}
}
</style>

54
pages/commercialBI/components/car/homePlace.vue
View File

@ -1,9 +1,8 @@
<template>
<div style="min-height: 100px;">
<div v-if="isShowData">
<div class="main" >
<div class="homePlace">
<canvas v-if="!homePlacePath" class="carNum" canvas-id="homePlace" id="homePlace"/>
<canvas v-if="!homePlacePath" canvas2d="true" class="carNum" canvas-id="homePlace" id="homePlace" @tap="handleTap"/>
<image v-if="homePlacePath" class="carNum" :src="homePlacePath"></image>
</div>
<div class="homeCity">
@ -13,13 +12,14 @@
<div class="dashed box4"></div>
<div class="dashed box5"></div>
<div class="dashed box6"></div>
<view class="item" v-for="(item,index) in progressList" :key="index">
<view class="item" v-for="(item,index) in progressList" :key="index" @click="handleShow(index)">
<view class="top">
<p class="title">{{item.name}}</p>
<p class="rate"> {{item.rate}}</p>
</view>
<view class="progress">
<view class="have" :style="{width:item.rate}"></view>
<view class="meng" v-if="selectIndex === index">{{item.value}}辆</view>
</view>
</view>
<div class="notice">
@ -32,9 +32,6 @@
</div>
</div>
</div>
<analyse :analyseInfo="analyseInfo"/>
</div>
<no-data v-if="homeData.length===0"/>
</div>
</template>
@ -58,6 +55,8 @@ export default {
analysisins_type: 1103,
analysisins_format: 2000
},
textList:[],
selectIndex:7,
}
},
props: {
@ -73,31 +72,44 @@ export default {
watch: {
homeData: {
handler(value) {
if (!value){
this.homeDataisTrue = true
}
this.homePlacePath = ''
this.handleCarData(value)
}
},
immediate:true,
deep:true
},
homeCity:{
handler(value){
if (value){
this.isShowData = true
}
console.log('handler',value)
value.forEach(item=>{
item.rate = item.rate.toFixed(2) + '%'
})
this.progressList = value
},
immediate:true,
deep:true
}
},
methods: {
//点击出现的框
handleShow(num){
this.selectIndex = num
},
//点击事件
handleTap(e){
uChartsInstance[e.target.id].showToolTip(e,{
formatter: (item, category, index, opts) =>{
return item.name + ":" + item.data + '辆';
}
});
},
// 处理传入的数据
handleCarData(value) {
console.log('value',value)
let list = []
value.forEach(item=>{
list.push(item.data)
})
this.listCar = list
let res = {
series:[
{
@ -145,7 +157,7 @@ export default {
}
});
setTimeout(()=>{
this.canvasToTempImage('homePlace')
// this.canvasToTempImage('homePlace')
},1000)
},
canvasToTempImage(id){
@ -243,6 +255,16 @@ export default {
position: absolute;
left: 0;top: 0;
}
.meng{
position: absolute;
display: inline-block;
padding: 0 5px;
z-index: 9;
left: 22%;top: -23px;
background: rgba(0,0,0,0.6);
color:#fff;
border-radius: 2px;
}
}
}
.notice{

122
pages/commercialBI/components/car/percentEntry.vue
View File

@ -1,13 +1,30 @@
<template>
<div style="min-height: 100px;">
<div v-if="isShowData">
<div class="percentEntry" >
<div class="progress">
<div class="have" :style="{width:progress+'%'}">
<div class="have" >
<view class="box" >
<div class="min" :style="{width:min+'%'}"></div>
<div class="middle" :style="{width:middle+'%',left:min+'%'}"></div>
<div class="big" :style="{width:big+'%',right:0+'%'}"></div>
<div class="min" :style="{width:min+'%'}" @click="handleShow(0)">
<div class="text" v-if="rateList[0]">
<div class="icon" style="background: #1E80FF"></div>
<text style="margin-right: 4px">小车型</text>
<text>{{min}}%</text>
</div>
</div>
<div class="middle" :style="{width:middle+'%',left:min+'%'}" @click="handleShow(1)">
<div class="text" v-if="rateList[1]" :style="{left:'50%'}">
<div class="icon" style="background: #00B6FF"></div>
<text style="margin-right: 4px">中型车</text>
<text>{{middle}}%</text>
</div>
</div>
<div class="big" :style="{width:big+'%',right:0+'%'}" @click="handleShow(2)">
<div class="text" v-if="rateList[2]" :style="{left:'60%'}">
<div class="icon" style="background: #0FC862"></div>
<text style="margin-right: 4px">大车型</text>
<text>{{big}}%</text>
</div>
</div>
</view>
</div>
</div>
@ -15,16 +32,13 @@
<div class="list">
<div class="listItem" v-for="(item,index) in dataList" :key="index">
<div class="left">
<div style="margin-right: 4px" v-if="index!==0" :class="index===1?'icon1':index===2?'icon2':index===3?'icon3':'icon'"></div>
<p :class="index===0?'title':'smallTitle'">{{item.title}}</p>
<div style="margin-right: 4px" :class="index===0?'icon1':index===1?'icon2':index===2?'icon3':'icon'"></div>
<p class="smallTitle">{{item.title}}</p>
</div>
<p :class="index===0?'rate':'smallRate'">{{item.value + '%'}}</p>
<p class="smallRate">{{item.value + '%'}}</p>
</div>
</div>
</div>
<analyse :analyseInfo="analyseInfo"/>
</div>
<no-data v-if="data.length===0"/>
</div>
</template>
@ -37,7 +51,7 @@ export default {
components: {Analyse, NoData},
data() {
return {
dataList:[{title:'总车型入区率',value:''},{title:'小型车',value:''},{title:'中型车',value:''},{title:'大货车',value:''}],
dataList:[{title:'小型车',value:''},{title:'中型车',value:''},{title:'大货车',value:''}],
progress:0,//入区率总比
min:0,//小型车
middle:0,//中型车
@ -47,6 +61,7 @@ export default {
analysisins_type: 1106,
analysisins_format: 2000
},
rateList:[false,false,false]
}
},
props: {
@ -58,15 +73,22 @@ export default {
watch: {
data: {
handler(value) {
if (value){
this.isShowData = true
}
this.dataList = [{title:'总车型入区率',value:''},{title:'小型车',value:''},{title:'中型车',value:''},{title:'大货车',value:''}]
this.dataList = [{title:'小型车',value:''},{title:'中型车',value:''},{title:'大货车',value:''}]
this.handleCarData(value)
}
},
immediate:true,
deep:true
}
},
methods: {
handleShow(num){
let list = []
this.rateList.forEach(()=>{
list.push(false)
})
this.rateList = list
this.rateList[num] = true
},
// 处理传入的数据
handleCarData(value) {
console.log('value',value)
@ -87,10 +109,9 @@ export default {
this.middle = (middleAll / Vehicle_CountAll*100).toFixed(2)
this.big = (bigAll / Vehicle_CountAll*100).toFixed(2)
this.dataList[0].value = this.progress
this.dataList[1].value = (minAll / SectionFlow_CountAll*100).toFixed(2)
this.dataList[2].value = (middleAll / SectionFlow_CountAll*100).toFixed(2)
this.dataList[3].value = (bigAll / SectionFlow_CountAll*100).toFixed(2)
this.dataList[0].value = (minAll / Vehicle_CountAll*100).toFixed(2)
this.dataList[1].value = (middleAll / Vehicle_CountAll*100).toFixed(2)
this.dataList[2].value = (bigAll / Vehicle_CountAll*100).toFixed(2)
for (let i=1;i<this.dataList.length;i++){
for (let j=1;j<this.dataList.length - 1;j++){
@ -118,6 +139,7 @@ export default {
border-radius: 2px;
position: relative;
.have{
width: 100%;
position: absolute;
height: 100%;
top: 0;left: 0;
@ -131,16 +153,70 @@ export default {
height: 100%;
background: #1E80FF;
margin-right: 2px;
border-radius: 2px 0 0 2px;
position: relative;
.text{
position: absolute;
padding: 0 5px;
z-index: 9;
left: 22%;top: -23px;
background: rgba(0,0,0,0.6);
color:#fff;
border-radius: 2px;
display: flex;
align-items: center;
.icon{
width: 10px;
height: 10px;
background: #1E80FF;
margin-right: 4px;
}
}
}
.middle{
height: 100%;box-sizing: border-box;
height: 100%;
box-sizing: border-box;
background: #00B6FF;
margin-right: 2px;
.text{
position: absolute;
padding: 0 5px;
z-index: 9;
left: 0;top: 0px;
background: rgba(0,0,0,0.6);
color:#fff;
border-radius: 2px;
display: flex;
align-items: center;
.icon{
width: 10px;
height: 10px;
background: #1E80FF;
margin-right: 4px;
}
}
}
.big{
height: 100%;box-sizing: border-box;
background: #0FC862;
margin-right: 2px;
border-radius: 0 2px 2px 0 ;
.text{
position: absolute;
padding: 0 5px;
z-index: 9;
left: 22%;top: -23px;
background: rgba(0,0,0,0.6);
color:#fff;
border-radius: 2px;
display: flex;
align-items: center;
.icon{
width: 10px;
height: 10px;
background: #1E80FF;
margin-right: 4px;
}
}
}
}
}

18
pages/commercialBI/components/car/timeAnalysis.vue
View File

@ -1,12 +1,8 @@
<template>
<div style="min-height: 100px;">
<div v-if="isShowData">
<div class="timeAnalysis" >
<canvas :style="{width:width+'px'}" class="timeAnalysis" canvas-id="timeAnalysis" id="timeAnalysis"/>
<canvas :style="{width:width+'px'}" class="timeAnalysis" canvas-id="timeAnalysis" id="timeAnalysis" @tap="handleTap"/>
</div>
<analyse :analyseInfo="analyseInfo"/>
</div>
<no-data v-if="data.length===0"/>
</div>
</template>
@ -37,14 +33,18 @@ export default {
watch: {
data: {
handler(value) {
if (value){
this.isShowData = true
}
this.handleCarData(value)
}
},
immediate:true,
deep:true
}
},
methods: {
//点击事件
handleTap(e){
uChartsInstance[e.target.id].touchLegend(e);
uChartsInstance[e.target.id].showToolTip(e);
},
// 处理传入的数据
handleCarData(value) {
let list = []

1
pages/commercialBI/components/format/bandNumber.vue
View File

@ -120,6 +120,7 @@ export default {
}
.company,.time{
display: flex;
align-items: center;
margin-bottom: 2px;
.img{
width: 16px;

10
pages/commercialBI/components/guest/businessType.vue
View File

@ -1,6 +1,6 @@
<template>
<div class="businessType">
<canvas class="business" canvas-id="businessType" id="businessType"/>
<canvas class="business" canvas-id="businessType" id="businessType" @tap="handleTap"/>
</div>
</template>
@ -30,6 +30,14 @@ export default {
}
},
methods: {
//点击事件
handleTap(e){
uChartsInstance[e.target.id].showToolTip(e,{
formatter: (item, category, index, opts) =>{
return item.name;
}
});
},
// 处理传入的数据
handleCarData(value) {
let res = {

128
pages/commercialBI/components/guest/consumptionLevel.vue
View File

@ -6,9 +6,27 @@
<p class="title">{{item.name}}</p>
</div>
<div class="progress">
<div class="small" :style="{background:item.name==='男'?'#CAD0DA':'#C6D3D7',width:item.small + '%'}">{{item.small<16?'':item.small + '%'}}</div>
<div class="normal" :style="{background:item.name==='男'?'#ACB9CD':'#AFC1C6',width:item.normal + '%',left:item.small+'%'}">{{item.normal<16?'':item.normal+'%'}}</div>
<div class="big" :style="{background:item.name==='男'?'#1E80FF':'#00C2FF',left:(Number(item.small)+Number(item.normal))+'%', width:item.big+'%'}">{{item.big<16?'':item.big + '%'}}</div>
<div class="small" :style="{background:item.name==='男'?'#CAD0DA':'#C6D3D7',width:item.small + '%'}" @click="handleShow(item,index,0)">{{item.small<16?'':item.small + '%'}}
<div class="text" v-if="item.showList[0]">
<div class="icon"></div>
<text style="margin-right: 4px">低消费</text>
<text>{{item.small}}%</text>
</div>
</div>
<div class="normal" :style="{background:item.name==='男'?'#ACB9CD':'#AFC1C6',width:item.normal + '%',left:item.small+'%'}" @click="handleShow(item,index,1)">{{item.normal<16?'':item.normal+'%'}}
<div class="text" v-if="item.showList[1]">
<div class="icon"></div>
<text style="margin-right: 4px">普通消费</text>
<text>{{item.normal}}%</text>
</div>
</div>
<div class="big" :style="{background:item.name==='男'?'#1E80FF':'#00C2FF',left:(Number(item.small)+Number(item.normal))+'%', width:item.big+'%'}" @click="handleShow(item,index,2)">{{item.big<16?'':item.big + '%'}}
<div class="text" v-if="item.showList[2]">
<div class="icon"></div>
<text style="margin-right: 4px">高消费</text>
<text>{{item.big}}%</text>
</div>
</div>
</div>
<div class="imgKey">
@ -36,7 +54,8 @@ export default {
name: "consumptionLevel",
data() {
return {
genderList:[]//数据
genderList:[],//数据
list:[{name:'man',list:[false,false,false]},{name:'woman',list:[false,false,false]}],
}
},
props: {
@ -48,14 +67,39 @@ export default {
watch: {
data: {
handler(value) {
console.log('value',value)
this.genderList = value
this.genderList.forEach(item=>{
item.showList = [false,false,false]
})
console.log('this.genderList',this.genderList)
},
immediate: true
}
},
methods: {
handleShow(item,index,number){
if (index === 0){
//男
let list = []
this.genderList[0].showList.forEach(()=>{
list.push(false)
})
this.genderList[0].showList = list
this.genderList[0].showList[number] = true
}else if(index === 1){
//女
let list = []
this.genderList[1].showList.forEach(()=>{
list.push(false)
})
this.genderList[1].showList = list
this.genderList[1].showList[number] = true
}
this.$forceUpdate()
console.log('index',index)
console.log('number',number)
console.log('this.genderList',this.genderList)
}
}
}
</script>
@ -92,6 +136,23 @@ export default {
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #FFFFFF;
.text{
position: absolute;
padding: 0 5px;
z-index: 9;
left: 50px;top: -25px;
background: rgba(0,0,0,0.6);
color:#fff;
border-radius: 2px;
display: flex;
align-items: center;
.icon{
width: 10px;
height: 10px;
background: #1E80FF;
margin-right: 4px;
}
}
.big{
display: flex;
align-items: center;
@ -102,6 +163,25 @@ export default {
border-radius:0 2px 2px 0;
box-sizing: border-box;
padding-left: 4px;
.text{
width: 120px;
height: 26px;
position: absolute;
z-index: 9;
left: 0;top: 0;
transform: translateX(-100%);
background: rgba(0,0,0,0.6);
color:#fff;
border-radius: 2px;
display: flex;
align-items: center;
.icon{
width: 10px;
height: 10px;
background: #1E80FF;
margin-right: 4px;
}
}
}
.normal{
display: flex;
@ -110,6 +190,25 @@ export default {
position: absolute;
box-sizing: border-box;
padding-left: 4px;
.text{
width: 130px;
height: 26px;
position: absolute;
z-index: 9;
left: 0;top: 0;
transform: translateX(-100%);
background: rgba(0,0,0,0.6);
color:#fff;
border-radius: 2px;
display: flex;
align-items: center;
.icon{
width: 10px;
height: 10px;
background: #1E80FF;
margin-right: 4px;
}
}
}
.normal:after{
position: absolute;
@ -129,6 +228,23 @@ export default {
box-sizing: border-box;
padding-left: 4px;
border-radius:2px 0 0 2px;
.text{
position: absolute;
padding: 0 5px;
z-index: 9;
left: 50px;top: -25px;
background: rgba(0,0,0,0.6);
color:#fff;
border-radius: 2px;
display: flex;
align-items: center;
.icon{
width: 10px;
height: 10px;
background: #1E80FF;
margin-right: 4px;
}
}
}
.small:after{
position: absolute;

45
pages/commercialBI/components/guest/customerSecond.vue
View File

@ -18,8 +18,12 @@
</div>
</div>
<div class="progress">
<div class="man" :style="{width: man + '%'}"></div>
<div class="woman" :style="{width: woman + '%'}"></div>
<div class="man" :style="{width: man + '%'}" @click="handleShow(0)">
<view class="meng" v-if="genderList[0]">男生{{man}}%</view>
</div>
<div class="woman" :style="{width: woman + '%'}" @click="handleShow(1)">
<view class="meng" v-if="genderList[1]">女生{{woman}}%</view>
</div>
</div>
<div class="charts">
<canvas v-if="!customerSecondPath" class="sexRatio" canvas-id="gender" id="gender"/>
@ -38,7 +42,8 @@ export default {
man:0,
woman:0,
width:0,//手机宽度
customerSecondPath:''//路径
customerSecondPath:'',//路径
genderList:[false,false],
}
},
props: {
@ -52,10 +57,20 @@ export default {
handler(value) {
console.log('gender', value)
this.handleCarData(value)
}
},
deep:true,
immediate:true,
}
},
methods:{
handleShow(num){
let list = []
this.genderList.forEach(()=>{
list.push(false)
})
this.genderList = list
this.genderList[num] = true
},
// 处理传入的数据
handleCarData(value) {
this.man = value.man
@ -74,7 +89,7 @@ export default {
type: "bubble",
context: ctx,
width: _this.width,
height: 193,
height: 183,
series: data.series,
animation: false,
rotate: false,
@ -209,6 +224,16 @@ export default {
background: #1E80FF;
margin-right: 2px;
border-radius: 2px 0 0 2px;
.meng{
position: absolute;
display: inline-block;
padding: 0 5px;
z-index: 9;
left: 0;top: -10px;
background: rgba(0,0,0,0.6);
color:#fff;
border-radius: 2px;
}
}
.man:after{
position: absolute;
@ -226,6 +251,16 @@ export default {
right: 0;top: 0;
background: #00C2FF;
border-radius: 0 2px 2px 0 ;
.meng{
position: absolute;
display: inline-block;
padding: 0 5px;
z-index: 9;
right: 0;top: -10px;
background: rgba(0,0,0,0.6);
color:#fff;
border-radius: 2px;
}
}
.woman:after{
position: absolute;

4
pages/commercialBI/components/headerTop.vue
View File

@ -118,7 +118,7 @@ export default {
let req = {
SearchParameter:{
STATISTICS_DATE:storeTime,
ANALYSISINS_TYPE:this.analyseInfo.analysisins_type1,
ANALYSISINS_TYPE:this.analyseInfo.analysisins_type,
ANALYSISINS_FORMAT:1000,
ANALYSISINS_STATE:1,
SERVERPART_ID:storeServiceInfo.Serverpart_ID,
@ -130,7 +130,7 @@ export default {
let reqText = {
SearchParameter:{
STATISTICS_DATE:storeTime,
ANALYSISINS_TYPE:this.analyseInfo.analysisins_type2,
ANALYSISINS_TYPE:this.analyseInfo.analysisins_type,
ANALYSISINS_FORMAT:2000,
ANALYSISINS_STATE:1,
SERVERPART_ID:storeServiceInfo.Serverpart_ID,

4
pages/commercialBI/components/manager/contractGuarantee.vue
View File

@ -1,8 +1,8 @@
<template>
<div class="contractGuarantee">
<div class="top">
<p class="title">{{obj.title}}</p>
<p class="value">{{obj.value}}%</p>
<p class="title">{{obj.title?obj.title:''}}</p>
<p class="value">{{obj.value?obj.value:''}}%</p>
</div>
<div class="progress">
<div class="success" :style="{width:obj.value + '%'}"></div>

21
pages/commercialBI/components/manager/moneyCompare.vue
View File

@ -28,33 +28,40 @@ export default {
this.comparePath = ''
this.handleCarData(value)
},
immediate: true
immediate: true,
deep: true
}
},
methods: {
// 处理传入的数据
handleCarData(value) {
console.log('value1',value)
let res = value
let config = {
price:''
price:'',
max:0
}
if (value.type===0){
config.price = '单位: 万元'
config.max = this.getNumberHundred(value.max)
}else if(value.type===1){
config.price = '单位: 笔'
config.max = this.getNumber(value.max)
}else if(value.type===2){
config.price = '单位: 元'
config.max = this.getNumber(value.max)
}
console.log('config',config)
this.drawCharts('compare', res,config)
},
getNumber(value){
let number = value / 20
let number = Number(value) / 20
number = Math.ceil(number)
console.log(number)
console.log('number',number)
return number * 20
},
getNumberHundred(value){
let number = value / 2000
let number = Number(value) / 2000
number = Math.ceil(number)
console.log(number)
return number * 2000
@ -95,9 +102,9 @@ export default {
data: [
{
min: 0,
max: data.type===1?_this.getNumberHundred(data.max):_this.getNumber(data.max),
max: config.max,
title: config.price,
titleOffsetX:8,
titleOffsetX:15,
titleOffsetY:-5,
fontSize:12,
}

9
pages/commercialBI/components/noData.vue
View File

@ -1,7 +1,8 @@
<template>
<div class="main">
<image class="img" src="https://eshangtech.com/ShopICO/ahyd-BID/commercial/noData.svg"></image>
<p class="text">抱歉,服务区采集样本过小,无法分析</p>
<p class="text" v-if="type!=='car'">抱歉,服务区采集样本过小,无法分析</p>
<p class="text" v-else>抱歉,第三方数据未传,无法分析</p>
</div>
</template>
@ -13,6 +14,12 @@ export default {
}
},
props:{
type:{
type:String,
default:''
}
},
methods:{
}

3
pages/commercialBI/formatPortrait.vue
View File

@ -80,8 +80,7 @@ export default {
serviceInfo:{}, //当前服务区信息
backType:'',//返回的页面类型
analyseInfo:{
analysisins_type1: 1501,
analysisins_type2: 1502
analysisins_type: 1501
},
}
},

180
pages/commercialBI/guestPortrait.vue
View File

@ -4,23 +4,34 @@
:serverpartName="serviceInfo.SERVERPART_NAME" :spregionTypeName="serviceInfo.SPREGIONTYPE_NAME" :serviceInfo="serviceInfo"/>
<div class="charts">
<div class="time">
<text class="thisTime">统计月份: </text>
<div class="select">
<picker mode="date" fields="month" :value="single" @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>
<div class="chartsItem">
<p class="title">客群分析</p>
<p class="title">{{thisMonth?thisMonth:'-'}}月客群分析</p>
<div v-if="customer">
<customer-first :analyseInfo="{analysisins_type: 1202,analysisins_format: 2000}" :data="customer" />
</div>
<no-data v-else />
</div>
<div class="chartsItem" style="margin-top: 32px">
<p class="title">客群分析</p>
<div v-if="genderBubbleList.res.length!==0">
<p class="title">{{thisMonth?thisMonth:'-'}}月客群分析</p>
<div v-if="genderBubbleList.res.length>0">
<customer-second :data="genderBubbleList" />
<analyse :analyseInfo="{analysisins_type: 1203,analysisins_format: 2000}" />
</div>
<no-data v-else />
</div>
<div class="chartsItem" style="margin-top: 32px">
<p class="title">客群消费偏好</p>
<p class="title">{{thisMonth?thisMonth:'-'}}月客群消费偏好</p>
<div v-if="consterPreferList.series.length>0">
<consum-prefer :data="consterPreferList" />
<analyse :analyseInfo="{analysisins_type: 1204,analysisins_format: 2000}" />
@ -28,7 +39,7 @@
<no-data v-else/>
</div>
<div class="chartsItem" style="margin-top: 32px">
<p class="title">客群消费水平</p>
<p class="title">{{thisMonth?thisMonth:'-'}}月客群消费水平</p>
<div v-if="consumptionLevelList.length>0">
<consumption-level :data="consumptionLevelList"/>
<analyse :analyseInfo="{analysisins_type: 1205,analysisins_format: 2000}" />
@ -36,7 +47,7 @@
<no-data v-else />
</div>
<div class="chartsItem" style="margin-top: 32px">
<p class="title">业态消费偏好</p>
<p class="title">{{thisMonth?thisMonth:'-'}}月业态消费偏好</p>
<div v-if="businessTypeList.length>0">
<business-type :data="businessTypeList"></business-type>
<analyse :analyseInfo="{analysisins_type: 1206,analysisins_format: 2000}" />
@ -78,9 +89,10 @@ export default {
serviceInfo:{}, //当前服务区信息
backType:'',//返回的页面类型
analyseInfo:{
analysisins_type1: 1201,
analysisins_type2: 1202
analysisins_type: 1201,
},
single:'',//显示时间
thisMonth:'',//几月
}
},
onLoad(option){
@ -95,6 +107,14 @@ export default {
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 storeServiceInfo = uni.getStorageSync('currentService')
if (storeServiceInfo){
this.serviceInfo = storeServiceInfo
@ -123,6 +143,31 @@ export default {
this.getBusinessTypeList()
},
methods:{
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(){
//customer
this.getCustomer()
//客群分析男女的气泡图
this.getGenderBubbleList()
//客群消费偏好
this.getConsterPreferList()
//客群消费水平
this.getConsumptionLevelList()
//业态偏好
this.getBusinessTypeList()
},
//当前最近的服务区数据
async nearestService(){
let seat = uni.getStorageSync('seatInfo');
@ -146,18 +191,44 @@ export default {
//customer
// 用async await直接等待接口数据返回之后再对数据直接进行处理 节约时间
async getCustomer(){
let time = ''
const date = new Date(this.single)
let y = date.getFullYear()
let m = date.getMonth() + 1
const nowDate = new Date()
let nowYear = nowDate.getFullYear()
let nowMonth = nowDate.getMonth() + 1
if (y===nowYear && m===nowMonth){
time = this.time
}else{
time = this.endTime
}
const req = {
Province_Code:'340000',
Statistics_Date:this.time,
Statistics_Date:time,
Serverpart_ID:this.serviceInfo.Serverpart_ID,
ShowConsumptionLevel:true,
ShowConvertRate:true
}
console.log('req2222',req)
let totalData = await request.$webGet('CommercialApi/Revenue/GetTransactionAnalysis',req)
this.customer = totalData.Result_Data
this.customer = totalData.Result_Data?totalData.Result_Data:{}
},
//客群分析男女的气泡图
async getGenderBubbleList(){
let time = ''
const date = new Date(this.single)
let y = date.getFullYear()
let m = date.getMonth() + 1
const nowDate = new Date()
let nowYear = nowDate.getFullYear()
let nowMonth = nowDate.getMonth() + 1
if (y===nowYear && m===nowMonth){
time = this.time
}else{
time = this.endTime
}
let result = {
man:'',
woman:'',
@ -167,7 +238,7 @@ export default {
statisticsType:2,
provinceCode:'340000',
serverpartId:this.serviceInfo.Serverpart_ID,
statisticsMonth:this.$util.getThisMonth(this.time)
statisticsMonth:this.$util.getThisMonth(time)
}
let totalData = await request.$webGet('CommercialApi/Customer/GetCustomerRatio',req)
totalData.Result_Data.List.forEach(item=>{
@ -181,7 +252,7 @@ export default {
const bubbleReq = {
provinceCode:'340000',
serverpartId:this.serviceInfo.Serverpart_ID,
statisticsMonth:this.$util.getThisMonth(this.time)
statisticsMonth:this.$util.getThisMonth(time)
}
let bubbleData = await request.$webGet('CommercialApi/Customer/GetCustomerGroupRatio',bubbleReq)
@ -200,17 +271,23 @@ export default {
},
//客群消费偏好
async getConsterPreferList(){
const date = new Date(this.time)
let time = ''
const date = new Date(this.single)
let y = date.getFullYear()
let m = date.getMonth() + 1
if (m<10){
m ='0' + m
const nowDate = new Date()
let nowYear = nowDate.getFullYear()
let nowMonth = nowDate.getMonth() + 1
if (y===nowYear && m===nowMonth){
time = this.time
}else{
time = this.endTime
}
const req = {
statisticsType:1,
startMonth:this.$util.getThisMonth(this.time),
endMonth:this.$util.getThisMonth(this.time),
startMonth:this.$util.getThisMonth(time),
endMonth:this.$util.getThisMonth(time),
provinceCode: '340000',
serverpartId: this.serviceInfo.Serverpart_ID
}
@ -241,10 +318,22 @@ export default {
},
//客群消费水平
async getConsumptionLevelList(){
let time = ''
const date = new Date(this.single)
let y = date.getFullYear()
let m = date.getMonth() + 1
const nowDate = new Date()
let nowYear = nowDate.getFullYear()
let nowMonth = nowDate.getMonth() + 1
if (y===nowYear && m===nowMonth){
time = this.time
}else{
time = this.endTime
}
const req = {
provinceCode:'340000',
serverpartId:this.serviceInfo.Serverpart_ID,
statisticsMonth:this.$util.getThisMonth(this.time)
statisticsMonth:this.$util.getThisMonth(time)
}
const data = await request.$webGet('CommercialApi/Customer/GetCustomerConsumeRatio',req)
let res = []
@ -258,9 +347,21 @@ export default {
},
//业态偏好
async getBusinessTypeList(){
let time = ''
const date = new Date(this.single)
let y = date.getFullYear()
let m = date.getMonth() + 1
const nowDate = new Date()
let nowYear = nowDate.getFullYear()
let nowMonth = nowDate.getMonth() + 1
if (y===nowYear && m===nowMonth){
time = this.time
}else{
time = this.endTime
}
const req = {
ProvinceCode:'340000',
StatisticsDate:this.time,
StatisticsDate:time,
serverpartId:this.serviceInfo.Serverpart_ID
}
const data = await request.$webGet('CommercialApi/Revenue/GetBusinessTradeRevenue',req)
@ -305,8 +406,47 @@ export default {
.charts{
width: 100%;
box-sizing: border-box;
padding: 28px 16px 24px;
padding: 14px 16px 24px;
background: #fff;
.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;
}
}
}
}
.chartsItem{
.title{
font-size: 17px;

120
pages/commercialBI/managePortrait.vue
View File

@ -77,7 +77,7 @@
<div class="question" @click.stop="handleShowNotice">
<image src="/static/images/index/noticeQuestion.svg"></image>
</div>
<div v-if="showNotice" class="titleTopNotice"></div>
<div v-if="showNotice" class="titleTopNotice">{{monthNoticeText}}</div>
<div v-if="showNotice" class="meng" @click.stop="handleNoShowNotice"></div>
</div>
<view class="box">
@ -126,7 +126,7 @@
<div class="question" @click.stop="handleShowNoticeYear">
<image src="/static/images/index/noticeQuestion.svg"></image>
</div>
<div v-if="showNoticeYear" class="titleTopNotice"></div>
<div v-if="showNoticeYear" class="titleTopNotice">{{yearNoticeText}}</div>
<div v-if="showNoticeYear" class="meng" @click.stop="handleNoShowNoticeYear"></div>
</div>
<view class="box">
@ -213,9 +213,11 @@ export default {
serviceInfo:{}, //当前服务区信息
backType:'',//返回的页面类型
analyseInfo:{
analysisins_type1: 1301,
analysisins_type2: 1302
analysisins_type: 1301
},
monthNoticeText:'',
yearNoticeText:'',
lastDay:''
}
},
onLoad(option) {
@ -227,6 +229,7 @@ export default {
},
onShow(){
let storeTime = uni.getStorageSync('lastDay')
this.lastDay = uni.getStorageSync('lastDay')
if (storeTime){
this.time = storeTime
}
@ -246,9 +249,9 @@ export default {
//营收分析
this.getRevenueList()
//合同保底
this.getContractList()
// this.getContractList()
//客流客单交易
this.getOrderTransaction()
// this.getOrderTransaction()
//营收对比
this.getMoneyCompareList()
//营收趋势
@ -257,8 +260,53 @@ export default {
this.getRevenueType()
//月度计划、年度计划
this.monthYearPlan()
//问号显示的内容
this.handleNoticeMonth()
this.handleNoticeYear()
},
methods:{
async handleNoticeMonth(){
let date = new Date(this.lastDay)
let y = date.getFullYear()
let m = date.getMonth() + 1
if(m<10){
m = '0'+m
}
//本月的
let req = {
SearchParameter:{
STATISTICS_DATE:`${y}-${m}`,
ANALYSISINS_TYPE:'1011',
ANALYSISINS_FORMAT:'3000'
},
PageIndex:1,
PageSize:10
}
const data = await request.$webPost('CommercialApi/Analysis/GetANALYSISINSList',req)
this.monthNoticeText = data.Result_Data.List[0].ANALYSIS_CONTENT
},
async handleNoticeYear(){
let date = new Date(this.lastDay)
let y = date.getFullYear()
let m = date.getMonth() + 1
if(m<10){
m = '0'+m
}
//本年
let reqYear = {
SearchParameter:{
STATISTICS_DATE:`${y}`,
ANALYSISINS_TYPE:'1012',
ANALYSISINS_FORMAT:'3000'
},
PageIndex:1,
PageSize:10
}
const totalData = await request.$webPost('CommercialApi/Analysis/GetANALYSISINSList',reqYear)
this.yearNoticeText = totalData.Result_Data.List[0].ANALYSIS_CONTENT
},
async nearestService(){
let seat = uni.getStorageSync('seatInfo');
let req = {
@ -290,24 +338,44 @@ export default {
handleNoShowNoticeYear(){
this.showNoticeYear = false
},
getRevenueList(){
let res = []
this.revenueList = res
},
getContractList(){
let res = {
title: '完成率',
value: 67.1
async getRevenueList(){
let req = {
statisticsDate:this.time,
provinceCode:'340000',
Serverpart_ID:this.serviceInfo.Serverpart_ID,
SPRegionType_ID:this.serviceInfo.SPRegionType_ID
}
this.contractList = res
},
getOrderTransaction(){
let res = {
title: '转化率',
value: 50.5
let totalData = await request.$webGet('CommercialApi/Contract/GetContractAnalysis',req)
console.log('totalData123',totalData)
this.revenueList = {
ContractProfitLoss:totalData.Result_Data.ContractProfitLoss,
ShopCount:totalData.Result_Data.ShopCount,
SalesPerSquareMeter:totalData.Result_Data.SalesPerSquareMeter,
ExpiredShopCount:totalData.Result_Data.ExpiredShopCount
}
this.contractList = {
title:'完成率',
value:totalData.Result_Data.ContractCompletionDegree
}
this.orderTransaction = {
title:'转化率',
value:totalData.Result_Data.ConvertRate
}
this.orderTransaction = res
},
// getContractList(){
// let res = {
// title: '完成率',
// value: 67.1
// }
// this.contractList = res
// },
// getOrderTransaction(){
// let res = {
// title: '转化率',
// value: 50.5
// }
// this.orderTransaction = res
// },
//选项卡改变
handleChangeTab(value){
this.selectTab = value
@ -317,11 +385,11 @@ export default {
},
async getMoneyCompareList(){
let req = {
ProvinceCode:'340000',
StatisticsDate:this.time,
ServerpartId:this.serviceInfo.Serverpart_ID
}
const data = await request.$webGet('CommercialApi/Revenue/GetRevenueCompare',req)
console.log('data123123123',data)
let RevenueAmount = [] //营收金额
let RevenueMax = 0
let TicketCountList = [] // 客单量
@ -341,15 +409,17 @@ export default {
})
data.Result_Data.TicketCountList.forEach(item=>{
let list = []
console.log('data.Result_Data.TicketCountList',data.Result_Data.TicketCountList)
item.data.forEach(subItem=>{
let number = (subItem[1]).toFixed(0)
if (number>TicketMax){
TicketMax = number
if (number > TicketMax){
TicketMax = Number(number)
}
list.push(number)
})
TicketCountList.push({name:item.name,data:list})
})
console.log('TicketMax',TicketMax)
data.Result_Data.AvgTicketAmountList .forEach(item=>{
let list = []
item.data.forEach(subItem=>{
@ -395,7 +465,7 @@ export default {
}
]
this.revenue = this.revenueAll[this.selectTab]
console.log('this.revenueAll',this.revenueAll)
// let res = {
// categories: ["1月","2月","3月","4月","5月","6月","7月","8月","9月","10月","11月","12月"],
// series: [

645
pages/commercialBI/planDetail.vue
View File

@ -1,36 +1,52 @@
<template>
<div class="main">
<div class="listBox" v-if="type==='year'">
<div class="list">
<div class="top">
<div class="left">
<p class="title"><text class="name">{{month}}</text>月</p>
<div class="value" >{{info.Budget_Degree}}%</div>
</div>
<div class="right">
<text class="comparePlan">比计划： </text>
<div class="box2">
<image class="addIcon" :src="Number(info.Growth_Rate)>0?'https://eshangtech.com/ShopICO/ahyd-BID/index/addIcon.svg':'https://eshangtech.com/ShopICO/ahyd-BID/index/reduce.svg'"></image>
<p class="text">{{info.Growth_Rate ?info.Growth_Rate + '%':''}}</p>
</div>
</div>
</div>
<div class="progress">
<div class="have" :style="{width:info.Budget_Degree + '%'}"></div>
</div>
<div class="bottom">
<div class="success">
<p>已完成:</p>
<text class="money">{{info.Revenue_Amount}}</text>
</div>
<div class="success">
<p>计划: </p>
<text class="money">{{info.Budget_Amount}}</text>
</div>
</div>
<div class="thisMonth">
<div class="titleTop">
<p class="title">{{month}}月自营计划</p>
<div class="question" @click="handleShowNotice">
<image src="/static/images/index/noticeQuestion.svg"></image>
</div>
<div v-if="showNotice" class="titleTopNotice">{{monthText}}</div>
<div v-if="showNotice" class="meng" @click="handleNoShowNotice"></div>
</div>
<div class="list" v-for="(item,index) in dataList" :key="index">
<view class="box">
<view class="top">
<view class="big">
<image class="icon" src="https://eshangtech.com/ShopICO/ahyd-BID/index/thisMonth.svg"></image>
</view>
<view class="text">
<view class="textTop">
<view class="left">
<p class="number">{{info.Budget_Degree?info.Budget_Degree + '%':'-'}}</p>
<p v-if="info.Budget_Degree>=100" class="desc"><image class="success" src="/static/images/index/successMonth.svg"></image></p>
</view>
<view class="right">
<text class="comparePlan">比计划： </text>
<view class="box2">
<image class="addIcon" :src="Number(info.Growth_Rate)>0?'https://eshangtech.com/ShopICO/ahyd-BID/index/addIcon.svg':'https://eshangtech.com/ShopICO/ahyd-BID/index/reduce.svg'"></image>
<p class="text">{{info.Growth_Rate ?info.Growth_Rate + '%':'-'}}</p>
</view>
</view>
</view>
<div class="progressPlan">
<div class="trans" :style="{width:info.Budget_Degree > 100 ? '100%' : info.Budget_Degree + '%'}"></div>
</div>
</view>
</view>
<view class="bottom">
<view class="success" style="margin-right: 39px">
<p class="text">本月已完成<text class="unit">/元</text></p>
<p class="money">{{info.Revenue_Amount ?info.Revenue_Amount :'-'}}</p>
</view>
<view class="success">
<p class="text">本月计划<text class="unit">/元</text></p>
<p class="money">{{info.Budget_Amount ?info.Budget_Amount :'-'}}</p>
</view>
</view>
</view>
</div>
<div class="list" v-for="(item,index) in dataList" :key="index" @click="handleDetail(item)">
<div class="top">
<div class="left">
<p class="title" v-if="type==='year'"><text class="name">{{item.name}}</text>{{item.unit}}</p>
@ -49,45 +65,62 @@
</div>
<div class="bottom">
<div class="success">
<p>已完成:</p>
<text class="text">已完成:</text>
<text class="money">{{item.Revenue_Amount}}</text>
</div>
<div class="success">
<p>计划: </p>
<text class="text">计划: </text>
<text class="money">{{item.Budget_Amount }}</text>
</div>
</div>
</div>
</div>
<div class="listBox" v-if="type==='month'">
<div class="list">
<div class="top">
<div class="left">
<p class="title"><text class="name">{{item.name}}</text>{{item.unit}}</p>
<div class="value" >{{info.Budget_Degree}}%</div>
</div>
<div class="right">
<text class="comparePlan">比计划： </text>
<div class="box2">
<image class="addIcon" :src="Number(info.Growth_Rate)>0?'https://eshangtech.com/ShopICO/ahyd-BID/index/addIcon.svg':'https://eshangtech.com/ShopICO/ahyd-BID/index/reduce.svg'"></image>
<p class="text">{{info.Growth_Rate ?info.Growth_Rate + '%':''}}</p>
</div>
</div>
</div>
<div class="progress">
<div class="have" :style="{width:info.Budget_Degree + '%'}"></div>
</div>
<div class="bottom">
<div class="success">
<p>已完成:</p>
<text class="money">{{info.Revenue_Amount}}</text>
</div>
<div class="success">
<p>计划: </p>
<text class="money">{{info.Budget_Amount}}</text>
</div>
</div>
<div class="thisMonth">
<div class="titleTop">
<p class="title">{{item.Serverpart_Name}}自营计划</p>
<div class="question" @click="handleShowNotice">
<image src="/static/images/index/noticeQuestion.svg"></image>
</div>
<div v-if="showNotice" class="titleTopNotice">{{itemText}}</div>
<div v-if="showNotice" class="meng" @click="handleNoShowNotice"></div>
</div>
<view class="box">
<view class="top">
<view class="big">
<image class="icon" src="https://eshangtech.com/ShopICO/ahyd-BID/index/thisMonth.svg"></image>
</view>
<view class="text">
<view class="textTop">
<view class="left">
<p class="number">{{info.Budget_Degree?info.Budget_Degree + '%':'-'}}</p>
<p v-if="info.Budget_Degree>=100" class="desc"><image class="success" src="/static/images/index/successMonth.svg"></image></p>
</view>
<view class="right">
<text class="comparePlan">比计划： </text>
<view class="box2">
<image class="addIcon" :src="Number(info.Growth_Rate)>0?'https://eshangtech.com/ShopICO/ahyd-BID/index/addIcon.svg':'https://eshangtech.com/ShopICO/ahyd-BID/index/reduce.svg'"></image>
<p class="text">{{info.Growth_Rate ?info.Growth_Rate + '%':'-'}}</p>
</view>
</view>
</view>
<div class="progressPlan">
<div class="trans" :style="{width:info.Budget_Degree > 100 ? '100%' : info.Budget_Degree + '%'}"></div>
</div>
</view>
</view>
<view class="bottom">
<view class="success" style="margin-right: 39px">
<p class="text">本月已完成<text class="unit">/元</text></p>
<p class="money">{{info.Revenue_Amount ?info.Revenue_Amount :'-'}}</p>
</view>
<view class="success">
<p class="text">本月计划<text class="unit">/元</text></p>
<p class="money">{{info.Budget_Amount ?info.Budget_Amount :'-'}}</p>
</view>
</view>
</view>
</div>
<div class="list" v-for="(item,index) in dataList" :key="index">
<div class="top">
<div class="left">
@ -107,11 +140,11 @@
</div>
<div class="bottom">
<div class="success">
<p>已完成:</p>
<p class="text">已完成:</p>
<text class="money">{{item.Revenue_Amount}}</text>
</div>
<div class="success">
<p>计划: </p>
<p class="text">计划: </p>
<text class="money">{{item.Budget_Amount }}</text>
</div>
</div>
@ -130,19 +163,34 @@ export default {
type:'', //类别
dataList:[],
id:'',
showNotice:false,
showNoticeYear:false,
info:{},
month:0,//传入的月份
item:{}//月份的时候传入的整个片区信息
item:{},//月份的时候传入的整个片区信息
itemText:'',//片区显示的文字
monthText:'',//月份显示的文字
lastDay:'',
second:false
}
},
onLoad(option){
console.log('option',option)
this.type = option.type
if (option.id){
this.id =option.id
}
// 从缓存中拿到选中的时间
this.lastDay = uni.getStorageSync('lastDay')
// 判断是否是第二次进入页面，因为月份的片区 再点进去展示的月份的服务区 需要的参数会不一样
if (option.second==='true'){
this.second = true
}
// 拿到上一个页面带来的参数
this.type = option.type
if (option.id){
this.id =option.id
}
// 拿到传入的月份
this.month = Number(option.month)
let date = new Date()
// 取全局的时间
console.log('this.lastDay',this.lastDay)
let date = new Date(this.lastDay)
let y = date.getFullYear()
let m = date.getMonth() + 1
let d = date.getDate()
@ -152,92 +200,191 @@ export default {
if (d<10){
d = '0' + d
}
console.log('d',d)
// 判断如果是当前月份的话 就拿到当前时间，不是当前月份的话 就拿那个月的最后一天
if (option.month){
if (m === Number(option.month)){
if (Number(m) === Number(option.month)){
this.date = `${y}-${m}-${d}`
console.log('this.date',this.date)
}else{
let month
if (this.month<10){
month = '0' + this.month
}else{
month = this.month
}
//月份不是当前月
let mayDate = `${y}-${option.month}`
let mayDate = `${y}-${month}`
console.log('mayDate',mayDate)
let addDay = this.$util.getThisMonthDay(mayDate)
this.date = `${y}-${option.month}-${addDay}`
console.log('addDay',addDay)
this.date = `${mayDate}-${addDay}`
}
}
if (option.item){
this.item = JSON.parse(option.item)
}
console.log('this.date',this.date)
// 直接把上一个页面点进的片区属性全部拿来
if (option.item){
this.item = JSON.parse(option.item)
}
// 如果是第二次进入 那么调用的方法也不一样 做个判断
if (option.second==='true'){
this.getDateSecond()
}else{
this.getDateList()
}
// 拿到问号里面的文字
this.handleNoticeText()
},
onShow(){
// 判断让小程序页面标题展示相应的名字
if (this.second){
uni.setNavigationBarTitle({
title: `${this.month}月${this.item.Serverpart_Name}自营计划`,
})
}else{
if (this.type==='year'){
//每个月片区的列表
uni.setNavigationBarTitle({
title: `${this.month}月自营计划`,
})
//每个月片区的列表
uni.setNavigationBarTitle({
title: `${this.month}月自营计划`,
})
}else{
//片区进来服务区的列表
uni.setNavigationBarTitle({
title: `${this.item.Serverpart_Name}本月自营计划`,
})
//片区进来服务区的列表
uni.setNavigationBarTitle({
title: `${this.item.Serverpart_Name}本月自营计划`,
})
}
}
},
methods:{
async getDateList(){
if (this.type==='year'){
let req = {
StatisticsDate:this.date,
ProvinceCode:'340000',
StatisticsType:1
}
const data = await request.$webGet('CommercialApi/Revenue/GetProvinceRevenueBudget',req)
data.Result_Data.RegionBudgetList.forEach(item=>{
let num = item.Serverpart_Name.indexOf('片区')
console.log(num)
if (num!==-1){
item.name = item.Serverpart_Name.slice(0,num)
item.unit = item.Serverpart_Name.slice(num,100)
}else{
item.name = item.Serverpart_Name
}
item.Revenue_Amount = this.$util.fmoney(item.Revenue_Amount)
item.Budget_Amount = this.$util.fmoney(item.Budget_Amount)
})
this.info = data.Result_Data
this.info.Budget_Amount = this.$util.fmoney(this.info.Budget_Amount)
this.info.Revenue_Amount = this.$util.fmoney(this.info.Revenue_Amount)
this.dataList = data.Result_Data.RegionBudgetList
console.log('data',data)
}else{
let time = uni.getStorageSync('lastDay')
let req = {
StatisticsDate:time,
ProvinceCode:'340000',
StatisticsType:4,
SPRegionTypeID:this.id
}
const data = await request.$webGet('CommercialApi/Revenue/GetProvinceRevenueBudget',req)
data.Result_Data.RegionBudgetList.forEach(item=>{
let num = item.Serverpart_Name.indexOf('服务区')
console.log(num)
if (num!==-1){
item.name = item.Serverpart_Name.slice(0,num)
item.unit = item.Serverpart_Name.slice(num,100)
}else{
item.name = item.Serverpart_Name
}
item.Revenue_Amount = this.$util.fmoney(item.Revenue_Amount)
item.Budget_Amount = this.$util.fmoney(item.Budget_Amount)
})
this.info = data.Result_Data
this.info.Budget_Amount = this.$util.fmoney(this.info.Budget_Amount)
this.info.Revenue_Amount = this.$util.fmoney(this.info.Revenue_Amount)
this.dataList = data.Result_Data.RegionBudgetList
console.log('data',data)
}
async getDateSecond(){
let req = {
StatisticsDate:this.date,
ProvinceCode:'340000',
StatisticsType:4,
SPRegionTypeID:this.id
}
const data = await request.$webGet('CommercialApi/Revenue/GetProvinceRevenueBudget',req)
data.Result_Data.RegionBudgetList.forEach(item=>{
let num = item.Serverpart_Name.indexOf('服务区')
console.log(num)
if (num!==-1){
item.name = item.Serverpart_Name.slice(0,num)
item.unit = item.Serverpart_Name.slice(num,100)
}else{
item.name = item.Serverpart_Name
}
item.Revenue_Amount = this.$util.fmoney(item.Revenue_Amount)
item.Budget_Amount = this.$util.fmoney(item.Budget_Amount)
})
this.info = data.Result_Data
this.info.Budget_Amount = this.$util.fmoney(this.info.Budget_Amount)
this.info.Revenue_Amount = this.$util.fmoney(this.info.Revenue_Amount)
this.dataList = data.Result_Data.RegionBudgetList
},
// 当从年份点进来的时候 片区列表的每一项都可以再次点击 进入到当月的 这个片区下的服务区的列表数据
handleDetail(item){
uni.navigateTo({
url:`/pages/commercialBI/planDetail?type=month&item=${JSON.stringify(item)}&id=${item.Serverpart_ID}&second=${true}&month=${this.month}`
})
},
async handleNoticeText(){
let date = new Date(this.lastDay)
let y = date.getFullYear()
let m = date.getMonth() + 1
if(m<10){
m = '0'+m
}
let req = {}
if (this.type==='year'){
req = {
SearchParameter:{
STATISTICS_DATE:`${m}`,
ANALYSISINS_TYPE:'1012',
ANALYSISINS_FORMAT:'3000'
},
PageIndex:1,
PageSize:10
}
}else{
req = {
SearchParameter:{
STATISTICS_DATE:`${y}-${m}`,
ANALYSISINS_TYPE:'1011',
ANALYSISINS_FORMAT:'3000',
SPREGIONTYPE_ID:this.item.Serverpart_ID
},
PageIndex:1,
PageSize:10
}
}
console.log('req222',req)
const data = await request.$webPost('CommercialApi/Analysis/GetANALYSISINSList',req)
this.monthText = data.Result_Data.List[0].ANALYSIS_CONTENT
this.itemText = data.Result_Data.List[0].ANALYSIS_CONTENT
},
handleShowNotice(){
this.showNotice = true
},
handleNoShowNotice(){
this.showNotice = false
},
handleShowNoticeYear(){
this.showNoticeYear = true
},
handleNoShowNoticeYear(){
this.showNoticeYear = false
},
async getDateList(){
if (this.type==='year'){
let req = {
StatisticsDate:this.date,
ProvinceCode:'340000',
StatisticsType:1
}
console.log('req111',req)
const data = await request.$webGet('CommercialApi/Revenue/GetProvinceRevenueBudget',req)
data.Result_Data.RegionBudgetList.forEach(item=>{
let num = item.Serverpart_Name.indexOf('片区')
console.log(num)
if (num!==-1){
item.name = item.Serverpart_Name.slice(0,num)
item.unit = item.Serverpart_Name.slice(num,100)
}else{
item.name = item.Serverpart_Name
}
item.Revenue_Amount = this.$util.fmoney(item.Revenue_Amount)
item.Budget_Amount = this.$util.fmoney(item.Budget_Amount)
})
this.info = data.Result_Data
this.info.Budget_Amount = this.$util.fmoney(this.info.Budget_Amount)
this.info.Revenue_Amount = this.$util.fmoney(this.info.Revenue_Amount)
this.dataList = data.Result_Data.RegionBudgetList
}else{
let time = uni.getStorageSync('lastDay')
let req = {
StatisticsDate:time,
ProvinceCode:'340000',
StatisticsType:4,
SPRegionTypeID:this.id
}
const data = await request.$webGet('CommercialApi/Revenue/GetProvinceRevenueBudget',req)
data.Result_Data.RegionBudgetList.forEach(item=>{
let num = item.Serverpart_Name.indexOf('服务区')
if (num!==-1){
item.name = item.Serverpart_Name.slice(0,num)
item.unit = item.Serverpart_Name.slice(num,100)
}else{
item.name = item.Serverpart_Name
}
item.Revenue_Amount = this.$util.fmoney(item.Revenue_Amount)
item.Budget_Amount = this.$util.fmoney(item.Budget_Amount)
})
this.info = data.Result_Data
this.info.Budget_Amount = this.$util.fmoney(this.info.Budget_Amount)
this.info.Revenue_Amount = this.$util.fmoney(this.info.Revenue_Amount)
this.dataList = data.Result_Data.RegionBudgetList
}
}
}
}
</script>
@ -252,12 +399,217 @@ export default {
width: 100%;
box-sizing: border-box;
padding-bottom: calc(8px + env(safe-area-inset-bottom)) ;
.thisMonth{
margin-bottom: 12px;
.titleTop{
display: flex;
align-items: center;
position: relative;
.title {
font-size: 32rpx;
font-family: PingFangSC-Semibold, PingFang SC;
font-weight: 600;
color: #160002;
line-height: 44rpx;
}
.question{
width: 16px;
height: 16px;
margin-left: 4px;
display: flex;
align-items: center;
image{
width: 100%;
height: 100%;
}
}
.titleTopNotice{
position: absolute;
padding: 12px;
left:35%;
top: 0;
width: 50vw;
background: #FFFFFF;
box-shadow: 0 10px 10px 0 rgba(22,0,2,0.1);
z-index: 9999;
}
.meng{
width: 100vw;
height: 100vh;
position: fixed;
top: 0;left: 0;
}
}
.box {
width: 100%;
padding: 12px 16px;
box-sizing: border-box;
border-radius: 8px;
background: #f5f2f2;
margin-top: 12px;
.top {
width: 100%;
display: flex;
.big {
width: 40px;
height: 40px;
background: #ffffff;
border-radius: 8px;
border: 1px solid #ebebeb;
display: flex;
justify-content: center;
align-items: center;
margin-right: 8px;
.icon {
width: 20px;
height: 20px;
}
}
.text {
width: calc(100% - 60px);
padding: 2px 0;
.textTop{
display: flex;
align-items: center;
justify-content: space-between;
.left{
display: flex;
align-items: center;
.number {
font-size: 36rpx;
font-family: DINAlternate-Bold, DINAlternate;
font-weight: bold;
color: #150002;
line-height: 40rpx;
}
.desc{
display: flex;
align-items: center;
margin-left: 8px;
font-size: 14px;
color: #FF7043;
.success{
width: 20px;
height: 20px;
margin-right: 4px;
}
}
}
.right{
flex: 1;
display: flex;
justify-content: flex-end;
align-items: center;
.comparePlan{
font-size: 24rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #a69e9f;
line-height: 36rpx;
white-space: nowrap;
}
.box2{
display: flex;
align-items: center;
.text{
font-size: 14px;
font-family: DINAlternate-Bold, DINAlternate;
color: #150002;
font-weight: bold;
line-height: 40rpx;
}
.addIcon {
width: 16px;
height: 16px;
margin-right: 2px;
}
}
}
}
.progressPlan{
width: 100%;
height: 8px;
border-radius: 5px;
background: #fff;
margin-top: 8px;
position: relative;
overflow: hidden;
.trans{
height: 8px;
position: absolute;
left: 0;top: 0;
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
background: url("https://eshangtech.com/ShopICO/ahyd-BID/index/progress_orange.png")no-repeat 100% 100%;
}
.transYear{
height: 8px;
position: absolute;
left: 0;top: 0;
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
background: url("https://eshangtech.com/ShopICO/ahyd-BID/index/progress_blue.png")no-repeat 100% 100%;
}
//.img{
// width: 100%;
// height: 100%;
// position: absolute;
// top: 0;
// left: 0;
// z-index:1;
//}
//.pro{
// height: 100%;
// position: absolute;
// top: 0;right: 0;
// background: #fff;
// z-index:2;
//}
}
}
}
.bottom {
display: flex;
margin-top: 16px;
padding-left: 48px;
.success {
.text {
font-size: 28rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #786b6c;
line-height: 40rpx;
margin-bottom: 2px;
.unit {
font-size: 28rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #a69e9f;
line-height: 40rpx;
margin-left: 2px;
}
}
.money {
font-size: 28rpx;
font-family: DINAlternate-Bold, DINAlternate;
font-weight: 600;
color: #160002;
line-height: 40rpx;
}
}
}
}
}
.list{
width: 100%;
box-sizing: border-box;
padding: 12px;
background: #F5F5F5;
margin-bottom: 12px;
border-radius: 8px;
.top{
display: flex;
align-items: center;
@ -271,12 +623,13 @@ export default {
margin-right: 8px;
}
.title{
font-size: 14px;
font-family: PingFangSC-Semibold, PingFang SC;
font-weight: 600;
color: #150002;
line-height: 20px;
font-size: 12px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #a69e9f;
line-height: 18px;
.name{
color: #150002;
font-size: 18px;
}
}
@ -343,21 +696,21 @@ export default {
.success {
width: calc(50% - 4px);
display: flex;
p{
align-items: center;
.text{
font-size: 12px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #a69e9f;
line-height: 18px;
line-height: 20px;
}
.money {
margin-left: 8px;
font-size: 14px;
font-family: PingFangSC-Semibold, PingFang SC;
font-weight: 600;
color: #160002;
color: #a69e9f;
line-height: 20px;
}
}
}

89
pages/commercialBI/planMonth.vue
View File

@ -6,7 +6,7 @@
<div class="question" @click="handleShowNotice">
<image src="/static/images/index/noticeQuestion.svg"></image>
</div>
<div v-if="showNotice" class="titleTopNotice"></div>
<div v-if="showNotice" class="titleTopNotice">{{monthNoticeText}}</div>
<div v-if="showNotice" class="meng" @click="handleNoShowNotice"></div>
</div>
<view class="box">
@ -51,7 +51,7 @@
<div class="question" @click="handleShowNoticeYear">
<image src="/static/images/index/noticeQuestion.svg"></image>
</div>
<div v-if="showNoticeYear" class="titleTopNotice"></div>
<div v-if="showNoticeYear" class="titleTopNotice">{{yearNoticeText}}</div>
<div v-if="showNoticeYear" class="meng" @click="handleNoShowNoticeYear"></div>
</div>
<view class="box">
@ -114,11 +114,11 @@
</div>
<div class="bottom">
<div class="success">
<p>已完成:</p>
<text class="text">已完成:</text>
<text class="money">{{item.Revenue_Amount}}</text>
</div>
<div class="success">
<p>计划: </p>
<text class="text">计划: </text>
<text class="money">{{item.Budget_Amount }}</text>
</div>
</div>
@ -146,12 +146,16 @@ export default {
Growth_Rate:0,
Budget_Amount:'',
Revenue_Amount:''
}
},
monthNoticeText:'',
yearNoticeText:''
}
},
onLoad(option){
// 拿到点进来的时间
this.lastDay = option.lastDay
// 判断是从年份还是月份点进
this.type = option.type
if (this.type==='month'){
uni.setNavigationBarTitle({
@ -165,9 +169,55 @@ export default {
uni.showLoading({
title: '正在加载...'
})
// 方法传入type用于结果的判断
this.getPlanListData(option.type)
// 问号显示的内容
this.handleNoticeMonth()
this.handleNoticeYear()
},
methods:{
async handleNoticeMonth(){
let date = new Date(this.lastDay)
let y = date.getFullYear()
let m = date.getMonth() + 1
if(m<10){
m = '0'+m
}
//本月的
let req = {
SearchParameter:{
STATISTICS_DATE:`${y}-${m}`,
ANALYSISINS_TYPE:'1011',
ANALYSISINS_FORMAT:'3000'
},
PageIndex:1,
PageSize:10
}
const data = await request.$webPost('CommercialApi/Analysis/GetANALYSISINSList',req)
this.monthNoticeText = data.Result_Data.List[0].ANALYSIS_CONTENT
},
async handleNoticeYear(){
let date = new Date(this.lastDay)
let y = date.getFullYear()
let m = date.getMonth() + 1
if(m<10){
m = '0'+m
}
//本年
let reqYear = {
SearchParameter:{
STATISTICS_DATE:`${y}`,
ANALYSISINS_TYPE:'1012',
ANALYSISINS_FORMAT:'3000'
},
PageIndex:1,
PageSize:10
}
const totalData = await request.$webPost('CommercialApi/Analysis/GetANALYSISINSList',reqYear)
this.yearNoticeText = totalData.Result_Data.List[0].ANALYSIS_CONTENT
},
//跳转到详情页
handleGoDetail(item){
console.log('item',item)
@ -183,9 +233,8 @@ export default {
},
async getPlanListData(type){
console.log('type',type)
let req = {
StatisticsDate:'2023-04-03',
StatisticsDate:this.lastDay,
ProvinceCode:'340000',
StatisticsType:type==='month'?1:type==='year'?2:''
}
@ -210,7 +259,6 @@ export default {
this.info.Budget_Amount = this.$util.fmoney(this.info.Budget_Amount)
this.info.Revenue_Amount = this.$util.fmoney(this.info.Revenue_Amount)
this.dataList = data.Result_Data.RegionBudgetList
console.log('data',data)
},
handleShowNotice(){
this.showNotice = true
@ -456,18 +504,14 @@ export default {
.left{
display: flex;
align-items: center;
.icon{
width: 20px;
height: 20px;
margin-right: 8px;
}
.title{
font-size: 14px;
font-family: PingFangSC-Semibold, PingFang SC;
font-weight: 600;
color: #150002;
line-height: 20px;
font-size: 12px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #a69e9f;
line-height: 18px;
.name{
color: #150002;
font-size: 18px;
}
}
@ -529,25 +573,26 @@ export default {
.bottom {
display: flex;
justify-content: space-between;
margin-top: 16px;
.success {
width: calc(50% - 4px);
display: flex;
p{
align-items: center;
.text{
font-size: 12px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #a69e9f;
line-height: 18px;
line-height: 20px;
}
.money {
margin-left: 8px;
font-size: 14px;
font-family: PingFangSC-Semibold, PingFang SC;
font-weight: 600;
color: #160002;
color: #a69e9f;
line-height: 20px;
}
}
}

171
pages/index/index.vue
View File

@ -23,13 +23,16 @@
<view class="box" @click="handlePage">
<view class="priceBox">
<p class="allPrice">{{showTableData.CashPay || '0.00'}}</p>
<image class="start" src="https://ahyd.eshangtech.com/UploadImageDir/ahyd_DIB/index/start.svg"></image>
</view>
<image class="start" src="https://ahyd.eshangtech.com/UploadImageDir/ahyd_DIB/index/start.svg"></image>
</view>
<view class="addBox">
<image class="arrowTop" :src="Number(showTableData.compared)>0?'https://eshangtech.com/ShopICO/ahyd-BID/index/arrow_top.svg':'https://eshangtech.com/ShopICO/ahyd-BID/index/arrow_reduce.svg'"></image>
<text class="text">{{showTableData.compared?showTableData.compared + '%':'-' + '%'}}</text>
<text class="compare">(相比昨日)</text>
<text class="smallTitle">{{thisMonth?thisMonth:'-'}}月累计:<text style="margin-left: 4px">{{plan.RevenueMonth_Amount?plan.RevenueMonth_Amount:'-'}}</text></text>
<view class="right">
<image class="arrowTop" :src="Number(showTableData.compared)>0?'https://eshangtech.com/ShopICO/ahyd-BID/index/arrow_top.svg':'https://eshangtech.com/ShopICO/ahyd-BID/index/arrow_reduce.svg'"></image>
<text class="text">{{showTableData.compared?showTableData.compared + '%':'-' + '%'}}</text>
<text class="compare">(相比昨日)</text>
</view>
</view>
</view>
<view v-if="!user.Membership_Id" class="title" style="font-size: 16px" @click="handleReg">去授权 </view>
@ -76,9 +79,9 @@
</view>
<view class="detailItem">
<p class="itemName">
移动支付<text class="itemUnit">/元</text>
分润到账<text class="itemUnit">/元</text>
</p>
<p class="price">{{showTableData.MobilePayment?showTableData.MobilePayment:'-' }}</p>
<p class="price">{{detailTypeList[1].yesterValue?detailTypeList[1].yesterValue:'-' }}</p>
</view>
<view class="detailItem">
<p class="itemName">
@ -94,9 +97,10 @@
</view>
<view class="detailItem">
<p class="itemName">
入区车流<text class="itemUnit">/辆</text>
日均入区<text class="itemUnit">/辆</text>
</p>
<p class="price">{{carInfo.Vehicle_Count?carInfo.Vehicle_Count:'-'}}</p>
<p class="price" v-if="carInfo.Vehicle_Count">{{carInfo.Vehicle_Count}}</p>
<p class="price" v-else style="color:red;font-size: 14px;font-weight: 400">第三方未传</p>
</view>
<view class="detailItem">
<p class="itemName">
@ -239,7 +243,7 @@
<div class="question" @click.stop="handleShowNotice">
<image src="/static/images/index/noticeQuestion.svg"></image>
</div>
<div v-if="showNotice" class="titleTopNotice"></div>
<div v-if="showNotice" class="titleTopNotice">{{monthNoticeText}}</div>
<div v-if="showNotice" class="meng" @click.stop="handleNoShowNotice"></div>
</div>
<view class="box">
@ -288,7 +292,7 @@
<div class="question" @click.stop="handleShowNoticeYear">
<image src="/static/images/index/noticeQuestion.svg"></image>
</div>
<div v-if="showNoticeYear" class="titleTopNotice"></div>
<div v-if="showNoticeYear" class="titleTopNotice">{{yearNoticeText}}</div>
<div v-if="showNoticeYear" class="meng" @click.stop="handleNoShowNoticeYear"></div>
</div>
<view class="box">
@ -430,6 +434,9 @@ export default {
SPREGIONTYPE_NAME:"芜湖片区",
Serverpart_ID:524
},//最近服务区的有用信息
monthNoticeText:'',
yearNoticeText:'',
thisMonth:0,//拿到当前月份
}
},
watch:{
@ -438,6 +445,13 @@ export default {
this.getData(this.option)
},
deep:true
},
seat:{
handler(value){
if (value.latitude && value.longitude){
this.nearestService()
}
}
}
},
computed: {
@ -460,14 +474,15 @@ export default {
onLoad(option){
// 处理页面显示的时间
this.single = timestampToTime((new Date(this.lastDay).getTime()))
// 获取手机参数对页面进行适配
// 获取手机参数对页面进行适配 主要是用于拿到胶囊的位置
let systemInfo = uni.getSystemInfoSync()
this.statusBarHeight = Number(systemInfo.statusBarHeight)
this.menu = uni.getMenuButtonBoundingClientRect()
// 获取最近有效日期的时间，以昨天为主
// 获取最近有效日期的时间，以昨天为主
const date = new Date(this.lastDay)
this.thisDay = getThisDay(date.getDay())
// 把时间存起来给全部页面都能拿到
this.thisMonth = this.$util.getThisTimeMonth(this.lastDay)
// 把时间存起来给全部页面都能拿到
uni.setStorageSync('lastDay',this.lastDay)
// 判断是否有投诉建议的悬浮框弹出
for(let key in this.toDoMsg){
@ -483,14 +498,16 @@ export default {
this.getData(option)
}
// 判断缓存中是否有位置信息 没有的话 向用户请求 拿到用户当前位置
// 拿到当前位置之后去请求离当前位置最近的服务区 作为第一次进入小程序自动选中的服务区
// 在用户选择服务区之后就会有当前服务区
this.seat = uni.getStorageSync('seatInfo')
console.log('this.seat',this.seat)
if (!this.seat){
let _this=this
//获取用户的经纬度位置存在stroge里面
uni.getFuzzyLocation({
wx.getFuzzyLocation({
type:'gcj02',
altitude:true,
success:function (res){
success: (res) =>{
let seatInfo = {
latitude:res.latitude,
longitude:res.longitude
@ -503,9 +520,9 @@ export default {
//拿到最近服务区的数据
this.nearestService()
}
// 获取标签数据
this.getLabelDetail()
//问号显示的内容 月份的数据请求 和 年份的数据请求
this.handleNoticeMonth()
this.handleNoticeYear()
//设置日期选择器的开始时间和结束时间
let y = date.getFullYear()
let m = date.getMonth() + 1
@ -520,7 +537,7 @@ export default {
}else{
this.startDate = `${y}-${m}-${d - 8}`
}
this.endData = this.lastDay
this.endData = new Date()
},
onShow(){
// 隐藏掉小程序本身自带的 tabbar 让自定义的tabbar出现
@ -530,24 +547,49 @@ export default {
// 离开页面投诉建议的悬浮框隐藏掉
this.isShow = false
this.selectTab = 1
if (!this.seat){
this.nearestService()
}
},
methods:{
...mapActions(['memberLogin','getLoginCode']),
async getLabelDetail(){
let req = {
SearchParameter:{
STATISTICS_DATE:this.lastDay,
ANALYSISINS_TYPE:'',
ANALYSISINS_FORMAT:'1000'
},
PageIndex:1,
PageSize:10
}
const data = await request.$webPost('CommercialApi/Analysis/GetANALYSISINSList',req)
console.log('getLabelDetail',data)
//
async handleNoticeMonth(){
let date = new Date(this.lastDay)
let y = date.getFullYear()
let m = date.getMonth() + 1
if(m<10){
m = '0'+m
}
//本月的
let req = {
SearchParameter:{
STATISTICS_DATE:`${y}-${m}`,
ANALYSISINS_TYPE:'1011',
ANALYSISINS_FORMAT:'3000'
},
PageIndex:1,
PageSize:10
}
const data = await request.$webPost('CommercialApi/Analysis/GetANALYSISINSList',req)
this.monthNoticeText = data.Result_Data.List[0].ANALYSIS_CONTENT
},
async handleNoticeYear(){
let date = new Date(this.lastDay)
let y = date.getFullYear()
let m = date.getMonth() + 1
if(m<10){
m = '0'+m
}
//本年
let reqYear = {
SearchParameter:{
STATISTICS_DATE:`${y}`,
ANALYSISINS_TYPE:'1012',
ANALYSISINS_FORMAT:'3000'
},
PageIndex:1,
PageSize:10
}
const totalData = await request.$webPost('CommercialApi/Analysis/GetANALYSISINSList',reqYear)
this.yearNoticeText = totalData.Result_Data.List[0].ANALYSIS_CONTENT
},
async nearestService(){
let seat = uni.getStorageSync('seatInfo');
@ -556,17 +598,17 @@ export default {
Province_Code:'340000',
latitude:seat.latitude,
}
console.log('req',req)
const data = await request.$webGet('CommercialApi/BaseInfo/GetServerpartList',req)
console.log('nearestService',data)
console.log('data',data)
let res = {
SERVERPART_NAME:data.Result_Data.List[0].SERVERPART_NAME,//服务区
SPREGIONTYPE_NAME:data.Result_Data.List[0].SPREGIONTYPE_NAME,//片区
Serverpart_ID:data.Result_Data.List[0].SERVERPART_ID,
SPRegionType_ID:data.Result_Data.List[0].SPREGIONTYPE_ID,//片区id
Serverpart_ID:data.Result_Data.List[0].SERVERPART_ID,//服务区id
longitude:data.Result_Data.List[0].SERVERPART_X,
latitude:data.Result_Data.List[0].SERVERPART_Y,
}
uni.setStorageSync('currentService',res)
uni.setStorageSync('nearService',res)
this.nearServiceInfo = res
},
handleShowNotice(){
@ -1182,7 +1224,11 @@ $iphoneHeight: env(safe-area-inset-bottom);
display: flex;
align-items: center;
.priceBox{
overflow: hidden;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
margin: 4px 0;
.allPrice {
font-size: 56rpx;
font-family: DINAlternate-Bold, DINAlternate;
@ -1203,28 +1249,41 @@ $iphoneHeight: env(safe-area-inset-bottom);
}
.addBox {
width: 100%;
margin-top: 5px;
display: flex;
justify-content: space-between;
align-items: center;
.arrowTop {
width: 14px;
height: 14px;
margin-right: 4px;
}
.text {
font-size: 28rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #782717;
line-height: 40rpx;
margin-right: 4px;
}
.compare {
font-size: 28rpx;
.smallTitle{
font-size: 14px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #c97e64;
line-height: 40rpx;
line-height: 20px;
}
.right{
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: #c97e64;
line-height: 20px;
}
}
}
.type {

81
pages/map/detail.vue
View File

@ -13,12 +13,13 @@
</div>
</div>
<div class="topImg">
<image class="topDefaultBg" src="https://eshangtech.com/ShopICO/ahyd-BID/service/default.png"></image>
<image v-if="topBg.length>0" @click="handlePreview('have')" class="topDefaultBg" :src="topBg[selectTopBg]"></image>
<image v-else @click="handlePreview('default')" class="topDefaultBg" src="https://eshangtech.com/ShopICO/ahyd-BID/service/default.png"></image>
</div>
<div class="menu">
<div class="top">
<div class="left">
<p class="title">{{info.SERVERPART_NAME}}</p>
<p class="title">{{info.SERVERPART_NAME?info.SERVERPART_NAME:'-'}}</p>
<text class="status">营业中</text>
</div>
<div class="iconBox" @click="handleGoMap">
@ -27,7 +28,7 @@
</div>
<div class="scroll">
<div class="info">
<p class="address">{{info.ServerpartInfo.EXPRESSWAY_NAME}}</p>
<p class="address">{{info.ServerpartInfo.EXPRESSWAY_NAME?info.ServerpartInfo.EXPRESSWAY_NAME:''}}</p>
<div class="typeList">
<div class="typeItem" v-for="(item,index) in typeList" :key="index" v-if="item.isShow">
<image class="img" :src="item.url"></image>
@ -83,7 +84,7 @@
<div class="service">
<div class="serviceItem" v-for="(item,index) in info.RegionInfo" :key="index" :style="{marginTop:index!==0?'32px':''}">
<p class="title">{{item.SERVERPART_REGIONNAME}}</p>
<p class="title">{{item.SERVERPART_REGIONNAME?item.SERVERPART_REGIONNAME:'-'}}</p>
<div class="box">
<div class="left">
<image class="boxImg" src="https://eshangtech.com/ShopICO/ahyd-BID/service/serviceHotal.svg"></image>
@ -91,14 +92,14 @@
</div>
<div class="right">
<div class="item">
<p :class="item.HASPANTRY?'text':'unText'">{{item.HASPANTRY?'男厕(' + item.HASPANTRY+')':'男厕' }}</p>
<p :class="item.HASPANTRY?'text':'unText'">男厕<text style="margin-left: 4px">{{item.HASPANTRY?'(' + item.HASPANTRY+')':'' }}</text></p>
<p :class="item.HASTHIRDTOILETS?'text':'unText'">第三卫生间</p>
<p :class="item.HASCHILD?'text':'unText'">车辆维修</p>
<p :class="item.HASWATERROOM?'text':'unText'">{{item.HASWATERROOM?'开水器(' + item.HASWATERROOM + ')':'开水器' }}</p>
<p :class="item.HASWATERROOM?'text':'unText'">开水器<text style="margin-left: 4px">{{item.HASWATERROOM?'(' + item.HASWATERROOM + ')':'' }}</text></p>
</div>
<div class="item">
<p :class="item.HASWIFI?'text':'unText'">{{item.HASWIFI?'女厕(' + item.HASWIFI + ')':'女厕' }}</p>
<p :class="item.TOILETCOUNT?'text':'unText'">{{item.TOILETCOUNT?'潮汐厕位(' + item.TOILETCOUNT + ')':'潮汐厕位' }}</p>
<p :class="item.HASWIFI?'text':'unText'">女厕<text style="margin-left: 4px">{{item.HASWIFI?'(' + item.HASWIFI + ')':'' }}</text></p>
<p :class="item.TOILETCOUNT?'text':'unText'">潮汐厕位<text style="margin-left: 4px">{{item.TOILETCOUNT?'(' + item.TOILETCOUNT + ')':'' }}</text></p>
<p :class="item.HASSHOWERROOM?'text':'unText'">车辆加水</p>
</div>
</div>
@ -111,13 +112,13 @@
</div>
<div class="right">
<div class="item">
<p :class="item.SMALLPARKING?'text':'unText'">{{item.SMALLPARKING?'轿车车位(' + item.SMALLPARKING + ')':'轿车车位' }}</p>
<p :class="item.TRUCKPACKING?'text':'unText'">{{item.TRUCKPACKING?'货车车位(' + item.TRUCKPACKING + ')':'货车车位' }}</p>
<p :class="item.SMALLPARKING?'text':'unText'">轿车车位<text style="margin-left: 4px">{{item.SMALLPARKING?'(' + item.SMALLPARKING + ')':'' }}</text></p>
<p :class="item.TRUCKPACKING?'text':'unText'">货车车位<text style="margin-left: 4px">{{item.TRUCKPACKING?'(' + item.TRUCKPACKING + ')':'' }}</text></p>
</div>
<div class="item">
<p :class="item.PACKING?'text':'unText'">{{item.PACKING?'客车车位(' + item.PACKING + ')':'客车车位' }}</p>
<p :class="item.DANPACKING?'text':'unText'">{{item.DANPACKING?'危化品车位(' + item.DANPACKING +')':'危化品车位' }}</p>
<p :class="item.PACKING?'text':'unText'">客车车位<text style="margin-left: 4px">{{item.PACKING?'(' + item.PACKING + ')':'' }}</text></p>
<p :class="item.DANPACKING?'text':'unText'">危化品车位<text style="margin-left: 4px">{{item.DANPACKING?'(' + item.DANPACKING +')':'' }}</text></p>
</div>
</div>
</div>
@ -135,7 +136,7 @@
</div>
<div class="item">
<p :class="item.HASBACKGROUNDRADIO?'text':'unText'" >便利店</p>
<p :class="item.DININGBXCOUNT?'text':'unText'">{{item.DININGBXCOUNT?'商铺('+item.DININGBXCOUNT+')':'商铺' }}</p>
<p :class="item.DININGBXCOUNT?'text':'unText'">商铺<text style="margin-left: 4px">{{item.DININGBXCOUNT?'('+item.DININGBXCOUNT+')':'' }}</text></p>
</div>
</div>
</div>
@ -164,7 +165,10 @@ export default {
{url:'https://eshangtech.com/ShopICO/ahyd-BID/service/car.svg',name:'司机之家',isShow:false},
{url:'https://eshangtech.com/ShopICO/ahyd-BID/service/Charging.svg',name:'充电桩',isShow:false},
{url:'https://eshangtech.com/ShopICO/ahyd-BID/service/hotel.svg',name:'客房',isShow:false}],
typeShowList:[]
typeShowList:[],
defaultBg:['https://eshangtech.com/ShopICO/ahyd-BID/service/default.png'],
topBg:[],
selectTopBg:0,
}
},
onLoad(option){
@ -183,10 +187,22 @@ export default {
this.handleSearch(seat)
let pageList = getCurrentPages()
console.log('pageList',pageList)
//清理页面栈的方法
this.clearPage()
},
methods:{
// 点击预览图片
handlePreview(type){
if (type === 'default'){
uni.previewImage({
current: this.defaultBg[0], // 图片的地址url
urls: this.defaultBg // 预览的地址url
})
}else{
uni.previewImage({
current: this.defaultBg[0], // 图片的地址url
urls: this.topBg // 预览的地址url
})
}
},
async handleSearch(seat){
console.log('seat',seat)
let reqs = {
@ -206,6 +222,7 @@ export default {
this.typeList[0].isShow = this.info.HASCHARGE
}
this.typeList[1].isShow = this.info.STARTDATE
this.topBg = this.info.ImageLits
},
//选择服务区
handleChangeService(){
@ -273,12 +290,6 @@ export default {
wx.navigateTo({
url: `plugin://routePlan/index?key=${key}&referer=${referer}&endPoint=${JSON.stringify(endPoint)}&startPoint=${JSON.stringify(startPoint)}`
});
},
//清理页面栈的方法
clearPage(){
console.log(11111)
let pageList = getCurrentPages()
}
}
}
@ -286,13 +297,13 @@ export default {
<style scoped lang="scss">
.main{
max-width: 100vw;
width: 100%;
max-width: 100vw;
height: 100vh;
box-sizing: border-box;
position: relative;
.leftArrow{
width: 100%;
height: 24px;
position: absolute;
left: 16px;
@ -352,19 +363,17 @@ export default {
}
.menu{
width:100%;
box-sizing: border-box;
height: calc(100vh - 196px);
position: relative;
border-radius: 16px 16px 1px 1px;
transform: translateY(-16px);
.top{
height: 40px;
width: calc(100% - 32px);
position: fixed;
top: 0;
width:100% ;
margin: 0 auto;
box-sizing: border-box;
padding-top: 16px;
left: 16px;
padding: 16px 16px 0;
background: #fff;
border-radius: 16px 16px 1px 1px;
display: flex;
justify-content: space-between;
.left{
@ -401,15 +410,15 @@ export default {
}
}
.scroll{
width:100%;
height: calc(100%);
width:100vw;
height: calc(100% - 28px);
overflow-y: scroll;
border-radius: 16px 16px 1px 1px;
box-sizing: border-box;
.info{
width: 100%;
width: 100vw;
box-sizing: border-box;
background: #FFFFFF;
padding: 16px 16px 16px;
padding: 4px 16px 16px;
z-index:100;
.address{
font-size: 14px;
@ -508,6 +517,8 @@ export default {
}
}
.service{
width: 100vw;
box-sizing: border-box;
background: #fff;
padding: 12px 16px calc(16px + env(safe-area-inset-bottom));
.serviceItem{

52
pages/map/index.vue
View File

@ -74,7 +74,7 @@ export default {
mapCtx: {},
menu:{},//手机参数
statusBarHeight:'',// 每个手机的状态栏高度
selectIndex:0,//服务区选择器选择的值
selectIndex:null,//服务区选择器选择的值
array:[],//服务区选择器选择的列表
serviceList:[],
searchText:'',
@ -83,8 +83,7 @@ export default {
page:'',//从哪个图表也跳过来
markers:'',//地图属性
covers:'',//地图属性
isFirst:true,//是否是第一次进页面
area:[],//片区列表
area:'',//当前选中片区名称
serviceInfo:{}
}
},
@ -127,6 +126,15 @@ export default {
onUnload(){
this.isShowMap = false
},
watch:{
latitude:{
handler(value){
if (value){
this.getListData()
}
}
}
},
methods:{
//跳转到腾讯地图
handleGomap(item){
@ -185,6 +193,7 @@ export default {
//选择服务区
handleChangeService(e){
this.selectIndex = Number(e.detail.value)
console.log('this.selectIndex',this.selectIndex)
this.getListData()
},
//搜索框触发的方法
@ -206,6 +215,7 @@ export default {
SERVERPART_NAME:item.SERVERPART_NAME,//服务区
SPREGIONTYPE_NAME:item.SPREGIONTYPE_NAME,//片区
Serverpart_ID:item.SERVERPART_ID,
SPRegionType_ID:item.SPREGIONTYPE_ID,
longitude:item.SERVERPART_X,
latitude:item.SERVERPART_Y,
}
@ -227,21 +237,37 @@ export default {
},
async getListData(){
let id
if (this.isFirst){
this.isFirst=false
id = ''
}else{
if (this.array[this.selectIndex] && this.array[this.selectIndex].value){
id = this.array[this.selectIndex].value
let user = uni.getStorageSync('seatInfo')
if (!this.selectIndex){
console.log('user',user.latitude)
let current = uni.getStorageSync('currentService')
let nearService = uni.getStorageSync('nearService')
if (!current){
id = nearService.SPRegionType_ID
}else{
id = current.SPRegionType_ID
}
this.array.forEach((item,index)=>{
if (Number(item.value) === Number(id)){
this.selectIndex = index
}
})
}else{
id = this.array[this.selectIndex].value
}
// if (seat){
// }else{
// if (this.array[this.selectIndex] && this.array[this.selectIndex].value){
// id = this.array[this.selectIndex].value
// }
// }
let req = {
Province_Code: '340000',
SPRegionType_ID: id,
longitude:this.longitude,
latitude:this.latitude
longitude:user.longitude,
latitude:user.latitude
}
console.log('re111q',req)
const data = await request.$webGet('CommercialApi/BaseInfo/GetServerpartList',req)
this.serviceList = data.Result_Data.List
},
@ -257,14 +283,12 @@ export default {
let seat = uni.getStorageSync('seatInfo')
if (!seat){
console.log(11111)
let _this = this
uni.getFuzzyLocation({
type:'gcj02',
altitude:true,
success:function (res){
this.latitude = res.latitude
this.longitude = res.longitude
_this.getListData()
}
})
}else {