AI销管
Vous ne pouvez pas sélectionner plus de 25 sujets Les noms de sujets doivent commencer par une lettre ou un nombre, peuvent contenir des tirets ('-') et peuvent comporter jusqu'à 35 caractères.
 
 
 
 

1614 lignes
44 KiB

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