15.7 init

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/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,82 @@
+<template>
+  <div class="bar-chart" ref="moneyChart" style="height: 400px"></div>
+</template>
+
+<script>
+export default {
+  name: "",
+  props: {
+    title: {
+      type: String,
+    },
+  },
+  data() {
+    return {};
+  },
+  methods: {
+    drawChart() {
+      const chart = this.$refs.moneyChart;
+      if (chart) {
+        const myChart = echarts.init(chart);
+        const option = {
+          tooltip: {
+            show: true,
+            trigger: "item",
+            formatter: function (params) {
+              return `${params.name}${params.value}%`;
+            },
+          },
+          legend: {
+            top: "5%",
+            left: "center",
+          },
+          series: [
+            {
+              name: "",
+              type: "pie",
+              radius: "70%",
+              avoidLabelOverlap: false,
+              label: {
+                show: true,
+                position: "outside",
+                //position: "inner",
+                formatter(params) {
+                  const details = params.data.details;
+                  let str = details.amount ? `付款金额：${details.amount || ""}元` : "";
+                  return `人数：${details.count}人\n${str}`;
+                },
+                rich: {
+                  title: {},
+                  value: {},
+                  detail: {},
+                },
+              },
+              labelLine: {},
+              data: [
+                { value: 40, name: "已付款", details: { count: "4", amount: "200,000" } },
+                { value: 60, name: "未付款", details: { count: "7" } },
+              ],
+            },
+          ],
+        };
+        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,125 @@
+<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 />
+    <!-- 点击量详情 -->
+    <el-dialog :visible.sync="showDetails" :modal-append-to-body="false" v-dialogDrag width="65vw">
+      <div slot="title">时代-报名详情</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">
+            <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>
+              <!-- 如果数据不为空，则双击后显示输入框 -->
+              <div v-else @dblclick="handleDoubleClick(scope.$index, scope.row)">
+                <span class="editsty" v-if="editingIndex !== scope.$index">
+                  {{ scope.row.ClickNum }}
+                </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>
+              </div>
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import moneyDetailsChart from "./components/moneyDetailsChart.vue";
+export default {
+  data() {
+    return {
+      tableData: [],
+      showDetails: false,
+      detailsList: [],
+      editingIndex: -1,
+      inputModel: {},
+    };
+  },
+  components: { moneyDetailsChart },
+  mounted() {
+    this.$nextTick(() => {
+      this.tableData = [
+        {
+          date: 6,
+          name: "王小虎",
+        },
+        {
+          date: 5,
+          name: "王小虎",
+        },
+        {
+          date: 5,
+          name: "王小虎",
+        },
+        {
+          date: 16,
+          name: "王小虎",
+        },
+      ];
+    });
+  },
+  methods: {
+    // 点击了数量
+    numberHandler() {
+      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,
+          },
+        ];
+      });
+    },
+    // 双击切换输入框
+    handleDoubleClick(index, row) {
+      this.editingIndex = index;
+      this.inputModel[index] = row.ClickNum;
+    },
+    // 失去焦点后的请求
+    handleBlur(index, row) {
+      const newValue = this.inputModel[index];
+
+      // 发送请求逻辑...
+      console.log(`发送请求，索引：${index}, 新值：${newValue}`);
+
+      // 可能需要更新tableData来反映新输入的值
+      row.ClickNum = newValue;
+
+      // 完成编辑，隐藏输入框
+      this.editingIndex = -1;
+    },
+    // 输入框的值
+    handleInput(index, row) {
+      row.ClickNum = this.inputModel[index];
+    },
+  },
+};
+</script>
+<style scoped lang="scss"></style>

src/views/interaction_manage/researchStatistics.vue

@@ -0,0 +1,22 @@
+<template>
+ <div class="container"></div>
+</template>
+
+<script>
+export default {
+  name: '',
+  components: {},
+  props: {},
+  data () {
+    return {}
+  },
+  computed: {},
+  watch: {},
+  created () {},
+  mounted () {},
+  methods: {}
+}
+</script>
+<style scoped lang="scss">
+
+</style>