update
This commit is contained in:
parent
b559fd8ba0
commit
abae99a8ff
File diff suppressed because it is too large
Load Diff
2
package-lock.json
generated
2
package-lock.json
generated
@ -1,5 +1,5 @@
|
||||
{
|
||||
"name": "wechat_ahyd (2)",
|
||||
"name": "ahyd_DIB",
|
||||
"lockfileVersion": 2,
|
||||
"requires": true,
|
||||
"packages": {
|
||||
|
||||
@ -32,135 +32,222 @@
|
||||
</div>
|
||||
<div class="analyse">
|
||||
<text class="title">分析</text>
|
||||
<text class="content">新桥服务区入区车辆主要来自杭州市, 入车新桥服务区入区车辆主要来自杭州市, 入车入车新桥服务区入区车辆主要来自杭州市入车新桥服务区入区车辆主要来自杭州市</text>
|
||||
<text class="content">新桥服务区入区车辆主要来自杭州市, 入车车辆主要是普通车型(30-60万)</text>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="charts">
|
||||
<div class="carAnalyse">
|
||||
<div class="chartsItem">
|
||||
<p class="title">入区车流分析</p>
|
||||
<div class="content">
|
||||
<div class="item">
|
||||
<canvas class="carNum" canvas-id="carNum" id="carNum"/>
|
||||
</div>
|
||||
<div class="item"></div>
|
||||
</div>
|
||||
<entry-zone :carData="carData" />
|
||||
<analyse />
|
||||
</div>
|
||||
<div class="chartsItem" style="margin-top: 32px">
|
||||
<view class="tab" >
|
||||
<view v-for="(item,index) in tabList" :key="index" :class="selectTab===item.value?'tabItem tabItemActive':'tabItem'" @click="handleChangeTab(item.value)">{{item.name}}</view>
|
||||
</view>
|
||||
<p class="title">车辆归属地</p>
|
||||
<home-place :homeData="homePlace" :homeCity="cityPlace" />
|
||||
<analyse />
|
||||
</div>
|
||||
<div class="chartsItem" style="margin-top: 32px">
|
||||
<p class="title">车辆类型占比与停留时间</p>
|
||||
<car-type-time :data="carTypeTimeData"/>
|
||||
<analyse />
|
||||
</div>
|
||||
<div class="chartsItem" style="margin-top: 32px">
|
||||
<p class="title">车辆价值与停留时间分析</p>
|
||||
<time-analysis :data="timeAnalysisData"/>
|
||||
<analyse />
|
||||
</div>
|
||||
<div class="chartsItem" style="margin-top: 32px">
|
||||
<p class="title">入区率占比</p>
|
||||
<percent-entry :data="percentEntryData" />
|
||||
<analyse />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import uCharts from '@/components/u-charts.js';
|
||||
import request from '@/util/index.js'
|
||||
var uChartsInstance = {};
|
||||
import analyse from "./components/analyse.vue";
|
||||
import EntryZone from "./components/car/entryZone.vue";
|
||||
import HomePlace from "./components/car/homePlace.vue";
|
||||
import CarTypeTime from "./components/car/carTypeTime.vue";
|
||||
import timeAnalysis from "./components/car/timeAnalysis.vue";
|
||||
import PercentEntry from "./components/car/percentEntry.vue";
|
||||
export default {
|
||||
name: "carPortrait",
|
||||
data(){
|
||||
return {
|
||||
menu:{}, //手机参数
|
||||
serviceArray:["123465","123465","123465","123465","123465"], // 选择服务区的列表
|
||||
serviceIndex:0, //选中的服务区列表的第几个
|
||||
area:'片区', //属于哪个片区
|
||||
labelList:[{value:'杭州'},{value:'小汽车'},{value:'一般消费'},{value:'温州'},{value:'30-60万'}], //标签
|
||||
time:'',//当前时间
|
||||
chartData:{},
|
||||
carNumAll : 0//一共的入区车流数
|
||||
}
|
||||
},
|
||||
onLoad(option){
|
||||
//跳转的时候带上时间
|
||||
this.time = option.time
|
||||
console.log('this.time',this.time)
|
||||
// 获取手机参数对页面进行适配
|
||||
let systemInfo = uni.getSystemInfoSync()
|
||||
this.statusBarHeight = Number(systemInfo.statusBarHeight)
|
||||
this.menu = uni.getMenuButtonBoundingClientRect()
|
||||
console.log('this.menu',this.menu)
|
||||
this.getData()
|
||||
},
|
||||
onReady(){
|
||||
|
||||
},
|
||||
methods:{
|
||||
bindPickerChange:function (e){
|
||||
console.log(e)
|
||||
data(){
|
||||
return {
|
||||
menu:{}, //手机参数
|
||||
serviceArray:["123465","123465","123465","123465","123465"], // 选择服务区的列表
|
||||
serviceIndex:0, //选中的服务区列表的第几个
|
||||
area:'片区', //属于哪个片区
|
||||
labelList:[{value:'杭州'},{value:'小汽车'},{value:'一般消费'},{value:'温州'},{value:'30-60万'}], //标签
|
||||
time:'',//当前时间
|
||||
chartData:{},
|
||||
selectTab: 1,
|
||||
tabList:[{name:'全部',value:0},{name:'东区',value:1},{name:'西区',value:2}],//选项卡列表
|
||||
carNumAll : 0,//一共的入区车流数
|
||||
carData:[],//入区车流的数据
|
||||
homePlaceAll:[],//车辆归属地两区总和列表
|
||||
homePlace:[],//车辆归属地
|
||||
cityPlaceAll:[],//车辆归属地的城市总和列表
|
||||
cityPlace:[],//车辆归属地的城市
|
||||
carTypeTimeDataAll:[],//车辆类型占比与停留时间总和列表
|
||||
carTypeTimeData:[],//车辆类型占比与停留时间
|
||||
timeAnalysisData:[],// 车辆价值与停留时间分析
|
||||
percentEntryData:[]//入区率占比
|
||||
}
|
||||
},
|
||||
getData(){
|
||||
request.$webGet('CommercialApi/Revenue/GetBayonetEntryList',{
|
||||
StatisticsDate: this.time,
|
||||
Serverpart_ID :'432'
|
||||
}).then(result=>{
|
||||
console.log('result',result.Result_Data)
|
||||
let data = []
|
||||
let carSum = 0
|
||||
result.Result_Data.List.forEach(item=>{
|
||||
data.push({name:item.Serverpart_Region ,value:item.Vehicle_Count })
|
||||
carSum+=item.Vehicle_Count
|
||||
components: {PercentEntry, CarTypeTime, HomePlace, EntryZone, analyse,timeAnalysis},
|
||||
onLoad(option){
|
||||
//跳转的时候带上时间
|
||||
this.time = option.time
|
||||
// 获取手机参数对页面进行适配
|
||||
let systemInfo = uni.getSystemInfoSync()
|
||||
// 把获取到的手机参数保存
|
||||
uni.setStorageSync('phoneInfo',systemInfo)
|
||||
this.statusBarHeight = Number(systemInfo.statusBarHeight)
|
||||
this.menu = uni.getMenuButtonBoundingClientRect()
|
||||
// 入区车流分析
|
||||
this.getCarData()
|
||||
// 车辆归属地
|
||||
this.getHomeData()
|
||||
// 车辆类型占比与停留时间
|
||||
this.getCarTypeTime()
|
||||
// 车辆价值与停留时间分析
|
||||
this.getTimeAnalysis()
|
||||
//入区率占比
|
||||
this.getPercentEntry()
|
||||
},
|
||||
onReady(){
|
||||
|
||||
},
|
||||
methods:{
|
||||
//切换改变选项卡
|
||||
handleChangeTab(value){
|
||||
this.selectTab = value
|
||||
this.homePlace = this.homePlaceAll[this.selectTab - 1]
|
||||
this.cityPlace = this.cityPlaceAll[this.selectTab - 1]
|
||||
},
|
||||
bindPickerChange:function (e){
|
||||
console.log(e)
|
||||
},
|
||||
getCarData(){
|
||||
request.$webGet('CommercialApi/Revenue/GetBayonetEntryList',{
|
||||
StatisticsDate: this.time,
|
||||
Serverpart_ID :'432'
|
||||
}).then(res=>{
|
||||
this.carData = res.Result_Data.List
|
||||
})
|
||||
this.carNumAll =carSum
|
||||
console.log('data',data)
|
||||
let res = {
|
||||
series: [
|
||||
{
|
||||
data: data
|
||||
}
|
||||
]
|
||||
}
|
||||
this.drawCharts('carNum' , res)
|
||||
console.log('res',res)
|
||||
})
|
||||
},
|
||||
drawCharts(id,data){
|
||||
console.log('drawCharts')
|
||||
const ctx = uni.createCanvasContext(id, this);
|
||||
let _this = this
|
||||
uChartsInstance[id] = new uCharts({
|
||||
type: "ring",
|
||||
context: ctx,
|
||||
width: 140,
|
||||
height: 188,
|
||||
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: 'left'
|
||||
|
||||
},
|
||||
extra: {
|
||||
ring: {
|
||||
ringWidth: 12,
|
||||
activeOpacity: 0.5,
|
||||
activeRadius: 10,
|
||||
offsetAngle: 0,
|
||||
labelWidth: 15,
|
||||
border: false,
|
||||
borderWidth: 3,
|
||||
borderColor: "#FFFFFF"
|
||||
},
|
||||
getHomeData(){
|
||||
const date = new Date(this.time)
|
||||
let y = date.getFullYear()
|
||||
let m = date.getMonth() + 1
|
||||
if (m<10){
|
||||
m='0'+m
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
}
|
||||
let statistic = `${y}${m}`
|
||||
request.$webGet('CommercialApi/Revenue/GetBayonetOAList',{
|
||||
StatisticsMonth:statistic,
|
||||
Serverpart_ID:432
|
||||
}).then(res=>{
|
||||
let result = res.Result_Data.List
|
||||
result.forEach(item=>{
|
||||
let priceAll = 0
|
||||
item.OwnerProvinceList.forEach(subItem=>{
|
||||
priceAll+=Number(subItem.value)
|
||||
})
|
||||
item.OwnerCityList.forEach(subItem=>{
|
||||
subItem.value = Number(subItem.value)
|
||||
})
|
||||
item.OwnerProvinceList.forEach(subItem=>{
|
||||
subItem.rate = ((Number(subItem.value) / priceAll)*100).toFixed(2)
|
||||
subItem.name = subItem.name +' '+subItem.rate+'%'
|
||||
})
|
||||
})
|
||||
let dataList = []
|
||||
let cityList = []
|
||||
result.forEach(item=>{
|
||||
let list = []
|
||||
item.OwnerProvinceList.forEach(subItem=>{
|
||||
list.push({name:subItem.name,value:Number(subItem.value)})
|
||||
})
|
||||
cityList.push(item.OwnerCityList)
|
||||
dataList.push(list)
|
||||
})
|
||||
this.homePlaceAll = dataList
|
||||
this.homePlace = dataList[this.selectTab-1]
|
||||
this.cityPlaceAll = cityList
|
||||
this.cityPlace = cityList[this.selectTab-1]
|
||||
})
|
||||
},
|
||||
getCarTypeTime(){
|
||||
request.$webGet('CommercialApi/Revenue/GetBayonetSTAList',{
|
||||
StatisticsDate:this.time,
|
||||
Serverpart_ID:'432'
|
||||
}).then(res=>{
|
||||
console.log('res',res)
|
||||
let result = res.Result_Data.List
|
||||
let series = []
|
||||
result.forEach(item=>{
|
||||
let stayTime = []
|
||||
let carType = []
|
||||
let typeAll = 0
|
||||
item.StayTimesList.forEach(subItem=>{
|
||||
stayTime.push(Number(subItem.value))
|
||||
})
|
||||
item.VehicleCountList.forEach(subItem=>{
|
||||
typeAll+=Number(subItem.value)
|
||||
})
|
||||
|
||||
item.VehicleCountList.forEach(subItem=>{
|
||||
subItem.rate = ((Number(subItem.value) / typeAll)*100).toFixed(2)
|
||||
carType.push(Number(subItem.rate))
|
||||
})
|
||||
|
||||
series.push({
|
||||
name:'停留时间',data:stayTime
|
||||
})
|
||||
series.push({
|
||||
name:'车辆类型',data:carType
|
||||
})
|
||||
})
|
||||
console.log('series',series)
|
||||
this.carTypeTimeDataAll[0] ={categories:result[0].Vehicle_Type, series:[series[0],series[1]]}
|
||||
this.carTypeTimeDataAll[1] ={categories:result[1].Vehicle_Type, series:[series[2],series[3]]}
|
||||
this.carTypeTimeData = this.carTypeTimeDataAll[this.selectTab - 1]
|
||||
console.log('carTypeTimeData',this.carTypeTimeData)
|
||||
})
|
||||
|
||||
|
||||
// categories: ["小型车","中型车","大货车","新能源车"],
|
||||
// series: [{name:'新能源',data:[30,38,20,10]},
|
||||
// {name:'燃油车',data:[20,17,23,32]},
|
||||
// {name:'停留时间',data:[62,38,50,84]}]
|
||||
},
|
||||
getTimeAnalysis(){
|
||||
let res = [
|
||||
{name:'小型车',data:[[3,3,10],[10,1.5,10],[18,0.5,5],[22,2.5,10]]},
|
||||
{name:'中型车',data:[[3,1.5,10],[4,2.7,10],[14,2.3,10],[18,1.4,0.50]]},
|
||||
{name:'大型车',data:[[2,0.7,2],[5,0.2,1],[7,0.7,3],[22,1.9,6]]}
|
||||
]
|
||||
this.timeAnalysisData = res
|
||||
},
|
||||
getPercentEntry(){
|
||||
request.$webGet('CommercialApi/Revenue/GetSPBayonetList',{
|
||||
Statistics_Date: this.time,
|
||||
Province_Code:'340000',
|
||||
Serverpart_ID :'432'
|
||||
}).then(res=>{
|
||||
this.percentEntryData = res.Result_Data.List
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
@ -175,11 +262,16 @@ export default {
|
||||
background: linear-gradient(180deg, #A1B9E8 0%, #F0F5FF 100%);
|
||||
position: relative;
|
||||
.headerTop{
|
||||
width: calc(100% - 32px);
|
||||
width: 100vw;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 9999999999999;
|
||||
background: linear-gradient(180deg, #A2B9E8 0%, #B2C6ED 100%);
|
||||
.box{
|
||||
padding: 0 16px;
|
||||
position: absolute;
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
@ -356,7 +448,33 @@ export default {
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
padding: 28px 16px 0;
|
||||
.carAnalyse{
|
||||
.chartsItem{
|
||||
.tab{
|
||||
width: 100%;
|
||||
height: 38px;
|
||||
background: #F2F1F1;
|
||||
border-radius: 4px;
|
||||
box-sizing: border-box;
|
||||
padding:4px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 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;
|
||||
}
|
||||
}
|
||||
.title{
|
||||
font-size: 34rpx;
|
||||
font-family: PingFangSC-Semibold, PingFang SC;
|
||||
@ -364,24 +482,13 @@ export default {
|
||||
color: #160002;
|
||||
line-height: 48rpx;
|
||||
}
|
||||
.content{
|
||||
width: 100%;
|
||||
height: 188px;
|
||||
display: flex;
|
||||
.item{
|
||||
width: 50%;
|
||||
height: 100%;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
.carNum{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
.homePlace{
|
||||
|
||||
}
|
||||
}
|
||||
.chartsItem:last-child{
|
||||
padding-bottom: 32px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
56
pages/commercialBI/components/analyse.vue
Normal file
56
pages/commercialBI/components/analyse.vue
Normal file
@ -0,0 +1,56 @@
|
||||
<template>
|
||||
<div class="main">
|
||||
<p class="title">分析</p>
|
||||
<div class="text">新桥服务区入区车辆主要来自杭州市, 入车车辆主要是普通车型(30-60万)</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "analyse",
|
||||
data(){
|
||||
return {
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.main{
|
||||
width: 100%;
|
||||
height: 48px;
|
||||
box-sizing: border-box;
|
||||
padding: 6px 8px;
|
||||
background: #F1F3F7;
|
||||
border-radius: 4px;
|
||||
display: flex;
|
||||
margin-top: 12px;
|
||||
.title{
|
||||
width: 28px;
|
||||
height: 18px;
|
||||
font-size: 12px;
|
||||
font-family: PingFangSC-Regular, PingFang SC;
|
||||
font-weight: 400;
|
||||
color: #160002;
|
||||
line-height: 18px;
|
||||
padding: 0 4px;
|
||||
text-align: center;
|
||||
border-radius: 4px;
|
||||
background:rgba(6, 93, 255, 0.1);
|
||||
}
|
||||
.text{
|
||||
width: calc(100% - 46px);
|
||||
padding-left: 6px;
|
||||
font-size: 12px;
|
||||
font-family: PingFangSC-Regular, PingFang SC;
|
||||
font-weight: 400;
|
||||
color: #786B6C;
|
||||
line-height: 18px;
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
-webkit-line-clamp: 2;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
137
pages/commercialBI/components/car/carTypeTime.vue
Normal file
137
pages/commercialBI/components/car/carTypeTime.vue
Normal file
@ -0,0 +1,137 @@
|
||||
<template>
|
||||
<div class="carTypeTime">
|
||||
<canvas v-if="!carTypeTimePath" class="canvas" canvas-id="carTypeTime" id="carTypeTime"/>
|
||||
<image v-if="carTypeTimePath" class="canvas" :src="carTypeTimePath"></image>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import uCharts from '@/components/u-charts.js';
|
||||
var uChartsInstance = {};
|
||||
export default {
|
||||
name: "carTypeTime",
|
||||
data() {
|
||||
return {
|
||||
width:0,
|
||||
carTypeTimePath:''//图片路径
|
||||
}
|
||||
},
|
||||
props: {
|
||||
data: {
|
||||
type: Object,
|
||||
default: () => {}
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
data: {
|
||||
handler(value) {
|
||||
console.log('watch',value)
|
||||
this.handleCarData(value)
|
||||
},
|
||||
deep:true
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 处理传入的数据
|
||||
handleCarData(value) {
|
||||
console.log('value',)
|
||||
let res = {
|
||||
categories: value.categories,
|
||||
series: value.series
|
||||
}
|
||||
this.drawCharts('carTypeTime', res)
|
||||
},
|
||||
drawCharts(id, data) {
|
||||
const ctx = uni.createCanvasContext(id, this);
|
||||
let phoneInfo = uni.getStorageSync('phoneInfo')
|
||||
this.width = phoneInfo.screenWidth-16
|
||||
uChartsInstance[id] = new uCharts({
|
||||
type: "column",
|
||||
context: ctx,
|
||||
width: this.width,
|
||||
height: 252,
|
||||
categories:data.categories,
|
||||
series: data.series,
|
||||
animation: true,
|
||||
canvas2d: true,
|
||||
rotate: false,
|
||||
rotateLock: false,
|
||||
background: "#FFFFFF",
|
||||
color: ["#1E80FF", "#00C2FF","#CAD0DA"],
|
||||
padding: [30,30,0,0],
|
||||
dataLabel: false,
|
||||
enableScroll: false,
|
||||
legend: {
|
||||
show: true,
|
||||
position: "bottom",
|
||||
lineHeight: 25,
|
||||
float: 'center'
|
||||
|
||||
},
|
||||
xAxis:{
|
||||
disableGrid: true,
|
||||
},
|
||||
yAxis:{
|
||||
showTitle:true,
|
||||
data: [
|
||||
{
|
||||
title:'单位: %',
|
||||
min: 0,
|
||||
max: 100,
|
||||
titleOffsetY: -5
|
||||
},
|
||||
{
|
||||
title:'单位: 分钟',
|
||||
min: 0,
|
||||
max: 150,
|
||||
position: 'right',
|
||||
titleOffsetY: -5,
|
||||
titleOffsetX: 5
|
||||
}
|
||||
]
|
||||
},
|
||||
extra: {
|
||||
column: {
|
||||
type: "group",
|
||||
width: 12,
|
||||
categoryGap: 24,
|
||||
activeBgColor: "#000000",
|
||||
activeBgOpacity: 0.08,
|
||||
}
|
||||
}
|
||||
});
|
||||
setTimeout( ()=>{
|
||||
this.canvasToTempImage('carTypeTime')
|
||||
},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.carTypeTimePath = base64
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
},this)
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.carTypeTime{
|
||||
width: 100%;
|
||||
height: 252px;
|
||||
.canvas{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
200
pages/commercialBI/components/car/entryZone.vue
Normal file
200
pages/commercialBI/components/car/entryZone.vue
Normal file
@ -0,0 +1,200 @@
|
||||
<template>
|
||||
<div class="car">
|
||||
<div class="item">
|
||||
<canvas v-if="!carNumPath" class="carNum" canvas-id="carNum" id="carNum"/>
|
||||
<image v-if="carNumPath" class="carNum" :src="carNumPath"></image>
|
||||
</div>
|
||||
<div class="item">
|
||||
<canvas v-if="!probabilityPath" class="carNum" canvas-id="probability" id="probability"/>
|
||||
<image v-if="probabilityPath" class="carNum" :src="probabilityPath"></image>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import uCharts from '@/components/u-charts.js';
|
||||
var uChartsInstance = {};
|
||||
export default {
|
||||
name: "entryZone",
|
||||
data(){
|
||||
return {
|
||||
entryRate: '',// 入区率
|
||||
carNumAll : 0,// 一共的入区车流数
|
||||
carNumPath:'',//图片路径
|
||||
probabilityPath:''//图片路径
|
||||
}
|
||||
},
|
||||
props:{
|
||||
carData:{
|
||||
type:Array,
|
||||
default:()=>[]
|
||||
}
|
||||
},
|
||||
watch:{
|
||||
carData:{
|
||||
handler(value){
|
||||
this.handleCarData(value)
|
||||
}
|
||||
}
|
||||
},
|
||||
methods:{
|
||||
// 处理传入的数据
|
||||
handleCarData(value){
|
||||
let data = []
|
||||
let carSum = 0 //一共多少辆车
|
||||
let Vehicle_CountAll=0 //入区车流量
|
||||
let SectionFlow_CountAll=0 //车流量
|
||||
value.forEach(item=>{
|
||||
data.push({name:item.Serverpart_Region+'区 '+item.Vehicle_Count ,value:item.Entry_Rate })
|
||||
carSum+=item.Vehicle_Count
|
||||
Vehicle_CountAll+=item.Vehicle_Count
|
||||
SectionFlow_CountAll+=item.SectionFlow_Count
|
||||
})
|
||||
this.carNumAll = carSum
|
||||
let res = {
|
||||
series: [
|
||||
{
|
||||
data: data
|
||||
}
|
||||
]
|
||||
}
|
||||
let probabilityData = []
|
||||
value.forEach(item=>{
|
||||
let value = item.Entry_Rate
|
||||
probabilityData.push({
|
||||
name: item.Serverpart_Region + '区 ' + value .toFixed(2) + '%',
|
||||
value: Number(value.toFixed(2))
|
||||
})
|
||||
})
|
||||
let probabilityRes = {
|
||||
series:[
|
||||
{
|
||||
data: probabilityData
|
||||
}
|
||||
]
|
||||
}
|
||||
// 只有当两个都不是0的时候才能计算入区率
|
||||
if (Vehicle_CountAll!==0 && SectionFlow_CountAll!==0){
|
||||
this.entryRate = ((Vehicle_CountAll/SectionFlow_CountAll)*100).toFixed(2)+'%'
|
||||
}
|
||||
let configCarNum={
|
||||
title:this.carNumAll,
|
||||
subtitle:"昨日入区车流"
|
||||
}
|
||||
let config={
|
||||
title:this.entryRate,
|
||||
subtitle:"昨日入区率"
|
||||
}
|
||||
|
||||
this.drawCharts('carNum' , res,configCarNum )
|
||||
this.drawCharts('probability',probabilityRes,config)
|
||||
},
|
||||
drawCharts(id,data,config){
|
||||
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: config.title,
|
||||
fontSize: 16,
|
||||
color: "#341D00"
|
||||
},
|
||||
subtitle: {
|
||||
name: config.subtitle,
|
||||
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.canvasToTempImage1('carNum')
|
||||
this.canvasToTempImage2('probability')
|
||||
},2000)
|
||||
},
|
||||
canvasToTempImage1(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.carNumPath = base64
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
},this)
|
||||
},
|
||||
canvasToTempImage2(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.probabilityPath = base64
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
},this)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.car{
|
||||
width: 100%;
|
||||
height: 188px;
|
||||
display: flex;
|
||||
.item{
|
||||
width: 50%;
|
||||
height: 100%;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
.carNum{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
189
pages/commercialBI/components/car/homePlace.vue
Normal file
189
pages/commercialBI/components/car/homePlace.vue
Normal file
@ -0,0 +1,189 @@
|
||||
<template>
|
||||
<div class="main">
|
||||
<div class="homePlace">
|
||||
<canvas v-if="!homePlacePath" class="carNum" canvas-id="homePlace" id="homePlace"/>
|
||||
<image v-if="homePlacePath" class="carNum" :src="homePlacePath"></image>
|
||||
</div>
|
||||
<div class="homeCity">
|
||||
<view class="item" v-for="(item,index) in progressList" :key="index">
|
||||
<view class="top">
|
||||
<p class="title">{{item.name}}</p>
|
||||
<p class="rate"> {{item.rate}}</p>
|
||||
</view>
|
||||
<view class="progress">
|
||||
<view class="have" :style="{width:item.rate}"></view>
|
||||
</view>
|
||||
</view>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import uCharts from '@/components/u-charts.js';
|
||||
var uChartsInstance = {};
|
||||
export default {
|
||||
name: "homePlace",
|
||||
data() {
|
||||
return {
|
||||
homePlacePath:'',//图片路径
|
||||
progressList:[]//进度条数组
|
||||
}
|
||||
},
|
||||
props: {
|
||||
homeData: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
},
|
||||
homeCity:{
|
||||
type:Array,
|
||||
default:() => []
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
homeData: {
|
||||
handler(value) {
|
||||
this.handleCarData(value)
|
||||
}
|
||||
},
|
||||
homeCity:{
|
||||
handler(value){
|
||||
let all = 0
|
||||
value.forEach(item=>{
|
||||
all+=item.value
|
||||
})
|
||||
value.forEach(item=>{
|
||||
item.rate = ((item.value/all)*100).toFixed(2) + '%'
|
||||
})
|
||||
this.progressList = value
|
||||
},
|
||||
deep:true
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 处理传入的数据
|
||||
handleCarData(value) {
|
||||
let res = {
|
||||
series:[
|
||||
{
|
||||
data: value
|
||||
}
|
||||
]
|
||||
}
|
||||
this.drawCharts('homePlace', res)
|
||||
},
|
||||
drawCharts(id, data) {
|
||||
const ctx = uni.createCanvasContext(id, this);
|
||||
let phoneInfo = uni.getStorageSync('phoneInfo')
|
||||
let width = phoneInfo.screenWidth-32
|
||||
uChartsInstance[id] = new uCharts({
|
||||
type: "ring",
|
||||
context: ctx,
|
||||
width: width,
|
||||
height: 160,
|
||||
series: data.series,
|
||||
animation: true,
|
||||
rotate: false,
|
||||
rotateLock: false,
|
||||
canvas2d: true,
|
||||
background: "#FFFFFF",
|
||||
color: ["#1E80FF", "#456497","#748AAE","#ACB9CD","#CAD0DA"],
|
||||
padding: [5, 5, 5, 5],
|
||||
dataLabel: false,
|
||||
enableScroll: false,
|
||||
legend: {
|
||||
show: true,
|
||||
position: "right",
|
||||
lineHeight: 25
|
||||
},
|
||||
extra: {
|
||||
ring: {
|
||||
ringWidth: 12,
|
||||
activeOpacity: 0.5,
|
||||
activeRadius: 10,
|
||||
offsetAngle: 0,
|
||||
labelWidth: 15,
|
||||
border: false,
|
||||
borderWidth: 3,
|
||||
borderColor: "#FFFFFF"
|
||||
}
|
||||
}
|
||||
});
|
||||
setTimeout(()=>{
|
||||
this.canvasToTempImage('homePlace')
|
||||
},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.homePlacePath = base64
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
},this)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.main{
|
||||
.homePlace{
|
||||
width: 100%;
|
||||
.carNum{
|
||||
width: 100%;
|
||||
height: 160px;
|
||||
}
|
||||
}
|
||||
.homeCity{
|
||||
width: 100%;
|
||||
.item{
|
||||
width: 100%;
|
||||
margin-bottom: 12px;
|
||||
.top{
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 4px;
|
||||
.title{
|
||||
font-size: 14px;
|
||||
font-family: PingFangSC-Regular, PingFang SC;
|
||||
font-weight: 400;
|
||||
color: #160002;
|
||||
line-height: 20px;
|
||||
}
|
||||
.rate{
|
||||
font-size: 14px;
|
||||
font-family: PingFangSC-Regular, PingFang SC;
|
||||
font-weight: 400;
|
||||
color: #160002;
|
||||
line-height: 20px;
|
||||
}
|
||||
}
|
||||
.progress{
|
||||
width: 100%;
|
||||
height: 14px;
|
||||
background: #E5E8EF;
|
||||
border-radius: 2px;
|
||||
position: relative;
|
||||
.have{
|
||||
height: 100%;
|
||||
background: #1E80FF;
|
||||
border-radius: 2px;
|
||||
position: absolute;
|
||||
left: 0;top: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
181
pages/commercialBI/components/car/percentEntry.vue
Normal file
181
pages/commercialBI/components/car/percentEntry.vue
Normal file
@ -0,0 +1,181 @@
|
||||
<template>
|
||||
<div class="percentEntry">
|
||||
<div class="progress">
|
||||
<div class="have" :style="{width:progress+'%'}">
|
||||
<view class="box" >
|
||||
<div class="min" :style="{width:min+'%'}"></div>
|
||||
<div class="middle" :style="{width:middle+'%',left:min+'%'}"></div>
|
||||
<div class="big" :style="{width:big+'%',left:(min + middle) +'%'}"></div>
|
||||
</view>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="list">
|
||||
<div class="listItem" v-for="(item,index) in dataList" :key="index">
|
||||
<div class="left">
|
||||
<div style="margin-right: 4px" v-if="index!==0" :class="index===1?'icon1':index===2?'icon2':index===3?'icon3':'icon'"></div>
|
||||
<p :class="index===0?'title':'smallTitle'">{{item.title}}</p>
|
||||
</div>
|
||||
<p :class="index===0?'rate':'smallRate'">{{item.value + '%'}}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "percentEntry",
|
||||
data() {
|
||||
return {
|
||||
dataList:[{title:'总车型入区率',value:''},{title:'小型车',value:''},{title:'中型车',value:''},{title:'大货车',value:''}],
|
||||
progress:0,//入区率总比
|
||||
min:0,//小型车
|
||||
middle:0,//中型车
|
||||
big:0,//大型车
|
||||
}
|
||||
},
|
||||
props: {
|
||||
data: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
data: {
|
||||
handler(value) {
|
||||
this.handleCarData(value)
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 处理传入的数据
|
||||
handleCarData(value) {
|
||||
let Vehicle_CountAll=0
|
||||
let SectionFlow_CountAll=0
|
||||
let minAll = 0
|
||||
let middleAll = 0
|
||||
let bigAll = 0
|
||||
value.forEach(item=>{
|
||||
Vehicle_CountAll+= item.Vehicle_Count
|
||||
SectionFlow_CountAll+= item.SectionFlow_Count
|
||||
minAll+=item.MinVehicle_Count
|
||||
middleAll+=item.MediumVehicle_Count
|
||||
bigAll+=item.LargeVehicle_Count
|
||||
})
|
||||
console.log('value',value)
|
||||
this.progress = ((Vehicle_CountAll/SectionFlow_CountAll)*100).toFixed(2)
|
||||
this.min = (minAll / Vehicle_CountAll*100).toFixed(2)
|
||||
this.middle = (middleAll / Vehicle_CountAll*100).toFixed(2)
|
||||
this.big = (bigAll / Vehicle_CountAll*100).toFixed(2)
|
||||
this.dataList[0].value = this.progress
|
||||
this.dataList[1].value = this.min
|
||||
this.dataList[2].value = this.middle
|
||||
this.dataList[3].value = this.big
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.percentEntry{
|
||||
width:100%;
|
||||
margin-top: 12px;
|
||||
.progress{
|
||||
width: 100%;
|
||||
height: 20px;
|
||||
background: #E5E8EF;
|
||||
border-radius: 2px;
|
||||
position: relative;
|
||||
.have{
|
||||
position: absolute;
|
||||
height: 100%;
|
||||
top: 0;left: 0;
|
||||
.box{
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
.min{
|
||||
position: absolute;
|
||||
height: 100%;
|
||||
background: #1E80FF;
|
||||
margin-right: 2px;
|
||||
}
|
||||
.middle{
|
||||
position: absolute;
|
||||
height: 100%;
|
||||
background: #00B6FF;
|
||||
margin-right: 2px;
|
||||
}
|
||||
.big{
|
||||
position: absolute;
|
||||
height: 100%;
|
||||
background: #0FC862;
|
||||
margin-right: 2px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.list{
|
||||
width: 100%;
|
||||
margin-top: 8px;
|
||||
.listItem{
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 4px;
|
||||
.left{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.icon1{
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
background: #1E80FF;
|
||||
border-radius: 2px;
|
||||
}
|
||||
.icon2{
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
background: #00B6FF;
|
||||
border-radius: 2px;
|
||||
}
|
||||
.icon3{
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
background: #0FC862;
|
||||
border-radius: 2px;
|
||||
}
|
||||
.title{
|
||||
font-size: 14px;
|
||||
font-family: PingFangSC-Regular, PingFang SC;
|
||||
font-weight: 600;
|
||||
color: #160002;
|
||||
line-height: 20px;
|
||||
}
|
||||
.smallTitle{
|
||||
font-size: 14px;
|
||||
font-family: PingFangSC-Regular, PingFang SC;
|
||||
font-weight: 400;
|
||||
color: #786B6C;
|
||||
line-height: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.rate{
|
||||
font-size: 14px;
|
||||
font-family: PingFangSC-Semibold, PingFang SC;
|
||||
font-weight: 600;
|
||||
color: #160002;
|
||||
line-height: 20px;
|
||||
}
|
||||
.small{
|
||||
font-size: 14px;
|
||||
font-family: PingFangSC-Regular, PingFang SC;
|
||||
font-weight: 400;
|
||||
color: #160002;
|
||||
line-height: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
107
pages/commercialBI/components/car/timeAnalysis.vue
Normal file
107
pages/commercialBI/components/car/timeAnalysis.vue
Normal file
@ -0,0 +1,107 @@
|
||||
<template>
|
||||
<div class="timeAnalysis">
|
||||
<canvas :style="{width:width+'px'}" class="timeAnalysis" canvas-id="timeAnalysis" id="timeAnalysis"/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import uCharts from '@/components/u-charts.js';
|
||||
var uChartsInstance = {};
|
||||
export default {
|
||||
name: "timeAnalysis",
|
||||
data() {
|
||||
return {
|
||||
width:0,
|
||||
}
|
||||
},
|
||||
props: {
|
||||
data: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
data: {
|
||||
handler(value) {
|
||||
this.handleCarData(value)
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 处理传入的数据
|
||||
handleCarData(value) {
|
||||
let res = {
|
||||
series:value
|
||||
}
|
||||
this.drawCharts('timeAnalysis', 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: "bubble",
|
||||
context: ctx,
|
||||
width: _this.width,
|
||||
height: 170,
|
||||
series: data.series,
|
||||
animation: true,
|
||||
rotate: false,
|
||||
canvas2d: true,
|
||||
rotateLock: false,
|
||||
background: "#FFFFFF",
|
||||
color: ["#CAD0DA", "#1E80FF"],
|
||||
padding: [5, 30, 5, 5],
|
||||
dataLabel: false,
|
||||
enableScroll: false,
|
||||
xAxis: {
|
||||
disableGrid: true,
|
||||
gridType: "dash",
|
||||
splitNumber: 6,
|
||||
boundaryGap: "justify",
|
||||
min: 0,
|
||||
max: 24
|
||||
},
|
||||
yAxis: {
|
||||
disabled: false,
|
||||
disableGrid: false,
|
||||
gridType: "dash",
|
||||
splitNumber: 4,
|
||||
data: [
|
||||
{
|
||||
min: 0,
|
||||
max: 4
|
||||
}
|
||||
]
|
||||
},
|
||||
legend: {
|
||||
show: true,
|
||||
position: "bottom",
|
||||
lineHeight: 25,
|
||||
float: 'center'
|
||||
|
||||
},
|
||||
extra: {
|
||||
bubble: {
|
||||
border: 2,
|
||||
opacity: 0.5
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
},
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.timeAnalysis{
|
||||
width: 100%;
|
||||
.timeAnalysis{
|
||||
width: 100%;
|
||||
margin-top: 12px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
95
pages/commercialBI/components/模板.vue
Normal file
95
pages/commercialBI/components/模板.vue
Normal file
@ -0,0 +1,95 @@
|
||||
<template>
|
||||
<div className="car">
|
||||
<div className="item">
|
||||
<canvas className="carNum" canvas-id="carNum" id="carNum"/>
|
||||
</div>
|
||||
<div className="item">
|
||||
<canvas className="carNum" canvas-id="probability" id="probability"/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import uCharts from '@/components/u-charts.js';
|
||||
var uChartsInstance = {};
|
||||
export default {
|
||||
name: "模板",
|
||||
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">
|
||||
|
||||
</style>
|
||||
@ -247,8 +247,11 @@
|
||||
<p v-if="plan.percentageMonth>=100" class="desc"><image class="success" src="/static/images/index/successMonth.svg"></image></p>
|
||||
</view>
|
||||
<view class="right">
|
||||
<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>
|
||||
<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">
|
||||
@ -286,8 +289,11 @@
|
||||
<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">
|
||||
<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>
|
||||
<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">
|
||||
@ -553,8 +559,8 @@ export default {
|
||||
let oneDay = 100/day
|
||||
// 到了当天的应该有的百分比
|
||||
let thisDayShould= oneDay*nowDay
|
||||
this.monthAdd = (((this.plan.percentageMonth - thisDayShould)/thisDayShould)*100).toFixed(2)
|
||||
this.yearAdd = (((res.Result_Data.RevenueYear_Amount - res.Result_Data.RevenueYear_PlanAmount)/res.Result_Data.RevenueYear_PlanAmount)*100).toFixed(2)
|
||||
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)
|
||||
@ -883,7 +889,7 @@ export default {
|
||||
console.log('处理数据的方法')
|
||||
// 由于页面大部分的内容采用渲染的格式 这样的方法是最快的对原数据进行赋值 对照data里面的几个主要的数组看就能看明白
|
||||
// 门店上传的前后数字计算来决定样式
|
||||
if(this.showTableData.Revenue_Upload > this.allShopCount){
|
||||
if(this.showTableData.Revenue_Upload >= this.allShopCount){
|
||||
this.isBig = false
|
||||
}else{
|
||||
this.isBig = true
|
||||
@ -1549,18 +1555,34 @@ $iphoneHeight: env(safe-area-inset-bottom);
|
||||
}
|
||||
}
|
||||
.right{
|
||||
flex: 1;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
.addIcon {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
margin-right: 2px;
|
||||
.comparePlan{
|
||||
font-size: 24rpx;
|
||||
font-family: PingFangSC-Regular, PingFang SC;
|
||||
font-weight: 400;
|
||||
color: #a69e9f;
|
||||
line-height: 36rpx;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.text{
|
||||
font-size: 16px;
|
||||
font-family: DINAlternate-Bold, DINAlternate;
|
||||
color: #150002;
|
||||
line-height: 40rpx;
|
||||
.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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user