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

<template>
  <div class="dashboard">
    <ComHead :tabs-index="1" />
    <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(showTimeMsg.HourlyPeak)">
                <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="hourlyPeakObj" />
            </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(showTimeMsg.WaybillTrend)">
                <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="waybillTrendObj" />
            </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">
                航班数：{{ flightNums }}
              </div>
            </div>
            <div class="dashboard-content-top-center-bottom-box2">
              <div class="dashboard-content-top-center-bottom-box2-title">
                运单数：{{ stockNums }}
              </div>
            </div>
            <EchartsMap :option="mapOptions" 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(showTimeMsg.AirlineAbnormal)">
                <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(showTimeMsg.AirlineTraffic)">
                <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="airlineTrafficObj" />
            </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(showTimeMsg.NodePeak)">
              <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="nodePeakObj" />
          </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" msg-title="日期选择" @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 ComHead from "./components/comHead.vue";
import { Calendar, CaretBottom } from "@element-plus/icons-vue";
import Dialog from "@/components/dialog/index.vue";
import { usePublic, showTimeMsg } from "./hooks/usePublic";
import { parseTime } from "@/utils/validate";
import * as _ from "lodash";
const {
  optionLeft,
  airlineAbnormalBaggage,
  airCompaneBaggage,
  airStutas,
  nodeEfficiency,
  hourPeak,
  getPublicData,
  getMapData,
} = usePublic();
const timePickerName = ref<number>(0);
const flag = ref<boolean>(false);
const hourlyPeakObj = ref<any>({});
const waybillTrendObj = ref<any>({});
const nodePeakObj = ref<any>({});
const airlineTrafficObj = ref<any>({});
const flightNums = ref<number>(0);
const stockNums = ref<number>(0);
const mapOptions = ref<any>({
  tooltip: {
    trigger: "item",
    formatter: function (params, ticket, callback) {
      if (params.seriesType == "effectScatter") {
        return "线路：" + params.data.name + "" + params.data.value[2];
      } else if (params.seriesType == "lines") {
        return (
          params.data.fromName +
          ">" +
          params.data.toName +
          "<br />" +
          params.data.value
        );
      } else {
        return params.name;
      }
    },
  },
  geo: {
    map: "china",
    label: {
      emphasis: {
        show: true,
        color: "#fff",
      },
    },
    roam: true,
    itemStyle: {
      normal: {
        areaColor: "#154186",
        borderColor: "#255caf",
      },
      emphasis: {
        areaColor: "#255caf",
      },
    },
  },
  series: [],
});
const form = ref({
  startDate: parseTime(Date.now(), "{y}-{m}-{d}"),
  endDate: parseTime(Date.now(), "{y}-{m}-{d}"),
});

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

const submitForm = () => {
  flag.value = false;
  switch (timePickerName.value) {
    case showTimeMsg.HourlyPeak:
      hourlyPeakFunc();
      break;
    case showTimeMsg.WaybillTrend:
      waybillTrendFunc();
      break;
    case showTimeMsg.NodePeak:
      nodePeakFunc();
      break;
    case showTimeMsg.AirlineTraffic:
      airlineTrafficFunc();
      break;
    case showTimeMsg.AirlineAbnormal:
      airlineAbnormalFunc();
      break;
    default:
      break;
  }
};

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

const sortClass = (sortData) => {
  const groupBy = (array, f) => {
    let groups = {};
    array.forEach((o) => {
      let group = JSON.stringify(f(o));
      groups[group] = groups[group] || [];
      groups[group].push(o);
    });
    return Object.keys(groups).map((group) => {
      return groups[group];
    });
  };
  const sorted = groupBy(sortData, (item) => {
    return item.jobName;
  });
  return sorted;
};

const pubFunc = (listValues, target) => {
  const newObj = _.cloneDeep(target);
  const [jobTimes, stockNums, weights] = [<any>[], <any>[], <any>[]];
  listValues.forEach((item) => {
    jobTimes.push(item.jobTime);
    stockNums.push(item.stockNum);
    weights.push(item.weight);
  });
  newObj.xAxis.data = jobTimes;
  newObj.series[0].data = stockNums;
  newObj.series[1].data = weights;
  return newObj;
};

//获取小时峰值分布
const hourlyPeakFunc = async () => {
  const listValues = (await getPublicData(DATACONTENT_ID.jscHourlyPeakId, [
    form.value.startDate,
    form.value.endDate,
  ])) as any;
  hourlyPeakObj.value = pubFunc(listValues, optionLeft);
};

//运单趋势分析
const waybillTrendFunc = async () => {
  const listValues = (await getPublicData(DATACONTENT_ID.jscWaybillTrendId, [
    form.value.startDate,
    form.value.endDate,
  ])) as any;
  waybillTrendObj.value = pubFunc(listValues, optionLeft);
};

//节点峰值
const nodePeakFunc = async () => {
  const listValues = (await getPublicData(DATACONTENT_ID.jscNodePeakId, [
    form.value.startDate,
    form.value.endDate,
  ])) as any;
  const newObj = _.cloneDeep(hourPeak.option);
  const arr = sortClass(listValues);
  const [title, series, singleAxis] = [<any>[], <any>[], <any>[]];
  arr.forEach((item, index) => {
    const msg: any = [];
    const datas: any = [];
    item.map((p, i) => {
      msg.push(p.stockNum);
      datas.push(i + 1);
    });
    title.push({
      top: ((index + 0.5) * 100) / 4 - 3 + "%",
      text: item[0].jobName,
      textStyle: {
        fontSize: 12,
        fontWeight: "normal",
        color: "#698dc3",
      },
    });
    series.push({
      singleAxisIndex: index,
      coordinateSystem: "singleAxis",
      type: "scatter",
      data: msg,
    });
    singleAxis.push({
      type: "category",
      data: datas,
      top: ((index + 0.5) * 100) / 4 - 3 + "%",
      height: 100 / 4 - 5 + "%",
      left: "12%",
      right: "1%",
      axisTick: {
        show: false,
      },
      splitLine: {
        show: false,
      },
    });
  });
  newObj.series = series;
  newObj.singleAxis = singleAxis;
  newObj.title = title;
  nodePeakObj.value = newObj;
};

//航班数&运单数
const numbersFunc = async () => {
  const listValues = (await getPublicData(
    DATACONTENT_ID.jscNumbersId,
    []
  )) as any;
  const { flightNum, stockNum } = listValues[0];
  flightNums.value = flightNum;
  stockNums.value = stockNum;
};

//航司运量
const airlineTrafficFunc = async () => {
  const listValues = (await getPublicData(DATACONTENT_ID.jscAirlineTrafficId, [
    form.value.startDate,
    form.value.endDate,
  ])) as any;
  listValues.forEach((item) => {
    item.jobTime = item["IACACode"];
  });
  airlineTrafficObj.value = pubFunc(
    listValues,
    airCompaneBaggage.option.baseOption
  );
};

//航班预警报警分析
const airlineAbnormalFunc = async () => {
  const listValues = (await getPublicData(DATACONTENT_ID.jscAirlineAbnormalId, [
    { flightDate1: form.value.startDate },
    { flightDate2: form.value.endDate },
  ])) as any;
  // console.log(listValues);
};

onMounted(() => {
  hourlyPeakFunc();
  waybillTrendFunc();
  nodePeakFunc();
  numbersFunc();
  airlineTrafficFunc();
  airlineAbnormalFunc();
  setTimeout(() => {
    var BJData = [
      [{ name: "北京" }, { name: "深圳", value: 95 }],
      [{ name: "成都" }, { name: "深圳", value: 95 }],
      [{ name: "重庆" }, { name: "深圳", value: 95 }],
      [{ name: "西安" }, { name: "深圳", value: 95 }],
      [{ name: "太原" }, { name: "深圳", value: 95 }],
    ];
    var GZData = [
      [{ name: "深圳" }, { name: "福州", value: 95 }],
      [{ name: "深圳" }, { name: "太原", value: 90 }],
      [{ name: "深圳" }, { name: "长春", value: 80 }],
      [{ name: "深圳" }, { name: "重庆", value: 70 }],
      [{ name: "深圳" }, { name: "西安", value: 60 }],
      [{ name: "深圳" }, { name: "成都", value: 50 }],
      [{ name: "深圳" }, { name: "常州", value: 40 }],
      [{ name: "深圳" }, { name: "北京", value: 30 }],
      [{ name: "深圳" }, { name: "北海", value: 20 }],
      [{ name: "深圳" }, { name: "海口", value: 10 }],
    ];
    mapOptions.value.series = getMapData([
      ["北京", BJData],
      ["深圳", GZData],
    ]);
  }, 0);
});
</script>

<style lang="scss" scoped>
@import "./css/index.scss";
</style>