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

update

Browse Source
This commit is contained in:
cclu 2024-01-05 18:34:45 +08:00
parent 8db05be80e
commit ce8b37bd55
26 changed files with 595 additions and 121 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
pages/nationalPage/index.vue
View File

@ -263,7 +263,7 @@ export default {
carCompareDetail:{},// 车流比较的详情
revenueCompareDetail:{},// 营收比较的详情
holidayName:'',//假期名称
curYear: '',// 今年
curYear: '',// 今年
curRevenue:'',// 今年营收
compareYear:'',// 对比年份去年
compareRevenue:'',// 去年营收

23
pages/summaryOfPortraits/components/businessPortrait.vue
View File

@ -28,32 +28,30 @@
</div>
<no-data v-else />
</div>
<div class="chartsItem" style="margin-top: 32px">
<div class="chartsItem" style="height:270px;margin-top: 32px">
<p class="title">消费转化对比图</p>
<div v-if="compareList.series && compareList.series.length>0 && compareList.series[0].data && compareList.series[0].data.length>0">
<div>
<consumption-compare :data="compareList"/>
<analyse :analyseInfo="{analysisins_type: 1406,analysisins_format: 2000}" />
</div>
<no-data v-else />
</div>
<div class="chartsItem" style="margin-top: 32px">
<p class="title">消费时段分析</p>
<div class="chartsItem" style="height:220px;margin-top: 32px">
<p class="title" style="margin-bottom: 24px">消费时段分析</p>
<div v-if="timePeriodList.series && timePeriodList.series.length>0">
<time-period-analysis :data="timePeriodList"/>
<analyse :analyseInfo="{analysisins_type: 1403,analysisins_format: 2000}" />
</div>
<no-data v-else />
</div>
<div class="chartsItem" style="margin-top: 32px">
<div class="chartsItem" style="height:300px;margin-top: 32px">
<p class="title">消费水平<text class="unit"></text></p>
<div v-if="levelTopList.series && levelTopList.series.length">
<div>
<level-top :data="levelTopList"></level-top>
<analyse :analyseInfo="{analysisins_type: 1404,analysisins_format: 2000}" />
</div>
<no-data v-else />
</div>
<div class="chartsItem" style="margin-top: 32px">
<div class="chartsItem" style="height:340px;margin-top: 32px">
<p class="title">品牌消费水平<text class="unit"></text></p>
<div v-if="bandLevelList && bandLevelList.length>0">
<band-level :data="bandLevelList"/>
@ -61,15 +59,14 @@
</div>
<no-data v-else/>
</div>
<div class="chartsItem" style="margin-top: 32px">
<div class="chartsItem" style="height:280px;margin-top: 32px">
<p class="title">业态交易值占比</p>
<div v-if="businessTypeList.series && businessTypeList.series.length>0 && businessTypeList.series[0].data && businessTypeList.series[0].data.length>0">
<div>
<business-format :data="businessTypeList"/>
<analyse :analyseInfo="{analysisins_type: 1405,analysisins_format: 2000}" />
</div>
<no-data v-else />
</div>
<div class="chartsItem" style="margin-top: 32px">
<div class="chartsItem" style="height:420px;margin-top: 32px">
<p class="title">商超畅销品</p>
<bestseller-shop :data="bestsellerList"/>
<analyse :analyseInfo="{analysisins_type: 1407,analysisins_format: 2000}" />

6
pages/summaryOfPortraits/components/carPortrait.vue
View File

@ -219,7 +219,7 @@
</div>
</div>
<div class="chartsItem" style="margin-top: 32px;height: 620px">
<div class="chartsItem" style="margin-top: 32px;height: 640px">
<div class="time">
<text class="thisTime"></text>
<div class="select">
@ -1234,7 +1234,7 @@ export default {
//省份
this.homePlaceAll = dataList
this.homePlace = dataList[this.selectTab]?dataList[this.selectTab]:[]
console.log('this.homePlace',this.homePlace)
})
uni.hideLoading()
},
@ -1267,8 +1267,8 @@ export default {
})
})
this.cityPlace = res.Result_Data.List[0] ? res.Result_Data.List[0].OwnerCityList : []
uni.hideLoading()
})
uni.hideLoading()
},
getCarTypeTime(){

11
pages/summaryOfPortraits/components/components/bussiness/bandLevel.vue
View File

@ -1,5 +1,6 @@
<template>
<div class="bandLevel">
<div class="mengBox" v-if="selectName" @click="handleNoShow"></div>
<div class="bandItem" v-for="(item,index) in dataList" :key="index">
<p class="title">{{item.name}}</p>
<div class="progress">
@ -58,6 +59,9 @@ export default {
}
},
methods: {
handleNoShow(){
this.selectName = ''
},
handleClick(e,type,item){
this.selectName = item.name
let phoneInfo = uni.getStorageSync('phoneInfo')
@ -95,6 +99,13 @@ export default {
.bandLevel{
width: 100%;
margin-top: 12px;
.mengBox{
position: fixed;
left: 0;top: 0;
width: 100vw;
height: 100vh;
z-index: 9;
}
.bandItem{
width: 100%;
position: relative;

63
pages/summaryOfPortraits/components/components/bussiness/businessFormat.vue
View File

@ -1,19 +1,32 @@
<template>
<div class="businessFormat">
<canvas class="format" style="width: 100vw;height: 260px;position: fixed;left: 100%" canvas-id="businessFormat" id="businessFormat" @tap="tap"/>
<image style="width: 100vw;height: 260px" v-if="formatPath" class="format" :src="formatPath"></image>
<QiunDataCharts
type="ring"
:opts="opts"
:chartData="res"
:animation="false"
:inScrollView="true"
:canvas2d="true"
tooltipFormat="businessFormat"
/>
<!-- <canvas class="format" style="width: 100vw;height: 260px;position: fixed;left: 100%" canvas-id="businessFormat" id="businessFormat" @tap="tap"/>-->
<!-- <image style="width: 100vw;height: 260px" v-if="formatPath" class="format" :src="formatPath"></image>-->
</div>
</template>
<script>
import uCharts from '@/components/u-charts.js';
import QiunDataCharts from "../qiun-data-charts/components/qiun-data-charts/qiun-data-charts.vue";
var uChartsInstance = {};
export default {
name: "businessFormat",
components: {QiunDataCharts},
data() {
return {
width:0,
formatPath:''
formatPath:'',
opts:{},
res:{}
}
},
props: {
@ -42,7 +55,48 @@ export default {
// 处理传入的数据
handleCarData(value) {
let res = value
this.drawCharts('businessFormat', res)
this.res = res
this.opts = {
series: res.series,
animation: false,
rotate: false,
rotateLock: false,
background: "#FFFFFF",
color: ["#00C2FF","#6B6FFF","#38C275","#1E80FF", "#F3BC1B","#ED6B5A","#FF9845","#74839D","#ACB9CD","#CAD0DA"],
padding: [5, 5, 5, 5],
dataLabel: false,
enableScroll: false,
title: {
name: '刚需型',
fontSize: 16,
color: "#341D00"
},
subtitle: {
name: "理想业态布局",
fontSize: 12,
color: "#786B6C",
},
legend: {
show: true,
position: "right",
lineHeight: 25,
float: 'center'
},
extra: {
ring: {
ringWidth: 14,
activeOpacity: 0.5,
activeRadius: 10,
offsetAngle: -45,
labelWidth: 15,
border: false,
borderWidth: 3,
borderColor: "#FFFFFF"
}
}
}
// this.drawCharts('businessFormat', res)
},
drawCharts(id, data) {
const ctx = uni.createCanvasContext(id, this);
@ -121,6 +175,7 @@ export default {
<style scoped lang="scss">
.businessFormat{
width: 100%;
height: 260px;
.format{
width: 100%;
height: 260px;

92
pages/summaryOfPortraits/components/components/bussiness/consumptionCompare.vue
View File

@ -1,22 +1,34 @@
<template>
<div class="consumptionCompare">
<canvas style="width: 100vw;height: 220px;position: fixed;left: 100vw" class="consumption" canvas-id="consumption" id="consumption" @tap="tap" />
<image style="width: 100vw;height: 220px" v-if="consumptionPath" :src="consumptionPath" class="consumption"></image>
<image v-else style="width: 80px;height: 80px;" src="https://eshangtech.com/ShopICO/ahyd-BID/commercial/noData.svg"></image>
<QiunDataCharts
type="area"
:opts="opts"
:chartData="res"
:animation="false"
:loadingType="1"
:inScrollView="true"
:canvas2d="true"
tooltipFormat="consumptionCompare"
/>
<!-- <canvas style="width: 100vw;height: 220px;position: fixed;left: 100vw" class="consumption" canvas-id="consumption" id="consumption" @tap="tap" />-->
<!-- <image style="width: 100vw;height: 220px" v-if="consumptionPath" :src="consumptionPath" class="consumption"></image>-->
<!-- <image v-else style="width: 80px;height: 80px;" src="https://eshangtech.com/ShopICO/ahyd-BID/commercial/noData.svg"></image>-->
</div>
</template>
<script>
import uCharts from '@/components/u-charts.js';
import NoData from "../../../../commercialBI/noData.vue";
import QiunDataCharts from "../qiun-data-charts/components/qiun-data-charts/qiun-data-charts.vue";
var uChartsInstance = {};
export default {
name: "consumptionCompare",
components: {NoData},
components: {QiunDataCharts},
data() {
return {
width: 0,
consumptionPath:''
consumptionPath:'',
opts:{},
res:{}
}
},
props: {
@ -28,6 +40,7 @@ export default {
watch: {
data: {
handler(value) {
console.log('consumptionComparevalue',value)
this.handleCarData(value)
},
immediate: true
@ -56,7 +69,68 @@ export default {
customerMax:value.series[0].max,
carLitMax:value.series[1].max
}
this.drawCharts('consumption', res,config)
this.res = res
this.opts = {
categories: res.categories,
series: res.series,
animation: false,
rotate: false,
rotateLock: false,
background: "#FFFFFF",
color: ["#1E80FF", "#00B6FF"],
padding: [15, 5, 5, 5],
dataLabel: false,
enableScroll: false,
xAxis: {
disableGrid: true,
axisLineColor:"#F2F2F5",
format:"consumptionCompareFormat",
},
yAxis:{
showTitle:true,
splitNumber:4,
gridColor:'#F2F2F5',
data: [
{
index:0,
title:'单位: 笔',
min: 0,
max:this.getNumber(config.customerMax),
position: "left",
titleOffsetY: -5,
axisLineColor:"#F2F2F5"
},
{
index:1,
title:'单位: 辆',
min: 0,
max:this.getNumber(config.carLitMax),
position: 'right',
titleOffsetY: -5,
titleOffsetX: -15,
axisLineColor:"#F2F2F5"
},
]
},
legend: {
show: true,
position: "bottom",
lineHeight: 25,
float: 'center'
},
extra: {
area: {
type: "curve",
opacity: 0.9,
addLine: true,
width: 2,
gradient: true,
activeType: "hollow"
}
}
}
// this.drawCharts('consumption', res,config)
},
getNumber(value){
let number = value / 40
@ -170,10 +244,8 @@ export default {
<style scoped lang="scss">
.consumptionCompare{
width: 100%;
height: 250px;
margin-top: 12px;
display: flex;
align-items: center;
justify-content: center;
.consumption{
width: 100%;
height: 220px;

70
pages/summaryOfPortraits/components/components/bussiness/levelTop.vue
View File

@ -1,19 +1,32 @@
<template>
<div class="levelTop">
<canvas style="width: 100vw;height: 252px;position: fixed;left: 100%" class="level" canvas-id="levelTop" id="levelTop" @tap="tap"/>
<image style="width: 100%;height: 252px" v-if="levelTopPath" class="level" :src="levelTopPath"></image>
<QiunDataCharts
type="column"
:opts="opts"
:chartData="res"
:animation="false"
:inScrollView="true"
:canvas2d="true"
tooltipFormat="levelTop"
/>
<!-- <canvas style="width: 100vw;height: 252px;position: fixed;left: 100%" class="level" canvas-id="levelTop" id="levelTop" @tap="tap"/>-->
<!-- <image style="width: 100%;height: 252px" v-if="levelTopPath" class="level" :src="levelTopPath"></image>-->
</div>
</template>
<script>
import uCharts from '@/components/u-charts.js';
import QiunDataCharts from "../qiun-data-charts/components/qiun-data-charts/qiun-data-charts.vue";
var uChartsInstance = {};
export default {
name: "levelTop",
components: {QiunDataCharts},
data() {
return {
width:0,
levelTopPath:''
levelTopPath:'',
res:{},
opts:{}
}
},
props: {
@ -42,7 +55,55 @@ export default {
// 处理传入的数据
handleCarData(value) {
let res = value
this.drawCharts('levelTop', res)
this.res = res
this.opts = {
categories: res.categories,
series: res.series,
animation: false,
rotate: false,
rotateLock: false,
background: "#FFFFFF",
color: ["#CAD0DA","#ACB9CD","#1E80FF", ],
padding: [15, 5, 5, 5],
dataLabel: false,
enableScroll: false,
legend: {
show: true,
position: "bottom",
lineHeight: 25,
float: 'center',
fontSize:10
},
xAxis: {
disableGrid: true,
axisLineColor:'#F2F2F5',
fontSize:10,
titleOffsetY:5
},
yAxis: {
splitNumber:5,
gridColor:'#F2F2F5',
data: [
{
min: 0,
max: 100,
unit:'%',
axisLineColor:'#F2F2F5'
}
]
},
extra: {
column: {
type: "stack",
width: 20,
activeBgColor: "#000000",
activeBgOpacity: 0.08,
labelPosition: "center"
}
}
}
// this.drawCharts('levelTop', res)
},
drawCharts(id, data) {
const ctx = uni.createCanvasContext(id, this);
@ -128,6 +189,7 @@ export default {
<style scoped lang="scss">
.levelTop{
width:100%;
height: 252px;
margin-top: 12px;
.level{
width: 100%;

67
pages/summaryOfPortraits/components/components/bussiness/timePeriodAnalysis.vue
View File

@ -1,20 +1,33 @@
<template>
<div class="timePeriodAnalysis">
<canvas style="width: 100vw;height: 200px;position: fixed;left: 100%" class="timePeriod" canvas-id="timePeriod" id="timePeriod" @tap="tap"/>
<image style="width: 100vw;height: 200px" class="timePeriod" v-if="timePeriodPath" :src="timePeriodPath"></image>
<image v-else style="width: 80px;height: 80px;" src="https://eshangtech.com/ShopICO/ahyd-BID/commercial/noData.svg"></image>
<QiunDataCharts
type="area"
:opts="opts"
:chartData="res"
:animation="false"
:inScrollView="true"
:canvas2d="true"
tooltipFormat="timePeriodAnalysis"
/>
<!-- <canvas style="width: 100vw;height: 200px;position: fixed;left: 100%" class="timePeriod" canvas-id="timePeriod" id="timePeriod" @tap="tap"/>-->
<!-- <image style="width: 100vw;height: 200px" class="timePeriod" v-if="timePeriodPath" :src="timePeriodPath"></image>-->
<!-- <image v-else style="width: 80px;height: 80px;" src="https://eshangtech.com/ShopICO/ahyd-BID/commercial/noData.svg"></image>-->
</div>
</template>
<script>
import uCharts from '@/components/u-charts.js';
import QiunDataCharts from "../qiun-data-charts/components/qiun-data-charts/qiun-data-charts.vue";
var uChartsInstance = {};
export default {
name: "timePeriodAnalysis",
components: {QiunDataCharts},
data() {
return {
width:0,
timePeriodPath:''
timePeriodPath:'',
opts:{},
res:{}
}
},
props: {
@ -43,7 +56,45 @@ export default {
// 处理传入的数据
handleCarData(value) {
let res = value
this.drawCharts('timePeriod', res)
this.res = res
this.opts = {
categories:res.categories,
series: res.series,
animation: false,
rotate: false,
rotateLock: false,
background: "#FFFFFF",
color: ["#2483FF"],
padding: [15, 10, 5, 5],
dataLabel: false,
enableScroll: false,
xAxis: {
disableGrid: true,
format:"timePeriodAnalysisFormat",
},
yAxis: {
disableGrid: false,
gridType: "solid",
gridColor:'#F2F2F5'
},
legend: {
show: false,
position: "bottom",
lineHeight: 25,
float: 'center',
},
extra: {
area: {
type: "curve",
opacity: 0.2,
addLine: true,
width: 2,
gradient: true,
activeType: "hollow"
}
}
}
// this.drawCharts('timePeriod', res)
},
drawCharts(id, data) {
const ctx = uni.createCanvasContext(id, this);
@ -128,10 +179,8 @@ export default {
<style scoped lang="scss">
.timePeriodAnalysis{
width: 100%;
display: flex;
align-items: center;
justify-content: center;
width: calc(100vw - 32px);
height: 200px;
.timePeriod{
width: 100%;
height: 200px;

1
pages/summaryOfPortraits/components/components/car/carTypeTime.vue
View File

@ -6,6 +6,7 @@
:opts="opts"
:chartData="res"
:animation="false"
:canvas2d="true"
:inScrollView="true"
tooltipFormat="carTypeTime"
/>

72
pages/summaryOfPortraits/components/components/car/homePlace.vue
View File

@ -8,8 +8,10 @@
:animation="false"
:chartData="res"
:inScrollView="true"
:canvas2d="true"
tooltipFormat="homePlace"
:ontap="handleTap"
:ontap="true"
@getIndex="handleTap"
/>
<!-- <canvas style="height: 160px;width: 100%;position: fixed;left: 100%" canvas2d="true" class="carNum" canvas-id="homePlace" id="homePlace" @tap="handleTap"/>-->
<!-- <image style="height: 160px;width: 100%;" v-if="homePlacePath" class="carNum" :src="homePlacePath"></image>-->
@ -133,33 +135,54 @@ export default {
},
//点击事件
handleTap(e){
let index = uChartsInstance[e.target.id].getCurrentDataIndex(e);
if (index===-1){
this.$parent.handleGetHome(null,null,true)
uChartsInstance[e.target.id].showToolTip(e,{})
}else{
uChartsInstance[e.target.id].showToolTip(e,{
formatter: (item, category, index, opts) =>{
if (item.name.split(' ')[0] === '其他'){
let str = ''
this.homeData.forEach(item=>{
if (item.name.split(' ')[0]!=='其他'){
if (str===''){
str = item.name.split(' ')[0]
}else{
str+=`,${item.name.split(' ')[0]}`
}
}
})
this.$parent.handleGetHome(str,item.value)
console.log('e',e)
if (e.currentIndex===-1){
this.$parent.handleGetHome(null,null,true)
}else{
let item = e.opts._series_[e.currentIndex]
if (item.name.split(' ')[0] === '其他'){
let str = ''
e.opts.homeData.forEach(item=>{
if (item.name.split(' ')[0]!=='其他'){
if (str===''){
str = item.name.split(' ')[0]
}else{
this.$parent.handleGetHome(item.name.split(' ')[0],item.value)
str+=`,${item.name.split(' ')[0]}`
}
return item.name + ":" + item.data + '辆';
}
});
})
this.$parent.handleGetHome(str,item.value)
}else{
this.$parent.handleGetHome(item.name.split(' ')[0],item.value,false)
}
uChartsInstance[e.target.id].touchLegend(e);
}
// let index = uChartsInstance[e.target.id].getCurrentDataIndex(e);
// if (index===-1){
// this.$parent.handleGetHome(null,null,true)
// uChartsInstance[e.target.id].showToolTip(e,{})
// }else{
// uChartsInstance[e.target.id].showToolTip(e,{
// formatter: (item, category, index, opts) =>{
// if (item.name.split(' ')[0] === '其他'){
// let str = ''
// this.homeData.forEach(item=>{
// if (item.name.split(' ')[0]!=='其他'){
// if (str===''){
// str = item.name.split(' ')[0]
// }else{
// str+=`,${item.name.split(' ')[0]}`
// }
// }
// })
// this.$parent.handleGetHome(str,item.value)
// }else{
// this.$parent.handleGetHome(item.name.split(' ')[0],item.value)
// }
// return item.name + ":" + item.data + '辆';
// }
// });
// }
// uChartsInstance[e.target.id].touchLegend(e);
},
// 处理传入的数据
handleCarData(value) {
@ -188,6 +211,7 @@ export default {
padding: [5, 5, 5, 5],
dataLabel: false,
enableScroll: false,
homeData:this.homeData,
title:{
name: ''
},

7
pages/summaryOfPortraits/components/components/car/monthTotal.vue
View File

@ -3,9 +3,10 @@
<qiunDataCharts
type="mix"
:opts="opts"
:chartData="monthData"
:chartData="res"
:animation="false"
:inScrollView="true"
:canvas2d="true"
tooltipFormat="monthTotal"
/>
<!-- <canvas class="canvas" canvas-id="monthTotal" id="monthTotal" @tap="handleTap" />-->
@ -26,7 +27,7 @@ export default {
opts:{
},
res:[]
}
},
props: {
@ -146,6 +147,8 @@ export default {
moneyMax:value.series[2].max > value.series[3].max ? this.getSplitNumber(value.series[2].max):this.getSplitNumber(value.series[3].max)
}
}
this.res = res
let phoneInfo = uni.getStorageSync('phoneInfo')
let width = phoneInfo.screenWidth-32
this.opts={

19
pages/summaryOfPortraits/components/components/car/percentEntry.vue
View File

@ -1,11 +1,12 @@
<template>
<div style="min-height: 100px;">
<div class="meng" v-if="showMeng" @click.stop="handleNoShow"></div>
<div class="percentEntry" >
<div class="progress">
<div class="have" >
<view class="box" >
<div class="min" :style="{width:min+'%'}" @click="handleShow(0)">
<div class="text" v-if="rateList[0]">
<div class="text" v-if="rateList[0]" >
<div class="icon" style="background: #1E80FF"></div>
<text style="margin-right: 4px">小车型</text>
<text>{{min}}%</text>
@ -68,7 +69,8 @@ export default {
analysisins_type: 1106,
analysisins_format: 2000
},
rateList:[false,false,false]
rateList:[false,false,false],
showMeng:false
}
},
props: {
@ -88,6 +90,10 @@ export default {
}
},
methods: {
handleNoShow(){
this.showMeng = false
this.rateList = []
},
handleShow(num){
let list = []
this.rateList.forEach(()=>{
@ -95,6 +101,7 @@ export default {
})
this.rateList = list
this.rateList[num] = true
this.showMeng = true
},
// 处理传入的数据
handleCarData(value) {
@ -145,9 +152,17 @@ export default {
</script>
<style scoped lang="scss">
.meng{
position: fixed;
top: 0;left: 0;
width: 100vw;
height: 100vh;
z-index: 9;
}
.percentEntry{
width:100%;
margin-top: 12px;
.progress{
width: 100%;
height: 20px;

1
pages/summaryOfPortraits/components/components/car/timeAnalysis.vue
View File

@ -5,6 +5,7 @@
:opts="opts"
:chartData="res"
:inScrollView="true"
:canvas2d="true"
:animation="false"
tooltipFormat="timeAnalysis"
/>

5
pages/summaryOfPortraits/components/components/format/bandNumber.vue
View File

@ -1,5 +1,5 @@
<template>
<div class="main">
<scroll-view class="main" scroll-y="true">
<div class="dataItem" v-for="(item,index) in dataList" :key="index">
<image class="bgIcon" src="https://eshangtech.com/ShopICO/ahyd-BID/commercial/bg_icon.svg"></image>
<div class="left">
@ -40,7 +40,7 @@
</div>
</div>
</div>
</div>
</scroll-view>
</template>
<script>
@ -71,6 +71,7 @@ export default {
<style scoped lang="scss">
.main{
width: 100%;
height: 400px;
margin-top: 12px;
.dataItem{
width: calc(100% - 32px );

88
pages/summaryOfPortraits/components/components/format/fillingDegree.vue
View File

@ -1,17 +1,29 @@
<template>
<div class="fillingDegree">
<div class="item">
<canvas style=" width: 100vw;height: 280px;position: fixed;left: 100%" class="fillDegree" canvas-id="fillDegree" id="fillDegree" @tap.stop="tap" @click.stop="handleChange('')"/>
<image style="width: 100vw;height: 280px" v-if="fillDegreePath" class="fillDegree" :src="fillDegreePath"></image>
<QiunDataCharts
type="ring"
:opts="opts"
:chartData="res"
:animation="false"
:inScrollView="true"
:canvas2d="true"
tooltipFormat="fillingDegree"
@getIndex="tap"
/>
<!-- <canvas style="width: 100vw;height: 280px;position: fixed;left: 100%" class="fillDegree" canvas-id="fillDegree" id="fillDegree" @tap="tap"/>-->
<!-- <image style="width: 100vw;height: 280px" v-if="fillDegreePath" class="fillDegree" :src="fillDegreePath"></image>-->
</div>
</div>
</template>
<script>
import uCharts from '@/components/u-charts.js';
import QiunDataCharts from "../qiun-data-charts/components/qiun-data-charts/qiun-data-charts.vue";
var uChartsInstance = {};
export default {
name: "fillingDegree",
components: {QiunDataCharts},
data() {
return {
width:0,
@ -19,6 +31,8 @@ export default {
selectIndex: 0,
dataList : [],
isTap:false,//判断是否走了tap
opts:{},
res:{}
}
},
props: {
@ -44,19 +58,21 @@ export default {
}
},
tap(e){
uChartsInstance[e.target.id].showToolTip(e,{
formatter: (item, category, index, opts) =>{
this.selectIndex = opts.series[index].key
if (this.selectIndex){
this.$emit('handleChangeBandLevel',this.selectIndex)
}else{
this.$emit('handleChangeBandLevel',false)
}
this.isTap = true
return item.name;
}
});
uChartsInstance[e.target.id].touchLegend(e);
if (e.currentIndex===-1){
this.$emit('handleChangeBandLevel',false)
}else{
let selectIndex = e.opts._series_[e.currentIndex].key
if (selectIndex){
this.$emit('handleChangeBandLevel',selectIndex)
}
}
// this.selectIndex = opts.series[index].key
// if (this.selectIndex){
// // this.$emit('handleChangeBandLevel',this.selectIndex)
// }else{
// // this.$emit('handleChangeBandLevel',false)
// }
// this.isTap = true
},
// 处理传入的数据
handleCarData(value) {
@ -64,7 +80,46 @@ export default {
let config = {
Abundant:value.Abundant
}
this.drawCharts('fillDegree', res ,config)
this.res= res
console.log('this.res',this.res)
this.opts = {
animation: false,
rotate: false,
rotateLock: false,
background: "#FFFFFF",
color: ["#1E80FF", "#00C2FF","#6B6FFF","#38C275","#F3BC1B","#ED6B5A","#FF9845","#74839D","#ACB9CD","#CAD0DA"],
padding: [5, 5, 5, 5],
dataLabel: false,
enableScroll: false,
title: {
name:config.Abundant?'盈足':'不盈足',
fontSize: 16,
color: "#341D00"
},
subtitle:{
name:''
},
legend: {
show: true,
position: "right",
lineHeight: 25,
float: 'center'
},
extra: {
ring: {
ringWidth: 20,
activeOpacity: 0.5,
activeRadius: 10,
offsetAngle: -45,
labelWidth: 15,
border: false,
borderWidth: 3,
borderColor: "#FFFFFF"
}
}
}
// this.drawCharts('fillDegree', res ,config)
},
drawCharts(id, data,config) {
const ctx = uni.createCanvasContext(id, this);
@ -138,6 +193,7 @@ export default {
<style scoped lang="scss">
.fillingDegree{
width: 100%;
height: 280px;
margin-top: 12px;
.item{
width: 100%;

1
pages/summaryOfPortraits/components/components/guest/businessType.vue
View File

@ -5,6 +5,7 @@
:opts="opts"
:chartData="res"
:animation="false"
:canvas2d="true"
:inScrollView="true"
tooltipFormat="businessType"
/>

1
pages/summaryOfPortraits/components/components/guest/consumPrefer.vue
View File

@ -5,6 +5,7 @@
:opts="opts"
:chartData="res"
:animation="false"
:canvas2d="true"
:inScrollView="true"
tooltipFormat="consumPrefer"
/>

15
pages/summaryOfPortraits/components/components/guest/consumptionLevel.vue
View File

@ -1,5 +1,6 @@
<template>
<div class="consumptionLevel">
<div class="mengBox" v-if="showMeng" @click.stop="handleNoShow"></div>
<div class="gender">
<div class="top">
<image class="icon" src="https://eshangtech.com/ShopICO/ahyd-BID/commercial/man.svg"></image>
@ -75,6 +76,7 @@ export default {
positionWidthWoman:'',// 定位百分比
womanText:'',//女性提示框文字
manText:'',//男性提示框文字
showMeng:false
}
},
props: {
@ -97,7 +99,13 @@ export default {
}
},
methods: {
handleNoShow(){
this.showMeng = false
this.isShowMan = false
this.isShowWoman = false
},
handleShow(type,index,value,e){
this.showMeng = true
let phoneInfo = uni.getStorageSync('phoneInfo')
let width = phoneInfo.screenWidth
let startWidth = width * 0.2
@ -155,6 +163,13 @@ export default {
.consumptionLevel{
width: 100%;
margin-top: 12px;
.mengBox{
position: fixed;
top: 0;left: 0;
width: 100vw;
height: 100vh;
z-index: 9;
}
.gender{
width: 100%;
margin-bottom: 12px;

24
pages/summaryOfPortraits/components/components/guest/customerFirst.vue
View File

@ -1,5 +1,6 @@
<template>
<div class="main">
<div class="mengBox" v-if="showMeng" @click.stop="handleNoShow"></div>
<div class="yesterday">
<div class="top">
<image class="icon" src="https://eshangtech.com/ShopICO/ahyd-BID/commercial/datePortrait.svg"></image>
@ -111,7 +112,8 @@ export default {
addAreaCarNumber:'',//入区车辆增长
oneCarPrice:'',//单车价值
orderTransaction:'',
orderAveragePrice:''
orderAveragePrice:'',
showMeng:false
}
},
props: {
@ -142,7 +144,12 @@ export default {
})
this.genderList = list
this.genderList[num] = true
}
this.showMeng = true
},
handleNoShow(){
this.genderList = []
this.showMeng = false
}
}
}
</script>
@ -150,6 +157,13 @@ export default {
<style scoped lang="scss">
.main{
width: 100%;
.mengBox{
position: fixed;
top: 0;left: 0;
width: 100vw;
height: 100vh;
z-index: 9;
}
.yesterday,.month{
margin-top: 12px;
width: 100%;
@ -261,7 +275,7 @@ export default {
background: #1E80FF;
border-radius: 2px 0 0 2px;
.meng{
width: 110px;
width: 120px;
height: 20px;
line-height: 20px;
position: absolute;
@ -281,7 +295,7 @@ export default {
background: #ACB9CD;
border-radius: 2px 0 0 2px;
.meng{
width: 110px;
width: 120px;
height: 20px;
line-height: 20px;
position: absolute;
@ -301,7 +315,7 @@ export default {
background: #CAD0DA;
border-radius: 2px 0 0 2px;
.meng{
width: 110px;
width: 120px;
height: 20px;
line-height: 20px;
position: absolute;

17
pages/summaryOfPortraits/components/components/guest/customerSecond.vue
View File

@ -1,5 +1,6 @@
<template>
<div class="main">
<div class="mengBox" v-if="showMeng" @click.stop="handleNoShow"></div>
<div class="pk">
<div class="gender">
<div class="left">
@ -31,6 +32,7 @@
:opts="opts"
:chartData="res"
:animation="false"
:canvas2d="true"
:inScrollView="true"
tooltipFormat="customerSecond"
/>
@ -55,7 +57,8 @@ export default {
customerSecondPath:'',//路径
genderList:[false,false],
opts:{},
res:{}
res:{},
showMeng:false
}
},
props: {
@ -77,6 +80,10 @@ export default {
tap(e){
uChartsInstance[e.target.id].touchLegend(e);
},
handleNoShow(){
this.genderList = []
this.showMeng = false
},
handleShow(num){
let list = []
this.genderList.forEach(()=>{
@ -84,6 +91,7 @@ export default {
})
this.genderList = list
this.genderList[num] = true
this.showMeng = true
},
// 处理传入的数据
handleCarData(value) {
@ -242,6 +250,13 @@ export default {
.main{
width: 100%;
margin-top: 12px;
.mengBox{
position: fixed;
left: 0;top: 0;
width: 100vw;
height: 100vh;
z-index: 9;
}
.pk{
width: 100%;
padding: 0 16px;

3
pages/summaryOfPortraits/components/components/manager/moneyCompare.vue
View File

@ -6,6 +6,7 @@
:chartData="res"
:animation="false"
:inScrollView="true"
:canvas2d="true"
tooltipFormat="moneyCompare"
/>
<!-- <canvas style="width: calc(100vw - 32px);height: 200px;position: fixed;left: 100%" class="compare" canvas-id="compare" id="compare" @tap="tap"/>-->
@ -42,6 +43,7 @@ export default {
this.comparePath = ''
this.dataList = value
this.selectIndex = value.type
console.log('value',value)
this.handleCarData(value)
},
immediate: true,
@ -190,6 +192,7 @@ export default {
}
],
},
otherType:res.type,
extra: {
column: {
type: "group",

3
pages/summaryOfPortraits/components/components/manager/revenueTrends.vue
View File

@ -6,6 +6,7 @@
:chartData="res"
:animation="false"
:inScrollView="true"
:canvas2d="true"
tooltipFormat="revenueTrends"
/>
<!-- <canvas style=" width: 100vw;height: 208px;position: fixed;left: 100%" class="trends" canvas-id="trends" id="trends" @tap="handleTap"/>-->
@ -210,7 +211,7 @@ export default {
<style scoped lang="scss">
.revenueTrends{
width: 100vw;
width: calc(100vw - 32px);
height: 210px;
.trends{
width: calc(100vw - 32px);

66
pages/summaryOfPortraits/components/components/qiun-data-charts/js_sdk/u-charts/config-ucharts.js
View File

@ -138,9 +138,11 @@ const cfu = {
}
},
homePlace:function (item, category, index, opts){
console.log('item',item)
console.log('opts',opts)
if (item.name.split(' ')[0] === '其他'){
let str = ''
this.homeData.forEach(item=>{
opts.homeData.forEach(item=>{
if (item.name.split(' ')[0]!=='其他'){
if (str===''){
str = item.name.split(' ')[0]
@ -149,9 +151,6 @@ const cfu = {
}
}
})
// this.$parent.handleGetHome(str,item.value)
}else{
// this.$parent.handleGetHome(item.name.split(' ')[0],item.value)
}
return item.name + ":" + item.data + '辆';
},
@ -170,11 +169,15 @@ const cfu = {
businessType:function (item, category, index, opts){
return item.name;
},
moneyCompare:function (item, category, index, opts){
"moneyCompare":function (item, category, index, opts){
const date = new Date()
let m = date.getMonth()
console.log('item',item)
console.log('category',category)
console.log('index',index)
console.log('opts',opts)
if (index >m){
if (this.selectIndex===0){
if (opts.otherType===0){
if (item.name === '工作日平均'){
return item.name + "：" + item.data + '万元'
}else if(item.name === '周末平均'){
@ -182,7 +185,7 @@ const cfu = {
}else {
return item.name + "：" + item.data + '万元'
}
}else if(this.selectIndex === 1){
}else if(opts.otherType === 1){
if (item.name === '工作日平均'){
return item.name + "：" + noDecimal(item.data) + '笔'
}else if(item.name === '周末平均'){
@ -190,7 +193,7 @@ const cfu = {
}else {
return item.name + "：" +noDecimal(item.data) + '笔'
}
}else if(this.selectIndex === 2){
}else if(opts.otherType === 2){
if (item.name === '工作日平均'){
return item.name + "：" + item.data + '元'
}else if(item.name === '周末平均'){
@ -201,7 +204,7 @@ const cfu = {
}
}else{
if (this.selectIndex===0){
if (opts.otherType===0){
if (item.name === '工作日平均'){
return item.name + "：" + item.data + '万元，' + '较上月：' + opts.series[0].qoqAdd[index] + '%'
}else if(item.name === '周末平均'){
@ -214,7 +217,7 @@ const cfu = {
return item.name + "：" + item.data + '万元'
}
}
}else if (this.selectIndex === 1){
}else if (opts.otherType === 1){
if (item.name === '工作日平均'){
return item.name + "：" + noDecimal(item.data) + '笔，' + '较上月：' + opts.series[0].qoqAdd[index] + '%'
}else if(item.name === '周末平均'){
@ -226,7 +229,7 @@ const cfu = {
return item.name + "：" + noDecimal(item.data) + '笔'
}
}
}else if(this.selectIndex === 2){
}else if(opts.otherType === 2){
if (item.name === '工作日平均'){
return item.name + "：" + item.data + '元，' + '较上月：' + opts.series[0].qoqAdd[index] + '%'
}else if(item.name === '周末平均'){
@ -240,6 +243,47 @@ const cfu = {
}
}
}
},
consumptionCompare:function (item, category, index, opts){
if (item.name === '客单数'){
return item.name + ':'+ item.data + '笔'
}else{
return item.name + ':'+ item.data + '辆,交易概率: ' + ((opts.series[0].data[index] / opts.series[1].data[index])*100).toFixed(2) + '%'
}
},
consumptionCompareFormat:function (val){
if (val==='0:00' || val==='4:00'|| val==='8:00'|| val==='12:00'|| val==='16:00'|| val==='20:00'|| val==='23:00'){
if (val === '23:00'){
return '24:00'
}else{
return val
}
}else{
return ''
}
},
timePeriodAnalysisFormat:function (val){
if (val===0 || val===4 || val===8 || val===12 || val===16 || val===20 || val===23){
if (val===23){
return '24:00'
}else{
return `${val}:00`
}
}else{
return ''
}
},
timePeriodAnalysis:function (item, category, index, opts){
return item.name + ':'+ item.data + '%,' +'数量:' + opts.series[0].number[index] + '笔,金额:' +opts.series[0].money[index] +'元'
},
levelTop:function (item, category, index, opts){
return item.name + ' '+ item.data + '%';
},
businessFormat:function (item, category, index, opts){
return item.name+',' + opts.series[index].text
},
fillingDegree:function (item, category, index, opts){
return item.name;
}
},
//这里演示了自定义您的图表类型的option，可以随意命名，之后在组件上 type="demotype" 后，组件会调用这个花括号里的option，如果组件上还存在opts参数，会将demotype与opts中option合并后渲染图表。

41
pages/summaryOfPortraits/components/formatPortraitBI.vue
View File

@ -9,7 +9,13 @@
:haveFun="haveFun" :serviceTypeObj="serviceTypeObj" :serviceInfoObj="serviceInfoObj" :pageType="pageType" :pageIndex="5"/>
<div class="charts">
<div class="chartsItem" >
<p class="title">品牌指数</p>
<view class="top">
<p class="title">品牌指数</p>
<!-- <view class="btnBox">-->
<!-- <view :class="selectTypeNumber===1?'btnItem selectItem':'btnItem'" @click="handleSelectType(1)">盈足</view>-->
<!-- <view :class="selectTypeNumber===2?'btnItem selectItem':'btnItem'" @click="handleSelectType(2)">不盈足</view>-->
<!-- </view>-->
</view>
<div >
<div class="labelList">
<div :class="item[5]?'labelItem labelItemSelect':'labelItem labelItemUnSelect'" v-for="(item,index) in brandLabelList" :key="index" @click="changeLabel(item)">
@ -36,11 +42,10 @@
</div>
</div>
</div>
<div v-if="fillDegreeList.result && fillDegreeList.result.series[0].data.length>0">
<div >
<filling-degree :data="fillDegreeList" @handleChangeBandLevel="handleChangeBandLevel" :isClick="isClick"/>
<analyse :analyseInfo="{analysisins_type: 1502,analysisins_format: 2000}" />
</div>
<no-data v-else/>
</div>
<!-- <div class="chartsItem" style="margin-top: 32px">-->
<!-- <p class="title">品牌消费水平<text class="unit"></text></p>-->
@ -127,7 +132,8 @@ export default {
haveFun:{},
startDate:'',// 开始时间
serviceTypeObj:{},// 服务区类型对象
serviceInfoObj:{}
serviceInfoObj:{},
selectTypeNumber:0
}
},
props:{
@ -202,6 +208,14 @@ export default {
this.$util.addUserBehavior()
},
methods:{
// 盈足不盈足
handleSelectType(val){
if (val===this.selectTypeNumber){
this.selectTypeNumber = 0
}else{
this.selectTypeNumber = val
}
},
// 拿到页面数据
handleGetPageData(){
this.endData = uni.getStorageSync('lastDay')
@ -689,6 +703,25 @@ export default {
}
}
}
.btnBox{
display: flex;
align-items: center;
.btnItem{
border-radius: 4px;
padding:2px 6px;
margin-right: 6px;
margin-bottom: 6px;
box-sizing: border-box;
display: flex;
align-items: center;
border:1px solid #ccc;
background: #fff
}
.selectItem{
background: rgba(202, 208, 218, 0.5);
border:1px solid #ccc;
}
}
}
.title{
font-size: 17px;

12
pages/summaryOfPortraits/components/guestPortrait.vue
View File

@ -10,7 +10,7 @@
:headerBg="'linear-gradient( #3ca284 0%, #ffffff 100%)'"/>
<div class="charts" :style="{paddingTop:serviceInfo.SERVERPART_NAME==='安徽驿达'?menu.bottom + 62 + 14 + 'px':''}">
<div class="chartsItem">
<div class="chartsItem" style="height: 440px">
<div style="display: flex;align-items: center;justify-content: space-between">
<p class="title">客单分析</p>
<div class="item">
@ -22,7 +22,7 @@
</div>
<no-data v-else />
</div>
<div class="chartsItem" style="margin-top: 32px">
<div class="chartsItem" style="margin-top: 32px;height: 330px">
<div class="time">
<div class="select">
<picker mode="date" fields="month" :value="single" :end="endData" @change="bindDateChange" >
@ -40,7 +40,7 @@
</div>
<no-data v-else />
</div>
<div class="chartsItem" style="margin-top: 32px">
<div class="chartsItem" style="margin-top: 32px;height: 310px">
<p class="title">客群消费偏好</p>
<div v-if="consterPreferList.series && consterPreferList.series.length>0">
<consum-prefer :data="consterPreferList" />
@ -48,7 +48,7 @@
</div>
<no-data v-else/>
</div>
<div class="chartsItem" style="margin-top: 32px">
<div class="chartsItem" style="margin-top: 32px;height: 210px">
<p class="title">客群消费水平</p>
<div v-if="consumptionLevelList && consumptionLevelList.length>0">
<consumption-level :data="consumptionLevelList"/>
@ -56,8 +56,8 @@
</div>
<no-data v-else />
</div>
<div class="chartsItem" style="margin-top: 32px;height: 210px">
<p class="title" style="margin-bottom: 32px">业态客单偏好</p>
<div class="chartsItem" style="margin-top: 32px;height: 220px">
<p class="title" style="margin-bottom: 24px">业态客单偏好</p>
<div >
<business-type :data="businessTypeList"></business-type>
<analyse :analyseInfo="{analysisins_type: 1206,analysisins_format: 2000}" />

6
pages/summaryOfPortraits/components/managePortrait.vue
View File

@ -138,7 +138,7 @@
</div>
</div>
</div>
<div class="subItem" style="height: 270px;margin-top: 20px;">
<div class="subItem" style="height: 230px;margin-top: 20px;">
<div style="margin-bottom: 30px;display: flex;align-items: center;justify-content: space-between">
<p class="title">{{selectTab===0?'营收特征分析':selectTab===1?'客单对比':selectTab===2?'均价对比':''}}</p>
<text v-if="selectTab===0" style="margin-top: 12px">单位: 万元</text>
@ -150,7 +150,7 @@
</div>
<!-- <no-data v-else/>-->
</div>
<div class="subItem" style="height: 270px;margin-top: 20px;">
<div class="subItem" style="height: 230px;margin-top: 20px;">
<div style="margin-bottom: 30px;display: flex;align-items: center;justify-content: space-between">
<p class="title">营收同比分析</p>
<text style="margin-top: 12px">单位: 万元</text>
@ -158,7 +158,7 @@
<div>
<revenue-trends :data="trendsList"/>
</div>
<no-data v-else/>
<!-- <no-data/>-->
</div>
<analyse :analyseInfo="{analysisins_type: selectTab===0?1305:selectTab===1?1306:selectTab===2?1307:'',analysisins_format: 2000}"/>
</div>