update

package-lock.json

@@ -1,5 +1,5 @@
 {
-  "name": "wechat_ahyd (2)",
+  "name": "ahyd_DIB",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {

pages/commercialBI/carPortrait.vue

@@ -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">
+        <entry-zone :carData="carData" />
-          <div class="item">
+        <analyse />
-            <canvas class="carNum" canvas-id="carNum" id="carNum"/>
+      </div>
-          </div>
+      <div class="chartsItem" style="margin-top: 32px">
-          <div class="item"></div>
+        <view class="tab" >
-        </div>
+            <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(){
+    data(){
-    return {
+      return {
-      menu:{}, //手机参数
+        menu:{}, //手机参数
-      serviceArray:["123465","123465","123465","123465","123465"], // 选择服务区的列表
+        serviceArray:["123465","123465","123465","123465","123465"], // 选择服务区的列表
-      serviceIndex:0, //选中的服务区列表的第几个
+        serviceIndex:0, //选中的服务区列表的第几个
-      area:'片区', //属于哪个片区
+        area:'片区', //属于哪个片区
-      labelList:[{value:'杭州'},{value:'小汽车'},{value:'一般消费'},{value:'温州'},{value:'30-60万'}], //标签
+        labelList:[{value:'杭州'},{value:'小汽车'},{value:'一般消费'},{value:'温州'},{value:'30-60万'}], //标签
-      time:'',//当前时间
+        time:'',//当前时间
-      chartData:{},
+        chartData:{},
-      carNumAll : 0//一共的入区车流数
+        selectTab: 1,
-    }
+        tabList:[{name:'全部',value:0},{name:'东区',value:1},{name:'西区',value:2}],//选项卡列表
-  },
+        carNumAll : 0,//一共的入区车流数
-  onLoad(option){
+        carData:[],//入区车流的数据
-    //跳转的时候带上时间
+        homePlaceAll:[],//车辆归属地两区总和列表
-    this.time = option.time
+        homePlace:[],//车辆归属地
-    console.log('this.time',this.time)
+        cityPlaceAll:[],//车辆归属地的城市总和列表
-    //  获取手机参数对页面进行适配
+        cityPlace:[],//车辆归属地的城市
-    let systemInfo = uni.getSystemInfoSync()
+        carTypeTimeDataAll:[],//车辆类型占比与停留时间总和列表
-    this.statusBarHeight = Number(systemInfo.statusBarHeight)
+        carTypeTimeData:[],//车辆类型占比与停留时间
-    this.menu = uni.getMenuButtonBoundingClientRect()
+        timeAnalysisData:[],//  车辆价值与停留时间分析
-    console.log('this.menu',this.menu)
+        percentEntryData:[]//入区率占比
-    this.getData()
+      }
-  },
-  onReady(){
-
-  },
-  methods:{
-    bindPickerChange:function (e){
-      console.log(e)
     },
-    getData(){
+    components: {PercentEntry, CarTypeTime, HomePlace, EntryZone, analyse,timeAnalysis},
-      request.$webGet('CommercialApi/Revenue/GetBayonetEntryList',{
+    onLoad(option){
-        StatisticsDate: this.time,
+      //跳转的时候带上时间
-        Serverpart_ID	:'432'
+      this.time = option.time
-      }).then(result=>{
+      //  获取手机参数对页面进行适配
-        console.log('result',result.Result_Data)
+      let systemInfo = uni.getSystemInfoSync()
-        let data = []
+      // 把获取到的手机参数保存
-        let carSum = 0
+      uni.setStorageSync('phoneInfo',systemInfo)
-        result.Result_Data.List.forEach(item=>{
+      this.statusBarHeight = Number(systemInfo.statusBarHeight)
-          data.push({name:item.Serverpart_Region ,value:item.Vehicle_Count })
+      this.menu = uni.getMenuButtonBoundingClientRect()
-          carSum+=item.Vehicle_Count
+      // 入区车流分析
+      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)
+      getHomeData(){
-        let res = {
+          const date = new Date(this.time)
-          series: [
+          let y = date.getFullYear()
-            {
+          let m = date.getMonth() + 1
-              data: data
+          if (m<10){
-            }
+              m='0'+m
-          ]
-        }
-        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"
           }
-        }
+          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{
+      .homePlace{
-        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%;
-          }
-        }
       }
     }
+    .chartsItem:last-child{
+      padding-bottom: 32px;
+    }
   }
 }
 </style>

pages/commercialBI/components/analyse.vue

@@ -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>

pages/commercialBI/components/car/carTypeTime.vue

@@ -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>

pages/commercialBI/components/car/entryZone.vue

@@ -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>

pages/commercialBI/components/car/homePlace.vue

@@ -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>

pages/commercialBI/components/car/percentEntry.vue

@@ -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>

pages/commercialBI/components/car/timeAnalysis.vue

@@ -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>

pages/commercialBI/components/模板.vue

@@ -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>

pages/index/index.vue

@@ -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>
+                    <text class="comparePlan">比计划： </text>
-                    <p class="text">{{monthAdd?monthAdd + '%':'-'}}</p>
+                    <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>
+                    <text class="comparePlan">比计划： </text>
-                    <p class="text">{{yearAdd?yearAdd + '%':''}}</p>
+                    <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.monthAdd = (this.plan.percentageMonth - thisDayShould).toFixed(2)
-        this.yearAdd = (((res.Result_Data.RevenueYear_Amount - res.Result_Data.RevenueYear_PlanAmount)/res.Result_Data.RevenueYear_PlanAmount)*100).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 {
+                  .comparePlan{
-                    width: 16px;
+                    font-size: 24rpx;
-                    height: 16px;
+                    font-family: PingFangSC-Regular, PingFang SC;
-                    margin-right: 2px;
+                    font-weight: 400;
+                    color: #a69e9f;
+                    line-height: 36rpx;
+                    white-space: nowrap;
                   }
-                  .text{
+                  .box2{
-                    font-size: 16px;
+                    display: flex;
-                    font-family: DINAlternate-Bold, DINAlternate;
+                    align-items: center;
-                    color: #150002;
+                    .text{
-                    line-height: 40rpx;
+                      font-size: 14px;
+                      font-family: DINAlternate-Bold, DINAlternate;
+                      color: #150002;
+                      font-weight: bold;
+
+                      line-height: 40rpx;
+                    }
+                    .addIcon {
+                      width: 16px;
+                      height: 16px;
+                      margin-right: 2px;
+                    }
                   }
                 }
               }