newReport.vue 34 KB

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