newReport.vue 34 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134113511361137113811391140114111421143114411451146114711481149115011511152115311541155115611571158115911601161116211631164116511661167116811691170117111721173117411751176117711781179118011811182118311841185118611871188118911901191119211931194119511961197119811991200120112021203120412051206120712081209121012111212121312141215121612171218121912201221122212231224122512261227122812291230123112321233123412351236123712381239124012411242124312441245124612471248124912501251125212531254125512561257125812591260126112621263126412651266126712681269127012711272127312741275127612771278127912801281128212831284128512861287128812891290129112921293129412951296129712981299130013011302130313041305130613071308130913101311131213131314131513161317131813191320132113221323132413251326132713281329133013311332133313341335133613371338133913401341134213431344134513461347134813491350135113521353135413551356135713581359136013611362136313641365136613671368136913701371137213731374137513761377137813791380138113821383138413851386138713881389139013911392139313941395139613971398139914001401140214031404140514061407140814091410141114121413141414151416141714181419142014211422142314241425142614271428142914301431143214331434143514361437143814391440144114421443144414451446144714481449145014511452145314541455145614571458145914601461146214631464146514661467146814691470147114721473147414751476147714781479148014811482148314841485148614871488
  1. <template>
  2. <view class="content">
  3. <view class="status_bar"></view>
  4. <view class="top-nav">
  5. <u-icon name="arrow-left" size="38" class="back" @click="back"></u-icon>
  6. <view class="left" :class="index==1?'nav-active':''" @click="navClick(1)">
  7. 全部
  8. </view>
  9. <view class="right" :class="index==2?'nav-active':''" @click="navClick(2)">
  10. 新季
  11. </view>
  12. </view>
  13. <view class="content1 content-item">
  14. <view class="title">
  15. 收支核算 <u-icon :name="iconName1" size="30" style="margin-left: 10rpx;"
  16. @click="foldClcik(['fade', 'slide-top'],1)">
  17. </u-icon>
  18. </view>
  19. <uni-transition ref="ani" custom-class="transition" :mode-class="modeClass" :styles="styles"
  20. :show="isSHowContent1">
  21. <u-line color="#EEEEEE" />
  22. <view class="row1 mtb40">
  23. <view class="left">
  24. {{ym1}}
  25. </view>
  26. <view class="right" v-if="index!=2">
  27. <text class="text" :class="textIndex==1?'text-active':''" @click="accounting(1)">
  28. 按月
  29. </text>
  30. <text class="text" :class="textIndex==2?'text-active':''" @click="accounting(2)">按年</text>
  31. </view>
  32. </view>
  33. <view class="row2" @click='godetail(2)'>
  34. <view class="text">
  35. 收入(元)
  36. </view>
  37. <view class="price">
  38. {{sr}}
  39. </view>
  40. </view>
  41. <view class="row3" @click='godetail(2)'>
  42. <view class="left">
  43. <view class="text">
  44. 支出(元)
  45. </view>
  46. <view class="number">
  47. {{zc}}
  48. </view>
  49. </view>
  50. <view class="center">
  51. </view>
  52. <view class="right">
  53. <view class="text">
  54. 差额(元)
  55. </view>
  56. <view class="number">
  57. {{sr-zc}}
  58. </view>
  59. </view>
  60. </view>
  61. <view class="row4">
  62. <qiun-data-charts type="area" :opts="opts" :chartData="chartData" :ontouch="true"
  63. @getIndex="getIndex" />
  64. </view>
  65. </uni-transition>
  66. </view>
  67. <view class="content2 content-item">
  68. <view class="title">
  69. 合同数据<u-icon :name="iconName2" size="30" style="margin-left: 10rpx;"
  70. @click="foldClcik(['fade', 'slide-top'],2)">
  71. </u-icon>
  72. </view>
  73. <uni-transition ref="ani" custom-class="transition" :mode-class="modeClass" :styles="styles"
  74. :show="isSHowContent2">
  75. <u-line color="#EEEEEE" />
  76. <view class="row1 flex jcsb mtb40">
  77. <view class="left title-lv2">
  78. 数量统计
  79. </view>
  80. <view @click='godetail(0)' class="right-btn">
  81. 合同明细
  82. </view>
  83. </view>
  84. <!-- <view class="row2 flex jcse">
  85. <view class="left flex alc">
  86. <view class="color1"></view>
  87. <text class="text">{{index==1?'过去12个月累计签订数量':'本季累计签订合同数量'}}</text>
  88. </view>
  89. <view class="right flex alc">
  90. <view class="color2"></view>
  91. <text class="text">{{index==1?'当前执行中数量':'本季执行中数量'}}</text>
  92. </view>
  93. </view> -->
  94. <view class="row3">
  95. <qiun-data-charts type="bar" :opts="opts2" :chartData="chartData1" />
  96. </view>
  97. <view class="row4 flex jcsb mtb40">
  98. <view class="left title-lv2">
  99. 利润核算
  100. </view>
  101. <view @click='godetail(1)' class="right-btn">
  102. 利润明细
  103. </view>
  104. </view>
  105. <view class="row5">
  106. <view class="left flex">
  107. <view class="" v-if="index==1">
  108. <u-icon name="arrow-left" size="26" style="margin-right: 10rpx;" color="#969696"
  109. @click="yearClick('1')">
  110. </u-icon>
  111. <text @click="showYear=true">{{year}}</text>
  112. <u-icon name="arrow-right" size="26" style="margin-left: 10rpx;"
  113. :color="nowYear!=year?'#969696':'#DBDBDB'" @click="yearClick('2')" v-if="nowYear!=year">
  114. </u-icon>
  115. <u-icon name="arrow-right" size="26" style="margin-left: 10rpx;"
  116. :color="nowYear!=year?'#969696':'#DBDBDB'" v-if="nowYear==year">
  117. </u-icon>
  118. </view>
  119. <view class="" v-else>
  120. 新季利润
  121. </view>
  122. </view>
  123. <view class="right">
  124. 单位:元
  125. </view>
  126. </view>
  127. <view class="row6">
  128. <qiun-data-charts type="column" :opts="opts3" :chartData="chartData3" />
  129. </view>
  130. </uni-transition>
  131. </view>
  132. <view class="content3 content-item">
  133. <view class="title flex jcsb">
  134. <view class="">
  135. 仓储数据<u-icon :name="iconName3" size="30" style="margin-left: 10rpx;"
  136. @click="foldClcik(['fade', 'slide-top'],3)">
  137. </u-icon>
  138. </view>
  139. <view @click='goToPage(5)' class="right-btn">
  140. 库存明细
  141. </view>
  142. </view>
  143. <uni-transition ref="ani" custom-class="transition" :mode-class="modeClass" :styles="styles"
  144. :show="isSHowContent3">
  145. <u-line color="#EEEEEE" />
  146. <view class="row1 flex jcsb mtb40">
  147. <view class="left title-lv2">
  148. 库存储量
  149. </view>
  150. <view class="right">
  151. 单位:吨
  152. </view>
  153. </view>
  154. <view class="row2">
  155. <qiun-data-charts type="bar" :opts="opts4" :chartData="chartData4" />
  156. </view>
  157. <view class="row3">
  158. <view class="list-item flex jcsb" v-for="(item,index) in InventoryList">
  159. <view class="flex alc">
  160. <image :src="item.src" mode="widthFix" style="width: 40rpx;margin-right: 20rpx;"></image>
  161. <text>{{item.name}}</text>
  162. </view>
  163. <view class="number">
  164. {{item.number}}
  165. </view>
  166. </view>
  167. </view>
  168. <view class="row5 flex jcsb mtb40">
  169. <view class="left title-lv2">
  170. 当期货值
  171. </view>
  172. <view class="right">
  173. 单位:元
  174. </view>
  175. </view>
  176. <view class="row6">
  177. <qiun-data-charts type="column" :opts="opts5" :chartData="chartData5" />
  178. </view>
  179. <view class="row7">
  180. <view class="left title-lv2" style="margin: 30rpx;">
  181. 平均成本
  182. </view>
  183. <view class="list-item" v-for="item in averageCostList">
  184. <view class="flex jcsb alc">
  185. <view class="left">
  186. {{item.name}}
  187. </view>
  188. <view class="">
  189. {{Number(item.result).toFixed(0)}}
  190. </view>
  191. </view>
  192. </view>
  193. </view>
  194. </uni-transition>
  195. </view>
  196. <view class="content4 content-item">
  197. <view class="title flex jcsb">
  198. <view class="">
  199. 今日入库<u-icon :name="iconName4" size="30" style="margin-left: 10rpx;"
  200. @click="foldClcik(['fade', 'slide-top'],4)">
  201. </u-icon>
  202. </view>
  203. <view @click='godetail(3)' class="right-btn">
  204. 入库明细
  205. </view>
  206. </view>
  207. <uni-transition ref="ani" custom-class="transition" :mode-class="modeClass" :styles="styles"
  208. :show="isSHowContent4">
  209. <view class="row1">
  210. <qiun-data-charts type="ring" :opts="opts6" :chartData="chartData6" />
  211. </view>
  212. </uni-transition>
  213. </view>
  214. <view class="content5 content-item">
  215. <view class="title">
  216. 在途数据<u-icon :name="iconName5" size="30" style="margin-left: 10rpx;"
  217. @click="foldClcik(['fade', 'slide-top'],5)">
  218. </u-icon>
  219. </view>
  220. <uni-transition ref="ani" custom-class="transition" :mode-class="modeClass" :styles="styles"
  221. :show="isSHowContent5">
  222. <view class="row1 days-nav">
  223. <view class="item" :class="carIndex==index?'item-active':''" v-for="(item, index) in dayList"
  224. @click="clickNav(index)">
  225. {{item}}
  226. </view>
  227. </view>
  228. <qiun-data-charts type="pie" :opts="opts7" :chartData="chartData7" />
  229. </uni-transition>
  230. </view>
  231. <view class="content6 content-item">
  232. <view class="title">
  233. 用户增长<u-icon :name="iconName6" size="30" style="margin-left: 10rpx;"
  234. @click="foldClcik(['fade', 'slide-top'],6)">
  235. </u-icon>
  236. </view>
  237. <uni-transition ref="ani" custom-class="transition" :mode-class="modeClass" :styles="styles"
  238. :show="isSHowContent6">
  239. <view class="row1 flex jcsb">
  240. <view class="left">
  241. app注册
  242. </view>
  243. <view class="right">
  244. <text>合计:</text>
  245. <text style="color: #EC6666;">{{appTotal}}</text>
  246. <text>人</text>
  247. </view>
  248. </view>
  249. <view class="row2">
  250. <qiun-data-charts type="area" :opts="opts8" :chartData="chartData8" />
  251. </view>
  252. <view class="row1 flex jcsb">
  253. <view class="left">
  254. 粮脉入驻
  255. </view>
  256. <view class="right">
  257. <text>合计:</text>
  258. <text style="color: #22C572;">{{lmTotal}}</text>
  259. <text>人</text>
  260. </view>
  261. </view>
  262. <view class="row2">
  263. <qiun-data-charts type="area" :opts="opts9" :chartData="chartData9" />
  264. </view>
  265. </uni-transition>
  266. </view>
  267. <u-picker v-model="showYear" mode="selector" :range="selector" :default-selector="[2]"></u-picker>
  268. </view>
  269. </template>
  270. <script>
  271. export default {
  272. data() {
  273. return {
  274. carIndex: 0,
  275. appTotal: '',
  276. lmTotal: '',
  277. ym1: '',
  278. sr: '',
  279. zc: '',
  280. seachYear: '',
  281. seachMoth: '',
  282. dayList: ['1天', '7天', '30天'],
  283. averageCostList: [{
  284. name: '玉米',
  285. number: '2000.00'
  286. },
  287. {
  288. name: '玉米(潮粮)',
  289. number: '2000.00'
  290. },
  291. {
  292. name: '高粱',
  293. number: '2000.00'
  294. },
  295. {
  296. name: '高粱(潮粮)',
  297. number: '2000.00'
  298. },
  299. {
  300. name: '小麦',
  301. number: '2000.00'
  302. },
  303. {
  304. name: '大豆',
  305. number: '2000.00'
  306. },
  307. ],
  308. InventoryList: [{
  309. name: '合计储量',
  310. number: '1000.00',
  311. src: '../../static/img/cl.png'
  312. }, {
  313. name: '采购待执行',
  314. number: '1000.00',
  315. src: '../../static/img/cg.png'
  316. },
  317. {
  318. name: '销待执行售',
  319. number: '1000.00',
  320. src: '../../static/img/xs.png'
  321. },
  322. {
  323. name: '头寸',
  324. number: '1000.00',
  325. src: '../../static/img/tc.png'
  326. },
  327. ],
  328. year: 2022,
  329. selector: [2020, 2021, 2022],
  330. showYear: false,
  331. iconName1: 'arrow-up-fill',
  332. iconName2: 'arrow-up-fill',
  333. iconName3: 'arrow-up-fill',
  334. iconName4: 'arrow-up-fill',
  335. iconName5: 'arrow-up-fill',
  336. iconName6: 'arrow-up-fill',
  337. styles: {},
  338. modeClass: 'fade',
  339. isSHowContent1: true,
  340. isSHowContent2: true,
  341. isSHowContent3: true,
  342. isSHowContent4: true,
  343. isSHowContent5: true,
  344. isSHowContent6: true,
  345. chartData: {},
  346. chartData1: {},
  347. chartData3: {},
  348. chartData4: {},
  349. chartData5: {},
  350. chartData6: {},
  351. chartData7: {},
  352. chartData8: {},
  353. chartData9: {},
  354. opts: {
  355. enableScroll: true,
  356. color: ["#E84A55", "#22C572"],
  357. padding: [15, 15, 0, 15],
  358. dataPointShapeType: "hollow",
  359. legend: {},
  360. xAxis: {
  361. disableGrid: true,
  362. itemCount: 6,
  363. },
  364. yAxis: {
  365. gridType: "solid",
  366. data: [{
  367. // disabled: true,
  368. axisLine: false
  369. }]
  370. },
  371. extra: {
  372. area: {
  373. type: "straight",
  374. opacity: 0.2,
  375. addLine: true,
  376. width: 2,
  377. gradient: false
  378. }
  379. }
  380. },
  381. opts2: {
  382. color: ["#D2F3E2", "#22C572"],
  383. padding: [15, 30, 0, 5],
  384. legend: {
  385. fontSize: 12,
  386. },
  387. xAxis: {
  388. boundaryGap: "justify",
  389. disableGrid: false,
  390. min: 0,
  391. axisLine: false,
  392. max: 40
  393. },
  394. yAxis: {},
  395. extra: {
  396. bar: {
  397. type: "group",
  398. width: 30,
  399. meterBorde: 1,
  400. meterFillColor: "#FFFFFF",
  401. activeBgColor: "#000000",
  402. activeBgOpacity: 0.08,
  403. // linearType: "custom",
  404. barBorderCircle: true,
  405. seriesGap: 2,
  406. categoryGap: 6
  407. }
  408. }
  409. },
  410. opts3: {
  411. color: ["#8D9EE9"],
  412. padding: [15, 15, 0, 5],
  413. legend: {
  414. 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. goToPage(index) {
  624. uni.navigateTo({
  625. url: '/pages/user/contractLook/inventoryCost?searchMonth=' + this.seachMoth
  626. })
  627. },
  628. clickNav(index) {
  629. this.carIndex = index
  630. let _data = ""
  631. if (index == 0) {
  632. _data = 1
  633. } else if (index == 1) {
  634. _data = 7
  635. } else {
  636. _data = 30
  637. }
  638. this.$api.doRequest('get', '/biInfoController/getTranCountWai', {
  639. seachMoth: _data,
  640. }).then(res => {
  641. console.log(res.data)
  642. this.selectMakeDate7(res.data.data[0])
  643. })
  644. },
  645. yearClick(type) {
  646. if (type == 1) {
  647. this.year--
  648. } else {
  649. this.year++
  650. }
  651. this.$api.doRequest('get', '/biInfoController/profitAccount', {
  652. compId: uni.getStorageSync('pcUserInfo').compId,
  653. seachYear: this.year,
  654. // biViewInfoList: {weight:''}
  655. }).then(res => {
  656. console.log("例如切换", res)
  657. this.makeDate3(res.data[0])
  658. })
  659. },
  660. godetail(status) {
  661. var url = ''
  662. switch (status) {
  663. case 0:
  664. url = '/pages/dataReport/contractdetails/contractdetails'
  665. break;
  666. case 1:
  667. url = '/pages/dataReport/breakdownofprofit'
  668. break;
  669. case 2:
  670. url = '/pages/dataReport/costbreakdown?data=' + this.ym1 + '&type=' + this.index
  671. break;
  672. case 3:
  673. url = '/pages/dataReport/Inventoryentrydetails'
  674. break;
  675. }
  676. uni.navigateTo({
  677. url: url
  678. })
  679. },
  680. foldClcik(type, index) {
  681. switch (index) {
  682. case 1:
  683. this.isSHowContent1 = !this.isSHowContent1
  684. this.iconName1 = this.isSHowContent1 ? "arrow-up-fill" : 'arrow-down-fill'
  685. break;
  686. case 2:
  687. this.isSHowContent2 = !this.isSHowContent2
  688. this.iconName2 = this.isSHowContent2 ? "arrow-up-fill" : 'arrow-down-fill'
  689. break;
  690. case 3:
  691. this.isSHowContent3 = !this.isSHowContent3
  692. this.iconName3 = this.isSHowContent3 ? "arrow-up-fill" : 'arrow-down-fill'
  693. break;
  694. case 4:
  695. this.isSHowContent4 = !this.isSHowContent4
  696. this.iconName4 = this.isSHowContent4 ? "arrow-up-fill" : 'arrow-down-fill'
  697. break;
  698. case 5:
  699. this.isSHowContent5 = !this.isSHowContent5
  700. this.iconName5 = this.isSHowContent5 ? "arrow-up-fill" : 'arrow-down-fill'
  701. break;
  702. case 6:
  703. this.isSHowContent6 = !this.isSHowContent6
  704. this.iconName6 = this.isSHowContent6 ? "arrow-up-fill" : 'arrow-down-fill'
  705. break;
  706. }
  707. this.modeClass = type
  708. },
  709. getIndex(e) {
  710. console.log(e)
  711. // 点击图表
  712. if (this.textIndex == 1) {
  713. this.ym1 = this.chartList[0].biViewInfoList[e.currentIndex.index].name
  714. this.sr = this.chartList[0].biViewInfoList[e.currentIndex.index].weight
  715. this.zc = this.chartList[2].biViewInfoList[e.currentIndex.index].weight
  716. } else {
  717. this.ym1 = this.chartList[1].biViewInfoList[e.currentIndex.index].name
  718. this.sr = this.chartList[1].biViewInfoList[e.currentIndex.index].weight
  719. this.zc = this.chartList[3].biViewInfoList[e.currentIndex.index].weight
  720. }
  721. },
  722. makeDate1(val) {
  723. console.log("val", val)
  724. // 按月1
  725. let _categories = []
  726. let _price1 = []
  727. let _price2 = []
  728. if (this.textIndex == 1) {
  729. this.ym1 = val[0].biViewInfoList[val[0].biViewInfoList.length - 1].name
  730. this.sr = val[0].biViewInfoList[val[0].biViewInfoList.length - 1].weight
  731. this.zc = val[2].biViewInfoList[val[2].biViewInfoList.length - 1].weight
  732. for (let i = 0; i < val[0].biViewInfoList.length; i++) {
  733. _categories.push(val[0].biViewInfoList[i].name)
  734. _price1.push(val[0].biViewInfoList[i].weight)
  735. }
  736. for (let i = 0; i < val[2].biViewInfoList.length; i++) {
  737. _price2.push(val[2].biViewInfoList[i].weight)
  738. }
  739. } else {
  740. this.ym1 = val[1].biViewInfoList[val[1].biViewInfoList.length - 1].name
  741. this.sr = val[1].biViewInfoList[val[1].biViewInfoList.length - 1].weight
  742. this.zc = val[3].biViewInfoList[val[3].biViewInfoList.length - 1].weight
  743. for (let i = 0; i < val[1].biViewInfoList.length; i++) {
  744. _categories.push(val[1].biViewInfoList[i].name)
  745. _price1.push(val[1].biViewInfoList[i].weight)
  746. }
  747. for (let i = 0; i < val[3].biViewInfoList.length; i++) {
  748. _price2.push(val[3].biViewInfoList[i].weight)
  749. }
  750. }
  751. let res = {
  752. categories: _categories,
  753. series: [{
  754. name: "收入",
  755. data: _price1
  756. }, {
  757. name: "支出",
  758. data: _price2
  759. }
  760. ]
  761. };
  762. this.chartData = JSON.parse(JSON.stringify(res));
  763. },
  764. makeDate2(val) {
  765. let _categories = []
  766. let _count1 = []
  767. let _count2 = []
  768. for (let i = 0; i < val[4].biViewInfoList.length; i++) {
  769. _categories.push(val[4].biViewInfoList[i].name)
  770. _count1.push(val[4].biViewInfoList[i].weight)
  771. _count2.push(val[4].biViewInfoList[i].count ? val[4].biViewInfoList[i].count : 0)
  772. }
  773. // for (let i = 0; i < val[5].biViewInfoList.length; i++) {
  774. // _count2.push(val[5].biViewInfoList[i].weight)
  775. // }
  776. let res1 = {
  777. categories: _categories,
  778. series: [{
  779. name: this.index == 1 ? '过去12个月累计签订数量' : '本季累计签订合同数量',
  780. data: _count1,
  781. legendShape: "circle",
  782. },
  783. {
  784. name: this.index == 1 ? '当前执行中数量' : '本季执行中数量',
  785. data: _count2,
  786. legendShape: "circle"
  787. }
  788. ]
  789. };
  790. this.chartData1 = JSON.parse(JSON.stringify(res1));
  791. },
  792. makeDate3(val) {
  793. let _categorieslr = []
  794. let _countlr = []
  795. for (let i = 0; i < val[5].biViewInfoList.length; i++) {
  796. _categorieslr.push(val[5].biViewInfoList[i].name)
  797. _countlr.push(val[5].biViewInfoList[i].weight ? val[5].biViewInfoList[i].weight : 0)
  798. }
  799. //利润核算
  800. let res3 = {
  801. categories: _categorieslr,
  802. series: [{
  803. name: "利润金额",
  804. data: _countlr
  805. }]
  806. };
  807. this.chartData3 = JSON.parse(JSON.stringify(res3));
  808. },
  809. makeDate4(val) {
  810. let _categorieslr = []
  811. let _countlr = []
  812. for (let i = 0; i < val[8].biViewInfoList.length; i++) {
  813. _categorieslr.push(val[8].biViewInfoList[i].name)
  814. _countlr.push(Number(val[8].biViewInfoList[i].weight).toFixed(0) ? Number(val[8].biViewInfoList[i]
  815. .weight).toFixed(0) : 0)
  816. }
  817. let res4 = {
  818. categories: _categorieslr,
  819. series: [{
  820. name: '库存储量',
  821. data: _countlr
  822. }]
  823. };
  824. this.chartData4 = JSON.parse(JSON.stringify(res4));
  825. let _tc = Number(val[6].biViewInfoList[0].count) + Number(val[6].biViewInfoList[1].count) - Number(
  826. val[6].biViewInfoList[2].count)
  827. this.InventoryList = [{
  828. name: '合计储量',
  829. number: Number(val[6].biViewInfoList[0].count).toFixed(3),
  830. src: '../../static/img/cl.png'
  831. }, {
  832. name: '采购待执行',
  833. number: Number(val[6].biViewInfoList[1].count).toFixed(3),
  834. src: '../../static/img/cg.png'
  835. },
  836. {
  837. name: '销待执行售',
  838. number: Number(val[6].biViewInfoList[2].count).toFixed(3),
  839. src: '../../static/img/xs.png'
  840. },
  841. {
  842. name: '头寸',
  843. number: Number(_tc).toFixed(3),
  844. src: '../../static/img/tc.png'
  845. },
  846. ]
  847. },
  848. makeDate5(val) {
  849. let _categorieslr = []
  850. let _count = []
  851. for (let i = 0; i < val[7].biViewInfoList.length; i++) {
  852. _categorieslr.push(val[7].biViewInfoList[i].name)
  853. _count.push(val[7].biViewInfoList[i].count ? val[7].biViewInfoList[i].count : 0)
  854. }
  855. let res5 = {
  856. categories: _categorieslr,
  857. series: [{
  858. name: "利润金额",
  859. data: _count
  860. }]
  861. };
  862. this.chartData5 = JSON.parse(JSON.stringify(res5));
  863. this.averageCostList = val[9].biViewInfoList
  864. },
  865. makeDate6(val) {
  866. let _data = []
  867. for (let i = 0; i < val[10].biViewInfoList.length; i++) {
  868. let _obj = {
  869. name: val[10].biViewInfoList[i].name,
  870. value: val[10].biViewInfoList[i].weight
  871. }
  872. _data.push(_obj)
  873. }
  874. let res6 = {
  875. series: [{
  876. data: _data
  877. }]
  878. };
  879. this.chartData6 = JSON.parse(JSON.stringify(res6));
  880. },
  881. selectMakeDate7(val) {
  882. console.log(11)
  883. console.log(val)
  884. let _data = []
  885. for (let i = 0; i < val.biViewInfoList.length; i++) {
  886. let _obj = {
  887. name: val.biViewInfoList[i].name,
  888. value: Number(val.biViewInfoList[i].count)
  889. }
  890. _data.push(_obj)
  891. }
  892. console.log(_data)
  893. let res7 = {
  894. series: [{
  895. data: _data
  896. }]
  897. };
  898. this.$forceUpdate()
  899. this.chartData7 = JSON.parse(JSON.stringify(res7));
  900. },
  901. makeDate7(val) {
  902. let _data = []
  903. for (let i = 0; i < val[11].biViewInfoList.length; i++) {
  904. let _obj = {
  905. name: val[11].biViewInfoList[i].name,
  906. value: Number(val[11].biViewInfoList[i].count)
  907. }
  908. _data.push(_obj)
  909. }
  910. console.log(_data)
  911. let res7 = {
  912. series: [{
  913. data: _data
  914. }]
  915. };
  916. this.chartData7 = JSON.parse(JSON.stringify(res7));
  917. },
  918. makeDate8(val) {
  919. let _categories = []
  920. let _data = []
  921. let _categories1 = []
  922. let _data1 = []
  923. this.appTotal = val[12].count
  924. this.lmTotal = val[13].count
  925. for (let i = 0; i < val[12].biViewInfoList.length; i++) {
  926. _categories.push(val[12].biViewInfoList[i].name)
  927. _data.push(val[12].biViewInfoList[i].weight)
  928. }
  929. for (let i = 0; i < val[13].biViewInfoList.length; i++) {
  930. _categories1.push(val[13].biViewInfoList[i].name)
  931. _data1.push(val[12].biViewInfoList[i].weight)
  932. }
  933. let res8 = {
  934. categories: _categories,
  935. series: [{
  936. name: "成交量A",
  937. data: _data
  938. }]
  939. }
  940. let res9 = {
  941. categories: _categories1,
  942. series: [{
  943. name: "成交量A",
  944. data: _data1
  945. }]
  946. }
  947. this.chartData8 = JSON.parse(JSON.stringify(res8))
  948. this.chartData9 = JSON.parse(JSON.stringify(res9))
  949. },
  950. getServerData() {
  951. uni.showLoading({
  952. title: "加载中",
  953. mask: true
  954. })
  955. this.$api.doRequest('get', '/biInfoController/selectPhoneBiInfo?compId=' + uni.getStorageSync(
  956. 'pcUserInfo')
  957. .compId + '&seachMoth=' + this.seachMoth + '&seachYear=' + this.seachYear).then(
  958. res => {
  959. console.log("数据报表", res)
  960. this.chartList = res.data.data
  961. // 收支核算数据处理
  962. this.makeDate1(res.data.data)
  963. //合同数据
  964. this.makeDate2(res.data.data)
  965. //利润核算
  966. this.makeDate3(res.data.data)
  967. //库存储量
  968. this.makeDate4(res.data.data)
  969. //档期货值
  970. this.makeDate5(res.data.data)
  971. //今日入库
  972. this.makeDate6(res.data.data)
  973. //在途数据
  974. this.makeDate7(res.data.data)
  975. //APP注册
  976. this.makeDate8(res.data.data)
  977. uni.hideLoading()
  978. })
  979. //模拟从服务器获取数据时的延时
  980. setTimeout(() => {
  981. //模拟服务器返回数据,如果数据格式和标准格式不同,需自行按下面的格式拼接
  982. // let res = {
  983. // categories: ["2016", "2017", "2018", "2019", "2020", "2021", "2022", "2023"],
  984. // series: [{
  985. // name: "收入",
  986. // data: [70, 40, 65, 100, 44, 68, 90, 240]
  987. // }, {
  988. // name: "支出",
  989. // data: [35, 8, 25, 37, 4, 20, 56, 30]
  990. // }
  991. // ]
  992. // };
  993. // this.chartData = JSON.parse(JSON.stringify(res));
  994. // let res1 = {
  995. // categories: ["2016", "2017", "2018", "2019", "2020", "2021"],
  996. // series: [{
  997. // name: this.index == 1 ? '过去12个月累计签订数量' : '本季累计签订合同数量',
  998. // data: [35, 36, 31, 33, 13, 34],
  999. // legendShape: "circle",
  1000. // },
  1001. // {
  1002. // name: this.index == 1 ? '当前执行中数量' : '本季执行中数量',
  1003. // data: [18, 27, 21, 24, 6, 28],
  1004. // legendShape: "circle"
  1005. // }
  1006. // ]
  1007. // };
  1008. // this.chartData1 = JSON.parse(JSON.stringify(res1));
  1009. // let res3 = {
  1010. // categories: ["销售", "采购", "收购", "代收", "代储"],
  1011. // series: [{
  1012. // name: "利润金额",
  1013. // data: [35, 36, 31, 33, 13]
  1014. // }]
  1015. // };
  1016. // this.chartData3 = JSON.parse(JSON.stringify(res3));
  1017. // let res4 = {
  1018. // categories: ["小麦", "高粱(潮粮)", "高粱", "玉米(潮粮)", "玉米"],
  1019. // series: [{
  1020. // name: '库存储量',
  1021. // data: [{
  1022. // value: 35,
  1023. // color: "#FFBB6E"
  1024. // },
  1025. // {
  1026. // value: 36,
  1027. // color: "#8D9EE9"
  1028. // }, {
  1029. // value: 31,
  1030. // color: "#FF8B95"
  1031. // }, {
  1032. // value: 33,
  1033. // color: "#38CA80"
  1034. // },
  1035. // {
  1036. // value: 13,
  1037. // color: "#FFDD85"
  1038. // }
  1039. // ]
  1040. // }]
  1041. // };
  1042. // this.chartData4 = JSON.parse(JSON.stringify(res4));
  1043. // let res5 = {
  1044. // categories: ["小麦", "高粱(潮粮)", "高粱", "玉米(潮粮)", "玉米"],
  1045. // series: [{
  1046. // name: "利润金额",
  1047. // data: [{
  1048. // value: 35,
  1049. // color: "#FFBB6E"
  1050. // },
  1051. // {
  1052. // value: 36,
  1053. // color: "#8D9EE9"
  1054. // }, {
  1055. // value: 31,
  1056. // color: "#FF8B95"
  1057. // }, {
  1058. // value: 33,
  1059. // color: "#38CA80"
  1060. // },
  1061. // {
  1062. // value: 13,
  1063. // color: "#FFDD85"
  1064. // }
  1065. // ]
  1066. // }]
  1067. // };
  1068. // this.chartData5 = JSON.parse(JSON.stringify(res5));
  1069. // let res6 = {
  1070. // series: [{
  1071. // data: [{
  1072. // "name": "一班",
  1073. // "value": 50
  1074. // }, {
  1075. // "name": "二班",
  1076. // "value": 30
  1077. // }, {
  1078. // "name": "三班",
  1079. // "value": 20
  1080. // }, {
  1081. // "name": "四班",
  1082. // "value": 18
  1083. // }, {
  1084. // "name": "五班",
  1085. // "value": 8
  1086. // }]
  1087. // }]
  1088. // };
  1089. // this.chartData6 = JSON.parse(JSON.stringify(res6));
  1090. // let res7 = {
  1091. // series: [{
  1092. // data: [{
  1093. // "name": "一班",
  1094. // "value": 50
  1095. // }, {
  1096. // "name": "二班",
  1097. // "value": 30
  1098. // }, {
  1099. // "name": "三班",
  1100. // "value": 20
  1101. // }, {
  1102. // "name": "四班",
  1103. // "value": 18
  1104. // }, {
  1105. // "name": "五班",
  1106. // "value": 8
  1107. // }]
  1108. // }]
  1109. // };
  1110. // this.chartData7 = JSON.parse(JSON.stringify(res7));
  1111. // let res8 = {
  1112. // categories: ["2016", "2017", "2018", "2019", "2020", "2021"],
  1113. // series: [{
  1114. // name: "成交量A",
  1115. // data: [35, 8, 25, 37, 4, 20]
  1116. // }
  1117. // ]
  1118. // };
  1119. // this.chartData8 = JSON.parse(JSON.stringify(res8));
  1120. // let res9 = {
  1121. // categories: ["2016", "2017", "2018", "2019", "2020", "2021"],
  1122. // series: [{
  1123. // name: "成交量A",
  1124. // data: [35, 8, 25, 37, 4, 20]
  1125. // },
  1126. // {
  1127. // name: "成交量B",
  1128. // data: [70, 40, 65, 100, 44, 68]
  1129. // },
  1130. // {
  1131. // name: "成交量C",
  1132. // data: [100, 80, 95, 150, 112, 132]
  1133. // }
  1134. // ]
  1135. // };
  1136. // this.chartData9 = JSON.parse(JSON.stringify(res9));
  1137. },
  1138. 500);
  1139. },
  1140. back() {
  1141. uni.navigateBack()
  1142. },
  1143. navClick(val) {
  1144. this.index = val
  1145. if (val == 1) {
  1146. this.seachMoth = ''
  1147. } else {
  1148. this.seachMoth = '2022-10-10'
  1149. }
  1150. this.getServerData();
  1151. },
  1152. accounting(val) {
  1153. this.textIndex = val
  1154. if (val == 1) {
  1155. console.log("按月")
  1156. } else {
  1157. console.log("按年")
  1158. }
  1159. this.makeDate1(this.chartList)
  1160. }
  1161. }
  1162. }
  1163. </script>
  1164. <style scoped lang="scss">
  1165. .flex {
  1166. display: flex;
  1167. }
  1168. .alc {
  1169. align-items: center;
  1170. }
  1171. .jcse {
  1172. justify-content: space-evenly;
  1173. }
  1174. .jcsb {
  1175. justify-content: space-between;
  1176. }
  1177. .mtb40 {
  1178. margin: 40rpx 0;
  1179. }
  1180. .title-lv2 {
  1181. font-weight: bold;
  1182. color: #333333;
  1183. }
  1184. .status_bar {
  1185. height: var(--status-bar-height);
  1186. width: 100%;
  1187. }
  1188. .top-nav {
  1189. display: flex;
  1190. align-items: center;
  1191. justify-content: space-evenly;
  1192. position: relative;
  1193. }
  1194. .back {
  1195. position: absolute;
  1196. left: 20rpx;
  1197. top: 0;
  1198. bottom: 0;
  1199. margin: auto;
  1200. }
  1201. .top-nav {
  1202. font-size: 36rpx;
  1203. background: white;
  1204. padding: 20rpx;
  1205. }
  1206. .nav-active {
  1207. font-weight: 700;
  1208. position: relative;
  1209. }
  1210. .nav-active:after {
  1211. content: "";
  1212. position: absolute;
  1213. bottom: -20rpx;
  1214. left: 0;
  1215. right: 0;
  1216. margin: auto;
  1217. height: 10rpx;
  1218. width: 60%;
  1219. background: #262626;
  1220. border-radius: 40rpx;
  1221. }
  1222. .content-item {
  1223. background: white;
  1224. margin: 20rpx 20rpx 0 20rpx;
  1225. border-radius: 20rpx;
  1226. padding: 20rpx;
  1227. box-sizing: border-box;
  1228. }
  1229. .title {
  1230. margin-bottom: 22rpx;
  1231. font-size: 32rpx;
  1232. font-weight: 700;
  1233. color: #343434;
  1234. }
  1235. .right-btn {
  1236. width: 120rpx;
  1237. height: 42rpx;
  1238. display: flex;
  1239. align-items: center;
  1240. justify-content: center;
  1241. background: #F1F1F1;
  1242. border-radius: 30px;
  1243. font-size: 22rpx;
  1244. color: #707575;
  1245. }
  1246. .content1 {
  1247. .content1-wrap {}
  1248. .row1 {
  1249. display: flex;
  1250. justify-content: space-between;
  1251. align-items: center;
  1252. .left {
  1253. color: #868686;
  1254. }
  1255. .text {
  1256. margin-left: 38rpx;
  1257. color: #2E303A;
  1258. }
  1259. .text-active {
  1260. // margin-left: 38rpx;
  1261. color: #FFF;
  1262. background: #2E303A;
  1263. padding: 11rpx 26rpx;
  1264. border-radius: 10rpx;
  1265. }
  1266. }
  1267. .row2 {
  1268. display: flex;
  1269. flex-direction: column;
  1270. align-items: center;
  1271. .text {
  1272. color: #636363;
  1273. margin-bottom: 10rpx
  1274. }
  1275. .price {
  1276. font-size: 56rpx;
  1277. font-weight: 700;
  1278. color: #D79C58;
  1279. }
  1280. }
  1281. .row3 {
  1282. display: flex;
  1283. justify-content: space-between;
  1284. margin-top: 27rpx;
  1285. align-items: center;
  1286. .center {
  1287. width: 2px;
  1288. height: 61rpx;
  1289. border: 2rpx solid #EEEEEE;
  1290. }
  1291. .left,
  1292. .right {
  1293. // background: green;
  1294. width: calc(50% - 1px);
  1295. text-align: center;
  1296. .text {
  1297. color: #636363
  1298. }
  1299. .number {
  1300. margin-top: 12rpx;
  1301. font-size: 34rpx;
  1302. font-weight: 700;
  1303. color: #343434;
  1304. }
  1305. }
  1306. }
  1307. .row4 {
  1308. margin-top: 20rpx;
  1309. }
  1310. }
  1311. .content2 {
  1312. .row1 {}
  1313. .row2 {
  1314. color: #707575;
  1315. font-size: 22rpx;
  1316. .color1 {
  1317. width: 16rpx;
  1318. height: 12rpx;
  1319. background: #D2F3E2;
  1320. border-radius: 7rpx;
  1321. margin-right: 10rpx;
  1322. }
  1323. .color2 {
  1324. width: 16rpx;
  1325. height: 12rpx;
  1326. background: #2CC778;
  1327. border-radius: 7rpx;
  1328. margin-right: 10rpx;
  1329. }
  1330. }
  1331. .row5 {
  1332. display: flex;
  1333. justify-content: space-between;
  1334. color: #9E9E9E;
  1335. .left {}
  1336. }
  1337. }
  1338. .content3 {
  1339. .right {
  1340. color: #9E9E9E;
  1341. }
  1342. .row3 {
  1343. padding: 10rpx 25rpx 30rpx 25rpx;
  1344. border-radius: 15rpx;
  1345. margin-top: 20rpx;
  1346. background: #FAFAFA;
  1347. .list-item {
  1348. margin-top: 20rpx;
  1349. .number {
  1350. font-weight: 700;
  1351. }
  1352. }
  1353. }
  1354. .row7 {
  1355. .list-item {
  1356. display: inline-block;
  1357. padding: 20rpx;
  1358. box-sizing: border-box;
  1359. background: #FAFAFA;
  1360. width: calc(50% - 40rpx);
  1361. margin: 20rpx;
  1362. border-radius: 8rpx;
  1363. }
  1364. }
  1365. }
  1366. .content5 {
  1367. .days-nav {
  1368. display: flex;
  1369. justify-content: space-evenly;
  1370. }
  1371. }
  1372. .content6 {
  1373. .row1 {
  1374. margin: 20rpx 0;
  1375. }
  1376. }
  1377. .days-nav {
  1378. background: red;
  1379. margin: 20rpx;
  1380. background: #F5F6FA;
  1381. border-radius: 8rpx;
  1382. padding: 4rpx 0;
  1383. .item {
  1384. width: 33%;
  1385. display: flex;
  1386. justify-content: center;
  1387. padding: 6px 0;
  1388. }
  1389. .item-active {
  1390. background: #fff;
  1391. }
  1392. }
  1393. </style>