newReport.vue 34 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150115111521153115411551156115711581159116011611162116311641165116611671168116911701171117211731174117511761177117811791180118111821183118411851186118711881189119011911192119311941195119611971198119912001201120212031204120512061207120812091210121112121213121412151216121712181219122012211222122312241225122612271228122912301231123212331234123512361237123812391240124112421243124412451246124712481249125012511252125312541255125612571258125912601261126212631264126512661267126812691270127112721273127412751276127712781279128012811282128312841285128612871288128912901291129212931294129512961297129812991300130113021303130413051306130713081309131013111312131313141315131613171318131913201321132213231324132513261327132813291330133113321333133413351336133713381339134013411342134313441345134613471348134913501351135213531354135513561357135813591360136113621363136413651366136713681369137013711372137313741375137613771378137913801381138213831384138513861387138813891390139113921393139413951396139713981399140014011402140314041405140614071408140914101411141214131414141514161417141814191420142114221423142414251426142714281429143014311432143314341435143614371438143914401441144214431444144514461447144814491450145114521453145414551456145714581459146014611462146314641465146614671468146914701471147214731474147514761477147814791480148114821483148414851486
  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" />
  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" />
  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. xAxis: {
  415. disableGrid: true
  416. },
  417. yAxis: {
  418. data: [{
  419. min: 0
  420. }]
  421. },
  422. extra: {
  423. column: {
  424. type: "group",
  425. width: 15,
  426. activeBgColor: "#000000",
  427. activeBgOpacity: 0.08,
  428. linearType: "custom",
  429. seriesGap: 5,
  430. linearOpacity: 0.5,
  431. barBorderCircle: true,
  432. customColor: [
  433. "#8D9EE9",
  434. "#8D9EE9"
  435. ]
  436. }
  437. }
  438. },
  439. opts4: {
  440. color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4",
  441. "#ea7ccc"
  442. ],
  443. padding: [15, 30, 0, 5],
  444. legend: {
  445. show: false,
  446. },
  447. xAxis: {
  448. boundaryGap: "justify",
  449. disableGrid: false,
  450. min: 0,
  451. axisLine: false,
  452. max: 40
  453. },
  454. yAxis: {},
  455. extra: {
  456. bar: {
  457. type: "group",
  458. width: 15,
  459. meterBorde: 1,
  460. meterFillColor: "#FFFFFF",
  461. activeBgColor: "#000000",
  462. activeBgOpacity: 0.08,
  463. // linearType: "custom",
  464. barBorderCircle: true,
  465. seriesGap: 2,
  466. categoryGap: 6
  467. }
  468. }
  469. },
  470. opts5: {
  471. color: ["#8D9EE9"],
  472. padding: [15, 15, 0, 5],
  473. legend: {
  474. show: false,
  475. },
  476. xAxis: {
  477. disableGrid: true
  478. },
  479. yAxis: {
  480. data: [{
  481. min: 0
  482. }]
  483. },
  484. extra: {
  485. column: {
  486. type: "group",
  487. width: 15,
  488. activeBgColor: "#000000",
  489. activeBgOpacity: 0.08,
  490. // linearType: "custom",
  491. seriesGap: 5,
  492. // linearOpacity: 0.5,
  493. barBorderCircle: true,
  494. customColor: [
  495. "#8D9EE9",
  496. "#8D9EE9"
  497. ]
  498. }
  499. }
  500. },
  501. opts6: {
  502. rotate: false,
  503. rotateLock: false,
  504. color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4",
  505. "#ea7ccc"
  506. ],
  507. padding: [5, 5, 5, 5],
  508. dataLabel: true,
  509. legend: {
  510. show: true,
  511. position: "right",
  512. lineHeight: 25
  513. },
  514. title: {
  515. name: "",
  516. fontSize: 15,
  517. color: "#666666"
  518. },
  519. subtitle: {
  520. name: "",
  521. fontSize: 25,
  522. color: "#7cb5ec"
  523. },
  524. extra: {
  525. ring: {
  526. ringWidth: 20,
  527. activeOpacity: 0.5,
  528. activeRadius: 10,
  529. offsetAngle: 0,
  530. labelWidth: 15,
  531. border: false,
  532. borderWidth: 3,
  533. borderColor: "#FFFFFF"
  534. }
  535. }
  536. },
  537. opts7: {
  538. color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4",
  539. "#ea7ccc"
  540. ],
  541. padding: [5, 5, 5, 5],
  542. extra: {
  543. pie: {
  544. activeOpacity: 0.5,
  545. activeRadius: 10,
  546. offsetAngle: 0,
  547. labelWidth: 15,
  548. border: true,
  549. borderWidth: 3,
  550. borderColor: "#FFFFFF",
  551. linearType: "custom"
  552. }
  553. }
  554. },
  555. opts8: {
  556. color: ["#EC6666"],
  557. padding: [15, 15, 0, 15],
  558. legend: {
  559. show: false,
  560. },
  561. xAxis: {
  562. disableGrid: true
  563. },
  564. yAxis: {
  565. gridType: "dash",
  566. dashLength: 2
  567. },
  568. extra: {
  569. area: {
  570. type: "curve",
  571. opacity: 0.2,
  572. addLine: true,
  573. width: 2,
  574. gradient: true
  575. }
  576. }
  577. },
  578. opts9: {
  579. color: ["#22C572"],
  580. padding: [15, 15, 0, 15],
  581. legend: {
  582. show: false,
  583. },
  584. xAxis: {
  585. disableGrid: true
  586. },
  587. yAxis: {
  588. gridType: "dash",
  589. dashLength: 2
  590. },
  591. extra: {
  592. area: {
  593. type: "curve",
  594. opacity: 0.2,
  595. addLine: true,
  596. width: 2,
  597. gradient: true
  598. }
  599. }
  600. },
  601. textIndex: 1,
  602. index: 1,
  603. background: {
  604. backgroundColor: '#2E303A',
  605. backgroundColor: 'red',
  606. },
  607. nowYear: ''
  608. }
  609. },
  610. onLoad: function(option) {
  611. this.nowYear = new Date().getFullYear()
  612. },
  613. destroyed() {
  614. },
  615. onUnload() {
  616. },
  617. onReady() {
  618. this.getServerData();
  619. },
  620. methods: {
  621. goToPage(index) {
  622. uni.navigateTo({
  623. url: '/pages/user/contractLook/inventoryCost?searchMonth=' + this.seachMoth
  624. })
  625. },
  626. clickNav(index) {
  627. this.carIndex = index
  628. let _data = ""
  629. if (index == 0) {
  630. _data = 1
  631. } else if (index == 1) {
  632. _data = 7
  633. } else {
  634. _data = 30
  635. }
  636. this.$api.doRequest('get', '/biInfoController/getTranCountWai', {
  637. seachMoth: _data,
  638. }).then(res => {
  639. console.log(res.data)
  640. this.selectMakeDate7(res.data.data[0])
  641. })
  642. },
  643. yearClick(type) {
  644. if (type == 1) {
  645. this.year--
  646. } else {
  647. this.year++
  648. }
  649. this.$api.doRequest('get', '/biInfoController/profitAccount', {
  650. compId: uni.getStorageSync('pcUserInfo').compId,
  651. seachYear: this.year,
  652. // biViewInfoList: {weight:''}
  653. }).then(res => {
  654. console.log("例如切换", res)
  655. this.makeDate3(res.data[0])
  656. })
  657. },
  658. godetail(status) {
  659. var url = ''
  660. switch (status) {
  661. case 0:
  662. url = '/pages/dataReport/contractdetails/contractdetails'
  663. break;
  664. case 1:
  665. url = '/pages/dataReport/breakdownofprofit'
  666. break;
  667. case 2:
  668. url = '/pages/dataReport/costbreakdown'
  669. break;
  670. case 3:
  671. url = '/pages/dataReport/Inventoryentrydetails'
  672. break;
  673. }
  674. uni.navigateTo({
  675. url: url
  676. })
  677. },
  678. foldClcik(type, index) {
  679. switch (index) {
  680. case 1:
  681. this.isSHowContent1 = !this.isSHowContent1
  682. this.iconName1 = this.isSHowContent1 ? "arrow-up-fill" : 'arrow-down-fill'
  683. break;
  684. case 2:
  685. this.isSHowContent2 = !this.isSHowContent2
  686. this.iconName2 = this.isSHowContent2 ? "arrow-up-fill" : 'arrow-down-fill'
  687. break;
  688. case 3:
  689. this.isSHowContent3 = !this.isSHowContent3
  690. this.iconName3 = this.isSHowContent3 ? "arrow-up-fill" : 'arrow-down-fill'
  691. break;
  692. case 4:
  693. this.isSHowContent4 = !this.isSHowContent4
  694. this.iconName4 = this.isSHowContent4 ? "arrow-up-fill" : 'arrow-down-fill'
  695. break;
  696. case 5:
  697. this.isSHowContent5 = !this.isSHowContent5
  698. this.iconName5 = this.isSHowContent5 ? "arrow-up-fill" : 'arrow-down-fill'
  699. break;
  700. case 6:
  701. this.isSHowContent6 = !this.isSHowContent6
  702. this.iconName6 = this.isSHowContent6 ? "arrow-up-fill" : 'arrow-down-fill'
  703. break;
  704. }
  705. this.modeClass = type
  706. },
  707. getIndex(e) {
  708. console.log(e)
  709. // 点击图表
  710. if (this.textIndex == 1) {
  711. this.ym1 = this.chartList[0].biViewInfoList[e.currentIndex.index].name
  712. this.sr = this.chartList[0].biViewInfoList[e.currentIndex.index].weight
  713. this.zc = this.chartList[2].biViewInfoList[e.currentIndex.index].weight
  714. } else {
  715. this.ym1 = this.chartList[1].biViewInfoList[e.currentIndex.index].name
  716. this.sr = this.chartList[1].biViewInfoList[e.currentIndex.index].weight
  717. this.zc = this.chartList[3].biViewInfoList[e.currentIndex.index].weight
  718. }
  719. },
  720. makeDate1(val) {
  721. console.log("val", val)
  722. // 按月1
  723. let _categories = []
  724. let _price1 = []
  725. let _price2 = []
  726. if (this.textIndex == 1) {
  727. this.ym1 = val[0].biViewInfoList[val[0].biViewInfoList.length - 1].name
  728. this.sr = val[0].biViewInfoList[val[0].biViewInfoList.length - 1].weight
  729. this.zc = val[2].biViewInfoList[val[2].biViewInfoList.length - 1].weight
  730. for (let i = 0; i < val[0].biViewInfoList.length; i++) {
  731. _categories.push(val[0].biViewInfoList[i].name)
  732. _price1.push(val[0].biViewInfoList[i].weight)
  733. }
  734. for (let i = 0; i < val[2].biViewInfoList.length; i++) {
  735. _price2.push(val[2].biViewInfoList[i].weight)
  736. }
  737. } else {
  738. this.ym1 = val[1].biViewInfoList[val[1].biViewInfoList.length - 1].name
  739. this.sr = val[1].biViewInfoList[val[1].biViewInfoList.length - 1].weight
  740. this.zc = val[3].biViewInfoList[val[3].biViewInfoList.length - 1].weight
  741. for (let i = 0; i < val[1].biViewInfoList.length; i++) {
  742. _categories.push(val[1].biViewInfoList[i].name)
  743. _price1.push(val[1].biViewInfoList[i].weight)
  744. }
  745. for (let i = 0; i < val[3].biViewInfoList.length; i++) {
  746. _price2.push(val[3].biViewInfoList[i].weight)
  747. }
  748. }
  749. let res = {
  750. categories: _categories,
  751. series: [{
  752. name: "收入",
  753. data: _price1
  754. }, {
  755. name: "支出",
  756. data: _price2
  757. }
  758. ]
  759. };
  760. this.chartData = JSON.parse(JSON.stringify(res));
  761. },
  762. makeDate2(val) {
  763. let _categories = []
  764. let _count1 = []
  765. let _count2 = []
  766. for (let i = 0; i < val[4].biViewInfoList.length; i++) {
  767. _categories.push(val[4].biViewInfoList[i].name)
  768. _count1.push(val[4].biViewInfoList[i].weight)
  769. _count2.push(val[4].biViewInfoList[i].count ? val[4].biViewInfoList[i].count : 0)
  770. }
  771. // for (let i = 0; i < val[5].biViewInfoList.length; i++) {
  772. // _count2.push(val[5].biViewInfoList[i].weight)
  773. // }
  774. let res1 = {
  775. categories: _categories,
  776. series: [{
  777. name: this.index == 1 ? '过去12个月累计签订数量' : '本季累计签订合同数量',
  778. data: _count1,
  779. legendShape: "circle",
  780. },
  781. {
  782. name: this.index == 1 ? '当前执行中数量' : '本季执行中数量',
  783. data: _count2,
  784. legendShape: "circle"
  785. }
  786. ]
  787. };
  788. this.chartData1 = JSON.parse(JSON.stringify(res1));
  789. },
  790. makeDate3(val) {
  791. let _categorieslr = []
  792. let _countlr = []
  793. for (let i = 0; i < val[5].biViewInfoList.length; i++) {
  794. _categorieslr.push(val[5].biViewInfoList[i].name)
  795. _countlr.push(val[5].biViewInfoList[i].weight ? val[5].biViewInfoList[i].weight : 0)
  796. }
  797. //利润核算
  798. let res3 = {
  799. categories: _categorieslr,
  800. series: [{
  801. name: "利润金额",
  802. data: _countlr
  803. }]
  804. };
  805. this.chartData3 = JSON.parse(JSON.stringify(res3));
  806. },
  807. makeDate4(val) {
  808. let _categorieslr = []
  809. let _countlr = []
  810. for (let i = 0; i < val[8].biViewInfoList.length; i++) {
  811. _categorieslr.push(val[8].biViewInfoList[i].name)
  812. _countlr.push(Number(val[8].biViewInfoList[i].weight).toFixed(0) ? Number(val[8].biViewInfoList[i]
  813. .weight).toFixed(0) : 0)
  814. }
  815. let res4 = {
  816. categories: _categorieslr,
  817. series: [{
  818. name: '库存储量',
  819. data: _countlr
  820. }]
  821. };
  822. this.chartData4 = JSON.parse(JSON.stringify(res4));
  823. let _tc = Number(val[6].biViewInfoList[0].count) + Number(val[6].biViewInfoList[1].count) - Number(
  824. val[6].biViewInfoList[2].count)
  825. this.InventoryList = [{
  826. name: '合计储量',
  827. number: Number(val[6].biViewInfoList[0].count).toFixed(3),
  828. src: '../../static/img/cl.png'
  829. }, {
  830. name: '采购待执行',
  831. number: Number(val[6].biViewInfoList[1].count).toFixed(3),
  832. src: '../../static/img/cg.png'
  833. },
  834. {
  835. name: '销待执行售',
  836. number: Number(val[6].biViewInfoList[2].count).toFixed(3),
  837. src: '../../static/img/xs.png'
  838. },
  839. {
  840. name: '头寸',
  841. number: _tc,
  842. src: '../../static/img/tc.png'
  843. },
  844. ]
  845. },
  846. makeDate5(val) {
  847. let _categorieslr = []
  848. let _count = []
  849. for (let i = 0; i < val[7].biViewInfoList.length; i++) {
  850. _categorieslr.push(val[7].biViewInfoList[i].name)
  851. _count.push(val[7].biViewInfoList[i].count ? val[7].biViewInfoList[i].count : 0)
  852. }
  853. let res5 = {
  854. categories: _categorieslr,
  855. series: [{
  856. name: "利润金额",
  857. data: _count
  858. }]
  859. };
  860. this.chartData5 = JSON.parse(JSON.stringify(res5));
  861. this.averageCostList = val[9].biViewInfoList
  862. },
  863. makeDate6(val) {
  864. let _data = []
  865. for (let i = 0; i < val[10].biViewInfoList.length; i++) {
  866. let _obj = {
  867. name: val[10].biViewInfoList[i].name,
  868. value: val[10].biViewInfoList[i].weight
  869. }
  870. _data.push(_obj)
  871. }
  872. let res6 = {
  873. series: [{
  874. data: _data
  875. }]
  876. };
  877. this.chartData6 = JSON.parse(JSON.stringify(res6));
  878. },
  879. selectMakeDate7(val) {
  880. console.log(11)
  881. console.log(val)
  882. let _data = []
  883. for (let i = 0; i < val.biViewInfoList.length; i++) {
  884. let _obj = {
  885. name: val.biViewInfoList[i].name,
  886. value: Number(val.biViewInfoList[i].count)
  887. }
  888. _data.push(_obj)
  889. }
  890. console.log(_data)
  891. let res7 = {
  892. series: [{
  893. data: _data
  894. }]
  895. };
  896. this.$forceUpdate()
  897. this.chartData7 = JSON.parse(JSON.stringify(res7));
  898. },
  899. makeDate7(val) {
  900. let _data = []
  901. for (let i = 0; i < val[11].biViewInfoList.length; i++) {
  902. let _obj = {
  903. name: val[11].biViewInfoList[i].name,
  904. value: Number(val[11].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.chartData7 = JSON.parse(JSON.stringify(res7));
  915. },
  916. makeDate8(val) {
  917. let _categories = []
  918. let _data = []
  919. let _categories1 = []
  920. let _data1 = []
  921. this.appTotal = val[12].count
  922. this.lmTotal = val[13].count
  923. for (let i = 0; i < val[12].biViewInfoList.length; i++) {
  924. _categories.push(val[12].biViewInfoList[i].name)
  925. _data.push(val[12].biViewInfoList[i].weight)
  926. }
  927. for (let i = 0; i < val[13].biViewInfoList.length; i++) {
  928. _categories1.push(val[13].biViewInfoList[i].name)
  929. _data1.push(val[12].biViewInfoList[i].weight)
  930. }
  931. let res8 = {
  932. categories: _categories,
  933. series: [{
  934. name: "成交量A",
  935. data: _data
  936. }]
  937. }
  938. let res9 = {
  939. categories: _categories1,
  940. series: [{
  941. name: "成交量A",
  942. data: _data1
  943. }]
  944. }
  945. this.chartData8 = JSON.parse(JSON.stringify(res8))
  946. this.chartData9 = JSON.parse(JSON.stringify(res9))
  947. },
  948. getServerData() {
  949. uni.showLoading({
  950. title: "加载中",
  951. mask: true
  952. })
  953. this.$api.doRequest('get', '/biInfoController/selectPhoneBiInfo?compId=' + uni.getStorageSync(
  954. 'pcUserInfo')
  955. .compId + '&seachMoth=' + this.seachMoth + '&seachYear=' + this.seachYear).then(
  956. res => {
  957. console.log("数据报表", res)
  958. this.chartList = res.data.data
  959. // 收支核算数据处理
  960. this.makeDate1(res.data.data)
  961. //合同数据
  962. this.makeDate2(res.data.data)
  963. //利润核算
  964. this.makeDate3(res.data.data)
  965. //库存储量
  966. this.makeDate4(res.data.data)
  967. //档期货值
  968. this.makeDate5(res.data.data)
  969. //今日入库
  970. this.makeDate6(res.data.data)
  971. //在途数据
  972. this.makeDate7(res.data.data)
  973. //APP注册
  974. this.makeDate8(res.data.data)
  975. uni.hideLoading()
  976. })
  977. //模拟从服务器获取数据时的延时
  978. setTimeout(() => {
  979. //模拟服务器返回数据,如果数据格式和标准格式不同,需自行按下面的格式拼接
  980. // let res = {
  981. // categories: ["2016", "2017", "2018", "2019", "2020", "2021", "2022", "2023"],
  982. // series: [{
  983. // name: "收入",
  984. // data: [70, 40, 65, 100, 44, 68, 90, 240]
  985. // }, {
  986. // name: "支出",
  987. // data: [35, 8, 25, 37, 4, 20, 56, 30]
  988. // }
  989. // ]
  990. // };
  991. // this.chartData = JSON.parse(JSON.stringify(res));
  992. // let res1 = {
  993. // categories: ["2016", "2017", "2018", "2019", "2020", "2021"],
  994. // series: [{
  995. // name: this.index == 1 ? '过去12个月累计签订数量' : '本季累计签订合同数量',
  996. // data: [35, 36, 31, 33, 13, 34],
  997. // legendShape: "circle",
  998. // },
  999. // {
  1000. // name: this.index == 1 ? '当前执行中数量' : '本季执行中数量',
  1001. // data: [18, 27, 21, 24, 6, 28],
  1002. // legendShape: "circle"
  1003. // }
  1004. // ]
  1005. // };
  1006. // this.chartData1 = JSON.parse(JSON.stringify(res1));
  1007. // let res3 = {
  1008. // categories: ["销售", "采购", "收购", "代收", "代储"],
  1009. // series: [{
  1010. // name: "利润金额",
  1011. // data: [35, 36, 31, 33, 13]
  1012. // }]
  1013. // };
  1014. // this.chartData3 = JSON.parse(JSON.stringify(res3));
  1015. // let res4 = {
  1016. // categories: ["小麦", "高粱(潮粮)", "高粱", "玉米(潮粮)", "玉米"],
  1017. // series: [{
  1018. // name: '库存储量',
  1019. // data: [{
  1020. // value: 35,
  1021. // color: "#FFBB6E"
  1022. // },
  1023. // {
  1024. // value: 36,
  1025. // color: "#8D9EE9"
  1026. // }, {
  1027. // value: 31,
  1028. // color: "#FF8B95"
  1029. // }, {
  1030. // value: 33,
  1031. // color: "#38CA80"
  1032. // },
  1033. // {
  1034. // value: 13,
  1035. // color: "#FFDD85"
  1036. // }
  1037. // ]
  1038. // }]
  1039. // };
  1040. // this.chartData4 = JSON.parse(JSON.stringify(res4));
  1041. // let res5 = {
  1042. // categories: ["小麦", "高粱(潮粮)", "高粱", "玉米(潮粮)", "玉米"],
  1043. // series: [{
  1044. // name: "利润金额",
  1045. // data: [{
  1046. // value: 35,
  1047. // color: "#FFBB6E"
  1048. // },
  1049. // {
  1050. // value: 36,
  1051. // color: "#8D9EE9"
  1052. // }, {
  1053. // value: 31,
  1054. // color: "#FF8B95"
  1055. // }, {
  1056. // value: 33,
  1057. // color: "#38CA80"
  1058. // },
  1059. // {
  1060. // value: 13,
  1061. // color: "#FFDD85"
  1062. // }
  1063. // ]
  1064. // }]
  1065. // };
  1066. // this.chartData5 = JSON.parse(JSON.stringify(res5));
  1067. // let res6 = {
  1068. // series: [{
  1069. // data: [{
  1070. // "name": "一班",
  1071. // "value": 50
  1072. // }, {
  1073. // "name": "二班",
  1074. // "value": 30
  1075. // }, {
  1076. // "name": "三班",
  1077. // "value": 20
  1078. // }, {
  1079. // "name": "四班",
  1080. // "value": 18
  1081. // }, {
  1082. // "name": "五班",
  1083. // "value": 8
  1084. // }]
  1085. // }]
  1086. // };
  1087. // this.chartData6 = JSON.parse(JSON.stringify(res6));
  1088. // let res7 = {
  1089. // series: [{
  1090. // data: [{
  1091. // "name": "一班",
  1092. // "value": 50
  1093. // }, {
  1094. // "name": "二班",
  1095. // "value": 30
  1096. // }, {
  1097. // "name": "三班",
  1098. // "value": 20
  1099. // }, {
  1100. // "name": "四班",
  1101. // "value": 18
  1102. // }, {
  1103. // "name": "五班",
  1104. // "value": 8
  1105. // }]
  1106. // }]
  1107. // };
  1108. // this.chartData7 = JSON.parse(JSON.stringify(res7));
  1109. // let res8 = {
  1110. // categories: ["2016", "2017", "2018", "2019", "2020", "2021"],
  1111. // series: [{
  1112. // name: "成交量A",
  1113. // data: [35, 8, 25, 37, 4, 20]
  1114. // }
  1115. // ]
  1116. // };
  1117. // this.chartData8 = JSON.parse(JSON.stringify(res8));
  1118. // let res9 = {
  1119. // categories: ["2016", "2017", "2018", "2019", "2020", "2021"],
  1120. // series: [{
  1121. // name: "成交量A",
  1122. // data: [35, 8, 25, 37, 4, 20]
  1123. // },
  1124. // {
  1125. // name: "成交量B",
  1126. // data: [70, 40, 65, 100, 44, 68]
  1127. // },
  1128. // {
  1129. // name: "成交量C",
  1130. // data: [100, 80, 95, 150, 112, 132]
  1131. // }
  1132. // ]
  1133. // };
  1134. // this.chartData9 = JSON.parse(JSON.stringify(res9));
  1135. },
  1136. 500);
  1137. },
  1138. back() {
  1139. uni.navigateBack()
  1140. },
  1141. navClick(val) {
  1142. this.index = val
  1143. if (val == 1) {
  1144. this.seachMoth = ''
  1145. } else {
  1146. this.seachMoth = '2022-10-10'
  1147. }
  1148. this.getServerData();
  1149. },
  1150. accounting(val) {
  1151. this.textIndex = val
  1152. if (val == 1) {
  1153. console.log("按月")
  1154. } else {
  1155. console.log("按年")
  1156. }
  1157. this.makeDate1(this.chartList)
  1158. }
  1159. }
  1160. }
  1161. </script>
  1162. <style scoped lang="scss">
  1163. .flex {
  1164. display: flex;
  1165. }
  1166. .alc {
  1167. align-items: center;
  1168. }
  1169. .jcse {
  1170. justify-content: space-evenly;
  1171. }
  1172. .jcsb {
  1173. justify-content: space-between;
  1174. }
  1175. .mtb40 {
  1176. margin: 40rpx 0;
  1177. }
  1178. .title-lv2 {
  1179. font-weight: bold;
  1180. color: #333333;
  1181. }
  1182. .status_bar {
  1183. height: var(--status-bar-height);
  1184. width: 100%;
  1185. }
  1186. .top-nav {
  1187. display: flex;
  1188. align-items: center;
  1189. justify-content: space-evenly;
  1190. position: relative;
  1191. }
  1192. .back {
  1193. position: absolute;
  1194. left: 20rpx;
  1195. top: 0;
  1196. bottom: 0;
  1197. margin: auto;
  1198. }
  1199. .top-nav {
  1200. font-size: 36rpx;
  1201. background: white;
  1202. padding: 20rpx;
  1203. }
  1204. .nav-active {
  1205. font-weight: 700;
  1206. position: relative;
  1207. }
  1208. .nav-active:after {
  1209. content: "";
  1210. position: absolute;
  1211. bottom: -20rpx;
  1212. left: 0;
  1213. right: 0;
  1214. margin: auto;
  1215. height: 10rpx;
  1216. width: 60%;
  1217. background: #262626;
  1218. border-radius: 40rpx;
  1219. }
  1220. .content-item {
  1221. background: white;
  1222. margin: 20rpx 20rpx 0 20rpx;
  1223. border-radius: 20rpx;
  1224. padding: 20rpx;
  1225. box-sizing: border-box;
  1226. }
  1227. .title {
  1228. margin-bottom: 22rpx;
  1229. font-size: 32rpx;
  1230. font-weight: 700;
  1231. color: #343434;
  1232. }
  1233. .right-btn {
  1234. width: 120rpx;
  1235. height: 42rpx;
  1236. display: flex;
  1237. align-items: center;
  1238. justify-content: center;
  1239. background: #F1F1F1;
  1240. border-radius: 30px;
  1241. font-size: 22rpx;
  1242. color: #707575;
  1243. }
  1244. .content1 {
  1245. .content1-wrap {}
  1246. .row1 {
  1247. display: flex;
  1248. justify-content: space-between;
  1249. align-items: center;
  1250. .left {
  1251. color: #868686;
  1252. }
  1253. .text {
  1254. margin-left: 38rpx;
  1255. color: #2E303A;
  1256. }
  1257. .text-active {
  1258. // margin-left: 38rpx;
  1259. color: #FFF;
  1260. background: #2E303A;
  1261. padding: 11rpx 26rpx;
  1262. border-radius: 10rpx;
  1263. }
  1264. }
  1265. .row2 {
  1266. display: flex;
  1267. flex-direction: column;
  1268. align-items: center;
  1269. .text {
  1270. color: #636363;
  1271. margin-bottom: 10rpx
  1272. }
  1273. .price {
  1274. font-size: 56rpx;
  1275. font-weight: 700;
  1276. color: #D79C58;
  1277. }
  1278. }
  1279. .row3 {
  1280. display: flex;
  1281. justify-content: space-between;
  1282. margin-top: 27rpx;
  1283. align-items: center;
  1284. .center {
  1285. width: 2px;
  1286. height: 61rpx;
  1287. border: 2rpx solid #EEEEEE;
  1288. }
  1289. .left,
  1290. .right {
  1291. // background: green;
  1292. width: calc(50% - 1px);
  1293. text-align: center;
  1294. .text {
  1295. color: #636363
  1296. }
  1297. .number {
  1298. margin-top: 12rpx;
  1299. font-size: 34rpx;
  1300. font-weight: 700;
  1301. color: #343434;
  1302. }
  1303. }
  1304. }
  1305. .row4 {
  1306. margin-top: 20rpx;
  1307. }
  1308. }
  1309. .content2 {
  1310. .row1 {}
  1311. .row2 {
  1312. color: #707575;
  1313. font-size: 22rpx;
  1314. .color1 {
  1315. width: 16rpx;
  1316. height: 12rpx;
  1317. background: #D2F3E2;
  1318. border-radius: 7rpx;
  1319. margin-right: 10rpx;
  1320. }
  1321. .color2 {
  1322. width: 16rpx;
  1323. height: 12rpx;
  1324. background: #2CC778;
  1325. border-radius: 7rpx;
  1326. margin-right: 10rpx;
  1327. }
  1328. }
  1329. .row5 {
  1330. display: flex;
  1331. justify-content: space-between;
  1332. color: #9E9E9E;
  1333. .left {}
  1334. }
  1335. }
  1336. .content3 {
  1337. .right {
  1338. color: #9E9E9E;
  1339. }
  1340. .row3 {
  1341. padding: 10rpx 25rpx 30rpx 25rpx;
  1342. border-radius: 15rpx;
  1343. margin-top: 20rpx;
  1344. background: #FAFAFA;
  1345. .list-item {
  1346. margin-top: 20rpx;
  1347. .number {
  1348. font-weight: 700;
  1349. }
  1350. }
  1351. }
  1352. .row7 {
  1353. .list-item {
  1354. display: inline-block;
  1355. padding: 20rpx;
  1356. box-sizing: border-box;
  1357. background: #FAFAFA;
  1358. width: calc(50% - 40rpx);
  1359. margin: 20rpx;
  1360. border-radius: 8rpx;
  1361. }
  1362. }
  1363. }
  1364. .content5 {
  1365. .days-nav {
  1366. display: flex;
  1367. justify-content: space-evenly;
  1368. }
  1369. }
  1370. .content6 {
  1371. .row1 {
  1372. margin: 20rpx 0;
  1373. }
  1374. }
  1375. .days-nav {
  1376. background: red;
  1377. margin: 20rpx;
  1378. background: #F5F6FA;
  1379. border-radius: 8rpx;
  1380. padding: 4rpx 0;
  1381. .item {
  1382. width: 33%;
  1383. display: flex;
  1384. justify-content: center;
  1385. padding: 6px 0;
  1386. }
  1387. .item-active {
  1388. background: #fff;
  1389. }
  1390. }
  1391. </style>