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.
 
 
 

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