From 01fb0a72b4680ffebb8d095ee7585c3dd2236a62 Mon Sep 17 00:00:00 2001
From: yanfeiyong <2060201549@qq.com>
Date: Fri, 9 May 2025 10:57:24 +0800
Subject: [PATCH] =?UTF-8?q?=E6=B5=8B=E8=AF=95=E7=94=A8=E7=9A=84=E4=B8=89?=
 =?UTF-8?q?=E5=BC=A0=E5=9B=BE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .env.production                               |   5 +-
 .../components/ProjectDetails/Months.vue      |   5 +-
 src/views/components/analysis/chanyexfgl.vue  |   2 +-
 src/views/components/analysis/ndwcqk.vue      |   2 +-
 src/views/login_v1.vue                        | 335 ++++++++++++++++++
 src/views/statistics/1.vue                    | 259 ++++++++++++++
 src/views/statistics/2.vue                    | 295 +++++++++++++++
 src/views/statistics/index.vue                |  44 ++-
 8 files changed, 937 insertions(+), 10 deletions(-)
 create mode 100644 src/views/login_v1.vue
 create mode 100644 src/views/statistics/1.vue
 create mode 100644 src/views/statistics/2.vue

diff --git a/.env.production b/.env.production
index 3cdcbb9..a5a8cc0 100644
--- a/.env.production
+++ b/.env.production
@@ -5,6 +5,9 @@ VUE_APP_TITLE = 苏州工业园区工业上楼管理系统
 ENV = 'production'
 
 # 苏州工业园区工业上楼管理系统/生产环境
+# 个人环境
 VUE_APP_BASE_API = ''
+# 测试环境
 # VUE_APP_BASE_API = 'http://39.101.188.84:7071'
-# VUE_APP_BASE_API = '/api'
+# 正式环境
+# VUE_APP_BASE_API = 'https://gysl.sipac.gov.cn/api'
diff --git a/src/views/components/ProjectDetails/Months.vue b/src/views/components/ProjectDetails/Months.vue
index 1376f45..4d32890 100644
--- a/src/views/components/ProjectDetails/Months.vue
+++ b/src/views/components/ProjectDetails/Months.vue
@@ -191,8 +191,7 @@ export default {
         if (valid) {
           const payload = {
             ...this.form,
-            xmId: this.xmId, // 来自 props 的项目ID
-            projectId: this.xmId, // 如果后端需要projectId也传相同值
+            xmId: this.xmId,
             status: this.form.status
           };
 
@@ -201,7 +200,7 @@ export default {
               if (response.code === 200) {
                 this.$message.success('新增成功');
                 this.dialogVisible = false;
-                this.getMonthInformationPage(); // 刷新列表
+                this.getMonthInformationPage();
               } else {
                 this.$message.error(response.msg || '新增失败');
               }
diff --git a/src/views/components/analysis/chanyexfgl.vue b/src/views/components/analysis/chanyexfgl.vue
index 1c61008..566e8ab 100644
--- a/src/views/components/analysis/chanyexfgl.vue
+++ b/src/views/components/analysis/chanyexfgl.vue
@@ -67,7 +67,7 @@ export default {
 <style scoped>
 .progress-container {
     width: 100%;
-    height: 9rem;
+    height: 100%;
     padding: 0 3rem 0 0;
     overflow: auto;
     font-family: aliregular;
diff --git a/src/views/components/analysis/ndwcqk.vue b/src/views/components/analysis/ndwcqk.vue
index f5cc3cd..454f009 100644
--- a/src/views/components/analysis/ndwcqk.vue
+++ b/src/views/components/analysis/ndwcqk.vue
@@ -72,7 +72,7 @@ export default {
 <style scoped>
 .year-progress-container {
     padding: 0rem 1rem 1rem 1rem;
-    height: 9rem;
+    height: 100%;
     overflow: auto;
 }
 .top{
diff --git a/src/views/login_v1.vue b/src/views/login_v1.vue
new file mode 100644
index 0000000..9d91cb0
--- /dev/null
+++ b/src/views/login_v1.vue
@@ -0,0 +1,335 @@
+<template>
+    <div class="login">
+      <div class="loginleft">
+      </div>
+      <el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form">
+        <img src="@/assets/images/logo@2x.png" alt="">
+        <div class="title">苏州工业园区工业上楼管理系统</div>
+        <div class="logintabs">
+          <el-tabs v-model="activeName" :stretch="true" color="#216CDC">
+            <el-tab-pane label="企业用户登录" name="first"></el-tab-pane>
+            <el-tab-pane label="政务人员登录" name="second"></el-tab-pane>
+          </el-tabs>
+        </div>
+        <el-form-item prop="username" class="loginitem" style="margin-top: 1rem;">
+          <el-input v-model="loginForm.username" type="text" auto-complete="off" placeholder="账号">
+            <svg-icon slot="prefix" icon-class="user" class="el-input__icon input-icon" />
+          </el-input>
+        </el-form-item>
+        <el-form-item prop="password" class="loginitem">
+          <el-input v-model="loginForm.password" type="password" auto-complete="off" placeholder="密码"
+            @keyup.enter.native="handleLogin">
+            <svg-icon slot="prefix" icon-class="password" class="el-input__icon input-icon" />
+          </el-input>
+        </el-form-item>
+        <el-form-item prop="code" v-if="captchaEnabled" class="loginitem">
+          <el-input v-model="loginForm.code" auto-complete="off" placeholder="验证码" style="width: 63%"
+            @keyup.enter.native="handleLogin">
+            <svg-icon slot="prefix" icon-class="validCode" class="el-input__icon input-icon" />
+          </el-input>
+          <div class="login-code">
+            <img :src="codeUrl" @click="getCode" class="login-code-img" style="width: 8.56rem;" />
+          </div>
+        </el-form-item>
+        <el-checkbox v-model="loginForm.rememberMe" style="margin:1rem  18.6rem 25px 0px;">记住密码</el-checkbox>
+        <el-form-item style="width:24rem;;margin-top: 1rem;">
+          <el-button :loading="loading" size="medium" type="primary" style="width:100%;background: #2B62F1;"
+            @click.native.prevent="handleLogin">
+            <span v-if="!loading">登 录</span>
+            <span v-else>登 录 中...</span>
+          </el-button>
+          <el-button v-if="showGovernmentLoginButton" size="medium" type="primary" class="tongyidenglu"
+            style="width:100%;background: #2B62F1;" @click.native.prevent="handleGovernmentLogin">
+            <span>政务统一身份认证登录</span>
+          </el-button>
+          <el-button v-if="showEnterpriseLoginButton" size="medium" type="primary" class="tongyidenglu"
+            style="width:100%;background: #2B62F1;" @click.native.prevent="handleEnterpriseLogin">
+            <span>企业统一身份认证登录</span>
+          </el-button>
+          
+        </el-form-item>
+        <div style="font-size: 0.88rem;color: #333;">主办单位：苏州工业园区经济发展委员会</div>
+      </el-form>
+      <!-- 底部 -->
+      <div class="el-login-footer">
+        <span></span>
+      </div>
+    </div>
+  </template>
+  
+  <script>
+  import { getCodeImg } from '@/api/login'
+  import Cookies from 'js-cookie'
+  import { encrypt, decrypt } from '@/utils/jsencrypt'
+  
+  
+  export default {
+    name: 'Login',
+    data() {
+      return {
+        codeUrl: '',
+        activeName: 'second',
+        loginForm: {
+          username: '',
+          password: '',
+          rememberMe: false,
+          code: '',
+          uuid: '',
+          loginRole: 2
+        },
+        loginRules: {
+          username: [
+            { required: true, trigger: 'blur', message: '请输入您的账号' }
+          ],
+          password: [
+            { required: true, trigger: 'blur', message: '请输入您的密码' }
+          ],
+          code: [{ required: true, trigger: 'change', message: '请输入验证码' }]
+        },
+        loading: false,
+        // 验证码开关
+        captchaEnabled: true,
+        // 注册开关
+        register: false,
+        redirect: undefined
+      }
+    },
+    watch: {
+      $route(route) {
+        this.redirect = route.query && route.query.redirect
+      },
+      activeName(newVal) {
+        if (newVal === 'first') {
+          this.loginForm.loginRole = 2;
+        } else if (newVal === 'second') {
+          this.loginForm.loginRole = 1;
+        }
+      }
+    },
+    computed: {
+      showGovernmentLoginButton() {
+        return this.activeName === 'second';
+      },
+      showEnterpriseLoginButton() {
+        return this.activeName === 'first';
+      }
+    },
+    created() {
+      this.getCode()
+      this.getCookie()
+    },
+    methods: {
+      getCode() {
+        getCodeImg().then((res) => {
+          this.captchaEnabled = res.captchaEnabled === undefined ? true : res.captchaEnabled
+          if (this.captchaEnabled) {
+            this.codeUrl = `data:image/gif;base64,${res.img}`
+            this.loginForm.uuid = res.uuid
+          }
+        }).catch((error) => {
+          console.error('获取验证码失败:', error)
+        })
+      },
+      getCookie() {
+        const username = Cookies.get('username')
+        const password = Cookies.get('password')
+        const rememberMe = Cookies.get('rememberMe')
+        this.loginForm = {
+          username: username === undefined ? this.loginForm.username : username,
+          password: password === undefined ? this.loginForm.password : decrypt(password),
+          rememberMe: rememberMe === undefined ? false : Boolean(rememberMe)
+        }
+      },
+      handleLogin() {
+        this.$refs.loginForm.validate((valid) => {
+          if (valid) {
+            this.loading = true;
+            if (this.loginForm.rememberMe) {
+              Cookies.set('username', this.loginForm.username, { expires: 30 });
+              Cookies.set('password', encrypt(this.loginForm.password), { expires: 30 });
+              Cookies.set('rememberMe', this.loginForm.rememberMe, { expires: 30 });
+            } else {
+              Cookies.remove('username');
+              Cookies.remove('password');
+              Cookies.remove('rememberMe');
+            }
+  
+            const loginData = {
+              username: this.loginForm.username,
+              password: this.loginForm.password,
+              code: this.loginForm.code,
+              uuid: this.loginForm.uuid,
+              loginRole: this.activeName === 'first' ? 2 : 1 
+            };
+  
+            this.$store.dispatch('Login', loginData)
+              .then(() => {
+                this.$router.push({ path: this.redirect || '/' }).catch(() => { });
+              })
+              .catch((error) => {
+                this.loading = false;
+                if (this.captchaEnabled) {
+                  this.getCode();
+                }
+                console.error('登录失败:', error);
+              });
+          }
+        });
+      },
+      handleGovernmentLogin() {
+        // 跳转到政务统一身份认证登录页面
+        window.location.href = 'https://qyt.sipac.gov.cn/';
+      },
+      handleEnterpriseLogin() {
+        // 跳转到企业统一身份认证登录页面
+        // window.location.href = 'https://example.com/enterprise-login';
+      }
+    }
+  }
+  </script>
+  
+  <style rel="stylesheet/scss" lang="scss" scoped>
+  ::v-deep .el-tabs__active-bar {
+    width: 2rem !important;
+    margin-left: 3rem;
+    background-color: #216CDC;
+    height: 0.21rem;
+    border-radius: 0.16rem;
+  }
+  
+  ::v-deep .el-tabs__header {
+    border-bottom: none !important;
+  }
+  
+  ::v-deep .el-tabs__item {
+    font-size: 1rem;
+    padding: 0 20px;
+    color: #3D424C;
+    font-family: Alibaba PuHuiTi;
+    font-weight: 400;
+    color: #3D424C;
+  }
+  
+  ::v-deep .el-tabs__item.is-active {
+    color: #216CDC;
+  }
+  
+  ::v-deep .el-tabs__nav-wrap::after {
+    display: none !important;
+  }
+  
+  .tongyidenglu {
+    margin-top: 1rem;
+    margin-left: 0rem;
+  }
+  
+  .login {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    border-radius: 6px 0 0 6px;
+    height: 100%;
+    background-image: url('../assets/images/loginbackground.png');
+    background-size: cover;
+  }
+  
+  .loginleft {
+    width: 35rem;
+    height: 40rem;
+    background-image: url('../assets/images/loginleft.png');
+    background-size: 100% 100%;
+    background-repeat: no-repeat;
+  }
+  
+  .title {
+    width: 29.13rem;
+    height: 1.94rem;
+    font-family: Alibaba PuHuiTi;
+    font-weight: 500;
+    font-size: 2rem;
+    color: #292C33;
+    line-height: 3.5rem;
+    text-align: center;
+    margin-top: 1rem;
+  }
+  
+  .loginitem {
+    width: 24rem;
+  }
+  
+  .login-form {
+    border-radius: 0 6px 6px 0;
+    background: #ffffff;
+    width: 50rem;
+    height: 40rem;
+    padding: 25px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+  
+    img {
+      width: 6.56rem;
+      height: 3.56rem;
+    }
+  
+    .el-input {
+      height: 38px;
+  
+      input {
+        height: 38px;
+      }
+    }
+  
+    .input-icon {
+      height: 39px;
+      width: 14px;
+      margin-left: 2px;
+    }
+  }
+  
+  .login-tip {
+    font-size: 13px;
+    text-align: center;
+    color: #bfbfbf;
+  }
+  
+  .logintabs {
+    margin-top: 2.88rem;
+    width: 18rem;
+  }
+  
+  .login-code {
+    width: 35%;
+    height: 1.8rem;
+    float: right;
+  
+    img {
+      cursor: pointer;
+      vertical-align: middle;
+    }
+  }
+  
+  .el-login-footer {
+    height: 40px;
+    line-height: 40px;
+    position: fixed;
+    bottom: 0;
+    width: 100%;
+    text-align: center;
+    color: #333;
+    font-family: Arial;
+    font-size: 12px;
+    letter-spacing: 1px;
+  }
+  
+  .login-code-img {
+    height: 38px;
+  }
+  
+  .el-tabs__item.is-active {
+    color: #216CDC;
+    position: relative;
+    padding-bottom: 0.5rem;
+  }
+  </style>
\ No newline at end of file
diff --git a/src/views/statistics/1.vue b/src/views/statistics/1.vue
new file mode 100644
index 0000000..5393ec0
--- /dev/null
+++ b/src/views/statistics/1.vue
@@ -0,0 +1,259 @@
+<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">
+          <div class="itemhead">
+            <span>产业导向细分产业分析</span>
+          </div>
+          <div class="relaitem">
+            <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>
\ No newline at end of file
diff --git a/src/views/statistics/2.vue b/src/views/statistics/2.vue
new file mode 100644
index 0000000..8280fba
--- /dev/null
+++ b/src/views/statistics/2.vue
@@ -0,0 +1,295 @@
+<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> -->
+            <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 } from '@/api/ManageApi/index'
+  
+  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
+        }
+      };
+    },
+    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;
+    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 .5rem;
+    overflow: auto;
+  }
+  
+  .allarea {
+    flex: 1;
+    padding: 0rem 1rem 0 1rem;
+    display: flex;
+    flex-direction: column;
+  }
+  
+  .bgcicon {
+    padding: 0 !important;
+  }
+  </style>
\ No newline at end of file
diff --git a/src/views/statistics/index.vue b/src/views/statistics/index.vue
index 3bfe497..cd5a6e1 100644
--- a/src/views/statistics/index.vue
+++ b/src/views/statistics/index.vue
@@ -57,12 +57,36 @@
           <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>
@@ -79,6 +103,8 @@ 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 } from '@/api/ManageApi/index'
 
 export default {
@@ -91,7 +117,9 @@ export default {
     MapArea,
     Cyeshuju,
     Cydxml,
-    Cydxxfgl
+    Cydxxfgl,
+    Cbxm,
+    Ndwcqk
   },
   data() {
     return {
@@ -107,7 +135,7 @@ export default {
   methods: {
     handleYearChange(years) {
       this.years = years;
-      console.log("index.vue: handleYearChange called with years:", years); 
+      console.log("index.vue: handleYearChange called with years:", years);
     },
     async getData() {
       const response = await investall();
@@ -188,6 +216,16 @@ export default {
   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 {
@@ -254,6 +292,4 @@ export default {
 .bgcicon {
   padding: 0 !important;
 }
-
-
 </style>
\ No newline at end of file