15.7 ok

src/api/modules/setApi.js

@@ -325,7 +325,35 @@ 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)
+	},
 }
 
 /* 视频管理 */

src/views/interaction_manage/components/moneyDetailsChart.vue

@@ -9,13 +9,36 @@ export default {
     title: {
       type: String,
     },
+    chartData: {
+      type: Array,
+      default: [],
+    },
   },
   data() {
-    return {};
+    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 = {
@@ -30,6 +53,7 @@ export default {
             top: "5%",
             left: "center",
           },
+          color: ["#409EFF", "#BDD7F1"],
           series: [
             {
               name: "",
@@ -42,8 +66,9 @@ export default {
                 //position: "inner",
                 formatter(params) {
                   const details = params.data.details;
-                  let str = details.amount ? `付款金额：${details.amount || ""}元` : "";
-                  return `人数：${details.count}人\n${str}`;
+                  console.log(params);
+                  let str = details.Amount ? `付款金额：${details.Amount || ""}元` : "";
+                  return `人数：${details.Count}人\n${str}`;
                 },
                 rich: {
                   title: {},
@@ -52,10 +77,7 @@ export default {
                 },
               },
               labelLine: {},
-              data: [
-                { value: 40, name: "已付款", details: { count: "4", amount: "200,000" } },
-                { value: 60, name: "未付款", details: { count: "7" } },
-              ],
+              data: transformedData,
             },
           ],
         };
@@ -73,9 +95,9 @@ export default {
   },
   created() {},
   mounted() {
-    this.$nextTick(() => {
-      this.drawChart();
-    });
+    // this.$nextTick(() => {
+    //   this.drawChart();
+    // });
   },
 };
 </script>

src/views/interaction_manage/registrationDetails.vue

@@ -1,35 +1,93 @@
 <template>
   <div class="container registration-details">
-    <el-table :data="tableData" show-summary style="width: 100%" border>
-      <el-table-column align="center" prop="name" label="分享人"> </el-table-column>
-      <el-table-column align="center" prop="date" label="报名数量">
-        <template scope="{row}">
-          <span class="editsty" @click="numberHandler(row)">{{ row.date }}</span>
-        </template>
-      </el-table-column>
-    </el-table>
-    <moneyDetailsChart />
+    <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">
-      <div slot="title">时代-报名详情</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="CompanyName" label="公司名称" align="center"> </el-table-column>
-          <el-table-column prop="RealName" label="姓名" align="center"> </el-table-column>
-          <el-table-column prop="Mobile" label="手机号" align="center"> </el-table-column>
-          <el-table-column prop="CreateTime" label="报名时间" align="center" min-width="140"> </el-table-column>
-          <el-table-column label="付款金额（元）" align="center" min-width="140">
+        <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.ClickNum">
-                <el-input v-model="inputModel[scope.$index]" @blur="handleBlur(scope.$index, scope.row)"></el-input>
+              <div v-if="!scope.row.Amount">
+                <el-input
+                  v-model="inputModel[scope.$index]"
+                  @blur="handleBlur(scope.$index, scope.row)"
+                ></el-input>
               </div>
               <!-- 如果数据不为空，则双击后显示输入框 -->
-              <div v-else @dblclick="handleDoubleClick(scope.$index, scope.row)">
+              <div
+                v-else
+                @dblclick="handleDoubleClick(scope.$index, scope.row)"
+              >
                 <span class="editsty" v-if="editingIndex !== scope.$index">
-                  {{ scope.row.ClickNum }}
+                  {{ scope.row.Amount }}
                 </span>
-                <el-input v-if="editingIndex === scope.$index" v-model="inputModel[scope.$index]" @input="handleInput(scope.$index, scope.row)" @blur="handleBlur(scope.$index, scope.row)"></el-input>
+                <el-input
+                  v-if="editingIndex === scope.$index"
+                  v-model="inputModel[scope.$index]"
+                  @input="handleInput(scope.$index, scope.row)"
+                  @blur="handleBlur(scope.$index, scope.row)"
+                ></el-input>
               </div>
             </template>
           </el-table-column>
@@ -40,6 +98,8 @@
 </template>
 
 <script>
+import { departInterence } from "@/api/api.js";
+
 import moneyDetailsChart from "./components/moneyDetailsChart.vue";
 export default {
   data() {
@@ -49,58 +109,30 @@ export default {
       detailsList: [],
       editingIndex: -1,
       inputModel: {},
+      chartData: [],
+      shareInfo: {},
     };
   },
   components: { moneyDetailsChart },
   mounted() {
-    this.$nextTick(() => {
-      this.tableData = [
-        {
-          date: 6,
-          name: "王小虎",
-        },
-        {
-          date: 5,
-          name: "王小虎",
-        },
-        {
-          date: 5,
-          name: "王小虎",
-        },
-        {
-          date: 16,
-          name: "王小虎",
-        },
-      ];
-    });
+    this.getDataList();
   },
   methods: {
     // 点击了数量
-    numberHandler() {
+    numberHandler(row) {
       this.showDetails = true;
-      this.$nextTick(() => {
-        this.detailsList = [
-          {
-            CompanyName: "弘则研究",
-            RealName: "陈芊烨",
-            Mobile: "13588818597",
-            CreateTime: "2024-04-16 15:30:21",
-            ClickNum: "",
-          },
-          {
-            CompanyName: "弘则研究",
-            RealName: "张怀民",
-            Mobile: "13588818597",
-            CreateTime: "2024-04-16 15:30:21",
-            ClickNum: 100,
-          },
-        ];
-      });
+      this.shareInfo = row;
+      this.getdetailsDataList(row);
+    },
+    // 关闭了弹框
+    cancelHandle() {
+      this.showDetails = false;
+      this.shareInfo = {};
     },
     // 双击切换输入框
     handleDoubleClick(index, row) {
       this.editingIndex = index;
-      this.inputModel[index] = row.ClickNum;
+      this.inputModel[index] = row.Amount;
     },
     // 失去焦点后的请求
     handleBlur(index, row) {
@@ -110,16 +142,61 @@ export default {
       console.log(`发送请求，索引：${index}, 新值：${newValue}`);
 
       // 可能需要更新tableData来反映新输入的值
-      row.ClickNum = newValue;
-
+      row.Amount = newValue;
+      this.editAmount(newValue, row);
       // 完成编辑，隐藏输入框
       this.editingIndex = -1;
     },
     // 输入框的值
     handleInput(index, row) {
-      row.ClickNum = this.inputModel[index];
+      row.Amount = this.inputModel[index];
+    },
+    // 获取数据
+    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,
+      });
+      if (res.Ret === 200) {
+        this.detailsList = res.Data || [];
+      }
+    },
+    // 修改金额
+    async editAmount(Amount, row) {
+      const res = await departInterence.getResearchStatisticsAmount({
+        YbResearchSignupStatisticsId: row.YbResearchSignupStatisticsId,
+        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"></style>
+<style scoped lang="scss">
+.registration-details {
+  .content {
+    display: flex;
+    .chart-content {
+      flex: 1;
+      flex-shrink: 0;
+    }
+  }
+}
+</style>

src/views/interaction_manage/researchStatistics.vue

@@ -1,22 +1,98 @@
 <template>
- <div class="container"></div>
+  <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: '',
+  name: "",
   components: {},
   props: {},
-  data () {
-    return {}
+  data() {
+    return {
+      ongoingList: [],
+      overList: [],
+    };
   },
   computed: {},
   watch: {},
-  created () {},
-  mounted () {},
-  methods: {}
-}
+  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>