AI销管
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 

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