25개 이상의 토픽을 선택하실 수 없습니다. Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 

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