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.
 
 
 

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