AI营销辅助 普强使用
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.
 
 
 

1389 lines
38 KiB

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