|
@@ -1,6 +1,43 @@
|
|
|
<template>
|
|
|
<div class="app-container">
|
|
|
- <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px">
|
|
|
+ <el-form
|
|
|
+ :model="queryParams"
|
|
|
+ ref="queryForm"
|
|
|
+ :inline="true"
|
|
|
+ v-show="showSearch"
|
|
|
+ label-width="68px"
|
|
|
+ >
|
|
|
+ <el-form-item label="部门" prop="type">
|
|
|
+ <treeselect
|
|
|
+ style="width: 220px"
|
|
|
+ :clearable="false"
|
|
|
+ v-model="queryParams.deptId"
|
|
|
+ :options="deptOptions"
|
|
|
+ clearable
|
|
|
+ :show-count="true"
|
|
|
+ placeholder="请选择归属部门"
|
|
|
+ />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="所属客服" prop="companyUserId">
|
|
|
+ <el-select
|
|
|
+ v-model="queryParams.companyUserId"
|
|
|
+ clearable
|
|
|
+ filterable
|
|
|
+ remote
|
|
|
+ placeholder="请输入关键词"
|
|
|
+ :remote-method="loadCompanyUserOptions"
|
|
|
+ v-select-load-more="loadMoreCompanyUserOptions"
|
|
|
+ :loading="companyUserOptionsLoading"
|
|
|
+ >
|
|
|
+ <el-option
|
|
|
+ v-for="item in companyUserOptions"
|
|
|
+ :key="item.value"
|
|
|
+ :label="item.label"
|
|
|
+ :value="item.value"
|
|
|
+ >
|
|
|
+ </el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
<el-form-item label="企微昵称" prop="nickName">
|
|
|
<el-input
|
|
|
v-model="queryParams.nickName"
|
|
@@ -10,144 +47,353 @@
|
|
|
@keyup.enter.native="handleQuery"
|
|
|
/>
|
|
|
</el-form-item>
|
|
|
+
|
|
|
<el-form-item label="添加时间" prop="createTime">
|
|
|
- <el-date-picker v-model="createTime" size="small" style="width: 220px" value-format="yyyy-MM-dd" type="daterange" range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期" @change="change"></el-date-picker>
|
|
|
+ <el-date-picker
|
|
|
+ v-model="createTime"
|
|
|
+ size="small"
|
|
|
+ style="width: 220px"
|
|
|
+ value-format="yyyy-MM-dd"
|
|
|
+ type="daterange"
|
|
|
+ range-separator="-"
|
|
|
+ start-placeholder="开始日期"
|
|
|
+ end-placeholder="结束日期"
|
|
|
+ @change="change"
|
|
|
+ ></el-date-picker>
|
|
|
</el-form-item>
|
|
|
<el-form-item>
|
|
|
- <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
|
|
|
- <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
|
|
|
+ <el-button
|
|
|
+ type="primary"
|
|
|
+ icon="el-icon-search"
|
|
|
+ size="mini"
|
|
|
+ @click="handleQuery"
|
|
|
+ >搜索</el-button
|
|
|
+ >
|
|
|
+ <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
|
|
|
+ >重置</el-button
|
|
|
+ >
|
|
|
</el-form-item>
|
|
|
</el-form>
|
|
|
-
|
|
|
- <el-table border v-loading="loading" :data="courseWatchLogList" @selection-change="handleSelectionChange" show-summary height="600">
|
|
|
+ <el-row :gutter="10" class="mb8">
|
|
|
+ <el-col :span="1.5">
|
|
|
+ <el-button
|
|
|
+ type="warning"
|
|
|
+ plain
|
|
|
+ icon="el-icon-download"
|
|
|
+ size="mini"
|
|
|
+ :loading="exportLoading"
|
|
|
+ @click="handleExport"
|
|
|
+ v-hasPermi="['course:courseRedPacketLog:export']"
|
|
|
+ >导出</el-button
|
|
|
+ >
|
|
|
+ </el-col>
|
|
|
+ <right-toolbar
|
|
|
+ :showSearch.sync="showSearch"
|
|
|
+ @queryTable="getList"
|
|
|
+ ></right-toolbar>
|
|
|
+ </el-row>
|
|
|
+ <el-table
|
|
|
+ border
|
|
|
+ v-loading="loading"
|
|
|
+ :data="courseWatchLogList"
|
|
|
+ @selection-change="handleSelectionChange"
|
|
|
+ show-summary
|
|
|
+ :summary-method="getSummaries"
|
|
|
+ ref="table1"
|
|
|
+ >
|
|
|
<el-table-column type="selection" width="55" align="center" />
|
|
|
- <el-table-column label="企微员工名称" align="center" prop="qwUserName" />
|
|
|
+ <el-table-column label="企微员工名称" align="center" prop="qwUserName" />
|
|
|
+
|
|
|
+ <!-- 发课时间 -->
|
|
|
+ <el-table-column label="进线时间" align="center" prop="createTime" />
|
|
|
+ <!-- 进线数 -->
|
|
|
+ <el-table-column label="进线数" align="center" prop="line" />
|
|
|
+
|
|
|
+ <!-- 先导课上线 -->
|
|
|
+ <el-table-column label="先导课上线" align="center" prop="firstOnline">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <span>{{ scope.row.firstOnline }}</span>
|
|
|
+ <span
|
|
|
+ :style="{
|
|
|
+ 'font-size': '12px',
|
|
|
+ 'margin-left': '5px',
|
|
|
+ color: getPercentageColor(
|
|
|
+ (scope.row.firstOnline / scope.row.line) * 100
|
|
|
+ ),
|
|
|
+ }"
|
|
|
+ >
|
|
|
+ ({{ ((scope.row.firstOnline / scope.row.line) * 100).toFixed(2) }}%)
|
|
|
+ </span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
|
|
|
- <!-- 发课时间 -->
|
|
|
- <el-table-column label="进线时间" align="center" prop="createTime"/>
|
|
|
- <!-- 进线数 -->
|
|
|
- <el-table-column label="进线数" align="center" prop="line" />
|
|
|
+ <!-- 先导课完课 -->
|
|
|
+ <el-table-column label="先导课完课" align="center" prop="firstOver">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <span>{{ scope.row.firstOver }}</span>
|
|
|
+ <span
|
|
|
+ :style="{
|
|
|
+ 'font-size': '12px',
|
|
|
+ 'margin-left': '5px',
|
|
|
+ color: getPercentageColor(
|
|
|
+ (scope.row.firstOver / scope.row.line) * 100
|
|
|
+ ),
|
|
|
+ }"
|
|
|
+ >
|
|
|
+ ({{ ((scope.row.firstOver / scope.row.line) * 100).toFixed(2) }}%)
|
|
|
+ </span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
|
|
|
- <!-- 先导课上线 -->
|
|
|
- <el-table-column label="先导课上线" align="center" prop="firstOnline">
|
|
|
- <template slot-scope="scope">
|
|
|
- <span>{{ scope.row.firstOnline }}</span>
|
|
|
- <span style="font-size: 12px; color: #959595;margin-left: 5px;">({{ ((scope.row.firstOnline / scope.row.line) * 100).toFixed(2) }}%)</span>
|
|
|
- </template>
|
|
|
- </el-table-column>
|
|
|
+ <!-- 首日上线 -->
|
|
|
+ <el-table-column label="首日上线" align="center" prop="d1Online">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <span>{{ scope.row.d1Online }}</span>
|
|
|
+ <span
|
|
|
+ :style="{
|
|
|
+ 'font-size': '12px',
|
|
|
+ 'margin-left': '5px',
|
|
|
+ color: getPercentageColor(
|
|
|
+ (scope.row.d1Online / scope.row.line) * 100
|
|
|
+ ),
|
|
|
+ }"
|
|
|
+ >
|
|
|
+ ({{ ((scope.row.d1Online / scope.row.line) * 100).toFixed(2) }}%)
|
|
|
+ </span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
|
|
|
- <!-- 先导课完课 -->
|
|
|
- <el-table-column label="先导课完课" align="center" prop="firstOver">
|
|
|
- <template slot-scope="scope">
|
|
|
- <span>{{ scope.row.firstOver }}</span>
|
|
|
- <span style="font-size: 12px; color: #959595;margin-left: 5px;">({{ ((scope.row.firstOver / scope.row.line) * 100).toFixed(2) }}%)</span>
|
|
|
- </template>
|
|
|
- </el-table-column>
|
|
|
+ <!-- 首日完课 -->
|
|
|
+ <el-table-column label="首日完课" align="center" prop="d1Over">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <span>{{ scope.row.d1Over }}</span>
|
|
|
+ <span
|
|
|
+ :style="{
|
|
|
+ 'font-size': '12px',
|
|
|
+ 'margin-left': '5px',
|
|
|
+ color: getPercentageColor(
|
|
|
+ (scope.row.d1Over / scope.row.line) * 100
|
|
|
+ ),
|
|
|
+ }"
|
|
|
+ >
|
|
|
+ ({{ ((scope.row.d1Over / scope.row.line) * 100).toFixed(2) }}%)
|
|
|
+ </span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
|
|
|
- <!-- 首日上线 -->
|
|
|
- <el-table-column label="首日上线" align="center" prop="d1Online">
|
|
|
- <template slot-scope="scope">
|
|
|
- <span>{{ scope.row.d1Online }}</span>
|
|
|
- <span style="font-size: 12px; color: #959595;margin-left: 5px;">({{ ((scope.row.d1Online / scope.row.line) * 100).toFixed(2) }}%)</span>
|
|
|
- </template>
|
|
|
- </el-table-column>
|
|
|
+ <!-- 综合报名数 -->
|
|
|
+ <el-table-column label="综合报名数" align="center" prop="sign">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <span>{{ scope.row.sign }}</span>
|
|
|
+ <span
|
|
|
+ :style="{
|
|
|
+ 'font-size': '12px',
|
|
|
+ 'margin-left': '5px',
|
|
|
+ color: getPercentageColor(
|
|
|
+ (scope.row.sign / scope.row.line) * 100
|
|
|
+ ),
|
|
|
+ }"
|
|
|
+ >
|
|
|
+ ({{ ((scope.row.sign / scope.row.line) * 100).toFixed(2) }}%)
|
|
|
+ </span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
|
|
|
- <!-- 首日完课 -->
|
|
|
- <el-table-column label="首日完课" align="center" prop="d1Over">
|
|
|
- <template slot-scope="scope">
|
|
|
- <span>{{ scope.row.d1Over }}</span>
|
|
|
- <span style="font-size: 12px; color: #959595;margin-left: 5px;">({{ ((scope.row.d1Over / scope.row.line) * 100).toFixed(2) }}%)</span>
|
|
|
- </template>
|
|
|
- </el-table-column>
|
|
|
+ <!-- 互动数 -->
|
|
|
+ <el-table-column label="互动数" align="center" prop="interact">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <span>{{ scope.row.interact }}</span>
|
|
|
+ <span
|
|
|
+ :style="{
|
|
|
+ 'font-size': '12px',
|
|
|
+ 'margin-left': '5px',
|
|
|
+ color: getPercentageColor(
|
|
|
+ (scope.row.interact / scope.row.line) * 100
|
|
|
+ ),
|
|
|
+ }"
|
|
|
+ >
|
|
|
+ ({{ ((scope.row.interact / scope.row.line) * 100).toFixed(2) }}%)
|
|
|
+ </span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
|
|
|
- <!-- 综合报名数 -->
|
|
|
- <el-table-column label="综合报名数" align="center" prop="sign">
|
|
|
- <template slot-scope="scope">
|
|
|
- <span>{{ scope.row.sign }}</span>
|
|
|
- <span style="font-size: 12px; color: #959595;margin-left: 5px;">({{ ((scope.row.sign / scope.row.line) * 100).toFixed(2) }}%)</span>
|
|
|
- </template>
|
|
|
- </el-table-column>
|
|
|
+ <!-- A级客户 -->
|
|
|
+ <el-table-column label="A级客户" align="center" prop="a">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <span>{{ scope.row.a }}</span>
|
|
|
+ <span
|
|
|
+ :style="{
|
|
|
+ 'font-size': '12px',
|
|
|
+ 'margin-left': '5px',
|
|
|
+ color: getPercentageColor((scope.row.a / scope.row.line) * 100),
|
|
|
+ }"
|
|
|
+ >
|
|
|
+ ({{ ((scope.row.a / scope.row.line) * 100).toFixed(2) }}%)
|
|
|
+ </span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
|
|
|
- <!-- 互动数 -->
|
|
|
- <el-table-column label="互动数" align="center" prop="interact">
|
|
|
- <template slot-scope="scope">
|
|
|
- <span>{{ scope.row.interact }}</span>
|
|
|
- <span style="font-size: 12px; color: #959595;margin-left: 5px;">({{ ((scope.row.interact / scope.row.line) * 100).toFixed(2) }}%)</span>
|
|
|
- </template>
|
|
|
- </el-table-column>
|
|
|
+ <!-- B级客户 -->
|
|
|
+ <el-table-column label="B级客户" align="center" prop="b">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <span>{{ scope.row.b }}</span>
|
|
|
|
|
|
- <!-- A级客户 -->
|
|
|
- <el-table-column label="A级客户" align="center" prop="a">
|
|
|
- <template slot-scope="scope">
|
|
|
- <span>{{ scope.row.a }}</span>
|
|
|
- <span style="font-size: 12px; color: #959595;margin-left: 5px;">({{ ((scope.row.a / scope.row.line) * 100).toFixed(2) }}%)</span>
|
|
|
- </template>
|
|
|
- </el-table-column>
|
|
|
+ <span
|
|
|
+ :style="{
|
|
|
+ 'font-size': '12px',
|
|
|
+ 'margin-left': '5px',
|
|
|
+ color: getPercentageColor((scope.row.b / scope.row.line) * 100),
|
|
|
+ }"
|
|
|
+ >
|
|
|
+ ({{ ((scope.row.b / scope.row.line) * 100).toFixed(2) }}%)
|
|
|
+ </span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
|
|
|
- <!-- B级客户 -->
|
|
|
- <el-table-column label="B级客户" align="center" prop="b">
|
|
|
- <template slot-scope="scope">
|
|
|
- <span>{{ scope.row.b }}</span>
|
|
|
- <span style="font-size: 12px; color: #959595;margin-left: 5px;">({{ ((scope.row.b / scope.row.line) * 100).toFixed(2) }}%)</span>
|
|
|
- </template>
|
|
|
- </el-table-column>
|
|
|
+ <!-- C级客户 -->
|
|
|
+ <el-table-column label="C级客户" align="center" prop="c">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <span>{{ scope.row.c }}</span>
|
|
|
|
|
|
- <!-- C级客户 -->
|
|
|
- <el-table-column label="C级客户" align="center" prop="c">
|
|
|
- <template slot-scope="scope">
|
|
|
- <span>{{ scope.row.c }}</span>
|
|
|
- <span style="font-size: 12px; color: #959595;margin-left: 5px;">({{ ((scope.row.c / scope.row.line) * 100).toFixed(2) }}%)</span>
|
|
|
- </template>
|
|
|
- </el-table-column>
|
|
|
+ <span
|
|
|
+ :style="{
|
|
|
+ 'font-size': '12px',
|
|
|
+ 'margin-left': '5px',
|
|
|
+ color: getPercentageColor((scope.row.c / scope.row.line) * 100),
|
|
|
+ }"
|
|
|
+ >
|
|
|
+ ({{ ((scope.row.c / scope.row.line) * 100).toFixed(2) }}%)
|
|
|
+ </span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
|
|
|
- <!-- D级客户 -->
|
|
|
- <el-table-column label="D级客户" align="center" prop="d">
|
|
|
- <template slot-scope="scope">
|
|
|
- <span>{{ scope.row.d }}</span>
|
|
|
- <span style="font-size: 12px; color: #959595;margin-left: 5px;">({{ ((scope.row.d / scope.row.line) * 100).toFixed(2) }}%)</span>
|
|
|
- </template>
|
|
|
- </el-table-column>
|
|
|
+ <!-- D级客户 -->
|
|
|
+ <el-table-column label="D级客户" align="center" prop="d">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <span>{{ scope.row.d }}</span>
|
|
|
+ <span
|
|
|
+ :style="{
|
|
|
+ 'font-size': '12px',
|
|
|
+ 'margin-left': '5px',
|
|
|
+ color: getPercentageColor((scope.row.d / scope.row.line) * 100),
|
|
|
+ }"
|
|
|
+ >
|
|
|
+ ({{ ((scope.row.d / scope.row.line) * 100).toFixed(2) }}%)
|
|
|
+ </span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
|
|
|
- <!-- 流失数 -->
|
|
|
- <el-table-column label="流失数" align="center" prop="los">
|
|
|
- <template slot-scope="scope">
|
|
|
- <span>{{ scope.row.los }}</span>
|
|
|
- <span style="font-size: 12px; color: #959595;margin-left: 5px;">({{ ((scope.row.los / scope.row.line) * 100).toFixed(2) }}%)</span>
|
|
|
- </template>
|
|
|
- </el-table-column>
|
|
|
+ <!-- E级客户 -->
|
|
|
+ <el-table-column label="E级客户" align="center" prop="e">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <span>{{ scope.row.e }}</span>
|
|
|
+ <span
|
|
|
+ :style="{
|
|
|
+ 'font-size': '12px',
|
|
|
+ 'margin-left': '5px',
|
|
|
+ color: getPercentageColor((scope.row.e / scope.row.line) * 100),
|
|
|
+ }"
|
|
|
+ >
|
|
|
+ ({{ ((scope.row.e / scope.row.line) * 100).toFixed(2) }}%)
|
|
|
+ </span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <!-- 流失数 -->
|
|
|
+ <el-table-column label="拉黑数" align="center" prop="black">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <span>{{ scope.row.black }}</span>
|
|
|
+ <span
|
|
|
+ :style="{
|
|
|
+ 'font-size': '12px',
|
|
|
+ 'margin-left': '5px',
|
|
|
+ color: getPercentageColor((scope.row.black / scope.row.line) * 100),
|
|
|
+ }"
|
|
|
+ >
|
|
|
+ ({{ ((scope.row.black / scope.row.line) * 100).toFixed(2) }}%)
|
|
|
+ </span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
|
|
|
- <!-- 删除数 -->
|
|
|
- <el-table-column label="删除数" align="center" prop="del">
|
|
|
- <template slot-scope="scope">
|
|
|
- <span>{{ scope.row.del }}</span>
|
|
|
- <span style="font-size: 12px; color: #959595;margin-left: 5px;">({{ ((scope.row.del / scope.row.line) * 100).toFixed(2) }}%)</span>
|
|
|
- </template>
|
|
|
- </el-table-column>
|
|
|
+ <!-- 流失数 -->
|
|
|
+ <!--<el-table-column label="流失数" align="center" prop="los">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <span>{{ scope.row.los }}</span>
|
|
|
+ <span
|
|
|
+ :style="{
|
|
|
+ 'font-size': '12px',
|
|
|
+ 'margin-left': '5px',
|
|
|
+ color: getPercentageColor((scope.row.los / scope.row.line) * 100),
|
|
|
+ }"
|
|
|
+ >
|
|
|
+ ({{ ((scope.row.los / scope.row.line) * 100).toFixed(2) }}%)
|
|
|
+ </span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>-->
|
|
|
+
|
|
|
+ <!-- 删除数 -->
|
|
|
+ <el-table-column label="删除数" align="center" prop="del">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <span>{{ scope.row.del }}</span>
|
|
|
+ <span
|
|
|
+ :style="{
|
|
|
+ 'font-size': '12px',
|
|
|
+ 'margin-left': '5px',
|
|
|
+ color: getPercentageColor((scope.row.del / scope.row.line) * 100),
|
|
|
+ }"
|
|
|
+ >
|
|
|
+ ({{ ((scope.row.del / scope.row.line) * 100).toFixed(2) }}%)
|
|
|
+ </span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
</el-table>
|
|
|
|
|
|
- <pagination
|
|
|
- v-show="total>0"
|
|
|
+ <pagination-more
|
|
|
+ v-show="total > 0"
|
|
|
:total="total"
|
|
|
:page.sync="queryParams.pageNum"
|
|
|
:limit.sync="queryParams.pageSize"
|
|
|
@pagination="getList"
|
|
|
/>
|
|
|
-
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
-import { listCourseWatchLog, getCourseWatchLog, delCourseWatchLog, addCourseWatchLog, updateCourseWatchLog, exportCourseWatchLog,statisticsList,qwWatchLogStatisticsList } from "@/api/course/qw/courseWatchLog";
|
|
|
-import { courseList,videoList } from '@/api/course/courseRedPacketLog'
|
|
|
+import {
|
|
|
+ listCourseWatchLog,
|
|
|
+ getCourseWatchLog,
|
|
|
+ delCourseWatchLog,
|
|
|
+ addCourseWatchLog,
|
|
|
+ updateCourseWatchLog,
|
|
|
+ exportCourseWatchLog,
|
|
|
+ statisticsList,
|
|
|
+ qwWatchLogStatisticsList,
|
|
|
+ exportWatchLogStatistics
|
|
|
+} from "@/api/course/qw/courseWatchLog";
|
|
|
+import { courseList, videoList } from "@/api/course/courseRedPacketLog";
|
|
|
+import { treeselect } from "@/api/company/companyDept";
|
|
|
+import Treeselect from "@riophae/vue-treeselect";
|
|
|
+import "@riophae/vue-treeselect/dist/vue-treeselect.css";
|
|
|
+import { getCompanyUserListLikeName } from "@/api/company/companyUser";
|
|
|
+import { getTask } from "@/api/common";
|
|
|
export default {
|
|
|
name: "CourseWatchLog",
|
|
|
+ components: { Treeselect },
|
|
|
data() {
|
|
|
return {
|
|
|
- activeName:"00",
|
|
|
- createTime:null,
|
|
|
- courseLists:[],
|
|
|
- videoList:[],
|
|
|
- logTypeOptions:[],
|
|
|
+ activeName: "00",
|
|
|
+ createTime: null,
|
|
|
+ courseLists: [],
|
|
|
+ companyUserOptionsParams: {
|
|
|
+ name: undefined,
|
|
|
+ hasNextPage: false,
|
|
|
+ pageNum: 1,
|
|
|
+ pageSize: 10,
|
|
|
+ },
|
|
|
+ companyUserOptionsLoading: false,
|
|
|
+ companyUserOptions: [],
|
|
|
+ deptOptions: [],
|
|
|
+ videoList: [],
|
|
|
+ logTypeOptions: [],
|
|
|
// 遮罩层
|
|
|
loading: true,
|
|
|
// 导出遮罩层
|
|
@@ -182,39 +428,136 @@ export default {
|
|
|
companyUserId: null,
|
|
|
companyId: null,
|
|
|
courseId: null,
|
|
|
- sTime:null,
|
|
|
- eTime:null,
|
|
|
+ sTime: null,
|
|
|
+ eTime: null,
|
|
|
scheduleStartTime: null,
|
|
|
scheduleEndTime: null,
|
|
|
},
|
|
|
// 表单参数
|
|
|
form: {},
|
|
|
// 表单校验
|
|
|
- rules: {
|
|
|
- },
|
|
|
+ rules: {},
|
|
|
scheduleTime: null,
|
|
|
};
|
|
|
},
|
|
|
created() {
|
|
|
- courseList().then(response => {
|
|
|
+ courseList().then((response) => {
|
|
|
this.courseLists = response.list;
|
|
|
});
|
|
|
- this.getList();
|
|
|
- this.getDicts("sys_course_watch_log_type").then(response => {
|
|
|
+
|
|
|
+ this.getDicts("sys_course_watch_log_type").then((response) => {
|
|
|
this.logTypeOptions = response.data;
|
|
|
});
|
|
|
+ this.getTreeselect();
|
|
|
+ this.getList();
|
|
|
},
|
|
|
methods: {
|
|
|
- courseChange(row){
|
|
|
- this.queryParams.videoId=null;
|
|
|
- if(row === ''){
|
|
|
- this.videoList=[];
|
|
|
- return
|
|
|
+ getSummaries(param) {
|
|
|
+ const { columns, data } = param;
|
|
|
+ const sums = [];
|
|
|
+ columns.forEach((column, index) => {
|
|
|
+ if (index === 0) {
|
|
|
+ sums[index] = "总计";
|
|
|
+ return;
|
|
|
+ }
|
|
|
+
|
|
|
+ const values = data.map((item) => Number(item[column.property]));
|
|
|
+ if (!values.every((value) => isNaN(value))) {
|
|
|
+ sums[index] = values.reduce((prev, curr) => {
|
|
|
+ const value = Number(curr);
|
|
|
+ if (!isNaN(value)) {
|
|
|
+ return prev + curr;
|
|
|
+ } else {
|
|
|
+ return prev;
|
|
|
+ }
|
|
|
+ }, 0);
|
|
|
+
|
|
|
+ if (
|
|
|
+ column.property === "firstOnline" ||
|
|
|
+ column.property === "firstOver" ||
|
|
|
+ column.property === "d1Online" ||
|
|
|
+ column.property === "d1Over" ||
|
|
|
+ column.property === "sign" ||
|
|
|
+ column.property === "interact" ||
|
|
|
+ column.property === "a" ||
|
|
|
+ column.property === "b" ||
|
|
|
+ column.property === "c" ||
|
|
|
+ column.property === "d" ||
|
|
|
+ column.property === "e" ||
|
|
|
+ column.property === "black" ||
|
|
|
+ column.property === "los" ||
|
|
|
+ column.property === "del"
|
|
|
+ ) {
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ sums[index] = "";
|
|
|
+ }
|
|
|
+ });
|
|
|
+
|
|
|
+ return sums;
|
|
|
+ },
|
|
|
+ getPercentageColor(percentage) {
|
|
|
+ // HSL模式从黄色(60度)渐变到红色(0度)
|
|
|
+ const percent = Math.min(100, Math.max(0, parseFloat(percentage)));
|
|
|
+
|
|
|
+ // 调整色相范围:从深黄色(40°)渐变到红色(0°)
|
|
|
+ const hue = 40 - 40 * (percent / 100); // 初始 hue=40(深黄),终点 hue=0(红)
|
|
|
+
|
|
|
+ // 提高饱和度(100%),亮度保持 50%(鲜艳但不刺眼)
|
|
|
+ return `hsl(${hue}, 100%, 50%)`;
|
|
|
+ },
|
|
|
+ courseChange(row) {
|
|
|
+ this.queryParams.videoId = null;
|
|
|
+ if (row === "") {
|
|
|
+ this.videoList = [];
|
|
|
+ return;
|
|
|
}
|
|
|
- videoList(row).then(response => {
|
|
|
- this.videoList=response.list
|
|
|
+ videoList(row).then((response) => {
|
|
|
+ this.videoList = response.list;
|
|
|
});
|
|
|
},
|
|
|
+ getTreeselect() {
|
|
|
+ var that = this;
|
|
|
+ var param = { companyId: this.companyId };
|
|
|
+ treeselect(param).then((response) => {
|
|
|
+ this.deptOptions = response.data;
|
|
|
+ console.log(this.deptOptions);
|
|
|
+ if (response.data != null && response.data.length > 0) {
|
|
|
+ //this.queryParams.deptId=response.data[0].id;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ loadCompanyUserOptions(query) {
|
|
|
+ this.companyUserOptions = [];
|
|
|
+ if (query === "") {
|
|
|
+ return;
|
|
|
+ }
|
|
|
+
|
|
|
+ this.companyUserOptionsParams.pageNum = 1;
|
|
|
+ this.companyUserOptionsParams.name = query;
|
|
|
+ this.companyUserOptionsLoading = true;
|
|
|
+ this.getCompanyUserListLikeName();
|
|
|
+ },
|
|
|
+ getCompanyUserListLikeName() {
|
|
|
+ getCompanyUserListLikeName(this.companyUserOptionsParams).then(
|
|
|
+ (response) => {
|
|
|
+ this.companyUserOptions = [
|
|
|
+ ...this.companyUserOptions,
|
|
|
+ ...response.data.list,
|
|
|
+ ];
|
|
|
+ this.companyUserOptionsParams.hasNextPage = response.data.hasNextPage;
|
|
|
+ this.companyUserOptionsLoading = false;
|
|
|
+ }
|
|
|
+ );
|
|
|
+ },
|
|
|
+ loadMoreCompanyUserOptions() {
|
|
|
+ if (!this.companyUserOptionsParams.hasNextPage) {
|
|
|
+ return;
|
|
|
+ }
|
|
|
+
|
|
|
+ this.companyUserOptionsParams.pageNum += 1;
|
|
|
+ this.getCompanyUserListLikeName();
|
|
|
+ },
|
|
|
change() {
|
|
|
if (this.createTime != null) {
|
|
|
this.queryParams.sTime = this.createTime[0];
|
|
@@ -224,23 +567,28 @@ export default {
|
|
|
this.queryParams.eTime = null;
|
|
|
}
|
|
|
},
|
|
|
- handleClickX(tab,event){
|
|
|
- this.activeName=tab.name;
|
|
|
- if(tab.name=="00"){
|
|
|
- this.queryParams.logType=null;
|
|
|
- }else{
|
|
|
- this.queryParams.logType=tab.name;
|
|
|
+ handleClickX(tab, event) {
|
|
|
+ this.activeName = tab.name;
|
|
|
+ if (tab.name == "00") {
|
|
|
+ this.queryParams.logType = null;
|
|
|
+ } else {
|
|
|
+ this.queryParams.logType = tab.name;
|
|
|
}
|
|
|
- this.getList()
|
|
|
+ this.getList();
|
|
|
},
|
|
|
/** 查询短链课程看课记录列表 */
|
|
|
getList() {
|
|
|
this.loading = true;
|
|
|
- qwWatchLogStatisticsList(this.queryParams).then(response => {
|
|
|
+ qwWatchLogStatisticsList(this.queryParams).then((response) => {
|
|
|
this.courseWatchLogList = response.rows;
|
|
|
this.total = response.total;
|
|
|
this.loading = false;
|
|
|
});
|
|
|
+ this.$nextTick(() => {
|
|
|
+ setTimeout(() => {
|
|
|
+ this.$refs.table1?.doLayout();
|
|
|
+ }, 2000);
|
|
|
+ });
|
|
|
},
|
|
|
// 取消按钮
|
|
|
cancel() {
|
|
@@ -261,7 +609,7 @@ export default {
|
|
|
qwUserId: null,
|
|
|
companyUserId: null,
|
|
|
companyId: null,
|
|
|
- courseId: null
|
|
|
+ courseId: null,
|
|
|
};
|
|
|
this.resetForm("form");
|
|
|
},
|
|
@@ -283,9 +631,9 @@ export default {
|
|
|
},
|
|
|
// 多选框选中数据
|
|
|
handleSelectionChange(selection) {
|
|
|
- this.ids = selection.map(item => item.logId)
|
|
|
- this.single = selection.length!==1
|
|
|
- this.multiple = !selection.length
|
|
|
+ this.ids = selection.map((item) => item.logId);
|
|
|
+ this.single = selection.length !== 1;
|
|
|
+ this.multiple = !selection.length;
|
|
|
},
|
|
|
/** 新增按钮操作 */
|
|
|
handleAdd() {
|
|
@@ -296,8 +644,8 @@ export default {
|
|
|
/** 修改按钮操作 */
|
|
|
handleUpdate(row) {
|
|
|
this.reset();
|
|
|
- const logId = row.logId || this.ids
|
|
|
- getCourseWatchLog(logId).then(response => {
|
|
|
+ const logId = row.logId || this.ids;
|
|
|
+ getCourseWatchLog(logId).then((response) => {
|
|
|
this.form = response.data;
|
|
|
this.open = true;
|
|
|
this.title = "修改短链课程看课记录";
|
|
@@ -305,16 +653,16 @@ export default {
|
|
|
},
|
|
|
/** 提交按钮 */
|
|
|
submitForm() {
|
|
|
- this.$refs["form"].validate(valid => {
|
|
|
+ this.$refs["form"].validate((valid) => {
|
|
|
if (valid) {
|
|
|
if (this.form.logId != null) {
|
|
|
- updateCourseWatchLog(this.form).then(response => {
|
|
|
+ updateCourseWatchLog(this.form).then((response) => {
|
|
|
this.msgSuccess("修改成功");
|
|
|
this.open = false;
|
|
|
this.getList();
|
|
|
});
|
|
|
} else {
|
|
|
- addCourseWatchLog(this.form).then(response => {
|
|
|
+ addCourseWatchLog(this.form).then((response) => {
|
|
|
this.msgSuccess("新增成功");
|
|
|
this.open = false;
|
|
|
this.getList();
|
|
@@ -326,31 +674,59 @@ export default {
|
|
|
/** 删除按钮操作 */
|
|
|
handleDelete(row) {
|
|
|
const logIds = row.logId || this.ids;
|
|
|
- this.$confirm('是否确认删除短链课程看课记录编号为"' + logIds + '"的数据项?', "警告", {
|
|
|
+ this.$confirm(
|
|
|
+ '是否确认删除短链课程看课记录编号为"' + logIds + '"的数据项?',
|
|
|
+ "警告",
|
|
|
+ {
|
|
|
confirmButtonText: "确定",
|
|
|
cancelButtonText: "取消",
|
|
|
- type: "warning"
|
|
|
- }).then(function() {
|
|
|
+ type: "warning",
|
|
|
+ }
|
|
|
+ )
|
|
|
+ .then(function () {
|
|
|
return delCourseWatchLog(logIds);
|
|
|
- }).then(() => {
|
|
|
+ })
|
|
|
+ .then(() => {
|
|
|
this.getList();
|
|
|
this.msgSuccess("删除成功");
|
|
|
- }).catch(() => {});
|
|
|
+ })
|
|
|
+ .catch(() => {});
|
|
|
},
|
|
|
/** 导出按钮操作 */
|
|
|
handleExport() {
|
|
|
+ let that = this;
|
|
|
const queryParams = this.queryParams;
|
|
|
- this.$confirm('是否确认导出所有短链课程看课记录数据项?', "警告", {
|
|
|
- confirmButtonText: "确定",
|
|
|
- cancelButtonText: "取消",
|
|
|
- type: "warning"
|
|
|
- }).then(() => {
|
|
|
+ this.$confirm("是否确认导出所有进线客户统计记录数据项?", "警告", {
|
|
|
+ confirmButtonText: "确定",
|
|
|
+ cancelButtonText: "取消",
|
|
|
+ type: "warning",
|
|
|
+ })
|
|
|
+ .then(() => {
|
|
|
this.exportLoading = true;
|
|
|
- return exportCourseWatchLog(queryParams);
|
|
|
- }).then(response => {
|
|
|
- this.download(response.msg);
|
|
|
+ // return exportCourseWatchLog(queryParams);
|
|
|
+ return exportWatchLogStatistics(queryParams);
|
|
|
+ })
|
|
|
+ .then((response) => {
|
|
|
+ console.log(response);
|
|
|
+ if (response.code == 200) {
|
|
|
+ that.msgSuccess(response.msg);
|
|
|
+ that.taskId = response.data;
|
|
|
+ that.time = setInterval(function () {
|
|
|
+ //查订单
|
|
|
+ getTask(that.taskId).then((res) => {
|
|
|
+ if (res.data.status == 1) {
|
|
|
+ that.exportLoading = false;
|
|
|
+ clearTimeout(that.time);
|
|
|
+ that.time = null;
|
|
|
+ that.download(res.data.fileUrl);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }, 10000);
|
|
|
+ }
|
|
|
+ })
|
|
|
+ .catch(() => {
|
|
|
this.exportLoading = false;
|
|
|
- }).catch(() => {});
|
|
|
+ });
|
|
|
},
|
|
|
handleScheduleTimeChange(val) {
|
|
|
if (val) {
|
|
@@ -361,6 +737,6 @@ export default {
|
|
|
this.queryParams.scheduleEndTime = null;
|
|
|
}
|
|
|
},
|
|
|
- }
|
|
|
+ },
|
|
|
};
|
|
|
</script>
|