Acher
/
newEdition
1
0
派生 0
代码 工单 0 合并请求 0 版本发布 0 百科 动态
AI销管
您最多选择25个主题 主题必须以字母或数字开头，可以包含连字符 (-)，并且长度不得超过35个字符
17 提交
13 分支
9.9 MiB
 
 
 
 
目录树: 2247535e6e
分支列表 标签列表
${ item.name }
创建分支 ${ searchTerm }
从 '2247535e6e'
${ noResults }
newEdition/pages/center/Piabodata/StaffAnalysis.vue

629 行
16 KiB
原始文件 Blame 文件历史 

  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. 					:opts="opts"

  130. 				    :chartData="chartData"

  131. 				    :canvas2d="true"

  132. 					canvasId="wangxiaohuaerlingeryilinwuycsdx"

  133. 				    background="none"

  134. 					 :loadingType="0"

  135. 				  />

  136. 			</view>

  137. 		</view>

  138. 		

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

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

  141. 		

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

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

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

  145. 	</view>

  146. </template>

  147. <script>

  148. 	export default {

  149. 		data() {

  150. 			return {

  151. 				timepickpickisshow:true,

  152. 				totalTimeShow: false,

  153. 				activeTotal:4,

  154. 				activeTotal2:1,

  155. 				// 楼盘id

  156. 				houseId:'',

  157. 				staffList:[],

  158. 				staffList1:[],

  159. 				staffShow:false,

  160. 				staffShow1:false,

  161. 				newTeam1:'',

  162. 				newAvg1:'',

  163. 				newTeam2:'',

  164. 				newAvg2:'',

  165. 				newTeam3:'',

  166. 				newAvg3:'',

  167. 				staff1:{

  168. 					value:'',

  169. 					label:''

  170. 				},

  171. 				staff2:{

  172. 					value:'',

  173. 					label:'平均'

  174. 				},

  175. 				lastStartDate:'',

  176. 				lastEndDate :'',

  177. 				selindex:[0],

  178. 				choseStaffFlag:false,

  179. 				lineOptsect:{

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

  181. 					"series": [

  182. 						{

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

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

  185. 						},

  186. 						{

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

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

  189. 						}

  190. 					]

  191. 				},

  192. 				lineOptsect1:{

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

  194. 					"series": [

  195. 						{

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

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

  198. 						},

  199. 						{

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

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

  202. 						}

  203. 					]

  204. 				},

  205. 				lineOptsect2:{

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

  207. 					"series": [

  208. 						{

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

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

  211. 						},

  212. 						{

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

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

  215. 						}

  216. 					]

  217. 				},

  218. 				chartData:{

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

  220. 					"series": [

  221. 						{

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

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

  224. 						}

  225. 					]

  226. 				},

  227. 				opts: {

  228. 					fontSize: 10,

  229. 					extra: {

  230. 						radar: {

  231. 							max: 100

  232. 						}

  233. 					}

  234. 				}

  235. 			};

  236. 			

  237. 		},

  238. 		

  239. 		onLoad: function(options) {

  240. 				// 获取楼盘id

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

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

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

  244. 				this.getStaffList()

  245. 		},

  246. 		methods: {

  247. 			//是否对比

  248. 			checkboxChange(){

  249. 				this.timepickpickisshow=!this.timepickpickisshow;

  250. 				this.staff2.value=''

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

  252. 				// this.getreception()

  253. 				// this.getRecordList()

  254. 				// this.getAwardList()

  255. 				// this.getAward()

  256. 				this.getdata()

  257. 			},

  258. 			// 点击员工对比

  259. 			chiocStaff(idx){

  260. 				if(idx==0){

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

  262. 					this.choseStaffFlag=false

  263. 					this.staffShow=true

  264. 				}else{

  265. 					this.choseStaffFlag=true

  266. 					this.staffShow1=true

  267. 				}

  268. 				

  269. 			},

  270. 			// 获取员工列表

  271. 			getStaffList(){

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

  273. 				.then(res=>{

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

  275. 					this.staffList=[]

  276. 					this.staffList1=[]

  277. 					res.map(item=>{

  278. 						let obj={}

  279. 						obj.value=item.accountId

  280. 						obj.label=item.name

  281. 						this.staffList.push(obj)

  282. 					})

  283. 					this.staffList1=[...this.staffList]

  284. 					this.staffList1.unshift({

  285. 							value:'',

  286. 							label:'平均'

  287. 						})

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

  289. 					// this.getreception()

  290. 					// this.getRecordList()

  291. 					// this.getAwardList()

  292. 					// this.getAward()

  293. 					this.getdata()

  294. 				})

  295. 			},

  296. 			getdata(){

  297. 				this.getreception()

  298. 				this.getRecordList()

  299. 				this.getAward()

  300. 				this.getAwardList()

  301. 

  302. 			},

  303. 			// 获取接待量数据

  304. 			getreception(){

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

  306. 					userA:this.staff1.value,

  307. 					userB:this.staff2.value,

  308. 					houseId:this.houseId,

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

  310. 					lastEndDate:this.lastEndDate,

  311. 					lastStartDate:this.lastStartDate

  312. 				})

  313. 				.then(res=>{

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

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

  316. 					// console.log(res)

  317. 					let first=res.first

  318. 					let second=res.second

  319. 					this.lineOptsect.categories=[]

  320. 					if(!this.timepickpickisshow){

  321. 						this.lineOptsect.series=[

  322. 							{

  323. 								name:first[0].accountName,

  324. 								data:[]

  325. 							}

  326. 						]

  327. 						first.map(item=>{

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

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

  330. 						})

  331. 					}else{

  332. 						this.lineOptsect.series=[

  333. 							{

  334. 								name:first[0].accountName,

  335. 								data:[]

  336. 							},

  337. 							{

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

  339. 								"data": []

  340. 							}

  341. 						]

  342. 						first.map(item=>{

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

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

  345. 						})

  346. 						second.map(item=>{

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

  348. 						})

  349. 					}

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

  351. 				})

  352. 			},

  353. 			// 销奖趋势

  354. 			getAward(){

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

  356. 					userA:this.staff1.value,

  357. 					userB:this.staff2.value,

  358. 					houseId:this.houseId,

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

  360. 					lastEndDate:this.lastEndDate,

  361. 					lastStartDate:this.lastStartDate

  362. 				})

  363. 				.then(res=>{

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

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

  366. 					// console.log(res)

  367. 					let first=res.first

  368. 					let second=res.second

  369. 					this.lineOptsect2.categories=[]

  370. 					if(!this.timepickpickisshow){

  371. 						this.lineOptsect2.series=[

  372. 							{

  373. 								name:first[0].accountName,

  374. 								data:[]

  375. 							}

  376. 						]

  377. 						first.map(item=>{

  378. 							// console.log(item)

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

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

  381. 						})

  382. 					}else{

  383. 						this.lineOptsect2.series=[

  384. 							{

  385. 								name:first[0].accountName,

  386. 								data:[]

  387. 							},

  388. 							{

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

  390. 								"data": []

  391. 							}

  392. 						]

  393. 						first.map(item=>{

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

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

  396. 						})

  397. 						second.map(item=>{

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

  399. 						})

  400. 					}

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

  402. 				})

  403. 			},

  404. 			// 获取有效录音

  405. 			async getRecordList(){

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

  407. 				let res=null

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

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

  410. 					userA:this.staff1.value,

  411. 					userB:this.staff2.value,

  412. 					houseId:this.houseId,

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

  414. 					lastEndDate:this.lastEndDate,

  415. 					lastStartDate:this.lastStartDate

  416. 				})

  417. 				}else{

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

  419. 					userA:this.staff1.value,

  420. 					userB:this.staff2.value,

  421. 					houseId:this.houseId,

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

  423. 					lastEndDate:this.lastEndDate,

  424. 					lastStartDate:this.lastStartDate

  425. 				})

  426. 				}

  427. 				// console.log(res)

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

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

  430. 				let first=res.first

  431. 				let second=res.second

  432. 				this.lineOptsect1.categories=[]

  433. 				if(!this.timepickpickisshow){

  434. 					this.lineOptsect1.series=[

  435. 						{

  436. 							name:first[0].accountName,

  437. 							data:[]

  438. 						}

  439. 					]

  440. 					first.map(item=>{

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

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

  443. 					})

  444. 				}else{

  445. 					this.lineOptsect1.series=[

  446. 						{

  447. 							name:first[0].accountName,

  448. 							data:[]

  449. 						},

  450. 						{

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

  452. 							"data": []

  453. 						}

  454. 					]

  455. 					first.map(item=>{

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

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

  458. 					})

  459. 					second.map(item=>{

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

  461. 					})

  462. 				}

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

  464. 			},

  465. 			// 获取销奖能力

  466. 			getAwardList(){

  467. 				this.chartData={

  468. 					categories:[],

  469. 					series:[]

  470. 				}

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

  472. 					userA:this.staff1.value,

  473. 					userB:this.staff2.value,

  474. 					houseId:this.houseId,

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

  476. 					lastEndDate:this.lastEndDate,

  477. 					lastStartDate:this.lastStartDate

  478. 				})

  479. 				.then(res=>{

  480. 					// console.log(res)

  481. 					let first=res.first

  482. 					let second=res.second

  483. 					this.chartData.categories=[]

  484. 					if(!this.timepickpickisshow){

  485. 						this.chartData.series=[

  486. 							{

  487. 								name:first[0].accountName,

  488. 								data:[]

  489. 							}

  490. 						]

  491. 						first.map(item=>{

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

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

  494. 						})

  495. 					}else{

  496. 						this.chartData.series=[

  497. 							{

  498. 								name:first[0].accountName,

  499. 								data:[]

  500. 							},

  501. 							{

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

  503. 								"data": []

  504. 							}

  505. 						]

  506. 						first.map(item=>{

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

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

  509. 						})

  510. 						second.map(item=>{

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

  512. 						})

  513. 					}

  514. 				

  515. 				})

  516. 			},

  517. 			tabtimetap(index){

  518. 				if (index == 3) {

  519. 					this.totalTimeShow = true;

  520. 				} else {

  521. 					this.activeTotal = index;

  522. 					this.lastEndDate=''

  523. 					this.lastStartDate=''

  524. 					// 获取数据

  525. 					// this.getreception()

  526. 					// this.getRecordList()

  527. 					// this.getAwardList()

  528. 					this.getdata()

  529. 				}

  530. 			},

  531. 			tabtimetap1(index){

  532. 				this.activeTotal2 = index;

  533. 				// 调用方法

  534. 				this.getRecordList()

  535. 			},

  536. 			//自定义时间

  537. 			totalTimeChange(e) {

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

  539. 				this.activeTotal=3;

  540. 				this.lastEndDate=e.endDate

  541. 				this.lastStartDate=e.startDate

  542. 				// 获取数据

  543. 				// this.getreception()

  544. 				// this.getRecordList()

  545. 				// this.getAwardList()

  546. 				this.getdata()

  547. 			},

  548. 			staffSelectCallback(e){

  549. 				if(this.choseStaffFlag){

  550. 					// 第二个客户

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

  552. 					this.staff2=e[0]

  553. 				}else{

  554. 					// 第一个客户

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

  556. 					this.staff1=e[0]

  557. 				}

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

  559. 					uni.showToast({

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

  561. 						icon:'none'

  562. 					})

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

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

  565. 					// this.staff2.value=''

  566. 					return

  567. 				}else{

  568. 					// 获取数据

  569. 					// this.getreception()

  570. 					// this.getRecordList()

  571. 					// this.getAwardList()

  572. 					this.getdata()

  573. 				}

  574. 				

  575. 				

  576. 			},

  577. 		},

  578. 	}

  579. </script>

  580. <style lang="scss" scoped>

  581. 	.boxtittab {

  582. 		position: sticky;

  583. 		top: var(--window-top);

  584. 		z-index: 999;

  585. 	}

  586. 	

  587. 	// 对比时间切换

  588. 	.timepick{

  589. 		width: 100%;

  590. 		height: 90rpx;

  591. 		display: flex;

  592. 		align-items: center;

  593. 		background: #FAFAFA;

  594. 	}

  595. 	.timepicktime{

  596. 		width: 260rpx;

  597. 		height: 50rpx;

  598. 		border: 1rpx solid #E0E0E0;

  599. 		margin-left: 30rpx;

  600. 		display: flex;

  601. 		background: #FFFFFF;

  602. 	}

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

  604. 		width: 210rpx;

  605. 		height: 100%;

  606. 		line-height: 50rpx;

  607. 		font-size: 26rpx;

  608. 		font-weight: 400;

  609. 		text-align: center;

  610. 	}

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

  612. 		width: 49rpx;

  613. 		height: 100%;

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

  615. 	}

  616. 	.timepickpick{

  617. 		width: 110rpx;

  618. 		height: 50rpx;

  619. 		margin-left: 30rpx;

  620. 		display: flex;

  621. 		align-items: center;

  622. 	}

  623. 	.Underimg{

  624. 		width: 50rpx;

  625. 		height:50rpx;

  626. 		margin-top: -2rpx;

  627. 	}

  628. </style>