驾驶舱

src/views/dashboard/components/comHead.vue

@@ -0,0 +1,99 @@
+<template>
+  <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>
+</template>
+
+<script setup lang="ts">
+import { ref } from "vue";
+const router = useRouter();
+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(0);
+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",
+    });
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.dashboard-head {
+  &-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;
+      }
+    }
+  }
+}
+</style>

src/views/dashboard/components/lineChart.vue

@@ -0,0 +1,236 @@
+<template>
+  <div class="dashboard-content-top-left-item">
+    <div class="dashboard-content-top-left-item-top">
+      <div class="dashboard-content-top-left-item-top-title">{{ title }}</div>
+      <div
+        class="dashboard-content-top-left-item-top-time"
+        @click="showDatePicker"
+      >
+        <el-icon color="#ffffff" size="18">
+          <Calendar />
+        </el-icon>
+        <el-icon color="#ffffff">
+          <CaretBottom />
+        </el-icon>
+      </div>
+    </div>
+    <div class="dashboard-content-top-left-item-bottom">
+      <Echarts :id="id" :option="options" />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted } from "vue";
+import Echarts from "@/components/Echarts/commonChartsBar.vue";
+import { Calendar, CaretBottom } from "@element-plus/icons-vue";
+import Dialog from "@/components/dialog/index.vue";
+import axios from "axios";
+
+const props = defineProps({
+  title: {
+    type: String,
+    default: "",
+  },
+  id: {
+    type: String,
+    default: "w" + Math.random(),
+  },
+});
+const { title, id } = props;
+const options = ref({
+  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 form = ref({
+  startDate: Date.now(),
+  endDate: Date.now(),
+});
+
+const disabledStartDate = (time: Date) => {
+  let data = new Date(form.value.endDate);
+  return time.getTime() > data.getTime();
+};
+const disabledEndDate = (time: Date) => {
+  let data = new Date(form.value.startDate);
+  return data.getTime() > time.getTime();
+};
+
+const flag = ref(false);
+const resetForm = () => {
+  flag.value = false;
+};
+
+const submitForm = () => {
+  flag.value = false;
+};
+
+const showDatePicker = () => {
+  flag.value = true;
+};
+</script>
+
+<style lang="scss" scoped>
+.dashboard-content-top-left-item {
+  &-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;
+  }
+}
+</style>

src/views/dashboard/css/index.scss

@@ -0,0 +1,279 @@
+.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%;
+    }
+  }
+}

src/views/dashboard/hooks/usePublic.ts

@@ -0,0 +1,548 @@
+export function usePublic() {
+  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 = {
+    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: [11, 16, 4, 6],
+          },
+          {
+            name: "预警",
+            type: "bar",
+            data: [11, 15, 17, 4],
+          },
+        ],
+      },
+    },
+  };
+  const airCompaneBaggage = {
+    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 = {
+    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 = {
+    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 = {
+    component: "commonChartsScatter",
+    option: {
+      tooltip: {
+        trigger: "axis",
+        valueFormatter: function (value) {
+          return value + "单";
+        },
+      },
+      title: node.map((month, index) => ({
+        top: ((index + 0.5) * 100) / 4 - 3 + "%",
+        text: month,
+        textStyle: {
+          fontSize: 12,
+          fontWeight: "normal",
+          color: "#698dc3",
+        },
+      })),
+      singleAxis: node.map((month, index) => ({
+        type: "category",
+        data: hours,
+        top: ((index + 0.5) * 100) / 4 - 3 + "%",
+        height: 100 / 4 - 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;
+        },
+      })),
+    },
+  };
+  return {
+    optionLeft,
+    airlineAbnormalBaggage,
+    airCompaneBaggage,
+    airStutas,
+    nodeEfficiency,
+    hourPeak,
+  };
+}

src/views/dashboard/index.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 />
     <div class="dashboard-content">
       <div class="dashboard-content-top flex">
         <div class="dashboard-content-top-left">
@@ -17,7 +9,10 @@
               <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>
@@ -35,7 +30,10 @@
               <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>
@@ -54,7 +52,9 @@
           <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-title">
+                航班数
+              </div>
               <div class="dashboard-content-top-center-bottom-box1-info">
                 <div>本年：1000</div>
                 <div>同期：1100</div>
@@ -69,7 +69,9 @@
               </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-title">
+                运单数
+              </div>
               <div class="dashboard-content-top-center-bottom-box2-info">
                 <div>本年：1000</div>
                 <div>同期：1100</div>
@@ -95,7 +97,10 @@
               <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>
@@ -105,7 +110,6 @@
               </div>
             </div>
             <div class="dashboard-content-top-right-item-bottom">
-
               <Echarts id="ww3" :option="airlineAbnormalBaggage.option" />
             </div>
           </div>
@@ -114,7 +118,10 @@
               <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>
@@ -135,7 +142,10 @@
             <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>
@@ -153,7 +163,10 @@
             <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>
@@ -181,10 +194,26 @@
     <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>
@@ -195,9 +224,19 @@
 import { ref, onMounted } 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,
+  airlineAbnormalBaggage,
+  airCompaneBaggage,
+  airStutas,
+  nodeEfficiency,
+  hourPeak,
+} = usePublic();
 const title = ref("决策管理驾驶舱");
 const form = ref({
   startDate: Date.now(),
@@ -221,509 +260,7 @@ 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(0);
-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: [  11, 16, 4, 6],
-        },
-        {
-          name: "预警",
-          type: "bar",
-          data: [11, 15, 17, 4],
-        },
-      ],
-    },
-  },
-});
-
-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) / 4 - 3 + "%",
-      text: month,
-      textStyle: {
-        fontSize: 12,
-        fontWeight: "normal",
-        color: "#698dc3",
-      },
-    })),
-    singleAxis: node.map((month, index) => ({
-      type: "category",
-      data: hours,
-      top: ((index + 0.5) * 100) / 4 - 3 + "%",
-      height: 100 / 4 - 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
@@ -731,7 +268,7 @@ const getHourPeakData = () => {
     .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;
+          hourPeak.option.series[index].data = item.data;
         });
       } else {
         // this.$message.error('小时高峰量统计分析-初始化数据失败')
@@ -742,31 +279,6 @@ const getHourPeakData = () => {
     });
 };
 
-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;
 };
@@ -777,283 +289,5 @@ onMounted(() => {
 </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>