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

src/views/dashboard/components/comHead.vue

@@ -2,13 +2,7 @@
   <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"
-      >
+      <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>
@@ -19,6 +13,12 @@
 <script setup lang="ts">
 import { ref } from "vue";
 const router = useRouter();
+const props = defineProps({
+  tabsIndex: {
+    type: Number,
+    default: 0,
+  },
+});
 const tabs = [
   {
     id: 1,
@@ -41,9 +41,8 @@ const tabs = [
     value: "four",
   },
 ];
-const tabsIndex = ref(0);
+const { tabsIndex } = props;
 const tabClick = (item, index) => {
-  tabsIndex.value = index;
   if (index == 0) {
     router.push({
       path: "../homein",

src/views/dashboard/hooks/usePublic.ts

@@ -1,94 +1,94 @@
 export function usePublic() {
   const optionLeft = {
     tooltip: {
-      trigger: "axis",
+      trigger: 'axis',
     },
     legend: {
       show: true,
       top: 0,
-      left: "30%",
-      icon: "roundRect",
+      left: '30%',
+      icon: 'roundRect',
     },
     grid: {
-      left: "0%",
-      right: "5%",
-      bottom: "0%",
-      top: "15%",
+      left: '0%',
+      right: '5%',
+      bottom: '0%',
+      top: '15%',
       containLabel: true,
     },
-    color: ["#F5BB3D", "#73D970", "#6A9DD9"],
+    color: ['#F5BB3D', '#73D970', '#6A9DD9'],
     xAxis: {
-      type: "category",
+      type: 'category',
       boundaryGap: true,
       data: [
-        "0:00",
-        "2:00",
-        "4:00",
-        "6:00",
-        "8:00",
-        "10:00",
-        "12:00",
-        "14:00",
-        "16:00",
-        "18:00",
-        "20:00",
-        "22:00",
+        '0:00',
+        '2:00',
+        '4:00',
+        '6:00',
+        '8:00',
+        '10:00',
+        '12:00',
+        '14:00',
+        '16:00',
+        '18:00',
+        '20:00',
+        '22:00',
       ],
       axisLine: {
         show: true,
         lineStyle: {
-          color: "#8897BC",
+          color: '#8897BC',
         },
       },
       axisTick: {
         show: false,
       },
       axisLabel: {
-        color: "#8897BC",
+        color: '#8897BC',
       },
     },
     yAxis: [
       {
-        type: "value",
+        type: 'value',
         axisLabel: {
-          color: "#8897BC",
+          color: '#8897BC',
           formatter: function (item) {
-            return item / 10000 + "万";
+            return item / 10000 + '万'
           },
         },
         splitLine: {
           lineStyle: {
-            type: "dashed",
-            color: "rgba(196,194,225, 0.54)",
+            type: 'dashed',
+            color: 'rgba(196,194,225, 0.54)',
           },
         },
-        name: "单",
+        name: '单',
       },
       {
-        type: "value",
+        type: 'value',
         axisLabel: {
-          color: "#8897BC",
+          color: '#8897BC',
         },
         splitLine: {
           lineStyle: {
-            type: "dashed",
-            color: "rgba(196,194,225, 0.54)",
+            type: 'dashed',
+            color: 'rgba(196,194,225, 0.54)',
           },
         },
-        name: "吨",
+        name: '吨',
       },
     ],
     series: [
       {
-        name: "运单/单",
-        type: "line",
-        symbol: "none",
-        key: "bagsnum",
+        name: '运单/单',
+        type: 'line',
+        symbol: 'none',
+        key: 'bagsnum',
         yAxisIndex: 0,
         data: [120, 132, 101, 134, 90, 230, 210, 132, 101, 134, 90, 230],
         areaStyle: {
           color: {
-            type: "linear",
+            type: 'linear',
             x: 0,
             y: 0,
             x2: 0,
@@ -96,11 +96,11 @@ export function usePublic() {
             colorStops: [
               {
                 offset: 0,
-                color: "rgba(125,72,255,0.5)",
+                color: 'rgba(125,72,255,0.5)',
               },
               {
                 offset: 1,
-                color: "rgba(0,180,255,0.01)",
+                color: 'rgba(0,180,255,0.01)',
               },
             ],
             global: false,
@@ -108,15 +108,15 @@ export function usePublic() {
         },
       },
       {
-        name: "重量/吨",
-        type: "line",
-        symbol: "none",
+        name: '重量/吨',
+        type: 'line',
+        symbol: 'none',
         yAxisIndex: 1,
-        key: "passengers",
+        key: 'passengers',
         data: [220, 182, 191, 234, 290, 330, 310, 132, 101, 134, 90, 230],
         areaStyle: {
           color: {
-            type: "linear",
+            type: 'linear',
             x: 0,
             y: 0,
             x2: 0,
@@ -124,11 +124,11 @@ export function usePublic() {
             colorStops: [
               {
                 offset: 0,
-                color: "rgba(125,72,255,0.5)",
+                color: 'rgba(125,72,255,0.5)',
               },
               {
                 offset: 1,
-                color: "rgba(0,180,255,0.01)",
+                color: 'rgba(0,180,255,0.01)',
               },
             ],
             global: false,
@@ -136,161 +136,161 @@ export function usePublic() {
         },
       },
     ],
-  };
+  }
   const airlineAbnormalBaggage = {
-    component: "commonChartsBar",
+    component: 'commonChartsBar',
     option: {
       baseOption: {
         tooltip: {
-          trigger: "axis",
+          trigger: 'axis',
           valueFormatter: function (value) {
-            return value + "单";
+            return value + '单'
           },
         },
         legend: {
-          data: ["报警", "预警"],
-          right: "20%",
+          data: ['报警', '预警'],
+          right: '20%',
           textStyle: {
-            color: "#8897BC",
+            color: '#8897BC',
           },
           // top:"-10"
         },
-        color: ["#EC3B71", "#E5B35C"],
+        color: ['#EC3B71', '#E5B35C'],
         grid: {
-          bottom: "10%",
-          left: "5%",
-          right: "1%",
-          top: "15%",
+          bottom: '10%',
+          left: '5%',
+          right: '1%',
+          top: '15%',
         },
         xAxis: {
-          data: ["卸机", "机下交接", "货站交接", "提取"],
+          data: ['卸机', '机下交接', '货站交接', '提取'],
           axisLine: {
             show: true,
             lineStyle: {
-              color: "#8897BC",
+              color: '#8897BC',
             },
           },
           axisTick: {
             show: false,
           },
           axisLabel: {
-            color: "#8897BC",
+            color: '#8897BC',
           },
         },
         yAxis: {
-          type: "value",
+          type: 'value',
           axisLabel: {
-            color: "#8897BC",
+            color: '#8897BC',
           },
           splitLine: {
             lineStyle: {
-              type: "dashed",
-              color: "rgba(196,194,225, 0.54)",
+              type: 'dashed',
+              color: 'rgba(196,194,225, 0.54)',
             },
           },
-          name: "单",
+          name: '单',
         },
         series: [
           {
-            name: "报警",
-            type: "bar",
+            name: '报警',
+            type: 'bar',
             data: [11, 16, 4, 6],
           },
           {
-            name: "预警",
-            type: "bar",
+            name: '预警',
+            type: 'bar',
             data: [11, 15, 17, 4],
           },
         ],
       },
     },
-  };
+  }
   const airCompaneBaggage = {
-    component: "commonChartsBar",
+    component: 'commonChartsBar',
     option: {
       baseOption: {
         tooltip: {
-          trigger: "axis",
+          trigger: 'axis',
         },
         legend: {
-          data: ["运单/单", "重量/吨"],
-          right: "20%",
+          data: ['运单/单', '重量/吨'],
+          right: '20%',
           textStyle: {
-            color: "#8897BC",
+            color: '#8897BC',
           },
         },
-        color: ["#51DEE9", "#4C88E1"],
+        color: ['#51DEE9', '#4C88E1'],
         grid: {
-          bottom: "10%",
-          left: "13%",
-          right: "8%",
-          top: "15%",
+          bottom: '10%',
+          left: '13%',
+          right: '8%',
+          top: '15%',
         },
         xAxis: {
-          data: ["国航", "南航", "深航", "东航", "海航", "国泰", "川航"],
+          data: ['国航', '南航', '深航', '东航', '海航', '国泰', '川航'],
           axisLine: {
             show: true,
             lineStyle: {
-              color: "#8897BC",
+              color: '#8897BC',
             },
           },
           axisTick: {
             show: false,
           },
           axisLabel: {
-            color: "#8897BC",
+            color: '#8897BC',
           },
         },
         yAxis: [
           {
-            type: "value",
+            type: 'value',
             axisLabel: {
-              color: "#8897BC",
+              color: '#8897BC',
               formatter: function (item) {
-                return item / 10000 + "万";
+                return item / 10000 + '万'
               },
             },
             splitLine: {
               lineStyle: {
-                type: "dashed",
-                color: "rgba(196,194,225, 0.54)",
+                type: 'dashed',
+                color: 'rgba(196,194,225, 0.54)',
               },
             },
-            name: "单",
+            name: '单',
           },
           {
-            type: "value",
+            type: 'value',
             axisLabel: {
-              color: "#8897BC",
+              color: '#8897BC',
             },
             splitLine: {
               lineStyle: {
-                type: "dashed",
-                color: "rgba(196,194,225, 0.54)",
+                type: 'dashed',
+                color: 'rgba(196,194,225, 0.54)',
               },
             },
-            name: "吨",
+            name: '吨',
           },
         ],
         series: [
           {
-            name: "运单/单",
-            type: "bar",
+            name: '运单/单',
+            type: 'bar',
             data: [12, 10, 15, 11, 16, 4, 6],
             yAxisIndex: 0,
           },
           {
-            name: "重量/吨",
-            type: "bar",
+            name: '重量/吨',
+            type: 'bar',
             data: [11, 15, 17, 8, 1, 4, 6],
             yAxisIndex: 1,
           },
         ],
       },
     },
-  };
+  }
   const airStutas = {
-    component: "commonChartsBar",
+    component: 'commonChartsBar',
     option: {
       baseOption: {
         // legend: {
@@ -302,103 +302,103 @@ export function usePublic() {
         //   // top:"-10"
         // },
         tooltip: {
-          trigger: "axis",
+          trigger: 'axis',
           valueFormatter: function (value) {
-            return value + "单";
+            return value + '单'
           },
         },
-        color: ["#51DEE9", "#4C88E1"],
+        color: ['#51DEE9', '#4C88E1'],
         grid: {
-          bottom: "10%",
-          left: "5%",
-          right: "1%",
-          top: "15%",
+          bottom: '10%',
+          left: '5%',
+          right: '1%',
+          top: '15%',
         },
         xAxis: {
-          data: ["机下交接", "货站交接", "理货"],
+          data: ['机下交接', '货站交接', '理货'],
           axisLine: {
             show: true,
             lineStyle: {
-              color: "#8897BC",
+              color: '#8897BC',
             },
           },
           axisTick: {
             show: false,
           },
           axisLabel: {
-            color: "#8897BC",
+            color: '#8897BC',
           },
         },
         yAxis: {
-          type: "value",
+          type: 'value',
           axisLabel: {
-            color: "#8897BC",
+            color: '#8897BC',
           },
           splitLine: {
             lineStyle: {
-              type: "dashed",
-              color: "rgba(196,194,225, 0.54)",
+              type: 'dashed',
+              color: 'rgba(196,194,225, 0.54)',
             },
           },
-          name: "单",
+          name: '单',
         },
         series: [
           {
-            type: "bar",
+            type: 'bar',
             data: [12, 10, 15],
           },
         ],
       },
     },
-  };
+  }
   const nodeEfficiency = {
-    component: "commonChartsLine",
+    component: 'commonChartsLine',
     option: {
       tooltip: {
-        trigger: "axis",
+        trigger: 'axis',
         valueFormatter: function (value) {
-          return value + "秒";
+          return value + '秒'
         },
       },
       legend: {
-        top: "1%",
-        right: "5%",
-        data: ["平均时间", "最长时间", "最短时间"],
+        top: '1%',
+        right: '5%',
+        data: ['平均时间', '最长时间', '最短时间'],
         itemWidth: 25,
         itemHeight: 14,
       },
       grid: {
-        bottom: "10%",
-        left: "1%",
-        right: "1%",
-        top: "15%",
+        bottom: '10%',
+        left: '1%',
+        right: '1%',
+        top: '15%',
       },
-      color: ["#3ca4fc", "#f1ce7c", "#36ccba"],
+      color: ['#3ca4fc', '#f1ce7c', '#36ccba'],
       xAxis: {
         axisLabel: {
           interval: 0,
         },
-        data: ["卸机", "机下交接", "货站交接", "提取"],
+        data: ['卸机', '机下交接', '货站交接', '提取'],
       },
       yAxis: {
-        type: "value",
+        type: 'value',
         axisLabel: {
-          color: "#8897BC",
+          color: '#8897BC',
         },
         splitLine: {
           lineStyle: {
-            type: "dashed",
-            color: "rgba(196,194,225, 0.54)",
+            type: 'dashed',
+            color: 'rgba(196,194,225, 0.54)',
           },
         },
-        name: "单位：秒",
+        name: '单位：秒',
       },
       series: [
         {
-          name: "平均时间",
-          type: "line",
+          name: '平均时间',
+          type: 'line',
           smooth: true,
-          stack: "",
+          stack: '',
           areaStyle: {
             opacity: 0,
           },
@@ -418,10 +418,10 @@ export function usePublic() {
           ],
         },
         {
-          name: "最长时间",
-          type: "line",
+          name: '最长时间',
+          type: 'line',
           smooth: true,
-          stack: "",
+          stack: '',
           areaStyle: {
             opacity: 0,
           },
@@ -441,10 +441,10 @@ export function usePublic() {
           ],
         },
         {
-          name: "最短时间",
-          type: "line",
+          name: '最短时间',
+          type: 'line',
           smooth: true,
-          stack: "",
+          stack: '',
           areaStyle: {
             opacity: 0,
           },
@@ -465,35 +465,35 @@ export function usePublic() {
         },
       ],
     },
-  };
-  const node = ["卸机", "机下交接", "货站交接", "提取"];
+  }
+  const node = ['卸机', '机下交接', '货站交接', '提取']
 
-  const hours = Array.from({ length: 24 }, (v, i) => i + 1);
+  const hours = Array.from({ length: 24 }, (v, i) => i + 1)
   const hourPeak = {
-    component: "commonChartsScatter",
+    component: 'commonChartsScatter',
     option: {
       tooltip: {
-        trigger: "axis",
+        trigger: 'axis',
         valueFormatter: function (value) {
-          return value + "单";
+          return value + '单'
         },
       },
       title: node.map((month, index) => ({
-        top: ((index + 0.5) * 100) / 4 - 3 + "%",
+        top: ((index + 0.5) * 100) / 4 - 3 + '%',
         text: month,
         textStyle: {
           fontSize: 12,
-          fontWeight: "normal",
-          color: "#698dc3",
+          fontWeight: 'normal',
+          color: '#698dc3',
         },
       })),
       singleAxis: node.map((month, index) => ({
-        type: "category",
+        type: 'category',
         data: hours,
-        top: ((index + 0.5) * 100) / 4 - 3 + "%",
-        height: 100 / 4 - 5 + "%",
-        left: "12%",
-        right: "1%",
+        top: ((index + 0.5) * 100) / 4 - 3 + '%',
+        height: 100 / 4 - 5 + '%',
+        left: '12%',
+        right: '1%',
         axisTick: {
           show: false,
         },
@@ -503,8 +503,8 @@ export function usePublic() {
       })),
       series: node.map((month, index) => ({
         singleAxisIndex: index,
-        coordinateSystem: "singleAxis",
-        type: "scatter",
+        coordinateSystem: 'singleAxis',
+        type: 'scatter',
         data: [
           3,
           6,
@@ -532,11 +532,63 @@ export function usePublic() {
           5,
         ],
         symbolSize: function (dataItem) {
-          return dataItem * 3;
+          return dataItem * 3
         },
       })),
     },
-  };
+  }
+  const hkArr = [
+    {
+      id: 1,
+      cname: '本年',
+      cvalue: '1000',
+      dname: '同期',
+      dvalue: '1100',
+    },
+    {
+      id: 2,
+      cname: '本年',
+      cvalue: '1000',
+      dname: '同期',
+      dvalue: '1100',
+    },
+    {
+      id: 3,
+      cname: '本年',
+      cvalue: '1000',
+      dname: '同期',
+      dvalue: '1100',
+    },
+  ]
+  const hkData = [
+    {
+      id: 1,
+      cname: '本年',
+      cvalue: '1000',
+      dname: '同期',
+      dvalue: '1100',
+      ename: '重量',
+      evalue: '1100',
+    },
+    {
+      id: 2,
+      cname: '本年',
+      cvalue: '1000',
+      dname: '同期',
+      dvalue: '1100',
+      ename: '重量',
+      evalue: '1100',
+    },
+    {
+      id: 3,
+      cname: '本年',
+      cvalue: '1000',
+      dname: '同期',
+      dvalue: '1100',
+      ename: '重量',
+      evalue: '1100',
+    },
+  ]
   return {
     optionLeft,
     airlineAbnormalBaggage,
@@ -544,5 +596,7 @@ export function usePublic() {
     airStutas,
     nodeEfficiency,
     hourPeak,
-  };
+    hkArr,
+    hkData,
+  }
 }

src/views/dashboard/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="dashboard">
-    <ComHead />
+    <ComHead :tabs-index="0" />
     <div class="dashboard-content">
       <div class="dashboard-content-top flex">
         <div class="dashboard-content-top-left">
@@ -9,10 +9,7 @@
               <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-time" @click="showDatePicker">
                 <el-icon color="#ffffff" size="18">
                   <Calendar />
                 </el-icon>
@@ -30,10 +27,7 @@
               <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-time" @click="showDatePicker">
                 <el-icon color="#ffffff" size="18">
                   <Calendar />
                 </el-icon>
@@ -55,37 +49,19 @@
               <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 v-for="(item,index) in capArr" :key="index" class="dashboard-content-top-center-bottom-box1-info">
+                <div>{{item.cname}}：{{item.cvalue}}</div>
+                <div>{{item.dname}}：{{item.dvalue}}</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 v-for="(item,index) in capData" :key="index" class="dashboard-content-top-center-bottom-box2-info">
+                <div>{{item.cname}}：{{item.cvalue}}</div>
+                <div>{{item.dname}}：{{item.dvalue}}</div>
+                <div>{{item.ename}}：{{item.evalue}}</div>
               </div>
             </div>
             <EchartsMap id="ww2" />
@@ -97,10 +73,7 @@
               <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-time" @click="showDatePicker">
                 <el-icon color="#ffffff" size="18">
                   <Calendar />
                 </el-icon>
@@ -118,10 +91,7 @@
               <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-time" @click="showDatePicker">
                 <el-icon color="#ffffff" size="18">
                   <Calendar />
                 </el-icon>
@@ -142,10 +112,7 @@
             <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-time" @click="showDatePicker">
               <el-icon color="#ffffff" size="18">
                 <Calendar />
               </el-icon>
@@ -163,10 +130,7 @@
             <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-time" @click="showDatePicker">
               <el-icon color="#ffffff" size="18">
                 <Calendar />
               </el-icon>
@@ -194,26 +158,10 @@
     <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-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-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>
@@ -221,13 +169,12 @@
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted } from "vue";
+import { ref } from "vue";
 import Echarts from "@/components/Echarts/commonChartsBar.vue";
 import EchartsMap from "@/components/Echarts/commonChartsChinaMap.vue";
 import ComHead from "./components/comHead.vue";
 import { Calendar, CaretBottom } from "@element-plus/icons-vue";
 import Dialog from "@/components/dialog/index.vue";
-import axios from "axios";
 import { usePublic } from "./hooks/usePublic";
 const {
   optionLeft,
@@ -236,8 +183,11 @@ const {
   airStutas,
   nodeEfficiency,
   hourPeak,
+  hkArr,
+  hkData,
 } = usePublic();
-const title = ref("决策管理驾驶舱");
+const capArr = ref(hkArr);
+const capData = ref(hkData);
 const form = ref({
   startDate: Date.now(),
   endDate: Date.now(),
@@ -260,32 +210,10 @@ const resetForm = () => {
 const submitForm = () => {
   flag.value = false;
 };
-const tabsIndex = ref(0);
-
-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.option.series[index].data = item.data;
-        });
-      } else {
-        // this.$message.error('小时高峰量统计分析-初始化数据失败')
-      }
-    })
-    .catch((err) => {
-      // this.$message.error(err)
-    });
-};
 
 const showDatePicker = () => {
   flag.value = true;
 };
-
-onMounted(() => {
-  // getHourPeakData()
-});
 </script>
 
 <style lang="scss" scoped>

src/views/dashboard/indexHomeOut.vue

@@ -1,14 +1,6 @@
 <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>
+    <ComHead :tabs-index="1" />
     <div class="dashboard-content">
       <div class="dashboard-content-top flex">
         <div class="dashboard-content-top-left">
@@ -54,36 +46,22 @@
           <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 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 v-for="(item,index) in capArr" :key="index" class="dashboard-content-top-center-bottom-box1-info">
+                <div>{{item.cname}}：{{item.cvalue}}</div>
+                <div>{{item.dname}}：{{item.dvalue}}</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 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 v-for="(item,index) in capData" :key="index" class="dashboard-content-top-center-bottom-box2-info">
+                <div>{{item.cname}}：{{item.cvalue}}</div>
+                <div>{{item.dname}}：{{item.dvalue}}</div>
+                <div>{{item.ename}}：{{item.evalue}}</div>
               </div>
             </div>
             <EchartsMap id="ww2" />
@@ -105,7 +83,6 @@
               </div>
             </div>
             <div class="dashboard-content-top-right-item-bottom">
-
               <Echarts id="ww3" :option="airlineAbnormalBaggage.option" />
             </div>
           </div>
@@ -192,13 +169,25 @@
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted } from "vue";
+import { ref } from "vue";
 import Echarts from "@/components/Echarts/commonChartsBar.vue";
 import EchartsMap from "@/components/Echarts/commonChartsChinaMap.vue";
+import ComHead from "./components/comHead.vue";
 import { Calendar, CaretBottom } from "@element-plus/icons-vue";
 import Dialog from "@/components/dialog/index.vue";
-import axios from "axios";
-const title = ref("决策管理驾驶舱");
+import { usePublic } from "./hooks/usePublic";
+const {
+  optionLeft,
+  airlineAbnormalBaggage,
+  airCompaneBaggage,
+  airStutas,
+  nodeEfficiency,
+  hourPeak,
+  hkArr,
+  hkData,
+} = usePublic();
+const capArr = ref(hkArr);
+const capData = ref(hkData);
 const form = ref({
   startDate: Date.now(),
   endDate: Date.now(),
@@ -221,852 +210,12 @@ const resetForm = () => {
 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: {
-    show: true,
-    top: 0,
-    left:'30%',
-    icon: 'roundRect'
-  },
-  grid: {
-    left: "0%",
-    right: "5%",
-    bottom: "0%",
-    top: "15%",
-    containLabel: true,
-  },
-  color: ["#F5BB3D", "#73D970", "#6A9DD9"],
-  xAxis: {
-    type: "category",
-    boundaryGap: true,
-    data: ["0:00", "2:00", "4:00", "6:00", "8:00", "10:00", "12:00", "14:00", "16:00", "18:00", "20:00", "22:00"],
-    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)",
-        },
-      },
-      name:"单"
-    },
-    {
-      type: "value",
-      axisLabel: {
-        color: "#8897BC",
-      },
-      splitLine: {
-        lineStyle: {
-          type: "dashed",
-          color: "rgba(196,194,225, 0.54)",
-        },
-      },
-      name:"吨"
-    },
-  ],
-  series: [
-    {
-      name: "运单/单",
-      type: "line",
-      symbol: "none",
-      key: "bagsnum",
-      yAxisIndex: 0,
-      data: [120, 132, 101, 134, 90, 230, 210,132, 101, 134, 90, 230],
-      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",
-      yAxisIndex: 1,
-      key: "passengers",
-      data: [220, 182, 191, 234, 290, 330, 310, 132, 101, 134, 90, 230],
-      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: {
-      tooltip: {
-        trigger: "axis",
-        valueFormatter:function(value){
-          return value +"单"
-        }
-      },
-      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)",
-          },
-        },
-        name:'单'
-      },
-      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: {
-      tooltip: {
-        trigger: "axis",
-      },
-      legend: {
-        data: ["运单/单", "重量/吨"],
-        right: "20%",
-        textStyle: {
-          color: "#8897BC",
-        },
-      },
-      color: ["#51DEE9", "#4C88E1"],
-      grid: {
-        bottom: "10%",
-        left: "13%",
-        right: "8%",
-        top: "15%",
-      },
-      xAxis: {
-        data: ["国航", "南航", "深航", "东航", "海航", "国泰", "川航"],
-        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)",
-        },
-      },
-      name:"单"
-    },
-    {
-      type: "value",
-      axisLabel: {
-        color: "#8897BC",
-      },
-      splitLine: {
-        lineStyle: {
-          type: "dashed",
-          color: "rgba(196,194,225, 0.54)",
-        },
-      },
-      name:"吨"
-    },
-      ],
-      series: [
-        {
-          name: "运单/单",
-          type: "bar",
-          data: [12, 10, 15, 11, 16, 4, 6],
-          yAxisIndex: 0,
-        },
-        {
-          name: "重量/吨",
-          type: "bar",
-          data: [11, 15, 17, 8, 1, 4, 6],
-          yAxisIndex: 1,
-        },
-      ],
-    },
-  },
-});
-
-const airStutas = ref({
-  component: "commonChartsBar",
-  option: {
-    baseOption: {
-      // legend: {
-      //   data: ['2020年', '2021年'],
-      //   right:"20",
-      //   textStyle:{
-      //     color: "#8897BC"
-      //   }
-      //   // top:"-10"
-      // },
-      tooltip: {
-        trigger: "axis",
-        valueFormatter:function(value){
-          return value +"单"
-        }
-      },
-      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)",
-          },
-        },
-        name:'单'
-      },
-      series: [
-        {
-          type: "bar",
-          data: [12, 10, 15],
-        },
-      ],
-    },
-  },
-});
-
-const nodeEfficiency = ref({
-  component: "commonChartsLine",
-  option: {
-    tooltip: {
-        trigger: "axis",
-        valueFormatter:function(value){
-          return value +"秒"
-        }
-      },
-    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: [
-        "收货核单",
-        "安检",
-        "理货",
-        "待运区",
-        "货站交接",
-        "机下交接",
-        "装机",
-      ],
-    },
-    yAxis: {
-        type: "value",
-        axisLabel: {
-          color: "#8897BC",
-        },
-        splitLine: {
-          lineStyle: {
-            type: "dashed",
-            color: "rgba(196,194,225, 0.54)",
-          },
-        },
-        name:"单位：秒"
-      },
-    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: {
-    tooltip: {
-        trigger: "axis",
-        valueFormatter:function(value){
-          return value +"单"
-        }
-      },
-    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%;
-    }
-  }
-}
+@import "./css/index.scss";
 </style>

src/views/dashboard/indexIn.vue

@@ -1,14 +1,6 @@
 <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>
+    <ComHead :tabs-index="2" />
     <div class="dashboard-content">
       <div class="dashboard-content-top flex">
         <div class="dashboard-content-top-left">
@@ -54,36 +46,22 @@
           <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 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 v-for="(item,index) in capArr" :key="index" class="dashboard-content-top-center-bottom-box1-info">
+                <div>{{item.cname}}：{{item.cvalue}}</div>
+                <div>{{item.dname}}：{{item.dvalue}}</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 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 v-for="(item,index) in capData" :key="index" class="dashboard-content-top-center-bottom-box2-info">
+                <div>{{item.cname}}：{{item.cvalue}}</div>
+                <div>{{item.dname}}：{{item.dvalue}}</div>
+                <div>{{item.ename}}：{{item.evalue}}</div>
               </div>
             </div>
             <EchartsMap id="ww2" />
@@ -105,7 +83,6 @@
               </div>
             </div>
             <div class="dashboard-content-top-right-item-bottom">
-
               <Echarts id="ww3" :option="airlineAbnormalBaggage.option" />
             </div>
           </div>
@@ -192,13 +169,25 @@
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted } from "vue";
+import { ref } from "vue";
 import Echarts from "@/components/Echarts/commonChartsBar.vue";
 import EchartsMap from "@/components/Echarts/commonChartsChinaMap.vue";
+import ComHead from "./components/comHead.vue";
 import { Calendar, CaretBottom } from "@element-plus/icons-vue";
 import Dialog from "@/components/dialog/index.vue";
-import axios from "axios";
-const title = ref("决策管理驾驶舱");
+import { usePublic } from "./hooks/usePublic";
+const {
+  optionLeft,
+  airlineAbnormalBaggage,
+  airCompaneBaggage,
+  airStutas,
+  nodeEfficiency,
+  hourPeak,
+  hkArr,
+  hkData,
+} = usePublic();
+const capArr = ref(hkArr);
+const capData = ref(hkData);
 const form = ref({
   startDate: Date.now(),
   endDate: Date.now(),
@@ -221,840 +210,12 @@ const resetForm = () => {
 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: {
-    show: true,
-    top: 0,
-    left:'30%',
-    icon: 'roundRect'
-  },
-  grid: {
-    left: "0%",
-    right: "5%",
-    bottom: "0%",
-    top: "15%",
-    containLabel: true,
-  },
-  color: ["#F5BB3D", "#73D970", "#6A9DD9"],
-  xAxis: {
-    type: "category",
-    boundaryGap: true,
-    data: ["0:00", "2:00", "4:00", "6:00", "8:00", "10:00", "12:00", "14:00", "16:00", "18:00", "20:00", "22:00"],
-    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)",
-        },
-      },
-      name:"单"
-    },
-    {
-      type: "value",
-      axisLabel: {
-        color: "#8897BC",
-      },
-      splitLine: {
-        lineStyle: {
-          type: "dashed",
-          color: "rgba(196,194,225, 0.54)",
-        },
-      },
-      name:"吨"
-    },
-  ],
-  series: [
-    {
-      name: "运单/单",
-      type: "line",
-      symbol: "none",
-      key: "bagsnum",
-      yAxisIndex: 0,
-      data: [120, 132, 101, 134, 90, 230, 210,132, 101, 134, 90, 230],
-      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",
-      yAxisIndex: 1,
-      key: "passengers",
-      data: [220, 182, 191, 234, 290, 330, 310, 132, 101, 134, 90, 230],
-      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: {
-      tooltip: {
-        trigger: "axis",
-        valueFormatter:function(value){
-          return value +"单"
-        }
-      },
-      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)",
-          },
-        },
-        name:'单'
-      },
-      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: {
-      tooltip: {
-        trigger: "axis",
-      },
-      legend: {
-        data: ["运单/单", "重量/吨"],
-        right: "20%",
-        textStyle: {
-          color: "#8897BC",
-        },
-      },
-      color: ["#51DEE9", "#4C88E1"],
-      grid: {
-        bottom: "10%",
-        left: "13%",
-        right: "8%",
-        top: "15%",
-      },
-      xAxis: {
-        data: ["国航", "南航", "深航", "东航", "海航", "国泰", "川航"],
-        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)",
-        },
-      },
-      name:"单"
-    },
-    {
-      type: "value",
-      axisLabel: {
-        color: "#8897BC",
-      },
-      splitLine: {
-        lineStyle: {
-          type: "dashed",
-          color: "rgba(196,194,225, 0.54)",
-        },
-      },
-      name:"吨"
-    },
-      ],
-      series: [
-        {
-          name: "运单/单",
-          type: "bar",
-          data: [12, 10, 15, 11, 16, 4, 6],
-          yAxisIndex: 0,
-        },
-        {
-          name: "重量/吨",
-          type: "bar",
-          data: [11, 15, 17, 8, 1, 4, 6],
-          yAxisIndex: 1,
-        },
-      ],
-    },
-  },
-});
-
-const airStutas = ref({
-  component: "commonChartsBar",
-  option: {
-    baseOption: {
-      // legend: {
-      //   data: ['2020年', '2021年'],
-      //   right:"20",
-      //   textStyle:{
-      //     color: "#8897BC"
-      //   }
-      //   // top:"-10"
-      // },
-      tooltip: {
-        trigger: "axis",
-        valueFormatter:function(value){
-          return value +"单"
-        }
-      },
-      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)",
-          },
-        },
-        name:'单'
-      },
-      series: [
-        {
-          type: "bar",
-          data: [12, 10, 15],
-        },
-      ],
-    },
-  },
-});
-
-const nodeEfficiency = ref({
-  component: "commonChartsLine",
-  option: {
-    tooltip: {
-        trigger: "axis",
-        valueFormatter:function(value){
-          return value +"秒"
-        }
-      },
-    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: [
-      "卸机", "机下", "货站", "理货", "海关", "出库", "退运"
-      ],
-    },
-    yAxis: {
-        type: "value",
-        axisLabel: {
-          color: "#8897BC",
-        },
-        splitLine: {
-          lineStyle: {
-            type: "dashed",
-            color: "rgba(196,194,225, 0.54)",
-          },
-        },
-        name:"单位：秒"
-      },
-    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: {
-    tooltip: {
-        trigger: "axis",
-        valueFormatter:function(value){
-          return value +"单"
-        }
-      },
-    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%;
-    }
-  }
-}
+@import "./css/index.scss";
 </style>

src/views/dashboard/indexOut.vue

@@ -1,14 +1,6 @@
 <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>
+    <ComHead :tabs-index="3" />
     <div class="dashboard-content">
       <div class="dashboard-content-top flex">
         <div class="dashboard-content-top-left">
@@ -54,36 +46,22 @@
           <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 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 v-for="(item,index) in capArr" :key="index" class="dashboard-content-top-center-bottom-box1-info">
+                <div>{{item.cname}}：{{item.cvalue}}</div>
+                <div>{{item.dname}}：{{item.dvalue}}</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 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 v-for="(item,index) in capData" :key="index" class="dashboard-content-top-center-bottom-box2-info">
+                <div>{{item.cname}}：{{item.cvalue}}</div>
+                <div>{{item.dname}}：{{item.dvalue}}</div>
+                <div>{{item.ename}}：{{item.evalue}}</div>
               </div>
             </div>
             <EchartsMap id="ww2" />
@@ -105,7 +83,6 @@
               </div>
             </div>
             <div class="dashboard-content-top-right-item-bottom">
-
               <Echarts id="ww3" :option="airlineAbnormalBaggage.option" />
             </div>
           </div>
@@ -192,13 +169,25 @@
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted } from "vue";
+import { ref } from "vue";
 import Echarts from "@/components/Echarts/commonChartsBar.vue";
 import EchartsMap from "@/components/Echarts/commonChartsChinaMap.vue";
+import ComHead from "./components/comHead.vue";
 import { Calendar, CaretBottom } from "@element-plus/icons-vue";
 import Dialog from "@/components/dialog/index.vue";
-import axios from "axios";
-const title = ref("决策管理驾驶舱");
+import { usePublic } from "./hooks/usePublic";
+const {
+  optionLeft,
+  airlineAbnormalBaggage,
+  airCompaneBaggage,
+  airStutas,
+  nodeEfficiency,
+  hourPeak,
+  hkArr,
+  hkData,
+} = usePublic();
+const capArr = ref(hkArr);
+const capData = ref(hkData);
 const form = ref({
   startDate: Date.now(),
   endDate: Date.now(),
@@ -221,848 +210,12 @@ const resetForm = () => {
 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: {
-    show: true,
-    top: 0,
-    left:'30%',
-    icon: 'roundRect'
-  },
-  grid: {
-    left: "0%",
-    right: "5%",
-    bottom: "0%",
-    top: "15%",
-    containLabel: true,
-  },
-  color: ["#F5BB3D", "#73D970", "#6A9DD9"],
-  xAxis: {
-    type: "category",
-    boundaryGap: true,
-    data: ["0:00", "2:00", "4:00", "6:00", "8:00", "10:00", "12:00", "14:00", "16:00", "18:00", "20:00", "22:00"],
-    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)",
-        },
-      },
-      name:"单"
-    },
-    {
-      type: "value",
-      axisLabel: {
-        color: "#8897BC",
-      },
-      splitLine: {
-        lineStyle: {
-          type: "dashed",
-          color: "rgba(196,194,225, 0.54)",
-        },
-      },
-      name:"吨"
-    },
-  ],
-  series: [
-    {
-      name: "运单/单",
-      type: "line",
-      symbol: "none",
-      key: "bagsnum",
-      yAxisIndex: 0,
-      data: [120, 132, 101, 134, 90, 230, 210,132, 101, 134, 90, 230],
-      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",
-      yAxisIndex: 1,
-      key: "passengers",
-      data: [220, 182, 191, 234, 290, 330, 310, 132, 101, 134, 90, 230],
-      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: {
-      tooltip: {
-        trigger: "axis",
-        valueFormatter:function(value){
-          return value +"单"
-        }
-      },
-      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)",
-          },
-        },
-        name:'单'
-      },
-      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: {
-      tooltip: {
-        trigger: "axis",
-      },
-      legend: {
-        data: ["运单/单", "重量/吨"],
-        right: "20%",
-        textStyle: {
-          color: "#8897BC",
-        },
-      },
-      color: ["#51DEE9", "#4C88E1"],
-      grid: {
-        bottom: "10%",
-        left: "13%",
-        right: "8%",
-        top: "15%",
-      },
-      xAxis: {
-        data: ["国航", "南航", "深航", "东航", "海航", "国泰", "川航"],
-        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)",
-        },
-      },
-      name:"单"
-    },
-    {
-      type: "value",
-      axisLabel: {
-        color: "#8897BC",
-      },
-      splitLine: {
-        lineStyle: {
-          type: "dashed",
-          color: "rgba(196,194,225, 0.54)",
-        },
-      },
-      name:"吨"
-    },
-      ],
-      series: [
-        {
-          name: "运单/单",
-          type: "bar",
-          data: [12, 10, 15, 11, 16, 4, 6],
-          yAxisIndex: 0,
-        },
-        {
-          name: "重量/吨",
-          type: "bar",
-          data: [11, 15, 17, 8, 1, 4, 6],
-          yAxisIndex: 1,
-        },
-      ],
-    },
-  },
-});
-
-const airStutas = ref({
-  component: "commonChartsBar",
-  option: {
-    baseOption: {
-      // legend: {
-      //   data: ['2020年', '2021年'],
-      //   right:"20",
-      //   textStyle:{
-      //     color: "#8897BC"
-      //   }
-      //   // top:"-10"
-      // },
-      tooltip: {
-        trigger: "axis",
-        valueFormatter:function(value){
-          return value +"单"
-        }
-      },
-      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)",
-          },
-        },
-        name:'单'
-      },
-      series: [
-        {
-          type: "bar",
-          data: [12, 10, 15],
-        },
-      ],
-    },
-  },
-});
-
-const nodeEfficiency = ref({
-  component: "commonChartsLine",
-  option: {
-    tooltip: {
-        trigger: "axis",
-        valueFormatter:function(value){
-          return value +"秒"
-        }
-      },
-    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: [
-      "入园", "海关", "运抵", "安检", "核单", "理货", "拉下", "待运区", "货站交接", "机下交接", "装机"
-      ],
-    },
-    yAxis: {
-        type: "value",
-        axisLabel: {
-          color: "#8897BC",
-        },
-        splitLine: {
-          lineStyle: {
-            type: "dashed",
-            color: "rgba(196,194,225, 0.54)",
-          },
-        },
-        name:"单位：秒"
-      },
-    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: {
-    tooltip: {
-        trigger: "axis",
-        valueFormatter:function(value){
-          return value +"单"
-        }
-      },
-    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%;
-    }
-  }
-}
+@import "./css/index.scss";
 </style>