资金管理，数据监测

src/router/index.js

@@ -49,195 +49,171 @@ const routes = [{
         name: 'home',
         path: '/home',
         component: () =>
-            import ('@/views/home.vue'),
+        import ('@/views/home.vue'),
         meta: { isAuth: true },
 
         children: [{ //创客活动
                 name: 'makerActvity',
                 path: '/makerActvity',
-                component: () =>
-                    import ('@/views/activityManage/makerActvity.vue'),
+                component: () =>import ('@/views/activityManage/makerActvity.vue'),
                 meta: { isAuth: true }
 
             },
             { //创客活动详情
                 name: 'makerActvityDetails',
                 path: '/makerActvityDetails',
-                component: () =>
-                    import ('@/views/activityManage/makerActvityDetails.vue'),
+                component: () =>import ('@/views/activityManage/makerActvityDetails.vue'),
                 meta: { isAuth: true }
             },
             { //项目立项申请
                 name: 'projectApplication',
                 path: '/projectApplication',
-                component: () =>
-                    import ('@/views/projectApply/projectApplication.vue'),
+                component: () =>import ('@/views/projectApply/projectApplication.vue'),
                 meta: { isAuth: true }
 
             },
             {
                 name: 'projectApplicationDetails',
                 path: '/projectApplicationDetails',
-                component: () =>
-                    import ('@/views/projectApply/projectApplicationDetails.vue'),
+                component: () =>import ('@/views/projectApply/projectApplicationDetails.vue'),
                 meta: { isAuth: true }
 
             },
             {
                 name: 'projectApplication2',
                 path: '/projectApplication2',
-                component: () =>
-                    import ('@/views/projectApply/projectApplication2.vue'),
+                component: () =>import ('@/views/projectApply/projectApplication2.vue'),
                 meta: { isAuth: true }
 
             },
             { //学分登记
                 name: 'credit',
                 path: '/credit',
-                component: () =>
-                    import ('@/views/credit/credit.vue'),
+                component: () =>import ('@/views/credit/credit.vue'),
                 meta: { isAuth: true }
 
             },
             { //学分登记
                 name: 'credit1',
                 path: '/credit1',
-                component: () =>
-                    import ('@/views/credit/credit1.vue'),
+                component: () =>import ('@/views/credit/credit1.vue'),
                 meta: { isAuth: true }
 
             },
             { //创业公司登记
                 name: 'firm',
                 path: '/firm',
-                component: () =>
-                    import ('@/views/firm.vue'),
+                component: () =>import ('@/views/firm.vue'),
                 meta: { isAuth: true }
 
             },
             { //创客资金
                 name: 'makerfund',
                 path: '/makerfund',
-                component: () =>
-                    import ('@/views/fundManage/makerfund.vue'),
+                component: () =>import ('@/views/fundManage/makerfund.vue'),
                 meta: { isAuth: true }
 
             },
             { //创客资金
                 name: 'makerfundApply',
                 path: '/makerfundApply',
-                component: () =>
-                    import ('@/views/fundManage/makerfundApply.vue'),
+                component: () =>import ('@/views/fundManage/makerfundApply.vue'),
                 meta: { isAuth: true }
 
             },
             { //创客资金
                 name: 'makerfundDetails',
                 path: '/makerfundDetails',
-                component: () =>
-                    import ('@/views/fundManage/makerfundDetails.vue'),
+                component: () =>import ('@/views/fundManage/makerfundDetails.vue'),
                 meta: { isAuth: true }
 
             },
             { //消息通知
                 name: 'messageNotification',
                 path: '/messageNotification',
-                component: () =>
-                    import ('@/views/messageNotification.vue'),
+                component: () =>import ('@/views/messageNotification.vue'),
                 meta: { isAuth: true }
 
             },
             { //项目管理
                 name: 'ProjectManagement',
                 path: '/ProjectManagement',
-                component: () =>
-                    import ('@/views/projectManage/ProjectManagement.vue'),
+                component: () =>import ('@/views/projectManage/ProjectManagement.vue'),
                 meta: { isAuth: true }
 
             },
             { //项目管理
                 name: 'ProjectManagement2',
                 path: '/ProjectManagement2',
-                component: () =>
-                    import ('@/views/projectManage/ProjectManagement2.vue'),
+                component: () =>import ('@/views/projectManage/ProjectManagement2.vue'),
                 meta: { isAuth: true }
 
             },
             { //项目管理
                 name: 'ProjectManagement3',
                 path: '/ProjectManagement3',
-                component: () =>
-                    import ('@/views/projectManage/ProjectManagement3.vue'),
+                component: () =>import ('@/views/projectManage/ProjectManagement3.vue'),
                 meta: { isAuth: true }
 
             },
             { //项目管理
                 name: 'ProjectManagement4',
                 path: '/ProjectManagement4',
-                component: () =>
-                    import ('@/views/projectManage/ProjectManagement4.vue'),
+                component: () =>import ('@/views/projectManage/ProjectManagement4.vue'),
                 meta: { isAuth: true }
             },
             {
                 name: 'ProjectManagement3_1',
                 path: '/ProjectManagement3_1',
-                component: () =>
-                    import ('@/views/projectManage/ProjectManagement3_1.vue'),
+                component: () =>import ('@/views/projectManage/ProjectManagement3_1.vue'),
                 meta: { isAuth: true }
             },
             { //项目管理
                 name: 'ProjectManagement5',
                 path: '/ProjectManagement5',
-                component: () =>
-                    import ('@/views/projectManage/ProjectManagement5.vue'),
+                component: () =>import ('@/views/projectManage/ProjectManagement5.vue'),
                 meta: { isAuth: true }
 
             },
             { //项目管理
                 name: 'ProjectManagement1',
                 path: '/ProjectManagement1',
-                component: () =>
-                    import ('@/views/projectManage/ProjectManagement1.vue'),
+                component: () =>import ('@/views/projectManage/ProjectManagement1.vue'),
                 meta: { isAuth: true }
 
             },
             { //项目资金管理
                 name: 'ProjectManagementFund1',
                 path: '/ProjectManagementFund1',
-                component: () =>
-                    import ('@/views/projectManage/ProjectManagementFund1.vue'),
+                component: () =>import ('@/views/projectManage/ProjectManagementFund1.vue'),
                 meta: { isAuth: true }
 
             },
             { //项目资金管理
                 name: 'ProjectManagementFund2',
                 path: '/ProjectManagementFund2',
-                component: () =>
-                    import ('@/views/projectManage/ProjectManagementFund2.vue'),
+                component: () =>import ('@/views/projectManage/ProjectManagementFund2.vue'),
                 meta: { isAuth: true }
 
             },
             { //项目结项
                 name: 'projectSettlement',
                 path: '/projectSettlement',
-                component: () =>
-                    import ('@/views/projectSettlement/projectSettlement.vue'),
+                component: () =>import ('@/views/projectSettlement/projectSettlement.vue'),
                 meta: { isAuth: true }
 
             },
             { //项目结项
                 name: 'projectSettlement1',
                 path: '/projectSettlement1',
-                component: () =>
-                    import ('@/views/projectSettlement/projectSettlement1.vue'),
+                component: () =>import ('@/views/projectSettlement/projectSettlement1.vue'),
                 meta: { isAuth: true }
 
             },
             { //项目结项
                 name: 'projectSettlement2',
                 path: '/projectSettlement2',
-                component: () =>
-                    import ('@/views/projectSettlement/projectSettlement2.vue'),
+                component: () =>import ('@/views/projectSettlement/projectSettlement2.vue'),
                 meta: { isAuth: true }
 
             },
@@ -252,8 +228,7 @@ const routes = [{
             { //项目结项
                 name: 'projectSettlement4',
                 path: '/projectSettlement4',
-                component: () =>
-                    import ('@/views/projectSettlement/projectSettlement4.vue'),
+                component: () =>import ('@/views/projectSettlement/projectSettlement4.vue'),
                 meta: { isAuth: true }
 
             },
@@ -268,12 +243,15 @@ const routes = [{
             { //成果展示
                 name: 'resultsShow',
                 path: '/resultsShow',
-                component: () =>
-                    import ('@/views/resultShow/resultsShow.vue'),
+                component: () =>import ('@/views/resultShow/resultsShow.vue'),
+                meta: { isAuth: true }
+            },
+            { //成果展示
+                name: 'echarts',
+                path: '/echarts',
+                component: () =>import ('@/views/echarts.vue'),
                 meta: { isAuth: true }
-
             },
-
         ]
     }
 ]

src/views/echarts.vue

@@ -0,0 +1,30 @@
+<template>
+    <!-- 创业公司登记 -->
+    <div class="firm">
+      <div class="pAHeader">
+        <div class="pAHeader1">数据监测</div>
+      </div>
+      <hr />
+  
+     
+    </div>
+  </template>
+    
+  <script>
+ 
+  export default {
+   
+    data() {
+      return {
+       
+      };
+    },
+    methods: {
+
+    }
+  };
+  </script>
+    
+<style lang="less">
+  
+</style>

src/views/fundManage/makerfund.vue

@@ -92,19 +92,16 @@
           prop="title"
           label="项目名称"
           align="center"
-          min-width="10%"
           >
         </el-table-column>
         <el-table-column
           prop="pro_leader"
           align="center"
-          min-width="7%"
           label="负责人"
           >
         </el-table-column>
         <el-table-column
           align="center"
-          min-width="8%"
           prop="type"
           label="项目类型"
           >
@@ -112,58 +109,54 @@
         <el-table-column
           prop="fund"
           align="center"
-          min-width="8%"
           label="申请经费(元)"
           >
         </el-table-column>
         <el-table-column
           prop="usedFund"
           align="center"
-          min-width="8%"
           label="实际使用(元)"
           >
         </el-table-column>
         <el-table-column
           prop="name"
+          width="150"
           align="center"
-          min-width="8%"
           label="所在部门"
           >
         </el-table-column>
         <el-table-column
           prop="status"
           align="center"
-          min-width="7%"
           label="状态"
           >
           <template #default="scope">
             <div>
-              <span v-show="!scope.state">未结题</span>
-              <span v-show="scope.state">已结题</span>
+              <span v-show="!scope.state">未报销</span>
+              <span v-show="scope.state">已报销</span>
             </div>
           </template>
         </el-table-column>
         <el-table-column
           prop="time"
+          width="160"
           align="center"
-          min-width="10%"
           label="申请时间"
           >
         </el-table-column>
         <el-table-column
           prop="operation"
-          width="340"
+          width="350"
           align="center"
           label="操作"
           >
           <template #default="scope">
               <div class="operations">
-                  <!-- <el-button type="primary" > -->
-                        <el-button type="primary" class="bt1" size="mini" @click="details">查看详情</el-button>
-                        <el-button type="primary" class="bt1" size="mini" @click="Audit">{{status==-1?"审核":status?"撤回":'审核'}}</el-button>
+                        <el-button type="primary" class="bt1" size="mini" @click="details(scope.row.fid)">查看详情</el-button>
+                        <el-button type="primary" v-show="scope.row.state==0" style="width: 74px;" class="bt1" size="mini" @click="Audit(scope.row)">审核</el-button>
+                        <el-button type="primary" disabled v-show="scope.row.state==1" style="background-color: #c8c9cc;border-color: #c8c9cc;cursor: no-drop;" class="bt1" size="mini">已审核</el-button>
                         <el-button type="primary" class="bt1" size="mini" @click="edit(scope.row.id,scope.row.status)">申请表</el-button>
                         <el-button type="primary" class="bt1" size="mini">完结</el-button>
-                  <!-- </el-button> -->
               </div>
           </template>
         </el-table-column>
@@ -184,42 +177,42 @@
     </el-pagination>
   <!-- 分页结束 -->
     <!-- 审核对话框开始 -->
-    <div class="dialog">
       <el-dialog
         title="立项审核"
         :visible.sync="dialogVisible"
         width="750px"
+        class="dialog"
         :before-close="init">
         <div class="diaTit1" style="margin-top: 0;">
-            <div class="spans">项目名称:</div><div style="margin-right: 30px;color: #adadad;">人工智能分链机器</div>
-            <div class="spans">项目负责人:</div><div style="color:#adadad">徐晓霞</div>
+            <div class="spans">项目名称:</div><div style="margin-right: 30px;color: #adadad;">{{ ProjectFundData.title }}</div>
+            <div class="spans">项目负责人:</div><div style="color:#adadad">{{ ProjectFundData.pro_leader }}</div>
         </div>
-
+        <div class="addDialogLogo">LOGO</div>
         <div class="diaTit1">
           <div class="spans1">所在部门</div>
           <div>
-            <el-input v-model="input" disabled placeholder="信通学院"></el-input>
+            <el-input v-model="ProjectFundData.name" disabled placeholder="信通学院"></el-input>
           </div>
         </div>
 
         <div class="diaTit1">
           <div class="spans1">使用经费</div>
           <div>
-            <el-input v-model="input" disabled placeholder="6000"></el-input>
+            <el-input v-model="ProjectFundData.usedFund" disabled placeholder="6000"></el-input>
           </div>
         </div>
 
         <div class="diaTit1">
           <div class="spans1">联系电话</div>
           <div>
-            <el-input v-model="input" disabled placeholder="13854449525"></el-input>
+            <el-input v-model="input " disabled placeholder="13854449525"></el-input>
           </div>
         </div>
 
         <div class="diaTit1">
           <div class="spans1">项目类型</div>
           <div>
-            <el-select v-model="value" disabled placeholder="个人创客">
+            <el-select v-model="ProjectFundData.type" disabled placeholder="个人创客">
               <el-option
                 v-for="item in options"
                 :key="item.value"
@@ -233,7 +226,7 @@
         <div class="diaTit1">
           <div class="spans1">直接经费</div>
           <div>
-            <el-select v-model="value" disabled placeholder="测试化验加工费">
+            <el-select v-model="input" disabled placeholder="测试化验加工费">
               <el-option
                 v-for="item in options"
                 :key="item.value"
@@ -248,26 +241,26 @@
           <div class="diaTit5">
             <div class="spans1">预算</div>
             <div>
-              <el-input v-model="input" placeholder="6000"></el-input>
+              <el-input v-model="ProjectFundData.fund" placeholder="6000"></el-input>
             </div>
           </div>
 
           <div class="diaTit5">
             <div class="spans1">已支付</div>
             <div>
-              <el-input v-model="input" disabled placeholder="-"></el-input>
+              <el-input v-model="ProjectFundData.usedFund" disabled placeholder="-"></el-input>
             </div>
           </div>
           <div class="diaTit5">
             <div class="spans1">余额</div>
             <div>
-              <el-input v-model="input" placeholder="6000"></el-input>
+              <el-input :value="ProjectFundData.fund - ProjectFundData.usedFund" placeholder="6000"></el-input>
             </div>
           </div>
         </div>
         
         <div class="diaTit1">
-          <div class="spans1">事由</div>
+          <div class="spans1" style="position: relative;top:-20px">事由</div>
           <el-input
             type="textarea"
             :rows="3"
@@ -283,7 +276,6 @@
           <el-button @click="init" class="diaBtn">取消</el-button>
         </div>
       </el-dialog>
-    </div>
     <!-- 审核对话框结束 -->
 
 
@@ -400,7 +392,20 @@
       </el-dialog>
     </div>
     <!-- 立项撤回提交对话框结束 -->
-
+<!-- 删除通知开始 -->
+<el-dialog
+      title="提示"
+      :visible.sync="dialogVisible1"
+      width="600px"
+      class="endDialog">
+      <div class="addDialogLogo">LOGO</div>
+      <span class="deleteContent">确定完结?</span>
+      <span slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="confirmDel" >确认删除</el-button>
+        <el-button @click="dialogVisible1=false"  >取消</el-button>
+      </span>
+    </el-dialog>
+<!-- 删除通知结束-->
 
   </div>
 </template>
@@ -409,6 +414,8 @@
     export default {
       data() {
         return {
+          ProjectFundData:{},
+          dialogVisible1:false,
           dialogVisible:false,         //立即审核
           revocation:false,            //撤回
           textarea:'',  //立项审核事由
@@ -487,7 +494,7 @@
             this.ajax
                 .get(this.$store.state.api+'/SelectMakerFund',param)
                 .then(res=>{
-                  // console.log(res.data[0]);
+                  console.log(res.data[0]);
                   let data=res.data;
                   this.tableData=data[0];
                   this.filterSelects=data[1];
@@ -509,11 +516,13 @@
         init(){
           this.dialogVisible=false
         },
-        Audit(){
-          this.dialogVisible=true
+        Audit(val){
+          console.log(val);
+          this.ProjectFundData=val;
+          this.dialogVisible=true;
         },
-        details(){
-          this.$router.push('/makerfundDetails')
+        details(Id){
+          this.$router.push(`/makerfundDetails?Id=${Id}`)
         }
       },
       mounted(){
@@ -523,8 +532,75 @@
 </script>
 
 <style lang="less">
-.makerfund{
-
+.makerfund{     
+  .endDialog{    //提交对话框
+      font-size: 18px;
+      .el-dialog{
+        border-radius: 5px;
+        overflow: hidden;
+      }
+      .deleteContent{
+        margin: 30px 0;
+        font-size: 22px;
+        color: #000;
+      }
+      .el-dialog__body{
+          display: flex;
+          justify-content: center;
+        }
+      .addDialogLogo{
+        width: 60px;
+        height: 30px;
+        border-radius: 5px;
+        display: flex;
+        justify-content: center;
+        line-height: 30px;
+        background: #f2f2f2;
+        position: absolute;
+        left: 20px; top: 15px; 
+      }
+      .el-dialog__header{
+      background: #32455b;
+      }
+      .el-dialog__title{
+        color:#fff;
+        display: flex;
+        justify-content: center;
+        font-size: 18px;
+        position: relative;
+        top: -2px;
+      }
+      .addDialogMid{
+        box-sizing: border-box;
+        padding:0 60px 0 10px;
+        .addDialogTit{
+          display: flex;
+          span{
+            width: 80px;
+            font-size: 16px;
+            line-height: 40px;
+            text-align: left;
+            
+          }
+        }
+        .addDialogTit1{
+          display: flex;
+          justify-content: space-between;
+          margin-bottom: 15px;
+        }
+        .addDialogTit2{
+          margin-top: 10px;
+          font-size: 16px;
+          color: #000;
+          text-indent: 2em;
+          text-align: left;
+          line-height: 1.7em;
+        }
+        .addDialogCon{
+          margin-top: 20px;
+        }
+      }
+    }
   .el-dialog{
     border-radius: 5px;
     overflow: hidden;
@@ -539,9 +615,26 @@
   .dialog{
     .el-dialog__header{
       background: #32455b;
+
     }
+    .addDialogLogo{
+        width: 60px;
+        height: 30px;
+        border-radius: 5px;
+        display: flex;
+        justify-content: center;
+        line-height: 30px;
+        background: #f2f2f2;
+        position: absolute;
+        left: 20px; top: 15px; 
+      }
     .el-dialog__title{
-      color: #fff;
+        color:#fff;
+        display: flex;
+        justify-content: center;
+        font-size: 18px;
+        position: relative;
+        top: -2px;
     }
     .diaBtn{     //dialog按钮
       font-size: 16px;

src/views/fundManage/makerfundApply.vue

@@ -65,8 +65,9 @@
             </div>
             <div class="howMoney">
                 <div class="inpInterval twoStyle">余额</div>
-                <el-input v-model="item.remainFund" type="number" class="inputNumber howMoneyInp" placeholder="金额"></el-input>
+                <el-input disabled :value="item.budget - item.usedFund" type="number" class="inputNumber howMoneyInp" placeholder="金额"></el-input>
             </div>
+            <el-button v-show="index!=0" type="primary" style="font-size: 16px;" @click="delDerData(index)">删除</el-button>
         </div>
         <div class="howMoney" style="margin-top:20px">
             <div class="inpInterval" style="position: relative;top:-20px">事由</div>
@@ -113,9 +114,9 @@
                 </div>
                 <div class="howMoney">
                     <div class="inpInterval twoStyle">余额</div>
-                    <el-input v-model="item.remainFund" type="number" class="inputNumber howMoneyInp" placeholder="金额"></el-input>
-
+                    <el-input disabled :value="item.budget - item.usedFund" type="number" class="inputNumber howMoneyInp" placeholder="金额"></el-input>
                 </div>
+                <el-button v-show="i!=0" type="primary" style="font-size: 16px;" @click="delInDerData(i)">删除</el-button>
             </div>
             <div class="howMoney" style="margin-top:20px">
                 <div class="inpInterval" style="position: relative;top:-20px">事由</div>
@@ -156,7 +157,7 @@
             </div>
             <div class="howMoney">
                 <div class="inpInterval twoStyle">余额</div>
-                <el-input v-model="residue.remainFund" type="number" class="inputNumber howMoneyInp" placeholder="金额"></el-input>
+                <el-input disabled :value="residue.budget - residue.usedFund" type="number" class="inputNumber howMoneyInp" placeholder="金额"></el-input>
             </div>
         </div>
         <div class="howMoney" style="margin-top:20px">
@@ -180,26 +181,35 @@
             <div><p>附件上传</p></div>
         </div>
         <hr>
-        <div style="display: flex;justify-content: flex-start;">
-            <el-upload
-            class="avatar-uploader"
-            action="#"
-            disabled
-            :show-file-list="false"
-            v-for="(item,index) in this.file" :key="index"
-            >
-            <img v-if="imageUrl" :src="imageUrl" class="avatar">
-            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
-            </el-upload>
-        </div>
-        
-        <div>
-            <div class="addMoneyBtn" style="position: relative;">
-                <div class="jia">+</div>添加
-                <BeUpload @getFile="getFile" style="position: absolute;left: 0;width: 120px;height: 40px;opacity: 0;" class="uploadPic" :navName="'上传封面'" :accept="accept"></BeUpload>
-            </div>
+        <div style="display: flex;width: 100%;margin-bottom: 45px;">
+
+                <el-upload
+                action="https://jsonplaceholder.typicode.com/posts/"
+                list-type="picture-card"
+                style="position: relative;margin-left: 10px;"
+                disabled
+                :on-remove="handleRemove">
+                <BeUpload @getFile="getFile" style="position: absolute;left: 0;width: 147px;height: 100%;opacity: 0;" class="uploadPic" :navName="'上传封面'" :accept="accept"></BeUpload>
+                <i class="el-icon-plus"></i>
+                </el-upload>
+
+                <el-upload
+                action="https://jsonplaceholder.typicode.com/posts/"
+                list-type="picture-card"
+                class="delUpload"
+                style="position: relative;"
+                v-show="file[0]"
+                disabled
+                v-for="(item,index) in this.file" :key="index"
+                >
+                
+                <span class="delUploadBtnSty" @click="delUploadBtn(index)">×</span>
+                <img style="position: absolute;left: -1px;top:-1px;width: 149px;height: 101%;border-radius: 5px;" :src="dialogImageUrl" alt="">
+                <div style="position: absolute;left: -20%;bottom: -30px;width: 200px;height: 30px;color: #000;line-height: 30px;display: flex;justify-content: center;">新建 DOCX 文档 (2).docx</div>
+                <!-- <img v-if="imageUrl" :src="imageUrl" class="avatar"> -->
+                </el-upload>
+               
         </div>
-
     </div>
 
 
@@ -240,8 +250,8 @@ export default {
         return {
             accept:"*",
             submitHint:false,   //提交按钮
-
-            imageUrl: require('../../assets/img/cocoClass.png'),
+            dialogImageUrl:require('../../assets/img/jj.jpg'),
+            disabled: false,
             file:[],
             selects:{
                 projectName:'',
@@ -285,7 +295,6 @@ export default {
                     ],
                     budget:'',         //预算
                     usedFund:'',       //已使用
-                    remainFund:'',
                     reason:''          //理由
                 }
             ], 
@@ -315,7 +324,6 @@ export default {
                 ],
                 budget:'',         //预算
                 usedFund:'',       //已使用
-                remainFund:'',
                 reason:''          //理由
             },
 
@@ -348,7 +356,6 @@ export default {
                     ],
                     budget:'',         //预算
                     usedFund:'',       //已使用
-                    remainFund:'',
                     reason:''          //理由
                 }
             ], 
@@ -378,7 +385,6 @@ export default {
                 ],
                 budget:'',         //预算
                 usedFund:'',       //已使用
-                remainFund:'',
                 reason:''          //理由
             },
             
@@ -387,7 +393,6 @@ export default {
                     elseReason:'',
                     budget:'',
                     usedFund:'',
-                    remainFund:'',
                     reason:'',
                 }
             ,
@@ -405,6 +410,21 @@ export default {
             // },
         },
     methods:{
+        delInDerData(index){                       //删除间接经费
+            this.indirectFundBlock.splice(index,1)
+        },
+        delDerData(index){                   //删除直接经费
+            console.log(index);
+            this.directFundBlock.splice(index,1)
+        },
+        delUploadBtn(index){           //删除上传文件
+            console.log(index);
+            this.file.splice(index,1)
+            this.$message.success('删除成功')
+        },
+        handleRemove(index) {
+            console.log(index);
+        },
         uploadData(){
             this.submitHint=true;
         },
@@ -459,7 +479,7 @@ export default {
         getFile(val) {       //上传封面
             console.log(val);
             this.file.push(val)
-            this.imageUrl=require("../../assets/img/cocoClass.png")
+            // this.imageUrl=require("../../assets/img/jj.jpg")
         },
         getData(){
             this.ajax
@@ -498,6 +518,47 @@ export default {
 
 <style lang="less">
 .makerfundApply{
+
+    .delUpload{
+        width: 147px;
+        margin-left: 60px;
+    }
+    .delUploadBtnSty{
+        position: absolute;
+        right: 0;top: 0px;
+        line-height: 20px;
+        display: flex;
+        justify-content: center;
+        width: 20px;
+        height: 20px;
+        font-size: 35px;
+        z-index: 10;
+        color: #fff;
+        // background: #fff;
+    }
+
+    .avatar-uploader .el-upload {         //文件上传
+        border: 1px dashed #d9d9d9;
+        border-radius: 6px;
+        cursor: pointer;
+        position: relative;
+        overflow: hidden;
+    }
+
+    .avatar-uploader-icon {
+        font-size: 28px;
+        color: #8c939d;
+        width: 178px;
+        height: 178px;
+        line-height: 178px;
+        text-align: center;
+    }
+    .avatar {
+        width: 178px;
+        height: 178px;
+        display: block;
+    }
+
    //提交对话框开始
    .projectApplicationfundAddDialog{  
  
@@ -506,20 +567,20 @@ export default {
         justify-content: center;
     }
     .el-dialog{
-    border-radius: 5px;
-    overflow: hidden;
+        border-radius: 5px;
+        overflow: hidden;
 
-    top: 10%;
+        top: 10%;
     }
     
     .deleteContent{
-    width: 100%;
-    text-align: center;
-    font-size: 22px;
-    color: #000;
+        width: 100%;
+        text-align: center;
+        font-size: 22px;
+        color: #000;
     }
     .addDialogLogo{
-    width: 60px;
+        width: 60px;
         height: 30px;
         border-radius: 5px;
         display: flex;
@@ -530,16 +591,16 @@ export default {
         left: 20px; top: 15px; 
     }
     .el-dialog__header{
-    background: #32455b;
+        background: #32455b;
     }
     .el-dialog__title{
-    font-size: 18px;
+        font-size: 18px;
 
-    color:rgb(246, 247, 246);
+        color:rgb(246, 247, 246);
     }
     .addDialogMid{
-    box-sizing: border-box;
-    padding:0 60px 0 10px;
+        box-sizing: border-box;
+        padding:0 60px 0 10px;
     .addDialogTit{
         display: flex;
         span{
@@ -549,18 +610,18 @@ export default {
         }
     }
     .addDialogTit1{
-    display: flex;
-    justify-content: space-between;
-    margin-bottom: 15px;
+        display: flex;
+        justify-content: space-between;
+        margin-bottom: 15px;
     }
     .addDialogTit2{
-    margin-top: 10px;
-    font-size: 18px;
-    color: #000;
-    text-indent: 2em;
+        margin-top: 10px;
+        font-size: 18px;
+        color: #000;
+        text-indent: 2em;
     }
     .addDialogCon{
-    margin-top: 20px;
+        margin-top: 20px;
     }
     }
     .dialog-footer{
@@ -576,30 +637,9 @@ export default {
     }
     //提交对话框结束
 
-    .avatar-uploader .el-upload {
-        border: 1px dashed #d9d9d9;
-        border-radius: 6px;
-        cursor: pointer;
-        position: relative;
-        overflow: hidden;
-    }
-    // .avatar-uploader .el-upload:hover {
-    //     border-color: #409EFF;
-    // }
-    .avatar-uploader-icon {
-        font-size: 28px;
-        color: #8c939d;
-        width: 178px;
-        height: 178px;
-        line-height: 178px;
-        text-align: center;
-    }
-    .avatar {
-        width: 178px;
-        height: 178px;
-        display: block;
-    }
-  .Apply1{
+
+
+  .Apply1{         //顶部两个下拉框
     height: 45px;
     width: 100%;
     display: flex;
@@ -615,79 +655,41 @@ export default {
         padding: 1px 15px;
     }
   }
-  .inpInterval{
-        min-width: 70px;
-        display: inline-block;
-        text-align: justify;
-        text-justify:distribute-all-lines;
-        text-align-last: justify;
-        transform: translate(0,22%);
-        padding-right: 15px;
-        font-size: 16px;
-    }
+
+
 
   .moneyBlock{
     max-width: 100%;
     margin-bottom: 20px;
+    .howMoneyFlex{
+        display: flex;
+    }
     .howMoney{
         display: flex;
         margin-right: 10px;
+        .howMoneyInp{
+            .el-input__inner{
+                width: 170px;
+            }
+        }
+        
     }
   }
-  .howMoneyFlex{
-    display: flex;
-  }
-  .howMoneyInp{
-    .el-input__inner{
-        width: 170px;
+    .inpInterval{
+        min-width: 70px;
+        display: inline-block;
+        text-align: justify;
+        text-justify:distribute-all-lines;
+        text-align-last: justify;
+        transform: translate(0,22%);
+        padding-right: 15px;
+        font-size: 16px;
     }
-  }
-  .addMoneyBtn{   //添加样式
-    width: 120px;
-    height: 40px;
-    border: #000 1px dashed;
-    border-radius: 5px;
-    margin: 15px 85px 30px;
-    display: flex;
-    justify-content: center;
-    line-height: 40px;
-        .jia{
-            border-radius: 50%;
-            border: 1.5px #ccc solid;
-            font-size: 25px;
-            line-height: 26px;
-            font-weight: 10;
-            margin-top: 6px;
-            margin-right: 5px;
-            height: 27px;
-            width: 27px;
-            color: #ccc;
-        }
+
+    .addMoneyBtn{   //添加样式
+            margin: 15px 85px 30px;
     }
-  
-  .makerfundDetailsaddMoneyBtn{  // 附件添加按钮样式开始
-            width: 120px;
-            height: 40px;
-            border: #000 1px dashed;
-            border-radius: 5px;
-            margin: 35px auto 30px;
-            display: flex;
-            justify-content: center;
-            line-height: 40px;
-            cursor: pointer;
-            .jia{
-              border-radius: 50%;
-              border: 1.5px #ccc solid;
-              font-size: 25px;
-              line-height: 26px;
-              font-weight: 10;
-              margin-top: 6px;
-              margin-right: 5px;
-              height: 27px;
-              width: 27px;
-              color: #ccc;
-            }
-      }
+
 }
 
 </style>

src/views/fundManage/makerfundDetails.vue

@@ -1,277 +1,697 @@
 <template>
-  <!-- 创客资金申请查看详细 -->
-    <div class="makerfundDetails">
+  <!-- 创客资金申请表单 -->
+<div class="makerfundApply">
+  <div class="vfpHeader">
+      <div class="titleOne">创客资金申请详情</div>
+      <el-button type="primary" @click="$router.back()">返回</el-button>
+  </div>
+  <hr>
 
-      <div class="vfpHeader">
-        <div class="titleOne">创客资金申请</div>
-        <el-button type="primary" @click="$router.back()">返回</el-button>
-      </div>
-      
-      <hr>
-      <div class="Apply1">
-          <div class="inpInterval">项目名称</div>
-          <el-select style="width:30%" v-model="projectName" placeholder="请输入项目名称">
-              <el-option label="测试" value="测试"></el-option>
-          </el-select>
-      </div>
-      <div class="Apply1">
-          <span class="inpInterval">项目类型</span>
-          <el-select v-model="value" placeholder="请选择">
-              <el-option
-              v-for="item in options"
-              :key="item.value"
-              :label="item.label"
-              :value="item.value">
-              </el-option>
-          </el-select>
-      </div>
 
+  <!-- 项目名称、类型开始 -->
+  <div class="Apply1">
+      <div class="inpInterval">项目名称</div>
+      <el-select v-model="selects.projectName"  style="width: 30%;" placeholder="请选择">
+          <el-option
+          v-for="item in projectFilter"
+          :key="item.id"
+          :label="item.title"
+          :value="item.id">
+          </el-option>
+      </el-select>
+  </div>
+  <div class="Apply1">
+      <div class="inpInterval">项目类型</div>
+      <el-select v-model="selects.projectType" placeholder="请选择">
+          <el-option
+          v-for="item in projectType"
+          :key="item.id"
+          :label="item.name"
+          :value="item.name">
+          </el-option>
+      </el-select>
+  </div>
+  <!-- 项目名称、类型结束 -->
 
 
-      <div class="tabTit">
-              <div>
-                <p>经费支出类别(单位:元)</p>
-              </div>
+
+
+  <div class="tabTit">
+          <div>
+              <p>经费支出类别(单位:元)</p>
+          </div>
+  </div>
+  <hr>
+  <div class="moneyBlock" v-for="(item,index) in directFundBlock" :key="index">          <!-- 直接经费 -->
+      <div class="howMoneyFlex">
+          <div class="howMoney">
+              <div class="inpInterval">直接经费</div>
+              <el-select v-model="item.directFundData" placeholder="请选择">
+                  <el-option
+                  v-for="item in item.directFundSelects"
+                  :key="item.value"
+                  :label="item.label"
+                  :value="item.value">
+                  </el-option>
+              </el-select>
+          </div>
+          <div class="howMoney">
+              <div class="inpInterval twoStyle">预算</div>
+              <el-input v-model="item.budget" type="number" class="inputNumber howMoneyInp" placeholder="金额"></el-input>
+          </div>
+          <div class="howMoney">
+              <div class="inpInterval twoStyle">已支付</div>
+              <el-input v-model="item.usedFund" type="number" class="inputNumber howMoneyInp" placeholder="金额"></el-input>
+          </div>
+          <div class="howMoney">
+              <div class="inpInterval twoStyle">余额</div>
+              <el-input disabled :value="item.budget - item.usedFund" type="number" class="inputNumber howMoneyInp" placeholder="金额"></el-input>
+          </div>
+          <el-button v-show="index!=0" type="primary" style="font-size: 16px;" @click="delDerData(index)">删除</el-button>
+      </div>
+      <div class="howMoney" style="margin-top:20px">
+          <div class="inpInterval" style="position: relative;top:-20px">事由</div>
+          <el-input
+          type="textarea"
+          :rows="3"
+          class="textArea"
+          resize="none"
+          style="width:800px"
+          placeholder="请输入内容"
+          v-model="item.reason">
+          </el-input>
       </div>
+  </div>
+  <div>
+      <div class="addMoneyBtn" @click="addDirectFund">
+          <div class="jia">+</div>添加
+      </div>
+  </div>
+
 
-      <!-- 直接经费开始 -->
-      <div class="Apply1">
-           <div class="howMoney">
-            <span class="inpInterval">直接经费</span>
-                <el-select v-model="value" placeholder="请选择">
+  <div>                                                                                  <!-- 间接经费 -->
+      <div class="moneyBlock" v-for="(item,i) in indirectFundBlock" :key="i">       
+          <div class="howMoneyFlex">
+              <div class="howMoney">
+                  <div class="inpInterval">间接经费</div>
+                  <el-select v-model="item.indirectFundData" placeholder="请选择">
                       <el-option
-                      v-for="item in options"
+                      v-for="item in item.indirectFundSelects"
                       :key="item.value"
                       :label="item.label"
                       :value="item.value">
                       </el-option>
                   </el-select>
-           </div>
-           <div class="howMoney">
-              <span class="inpInterval twoStyle">预算</span>
-              <el-input  placeholder="金额" v-model="value"></el-input>
-           </div>
-           <div class="howMoney">
-              <span class="inpInterval twoStyle">已支付</span>
-              <el-input type="text" placeholder="金额" v-model="value"></el-input>
-            </div>
-           <div class="howMoney">
-            <span class="inpInterval twoStyle">余额</span>
-              <el-input type="text" placeholder="金额" v-model="value"></el-input>
-           </div>
-      </div>
-      <div class="Apply1">
-          <span class="inpInterval">事由</span>
-            <el-input
+              </div>
+              <div class="howMoney">
+                  <div class="inpInterval twoStyle">预算</div>
+                  <el-input v-model="item.budget" type="number" class="inputNumber howMoneyInp" placeholder="金额"></el-input>
+              </div>
+              <div class="howMoney">
+                  <div class="inpInterval twoStyle">已支付</div>
+                  <el-input v-model="item.usedFund" type="number" class="inputNumber howMoneyInp" placeholder="金额"></el-input>
+
+              </div>
+              <div class="howMoney">
+                  <div class="inpInterval twoStyle">余额</div>
+                  <el-input disabled :value="item.budget - item.usedFund" type="number" class="inputNumber howMoneyInp" placeholder="金额"></el-input>
+              </div>
+              <el-button v-show="i!=0" type="primary" style="font-size: 16px;" @click="delInDerData(i)">删除</el-button>
+          </div>
+          <div class="howMoney" style="margin-top:20px">
+              <div class="inpInterval" style="position: relative;top:-20px">事由</div>
+              <el-input
               type="textarea"
               :rows="3"
               class="textArea"
-              style="width:70%"
               resize="none"
+              style="width:800px"
               placeholder="请输入内容"
-              v-model="textarea">
-            </el-input>
+              v-model="item.reason">
+              </el-input>
+          </div>
+         
       </div>
+  </div>
+  <div>
+      <div class="addMoneyBtn" @click="addIndirectFund">
+          <div class="jia">+</div>添加
+      </div>
+  </div>
 
 
-      <!-- 直接经费结束 -->
-      
-
 
-      <!-- 其他经费开始 -->
-      <div class="Apply1">
-        <div class="howMoney">
-            <span class="inpInterval">其他</span>
-              <el-input placeholder="其他" v-model="value"></el-input>
-           </div>
-           <div class="howMoney">
-              <span class="inpInterval twoStyle" >预算</span>
-              <el-input  placeholder="金额" v-model="value"></el-input>
-           </div>
-           <div class="howMoney">
-              <span class="inpInterval twoStyle">已支付</span>
-              <el-input type="text" placeholder="金额" v-model="value"></el-input>
-            </div>
-           <div class="howMoney">
-            <span class="inpInterval twoStyle">余额</span>
-              <el-input type="text" placeholder="金额" v-model="value"></el-input>
-           </div>
+  <div class="moneyBlock">          <!-- 其他经费 -->
+      <div class="howMoneyFlex">
+          <div class="howMoney">
+              <div class="inpInterval" >其他</div>
+              <el-input v-model="residue.elseReason" placeholder="请输入内容"></el-input>
+          </div>
+          <div class="howMoney">
+              <div class="inpInterval twoStyle">预算</div>
+              <el-input v-model="residue.budget" type="number" class="inputNumber howMoneyInp" placeholder="金额"></el-input>
+          </div>
+          <div class="howMoney">
+              <div class="inpInterval twoStyle">已支付</div>
+              <el-input v-model="residue.usedFund" type="number" class="inputNumber howMoneyInp" placeholder="金额"></el-input>
+          </div>
+          <div class="howMoney">
+              <div class="inpInterval twoStyle">余额</div>
+              <el-input disabled :value="residue.budget - residue.usedFund" type="number" class="inputNumber howMoneyInp" placeholder="金额"></el-input>
+          </div>
       </div>
-      <div class="Apply1">
-          <span class="inpInterval">备注</span>
-            <el-input
-              type="textarea"
-              :rows="3"
-              style="width:70%"
-              resize="none"
-              class="textArea"
-              placeholder="请输入内容"
-              v-model="textarea">
-            </el-input>
+      <div class="howMoney" style="margin-top:20px">
+          <div class="inpInterval" style="position: relative;top:-20px">备注</div>
+          <el-input
+          type="textarea"
+          :rows="3"
+          resize="none"
+          class="textArea"
+          style="width:800px"
+          placeholder="请输入内容"
+          v-model="residue.reason">
+          </el-input>
       </div>
-      <!-- 其他经费结束 -->
 
+  </div>
 
-      <div>
-        <div class="tabTit">
-          <div>
-            <p>附件上传</p>
-          </div>
-        </div>
-        <hr>
-        <div class="makerfundDetailsAccessoryBlock">文件</div>
-        <div class="makerfundDetailsaddMoneyBtn">
-            <div class="jia">+</div>添加
-        </div>
 
+  <div>                            <!-- 附件上传 -->
+      <div class="tabTit">
+          <div><p>附件上传</p></div>
+      </div>
+      <hr>
+      <div style="display: flex;width: 100%;margin-bottom: 45px;">
+
+              <el-upload
+              action="https://jsonplaceholder.typicode.com/posts/"
+              list-type="picture-card"
+              style="position: relative;margin-left: 10px;"
+              disabled
+              :on-remove="handleRemove">
+              <BeUpload @getFile="getFile" style="position: absolute;left: 0;width: 147px;height: 100%;opacity: 0;" class="uploadPic" :navName="'上传封面'" :accept="accept"></BeUpload>
+              <i class="el-icon-plus"></i>
+              </el-upload>
+
+              <el-upload
+              action="https://jsonplaceholder.typicode.com/posts/"
+              list-type="picture-card"
+              class="delUpload"
+              style="position: relative;"
+              v-show="file[0]"
+              disabled
+              v-for="(item,index) in this.file" :key="index"
+              >
+              
+              <span class="delUploadBtnSty" @click="delUploadBtn(index)">×</span>
+              <img style="position: absolute;left: -1px;top:-1px;width: 149px;height: 101%;border-radius: 5px;" :src="dialogImageUrl" alt="">
+              <div style="position: absolute;left: -20%;bottom: -30px;width: 200px;height: 30px;color: #000;line-height: 30px;display: flex;justify-content: center;">新建 DOCX 文档 (2).docx</div>
+              <!-- <img v-if="imageUrl" :src="imageUrl" class="avatar"> -->
+              </el-upload>
+             
       </div>
-      <div class="baseBtn">
-        <div class="blockWidth">
+  </div>
+
+
+
+  <div class="baseBtn">
+      <div class="blockWidth">
           <el-button type="primary">生成表单</el-button>
-          <el-button type="primary">立即审核</el-button>
-        </div>   
+          <el-button type="primary" @click="uploadData">保存</el-button>
+          <el-button type="primary">审核</el-button>
       </div>
-    </div>
-  </template>
-  
-  <script>
-  export default {
-      data() {
-          return {
-              textarea:'',
-              value: '',
-              input:'',
-              options: [{
-                  value: '1',
-                  label: '黄金糕'
-                },
-                {
-                  value: '2',
-                  label: '黄金糕'
-                },
+  </div>
+
+      <!-- 提交对话框开始 -->
+      <el-dialog
+        title="提示"
+        :visible.sync="submitHint"
+        width="600px"
+        class="projectApplicationfundAddDialog"
+        :before-close="init">
+        <div class="addDialogLogo">LOGO</div>
+        <div class="deleteContent">确定修改？</div>
+        <span slot="footer" class="dialog-footer">
+          <el-button type="primary" @click="submitAll" class="btn5">确认提交</el-button>
+          <el-button @click="init" class="btn5" style="background:#cccccc" size="small">取消</el-button>
+        </span>
+      </el-dialog>
+    <!-- 提交对话框结束 -->
+</div>
+</template>
+
+<script>
+  import BeUpload from "../../components/tool/beUpload.vue";
+
+export default {
+  components: {
+      BeUpload,
+    },
+  data() {
+      return {
+          accept:"*",
+          submitHint:false,   //提交按钮
+          dialogImageUrl:require('../../assets/img/jj.jpg'),
+          disabled: false,
+          file:[],
+          selects:{
+              projectName:'',
+              projectType:''
+          },
+          projectFilter:[],    //项目名称
+          projectType:[     //项目类型
+              {
+                  id:1,
+                  name:'个人创客'
+              },
+              {
+                  id:2,
+                  name:'创客活动'
+              }
+          ],      
+          directFundBlock:[   //直接经费
+              {
+                  directFundData:'',
+                  directFundSelects:[
+                      {
+                          value:1,
+                          label:'小型仪器设备费'
+                      },
+                      {
+                          value:2,
+                          label:'材料费'
+                      },
+                      {
+                          value:3,
+                          label:'测试化验加工费'
+                      },
+                      {
+                          value:4,
+                          label:'项目协作费'
+                      },
+                      {
+                          value:5,
+                          label:'其他支出'
+                      },
+                  ],
+                  budget:'',         //预算
+                  usedFund:'',       //已使用
+                  reason:''          //理由
+              }
+          ], 
+          newDirectFundBlock:{     //添加直接经费
+              directFundData:'',
+              directFundSelects:[
+                      {
+                          value:1,
+                          label:'小型仪器设备费'
+                      },
+                      {
+                          value:2,
+                          label:'材料费'
+                      },
+                      {
+                          value:3,
+                          label:'测试化验加工费'
+                      },
+                      {
+                          value:4,
+                          label:'项目协作费'
+                      },
+                      {
+                          value:5,
+                          label:'其他支出'
+                      },
               ],
-              projectName:''
+              budget:'',         //预算
+              usedFund:'',       //已使用
+              reason:''          //理由
+          },
+
+
+
+          indirectFundBlock:[    //间接经费
+              {
+                  indirectFundData:'',
+                  indirectFundSelects:[
+                      {
+                          value:1,
+                          label:'项目成功鉴定费'
+                      },
+                      {
+                          value:2,
+                          label:'参展参赛费'
+                      },
+                      {
+                          value:3,
+                          label:'创客交流活动费'
+                      },
+                      {
+                          value:4,
+                          label:'知识产权事务费'
+                      },
+                      {
+                          value:5,
+                          label:'其他支出'
+                      },
+                  ],
+                  budget:'',         //预算
+                  usedFund:'',       //已使用
+                  reason:''          //理由
+              }
+          ], 
+          newIndirectFundBlock:{    //添加间接经费
+              indirectFundData:'',
+              indirectFundSelects:[
+                      {
+                          value:1,
+                          label:'项目成功鉴定费'
+                      },
+                      {
+                          value:2,
+                          label:'参展参赛费'
+                      },
+                      {
+                          value:3,
+                          label:'创客交流活动费'
+                      },
+                      {
+                          value:4,
+                          label:'知识产权事务费'
+                      },
+                      {
+                          value:5,
+                          label:'其他支出'
+                      },
+              ],
+              budget:'',         //预算
+              usedFund:'',       //已使用
+              reason:''          //理由
+          },
+          
+
+          residue:{                 //其他
+                  elseReason:'',
+                  budget:'',
+                  usedFund:'',
+                  reason:'',
+              }
+          ,
+      }
+  },
+
+  methods:{
+      delInDerData(index){                       //删除间接经费
+          this.indirectFundBlock.splice(index,1)
+      },
+      delDerData(index){                   //删除直接经费
+          console.log(index);
+          this.directFundBlock.splice(index,1)
+      },
+      delUploadBtn(index){           //删除上传文件
+          console.log(index);
+          this.file.splice(index,1)
+          this.$message.success('删除成功')
+      },
+      handleRemove(index) {
+          console.log(index);
+      },
+      uploadData(){
+          this.submitHint=true;
+      },
+      submitAll(){
+          if(this.selects.projectName=='') return this.$message.error('请选择项目名称')
+          if(this.selects.projectType=='') return this.$message.error('请选择项目类型')
+
+          let dirSum = this.directFundBlock.reduce((per,cur)=>{
+              return per*1+cur.budget*1
+          },0)
+          let indirSum =this.indirectFundBlock.reduce((per,cur)=>{
+              return per*1+cur.budget*1
+          },0)
+          let allSum=dirSum+indirSum+this.residue.budget*1
+          // console.log(allSum);
+
+          let usedDirSum = this.directFundBlock.reduce((per,cur)=>{
+              return per*1+cur.usedFund*1
+          },0)
+          let usedIndirSum =this.indirectFundBlock.reduce((per,cur)=>{
+              return per*1+cur.usedFund*1
+          },0)
+          let usedAllSum=usedDirSum+usedIndirSum+this.residue.usedFund*1
+          // console.log(usedAllSum);
+
+
+          let param={
+              uid:this.$store.state.userInfo.userid,
+              cid:this.selects.projectName,
+              type:this.selects.projectType,
+              dir:JSON.stringify(this.directFundBlock),
+              indir:JSON.stringify(this.indirectFundBlock),
+              elseFund:JSON.stringify(this.residue),
+              file:JSON.stringify(this.file),
+              AllSum:allSum,
+              usedSum:usedAllSum
           }
+          this.ajax
+              .post(this.$store.state.api+'/insertMakerFund',param)
+              .then(res=>{
+                  console.log(res);
+                  if (res.data==1) {
+                     this.$router.push('/makerfund')
+                     return this.$message.success('创建成功')
+                  }else{
+                      this.$message.error('创建失败')
+                  }
+              },err=>{
+                  console.log(err);
+              })
+      },
+      getFile(val) {       //上传封面
+          console.log(val);
+          this.file.push(val)
       },
-      methods:{
-          back(){
-              this.$router.push('/makerfund')
+      getData(){
+          let param={
+            uid:this.$store.state.userInfo.userid,
+            fid:this.$route.query['Id']
           }
-      }
+          // console.log(param);
+          this.ajax
+              .get(this.$store.state.api+'/SelectMakerFundSelects',param)
+              .then(res=>{
+                  console.log(res.data);
+                  let data=res.data;
+                  this.directFundBlock=JSON.parse(data[0][0].directFund);
+                  this.indirectFundBlock=JSON.parse(data[0][0].indirectFund);
+                  this.residue=JSON.parse(data[0][0].elseFund);
+                  this.file=JSON.parse(data[0][0].fundFile);
+                  this.selects.projectName=data[0][0].courseId;
+                  this.selects.projectType=data[0][0].type;
+                  this.projectFilter=data[1];
+              },err=>{
+                  console.log(err);
+              })
+      },
+      addDirectFund(){           //添加直接经费
+          let oldArr={};
+          Object.assign(oldArr,this.newDirectFundBlock)
+          this.directFundBlock.push(oldArr)
+          for(let k in this.newDirectFundBlock) return this.newDirectFundBlock[k]=''
+      },
+      addIndirectFund(){         //添加间接经费
+          // this.indirectFundBlock.push(this.newIndirectFundBlock)
+          let oldArr={};
+          Object.assign(oldArr,this.newIndirectFundBlock)
+          this.indirectFundBlock.push(oldArr)
+          for(let k in this.newIndirectFundBlock) return this.newIndirectFundBlock[k]=''
+      },
+      init(){
+              //重置
+              this.submitHint=false;
+              
+      },
+  },
+  mounted(){
+      this.getData()
   }
-  </script>
-  
-  <style lang="less">
+}
+</script>
 
-  .makerfundDetails{
+<style lang="less">
+.makerfundApply{
 
-    .pAHeader{    //头部样式
-      width: 90%;
+  .delUpload{
+      width: 147px;
+      margin-left: 60px;
+  }
+  .delUploadBtnSty{
+      position: absolute;
+      right: 0;top: 0px;
+      line-height: 20px;
       display: flex;
-      justify-content: space-between;
-      .pAHeader1{
-        font-weight: 600;
-        font-size: 22px;
-        flex-shrink: 0;
-      }
-      .backMakerfund{
-          cursor: pointer;
-          font-size: 16px;
-          margin-top: 10px;
-          margin-right: 20px;
-      }
-    }
-
-      .makerfundDetailsAccessoryBlock{   //文件上传框
-        width: 200px;height: 200px;
-        background: #ccc;
-        margin: 20px 0 20px 100px;
-      }
+      justify-content: center;
+      width: 20px;
+      height: 20px;
+      font-size: 35px;
+      z-index: 10;
+      color: #fff;
+      // background: #fff;
+  }
 
-      
-      .makerfundDetailsaddMoneyBtn{  // 附件添加按钮样式开始
-            width: 120px;
-            height: 40px;
-            border: #000 1px dashed;
-            border-radius: 5px;
-            margin: 35px auto 30px;
-            display: flex;
-            justify-content: center;
-            line-height: 40px;
-            cursor: pointer;
-            .jia{
-              border-radius: 50%;
-              border: 1.5px #ccc solid;
-              font-size: 25px;
-              line-height: 26px;
-              font-weight: 10;
-              margin-top: 6px;
-              margin-right: 5px;
-              height: 27px;
-              width: 27px;
-              color: #ccc;
-            }
-      }
+  .avatar-uploader .el-upload {         //文件上传
+      border: 1px dashed #d9d9d9;
+      border-radius: 6px;
+      cursor: pointer;
+      position: relative;
+      overflow: hidden;
+  }
 
-     
+  .avatar-uploader-icon {
+      font-size: 28px;
+      color: #8c939d;
+      width: 178px;
+      height: 178px;
+      line-height: 178px;
+      text-align: center;
+  }
+  .avatar {
+      width: 178px;
+      height: 178px;
+      display: block;
+  }
 
+ //提交对话框开始
+ .projectApplicationfundAddDialog{  
 
+  .el-dialog__header{
+      display: flex;
+      justify-content: center;
+  }
+  .el-dialog{
+      border-radius: 5px;
+      overflow: hidden;
 
+      top: 10%;
+  }
+  
+  .deleteContent{
+      width: 100%;
+      text-align: center;
+      font-size: 22px;
+      color: #000;
+  }
+  .addDialogLogo{
+      width: 60px;
+      height: 30px;
+      border-radius: 5px;
+      display: flex;
+      justify-content: center;
+      line-height: 30px;
+      background: #f2f2f2;
+      position: absolute;
+      left: 20px; top: 15px; 
+  }
+  .el-dialog__header{
+      background: #32455b;
+  }
+  .el-dialog__title{
+      font-size: 18px;
 
-   
-    .Apply1{
+      color:rgb(246, 247, 246);
+  }
+  .addDialogMid{
+      box-sizing: border-box;
+      padding:0 60px 0 10px;
+  .addDialogTit{
       display: flex;
-      margin-top: 20px;
-      width: 100%;
-      .howMoney{
-        display: flex;
-        margin-right: 30px;
-      }
-      .inpInterval{
-          min-width: 70px;
-          margin-right: 5px;
-          display: inline-block;
-          text-align: justify;
-          text-justify:distribute-all-lines;
-          text-align-last: justify;
-          transform: translate(0,22%);
-          padding-right: 15px;
-          font-size: 16px;
-      }
-      .inpName{
-          height: 40px;
-          outline:none ;
-          width: 600px;
-          border: #ccc 1px solid;
-          border-radius: 5px;
-          box-sizing: border-box;
-          padding: 1px 15px;
+      span{
+      width: 80px;
+      line-height: 40px;
+      text-align: left;
       }
-    }
+  }
+  .addDialogTit1{
+      display: flex;
+      justify-content: space-between;
+      margin-bottom: 15px;
+  }
+  .addDialogTit2{
+      margin-top: 10px;
+      font-size: 18px;
+      color: #000;
+      text-indent: 2em;
+  }
+  .addDialogCon{
+      margin-top: 20px;
+  }
+  }
+  .dialog-footer{
+  display: flex;
+  justify-content: center;
+  .btn5{
+  height: 40px;
+  font-size: 16px;
+  background: #0e72e6;
+  width: 200px;
+  }
+  }
+  }
+  //提交对话框结束
 
 
-   
-    .howMoneyFlex{
-      max-width: 100%;
-      display: flex;
-      flex-wrap: nowrap;
-    }
-   
-    .addMoneyBtn{
-      width: 150px;
+
+.Apply1{         //顶部两个下拉框
+  height: 45px;
+  width: 100%;
+  display: flex;
+  justify-content: flex-start;
+  margin-top: 20px;
+  .inpName{
       height: 40px;
-      border: #000 1px dashed;
+      outline:none ;
+      width: 600px;
+      border: #ccc 1px solid;
       border-radius: 5px;
-      margin: 15px 100px 30px;
+      box-sizing: border-box;
+      padding: 1px 15px;
+  }
+}
+
+
+
+.moneyBlock{
+  max-width: 100%;
+  margin-bottom: 20px;
+  .howMoneyFlex{
       display: flex;
-      justify-content: center;
-      line-height: 40px;
-    }
-    .footer{
-      margin-top: 20px;
-      width: 100%;
+  }
+  .howMoney{
       display: flex;
-      justify-content: flex-end;
-    }
+      margin-right: 10px;
+      .howMoneyInp{
+          .el-input__inner{
+              width: 170px;
+          }
+      }
+      
+  }
+}
+  .inpInterval{
+      min-width: 70px;
+      display: inline-block;
+      text-align: justify;
+      text-justify:distribute-all-lines;
+      text-align-last: justify;
+      transform: translate(0,22%);
+      padding-right: 15px;
+      font-size: 16px;
+  }
+
+  .addMoneyBtn{   //添加样式
+          margin: 15px 85px 30px;
+  }
+
 }
-  </style>
+
+</style>

src/views/home.vue

@@ -38,6 +38,7 @@
             {id:7,label:"成果展示",goto:"/resultsShow",icon:"iconfont icon-xiangmuguanli2"},
             {id:8,label:"创业公司登记",goto:"/firm",icon:"iconfont icon-zuzhijiegou"},
             {id:9,label:"消息通知",goto:"/messageNotification",icon:"iconfont icon-xiaoxitongzhi3"},
+            {id:10,label:"数据监测",goto:"/echarts",icon:"iconfont icon-qushi"},
           ]
         }
       },
@@ -103,6 +104,7 @@
               background-color: #fff;
               color: #333;
               // text-align: center;
+              // overflow: hidden ;
               margin-left: 20px;
               border-radius: 5px;
             }