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.
 
 
 

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