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.
 
 
 

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