代码提交

src/App.vue

@@ -3,12 +3,11 @@
   <div id="app">
     <div class="top">
       <div class="topLeft">
-        <div style="color:rgb(56,171,192)">
+        <div style="color:rgb(56,171,192);font-family: 'maleGod'">
           2023-02-09
         </div>
-        |
+        <div style="font-family: 'maleGod';margin-bottom: 3%;">
-        <div>
+         12:37:05
-         2:37:05
         </div>
       </div>
       <div class="topCenter">
@@ -69,7 +68,7 @@ export default {
     align-items: center;
     justify-content: center;
     justify-content: space-evenly;
-    font-size: 20px;
+    font-size: px;
   }
   .topCenter{
     width: 76%;

src/view/index.vue

@@ -6,37 +6,90 @@
       <div class="business-hall">
         <div class="title">
           <!-- 45.4% -->
-          <p class="titleText" text="营业厅时长" style="font-family: 'maleGod'">
+          <p class="titleText" text="营业厅时长" style="font-family: maleGod">
             营业厅时长
           </p>
         </div>
         <!-- 两个小版块 -->
         <div class="hall-box">
-          <div class="item">
+          <div class="item" v-for="(item, i) in hallList" :key="i">
-            <p class="font">平均办理时长</p>
+            <p class="font">{{ item.font }}</p>
-            <p class="hall-time" style="color: #2e81a2">49分钟33秒</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>
+        <!-- 图表内容样式 -->
+        <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 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 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>
     <!-- 右边的内容 -->
@@ -208,9 +261,7 @@
       </div>
     </div>
     <div class="middle-content">
-      <div class="">
+      <div class="middleBottom"></div>
-
-      </div>
     </div>
   </div>
 </template>
@@ -220,6 +271,61 @@ export default {
   name: "index",
   data() {
     return {
+      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,
+        },
+      ],
+
       index: null,
       payOneShow: true, //缴费图表切换
       businessShow: true, //业务图表切换
@@ -291,33 +397,274 @@ export default {
         {
           name: "排名",
         },
-      ]
+      ],
     };
   },
   mounted() {
     this.rightOneXian();
     this.serviceTwo();
-    this.rightBusinessTwo()
+    this.rightBusinessTwo();
+
+    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();
+      });
+    },
+
     //缴费图表切换
     handelXian() {
-      this.payOneShow = true
+      this.payOneShow = true;
     },
     handelBing() {
-      this.payOneShow = false
+      this.payOneShow = false;
       this.$nextTick(() => {
-        this.rightOneBing()
+        this.rightOneBing();
-      })
+      });
     },
     businessXian() {
-      this.businessShow = true
+      this.businessShow = true;
     },
     businessBing() {
-      this.businessShow = false
+      this.businessShow = false;
       this.$nextTick(() => {
         this.rightBusinessOne();
-      })
+      });
     },
     //缴费线性表
     rightOneXian() {
@@ -551,9 +898,7 @@ export default {
           unit: "笔",
         },
       ];
-      var myChart = this.$echarts.init(
+      var myChart = this.$echarts.init(document.getElementById("rightOneBing"));
-        document.getElementById("rightOneBing")
-      );
       var option = {
         title: [
           {
@@ -889,7 +1234,9 @@ export default {
     },
     //业务线性
     rightBusinessTwo() {
-        var myChart = this.$echarts.init(document.getElementById("rightBusinessTwo"));
+      var myChart = this.$echarts.init(
+        document.getElementById("rightBusinessTwo")
+      );
       var option = {
         legend: {
           data: ["笔数", "金额"],
@@ -1239,7 +1586,7 @@ export default {
     //服务选择
     serviceType(index) {
       this.serviceTypeActive = index;
-    }
+    },
   },
 };
 </script>
@@ -1250,9 +1597,8 @@ export default {
   height: 100%;
   position: relative;
   display: flex;
-  justify-content: space-around
+  justify-content: space-around;
 }
-
 .left-content,
 .right-content {
     position: absolute;
@@ -1262,11 +1608,15 @@ export default {
     /* background-color: aqua; */
 }
 .middle-content{
+  position: absolute;
     width: calc(100% - 41.2%);
-  position: relative;
     top: 0;
     height: 100%;
     border: 1px solid red;
+    position: relative;
+    .middleBottom{
+      
+    }
 }
 /* 内容板块背景 */
 .left-content>div,
@@ -1276,24 +1626,115 @@ export default {
     margin-bottom: 5px;
     padding: 13px;
     box-sizing: border-box;
+
     .hall-box {
         width: 100%;
         height: 18.6%;
         display: flex;
+        margin-bottom: 10px;
         justify-content: space-between;
     }
+
+    .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: 45%;
+        width: 48.5%;
         height: 100%;
         // background-color: aqua;
         background-image: url(../assets/images/hall-box.png);
+        padding: 8px 10px 8px;
+        box-sizing: border-box;
+        position: relative;
+
         .font {
             font-size: 12px;
             color: #a5a5af;
+            margin-bottom: 3px;
         }
-    .hall-time {
+
-      font-family: "maleGod";
+        .hall-time1,
-      font-size: 21px;
+        .hall-time0 {
+            font-family: 'maleGod';
+            font-size: 25px;
+            text-align: center;
+            position: absolute;
+            bottom: 5px;
+            width: calc(100% - 16px);
+        }
+
+        .hall-time1 {
+            color: #dfcc4d !important;
+        }
+
+        .hall-time0 {
+            color: #4bbfde;
         }
     }
 }
@@ -1309,10 +1750,12 @@ export default {
     padding-left: 8%;
     box-sizing: border-box;
     color: #fff;
-  font-family: "maleGod";
+    font-family: 'maleGod';
     align-items: center;
     letter-spacing: 1px;
+    margin-bottom: 10px;
 }
+
 .titleText:before {
     content: attr(text);
     position: absolute;
@@ -1320,17 +1763,176 @@ export default {
     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%;