AI销管
Du kan inte välja fler än 25 ämnen Ämnen måste starta med en bokstav eller siffra, kan innehålla bindestreck ('-') och vara max 35 tecken långa.
 
 
 
 

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