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