liumin
/
NewZkgj
1
0
Fork 0
Código Issues 0 Pull requests 0 Versões 0 Wiki Atividade
Você não pode selecionar mais de 25 tópicos Os tópicos devem começar com uma letra ou um número, podem incluir traços ('-') e podem ter até 35 caracteres.
75 Commits
7 Branches
28 MiB
 
 
 
Tag: 85d71c2063
Branches Tags
${ item.name }
Criar branch ${ searchTerm }
de 85d71c2063
${ noResults }
NewZkgj/pages/center/Piabodata/StaffAnalysis.vue

609 linhas
16 KiB
Original Anotar Histórico 

  1. <template>

  2. 	<view>

  3. 		<view class="boxtittab">

  4. 			<view class="tabbox">

  5. 				<view :class="{ activecllasscet: activeTotal == 4 }" @click="tabtimetap(4)">近七天</view>

  6. 			</view>

  7. 			<view class="tabbox">

  8. 				<view :class="{ activecllasscet: activeTotal == 5 }" @click="tabtimetap(5)">近15天</view>

  9. 			</view>

  10. 			<view class="tabbox">

  11. 				<view :class="{ activecllasscet: activeTotal == 6 }" @click="tabtimetap(6)">近30天</view>

  12. 			</view>

  13. 			<view class="tabbox">

  14. 				<view :class="{ activecllasscet: activeTotal == 3 }" @click="tabtimetap(3)">自定义</view>

  15. 			</view>

  16. 		</view>

  17. 		

  18. 		<view class="timepick">

  19. 			<view class="timepicktime" @click="chiocStaff(0)">

  20. 				<view>{{staff1.label}}</view>

  21. 				<view>

  22. 					<image class="Underimg" src="../../../static/images/Underimg.png" mode=""></image>

  23. 				</view>

  24. 			</view>

  25. 			<view class="timepickpick">

  26. 				 <view @click="checkboxChange()" style="width: 40rpx;height:40rpx;border: 1rpx solid #E0E0E0;">

  27. 					<image v-if="timepickpickisshow" style="width: 40rpx;height: 40rpx;" src="../../../static/images/xuanzhong.png" mode=""></image>

  28. 				 </view>  

  29. 				 <view style="font-size:26rpx;text-indent: 12rpx;">对比</view> 

  30. 			</view>

  31. 			<view class="timepicktime" v-if="timepickpickisshow" @click="chiocStaff(1)">

  32. 				<view>{{staff2.label}}</view>

  33. 				<view>

  34. 					<image class="Underimg" src="../../../static/images/Underimg.png" mode=""></image>

  35. 				</view>

  36. 			</view>

  37. 		</view>

  38. 		

  39. 		<view style="width: 100%;height: 20rpx;background: #FAFAFA;"></view>

  40. 		<view class="single">

  41. 			<view class="title">

  42. 				<view class="title1" style="flex: 1;">接待量</view>

  43. 			</view>

  44. 			<view class="hejibox">

  45. 				<view class="heji">{{staff1.label}}：{{newTeam1||0}}</view>

  46. 				<view class="heji" v-if="timepickpickisshow">{{staff2.label}}：{{newAvg1||0}}</view>

  47. 			</view>

  48. 			<view class="danwei">来访(人)</view>

  49. 			<view class="uchaserbox">

  50. 				<qiun-data-charts

  51. 				   type="line"

  52. 				   :chartData="lineOptsect"

  53. 				   background="none"

  54. 				   :ontouch="true"

  55. 					canvasId="wangxiaohuaerlingeryilingwuyibbb"

  56. 					:canvas2d="true"

  57. 				 /> 

  58. 			</view>

  59. 		</view>

  60. 		

  61. 		<view style="width: 100%;height: 20rpx;background: #FAFAFA;"></view>

  62. 		<view class="single">

  63. 			<view class="title">

  64. 				<view class="title1" style="flex: 1;">录音时长</view>

  65. 				<view class="title3" style="flex: 1;">

  66. <!-- 					<view class="title3-box" style="width: 40%;" @click="tabtimetap1(0)">

  67. 						<view style="height: 42rpx;" :class="{ activecltab: activeTotal2 == 0 }">有效录音</view>

  68. 					</view>

  69. 					<view class="title3-box" style="width: 40%;"@click="tabtimetap1(1)">

  70. 						<view style="height: 42rpx;" :class="{ activecltab: activeTotal2 == 1 }">录音时长</view>

  71. 					</view> -->

  72. 				</view>

  73. 			</view>

  74. 			<view class="hejibox">

  75. 				<view class="heji">{{staff1.label}}：{{newTeam2||0}}</view>

  76. 				<view class="heji" v-if="timepickpickisshow">{{staff2.label}}：{{newAvg2||0}}</view>

  77. 			</view>

  78. 			<view class="danwei">录音时长</view>

  79. 			<view class="uchaserbox">

  80. 				<qiun-data-charts

  81. 				   type="line"

  82. 				   :chartData="lineOptsect1"

  83. 				   background="none"

  84. 				   :ontouch="true"

  85. 					canvasId="wangxiaouaerlingeryilingwuyibhh"

  86. 					:canvas2d="true"

  87. 				 /> 

  88. 			</view>

  89. 		</view>

  90. 		

  91. 		<view style="width: 100%;height: 20rpx;background: #FAFAFA;"></view>

  92. 				<view class="single">

  93. 					<view class="title">

  94. 						<view class="title1" style="flex: 1;">销讲执行率</view>

  95. 						<view class="title3" style="flex: 1;">

  96. 		<!-- 					<view class="title3-box" style="width: 40%;" @click="tabtimetap1(0)">

  97. 								<view style="height: 42rpx;" :class="{ activecltab: activeTotal2 == 0 }">有效录音</view>

  98. 							</view>

  99. 							<view class="title3-box" style="width: 40%;"@click="tabtimetap1(1)">

  100. 								<view style="height: 42rpx;" :class="{ activecltab: activeTotal2 == 1 }">录音时长</view>

  101. 							</view> -->

  102. 						</view>

  103. 					</view>

  104. 					<view class="hejibox">

  105. 						<view class="heji">{{staff1.label}}：{{newTeam3||0}}</view>

  106. 						<view class="heji" v-if="timepickpickisshow">{{staff2.label}}：{{newAvg3||0}}</view>

  107. 					</view>

  108. 					<!-- <view class="danwei">录音时长</view> -->

  109. 					<view class="uchaserbox">

  110. 						<qiun-data-charts

  111. 						   type="line"

  112. 						   :chartData="lineOptsect2"

  113. 						   background="none"

  114. 						   :ontouch="true"

  115. 							canvasId="wangxiaohuaerlingryilingwuyibhh"

  116. 							:canvas2d="true"

  117. 						 /> 

  118. 					</view>

  119. 				</view>

  120. 		

  121. 		<view style="width: 100%;height: 20rpx;background: #FAFAFA;"></view>

  122. 		<view class="single">

  123. 			<view class="title" style="padding-right: 30rpx;">

  124. 				<view class="title1" style="flex: 1;">销讲能力</view>

  125. 			</view>

  126. 			<view class="uchaserbox">

  127. 				 <qiun-data-charts

  128. 				    type="radar"

  129. 				    :chartData="chartData"

  130. 				    :canvas2d="true"

  131. 					canvasId="wangxiaohuaerlingeryilinwuycsdx"

  132. 				    background="none"

  133. 				  />

  134. 			</view>

  135. 		</view>

  136. 		

  137. 		<!-- <u-calendar v-model="totalTimeShow" mode="range" @change="totalTimeChange"></u-calendar> -->

  138. 		<u-calendar v-model="totalTimeShow" mode="range" @change="totalTimeChange"></u-calendar>

  139. 		

  140. 		<!-- 选择客户的选择框 -->

  141. 		<u-select v-model="staffShow" :list="staffList" @confirm="staffSelectCallback" :default-value='selindex'></u-select>

  142. 		<u-select v-model="staffShow1" :list="staffList1" @confirm="staffSelectCallback" :default-value='selindex'></u-select>

  143. 	</view>

  144. </template>

  145. <script>

  146. 	export default {

  147. 		data() {

  148. 			return {

  149. 				timepickpickisshow:true,

  150. 				totalTimeShow: false,

  151. 				activeTotal:4,

  152. 				activeTotal2:1,

  153. 				// 楼盘id

  154. 				houseId:'',

  155. 				staffList:[],

  156. 				staffList1:[],

  157. 				staffShow:false,

  158. 				staffShow1:false,

  159. 				newTeam1:'',

  160. 				newAvg1:'',

  161. 				newTeam2:'',

  162. 				newAvg2:'',

  163. 				newTeam3:'',

  164. 				newAvg3:'',

  165. 				staff1:{

  166. 					value:'',

  167. 					label:''

  168. 				},

  169. 				staff2:{

  170. 					value:'',

  171. 					label:'平均'

  172. 				},

  173. 				lastStartDate:'',

  174. 				lastEndDate :'',

  175. 				selindex:[0],

  176. 				choseStaffFlag:false,

  177. 				lineOptsect:{

  178. 					"categories": ["2016","2017","2018","2019","2020","2021"],

  179. 					"series": [

  180. 						{

  181. 							"name": "成交量1",

  182. 							"data": [35,8,25,37,4,20]

  183. 						},

  184. 						{

  185. 							"name": "成交量2",

  186. 							"data": [40,18,45,44,10,60]

  187. 						}

  188. 					]

  189. 				},

  190. 				lineOptsect1:{

  191. 					"categories": ["2016","2017","2018","2019","2020","2021"],

  192. 					"series": [

  193. 						{

  194. 							"name": "成交量1",

  195. 							"data": [35,8,25,37,4,20]

  196. 						},

  197. 						{

  198. 							"name": "成交量2",

  199. 							"data": [40,18,45,44,10,60]

  200. 						}

  201. 					]

  202. 				},

  203. 				lineOptsect2:{

  204. 					"categories": ["2016","2017","2018","2019","2020","2021"],

  205. 					"series": [

  206. 						{

  207. 							"name": "成交量1",

  208. 							"data": [35,8,25,37,4,20]

  209. 						},

  210. 						{

  211. 							"name": "成交量2",

  212. 							"data": [40,18,45,44,10,60]

  213. 						}

  214. 					]

  215. 				},

  216. 				chartData:{

  217. 					"categories": ["维度1","维度2","维度3","维度4","维度5","维度6"],

  218. 					"series": [

  219. 						{

  220. 							"name": "成交量",

  221. 							"data": [90,110,165,195,187,172]

  222. 						}

  223. 					]

  224. 				}

  225. 			};

  226. 			

  227. 		},

  228. 		

  229. 		onLoad: function(options) {

  230. 				// 获取楼盘id

  231. 				this.houseId = uni.getStorageSync('buildingID').id;

  232. 				// this.buildingname = uni.getStorageSync('buildingID').name;

  233. 				// 请求接口获取所有置业顾问员工的列表

  234. 				this.getStaffList()

  235. 		},

  236. 		methods: {

  237. 			//是否对比

  238. 			checkboxChange(){

  239. 				this.timepickpickisshow=!this.timepickpickisshow;

  240. 				this.staff2.value=''

  241. 				this.staff2.label='平均'

  242. 				// this.getreception()

  243. 				// this.getRecordList()

  244. 				// this.getAwardList()

  245. 				// this.getAward()

  246. 				this.getdata()

  247. 			},

  248. 			// 点击员工对比

  249. 			chiocStaff(idx){

  250. 				if(idx==0){

  251. 					// 当选择了第一个的时候

  252. 					this.choseStaffFlag=false

  253. 					this.staffShow=true

  254. 				}else{

  255. 					this.choseStaffFlag=true

  256. 					this.staffShow1=true

  257. 				}

  258. 				

  259. 			},

  260. 			// 获取员工列表

  261. 			getStaffList(){

  262. 				this.$u.post('/cusLvStatistics/selectAllAccountIdByHouseId',{houseId:this.houseId})

  263. 				.then(res=>{

  264. 					// console.log(res,'123')

  265. 					this.staffList=[]

  266. 					this.staffList1=[]

  267. 					res.map(item=>{

  268. 						let obj={}

  269. 						obj.value=item.accountId

  270. 						obj.label=item.name

  271. 						this.staffList.push(obj)

  272. 					})

  273. 					this.staffList1=[...this.staffList]

  274. 					this.staffList1.unshift({

  275. 							value:'',

  276. 							label:'平均'

  277. 						})

  278. 					this.staff1=this.staffList[0]

  279. 					// this.getreception()

  280. 					// this.getRecordList()

  281. 					// this.getAwardList()

  282. 					// this.getAward()

  283. 					this.getdata()

  284. 				})

  285. 			},

  286. 			getdata(){

  287. 				this.getreception()

  288. 				this.getRecordList()

  289. 				this.getAward()

  290. 				this.getAwardList()

  291. 

  292. 			},

  293. 			// 获取接待量数据

  294. 			getreception(){

  295. 				this.$u.post('/cusLvStatistics/employeeAnalysisReception',{

  296. 					userA:this.staff1.value,

  297. 					userB:this.staff2.value,

  298. 					houseId:this.houseId,

  299. 					timeType:this.lastEndDate?null:this.activeTotal+'',

  300. 					lastEndDate:this.lastEndDate,

  301. 					lastStartDate:this.lastStartDate

  302. 				})

  303. 				.then(res=>{

  304. 					this.newTeam1=res.avg[0]

  305. 					this.newAvg1=res.avg[1]

  306. 					// console.log(res)

  307. 					let first=res.first

  308. 					let second=res.second

  309. 					this.lineOptsect.categories=[]

  310. 					if(!this.timepickpickisshow){

  311. 						this.lineOptsect.series=[

  312. 							{

  313. 								name:first[0].accountName,

  314. 								data:[]

  315. 							}

  316. 						]

  317. 						first.map(item=>{

  318. 							this.lineOptsect.categories.push(item.statDate.slice(5,10))

  319. 							this.lineOptsect.series[0].data.push(item.receptionCount||0)

  320. 						})

  321. 					}else{

  322. 						this.lineOptsect.series=[

  323. 							{

  324. 								name:first[0].accountName,

  325. 								data:[]

  326. 							},

  327. 							{

  328. 								"name": second[0].accountName,

  329. 								"data": []

  330. 							}

  331. 						]

  332. 						first.map(item=>{

  333. 							this.lineOptsect.categories.push(item.statDate.slice(5,10))

  334. 							this.lineOptsect.series[0].data.push(item.receptionCount)

  335. 						})

  336. 						second.map(item=>{

  337. 							this.lineOptsect.series[1].data.push(item.receptionCount)

  338. 						})

  339. 					}

  340. 					// console.log(this.lineOptsect,'1')

  341. 				})

  342. 			},

  343. 			// 销奖趋势

  344. 			getAward(){

  345. 				this.$u.post('/cusLvStatistics/employeeAnalysisExacutiveRate',{

  346. 					userA:this.staff1.value,

  347. 					userB:this.staff2.value,

  348. 					houseId:this.houseId,

  349. 					timeType:this.lastEndDate?null:this.activeTotal+'',

  350. 					lastEndDate:this.lastEndDate,

  351. 					lastStartDate:this.lastStartDate

  352. 				})

  353. 				.then(res=>{

  354. 					this.newTeam3=res.avg[0]

  355. 					this.newAvg3=res.avg[1]

  356. 					// console.log(res)

  357. 					let first=res.first

  358. 					let second=res.second

  359. 					this.lineOptsect2.categories=[]

  360. 					if(!this.timepickpickisshow){

  361. 						this.lineOptsect2.series=[

  362. 							{

  363. 								name:first[0].accountName,

  364. 								data:[]

  365. 							}

  366. 						]

  367. 						first.map(item=>{

  368. 							// console.log(item)

  369. 							this.lineOptsect2.categories.push(item.statDate.slice(5,10))

  370. 							this.lineOptsect2.series[0].data.push(item.sumFraction)

  371. 						})

  372. 					}else{

  373. 						this.lineOptsect2.series=[

  374. 							{

  375. 								name:first[0].accountName,

  376. 								data:[]

  377. 							},

  378. 							{

  379. 								"name": second[0].accountName,

  380. 								"data": []

  381. 							}

  382. 						]

  383. 						first.map(item=>{

  384. 							this.lineOptsect2.categories.push(item.statDate.slice(5,10))

  385. 							this.lineOptsect2.series[0].data.push(item.sumFraction)

  386. 						})

  387. 						second.map(item=>{

  388. 							this.lineOptsect2.series[1].data.push(item.sumFraction)

  389. 						})

  390. 					}

  391. 				// console.log(this.lineOptsect2,'3')

  392. 				})

  393. 			},

  394. 			// 获取有效录音

  395. 			async getRecordList(){

  396. 				// 当选择有效录音时

  397. 				let res=null

  398. 				if(this.activeTotal2==0){

  399. 					res= await this.$u.post('/cusLvStatistics/employeeAnalysisEffectiveRecording',{

  400. 					userA:this.staff1.value,

  401. 					userB:this.staff2.value,

  402. 					houseId:this.houseId,

  403. 					timeType:this.lastEndDate?null:this.activeTotal+'',

  404. 					lastEndDate:this.lastEndDate,

  405. 					lastStartDate:this.lastStartDate

  406. 				})

  407. 				}else{

  408. 					res= await this.$u.post('/cusLvStatistics/employeeAnalysisRecordingTime',{

  409. 					userA:this.staff1.value,

  410. 					userB:this.staff2.value,

  411. 					houseId:this.houseId,

  412. 					timeType:this.lastEndDate?null:this.activeTotal+'',

  413. 					lastEndDate:this.lastEndDate,

  414. 					lastStartDate:this.lastStartDate

  415. 				})

  416. 				}

  417. 				// console.log(res)

  418. 				this.newTeam2=res.avg[0]

  419. 				this.newAvg2=res.avg[1]

  420. 				let first=res.first

  421. 				let second=res.second

  422. 				this.lineOptsect1.categories=[]

  423. 				if(!this.timepickpickisshow){

  424. 					this.lineOptsect1.series=[

  425. 						{

  426. 							name:first[0].accountName,

  427. 							data:[]

  428. 						}

  429. 					]

  430. 					first.map(item=>{

  431. 						this.lineOptsect1.categories.push(item.statDate.slice(5,10))

  432. 						this.lineOptsect1.series[0].data.push(item.sumDuration)

  433. 					})

  434. 				}else{

  435. 					this.lineOptsect1.series=[

  436. 						{

  437. 							name:first[0].accountName,

  438. 							data:[]

  439. 						},

  440. 						{

  441. 							"name": second[0].accountName,

  442. 							"data": []

  443. 						}

  444. 					]

  445. 					first.map(item=>{

  446. 						this.lineOptsect1.categories.push(item.statDate.slice(5,10))

  447. 						this.lineOptsect1.series[0].data.push(item.sumDuration)

  448. 					})

  449. 					second.map(item=>{

  450. 						this.lineOptsect1.series[1].data.push(item.sumDuration)

  451. 					})

  452. 				}

  453. 				// console.log(this.lineOptsect1,'2')

  454. 			},

  455. 			// 获取销奖能力

  456. 			getAwardList(){

  457. 				this.$u.post('/cusLvStatistics/employeeAnalysisLevel1Fraction',{

  458. 					userA:this.staff1.value,

  459. 					userB:this.staff2.value,

  460. 					houseId:this.houseId,

  461. 					timeType:this.lastEndDate?null:this.activeTotal+'',

  462. 					lastEndDate:this.lastEndDate,

  463. 					lastStartDate:this.lastStartDate

  464. 				})

  465. 				.then(res=>{

  466. 					// console.log(res)

  467. 					let first=res.first

  468. 					let second=res.second

  469. 					this.chartData.categories=[]

  470. 					if(!this.timepickpickisshow){

  471. 						this.chartData.series=[

  472. 							{

  473. 								name:first[0].accountName,

  474. 								data:[]

  475. 							}

  476. 						]

  477. 						first.map(item=>{

  478. 							this.chartData.categories.push(item.name)

  479. 							this.chartData.series[0].data.push(item.avgExecutionRate)

  480. 						})

  481. 					}else{

  482. 						this.chartData.series=[

  483. 							{

  484. 								name:first[0].accountName,

  485. 								data:[]

  486. 							},

  487. 							{

  488. 								"name": second[0].accountName,

  489. 								"data": []

  490. 							}

  491. 						]

  492. 						first.map(item=>{

  493. 							this.chartData.categories.push(item.name)

  494. 							this.chartData.series[0].data.push(item.avgExecutionRate)

  495. 						})

  496. 						second.map(item=>{

  497. 							this.chartData.series[1].data.push(item.avgExecutionRate)

  498. 						})

  499. 					}

  500. 				

  501. 				})

  502. 			},

  503. 			tabtimetap(index){

  504. 				if (index == 3) {

  505. 					this.totalTimeShow = true;

  506. 				} else {

  507. 					this.activeTotal = index;

  508. 					this.lastEndDate=''

  509. 					this.lastStartDate=''

  510. 					// 获取数据

  511. 					// this.getreception()

  512. 					// this.getRecordList()

  513. 					// this.getAwardList()

  514. 					this.getdata()

  515. 				}

  516. 			},

  517. 			tabtimetap1(index){

  518. 				this.activeTotal2 = index;

  519. 				// 调用方法

  520. 				this.getRecordList()

  521. 			},

  522. 			//自定义时间

  523. 			totalTimeChange(e) {

  524. 				console.log(e.startDate, e.endDate)

  525. 				this.activeTotal=3;

  526. 				this.lastEndDate=e.endDate

  527. 				this.lastStartDate=e.startDate

  528. 				// 获取数据

  529. 				// this.getreception()

  530. 				// this.getRecordList()

  531. 				// this.getAwardList()

  532. 				this.getdata()

  533. 			},

  534. 			staffSelectCallback(e){

  535. 				if(this.choseStaffFlag){

  536. 					// 第二个客户

  537. 					// console.log(e,'第二个')

  538. 					this.staff2=e[0]

  539. 				}else{

  540. 					// 第一个客户

  541. 					// console.log(e,'第一个')

  542. 					this.staff1=e[0]

  543. 				}

  544. 				if(this.staff1.label==this.staff2.label){

  545. 					uni.showToast({

  546. 						title:'请勿选择重复',

  547. 						icon:'none'

  548. 					})

  549. 					this.staff2.label='请选择'

  550. 					// this.staff2.label='平均'

  551. 					// this.staff2.value=''

  552. 					return

  553. 				}else{

  554. 					// 获取数据

  555. 					// this.getreception()

  556. 					// this.getRecordList()

  557. 					// this.getAwardList()

  558. 					this.getdata()

  559. 				}

  560. 				

  561. 				

  562. 			},

  563. 		},

  564. 	}

  565. </script>

  566. <style lang="scss" scoped>

  567. 	// 对比时间切换

  568. 	.timepick{

  569. 		width: 100%;

  570. 		height: 90rpx;

  571. 		display: flex;

  572. 		align-items: center;

  573. 		background: #FAFAFA;

  574. 	}

  575. 	.timepicktime{

  576. 		width: 260rpx;

  577. 		height: 50rpx;

  578. 		border: 1rpx solid #E0E0E0;

  579. 		margin-left: 30rpx;

  580. 		display: flex;

  581. 		background: #FFFFFF;

  582. 	}

  583. 	.timepicktime>view:nth-of-type(1){

  584. 		width: 210rpx;

  585. 		height: 100%;

  586. 		line-height: 50rpx;

  587. 		font-size: 26rpx;

  588. 		font-weight: 400;

  589. 		text-align: center;

  590. 	}

  591. 	.timepicktime>view:nth-of-type(2){

  592. 		width: 49rpx;

  593. 		height: 100%;

  594. 		// border-left: 1px solid  #E0E0E0;

  595. 	}

  596. 	.timepickpick{

  597. 		width: 110rpx;

  598. 		height: 50rpx;

  599. 		margin-left: 30rpx;

  600. 		display: flex;

  601. 		align-items: center;

  602. 	}

  603. 	.Underimg{

  604. 		width: 50rpx;

  605. 		height:50rpx;

  606. 		margin-top: -2rpx;

  607. 	}

  608. </style>