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: 0.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> -->
          <span>年度任务完成情况</span>
        </div>
        <div class="relaitem" style="height: 9rem">
          <!-- <Cydxxfgl /> -->
          <Ndwcqk />
        </div>
      </div>
    </div>

    <!-- 4 -->
    <div class="dashboard-row">
      <div class="dashboard-col">
        <div class="itemhead">
          <span>储备项目统计分析</span>
        </div>
        <div class="relaitem">
          <Cbxm />
        </div>
      </div>
      <div class="dashboard-col">
        <div class="itemhead">
          <span>产业导向细分产业分析</span>
          <!-- <span>年度任务完成情况</span> -->
        </div>
        <div class="relaitem">
          <Cydxxfgl />
          <!-- <Ndwcqk /> -->
        </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 Cbxm from "@/views/components/analysis/chubeixm.vue";
import Ndwcqk from "@/views/components/analysis/ndwcqk.vue";
import { investall, fungong ,getNewSysLogininfor} from "@/api/ManageApi/index";
import Cookies from "js-cookie";

export default {
  components: {
    AllArea,
    FunctionArea,
    InvestArea,
    Message,
    ProjectList,
    MapArea,
    Cyeshuju,
    Cydxml,
    Cydxxfgl,
    Cbxm,
    Ndwcqk,
  },
  data() {
    return {
      years: new Date().getFullYear().toString(),
      allnumber: {
        touzinumber: 0,
      },
      functionnumber: {
        functionnumber: 0,
      },
    };
  },
  mounted() {
  getNewSysLogininfor()
    .then(res => {
      const lastLoginTime = res.data?.loginTime;

      if (!lastLoginTime) {
        return;
      }

      if (!res.data) {
        if (Cookies.get("newSysLogininfor") != 2) {
          this.$confirm(
            `您上次登录时间为${lastLoginTime}，建议修改密码`,
            "提示",
            {
              confirmButtonText: "确定",
              cancelButtonText: "取消",
              type: "warning"
            }
          )
            .then(() => {
              Cookies.set("newSysLogininfor", 2);
            })
            .catch(() => {
              Cookies.set("newSysLogininfor", 2);
            });
        }
      }
    })
    .catch(err => {
      console.error('获取登录信息失败:', err);
    });
  },
  methods: {
    
    handleYearChange(years) {
      this.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;
  justify-content: space-between;

  .top {
    width: auto;
    display: flex;
    margin-bottom: 10px;
    font-size: 0.88rem;
    color: gray !important;
    justify-content: flex-end;
  }
}

.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 0.5rem;
  overflow: auto;
}

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

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