ssti-CollegeManage/src/views/echarts/echarts.vue

<template>
  <!-- 创业公司登记 -->
  <div class="firm" v-loading="loading">
    <div class="pAHeader">
      <div class="pAHeader1">数据监测</div>
    </div>
    <hr />
    <!-- 顶部展示信息区开始 -->
    <topData v-if="!loading" :data="HeaderData" />
    <!-- 顶部展示信息区结束 -->
    <!-- 中部大饼区开始 -->
    <div class="midBlock">
      <!-- 圆形图开始 -->
      <CircularChart v-if="!loading" :data="CircularData" />
      <!-- 圆形图结束 -->
      <!-- 横向柱状图开始 -->
      <HorizontalChart v-if="!loading" :data="HorizontalData" />
      <!-- 横向柱状图结束 -->
    </div>
    <!-- 中部大饼区结束 -->

    <!-- 柱状图区域开始 -->
    <ColumnarChart v-if="!loading" :data="ColumnarData" />
    <!-- 柱状图区域结束 -->

    <!-- 底部表格区域开始 -->
    <RankingTable v-if="!loading" :tableData="tableData" />
    <!-- 通知表格结束-->
    <!-- 底部表格区域结束 -->
  </div>
</template>
    
  <script>
//顶部数据
import topData from "./components/topData.vue";
//圆形图
import CircularChart from "./components/CircularChart.vue";
//横向柱状图
import HorizontalChart from "./components/HorizontalChart.vue";
//竖向柱状图
import ColumnarChart from "./components/ColumnarChart.vue";
//排名表格
import RankingTable from "./components/RankingTable.vue";
export default {
  components: {
    topData,
    CircularChart,
    HorizontalChart,
    ColumnarChart,
    RankingTable,
  },
  data() {
    return {
      loading: false,
      //头部区域数据
      HeaderData: {
        people: 0,
        project: 0,
        activity: 0,
        // budget:0,
        isPay: 0,
      },
      //圆形
      CircularData: [
        { value: 0, name: "创客空间" },
        { value: 0, name: "创客项目" },
        { value: 0, name: "创客活动" },
      ],
      //横行的柱状
      HorizontalData: [
        // [ '物联网激光切割器',0],
        // [ '人工智能领跑马拉松',1000, ],
        // [ '3D演奏智能工具', 2000],
        // [ '人工智能分链机器',3000],
      ],
      // 柱状
      ColumnarData: [
        // ['3D智能分链机器', 2000],
        // ['3D智能分链机器1',3000],
        // ['3D智能分链机器2', 2500],
        // ['3D智能分链机器3', 1000],
        // ['3D智能分链机器4', 2000],
        // ['3D智能分链机器5',3000],
        // ['3D智能分链机器6', 2500],
        // ['3D智能分链机器7', 1000],
        // ['3D智能分链机器8', 2000],
        // ['3D智能分链机器9',3000],
        // ['3D智能分链机器10', 2500],
        // ['3D智能分链机器11', 1000],
        // ['3D智能分链机器12', 2000],
        // ['3D智能分链机器13',3000],
        // ['3D智能分链机器14', 2500],
        // ['3D智能分链机器15', 1000],
      ],
      tableData: [
        // {title:"人工智能分链机器",pro_leader:"覃罡彤",TypeName:"个人创客",Activity:"286",ClassName:"信息与通讯学院"},
        // {title:"3D演奏智能工具",pro_leader:"袁一鸣",TypeName:"个人创客",Activity:"225",ClassName:"信息与通讯学院"},
        // {title:"物联网切割机器",pro_leader:"张晓分",TypeName:"个人创客",Activity:"169",ClassName:"中德制造"},
        // {title:"人工智能领航AI马拉松",pro_leader:"林子夏",TypeName:"创客活动",Activity:"121",ClassName:"中德制造"},
      ],
    };
  },
  methods: {
    getData() {
      this.loading = true;
      this.ajax
        .get(this.$store.state.api + "/getEchartsData", {
          uid: this.$store.state.userInfo.userid,
        })
        .then((result) => {
          let data = result["data"];
          // console.log(data)
          //创客项目人数
          this.HeaderData["people"] = data[0][0]["total"];
          //目前积累项目数量
          this.HeaderData["project"] =
            data[1][0]["student"] + data[1][0]["wordspace"];
          //目前积累活动数量
          this.HeaderData["activity"] =
            data[2][0]["Maker"] + data[2][0]["personal"];
          //已支出预算
          let num = 0;
          data[3].forEach((item) => {
            item["isUse"] = 0;
            let isUse = JSON.parse(item["actualuse"]);
            for (let i in isUse) item["isUse"] += Number(isUse[i]);
            num += item["isUse"];
          });
          // this.HeaderData['isPay'] = 9999999;
          // this.HeaderData['isPay'] = 10000000;
          this.HeaderData["isPay"] = num;
          //扇形图数据
          this.CircularData[0]["value"] = data[5][0]["tskj"];
          this.CircularData[1]["value"] = data[5][0]["ckxm"];
          this.CircularData[2]["value"] = data[2][0]["Maker"];

          //创客活动资金
          console.log(data[3]);
          let MakerData = data[3].filter((item) => item.type == 2);
          let GroupMakerData = [];
          MakerData.forEach((item) => {
            let addActivity = GroupMakerData.filter(
              (fItem) => fItem["acId"] == item["acId"]
            );
            if (addActivity.length != 0) {
              addActivity[0]["isUse"] += item["isUse"];
            } else {
              GroupMakerData.push(item);
            }
          });
          GroupMakerData.sort((item1, item2) => item2["isUse"] - item1["isUse"])
            .splice(0, 4)
            .sort((item1, item2) => item1["isUse"] - item2["isUse"])
            .forEach((item) =>
              this.HorizontalData.push([item["title"], item["isUse"]])
            );

          //项目资金
          let personalData = data[6].filter((item) => item.type != 2);
          let GroupPersonalData = [];
          personalData.forEach((item) => {
            let addActivity = GroupPersonalData.filter(
              (fItem) => fItem["acId"] == item["acId"]
            );
            if (addActivity.length != 0) {
              addActivity[0]["isUse"] += item["isUse"];
            } else {
              GroupPersonalData.push(item);
            }
          });
          for (var i = 0; i < GroupPersonalData.length; i++) {
            var obj = eval("(" + GroupPersonalData[i].actualuse + ")");
            var sum = 0;
            for (var key in obj) {
              if (obj.hasOwnProperty(key)) {
                sum += parseInt(obj[key]);
              }
            }
            GroupPersonalData[i].value = sum;
          }
          GroupPersonalData.sort(function (a, b) {
            return a.value - b.value;
          });
          GroupPersonalData.forEach((item) =>
            this.ColumnarData.push([item["title"], item["value"]])
          );
          //项目排名
          this.tableData = data[4];

          this.loading = false;
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },
  mounted() {
    this.getData();
  },
};
</script>
    
<style lang="less">
.midBlock {
  //中部大饼
  max-width: 100%;
  min-width: 90%;
  height: 400px;
  margin-top: 20px;
  // background: #ce7070;
  display: flex;
  justify-content: space-between;
  align-items: center;
  .mid {
    height: 95%;
    width: 49%;
    padding: 20px;
    padding-left: 0;
    box-sizing: border-box;
    background: #f3f6f7;
    overflow: hidden;
  }
}

.histogram {
  //柱状图
  margin-top: 20px;
  padding-top: 20px;
  box-sizing: border-box;
  // padding: 20px;
  min-width: 90%;
  max-width: 100%;
  height: 400px;
  background: #f3f6f7;
  overflow: hidden;
}
</style>