statistics.vue 32 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680
  1. <template>
  2. <div class="app-container">
  3. <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px">
  4. <el-form-item label="企微昵称" prop="nickName">
  5. <el-input
  6. v-model="queryParams.nickName"
  7. placeholder="请输入企微昵称"
  8. clearable
  9. size="small"
  10. @keyup.enter.native="handleQuery"
  11. />
  12. </el-form-item>
  13. <el-form-item label="添加时间" prop="createTime">
  14. <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>
  15. </el-form-item>
  16. <el-form-item>
  17. <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
  18. <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
  19. </el-form-item>
  20. </el-form>
  21. <el-table border v-loading="loading" :data="courseWatchLogList" @selection-change="handleSelectionChange" show-summary height="600">
  22. <el-table-column type="selection" width="55" align="center" />
  23. <el-table-column label="员工名称" align="center" prop="qwUserName" />
  24. <!-- 发课时间 -->
  25. <el-table-column label="进线时间" align="center" prop="createTime"/>
  26. <!-- 进线数 -->
  27. <el-table-column label="进线数" align="center" prop="line" />
  28. <!-- 先导课上线 -->
  29. <el-table-column label="先导上线" align="center" prop="firstOnline">
  30. <template slot-scope="scope">
  31. <span>{{ scope.row.firstOnline }}</span>
  32. <span style="font-size: 12px; color: #959595;margin-left: 5px;">({{ ((scope.row.firstOnline / scope.row.line) * 100).toFixed(2) }}%)</span>
  33. </template>
  34. </el-table-column>
  35. <!-- 先导课完课 -->
  36. <el-table-column label="先导完课" align="center" prop="firstOver">
  37. <template slot-scope="scope">
  38. <span>{{ scope.row.firstOver }}</span>
  39. <span style="font-size: 12px; color: #959595;margin-left: 5px;">({{ ((scope.row.firstOver / scope.row.line) * 100).toFixed(2) }}%)</span>
  40. </template>
  41. </el-table-column>
  42. <el-table-column label="D1上线" align="center" prop="d1Online">
  43. <template slot-scope="scope">
  44. <span>{{ scope.row.d1Online }}</span>
  45. <span style="font-size: 12px; color: #959595;margin-left: 5px;">({{ ((scope.row.d1Online / scope.row.line) * 100).toFixed(2) }}%)</span>
  46. </template>
  47. </el-table-column>
  48. <el-table-column label="D1完课" align="center" prop="d1Over">
  49. <template slot-scope="scope">
  50. <span>{{ scope.row.d1Over }}</span>
  51. <span style="font-size: 12px; color: #959595;margin-left: 5px;">({{ ((scope.row.d1Over / scope.row.line) * 100).toFixed(2) }}%)</span>
  52. </template>
  53. </el-table-column>
  54. <el-table-column label="D2上线" align="center" prop="d2Online">
  55. <template slot-scope="scope">
  56. <span>{{ scope.row.d2Online }}</span>
  57. <span style="font-size: 12px; color: #959595;margin-left: 5px;">({{ ((scope.row.d2Online / scope.row.line) * 100).toFixed(2) }}%)</span>
  58. </template>
  59. </el-table-column>
  60. <el-table-column label="D2完课" align="center" prop="d2Over">
  61. <template slot-scope="scope">
  62. <span>{{ scope.row.d2Over }}</span>
  63. <span style="font-size: 12px; color: #959595;margin-left: 5px;">({{ ((scope.row.d2Over / scope.row.line) * 100).toFixed(2) }}%)</span>
  64. </template>
  65. </el-table-column>
  66. <el-table-column label="D3上线" align="center" prop="d3Online">
  67. <template slot-scope="scope">
  68. <span>{{ scope.row.d3Online }}</span>
  69. <span style="font-size: 12px; color: #959595;margin-left: 5px;">({{ ((scope.row.d3Online / scope.row.line) * 100).toFixed(2) }}%)</span>
  70. </template>
  71. </el-table-column>
  72. <el-table-column label="D3完课" align="center" prop="d3Over">
  73. <template slot-scope="scope">
  74. <span>{{ scope.row.d3Over }}</span>
  75. <span style="font-size: 12px; color: #959595;margin-left: 5px;">({{ ((scope.row.d3Over / scope.row.line) * 100).toFixed(2) }}%)</span>
  76. </template>
  77. </el-table-column>
  78. <el-table-column label="D4上线" align="center" prop="d4Online">
  79. <template slot-scope="scope">
  80. <span>{{ scope.row.d4Online }}</span>
  81. <span style="font-size: 12px; color: #959595;margin-left: 5px;">({{ ((scope.row.d4Online / scope.row.line) * 100).toFixed(2) }}%)</span>
  82. </template>
  83. </el-table-column>
  84. <el-table-column label="D4完课" align="center" prop="d4Over">
  85. <template slot-scope="scope">
  86. <span>{{ scope.row.d4Over }}</span>
  87. <span style="font-size: 12px; color: #959595;margin-left: 5px;">({{ ((scope.row.d4Over / scope.row.line) * 100).toFixed(2) }}%)</span>
  88. </template>
  89. </el-table-column>
  90. <el-table-column label="D5上线" align="center" prop="d5Online">
  91. <template slot-scope="scope">
  92. <span>{{ scope.row.d5Online }}</span>
  93. <span style="font-size: 12px; color: #959595;margin-left: 5px;">({{ ((scope.row.d5Online / scope.row.line) * 100).toFixed(2) }}%)</span>
  94. </template>
  95. </el-table-column>
  96. <el-table-column label="D5完课" align="center" prop="d5Over">
  97. <template slot-scope="scope">
  98. <span>{{ scope.row.d5Over }}</span>
  99. <span style="font-size: 12px; color: #959595;margin-left: 5px;">({{ ((scope.row.d5Over / scope.row.line) * 100).toFixed(2) }}%)</span>
  100. </template>
  101. </el-table-column>
  102. <el-table-column label="D6上线" align="center" prop="d6Online">
  103. <template slot-scope="scope">
  104. <span>{{ scope.row.d6Online }}</span>
  105. <span style="font-size: 12px; color: #959595;margin-left: 5px;">({{ ((scope.row.d6Online / scope.row.line) * 100).toFixed(2) }}%)</span>
  106. </template>
  107. </el-table-column>
  108. <el-table-column label="D6完课" align="center" prop="d6Over">
  109. <template slot-scope="scope">
  110. <span>{{ scope.row.d6Over }}</span>
  111. <span style="font-size: 12px; color: #959595;margin-left: 5px;">({{ ((scope.row.d6Over / scope.row.line) * 100).toFixed(2) }}%)</span>
  112. </template>
  113. </el-table-column>
  114. <el-table-column label="D7上线" align="center" prop="d7Online">
  115. <template slot-scope="scope">
  116. <span>{{ scope.row.d7Online }}</span>
  117. <span style="font-size: 12px; color: #959595;margin-left: 5px;">({{ ((scope.row.d7Online / scope.row.line) * 100).toFixed(2) }}%)</span>
  118. </template>
  119. </el-table-column>
  120. <el-table-column label="D7完课" align="center" prop="d7Over">
  121. <template slot-scope="scope">
  122. <span>{{ scope.row.d7Over }}</span>
  123. <span style="font-size: 12px; color: #959595;margin-left: 5px;">({{ ((scope.row.d7Over / scope.row.line) * 100).toFixed(2) }}%)</span>
  124. </template>
  125. </el-table-column>
  126. <el-table-column label="D8上线" align="center" prop="d8Online">
  127. <template slot-scope="scope">
  128. <span>{{ scope.row.d8Online }}</span>
  129. <span style="font-size: 12px; color: #959595;margin-left: 5px;">({{ ((scope.row.d8Online / scope.row.line) * 100).toFixed(2) }}%)</span>
  130. </template>
  131. </el-table-column>
  132. <el-table-column label="D8完课" align="center" prop="d8Over">
  133. <template slot-scope="scope">
  134. <span>{{ scope.row.d8Over }}</span>
  135. <span style="font-size: 12px; color: #959595;margin-left: 5px;">({{ ((scope.row.d8Over / scope.row.line) * 100).toFixed(2) }}%)</span>
  136. </template>
  137. </el-table-column>
  138. <el-table-column label="D9上线" align="center" prop="d9Online">
  139. <template slot-scope="scope">
  140. <span>{{ scope.row.d9Online }}</span>
  141. <span style="font-size: 12px; color: #959595;margin-left: 5px;">({{ ((scope.row.d9Online / scope.row.line) * 100).toFixed(2) }}%)</span>
  142. </template>
  143. </el-table-column>
  144. <el-table-column label="D9完课" align="center" prop="d9Over">
  145. <template slot-scope="scope">
  146. <span>{{ scope.row.d9Over }}</span>
  147. <span style="font-size: 12px; color: #959595;margin-left: 5px;">({{ ((scope.row.d9Over / scope.row.line) * 100).toFixed(2) }}%)</span>
  148. </template>
  149. </el-table-column>
  150. <el-table-column label="D10上线" align="center" prop="d10Online">
  151. <template slot-scope="scope">
  152. <span>{{ scope.row.d10Online }}</span>
  153. <span style="font-size: 12px; color: #959595;margin-left: 5px;">({{ ((scope.row.d10Online / scope.row.line) * 100).toFixed(2) }}%)</span>
  154. </template>
  155. </el-table-column>
  156. <el-table-column label="D10完课" align="center" prop="d10Over">
  157. <template slot-scope="scope">
  158. <span>{{ scope.row.d10Over }}</span>
  159. <span style="font-size: 12px; color: #959595;margin-left: 5px;">({{ ((scope.row.d10Over / scope.row.line) * 100).toFixed(2) }}%)</span>
  160. </template>
  161. </el-table-column>
  162. <el-table-column label="D11上线" align="center" prop="d11Online">
  163. <template slot-scope="scope">
  164. <span>{{ scope.row.d11Online }}</span>
  165. <span style="font-size: 12px; color: #959595;margin-left: 5px;">({{ ((scope.row.d11Online / scope.row.line) * 100).toFixed(2) }}%)</span>
  166. </template>
  167. </el-table-column>
  168. <el-table-column label="D11完课" align="center" prop="d11Over">
  169. <template slot-scope="scope">
  170. <span>{{ scope.row.d11Over }}</span>
  171. <span style="font-size: 12px; color: #959595;margin-left: 5px;">({{ ((scope.row.d11Over / scope.row.line) * 100).toFixed(2) }}%)</span>
  172. </template>
  173. </el-table-column>
  174. <el-table-column label="D12上线" align="center" prop="d12Online">
  175. <template slot-scope="scope">
  176. <span>{{ scope.row.d12Online }}</span>
  177. <span style="font-size: 12px; color: #959595;margin-left: 5px;">({{ ((scope.row.d12Online / scope.row.line) * 100).toFixed(2) }}%)</span>
  178. </template>
  179. </el-table-column>
  180. <el-table-column label="D12完课" align="center" prop="d12Over">
  181. <template slot-scope="scope">
  182. <span>{{ scope.row.d12Over }}</span>
  183. <span style="font-size: 12px; color: #959595;margin-left: 5px;">({{ ((scope.row.d12Over / scope.row.line) * 100).toFixed(2) }}%)</span>
  184. </template>
  185. </el-table-column>
  186. <el-table-column label="D13上线" align="center" prop="d13Online">
  187. <template slot-scope="scope">
  188. <span>{{ scope.row.d13Online }}</span>
  189. <span style="font-size: 12px; color: #959595;margin-left: 5px;">({{ ((scope.row.d13Online / scope.row.line) * 100).toFixed(2) }}%)</span>
  190. </template>
  191. </el-table-column>
  192. <el-table-column label="D13完课" align="center" prop="d13Over">
  193. <template slot-scope="scope">
  194. <span>{{ scope.row.d13Over }}</span>
  195. <span style="font-size: 12px; color: #959595;margin-left: 5px;">({{ ((scope.row.d13Over / scope.row.line) * 100).toFixed(2) }}%)</span>
  196. </template>
  197. </el-table-column>
  198. <el-table-column label="D14上线" align="center" prop="d14Online">
  199. <template slot-scope="scope">
  200. <span>{{ scope.row.d14Online }}</span>
  201. <span style="font-size: 12px; color: #959595;margin-left: 5px;">({{ ((scope.row.d14Online / scope.row.line) * 100).toFixed(2) }}%)</span>
  202. </template>
  203. </el-table-column>
  204. <el-table-column label="D14完课" align="center" prop="d14Over">
  205. <template slot-scope="scope">
  206. <span>{{ scope.row.d14Over }}</span>
  207. <span style="font-size: 12px; color: #959595;margin-left: 5px;">({{ ((scope.row.d14Over / scope.row.line) * 100).toFixed(2) }}%)</span>
  208. </template>
  209. </el-table-column>
  210. <el-table-column label="D15上线" align="center" prop="d15Online">
  211. <template slot-scope="scope">
  212. <span>{{ scope.row.d15Online }}</span>
  213. <span style="font-size: 12px; color: #959595;margin-left: 5px;">({{ ((scope.row.d15Online / scope.row.line) * 100).toFixed(2) }}%)</span>
  214. </template>
  215. </el-table-column>
  216. <el-table-column label="D15完课" align="center" prop="d15Over">
  217. <template slot-scope="scope">
  218. <span>{{ scope.row.d15Over }}</span>
  219. <span style="font-size: 12px; color: #959595;margin-left: 5px;">({{ ((scope.row.d15Over / scope.row.line) * 100).toFixed(2) }}%)</span>
  220. </template>
  221. </el-table-column>
  222. <el-table-column label="D16上线" align="center" prop="d16Online">
  223. <template slot-scope="scope">
  224. <span>{{ scope.row.d16Online }}</span>
  225. <span style="font-size: 12px; color: #959595;margin-left: 5px;">({{ ((scope.row.d16Online / scope.row.line) * 100).toFixed(2) }}%)</span>
  226. </template>
  227. </el-table-column>
  228. <el-table-column label="D16完课" align="center" prop="d16Over">
  229. <template slot-scope="scope">
  230. <span>{{ scope.row.d16Over }}</span>
  231. <span style="font-size: 12px; color: #959595;margin-left: 5px;">({{ ((scope.row.d16Over / scope.row.line) * 100).toFixed(2) }}%)</span>
  232. </template>
  233. </el-table-column>
  234. <el-table-column label="D17上线" align="center" prop="d17Online">
  235. <template slot-scope="scope">
  236. <span>{{ scope.row.d17Online }}</span>
  237. <span style="font-size: 12px; color: #959595;margin-left: 5px;">({{ ((scope.row.d17Online / scope.row.line) * 100).toFixed(2) }}%)</span>
  238. </template>
  239. </el-table-column>
  240. <el-table-column label="D17完课" align="center" prop="d17Over">
  241. <template slot-scope="scope">
  242. <span>{{ scope.row.d17Over }}</span>
  243. <span style="font-size: 12px; color: #959595;margin-left: 5px;">({{ ((scope.row.d17Over / scope.row.line) * 100).toFixed(2) }}%)</span>
  244. </template>
  245. </el-table-column>
  246. <el-table-column label="D18上线" align="center" prop="d18Online">
  247. <template slot-scope="scope">
  248. <span>{{ scope.row.d18Online }}</span>
  249. <span style="font-size: 12px; color: #959595;margin-left: 5px;">({{ ((scope.row.d18Online / scope.row.line) * 100).toFixed(2) }}%)</span>
  250. </template>
  251. </el-table-column>
  252. <el-table-column label="D18完课" align="center" prop="d18Over">
  253. <template slot-scope="scope">
  254. <span>{{ scope.row.d18Over }}</span>
  255. <span style="font-size: 12px; color: #959595;margin-left: 5px;">({{ ((scope.row.d18Over / scope.row.line) * 100).toFixed(2) }}%)</span>
  256. </template>
  257. </el-table-column>
  258. <el-table-column label="D19上线" align="center" prop="d19Online">
  259. <template slot-scope="scope">
  260. <span>{{ scope.row.d19Online }}</span>
  261. <span style="font-size: 12px; color: #959595;margin-left: 5px;">({{ ((scope.row.d19Online / scope.row.line) * 100).toFixed(2) }}%)</span>
  262. </template>
  263. </el-table-column>
  264. <el-table-column label="D19完课" align="center" prop="d19Over">
  265. <template slot-scope="scope">
  266. <span>{{ scope.row.d19Over }}</span>
  267. <span style="font-size: 12px; color: #959595;margin-left: 5px;">({{ ((scope.row.d19Over / scope.row.line) * 100).toFixed(2) }}%)</span>
  268. </template>
  269. </el-table-column>
  270. <el-table-column label="D20上线" align="center" prop="d20Online">
  271. <template slot-scope="scope">
  272. <span>{{ scope.row.d20Online }}</span>
  273. <span style="font-size: 12px; color: #959595;margin-left: 5px;">({{ ((scope.row.d20Online / scope.row.line) * 100).toFixed(2) }}%)</span>
  274. </template>
  275. </el-table-column>
  276. <el-table-column label="D20完课" align="center" prop="d20Over">
  277. <template slot-scope="scope">
  278. <span>{{ scope.row.d20Over }}</span>
  279. <span style="font-size: 12px; color: #959595;margin-left: 5px;">({{ ((scope.row.d20Over / scope.row.line) * 100).toFixed(2) }}%)</span>
  280. </template>
  281. </el-table-column>
  282. <el-table-column label="D21上线" align="center" prop="d21Online">
  283. <template slot-scope="scope">
  284. <span>{{ scope.row.d21Online }}</span>
  285. <span style="font-size: 12px; color: #959595;margin-left: 5px;">({{ ((scope.row.d21Online / scope.row.line) * 100).toFixed(2) }}%)</span>
  286. </template>
  287. </el-table-column>
  288. <el-table-column label="D21完课" align="center" prop="d21Over">
  289. <template slot-scope="scope">
  290. <span>{{ scope.row.d21Over }}</span>
  291. <span style="font-size: 12px; color: #959595;margin-left: 5px;">({{ ((scope.row.d21Over / scope.row.line) * 100).toFixed(2) }}%)</span>
  292. </template>
  293. </el-table-column>
  294. <el-table-column label="D22上线" align="center" prop="d22Online">
  295. <template slot-scope="scope">
  296. <span>{{ scope.row.d22Online }}</span>
  297. <span style="font-size: 12px; color: #959595;margin-left: 5px;">({{ ((scope.row.d22Online / scope.row.line) * 100).toFixed(2) }}%)</span>
  298. </template>
  299. </el-table-column>
  300. <el-table-column label="D22完课" align="center" prop="d22Over">
  301. <template slot-scope="scope">
  302. <span>{{ scope.row.d22Over }}</span>
  303. <span style="font-size: 12px; color: #959595;margin-left: 5px;">({{ ((scope.row.d22Over / scope.row.line) * 100).toFixed(2) }}%)</span>
  304. </template>
  305. </el-table-column>
  306. <el-table-column label="D23上线" align="center" prop="d23Online">
  307. <template slot-scope="scope">
  308. <span>{{ scope.row.d23Online }}</span>
  309. <span style="font-size: 12px; color: #959595;margin-left: 5px;">({{ ((scope.row.d23Online / scope.row.line) * 100).toFixed(2) }}%)</span>
  310. </template>
  311. </el-table-column>
  312. <el-table-column label="D23完课" align="center" prop="d23Over">
  313. <template slot-scope="scope">
  314. <span>{{ scope.row.d23Over }}</span>
  315. <span style="font-size: 12px; color: #959595;margin-left: 5px;">({{ ((scope.row.d23Over / scope.row.line) * 100).toFixed(2) }}%)</span>
  316. </template>
  317. </el-table-column>
  318. <el-table-column label="D24上线" align="center" prop="d24Online">
  319. <template slot-scope="scope">
  320. <span>{{ scope.row.d24Online }}</span>
  321. <span style="font-size: 12px; color: #959595;margin-left: 5px;">({{ ((scope.row.d24Online / scope.row.line) * 100).toFixed(2) }}%)</span>
  322. </template>
  323. </el-table-column>
  324. <el-table-column label="D24完课" align="center" prop="d24Over">
  325. <template slot-scope="scope">
  326. <span>{{ scope.row.d24Over }}</span>
  327. <span style="font-size: 12px; color: #959595;margin-left: 5px;">({{ ((scope.row.d24Over / scope.row.line) * 100).toFixed(2) }}%)</span>
  328. </template>
  329. </el-table-column>
  330. <el-table-column label="D25上线" align="center" prop="d25Online">
  331. <template slot-scope="scope">
  332. <span>{{ scope.row.d25Online }}</span>
  333. <span style="font-size: 12px; color: #959595;margin-left: 5px;">({{ ((scope.row.d25Online / scope.row.line) * 100).toFixed(2) }}%)</span>
  334. </template>
  335. </el-table-column>
  336. <el-table-column label="D25完课" align="center" prop="d25Over">
  337. <template slot-scope="scope">
  338. <span>{{ scope.row.d25Over }}</span>
  339. <span style="font-size: 12px; color: #959595;margin-left: 5px;">({{ ((scope.row.d25Over / scope.row.line) * 100).toFixed(2) }}%)</span>
  340. </template>
  341. </el-table-column>
  342. <el-table-column label="D26上线" align="center" prop="d26Online">
  343. <template slot-scope="scope">
  344. <span>{{ scope.row.d26Online }}</span>
  345. <span style="font-size: 12px; color: #959595;margin-left: 5px;">({{ ((scope.row.d26Online / scope.row.line) * 100).toFixed(2) }}%)</span>
  346. </template>
  347. </el-table-column>
  348. <el-table-column label="D26完课" align="center" prop="d26Over">
  349. <template slot-scope="scope">
  350. <span>{{ scope.row.d26Over }}</span>
  351. <span style="font-size: 12px; color: #959595;margin-left: 5px;">({{ ((scope.row.d26Over / scope.row.line) * 100).toFixed(2) }}%)</span>
  352. </template>
  353. </el-table-column>
  354. <el-table-column label="D27上线" align="center" prop="d27Online">
  355. <template slot-scope="scope">
  356. <span>{{ scope.row.d27Online }}</span>
  357. <span style="font-size: 12px; color: #959595;margin-left: 5px;">({{ ((scope.row.d27Online / scope.row.line) * 100).toFixed(2) }}%)</span>
  358. </template>
  359. </el-table-column>
  360. <el-table-column label="D27完课" align="center" prop="d27Over">
  361. <template slot-scope="scope">
  362. <span>{{ scope.row.d27Over }}</span>
  363. <span style="font-size: 12px; color: #959595;margin-left: 5px;">({{ ((scope.row.d27Over / scope.row.line) * 100).toFixed(2) }}%)</span>
  364. </template>
  365. </el-table-column>
  366. <el-table-column label="D28上线" align="center" prop="d28Online">
  367. <template slot-scope="scope">
  368. <span>{{ scope.row.d28Online }}</span>
  369. <span style="font-size: 12px; color: #959595;margin-left: 5px;">({{ ((scope.row.d28Online / scope.row.line) * 100).toFixed(2) }}%)</span>
  370. </template>
  371. </el-table-column>
  372. <el-table-column label="D28完课" align="center" prop="d28Over">
  373. <template slot-scope="scope">
  374. <span>{{ scope.row.d28Over }}</span>
  375. <span style="font-size: 12px; color: #959595;margin-left: 5px;">({{ ((scope.row.d28Over / scope.row.line) * 100).toFixed(2) }}%)</span>
  376. </template>
  377. </el-table-column>
  378. <el-table-column label="D29上线" align="center" prop="d29Online">
  379. <template slot-scope="scope">
  380. <span>{{ scope.row.d29Online }}</span>
  381. <span style="font-size: 12px; color: #959595;margin-left: 5px;">({{ ((scope.row.d29Online / scope.row.line) * 100).toFixed(2) }}%)</span>
  382. </template>
  383. </el-table-column>
  384. <el-table-column label="D29完课" align="center" prop="d29Over">
  385. <template slot-scope="scope">
  386. <span>{{ scope.row.d29Over }}</span>
  387. <span style="font-size: 12px; color: #959595;margin-left: 5px;">({{ ((scope.row.d29Over / scope.row.line) * 100).toFixed(2) }}%)</span>
  388. </template>
  389. </el-table-column>
  390. <el-table-column label="D30上线" align="center" prop="d30Online">
  391. <template slot-scope="scope">
  392. <span>{{ scope.row.d30Online }}</span>
  393. <span style="font-size: 12px; color: #959595;margin-left: 5px;">({{ ((scope.row.d30Online / scope.row.line) * 100).toFixed(2) }}%)</span>
  394. </template>
  395. </el-table-column>
  396. <el-table-column label="D30完课" align="center" prop="d30Over">
  397. <template slot-scope="scope">
  398. <span>{{ scope.row.d30Over }}</span>
  399. <span style="font-size: 12px; color: #959595;margin-left: 5px;">({{ ((scope.row.d30Over / scope.row.line) * 100).toFixed(2) }}%)</span>
  400. </template>
  401. </el-table-column>
  402. </el-table>
  403. <pagination
  404. v-show="total>0"
  405. :total="total"
  406. :page.sync="queryParams.pageNum"
  407. :limit.sync="queryParams.pageSize"
  408. @pagination="getList"
  409. />
  410. </div>
  411. </template>
  412. <script>
  413. import { listCourseWatchLog, getCourseWatchLog, delCourseWatchLog, addCourseWatchLog, updateCourseWatchLog, exportCourseWatchLog,statisticsList,qwWatchLogStatisticsList,qwWatchLogAllStatisticsList } from "@/api/course/qw/courseWatchLog";
  414. import { courseList,videoList } from '@/api/course/courseRedPacketLog'
  415. export default {
  416. name: "CourseWatchLog",
  417. data() {
  418. return {
  419. activeName:"00",
  420. createTime:null,
  421. courseLists:[],
  422. videoList:[],
  423. logTypeOptions:[],
  424. // 遮罩层
  425. loading: true,
  426. // 导出遮罩层
  427. exportLoading: false,
  428. // 选中数组
  429. ids: [],
  430. // 非单个禁用
  431. single: true,
  432. // 非多个禁用
  433. multiple: true,
  434. // 显示搜索条件
  435. showSearch: true,
  436. // 总条数
  437. total: 0,
  438. // 短链课程看课记录表格数据
  439. courseWatchLogList: [],
  440. // 弹出层标题
  441. title: "",
  442. // 是否显示弹出层
  443. open: false,
  444. // 查询参数
  445. queryParams: {
  446. pageNum: 1,
  447. pageSize: 10,
  448. userId: null,
  449. nickName: null,
  450. videoId: null,
  451. logType: null,
  452. qwExternalContactId: null,
  453. duration: null,
  454. qwUserId: null,
  455. companyUserId: null,
  456. companyId: null,
  457. courseId: null,
  458. sTime:null,
  459. eTime:null,
  460. scheduleStartTime: null,
  461. scheduleEndTime: null,
  462. },
  463. // 表单参数
  464. form: {},
  465. // 表单校验
  466. rules: {
  467. },
  468. scheduleTime: null,
  469. };
  470. },
  471. created() {
  472. courseList().then(response => {
  473. this.courseLists = response.list;
  474. });
  475. this.getList();
  476. this.getDicts("sys_course_watch_log_type").then(response => {
  477. this.logTypeOptions = response.data;
  478. });
  479. },
  480. methods: {
  481. courseChange(row){
  482. this.queryParams.videoId=null;
  483. if(row === ''){
  484. this.videoList=[];
  485. return
  486. }
  487. videoList(row).then(response => {
  488. this.videoList=response.list
  489. });
  490. },
  491. change() {
  492. if (this.createTime != null) {
  493. this.queryParams.sTime = this.createTime[0];
  494. this.queryParams.eTime = this.createTime[1];
  495. } else {
  496. this.queryParams.sTime = null;
  497. this.queryParams.eTime = null;
  498. }
  499. },
  500. handleClickX(tab,event){
  501. this.activeName=tab.name;
  502. if(tab.name=="00"){
  503. this.queryParams.logType=null;
  504. }else{
  505. this.queryParams.logType=tab.name;
  506. }
  507. this.getList()
  508. },
  509. /** 查询短链课程看课记录列表 */
  510. getList() {
  511. this.loading = true;
  512. qwWatchLogAllStatisticsList(this.queryParams).then(response => {
  513. this.courseWatchLogList = response.rows;
  514. this.total = response.total;
  515. this.loading = false;
  516. });
  517. },
  518. // 取消按钮
  519. cancel() {
  520. this.open = false;
  521. this.reset();
  522. },
  523. // 表单重置
  524. reset() {
  525. this.form = {
  526. logId: null,
  527. userId: null,
  528. videoId: null,
  529. logType: null,
  530. createTime: null,
  531. updateTime: null,
  532. qwExternalContactId: null,
  533. duration: null,
  534. qwUserId: null,
  535. companyUserId: null,
  536. companyId: null,
  537. courseId: null
  538. };
  539. this.resetForm("form");
  540. },
  541. /** 搜索按钮操作 */
  542. handleQuery() {
  543. this.queryParams.pageNum = 1;
  544. this.getList();
  545. },
  546. /** 重置按钮操作 */
  547. resetQuery() {
  548. this.resetForm("queryForm");
  549. this.createTime = null;
  550. this.scheduleTime = null;
  551. this.queryParams.sTime = null;
  552. this.queryParams.eTime = null;
  553. this.queryParams.scheduleStartTime = null;
  554. this.queryParams.scheduleEndTime = null;
  555. this.handleQuery();
  556. },
  557. // 多选框选中数据
  558. handleSelectionChange(selection) {
  559. this.ids = selection.map(item => item.logId)
  560. this.single = selection.length!==1
  561. this.multiple = !selection.length
  562. },
  563. /** 新增按钮操作 */
  564. handleAdd() {
  565. this.reset();
  566. this.open = true;
  567. this.title = "添加短链课程看课记录";
  568. },
  569. /** 修改按钮操作 */
  570. handleUpdate(row) {
  571. this.reset();
  572. const logId = row.logId || this.ids
  573. getCourseWatchLog(logId).then(response => {
  574. this.form = response.data;
  575. this.open = true;
  576. this.title = "修改短链课程看课记录";
  577. });
  578. },
  579. /** 提交按钮 */
  580. submitForm() {
  581. this.$refs["form"].validate(valid => {
  582. if (valid) {
  583. if (this.form.logId != null) {
  584. updateCourseWatchLog(this.form).then(response => {
  585. this.msgSuccess("修改成功");
  586. this.open = false;
  587. this.getList();
  588. });
  589. } else {
  590. addCourseWatchLog(this.form).then(response => {
  591. this.msgSuccess("新增成功");
  592. this.open = false;
  593. this.getList();
  594. });
  595. }
  596. }
  597. });
  598. },
  599. /** 删除按钮操作 */
  600. handleDelete(row) {
  601. const logIds = row.logId || this.ids;
  602. this.$confirm('是否确认删除短链课程看课记录编号为"' + logIds + '"的数据项?', "警告", {
  603. confirmButtonText: "确定",
  604. cancelButtonText: "取消",
  605. type: "warning"
  606. }).then(function() {
  607. return delCourseWatchLog(logIds);
  608. }).then(() => {
  609. this.getList();
  610. this.msgSuccess("删除成功");
  611. }).catch(() => {});
  612. },
  613. /** 导出按钮操作 */
  614. handleExport() {
  615. const queryParams = this.queryParams;
  616. this.$confirm('是否确认导出所有短链课程看课记录数据项?', "警告", {
  617. confirmButtonText: "确定",
  618. cancelButtonText: "取消",
  619. type: "warning"
  620. }).then(() => {
  621. this.exportLoading = true;
  622. return exportCourseWatchLog(queryParams);
  623. }).then(response => {
  624. this.download(response.msg);
  625. this.exportLoading = false;
  626. }).catch(() => {});
  627. },
  628. handleScheduleTimeChange(val) {
  629. if (val) {
  630. this.queryParams.scheduleStartTime = val[0];
  631. this.queryParams.scheduleEndTime = val[1];
  632. } else {
  633. this.queryParams.scheduleStartTime = null;
  634. this.queryParams.scheduleEndTime = null;
  635. }
  636. },
  637. }
  638. };
  639. </script>