update
This commit is contained in:
parent
e7549a81d3
commit
cb36f0ba40
@ -1,23 +1,72 @@
|
||||
<template>
|
||||
<div class="main">
|
||||
<header-top :bgUrl="bgUrl" :menu="menu" :bgColor="bgColor" :title="title" :labelList="labelList"/>
|
||||
<header-top :bgUrl="bgUrl" :menu="menu" :bgColor="bgColor" :title="title" :labelList="labelList" :topBg="topBg"/>
|
||||
|
||||
<div class="charts">
|
||||
<div class="chartsItem">
|
||||
<p class="title">交易分析</p>
|
||||
<transaction-analysis :data="transactionList" />
|
||||
</div>
|
||||
<div class="chartsItem" style="margin-top: 32px">
|
||||
<p class="title">消费时段分析</p>
|
||||
<time-period-analysis :data="timePeriodList"/>
|
||||
<analyse />
|
||||
</div>
|
||||
<div class="chartsItem" style="margin-top: 32px">
|
||||
<p class="title">消费水平<text class="unit">(Top 5)</text></p>
|
||||
<level-top :data="levelTopList"></level-top>
|
||||
<analyse />
|
||||
</div>
|
||||
<div class="chartsItem" style="margin-top: 32px">
|
||||
<p class="title">业态适配型</p>
|
||||
<business-format :data="businessTypeList"/>
|
||||
<analyse />
|
||||
</div>
|
||||
<div class="chartsItem" style="margin-top: 32px">
|
||||
<p class="title">消费转化对比图</p>
|
||||
<consumption-compare :data="compareList"/>
|
||||
<analyse />
|
||||
</div>
|
||||
<div class="chartsItem" style="margin-top: 32px">
|
||||
<p class="title">商超畅销品</p>
|
||||
<bestseller-shop :data="bestsellerList"/>
|
||||
<analyse />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import headerTop from "./components/headerTop.vue";
|
||||
import transactionAnalysis from "./components/bussiness/transactionAnalysis.vue";
|
||||
import TimePeriodAnalysis from "./components/bussiness/timePeriodAnalysis.vue";
|
||||
import analyse from "./components/analyse.vue";
|
||||
import LevelTop from "./components/bussiness/levelTop.vue";
|
||||
import BusinessFormat from "./components/bussiness/businessFormat.vue";
|
||||
import ConsumptionCompare from "./components/bussiness/consumptionCompare.vue";
|
||||
import BestsellerShop from "./components/bussiness/bestsellerShop.vue";
|
||||
|
||||
export default {
|
||||
name: "businessPortrait",
|
||||
components: {headerTop},
|
||||
components: {
|
||||
BestsellerShop,
|
||||
ConsumptionCompare,
|
||||
BusinessFormat, LevelTop, analyse, TimePeriodAnalysis, headerTop,transactionAnalysis},
|
||||
data() {
|
||||
return {
|
||||
topBg:'linear-gradient(180deg, #EDD1AF 0%, #EED7BB 100%);',//顶部组件的悬浮背景色
|
||||
labelList:['女性','高消费','喜爱奶茶','浙江','20-30岁','江苏'],//标签
|
||||
title:'交易画像',//页面标题
|
||||
bgColor:'180deg, #FFBA07 0%, #F38309 100%',
|
||||
bgUrl: 'https://eshangtech.com/ShopICO/ahyd-BID/commercial/businessPortraitBg.svg',//背景图片路径
|
||||
time: '',//跳转携带的时间
|
||||
menu: {},//手机配置信息
|
||||
transactionList:[],//交易分析数据
|
||||
timePeriodList:[],//消费时段分析
|
||||
levelTopList:[],//消费水平排行
|
||||
businessTypeList:[],//业态适配型
|
||||
compareList:[],//消费转化对比图
|
||||
bestsellerList:[]//商超畅销品
|
||||
}
|
||||
},
|
||||
onLoad(option) {
|
||||
@ -29,6 +78,124 @@ export default {
|
||||
uni.setStorageSync('phoneInfo', systemInfo)
|
||||
this.statusBarHeight = Number(systemInfo.statusBarHeight)
|
||||
this.menu = uni.getMenuButtonBoundingClientRect()
|
||||
//交易分析
|
||||
this.getTransactionList()
|
||||
//消费时段分析
|
||||
this.getTimePeriodList()
|
||||
//消费水平排行
|
||||
this.getLevelTopList()
|
||||
//业态适配型
|
||||
this.getBusinessTypeList()
|
||||
//消费转化对比图
|
||||
this.getCompareList()
|
||||
//商超畅销品
|
||||
this.getBestsellerList()
|
||||
},
|
||||
methods:{
|
||||
getTransactionList(){
|
||||
let res=[]
|
||||
this.transactionList = res
|
||||
},
|
||||
getTimePeriodList(){
|
||||
let res={
|
||||
series: [
|
||||
{
|
||||
name: "气泡一",
|
||||
data: [[2,35,35],[6,18,18],[10,5,5],[14,8,8],[18,9,9],[22,18,18]]
|
||||
}
|
||||
]
|
||||
}
|
||||
this.timePeriodList = res
|
||||
},
|
||||
getLevelTopList(){
|
||||
let res = {
|
||||
categories:["商超","餐饮","水果饮品","小吃","连锁品牌","全业态"],
|
||||
series: [
|
||||
{
|
||||
name: "高消费",
|
||||
textColor: "#FFFFFF",
|
||||
data: [35,36,31,33,13,34]
|
||||
},
|
||||
{
|
||||
name: "普通消费",
|
||||
textColor: "#FFFFFF",
|
||||
data: [18,27,21,24,6,28]
|
||||
},
|
||||
{
|
||||
name: "低消费",
|
||||
textColor: "#FFFFFF",
|
||||
data: [18,27,21,24,6,28]
|
||||
}
|
||||
]
|
||||
}
|
||||
this.levelTopList = res
|
||||
},
|
||||
getBusinessTypeList(){
|
||||
let res= {
|
||||
series: [
|
||||
{
|
||||
data: [{"name":"商超","value":27.6},
|
||||
{"name":"水果饮品","value":20.7},
|
||||
{"name":"餐饮","value":15.5},
|
||||
{"name":"小吃","value":11.9},
|
||||
{"name":"地方特产","value":8.4},
|
||||
{"name":"连锁品牌","value":7.2},
|
||||
{"name":"粽子","value":5.6},
|
||||
{"name":"箱包工艺","value":3.1}]
|
||||
}
|
||||
]
|
||||
};
|
||||
this.businessTypeList = res
|
||||
},
|
||||
getCompareList(){
|
||||
let res = {
|
||||
categories: ["0:00","4:00","8:00","12:00","16:00","20:00","24:00"],
|
||||
series: [
|
||||
{
|
||||
index:0,
|
||||
name: "客单数",
|
||||
data: [18,40,25,50,45,65,70]
|
||||
},
|
||||
{
|
||||
index:1,
|
||||
name: "车辆数",
|
||||
data: [180,150,170,140,130,250,280]
|
||||
}
|
||||
]
|
||||
}
|
||||
this.compareList = res
|
||||
},
|
||||
getBestsellerList(){
|
||||
let res = [
|
||||
{
|
||||
series: [
|
||||
{
|
||||
data: [{"name":"热销商品","value":39.8},
|
||||
{"name":"","value":60.2}],
|
||||
list:[{name:'红牛',value:29.3},
|
||||
{name:'农夫山泉',value:25.6},
|
||||
{name:'康师傅红烧牛肉面桶装牛肉面桶装',value:16.5},
|
||||
{name:'方便面',value:15.2},
|
||||
{name:'其他',value:13.4}]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
series: [
|
||||
{
|
||||
data: [{"name":"滞销商品","value":21.6},
|
||||
{"name":"","value":78.4}],
|
||||
list:[{name:'水杯',value:29.3},
|
||||
{name:'吸油纸',value:25.6},
|
||||
{name:'康师傅红烧牛肉面桶装牛肉面桶装',value:16.5},
|
||||
{name:'纸巾',value:15.2},
|
||||
{name:'其他',value:13.4}]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
this.bestsellerList = res
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@ -37,5 +204,28 @@ export default {
|
||||
.main {
|
||||
width: 100vw;
|
||||
min-height: 100vh;
|
||||
.charts{
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
padding: 28px 16px 24px;
|
||||
background: #fff;
|
||||
.chartsItem{
|
||||
.title{
|
||||
font-size: 17px;
|
||||
font-family: PingFangSC-Semibold, PingFang SC;
|
||||
font-weight: 600;
|
||||
color: #160002;
|
||||
line-height: 24px;
|
||||
.unit{
|
||||
font-size: 14px;
|
||||
font-family: PingFangSC-Regular, PingFang SC;
|
||||
font-weight: 400;
|
||||
color: #786B6C;
|
||||
line-height: 20px;
|
||||
margin-left: 4px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -18,7 +18,7 @@
|
||||
<view class="select">
|
||||
<view class="content">
|
||||
<view class="uni-input">大龙山服务区</view>
|
||||
<text class="area">安庆片区</text>
|
||||
<p class="area">安庆片区</p>
|
||||
<image class="rightArrow" src="/static/images/commercial/rightArrow.svg"></image>
|
||||
</view>
|
||||
</view>
|
||||
@ -248,9 +248,11 @@ export default {
|
||||
})
|
||||
|
||||
series.push({
|
||||
index:1,
|
||||
name:'停留时间',data:stayTime
|
||||
})
|
||||
series.push({
|
||||
index:0,
|
||||
name:'车辆类型',data:carType
|
||||
})
|
||||
})
|
||||
@ -258,6 +260,7 @@ export default {
|
||||
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]
|
||||
console.log('this.carTypeTimeData',this.carTypeTimeData)
|
||||
})
|
||||
// categories: ["小型车","中型车","大货车","新能源车"],
|
||||
// series: [{name:'新能源',data:[30,38,20,10]},
|
||||
@ -380,11 +383,9 @@ export default {
|
||||
font-family: PingFangSC-Semibold, PingFang SC;
|
||||
font-weight: 600;
|
||||
color: #160002;
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
}
|
||||
.area{
|
||||
font-size: 14px;
|
||||
font-size: 12px;
|
||||
font-family: PingFangSC-Regular, PingFang SC;
|
||||
font-weight: 400;
|
||||
color: #786B6C;
|
||||
|
||||
161
pages/commercialBI/components/bussiness/bestsellerShop.vue
Normal file
161
pages/commercialBI/components/bussiness/bestsellerShop.vue
Normal file
@ -0,0 +1,161 @@
|
||||
<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) {
|
||||
console.log('carDatawatch', value)
|
||||
this.shopList = value
|
||||
this.handleCarData(value)
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 处理传入的数据
|
||||
handleCarData(value) {
|
||||
let res = value
|
||||
this.drawCharts('hotSales', res[0],{color:["#1E80FF","#E5E8EF"],title:'',subTitle:'热销商品'})
|
||||
this.drawCharts('unsalableGoods', res[1],{color:["#00C2FF","#E5E8EF"],title:'',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: true,
|
||||
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: 0,
|
||||
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;
|
||||
.canvas{
|
||||
width: 100%;
|
||||
height: 170px;
|
||||
}
|
||||
.list{
|
||||
width: 90%;
|
||||
.shopItem{
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
border-bottom: 2px 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>
|
||||
121
pages/commercialBI/components/bussiness/businessFormat.vue
Normal file
121
pages/commercialBI/components/bussiness/businessFormat.vue
Normal file
@ -0,0 +1,121 @@
|
||||
<template>
|
||||
<div class="businessFormat">
|
||||
<canvas v-if="!formatPath" class="format" canvas-id="businessFormat" id="businessFormat"/>
|
||||
<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) {
|
||||
console.log('businessFormat', value)
|
||||
this.handleCarData(value)
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 处理传入的数据
|
||||
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: 250,
|
||||
series: data.series,
|
||||
animation: true,
|
||||
rotate: false,
|
||||
rotateLock: false,
|
||||
background: "#FFFFFF",
|
||||
color: ["#1E80FF", "#456497","#6B85AE","#8095B8","#97A9C6","#ACB9CD","#B8C7DE","#D5DFF0"],
|
||||
padding: [5, 5, 5, 5],
|
||||
dataLabel: true,
|
||||
enableScroll: false,
|
||||
title: {
|
||||
name: '刚需型',
|
||||
fontSize: 16,
|
||||
color: "#341D00"
|
||||
},
|
||||
subtitle: {
|
||||
name: "理想业态布局",
|
||||
fontSize: 12,
|
||||
color: "#786B6C",
|
||||
},
|
||||
legend: {
|
||||
show: true,
|
||||
position: "bottom",
|
||||
lineHeight: 25,
|
||||
float: 'center'
|
||||
|
||||
},
|
||||
extra: {
|
||||
ring: {
|
||||
ringWidth: 12,
|
||||
activeOpacity: 0.5,
|
||||
activeRadius: 10,
|
||||
offsetAngle: 0,
|
||||
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: 250px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
138
pages/commercialBI/components/bussiness/consumptionCompare.vue
Normal file
138
pages/commercialBI/components/bussiness/consumptionCompare.vue
Normal file
@ -0,0 +1,138 @@
|
||||
<template>
|
||||
<div class="consumptionCompare">
|
||||
<canvas v-if="!consumptionPath" class="consumption" canvas-id="consumption" id="consumption"/>
|
||||
<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) {
|
||||
console.log('carDatawatch', value)
|
||||
this.handleCarData(value)
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 处理传入的数据
|
||||
handleCarData(value) {
|
||||
console.log('value',value)
|
||||
let res = value
|
||||
this.drawCharts('consumption', 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: 220,
|
||||
categories: data.categories,
|
||||
series: data.series,
|
||||
animation: true,
|
||||
rotate: false,
|
||||
rotateLock: false,
|
||||
background: "#FFFFFF",
|
||||
color: ["#CAD0DA", "#1E80FF"],
|
||||
padding: [15, 5, 5, 5],
|
||||
dataLabel: false,
|
||||
enableScroll: false,
|
||||
xAxis: {
|
||||
disableGrid: true
|
||||
},
|
||||
yAxis:{
|
||||
showTitle:true,
|
||||
splitNumber:4,
|
||||
data: [
|
||||
{
|
||||
index:0,
|
||||
title:'单位: 笔',
|
||||
min: 0,
|
||||
max: 80,
|
||||
position: "left",
|
||||
titleOffsetY: -5
|
||||
},
|
||||
{
|
||||
index:1,
|
||||
title:'单位: 辆',
|
||||
min: 0,
|
||||
max: 400,
|
||||
position: 'right',
|
||||
titleOffsetY: -5,
|
||||
titleOffsetX: 5
|
||||
},
|
||||
]
|
||||
},
|
||||
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>
|
||||
126
pages/commercialBI/components/bussiness/levelTop.vue
Normal file
126
pages/commercialBI/components/bussiness/levelTop.vue
Normal file
@ -0,0 +1,126 @@
|
||||
<template>
|
||||
<div class="levelTop">
|
||||
<canvas v-if="!levelTopPath" class="level" canvas-id="levelTop" id="levelTop"/>
|
||||
<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) {
|
||||
console.log('carDatawatch', value)
|
||||
this.handleCarData(value)
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 处理传入的数据
|
||||
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: true,
|
||||
rotate: false,
|
||||
rotateLock: false,
|
||||
background: "#FFFFFF",
|
||||
color: ["#1E80FF","#ACB9CD","#CAD0DA" ],
|
||||
padding: [15, 5, 5, 5],
|
||||
dataLabel: false,
|
||||
enableScroll: false,
|
||||
legend: {
|
||||
show: true,
|
||||
position: "bottom",
|
||||
lineHeight: 25,
|
||||
float: 'center'
|
||||
|
||||
},
|
||||
xAxis: {
|
||||
disableGrid: true
|
||||
},
|
||||
yAxis: {
|
||||
showTitle:true,
|
||||
splitNumber:5,
|
||||
data: [
|
||||
{
|
||||
min: 0,
|
||||
max: 100,
|
||||
title:'单位: /%',
|
||||
titleOffsetY:-5,
|
||||
titleOffsetX:-5
|
||||
}
|
||||
]
|
||||
},
|
||||
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: 272px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
122
pages/commercialBI/components/bussiness/timePeriodAnalysis.vue
Normal file
122
pages/commercialBI/components/bussiness/timePeriodAnalysis.vue
Normal file
@ -0,0 +1,122 @@
|
||||
<template>
|
||||
<div class="timePeriodAnalysis">
|
||||
<canvas v-if="!timePeriodPath" class="timePeriod" canvas-id="timePeriod" id="timePeriod"/>
|
||||
<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) {
|
||||
console.log('carDatawatch', value)
|
||||
this.handleCarData(value)
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 处理传入的数据
|
||||
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: "bubble",
|
||||
context: ctx,
|
||||
width: _this.width,
|
||||
height: 200,
|
||||
series: data.series,
|
||||
animation: true,
|
||||
rotate: false,
|
||||
rotateLock: false,
|
||||
background: "#FFFFFF",
|
||||
color: ["#C7DFFF"],
|
||||
padding: [15, 10, 5, 5],
|
||||
dataLabel: false,
|
||||
enableScroll: false,
|
||||
xAxis: {
|
||||
disableGrid: true,
|
||||
gridType: "dash",
|
||||
splitNumber: 6,
|
||||
boundaryGap: "justify",
|
||||
min: 0,
|
||||
max: 24
|
||||
},
|
||||
yAxis: {
|
||||
disableGrid: false,
|
||||
gridType: "dash",
|
||||
data: [
|
||||
{
|
||||
min: 0,
|
||||
max: 50
|
||||
}
|
||||
]
|
||||
},
|
||||
legend: {
|
||||
show: false,
|
||||
position: "bottom",
|
||||
lineHeight: 25,
|
||||
float: 'center',
|
||||
},
|
||||
extra: {
|
||||
bubble: {
|
||||
border: 2,
|
||||
opacity: 0.5
|
||||
}
|
||||
}
|
||||
});
|
||||
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>
|
||||
186
pages/commercialBI/components/bussiness/transactionAnalysis.vue
Normal file
186
pages/commercialBI/components/bussiness/transactionAnalysis.vue
Normal file
@ -0,0 +1,186 @@
|
||||
<template>
|
||||
<div class="main">
|
||||
<div class="yesterday">
|
||||
<div class="top">
|
||||
<image class="icon" src="/static/images/commercial/money.svg"></image>
|
||||
<p class="title">客单均价<text class="unit">/元</text></p>
|
||||
</div>
|
||||
<div class="bottom">
|
||||
<div class="item">
|
||||
<p class="price">18.3</p>
|
||||
<p class="text">该服务区</p>
|
||||
</div>
|
||||
<div class="item">
|
||||
<p class="price">17.6</p>
|
||||
<p class="text">省级平均</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="month">
|
||||
<div class="top">
|
||||
<image class="icon" src="/static/images/commercial/converRate.svg"></image>
|
||||
<p class="title">消费转化率<text class="unit">/%</text></p>
|
||||
</div>
|
||||
<div class="bottom">
|
||||
<div class="item">
|
||||
<p class="price">37.9</p>
|
||||
<p class="text">该服务区</p>
|
||||
</div>
|
||||
<div class="item">
|
||||
<p class="price">52.8</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 {
|
||||
}
|
||||
},
|
||||
props: {
|
||||
data: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
data: {
|
||||
handler(value) {
|
||||
console.log('carDatawatch', value)
|
||||
this.handleCarData(value)
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 处理传入的数据
|
||||
handleCarData(value) {
|
||||
let res = []
|
||||
this.drawCharts('carNum', res)
|
||||
},
|
||||
drawCharts(id, data) {
|
||||
const ctx = uni.createCanvasContext(id, this);
|
||||
let _this = this
|
||||
uChartsInstance[id] = new uCharts({
|
||||
type: "ring",
|
||||
context: ctx,
|
||||
width: 178,
|
||||
height: 208,
|
||||
series: data.series,
|
||||
animation: true,
|
||||
rotate: false,
|
||||
rotateLock: false,
|
||||
background: "#FFFFFF",
|
||||
color: ["#CAD0DA", "#1E80FF"],
|
||||
padding: [5, 5, 5, 5],
|
||||
dataLabel: false,
|
||||
enableScroll: false,
|
||||
title: {
|
||||
name: _this.carNumAll,
|
||||
fontSize: 16,
|
||||
color: "#341D00"
|
||||
},
|
||||
subtitle: {
|
||||
name: "昨日入区车流",
|
||||
fontSize: 12,
|
||||
color: "#786B6C",
|
||||
},
|
||||
legend: {
|
||||
show: true,
|
||||
position: "bottom",
|
||||
lineHeight: 25,
|
||||
float: 'center'
|
||||
|
||||
},
|
||||
extra: {
|
||||
ring: {
|
||||
ringWidth: 12,
|
||||
activeOpacity: 0.5,
|
||||
activeRadius: 10,
|
||||
offsetAngle: 0,
|
||||
labelWidth: 15,
|
||||
border: false,
|
||||
borderWidth: 3,
|
||||
borderColor: "#FFFFFF"
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
}
|
||||
}
|
||||
</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;
|
||||
.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: 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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -131,10 +131,10 @@ export default {
|
||||
},
|
||||
extra: {
|
||||
ring: {
|
||||
ringWidth: 12,
|
||||
ringWidth: 14,
|
||||
activeOpacity: 0.5,
|
||||
activeRadius: 10,
|
||||
offsetAngle: 0,
|
||||
offsetAngle: -90,
|
||||
labelWidth: 15,
|
||||
border: false,
|
||||
borderWidth: 3,
|
||||
|
||||
162
pages/commercialBI/components/format/bandLevel.vue
Normal file
162
pages/commercialBI/components/format/bandLevel.vue
Normal file
@ -0,0 +1,162 @@
|
||||
<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 class="big" :style="{width:item.big+'%'}">{{item.big}}</div>
|
||||
<div class="normal" :style="{width:item.normal + '%',left:item.big+'%'}">{{item.normal}}</div>
|
||||
<div class="small" :style="{width:item.small + '%',left:(Number(item.big)+Number(item.normal))+'%'}">{{item.small}}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="key">
|
||||
<div class="box">
|
||||
<div class="keyItem">
|
||||
<div class="icon" style="background: #1E80FF"></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: #CAD0DA"></div>
|
||||
<p class="type">低消费</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
var uChartsInstance = {};
|
||||
export default {
|
||||
name: "bandLevel",
|
||||
data() {
|
||||
return {
|
||||
dataList: []
|
||||
}
|
||||
},
|
||||
props: {
|
||||
data: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
data: {
|
||||
handler(value) {
|
||||
console.log('carDatawatch', value)
|
||||
this.dataList = value
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.bandLevel{
|
||||
width: 100%;
|
||||
margin-top: 12px;
|
||||
.bandItem{
|
||||
margin-bottom: 12px;
|
||||
.title{
|
||||
font-size: 14px;
|
||||
font-family: PingFangSC-Regular, PingFang SC;
|
||||
font-weight: 400;
|
||||
color: #160002;
|
||||
line-height: 20px;
|
||||
}
|
||||
.progress{
|
||||
width: 100%;
|
||||
height: 20px;
|
||||
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;
|
||||
left: 0;
|
||||
border-radius: 2px 0 0 2px;
|
||||
box-sizing: border-box;
|
||||
padding-left: 4px;
|
||||
background: #1E80FF;
|
||||
}
|
||||
.big:after{
|
||||
position: absolute;
|
||||
content:'';
|
||||
width: 2px;
|
||||
height: 100%;
|
||||
background: #FFFFFF;
|
||||
z-index:9;
|
||||
right: 0;
|
||||
top: 0;
|
||||
}
|
||||
.normal{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
border-radius: 2px 0 0 2px;
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
.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>
|
||||
172
pages/commercialBI/components/format/bandNumber.vue
Normal file
172
pages/commercialBI/components/format/bandNumber.vue
Normal file
@ -0,0 +1,172 @@
|
||||
<template>
|
||||
<div class="main">
|
||||
<div class="dataItem" v-for="(item,index) in dataList" :key="index">
|
||||
<image class="bgIcon" src="/static/images/commercial/bg_icon.svg"></image>
|
||||
<div class="left">
|
||||
<image class="icon" :src="item.url"></image>
|
||||
</div>
|
||||
<div class="right">
|
||||
<p class="title">{{item.name}}</p>
|
||||
<div class="company">
|
||||
<image class="img" src="/static/images/commercial/shop.svg"></image>
|
||||
<p class="text">{{item.company}}</p>
|
||||
</div>
|
||||
<div class="time">
|
||||
<image class="img" src="/static/images/commercial/time.svg"></image>
|
||||
<p class="text">{{item.time}}</p>
|
||||
</div>
|
||||
<div class="label">
|
||||
<div class="labelItem" v-for="(item,index) in item.label" :key="index">{{item}}</div>
|
||||
</div>
|
||||
<div class="box">
|
||||
<div class="boxItem">
|
||||
<p class="mark">{{item.info[0]}}<text class="unit">分</text></p>
|
||||
<p class="type">吸引力指数</p>
|
||||
</div>
|
||||
<div class="boxItem">
|
||||
<p class="mark">{{item.info[1]}}<text class="unit">分</text></p>
|
||||
<p class="type">业绩评分</p>
|
||||
</div>
|
||||
<div class="boxItem">
|
||||
<p class="mark">{{item.info[2]}}<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) {
|
||||
console.log('carDatawatch', value)
|
||||
this.dataList = value
|
||||
}
|
||||
}
|
||||
},
|
||||
}
|
||||
</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;
|
||||
}
|
||||
.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;
|
||||
margin-right: 4px;
|
||||
}
|
||||
.text{
|
||||
font-size: 12px;
|
||||
font-family: PingFangSC-Regular, PingFang SC;
|
||||
font-weight: 400;
|
||||
color: #786B6C;
|
||||
line-height: 18px;
|
||||
}
|
||||
}
|
||||
.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>
|
||||
104
pages/commercialBI/components/format/consumLevel.vue
Normal file
104
pages/commercialBI/components/format/consumLevel.vue
Normal file
@ -0,0 +1,104 @@
|
||||
<template>
|
||||
<div class="consumLevel">
|
||||
<canvas class="level" canvas-id="level" id="level"/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import uCharts from '@/components/u-charts.js';
|
||||
var uChartsInstance = {};
|
||||
export default {
|
||||
name: "consumLevel",
|
||||
data() {
|
||||
return {
|
||||
width:0,
|
||||
}
|
||||
},
|
||||
props: {
|
||||
data: {
|
||||
type: Object,
|
||||
default: () => {}
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
data: {
|
||||
handler(value) {
|
||||
console.log('carDatawatch', value)
|
||||
this.handleCarData(value)
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 处理传入的数据
|
||||
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: true,
|
||||
rotate: false,
|
||||
rotateLock: false,
|
||||
background: "#FFFFFF",
|
||||
color: ["#1E80FF","#ACB9CD","#CAD0DA" ],
|
||||
padding: [15, 5, 5, 5],
|
||||
dataLabel: false,
|
||||
enableScroll: false,
|
||||
legend: {
|
||||
show: true,
|
||||
position: "bottom",
|
||||
lineHeight: 25,
|
||||
float: 'center'
|
||||
|
||||
},
|
||||
xAxis: {
|
||||
disableGrid: true
|
||||
},
|
||||
yAxis: {
|
||||
showTitle:true,
|
||||
splitNumber:5,
|
||||
data: [
|
||||
{
|
||||
min: 0,
|
||||
max: 100,
|
||||
title:'单位: /%',
|
||||
titleOffsetY:-5,
|
||||
titleOffsetX:-5
|
||||
}
|
||||
]
|
||||
},
|
||||
extra: {
|
||||
column: {
|
||||
type: "stack",
|
||||
width: 20,
|
||||
activeBgColor: "#000000",
|
||||
activeBgOpacity: 0.08,
|
||||
labelPosition: "center"
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.consumLevel{
|
||||
width:100%;
|
||||
margin-top: 12px;
|
||||
.level{
|
||||
width: 100%;
|
||||
height: 260px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
101
pages/commercialBI/components/format/fillingDegree.vue
Normal file
101
pages/commercialBI/components/format/fillingDegree.vue
Normal file
@ -0,0 +1,101 @@
|
||||
<template>
|
||||
<div class="fillingDegree">
|
||||
<div class="item">
|
||||
<canvas class="fillDegree" canvas-id="fillDegree" id="fillDegree"/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import uCharts from '@/components/u-charts.js';
|
||||
var uChartsInstance = {};
|
||||
export default {
|
||||
name: "fillingDegree",
|
||||
data() {
|
||||
return {
|
||||
width:0
|
||||
}
|
||||
},
|
||||
props: {
|
||||
data: {
|
||||
type: Object,
|
||||
default: () => {}
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
data: {
|
||||
handler(value) {
|
||||
console.log('carDatawatch', value)
|
||||
this.handleCarData(value)
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 处理传入的数据
|
||||
handleCarData(value) {
|
||||
let res = value
|
||||
this.drawCharts('fillDegree', 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: 289,
|
||||
series: data.series,
|
||||
animation: true,
|
||||
rotate: false,
|
||||
rotateLock: false,
|
||||
background: "#FFFFFF",
|
||||
color: ["#1E80FF", "#456497","#6B85AE","#8095B8","#97A9C6","#ACB9CD","#B8C7DE","#D5DFF0"],
|
||||
padding: [5, 5, 5, 5],
|
||||
dataLabel: true,
|
||||
enableScroll: false,
|
||||
title: {
|
||||
name: _this.carNumAll,
|
||||
fontSize: 16,
|
||||
color: "#341D00"
|
||||
},
|
||||
legend: {
|
||||
show: true,
|
||||
position: "bottom",
|
||||
lineHeight: 25,
|
||||
float: 'center'
|
||||
|
||||
},
|
||||
extra: {
|
||||
ring: {
|
||||
ringWidth: 12,
|
||||
activeOpacity: 0.5,
|
||||
activeRadius: 10,
|
||||
offsetAngle: 0,
|
||||
labelWidth: 15,
|
||||
border: false,
|
||||
borderWidth: 3,
|
||||
borderColor: "#FFFFFF"
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.fillingDegree{
|
||||
width: 100%;
|
||||
margin-top: 12px;
|
||||
.item{
|
||||
width: 100%;
|
||||
height: 280px;
|
||||
.fillDegree{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
91
pages/commercialBI/components/guest/businessType.vue
Normal file
91
pages/commercialBI/components/guest/businessType.vue
Normal file
@ -0,0 +1,91 @@
|
||||
<template>
|
||||
<div class="businessType">
|
||||
<canvas class="business" canvas-id="businessType" id="businessType"/>
|
||||
</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) {
|
||||
console.log('carDatawatch', value)
|
||||
this.handleCarData(value)
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 处理传入的数据
|
||||
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: true,
|
||||
rotate: false,
|
||||
rotateLock: false,
|
||||
background: "#FFFFFF",
|
||||
color: ["#1E80FF", "#456497","#748AAE","#ACB9CD","#CAD0DA","#E5E8EF"],
|
||||
padding: [5, 5, 5, 5],
|
||||
dataLabel: false,
|
||||
enableScroll: false,
|
||||
legend: {
|
||||
show: true,
|
||||
position: "right",
|
||||
lineHeight: 25,
|
||||
float: 'center'
|
||||
|
||||
},
|
||||
extra: {
|
||||
ring: {
|
||||
ringWidth: 12,
|
||||
activeOpacity: 0.5,
|
||||
activeRadius: 10,
|
||||
offsetAngle: 0,
|
||||
labelWidth: 15,
|
||||
border: false,
|
||||
borderWidth: 3,
|
||||
borderColor: "#FFFFFF"
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.businessType{
|
||||
width: 100%;
|
||||
.business{
|
||||
width: 100%;
|
||||
height: 170px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
112
pages/commercialBI/components/guest/consumPrefer.vue
Normal file
112
pages/commercialBI/components/guest/consumPrefer.vue
Normal file
@ -0,0 +1,112 @@
|
||||
<template>
|
||||
<div class="consumPrefer">
|
||||
<canvas v-if="!preferPath" class="prefer" canvas-id="prefer" id="prefer"/>
|
||||
<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) {
|
||||
console.log('carDatawatch', value)
|
||||
this.handleCarData(value)
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 处理传入的数据
|
||||
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: true,
|
||||
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: 200,
|
||||
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: 294px;
|
||||
.prefer{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
167
pages/commercialBI/components/guest/consumptionLevel.vue
Normal file
167
pages/commercialBI/components/guest/consumptionLevel.vue
Normal file
@ -0,0 +1,167 @@
|
||||
<template>
|
||||
<div class="consumptionLevel">
|
||||
<div class="gender" v-for="(item,index) in genderList" :key="index">
|
||||
<div class="top">
|
||||
<image class="icon" :src="item.name==='男'?'/static/images/commercial/man.svg':'/static/images/commercial/woman.svg'"></image>
|
||||
<p class="title">{{item.name}}</p>
|
||||
</div>
|
||||
<div class="progress">
|
||||
<div class="big" :style="{background:item.name==='男'?'#1E80FF':'#00C2FF', width:item.big+'%'}">{{item.big}}</div>
|
||||
<div class="normal" :style="{background:item.name==='男'?'#ACB9CD':'#AFC1C6',width:item.normal + '%',left:item.big+'%'}">{{item.normal}}</div>
|
||||
<div class="small" :style="{background:item.name==='男'?'#CAD0DA':'#C6D3D7',left:(Number(item.big)+Number(item.normal))+'%',width:item.small + '%'}">{{item.small}}</div>
|
||||
</div>
|
||||
<div class="imgKey">
|
||||
<div style="margin: 0 auto;display: flex">
|
||||
<div class="item">
|
||||
<div class="icon" :style="{background:item.name==='男'?'#1E80FF':'#00C2FF'}"></div>
|
||||
<p class="consume">高消费</p>
|
||||
</div>
|
||||
<div class="item">
|
||||
<div class="icon" :style="{background:item.name==='男'?'#ACB9CD':'#AFC1C6'}"></div>
|
||||
<p class="consume">普通消费</p>
|
||||
</div>
|
||||
<div class="item">
|
||||
<div class="icon" :style="{background:item.name==='男'?'#CAD0DA':'#C6D3D7'}"></div>
|
||||
<p class="consume">低消费</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "consumptionLevel",
|
||||
data() {
|
||||
return {
|
||||
genderList:[]//数据
|
||||
}
|
||||
},
|
||||
props: {
|
||||
data: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
data: {
|
||||
handler(value) {
|
||||
console.log('carDatawatch', value)
|
||||
this.genderList = value
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.consumptionLevel{
|
||||
width: 100%;
|
||||
margin-top: 12px;
|
||||
.gender{
|
||||
width: 100%;
|
||||
margin-bottom: 12px;
|
||||
.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%;
|
||||
height: 20px;
|
||||
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;
|
||||
left: 0;
|
||||
border-radius: 2px 0 0 2px;
|
||||
box-sizing: border-box;
|
||||
padding-left: 4px;
|
||||
}
|
||||
.big:after{
|
||||
position: absolute;
|
||||
content:'';
|
||||
width: 2px;
|
||||
height: 100%;
|
||||
background: #FFFFFF;
|
||||
z-index:9;
|
||||
right: 0;
|
||||
top: 0;
|
||||
}
|
||||
.normal{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
border-radius: 2px 0 0 2px;
|
||||
box-sizing: border-box;
|
||||
padding-left: 4px;
|
||||
}
|
||||
.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;
|
||||
}
|
||||
}
|
||||
.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>
|
||||
@ -21,18 +21,128 @@
|
||||
<div class="man" :style="{width: man + '%'}"></div>
|
||||
<div class="woman" :style="{width: woman + '%'}"></div>
|
||||
</div>
|
||||
<div class="charts">
|
||||
<canvas v-if="!customerSecondPath" class="sexRatio" canvas-id="gender" id="gender"/>
|
||||
<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:'64.8',
|
||||
woman:'35.2'
|
||||
woman:'35.2',
|
||||
width:0,//手机宽度
|
||||
customerSecondPath:''//路径
|
||||
}
|
||||
},
|
||||
props: {
|
||||
data: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
data: {
|
||||
handler(value) {
|
||||
console.log('gender', value)
|
||||
this.handleCarData(value)
|
||||
}
|
||||
}
|
||||
},
|
||||
methods:{
|
||||
// 处理传入的数据
|
||||
handleCarData(value) {
|
||||
let res = {
|
||||
series: value
|
||||
}
|
||||
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: 193,
|
||||
series: data.series,
|
||||
animation: true,
|
||||
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: "dash",
|
||||
splitNumber: 4,
|
||||
boundaryGap: "justify",
|
||||
title:'年龄: /岁',
|
||||
titleOffsetY: 15,
|
||||
titleOffsetX: -30,
|
||||
min: 20,
|
||||
max: 60
|
||||
},
|
||||
yAxis: {
|
||||
disableGrid: false,
|
||||
gridType: "dash",
|
||||
showTitle:true,
|
||||
data: [
|
||||
{
|
||||
title:'单位: /元',
|
||||
min: 0,
|
||||
max: 100,
|
||||
titleOffsetY:-5,
|
||||
titleOffsetX:0
|
||||
}
|
||||
]
|
||||
},
|
||||
extra: {
|
||||
bubble: {
|
||||
border: 2,
|
||||
opacity: 0.5
|
||||
}
|
||||
}
|
||||
});
|
||||
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>
|
||||
|
||||
@ -118,5 +228,14 @@ export default {
|
||||
top: 0;
|
||||
}
|
||||
}
|
||||
.charts{
|
||||
margin-top: 20px;
|
||||
width: 100%;
|
||||
height: 180px;
|
||||
.sexRatio{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<div class="header" :style="{backgroundImage: 'url('+ bgUrl +')'}">
|
||||
<div class="headerTop" :style="{height:(menu.bottom + 6) + 'px'}">
|
||||
<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="/static/images/commercial/navigation-left.svg"></image>
|
||||
@ -60,6 +60,10 @@ export default {
|
||||
labelList:{
|
||||
type:Array,
|
||||
default:()=>[]
|
||||
},
|
||||
topBg:{
|
||||
type:String,
|
||||
default: ""
|
||||
}
|
||||
},
|
||||
data() {
|
||||
@ -98,6 +102,7 @@ export default {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index:99999;
|
||||
.box{
|
||||
padding: 0 16px;
|
||||
position: absolute;
|
||||
|
||||
80
pages/commercialBI/components/manager/contractGuarantee.vue
Normal file
80
pages/commercialBI/components/manager/contractGuarantee.vue
Normal file
@ -0,0 +1,80 @@
|
||||
<template>
|
||||
<div class="contractGuarantee">
|
||||
<div class="top">
|
||||
<p class="title">{{obj.title}}</p>
|
||||
<p class="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;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
102
pages/commercialBI/components/manager/moneyCompare.vue
Normal file
102
pages/commercialBI/components/manager/moneyCompare.vue
Normal file
@ -0,0 +1,102 @@
|
||||
<template>
|
||||
<div class="moneyCompare">
|
||||
<canvas class="compare" canvas-id="compare" id="compare"/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import uCharts from '@/components/u-charts.js';
|
||||
var uChartsInstance = {};
|
||||
export default {
|
||||
name: "moneyCompare",
|
||||
data() {
|
||||
return {
|
||||
width:0
|
||||
}
|
||||
},
|
||||
props: {
|
||||
data: {
|
||||
type: Object,
|
||||
default: () => {}
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
data: {
|
||||
handler(value) {
|
||||
console.log('carDatawatch', value)
|
||||
this.handleCarData(value)
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 处理传入的数据
|
||||
handleCarData(value) {
|
||||
let res = value
|
||||
this.drawCharts('compare', res)
|
||||
},
|
||||
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: "column",
|
||||
context: ctx,
|
||||
width: _this.width,
|
||||
height: 208,
|
||||
categories: data.categories,
|
||||
series: data.series,
|
||||
animation: true,
|
||||
rotate: false,
|
||||
rotateLock: false,
|
||||
background: "#FFFFFF",
|
||||
color: ["#CAD0DA", "#1E80FF"],
|
||||
padding: [15, 40, 5, 0],
|
||||
dataLabel: false,
|
||||
enableScroll: false,
|
||||
legend: {
|
||||
show: true,
|
||||
position: "bottom",
|
||||
lineHeight: 25,
|
||||
float: 'center'
|
||||
|
||||
},
|
||||
xAxis: {
|
||||
disableGrid: true
|
||||
},
|
||||
yAxis: {
|
||||
showTitle:true,
|
||||
splitNumber:4,
|
||||
data: [
|
||||
{
|
||||
min: 0,
|
||||
max: 12,
|
||||
title:'单位: 千万',
|
||||
titleOffsetX:5,
|
||||
titleOffsetY:-5
|
||||
}
|
||||
]
|
||||
},
|
||||
extra: {
|
||||
column: {
|
||||
type: "group",
|
||||
width: 5,
|
||||
activeBgColor: "#000000",
|
||||
activeBgOpacity: 0.08
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.moneyCompare{
|
||||
width: 100%;
|
||||
.compare{
|
||||
width: calc(100vw - 32px);
|
||||
height: 200px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
105
pages/commercialBI/components/manager/revenueAnalysis.vue
Normal file
105
pages/commercialBI/components/manager/revenueAnalysis.vue
Normal file
@ -0,0 +1,105 @@
|
||||
<template>
|
||||
<div class="revenueAnalysis">
|
||||
<div class="item">
|
||||
<image class="icon" src="/static/images/commercial/agreement.svg"></image>
|
||||
<div class="info" style="margin-bottom: 24px;">
|
||||
<p class="title">合同盈亏<text class="unit">/元</text></p>
|
||||
<p class="value">-1,743,567,98</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item" style="margin-bottom: 24px;">
|
||||
<image class="icon" src="/static/images/commercial/shopNumber.svg"></image>
|
||||
<div class="info">
|
||||
<p class="title">店铺数量<text class="unit">/个</text></p>
|
||||
<p class="value">28</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<image class="icon" src="/static/images/commercial/add.svg"></image>
|
||||
<div class="info">
|
||||
<p class="title">2022日均坪效<text class="unit">/元</text></p>
|
||||
<p class="value">2786.00</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<image class="icon" src="/static/images/commercial/overShop.svg"></image>
|
||||
<div class="info">
|
||||
<p class="title">半年内到期门店<text class="unit">/个</text></p>
|
||||
<p class="value">6</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "revenueAnalysis",
|
||||
data() {
|
||||
return {
|
||||
}
|
||||
},
|
||||
props: {
|
||||
data: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
data: {
|
||||
handler(value) {
|
||||
console.log('carDatawatch', value)
|
||||
this.handleCarData(value)
|
||||
}
|
||||
}
|
||||
},
|
||||
methods:{
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.revenueAnalysis{
|
||||
width: calc(100%);
|
||||
background: #F7F7F7;
|
||||
border-radius: 4px;
|
||||
padding: 12px;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
flex-flow: wrap;
|
||||
margin-top: 12px;
|
||||
.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;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
102
pages/commercialBI/components/manager/revenueTrends.vue
Normal file
102
pages/commercialBI/components/manager/revenueTrends.vue
Normal file
@ -0,0 +1,102 @@
|
||||
<template>
|
||||
<div class="revenueTrends">
|
||||
<canvas class="trends" canvas-id="trends" id="trends"/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import uCharts from '@/components/u-charts.js';
|
||||
var uChartsInstance = {};
|
||||
export default {
|
||||
name: "revenueTrends",
|
||||
data() {
|
||||
return {
|
||||
}
|
||||
},
|
||||
props: {
|
||||
data: {
|
||||
type: Object,
|
||||
default: () => {}
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
data: {
|
||||
handler(value) {
|
||||
console.log('carDatawatch', value)
|
||||
this.handleCarData(value)
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 处理传入的数据
|
||||
handleCarData(value) {
|
||||
let res = value
|
||||
this.drawCharts('trends', res)
|
||||
},
|
||||
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: 198,
|
||||
categories: data.categories,
|
||||
series: data.series,
|
||||
animation: true,
|
||||
rotate: false,
|
||||
rotateLock: false,
|
||||
background: "#FFFFFF",
|
||||
color: ["#1E80FF"],
|
||||
padding: [15, 15, 5, 5],
|
||||
dataLabel: false,
|
||||
enableScroll: false,
|
||||
legend: {
|
||||
show: false,
|
||||
position: "bottom",
|
||||
lineHeight: 25,
|
||||
float: 'center'
|
||||
|
||||
},
|
||||
xAxis: {
|
||||
disableGrid: true
|
||||
},
|
||||
yAxis: {
|
||||
splitNumber:4,
|
||||
showTitle:true,
|
||||
data:[
|
||||
{
|
||||
min:0,
|
||||
max:12,
|
||||
title:'单位: 千万',
|
||||
titleOffsetY:-5
|
||||
}
|
||||
]
|
||||
},
|
||||
extra: {
|
||||
area: {
|
||||
type: "curve",
|
||||
opacity: 0.8,
|
||||
addLine: true,
|
||||
width: 2,
|
||||
gradient: true,
|
||||
activeType: "hollow"
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.revenueTrends{
|
||||
width: 100%;
|
||||
.trends{
|
||||
width: calc(100vw - 32px);
|
||||
height: 208px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,23 +1,67 @@
|
||||
<template>
|
||||
<div class="main">
|
||||
<header-top :bgUrl="bgUrl" :menu="menu" :bgColor="bgColor" :title="title" :labelList="labelList"/>
|
||||
<header-top :bgUrl="bgUrl" :menu="menu" :bgColor="bgColor" :title="title" :labelList="labelList" :topBg="topBg"/>
|
||||
|
||||
<div class="charts">
|
||||
<div class="chartsItem">
|
||||
<p class="title">业态充盈度</p>
|
||||
<filling-degree :data="fillDegreeList" />
|
||||
<analyse />
|
||||
</div>
|
||||
<div class="chartsItem" style="margin-top: 32px">
|
||||
<p class="title">品牌消费水平<text class="unit">(Top 5)</text></p>
|
||||
<band-level :data="bandLevelList"/>
|
||||
<analyse />
|
||||
</div>
|
||||
<div class="chartsItem" style="margin-top: 32px">
|
||||
<p class="title">业态消费水平<text class="unit">(Top 5)</text></p>
|
||||
<consumption-level :data="consumLevelList" />
|
||||
<analyse />
|
||||
</div>
|
||||
<div class="chartsItem" style="margin-top: 32px">
|
||||
<p class="title">品牌指数</p>
|
||||
<div class="labelList">
|
||||
<div class="labelItem" v-for="(item,index) in brandLabelList" :key="index">
|
||||
<p class="name">{{item.name}}<text class="number">({{item.value}})</text></p>
|
||||
</div>
|
||||
</div>
|
||||
<band-number :data="brandInfoList"/>
|
||||
<analyse />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import headerTop from "./components/headerTop.vue";
|
||||
import analyse from "./components/analyse.vue";
|
||||
import FillingDegree from "./components/format/fillingDegree.vue";
|
||||
import BandLevel from "./components/format/bandLevel.vue";
|
||||
import ConsumptionLevel from "./components/format/consumLevel.vue";
|
||||
import BandNumber from "./components/format/bandNumber.vue";
|
||||
|
||||
export default {
|
||||
name: "businessPortrait",
|
||||
components: {headerTop},
|
||||
components: {BandNumber, ConsumptionLevel, BandLevel, FillingDegree, analyse, headerTop},
|
||||
data() {
|
||||
return {
|
||||
topBg:'linear-gradient(180deg, #C6C1F0 0%, #CECBF3 100%);',//顶部组件的悬浮背景色
|
||||
labelList:['女性','高消费','喜爱奶茶','浙江','20-30岁','江苏'],//标签
|
||||
title:'业态品牌',//页面标题
|
||||
bgColor: '180deg, #459FFF 0%, #473AFF 100%',
|
||||
bgUrl: 'https://eshangtech.com/ShopICO/ahyd-BID/commercial/formatPortraitBg.svg',//背景图片路径
|
||||
time: '',//跳转携带的时间
|
||||
menu: {},//手机配置信息
|
||||
fillDegreeList:[],//业态充盈度
|
||||
bandLevelList:[],//品牌消费水平
|
||||
consumLevelList:[],//业态消费水平
|
||||
brandLabelList:[{name:'中式快餐',value:5},
|
||||
{name:'省内品牌',value:3},
|
||||
{name:'地方特色',value:15},
|
||||
{name:'这是品类名称',value:5},
|
||||
{name:'省内品牌',value:3},
|
||||
{name:'地方特色',value:8}],//品牌指数标签列表
|
||||
brandInfoList:[]//品牌指数列表
|
||||
}
|
||||
},
|
||||
onLoad(option) {
|
||||
@ -29,13 +73,126 @@ export default {
|
||||
uni.setStorageSync('phoneInfo', systemInfo)
|
||||
this.statusBarHeight = Number(systemInfo.statusBarHeight)
|
||||
this.menu = uni.getMenuButtonBoundingClientRect()
|
||||
//业态充盈度
|
||||
this.getFillDegreeList()
|
||||
//品牌消费水平
|
||||
this.getBandLevelList()
|
||||
//业态消费水平
|
||||
this.getConsumLevelList()
|
||||
//品牌指数列表
|
||||
this.getBrandInfoList()
|
||||
},
|
||||
methods:{
|
||||
getFillDegreeList(){
|
||||
let res = {
|
||||
series: [
|
||||
{
|
||||
data: [{"name":"商超","value":27.6},
|
||||
{"name":"水果饮品","value":20.7},
|
||||
{"name":"餐饮","value":15.5},
|
||||
{"name":"小吃","value":11.9},
|
||||
{"name":"地方特产","value":8.4},
|
||||
{"name":"连锁品牌","value":7.2},
|
||||
{"name":"粽子","value":5.6},
|
||||
{"name":"箱包工艺","value":3.1}]
|
||||
}
|
||||
]
|
||||
}
|
||||
this.fillDegreeList = res
|
||||
},
|
||||
getBandLevelList(){
|
||||
let res=[{name:'五芳斋',big:'14.8',normal:'41.7',small:'43.5'},
|
||||
{name:'驿佰购',big:'44.1',normal:'31.7',small:'24.2'},
|
||||
{name:'老娘舅',big:'15.2',normal:'70.1',small:'14.5'},
|
||||
{name:'吉祥馄饨',big:'25.2',normal:'39.9',small:'34.7'}]
|
||||
this.bandLevelList = res
|
||||
},
|
||||
getConsumLevelList(){
|
||||
let res = {
|
||||
categories:["商超","餐饮","水果饮品","小吃","连锁品牌"],
|
||||
series: [
|
||||
{
|
||||
name: "高消费",
|
||||
textColor: "#FFFFFF",
|
||||
data: [35,36,31,33,13]
|
||||
},
|
||||
{
|
||||
name: "普通消费",
|
||||
textColor: "#FFFFFF",
|
||||
data: [18,27,21,24,6]
|
||||
},
|
||||
{
|
||||
name: "低消费",
|
||||
textColor: "#FFFFFF",
|
||||
data: [18,27,21,24,6]
|
||||
}
|
||||
]
|
||||
}
|
||||
this.consumLevelList = res
|
||||
},
|
||||
getBrandInfoList(){
|
||||
let res = [{icon:'',name:'老娘舅',company:'老娘舅餐饮股份有限公司',time:'2019.03-2022.03',label:["中式快餐","30-40岁男性"],info:[9,8,8]},
|
||||
{icon:'',name:'老乡鸡',company:'老乡鸡餐饮股份有限公司',time:'2019.03-2022.03',label:["中式快餐","30-40岁男性"],info:[9,9,9]},
|
||||
{icon:'',name:'永和大王',company:'永和大王餐饮股份有限公司',time:'2019.03-2022.03',label:["中式快餐","30-40岁男性"],info:[8,8,8]}]
|
||||
this.brandInfoList = res
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.main {
|
||||
width: 100vw;
|
||||
min-height: 100vh;
|
||||
width: 100vw;
|
||||
min-height: 100vh;
|
||||
.charts{
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
padding: 28px 16px 24px;
|
||||
background: #fff;
|
||||
.chartsItem{
|
||||
.title{
|
||||
font-size: 17px;
|
||||
font-family: PingFangSC-Semibold, PingFang SC;
|
||||
font-weight: 600;
|
||||
color: #160002;
|
||||
line-height: 24px;
|
||||
.unit{
|
||||
font-size: 14px;
|
||||
font-family: PingFangSC-Regular, PingFang SC;
|
||||
font-weight: 400;
|
||||
color: #786B6C;
|
||||
line-height: 20px;
|
||||
margin-left: 4px;
|
||||
}
|
||||
}
|
||||
.labelList{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-flow: wrap;
|
||||
margin-top: 12px;
|
||||
.labelItem{
|
||||
background: #EDF0F4;
|
||||
border-radius: 4px;
|
||||
padding:2px 6px;
|
||||
margin-right: 6px;
|
||||
margin-bottom: 6px;
|
||||
.name{
|
||||
font-size: 14px;
|
||||
font-family: PingFangSC-Regular, PingFang SC;
|
||||
font-weight: 400;
|
||||
color: #160002;
|
||||
line-height: 20px;
|
||||
.number{
|
||||
font-size: 14px;
|
||||
font-family: PingFangSC-Regular, PingFang SC;
|
||||
font-weight: 400;
|
||||
color: #A69E9F;
|
||||
line-height: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<div class="main">
|
||||
<header-top :bgUrl="bgUrl" :menu="menu" :bgColor="bgColor" :title="title" :labelList="labelList"/>
|
||||
<header-top :bgUrl="bgUrl" :menu="menu" :topBg="topBg" :bgColor="bgColor" :title="title" :labelList="labelList"/>
|
||||
|
||||
<div class="charts">
|
||||
<div class="chartsItem">
|
||||
@ -9,7 +9,22 @@
|
||||
</div>
|
||||
<div class="chartsItem" style="margin-top: 32px">
|
||||
<p class="title">客群分析</p>
|
||||
<customer-second />
|
||||
<customer-second :data="genderBubbleList" />
|
||||
<analyse />
|
||||
</div>
|
||||
<div class="chartsItem" style="margin-top: 32px">
|
||||
<p class="title">客群消费偏好</p>
|
||||
<consum-prefer :data="consterPreferList" />
|
||||
<analyse />
|
||||
</div>
|
||||
<div class="chartsItem" style="margin-top: 32px">
|
||||
<p class="title">客群消费水平</p>
|
||||
<consumption-level :data="consumptionLevelList"/>
|
||||
<analyse />
|
||||
</div>
|
||||
<div class="chartsItem" style="margin-top: 32px">
|
||||
<p class="title">业态偏好</p>
|
||||
<business-type :data="businessTypeList"></business-type>
|
||||
<analyse />
|
||||
</div>
|
||||
</div>
|
||||
@ -21,17 +36,25 @@ 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";
|
||||
import ConsumPrefer from "./components/guest/consumPrefer.vue";
|
||||
import ConsumptionLevel from "./components/guest/consumptionLevel.vue";
|
||||
import BusinessType from "./components/guest/businessType.vue";
|
||||
export default {
|
||||
name: "guestPortrait",
|
||||
components:{analyse, headerTop,customerFirst,customerSecond},
|
||||
components:{BusinessType, ConsumptionLevel, ConsumPrefer, analyse, headerTop,customerFirst,customerSecond},
|
||||
data() {
|
||||
return {
|
||||
topBg:'linear-gradient(180deg, #A1D0C1 0%, #B1D9CD 100%);',//顶部组件的悬浮背景色
|
||||
labelList:['女性','高消费','喜爱奶茶','浙江','20-30岁','江苏'],//标签
|
||||
title:'客群画像',//页面标题
|
||||
bgColor:'180deg, #30C8ED 0%, #0B9353 100%',//标签背景颜色
|
||||
bgUrl:'https://eshangtech.com/ShopICO/ahyd-BID/commercial/guestPortraitBg.svg',//背景图片路径
|
||||
time:'',//跳转携带的时间
|
||||
menu:{},//手机配置信息
|
||||
genderBubbleList:[],//男女的气泡图
|
||||
consterPreferList:[],//客群消费偏好
|
||||
consumptionLevelList:[],//客群消费水平
|
||||
businessTypeList:[]//业态偏好
|
||||
}
|
||||
},
|
||||
onLoad(option){
|
||||
@ -43,6 +66,61 @@ export default {
|
||||
uni.setStorageSync('phoneInfo',systemInfo)
|
||||
this.statusBarHeight = Number(systemInfo.statusBarHeight)
|
||||
this.menu = uni.getMenuButtonBoundingClientRect()
|
||||
//客群分析男女的气泡图
|
||||
this.getGenderBubbleList()
|
||||
//客群消费偏好
|
||||
this.getConsterPreferList()
|
||||
//客群消费水平
|
||||
this.getConsumptionLevelList()
|
||||
//业态偏好
|
||||
this.getBusinessTypeList()
|
||||
},
|
||||
methods:{
|
||||
//客群分析男女的气泡图
|
||||
getGenderBubbleList(){
|
||||
let res = [
|
||||
{
|
||||
name: "男",
|
||||
data: [[25,60,60],[40,35,35]]
|
||||
},
|
||||
{
|
||||
name: "女",
|
||||
data: [[25,35,35],[35,15,15]]
|
||||
}
|
||||
]
|
||||
this.genderBubbleList = res
|
||||
},
|
||||
//客群消费偏好
|
||||
getConsterPreferList(){
|
||||
let res = {
|
||||
categories: ['餐饮','商超','水果饮品','连锁品牌','粽子','小吃'],
|
||||
series: [
|
||||
{name: "男", data: [90,110,165,195,187,172]},
|
||||
{name: "女", data: [190,210,105,35,27,102]}
|
||||
]
|
||||
}
|
||||
this.consterPreferList = res
|
||||
},
|
||||
//客群消费水平
|
||||
getConsumptionLevelList(){
|
||||
let res=[{name:'男',big:'14.8',normal:'41.7',small:'43.5'},
|
||||
{name:'女',big:'44.1',normal:'31.7',small:'24.2'}]
|
||||
this.consumptionLevelList = res
|
||||
},
|
||||
//业态偏好
|
||||
getBusinessTypeList(){
|
||||
let res=[
|
||||
{
|
||||
data: [{name:"餐饮",value:35.6},
|
||||
{name:"小吃",value:22.5},
|
||||
{name:"水果饮品",value:17.3},
|
||||
{name:"粽子",value:15.2},
|
||||
{name:"商超",value:5.8},
|
||||
{name:"其他",value:3.6}]
|
||||
}
|
||||
]
|
||||
this.businessTypeList = res
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@ -54,7 +132,7 @@ export default {
|
||||
.charts{
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
padding: 28px 16px 0;
|
||||
padding: 28px 16px 24px;
|
||||
background: #fff;
|
||||
.chartsItem{
|
||||
.title{
|
||||
|
||||
@ -1,23 +1,186 @@
|
||||
<template>
|
||||
<div class="main">
|
||||
<header-top :bgUrl="bgUrl" :menu="menu" :bgColor="bgColor" :title="title" :labelList="labelList"/>
|
||||
<header-top :bgUrl="bgUrl" :menu="menu" :bgColor="bgColor" :title="title" :labelList="labelList" :topBg="topBg"/>
|
||||
|
||||
<div class="charts">
|
||||
<div class="chartsItem">
|
||||
<p class="title">营收分析</p>
|
||||
<revenue-analysis :data="revenueList"/>
|
||||
</div>
|
||||
<div class="chartsItem" style="margin-top: 32px">
|
||||
<p class="title">合同保底</p>
|
||||
<contract-guarantee :data="contractList"/>
|
||||
</div>
|
||||
<div class="chartsItem" style="margin-top: 32px">
|
||||
<p class="title">客流客单交易</p>
|
||||
<contract-guarantee :data="orderTransaction"/>
|
||||
</div>
|
||||
<div class="chartsItem" style="margin-top: 32px">
|
||||
<p class="title">同比分析</p>
|
||||
<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>
|
||||
<div class="subItem">
|
||||
<p class="title">营收同比</p>
|
||||
<div class="money">
|
||||
<div class="top">
|
||||
<image class="icon" src="/static/images/commercial/blueMoney.svg"></image>
|
||||
<p class="sumMoney">413,168.00</p>
|
||||
</div>
|
||||
<div class="bottom">
|
||||
<image class="icon" src=""></image>
|
||||
<p class="add">+43.00%</p>
|
||||
<p class="text">(相比去年同日)</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="subItem">
|
||||
<p class="title" style="margin-top: 20px">营收对比</p>
|
||||
<money-compare :data="moneyCompareList"/>
|
||||
</div>
|
||||
<div class="subItem">
|
||||
<p class="title" style="margin-top: 20px">营收趋势</p>
|
||||
<revenue-trends :data="trendsList"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="chartsItem" style="margin-top: 32px">
|
||||
<p class="title" >营收占比</p>
|
||||
<div class="progress">
|
||||
<div class="top">
|
||||
<div class="left">
|
||||
<text class="title">自营</text>
|
||||
<text class="value" style="margin-left: 4px">{{revenueType.own}}%</text>
|
||||
</div>
|
||||
<div class="right">
|
||||
<text class="value">{{revenueType.ectocyst}}%</text>
|
||||
<text class="title" style="margin-left: 4px">外包</text>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bottom">
|
||||
<div class="first" :style="{width:revenueType.own+'%'}"></div>
|
||||
<div class="second" :style="{width:revenueType.ectocyst+'%'}"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="chartsItem" style="margin-top: 32px">
|
||||
<p class="title" >本月自营计划</p>
|
||||
<view class="box">
|
||||
<view class="top">
|
||||
<view class="big">
|
||||
<image class="icon" src="https://eshangtech.com/ShopICO/ahyd-BID/index/thisMonth.svg"></image>
|
||||
</view>
|
||||
<view class="text">
|
||||
<view class="textTop">
|
||||
<view class="left">
|
||||
<p class="number">{{plan.percentageMonth?plan.percentageMonth + '%':'-'}}</p>
|
||||
<p v-if="plan.percentageMonth>=100" class="desc"><image class="success" src="/static/images/index/successMonth.svg"></image></p>
|
||||
</view>
|
||||
<view class="right">
|
||||
<text class="comparePlan">比计划： </text>
|
||||
<view class="box2">
|
||||
<image class="addIcon" :src="Number(monthAdd)>0?'https://eshangtech.com/ShopICO/ahyd-BID/index/addIcon.svg':'https://eshangtech.com/ShopICO/ahyd-BID/index/reduce.svg'"></image>
|
||||
<p class="text">{{monthAdd?monthAdd + '%':'-'}}</p>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<div class="progressPlan">
|
||||
<div class="trans" :style="{width:plan.percentageMonth + '%'}"></div>
|
||||
<!-- <div class=pro :style="{width:(100 - plan.percentageMonth)+ '%'}"></div>-->
|
||||
<!-- <view class="trans" :style="{width: plan.percentageMonth + '%'}"></view>-->
|
||||
<!-- <image class="img" src="https://eshangtech.com/ShopICO/ahyd-BID/index/progress_orange.png"></image>-->
|
||||
<!-- <div class=pro :style="{width:(100 - plan.percentageMonth)+ '%'}"></div>-->
|
||||
</div>
|
||||
</view>
|
||||
</view>
|
||||
<view class="bottom">
|
||||
<view class="success" style="margin-right: 39px">
|
||||
<p class="text">本月已完成<text class="unit">/元</text></p>
|
||||
<p class="money">{{plan.RevenueMonth_Amount?plan.RevenueMonth_Amount:'-'}}</p>
|
||||
</view>
|
||||
<view class="success">
|
||||
<p class="text">本月计划<text class="unit">/元</text></p>
|
||||
<p class="money">{{plan.BudgetMonth_Amount?plan.BudgetMonth_Amount:'-'}}</p>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</div>
|
||||
<div class="chartsItem" style="margin-top: 32px">
|
||||
<p class="title" >年度自营计划</p>
|
||||
<view class="box">
|
||||
<view class="top">
|
||||
<view class="big">
|
||||
<image class="icon" src="https://eshangtech.com/ShopICO/ahyd-BID/index/planYear.svg"></image>
|
||||
</view>
|
||||
<view class="text">
|
||||
<view class="textTop">
|
||||
<view class="left">
|
||||
<p class="number">{{plan.percentageYear?plan.percentageYear + '%':'-'}}</p>
|
||||
<p v-if="plan.percentageYear>=100" class="desc" style="color: #4E68FF"><image class="success" src="/static/images/index/yearSuccess.svg"></image></p>
|
||||
</view>
|
||||
<view class="right">
|
||||
<text class="comparePlan">比计划： </text>
|
||||
<div class="box2">
|
||||
<image class="addIcon" :src="Number(yearAdd)>0?'https://eshangtech.com/ShopICO/ahyd-BID/index/addIcon.svg':'https://eshangtech.com/ShopICO/ahyd-BID/index/reduce.svg'"></image>
|
||||
<p class="text">{{yearAdd?yearAdd + '%':''}}</p>
|
||||
</div>
|
||||
</view>
|
||||
</view>
|
||||
<div class="progressPlan">
|
||||
<div class="transYear" :style="{width:plan.percentageYear + '%'}"></div>
|
||||
<!-- <image class="img" :style="{width: plan.percentageYear + '%'}" src="https://eshangtech.com/ShopICO/ahyd-BID/index/progress_blue.png"></image>-->
|
||||
<!-- <div class=pro :style="{width:(100 - plan.percentageYear)+ '%'}"></div>-->
|
||||
</div>
|
||||
</view>
|
||||
</view>
|
||||
<view class="bottom">
|
||||
<view class="success" style="margin-right: 39px">
|
||||
<p class="text">年度已完成<text class="unit">/元</text></p>
|
||||
<p class="money">{{plan.RevenueYear_Amount?plan.RevenueYear_Amount:'-'}}</p>
|
||||
</view>
|
||||
<view class="success">
|
||||
<p class="text">年度计划<text class="unit">/元</text></p>
|
||||
<p class="money">{{plan.BudgetYear_Amount?plan.BudgetYear_Amount:'-'}}</p>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import headerTop from "./components/headerTop.vue";
|
||||
import RevenueAnalysis from "./components/manager/revenueAnalysis.vue";
|
||||
import ContractGuarantee from "./components/manager/contractGuarantee.vue";
|
||||
import MoneyCompare from "./components/manager/moneyCompare.vue";
|
||||
import RevenueTrends from "./components/manager/revenueTrends.vue";
|
||||
import request from '@/util/index.js'
|
||||
|
||||
export default {
|
||||
name: "businessPortrait",
|
||||
components: {headerTop},
|
||||
components: {RevenueTrends, MoneyCompare, ContractGuarantee, RevenueAnalysis, headerTop},
|
||||
data() {
|
||||
return {
|
||||
topBg:'linear-gradient(180deg, #D9CCEF 0%, #DED3F2 100%);',
|
||||
labelList:['女性','高消费','喜爱奶茶','浙江','20-30岁','江苏'],//标签
|
||||
tabList:[{name:'营收金额',value:0},{name:'客单量',value:1},{name:'客单均价',value:2}],//选项卡列表
|
||||
selectTab:0,//当前选中
|
||||
title:'经营画像',//页面标题
|
||||
bgColor: '180deg, #996CFF 0%, #5D43F8 100%',
|
||||
bgUrl: 'https://eshangtech.com/ShopICO/ahyd-BID/commercial/managePortraitBg.svg',//背景图片路径
|
||||
time: '',//跳转携带的时间
|
||||
menu: {},//手机配置信息
|
||||
revenueList:[],//营收分析
|
||||
contractList:{},//合同保底
|
||||
orderTransaction:{},//客流客单交易
|
||||
moneyCompareList:[],//营收对比
|
||||
trendsList:[],//营收趋势
|
||||
revenueType:{},//营收占比
|
||||
plan:{},//月度和年度接口的返回参数 一起的
|
||||
monthAdd:'',//月每天的相对增加
|
||||
yearAdd:'', // 年度计划增加的百分比
|
||||
}
|
||||
},
|
||||
onLoad(option) {
|
||||
@ -29,6 +192,108 @@ export default {
|
||||
uni.setStorageSync('phoneInfo', systemInfo)
|
||||
this.statusBarHeight = Number(systemInfo.statusBarHeight)
|
||||
this.menu = uni.getMenuButtonBoundingClientRect()
|
||||
//营收分析
|
||||
this.getRevenueList()
|
||||
//合同保底
|
||||
this.getContractList()
|
||||
//客流客单交易
|
||||
this.getOrderTransaction()
|
||||
//营收对比
|
||||
this.getMoneyCompareList()
|
||||
//营收趋势
|
||||
this.getTrendsList()
|
||||
//营收占比
|
||||
this.getRevenueType()
|
||||
//月度计划、年度计划
|
||||
this.monthYearPlan()
|
||||
},
|
||||
methods:{
|
||||
getRevenueList(){
|
||||
let res = []
|
||||
this.revenueList = res
|
||||
},
|
||||
getContractList(){
|
||||
let res = {
|
||||
title: '完成率',
|
||||
value: 67.1
|
||||
}
|
||||
this.contractList = res
|
||||
},
|
||||
getOrderTransaction(){
|
||||
let res = {
|
||||
title: '转化率',
|
||||
value: 50.5
|
||||
}
|
||||
this.orderTransaction = res
|
||||
},
|
||||
//选项卡改变
|
||||
handleChangeTab(value){
|
||||
this.selectTab = value
|
||||
},
|
||||
getMoneyCompareList(){
|
||||
let res = {
|
||||
categories: ["1月","2月","3月","4月","5月","6月","7月","8月","9月","10月","11月","12月"],
|
||||
series: [
|
||||
{
|
||||
name: "平日平均",
|
||||
data: [7,10,8,5,8,8,9,8,5,6,7,7]
|
||||
},
|
||||
{
|
||||
name: "周末平均",
|
||||
data: [5,8,8,7,6,6,6,8,7,7,6,7]
|
||||
},
|
||||
{
|
||||
name: "节假日平均",
|
||||
data: [5,10,4,4,7,8,6,5,5,6,10,7]
|
||||
}
|
||||
]
|
||||
}
|
||||
this.moneyCompareList = res
|
||||
},
|
||||
getTrendsList(){
|
||||
let res={
|
||||
categories: ["1月","2月","3月","4月","5月","6月","7月","8月","9月","10月","11月","12月"],
|
||||
series:[{
|
||||
name: "",
|
||||
data: [3,4,5,4.8,5,4.2,4.5,5,5.5,5.7,8,9]
|
||||
}]
|
||||
}
|
||||
this.trendsList = res
|
||||
},
|
||||
getRevenueType(){
|
||||
let res={
|
||||
own:'64.8',
|
||||
ectocyst:'35.2'
|
||||
}
|
||||
this.revenueType = res
|
||||
},
|
||||
monthYearPlan(){
|
||||
const monthDate= {
|
||||
Province_Code:'340000',
|
||||
Statistics_Date:this.time
|
||||
}
|
||||
request.$webGet('CommercialApi/Revenue/GetRevenueBudget',monthDate).then(res=>{
|
||||
// 赋值给data中的这个对象 在请求完之后会进行统一的数据处理
|
||||
this.plan = res.Result_Data
|
||||
this.plan.percentageMonth = (res.Result_Data.RevenueMonth_Amount / res.Result_Data.BudgetMonth_Amount*100).toFixed(2)
|
||||
// this.plan.percentageMonth = 80
|
||||
this.plan.percentageYear = (res.Result_Data.RevenueYear_Amount / res.Result_Data.BudgetYear_Amount*100).toFixed(2)
|
||||
let date = new Date(this.time)
|
||||
let nowDay = date.getDate()
|
||||
let day = this.$util.getThisMonthDay(this.time)
|
||||
//一天应该的增长率
|
||||
let oneDay = 100/day
|
||||
// 到了当天的应该有的百分比
|
||||
let thisDayShould= oneDay*nowDay
|
||||
this.monthAdd = (this.plan.percentageMonth - thisDayShould).toFixed(2)
|
||||
this.yearAdd = (((res.Result_Data.RevenueYear_Amount - res.Result_Data.RevenueYear_PlanAmount)/res.Result_Data.BudgetYear_Amount)*100).toFixed(2)
|
||||
//处理数据
|
||||
this.plan.RevenueMonth_Amount = this.$util.fmoney(res.Result_Data.RevenueMonth_Amount)
|
||||
this.plan.BudgetMonth_Amount = this.$util.fmoney(res.Result_Data.BudgetMonth_Amount)
|
||||
this.plan.RevenueYear_Amount = this.$util.fmoney(res.Result_Data.RevenueYear_Amount)
|
||||
this.plan.BudgetYear_Amount = this.$util.fmoney(res.Result_Data.BudgetYear_Amount)
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@ -37,5 +302,338 @@ export default {
|
||||
.main {
|
||||
width: 100vw;
|
||||
min-height: 100vh;
|
||||
.charts{
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
padding: 28px 16px 24px;
|
||||
background: #fff;
|
||||
.chartsItem{
|
||||
.title{
|
||||
font-size: 17px;
|
||||
font-family: PingFangSC-Semibold, PingFang SC;
|
||||
font-weight: 600;
|
||||
color: #160002;
|
||||
line-height: 24px;
|
||||
.unit{
|
||||
font-size: 14px;
|
||||
font-family: PingFangSC-Regular, PingFang SC;
|
||||
font-weight: 400;
|
||||
color: #786B6C;
|
||||
line-height: 20px;
|
||||
margin-left: 4px;
|
||||
}
|
||||
}
|
||||
.progress{
|
||||
width:calc(100vw - 32px);
|
||||
margin-top: 12px;
|
||||
.top{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 8px;
|
||||
.left,.right{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.title{
|
||||
font-size: 14px;
|
||||
font-family: PingFangSC-Regular, PingFang SC;
|
||||
font-weight: 400;
|
||||
color: #160002;
|
||||
margin: 6px 0;
|
||||
}
|
||||
.value{
|
||||
font-size: 18px;
|
||||
font-family: DINAlternate-Bold, DINAlternate;
|
||||
font-weight: bold;
|
||||
color: #160002;
|
||||
margin: 6px 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
.bottom{
|
||||
width: 100%;
|
||||
height: 14px;
|
||||
position: relative;
|
||||
.first{
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
left: 0;top: 0;
|
||||
background: #1E80FF;
|
||||
border-radius: 2px 0 0 2px;
|
||||
}
|
||||
.first:after{
|
||||
position: absolute;
|
||||
content:'';
|
||||
right: 0;top: 0;
|
||||
background: #fff;
|
||||
width: 1px;
|
||||
height: 100%;
|
||||
z-index:111;
|
||||
}
|
||||
.second{
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
right: 0;top: 0;
|
||||
background: #00C2FF;
|
||||
border-radius: 0 2px 2px 0 ;
|
||||
}
|
||||
.second:before{
|
||||
position: absolute;
|
||||
content:'';
|
||||
left: 0;top: 0;
|
||||
background: #fff;
|
||||
width: 1px;
|
||||
height: 100%;
|
||||
z-index:111;
|
||||
}
|
||||
}
|
||||
}
|
||||
.box {
|
||||
width: 100%;
|
||||
padding: 12px 16px;
|
||||
box-sizing: border-box;
|
||||
border-radius: 8px;
|
||||
background: #f5f2f2;
|
||||
margin-top: 12px;
|
||||
.top {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
.big {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
background: #ffffff;
|
||||
border-radius: 8px;
|
||||
border: 1px solid #ebebeb;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin-right: 8px;
|
||||
.icon {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
}
|
||||
.text {
|
||||
width: calc(100% - 60px);
|
||||
padding: 2px 0;
|
||||
.textTop{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
.left{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.number {
|
||||
font-size: 36rpx;
|
||||
font-family: DINAlternate-Bold, DINAlternate;
|
||||
font-weight: bold;
|
||||
color: #150002;
|
||||
line-height: 40rpx;
|
||||
}
|
||||
.desc{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-left: 8px;
|
||||
font-size: 14px;
|
||||
color: #FF7043;
|
||||
.success{
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
margin-right: 4px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.right{
|
||||
flex: 1;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
.comparePlan{
|
||||
font-size: 24rpx;
|
||||
font-family: PingFangSC-Regular, PingFang SC;
|
||||
font-weight: 400;
|
||||
color: #a69e9f;
|
||||
line-height: 36rpx;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.box2{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.text{
|
||||
font-size: 14px;
|
||||
font-family: DINAlternate-Bold, DINAlternate;
|
||||
color: #150002;
|
||||
font-weight: bold;
|
||||
|
||||
line-height: 40rpx;
|
||||
}
|
||||
.addIcon {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
margin-right: 2px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.progressPlan{
|
||||
width: 100%;
|
||||
height: 8px;
|
||||
border-radius: 5px;
|
||||
background: #fff;
|
||||
margin-top: 8px;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
.trans{
|
||||
height: 8px;
|
||||
position: absolute;
|
||||
left: 0;top: 0;
|
||||
border-top-right-radius: 4px;
|
||||
border-bottom-right-radius: 4px;
|
||||
background: url("https://eshangtech.com/ShopICO/ahyd-BID/index/progress_orange.png")no-repeat 100% 100%;
|
||||
}
|
||||
.transYear{
|
||||
height: 8px;
|
||||
position: absolute;
|
||||
left: 0;top: 0;
|
||||
border-top-right-radius: 4px;
|
||||
border-bottom-right-radius: 4px;
|
||||
background: url("https://eshangtech.com/ShopICO/ahyd-BID/index/progress_blue.png")no-repeat 100% 100%;
|
||||
}
|
||||
//.img{
|
||||
// width: 100%;
|
||||
// height: 100%;
|
||||
// position: absolute;
|
||||
// top: 0;
|
||||
// left: 0;
|
||||
// z-index:1;
|
||||
//}
|
||||
//.pro{
|
||||
// height: 100%;
|
||||
// position: absolute;
|
||||
// top: 0;right: 0;
|
||||
// background: #fff;
|
||||
// z-index:2;
|
||||
//}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
.bottom {
|
||||
display: flex;
|
||||
margin-top: 16px;
|
||||
padding-left: 48px;
|
||||
.success {
|
||||
.text {
|
||||
font-size: 28rpx;
|
||||
font-family: PingFangSC-Regular, PingFang SC;
|
||||
font-weight: 400;
|
||||
color: #786b6c;
|
||||
line-height: 40rpx;
|
||||
margin-bottom: 2px;
|
||||
.unit {
|
||||
font-size: 28rpx;
|
||||
font-family: PingFangSC-Regular, PingFang SC;
|
||||
font-weight: 400;
|
||||
color: #a69e9f;
|
||||
line-height: 40rpx;
|
||||
margin-left: 2px;
|
||||
}
|
||||
}
|
||||
.money {
|
||||
font-size: 28rpx;
|
||||
font-family: DINAlternate-Bold, DINAlternate;
|
||||
font-weight: 600;
|
||||
color: #160002;
|
||||
line-height: 40rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.tab{
|
||||
width: 100%;
|
||||
height: 38px;
|
||||
background: #F2F1F1;
|
||||
border-radius: 4px;
|
||||
box-sizing: border-box;
|
||||
padding:4px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 12px;
|
||||
margin-top: 12px;
|
||||
.tabItem{
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: calc(100% / 3);
|
||||
height: 30px;
|
||||
border-radius: 4px;
|
||||
font-size: 14px;
|
||||
font-family: PingFangSC-Regular, PingFang SC;
|
||||
font-weight: 400;
|
||||
color: #160002;
|
||||
}
|
||||
.tabItemActive{
|
||||
background: #FFFFFF;
|
||||
}
|
||||
}
|
||||
.subItem{
|
||||
width:calc(100% - 32px);
|
||||
.title{
|
||||
font-size: 14px;
|
||||
font-family: PingFangSC-Semibold, PingFang SC;
|
||||
font-weight: 600;
|
||||
color: #160002;
|
||||
line-height: 20px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
.money{
|
||||
width:100%;
|
||||
padding: 18px 16px;
|
||||
background: #F7F7F7;
|
||||
.top{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 4px;
|
||||
.icon{
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
margin-right: 8px;
|
||||
}
|
||||
.sumMoney{
|
||||
font-size: 20px;
|
||||
font-family: DINAlternate-Bold, DINAlternate;
|
||||
font-weight: bold;
|
||||
color: #341D00;
|
||||
line-height: 24px;
|
||||
}
|
||||
}
|
||||
.bottom{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-left: 24px;
|
||||
.icon{
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
}
|
||||
.add{
|
||||
font-size: 14px;
|
||||
font-family: PingFangSC-Regular, PingFang SC;
|
||||
font-weight: 400;
|
||||
color: #FA5151;
|
||||
line-height: 20px;
|
||||
}
|
||||
.text{
|
||||
font-size: 14px;
|
||||
font-family: PingFangSC-Regular, PingFang SC;
|
||||
font-weight: 400;
|
||||
color: #A69E9F;
|
||||
line-height: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -36,7 +36,7 @@
|
||||
<view class="type">
|
||||
<view class="item">
|
||||
<view class="leftImg">
|
||||
<image src="/static/images/index/business.svg"></image>
|
||||
<image src="/static/images/index/average.svg"></image>
|
||||
</view>
|
||||
<view class="right">
|
||||
<p class="typeName">客单交易<text class="unit">/笔</text></p>
|
||||
@ -46,7 +46,7 @@
|
||||
|
||||
<view class="item">
|
||||
<view class="leftImg">
|
||||
<image src="/static/images/index/average.svg"></image>
|
||||
<image src="/static/images/index/business.svg"></image>
|
||||
</view>
|
||||
<view class="right">
|
||||
<p class="typeName">客单均价<text class="unit">/元</text></p>
|
||||
@ -138,7 +138,7 @@
|
||||
<p class="money" v-else>{{ item.yesterValue }}</p>
|
||||
<view v-if="index === 0 || index === 2" class="active">
|
||||
<image v-if="Number(item.add)!==0" class="addIcon" :src="Number(item.add)>0?'https://eshangtech.com/ShopICO/ahyd-BID/index/addIcon.svg':'https://eshangtech.com/ShopICO/ahyd-BID/index/reduce.svg'"></image>
|
||||
<text v-if="Number(item.add)!==0" class="add">{{ item.add }}</text>
|
||||
<text v-if="Number(item.add)!==0" class="add" :style="{color:Number(item.add)<0?'#07C160':'#FA5151'}">{{ item.add }}</text>
|
||||
<text v-if="Number(item.add)!==0" class="yesterday">(相比昨日)</text>
|
||||
</view>
|
||||
<view class="otherBox" v-else>
|
||||
@ -234,7 +234,7 @@
|
||||
</div>
|
||||
|
||||
<div class="thisMonth">
|
||||
<p class="title">本月计划</p>
|
||||
<p class="title">本月自营计划</p>
|
||||
<view class="box">
|
||||
<view class="top">
|
||||
<view class="big">
|
||||
@ -276,7 +276,7 @@
|
||||
</view>
|
||||
</div>
|
||||
<div class="thisYear" style="margin-top: 0px">
|
||||
<p class="title">年度计划</p>
|
||||
<p class="title">年度自营计划</p>
|
||||
<view class="box">
|
||||
<view class="top">
|
||||
<view class="big">
|
||||
@ -550,7 +550,6 @@ export default {
|
||||
// 赋值给data中的这个对象 在请求完之后会进行统一的数据处理
|
||||
this.plan = res.Result_Data
|
||||
this.plan.percentageMonth = (res.Result_Data.RevenueMonth_Amount / res.Result_Data.BudgetMonth_Amount*100).toFixed(2)
|
||||
// this.plan.percentageMonth = 80
|
||||
this.plan.percentageYear = (res.Result_Data.RevenueYear_Amount / res.Result_Data.BudgetYear_Amount*100).toFixed(2)
|
||||
let date = new Date(this.lastDay)
|
||||
let nowDay = date.getDate()
|
||||
|
||||
32
static/images/commercial/add.svg
Normal file
32
static/images/commercial/add.svg
Normal file
@ -0,0 +1,32 @@
|
||||
<?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="0%" x2="50%" y2="100%" id="linearGradient-1">
|
||||
<stop stop-color="#A86FFC" offset="0%"></stop>
|
||||
<stop stop-color="#6A4CE4" offset="100%"></stop>
|
||||
</linearGradient>
|
||||
<linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-2">
|
||||
<stop stop-color="#A86FFC" offset="0%"></stop>
|
||||
<stop stop-color="#6A4CE4" offset="100%"></stop>
|
||||
</linearGradient>
|
||||
<linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-3">
|
||||
<stop stop-color="#A86FFC" offset="0%"></stop>
|
||||
<stop stop-color="#6A4CE4" offset="100%"></stop>
|
||||
</linearGradient>
|
||||
<linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-4">
|
||||
<stop stop-color="#A86FFC" offset="0%"></stop>
|
||||
<stop stop-color="#6A4CE4" offset="100%"></stop>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<g id="商业BI-0330" transform="translate(-409.000000, -2937.000000)">
|
||||
<g id="编组" transform="translate(409.000000, 2937.000000)">
|
||||
<path d="M3,15 L5,15 C5.55228475,15 6,15.4477153 6,16 L6,17.5 C6,17.7761424 5.77614237,18 5.5,18 L2.5,18 C2.22385763,18 2,17.7761424 2,17.5 L2,16 C2,15.4477153 2.44771525,15 3,15 Z" id="矩形" fill="url(#linearGradient-1)" opacity="0.300000012"></path>
|
||||
<path d="M9,13 L11,13 C11.5522847,13 12,13.4477153 12,14 L12,17.5 C12,17.7761424 11.7761424,18 11.5,18 L8.5,18 C8.22385763,18 8,17.7761424 8,17.5 L8,14 C8,13.4477153 8.44771525,13 9,13 Z" id="矩形备份" fill="url(#linearGradient-2)" opacity="0.300000012"></path>
|
||||
<path d="M15,10 L17,10 C17.5522847,10 18,10.4477153 18,11 L18,17.5 C18,17.7761424 17.7761424,18 17.5,18 L14.5,18 C14.2238576,18 14,17.7761424 14,17.5 L14,11 C14,10.4477153 14.4477153,10 15,10 Z" id="矩形备份-2" fill="url(#linearGradient-3)" opacity="0.300000012"></path>
|
||||
<path d="M17.5,1.5 C17.7761424,1.5 18,1.72385763 18,2 L18,5.94974747 C18,6.22588984 17.7761424,6.44974747 17.5,6.44974747 C17.3673918,6.44974747 17.2402148,6.39706905 17.1464466,6.30330086 L16.5858644,5.743 L12.3431458,9.98528137 C12.0142832,10.3141439 11.5993874,10.5045381 11.1709073,10.5564637 L11.0097321,10.5694451 L10.8481323,10.5694451 C10.3635452,10.549973 9.88468901,10.3552518 9.51471863,9.98528137 L7.39286438,7.863 L4.56497116,10.6923882 C4.17444687,11.0829124 3.54128189,11.0829124 3.1507576,10.6923882 L1.73654403,9.27817459 C1.34601974,8.8876503 1.34601974,8.25448532 1.73654403,7.86396103 L5.97918472,3.62132034 C6.39026292,3.21024214 6.9357681,3.01552089 7.47419817,3.03715658 L7.63537343,3.050138 C8.06385346,3.10206367 8.47874928,3.29245778 8.80761184,3.62132034 L10.9278644,5.742 L13.7568644,2.914 L13.1966991,2.35355339 C13.001437,2.15829124 13.001437,1.84170876 13.1966991,1.64644661 C13.2904673,1.55267842 13.4176443,1.5 13.5502525,1.5 L17.5,1.5 Z" id="路径" fill="url(#linearGradient-4)"></path>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 3.3 KiB |
52
static/images/commercial/agreement.svg
Normal file
52
static/images/commercial/agreement.svg
Normal file
@ -0,0 +1,52 @@
|
||||
<?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="0%" x2="50%" y2="100%" id="linearGradient-1">
|
||||
<stop stop-color="#9967F5" offset="0%"></stop>
|
||||
<stop stop-color="#6449E2" offset="100%"></stop>
|
||||
</linearGradient>
|
||||
<linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-2">
|
||||
<stop stop-color="#A86FFC" offset="0%"></stop>
|
||||
<stop stop-color="#6A4CE4" offset="100%"></stop>
|
||||
</linearGradient>
|
||||
<linearGradient x1="50%" y1="119.258354%" x2="50%" y2="3.061617e-15%" id="linearGradient-3">
|
||||
<stop stop-color="#DAC0FF" offset="0%"></stop>
|
||||
<stop stop-color="#F1E8FF" offset="100%"></stop>
|
||||
</linearGradient>
|
||||
<path d="M8.25,14.5 C7.83578644,14.5 7.5,14.1642136 7.5,13.75 C7.5,13.3357864 7.83578644,13 8.25,13 L10,13 C10.5522847,13 11,12.5522847 11,12 C11,11.4871642 10.6139598,11.0644928 10.1166211,11.0067277 L10,11 C8.61928813,11 7.5,9.88071187 7.5,8.5 C7.5,7.11928813 8.61928813,6 10,6 L11.75,6 C12.1642136,6 12.5,6.33578644 12.5,6.75 C12.5,7.16421356 12.1642136,7.5 11.75,7.5 L10,7.5 C9.44771525,7.5 9,7.94771525 9,8.5 C9,9.01283584 9.38604019,9.43550716 9.88337887,9.49327227 L10,9.5 C11.3807119,9.5 12.5,10.6192881 12.5,12 C12.5,13.3807119 11.3807119,14.5 10,14.5 L8.25,14.5 Z" id="path-4"></path>
|
||||
<filter x="-140.0%" y="-58.8%" width="380.0%" height="264.7%" filterUnits="objectBoundingBox" id="filter-5">
|
||||
<feOffset dx="0" dy="2" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
|
||||
<feGaussianBlur stdDeviation="2" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
|
||||
<feColorMatrix values="0 0 0 0 0.435294118 0 0 0 0 0.309803922 0 0 0 0 0.901960784 0 0 0 1 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
|
||||
</filter>
|
||||
<path d="M8.25,14.5 C7.83578644,14.5 7.5,14.1642136 7.5,13.75 C7.5,13.3357864 7.83578644,13 8.25,13 L10,13 C10.5522847,13 11,12.5522847 11,12 C11,11.4871642 10.6139598,11.0644928 10.1166211,11.0067277 L10,11 C8.61928813,11 7.5,9.88071187 7.5,8.5 C7.5,7.11928813 8.61928813,6 10,6 L11.75,6 C12.1642136,6 12.5,6.33578644 12.5,6.75 C12.5,7.16421356 12.1642136,7.5 11.75,7.5 L10,7.5 C9.44771525,7.5 9,7.94771525 9,8.5 C9,9.01283584 9.38604019,9.43550716 9.88337887,9.49327227 L10,9.5 C11.3807119,9.5 12.5,10.6192881 12.5,12 C12.5,13.3807119 11.3807119,14.5 10,14.5 L8.25,14.5 Z" id="path-6"></path>
|
||||
<filter x="-140.0%" y="-58.8%" width="380.0%" height="264.7%" filterUnits="objectBoundingBox" id="filter-7">
|
||||
<feOffset dx="0" dy="2" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
|
||||
<feGaussianBlur stdDeviation="2" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
|
||||
<feColorMatrix values="0 0 0 0 0.435294118 0 0 0 0 0.309803922 0 0 0 0 0.901960784 0 0 0 1 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
|
||||
</filter>
|
||||
</defs>
|
||||
<g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<g id="商业BI-0330" transform="translate(-337.000000, -2937.000000)">
|
||||
<g id="编组" transform="translate(337.000000, 2937.000000)">
|
||||
<g>
|
||||
<circle id="椭圆形" stroke="url(#linearGradient-1)" stroke-width="1.5" cx="10" cy="10" r="9.25"></circle>
|
||||
<circle id="椭圆形备份" fill="url(#linearGradient-2)" cx="10" cy="10" r="7"></circle>
|
||||
<g id="形状结合">
|
||||
<use fill="black" fill-opacity="1" filter="url(#filter-5)" xlink:href="#path-4"></use>
|
||||
<use fill="url(#linearGradient-3)" fill-rule="evenodd" xlink:href="#path-4"></use>
|
||||
</g>
|
||||
</g>
|
||||
<g id="编组备份">
|
||||
<circle id="椭圆形" stroke="url(#linearGradient-1)" stroke-width="1.5" cx="10" cy="10" r="9.25"></circle>
|
||||
<circle id="椭圆形备份" fill="url(#linearGradient-2)" cx="10" cy="10" r="7"></circle>
|
||||
<g id="形状结合">
|
||||
<use fill="black" fill-opacity="1" filter="url(#filter-7)" xlink:href="#path-6"></use>
|
||||
<use fill="url(#linearGradient-3)" fill-rule="evenodd" xlink:href="#path-6"></use>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 4.5 KiB |
25
static/images/commercial/bg_icon.svg
Normal file
25
static/images/commercial/bg_icon.svg
Normal file
@ -0,0 +1,25 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg width="82px" height="96px" viewBox="0 0 82 96" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<title>编组_59备份@2x</title>
|
||||
<defs>
|
||||
<rect id="path-1" x="0" y="0" width="82" height="96"></rect>
|
||||
<linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-3">
|
||||
<stop stop-color="#4DB7DE" offset="0%"></stop>
|
||||
<stop stop-color="#1E80FF" offset="100%"></stop>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<g id="商业BI-0330" transform="translate(-301.000000, -2977.000000)">
|
||||
<g id="编组-59备份" transform="translate(301.000000, 2977.000000)">
|
||||
<mask id="mask-2" fill="white">
|
||||
<use xlink:href="#path-1"></use>
|
||||
</mask>
|
||||
<g id="蒙版" opacity="0.5"></g>
|
||||
<g opacity="0.0399999991" mask="url(#mask-2)">
|
||||
<path d="M35.8598722,0 L76.1401278,0 C78.5788659,5.87808294e-15 80.8844218,1.11239387 82.4021344,3.02131817 L107.571206,34.6780698 C110.096467,37.8542522 109.843883,42.4179559 106.98354,45.2960654 L61.6743405,90.8866884 C58.5598336,94.0205401 53.494538,94.0362222 50.3606863,90.9217152 C50.3489745,90.9100758 50.3372989,90.8984001 50.3256595,90.8866884 L5.01646001,45.2960654 C2.15611666,42.4179559 1.90353282,37.8542522 4.4287939,34.6780698 L29.5978656,3.02131817 C31.1155782,1.11239387 33.4211341,-3.99290317e-15 35.8598722,0 Z" id="矩形" fill="url(#linearGradient-3)"></path>
|
||||
<polyline id="路径-11" stroke="#FFFFFF" stroke-width="8" stroke-linecap="round" stroke-linejoin="round" points="40 40.2484472 56 56.3478261 72 40.2484472"></polyline>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.8 KiB |
18
static/images/commercial/blueMoney.svg
Normal file
18
static/images/commercial/blueMoney.svg
Normal file
@ -0,0 +1,18 @@
|
||||
<?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>编组_2@2x</title>
|
||||
<g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<g id="商业BI-0330" transform="translate(-221.000000, -2937.000000)">
|
||||
<g id="编组-2" transform="translate(221.000000, 2937.000000)">
|
||||
<circle id="椭圆形" fill="#1E80FF" cx="10" cy="10" r="10"></circle>
|
||||
<path d="M11,3.5 C12.5187831,3.5 13.8937831,4.11560847 14.8890873,5.1109127 C15.8843915,6.10621694 16.5,7.48121694 16.5,9 C16.5,10.5187831 15.8843915,11.8937831 14.8890873,12.8890873 C13.8937831,13.8843915 12.5187831,14.5 11,14.5 C9.48121694,14.5 8.10621694,13.8843915 7.1109127,12.8890873 C6.11560847,11.8937831 5.5,10.5187831 5.5,9 C5.5,7.48121694 6.11560847,6.10621694 7.1109127,5.1109127 C8.10621694,4.11560847 9.48121694,3.5 11,3.5 Z" id="椭圆形备份-2" stroke="#FFFFFF" opacity="0.600000024"></path>
|
||||
<path d="M9,5.5 C10.5187831,5.5 11.8937831,6.11560847 12.8890873,7.1109127 C13.8843915,8.10621694 14.5,9.48121694 14.5,11 C14.5,12.5187831 13.8843915,13.8937831 12.8890873,14.8890873 C11.8937831,15.8843915 10.5187831,16.5 9,16.5 C7.48121694,16.5 6.10621694,15.8843915 5.1109127,14.8890873 C4.11560847,13.8937831 3.5,12.5187831 3.5,11 C3.5,9.48121694 4.11560847,8.10621694 5.1109127,7.1109127 C6.10621694,6.11560847 7.48121694,5.5 9,5.5 Z" id="椭圆形" stroke="#FFFFFF" fill="#1E80FF"></path>
|
||||
<g id="编组" transform="translate(8.000000, 7.000000)">
|
||||
<rect id="矩形" fill="#FFFFFF" x="0.782471686" y="0" width="1" height="1.2" rx="0.5"></rect>
|
||||
<path d="M1.28247169,5.38188601 C1.55861406,5.38188601 1.78247169,5.60574363 1.78247169,5.88188601 L1.78247169,6.7 C1.78247169,6.97614237 1.55861406,7.2 1.28247169,7.2 C1.00632931,7.2 0.782471686,6.97614237 0.782471686,6.7 L0.782471686,5.88188601 C0.782471686,5.60574363 1.00632931,5.38188601 1.28247169,5.38188601 Z" id="矩形备份" fill="#FFFFFF"></path>
|
||||
<path d="M1.98247169,1.30414286 C0.604504386,1.13221176 -0.0551195352,1.58814194 0.00359992336,2.6719334 C0.0916791112,4.2976206 2.1627393,3.33639041 2.1627393,4.77021624 C2.1627393,5.72610013 1.44302617,6.13165364 0.00359992336,5.98687677" id="路径-7" stroke="#FFFFFF" stroke-linecap="round" stroke-linejoin="round"></path>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.5 KiB |
29
static/images/commercial/converRate.svg
Normal file
29
static/images/commercial/converRate.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="57.1700625%" y1="127.070865%" x2="46.5755212%" y2="9.87985329%" id="linearGradient-1">
|
||||
<stop stop-color="#FFD338" offset="0%"></stop>
|
||||
<stop stop-color="#F38309" offset="100%"></stop>
|
||||
</linearGradient>
|
||||
<linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-2">
|
||||
<stop stop-color="#F38309" offset="0%"></stop>
|
||||
<stop stop-color="#EBA644" offset="100%"></stop>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<g id="商业BI-0330" transform="translate(-445.000000, -2897.000000)">
|
||||
<g id="图标/消费转化率" transform="translate(443.000000, 2897.000000)">
|
||||
<g id="编组" transform="translate(2.000000, 0.000000)">
|
||||
<path d="M2,1 L6,1 L6,1 L8,3 L8,9 C8,9.55228475 7.55228475,10 7,10 L2,10 C1.44771525,10 1,9.55228475 1,9 L1,2 C1,1.44771525 1.44771525,1 2,1 Z" id="矩形" fill="url(#linearGradient-1)"></path>
|
||||
<path d="M13,10 L17,10 L17,10 L19,12 L19,18 C19,18.5522847 18.5522847,19 18,19 L13,19 C12.4477153,19 12,18.5522847 12,18 L12,11 C12,10.4477153 12.4477153,10 13,10 Z" id="矩形备份" fill="url(#linearGradient-1)"></path>
|
||||
<g transform="translate(-1.913290, 2.000000)">
|
||||
<path d="M4.42136692,11.890528 C5.78835196,14.3419744 8.40719443,16 11.4132895,16 M18.2224905,3.79850528 C16.8128808,1.51885644 14.2904591,0 11.4132895,0" id="形状" stroke="url(#linearGradient-2)" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
|
||||
<polygon id="三角形" fill="#F28812" transform="translate(18.385498, 4.197909) rotate(-219.000000) translate(-18.385498, -4.197909) " points="18.3854978 2.69790916 20.8854978 5.69790916 15.8854978 5.69790916"></polygon>
|
||||
<polygon id="三角形备份" fill="#F28812" transform="translate(3.500000, 11.080636) rotate(-40.000000) translate(-3.500000, -11.080636) " points="3.5 9.58063646 6 12.5806365 1 12.5806365"></polygon>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.4 KiB |
36
static/images/commercial/money.svg
Normal file
36
static/images/commercial/money.svg
Normal file
@ -0,0 +1,36 @@
|
||||
<?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="0%" x2="50%" y2="100%" id="linearGradient-1">
|
||||
<stop stop-color="#F38309" offset="0%"></stop>
|
||||
<stop stop-color="#EBA644" offset="100%"></stop>
|
||||
</linearGradient>
|
||||
<linearGradient x1="61.8525524%" y1="127.070865%" x2="44.3391269%" y2="9.87985329%" id="linearGradient-2">
|
||||
<stop stop-color="#FFD338" offset="0%"></stop>
|
||||
<stop stop-color="#F38309" offset="100%"></stop>
|
||||
</linearGradient>
|
||||
<linearGradient x1="50%" y1="119.258354%" x2="50%" y2="3.061617e-15%" id="linearGradient-3">
|
||||
<stop stop-color="#FEF199" offset="0%"></stop>
|
||||
<stop stop-color="#FFF2E2" offset="100%"></stop>
|
||||
</linearGradient>
|
||||
<path d="M8.25,14.5 C7.83578644,14.5 7.5,14.1642136 7.5,13.75 C7.5,13.3357864 7.83578644,13 8.25,13 L10,13 C10.5522847,13 11,12.5522847 11,12 C11,11.4871642 10.6139598,11.0644928 10.1166211,11.0067277 L10,11 C8.61928813,11 7.5,9.88071187 7.5,8.5 C7.5,7.11928813 8.61928813,6 10,6 L11.75,6 C12.1642136,6 12.5,6.33578644 12.5,6.75 C12.5,7.16421356 12.1642136,7.5 11.75,7.5 L10,7.5 C9.44771525,7.5 9,7.94771525 9,8.5 C9,9.01283584 9.38604019,9.43550716 9.88337887,9.49327227 L10,9.5 C11.3807119,9.5 12.5,10.6192881 12.5,12 C12.5,13.3807119 11.3807119,14.5 10,14.5 L8.25,14.5 Z" id="path-4"></path>
|
||||
<filter x="-140.0%" y="-58.8%" width="380.0%" height="264.7%" filterUnits="objectBoundingBox" id="filter-5">
|
||||
<feOffset dx="0" dy="2" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
|
||||
<feGaussianBlur stdDeviation="2" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
|
||||
<feColorMatrix values="0 0 0 0 1 0 0 0 0 0.525862069 0 0 0 0 0 0 0 0 1 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
|
||||
</filter>
|
||||
</defs>
|
||||
<g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<g id="商业BI-0330" transform="translate(-405.000000, -2897.000000)">
|
||||
<g id="编组" transform="translate(405.000000, 2897.000000)">
|
||||
<circle id="椭圆形" stroke="url(#linearGradient-1)" stroke-width="1.5" cx="10" cy="10" r="9.25"></circle>
|
||||
<circle id="椭圆形备份" fill="url(#linearGradient-2)" cx="10" cy="10" r="7"></circle>
|
||||
<g id="形状结合">
|
||||
<use fill="black" fill-opacity="1" filter="url(#filter-5)" xlink:href="#path-4"></use>
|
||||
<use fill="url(#linearGradient-3)" fill-rule="evenodd" xlink:href="#path-4"></use>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.8 KiB |
28
static/images/commercial/overShop.svg
Normal file
28
static/images/commercial/overShop.svg
Normal file
@ -0,0 +1,28 @@
|
||||
<?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="0%" x2="50%" y2="100%" id="linearGradient-1">
|
||||
<stop stop-color="#A86FFC" offset="0%"></stop>
|
||||
<stop stop-color="#6A4CE4" offset="100%"></stop>
|
||||
</linearGradient>
|
||||
<linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-2">
|
||||
<stop stop-color="#A86FFC" offset="0%"></stop>
|
||||
<stop stop-color="#6A4CE4" offset="100%"></stop>
|
||||
</linearGradient>
|
||||
<linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-3">
|
||||
<stop stop-color="#A86FFC" offset="0%"></stop>
|
||||
<stop stop-color="#6A4CE4" offset="100%"></stop>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<g id="商业BI-0330" transform="translate(-445.000000, -2937.000000)">
|
||||
<g id="编组" transform="translate(445.000000, 2937.000000)">
|
||||
<path d="M14.4875311,1.5 C15.7432903,1.5 16.7612842,2.51799394 16.7612842,3.77375311 C16.7612842,3.84930938 16.7575181,3.9248187 16.75,4 L16.7251241,4.2487593 C16.6180987,5.31901285 15.8465048,6.17553007 14.8441535,6.42571712 C13.6182119,7.22828176 13.0344538,8.35975265 13.0014827,9.99833765 L6.99852613,9.99847591 C6.96084774,8.11587169 6.19967173,6.88452951 4.59042295,6.08885862 C4.52202797,6.05504166 4.46454767,6.00229261 4.41560689,5.9348485 C3.85683453,5.47583427 3.5,4.77958872 3.5,4 C3.5,2.61928813 4.61928813,1.5 6,1.5 L14.4875311,1.5 Z" id="形状结合" fill="url(#linearGradient-1)" opacity="0.300000012"></path>
|
||||
<rect id="矩形" fill="url(#linearGradient-2)" x="2" y="1.5" width="16" height="2" rx="1"></rect>
|
||||
<path d="M14,10 C15.3807119,10 16.5,11.1192881 16.5,12.5 C16.5,13.3475614 16.0782276,14.0966126 15.4331201,14.5487164 C15.4021888,14.589128 15.3636501,14.6214207 15.3179927,14.6454332 C13.7270223,15.4821685 13,16.5775837 13,18.5 L7,18.5 C7,16.5332335 6.24166941,15.4052947 4.59042295,14.5888586 C4.52202797,14.5550417 4.46454767,14.5022926 4.41560689,14.4348485 C3.85683453,13.9758343 3.5,13.2795887 3.5,12.5 C3.5,11.1192881 4.61928813,10 6,10 L14,10 Z" id="形状结合" fill="url(#linearGradient-3)" transform="translate(10.000000, 14.250000) scale(1, -1) translate(-10.000000, -14.250000) "></path>
|
||||
<rect id="矩形" fill="url(#linearGradient-2)" transform="translate(10.000000, 17.500000) scale(1, -1) translate(-10.000000, -17.500000) " x="2" y="16.5" width="16" height="2" rx="1"></rect>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.7 KiB |
12
static/images/commercial/shop.svg
Normal file
12
static/images/commercial/shop.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(-169.000000, -2987.000000)" fill-rule="nonzero">
|
||||
<g id="shop" transform="translate(169.000000, 2987.000000)">
|
||||
<rect id="矩形" fill="#000000" opacity="0" x="0" y="0" width="16" height="16"></rect>
|
||||
<path d="M13.78125,4.2515625 L13.78125,2.25 C13.78125,1.9734375 13.5578125,1.75 13.28125,1.75 L2.71875,1.75 C2.4421875,1.75 2.21875,1.9734375 2.21875,2.25 L2.21875,4.2515625 C1.9578125,4.2671875 1.75,4.484375 1.75,4.75 L1.75,6.8078125 C1.75,7.1890625 1.825,7.559375 1.975,7.9078125 C2.0421875,8.0671875 2.125,8.2171875 2.21875,8.359375 L2.21875,13.75 C2.21875,14.025 2.4421875,14.25 2.71875,14.25 L13.28125,14.25 C13.5578125,14.25 13.78125,14.0265625 13.78125,13.75 L13.78125,8.359375 C13.8765625,8.2171875 13.9578125,8.065625 14.025,7.9078125 C14.1734375,7.559375 14.25,7.1890625 14.25,6.8078125 L14.25,4.75 C14.25,4.484375 14.0421875,4.2671875 13.78125,4.2515625 Z M3.34375,2.875 L12.65625,2.875 L12.65625,4.25 L3.34375,4.25 L3.34375,2.875 Z M9,13.1265625 L7,13.1265625 L7,11.5 L9,11.5 L9,13.1265625 Z M12.65625,13.1265625 L10,13.1265625 L10,11 C10,10.7234375 9.7765625,10.5 9.5,10.5 L6.5,10.5 C6.2234375,10.5 6,10.7234375 6,11 L6,13.1265625 L3.34375,13.1265625 L3.34375,9.3421875 C3.3890625,9.3640625 3.4359375,9.3859375 3.484375,9.4046875 C3.8328125,9.5515625 4.203125,9.625 4.584375,9.625 C4.965625,9.625 5.334375,9.5515625 5.684375,9.4046875 C5.9,9.3140625 6.103125,9.1984375 6.2890625,9.059375 C6.2921875,9.0578125 6.2953125,9.0578125 6.2984375,9.059375 C6.484375,9.1984375 6.6859375,9.3140625 6.903125,9.4046875 C7.2515625,9.5515625 7.621875,9.625 8.003125,9.625 C8.384375,9.625 8.753125,9.5515625 9.103125,9.4046875 C9.31875,9.3140625 9.521875,9.1984375 9.7078125,9.059375 C9.7109375,9.0578125 9.7140625,9.0578125 9.7171875,9.059375 C9.903125,9.1984375 10.1046875,9.3140625 10.321875,9.4046875 C10.6703125,9.5515625 11.040625,9.625 11.421875,9.625 C11.803125,9.625 12.171875,9.5515625 12.521875,9.4046875 C12.56875,9.384375 12.615625,9.3640625 12.6625,9.3421875 L12.6625,13.1265625 L12.65625,13.1265625 Z M13.125,6.8078125 C13.125,7.7421875 12.359375,8.5 11.4171875,8.5 C10.7796875,8.5 10.2234375,8.1546875 9.9296875,7.6421875 C9.884375,7.5640625 9.803125,7.515625 9.7125,7.515625 L9.703125,7.515625 C9.6140625,7.515625 9.53125,7.5640625 9.4859375,7.6421875 C9.19375,8.1546875 8.6375,8.5 8,8.5 C7.3640625,8.5 6.809375,8.15625 6.515625,7.6453125 C6.46875,7.565625 6.384375,7.515625 6.2921875,7.515625 C6.2,7.515625 6.1140625,7.565625 6.06875,7.6453125 C5.7734375,8.15625 5.21875,8.5 4.5828125,8.5 C3.640625,8.5 2.875,7.7421875 2.875,6.8078125 L2.875,5.3828125 C2.875,5.378125 2.878125,5.375 2.8828125,5.375 L13.1171875,5.375 C13.121875,5.375 13.125,5.378125 13.125,5.3828125 L13.125,6.8078125 L13.125,6.8078125 Z" id="形状" fill="#A69E9F"></path>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 3.1 KiB |
36
static/images/commercial/shopNumber.svg
Normal file
36
static/images/commercial/shopNumber.svg
Normal file
@ -0,0 +1,36 @@
|
||||
<?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="0%" x2="50%" y2="100%" id="linearGradient-1">
|
||||
<stop stop-color="#A86FFC" offset="0%"></stop>
|
||||
<stop stop-color="#6A4CE4" offset="100%"></stop>
|
||||
</linearGradient>
|
||||
<linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-2">
|
||||
<stop stop-color="#A86FFC" offset="0%"></stop>
|
||||
<stop stop-color="#6A4CE4" offset="100%"></stop>
|
||||
</linearGradient>
|
||||
<linearGradient x1="50%" y1="0%" x2="50%" y2="226.681913%" id="linearGradient-3">
|
||||
<stop stop-color="#A86FFC" offset="0%"></stop>
|
||||
<stop stop-color="#6A4CE4" offset="100%"></stop>
|
||||
</linearGradient>
|
||||
<linearGradient x1="50%" y1="119.258354%" x2="50%" y2="3.061617e-15%" id="linearGradient-4">
|
||||
<stop stop-color="#F5EEFF" offset="0%"></stop>
|
||||
<stop stop-color="#F1E8FF" offset="100%"></stop>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<g id="商业BI-0330" transform="translate(-373.000000, -2937.000000)">
|
||||
<g id="编组" transform="translate(373.000000, 2937.000000)">
|
||||
<path d="M1.5,8.5 L18.5,8.5 L18.5,17.5 C18.5,18.0522847 18.0522847,18.5 17.5,18.5 L2.5,18.5 C1.94771525,18.5 1.5,18.0522847 1.5,17.5 L1.5,8.5 L1.5,8.5 Z" id="矩形" fill="url(#linearGradient-1)" opacity="0.300000012"></path>
|
||||
<path d="M10,12.5 C11.1045695,12.5 12,13.3954305 12,14.5 L12,18.5 L12,18.5 L8,18.5 L8,14.5 C8,13.3954305 8.8954305,12.5 10,12.5 Z" id="矩形" fill="url(#linearGradient-2)"></path>
|
||||
<path d="M5.54367406,1.5 L14.4563259,1.5 C15.1408569,1.5 15.7778374,1.85009389 16.1447516,2.42798373 L20,8.5 L20,8.5 L0,8.5 L3.85524843,2.42798373 C4.22216261,1.85009389 4.85914306,1.5 5.54367406,1.5 Z" id="矩形" fill="url(#linearGradient-3)"></path>
|
||||
<path d="M0,8.5 L20,8.5 L20,10 C20,10.2761424 19.7761424,10.5 19.5,10.5 L0.5,10.5 C0.223857625,10.5 3.38176876e-17,10.2761424 0,10 L0,8.5 L0,8.5 Z" id="矩形" fill="#7150E7"></path>
|
||||
<rect id="矩形" fill="#F0E6FF" x="4" y="8.5" width="4" height="2"></rect>
|
||||
<rect id="矩形备份" fill="#F0E6FF" x="12" y="8.5" width="4" height="2"></rect>
|
||||
<polygon id="矩形备份-2" fill="url(#linearGradient-4)" points="7 1.5 9 1.5 8 8.5 4 8.5"></polygon>
|
||||
<polygon id="矩形备份-3" fill="url(#linearGradient-4)" transform="translate(13.500000, 5.000000) scale(-1, 1) translate(-13.500000, -5.000000) " points="14 1.5 16 1.5 15 8.5 11 8.5"></polygon>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.8 KiB |
12
static/images/commercial/time.svg
Normal file
12
static/images/commercial/time.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(-193.000000, -2987.000000)" fill-rule="nonzero">
|
||||
<g id="time-circle" transform="translate(193.000000, 2987.000000)">
|
||||
<rect id="矩形" fill="#000000" opacity="0" x="0" y="0" width="16" height="16"></rect>
|
||||
<path d="M8,1 C4.134375,1 1,4.134375 1,8 C1,11.865625 4.134375,15 8,15 C11.865625,15 15,11.865625 15,8 C15,4.134375 11.865625,1 8,1 Z M8,13.8125 C4.790625,13.8125 2.1875,11.209375 2.1875,8 C2.1875,4.790625 4.790625,2.1875 8,2.1875 C11.209375,2.1875 13.8125,4.790625 13.8125,8 C13.8125,11.209375 11.209375,13.8125 8,13.8125 Z M10.7296875,9.978125 L8.5015625,8.3671875 L8.5015625,4.5 C8.5015625,4.43125 8.4453125,4.375 8.3765625,4.375 L7.625,4.375 C7.55625,4.375 7.5,4.43125 7.5,4.5 L7.5,8.803125 C7.5,8.84375 7.51875,8.88125 7.5515625,8.9046875 L10.1359375,10.7890625 C10.1921875,10.8296875 10.2703125,10.8171875 10.3109375,10.7625 L10.7578125,10.153125 C10.7984375,10.0953125 10.7859375,10.0171875 10.7296875,9.978125 L10.7296875,9.978125 Z" id="形状" fill="#A69E9F"></path>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.4 KiB |
Loading…
x
Reference in New Issue
Block a user