public-fuse/src/view/statistics/index.vue

<template>
  <com-head :options="[{ name: '数据统计', value: '1' }]" class="static-head frame-head">
    <el-form label-width="84px">
      <el-form-item label="统计区间：" style="grid-area: 1/1/2/2">
        <p style="margin-top: -6px">{{ range }}</p>
      </el-form-item>
      <el-form-item label="统计区间：" style="grid-area: 1/2/2/4">
        <el-date-picker
          type="daterange"
          v-model="params"
          range-separator="-"
          placeholder="请选择"
          style="width: 400px"
        />
      </el-form-item>
    </el-form>
  </com-head>
  <div class="statistics-layer">
    <div v-for="(config, ndx) in statisticsConfigs" class="statistics-item">
      <div class="statistics-content">
        <p class="title">{{ config.title }}</p>
        <div class="graphics" :ref="(dom: any) => updateDom(ndx, dom)"></div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import comHead from "@/components/head/index.vue";
import {
  markRaw,
  nextTick,
  onMounted,
  onUnmounted,
  reactive,
  ref,
  watch,
  watchEffect,
} from "vue";
import {
  statisticsConfigs,
  echarts,
  EChartsType,
  ConfigItem,
  updateParams,
} from "./statisticsInject";
import { dateFormat } from "@/util";
import { user } from "@/store/user";

const prevYearDate = new Date();
prevYearDate.setFullYear(prevYearDate.getFullYear() - 1);
const params = ref<Date[]>([prevYearDate, new Date()]);
const range = [
  "全部火调队伍数据",
  "总队及下级队伍数据",
  "支队及下级队伍数据",
  "当前队伍数据",
][user.value.info.deptLevel];

watchEffect(() => {
  updateParams({
    startTime: dateFormat(params.value[0], "yyyy-MM-dd"),
    endTime: dateFormat(params.value[1], "yyyy-MM-dd"),
  });
});

const doms = statisticsConfigs.map(() => ref<HTMLDivElement>());
const updateDom = (ndx: number, dom: HTMLDivElement) => {
  nextTick(() => (doms[ndx].value = dom));
};

const charts = reactive([]) as (EChartsType | null)[];
doms.forEach((dom, ndx) => {
  watchEffect((onCleanup) => {
    if (dom.value) {
      const chart = echarts.init(dom.value);
      markRaw(chart);
      charts[ndx] = chart;
      onCleanup(() => {
        echarts.dispose(charts[ndx]!);
        charts[ndx] = null;
      });
    }
  });
});

type WData = [ConfigItem[], (EChartsType | null)[]];
watch(
  () => [statisticsConfigs, charts] as WData,
  (nInstalls) => {
    const [nConfigs, nCharts] = nInstalls;
    for (let ndx = 0; ndx < nCharts.length; ndx++) {
      if (!nCharts[ndx]) continue;
      nCharts[ndx]!.setOption(nConfigs[ndx].data);
    }
  },
  { deep: true }
);

const resize = () => {
  for (const chart of charts) {
    chart?.resize();
  }
};

onMounted(() => window.addEventListener("resize", resize));
onUnmounted(() => window.removeEventListener("resize", resize));
</script>

<style lang="scss" scoped>
.statistics-layer {
  flex: 1;
  margin-top: 16px;
  overflow-y: auto;
}

.statistics-item {
  float: left;
  width: calc(50% - 8px);
  padding-top: 35%;
  position: relative;
  margin-bottom: 16px;

  .statistics-content {
    background-color: #fff;
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
  }

  &:nth-child(2n - 1) {
    margin-right: 8px;
  }
  &:nth-child(2n) {
    margin-left: 8px;
  }
}

.statistics-content {
  display: flex;
  flex-direction: column;

  .title {
    flex: 0 0 auto;
    line-height: 1;
    padding: 16px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    font-size: 16px;
  }

  .graphics {
    flex: 1;
    padding: 15px;
  }
}
</style>

<style lang="scss">
.static-head {
  .el-range-separator {
    display: initial !important;
    line-height: 38px;
    font-size: 16px;
  }
  .el-date-editor--daterange::after {
    display: none;
  }
}
</style>