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.
 
 
 
 

1436 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}}%
  51. <!-- <image style="margin-left: 2rpx;width: 28rpx;height: 14rpx" src="../../../static/images/excute.png" mode="" /> -->
  52. </view>
  53. <view class="num" v-else-if="item.name==='有效接待'">{{item.num||'--'}}</view>
  54. <view class="num" v-else-if="item.name==='平均接待时长'">{{item.num}}分</view>
  55. <view class="num" v-else>{{item.num||0}}</view>
  56. <view class="comparesize" v-if="compareFlag&&timepickpickisshow">
  57. <text style="margin-right: 50rpx;">对比:{{item.name==='平均执行率'?item.num1+'%':item.num1}}</text>
  58. <text :style="{color:item.num2*1>0?'red':'green'}">
  59. {{item.num2}}
  60. <template v-if="item.name==='平均执行率'">
  61. %
  62. </template>
  63. {{(item.num2*1) > 0 ? '↑' : '↓'}}</text>
  64. </view>
  65. </view>
  66. <!-- <view class="grid" v-for="(item,index) in numlist" :key="index"
  67. style="height: auto;padding-bottom: 20rpx;">
  68. <view class="audonum" v-if="item.name=='平均接待时长'">
  69. <view class="circle"></view>
  70. {{item.name}}/分</view>
  71. <view class="audonum" v-else>
  72. <view class="circle"></view>
  73. {{item.name}}</view>
  74. <view class="num">
  75. <view class="" style="width: 35%;">
  76. {{index==0?item.num+'%':item.num}}
  77. </view>
  78. <view class="comparesize" v-if="compareFlag&&timepickpickisshow">
  79. <text style="margin-right: 10rpx;">对比:{{index==1?item.num1+'%':item.num1}}</text>
  80. <text
  81. :style="{color:item.num2*1>0?'red':'green'}">{{item.num2+'%'}}{{(item.num2*1) > 0 ? '↑' : '↓'}}</text>
  82. </view>
  83. </view>
  84. </view> -->
  85. </view>
  86. </view>
  87. <view style="width: 100%;height: 20rpx;background: #FAFAFA;"></view>
  88. <view class="boxtittab" style="border: none;height: 82rpx;">
  89. <view class="tabbox">
  90. <view :class="{ activecllasscet2: newactiveTotal == 0 }" @click="tabxuanxiangtap(0)">项目</view>
  91. </view>
  92. <view class="tabbox">
  93. <view :class="{ activecllasscet2: newactiveTotal == 1 }" @click="tabxuanxiangtap(1)">顾问</view>
  94. </view>
  95. <view class="tabbox">
  96. <view :class="{ activecllasscet2: newactiveTotal == 2 }" @click="tabxuanxiangtap(2)">团队</view>
  97. </view>
  98. <view class="tabbox">
  99. <view :class="{ activecllasscet2: newactiveTotal == 3 }" @click="tabxuanxiangtap(3)">销讲一级</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].num1 = 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.startReceptionCount || 0
  430. this.numlist[2].num2 = data.contrastReceptionCount || 0
  431. } else {
  432. this.compareFlag = false
  433. }
  434. this.sheartime1 = data.lastStartDate.substring(5, 10) + "--" + data.lastEndDate.substring(5,
  435. 10);
  436. this.sheartime2 = '请选择';
  437. this.kanbanlist.duibitime = '';
  438. var kaishi = this.DateDiff(data.lastStartDate, data.lastEndDate);
  439. this.kanbanlist.kaishitime = data.lastStartDate + "至" + data.lastEndDate + "(" + kaishi + "天)";
  440. if (this.pamect.showStatus == 1) {
  441. this.sheartime2 = data.firstStartDate.substring(5, 10) + "--" + data.firstEndDate
  442. .substring(5, 10);
  443. var jeishu = this.DateDiff(data.firstStartDate, data.firstEndDate);
  444. this.kanbanlist.duibitime = data.firstStartDate + "至" + data.firstEndDate + "(" + jeishu +
  445. "天)";
  446. }
  447. this.kanbanlist.audonum = data.sumCustomer;
  448. this.kanbanlist.audotime = data.avgDuration;
  449. this.kanbanlist.avgDuration = data.fraction;
  450. this.kanbanlist.fraction = data.fraction;
  451. if (this.newactiveTotal == 0) {
  452. this.ProjectDimension()
  453. } else if (this.newactiveTotal == 1) {
  454. if (this.pamect.accountId == "") {
  455. this.getguwenlist()
  456. } else {
  457. this.ConsultantDimension()
  458. }
  459. } else if (this.newactiveTotal == 2) {
  460. if (this.pamect.deptId == "") {
  461. this.getuanduilist()
  462. } else {
  463. this.TeamCompared()
  464. }
  465. } else if (this.newactiveTotal == 3) {
  466. this.speakingLevel()
  467. } else {
  468. if (this.pamect.marketingId == '') {
  469. this.getonsyiji()
  470. } else {
  471. this.aboutEecondary()
  472. }
  473. }
  474. });
  475. },
  476. //起始时间
  477. totalTimeChange(e) {
  478. this.pamect.lastStartDate = e.startDate;
  479. this.pamect.lastEndDate = e.endDate;
  480. var kaishi = this.DateDiff(this.pamect.lastStartDate, this.pamect.lastEndDate)
  481. this.kanbanlist.kaishitime = this.pamect.lastStartDate + "至" + this.pamect.lastEndDate + "(" + kaishi +
  482. "天)";
  483. if (this.pamect.showStatus == 0) {
  484. this.init()
  485. this.totalTimeShow = false;
  486. } else {
  487. if (this.pamect.firstStartDate.length == 0) {
  488. uni.showToast({
  489. title: '请选择对比时间',
  490. duration: 2000
  491. });
  492. } else {
  493. var jshu = this.DateDiff(this.pamect.firstStartDate, this.pamect.firstEndDate)
  494. if (kaishi == jshu) {
  495. this.init()
  496. } else {
  497. uni.showToast({
  498. title: '请选择相同天数',
  499. duration: 2000
  500. });
  501. }
  502. }
  503. this.totalTimeShow = false;
  504. }
  505. },
  506. //对比时间
  507. totalTimeChange2(e) {
  508. var d = new Date(e.result.replace(/\-/g, '/'));
  509. d.setDate(d.getDate() + this.intervaltime);
  510. var year = d.getFullYear();
  511. var month = d.getMonth() + 1;
  512. if (month < 10) month = '0' + month;
  513. var day = d.getDate();
  514. if (day < 10) day = '0' + day;
  515. this.pamect.firstStartDate = e.result;
  516. this.pamect.firstEndDate = year + '-' + month + '-' + day;
  517. console.log(this.pamect.firstStartDate)
  518. var kaishi = this.DateDiff(this.pamect.lastStartDate, this.pamect.lastEndDate)
  519. var jeishu = this.DateDiff(this.pamect.firstStartDate, this.pamect.firstEndDate)
  520. this.kanbanlist.duibitime = this.pamect.firstStartDate + "至" + this.pamect.firstEndDate + "(" + jeishu +
  521. "天)";
  522. console.log(this.pamect.lastStartDate, this.pamect.lastEndDate, kaishi, jeishu)
  523. if (kaishi == jeishu) {
  524. this.init()
  525. } else {
  526. uni.showToast({
  527. title: '请选择相同天数',
  528. duration: 2000
  529. });
  530. }
  531. this.totalTimeShow2 = false;
  532. },
  533. //自定义时间
  534. totalTimeChange3(e) {
  535. this.pamect.firstStartDate = "";
  536. this.pamect.firstEndDate = "";
  537. this.pamect.lastStartDate = e.startDate;
  538. this.pamect.lastEndDate = e.endDate;
  539. this.init()
  540. this.totalTimeShow3 = false;
  541. },
  542. //时间切换
  543. tabtimetap(index) {
  544. if (index == 0) {
  545. this.pamect.timeType = "4";
  546. this.pamect.firstStartDate = '';
  547. this.pamect.firstEndDate = '';
  548. this.pamect.lastStartDate = '';
  549. this.pamect.lastEndDate = '';
  550. this.init()
  551. } else if (index == 1) {
  552. this.pamect.timeType = "5";
  553. this.pamect.firstStartDate = '';
  554. this.pamect.firstEndDate = '';
  555. this.pamect.lastStartDate = '';
  556. this.pamect.lastEndDate = '';
  557. this.init()
  558. } else if (index == 2) {
  559. this.pamect.timeType = "6";
  560. this.pamect.firstStartDate = '';
  561. this.pamect.firstEndDate = '';
  562. this.pamect.lastStartDate = '';
  563. this.pamect.lastEndDate = '';
  564. this.init()
  565. } else if (index == 3) {
  566. this.pamect.timeType = "";
  567. this.totalTimeShow = true;
  568. } else if (index == 4) {
  569. this.pamect.timeType = "";
  570. var kaishi = this.DateDiff(this.pamect.lastStartDate, this.pamect.lastEndDate)
  571. console.log(kaishi)
  572. this.intervaltime = kaishi - 1;
  573. this.totalTimeShow2 = true;
  574. } else {
  575. this.pamect.timeType = "";
  576. this.totalTimeShow3 = true;
  577. }
  578. this.activeTotal = index;
  579. },
  580. //tab切换
  581. tabxuanxiangtap(index) {
  582. this.newactiveTotal = index;
  583. this.guwenshow = false;
  584. this.Selectlevel = false;
  585. this.Selecttuandui = false;
  586. this.tableDate = []
  587. // this.pamect.showStatus = 0;
  588. // this.pamect.timeType = "4";
  589. // this.pamect.firstStartDate = '';
  590. // this.pamect.firstEndDate = '';
  591. // this.pamect.lastStartDate = '';
  592. // this.pamect.lastEndDate = '';
  593. // this.pamect.accountId = '';
  594. // this.pamect.marketingId = '';
  595. // this.pamect.deptId = ""
  596. // this.activeTotal = 0;
  597. this.timepickpickisshow = false;
  598. this.init()
  599. if (index == 1) {
  600. this.guwenshow = true;
  601. }
  602. },
  603. //项目维度
  604. ProjectDimension() {
  605. const that = this;
  606. that.lineOptsect = {
  607. categories: [],
  608. series: []
  609. };
  610. this.linetype = "line";
  611. this.$u.post("/cusLvStatistics/teamOrOneValueShow", this.pamect).then(data => {
  612. if (this.pamect.showStatus == 0) {
  613. that.lineOptsect = {
  614. categories: [],
  615. series: [{
  616. name: '起始时间',
  617. data: [],
  618. color: '#7ED3F4'
  619. }]
  620. }
  621. data.startList.forEach((child, zxc) => {
  622. that.lineOptsect.categories.push(child.statDate.substring(5, 10))
  623. })
  624. that.lineOptsect.series[0].data = data.startList.map(item => item.fraction);
  625. console.log(that.lineOptsect.series, 'asdasdsadsadass00000000000000')
  626. } else {
  627. that.lineOptsect = {
  628. categories: [],
  629. series: [{
  630. name: '起始时间',
  631. data: [],
  632. color: '#7ED3F4'
  633. },
  634. {
  635. name: '对比时间',
  636. data: [],
  637. color: '#FF7070'
  638. },
  639. ]
  640. }
  641. data.startList.forEach((item, sdf) => {
  642. data.endList.forEach((child, zxc) => {
  643. if (sdf == zxc) {
  644. that.lineOptsect.categories.push(
  645. child.statDate.substring(5, 10) + 'vs' + item
  646. .statDate
  647. .substring(5, 10)
  648. )
  649. }
  650. })
  651. })
  652. that.lineOptsect.series[1].data = data.startList.map(item => item.fraction);
  653. that.lineOptsect.series[0].data = data.endList.map(item => item.fraction)
  654. that.guwenFlag = false
  655. // // 处理表格数据
  656. let arr = [
  657. ['时间', '时段一', '时段二', '变化']
  658. // {
  659. // time:'时间',
  660. // time1:'时段一',
  661. // time2:'时段二',
  662. // compare:'变化'
  663. // },
  664. ]
  665. that.lineOptsect.categories.map((item, index) => {
  666. let newarr = [item, data.endList[index].fraction, data.startList[index]
  667. .fraction, data.comparedList[index].fraction
  668. ]
  669. // obj.time=item
  670. // obj.time1=data.firstValue[index].fraction
  671. // obj.time2=data.lastValue[index].fraction
  672. // obj.compare=data.contrast[index].data
  673. // arr.push(obj)
  674. arr.push(newarr)
  675. })
  676. // console.log(arr)
  677. that.tableDate = arr
  678. console.log(that.lineOptsect.series, 'asdasdsadsadass00000000000000else')
  679. }
  680. });
  681. },
  682. //顾问维度
  683. ConsultantDimension() {
  684. const that = this;
  685. that.lineOptsect = {
  686. categories: [],
  687. series: []
  688. };
  689. this.linetype = "radar";
  690. this.$u.post("/cusLvStatistics/accFirstLevelContrast", this.pamect).then(data => {
  691. // return
  692. if (this.pamect.showStatus == 0) {
  693. that.lineOptsect = {
  694. categories: [],
  695. series: [{
  696. name: '时段一',
  697. data: [],
  698. color: '#7ED3F4'
  699. }]
  700. }
  701. data.firstList.forEach((item, sdf) => {
  702. that.lineOptsect.categories.push(item.name)
  703. that.lineOptsect.series[0].data.push(data.firstList[sdf].total)
  704. })
  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. }
  743. });
  744. },
  745. // 顾问纬度选择顾问
  746. oninputtap() {
  747. this.Showhiddenunits = true;
  748. },
  749. // 顾问选择确认
  750. confirm(e) {
  751. this.lopanobj.id = e[0].value;
  752. this.lopanobj.name = e[0].label;
  753. this.pamect.accountId = this.lopanobj.id;
  754. this.ConsultantDimension()
  755. this.Showhiddenunits = false;
  756. for (let i = 0; i < this.selectlist.length; i++) {
  757. if (e[0].value == this.selectlist[i].value) {
  758. this.selindexList[0] = i
  759. }
  760. }
  761. },
  762. //获取顾问
  763. getguwenlist() {
  764. this.$u.post("/cusLvStatistics/selectAllAccountIdByHouseId", {
  765. houseId: this.pamect.houseId
  766. }).then(data => {
  767. this.selectlist = [];
  768. if (data.length == 0) {
  769. this.lineOptsect = {
  770. categories: [],
  771. series: []
  772. };
  773. this.guwenshow = false;
  774. return
  775. } else {
  776. this.guwenshow = true;
  777. data.forEach(item => {
  778. this.selectlist.push({
  779. value: item.accountId,
  780. label: item.name
  781. })
  782. })
  783. this.lopanobj.id = data[0].accountId;
  784. this.lopanobj.name = data[0].name;
  785. this.pamect.accountId = this.lopanobj.id;
  786. this.ConsultantDimension()
  787. }
  788. })
  789. },
  790. //销讲一级
  791. speakingLevel() {
  792. this.linetype = "radar";
  793. this.lineOptsect = {
  794. categories: [],
  795. series: []
  796. };
  797. this.$u.post("/cusLvStatistics/firstLevelContrast", this.pamect).then(data => {
  798. if (data.length == 0) {
  799. return
  800. } else {
  801. let list = data.map(item => {
  802. return item.name
  803. });
  804. let list1 = data.map(item => {
  805. if (item.avgExecutionRate == null) {
  806. item.avgExecutionRate = 0
  807. } else {
  808. item.avgExecutionRate = item.avgExecutionRate
  809. }
  810. return item.avgExecutionRate
  811. });
  812. this.lineOptsect = {
  813. "categories": list,
  814. "series": [{
  815. "name": "销讲一级",
  816. "data": list1
  817. }]
  818. }
  819. }
  820. })
  821. },
  822. //销讲二级
  823. aboutEecondary() {
  824. this.lineOptsect = {};
  825. this.linetype = "line";
  826. this.$u.post("/cusLvStatistics/level2Contrast", this.pamect).then(data => {
  827. if (this.pamect.showStatus == 0) {
  828. this.lineOptsect = {
  829. categories: [],
  830. series: [{
  831. name: '起始时间',
  832. data: [],
  833. color: '#7ED3F4'
  834. }]
  835. }
  836. data.lastList.forEach((item, sdf) => {
  837. this.lineOptsect.categories.push(item.statDate.substring(5, 10))
  838. })
  839. this.lineOptsect.series[0].data = data.lastList.map(item => item.avgExecutionRate);
  840. } else {
  841. this.lineOptsect = {
  842. categories: [],
  843. series: [{
  844. name: '起始时间',
  845. data: [],
  846. color: '#7ED3F4'
  847. },
  848. {
  849. name: '对比时间',
  850. data: [],
  851. color: '#FF7070'
  852. },
  853. ]
  854. }
  855. data.firstList.forEach((item, sdf) => {
  856. data.lastList.forEach((child, zxc) => {
  857. if (sdf == zxc) {
  858. this.lineOptsect.categories.push(
  859. child.statDate.substring(5, 10) + 'vs' + item.statDate
  860. .substring(5, 10)
  861. )
  862. }
  863. })
  864. })
  865. this.lineOptsect.series[1].data = data.firstList.map(item => item.avgExecutionRate);
  866. this.lineOptsect.series[0].data = data.lastList.map(item => item.avgExecutionRate)
  867. let that = this
  868. this.guwenFlag = false
  869. // // 处理表格数据
  870. let arr = [
  871. ['时间', '时段一', '时段二', '变化']
  872. ]
  873. that.lineOptsect.categories.map((item, index) => {
  874. let newarr = [item, data.lastList[
  875. index].avgExecutionRate, data.firstList[index].avgExecutionRate,
  876. data.contrast[index].data
  877. ]
  878. arr.push(newarr)
  879. })
  880. // console.log(arr)
  881. that.tableDate = arr
  882. }
  883. })
  884. },
  885. //销讲二级:获取一级
  886. getonsyiji() {
  887. this.$u.post("/cusLvStatistics/findAllFirstLevel", {
  888. houseId: this.pamect.houseId
  889. }).then(data => {
  890. this.selectlist2 = [];
  891. if (data.length == 0) {
  892. this.Selectlevel = false;
  893. this.lineOptsect = {
  894. categories: [],
  895. series: []
  896. };
  897. return
  898. } else {
  899. this.Selectlevel = true;
  900. data.forEach(item => {
  901. this.selectlist2.push({
  902. value: item.marketingId,
  903. label: item.name
  904. })
  905. })
  906. this.Selectlevelobj.id = data[0].marketingId;
  907. this.Selectlevelobj.name = data[0].name;
  908. this.getonserji(this.Selectlevelobj.id)
  909. }
  910. })
  911. },
  912. //销讲二级:通过一级获取二级
  913. getonserji(ccd) {
  914. this.$u.post("/cusLvStatistics/findLevel2ByFirstLevel", {
  915. houseId: this.pamect.houseId,
  916. marketingId: ccd
  917. }).then(data => {
  918. this.selectlist3 = [];
  919. data.forEach(item => {
  920. this.selectlist3.push({
  921. value: item.marketingId,
  922. label: item.name
  923. })
  924. })
  925. this.erSelectlevelobj.id = data[0].marketingId;
  926. this.erSelectlevelobj.name = data[0].name;
  927. this.pamect.marketingId = this.erSelectlevelobj.id;
  928. this.aboutEecondary()
  929. })
  930. },
  931. //销讲二级:一级选择
  932. oninputtap2() {
  933. this.Showhiddenunits2 = true;
  934. },
  935. //销讲二级:二级选择
  936. oninputtap3() {
  937. if (this.Selectlevelobj.id == "") {
  938. uni.showToast({
  939. title: '请先选择一级',
  940. duration: 2000
  941. });
  942. } else {
  943. this.Showhiddenunits3 = true;
  944. }
  945. },
  946. //销讲二级:一级选择确认
  947. confirm2(e) {
  948. this.Selectlevelobj.id = e[0].value;
  949. this.Selectlevelobj.name = e[0].label;
  950. this.getonserji(this.Selectlevelobj.id)
  951. },
  952. //销讲二级:二级选择确认
  953. confirm3(e) {
  954. this.erSelectlevelobj.id = e[0].value;
  955. this.erSelectlevelobj.name = e[0].label;
  956. this.pamect.marketingId = this.erSelectlevelobj.id;
  957. this.aboutEecondary()
  958. },
  959. //团队请选择
  960. oninputtap4() {
  961. this.Showhiddenunits4 = true;
  962. },
  963. //团队选择确认
  964. confirm4(e) {
  965. this.Selecttuanduiobj.id = e[0].value;
  966. this.Selecttuanduiobj.name = e[0].label;
  967. this.pamect.deptId = this.Selecttuanduiobj.id;
  968. this.pamect.showStatus = 0;
  969. this.pamect.timeType = "4";
  970. this.pamect.firstStartDate = '';
  971. this.pamect.firstEndDate = '';
  972. this.pamect.lastStartDate = '';
  973. this.pamect.lastEndDate = '';
  974. this.activeTotal = 0;
  975. this.timepickpickisshow = false;
  976. this.init()
  977. this.TeamCompared()
  978. },
  979. //获取团队列表
  980. getuanduilist() {
  981. uni.request({
  982. url: config.service.findListByUser + "?houseId=" + this.pamect.houseId,
  983. method: "GET",
  984. header: {
  985. 'content-type': 'application/json',
  986. 'Authorization': 'Bearer ' + uni.getStorageSync('weapp_session_login_data').token
  987. },
  988. success: (data) => {
  989. if (data.data.data.length == 0) {
  990. this.Selecttuandui = false;
  991. this.lineOptsect = {
  992. categories: [],
  993. series: []
  994. };
  995. return
  996. } else {
  997. this.Selecttuandui = true;
  998. data.data.data.forEach(item => {
  999. this.selectlist4.push({
  1000. value: item.deptId,
  1001. label: item.name
  1002. })
  1003. })
  1004. this.Selecttuanduiobj.id = this.selectlist4[0].value;
  1005. this.Selecttuanduiobj.name = this.selectlist4[0].label;
  1006. this.pamect.deptId = this.Selecttuanduiobj.id;
  1007. this.TeamCompared()
  1008. }
  1009. }
  1010. })
  1011. // this.$u.post("/cusLvStatistics/findAllDeptIdByHouseId ", {
  1012. // houseId: this.pamect.houseId
  1013. // }).then(data => {
  1014. // this.selectlist4 = [{
  1015. // value: "",
  1016. // label: "全部"
  1017. // }];
  1018. // if (data.length == 0) {
  1019. // this.Selecttuandui = false;
  1020. // this.lineOptsect = {
  1021. // categories: [],
  1022. // series: []
  1023. // };
  1024. // return
  1025. // } else {
  1026. // this.Selecttuandui = true;
  1027. // data.forEach(item => {
  1028. // this.selectlist4.push({
  1029. // value: item.deptId,
  1030. // label: item.deptName
  1031. // })
  1032. // })
  1033. // this.Selecttuanduiobj.id = "";
  1034. // this.Selecttuanduiobj.name = "全部";
  1035. // this.pamect.deptId = this.Selecttuanduiobj.id;
  1036. // this.TeamCompared()
  1037. // }
  1038. // })
  1039. },
  1040. //团队对比
  1041. TeamCompared() {
  1042. const that = this;
  1043. that.lineOptsect = {};
  1044. this.linetype = "line";
  1045. this.$u.post("/cusLvStatistics/teamOrOneValueShowByDept", this.pamect).then(data => {
  1046. if (this.Selecttuanduiobj.id == "") {
  1047. var newlist = [];
  1048. for (var i in data) {
  1049. var ect = data[i].receptionStatList.map(item => {
  1050. if (item.fraction == null) {
  1051. item.fraction = 0
  1052. } else {
  1053. item.fraction = item.fraction
  1054. }
  1055. return item.fraction
  1056. });
  1057. newlist.push({
  1058. name: data[i].deptName,
  1059. data: ect
  1060. })
  1061. }
  1062. var timelist = [];
  1063. for (var i in data) {
  1064. var ect = data[i].receptionStatList.map(item => {
  1065. return item.statDate
  1066. });
  1067. timelist.push({
  1068. name: data[i].deptName,
  1069. data: ect
  1070. })
  1071. }
  1072. var xAxisdata = [];
  1073. timelist[0].data.forEach((item, sdf) => {
  1074. xAxisdata.push(item.substring(5, 10))
  1075. })
  1076. that.lineOptsect = {
  1077. categories: xAxisdata,
  1078. series: newlist
  1079. }
  1080. } else {
  1081. if (this.pamect.showStatus == 0) {
  1082. that.lineOptsect = {
  1083. categories: [],
  1084. series: [{
  1085. name: '起始时间',
  1086. data: [],
  1087. color: '#7ED3F4'
  1088. }]
  1089. }
  1090. data.lastValue.receptionStatList.forEach((item, sdf) => {
  1091. that.lineOptsect.categories.push(item.statDate.substring(5, 10))
  1092. })
  1093. that.lineOptsect.series[0].data = data.lastValue.receptionStatList.map(item => item
  1094. .fraction);
  1095. } else {
  1096. that.lineOptsect = {
  1097. categories: [],
  1098. series: [{
  1099. name: '起始时间',
  1100. data: [],
  1101. color: '#7ED3F4'
  1102. },
  1103. {
  1104. name: '对比时间',
  1105. data: [],
  1106. color: '#FF7070'
  1107. },
  1108. ]
  1109. }
  1110. data.firstValue.receptionStatList.forEach((item, sdf) => {
  1111. data.lastValue.receptionStatList.forEach((child, zxc) => {
  1112. if (sdf == zxc) {
  1113. that.lineOptsect.categories.push(
  1114. child.statDate.substring(5, 10) + 'vs' + item
  1115. .statDate.substring(5, 10)
  1116. )
  1117. }
  1118. })
  1119. })
  1120. that.lineOptsect.series[1].data = data.firstValue.receptionStatList.map(item => item
  1121. .fraction);
  1122. that.lineOptsect.series[0].data = data.lastValue.receptionStatList.map(item => item
  1123. .fraction)
  1124. that.guwenFlag = false
  1125. // 团队处理数据
  1126. // // 处理表格数据
  1127. let arr = [
  1128. ['时间', '时段一', '时段二', '变化']
  1129. ]
  1130. that.lineOptsect.categories.map((item, index) => {
  1131. let newarr = [item, data
  1132. .lastValue.receptionStatList[index].fraction, data.firstValue
  1133. .receptionStatList[index].fraction, data.contrast
  1134. .receptionStatList[index].data
  1135. ]
  1136. arr.push(newarr)
  1137. })
  1138. that.tableDate = arr
  1139. }
  1140. }
  1141. });
  1142. },
  1143. //算相隔天数
  1144. DateDiff(sDate1, sDate2) {
  1145. var aDate, oDate1, oDate2, iDays;
  1146. aDate = sDate1.split("-");
  1147. oDate1 = new Date(aDate[1] + '/' + aDate[2] + '/' + aDate[0]); //转换为yyyy-MM-dd格式
  1148. aDate = sDate2.split("-");
  1149. oDate2 = new Date(aDate[1] + '/' + aDate[2] + '/' + aDate[0]);
  1150. iDays = parseInt(Math.abs(oDate1 - oDate2) / 1000 / 60 / 60 / 24); //把相差的毫秒数转换为天数
  1151. return iDays + 1; //返回相差天数
  1152. },
  1153. },
  1154. }
  1155. </script>
  1156. <style lang="scss" scoped>
  1157. .boxtittab .tabbox{
  1158. flex: none;
  1159. padding: 0 35rpx;
  1160. }
  1161. .uchaserbox {
  1162. height: 500rpx;
  1163. }
  1164. .title2-che {
  1165. width: 178rpx;
  1166. height: 80rpx;
  1167. background: #FFFFFF;
  1168. border-radius: 6rpx;
  1169. line-height: 80rpx;
  1170. font-size: 28rpx;
  1171. font-weight: 400;
  1172. color: #666666;
  1173. text-indent: 12rpx;
  1174. margin-left: 35rpx;
  1175. margin-top: 20rpx;
  1176. .righttochoose {
  1177. width: 28rpx;
  1178. height: 14rpx;
  1179. margin-left: 12rpx;
  1180. }
  1181. }
  1182. .table {
  1183. border: 0px solid darkgray;
  1184. .tr {
  1185. display: flex;
  1186. // width: 100%;
  1187. justify-content: center;
  1188. height: 64rpx;
  1189. align-items: center;
  1190. border-bottom: 1px solid #E0E0E0;
  1191. flex-wrap: nowrap;
  1192. .td {
  1193. text-align: center;
  1194. font-size: 24rpx;
  1195. font-weight: 400;
  1196. color: #333333;
  1197. height: 64rpx;
  1198. line-height: 64rpx;
  1199. // flex-shrink: 0;
  1200. }
  1201. .trd {
  1202. flex-shrink: 0;
  1203. min-width: 300rpx;
  1204. // border-bottom: 1px solid #ccc;
  1205. }
  1206. .th {
  1207. height: 64rpx;
  1208. text-align: center;
  1209. font-size: 28rpx;
  1210. font-weight: 400;
  1211. color: #666666;
  1212. line-height: 64rpx;
  1213. }
  1214. }
  1215. }
  1216. .activecllasscet2 {
  1217. color: #2671E2;
  1218. font-weight: 600;
  1219. border-bottom: 4rpx solid #2671E2;
  1220. }
  1221. .timeduibi {
  1222. width: 100%;
  1223. background: #FFFFFF;
  1224. padding-bottom: 10rpx;
  1225. .timeshow {
  1226. color: #666666;
  1227. width: 100%;
  1228. height: 50rpx;
  1229. font-size: 28rpx;
  1230. line-height: 50rpx;
  1231. text-indent: 30rpx;
  1232. }
  1233. }
  1234. // 顶部时间切换
  1235. .timetabct {
  1236. position: sticky;
  1237. top: var(--window-top);
  1238. z-index: 999;
  1239. background: #fff;
  1240. width: 100%;
  1241. height: 98rpx;
  1242. display: flex;
  1243. align-items: center;
  1244. border-bottom: 1rpx solid #E0E0E0;
  1245. color: #666;
  1246. }
  1247. .timetabctview {
  1248. flex: 1;
  1249. text-align: center;
  1250. line-height: 98rpx;
  1251. font-size: 28rpx;
  1252. font-family: PingFangSC-Regular, PingFang SC;
  1253. font-weight: 400;
  1254. height: 100%;
  1255. display: flex;
  1256. justify-content: center;
  1257. }
  1258. .timetabctview view{
  1259. width: 100rpx;
  1260. }
  1261. .activecllasscet {
  1262. color: #2671E2;
  1263. font-weight: 600;
  1264. border-bottom: 4rpx solid #2671E2;
  1265. }
  1266. // 对比时间切换
  1267. .timepick {
  1268. width: 100%;
  1269. height: 90rpx;
  1270. display: flex;
  1271. align-items: center;
  1272. background: #FFFFFF;
  1273. }
  1274. .timepicktime {
  1275. width: 260rpx;
  1276. height: 50rpx;
  1277. line-height: 50rpx;
  1278. margin-left: 30rpx;
  1279. display: flex;
  1280. background: #FFFFFF;
  1281. }
  1282. .timepickpick {
  1283. width: 110rpx;
  1284. height: 50rpx;
  1285. margin-left: 30rpx;
  1286. display: flex;
  1287. align-items: center;
  1288. }
  1289. .Underimg {
  1290. width: 28rpx;
  1291. height: 14rpx;
  1292. margin-left: 12rpx;
  1293. }
  1294. .timeButton {
  1295. width: 100%;
  1296. height: 60rpx;
  1297. display: flex;
  1298. color: #b1b1b1;
  1299. font-size: 28rpx;
  1300. .item {
  1301. text-align: center;
  1302. line-height: 60rpx;
  1303. padding-left: 12rpx;
  1304. padding-right: 12rpx;
  1305. border-radius: 8rpx;
  1306. border: 1px solid #E0E0E0;
  1307. margin-right: 20rpx;
  1308. &.active {
  1309. color: #FFFFFF;
  1310. background-color: #2671E2;
  1311. }
  1312. }
  1313. }
  1314. .boardbox {
  1315. width: 100%;
  1316. height: 172rpx;
  1317. display: flex;
  1318. align-items: center;
  1319. background: #F4F8FD;
  1320. border-radius: 8rpx;
  1321. margin-top: 28rpx;
  1322. .boardbox-zuo {
  1323. width: 50%;
  1324. height: 120rpx;
  1325. border-right: 1px solid #E0E0E0;
  1326. }
  1327. .boardbox-you {
  1328. width: 50%;
  1329. height: 120rpx;
  1330. }
  1331. .boardbox-text1 {
  1332. width: 100%;
  1333. text-align: center;
  1334. font-size: 28rpx;
  1335. color: #333333;
  1336. }
  1337. .boardbox-text2 {
  1338. width: 100%;
  1339. text-align: center;
  1340. font-size: 26rpx;
  1341. color: #333333;
  1342. margin-top: 10rpx;
  1343. }
  1344. }
  1345. .comparesize {
  1346. font-size: 26rpx;
  1347. color: #333;
  1348. margin: 30rpx 30rpx 0 30rpx;
  1349. display: flex;
  1350. align-items: center;
  1351. }
  1352. .grid:nth-child(1) {
  1353. border-right: 1rpx solid #E0E0E0;
  1354. border-bottom: 1rpx solid #E0E0E0;
  1355. }
  1356. .grid:nth-child(2) {
  1357. border-bottom: 1rpx solid #E0E0E0;
  1358. }
  1359. .grid:nth-child(3) {
  1360. border-right: 1rpx solid #E0E0E0;
  1361. }
  1362. </style>