enteprise-ui/src/views/index.vue

<template>
  <!-- 首页 - littlegreen -->
  <div :class="className" :style="{ height: '100%', width: width }">
    <el-row
      :gutter="20"
      class="i-row"
      style="margin-left: 0px; margin-right: 0px"
    >
      <el-col>
        <el-card>
          <div class="i-gq">
            <h3 class="i-title">政府与企业总投入</h3>
            <el-dropdown>
              <span
                class="el-dropdown-link"
                style="color: black; font-size: 16px; font-weight: bold"
              >
                {{ selectYearName }}
                <i
                  class="el-icon-arrow-down el-icon--right"
                  style="font-size: 16px; font-weight: bold"
                ></i>
                <!-- <i class="el-icon-sort el-icon--right" style="font-size: 16px;font-weight: bold;transform:rotate(90deg)"></i> -->
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item
                  v-for="(data, i) in yearDataList"
                  :key="i"
                  @click.native="handleDrop(data)"
                >
                  {{ data.name }}
                </el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </div>
          <el-row :gutter="20">
            <el-col :span="6">
              <div>
                <p class="i-name">土地/亩</p>
                <p class="i-number">
                  {{ indexData.landArea ? indexData.landArea : "-" }}
                </p>
              </div>
            </el-col>
            <el-col :span="6"
              ><div>
                <p class="i-name">电力/万千瓦时</p>
                <p class="i-number">
                  {{
                    indexData.powerConsumeSum ? indexData.powerConsumeSum : "-"
                  }}
                </p>
              </div></el-col
            >
            <el-col :span="6"
              ><div>
                <p class="i-name">天然气/立方米</p>
                <p class="i-number">
                  {{
                    indexData.energyConsumeSum
                      ? indexData.energyConsumeSum
                      : "-"
                  }}
                </p>
              </div></el-col
            >
            <el-col :span="6">
              <div>
                <p class="i-name">研发经费/万元</p>
                <p class="i-number">
                  {{ indexData.fundingSum ? indexData.fundingSum : "-" }}
                </p>
              </div>
            </el-col>
          </el-row>
        </el-card>
      </el-col>
    </el-row>
    <el-row
      :gutter="20"
      class="i-row"
      style="margin-left: 0px; margin-right: 0px"
    >
      <el-col :span="14">
        <el-card>
          <h3 class="i-title">行业分类企业数量</h3>
          <el-row>
            <el-col :span="24">
              <div
                ref="piechart"
                :style="{ height: height, width: width }"
              ></div>
            </el-col>
          </el-row>
        </el-card>
      </el-col>
      <el-col :span="10" style="height: 100%">
        <el-card>
          <h3 class="i-title">产出总效益</h3>
          <el-row
            :style="{ height: height, width: width }"
            style="
              display: flex;
              flex-direction: column;
              justify-content: space-between;
            "
          >
            <el-col :span="24"
              ><div class="i-out-box">
                <p class="i-name">工业总产值/万元</p>
                <p class="i-number">
                  {{
                    indexData.totalIndustrialValueSum
                      ? indexData.totalIndustrialValueSum
                      : "-"
                  }}
                </p>
              </div></el-col
            >
            <el-col :span="24"
              ><div class="i-out-box">
                <p class="i-name">应税收入/万元</p>
                <p class="i-number">
                  {{
                    indexData.taxableIncomeSum
                      ? indexData.taxableIncomeSum
                      : "-"
                  }}
                </p>
              </div></el-col
            >
            <el-col :span="24"
              ><div class="i-out-box">
                <p class="i-name">实缴税金/万元</p>
                <p class="i-number">
                  {{ indexData.paidTaxSum ? indexData.paidTaxSum : "-" }}
                </p>
              </div></el-col
            >
          </el-row>
        </el-card>
      </el-col>
    </el-row>
    <el-row
      class="i-row"
      :gutter="20"
      style="margin-left: 0px; margin-right: 0px"
    >
      <el-col :span="24">
        <el-card>
          <h3 class="i-title">行业分类企业数量</h3>
          <div ref="chart" :style="{ height: height, width: width }"></div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import * as echarts from "echarts";
import resize from "./dashboard/mixins/resize";
import { getBarData, getPieData, getIndexData } from "@/api/home";
export default {
  mixins: [resize],
  props: {
    className: {
      type: String,
      default: "chart",
    },
    width: {
      type: String,
      default: "100%",
    },
    height: {
      type: String,
      default: "300px",
    },
  },
  data() {
    return {
      chart: null,
      chartData: [],
      piechart: null,
      pieChartData: [],
      yearDataList: [
        {
          name: "总和",
          key: 0,
        },
      ],
      selectYearName: "总和",
      selectYear: 0,
      indexData: {
        createBy: null,
        createTime: null,
        updateBy: null,
        updateTime: null,
        remark: null,
        id: null,
        year: null,
        landArea: null,
        powerConsumeSum: null,
        energyConsumeSum: null,
        fundingSum: null,
        employeeNumberSum: null,
        profitSum: null,
        enterpriseNumbers: null,
        totalIndustrialValueSum: null,
        taxableIncomeSum: null,
        paidTaxSum: null,
      },
    };
  },
  mounted() {
    this.fetchData();
    // this.initChart();
    // this.initPieChart();
  },
  beforeDestroy() {
    if (this.chart) {
      this.chart.dispose();
    }
    if (this.piechart) {
      this.piechart.dispose();
    }
  },
  methods: {
    // 初始化柱状图
    initChart() {
      if (this.chart) {
        this.chart.dispose();
      }
      this.chart = echarts.init(this.$refs.chart);
      console.log(this.chartData);
      // 饼图
      this.chart.setOption(
        {
          tooltip: {
            trigger: "axis",
            axisPointer: {
              type: "shadow",
            },
          },
          dataZoom: [
            {
              type: "slider",
              yAxisIndex: 0,
              left: 0,
              start: 95,
              end: 100,
            },
            {
              type: "inside",
              yAxisIndex: 0,
            },
          ],
          legend: {},
          grid: {
            top: "2%",
            left: "4%",
            right: "2%",
            bottom: "2%",
            containLabel: true,
          },
          xAxis: {
            type: "value",
            boundaryGap: [0, 0.01],
          },
          yAxis: {
            type: "category",
            // inverse: true,
            data: this.chartData.map((item) => item.industryName),
          },
          series: [
            {
              // realtimeSort: true,
              type: "bar",
              data: this.chartData.map((item) => item.number),
              label: {
                show: true,
                formatter: "{c}",
                position: "right",
              },
              barWidth: "30%",
              itemStyle: {
                color: new echarts.graphic.LinearGradient(0.8, 0, 0, 0, [
                  { offset: 0, color: "#83bff6" },
                  { offset: 0.5, color: "#188df0" },
                  { offset: 1, color: "#188df0" },
                ]),
                barBorderRadius: [0, 50, 50, 0],
              },
            },
          ],
        }

        // {
        // title: {
        //   text: 'Referer of a Website',
        //   subtext: 'Fake Data',
        //   left: 'center'
        // },
        // tooltip: {
        //   trigger: "item",
        // },
        // legend: {
        //   type: "scroll",
        //   scrollDataIndex: 0,
        //   orient: "vertical",
        //   left: 10,
        //   itemGap: 20,
        //   top: "middle",
        //   align: "left",
        //   icon: "circle",
        //   formatter: (name) => {
        //     if (!name) return "";
        //     return this.getEqualNewlineString(name, 10); // 根据你的需求修改参数
        //   },
        // },
        // series: [
        //     {
        //       radius: ['20%', '100%'],
        //       center: ['65%', '50%'],
        //       avoidLabelOverlap: false,
        //       type: "pie",
        //       radius: "50%",
        //       data: [
        //         { value: 1048, name: "文教、工美、体育和娱乐用品制造业" },
        //         { value: 735, name: "皮革、毛皮、羽毛及其制品和制鞋业" },
        //         { value: 580, name: "电气机械和器材制造业" },
        //         { value: 484, name: "印刷和记录媒介复制业" },
        //         { value: 300, name: "电气机械和器材制造业" },
        //         { value: 300, name: "皮革、毛皮、羽毛及其制品和制鞋业" },
        //         { value: 300, name: "金属制品业" },
        //         { value: 300, name: "农副食品加工业" },
        //         { value: 300, name: "酒、饮料和精制茶制造业" },
        //         { value: 300, name: "造纸和纸制品业" },
        //       ],
        //       itemStyle: {
        //         normal: {
        //           label: {
        //             show: false,
        //           },
        //           labelLine: {
        //             show: false,
        //           },
        //         },
        //       },
        //     },
        //   ],
        // }
      );
    },
    //params 要处理的字符串
    //length 每行显示长度
    getEqualNewlineString(params, length) {
      let text = "";
      let count = Math.ceil(params.length / length); // 向上取整数
      // 一行展示length个
      if (count > 1) {
        for (let z = 1; z <= count; z++) {
          text += params.substr((z - 1) * length, length);
          if (z < count) {
            text += "\n";
          }
        }
      } else {
        text += params.substr(0, length);
      }
      return text;
    },
    // 初始化饼图
    initPieChart() {
      if (this.piechart) {
        this.piechart.dispose();
      }
      // console.log(this.pieChartData);
      let chartArray = this.pieChartData.map((item) => {
        return {
          value: item.number,
          name: item.industryName,
        };
      });
      this.piechart = echarts.init(this.$refs.piechart);
      this.piechart.setOption({
        tooltip: {
          trigger: "item",
        },
        series: [
          {
            type: "pie",
            radius: ["40%", "75%"],
            center: ["50%", "50%"],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 5,
              borderColor: "#fff",
              borderWidth: 2,
            },
            label: {
              show: true,
            },
            labelLine: {
              show: true,
            },
            data: chartArray,
          },
        ],
      });
    },
    // 切换年份
    handleDrop(e) {
      this.selectYear = e?.key;
      this.selectYearName = e?.name;
      this.updateData(this.selectYear);
    },
    fetchData() {
      getBarData()
        .then((res) => {
          if (res && res?.rows) {
            this.chartData = res.rows;
            this.initChart();
          }
        })
        .catch((error) => {
          console.error("Error fetching data:", error);
        });
      getPieData()
        .then((res) => {
          if (res && res?.rows) {
            this.pieChartData = res.rows;
            this.initPieChart();
          }
        })
        .catch((error) => {
          console.error("Error fetching data:", error);
        });
      this.updateData(this.selectYear);
    },
    updateData(year) {
      const that = this;
      getIndexData({
        year: year,
      })
        .then((res) => {
          that.indexData = res?.rows[0];
          let arr = res?.rows[0].years.map((item) => {
            return {
              name: item,
              key: item,
            };
          });
          that.yearDataList = [
            {
              name: "总和",
              key: 0,
            },
            ...arr,
          ];
        })
        .catch((error) => {
          console.error("Error fetching data:", error);
        });
    },
  },
};
</script>

<style lang="scss" scoped>
.i-gq {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.i-row {
  margin: 15px 0;
  .i-title {
    font-weight: bold;
    margin: 10px 0 25px;
  }
  p {
    margin: 0;
  }
  .i-number {
    font-size: 40px;
    font-weight: bold;
    letter-spacing: 2px;
  }
  .i-name {
    letter-spacing: 1px;
    margin-bottom: 10px;
  }
  .i-out-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 10px 0;
    .i-name {
      margin-bottom: 0;
    }
  }
}
</style>