SZYGM1.0/src/views/dashboard/index.vue

<template>
  <div class="dashboard">
    <div class="dashboard-head flex">
      <!-- <div class="dashboard-head-title">{{title}}</div> -->
      <div class="dashboard-head-tabs flex-wrap">
        <div class="dashboard-head-tabs-list" :class="tabsIndex == index ? 'active' : ''" @click="tabClick(item, index)" v-for="(item, index) in tabs" :key="index">
          {{ item.label }}
        </div>
      </div>
      <!-- <div class="dashboard-head-zw"></div> -->
    </div>
    <div class="dashboard-content">
      <div class="dashboard-content-top flex">
        <div class="dashboard-content-top-left">
          <div class="dashboard-content-top-left-item">
            <div class="dashboard-content-top-left-item-top">
              <div class="dashboard-content-top-left-item-top-title">
                小时峰值分布
              </div>
              <div class="dashboard-content-top-left-item-top-time" @click="showDatePicker">
                <el-icon color="#ffffff" size="18">
                  <Calendar />
                </el-icon>
                <el-icon color="#ffffff">
                  <CaretBottom />
                </el-icon>
              </div>
            </div>
            <div class="dashboard-content-top-left-item-bottom">
              <Echarts id="ww1" :option="optionLeft" />
            </div>
          </div>
          <div class="dashboard-content-top-left-item">
            <div class="dashboard-content-top-left-item-top">
              <div class="dashboard-content-top-left-item-top-title">
                运单趋势分析
              </div>
              <div class="dashboard-content-top-left-item-top-time" @click="showDatePicker">
                <el-icon color="#ffffff" size="18">
                  <Calendar />
                </el-icon>
                <el-icon color="#ffffff">
                  <CaretBottom />
                </el-icon>
              </div>
            </div>
            <div class="dashboard-content-top-left-item-bottom">
              <Echarts id="ww12" :option="optionLeft" />
            </div>
          </div>
        </div>
        <!-- 地图 -->
        <div class="dashboard-content-top-center">
          <div class="dashboard-content-top-center-top"></div>
          <div class="dashboard-content-top-center-bottom">
            <div class="dashboard-content-top-center-bottom-box1">
              <div class="dashboard-content-top-center-bottom-box1-title">航班数</div>
              <div class="dashboard-content-top-center-bottom-box1-info">
                <div>本年：1000</div>
                <div>同期：1100</div>
              </div>
              <div class="dashboard-content-top-center-bottom-box1-info">
                <div>本年：1000</div>
                <div>同期：1100</div>
              </div>
              <div class="dashboard-content-top-center-bottom-box1-info">
                <div>本年：1000</div>
                <div>同期：1100</div>
              </div>
            </div>
            <div class="dashboard-content-top-center-bottom-box2">
              <div class="dashboard-content-top-center-bottom-box2-title">运单数</div>
              <div class="dashboard-content-top-center-bottom-box2-info">
                <div>本年：1000</div>
                <div>同期：1100</div>
                <div>重量：1100</div>
              </div>
              <div class="dashboard-content-top-center-bottom-box2-info">
                <div>本年：1000</div>
                <div>同期：1100</div>
                <div>重量：1100</div>
              </div>
              <div class="dashboard-content-top-center-bottom-box2-info">
                <div>本年：1000</div>
                <div>同期：1100</div>
                <div>重量：1100</div>
              </div>
            </div>
            <EchartsMap id="ww2" />
          </div>
        </div>
        <div class="dashboard-content-top-right">
          <div class="dashboard-content-top-right-item">
            <div class="dashboard-content-top-right-item-top">
              <div class="dashboard-content-top-right-item-top-title">
                航班预警报警分析
              </div>
              <div class="dashboard-content-top-right-item-top-time" @click="showDatePicker">
                <el-icon color="#ffffff" size="18">
                  <Calendar />
                </el-icon>
                <el-icon color="#ffffff">
                  <CaretBottom />
                </el-icon>
              </div>
            </div>
            <div class="dashboard-content-top-right-item-bottom">

              <Echarts id="ww3" :option="airlineAbnormalBaggage.option" />
            </div>
          </div>
          <div class="dashboard-content-top-right-item">
            <div class="dashboard-content-top-right-item-top">
              <div class="dashboard-content-top-right-item-top-title">
                航司运量统计
              </div>
              <div class="dashboard-content-top-right-item-top-time" @click="showDatePicker">
                <el-icon color="#ffffff" size="18">
                  <Calendar />
                </el-icon>
                <el-icon color="#ffffff">
                  <CaretBottom />
                </el-icon>
              </div>
            </div>
            <div class="dashboard-content-top-left-item-bottom">
              <Echarts id="ww33" :option="airCompaneBaggage.option" />
            </div>
          </div>
        </div>
      </div>
      <div class="dashboard-content-bottom flex">
        <div class="dashboard-content-bottom-left">
          <div class="dashboard-content-bottom-left-top">
            <div class="dashboard-content-bottom-left-top-title">
              节点峰值分布
            </div>
            <div class="dashboard-content-bottom-left-top-time" @click="showDatePicker">
              <el-icon color="#ffffff" size="18">
                <Calendar />
              </el-icon>
              <el-icon color="#ffffff">
                <CaretBottom />
              </el-icon>
            </div>
          </div>
          <div class="dashboard-content-bottom-left-bottom">
            <Echarts id="ww4" :option="hourPeak.option" />
          </div>
        </div>
        <div class="dashboard-content-bottom-center">
          <div class="dashboard-content-bottom-center-top">
            <div class="dashboard-content-bottom-center-top-title">
              节点效率分析
            </div>
            <div class="dashboard-content-bottom-center-top-time" @click="showDatePicker">
              <el-icon color="#ffffff" size="18">
                <Calendar />
              </el-icon>
              <el-icon color="#ffffff">
                <CaretBottom />
              </el-icon>
            </div>
          </div>
          <div class="dashboard-content-bottom-center-bottom">
            <Echarts id="ww5" :option="nodeEfficiency.option" />
          </div>
        </div>
        <div class="dashboard-content-bottom-right">
          <div class="dashboard-content-bottom-right-top">
            <div class="dashboard-content-bottom-center-top-title">
              航班动态统计
            </div>
          </div>
          <div class="dashboard-content-bottom-right-bottom">
            <Echarts id="ww6" :option="airStutas.option" />
          </div>
        </div>
      </div>
    </div>
    <Dialog :flag="flag" @resetForm="resetForm" @submitForm="submitForm">
      <el-form :model="form" label-width="120px">
        <el-form-item label="开始日期">
          <el-date-picker :disabled-date="disabledStartDate" v-model="form.startDate" type="date" placeholder="请选择开始日期" size="default" format="YYYY/MM/DD" value-format="YYYY-MM-DD" />
        </el-form-item>
        <el-form-item label="结束日期">
          <el-date-picker :disabled-date="disabledEndDate" v-model="form.endDate" type="date" placeholder="请选择结束日期" size="default" format="YYYY-MM-DD" value-format="YYYY-MM-DD" />
        </el-form-item>
      </el-form>
    </Dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue";
import Echarts from "@/components/Echarts/commonChartsBar.vue";
import EchartsMap from "@/components/Echarts/commonChartsChinaMap.vue";
import { Calendar, CaretBottom } from "@element-plus/icons-vue";
import Dialog from "@/components/dialog/index.vue";
import axios from "axios";
const title = ref("决策管理驾驶舱");
const form = ref({
  startDate: Date.now(),
  endDate: Date.now(),
});

const disabledStartDate = (time: Date) => {
  let data = new Date(form.value.endDate);
  return time.getTime() > data.getTime();
};
const disabledEndDate = (time: Date) => {
  let data = new Date(form.value.startDate);
  return data.getTime() > time.getTime();
};

const flag = ref(false);
const resetForm = () => {
  flag.value = false;
};

const submitForm = () => {
  flag.value = false;
};
const tabs = [
  {
    id: 1,
    label: "国内进港",
    value: "one",
  },
  {
    id: 2,
    label: "国内出港",
    value: "two",
  },
  {
    id: 3,
    label: "国际进港",
    value: "three",
  },
  {
    id: 4,
    label: "国际出港",
    value: "four",
  },
];
const tabsIndex = ref(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
    .get("./mock/hourPeakData.json")
    .then((res) => {
      if (res.data.code === 200 || res.data.code === "200") {
        res.data.data.series.forEach((item, index) => {
          hourPeak.value.option.series[index].data = item.data;
        });
      } else {
        // this.$message.error('小时高峰量统计分析-初始化数据失败')
      }
    })
    .catch((err) => {
      // this.$message.error(err)
    });
};

const router = useRouter()
const tabClick = (item, index) => {
  tabsIndex.value = index;
  if(index==0){
    router.push({
      path:'../homein'
    })
  }
  if(index==1){
    router.push({
      path:'../homeOut'
    })
  }
  if(index==2){
    router.push({
      path:'../indexIn'
    })
  }
  if(index==3){
    router.push({
      path:'../indexOut'
    })
  }
};

const showDatePicker = () => {
  flag.value = true;
};

onMounted(() => {
  // getHourPeakData()
});
</script>

<style lang="scss" scoped>
.dashboard {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  background: linear-gradient(185deg, #1e305f, #0f1015);
  z-index: 2000;
  color: #fff;
  &-head {
    padding: 0 32px;
    height: 40px;
    line-height: 40px;
    background: #1d2948;
    width: 100%;
    display: flex;
    justify-content: center;
    &-title {
      font-size: 24px;
      font-family: Microsoft YaHei;
      font-weight: bold;
      color: #51dee9;
    }
    &-tabs {
      font-size: 16px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #ffffff;
      &-list {
        margin-right: 60px;
        cursor: pointer;
        position: relative;
        &:last-child {
          margin-right: 0;
        }
      }
      .active {
        color: #51dee9;
        &::after {
          content: "";
          position: absolute;
          bottom: 0;
          width: 80%;
          left: 10%;
          height: 2px;
          background: #51dee9;
        }
      }
    }
    &-zw {
      width: 190px;
    }
  }
  &-content {
    padding: 0 20px;
    height: calc(100% - 40px);
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    &-top {
      width: 100%;
      height: 65%;
      &-left,
      &-right {
        width: calc(30% - 20px);
        &-item {
          width: 100%;
          height: calc(50% - 20px);
          margin: 20px 0;
          display: flex;
          flex-direction: column;
          background-image: url("../../assets/home/pic_border.png");
          background-repeat: no-repeat;
          background-size: 100% 100%;
          padding: 13px;
          box-sizing: border-box;
          &-top {
            width: 100%;
            height: 45px;
            display: flex;
            padding-top: 15px;
            box-sizing: border-box;
            &-title {
              font-size: 16px;
              font-weight: bold;
              color: #75cee1;
              line-height: 1.8;
              margin-right: 10px;
            }
            &-time {
              display: flex;
              justify-content: flex-start;
              align-items: center;
              cursor: pointer;
            }
          }
          &-bottom {
            width: 100%;
            flex: 1;
            position: relative;
            // margin-top: 10px;
          }
        }
      }
      &-center {
        width: 40%;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        &-top {
          width: 100%;
          height: 32px;
          display: flex;
          padding-top: 15px;
          box-sizing: border-box;
          &-title {
            font-size: 16px;
            font-weight: bold;
            color: #75cee1;
            line-height: 1.8;
            margin-right: 10px;
          }
          &-time {
            display: flex;
            justify-content: flex-start;
            align-items: center;
            cursor: pointer;
          }
        }
        &-bottom {
          width: 100%;
          flex: 1;
          position: relative;
          &-box1 {
            z-index: 10;
            width: 205px;
            height: 120px;
            border: 2px solid #468fc3;
            position: absolute;
            left: 50px;
            display: flex;
            flex-direction: column;
            padding: 15px 0 15px 15px;
            &-title {
              font-size: 16px;
              font-weight: bold;
              color: #ffffff;
              margin-bottom: 10px;
            }
            &-info {
              font-size: 14px;
              font-weight: 400;
              color: #c0cbe4;
              display: flex;
              div {
                margin-right: 10px;
              }
            }
          }
          &-box2 {
            z-index: 10;
            width: 284px;
            height: 120px;
            border: 2px solid #468fc3;
            position: absolute;
            right: 60px;
            display: flex;
            flex-direction: column;
            padding: 15px 0 15px 15px;
            &-title {
              font-size: 16px;
              font-weight: bold;
              color: #ffffff;
              margin-bottom: 10px;
            }
            &-info {
              font-size: 14px;
              font-weight: 400;
              color: #c0cbe4;
              display: flex;
              div {
                margin-right: 10px;
              }
            }
          }
        }
      }
    }
    &-bottom {
      width: 100%;
      flex: 1;
      &-left,
      &-right {
        width: calc(30% - 20px);
        display: flex;
        flex-direction: column;
        box-sizing: border-box;
        background-image: url("../../assets/home/pic_border.png");
        background-repeat: no-repeat;
        background-size: 100% 100%;
        padding: 13px;
        box-sizing: border-box;
        margin-top: 20px;
        margin-bottom: 20px;
        &-top {
          width: 100%;
          height: 45px;
          display: flex;
          padding-top: 15px;
          box-sizing: border-box;
          &-title {
            font-size: 16px;
            font-weight: bold;
            color: #75cee1;
            line-height: 1.8;
            margin-right: 10px;
          }
          &-time {
            display: flex;
            justify-content: flex-start;
            align-items: center;
            cursor: pointer;
          }
        }
        &-bottom {
          width: 100%;
          flex: 1;
          position: relative;
          // margin-top: 10px;
        }
      }
      &-center {
        width: 40%;
        padding: 13px;
        margin-top: 20px;
        margin-bottom: 20px;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        background-image: url("../../assets/home/pic_border.png");
        background-repeat: no-repeat;
        background-size: 100% 100%;
        background-position: center center;
        box-sizing: border-box;
        &-top {
          width: 100%;
          height: 45px;
          display: flex;
          padding-top: 15px;
          box-sizing: border-box;
          &-title {
            font-size: 16px;
            font-weight: bold;
            color: #75cee1;
            line-height: 1.8;
            margin-right: 10px;
          }
          &-time {
            display: flex;
            justify-content: flex-start;
            align-items: center;
            cursor: pointer;
          }
        }
        &-bottom {
          width: 100%;
          flex: 1;
          position: relative;
          // margin-top: 10px;
        }
      }
    }
    .pBox {
      background-image: url("../../assets/home/pic_border.png");
      background-repeat: no-repeat;
      background-size: 100% 100%;
    }
  }
}
</style>