diff --git a/pages/commercialBI/businessPortrait.vue b/pages/commercialBI/businessPortrait.vue
index ddeadb5..bd9a609 100644
--- a/pages/commercialBI/businessPortrait.vue
+++ b/pages/commercialBI/businessPortrait.vue
@@ -1,23 +1,72 @@
 <template>
     <div class="main">
-        <header-top :bgUrl="bgUrl" :menu="menu" :bgColor="bgColor" :title="title" :labelList="labelList"/>
+        <header-top :bgUrl="bgUrl" :menu="menu" :bgColor="bgColor" :title="title" :labelList="labelList" :topBg="topBg"/>
+
+        <div class="charts">
+            <div class="chartsItem">
+                <p class="title">交易分析</p>
+                <transaction-analysis :data="transactionList" />
+            </div>
+            <div class="chartsItem" style="margin-top: 32px">
+                <p class="title">消费时段分析</p>
+                <time-period-analysis :data="timePeriodList"/>
+                <analyse />
+            </div>
+            <div class="chartsItem" style="margin-top: 32px">
+                <p class="title">消费水平<text class="unit">(Top 5)</text></p>
+                <level-top :data="levelTopList"></level-top>
+                <analyse />
+            </div>
+            <div class="chartsItem" style="margin-top: 32px">
+                <p class="title">业态适配型</p>
+                <business-format :data="businessTypeList"/>
+                <analyse />
+            </div>
+            <div class="chartsItem" style="margin-top: 32px">
+                <p class="title">消费转化对比图</p>
+                <consumption-compare :data="compareList"/>
+                <analyse />
+            </div>
+            <div class="chartsItem" style="margin-top: 32px">
+                <p class="title">商超畅销品</p>
+                <bestseller-shop :data="bestsellerList"/>
+                <analyse />
+            </div>
+        </div>
     </div>
 </template>
 
 <script>
 import headerTop from "./components/headerTop.vue";
+import transactionAnalysis from "./components/bussiness/transactionAnalysis.vue";
+import TimePeriodAnalysis from "./components/bussiness/timePeriodAnalysis.vue";
+import analyse from "./components/analyse.vue";
+import LevelTop from "./components/bussiness/levelTop.vue";
+import BusinessFormat from "./components/bussiness/businessFormat.vue";
+import ConsumptionCompare from "./components/bussiness/consumptionCompare.vue";
+import BestsellerShop from "./components/bussiness/bestsellerShop.vue";
 
 export default {
     name: "businessPortrait",
-    components: {headerTop},
+    components: {
+        BestsellerShop,
+        ConsumptionCompare,
+        BusinessFormat, LevelTop, analyse, TimePeriodAnalysis, headerTop,transactionAnalysis},
     data() {
         return {
+            topBg:'linear-gradient(180deg, #EDD1AF 0%, #EED7BB 100%);',//顶部组件的悬浮背景色
             labelList:['女性','高消费','喜爱奶茶','浙江','20-30岁','江苏'],//标签
             title:'交易画像',//页面标题
             bgColor:'180deg, #FFBA07 0%, #F38309 100%',
             bgUrl: 'https://eshangtech.com/ShopICO/ahyd-BID/commercial/businessPortraitBg.svg',//背景图片路径
             time: '',//跳转携带的时间
             menu: {},//手机配置信息
+            transactionList:[],//交易分析数据
+            timePeriodList:[],//消费时段分析
+            levelTopList:[],//消费水平排行
+            businessTypeList:[],//业态适配型
+            compareList:[],//消费转化对比图
+            bestsellerList:[]//商超畅销品
         }
     },
     onLoad(option) {
@@ -29,6 +78,124 @@ export default {
         uni.setStorageSync('phoneInfo', systemInfo)
         this.statusBarHeight = Number(systemInfo.statusBarHeight)
         this.menu = uni.getMenuButtonBoundingClientRect()
+        //交易分析
+        this.getTransactionList()
+        //消费时段分析
+        this.getTimePeriodList()
+        //消费水平排行
+        this.getLevelTopList()
+        //业态适配型
+        this.getBusinessTypeList()
+        //消费转化对比图
+        this.getCompareList()
+        //商超畅销品
+        this.getBestsellerList()
+    },
+    methods:{
+        getTransactionList(){
+            let res=[]
+            this.transactionList = res
+        },
+        getTimePeriodList(){
+            let res={
+                series: [
+                    {
+                        name: "气泡一",
+                        data: [[2,35,35],[6,18,18],[10,5,5],[14,8,8],[18,9,9],[22,18,18]]
+                    }
+                ]
+            }
+            this.timePeriodList = res
+        },
+        getLevelTopList(){
+            let res = {
+                categories:["商超","餐饮","水果饮品","小吃","连锁品牌","全业态"],
+                series: [
+                    {
+                        name: "高消费",
+                        textColor: "#FFFFFF",
+                        data: [35,36,31,33,13,34]
+                    },
+                    {
+                        name: "普通消费",
+                        textColor: "#FFFFFF",
+                        data: [18,27,21,24,6,28]
+                    },
+                    {
+                        name: "低消费",
+                        textColor: "#FFFFFF",
+                        data: [18,27,21,24,6,28]
+                    }
+                ]
+            }
+            this.levelTopList = res
+        },
+        getBusinessTypeList(){
+            let res= {
+                series: [
+                    {
+                        data: [{"name":"商超","value":27.6},
+                            {"name":"水果饮品","value":20.7},
+                            {"name":"餐饮","value":15.5},
+                            {"name":"小吃","value":11.9},
+                            {"name":"地方特产","value":8.4},
+                            {"name":"连锁品牌","value":7.2},
+                            {"name":"粽子","value":5.6},
+                            {"name":"箱包工艺","value":3.1}]
+                    }
+                ]
+            };
+            this.businessTypeList = res
+        },
+        getCompareList(){
+            let res = {
+                categories: ["0:00","4:00","8:00","12:00","16:00","20:00","24:00"],
+                series: [
+                    {
+                        index:0,
+                        name: "客单数",
+                        data: [18,40,25,50,45,65,70]
+                    },
+                    {
+                        index:1,
+                        name: "车辆数",
+                        data: [180,150,170,140,130,250,280]
+                    }
+                ]
+            }
+            this.compareList = res
+        },
+        getBestsellerList(){
+            let res = [
+                {
+                    series: [
+                        {
+                            data: [{"name":"热销商品","value":39.8},
+                                {"name":"","value":60.2}],
+                            list:[{name:'红牛',value:29.3},
+                                {name:'农夫山泉',value:25.6},
+                                {name:'康师傅红烧牛肉面桶装牛肉面桶装',value:16.5},
+                                {name:'方便面',value:15.2},
+                                {name:'其他',value:13.4}]
+                        }
+                    ]
+                },
+                {
+                    series: [
+                        {
+                            data: [{"name":"滞销商品","value":21.6},
+                                {"name":"","value":78.4}],
+                            list:[{name:'水杯',value:29.3},
+                                {name:'吸油纸',value:25.6},
+                                {name:'康师傅红烧牛肉面桶装牛肉面桶装',value:16.5},
+                                {name:'纸巾',value:15.2},
+                                {name:'其他',value:13.4}]
+                        }
+                    ]
+                }
+            ]
+            this.bestsellerList = res
+        }
     }
 }
 </script>
@@ -37,5 +204,28 @@ export default {
 .main {
   width: 100vw;
   min-height: 100vh;
+    .charts{
+        width: 100%;
+        box-sizing: border-box;
+        padding: 28px 16px 24px;
+        background: #fff;
+        .chartsItem{
+            .title{
+                font-size: 17px;
+                font-family: PingFangSC-Semibold, PingFang SC;
+                font-weight: 600;
+                color: #160002;
+                line-height: 24px;
+                .unit{
+                    font-size: 14px;
+                    font-family: PingFangSC-Regular, PingFang SC;
+                    font-weight: 400;
+                    color: #786B6C;
+                    line-height: 20px;
+                    margin-left: 4px;
+                }
+            }
+        }
+    }
 }
 </style>
\ No newline at end of file
diff --git a/pages/commercialBI/carPortrait.vue b/pages/commercialBI/carPortrait.vue
index fa39f9e..7684fdc 100644
--- a/pages/commercialBI/carPortrait.vue
+++ b/pages/commercialBI/carPortrait.vue
@@ -18,7 +18,7 @@
                   <view class="select">
                       <view class="content">
                           <view class="uni-input">大龙山服务区</view>
-                          <text class="area">安庆片区</text>
+                          <p class="area">安庆片区</p>
                           <image class="rightArrow" src="/static/images/commercial/rightArrow.svg"></image>
                       </view>
                   </view>
@@ -248,9 +248,11 @@ export default {
                   })
 
                   series.push({
+                      index:1,
                       name:'停留时间',data:stayTime
                   })
                   series.push({
+                      index:0,
                       name:'车辆类型',data:carType
                   })
               })
@@ -258,6 +260,7 @@ export default {
               this.carTypeTimeDataAll[1] ={categories:result[1].Vehicle_Type, series:[series[3],series[2]]}
               this.carTypeTimeDataAll[2] ={categories:result[2].Vehicle_Type, series:[series[5],series[4]]}
               this.carTypeTimeData = this.carTypeTimeDataAll[this.selectTab]
+              console.log('this.carTypeTimeData',this.carTypeTimeData)
           })
           // categories: ["小型车","中型车","大货车","新能源车"],
           //     series: [{name:'新能源',data:[30,38,20,10]},
@@ -380,11 +383,9 @@ export default {
                 font-family: PingFangSC-Semibold, PingFang SC;
                 font-weight: 600;
                 color: #160002;
-                height: 40px;
-                line-height: 40px;
               }
               .area{
-                font-size: 14px;
+                font-size: 12px;
                 font-family: PingFangSC-Regular, PingFang SC;
                 font-weight: 400;
                 color: #786B6C;
diff --git a/pages/commercialBI/components/bussiness/bestsellerShop.vue b/pages/commercialBI/components/bussiness/bestsellerShop.vue
new file mode 100644
index 0000000..e8383ce
--- /dev/null
+++ b/pages/commercialBI/components/bussiness/bestsellerShop.vue
@@ -0,0 +1,161 @@
+<template>
+    <div class="bestsellerShop">
+        <div class="item">
+            <div class="canvas">
+                <canvas class="hotSales" canvas-id="hotSales" id="hotSales"/>
+            </div>
+            <div class="list">
+                <div class="shopItem" v-for="(item,index) in shopList[0].series[0].list" :key="index">
+                    <p class="title">{{item.name}}</p>
+                    <p class="value">{{item.value}}%</p>
+                </div>
+            </div>
+        </div>
+        <div class="item">
+            <div class="canvas">
+                <canvas class="unsalableGoods" canvas-id="unsalableGoods" id="unsalableGoods"/>
+            </div>
+            <div class="list" style="float: right">
+                <div class="shopItem" v-for="(item,index) in shopList[1].series[0].list" :key="index">
+                    <p class="title">{{item.name}}</p>
+                    <p class="value">{{item.value}}%</p>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+import uCharts from '@/components/u-charts.js';
+var uChartsInstance = {};
+export default {
+    name: "bestsellerShop",
+    data() {
+        return {
+            width:0,
+            shopList:[]
+        }
+    },
+    props: {
+        data: {
+            type: Array,
+            default: () => []
+        }
+    },
+    watch: {
+        data: {
+            handler(value) {
+                console.log('carDatawatch', value)
+                this.shopList = value
+                this.handleCarData(value)
+            }
+        }
+    },
+    methods: {
+        // 处理传入的数据
+        handleCarData(value) {
+            let res = value
+            this.drawCharts('hotSales', res[0],{color:["#1E80FF","#E5E8EF"],title:'',subTitle:'热销商品'})
+            this.drawCharts('unsalableGoods', res[1],{color:["#00C2FF","#E5E8EF"],title:'',subTitle:'滞销商品'})
+        },
+        drawCharts(id, data,config) {
+            const ctx = uni.createCanvasContext(id, this);
+            let _this = this
+            let phoneInfo = uni.getStorageSync('phoneInfo')
+            this.width =  phoneInfo.screenWidth - 32
+            uChartsInstance[id] = new uCharts({
+                type: "ring",
+                context: ctx,
+                width: _this.width / 2,
+                height: 165,
+                series: data.series,
+                animation: true,
+                rotate: false,
+                rotateLock: false,
+                background: "#FFFFFF",
+                color: config.color,
+                padding: [5, 5, 5, 5],
+                dataLabel: false,
+                enableScroll: false,
+                title: {
+                    name: config.title,
+                    fontSize: 16,
+                    color: "#160002"
+                },
+                subtitle: {
+                    name: config.subTitle,
+                    fontSize: 12,
+                    color: "#786B6C",
+                },
+                legend: {
+                    show: false,
+                    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">
+.bestsellerShop{
+  width: 100%;
+  display: flex;
+  .item{
+    width: 50%;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+      .canvas{
+          width: 100%;
+          height: 170px;
+      }
+      .list{
+          width: 90%;
+          .shopItem{
+              width: 100%;
+              display: flex;
+              justify-content: space-between;
+              align-items: center;
+              border-bottom: 2px solid #EFEFEF;
+              padding: 10px 0;
+              .title{
+                  font-size: 14px;
+                  font-family: PingFangSC-Regular, PingFang SC;
+                  font-weight: 400;
+                  color: #786B6C;
+                  line-height: 20px;
+                  width: 75%;
+                  display: -webkit-box;
+                  -webkit-box-orient: vertical;
+                  -webkit-line-clamp: 2;
+                  overflow: hidden;
+              }
+              .value{
+                  font-size: 14px;
+                  font-family: PingFangSC-Regular, PingFang SC;
+                  font-weight: 400;
+                  color: #160002;
+                  line-height: 20px;
+              }
+          }
+      }
+  }
+}
+</style>
\ No newline at end of file
diff --git a/pages/commercialBI/components/bussiness/businessFormat.vue b/pages/commercialBI/components/bussiness/businessFormat.vue
new file mode 100644
index 0000000..a63e437
--- /dev/null
+++ b/pages/commercialBI/components/bussiness/businessFormat.vue
@@ -0,0 +1,121 @@
+<template>
+    <div class="businessFormat">
+        <canvas v-if="!formatPath" class="format" canvas-id="businessFormat" id="businessFormat"/>
+        <image v-if="formatPath" class="format" :src="formatPath"></image>
+    </div>
+</template>
+
+<script>
+import uCharts from '@/components/u-charts.js';
+var uChartsInstance = {};
+export default {
+    name: "businessFormat",
+    data() {
+        return {
+            width:0,
+            formatPath:''
+        }
+    },
+    props: {
+        data: {
+            type: Object,
+            default: () => {}
+        }
+    },
+    watch: {
+        data: {
+            handler(value) {
+                console.log('businessFormat', value)
+                this.handleCarData(value)
+            }
+        }
+    },
+    methods: {
+        // 处理传入的数据
+        handleCarData(value) {
+            let res = value
+            this.drawCharts('businessFormat', res)
+        },
+        drawCharts(id, data) {
+            const ctx = uni.createCanvasContext(id, this);
+            let _this = this
+            let phoneInfo = uni.getStorageSync('phoneInfo')
+            this.width =  phoneInfo.screenWidth - 32
+            uChartsInstance[id] = new uCharts({
+                type: "ring",
+                context: ctx,
+                width: _this.width,
+                height: 250,
+                series: data.series,
+                animation: true,
+                rotate: false,
+                rotateLock: false,
+                background: "#FFFFFF",
+                color: ["#1E80FF", "#456497","#6B85AE","#8095B8","#97A9C6","#ACB9CD","#B8C7DE","#D5DFF0"],
+                padding: [5, 5, 5, 5],
+                dataLabel: true,
+                enableScroll: false,
+                title: {
+                    name: '刚需型',
+                    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"
+                    }
+                }
+            });
+            setTimeout( ()=>{
+                this.canvasToTempImage('businessFormat')
+            },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.formatPath = base64
+                            }
+                        })
+                    }
+                }
+            },this)
+        },
+    }
+}
+</script>
+
+<style scoped lang="scss">
+.businessFormat{
+    width: 100%;
+    .format{
+        width: 100%;
+        height: 250px;
+    }
+}
+</style>
\ No newline at end of file
diff --git a/pages/commercialBI/components/bussiness/consumptionCompare.vue b/pages/commercialBI/components/bussiness/consumptionCompare.vue
new file mode 100644
index 0000000..ac09bb3
--- /dev/null
+++ b/pages/commercialBI/components/bussiness/consumptionCompare.vue
@@ -0,0 +1,138 @@
+<template>
+    <div class="consumptionCompare">
+        <canvas v-if="!consumptionPath" class="consumption" canvas-id="consumption" id="consumption"/>
+        <image v-if="consumptionPath" :src="consumptionPath" class="consumption"></image>
+    </div>
+</template>
+
+<script>
+import uCharts from '@/components/u-charts.js';
+var uChartsInstance = {};
+export default {
+    name: "consumptionCompare",
+    data() {
+        return {
+            width: 0,
+            consumptionPath:''
+        }
+    },
+    props: {
+        data: {
+            type: Object,
+            default: () => {}
+        }
+    },
+    watch: {
+        data: {
+            handler(value) {
+                console.log('carDatawatch', value)
+                this.handleCarData(value)
+            }
+        }
+    },
+    methods: {
+        // 处理传入的数据
+        handleCarData(value) {
+            console.log('value',value)
+            let res = value
+            this.drawCharts('consumption', res)
+        },
+        drawCharts(id, data) {
+            const ctx = uni.createCanvasContext(id, this);
+            let _this = this
+            let phoneInfo = uni.getStorageSync('phoneInfo')
+            this.width =  phoneInfo.screenWidth - 32
+            uChartsInstance[id] = new uCharts({
+                type: "area",
+                context: ctx,
+                width:  _this.width,
+                height: 220,
+                categories: data.categories,
+                series: data.series,
+                animation: true,
+                rotate: false,
+                rotateLock: false,
+                background: "#FFFFFF",
+                color: ["#CAD0DA", "#1E80FF"],
+                padding: [15, 5, 5, 5],
+                dataLabel: false,
+                enableScroll: false,
+                xAxis: {
+                    disableGrid: true
+                },
+                yAxis:{
+                    showTitle:true,
+                    splitNumber:4,
+                    data: [
+                        {
+                            index:0,
+                            title:'单位: 笔',
+                            min: 0,
+                            max: 80,
+                            position: "left",
+                            titleOffsetY: -5
+                        },
+                        {
+                            index:1,
+                            title:'单位: 辆',
+                            min: 0,
+                            max: 400,
+                            position: 'right',
+                            titleOffsetY: -5,
+                            titleOffsetX: 5
+                        },
+                    ]
+                },
+                legend: {
+                    show: true,
+                    position: "bottom",
+                    lineHeight: 25,
+                    float: 'center'
+
+                },
+                extra: {
+                    area: {
+                        type: "curve",
+                        opacity: 0.9,
+                        addLine: true,
+                        width: 2,
+                        gradient: true,
+                        activeType: "hollow"
+                    }
+                }
+            });
+            setTimeout( ()=>{
+                this.canvasToTempImage('consumption')
+            },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.consumptionPath = base64
+                            }
+                        })
+                    }
+                }
+            },this)
+        },
+    }
+}
+</script>
+
+<style scoped lang="scss">
+.consumptionCompare{
+    width: 100%;
+    margin-top: 12px;
+    .consumption{
+        width: 100%;
+        height: 220px;
+    }
+}
+</style>
\ No newline at end of file
diff --git a/pages/commercialBI/components/bussiness/levelTop.vue b/pages/commercialBI/components/bussiness/levelTop.vue
new file mode 100644
index 0000000..6828c46
--- /dev/null
+++ b/pages/commercialBI/components/bussiness/levelTop.vue
@@ -0,0 +1,126 @@
+<template>
+    <div class="levelTop">
+        <canvas v-if="!levelTopPath" class="level" canvas-id="levelTop" id="levelTop"/>
+        <image v-if="levelTopPath" class="level" :src="levelTopPath"></image>
+    </div>
+</template>
+
+<script>
+import uCharts from '@/components/u-charts.js';
+var uChartsInstance = {};
+export default {
+    name: "levelTop",
+    data() {
+        return {
+            width:0,
+            levelTopPath:''
+        }
+    },
+    props: {
+        data: {
+            type: Object,
+            default: () => {}
+        }
+    },
+    watch: {
+        data: {
+            handler(value) {
+                console.log('carDatawatch', value)
+                this.handleCarData(value)
+            }
+        }
+    },
+    methods: {
+        // 处理传入的数据
+        handleCarData(value) {
+            let res = value
+            this.drawCharts('levelTop', res)
+        },
+        drawCharts(id, data) {
+            const ctx = uni.createCanvasContext(id, this);
+            let _this = this
+            let phoneInfo = uni.getStorageSync('phoneInfo')
+            this.width =  phoneInfo.screenWidth - 32
+            uChartsInstance[id] = new uCharts({
+                type: "column",
+                context: ctx,
+                width: _this.width,
+                height: 272,
+                categories: data.categories,
+                series: data.series,
+                animation: true,
+                rotate: false,
+                rotateLock: false,
+                background: "#FFFFFF",
+                color: ["#1E80FF","#ACB9CD","#CAD0DA" ],
+                padding: [15, 5, 5, 5],
+                dataLabel: false,
+                enableScroll: false,
+                legend: {
+                    show: true,
+                    position: "bottom",
+                    lineHeight: 25,
+                    float: 'center'
+
+                },
+                xAxis: {
+                    disableGrid: true
+                },
+                yAxis: {
+                    showTitle:true,
+                    splitNumber:5,
+                    data: [
+                        {
+                            min: 0,
+                            max: 100,
+                            title:'单位: /%',
+                            titleOffsetY:-5,
+                            titleOffsetX:-5
+                        }
+                    ]
+                },
+                extra: {
+                    column: {
+                        type: "stack",
+                        width: 20,
+                        activeBgColor: "#000000",
+                        activeBgOpacity: 0.08,
+                        labelPosition: "center"
+                    }
+                }
+            });
+            setTimeout( ()=>{
+                this.canvasToTempImage('levelTop')
+            },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.levelTopPath = base64
+                            }
+                        })
+                    }
+                }
+            },this)
+        },
+    }
+}
+</script>
+
+<style scoped lang="scss">
+.levelTop{
+    width:100%;
+    margin-top: 12px;
+    .level{
+        width: 100%;
+        height: 272px;
+    }
+}
+</style>
\ No newline at end of file
diff --git a/pages/commercialBI/components/bussiness/timePeriodAnalysis.vue b/pages/commercialBI/components/bussiness/timePeriodAnalysis.vue
new file mode 100644
index 0000000..fcdfb8d
--- /dev/null
+++ b/pages/commercialBI/components/bussiness/timePeriodAnalysis.vue
@@ -0,0 +1,122 @@
+<template>
+    <div class="timePeriodAnalysis">
+        <canvas v-if="!timePeriodPath" class="timePeriod" canvas-id="timePeriod" id="timePeriod"/>
+        <image class="timePeriod" v-if="timePeriodPath" :src="timePeriodPath"></image>
+    </div>
+</template>
+
+<script>
+import uCharts from '@/components/u-charts.js';
+var uChartsInstance = {};
+export default {
+    name: "timePeriodAnalysis",
+    data() {
+        return {
+            width:0,
+            timePeriodPath:''
+        }
+    },
+    props: {
+        data: {
+            type: Object,
+            default: () => {}
+        }
+    },
+    watch: {
+        data: {
+            handler(value) {
+                console.log('carDatawatch', value)
+                this.handleCarData(value)
+            }
+        }
+    },
+    methods: {
+        // 处理传入的数据
+        handleCarData(value) {
+            let res = value
+            this.drawCharts('timePeriod', res)
+        },
+        drawCharts(id, data) {
+            const ctx = uni.createCanvasContext(id, this);
+            let _this = this
+            let phoneInfo = uni.getStorageSync('phoneInfo')
+            this.width =  phoneInfo.screenWidth - 32
+            uChartsInstance[id] = new uCharts({
+                type: "bubble",
+                context: ctx,
+                width: _this.width,
+                height: 200,
+                series: data.series,
+                animation: true,
+                rotate: false,
+                rotateLock: false,
+                background: "#FFFFFF",
+                color: ["#C7DFFF"],
+                padding: [15, 10, 5, 5],
+                dataLabel: false,
+                enableScroll: false,
+                xAxis: {
+                    disableGrid: true,
+                    gridType: "dash",
+                    splitNumber: 6,
+                    boundaryGap: "justify",
+                    min: 0,
+                    max: 24
+                },
+                yAxis: {
+                    disableGrid: false,
+                    gridType: "dash",
+                    data: [
+                        {
+                            min: 0,
+                            max: 50
+                        }
+                    ]
+                },
+                legend: {
+                    show: false,
+                    position: "bottom",
+                    lineHeight: 25,
+                    float: 'center',
+                },
+                extra: {
+                    bubble: {
+                        border: 2,
+                        opacity: 0.5
+                    }
+                }
+            });
+            setTimeout( ()=>{
+                this.canvasToTempImage('timePeriod')
+            },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.timePeriodPath = base64
+                            }
+                        })
+                    }
+                }
+            },this)
+        },
+    }
+}
+</script>
+
+<style scoped lang="scss">
+.timePeriodAnalysis{
+    width: 100%;
+    .timePeriod{
+        width: 100%;
+        height: 200px;
+    }
+}
+</style>
\ No newline at end of file
diff --git a/pages/commercialBI/components/bussiness/transactionAnalysis.vue b/pages/commercialBI/components/bussiness/transactionAnalysis.vue
new file mode 100644
index 0000000..e7a2d5f
--- /dev/null
+++ b/pages/commercialBI/components/bussiness/transactionAnalysis.vue
@@ -0,0 +1,186 @@
+<template>
+    <div class="main">
+        <div class="yesterday">
+            <div class="top">
+                <image class="icon" src="/static/images/commercial/money.svg"></image>
+                <p class="title">客单均价<text class="unit">/元</text></p>
+            </div>
+            <div class="bottom">
+                <div class="item">
+                    <p class="price">18.3</p>
+                    <p class="text">该服务区</p>
+                </div>
+                <div class="item">
+                    <p class="price">17.6</p>
+                    <p class="text">省级平均</p>
+                </div>
+            </div>
+        </div>
+        <div class="month">
+            <div class="top">
+                <image class="icon" src="/static/images/commercial/converRate.svg"></image>
+                <p class="title">消费转化率<text class="unit">/%</text></p>
+            </div>
+            <div class="bottom">
+                <div class="item">
+                    <p class="price">37.9</p>
+                    <p class="text">该服务区</p>
+                </div>
+                <div class="item">
+                    <p class="price">52.8</p>
+                    <p class="text">省级平均</p>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+import uCharts from '@/components/u-charts.js';
+var uChartsInstance = {};
+export default {
+    name: "transactionAnalysis",
+    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">
+.main{
+  width: 100%;
+  .yesterday,.month{
+    margin-top: 12px;
+    width: 100%;
+    box-sizing: border-box;
+    background: #F2F1F1;
+    border-radius: 4px;
+    padding: 12px;
+    .top{
+      display: flex;
+      .icon{
+        width: 18px;
+        height: 18px;
+        margin-right: 9px;
+      }
+      .title{
+        font-size: 14px;
+        font-family: PingFangSC-Semibold, PingFang SC;
+        font-weight: 600;
+        color: #160002;
+        line-height: 20px;
+          .unit{
+              font-size: 14px;
+              font-family: PingFangSC-Regular, PingFang SC;
+              font-weight: 400;
+              color: #A69E9F;
+              line-height: 20px;
+              margin-left: 2px;
+          }
+      }
+    }
+    .bottom{
+      margin-top: 12px;
+      width: 100%;
+      display: flex;
+      box-sizing: border-box;
+      .item{
+        width:50%;
+        padding-left: 22px;
+        .price{
+          font-size: 16px;
+          font-family: DINAlternate-Bold, DINAlternate;
+          font-weight: bold;
+          color: #341D00;
+          line-height: 20px;
+          margin-bottom: 2px;
+        }
+        .text{
+            font-size: 14px;
+            font-family: PingFangSC-Regular, PingFang SC;
+            font-weight: 400;
+            color: #786B6C;
+            line-height: 20px;
+          .unit{
+            font-size: 14px;
+            font-family: PingFangSC-Regular, PingFang SC;
+            font-weight: 400;
+            color: #A69E9F;
+            line-height: 20px;
+          }
+        }
+      }
+    }
+  }
+}
+</style>
\ No newline at end of file
diff --git a/pages/commercialBI/components/car/entryZone.vue b/pages/commercialBI/components/car/entryZone.vue
index faed1c0..cf7e609 100644
--- a/pages/commercialBI/components/car/entryZone.vue
+++ b/pages/commercialBI/components/car/entryZone.vue
@@ -131,10 +131,10 @@ export default {
                 },
                 extra: {
                     ring: {
-                        ringWidth: 12,
+                        ringWidth: 14,
                         activeOpacity: 0.5,
                         activeRadius: 10,
-                        offsetAngle: 0,
+                        offsetAngle: -90,
                         labelWidth: 15,
                         border: false,
                         borderWidth: 3,
diff --git a/pages/commercialBI/components/format/bandLevel.vue b/pages/commercialBI/components/format/bandLevel.vue
new file mode 100644
index 0000000..0166a8e
--- /dev/null
+++ b/pages/commercialBI/components/format/bandLevel.vue
@@ -0,0 +1,162 @@
+<template>
+    <div class="bandLevel">
+        <div class="bandItem" v-for="(item,index) in dataList" :key="index">
+            <p class="title">{{item.name}}</p>
+            <div class="progress">
+                <div class="big" :style="{width:item.big+'%'}">{{item.big}}</div>
+                <div class="normal" :style="{width:item.normal + '%',left:item.big+'%'}">{{item.normal}}</div>
+                <div class="small" :style="{width:item.small + '%',left:(Number(item.big)+Number(item.normal))+'%'}">{{item.small}}</div>
+            </div>
+        </div>
+        <div class="key">
+            <div class="box">
+                <div class="keyItem">
+                    <div class="icon" style="background: #1E80FF"></div>
+                    <p class="type">高消费</p>
+                </div>
+                <div class="keyItem">
+                    <div class="icon" style="background: #ACB9CD"></div>
+                    <p class="type">普通消费</p>
+                </div>
+                <div class="keyItem">
+                    <div class="icon" style="background: #CAD0DA"></div>
+                    <p class="type">低消费</p>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+var uChartsInstance = {};
+export default {
+    name: "bandLevel",
+    data() {
+        return {
+            dataList: []
+        }
+    },
+    props: {
+        data: {
+            type: Array,
+            default: () => []
+        }
+    },
+    watch: {
+        data: {
+            handler(value) {
+                console.log('carDatawatch', value)
+                this.dataList = value
+            }
+        }
+    },
+    methods: {
+
+    }
+}
+</script>
+
+<style scoped lang="scss">
+.bandLevel{
+    width: 100%;
+    margin-top: 12px;
+    .bandItem{
+        margin-bottom: 12px;
+        .title{
+            font-size: 14px;
+            font-family: PingFangSC-Regular, PingFang SC;
+            font-weight: 400;
+            color: #160002;
+            line-height: 20px;
+        }
+        .progress{
+            width: 100%;
+            height: 20px;
+            margin-top: 6px;
+            position: relative;
+            font-size: 12px;
+            font-family: PingFangSC-Regular, PingFang SC;
+            font-weight: 400;
+            color: #FFFFFF;
+            .big{
+                display: flex;
+                align-items: center;
+                height: 100%;
+                position: absolute;
+                top: 0;
+                left: 0;
+                border-radius: 2px 0  0  2px;
+                box-sizing: border-box;
+                padding-left: 4px;
+                background: #1E80FF;
+            }
+            .big:after{
+                position: absolute;
+                content:'';
+                width: 2px;
+                height: 100%;
+                background: #FFFFFF;
+                z-index:9;
+                right: 0;
+                top: 0;
+            }
+            .normal{
+                display: flex;
+                align-items: center;
+                height: 100%;
+                position: absolute;
+                border-radius: 2px 0  0  2px;
+                box-sizing: border-box;
+                padding-left: 4px;
+                background: #ACB9CD;
+            }
+            .normal:after{
+                position: absolute;
+                content:'';
+                width: 2px;
+                height: 100%;
+                background: #FFFFFF;
+                z-index:9;
+                right: 0;
+                top: 0;
+            }
+            .small{
+                display: flex;
+                align-items: center;
+                height: 100%;
+                position: absolute;
+                box-sizing: border-box;
+                padding-left: 4px;
+                border-radius: 2px 0  0  2px;
+                background: #CAD0DA;
+            }
+        }
+    }
+    .key{
+        display: flex;
+        width: 100%;
+        .box{
+            display: flex;
+            margin: 0 auto;
+            .keyItem{
+                display: flex;
+                align-items: center;
+                margin-right: 12px;
+                .icon{
+                    width: 12px;
+                    height: 12px;
+                    border-radius: 2px;
+                    margin-right: 4px;
+                }
+                .type{
+                    font-size: 12px;
+                    font-family: PingFangSC-Regular, PingFang SC;
+                    font-weight: 400;
+                    color: #786B6C;
+                    line-height: 18px;
+                }
+            }
+        }
+    }
+}
+</style>
\ No newline at end of file
diff --git a/pages/commercialBI/components/format/bandNumber.vue b/pages/commercialBI/components/format/bandNumber.vue
new file mode 100644
index 0000000..5644216
--- /dev/null
+++ b/pages/commercialBI/components/format/bandNumber.vue
@@ -0,0 +1,172 @@
+<template>
+  <div class="main">
+      <div class="dataItem" v-for="(item,index) in dataList" :key="index">
+          <image class="bgIcon" src="/static/images/commercial/bg_icon.svg"></image>
+          <div class="left">
+              <image class="icon" :src="item.url"></image>
+          </div>
+          <div class="right">
+              <p class="title">{{item.name}}</p>
+              <div class="company">
+                  <image class="img" src="/static/images/commercial/shop.svg"></image>
+                  <p class="text">{{item.company}}</p>
+              </div>
+              <div class="time">
+                  <image class="img" src="/static/images/commercial/time.svg"></image>
+                  <p class="text">{{item.time}}</p>
+              </div>
+              <div class="label">
+                  <div class="labelItem" v-for="(item,index) in item.label" :key="index">{{item}}</div>
+              </div>
+              <div class="box">
+                  <div class="boxItem">
+                      <p class="mark">{{item.info[0]}}<text class="unit">分</text></p>
+                      <p class="type">吸引力指数</p>
+                  </div>
+                  <div class="boxItem">
+                      <p class="mark">{{item.info[1]}}<text class="unit">分</text></p>
+                      <p class="type">业绩评分</p>
+                  </div>
+                  <div class="boxItem">
+                      <p class="mark">{{item.info[2]}}<text class="unit">分</text></p>
+                      <p class="type">坪效指数</p>
+                  </div>
+              </div>
+          </div>
+      </div>
+  </div>
+</template>
+
+<script>
+export default {
+    name: "bandNumber",
+    data() {
+        return {
+            dataList:[]
+        }
+    },
+    props: {
+        data: {
+            type: Array,
+            default: () => []
+        }
+    },
+    watch: {
+        data: {
+            handler(value) {
+                console.log('carDatawatch', value)
+                this.dataList = value
+            }
+        }
+    },
+}
+</script>
+
+<style scoped lang="scss">
+.main{
+    width: 100%;
+    margin-top: 12px;
+    .dataItem{
+        width: calc(100% - 32px );
+        background: #F8F9F9;
+        border-radius: 8px;
+        margin: 0 auto 12px;
+        display: flex;
+        padding: 12px;
+        position: relative;
+        .bgIcon{
+            width: 96px;
+            height: 96px;
+            position: absolute;
+            right: -5px;top: 0;
+        }
+        .left{
+            width: 60px;
+            height: 60px;
+            overflow: hidden;
+            border-radius: 5px;
+            margin-right: 12px;
+            .icon{
+                width: 100%;
+                height: 100%;
+            }
+        }
+        .right{
+            .title{
+                font-size: 17px;
+                font-family: PingFangSC-Regular, PingFang SC;
+                font-weight: 400;
+                color: #160002;
+                line-height: 24px;
+                margin-bottom: 2px;
+            }
+            .company,.time{
+                display: flex;
+                align-items: center;
+                margin-bottom: 2px;
+                .img{
+                    width: 16px;
+                    height: 16px;
+                    margin-right: 4px;
+                }
+                .text{
+                    font-size: 12px;
+                    font-family: PingFangSC-Regular, PingFang SC;
+                    font-weight: 400;
+                    color: #786B6C;
+                    line-height: 18px;
+                }
+            }
+            .label{
+                margin-top: 8px;
+                width: 100%;
+                display: flex;
+                flex-flow: wrap;
+                .labelItem{
+                    font-size: 12px;
+                    font-family: PingFangSC-Regular, PingFang SC;
+                    font-weight: 400;
+                    color: #786B6C;
+                    line-height: 18px;
+                    padding: 0 4px;
+                    background: #EDF0F4;
+                    margin-right: 4px;
+                    border-radius: 2px;
+                }
+            }
+            .box{
+                margin-top: 22px;
+                display: flex;
+                .boxItem{
+                    margin-right: 22px;
+                    box-sizing: border-box;
+                    padding-left: 5px;
+                    .mark{
+                        font-size: 18px;
+                        font-family: DINAlternate-Bold, DINAlternate;
+                        font-weight: bold;
+                        color: #160002;
+                        line-height: 22px;
+                        margin-bottom: 4px;
+                        .unit{
+                            font-size: 12px;
+                            font-family: PingFangSC-Regular, PingFang SC;
+                            font-weight: 400;
+                            color: #A69E9F;
+                            line-height: 18px;
+                            margin-left: 4px;
+                        }
+                    }
+                    .type{
+                        font-size: 12px;
+                        font-family: PingFangSC-Regular, PingFang SC;
+                        font-weight: 400;
+                        color: #786B6C;
+                        line-height: 18px;
+                    }
+                }
+            }
+        }
+  }
+}
+</style>
\ No newline at end of file
diff --git a/pages/commercialBI/components/format/consumLevel.vue b/pages/commercialBI/components/format/consumLevel.vue
new file mode 100644
index 0000000..aff9c46
--- /dev/null
+++ b/pages/commercialBI/components/format/consumLevel.vue
@@ -0,0 +1,104 @@
+<template>
+    <div class="consumLevel">
+        <canvas class="level" canvas-id="level" id="level"/>
+    </div>
+</template>
+
+<script>
+import uCharts from '@/components/u-charts.js';
+var uChartsInstance = {};
+export default {
+    name: "consumLevel",
+    data() {
+        return {
+            width:0,
+        }
+    },
+    props: {
+        data: {
+            type: Object,
+            default: () => {}
+        }
+    },
+    watch: {
+        data: {
+            handler(value) {
+                console.log('carDatawatch', value)
+                this.handleCarData(value)
+            }
+        }
+    },
+    methods: {
+        // 处理传入的数据
+        handleCarData(value) {
+            let res = value
+            this.drawCharts('level', res)
+        },
+        drawCharts(id, data) {
+            const ctx = uni.createCanvasContext(id, this);
+            let _this = this
+            let phoneInfo = uni.getStorageSync('phoneInfo')
+            this.width =  phoneInfo.screenWidth - 32
+            uChartsInstance[id] = new uCharts({
+                type: "column",
+                context: ctx,
+                width: _this.width,
+                height: 282,
+                categories: data.categories,
+                series: data.series,
+                animation: true,
+                rotate: false,
+                rotateLock: false,
+                background: "#FFFFFF",
+                color: ["#1E80FF","#ACB9CD","#CAD0DA" ],
+                padding: [15, 5, 5, 5],
+                dataLabel: false,
+                enableScroll: false,
+                legend: {
+                    show: true,
+                    position: "bottom",
+                    lineHeight: 25,
+                    float: 'center'
+
+                },
+                xAxis: {
+                    disableGrid: true
+                },
+                yAxis: {
+                    showTitle:true,
+                    splitNumber:5,
+                    data: [
+                        {
+                            min: 0,
+                            max: 100,
+                            title:'单位: /%',
+                            titleOffsetY:-5,
+                            titleOffsetX:-5
+                        }
+                    ]
+                },
+                extra: {
+                    column: {
+                        type: "stack",
+                        width: 20,
+                        activeBgColor: "#000000",
+                        activeBgOpacity: 0.08,
+                        labelPosition: "center"
+                    }
+                }
+            });
+        },
+    }
+}
+</script>
+
+<style scoped lang="scss">
+.consumLevel{
+    width:100%;
+    margin-top: 12px;
+    .level{
+        width: 100%;
+        height: 260px;
+    }
+}
+</style>
\ No newline at end of file
diff --git a/pages/commercialBI/components/format/fillingDegree.vue b/pages/commercialBI/components/format/fillingDegree.vue
new file mode 100644
index 0000000..5c2cb98
--- /dev/null
+++ b/pages/commercialBI/components/format/fillingDegree.vue
@@ -0,0 +1,101 @@
+<template>
+    <div class="fillingDegree">
+        <div class="item">
+            <canvas class="fillDegree" canvas-id="fillDegree" id="fillDegree"/>
+        </div>
+    </div>
+</template>
+
+<script>
+import uCharts from '@/components/u-charts.js';
+var uChartsInstance = {};
+export default {
+    name: "fillingDegree",
+    data() {
+        return {
+            width:0
+        }
+    },
+    props: {
+        data: {
+            type: Object,
+            default: () => {}
+        }
+    },
+    watch: {
+        data: {
+            handler(value) {
+                console.log('carDatawatch', value)
+                this.handleCarData(value)
+            }
+        }
+    },
+    methods: {
+        // 处理传入的数据
+        handleCarData(value) {
+            let res = value
+            this.drawCharts('fillDegree', res)
+        },
+        drawCharts(id, data) {
+            const ctx = uni.createCanvasContext(id, this);
+            let _this = this
+            let phoneInfo = uni.getStorageSync('phoneInfo')
+            this.width =  phoneInfo.screenWidth - 32
+            uChartsInstance[id] = new uCharts({
+                type: "ring",
+                context: ctx,
+                width: _this.width,
+                height: 289,
+                series: data.series,
+                animation: true,
+                rotate: false,
+                rotateLock: false,
+                background: "#FFFFFF",
+                color: ["#1E80FF", "#456497","#6B85AE","#8095B8","#97A9C6","#ACB9CD","#B8C7DE","#D5DFF0"],
+                padding: [5, 5, 5, 5],
+                dataLabel: true,
+                enableScroll: false,
+                title: {
+                    name: _this.carNumAll,
+                    fontSize: 16,
+                    color: "#341D00"
+                },
+                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">
+.fillingDegree{
+    width: 100%;
+    margin-top: 12px;
+    .item{
+        width: 100%;
+        height: 280px;
+        .fillDegree{
+            width: 100%;
+            height: 100%;
+        }
+    }
+}
+</style>
\ No newline at end of file
diff --git a/pages/commercialBI/components/guest/businessType.vue b/pages/commercialBI/components/guest/businessType.vue
new file mode 100644
index 0000000..4d8903c
--- /dev/null
+++ b/pages/commercialBI/components/guest/businessType.vue
@@ -0,0 +1,91 @@
+<template>
+    <div class="businessType">
+        <canvas class="business" canvas-id="businessType" id="businessType"/>
+    </div>
+</template>
+
+<script>
+import uCharts from '@/components/u-charts.js';
+var uChartsInstance = {};
+export default {
+    name: "businessType",
+    data() {
+        return {
+            width:0
+        }
+    },
+    props: {
+        data: {
+            type: Array,
+            default: () => []
+        }
+    },
+    watch: {
+        data: {
+            handler(value) {
+                console.log('carDatawatch', value)
+                this.handleCarData(value)
+            }
+        }
+    },
+    methods: {
+        // 处理传入的数据
+        handleCarData(value) {
+            let res = {
+                series:value
+            }
+            this.drawCharts('businessType', res)
+        },
+        drawCharts(id, data) {
+            const ctx = uni.createCanvasContext(id, this);
+            let _this = this
+            let phoneInfo = uni.getStorageSync('phoneInfo')
+            this.width =  phoneInfo.screenWidth - 32
+            uChartsInstance[id] = new uCharts({
+                type: "ring",
+                context: ctx,
+                width: _this.width,
+                height: 180,
+                series: data.series,
+                animation: true,
+                rotate: false,
+                rotateLock: false,
+                background: "#FFFFFF",
+                color: ["#1E80FF", "#456497","#748AAE","#ACB9CD","#CAD0DA","#E5E8EF"],
+                padding: [5, 5, 5, 5],
+                dataLabel: false,
+                enableScroll: false,
+                legend: {
+                    show: true,
+                    position: "right",
+                    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">
+.businessType{
+    width: 100%;
+    .business{
+        width: 100%;
+        height: 170px;
+    }
+}
+</style>
\ No newline at end of file
diff --git a/pages/commercialBI/components/guest/consumPrefer.vue b/pages/commercialBI/components/guest/consumPrefer.vue
new file mode 100644
index 0000000..f83f624
--- /dev/null
+++ b/pages/commercialBI/components/guest/consumPrefer.vue
@@ -0,0 +1,112 @@
+<template>
+    <div class="consumPrefer">
+        <canvas v-if="!preferPath" class="prefer" canvas-id="prefer" id="prefer"/>
+        <image v-if="preferPath" class="prefer" :src="preferPath"></image>
+    </div>
+</template>
+
+<script>
+import uCharts from '@/components/u-charts.js';
+var uChartsInstance = {};
+export default {
+    name: "consumPrefer",
+    data() {
+        return {
+            width:0,//手机宽度
+            preferPath:''//路径
+        }
+    },
+    props: {
+        data: {
+            type: Object,
+            default: () => {}
+        }
+    },
+    watch: {
+        data: {
+            handler(value) {
+                console.log('carDatawatch', value)
+                this.handleCarData(value)
+            }
+        }
+    },
+    methods: {
+        // 处理传入的数据
+        handleCarData(value) {
+            let res = value
+            this.drawCharts('prefer', res)
+        },
+        drawCharts(id, data) {
+            const ctx = uni.createCanvasContext(id, this);
+            let _this = this
+            let phoneInfo = uni.getStorageSync('phoneInfo')
+            this.width =  phoneInfo.screenWidth - 32
+            uChartsInstance[id] = new uCharts({
+                type: "radar",
+                context: ctx,
+                width: _this.width,
+                height: 294,
+                categories: data.categories,
+                series: data.series,
+                animation: true,
+                rotate: false,
+                rotateLock: false,
+                background: "#FFFFFF",
+                color: ["#1E80FF", "#00C2FF"],
+                padding: [5, 5, 5, 5],
+                dataLabel: false,
+                enableScroll: false,
+                legend: {
+                    show: true,
+                    position: "bottom",
+                    lineHeight: 25,
+                    float: 'center'
+
+                },
+                extra: {
+                    radar: {
+                        gridType: "radar",
+                        gridColor: "#CCCCCC",
+                        gridCount: 3,
+                        opacity: 0.2,
+                        max: 200,
+                        labelShow: true,
+                        border: true
+                    }
+                }
+            });
+            setTimeout( ()=>{
+                this.canvasToTempImage('prefer')
+            },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.preferPath = base64
+                            }
+                        })
+                    }
+                }
+            },this)
+        },
+    }
+}
+</script>
+
+<style scoped lang="scss">
+.consumPrefer{
+    width: 100%;
+    height: 294px;
+    .prefer{
+        width: 100%;
+        height: 100%;
+    }
+}
+</style>
\ No newline at end of file
diff --git a/pages/commercialBI/components/guest/consumptionLevel.vue b/pages/commercialBI/components/guest/consumptionLevel.vue
new file mode 100644
index 0000000..c5b54e3
--- /dev/null
+++ b/pages/commercialBI/components/guest/consumptionLevel.vue
@@ -0,0 +1,167 @@
+<template>
+    <div class="consumptionLevel">
+        <div class="gender" v-for="(item,index) in genderList" :key="index">
+            <div class="top">
+                <image class="icon" :src="item.name==='男'?'/static/images/commercial/man.svg':'/static/images/commercial/woman.svg'"></image>
+                <p class="title">{{item.name}}</p>
+            </div>
+            <div class="progress">
+                <div class="big" :style="{background:item.name==='男'?'#1E80FF':'#00C2FF', width:item.big+'%'}">{{item.big}}</div>
+                <div class="normal" :style="{background:item.name==='男'?'#ACB9CD':'#AFC1C6',width:item.normal + '%',left:item.big+'%'}">{{item.normal}}</div>
+                <div class="small" :style="{background:item.name==='男'?'#CAD0DA':'#C6D3D7',left:(Number(item.big)+Number(item.normal))+'%',width:item.small + '%'}">{{item.small}}</div>
+            </div>
+            <div class="imgKey">
+                <div style="margin: 0 auto;display: flex">
+                    <div class="item">
+                        <div class="icon" :style="{background:item.name==='男'?'#1E80FF':'#00C2FF'}"></div>
+                        <p class="consume">高消费</p>
+                    </div>
+                    <div class="item">
+                        <div class="icon" :style="{background:item.name==='男'?'#ACB9CD':'#AFC1C6'}"></div>
+                        <p class="consume">普通消费</p>
+                    </div>
+                    <div class="item">
+                        <div class="icon" :style="{background:item.name==='男'?'#CAD0DA':'#C6D3D7'}"></div>
+                        <p class="consume">低消费</p>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    name: "consumptionLevel",
+    data() {
+        return {
+            genderList:[]//数据
+        }
+    },
+    props: {
+        data: {
+            type: Array,
+            default: () => []
+        }
+    },
+    watch: {
+        data: {
+            handler(value) {
+                console.log('carDatawatch', value)
+                this.genderList = value
+            }
+        }
+    },
+    methods: {
+
+    }
+}
+</script>
+
+<style scoped lang="scss">
+.consumptionLevel{
+    width: 100%;
+    margin-top: 12px;
+    .gender{
+        width: 100%;
+        margin-bottom: 12px;
+        .top{
+            display: flex;
+            align-items: center;
+            .icon{
+                width: 16px;
+                height: 16px;
+                margin-right: 4px;
+            }
+            .title{
+                font-size: 14px;
+                font-family: PingFangSC-Regular, PingFang SC;
+                font-weight: 400;
+                color: #160002;
+                line-height: 20px;
+            }
+        }
+        .progress{
+            width: 100%;
+            height: 20px;
+            margin-top: 6px;
+            position: relative;
+            font-size: 12px;
+            font-family: PingFangSC-Regular, PingFang SC;
+            font-weight: 400;
+            color: #FFFFFF;
+            .big{
+                display: flex;
+                align-items: center;
+                height: 100%;
+                position: absolute;
+                top: 0;
+                left: 0;
+                border-radius: 2px 0  0  2px;
+                box-sizing: border-box;
+                padding-left: 4px;
+            }
+            .big:after{
+                position: absolute;
+                content:'';
+                width: 2px;
+                height: 100%;
+                background: #FFFFFF;
+                z-index:9;
+                right: 0;
+                top: 0;
+            }
+            .normal{
+                display: flex;
+                align-items: center;
+                height: 100%;
+                position: absolute;
+                border-radius: 2px 0  0  2px;
+                box-sizing: border-box;
+                padding-left: 4px;
+            }
+            .normal:after{
+                position: absolute;
+                content:'';
+                width: 2px;
+                height: 100%;
+                background: #FFFFFF;
+                z-index:9;
+                right: 0;
+                top: 0;
+            }
+            .small{
+                display: flex;
+                align-items: center;
+                height: 100%;
+                position: absolute;
+                box-sizing: border-box;
+                padding-left: 4px;
+                border-radius: 2px 0  0  2px;
+            }
+        }
+        .imgKey{
+            display: flex;
+            margin-top: 8px;
+            .item{
+                display: flex;
+                align-items: center;
+                margin-right: 12px;
+                .icon{
+                    width: 12px;
+                    height: 12px;
+                    border-radius: 2px;
+                    margin-right: 4px;
+                }
+                .consume{
+                    font-size: 12px;
+                    font-family: PingFangSC-Regular, PingFang SC;
+                    font-weight: 400;
+                    color: #786B6C;
+                    line-height: 18px;
+                }
+            }
+        }
+    }
+}
+</style>
\ No newline at end of file
diff --git a/pages/commercialBI/components/guest/customerSecond.vue b/pages/commercialBI/components/guest/customerSecond.vue
index 714070b..eca5968 100644
--- a/pages/commercialBI/components/guest/customerSecond.vue
+++ b/pages/commercialBI/components/guest/customerSecond.vue
@@ -21,18 +21,128 @@
           <div class="man" :style="{width: man + '%'}"></div>
           <div class="woman" :style="{width: woman + '%'}"></div>
       </div>
+      <div class="charts">
+          <canvas v-if="!customerSecondPath" class="sexRatio" canvas-id="gender" id="gender"/>
+          <image class="sexRatio" v-if="customerSecondPath" :src="customerSecondPath"></image>
+      </div>
   </div>
 </template>
 
 <script>
+import uCharts from '@/components/u-charts.js';
+var uChartsInstance = {};
 export default {
     name: "customerSecond",
     data() {
         return {
             man:'64.8',
-            woman:'35.2'
+            woman:'35.2',
+            width:0,//手机宽度
+            customerSecondPath:''//路径
         }
     },
+    props: {
+        data: {
+            type: Array,
+            default: () => []
+        }
+    },
+    watch: {
+        data: {
+            handler(value) {
+                console.log('gender', value)
+                this.handleCarData(value)
+            }
+        }
+    },
+    methods:{
+        // 处理传入的数据
+        handleCarData(value) {
+            let res = {
+                series: value
+            }
+            this.drawCharts('gender', res)
+        },
+        drawCharts(id, data) {
+            const ctx = uni.createCanvasContext(id, this);
+            let _this = this
+            let phoneInfo = uni.getStorageSync('phoneInfo')
+            this.width =  phoneInfo.screenWidth - 70
+            uChartsInstance[id] = new uCharts({
+                type: "bubble",
+                context: ctx,
+                width: _this.width,
+                height: 193,
+                series: data.series,
+                animation: true,
+                rotate: false,
+                rotateLock: false,
+                background: "#FFFFFF",
+                color: ["#1E80FF", "#00C2FF"],
+                padding: [15, 5, 5, 5],
+                dataLabel: false,
+                enableScroll: false,
+                legend: {
+                    show: true,
+                    position: "bottom",
+                    lineHeight: 25,
+                    float: 'center'
+
+                },
+                xAxis: {
+                    disableGrid: true,
+                    gridType: "dash",
+                    splitNumber: 4,
+                    boundaryGap: "justify",
+                    title:'年龄: /岁',
+                    titleOffsetY: 15,
+                    titleOffsetX: -30,
+                    min: 20,
+                    max: 60
+                },
+                yAxis: {
+                    disableGrid: false,
+                    gridType: "dash",
+                    showTitle:true,
+                    data: [
+                        {
+                            title:'单位: /元',
+                            min: 0,
+                            max: 100,
+                            titleOffsetY:-5,
+                            titleOffsetX:0
+                        }
+                    ]
+                },
+                extra: {
+                    bubble: {
+                        border: 2,
+                        opacity: 0.5
+                    }
+                }
+            });
+            setTimeout( ()=>{
+                this.canvasToTempImage('gender')
+            },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.customerSecondPath = base64
+                            }
+                        })
+                    }
+                }
+            },this)
+        },
+    }
 }
 </script>
 
@@ -118,5 +228,14 @@ export default {
           top: 0;
       }
   }
+  .charts{
+      margin-top: 20px;
+      width: 100%;
+      height: 180px;
+      .sexRatio{
+          width: 100%;
+          height: 100%;
+      }
+  }
 }
 </style>
\ No newline at end of file
diff --git a/pages/commercialBI/components/headerTop.vue b/pages/commercialBI/components/headerTop.vue
index 80cd731..4a15657 100644
--- a/pages/commercialBI/components/headerTop.vue
+++ b/pages/commercialBI/components/headerTop.vue
@@ -1,6 +1,6 @@
 <template>
     <div class="header" :style="{backgroundImage: 'url('+ bgUrl +')'}">
-        <div class="headerTop" :style="{height:(menu.bottom + 6) + 'px'}">
+        <div class="headerTop" :style="{height:(menu.bottom + 6) + 'px',background:topBg}">
             <div class="box" :style="{top:(menu.bottom - (menu.height / 2)) + 'px'}">
                 <div class="icon" @click="handleBack">
                     <image class="img" src="/static/images/commercial/navigation-left.svg"></image>
@@ -60,6 +60,10 @@ export default {
       labelList:{
           type:Array,
           default:()=>[]
+      },
+      topBg:{
+          type:String,
+          default: ""
       }
     },
     data() {
@@ -98,6 +102,7 @@ export default {
     position: fixed;
     top: 0;
     left: 0;
+    z-index:99999;
     .box{
       padding: 0 16px;
       position: absolute;
diff --git a/pages/commercialBI/components/manager/contractGuarantee.vue b/pages/commercialBI/components/manager/contractGuarantee.vue
new file mode 100644
index 0000000..235ed35
--- /dev/null
+++ b/pages/commercialBI/components/manager/contractGuarantee.vue
@@ -0,0 +1,80 @@
+<template>
+  <div class="contractGuarantee">
+      <div class="top">
+          <p class="title">{{obj.title}}</p>
+          <p class="value">{{obj.value}}%</p>
+      </div>
+      <div class="progress">
+          <div class="success" :style="{width:obj.value + '%'}"></div>
+      </div>
+  </div>
+</template>
+
+<script>
+export default {
+    name: "contractGuarantee",
+    data() {
+        return {
+            obj:{
+
+            }
+        }
+    },
+    props: {
+        data: {
+            type: Object,
+            default: () => {}
+        }
+    },
+    watch: {
+        data: {
+            handler(value) {
+                this.obj = value
+            }
+        }
+    },
+    methods:{
+
+    }
+}
+</script>
+
+<style scoped lang="scss">
+.contractGuarantee{
+  width: 100%;
+  margin-top: 12px;
+  .top{
+    display: flex;
+    align-content: center;
+    justify-content: space-between;
+    margin-bottom: 4px;
+    .title{
+      font-size: 14px;
+      font-family: PingFangSC-Regular, PingFang SC;
+      font-weight: 400;
+      color: #786B6C;
+      line-height: 20px;
+    }
+    .value{
+      font-size: 16px;
+      font-family: DINAlternate-Bold, DINAlternate;
+      font-weight: bold;
+      color: #150002;
+      line-height: 20px;
+    }
+  }
+  .progress{
+    width: 100%;
+    height: 14px;
+    background: #E5E8EF;
+    border-radius: 4px;
+    position: relative;
+    .success{
+      position: absolute;
+      left: 0;top: 0;
+      height: 100%;
+      background: #1E80FF;
+    }
+  }
+}
+</style>
\ No newline at end of file
diff --git a/pages/commercialBI/components/manager/moneyCompare.vue b/pages/commercialBI/components/manager/moneyCompare.vue
new file mode 100644
index 0000000..a97df84
--- /dev/null
+++ b/pages/commercialBI/components/manager/moneyCompare.vue
@@ -0,0 +1,102 @@
+<template>
+    <div class="moneyCompare">
+        <canvas class="compare" canvas-id="compare" id="compare"/>
+    </div>
+</template>
+
+<script>
+import uCharts from '@/components/u-charts.js';
+var uChartsInstance = {};
+export default {
+    name: "moneyCompare",
+    data() {
+        return {
+            width:0
+        }
+    },
+    props: {
+        data: {
+            type: Object,
+            default: () => {}
+        }
+    },
+    watch: {
+        data: {
+            handler(value) {
+                console.log('carDatawatch', value)
+                this.handleCarData(value)
+            }
+        }
+    },
+    methods: {
+        // 处理传入的数据
+        handleCarData(value) {
+            let res = value
+            this.drawCharts('compare', 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: "column",
+                context: ctx,
+                width: _this.width,
+                height: 208,
+                categories: data.categories,
+                series: data.series,
+                animation: true,
+                rotate: false,
+                rotateLock: false,
+                background: "#FFFFFF",
+                color: ["#CAD0DA", "#1E80FF"],
+                padding: [15, 40, 5, 0],
+                dataLabel: false,
+                enableScroll: false,
+                legend: {
+                    show: true,
+                    position: "bottom",
+                    lineHeight: 25,
+                    float: 'center'
+
+                },
+                xAxis: {
+                    disableGrid: true
+                },
+                yAxis: {
+                    showTitle:true,
+                    splitNumber:4,
+                    data: [
+                        {
+                            min: 0,
+                            max: 12,
+                            title:'单位: 千万',
+                            titleOffsetX:5,
+                            titleOffsetY:-5
+                        }
+                    ]
+                },
+                extra: {
+                    column: {
+                        type: "group",
+                        width: 5,
+                        activeBgColor: "#000000",
+                        activeBgOpacity: 0.08
+                    }
+                }
+            });
+        },
+    }
+}
+</script>
+
+<style scoped lang="scss">
+.moneyCompare{
+    width: 100%;
+    .compare{
+        width: calc(100vw - 32px);
+        height: 200px;
+    }
+}
+</style>
\ No newline at end of file
diff --git a/pages/commercialBI/components/manager/revenueAnalysis.vue b/pages/commercialBI/components/manager/revenueAnalysis.vue
new file mode 100644
index 0000000..bd3502e
--- /dev/null
+++ b/pages/commercialBI/components/manager/revenueAnalysis.vue
@@ -0,0 +1,105 @@
+<template>
+  <div class="revenueAnalysis">
+    <div class="item">
+        <image class="icon" src="/static/images/commercial/agreement.svg"></image>
+        <div class="info" style="margin-bottom: 24px;">
+            <p class="title">合同盈亏<text class="unit">/元</text></p>
+            <p class="value">-1,743,567,98</p>
+        </div>
+    </div>
+      <div class="item" style="margin-bottom: 24px;">
+          <image class="icon" src="/static/images/commercial/shopNumber.svg"></image>
+          <div class="info">
+              <p class="title">店铺数量<text class="unit">/个</text></p>
+              <p class="value">28</p>
+          </div>
+      </div>
+      <div class="item">
+          <image class="icon" src="/static/images/commercial/add.svg"></image>
+          <div class="info">
+              <p class="title">2022日均坪效<text class="unit">/元</text></p>
+              <p class="value">2786.00</p>
+          </div>
+      </div>
+      <div class="item">
+          <image class="icon" src="/static/images/commercial/overShop.svg"></image>
+          <div class="info">
+              <p class="title">半年内到期门店<text class="unit">/个</text></p>
+              <p class="value">6</p>
+          </div>
+      </div>
+  </div>
+</template>
+
+<script>
+export default {
+    name: "revenueAnalysis",
+    data() {
+        return {
+        }
+    },
+    props: {
+        data: {
+            type: Array,
+            default: () => []
+        }
+    },
+    watch: {
+        data: {
+            handler(value) {
+                console.log('carDatawatch', value)
+                this.handleCarData(value)
+            }
+        }
+    },
+    methods:{
+
+    }
+}
+</script>
+
+<style scoped lang="scss">
+.revenueAnalysis{
+  width: calc(100%);
+  background: #F7F7F7;
+  border-radius: 4px;
+  padding: 12px;
+  box-sizing: border-box;
+  display: flex;
+  flex-flow: wrap;
+  margin-top: 12px;
+  .item{
+    width: 50%;
+    display: flex;
+    .icon{
+      width: 20px;
+      height: 20px;
+      margin-right: 8px;
+      margin-top: 4px;
+    }
+    .info{
+      font-size: 14px;
+      font-family: PingFangSC-Regular, PingFang SC;
+      font-weight: 400;
+      color: #160002;
+      line-height: 20px;
+      .unit{
+        font-size: 14px;
+        font-family: PingFangSC-Regular, PingFang SC;
+        font-weight: 400;
+        color: #A69E9F;
+        line-height: 20px;
+        margin-left: 2px;
+      }
+    }
+    .value{
+      font-size:16px;
+      font-family: DINAlternate-Bold, DINAlternate;
+      font-weight: bold;
+      color: #341D00;
+      line-height: 20px;
+      margin-top: 8px;
+    }
+  }
+}
+</style>
\ No newline at end of file
diff --git a/pages/commercialBI/components/manager/revenueTrends.vue b/pages/commercialBI/components/manager/revenueTrends.vue
new file mode 100644
index 0000000..df9e57a
--- /dev/null
+++ b/pages/commercialBI/components/manager/revenueTrends.vue
@@ -0,0 +1,102 @@
+<template>
+    <div class="revenueTrends">
+        <canvas class="trends" canvas-id="trends" id="trends"/>
+    </div>
+</template>
+
+<script>
+import uCharts from '@/components/u-charts.js';
+var uChartsInstance = {};
+export default {
+    name: "revenueTrends",
+    data() {
+        return {
+        }
+    },
+    props: {
+        data: {
+            type: Object,
+            default: () => {}
+        }
+    },
+    watch: {
+        data: {
+            handler(value) {
+                console.log('carDatawatch', value)
+                this.handleCarData(value)
+            }
+        }
+    },
+    methods: {
+        // 处理传入的数据
+        handleCarData(value) {
+            let res = value
+            this.drawCharts('trends', 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: "area",
+                context: ctx,
+                width: _this.width ,
+                height: 198,
+                categories: data.categories,
+                series: data.series,
+                animation: true,
+                rotate: false,
+                rotateLock: false,
+                background: "#FFFFFF",
+                color: ["#1E80FF"],
+                padding: [15, 15, 5, 5],
+                dataLabel: false,
+                enableScroll: false,
+                legend: {
+                    show: false,
+                    position: "bottom",
+                    lineHeight: 25,
+                    float: 'center'
+
+                },
+                xAxis: {
+                    disableGrid: true
+                },
+                yAxis: {
+                    splitNumber:4,
+                    showTitle:true,
+                    data:[
+                        {
+                            min:0,
+                            max:12,
+                            title:'单位: 千万',
+                            titleOffsetY:-5
+                        }
+                    ]
+                },
+                extra: {
+                    area: {
+                        type: "curve",
+                        opacity: 0.8,
+                        addLine: true,
+                        width: 2,
+                        gradient: true,
+                        activeType: "hollow"
+                    }
+                }
+            });
+        },
+    }
+}
+</script>
+
+<style scoped lang="scss">
+.revenueTrends{
+    width: 100%;
+    .trends{
+        width: calc(100vw - 32px);
+        height: 208px;
+    }
+}
+</style>
\ No newline at end of file
diff --git a/pages/commercialBI/formatPortrait.vue b/pages/commercialBI/formatPortrait.vue
index b181ecc..741cb87 100644
--- a/pages/commercialBI/formatPortrait.vue
+++ b/pages/commercialBI/formatPortrait.vue
@@ -1,23 +1,67 @@
 <template>
     <div class="main">
-        <header-top :bgUrl="bgUrl" :menu="menu" :bgColor="bgColor" :title="title" :labelList="labelList"/>
+        <header-top :bgUrl="bgUrl" :menu="menu" :bgColor="bgColor" :title="title" :labelList="labelList" :topBg="topBg"/>
+
+        <div class="charts">
+            <div class="chartsItem">
+                <p class="title">业态充盈度</p>
+                <filling-degree :data="fillDegreeList" />
+                <analyse />
+            </div>
+            <div class="chartsItem" style="margin-top: 32px">
+                <p class="title">品牌消费水平<text class="unit">(Top 5)</text></p>
+                <band-level :data="bandLevelList"/>
+                <analyse />
+            </div>
+            <div class="chartsItem" style="margin-top: 32px">
+                <p class="title">业态消费水平<text class="unit">(Top 5)</text></p>
+                <consumption-level :data="consumLevelList" />
+                <analyse />
+            </div>
+            <div class="chartsItem" style="margin-top: 32px">
+                <p class="title">品牌指数</p>
+                <div class="labelList">
+                    <div class="labelItem" v-for="(item,index) in brandLabelList" :key="index">
+                        <p class="name">{{item.name}}<text class="number">({{item.value}})</text></p>
+                    </div>
+                </div>
+                <band-number :data="brandInfoList"/>
+                <analyse />
+            </div>
+        </div>
     </div>
 </template>
 
 <script>
 import headerTop from "./components/headerTop.vue";
+import analyse from "./components/analyse.vue";
+import FillingDegree from "./components/format/fillingDegree.vue";
+import BandLevel from "./components/format/bandLevel.vue";
+import ConsumptionLevel from "./components/format/consumLevel.vue";
+import BandNumber from "./components/format/bandNumber.vue";
 
 export default {
     name: "businessPortrait",
-    components: {headerTop},
+    components: {BandNumber, ConsumptionLevel, BandLevel, FillingDegree, analyse, headerTop},
     data() {
         return {
+            topBg:'linear-gradient(180deg, #C6C1F0 0%, #CECBF3 100%);',//顶部组件的悬浮背景色
             labelList:['女性','高消费','喜爱奶茶','浙江','20-30岁','江苏'],//标签
             title:'业态品牌',//页面标题
             bgColor: '180deg, #459FFF 0%, #473AFF 100%',
             bgUrl: 'https://eshangtech.com/ShopICO/ahyd-BID/commercial/formatPortraitBg.svg',//背景图片路径
             time: '',//跳转携带的时间
             menu: {},//手机配置信息
+            fillDegreeList:[],//业态充盈度
+            bandLevelList:[],//品牌消费水平
+            consumLevelList:[],//业态消费水平
+            brandLabelList:[{name:'中式快餐',value:5},
+                {name:'省内品牌',value:3},
+                {name:'地方特色',value:15},
+                {name:'这是品类名称',value:5},
+                {name:'省内品牌',value:3},
+                {name:'地方特色',value:8}],//品牌指数标签列表
+            brandInfoList:[]//品牌指数列表
         }
     },
     onLoad(option) {
@@ -29,13 +73,126 @@ export default {
         uni.setStorageSync('phoneInfo', systemInfo)
         this.statusBarHeight = Number(systemInfo.statusBarHeight)
         this.menu = uni.getMenuButtonBoundingClientRect()
+        //业态充盈度
+        this.getFillDegreeList()
+        //品牌消费水平
+        this.getBandLevelList()
+        //业态消费水平
+        this.getConsumLevelList()
+        //品牌指数列表
+        this.getBrandInfoList()
+    },
+    methods:{
+        getFillDegreeList(){
+            let res = {
+                series: [
+                    {
+                        data: [{"name":"商超","value":27.6},
+                            {"name":"水果饮品","value":20.7},
+                            {"name":"餐饮","value":15.5},
+                            {"name":"小吃","value":11.9},
+                            {"name":"地方特产","value":8.4},
+                            {"name":"连锁品牌","value":7.2},
+                            {"name":"粽子","value":5.6},
+                            {"name":"箱包工艺","value":3.1}]
+                    }
+                ]
+            }
+            this.fillDegreeList = res
+        },
+        getBandLevelList(){
+            let res=[{name:'五芳斋',big:'14.8',normal:'41.7',small:'43.5'},
+                {name:'驿佰购',big:'44.1',normal:'31.7',small:'24.2'},
+                {name:'老娘舅',big:'15.2',normal:'70.1',small:'14.5'},
+                {name:'吉祥馄饨',big:'25.2',normal:'39.9',small:'34.7'}]
+            this.bandLevelList = res
+        },
+        getConsumLevelList(){
+            let res = {
+                categories:["商超","餐饮","水果饮品","小吃","连锁品牌"],
+                series: [
+                    {
+                        name: "高消费",
+                        textColor: "#FFFFFF",
+                        data: [35,36,31,33,13]
+                    },
+                    {
+                        name: "普通消费",
+                        textColor: "#FFFFFF",
+                        data: [18,27,21,24,6]
+                    },
+                    {
+                        name: "低消费",
+                        textColor: "#FFFFFF",
+                        data: [18,27,21,24,6]
+                    }
+                ]
+            }
+            this.consumLevelList = res
+        },
+        getBrandInfoList(){
+            let res = [{icon:'',name:'老娘舅',company:'老娘舅餐饮股份有限公司',time:'2019.03-2022.03',label:["中式快餐","30-40岁男性"],info:[9,8,8]},
+                {icon:'',name:'老乡鸡',company:'老乡鸡餐饮股份有限公司',time:'2019.03-2022.03',label:["中式快餐","30-40岁男性"],info:[9,9,9]},
+                {icon:'',name:'永和大王',company:'永和大王餐饮股份有限公司',time:'2019.03-2022.03',label:["中式快餐","30-40岁男性"],info:[8,8,8]}]
+            this.brandInfoList = res
+        }
     }
 }
 </script>
 
 <style scoped lang="scss">
 .main {
-  width: 100vw;
-  min-height: 100vh;
+    width: 100vw;
+    min-height: 100vh;
+    .charts{
+        width: 100%;
+        box-sizing: border-box;
+        padding: 28px 16px 24px;
+        background: #fff;
+        .chartsItem{
+            .title{
+                font-size: 17px;
+                font-family: PingFangSC-Semibold, PingFang SC;
+                font-weight: 600;
+                color: #160002;
+                line-height: 24px;
+                .unit{
+                    font-size: 14px;
+                    font-family: PingFangSC-Regular, PingFang SC;
+                    font-weight: 400;
+                    color: #786B6C;
+                    line-height: 20px;
+                    margin-left: 4px;
+                }
+            }
+            .labelList{
+                display: flex;
+                align-items: center;
+                flex-flow: wrap;
+                margin-top: 12px;
+                .labelItem{
+                    background: #EDF0F4;
+                    border-radius: 4px;
+                    padding:2px 6px;
+                    margin-right: 6px;
+                    margin-bottom: 6px;
+                    .name{
+                        font-size: 14px;
+                        font-family: PingFangSC-Regular, PingFang SC;
+                        font-weight: 400;
+                        color: #160002;
+                        line-height: 20px;
+                        .number{
+                            font-size: 14px;
+                            font-family: PingFangSC-Regular, PingFang SC;
+                            font-weight: 400;
+                            color: #A69E9F;
+                            line-height: 20px;
+                        }
+                    }
+                }
+            }
+        }
+    }
 }
 </style>
\ No newline at end of file
diff --git a/pages/commercialBI/guestPortrait.vue b/pages/commercialBI/guestPortrait.vue
index e0111c3..0bcd137 100644
--- a/pages/commercialBI/guestPortrait.vue
+++ b/pages/commercialBI/guestPortrait.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="main">
-      <header-top :bgUrl="bgUrl" :menu="menu" :bgColor="bgColor" :title="title" :labelList="labelList"/>
+      <header-top :bgUrl="bgUrl" :menu="menu" :topBg="topBg" :bgColor="bgColor" :title="title" :labelList="labelList"/>
 
       <div class="charts">
           <div class="chartsItem">
@@ -9,7 +9,22 @@
           </div>
           <div class="chartsItem" style="margin-top: 32px">
               <p class="title">客群分析</p>
-              <customer-second />
+              <customer-second :data="genderBubbleList" />
+              <analyse />
+          </div>
+          <div class="chartsItem" style="margin-top: 32px">
+              <p class="title">客群消费偏好</p>
+              <consum-prefer :data="consterPreferList" />
+              <analyse />
+          </div>
+          <div class="chartsItem" style="margin-top: 32px">
+              <p class="title">客群消费水平</p>
+              <consumption-level :data="consumptionLevelList"/>
+              <analyse />
+          </div>
+          <div class="chartsItem" style="margin-top: 32px">
+              <p class="title">业态偏好</p>
+              <business-type :data="businessTypeList"></business-type>
               <analyse />
           </div>
       </div>
@@ -21,17 +36,25 @@ import headerTop from "./components/headerTop.vue";
 import customerFirst from "./components/guest/customerFirst.vue";
 import customerSecond from "./components/guest/customerSecond.vue";
 import analyse from "./components/analyse.vue";
+import ConsumPrefer from "./components/guest/consumPrefer.vue";
+import ConsumptionLevel from "./components/guest/consumptionLevel.vue";
+import BusinessType from "./components/guest/businessType.vue";
 export default {
     name: "guestPortrait",
-    components:{analyse, headerTop,customerFirst,customerSecond},
+    components:{BusinessType, ConsumptionLevel, ConsumPrefer, analyse, headerTop,customerFirst,customerSecond},
     data() {
         return {
+            topBg:'linear-gradient(180deg, #A1D0C1 0%, #B1D9CD 100%);',//顶部组件的悬浮背景色
             labelList:['女性','高消费','喜爱奶茶','浙江','20-30岁','江苏'],//标签
             title:'客群画像',//页面标题
             bgColor:'180deg, #30C8ED 0%, #0B9353 100%',//标签背景颜色
             bgUrl:'https://eshangtech.com/ShopICO/ahyd-BID/commercial/guestPortraitBg.svg',//背景图片路径
             time:'',//跳转携带的时间
             menu:{},//手机配置信息
+            genderBubbleList:[],//男女的气泡图
+            consterPreferList:[],//客群消费偏好
+            consumptionLevelList:[],//客群消费水平
+            businessTypeList:[]//业态偏好
         }
     },
     onLoad(option){
@@ -43,6 +66,61 @@ export default {
         uni.setStorageSync('phoneInfo',systemInfo)
         this.statusBarHeight = Number(systemInfo.statusBarHeight)
         this.menu = uni.getMenuButtonBoundingClientRect()
+        //客群分析男女的气泡图
+        this.getGenderBubbleList()
+        //客群消费偏好
+        this.getConsterPreferList()
+        //客群消费水平
+        this.getConsumptionLevelList()
+        //业态偏好
+        this.getBusinessTypeList()
+    },
+    methods:{
+        //客群分析男女的气泡图
+        getGenderBubbleList(){
+            let res = [
+                {
+                    name: "男",
+                    data: [[25,60,60],[40,35,35]]
+                },
+                {
+                    name: "女",
+                    data: [[25,35,35],[35,15,15]]
+                }
+            ]
+            this.genderBubbleList = res
+        },
+        //客群消费偏好
+        getConsterPreferList(){
+            let res = {
+                categories: ['餐饮','商超','水果饮品','连锁品牌','粽子','小吃'],
+                series: [
+                    {name: "男", data: [90,110,165,195,187,172]},
+                    {name: "女", data: [190,210,105,35,27,102]}
+                ]
+            }
+            this.consterPreferList = res
+        },
+        //客群消费水平
+        getConsumptionLevelList(){
+            let res=[{name:'男',big:'14.8',normal:'41.7',small:'43.5'},
+                {name:'女',big:'44.1',normal:'31.7',small:'24.2'}]
+            this.consumptionLevelList = res
+        },
+        //业态偏好
+        getBusinessTypeList(){
+            let res=[
+                {
+                    data: [{name:"餐饮",value:35.6},
+                        {name:"小吃",value:22.5},
+                        {name:"水果饮品",value:17.3},
+                        {name:"粽子",value:15.2},
+                        {name:"商超",value:5.8},
+                        {name:"其他",value:3.6}]
+                }
+            ]
+            this.businessTypeList = res
+        }
     }
 }
 </script>
@@ -54,7 +132,7 @@ export default {
   .charts{
     width: 100%;
     box-sizing: border-box;
-    padding: 28px 16px 0;
+    padding: 28px 16px 24px;
     background: #fff;
     .chartsItem{
       .title{
diff --git a/pages/commercialBI/managePortrait.vue b/pages/commercialBI/managePortrait.vue
index 033dc92..94bc0c7 100644
--- a/pages/commercialBI/managePortrait.vue
+++ b/pages/commercialBI/managePortrait.vue
@@ -1,23 +1,186 @@
 <template>
     <div class="main">
-        <header-top :bgUrl="bgUrl" :menu="menu" :bgColor="bgColor" :title="title" :labelList="labelList"/>
+        <header-top :bgUrl="bgUrl" :menu="menu" :bgColor="bgColor" :title="title" :labelList="labelList" :topBg="topBg"/>
+
+        <div class="charts">
+            <div class="chartsItem">
+                <p class="title">营收分析</p>
+                <revenue-analysis :data="revenueList"/>
+            </div>
+            <div class="chartsItem" style="margin-top: 32px">
+                <p class="title">合同保底</p>
+                <contract-guarantee :data="contractList"/>
+            </div>
+            <div class="chartsItem" style="margin-top: 32px">
+                <p class="title">客流客单交易</p>
+                <contract-guarantee :data="orderTransaction"/>
+            </div>
+            <div class="chartsItem" style="margin-top: 32px">
+                <p class="title">同比分析</p>
+                <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>
+                <div class="subItem">
+                    <p class="title">营收同比</p>
+                    <div class="money">
+                        <div class="top">
+                            <image class="icon" src="/static/images/commercial/blueMoney.svg"></image>
+                            <p class="sumMoney">413,168.00</p>
+                        </div>
+                        <div class="bottom">
+                            <image class="icon" src=""></image>
+                            <p class="add">+43.00%</p>
+                            <p class="text">(相比去年同日)</p>
+                        </div>
+                    </div>
+                </div>
+                <div class="subItem">
+                    <p class="title" style="margin-top: 20px">营收对比</p>
+                    <money-compare :data="moneyCompareList"/>
+                </div>
+                <div class="subItem">
+                    <p class="title" style="margin-top: 20px">营收趋势</p>
+                    <revenue-trends :data="trendsList"/>
+                </div>
+            </div>
+            <div class="chartsItem" style="margin-top: 32px">
+                <p class="title" >营收占比</p>
+                <div class="progress">
+                    <div class="top">
+                        <div class="left">
+                            <text class="title">自营</text>
+                            <text class="value" style="margin-left: 4px">{{revenueType.own}}%</text>
+                        </div>
+                        <div class="right">
+                            <text class="value">{{revenueType.ectocyst}}%</text>
+                            <text class="title" style="margin-left: 4px">外包</text>
+                        </div>
+                    </div>
+                    <div class="bottom">
+                        <div class="first" :style="{width:revenueType.own+'%'}"></div>
+                        <div class="second" :style="{width:revenueType.ectocyst+'%'}"></div>
+                    </div>
+                </div>
+            </div>
+
+            <div class="chartsItem" style="margin-top: 32px">
+                <p class="title" >本月自营计划</p>
+                <view class="box">
+                    <view class="top">
+                        <view class="big">
+                            <image class="icon" src="https://eshangtech.com/ShopICO/ahyd-BID/index/thisMonth.svg"></image>
+                        </view>
+                        <view class="text">
+                            <view class="textTop">
+                                <view class="left">
+                                    <p class="number">{{plan.percentageMonth?plan.percentageMonth + '%':'-'}}</p>
+                                    <p v-if="plan.percentageMonth>=100" class="desc"><image class="success" src="/static/images/index/successMonth.svg"></image></p>
+                                </view>
+                                <view class="right">
+                                    <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">
+                                <div class="trans" :style="{width:plan.percentageMonth + '%'}"></div>
+                                <!--                  <div class=pro :style="{width:(100 - plan.percentageMonth)+ '%'}"></div>-->
+                                <!--                  <view class="trans" :style="{width: plan.percentageMonth + '%'}"></view>-->
+                                <!--                    <image class="img"  src="https://eshangtech.com/ShopICO/ahyd-BID/index/progress_orange.png"></image>-->
+                                <!--                  <div class=pro :style="{width:(100 - plan.percentageMonth)+ '%'}"></div>-->
+                            </div>
+                        </view>
+                    </view>
+                    <view class="bottom">
+                        <view class="success" style="margin-right: 39px">
+                            <p class="text">本月已完成<text class="unit">/元</text></p>
+                            <p class="money">{{plan.RevenueMonth_Amount?plan.RevenueMonth_Amount:'-'}}</p>
+                        </view>
+                        <view class="success">
+                            <p class="text">本月计划<text class="unit">/元</text></p>
+                            <p class="money">{{plan.BudgetMonth_Amount?plan.BudgetMonth_Amount:'-'}}</p>
+                        </view>
+                    </view>
+                </view>
+            </div>
+            <div class="chartsItem" style="margin-top: 32px">
+                <p class="title" >年度自营计划</p>
+                <view class="box">
+                    <view class="top">
+                        <view class="big">
+                            <image class="icon" src="https://eshangtech.com/ShopICO/ahyd-BID/index/planYear.svg"></image>
+                        </view>
+                        <view class="text">
+                            <view class="textTop">
+                                <view class="left">
+                                    <p class="number">{{plan.percentageYear?plan.percentageYear + '%':'-'}}</p>
+                                    <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">
+                                    <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">
+                                <div class="transYear" :style="{width:plan.percentageYear + '%'}"></div>
+                                <!--                  <image class="img" :style="{width: plan.percentageYear + '%'}"  src="https://eshangtech.com/ShopICO/ahyd-BID/index/progress_blue.png"></image>-->
+                                <!--                  <div class=pro :style="{width:(100 - plan.percentageYear)+ '%'}"></div>-->
+                            </div>
+                        </view>
+                    </view>
+                    <view class="bottom">
+                        <view class="success" style="margin-right: 39px">
+                            <p class="text">年度已完成<text class="unit">/元</text></p>
+                            <p class="money">{{plan.RevenueYear_Amount?plan.RevenueYear_Amount:'-'}}</p>
+                        </view>
+                        <view class="success">
+                            <p class="text">年度计划<text class="unit">/元</text></p>
+                            <p class="money">{{plan.BudgetYear_Amount?plan.BudgetYear_Amount:'-'}}</p>
+                        </view>
+                    </view>
+                </view>
+            </div>
+
+        </div>
     </div>
 </template>
 
 <script>
 import headerTop from "./components/headerTop.vue";
+import RevenueAnalysis from "./components/manager/revenueAnalysis.vue";
+import ContractGuarantee from "./components/manager/contractGuarantee.vue";
+import MoneyCompare from "./components/manager/moneyCompare.vue";
+import RevenueTrends from "./components/manager/revenueTrends.vue";
+import request from '@/util/index.js'
 
 export default {
     name: "businessPortrait",
-    components: {headerTop},
+    components: {RevenueTrends, MoneyCompare, ContractGuarantee, RevenueAnalysis, headerTop},
     data() {
         return {
+            topBg:'linear-gradient(180deg, #D9CCEF 0%, #DED3F2 100%);',
             labelList:['女性','高消费','喜爱奶茶','浙江','20-30岁','江苏'],//标签
+            tabList:[{name:'营收金额',value:0},{name:'客单量',value:1},{name:'客单均价',value:2}],//选项卡列表
+            selectTab:0,//当前选中
             title:'经营画像',//页面标题
             bgColor: '180deg, #996CFF 0%, #5D43F8 100%',
             bgUrl: 'https://eshangtech.com/ShopICO/ahyd-BID/commercial/managePortraitBg.svg',//背景图片路径
             time: '',//跳转携带的时间
             menu: {},//手机配置信息
+            revenueList:[],//营收分析
+            contractList:{},//合同保底
+            orderTransaction:{},//客流客单交易
+            moneyCompareList:[],//营收对比
+            trendsList:[],//营收趋势
+            revenueType:{},//营收占比
+            plan:{},//月度和年度接口的返回参数 一起的
+            monthAdd:'',//月每天的相对增加
+            yearAdd:'', // 年度计划增加的百分比
         }
     },
     onLoad(option) {
@@ -29,6 +192,108 @@ export default {
         uni.setStorageSync('phoneInfo', systemInfo)
         this.statusBarHeight = Number(systemInfo.statusBarHeight)
         this.menu = uni.getMenuButtonBoundingClientRect()
+        //营收分析
+        this.getRevenueList()
+        //合同保底
+        this.getContractList()
+        //客流客单交易
+        this.getOrderTransaction()
+        //营收对比
+        this.getMoneyCompareList()
+        //营收趋势
+        this.getTrendsList()
+        //营收占比
+        this.getRevenueType()
+        //月度计划、年度计划
+        this.monthYearPlan()
+    },
+    methods:{
+        getRevenueList(){
+            let res = []
+            this.revenueList = res
+        },
+        getContractList(){
+            let res = {
+                title: '完成率',
+                value: 67.1
+            }
+            this.contractList = res
+        },
+        getOrderTransaction(){
+            let res = {
+                title: '转化率',
+                value: 50.5
+            }
+            this.orderTransaction = res
+        },
+        //选项卡改变
+        handleChangeTab(value){
+            this.selectTab = value
+        },
+        getMoneyCompareList(){
+            let res = {
+                categories: ["1月","2月","3月","4月","5月","6月","7月","8月","9月","10月","11月","12月"],
+                series: [
+                    {
+                        name: "平日平均",
+                        data: [7,10,8,5,8,8,9,8,5,6,7,7]
+                    },
+                    {
+                        name: "周末平均",
+                        data: [5,8,8,7,6,6,6,8,7,7,6,7]
+                    },
+                    {
+                        name: "节假日平均",
+                        data: [5,10,4,4,7,8,6,5,5,6,10,7]
+                    }
+                ]
+            }
+            this.moneyCompareList = res
+        },
+        getTrendsList(){
+            let res={
+                categories: ["1月","2月","3月","4月","5月","6月","7月","8月","9月","10月","11月","12月"],
+                series:[{
+                    name: "",
+                    data: [3,4,5,4.8,5,4.2,4.5,5,5.5,5.7,8,9]
+                }]
+            }
+            this.trendsList = res
+        },
+        getRevenueType(){
+            let res={
+                own:'64.8',
+                ectocyst:'35.2'
+            }
+            this.revenueType = res
+        },
+        monthYearPlan(){
+            const monthDate= {
+                Province_Code:'340000',
+                Statistics_Date:this.time
+            }
+            request.$webGet('CommercialApi/Revenue/GetRevenueBudget',monthDate).then(res=>{
+                // 赋值给data中的这个对象 在请求完之后会进行统一的数据处理
+                this.plan = res.Result_Data
+                this.plan.percentageMonth = (res.Result_Data.RevenueMonth_Amount / res.Result_Data.BudgetMonth_Amount*100).toFixed(2)
+                // this.plan.percentageMonth = 80
+                this.plan.percentageYear = (res.Result_Data.RevenueYear_Amount / res.Result_Data.BudgetYear_Amount*100).toFixed(2)
+                let date = new Date(this.time)
+                let nowDay = date.getDate()
+                let day = this.$util.getThisMonthDay(this.time)
+                //一天应该的增长率
+                let oneDay = 100/day
+                // 到了当天的应该有的百分比
+                let thisDayShould= oneDay*nowDay
+                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)
+                this.plan.RevenueYear_Amount = this.$util.fmoney(res.Result_Data.RevenueYear_Amount)
+                this.plan.BudgetYear_Amount = this.$util.fmoney(res.Result_Data.BudgetYear_Amount)
+            })
+        }
     }
 }
 </script>
@@ -37,5 +302,338 @@ export default {
 .main {
   width: 100vw;
   min-height: 100vh;
+    .charts{
+        width: 100%;
+        box-sizing: border-box;
+        padding: 28px 16px 24px;
+        background: #fff;
+        .chartsItem{
+            .title{
+                font-size: 17px;
+                font-family: PingFangSC-Semibold, PingFang SC;
+                font-weight: 600;
+                color: #160002;
+                line-height: 24px;
+                .unit{
+                    font-size: 14px;
+                    font-family: PingFangSC-Regular, PingFang SC;
+                    font-weight: 400;
+                    color: #786B6C;
+                    line-height: 20px;
+                    margin-left: 4px;
+                }
+            }
+            .progress{
+                width:calc(100vw - 32px);
+                margin-top: 12px;
+                .top{
+                    display: flex;
+                    align-items: center;
+                    justify-content: space-between;
+                    margin-bottom: 8px;
+                    .left,.right{
+                        display: flex;
+                        align-items: center;
+                        .title{
+                            font-size: 14px;
+                            font-family: PingFangSC-Regular, PingFang SC;
+                            font-weight: 400;
+                            color: #160002;
+                            margin: 6px 0;
+                        }
+                        .value{
+                            font-size: 18px;
+                            font-family: DINAlternate-Bold, DINAlternate;
+                            font-weight: bold;
+                            color: #160002;
+                            margin: 6px 0;
+                        }
+                    }
+                }
+                .bottom{
+                    width: 100%;
+                    height: 14px;
+                    position: relative;
+                    .first{
+                        height: 100%;
+                        position: absolute;
+                        left: 0;top: 0;
+                        background: #1E80FF;
+                        border-radius: 2px 0  0  2px;
+                    }
+                    .first:after{
+                        position: absolute;
+                        content:'';
+                        right: 0;top: 0;
+                        background: #fff;
+                        width: 1px;
+                        height: 100%;
+                        z-index:111;
+                    }
+                    .second{
+                        height: 100%;
+                        position: absolute;
+                        right: 0;top: 0;
+                        background: #00C2FF;
+                        border-radius: 0 2px 2px 0  ;
+                    }
+                    .second:before{
+                        position: absolute;
+                        content:'';
+                        left: 0;top: 0;
+                        background: #fff;
+                        width: 1px;
+                        height: 100%;
+                        z-index:111;
+                    }
+                }
+            }
+            .box {
+                width: 100%;
+                padding: 12px 16px;
+                box-sizing: border-box;
+                border-radius: 8px;
+                background: #f5f2f2;
+                margin-top: 12px;
+                .top {
+                    width: 100%;
+                    display: flex;
+                    .big {
+                        width: 40px;
+                        height: 40px;
+                        background: #ffffff;
+                        border-radius: 8px;
+                        border: 1px solid #ebebeb;
+                        display: flex;
+                        justify-content: center;
+                        align-items: center;
+                        margin-right: 8px;
+                        .icon {
+                            width: 20px;
+                            height: 20px;
+                        }
+                    }
+                    .text {
+                        width: calc(100% - 60px);
+                        padding: 2px 0;
+                        .textTop{
+                            display: flex;
+                            align-items: center;
+                            justify-content: space-between;
+                            .left{
+                                display: flex;
+                                align-items: center;
+                                .number {
+                                    font-size: 36rpx;
+                                    font-family: DINAlternate-Bold, DINAlternate;
+                                    font-weight: bold;
+                                    color: #150002;
+                                    line-height: 40rpx;
+                                }
+                                .desc{
+                                    display: flex;
+                                    align-items: center;
+                                    margin-left: 8px;
+                                    font-size: 14px;
+                                    color: #FF7043;
+                                    .success{
+                                        width: 20px;
+                                        height: 20px;
+                                        margin-right: 4px;
+                                    }
+                                }
+                            }
+                            .right{
+                                flex: 1;
+                                display: flex;
+                                justify-content: flex-end;
+                                align-items: center;
+                                .comparePlan{
+                                    font-size: 24rpx;
+                                    font-family: PingFangSC-Regular, PingFang SC;
+                                    font-weight: 400;
+                                    color: #a69e9f;
+                                    line-height: 36rpx;
+                                    white-space: nowrap;
+                                }
+                                .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;
+                                    }
+                                }
+                            }
+                        }
+
+                        .progressPlan{
+                            width: 100%;
+                            height: 8px;
+                            border-radius: 5px;
+                            background: #fff;
+                            margin-top: 8px;
+                            position: relative;
+                            overflow: hidden;
+                            .trans{
+                                height: 8px;
+                                position: absolute;
+                                left: 0;top: 0;
+                                border-top-right-radius: 4px;
+                                border-bottom-right-radius: 4px;
+                                background: url("https://eshangtech.com/ShopICO/ahyd-BID/index/progress_orange.png")no-repeat 100% 100%;
+                            }
+                            .transYear{
+                                height: 8px;
+                                position: absolute;
+                                left: 0;top: 0;
+                                border-top-right-radius: 4px;
+                                border-bottom-right-radius: 4px;
+                                background: url("https://eshangtech.com/ShopICO/ahyd-BID/index/progress_blue.png")no-repeat 100% 100%;
+                            }
+                            //.img{
+                            //  width: 100%;
+                            //  height: 100%;
+                            //  position: absolute;
+                            //  top: 0;
+                            //  left: 0;
+                            //  z-index:1;
+                            //}
+                            //.pro{
+                            //  height: 100%;
+                            //  position: absolute;
+                            //  top: 0;right: 0;
+                            //  background: #fff;
+                            //  z-index:2;
+                            //}
+
+                        }
+                    }
+                }
+                .bottom {
+                    display: flex;
+                    margin-top: 16px;
+                    padding-left: 48px;
+                    .success {
+                        .text {
+                            font-size: 28rpx;
+                            font-family: PingFangSC-Regular, PingFang SC;
+                            font-weight: 400;
+                            color: #786b6c;
+                            line-height: 40rpx;
+                            margin-bottom: 2px;
+                            .unit {
+                                font-size: 28rpx;
+                                font-family: PingFangSC-Regular, PingFang SC;
+                                font-weight: 400;
+                                color: #a69e9f;
+                                line-height: 40rpx;
+                                margin-left: 2px;
+                            }
+                        }
+                        .money {
+                            font-size: 28rpx;
+                            font-family: DINAlternate-Bold, DINAlternate;
+                            font-weight: 600;
+                            color: #160002;
+                            line-height: 40rpx;
+                        }
+                    }
+                }
+            }
+            .tab{
+                width: 100%;
+                height: 38px;
+                background: #F2F1F1;
+                border-radius: 4px;
+                box-sizing: border-box;
+                padding:4px;
+                display: flex;
+                align-items: center;
+                margin-bottom: 12px;
+                margin-top: 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;
+                }
+            }
+            .subItem{
+                width:calc(100% - 32px);
+                .title{
+                    font-size: 14px;
+                    font-family: PingFangSC-Semibold, PingFang SC;
+                    font-weight: 600;
+                    color: #160002;
+                    line-height: 20px;
+                    margin-bottom: 8px;
+                }
+                .money{
+                    width:100%;
+                    padding: 18px 16px;
+                    background: #F7F7F7;
+                    .top{
+                        display: flex;
+                        align-items: center;
+                        margin-bottom: 4px;
+                        .icon{
+                            width: 20px;
+                            height: 20px;
+                            margin-right: 8px;
+                        }
+                        .sumMoney{
+                            font-size: 20px;
+                            font-family: DINAlternate-Bold, DINAlternate;
+                            font-weight: bold;
+                            color: #341D00;
+                            line-height: 24px;
+                        }
+                    }
+                    .bottom{
+                        display: flex;
+                        align-items: center;
+                        margin-left: 24px;
+                        .icon{
+                            width: 14px;
+                            height: 14px;
+                        }
+                        .add{
+                            font-size: 14px;
+                            font-family: PingFangSC-Regular, PingFang SC;
+                            font-weight: 400;
+                            color: #FA5151;
+                            line-height: 20px;
+                        }
+                        .text{
+                            font-size: 14px;
+                            font-family: PingFangSC-Regular, PingFang SC;
+                            font-weight: 400;
+                            color: #A69E9F;
+                            line-height: 20px;
+                        }
+                    }
+                }
+            }
+        }
+    }
 }
 </style>
\ No newline at end of file
diff --git a/pages/index/index.vue b/pages/index/index.vue
index 84f272e..ff8ffa0 100644
--- a/pages/index/index.vue
+++ b/pages/index/index.vue
@@ -36,7 +36,7 @@
         <view class="type">
           <view class="item">
             <view class="leftImg">
-              <image src="/static/images/index/business.svg"></image>
+              <image src="/static/images/index/average.svg"></image>
             </view>
             <view class="right">
               <p class="typeName">客单交易<text class="unit">/笔</text></p>
@@ -46,7 +46,7 @@
 
           <view class="item">
             <view class="leftImg">
-              <image src="/static/images/index/average.svg"></image>
+              <image src="/static/images/index/business.svg"></image>
             </view>
             <view class="right">
               <p class="typeName">客单均价<text class="unit">/元</text></p>
@@ -138,7 +138,7 @@
               <p class="money" v-else>{{ item.yesterValue }}</p>
               <view v-if="index === 0 || index === 2" class="active">
                 <image v-if="Number(item.add)!==0" class="addIcon" :src="Number(item.add)>0?'https://eshangtech.com/ShopICO/ahyd-BID/index/addIcon.svg':'https://eshangtech.com/ShopICO/ahyd-BID/index/reduce.svg'"></image>
-                <text v-if="Number(item.add)!==0" class="add">{{ item.add }}</text>
+                <text v-if="Number(item.add)!==0" class="add" :style="{color:Number(item.add)<0?'#07C160':'#FA5151'}">{{ item.add }}</text>
                 <text v-if="Number(item.add)!==0" class="yesterday">(相比昨日)</text>
               </view>
               <view class="otherBox" v-else>
@@ -234,7 +234,7 @@
         </div>
 
         <div class="thisMonth">
-          <p class="title">本月计划</p>
+          <p class="title">本月自营计划</p>
           <view class="box">
             <view class="top">
               <view class="big">
@@ -276,7 +276,7 @@
           </view>
         </div>
         <div class="thisYear" style="margin-top: 0px">
-          <p class="title">年度计划</p>
+          <p class="title">年度自营计划</p>
           <view class="box">
             <view class="top">
               <view class="big">
@@ -550,7 +550,6 @@ export default {
         // 赋值给data中的这个对象 在请求完之后会进行统一的数据处理
         this.plan = res.Result_Data
         this.plan.percentageMonth = (res.Result_Data.RevenueMonth_Amount / res.Result_Data.BudgetMonth_Amount*100).toFixed(2)
-        // this.plan.percentageMonth = 80
         this.plan.percentageYear = (res.Result_Data.RevenueYear_Amount / res.Result_Data.BudgetYear_Amount*100).toFixed(2)
         let date = new Date(this.lastDay)
         let nowDay = date.getDate()
diff --git a/static/images/commercial/add.svg b/static/images/commercial/add.svg
new file mode 100644
index 0000000..179702b
--- /dev/null
+++ b/static/images/commercial/add.svg
@@ -0,0 +1,32 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="20px" height="20px" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>图标/消费转化率@2x</title>
+    <defs>
+        <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-1">
+            <stop stop-color="#A86FFC" offset="0%"></stop>
+            <stop stop-color="#6A4CE4" offset="100%"></stop>
+        </linearGradient>
+        <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-2">
+            <stop stop-color="#A86FFC" offset="0%"></stop>
+            <stop stop-color="#6A4CE4" offset="100%"></stop>
+        </linearGradient>
+        <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-3">
+            <stop stop-color="#A86FFC" offset="0%"></stop>
+            <stop stop-color="#6A4CE4" offset="100%"></stop>
+        </linearGradient>
+        <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-4">
+            <stop stop-color="#A86FFC" offset="0%"></stop>
+            <stop stop-color="#6A4CE4" offset="100%"></stop>
+        </linearGradient>
+    </defs>
+    <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="商业BI-0330" transform="translate(-409.000000, -2937.000000)">
+            <g id="编组" transform="translate(409.000000, 2937.000000)">
+                <path d="M3,15 L5,15 C5.55228475,15 6,15.4477153 6,16 L6,17.5 C6,17.7761424 5.77614237,18 5.5,18 L2.5,18 C2.22385763,18 2,17.7761424 2,17.5 L2,16 C2,15.4477153 2.44771525,15 3,15 Z" id="矩形" fill="url(#linearGradient-1)" opacity="0.300000012"></path>
+                <path d="M9,13 L11,13 C11.5522847,13 12,13.4477153 12,14 L12,17.5 C12,17.7761424 11.7761424,18 11.5,18 L8.5,18 C8.22385763,18 8,17.7761424 8,17.5 L8,14 C8,13.4477153 8.44771525,13 9,13 Z" id="矩形备份" fill="url(#linearGradient-2)" opacity="0.300000012"></path>
+                <path d="M15,10 L17,10 C17.5522847,10 18,10.4477153 18,11 L18,17.5 C18,17.7761424 17.7761424,18 17.5,18 L14.5,18 C14.2238576,18 14,17.7761424 14,17.5 L14,11 C14,10.4477153 14.4477153,10 15,10 Z" id="矩形备份-2" fill="url(#linearGradient-3)" opacity="0.300000012"></path>
+                <path d="M17.5,1.5 C17.7761424,1.5 18,1.72385763 18,2 L18,5.94974747 C18,6.22588984 17.7761424,6.44974747 17.5,6.44974747 C17.3673918,6.44974747 17.2402148,6.39706905 17.1464466,6.30330086 L16.5858644,5.743 L12.3431458,9.98528137 C12.0142832,10.3141439 11.5993874,10.5045381 11.1709073,10.5564637 L11.0097321,10.5694451 L10.8481323,10.5694451 C10.3635452,10.549973 9.88468901,10.3552518 9.51471863,9.98528137 L7.39286438,7.863 L4.56497116,10.6923882 C4.17444687,11.0829124 3.54128189,11.0829124 3.1507576,10.6923882 L1.73654403,9.27817459 C1.34601974,8.8876503 1.34601974,8.25448532 1.73654403,7.86396103 L5.97918472,3.62132034 C6.39026292,3.21024214 6.9357681,3.01552089 7.47419817,3.03715658 L7.63537343,3.050138 C8.06385346,3.10206367 8.47874928,3.29245778 8.80761184,3.62132034 L10.9278644,5.742 L13.7568644,2.914 L13.1966991,2.35355339 C13.001437,2.15829124 13.001437,1.84170876 13.1966991,1.64644661 C13.2904673,1.55267842 13.4176443,1.5 13.5502525,1.5 L17.5,1.5 Z" id="路径" fill="url(#linearGradient-4)"></path>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/static/images/commercial/agreement.svg b/static/images/commercial/agreement.svg
new file mode 100644
index 0000000..2fef6db
--- /dev/null
+++ b/static/images/commercial/agreement.svg
@@ -0,0 +1,52 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="20px" height="20px" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>图标/消费转化率@2x</title>
+    <defs>
+        <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-1">
+            <stop stop-color="#9967F5" offset="0%"></stop>
+            <stop stop-color="#6449E2" offset="100%"></stop>
+        </linearGradient>
+        <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-2">
+            <stop stop-color="#A86FFC" offset="0%"></stop>
+            <stop stop-color="#6A4CE4" offset="100%"></stop>
+        </linearGradient>
+        <linearGradient x1="50%" y1="119.258354%" x2="50%" y2="3.061617e-15%" id="linearGradient-3">
+            <stop stop-color="#DAC0FF" offset="0%"></stop>
+            <stop stop-color="#F1E8FF" offset="100%"></stop>
+        </linearGradient>
+        <path d="M8.25,14.5 C7.83578644,14.5 7.5,14.1642136 7.5,13.75 C7.5,13.3357864 7.83578644,13 8.25,13 L10,13 C10.5522847,13 11,12.5522847 11,12 C11,11.4871642 10.6139598,11.0644928 10.1166211,11.0067277 L10,11 C8.61928813,11 7.5,9.88071187 7.5,8.5 C7.5,7.11928813 8.61928813,6 10,6 L11.75,6 C12.1642136,6 12.5,6.33578644 12.5,6.75 C12.5,7.16421356 12.1642136,7.5 11.75,7.5 L10,7.5 C9.44771525,7.5 9,7.94771525 9,8.5 C9,9.01283584 9.38604019,9.43550716 9.88337887,9.49327227 L10,9.5 C11.3807119,9.5 12.5,10.6192881 12.5,12 C12.5,13.3807119 11.3807119,14.5 10,14.5 L8.25,14.5 Z" id="path-4"></path>
+        <filter x="-140.0%" y="-58.8%" width="380.0%" height="264.7%" filterUnits="objectBoundingBox" id="filter-5">
+            <feOffset dx="0" dy="2" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
+            <feGaussianBlur stdDeviation="2" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
+            <feColorMatrix values="0 0 0 0 0.435294118   0 0 0 0 0.309803922   0 0 0 0 0.901960784  0 0 0 1 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
+        </filter>
+        <path d="M8.25,14.5 C7.83578644,14.5 7.5,14.1642136 7.5,13.75 C7.5,13.3357864 7.83578644,13 8.25,13 L10,13 C10.5522847,13 11,12.5522847 11,12 C11,11.4871642 10.6139598,11.0644928 10.1166211,11.0067277 L10,11 C8.61928813,11 7.5,9.88071187 7.5,8.5 C7.5,7.11928813 8.61928813,6 10,6 L11.75,6 C12.1642136,6 12.5,6.33578644 12.5,6.75 C12.5,7.16421356 12.1642136,7.5 11.75,7.5 L10,7.5 C9.44771525,7.5 9,7.94771525 9,8.5 C9,9.01283584 9.38604019,9.43550716 9.88337887,9.49327227 L10,9.5 C11.3807119,9.5 12.5,10.6192881 12.5,12 C12.5,13.3807119 11.3807119,14.5 10,14.5 L8.25,14.5 Z" id="path-6"></path>
+        <filter x="-140.0%" y="-58.8%" width="380.0%" height="264.7%" filterUnits="objectBoundingBox" id="filter-7">
+            <feOffset dx="0" dy="2" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
+            <feGaussianBlur stdDeviation="2" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
+            <feColorMatrix values="0 0 0 0 0.435294118   0 0 0 0 0.309803922   0 0 0 0 0.901960784  0 0 0 1 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
+        </filter>
+    </defs>
+    <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="商业BI-0330" transform="translate(-337.000000, -2937.000000)">
+            <g id="编组" transform="translate(337.000000, 2937.000000)">
+                <g>
+                    <circle id="椭圆形" stroke="url(#linearGradient-1)" stroke-width="1.5" cx="10" cy="10" r="9.25"></circle>
+                    <circle id="椭圆形备份" fill="url(#linearGradient-2)" cx="10" cy="10" r="7"></circle>
+                    <g id="形状结合">
+                        <use fill="black" fill-opacity="1" filter="url(#filter-5)" xlink:href="#path-4"></use>
+                        <use fill="url(#linearGradient-3)" fill-rule="evenodd" xlink:href="#path-4"></use>
+                    </g>
+                </g>
+                <g id="编组备份">
+                    <circle id="椭圆形" stroke="url(#linearGradient-1)" stroke-width="1.5" cx="10" cy="10" r="9.25"></circle>
+                    <circle id="椭圆形备份" fill="url(#linearGradient-2)" cx="10" cy="10" r="7"></circle>
+                    <g id="形状结合">
+                        <use fill="black" fill-opacity="1" filter="url(#filter-7)" xlink:href="#path-6"></use>
+                        <use fill="url(#linearGradient-3)" fill-rule="evenodd" xlink:href="#path-6"></use>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/static/images/commercial/bg_icon.svg b/static/images/commercial/bg_icon.svg
new file mode 100644
index 0000000..7c59a00
--- /dev/null
+++ b/static/images/commercial/bg_icon.svg
@@ -0,0 +1,25 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="82px" height="96px" viewBox="0 0 82 96" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>编组_59备份@2x</title>
+    <defs>
+        <rect id="path-1" x="0" y="0" width="82" height="96"></rect>
+        <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-3">
+            <stop stop-color="#4DB7DE" offset="0%"></stop>
+            <stop stop-color="#1E80FF" offset="100%"></stop>
+        </linearGradient>
+    </defs>
+    <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="商业BI-0330" transform="translate(-301.000000, -2977.000000)">
+            <g id="编组-59备份" transform="translate(301.000000, 2977.000000)">
+                <mask id="mask-2" fill="white">
+                    <use xlink:href="#path-1"></use>
+                </mask>
+                <g id="蒙版" opacity="0.5"></g>
+                <g opacity="0.0399999991" mask="url(#mask-2)">
+                    <path d="M35.8598722,0 L76.1401278,0 C78.5788659,5.87808294e-15 80.8844218,1.11239387 82.4021344,3.02131817 L107.571206,34.6780698 C110.096467,37.8542522 109.843883,42.4179559 106.98354,45.2960654 L61.6743405,90.8866884 C58.5598336,94.0205401 53.494538,94.0362222 50.3606863,90.9217152 C50.3489745,90.9100758 50.3372989,90.8984001 50.3256595,90.8866884 L5.01646001,45.2960654 C2.15611666,42.4179559 1.90353282,37.8542522 4.4287939,34.6780698 L29.5978656,3.02131817 C31.1155782,1.11239387 33.4211341,-3.99290317e-15 35.8598722,0 Z" id="矩形" fill="url(#linearGradient-3)"></path>
+                    <polyline id="路径-11" stroke="#FFFFFF" stroke-width="8" stroke-linecap="round" stroke-linejoin="round" points="40 40.2484472 56 56.3478261 72 40.2484472"></polyline>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/static/images/commercial/blueMoney.svg b/static/images/commercial/blueMoney.svg
new file mode 100644
index 0000000..85b46ad
--- /dev/null
+++ b/static/images/commercial/blueMoney.svg
@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="20px" height="20px" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>编组_2@2x</title>
+    <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="商业BI-0330" transform="translate(-221.000000, -2937.000000)">
+            <g id="编组-2" transform="translate(221.000000, 2937.000000)">
+                <circle id="椭圆形" fill="#1E80FF" cx="10" cy="10" r="10"></circle>
+                <path d="M11,3.5 C12.5187831,3.5 13.8937831,4.11560847 14.8890873,5.1109127 C15.8843915,6.10621694 16.5,7.48121694 16.5,9 C16.5,10.5187831 15.8843915,11.8937831 14.8890873,12.8890873 C13.8937831,13.8843915 12.5187831,14.5 11,14.5 C9.48121694,14.5 8.10621694,13.8843915 7.1109127,12.8890873 C6.11560847,11.8937831 5.5,10.5187831 5.5,9 C5.5,7.48121694 6.11560847,6.10621694 7.1109127,5.1109127 C8.10621694,4.11560847 9.48121694,3.5 11,3.5 Z" id="椭圆形备份-2" stroke="#FFFFFF" opacity="0.600000024"></path>
+                <path d="M9,5.5 C10.5187831,5.5 11.8937831,6.11560847 12.8890873,7.1109127 C13.8843915,8.10621694 14.5,9.48121694 14.5,11 C14.5,12.5187831 13.8843915,13.8937831 12.8890873,14.8890873 C11.8937831,15.8843915 10.5187831,16.5 9,16.5 C7.48121694,16.5 6.10621694,15.8843915 5.1109127,14.8890873 C4.11560847,13.8937831 3.5,12.5187831 3.5,11 C3.5,9.48121694 4.11560847,8.10621694 5.1109127,7.1109127 C6.10621694,6.11560847 7.48121694,5.5 9,5.5 Z" id="椭圆形" stroke="#FFFFFF" fill="#1E80FF"></path>
+                <g id="编组" transform="translate(8.000000, 7.000000)">
+                    <rect id="矩形" fill="#FFFFFF" x="0.782471686" y="0" width="1" height="1.2" rx="0.5"></rect>
+                    <path d="M1.28247169,5.38188601 C1.55861406,5.38188601 1.78247169,5.60574363 1.78247169,5.88188601 L1.78247169,6.7 C1.78247169,6.97614237 1.55861406,7.2 1.28247169,7.2 C1.00632931,7.2 0.782471686,6.97614237 0.782471686,6.7 L0.782471686,5.88188601 C0.782471686,5.60574363 1.00632931,5.38188601 1.28247169,5.38188601 Z" id="矩形备份" fill="#FFFFFF"></path>
+                    <path d="M1.98247169,1.30414286 C0.604504386,1.13221176 -0.0551195352,1.58814194 0.00359992336,2.6719334 C0.0916791112,4.2976206 2.1627393,3.33639041 2.1627393,4.77021624 C2.1627393,5.72610013 1.44302617,6.13165364 0.00359992336,5.98687677" id="路径-7" stroke="#FFFFFF" stroke-linecap="round" stroke-linejoin="round"></path>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/static/images/commercial/converRate.svg b/static/images/commercial/converRate.svg
new file mode 100644
index 0000000..1f5bbcf
--- /dev/null
+++ b/static/images/commercial/converRate.svg
@@ -0,0 +1,29 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="20px" height="20px" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>图标/消费转化率@2x</title>
+    <defs>
+        <linearGradient x1="57.1700625%" y1="127.070865%" x2="46.5755212%" y2="9.87985329%" id="linearGradient-1">
+            <stop stop-color="#FFD338" offset="0%"></stop>
+            <stop stop-color="#F38309" offset="100%"></stop>
+        </linearGradient>
+        <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-2">
+            <stop stop-color="#F38309" offset="0%"></stop>
+            <stop stop-color="#EBA644" offset="100%"></stop>
+        </linearGradient>
+    </defs>
+    <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="商业BI-0330" transform="translate(-445.000000, -2897.000000)">
+            <g id="图标/消费转化率" transform="translate(443.000000, 2897.000000)">
+                <g id="编组" transform="translate(2.000000, 0.000000)">
+                    <path d="M2,1 L6,1 L6,1 L8,3 L8,9 C8,9.55228475 7.55228475,10 7,10 L2,10 C1.44771525,10 1,9.55228475 1,9 L1,2 C1,1.44771525 1.44771525,1 2,1 Z" id="矩形" fill="url(#linearGradient-1)"></path>
+                    <path d="M13,10 L17,10 L17,10 L19,12 L19,18 C19,18.5522847 18.5522847,19 18,19 L13,19 C12.4477153,19 12,18.5522847 12,18 L12,11 C12,10.4477153 12.4477153,10 13,10 Z" id="矩形备份" fill="url(#linearGradient-1)"></path>
+                    <g transform="translate(-1.913290, 2.000000)">
+                        <path d="M4.42136692,11.890528 C5.78835196,14.3419744 8.40719443,16 11.4132895,16 M18.2224905,3.79850528 C16.8128808,1.51885644 14.2904591,0 11.4132895,0" id="形状" stroke="url(#linearGradient-2)" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
+                        <polygon id="三角形" fill="#F28812" transform="translate(18.385498, 4.197909) rotate(-219.000000) translate(-18.385498, -4.197909) " points="18.3854978 2.69790916 20.8854978 5.69790916 15.8854978 5.69790916"></polygon>
+                        <polygon id="三角形备份" fill="#F28812" transform="translate(3.500000, 11.080636) rotate(-40.000000) translate(-3.500000, -11.080636) " points="3.5 9.58063646 6 12.5806365 1 12.5806365"></polygon>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/static/images/commercial/money.svg b/static/images/commercial/money.svg
new file mode 100644
index 0000000..49c5b9f
--- /dev/null
+++ b/static/images/commercial/money.svg
@@ -0,0 +1,36 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="20px" height="20px" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>图标/消费转化率@2x</title>
+    <defs>
+        <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-1">
+            <stop stop-color="#F38309" offset="0%"></stop>
+            <stop stop-color="#EBA644" offset="100%"></stop>
+        </linearGradient>
+        <linearGradient x1="61.8525524%" y1="127.070865%" x2="44.3391269%" y2="9.87985329%" id="linearGradient-2">
+            <stop stop-color="#FFD338" offset="0%"></stop>
+            <stop stop-color="#F38309" offset="100%"></stop>
+        </linearGradient>
+        <linearGradient x1="50%" y1="119.258354%" x2="50%" y2="3.061617e-15%" id="linearGradient-3">
+            <stop stop-color="#FEF199" offset="0%"></stop>
+            <stop stop-color="#FFF2E2" offset="100%"></stop>
+        </linearGradient>
+        <path d="M8.25,14.5 C7.83578644,14.5 7.5,14.1642136 7.5,13.75 C7.5,13.3357864 7.83578644,13 8.25,13 L10,13 C10.5522847,13 11,12.5522847 11,12 C11,11.4871642 10.6139598,11.0644928 10.1166211,11.0067277 L10,11 C8.61928813,11 7.5,9.88071187 7.5,8.5 C7.5,7.11928813 8.61928813,6 10,6 L11.75,6 C12.1642136,6 12.5,6.33578644 12.5,6.75 C12.5,7.16421356 12.1642136,7.5 11.75,7.5 L10,7.5 C9.44771525,7.5 9,7.94771525 9,8.5 C9,9.01283584 9.38604019,9.43550716 9.88337887,9.49327227 L10,9.5 C11.3807119,9.5 12.5,10.6192881 12.5,12 C12.5,13.3807119 11.3807119,14.5 10,14.5 L8.25,14.5 Z" id="path-4"></path>
+        <filter x="-140.0%" y="-58.8%" width="380.0%" height="264.7%" filterUnits="objectBoundingBox" id="filter-5">
+            <feOffset dx="0" dy="2" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
+            <feGaussianBlur stdDeviation="2" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
+            <feColorMatrix values="0 0 0 0 1   0 0 0 0 0.525862069   0 0 0 0 0  0 0 0 1 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
+        </filter>
+    </defs>
+    <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="商业BI-0330" transform="translate(-405.000000, -2897.000000)">
+            <g id="编组" transform="translate(405.000000, 2897.000000)">
+                <circle id="椭圆形" stroke="url(#linearGradient-1)" stroke-width="1.5" cx="10" cy="10" r="9.25"></circle>
+                <circle id="椭圆形备份" fill="url(#linearGradient-2)" cx="10" cy="10" r="7"></circle>
+                <g id="形状结合">
+                    <use fill="black" fill-opacity="1" filter="url(#filter-5)" xlink:href="#path-4"></use>
+                    <use fill="url(#linearGradient-3)" fill-rule="evenodd" xlink:href="#path-4"></use>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/static/images/commercial/overShop.svg b/static/images/commercial/overShop.svg
new file mode 100644
index 0000000..ce89b16
--- /dev/null
+++ b/static/images/commercial/overShop.svg
@@ -0,0 +1,28 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="20px" height="20px" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>图标/消费转化率@2x</title>
+    <defs>
+        <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-1">
+            <stop stop-color="#A86FFC" offset="0%"></stop>
+            <stop stop-color="#6A4CE4" offset="100%"></stop>
+        </linearGradient>
+        <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-2">
+            <stop stop-color="#A86FFC" offset="0%"></stop>
+            <stop stop-color="#6A4CE4" offset="100%"></stop>
+        </linearGradient>
+        <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-3">
+            <stop stop-color="#A86FFC" offset="0%"></stop>
+            <stop stop-color="#6A4CE4" offset="100%"></stop>
+        </linearGradient>
+    </defs>
+    <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="商业BI-0330" transform="translate(-445.000000, -2937.000000)">
+            <g id="编组" transform="translate(445.000000, 2937.000000)">
+                <path d="M14.4875311,1.5 C15.7432903,1.5 16.7612842,2.51799394 16.7612842,3.77375311 C16.7612842,3.84930938 16.7575181,3.9248187 16.75,4 L16.7251241,4.2487593 C16.6180987,5.31901285 15.8465048,6.17553007 14.8441535,6.42571712 C13.6182119,7.22828176 13.0344538,8.35975265 13.0014827,9.99833765 L6.99852613,9.99847591 C6.96084774,8.11587169 6.19967173,6.88452951 4.59042295,6.08885862 C4.52202797,6.05504166 4.46454767,6.00229261 4.41560689,5.9348485 C3.85683453,5.47583427 3.5,4.77958872 3.5,4 C3.5,2.61928813 4.61928813,1.5 6,1.5 L14.4875311,1.5 Z" id="形状结合" fill="url(#linearGradient-1)" opacity="0.300000012"></path>
+                <rect id="矩形" fill="url(#linearGradient-2)" x="2" y="1.5" width="16" height="2" rx="1"></rect>
+                <path d="M14,10 C15.3807119,10 16.5,11.1192881 16.5,12.5 C16.5,13.3475614 16.0782276,14.0966126 15.4331201,14.5487164 C15.4021888,14.589128 15.3636501,14.6214207 15.3179927,14.6454332 C13.7270223,15.4821685 13,16.5775837 13,18.5 L7,18.5 C7,16.5332335 6.24166941,15.4052947 4.59042295,14.5888586 C4.52202797,14.5550417 4.46454767,14.5022926 4.41560689,14.4348485 C3.85683453,13.9758343 3.5,13.2795887 3.5,12.5 C3.5,11.1192881 4.61928813,10 6,10 L14,10 Z" id="形状结合" fill="url(#linearGradient-3)" transform="translate(10.000000, 14.250000) scale(1, -1) translate(-10.000000, -14.250000) "></path>
+                <rect id="矩形" fill="url(#linearGradient-2)" transform="translate(10.000000, 17.500000) scale(1, -1) translate(-10.000000, -17.500000) " x="2" y="16.5" width="16" height="2" rx="1"></rect>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/static/images/commercial/shop.svg b/static/images/commercial/shop.svg
new file mode 100644
index 0000000..5763b17
--- /dev/null
+++ b/static/images/commercial/shop.svg
@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>图标/男@2x</title>
+    <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="商业BI-0330" transform="translate(-169.000000, -2987.000000)" fill-rule="nonzero">
+            <g id="shop" transform="translate(169.000000, 2987.000000)">
+                <rect id="矩形" fill="#000000" opacity="0" x="0" y="0" width="16" height="16"></rect>
+                <path d="M13.78125,4.2515625 L13.78125,2.25 C13.78125,1.9734375 13.5578125,1.75 13.28125,1.75 L2.71875,1.75 C2.4421875,1.75 2.21875,1.9734375 2.21875,2.25 L2.21875,4.2515625 C1.9578125,4.2671875 1.75,4.484375 1.75,4.75 L1.75,6.8078125 C1.75,7.1890625 1.825,7.559375 1.975,7.9078125 C2.0421875,8.0671875 2.125,8.2171875 2.21875,8.359375 L2.21875,13.75 C2.21875,14.025 2.4421875,14.25 2.71875,14.25 L13.28125,14.25 C13.5578125,14.25 13.78125,14.0265625 13.78125,13.75 L13.78125,8.359375 C13.8765625,8.2171875 13.9578125,8.065625 14.025,7.9078125 C14.1734375,7.559375 14.25,7.1890625 14.25,6.8078125 L14.25,4.75 C14.25,4.484375 14.0421875,4.2671875 13.78125,4.2515625 Z M3.34375,2.875 L12.65625,2.875 L12.65625,4.25 L3.34375,4.25 L3.34375,2.875 Z M9,13.1265625 L7,13.1265625 L7,11.5 L9,11.5 L9,13.1265625 Z M12.65625,13.1265625 L10,13.1265625 L10,11 C10,10.7234375 9.7765625,10.5 9.5,10.5 L6.5,10.5 C6.2234375,10.5 6,10.7234375 6,11 L6,13.1265625 L3.34375,13.1265625 L3.34375,9.3421875 C3.3890625,9.3640625 3.4359375,9.3859375 3.484375,9.4046875 C3.8328125,9.5515625 4.203125,9.625 4.584375,9.625 C4.965625,9.625 5.334375,9.5515625 5.684375,9.4046875 C5.9,9.3140625 6.103125,9.1984375 6.2890625,9.059375 C6.2921875,9.0578125 6.2953125,9.0578125 6.2984375,9.059375 C6.484375,9.1984375 6.6859375,9.3140625 6.903125,9.4046875 C7.2515625,9.5515625 7.621875,9.625 8.003125,9.625 C8.384375,9.625 8.753125,9.5515625 9.103125,9.4046875 C9.31875,9.3140625 9.521875,9.1984375 9.7078125,9.059375 C9.7109375,9.0578125 9.7140625,9.0578125 9.7171875,9.059375 C9.903125,9.1984375 10.1046875,9.3140625 10.321875,9.4046875 C10.6703125,9.5515625 11.040625,9.625 11.421875,9.625 C11.803125,9.625 12.171875,9.5515625 12.521875,9.4046875 C12.56875,9.384375 12.615625,9.3640625 12.6625,9.3421875 L12.6625,13.1265625 L12.65625,13.1265625 Z M13.125,6.8078125 C13.125,7.7421875 12.359375,8.5 11.4171875,8.5 C10.7796875,8.5 10.2234375,8.1546875 9.9296875,7.6421875 C9.884375,7.5640625 9.803125,7.515625 9.7125,7.515625 L9.703125,7.515625 C9.6140625,7.515625 9.53125,7.5640625 9.4859375,7.6421875 C9.19375,8.1546875 8.6375,8.5 8,8.5 C7.3640625,8.5 6.809375,8.15625 6.515625,7.6453125 C6.46875,7.565625 6.384375,7.515625 6.2921875,7.515625 C6.2,7.515625 6.1140625,7.565625 6.06875,7.6453125 C5.7734375,8.15625 5.21875,8.5 4.5828125,8.5 C3.640625,8.5 2.875,7.7421875 2.875,6.8078125 L2.875,5.3828125 C2.875,5.378125 2.878125,5.375 2.8828125,5.375 L13.1171875,5.375 C13.121875,5.375 13.125,5.378125 13.125,5.3828125 L13.125,6.8078125 L13.125,6.8078125 Z" id="形状" fill="#A69E9F"></path>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/static/images/commercial/shopNumber.svg b/static/images/commercial/shopNumber.svg
new file mode 100644
index 0000000..72a12bd
--- /dev/null
+++ b/static/images/commercial/shopNumber.svg
@@ -0,0 +1,36 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="20px" height="20px" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>图标/消费转化率@2x</title>
+    <defs>
+        <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-1">
+            <stop stop-color="#A86FFC" offset="0%"></stop>
+            <stop stop-color="#6A4CE4" offset="100%"></stop>
+        </linearGradient>
+        <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-2">
+            <stop stop-color="#A86FFC" offset="0%"></stop>
+            <stop stop-color="#6A4CE4" offset="100%"></stop>
+        </linearGradient>
+        <linearGradient x1="50%" y1="0%" x2="50%" y2="226.681913%" id="linearGradient-3">
+            <stop stop-color="#A86FFC" offset="0%"></stop>
+            <stop stop-color="#6A4CE4" offset="100%"></stop>
+        </linearGradient>
+        <linearGradient x1="50%" y1="119.258354%" x2="50%" y2="3.061617e-15%" id="linearGradient-4">
+            <stop stop-color="#F5EEFF" offset="0%"></stop>
+            <stop stop-color="#F1E8FF" offset="100%"></stop>
+        </linearGradient>
+    </defs>
+    <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="商业BI-0330" transform="translate(-373.000000, -2937.000000)">
+            <g id="编组" transform="translate(373.000000, 2937.000000)">
+                <path d="M1.5,8.5 L18.5,8.5 L18.5,17.5 C18.5,18.0522847 18.0522847,18.5 17.5,18.5 L2.5,18.5 C1.94771525,18.5 1.5,18.0522847 1.5,17.5 L1.5,8.5 L1.5,8.5 Z" id="矩形" fill="url(#linearGradient-1)" opacity="0.300000012"></path>
+                <path d="M10,12.5 C11.1045695,12.5 12,13.3954305 12,14.5 L12,18.5 L12,18.5 L8,18.5 L8,14.5 C8,13.3954305 8.8954305,12.5 10,12.5 Z" id="矩形" fill="url(#linearGradient-2)"></path>
+                <path d="M5.54367406,1.5 L14.4563259,1.5 C15.1408569,1.5 15.7778374,1.85009389 16.1447516,2.42798373 L20,8.5 L20,8.5 L0,8.5 L3.85524843,2.42798373 C4.22216261,1.85009389 4.85914306,1.5 5.54367406,1.5 Z" id="矩形" fill="url(#linearGradient-3)"></path>
+                <path d="M0,8.5 L20,8.5 L20,10 C20,10.2761424 19.7761424,10.5 19.5,10.5 L0.5,10.5 C0.223857625,10.5 3.38176876e-17,10.2761424 0,10 L0,8.5 L0,8.5 Z" id="矩形" fill="#7150E7"></path>
+                <rect id="矩形" fill="#F0E6FF" x="4" y="8.5" width="4" height="2"></rect>
+                <rect id="矩形备份" fill="#F0E6FF" x="12" y="8.5" width="4" height="2"></rect>
+                <polygon id="矩形备份-2" fill="url(#linearGradient-4)" points="7 1.5 9 1.5 8 8.5 4 8.5"></polygon>
+                <polygon id="矩形备份-3" fill="url(#linearGradient-4)" transform="translate(13.500000, 5.000000) scale(-1, 1) translate(-13.500000, -5.000000) " points="14 1.5 16 1.5 15 8.5 11 8.5"></polygon>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/static/images/commercial/time.svg b/static/images/commercial/time.svg
new file mode 100644
index 0000000..3a4509a
--- /dev/null
+++ b/static/images/commercial/time.svg
@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>图标/男@2x</title>
+    <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="商业BI-0330" transform="translate(-193.000000, -2987.000000)" fill-rule="nonzero">
+            <g id="time-circle" transform="translate(193.000000, 2987.000000)">
+                <rect id="矩形" fill="#000000" opacity="0" x="0" y="0" width="16" height="16"></rect>
+                <path d="M8,1 C4.134375,1 1,4.134375 1,8 C1,11.865625 4.134375,15 8,15 C11.865625,15 15,11.865625 15,8 C15,4.134375 11.865625,1 8,1 Z M8,13.8125 C4.790625,13.8125 2.1875,11.209375 2.1875,8 C2.1875,4.790625 4.790625,2.1875 8,2.1875 C11.209375,2.1875 13.8125,4.790625 13.8125,8 C13.8125,11.209375 11.209375,13.8125 8,13.8125 Z M10.7296875,9.978125 L8.5015625,8.3671875 L8.5015625,4.5 C8.5015625,4.43125 8.4453125,4.375 8.3765625,4.375 L7.625,4.375 C7.55625,4.375 7.5,4.43125 7.5,4.5 L7.5,8.803125 C7.5,8.84375 7.51875,8.88125 7.5515625,8.9046875 L10.1359375,10.7890625 C10.1921875,10.8296875 10.2703125,10.8171875 10.3109375,10.7625 L10.7578125,10.153125 C10.7984375,10.0953125 10.7859375,10.0171875 10.7296875,9.978125 L10.7296875,9.978125 Z" id="形状" fill="#A69E9F"></path>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file