dy-admin-manager/src/views/main/baseinfo/modals/operateEcharts.vue

<template>
  <div>
    <div class="eachartTop">
      <SearchHeader
        title="时间筛选: "
        :isShowQuert="true"
        :dates="mdate"
        :endDate="endDate"
        @changeValue="changeValue"
      />
    </div>
    <statistic :col="6" class="statistic" :cols="12">
      <statistic-item>
        <span>
          现金总收入: (元)
        </span>
        <span>
          <count-to
            :endVal="totalAmount"
            :duration="300"
            :decimals="2"
            class="blod"
          />
        </span>
      </statistic-item>
      <statistic-item>
        <span>
          管乐迷现金收入: (元)
        </span>
        <span>
          <count-to
            :endVal="gymTotal"
            :duration="300"
            :decimals="2"
            :class="'des'"
          />
        </span>
      </statistic-item>
      <statistic-item>
        <span>
          酷乐秀现金收入: (元)
        </span>
        <span>
          <count-to
            :endVal="colexiuTotal"
            :duration="300"
            :decimals="2"
            :class="'des'"
          />
        </span>
      </statistic-item>
      <statistic-item>
        <span>
          管乐团现金收入: (元)
        </span>
        <span>
          <count-to
            :endVal="gytTotal"
            :duration="300"
            :decimals="2"
            :class="'des'"
          />
        </span>
      </statistic-item>
      <statistic-item>
        <span>
          课堂乐器现金收入: (元)
        </span>
        <span>
          <count-to
            :endVal="ktyqTotal"
            :duration="300"
            :decimals="2"
            :class="'des'"
          />
        </span>
      </statistic-item>
      <statistic-item>
        <span>
          酷乐秀机构版现金收入: (元)
        </span>
        <span>
          <count-to
            :endVal="colexiuTenantTotal"
            :duration="300"
            :decimals="2"
            :class="'des'"
          />
        </span>
      </statistic-item>
    </statistic>
    <div></div>

    <div class="operateEcharts">
      <div class="eachartTitle">
        <div>
          管乐迷现金收入:
          <count-to
            :endVal="gymTotal"
            :duration="300"
            :decimals="2"
            class="des"
          />
          元
        </div>
        <el-select
          clearable
          filterable
          placeholder="请选择分部"
          v-model="organId"
          @change="
            () => {
              this.isChangeOrgan = true;
              this.getData();
            }
          "
        >
          <el-option
            v-for="(item, index) in selects.branchs"
            :key="index"
            :label="item.name"
            :value="item.id"
          ></el-option>
        </el-select>
      </div>
      <div class="gym-echarts"></div>
      <div class="eachartTitle">
        <div>
          酷乐秀现金收入:
          <count-to
            :endVal="colexiuTotal"
            :duration="300"
            :decimals="2"
            class="des"
          />
          元
        </div>
      </div>
      <div class="colexiu-echarts"></div>

      <div class="eachartTitle">
        <div>
          管乐团现金收入:
          <count-to
            :endVal="gytTotal"
            :duration="300"
            :decimals="2"
            class="des"
          />
          元
        </div>
      </div>
      <div class="gyt-echarts"></div>

      <div class="eachartTitle">
        <div>
          课堂乐器现金收入:
          <count-to
            :endVal="ktyqTotal"
            :duration="300"
            :decimals="2"
            class="des"
          />
          元
        </div>
      </div>
      <div class="ktyq-echarts"></div>

      <div class="eachartTitle">
        <div>
          酷乐秀机构版现金收入:
          <count-to
            :endVal="colexiuTenantTotal"
            :duration="300"
            :decimals="2"
            class="des"
          />
          元
        </div>
      </div>
      <div class="colexiu-tenant-echarts"></div>
    </div>
  </div>
</template>

<script>
import echarts from "echarts";
import CountTo from "vue-count-to";
import { multiDataSourceHomeStatsSummerIncome } from "../../api";
import SearchHeader from "./searchDayHeader";
import { getTimes } from "@/utils";

export default {
  components: {
    CountTo,
    SearchHeader
  },
  data() {
    return {
      organId: "",
      mdate: [],
      endDate: "",
      gymECharts: null,
      gymData: [],
      gymTotal: 0,
      gytEcharts: null,
      gytData: [],
      gytTotal: 0,
      colexiuEcharts: null,
      colexiuData: [],
      colexiuTotal: 0,
      ktyqEcharts: null,
      ktyqData: [],
      ktyqTotal: 0,
      colexiuTenantEcharts: null,
      colexiuTenantData: [],
      colexiuTenantTotal: 0,
      isChangeOrgan: false
    };
  },
  mounted() {
    this.mdate = this.getInitDate();
    this.endDate = this.$helpers.dayjs(new Date()).format("YYYY-MM-DD");
    this.getData();
    window.addEventListener("resize", this.resize);
  },
  beforeDestroy() {
    window.removeEventListener("resize", this.resize);
  },
  methods: {
    getInitDate() {
      const end = this.$helpers.dayjs(new Date()).format("YYYY-MM-DD");
      const start = this.$helpers
        .dayjs(new Date())
        // .set("month", 1)
        .subtract(1, "month")
        .format("YYYY-MM-DD");
      return [start, end];
    },
    getData() {
      multiDataSourceHomeStatsSummerIncome({
        ...getTimes(this.mdate, ["startTime", "endTime"]),
        organIds: this.organId
      }).then(res => {
        if (Array.isArray(res.data)) {
          const gym = res.data.find(item => item.platform == "gym");
          if (gym) {
            this.gymTotal = gym.totalAmount;
            this.gymData = gym.incomeByDates;
          }
          // 切换分部只更新管乐迷数据
          if (this.isChangeOrgan) {
            this.isChangeOrgan = false;
            this.createGym();
            return;
          }
          const gyt = res.data.find(item => item.platform == "gyt");
          if (gyt) {
            this.gytTotal = gyt.totalAmount;
            this.gytData = gyt.incomeByDates;
          }
          const clx = res.data.find(item => item.platform == "cls");
          if (clx) {
            this.colexiuTotal = clx.totalAmount;
            this.colexiuData = clx.incomeByDates;
          }
          const ktyq = res.data.find(item => item.platform == "kt");
          if (ktyq) {
            this.ktyqTotal = ktyq.totalAmount;
            this.ktyqData = ktyq.incomeByDates;
          }
          const clxt = res.data.find(item => item.platform == "clsOrg");
          if (clxt) {
            this.colexiuTenantTotal = clxt.totalAmount;
            this.colexiuTenantData = clxt.incomeByDates;
          }
          this.$nextTick(() => {
            this.init();
          });
        }
      });
    },
    changeValue(date) {
      // 请求更改数据
      this.mdate = date;
      this.getData();
    },
    resize() {
      this.gymECharts.resize();
      this.gytEcharts.resize();
      this.colexiuEcharts.resize();
      this.ktyqEcharts.resize();
      this.colexiuTenantEcharts.resize();
    },
    init() {
      this.createGym();
      this.createGyt();
      this.createColexiu();
      this.createColexiuTenant();
      this.createKtyq();
    },
    createGym() {
      if (this.gymECharts) {
        this.gymECharts.dispose();
      }
      this.gymECharts = echarts.init(document.querySelector(".gym-echarts"));
      const option = {
        title: {
          top: "0%",
          text: "",
          textStyle: {
            color: "#333",
            fontSize: 14
          }
        },
        tooltip: {
          trigger: "axis",
          formatter: function(data) {
            const item = data[0];
            return `${item.axisValue}<br /> ${item.marker} ${item.value.toFixed(
              2
            )}元`;
          }
        },
        grid: {
          left: 5,
          top: 30,
          right: 5,
          bottom: 5,
          containLabel: true
        },
        xAxis: {
          type: "category",
          data: this.gymData.map(item => item.date),
          axisLabel: {
            color: "#333",
            fontSize: 10
          }
        },
        yAxis: {
          type: "value",
          axisLabel: { formatter: "{value}元" }
        },
        series: [
          {
            data: this.gymData.map(item => item.totalAmount),
            type: "bar",
            color: "#00a79d",
            barMaxWidth: 40
          }
        ]
      };
      option && this.gymECharts.setOption(option);
    },
    createGyt() {
      if (this.gytEcharts) {
        this.gytEcharts.dispose();
      }
      this.gytEcharts = echarts.init(document.querySelector(".gyt-echarts"));
      const option = {
        grid: {
          left: 5,
          top: 30,
          right: 5,
          bottom: 5,
          containLabel: true
        },
        tooltip: {
          trigger: "axis",
          formatter: function(data) {
            const item = data[0];
            return `${item.axisValue}<br /> ${item.marker} ${item.value.toFixed(
              2
            )}元`;
          }
        },
        xAxis: {
          type: "category",
          data: this.gytData.map(item => item.date),
          axisLabel: {
            color: "#333",
            fontSize: 10
          }
        },
        yAxis: {
          type: "value",
          axisLabel: { formatter: "{value}元" }
        },
        series: [
          {
            data: this.gytData.map(item => item.totalAmount),
            type: "bar",
            color: "#00a79d",
            barMaxWidth: 40
          }
        ]
      };
      option && this.gytEcharts.setOption(option);
    },
    createColexiu() {
      if (this.colexiuEcharts) {
        this.colexiuEcharts.dispose();
      }
      this.colexiuEcharts = echarts.init(
        document.querySelector(".colexiu-echarts")
      );
      const option = {
        grid: {
          left: 5,
          top: 30,
          right: 5,
          bottom: 5,
          containLabel: true
        },
        tooltip: {
          trigger: "axis",
          formatter: function(data) {
            const item = data[0];
            return `${item.axisValue}<br /> ${item.marker} ${item.value.toFixed(
              2
            )}元`;
          }
        },
        xAxis: {
          type: "category",
          data: this.colexiuData.map(item => item.date),
          axisLabel: {
            color: "#333",
            fontSize: 10
          }
        },
        yAxis: {
          type: "value",
          axisLabel: { formatter: "{value}元" }
        },
        series: [
          {
            data: this.colexiuData.map(item => item.totalAmount),
            type: "bar",
            color: "#00a79d",
            barMaxWidth: 40
          }
        ]
      };
      option && this.colexiuEcharts.setOption(option);
    },
    createColexiuTenant() {
      if (this.colexiuTenantEcharts) {
        this.colexiuTenantEcharts.dispose();
      }
      this.colexiuTenantEcharts = echarts.init(
        document.querySelector(".colexiu-tenant-echarts")
      );
      const option = {
        grid: {
          left: 5,
          top: 30,
          right: 5,
          bottom: 5,
          containLabel: true
        },
        tooltip: {
          trigger: "axis",
          formatter: function(data) {
            const item = data[0];
            return `${item.axisValue}<br /> ${item.marker} ${item.value.toFixed(
              2
            )}元`;
          }
        },
        xAxis: {
          type: "category",
          data: this.colexiuTenantData.map(item => item.date),
          axisLabel: {
            color: "#333",
            fontSize: 10
          }
        },
        yAxis: {
          type: "value",
          axisLabel: { formatter: "{value}元" }
        },
        series: [
          {
            data: this.colexiuTenantData.map(item => item.totalAmount),
            type: "bar",
            color: "#00a79d",
            barMaxWidth: 40
          }
        ]
      };
      option && this.colexiuTenantEcharts.setOption(option);
    },
    createKtyq() {
      if (this.ktyqEcharts) {
        this.ktyqEcharts.dispose();
      }
      this.ktyqEcharts = echarts.init(document.querySelector(".ktyq-echarts"));
      const option = {
        grid: {
          left: 5,
          top: 30,
          right: 5,
          bottom: 5,
          containLabel: true
        },
        tooltip: {
          trigger: "axis",
          formatter: function(data) {
            const item = data[0];
            return `${item.axisValue}<br /> ${item.marker} ${item.value.toFixed(
              2
            )}元`;
          }
        },
        xAxis: {
          type: "category",
          data: this.ktyqData.map(item => item.date),
          axisLabel: {
            color: "#333",
            fontSize: 10
          }
        },
        yAxis: {
          type: "value",
          axisLabel: { formatter: "{value}元" }
        },
        series: [
          {
            data: this.ktyqData.map(item => item.totalAmount),
            type: "bar",
            color: "#00a79d",
            barMaxWidth: 40
          }
        ]
      };
      option && this.ktyqEcharts.setOption(option);
    }
  },
  computed: {
    totalAmount() {
      return this.gymTotal + this.gytTotal + this.colexiuTotal;
    }
  }
};
</script>
<style lang="less" scoped>
.eachartTop {
  margin-bottom: 20px;
  // display: flex;
  // align-items: center;
  // justify-content: space-between;
  // flex-wrap: wrap;
  // ::v-deep .box {
  //   margin-right: 5px;
  // }
  // ::v-deep .shape {
  //   display: none;
  // }
}
.eachartTitle {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.operateEcharts {
  // display: flex;
  .gym-echarts,
  .gyt-echarts,
  .colexiu-echarts,
  .ktyq-echarts,
  .colexiu-tenant-echarts {
    width: 100%;
    height: 350px;
    margin-bottom: 24px;
  }
}

.statistic .statistic-content > span {
  &:first-child {
    font-size: 14px !important;
  }
  font-size: 18px !important;
}
.blod {
  font-weight: bold !important;
  color: var(--color-primary) !important;
  font-size: 22px !important;
}
.des {
  font-size: 18px !important;
  color: var(--color-primary);
}
</style>