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.
 
 
 

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