sy-water-data-board-ui/src/views/Main/Dike/components/StatisticsAnalysis.vue

<template>
  <div class="overview-analysis-page slider-right">
    <div class="search-box">
      <div class="options-box">
        <span class="ml-10">巡查周期：</span>
        <el-date-picker
          v-model="paramsData.timeRange"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          value-format="YYYY-MM-DD"
        ></el-date-picker>
        <el-button
          class="search-btn !ml-12"
          type="primary"
          @click="handleSearch()"
          >查询</el-button
        >
        <el-button @click="resetSearch()">重置</el-button>
      </div>
    </div>
    <div class="content-box">
      <div class="sum-box-list">
        <div class="list-item">
          <div class="item-title">巡查项目总数(个)</div>
          <div class="item-value">
            {{ projectSum == null ? "-" : projectSum }}
          </div>
        </div>
        <div class="list-item">
          <div class="item-title">巡查记录总数(个)</div>
          <div class="item-value">
            {{ xcRecordsSum == null ? "-" : xcRecordsSum }}
          </div>
        </div>
        <div class="list-item">
          <div class="item-title">巡查缺陷总数(个)</div>
          <div class="item-value">
            {{ flawSum == null ? "-" : flawSum }}
          </div>
        </div>
        <div class="list-item">
          <div class="item-title">缺陷养护总数(个)</div>
          <div class="item-value">
            {{ yhSum == null ? "-" : yhSum }}
          </div>
        </div>
      </div>

      <div class="echarts-box-list">
        <div class="title">缺陷问题等级分析</div>
        <div class="flex">
          <div
            class="echarts-box echarts-box-left"
            ref="flawProblemPieRef"
          ></div>
          <div
            class="echarts-box echarts-box-right"
            ref="flawProblemBarRef"
          ></div>
        </div>
      </div>

      <div class="echarts-box-list">
        <div class="title">缺陷养护对比分析</div>
        <div class="flex">
          <div class="echarts-box echarts-box-left" ref="yhComparePieRef"></div>
          <div
            class="echarts-box echarts-box-right"
            ref="yhCompareBarRef"
          ></div>
        </div>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { ref, onMounted, nextTick, onBeforeUnmount } from "vue";
import * as echarts from "echarts";
import { getV2PatrolStatisticChart } from "@/api/dike";
import {
  initCommonBarLineOptions,
  initCommonPieRingOptions,
  initCommonAngleAxisOptions,
} from "@/utils/echartsUtils";

const props = defineProps({
  resCode: {
    type: String,
    default: "",
  },
});
const projectSum: any = ref();
const xcRecordsSum: any = ref();
const flawSum: any = ref();
const yhSum: any = ref();
const paramsData: any = ref({
  wagaCode: null,
  wagaName: null,
  timeRange: [],
});
const flawProblemPieRef: any = ref();
const flawProblemBarRef: any = ref();
const yhComparePieRef: any = ref();
const yhCompareBarRef: any = ref();
let flawProblemPie: any = ref();
let flawProblemBar: any = ref();
let yhComparePie: any = ref();
let yhCompareBar: any = ref();

// 底层获取图表数据
function requestFunc(data: any) {
  const { group } = data;
  return getV2PatrolStatisticChart({
    group,
    startTime: paramsData.value.timeRange[0]
      ? paramsData.value.timeRange[0] + " 00:00:00"
      : null,
    endTime: paramsData.value.timeRange[1]
      ? paramsData.value.timeRange[1] + " 23:59:59"
      : null,
    adcd: paramsData.value.adcd,
    code: props.resCode,
  });
}

function echartsResizeFunc() {
  flawProblemPieRef.value?.resize();
  flawProblemBarRef.value?.resize();
  yhComparePieRef.value?.resize();
  yhCompareBarRef.value?.resize();
}
// 获取页面数据
function getTableData() {
  // 缺陷问题等级分析
  requestFunc({ group: "C_16" }).then((res: any) => {
    if (res) {
      nextTick(() => {
        // 柱形图
        flawProblemBar.value?.dispose();
        flawProblemBar.value = echarts.init(flawProblemBarRef.value);
        flawProblemBar.value.setOption(
          initCommonBarLineOptions({
            data: res || {},
            type: "line",
            colors: ["#0099DF", "#36B29E", "#F29130", "#F45555"],
            seriesOptions: {
              barWidth: 20,
            },
          })
        );
        // 饼状图
        flawProblemPie.value?.dispose();
        flawProblemPie.value = echarts.init(flawProblemPieRef.value);
        flawProblemPie.value.setOption(
          initCommonPieRingOptions({
            data: res || {},
            colors: [
              {
                type: "linear",
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: "rgba(54, 163, 217, 0.1)", // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: "rgba(54, 163, 217, 1)", // 100% 处的颜色
                  },
                ],
                global: false, // 缺省为 false
              },
              {
                type: "linear",
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: "rgba(54, 178, 158, 0.1)", // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: "rgba(54, 178, 158, 1)", // 100% 处的颜色
                  },
                ],
                global: false, // 缺省为 false
              },
              {
                type: "linear",
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: "rgba(242, 145, 48, 0.1)", // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: "rgba(242, 145, 48, 1)", // 100% 处的颜色
                  },
                ],
                global: false, // 缺省为 false
              },
              {
                type: "linear",
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: "rgba(244, 85, 85, 0.1)", // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: "rgba(244, 85, 85, 1)", // 100% 处的颜色
                  },
                ],
                global: false, // 缺省为 false
              },
            ],
            seriesOptions: {},
          })
        );
      });
    }
  });
  // 缺陷养护对比分析
  requestFunc({ group: "C_17" }).then((res: any) => {
    if (res) {
      if (res.yaxis?.length) {
        yhSum.value = Number(
          res.yaxis
            .flatMap((v: any) => v.series)
            ?.find((v: any) => v.code === "DF_BD_YH_SUM")?.sum ?? null
        );
      }
      nextTick(() => {
        // 柱形图
        yhCompareBar.value?.dispose();
        yhCompareBar.value = echarts.init(yhCompareBarRef.value);
        yhCompareBar.value.setOption(
          initCommonBarLineOptions({
            data: res || {},
            type: "bar",
            colors: ["#0099DF", "#81B84A"],
            seriesOptions: {
              barWidth: 20,
            },
          })
        );
        // 饼状图
        yhComparePie.value?.dispose();
        yhComparePie.value = echarts.init(yhComparePieRef.value);
        let options = initCommonAngleAxisOptions({
          data: res || {},
          colors: [
            {
              type: "linear",
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [
                {
                  offset: 0,
                  color: "rgba(54, 163, 217, 1)", // 0% 处的颜色
                },
                {
                  offset: 1,
                  color: "rgba(54, 163, 217, 0.1)", // 100% 处的颜色
                },
              ],
              global: false, // 缺省为 false
            },
            {
              type: "linear",
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [
                {
                  offset: 0,
                  color: "rgba(129, 184, 74, 1)", // 0% 处的颜色
                },
                {
                  offset: 1,
                  color: "rgba(129, 184, 74, 0.1)", // 100% 处的颜色
                },
              ],
              global: false, // 缺省为 false
            },
          ],
          seriesOptions: {},
        });
        yhComparePie.value.setOption(options);
      });
    }
  });
  // 项目统计总数
  requestFunc({ group: "C_18" }).then((res: any) => {
    if (res) {
      if (res?.yaxis?.length) {
        let newArr = res.yaxis.flatMap((v: any) => v.series);
        projectSum.value = newArr
          .map((v: any) => Number(v.sum ?? null))
          .reduce((acc: number, cur: number) => {
            return acc + cur;
          }, 0);
      }
    }
  });
}
function handleSearch() {
  getTableData();
}
function resetSearch() {
  paramsData.value.timeRange = [];
  paramsData.value.wagaCode = null;
  getTableData();
}
onMounted(() => {
  getTableData();
  window.addEventListener("resize", echartsResizeFunc);
});

onBeforeUnmount(() => {
  window.removeEventListener("resize", echartsResizeFunc);
});
</script>
<style scoped lang="scss">
.overview-analysis-page {
  height: 100%;
  .search-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 12px;
    .options-box {
      display: flex;
      align-items: center;
      gap: 8px;
    }
  }

  .content-box {
    height: calc(100% - 32px);
    padding: 24px;
    overflow-y: auto;
    .sum-box-list {
      display: flex;
      justify-content: space-around;
      gap: 16px;
      margin-bottom: 12px;
      .list-item {
        width: 25%;
        height: 102px;
        border: 1px solid #36b29e;
        border-radius: 10px;
        position: relative;
        padding: 16px 24px;
        background: linear-gradient(
            180deg,
            #eafffc 0%,
            rgba(222, 255, 250, 0) 100%
          ),
          #ffffff;
        overflow: hidden;
        &::after {
          position: absolute;
          content: "";
          background: url("@/assets/img/icon-attr-bg.png") no-repeat center
            center;
          width: 64px;
          height: 64px;
          right: -12px;
          bottom: -12px;
        }
        .item-title {
          font-size: 14px;
        }
        .item-value {
          margin-top: 12px;
          font-size: 32px;
          color: #36b29e;
          font-weight: 500;
        }
      }
    }

    .echarts-box-list {
      .title {
        padding-left: 10px;
        font-size: 14px;
        font-weight: 500;
        margin-top: 12px;
        margin-bottom: 12px;
        position: relative;
        &::before {
          content: " ";
          width: 4px;
          height: 4px;
          background: #36b29e;
          position: absolute;
          left: 1px;
          top: 50%;
          margin-top: -2px;
          transform: rotate(45deg);
        }
      }

      .echarts-box {
        width: 100%;
        height: 224px;
        border: 1px solid #f0f0f0;
      }
      .flex {
        display: flex;
        gap: 16px;
        .echarts-box-left {
          flex-shrink: 0;
          width: 224px;
        }
        .echarts-box-right {
          flex: 1;
        }
      }
    }
  }
}
</style>