ficc小程序管理-调研报名统计

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/router/modules/ficcXcxRoutes.js

@@ -135,7 +135,7 @@ export default [
         component: () => import("@/views/ficc_manage/reportVariety.vue"),
         name: "reportVariety",
         hidden: true,
-				meta: {
+        meta: {
           title: "报告分类配置",
         },
       },
@@ -145,12 +145,32 @@ export default [
         name: "chapterVariety",
         hidden: true,
         meta: {
-					title: "章节设置",
+          title: "章节设置",
           pathFrom: "reportVariety",
           pathName: "报告分类配置",
           keepAlive: false,
         },
       },
+      {
+        path: "researchStatisticsFICC",
+        component: () => import("@/views/interaction_manage/researchStatistics.vue"),
+        name: "researchStatisticsFICC",
+        hidden: true,
+        meta: {
+          title: "调研报名统计",
+        },
+      },
+      {
+        path: "registrationDetails",
+        component: () => import("@/views/interaction_manage/registrationDetails.vue"),
+        name: "registrationDetails",
+        hidden: true,
+        meta: {
+          title: "报名详情",
+          pathFrom: "researchStatisticsFICC",
+          pathName: "调研报名统计",
+        },
+      },
     ],
   },
 ];

src/views/interaction_manage/components/moneyDetailsChart.vue

@@ -0,0 +1,103 @@
+<script setup>
+import { ref, watch, onUnmounted, nextTick } from 'vue'
+import Highcharts from 'highcharts';
+
+const props = defineProps({
+  title: {
+    type: String,
+  },
+  chartData: {
+    type: Array,
+    default: [],
+  },
+})
+
+const dateList = ref('')
+const moneyChart = ref(null)
+function drawChart() {
+  const chart = moneyChart.value;
+  const transformedData = props.chartData.map((item) => ({
+    name: item.Name, // 将 Name 转换为 name
+    y: item.Percentage, // 将 Percentage 转换为 value
+    details: {
+      Count: item.Count,
+      Amount: item.Amount,
+    },
+  }));
+  if (chart) {
+    const option = {
+      colors: ["#409EFF", "#BDD7F1"],
+      credits: {
+        enabled: false,
+      },
+      chart: {
+        plotBackgroundColor: null,
+        plotBorderWidth: null,
+        plotShadow: false,
+        type: 'pie',
+        backgroundColor: 'transparent',
+      },
+      legend: {
+        align: "center",
+        verticalAlign: "top",
+      },
+      title: {
+        text: ''
+      },
+      tooltip: {
+        pointFormat: '{series.name}: <b>{point.y}%</b>'
+      },
+      plotOptions: {
+        pie: {
+          allowPointSelect: true,
+          cursor: 'pointer',
+          showInLegend: true,
+          dataLabels: {
+            enabled: true,
+            formatter() {
+              const details = this.point.details;
+              let str = details.Amount ? `付款金额：${details.Amount || ""}元` : "";
+              return `人数：${details.Count}人<br/>${str}`;
+            }
+          }
+        }
+      },
+      series: [{
+        name: '',
+        colorByPoint: true,
+        data: transformedData
+      }]
+    }
+
+    Highcharts.chart('chartBox', option)
+  }
+}
+
+onUnmounted(() => {
+
+})
+
+watch(() => props.chartData, (newChart) => {
+  if (newChart.length == 2) {
+
+    nextTick(() => {
+      drawChart();
+    })
+  }
+})
+
+
+
+
+
+
+</script>
+
+<template>
+  <div
+    class="bar-chart"
+    id="chartBox"
+    ref="moneyChart"
+    style="height: 400px"
+  ></div>
+</template>

src/views/interaction_manage/registrationDetails.vue

@@ -0,0 +1,212 @@
+<script>
+import { defineComponent } from 'vue'
+export default defineComponent({
+  //进入前是否清除参数
+  beforeRouteEnter(to, from, next) {
+    if (to.query.name) {
+      to.matched[1].name = to.query.name + "报名详情";
+    }
+    next()
+  }
+})
+
+</script>
+
+<script setup>
+import { departInterence } from "@/api/api.js";
+import { reactive } from 'vue'
+import { ElMessage } from 'element-plus';
+import { useRoute } from 'vue-router';
+import moneyDetailsChart from "./components/moneyDetailsChart.vue";
+
+const route=useRoute()
+
+
+const pageState = reactive({
+  tableData: [],
+  showDetails: false,
+  detailsList: [],
+  chartData: [],
+  shareInfo: {},
+})
+
+// 点击了数量
+function numberHandler(row) {
+  pageState.showDetails = true;
+  pageState.shareInfo = row;
+  getdetailsDataList(row);
+}
+// 关闭了弹框
+function cancelHandle() {
+  pageState.detailsList = [];
+  pageState.showDetails = false;
+  pageState.shareInfo = {};
+}
+// 双击切换输入框
+function handleDoubleClick(index, row) {
+  row.isInput = false;
+}
+// 失去焦点后的请求
+function handleBlur(index, row) {
+  // 可能需要更新tableData来反映新输入的值
+  editAmount(row);
+  // 完成编辑，隐藏输入框
+  row.isInputBol = row.Amount && row.Amount > 0 ? true : false;
+}
+// 输入框的值
+function handleInput(row) {
+  row.Amount = row.Amount ? row.Amount : 0;
+}
+// 获取数据
+async function getDataList() {
+  const res = await departInterence.getResearchStatisticsItem({
+    BannerId: +route.query.id,
+  });
+  if (res.Ret === 200) {
+    pageState.tableData = res.Data.List || [];
+    pageState.chartData = [res.Data.HasPayed, res.Data.NoPay];
+  }
+}
+getDataList()
+// 获取数据
+async function getdetailsDataList(row) {
+  const res = await departInterence.getResearchStatisticsDetail({
+    Mobile: row.Mobile,
+    BannerId: row.BannerId,
+  });
+  if (res.Ret === 200) {
+    const arr = res.Data || [];
+    pageState.detailsList = arr.map((item) => {
+      return {
+        ...item,
+        isInput: item.Amount && item.Amount > 0 ? true : false,
+      };
+    });
+  }
+}
+// 修改金额
+async function editAmount(row) {
+  const res = await departInterence.getResearchStatisticsAmount({
+    YbResearchSignupStatisticsId: row.YbResearchSignupStatisticsId,
+    Amount: row.Amount,
+  });
+  if (res.Ret === 200) {
+    ElMessage.success("修改成功");
+  }
+}
+
+
+
+</script>
+
+<template>
+  <div class="container registration-details">
+    <div class="content">
+      <div>
+        <el-table :data="pageState.tableData" show-summary style="width: 538px" border>
+          <el-table-column align="center" prop="RealName" label="分享人">
+            <template #default="{ row }">
+              <span>{{ row.RealName }}({{ row.CompanyName }})</span>
+            </template>
+          </el-table-column>
+          <el-table-column
+            align="center"
+            prop="Count"
+            label="报名数量"
+            width="196"
+          >
+            <template #default="{ row }">
+              <span class="editsty" @click="numberHandler(row)">{{
+                row.Count
+              }}</span>
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+      <div class="chart-content">
+        <moneyDetailsChart :chartData="pageState.chartData" />
+      </div>
+    </div>
+    <!-- 点击量详情 -->
+    <el-dialog
+      v-model="pageState.showDetails"
+      :modal-append-to-body="false"
+      draggable
+      width="65vw"
+      @close="cancelHandle"
+    >
+      
+      <template #header>{{ pageState.shareInfo.RealName }}-报名详情</template>
+      <div style="margin-bottom: 118px">
+        <el-table
+          :data="pageState.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 #default="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>
+
+<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,100 @@
+<script setup>
+import { departInterence } from "@/api/api.js";
+import { ref } from 'vue'
+import { useRouter } from "vue-router";
+
+const router=useRouter()
+
+const ongoingList = ref([])
+const overList = ref([])
+
+// 获取数据
+async function getDataList() {
+  const res = await departInterence.getResearchStatistics();
+  if (res.Ret === 200) {
+    ongoingList.value = res.Data.OngoingList || [];
+    overList.value = res.Data.OverList || [];
+  }
+}
+getDataList()
+
+// 跳转详情
+function goDetailHandler(item) {
+  router.push({
+    path: "/registrationDetails",
+    query: {
+      id: item.BannerId,
+      name: item.Remark
+    },
+  });
+}
+
+</script>
+
+<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>
+
+<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>