diff --git a/src/assets/images/flow-box.png b/src/assets/images/flow-box.png
new file mode 100644
index 0000000..18d9d3f
Binary files /dev/null and b/src/assets/images/flow-box.png differ
diff --git a/src/assets/images/line-icon.png b/src/assets/images/line-icon.png
new file mode 100644
index 0000000..9a759ce
Binary files /dev/null and b/src/assets/images/line-icon.png differ
diff --git a/src/assets/images/paizi.png b/src/assets/images/paizi.png
new file mode 100644
index 0000000..7db7e21
Binary files /dev/null and b/src/assets/images/paizi.png differ
diff --git a/src/assets/images/people-icon.png b/src/assets/images/people-icon.png
new file mode 100644
index 0000000..e7d9b10
Binary files /dev/null and b/src/assets/images/people-icon.png differ
diff --git a/src/assets/images/pie-icon.png b/src/assets/images/pie-icon.png
new file mode 100644
index 0000000..e3edee9
Binary files /dev/null and b/src/assets/images/pie-icon.png differ
diff --git a/src/assets/images/rect-icon1.png b/src/assets/images/rect-icon1.png
new file mode 100644
index 0000000..2367003
Binary files /dev/null and b/src/assets/images/rect-icon1.png differ
diff --git a/src/assets/images/rect-icon2.png b/src/assets/images/rect-icon2.png
new file mode 100644
index 0000000..aa79ded
Binary files /dev/null and b/src/assets/images/rect-icon2.png differ
diff --git a/src/assets/images/rect-icon3.png b/src/assets/images/rect-icon3.png
new file mode 100644
index 0000000..588f62f
Binary files /dev/null and b/src/assets/images/rect-icon3.png differ
diff --git a/src/assets/images/stat-icon.png b/src/assets/images/stat-icon.png
new file mode 100644
index 0000000..95d7de3
Binary files /dev/null and b/src/assets/images/stat-icon.png differ
diff --git a/src/view/index.vue b/src/view/index.vue
index 36e1771..2163bdf 100644
--- a/src/view/index.vue
+++ b/src/view/index.vue
@@ -6,31 +6,84 @@
             <div class="business-hall">
                 <div class="title">
                     <!-- 45.4% -->
-                    <p class='titleText'text='营业厅时长' style="font-family: 'maleGod'">营业厅时长</p>
+                    <p class='titleText' text='营业厅时长' style="font-family:maleGod">营业厅时长</p>
 
                 </div>
                 <!-- 两个小版块 -->
                 <div class="hall-box">
-                    <div class="item">
-                        <p class="font">平均办理时长</p>
-                        <p class="hall-time" style="color:#2e81a2">49分钟33秒</p>
+                    <div class="item" v-for="(item, i) in hallList" :key="i">
+                        <p class="font">{{ item.font }}</p>
+                        <p :class="'hall-time' + i">{{ item.time }}</p>
                     </div>
-                    <div class="item">
-                        <p class="font">平均等待时长</p>
-                        <p class="hall-time" style="color:#9c9060">05分钟33秒</p>
+                </div>
+                <!-- 图表内容样式 -->
+                <div class="hall-line">
+                    <div class="hall-title">
+                        <div>
+                            <span style="font-family:'maleGod'" :text="s" v-for="(s, i) in hallTitle"
+                                :class="'span' + i">
+                                {{ s }}
+                            </span>
+                        </div>
+                        <div class="hall-icon">
+                            <span></span>
+                            <span></span>
+                        </div>
                     </div>
+                    <div class="chart-title">
+                        <span v-for="(s, i) in hallLineList">
+                            {{ s }}
+                        </span>
+                    </div>
+
+                </div>
+                <!-- 图表样式 -->
+                <div class="hall-chart" ref="hallChart">
+
                 </div>
             </div>
             <!-- 客流量 -->
             <div class="passenger-flow">
                 <div class="title">
-                    <p class='titleText'text='客流量' style="font-family: 'maleGod'">客流量</p>
+                    <p class='titleText' text='客流量' style="font-family:maleGod">客流量</p>
+                </div>
+                <!-- 客流量板块内容 -->
+                <div class="flow-box">
+                    <div class="flow-left">
+                        <p class="flow-total">总客流量</p>
+                        <span class="flow-value">6587次</span>
+                    </div>
+                    <div class="flow-right">
+                        <ul>
+                            <li class="flow-item" v-for="(val, i) in flowList">
+                                <span :class="'up' + i"><i :class="'rect'+i"></i>{{ val.value }}</span>
+                                <span>{{ val.text }}</span>
+                            </li>
+                        </ul>
+
+                    </div>
+                </div>
+                <!-- 图表切换 -->
+                <div class="chart-title">
+                    <span v-for="(s, i) in hallLineList">
+                        {{ s }}
+                    </span>
+                </div>
+                <div class="flow-chart" ref="flowChart">
+
                 </div>
             </div>
             <!-- 厅内统计 -->
             <div class='hall-statistics'>
                 <div class="title">
-                    <p class='titleText'text='厅内统计' style="font-family: 'maleGod'">厅内统计</p>
+                    <p class='titleText' text='厅内统计' style="font-family:maleGod">厅内统计</p>
+                </div>
+                <div class="stat">
+                    <div v-for="(o, i) in statList" :key="i" class="stat-item">
+                        <section :class="'img' + i"></section>
+                        <p>{{ o.name }}</p>
+                        <p class="stat-num">{{ o.num }}</p>
+                    </div>
                 </div>
             </div>
         </div>
@@ -39,17 +92,17 @@
             <!-- 缴费情况 -->
             <div class="payment">
                 <div class="title">
-                   <p  class='titleText'text='缴费情况' style="font-family: 'maleGod'">缴费情况</p>
+                    <p class='titleText' text='缴费情况' style="font-family:maleGod">缴费情况</p>
                 </div>
                 <div class="paymentContent">
-                    <div class="paymentList" v-for="(item,index) in paymentList">
+                    <div class="paymentList" v-for="(item, index) in paymentList">
                         <div class="listOne">
-                            <img src="../assets/images/paymentYuan.png" style="width:18px;height:18px"/>
-                        <div>{{item.count}}</div>
+                            <img src="../assets/images/paymentYuan.png" style="width:18px;height:18px" />
+                            <div>{{ item.count }}</div>
                         </div>
                         <div>
-                            <div>{{item.name}}</div>
-                           <div>{{item.per}}</div>
+                            <div>{{ item.name }}</div>
+                            <div>{{ item.per }}</div>
                         </div>
                     </div>
                 </div>
@@ -57,13 +110,13 @@
             <!-- 业务受理 -->
             <div class="business-acceptance">
                 <div class="title">
-                    <p  class='titleText'text='业务受理' style="font-family: 'maleGod'">业务受理</p>
+                    <p class='titleText' text='业务受理' style="font-family: maleGod">业务受理</p>
                 </div>
             </div>
             <!-- 服务情况 -->
             <div class="service">
                 <div class="title">
-                    <p  class='titleText'text='服务情况' style="font-family: 'maleGod'">服务情况</p>
+                    <p class='titleText' text='服务情况' style="font-family: maleGod">服务情况</p>
                 </div>
             </div>
         </div>
@@ -72,32 +125,325 @@
 
 <script>
 export default {
-name:'index',
-data(){
-    return{
-        paymentList:[
-            {
-                count:'9786笔',
-                name:'环比',
-                per:'88.33%',
-                color:'rgb(29,150,213)'
-        },
-        {
-                count:'144.53万元',
-                name:'环比',
-                per:'86.24%',
-                color:'rgb(244,214,45)'
+    name: 'index',
+    data() {
+        return {
+            paymentList: [
+                {
+                    count: '9786笔',
+                    name: '环比',
+                    per: '88.33%',
+                    color: 'rgb(29,150,213)'
+                },
+                {
+                    count: '144.53万元',
+                    name: '环比',
+                    per: '86.24%',
+                    color: 'rgb(244,214,45)'
+                }
+            ],
+            hallList: [
+                {
+                    font: '平均办理时长',
+                    time: '49分钟33秒'
+                },
+                {
+                    font: '平均等待时长',
+                    time: '05分钟33秒'
+                }
+            ],
+            hallTitle: ['平均办理时长', '平均等待时长'],
+            hallLineList: ['人员', '趋势', '排序', '排名'],
+            flowList: [
+                {
+                    text: '峰值',
+                    value: '115人次'
+                },
+                {
+                    text: '谷值',
+                    value: '1人次'
+                },
+                {
+                    text: '均值',
+                    value: '26人次'
+                }
+            ],
+            flowChartList: [{
+                name: '峰值',
+                data: [8, 12, 11, 12]
+            }, {
+                name: '谷值',
+                data: [20, 24, 22, 24]
+            }, {
+                name: '均值',
+                data: [32, 36, 33, 36]
+            }],
+            statList: [
+                {
+                    name: '设备数(台)',
+                    num: 63,
+                },
+                {
+                    name: '员工(人)',
+                    num: 23
+                }, {
+                    name: '电子工牌(个)',
+                    num: 63
+                }
+            ]
         }
-        ]
-    }
-},
-mounted(){
-
     },
     mounted() {
-
+        this.drawHallChart()
+        this.drawFlowChart()
     },
     methods: {
+        // 客户临厅时长的图表
+        drawHallChart() {
+            let myChart = this.$echarts.getInstanceByDom(this.$refs.hallChart)
+            if (myChart == null) {
+                myChart = this.$echarts.init(this.$refs.hallChart)
+            }
+            let option = {
+                grid: {
+                    top: "20%",
+                    left: "8%",
+                    right: "2%",
+                    bottom: "15%",
+                },
+                xAxis: [
+                    {
+                        type: 'category',
+                        axisLine: {
+                            show: true,
+                            lineStyle: {
+                                color: '#20668d',
+                            }
+                        },
+                        splitArea: {
+                            // show: true,
+                            color: '#f00',
+                            lineStyle: {
+                                color: '#f00',
+                            },
+                        },
+                        axisTick: {
+                            show: false
+                        },
+                        splitLine: {
+                            show: false,
+                        },
+                        axisLabel: {
+                            textStyle: {
+                                color: '#fff'
+                            },
+                            // margin: 10,
+                        },
+                        // 两边留白
+                        boundaryGap: true,
+                        data: ['周欢', '唐颖', '刘梦颖'],
+                    },
+                ],
+                yAxis: [
+                    {
+                        type: 'value',
+                        name: '分钟',
+                        nameTextStyle: {
+                            fontSize: 11,
+                            color: '#d8d4d7',
+                            padding: [10, 35, 0, 0],
+                        },
+
+                        // min: 0,
+                        // max: 140,
+                        splitNumber: 4,
+                        splitLine: {
+                            show: true,
+                            lineStyle: {
+                                color: "rgba(86,183,232,0.2)",
+                                type: 'dashed'
+                            },
+                        },
+                        axisLine: {
+                            show: false,
+                        },
+                        axisLabel: {
+                            show: true,
+                            // margin: 20,
+                            textStyle: {
+                                color: '#d8d4d7'
+                            },
+                            formatter: '{value}',
+                        },
+                        axisTick: {
+                            show: false,
+                        },
+                    },
+                ],
+                series: [
+                    {
+                        name: '销售费用',
+                        type: 'line',
+                        Symbol: 'circle',
+                        symbolSize: 7,
+                        // showAllSymbol: true,
+                        data: [30.13, 86.25, 29.45],
+                        itemStyle: {
+                            normal: {
+                                color: '#f4e127',
+                                lineStyle: {
+                                    color: '#f4e127',
+                                },
+                                label: {
+                                    show: true, //开启显示
+                                    color: '#d8d4d7',
+                                    position: 'top', //在上方显示
+                                    formatter: function (res) {
+
+                                    },
+                                },
+                            },
+                        },
+                    },
+
+                ],
+            };
+            myChart.setOption(option)
+            window.addEventListener('resize', function () {
+                myChart.resize();
+            });
+        },
+        // 客流量的图表
+        drawFlowChart() {
+
+            let myChart = this.$echarts.getInstanceByDom(this.$refs.flowChart)
+            if (myChart == null) {
+                myChart = this.$echarts.init(this.$refs.flowChart)
+            }
+            var color = ['#2270b9', '#3bbabc', '#4ab135']
+            let option = {
+                grid: {
+                    top: "20%",
+                    left: "8%",
+                    right: "2%",
+                    bottom: "15%",
+                },
+                legend: {
+                    data: this.flowList.map(ele => {
+                        return ele.text
+                    }),
+                    // icon: 'circle',
+
+                    // symbolSize:4,
+                    textStyle: {
+                        align: 'right',
+                        color: '#fff'
+                    },
+                    top: '-2%',
+                    right: '2%',
+                },
+                xAxis: [
+                    {
+                        type: 'category',
+                        axisLine: {
+                            show: true,
+                            lineStyle: {
+                                color: '#20668d',
+                            }
+                        },
+                        splitArea: {
+                            // show: true,
+                            color: '#f00',
+                            lineStyle: {
+                                color: '#f00',
+                            },
+                        },
+                        axisTick: {
+                            show: false
+                        },
+                        splitLine: {
+                            show: false,
+                        },
+                        axisLabel: {
+                            textStyle: {
+                                color: '#fff'
+                            },
+                            // margin: 10,
+                        },
+                        // 两边留白
+                        boundaryGap: true,
+                        data: ['20230127', '20230128', '20230129', '20230130'],
+                    },
+                ],
+                yAxis: [
+                    {
+                        type: 'value',
+                        name: '分钟',
+                        nameTextStyle: {
+                            fontSize: 11,
+                            color: '#d8d4d7',
+                            padding: [10, 35, 0, 0],
+                        },
+
+                        // min: 0,
+                        // max: 140,
+                        splitNumber: 4,
+                        splitLine: {
+                            show: true,
+                            lineStyle: {
+                                color: "rgba(86,183,232,0.2)",
+                                type: 'dashed'
+                            },
+                        },
+                        axisLine: {
+                            show: false,
+                        },
+                        axisLabel: {
+                            show: true,
+                            // margin: 20,
+                            textStyle: {
+                                color: '#d8d4d7'
+                            },
+                            formatter: '{value}',
+                        },
+                        axisTick: {
+                            show: false,
+                        },
+                    },
+                ],
+                series: this.flowChartList.map((ele, index) => {
+                    return {
+                        name: ele.name,
+                        type: 'line',
+                        Symbol: 'circle',
+                        symbolSize: 7,
+                        // showAllSymbol: true,
+                        data: ele.data,
+                        itemStyle: {
+                            normal: {
+                                color: color[index],
+                                lineStyle: {
+                                    color: color[index],
+                                },
+                                label: {
+                                    show: true, //开启显示
+                                    color: '#d8d4d7',
+                                    position: 'top', //在上方显示
+                                    formatter: function (res) {
+
+                                    },
+                                },
+                            },
+                        },
+                    }
+
+                }),
+            };
+            myChart.setOption(option)
+            window.addEventListener('resize', function () {
+                myChart.resize();
+            });
+        }
     }
 }
 </script>
@@ -126,24 +472,115 @@ mounted(){
     margin-bottom: 5px;
     padding: 13px;
     box-sizing: border-box;
-    .hall-box{
+
+    .hall-box {
         width: 100%;
         height: 18.6%;
         display: flex;
+        margin-bottom: 10px;
         justify-content: space-between;
     }
-    .hall-box .item{
-        width: 45%;
+
+    .hall-chart {
+        width: 100%;
+        height: 47%;
+    }
+
+    .hall-line {
+        .hall-title {
+            display: flex;
+            justify-content: space-between;
+            margin-bottom: 8px;
+
+            .span0,
+            .span1 {
+                position: relative;
+                color: #fff;
+                font-size: 14px;
+            }
+
+            .hall-icon span {
+                background-size: 100% 100%;
+
+                display: inline-block;
+            }
+
+            .hall-icon span:nth-child(1) {
+                background-image: url(../assets/images/line-icon.png);
+                width: 17px;
+                height: 14px;
+            }
+
+            .hall-icon span:nth-child(2) {
+                background-image: url(../assets/images/pie-icon.png);
+                width: 16px;
+                height: 16px;
+                margin-left: 7px;
+            }
+
+
+        }
+
+    }
+
+    .chart-title {
+        margin-bottom: 6px;
+    }
+
+    .chart-title span {
+        font-size: 12px;
+        color: #fff;
+        margin-left: 18px;
+    }
+
+    .chart-title span:nth-child(1) {
+        margin-left: 0;
+        color: #1e96d5;
+        border-bottom: 1px solid #1e96d5;
+        // text-decoration: underline;
+    }
+
+    .hall-line span::before {
+        content: attr(text);
+        position: absolute;
+        z-index: 10;
+        bottom: 0;
+        color: rgb(163, 227, 245);
+        -webkit-mask: linear-gradient(to top, rgba(163, 227, 245,0.7), transparent);
+    }
+
+
+    .hall-box .item {
+        width: 48.5%;
         height: 100%;
         // background-color: aqua;
         background-image: url(../assets/images/hall-box.png);
-        .font{
+        padding: 8px 10px 8px;
+        box-sizing: border-box;
+        position: relative;
+
+        .font {
             font-size: 12px;
             color: #a5a5af;
+            margin-bottom: 3px;
         }
-        .hall-time{
+
+        .hall-time1,
+        .hall-time0 {
             font-family: 'maleGod';
-            font-size: 21px;
+            font-size: 25px;
+            text-align: center;
+            position: absolute;
+            bottom: 5px;
+            width: calc(100% - 16px);
+        }
+
+        .hall-time1 {
+            color: #dfcc4d !important;
+        }
+
+        .hall-time0 {
+            color: #4bbfde;
         }
     }
 }
@@ -162,37 +599,199 @@ mounted(){
     font-family: 'maleGod';
     align-items: center;
     letter-spacing: 1px;
+    margin-bottom: 10px;
 }
-.titleText:before{
-        content: attr(text);
-        position: absolute;
-        z-index: 10;
-        color:rgb(163, 227, 245);
-        -webkit-mask:linear-gradient(to top, rgb(163, 227, 245), transparent );
-    }
-.left-content .business-hall{
+
+.titleText:before {
+    content: attr(text);
+    position: absolute;
+    z-index: 10;
+    color: rgb(163, 227, 245);
+    -webkit-mask: linear-gradient(to top, rgb(163, 227, 245), transparent);
+}
+
+.left-content .business-hall {
     height: 38.2%;
 
 }
 
 .left-content .passenger-flow {
     height: 39.7%;
+
+    // 客流量图表
+    .flow-chart {
+        width: 100%;
+        height: 50%;
+    }
+
+    .flow-box {
+        height: 25%;
+        width: 100%;
+        background-image: url(../assets/images/flow-box.png);
+        background-size: 100% 100%;
+        padding: 8px 15px 8px;
+        box-sizing: border-box;
+        display: flex;
+        margin-bottom: 10px;
+
+        .flow-left {
+            width: 44%;
+            text-align: center;
+
+            .flow-total {
+                color: #c0c0c4;
+                font-size: 13px;
+                text-align: left;
+            }
+
+            .flow-value {
+                display: inline-block;
+                margin-top: 10px;
+                font-family: maleGod;
+                font-size: 25px;
+                color: #4bbfde;
+            }
+
+
+        }
+
+
+
+        .flow-right {
+            width: 56%;
+            height: 100%;
+            margin-bottom: 10px;
+
+            ul {
+                height: 100%;
+            }
+
+            .flow-item {
+                justify-content: space-between;
+                display: flex;
+            }
+
+            .up0 {
+                color: #36904c;
+                margin-top: 0 !important;
+            }
+
+            .up1 {
+                color: #3bbabc;
+            }
+
+            .up2 {
+                color: #1d62a3;
+            }
+
+            .flow-item span:nth-child(1) {
+                font-family: maleGod;
+                font-size: 20px;
+                // margin-top: 3px;
+                i{
+                    width: 9px;
+                    height: 8px;
+                    background-size: 100% 100%;
+                    display: inline-block;
+                    margin-right: 5px;
+                }
+                .rect0{
+                    background-image: url(../assets/images/rect-icon1.png);
+                }
+                .rect1{
+                    background-image: url(../assets/images/rect-icon2.png);
+                }
+                .rect2{
+                    background-image: url(../assets/images/rect-icon2.png);
+                }
+            }
+
+            .flow-item {
+                height: 33%;
+            }
+
+            .flow-item span {
+                height: 100%;
+                display: flex;
+                justify-content: center;
+                align-items: center;
+                
+
+            }
+
+            .flow-item span:nth-child(2) {
+                font-size: 13px;
+                color: #c0c0c4;
+            }
+        }
+
+    }
 }
 
 .left-content .hall-statistics {
     height: 20.4%;
+
+    .stat {
+        width: 100%;
+        display: flex;
+
+        .stat-item {
+            width: 33%;
+            .img2{
+                background-image: url(../assets/images/people-icon.png)
+            }
+            .img1{
+                background-image:url(../assets/images/paizi.png)
+            }
+            // display: flex;
+            section {
+                width: 83px;
+                height: 76px;
+                margin: 0 auto;
+                background-image: url(../assets/images/stat-icon.png);
+                background-size: 100% 100%;
+            }
+
+            p {
+                text-align: center;
+                color: #fff;
+            }
+
+            .stat-num {
+                font-family: 'maleGod';
+                color: #4bbfde !important;
+                font-size: 20px;
+                
+            }
+        }
+
+    }
+}
+
+@media screen and (min-height:980px) {
+    .stat-num {
+        font-size: 20px;
+        font-family: 'maleGod';
+        // display: inline-block;
+        margin: 4px ;
+        position: relative;
+        // top: 4px;
+    }
 }
 
 .right-content .payment {
     height: 38.3%;
-    .paymentContent{
+
+    .paymentContent {
         height: calc(100% - 30px);
-        .paymentList{
-            width:100% ;
+
+        .paymentList {
+            width: 100%;
             height: 38px;
             background: url("../assets/images/payment.png") no-repeat;
             background-size: 100% 100%;
-            .listOne{
+
+            .listOne {
                 height: 100%;
                 width: 28%;
                 display: flex;