You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 

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