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.

TrendAnalysis.vue 39 KiB

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