Non puoi selezionare più di 25 argomenti Gli argomenti devono iniziare con una lettera o un numero, possono includere trattini ('-') e possono essere lunghi fino a 35 caratteri.
 
 
 

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