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.
 
 
 

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