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

<template>

  <div class="grid-container">
    <!-- 第一行 -->
    <div class="grid-item item-1">
      <!-- 整体项目情况 -->
      <div class="allarea">
        <AllArea />
      </div>
    </div>
    <div class="grid-item item-2">
      <!-- 消息通知 -->
      <div class="itemhead">
        <span>消息通知</span>
      </div>
      <div class="mainarea">
        <Message />
      </div>
    </div>
    <!-- 第二行 -->
    <div class="grid-item item-1 bgcicon">
      <MapArea />
    </div>
    <div style="display: flex;flex-direction: column;">
      <div class="grid-item item-3">
        <!-- 功能区 -->
        <div class="itemhead">
          <span>功能区</span>
        </div>
        <div class="relaitem">
          <div class="itemsall">
            <span>{{ functionnumber.functionnumber }}</span>
            <span>项目总数</span>
          </div>
          <FunctionArea />
        </div>
      </div>
      <div class="grid-item item-5">
        <!-- 投资区 -->
        <div class="itemhead">
          <span>投资主体</span>
        </div>
        <div class="relaitem">
          <div class="itemsall">
            <span>{{ allnumber.touzinumber }}</span>
            <span>项目总数</span>
          </div>
          <InvestArea />
        </div>
      </div>
    </div>
    <!-- 第三行 -->
    <div class="grid-item item-3">
      <!-- 产业数据分析 -->
      <div class="itemhead">
        <span>产业数据分析</span>
      </div>
      <div class="relaitem">
        <Cyeshuju />
      </div>
    </div>
    <div class="grid-item item-5">
        <!-- 产业导向目录分析 -->
        <div class="itemhead">
          <span>产业导向目录分析</span>
        </div>
        <div class="relaitem">
          <Cydxml />
        </div>
      </div>
    <div class="grid-item item-5">
      <!-- 产业导向细分产业分析 -->
      <div class="itemhead">
        <span>产业导向细分产业分析</span>
      </div>
      <div class="relaitem">
        <!-- <Cyeshuju /> -->
         <Cydxxfgl />
      </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 {
      allnumber: {
        touzinumber: 0
      },
      functionnumber: {
        functionnumber: 0
      }
    };
  },
  methods: {
    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>
.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  /* 三列 */
  grid-template-rows: auto auto auto;
  /* 三行 */
  gap: .5rem;
  /* 模块之间的间隔 */
  padding: 0 .5rem;
  /* 容器内边距 */
}

.grid-item {
  background-color: #FFFFFF;
  border-radius: 0.5rem 0.5rem 0.5rem 0.5rem;
}

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

.relaitem {
  position: relative;
}

.itemsall {
  position: absolute;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  top: 3.7rem;
  left: 7.5rem;
}

.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 {
  padding: 0rem 0rem 0 1.4rem;
  overflow: auto;
}

/* 第一行：第一个模块占两列 */
.item-1 {
  grid-column: span 2;
  /* background-image: url('~@/assets/images/allbg.png'); */
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

.allarea {
  width: 100%;
  height: auto;
  padding: .5rem 1rem;
}

/* 最后一行：一个模块占一整行 */
.item-6 {
  grid-column: span 3;
  /* 占三列 */
}
/* .item-3 {
  height: ;
} */

.mapareaone {
  position: relative;
}
.bgcicon{
  /* background-color: red; */
  /* background-image: url(../../assets/images/map@2x.png); */
  padding: 0!important;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
</style>