Merge branch 'master' of http://120.26.64.82:3000/BFFE/SZYGM1.0

src/router/routes/routes-file-one.ts

@@ -6,11 +6,40 @@ const HomeRoutes = {
   redirect: '/dashboard',
   children: [
     {
-      path: 'dashboard',
+      path: '/homein',
       name: 'Dashboard',
-      component: () => import('@/views/dashboard/index.vue'),
+      redirect: '/homein',
+      component: {
+        render: () => h(resolveComponent('router-view')),
+      },
       //using el svg icon, the elSvgIcon first when at the same time using elSvgIcon and icon
-      meta: { title: '决策管理驾驶舱', elSvgIcon: 'Fold' }
+      meta: { title: '决策管理驾驶舱', elSvgIcon: 'Fold' },
+      children: [
+        {
+          path: '/homein',
+          name: 'Homein',
+          component: () => import('@/views/dashboard/index.vue'),
+          meta: { title: '国内进港'}
+        },
+        {
+          path: '/homeOut',
+          name: 'HomeOut',
+          component: () => import('@/views/dashboard/indexHomeOut.vue'),
+          meta: { title: '国内出港'}
+        },
+        {
+          path: '/indexIn',
+          name: 'IndexIn',
+          component: () => import('@/views/dashboard/indexIn.vue'),
+          meta: { title: '国际进港'}
+        },
+        {
+          path: '/indexOut',
+          name: 'IndexOut',
+          component: () => import('@/views/dashboard/indexOut.vue'),
+          meta: { title: '国际出港'}
+        }
+      ]
     }
   ]
 }

src/views/dashboard/index.vue

@@ -243,7 +243,7 @@ const tabs = [
     value: "four",
   },
 ];
-const tabsIndex = ref(2);
+const tabsIndex = ref(0);
 const optionLeft = {
   tooltip: {
     trigger: "axis",
@@ -282,7 +282,6 @@ const optionLeft = {
   yAxis: [
     {
       type: "value",
-      name: "运单/件",
       axisLabel: {
         color: "#8897BC",
         formatter: function (item) {
@@ -298,7 +297,6 @@ const optionLeft = {
     },
     {
       type: "value",
-      name: "重量(吨)",
       axisLabel: {
         color: "#8897BC",
       },
@@ -312,10 +310,11 @@ const optionLeft = {
   ],
   series: [
     {
-      name: "运输总数",
+      name: "运单/件",
       type: "line",
       symbol: "none",
       key: "bagsnum",
+      yAxisIndex: 0,
       data: [120, 132, 101, 134, 90, 230, 210],
       areaStyle: {
         color: {
@@ -339,9 +338,10 @@ const optionLeft = {
       },
     },
     {
-      name: "托运旅客数",
+      name: "重量/吨",
       type: "line",
       symbol: "none",
+      yAxisIndex: 1,
       key: "passengers",
       data: [220, 182, 191, 234, 290, 330, 310],
       areaStyle: {
@@ -388,7 +388,7 @@ const airlineAbnormalBaggage = ref({
         top: "15%",
       },
       xAxis: {
-        data: ["核单", "安检", "理货", "待运区", "货站", "机下", "装机"],
+        data: ["卸机", "机下交接", "货站交接", "提取"],
         axisLine: {
           show: true,
           lineStyle: {
@@ -418,12 +418,12 @@ const airlineAbnormalBaggage = ref({
         {
           name: "报警",
           type: "bar",
-          data: [12, 10, 15, 11, 16, 4, 6],
+          data: [  11, 16, 4, 6],
         },
         {
           name: "预警",
           type: "bar",
-          data: [11, 15, 17, 8, 1, 4, 6],
+          data: [11, 15, 17, 4],
         },
       ],
     },
@@ -569,13 +569,7 @@ const nodeEfficiency = ref({
         interval: 0,
       },
       data: [
-        "收货核单",
-        "安检",
-        "理货",
-        "待运区",
-        "货站交接",
-        "机下交接",
-        "装机",
+      "卸机", "机下交接", "货站交接", "提取"
       ],
     },
     series: [
@@ -622,13 +616,7 @@ const nodeEfficiency = ref({
 });
 
 const node = [
-  "收货核单",
-  "安检",
-  "理货",
-  "待运区",
-  "货站交接",
-  "机下交接",
-  "装机",
+"卸机", "机下交接", "货站交接", "提取"
 ];
 
 const hours = Array.from({ length: 24 }, (v, i) => i + 1);
@@ -637,7 +625,7 @@ const hourPeak = ref({
   component: "commonChartsScatter",
   option: {
     title: node.map((month, index) => ({
-      top: ((index + 0.5) * 100) / 7 - 3 + "%",
+      top: ((index + 0.5) * 100) / 4 - 3 + "%",
       text: month,
       textStyle: {
         fontSize: 12,
@@ -648,8 +636,8 @@ const hourPeak = ref({
     singleAxis: node.map((month, index) => ({
       type: "category",
       data: hours,
-      top: ((index + 0.5) * 100) / 7 - 3 + "%",
-      height: 100 / 7 - 5 + "%",
+      top: ((index + 0.5) * 100) / 4 - 3 + "%",
+      height: 100 / 4 - 5 + "%",
       left: "12%",
       right: "1%",
       axisTick: {
@@ -690,9 +678,29 @@ const getHourPeakData = () => {
     });
 };
 
+const router = useRouter()
 const tabClick = (item, index) => {
   tabsIndex.value = index;
-  console.log(item, index);
+  if(index==0){
+    router.push({
+      path:'../homein'
+    })
+  }
+  if(index==1){
+    router.push({
+      path:'../homeOut'
+    })
+  }
+  if(index==2){
+    router.push({
+      path:'../indexIn'
+    })
+  }
+  if(index==3){
+    router.push({
+      path:'../indexOut'
+    })
+  }
 };
 
 const showDatePicker = () => {

src/views/dashboard/indexHomeOut.vue

@@ -0,0 +1,1005 @@
+<template>
+  <div class="dashboard">
+    <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>
+      <!-- <div class="dashboard-head-zw"></div> -->
+    </div>
+    <div class="dashboard-content">
+      <div class="dashboard-content-top flex">
+        <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">
+                <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="ww1" :option="optionLeft" />
+            </div>
+          </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">
+                <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="ww12" :option="optionLeft" />
+            </div>
+          </div>
+        </div>
+        <!-- 地图 -->
+        <div class="dashboard-content-top-center">
+          <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>
+            <EchartsMap id="ww2" />
+          </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">
+                <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="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">
+                <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="airCompaneBaggage.option" />
+            </div>
+          </div>
+        </div>
+      </div>
+      <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">
+              <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="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">
+              <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="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>
+          <div class="dashboard-content-bottom-right-bottom">
+            <Echarts id="ww6" :option="airStutas.option" />
+          </div>
+        </div>
+      </div>
+    </div>
+    <Dialog :flag="flag" @resetForm="resetForm" @submitForm="submitForm">
+      <el-form :model="form" label-width="120px">
+        <el-form-item label="开始日期">
+          <el-date-picker :disabled-date="disabledStartDate" v-model="form.startDate" type="date" placeholder="请选择开始日期" size="default" format="YYYY/MM/DD" value-format="YYYY-MM-DD" />
+        </el-form-item>
+        <el-form-item label="结束日期">
+          <el-date-picker :disabled-date="disabledEndDate" v-model="form.endDate" type="date" placeholder="请选择结束日期" size="default" format="YYYY-MM-DD" value-format="YYYY-MM-DD" />
+        </el-form-item>
+      </el-form>
+    </Dialog>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted } from "vue";
+import Echarts from "@/components/Echarts/commonChartsBar.vue";
+import EchartsMap from "@/components/Echarts/commonChartsChinaMap.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(),
+});
+
+const disabledStartDate = (time: Date) => {
+  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();
+};
+
+const flag = ref(false);
+const resetForm = () => {
+  flag.value = false;
+};
+
+const submitForm = () => {
+  flag.value = false;
+};
+const tabs = [
+  {
+    id: 1,
+    label: "国内进港",
+    value: "one",
+  },
+  {
+    id: 2,
+    label: "国内出港",
+    value: "two",
+  },
+  {
+    id: 3,
+    label: "国际进港",
+    value: "three",
+  },
+  {
+    id: 4,
+    label: "国际出港",
+    value: "four",
+  },
+];
+const tabsIndex = ref(1);
+const optionLeft = {
+  tooltip: {
+    trigger: "axis",
+  },
+  // legend: {
+  //   data: ['运输总数', '托运旅客数'],
+  //   show: true,
+  //   top: 0,
+  //   icon: 'roundRect'
+  // },
+  grid: {
+    left: "0%",
+    right: "5%",
+    bottom: "0%",
+    top: "15%",
+    containLabel: true,
+  },
+  color: ["#F5BB3D", "#73D970", "#6A9DD9"],
+  xAxis: {
+    type: "category",
+    boundaryGap: true,
+    data: ["2021.12", "2022.01", "2022.02", "2022.03", "2022.04", "2022.05"],
+    axisLine: {
+      show: true,
+      lineStyle: {
+        color: "#8897BC",
+      },
+    },
+    axisTick: {
+      show: false,
+    },
+    axisLabel: {
+      color: "#8897BC",
+    },
+  },
+  yAxis: [
+    {
+      type: "value",
+      axisLabel: {
+        color: "#8897BC",
+        formatter: function (item) {
+          return item / 10000 + "万";
+        },
+      },
+      splitLine: {
+        lineStyle: {
+          type: "dashed",
+          color: "rgba(196,194,225, 0.54)",
+        },
+      },
+    },
+    {
+      type: "value",
+      axisLabel: {
+        color: "#8897BC",
+      },
+      splitLine: {
+        lineStyle: {
+          type: "dashed",
+          color: "rgba(196,194,225, 0.54)",
+        },
+      },
+    },
+  ],
+  series: [
+    {
+      name: "运输总数",
+      type: "line",
+      symbol: "none",
+      key: "bagsnum",
+      data: [120, 132, 101, 134, 90, 230, 210],
+      areaStyle: {
+        color: {
+          type: "linear",
+          x: 0,
+          y: 0,
+          x2: 0,
+          y2: 1,
+          colorStops: [
+            {
+              offset: 0,
+              color: "rgba(125,72,255,0.5)",
+            },
+            {
+              offset: 1,
+              color: "rgba(0,180,255,0.01)",
+            },
+          ],
+          global: false,
+        },
+      },
+    },
+    {
+      name: "托运旅客数",
+      type: "line",
+      symbol: "none",
+      key: "passengers",
+      data: [220, 182, 191, 234, 290, 330, 310],
+      areaStyle: {
+        color: {
+          type: "linear",
+          x: 0,
+          y: 0,
+          x2: 0,
+          y2: 1,
+          colorStops: [
+            {
+              offset: 0,
+              color: "rgba(125,72,255,0.5)",
+            },
+            {
+              offset: 1,
+              color: "rgba(0,180,255,0.01)",
+            },
+          ],
+          global: false,
+        },
+      },
+    },
+  ],
+};
+
+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 router = useRouter()
+const tabClick = (item, index) => {
+  tabsIndex.value = index;
+  if(index==0){
+    router.push({
+      path:'../homein'
+    })
+  }
+  if(index==1){
+    router.push({
+      path:'../homeOut'
+    })
+  }
+  if(index==2){
+    router.push({
+      path:'../indexIn'
+    })
+  }
+  if(index==3){
+    router.push({
+      path:'../indexOut'
+    })
+  }
+};
+
+const showDatePicker = () => {
+  flag.value = true;
+};
+
+onMounted(() => {
+  // getHourPeakData()
+});
+</script>
+
+<style lang="scss" scoped>
+.dashboard {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  left: 0;
+  top: 0;
+  background: linear-gradient(185deg, #1e305f, #0f1015);
+  z-index: 2000;
+  color: #fff;
+  &-head {
+    padding: 0 32px;
+    height: 40px;
+    line-height: 40px;
+    background: #1d2948;
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    &-title {
+      font-size: 24px;
+      font-family: Microsoft YaHei;
+      font-weight: bold;
+      color: #51dee9;
+    }
+    &-tabs {
+      font-size: 16px;
+      font-family: Microsoft YaHei;
+      font-weight: 400;
+      color: #ffffff;
+      &-list {
+        margin-right: 60px;
+        cursor: pointer;
+        position: relative;
+        &:last-child {
+          margin-right: 0;
+        }
+      }
+      .active {
+        color: #51dee9;
+        &::after {
+          content: "";
+          position: absolute;
+          bottom: 0;
+          width: 80%;
+          left: 10%;
+          height: 2px;
+          background: #51dee9;
+        }
+      }
+    }
+    &-zw {
+      width: 190px;
+    }
+  }
+  &-content {
+    padding: 0 20px;
+    height: calc(100% - 40px);
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: column;
+    &-top {
+      width: 100%;
+      height: 65%;
+      &-left,
+      &-right {
+        width: calc(30% - 20px);
+        &-item {
+          width: 100%;
+          height: calc(50% - 20px);
+          margin: 20px 0;
+          display: flex;
+          flex-direction: column;
+          background-image: url("../../assets/home/pic_border.png");
+          background-repeat: no-repeat;
+          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 {
+              display: flex;
+              justify-content: flex-start;
+              align-items: center;
+              cursor: pointer;
+            }
+          }
+          &-bottom {
+            width: 100%;
+            flex: 1;
+            position: relative;
+            // margin-top: 10px;
+          }
+        }
+      }
+      &-center {
+        width: 40%;
+        box-sizing: border-box;
+        display: flex;
+        flex-direction: column;
+        &-top {
+          width: 100%;
+          height: 32px;
+          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 {
+            display: flex;
+            justify-content: flex-start;
+            align-items: center;
+            cursor: pointer;
+          }
+        }
+        &-bottom {
+          width: 100%;
+          flex: 1;
+          position: relative;
+          &-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;
+              }
+            }
+          }
+        }
+      }
+    }
+    &-bottom {
+      width: 100%;
+      flex: 1;
+      &-left,
+      &-right {
+        width: calc(30% - 20px);
+        display: flex;
+        flex-direction: column;
+        box-sizing: border-box;
+        background-image: url("../../assets/home/pic_border.png");
+        background-repeat: no-repeat;
+        background-size: 100% 100%;
+        padding: 13px;
+        box-sizing: border-box;
+        margin-top: 20px;
+        margin-bottom: 20px;
+        &-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 {
+            display: flex;
+            justify-content: flex-start;
+            align-items: center;
+            cursor: pointer;
+          }
+        }
+        &-bottom {
+          width: 100%;
+          flex: 1;
+          position: relative;
+          // margin-top: 10px;
+        }
+      }
+      &-center {
+        width: 40%;
+        padding: 13px;
+        margin-top: 20px;
+        margin-bottom: 20px;
+        box-sizing: border-box;
+        display: flex;
+        flex-direction: column;
+        background-image: url("../../assets/home/pic_border.png");
+        background-repeat: no-repeat;
+        background-size: 100% 100%;
+        background-position: center center;
+        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 {
+            display: flex;
+            justify-content: flex-start;
+            align-items: center;
+            cursor: pointer;
+          }
+        }
+        &-bottom {
+          width: 100%;
+          flex: 1;
+          position: relative;
+          // margin-top: 10px;
+        }
+      }
+    }
+    .pBox {
+      background-image: url("../../assets/home/pic_border.png");
+      background-repeat: no-repeat;
+      background-size: 100% 100%;
+    }
+  }
+}
+</style>

src/views/dashboard/indexIn.vue

@@ -0,0 +1,993 @@
+<template>
+  <div class="dashboard">
+    <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>
+      <!-- <div class="dashboard-head-zw"></div> -->
+    </div>
+    <div class="dashboard-content">
+      <div class="dashboard-content-top flex">
+        <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">
+                <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="ww1" :option="optionLeft" />
+            </div>
+          </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">
+                <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="ww12" :option="optionLeft" />
+            </div>
+          </div>
+        </div>
+        <!-- 地图 -->
+        <div class="dashboard-content-top-center">
+          <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>
+            <EchartsMap id="ww2" />
+          </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">
+                <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="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">
+                <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="airCompaneBaggage.option" />
+            </div>
+          </div>
+        </div>
+      </div>
+      <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">
+              <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="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">
+              <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="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>
+          <div class="dashboard-content-bottom-right-bottom">
+            <Echarts id="ww6" :option="airStutas.option" />
+          </div>
+        </div>
+      </div>
+    </div>
+    <Dialog :flag="flag" @resetForm="resetForm" @submitForm="submitForm">
+      <el-form :model="form" label-width="120px">
+        <el-form-item label="开始日期">
+          <el-date-picker :disabled-date="disabledStartDate" v-model="form.startDate" type="date" placeholder="请选择开始日期" size="default" format="YYYY/MM/DD" value-format="YYYY-MM-DD" />
+        </el-form-item>
+        <el-form-item label="结束日期">
+          <el-date-picker :disabled-date="disabledEndDate" v-model="form.endDate" type="date" placeholder="请选择结束日期" size="default" format="YYYY-MM-DD" value-format="YYYY-MM-DD" />
+        </el-form-item>
+      </el-form>
+    </Dialog>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted } from "vue";
+import Echarts from "@/components/Echarts/commonChartsBar.vue";
+import EchartsMap from "@/components/Echarts/commonChartsChinaMap.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(),
+});
+
+const disabledStartDate = (time: Date) => {
+  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();
+};
+
+const flag = ref(false);
+const resetForm = () => {
+  flag.value = false;
+};
+
+const submitForm = () => {
+  flag.value = false;
+};
+const tabs = [
+  {
+    id: 1,
+    label: "国内进港",
+    value: "one",
+  },
+  {
+    id: 2,
+    label: "国内出港",
+    value: "two",
+  },
+  {
+    id: 3,
+    label: "国际进港",
+    value: "three",
+  },
+  {
+    id: 4,
+    label: "国际出港",
+    value: "four",
+  },
+];
+const tabsIndex = ref(2);
+const optionLeft = {
+  tooltip: {
+    trigger: "axis",
+  },
+  // legend: {
+  //   data: ['运输总数', '托运旅客数'],
+  //   show: true,
+  //   top: 0,
+  //   icon: 'roundRect'
+  // },
+  grid: {
+    left: "0%",
+    right: "5%",
+    bottom: "0%",
+    top: "15%",
+    containLabel: true,
+  },
+  color: ["#F5BB3D", "#73D970", "#6A9DD9"],
+  xAxis: {
+    type: "category",
+    boundaryGap: true,
+    data: ["2021.12", "2022.01", "2022.02", "2022.03", "2022.04", "2022.05"],
+    axisLine: {
+      show: true,
+      lineStyle: {
+        color: "#8897BC",
+      },
+    },
+    axisTick: {
+      show: false,
+    },
+    axisLabel: {
+      color: "#8897BC",
+    },
+  },
+  yAxis: [
+    {
+      type: "value",
+      axisLabel: {
+        color: "#8897BC",
+        formatter: function (item) {
+          return item / 10000 + "万";
+        },
+      },
+      splitLine: {
+        lineStyle: {
+          type: "dashed",
+          color: "rgba(196,194,225, 0.54)",
+        },
+      },
+    },
+    {
+      type: "value",
+      axisLabel: {
+        color: "#8897BC",
+      },
+      splitLine: {
+        lineStyle: {
+          type: "dashed",
+          color: "rgba(196,194,225, 0.54)",
+        },
+      },
+    },
+  ],
+  series: [
+    {
+      name: "运输总数",
+      type: "line",
+      symbol: "none",
+      key: "bagsnum",
+      data: [120, 132, 101, 134, 90, 230, 210],
+      areaStyle: {
+        color: {
+          type: "linear",
+          x: 0,
+          y: 0,
+          x2: 0,
+          y2: 1,
+          colorStops: [
+            {
+              offset: 0,
+              color: "rgba(125,72,255,0.5)",
+            },
+            {
+              offset: 1,
+              color: "rgba(0,180,255,0.01)",
+            },
+          ],
+          global: false,
+        },
+      },
+    },
+    {
+      name: "托运旅客数",
+      type: "line",
+      symbol: "none",
+      key: "passengers",
+      data: [220, 182, 191, 234, 290, 330, 310],
+      areaStyle: {
+        color: {
+          type: "linear",
+          x: 0,
+          y: 0,
+          x2: 0,
+          y2: 1,
+          colorStops: [
+            {
+              offset: 0,
+              color: "rgba(125,72,255,0.5)",
+            },
+            {
+              offset: 1,
+              color: "rgba(0,180,255,0.01)",
+            },
+          ],
+          global: false,
+        },
+      },
+    },
+  ],
+};
+
+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 router = useRouter()
+const tabClick = (item, index) => {
+  tabsIndex.value = index;
+  if(index==0){
+    router.push({
+      path:'../homein'
+    })
+  }
+  if(index==1){
+    router.push({
+      path:'../homeOut'
+    })
+  }
+  if(index==2){
+    router.push({
+      path:'../indexIn'
+    })
+  }
+  if(index==3){
+    router.push({
+      path:'../indexOut'
+    })
+  }
+};
+
+const showDatePicker = () => {
+  flag.value = true;
+};
+
+onMounted(() => {
+  // getHourPeakData()
+});
+</script>
+
+<style lang="scss" scoped>
+.dashboard {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  left: 0;
+  top: 0;
+  background: linear-gradient(185deg, #1e305f, #0f1015);
+  z-index: 2000;
+  color: #fff;
+  &-head {
+    padding: 0 32px;
+    height: 40px;
+    line-height: 40px;
+    background: #1d2948;
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    &-title {
+      font-size: 24px;
+      font-family: Microsoft YaHei;
+      font-weight: bold;
+      color: #51dee9;
+    }
+    &-tabs {
+      font-size: 16px;
+      font-family: Microsoft YaHei;
+      font-weight: 400;
+      color: #ffffff;
+      &-list {
+        margin-right: 60px;
+        cursor: pointer;
+        position: relative;
+        &:last-child {
+          margin-right: 0;
+        }
+      }
+      .active {
+        color: #51dee9;
+        &::after {
+          content: "";
+          position: absolute;
+          bottom: 0;
+          width: 80%;
+          left: 10%;
+          height: 2px;
+          background: #51dee9;
+        }
+      }
+    }
+    &-zw {
+      width: 190px;
+    }
+  }
+  &-content {
+    padding: 0 20px;
+    height: calc(100% - 40px);
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: column;
+    &-top {
+      width: 100%;
+      height: 65%;
+      &-left,
+      &-right {
+        width: calc(30% - 20px);
+        &-item {
+          width: 100%;
+          height: calc(50% - 20px);
+          margin: 20px 0;
+          display: flex;
+          flex-direction: column;
+          background-image: url("../../assets/home/pic_border.png");
+          background-repeat: no-repeat;
+          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 {
+              display: flex;
+              justify-content: flex-start;
+              align-items: center;
+              cursor: pointer;
+            }
+          }
+          &-bottom {
+            width: 100%;
+            flex: 1;
+            position: relative;
+            // margin-top: 10px;
+          }
+        }
+      }
+      &-center {
+        width: 40%;
+        box-sizing: border-box;
+        display: flex;
+        flex-direction: column;
+        &-top {
+          width: 100%;
+          height: 32px;
+          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 {
+            display: flex;
+            justify-content: flex-start;
+            align-items: center;
+            cursor: pointer;
+          }
+        }
+        &-bottom {
+          width: 100%;
+          flex: 1;
+          position: relative;
+          &-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;
+              }
+            }
+          }
+        }
+      }
+    }
+    &-bottom {
+      width: 100%;
+      flex: 1;
+      &-left,
+      &-right {
+        width: calc(30% - 20px);
+        display: flex;
+        flex-direction: column;
+        box-sizing: border-box;
+        background-image: url("../../assets/home/pic_border.png");
+        background-repeat: no-repeat;
+        background-size: 100% 100%;
+        padding: 13px;
+        box-sizing: border-box;
+        margin-top: 20px;
+        margin-bottom: 20px;
+        &-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 {
+            display: flex;
+            justify-content: flex-start;
+            align-items: center;
+            cursor: pointer;
+          }
+        }
+        &-bottom {
+          width: 100%;
+          flex: 1;
+          position: relative;
+          // margin-top: 10px;
+        }
+      }
+      &-center {
+        width: 40%;
+        padding: 13px;
+        margin-top: 20px;
+        margin-bottom: 20px;
+        box-sizing: border-box;
+        display: flex;
+        flex-direction: column;
+        background-image: url("../../assets/home/pic_border.png");
+        background-repeat: no-repeat;
+        background-size: 100% 100%;
+        background-position: center center;
+        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 {
+            display: flex;
+            justify-content: flex-start;
+            align-items: center;
+            cursor: pointer;
+          }
+        }
+        &-bottom {
+          width: 100%;
+          flex: 1;
+          position: relative;
+          // margin-top: 10px;
+        }
+      }
+    }
+    .pBox {
+      background-image: url("../../assets/home/pic_border.png");
+      background-repeat: no-repeat;
+      background-size: 100% 100%;
+    }
+  }
+}
+</style>

src/views/dashboard/indexOut.vue

@@ -0,0 +1,1001 @@
+<template>
+  <div class="dashboard">
+    <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>
+      <!-- <div class="dashboard-head-zw"></div> -->
+    </div>
+    <div class="dashboard-content">
+      <div class="dashboard-content-top flex">
+        <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">
+                <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="ww1" :option="optionLeft" />
+            </div>
+          </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">
+                <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="ww12" :option="optionLeft" />
+            </div>
+          </div>
+        </div>
+        <!-- 地图 -->
+        <div class="dashboard-content-top-center">
+          <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>
+            <EchartsMap id="ww2" />
+          </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">
+                <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="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">
+                <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="airCompaneBaggage.option" />
+            </div>
+          </div>
+        </div>
+      </div>
+      <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">
+              <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="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">
+              <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="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>
+          <div class="dashboard-content-bottom-right-bottom">
+            <Echarts id="ww6" :option="airStutas.option" />
+          </div>
+        </div>
+      </div>
+    </div>
+    <Dialog :flag="flag" @resetForm="resetForm" @submitForm="submitForm">
+      <el-form :model="form" label-width="120px">
+        <el-form-item label="开始日期">
+          <el-date-picker :disabled-date="disabledStartDate" v-model="form.startDate" type="date" placeholder="请选择开始日期" size="default" format="YYYY/MM/DD" value-format="YYYY-MM-DD" />
+        </el-form-item>
+        <el-form-item label="结束日期">
+          <el-date-picker :disabled-date="disabledEndDate" v-model="form.endDate" type="date" placeholder="请选择结束日期" size="default" format="YYYY-MM-DD" value-format="YYYY-MM-DD" />
+        </el-form-item>
+      </el-form>
+    </Dialog>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted } from "vue";
+import Echarts from "@/components/Echarts/commonChartsBar.vue";
+import EchartsMap from "@/components/Echarts/commonChartsChinaMap.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(),
+});
+
+const disabledStartDate = (time: Date) => {
+  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();
+};
+
+const flag = ref(false);
+const resetForm = () => {
+  flag.value = false;
+};
+
+const submitForm = () => {
+  flag.value = false;
+};
+const tabs = [
+  {
+    id: 1,
+    label: "国内进港",
+    value: "one",
+  },
+  {
+    id: 2,
+    label: "国内出港",
+    value: "two",
+  },
+  {
+    id: 3,
+    label: "国际进港",
+    value: "three",
+  },
+  {
+    id: 4,
+    label: "国际出港",
+    value: "four",
+  },
+];
+const tabsIndex = ref(3);
+const optionLeft = {
+  tooltip: {
+    trigger: "axis",
+  },
+  // legend: {
+  //   data: ['运输总数', '托运旅客数'],
+  //   show: true,
+  //   top: 0,
+  //   icon: 'roundRect'
+  // },
+  grid: {
+    left: "0%",
+    right: "5%",
+    bottom: "0%",
+    top: "15%",
+    containLabel: true,
+  },
+  color: ["#F5BB3D", "#73D970", "#6A9DD9"],
+  xAxis: {
+    type: "category",
+    boundaryGap: true,
+    data: ["2021.12", "2022.01", "2022.02", "2022.03", "2022.04", "2022.05"],
+    axisLine: {
+      show: true,
+      lineStyle: {
+        color: "#8897BC",
+      },
+    },
+    axisTick: {
+      show: false,
+    },
+    axisLabel: {
+      color: "#8897BC",
+    },
+  },
+  yAxis: [
+    {
+      type: "value",
+      axisLabel: {
+        color: "#8897BC",
+        formatter: function (item) {
+          return item / 10000 + "万";
+        },
+      },
+      splitLine: {
+        lineStyle: {
+          type: "dashed",
+          color: "rgba(196,194,225, 0.54)",
+        },
+      },
+    },
+    {
+      type: "value",
+      axisLabel: {
+        color: "#8897BC",
+      },
+      splitLine: {
+        lineStyle: {
+          type: "dashed",
+          color: "rgba(196,194,225, 0.54)",
+        },
+      },
+    },
+  ],
+  series: [
+    {
+      name: "运输总数",
+      type: "line",
+      symbol: "none",
+      key: "bagsnum",
+      data: [120, 132, 101, 134, 90, 230, 210],
+      areaStyle: {
+        color: {
+          type: "linear",
+          x: 0,
+          y: 0,
+          x2: 0,
+          y2: 1,
+          colorStops: [
+            {
+              offset: 0,
+              color: "rgba(125,72,255,0.5)",
+            },
+            {
+              offset: 1,
+              color: "rgba(0,180,255,0.01)",
+            },
+          ],
+          global: false,
+        },
+      },
+    },
+    {
+      name: "托运旅客数",
+      type: "line",
+      symbol: "none",
+      key: "passengers",
+      data: [220, 182, 191, 234, 290, 330, 310],
+      areaStyle: {
+        color: {
+          type: "linear",
+          x: 0,
+          y: 0,
+          x2: 0,
+          y2: 1,
+          colorStops: [
+            {
+              offset: 0,
+              color: "rgba(125,72,255,0.5)",
+            },
+            {
+              offset: 1,
+              color: "rgba(0,180,255,0.01)",
+            },
+          ],
+          global: false,
+        },
+      },
+    },
+  ],
+};
+
+const airlineAbnormalBaggage = ref({
+  component: "commonChartsBar",
+  option: {
+    baseOption: {
+      legend: {
+        data: ["报警", "预警"],
+        right: "20",
+        textStyle: {
+          color: "#8897BC",
+        },
+        // top:"-10"
+      },
+      color: ["#EC3B71", "#E5B35C"],
+      dataZoom:[
+      {
+            id: 'dataZoomX',
+            type: 'slider',
+            filterMode: 'filter',
+            height: 13,
+            bottom:"3%"
+        }
+      ],
+      grid: {
+        bottom: "20%",
+        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) / 11 - 3 + "%",
+      text: month,
+      textStyle: {
+        fontSize: 12,
+        fontWeight: "normal",
+        color: "#698dc3",
+      },
+    })),
+    singleAxis: node.map((month, index) => ({
+      type: "category",
+      data: hours,
+      top: ((index + 0.5) * 100) / 11 - 3 + "%",
+      height: 100 / 11 - 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 router = useRouter()
+const tabClick = (item, index) => {
+  tabsIndex.value = index;
+  if(index==0){
+    router.push({
+      path:'../homein'
+    })
+  }
+  if(index==1){
+    router.push({
+      path:'../homeOut'
+    })
+  }
+  if(index==2){
+    router.push({
+      path:'../indexIn'
+    })
+  }
+  if(index==3){
+    router.push({
+      path:'../indexOut'
+    })
+  }
+};
+const showDatePicker = () => {
+  flag.value = true;
+};
+
+onMounted(() => {
+  // getHourPeakData()
+});
+</script>
+
+<style lang="scss" scoped>
+.dashboard {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  left: 0;
+  top: 0;
+  background: linear-gradient(185deg, #1e305f, #0f1015);
+  z-index: 2000;
+  color: #fff;
+  &-head {
+    padding: 0 32px;
+    height: 40px;
+    line-height: 40px;
+    background: #1d2948;
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    &-title {
+      font-size: 24px;
+      font-family: Microsoft YaHei;
+      font-weight: bold;
+      color: #51dee9;
+    }
+    &-tabs {
+      font-size: 16px;
+      font-family: Microsoft YaHei;
+      font-weight: 400;
+      color: #ffffff;
+      &-list {
+        margin-right: 60px;
+        cursor: pointer;
+        position: relative;
+        &:last-child {
+          margin-right: 0;
+        }
+      }
+      .active {
+        color: #51dee9;
+        &::after {
+          content: "";
+          position: absolute;
+          bottom: 0;
+          width: 80%;
+          left: 10%;
+          height: 2px;
+          background: #51dee9;
+        }
+      }
+    }
+    &-zw {
+      width: 190px;
+    }
+  }
+  &-content {
+    padding: 0 20px;
+    height: calc(100% - 40px);
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: column;
+    &-top {
+      width: 100%;
+      height: 65%;
+      &-left,
+      &-right {
+        width: calc(30% - 20px);
+        &-item {
+          width: 100%;
+          height: calc(50% - 20px);
+          margin: 20px 0;
+          display: flex;
+          flex-direction: column;
+          background-image: url("../../assets/home/pic_border.png");
+          background-repeat: no-repeat;
+          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 {
+              display: flex;
+              justify-content: flex-start;
+              align-items: center;
+              cursor: pointer;
+            }
+          }
+          &-bottom {
+            width: 100%;
+            flex: 1;
+            position: relative;
+            // margin-top: 10px;
+          }
+        }
+      }
+      &-center {
+        width: 40%;
+        box-sizing: border-box;
+        display: flex;
+        flex-direction: column;
+        &-top {
+          width: 100%;
+          height: 32px;
+          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 {
+            display: flex;
+            justify-content: flex-start;
+            align-items: center;
+            cursor: pointer;
+          }
+        }
+        &-bottom {
+          width: 100%;
+          flex: 1;
+          position: relative;
+          &-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;
+              }
+            }
+          }
+        }
+      }
+    }
+    &-bottom {
+      width: 100%;
+      flex: 1;
+      &-left,
+      &-right {
+        width: calc(30% - 20px);
+        display: flex;
+        flex-direction: column;
+        box-sizing: border-box;
+        background-image: url("../../assets/home/pic_border.png");
+        background-repeat: no-repeat;
+        background-size: 100% 100%;
+        padding: 13px;
+        box-sizing: border-box;
+        margin-top: 20px;
+        margin-bottom: 20px;
+        &-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 {
+            display: flex;
+            justify-content: flex-start;
+            align-items: center;
+            cursor: pointer;
+          }
+        }
+        &-bottom {
+          width: 100%;
+          flex: 1;
+          position: relative;
+          // margin-top: 10px;
+        }
+      }
+      &-center {
+        width: 40%;
+        padding: 13px;
+        margin-top: 20px;
+        margin-bottom: 20px;
+        box-sizing: border-box;
+        display: flex;
+        flex-direction: column;
+        background-image: url("../../assets/home/pic_border.png");
+        background-repeat: no-repeat;
+        background-size: 100% 100%;
+        background-position: center center;
+        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 {
+            display: flex;
+            justify-content: flex-start;
+            align-items: center;
+            cursor: pointer;
+          }
+        }
+        &-bottom {
+          width: 100%;
+          flex: 1;
+          position: relative;
+          // margin-top: 10px;
+        }
+      }
+    }
+    .pBox {
+      background-image: url("../../assets/home/pic_border.png");
+      background-repeat: no-repeat;
+      background-size: 100% 100%;
+    }
+  }
+}
+</style>