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.
 
 
 

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