liumin
/
NewZkgj
1
0
Fork 0
Koodi Ongelmat 0 Pull-pyynnöt 0 Julkaisut 0 Wiki Toiminta
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.
502 Commitit
7 Branchit
28 MiB
 
 
 
Puu: a16af0091c
Branchit Tagit
${ item.name }
Create branch ${ searchTerm }
from 'a16af0091c'
${ noResults }
NewZkgj/pages/reportExcel/weekReport.vue

1204 rivejä
28 KiB
Raaka Blame Historia 

  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. 			<!-- 销讲场景执行排名 -->

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

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

  53. 					销讲场景执行排名

  54. 				</view>

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

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

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

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

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

  60. 						<text>%</text>

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

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

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

  64. 							<text>%</text>

  65. 						</template>

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

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

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

  69. 							<text>%;</text>

  70. 						</template>

  71. 					</view>

  72. 

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

  74. 					<view class="ranking-box" @click="toTrendAnalysis('销讲数据')">

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

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

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

  78. 								<view class="middle">

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

  80. 										inactive-color="#F2F2F2" :show-percent="false" :percent="percent.value">

  81. 									</u-line-progress>

  82. 								</view>

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

  84. 							</view>

  85. 						</block>

  86. 					</view>

  87. 				</template>

  88. 				<template v-else>

  89. 					<view class="empity">

  90. 						暂无数据

  91. 					</view>

  92. 				</template>

  93. 			</view>

  94. 

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

  96. 			<view class="statistics">

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

  98. 					接待统计

  99. 				</view>

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

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

  102. 						<text>

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

  104. 						</text>

  105. 						<text>

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

  107. 						</text>

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

  109. 						<text class="">

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

  111. 						</text>

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

  113. 						<text class="">

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

  115. 						</text>

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

  117. 						<text class="">

  118. 							%降幅最大。

  119. 						</text>

  120. 					</view>

  121. 					<view class="table">

  122. 						<view class="thead">

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

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

  125. 									{{ head.title }}

  126. 								</view>

  127. 							</block>

  128. 						</view>

  129. 

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

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

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

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

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

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

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

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

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

  139. 									</view>

  140. 								</view>

  141. 							</block>

  142. 						</view>

  143. 					</view>

  144. 				</template>

  145. 

  146. 				<template v-else>

  147. 					<view class="empity">

  148. 						暂无数据

  149. 					</view>

  150. 				</template>

  151. 			</view>

  152. 

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

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

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

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

  157. 				</view>

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

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

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

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

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

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

  164. 								<view class="middle">

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

  166. 										inactive-color="#F2F2F2" :show-percent="false" :percent="percent.value">

  167. 									</u-line-progress>

  168. 								</view>

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

  170. 							</view>

  171. 						</block>

  172. 					</view>

  173. 				</template>

  174. 

  175. 				<template v-else>

  176. 					<view class="empity">

  177. 						暂无数据

  178. 					</view>

  179. 				</template>

  180. 			</view>

  181. 

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

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

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

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

  186. 				</view>

  187. 

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

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

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

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

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

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

  194. 								<view class="middle">

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

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

  197. 									</u-line-progress>

  198. 								</view>

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

  200. 							</view>

  201. 						</block>

  202. 					</view>

  203. 				</template>

  204. 

  205. 				<template v-else>

  206. 					<view class="empity">

  207. 						暂无数据

  208. 					</view>

  209. 				</template>

  210. 			</view>

  211. 

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

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

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

  215. 					使用建议

  216. 				</view>

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

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

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

  220. 				</view>

  221. 			</view>

  222. 

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

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

  225. 

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

  227. 					回到管理端

  228. 				</view>

  229. 

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

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

  232. 						一键转发

  233. 					</button>

  234. 				</view>

  235. 			</view>

  236. 		</view>

  237. 	</view>

  238. </template>

  239. 

  240. <script>

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

  242. 	export default {

  243. 

  244. 		components: {

  245. 			uParse

  246. 		},

  247. 		data() {

  248. 			return {

  249. 				nodata: false,

  250. 				tableHead: [{

  251. 						title: '顾问',

  252. 						style: {

  253. 							flex: 1

  254. 						}

  255. 					},

  256. 					{

  257. 						title: '接待量',

  258. 						style: {

  259. 							flex: 1

  260. 						}

  261. 					},

  262. 					{

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

  264. 						style: {

  265. 							flex: 2

  266. 						}

  267. 					},

  268. 					{

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

  270. 						style: {

  271. 							flex: 2

  272. 						}

  273. 					},

  274. 					{

  275. 						title: '对比上周',

  276. 						style: {

  277. 							flex: 1.5

  278. 						}

  279. 					},

  280. 				],

  281. 				id: '', // id

  282. 

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

  284. 

  285. 				// 简报

  286. 				numlist: [{

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

  288. 						num: '',

  289. 						setName: 'receptionCount1',

  290. 						percent: '',

  291. 						percentName: 'receptionCountPK',

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

  293. 						preNumName: 'receptionCount2', // 

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

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

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

  297. 

  298. 					}, {

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

  300. 						num: '',

  301. 						setName: 'activeCustomer1',

  302. 						percent: '',

  303. 						percentName: 'activeCustomerPK',

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

  305. 						preNumName: 'activeCustomer2', // 

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

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

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

  309. 					},

  310. 					{

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

  312. 						num: '',

  313. 						setName: 'fraction1',

  314. 						percent: '',

  315. 						percentName: 'fractionPK',

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

  317. 						preNumName: 'fraction2', // 

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

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

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

  321. 					},

  322. 					{

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

  324. 						num: '',

  325. 						setName: 'avgDuration1',

  326. 						percent: '',

  327. 						percentName: 'avgDurationPK',

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

  329. 						preNumName: 'avgDuration2', // 

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

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

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

  333. 					},

  334. 					{

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

  336. 						num: '',

  337. 						setName: 'prohibitedNum1',

  338. 						percent: '',

  339. 						percentName: 'prohibitedNumPK',

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

  341. 						preNumName: 'prohibitedNum2', // 

  342. 						class: 'down',

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

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

  345. 						auth: '违禁记录',

  346. 					},

  347. 					{

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

  349. 						num: '',

  350. 						setName: 'reachSum1',

  351. 						percent: '',

  352. 						percentName: 'reachSumPK',

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

  354. 						preNumName: 'reachSum2', // 

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

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

  357. 						auth: '销讲数据',

  358. 					},

  359. 					{

  360. 						name: '已标记',

  361. 						num: '',

  362. 						setName: 'labelledReceptionNum1',

  363. 						percent: '',

  364. 						percentName: 'labelledReceptionNumPK',

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

  366. 						preNumName: 'labelledReceptionNum2', // 

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

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

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

  370. 					},

  371. 					{

  372. 						name: '未标记',

  373. 						num: '',

  374. 						setName: 'unlabelledReceptionNum1',

  375. 						percent: '',

  376. 						percentName: 'unlabelledReceptionNumPK',

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

  378. 						preNumName: 'unlabelledReceptionNum2', // 

  379. 						class: 'down',

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

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

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

  383. 					},

  384. 				],

  385. 

  386. 				// 周报详情

  387. 				weekObj: {},

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

  389. 			}

  390. 		},

  391. 

  392. 

  393. 		computed: {

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

  395. 			menuList() {

  396. 				return uni.getStorageSync('weapp_session_Menu_data')

  397. 			},

  398. 

  399. 			// 排名最高与最低

  400. 			rankTop() {

  401. 				return name => {

  402. 					let obj = {}

  403. 					try {

  404. 

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

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

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

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

  409. 								.length)

  410. 						}

  411. 

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

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

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

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

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

  417. 									.pk)

  418. 						}

  419. 

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

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

  422. 								'up' : 'down'

  423. 						}

  424. 

  425. 						if (this.weekObj.fractionPK) {

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

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

  428. 						}

  429. 

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

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

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

  433. 						}

  434. 

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

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

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

  438. 						}

  439. 

  440. 						return obj[name] || ''

  441. 					} catch (e) {

  442. 						console.log(e)

  443. 						return ''

  444. 					}

  445. 				}

  446. 			},

  447. 

  448. 			// 接待统计

  449. 			isShowStatistics() {

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

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

  452. 			},

  453. 

  454. 			isShowXJTop1List() {

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

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

  457. 			},

  458. 

  459. 			isShowZXLTopList() {

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

  461. 			},

  462. 

  463. 			isShowJDLTopList() {

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

  465. 			},

  466. 		},

  467. 

  468. 		onLoad(option) {

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

  470. 			this.getMessage()

  471. 		},

  472. 

  473. 

  474. 		onShareAppMessage() {

  475. 			return {

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

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

  478. 			}

  479. 		},

  480. 

  481. 		methods: {

  482. 			// 趋势分析

  483. 			toTrendAnalysis(name) {

  484. 				return

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

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

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

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

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

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

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

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

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

  494. 					uni.navigateTo({

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

  496. 					})

  497. 				} else {

  498. 					uni.showToast({

  499. 						title: '暂无权限',

  500. 						icon: "none"

  501. 					})

  502. 				}

  503. 			},

  504. 

  505. 			// 顾问排名

  506. 			toEmployeesstatistics(name) {

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

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

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

  510. 					uni.navigateTo({

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

  512. 					})

  513. 				} else {

  514. 					uni.showToast({

  515. 						title: '暂无权限',

  516. 						icon: "none"

  517. 					})

  518. 				}

  519. 			},

  520. 

  521. 			// 员工分析

  522. 			toStaffAnalysis(name, data) {

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

  524. 				console.log(obj)

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

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

  527. 					uni.navigateTo({

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

  529. 					});

  530. 				} else {

  531. 					uni.showToast({

  532. 						title: '暂无权限',

  533. 						icon: "none"

  534. 					})

  535. 				}

  536. 			},

  537. 

  538. 			// 跳转对应页面

  539. 			toAuthPage(data) {

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

  541. 					this.toHome()

  542. 					return

  543. 				}

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

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

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

  547. 					uni.navigateTo({

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

  549. 					})

  550. 				} else {

  551. 					uni.showToast({

  552. 						title: '暂无权限',

  553. 						icon: "none"

  554. 					})

  555. 				}

  556. 			},

  557. 

  558. 

  559. 			// 是否有权限观看

  560. 			isPassWatch(name) {

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

  562. 					return item.name == name

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

  564. 			},

  565. 

  566. 			// 跳转首页

  567. 			toHome() {

  568. 				uni.navigateTo({

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

  570. 				})

  571. 			},

  572. 			// 获取周报详情

  573. 			getMessage() {

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

  575. 					id: this.id

  576. 				}).then(res => {

  577. 					// console.log(res)

  578. 					let data = {}

  579. 					if(res.zkMessage.content){

  580. 						data = JSON.parse(res.zkMessage.content)

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

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

  583. 						data.customerInfo1.reverse()

  584. 						data.customerInfo2.reverse()

  585. 						this.weekObj = {

  586. 							...res.zkMessage,

  587. 							...data

  588. 						}

  589. 					}else{

  590. 						this.nodata = true

  591. 						this.weekObj = {

  592. 						...res.zkMessage,

  593. 						}

  594. 					}

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

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

  597. 					this.projectName = res.projectName

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

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

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

  601. 						}

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

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

  604. 						}

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

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

  607. 						}

  608. 					})

  609. 					this.init()

  610. 				}).catch(e => {

  611. 					console.log(e)

  612. 				})

  613. 			},

  614. 

  615. 

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

  617. 			init() {

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

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

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

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

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

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

  624. 								title: i,

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

  626. 							})

  627. 						}

  628. 					}

  629. 				})

  630. 				this.sortInitArr()

  631. 			},

  632. 

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

  634. 			sortInitArr() {

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

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

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

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

  639. 					}

  640. 				})

  641. 

  642. 				this.reverseList()

  643. 			},

  644. 

  645. 			// 反转数组

  646. 			reverseList() {

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

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

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

  650. 					}

  651. 				})

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

  653. 			},

  654. 

  655. 			// 冒泡排序

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

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

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

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

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

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

  662. 							const temp = arr[j];

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

  664. 							arr[j + 1] = temp;

  665. 						}

  666. 					}

  667. 				}

  668. 			},

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

  670. 			dealData(arr) {

  671. 				// 获取最大值

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

  673. 					return o.value

  674. 				}))

  675. 				arr.map(item => {

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

  677. 				})

  678. 				return arr

  679. 

  680. 			},

  681. 

  682. 			// 转换时间

  683. 			getTimeLine(date, type = 1) {

  684. 				let resu = '--'

  685. 				if (!date) return resu

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

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

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

  689. 				let str = arr[0]

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

  691. 

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

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

  694. 

  695. 				if (type == 1) {

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

  697. 				} else {

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

  699. 				}

  700. 				return resu

  701. 			},

  702. 

  703. 			// 转换时间

  704. 			getTimeLines(date) {

  705. 				if (!date) return ''

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

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

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

  709. 

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

  711. 			},

  712. 

  713. 

  714. 		},

  715. 

  716. 		filters: {

  717. 			// 时间格式转换

  718. 			fomatDate(date) {

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

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

  721. 				let str = arr[0]

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

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

  724. 			},

  725. 

  726. 			// 转换时间

  727. 			getTimeLine(date, type = 1) {

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

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

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

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

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

  733. 				let str = arr[0]

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

  735. 

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

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

  738. 

  739. 				if (type == 1) {

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

  741. 				} else {

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

  743. 				}

  744. 			},

  745. 

  746. 			// 设置颜色

  747. 			setColor(index) {

  748. 				let color = ''

  749. 				switch (index) {

  750. 					case 0:

  751. 						color = '#E7483C';

  752. 						break;

  753. 					case 1:

  754. 						color = '#FF8C13';

  755. 						break;

  756. 					case 2:

  757. 						color = '#FFCC00';

  758. 						break;

  759. 					default:

  760. 						color = '#4FC78F';

  761. 						break;

  762. 				}

  763. 				return color

  764. 			},

  765. 		}

  766. 	}

  767. </script>

  768. 

  769. <style lang="scss" scoped>

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

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

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

  773. 

  774. 	.pages {

  775. 		width: 100vw;

  776. 		min-height: 100vh;

  777. 		display: flex;

  778. 		flex-direction: column;

  779. 		background: #F8F8F8;

  780. 

  781. 		.nav-header {

  782. 			flex-shrink: 0;

  783. 		}

  784. 

  785. 		.container {

  786. 			padding: 30rpx 30rpx 40rpx;

  787. 			display: flex;

  788. 			flex-direction: column;

  789. 			background: #fff;

  790. 

  791. 			.c-head-card {

  792. 				padding: 30rpx;

  793. 				width: 100%;

  794. 				min-height: 252rpx;

  795. 				border: 2rpx solid #000000;

  796. 				border-radius: 12rpx;

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

  798. 				display: flex;

  799. 				flex-direction: column;

  800. 

  801. 				.c-title-text {

  802. 					// position: relative;

  803. 					flex-grow: 1;

  804. 					font-size: 48rpx;

  805. 					font-weight: bold;

  806. 					color: #303030;

  807. 				}

  808. 

  809. 				.date {

  810. 					// position: absolute;

  811. 					// right: 0;

  812. 					// bottom: 6rpx;

  813. 					font-size: 30rpx;

  814. 					color: #303030;

  815. 				}

  816. 

  817. 				.creative-time {

  818. 					margin: 20rpx 0 0 0;

  819. 					flex-shrink: 0;

  820. 				}

  821. 			}

  822. 		}

  823. 

  824. 		.nodata-box{

  825. 			width: 750rpx;

  826. 			flex: 1;

  827. 			margin: 0 auto;

  828. 			display: flex;

  829. 			justify-content: center;

  830. 			align-items: center;

  831. 			flex-direction: column;

  832. 			background-color: #fff;

  833. 			.img{

  834. 				width: 400rpx;

  835. 				height: 400rpx;

  836. 			}

  837. 			.text{

  838. 				text-align: center;

  839. 				font-size: 28rpx;

  840. 				font-family: PingFangSC-Regular, PingFang SC;

  841. 				font-weight: 400;

  842. 				color: #666666;

  843. 				line-height: 40rpx;

  844. 			}

  845. 		}

  846. 

  847. 		.briefing {

  848. 			background: #fff;

  849. 

  850. 			.briefing-title {

  851. 				padding: 0 30rpx;

  852. 				height: 90rpx;

  853. 				display: flex;

  854. 				align-items: center;

  855. 				border: 1rpx solid #E0E0E0;

  856. 				font-size: 32rpx;

  857. 				font-weight: bold;

  858. 			}

  859. 

  860. 			.briefing-box {

  861. 				width: 100%;

  862. 				display: flex;

  863. 				flex-wrap: wrap;

  864. 

  865. 				.briefing-box-item {

  866. 					padding: 20rpx 30rpx;

  867. 					width: 50%;

  868. 					height: 186rpx;

  869. 					border: 1px solid #E0E0E0;

  870. 					border-left: none;

  871. 					border-top: none;

  872. 

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

  874. 						border-right: none;

  875. 					}

  876. 

  877. 					.top {

  878. 						font-size: 28rpx;

  879. 					}

  880. 

  881. 					.middle {

  882. 						margin: 14rpx 0 12rpx;

  883. 						font-size: 32rpx;

  884. 						font-weight: 600;

  885. 						color: #333333;

  886. 					}

  887. 

  888. 					.bottom {

  889. 						font-size: 26rpx;

  890. 						color: #666666;

  891. 

  892. 						.b-text {

  893. 							margin-left: 20rpx;

  894. 

  895. 

  896. 							&.down {

  897. 								color: #43CD80;

  898. 								font-size: 34rpx;

  899. 							}

  900. 

  901. 							&.up {

  902. 								font-size: 34rpx;

  903. 								color: #E7483C;

  904. 							}

  905. 						}

  906. 					}

  907. 				}

  908. 			}

  909. 		}

  910. 

  911. 

  912. 		.execution-ranking {

  913. 			margin: 20rpx 0 0 0;

  914. 			padding: 30rpx;

  915. 			background: #fff;

  916. 

  917. 			.execution-ranking-title {

  918. 				font-size: 32rpx;

  919. 				font-weight: bold;

  920. 			}

  921. 

  922. 			.execution-ranking-desc {

  923. 				margin-top: 20rpx;

  924. 				font-size: 30rpx;

  925. 			}

  926. 

  927. 			.ranking-box {

  928. 				margin: 30rpx 0 0 0;

  929. 

  930. 				.ranking-item {

  931. 					margin-bottom: 18rpx;

  932. 					display: flex;

  933. 

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

  935. 						margin-bottom: 0;

  936. 					}

  937. 

  938. 					.left {

  939. 						flex-shrink: 0;

  940. 						width: 140rpx;

  941. 						font-size: 30rpx;

  942. 						overflow: hidden;

  943. 						text-overflow: ellipsis;

  944. 						white-space: nowrap;

  945. 					}

  946. 

  947. 					.middle {

  948. 						flex-grow: 1;

  949. 					}

  950. 

  951. 					.right {

  952. 						flex-shrink: 0;

  953. 						width: 118rpx;

  954. 						font-size: 30rpx;

  955. 						text-align: center;

  956. 					}

  957. 				}

  958. 			}

  959. 		}

  960. 

  961. 		.statistics {

  962. 			margin: 20rpx 0 0 0;

  963. 			background: #fff;

  964. 

  965. 			.statistics-title {

  966. 				padding: 30rpx 30rpx 0;

  967. 				width: 100%;

  968. 				font-size: 32rpx;

  969. 				font-weight: bold;

  970. 			}

  971. 

  972. 			.statistics-desc {

  973. 				padding: 0 30rpx;

  974. 				margin-top: 20rpx;

  975. 			}

  976. 

  977. 			.table {

  978. 				margin: 30rpx 0 0 0;

  979. 

  980. 				.thead {

  981. 					padding: 0 30rpx;

  982. 					width: 100%;

  983. 					height: 72rpx;

  984. 					display: flex;

  985. 					align-items: center;

  986. 					border: 1rpx solid #E0E0E0;

  987. 					border-left: none;

  988. 					border-right: none;

  989. 					font-size: 26rpx;

  990. 

  991. 					.thead-item {

  992. 						text-align: center;

  993. 					}

  994. 				}

  995. 

  996. 				.tbody {

  997. 

  998. 					.tbody-item {

  999. 						padding: 0 30rpx;

  1000. 						display: flex;

  1001. 						align-items: center;

  1002. 						height: 72rpx;

  1003. 						background: #FAFCFF;

  1004. 

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

  1006. 							background: #FFFFFF;

  1007. 						}

  1008. 

  1009. 						.tbody-items {

  1010. 							flex: 1;

  1011. 							display: flex;

  1012. 							justify-content: center;

  1013. 						}

  1014. 

  1015. 						.name {

  1016. 							justify-content: flex-start;

  1017. 							overflow: hidden;

  1018. 							text-overflow: ellipsis;

  1019. 							white-space: nowrap;

  1020. 						}

  1021. 

  1022. 						.time {

  1023. 							flex: 2;

  1024. 						}

  1025. 

  1026. 						.percent {

  1027. 							flex: 2;

  1028. 						}

  1029. 

  1030. 						.week {

  1031. 							flex: 1.5;

  1032. 						}

  1033. 					}

  1034. 				}

  1035. 

  1036. 				.tbottom {

  1037. 					width: 100%;

  1038. 					height: 72rpx;

  1039. 					display: flex;

  1040. 					justify-content: center;

  1041. 					align-items: center;

  1042. 					font-size: 30rpx;

  1043. 					color: #2671E2;

  1044. 					background: #FAFCFF;

  1045. 				}

  1046. 			}

  1047. 		}

  1048. 

  1049. 		.guwen-ranking {

  1050. 			margin: 20rpx 0 0 0;

  1051. 			width: 100%;

  1052. 			padding: 30rpx;

  1053. 			background: #fff;

  1054. 

  1055. 			.guwen-ranking-title {

  1056. 				font-size: 32rpx;

  1057. 				font-weight: 500;

  1058. 			}

  1059. 

  1060. 			.guwen-ranking-desc {

  1061. 				margin-top: 20rpx;

  1062. 				font-size: 30rpx;

  1063. 			}

  1064. 

  1065. 			.ranking-box {

  1066. 				margin: 30rpx 0 0 0;

  1067. 

  1068. 				.ranking-item {

  1069. 					margin-bottom: 18rpx;

  1070. 					display: flex;

  1071. 

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

  1073. 						margin-bottom: 0;

  1074. 					}

  1075. 

  1076. 					.left {

  1077. 						flex-shrink: 0;

  1078. 						width: 140rpx;

  1079. 						font-size: 30rpx;

  1080. 						overflow: hidden;

  1081. 						text-overflow: ellipsis;

  1082. 						white-space: nowrap;

  1083. 					}

  1084. 

  1085. 					.middle {

  1086. 						flex-grow: 1;

  1087. 					}

  1088. 

  1089. 					.right {

  1090. 						flex-shrink: 0;

  1091. 						width: 118rpx;

  1092. 						font-size: 30rpx;

  1093. 						text-align: center;

  1094. 					}

  1095. 				}

  1096. 			}

  1097. 		}

  1098. 

  1099. 		.proposal {

  1100. 			margin: 20rpx 0 0 0;

  1101. 			padding: 30rpx;

  1102. 			background: #fff;

  1103. 

  1104. 			.proposal-title {

  1105. 				font-size: 32rpx;

  1106. 				font-weight: 500;

  1107. 			}

  1108. 

  1109. 			.proposal-box {

  1110. 				margin: 30rpx 0 0 0;

  1111. 

  1112. 				.proposal-item {

  1113. 					margin: 20rpx 0 0 0;

  1114. 					display: flex;

  1115. 

  1116. 					.lside {

  1117. 						flex-shrink: 0;

  1118. 						margin: 0 12rpx 0 0;

  1119. 						width: 44rpx;

  1120. 						height: 44rpx;

  1121. 						border-radius: 50%;

  1122. 						background: #2671E2;

  1123. 						text-align: center;

  1124. 						line-height: 44rpx;

  1125. 						color: #fff;

  1126. 					}

  1127. 

  1128. 					.rside {

  1129. 

  1130. 						.rside-title {

  1131. 							font-size: 32rpx;

  1132. 						}

  1133. 

  1134. 						.rside-box {

  1135. 							margin: 16rpx 0 0 0;

  1136. 						}

  1137. 					}

  1138. 				}

  1139. 			}

  1140. 

  1141. 		}

  1142. 

  1143. 

  1144. 

  1145. 		.nav-footer {

  1146. 			position: sticky;

  1147. 			bottom: 0;

  1148. 			padding: 32rpx;

  1149. 			width: 100%;

  1150. 			display: flex;

  1151. 			justify-content: center;

  1152. 			background: #fff;

  1153. 

  1154. 			.footer-item {

  1155. 				flex: 1;

  1156. 				height: 88rpx;

  1157. 				display: flex;

  1158. 				justify-content: center;

  1159. 				align-items: center;

  1160. 				color: #2671E2;

  1161. 				border: 2rpx solid #2671E2;

  1162. 				border-radius: 8rpx;

  1163. 				overflow: hidden;

  1164. 				font-size: 32rpx;

  1165. 

  1166. 				&.full {

  1167. 					background: #2671E2;

  1168. 					color: #fff;

  1169. 

  1170. 					.fulls {

  1171. 						box-sizing: border-box;

  1172. 						width: 100%;

  1173. 						height: 100%;

  1174. 						background: transparent;

  1175. 						color: #fff;

  1176. 						font-size: 32rpx;

  1177. 						font-weight: normal;

  1178. 						line-height: 88rpx;

  1179. 					}

  1180. 				}

  1181. 			}

  1182. 

  1183. 		}

  1184. 

  1185. 		.up {

  1186. 			color: #43CD80 !important;

  1187. 		}

  1188. 

  1189. 		.down {

  1190. 			color: #E6273A !important;

  1191. 		}

  1192. 

  1193. 		.empity {

  1194. 			width: 100%;

  1195. 			height: 300rpx;

  1196. 			display: flex;

  1197. 			justify-content: center;

  1198. 			align-items: center;

  1199. 			font-size: 28rpx;

  1200. 			color: #666666;

  1201. 		}

  1202. 	}

  1203. </style>