|
|
@@ -0,0 +1,379 @@
|
|
|
+<script setup>
|
|
|
+import { reactive } from 'vue'
|
|
|
+import { Search } from "@element-plus/icons-vue";
|
|
|
+import { dataMainInterface, interactiveInterface, customInterence } from '@/api/api.js'
|
|
|
+
|
|
|
+function formatSource(e) {
|
|
|
+ if (e == 1) {
|
|
|
+ return '小程序'
|
|
|
+ } else if (e == 2) {
|
|
|
+ //实际为小程序pc
|
|
|
+ return 'PC端'
|
|
|
+ } else if (e == 3) {
|
|
|
+ //实际为web pc
|
|
|
+ return 'PC端'
|
|
|
+ } else {
|
|
|
+ return '--'
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+const pageState = reactive({
|
|
|
+ sectionOpts: [],//板块选项
|
|
|
+ selectSec: '',//选择的板块
|
|
|
+ varietyOpts: [],//品种选项
|
|
|
+ selectVari: '',//选择的品种
|
|
|
+ userOpts: [],//
|
|
|
+ selectUser: '',
|
|
|
+ keyword: '',
|
|
|
+ ClickSort: '',
|
|
|
+
|
|
|
+ tableData: [],
|
|
|
+ page_no: 1,
|
|
|
+ pageSize: 15,
|
|
|
+ totals: 0,
|
|
|
+
|
|
|
+ showDia: false,
|
|
|
+ clickTableData: [],
|
|
|
+ page_no_click: 1,
|
|
|
+ pageSizeClick: 15,
|
|
|
+ totalsClick: 0,
|
|
|
+ curTitle: '',
|
|
|
+ curNum: '',
|
|
|
+ curId: 0,
|
|
|
+})
|
|
|
+
|
|
|
+
|
|
|
+async function geTableList() {
|
|
|
+ const res = await dataMainInterface.voicePlayStatistic({
|
|
|
+ CurrentIndex: pageState.page_no,
|
|
|
+ PageSize: pageState.pageSize,
|
|
|
+ SectionId: pageState.selectSec,
|
|
|
+ VarietyId: pageState.selectVari,
|
|
|
+ AdminId: pageState.selectUser,
|
|
|
+ Title: pageState.keyword,
|
|
|
+ ClickSort: pageState.ClickSort
|
|
|
+ })
|
|
|
+ if (res.Ret != 200) return
|
|
|
+ const { List, Paging } = res.Data;
|
|
|
+
|
|
|
+ pageState.tableData = List || [];
|
|
|
+ pageState.totals = Paging.Totals;
|
|
|
+}
|
|
|
+
|
|
|
+function handleCurrentChange(e) {
|
|
|
+ pageState.page_no = e
|
|
|
+ geTableList()
|
|
|
+}
|
|
|
+
|
|
|
+function handleFilter() {
|
|
|
+ pageState.page_no = 1
|
|
|
+ geTableList()
|
|
|
+}
|
|
|
+
|
|
|
+function sortChangeHandle(item) {
|
|
|
+ if (item.order == "descending") {
|
|
|
+ pageState.ClickSort = 2
|
|
|
+ } else if (item.order == "ascending") {
|
|
|
+ pageState.ClickSort = 1
|
|
|
+ } else {
|
|
|
+ pageState.ClickSort = ''
|
|
|
+ }
|
|
|
+ pageState.page_no = 1
|
|
|
+ geTableList()
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+function handleShowDetail(item) {
|
|
|
+ pageState.curTitle = item.BroadcastName
|
|
|
+ pageState.curNum = item.VisitCount
|
|
|
+ pageState.curId = item.BroadcastId
|
|
|
+ pageState.clickTableData = []
|
|
|
+ pageState.page_no_click = 1
|
|
|
+ pageState.totalsClick = 0
|
|
|
+ getDetail()
|
|
|
+ pageState.showDia = true
|
|
|
+}
|
|
|
+
|
|
|
+//获取某个语音播报详情数据
|
|
|
+async function getDetail() {
|
|
|
+ const res = await dataMainInterface.voicePlayDetailSta({
|
|
|
+ CurrentIndex: pageState.page_no_click,
|
|
|
+ PageSize: pageState.pageSizeClick,
|
|
|
+ BroadcastId: Number(pageState.curId)
|
|
|
+ })
|
|
|
+ if (res.Ret != 200) return
|
|
|
+ const { List, Paging } = res.Data;
|
|
|
+
|
|
|
+ pageState.clickTableData = List || [];
|
|
|
+ pageState.totalsClick = Paging.Totals;
|
|
|
+}
|
|
|
+
|
|
|
+function handleClickCurrentChange(e) {
|
|
|
+ pageState.page_no_click = e
|
|
|
+ getDetail()
|
|
|
+}
|
|
|
+
|
|
|
+//获取语音管理员筛选项
|
|
|
+async function getUserOpts() {
|
|
|
+ const res = await interactiveInterface.messageManageList({
|
|
|
+ RoleTypeCode: 'yb_voice_admin',
|
|
|
+ PageSize: 10000,
|
|
|
+ CurrentIndex: 1
|
|
|
+ })
|
|
|
+ if (res.Ret === 200) {
|
|
|
+ pageState.userOpts = res.Data.List || []
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+//获取品种数据
|
|
|
+async function getClassifyList() {
|
|
|
+ const res = await customInterence.getvariety({ CompanyType: "ficc" })
|
|
|
+ if (res.Ret !== 200) return
|
|
|
+ pageState.varietyOpts = res.Data.List || []
|
|
|
+}
|
|
|
+
|
|
|
+//获取板块数据
|
|
|
+async function getSectionList() {
|
|
|
+ const res = await interactiveInterface.voiceList({
|
|
|
+ CurrentIndex: pageState.page_no,
|
|
|
+ PageSize: 100000
|
|
|
+ })
|
|
|
+ if (res.Ret !== 200) return
|
|
|
+ const { List, Paging } = res.Data;
|
|
|
+
|
|
|
+ pageState.sectionOpts = List || [];
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+function initPage() {
|
|
|
+ geTableList()
|
|
|
+ getUserOpts()
|
|
|
+ getClassifyList()
|
|
|
+ getSectionList()
|
|
|
+}
|
|
|
+initPage()
|
|
|
+
|
|
|
+</script>
|
|
|
+
|
|
|
+<template>
|
|
|
+ <div class="voice-play-list-page">
|
|
|
+ <div class="top-filter-wrap">
|
|
|
+ <el-select
|
|
|
+ v-model="pageState.selectSec"
|
|
|
+ placeholder="请选择板块名称"
|
|
|
+ clearable
|
|
|
+ @change="handleFilter"
|
|
|
+ >
|
|
|
+ <el-option
|
|
|
+ v-for="item in pageState.sectionOpts"
|
|
|
+ :key="item.SectionId"
|
|
|
+ :label="item.SectionName"
|
|
|
+ :value="item.SectionId"
|
|
|
+ >
|
|
|
+ </el-option>
|
|
|
+ </el-select>
|
|
|
+ <el-cascader
|
|
|
+ v-model="pageState.selectVari"
|
|
|
+ placeholder="请选择品种"
|
|
|
+ :options="pageState.varietyOpts"
|
|
|
+ :props="{
|
|
|
+ value: 'ChartPermissionId',
|
|
|
+ label: 'ClassifyName',
|
|
|
+ children: 'Items',
|
|
|
+ emitPath: false,
|
|
|
+ }"
|
|
|
+ :show-all-levels="false"
|
|
|
+ ref="cascader"
|
|
|
+ clearable
|
|
|
+ @change="handleFilter"
|
|
|
+ style="margin: 0 20px"
|
|
|
+ ></el-cascader>
|
|
|
+ <el-select
|
|
|
+ v-model="pageState.selectUser"
|
|
|
+ filterable
|
|
|
+ placeholder="请选择语音管理员"
|
|
|
+ clearable
|
|
|
+ @change="handleFilter"
|
|
|
+ >
|
|
|
+ <el-option
|
|
|
+ v-for="item in pageState.userOpts"
|
|
|
+ :key="item.AdminId"
|
|
|
+ :label="item.RealName"
|
|
|
+ :value="item.AdminId"
|
|
|
+ >
|
|
|
+ </el-option>
|
|
|
+ </el-select>
|
|
|
+ <el-input
|
|
|
+ placeholder="请输入"
|
|
|
+ v-model="pageState.keyword"
|
|
|
+ style="max-width: 400px; margin-bottom: 8px; float: right"
|
|
|
+ @input="handleFilter"
|
|
|
+ clearable
|
|
|
+ :prefix-icon="Search"
|
|
|
+ >
|
|
|
+ </el-input>
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <el-table
|
|
|
+ :data="pageState.tableData"
|
|
|
+ border
|
|
|
+ style="width: 100%"
|
|
|
+ @sort-change="sortChangeHandle"
|
|
|
+ >
|
|
|
+ <el-table-column prop="BroadcastName" label="语音标题" align="center" />
|
|
|
+ <el-table-column prop="SectionName" label="板块名称" align="center" />
|
|
|
+ <el-table-column
|
|
|
+ prop="VarietyName"
|
|
|
+ label="品种"
|
|
|
+ align="center"
|
|
|
+ width="200"
|
|
|
+ />
|
|
|
+ <el-table-column
|
|
|
+ prop="PublishTime"
|
|
|
+ label="发布时间"
|
|
|
+ align="center"
|
|
|
+ width="200"
|
|
|
+ />
|
|
|
+ <el-table-column
|
|
|
+ prop="Author"
|
|
|
+ label="语音管理员"
|
|
|
+ align="center"
|
|
|
+ width="200"
|
|
|
+ />
|
|
|
+ <el-table-column
|
|
|
+ prop="VisitCount"
|
|
|
+ label="点击量"
|
|
|
+ width="200"
|
|
|
+ align="center"
|
|
|
+ sortable="custom"
|
|
|
+ >
|
|
|
+ <template #default="scope">
|
|
|
+ <span
|
|
|
+ style="color: #409eff; cursor: pointer"
|
|
|
+ @click="handleShowDetail(scope.row)"
|
|
|
+ >{{ scope.row.VisitCount }}</span
|
|
|
+ >
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <template #empty>
|
|
|
+ <div style="margin: 50px 0">
|
|
|
+ <img
|
|
|
+ style="width: 150px"
|
|
|
+ src="~@/assets/img/cus_m/nodata.png"
|
|
|
+ alt=""
|
|
|
+ />
|
|
|
+ <div>暂无数据~</div>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </el-table>
|
|
|
+ <el-pagination
|
|
|
+ layout="total,prev,pager,next,jumper"
|
|
|
+ background
|
|
|
+ :current-page="pageState.page_no"
|
|
|
+ @current-change="handleCurrentChange"
|
|
|
+ :page-size="pageState.pageSize"
|
|
|
+ :total="pageState.totals"
|
|
|
+ style="float: right; margin-top: 20px"
|
|
|
+ >
|
|
|
+ </el-pagination>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 点击量弹窗 -->
|
|
|
+ <el-dialog
|
|
|
+ v-model="pageState.showDia"
|
|
|
+ :close-on-click-modal="false"
|
|
|
+ :modal-append-to-body="false"
|
|
|
+ class="dialog"
|
|
|
+ center
|
|
|
+ width="900px"
|
|
|
+ draggable
|
|
|
+ title="点击量详情"
|
|
|
+ >
|
|
|
+ <div class="click-detail-dia-warp">
|
|
|
+ <div class="title">{{ pageState.curTitle }}</div>
|
|
|
+ <div class="num">点击量：{{ pageState.curNum }}</div>
|
|
|
+ <el-table :data="pageState.clickTableData" border style="width: 100%">
|
|
|
+ <el-table-column prop="RealName" label="用户姓名" align="center" />
|
|
|
+ <el-table-column prop="CompanyName" label="公司名称" align="center" />
|
|
|
+ <el-table-column
|
|
|
+ prop="CompanyStatus"
|
|
|
+ label="客户状态"
|
|
|
+ align="center"
|
|
|
+ width="100"
|
|
|
+ />
|
|
|
+ <el-table-column
|
|
|
+ prop="VisitCount"
|
|
|
+ label="点击次数"
|
|
|
+ align="center"
|
|
|
+ width="100"
|
|
|
+ />
|
|
|
+ <el-table-column
|
|
|
+ prop="Source"
|
|
|
+ label="点击来源"
|
|
|
+ align="center"
|
|
|
+ width="100"
|
|
|
+ >
|
|
|
+ <template #default="scope">
|
|
|
+ <span>{{ formatSource(scope.row.Source) }}</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ prop="CreateTime"
|
|
|
+ label="最近一次点击时间"
|
|
|
+ align="center"
|
|
|
+ width="180"
|
|
|
+ />
|
|
|
+ <template #empty>
|
|
|
+ <div style="margin: 50px 0">
|
|
|
+ <img
|
|
|
+ style="width: 100px"
|
|
|
+ src="~@/assets/img/cus_m/nodata.png"
|
|
|
+ alt=""
|
|
|
+ />
|
|
|
+ <div>暂无数据~</div>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </el-table>
|
|
|
+ <el-pagination
|
|
|
+ layout="total,prev,pager,next,jumper"
|
|
|
+ background
|
|
|
+ :current-page="pageState.page_no_click"
|
|
|
+ @current-change="handleClickCurrentChange"
|
|
|
+ :page-size="pageState.pageSizeClick"
|
|
|
+ :total="pageState.totalsClick"
|
|
|
+ style="float: right; margin-top: 20px"
|
|
|
+ >
|
|
|
+ </el-pagination>
|
|
|
+ </div>
|
|
|
+ </el-dialog>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+.voice-play-list-page {
|
|
|
+ background: #fff;
|
|
|
+ border: 1px solid #ececec;
|
|
|
+ border-radius: 4px;
|
|
|
+ box-shadow: 0 3px 6px rgba(0, 0, 0, 0.05);
|
|
|
+ padding: 30px 30px 100px 30px;
|
|
|
+ min-height: 80vh;
|
|
|
+}
|
|
|
+.top-filter-wrap {
|
|
|
+ margin-bottom: 30px;
|
|
|
+}
|
|
|
+
|
|
|
+.click-detail-dia-warp {
|
|
|
+ padding-bottom: 100px;
|
|
|
+ .title {
|
|
|
+ font-size: 14px;
|
|
|
+ margin-bottom: 10px;
|
|
|
+ }
|
|
|
+ .num {
|
|
|
+ margin-bottom: 10px;
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
