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.
 
 
 
 

1430 line
39 KiB

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