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.
 
 
 

1356 lines
37 KiB

  1. <template>
  2. <view>
  3. <view class="timetabct">
  4. <view class="timetabctview">
  5. <view :class="{ activecllasscet: activeTotal == 0 }" @click="tabtimetap(0)">7天</view>
  6. </view>
  7. <view class="timetabctview">
  8. <view :class="{ activecllasscet: activeTotal == 1 }" @click="tabtimetap(1)">15天</view>
  9. </view>
  10. <view class="timetabctview">
  11. <view :class="{ activecllasscet: activeTotal == 2 }" @click="tabtimetap(2)">30天</view>
  12. </view>
  13. </view>
  14. <view class="timepick">
  15. <view class="timepicktime">
  16. <view @click="tabtimetap(3)">{{sheartime1}}</view>
  17. <view>
  18. <image class="Underimg" src="../../../static/images/Underimg.png" mode=""></image>
  19. </view>
  20. </view>
  21. <view class="timepickpick">
  22. <view @click="checkboxChange()" style="width: 40rpx;height:40rpx;border: 1rpx solid #E0E0E0;">
  23. <image v-if="timepickpickisshow" style="width: 40rpx;height: 40rpx;"
  24. src="../../../static/images/xuanzhong.png" mode=""></image>
  25. </view>
  26. <view style="font-size:26rpx;text-indent: 12rpx;">对比</view>
  27. </view>
  28. <view class="timepicktime" v-if="timepickpickisshow">
  29. <view @click="tabtimetap(4)">{{sheartime2}}</view>
  30. <view>
  31. <image class="Underimg" src="../../../static/images/Underimg.png" mode=""></image>
  32. </view>
  33. </view>
  34. </view>
  35. <view class="timeduibi">
  36. <view class="timeshow">数据起始时间:<text style="color: #333333;">{{kanbanlist.kaishitime}}</text></view>
  37. <view class="timeshow" v-if="kanbanlist.duibitime.length!=0">
  38. 数据对比时间:
  39. <text style="color: #333333;">{{kanbanlist.duibitime}}</text>
  40. </view>
  41. </view>
  42. <view style="width: 100%;height: 20rpx;background: #FAFAFA;"></view>
  43. <view class="boxzonglan" style="min-height: 100rpx;">
  44. <view class="zonglantit">简报</view>
  45. <view class="zonglanbox" >
  46. <view class="grid" v-for="(item,index) in numlist" :key="index" style="height: auto;padding-bottom: 20rpx;">
  47. <view class="audonum" v-if="item.name=='平均接待时长'">{{item.name}}/分</view>
  48. <view class="audonum" v-else>{{item.name}}</view>
  49. <view class="num" >
  50. <view class="" style="width: 35%;">
  51. {{index==1?item.num+'%':item.num}}
  52. </view>
  53. <view class="comparesize" v-if="compareFlag&&timepickpickisshow">
  54. <text style="margin-right: 10rpx;">对比:{{index==1?item.num1+'%':item.num1}} </text>
  55. <text :style="{color:item.num2*1>0?'red':'green'}">{{item.num2+'%'}} {{item.num2*1>0?'↑':'↓'}}</text>
  56. </view>
  57. </view>
  58. </view>
  59. </view>
  60. </view>
  61. <view style="width: 100%;height: 20rpx;background: #FAFAFA;"></view>
  62. <view class="boxtittab" style="border: none;height: 82rpx;">
  63. <view class="tabbox">
  64. <view :class="{ activecllasscet2: newactiveTotal == 0 }" @click="tabxuanxiangtap(0)">项目</view>
  65. </view>
  66. <view class="tabbox">
  67. <view :class="{ activecllasscet2: newactiveTotal == 1 }" @click="tabxuanxiangtap(1)">顾问</view>
  68. </view>
  69. <view class="tabbox">
  70. <view :class="{ activecllasscet2: newactiveTotal == 2 }" @click="tabxuanxiangtap(2)">团队</view>
  71. </view>
  72. <view class="tabbox">
  73. <view :class="{ activecllasscet2: newactiveTotal == 3 }" @click="tabxuanxiangtap(3)">销讲一级</view>
  74. </view>
  75. <view class="tabbox">
  76. <view :class="{ activecllasscet2: newactiveTotal == 4 }" @click="tabxuanxiangtap(4)">销讲二级</view>
  77. </view>
  78. </view>
  79. <view class="chart">
  80. <view style="display: flex;justify-content:center;padding-left: 30rpx;padding-right: 30rpx;margin-top: 16rpx;"
  81. v-if="guwenshow&&lopanobj.name" @click="oninputtap()">
  82. <view class="title2-che" style="width: 220rpx;">{{lopanobj.name}}
  83. <image class="righttochoose" src="../../../static/images/righttochoose.png" mode=""></image>
  84. </view>
  85. </view>
  86. <view style="padding: 30rpx;padding-bottom: 20rpx;align-items: center;" v-if="Selectlevel">
  87. <view style="display: flex;align-items: center;border-bottom: 1px solid #C9C9C9;height: 80rpx;">
  88. <view>选择一级:</view>
  89. <view style="width:75%;">
  90. <input @click="oninputtap2()" v-model="Selectlevelobj.name" type="text" disabled="true"
  91. :border="border" placeholder="请选择" />
  92. </view>
  93. <view>
  94. <image src="https://qufang.oss-cn-beijing.aliyuncs.com/upload/icon/xcx/jjycrm/qf/more.png"
  95. style="width:12rpx;height:23rpx;margin-left: 16rpx;">
  96. </view>
  97. <!-- <view style="display: flex;justify-content:center;padding-left: 30rpx;padding-right: 30rpx;margin-top: 16rpx;"
  98. v-if="Selectlevelobj.name" @click="oninputtap2()">
  99. <view class="title2-che" style="width: 220rpx;">{{Selectlevelobj.name}}
  100. <image class="righttochoose" src="../../../static/images/righttochoose.png" mode=""></image>
  101. </view>
  102. </view> -->
  103. </view>
  104. <view style="display: flex;align-items: center;border-bottom: 1px solid #C9C9C9;height: 80rpx;">
  105. <view>选择二级:</view>
  106. <view style="width:75%;">
  107. <input @click="oninputtap3()" v-model="erSelectlevelobj.name" type="text" disabled="true"
  108. :border="border" placeholder="请选择" />
  109. </view>
  110. <view>
  111. <image src="https://qufang.oss-cn-beijing.aliyuncs.com/upload/icon/xcx/jjycrm/qf/more.png"
  112. style="width:12rpx;height:23rpx;margin-left: 16rpx;">
  113. </view>
  114. <!-- <view style="display: flex;justify-content:center;padding-left: 30rpx;padding-right: 30rpx;margin-top: 16rpx;"
  115. v-if="erSelectlevelobj.name" @click="oninputtap3()">
  116. <view class="title2-che" style="width: 220rpx;">{{erSelectlevelobj.name}}
  117. <image class="righttochoose" src="../../../static/images/righttochoose.png" mode=""></image>
  118. </view>
  119. </view> -->
  120. </view>
  121. </view>
  122. <view style="display: flex;align-items: center;height: 80rpx;justify-content: center;" v-if="Selecttuandui&&Selecttuanduiobj.name"
  123. @click="oninputtap4()">
  124. <view class="title2-che" style="width: 220rpx;">{{Selecttuanduiobj.name}}
  125. <image class="righttochoose" src="../../../static/images/righttochoose.png" mode=""></image>
  126. </view>
  127. </view>
  128. <view class="single">
  129. <!-- <view class="danwei" style="margin-top: 10rpx;">销讲词执行率</view> -->
  130. <view class="uchaserbox" v-if="lineOptsect.series.length!=0">
  131. <qiun-data-charts :style="!showCanvas?'display:none':''" :type="linetype" :chartData="lineOptsect"
  132. background="none" :ontouch="true" canvasId="wangxiaohuaerlingeryilingwuyibao"
  133. :canvas2d="true" />
  134. </view>
  135. <view v-else style="width: 100%;">
  136. <view style="width: 100%;text-align: center;">
  137. <image style="width: 200rpx;height: 200rpx;"
  138. src="https://static.quhouse.com/zhikong_xcx_img/nodatalist.png" mode=""></image>
  139. </view>
  140. <view style="text-align: center;width: 100%;margin-top: 20rpx;color: #999999;">暂无数据</view>
  141. </view>
  142. </view>
  143. </view>
  144. <view style="width: 100%;height: 20rpx;background: #FAFAFA;"></view>
  145. <view class="single" v-if="timepickpickisshow">
  146. <view class="title">
  147. <view class="title1">对比报表</view>
  148. </view>
  149. <view class="table" v-if="!guwenFlag">
  150. <view v-for="(item,index) in tableDate" :key="index">
  151. <view class="tr">
  152. <view v-for="(item1,index1) in item" :key="index" style="width: 100%;">
  153. <view v-if="index1<item.length-1||index==0" class="td"
  154. style="border-right:1px solid #E0E0E0;">{{item1}}</view>
  155. <view v-if="index>0 && index1==item.length-1" class="td"
  156. style="border-right:1px solid #E0E0E0;" :style="{color:item1*1>0?'red':'green'}">
  157. {{item1==0?'--':item1+'%'}}{{item1*1>0?'↑':item1*1<0?'↓':''}}</view>
  158. </view>
  159. </view>
  160. </view>
  161. </view>
  162. <view class="table" v-if="guwenFlag" style="width: 100%;">
  163. <scroll-view scroll-x="true" style="white-space: nowrap;">
  164. <view v-for="(item,index) in tableDate" :key="index" :style="{display:index==0?'inline-block':'block'}">
  165. <view class="tr" style="display: inline-block;">
  166. <view v-for="(item1,index1) in item" :key="index1" class="trd" style="display: inline-block;">
  167. <view v-if="index==1&&index1>0" class="td" :style="{color:item1*1>0?'red':'green'}"
  168. style="border-right:1px solid #E0E0E0;">{{item1==0?'--':item1+'%'}}{{item1*1>0?'↑':item1*1<0?'↓':''}}</view>
  169. <view v-else-if="index>1&&index1>0" class="td" style="border-right:1px solid #E0E0E0;">
  170. {{item1+'%'}}</view>
  171. <view v-else class="td" style="border-right:1px solid #E0E0E0;">{{item1}}</view>
  172. </view>
  173. </view>
  174. </view>
  175. </scroll-view>
  176. </view>
  177. </view>
  178. <view style="width: 100%;height: 60rpx;"></view>
  179. <view v-if="Showhiddenunits">
  180. <u-select v-model="Showhiddenunits" mode="single-column" :list="selectlist" @confirm="confirm">
  181. </u-select>
  182. </view>
  183. <view v-if="Showhiddenunits2">
  184. <u-select v-model="Showhiddenunits2" mode="single-column" :list="selectlist2" @confirm="confirm2">
  185. </u-select>
  186. </view>
  187. <view v-if="Showhiddenunits3">
  188. <u-select v-model="Showhiddenunits3" mode="single-column" :list="selectlist3" @confirm="confirm3">
  189. </u-select>
  190. </view>
  191. <view v-if="Showhiddenunits4">
  192. <u-select v-model="Showhiddenunits4" mode="single-column" :list="selectlist4" @confirm="confirm4">
  193. </u-select>
  194. </view>
  195. <u-calendar v-model="totalTimeShow" mode="range" @change="totalTimeChange"></u-calendar>
  196. <newcalendar v-model="totalTimeShow2" :planNum='intervaltime' mode="date" @change="totalTimeChange2">
  197. </newcalendar>
  198. </view>
  199. </template>
  200. <script>
  201. import newcalendar from '@/components/newcalendar/newcalendar.vue';
  202. var config = require(".../../../config");
  203. export default {
  204. data() {
  205. return {
  206. compareFlag: false,
  207. numlist: [{
  208. name: '接待量',
  209. num: '10',
  210. num1: '0',
  211. num2: '0'
  212. },
  213. {
  214. name: '平均执行率',
  215. num: '10',
  216. num1: '0',
  217. num2: '0'
  218. },
  219. {
  220. name: '平均接待时长',
  221. num: '10',
  222. num1: '0',
  223. num2: '0'
  224. },
  225. ],
  226. activeTotal: 0, //时间下标
  227. newactiveTotal: 0, //tab下标
  228. totalTimeShow: false,
  229. totalTimeShow2: false,
  230. totalTimeShow3: false,
  231. cWidth: uni.upx2px(690),
  232. cHeight: uni.upx2px(453),
  233. AcHeight: uni.upx2px(500),
  234. kanbanlist: { //录音和测评的数据
  235. kaishitime: '',
  236. duibitime: '',
  237. audonum: '',
  238. audotime: "",
  239. avgDuration: '',
  240. fraction: ''
  241. },
  242. pamect: { //接口参数
  243. houseId: '',
  244. timeType: "4",
  245. firstStartDate: '', //第一次开始时间
  246. firstEndDate: '', //第一次结束时间
  247. lastStartDate: '',
  248. lastEndDate: '',
  249. accountId: '', //顾问ids
  250. marketingId: '', //二级销讲id
  251. deptId: "", //部门id
  252. showStatus: 0
  253. },
  254. linetype: "line",
  255. lineOptsect: {}, //图表数据
  256. Showhiddenunits: false,
  257. selectlist: [],
  258. guwenshow: false,
  259. lopanobj: {
  260. id: '',
  261. name: ''
  262. },
  263. //二级相关
  264. Selectlevel: false,
  265. Selectlevelobj: {
  266. id: '',
  267. name: ''
  268. },
  269. erSelectlevelobj: {
  270. id: '',
  271. name: ''
  272. },
  273. Showhiddenunits2: false,
  274. Showhiddenunits3: false,
  275. selectlist2: [],
  276. selectlist3: [],
  277. //团队相关
  278. Selecttuandui: false,
  279. selectlist4: [],
  280. Selecttuanduiobj: {
  281. id: '',
  282. name: ''
  283. },
  284. Showhiddenunits4: false,
  285. showCanvas: true,
  286. timepickpickisshow: false,
  287. sheartime1: "",
  288. sheartime2: "",
  289. intervaltime: 0,
  290. tableDate: [],
  291. guwenFlag: false
  292. };
  293. },
  294. components: {
  295. newcalendar
  296. },
  297. onLoad: function(options) {
  298. this.pamect.houseId = uni.getStorageSync('buildingID').id;
  299. this.init()
  300. },
  301. watch: {
  302. Showhiddenunits(newValue, oldValue) {
  303. this.showCanvas = !newValue
  304. },
  305. Showhiddenunits2(newValue, oldValue) {
  306. this.showCanvas = !newValue
  307. },
  308. Showhiddenunits3(newValue, oldValue) {
  309. this.showCanvas = !newValue
  310. },
  311. Showhiddenunits4(newValue, oldValue) {
  312. this.showCanvas = !newValue
  313. },
  314. totalTimeShow(newValue, oldValue) {
  315. this.showCanvas = !newValue
  316. },
  317. totalTimeShow2(newValue, oldValue) {
  318. this.showCanvas = !newValue
  319. },
  320. totalTimeShow3(newValue, oldValue) {
  321. this.showCanvas = !newValue
  322. },
  323. },
  324. methods: {
  325. //是否对比
  326. checkboxChange() {
  327. if (this.newactiveTotal == 3) {
  328. uni.showToast({
  329. title: '销讲一级无对比',
  330. duration: 2000
  331. });
  332. return
  333. }
  334. if (this.newactiveTotal == 2) {
  335. if (this.Selecttuanduiobj.id == '') {
  336. uni.showToast({
  337. title: '全部团队无对比',
  338. duration: 2000
  339. });
  340. return
  341. }
  342. }
  343. if (this.timepickpickisshow == true) {
  344. this.timepickpickisshow = false;
  345. this.pamect.showStatus = 0;
  346. this.init()
  347. } else {
  348. this.timepickpickisshow = true;
  349. this.pamect.showStatus = 1;
  350. }
  351. this.activeTotal = 8;
  352. },
  353. init() {
  354. this.$u.post("/cusLvStatistics/lyAndcp", this.pamect).then(data => {
  355. this.pamect.lastStartDate = data.lastStartDate;
  356. this.pamect.lastEndDate = data.lastEndDate;
  357. this.numlist[0].num = data.startSumCustomer
  358. this.numlist[1].num = data.startFraction;
  359. this.numlist[2].num = data.startSumDuration || 0;
  360. if (data.endSumDuration != null) {
  361. this.compareFlag = true
  362. // return
  363. this.numlist[0].num1 = data.endSumCustomer
  364. this.numlist[1].num1 = data.endFraction;
  365. this.numlist[2].num1 = data.endSumDuration || 0;
  366. this.numlist[0].num2 = data.contrastSumCustomer
  367. this.numlist[1].num2 = data.contrastFraction;
  368. this.numlist[2].num2 = data.contrastSumDuration|| 0;
  369. } else {
  370. this.compareFlag = false
  371. }
  372. this.sheartime1 = data.lastStartDate.substring(5, 10) + "--" + data.lastEndDate.substring(5,
  373. 10);
  374. this.sheartime2 = '请选择';
  375. this.kanbanlist.duibitime = '';
  376. var kaishi = this.DateDiff(data.lastStartDate, data.lastEndDate);
  377. this.kanbanlist.kaishitime = data.lastStartDate + "至" + data.lastEndDate + "(" + kaishi + "天)";
  378. if (this.pamect.showStatus == 1) {
  379. this.sheartime2 = data.firstStartDate.substring(5, 10) + "--" + data.firstEndDate
  380. .substring(5, 10);
  381. var jeishu = this.DateDiff(data.firstStartDate, data.firstEndDate);
  382. this.kanbanlist.duibitime = data.firstStartDate + "至" + data.firstEndDate + "(" + jeishu +
  383. "天)";
  384. }
  385. this.kanbanlist.audonum = data.sumCustomer;
  386. this.kanbanlist.audotime = data.avgDuration;
  387. this.kanbanlist.avgDuration = data.fraction;
  388. this.kanbanlist.fraction = data.fraction;
  389. if (this.newactiveTotal == 0) {
  390. this.ProjectDimension()
  391. } else if (this.newactiveTotal == 1) {
  392. if (this.pamect.accountId == "") {
  393. this.getguwenlist()
  394. } else {
  395. this.ConsultantDimension()
  396. }
  397. } else if (this.newactiveTotal == 2) {
  398. if (this.pamect.deptId == "") {
  399. this.getuanduilist()
  400. } else {
  401. this.TeamCompared()
  402. }
  403. } else if (this.newactiveTotal == 3) {
  404. this.speakingLevel()
  405. } else {
  406. if (this.pamect.marketingId == '') {
  407. this.getonsyiji()
  408. } else {
  409. this.aboutEecondary()
  410. }
  411. }
  412. });
  413. },
  414. //起始时间
  415. totalTimeChange(e) {
  416. this.pamect.lastStartDate = e.startDate;
  417. this.pamect.lastEndDate = e.endDate;
  418. var kaishi = this.DateDiff(this.pamect.lastStartDate, this.pamect.lastEndDate)
  419. this.kanbanlist.kaishitime = this.pamect.lastStartDate + "至" + this.pamect.lastEndDate + "(" + kaishi +
  420. "天)";
  421. if (this.pamect.showStatus == 0) {
  422. this.init()
  423. this.totalTimeShow = false;
  424. } else {
  425. if (this.pamect.firstStartDate.length == 0) {
  426. uni.showToast({
  427. title: '请选择对比时间',
  428. duration: 2000
  429. });
  430. } else {
  431. var jshu = this.DateDiff(this.pamect.firstStartDate, this.pamect.firstEndDate)
  432. if (kaishi == jshu) {
  433. this.init()
  434. } else {
  435. uni.showToast({
  436. title: '请选择相同天数',
  437. duration: 2000
  438. });
  439. }
  440. }
  441. this.totalTimeShow = false;
  442. }
  443. },
  444. //对比时间
  445. totalTimeChange2(e) {
  446. var d = new Date(e.result);
  447. d.setDate(d.getDate() + this.intervaltime);
  448. var year = d.getFullYear();
  449. var month = d.getMonth() + 1;
  450. if (month < 10) month = '0' + month;
  451. var day = d.getDate();
  452. if (day < 10) day = '0' + day;
  453. this.pamect.firstStartDate = e.result;
  454. this.pamect.firstEndDate = year + '-' + month + '-' + day;
  455. console.log(this.pamect.firstStartDate)
  456. var kaishi = this.DateDiff(this.pamect.lastStartDate, this.pamect.lastEndDate)
  457. var jeishu = this.DateDiff(this.pamect.firstStartDate, this.pamect.firstEndDate)
  458. this.kanbanlist.duibitime = this.pamect.firstStartDate + "至" + this.pamect.firstEndDate + "(" + jeishu +
  459. "天)";
  460. console.log(this.pamect.lastStartDate, this.pamect.lastEndDate, kaishi, jeishu)
  461. if (kaishi == jeishu) {
  462. this.init()
  463. } else {
  464. uni.showToast({
  465. title: '请选择相同天数',
  466. duration: 2000
  467. });
  468. }
  469. this.totalTimeShow2 = false;
  470. },
  471. //自定义时间
  472. totalTimeChange3(e) {
  473. this.pamect.firstStartDate = "";
  474. this.pamect.firstEndDate = "";
  475. this.pamect.lastStartDate = e.startDate;
  476. this.pamect.lastEndDate = e.endDate;
  477. this.init()
  478. this.totalTimeShow3 = false;
  479. },
  480. //时间切换
  481. tabtimetap(index) {
  482. if (index == 0) {
  483. this.pamect.timeType = "4";
  484. this.pamect.firstStartDate = '';
  485. this.pamect.firstEndDate = '';
  486. this.pamect.lastStartDate = '';
  487. this.pamect.lastEndDate = '';
  488. this.init()
  489. } else if (index == 1) {
  490. this.pamect.timeType = "5";
  491. this.pamect.firstStartDate = '';
  492. this.pamect.firstEndDate = '';
  493. this.pamect.lastStartDate = '';
  494. this.pamect.lastEndDate = '';
  495. this.init()
  496. } else if (index == 2) {
  497. this.pamect.timeType = "6";
  498. this.pamect.firstStartDate = '';
  499. this.pamect.firstEndDate = '';
  500. this.pamect.lastStartDate = '';
  501. this.pamect.lastEndDate = '';
  502. this.init()
  503. } else if (index == 3) {
  504. this.pamect.timeType = "";
  505. this.totalTimeShow = true;
  506. } else if (index == 4) {
  507. this.pamect.timeType = "";
  508. var kaishi = this.DateDiff(this.pamect.lastStartDate, this.pamect.lastEndDate)
  509. console.log(kaishi)
  510. this.intervaltime = kaishi - 1;
  511. this.totalTimeShow2 = true;
  512. } else {
  513. this.pamect.timeType = "";
  514. this.totalTimeShow3 = true;
  515. }
  516. this.activeTotal = index;
  517. },
  518. //tab切换
  519. tabxuanxiangtap(index) {
  520. this.newactiveTotal = index;
  521. this.guwenshow = false;
  522. this.Selectlevel = false;
  523. this.Selecttuandui = false;
  524. this.tableDate=[]
  525. this.pamect.showStatus = 0;
  526. this.pamect.timeType = "4";
  527. this.pamect.firstStartDate = '';
  528. this.pamect.firstEndDate = '';
  529. this.pamect.lastStartDate = '';
  530. this.pamect.lastEndDate = '';
  531. this.pamect.accountId = '';
  532. this.pamect.marketingId = '';
  533. this.pamect.deptId = ""
  534. this.activeTotal = 0;
  535. this.timepickpickisshow = false;
  536. this.init()
  537. if (index == 1) {
  538. this.guwenshow = true;
  539. }
  540. },
  541. //项目维度
  542. ProjectDimension() {
  543. const that = this;
  544. that.lineOptsect = {
  545. categories: [],
  546. series: []
  547. };
  548. this.linetype = "line";
  549. this.$u.post("/cusLvStatistics/teamOrOneValueShow", this.pamect).then(data => {
  550. if (this.pamect.showStatus == 0) {
  551. that.lineOptsect = {
  552. categories: [],
  553. series: [{
  554. name: '起始时间',
  555. data: [],
  556. color: '#7ED3F4'
  557. }]
  558. }
  559. data.startList.forEach((child, zxc) => {
  560. that.lineOptsect.categories.push(child.statDate.substring(5, 10))
  561. })
  562. that.lineOptsect.series[0].data = data.startList.map(item => item.fraction);
  563. } else {
  564. that.lineOptsect = {
  565. categories: [],
  566. series: [{
  567. name: '起始时间',
  568. data: [],
  569. color: '#7ED3F4'
  570. },
  571. {
  572. name: '对比时间',
  573. data: [],
  574. color: '#FF7070'
  575. },
  576. ]
  577. }
  578. data.startList.forEach((item, sdf) => {
  579. data.endList.forEach((child, zxc) => {
  580. if (sdf == zxc) {
  581. that.lineOptsect.categories.push(
  582. child.statDate.substring(5,10) + 'vs' + item.statDate.substring(5, 10)
  583. )
  584. }
  585. })
  586. })
  587. that.lineOptsect.series[1].data = data.startList.map(item => item.fraction);
  588. that.lineOptsect.series[0].data = data.endList.map(item => item.fraction)
  589. that.guwenFlag = false
  590. // // 处理表格数据
  591. let arr = [
  592. ['时间', '时段一', '时段二', '变化']
  593. // {
  594. // time:'时间',
  595. // time1:'时段一',
  596. // time2:'时段二',
  597. // compare:'变化'
  598. // },
  599. ]
  600. that.lineOptsect.categories.map((item, index) => {
  601. let newarr = [item, data.endList[index].fraction, data.startList[index].fraction,data.comparedList[index].fraction
  602. ]
  603. // obj.time=item
  604. // obj.time1=data.firstValue[index].fraction
  605. // obj.time2=data.lastValue[index].fraction
  606. // obj.compare=data.contrast[index].data
  607. // arr.push(obj)
  608. arr.push(newarr)
  609. })
  610. // console.log(arr)
  611. that.tableDate = arr
  612. }
  613. });
  614. },
  615. //顾问维度
  616. ConsultantDimension() {
  617. const that = this;
  618. that.lineOptsect = {
  619. categories: [],
  620. series: []
  621. };
  622. this.linetype = "radar";
  623. this.$u.post("/cusLvStatistics/accFirstLevelContrast", this.pamect).then(data => {
  624. // return
  625. if (this.pamect.showStatus == 0) {
  626. that.lineOptsect = {
  627. categories: [],
  628. series: [{
  629. name: '时段一',
  630. data: [],
  631. color: '#7ED3F4'
  632. }]
  633. }
  634. data.firstList.forEach((item, sdf) => {
  635. that.lineOptsect.categories.push(item.name)
  636. that.lineOptsect.series[0].data.push(data.firstList[sdf].total)
  637. })
  638. // that.lineOptsect.series[0].data = data.lastValue.map(item => item.fraction);
  639. } else {
  640. // 当有对比的时候
  641. that.lineOptsect = {
  642. categories: [],
  643. series: [{
  644. name: '时段一',
  645. data: [],
  646. color: '#7ED3F4'
  647. },
  648. {
  649. name: '时段二',
  650. data: [],
  651. color: '#FF7070'
  652. },
  653. ]
  654. }
  655. data.headerList.forEach((item, sdf) => {
  656. that.lineOptsect.categories.push(item.name)
  657. that.lineOptsect.series[0].data.push(data.firstList[sdf].total)
  658. that.lineOptsect.series[1].data.push(data.secondList[sdf].total)
  659. })
  660. // return
  661. // // 处理表格数据
  662. that.guwenFlag = true
  663. let arr = []
  664. arr[0] = ['时间', ...that.lineOptsect.categories]
  665. arr[1] = ['变化']
  666. arr[2] = ['时段一']
  667. arr[3] = ['时段二']
  668. // console.log(arr)
  669. data.firstList.map((item, index) => {
  670. arr[2].push(item.total)
  671. arr[3].push(data.secondList[index].total)
  672. arr[1].push(data.thirdList[index].total)
  673. })
  674. that.tableDate = arr
  675. }
  676. });
  677. },
  678. // 顾问纬度选择顾问
  679. oninputtap() {
  680. this.Showhiddenunits = true;
  681. },
  682. // 顾问选择确认
  683. confirm(e) {
  684. this.lopanobj.id = e[0].value;
  685. this.lopanobj.name = e[0].label;
  686. this.pamect.accountId = this.lopanobj.id;
  687. this.ConsultantDimension()
  688. this.Showhiddenunits = false;
  689. },
  690. //获取顾问
  691. getguwenlist() {
  692. this.$u.post("/cusLvStatistics/selectAllAccountIdByHouseId", {
  693. houseId: this.pamect.houseId
  694. }).then(data => {
  695. this.selectlist = [];
  696. if (data.length == 0) {
  697. this.lineOptsect = {
  698. categories: [],
  699. series: []
  700. };
  701. this.guwenshow = false;
  702. return
  703. } else {
  704. this.guwenshow = true;
  705. data.forEach(item => {
  706. this.selectlist.push({
  707. value: item.accountId,
  708. label: item.name
  709. })
  710. })
  711. this.lopanobj.id = data[0].accountId;
  712. this.lopanobj.name = data[0].name;
  713. this.pamect.accountId = this.lopanobj.id;
  714. this.ConsultantDimension()
  715. }
  716. })
  717. },
  718. //销讲一级
  719. speakingLevel() {
  720. this.linetype = "radar";
  721. this.lineOptsect = {
  722. categories: [],
  723. series: []
  724. };
  725. this.$u.post("/cusLvStatistics/firstLevelContrast", this.pamect).then(data => {
  726. if (data.length == 0) {
  727. return
  728. } else {
  729. let list = data.map(item => {
  730. return item.name
  731. });
  732. let list1 = data.map(item => {
  733. if (item.avgExecutionRate == null) {
  734. item.avgExecutionRate = 0
  735. } else {
  736. item.avgExecutionRate = item.avgExecutionRate
  737. }
  738. return item.avgExecutionRate
  739. });
  740. this.lineOptsect = {
  741. "categories": list,
  742. "series": [{
  743. "name": "销讲一级",
  744. "data": list1
  745. }]
  746. }
  747. }
  748. })
  749. },
  750. //销讲二级
  751. aboutEecondary() {
  752. this.lineOptsect = {};
  753. this.linetype = "line";
  754. this.$u.post("/cusLvStatistics/level2Contrast", this.pamect).then(data => {
  755. if (this.pamect.showStatus == 0) {
  756. this.lineOptsect = {
  757. categories: [],
  758. series: [{
  759. name: '起始时间',
  760. data: [],
  761. color: '#7ED3F4'
  762. }]
  763. }
  764. data.lastList.forEach((item, sdf) => {
  765. this.lineOptsect.categories.push(item.statDate.substring(5, 10))
  766. })
  767. this.lineOptsect.series[0].data = data.lastList.map(item => item.avgExecutionRate);
  768. } else {
  769. this.lineOptsect = {
  770. categories: [],
  771. series: [{
  772. name: '起始时间',
  773. data: [],
  774. color: '#7ED3F4'
  775. },
  776. {
  777. name: '对比时间',
  778. data: [],
  779. color: '#FF7070'
  780. },
  781. ]
  782. }
  783. data.firstList.forEach((item, sdf) => {
  784. data.lastList.forEach((child, zxc) => {
  785. if (sdf == zxc) {
  786. this.lineOptsect.categories.push(
  787. child.statDate.substring(5,10) + 'vs' + item.statDate.substring(5, 10)
  788. )
  789. }
  790. })
  791. })
  792. this.lineOptsect.series[1].data = data.firstList.map(item => item.avgExecutionRate);
  793. this.lineOptsect.series[0].data = data.lastList.map(item => item.avgExecutionRate)
  794. let that = this
  795. this.guwenFlag = false
  796. // // 处理表格数据
  797. let arr = [
  798. ['时间', '时段一', '时段二', '变化']
  799. ]
  800. that.lineOptsect.categories.map((item, index) => {
  801. let newarr = [item, data.lastList[
  802. index].avgExecutionRate, data.firstList[index].avgExecutionRate, data.contrast[index].data]
  803. arr.push(newarr)
  804. })
  805. // console.log(arr)
  806. that.tableDate = arr
  807. }
  808. })
  809. },
  810. //销讲二级:获取一级
  811. getonsyiji() {
  812. this.$u.post("/cusLvStatistics/findAllFirstLevel", {
  813. houseId: this.pamect.houseId
  814. }).then(data => {
  815. this.selectlist2 = [];
  816. if (data.length == 0) {
  817. this.Selectlevel = false;
  818. this.lineOptsect = {
  819. categories: [],
  820. series: []
  821. };
  822. return
  823. } else {
  824. this.Selectlevel = true;
  825. data.forEach(item => {
  826. this.selectlist2.push({
  827. value: item.marketingId,
  828. label: item.name
  829. })
  830. })
  831. this.Selectlevelobj.id = data[0].marketingId;
  832. this.Selectlevelobj.name = data[0].name;
  833. this.getonserji(this.Selectlevelobj.id)
  834. }
  835. })
  836. },
  837. //销讲二级:通过一级获取二级
  838. getonserji(ccd) {
  839. this.$u.post("/cusLvStatistics/findLevel2ByFirstLevel", {
  840. houseId: this.pamect.houseId,
  841. marketingId: ccd
  842. }).then(data => {
  843. this.selectlist3 = [];
  844. data.forEach(item => {
  845. this.selectlist3.push({
  846. value: item.marketingId,
  847. label: item.name
  848. })
  849. })
  850. this.erSelectlevelobj.id = data[0].marketingId;
  851. this.erSelectlevelobj.name = data[0].name;
  852. this.pamect.marketingId = this.erSelectlevelobj.id;
  853. this.aboutEecondary()
  854. })
  855. },
  856. //销讲二级:一级选择
  857. oninputtap2() {
  858. this.Showhiddenunits2 = true;
  859. },
  860. //销讲二级:二级选择
  861. oninputtap3() {
  862. if (this.Selectlevelobj.id == "") {
  863. uni.showToast({
  864. title: '请先选择一级',
  865. duration: 2000
  866. });
  867. } else {
  868. this.Showhiddenunits3 = true;
  869. }
  870. },
  871. //销讲二级:一级选择确认
  872. confirm2(e) {
  873. this.Selectlevelobj.id = e[0].value;
  874. this.Selectlevelobj.name = e[0].label;
  875. this.getonserji(this.Selectlevelobj.id)
  876. },
  877. //销讲二级:二级选择确认
  878. confirm3(e) {
  879. this.erSelectlevelobj.id = e[0].value;
  880. this.erSelectlevelobj.name = e[0].label;
  881. this.pamect.marketingId = this.erSelectlevelobj.id;
  882. this.aboutEecondary()
  883. },
  884. //团队请选择
  885. oninputtap4() {
  886. this.Showhiddenunits4 = true;
  887. },
  888. //团队选择确认
  889. confirm4(e) {
  890. this.Selecttuanduiobj.id = e[0].value;
  891. this.Selecttuanduiobj.name = e[0].label;
  892. this.pamect.deptId = this.Selecttuanduiobj.id;
  893. this.pamect.showStatus = 0;
  894. this.pamect.timeType = "4";
  895. this.pamect.firstStartDate = '';
  896. this.pamect.firstEndDate = '';
  897. this.pamect.lastStartDate = '';
  898. this.pamect.lastEndDate = '';
  899. this.activeTotal = 0;
  900. this.timepickpickisshow = false;
  901. this.init()
  902. this.TeamCompared()
  903. },
  904. //获取团队列表
  905. getuanduilist() {
  906. uni.request({
  907. url: config.service.findListByUser + "?houseId=" +this.pamect.houseId,
  908. method: "GET",
  909. header: {
  910. 'content-type': 'application/json',
  911. 'Authorization': 'Bearer '+uni.getStorageSync('weapp_session_login_data').token
  912. },
  913. success: (data) => {
  914. if (data.data.data.length == 0) {
  915. this.Selecttuandui = false;
  916. this.lineOptsect = {
  917. categories: [],
  918. series: []
  919. };
  920. return
  921. } else {
  922. this.Selecttuandui = true;
  923. data.data.data.forEach(item => {
  924. this.selectlist4.push({
  925. value: item.deptId,
  926. label: item.name
  927. })
  928. })
  929. this.Selecttuanduiobj.id = this.selectlist4[0].value;
  930. this.Selecttuanduiobj.name = this.selectlist4[0].label;
  931. this.pamect.deptId = this.Selecttuanduiobj.id;
  932. this.TeamCompared()
  933. }
  934. }
  935. })
  936. // this.$u.post("/cusLvStatistics/findAllDeptIdByHouseId ", {
  937. // houseId: this.pamect.houseId
  938. // }).then(data => {
  939. // this.selectlist4 = [{
  940. // value: "",
  941. // label: "全部"
  942. // }];
  943. // if (data.length == 0) {
  944. // this.Selecttuandui = false;
  945. // this.lineOptsect = {
  946. // categories: [],
  947. // series: []
  948. // };
  949. // return
  950. // } else {
  951. // this.Selecttuandui = true;
  952. // data.forEach(item => {
  953. // this.selectlist4.push({
  954. // value: item.deptId,
  955. // label: item.deptName
  956. // })
  957. // })
  958. // this.Selecttuanduiobj.id = "";
  959. // this.Selecttuanduiobj.name = "全部";
  960. // this.pamect.deptId = this.Selecttuanduiobj.id;
  961. // this.TeamCompared()
  962. // }
  963. // })
  964. },
  965. //团队对比
  966. TeamCompared() {
  967. const that = this;
  968. that.lineOptsect = {};
  969. this.linetype = "line";
  970. this.$u.post("/cusLvStatistics/teamOrOneValueShowByDept", this.pamect).then(data => {
  971. if (this.Selecttuanduiobj.id == "") {
  972. var newlist = [];
  973. for (var i in data) {
  974. var ect = data[i].receptionStatList.map(item => {
  975. if (item.fraction == null) {
  976. item.fraction = 0
  977. } else {
  978. item.fraction = item.fraction
  979. }
  980. return item.fraction
  981. });
  982. newlist.push({
  983. name: data[i].deptName,
  984. data: ect
  985. })
  986. }
  987. var timelist = [];
  988. for (var i in data) {
  989. var ect = data[i].receptionStatList.map(item => {
  990. return item.statDate
  991. });
  992. timelist.push({
  993. name: data[i].deptName,
  994. data: ect
  995. })
  996. }
  997. var xAxisdata = [];
  998. timelist[0].data.forEach((item, sdf) => {
  999. xAxisdata.push(item.substring(5, 10))
  1000. })
  1001. that.lineOptsect = {
  1002. categories: xAxisdata,
  1003. series: newlist
  1004. }
  1005. } else {
  1006. if (this.pamect.showStatus == 0) {
  1007. that.lineOptsect = {
  1008. categories: [],
  1009. series: [{
  1010. name: '起始时间',
  1011. data: [],
  1012. color: '#7ED3F4'
  1013. }]
  1014. }
  1015. data.lastValue.receptionStatList.forEach((item, sdf) => {
  1016. that.lineOptsect.categories.push(item.statDate.substring(5, 10))
  1017. })
  1018. that.lineOptsect.series[0].data = data.lastValue.receptionStatList.map(item => item
  1019. .fraction);
  1020. } else {
  1021. that.lineOptsect = {
  1022. categories: [],
  1023. series: [{
  1024. name: '起始时间',
  1025. data: [],
  1026. color: '#7ED3F4'
  1027. },
  1028. {
  1029. name: '对比时间',
  1030. data: [],
  1031. color: '#FF7070'
  1032. },
  1033. ]
  1034. }
  1035. data.firstValue.receptionStatList.forEach((item, sdf) => {
  1036. data.lastValue.receptionStatList.forEach((child, zxc) => {
  1037. if (sdf == zxc) {
  1038. that.lineOptsect.categories.push(
  1039. child.statDate.substring(5,10) + 'vs' + item.statDate.substring(5, 10)
  1040. )
  1041. }
  1042. })
  1043. })
  1044. that.lineOptsect.series[1].data = data.firstValue.receptionStatList.map(item => item
  1045. .fraction);
  1046. that.lineOptsect.series[0].data = data.lastValue.receptionStatList.map(item => item
  1047. .fraction)
  1048. that.guwenFlag = false
  1049. // 团队处理数据
  1050. // // 处理表格数据
  1051. let arr = [
  1052. ['时间', '时段一', '时段二', '变化']
  1053. ]
  1054. that.lineOptsect.categories.map((item, index) => {
  1055. let newarr = [item, data
  1056. .lastValue.receptionStatList[index].fraction, data.firstValue.receptionStatList[index].fraction,data.contrast
  1057. .receptionStatList[index].data
  1058. ]
  1059. arr.push(newarr)
  1060. })
  1061. that.tableDate = arr
  1062. }
  1063. }
  1064. });
  1065. },
  1066. //算相隔天数
  1067. DateDiff(sDate1, sDate2) {
  1068. var aDate, oDate1, oDate2, iDays;
  1069. aDate = sDate1.split("-");
  1070. oDate1 = new Date(aDate[1] + '-' + aDate[2] + '-' + aDate[0]); //转换为yyyy-MM-dd格式
  1071. aDate = sDate2.split("-");
  1072. oDate2 = new Date(aDate[1] + '-' + aDate[2] + '-' + aDate[0]);
  1073. iDays = parseInt(Math.abs(oDate1 - oDate2) / 1000 / 60 / 60 / 24); //把相差的毫秒数转换为天数
  1074. return iDays + 1; //返回相差天数
  1075. },
  1076. },
  1077. }
  1078. </script>
  1079. <style lang="scss" scoped>
  1080. .title2-che {
  1081. width: 178rpx;
  1082. height: 48rpx;
  1083. background: #FFFFFF;
  1084. border-radius: 6rpx;
  1085. border: 1px solid #E0E0E0;
  1086. line-height: 48rpx;
  1087. font-size: 28rpx;
  1088. font-weight: 400;
  1089. color: #666666;
  1090. text-indent: 12rpx;
  1091. margin-left: 35rpx;
  1092. position: relative;
  1093. .righttochoose {
  1094. width: 18rpx;
  1095. height: 24rpx;
  1096. position: absolute;
  1097. top: 12rpx;
  1098. right: 12rpx;
  1099. }
  1100. }
  1101. .table {
  1102. border: 0px solid darkgray;
  1103. .tr {
  1104. display: flex;
  1105. // width: 100%;
  1106. justify-content: center;
  1107. height: 64rpx;
  1108. align-items: center;
  1109. border-bottom: 1px solid #E0E0E0;
  1110. flex-wrap: nowrap;
  1111. .td {
  1112. text-align: center;
  1113. font-size: 24rpx;
  1114. font-weight: 400;
  1115. color: #333333;
  1116. height: 64rpx;
  1117. line-height: 64rpx;
  1118. // flex-shrink: 0;
  1119. }
  1120. .trd{
  1121. flex-shrink: 0;
  1122. min-width: 300rpx;
  1123. // border-bottom: 1px solid #ccc;
  1124. }
  1125. .th {
  1126. height: 64rpx;
  1127. text-align: center;
  1128. font-size: 28rpx;
  1129. font-weight: 400;
  1130. color: #666666;
  1131. line-height: 64rpx;
  1132. }
  1133. }
  1134. }
  1135. .activecllasscet2 {
  1136. color: #2671E2;
  1137. border-bottom: 2px solid #2671E2;
  1138. }
  1139. .timeduibi {
  1140. width: 100%;
  1141. background: #FFFFFF;
  1142. padding-bottom: 10rpx;
  1143. .timeshow {
  1144. color: #666666;
  1145. width: 100%;
  1146. height: 50rpx;
  1147. font-size: 28rpx;
  1148. line-height: 50rpx;
  1149. text-indent: 30rpx;
  1150. }
  1151. }
  1152. // 顶部时间切换
  1153. .timetabct {
  1154. width: 100%;
  1155. height: 98rpx;
  1156. display: flex;
  1157. align-items: center;
  1158. border-bottom: 1px solid #E0E0E0;
  1159. }
  1160. .timetabctview {
  1161. flex: 1;
  1162. height: 100%;
  1163. display: flex;
  1164. justify-content: center;
  1165. align-items: center;
  1166. }
  1167. .timetabct view {
  1168. width: 94rpx;
  1169. text-align: center;
  1170. height: 100%;
  1171. line-height: 98rpx;
  1172. font-size: 28rpx;
  1173. font-family: PingFangSC-Regular, PingFang SC;
  1174. font-weight: 400;
  1175. color: #666666;
  1176. }
  1177. .activecllasscet {
  1178. border-bottom: 2px solid #2671E2;
  1179. }
  1180. // 对比时间切换
  1181. .timepick {
  1182. width: 100%;
  1183. height: 90rpx;
  1184. display: flex;
  1185. align-items: center;
  1186. background: #FFFFFF;
  1187. }
  1188. .timepicktime {
  1189. width: 260rpx;
  1190. height: 50rpx;
  1191. border: 1rpx solid #E0E0E0;
  1192. margin-left: 30rpx;
  1193. display: flex;
  1194. background: #FFFFFF;
  1195. }
  1196. .timepicktime>view:nth-of-type(1) {
  1197. width: 210rpx;
  1198. height: 100%;
  1199. line-height: 50rpx;
  1200. font-size: 26rpx;
  1201. font-weight: 400;
  1202. text-align: center;
  1203. }
  1204. .timepicktime>view:nth-of-type(2) {
  1205. width: 49rpx;
  1206. height: 100%;
  1207. // border-left: 1px solid #E0E0E0;
  1208. }
  1209. .timepickpick {
  1210. width: 110rpx;
  1211. height: 50rpx;
  1212. margin-left: 30rpx;
  1213. display: flex;
  1214. align-items: center;
  1215. }
  1216. .Underimg {
  1217. width: 50rpx;
  1218. height: 50rpx;
  1219. margin-top: -2rpx;
  1220. }
  1221. .timeButton {
  1222. width: 100%;
  1223. height: 60rpx;
  1224. display: flex;
  1225. color: #b1b1b1;
  1226. font-size: 28rpx;
  1227. .item {
  1228. text-align: center;
  1229. line-height: 60rpx;
  1230. padding-left: 12rpx;
  1231. padding-right: 12rpx;
  1232. border-radius: 8rpx;
  1233. border: 1px solid #E0E0E0;
  1234. margin-right: 20rpx;
  1235. &.active {
  1236. color: #FFFFFF;
  1237. background-color: #2671E2;
  1238. }
  1239. }
  1240. }
  1241. .boardbox {
  1242. width: 100%;
  1243. height: 172rpx;
  1244. display: flex;
  1245. align-items: center;
  1246. background: #F4F8FD;
  1247. border-radius: 8rpx;
  1248. margin-top: 28rpx;
  1249. .boardbox-zuo {
  1250. width: 50%;
  1251. height: 120rpx;
  1252. border-right: 1px solid #E0E0E0;
  1253. }
  1254. .boardbox-you {
  1255. width: 50%;
  1256. height: 120rpx;
  1257. }
  1258. .boardbox-text1 {
  1259. width: 100%;
  1260. text-align: center;
  1261. font-size: 28rpx;
  1262. color: #333333;
  1263. }
  1264. .boardbox-text2 {
  1265. width: 100%;
  1266. text-align: center;
  1267. font-size: 26rpx;
  1268. color: #333333;
  1269. margin-top: 10rpx;
  1270. }
  1271. }
  1272. .comparesize {
  1273. flex: 1;
  1274. font-size: 24rpx;
  1275. color: #666666;
  1276. margin-top: 10rpx;
  1277. }
  1278. .grid:nth-child(1){
  1279. border-right:none ;
  1280. border-bottom:none ;
  1281. }
  1282. .grid:nth-child(3){
  1283. width: 50.5%;
  1284. }
  1285. </style>