387 lines
11 KiB
Vue
387 lines
11 KiB
Vue
<template>
|
|
<div class="main">
|
|
<div class="header">
|
|
<div class="headerTop" :style="{height:(menu.bottom + 6) + 'px'}">
|
|
<div class="box" :style="{top:(menu.bottom - (menu.height / 2)) + 'px'}">
|
|
<div class="icon"></div>
|
|
<text class="title">车流画像</text>
|
|
<!-- 占位 -->
|
|
<div class="seize"></div>
|
|
</div>
|
|
</div>
|
|
<div class="serviceArea" :style="{top : (menu.bottom + 14) + 'px'}">
|
|
<div class="selectService">
|
|
<image class="img" src="/static/images/commercial/fixed.svg"></image>
|
|
<view class="select">
|
|
<picker @change="bindPickerChange" :value="serviceIndex" :range="serviceArray">
|
|
<view class="content">
|
|
<view class="uni-input">{{serviceArray[serviceIndex]}}</view>
|
|
<text class="area">{{area}}</text>
|
|
<image class="rightArrow" src="/static/images/commercial/rightArrow.svg"></image>
|
|
</view>
|
|
</picker>
|
|
</view>
|
|
</div>
|
|
<div class="other">
|
|
<div class="label">
|
|
<div v-for="(item,index) in labelList" :key="index" :class="index===0?'item0 item':index===1?'item1 item':index===2?'item2 item':index===3?'item3 item':index===4?'item4 item':'item'">
|
|
{{item.value}}
|
|
</div>
|
|
</div>
|
|
<image class="car" src="/static/images/commercial/car.svg"></image>
|
|
</div>
|
|
<div class="analyse">
|
|
<text class="title">分析</text>
|
|
<text class="content">新桥服务区入区车辆主要来自杭州市, 入车新桥服务区入区车辆主要来自杭州市, 入车入车新桥服务区入区车辆主要来自杭州市入车新桥服务区入区车辆主要来自杭州市</text>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="charts">
|
|
<div class="carAnalyse">
|
|
<p class="title">入区车流分析</p>
|
|
<div class="content">
|
|
<div class="item">
|
|
<canvas class="carNum" canvas-id="carNum" id="carNum"/>
|
|
</div>
|
|
<div class="item"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import uCharts from '@/components/u-charts.js';
|
|
import request from '@/util/index.js'
|
|
var uChartsInstance = {};
|
|
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)
|
|
},
|
|
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
|
|
})
|
|
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"
|
|
}
|
|
}
|
|
});
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.main{
|
|
width:100%;
|
|
.header{
|
|
width: 100%;
|
|
height: 396px;
|
|
padding: 0 16px;
|
|
box-sizing: border-box;
|
|
background: linear-gradient(180deg, #A1B9E8 0%, #F0F5FF 100%);
|
|
position: relative;
|
|
.headerTop{
|
|
width: calc(100% - 32px);
|
|
position: fixed;
|
|
top: 0;
|
|
.box{
|
|
position: absolute;
|
|
width: 100%;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
transform: translateY(-50%);
|
|
.icon{
|
|
width: 24px;
|
|
height: 24px;
|
|
background: red;
|
|
}
|
|
.title{
|
|
font-size: 36rpx;
|
|
font-family: PingFangSC-Medium, PingFang SC;
|
|
font-weight: 600;
|
|
color: #1C2130;
|
|
line-height: 56rpx;
|
|
}
|
|
.seize{
|
|
width: 24px;
|
|
height: 24px;
|
|
}
|
|
}
|
|
}
|
|
.serviceArea{
|
|
width: calc(100% - 32px);
|
|
position: absolute;
|
|
box-sizing: border-box;
|
|
.selectService{
|
|
display: flex;
|
|
align-items: center;
|
|
.img{
|
|
width: 40px;
|
|
height: 40px;
|
|
z-index: 2;
|
|
}
|
|
.select{
|
|
width: 174px;
|
|
height: 32px;
|
|
background: #F8F8FA;
|
|
border-radius: 0 16px 16px 0;
|
|
transform: translateX(-20px);
|
|
box-sizing: border-box;
|
|
padding-left: 25px;
|
|
display: flex;
|
|
align-items: center;
|
|
position: relative;
|
|
.content{
|
|
display: flex;
|
|
align-items: center;
|
|
.uni-input{
|
|
padding: 0;
|
|
background: transparent;
|
|
font-size: 14px;
|
|
font-family: PingFangSC-Semibold, PingFang SC;
|
|
font-weight: 600;
|
|
color: #160002;
|
|
height: 40px;
|
|
line-height: 40px;
|
|
}
|
|
.area{
|
|
font-size: 14px;
|
|
font-family: PingFangSC-Regular, PingFang SC;
|
|
font-weight: 400;
|
|
color: #786B6C;
|
|
line-height: 40px;
|
|
margin-left: 4px;
|
|
}
|
|
.rightArrow{
|
|
width: 24px;
|
|
height: 12px;
|
|
position: absolute;
|
|
right: 11px;
|
|
}
|
|
}
|
|
|
|
}
|
|
}
|
|
.other{
|
|
margin-top: 12px;
|
|
width: 100%;
|
|
text-align: center;
|
|
.label{
|
|
height: 54px;
|
|
position: relative;
|
|
.item{
|
|
position: absolute;
|
|
font-size: 32rpx;
|
|
font-family: PingFangSC-Regular, PingFang SC;
|
|
font-weight: 400;
|
|
color: #FFFFFF;
|
|
line-height: 44rpx;
|
|
padding: 4px 12px;
|
|
border-radius: 8rpx 8rpx 0rpx 8rpx;
|
|
}
|
|
.item{
|
|
background: linear-gradient(180deg, #3190FF 0%, #1657FF 100%);
|
|
top: 0px;
|
|
}
|
|
.item0{
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
z-index:3;
|
|
background: linear-gradient(180deg, rgba(49, 144, 255, 0.8) 0%, rgba(22, 87, 255, 0.8) 100%);
|
|
}
|
|
.item1{
|
|
left: 15%;
|
|
top: 24px;
|
|
z-index:2;
|
|
background: linear-gradient(180deg, rgba(49, 144, 255, 0.7) 0%, rgba(22, 87, 255, 0.7) 100%);
|
|
}
|
|
.item2{
|
|
right: 15%;
|
|
top: 24px;
|
|
z-index:2;
|
|
background: linear-gradient(180deg, rgba(49, 144, 255, 0.6) 0%, rgba(22, 87, 255, 0.6) 100%);
|
|
}
|
|
.item3{
|
|
right: 0;
|
|
top: 46px;
|
|
z-index:1;
|
|
background: linear-gradient(180deg, rgba(49, 144, 255, 0.5) 0%, rgba(22, 87, 255, 0.5) 100%);
|
|
}
|
|
.item4{
|
|
left: 0;
|
|
top: 46px;
|
|
z-index:1;
|
|
background: linear-gradient(180deg, rgba(49, 144, 255, 0.4) 0%, rgba(22, 87, 255, 0.4) 100%);
|
|
}
|
|
}
|
|
.car{
|
|
width: 228px;
|
|
height: 95px;
|
|
}
|
|
}
|
|
.analyse{
|
|
width: 100%;
|
|
height: 48px;
|
|
box-sizing: border-box;
|
|
padding: 6px 12px;
|
|
background: #fff;
|
|
margin-top: 16px;
|
|
border-radius: 4px;
|
|
display: flex;
|
|
.title{
|
|
width: 28px;
|
|
height: 18px;
|
|
font-size: 12px;
|
|
font-family: PingFangSC-Regular, PingFang SC;
|
|
font-weight: 400;
|
|
color: #160002;
|
|
line-height: 18px;
|
|
padding: 0 4px;
|
|
text-align: center;
|
|
border-radius: 4px;
|
|
background:rgba(6, 93, 255, 0.1);
|
|
}
|
|
.content{
|
|
width: calc(100% - 46px);
|
|
padding-left: 6px;
|
|
font-size: 12px;
|
|
font-family: PingFangSC-Regular, PingFang SC;
|
|
font-weight: 400;
|
|
color: #786B6C;
|
|
line-height: 18px;
|
|
display: -webkit-box;
|
|
-webkit-box-orient: vertical;
|
|
overflow: hidden;
|
|
-webkit-line-clamp: 2;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.charts{
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
padding: 28px 16px 0;
|
|
.carAnalyse{
|
|
.title{
|
|
font-size: 34rpx;
|
|
font-family: PingFangSC-Semibold, PingFang SC;
|
|
font-weight: 600;
|
|
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%;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style> |