update
This commit is contained in:
parent
abae99a8ff
commit
e7549a81d3
29
pages.json
29
pages.json
@ -89,9 +89,34 @@
|
||||
"style": {
|
||||
"navigationBarTitleText": "",
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
},
|
||||
"usingComponents": {
|
||||
"qiun-wx-ucharts": "@qiun/wx-ucharts"
|
||||
{
|
||||
"path": "guestPortrait",
|
||||
"style": {
|
||||
"navigationBarTitleText": "",
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "businessPortrait",
|
||||
"style": {
|
||||
"navigationBarTitleText": "",
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "formatPortrait",
|
||||
"style": {
|
||||
"navigationBarTitleText": "",
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "managePortrait",
|
||||
"style": {
|
||||
"navigationBarTitleText": "",
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
}
|
||||
]
|
||||
|
||||
41
pages/commercialBI/businessPortrait.vue
Normal file
41
pages/commercialBI/businessPortrait.vue
Normal file
@ -0,0 +1,41 @@
|
||||
<template>
|
||||
<div class="main">
|
||||
<header-top :bgUrl="bgUrl" :menu="menu" :bgColor="bgColor" :title="title" :labelList="labelList"/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import headerTop from "./components/headerTop.vue";
|
||||
|
||||
export default {
|
||||
name: "businessPortrait",
|
||||
components: {headerTop},
|
||||
data() {
|
||||
return {
|
||||
labelList:['女性','高消费','喜爱奶茶','浙江','20-30岁','江苏'],//标签
|
||||
title:'交易画像',//页面标题
|
||||
bgColor:'180deg, #FFBA07 0%, #F38309 100%',
|
||||
bgUrl: 'https://eshangtech.com/ShopICO/ahyd-BID/commercial/businessPortraitBg.svg',//背景图片路径
|
||||
time: '',//跳转携带的时间
|
||||
menu: {},//手机配置信息
|
||||
}
|
||||
},
|
||||
onLoad(option) {
|
||||
//跳转的时候带上时间
|
||||
this.time = option.time
|
||||
// 获取手机参数对页面进行适配
|
||||
let systemInfo = uni.getSystemInfoSync()
|
||||
// 把获取到的手机参数保存
|
||||
uni.setStorageSync('phoneInfo', systemInfo)
|
||||
this.statusBarHeight = Number(systemInfo.statusBarHeight)
|
||||
this.menu = uni.getMenuButtonBoundingClientRect()
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.main {
|
||||
width: 100vw;
|
||||
min-height: 100vh;
|
||||
}
|
||||
</style>
|
||||
@ -3,25 +3,27 @@
|
||||
<div class="header">
|
||||
<div class="headerTop" :style="{height:(menu.bottom + 6) + 'px'}">
|
||||
<div class="box" :style="{top:(menu.bottom - (menu.height / 2)) + 'px'}">
|
||||
<div class="icon"></div>
|
||||
<div class="icon" @click="handleBack">
|
||||
<image class="img" src="/static/images/commercial/navigation-left.svg"></image>
|
||||
</div>
|
||||
<text class="title">车流画像</text>
|
||||
<!-- 占位 -->
|
||||
<div class="seize"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="serviceArea" :style="{top : (menu.bottom + 14) + 'px'}">
|
||||
<picker class="picker" @change="bindPickerChange" :value="serviceIndex" :range="serviceArray">
|
||||
<div class="selectService">
|
||||
<image class="img" src="/static/images/commercial/fixed.svg"></image>
|
||||
<view class="select">
|
||||
<picker @change="bindPickerChange" :value="serviceIndex" :range="serviceArray">
|
||||
<view class="content">
|
||||
<view class="uni-input">{{serviceArray[serviceIndex]}}</view>
|
||||
<text class="area">{{area}}</text>
|
||||
<view class="uni-input">大龙山服务区</view>
|
||||
<text class="area">安庆片区</text>
|
||||
<image class="rightArrow" src="/static/images/commercial/rightArrow.svg"></image>
|
||||
</view>
|
||||
</picker>
|
||||
</view>
|
||||
</div>
|
||||
</picker>
|
||||
<div class="other">
|
||||
<div class="label">
|
||||
<div v-for="(item,index) in labelList" :key="index" :class="index===0?'item0 item':index===1?'item1 item':index===2?'item2 item':index===3?'item3 item':index===4?'item4 item':'item'">
|
||||
@ -44,7 +46,7 @@
|
||||
</div>
|
||||
<div class="chartsItem" style="margin-top: 32px">
|
||||
<view class="tab" >
|
||||
<view v-for="(item,index) in tabList" :key="index" :class="selectTab===item.value?'tabItem tabItemActive':'tabItem'" @click="handleChangeTab(item.value)">{{item.name}}</view>
|
||||
<view v-for="(item,index) in tabList" :key="index" :class="selectTab===item.value?'tabItem tabItemActive':'tabItem'" @click="handleChangeTab(item.value)">{{item.name}}{{index!==0?'区':''}}</view>
|
||||
</view>
|
||||
<p class="title">车辆归属地</p>
|
||||
<home-place :homeData="homePlace" :homeCity="cityPlace" />
|
||||
@ -87,9 +89,11 @@ export default {
|
||||
area:'片区', //属于哪个片区
|
||||
labelList:[{value:'杭州'},{value:'小汽车'},{value:'一般消费'},{value:'温州'},{value:'30-60万'}], //标签
|
||||
time:'',//当前时间
|
||||
Serverpart_ID:'',//服务区id
|
||||
chartData:{},
|
||||
selectTab: 1,
|
||||
tabList:[{name:'全部',value:0},{name:'东区',value:1},{name:'西区',value:2}],//选项卡列表
|
||||
selectTab: 0,
|
||||
tabIsTrue: true,
|
||||
tabList:[{name:'全部',value:0},{name:'东',value:1},{name:'西',value:2}],//选项卡列表
|
||||
carNumAll : 0,//一共的入区车流数
|
||||
carData:[],//入区车流的数据
|
||||
homePlaceAll:[],//车辆归属地两区总和列表
|
||||
@ -99,13 +103,16 @@ export default {
|
||||
carTypeTimeDataAll:[],//车辆类型占比与停留时间总和列表
|
||||
carTypeTimeData:[],//车辆类型占比与停留时间
|
||||
timeAnalysisData:[],// 车辆价值与停留时间分析
|
||||
percentEntryData:[]//入区率占比
|
||||
percentEntryData:[],//入区率占比
|
||||
percentEntryDataAll:[]// 入区率占比总的
|
||||
}
|
||||
},
|
||||
components: {PercentEntry, CarTypeTime, HomePlace, EntryZone, analyse,timeAnalysis},
|
||||
onLoad(option){
|
||||
//跳转的时候带上时间
|
||||
this.time = option.time
|
||||
// 服务区id
|
||||
this.Serverpart_ID = option.Serverpart_ID
|
||||
// 获取手机参数对页面进行适配
|
||||
let systemInfo = uni.getSystemInfoSync()
|
||||
// 把获取到的手机参数保存
|
||||
@ -119,7 +126,7 @@ export default {
|
||||
// 车辆类型占比与停留时间
|
||||
this.getCarTypeTime()
|
||||
// 车辆价值与停留时间分析
|
||||
this.getTimeAnalysis()
|
||||
this.getTimeAnalysis('')
|
||||
//入区率占比
|
||||
this.getPercentEntry()
|
||||
},
|
||||
@ -127,11 +134,37 @@ export default {
|
||||
|
||||
},
|
||||
methods:{
|
||||
handleBack(){
|
||||
uni.navigateBack({
|
||||
delta: 1
|
||||
})
|
||||
},
|
||||
//切换改变选项卡
|
||||
handleChangeTab(value){
|
||||
let Serverpart_Region = ''
|
||||
this.tabList.forEach(item=>{
|
||||
if (item.value === value && item.value!==0){
|
||||
Serverpart_Region = item.name
|
||||
}
|
||||
})
|
||||
// if (this.tabIsTrue){
|
||||
this.selectTab = value
|
||||
this.homePlace = this.homePlaceAll[this.selectTab - 1]
|
||||
this.cityPlace = this.cityPlaceAll[this.selectTab - 1]
|
||||
// 车辆归属地
|
||||
this.homePlace = this.homePlaceAll[this.selectTab]
|
||||
this.cityPlace = this.cityPlaceAll[this.selectTab]
|
||||
// 车辆类型占比与停留时间
|
||||
this.carTypeTimeData = this.carTypeTimeDataAll[this.selectTab]
|
||||
// 车辆价值与停留时间分析
|
||||
this.getTimeAnalysis(Serverpart_Region)
|
||||
//入区率占比
|
||||
this.percentEntryData = this.percentEntryDataAll[this.selectTab]
|
||||
console.log('this.percentEntryData',this.percentEntryData)
|
||||
// this.tabIsTrue = false
|
||||
// setTimeout(()=>{
|
||||
// this.tabIsTrue = true
|
||||
// },2000)
|
||||
// }
|
||||
|
||||
},
|
||||
bindPickerChange:function (e){
|
||||
console.log(e)
|
||||
@ -139,7 +172,7 @@ export default {
|
||||
getCarData(){
|
||||
request.$webGet('CommercialApi/Revenue/GetBayonetEntryList',{
|
||||
StatisticsDate: this.time,
|
||||
Serverpart_ID :'432'
|
||||
Serverpart_ID :this.Serverpart_ID
|
||||
}).then(res=>{
|
||||
this.carData = res.Result_Data.List
|
||||
})
|
||||
@ -154,7 +187,8 @@ export default {
|
||||
let statistic = `${y}${m}`
|
||||
request.$webGet('CommercialApi/Revenue/GetBayonetOAList',{
|
||||
StatisticsMonth:statistic,
|
||||
Serverpart_ID:432
|
||||
Serverpart_ID:this.Serverpart_ID,
|
||||
ContainWhole:true
|
||||
}).then(res=>{
|
||||
let result = res.Result_Data.List
|
||||
result.forEach(item=>{
|
||||
@ -164,6 +198,7 @@ export default {
|
||||
})
|
||||
item.OwnerCityList.forEach(subItem=>{
|
||||
subItem.value = Number(subItem.value)
|
||||
subItem.rate = ((Number(subItem.value) / item.Vehicle_Count)*100)
|
||||
})
|
||||
item.OwnerProvinceList.forEach(subItem=>{
|
||||
subItem.rate = ((Number(subItem.value) / priceAll)*100).toFixed(2)
|
||||
@ -180,18 +215,20 @@ export default {
|
||||
cityList.push(item.OwnerCityList)
|
||||
dataList.push(list)
|
||||
})
|
||||
this.homePlaceAll = dataList
|
||||
this.homePlace = dataList[this.selectTab-1]
|
||||
//城市
|
||||
this.cityPlaceAll = cityList
|
||||
this.cityPlace = cityList[this.selectTab-1]
|
||||
this.cityPlace = cityList[this.selectTab]
|
||||
//省份
|
||||
this.homePlaceAll = dataList
|
||||
this.homePlace = dataList[this.selectTab]
|
||||
})
|
||||
},
|
||||
getCarTypeTime(){
|
||||
request.$webGet('CommercialApi/Revenue/GetBayonetSTAList',{
|
||||
StatisticsDate:this.time,
|
||||
Serverpart_ID:'432'
|
||||
Serverpart_ID:this.Serverpart_ID,
|
||||
ContainWhole:true
|
||||
}).then(res=>{
|
||||
console.log('res',res)
|
||||
let result = res.Result_Data.List
|
||||
let series = []
|
||||
result.forEach(item=>{
|
||||
@ -217,34 +254,48 @@ export default {
|
||||
name:'车辆类型',data:carType
|
||||
})
|
||||
})
|
||||
console.log('series',series)
|
||||
this.carTypeTimeDataAll[0] ={categories:result[0].Vehicle_Type, series:[series[0],series[1]]}
|
||||
this.carTypeTimeDataAll[1] ={categories:result[1].Vehicle_Type, series:[series[2],series[3]]}
|
||||
this.carTypeTimeData = this.carTypeTimeDataAll[this.selectTab - 1]
|
||||
console.log('carTypeTimeData',this.carTypeTimeData)
|
||||
this.carTypeTimeDataAll[0] ={categories:result[0].Vehicle_Type, series:[series[1],series[0]]}
|
||||
this.carTypeTimeDataAll[1] ={categories:result[1].Vehicle_Type, series:[series[3],series[2]]}
|
||||
this.carTypeTimeDataAll[2] ={categories:result[2].Vehicle_Type, series:[series[5],series[4]]}
|
||||
this.carTypeTimeData = this.carTypeTimeDataAll[this.selectTab]
|
||||
})
|
||||
|
||||
|
||||
// categories: ["小型车","中型车","大货车","新能源车"],
|
||||
// series: [{name:'新能源',data:[30,38,20,10]},
|
||||
// {name:'燃油车',data:[20,17,23,32]},
|
||||
// {name:'停留时间',data:[62,38,50,84]}]
|
||||
},
|
||||
getTimeAnalysis(){
|
||||
let res = [
|
||||
{name:'小型车',data:[[3,3,10],[10,1.5,10],[18,0.5,5],[22,2.5,10]]},
|
||||
{name:'中型车',data:[[3,1.5,10],[4,2.7,10],[14,2.3,10],[18,1.4,0.50]]},
|
||||
{name:'大型车',data:[[2,0.7,2],[5,0.2,1],[7,0.7,3],[22,1.9,6]]}
|
||||
]
|
||||
this.timeAnalysisData = res
|
||||
getTimeAnalysis(data){
|
||||
const date = new Date(this.time)
|
||||
let y = date.getFullYear()
|
||||
let m = date.getMonth()+1
|
||||
m = m<10?'0'+m:m
|
||||
request.$webGet('CommercialApi/Revenue/GetBayonetSTAnalysis',{
|
||||
StartMonth:`${y}${m}`,
|
||||
EndMonth:`${y}${m}`,
|
||||
Province_Code:'340000',
|
||||
Serverpart_ID:this.Serverpart_ID,
|
||||
Serverpart_Region: data
|
||||
}).then(res=>{
|
||||
let result = res.Result_Data.List
|
||||
this.timeAnalysisData = result
|
||||
})
|
||||
|
||||
|
||||
// let res = [
|
||||
// {name:'小型车',data:[[3,3,10],[10,1.5,10],[18,0.5,5],[22,2.5,10]]},
|
||||
// {name:'中型车',data:[[3,1.5,10],[4,2.7,10],[14,2.3,10],[18,1.4,0.50]]},
|
||||
// {name:'大型车',data:[[2,0.7,2],[5,0.2,1],[7,0.7,3],[22,1.9,6]]}
|
||||
// ]
|
||||
},
|
||||
getPercentEntry(){
|
||||
request.$webGet('CommercialApi/Revenue/GetSPBayonetList',{
|
||||
Statistics_Date: this.time,
|
||||
Province_Code:'340000',
|
||||
Serverpart_ID :'432'
|
||||
Serverpart_ID :this.Serverpart_ID
|
||||
}).then(res=>{
|
||||
this.percentEntryData = res.Result_Data.List
|
||||
console.log('getPercentEntry',res)
|
||||
this.percentEntryDataAll = [ res.Result_Data.List, [res.Result_Data.List[1]], [res.Result_Data.List[2]]]
|
||||
this.percentEntryData = this.percentEntryDataAll[this.selectTab]
|
||||
})
|
||||
}
|
||||
}
|
||||
@ -280,7 +331,10 @@ export default {
|
||||
.icon{
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
background: red;
|
||||
.img{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
.title{
|
||||
font-size: 36rpx;
|
||||
@ -296,9 +350,9 @@ export default {
|
||||
}
|
||||
}
|
||||
.serviceArea{
|
||||
width: calc(100% - 32px);
|
||||
position: absolute;
|
||||
box-sizing: border-box;
|
||||
.picker{
|
||||
.selectService{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@ -308,7 +362,6 @@ export default {
|
||||
z-index: 2;
|
||||
}
|
||||
.select{
|
||||
width: 174px;
|
||||
height: 32px;
|
||||
background: #F8F8FA;
|
||||
border-radius: 0 16px 16px 0;
|
||||
@ -317,7 +370,6 @@ export default {
|
||||
padding-left: 25px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
.content{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@ -342,13 +394,12 @@ export default {
|
||||
.rightArrow{
|
||||
width: 24px;
|
||||
height: 12px;
|
||||
position: absolute;
|
||||
right: 11px;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
.other{
|
||||
margin-top: 12px;
|
||||
width: 100%;
|
||||
@ -407,7 +458,7 @@ export default {
|
||||
}
|
||||
}
|
||||
.analyse{
|
||||
width: 100%;
|
||||
width: calc(100vw - 32px);
|
||||
height: 48px;
|
||||
box-sizing: border-box;
|
||||
padding: 6px 12px;
|
||||
|
||||
@ -25,7 +25,7 @@ export default {
|
||||
watch: {
|
||||
data: {
|
||||
handler(value) {
|
||||
console.log('watch',value)
|
||||
this.carTypeTimePath=''
|
||||
this.handleCarData(value)
|
||||
},
|
||||
deep:true
|
||||
@ -34,7 +34,7 @@ export default {
|
||||
methods: {
|
||||
// 处理传入的数据
|
||||
handleCarData(value) {
|
||||
console.log('value',)
|
||||
console.log('carTypeTime',value)
|
||||
let res = {
|
||||
categories: value.categories,
|
||||
series: value.series
|
||||
@ -52,12 +52,12 @@ export default {
|
||||
height: 252,
|
||||
categories:data.categories,
|
||||
series: data.series,
|
||||
animation: true,
|
||||
animation: false,
|
||||
canvas2d: true,
|
||||
rotate: false,
|
||||
rotateLock: false,
|
||||
background: "#FFFFFF",
|
||||
color: ["#1E80FF", "#00C2FF","#CAD0DA"],
|
||||
color: ["#00C2FF","#CAD0DA"],
|
||||
padding: [30,30,0,0],
|
||||
dataLabel: false,
|
||||
enableScroll: false,
|
||||
@ -87,7 +87,7 @@ export default {
|
||||
position: 'right',
|
||||
titleOffsetY: -5,
|
||||
titleOffsetX: 5
|
||||
}
|
||||
},
|
||||
]
|
||||
},
|
||||
extra: {
|
||||
|
||||
@ -61,8 +61,15 @@ export default {
|
||||
let probabilityData = []
|
||||
value.forEach(item=>{
|
||||
let value = item.Entry_Rate
|
||||
let text = item.Serverpart_Region + '区' + value .toFixed(2) + '%'
|
||||
if (text.length<8){
|
||||
//不要删区里面的空格！！！！
|
||||
text = item.Serverpart_Region + '区 ' + value .toFixed(2) + '%'
|
||||
}
|
||||
console.log('text.length',text.length)
|
||||
|
||||
probabilityData.push({
|
||||
name: item.Serverpart_Region + '区 ' + value .toFixed(2) + '%',
|
||||
name: text,
|
||||
value: Number(value.toFixed(2))
|
||||
})
|
||||
})
|
||||
@ -121,7 +128,6 @@ export default {
|
||||
position: "bottom",
|
||||
lineHeight: 25,
|
||||
float: 'center'
|
||||
|
||||
},
|
||||
extra: {
|
||||
ring: {
|
||||
|
||||
@ -42,17 +42,15 @@ export default {
|
||||
watch: {
|
||||
homeData: {
|
||||
handler(value) {
|
||||
this.homePlacePath = ''
|
||||
this.handleCarData(value)
|
||||
}
|
||||
},
|
||||
homeCity:{
|
||||
handler(value){
|
||||
let all = 0
|
||||
console.log('handler',value)
|
||||
value.forEach(item=>{
|
||||
all+=item.value
|
||||
})
|
||||
value.forEach(item=>{
|
||||
item.rate = ((item.value/all)*100).toFixed(2) + '%'
|
||||
item.rate = item.rate.toFixed(2) + '%'
|
||||
})
|
||||
this.progressList = value
|
||||
},
|
||||
@ -81,7 +79,7 @@ export default {
|
||||
width: width,
|
||||
height: 160,
|
||||
series: data.series,
|
||||
animation: true,
|
||||
animation: false,
|
||||
rotate: false,
|
||||
rotateLock: false,
|
||||
canvas2d: true,
|
||||
|
||||
@ -5,7 +5,7 @@
|
||||
<view class="box" >
|
||||
<div class="min" :style="{width:min+'%'}"></div>
|
||||
<div class="middle" :style="{width:middle+'%',left:min+'%'}"></div>
|
||||
<div class="big" :style="{width:big+'%',left:(min + middle) +'%'}"></div>
|
||||
<div class="big" :style="{width:big+'%',right:0+'%'}"></div>
|
||||
</view>
|
||||
</div>
|
||||
</div>
|
||||
@ -43,6 +43,7 @@ export default {
|
||||
watch: {
|
||||
data: {
|
||||
handler(value) {
|
||||
this.dataList = [{title:'总车型入区率',value:''},{title:'小型车',value:''},{title:'中型车',value:''},{title:'大货车',value:''}]
|
||||
this.handleCarData(value)
|
||||
}
|
||||
}
|
||||
@ -50,6 +51,7 @@ export default {
|
||||
methods: {
|
||||
// 处理传入的数据
|
||||
handleCarData(value) {
|
||||
console.log('value',value)
|
||||
let Vehicle_CountAll=0
|
||||
let SectionFlow_CountAll=0
|
||||
let minAll = 0
|
||||
@ -62,15 +64,26 @@ export default {
|
||||
middleAll+=item.MediumVehicle_Count
|
||||
bigAll+=item.LargeVehicle_Count
|
||||
})
|
||||
console.log('value',value)
|
||||
this.progress = ((Vehicle_CountAll/SectionFlow_CountAll)*100).toFixed(2)
|
||||
this.min = (minAll / Vehicle_CountAll*100).toFixed(2)
|
||||
this.middle = (middleAll / Vehicle_CountAll*100).toFixed(2)
|
||||
this.big = (bigAll / Vehicle_CountAll*100).toFixed(2)
|
||||
|
||||
this.dataList[0].value = this.progress
|
||||
this.dataList[1].value = this.min
|
||||
this.dataList[2].value = this.middle
|
||||
this.dataList[3].value = this.big
|
||||
this.dataList[1].value = (minAll / SectionFlow_CountAll*100).toFixed(2)
|
||||
this.dataList[2].value = (middleAll / SectionFlow_CountAll*100).toFixed(2)
|
||||
this.dataList[3].value = (bigAll / SectionFlow_CountAll*100).toFixed(2)
|
||||
|
||||
for (let i=1;i<this.dataList.length;i++){
|
||||
for (let j=1;j<this.dataList.length - 1;j++){
|
||||
if (Number(this.dataList[i].value)>Number(this.dataList[j].value)){
|
||||
let temp = this.dataList[i]
|
||||
this.dataList[i] = this.dataList[j]
|
||||
this.dataList[j] = temp
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
},
|
||||
}
|
||||
}
|
||||
@ -94,21 +107,20 @@ export default {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
.min{
|
||||
position: absolute;
|
||||
box-sizing: border-box;
|
||||
height: 100%;
|
||||
background: #1E80FF;
|
||||
margin-right: 2px;
|
||||
}
|
||||
.middle{
|
||||
position: absolute;
|
||||
height: 100%;
|
||||
height: 100%;box-sizing: border-box;
|
||||
background: #00B6FF;
|
||||
margin-right: 2px;
|
||||
}
|
||||
.big{
|
||||
position: absolute;
|
||||
height: 100%;
|
||||
height: 100%;box-sizing: border-box;
|
||||
background: #0FC862;
|
||||
margin-right: 2px;
|
||||
}
|
||||
|
||||
@ -30,9 +30,27 @@ export default {
|
||||
methods: {
|
||||
// 处理传入的数据
|
||||
handleCarData(value) {
|
||||
let list = []
|
||||
value.forEach(item=>{
|
||||
list.push({name:item.name,data:item.data})
|
||||
})
|
||||
value.forEach(item=>{
|
||||
item.data.forEach(item=>{
|
||||
item[1] = Number(item[1])
|
||||
item[2] = item[1]*5
|
||||
})
|
||||
})
|
||||
console.log('list',list)
|
||||
|
||||
|
||||
let res = {
|
||||
series:value
|
||||
series:
|
||||
list
|
||||
// [{name:'小型车',data:[[3,3,10],[10,1.5,10],[18,0.5,5],[22,2.5,10]]},
|
||||
// {name:'中型车',data:[[3,1.5,10],[4,2.7,10],[14,2.3,10],[18,1.4,0.50]]},
|
||||
// {name:'大型车',data:[[2,0.7,2],[5,0.2,1],[7,0.7,3],[22,1.9,6]]}]
|
||||
}
|
||||
console.log('res',res)
|
||||
this.drawCharts('timeAnalysis', res)
|
||||
},
|
||||
drawCharts(id, data) {
|
||||
@ -46,13 +64,13 @@ export default {
|
||||
width: _this.width,
|
||||
height: 170,
|
||||
series: data.series,
|
||||
animation: true,
|
||||
animation: false,
|
||||
rotate: false,
|
||||
canvas2d: true,
|
||||
rotateLock: false,
|
||||
background: "#FFFFFF",
|
||||
color: ["#CAD0DA", "#1E80FF"],
|
||||
padding: [5, 30, 5, 5],
|
||||
color: ["#1E80FF", "#00B6FF","#0FC862"],
|
||||
padding: [10, 30, 5, 5],
|
||||
dataLabel: false,
|
||||
enableScroll: false,
|
||||
xAxis: {
|
||||
@ -67,11 +85,11 @@ export default {
|
||||
disabled: false,
|
||||
disableGrid: false,
|
||||
gridType: "dash",
|
||||
splitNumber: 4,
|
||||
splitNumber: 5,
|
||||
data: [
|
||||
{
|
||||
min: 0,
|
||||
max: 4
|
||||
max: 5
|
||||
}
|
||||
]
|
||||
},
|
||||
|
||||
203
pages/commercialBI/components/guest/customerFirst.vue
Normal file
203
pages/commercialBI/components/guest/customerFirst.vue
Normal file
@ -0,0 +1,203 @@
|
||||
<template>
|
||||
<div class="main">
|
||||
<div class="yesterday">
|
||||
<div class="top">
|
||||
<image class="icon" src="/static/images/commercial/datePortrait.svg"></image>
|
||||
<p class="title">昨日客单量</p>
|
||||
</div>
|
||||
<div class="bottom">
|
||||
<div class="item">
|
||||
<p class="price">583</p>
|
||||
<p class="text">客单交易 <text class="unit">/笔</text></p>
|
||||
</div>
|
||||
<div class="item">
|
||||
<p class="price">34.6</p>
|
||||
<p class="text">客单均价 <text class="unit">/元</text></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="month">
|
||||
<div class="top">
|
||||
<image class="icon" src="/static/images/commercial/change.svg"></image>
|
||||
<p class="title">月均客单量</p>
|
||||
</div>
|
||||
<div class="bottom">
|
||||
<div class="item">
|
||||
<p class="price">583</p>
|
||||
<p class="text">客单交易 <text class="unit">/笔</text></p>
|
||||
</div>
|
||||
<div class="item">
|
||||
<p class="price">34.6</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:big+'%'}"></div>
|
||||
<div class="normal" :style="{width:normal+'%',left:big+'%'}"></div>
|
||||
<div class="small" :style="{width:small+'%',left:(Number(big) + Number(normal))+'%'}"></div>
|
||||
</div>
|
||||
<div class="type">
|
||||
<text class="item big">高消费 {{big}}%</text>
|
||||
<text class="item normal">普通消费 {{normal}}%</text>
|
||||
<text class="item small">低消费 {{small}}%</text>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "customerFirst",
|
||||
data() {
|
||||
return {
|
||||
big:'14.8',
|
||||
normal:'41.7',
|
||||
small:'43.5'
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.main{
|
||||
width: 100%;
|
||||
.yesterday,.month{
|
||||
margin-top: 12px;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
background: #F2F1F1;
|
||||
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;
|
||||
box-sizing: border-box;
|
||||
.item{
|
||||
width:50%;
|
||||
padding-left: 22px;
|
||||
.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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.progress{
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
padding-left: 22px;
|
||||
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;
|
||||
}
|
||||
.normal{
|
||||
position: absolute;
|
||||
height: 100%;
|
||||
background: #ACB9CD;
|
||||
border-radius: 2px 0 0 2px;
|
||||
}
|
||||
.small{
|
||||
position: absolute;
|
||||
height: 100%;
|
||||
background: #CAD0DA;
|
||||
border-radius: 2px 0 0 2px;
|
||||
}
|
||||
}
|
||||
.type{
|
||||
display: flex;
|
||||
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;
|
||||
margin-right: 12px;
|
||||
}
|
||||
.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>
|
||||
122
pages/commercialBI/components/guest/customerSecond.vue
Normal file
122
pages/commercialBI/components/guest/customerSecond.vue
Normal file
@ -0,0 +1,122 @@
|
||||
<template>
|
||||
<div class="main">
|
||||
<div class="pk">
|
||||
<div class="gender">
|
||||
<div class="left">
|
||||
<p class="name">男</p>
|
||||
<image class="icon" src="/static/images/commercial/man.svg"></image>
|
||||
</div>
|
||||
<p class="rate">{{man}}%</p>
|
||||
</div>
|
||||
<image class="vs" src="/static/images/commercial/vs.svg"></image>
|
||||
<div class="gender">
|
||||
<div class="right" style="float: right">
|
||||
<image class="icon" src="/static/images/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 + '%'}"></div>
|
||||
<div class="woman" :style="{width: woman + '%'}"></div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "customerSecond",
|
||||
data() {
|
||||
return {
|
||||
man:'64.8',
|
||||
woman:'35.2'
|
||||
}
|
||||
},
|
||||
}
|
||||
</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{
|
||||
width: 100%;
|
||||
height: 14px;
|
||||
margin-top: 8px;
|
||||
position: relative;
|
||||
.man{
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
left: 0;top: 0;
|
||||
background: #1E80FF;
|
||||
margin-right: 2px;
|
||||
border-radius: 2px 0 0 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 ;
|
||||
}
|
||||
.woman:after{
|
||||
position: absolute;
|
||||
content:'';
|
||||
width: 1px;
|
||||
height: 100%;
|
||||
background: #FFFFFF;
|
||||
z-index:9;
|
||||
left: 0;
|
||||
top: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
277
pages/commercialBI/components/headerTop.vue
Normal file
277
pages/commercialBI/components/headerTop.vue
Normal file
@ -0,0 +1,277 @@
|
||||
<template>
|
||||
<div class="header" :style="{backgroundImage: 'url('+ bgUrl +')'}">
|
||||
<div class="headerTop" :style="{height:(menu.bottom + 6) + 'px'}">
|
||||
<div class="box" :style="{top:(menu.bottom - (menu.height / 2)) + 'px'}">
|
||||
<div class="icon" @click="handleBack">
|
||||
<image class="img" src="/static/images/commercial/navigation-left.svg"></image>
|
||||
</div>
|
||||
<text class="title">{{title}}</text>
|
||||
<div class="seize"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="serviceArea" :style="{top : (menu.bottom + 14) + 'px'}">
|
||||
<picker class="picker" @change="bindPickerChange" :value="serviceIndex" :range="serviceArray">
|
||||
<div class="selectService">
|
||||
<image class="img" src="/static/images/commercial/fixed.svg"></image>
|
||||
<view class="select">
|
||||
<view class="content">
|
||||
<view class="uni-input">{{serviceArray[serviceIndex]}}</view>
|
||||
<text class="area">{{area}}</text>
|
||||
<image class="rightArrow" src="/static/images/commercial/rightArrow.svg"></image>
|
||||
</view>
|
||||
</view>
|
||||
</div>
|
||||
</picker>
|
||||
<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">
|
||||
<text class="title">分析</text>
|
||||
<text class="content">新桥服务区入区车辆主要来自杭州市, 入车车辆主要是普通车型(30-60万)</text>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
export default {
|
||||
name: "headerTop",
|
||||
props:{
|
||||
menu:{
|
||||
type: Object,
|
||||
default: ()=>{}
|
||||
},
|
||||
bgUrl:{
|
||||
type:String,
|
||||
default: ""
|
||||
},
|
||||
bgColor:{
|
||||
type:String,
|
||||
default: ""
|
||||
},
|
||||
title:{
|
||||
type:String,
|
||||
default: ""
|
||||
},
|
||||
labelList:{
|
||||
type:Array,
|
||||
default:()=>[]
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
||||
}
|
||||
},
|
||||
onLoad(){
|
||||
|
||||
},
|
||||
methods:{
|
||||
bindPickerChange(){
|
||||
|
||||
},
|
||||
//返回上一级
|
||||
handleBack(){
|
||||
uni.navigateBack({
|
||||
delta: 1
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.header{
|
||||
width: 100%;
|
||||
height: calc(1.056 * 100vw);
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
padding: 0 16px;
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
.headerTop{
|
||||
width: 100vw;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
.box{
|
||||
padding: 0 16px;
|
||||
position: absolute;
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
transform: translateY(-50%);
|
||||
.icon{
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
.img{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
.title{
|
||||
font-size: 36rpx;
|
||||
font-family: PingFangSC-Medium, PingFang SC;
|
||||
font-weight: 600;
|
||||
color: #1C2130;
|
||||
line-height: 56rpx;
|
||||
}
|
||||
.seize{
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.serviceArea{
|
||||
width: calc(100% - 32px);
|
||||
position: absolute;
|
||||
box-sizing: border-box;
|
||||
.picker{
|
||||
.selectService{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
display: flex;
|
||||
.img{
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
z-index: 2;
|
||||
}
|
||||
.select{
|
||||
width: 174px;
|
||||
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;
|
||||
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: 11px;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
.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>
|
||||
41
pages/commercialBI/formatPortrait.vue
Normal file
41
pages/commercialBI/formatPortrait.vue
Normal file
@ -0,0 +1,41 @@
|
||||
<template>
|
||||
<div class="main">
|
||||
<header-top :bgUrl="bgUrl" :menu="menu" :bgColor="bgColor" :title="title" :labelList="labelList"/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import headerTop from "./components/headerTop.vue";
|
||||
|
||||
export default {
|
||||
name: "businessPortrait",
|
||||
components: {headerTop},
|
||||
data() {
|
||||
return {
|
||||
labelList:['女性','高消费','喜爱奶茶','浙江','20-30岁','江苏'],//标签
|
||||
title:'业态品牌',//页面标题
|
||||
bgColor: '180deg, #459FFF 0%, #473AFF 100%',
|
||||
bgUrl: 'https://eshangtech.com/ShopICO/ahyd-BID/commercial/formatPortraitBg.svg',//背景图片路径
|
||||
time: '',//跳转携带的时间
|
||||
menu: {},//手机配置信息
|
||||
}
|
||||
},
|
||||
onLoad(option) {
|
||||
//跳转的时候带上时间
|
||||
this.time = option.time
|
||||
// 获取手机参数对页面进行适配
|
||||
let systemInfo = uni.getSystemInfoSync()
|
||||
// 把获取到的手机参数保存
|
||||
uni.setStorageSync('phoneInfo', systemInfo)
|
||||
this.statusBarHeight = Number(systemInfo.statusBarHeight)
|
||||
this.menu = uni.getMenuButtonBoundingClientRect()
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.main {
|
||||
width: 100vw;
|
||||
min-height: 100vh;
|
||||
}
|
||||
</style>
|
||||
70
pages/commercialBI/guestPortrait.vue
Normal file
70
pages/commercialBI/guestPortrait.vue
Normal file
@ -0,0 +1,70 @@
|
||||
<template>
|
||||
<div class="main">
|
||||
<header-top :bgUrl="bgUrl" :menu="menu" :bgColor="bgColor" :title="title" :labelList="labelList"/>
|
||||
|
||||
<div class="charts">
|
||||
<div class="chartsItem">
|
||||
<p class="title">客群分析</p>
|
||||
<customer-first />
|
||||
</div>
|
||||
<div class="chartsItem" style="margin-top: 32px">
|
||||
<p class="title">客群分析</p>
|
||||
<customer-second />
|
||||
<analyse />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import headerTop from "./components/headerTop.vue";
|
||||
import customerFirst from "./components/guest/customerFirst.vue";
|
||||
import customerSecond from "./components/guest/customerSecond.vue";
|
||||
import analyse from "./components/analyse.vue";
|
||||
export default {
|
||||
name: "guestPortrait",
|
||||
components:{analyse, headerTop,customerFirst,customerSecond},
|
||||
data() {
|
||||
return {
|
||||
labelList:['女性','高消费','喜爱奶茶','浙江','20-30岁','江苏'],//标签
|
||||
title:'客群画像',//页面标题
|
||||
bgColor:'180deg, #30C8ED 0%, #0B9353 100%',//标签背景颜色
|
||||
bgUrl:'https://eshangtech.com/ShopICO/ahyd-BID/commercial/guestPortraitBg.svg',//背景图片路径
|
||||
time:'',//跳转携带的时间
|
||||
menu:{},//手机配置信息
|
||||
}
|
||||
},
|
||||
onLoad(option){
|
||||
//跳转的时候带上时间
|
||||
this.time = option.time
|
||||
// 获取手机参数对页面进行适配
|
||||
let systemInfo = uni.getSystemInfoSync()
|
||||
// 把获取到的手机参数保存
|
||||
uni.setStorageSync('phoneInfo',systemInfo)
|
||||
this.statusBarHeight = Number(systemInfo.statusBarHeight)
|
||||
this.menu = uni.getMenuButtonBoundingClientRect()
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.main{
|
||||
width: 100vw;
|
||||
min-height: 100vh;
|
||||
.charts{
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
padding: 28px 16px 0;
|
||||
background: #fff;
|
||||
.chartsItem{
|
||||
.title{
|
||||
font-size: 17px;
|
||||
font-family: PingFangSC-Semibold, PingFang SC;
|
||||
font-weight: 600;
|
||||
color: #160002;
|
||||
line-height: 24px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
41
pages/commercialBI/managePortrait.vue
Normal file
41
pages/commercialBI/managePortrait.vue
Normal file
@ -0,0 +1,41 @@
|
||||
<template>
|
||||
<div class="main">
|
||||
<header-top :bgUrl="bgUrl" :menu="menu" :bgColor="bgColor" :title="title" :labelList="labelList"/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import headerTop from "./components/headerTop.vue";
|
||||
|
||||
export default {
|
||||
name: "businessPortrait",
|
||||
components: {headerTop},
|
||||
data() {
|
||||
return {
|
||||
labelList:['女性','高消费','喜爱奶茶','浙江','20-30岁','江苏'],//标签
|
||||
title:'经营画像',//页面标题
|
||||
bgColor: '180deg, #996CFF 0%, #5D43F8 100%',
|
||||
bgUrl: 'https://eshangtech.com/ShopICO/ahyd-BID/commercial/managePortraitBg.svg',//背景图片路径
|
||||
time: '',//跳转携带的时间
|
||||
menu: {},//手机配置信息
|
||||
}
|
||||
},
|
||||
onLoad(option) {
|
||||
//跳转的时候带上时间
|
||||
this.time = option.time
|
||||
// 获取手机参数对页面进行适配
|
||||
let systemInfo = uni.getSystemInfoSync()
|
||||
// 把获取到的手机参数保存
|
||||
uni.setStorageSync('phoneInfo', systemInfo)
|
||||
this.statusBarHeight = Number(systemInfo.statusBarHeight)
|
||||
this.menu = uni.getMenuButtonBoundingClientRect()
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.main {
|
||||
width: 100vw;
|
||||
min-height: 100vh;
|
||||
}
|
||||
</style>
|
||||
@ -299,8 +299,9 @@
|
||||
let canToSeverpartIndex = !provinceId ? this.hasSeverpartIndexAuthority : this.PushAuthority.some(n => {
|
||||
return n.ProvinceCode == provinceId && n.ShopAnalysisType == 1
|
||||
})
|
||||
|
||||
this.$util.toNextRoute('navigateTo', canToSeverpartIndex ? severpartIndexPath : serverpartUploadPath)
|
||||
console.log('severpartIndexPath',severpartIndexPath)
|
||||
console.log('canToSeverpartIndex',canToSeverpartIndex)
|
||||
this.$util.toNextRoute('navigateTo', severpartIndexPath)
|
||||
|
||||
item.visited = true
|
||||
this.$forceUpdate()
|
||||
@ -348,7 +349,6 @@
|
||||
}
|
||||
const ctx = uni.createCanvasContext(obj.id, this);
|
||||
data.series = data.series.concat(obj.data)
|
||||
console.log('data.series',data.series)
|
||||
rincanvas[obj.id] = new uCharts({
|
||||
// 小程序图表工具
|
||||
// $this: this,
|
||||
@ -456,6 +456,12 @@
|
||||
let _this = this
|
||||
const [reginList, totalData, busniessTypePie, busniessTradePie, busniessAreaPie, bayonetPie] =
|
||||
await anhuiYestodayRevenueData.getData(this.theRequest) // 获取实时数据
|
||||
console.log('reginList',reginList)
|
||||
console.log('totalData',totalData)
|
||||
console.log('busniessTypePie',busniessTypePie)
|
||||
console.log('busniessTradePie',busniessTradePie)
|
||||
console.log('busniessAreaPie',busniessAreaPie)
|
||||
console.log('bayonetPie',bayonetPie)
|
||||
|
||||
if (this.theRequest.GroupType !== 1010) {
|
||||
this.regionList = reginList // 营收上传列表 reginListModel[]
|
||||
@ -1350,7 +1356,11 @@
|
||||
.operation-c-list {
|
||||
padding: 16rpx 32rpx;
|
||||
}
|
||||
|
||||
.operation-cl-unit{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
.operation-cl-unit1 {
|
||||
width: 100%;
|
||||
font-size: 26rpx;
|
||||
@ -1381,11 +1391,6 @@
|
||||
border-radius: 4rpx;
|
||||
margin-top: 12rpx;
|
||||
}
|
||||
.operation-c-list .operation-cl-unit{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.operation-c-list .progress .bgO {
|
||||
height: 12rpx;
|
||||
|
||||
@ -151,7 +151,7 @@
|
||||
</div>
|
||||
<div class="check-unit">
|
||||
<text>商品均价</text>
|
||||
<div class="check-price-color">{{$util.fmoney(headMsg.countave,2)}} <text>元</text></div>
|
||||
<div class="check-price-color">{{$util.fmoney(headMsg.countave,2) }} <text>元</text></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="uni-flex justify-around mode-content" style="padding-bottom: 24rpx;" v-if="provinceCode==620000">
|
||||
|
||||
@ -1,9 +1,6 @@
|
||||
import request from '@/util/index.js'
|
||||
const methods = {
|
||||
async getData(obj,isServerPartDetail,value) { // 获取远程数据 value判断是不是正常进来 是的话俩接口不调
|
||||
console.log('obj',obj)
|
||||
console.log('isServerPartDetail',isServerPartDetail)
|
||||
console.log('getData',value)
|
||||
async getData(obj,isServerPartDetail) { // 获取远程数据
|
||||
let _this = this
|
||||
/* ts 数据类型声明
|
||||
type serverpartRegion = {
|
||||
@ -23,13 +20,11 @@ const methods = {
|
||||
Statistics_Month: obj.month ,
|
||||
Province_Code: obj.ProvinceCode ,
|
||||
pushProvinceCode: obj.ProvinceCode ,
|
||||
provinceCode:obj.ProvinceCode,
|
||||
Serverpart_ID: obj.GroupType != 1020 ? obj.ServerpartIds : '',
|
||||
Serverpart_ID: obj.ServerpartIds ? obj.ServerpartIds : '',
|
||||
SPRegionType_ID: obj.GroupType == 1020 ? obj.ServerpartIds : '',
|
||||
// Revenue_Include: 1
|
||||
}
|
||||
this.provinceCode = obj.ProvinceCode
|
||||
console.log('requestParamas',requestParamas)
|
||||
// 营收数据
|
||||
const data = await request.$webGet('CommercialApi/Revenue/GetRevenuePushList', requestParamas)
|
||||
if (data.Result_Code != 100) return
|
||||
@ -39,42 +34,20 @@ const methods = {
|
||||
if (busniessCounts.Result_Code != 100) return
|
||||
|
||||
// 业态关系
|
||||
console.log('开始请求接口',new Date().getTime())
|
||||
const tradeData = await request.$webGet('CommercialApi/BaseInfo/GetBusinessTradeList', requestParamas)
|
||||
if (tradeData.Result_Code != 100) return
|
||||
|
||||
|
||||
// 计划营收金额
|
||||
let budgetAmount = {
|
||||
Result_Data:{
|
||||
List:[]
|
||||
}
|
||||
}
|
||||
if (!value){
|
||||
budgetAmount = await request.$webGet('CommercialApi/Revenue/GetBudgetExpenseList', requestParamas)
|
||||
const budgetAmount = await request.$webGet('CommercialApi/Revenue/GetBudgetExpenseList', requestParamas)
|
||||
if (budgetAmount.Result_Code != 100) return
|
||||
}
|
||||
|
||||
|
||||
// 移动支付分账数据
|
||||
const mobileShare = await request.$webGet('CommercialApi/Revenue/GetMobileShare', requestParamas)
|
||||
if (mobileShare.Result_Code != 100) return
|
||||
|
||||
// 万佳商城配送数据
|
||||
const mallDeliver = await request.$webGet('CommercialApi/Revenue/GetMallDeliver', requestParamas)
|
||||
if (mallDeliver.Result_Code != 100) return
|
||||
|
||||
// 片区车流量
|
||||
let bayonetCount = {
|
||||
Result_Data:{
|
||||
List:[]
|
||||
}
|
||||
}
|
||||
if (!value){
|
||||
bayonetCount = await request.$webGet('CommercialApi/Revenue/GetSPBayonetList', requestParamas)
|
||||
const bayonetCount = await request.$webGet('CommercialApi/Revenue/GetSPBayonetList', requestParamas)
|
||||
if (bayonetCount.Result_Code != 100) return
|
||||
}
|
||||
|
||||
|
||||
if (isServerPartDetail) { // 是服务区营收推送页面
|
||||
return _this.getSeverpartReginList(data.Result_Data.List, busniessCounts.Result_Data.List,
|
||||
@ -82,7 +55,7 @@ const methods = {
|
||||
}
|
||||
return _this.getReginList(data.Result_Data.List, busniessCounts.Result_Data.List,
|
||||
tradeData.Result_Data.List, budgetAmount.Result_Data.List,
|
||||
bayonetCount.Result_Data.List, mobileShare.Result_Data, mallDeliver.Result_Data)
|
||||
bayonetCount.Result_Data.List, mobileShare.Result_Data)
|
||||
// [reginList, totalData, busniessTypePie, busniessTradePie]
|
||||
|
||||
},
|
||||
|
||||
@ -524,7 +524,9 @@
|
||||
let canToSeverpartIndex = !provinceId ? this.hasSeverpartIndexAuthority : this.PushAuthority.some(n => {
|
||||
return n.ProvinceCode == provinceId && n.ShopAnalysisType == 1
|
||||
})
|
||||
this.$util.toNextRoute('navigateTo', canToSeverpartIndex ? severpartIndexPath : serverpartUploadPath)
|
||||
console.log('severpartIndexPath',severpartIndexPath)
|
||||
console.log('canToSeverpartIndex',canToSeverpartIndex)
|
||||
this.$util.toNextRoute('navigateTo', severpartIndexPath)
|
||||
item.visited = true
|
||||
this.$forceUpdate()
|
||||
|
||||
@ -586,6 +588,7 @@
|
||||
}
|
||||
|
||||
this.$request.$get('getRevenuePush', arr).then(res => {
|
||||
console.log('res',res)
|
||||
_this.isLoading = false
|
||||
if (res.ResultCode != 100) {
|
||||
uni.hideLoading()
|
||||
@ -700,7 +703,7 @@
|
||||
},
|
||||
operationFn(data, ohterData) { //昨日营收占比
|
||||
var _this = this;
|
||||
console.log(1)
|
||||
console.log(1)
|
||||
if (data.SHOWBUSINESSTRADE == 1) { // 业态营收占比
|
||||
var colors1 = ['#5E67B4', '#4E5699', '#75B7AD', '#AFB7E6'];
|
||||
var SHOWBUSINESSTRADE = [
|
||||
@ -1837,7 +1840,8 @@ console.log(1)
|
||||
padding: 16rpx 32rpx;
|
||||
}
|
||||
|
||||
.operation-cl-unit {
|
||||
.operation-c-list .operation-cl-unit {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
|
||||
@ -363,10 +363,10 @@ export default {
|
||||
{ name: '入区率', unit: '', price: 0 },
|
||||
{ name: '停留时长', unit: '', price: 0 },],
|
||||
tabTypeList:[ { imgUrl: '/static/images/index/car.svg', path: '/pages/commercialBI/carPortrait', name: '车流画像' },
|
||||
{ imgUrl: '/static/images/index/guest.svg', path: '', name: '客群画像' },
|
||||
{ imgUrl: '/static/images/index/business_icon.svg', path: '', name: '经营画像' },
|
||||
{ imgUrl: '/static/images/index/trade.svg', path: '', name: '交易画像' },
|
||||
{ imgUrl: '/static/images/index/brand.svg', path: '', name: '业态品牌' },],
|
||||
{ imgUrl: '/static/images/index/guest.svg', path: '/pages/commercialBI/guestPortrait', name: '客群画像' },
|
||||
{ imgUrl: '/static/images/index/business_icon.svg', path: '/pages/commercialBI/managePortrait', name: '经营画像' },
|
||||
{ imgUrl: '/static/images/index/trade.svg', path: '/pages/commercialBI/businessPortrait', name: '交易画像' },
|
||||
{ imgUrl: '/static/images/index/brand.svg', path: '/pages/commercialBI/formatPortrait', name: '业态品牌' },],
|
||||
detailTypeList:[{ name: '分润门店', unit: '/个', value: '-',yesterValue:'-', add: '-', imgIcon: '/static/images/index/store.svg' },
|
||||
{ name: '驿达分润', unit: '/元', value: '-',yesterValue:'-', imgIcon: '/static/images/index/yidaFenrun.svg' },
|
||||
{ name: '订单配送', unit: '/单', value: '-',yesterValue:'-', add: '-', imgIcon: '/static/images/index/orderDelivery.svg' },
|
||||
@ -473,7 +473,7 @@ export default {
|
||||
this.$util.toNextRoute('navigateTo', `/pages/operatingStatements/index?time=${this.lastDay}`)
|
||||
},
|
||||
handleGoTab(item){
|
||||
this.$util.toNextRoute('navigateTo', item.path)
|
||||
this.$util.toNextRoute('navigateTo', `${item.path}?time=${this.lastDay}&Serverpart_ID=372`)
|
||||
},
|
||||
getData(option){
|
||||
//老代码
|
||||
|
||||
@ -55,7 +55,14 @@
|
||||
export default {
|
||||
name: "userList",
|
||||
props:{
|
||||
'item':Object
|
||||
item:{
|
||||
type:Object,
|
||||
default:()=>{}
|
||||
},
|
||||
lastDay:{
|
||||
type:String,
|
||||
default:""
|
||||
}
|
||||
},
|
||||
data(){
|
||||
return{
|
||||
@ -69,10 +76,14 @@ export default {
|
||||
handleGo(item){
|
||||
console.log('item',item)
|
||||
if (item.value!==3 && item.value!==4){
|
||||
this.$util.toNextRoute('navigateTo', item.homeUrl)
|
||||
}else if(item.value ===3 && item.isNotice || item.value ===4 && item.isNotice){
|
||||
this.$util.toNextRoute('navigateTo', item.homeUrl)
|
||||
if (item.value===2){
|
||||
this.$util.toNextRoute('navigateTo', `${item.homeUrl}?time=${this.lastDay}&Serverpart_ID=372`)
|
||||
}else{
|
||||
this.$util.toNextRoute('navigateTo', item.homeUrl)
|
||||
}
|
||||
}else if(item.value === 3 && item.isNotice || item.value ===4 && item.isNotice){
|
||||
this.$util.toNextRoute('navigateTo', item.homeUrl)
|
||||
} else{
|
||||
uni.showToast({title: '暂无权限,请联系管理员', icon: 'none'})
|
||||
}
|
||||
}
|
||||
|
||||
@ -39,10 +39,10 @@
|
||||
</view>
|
||||
|
||||
<view class="menu" :style="{ top: -(117 - menu.bottom) + 'px' }">
|
||||
<userList v-for="(item, index) in dataList" :key="index" :item='item' ></userList>
|
||||
<userList v-for="(item, index) in dataList" :key="index" :item='item' :lastDay="lastDay"></userList>
|
||||
</view>
|
||||
|
||||
<Tabbar ref="tabbar" :page="page"></Tabbar>
|
||||
<Tabbar ref="tabbar" :page="page" ></Tabbar>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
@ -52,10 +52,12 @@ import {mapActions, mapState} from 'vuex'
|
||||
import Tabbar from "../../components/tabbar/tabbar.vue";
|
||||
export default {
|
||||
data() {
|
||||
const lastDay = this.$util.cutDate(new Date(), 'YYYY-MM-DD', -1)
|
||||
return {
|
||||
page:'/pages/userCenter/userCenter',
|
||||
statusBarHeight:'',
|
||||
menu:'',
|
||||
lastDay:lastDay,
|
||||
userLists:[ { url: '/static/images/user/position.svg', name: '我的服务区', value: 1 },
|
||||
{ url: '/static/images/user/limit.svg', name: '我的权限', value: 2 },],
|
||||
dataList :[
|
||||
@ -96,37 +98,42 @@ import Tabbar from "../../components/tabbar/tabbar.vue";
|
||||
{
|
||||
id:'',
|
||||
name: '车流',
|
||||
homeUrl: '/commercialPortrait/traffic/index',
|
||||
homeUrl: '/pages/commercialBI/carPortrait',
|
||||
imagePath: '/static/images/user/traffic.svg',
|
||||
isNotice:''
|
||||
isNotice:'',
|
||||
value: 2,
|
||||
},
|
||||
{
|
||||
id:'',
|
||||
name: '客群',
|
||||
homeUrl: '/commercialPortrait/customerGroup/index',
|
||||
homeUrl: '/pages/commercialBI/guestPortrait',
|
||||
imagePath: '/static/images/user/customerGroup.svg',
|
||||
isNotice:''
|
||||
isNotice:'',
|
||||
value: 2,
|
||||
},
|
||||
{
|
||||
id:'',
|
||||
name: '经营',
|
||||
homeUrl: '/commercialPortrait/manage/index',
|
||||
homeUrl: '/pages/commercialBI/managePortrait',
|
||||
imagePath: '/static/images/user/manage.svg',
|
||||
isNotice:''
|
||||
isNotice:'',
|
||||
value: 2,
|
||||
},
|
||||
{
|
||||
id:'',
|
||||
name: '交易',
|
||||
homeUrl: '/commercialPortrait/business/index',
|
||||
homeUrl: '/pages/commercialBI/businessPortrait',
|
||||
imagePath: '/static/images/user/business.svg',
|
||||
isNotice:''
|
||||
isNotice:'',
|
||||
value: 2,
|
||||
},
|
||||
{
|
||||
id:'',
|
||||
name: '品牌',
|
||||
homeUrl: '/commercialPortrait/brand/index',
|
||||
homeUrl: '/pages/commercialBI/formatPortrait',
|
||||
imagePath: '/static/images/user/brand.svg',
|
||||
isNotice:''
|
||||
isNotice:'',
|
||||
value: 2,
|
||||
},
|
||||
],
|
||||
},
|
||||
|
||||
27
static/images/commercial/change.svg
Normal file
27
static/images/commercial/change.svg
Normal file
@ -0,0 +1,27 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg width="20px" height="20px" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<title>图标/消费转化率@2x</title>
|
||||
<defs>
|
||||
<linearGradient x1="50%" y1="-20.594057%" x2="50%" y2="100%" id="linearGradient-1">
|
||||
<stop stop-color="#30C8ED" offset="0%"></stop>
|
||||
<stop stop-color="#0B9353" offset="100%"></stop>
|
||||
</linearGradient>
|
||||
<linearGradient x1="50%" y1="-20.594057%" x2="50%" y2="100%" id="linearGradient-2">
|
||||
<stop stop-color="#30C8ED" offset="0%"></stop>
|
||||
<stop stop-color="#0B9353" offset="100%"></stop>
|
||||
</linearGradient>
|
||||
<linearGradient x1="50%" y1="-20.594057%" x2="50%" y2="100%" id="linearGradient-3">
|
||||
<stop stop-color="#30C8ED" offset="0%"></stop>
|
||||
<stop stop-color="#0B9353" offset="100%"></stop>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<g id="商业BI-0330" transform="translate(-293.000000, -2897.000000)">
|
||||
<g id="形状结合" transform="translate(293.000000, 2897.000000)">
|
||||
<path d="M10,0 L10.001,3.33333341 C10.0006667,3.33333336 10.0003334,3.33333333 10,3.33333333 C6.31810167,3.33333333 3.33333333,6.31810167 3.33333333,10 C3.33333333,13.6818983 6.31810167,16.6666667 10,16.6666667 C11.2715227,16.6666667 12.4599037,16.3106951 13.4709229,15.6929724 L15.8733179,18.0943411 C14.2242251,19.2930043 12.1946764,20 10,20 C4.4771525,20 0,15.5228475 0,10 C0,4.4771525 4.4771525,0 10,0 Z" fill="url(#linearGradient-1)" opacity="0.200000003"></path>
|
||||
<path d="M20,10 C20,12.8547837 18.8037493,15.4301681 16.8851724,17.2522287 L14.5906461,14.8343146 C15.869387,13.6196366 16.6666667,11.9029256 16.6666667,10 L20,10 L20,10 Z" fill="url(#linearGradient-2)" opacity="0.600000024"></path>
|
||||
<path d="M19.934259,8.84709356 L16.5699741,8.8622983 C16.0921601,6.08340754 13.8941887,3.89264931 11.1116334,3.42559702 L11.1108224,0.0610000629 C15.7321473,0.571726083 19.4044231,4.23155417 19.934259,8.84709356 Z" fill="url(#linearGradient-3)"></path>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.2 KiB |
29
static/images/commercial/datePortrait.svg
Normal file
29
static/images/commercial/datePortrait.svg
Normal file
@ -0,0 +1,29 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg width="20px" height="20px" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<title>图标/消费转化率@2x</title>
|
||||
<defs>
|
||||
<linearGradient x1="50%" y1="-20.594057%" x2="50%" y2="100%" id="linearGradient-1">
|
||||
<stop stop-color="#30C8ED" offset="0%"></stop>
|
||||
<stop stop-color="#0B9353" offset="100%"></stop>
|
||||
</linearGradient>
|
||||
<linearGradient x1="50%" y1="-20.594057%" x2="50%" y2="100%" id="linearGradient-2">
|
||||
<stop stop-color="#30C8ED" offset="0%"></stop>
|
||||
<stop stop-color="#0B9353" offset="100%"></stop>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<g id="商业BI-0330" transform="translate(-253.000000, -2897.000000)">
|
||||
<g id="编组" transform="translate(253.000000, 2897.000000)">
|
||||
<g id="编组-81" transform="translate(1.000000, 0.000000)">
|
||||
<path d="M2,3 L16,3 C17.1045695,3 18,3.8954305 18,5 L18,17 C18,18.1045695 17.1045695,19 16,19 L2,19 C0.8954305,19 1.3527075e-16,18.1045695 0,17 L0,5 C-1.3527075e-16,3.8954305 0.8954305,3 2,3 Z" id="矩形" fill="url(#linearGradient-1)" opacity="0.200000003"></path>
|
||||
<path d="M2,3 L16,3 C17.1045695,3 18,3.8954305 18,5 L18,7 L18,7 L0,7 L0,5 C-1.3527075e-16,3.8954305 0.8954305,3 2,3 Z" id="矩形备份-2" fill="url(#linearGradient-2)"></path>
|
||||
<rect id="矩形" stroke="#F3F5F7" fill="#129C6E" x="3.5" y="0.5" width="3" height="5" rx="1.5"></rect>
|
||||
<rect id="矩形备份" stroke="#F3F5F7" fill="#129C6E" x="11.5" y="0.5" width="3" height="5" rx="1.5"></rect>
|
||||
</g>
|
||||
<rect id="矩形" fill="#FFFFFF" x="3.5" y="9" width="3" height="3"></rect>
|
||||
<rect id="矩形备份-3" fill="#FFFFFF" x="8.5" y="9" width="3" height="3"></rect>
|
||||
<rect id="矩形备份-4" fill="#FFFFFF" x="13.5" y="9" width="3" height="3"></rect>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.1 KiB |
12
static/images/commercial/man.svg
Normal file
12
static/images/commercial/man.svg
Normal file
@ -0,0 +1,12 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<title>图标/男@2x</title>
|
||||
<g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<g id="商业BI-0330" transform="translate(-333.000000, -2897.000000)" fill-rule="nonzero">
|
||||
<g id="man" transform="translate(333.000000, 2897.000000)">
|
||||
<rect id="矩形" fill="#000000" opacity="0" x="0" y="0" width="16" height="16"></rect>
|
||||
<path d="M13.65625,1.875 L9.71875,1.875 C9.6671875,1.875 9.625,1.9171875 9.625,1.96875 L9.625,2.84375 C9.625,2.8953125 9.6671875,2.9375 9.71875,2.9375 L12.225,2.9375 L9.1109375,6.0515625 C8.3296875,5.45 7.3765625,5.125 6.375,5.125 C5.1734375,5.125 4.0421875,5.59375 3.19375,6.44375 C2.3453125,7.29375 1.875,8.4234375 1.875,9.625 C1.875,10.8265625 2.34375,11.9578125 3.19375,12.80625 C4.0421875,13.65625 5.1734375,14.125 6.375,14.125 C7.5765625,14.125 8.7078125,13.65625 9.55625,12.80625 C10.40625,11.9578125 10.875,10.8265625 10.875,9.625 C10.875,8.6234375 10.55,7.6734375 9.95,6.8921875 L13.0625,3.7796875 L13.0625,6.28125 C13.0625,6.3328125 13.1046875,6.375 13.15625,6.375 L14.03125,6.375 C14.0828125,6.375 14.125,6.3328125 14.125,6.28125 L14.125,2.34375 C14.125,2.0859375 13.9140625,1.875 13.65625,1.875 Z M6.375,12.9375 C4.5484375,12.9375 3.0625,11.4515625 3.0625,9.625 C3.0625,7.7984375 4.5484375,6.3125 6.375,6.3125 C8.2015625,6.3125 9.6875,7.7984375 9.6875,9.625 C9.6875,11.4515625 8.2015625,12.9375 6.375,12.9375 Z" id="形状" fill="#1E80FF"></path>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.7 KiB |
12
static/images/commercial/navigation-left.svg
Normal file
12
static/images/commercial/navigation-left.svg
Normal file
@ -0,0 +1,12 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<title>导航栏/nor@2x</title>
|
||||
<g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<g id="商业BI-0330" transform="translate(-169.000000, -2953.000000)">
|
||||
<g id="Icon/导航栏/线性/24_nor" transform="translate(169.000000, 2953.000000)">
|
||||
<rect id="矩形" x="0" y="0" width="24" height="24"></rect>
|
||||
<path d="M12.2071068,4.22182541 C12.5976311,4.6123497 12.5976311,5.24551468 12.2071068,5.63603897 L6.84293219,10.9999322 L19.5,11 C20.0522847,11 20.5,11.4477153 20.5,12 C20.5,12.5522847 20.0522847,13 19.5,13 L6.84393219,12.9999322 L12.2071068,18.363961 C12.5976311,18.7544853 12.5976311,19.3876503 12.2071068,19.7781746 C11.8165825,20.1686989 11.1834175,20.1686989 10.7928932,19.7781746 L3.72182541,12.7071068 C3.33130112,12.3165825 3.33130112,11.6834175 3.72182541,11.2928932 L10.7928932,4.22182541 C11.1834175,3.83130112 11.8165825,3.83130112 12.2071068,4.22182541 Z" id="形状结合" fill="#1C2130"></path>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.2 KiB |
15
static/images/commercial/vs.svg
Normal file
15
static/images/commercial/vs.svg
Normal file
@ -0,0 +1,15 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg width="60px" height="36px" viewBox="0 0 60 36" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<title>编组_14@2x</title>
|
||||
<g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<g id="商业BI-0330" transform="translate(-221.000000, -2977.000000)">
|
||||
<g id="编组-14" transform="translate(221.000000, 2977.000000)">
|
||||
<rect id="矩形" fill="#F2F2F5" x="0" y="17.5" width="60" height="1"></rect>
|
||||
<circle id="椭圆形" stroke="#F2F2F5" fill="#FFFFFF" cx="30" cy="18" r="17.5"></circle>
|
||||
<text id="vs" font-family="PingFangSC-Regular, PingFang SC" font-size="14" font-weight="normal" fill="#786B6C">
|
||||
<tspan x="23" y="22">vs</tspan>
|
||||
</text>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 908 B |
12
static/images/commercial/woman.svg
Normal file
12
static/images/commercial/woman.svg
Normal file
@ -0,0 +1,12 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<title>图标/女@2x</title>
|
||||
<g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<g id="商业BI-0330" transform="translate(-369.000000, -2897.000000)">
|
||||
<g id="woman" transform="translate(369.000000, 2897.000000)">
|
||||
<rect id="矩形" fill="#000000" fill-rule="nonzero" opacity="0" x="0" y="0" width="16" height="16"></rect>
|
||||
<path d="M11.1375,8.575 C11.975,7.7375 12.4375,6.621875 12.4375,5.4375 C12.4375,4.2515625 11.9765625,3.1375 11.1375,2.3 C10.3,1.4625 9.184375,1 8,1 C6.815625,1 5.7,1.4609375 4.8625,2.3 C4.025,3.1390625 3.5625,4.2515625 3.5625,5.4375 C3.5625,6.434375 3.8890625,7.38125 4.490625,8.1546875 C4.6046875,8.3015625 4.728125,8.440625 4.8609375,8.575 C4.99375,8.7078125 5.134375,8.83125 5.2796875,8.9453125 C5.8984375,9.4265625 6.628125,9.7328125 7.40625,9.8359375 L7.40625,11.5 L5.625,11.5 C5.55625,11.5 5.5,11.55625 5.5,11.625 L5.5,12.5625 C5.5,12.63125 5.55625,12.6875 5.625,12.6875 L7.40625,12.6875 L7.40625,14.875 C7.40625,14.94375 7.4625,15 7.53125,15 L8.46875,15 C8.5375,15 8.59375,14.94375 8.59375,14.875 L8.59375,12.6875 L10.375,12.6875 C10.44375,12.6875 10.5,12.63125 10.5,12.5625 L10.5,11.625 C10.5,11.55625 10.44375,11.5 10.375,11.5 L8.59375,11.5 L8.59375,9.8359375 C9.5546875,9.7078125 10.440625,9.271875 11.1375,8.575 Z M8,8.6875 C7.13125,8.6875 6.3171875,8.35 5.7015625,7.7359375 C5.0875,7.121875 4.75,6.30625 4.75,5.4375 C4.75,4.56875 5.0875,3.7546875 5.7015625,3.1390625 C6.315625,2.5234375 7.13125,2.1875 8,2.1875 C8.86875,2.1875 9.6828125,2.525 10.2984375,3.1390625 C10.9125,3.753125 11.25,4.56875 11.25,5.4375 C11.25,6.30625 10.9125,7.1203125 10.2984375,7.7359375 C9.6828125,8.35 8.86875,8.6875 8,8.6875 Z" id="形状" fill="#00C2FF"></path>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.9 KiB |
Loading…
x
Reference in New Issue
Block a user