停更模块-图库阅读统计 完成

src/router/modules/stopUpdateRoutes.js

@@ -157,28 +157,32 @@ export default [
 					title:'主讲人管理'
 				}
 			},
+			{
+				path: 'readStatistics',
+				component: () => import('@/views/dataReport_manage/readStatistics.vue'),
+				name: 'readStatistics',
+				hidden: false,
+				meta:{
+					title:'图库阅读统计'
+				},
+			},
+			{
+				path: 'readClassify',
+				component: () => import('@/views/dataReport_manage/readClassify.vue'),
+				name: 'readClassify',
+				hidden: false,
+				meta: {
+					title:'',//title页面内根据参数拼接
+					pathName: '图库阅读统计',
+					pathFrom: 'readStatistics',
+				}
+			},
       //       {
 			// 	path:'ReportThsSend',
 			// 	component:()=> import('@/views/report_manage/pushSetting.vue'),
 			// 	name:'推送客户群设置',
 			// 	hidden:false
 			// },
-      //       {
-			// 	path: 'readStatistics',
-			// 	component: () => import('@/views/dataReport_manage/readStatistics.vue'),
-			// 	name: '图库阅读统计',
-			// 	hidden: false
-			// },
-			// {
-			// 	path: 'readClassify',
-			// 	component: () => import('@/views/dataReport_manage/readClassify.vue'),
-			// 	name: '',
-			// 	hidden: false,
-			// 	meta: {
-			// 		pathName: '图库阅读统计',
-			// 		pathFrom: 'readStatistics',
-			// 	}
-			// },
 			// {
 			// 	path: 'readChart',
 			// 	name: '我的图库',

src/views/dataReport_manage/readClassify.vue

@@ -0,0 +1,250 @@
+<template>
+    <div class="container-readClassify">
+      <el-card>
+        <div class="top-box">
+          <div>
+            <a :href="exportExcel" download>
+              <el-button type="primary">导出EXCEL</el-button>
+            </a>
+            <el-cascader
+              v-model="sellName"
+              placeholder="请选择销售"
+              style="width: 230px; margin: 0 30px"
+              :options="sellOptions"
+              :props="defaultSalesProps"
+              :show-all-levels="false"
+              collapse-tags
+              clearable
+              filterable
+              @change="changeTableDate"
+            >
+            </el-cascader>
+            <el-select style="width: 230px" v-model="clientState" @change="changeTableDate" placeholder="请选择客户状态" clearable>
+              <el-option v-for="item in clientOptions" :key="item.label" :label="item.label" :value="item.label"> </el-option>
+            </el-select>
+          </div>
+          <div style="width: 400px">
+            <el-input v-model="keyword" placeholder="联系人姓名/客户名称" clearable>
+              <i slot="prefix" class="el-input__icon el-icon-search"></i>
+            </el-input>
+          </div>
+        </div>
+      </el-card>
+      <el-card style="margin-top: 30px">
+        <div class="content-text">
+          图分类： <span @click="goChartList">{{ chartName }}</span> |&nbsp;&nbsp;&nbsp; 阅读人数： <span>{{ visitTotal }}</span>
+        </div>
+        <el-table :data="tableData" border style="width: 100%" @sort-change="sortChangeHandle">
+          <el-table-column prop="UserName" label="联系人姓名" align="center"></el-table-column>
+          <el-table-column prop="CompanyName" label="客户名称" align="center">
+            <template slot-scope="scope">
+              <span class="editsty" @click="goDetail(scope.row)">{{ scope.row.CompanyName }}</span>
+            </template>
+          </el-table-column>
+          <el-table-column prop="SellerName" label="所属销售" align="center"></el-table-column>
+          <el-table-column prop="CompanyStatus" label="客户状态" align="center"></el-table-column>
+          <el-table-column prop="VisitCount" label="查看明细" align="center">
+            <template slot-scope="scope">
+              <span class="editsty" @click="cisitCountBtn(scope.row)">{{ scope.row.VisitCount }}</span>
+            </template>
+          </el-table-column>
+          <el-table-column prop="LastVisitTime" label="最近一次查看时间" align="center" sortable="custom"></el-table-column>
+        </el-table>
+        <el-col :span="24" class="toolbar">
+          <m-page :total="total" :page_no="page_no" @handleCurrentChange="handleCurrentChange" />
+        </el-col>
+      </el-card>
+      <el-dialog :close-on-click-modal="false" :modal-append-to-body="false" :visible.sync="dialogVisibleDetail" width="661px" @close="dlgCancel">
+        <div slot="title" style="display: flex; align-items: center">
+          <img :src="$icons.warn" style="color: #fff; width: 16px; height: 16px; margin-right: 5px" />
+          <span style="font-size: 16px"> 查看明细 </span>
+        </div>
+        <div>
+          <p>图分类：{{ chartName }}</p>
+          <el-table :data="tableDataDlg" border style="width: 100%; margin: 20px 0 30px" height="350">
+            <el-table-column prop="ChartName" label="图表名称" align="center"></el-table-column>
+            <el-table-column prop="VisitCount" label="查看次数" align="center" :render-header="renderHeader"></el-table-column>
+          </el-table>
+        </div>
+      </el-dialog>
+    </div>
+  </template>
+  
+  <script>
+  import mPage from "@/components/mPage.vue";
+  import { dataMainInterface, customInterence } from "@/api/api.js";
+  
+  export default {
+    name: "",
+    components: { mPage },
+    props: {},
+    data() {
+      return {
+        defaultSalesProps: {
+          multiple: true,
+          label: "RealName",
+          children: "ChildrenList",
+          value: "AdminId",
+        }, //销售级联配置
+        dialogVisibleDetail: false,
+        sellOptions: [], //销售
+        clientOptions: [
+          {
+            label: "正式",
+            value: "1",
+          },
+          {
+            label: "试用",
+            value: "2",
+          },
+          {
+            label: "永续",
+            value: "3",
+          },
+        ], //状态
+        sellName: "", //销售
+        clientState: "", //状态
+        pageSize: 10,
+        page_no: 1,
+        total: 0,
+        tableData: [],
+        tableDataDlg: [],
+        keyword: "",
+        orderNumber: "1",
+        visitTotal: "",
+        chartName: "",
+      };
+    },
+    computed: {
+      exportExcel() {
+        let arr = this.sellName.length ? this.sellName.map((item) => item[item.length - 1]) : "";
+        let sellUname = arr.length ? arr.join(",") : "";
+        let str = `&Keyword=${this.keyword}&CompanyStatus=${this.clientState}&SellerId${sellUname}`;
+        return (process.env.API_ROOT + "/yb/chartCensus/exportChartVisitDetailCensusList?" + localStorage.getItem("auth") || "") + "&ClassifyId=" + this.$route.query.id + str;
+      },
+    },
+    watch: {
+      keyword: {
+        handler(newval) {
+          this.sellName = "";
+          this.clientState = "";
+          this.page_no = 1;
+          this.getTableList();
+        },
+      },
+    },
+    created() {
+      if (!this.$route.query.name) {
+        this.$router.push("/readStatistics");
+      } else {
+        this.chartName = this.$route.query.name;
+        this.getTableList();
+        this.getSale();
+      }
+    },
+    mounted() {},
+    methods: {
+      /* 获取销售 */
+      getSale() {
+        customInterence.getSale().then((res) => {
+          if (res.Ret === 200) {
+            this.sellOptions = res.Data.List;
+          }
+        });
+      },
+      sortChangeHandle(item) {
+        if (item.prop === "LastVisitTime") {
+          this.orderNumber = item.order === "ascending" ? "1" : "2";
+          this.getTableList();
+        }
+      },
+      //分页
+      handleCurrentChange(page) {
+        this.page_no = page;
+        this.getTableList();
+      },
+      //获取表格数据
+      async getTableList() {
+        let arr = this.sellName.length ? this.sellName.map((item) => item[item.length - 1]) : "";
+        const res = await dataMainInterface.getchartgetVisitDetailList({
+          PageSize: this.pageSize,
+          CurrentIndex: this.page_no,
+          ClassifyId: this.$route.query.id,
+          Order: this.orderNumber,
+          SellerId: arr.length ? arr.join(",") : "",
+          CompanyStatus: this.clientState,
+          Keyword: this.keyword,
+        });
+        if (res.Ret === 200) {
+          this.tableData = res.Data.List;
+          this.visitTotal = res.Data.VisitTotal;
+          this.total = res.Data.Paging.Totals;
+        }
+      },
+      goChartList() {
+        this.$router.push({
+          path: "/readChart",
+          query: {
+            id: this.$route.query.id,
+          },
+        });
+      },
+      //表格的 change 事件
+      changeTableDate() {
+        this.page_no = 1;
+        this.getTableList();
+      },
+      dlgCancel() {
+        this.dialogVisibleDetail = false;
+      },
+      async cisitCountBtn(item) {
+        const res = await dataMainInterface.getCompanyChartVisitDetail({
+          UserId: item.UserId,
+          ClassifyId: this.$route.query.id,
+        });
+        if (res.Ret === 200) {
+          this.dialogVisibleDetail = true;
+          this.$nextTick(() => {
+            this.tableDataDlg = res.Data || [];
+          });
+        }
+      },
+      goDetail(item) {
+        this.$router.replace({
+          path: "/customDetail",
+          query: {
+            id: item.CompanyId,
+          },
+        });
+      },
+      //table表头自定义
+      renderHeader(h, { column, $index }) {
+        return h("div", { attrs: { style: "padding:0;" } }, [
+          h("span", column.label),
+          h("el-tooltip", { props: { placement: "top" } }, [
+            h("p", { slot: "content", attrs: { style: "display:block;padding:5px 0;" } }, "展示该图表详情累计阅读次数（当天重复阅读不纳入统计）"),
+            h("el-button", { props: { icon: "el-icon-info" }, attrs: { style: "border:none;background:none;pading:2px" } }, ""),
+          ]),
+        ]);
+      },
+    },
+  };
+  </script>
+  <style scoped lang="scss">
+  .container-readClassify {
+    .top-box {
+      display: flex;
+      justify-content: space-between;
+    }
+    .content-text {
+      margin-bottom: 30px;
+      span {
+        color: #409eff;
+      }
+      :first-child {
+        margin-right: 10px;
+      }
+    }
+  }
+  </style>
+  

src/views/dataReport_manage/readStatistics.vue

@@ -0,0 +1,129 @@
+<script setup>
+import mPage from "@/components/mPage.vue";
+import { dataMainInterface, mychartInterface } from "@/api/api.js";
+import { ref, reactive, computed } from 'vue'
+import { useRouter } from "vue-router"
+import { Search } from '@element-plus/icons-vue'
+
+const router = useRouter()
+
+let chartOptions = ref([])
+let chartName = ref("")
+let chartNameList = ref("")
+let page_no = ref(1)
+let pageSize = ref(10)
+let total = ref(0)
+let orderNumber = ref("")
+let tableData = ref([])
+
+let exportExcel = computed(()=>{
+    return (import.meta.env.VITE_APP_API_ROOT + "/yb/chartCensus/exportChartVisitCensusList?" + localStorage.getItem("auth") || "") + "&ClassifyId=" + chartName.value;
+})
+
+function handleSelect(val) {
+    chartName.value = val.MyChartClassifyId;
+    page_no.value = 1;
+    getTableList();
+}
+
+/* 获取公用分类 */
+async function getPublicClassify(data, cb) {
+    const res = await mychartInterface.commonClassifys({Keyword:data});
+    if (res.Ret !== 200) return;
+    let arr = res.Data
+    ? res.Data.List.map((item) => {
+        return { ...item, value: item.MyChartClassifyName };
+        })
+    : [];
+    cb(arr);
+}
+
+//表格的排序事件
+function sortChangeHandle(item) {
+    if (item.prop === "VisitCount") {
+        orderNumber.value = item.order === "ascending" ? 1 : item.order === "descending" ? 2 : "";
+    } else {
+        orderNumber.value = item.order === "ascending" ? 3 : item.order === "descending" ? 4 : "";
+    }
+    getTableList();
+}
+//获取表格数据
+async function getTableList() {
+    const res = await dataMainInterface.getchartCensusList({
+        PageSize: pageSize.value,
+        CurrentIndex: page_no.value,
+        ClassifyId: chartName.value,
+        Order: orderNumber.value,
+    });
+    if (res.Ret === 200) {
+    tableData.value = res.Data.List || [];
+    total.value = res.Data.Paging.Totals || 0;
+    }
+}
+getTableList()
+//表格的 change 事件
+function changeTableDate() {
+    chartName.value = "";
+    page_no.value = 1;
+    getTableList();
+}
+
+//分页
+function handleCurrentChange(page) {
+    page_no.value = page;
+    getTableList();
+}
+//跳转到阅读详情
+function readDetail(item) {
+    router.push({
+        path: "/readClassify",
+        query: {
+            name: item.ClassifyName,
+            id: item.ClassifyId,
+        },
+    });
+}
+</script>
+<template>
+    <div class="container-readStatistics">
+      <el-card>
+        <div style="display: flex; justify-content: space-between">
+          <a :href="exportExcel" download style="margin-right: 30px">
+            <el-button type="primary">导出EXCEL</el-button>
+          </a>
+          <el-autocomplete
+            :prefix-icon="Search"
+            class="inline-input"
+            style="width: 300px"
+            v-model="chartNameList"
+            clearable
+            :fetch-suggestions="getPublicClassify"
+            placeholder="请选择图分类"
+            @clear="changeTableDate"
+            @select="handleSelect"
+          ></el-autocomplete>
+        </div>
+      </el-card>
+  
+      <el-card style="margin-top: 30px">
+        <el-table :data="tableData" border @sort-change="sortChangeHandle" style="width: 100%">
+          <el-table-column prop="ClassifyName" label="图分类" align="center"></el-table-column>
+          <el-table-column prop="VisitCount" label="阅读量" align="center" sortable="custom">
+            <template #default="scope">
+              <span class="editsty" @click="readDetail(scope.row)">{{ scope.row.VisitCount }}</span>
+            </template>
+          </el-table-column>
+          <el-table-column prop="LastVisitTime" label="最近一次阅读时间" align="center" sortable="custom"></el-table-column>
+        </el-table>
+        <el-col :span="24" class="toolbar">
+          <mPage :total="total" :page_no="page_no" @handleCurrentChange="handleCurrentChange" />
+        </el-col>
+      </el-card>
+    </div>
+  </template>
+  <style scoped lang="scss">
+  .box {
+    display: flex;
+  }
+  </style>
+