newReport.vue 34 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150115111521153115411551156115711581159116011611162116311641165116611671168116911701171117211731174117511761177117811791180118111821183118411851186118711881189119011911192119311941195119611971198119912001201120212031204120512061207120812091210121112121213121412151216121712181219122012211222122312241225122612271228122912301231123212331234123512361237123812391240124112421243124412451246124712481249125012511252125312541255125612571258125912601261126212631264126512661267126812691270127112721273127412751276127712781279128012811282128312841285128612871288128912901291129212931294129512961297129812991300130113021303130413051306130713081309131013111312131313141315131613171318131913201321132213231324132513261327132813291330133113321333133413351336133713381339134013411342134313441345134613471348134913501351135213531354135513561357135813591360136113621363136413651366136713681369137013711372137313741375137613771378137913801381138213831384138513861387138813891390139113921393139413951396139713981399140014011402140314041405140614071408140914101411141214131414141514161417141814191420142114221423142414251426142714281429143014311432143314341435143614371438143914401441144214431444144514461447144814491450145114521453145414551456145714581459146014611462146314641465146614671468146914701471147214731474147514761477147814791480
  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 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. clickNav(index) {
  622. this.carIndex = index
  623. let _data = ""
  624. if (index == 0) {
  625. _data = 1
  626. } else if (index == 1) {
  627. _data = 7
  628. } else {
  629. _data = 30
  630. }
  631. this.$api.doRequest('get', '/biInfoController/getTranCountWai', {
  632. seachMoth: _data,
  633. }).then(res => {
  634. console.log(res.data)
  635. this.selectMakeDate7(res.data.data[0])
  636. })
  637. },
  638. yearClick(type) {
  639. if (type == 1) {
  640. this.year--
  641. } else {
  642. this.year++
  643. }
  644. this.$api.doRequest('get', '/biInfoController/profitAccount', {
  645. compId: uni.getStorageSync('pcUserInfo').compId,
  646. seachYear: this.year,
  647. // biViewInfoList: {weight:''}
  648. }).then(res => {
  649. console.log("例如切换", res)
  650. this.makeDate3(res.data[0])
  651. })
  652. },
  653. godetail(status) {
  654. var url = ''
  655. switch (status) {
  656. case 0:
  657. url = '/pages/dataReport/contractdetails/contractdetails'
  658. break;
  659. case 1:
  660. url = '/pages/dataReport/breakdownofprofit'
  661. break;
  662. case 2:
  663. url = '/pages/dataReport/costbreakdown'
  664. break;
  665. case 3:
  666. url = '/pages/dataReport/Inventoryentrydetails'
  667. break;
  668. }
  669. uni.navigateTo({
  670. url: url
  671. })
  672. },
  673. foldClcik(type, index) {
  674. switch (index) {
  675. case 1:
  676. this.isSHowContent1 = !this.isSHowContent1
  677. this.iconName1 = this.isSHowContent1 ? "arrow-up-fill" : 'arrow-down-fill'
  678. break;
  679. case 2:
  680. this.isSHowContent2 = !this.isSHowContent2
  681. this.iconName2 = this.isSHowContent2 ? "arrow-up-fill" : 'arrow-down-fill'
  682. break;
  683. case 3:
  684. this.isSHowContent3 = !this.isSHowContent3
  685. this.iconName3 = this.isSHowContent3 ? "arrow-up-fill" : 'arrow-down-fill'
  686. break;
  687. case 4:
  688. this.isSHowContent4 = !this.isSHowContent4
  689. this.iconName4 = this.isSHowContent4 ? "arrow-up-fill" : 'arrow-down-fill'
  690. break;
  691. case 5:
  692. this.isSHowContent5 = !this.isSHowContent5
  693. this.iconName5 = this.isSHowContent5 ? "arrow-up-fill" : 'arrow-down-fill'
  694. break;
  695. case 6:
  696. this.isSHowContent6 = !this.isSHowContent6
  697. this.iconName6 = this.isSHowContent6 ? "arrow-up-fill" : 'arrow-down-fill'
  698. break;
  699. }
  700. this.modeClass = type
  701. },
  702. getIndex(e) {
  703. console.log(e)
  704. // 点击图表
  705. if (this.textIndex == 1) {
  706. this.ym1 = this.chartList[0].biViewInfoList[e.currentIndex.index].name
  707. this.sr = this.chartList[0].biViewInfoList[e.currentIndex.index].weight
  708. this.zc = this.chartList[2].biViewInfoList[e.currentIndex.index].weight
  709. } else {
  710. this.ym1 = this.chartList[1].biViewInfoList[e.currentIndex.index].name
  711. this.sr = this.chartList[1].biViewInfoList[e.currentIndex.index].weight
  712. this.zc = this.chartList[3].biViewInfoList[e.currentIndex.index].weight
  713. }
  714. },
  715. makeDate1(val) {
  716. console.log("val", val)
  717. // 按月1
  718. let _categories = []
  719. let _price1 = []
  720. let _price2 = []
  721. if (this.textIndex == 1) {
  722. this.ym1 = val[0].biViewInfoList[val[0].biViewInfoList.length - 1].name
  723. this.sr = val[0].biViewInfoList[val[0].biViewInfoList.length - 1].weight
  724. this.zc = val[2].biViewInfoList[val[2].biViewInfoList.length - 1].weight
  725. for (let i = 0; i < val[0].biViewInfoList.length; i++) {
  726. _categories.push(val[0].biViewInfoList[i].name)
  727. _price1.push(val[0].biViewInfoList[i].weight)
  728. }
  729. for (let i = 0; i < val[2].biViewInfoList.length; i++) {
  730. _price2.push(val[2].biViewInfoList[i].weight)
  731. }
  732. } else {
  733. this.ym1 = val[1].biViewInfoList[val[1].biViewInfoList.length - 1].name
  734. this.sr = val[1].biViewInfoList[val[1].biViewInfoList.length - 1].weight
  735. this.zc = val[3].biViewInfoList[val[3].biViewInfoList.length - 1].weight
  736. for (let i = 0; i < val[1].biViewInfoList.length; i++) {
  737. _categories.push(val[1].biViewInfoList[i].name)
  738. _price1.push(val[1].biViewInfoList[i].weight)
  739. }
  740. for (let i = 0; i < val[3].biViewInfoList.length; i++) {
  741. _price2.push(val[3].biViewInfoList[i].weight)
  742. }
  743. }
  744. let res = {
  745. categories: _categories,
  746. series: [{
  747. name: "收入",
  748. data: _price1
  749. }, {
  750. name: "支出",
  751. data: _price2
  752. }
  753. ]
  754. };
  755. this.chartData = JSON.parse(JSON.stringify(res));
  756. },
  757. makeDate2(val) {
  758. let _categories = []
  759. let _count1 = []
  760. let _count2 = []
  761. for (let i = 0; i < val[4].biViewInfoList.length; i++) {
  762. _categories.push(val[4].biViewInfoList[i].name)
  763. _count1.push(val[4].biViewInfoList[i].weight)
  764. _count2.push(val[4].biViewInfoList[i].count ? val[4].biViewInfoList[i].count : 0)
  765. }
  766. // for (let i = 0; i < val[5].biViewInfoList.length; i++) {
  767. // _count2.push(val[5].biViewInfoList[i].weight)
  768. // }
  769. let res1 = {
  770. categories: _categories,
  771. series: [{
  772. name: this.index == 1 ? '过去12个月累计签订数量' : '本季累计签订合同数量',
  773. data: _count1,
  774. legendShape: "circle",
  775. },
  776. {
  777. name: this.index == 1 ? '当前执行中数量' : '本季执行中数量',
  778. data: _count2,
  779. legendShape: "circle"
  780. }
  781. ]
  782. };
  783. this.chartData1 = JSON.parse(JSON.stringify(res1));
  784. },
  785. makeDate3(val) {
  786. let _categorieslr = []
  787. let _countlr = []
  788. for (let i = 0; i < val[5].biViewInfoList.length; i++) {
  789. _categorieslr.push(val[5].biViewInfoList[i].name)
  790. _countlr.push(val[5].biViewInfoList[i].weight ? val[5].biViewInfoList[i].weight : 0)
  791. }
  792. //利润核算
  793. let res3 = {
  794. categories: _categorieslr,
  795. series: [{
  796. name: "利润金额",
  797. data: _countlr
  798. }]
  799. };
  800. this.chartData3 = JSON.parse(JSON.stringify(res3));
  801. },
  802. makeDate4(val) {
  803. let _categorieslr = []
  804. let _countlr = []
  805. for (let i = 0; i < val[8].biViewInfoList.length; i++) {
  806. _categorieslr.push(val[8].biViewInfoList[i].name)
  807. _countlr.push(Number(val[8].biViewInfoList[i].weight).toFixed(0) ? Number(val[8].biViewInfoList[i]
  808. .weight).toFixed(0) : 0)
  809. }
  810. let res4 = {
  811. categories: _categorieslr,
  812. series: [{
  813. name: '库存储量',
  814. data: _countlr
  815. }]
  816. };
  817. this.chartData4 = JSON.parse(JSON.stringify(res4));
  818. let _tc = Number(val[6].biViewInfoList[0].count) + Number(val[6].biViewInfoList[1].count) - Number(
  819. val[6].biViewInfoList[2].count)
  820. this.InventoryList = [{
  821. name: '合计储量',
  822. number: Number(val[6].biViewInfoList[0].count).toFixed(3),
  823. src: '../../static/img/cl.png'
  824. }, {
  825. name: '采购待执行',
  826. number: Number(val[6].biViewInfoList[1].count).toFixed(3),
  827. src: '../../static/img/cg.png'
  828. },
  829. {
  830. name: '销待执行售',
  831. number: Number(val[6].biViewInfoList[2].count).toFixed(3),
  832. src: '../../static/img/xs.png'
  833. },
  834. {
  835. name: '头寸',
  836. number: _tc,
  837. src: '../../static/img/tc.png'
  838. },
  839. ]
  840. },
  841. makeDate5(val) {
  842. let _categorieslr = []
  843. let _count = []
  844. for (let i = 0; i < val[7].biViewInfoList.length; i++) {
  845. _categorieslr.push(val[7].biViewInfoList[i].name)
  846. _count.push(val[7].biViewInfoList[i].count ? val[7].biViewInfoList[i].count : 0)
  847. }
  848. let res5 = {
  849. categories: _categorieslr,
  850. series: [{
  851. name: "利润金额",
  852. data: _count
  853. }]
  854. };
  855. this.chartData5 = JSON.parse(JSON.stringify(res5));
  856. this.averageCostList = val[9].biViewInfoList
  857. },
  858. makeDate6(val) {
  859. let _data = []
  860. for (let i = 0; i < val[10].biViewInfoList.length; i++) {
  861. let _obj = {
  862. name: val[10].biViewInfoList[i].name,
  863. value: val[10].biViewInfoList[i].weight
  864. }
  865. _data.push(_obj)
  866. }
  867. let res6 = {
  868. series: [{
  869. data: _data
  870. }]
  871. };
  872. this.chartData6 = JSON.parse(JSON.stringify(res6));
  873. },
  874. selectMakeDate7(val) {
  875. console.log(11)
  876. console.log(val)
  877. let _data = []
  878. for (let i = 0; i < val.biViewInfoList.length; i++) {
  879. let _obj = {
  880. name: val.biViewInfoList[i].name,
  881. value: Number(val.biViewInfoList[i].count)
  882. }
  883. _data.push(_obj)
  884. }
  885. console.log(_data)
  886. let res7 = {
  887. series: [{
  888. data: _data
  889. }]
  890. };
  891. this.$forceUpdate()
  892. this.chartData7 = JSON.parse(JSON.stringify(res7));
  893. },
  894. makeDate7(val) {
  895. let _data = []
  896. for (let i = 0; i < val[11].biViewInfoList.length; i++) {
  897. let _obj = {
  898. name: val[11].biViewInfoList[i].name,
  899. value: Number(val[11].biViewInfoList[i].count)
  900. }
  901. _data.push(_obj)
  902. }
  903. console.log(_data)
  904. let res7 = {
  905. series: [{
  906. data: _data
  907. }]
  908. };
  909. this.chartData7 = JSON.parse(JSON.stringify(res7));
  910. },
  911. makeDate8(val) {
  912. let _categories = []
  913. let _data = []
  914. let _categories1 = []
  915. let _data1 = []
  916. this.appTotal = val[12].count
  917. this.lmTotal = val[13].count
  918. for (let i = 0; i < val[12].biViewInfoList.length; i++) {
  919. _categories.push(val[12].biViewInfoList[i].name)
  920. _data.push(val[12].biViewInfoList[i].weight)
  921. }
  922. for (let i = 0; i < val[13].biViewInfoList.length; i++) {
  923. _categories1.push(val[13].biViewInfoList[i].name)
  924. _data1.push(val[12].biViewInfoList[i].weight)
  925. }
  926. let res8 = {
  927. categories: _categories,
  928. series: [{
  929. name: "成交量A",
  930. data: _data
  931. }]
  932. }
  933. let res9 = {
  934. categories: _categories1,
  935. series: [{
  936. name: "成交量A",
  937. data: _data1
  938. }]
  939. }
  940. this.chartData8 = JSON.parse(JSON.stringify(res8))
  941. this.chartData9 = JSON.parse(JSON.stringify(res9))
  942. },
  943. getServerData() {
  944. uni.showLoading({
  945. title: "加载中",
  946. mask: true
  947. })
  948. this.$api.doRequest('get', '/biInfoController/selectPhoneBiInfo?compId=' + uni.getStorageSync(
  949. 'pcUserInfo')
  950. .compId + '&seachMoth=' + this.seachMoth + '&seachYear=' + this.seachYear).then(
  951. res => {
  952. console.log("数据报表", res)
  953. this.chartList = res.data.data
  954. // 收支核算数据处理
  955. this.makeDate1(res.data.data)
  956. //合同数据
  957. this.makeDate2(res.data.data)
  958. //利润核算
  959. this.makeDate3(res.data.data)
  960. //库存储量
  961. this.makeDate4(res.data.data)
  962. //档期货值
  963. this.makeDate5(res.data.data)
  964. //今日入库
  965. this.makeDate6(res.data.data)
  966. //在途数据
  967. this.makeDate7(res.data.data)
  968. //APP注册
  969. this.makeDate8(res.data.data)
  970. uni.hideLoading()
  971. })
  972. //模拟从服务器获取数据时的延时
  973. setTimeout(() => {
  974. //模拟服务器返回数据,如果数据格式和标准格式不同,需自行按下面的格式拼接
  975. // let res = {
  976. // categories: ["2016", "2017", "2018", "2019", "2020", "2021", "2022", "2023"],
  977. // series: [{
  978. // name: "收入",
  979. // data: [70, 40, 65, 100, 44, 68, 90, 240]
  980. // }, {
  981. // name: "支出",
  982. // data: [35, 8, 25, 37, 4, 20, 56, 30]
  983. // }
  984. // ]
  985. // };
  986. // this.chartData = JSON.parse(JSON.stringify(res));
  987. // let res1 = {
  988. // categories: ["2016", "2017", "2018", "2019", "2020", "2021"],
  989. // series: [{
  990. // name: this.index == 1 ? '过去12个月累计签订数量' : '本季累计签订合同数量',
  991. // data: [35, 36, 31, 33, 13, 34],
  992. // legendShape: "circle",
  993. // },
  994. // {
  995. // name: this.index == 1 ? '当前执行中数量' : '本季执行中数量',
  996. // data: [18, 27, 21, 24, 6, 28],
  997. // legendShape: "circle"
  998. // }
  999. // ]
  1000. // };
  1001. // this.chartData1 = JSON.parse(JSON.stringify(res1));
  1002. // let res3 = {
  1003. // categories: ["销售", "采购", "收购", "代收", "代储"],
  1004. // series: [{
  1005. // name: "利润金额",
  1006. // data: [35, 36, 31, 33, 13]
  1007. // }]
  1008. // };
  1009. // this.chartData3 = JSON.parse(JSON.stringify(res3));
  1010. // let res4 = {
  1011. // categories: ["小麦", "高粱(潮粮)", "高粱", "玉米(潮粮)", "玉米"],
  1012. // series: [{
  1013. // name: '库存储量',
  1014. // data: [{
  1015. // value: 35,
  1016. // color: "#FFBB6E"
  1017. // },
  1018. // {
  1019. // value: 36,
  1020. // color: "#8D9EE9"
  1021. // }, {
  1022. // value: 31,
  1023. // color: "#FF8B95"
  1024. // }, {
  1025. // value: 33,
  1026. // color: "#38CA80"
  1027. // },
  1028. // {
  1029. // value: 13,
  1030. // color: "#FFDD85"
  1031. // }
  1032. // ]
  1033. // }]
  1034. // };
  1035. // this.chartData4 = JSON.parse(JSON.stringify(res4));
  1036. // let res5 = {
  1037. // categories: ["小麦", "高粱(潮粮)", "高粱", "玉米(潮粮)", "玉米"],
  1038. // series: [{
  1039. // name: "利润金额",
  1040. // data: [{
  1041. // value: 35,
  1042. // color: "#FFBB6E"
  1043. // },
  1044. // {
  1045. // value: 36,
  1046. // color: "#8D9EE9"
  1047. // }, {
  1048. // value: 31,
  1049. // color: "#FF8B95"
  1050. // }, {
  1051. // value: 33,
  1052. // color: "#38CA80"
  1053. // },
  1054. // {
  1055. // value: 13,
  1056. // color: "#FFDD85"
  1057. // }
  1058. // ]
  1059. // }]
  1060. // };
  1061. // this.chartData5 = JSON.parse(JSON.stringify(res5));
  1062. // let res6 = {
  1063. // series: [{
  1064. // data: [{
  1065. // "name": "一班",
  1066. // "value": 50
  1067. // }, {
  1068. // "name": "二班",
  1069. // "value": 30
  1070. // }, {
  1071. // "name": "三班",
  1072. // "value": 20
  1073. // }, {
  1074. // "name": "四班",
  1075. // "value": 18
  1076. // }, {
  1077. // "name": "五班",
  1078. // "value": 8
  1079. // }]
  1080. // }]
  1081. // };
  1082. // this.chartData6 = JSON.parse(JSON.stringify(res6));
  1083. // let res7 = {
  1084. // series: [{
  1085. // data: [{
  1086. // "name": "一班",
  1087. // "value": 50
  1088. // }, {
  1089. // "name": "二班",
  1090. // "value": 30
  1091. // }, {
  1092. // "name": "三班",
  1093. // "value": 20
  1094. // }, {
  1095. // "name": "四班",
  1096. // "value": 18
  1097. // }, {
  1098. // "name": "五班",
  1099. // "value": 8
  1100. // }]
  1101. // }]
  1102. // };
  1103. // this.chartData7 = JSON.parse(JSON.stringify(res7));
  1104. // let res8 = {
  1105. // categories: ["2016", "2017", "2018", "2019", "2020", "2021"],
  1106. // series: [{
  1107. // name: "成交量A",
  1108. // data: [35, 8, 25, 37, 4, 20]
  1109. // }
  1110. // ]
  1111. // };
  1112. // this.chartData8 = JSON.parse(JSON.stringify(res8));
  1113. // let res9 = {
  1114. // categories: ["2016", "2017", "2018", "2019", "2020", "2021"],
  1115. // series: [{
  1116. // name: "成交量A",
  1117. // data: [35, 8, 25, 37, 4, 20]
  1118. // },
  1119. // {
  1120. // name: "成交量B",
  1121. // data: [70, 40, 65, 100, 44, 68]
  1122. // },
  1123. // {
  1124. // name: "成交量C",
  1125. // data: [100, 80, 95, 150, 112, 132]
  1126. // }
  1127. // ]
  1128. // };
  1129. // this.chartData9 = JSON.parse(JSON.stringify(res9));
  1130. },
  1131. 500);
  1132. },
  1133. back() {
  1134. uni.navigateBack()
  1135. },
  1136. navClick(val) {
  1137. this.index = val
  1138. if (val == 1) {
  1139. this.seachMoth = ''
  1140. } else {
  1141. this.seachMoth = '2022-10-10'
  1142. }
  1143. this.getServerData();
  1144. },
  1145. accounting(val) {
  1146. this.textIndex = val
  1147. if (val == 1) {
  1148. console.log("按月")
  1149. } else {
  1150. console.log("按年")
  1151. }
  1152. this.makeDate1(this.chartList)
  1153. }
  1154. }
  1155. }
  1156. </script>
  1157. <style scoped lang="scss">
  1158. .flex {
  1159. display: flex;
  1160. }
  1161. .alc {
  1162. align-items: center;
  1163. }
  1164. .jcse {
  1165. justify-content: space-evenly;
  1166. }
  1167. .jcsb {
  1168. justify-content: space-between;
  1169. }
  1170. .mtb40 {
  1171. margin: 40rpx 0;
  1172. }
  1173. .title-lv2 {
  1174. font-weight: bold;
  1175. color: #333333;
  1176. }
  1177. .status_bar {
  1178. height: var(--status-bar-height);
  1179. width: 100%;
  1180. }
  1181. .top-nav {
  1182. display: flex;
  1183. align-items: center;
  1184. justify-content: space-evenly;
  1185. position: relative;
  1186. }
  1187. .back {
  1188. position: absolute;
  1189. left: 20rpx;
  1190. top: 0;
  1191. bottom: 0;
  1192. margin: auto;
  1193. }
  1194. .top-nav {
  1195. font-size: 36rpx;
  1196. background: white;
  1197. padding: 20rpx;
  1198. }
  1199. .nav-active {
  1200. font-weight: 700;
  1201. position: relative;
  1202. }
  1203. .nav-active:after {
  1204. content: "";
  1205. position: absolute;
  1206. bottom: -20rpx;
  1207. left: 0;
  1208. right: 0;
  1209. margin: auto;
  1210. height: 10rpx;
  1211. width: 60%;
  1212. background: #262626;
  1213. border-radius: 40rpx;
  1214. }
  1215. .content-item {
  1216. background: white;
  1217. margin: 20rpx 20rpx 0 20rpx;
  1218. border-radius: 20rpx;
  1219. padding: 20rpx;
  1220. box-sizing: border-box;
  1221. }
  1222. .title {
  1223. margin-bottom: 22rpx;
  1224. font-size: 32rpx;
  1225. font-weight: 700;
  1226. color: #343434;
  1227. }
  1228. .right-btn {
  1229. width: 120rpx;
  1230. height: 42rpx;
  1231. display: flex;
  1232. align-items: center;
  1233. justify-content: center;
  1234. background: #F1F1F1;
  1235. border-radius: 30px;
  1236. font-size: 22rpx;
  1237. color: #707575;
  1238. }
  1239. .content1 {
  1240. .content1-wrap {}
  1241. .row1 {
  1242. display: flex;
  1243. justify-content: space-between;
  1244. align-items: center;
  1245. .left {
  1246. color: #868686;
  1247. }
  1248. .text {
  1249. margin-left: 38rpx;
  1250. color: #2E303A;
  1251. }
  1252. .text-active {
  1253. // margin-left: 38rpx;
  1254. color: #FFF;
  1255. background: #2E303A;
  1256. padding: 11rpx 26rpx;
  1257. border-radius: 10rpx;
  1258. }
  1259. }
  1260. .row2 {
  1261. display: flex;
  1262. flex-direction: column;
  1263. align-items: center;
  1264. .text {
  1265. color: #636363;
  1266. margin-bottom: 10rpx
  1267. }
  1268. .price {
  1269. font-size: 56rpx;
  1270. font-weight: 700;
  1271. color: #D79C58;
  1272. }
  1273. }
  1274. .row3 {
  1275. display: flex;
  1276. justify-content: space-between;
  1277. margin-top: 27rpx;
  1278. align-items: center;
  1279. .center {
  1280. width: 2px;
  1281. height: 61rpx;
  1282. border: 2rpx solid #EEEEEE;
  1283. }
  1284. .left,
  1285. .right {
  1286. // background: green;
  1287. width: calc(50% - 1px);
  1288. text-align: center;
  1289. .text {
  1290. color: #636363
  1291. }
  1292. .number {
  1293. margin-top: 12rpx;
  1294. font-size: 34rpx;
  1295. font-weight: 700;
  1296. color: #343434;
  1297. }
  1298. }
  1299. }
  1300. .row4 {
  1301. margin-top: 20rpx;
  1302. }
  1303. }
  1304. .content2 {
  1305. .row1 {}
  1306. .row2 {
  1307. color: #707575;
  1308. font-size: 22rpx;
  1309. .color1 {
  1310. width: 16rpx;
  1311. height: 12rpx;
  1312. background: #D2F3E2;
  1313. border-radius: 7rpx;
  1314. margin-right: 10rpx;
  1315. }
  1316. .color2 {
  1317. width: 16rpx;
  1318. height: 12rpx;
  1319. background: #2CC778;
  1320. border-radius: 7rpx;
  1321. margin-right: 10rpx;
  1322. }
  1323. }
  1324. .row5 {
  1325. display: flex;
  1326. justify-content: space-between;
  1327. color: #9E9E9E;
  1328. .left {}
  1329. }
  1330. }
  1331. .content3 {
  1332. .right {
  1333. color: #9E9E9E;
  1334. }
  1335. .row3 {
  1336. padding: 10rpx 25rpx 30rpx 25rpx;
  1337. border-radius: 15rpx;
  1338. margin-top: 20rpx;
  1339. background: #FAFAFA;
  1340. .list-item {
  1341. margin-top: 20rpx;
  1342. .number {
  1343. font-weight: 700;
  1344. }
  1345. }
  1346. }
  1347. .row7 {
  1348. .list-item {
  1349. display: inline-block;
  1350. padding: 20rpx;
  1351. box-sizing: border-box;
  1352. background: #FAFAFA;
  1353. width: calc(50% - 40rpx);
  1354. margin: 20rpx;
  1355. border-radius: 8rpx;
  1356. }
  1357. }
  1358. }
  1359. .content5 {
  1360. .days-nav {
  1361. display: flex;
  1362. justify-content: space-evenly;
  1363. }
  1364. }
  1365. .content6 {
  1366. .row1 {
  1367. margin: 20rpx 0;
  1368. }
  1369. }
  1370. .days-nav {
  1371. background: red;
  1372. margin: 20rpx;
  1373. background: #F5F6FA;
  1374. border-radius: 8rpx;
  1375. padding: 4rpx 0;
  1376. .item {
  1377. width: 33%;
  1378. display: flex;
  1379. justify-content: center;
  1380. padding: 6px 0;
  1381. }
  1382. .item-active {
  1383. background: #fff;
  1384. }
  1385. }
  1386. </style>