112

mock/airlineAbnormalBaggageData.json

@@ -0,0 +1,38 @@
+{
+  "code": 200,
+  "data": {
+    "options": [
+      {
+        "series": [
+          {
+            "data": [
+              93,
+              814,
+              287,
+              1112,
+              559
+            ]
+          },
+          {
+            "data": [
+              445,
+              946,
+              900,
+              523,
+              1039
+            ]
+          },
+          {
+            "data": [
+              419,
+              886,
+              812,
+              934,
+              1196
+            ]
+          }
+        ]
+      }
+    ]
+  }
+}

mock/hourPeakData.json

@@ -0,0 +1,343 @@
+{
+  "code": 200,
+  "data": {
+    "series": [
+      {
+        "data": [
+          1,
+          2,
+          1,
+          1,
+          4,
+          0,
+          6,
+          3,
+          6,
+          4,
+          2,
+          1,
+          4,
+          5,
+          6,
+          1,
+          0,
+          0,
+          1,
+          6,
+          3,
+          4,
+          0,
+          3
+        ]
+      },
+      {
+        "data": [
+          6,
+          0,
+          3,
+          4,
+          1,
+          4,
+          3,
+          5,
+          1,
+          4,
+          6,
+          3,
+          1,
+          2,
+          6,
+          3,
+          4,
+          6,
+          4,
+          6,
+          1,
+          1,
+          5,
+          5
+        ]
+      },
+      {
+        "data": [
+          3,
+          3,
+          1,
+          0,
+          6,
+          2,
+          0,
+          4,
+          5,
+          1,
+          2,
+          6,
+          2,
+          0,
+          1,
+          6,
+          0,
+          0,
+          1,
+          5,
+          6,
+          0,
+          2,
+          5
+        ]
+      },
+      {
+        "data": [
+          3,
+          6,
+          5,
+          2,
+          3,
+          2,
+          0,
+          6,
+          3,
+          1,
+          5,
+          0,
+          4,
+          2,
+          5,
+          1,
+          3,
+          0,
+          6,
+          1,
+          3,
+          0,
+          5,
+          6
+        ]
+      },
+      {
+        "data": [
+          5,
+          4,
+          3,
+          1,
+          0,
+          5,
+          4,
+          3,
+          4,
+          5,
+          4,
+          6,
+          5,
+          6,
+          5,
+          0,
+          4,
+          3,
+          6,
+          3,
+          4,
+          6,
+          6,
+          3
+        ]
+      },
+      {
+        "data": [
+          1,
+          5,
+          5,
+          5,
+          3,
+          2,
+          4,
+          0,
+          6,
+          3,
+          1,
+          2,
+          6,
+          1,
+          6,
+          2,
+          0,
+          0,
+          3,
+          1,
+          3,
+          0,
+          6,
+          2
+        ]
+      },
+      {
+        "data": [
+          3,
+          6,
+          1,
+          4,
+          0,
+          4,
+          2,
+          5,
+          4,
+          4,
+          6,
+          2,
+          0,
+          3,
+          1,
+          6,
+          6,
+          1,
+          0,
+          3,
+          6,
+          3,
+          0,
+          5
+        ]
+      },
+      {
+        "data": [
+          6,
+          5,
+          0,
+          5,
+          3,
+          2,
+          5,
+          0,
+          0,
+          3,
+          6,
+          5,
+          5,
+          1,
+          6,
+          2,
+          4,
+          2,
+          2,
+          0,
+          2,
+          3,
+          5,
+          2
+        ]
+      },
+      {
+        "data": [
+          2,
+          4,
+          2,
+          4,
+          6,
+          1,
+          0,
+          0,
+          3,
+          0,
+          6,
+          2,
+          5,
+          5,
+          5,
+          4,
+          6,
+          0,
+          0,
+          0,
+          3,
+          2,
+          0,
+          0
+        ]
+      },
+      {
+        "data": [
+          3,
+          2,
+          0,
+          5,
+          6,
+          6,
+          2,
+          2,
+          1,
+          6,
+          3,
+          2,
+          6,
+          6,
+          0,
+          1,
+          3,
+          4,
+          6,
+          3,
+          1,
+          6,
+          2,
+          3
+        ]
+      },
+      {
+        "data": [
+          1,
+          4,
+          0,
+          4,
+          2,
+          3,
+          5,
+          3,
+          0,
+          0,
+          3,
+          2,
+          3,
+          0,
+          3,
+          3,
+          5,
+          0,
+          0,
+          3,
+          0,
+          0,
+          2,
+          2
+        ]
+      },
+      {
+        "data": [
+          1,
+          0,
+          3,
+          6,
+          6,
+          0,
+          6,
+          3,
+          4,
+          0,
+          3,
+          5,
+          6,
+          0,
+          3,
+          4,
+          4,
+          0,
+          4,
+          3,
+          3,
+          0,
+          2,
+          5
+        ]
+      }
+    ]
+  }
+}

src/components/Echarts/commonChartsChinaMap.vue

@@ -13,6 +13,8 @@
 <script>
 // 饼图初始数据
 import ChartsChinaMap from '../mixin/commonChartsChinaMap'
+import * as _ from 'lodash'
+import * as echarts from "echarts";
 export default {
   name: 'ChartsChinaMap',
   props: {
@@ -40,7 +42,7 @@ export default {
     // 饼图dom
     const chartDom = document.getElementById(this.id)
     // 饼图初始化
-    this.myChart = this.$echarts.init(chartDom)
+    this.myChart = echarts.init(chartDom)
     // 生成饼图
     this.myChart.setOption(objData)
     // 监听页面缩放 防止dom重复渲染
@@ -64,7 +66,7 @@ export default {
 }
 </script>
 
-<style lang="less" scoped>
+<style lang="scss" scoped>
 .ChartsChinaMap {
   height: 100%;
   width: 100%;

src/components/mixin/commonChartsChinaMap.js

@@ -6,7 +6,7 @@
  * @Description: In User Settings Edit
  * @FilePath: \bigDataScreen\src\components\mixin\commonChartsChinaMap.js
  */
-import '../../util/china'
+import '../../utils/china'
 var geoCoordMap = {
   '上海': [121.4648, 31.2891],
   '东莞': [113.8953, 22.901],

src/views/dashboard/index.vue

@@ -3,7 +3,15 @@
     <div class="dashboard-head flex">
       <!-- <div class="dashboard-head-title">{{title}}</div> -->
       <div class="dashboard-head-tabs flex-wrap">
-        <div class="dashboard-head-tabs-list" :class="tabsIndex == index ? 'active' : ''" @click="tabClick(item,index)" v-for="(item,index) in tabs" :key="index">{{item.label}}</div>
+        <div
+          class="dashboard-head-tabs-list"
+          :class="tabsIndex == index ? 'active' : ''"
+          @click="tabClick(item, index)"
+          v-for="(item, index) in tabs"
+          :key="index"
+        >
+          {{ item.label }}
+        </div>
       </div>
       <!-- <div class="dashboard-head-zw"></div> -->
     </div>
@@ -12,8 +20,13 @@
         <div class="dashboard-content-top-left">
           <div class="dashboard-content-top-left-item">
             <div class="dashboard-content-top-left-item-top">
-              <div class="dashboard-content-top-left-item-top-title">小时峰值分布</div>
-              <div class="dashboard-content-top-left-item-top-time" @click="showDatePicker">
+              <div class="dashboard-content-top-left-item-top-title">
+                小时峰值分布
+              </div>
+              <div
+                class="dashboard-content-top-left-item-top-time"
+                @click="showDatePicker"
+              >
                 <el-icon color="#ffffff" size="18"><Calendar /></el-icon>
                 <el-icon color="#ffffff"><CaretBottom /></el-icon>
               </div>
@@ -24,8 +37,13 @@
           </div>
           <div class="dashboard-content-top-left-item">
             <div class="dashboard-content-top-left-item-top">
-              <div class="dashboard-content-top-left-item-top-title">运单趋势分析</div>
-              <div class="dashboard-content-top-left-item-top-time" @click="showDatePicker">
+              <div class="dashboard-content-top-left-item-top-title">
+                运单趋势分析
+              </div>
+              <div
+                class="dashboard-content-top-left-item-top-time"
+                @click="showDatePicker"
+              >
                 <el-icon color="#ffffff" size="18"><Calendar /></el-icon>
                 <el-icon color="#ffffff"><CaretBottom /></el-icon>
               </div>
@@ -34,39 +52,73 @@
               <Echarts id="ww12" :option="optionLeft" />
             </div>
           </div>
-
         </div>
+        <!-- 地图 -->
         <div class="dashboard-content-top-center">
-          <div class="dashboard-content-bottom-center-top">
-
-          </div>
-          <div class="dashboard-content-bottom-center-bottom">
+          <div class="dashboard-content-top-center-top"></div>
+          <div class="dashboard-content-top-center-bottom">
+            <div class="dashboard-content-top-center-bottom-box1">
+              <div class="dashboard-content-top-center-bottom-box1-title">航班数</div>
+              <div class="dashboard-content-top-center-bottom-box1-info">
+                  <div>本年：1000</div>
+                  <div>同期：1100</div>
+              </div>
+              <div class="dashboard-content-top-center-bottom-box1-info">
+                  <div>本年：1000</div><div>同期：1100</div>
+              </div>
+              <div class="dashboard-content-top-center-bottom-box1-info">
+                  <div>本年：1000</div><div>同期：1100</div>
+              </div>
+            </div>
+            <div class="dashboard-content-top-center-bottom-box2">
+              <div class="dashboard-content-top-center-bottom-box2-title">运单数</div>
+              <div class="dashboard-content-top-center-bottom-box2-info">
+                  <div>本年：1000</div><div>同期：1100</div><div>重量：1100</div>
+              </div>
+              <div class="dashboard-content-top-center-bottom-box2-info">
+                  <div>本年：1000</div><div>同期：1100</div><div>重量：1100</div>
+              </div>
+              <div class="dashboard-content-top-center-bottom-box2-info">
+                  <div>本年：1000</div><div>同期：1100</div><div>重量：1100</div>
+              </div>
+            </div>
             <Echarts id="ww2" :option="optionLeft" />
           </div>
         </div>
         <div class="dashboard-content-top-right">
           <div class="dashboard-content-top-right-item">
             <div class="dashboard-content-top-right-item-top">
-              <div class="dashboard-content-top-right-item-top-title">航班预警报警分析</div>
-              <div class="dashboard-content-top-right-item-top-time" @click="showDatePicker">
+              <div class="dashboard-content-top-right-item-top-title">
+                航班预警报警分析
+              </div>
+              <div
+                class="dashboard-content-top-right-item-top-time"
+                @click="showDatePicker"
+              >
                 <el-icon color="#ffffff" size="18"><Calendar /></el-icon>
                 <el-icon color="#ffffff"><CaretBottom /></el-icon>
               </div>
             </div>
             <div class="dashboard-content-top-right-item-bottom">
-              <Echarts id="ww3" :option="optionLeft" />
+
+              <Echarts id="ww3" :option="airlineAbnormalBaggage.option" />
             </div>
           </div>
           <div class="dashboard-content-top-right-item">
             <div class="dashboard-content-top-right-item-top">
-              <div class="dashboard-content-top-right-item-top-title">航司运量统计</div>
-              <div class="dashboard-content-top-right-item-top-time" @click="showDatePicker">
+              <div class="dashboard-content-top-right-item-top-title">
+                航司运量统计
+              </div>
+              <div
+                class="dashboard-content-top-right-item-top-time"
+                @click="showDatePicker"
+              >
                 <el-icon color="#ffffff" size="18"><Calendar /></el-icon>
                 <el-icon color="#ffffff"><CaretBottom /></el-icon>
               </div>
             </div>
             <div class="dashboard-content-top-left-item-bottom">
-              <Echarts id="ww33" :option="optionLeft" />
+              <Echarts id="ww33" :option="airCompaneBaggage.option" />
             </div>
           </div>
         </div>
@@ -74,34 +126,46 @@
       <div class="dashboard-content-bottom flex">
         <div class="dashboard-content-bottom-left">
           <div class="dashboard-content-bottom-left-top">
-            <div class="dashboard-content-bottom-left-top-title">节点峰值分布</div>
-            <div class="dashboard-content-bottom-left-top-time" @click="showDatePicker">
+            <div class="dashboard-content-bottom-left-top-title">
+              节点峰值分布
+            </div>
+            <div
+              class="dashboard-content-bottom-left-top-time"
+              @click="showDatePicker"
+            >
               <el-icon color="#ffffff" size="18"><Calendar /></el-icon>
               <el-icon color="#ffffff"><CaretBottom /></el-icon>
             </div>
           </div>
           <div class="dashboard-content-bottom-left-bottom">
-            <Echarts id="ww4" :option="optionLeft" />
+            <Echarts id="ww4" :option="hourPeak.option" />
           </div>
         </div>
         <div class="dashboard-content-bottom-center">
           <div class="dashboard-content-bottom-center-top">
-            <div class="dashboard-content-bottom-center-top-title">节点效率分析</div>
-            <div class="dashboard-content-bottom-center-top-time" @click="showDatePicker">
+            <div class="dashboard-content-bottom-center-top-title">
+              节点效率分析
+            </div>
+            <div
+              class="dashboard-content-bottom-center-top-time"
+              @click="showDatePicker"
+            >
               <el-icon color="#ffffff" size="18"><Calendar /></el-icon>
               <el-icon color="#ffffff"><CaretBottom /></el-icon>
             </div>
           </div>
           <div class="dashboard-content-bottom-center-bottom">
-            <Echarts id="ww5" :option="optionLeft" />
+            <Echarts id="ww5" :option="nodeEfficiency.option" />
           </div>
         </div>
         <div class="dashboard-content-bottom-right">
           <div class="dashboard-content-bottom-right-top">
-            <div class="dashboard-content-bottom-center-top-title">航班动态统计</div>
+            <div class="dashboard-content-bottom-center-top-title">
+              航班动态统计
+            </div>
           </div>
           <div class="dashboard-content-bottom-right-bottom">
-            <Echarts id="ww6" :option="optionLeft" />
+            <Echarts id="ww6" :option="airStutas.option" />
           </div>
         </div>
       </div>
@@ -110,7 +174,7 @@
       <el-form :model="form" label-width="120px">
         <el-form-item label="开始日期">
           <el-date-picker
-          :disabled-date="disabledStartDate"
+            :disabled-date="disabledStartDate"
             v-model="form.startDate"
             type="date"
             placeholder="请选择开始日期"
@@ -136,33 +200,34 @@
 </template>
 
 <script setup lang="ts">
-import { ref } from "vue";
+import { ref, onMounted } from "vue";
 import Echarts from "@/components/Echarts/commonChartsBar.vue";
-import {Calendar,CaretBottom} from "@element-plus/icons-vue"
-import  Dialog  from "@/components/dialog/index.vue";
+import { Calendar, CaretBottom } from "@element-plus/icons-vue";
+import Dialog from "@/components/dialog/index.vue";
+import axios from "axios";
 const title = ref("决策管理驾驶舱");
 const form = ref({
-  startDate:Date.now(),
-  endDate:Date.now()
-})
+  startDate: Date.now(),
+  endDate: Date.now(),
+});
 
 const disabledStartDate = (time: Date) => {
-  let data = new Date(form.value.endDate)
-  return time.getTime() > data.getTime()
-}
+  let data = new Date(form.value.endDate);
+  return time.getTime() > data.getTime();
+};
 const disabledEndDate = (time: Date) => {
-  let data = new Date(form.value.startDate)
-  return  data.getTime() > time.getTime()
-}
+  let data = new Date(form.value.startDate);
+  return data.getTime() > time.getTime();
+};
 
-const flag = ref(false)
+const flag = ref(false);
 const resetForm = () => {
-  flag.value = false
-}
+  flag.value = false;
+};
 
 const submitForm = () => {
-  flag.value = false
-}
+  flag.value = false;
+};
 const tabs = [
   {
     id: 1,
@@ -198,7 +263,7 @@ const optionLeft = {
   // },
   grid: {
     left: "0%",
-    right: "0%",
+    right: "5%",
     bottom: "0%",
     top: "15%",
     containLabel: true,
@@ -221,8 +286,9 @@ const optionLeft = {
       color: "#8897BC",
     },
   },
-  yAxis: {
+  yAxis: [{
     type: "value",
+    name:"运单/件",
     axisLabel: {
       color: "#8897BC",
       formatter: function (item) {
@@ -236,6 +302,19 @@ const optionLeft = {
       },
     },
   },
+  {
+    type: "value",
+    name:"重量(吨)",
+    axisLabel: {
+      color: "#8897BC"
+    },
+    splitLine: {
+      lineStyle: {
+        type: "dashed",
+        color: "rgba(196,194,225, 0.54)",
+      },
+    },
+  }],
   series: [
     {
       name: "运输总数",
@@ -293,15 +372,364 @@ const optionLeft = {
     },
   ],
 };
+
+const airlineAbnormalBaggage = ref({
+  component: "commonChartsBar",
+  option: {
+    baseOption: {
+      legend: {
+        data: ["报警", "预警"],
+        right: "20",
+        textStyle: {
+          color: "#8897BC",
+        },
+        // top:"-10"
+      },
+      color: ["#EC3B71", "#E5B35C"],
+      grid: {
+        bottom: "10%",
+        left: "5%",
+        right: "1%",
+        top: "15%",
+      },
+      xAxis: {
+        data: ["核单", "安检", "理货", "待运区", "货站", "机下", "装机"],
+        axisLine: {
+          show: true,
+          lineStyle: {
+            color: "#8897BC",
+          },
+        },
+        axisTick: {
+          show: false,
+        },
+        axisLabel: {
+          color: "#8897BC",
+        },
+      },
+      yAxis: {
+        type: "value",
+        axisLabel: {
+          color: "#8897BC",
+        },
+        splitLine: {
+          lineStyle: {
+            type: "dashed",
+            color: "rgba(196,194,225, 0.54)",
+          },
+        },
+      },
+      series: [
+        {
+          name: "报警",
+          type: "bar",
+          data: [12, 10, 15, 11, 16, 4, 6],
+        },
+        {
+          name: "预警",
+          type: "bar",
+          data: [11, 15, 17, 8, 1, 4, 6],
+        },
+      ],
+    },
+  },
+});
+
+const airCompaneBaggage = ref({
+  component: "commonChartsBar",
+  option: {
+    baseOption: {
+      legend: {
+        data: ["2020年", "2021年"],
+        right: "20",
+        textStyle: {
+          color: "#8897BC",
+        },
+      },
+      color: ["#51DEE9", "#4C88E1"],
+      grid: {
+        bottom: "10%",
+        left: "5%",
+        right: "1%",
+        top: "15%",
+      },
+      xAxis: {
+        data: ["国航", "南航", "深航", "东航", "海航", "国泰", "川航"],
+        axisLine: {
+          show: true,
+          lineStyle: {
+            color: "#8897BC",
+          },
+        },
+        axisTick: {
+          show: false,
+        },
+        axisLabel: {
+          color: "#8897BC",
+        },
+      },
+      yAxis: {
+        type: "value",
+        axisLabel: {
+          color: "#8897BC",
+        },
+        splitLine: {
+          lineStyle: {
+            type: "dashed",
+            color: "rgba(196,194,225, 0.54)",
+          },
+        },
+      },
+      series: [
+        {
+          name: "2020年",
+          type: "bar",
+          data: [12, 10, 15, 11, 16, 4, 6],
+        },
+        {
+          name: "2021年",
+          type: "bar",
+          data: [11, 15, 17, 8, 1, 4, 6],
+        },
+      ],
+    },
+  },
+});
+
+const airStutas = ref({
+  component: "commonChartsBar",
+  option: {
+    baseOption: {
+      // legend: {
+      //   data: ['2020年', '2021年'],
+      //   right:"20",
+      //   textStyle:{
+      //     color: "#8897BC"
+      //   }
+      //   // top:"-10"
+      // },
+      color: ["#51DEE9", "#4C88E1"],
+      grid: {
+        bottom: "10%",
+        left: "5%",
+        right: "1%",
+        top: "15%",
+      },
+      xAxis: {
+        data: ["机下交接", "货站交接", "理货"],
+        axisLine: {
+          show: true,
+          lineStyle: {
+            color: "#8897BC",
+          },
+        },
+        axisTick: {
+          show: false,
+        },
+        axisLabel: {
+          color: "#8897BC",
+        },
+      },
+      yAxis: {
+        type: "value",
+        axisLabel: {
+          color: "#8897BC",
+        },
+        splitLine: {
+          lineStyle: {
+            type: "dashed",
+            color: "rgba(196,194,225, 0.54)",
+          },
+        },
+      },
+      series: [
+        {
+          type: "bar",
+          data: [12, 10, 15],
+        },
+      ],
+    },
+  },
+});
+
+const nodeEfficiency = ref({
+  component: "commonChartsLine",
+  option: {
+    legend: {
+      top: "1%",
+      right: "5%",
+      data: ["平均时间", "最长时间", "最短时间"],
+      itemWidth: 25,
+      itemHeight: 14,
+    },
+    grid: {
+      bottom: "10%",
+      left: "1%",
+      right: "1%",
+      top: "15%",
+    },
+    color: ["#3ca4fc", "#f1ce7c", "#36ccba"],
+    xAxis: {
+      axisLabel: {
+        interval: 0,
+      },
+      data: [
+        "收货核单",
+        "安检",
+        "理货",
+        "待运区",
+        "货站交接",
+        "机下交接",
+        "装机"
+      ],
+    },
+    series: [
+      {
+        name: "平均时间",
+        type: "line",
+        smooth: true,
+        stack: "",
+        areaStyle: {
+          opacity: 0,
+        },
+        data: [
+          4016, 4652, 1570, 6334, 12052, 3115, 10604, 12733, 14533, 2464, 4168,
+          3844,
+        ],
+      },
+      {
+        name: "最长时间",
+        type: "line",
+        smooth: true,
+        stack: "",
+        areaStyle: {
+          opacity: 0,
+        },
+        data: [
+          4558, 770, 11745, 2699, 11205, 6497, 1544, 1555, 4181, 447, 60, 9804,
+        ],
+      },
+      {
+        name: "最短时间",
+        type: "line",
+        smooth: true,
+        stack: "",
+        areaStyle: {
+          opacity: 0,
+        },
+        data: [
+          14240, 3190, 1699, 14446, 11349, 11182, 14829, 11740, 2418, 4824,
+          9707, 8126,
+        ],
+      },
+    ],
+  },
+});
+
+const node = [
+        "收货核单",
+        "安检",
+        "理货",
+        "待运区",
+        "货站交接",
+        "机下交接",
+        "装机"
+]
+
+const hours = Array.from({ length: 24 }, (v, i) => i + 1)
+
+const hourPeak = ref( {
+          component: 'commonChartsScatter',
+          option: {
+            title: node.map((month, index) => ({
+              top: ((index + 0.5) * 100) / 7 - 3 + '%',
+              text: month,
+              textStyle: {
+                fontSize: 12,
+                fontWeight: 'normal',
+                color: '#698dc3'
+              }
+            })),
+            singleAxis: node.map((month, index) => ({
+              type: 'category',
+              data: hours,
+              top: ((index + 0.5) * 100) / 7 - 3 + '%',
+              height: 100 / 7 - 5 + '%',
+              left:"12%",
+              right:"1%",
+              axisTick: {
+                show: false
+              },
+              splitLine: {
+                show: false
+              }
+            })),
+            series: node.map((month, index) => ({
+              singleAxisIndex: index,
+              coordinateSystem: 'singleAxis',
+              type: 'scatter',
+              data: [3,
+          6,
+          1,
+          4,
+          0,
+          4,
+          2,
+          5,
+          4,
+          4,
+          6,
+          2,
+          0,
+          3,
+          1,
+          6,
+          6,
+          1,
+          0,
+          3,
+          6,
+          3,
+          0,
+          5],
+              symbolSize: function (dataItem) {
+                return dataItem * 3
+              }
+            }))
+          }
+        })
+
+
+const getHourPeakData = ()=>{
+  axios
+        .get('./mock/hourPeakData.json')
+        .then(res => {
+          if (res.data.code === 200 || res.data.code === '200') {
+            res.data.data.series.forEach((item, index) => {
+              hourPeak.value.option.series[index].data = item.data
+            })
+
+          } else {
+            // this.$message.error('小时高峰量统计分析-初始化数据失败')
+          }
+        })
+        .catch(err => {
+          // this.$message.error(err)
+        })
+}
+
 const tabClick = (item, index) => {
   tabsIndex.value = index;
   console.log(item, index);
 };
 
-const showDatePicker = () =>{
+const showDatePicker = () => {
   flag.value = true;
-}
+};
 
+onMounted(() => {
+  // getHourPeakData()
+});
 </script>
 
 <style lang="scss" scoped>
@@ -359,7 +787,7 @@ const showDatePicker = () =>{
     }
   }
   &-content {
-    padding:0 20px;
+    padding: 0 20px;
     height: calc(100% - 40px);
     box-sizing: border-box;
     display: flex;
@@ -370,7 +798,7 @@ const showDatePicker = () =>{
       &-left,
       &-right {
         width: calc(30% - 20px);
-        &-item{
+        &-item {
           width: 100%;
           height: calc(50% - 20px);
           margin: 20px 0;
@@ -381,32 +809,32 @@ const showDatePicker = () =>{
           background-size: 100% 100%;
           padding: 13px;
           box-sizing: border-box;
-        &-top{
-          width: 100%;
-          height: 45px;
-          display: flex;
-          padding-top: 15px;
-          box-sizing: border-box;
-          &-title{
-            font-size: 16px;
-            font-weight: bold;
-            color: #75CEE1;
-            line-height: 1.8;
-            margin-right: 10px;
-          }
-          &-time{
+          &-top {
+            width: 100%;
+            height: 45px;
             display: flex;
-            justify-content: flex-start;
-            align-items: center;
-            cursor: pointer;
+            padding-top: 15px;
+            box-sizing: border-box;
+            &-title {
+              font-size: 16px;
+              font-weight: bold;
+              color: #75cee1;
+              line-height: 1.8;
+              margin-right: 10px;
+            }
+            &-time {
+              display: flex;
+              justify-content: flex-start;
+              align-items: center;
+              cursor: pointer;
+            }
+          }
+          &-bottom {
+            width: 100%;
+            flex: 1;
+            position: relative;
+            // margin-top: 10px;
           }
-        }
-        &-bottom{
-          width: 100%;
-          flex: 1;
-          position: relative;
-          // margin-top: 10px;
-        }
         }
       }
       &-center {
@@ -414,31 +842,82 @@ const showDatePicker = () =>{
         box-sizing: border-box;
         display: flex;
         flex-direction: column;
-        &-top{
+        &-top {
           width: 100%;
-          height: 55px;
+          height: 32px;
           display: flex;
           padding-top: 15px;
           box-sizing: border-box;
-          &-title{
+          &-title {
             font-size: 16px;
             font-weight: bold;
-            color: #75CEE1;
+            color: #75cee1;
             line-height: 1.8;
             margin-right: 10px;
           }
-          &-time{
+          &-time {
             display: flex;
             justify-content: flex-start;
             align-items: center;
             cursor: pointer;
           }
         }
-        &-bottom{
+        &-bottom {
           width: 100%;
           flex: 1;
           position: relative;
-          // margin-top: 10px;
+          &-box1{
+            z-index: 10;
+            width: 205px;
+            height: 120px;
+            border: 2px solid #468FC3;
+            position: absolute;
+            left: 50px;
+            display: flex;
+            flex-direction: column;
+            padding: 15px 0 15px 15px;
+            &-title{
+              font-size: 16px;
+              font-weight: bold;
+              color: #FFFFFF;
+              margin-bottom: 10px;
+            }
+            &-info{
+              font-size: 14px;
+              font-weight: 400;
+              color: #C0CBE4;
+              display: flex;
+              div{
+                margin-right: 10px;
+              }
+            }
+          }
+          &-box2{
+            z-index: 10;
+            width: 284px;
+            height: 120px;
+            border: 2px solid #468FC3;
+            position: absolute;
+            right: 60px;
+            display: flex;
+            flex-direction: column;
+            padding: 15px 0 15px 15px;
+            &-title{
+              font-size: 16px;
+              font-weight: bold;
+              color: #FFFFFF;
+              margin-bottom: 10px;
+            }
+            &-info{
+              font-size: 14px;
+              font-weight: 400;
+              color: #C0CBE4;
+              display: flex;
+              div{
+                margin-right: 10px;
+              }
+            }
+          }
         }
       }
     }
@@ -458,27 +937,27 @@ const showDatePicker = () =>{
         box-sizing: border-box;
         margin-top: 20px;
         margin-bottom: 20px;
-        &-top{
+        &-top {
           width: 100%;
           height: 45px;
           display: flex;
           padding-top: 15px;
           box-sizing: border-box;
-          &-title{
+          &-title {
             font-size: 16px;
             font-weight: bold;
-            color: #75CEE1;
+            color: #75cee1;
             line-height: 1.8;
             margin-right: 10px;
           }
-          &-time{
+          &-time {
             display: flex;
             justify-content: flex-start;
             align-items: center;
             cursor: pointer;
           }
         }
-        &-bottom{
+        &-bottom {
           width: 100%;
           flex: 1;
           position: relative;
@@ -498,27 +977,27 @@ const showDatePicker = () =>{
         background-size: 100% 100%;
         background-position: center center;
         box-sizing: border-box;
-        &-top{
+        &-top {
           width: 100%;
           height: 45px;
           display: flex;
           padding-top: 15px;
           box-sizing: border-box;
-          &-title{
+          &-title {
             font-size: 16px;
             font-weight: bold;
-            color: #75CEE1;
+            color: #75cee1;
             line-height: 1.8;
             margin-right: 10px;
           }
-          &-time{
+          &-time {
             display: flex;
             justify-content: flex-start;
             align-items: center;
             cursor: pointer;
           }
         }
-        &-bottom{
+        &-bottom {
           width: 100%;
           flex: 1;
           position: relative;