Merge branch 'master' into new_xqc

config/dev.env.js

@@ -11,5 +11,6 @@ module.exports = merge(prodEnv, {
   HR_MANAGEMENT_SYSTEM:'"http://8.136.199.33:8391/login"',
   FINANCIAL_MANAGEMENT_SYSTEM:'"http://8.136.199.33:8618/login"',
   ETA_SYSTEM:'"http://8.136.199.33:7778/temppage"',
-  CYGX_WEB:'"https://clpttest.hzinsights.com"' // 查研观向网页版首页地址
+  CYGX_WEB:'"https://clpttest.hzinsights.com"', // 查研观向网页版首页地址
+  ETA_Forum:'"http://8.136.199.33:8900/autoLogin"',//ETA社区
 });

config/prod.env.js

@@ -7,5 +7,6 @@ module.exports = {
 	HR_MANAGEMENT_SYSTEM:'"https://hr.hzinsights.com/login"',
 	FINANCIAL_MANAGEMENT_SYSTEM:'"https://fms.hzinsights.com/login"',
 	ETA_SYSTEM:'"https://eta.hzinsights.com/temppage"',
-	CYGX_WEB:'"https://web.hzinsights.com"' // 查研观向网页版首页地址
+	CYGX_WEB:'"https://web.hzinsights.com"', // 查研观向网页版首页地址
+	ETA_Forum:'"https://forumadmin.hzinsights.com/autoLogin"',//ETA社区
 }

config/prod.test.env.js

@@ -9,5 +9,6 @@ module.exports = {
 	HR_MANAGEMENT_SYSTEM:'"http://8.136.199.33:8391/login"',
   FINANCIAL_MANAGEMENT_SYSTEM:'"http://8.136.199.33:8618/login"',
   ETA_SYSTEM:'"http://8.136.199.33:7778/temppage"',
-	CYGX_WEB:'"https://clpttest.hzinsights.com"' // 查研观向网页版首页地址
+	CYGX_WEB:'"https://clpttest.hzinsights.com"', // 查研观向网页版首页地址
+	ETA_Forum:'"http://8.136.199.33:8900/autoLogin"',//ETA社区
 }

src/api/modules/setApi.js

@@ -325,7 +325,40 @@ const departInterence = {
 	 */
 	getBannerStatistic:params=>{
 		return http.get('/banner/statistic',params)
-	}
+	},
+	/**
+	 * 调研报名统计
+	 * @returns 
+	 */
+	getResearchStatistics:params=>{
+		return http.get('/banner/research_statistics/list',params)
+	},
+	/**
+	 * 调研报名统计-活动报名详情
+	 * @returns 
+	 */
+	getResearchStatisticsItem:params=>{
+		return http.get('/banner/research_statistics/item',params)
+	},
+	/**
+	 * 调研报名统计-分享人报名详情
+	 * @returns 
+	 */
+	getResearchStatisticsDetail:params=>{
+		return http.get('/banner/research_statistics/detail',params)
+	},
+	/**
+	 * 调研报名修改付款金额
+	 * @returns 
+	 */
+	getResearchStatisticsAmount:params=>{
+		return http.get('/banner/research_statistics/amount',params)
+	},
+
+	//获取跳转到ETA社区的code
+	getToETAForumCode:()=>{
+		return http.get('/sysuser/forum_admin/auth_code',{})
+	},
 }
 
 /* 视频管理 */

src/routes/modules/ficcXcxRoutes.js

@@ -112,7 +112,22 @@ export default [
 				  pathName: "报告分类配置",
 				},
 			  },
-
+			{
+				path:'researchStatisticsFICC',
+				component:()=> import('@/views/interaction_manage/researchStatistics.vue'),
+				name:'调研报名统计',
+				hidden:true
+			},
+			{
+				path:'registrationDetails',
+				component:()=> import('@/views/interaction_manage/registrationDetails.vue'),
+				name:'报名详情',
+				hidden:true,
+				meta: {
+					pathFrom: "researchStatisticsFICC",
+					pathName: "调研报名统计",
+				}
+			},
         ]
     }
 ]

src/views/Home.vue

@@ -62,12 +62,13 @@
                   </template>
                   <el-menu-item
                     v-for="child in item.children"
-                    :index="child.path"
+                    :index="child.path=='etaForum'?null:child.path"
                     :path="child.path"
                     :key="child.path"
                     v-show="!child.hidden"
                   >
-                    <a :href="`/${child.path}`" :style="`display: block;color:${child.path===activePath ? '#FDB863 ' : '#fff'}`" @click="(e) => e.preventDefault() ">
+                    <span v-if="child.path==='etaForum'" :style="`display: block;color:${child.path===activePath ? '#FDB863 ' : '#fff'}`" @click.prevent="linkToOtherMS('ETA_Forum')">{{child.name}}</span>
+                    <a v-else :href="`/${child.path}`" :style="`display: block;color:${child.path===activePath ? '#FDB863 ' : '#fff'}`" @click="(e) => e.preventDefault() ">
                       {{child.name}}
                     </a>
                   </el-menu-item>
@@ -733,6 +734,15 @@ export default {
           href=`${href}?code=${res.Data}`
         }
       }
+      if(key==='ETA_Forum'){
+        const res=await departInterence.getToETAForumCode()
+        if(res.Ret===200){
+          href=`${href}?code=${res.Data}`
+        }else{
+          this.$message.warning(res.Msg)
+          return
+        }
+      }
       window.open(href,'_blank');
     },
     // 切换通知消息类型

src/views/business_ETA_manage/addBusiness.vue

@@ -54,7 +54,7 @@
                     <el-form-item label="社会信用码" prop="creditCode">
                         <el-input disabled placeholder="请输入社会信用码" v-model="firstFormData.creditCode"/>
                     </el-form-item>
-                    <el-form-item label="商家地址" prop="address">
+                    <el-form-item label="商家地址" prop="address" v-if="firstFormData.areaType=='国内'">
                         <el-cascader 
                             v-model="firstFormData.address"
                             :props="locationProps"
@@ -64,6 +64,16 @@
                             placeholder="请选择客户地址" 
                         />
                     </el-form-item>
+                    <el-form-item label="所属国家" prop="nation" v-else>
+                        <el-select v-model="firstFormData.nation" placeholder="请选择所属国家" filterable style="width: 360px;">
+                            <el-option :label="item.cnName" :value="item.cnName" v-for="item in countryData" :key="item.code" >
+                            <div style="display: flex;justify-content: space-between;">
+                                <span>{{ item.cnName }}</span>
+                                <span style="color: #8492a6; font-size: 13px">{{ item.code }}</span>
+                            </div>
+                            </el-option>
+                        </el-select>
+                    </el-form-item>
                 </div>
                 <div class="form-line">
                     <el-form-item label="决策人" prop="decisionMaker">
@@ -174,9 +184,11 @@ import { customInterence,roadshowInterence,businessCustomInterence } from '@/api
 import autocomplete from "@/components/autocomplete.vue";
 import Steps from "./components/Steps.vue";
 import {locationOptions} from "@/views/custom_manage/customList/location"
+import country from "@/utils/countryData"
 export default {
     components: {autocomplete,Steps},
     data() {
+        this.countryData = country
         return {
             /* 城市地址数据 */
             locationOptions,
@@ -221,6 +233,7 @@ export default {
                 name:[{ required: true, message: '请输入商家名称', trigger: 'blur' },],
                 creditCode:[{ required: true, message: '请输入社会信用码', trigger: 'blur' },],
                 address:[{ required: true, message: '请选择商家地址', trigger: 'change' },],
+                nation:[{ required: true, message: '请选择所属国家', trigger: 'change' },],
                 decisionMaker:[{required: true, message: '请输入决策人', trigger: 'blur' },],
                 teamSize:[{required: true, message: '请选择研究团队规模', trigger: 'change' },],
                 industry:[{required: true, message: '请选择所属行业', trigger: 'change' },],
@@ -236,6 +249,7 @@ export default {
                 name:'',
                 creditCode:'',
                 address:'',
+                nation:'',
                 decisionMaker:'',
                 teamSize:'',
                 fundsize:'',
@@ -255,11 +269,11 @@ export default {
                 console.log('watch?',newVal)
                 if(newVal==='海外'){
                     this.firstFormData.creditCode = 'HZ' + new Date().getTime()
-                    this.firstFormData.address = ['海外','其他市']
-                    this.selectRegion(['海外','其他市'])
+                    // this.firstFormData.address = ['海外','其他市']
+                    // this.selectRegion(['海外','其他市'])
                 }else{
                     this.firstFormData.creditCode = ''
-                    this.firstFormData.address = []
+                    // this.firstFormData.address = []
                 }
             }
         }
@@ -278,6 +292,7 @@ export default {
                 RegionType:params.areaType,
                 Province:params.province,
                 City:params.city,
+                Nation:params.nation,
                 SellerId:Number(cascaderNodes[0]?cascaderNodes[0].value:0),
                 SellerName:cascaderNodes[0]?cascaderNodes[0].label:'',
                 Leader:params.decisionMaker,
@@ -302,7 +317,6 @@ export default {
                         if(res.Ret!==200) return 
                         this.step++
                     })
-                    
                 }
             })
         },

src/views/business_ETA_manage/businessDetail.vue

@@ -31,7 +31,7 @@
                                 <el-radio label="海外" border>海外</el-radio>
                             </el-radio-group>
                         </el-form-item>
-                        <el-form-item label="商家地址" prop="address">
+                        <el-form-item label="商家地址" prop="address" v-if="firstFormData.RegionType=='国内'">
                             <el-cascader 
                                 v-model="firstFormData.address"
                                 :props="locationProps"
@@ -41,6 +41,16 @@
                                 placeholder="请选择客户地址" 
                             />
                         </el-form-item>
+                        <el-form-item label="所属国家" prop="Nation" v-else>
+                            <el-select v-model="firstFormData.Nation" placeholder="请选择所属国家" filterable style="width: 360px;">
+                                <el-option :label="item.cnName" :value="item.cnName" v-for="item in countryData" :key="item.code" >
+                                <div style="display: flex;justify-content: space-between;">
+                                    <span>{{ item.cnName }}</span>
+                                    <span style="color: #8492a6; font-size: 13px">{{ item.code }}</span>
+                                </div>
+                                </el-option>
+                            </el-select>
+                        </el-form-item>
                     </div>
                     <div class="form-line">
                         <el-form-item label="社会信用码" prop="CreditCode">
@@ -157,9 +167,11 @@ import { customInterence , businessCustomInterence} from '@/api/api.js'
 import Steps from "./components/Steps.vue";
 import AddRenewal from "./components/AddRenewal";
 import {locationOptions} from "@/views/custom_manage/customList/location"
+import country from "@/utils/countryData"
 export default {
     components: {Steps,AddRenewal},
     data() {
+        this.countryData = country
         return {
             locationOptions,
             locationProps:{
@@ -189,6 +201,7 @@ export default {
                 BusinessName:'',
                 CreditCode:'',
                 Address:'',
+                Nation:'',
                 Leader:'',
                 ResearchTeamSize:'',
                 CapitalScale:'',

src/views/business_ETA_manage/businessEdit.vue

@@ -30,7 +30,7 @@
                                 <el-radio label="海外" border>海外</el-radio>
                             </el-radio-group>
                         </el-form-item>
-                        <el-form-item label="商家地址" prop="address">
+                        <el-form-item label="商家地址" prop="address" v-if="firstFormData.RegionType=='国内'">
                             <el-cascader 
                                 v-model="firstFormData.address"
                                 :props="locationProps"
@@ -40,6 +40,16 @@
                                 placeholder="请选择客户地址" 
                             />
                         </el-form-item>
+                        <el-form-item label="所属国家" prop="Nation" v-else>
+                            <el-select v-model="firstFormData.Nation" placeholder="请选择所属国家" filterable style="width: 360px;">
+                                <el-option :label="item.cnName" :value="item.cnName" v-for="item in countryData" :key="item.code" >
+                                <div style="display: flex;justify-content: space-between;">
+                                    <span>{{ item.cnName }}</span>
+                                    <span style="color: #8492a6; font-size: 13px">{{ item.code }}</span>
+                                </div>
+                                </el-option>
+                            </el-select>
+                        </el-form-item>
                     </div>
                     <div class="form-line">
                         <el-form-item label="社会信用码" prop="CreditCode">
@@ -152,9 +162,11 @@ import { customInterence , businessCustomInterence} from '@/api/api.js'
 import Steps from "./components/Steps.vue";
 import AddRenewal from "./components/AddRenewal";
 import {locationOptions} from "@/views/custom_manage/customList/location"
+import country from "@/utils/countryData"
 export default {
     components: {Steps,AddRenewal},
     data() {
+        this.countryData = country
         return {
             locationOptions,
             locationProps:{
@@ -184,6 +196,7 @@ export default {
                 BusinessName:'',
                 CreditCode:'',
                 Address:'',
+                Nation:'',
                 Leader:'',
                 ResearchTeamSize:'',
                 CapitalScale:'',
@@ -194,6 +207,7 @@ export default {
                 City:''
             },
             rules:{
+                Nation:[{ required: true, message: '请选择所属国家', trigger: 'change' },],
                 address:[{ required: true, message: '请选择商家地址', trigger: 'change' },],
                 decisionMaker:[{required: true, message: '请输入决策人', trigger: 'blur' },],
                 teamSize:[{required: true, message: '请选择研究团队规模', trigger: 'change' },],
@@ -277,13 +291,13 @@ export default {
         // 保存商家
         handleSaveDetail(){
             const {EtaBusinessId,CapitalScale,
-                   address,Leader,IndustryId,
+                   address,Leader,IndustryId,Nation,
                    ResearchTeamSize,UserMax} = this.firstFormData
             const IndustryName = this.tradeArr.find(item=>item.IndustryId===IndustryId).IndustryName
             businessCustomInterence.editBusiness({
                 EtaBusinessId,Leader,
                 IndustryName,CapitalScale,
-                ResearchTeamSize,
+                ResearchTeamSize,Nation,
                 IndustryId:Number(IndustryId),
                 UserMax:Number(UserMax),
                 Province:address[0],

src/views/business_ETA_manage/businessList.vue

@@ -57,6 +57,14 @@
                     @change="changeSelectOptions('location')" 
                     placeholder="请选择客户地址" 
                 />
+                <el-select v-model="nation" placeholder="请选择所属国家" filterable clearable @change="changeSelectOptions('nation')">
+                    <el-option :label="item.cnName" :value="item.cnName" v-for="item in countryData" :key="item.code" >
+                        <div style="display: flex;justify-content: space-between;">
+                            <span>{{ item.cnName }}</span>
+                            <span style="color: #8492a6; font-size: 13px">{{ item.code }}</span>
+                        </div>
+                    </el-option>
+                </el-select>
                 <el-select 
                     v-model="signStatus" 
                     placeholder="请选择签约状态" 
@@ -94,6 +102,9 @@
                             <span v-else-if="item.key==='BusinessName'" class="link" @click="handleShowDetail(scope.row)">
                                 {{ scope.row.BusinessName }}
                             </span>
+                            <span v-else-if="item.key==='Address'">
+                                {{ scope.row.RegionType=='海外'?scope.row.Nation || scope.row.Address:scope.row.Address }}
+                            </span>  
                             <span v-else>{{scope.row[item.key]}}</span>
                         </template>
                     </el-table-column>
@@ -175,9 +186,11 @@ import { customInterence ,businessCustomInterence , roadshowInterence} from '@/a
 import {locationOptions} from "@/views/custom_manage/customList/location"
 import AddRenewal from './components/AddRenewal.vue'
 import ModifySaller from './components/ModifySaller.vue'
+import country from "@/utils/countryData"
 export default {
     components:{AddRenewal,ModifySaller},
     data() {
+        this.countryData = country
         return {
             /* dialog */
             showRenewal:false,//显示添加续约
@@ -194,6 +207,7 @@ export default {
             valueLocation:[],
             provinceValue:'',
             cityValue:'',
+            nation:'',
             locationProps:{
                 multiple: true,
                 value:'name',
@@ -234,7 +248,7 @@ export default {
                     key:'BusinessCode'
                 },
                 {
-                    label:'商家地址',
+                    label:'商家地址/所属国家',
                     key:'Address'
                 },
                 {
@@ -321,6 +335,7 @@ export default {
                 Province:this.provinceValue,
                 City:this.cityValue,
                 IndustryId:Number(this.trade),
+                Nation:this.nation,
                 PageSize:this.pageSize,
                 CurrentIndex:this.page,
                 SortParam:this.sortParam,

src/views/interaction_manage/bannerStatistics.vue

@@ -12,7 +12,6 @@
         </thead>
         <tbody v-for="item in tableData" :key="item.ViewHistoryID">
           <tr v-for="(_item, index) in item.SourceList" :key="_item.LastUpdatedTime">
-            <!-- <td class="thead-rs" :rowspan="item.SourceList.length" v-if="index == 0"> <img :src="item.BannerUrl" class="table-img" alt="" /></td> -->
             <td class="thead-rs" :rowspan="item.SourceList.length" v-if="index == 0">{{ item.Remark }}</td>
             <td class="thead-rs" :rowspan="item.SourceList.length" v-if="index == 0">{{ item.StartDate }} -- {{ item.EndDate }}</td>
             <td class="thead-rs" :rowspan="item.SourceList.length" v-if="index == 0">{{ item.Pv }}</td>

src/views/interaction_manage/components/moneyDetailsChart.vue

@@ -0,0 +1,104 @@
+<template>
+  <div class="bar-chart" ref="moneyChart" style="height: 400px"></div>
+</template>
+
+<script>
+export default {
+  name: "",
+  props: {
+    title: {
+      type: String,
+    },
+    chartData: {
+      type: Array,
+      default: [],
+    },
+  },
+  data() {
+    return {
+      dateList: "",
+    };
+  },
+  watch: {
+    chartData: {
+      handler(newChart) {
+        if (newChart.length == 2) {
+          this.drawChart();
+        }
+      },
+    },
+  },
+  methods: {
+    drawChart() {
+      const chart = this.$refs.moneyChart;
+      const transformedData = this.chartData.map((item) => ({
+        name: item.Name, // 将 Name 转换为 name
+        value: item.Percentage, // 将 Percentage 转换为 value
+        details: {
+          Count: item.Count,
+          Amount: item.Amount,
+        },
+      }));
+      if (chart) {
+        const myChart = echarts.init(chart);
+        const option = {
+          tooltip: {
+            show: true,
+            trigger: "item",
+            formatter: function (params) {
+              return `${params.name}${params.value}%`;
+            },
+          },
+          legend: {
+            // top: "0%",
+            left: "center",
+          },
+          color: ["#409EFF", "#BDD7F1"],
+          series: [
+            {
+              name: "",
+              type: "pie",
+              radius: "70%",
+              avoidLabelOverlap: false,
+              label: {
+                show: true,
+                position: "outside",
+                //position: "inner",
+                formatter(params) {
+                  const details = params.data.details;
+                  console.log(params);
+                  let str = details.Amount ? `付款金额：${details.Amount || ""}元` : "";
+                  return `人数：${details.Count}人\n${str}`;
+                },
+                rich: {
+                  title: {},
+                  value: {},
+                  detail: {},
+                },
+              },
+              labelLine: {},
+              data: transformedData,
+            },
+          ],
+        };
+        myChart.setOption(option);
+        window.addEventListener("resize", function () {
+          myChart.resize();
+        });
+      }
+      this.$on("hook:destroyed", () => {
+        window.removeEventListener("resize", function () {
+          myChart.resize();
+        });
+      });
+    },
+  },
+  created() {},
+  mounted() {
+    // this.$nextTick(() => {
+    //   this.drawChart();
+    // });
+  },
+};
+</script>
+<style lang="scss" scoped></style>

src/views/interaction_manage/registrationDetails.vue

@@ -0,0 +1,155 @@
+<template>
+  <div class="container registration-details">
+    <div class="content">
+      <div>
+        <el-table :data="tableData" show-summary style="width: 538px" border>
+          <el-table-column align="center" prop="RealName" label="分享人">
+            <template slot-scope="{ row }">
+              <span>{{ row.RealName }}({{ row.CompanyName }})</span>
+            </template>
+          </el-table-column>
+          <el-table-column align="center" prop="Count" label="报名数量" width="196">
+            <template slot-scope="{ row }">
+              <span class="editsty" @click="numberHandler(row)">{{ row.Count }}</span>
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+      <div class="chart-content">
+        <moneyDetailsChart :chartData="chartData" />
+      </div>
+    </div>
+    <!-- 点击量详情 -->
+    <el-dialog :visible.sync="showDetails" :modal-append-to-body="false" v-dialogDrag width="65vw" @close="cancelHandle">
+      <div slot="title">{{ shareInfo.RealName }}-报名详情</div>
+      <div style="margin-bottom: 118px">
+        <el-table :data="detailsList" style="width: 100%; margin: 20px 0 30px" ref="clickNumberRef" border @sort-change="detailSortChange">
+          <el-table-column prop="CustomCompanyName" label="公司名称" align="center"> </el-table-column>
+          <el-table-column prop="CustomName" label="姓名" align="center"> </el-table-column>
+          <el-table-column prop="CustomMobile" label="手机号" align="center"> </el-table-column>
+          <el-table-column prop="CreateTime" label="报名时间" align="center" min-width="140"> </el-table-column>
+          <el-table-column prop="Amount" label="付款金额（元）" align="center" min-width="140">
+            <template slot-scope="scope">
+              <div v-if="scope.row.Enable == 1">
+                <!-- 如果数据不为空，则双击后显示输入框 -->
+                <div v-if="scope.row.isInput" @dblclick="handleDoubleClick(scope.$index, scope.row)">
+                  <span class="editsty" v-if="scope.row.isInput">
+                    {{ scope.row.Amount }}
+                  </span>
+                </div>
+                <!-- 如果数据为空，则默认显示输入框 -->
+                <div v-else>
+                  <el-input style="width: 90%" type="number" @input="handleInput(scope.row)" v-model.number="scope.row.Amount" @blur="handleBlur(scope.$index, scope.row)"></el-input>
+                </div>
+              </div>
+              <span v-else>{{ scope.row.Amount }}</span>
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import { departInterence } from "@/api/api.js";
+
+import moneyDetailsChart from "./components/moneyDetailsChart.vue";
+export default {
+  data() {
+    return {
+      tableData: [],
+      showDetails: false,
+      detailsList: [],
+      chartData: [],
+      shareInfo: {},
+    };
+  },
+  components: { moneyDetailsChart },
+  mounted() {
+    this.getDataList();
+  },
+  methods: {
+    // 点击了数量
+    numberHandler(row) {
+      this.showDetails = true;
+      this.shareInfo = row;
+      this.getdetailsDataList(row);
+    },
+    // 关闭了弹框
+    cancelHandle() {
+      this.detailsList = [];
+      this.showDetails = false;
+      this.shareInfo = {};
+    },
+    // 双击切换输入框
+    handleDoubleClick(index, row) {
+      row.isInput = false;
+    },
+    // 失去焦点后的请求
+    handleBlur(index, row) {
+      // 可能需要更新tableData来反映新输入的值
+      this.editAmount(row);
+      // 完成编辑，隐藏输入框
+      row.isInputBol = row.Amount && row.Amount > 0 ? true : false;
+    },
+    // 输入框的值
+    handleInput(row) {
+      row.Amount = row.Amount ? row.Amount : 0;
+    },
+    // 获取数据
+    async getDataList() {
+      const res = await departInterence.getResearchStatisticsItem({
+        BannerId: +this.$route.query.id,
+      });
+      if (res.Ret === 200) {
+        this.tableData = res.Data.List || [];
+        this.chartData = [res.Data.HasPayed, res.Data.NoPay];
+      }
+    },
+    // 获取数据
+    async getdetailsDataList(row) {
+      const res = await departInterence.getResearchStatisticsDetail({
+        Mobile: row.Mobile,
+        BannerId: row.BannerId,
+      });
+      if (res.Ret === 200) {
+        const arr = res.Data || [];
+        this.detailsList = arr.map((item) => {
+          return {
+            ...item,
+            isInput: item.Amount && item.Amount > 0 ? true : false,
+          };
+        });
+      }
+    },
+    // 修改金额
+    async editAmount(row) {
+      const res = await departInterence.getResearchStatisticsAmount({
+        YbResearchSignupStatisticsId: row.YbResearchSignupStatisticsId,
+        Amount: row.Amount,
+      });
+      if (res.Ret === 200) {
+        this.$message.success("修改成功");
+      }
+    },
+  },
+  beforeRouteEnter(to, from, next) {
+    if (to.query.name) {
+      to.matched[1].name = to.query.name + "报名详情";
+    }
+    next();
+  },
+};
+</script>
+<style scoped lang="scss">
+.registration-details {
+  .content {
+    display: flex;
+    .chart-content {
+      flex: 1;
+      flex-shrink: 0;
+    }
+  }
+}
+</style>

src/views/interaction_manage/researchStatistics.vue

@@ -0,0 +1,98 @@
+<template>
+  <div class="container research-statistics-content">
+    <p class="lable-txt">进行中</p>
+    <div class="progress-box">
+      <div class="progress-item" v-for="item in ongoingList" :key="item.BannerId" @click="goDetailHandler(item)">
+        <p class="title">{{ item.Remark }}</p>
+        <p class="time">{{ item.StartDate }}～{{ item.EndDate }}</p>
+        <p class="num">报名人数：{{ item.Count }}</p>
+      </div>
+    </div>
+    <p class="lable-txt">已结束</p>
+    <div class="progress-box">
+      <div class="progress-item item-end" v-for="item in overList" :key="item.BannerId" @click="goDetailHandler(item)">
+        <p class="title">{{ item.Remark }}</p>
+        <p class="time">{{ item.StartDate }}～{{ item.EndDate }}</p>
+        <p class="num">报名人数：{{ item.Count }}</p>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { departInterence } from "@/api/api.js";
+
+export default {
+  name: "",
+  components: {},
+  props: {},
+  data() {
+    return {
+      ongoingList: [],
+      overList: [],
+    };
+  },
+  computed: {},
+  watch: {},
+  created() {},
+  mounted() {
+    this.getDataList();
+  },
+  methods: {
+    // 获取数据
+    async getDataList() {
+      const res = await departInterence.getResearchStatistics();
+      if (res.Ret === 200) {
+        this.ongoingList = res.Data.OngoingList || [];
+        this.overList = res.Data.OverList || [];
+      }
+    },
+    // 跳转详情
+    goDetailHandler(item) {
+      this.$router.push({
+        path: "registrationDetails",
+        query: {
+          id: item.BannerId,
+          name:item.Remark
+        },
+      });
+    },
+  },
+};
+</script>
+<style scoped lang="scss">
+.research-statistics-content {
+  .lable-txt {
+    margin-bottom: 20px;
+  }
+  .progress-box {
+    display: flex;
+    flex-wrap: wrap;
+    .progress-item {
+      width: 292px;
+      height: 126px;
+      padding: 20px;
+      color: #409eff;
+      border-radius: 4px;
+      border: 1px solid #b3d8ff;
+      background-color: #ecf5ff;
+      margin: 0 20px 20px 0;
+      box-sizing: border-box;
+      cursor: pointer;
+      display: flex;
+      flex-direction: column;
+      justify-content: space-between;
+    }
+    .item-end {
+      color: #666666;
+      border: 1px solid #c0c4cc;
+      background-color: #f2f6fa;
+      &:hover {
+        color: #409eff;
+        border: 1px solid #b3d8ff;
+        background-color: #ecf5ff;
+      }
+    }
+  }
+}
+</style>