Gyyq-Upstairs/src/views/statistics/index.vue

<template>
  <!-- 正式的统计页面 -->
  <div class="dashboard-container">
    <!-- 1 -->
    <div class="dashboard-row">
      <div class="dashboard-col wide">
        <div class="allarea">
          <AllArea @year-change="handleYearChange" />
        </div>
      </div>
      <div class="dashboard-col narrow">
        <div class="itemhead">
          <span>消息通知</span>
        </div>
        <div class="mainarea">
          <Message />
        </div>
      </div>
    </div>

    <!-- 2区-->
    <div class="dashboard-rowtwo">
      <div class="dashboard-col wide bgcicon">
        <MapArea />
      </div>
      <div class="dashboard-col narrow">
        <div class="itemhead" style="margin: .5rem 0 0 0;">
          <span>功能区</span>
        </div>
        <div class="relaitem">
          <FunctionArea :years="years" />
        </div>

        <div class="itemhead" style="margin: 0;">
          <span>投资主体</span>
        </div>
        <div class="relaitem">
          <InvestArea :years="years" />
        </div>
      </div>
    </div>

    <!-- 3 -->
    <div class="dashboard-row">
      <div class="dashboard-col">
        <div class="itemhead">
          <span>产业数据分析</span>
        </div>
        <div class="relaitem">
          <Cyeshuju />
        </div>
      </div>
      <div class="dashboard-col">
        <div class="itemhead">
          <span>产业导向目录分析</span>
        </div>
        <div class="relaitem">
          <Cydxml />
        </div>
      </div>
      <div class="dashboard-col" style="height: 11rem;">
        <div class="itemhead">
          <span>产业导向细分产业分析</span>
        </div>
        <div class="relaitem" style="height: 9rem;">
          <Cydxxfgl />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import AllArea from '@/views/components/analysis/all.vue'
import FunctionArea from '@/views/components/analysis/function.vue'
import InvestArea from '@/views/components/analysis/invest.vue'
import Message from '@/views/components/analysis/message.vue'
import ProjectList from '@/views/components/analysis/projectList.vue'
import MapArea from '@/views/components/analysis/map.vue'
import Cyeshuju from '@/views/components/analysis/chanyeshuju.vue'
import Cydxml from '@/views/components/analysis/chanyedxml.vue'
import Cydxxfgl from '@/views/components/analysis/chanyexfgl.vue'
import { investall, fungong } from '@/api/ManageApi/index'

export default {
  components: {
    AllArea,
    FunctionArea,
    InvestArea,
    Message,
    ProjectList,
    MapArea,
    Cyeshuju,
    Cydxml,
    Cydxxfgl
  },
  data() {
    return {
      years: new Date().getFullYear().toString(),
      allnumber: {
        touzinumber: 0
      },
      functionnumber: {
        functionnumber: 0
      }
    };
  },
  methods: {
    handleYearChange(years) {
      this.years = years;
      console.log("index.vue: handleYearChange called with years:", years);
    },
    async getData() {
      const response = await investall();
      if (response && response.data) {
        const totalCount = response.data.reduce((sum, item) => sum + item.count, 0);
        this.allnumber = {
          touzinumber: totalCount
        };
      }
    },
    async getfuncdata() {
      const response2 = await fungong();
      if (response2 && response2.data) {
        const totalCount2 = response2.data.reduce(
          (sum, item) => sum + item.count, 0
        );
        this.functionnumber = {
          functionnumber: totalCount2
        }
      }
    }
  },
  created() {
    this.getData();
    this.getfuncdata();
  }
};
</script>


<style scoped>
.dashboard-container {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 0.5rem;
  gap: 0.5rem;
  box-sizing: border-box;
  overflow: auto;
}

.dashboard-row {
  display: flex;
  flex: 1;
  gap: 0.5rem;

}

.dashboard-rowtwo {
  display: flex;
  height: auto;
  gap: 0.5rem;

}

.dashboard-col {
  flex: 1;
  background-color: #FFFFFF;
  border-radius: 0.5rem;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.dashboard-col.wide {
  flex: 2;
}

.dashboard-col.narrow {
  flex: 1;
}

.itemhead {
  width: 100%;
  border-left: 0.25rem solid #2B62F1;
  margin: 0.5rem 0;
  margin: 0.5rem 0;
  height: 1.25rem;
  display: flex;
  align-items: center;
}

.relaitem {
  flex: 1;
  position: relative;
}

.itemsall {
  position: absolute;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  top: 33%;
  left: 23%;
  z-index: 1;
}

.itemsall span:nth-child(1) {
  font-family: DINbold;
  font-weight: 500;
  font-size: 1.25rem;
  color: #292C33;
  text-align: left;
  font-style: normal;
  text-transform: none;
}

.itemsall span:nth-child(2) {
  font-family: alibold;
  font-weight: 400;
  font-size: 0.68rem;
  color: #9E9E9E;
  text-align: left;
  font-style: normal;
  text-transform: none;
}

.itemhead span {
  margin-left: 1rem;
  font-family: alibold;
  font-weight: 600;
  font-size: 1rem;
  color: #3D424C;
  line-height: 1.69rem;
  text-align: left;
  font-style: normal;
  text-transform: none;
}

.mainarea {
  flex: 1;
  padding: 0 0 0 .5rem;
  overflow: auto;
}

.allarea {
  flex: 1;
  padding: 0rem 1rem 0 1rem;
  display: flex;
  flex-direction: column;
}

.bgcicon {
  padding: 0 !important;
}
</style>