liumin
/
NewZkgj
1
0
포크 0
코드 이슈 0 풀 리퀘스트 0 릴리즈 0 위키 활동
25개 이상의 토픽을 선택하실 수 없습니다. Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
381 커밋
7 브랜치
28 MiB
 
 
 
트리: 2eac6a679f
브랜치 태그
${ item.name }
${ searchTerm } 브랜치 생성
from '2eac6a679f'
${ noResults }
NewZkgj/pages/reportExcel/weekReport.vue

1173 lines
27 KiB
Raw Blame 히스토리 

  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. 

  18. 		<!-- 简报 -->

  19. 		<view class="briefing">

  20. 			<view class="briefing-title">

  21. 				简报

  22. 			</view>

  23. 			<!-- 简报表格部分 -->

  24. 			<view class="briefing-box">

  25. 				<block v-for="(data, index) in numlist" :key="index">

  26. 					<view class="briefing-box-item" @click="toAuthPage(data)">

  27. 						<view class="tops" :class="[data.class || '']">

  28. 							{{ data.name }}

  29. 						</view>

  30. 						<view class="middle" :class="[data.class || '']">

  31. 							{{ data.num || 0 }}

  32. 						</view>

  33. 						<view class="bottom">

  34. 							对比上周: {{ data.preNum || 0 }}

  35. 							<text class="b-text"

  36. 								:class="{up: data.percent > 0, down: data.percent < 0}">{{ data.percent || '0' }}</text>

  37. 							<template v-if="data.percent != 0">

  38. 								<text style="margin-left: 8rpx;font-size: 34rpx;font-weight: bold;"

  39. 									:class="{up: data.percent > 0, down: data.percent < 0}">{{ data.percent > 0 ? '↑' : '↓' }}</text>

  40. 							</template>

  41. 						</view>

  42. 					</view>

  43. 				</block>

  44. 			</view>

  45. 		</view>

  46. 

  47. 

  48. 		<!-- 销讲场景执行排名 -->

  49. 		<view class="execution-ranking">

  50. 			<view class="execution-ranking-title">

  51. 				销讲场景执行排名

  52. 			</view>

  53. 			<template v-if="isShowXJTop1List">

  54. 				<view class="execution-ranking-desc" v-if="false">

  55. 					<text>销讲场景平均执行对比上周</text>

  56. 					<text>{{ rankTop('fractionPKName') }}</text>

  57. 					<text>{{ rankTop('fractionPK') }}</text>

  58. 					<text>%</text>

  59. 					<template v-if="rankTop('fractionBastValue') > 0">

  60. 						<text>，其中【{{ rankTop('fractionBastName') }}】最强为</text>

  61. 						<text class="up">{{ rankTop('fractionBastValue') }}</text>

  62. 						<text>%</text>

  63. 					</template>

  64. 					<template v-if="rankTop('fractionLastValue') < 0">

  65. 						<text>，【{{ rankTop('fractionLastName') }}】执行最弱为</text>

  66. 						<text class="down">{{ rankTop('fractionLastValue') }}</text>

  67. 						<text>%;</text>

  68. 					</template>

  69. 				</view>

  70. 

  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. 		<!-- 接待统计 -->

  94. 		<view class="statistics">

  95. 			<view class="statistics-title">

  96. 				接待统计

  97. 			</view>

  98. 			<template v-if="isShowStatistics">

  99. 				<view class="statistics-desc" v-if="false">

  100. 					<text>

  101. 						顾问平均执行率对比上周

  102. 					</text>

  103. 					<text>

  104. 						{{ rankTop('ranktype') || '' }}

  105. 					</text>

  106. 					<text :class="[rankTop('class')]">{{ rankTop('people') || '' }}</text>

  107. 					<text class="">

  108. 						人，其中{{ rankTop('topName') || '' }}上升

  109. 					</text>

  110. 					<text class="up">{{ rankTop('topPk') || '0' }}</text>

  111. 					<text class="">

  112. 						%为最高，{{ rankTop('lastName') || '' }}下降

  113. 					</text>

  114. 					<text class="down">{{ rankTop('lastPk') || '0' }}</text>

  115. 					<text class="">

  116. 						%降幅最大。

  117. 					</text>

  118. 				</view>

  119. 				<view class="table">

  120. 					<view class="thead">

  121. 						<block v-for="(head, headIndex) in tableHead" :key="headIndex">

  122. 							<view class="thead-item" :style="[head.style]">

  123. 								{{ head.title }}

  124. 							</view>

  125. 						</block>

  126. 					</view>

  127. 

  128. 					<view class="tbody" @click="toEmployeesstatistics('顾问排名')">

  129. 						<block v-for="(data, index) in weekObj.customerInfo1" :key="index">

  130. 							<view class="tbody-item">

  131. 								<view class="tbody-items name">{{ data.name }}</view>

  132. 								<view class="tbody-items nums">{{ data.activeCustomer }}</view>

  133. 								<view class="tbody-items time">{{ data.avgDuration }}m</view>

  134. 								<view class="tbody-items percent">{{ data.fraction }}%</view>

  135. 								<view class="tbody-items week" :class="{up: data.pk > 0, down: data.pk < 0}">

  136. 									{{ data.pk > 0 ? `+${data.pk}` : data.pk }}%

  137. 								</view>

  138. 							</view>

  139. 						</block>

  140. 					</view>

  141. 				</view>

  142. 			</template>

  143. 

  144. 			<template v-else>

  145. 				<view class="empity">

  146. 					暂无数据

  147. 				</view>

  148. 			</template>

  149. 		</view>

  150. 

  151. 		<!-- 顾问销讲执行率排名 -->

  152. 		<view class="guwen-ranking">

  153. 			<view class="guwen-ranking-title">

  154. 				顾问销讲执行率排名（TOP10）

  155. 			</view>

  156. 			<template v-if="isShowZXLTopList">

  157. 				<!-- 排名百分比列表 -->

  158. 				<view class="ranking-box">

  159. 					<block v-for="(percent, index) in weekObj.ZXLTopList" :key="index">

  160. 						<view class="ranking-item" @click="toStaffAnalysis('销讲数据', percent)">

  161. 							<view class="left">{{ percent.title }}</view>

  162. 							<view class="middle">

  163. 								<u-line-progress :active-color="$options.filters.setColor(index)"

  164. 									inactive-color="#F2F2F2" :show-percent="false" :percent="percent.values">

  165. 								</u-line-progress>

  166. 							</view>

  167. 							<view class="right"> {{ percent.value || '0' }} %</view>

  168. 						</view>

  169. 					</block>

  170. 				</view>

  171. 			</template>

  172. 

  173. 			<template v-else>

  174. 				<view class="empity">

  175. 					暂无数据

  176. 				</view>

  177. 			</template>

  178. 		</view>

  179. 

  180. 		<!-- 顾问接待量排名 -->

  181. 		<view class="guwen-ranking">

  182. 			<view class="guwen-ranking-title">

  183. 				顾问接待量排名（TOP10）

  184. 			</view>

  185. 

  186. 			<template v-if="isShowJDLTopList">

  187. 				<!-- 排名百分比列表 -->

  188. 				<view class="ranking-box">

  189. 					<block v-for="(percent, index) in weekObj.JDLTopList" :key="index">

  190. 						<view class="ranking-item" @click="toStaffAnalysis('销讲数据', percent)">

  191. 							<view class="left">{{ percent.title }}</view>

  192. 							<view class="middle">

  193. 								<u-line-progress :active-color="$options.filters.setColor(index)"

  194. 									inactive-color="#F2F2F2" :show-percent="false" :percent="percent.values">

  195. 								</u-line-progress>

  196. 							</view>

  197. 							<view class="right"> {{ percent.value || '0' }} </view>

  198. 						</view>

  199. 					</block>

  200. 				</view>

  201. 			</template>

  202. 

  203. 			<template v-else>

  204. 				<view class="empity">

  205. 					暂无数据

  206. 				</view>

  207. 			</template>

  208. 		</view>

  209. 

  210. 		<!-- 使用建议 -->

  211. 		<view class="proposal" v-if="weekObj.suggest">

  212. 			<view class="proposal-title">

  213. 				使用建议

  214. 			</view>

  215. 			<!-- 建议的文字 -->

  216. 			<view class="proposal-box">

  217. 				<u-parse class="ql-editor" :content="weekObj.suggest" />

  218. 			</view>

  219. 		</view>

  220. 

  221. 		<!-- 底部按钮 -->

  222. 		<view class="nav-footer">

  223. 

  224. 			<view class="footer-item" @click="toHome">

  225. 				回到管理端

  226. 			</view>

  227. 

  228. 			<view class="footer-item full" style="margin-left: 24rpx;">

  229. 				<button open-type="share" class="fulls">

  230. 					一键转发

  231. 				</button>

  232. 			</view>

  233. 		</view>

  234. 	</view>

  235. </template>

  236. 

  237. <script>

  238. 	import uParse from '@/components/gaoyia-parse/parse.vue'

  239. 	export default {

  240. 

  241. 		components: {

  242. 			uParse

  243. 		},

  244. 		data() {

  245. 			return {

  246. 				tableHead: [{

  247. 						title: '顾问',

  248. 						style: {

  249. 							flex: 1

  250. 						}

  251. 					},

  252. 					{

  253. 						title: '接待量',

  254. 						style: {

  255. 							flex: 1

  256. 						}

  257. 					},

  258. 					{

  259. 						title: '平均接待时长',

  260. 						style: {

  261. 							flex: 2

  262. 						}

  263. 					},

  264. 					{

  265. 						title: '平均执行率',

  266. 						style: {

  267. 							flex: 2

  268. 						}

  269. 					},

  270. 					{

  271. 						title: '对比上周',

  272. 						style: {

  273. 							flex: 1.5

  274. 						}

  275. 					},

  276. 				],

  277. 				id: '', // id

  278. 

  279. 				needList: ['JDLTop', 'ZXLTop', 'XJTop1'], // 需要转换数组的内容

  280. 

  281. 				// 简报

  282. 				numlist: [{

  283. 						name: '接待量 (次)',

  284. 						num: '',

  285. 						setName: 'receptionCount1',

  286. 						percent: '',

  287. 						percentName: 'receptionCountPK',

  288. 						preNum: '', // 上周数量

  289. 						preNumName: 'receptionCount2', // 

  290. 						path: '/pages/center/records/index',

  291. 						pathParms: '?activeTotal=4&refresh=refresh', // 参数

  292. 						auth: '接待记录', // 

  293. 

  294. 					}, {

  295. 						name: '有效接待 (次)',

  296. 						num: '',

  297. 						setName: 'activeCustomer1',

  298. 						percent: '',

  299. 						percentName: 'activeCustomerPK',

  300. 						preNum: '', // 上周数量

  301. 						preNumName: 'activeCustomer2', // 

  302. 						path: '/pages/center/records/index',

  303. 						pathParms: '?activeTotal=4&refresh=refresh&validInvalid=0', // 参数

  304. 						auth: '接待记录', // 

  305. 					},

  306. 					{

  307. 						name: '平均执行率（%）',

  308. 						num: '',

  309. 						setName: 'fraction1',

  310. 						percent: '',

  311. 						percentName: 'fractionPK',

  312. 						preNum: '', // 上周数量

  313. 						preNumName: 'fraction2', // 

  314. 						path: '/pages/center/records/index',

  315. 						pathParms: '?activeTotal=4&refresh=refresh&validInvalid=0', // 参数

  316. 						auth: '接待记录', // 

  317. 					},

  318. 					{

  319. 						name: '平均接待时长（分）',

  320. 						num: '',

  321. 						setName: 'avgDuration1',

  322. 						percent: '',

  323. 						percentName: 'avgDurationPK',

  324. 						preNum: '', // 上周数量

  325. 						preNumName: 'avgDuration2', // 

  326. 						path: '/pages/center/records/index',

  327. 						pathParms: '?activeTotal=4&refresh=refresh&validInvalid=0', // 参数

  328. 						auth: '接待记录', // 

  329. 					},

  330. 					{

  331. 						name: '违禁接待 (次)',

  332. 						num: '',

  333. 						setName: 'prohibitedNum1',

  334. 						percent: '',

  335. 						percentName: 'prohibitedNumPK',

  336. 						preNum: '', // 上周数量

  337. 						preNumName: 'prohibitedNum2', // 

  338. 						class: 'down',

  339. 						path: '/pages/center/prohibited/index',

  340. 						pathParms: '?activeTotal=4&violatedStatus=1&refresh=refresh', // 参数

  341. 						auth: '违禁记录',

  342. 					},

  343. 					{

  344. 						name: '客户画像触达 (次)',

  345. 						num: '',

  346. 						setName: 'reachSum1',

  347. 						percent: '',

  348. 						percentName: 'reachSumPK',

  349. 						preNum: '', // 上周数量

  350. 						preNumName: 'reachSum2', // 

  351. 						path: '/pages/center/Piabodata/Userinsightinto',

  352. 						pathParms: '?activeTotal=3', // 参数

  353. 						auth: '销讲数据',

  354. 					},

  355. 					{

  356. 						name: '已标记',

  357. 						num: '',

  358. 						setName: 'labelledReceptionNum1',

  359. 						percent: '',

  360. 						percentName: 'labelledReceptionNumPK',

  361. 						preNum: '', // 上周数量

  362. 						preNumName: 'labelledReceptionNum2', // 

  363. 						path: '/pages/center/records/index',

  364. 						pathParms: '?activeTotal=4&refresh=refresh&markAdvisor=1', // 参数

  365. 						auth: '接待记录', // 

  366. 					},

  367. 					{

  368. 						name: '未标记',

  369. 						num: '',

  370. 						setName: 'unlabelledReceptionNum1',

  371. 						percent: '',

  372. 						percentName: 'unlabelledReceptionNumPK',

  373. 						preNum: '', // 上周数量

  374. 						preNumName: 'unlabelledReceptionNum2', // 

  375. 						class: 'down',

  376. 						path: '/pages/center/records/index',

  377. 						pathParms: '?activeTotal=4&refresh=refresh&markAdvisor=0', // 参数

  378. 						auth: '接待记录', // 

  379. 					},

  380. 				],

  381. 

  382. 				// 周报详情

  383. 				weekObj: {},

  384. 				projectName: '', // 项目名称

  385. 			}

  386. 		},

  387. 

  388. 

  389. 		computed: {

  390. 			// 获取本地存储的权限列表

  391. 			menuList() {

  392. 				return uni.getStorageSync('weapp_session_Menu_data')

  393. 			},

  394. 

  395. 			// 排名最高与最低

  396. 			rankTop() {

  397. 				return name => {

  398. 					let obj = {}

  399. 					try {

  400. 

  401. 						if (this.weekObj.customerInfo1.length && this.weekObj.customerInfo2.length) {

  402. 							obj.ranktype = (this.weekObj.customerInfo1.length - this.weekObj.customerInfo2.length) >

  403. 								0 ? '上升' : '下降'

  404. 							obj.people = Math.abs(this.weekObj.customerInfo1.length - this.weekObj.customerInfo2

  405. 								.length)

  406. 						}

  407. 

  408. 						if (this.weekObj.customerInfo1 && this.weekObj.customerInfo1.length > 0) {

  409. 							obj.topName = this.weekObj.customerInfo1[0].name

  410. 							obj.topPk = Math.abs(this.weekObj.customerInfo1[0].pk)

  411. 							obj.lastName = this.weekObj.customerInfo1[this.weekObj.customerInfo1.length - 1].name,

  412. 								obj.lastPk = Math.abs(this.weekObj.customerInfo1[this.weekObj.customerInfo1.length - 1]

  413. 									.pk)

  414. 						}

  415. 

  416. 						if (this.weekObj.customerInfo1.length && this.weekObj.customerInfo2.length) {

  417. 							obj.class = (this.weekObj.customerInfo1.length - this.weekObj.customerInfo2.length) > 0 ?

  418. 								'up' : 'down'

  419. 						}

  420. 

  421. 						if (this.weekObj.fractionPK) {

  422. 							obj.fractionPKName = this.weekObj.fractionPK > 0 ? '上涨' : '下跌'

  423. 							obj.fractionPK = Math.abs(this.weekObj.fractionPK)

  424. 						}

  425. 

  426. 						if (this.weekObj.XJTop1List && this.weekObj.XJTop1List.length > 0) {

  427. 							obj.fractionBastName = this.weekObj.XJTop1List[0].title

  428. 							obj.fractionBastValue = this.weekObj.XJTop1List[0].value

  429. 						}

  430. 

  431. 						if (this.weekObj.XJTop1List && this.weekObj.XJTop1List.length > 0) {

  432. 							obj.fractionLastName = this.weekObj.XJTop1List[this.weekObj.XJTop1List.length - 1].title

  433. 							obj.fractionLastValue = this.weekObj.XJTop1List[this.weekObj.XJTop1List.length - 1].value

  434. 						}

  435. 

  436. 						return obj[name] || ''

  437. 					} catch (e) {

  438. 						console.log(e)

  439. 						return ''

  440. 					}

  441. 				}

  442. 			},

  443. 

  444. 			// 接待统计

  445. 			isShowStatistics() {

  446. 				// 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

  447. 				return this.weekObj.customerInfo1 && this.weekObj.customerInfo1.length > 0

  448. 			},

  449. 

  450. 			isShowXJTop1List() {

  451. 				// 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')

  452. 				return this.weekObj.XJTop1List && this.weekObj.XJTop1List.length > 0

  453. 			},

  454. 

  455. 			isShowZXLTopList() {

  456. 				return this.weekObj.ZXLTopList && this.weekObj.ZXLTopList.length > 0

  457. 			},

  458. 

  459. 			isShowJDLTopList() {

  460. 				return this.weekObj.JDLTopList && this.weekObj.JDLTopList.length > 0

  461. 			},

  462. 		},

  463. 

  464. 		onLoad(option) {

  465. 			if (option.id) this.id = option.id

  466. 			this.getMessage()

  467. 		},

  468. 

  469. 

  470. 		onShareAppMessage() {

  471. 			return {

  472. 				title: `${this.projectName}数智工牌周报`,

  473. 				path: `/pages/reportExcel/weekReport?id=${this.id}`

  474. 			}

  475. 		},

  476. 

  477. 		methods: {

  478. 			// 趋势分析

  479. 			toTrendAnalysis(name) {

  480. 				return

  481. 				let date = this.weekObj.weekDate.split('~')

  482. 				let [t1, t2] = [date[0], date[1]]

  483. 				let time1 = new Date(t1.replace(/-/g, '/'))

  484. 				let time2 = new Date(t2.replace(/-/g, '/'))

  485. 				time1.setDate(time1.getDate() - 7)

  486. 				time2.setDate(time2.getDate() - 7)

  487. 				let res1 = `${time1.getFullYear()}-${time1.getMonth() + 1}-${time1.getDate()}`

  488. 				let res2 = `${time2.getFullYear()}-${time2.getMonth() + 1}-${time2.getDate()}`

  489. 				if (this.isPassWatch(name)) {

  490. 					uni.navigateTo({

  491. 						url: `/pages/center/Piabodata/TrendAnalysis?type=1&staTime=${date[0]}&endtime=${date[1]}&staTime1=${res1}&endtime1=${res2}`

  492. 					})

  493. 				} else {

  494. 					uni.showToast({

  495. 						title: '暂无权限',

  496. 						icon: "none"

  497. 					})

  498. 				}

  499. 			},

  500. 

  501. 			// 顾问排名

  502. 			toEmployeesstatistics(name) {

  503. 				let date = this.weekObj.weekDate.split('~')

  504. 				let [t1, t2] = [date[0], date[1]]

  505. 				if (this.isPassWatch(name)) {

  506. 					uni.navigateTo({

  507. 						url: `/pages/center/Piabodata/Employeesstatistics?type=1&staTime=${date[0]}&endtime=${date[1]}`

  508. 					})

  509. 				} else {

  510. 					uni.showToast({

  511. 						title: '暂无权限',

  512. 						icon: "none"

  513. 					})

  514. 				}

  515. 			},

  516. 

  517. 			// 员工分析

  518. 			toStaffAnalysis(name, data) {

  519. 				let obj = this.weekObj.customerInfo1.find(item => {return item.name == data.title})

  520. 				console.log(obj)

  521. 				let time = this.weekObj.weekDate.split('~')

  522. 				if (this.isPassWatch(name)) {

  523. 					uni.navigateTo({

  524. 						url: `/pages/center/Piabodata/StaffAnalysis?type=1&id=${obj.id}&startDate=${time[0]}&endDate=${time[1]}`

  525. 					});

  526. 				} else {

  527. 					uni.showToast({

  528. 						title: '暂无权限',

  529. 						icon: "none"

  530. 					})

  531. 				}

  532. 			},

  533. 

  534. 			// 跳转对应页面

  535. 			toAuthPage(data) {

  536. 				if (!uni.getStorageSync('weapp_session_login_data').token) {

  537. 					this.toHome()

  538. 					return

  539. 				}

  540. 				if (this.isPassWatch(data.auth)) {

  541. 					let time = this.weekObj.weekDate.split('~')

  542. 					data.pathParms = `${data.pathParms}&staTime=${time[0]}&endtime=${time[1]}`

  543. 					uni.navigateTo({

  544. 						url: `${data.path}${data.pathParms}`

  545. 					})

  546. 				} else {

  547. 					uni.showToast({

  548. 						title: '暂无权限',

  549. 						icon: "none"

  550. 					})

  551. 				}

  552. 			},

  553. 

  554. 

  555. 			// 是否有权限观看

  556. 			isPassWatch(name) {

  557. 				return this.menuList.findIndex(item => {

  558. 					return item.name == name

  559. 				}) == -1 ? false : true

  560. 			},

  561. 

  562. 			// 跳转首页

  563. 			toHome() {

  564. 				uni.navigateTo({

  565. 					url: '/pages/index/guide'

  566. 				})

  567. 			},

  568. 			// 获取周报详情

  569. 			getMessage() {

  570. 				this.$u.get('/zkMessage/findByProjectId', {

  571. 					id: this.id

  572. 				}).then(res => {

  573. 					console.log(res)

  574. 					let data = JSON.parse(res.zkMessage.content)

  575. 					console.log(data)

  576. 					this.bubbleSort(data.customerInfo1, 'pk')

  577. 					this.bubbleSort(data.customerInfo2, 'pk')

  578. 					data.customerInfo1.reverse()

  579. 					data.customerInfo2.reverse()

  580. 

  581. 					this.weekObj = {

  582. 						...res.zkMessage,

  583. 						...data

  584. 					}

  585. 					this.weekObj.createTimeName = this.getTimeLines(this.weekObj.weekDate, 1)

  586. 					console.log(this.weekObj, 'this.weekObj')

  587. 					this.projectName = res.projectName

  588. 					this.numlist.forEach(item => {

  589. 						if (data[item.setName]) {

  590. 							item.num = data[item.setName]

  591. 						}

  592. 						if (data[item.percentName]) {

  593. 							item.percent = data[item.percentName]

  594. 						}

  595. 						if (data[item.preNumName]) {

  596. 							item.preNum = data[item.preNumName]

  597. 						}

  598. 					})

  599. 					this.init()

  600. 				}).catch(e => {

  601. 					console.log(e)

  602. 				})

  603. 			},

  604. 

  605. 

  606. 			// 把对象转成数组并在后续的步骤方便处理

  607. 			init() {

  608. 				console.log(this.weekObj, 'this.weekObj')

  609. 				this.needList.forEach(item => {

  610. 					if (this.weekObj[item] && Object.keys(this.weekObj[item]).length > 0) {

  611. 						this.weekObj[item + 'List'] = [] // 销讲执行

  612. 						for (let i in this.weekObj[item]) {

  613. 							this.weekObj[item + 'List'].push({

  614. 								title: i,

  615. 								value: this.weekObj[item][i]

  616. 							})

  617. 						}

  618. 					}

  619. 				})

  620. 				this.sortInitArr()

  621. 			},

  622. 

  623. 			// 排序对象转换后的数组

  624. 			sortInitArr() {

  625. 				this.needList.forEach(item => {

  626. 					if (this.weekObj[item + 'List']) {

  627. 						this.bubbleSort(this.weekObj[item + 'List'])

  628. 						this.weekObj[item + 'List'] = this.dealData(this.weekObj[item + 'List'])

  629. 					}

  630. 				})

  631. 

  632. 				this.reverseList()

  633. 			},

  634. 

  635. 			// 反转数组

  636. 			reverseList() {

  637. 				this.needList.forEach(item => {

  638. 					if (this.weekObj[item + 'List']) {

  639. 						this.weekObj[item + 'List'].reverse()

  640. 					}

  641. 				})

  642. 				console.log(this.weekObj, '12312312312')

  643. 			},

  644. 

  645. 			// 冒泡排序

  646. 			bubbleSort(arr, keys = 'value') {

  647. 				for (let i = 0; i < arr.length - 1; i += 1) {

  648. 					//通过 arr.length 次把第一位放到最后,完成排序

  649. 					//-i是因为最后的位置是会动态改变的，当完成一次后,最后一位会变成倒数第二位 

  650. 					for (let j = 0; j < arr.length - 1 - i; j += 1) {

  651. 						if (arr[j][keys] > arr[j + 1][keys]) {

  652. 							const temp = arr[j];

  653. 							arr[j] = arr[j + 1];

  654. 							arr[j + 1] = temp;

  655. 						}

  656. 					}

  657. 				}

  658. 			},

  659. 			// 定义一个公共方法对数据进行处理

  660. 			dealData(arr) {

  661. 				// 获取最大值

  662. 				let num = Math.max.apply(Math, arr.map((o) => {

  663. 					return o.value

  664. 				}))

  665. 				arr.map(item => {

  666. 					item.values = Math.floor(item.value / num * 100)

  667. 				})

  668. 				return arr

  669. 

  670. 			},

  671. 

  672. 			// 转换时间

  673. 			getTimeLine(date, type = 1) {

  674. 				let resu = '--'

  675. 				if (!date) return resu

  676. 				let time = new Date(date.replace(/-/g, '/'))

  677. 				time.setDate(time.getDate() - 7)

  678. 				let arr = date.split(' ')

  679. 				let str = arr[0]

  680. 				let result = str.split('-')

  681. 

  682. 				let m = (time.getMonth() + 1) < 10 ? `0${time.getMonth() + 1}` : (time.getMonth() + 1)

  683. 				let d = time.getDate() < 10 ? `0${time.getDate()}` : time.getDate()

  684. 

  685. 				if (type == 1) {

  686. 					resu = `${m}.${d}-${result[1]}.${result[2]}`

  687. 				} else {

  688. 					resu = `${m}月${d}日～${result[1]}月${result[2]}日`

  689. 				}

  690. 				return resu

  691. 			},

  692. 

  693. 			// 转换时间

  694. 			getTimeLines(date) {

  695. 				if (!date) return ''

  696. 				let arr = date.split('~')

  697. 				let str0 = arr[0].split('-')

  698. 				let str1 = arr[1].split('-')

  699. 

  700. 				return `${str0[1]}月${str0[2]}日～${str1[1]}月${str1[2]}日`

  701. 			},

  702. 

  703. 

  704. 		},

  705. 

  706. 		filters: {

  707. 			// 时间格式转换

  708. 			fomatDate(date) {

  709. 				if (!date) return '--'

  710. 				let arr = date.split(' ')

  711. 				let str = arr[0]

  712. 				let result = str.split('-')

  713. 				return `${result[1]}-${result[2]}`

  714. 			},

  715. 

  716. 			// 转换时间

  717. 			getTimeLine(date, type = 1) {

  718. 				if (!date) return '--'

  719. 				console.log(date.replace(/-/g, '/'))

  720. 				let time = new Date(date.replace(/-/g, '/'))

  721. 				time.setDate(time.getDate() - 7)

  722. 				let arr = date.split(' ')

  723. 				let str = arr[0]

  724. 				let result = str.split('-')

  725. 

  726. 				let m = (time.getMonth() + 1) < 10 ? `0${time.getMonth() + 1}` : (time.getMonth() + 1)

  727. 				let d = time.getDate() < 10 ? `0${time.getDate()}` : time.getDate()

  728. 

  729. 				if (type == 1) {

  730. 					return `${m}.${d}-${result[1]}.${result[2]}`

  731. 				} else {

  732. 					return `${m}月${d}日～${result[1]}月${result[2]}日`

  733. 				}

  734. 			},

  735. 

  736. 			// 设置颜色

  737. 			setColor(index) {

  738. 				let color = ''

  739. 				switch (index) {

  740. 					case 0:

  741. 						color = '#E7483C';

  742. 						break;

  743. 					case 1:

  744. 						color = '#FF8C13';

  745. 						break;

  746. 					case 2:

  747. 						color = '#FFCC00';

  748. 						break;

  749. 					default:

  750. 						color = '#4FC78F';

  751. 						break;

  752. 				}

  753. 				return color

  754. 			},

  755. 		}

  756. 	}

  757. </script>

  758. 

  759. <style lang="scss" scoped>

  760. 	@import '@/static/css/quill/quill.core.css';

  761. 	@import '@/static/css/quill/quill.snow.css';

  762. 	@import '@/static/css/quill/quill.bubble.css';

  763. 

  764. 	.pages {

  765. 		width: 100vw;

  766. 		min-height: 100vh;

  767. 		display: flex;

  768. 		flex-direction: column;

  769. 		background: #F8F8F8;

  770. 

  771. 		.nav-header {

  772. 			flex-shrink: 0;

  773. 		}

  774. 

  775. 		.container {

  776. 			padding: 30rpx 30rpx 40rpx;

  777. 			display: flex;

  778. 			flex-direction: column;

  779. 			background: #fff;

  780. 

  781. 			.c-head-card {

  782. 				padding: 30rpx;

  783. 				width: 100%;

  784. 				min-height: 252rpx;

  785. 				border: 2rpx solid #000000;

  786. 				border-radius: 12rpx;

  787. 				box-shadow: 10rpx 10rpx #2671E2;

  788. 				display: flex;

  789. 				flex-direction: column;

  790. 

  791. 				.c-title-text {

  792. 					// position: relative;

  793. 					flex-grow: 1;

  794. 					font-size: 48rpx;

  795. 					font-weight: bold;

  796. 					color: #303030;

  797. 				}

  798. 

  799. 				.date {

  800. 					// position: absolute;

  801. 					// right: 0;

  802. 					// bottom: 6rpx;

  803. 					font-size: 30rpx;

  804. 					color: #303030;

  805. 				}

  806. 

  807. 				.creative-time {

  808. 					margin: 20rpx 0 0 0;

  809. 					flex-shrink: 0;

  810. 				}

  811. 			}

  812. 		}

  813. 

  814. 

  815. 

  816. 		.briefing {

  817. 			background: #fff;

  818. 

  819. 			.briefing-title {

  820. 				padding: 0 30rpx;

  821. 				height: 90rpx;

  822. 				display: flex;

  823. 				align-items: center;

  824. 				border: 1rpx solid #E0E0E0;

  825. 				font-size: 32rpx;

  826. 				font-weight: bold;

  827. 			}

  828. 

  829. 			.briefing-box {

  830. 				width: 100%;

  831. 				display: flex;

  832. 				flex-wrap: wrap;

  833. 

  834. 				.briefing-box-item {

  835. 					padding: 20rpx 30rpx;

  836. 					width: 50%;

  837. 					height: 186rpx;

  838. 					border: 1px solid #E0E0E0;

  839. 					border-left: none;

  840. 					border-top: none;

  841. 

  842. 					&:nth-of-type(2n) {

  843. 						border-right: none;

  844. 					}

  845. 

  846. 					.top {

  847. 						font-size: 28rpx;

  848. 					}

  849. 

  850. 					.middle {

  851. 						margin: 14rpx 0 12rpx;

  852. 						font-size: 32rpx;

  853. 						font-weight: 600;

  854. 						color: #333333;

  855. 					}

  856. 

  857. 					.bottom {

  858. 						font-size: 26rpx;

  859. 						color: #666666;

  860. 

  861. 						.b-text {

  862. 							margin-left: 20rpx;

  863. 

  864. 

  865. 							&.down {

  866. 								color: #43CD80;

  867. 								font-size: 34rpx;

  868. 							}

  869. 

  870. 							&.up {

  871. 								font-size: 34rpx;

  872. 								color: #E7483C;

  873. 							}

  874. 						}

  875. 					}

  876. 				}

  877. 			}

  878. 		}

  879. 

  880. 

  881. 		.execution-ranking {

  882. 			margin: 20rpx 0 0 0;

  883. 			padding: 30rpx;

  884. 			background: #fff;

  885. 

  886. 			.execution-ranking-title {

  887. 				font-size: 32rpx;

  888. 				font-weight: bold;

  889. 			}

  890. 

  891. 			.execution-ranking-desc {

  892. 				margin-top: 20rpx;

  893. 				font-size: 30rpx;

  894. 			}

  895. 

  896. 			.ranking-box {

  897. 				margin: 30rpx 0 0 0;

  898. 

  899. 				.ranking-item {

  900. 					margin-bottom: 18rpx;

  901. 					display: flex;

  902. 

  903. 					&:nth-last-of-type(1) {

  904. 						margin-bottom: 0;

  905. 					}

  906. 

  907. 					.left {

  908. 						flex-shrink: 0;

  909. 						width: 140rpx;

  910. 						font-size: 30rpx;

  911. 						overflow: hidden;

  912. 						text-overflow: ellipsis;

  913. 						white-space: nowrap;

  914. 					}

  915. 

  916. 					.middle {

  917. 						flex-grow: 1;

  918. 					}

  919. 

  920. 					.right {

  921. 						flex-shrink: 0;

  922. 						width: 118rpx;

  923. 						font-size: 30rpx;

  924. 						text-align: center;

  925. 					}

  926. 				}

  927. 			}

  928. 		}

  929. 

  930. 		.statistics {

  931. 			margin: 20rpx 0 0 0;

  932. 			background: #fff;

  933. 

  934. 			.statistics-title {

  935. 				padding: 30rpx 30rpx 0;

  936. 				width: 100%;

  937. 				font-size: 32rpx;

  938. 				font-weight: bold;

  939. 			}

  940. 

  941. 			.statistics-desc {

  942. 				padding: 0 30rpx;

  943. 				margin-top: 20rpx;

  944. 			}

  945. 

  946. 			.table {

  947. 				margin: 30rpx 0 0 0;

  948. 

  949. 				.thead {

  950. 					padding: 0 30rpx;

  951. 					width: 100%;

  952. 					height: 72rpx;

  953. 					display: flex;

  954. 					align-items: center;

  955. 					border: 1rpx solid #E0E0E0;

  956. 					border-left: none;

  957. 					border-right: none;

  958. 					font-size: 26rpx;

  959. 

  960. 					.thead-item {

  961. 						text-align: center;

  962. 					}

  963. 				}

  964. 

  965. 				.tbody {

  966. 

  967. 					.tbody-item {

  968. 						padding: 0 30rpx;

  969. 						display: flex;

  970. 						align-items: center;

  971. 						height: 72rpx;

  972. 						background: #FAFCFF;

  973. 

  974. 						&:nth-of-type(2n) {

  975. 							background: #FFFFFF;

  976. 						}

  977. 

  978. 						.tbody-items {

  979. 							flex: 1;

  980. 							display: flex;

  981. 							justify-content: center;

  982. 						}

  983. 

  984. 						.name {

  985. 							justify-content: flex-start;

  986. 							overflow: hidden;

  987. 							text-overflow: ellipsis;

  988. 							white-space: nowrap;

  989. 						}

  990. 

  991. 						.time {

  992. 							flex: 2;

  993. 						}

  994. 

  995. 						.percent {

  996. 							flex: 2;

  997. 						}

  998. 

  999. 						.week {

  1000. 							flex: 1.5;

  1001. 						}

  1002. 					}

  1003. 				}

  1004. 

  1005. 				.tbottom {

  1006. 					width: 100%;

  1007. 					height: 72rpx;

  1008. 					display: flex;

  1009. 					justify-content: center;

  1010. 					align-items: center;

  1011. 					font-size: 30rpx;

  1012. 					color: #2671E2;

  1013. 					background: #FAFCFF;

  1014. 				}

  1015. 			}

  1016. 		}

  1017. 

  1018. 		.guwen-ranking {

  1019. 			margin: 20rpx 0 0 0;

  1020. 			width: 100%;

  1021. 			padding: 30rpx;

  1022. 			background: #fff;

  1023. 

  1024. 			.guwen-ranking-title {

  1025. 				font-size: 32rpx;

  1026. 				font-weight: 500;

  1027. 			}

  1028. 

  1029. 			.guwen-ranking-desc {

  1030. 				margin-top: 20rpx;

  1031. 				font-size: 30rpx;

  1032. 			}

  1033. 

  1034. 			.ranking-box {

  1035. 				margin: 30rpx 0 0 0;

  1036. 

  1037. 				.ranking-item {

  1038. 					margin-bottom: 18rpx;

  1039. 					display: flex;

  1040. 

  1041. 					&:nth-last-of-type(1) {

  1042. 						margin-bottom: 0;

  1043. 					}

  1044. 

  1045. 					.left {

  1046. 						flex-shrink: 0;

  1047. 						width: 140rpx;

  1048. 						font-size: 30rpx;

  1049. 						overflow: hidden;

  1050. 						text-overflow: ellipsis;

  1051. 						white-space: nowrap;

  1052. 					}

  1053. 

  1054. 					.middle {

  1055. 						flex-grow: 1;

  1056. 					}

  1057. 

  1058. 					.right {

  1059. 						flex-shrink: 0;

  1060. 						width: 118rpx;

  1061. 						font-size: 30rpx;

  1062. 						text-align: center;

  1063. 					}

  1064. 				}

  1065. 			}

  1066. 		}

  1067. 

  1068. 		.proposal {

  1069. 			margin: 20rpx 0 0 0;

  1070. 			padding: 30rpx;

  1071. 			background: #fff;

  1072. 

  1073. 			.proposal-title {

  1074. 				font-size: 32rpx;

  1075. 				font-weight: 500;

  1076. 			}

  1077. 

  1078. 			.proposal-box {

  1079. 				margin: 30rpx 0 0 0;

  1080. 

  1081. 				.proposal-item {

  1082. 					margin: 20rpx 0 0 0;

  1083. 					display: flex;

  1084. 

  1085. 					.lside {

  1086. 						flex-shrink: 0;

  1087. 						margin: 0 12rpx 0 0;

  1088. 						width: 44rpx;

  1089. 						height: 44rpx;

  1090. 						border-radius: 50%;

  1091. 						background: #2671E2;

  1092. 						text-align: center;

  1093. 						line-height: 44rpx;

  1094. 						color: #fff;

  1095. 					}

  1096. 

  1097. 					.rside {

  1098. 

  1099. 						.rside-title {

  1100. 							font-size: 32rpx;

  1101. 						}

  1102. 

  1103. 						.rside-box {

  1104. 							margin: 16rpx 0 0 0;

  1105. 						}

  1106. 					}

  1107. 				}

  1108. 			}

  1109. 

  1110. 		}

  1111. 

  1112. 

  1113. 

  1114. 		.nav-footer {

  1115. 			position: sticky;

  1116. 			bottom: 0;

  1117. 			padding: 32rpx;

  1118. 			width: 100%;

  1119. 			display: flex;

  1120. 			justify-content: center;

  1121. 			background: #fff;

  1122. 

  1123. 			.footer-item {

  1124. 				flex: 1;

  1125. 				height: 88rpx;

  1126. 				display: flex;

  1127. 				justify-content: center;

  1128. 				align-items: center;

  1129. 				color: #2671E2;

  1130. 				border: 2rpx solid #2671E2;

  1131. 				border-radius: 8rpx;

  1132. 				overflow: hidden;

  1133. 				font-size: 32rpx;

  1134. 

  1135. 				&.full {

  1136. 					background: #2671E2;

  1137. 					color: #fff;

  1138. 

  1139. 					.fulls {

  1140. 						box-sizing: border-box;

  1141. 						width: 100%;

  1142. 						height: 100%;

  1143. 						background: transparent;

  1144. 						color: #fff;

  1145. 						font-size: 32rpx;

  1146. 						font-weight: normal;

  1147. 						line-height: 88rpx;

  1148. 					}

  1149. 				}

  1150. 			}

  1151. 

  1152. 		}

  1153. 

  1154. 		.up {

  1155. 			color: #43CD80 !important;

  1156. 		}

  1157. 

  1158. 		.down {

  1159. 			color: #E6273A !important;

  1160. 		}

  1161. 

  1162. 		.empity {

  1163. 			width: 100%;

  1164. 			height: 300rpx;

  1165. 			display: flex;

  1166. 			justify-content: center;

  1167. 			align-items: center;

  1168. 			font-size: 28rpx;

  1169. 			color: #666666;

  1170. 		}

  1171. 	}

  1172. </style>