newReport.vue 34 KB

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