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.
 
 
 
 

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