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

<template>
  <div class="dashboard">
    <ComHead :tabs-index="0" />
    <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 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 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" />
          </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 } 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 } 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(),
});

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>
@import "./css/index.scss";
</style>