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.
 
 
 

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