您最多选择25个主题 主题必须以字母或数字开头,可以包含连字符 (-),并且长度不得超过35个字符
 
 
 

1452 行
39 KiB

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