newReport.vue 35 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150115111521153115411551156115711581159116011611162116311641165116611671168116911701171117211731174117511761177117811791180118111821183118411851186118711881189119011911192119311941195119611971198119912001201120212031204120512061207120812091210121112121213121412151216121712181219122012211222122312241225122612271228122912301231123212331234123512361237123812391240124112421243124412451246124712481249125012511252125312541255125612571258125912601261126212631264126512661267126812691270127112721273127412751276127712781279128012811282128312841285128612871288128912901291129212931294129512961297129812991300130113021303130413051306130713081309131013111312131313141315131613171318131913201321132213231324132513261327132813291330133113321333133413351336133713381339134013411342134313441345134613471348134913501351135213531354135513561357135813591360136113621363136413651366136713681369137013711372137313741375137613771378137913801381138213831384138513861387138813891390139113921393139413951396139713981399140014011402140314041405140614071408140914101411141214131414141514161417141814191420142114221423142414251426142714281429143014311432143314341435143614371438143914401441144214431444144514461447144814491450145114521453145414551456145714581459146014611462146314641465146614671468146914701471147214731474147514761477147814791480148114821483148414851486148714881489149014911492149314941495149614971498149915001501150215031504150515061507150815091510
  1. <template>
  2. <view class="content">
  3. <view class="status_bar"></view>
  4. <view class="top-nav">
  5. <u-icon name="arrow-left" size="38" class="back" @click="back"></u-icon>
  6. <view class="left" :class="index==1?'nav-active':''" @click="navClick(1)">
  7. 全部
  8. </view>
  9. <view class="right" :class="index==2?'nav-active':''" @click="navClick(2)">
  10. 新季
  11. </view>
  12. </view>
  13. <view class="content1 content-item">
  14. <view class="title">
  15. 收支核算 <u-icon :name="iconName1" size="30" style="margin-left: 10rpx;"
  16. @click="foldClcik(['fade', 'slide-top'],1)">
  17. </u-icon>
  18. </view>
  19. <uni-transition ref="ani" custom-class="transition" :mode-class="modeClass" :styles="styles"
  20. :show="isSHowContent1">
  21. <u-line color="#EEEEEE" />
  22. <view class="row1 mtb40">
  23. <view class="left">
  24. {{ym1}}
  25. </view>
  26. <view class="right" v-if="index!=2">
  27. <text class="text" :class="textIndex==1?'text-active':''" @click="accounting(1)">
  28. 按月
  29. </text>
  30. <text class="text" :class="textIndex==2?'text-active':''" @click="accounting(2)">按年</text>
  31. </view>
  32. </view>
  33. <view class="row2" @click='godetail(2)'>
  34. <view class="text">
  35. 收入(元)
  36. </view>
  37. <view class="price">
  38. {{sr}}
  39. </view>
  40. </view>
  41. <view class="row3" @click='godetail(2)'>
  42. <view class="left">
  43. <view class="text">
  44. 支出(元)
  45. </view>
  46. <view class="number">
  47. {{zc}}
  48. </view>
  49. </view>
  50. <view class="center">
  51. </view>
  52. <view class="right">
  53. <view class="text">
  54. 差额(元)
  55. </view>
  56. <view class="number">
  57. {{sr-zc}}
  58. </view>
  59. </view>
  60. </view>
  61. <view class="row4">
  62. <qiun-data-charts type="area" :opts="opts" :chartData="chartData" :ontouch="true"
  63. @getIndex="getIndex" />
  64. </view>
  65. </uni-transition>
  66. </view>
  67. <view class="content2 content-item">
  68. <view class="title">
  69. 合同数据<u-icon :name="iconName2" size="30" style="margin-left: 10rpx;"
  70. @click="foldClcik(['fade', 'slide-top'],2)">
  71. </u-icon>
  72. </view>
  73. <uni-transition ref="ani" custom-class="transition" :mode-class="modeClass" :styles="styles"
  74. :show="isSHowContent2">
  75. <u-line color="#EEEEEE" />
  76. <view class="row1 flex jcsb mtb40">
  77. <view class="left title-lv2">
  78. 数量统计
  79. </view>
  80. <view @click='godetail(0)' class="right-btn">
  81. 合同明细
  82. </view>
  83. </view>
  84. <!-- <view class="row2 flex jcse">
  85. <view class="left flex alc">
  86. <view class="color1"></view>
  87. <text class="text">{{index==1?'过去12个月累计签订数量':'本季累计签订合同数量'}}</text>
  88. </view>
  89. <view class="right flex alc">
  90. <view class="color2"></view>
  91. <text class="text">{{index==1?'当前执行中数量':'本季执行中数量'}}</text>
  92. </view>
  93. </view> -->
  94. <view class="row3">
  95. <qiun-data-charts type="bar" :opts="opts2" :chartData="chartData1" />
  96. </view>
  97. <view class="row4 flex jcsb mtb40">
  98. <view class="left title-lv2">
  99. 利润核算
  100. </view>
  101. <view @click='godetail(1)' class="right-btn">
  102. 利润明细
  103. </view>
  104. </view>
  105. <view class="row5">
  106. <view class="left flex">
  107. <view class="" v-if="index==1">
  108. <u-icon name="arrow-left" size="26" style="margin-right: 10rpx;" color="#969696"
  109. @click="yearClick('1')">
  110. </u-icon>
  111. <text @click="showYear=true">{{year}}</text>
  112. <u-icon name="arrow-right" size="26" style="margin-left: 10rpx;"
  113. :color="nowYear!=year?'#969696':'#DBDBDB'" @click="yearClick('2')" v-if="nowYear!=year">
  114. </u-icon>
  115. <u-icon name="arrow-right" size="26" style="margin-left: 10rpx;"
  116. :color="nowYear!=year?'#969696':'#DBDBDB'" v-if="nowYear==year">
  117. </u-icon>
  118. </view>
  119. <view class="" v-else>
  120. 新季利润
  121. </view>
  122. </view>
  123. <view class="right">
  124. 单位:元
  125. </view>
  126. </view>
  127. <view class="row6">
  128. <qiun-data-charts type="column" :opts="opts3" :chartData="chartData3" />
  129. </view>
  130. </uni-transition>
  131. </view>
  132. <view class="content3 content-item">
  133. <view class="title flex jcsb">
  134. <view class="">
  135. 仓储数据<u-icon :name="iconName3" size="30" style="margin-left: 10rpx;"
  136. @click="foldClcik(['fade', 'slide-top'],3)">
  137. </u-icon>
  138. </view>
  139. <view @click='goToPage(5)' class="right-btn">
  140. 库存明细
  141. </view>
  142. </view>
  143. <uni-transition ref="ani" custom-class="transition" :mode-class="modeClass" :styles="styles"
  144. :show="isSHowContent3">
  145. <u-line color="#EEEEEE" />
  146. <view class="row1 flex jcsb mtb40">
  147. <view class="left title-lv2">
  148. 库存储量
  149. </view>
  150. <view class="right">
  151. 单位:吨
  152. </view>
  153. </view>
  154. <view class="row2">
  155. <qiun-data-charts type="bar" :opts="opts4" :chartData="chartData4" :ontouch="true" />
  156. </view>
  157. <view class="row3">
  158. <view class="list-item flex jcsb" v-for="(item,index) in InventoryList">
  159. <view class="flex alc">
  160. <image :src="item.src" mode="widthFix" style="width: 40rpx;margin-right: 20rpx;"></image>
  161. <text>{{item.name}}</text>
  162. </view>
  163. <view class="number">
  164. {{item.number}}
  165. </view>
  166. </view>
  167. </view>
  168. <view class="row5 flex jcsb mtb40">
  169. <view class="left title-lv2">
  170. 当期货值
  171. </view>
  172. <view class="right">
  173. 单位:元
  174. </view>
  175. </view>
  176. <view class="row6">
  177. <qiun-data-charts type="column" :opts="opts5" :chartData="chartData5" :ontouch="true" />
  178. </view>
  179. <view class="row7">
  180. <view class="left title-lv2" style="margin: 30rpx;">
  181. 平均成本
  182. </view>
  183. <view class="list-item" v-for="item in averageCostList">
  184. <view class="flex jcsb alc">
  185. <view class="left">
  186. {{item.name}}
  187. </view>
  188. <view class="">
  189. {{Number(item.result).toFixed(0)}}
  190. </view>
  191. </view>
  192. </view>
  193. </view>
  194. </uni-transition>
  195. </view>
  196. <view class="content4 content-item">
  197. <view class="title flex jcsb">
  198. <view class="">
  199. 今日入库<u-icon :name="iconName4" size="30" style="margin-left: 10rpx;"
  200. @click="foldClcik(['fade', 'slide-top'],4)">
  201. </u-icon>
  202. </view>
  203. <view @click='godetail(3)' class="right-btn">
  204. 入库明细
  205. </view>
  206. </view>
  207. <uni-transition ref="ani" custom-class="transition" :mode-class="modeClass" :styles="styles"
  208. :show="isSHowContent4">
  209. <view class="row1">
  210. <qiun-data-charts type="ring" :opts="opts6" :chartData="chartData6" />
  211. </view>
  212. </uni-transition>
  213. </view>
  214. <view class="content5 content-item">
  215. <view class="title">
  216. 在途数据<u-icon :name="iconName5" size="30" style="margin-left: 10rpx;"
  217. @click="foldClcik(['fade', 'slide-top'],5)">
  218. </u-icon>
  219. </view>
  220. <uni-transition ref="ani" custom-class="transition" :mode-class="modeClass" :styles="styles"
  221. :show="isSHowContent5">
  222. <view class="row1 days-nav">
  223. <view class="item" :class="carIndex==index?'item-active':''" v-for="(item, index) in dayList"
  224. @click="clickNav(index)">
  225. {{item}}
  226. </view>
  227. </view>
  228. <qiun-data-charts type="pie" :opts="opts7" :chartData="chartData7" />
  229. </uni-transition>
  230. </view>
  231. <view class="content6 content-item">
  232. <view class="title">
  233. 用户增长<u-icon :name="iconName6" size="30" style="margin-left: 10rpx;"
  234. @click="foldClcik(['fade', 'slide-top'],6)">
  235. </u-icon>
  236. </view>
  237. <uni-transition ref="ani" custom-class="transition" :mode-class="modeClass" :styles="styles"
  238. :show="isSHowContent6">
  239. <view class="row1 flex jcsb">
  240. <view class="left">
  241. app注册
  242. </view>
  243. <view class="right">
  244. <text>合计:</text>
  245. <text style="color: #EC6666;">{{appTotal}}</text>
  246. <text>人</text>
  247. </view>
  248. </view>
  249. <view class="row2">
  250. <qiun-data-charts type="area" :opts="opts8" :chartData="chartData8" />
  251. </view>
  252. <view class="row1 flex jcsb">
  253. <view class="left">
  254. 粮脉入驻
  255. </view>
  256. <view class="right">
  257. <text>合计:</text>
  258. <text style="color: #22C572;">{{lmTotal}}</text>
  259. <text>人</text>
  260. </view>
  261. </view>
  262. <view class="row2">
  263. <qiun-data-charts type="area" :opts="opts9" :chartData="chartData9" />
  264. </view>
  265. </uni-transition>
  266. </view>
  267. <u-picker v-model="showYear" mode="selector" :range="selector" :default-selector="[2]"></u-picker>
  268. </view>
  269. </template>
  270. <script>
  271. export default {
  272. data() {
  273. return {
  274. carIndex: 0,
  275. appTotal: '',
  276. lmTotal: '',
  277. ym1: '',
  278. sr: '',
  279. zc: '',
  280. seachYear: '',
  281. seachMoth: '',
  282. dayList: ['1天', '7天', '30天'],
  283. averageCostList: [{
  284. name: '玉米',
  285. number: '2000.00'
  286. },
  287. {
  288. name: '玉米(潮粮)',
  289. number: '2000.00'
  290. },
  291. {
  292. name: '高粱',
  293. number: '2000.00'
  294. },
  295. {
  296. name: '高粱(潮粮)',
  297. number: '2000.00'
  298. },
  299. {
  300. name: '小麦',
  301. number: '2000.00'
  302. },
  303. {
  304. name: '大豆',
  305. number: '2000.00'
  306. },
  307. ],
  308. InventoryList: [{
  309. name: '合计储量',
  310. number: '1000.00',
  311. src: '../../static/img/cl.png'
  312. }, {
  313. name: '采购待执行',
  314. number: '1000.00',
  315. src: '../../static/img/cg.png'
  316. },
  317. {
  318. name: '销待执行售',
  319. number: '1000.00',
  320. src: '../../static/img/xs.png'
  321. },
  322. {
  323. name: '头寸',
  324. number: '1000.00',
  325. src: '../../static/img/tc.png'
  326. },
  327. ],
  328. year: 2022,
  329. selector: [2020, 2021, 2022],
  330. showYear: false,
  331. iconName1: 'arrow-up-fill',
  332. iconName2: 'arrow-up-fill',
  333. iconName3: 'arrow-up-fill',
  334. iconName4: 'arrow-up-fill',
  335. iconName5: 'arrow-up-fill',
  336. iconName6: 'arrow-up-fill',
  337. styles: {},
  338. modeClass: 'fade',
  339. isSHowContent1: true,
  340. isSHowContent2: true,
  341. isSHowContent3: true,
  342. isSHowContent4: true,
  343. isSHowContent5: true,
  344. isSHowContent6: true,
  345. chartData: {},
  346. chartData1: {},
  347. chartData3: {},
  348. chartData4: {},
  349. chartData5: {},
  350. chartData6: {},
  351. chartData7: {},
  352. chartData8: {},
  353. chartData9: {},
  354. opts: {
  355. enableScroll: true,
  356. color: ["#E84A55", "#22C572"],
  357. padding: [15, 15, 0, 15],
  358. dataPointShapeType: "hollow",
  359. legend: {},
  360. xAxis: {
  361. disableGrid: true,
  362. itemCount: 6,
  363. },
  364. yAxis: {
  365. gridType: "solid",
  366. data: [{
  367. // disabled: true,
  368. axisLine: false
  369. }]
  370. },
  371. extra: {
  372. area: {
  373. type: "straight",
  374. opacity: 0.2,
  375. addLine: true,
  376. width: 2,
  377. gradient: false
  378. }
  379. }
  380. },
  381. opts2: {
  382. color: ["#D2F3E2", "#22C572"],
  383. padding: [15, 30, 0, 5],
  384. legend: {
  385. fontSize: 12,
  386. },
  387. xAxis: {
  388. boundaryGap: "justify",
  389. disableGrid: false,
  390. min: 0,
  391. axisLine: false,
  392. max: 40
  393. },
  394. yAxis: {},
  395. extra: {
  396. bar: {
  397. type: "group",
  398. width: 30,
  399. meterBorde: 1,
  400. meterFillColor: "#FFFFFF",
  401. activeBgColor: "#000000",
  402. activeBgOpacity: 0.08,
  403. // linearType: "custom",
  404. barBorderCircle: true,
  405. seriesGap: 2,
  406. categoryGap: 6
  407. }
  408. }
  409. },
  410. opts3: {
  411. color: ["#8D9EE9"],
  412. padding: [15, 15, 0, 5],
  413. legend: {
  414. show: false
  415. },
  416. xAxis: {
  417. disableGrid: true
  418. },
  419. yAxis: {
  420. data: [{
  421. min: 0
  422. }]
  423. },
  424. extra: {
  425. column: {
  426. type: "group",
  427. width: 15,
  428. activeBgColor: "#000000",
  429. activeBgOpacity: 0.08,
  430. linearType: "custom",
  431. seriesGap: 5,
  432. linearOpacity: 0.5,
  433. barBorderCircle: true,
  434. customColor: [
  435. "#8D9EE9",
  436. "#8D9EE9"
  437. ]
  438. }
  439. }
  440. },
  441. opts4: {
  442. enableScroll: true,
  443. color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4",
  444. "#ea7ccc"
  445. ],
  446. padding: [15, 30, 0, 5],
  447. legend: {
  448. show: false,
  449. },
  450. xAxis: {
  451. boundaryGap: "justify",
  452. disableGrid: false,
  453. axisLine: false,
  454. itemCount: 4,
  455. },
  456. yAxis: {},
  457. extra: {
  458. bar: {
  459. type: "group",
  460. width: 15,
  461. meterBorde: 1,
  462. meterFillColor: "#FFFFFF",
  463. activeBgColor: "#000000",
  464. activeBgOpacity: 0.08,
  465. // linearType: "custom",
  466. barBorderCircle: true,
  467. seriesGap: 2,
  468. categoryGap: 6
  469. }
  470. }
  471. },
  472. opts5: {
  473. enableScroll: true,
  474. color: ["#8D9EE9"],
  475. padding: [15, 15, 0, 5],
  476. legend: {
  477. show: false,
  478. },
  479. xAxis: {
  480. disableGrid: true,
  481. itemCount: 4,
  482. },
  483. yAxis: {
  484. data: [{
  485. min: 0
  486. }]
  487. },
  488. extra: {
  489. column: {
  490. type: "group",
  491. width: 15,
  492. activeBgColor: "#000000",
  493. activeBgOpacity: 0.08,
  494. // linearType: "custom",
  495. seriesGap: 5,
  496. // linearOpacity: 0.5,
  497. barBorderCircle: true,
  498. customColor: [
  499. "#8D9EE9",
  500. "#8D9EE9"
  501. ]
  502. }
  503. }
  504. },
  505. opts6: {
  506. rotate: false,
  507. rotateLock: false,
  508. color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4",
  509. "#ea7ccc"
  510. ],
  511. padding: [5, 5, 5, 5],
  512. dataLabel: true,
  513. legend: {
  514. show: true,
  515. position: "right",
  516. lineHeight: 25
  517. },
  518. title: {
  519. name: "",
  520. fontSize: 15,
  521. color: "#666666"
  522. },
  523. subtitle: {
  524. name: "",
  525. fontSize: 25,
  526. color: "#7cb5ec"
  527. },
  528. extra: {
  529. ring: {
  530. ringWidth: 20,
  531. activeOpacity: 0.5,
  532. activeRadius: 10,
  533. offsetAngle: 0,
  534. labelWidth: 15,
  535. border: false,
  536. borderWidth: 3,
  537. borderColor: "#FFFFFF"
  538. }
  539. }
  540. },
  541. opts7: {
  542. color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4",
  543. "#ea7ccc"
  544. ],
  545. padding: [5, 5, 5, 5],
  546. extra: {
  547. pie: {
  548. activeOpacity: 0.5,
  549. activeRadius: 10,
  550. offsetAngle: 0,
  551. labelWidth: 15,
  552. border: true,
  553. borderWidth: 3,
  554. borderColor: "#FFFFFF",
  555. linearType: "custom"
  556. }
  557. }
  558. },
  559. opts8: {
  560. color: ["#EC6666"],
  561. padding: [15, 15, 0, 15],
  562. legend: {
  563. show: false,
  564. },
  565. xAxis: {
  566. disableGrid: true
  567. },
  568. yAxis: {
  569. gridType: "dash",
  570. dashLength: 2
  571. },
  572. extra: {
  573. area: {
  574. type: "curve",
  575. opacity: 0.2,
  576. addLine: true,
  577. width: 2,
  578. gradient: true
  579. }
  580. }
  581. },
  582. opts9: {
  583. color: ["#22C572"],
  584. padding: [15, 15, 0, 15],
  585. legend: {
  586. show: false,
  587. },
  588. xAxis: {
  589. disableGrid: true
  590. },
  591. yAxis: {
  592. gridType: "dash",
  593. dashLength: 2
  594. },
  595. extra: {
  596. area: {
  597. type: "curve",
  598. opacity: 0.2,
  599. addLine: true,
  600. width: 2,
  601. gradient: true
  602. }
  603. }
  604. },
  605. textIndex: 1,
  606. index: 1,
  607. background: {
  608. backgroundColor: '#2E303A',
  609. backgroundColor: 'red',
  610. },
  611. nowYear: ''
  612. }
  613. },
  614. onLoad: function(option) {
  615. this.nowYear = new Date().getFullYear()
  616. },
  617. destroyed() {
  618. },
  619. onUnload() {
  620. },
  621. onReady() {
  622. this.getServerData();
  623. },
  624. methods: {
  625. goToPage(index) {
  626. uni.navigateTo({
  627. url: '/pages/user/contractLook/inventoryCost?searchMonth=' + this.seachMoth
  628. })
  629. },
  630. clickNav(index) {
  631. this.carIndex = index
  632. let _data = ""
  633. if (index == 0) {
  634. _data = 1
  635. } else if (index == 1) {
  636. _data = 7
  637. } else {
  638. _data = 30
  639. }
  640. this.$api.doRequest('get', '/biInfoController/getTranCountWai', {
  641. seachMoth: _data,
  642. }).then(res => {
  643. console.log(res.data)
  644. this.selectMakeDate7(res.data.data[0])
  645. })
  646. },
  647. yearClick(type) {
  648. if (type == 1) {
  649. this.year--
  650. } else {
  651. this.year++
  652. }
  653. this.$api.doRequest('get', '/biInfoController/profitAccount', {
  654. compId: uni.getStorageSync('pcUserInfo').compId,
  655. seachYear: this.year,
  656. // biViewInfoList: {weight:''}
  657. }).then(res => {
  658. console.log("例如切换", res)
  659. this.makeDate3(res.data[0])
  660. })
  661. },
  662. godetail(status) {
  663. var url = ''
  664. switch (status) {
  665. case 0:
  666. url = '/pages/dataReport/contractdetails/contractdetails'
  667. break;
  668. case 1:
  669. url = '/pages/dataReport/breakdownofprofit'
  670. break;
  671. case 2:
  672. url = '/pages/dataReport/costbreakdown?data=' + this.ym1 + '&type=' + this.index
  673. break;
  674. case 3:
  675. url = '/pages/dataReport/Inventoryentrydetails'
  676. break;
  677. }
  678. uni.navigateTo({
  679. url: url
  680. })
  681. },
  682. foldClcik(type, index) {
  683. switch (index) {
  684. case 1:
  685. this.isSHowContent1 = !this.isSHowContent1
  686. this.iconName1 = this.isSHowContent1 ? "arrow-up-fill" : 'arrow-down-fill'
  687. break;
  688. case 2:
  689. this.isSHowContent2 = !this.isSHowContent2
  690. this.iconName2 = this.isSHowContent2 ? "arrow-up-fill" : 'arrow-down-fill'
  691. break;
  692. case 3:
  693. this.isSHowContent3 = !this.isSHowContent3
  694. this.iconName3 = this.isSHowContent3 ? "arrow-up-fill" : 'arrow-down-fill'
  695. break;
  696. case 4:
  697. this.isSHowContent4 = !this.isSHowContent4
  698. this.iconName4 = this.isSHowContent4 ? "arrow-up-fill" : 'arrow-down-fill'
  699. break;
  700. case 5:
  701. this.isSHowContent5 = !this.isSHowContent5
  702. this.iconName5 = this.isSHowContent5 ? "arrow-up-fill" : 'arrow-down-fill'
  703. break;
  704. case 6:
  705. this.isSHowContent6 = !this.isSHowContent6
  706. this.iconName6 = this.isSHowContent6 ? "arrow-up-fill" : 'arrow-down-fill'
  707. break;
  708. }
  709. this.modeClass = type
  710. },
  711. getIndex(e) {
  712. console.log(e)
  713. // 点击图表
  714. if (this.textIndex == 1) {
  715. this.ym1 = this.chartList[0].biViewInfoList[e.currentIndex.index].name
  716. this.sr = this.chartList[0].biViewInfoList[e.currentIndex.index].weight
  717. this.zc = this.chartList[2].biViewInfoList[e.currentIndex.index].weight
  718. } else {
  719. this.ym1 = this.chartList[1].biViewInfoList[e.currentIndex.index].name
  720. this.sr = this.chartList[1].biViewInfoList[e.currentIndex.index].weight
  721. this.zc = this.chartList[3].biViewInfoList[e.currentIndex.index].weight
  722. }
  723. },
  724. makeDate1(val) {
  725. console.log("val", val)
  726. // 按月1
  727. let _categories = []
  728. let _price1 = []
  729. let _price2 = []
  730. if (this.textIndex == 1) {
  731. if(val[0].biViewInfoList&&val[0].biViewInfoList.length>0){
  732. this.ym1 = val[0].biViewInfoList[val[0].biViewInfoList.length - 1].name
  733. this.sr = val[0].biViewInfoList[val[0].biViewInfoList.length - 1].weight
  734. this.zc = val[2].biViewInfoList[val[2].biViewInfoList.length - 1].weight
  735. for (let i = 0; i < val[0].biViewInfoList.length; i++) {
  736. _categories.push(val[0].biViewInfoList[i].name)
  737. _price1.push(val[0].biViewInfoList[i].weight)
  738. }
  739. for (let i = 0; i < val[2].biViewInfoList.length; i++) {
  740. _price2.push(val[2].biViewInfoList[i].weight)
  741. }
  742. }
  743. } else {
  744. if(val[1].biViewInfoList&&val[1].biViewInfoList.length>0){
  745. this.ym1 = val[1].biViewInfoList[val[1].biViewInfoList.length - 1].name
  746. this.sr = val[1].biViewInfoList[val[1].biViewInfoList.length - 1].weight
  747. this.zc = val[3].biViewInfoList[val[3].biViewInfoList.length - 1].weight
  748. for (let i = 0; i < val[1].biViewInfoList.length; i++) {
  749. _categories.push(val[1].biViewInfoList[i].name)
  750. _price1.push(val[1].biViewInfoList[i].weight)
  751. }
  752. for (let i = 0; i < val[3].biViewInfoList.length; i++) {
  753. _price2.push(val[3].biViewInfoList[i].weight)
  754. }
  755. }
  756. }
  757. let res = {
  758. categories: _categories,
  759. series: [{
  760. name: "收入",
  761. data: _price1
  762. }, {
  763. name: "支出",
  764. data: _price2
  765. }
  766. ]
  767. };
  768. this.chartData = JSON.parse(JSON.stringify(res));
  769. },
  770. makeDate2(val) {
  771. let _categories = []
  772. let _count1 = []
  773. let _count2 = []
  774. if(val[4].biViewInfoList&&val[4].biViewInfoList.length>0){
  775. for (let i = 0; i < val[4].biViewInfoList.length; i++) {
  776. _categories.push(val[4].biViewInfoList[i].name)
  777. _count1.push(val[4].biViewInfoList[i].weight)
  778. _count2.push(val[4].biViewInfoList[i].count ? val[4].biViewInfoList[i].count : 0)
  779. }
  780. }
  781. // for (let i = 0; i < val[5].biViewInfoList.length; i++) {
  782. // _count2.push(val[5].biViewInfoList[i].weight)
  783. // }
  784. let res1 = {
  785. categories: _categories,
  786. series: [{
  787. name: this.index == 1 ? '过去12个月累计签订数量' : '本季累计签订合同数量',
  788. data: _count1,
  789. legendShape: "circle",
  790. },
  791. {
  792. name: this.index == 1 ? '当前执行中数量' : '本季执行中数量',
  793. data: _count2,
  794. legendShape: "circle"
  795. }
  796. ]
  797. };
  798. this.chartData1 = JSON.parse(JSON.stringify(res1));
  799. },
  800. makeDate3(val) {
  801. let _categorieslr = []
  802. let _countlr = []
  803. if(val[5].biViewInfoList&&val[5].biViewInfoList.length>0){
  804. for (let i = 0; i < val[5].biViewInfoList.length; i++) {
  805. _categorieslr.push(val[5].biViewInfoList[i].name)
  806. _countlr.push(val[5].biViewInfoList[i].weight ? val[5].biViewInfoList[i].weight : 0)
  807. }
  808. }
  809. //利润核算
  810. let res3 = {
  811. categories: _categorieslr,
  812. series: [{
  813. name: "利润金额",
  814. data: _countlr
  815. }]
  816. };
  817. this.chartData3 = JSON.parse(JSON.stringify(res3));
  818. },
  819. makeDate4(val) {
  820. let _categorieslr = []
  821. let _countlr = []
  822. if(val[8].biViewInfoList&&val[8].biViewInfoList.length>0){
  823. for (let i = 0; i < val[8].biViewInfoList.length; i++) {
  824. _categorieslr.push(val[8].biViewInfoList[i].name)
  825. _countlr.push(Number(val[8].biViewInfoList[i].weight).toFixed(0) ? Number(val[8].biViewInfoList[i]
  826. .weight).toFixed(0) : 0)
  827. }
  828. }
  829. let res4 = {
  830. categories: _categorieslr,
  831. series: [{
  832. name: '库存储量',
  833. data: _countlr
  834. }]
  835. };
  836. this.chartData4 = JSON.parse(JSON.stringify(res4));
  837. let _tc = Number(val[6].biViewInfoList[0].count) + Number(val[6].biViewInfoList[1].count) - Number(
  838. val[6].biViewInfoList[2].count)
  839. this.InventoryList = [{
  840. name: '合计储量',
  841. number: Number(val[6].biViewInfoList[0].count).toFixed(3),
  842. src: '../../static/img/cl.png'
  843. }, {
  844. name: '采购待执行',
  845. number: Number(val[6].biViewInfoList[1].count).toFixed(3),
  846. src: '../../static/img/cg.png'
  847. },
  848. {
  849. name: '销待执行售',
  850. number: Number(val[6].biViewInfoList[2].count).toFixed(3),
  851. src: '../../static/img/xs.png'
  852. },
  853. {
  854. name: '头寸',
  855. number: Number(_tc).toFixed(3),
  856. src: '../../static/img/tc.png'
  857. },
  858. ]
  859. },
  860. makeDate5(val) {
  861. let _categorieslr = []
  862. let _count = []
  863. if(val[7].biViewInfoList&&val[7].biViewInfoList.length>0){
  864. for (let i = 0; i < val[7].biViewInfoList.length; i++) {
  865. _categorieslr.push(val[7].biViewInfoList[i].name)
  866. _count.push(val[7].biViewInfoList[i].count ? val[7].biViewInfoList[i].count : 0)
  867. }
  868. }
  869. let res5 = {
  870. categories: _categorieslr,
  871. series: [{
  872. name: "利润金额",
  873. data: _count
  874. }]
  875. };
  876. this.chartData5 = JSON.parse(JSON.stringify(res5));
  877. this.averageCostList = val[9].biViewInfoList
  878. },
  879. makeDate6(val) {
  880. let _data = []
  881. if (val[10].biViewInfoList&&val[10].biViewInfoList.length>0) {
  882. for (let i = 0; i < val[10].biViewInfoList.length; i++) {
  883. let _obj = {
  884. name: val[10].biViewInfoList[i].name,
  885. value: val[10].biViewInfoList[i].weight
  886. }
  887. _data.push(_obj)
  888. }
  889. let res6 = {
  890. series: [{
  891. data: _data
  892. }]
  893. };
  894. this.chartData6 = JSON.parse(JSON.stringify(res6));
  895. }
  896. },
  897. selectMakeDate7(val) {
  898. console.log(11)
  899. console.log(val)
  900. let _data = []
  901. for (let i = 0; i < val.biViewInfoList.length; i++) {
  902. let _obj = {
  903. name: val.biViewInfoList[i].name,
  904. value: Number(val.biViewInfoList[i].count)
  905. }
  906. _data.push(_obj)
  907. }
  908. console.log(_data)
  909. let res7 = {
  910. series: [{
  911. data: _data
  912. }]
  913. };
  914. this.$forceUpdate()
  915. this.chartData7 = JSON.parse(JSON.stringify(res7));
  916. },
  917. makeDate7(val) {
  918. let _data = []
  919. if(val[11].biViewInfoList&&val[11].biViewInfoList.length){
  920. for (let i = 0; i < val[11].biViewInfoList.length; i++) {
  921. let _obj = {
  922. name: val[11].biViewInfoList[i].name,
  923. value: Number(val[11].biViewInfoList[i].count)
  924. }
  925. _data.push(_obj)
  926. }
  927. }
  928. console.log(_data)
  929. let res7 = {
  930. series: [{
  931. data: _data
  932. }]
  933. };
  934. this.chartData7 = JSON.parse(JSON.stringify(res7));
  935. },
  936. makeDate8(val) {
  937. let _categories = []
  938. let _data = []
  939. let _categories1 = []
  940. let _data1 = []
  941. this.appTotal = val[12].count
  942. this.lmTotal = val[13].count
  943. if(val[12].biViewInfoList&&val[12].biViewInfoList.length){
  944. for (let i = 0; i < val[12].biViewInfoList.length; i++) {
  945. _categories.push(val[12].biViewInfoList[i].name)
  946. _data.push(val[12].biViewInfoList[i].weight)
  947. }
  948. }
  949. if(val[13].biViewInfoList&&val[13].biViewInfoList.length>0){
  950. for (let i = 0; i < val[13].biViewInfoList.length; i++) {
  951. _categories1.push(val[13].biViewInfoList[i].name)
  952. _data1.push(val[12].biViewInfoList[i].weight)
  953. }
  954. }
  955. let res8 = {
  956. categories: _categories,
  957. series: [{
  958. name: "成交量A",
  959. data: _data
  960. }]
  961. }
  962. let res9 = {
  963. categories: _categories1,
  964. series: [{
  965. name: "成交量A",
  966. data: _data1
  967. }]
  968. }
  969. this.chartData8 = JSON.parse(JSON.stringify(res8))
  970. this.chartData9 = JSON.parse(JSON.stringify(res9))
  971. },
  972. getServerData() {
  973. uni.showLoading({
  974. title: "加载中",
  975. mask: true
  976. })
  977. this.$api.doRequest('get', '/biInfoController/selectPhoneBiInfo?compId=' + uni.getStorageSync(
  978. 'pcUserInfo')
  979. .compId + '&seachMoth=' + this.seachMoth + '&seachYear=' + this.seachYear).then(
  980. res => {
  981. console.log("数据报表", res)
  982. this.chartList = res.data.data
  983. // 收支核算数据处理
  984. this.makeDate1(res.data.data)
  985. //合同数据
  986. this.makeDate2(res.data.data)
  987. //利润核算
  988. this.makeDate3(res.data.data)
  989. //库存储量
  990. this.makeDate4(res.data.data)
  991. //档期货值
  992. this.makeDate5(res.data.data)
  993. //今日入库
  994. this.makeDate6(res.data.data)
  995. //在途数据
  996. this.makeDate7(res.data.data)
  997. //APP注册
  998. this.makeDate8(res.data.data)
  999. // uni.hideLoading()
  1000. })
  1001. //模拟从服务器获取数据时的延时
  1002. setTimeout(() => {
  1003. //模拟服务器返回数据,如果数据格式和标准格式不同,需自行按下面的格式拼接
  1004. // let res = {
  1005. // categories: ["2016", "2017", "2018", "2019", "2020", "2021", "2022", "2023"],
  1006. // series: [{
  1007. // name: "收入",
  1008. // data: [70, 40, 65, 100, 44, 68, 90, 240]
  1009. // }, {
  1010. // name: "支出",
  1011. // data: [35, 8, 25, 37, 4, 20, 56, 30]
  1012. // }
  1013. // ]
  1014. // };
  1015. // this.chartData = JSON.parse(JSON.stringify(res));
  1016. // let res1 = {
  1017. // categories: ["2016", "2017", "2018", "2019", "2020", "2021"],
  1018. // series: [{
  1019. // name: this.index == 1 ? '过去12个月累计签订数量' : '本季累计签订合同数量',
  1020. // data: [35, 36, 31, 33, 13, 34],
  1021. // legendShape: "circle",
  1022. // },
  1023. // {
  1024. // name: this.index == 1 ? '当前执行中数量' : '本季执行中数量',
  1025. // data: [18, 27, 21, 24, 6, 28],
  1026. // legendShape: "circle"
  1027. // }
  1028. // ]
  1029. // };
  1030. // this.chartData1 = JSON.parse(JSON.stringify(res1));
  1031. // let res3 = {
  1032. // categories: ["销售", "采购", "收购", "代收", "代储"],
  1033. // series: [{
  1034. // name: "利润金额",
  1035. // data: [35, 36, 31, 33, 13]
  1036. // }]
  1037. // };
  1038. // this.chartData3 = JSON.parse(JSON.stringify(res3));
  1039. // let res4 = {
  1040. // categories: ["小麦", "高粱(潮粮)", "高粱", "玉米(潮粮)", "玉米"],
  1041. // series: [{
  1042. // name: '库存储量',
  1043. // data: [{
  1044. // value: 35,
  1045. // color: "#FFBB6E"
  1046. // },
  1047. // {
  1048. // value: 36,
  1049. // color: "#8D9EE9"
  1050. // }, {
  1051. // value: 31,
  1052. // color: "#FF8B95"
  1053. // }, {
  1054. // value: 33,
  1055. // color: "#38CA80"
  1056. // },
  1057. // {
  1058. // value: 13,
  1059. // color: "#FFDD85"
  1060. // }
  1061. // ]
  1062. // }]
  1063. // };
  1064. // this.chartData4 = JSON.parse(JSON.stringify(res4));
  1065. // let res5 = {
  1066. // categories: ["小麦", "高粱(潮粮)", "高粱", "玉米(潮粮)", "玉米"],
  1067. // series: [{
  1068. // name: "利润金额",
  1069. // data: [{
  1070. // value: 35,
  1071. // color: "#FFBB6E"
  1072. // },
  1073. // {
  1074. // value: 36,
  1075. // color: "#8D9EE9"
  1076. // }, {
  1077. // value: 31,
  1078. // color: "#FF8B95"
  1079. // }, {
  1080. // value: 33,
  1081. // color: "#38CA80"
  1082. // },
  1083. // {
  1084. // value: 13,
  1085. // color: "#FFDD85"
  1086. // }
  1087. // ]
  1088. // }]
  1089. // };
  1090. // this.chartData5 = JSON.parse(JSON.stringify(res5));
  1091. // let res6 = {
  1092. // series: [{
  1093. // data: [{
  1094. // "name": "一班",
  1095. // "value": 50
  1096. // }, {
  1097. // "name": "二班",
  1098. // "value": 30
  1099. // }, {
  1100. // "name": "三班",
  1101. // "value": 20
  1102. // }, {
  1103. // "name": "四班",
  1104. // "value": 18
  1105. // }, {
  1106. // "name": "五班",
  1107. // "value": 8
  1108. // }]
  1109. // }]
  1110. // };
  1111. // this.chartData6 = JSON.parse(JSON.stringify(res6));
  1112. // let res7 = {
  1113. // series: [{
  1114. // data: [{
  1115. // "name": "一班",
  1116. // "value": 50
  1117. // }, {
  1118. // "name": "二班",
  1119. // "value": 30
  1120. // }, {
  1121. // "name": "三班",
  1122. // "value": 20
  1123. // }, {
  1124. // "name": "四班",
  1125. // "value": 18
  1126. // }, {
  1127. // "name": "五班",
  1128. // "value": 8
  1129. // }]
  1130. // }]
  1131. // };
  1132. // this.chartData7 = JSON.parse(JSON.stringify(res7));
  1133. // let res8 = {
  1134. // categories: ["2016", "2017", "2018", "2019", "2020", "2021"],
  1135. // series: [{
  1136. // name: "成交量A",
  1137. // data: [35, 8, 25, 37, 4, 20]
  1138. // }
  1139. // ]
  1140. // };
  1141. // this.chartData8 = JSON.parse(JSON.stringify(res8));
  1142. // let res9 = {
  1143. // categories: ["2016", "2017", "2018", "2019", "2020", "2021"],
  1144. // series: [{
  1145. // name: "成交量A",
  1146. // data: [35, 8, 25, 37, 4, 20]
  1147. // },
  1148. // {
  1149. // name: "成交量B",
  1150. // data: [70, 40, 65, 100, 44, 68]
  1151. // },
  1152. // {
  1153. // name: "成交量C",
  1154. // data: [100, 80, 95, 150, 112, 132]
  1155. // }
  1156. // ]
  1157. // };
  1158. // this.chartData9 = JSON.parse(JSON.stringify(res9));
  1159. },
  1160. 500);
  1161. },
  1162. back() {
  1163. uni.navigateBack()
  1164. },
  1165. navClick(val) {
  1166. this.index = val
  1167. if (val == 1) {
  1168. this.seachMoth = ''
  1169. } else {
  1170. this.seachMoth = '2022-10-10'
  1171. }
  1172. this.getServerData();
  1173. },
  1174. accounting(val) {
  1175. this.textIndex = val
  1176. if (val == 1) {
  1177. console.log("按月")
  1178. } else {
  1179. console.log("按年")
  1180. }
  1181. this.makeDate1(this.chartList)
  1182. }
  1183. }
  1184. }
  1185. </script>
  1186. <style scoped lang="scss">
  1187. .flex {
  1188. display: flex;
  1189. }
  1190. .alc {
  1191. align-items: center;
  1192. }
  1193. .jcse {
  1194. justify-content: space-evenly;
  1195. }
  1196. .jcsb {
  1197. justify-content: space-between;
  1198. }
  1199. .mtb40 {
  1200. margin: 40rpx 0;
  1201. }
  1202. .title-lv2 {
  1203. font-weight: bold;
  1204. color: #333333;
  1205. }
  1206. .status_bar {
  1207. height: var(--status-bar-height);
  1208. width: 100%;
  1209. }
  1210. .top-nav {
  1211. display: flex;
  1212. align-items: center;
  1213. justify-content: space-evenly;
  1214. position: relative;
  1215. }
  1216. .back {
  1217. position: absolute;
  1218. left: 20rpx;
  1219. top: 0;
  1220. bottom: 0;
  1221. margin: auto;
  1222. }
  1223. .top-nav {
  1224. font-size: 36rpx;
  1225. background: white;
  1226. padding: 20rpx;
  1227. }
  1228. .nav-active {
  1229. font-weight: 700;
  1230. position: relative;
  1231. }
  1232. .nav-active:after {
  1233. content: "";
  1234. position: absolute;
  1235. bottom: -20rpx;
  1236. left: 0;
  1237. right: 0;
  1238. margin: auto;
  1239. height: 10rpx;
  1240. width: 60%;
  1241. background: #262626;
  1242. border-radius: 40rpx;
  1243. }
  1244. .content-item {
  1245. background: white;
  1246. margin: 20rpx 20rpx 0 20rpx;
  1247. border-radius: 20rpx;
  1248. padding: 20rpx;
  1249. box-sizing: border-box;
  1250. }
  1251. .title {
  1252. margin-bottom: 22rpx;
  1253. font-size: 32rpx;
  1254. font-weight: 700;
  1255. color: #343434;
  1256. }
  1257. .right-btn {
  1258. width: 120rpx;
  1259. height: 42rpx;
  1260. display: flex;
  1261. align-items: center;
  1262. justify-content: center;
  1263. background: #F1F1F1;
  1264. border-radius: 30px;
  1265. font-size: 22rpx;
  1266. color: #707575;
  1267. }
  1268. .content1 {
  1269. .content1-wrap {}
  1270. .row1 {
  1271. display: flex;
  1272. justify-content: space-between;
  1273. align-items: center;
  1274. .left {
  1275. color: #868686;
  1276. }
  1277. .text {
  1278. margin-left: 38rpx;
  1279. color: #2E303A;
  1280. }
  1281. .text-active {
  1282. // margin-left: 38rpx;
  1283. color: #FFF;
  1284. background: #2E303A;
  1285. padding: 11rpx 26rpx;
  1286. border-radius: 10rpx;
  1287. }
  1288. }
  1289. .row2 {
  1290. display: flex;
  1291. flex-direction: column;
  1292. align-items: center;
  1293. .text {
  1294. color: #636363;
  1295. margin-bottom: 10rpx
  1296. }
  1297. .price {
  1298. font-size: 56rpx;
  1299. font-weight: 700;
  1300. color: #D79C58;
  1301. }
  1302. }
  1303. .row3 {
  1304. display: flex;
  1305. justify-content: space-between;
  1306. margin-top: 27rpx;
  1307. align-items: center;
  1308. .center {
  1309. width: 2px;
  1310. height: 61rpx;
  1311. border: 2rpx solid #EEEEEE;
  1312. }
  1313. .left,
  1314. .right {
  1315. // background: green;
  1316. width: calc(50% - 1px);
  1317. text-align: center;
  1318. .text {
  1319. color: #636363
  1320. }
  1321. .number {
  1322. margin-top: 12rpx;
  1323. font-size: 34rpx;
  1324. font-weight: 700;
  1325. color: #343434;
  1326. }
  1327. }
  1328. }
  1329. .row4 {
  1330. margin-top: 20rpx;
  1331. }
  1332. }
  1333. .content2 {
  1334. .row1 {}
  1335. .row2 {
  1336. color: #707575;
  1337. font-size: 22rpx;
  1338. .color1 {
  1339. width: 16rpx;
  1340. height: 12rpx;
  1341. background: #D2F3E2;
  1342. border-radius: 7rpx;
  1343. margin-right: 10rpx;
  1344. }
  1345. .color2 {
  1346. width: 16rpx;
  1347. height: 12rpx;
  1348. background: #2CC778;
  1349. border-radius: 7rpx;
  1350. margin-right: 10rpx;
  1351. }
  1352. }
  1353. .row5 {
  1354. display: flex;
  1355. justify-content: space-between;
  1356. color: #9E9E9E;
  1357. .left {}
  1358. }
  1359. }
  1360. .content3 {
  1361. .right {
  1362. color: #9E9E9E;
  1363. }
  1364. .row3 {
  1365. padding: 10rpx 25rpx 30rpx 25rpx;
  1366. border-radius: 15rpx;
  1367. margin-top: 20rpx;
  1368. background: #FAFAFA;
  1369. .list-item {
  1370. margin-top: 20rpx;
  1371. .number {
  1372. font-weight: 700;
  1373. }
  1374. }
  1375. }
  1376. .row7 {
  1377. .list-item {
  1378. display: inline-block;
  1379. padding: 20rpx;
  1380. box-sizing: border-box;
  1381. background: #FAFAFA;
  1382. width: calc(50% - 40rpx);
  1383. margin: 20rpx;
  1384. border-radius: 8rpx;
  1385. }
  1386. }
  1387. }
  1388. .content5 {
  1389. .days-nav {
  1390. display: flex;
  1391. justify-content: space-evenly;
  1392. }
  1393. }
  1394. .content6 {
  1395. .row1 {
  1396. margin: 20rpx 0;
  1397. }
  1398. }
  1399. .days-nav {
  1400. background: red;
  1401. margin: 20rpx;
  1402. background: #F5F6FA;
  1403. border-radius: 8rpx;
  1404. padding: 4rpx 0;
  1405. .item {
  1406. width: 33%;
  1407. display: flex;
  1408. justify-content: center;
  1409. padding: 6px 0;
  1410. }
  1411. .item-active {
  1412. background: #fff;
  1413. }
  1414. }
  1415. </style>