liumin
/
NewZkgj
1
0
Rozštěpit 0
Zdrojový kód Úkoly 0 Požadavky na natažení 0 Vydání 0 Wiki Aktivita
Nelze vybrat více než 25 témat Téma musí začínat písmenem nebo číslem, může obsahovat pomlčky („-“) a může být dlouhé až 35 znaků.
302 Revize
7 Větve
28 MiB
 
 
 
Strom: d30371b407
Větve Značky
${ item.name }
Vytvořit větev ${ searchTerm }
z „d30371b407“
${ noResults }
NewZkgj/pages/mine/reportExcel/weekReport.vue

918 řádky
20 KiB
Surový Blame Historie 

  1. <template>

  2. 	<view class="pages">

  3. 		<!-- 导航栏 -->

  4. 		<view class="nav-header">

  5. 			<u-navbar title="数智工牌周报" :titles="$options.filters.getTimeLine(weekObj.createTime, 1)"></u-navbar>

  6. 		</view>

  7. 		<!-- 日报内容部分 -->

  8. 		<view class="container">

  9. 			<!-- 头部日报卡 -->

  10. 			<view class="c-head-card">

  11. 				<view class="c-title-text">

  12. 					{{ projectName || '' }}数智工牌周报

  13. 					<text class="date">{{ weekObj.createTime | getTimeLine }}</text>

  14. 				</view>

  15. 				<view class="creative-time">

  16. 					生成时间：{{ weekObj.createTime || '--' }}

  17. 				</view>

  18. 			</view>

  19. 		</view>

  20. 

  21. 

  22. 		<!-- 简报 -->

  23. 		<view class="briefing">

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

  25. 				简报

  26. 			</view>

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

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

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

  30. 					<view class="briefing-box-item">

  31. 						<view class="tops">

  32. 							{{ data.name }}

  33. 						</view>

  34. 						<view class="middle">

  35. 							{{ data.num || 0 }}

  36. 						</view>

  37. 						<view class="bottom">

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

  39. 							<text class="b-text"

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

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

  42. 								<text style="margin-left: 8rpx;font-size: 34rpx;font-weight: bold;" :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. 

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

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

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

  54. 				销讲场景执行排名

  55. 			</view>

  56. 			<template v-if="weekObj.fractionPK && weekObj.fractionPK != 0">

  57. 				<view class="execution-ranking-desc">

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

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

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

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

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

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

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

  65. 					<text>%;</text>

  66. 				</view>

  67. 

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

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

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

  71. 						<view class="ranking-item">

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

  73. 							<view class="middle">

  74. 								<u-line-progress :active-color="$options.filters.setColor(percent.value)" inactive-color="#F2F2F2" :show-percent="false"

  75. 									:percent="percent.value"></u-line-progress>

  76. 							</view>

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

  78. 						</view>

  79. 					</block>

  80. 				</view>

  81. 			</template>

  82. 			<template v-else>

  83. 				<view class="empity">

  84. 					暂无数据

  85. 				</view>

  86. 			</template>

  87. 		</view>

  88. 

  89. 		<!-- 接待统计 -->

  90. 		<view class="statistics">

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

  92. 				接待统计

  93. 			</view>

  94. 			<template v-if="weekObj.customerInfo1 && weekObj.customerInfo2">

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

  96. 					<text>

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

  98. 					</text>

  99. 					<text>

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

  101. 					</text>

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

  103. 					<text class="">

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

  105. 					</text>

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

  107. 					<text class="">

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

  109. 					</text>

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

  111. 					<text class="">

  112. 						%降幅最大。

  113. 					</text>

  114. 				</view>

  115. 				<view class="table">

  116. 					<view class="thead">

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

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

  119. 								{{ head.title }}

  120. 							</view>

  121. 						</block>

  122. 					</view>

  123. 

  124. 					<view class="tbody">

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

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

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

  128. 								<view class="tbody-items nums">{{ data.receptionCount }}</view>

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

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

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

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

  133. 								</view>

  134. 							</view>

  135. 						</block>

  136. 					</view>

  137. 				</view>

  138. 			</template>

  139. 

  140. 			<template v-else>

  141. 				<view class="empity">

  142. 					暂无数据

  143. 				</view>

  144. 			</template>

  145. 		</view>

  146. 

  147. 		<!-- 顾问排名 -->

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

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

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

  151. 			</view>

  152. 			<template v-if="weekObj.ZXLTopList && weekObj.ZXLTopList.length > 0">

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

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

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

  156. 						<view class="ranking-item">

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

  158. 							<view class="middle">

  159. 								<u-line-progress :active-color="$options.filters.setColor(percent.value)" inactive-color="#F2F2F2" :show-percent="false"

  160. 									: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. 

  169. 			<template v-else>

  170. 				<view class="empity">

  171. 					暂无数据

  172. 				</view>

  173. 			</template>

  174. 		</view>

  175. 

  176. 		<!-- 顾问排名 -->

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

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

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

  180. 			</view>

  181. 

  182. 			<template v-if="weekObj.JDLTopList && weekObj.JDLTopList.length > 0">

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

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

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

  186. 						<view class="ranking-item">

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

  188. 							<view class="middle">

  189. 								<u-line-progress :active-color="$options.filters.setColor(percent.value)" inactive-color="#F2F2F2" :show-percent="false"

  190. 									:percent="percent.value">

  191. 								</u-line-progress>

  192. 							</view>

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

  194. 						</view>

  195. 					</block>

  196. 				</view>

  197. 			</template>

  198. 

  199. 			<template v-else>

  200. 				<view class="empity">

  201. 					暂无数据

  202. 				</view>

  203. 			</template>

  204. 		</view>

  205. 

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

  207. 		<view class="proposal">

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

  209. 				使用建议

  210. 			</view>

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

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

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

  214. 					<view class="proposal-item">

  215. 						<view class="lside">

  216. 							{{ index+1 }}

  217. 						</view>

  218. 						<view class="rside">

  219. 							<view class="rside-title">

  220. 								执行率整体较低；

  221. 							</view>

  222. 

  223. 							<view class="rside-box">

  224. 								<view class="reason">

  225. 									原因：整体平均执率低

  226. 								</view>

  227. 								<view class="advice">

  228. 									建议： 1、精简话术（关键词、指标点）;

  229. 									2、对顾问进行话术培训。

  230. 								</view>

  231. 							</view>

  232. 

  233. 						</view>

  234. 					</view>

  235. 				</block>

  236. 			</view>

  237. 		</view>

  238. 

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

  240. 		<view class="footer">

  241. 			<view class="footer-item">

  242. 

  243. 			</view>

  244. 		</view>

  245. 	</view>

  246. </template>

  247. 

  248. <script>

  249. 	export default {

  250. 		data() {

  251. 			return {

  252. 				tableHead: [{

  253. 						title: '顾问',

  254. 						style: {

  255. 							flex: 1

  256. 						}

  257. 					},

  258. 					{

  259. 						title: '接待量',

  260. 						style: {

  261. 							flex: 1

  262. 						}

  263. 					},

  264. 					{

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

  266. 						style: {

  267. 							flex: 2

  268. 						}

  269. 					},

  270. 					{

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

  272. 						style: {

  273. 							flex: 2

  274. 						}

  275. 					},

  276. 					{

  277. 						title: '对比上周',

  278. 						style: {

  279. 							flex: 1.5

  280. 						}

  281. 					},

  282. 				],

  283. 				id: '', // id

  284. 

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

  286. 

  287. 				// 简报

  288. 				numlist: [{

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

  290. 						num: '',

  291. 						setName: 'receptionCount1',

  292. 						percent: '',

  293. 						percentName: 'receptionCountPK',

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

  295. 						preNumName: 'receptionCount2', // 

  296. 

  297. 					}, {

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

  299. 						num: '',

  300. 						setName: 'activeCustomer1',

  301. 						percent: '',

  302. 						percentName: 'activeCustomerPK',

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

  304. 						preNumName: 'receptionCount2', // 

  305. 					},

  306. 					{

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

  308. 						num: '',

  309. 						setName: 'fraction1',

  310. 						percent: '',

  311. 						percentName: 'fractionPK',

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

  313. 						preNumName: 'receptionCount2', // 

  314. 					},

  315. 					{

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

  317. 						num: '',

  318. 						setName: 'avgDuration1',

  319. 						percent: '',

  320. 						percentName: 'avgDurationPK',

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

  322. 						preNumName: 'receptionCount2', // 

  323. 					},

  324. 					{

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

  326. 						num: '',

  327. 						setName: 'prohibitedNum1',

  328. 						percent: '',

  329. 						percentName: 'prohibitedNumPK',

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

  331. 						preNumName: 'prohibitedNum2', // 

  332. 					},

  333. 					{

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

  335. 						num: '',

  336. 						setName: 'reachSum1',

  337. 						percent: '',

  338. 						percentName: 'reachSumPK',

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

  340. 						preNumName: 'reachSum2', // 

  341. 					},

  342. 					{

  343. 						name: '已标记',

  344. 						num: '',

  345. 						setName: 'labelledReceptionNum1',

  346. 						percent: '',

  347. 						percentName: 'labelledReceptionNumPK',

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

  349. 						preNumName: 'labelledReceptionNum2', // 

  350. 					},

  351. 					{

  352. 						name: '未标记',

  353. 						num: '',

  354. 						setName: 'unlabelledReceptionNum1',

  355. 						percent: '',

  356. 						percentName: 'unlabelledReceptionNumPK',

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

  358. 						preNumName: 'unlabelledReceptionNum2', // 

  359. 					},

  360. 				],

  361. 

  362. 				// 周报详情

  363. 				weekObj: {},

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

  365. 			}

  366. 		},

  367. 

  368. 

  369. 		computed: {

  370. 			

  371. 			// 排名最高与最低

  372. 			rankTop() {

  373. 				return name => {

  374. 					let obj = {

  375. 						ranktype: (this.weekObj.customerInfo1.length - this.weekObj.customerInfo2.length) > 0 ?  '上升' : '下降',

  376. 						people: Math.abs(this.weekObj.customerInfo1.length - this.weekObj.customerInfo2.length),

  377. 						topName: this.weekObj.customerInfo1[0].name,

  378. 						topPk: Math.abs(this.weekObj.customerInfo1[0].pk),

  379. 						lastName: this.weekObj.customerInfo1[this.weekObj.customerInfo1.length-1].name,

  380. 						lastPk: Math.abs(this.weekObj.customerInfo1[this.weekObj.customerInfo1.length-1].pk), // 

  381. 						class: (this.weekObj.customerInfo1.length - this.weekObj.customerInfo2.length) > 0 ? 'up' : 'down',

  382. 						fractionPKName: this.weekObj.fractionPK > 0 ? '上涨' : '下跌',

  383. 						fractionPK: Math.abs(this.weekObj.fractionPK),

  384. 						fractionBastName: this.weekObj.XJTop1List[0].title,

  385. 						fractionBastValue: this.weekObj.XJTop1List[0].value,

  386. 						fractionLastName: this.weekObj.XJTop1List[this.weekObj.XJTop1List.length-1].title,

  387. 						fractionLastValue: this.weekObj.XJTop1List[this.weekObj.XJTop1List.length-1].value,

  388. 					}

  389. 					return obj[name]

  390. 				}

  391. 			},

  392. 		},

  393. 

  394. 		onLoad(option) {

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

  396. 			this.getMessage()

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

  398. 			console.log(JSON.stringify(this.weekObj), '12312312312')

  399. 		},

  400. 

  401. 

  402. 		onShareAppMessage() {

  403. 			return {

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

  405. 				path: `/pages/mine/reportExcel/weekRepor?id=${this.id}`

  406. 			}

  407. 		},

  408. 

  409. 		methods: {

  410. 

  411. 			// 获取周报详情

  412. 			getMessage() {

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

  414. 					id: this.id

  415. 				}).then(res => {

  416. 					console.log(res)

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

  418. 					console.log(data)

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

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

  421. 					data.customerInfo1.reverse()

  422. 					data.customerInfo2.reverse()

  423. 					this.weekObj = {

  424. 						...res.zkMessage,

  425. 						...data

  426. 					}

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

  428. 					this.projectName = res.projectName

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

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

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

  432. 						}

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

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

  435. 						}

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

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

  438. 						}

  439. 					})

  440. 					this.init()

  441. 				}).catch(e => {

  442. 					console.log(e)

  443. 				})

  444. 

  445. 			},

  446. 			

  447. 			

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

  449. 			init() {

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

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

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

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

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

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

  456. 								title: i,

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

  458. 							})

  459. 						}

  460. 					}

  461. 				})

  462. 				this.sortInitArr()

  463. 			},

  464. 

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

  466. 			sortInitArr() {

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

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

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

  470. 					}

  471. 				})

  472. 

  473. 				this.reverseList()

  474. 			},

  475. 

  476. 			// 反转数组

  477. 			reverseList() {

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

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

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

  481. 					}

  482. 				})

  483. 			},

  484. 

  485. 			// 冒泡排序

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

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

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

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

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

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

  492. 							const temp = arr[j];

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

  494. 							arr[j + 1] = temp;

  495. 						}

  496. 					}

  497. 				}

  498. 			},

  499. 		},

  500. 

  501. 		filters: {

  502. 			// 时间格式转换

  503. 			fomatDate(date) {

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

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

  506. 				let str = arr[0]

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

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

  509. 			},

  510. 

  511. 			// 转换时间

  512. 			getTimeLine(date, type = 1) {

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

  514. 				let time = new Date(date)

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

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

  517. 				let str = arr[0]

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

  519. 

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

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

  522. 

  523. 				if (type == 1) {

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

  525. 				} else {

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

  527. 				}

  528. 			},

  529. 			

  530. 			// 设置颜色

  531. 			setColor(value) {

  532. 				let color = ''

  533. 				switch(true) {

  534. 					case 0 <= value && value <= 70 :

  535. 						color = '#4FC78F';

  536. 						break;

  537. 					case 70 < value && value <= 80 :

  538. 						color = '#FFCC00';

  539. 						break;

  540. 					case  80 < value && value <= 90 :

  541. 						color = '#FF8C13';

  542. 						break;

  543. 					case 90 < value && value <= 100 :

  544. 						color = '#E7483C';

  545. 						break;

  546. 				}

  547. 				return color

  548. 			},

  549. 		}

  550. 	}

  551. </script>

  552. 

  553. <style lang="scss" scoped>

  554. 	.pages {

  555. 		width: 100vw;

  556. 		min-height: 100vh;

  557. 		display: flex;

  558. 		flex-direction: column;

  559. 		background: #F8F8F8;

  560. 

  561. 		.nav-header {

  562. 			flex-shrink: 0;

  563. 		}

  564. 

  565. 		.container {

  566. 			padding: 30rpx 30rpx 0;

  567. 			display: flex;

  568. 			flex-direction: column;

  569. 			background: #fff;

  570. 

  571. 			.c-head-card {

  572. 				padding: 30rpx;

  573. 				width: 100%;

  574. 				min-height: 252rpx;

  575. 				border: 2rpx solid #000000;

  576. 				border-radius: 12rpx;

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

  578. 				display: flex;

  579. 				flex-direction: column;

  580. 

  581. 				.c-title-text {

  582. 					position: relative;

  583. 					flex-grow: 1;

  584. 					font-size: 48rpx;

  585. 					color: #303030;

  586. 

  587. 					.date {

  588. 						position: absolute;

  589. 						right: 0;

  590. 						bottom: 6rpx;

  591. 						font-size: 30rpx;

  592. 						color: #303030;

  593. 					}

  594. 				}

  595. 

  596. 				.creative-time {

  597. 					margin: 20rpx 0 0 0;

  598. 					flex-shrink: 0;

  599. 				}

  600. 			}

  601. 		}

  602. 

  603. 

  604. 

  605. 		.briefing {

  606. 			margin: 40rpx 0 0 0;

  607. 

  608. 			.briefing-title {

  609. 				padding: 0 30rpx;

  610. 				height: 90rpx;

  611. 				display: flex;

  612. 				align-items: center;

  613. 				border: 1rpx solid #E0E0E0;

  614. 				font-size: 32rpx;

  615. 				font-weight: 600;

  616. 			}

  617. 

  618. 			.briefing-box {

  619. 				width: 100%;

  620. 				display: flex;

  621. 				flex-wrap: wrap;

  622. 

  623. 				.briefing-box-item {

  624. 					padding: 20rpx 30rpx;

  625. 					width: 50%;

  626. 					height: 186rpx;

  627. 					border: 1px solid #E0E0E0;

  628. 					border-left: none;

  629. 					border-top: none;

  630. 

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

  632. 						border-right: none;

  633. 					}

  634. 

  635. 					.top {

  636. 						font-size: 28rpx;

  637. 					}

  638. 

  639. 					.middle {

  640. 						margin: 14rpx 0 12rpx;

  641. 						font-size: 32rpx;

  642. 						font-weight: 600;

  643. 						color: #333333;

  644. 					}

  645. 

  646. 					.bottom {

  647. 						font-size: 26rpx;

  648. 						color: #666666;

  649. 

  650. 						.b-text {

  651. 							margin-left: 20rpx;

  652. 

  653. 

  654. 							&.down {

  655. 								color: #43CD80;

  656. 								font-size: 34rpx;

  657. 							}

  658. 

  659. 							&.up {

  660. 								font-size: 34rpx;

  661. 								color: #E7483C;

  662. 							}

  663. 						}

  664. 					}

  665. 				}

  666. 			}

  667. 		}

  668. 

  669. 

  670. 		.execution-ranking {

  671. 			margin: 20rpx 0 0 0;

  672. 			padding: 30rpx;

  673. 			background: #fff;

  674. 

  675. 			.execution-ranking-title {

  676. 				font-size: 32rpx;

  677. 				font-weight: 500;

  678. 			}

  679. 

  680. 			.execution-ranking-desc {

  681. 				margin-top: 20rpx;

  682. 				font-size: 30rpx;

  683. 			}

  684. 

  685. 			.ranking-box {

  686. 				margin: 30rpx 0 0 0;

  687. 

  688. 				.ranking-item {

  689. 					margin-bottom: 18rpx;

  690. 					display: flex;

  691. 

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

  693. 						margin-bottom: 0;

  694. 					}

  695. 

  696. 					.left {

  697. 						flex-shrink: 0;

  698. 						width: 140rpx;

  699. 						font-size: 30rpx;

  700. 						overflow: hidden;

  701. 						text-overflow: ellipsis;

  702. 						white-space: nowrap;

  703. 					}

  704. 

  705. 					.middle {

  706. 						flex-grow: 1;

  707. 					}

  708. 

  709. 					.right {

  710. 						flex-shrink: 0;

  711. 						width: 118rpx;

  712. 						font-size: 30rpx;

  713. 						text-align: center;

  714. 					}

  715. 				}

  716. 			}

  717. 		}

  718. 

  719. 		.statistics {

  720. 			margin: 20rpx 0 0 0;

  721. 			background: #fff;

  722. 

  723. 			.statistics-title {

  724. 				padding: 30rpx 30rpx 0;

  725. 				width: 100%;

  726. 			}

  727. 

  728. 			.statistics-desc {

  729. 				padding: 0 30rpx;

  730. 				margin-top: 20rpx;

  731. 			}

  732. 

  733. 			.table {

  734. 				margin: 30rpx 0 0 0;

  735. 

  736. 				.thead {

  737. 					padding: 0 30rpx;

  738. 					width: 100%;

  739. 					height: 72rpx;

  740. 					display: flex;

  741. 					align-items: center;

  742. 					border: 1rpx solid #E0E0E0;

  743. 					border-left: none;

  744. 					border-right: none;

  745. 					font-size: 26rpx;

  746. 

  747. 					.thead-item {

  748. 						text-align: center;

  749. 					}

  750. 				}

  751. 

  752. 				.tbody {

  753. 

  754. 					.tbody-item {

  755. 						padding: 0 30rpx;

  756. 						display: flex;

  757. 						align-items: center;

  758. 						height: 72rpx;

  759. 						background: #FAFCFF;

  760. 

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

  762. 							background: #FFFFFF;

  763. 						}

  764. 

  765. 						.tbody-items {

  766. 							flex: 1;

  767. 							display: flex;

  768. 							justify-content: center;

  769. 						}

  770. 						

  771. 						.name {

  772. 							justify-content: flex-start;

  773. 							overflow: hidden;

  774. 							text-overflow: ellipsis;

  775. 							white-space: nowrap;

  776. 						}

  777. 

  778. 						.time {

  779. 							flex: 2;

  780. 						}

  781. 

  782. 						.percent {

  783. 							flex: 2;

  784. 						}

  785. 

  786. 						.week {

  787. 							flex: 1.5;

  788. 						}

  789. 					}

  790. 				}

  791. 

  792. 				.tbottom {

  793. 					width: 100%;

  794. 					height: 72rpx;

  795. 					display: flex;

  796. 					justify-content: center;

  797. 					align-items: center;

  798. 					font-size: 30rpx;

  799. 					color: #2671E2;

  800. 					background: #FAFCFF;

  801. 				}

  802. 			}

  803. 		}

  804. 

  805. 		.guwen-ranking {

  806. 			margin: 20rpx 0 0 0;

  807. 			width: 100%;

  808. 			padding: 30rpx;

  809. 			background: #fff;

  810. 

  811. 			.guwen-ranking-title {

  812. 				font-size: 32rpx;

  813. 				font-weight: 500;

  814. 			}

  815. 

  816. 			.guwen-ranking-desc {

  817. 				margin-top: 20rpx;

  818. 				font-size: 30rpx;

  819. 			}

  820. 

  821. 			.ranking-box {

  822. 				margin: 30rpx 0 0 0;

  823. 

  824. 				.ranking-item {

  825. 					margin-bottom: 18rpx;

  826. 					display: flex;

  827. 

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

  829. 						margin-bottom: 0;

  830. 					}

  831. 

  832. 					.left {

  833. 						flex-shrink: 0;

  834. 						width: 140rpx;

  835. 						font-size: 30rpx;

  836. 						overflow: hidden;

  837. 						text-overflow: ellipsis;

  838. 						white-space: nowrap;

  839. 					}

  840. 

  841. 					.middle {

  842. 						flex-grow: 1;

  843. 					}

  844. 

  845. 					.right {

  846. 						flex-shrink: 0;

  847. 						width: 118rpx;

  848. 						font-size: 30rpx;

  849. 						text-align: center;

  850. 					}

  851. 				}

  852. 			}

  853. 		}

  854. 

  855. 		.proposal {

  856. 			margin: 20rpx 0 0 0;

  857. 			padding: 30rpx;

  858. 			background: #fff;

  859. 

  860. 			.proposal-title {

  861. 				font-size: 32rpx;

  862. 				font-weight: 500;

  863. 			}

  864. 

  865. 			.proposal-box {

  866. 				margin: 30rpx 0 0 0;

  867. 

  868. 				.proposal-item {

  869. 					margin: 20rpx 0 0 0;

  870. 					display: flex;

  871. 

  872. 					.lside {

  873. 						flex-shrink: 0;

  874. 						margin: 0 12rpx 0 0;

  875. 						width: 44rpx;

  876. 						height: 44rpx;

  877. 						border-radius: 50%;

  878. 						background: #2671E2;

  879. 						text-align: center;

  880. 						line-height: 44rpx;

  881. 						color: #fff;

  882. 					}

  883. 

  884. 					.rside {

  885. 

  886. 						.rside-title {

  887. 							font-size: 32rpx;

  888. 						}

  889. 

  890. 						.rside-box {

  891. 							margin: 16rpx 0 0 0;

  892. 						}

  893. 					}

  894. 				}

  895. 			}

  896. 

  897. 		}

  898. 

  899. 		.up {

  900. 			color: #E6273A;

  901. 		}

  902. 

  903. 		.down {

  904. 			color: #43CD80;

  905. 		}

  906. 

  907. 		.empity {

  908. 			width: 100%;

  909. 			height: 300rpx;

  910. 			display: flex;

  911. 			justify-content: center;

  912. 			align-items: center;

  913. 			font-size: 32rpx;

  914. 			font-weight: 600;

  915. 		}

  916. 	}

  917. </style>