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-12-28 20:03:28 +08:00
parent 918e83d73f
commit 1254d54064
56 changed files with 12937 additions and 1668 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
common/utils.js
View File

@ -301,6 +301,7 @@ function getThisMonthHave(value){
return `${y}-${m}`
}
// 输入时间拿到月份 输出月份的字符串
function getThisTimeMonth(value){
const date = new Date(value)

35
pages.json
View File

@ -156,16 +156,30 @@
}
]
},
{ // 商业BI
"root": "pages/commercialBI",
{
"root": "pages/commercialBINew",
"pages": [
{
"path": "flowAnalysis",
"style": {
"navigationBarTitleText": "",
"navigationStyle": "custom",
"disableScroll": true
}
},
{
"path": "carPortrait",
"style": {
"navigationBarTitleText": "",
"navigationStyle": "custom"
}
},
}
]
},
{ // 商业BI
"root": "pages/commercialBI",
"pages": [
{
"path": "guestPortrait",
"style": {
@ -277,20 +291,7 @@
}
]
},
{
// 商业BI新版
"root": "pages/commercialBINew",
"pages": [
{
"path": "flowAnalysis",
"style": {
"navigationBarTitleText": "",
"navigationStyle": "custom",
"disableScroll": true
}
}
]
},
{
"root": "pages/plan",
"pages": [

3
pages/commercialBI/businessPortrait.vue
View File

@ -6,8 +6,7 @@
<header-top ref="headerTop" :bgUrl="bgUrl" :menu="menu" :bgColor="bgColor" :title="title" :analyseInfo="analyseInfo" :topBg="topBg" :page="page" :backType="backType"
:serverpartName="serviceInfo.SERVERPART_NAME" :spregionTypeName="serviceInfo.SPREGIONTYPE_NAME" :serviceInfo="serviceInfo"
:topLeftBg="topLeftBg" :topLeftColor="topLeftColor" :iconObj="iconObj" :haveIconObj="haveIconObj" :detailBoxBg="detailBoxBg"
:haveFun="haveFun" :serviceTypeObj="serviceTypeObj" :serviceInfoObj="serviceInfoObj" :pageType="pageType"/>
<SliderPage :index="4"/>
:haveFun="haveFun" :serviceTypeObj="serviceTypeObj" :serviceInfoObj="serviceInfoObj" :pageType="pageType" :pageIndex="4"/>
<div class="charts">
<div class="chartsItem">
<div style="display: flex;justify-content: space-between;align-items: center">

2
pages/commercialBI/commercialType.vue
View File

@ -34,7 +34,7 @@ export default {
data(){
return {
typeList:[
{img:'https://eshangtech.com/ShopICO/ahyd-BID/index/car.svg',url:'/pages/commercialBI/carPortrait',text:'车流'},
{img:'https://eshangtech.com/ShopICO/ahyd-BID/index/car.svg',url:'/pages/commercialBINew/carPortrait',text:'车流'},
{img:'https://eshangtech.com/ShopICO/ahyd-BID/index/guest.svg',url:'/pages/commercialBI/guestPortrait',text:'客群'},
{img:'https://eshangtech.com/ShopICO/ahyd-BID/index/business_icon.svg',url:'/pages/commercialBI/managePortrait',text:'经营'},
{img:'https://eshangtech.com/ShopICO/ahyd-BID/index/trade.svg',url:'/pages/commercialBI/businessPortrait',text:'交易'},

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

@ -26,6 +26,9 @@
<div class="seize"></div>
</div>
</div>
<view class="sliderBox" :style="{top:(menu.bottom + 14) + 'px'}">
<SliderPage :index="pageIndex" :serverpartName="serverpartName"/>
</view>
<div class="serviceArea" :style="{top : (menu.bottom + 14) + 'px'}" >
<!-- <div class="picker" @click="handleGoSelectService">-->
<!-- <div class="selectService">-->
@ -42,7 +45,7 @@
<!-- </div>-->
<!-- </div>-->
<div class="detailBox" :style="{background: detailBoxBg}">
<div class="detailBox" v-if="serverpartName!=='安徽驿达'" :style="{background: detailBoxBg}">
<div class="detailTop">
<div class="topLeft" :style="{background:topLeftBg,color:topLeftColor}">{{serviceTypeObj[serviceInfoObj.SERVERPART_TYPE]}}</div>
<div class="topRight" @click="handleGoServiceMessage">
@ -93,8 +96,10 @@
<script>
import request from '@/util/index.js'
import SliderPage from "./sliderPage.vue";
export default {
name: "headerTop",
components: {SliderPage},
props:{
menu:{
type: Object,
@ -188,6 +193,10 @@ export default {
pageType:{
type:Number,
default:0
},
pageIndex:{
type:Number,
default:0
}
},
data() {
@ -198,7 +207,7 @@ export default {
carSwiperList:['previous','','next'],
goObj:{
1000:{
previous:'/pages/commercialBI/carPortrait',
previous:'/pages/commercialBINew/carPortrait',
next:'/pages/commercialBI/managePortrait'
},
2000:{
@ -419,6 +428,14 @@ export default {
}
}
}
.sliderBox{
width: 100%;
position: absolute;
left: 0;
box-sizing: border-box;
padding: 0 16rpx;
z-index:9;
}
.serviceArea{
width: calc(100% - 32px);
position: absolute;

6
pages/commercialBI/components/manager/revenueAnalysis.vue
View File

@ -12,9 +12,9 @@
<text class="labelText">实收总额<text class="labelUnit">/元</text></text>
</div>
</div>
<div class="revenueTopRight">
<!-- <span class="addText">+8.24%</span>-->
<!-- <span class="addType">比计划</span>-->
<div class="revenueTopRight" v-if="dataInfo.comparePlan">
<span class="addText">{{dataInfo.comparePlan>0?'+'+dataInfo.comparePlan+'%':dataInfo.comparePlan<0?'-'+dataInfo.comparePlan+'%':'-'}}</span>
<span class="addType">比计划</span>
</div>
</div>
<div class="revenueDetailList">

230
pages/commercialBI/components/sliderPage.vue
View File

@ -1,54 +1,99 @@
<template>
<!-- <view class="sliderPage">-->
<!-- <view class="slider">-->
<!-- <view class="rate" :style="{left: (index*15) + 'rpx'}"></view>-->
<!-- </view>-->
<!-- </view>-->
<!-- <view class="sliderPage">-->
<!-- <view class="slider">-->
<!-- <view class="rate" :style="{left: (index*15) + 'rpx'}"></view>-->
<!-- </view>-->
<!-- </view>-->
<view class="scrollPage">
<scroll-view class="scrollBox" scroll-x="true">
<view :id="'item'+i" :class="index===i?`scrollItem selectScroll${index}`:'scrollItem'" v-for="(item,i) in pageList" :key="i">{{item}}</view>
<scroll-view class="scrollBox" scroll-x="true" :scroll-into-view="'item'+selectIndex" scroll-with-animation>
<view :id="'item'+i" :class="selectIndex===i?`scrollItem selectScroll${selectIndex}`:'scrollItem'" v-for="(item,i) in pageList" :key="i" @click="handleToDetail(i)">{{item}}</view>
</scroll-view>
</view>
</template>
<script>
export default {
name: "sliderPage",
data(){
data() {
return {
pageList:["基础信息","车流画像","经营画像","客群画像","交易画像","业态品牌","考核考评","日常巡检"]
pageList: ["基础信息", "车流画像", "客群画像", "经营画像", "交易画像", "业态品牌", "考核考评", "日常巡检"],
urlList: [
'/pages/map/detail',
'/pages/commercialBINew/carPortrait',
'/pages/commercialBI/guestPortrait',
'/pages/commercialBI/managePortrait',
'/pages/commercialBI/businessPortrait',
'/pages/commercialBI/formatPortraitBI',
`/pages/examine/detail?type=${1}`,
`/pages/examine/detail?type=${2}`,
],// 跳转地址
urlListYD: [
'/pages/map/detail',
'/pages/commercialBINew/carPortrait',
'/pages/commercialBI/guestPortrait',
'/pages/commercialBI/managePortrait',
'/pages/commercialBI/businessPortrait',
'/pages/commercialBI/formatPortraitBI',
`/pages/newamine/index?type=${1}&comePage=slider`,
`/pages/newamine/index?type=${2}&comePage=slider`,
],// 跳转地址YD
selectIndex: 0
}
},
props:{
index:{
props: {
index: {
type: Number,
default: 0
}
},
onLoad(){
watch: {
index: {
handler(value) {
this.selectIndex = value
},
immediate: true
},
},
onLoad() {
},
methods:{
methods: {
handleToDetail(i) {
console.log('i', i)
this.selectIndex = i
let storeServiceInfo = uni.getStorageSync('currentService')
if (storeServiceInfo.SERVERPART_NAME==='安徽驿达'){
uni.navigateTo({
url: this.urlListYD[i]
})
}else{
uni.redirectTo({
url: this.urlList[i]
})
}
}
}
}
</script>
<style scoped lang="scss">
.sliderPage{
.sliderPage {
width: 100%;
height: 16rpx;
display: flex;
justify-content: center;
padding-top: 8rpx;
background: #fff;
.slider{
.slider {
width: 120rpx;
height: 8rpx;
background: #e0dfdf;
border-radius: 4rpx;
position: relative;
.rate{
.rate {
position: absolute;
top: 0;
height: 100%;
@ -58,40 +103,165 @@ export default {
}
}
}
.scrollPage{
.scrollPage {
width: 100%;
height: 30px;
height: 56rpx;
box-sizing: border-box;
padding: 0 16rpx;
.scrollBox{
.scrollBox {
width: 100%;
height: 100%;
white-space: nowrap;
.scrollItem{
.scrollItem {
display: inline-block;
height: 100%;
box-sizing: border-box;
padding: 8rpx 16rpx;
font-size: 32rpx;
font-family: PingFangSC-Semibold, PingFang SC;
font-size: 28rpx;
font-family: PingFangSC, PingFang SC;
font-weight: 600;
color: #786B6C;
color: #6F747A;
line-height: 40rpx;
}
.selectScroll1{
.selectScroll0 {
color: #F26036;
position: relative;
}
.selectScroll0:after {
content: '';
position: absolute;
display: inline-block;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 48rpx;
height: 6rpx;
background: #F26036;
}
.selectScroll1 {
color: #1E67FF;
position: relative;
}
.selectScroll1:after{
content:'';
.selectScroll1:after {
content: '';
position: absolute;
display: inline-block;
bottom: 0rpx;
left: 10rpx;
width: 80%;
height: 8rpx;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 48rpx;
height: 6rpx;
background: #1E67FF;
}
.selectScroll2 {
color: #008649;
position: relative;
}
.selectScroll2:after {
content: '';
position: absolute;
display: inline-block;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 48rpx;
height: 6rpx;
background: #008649;
}
.selectScroll3 {
color: #6146F8;
position: relative;
}
.selectScroll3:after {
content: '';
position: absolute;
display: inline-block;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 48rpx;
height: 6rpx;
background: #6146F8;
}
.selectScroll4 {
color: #E57B00;
position: relative;
}
.selectScroll4:after {
content: '';
position: absolute;
display: inline-block;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 48rpx;
height: 6rpx;
background: #E57B00;
}
.selectScroll5 {
color: #4C43FF;
position: relative;
}
.selectScroll5:after {
content: '';
position: absolute;
display: inline-block;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 48rpx;
height: 6rpx;
background: #4C43FF;
}
.selectScroll6 {
color: #975EF5;
position: relative;
}
.selectScroll6:after {
content: '';
position: absolute;
display: inline-block;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 48rpx;
height: 6rpx;
background: #975EF5;
}
.selectScroll7 {
color: #975EF5;
position: relative;
}
.selectScroll7:after {
content: '';
position: absolute;
display: inline-block;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 48rpx;
height: 6rpx;
background: #975EF5;
}
}
}
</style>

3
pages/commercialBI/formatPortraitBI.vue
View File

@ -6,8 +6,7 @@
<header-top ref="headerTop" :bgUrl="bgUrl" :menu="menu" :bgColor="bgColor" :title="title" :analyseInfo="analyseInfo" :topBg="topBg" :page="page" :backType="backType"
:serverpartName="serviceInfo.SERVERPART_NAME" :spregionTypeName="serviceInfo.SPREGIONTYPE_NAME" :serviceInfo="serviceInfo"
:topLeftBg="topLeftBg" :topLeftColor="topLeftColor" :iconObj="iconObj" :haveIconObj="haveIconObj" :detailBoxBg="detailBoxBg"
:haveFun="haveFun" :serviceTypeObj="serviceTypeObj" :serviceInfoObj="serviceInfoObj" :pageType="pageType"/>
<SliderPage :index="5"/>
:haveFun="haveFun" :serviceTypeObj="serviceTypeObj" :serviceInfoObj="serviceInfoObj" :pageType="pageType" :pageIndex="5"/>
<div class="charts">
<div class="chartsItem" >
<p class="title">品牌指数</p>

4
pages/commercialBI/guestPortrait.vue
View File

@ -6,8 +6,8 @@
<header-top ref="headerTop" :bgUrl="bgUrl" :menu="menu" :topBg="topBg" :bgColor="bgColor" :title="title" :page="page" :backType="backType" :analyseInfo="analyseInfo"
:serverpartName="serviceInfo.SERVERPART_NAME" :spregionTypeName="serviceInfo.SPREGIONTYPE_NAME" :serviceInfo="serviceInfo"
:topLeftBg="topLeftBg" :topLeftColor="topLeftColor" :iconObj="iconObj" :haveIconObj="haveIconObj" :detailBoxBg="detailBoxBg"
:haveFun="haveFun" :serviceTypeObj="serviceTypeObj" :serviceInfoObj="serviceInfoObj" :pageType="pageType"/>
<SliderPage :index="2"/>
:haveFun="haveFun" :serviceTypeObj="serviceTypeObj" :serviceInfoObj="serviceInfoObj" :pageType="pageType" :pageIndex="2"/>
<div class="charts">
<div class="chartsItem">
<div style="display: flex;align-items: center;justify-content: space-between">

7
pages/commercialBI/managePortrait.vue
View File

@ -6,8 +6,7 @@
<header-top ref="headerTop" :bgUrl="bgUrl" :menu="menu" :bgColor="bgColor" :title="title" :analyseInfo="analyseInfo" :topBg="topBg" :page="page" :backType="backType"
:serverpartName="serviceInfo.SERVERPART_NAME" :spregionTypeName="serviceInfo.SPREGIONTYPE_NAME" :serviceInfo="serviceInfo"
:topLeftBg="topLeftBg" :topLeftColor="topLeftColor" :iconObj="iconObj" :haveIconObj="haveIconObj" :detailBoxBg="detailBoxBg"
:haveFun="haveFun" :serviceTypeObj="serviceTypeObj" :serviceInfoObj="serviceInfoObj" :pageType="pageType"/>
<SliderPage :index="3"/>
:haveFun="haveFun" :serviceTypeObj="serviceTypeObj" :serviceInfoObj="serviceInfoObj" :pageType="pageType" :pageIndex="3"/>
<div class="charts">
<div class="chartsItem">
<p class="title">营收分析<span class="dateText">{{lastDay}}</span></p>
@ -497,6 +496,10 @@ export default {
const data = await request.$webGet('CommercialApi/Revenue/GetSummaryRevenue',req)
console.log('data22222',data)
this.monthDetail = data.Result_Data.RevenuePushModel
if (this.serviceInfo.SERVERPART_NAME!=='安徽驿达' && this.monthDetail.BudgetRevenue){
this.monthDetail.comparePlan = Number(this.$util.getMoney(((this.monthDetail.CashPay/this.monthDetail.BudgetRevenue)-1)*100))
console.log('monthDetail',this.monthDetail)
}
},
async getRevenueList(){

80
pages/commercialBI/serviceMessage.vue
View File

@ -29,15 +29,15 @@
</div>
<div class="otherCharts">
<div class="list">
<span class="itemTitle">车流数据</span>
<div class="listItem" v-for="(item,index) in regionList" :key="index" @click="handleNoneChild(item)">
<span class="itemTitle">车流数据</span>
<scroll-view class="list" :scroll-y="true">
<div class="listItem" v-for="(item,index) in regionList" :key="index" @click="handleNoneChild(item,index)">
<div class="listBox" :style="{borderBottom:item.showChild?'1px solid #D9DBE0':'0px solid #D9DBE0'}">
<div class="itemTop">
<div class="itemLeft">
<div style="display: flex;align-items: center">
<img class="itemFixed" src="https://eshangtech.com/ShopICO/ahyd-BID/newCommercial/fixedIcon.svg"/>
<span class="serverName">{{serviceInfo.SERVERPART_NAME?serviceInfo.SERVERPART_NAME.split('服务区')[0]:''}}</span>
<span class="serverName">{{item.Serverpart_Name || ''}}</span>
</div>
</div>
<div class="itemRight">
@ -65,7 +65,7 @@
</view>
</div>
</div>
</div>
</scroll-view>
</div>
</view>
</template>
@ -98,6 +98,15 @@ export default {
}
this.searchText = this.time
console.log('this.serviceInfo',this.serviceInfo)
},
onShow(){
let storeServiceInfo = uni.getStorageSync('currentService')
let nearServiceInfo = uni.getStorageSync('nearService')
if (!storeServiceInfo){
this.serviceInfo = nearServiceInfo
}else{
this.serviceInfo = storeServiceInfo
}
this.getCarData()
},
methods:{
@ -111,17 +120,33 @@ export default {
},
handleGoSelectService() {
uni.navigateTo({
url:`/pages/map/index?chartType=${true}&page=/pages/commercialBI/carPortrait&serviceInfo=${JSON.stringify(this.serviceInfo)}`
url:`/pages/map/index?chartType=${true}&page=/pages/commercialBINew/carPortrait&serviceInfo=${JSON.stringify(this.serviceInfo)}`
})
},
getCarData(){
request.$webGet('CommercialApi/BigData/GetMonthAnalysis',{
// StatisticsDate: this.time,
StartDate:this.time,
EndDate:this.time,
// Serverpart_ID :this.serviceInfo.Serverpart_ID!==0?this.serviceInfo.Serverpart_ID:null,
// Serverpart_ID :419,
}).then(res=>{
this.regionList=[]
uni.showLoading({
title:'加载中'
})
const date = new Date(this.time)
const y = date.getFullYear()
let m = date.getMonth() + 1
if (m<10){
m = '0' + m
}
let req
if (this.serviceInfo.SERVERPART_NAME==='安徽驿达'){
req = {
StatisticsMonth:`${y}${m}`,
}
}else{
req = {
StatisticsMonth:`${y}${m}`,
Serverpart_ID :this.serviceInfo.Serverpart_ID || "",
}
}
request.$webGet('CommercialApi/BigData/GetProvinceMonthAnalysis',req).then(res=>{
console.log('res',res)
this.carData = res.Result_Data.List
this.carData.forEach(item=>{
item.Serverpart_ID = this.serviceInfo.Serverpart_ID
@ -129,6 +154,7 @@ export default {
})
this.regionList = this.carData
console.log('this.carData',this.carData)
uni.hideLoading()
// let sumObj = {
// Serverpart_Name:'',
// Serverpart_Region:'',
@ -150,9 +176,9 @@ export default {
// this.regionList = [sumObj]
})
},
handleNoneChild(obj){
this.regionList.forEach(item=>{
if (item.name === obj.name){
handleNoneChild(obj,selectIndex){
this.regionList.forEach((item,index)=>{
if (item.name === obj.name && index===selectIndex){
item.showChild = !item.showChild
}
})
@ -350,18 +376,20 @@ export default {
}
}
}
.itemTitle{
display: block;
font-size: 16px;
font-family: PingFangSC-Semibold, PingFang SC;
font-weight: 600;
color: #160002;
margin-top: 12px;
}
.list{
width: 100%;
height: calc(100ch - 400px);
margin-top: 24px;
box-sizing: border-box;
padding-bottom: 12px;
.itemTitle{
display: block;
font-size: 16px;
font-family: PingFangSC-Semibold, PingFang SC;
font-weight: 600;
color: #160002;
margin-bottom: 12px;
}
.listItem{
margin-bottom: 12px;
border: 1px solid #D9DBE0;
@ -396,7 +424,7 @@ export default {
margin-right: 4px;
}
.serverName{
font-size: 20px;
font-size: 16px;
font-family: DINAlternate-Bold, DINAlternate;
font-weight: bold;
white-space: nowrap;
@ -411,7 +439,7 @@ export default {
display: flex;
flex-direction: column;
.entryValue{
font-size: 18px;
font-size: 16px;
font-family: DINAlternate-Bold, DINAlternate;
font-weight: bold;
color: red;

784
pages/commercialBI/carPortrait.vue → pages/commercialBINew/carPortrait.vue
View File

@ -19,6 +19,9 @@
<image class="img" src="https://eshangtech.com/ShopICO/ahyd-BID/commercial/navigation-left.svg"></image>
</div>
<!-- <text class="title">车流画像</text>-->
<view class="sliderBox" :style="{top:46+'px'}">
<SliderPage :index="1"/>
</view>
<div class="pickerTop" @click="handleGoSelectService">
<div class="selectService">
<image class="img" src="https://eshangtech.com/ShopICO/ahyd-BID/commercial/fixed.svg"></image>
@ -90,32 +93,37 @@
</div>
</div>
</div>
<div v-if="isShowAllProvince" class="headerTopBox" >
<div v-if="isShowAllProvince" class="headerTopBox" :style="{backgroundImage: 'url('+ 'https://eshangtech.com/ShopICO/ahyd-BID/newCommercialBI/car.svg' +')'}">
<div class="header" :style="{height:menu.height + 'px',top:menu.top+'px'}">
<image class="backArrow" src="https://eshangtech.com/ShopICO/ahyd-BID/examine/leftArrowWhite.svg" @click="handleBack"/>
<div class="timeSelect">
<img class="selectIcon" src="https://eshangtech.com/ShopICO/ahyd-BID/newCommercial/selectDateIcon.svg"/>
<picker mode="date" :value="searchText" :end="lastDay" @change="changeAllProvinceSearch" >
<view class="time">
<view class="text">{{ searchText }}</view>
<image class="icon" src="https://eshangtech.com/ShopICO/ahyd-BID/newCommercial/arrow_bottom.svg"></image>
<div class="picker" @click="handleGoSelectService">
<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" v-if="serviceInfo.Serverpart_ID">{{serviceInfo.SPREGIONTYPE_NAME}}</p>
<image class="rightArrow" src="https://eshangtech.com/ShopICO/ahyd-BID/commercial/rightArrow.svg"></image>
</view>
</view>
</picker>
</div>
</div>
</div>
<view class="sliderBox" :style="{top:(menu.bottom + 19)+'px'}">
<SliderPage :index="1"/>
</view>
<!-- <div class="timeSelect" :style="{top:(menu.bottom + 64)+'px'}">-->
<!-- <view style="display: flex;align-items: center">-->
<!-- <img class="selectIcon" src="https://eshangtech.com/ShopICO/ahyd-BID/newCommercial/selectDateIcon.svg"/>-->
<!-- <picker mode="date" :value="searchText" :end="lastDay" @change="changeAllProvinceSearch" >-->
<!-- <view class="time">-->
<!-- <view class="text">{{ searchText }}</view>-->
<!-- <image class="icon" src="https://eshangtech.com/ShopICO/ahyd-BID/newCommercial/arrow_bottom.svg"></image>-->
<!-- </view>-->
<!-- </picker>-->
<!-- </view>-->
<!-- </div>-->
<div class="picker" :style="{top:(menu.bottom + 24)+'px'}" @click="handleGoSelectService">
<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" v-if="serviceInfo.Serverpart_ID">{{serviceInfo.SPREGIONTYPE_NAME}}</p>
<image class="rightArrow" src="https://eshangtech.com/ShopICO/ahyd-BID/commercial/rightArrow.svg"></image>
</view>
</view>
</div>
</div>
</div>
</view>
<view style="width: 100%;height: 100%" v-else></view>
@ -149,7 +157,6 @@
<!-- </div>-->
<!-- </div>-->
<!-- </div>-->
<SliderPage :index="1"/>
<div class="charts" v-if="!isShowAllProvince">
<div class="chartsItem">
<div style="display: flex;align-items: center;justify-content: space-between">
@ -247,71 +254,59 @@
</div>
<div v-if="isShowAllProvince" class="otherCharts">
<div class="list">
<span class="itemTitle">车流数据</span>
<div class="listItem" v-for="(item,index) in regionList" :key="index" @click="handleNoneChild(item)">
<image class="bg" :src="item.bg"/>
<div class="listBox" :style="{borderBottom:item.showChild?'1px solid #D9DBE0':'0px solid #D9DBE0'}">
<div class="itemTop">
<div class="itemLeft">
<div style="display: flex;align-items: center">
<img class="itemFixed" src="https://eshangtech.com/ShopICO/ahyd-BID/newCommercial/fixedIcon.svg"/>
<span class="serverName">{{item.name.split('管理中心')[0]}}</span>
</div>
</div>
<img class="itemRight" :style="{transform:item.showChild?'':'rotate(-90deg)'}" src="https://eshangtech.com/ShopICO/ahyd-BID/newCommercial/arrow_bottom.svg"/>
</div>
<div class="itemDetail">
<div class="message" style="width: 30%">
<span class="value">{{item.entry}}</span>
<span class="label">入区流量</span>
</div>
<div class="message" style="width: 30%">
<span class="value">{{item.flow}}</span>
<span class="label">断面流量</span>
</div>
<div class="message" style="flex-direction: initial;width: 40%;justify-content: flex-start">
<!-- <div style="width: 40px;height: 40px;background: red"></div>-->
<!-- <EntryRate :data="item.entryList" style="width: 40px;height: 40px"/>-->
<canvas class="cirRate" :canvas-id=index />
<div style="display: flex;flex-direction: column;">
<span class="value" style="color: red">{{item.flowRate}}</span>
<span class="label">入区率</span>
</div>
</div>
</div>
</div>
<view class="listTop">
<span class="itemTitle">车流数据</span>
<div class="childList" v-if="item.showChild" @click.stop="">
<div class="childItem" v-for="(subItem,subIndex) in item.spList" :key="subIndex" :style="{borderBottom: subIndex===item.spList.length -1 ?'0px solid #EEEEEE':'1px solid #EEEEEE'}">
<div class="childTop">
<div class="topLeft">
<div class="imgBox">
<image class="topIcon" src="https://eshangtech.com/ShopICO/ahyd-BID/newCommercial/mapIcon.svg"/>
<div class="timeSelect" >
<view style="display: flex;align-items: center">
<img class="selectIcon" src="https://eshangtech.com/ShopICO/ahyd-BID/newCommercial/selectDateIcon.svg"/>
<picker mode="date" fields="month" :value="searchText" :end="lastDay" @change="changeAllProvinceSearch" >
<view class="time">
<view class="text">{{ searchTextMonth }}</view>
<image class="icon" src="https://eshangtech.com/ShopICO/ahyd-BID/newCommercial/arrow_bottom.svg"></image>
</view>
</picker>
</view>
</div>
</view>
<scroll-view class="listBigBox" :scroll-y="true">
<div class="listItem" v-for="(item,index) in regionList" :key="index" @click="handleNoneChild(item,index)">
<div class="listBox" :style="{borderBottom:item.showChild?'1px solid #D9DBE0':'0px solid #D9DBE0'}">
<div class="itemTop">
<div class="itemLeft">
<div style="display: flex;align-items: center">
<img class="itemFixed" src="https://eshangtech.com/ShopICO/ahyd-BID/newCommercial/fixedIcon.svg"/>
<span class="serverName">{{item.Serverpart_Name || ''}}</span>
</div>
<span class="serviceName">{{subItem.name}}</span>
</div>
<!-- <image class="topRight" src="https://eshangtech.com/ShopICO/ahyd-BID/commercial/rightArrow.svg"/>-->
</div>
<div class="childDetail" v-for="(thirdItem,thirdIndex) in subItem.regionList" :key="thirdIndex">
<div class="thirdItem">
<div class="serviceFixed">{{thirdItem.name}}区</div>
<div class="itemType">
<div class="typeValue">{{thirdItem.LargeVehicle_Count}}/{{thirdItem.MediumVehicle_Count}}/{{thirdItem.MinVehicle_Count}}</div>
<div class="typeLabel">大/中/小型车</div>
</div>
<div class="itemType">
<div class="typeValue">{{thirdItem.Vehicle_Count}}/{{thirdItem.SectionFlow_Count}}</div>
<div class="typeLabel">入区/断面</div>
</div>
<div class="itemType" :style="{width: 'calc((100% - 40px)*0.2)'}">
<div class="typeValue" :style="{color:thirdItem.entryRate>30 || thirdItem.entryRate<5?'red':''}">{{thirdItem.entryRate!==0 && thirdItem.Vehicle_Count< thirdItem.SectionFlow_Count ? `${thirdItem.entryRate}%`:'-'}}</div>
<div class="typeLabel">入区率</div>
<div class="itemRight">
<div class="entryRate">
<text class="entryValue">{{item.Entry_Rate ||''}}%</text>
<text class="entryLabel">入区率</text>
</div>
<img class="img" :style="{transform:item.showChild?'':'rotate(-90deg)'}" src="https://eshangtech.com/ShopICO/ahyd-BID/newCommercial/arrow_bottom.svg"/>
</div>
</div>
</div>
<div class="childList" v-if="item.showChild" >
<view class="childItem">
<text class="childValue">{{item.RevenueAmount?$util.fmoney($util.getMoney(item.RevenueAmount/10000)):''}}</text>
<text class="childLabel">营收 /万元</text>
</view>
<view class="childItem">
<text class="childValue">{{item.AvgVehicleAmount ||''}}</text>
<text class="childLabel">单车 /元</text>
</view>
<view class="childItem">
<text class="childValue">{{item.Vehicle_Count?$util.fmoney($util.getMoney(item.Vehicle_Count/10000)):''}}</text>
<text class="childLabel">入区 /万辆</text>
</view>
</div>
</div>
</div>
</scroll-view>
@ -447,6 +442,7 @@ export default {
headMsg:null,
searchEndTime:'',
searchText:'',// 展示全省情況时显示的日期内容
searchTextMonth:'',// 展示全省情況时显示的日期内容
haveFun:{},
serviceTypeObj:{},// 服务区类型对象
serviceInfoObj:{},
@ -494,6 +490,7 @@ export default {
}
this.single = this.$util.getThisMonthHave(this.time)
this.searchText = this.time
this.searchTextMonth = this.$util.getThisMonthHave(this.time)
const date = new Date(this.time)
//设置日期选择器的开始时间和结束时间
let searchYear = date.getFullYear()
@ -537,7 +534,7 @@ export default {
if (this.isShowAllProvince === true){
this.serviceInfo.SERVERPART_NAME = '安徽驿达'
this.serviceInfo.Serverpart_ID = undefined
this.getDetail(this.theRequest)
this.getDetail()
}else{
//获取服务区基本信息
this.getServiceInfo()
@ -572,6 +569,7 @@ export default {
this.selectProvinceName = ''
this.carType = ''
this.searchText=''
this.searchTextMonth = ''
},
methods:{
// 滚动轮播图
@ -640,98 +638,152 @@ export default {
cxt_arc.stroke() //对当前路径进行描边
cxt_arc.draw()
},
handleNoneChild(obj){
this.regionList.forEach(item=>{
if (item.name === obj.name){
handleNoneChild(obj,selectIndex){
this.regionList.forEach((item,index)=>{
if (item.name === obj.name && index===selectIndex){
item.showChild = !item.showChild
}
})
this.$forceUpdate()
},
async getDetail(obj) {
async getDetail() {
uni.showLoading({
title: '正在加载...'
title:'加载中'
})
const requestParamas = {
Statistics_Date: obj.time ,
Statistics_Month: obj.month ,
Province_Code: obj.ProvinceCode ,
pushProvinceCode: obj.ProvinceCode ,
Serverpart_ID: obj.GroupType != 1020 ? obj.ServerpartIds : '',
SPRegionType_ID: obj.GroupType == 1020 ? obj.ServerpartIds : '',
// Revenue_Include: 1
this.regionList=[]
const date = new Date(this.searchText)
const y = date.getFullYear()
let m = date.getMonth() + 1
if (m<10){
m = '0' + m
}
const bayonetCount = await request.$webGet('CommercialApi/Revenue/GetSPBayonetList', requestParamas)
const res = bayonetCount.Result_Data.List
let bayonetPie = [] // 区域车流饼图统计数据
res.map(async (n, index) => {
bayonetPie = anhuiYestodayRevenueData.getBayonetPie('Serverpart_Name', n, bayonetPie)
})
bayonetPie.forEach((item,index)=>{
let entryNum = 0 // 该片区总计的入区车流
let flowNum = 0 // 该片区总计的断面流量
let entryNumNoZero = 0 //
let flowNumNoZero = 0 //
item.spList.forEach(subItem=>{
entryNum+=subItem.Vehicle_Count
flowNum+=subItem.SectionFlow_Count
if (subItem.regionList && subItem.regionList.length>0){
subItem.regionList.forEach(thirdItem=>{
if (thirdItem.SectionFlow_Count===0 || thirdItem.Vehicle_Count===0){
thirdItem.entryRate = 0
}else{
thirdItem.entryRate = Number(((thirdItem.Vehicle_Count / thirdItem.SectionFlow_Count)*100).toFixed(2))
}
if (thirdItem.Vehicle_Count<thirdItem.SectionFlow_Count && thirdItem.Vehicle_Count!==0 && thirdItem.SectionFlow_Count!==0){
entryNumNoZero+=thirdItem.Vehicle_Count
flowNumNoZero+=thirdItem.SectionFlow_Count
}
})
}
})
item.entry = entryNum
item.flow = flowNum
item.flowRate =flowNumNoZero? ((entryNumNoZero / flowNumNoZero)*100).toFixed(2) + '%':'-'
let req
if (this.serviceInfo.SERVERPART_NAME==='安徽驿达'){
req = {
StatisticsMonth:`${y}${m}`,
}
}else{
req = {
StatisticsMonth:`${y}${m}`,
Serverpart_ID :this.serviceInfo.Serverpart_ID || "",
}
}
request.$webGet('CommercialApi/BigData/GetProvinceMonthAnalysis',req).then(res=>{
console.log('res',res)
this.carData = res.Result_Data.List
this.carData.forEach(item=>{
item.Serverpart_ID = this.serviceInfo.Serverpart_ID
item.showChild = false
item.entryList = [{name:'已入区',value:Number(item.flowRate.split('%')[0])},{name:'未入区',value:100 - item.flowRate.split('%')[0]}]
item.bg = item.name.indexOf('皖中')!==-1?'https://eshangtech.com/ShopICO/ahyd-BID/newCommercial/Middle.png':item.name.indexOf('皖西')!==-1?'https://eshangtech.com/ShopICO/ahyd-BID/newCommercial/west.png':item.name.indexOf('皖东')!==-1?'https://eshangtech.com/ShopICO/ahyd-BID/newCommercial/east.png':item.name.indexOf('皖南')!==-1?'https://eshangtech.com/ShopICO/ahyd-BID/newCommercial/south.png':item.name.indexOf('皖北')!==-1?'https://eshangtech.com/ShopICO/ahyd-BID/newCommercial/north.png':''
})
this.regionList = this.carData
console.log('this.carData',this.carData)
uni.hideLoading()
// let sumObj = {
// Serverpart_Name:'',
// Serverpart_Region:'',
// SectionFlow_Count:0,
// Vehicle_Count:0,
// showChild:false
// }
// this.carData.forEach(item=>{
// sumObj.Serverpart_Name = item.Serverpart_Name
// sumObj.Serverpart_Region = item.Serverpart_Region
// sumObj.SectionFlow_Count += item.SectionFlow_Count
// sumObj.Vehicle_Count += item.Vehicle_Count
// })
// if (sumObj.Vehicle_Count && sumObj.SectionFlow_Count){
// sumObj.Entry_Rate = ((sumObj.Vehicle_Count / sumObj.SectionFlow_Count)*100).toFixed(2)
// }
// console.log('sumObj',sumObj)
// sumObj.Vehicle_Count = this.$util.fmoney(this.$util.getMoney(sumObj.Vehicle_Count / 10000),2)
// this.regionList = [sumObj]
})
if (bayonetPie && bayonetPie.length>0){
for (let i=0;i<=bayonetPie.length-1;i++){
for (let j=0;j<=bayonetPie.length - i - 1;j++){
if (bayonetPie[j] && bayonetPie[j + 1] && bayonetPie[j].entry && bayonetPie[j+1].entry){
if (bayonetPie[j].entry < bayonetPie[j+1].entry){
let temp = bayonetPie[j]
bayonetPie[j] = bayonetPie[j + 1]
bayonetPie[j + 1] = temp
}
}
}
}
}
bayonetPie.forEach(item=>{
if (item.spList && item.spList.length>0){
for (let i=0;i<=item.spList.length-1;i++){
for (let j=0;j<=item.spList.length - i - 1;j++){
if (item.spList[j] && item.spList[j + 1] && item.spList[j].Vehicle_Count && item.spList[j+1].Vehicle_Count){
if (item.spList[j].Vehicle_Count < item.spList[j+1].Vehicle_Count){
let temp = item.spList[j]
item.spList[j] = item.spList[j + 1]
item.spList[j + 1] = temp
}
}
}
}
}
})
this.regionList = bayonetPie
this.regionList.forEach((item,index)=>{
const number = Number(item.flowRate.split('%')[0])
this.showScoreAnimation1(number,index)
})
uni.hideLoading()
// uni.showLoading({
// title: '正在加载...'
// })
// const requestParamas = {
// Statistics_Date: obj.time ,
// Statistics_Month: obj.month ,
// Province_Code: obj.ProvinceCode ,
// pushProvinceCode: obj.ProvinceCode ,
// Serverpart_ID: obj.GroupType != 1020 ? obj.ServerpartIds : '',
// SPRegionType_ID: obj.GroupType == 1020 ? obj.ServerpartIds : '',
// // Revenue_Include: 1
// }
//
// const bayonetCount = await request.$webGet('CommercialApi/Revenue/GetSPBayonetList', requestParamas)
// const res = bayonetCount.Result_Data.List
// let bayonetPie = [] // 区域车流饼图统计数据
// res.map(async (n, index) => {
// bayonetPie = anhuiYestodayRevenueData.getBayonetPie('Serverpart_Name', n, bayonetPie)
// })
// bayonetPie.forEach((item,index)=>{
// let entryNum = 0 // 该片区总计的入区车流
// let flowNum = 0 // 该片区总计的断面流量
// let entryNumNoZero = 0 //
// let flowNumNoZero = 0 //
// item.spList.forEach(subItem=>{
// entryNum+=subItem.Vehicle_Count
// flowNum+=subItem.SectionFlow_Count
// if (subItem.regionList && subItem.regionList.length>0){
// subItem.regionList.forEach(thirdItem=>{
// if (thirdItem.SectionFlow_Count===0 || thirdItem.Vehicle_Count===0){
// thirdItem.entryRate = 0
// }else{
// thirdItem.entryRate = Number(((thirdItem.Vehicle_Count / thirdItem.SectionFlow_Count)*100).toFixed(2))
// }
//
// if (thirdItem.Vehicle_Count<thirdItem.SectionFlow_Count && thirdItem.Vehicle_Count!==0 && thirdItem.SectionFlow_Count!==0){
// entryNumNoZero+=thirdItem.Vehicle_Count
// flowNumNoZero+=thirdItem.SectionFlow_Count
// }
// })
// }
// })
// item.entry = entryNum
// item.flow = flowNum
// item.flowRate =flowNumNoZero? ((entryNumNoZero / flowNumNoZero)*100).toFixed(2) + '%':'-'
// item.showChild = false
// item.entryList = [{name:'已入区',value:Number(item.flowRate.split('%')[0])},{name:'未入区',value:100 - item.flowRate.split('%')[0]}]
// item.bg = item.name.indexOf('皖中')!==-1?'https://eshangtech.com/ShopICO/ahyd-BID/newCommercial/Middle.png':item.name.indexOf('皖西')!==-1?'https://eshangtech.com/ShopICO/ahyd-BID/newCommercial/west.png':item.name.indexOf('皖东')!==-1?'https://eshangtech.com/ShopICO/ahyd-BID/newCommercial/east.png':item.name.indexOf('皖南')!==-1?'https://eshangtech.com/ShopICO/ahyd-BID/newCommercial/south.png':item.name.indexOf('皖北')!==-1?'https://eshangtech.com/ShopICO/ahyd-BID/newCommercial/north.png':''
// })
// if (bayonetPie && bayonetPie.length>0){
// for (let i=0;i<=bayonetPie.length-1;i++){
// for (let j=0;j<=bayonetPie.length - i - 1;j++){
// if (bayonetPie[j] && bayonetPie[j + 1] && bayonetPie[j].entry && bayonetPie[j+1].entry){
// if (bayonetPie[j].entry < bayonetPie[j+1].entry){
// let temp = bayonetPie[j]
// bayonetPie[j] = bayonetPie[j + 1]
// bayonetPie[j + 1] = temp
// }
// }
// }
// }
// }
//
// bayonetPie.forEach(item=>{
// if (item.spList && item.spList.length>0){
// for (let i=0;i<=item.spList.length-1;i++){
// for (let j=0;j<=item.spList.length - i - 1;j++){
// if (item.spList[j] && item.spList[j + 1] && item.spList[j].Vehicle_Count && item.spList[j+1].Vehicle_Count){
// if (item.spList[j].Vehicle_Count < item.spList[j+1].Vehicle_Count){
// let temp = item.spList[j]
// item.spList[j] = item.spList[j + 1]
// item.spList[j + 1] = temp
// }
// }
// }
// }
// }
// })
// this.regionList = bayonetPie
// this.regionList.forEach((item,index)=>{
// const number = Number(item.flowRate.split('%')[0])
// this.showScoreAnimation1(number,index)
// })
// uni.hideLoading()
},
//车型选择
handleCarType(selectItem){
@ -812,8 +864,9 @@ export default {
month: `${y}${m}`,
time: `${y}-${m}-${d}`,
}
await this.getDetail(this.theRequest)
this.searchText = e.detail.value
this.searchTextMonth = e.detail.value
await this.getDetail()
},
// 时间选择器改变的时间
bindDateChange(e){
@ -890,7 +943,7 @@ export default {
//跳转到地图
handleGoSelectService() {
uni.navigateTo({
url:`/pages/map/index?chartType=${true}&page=/pages/commercialBI/carPortrait&serviceInfo=${JSON.stringify(this.serviceInfo)}`
url:`/pages/map/index?chartType=${true}&page=/pages/commercialBINew/carPortrait&serviceInfo=${JSON.stringify(this.serviceInfo)}`
})
},
handleBack(){
@ -1400,6 +1453,14 @@ export default {
height: 100%;
}
}
.sliderBox{
width: 100vw;
box-sizing: border-box;
padding: 0 16rpx;
position: absolute;
z-index: 9;
left: 0;
}
.pickerTop{
margin-left: 16rpx;
.selectService{
@ -1607,72 +1668,76 @@ export default {
height: 24px;
margin-right: 16px;
}
.timeSelect{
display: flex;
align-items: center;
.selectIcon{
width: 16px;
height: 16px;
}
.time{
.picker{
.selectService{
display: flex;
align-items: center;
.text{
margin: 0 5px;
color: #fff;
.img{
width: 40px;
height: 40px;
z-index: 2;
}
.icon{
width: 18px;
height: 18px;
.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;
}
}
}
}
}
}
.picker{
.sliderBox{
width: 100%;
position: absolute;
left: 0;
}
.timeSelect{
position: absolute;
left: 16px;
.selectService{
.selectIcon{
width: 16px;
height: 16px;
}
.time{
display: flex;
align-items: center;
.img{
width: 40px;
height: 40px;
z-index: 2;
.text{
margin: 0 5px;
color: #fff;
}
.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;
}
}
.icon{
width: 18px;
height: 18px;
}
}
}
@ -1962,170 +2027,171 @@ export default {
margin-top: 24px;
box-sizing: border-box;
padding-bottom: 12px;
.itemTitle{
display: block;
font-size: 16px;
font-family: PingFangSC-Semibold, PingFang SC;
font-weight: 600;
color: #160002;
.listTop{
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 12px;
}
.listItem{
margin-bottom: 12px;
border: 1px solid #D9DBE0;
border-radius: 8px;
position: relative;
.bg{
position: absolute;
right: 0;top: 0;
width: 97px;
height: 97px;
.itemTitle{
display: block;
font-size: 16px;
font-family: PingFangSC-Semibold, PingFang SC;
font-weight: 600;
color: #160002;
}
.listBox{
width: 100%;
box-sizing: border-box;
padding: 12px 16px;
background: linear-gradient(314deg, #EAEFFF 0%, #F3F5FF 32%, #F5FCFF 50%, #F0F7FF 67%, #DBE5FF 100%);
border-bottom: 1px solid #D9DBE0;
border-radius: 8px;
.itemTop{
width: 100%;
.timeSelect{
.selectIcon{
width: 16px;
height: 16px;
}
.time{
display: flex;
justify-content: space-between;
align-items: center;
.itemLeft{
display: inline-block;
padding: 2px 8px;
background: rgba(26, 95, 255, 0.1);
border-radius: 14px;
.itemFixed{
width: 12px;
height: 14px;
margin-right: 4px;
}
.serverName{
font-size: 16px;
font-family: Alimama ShuHeiTi;
color: #1A5FFF;
line-height: 22px
}
.text{
margin: 0 5px;
}
.itemRight{
width: 26px;
height: 14px;
.icon{
width: 18px;
height: 18px;
}
}
.itemDetail{
margin-top: 16px;
}
}
.listBigBox{
width: 100%;
height: calc(100ch - 400px);
margin-top: 24px;
box-sizing: border-box;
padding-bottom: 12px;
.listItem{
margin-bottom: 12px;
border: 1px solid #D9DBE0;
border-radius: 8px;
position: relative;
.bg{
position: absolute;
right: 0;top: 0;
width: 97px;
height: 97px;
}
.listBox{
width: 100%;
box-sizing: border-box;
padding: 12px 16px;
background: linear-gradient(314deg, #EAEFFF 0%, #F3F5FF 32%, #F5FCFF 50%, #F0F7FF 67%, #DBE5FF 100%);
border-bottom: 1px solid #D9DBE0;
border-radius: 8px;
.itemTop{
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
.itemLeft{
display: inline-block;
padding: 4px 12px;
background: rgba(26, 95, 255, 0.1);
border-radius: 14px;
.itemFixed{
width: 12px;
height: 14px;
margin-right: 4px;
}
.serverName{
font-size: 16px;
font-family: DINAlternate-Bold, DINAlternate;
font-weight: bold;
white-space: nowrap;
color: #1A5FFF;
line-height: 22px
}
}
.itemRight{
display: flex;
align-items: center;
.entryRate{
display: flex;
flex-direction: column;
.entryValue{
font-size: 16px;
font-family: DINAlternate-Bold, DINAlternate;
font-weight: bold;
color: red;
line-height: 24px;
white-space: nowrap;
}
.entryLabel{
font-size: 14px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #786B6C;
line-height: 20px;
}
}
.img{
width: 26px;
height: 14px;
}
}
}
.itemDetail{
margin-top: 16px;
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
.message{
display: flex;
flex-direction: column;
.cirRate{
width: 40px;
height: 40px;
}
.label{
font-size: 14px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #786B6C;
line-height: 20px
}
.value{
font-size: 20px;
font-family: DINAlternate-Bold, DINAlternate;
font-weight: bold;
color: #160002;
line-height: 24px;
white-space: nowrap;
}
}
}
}
.childList{
border-radius: 8px 8px 0 0;
box-sizing: border-box;
margin-left: 16px;
width: calc(100% - 32px);
display: flex;
justify-content: space-between;
align-items: center;
.message{
justify-content: space-between;
padding: 8px;
.childItem{
width: calc(100% / 3);
display: flex;
flex-direction: column;
.cirRate{
width: 40px;
height: 40px;
}
.label{
.childLabel{
font-size: 14px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #786B6C;
line-height: 20px
}
.value{
font-size: 20px;
.childValue{
font-size: 18px;
font-family: DINAlternate-Bold, DINAlternate;
font-weight: bold;
color: #160002;
line-height: 24px;
white-space: nowrap;
}
}
}
}
.childList{
margin-top: 20px;
border-radius: 8px 8px 0 0;
box-sizing: border-box;
margin-left: 16px;
width: calc(100% - 32px);
.childItem{
width: 100%;
border-bottom: 1px solid #EEEEEE;
margin-bottom: 8px;
.childTop{
width: 100%;
margin-bottom: 12px;
display: flex;
align-items: center;
justify-content: space-between;
.topLeft{
display: flex;
align-items: center;
.imgBox{
width: 28px;
height: 28px;
border-radius: 50%;
border: 1px solid #FFFFFF;
overflow: hidden;
.topIcon{
width: 100%;
height: 100%;
}
}
.serviceName{
font-size: 16px;
font-family: PingFangSC-Semibold, PingFang SC;
font-weight: 600;
color: #160002;
line-height: 22px;
margin-left: 6px;
}
}
.topRight{
width: 16px;
height: 16px;
}
}
.childDetail{
.thirdItem{
width: 100%;
margin-bottom: 12px;
display: flex;
align-items: flex-start;
.serviceFixed{
display: inline-block;
width: 40px;
box-sizing: border-box;
white-space: nowrap;
font-size: 14px;
font-family: PingFangSC-Semibold, PingFang SC;
font-weight: 600;
color: #160002;
line-height: 18px;
}
.itemType{
display: inline-block;
width: calc((100% - 40px)*0.4);
white-space: nowrap;
.typeValue{
font-size: 14px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #160002;
line-height: 20px;
}
.typeLabel{
font-size: 12px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #786B6C;
line-height: 18px;
}
}
}
}
}

211
pages/commercialBINew/commercialType.vue Normal file
View File

@ -0,0 +1,211 @@
<template>
<div class="typeBigList">
<view class="bigBox">
<view :class="expand?'ItemBox second':'ItemBox first'">
<view class="item" @click="handleChangeExpand">
<view class="iconBox">
<image class="icon" src="/static/images/user/expand.svg"/>
</view>
<text class="text">展开</text>
</view>
</view>
<view :class="expand?'ItemBox first':'ItemBox second'" :style="{opacity: show?1:0}">
<div class="item" @click="handleChangeExpand">
<view class="iconBox">
<image style="transform: rotate(-180deg)" class="icon" src="/static/images/user/expand.svg"/>
</view>
<text class="text">隐藏</text>
</div>
<div class="item" v-for="(item,index) in showTypeList" :key="index" @click="handleGo(item.url)">
<image class="icon" :src="item.img"/>
<text class="text">{{item.text}}</text>
</div>
</view>
</view>
</div>
</template>
<script>
export default {
name: "commercialType",
data(){
return {
typeList:[
{img:'https://eshangtech.com/ShopICO/ahyd-BID/index/car.svg',url:'/pages/commercialBINew/carPortrait',text:'车流'},
{img:'https://eshangtech.com/ShopICO/ahyd-BID/index/guest.svg',url:'/pages/commercialBI/guestPortrait',text:'客群'},
{img:'https://eshangtech.com/ShopICO/ahyd-BID/index/business_icon.svg',url:'/pages/commercialBI/managePortrait',text:'经营'},
{img:'https://eshangtech.com/ShopICO/ahyd-BID/index/trade.svg',url:'/pages/commercialBI/businessPortrait',text:'交易'},
{img:'https://eshangtech.com/ShopICO/ahyd-BID/index/brand.svg',url:'/pages/commercialBI/formatPortraitBI',text:'品牌'},
{img:'https://eshangtech.com/ShopICO/ahyd-BID/newCommercialBI/newExamineIcon.svg',url:`/pages/examine/detail?type=${1}`,text:'考核'},
{img:'https://eshangtech.com/ShopICO/ahyd-BID/newCommercialBI/inspectionIcon.svg',url:`/pages/examine/detail?type=${2}`,text:'巡检'},
],
showTypeList:[],
selectIndex: 7,
pageList : [],// 页面栈数组
expand: false,// 是否展开
show:false,
}
},
props:{
have:{
type:Number,
default:7
},
time:{
type: String,
default: ''
}
},
watch:{
have:{
handler(value){
this.selectIndex = value
let list = []
this.typeList.forEach((item,index)=>{
if (index !== this.selectIndex){
list.push(item)
}
})
this.showTypeList = list
setTimeout(()=>{
this.show = true
console.log('this.show',this.show)
},2000)
},
deep:true,
immediate:true
}
},
onLoad(){
},
onShow(){
},
methods:{
handleChangeExpand(){
this.expand = !this.expand
},
handleGo(url){
let pageList = getCurrentPages()
if (pageList.length>=2){
uni.redirectTo({
url:url
})
} else{
uni.navigateTo({
url:url
})
}
}
}
}
</script>
<style scoped lang="scss">
.typeBigList{
position: fixed;
right: 0;
top: 12%;
.bigBox{
width: 100%;
height: 100%;
position: relative;
.ItemBox,.ItemBox2{
.item{
width: 150rpx;
height: 80rpx;
border-radius: 20px 0 0 20px;
box-sizing: border-box;
padding: 14rpx;
background: rgba(255,255,255,0.8);
box-shadow: 0rpx 0rpx 40rpx 0rpx rgba(88,82,82,0.3);
display: flex;
align-items: center;
margin-bottom: 10px;
border: 1px solid #ccc;
.icon{
width: 52.5rpx;
height: 52.5rpx;
border-radius: 50%;
}
.iconBox{
width: 52.5rpx;
height: 52.5rpx;
border-radius: 50%;
margin-right: 10rpx;
background: #fff;
display: flex;
align-items: center;
justify-content: center;
.icon{
width: 30rpx;
height: 30rpx;
}
}
.text{
font-size: 24rpx;
font-family: PingFangSC, PingFang SC;
font-weight: 400;
color: #786B6C;
line-height: 36rpx;
}
}
.firstItem{
animation:toLeft 2s;
}
.secondItem{
animation:toRight 2s;
}
@keyframes toLeft {
0%{
transform: translateX(0px);
}
100%{
transform: translateX(150rpx);
}
}
@keyframes toRight {
0%{
transform: translateX(0px);
}
100%{
transform: translateX(150rpx);
}
}
}
.first{
position: absolute;
top: 0;
animation: second 1.5s;
animation-fill-mode:forwards;
}
.second{
position: absolute;
top: 0;
animation: first 1.5s;
animation-fill-mode:forwards;
}
@keyframes first {
0%{
left: -150rpx;
}
100%{
left: 0;
}
}
@keyframes second {
0%{
left: 0;
}
100%{
left: -150rpx;
}
}
}
}
</style>

94
pages/commercialBINew/components/analyse.vue Normal file
View File

@ -0,0 +1,94 @@
<template>
<view>
<div class="main" v-if="analyseText">
<p class="title">分析</p>
<div class="text">{{ analyseText }}</div>
</div>
<view v-else></view>
</view>
</template>
<script>
import request from '@/util/index.js'
export default {
name: "analyse",
data(){
return {
time:'',
serviceInfo:{},
analyseText:''
}
},
props:{
analyseInfo:{
type: Object,
default:()=>{}
}
},
watch:{
analyseInfo:{
handler(value){
this.getLabelDetail()
},
immediate:true,
deep:true
}
},
onLoad(){
this.time = uni.getStorageSync('lastDay')
},
methods:{
async getLabelDetail(){
this.time = uni.getStorageSync('lastDay')
let id = uni.getStorageSync('currentService')
let req = {
SearchParameter:{
ANALYSISINS_TYPE:this.analyseInfo.analysisins_type,
ANALYSISINS_FORMAT:this.analyseInfo.analysisins_format,
ANALYSISINS_STATE:1,
SERVERPART_ID:id.Serverpart_ID,
},
PageIndex:1,
PageSize:10
}
const data = await request.$webPost('CommercialApi/Analysis/GetANALYSISINSList',req)
this.analyseText = data.Result_Data.List[0]?data.Result_Data.List[0].ANALYSIS_CONTENT:''
},
}
}
</script>
<style scoped lang="scss">
.main{
width: 100%;
box-sizing: border-box;
padding: 6px 8px;
background: #F1F3F7;
border-radius: 4px;
display: flex;
margin-top: 12px;
.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);
}
.text{
width: calc(100% - 46px);
padding-left: 6px;
font-size: 12px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #786B6C;
line-height: 18px;
}
}
</style>

168
pages/commercialBINew/components/bussiness/bestsellerShop.vue Normal file
View File

@ -0,0 +1,168 @@
<template>
<div class="bestsellerShop">
<div class="item">
<div class="canvas">
<canvas class="hotSales" canvas-id="hotSales" id="hotSales"/>
</div>
<div class="list">
<div class="shopItem" v-for="(item,index) in shopList[0].series[0].list" :key="index">
<p class="title">{{item.name}}</p>
<p class="value">{{item.value}}%</p>
</div>
</div>
</div>
<div class="item">
<div class="canvas">
<canvas class="unsalableGoods" canvas-id="unsalableGoods" id="unsalableGoods"/>
</div>
<div class="list" style="float: right">
<div class="shopItem" v-for="(item,index) in shopList[1].series[0].list" :key="index">
<p class="title">{{item.name}}</p>
<p class="value">{{item.value}}%</p>
</div>
</div>
</div>
</div>
</template>
<script>
import uCharts from '@/components/u-charts.js';
var uChartsInstance = {};
export default {
name: "bestsellerShop",
data() {
return {
width:0,
shopList:[]
}
},
props: {
data: {
type: Array,
default: () => []
}
},
watch: {
data: {
handler(value) {
this.shopList = value
this.handleCarData(value)
},
immediate: true
}
},
methods: {
// 处理传入的数据
handleCarData(value) {
let res = value
if (res && res.length>0){
this.drawCharts('hotSales', res[0],{color:["#1E80FF","#E5E8EF"],title:'39.8%',subTitle:'热销商品'})
this.drawCharts('unsalableGoods', res[1],{color:["#00C2FF","#E5E8EF"],title:'21.6%',subTitle:'滞销商品'})
}
},
drawCharts(id, data,config) {
const ctx = uni.createCanvasContext(id, this);
let _this = this
let phoneInfo = uni.getStorageSync('phoneInfo')
this.width = phoneInfo.screenWidth - 32
uChartsInstance[id] = new uCharts({
type: "ring",
context: ctx,
width: _this.width / 2,
height: 165,
series: data.series,
animation: false,
rotate: false,
rotateLock: false,
background: "#FFFFFF",
color: config.color,
padding: [5, 5, 5, 5],
dataLabel: false,
enableScroll: false,
title: {
name: config.title,
fontSize: 16,
color: "#160002"
},
subtitle: {
name: config.subTitle,
fontSize: 12,
color: "#786B6C",
},
legend: {
show: false,
position: "bottom",
lineHeight: 25,
float: 'center'
},
extra: {
ring: {
ringWidth: 12,
activeOpacity: 0.5,
activeRadius: 10,
offsetAngle: -90,
labelWidth: 15,
border: false,
borderWidth: 3,
borderColor: "#FFFFFF"
}
}
});
},
}
}
</script>
<style scoped lang="scss">
.bestsellerShop{
width: 100%;
display: flex;
.item{
width: 50%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
position: relative;
.canvas{
width: 100%;
height: 170px;
overflow: hidden;
.hotSales{
position: absolute;
}
}
.list{
width: 90%;
.shopItem{
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 1px solid #EFEFEF;
padding: 10px 0;
.title{
font-size: 14px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #786B6C;
line-height: 20px;
width: 75%;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
}
.value{
font-size: 14px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #160002;
line-height: 20px;
}
}
}
}
}
</style>

129
pages/commercialBINew/components/bussiness/businessFormat.vue Normal file
View File

@ -0,0 +1,129 @@
<template>
<div class="businessFormat">
<canvas class="format" canvas-id="businessFormat" id="businessFormat" @tap="tap"/>
<!-- <image v-if="formatPath" class="format" :src="formatPath"></image>-->
</div>
</template>
<script>
import uCharts from '@/components/u-charts.js';
var uChartsInstance = {};
export default {
name: "businessFormat",
data() {
return {
width:0,
formatPath:''
}
},
props: {
data: {
type: Object,
default: () => {}
}
},
watch: {
data: {
handler(value) {
this.handleCarData(value)
},
immediate: true
}
},
methods: {
tap(e){
uChartsInstance[e.target.id].showToolTip(e, {
formatter: (item, category, index, opts) => {
return item.name+',' + opts.series[index].text
}
});
uChartsInstance[e.target.id].touchLegend(e);
},
// 处理传入的数据
handleCarData(value) {
let res = value
this.drawCharts('businessFormat', res)
},
drawCharts(id, data) {
const ctx = uni.createCanvasContext(id, this);
let _this = this
let phoneInfo = uni.getStorageSync('phoneInfo')
this.width = phoneInfo.screenWidth - 32
uChartsInstance[id] = new uCharts({
type: "ring",
context: ctx,
width: _this.width,
height: 280,
series: data.series,
animation: false,
rotate: false,
rotateLock: false,
background: "#FFFFFF",
color: ["#00C2FF","#6B6FFF","#38C275","#1E80FF", "#F3BC1B","#ED6B5A","#FF9845","#74839D","#ACB9CD","#CAD0DA"],
padding: [5, 5, 5, 5],
dataLabel: false,
enableScroll: false,
title: {
name: '刚需型',
fontSize: 16,
color: "#341D00"
},
subtitle: {
name: "理想业态布局",
fontSize: 12,
color: "#786B6C",
},
legend: {
show: true,
position: "right",
lineHeight: 25,
float: 'center'
},
extra: {
ring: {
ringWidth: 14,
activeOpacity: 0.5,
activeRadius: 10,
offsetAngle: -45,
labelWidth: 15,
border: false,
borderWidth: 3,
borderColor: "#FFFFFF"
}
}
});
setTimeout( ()=>{
// this.canvasToTempImage('businessFormat')
},2000)
},
canvasToTempImage(id){
uni.canvasToTempFilePath({
canvasId:id,
complete:(res)=>{
if (res.tempFilePath){
uni.getFileSystemManager().readFile({
filePath: res.tempFilePath,
encoding: 'base64',
success: res => {
let base64 = 'data:image/png;base64,' + res.data;
this.formatPath = base64
}
})
}
}
},this)
},
}
}
</script>
<style scoped lang="scss">
.businessFormat{
width: 100%;
.format{
width: 100%;
height: 260px;
}
}
</style>

176
pages/commercialBINew/components/bussiness/consumptionCompare.vue Normal file
View File

@ -0,0 +1,176 @@
<template>
<div class="consumptionCompare">
<canvas class="consumption" canvas-id="consumption" id="consumption" @tap="tap" />
<!-- <image v-if="consumptionPath" :src="consumptionPath" class="consumption"></image>-->
</div>
</template>
<script>
import uCharts from '@/components/u-charts.js';
var uChartsInstance = {};
export default {
name: "consumptionCompare",
data() {
return {
width: 0,
consumptionPath:''
}
},
props: {
data: {
type: Object,
default: () => {}
}
},
watch: {
data: {
handler(value) {
this.handleCarData(value)
},
immediate: true
}
},
methods: {
tap(e){
uChartsInstance[e.target.id].showToolTip(e, {
formatter: (item, category, index, opts) => {
console.log('item',item)
console.log('opts',opts)
if (item.name === '客单数'){
return item.name + ':'+ item.data + '笔'
}else{
return item.name + ':'+ item.data + '辆,交易概率: ' + ((opts.series[0].data[index] / opts.series[1].data[index])*100).toFixed(2) + '%'
}
}
});
uChartsInstance[e.target.id].touchLegend(e);
},
// 处理传入的数据
handleCarData(value) {
let res = value
let config = {
customerMax:value.series[0].max,
carLitMax:value.series[1].max
}
this.drawCharts('consumption', res,config)
},
getNumber(value){
let number = value / 40
number = Math.ceil(number)
return number * 40
},
drawCharts(id, data,config) {
const ctx = uni.createCanvasContext(id, this);
let _this = this
let phoneInfo = uni.getStorageSync('phoneInfo')
this.width = phoneInfo.screenWidth - 32
uChartsInstance[id] = new uCharts({
type: "area",
context: ctx,
width: _this.width,
height: 240,
categories: data.categories,
series: data.series,
animation: false,
rotate: false,
rotateLock: false,
background: "#FFFFFF",
color: ["#1E80FF", "#00B6FF"],
padding: [15, 5, 5, 5],
dataLabel: false,
enableScroll: false,
xAxis: {
disableGrid: true,
axisLineColor:"#F2F2F5",
formatter: (val)=>{
if (val==='0:00' || val==='4:00'|| val==='8:00'|| val==='12:00'|| val==='16:00'|| val==='20:00'|| val==='23:00'){
if (val === '23:00'){
return '24:00'
}else{
return val
}
}else{
return ''
}
}
},
yAxis:{
showTitle:true,
splitNumber:4,
gridColor:'#F2F2F5',
data: [
{
index:0,
title:'单位: 笔',
min: 0,
max:_this.getNumber(config.customerMax),
position: "left",
titleOffsetY: -5,
axisLineColor:"#F2F2F5"
},
{
index:1,
title:'单位: 辆',
min: 0,
max:_this.getNumber(config.carLitMax),
position: 'right',
titleOffsetY: -5,
titleOffsetX: -15,
axisLineColor:"#F2F2F5"
},
]
},
legend: {
show: true,
position: "bottom",
lineHeight: 25,
float: 'center'
},
extra: {
area: {
type: "curve",
opacity: 0.9,
addLine: true,
width: 2,
gradient: true,
activeType: "hollow"
}
}
});
setTimeout( ()=>{
// this.canvasToTempImage('consumption')
},2000)
},
canvasToTempImage(id){
uni.canvasToTempFilePath({
canvasId:id,
complete:(res)=>{
if (res.tempFilePath){
uni.getFileSystemManager().readFile({
filePath: res.tempFilePath,
encoding: 'base64',
success: res => {
let base64 = 'data:image/png;base64,' + res.data;
this.consumptionPath = base64
}
})
}
}
},this)
},
}
}
</script>
<style scoped lang="scss">
.consumptionCompare{
width: 100%;
margin-top: 12px;
.consumption{
width: 100%;
height: 220px;
}
}
</style>

137
pages/commercialBINew/components/bussiness/levelTop.vue Normal file
View File

@ -0,0 +1,137 @@
<template>
<div class="levelTop">
<canvas class="level" canvas-id="levelTop" id="levelTop" @tap="tap"/>
<!-- <image v-if="levelTopPath" class="level" :src="levelTopPath"></image>-->
</div>
</template>
<script>
import uCharts from '@/components/u-charts.js';
var uChartsInstance = {};
export default {
name: "levelTop",
data() {
return {
width:0,
levelTopPath:''
}
},
props: {
data: {
type: Object,
default: () => {}
}
},
watch: {
data: {
handler(value) {
this.handleCarData(value)
},
immediate: true
}
},
methods: {
tap(e){
uChartsInstance[e.target.id].showToolTip(e,{
formatter: (item, category, index, opts) =>{
return item.name + ' '+ item.data + '%';
}
});
uChartsInstance[e.target.id].touchLegend(e);
},
// 处理传入的数据
handleCarData(value) {
let res = value
this.drawCharts('levelTop', res)
},
drawCharts(id, data) {
const ctx = uni.createCanvasContext(id, this);
let _this = this
let phoneInfo = uni.getStorageSync('phoneInfo')
this.width = phoneInfo.screenWidth - 32
uChartsInstance[id] = new uCharts({
type: "column",
context: ctx,
width: _this.width,
height: 272,
categories: data.categories,
series: data.series,
animation: false,
rotate: false,
rotateLock: false,
background: "#FFFFFF",
color: ["#CAD0DA","#ACB9CD","#1E80FF", ],
padding: [15, 5, 5, 5],
dataLabel: false,
enableScroll: false,
legend: {
show: true,
position: "bottom",
lineHeight: 25,
float: 'center',
fontSize:10
},
xAxis: {
disableGrid: true,
axisLineColor:'#F2F2F5',
fontSize:10,
titleOffsetY:5
},
yAxis: {
splitNumber:5,
gridColor:'#F2F2F5',
data: [
{
min: 0,
max: 100,
unit:'%',
axisLineColor:'#F2F2F5'
}
]
},
extra: {
column: {
type: "stack",
width: 20,
activeBgColor: "#000000",
activeBgOpacity: 0.08,
labelPosition: "center"
}
}
});
setTimeout( ()=>{
// this.canvasToTempImage('levelTop')
},2000)
},
canvasToTempImage(id){
uni.canvasToTempFilePath({
canvasId:id,
complete:(res)=>{
if (res.tempFilePath){
uni.getFileSystemManager().readFile({
filePath: res.tempFilePath,
encoding: 'base64',
success: res => {
let base64 = 'data:image/png;base64,' + res.data;
this.levelTopPath = base64
}
})
}
}
},this)
},
}
}
</script>
<style scoped lang="scss">
.levelTop{
width:100%;
margin-top: 12px;
.level{
width: 100%;
height: 252px;
}
}
</style>

136
pages/commercialBINew/components/bussiness/timePeriodAnalysis.vue Normal file
View File

@ -0,0 +1,136 @@
<template>
<div class="timePeriodAnalysis">
<canvas class="timePeriod" canvas-id="timePeriod" id="timePeriod" @tap="tap"/>
<!-- <image class="timePeriod" v-if="timePeriodPath" :src="timePeriodPath"></image>-->
</div>
</template>
<script>
import uCharts from '@/components/u-charts.js';
var uChartsInstance = {};
export default {
name: "timePeriodAnalysis",
data() {
return {
width:0,
timePeriodPath:''
}
},
props: {
data: {
type: Object,
default: () => {}
}
},
watch: {
data: {
handler(value) {
this.handleCarData(value)
},
immediate: true
}
},
methods: {
tap(e){
uChartsInstance[e.target.id].showToolTip(e, {
formatter: (item, category, index, opts) => {
return item.name + ':'+ item.data + '%,' +'数量:' + opts.series[0].number[index] + '笔,金额:' +opts.series[0].money[index] +'元'
}
});
uChartsInstance[e.target.id].touchLegend(e);
},
// 处理传入的数据
handleCarData(value) {
let res = value
this.drawCharts('timePeriod', res)
},
drawCharts(id, data) {
const ctx = uni.createCanvasContext(id, this);
let _this = this
let phoneInfo = uni.getStorageSync('phoneInfo')
this.width = phoneInfo.screenWidth - 32
uChartsInstance[id] = new uCharts({
type: "area",
context: ctx,
width: _this.width,
height: 200,
categories:data.categories,
series: data.series,
animation: false,
rotate: false,
rotateLock: false,
background: "#FFFFFF",
color: ["#2483FF"],
padding: [15, 10, 5, 5],
dataLabel: false,
enableScroll: false,
xAxis: {
disableGrid: true,
formatter:(val)=>{
if (val===0 || val===4 || val===8 || val===12 || val===16 || val===20 || val===23){
if (val===23){
return '24:00'
}else{
return `${val}:00`
}
}else{
return ''
}
}
},
yAxis: {
disableGrid: false,
gridType: "solid",
gridColor:'#F2F2F5'
},
legend: {
show: false,
position: "bottom",
lineHeight: 25,
float: 'center',
},
extra: {
area: {
type: "curve",
opacity: 0.2,
addLine: true,
width: 2,
gradient: true,
activeType: "hollow"
}
}
});
setTimeout( ()=>{
// this.canvasToTempImage('timePeriod')
},2000)
},
canvasToTempImage(id){
uni.canvasToTempFilePath({
canvasId:id,
complete:(res)=>{
if (res.tempFilePath){
uni.getFileSystemManager().readFile({
filePath: res.tempFilePath,
encoding: 'base64',
success: res => {
let base64 = 'data:image/png;base64,' + res.data;
this.timePeriodPath = base64
}
})
}
}
},this)
},
}
}
</script>
<style scoped lang="scss">
.timePeriodAnalysis{
width: 100%;
.timePeriod{
width: 100%;
height: 200px;
}
}
</style>

143
pages/commercialBINew/components/bussiness/transactionAnalysis.vue Normal file
View File

@ -0,0 +1,143 @@
<template>
<div class="main">
<div class="yesterday">
<div class="top">
<image class="icon" src="https://eshangtech.com/ShopICO/ahyd-BID/commercial/money.svg"></image>
<p class="title">客单均价<text class="unit">/元</text></p>
</div>
<div class="bottom">
<div class="item">
<p class="price">{{ info.MonthAvgTicketPrice?info.MonthAvgTicketPrice:'-' }}</p>
<p class="text">该服务区</p>
</div>
<div class="item">
<p class="price">{{ info.ProvinceAvgTicketPrice?info.ProvinceAvgTicketPrice:'-' }}</p>
<p class="text">省级平均</p>
</div>
</div>
</div>
<!-- <div class="month">-->
<!-- <div class="top">-->
<!-- <image class="icon" src="https://eshangtech.com/ShopICO/ahyd-BID/commercial/converRate.svg"></image>-->
<!-- <p class="title">消费转化率<text class="unit">/%</text></p>-->
<!-- </div>-->
<!-- <div class="bottom">-->
<!-- <div class="item">-->
<!-- <p class="price">{{ info.ConvertRate?info.ConvertRate:'-' }}</p>-->
<!-- <p class="text">该服务区</p>-->
<!-- </div>-->
<!-- <div class="item">-->
<!-- <p class="price">{{ info.ConvertProvinceRate?info.ConvertProvinceRate:'-'}}</p>-->
<!-- <p class="text">省级平均</p>-->
<!-- </div>-->
<!-- </div>-->
<!-- </div>-->
</div>
</template>
<script>
import uCharts from '@/components/u-charts.js';
var uChartsInstance = {};
export default {
name: "transactionAnalysis",
data() {
return {
info:{} //数据内容
}
},
props: {
data: {
type: Object,
default: () => {}
}
},
watch: {
data: {
handler(value) {
if (value){
console.log('bianle',value)
this.info = value
console.log('this.info',this.info)
this.$forceUpdate()
}else{
this.info = {}
}
},
deep:true,
immediate:true,
},
},
methods: {
}
}
</script>
<style scoped lang="scss">
.main{
width: 100%;
.yesterday,.month{
margin-top: 12px;
width: 100%;
box-sizing: border-box;
background: #F7F7F7;
border-radius: 4px;
padding: 12px;
.top{
display: flex;
.icon{
width: 18px;
height: 18px;
margin-right: 9px;
}
.title{
font-size: 14px;
font-family: PingFangSC-Semibold, PingFang SC;
font-weight: 600;
color: #160002;
line-height: 20px;
.unit{
font-size: 14px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #A69E9F;
line-height: 20px;
margin-left: 2px;
}
}
}
.bottom{
margin-top: 12px;
width: 100%;
display: flex;
box-sizing: border-box;
.item{
width:50%;
padding-left: 26px;
.price{
font-size: 16px;
font-family: DINAlternate-Bold, DINAlternate;
font-weight: bold;
color: #341D00;
line-height: 20px;
margin-bottom: 2px;
}
.text{
font-size: 14px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #786B6C;
line-height: 20px;
.unit{
font-size: 14px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #A69E9F;
line-height: 20px;
}
}
}
}
}
}
</style>

0
pages/commercialBI/components/car/carTypeTime.vue → pages/commercialBINew/components/car/carTypeTime.vue
View File

0
pages/commercialBI/components/car/entryRate.vue → pages/commercialBINew/components/car/entryRate.vue
View File

0
pages/commercialBI/components/car/entryZone.vue → pages/commercialBINew/components/car/entryZone.vue
View File

0
pages/commercialBI/components/car/homePlace.vue → pages/commercialBINew/components/car/homePlace.vue
View File

0
pages/commercialBI/components/car/monthTotal.vue → pages/commercialBINew/components/car/monthTotal.vue
View File

0
pages/commercialBI/components/car/percentEntry.vue → pages/commercialBINew/components/car/percentEntry.vue
View File

0
pages/commercialBI/components/car/timeAnalysis.vue → pages/commercialBINew/components/car/timeAnalysis.vue
View File

208
pages/commercialBINew/components/format/bandLevel.vue Normal file
View File

@ -0,0 +1,208 @@
<template>
<div class="bandLevel">
<div class="bandItem" v-for="(item,index) in dataList" :key="index">
<p class="title">{{item.name}}</p>
<div class="progress">
<div v-if="Number(item.small)!==0" class="small" :style="{width:`calc(${item.small}% - 2px)`}" @click="handleClick($event,'small',item)">{{item.small<16?'':item.small+'%'}}</div>
<div v-if="Number(item.normal)!==0" class="normal" :style="{width:`calc(${item.normal}% - 2px)`,left:`calc(${item.small}% - 2px)`}" @click="handleClick($event,'normal',item)">{{item.normal<16?'':item.normal + '%'}}</div>
<div v-if="Number(item.big)!==0" class="big" :style="{width:item.big+'%',left:`calc(${item.normal + item.small}% - 4px)`}" @click="handleClick($event,'big',item)">{{item.big<16?'':item.big + '%'}}</div>
</div>
<div class="meng" :style="position==='left'?`left:${positionWidth}`:`right:${positionWidth}`" v-if="selectName===item.name">{{typeText}}{{typeValue}}</div>
</div>
<div class="key">
<div class="box">
<div class="keyItem">
<div class="icon" style="background: #CAD0DA"></div>
<p class="type">低消费</p>
</div>
<div class="keyItem">
<div class="icon" style="background: #ACB9CD"></div>
<p class="type">普通消费</p>
</div>
<div class="keyItem">
<div class="icon" style="background: #1E80FF"></div>
<p class="type">高消费</p>
</div>
</div>
</div>
</div>
</template>
<script>
var uChartsInstance = {};
export default {
name: "bandLevel",
data() {
return {
dataList: [],
isShow: false,
typeText:'',
typeValue:'',
selectName:'',
position:'',//left 或者 right
positionWidth:'',// 定位百分比
}
},
props: {
data: {
type: Array,
default: () => []
}
},
watch: {
data: {
handler(value) {
this.dataList = value
},
immediate: true
}
},
methods: {
handleClick(e,type,item){
this.selectName = item.name
let phoneInfo = uni.getStorageSync('phoneInfo')
let width = phoneInfo.screenWidth
let startWidth = width * 0.2
let endWidth = width * 0.6
let now = e.detail.x
this.isShow = true
if (now<startWidth){
this.position = 'left'
this.positionWidth = 0
}else if(now>startWidth && now<endWidth){
this.position = 'left'
this.positionWidth = `calc(${now}px - 16px)`
}else if(now>endWidth){
this.position = 'right'
this.positionWidth = 0
}
if (type==='small'){
this.typeText = '低消费'
this.typeValue = item.small + '%'
}else if(type === 'normal'){
this.typeText = '普通消费'
this.typeValue = item.normal + '%'
}else if(type === 'big'){
this.typeText = '高消费'
this.typeValue = item.big + '%'
}
}
}
}
</script>
<style scoped lang="scss">
.bandLevel{
width: 100%;
margin-top: 12px;
.bandItem{
width: 100%;
position: relative;
margin-bottom: 12px;
.title{
font-size: 14px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #160002;
line-height: 20px;
}
.meng{
position: absolute;
display: inline-block;
padding: 0 5px;
z-index: 9;
top: 0;
background: rgba(0,0,0,0.6);
color:#fff;
border-radius: 2px;
}
.progress{
width: 100%;
height: 20px;
box-sizing: border-box;
margin-top: 6px;
position: relative;
font-size: 12px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #FFFFFF;
.big{
display: flex;
align-items: center;
height: 100%;
position: absolute;
top: 0;
border-radius: 0 2px 2px 0 ;
box-sizing: border-box;
padding-left: 4px;
background: #1E80FF;
}
.normal{
display: flex;
align-items: center;
height: 100%;
position: absolute;
box-sizing: border-box;
padding-left: 4px;
background: #ACB9CD;
}
.normal:after{
position: absolute;
content:'';
width: 2px;
height: 100%;
background: #FFFFFF;
z-index:9;
right: 0;
top: 0;
}
.small{
display: flex;
align-items: center;
height: 100%;
position: absolute;
box-sizing: border-box;
padding-left: 4px;
border-radius: 2px 0 0 2px ;
background: #CAD0DA;
}
.small:after{
position: absolute;
content:'';
width: 2px;
height: 100%;
background: #FFFFFF;
z-index:9;
right: 0;
top: 0;
}
}
}
.key{
display: flex;
width: 100%;
.box{
display: flex;
margin: 0 auto;
.keyItem{
display: flex;
align-items: center;
margin-right: 12px;
.icon{
width: 12px;
height: 12px;
border-radius: 2px;
margin-right: 4px;
}
.type{
font-size: 12px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #786B6C;
line-height: 18px;
}
}
}
}
}
</style>

201
pages/commercialBINew/components/format/bandNumber.vue Normal file
View File

@ -0,0 +1,201 @@
<template>
<div class="main">
<div class="dataItem" v-for="(item,index) in dataList" :key="index">
<image class="bgIcon" src="https://eshangtech.com/ShopICO/ahyd-BID/commercial/bg_icon.svg"></image>
<div class="left">
<image class="icon" :src="item.Brand_ICO?item.Brand_ICO:'/static/images/revenue/home.png'"></image>
</div>
<div class="typePic">
<text class="typeName">{{item.BrandType_Name}}</text>
<!-- <image class="typeImg" :src="item.type===1?'https://eshangtech.com/ShopICO/ahyd-BID/commercial/success.svg':item.type===2?'https://eshangtech.com/ShopICO/ahyd-BID/commercial/punish.svg':''"></image>-->
</div>
<div class="right">
<p class="title" :style="item.Bussiness_State==='2000'?'color: #ccc':''">{{item.Brand_Name}}</p>
<div class="company" v-if="item.Bussiness_Name">
<image class="img" src="https://eshangtech.com/ShopICO/ahyd-BID/commercial/shop.svg"></image>
<p class="text">{{item.Bussiness_Name}}</p>
</div>
<div class="time" v-if="item.Bussiness_Time">
<image class="img" src="https://eshangtech.com/ShopICO/ahyd-BID/commercial/time.svg"></image>
<p class="text">{{item.Bussiness_Time}}</p>
</div>
<div class="label">
<!-- <div class="labelItem" v-for="(item,index) in item.label" :key="index">{{item}}</div>-->
<div class="labelItem">{{item.Bussiness_State==='1000'?'运营中':'已暂停'}}</div>
<div class="labelItem">{{item.Business_Trade}}</div>
</div>
<div class="box">
<div class="boxItem">
<p class="mark">{{9}}<text class="unit">分</text></p>
<p class="type">吸引力指数</p>
</div>
<div class="boxItem">
<p class="mark">{{9}}<text class="unit">分</text></p>
<p class="type">业绩评分</p>
</div>
<div class="boxItem">
<p class="mark">{{9}}<text class="unit">分</text></p>
<p class="type">坪效指数</p>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: "bandNumber",
data() {
return {
dataList:[]
}
},
props: {
data: {
type: Array,
default: () => []
}
},
watch: {
data: {
handler(value) {
this.dataList = value
},
immediate: true
}
},
}
</script>
<style scoped lang="scss">
.main{
width: 100%;
margin-top: 12px;
.dataItem{
width: calc(100% - 32px );
background: #F8F9F9;
border-radius: 8px;
margin: 0 auto 12px;
display: flex;
padding: 12px;
position: relative;
.bgIcon{
width: 96px;
height: 96px;
position: absolute;
right: -5px;top: 0;
}
.typePic{
position: absolute;
top: 12px;
right: 16px;
z-index:9;
.typeImg{
width: 100%;
height: 100%;
z-index:9;
}
.typeName{
display: inline-block;
background: #EDF0F4;
padding: 2px 8px;
border-radius: 4px;
font-size: 12px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #786B6C;
}
}
.left{
width: 60px;
height: 60px;
overflow: hidden;
border-radius: 5px;
margin-right: 12px;
.icon{
width: 100%;
height: 100%;
}
}
.right{
.title{
font-size: 17px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #160002;
line-height: 24px;
margin-bottom: 2px;
}
.company,.time{
display: flex;
align-items: center;
margin-bottom: 2px;
.img{
width: 16px;
height: 16px;
line-height: 18px;
margin-right: 4px;
}
.text{
font-size: 12px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #786B6C;
line-height: 18px;
flex-flow: wrap;
}
}
.label{
margin-top: 8px;
width: 100%;
display: flex;
flex-flow: wrap;
.labelItem{
font-size: 12px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #786B6C;
line-height: 18px;
padding: 0 4px;
background: #EDF0F4;
margin-right: 4px;
border-radius: 2px;
}
}
.box{
margin-top: 22px;
display: flex;
.boxItem{
margin-right: 22px;
box-sizing: border-box;
padding-left: 5px;
.mark{
font-size: 18px;
font-family: DINAlternate-Bold, DINAlternate;
font-weight: bold;
color: #160002;
line-height: 22px;
margin-bottom: 4px;
.unit{
font-size: 12px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #A69E9F;
line-height: 18px;
margin-left: 4px;
}
}
.type{
font-size: 12px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #786B6C;
line-height: 18px;
}
}
}
}
}
}
</style>

139
pages/commercialBINew/components/format/consumLevel.vue Normal file
View File

@ -0,0 +1,139 @@
<template>
<div class="consumLevel">
<canvas class="level" canvas-id="level" id="level" @tap="tap"/>
<!-- <image v-if="levelPath" class="level" :src="levelPath"></image>-->
</div>
</template>
<script>
import uCharts from '@/components/u-charts.js';
var uChartsInstance = {};
export default {
name: "consumLevel",
data() {
return {
width:0,
levelPath:''
}
},
props: {
data: {
type: Object,
default: () => {}
}
},
watch: {
data: {
handler(value) {
this.handleCarData(value)
},
immediate: true
}
},
methods: {
tap(e){
uChartsInstance[e.target.id].showToolTip(e,{
formatter: (item, category, index, opts) =>{
return item.name + item.data + '%';
}
});
uChartsInstance[e.target.id].touchLegend(e);
},
// 处理传入的数据
handleCarData(value) {
let res = value
this.drawCharts('level', res)
},
drawCharts(id, data) {
const ctx = uni.createCanvasContext(id, this);
let _this = this
let phoneInfo = uni.getStorageSync('phoneInfo')
this.width = phoneInfo.screenWidth - 32
uChartsInstance[id] = new uCharts({
type: "column",
context: ctx,
width: _this.width,
height: 282,
categories: data.categories,
series: data.series,
animation: false,
rotate: false,
rotateLock: false,
background: "#FFFFFF",
color: ["#CAD0DA","#ACB9CD","#1E80FF" ],
padding: [15, 5, 5, 5],
dataLabel: false,
enableScroll: false,
legend: {
show: true,
position: "bottom",
lineHeight: 25,
float: 'center',
fontSize:10
},
xAxis: {
disableGrid: true,
axisLineColor:'#F2F2F5',
fontSize:10
},
yAxis: {
showTitle:true,
splitNumber:5,
gridColor:'#F2F2F5',
data: [
{
min: 0,
max: 100,
title:'单位: /%',
titleOffsetY:-5,
titleOffsetX:-5,
axisLineColor:'#F2F2F5'
}
]
},
extra: {
column: {
type: "stack",
width: 20,
activeBgColor: "#000000",
activeBgOpacity: 0.08,
labelPosition: "center"
}
}
});
setTimeout( ()=>{
// this.canvasToTempImage('level')
},2000)
},
canvasToTempImage(id){
uni.canvasToTempFilePath({
canvasId:id,
complete:(res)=>{
if (res.tempFilePath){
uni.getFileSystemManager().readFile({
filePath: res.tempFilePath,
encoding: 'base64',
success: res => {
let base64 = 'data:image/png;base64,' + res.data;
this.levelPath = base64
}
})
}
}
},this)
},
}
}
</script>
<style scoped lang="scss">
.consumLevel{
width:100%;
margin-top: 12px;
.level{
width: 100%;
height: 260px;
}
}
</style>

151
pages/commercialBINew/components/format/fillingDegree.vue Normal file
View File

@ -0,0 +1,151 @@
<template>
<div class="fillingDegree">
<div class="item">
<canvas class="fillDegree" canvas-id="fillDegree" id="fillDegree" @tap.stop="tap" @click.stop="handleChange('')"/>
<!-- <image v-if="fillDegreePath" class="fillDegree" :src="fillDegreePath"></image>-->
</div>
</div>
</template>
<script>
import uCharts from '@/components/u-charts.js';
var uChartsInstance = {};
export default {
name: "fillingDegree",
data() {
return {
width:0,
fillDegreePath:'',
selectIndex: 0,
dataList : [],
isTap:false,//判断是否走了tap
}
},
props: {
data: {
type: Object,
default: () => {}
}
},
watch: {
data: {
handler(value) {
this.handleCarData(value)
},
immediate: true
}
},
methods: {
handleChange(){
if (this.isTap){
this.isTap = false
}else{
this.$emit('handleChangeBandLevel',false)
}
},
tap(e){
uChartsInstance[e.target.id].showToolTip(e,{
formatter: (item, category, index, opts) =>{
this.selectIndex = opts.series[index].key
if (this.selectIndex){
this.$emit('handleChangeBandLevel',this.selectIndex)
}else{
this.$emit('handleChangeBandLevel',false)
}
this.isTap = true
return item.name;
}
});
uChartsInstance[e.target.id].touchLegend(e);
},
// 处理传入的数据
handleCarData(value) {
let res = value.result
let config = {
Abundant:value.Abundant
}
this.drawCharts('fillDegree', res ,config)
},
drawCharts(id, data,config) {
const ctx = uni.createCanvasContext(id, this);
let _this = this
let phoneInfo = uni.getStorageSync('phoneInfo')
this.width = phoneInfo.screenWidth - 32
uChartsInstance[id] = new uCharts({
type: "ring",
context: ctx,
width: _this.width,
height: 289,
series: data.series,
animation: false,
rotate: false,
rotateLock: false,
background: "#FFFFFF",
color: ["#1E80FF", "#00C2FF","#6B6FFF","#38C275","#F3BC1B","#ED6B5A","#FF9845","#74839D","#ACB9CD","#CAD0DA"],
padding: [5, 5, 5, 5],
dataLabel: false,
enableScroll: false,
title: {
name:config.Abundant?'盈足':'不盈足',
fontSize: 16,
color: "#341D00"
},
legend: {
show: true,
position: "right",
lineHeight: 25,
float: 'center'
},
extra: {
ring: {
ringWidth: 20,
activeOpacity: 0.5,
activeRadius: 10,
offsetAngle: -45,
labelWidth: 15,
border: false,
borderWidth: 3,
borderColor: "#FFFFFF"
}
}
});
setTimeout( ()=>{
// this.canvasToTempImage('fillDegree')
},2000)
},
canvasToTempImage(id){
uni.canvasToTempFilePath({
canvasId:id,
complete:(res)=>{
if (res.tempFilePath){
uni.getFileSystemManager().readFile({
filePath: res.tempFilePath,
encoding: 'base64',
success: res => {
let base64 = 'data:image/png;base64,' + res.data;
this.fillDegreePath = base64
}
})
}
}
},this)
},
}
}
</script>
<style scoped lang="scss">
.fillingDegree{
width: 100%;
margin-top: 12px;
.item{
width: 100%;
height: 280px;
.fillDegree{
width: 100%;
height: 100%;
}
}
}
</style>

99
pages/commercialBINew/components/guest/businessType.vue Normal file
View File

@ -0,0 +1,99 @@
<template>
<div class="businessType">
<canvas class="business" canvas-id="businessType" id="businessType" @tap="handleTap"/>
</div>
</template>
<script>
import uCharts from '@/components/u-charts.js';
var uChartsInstance = {};
export default {
name: "businessType",
data() {
return {
width:0
}
},
props: {
data: {
type: Array,
default: () => []
}
},
watch: {
data: {
handler(value) {
this.handleCarData(value)
},
immediate: true
}
},
methods: {
//点击事件
handleTap(e){
uChartsInstance[e.target.id].showToolTip(e,{
formatter: (item, category, index, opts) =>{
return item.name;
}
});
},
// 处理传入的数据
handleCarData(value) {
let res = {
series:value
}
this.drawCharts('businessType', res)
},
drawCharts(id, data) {
const ctx = uni.createCanvasContext(id, this);
let _this = this
let phoneInfo = uni.getStorageSync('phoneInfo')
this.width = phoneInfo.screenWidth - 32
uChartsInstance[id] = new uCharts({
type: "ring",
context: ctx,
width: _this.width,
height: 180,
series: data.series,
animation: false,
rotate: false,
rotateLock: false,
background: "#FFFFFF",
color: ["#1E80FF", "#00C2FF","#6B6FFF","#38C275","#74839D","#B8C7DE"],
padding: [5, 5, 5, 5],
dataLabel: false,
enableScroll: false,
legend: {
show: true,
position: "right",
lineHeight: 25,
float: 'center'
},
extra: {
ring: {
ringWidth: 20,
activeOpacity: 0.5,
activeRadius: 10,
offsetAngle: -45,
labelWidth: 15,
border: false,
borderWidth: 3,
borderColor: "#FFFFFF"
}
}
});
},
}
}
</script>
<style scoped lang="scss">
.businessType{
width: 100%;
.business{
width: 100%;
height: 170px;
}
}
</style>

115
pages/commercialBINew/components/guest/consumPrefer.vue Normal file
View File

@ -0,0 +1,115 @@
<template>
<div class="consumPrefer">
<canvas class="prefer" canvas-id="prefer" id="prefer" @tap="tap"/>
<!-- <image v-if="preferPath" class="prefer" :src="preferPath"></image>-->
</div>
</template>
<script>
import uCharts from '@/components/u-charts.js';
var uChartsInstance = {};
export default {
name: "consumPrefer",
data() {
return {
width:0,//手机宽度
preferPath:''//路径
}
},
props: {
data: {
type: Object,
default: () => {}
}
},
watch: {
data: {
handler(value) {
this.handleCarData(value)
},
immediate: true
}
},
methods: {
tap(e){
uChartsInstance[e.target.id].touchLegend(e);
},
// 处理传入的数据
handleCarData(value) {
let res = value
this.drawCharts('prefer', res)
},
drawCharts(id, data) {
const ctx = uni.createCanvasContext(id, this);
let _this = this
let phoneInfo = uni.getStorageSync('phoneInfo')
this.width = phoneInfo.screenWidth - 32
uChartsInstance[id] = new uCharts({
type: "radar",
context: ctx,
width: _this.width,
height: 294,
categories: data.categories,
series: data.series,
animation: false,
rotate: false,
rotateLock: false,
background: "#FFFFFF",
color: ["#1E80FF", "#00C2FF"],
padding: [5, 5, 5, 5],
dataLabel: false,
enableScroll: false,
legend: {
show: true,
position: "bottom",
lineHeight: 25,
float: 'center'
},
extra: {
radar: {
gridType: "radar",
gridColor: "#CCCCCC",
gridCount: 3,
opacity: 0.2,
max: data.max,
labelShow: true,
border: true
}
}
});
setTimeout( ()=>{
// this.canvasToTempImage('prefer')
},2000)
},
canvasToTempImage(id){
uni.canvasToTempFilePath({
canvasId:id,
complete:(res)=>{
if (res.tempFilePath){
uni.getFileSystemManager().readFile({
filePath: res.tempFilePath,
encoding: 'base64',
success: res => {
let base64 = 'data:image/png;base64,' + res.data;
this.preferPath = base64
}
})
}
}
},this)
},
}
}
</script>
<style scoped lang="scss">
.consumPrefer{
width: 100%;
height: 274px;
.prefer{
width: 100%;
height: 100%;
}
}
</style>

326
pages/commercialBINew/components/guest/consumptionLevel.vue Normal file
View File

@ -0,0 +1,326 @@
<template>
<div class="consumptionLevel">
<div class="gender">
<div class="top">
<image class="icon" src="https://eshangtech.com/ShopICO/ahyd-BID/commercial/man.svg"></image>
<p class="title">{{genderList[0].name}}</p>
</div>
<div class="progress">
<div class="small" v-if="genderList[0].small" :style="{background:'#CAD0DA',width:genderList[0].small + '%'}" @click="handleShow('man',0,genderList[0].small,$event)">{{genderList[0].small<16?'':genderList[0].small + '%'}}</div>
<div class="normal" v-if="genderList[0].normal" :style="{background:'#ACB9CD',width:(genderList[0].normal + '%'),left:`calc(${genderList[0].small}% + 2px)`}" @click="handleShow('man',1,genderList[0].normal,$event)">{{genderList[0].normal<16?'':genderList[0].normal+'%'}}</div>
<div class="big" v-if="genderList[0].big" :style="{background:'#1E80FF',left:`calc(${Number(genderList[0].small) +Number(genderList[0].normal) }% + 4px)`,width:genderList[0].big + '%'}" @click="handleShow('man',2,genderList[0].big,$event)">{{genderList[0].big<16?'':genderList[0].big + '%'}}</div>
</div>
<div class="meng" :style="position==='left'?`left:${positionWidth}`:`right:${positionWidth}`" v-if="isShowMan">{{manText}}</div>
<div class="imgKey">
<div style="margin: 0 auto;display: flex">
<div class="item">
<div class="icon" style="background:#CAD0DA"></div>
<p class="consume">低消费</p>
</div>
<div class="item">
<div class="icon" style="background:#ACB9CD"></div>
<p class="consume">普通消费</p>
</div>
<div class="item">
<div class="icon" style="background:#1E80FF"></div>
<p class="consume">高消费</p>
</div>
</div>
</div>
</div>
<div class="gender">
<div class="top">
<image class="icon" src="https://eshangtech.com/ShopICO/ahyd-BID/commercial/woman.svg"></image>
<p class="title">{{genderList[1].name}}</p>
</div>
<div class="progress">
<div class="small" v-if="genderList[1].small" :style="{background:'#C6D3D7',width:genderList[1].small + '%'}" @click="handleShow('woman',0,genderList[0].small,$event)">{{genderList[1].small<16?'':genderList[1].small + '%'}}</div>
<div class="normal" v-if="genderList[1].normal" :style="{background:'#AFC1C6',width:(genderList[1].normal + '%'),left:`calc(${genderList[1].small}% + 2px)`}" @click="handleShow('woman',1,genderList[0].normal,$event)">{{genderList[1].normal<16?'':genderList[1].normal+'%'}}</div>
<div class="big" v-if="genderList[1].big" :style="{background:'#00C2FF',left:`calc(${Number(genderList[1].small) +Number(genderList[1].normal) }% + 4px)`,width:genderList[1].big + '%'}" @click="handleShow('woman',2,genderList[0].big,$event)">{{genderList[1].big<16?'':genderList[1].big + '%'}}</div>
</div>
<div class="meng" :style="positionWoman==='left'?`left:${positionWidthWoman}`:`right:${positionWidthWoman}`" v-if="isShowWoman">{{womanText}}</div>
<div class="imgKey">
<div style="margin: 0 auto;display: flex">
<div class="item">
<div class="icon" style="background:#C6D3D7"></div>
<p class="consume">低消费</p>
</div>
<div class="item">
<div class="icon" style="background:#AFC1C6"></div>
<p class="consume">普通消费</p>
</div>
<div class="item">
<div class="icon" style="background:#00C2FF"></div>
<p class="consume">高消费</p>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: "consumptionLevel",
data() {
return {
genderList:[],//数据
list:[{name:'man',list:[false,false,false]},{name:'woman',list:[false,false,false]}],
position:'',//left 或者 right
positionWidth:'',// 定位百分比
isShowMan:false,//男性提示框
isShowWoman:false,//女性提示框
positionWoman:'',//left 或者 right
positionWidthWoman:'',// 定位百分比
womanText:'',//女性提示框文字
manText:'',//男性提示框文字
}
},
props: {
data: {
type: Array,
default: () => []
}
},
watch: {
data: {
handler(value) {
console.log('ssksjdks',value)
this.genderList = value
this.genderList.forEach(item=>{
item.showList = [false,false,false]
})
},
deep:true,
immediate: true
}
},
methods: {
handleShow(type,index,value,e){
let phoneInfo = uni.getStorageSync('phoneInfo')
let width = phoneInfo.screenWidth
let startWidth = width * 0.2
let endWidth = width * 0.6
let now = e.detail.x
if (type === 'man'){
this.isShowMan = true
if (index === 0){
this.manText = '低消费' + value + '%'
}else if (index === 1){
this.manText = '普通消费' + value + '%'
}else if (index === 2){
this.manText = '高消费' + value + '%'
}
if (now<startWidth){
this.position = 'left'
this.positionWidth = 0
}else if(now>startWidth && now<endWidth){
this.position = 'left'
this.positionWidth = `calc(${now}px - 16px)`
}else if(now>endWidth){
this.position = 'right'
this.positionWidth = 0
}
}else if(type==='woman'){
this.isShowWoman = true
if (index === 0){
this.womanText = '低消费' + value + '%'
}else if (index === 1){
this.womanText = '普通消费' + value + '%'
}else if (index === 2){
this.womanText = '高消费' + value + '%'
}
if (now<startWidth){
this.positionWoman = 'left'
this.positionWidthWoman = 0
}else if(now>startWidth && now<endWidth){
this.positionWoman = 'left'
this.positionWidthWoman = `calc(${now}px - 16px)`
}else if(now>endWidth){
this.positionWoman = 'right'
this.positionWidthWoman = 0
}
}
this.$forceUpdate()
}
}
}
</script>
<style scoped lang="scss">
.consumptionLevel{
width: 100%;
margin-top: 12px;
.gender{
width: 100%;
margin-bottom: 12px;
position: relative;
.top{
display: flex;
align-items: center;
.icon{
width: 16px;
height: 16px;
margin-right: 4px;
}
.title{
font-size: 14px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #160002;
line-height: 20px;
}
}
.progress{
width: 100%;
box-sizing: border-box;
height: 20px;
margin-top: 6px;
position: relative;
font-size: 12px;
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;
height: 100%;
position: absolute;
top: 0;
left: 0;
border-radius:0 2px 2px 0;
box-sizing: border-box;
text-indent: 0.25rem;
.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;
margin-right: 4px;
}
}
}
.normal{
display: flex;
align-items: center;
height: 100%;
position: absolute;
box-sizing: border-box;
text-indent: 0.25rem;
.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;
}
}
}
.small{
display: flex;
align-items: center;
height: 100%;
position: absolute;
box-sizing: border-box;
text-indent: 0.25rem;
border-radius:2px 0 0 2px;
.text{
position: absolute;
width: 130px;
height: 26px;
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;
}
}
}
}
.meng{
position: absolute;
display: inline-block;
padding: 0 5px;
z-index: 9;
top: 0;
background: rgba(0,0,0,0.6);
color:#fff;
border-radius: 2px;
}
.imgKey{
display: flex;
margin-top: 8px;
.item{
display: flex;
align-items: center;
margin-right: 12px;
.icon{
width: 12px;
height: 12px;
border-radius: 2px;
margin-right: 4px;
}
.consume{
font-size: 12px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #786B6C;
line-height: 18px;
}
}
}
}
}
</style>

369
pages/commercialBINew/components/guest/customerFirst.vue Normal file
View File

@ -0,0 +1,369 @@
<template>
<div class="main">
<div class="yesterday">
<div class="top">
<image class="icon" src="https://eshangtech.com/ShopICO/ahyd-BID/commercial/datePortrait.svg"></image>
<p class="title">昨日客单量</p>
</div>
<div class="bottom">
<div class="item">
<div class="top">
<p class="price">{{ info.TicketCount?info.TicketCount:'-' }}</p>
<view class="right" v-if="info.TicketCount">
<image class="arrowTop" :src="Number((info.TicketCount / info.TicketAvgCount)-1)>0?'https://eshangtech.com/ShopICO/ahyd-BID/index/addIcon.svg':'https://eshangtech.com/ShopICO/ahyd-BID/index/reduce.svg'"></image>
<text class="text">{{orderTransaction+'%'}}</text>
</view>
</div>
<p class="text">客单交易 <text class="unit">/笔</text></p>
</div>
<div class="item">
<div class="top">
<p class="price">{{ info.AvgTicketPrice?info.AvgTicketPrice:'-' }}</p>
<view class="right" v-if="info.AvgTicketPrice">
<image class="arrowTop" :src="Number((info.AvgTicketPrice / info.MonthAvgTicketPrice)-1)>0?'https://eshangtech.com/ShopICO/ahyd-BID/index/addIcon.svg':'https://eshangtech.com/ShopICO/ahyd-BID/index/reduce.svg'"></image>
<text class="text">{{orderAveragePrice+'%'}}</text>
</view>
</div>
<p class="text">客单均价 <text class="unit">/元</text></p>
</div>
<div class="item">
<div class="top">
<p class="price">{{ info.VehicleCount?info.VehicleCount:'-' }}</p>
<view class="right" v-if="addAreaCarNumber">
<image class="arrowTop" :src="((info.VehicleCount / info.MonthVehicleCount)-1)>0?'https://eshangtech.com/ShopICO/ahyd-BID/index/addIcon.svg':'https://eshangtech.com/ShopICO/ahyd-BID/index/reduce.svg'"></image>
<text class="text">{{addAreaCarNumber ? addAreaCarNumber + '%':'-' + '%'}}</text>
</view>
</div>
<p class="text">入区车辆 <text class="unit">/辆</text></p>
</div>
<div class="item">
<div class="top">
<p class="price">{{ info.AvgVehicleAmount ?info.AvgVehicleAmount :'-' }}</p>
<view class="right" v-if="oneCarPrice">
<image class="arrowTop" :src="Number((info.AvgVehicleAmount / info.MonthVehicleAmount)-1)>0?'https://eshangtech.com/ShopICO/ahyd-BID/index/addIcon.svg':'https://eshangtech.com/ShopICO/ahyd-BID/index/reduce.svg'"></image>
<text class="text">{{oneCarPrice?oneCarPrice + '%':'-' + '%'}}</text>
</view>
</div>
<p class="text">单车价值 <text class="unit">/元</text></p>
</div>
</div>
</div>
<div class="month">
<div class="top">
<image class="icon" src="https://eshangtech.com/ShopICO/ahyd-BID/commercial/change.svg"></image>
<p class="title">月均客单量</p>
</div>
<div class="bottom">
<div class="item">
<p class="price">{{ info.TicketAvgCount?info.TicketAvgCount:'-' }}</p>
<p class="text">客单交易 <text class="unit">/笔</text></p>
</div>
<div class="item">
<p class="price">{{ info.MonthAvgTicketPrice?info.MonthAvgTicketPrice:'-' }}</p>
<p class="text">客单均价 <text class="unit">/元</text></p>
</div>
<div class="item">
<p class="price">{{ info.MonthVehicleCount?info.MonthVehicleCount:'-' }}</p>
<p class="text">入区车辆 <text class="unit">/辆</text></p>
</div>
<div class="item">
<p class="price">{{ info.MonthVehicleAmount?info.MonthVehicleAmount:'-' }}</p>
<p class="text">单车价值 <text class="unit">/元</text></p>
</div>
</div>
<div class="progress">
<div class="box">
<div class="pro">
<div class="big" :style="{width:info.transactionLevel.HighConsumption_Rate +'%'}" @click="handleShow(0)">
<view class="meng" :style="Number(info.transactionLevel.HighConsumption_Rate)<10?'right: 0':'left:0'" v-if="genderList[0]">高消费: {{info.transactionLevel.HighConsumption_Count }}笔</view>
</div>
<div class="normal" :style="{width:info.transactionLevel.NormalConsumption_Rate +'%',left:info.transactionLevel.HighConsumption_Rate+'%'}" @click="handleShow(1)">
<view class="meng" :style="Number(info.transactionLevel.HighConsumption_Rate)<10?'left: 0':'right:0'" v-if="genderList[1]">普通消费: {{info.transactionLevel.NormalConsumption_Count }}笔</view>
</div>
<div class="small" @click="handleShow(2)" :style="{width:info.transactionLevel.LowConsumption_Rate +'%',left:(Number(info.transactionLevel.HighConsumption_Rate) + Number(info.transactionLevel.NormalConsumption_Rate))+'%'}">
<view class="meng" :style="Number(info.transactionLevel.LowConsumption_Rate)<10?'right: 0':'left:0'" v-if="genderList[2]">低消费: {{info.transactionLevel.LowConsumption_Count }}笔</view>
</div>
</div>
<div class="type">
<text class="item big">高消费 {{info.transactionLevel.HighConsumption_Rate?info.transactionLevel.HighConsumption_Rate:'-'}}%</text>
<text class="item normal">普通消费 {{info.transactionLevel.NormalConsumption_Rate?info.transactionLevel.NormalConsumption_Rate:'-'}}%</text>
<text class="item small">低消费 {{info.transactionLevel.LowConsumption_Rate?info.transactionLevel.LowConsumption_Rate:'-' }}%</text>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: "customerFirst",
data() {
return {
info:{
transactionLevel:{
HighConsumption_Rate:0,
NormalConsumption_Rate:0,
LowConsumption_Rate:0
}
},
genderList:[false,false,false],
addAreaCarNumber:'',//入区车辆增长
oneCarPrice:'',//单车价值
orderTransaction:'',
orderAveragePrice:''
}
},
props: {
data: {
type: Object,
default: () => {}
}
},
watch: {
data: {
handler(value) {
console.log('value111',value)
this.info = value
this.addAreaCarNumber = this.info.VehicleCount ? Math.abs((this.info.VehicleCount / this.info.MonthVehicleCount - 1)*100).toFixed(2):''
this.oneCarPrice = this.info.MonthVehicleAmount?Math.abs(((this.info.AvgVehicleAmount / this.info.MonthVehicleAmount) - 1) *100).toFixed(2):''
this.orderTransaction = this.info.TicketAvgCount? Math.abs((((this.info.TicketCount / this.info.TicketAvgCount) - 1) *100).toFixed(2)):'-'
this.orderAveragePrice = this.info.MonthAvgTicketPrice? Math.abs((((this.info.AvgTicketPrice / this.info.MonthAvgTicketPrice) - 1) *100).toFixed(2)):'-'
this.$forceUpdate()
},
deep:true
}
},
methods:{
handleShow(num){
let list = []
this.genderList.forEach(()=>{
list.push(false)
})
this.genderList = list
this.genderList[num] = true
}
}
}
</script>
<style scoped lang="scss">
.main{
width: 100%;
.yesterday,.month{
margin-top: 12px;
width: 100%;
box-sizing: border-box;
background: #F7F7F7;
border-radius: 4px;
padding: 12px;
.top{
display: flex;
.icon{
width: 18px;
height: 18px;
margin-right: 9px;
}
.title{
font-size: 14px;
font-family: PingFangSC-Semibold, PingFang SC;
font-weight: 600;
color: #160002;
line-height: 20px;
}
}
.bottom{
margin-top: 12px;
width: 100%;
display: flex;
flex-flow: wrap;
box-sizing: border-box;
.item{
width:50%;
padding-left: 26px;
box-sizing: border-box;
margin-bottom: 12px;
.price{
font-size: 16px;
font-family: DINAlternate-Bold, DINAlternate;
font-weight: bold;
color: #341D00;
line-height: 20px;
margin-bottom: 2px;
}
.top{
display: flex;
.price{
font-size: 16px;
font-family: DINAlternate-Bold, DINAlternate;
font-weight: bold;
color: #341D00;
line-height: 20px;
margin-bottom: 2px;
}
.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;
}
}
}
.text{
font-size: 14px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #786B6C;
line-height: 20px;
.unit{
font-size: 14px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #A69E9F;
line-height: 20px;
}
}
}
}
.progress{
width: calc(100% - 8px);
box-sizing: border-box;
padding-left: 26px;
margin-top: 12px;
.box{
width: 100%;
.pro{
width: 100%;
height: 16px;
border-radius: 2px 0 0 2px;
position: relative;
.big{
position: absolute;
height: 100%;
background: #1E80FF;
border-radius: 2px 0 0 2px;
.meng{
width: 110px;
height: 20px;
line-height: 20px;
position: absolute;
display: inline-block;
padding: 0 5px;
z-index: 9;
left: 0;top: -20px;
background: rgba(0,0,0,0.6);
color:#fff;
border-radius: 2px;
text-align: center;
}
}
.normal{
position: absolute;
height: 100%;
background: #ACB9CD;
border-radius: 2px 0 0 2px;
.meng{
width: 110px;
height: 20px;
line-height: 20px;
position: absolute;
display: inline-block;
padding: 0 5px;
z-index: 9;
right: 0;top: -20px;
background: rgba(0,0,0,0.6);
color:#fff;
border-radius: 2px;
text-align: center;
}
}
.small{
position: absolute;
height: 100%;
background: #CAD0DA;
border-radius: 2px 0 0 2px;
.meng{
width: 110px;
height: 20px;
line-height: 20px;
position: absolute;
display: inline-block;
padding: 0 5px;
z-index: 9;
right: 0;top: -20px;
background: rgba(0,0,0,0.6);
color:#fff;
border-radius: 2px;
text-align: center;
}
}
}
.type{
display: flex;
justify-content: space-between;
margin-top: 4px;
.item{
display: inline-block;
font-size: 12px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #786B6C;
line-height: 18px;
position: relative;
text-align: left;
padding-left: 8px;
}
.item:last-child{
margin-right: 0px;
}
.big:before{
content:'';
width: 4px;
height: 12px;
background: #1E80FF;
position: absolute;
left: 0;top: 50%;
transform: translateY(-50%);
}
.normal:before{
content:'';
width: 4px;
height: 12px;
background: #ACB9CD;
position: absolute;
left: 0;top: 50%;
transform: translateY(-50%);
}
.small:before{
content:'';
width: 4px;
height: 12px;
background: #CAD0DA;
position: absolute;
left: 0;top: 50%;
transform: translateY(-50%);
}
}
}
}
}
}
</style>

296
pages/commercialBINew/components/guest/customerSecond.vue Normal file
View File

@ -0,0 +1,296 @@
<template>
<div class="main">
<div class="pk">
<div class="gender">
<div class="left">
<p class="name">男</p>
<image class="icon" src="https://eshangtech.com/ShopICO/ahyd-BID/commercial/man.svg"></image>
</div>
<p class="rate">{{man}}%</p>
</div>
<image class="vs" src="https://eshangtech.com/ShopICO/ahyd-BID/commercial/vs.svg"></image>
<div class="gender">
<div class="right" style="float: right">
<image class="icon" src="https://eshangtech.com/ShopICO/ahyd-BID/commercial/woman.svg"></image>
<p class="name">女</p>
</div>
<p class="rate">{{woman}}%</p>
</div>
</div>
<div class="progress">
<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 class="sexRatio" canvas-id="gender" id="gender" @tap="tap"/>
<!-- <image class="sexRatio" v-if="customerSecondPath" :src="customerSecondPath"></image>-->
</div>
</div>
</template>
<script>
import uCharts from '@/components/u-charts.js';
var uChartsInstance = {};
export default {
name: "customerSecond",
data() {
return {
man:0,
woman:0,
width:0,//手机宽度
customerSecondPath:'',//路径
genderList:[false,false],
}
},
props: {
data: {
type: Object,
default: () => {}
}
},
watch: {
data: {
handler(value) {
this.handleCarData(value)
},
deep:true,
immediate:true,
}
},
methods:{
tap(e){
uChartsInstance[e.target.id].touchLegend(e);
},
handleShow(num){
let list = []
this.genderList.forEach(()=>{
list.push(false)
})
this.genderList = list
this.genderList[num] = true
},
// 处理传入的数据
handleCarData(value) {
this.man = value.man
this.woman = value.woman
let res = {
series: value.res
}
this.drawCharts('gender', res)
},
drawCharts(id, data) {
const ctx = uni.createCanvasContext(id, this);
let _this = this
let phoneInfo = uni.getStorageSync('phoneInfo')
this.width = phoneInfo.screenWidth - 70
uChartsInstance[id] = new uCharts({
type: "bubble",
context: ctx,
width: _this.width,
height: 240,
series: data.series,
animation: false,
rotate: false,
rotateLock: false,
background: "#FFFFFF",
color: ["#1E80FF", "#00C2FF"],
padding: [15, 5, 5, 5],
dataLabel: false,
enableScroll: false,
legend: {
show: true,
position: "bottom",
lineHeight: 25,
float: 'center'
},
xAxis: {
disableGrid: true,
gridType: "solid",
splitNumber: 5,
boundaryGap: "justify",
title:'年龄: /岁',
titleOffsetY: 15,
titleOffsetX: -30,
min: 10,
max: 60,
axisLineColor:'#F2F2F5'
},
yAxis: {
disableGrid: false,
gridType: "solid",
showTitle:true,
splitNumber:6,
gridColor:'#F2F2F5',
data: [
{
title:'单位: /元',
min: 0,
max: 120,
titleOffsetY:-5,
titleOffsetX:0,
fontColor:'#786B6C',
axisLineColor:'#F2F2F5'
}
]
},
extra: {
bubble: {
border: 1,
opacity: 0.25
}
}
});
setTimeout( ()=>{
// this.canvasToTempImage('gender')
},2000)
},
canvasToTempImage(id){
uni.canvasToTempFilePath({
canvasId:id,
complete:(res)=>{
if (res.tempFilePath){
uni.getFileSystemManager().readFile({
filePath: res.tempFilePath,
encoding: 'base64',
success: res => {
let base64 = 'data:image/png;base64,' + res.data;
this.customerSecondPath = base64
}
})
}
}
},this)
},
}
}
</script>
<style scoped lang="scss">
.main{
width: 100%;
margin-top: 12px;
.pk{
width: 100%;
padding: 0 16px;
box-sizing: border-box;
display: flex;
justify-content: space-between;
.vs{
width: 60px;
height: 36px;
}
.gender{
.left,.right{
display: flex;
align-items: center;
margin-bottom: 2px;
.name{
font-size: 14px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #160002;
line-height: 20px;
}
.icon{
width: 16px;
height: 16px;
}
}
.rate{
font-size: 18px;
font-family: DINAlternate-Bold, DINAlternate;
font-weight: bold;
color: #160002;
line-height: 22px;
}
}
}
.progress{
padding: 0 16px;
box-sizing: border-box;
width: calc(100% - 32px);
height: 14px;
margin-top: 8px;
position: relative;
margin-left: 16px;
.man{
height: 100%;
position: absolute;
left: 0;top: 0;
background: #1E80FF;
margin-right: 2px;
border-radius: 2px 0 0 2px;
.meng{
width: 90px;
line-height: 24px;
text-align: center;
height: 24px;
position: absolute;
display: inline-block;
padding: 0 5px;
z-index: 9;
left: 0;top: -20px;
background: rgba(0,0,0,0.6);
color:#fff;
border-radius: 2px;
}
}
.man:after{
position: absolute;
content:'';
width: 1px;
height: 100%;
background: #FFFFFF;
z-index:9;
right: 0;
top: 0;
}
.woman{
height: 100%;
position: absolute;
right: 0;top: 0;
background: #00C2FF;
border-radius: 0 2px 2px 0 ;
.meng{
width: 90px;
line-height: 24px;
text-align: center;
height: 24px;
position: absolute;
display: inline-block;
padding: 0 5px;
z-index: 9;
left: 0;top: -20px;
background: rgba(0,0,0,0.6);
color:#fff;
border-radius: 2px;
}
}
.woman:after{
position: absolute;
content:'';
width: 1px;
height: 100%;
background: #FFFFFF;
z-index:9;
left: 0;
top: 0;
}
}
.charts{
margin-top: 20px;
width: 100%;
height: 220px;
.sexRatio{
width: 100%;
height: 100%;
}
}
}
</style>

648
pages/commercialBINew/components/headerTop.vue Normal file
View File

@ -0,0 +1,648 @@
<template>
<view class="swiperBox" >
<view class="swiperItem">
<div class="header" :style="{backgroundImage: 'url('+ bgUrl +')'}">
<div class="headerTop" :style="{height:(menu.bottom + 6) + 'px',background:topBg}">
<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">{{title}}</text>-->
<div class="pickerTop" @click="handleGoSelectService">
<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">{{serviceArray[serviceIndex]}}</view>-->
<view class="uni-input">{{serverpartName}}</view>
<!-- <text class="area">{{area}}</text>-->
<text class="area" v-if="serviceInfo.Serverpart_ID">{{spregionTypeName}}</text>
<image class="rightArrow" src="https://eshangtech.com/ShopICO/ahyd-BID/commercial/rightArrow.svg"></image>
</view>
</view>
</div>
</div>
<div class="seize"></div>
</div>
</div>
<view class="sliderBox" :style="{top:(menu.bottom + 14) + 'px'}">
<SliderPage :index="pageIndex"/>
</view>
<div class="serviceArea" :style="{top : (menu.bottom + 14) + 'px'}" >
<!-- <div class="picker" @click="handleGoSelectService">-->
<!-- <div class="selectService">-->
<!-- <image class="img" src="https://eshangtech.com/ShopICO/ahyd-BID/commercial/fixed.svg"></image>-->
<!-- <view class="select">-->
<!-- <view class="content">-->
<!-- &lt;!&ndash; <view class="uni-input">{{serviceArray[serviceIndex]}}</view>&ndash;&gt;-->
<!-- <view class="uni-input">{{serverpartName}}</view>-->
<!-- &lt;!&ndash; <text class="area">{{area}}</text>&ndash;&gt;-->
<!-- <text class="area" v-if="serviceInfo.Serverpart_ID">{{spregionTypeName}}</text>-->
<!-- <image class="rightArrow" src="https://eshangtech.com/ShopICO/ahyd-BID/commercial/rightArrow.svg"></image>-->
<!-- </view>-->
<!-- </view>-->
<!-- </div>-->
<!-- </div>-->
<div class="detailBox" :style="{background: detailBoxBg}">
<div class="detailTop">
<div class="topLeft" :style="{background:topLeftBg,color:topLeftColor}">{{serviceTypeObj[serviceInfoObj.SERVERPART_TYPE]}}</div>
<div class="topRight" @click="handleGoServiceMessage">
<span class="rightText">查看更多</span>
<img class="moreIcon" src="https://eshangtech.com/ShopICO/ahyd-BID/commercial/rightArrow.svg"/>
</div>
</div>
<div class="functionList">
<div class="functionItem">
<image class="haveFun" :src="haveFun.car?haveIconObj.have:haveIconObj.noHave"/>
<image class="carIcon" :src="iconObj.car"/>
<text class="funText">司机之家</text>
</div>
<div class="functionItem">
<image class="haveFun" :src="haveFun.charge?haveIconObj.have:haveIconObj.noHave"/>
<image class="carIcon" :src="iconObj.charge"/>
<text class="funText">充电桩</text>
</div>
<div class="functionItem">
<image class="haveFun" :src="haveFun.bady?haveIconObj.have:haveIconObj.noHave"/>
<image class="carIcon" :src="iconObj.bady"/>
<text class="funText">母婴室</text>
</div>
<div class="functionItem">
<image class="haveFun" :src="haveFun.gusetHome?haveIconObj.have:haveIconObj.noHave"/>
<image class="carIcon" :src="iconObj.guestRoom"/>
<text class="funText">客房</text>
</div>
</div>
</div>
<!-- <div class="label">-->
<!-- <div :class="index===0?'labelItem labelItem0':index===1?'labelItem labelItem1':index===2?'labelItem labelItem2':index===3?'labelItem labelItem3':-->
<!-- index===4?'labelItem labelItem4':index===5?'labelItem labelItem5':''" v-for="(item,index) in labelList" :key="index"-->
<!-- :style="{background: 'linear-gradient('+bgColor+')'}"-->
<!-- >{{ item }}</div>-->
<!-- </div>-->
</div>
<!-- <div class="analyse" v-if="analyseText">-->
<!-- <text class="title">分析</text>-->
<!-- <text class="content">{{analyseText}}</text>-->
<!-- </div>-->
</div>
</view>
</view>
</template>
<script>
import request from '@/util/index.js'
import SliderPage from "./sliderPage.vue";
export default {
name: "headerTop",
components: {SliderPage},
props:{
menu:{
type: Object,
default: ()=>{}
},
bgUrl:{
type:String,
default: ""
},
bgColor:{
type:String,
default: ""
},
title:{
type:String,
default: ""
},
topBg:{
type:String,
default: ""
},
serverpartName:{
type:String,
deafault:''
},
spregionTypeName:{
type:String,
deafault:''
},
page:{
type:String,
default:''
},
serviceInfo:{
type:Object,
default:()=>{}
},
backType:{
type:String,
default:''
},
analyseInfo:{
type:Object,
default:()=>{}
},
iconObj:{
type:Object,
default:{
car:'',
charge:'',
bady:'',
guestRoom:''
}
},
haveIconObj:{
type:Object,
default:{
have:'',
noHave:'',
}
},
topLeftBg:{
type:String,
default:''
},
topLeftColor:{
type:String,
default:''
},
detailBoxBg:{
type:String,
default:''
},
haveFun:{
type:Object,
default:{
car:false,
charge:false,
bady:false,
gusetHome:false
}
},
serviceInfoObj:{
type:Object,
default:()=>{}
},
serviceTypeObj:{
type:Object,
default:()=>{}
},
pageType:{
type:Number,
default:0
},
pageIndex:{
type:Number,
default:0
}
},
data() {
return {
labelList:[],
analyseText:'',
currentSwiper:1,
carSwiperList:['previous','','next'],
goObj:{
1000:{
previous:'/pages/commercialBINew/carPortrait',
next:'/pages/commercialBI/managePortrait'
},
2000:{
previous:'/pages/commercialBI/guestPortrait',
next:'/pages/commercialBI/businessPortrait'
},
3000:{
previous:'/pages/commercialBI/managePortrait',
next:'/pages/commercialBI/formatPortraitBI'
},
4000:{
previous:'/pages/commercialBI/businessPortrait',
next:`/pages/examine/detail?type=${1}`
},
}
}
},
watch:{
analyseInfo:{
handler(value){
//获得标签
this.getLabelDetail()
},
immediate:true,
deep:true
}
},
// onLoad(){
// this.getLabelDetail()
// },
methods:{
handleChangeCurrent(){
this.currentSwiper = 1
},
// 滚动轮播图
changeSwiper(e){
console.log('e',e)
this.currentSwiper = e.detail.current
let value = this.carSwiperList[Number(e.detail.current)]
if (value==='previous'){
uni.redirectTo({
url:this.goObj[this.pageType].previous
})
}else if(value==='next'){
uni.redirectTo({
url:this.goObj[this.pageType].next
})
}
},
// 点击查看更多跳转
handleGoServiceMessage(){
this.$util.toNextRoute('navigateTo', `/pages/map/detail`)
},
//获得标签
async getLabelDetail(){
let storeTime = uni.getStorageSync('lastDay')
let storeServiceInfo = uni.getStorageSync('currentService')
//六个标签
let req = {
SearchParameter:{
STATISTICS_DATE:storeTime,
ANALYSISINS_TYPE:this.analyseInfo.analysisins_type,
ANALYSISINS_FORMAT:1000,
ANALYSISINS_STATE:1,
SERVERPART_ID:storeServiceInfo.Serverpart_ID,
},
PageIndex:1,
PageSize:10
}
//分析的文字
let reqText = {
SearchParameter:{
STATISTICS_DATE:storeTime,
ANALYSISINS_TYPE:this.analyseInfo.analysisins_type,
ANALYSISINS_FORMAT:2000,
ANALYSISINS_STATE:1,
SERVERPART_ID:storeServiceInfo.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:''
},
//返回上一级s
handleBack(){
if (this.backType==='userCenter'){
uni.switchTab({
url: '/pages/userCenter/userCenter'
})
}else{
uni.switchTab({
url: '/pages/index/index'
})
}
},
//点击跳转服务区
handleGoSelectService(){
uni.navigateTo({
url:`/pages/map/index?page=${this.page}&chartType=${true}&serviceInfo=${JSON.stringify(this.serviceInfo)}`
})
}
}
}
</script>
<style scoped lang="scss">
.swiperBox{
width: 100%;
height: 648rpx;
.swiperItem{
width: 100%;
height: 648rpx;
.header{
width: 100%;
height: 648rpx;
//height: calc(1.056 * 100vw);
box-sizing: border-box;
position: relative;
padding: 0 16px;
background-repeat: no-repeat;
//background-size: cover;
background-size: 100% 100%;
.headerTop{
width: 100vw;
position: fixed;
top: 0;
left: 0;
z-index:99999;
.box{
padding: 0 16px;
position: absolute;
box-sizing: border-box;
width: 100%;
display: flex;
align-items: center;
transform: translateY(-50%);
.icon{
width: 24px;
height: 24px;
.img{
width: 100%;
height: 100%;
}
}
.pickerTop{
margin-left: 16rpx;
.selectService{
display: flex;
align-items: center;
.img{
width: 40px;
height: 40px;
z-index: 2;
}
.select{
min-width: 174px;
height: 32px;
background: #F8F8FA;
border-radius: 0 16px 16px 0;
transform: translateX(-20px);
box-sizing: border-box;
padding-left: 25px;
padding-right: 25px;
display: flex;
align-items: center;
position: relative;
.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;
height: 40px;
line-height: 40px;
}
.area{
font-size: 14px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #786B6C;
line-height: 40px;
margin-left: 4px;
}
.rightArrow{
width: 24px;
height: 12px;
position: absolute;
right: 0px;
}
}
}
}
}
.title{
font-size: 36rpx;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 600;
color: #1C2130;
line-height: 56rpx;
}
.seize{
width: 24px;
height: 24px;
}
}
}
.sliderBox{
width: 100%;
position: absolute;
left: 0;
box-sizing: border-box;
padding: 0 16rpx;
z-index:9;
}
.serviceArea{
width: calc(100% - 32px);
position: absolute;
box-sizing: border-box;
.picker{
.selectService{
display: flex;
align-items: center;
.img{
width: 40px;
height: 40px;
z-index: 2;
}
.select{
min-width: 174px;
height: 32px;
background: #F8F8FA;
border-radius: 0 16px 16px 0;
transform: translateX(-20px);
box-sizing: border-box;
padding-left: 25px;
padding-right: 25px;
display: flex;
align-items: center;
position: relative;
.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;
height: 40px;
line-height: 40px;
}
.area{
font-size: 14px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #786B6C;
line-height: 40px;
margin-left: 4px;
}
.rightArrow{
width: 24px;
height: 12px;
position: absolute;
right: 0px;
}
}
}
}
}
.detailBox{
width: 340rpx;
height: 312rpx;
border-radius: 16rpx;
margin-top: 72rpx;
box-sizing: border-box;
padding: 24rpx 32rpx;
.detailTop{
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
.topLeft{
background: linear-gradient(180deg, rgba(49, 144, 255, 0.2) 0%, rgba(22, 87, 255, 0.2) 100%);
border-radius: 8rpx;
padding: 0 16rpx;
font-size: 28rpx;
font-family: PingFangSC, PingFang SC;
font-weight: 400;
color: #1E67FF;
line-height: 40rpx;
}
.topRight{
display: flex;
align-items: center;
.rightText{
font-size: 28rpx;
font-family: PingFangSC, PingFang SC;
font-weight: 400;
color: #A69E9F;
line-height: 40rpx;
}
.moreIcon{
width: 24rpx;
height: 24rpx;
margin-left: 4rpx;
}
}
}
.functionList{
.functionItem{
margin-top: 16rpx;
display: flex;
align-items: center;
.haveFun{
width: 32rpx;
height: 32rpx;
margin-right: 18rpx;
}
.carIcon{
width: 32rpx;
height: 32rpx;
margin-right: 4rpx;
}
.funText{
font-size: 28rpx;
font-family: PingFangSC, PingFang SC;
font-weight: 400;
color: #6C737A;
line-height: 40rpx;
}
}
}
}
.label{
width: calc(60% + 20px);
height: 127px;
position: relative;
margin-top: 44px;
.labelItem{
position: absolute;
font-size: 16px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #FFFFFF;
line-height: 22px;
border-radius: 4px 4px 0 4px;
padding: 4px 12px;
}
.labelItem0{
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
z-index:9;
}
.labelItem1{
top: 30%;
left: 5%;
z-index:8;
opacity: 0.8;
}
.labelItem2{
right: 0;
top: 30%;
opacity: 0.7;
}
.labelItem3{
top: 10%;
left: 50%;
transform: translateX(-50%);
opacity: 0.6;
}
.labelItem4{
bottom: 20%;
left: 10%;
opacity: 0.5;
}
.labelItem5{
bottom: 20%;
right: 20%;
opacity: 0.4;
}
}
}
.analyse{
position: absolute;
bottom: 16px;
width: calc(100vw - 32px);
height: 48px;
box-sizing: border-box;
padding: 6px 12px;
background: #fff;
border-radius: 4px;
display: flex;
.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;
}
}
}
}
}
</style>

81
pages/commercialBINew/components/manager/contractGuarantee.vue Normal file
View File

@ -0,0 +1,81 @@
<template>
<div class="contractGuarantee">
<div class="top">
<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>
</div>
</div>
</template>
<script>
export default {
name: "contractGuarantee",
data() {
return {
obj:{
}
}
},
props: {
data: {
type: Object,
default: () => {}
}
},
watch: {
data: {
handler(value) {
this.obj = value
}
}
},
methods:{
}
}
</script>
<style scoped lang="scss">
.contractGuarantee{
width: 100%;
margin-top: 12px;
.top{
display: flex;
align-content: center;
justify-content: space-between;
margin-bottom: 4px;
.title{
font-size: 14px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #786B6C;
line-height: 20px;
}
.value{
font-size: 16px;
font-family: DINAlternate-Bold, DINAlternate;
font-weight: bold;
color: #150002;
line-height: 20px;
}
}
.progress{
width: 100%;
height: 14px;
background: #E5E8EF;
border-radius: 4px;
position: relative;
.success{
position: absolute;
left: 0;top: 0;
height: 100%;
background: #1E80FF;
border-radius: 0 2px 2px 0;
}
}
}
</style>

243
pages/commercialBINew/components/manager/moneyCompare.vue Normal file
View File

@ -0,0 +1,243 @@
<template>
<div class="moneyCompare">
<canvas class="compare" canvas-id="compare" id="compare" @tap="tap"/>
<!-- <image v-if="comparePath" class="compare" :src="comparePath"></image>-->
</div>
</template>
<script>
import uCharts from '@/components/u-charts.js';
var uChartsInstance = {};
export default {
name: "moneyCompare",
data() {
return {
width:0,
comparePath:'',
dataList: [],
selectIndex:0
}
},
props: {
data: {
type: Object,
default: () => {}
}
},
watch: {
data: {
handler(value) {
this.comparePath = ''
this.dataList = value
this.selectIndex = value.type
this.handleCarData(value)
},
immediate: true,
deep: true
}
},
methods: {
tap(e){
uChartsInstance[e.target.id].showToolTip(e, {
formatter: (item, category, index, opts) => {
const date = new Date()
let m = date.getMonth()
if (index >m){
if (this.selectIndex===0){
if (item.name === '工作日平均'){
return item.name + "：" + item.data + '万元'
}else if(item.name === '周末平均'){
return item.name + "：" + item.data + '万元'
}else {
return item.name + "：" + item.data + '万元'
}
}else if(this.selectIndex === 1){
if (item.name === '工作日平均'){
return item.name + "：" + this.$util.noDecimal(item.data) + '笔'
}else if(item.name === '周末平均'){
return item.name + "：" + this.$util.noDecimal(item.data) + '笔'
}else {
return item.name + "：" +this.$util.noDecimal(item.data) + '笔'
}
}else if(this.selectIndex === 2){
if (item.name === '工作日平均'){
return item.name + "：" + item.data + '元'
}else if(item.name === '周末平均'){
return item.name + "：" + item.data + '元'
}else {
return item.name + "：" + item.data + '元'
}
}
}else{
if (this.selectIndex===0){
if (item.name === '工作日平均'){
return item.name + "：" + item.data + '万元，' + '较上月：' + opts.series[0].qoqAdd[index] + '%'
}else if(item.name === '周末平均'){
return item.name + "：" + item.data + '万元，' + '较工作日：'+ opts.series[1].qoqAdd[index] + '%'
}else {
// 判断有节假日就显示括号 没有就不显示
if (opts.series[2].holiday[index][1]){
return item.name + "：" + item.data + '万元' + '(' + opts.series[2].holiday[index][1] + ')'
}else{
return item.name + "：" + item.data + '万元'
}
}
}else if (this.selectIndex === 1){
if (item.name === '工作日平均'){
return item.name + "：" + this.$util.noDecimal(item.data) + '笔，' + '较上月：' + opts.series[0].qoqAdd[index] + '%'
}else if(item.name === '周末平均'){
return item.name + "：" + this.$util.noDecimal(item.data) + '笔，' + '较工作日：'+ opts.series[1].qoqAdd[index] + '%'
}else {
if (opts.series[2].holiday[index][1]){
return item.name + "：" + this.$util.noDecimal(item.data) + '笔' + '(' + opts.series[2].holiday[index][1] + ')'
}else{
return item.name + "：" + this.$util.noDecimal(item.data) + '笔'
}
}
}else if(this.selectIndex === 2){
if (item.name === '工作日平均'){
return item.name + "：" + item.data + '元，' + '较上月：' + opts.series[0].qoqAdd[index] + '%'
}else if(item.name === '周末平均'){
return item.name + "：" + item.data + '元，' + '较工作日：'+ opts.series[1].qoqAdd[index] + '%'
}else {
if (opts.series[2].holiday[index][1]){
return item.name + "：" + item.data + '元' + '(' + opts.series[2].holiday[index][1] + ')'
}else{
return item.name + "：" + item.data + '元'
}
}
}
// if (this.selectIndex===0){
// if (item.name === '平日平均'){
// return item.name + ":" + this.dataList.normal[0].data[index] + '元';
// }else if(item.name === '周末平均'){
// return item.name + ":" + this.dataList.normal[1].data[index] + '元';
// }else if(item.name === '节假日平均'){
// return item.name + ":" + this.dataList.normal[2].data[index] + '元';
// }
// } else{
// return item.name + ":" + item.data
// }
}
}
});
uChartsInstance[e.target.id].touchLegend(e);
},
// 处理传入的数据
handleCarData(value) {
console.log('1111',value)
let res = value
let max = 0
value.series.forEach(item=>{
item.data.forEach(subItem=>{
if (max < Number(subItem)){
max = Number(subItem)
}
})
})
console.log('max',max)
let config = {
max:this.getSplitNumber(max)
}
this.drawCharts('compare', res,config)
},
getSplitNumber(value){
if (value === 0){
return 5
}else{
let sum = Number(value) + Number(value) *0.2
return Number((sum / 4).toFixed(0)) * 4
}
},
drawCharts(id, data,config) {
const ctx = uni.createCanvasContext(id, this);
let _this = this
let phoneInfo = uni.getStorageSync('phoneInfo')
this.width = phoneInfo.screenWidth
uChartsInstance[id] = new uCharts({
type: "column",
context: ctx,
width: _this.width,
height: 208,
categories: data.categories,
series: data.series,
animation: false,
rotate: false,
rotateLock: false,
background: "#FFFFFF",
color: ["#1E80FF", "#00B6FF","#ACB9CD"],
padding: [15, 40, 5, 0],
dataLabel: false,
enableScroll: false,
legend: {
show: true,
position: "bottom",
lineHeight: 25,
float: 'center'
},
xAxis: {
disableGrid: true,
axisLineColor:'#F2F2F5'
},
yAxis: {
showTitle:false,
splitNumber:4,
gridColor:'#F2F2F5',
data: [
{
min: 0,
max:config.max,
titleOffsetX:15,
titleOffsetY:-5,
fontSize:12,
axisLineColor:'#F2F2F5'
}
],
},
extra: {
column: {
type: "group",
width: 5,
seriesGap:4,
activeBgColor: "#000000",
activeBgOpacity: 0.08,
barBorderRadius:[3,3,0,0]
}
}
});
setTimeout( ()=>{
// this.canvasToTempImage('compare')
},2000)
},
canvasToTempImage(id){
uni.canvasToTempFilePath({
canvasId:id,
complete:(res)=>{
if (res.tempFilePath){
uni.getFileSystemManager().readFile({
filePath: res.tempFilePath,
encoding: 'base64',
success: res => {
let base64 = 'data:image/png;base64,' + res.data;
this.comparePath = base64
}
})
}
}
},this)
},
}
}
</script>
<style scoped lang="scss">
.moneyCompare{
width: 100%;
.compare{
width: calc(100vw - 32px);
height: 200px;
}
}
</style>

326
pages/commercialBINew/components/manager/revenueAnalysis.vue Normal file
View File

@ -0,0 +1,326 @@
<template>
<div class="revenueAnalysisMain">
<div class="revenueAnalysis">
<div class="revenueTop" @click="handleRevenueDetail">
<div class="revenueTopLeft">
<image class="revenueLogo" src="https://eshangtech.com/ShopICO/ahyd-BID/newCommercialBI/managerLogo.svg"/>
<div class="revenueTopMoney">
<div class="moneyBox">
<text class="text">{{dataInfo.CashPay}}</text>
<image class="moneyIcon" src="https://eshangtech.com/ShopICO/ahyd-BID/newCommercialBI/managerGood.svg"/>
</div>
<text class="labelText">实收总额<text class="labelUnit">/元</text></text>
</div>
</div>
<div class="revenueTopRight" v-if="dataInfo.comparePlan">
<span class="addText">{{dataInfo.comparePlan>0?'+'+dataInfo.comparePlan+'%':dataInfo.comparePlan<0?'-'+dataInfo.comparePlan+'%':'-'}}</span>
<span class="addType">比计划</span>
</div>
</div>
<div class="revenueDetailList">
<div class="revenueDetailItem">
<text class="itemValue">{{dataInfo.Different_Price_More}}</text>
<text class="itemLabel">长款金额<text class="itemUnit">/元</text></text>
</div>
<div class="revenueDetailItem">
<text class="itemValue">{{dataInfo.Different_Price_Less}}</text>
<text class="itemLabel">短款金额<text class="itemUnit">/元</text></text>
</div>
<div class="revenueDetailItem">
<text class="itemValue">{{dataInfo.TotalOffAmount}}</text>
<text class="itemLabel">优惠金额<text class="itemUnit">/元</text></text>
</div>
<div class="revenueDetailItem" style="margin-top: 32rpx">
<text class="itemValue">{{dataInfo.TicketCount}}</text>
<text class="itemLabel">客单数量<text class="itemUnit">/笔</text></text>
</div>
<div class="revenueDetailItem" style="margin-top: 32rpx">
<text class="itemValue">{{dataInfo.TotalCount}}</text>
<text class="itemLabel">商品出售<text class="itemUnit">/件</text></text>
</div>
<div class="revenueDetailItem" style="margin-top: 32rpx">
<text class="itemValue">{{dataInfo.average}}</text>
<text class="itemLabel">商品均价<text class="itemUnit">/元</text></text>
</div>
</div>
<!-- <div class="item">-->
<!-- <image class="icon" src="https://eshangtech.com/ShopICO/ahyd-BID/commercial/agreement.svg"></image>-->
<!-- <div class="info" style="margin-bottom: 24px;">-->
<!-- <p class="title">合同总金额<text class="unit">/万元</text></p>-->
<!-- <p class="value">{{dataInfo.ContractProfitLoss}}</p>-->
<!-- </div>-->
<!-- </div>-->
<!-- <div class="item" style="margin-bottom: 24px;">-->
<!-- <image class="icon" src="https://eshangtech.com/ShopICO/ahyd-BID/commercial/shopNumber.svg"></image>-->
<!-- <div class="info">-->
<!-- <p class="title">店铺数量<text class="unit">/个</text></p>-->
<!-- <p class="value">{{dataInfo.ShopCount}}</p>-->
<!-- </div>-->
<!-- </div>-->
<!-- <div class="item">-->
<!-- <image class="icon" src="https://eshangtech.com/ShopICO/ahyd-BID/commercial/add.svg"></image>-->
<!-- <div class="info">-->
<!-- <p class="title">欠款金额<text class="unit">/万元</text></p>-->
<!-- <p class="value">{{dataInfo.SalesPerSquareMeter}}</p>-->
<!-- </div>-->
<!-- </div>-->
<!-- <div class="item">-->
<!-- <image class="icon" src="https://eshangtech.com/ShopICO/ahyd-BID/commercial/overShop.svg"></image>-->
<!-- <div class="info">-->
<!-- <p class="title">半年到期合同<text class="unit">/个</text></p>-->
<!-- <p class="value">{{dataInfo.ExpiredShopCount}}</p>-->
<!-- </div>-->
<!-- </div>-->
</div>
<!-- <div class="list" v-if="id">-->
<!--&lt;!&ndash; <p class="bigTitle" v-if="dataInfo.ContractList.length>0">即将到期合同列表: </p>&ndash;&gt;-->
<!-- <div class="item" v-for="(item,index) in dataInfo.ContractList" :key="index">-->
<!-- <div class="title">{{item.name}}</div>-->
<!-- <div class="value">{{item.value}}到期</div>-->
<!-- </div>-->
<!-- </div>-->
</div>
</template>
<script>
export default {
name: "revenueAnalysis",
data() {
return {
dataInfo:{},
}
},
props: {
data: {
type: Object,
default: () => {}
},
id:{
type:String,
default:''
}
},
watch: {
data: {
handler(value) {
this.dataInfo = JSON.parse(JSON.stringify(value))
this.dataInfo.CashPay = this.$util.fmoney(this.dataInfo.CashPay,2)
this.dataInfo.Different_Price_More = this.$util.fmoney(this.dataInfo.Different_Price_More,2)
this.dataInfo.Different_Price_Less = this.$util.fmoney(this.dataInfo.Different_Price_Less,2)
this.dataInfo.TotalOffAmount = this.$util.fmoney(this.dataInfo.TotalOffAmount,2)
this.dataInfo.TicketCount = this.$util.fmoney(this.dataInfo.TicketCount,2)
this.dataInfo.TotalCount = this.$util.fmoney(this.dataInfo.TotalCount,2)
this.dataInfo.average = value.TicketCount? this.$util.fmoney((Number(value.CashPay) / Number(value.TicketCount)),2):'0.00'
// this.dataInfo.ContractProfitLoss = this.$util.fmoney(this.dataInfo.ContractProfitLoss)
// this.dataInfo.SalesPerSquareMeter = this.$util.fmoney(this.dataInfo.SalesPerSquareMeter)
}
},
deep:true
},
methods: {
handleRevenueDetail() {
let lastDay = uni.getStorageSync('lastDay')
let date = new Date(lastDay)
let y = date.getFullYear()
let m = date.getMonth() + 1
if (m < 10) {
m = '0' + m
}
console.log('lastDay',lastDay)
let currentService = uni.getStorageSync('currentService')
this.$util.toNextRoute('navigateTo',`/pages/operatingStatements/detail?BusinessTypeValue=0&SettlementModeValue=0&et=${lastDay}&id=${currentService.Serverpart_ID}&pcode=340000&searchKey=MerchantName,Brand,Shop,Serverpart&searchValue=&st=${y}-${m}-01`)
// BusinessTypeValue: "0"
// SettlementModeValue: "0"
// et: "2023-12-18"
// id: "489"
// pcode: "340000"
// searchKey: "MerchantName,Brand,Shop,Serverpart"
// searchValue: ""
// st: "2023-12-01"
}
}
}
</script>
<style scoped lang="scss">
.revenueAnalysisMain{
.revenueAnalysis{
width: 100%;
background: #FAF9FC;
border-radius: 16rpx;
padding: 32rpx 24rpx;
box-sizing: border-box;
display: flex;
flex-flow: wrap;
margin-top: 12px;
.revenueTop{
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
.revenueTopLeft{
display: flex;
height: 88rpx;
.revenueLogo{
width: 88rpx;
height: 88rpx;
margin-right: 16rpx;
}
.revenueTopMoney{
display: flex;
flex-direction: column;
justify-content: space-between;
height: 88rpx;
.moneyBox{
height: 48rpx;
.text{
font-size: 40rpx;
font-family: DINAlternate, DINAlternate;
font-weight: bold;
color: #160002;
line-height: 48rpx;
}
.moneyIcon{
width: 32rpx;
height: 32rpx;
margin-left: 12rpx;
}
}
.labelText{
font-size: 28rpx;
font-family: PingFangSC, PingFang SC;
font-weight: 400;
color: #786B6C;
line-height: 40rpx;
.labelUnit{
font-size: 28rpx;
font-family: PingFangSC, PingFang SC;
font-weight: 400;
color: #A69E9F;
line-height: 40rpx;
margin-left: 4rpx;
}
}
}
}
.revenueTopRight{
height: 88rpx;
display: flex;
flex-direction: column;
align-items: flex-end;
justify-content: space-between;
.addText{
font-size: 40rpx;
font-family: DINAlternate, DINAlternate;
font-weight: bold;
color: #E83944;
line-height: 48rpx;
}
.addType{
font-size: 28rpx;
font-family: PingFangSC, PingFang SC;
font-weight: 400;
color: #A69E9F;
line-height: 40rpx;
}
}
}
.revenueDetailList{
width: 100%;
margin-top: 48rpx;
.revenueDetailItem{
display: inline-block;
width: calc(100% / 3);
.itemValue{
font-size: 28rpx;
font-family: DINAlternate, DINAlternate;
font-weight: bold;
color: #341D00;
line-height: 40rpx;
}
.itemLabel{
display: block;
font-size: 28rpx;
font-family: PingFangSC, PingFang SC;
font-weight: 400;
color: #786B6C;
line-height: 40rpx;
.itemUnit{
font-size: 28rpx;
font-family: PingFangSC, PingFang SC;
font-weight: 400;
color: #A69E9F;
line-height: 40rpx;
margin-left: 4rpx;
}
}
}
}
.item{
width: 50%;
display: flex;
.icon{
width: 20px;
height: 20px;
margin-right: 8px;
margin-top: 4px;
}
.info{
font-size: 14px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #160002;
line-height: 20px;
.unit{
font-size: 14px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #A69E9F;
line-height: 20px;
margin-left: 2px;
}
}
.value{
font-size:16px;
font-family: DINAlternate-Bold, DINAlternate;
font-weight: bold;
color: #341D00;
line-height: 20px;
margin-top: 8px;
}
}
}
.list{
margin-top: 12px;
.bigTitle{
font-size: 16px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 600;
color: #160002;
}
.item{
width: 100%;
display: flex;
.title{
flex: 1;
font-size: 14px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #160002;
line-height: 20px;
}
.value{
font-size: 14px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #160002;
line-height: 20px;
text-align: right;
}
}
}
}
</style>

151
pages/commercialBINew/components/manager/revenueTrends.vue Normal file
View File

@ -0,0 +1,151 @@
<template>
<div class="revenueTrends">
<canvas class="trends" canvas-id="trends" id="trends" @tap="handleTap"/>
</div>
</template>
<script>
import uCharts from '@/components/u-charts.js';
var uChartsInstance = {};
export default {
name: "revenueTrends",
data() {
return {
trendsPath:'',
}
},
props: {
data: {
type: Object,
default: () => {}
}
},
watch: {
data: {
handler(value) {
this.trendsPath = ''
this.handleCarData(value)
},
immediate: true
}
},
methods: {
handleTap(e){
uChartsInstance[e.target.id].showToolTip(e,{
formatter: (item, category, index, opts) => {
const date = new Date()
let month = date.getMonth() + 1
if (item.name === '今年'){
if (index + 1 <= month){
return item.name + ":" + item.data + ',' + `同比增长${((opts.series[0].data[index] - opts.series[1].data[index]) /opts.series[1].data[index] * 100).toFixed(2)}%`;
}else{
return item.name + ":" + item.data
}
}else{
return item.name + ":" + item.data;
}
}
});
uChartsInstance[e.target.id].touchLegend(e);
},
// 处理传入的数据
handleCarData(value) {
let res = value
this.drawCharts('trends', res)
},
getNumber(value){
let number = value / 40
number = Math.ceil(number)
return number * 40
},
drawCharts(id, data) {
const ctx = uni.createCanvasContext(id, this);
let _this = this
let phoneInfo = uni.getStorageSync('phoneInfo')
this.width = phoneInfo.screenWidth - 16
uChartsInstance[id] = new uCharts({
type: "area",
context: ctx,
width: _this.width ,
height: 213,
categories: data.categories,
series: data.series,
animation: false,
rotate: false,
rotateLock: false,
background: "#FFFFFF",
color: ["#1E80FF","#00B6FF"],
padding: [15, 15, 5, 5],
dataLabel: false,
enableScroll: false,
legend: {
show: true,
position: "bottom",
lineHeight: 25,
float: 'center'
},
xAxis: {
disableGrid: true,
axisLineColor:'#F2F2F5'
},
yAxis: {
splitNumber:4,
showTitle:false,
gridColor:'#F2F2F5',
data:[
{
min:0,
max:_this.getNumber(data.max),
titleOffsetY:-5,
titleOffsetX:-5,
fontSize:12,
axisLineColor:'#F2F2F5'
}
]
},
extra: {
area: {
type: "curve",
opacity: 0.8,
addLine: true,
width: 2,
gradient: true,
activeType: "hollow"
}
}
});
setTimeout( ()=>{
// this.canvasToTempImage('trends')
},2000)
},
canvasToTempImage(id){
uni.canvasToTempFilePath({
canvasId:id,
complete:(res)=>{
if (res.tempFilePath){
uni.getFileSystemManager().readFile({
filePath: res.tempFilePath,
encoding: 'base64',
success: res => {
let base64 = 'data:image/png;base64,' + res.data;
this.trendsPath = base64
}
})
}
}
},this)
},
}
}
</script>
<style scoped lang="scss">
.revenueTrends{
width: 100%;
.trends{
width: calc(100vw - 32px);
height: 208px;
}
}
</style>

61
pages/commercialBINew/components/noData.vue Normal file
View File

@ -0,0 +1,61 @@
<template>
<div class="main">
<image :class="type==='index'?'typeImg':'img'" src="https://eshangtech.com/ShopICO/ahyd-BID/commercial/noData.svg"></image>
<p class="text" v-if="type!=='car'">抱歉,数据为第三方接口传输，无法进行画像分析</p>
<p class="text" v-else>抱歉,第三方数据未传,无法分析</p>
</div>
</template>
<script>
export default {
name: "noData",
data(){
return {
}
},
props:{
type:{
type:String,
default:''
}
},
onLoad(query){
if (query.type){
this.type = 'index'
}
},
methods:{
}
}
</script>
<style scoped lang="scss">
.main{
width: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
margin-top: 12px;
padding: 16px 0;
.img{
width:60px;
height: 60px;
margin-bottom: 8px;
}
.typeImg{
width: 80px;
height: 80px;
margin-top: 40vh;
margin-bottom: 16px;
}
.text{
font-size: 14px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #6C737A;
line-height: 20rpx;
}
}
</style>

267
pages/commercialBINew/components/sliderPage.vue Normal file
View File

@ -0,0 +1,267 @@
<template>
<!-- <view class="sliderPage">-->
<!-- <view class="slider">-->
<!-- <view class="rate" :style="{left: (index*15) + 'rpx'}"></view>-->
<!-- </view>-->
<!-- </view>-->
<view class="scrollPage">
<scroll-view class="scrollBox" scroll-x="true" :scroll-into-view="'item'+selectIndex" scroll-with-animation>
<view :id="'item'+i" :class="selectIndex===i?`scrollItem selectScroll${selectIndex}`:'scrollItem'" v-for="(item,i) in pageList" :key="i" @click="handleToDetail(i)">{{item}}</view>
</scroll-view>
</view>
</template>
<script>
export default {
name: "sliderPage",
data() {
return {
pageList: ["基础信息", "车流画像", "客群画像", "经营画像", "交易画像", "业态品牌", "考核考评", "日常巡检"],
urlList: [
'/pages/map/detail',
'/pages/commercialBINew/carPortrait',
'/pages/commercialBI/guestPortrait',
'/pages/commercialBI/managePortrait',
'/pages/commercialBI/businessPortrait',
'/pages/commercialBI/formatPortraitBI',
`/pages/examine/detail?type=${1}`,
`/pages/examine/detail?type=${2}`,
],// 跳转地址
urlListYD: [
'/pages/map/detail',
'/pages/commercialBINew/carPortrait',
'/pages/commercialBI/guestPortrait',
'/pages/commercialBI/managePortrait',
'/pages/commercialBI/businessPortrait',
'/pages/commercialBI/formatPortraitBI',
`/pages/newamine/index?type=${1}&comePage=slider`,
`/pages/newamine/index?type=${2}&comePage=slider`,
],// 跳转地址YD
selectIndex: 0
}
},
props: {
index: {
type: Number,
default: 0
}
},
watch: {
index: {
handler(value) {
this.selectIndex = value
},
immediate: true
},
},
onLoad() {
},
methods: {
handleToDetail(i) {
console.log('i', i)
this.selectIndex = i
let storeServiceInfo = uni.getStorageSync('currentService')
if (storeServiceInfo.SERVERPART_NAME==='安徽驿达'){
uni.navigateTo({
url: this.urlListYD[i]
})
}else{
uni.redirectTo({
url: this.urlList[i]
})
}
}
}
}
</script>
<style scoped lang="scss">
.sliderPage {
width: 100%;
height: 16rpx;
display: flex;
justify-content: center;
padding-top: 8rpx;
background: #fff;
.slider {
width: 120rpx;
height: 8rpx;
background: #e0dfdf;
border-radius: 4rpx;
position: relative;
.rate {
position: absolute;
top: 0;
height: 100%;
background: #786B6C;
border-radius: 4rpx;
width: calc(100% / 8);
}
}
}
.scrollPage {
width: 100%;
height: 56rpx;
box-sizing: border-box;
padding: 0 16rpx;
.scrollBox {
width: 100%;
height: 100%;
white-space: nowrap;
.scrollItem {
display: inline-block;
height: 100%;
box-sizing: border-box;
padding: 8rpx 16rpx;
font-size: 28rpx;
font-family: PingFangSC, PingFang SC;
font-weight: 600;
color: #6F747A;
line-height: 40rpx;
}
.selectScroll0 {
color: #F26036;
position: relative;
}
.selectScroll0:after {
content: '';
position: absolute;
display: inline-block;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 48rpx;
height: 6rpx;
background: #F26036;
}
.selectScroll1 {
color: #1E67FF;
position: relative;
}
.selectScroll1:after {
content: '';
position: absolute;
display: inline-block;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 48rpx;
height: 6rpx;
background: #1E67FF;
}
.selectScroll2 {
color: #008649;
position: relative;
}
.selectScroll2:after {
content: '';
position: absolute;
display: inline-block;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 48rpx;
height: 6rpx;
background: #008649;
}
.selectScroll3 {
color: #6146F8;
position: relative;
}
.selectScroll3:after {
content: '';
position: absolute;
display: inline-block;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 48rpx;
height: 6rpx;
background: #6146F8;
}
.selectScroll4 {
color: #E57B00;
position: relative;
}
.selectScroll4:after {
content: '';
position: absolute;
display: inline-block;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 48rpx;
height: 6rpx;
background: #E57B00;
}
.selectScroll5 {
color: #4C43FF;
position: relative;
}
.selectScroll5:after {
content: '';
position: absolute;
display: inline-block;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 48rpx;
height: 6rpx;
background: #4C43FF;
}
.selectScroll6 {
color: #975EF5;
position: relative;
}
.selectScroll6:after {
content: '';
position: absolute;
display: inline-block;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 48rpx;
height: 6rpx;
background: #975EF5;
}
.selectScroll7 {
color: #975EF5;
position: relative;
}
.selectScroll7:after {
content: '';
position: absolute;
display: inline-block;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 48rpx;
height: 6rpx;
background: #975EF5;
}
}
}
</style>

2
pages/examine/commercialType.vue
View File

@ -34,7 +34,7 @@ export default {
data(){
return {
typeList:[
{img:'https://eshangtech.com/ShopICO/ahyd-BID/index/car.svg',url:'/pages/commercialBI/carPortrait',text:'车流'},
{img:'https://eshangtech.com/ShopICO/ahyd-BID/index/car.svg',url:'/pages/commercialBINew/carPortrait',text:'车流'},
{img:'https://eshangtech.com/ShopICO/ahyd-BID/index/guest.svg',url:'/pages/commercialBI/guestPortrait',text:'客群'},
{img:'https://eshangtech.com/ShopICO/ahyd-BID/index/business_icon.svg',url:'/pages/commercialBI/managePortrait',text:'经营'},
{img:'https://eshangtech.com/ShopICO/ahyd-BID/index/trade.svg',url:'/pages/commercialBI/businessPortrait',text:'交易'},

24
pages/examine/detail.vue
View File

@ -24,10 +24,11 @@
<swiper class="swiperBox" :current="currentSwiper" @change="changeSwiper">
<swiper-item class="swiperItem" v-for="(item,index) in carSwiperList" :key="index">
<view v-if="item!=='previous' && item!=='next'" class="header" :style="{background:`url(${item})`}">
<view class="sliderBox">
<SliderPage :index="type===1?1:0"/>
<view class="sliderBox" :style="{top:(menu.bottom + 24) + 'px'}">
<SliderPage :index="type===1?6:7"/>
</view>
</view>
<view v-else></view>
</swiper-item>
</swiper>
@ -554,16 +555,21 @@ export default {
.swiperItem{
width:100%;
height: 340px;
.header{
width:100%;
//background: url("https://eshangtech.com/ShopICO/ahyd-BID/examine/bg.png")no-repeat;
.header {
width: 100%;
height: 340px;
position: absolute;
top: 0;left: 0;
z-index:1;
.sliderBox{
width: 100%;
top: 0;
left: 0;
z-index: 1;
.sliderBox {
position: absolute;
bottom: 20px;
left: 0;
width: 100%;
background: #E5D5FF;
padding-bottom: 12rpx;
}
}
}

241
pages/examine/sliderPage.vue
View File

@ -1,47 +1,99 @@
<template>
<view class="sliderPage">
<view class="slider">
<view class="rate" :style="{right: (index*15) + 'rpx'}"></view>
</view>
<!-- <view class="sliderPage">-->
<!-- <view class="slider">-->
<!-- <view class="rate" :style="{left: (index*15) + 'rpx'}"></view>-->
<!-- </view>-->
<!-- </view>-->
<view class="scrollPage">
<scroll-view class="scrollBox" scroll-x="true" :scroll-into-view="'item'+selectIndex" scroll-with-animation>
<view :id="'item'+i" :class="selectIndex===i?`scrollItem selectScroll${selectIndex}`:'scrollItem'" v-for="(item,i) in pageList" :key="i" @click="handleToDetail(i)">{{item}}</view>
</scroll-view>
</view>
</template>
<script>
export default {
name: "sliderPage",
data(){
data() {
return {
pageList: ["基础信息", "车流画像", "客群画像", "经营画像", "交易画像", "业态品牌", "考核考评", "日常巡检"],
urlList: [
'/pages/map/detail',
'/pages/commercialBINew/carPortrait',
'/pages/commercialBI/guestPortrait',
'/pages/commercialBI/managePortrait',
'/pages/commercialBI/businessPortrait',
'/pages/commercialBI/formatPortraitBI',
`/pages/examine/detail?type=${1}`,
`/pages/examine/detail?type=${2}`,
],// 跳转地址
urlListYD: [
'/pages/map/detail',
'/pages/commercialBINew/carPortrait',
'/pages/commercialBI/guestPortrait',
'/pages/commercialBI/managePortrait',
'/pages/commercialBI/businessPortrait',
'/pages/commercialBI/formatPortraitBI',
`/pages/newamine/index?type=${1}&comePage=slider`,
`/pages/newamine/index?type=${2}&comePage=slider`,
],// 跳转地址YD
selectIndex: 0
}
},
props:{
index:{
props: {
index: {
type: Number,
default: 0
}
},
onLoad(){
watch: {
index: {
handler(value) {
this.selectIndex = value
},
immediate: true
},
},
onLoad() {
},
methods:{
methods: {
handleToDetail(i) {
console.log('i', i)
this.selectIndex = i
let storeServiceInfo = uni.getStorageSync('currentService')
if (storeServiceInfo.SERVERPART_NAME === '安徽驿达') {
uni.navigateTo({
url: this.urlListYD[i]
})
} else {
uni.redirectTo({
url: this.urlList[i]
})
}
}
}
}
</script>
<style scoped lang="scss">
.sliderPage{
.sliderPage {
width: 100%;
height: 16rpx;
display: flex;
justify-content: center;
margin-top: 8rpx;
.slider{
padding-top: 8rpx;
background: #fff;
.slider {
width: 120rpx;
height: 8rpx;
background: #e0dfdf;
border-radius: 4rpx;
position: relative;
.rate{
.rate {
position: absolute;
top: 0;
height: 100%;
@ -51,4 +103,165 @@ export default {
}
}
}
.scrollPage {
width: 100%;
height: 56rpx;
box-sizing: border-box;
padding: 0 16rpx;
.scrollBox {
width: 100%;
height: 100%;
white-space: nowrap;
.scrollItem {
display: inline-block;
height: 100%;
box-sizing: border-box;
padding: 8rpx 16rpx;
font-size: 28rpx;
font-family: PingFangSC, PingFang SC;
font-weight: 600;
color: #6F747A;
line-height: 40rpx;
}
.selectScroll0 {
color: #F26036;
position: relative;
}
.selectScroll0:after {
content: '';
position: absolute;
display: inline-block;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 48rpx;
height: 6rpx;
background: #F26036;
}
.selectScroll1 {
color: #1E67FF;
position: relative;
}
.selectScroll1:after {
content: '';
position: absolute;
display: inline-block;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 48rpx;
height: 6rpx;
background: #1E67FF;
}
.selectScroll2 {
color: #008649;
position: relative;
}
.selectScroll2:after {
content: '';
position: absolute;
display: inline-block;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 48rpx;
height: 6rpx;
background: #008649;
}
.selectScroll3 {
color: #6146F8;
position: relative;
}
.selectScroll3:after {
content: '';
position: absolute;
display: inline-block;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 48rpx;
height: 6rpx;
background: #6146F8;
}
.selectScroll4 {
color: #E57B00;
position: relative;
}
.selectScroll4:after {
content: '';
position: absolute;
display: inline-block;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 48rpx;
height: 6rpx;
background: #E57B00;
}
.selectScroll5 {
color: #4C43FF;
position: relative;
}
.selectScroll5:after {
content: '';
position: absolute;
display: inline-block;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 48rpx;
height: 6rpx;
background: #4C43FF;
}
.selectScroll6 {
color: #975EF5;
position: relative;
}
.selectScroll6:after {
content: '';
position: absolute;
display: inline-block;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 48rpx;
height: 6rpx;
background: #975EF5;
}
.selectScroll7 {
color: #975EF5;
position: relative;
}
.selectScroll7:after {
content: '';
position: absolute;
display: inline-block;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 48rpx;
height: 6rpx;
background: #975EF5;
}
}
}
</style>

52
pages/index/components/sliderPage.vue Normal file
View File

@ -0,0 +1,52 @@
<template>
<view class="sliderPage">
<view class="slider">
<view class="rate" :style="{left: (index*10) + 'rpx'}"></view>
</view>
</view>
</template>
<script>
export default {
name: "sliderPage",
data(){
return {
}
},
props:{
index:{
type: Number,
default: 0
}
},
onLoad(){
},
methods:{
}
}
</script>
<style scoped lang="scss">
.sliderPage{
width: 100%;
height: 16rpx;
display: flex;
justify-content: center;
padding-top: 8rpx;
.slider{
width: 120rpx;
height: 8rpx;
background: #E1E3E8;
border-radius: 4rpx;
position: relative;
.rate{
position: absolute;
top: 0;
height: 100%;
background: #B2B4B9;
border-radius: 4rpx;
width: calc(100% / 8);
}
}
}
</style>

2864
pages/index/index.vue
View File

File diff suppressed because it is too large Load Diff

0
pages/index/new_file.html
View File

5059
pages/index/old/index.vue Normal file
View File

File diff suppressed because it is too large Load Diff

2
pages/map/commercialType.vue
View File

@ -34,7 +34,7 @@ export default {
data(){
return {
typeList:[
{img:'https://eshangtech.com/ShopICO/ahyd-BID/index/car.svg',url:'/pages/commercialBI/carPortrait',text:'车流'},
{img:'https://eshangtech.com/ShopICO/ahyd-BID/index/car.svg',url:'/pages/commercialBINew/carPortrait',text:'车流'},
{img:'https://eshangtech.com/ShopICO/ahyd-BID/index/guest.svg',url:'/pages/commercialBI/guestPortrait',text:'客群'},
{img:'https://eshangtech.com/ShopICO/ahyd-BID/index/business_icon.svg',url:'/pages/commercialBI/managePortrait',text:'经营'},
{img:'https://eshangtech.com/ShopICO/ahyd-BID/index/trade.svg',url:'/pages/commercialBI/businessPortrait',text:'交易'},

40
pages/map/detail.vue
View File

@ -34,14 +34,14 @@
<swiper v-if="topBg && topBg.length>0" :current="currentImg" class="carousel" @change="changeSwiper">
<swiper-item class="imgIndex" v-for="(item,index) in topBg" :key="index" :style="{backgroundImage:`url(${item})`}">
<!-- <image class="img" :src="item"></image>-->
<view class="sliderPage" v-if="item.key!=='previous' && item.key!=='next'">
<view class="sliderPage" :style="{top: (menu.bottom + 14)+'px'}" v-if="item.key!=='previous' && item.key!=='next'">
<SliderPage :index="0"/>
</view>
</swiper-item>
</swiper>
<div v-if="topBg && topBg.length>0" class="picNumber" @click="handlePreview">
<image class="icon" src="/static/images/noImg.svg"></image>
<text class="text"> {{ currentImg<1?1:currentImg>topBgRealLength?topBgRealLength:currentImg }} / {{ topBgRealLength }}</text>
<text class="text"> {{ currentImg<1?1:currentImg>topBgRealLength?topBgRealLength:currentImg }} / {{ topBgRealLength }}</text>
<image class="more" src="/static/images/more.svg"></image>
</div>
<!-- <image v-else @click="handlePreview('default')" class="topDefaultBg" src="https://eshangtech.com/ShopICO/ahyd-BID/service/default.png"></image>-->
@ -226,7 +226,7 @@ export default {
let seat = uni.getStorageSync('currentService')
this.handleSearch(seat)
this.topBg = []
this.currentImg = 1
this.currentImg = 1
},
onUnload() {
@ -245,7 +245,7 @@ export default {
})
}else if(value==='next'){
uni.redirectTo({
url:`/pages/commercialBI/carPortrait`
url:`/pages/commercialBINew/carPortrait`
})
}
},
@ -283,7 +283,6 @@ export default {
}
this.typeList[1].isShow = this.info.STARTDATE
if (this.info && this.info.ImageLits && this.info.ImageLits.length>0){
console.log('111')
this.topBg = this.info.ImageLits
this.topBg.unshift({key:'previous'})
this.topBg.push({key:'next'})
@ -298,6 +297,22 @@ export default {
this.currentImg = 1
this.topBgRealLength = this.topBg.length - 2
}
// if (this.info && this.info.ImageLits && this.info.ImageLits.length>0){
// console.log('111')
// this.topBg = this.info.ImageLits
// this.topBg.unshift({key:'previous'})
// this.topBg.push({key:'next'})
// this.currentImg = 1
// this.topBgRealLength = this.topBg.length-2
// console.log('this.topBg',this.topBg)
// this.$forceUpdate()
// }else{
// this.topBg = ['https://eshangtech.com/ShopICO/ahyd-BID/service/default.png']
// this.topBg.unshift({key:'previous'})
// this.topBg.push({key:'next'})
// this.currentImg = 1
// this.topBgRealLength = this.topBg.length - 2
// }
},
//选择服务区
@ -472,19 +487,14 @@ export default {
background-size: 100% 100%;
.sliderPage{
width: 100%;
height: 16rpx;
z-index: 9;
position: absolute;
bottom: 20px;
top: 20px;
left: 0;
display: flex;
justify-content: center;
align-items: center;
.sliderBg{
width: 120rpx;
background: #fff;
border-radius: 8rpx;
}
border-top: 2px solid #6F747A;
border-bottom: 2px solid #6F747A;
background: transparent;
padding-bottom: 12rpx;
}
//.img{
// width: 100%;

8
pages/map/index.vue
View File

@ -321,11 +321,9 @@ export default {
this.$util.toNextRoute('navigateTo', `/pages/map/detail`)
}else{
if (this.chartType){
if (pageList.length>2){
uni.navigateBack({
delta: 1
})
}
uni.navigateBack({
delta: 1
})
}else{
if (pageList.length>2){
uni.navigateBack({

243
pages/map/sliderPage.vue
View File

@ -1,43 +1,99 @@
<template>
<view class="sliderPage">
<view class="slider">
<view class="rate"></view>
</view>
<!-- <view class="sliderPage">-->
<!-- <view class="slider">-->
<!-- <view class="rate" :style="{left: (index*15) + 'rpx'}"></view>-->
<!-- </view>-->
<!-- </view>-->
<view class="scrollPage">
<scroll-view class="scrollBox" scroll-x="true" :scroll-into-view="'item'+selectIndex" scroll-with-animation>
<view :id="'item'+i" :class="selectIndex===i?`scrollItem selectScroll${selectIndex}`:'scrollItem'" v-for="(item,i) in pageList" :key="i" @click="handleToDetail(i)">{{item}}</view>
</scroll-view>
</view>
</template>
<script>
export default {
name: "sliderPage",
data(){
data() {
return {
pageList: ["基础信息", "车流画像", "客群画像", "经营画像", "交易画像", "业态品牌", "考核考评", "日常巡检"],
urlList: [
'/pages/map/detail',
'/pages/commercialBINew/carPortrait',
'/pages/commercialBI/guestPortrait',
'/pages/commercialBI/managePortrait',
'/pages/commercialBI/businessPortrait',
'/pages/commercialBI/formatPortraitBI',
`/pages/examine/detail?type=${1}`,
`/pages/examine/detail?type=${2}`,
],// 跳转地址
urlListYD: [
'/pages/map/detail',
'/pages/commercialBINew/carPortrait',
'/pages/commercialBI/guestPortrait',
'/pages/commercialBI/managePortrait',
'/pages/commercialBI/businessPortrait',
'/pages/commercialBI/formatPortraitBI',
`/pages/newamine/index?type=${1}&comePage=slider`,
`/pages/newamine/index?type=${2}&comePage=slider`,
],// 跳转地址YD
selectIndex: 0
}
},
props:{
props: {
index: {
type: Number,
default: 0
}
},
onLoad(){
watch: {
index: {
handler(value) {
this.selectIndex = value
},
immediate: true
},
},
onLoad() {
},
methods:{
methods: {
handleToDetail(i) {
console.log('i', i)
this.selectIndex = i
let storeServiceInfo = uni.getStorageSync('currentService')
if (storeServiceInfo.SERVERPART_NAME === '安徽驿达') {
uni.navigateTo({
url: this.urlListYD[i]
})
} else {
uni.redirectTo({
url: this.urlList[i]
})
}
}
}
}
</script>
<style scoped lang="scss">
.sliderPage{
.sliderPage {
width: 100%;
height: 16rpx;
display: flex;
justify-content: center;
align-items: center;
.slider{
padding-top: 8rpx;
background: #fff;
.slider {
width: 120rpx;
height: 8rpx;
background: #e0dfdf;
border-radius: 4rpx;
position: relative;
.rate{
.rate {
position: absolute;
top: 0;
height: 100%;
@ -47,4 +103,165 @@ export default {
}
}
}
.scrollPage {
width: 100%;
height: 56rpx;
box-sizing: border-box;
padding: 0 16rpx;
.scrollBox {
width: 100%;
height: 100%;
white-space: nowrap;
.scrollItem {
display: inline-block;
height: 100%;
box-sizing: border-box;
padding: 8rpx 16rpx;
font-size: 28rpx;
font-family: PingFangSC, PingFang SC;
font-weight: 600;
color: #6F747A;
line-height: 40rpx;
}
.selectScroll0 {
color: #F26036;
position: relative;
}
.selectScroll0:after {
content: '';
position: absolute;
display: inline-block;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 48rpx;
height: 6rpx;
background: #F26036;
}
.selectScroll1 {
color: #1E67FF;
position: relative;
}
.selectScroll1:after {
content: '';
position: absolute;
display: inline-block;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 48rpx;
height: 6rpx;
background: #1E67FF;
}
.selectScroll2 {
color: #008649;
position: relative;
}
.selectScroll2:after {
content: '';
position: absolute;
display: inline-block;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 48rpx;
height: 6rpx;
background: #008649;
}
.selectScroll3 {
color: #6146F8;
position: relative;
}
.selectScroll3:after {
content: '';
position: absolute;
display: inline-block;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 48rpx;
height: 6rpx;
background: #6146F8;
}
.selectScroll4 {
color: #E57B00;
position: relative;
}
.selectScroll4:after {
content: '';
position: absolute;
display: inline-block;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 48rpx;
height: 6rpx;
background: #E57B00;
}
.selectScroll5 {
color: #4C43FF;
position: relative;
}
.selectScroll5:after {
content: '';
position: absolute;
display: inline-block;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 48rpx;
height: 6rpx;
background: #4C43FF;
}
.selectScroll6 {
color: #975EF5;
position: relative;
}
.selectScroll6:after {
content: '';
position: absolute;
display: inline-block;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 48rpx;
height: 6rpx;
background: #975EF5;
}
.selectScroll7 {
color: #975EF5;
position: relative;
}
.selectScroll7:after {
content: '';
position: absolute;
display: inline-block;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 48rpx;
height: 6rpx;
background: #975EF5;
}
}
}
</style>

17
pages/newamine/index.vue
View File

@ -363,6 +363,7 @@ export default {
dailyServiceList:[],// 整改显示的列表
dailyAllList:[], // 整改的全部列表
dailyFlag:true,// 是否能调用巡检方法
comePage:''
}
},
onLoad(query){
@ -373,6 +374,9 @@ export default {
if (query.type){
this.selectTab = Number(query.type)
}
if (query.comePage){
this.comePage = query.comePage
}
// 获取手机参数对页面进行适配
let systemInfo = uni.getSystemInfoSync()
@ -783,9 +787,16 @@ export default {
url: '/pages/index/index'
})
}else{
uni.switchTab({
url: '/pages/userCenter/userCenter'
})
if (this.comePage){
uni.navigateBack({
delta: 1
})
}else{
uni.switchTab({
url: '/pages/userCenter/userCenter'
})
}
}
},

2
pages/userCenter/userCenter.vue
View File

@ -103,7 +103,7 @@ import Tabbar from "../../components/tabbar/tabbar.vue";
{
id:'',
name: '车流',
homeUrl: '/pages/commercialBI/carPortrait',
homeUrl: '/pages/commercialBINew/carPortrait',
imagePath: 'https://eshangtech.com/ShopICO/ahyd-BID/user/traffic.svg',
isNotice:'',
value: 2,