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.
 
 
 

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