AI销管
Du kannst nicht mehr als 25 Themen auswählen Themen müssen entweder mit einem Buchstaben oder einer Ziffer beginnen. Sie können Bindestriche („-“) enthalten und bis zu 35 Zeichen lang sein.
 
 
 
 

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