Du kan inte välja fler än 25 ämnen Ämnen måste starta med en bokstav eller siffra, kan innehålla bindestreck ('-') och vara max 35 tecken långa.
 
 
 

1356 rader
33 KiB

  1. <template>
  2. <view class="pages">
  3. <!-- 日报内容部分 -->
  4. <view class="container">
  5. <!-- 头部日报卡 -->
  6. <view class="c-head-card">
  7. <view class="c-title-text">
  8. {{ projectName || '' }}数智工牌周报
  9. </view>
  10. <text class="date">{{ weekObj.createTimeName }}</text>
  11. <view class="creative-time">
  12. 生成时间:{{ weekObj.createTime || '--' }}
  13. </view>
  14. </view>
  15. </view>
  16. <view class="nodata-box" v-if="nodata">
  17. <image class="img" src="/static/images/nodata.png" mode="" />
  18. <view class="text">此项目本周还没有接待量哦~</view>
  19. </view>
  20. <view v-if="!nodata">
  21. <!-- 简报 -->
  22. <view class="briefing">
  23. <view class="briefing-title">
  24. 简报
  25. </view>
  26. <!-- 简报表格部分 -->
  27. <view class="briefing-box">
  28. <block v-for="(data, index) in numlist" :key="index">
  29. <view class="briefing-box-item">
  30. <view class="tops" :class="[data.class || '']">
  31. {{ data.name }}
  32. </view>
  33. <view class="middle" :class="[data.class || '']">
  34. {{ data.num || 0 }}
  35. </view>
  36. <view class="bottom">
  37. 对比上周: {{ data.preNum || 0 }}
  38. <text class="b-text"
  39. :class="{up: data.percent > 0, down: data.percent < 0}">{{ data.percent || '0' }}</text>
  40. <template v-if="data.percent != 0">
  41. <text style="margin-left: 8rpx;font-size: 34rpx;font-weight: bold;"
  42. :class="{up: data.percent > 0, down: data.percent < 0}">{{ data.percent > 0 ? '↑' : '↓' }}</text>
  43. </template>
  44. </view>
  45. </view>
  46. </block>
  47. </view>
  48. </view>
  49. <!-- 销讲场景执行排名 -->
  50. <view class="execution-ranking" v-if="!weekObj.orgCode">
  51. <view class="execution-ranking-title">
  52. 销讲场景执行排名
  53. </view>
  54. <template v-if="isShowXJTop1List">
  55. <view class="execution-ranking-desc" v-if="false">
  56. <text>销讲场景平均执行对比上周</text>
  57. <text>{{ rankTop('fractionPKName') }}</text>
  58. <text>{{ rankTop('fractionPK') }}</text>
  59. <text>%</text>
  60. <template v-if="rankTop('fractionBastValue') > 0">
  61. <text>,其中【{{ rankTop('fractionBastName') }}】最强为</text>
  62. <text class="up">{{ rankTop('fractionBastValue') }}</text>
  63. <text>%</text>
  64. </template>
  65. <template v-if="rankTop('fractionLastValue') < 0">
  66. <text>,【{{ rankTop('fractionLastName') }}】执行最弱为</text>
  67. <text class="down">{{ rankTop('fractionLastValue') }}</text>
  68. <text>%;</text>
  69. </template>
  70. </view>
  71. <!-- 排名百分比列表 -->
  72. <view class="ranking-box" @click="toTrendAnalysis('销讲数据')">
  73. <block v-for="(percent, index) in weekObj.XJTop1List" :key="index">
  74. <view class="ranking-item">
  75. <view class="left">{{ percent.title }}</view>
  76. <view class="middle">
  77. <u-line-progress :active-color="$options.filters.setColor(index)"
  78. inactive-color="#F2F2F2" :show-percent="false" :percent="percent.value">
  79. </u-line-progress>
  80. </view>
  81. <view class="right"> {{ percent.value || '0' }} %</view>
  82. </view>
  83. </block>
  84. </view>
  85. </template>
  86. <template v-else>
  87. <view class="empity">
  88. 暂无数据
  89. </view>
  90. </template>
  91. </view>
  92. <!-- 接待统计 -->
  93. <view class="statistics">
  94. <view class="statistics-title">
  95. 接待统计
  96. </view>
  97. <template v-if="isShowStatistics">
  98. <view class="statistics-desc" v-if="false">
  99. <text>
  100. 顾问平均执行率对比上周
  101. </text>
  102. <text>
  103. {{ rankTop('ranktype') || '' }}
  104. </text>
  105. <text :class="[rankTop('class')]">{{ rankTop('people') || '' }}</text>
  106. <text class="">
  107. 人,其中{{ rankTop('topName') || '' }}上升
  108. </text>
  109. <text class="up">{{ rankTop('topPk') || '0' }}</text>
  110. <text class="">
  111. %为最高,{{ rankTop('lastName') || '' }}下降
  112. </text>
  113. <text class="down">{{ rankTop('lastPk') || '0' }}</text>
  114. <text class="">
  115. %降幅最大。
  116. </text>
  117. </view>
  118. <view class="table">
  119. <view class="thead">
  120. <block v-for="(head, headIndex) in tableHead" :key="headIndex">
  121. <view class="thead-item"
  122. :style="[(weekObj.orgCode && head.title2) ? head.style1 : head.style]">
  123. <template v-if="weekObj.orgCode && head.title2">
  124. {{ head.title2 }}
  125. </template>
  126. <template v-else>
  127. {{ head.title }}
  128. </template>
  129. </view>
  130. </block>
  131. </view>
  132. <view class="tbody" @click="toEmployeesstatistics('顾问排名')">
  133. <block v-for="(data, index) in weekObj.customerInfo1" :key="index">
  134. <view class="tbody-item">
  135. <template v-if="!weekObj.orgCode">
  136. <view class="tbody-items name">{{ data.name }}</view>
  137. </template>
  138. <template v-else>
  139. <view class="tbody-items time">{{ data.houseName }}</view>
  140. </template>
  141. <view class="tbody-items nums">{{ data.activeCustomer }}</view>
  142. <template v-if="!weekObj.orgCode">
  143. <view class="tbody-items time">{{ tofixed2(data.avgDuration)}}m</view>
  144. </template>
  145. <template v-else>
  146. <view class="tbody-items time">{{ tofixed2(data.avgDuration/60) }}m</view>
  147. </template>
  148. <view class="tbody-items percent">{{ data.fraction }}%</view>
  149. <template v-if="!weekObj.orgCode">
  150. <view class="tbody-items week" :class="{up: data.pk > 0, down: data.pk < 0}">
  151. <template v-if="data.pk">
  152. {{ data.pk > 0 ? `+${data.pk}` : data.pk }}%
  153. </template>
  154. </view>
  155. </template>
  156. <template v-else>
  157. <view class="tbody-items week"
  158. :class="{up: data.fractionContrast > 0, down: data.fractionContrast < 0}">
  159. <template v-if="data.fractionContrast">
  160. {{ data.fractionContrast > 0 ? `+${data.fractionContrast}` : data.fractionContrast }}%
  161. </template>
  162. <template v-else>--</template>
  163. </view>
  164. </template>
  165. </view>
  166. </block>
  167. </view>
  168. </view>
  169. </template>
  170. <template v-else>
  171. <view class="empity">
  172. 暂无数据
  173. </view>
  174. </template>
  175. </view>
  176. <!-- 顾问销讲执行率排名 -->
  177. <view class="guwen-ranking">
  178. <view class="guwen-ranking-title">
  179. <template v-if="!weekObj.orgCode">
  180. 顾问销讲执行率排名(TOP10)
  181. </template>
  182. <template v-else>
  183. 项目统计排名(TOP10)
  184. </template>
  185. </view>
  186. <template v-if="isShowZXLTopList">
  187. <!-- 排名百分比列表 -->
  188. <view class="ranking-box">
  189. <block v-for="(percent, index) in weekObj.ZXLTopList" :key="index">
  190. <view class="ranking-item" @click="toStaffAnalysis('销讲数据', percent)">
  191. <view class="left">{{ percent.title }}</view>
  192. <view class="middle">
  193. <u-line-progress :active-color="$options.filters.setColor(index)"
  194. inactive-color="#F2F2F2" :show-percent="false" :percent="percent.value">
  195. </u-line-progress>
  196. </view>
  197. <view class="right"> {{ percent.value || '0' }}%</view>
  198. </view>
  199. </block>
  200. </view>
  201. </template>
  202. <template v-else>
  203. <view class="empity">
  204. 暂无数据
  205. </view>
  206. </template>
  207. </view>
  208. <!-- 顾问接待量排名 -->
  209. <view class="guwen-ranking">
  210. <view class="guwen-ranking-title">
  211. <template v-if="!weekObj.orgCode">
  212. 顾问接待量排名(TOP10)
  213. </template>
  214. <template v-else>
  215. 项目有效接待排名(TOP10)
  216. </template>
  217. </view>
  218. <template v-if="isShowJDLTopList">
  219. <!-- 排名百分比列表 -->
  220. <view class="ranking-box">
  221. <block v-for="(percent, index) in weekObj.JDLTopList" :key="index">
  222. <view class="ranking-item" @click="toStaffAnalysis('销讲数据', percent)">
  223. <view class="left">{{ percent.title }}</view>
  224. <view class="middle">
  225. <u-line-progress :active-color="$options.filters.setColor(index)"
  226. inactive-color="#F2F2F2" :show-percent="false" :percent="percent.values">
  227. </u-line-progress>
  228. </view>
  229. <view class="right"> {{ percent.value || '0' }} </view>
  230. </view>
  231. </block>
  232. </view>
  233. </template>
  234. <template v-else>
  235. <view class="empity">
  236. 暂无数据
  237. </view>
  238. </template>
  239. </view>
  240. <!-- 顾问接待量排名 -->
  241. <view class="guwen-ranking" v-if="weekObj.level1List">
  242. <view class="guwen-ranking-title">
  243. 画像一级触达排名(TOP10)
  244. </view>
  245. <template v-if="weekObj.level1List">
  246. <!-- 排名百分比列表 -->
  247. <view class="ranking-box">
  248. <block v-for="(percent, index) in weekObj.level1List" :key="index">
  249. <view class="ranking-item">
  250. <view class="left">{{ percent.name }}</view>
  251. <view class="middle">
  252. <u-line-progress :active-color="$options.filters.setColor(index)"
  253. inactive-color="#F2F2F2" :show-percent="false" :percent="percent.percent">
  254. </u-line-progress>
  255. </view>
  256. <view class="right"> {{ percent.total || '0' }} </view>
  257. </view>
  258. </block>
  259. </view>
  260. </template>
  261. <template v-else>
  262. <view class="empity">
  263. 暂无数据
  264. </view>
  265. </template>
  266. </view>
  267. <view class="guwen-ranking" v-if="weekObj.level2List">
  268. <view class="guwen-ranking-title">
  269. 画像关键词触达排名(TOP10)
  270. </view>
  271. <template v-if="weekObj.level2List">
  272. <!-- 排名百分比列表 -->
  273. <view class="ranking-box">
  274. <block v-for="(percent, index) in weekObj.level2List" :key="index">
  275. <view class="ranking-item">
  276. <view class="left">{{ percent.name }}</view>
  277. <view class="middle">
  278. <u-line-progress :active-color="$options.filters.setColor(index)"
  279. inactive-color="#F2F2F2" :show-percent="false" :percent="percent.percent">
  280. </u-line-progress>
  281. </view>
  282. <view class="right"> {{ percent.total || '0' }} </view>
  283. </view>
  284. </block>
  285. </view>
  286. </template>
  287. <template v-else>
  288. <view class="empity">
  289. 暂无数据
  290. </view>
  291. </template>
  292. </view>
  293. <!-- 使用建议 -->
  294. <view class="proposal" v-if="weekObj.suggest">
  295. <view class="proposal-title">
  296. 使用建议
  297. </view>
  298. <!-- 建议的文字 -->
  299. <view class="proposal-box">
  300. <u-parse class="ql-editor" :content="weekObj.suggest" />
  301. </view>
  302. </view>
  303. <!-- 底部按钮 -->
  304. <view class="nav-footer">
  305. <view class="footer-item" @click="toHome">
  306. 回到管理端
  307. </view>
  308. <view class="footer-item full" style="margin-left: 24rpx;" @tap="forShare">
  309. <button open-type="share" class="fulls">
  310. 一键转发
  311. </button>
  312. </view>
  313. </view>
  314. </view>
  315. </view>
  316. </template>
  317. <script>
  318. import uParse from '@/components/gaoyia-parse/parse.vue'
  319. export default {
  320. components: {
  321. uParse
  322. },
  323. data() {
  324. return {
  325. nodata: false,
  326. tableHead: [{
  327. title: '顾问',
  328. title2: '项目名称',
  329. style: {
  330. flex: 1
  331. },
  332. style1: {
  333. flex: 2
  334. },
  335. },
  336. {
  337. title: '接待量',
  338. style: {
  339. flex: 1
  340. }
  341. },
  342. {
  343. title: '平均接待时长',
  344. style: {
  345. flex: 2
  346. }
  347. },
  348. {
  349. title: '平均执行率',
  350. style: {
  351. flex: 2
  352. }
  353. },
  354. {
  355. title: '对比上周',
  356. style: {
  357. flex: 1.5
  358. }
  359. },
  360. ],
  361. id: '', // id
  362. needList: ['JDLTop', 'ZXLTop', 'XJTop1'], // 需要转换数组的内容
  363. // 简报
  364. numlist: [{
  365. name: '接待量 (次)',
  366. num: '',
  367. setName: 'receptionCount1',
  368. percent: '',
  369. percentName: 'receptionCountPK',
  370. preNum: '', // 上周数量
  371. preNumName: 'receptionCount2', //
  372. path: '/pages/center/records/index',
  373. pathParms: '?activeTotal=4&refresh=refresh', // 参数
  374. auth: '接待记录', //
  375. }, {
  376. name: '有效接待 (次)',
  377. num: '',
  378. setName: 'activeCustomer1',
  379. percent: '',
  380. percentName: 'activeCustomerPK',
  381. preNum: '', // 上周数量
  382. preNumName: 'activeCustomer2', //
  383. path: '/pages/center/records/index',
  384. pathParms: '?activeTotal=4&refresh=refresh&validInvalid=0', // 参数
  385. auth: '接待记录', //
  386. },
  387. {
  388. name: '平均执行率(%)',
  389. num: '',
  390. setName: 'fraction1',
  391. percent: '',
  392. percentName: 'fractionPK',
  393. preNum: '', // 上周数量
  394. preNumName: 'fraction2', //
  395. path: '/pages/center/records/index',
  396. pathParms: '?activeTotal=4&refresh=refresh&validInvalid=0', // 参数
  397. auth: '接待记录', //
  398. },
  399. {
  400. name: '平均接待时长(分)',
  401. num: '',
  402. setName: 'avgDuration1',
  403. percent: '',
  404. percentName: 'avgDurationPK',
  405. preNum: '', // 上周数量
  406. preNumName: 'avgDuration2', //
  407. path: '/pages/center/records/index',
  408. pathParms: '?activeTotal=4&refresh=refresh&validInvalid=0', // 参数
  409. auth: '接待记录', //
  410. },
  411. {
  412. name: '违禁接待 (次)',
  413. num: '',
  414. setName: 'prohibitedNum1',
  415. percent: '',
  416. percentName: 'prohibitedNumPK',
  417. preNum: '', // 上周数量
  418. preNumName: 'prohibitedNum2', //
  419. class: 'down',
  420. path: '/pages/center/prohibited/index',
  421. pathParms: '?activeTotal=4&violatedStatus=1&refresh=refresh', // 参数
  422. auth: '违禁记录',
  423. },
  424. {
  425. name: '客户画像触达 (次)',
  426. num: '',
  427. setName: 'reachSum1',
  428. percent: '',
  429. percentName: 'reachSumPK',
  430. preNum: '', // 上周数量
  431. preNumName: 'reachSum2', //
  432. path: '/pages/center/Piabodata/Userinsightinto',
  433. pathParms: '?activeTotal=3', // 参数
  434. auth: '销讲数据',
  435. },
  436. {
  437. name: '已标记',
  438. num: '',
  439. setName: 'labelledReceptionNum1',
  440. percent: '',
  441. percentName: 'labelledReceptionNumPK',
  442. preNum: '', // 上周数量
  443. preNumName: 'labelledReceptionNum2', //
  444. path: '/pages/center/records/index',
  445. pathParms: '?activeTotal=4&refresh=refresh&markAdvisor=1', // 参数
  446. auth: '接待记录', //
  447. },
  448. {
  449. name: '未标记',
  450. num: '',
  451. setName: 'unlabelledReceptionNum1',
  452. percent: '',
  453. percentName: 'unlabelledReceptionNumPK',
  454. preNum: '', // 上周数量
  455. preNumName: 'unlabelledReceptionNum2', //
  456. class: 'down',
  457. path: '/pages/center/records/index',
  458. pathParms: '?activeTotal=4&refresh=refresh&markAdvisor=0', // 参数
  459. auth: '接待记录', //
  460. },
  461. ],
  462. // 周报详情
  463. weekObj: {},
  464. projectName: '', // 项目名称
  465. }
  466. },
  467. computed: {
  468. // 获取本地存储的权限列表
  469. menuList() {
  470. return uni.getStorageSync('weapp_session_Menu_data')
  471. },
  472. // 排名最高与最低
  473. rankTop() {
  474. return name => {
  475. let obj = {}
  476. try {
  477. if (this.weekObj.customerInfo1.length && this.weekObj.customerInfo2.length) {
  478. obj.ranktype = (this.weekObj.customerInfo1.length - this.weekObj.customerInfo2.length) >
  479. 0 ? '上升' : '下降'
  480. obj.people = Math.abs(this.weekObj.customerInfo1.length - this.weekObj.customerInfo2
  481. .length)
  482. }
  483. if (this.weekObj.customerInfo1 && this.weekObj.customerInfo1.length > 0) {
  484. obj.topName = this.weekObj.customerInfo1[0].name
  485. obj.topPk = Math.abs(this.weekObj.customerInfo1[0].pk)
  486. obj.lastName = this.weekObj.customerInfo1[this.weekObj.customerInfo1.length - 1].name,
  487. obj.lastPk = Math.abs(this.weekObj.customerInfo1[this.weekObj.customerInfo1.length - 1]
  488. .pk)
  489. }
  490. if (this.weekObj.customerInfo1.length && this.weekObj.customerInfo2.length) {
  491. obj.class = (this.weekObj.customerInfo1.length - this.weekObj.customerInfo2.length) > 0 ?
  492. 'up' : 'down'
  493. }
  494. if (this.weekObj.fractionPK) {
  495. obj.fractionPKName = this.weekObj.fractionPK > 0 ? '上涨' : '下跌'
  496. obj.fractionPK = Math.abs(this.weekObj.fractionPK)
  497. }
  498. if (this.weekObj.XJTop1List && this.weekObj.XJTop1List.length > 0) {
  499. obj.fractionBastName = this.weekObj.XJTop1List[0].title
  500. obj.fractionBastValue = this.weekObj.XJTop1List[0].value
  501. }
  502. if (this.weekObj.XJTop1List && this.weekObj.XJTop1List.length > 0) {
  503. obj.fractionLastName = this.weekObj.XJTop1List[this.weekObj.XJTop1List.length - 1].title
  504. obj.fractionLastValue = this.weekObj.XJTop1List[this.weekObj.XJTop1List.length - 1].value
  505. }
  506. return obj[name] || ''
  507. } catch (e) {
  508. console.log(e)
  509. return ''
  510. }
  511. }
  512. },
  513. // 接待统计
  514. isShowStatistics() {
  515. // return this.rankTop('ranktype') && this.rankTop('class') && this.rankTop('people') && this.rankTop('topName') && this.rankTop('topPk') && this.rankTop('lastName') && this.rankTop('lastPk') && this.weekObj.customerInfo1 && this.weekObj.customerInfo1.length > 0
  516. return this.weekObj.customerInfo1 && this.weekObj.customerInfo1.length > 0
  517. },
  518. isShowXJTop1List() {
  519. // return this.weekObj.XJTop1List && this.weekObj.XJTop1List.length > 0 && this.rankTop('fractionPKName') && this.rankTop('fractionPK') && this.rankTop('fractionBastName') && this.rankTop('fractionBastValue') && this.rankTop('fractionLastName') && this.rankTop('fractionLastName') && this.rankTop('fractionLastValue')
  520. return this.weekObj.XJTop1List && this.weekObj.XJTop1List.length > 0
  521. },
  522. isShowZXLTopList() {
  523. return this.weekObj.ZXLTopList && this.weekObj.ZXLTopList.length > 0
  524. },
  525. isShowJDLTopList() {
  526. return this.weekObj.JDLTopList && this.weekObj.JDLTopList.length > 0
  527. },
  528. },
  529. onLoad(option) {
  530. if (option.id) this.id = option.id
  531. this.getMessage()
  532. },
  533. onShareAppMessage() {
  534. return {
  535. title: `${this.projectName}数智工牌周报`,
  536. path: `/pages/reportExcel/weekReport?id=${this.id}`
  537. }
  538. },
  539. methods: {
  540. tofixed2(time){
  541. if(time){
  542. return time.toFixed(2)
  543. }else{
  544. return 0
  545. }
  546. },
  547. forShare() {
  548. this.$u.get("/zkMessage/shareMessage", {
  549. id: this.id
  550. })
  551. },
  552. // 趋势分析
  553. toTrendAnalysis(name) {
  554. return
  555. let date = this.weekObj.weekDate.split('~')
  556. let [t1, t2] = [date[0], date[1]]
  557. let time1 = new Date(t1.replace(/-/g, '/'))
  558. let time2 = new Date(t2.replace(/-/g, '/'))
  559. time1.setDate(time1.getDate() - 7)
  560. time2.setDate(time2.getDate() - 7)
  561. let res1 = `${time1.getFullYear()}-${time1.getMonth() + 1}-${time1.getDate()}`
  562. let res2 = `${time2.getFullYear()}-${time2.getMonth() + 1}-${time2.getDate()}`
  563. if (this.isPassWatch(name)) {
  564. uni.navigateTo({
  565. url: `/pages/center/Piabodata/TrendAnalysis?type=1&staTime=${date[0]}&endtime=${date[1]}&staTime1=${res1}&endtime1=${res2}`
  566. })
  567. } else {
  568. uni.showToast({
  569. title: '暂无权限',
  570. icon: "none"
  571. })
  572. }
  573. },
  574. // 顾问排名
  575. toEmployeesstatistics(name) {
  576. let date = this.weekObj.weekDate.split('~')
  577. let [t1, t2] = [date[0], date[1]]
  578. if (this.isPassWatch(name)) {
  579. uni.navigateTo({
  580. url: `/pages/center/Piabodata/Employeesstatistics?type=1&staTime=${date[0]}&endtime=${date[1]}`
  581. })
  582. } else {
  583. uni.showToast({
  584. title: '暂无权限',
  585. icon: "none"
  586. })
  587. }
  588. },
  589. // 员工分析
  590. toStaffAnalysis(name, data) {
  591. let obj = this.weekObj.customerInfo1.find(item => {
  592. return item.name == data.title
  593. })
  594. console.log(obj)
  595. let time = this.weekObj.weekDate.split('~')
  596. if (this.isPassWatch(name)) {
  597. uni.navigateTo({
  598. url: `/pages/center/Piabodata/StaffAnalysis?type=1&id=${obj.id}&startDate=${time[0]}&endDate=${time[1]}`
  599. });
  600. } else {
  601. uni.showToast({
  602. title: '暂无权限',
  603. icon: "none"
  604. })
  605. }
  606. },
  607. // 跳转对应页面
  608. toAuthPage(data) {
  609. if (!uni.getStorageSync('weapp_session_login_data').token) {
  610. this.toHome()
  611. return
  612. }
  613. if (this.isPassWatch(data.auth)) {
  614. let time = this.weekObj.weekDate.split('~')
  615. data.pathParms = `${data.pathParms}&staTime=${time[0]}&endtime=${time[1]}`
  616. uni.navigateTo({
  617. url: `${data.path}${data.pathParms}`
  618. })
  619. } else {
  620. uni.showToast({
  621. title: '暂无权限',
  622. icon: "none"
  623. })
  624. }
  625. },
  626. // 是否有权限观看
  627. isPassWatch(name) {
  628. return this.menuList.findIndex(item => {
  629. return item.name == name
  630. }) == -1 ? false : true
  631. },
  632. // 跳转首页
  633. toHome() {
  634. uni.navigateTo({
  635. url: '/pages/index/guide'
  636. })
  637. },
  638. // 获取周报详情
  639. getMessage() {
  640. this.$u.get('/zkMessage/findByProjectId', {
  641. id: this.id
  642. }).then(res => {
  643. // console.log(res)
  644. let data = {}
  645. if (res.zkMessage.content) {
  646. data = JSON.parse(res.zkMessage.content)
  647. this.bubbleSort(data.customerInfo1 || [], 'pk')
  648. this.bubbleSort(data.customerInfo2 || [], 'pk')
  649. data.customerInfo1 && data.customerInfo1.reverse()
  650. data.customerInfo2 && data.customerInfo2.reverse()
  651. this.weekObj = {
  652. ...res.zkMessage,
  653. ...data
  654. }
  655. } else {
  656. this.nodata = true
  657. this.weekObj = {
  658. ...res.zkMessage,
  659. }
  660. }
  661. if (this.weekObj.level1List[0] && this.weekObj.level1List[0].total) {
  662. let max1 = this.weekObj.level1List[0].total || 1
  663. this.weekObj.level1List.forEach(item => {
  664. item.percent = Math.floor((item.total / max1) * 100)
  665. })
  666. } else {
  667. this.weekObj.level1List.forEach(item => {
  668. item.percent = 0
  669. })
  670. }
  671. if (this.weekObj.level2List[0] && this.weekObj.level2List[0].total) {
  672. let max2 = this.weekObj.level2List[0].total || 1
  673. this.weekObj.level2List.forEach(item => {
  674. item.percent = Math.floor((item.total / max2) * 100)
  675. })
  676. } else {
  677. this.weekObj.level2List.forEach(item => {
  678. item.percent = 0
  679. })
  680. }
  681. this.weekObj.createTimeName = this.getTimeLines(this.weekObj.weekDate, 1)
  682. console.log(this.weekObj, 'this.weekObj')
  683. this.projectName = res.projectName
  684. this.numlist.forEach(item => {
  685. if (data[item.setName]) {
  686. item.num = data[item.setName]
  687. }
  688. if (data[item.percentName]) {
  689. item.percent = data[item.percentName]
  690. }
  691. if (data[item.preNumName]) {
  692. item.preNum = data[item.preNumName]
  693. }
  694. })
  695. this.init()
  696. }).catch(e => {
  697. console.log(e)
  698. })
  699. },
  700. // 把对象转成数组并在后续的步骤方便处理
  701. init() {
  702. console.log(this.weekObj, 'this.weekObj')
  703. this.needList.forEach(item => {
  704. console.log(item)
  705. if (this.weekObj[item] && Object.keys(this.weekObj[item]).length > 0) {
  706. this.weekObj[item + 'List'] = [] // 销讲执行
  707. for (let i in this.weekObj[item]) {
  708. this.weekObj[item + 'List'].push({
  709. title: i,
  710. value: this.weekObj[item][i]
  711. })
  712. }
  713. } else {
  714. this.weekObj[item + 'List'] = []
  715. }
  716. })
  717. this.sortInitArr()
  718. },
  719. // 排序对象转换后的数组
  720. sortInitArr() {
  721. this.needList.forEach(item => {
  722. if (this.weekObj[item + 'List']) {
  723. console.log(item)
  724. this.bubbleSort(this.weekObj[item + 'List'])
  725. this.weekObj[item + 'List'] = this.dealData(this.weekObj[item + 'List'])
  726. }
  727. })
  728. this.reverseList()
  729. },
  730. // 反转数组
  731. reverseList() {
  732. this.needList.forEach(item => {
  733. if (this.weekObj[item + 'List']) {
  734. this.weekObj[item + 'List'].reverse()
  735. }
  736. })
  737. console.log(this.weekObj, '12312312312')
  738. },
  739. // 冒泡排序
  740. bubbleSort(arr, keys = 'value') {
  741. console.log(arr, 'keys', keys)
  742. for (let i = 0; i < arr.length - 1; i += 1) {
  743. //通过 arr.length 次把第一位放到最后,完成排序
  744. //-i是因为最后的位置是会动态改变的,当完成一次后,最后一位会变成倒数第二位
  745. for (let j = 0; j < arr.length - 1 - i; j += 1) {
  746. if (arr[j][keys] > arr[j + 1][keys]) {
  747. const temp = arr[j];
  748. arr[j] = arr[j + 1];
  749. arr[j + 1] = temp;
  750. }
  751. }
  752. }
  753. },
  754. // 定义一个公共方法对数据进行处理
  755. dealData(arr) {
  756. // 获取最大值
  757. let num = Math.max.apply(Math, arr.map((o) => {
  758. return o.value
  759. }))
  760. arr.map(item => {
  761. item.values = Math.floor(item.value / num * 100)
  762. })
  763. return arr
  764. },
  765. // 转换时间
  766. getTimeLine(date, type = 1) {
  767. let resu = '--'
  768. if (!date) return resu
  769. let time = new Date(date.replace(/-/g, '/'))
  770. time.setDate(time.getDate() - 7)
  771. let arr = date.split(' ')
  772. let str = arr[0]
  773. let result = str.split('-')
  774. let m = (time.getMonth() + 1) < 10 ? `0${time.getMonth() + 1}` : (time.getMonth() + 1)
  775. let d = time.getDate() < 10 ? `0${time.getDate()}` : time.getDate()
  776. if (type == 1) {
  777. resu = `${m}.${d}-${result[1]}.${result[2]}`
  778. } else {
  779. resu = `${m}月${d}日~${result[1]}月${result[2]}日`
  780. }
  781. return resu
  782. },
  783. // 转换时间
  784. getTimeLines(date) {
  785. if (!date) return ''
  786. let arr = date.split('~')
  787. let str0 = arr[0].split('-')
  788. let str1 = arr[1].split('-')
  789. return `${str0[1]}月${str0[2]}日~${str1[1]}月${str1[2]}日`
  790. },
  791. },
  792. filters: {
  793. // 时间格式转换
  794. fomatDate(date) {
  795. if (!date) return '--'
  796. let arr = date.split(' ')
  797. let str = arr[0]
  798. let result = str.split('-')
  799. return `${result[1]}-${result[2]}`
  800. },
  801. // 转换时间
  802. getTimeLine(date, type = 1) {
  803. if (!date) return '--'
  804. console.log(date.replace(/-/g, '/'))
  805. let time = new Date(date.replace(/-/g, '/'))
  806. time.setDate(time.getDate() - 7)
  807. let arr = date.split(' ')
  808. let str = arr[0]
  809. let result = str.split('-')
  810. let m = (time.getMonth() + 1) < 10 ? `0${time.getMonth() + 1}` : (time.getMonth() + 1)
  811. let d = time.getDate() < 10 ? `0${time.getDate()}` : time.getDate()
  812. if (type == 1) {
  813. return `${m}.${d}-${result[1]}.${result[2]}`
  814. } else {
  815. return `${m}月${d}日~${result[1]}月${result[2]}日`
  816. }
  817. },
  818. // 设置颜色
  819. setColor(index) {
  820. let color = ''
  821. switch (index) {
  822. case 0:
  823. color = '#E7483C';
  824. break;
  825. case 1:
  826. color = '#FF8C13';
  827. break;
  828. case 2:
  829. color = '#FFCC00';
  830. break;
  831. default:
  832. color = '#4FC78F';
  833. break;
  834. }
  835. return color
  836. },
  837. }
  838. }
  839. </script>
  840. <style lang="scss" scoped>
  841. @import '@/static/css/quill/quill.core.css';
  842. @import '@/static/css/quill/quill.snow.css';
  843. @import '@/static/css/quill/quill.bubble.css';
  844. .pages {
  845. width: 100vw;
  846. min-height: 100vh;
  847. display: flex;
  848. flex-direction: column;
  849. background: #F8F8F8;
  850. .nav-header {
  851. flex-shrink: 0;
  852. }
  853. .container {
  854. padding: 30rpx 30rpx 40rpx;
  855. display: flex;
  856. flex-direction: column;
  857. background: #fff;
  858. .c-head-card {
  859. padding: 30rpx;
  860. width: 100%;
  861. min-height: 252rpx;
  862. border: 2rpx solid #000000;
  863. border-radius: 12rpx;
  864. box-shadow: 10rpx 10rpx #2671E2;
  865. display: flex;
  866. flex-direction: column;
  867. .c-title-text {
  868. // position: relative;
  869. flex-grow: 1;
  870. font-size: 48rpx;
  871. font-weight: bold;
  872. color: #303030;
  873. }
  874. .date {
  875. // position: absolute;
  876. // right: 0;
  877. // bottom: 6rpx;
  878. font-size: 30rpx;
  879. color: #303030;
  880. }
  881. .creative-time {
  882. margin: 20rpx 0 0 0;
  883. flex-shrink: 0;
  884. }
  885. }
  886. }
  887. .nodata-box {
  888. width: 750rpx;
  889. flex: 1;
  890. margin: 0 auto;
  891. display: flex;
  892. justify-content: center;
  893. align-items: center;
  894. flex-direction: column;
  895. background-color: #fff;
  896. .img {
  897. width: 400rpx;
  898. height: 400rpx;
  899. }
  900. .text {
  901. text-align: center;
  902. font-size: 28rpx;
  903. font-family: PingFangSC-Regular, PingFang SC;
  904. font-weight: 400;
  905. color: #666666;
  906. line-height: 40rpx;
  907. }
  908. }
  909. .briefing {
  910. background: #fff;
  911. .briefing-title {
  912. padding: 0 30rpx;
  913. height: 90rpx;
  914. display: flex;
  915. align-items: center;
  916. border: 1rpx solid #E0E0E0;
  917. font-size: 32rpx;
  918. font-weight: bold;
  919. }
  920. .briefing-box {
  921. width: 100%;
  922. display: flex;
  923. flex-wrap: wrap;
  924. .briefing-box-item {
  925. padding: 20rpx 30rpx;
  926. width: 50%;
  927. height: 186rpx;
  928. border: 1px solid #E0E0E0;
  929. border-left: none;
  930. border-top: none;
  931. &:nth-of-type(2n) {
  932. border-right: none;
  933. }
  934. .top {
  935. font-size: 28rpx;
  936. }
  937. .middle {
  938. margin: 14rpx 0 12rpx;
  939. font-size: 32rpx;
  940. font-weight: 600;
  941. color: #333333;
  942. }
  943. .bottom {
  944. font-size: 26rpx;
  945. color: #666666;
  946. .b-text {
  947. margin-left: 20rpx;
  948. &.down {
  949. color: #E7483C;
  950. font-size: 34rpx;
  951. }
  952. &.up {
  953. font-size: 34rpx;
  954. color: #43CD80;
  955. }
  956. }
  957. }
  958. }
  959. }
  960. }
  961. .execution-ranking {
  962. margin: 20rpx 0 0 0;
  963. padding: 30rpx;
  964. background: #fff;
  965. .execution-ranking-title {
  966. font-size: 32rpx;
  967. font-weight: bold;
  968. }
  969. .execution-ranking-desc {
  970. margin-top: 20rpx;
  971. font-size: 30rpx;
  972. }
  973. .ranking-box {
  974. margin: 30rpx 0 0 0;
  975. .ranking-item {
  976. margin-bottom: 18rpx;
  977. display: flex;
  978. &:nth-last-of-type(1) {
  979. margin-bottom: 0;
  980. }
  981. .left {
  982. flex-shrink: 0;
  983. width: 270rpx;
  984. font-size: 30rpx;
  985. overflow: hidden;
  986. text-overflow: ellipsis;
  987. white-space: nowrap;
  988. }
  989. .middle {
  990. flex-grow: 1;
  991. }
  992. .right {
  993. flex-shrink: 0;
  994. width: 118rpx;
  995. font-size: 30rpx;
  996. text-align: center;
  997. }
  998. }
  999. }
  1000. }
  1001. .statistics {
  1002. margin: 20rpx 0 0 0;
  1003. background: #fff;
  1004. .statistics-title {
  1005. padding: 30rpx 30rpx 0;
  1006. width: 100%;
  1007. font-size: 32rpx;
  1008. font-weight: bold;
  1009. }
  1010. .statistics-desc {
  1011. padding: 0 30rpx;
  1012. margin-top: 20rpx;
  1013. }
  1014. .table {
  1015. margin: 30rpx 0 0 0;
  1016. .thead {
  1017. padding: 0 30rpx;
  1018. width: 100%;
  1019. height: 72rpx;
  1020. display: flex;
  1021. align-items: center;
  1022. border: 1rpx solid #E0E0E0;
  1023. border-left: none;
  1024. border-right: none;
  1025. font-size: 26rpx;
  1026. .thead-item {
  1027. text-align: center;
  1028. }
  1029. }
  1030. .tbody {
  1031. .tbody-item {
  1032. padding: 0 30rpx;
  1033. display: flex;
  1034. align-items: center;
  1035. height: 72rpx;
  1036. background: #FAFCFF;
  1037. &:nth-of-type(2n) {
  1038. background: #FFFFFF;
  1039. }
  1040. .tbody-items {
  1041. flex: 1;
  1042. display: flex;
  1043. justify-content: center;
  1044. }
  1045. .name {
  1046. justify-content: flex-start;
  1047. overflow: hidden;
  1048. text-overflow: ellipsis;
  1049. white-space: nowrap;
  1050. }
  1051. .time {
  1052. flex: 2;
  1053. }
  1054. .percent {
  1055. flex: 2;
  1056. }
  1057. .week {
  1058. flex: 1.5;
  1059. }
  1060. }
  1061. }
  1062. .tbottom {
  1063. width: 100%;
  1064. height: 72rpx;
  1065. display: flex;
  1066. justify-content: center;
  1067. align-items: center;
  1068. font-size: 30rpx;
  1069. color: #2671E2;
  1070. background: #FAFCFF;
  1071. }
  1072. }
  1073. }
  1074. .guwen-ranking {
  1075. margin: 20rpx 0 0 0;
  1076. width: 100%;
  1077. padding: 30rpx;
  1078. background: #fff;
  1079. .guwen-ranking-title {
  1080. font-size: 32rpx;
  1081. font-weight: 500;
  1082. }
  1083. .guwen-ranking-desc {
  1084. margin-top: 20rpx;
  1085. font-size: 30rpx;
  1086. }
  1087. .ranking-box {
  1088. margin: 30rpx 0 0 0;
  1089. .ranking-item {
  1090. margin-bottom: 18rpx;
  1091. display: flex;
  1092. &:nth-last-of-type(1) {
  1093. margin-bottom: 0;
  1094. }
  1095. .left {
  1096. flex-shrink: 0;
  1097. width: 270rpx;
  1098. font-size: 30rpx;
  1099. overflow: hidden;
  1100. text-overflow: ellipsis;
  1101. white-space: nowrap;
  1102. }
  1103. .middle {
  1104. flex-grow: 1;
  1105. }
  1106. .right {
  1107. flex-shrink: 0;
  1108. width: 118rpx;
  1109. font-size: 30rpx;
  1110. text-align: center;
  1111. }
  1112. }
  1113. }
  1114. }
  1115. .proposal {
  1116. margin: 20rpx 0 0 0;
  1117. padding: 30rpx;
  1118. background: #fff;
  1119. .proposal-title {
  1120. font-size: 32rpx;
  1121. font-weight: 500;
  1122. }
  1123. .proposal-box {
  1124. margin: 30rpx 0 0 0;
  1125. .proposal-item {
  1126. margin: 20rpx 0 0 0;
  1127. display: flex;
  1128. .lside {
  1129. flex-shrink: 0;
  1130. margin: 0 12rpx 0 0;
  1131. width: 44rpx;
  1132. height: 44rpx;
  1133. border-radius: 50%;
  1134. background: #2671E2;
  1135. text-align: center;
  1136. line-height: 44rpx;
  1137. color: #fff;
  1138. }
  1139. .rside {
  1140. .rside-title {
  1141. font-size: 32rpx;
  1142. }
  1143. .rside-box {
  1144. margin: 16rpx 0 0 0;
  1145. }
  1146. }
  1147. }
  1148. }
  1149. }
  1150. .nav-footer {
  1151. position: sticky;
  1152. bottom: 0;
  1153. padding: 32rpx;
  1154. width: 100%;
  1155. display: flex;
  1156. justify-content: center;
  1157. background: #fff;
  1158. .footer-item {
  1159. flex: 1;
  1160. height: 88rpx;
  1161. display: flex;
  1162. justify-content: center;
  1163. align-items: center;
  1164. color: #2671E2;
  1165. border: 2rpx solid #2671E2;
  1166. border-radius: 8rpx;
  1167. overflow: hidden;
  1168. font-size: 32rpx;
  1169. &.full {
  1170. background: #2671E2;
  1171. color: #fff;
  1172. .fulls {
  1173. box-sizing: border-box;
  1174. width: 100%;
  1175. height: 100%;
  1176. background: transparent;
  1177. color: #fff;
  1178. font-size: 32rpx;
  1179. font-weight: normal;
  1180. line-height: 88rpx;
  1181. }
  1182. }
  1183. }
  1184. }
  1185. .up {
  1186. color: #43CD80 !important;
  1187. }
  1188. .down {
  1189. color: #E6273A !important;
  1190. }
  1191. .empity {
  1192. width: 100%;
  1193. height: 300rpx;
  1194. display: flex;
  1195. justify-content: center;
  1196. align-items: center;
  1197. font-size: 28rpx;
  1198. color: #666666;
  1199. }
  1200. }
  1201. </style>