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.
 
 
 

1548 lines
43 KiB

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