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-04 18:57:17 +08:00
parent 3d83e9b36f
commit 8db05be80e
37 changed files with 1073 additions and 118 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
pages/index/components/menus.js
View File

@ -85,7 +85,7 @@ const scene = [{
"name": "投诉建议",
"id": "d405ae13-3388-41c0-a5f6-d11194d0a943",
"modelName": "Suggestion",
"imagePath": "/static/images/index/tsjy.png",
"imagePath": "https://eshangtech.com/ShopICO/ahyd-BID/index/tsjy.png",
"noImagePath": "/static/images/index/tsjy-no.png",
"homeUrl": "/pages/suggestion/suggestion"
},
@ -142,7 +142,7 @@ const management = [{
"id": "056b29d7-4721-47ee-ad25-660814e1f3a9",
"modelName": "CommodityApproval",
"imagePath": "https://eshangtech.com/ShopICO/ahyd-BID/index/spsp.png",
"noImagePath": "/static/images/index/spsp-no.png",
"noImagePath": "https://eshangtech.com/ShopICO/ahyd-BID/index/spsp-no.png",
"homeUrl": "/pages/businessApproval/businessApproval"
},
{

171
pages/index/components/numberScroll.vue Normal file
View File

@ -0,0 +1,171 @@
<template>
<view class="content">
<!-- num 是字符串，会被切成片渲染 -->
<view class="l-num" v-for="(key,value) in num" :key="value">
<template v-if="key !== '.' && key !== ','">
<view class="l-son" :style="'transform: translateY(-'+(key*52)+'rpx);'" >
<view class="l-num l-posi" v-for="(s,i) in range" :style="'transform: translateY('+(i*52)+'rpx);'" :key="i">
{{s}}
</view>
</view>
</template>
<!-- 小数点 -->
<view class="l-num l-posi" v-else>{{key}}</view>
</view>
</view>
</template>
<script>
let range = new Array(10).fill(0).map((e,i) => i);
export default {
data() {
return {
num:'0.00', //当前显示数字
value:'', //当前数字
range:range,//0-9
turnTime: 100//定时器时间 单位毫秒 可控制数字滚动快慢 数字越高滚动频率越慢
}
},
props:{
number:{
type: String,
default:''
}
},
watch:{
number:{
handler(value){
this.value = value;
this._getNumber();
},
immediate:true,
deep:true
}
},
onLoad() {},
methods: {
// 这里是保留两位小数的
_getNumber(){
let value = this.value
let num = this.num;
if(num == value){
return
}
// 我的思路是把数字切成一个数组，每个字符对应一个下标
this.showNumber = num.toString().split('');
this.nowNumber = value.toString().split('');
let newShowNumber = []
let newNowNumber = []
this.showNumber.forEach(item=>{
if (item!==',' && item!=='.'){
newShowNumber.push(Number(item))
}else{
newShowNumber.push(item)
}
})
this.nowNumber.forEach(item=>{
if (item!==',' && item!=='.'){
newNowNumber.push(Number(item))
}else{
newNowNumber.push(item)
}
})
this.showNumber = newShowNumber
this.nowNumber = newNowNumber
let sl = this.showNumber.length;
let ol = this.nowNumber.length;
let key = sl > ol ? 'nowNumber' : 'showNumber';
// 这个函数是用来补位的，例如原来是1，新数字是100，那么要给位数少的补位 1 ==> 001
this._formatNumber(key,sl,ol);
// 这个是数字变化滚动的具体函数
this._turnNumber();
},
_formatNumber(key,oldV,newV){
let length = Math.abs(oldV - newV);
let arr = new Array(length).fill(0);
this[key] = arr.concat(this[key]);
},
_turnNumber(){
let _this = this;
// 循环数字数组，
_this.showNumber.forEach((e,i) => {
// 判断对应位数的值，如果相等就跳过
if(e == _this.nowNumber[i]) return;
let inter = setInterval(() => {
// 数值相等后清除定时器
if(e == _this.nowNumber[_this._index(i)]){
clearInterval(inter);
}else{
if (e!==',' && e!=='.'){
// 如果大于就 -- 小于就 ++
_this.showNumber[_this._index(i)] = e > _this.nowNumber[_this._index(i)] ? --e : ++e;
// 每次值变化都更新到视图上，这样看上去就像是滚动了一下。好吧，其实就是滚动了
_this.num = parseFloat(_this.showNumber.join('')).toFixed(2);
_this.num = _this.$util.fmoney(_this.num,2)
}else{
clearInterval(inter);
}
}
},_this.turnTime);
})
},
// 保留当前i的值
_index(i){
return i
}
}
}
</script>
<style>
.content{
width: 100%;
text-align: center;
}
.l-input{
padding: 30rpx;
}
.l-num{
font-size: 44rpx;
font-family: DINAlternate, DINAlternate;
font-weight: bold;
color: #160002;
line-height: 52rpx;
display: inline-block;
width: 30rpx;
text-align: center;
height: 52rpx;
overflow: hidden;
position: relative;
}
.l-son{
width: 100%;
height: calc(100% * 10);
position: relative;
transition:all 0.5s;
}
.l-posi{
position: absolute;
top: 0;
left: 0;
margin: 0;
border: none;
}
</style>

12
pages/index/index.vue
View File

@ -898,7 +898,8 @@
</view>
<view class="revenueMoney">
<text class="moneyText">{{currentMoney}}</text>
<NumberScroll :number="currentMoney"/>
<!-- <text class="moneyText">{{currentMoney}}</text>-->
<text class="moneyLabel">实时营收/元</text>
</view>
</view>
@ -1309,9 +1310,10 @@ import MonthCharts from "./components/monthCharts.vue";
import RateCharts from "./components/rateCharts.vue";
import SliderPage from "./components/sliderPage.vue";
import UniDataSelect from "../../components/uni-data-select/uni-data-select.vue";
import NumberScroll from "./components/numberScroll.vue";
var rincanvas = {};
export default {
components: {SliderPage, RateCharts, MonthCharts, Tabbar,uniPopup,UniDataSelect},
components: {SliderPage, RateCharts, MonthCharts, Tabbar,uniPopup,UniDataSelect,NumberScroll},
data() {
const lastDay = this.$util.cutDate(new Date(), 'YYYY-MM-DD', -1)
// const lastDay = '2024-01-01'
@ -2041,7 +2043,9 @@ export default {
}
request.$webGet('CommercialApi/Revenue/GetCurRevenue',req).then(res=>{
console.log('res',res)
this.currentMoney = this.$util.fmoney(res.Result_Data.CurRevenueAmount,2)
// this.currentMoney = this.$util.fmoney(res.Result_Data.CurRevenueAmount,2)
this.currentMoney = res.Result_Data.CurRevenueAmount.toFixed(2)
})
},
handleGetWarningList(){
@ -2200,7 +2204,7 @@ export default {
request.$webGet('CommercialApi/Revenue/GetRevenueBudget',monthDate).then(res=>{
// 赋值给data中的这个对象 在请求完之后会进行统一的数据处理
this.plan = res.Result_Data
this.plan.percentageMonth = res.Result_Data.MonthBudget_Degree
this.plan.percentageMonth = res.Result_Data.MonthBudget_Degree || ''
this.plan.percentageYear = res.Result_Data.YearBudget_Degree
this.monthAdd = this.plan.MonthGrowth_Rate>0?`+${this.plan.MonthGrowth_Rate}`:`${this.plan.MonthGrowth_Rate}`

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

@ -132,10 +132,10 @@
</div>
</view>
<view class="swiperBox" v-else>
<view class="swiperItem">
<view class="swiperItem" >
<!-- :style="{height:`calc(100vh - ${menu.bottom + 62}px)`}"-->
<view :style="{paddingTop:menu.bottom + 62+'px',height:`calc(100vh - ${menu.bottom + 62}px)`,overflowY: 'scroll'}">
<div class="header" :style="{backgroundImage: 'url('+ 'https://eshangtech.com/ShopICO/ahyd-BID/newCommercialBI/car.svg' +')',height:324-menu.bottom - 62 + 'px'}">
<scroll-view scroll-y="true" style="height: 100vh" @scroll="handleScroll">
<div class="header" :style="{backgroundImage: 'url('+ 'https://eshangtech.com/ShopICO/ahyd-BID/newCommercialBI/car.svg' +')',height:648+'rpx'}">
<div class="analyse" v-if="analyseText">
<text class="title">分析</text>
<text class="content">{{analyseText}}</text>
@ -166,7 +166,7 @@
<div class="seize"></div>
</div>
</div>
<div class="serviceArea" :style="{top : 8 + 'px'}" >
<div class="serviceArea" :style="{top : menu.bottom + 70 + 'px'}" >
<div class="detailBox">
<div class="detailTop">
<div class="topLeft">{{serviceTypeObj[serviceInfoObj.SERVERPART_TYPE]}}</div>
@ -196,7 +196,7 @@
</div>
</div>
</div>
<div class="charts">
<div class="charts" @click.stop="handleClick($event)">
<div class="chartsItem">
<div style="display: flex;align-items: center;justify-content: space-between">
<p class="title">昨日入区车流</p>
@ -219,7 +219,7 @@
</div>
</div>
<div class="chartsItem" style="margin-top: 32px">
<div class="chartsItem" style="margin-top: 32px;height: 620px">
<div class="time">
<text class="thisTime"></text>
<div class="select">
@ -235,7 +235,7 @@
<view v-for="(item,index) in tabList" :key="index" :class="selectTab===item.value?'tabItem tabItemActive':'tabItem'" @click="handleChangeTab(item.value)">{{item.name}}</view>
</view>
<p class="title">{{thisMonth?thisMonth:'-'}}月车辆归属地</p>
<p class="title" style="margin-bottom: 32px">车辆归属地</p>
<div v-if="homePlace && homePlace.length>0">
<home-place :selectProvinceName="selectProvinceName" :selectValue="selectValue" :homeData="homePlace" :homeCity="cityPlace" @getHomeDate="getHomeData"/>
<div style="display: flex">
@ -251,11 +251,13 @@
<analyse :analyseInfo="{analysisins_type: 1103,analysisins_format: 2000}" />
</div>
<no-data v-if="!homePlace" :type="'car'"/>
<div style="height: 450px" v-if="!homePlace" >
<no-data :type="'car'"/>
</div>
</div>
<div class="chartsItem" style="margin-top: 32px">
<p class="title">{{thisMonth?thisMonth:'-'}}月车型停留分析/日均</p>
<div class="chartsItem" style="margin-top: 32px;height:280px">
<p class="title">车型停留分析/日均</p>
<div v-if="carTypeTimeData.series && carTypeTimeData.series.length>0">
<car-type-time :data="carTypeTimeData"/>
<analyse :analyseInfo="{analysisins_type: 1104,analysisins_format: 2000}" />
@ -263,18 +265,18 @@
<no-data v-if="!carTypeTimeData.series" :type="'car'"/>
</div>
<div class="chartsItem" style="margin-top: 32px">
<p class="title">{{thisMonth?thisMonth:'-'}}月车型停留分布图/日均</p>
<div v-if="timeAnalysisData.series && timeAnalysisData.series.length>0">
<div class="chartsItem" style="margin-top: 32px;height:280px">
<p class="title" style="margin-bottom: 16px">车型停留分布图/日均</p>
<div>
<time-analysis :data="timeAnalysisData"/>
<analyse :analyseInfo="{analysisins_type: 1105,analysisins_format: 2000}" />
</div>
<no-data v-if="!timeAnalysisData.series" :type="'car'"/>
<!-- <no-data v-if="!timeAnalysisData.series" :type="'car'"/>-->
</div>
<div class="chartsItem" style="margin-top: 32px">
<div class="topItem" >
<p class="title">{{thisMonth?thisMonth:'-'}}月入区车型占比</p>
<p class="title">入区车型占比</p>
<div class="box" v-if="allEntry">
<text class="value">{{allEntry?allEntry:'-'}}%</text>
<view class="right" v-if="addAllEntry">
@ -291,7 +293,7 @@
<no-data v-if="!percentEntryData " :type="'car'"/>
</div>
</div>
</view>
</scroll-view>
</view>
</view>
@ -516,8 +518,11 @@ export default {
this.searchTextMonth = ''
},
methods:{
handleClick(e){
// console.log('click',e)
},
handleScroll(e){
console.log('e',e)
// console.log('e',e)
this.scrollTop = e.detail.scrollTop
},
// 修改排序字段
@ -1982,7 +1987,6 @@ export default {
width: 100%;
.swiperItem{
width: 100%;
height: 100vh;
.header{
width: 100%;
//height: calc(1.056 * 100vw);

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

@ -1,8 +1,16 @@
<template>
<div style="min-height: 100px;">
<div >
<div class="carTypeTime" >
<canvas style="width: 100vw;height: 252px;position: fixed;left: 100vw" class="canvas" canvas-id="carTypeTime" id="carTypeTime" @tap="handleTap"/>
<image style="width: 100vw;height: 252px;" v-if="carTypeTimePath" class="canvas" :src="carTypeTimePath"></image>
<qiunDataCharts
type="column"
:opts="opts"
:chartData="res"
:animation="false"
:inScrollView="true"
tooltipFormat="carTypeTime"
/>
<!-- <canvas style="width: 100vw;height: 252px;position: fixed;left: 100vw" class="canvas" canvas-id="carTypeTime" id="carTypeTime" @tap="handleTap"/>-->
<!-- <image style="width: 100vw;height: 252px;" v-if="carTypeTimePath" class="canvas" :src="carTypeTimePath"></image>-->
</div>
</div>
</template>
@ -11,10 +19,11 @@
import uCharts from '@/components/u-charts.js';
import NoData from "../noData.vue";
import Analyse from "../analyse.vue";
import qiunDataCharts from "../qiun-data-charts/components/qiun-data-charts/qiun-data-charts.vue";
var uChartsInstance = {};
export default {
name: "carTypeTime",
components: {Analyse, NoData},
components: {Analyse, NoData,qiunDataCharts},
data() {
return {
width:0,
@ -25,7 +34,9 @@ export default {
analysisins_type: 1104,
analysisins_format: 2000
},
num:0
num:0,
opts:{},
res:{}
}
},
props: {
@ -70,7 +81,64 @@ export default {
let config = {
max:this.getSplitNumber(value.series[1].max)
}
this.drawCharts('carTypeTime', res,config)
this.res = res
this.opts = {
categories:res.categories,
series: res.series,
animation: false,
canvas2d: true,
rotate: false,
rotateLock: false,
background: "#FFFFFF",
color: ["#1E80FF","#00B6FF"],
padding: [30,30,0,0],
dataLabel: false,
enableScroll: false,
legend: {
show: true,
position: "bottom",
lineHeight: 25,
float: 'center'
},
xAxis:{
disableGrid: true,
axisLineColor:"#F2F2F5"
},
yAxis:{
showTitle:true,
gridColor:'#F2F2F5',
data: [
{
title:'单位: %',
min: 0,
max: 100,
titleOffsetY: -5,
axisLineColor:"#F2F2F5"
},
{
title:'单位: 分钟',
min: 0,
max: config.max,
position: 'right',
titleOffsetY: -5,
titleOffsetX: 5,
axisLineColor:"#F2F2F5"
},
]
},
extra: {
column: {
type: "group",
width: 12,
seriesGap:2,
categoryGap: 24,
activeBgColor: "#000000",
activeBgOpacity: 0.08,
}
}
}
// this.drawCharts('carTypeTime', res,config)
},
getSplitNumber(value){
if (value === 0){
@ -171,7 +239,7 @@ export default {
<style scoped lang="scss">
.carTypeTime{
width: 100%;
width: calc(100vw - 16px);
height: 252px;
.canvas{
width: 100%;

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

@ -1,9 +1,18 @@
<template>
<div style="min-height: 100px;">
<div >
<div class="main" >
<div class="homePlace">
<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>
<QiunDataCharts
type="ring"
:opts="opts"
:animation="false"
:chartData="res"
:inScrollView="true"
tooltipFormat="homePlace"
:ontap="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>-->
</div>
<div class="homeCity">
<!-- <div class="dashed box1"></div>-->
@ -41,10 +50,11 @@
import uCharts from '@/components/u-charts.js';
import NoData from "../noData.vue";
import Analyse from "../analyse.vue";
import QiunDataCharts from "../qiun-data-charts/components/qiun-data-charts/qiun-data-charts.vue";
var uChartsInstance = {};
export default {
name: "homePlace",
components: {Analyse, NoData},
components: {Analyse, NoData,QiunDataCharts},
data() {
return {
isShowData:false,
@ -59,7 +69,9 @@ export default {
textList:[],
selectIndex:7,
provinceName:'',
selectValueNumber:''
selectValueNumber:'',
opts:{},
res:{}
}
},
props: {
@ -163,7 +175,45 @@ export default {
}
]
}
this.drawCharts('homePlace', res,this.provinceName)
this.res = res
this.opts = {
series: res.series,
animation: false,
rotate: false,
rotateLock: false,
canvas2d: true,
background: "#FFFFFF",
color: ["#1E80FF", "#00B6FF","#38C275","#6B6FFF","#6B85AE"],
padding: [5, 5, 5, 5],
dataLabel: false,
enableScroll: false,
title:{
name: ''
},
subtitle:{
name: ''
},
legend: {
show: true,
position: "right",
lineHeight: 25
},
extra: {
ring: {
ringWidth: 12,
activeOpacity: 0.5,
activeRadius: 10,
offsetAngle: -45,
labelWidth: 15,
border: false,
borderWidth: 3,
borderColor: "#FFFFFF"
}
}
}
// this.drawCharts('homePlace', res,this.provinceName)
},
drawCharts(id, data,provinceName) {
const ctx = uni.createCanvasContext(id, this);
@ -233,10 +283,10 @@ export default {
<style scoped lang="scss">
.main{
width: 100%;
width: calc(100vw - 32px);
.homePlace{
height: 160px;
width: 100%;
width: calc(100vw - 16px);
.carNum{
position: absolute;

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

@ -1,18 +1,32 @@
<template>
<div class="main">
<canvas style="height: 300px;width: 100vw;position:fixed;left: 100vw" class="canvas" canvas-id="monthTotal" id="monthTotal" @tap="handleTap"/>
<image style="height: 300px;width: 100vw" v-if="preferPath" class="canvas" :src="preferPath"/>
<qiunDataCharts
type="mix"
:opts="opts"
:chartData="monthData"
:animation="false"
:inScrollView="true"
tooltipFormat="monthTotal"
/>
<!-- <canvas class="canvas" canvas-id="monthTotal" id="monthTotal" @tap="handleTap" />-->
<!-- <image style="height: 300px;width: 100vw" v-if="preferPath" class="canvas" :src="preferPath"/>-->
</div>
</template>
<script>
import uCharts from '@/components/u-charts.js';
var uChartsInstance = {};
import QiunDataCharts from "../qiun-data-charts/components/qiun-data-charts/qiun-data-charts.vue";
export default {
name: "monthTotal",
components: {QiunDataCharts},
data(){
return {
preferPath:''
preferPath:'',
opts:{
},
}
},
props: {
@ -20,6 +34,10 @@ export default {
type: Object,
default: () => {}
},
scrollTop:{
type:Number,
default:0
}
},
watch: {
monthData: {
@ -27,17 +45,46 @@ export default {
console.log('val1111ue',value)
this.handleCarData(value)
},
}
},
scrollTop:{
handler(value){
}
}
},
methods:{
tooltip(item, category, index, opts){
let text = ''
let type = item.name.slice(5,10)
let time = opts.series[0].info[index].year
if (type === '车流量'){
if (`${time}年车流量` === item.name){
let showTime = opts.series[0].info[index].year.toString().slice(2,5)
text = `${showTime}年入区 ${opts.series[0].info[index].allCarCount?this.$util.fmoney(opts.series[0].info[index].allCarCount):''} 辆`
}else{
let showTime = opts.series[1].info[index].year.toString().slice(2,5)
text = `${showTime}年入区 ${opts.series[1].info[index].allCarCount?this.$util.fmoney(opts.series[1].info[index].allCarCount):''} 辆`
}
return text
}else{
if (`${time}年交易额` === item.name){
let showTime = opts.series[2].year.toString().slice(2,5)
console.log('showTime',showTime)
text = `${showTime}年金额 ${opts.series[2].info[index].money?this.$util.fmoney(opts.series[2].info[index].money):''} 元, 单车消费 ${opts.series[0].info[index].allCarCount?((opts.series[0].info[index].money) / opts.series[0].info[index].allCarCount).toFixed(2):''} 元`
}else{
let showTime = opts.series[3].year.toString().slice(2,5)
text = `${showTime}年金额 ${opts.series[3].info[index].money?this.$util.fmoney(opts.series[3].info[index].money):''} 元, 单车消费 ${opts.series[1].info[index].allCarCount?((opts.series[1].info[index].money) / opts.series[1].info[index].allCarCount).toFixed(2):''} 元`
}
return text
}
},
handleTap(e){
console.log('e1',e)
console.log('offset',{x: e.detail.x, y: e.detail.y + this.scrollTop - e.currentTarget.offsetTop})
uChartsInstance[e.target.id].showToolTip(e,{
// offset: {x: e.detail.x, y: e.target.offsetTop - e.currentTarget.offsetTop},
offset: {x: e.detail.x, y: e.detail.y + this.scrollTop - e.currentTarget.offsetTop},
formatter: (item, category, index, opts) => {
console.log('item',item)
console.log('index',index)
console.log('opts',opts)
let text = ''
console.log('item.name.slice(5,10)',item.name.slice(5,10))
let type = item.name.slice(5,10)
let time = opts.series[0].info[index].year
if (type === '车流量'){
@ -99,7 +146,77 @@ export default {
moneyMax:value.series[2].max > value.series[3].max ? this.getSplitNumber(value.series[2].max):this.getSplitNumber(value.series[3].max)
}
}
this.drawCharts('monthTotal', res, config)
let phoneInfo = uni.getStorageSync('phoneInfo')
let width = phoneInfo.screenWidth-32
this.opts={
type: "mix",
categories: res.categories,
series: res.series,
animation: false,
rotate: false,
rotateLock: false,
canvas2d: true,
background: "#FFFFFF",
color: ["#1E80FF", "#00B6FF","#38C275","#6B6FFF","#6B85AE"],
padding: [35, 10, 5, 5],
dataLabel: false,
enableScroll: false,
xAxis: {
disabled: false,
disableGrid: true,
axisLine: false,
fontColor: '#777777',
fontSize:res.categories && res.categories.length<10 ? 13 : 11
},
yAxis:{
showTitle:true,
data:[{
position: "left",
title: '车流量 / 万辆 ',
disabled: false,
axisLine: false,
titleOffsetY: -5,
titleOffsetX: 25,
min: 0,
max:config.carMax
},
{
position: "right",
title: '交易金额 / 万元',
disabled: false,
axisLine: false,
titleOffsetY: -5,
titleOffsetX: -15,
min: 0,
max:config.moneyMax
}]
},
legend: {
show: true,
position: "bottom",
lineHeight: 25,
float:'center',
itemGap: 30
},
extra: {
mix:{
column:{
type: "group",
width: 12,
activeBgColor: "#000000",
activeBgOpacity: 0.08
},
line:{
type: "curve",
width: 2,
activeType: "hollow"
}
}
}
}
// this.drawCharts('monthTotal', res, config)
},
getSplitNumber(value){
if (value === 0){
@ -187,7 +304,7 @@ export default {
}
});
setTimeout( ()=>{
this.canvasToTempImage('monthTotal')
// this.canvasToTempImage('monthTotal')
},500)
},
canvasToTempImage(id){
@ -213,7 +330,7 @@ export default {
<style scoped lang="scss">
.main{
width: 100%;
width: calc(100vw - 16px);
height: 300px;
.canvas{
width: 100%;

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

@ -1,10 +1,16 @@
<template>
<div style="min-height: 100px;">
<div class="timeAnalysis" >
<canvas style="width:100vw;height:220px;position:fixed;left:100vw" class="timeAnalysis" canvas-id="timeAnalysis" id="timeAnalysis" @tap="handleTap"/>
<image v-if="preferPath" style="width: 100vw;height: 220px;" :src="preferPath"></image>
<div class="timeAnalysis">
<QiunDataCharts
type="line"
:opts="opts"
:chartData="res"
:inScrollView="true"
:animation="false"
tooltipFormat="timeAnalysis"
/>
<!-- <canvas style="width:100vw;height:220px;position:fixed;left:100vw" class="timeAnalysis" canvas-id="timeAnalysis" id="timeAnalysis" @tap="handleTap"/>-->
<!-- <image v-if="preferPath" style="width: 100vw;height: 220px;" :src="preferPath"></image>-->
</div>
</div>
</template>
@ -12,10 +18,11 @@
import uCharts from '@/components/u-charts.js';
import NoData from "../noData.vue";
import Analyse from "../analyse.vue";
import QiunDataCharts from "../qiun-data-charts/components/qiun-data-charts/qiun-data-charts.vue";
var uChartsInstance = {};
export default {
name: "timeAnalysis",
components: {Analyse, NoData},
components: {Analyse, NoData,QiunDataCharts},
data() {
return {
width:0,
@ -24,7 +31,9 @@ export default {
analysisins_type: 1105,
analysisins_format: 2000
},
preferPath:''
preferPath:'',
opts:{},
res:{}
}
},
props: {
@ -73,7 +82,61 @@ export default {
series:value.series
}
let max = this.getSplitNumber(value.max)
this.drawCharts('timeAnalysis', res,max)
this.res = res
this.opts = {
categories: res.categories,
series: res.series,
animation: false,
rotate: false,
canvas2d: true,
rotateLock: false,
background: "#FFFFFF",
color: ["#1E80FF", "#00B6FF","#0FC862"],
padding: [15, 30, 5, 5],
dataLabel: false,
enableScroll: false,
xAxis: {
disableGrid: true,
formatter:(val)=>{
if (val===0 || val===4 || val===8 || val===12 || val===16 || val===20 || val===23){
if (val===23){
return '24:00'
}else{
return `${val}:00`
}
}else{
return ''
}
}
},
yAxis: {
gridType: "dash",
dashLength: 2,
showTitle:true,
data:[{
title:'单位: 分钟',
titleOffsetY: -5,
min:0,
max:max,
}]
},
legend: {
show: true,
position: "bottom",
lineHeight: 25,
float: 'center'
},
extra: {
line: {
type: "curve",
width: 2,
activeType: "hollow"
}
}
}
// this.drawCharts('timeAnalysis', res,max)
},
drawCharts(id, data,max) {
const ctx = uni.createCanvasContext(id, this);
@ -163,11 +226,8 @@ export default {
<style scoped lang="scss">
.timeAnalysis{
width: 100%;
.timeAnalysis{
width: 100%;
height: 220px;
margin-top: 12px;
}
width: calc(100vw - 16px);
height: 220px;
margin-top: 12px;
}
</style>

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

@ -1,20 +1,32 @@
<template>
<div class="businessType">
<canvas class="business" style=" width: 100vw;height: 170px;position: fixed;left: 100vw" canvas-id="businessType" id="businessType" @tap="handleTap"/>
<image v-if="preferPath" style="width: 100vw;height: 170px" :src="preferPath"></image>
<QiunDataCharts
type="ring"
:opts="opts"
:chartData="res"
:animation="false"
:inScrollView="true"
tooltipFormat="businessType"
/>
<!-- <canvas class="business" style=" width: 100vw;height: 170px;position: fixed;left: 100vw" canvas-id="businessType" id="businessType" @tap="handleTap"/>-->
<!-- <image v-if="preferPath" style="width: 100vw;height: 170px" :src="preferPath"></image>-->
</div>
</template>
<script>
import QiunDataCharts from "../qiun-data-charts/components/qiun-data-charts/qiun-data-charts.vue";
import uCharts from '@/components/u-charts.js';
var uChartsInstance = {};
export default {
name: "businessType",
components:{QiunDataCharts},
data() {
return {
width:0,
preferPath:''
preferPath:'',
opts:{},
res:{}
}
},
props: {
@ -45,7 +57,44 @@ export default {
let res = {
series:value
}
this.drawCharts('businessType', res)
this.res = res
this.opts = {
series: res.series,
animation: false,
rotate: false,
rotateLock: false,
background: "#FFFFFF",
color: ["#1E80FF", "#00C2FF","#6B6FFF","#38C275","#74839D","#B8C7DE"],
padding: [5, 5, 5, 5],
dataLabel: false,
enableScroll: false,
title:{
name:''
},
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('businessType', res)
},
drawCharts(id, data) {
const ctx = uni.createCanvasContext(id, this);
@ -73,6 +122,7 @@ export default {
float: 'center'
},
extra: {
ring: {
ringWidth: 20,
@ -113,10 +163,11 @@ export default {
<style scoped lang="scss">
.businessType{
width: 100%;
width: calc(100vw - 32px);
height: 190px;
.business{
width: 100%;
height: 170px;
height: 190px;
}
}
</style>

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

@ -1,19 +1,31 @@
<template>
<div class="consumPrefer">
<canvas style="width: 100vw;height: 274px;position: fixed;left: 100vw" class="prefer" canvas-id="prefer" id="prefer" @tap="tap"/>
<image style="width: 100vw;height: 274px;" v-if="preferPath" class="prefer" :src="preferPath"></image>
<QiunDataCharts
type="radar"
:opts="opts"
:chartData="res"
:animation="false"
:inScrollView="true"
tooltipFormat="consumPrefer"
/>
<!-- <canvas style="width: 100vw;height: 274px;position: fixed;left: 100vw" class="prefer" canvas-id="prefer" id="prefer" @tap="tap"/>-->
<!-- <image style="width: 100vw;height: 274px;" v-if="preferPath" class="prefer" :src="preferPath"></image>-->
</div>
</template>
<script>
import QiunDataCharts from "../qiun-data-charts/components/qiun-data-charts/qiun-data-charts.vue";
import uCharts from '@/components/u-charts.js';
var uChartsInstance = {};
export default {
name: "consumPrefer",
components:{QiunDataCharts},
data() {
return {
width:0,//手机宽度
preferPath:''//路径
preferPath:'',//路径
opts:{},
res:{}
}
},
props: {
@ -37,7 +49,38 @@ export default {
// 处理传入的数据
handleCarData(value) {
let res = value
this.drawCharts('prefer', res)
this.res = value
this.opts = {
categories: res.categories,
series: res.series,
animation: false,
rotate: false,
rotateLock: false,
background: "#FFFFFF",
color: ["#1E80FF", "#00C2FF"],
padding: [5, 5, 5, 5],
dataLabel: false,
enableScroll: false,
legend: {
show: true,
position: "bottom",
lineHeight: 25,
float: 'center'
},
extra: {
radar: {
gridType: "radar",
gridColor: "#CCCCCC",
gridCount: 3,
opacity: 0.2,
max: res.max,
labelShow: true,
border: true
}
}
}
// this.drawCharts('prefer', res)
},
drawCharts(id, data) {
const ctx = uni.createCanvasContext(id, this);
@ -105,7 +148,7 @@ export default {
<style scoped lang="scss">
.consumPrefer{
width: 100%;
width: calc(100vw - 32px);
height: 274px;
.prefer{
width: 100%;

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

@ -26,17 +26,27 @@
</div>
</div>
<div class="charts">
<canvas class="sexRatio" style=" width: 100vw;height: 220px;position: fixed;left: 100vw" canvas-id="gender" id="gender" @tap="tap"/>
<image class="sexRatio" style=" width: 100vw;height: 220px;" v-if="customerSecondPath" :src="customerSecondPath"></image>
<QiunDataCharts
type="bubble"
:opts="opts"
:chartData="res"
:animation="false"
:inScrollView="true"
tooltipFormat="customerSecond"
/>
<!-- <canvas class="sexRatio" style=" width: 100vw;height: 220px;position: fixed;left: 100vw" canvas-id="gender" id="gender" @tap="tap"/>-->
<!-- <image class="sexRatio" style=" width: 100vw;height: 220px;" v-if="customerSecondPath" :src="customerSecondPath"></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: "customerSecond",
components: {QiunDataCharts},
data() {
return {
man:0,
@ -44,6 +54,8 @@ export default {
width:0,//手机宽度
customerSecondPath:'',//路径
genderList:[false,false],
opts:{},
res:{}
}
},
props: {
@ -80,7 +92,63 @@ export default {
let res = {
series: value.res
}
this.drawCharts('gender', res)
this.res = res
this.opts = {
type: "bubble",
series: res.series,
animation: false,
rotate: false,
rotateLock: false,
background: "#FFFFFF",
color: ["#1E80FF", "#00C2FF"],
padding: [15, 5, 5, 5],
dataLabel: false,
enableScroll: false,
legend: {
show: true,
position: "bottom",
lineHeight: 25,
float: 'center'
},
xAxis: {
disableGrid: true,
gridType: "solid",
splitNumber: 5,
boundaryGap: "justify",
title:'年龄: /岁',
titleOffsetY: 15,
titleOffsetX: -30,
min: 10,
max: 60,
axisLineColor:'#F2F2F5'
},
yAxis: {
disableGrid: false,
gridType: "solid",
showTitle:true,
splitNumber:6,
gridColor:'#F2F2F5',
data: [
{
title:'单位: /元',
min: 0,
max: 120,
titleOffsetY:-5,
titleOffsetX:0,
fontColor:'#786B6C',
axisLineColor:'#F2F2F5'
}
]
},
extra: {
bubble: {
border: 1,
opacity: 0.25
}
}
}
// this.drawCharts('gender', res)
},
drawCharts(id, data) {
const ctx = uni.createCanvasContext(id, this);
@ -288,7 +356,7 @@ export default {
width: 100%;
height: 220px;
.sexRatio{
width: 100%;
width: calc(100vw - 32px);
height: 100%;
}
}

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

@ -1,21 +1,33 @@
<template>
<div class="moneyCompare">
<canvas style="width: calc(100vw - 32px);height: 200px;position: fixed;left: 100%" class="compare" canvas-id="compare" id="compare" @tap="tap"/>
<image style="width: calc(100vw - 32px);height: 200px;" v-if="comparePath" class="compare" :src="comparePath"></image>
<qiunDataCharts
type="column"
:opts="opts"
:chartData="res"
:animation="false"
:inScrollView="true"
tooltipFormat="moneyCompare"
/>
<!-- <canvas style="width: calc(100vw - 32px);height: 200px;position: fixed;left: 100%" class="compare" canvas-id="compare" id="compare" @tap="tap"/>-->
<!-- <image style="width: calc(100vw - 32px);height: 200px;" v-if="comparePath" class="compare" :src="comparePath"></image>-->
</div>
</template>
<script>
import QiunDataCharts from "../qiun-data-charts/components/qiun-data-charts/qiun-data-charts.vue";
import uCharts from '@/components/u-charts.js';
var uChartsInstance = {};
export default {
name: "moneyCompare",
components:{QiunDataCharts},
data() {
return {
width:0,
comparePath:'',
dataList: [],
selectIndex:0
selectIndex:0,
opts:{},
res:{}
}
},
props: {
@ -141,7 +153,56 @@ export default {
let config = {
max:this.getSplitNumber(max)
}
this.drawCharts('compare', res,config)
this.res = res
this.opts = {
categories: res.categories,
series: res.series,
animation: false,
rotate: false,
rotateLock: false,
background: "#FFFFFF",
color: ["#1E80FF", "#00B6FF","#ACB9CD"],
padding: [15, 40, 5, 0],
dataLabel: false,
enableScroll: false,
legend: {
show: true,
position: "bottom",
lineHeight: 25,
float: 'center'
},
xAxis: {
disableGrid: true,
axisLineColor:'#F2F2F5'
},
yAxis: {
showTitle:false,
splitNumber:4,
gridColor:'#F2F2F5',
data: [
{
min: 0,
max:config.max,
titleOffsetX:15,
titleOffsetY:-5,
fontSize:12,
axisLineColor:'#F2F2F5'
}
],
},
extra: {
column: {
type: "group",
width: 5,
seriesGap:4,
activeBgColor: "#000000",
activeBgOpacity: 0.08,
barBorderRadius:[3,3,0,0]
}
}
}
// this.drawCharts('compare', res,config)
},
getSplitNumber(value){
if (value === 0){
@ -234,7 +295,8 @@ export default {
<style scoped lang="scss">
.moneyCompare{
width: 100%;
width: 100vw;
height: 200px;
.compare{
width: calc(100vw - 32px);
height: 200px;

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

@ -1,20 +1,32 @@
<template>
<div class="revenueTrends">
<canvas style=" width: 100vw;height: 208px;position: fixed;left: 100%" class="trends" canvas-id="trends" id="trends" @tap="handleTap"/>
<image v-if="preferPath" style="width: 100vw;height: 208px;" :src="preferPath"></image>
<QiunDataCharts
type="area"
:opts="opts"
:chartData="res"
:animation="false"
:inScrollView="true"
tooltipFormat="revenueTrends"
/>
<!-- <canvas style=" width: 100vw;height: 208px;position: fixed;left: 100%" class="trends" canvas-id="trends" id="trends" @tap="handleTap"/>-->
<!-- <image v-if="preferPath" style="width: 100vw;height: 208px;" :src="preferPath"></image>-->
</div>
</template>
<script>
import QiunDataCharts from "../qiun-data-charts/components/qiun-data-charts/qiun-data-charts.vue";
import uCharts from '@/components/u-charts.js';
var uChartsInstance = {};
export default {
name: "revenueTrends",
components:{QiunDataCharts},
data() {
return {
trendsPath:'',
preferPath:''
preferPath:'',
opts:{},
res:{}
}
},
props: {
@ -56,9 +68,58 @@ export default {
// 处理传入的数据
handleCarData(value) {
let res = value
if (value && value.series && value.series.length>0){
this.drawCharts('trends', res)
this.res = res
this.opts = {
categories: res.categories,
series: res.series,
animation: false,
rotate: false,
rotateLock: false,
background: "#FFFFFF",
color: ["#1E80FF","#00B6FF"],
padding: [15, 15, 5, 5],
dataLabel: false,
enableScroll: false,
legend: {
show: true,
position: "bottom",
lineHeight: 25,
float: 'center'
},
xAxis: {
disableGrid: true,
axisLineColor:'#F2F2F5'
},
yAxis: {
splitNumber:4,
showTitle:false,
gridColor:'#F2F2F5',
data:[
{
min:0,
max:this.getNumber(data.max),
titleOffsetY:-5,
titleOffsetX:-5,
fontSize:12,
axisLineColor:'#F2F2F5'
}
]
},
extra: {
area: {
type: "curve",
opacity: 0.8,
addLine: true,
width: 2,
gradient: true,
activeType: "hollow"
}
}
}
// if (value && value.series && value.series.length>0){
// this.drawCharts('trends', res)
// }
},
getNumber(value){
let number = value / 40
@ -149,7 +210,8 @@ export default {
<style scoped lang="scss">
.revenueTrends{
width: 100%;
width: 100vw;
height: 210px;
.trends{
width: calc(100vw - 32px);
height: 208px;

0
uni_modules/qiun-data-charts/changelog.md → pages/summaryOfPortraits/components/components/qiun-data-charts/changelog.md
View File

0
uni_modules/qiun-data-charts/components/qiun-data-charts/qiun-data-charts.vue → pages/summaryOfPortraits/components/components/qiun-data-charts/components/qiun-data-charts/qiun-data-charts.vue
View File

0
uni_modules/qiun-data-charts/components/qiun-error/qiun-error.vue → pages/summaryOfPortraits/components/components/qiun-data-charts/components/qiun-error/qiun-error.vue
View File

0
uni_modules/qiun-data-charts/components/qiun-loading/loading1.vue → pages/summaryOfPortraits/components/components/qiun-data-charts/components/qiun-loading/loading1.vue
View File

0
uni_modules/qiun-data-charts/components/qiun-loading/loading2.vue → pages/summaryOfPortraits/components/components/qiun-data-charts/components/qiun-loading/loading2.vue
View File

0
uni_modules/qiun-data-charts/components/qiun-loading/loading3.vue → pages/summaryOfPortraits/components/components/qiun-data-charts/components/qiun-loading/loading3.vue
View File

0
uni_modules/qiun-data-charts/components/qiun-loading/loading4.vue → pages/summaryOfPortraits/components/components/qiun-data-charts/components/qiun-loading/loading4.vue
View File

0
uni_modules/qiun-data-charts/components/qiun-loading/loading5.vue → pages/summaryOfPortraits/components/components/qiun-data-charts/components/qiun-loading/loading5.vue
View File

0
uni_modules/qiun-data-charts/components/qiun-loading/qiun-loading.vue → pages/summaryOfPortraits/components/components/qiun-data-charts/components/qiun-loading/qiun-loading.vue
View File

39
uni_modules/qiun-data-charts/js_sdk/u-charts/config-echarts.js → pages/summaryOfPortraits/components/components/qiun-data-charts/js_sdk/u-charts/config-echarts.js
View File

@ -4,16 +4,16 @@
* Copyright (c) 2021 QIUN®秋云 https://www.ucharts.cn All rights reserved.
* Licensed ( http://www.apache.org/licenses/LICENSE-2.0 )
* 复制使用请保留本段注释，感谢支持开源！
*
*
* uCharts®官方网站
* https://www.uCharts.cn
*
*
* 开源地址:
* https://gitee.com/uCharts/uCharts
*
*
* uni-app插件市场地址：
* http://ext.dcloud.net.cn/plugin?id=271
*
*
*/
// 通用配置项
@ -44,13 +44,38 @@ const cfe = {
// #ifdef H5
result += '\n' + res[i].seriesName + '：' + value + ' 万元'
// #endif
// #ifdef APP-PLUS
result += '<br/>' + res[i].marker + res[i].seriesName + '：' + value + ' 万元'
// #endif
}
return result;
},
monthTotal:function (item, category, index, opts){
let text = ''
let type = item.name.slice(5,10)
let time = opts.series[0].info[index].year
if (type === '车流量'){
if (`${time}年车流量` === item.name){
let showTime = opts.series[0].info[index].year.toString().slice(2,5)
text = `${showTime}年入区 ${opts.series[0].info[index].allCarCount?this.$util.fmoney(opts.series[0].info[index].allCarCount):''} 辆`
}else{
let showTime = opts.series[1].info[index].year.toString().slice(2,5)
text = `${showTime}年入区 ${opts.series[1].info[index].allCarCount?this.$util.fmoney(opts.series[1].info[index].allCarCount):''} 辆`
}
return text
}else{
if (`${time}年交易额` === item.name){
let showTime = opts.series[2].year.toString().slice(2,5)
console.log('showTime',showTime)
text = `${showTime}年金额 ${opts.series[2].info[index].money?this.$util.fmoney(opts.series[2].info[index].money):''} 元, 单车消费 ${opts.series[0].info[index].allCarCount?((opts.series[0].info[index].money) / opts.series[0].info[index].allCarCount).toFixed(2):''} 元`
}else{
let showTime = opts.series[3].year.toString().slice(2,5)
text = `${showTime}年金额 ${opts.series[3].info[index].money?this.$util.fmoney(opts.series[3].info[index].money):''} 元, 单车消费 ${opts.series[1].info[index].allCarCount?((opts.series[1].info[index].money) / opts.series[1].info[index].allCarCount).toFixed(2):''} 元`
}
return text
}
},
legendFormat:function(name){
return "自定义图例+"+name;
},
@ -65,7 +90,7 @@ const cfe = {
"demotype":{
"color": color,
//在这里填写echarts的option即可
},
//下面是自定义配置，请添加项目所需的通用配置
"column": {
@ -419,4 +444,4 @@ const cfe = {
}
}
export default cfe;
export default cfe;

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

@ -4,21 +4,62 @@
* Copyright (c) 2021 QIUN®秋云 https://www.ucharts.cn All rights reserved.
* Licensed ( http://www.apache.org/licenses/LICENSE-2.0 )
* 复制使用请保留本段注释，感谢支持开源！
*
*
* uCharts®官方网站
* https://www.uCharts.cn
*
*
* 开源地址:
* https://gitee.com/uCharts/uCharts
*
*
* uni-app插件市场地址：
* http://ext.dcloud.net.cn/plugin?id=271
*
*
*/
// 主题颜色配置：如每个图表类型需要不同主题，请在对应图表类型上更改color属性
const color = ['#1890FF', '#91CB74', '#FAC858', '#EE6666', '#73C0DE', '#3CA272', '#FC8452', '#9A60B4', '#ea7ccc'];
const fmoney = (s, n) => {
/*
* 参数说明：
* s：要格式化的数字
* n：保留几位小数
* */
n = n > 0 && n <= 20 ? n : 2;
var fuhao = ''; //如果数字小于零则值为-
if (s < 0) {
s = Math.abs(s);
fuhao = '-'
}
s = parseFloat((s + "").replace(/[^\d\.-]/g, "")).toFixed(n) + "";
var l = s.split(".")[0].split("").reverse(),
r = s.split(".")[1];
let t = "";
for (let i = 0; i < l.length; i++) {
t += l[i] + ((i + 1) % 3 == 0 && (i + 1) != l.length ? "," : "");
}
if (n===0){
return s
}else{
return fuhao + [...t].reverse().join("") + "." + r;
}
}
const noDecimal = (s) =>{
let fuhao = ''; //如果数字小于零则值为-
if (s < 0) {
s = Math.abs(s);
fuhao = '-'
}
s = parseFloat((s + "").replace(/[^\d\.-]/g, "")) + ""
let l = s.split(".")[0].split("").reverse(), r = s.split(".")[1];
let t = ''
for (let i = 0; i < l.length; i++) {
t += l[i] + ((i + 1) % 3 == 0 && (i + 1) != l.length ? "," : "");
}
return fuhao + [...t].reverse().join("")
}
//事件转换函数，主要用作格式化x轴为时间轴，根据需求自行修改
const formatDateTime = (timeStamp, returnType)=>{
var date = new Date();
@ -71,6 +112,135 @@ const cfu = {
return series[index].name+'：'+series[index].data+'元'
}
},
monthTotal:function (item, category, index, opts){
let text = ''
let type = item.name.slice(5,10)
let time = opts.series[0].info[index].year
if (type === '车流量'){
if (`${time}年车流量` === item.name){
let showTime = opts.series[0].info[index].year.toString().slice(2,5)
text = `${showTime}年入区 ${opts.series[0].info[index].allCarCount?fmoney(opts.series[0].info[index].allCarCount):''} 辆`
}else{
let showTime = opts.series[1].info[index].year.toString().slice(2,5)
text = `${showTime}年入区 ${opts.series[1].info[index].allCarCount?fmoney(opts.series[1].info[index].allCarCount):''} 辆`
}
return text
}else{
if (`${time}年交易额` === item.name){
let showTime = opts.series[2].year.toString().slice(2,5)
console.log('showTime',showTime)
text = `${showTime}年金额 ${opts.series[2].info[index].money?fmoney(opts.series[2].info[index].money):''} 元, 单车消费 ${opts.series[0].info[index].allCarCount?((opts.series[0].info[index].money) / opts.series[0].info[index].allCarCount).toFixed(2):''} 元`
}else{
let showTime = opts.series[3].year.toString().slice(2,5)
text = `${showTime}年金额 ${opts.series[3].info[index].money?fmoney(opts.series[3].info[index].money):''} 元, 单车消费 ${opts.series[1].info[index].allCarCount?((opts.series[1].info[index].money) / opts.series[1].info[index].allCarCount).toFixed(2):''} 元`
}
return text
}
},
homePlace:function (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 + '辆';
},
carTypeTime:function (item, category, index, opts){
if (this.num===0){
this.num++
return '日均车辆' + ":" + opts.series[0].valueList[index] + '辆,占比' + item.data + '%';
}else{
this.num=0
return '平均停留' + ":" + item.data + '分钟';
}
},
timeAnalysis:function (item, category, index, opts){
return item.name + ":" + item.data + '分钟'
},
businessType:function (item, category, index, opts){
return item.name;
},
moneyCompare:function (item, category, index, opts){
const date = new Date()
let m = date.getMonth()
if (index >m){
if (this.selectIndex===0){
if (item.name === '工作日平均'){
return item.name + "：" + item.data + '万元'
}else if(item.name === '周末平均'){
return item.name + "：" + item.data + '万元'
}else {
return item.name + "：" + item.data + '万元'
}
}else if(this.selectIndex === 1){
if (item.name === '工作日平均'){
return item.name + "：" + noDecimal(item.data) + '笔'
}else if(item.name === '周末平均'){
return item.name + "：" + noDecimal(item.data) + '笔'
}else {
return item.name + "：" +noDecimal(item.data) + '笔'
}
}else if(this.selectIndex === 2){
if (item.name === '工作日平均'){
return item.name + "：" + item.data + '元'
}else if(item.name === '周末平均'){
return item.name + "：" + item.data + '元'
}else {
return item.name + "：" + item.data + '元'
}
}
}else{
if (this.selectIndex===0){
if (item.name === '工作日平均'){
return item.name + "：" + item.data + '万元，' + '较上月：' + opts.series[0].qoqAdd[index] + '%'
}else if(item.name === '周末平均'){
return item.name + "：" + item.data + '万元，' + '较工作日：'+ opts.series[1].qoqAdd[index] + '%'
}else {
// 判断有节假日就显示括号 没有就不显示
if (opts.series[2].holiday[index][1]){
return item.name + "：" + item.data + '万元' + '(' + opts.series[2].holiday[index][1] + ')'
}else{
return item.name + "：" + item.data + '万元'
}
}
}else if (this.selectIndex === 1){
if (item.name === '工作日平均'){
return item.name + "：" + noDecimal(item.data) + '笔，' + '较上月：' + opts.series[0].qoqAdd[index] + '%'
}else if(item.name === '周末平均'){
return item.name + "：" + noDecimal(item.data) + '笔，' + '较工作日：'+ opts.series[1].qoqAdd[index] + '%'
}else {
if (opts.series[2].holiday[index][1]){
return item.name + "：" + noDecimal(item.data) + '笔' + '(' + opts.series[2].holiday[index][1] + ')'
}else{
return item.name + "：" + noDecimal(item.data) + '笔'
}
}
}else if(this.selectIndex === 2){
if (item.name === '工作日平均'){
return item.name + "：" + item.data + '元，' + '较上月：' + opts.series[0].qoqAdd[index] + '%'
}else if(item.name === '周末平均'){
return item.name + "：" + item.data + '元，' + '较工作日：'+ opts.series[1].qoqAdd[index] + '%'
}else {
if (opts.series[2].holiday[index][1]){
return item.name + "：" + item.data + '元' + '(' + opts.series[2].holiday[index][1] + ')'
}else{
return item.name + "：" + item.data + '元'
}
}
}
}
}
},
//这里演示了自定义您的图表类型的option，可以随意命名，之后在组件上 type="demotype" 后，组件会调用这个花括号里的option，如果组件上还存在opts参数，会将demotype与opts中option合并后渲染图表。
"demotype":{
@ -603,4 +773,4 @@ const cfu = {
}
}
export default cfu;
export default cfu;

0
uni_modules/qiun-data-charts/js_sdk/u-charts/readme.md → pages/summaryOfPortraits/components/components/qiun-data-charts/js_sdk/u-charts/readme.md
View File

0
uni_modules/qiun-data-charts/js_sdk/u-charts/u-charts.js → pages/summaryOfPortraits/components/components/qiun-data-charts/js_sdk/u-charts/u-charts.js
View File

0
uni_modules/qiun-data-charts/js_sdk/u-charts/u-charts.min.js → pages/summaryOfPortraits/components/components/qiun-data-charts/js_sdk/u-charts/u-charts.min.js vendored
View File

0
uni_modules/qiun-data-charts/license.md → pages/summaryOfPortraits/components/components/qiun-data-charts/license.md
View File

0
uni_modules/qiun-data-charts/package.json → pages/summaryOfPortraits/components/components/qiun-data-charts/package.json
View File

0
uni_modules/qiun-data-charts/readme.md → pages/summaryOfPortraits/components/components/qiun-data-charts/readme.md
View File

0
uni_modules/qiun-data-charts/static/app-plus/echarts.min.js → pages/summaryOfPortraits/components/components/qiun-data-charts/static/app-plus/echarts.min.js vendored
View File

0
uni_modules/qiun-data-charts/static/h5/echarts.min.js → pages/summaryOfPortraits/components/components/qiun-data-charts/static/h5/echarts.min.js vendored
View File

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

@ -56,13 +56,13 @@
</div>
<no-data v-else />
</div>
<div class="chartsItem" style="margin-top: 32px">
<p class="title">业态客单偏好</p>
<div v-if="businessTypeList && businessTypeList.length>0">
<div class="chartsItem" style="margin-top: 32px;height: 210px">
<p class="title" style="margin-bottom: 32px">业态客单偏好</p>
<div >
<business-type :data="businessTypeList"></business-type>
<analyse :analyseInfo="{analysisins_type: 1206,analysisins_format: 2000}" />
</div>
<no-data v-else />
<!-- <no-data v-else />-->
</div>
</div>
</scroll-view>

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

@ -138,24 +138,24 @@
</div>
</div>
</div>
<div class="subItem">
<div style="display: flex;align-items: center;justify-content: space-between">
<p class="title" style="margin-top: 20px">{{selectTab===0?'营收特征分析':selectTab===1?'客单对比':selectTab===2?'均价对比':''}}</p>
<div class="subItem" style="height: 270px;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>
<text v-if="selectTab===1" style="margin-top: 12px">单位: 笔</text>
<text v-if="selectTab===2" style="margin-top: 12px">单位: 元</text>
</div>
<div v-if="moneyCompareList.series && moneyCompareList.series.length>0">
<div>
<money-compare :data="moneyCompareList"/>
</div>
<no-data v-else/>
<!-- <no-data v-else/>-->
</div>
<div class="subItem ">
<div style="display: flex;align-items: center;justify-content: space-between">
<p class="title" style="margin-top: 20px">营收同比分析</p>
<div class="subItem" style="height: 270px;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>
</div>
<div v-if="trendsList && trendsList.series && trendsList.series.length>0">
<div>
<revenue-trends :data="trendsList"/>
</div>
<no-data v-else/>

6
pages/summaryOfPortraits/index.vue
View File

@ -33,13 +33,13 @@
<sliderPage :index="selectPortrait" @handleChangeIndex="handleChangeIndex"/>
</view>
<swiper v-if="isShowSwiper" class="summaryOfPortraitsBox" @change="handleChangeSelect" :current="selectPortrait">
<swiper v-if="isShowSwiper" class="summaryOfPortraitsBox" @change="handleChangeSelect" :current="selectPortrait" >
<!-- 服务区基本信息 0-->
<swiper-item class="swiperItem">
<mapDetail :selectIndex="selectPortrait"/>
</swiper-item>
<!-- 车流预警 1-->
<swiper-item class="swiperItem">
<swiper-item class="swiperItem" >
<carPortrait :selectIndex="selectPortrait" :serviceInfo="serviceInfo"/>
</swiper-item>
<!-- 客群画像 2-->
@ -110,7 +110,6 @@ export default {
this.isShowSwiper = false
},
methods:{
// 商业汇总的滑动方法
handleChangeSelect(e){
console.log('e',e)
@ -234,6 +233,7 @@ export default {
height: 100%;
.swiperItem{
width: 100%;
height: 100vh;
}
}
}

BIN
static/images/index/spsp-no.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 4.1 KiB

BIN
static/images/index/tsjy.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 4.1 KiB