AI销管
25개 이상의 토픽을 선택하실 수 없습니다. Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 

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