AI销管
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.
 
 
 
 

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