shuili-vue/src/views/sluice/runManage/patrolMaintenance/overviewAnalysis/index.vue

<template>
  <div class="overview-analysis-page slider-right">
    <TopBackTitle :showBackBtn="false"></TopBackTitle>

    <div class="slider-right-body">
      <div class="top-search">
        <span class="ml-10">巡查周期：</span>
        <el-date-picker
          v-model="paramsData.timeRange"
          size="small"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          value-format="yyyy-MM-dd"
        ></el-date-picker>
        <span class="ml-10">行政区划：</span>
        <el-cascader
          v-model="paramsData.adcd"
          :props="areasOptionProps"
          placeholder="请选择行政区划"
          clearable
          size="small"
        >
        </el-cascader>
        <el-button
          class="search-btn !ml-16"
          size="small"
          type="success"
          @click="handleSearch()"
          >查询</el-button
        >
        <el-button @click="resetSearch()" size="small">重置</el-button>
      </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="echarts-box" ref="proEchart"></div>
        </div>

        <div class="echarts-box-list">
          <div class="title">巡查分析</div>
          <div class="echarts-box" ref="patrolEchart"></div>
        </div>

        <div class="echarts-box-list">
          <div class="title">缺陷和养护对比</div>
          <div class="echarts-box" ref="compareEchart"></div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import * as echarts from "echarts";
import TopBackTitle from "@/components/TopBackTitle/index.vue";
import { cascaderLazyLoad } from "@/utils/elUtils";

import { getV2PatrolStatisticChart } from "@/api/dike";

import { initCommonBarLineOptions } from "@/utils/echartsUtils";

export default {
  components: {
    TopBackTitle,
  },
  data() {
    return {
      projectSum: null,
      xcRecordsSum: null,
      flawSum: null,
      yhSum: null,
      tabsList: [],
      paramsData: {
        timeRange: [],
        adcd: null,
      },
      areasOptionProps: {
        emitPath: false,
        checkStrictly: true, //选择任意一级
        expandTrigger: "hover",
        lazy: true,
        lazyLoad: cascaderLazyLoad,
      },
      proEchartInstance: null,
      patrolEchartInstance: null,
      compareEchartInstance: null,
    };
  },
  mounted() {
    this.getTableData();
    window.addEventListener("resize", this.echartsResizeFunc);
  },
  beforeMounted() {
    window.removeEventListener("resize", this.echartsResizeFunc);
  },
  methods: {
    // 底层获取图表数据
    requestFunc({ group }) {
      return getV2PatrolStatisticChart({
        group,
        startTime: this.paramsData.timeRange[0]
          ? this.paramsData[0] + " 00:00:00"
          : null,
        endTime: this.paramsData.timeRange[1]
          ? this.paramsData[1] + " 23:59:59"
          : null,
        adcd: this.paramsData.adcd,
      });
    },
    // 渲染echarts图表

    renderEcharts({
      group,
      echartsInstanceName,
      echartsDomName,
      echartsOptions,
    }) {
      return new Promise((r, j) => {
        this.requestFunc({
          group,
        })
          .then((res) => {
            if (res.data) {
              this.$nextTick(() => {
                if (this[echartsInstanceName])
                  this[echartsInstanceName].dispose();
                this[echartsInstanceName] = echarts.init(
                  this.$refs[echartsDomName]
                );
                this[echartsInstanceName].setOption(
                  initCommonBarLineOptions({
                    ...echartsOptions,
                    data: res.data || {},
                  })
                );
              });
            }
            r(res);
          })
          .catch((err) => {
            j(err);
          });
      });
    },
    echartsResizeFunc() {
      if (this.proEchartInstance) this.proEchartInstance.resize();
      if (this.patrolEchartInstance) this.patrolEchartInstance.resize();
      if (this.compareEchartInstance) this.compareEchartInstance.resize();
    },
    // 获取页面数据
    getTableData() {
      // 渲染工程分布
      this.renderEcharts({
        group: "C_SZ_1",
        echartsInstanceName: "proEchartInstance",
        echartsDomName: "proEchart",
        echartsOptions: {
          type: "bar",
          seriesOptions: {
            itemStyle: {
              color: "#36B29E",
            },
            barWidth: 20,
          },
        },
      }).then((res) => {
        if (res.data) {
          // 渲染图表和统计总数
          if (res.data?.yaxis?.length) {
            let num = res.data.yaxis[0]?.series.find(
              (v) => v.code === "SZ_PROJECT_ADCD_SUM"
            )?.sum;
            this.projectSum = Number(num ?? null);
          }
        }
      });
      // 获取巡查分析数据
      this.renderEcharts({
        group: "C_SZ_2",
        echartsInstanceName: "patrolEchartInstance",
        echartsDomName: "patrolEchart",
        echartsOptions: {
          type: "bar",
          colors: ["#29CCCC", "#0099DF"],
          seriesOptions: {
            barWidth: 20,
            stack: "one",
          },
        },
      }).then((res) => {
        if (res.data) {
          // 渲染图表和统计总数
          if (res.data?.yaxis?.length) {
            this.xcRecordsSum = res.data.yaxis
              .flatMap((item) => item.series)
              .flatMap((v) => Number(v.sum ?? null))
              .reduce((acc, cur) => acc + cur, 0);
          }
        }
      });
      // 获取巡查分析数据
      this.renderEcharts({
        group: "C_SZ_3",
        echartsInstanceName: "compareEchartInstance",
        echartsDomName: "compareEchart",
        echartsOptions: {
          type: "bar",
          colors: ["#81B84A", "#0099DF"],
          seriesOptions: {
            barWidth: 20,
          },
        },
      }).then((res) => {
        if (res.data) {
          // 渲染图表和统计总数
          if (res.data?.yaxis?.length) {
            let newArr = res.data.yaxis.flatMap((v) => v.series);
            let num1 = newArr.find((v) => v.code === "SZ_QX_ADCD_SUM")?.sum;
            this.flawSum = Number(num1 ?? null);
            let num2 = newArr.find((v) => v.code === "SZ_YH_ADCD_SUM")?.sum;
            this.yhSum = Number(num2 ?? null);
          }
        }
      });
    },
    handleSearch() {
      this.getTableData();
    },
    resetSearch() {
      this.paramsData.timeRange = [];
      this.paramsData.adcd = null;
      this.getTableData();
    },
  },
};
</script>
<style scoped lang="scss">
.overview-analysis-page {
  .slider-right-body {
    padding: 0;
    .top-search {
      padding: 24px;
      border-bottom: 1px solid #ccc;
    }

    .content-box {
      padding: 24px;
      .sum-box-list {
        display: flex;
        .list-item {
          width: 25%;
          height: 102px;
          border: 1px solid #36b29e;
          border-radius: 10px;
          position: relative;
          padding: 16px 24px;
          margin-right: 16px;
          margin-bottom: 12px;
          background: linear-gradient(
              180deg,
              #eafffc 0%,
              rgba(222, 255, 250, 0) 100%
            ),
            #ffffff;
          overflow: hidden;
          &::after {
            position: absolute;
            content: "";
            background: url("../../../../../assets/image/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;
        }
      }
    }
  }
}
</style>