newReport.vue 47 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150115111521153115411551156115711581159116011611162116311641165116611671168116911701171117211731174117511761177117811791180118111821183118411851186118711881189119011911192119311941195119611971198119912001201120212031204120512061207120812091210121112121213121412151216121712181219122012211222122312241225122612271228122912301231123212331234123512361237123812391240124112421243124412451246124712481249125012511252125312541255125612571258125912601261126212631264126512661267126812691270127112721273127412751276127712781279128012811282128312841285128612871288128912901291129212931294129512961297129812991300130113021303130413051306130713081309131013111312131313141315131613171318131913201321132213231324132513261327132813291330133113321333133413351336133713381339134013411342134313441345134613471348134913501351135213531354135513561357135813591360136113621363136413651366136713681369137013711372137313741375137613771378137913801381138213831384138513861387138813891390139113921393139413951396139713981399140014011402140314041405140614071408140914101411141214131414141514161417141814191420142114221423142414251426142714281429143014311432143314341435143614371438143914401441144214431444144514461447144814491450145114521453145414551456145714581459146014611462146314641465146614671468146914701471147214731474147514761477147814791480148114821483148414851486148714881489149014911492149314941495149614971498149915001501150215031504150515061507150815091510151115121513151415151516151715181519152015211522152315241525152615271528152915301531153215331534153515361537153815391540154115421543154415451546154715481549155015511552155315541555155615571558155915601561156215631564156515661567156815691570157115721573157415751576157715781579158015811582158315841585158615871588158915901591159215931594159515961597159815991600160116021603160416051606160716081609161016111612161316141615161616171618161916201621162216231624162516261627162816291630163116321633163416351636163716381639164016411642164316441645164616471648164916501651165216531654165516561657165816591660166116621663166416651666166716681669167016711672167316741675167616771678167916801681168216831684168516861687168816891690169116921693169416951696169716981699170017011702170317041705170617071708170917101711171217131714171517161717171817191720172117221723172417251726172717281729173017311732173317341735173617371738173917401741174217431744174517461747174817491750175117521753175417551756175717581759176017611762176317641765176617671768176917701771177217731774177517761777177817791780178117821783178417851786178717881789179017911792179317941795179617971798179918001801180218031804180518061807180818091810181118121813181418151816181718181819182018211822182318241825182618271828182918301831183218331834183518361837183818391840184118421843184418451846184718481849185018511852185318541855185618571858185918601861186218631864186518661867186818691870187118721873187418751876187718781879188018811882188318841885188618871888188918901891189218931894189518961897189818991900190119021903190419051906190719081909191019111912191319141915191619171918191919201921192219231924192519261927192819291930193119321933193419351936193719381939194019411942194319441945194619471948194919501951195219531954195519561957195819591960196119621963196419651966196719681969197019711972197319741975197619771978197919801981198219831984198519861987198819891990199119921993199419951996
  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="right" :class="index==2?'nav-active':''" @click="navClick(2)">
  7. 新季
  8. </view>
  9. <view class="left" :class="index==1?'nav-active':''" @click="navClick(1)">
  10. 全部
  11. </view>
  12. </view>
  13. <view class="content1 content-item">
  14. <view class="title">
  15. 收支核算
  16. </view>
  17. <uni-transition ref="ani" custom-class="transition" :mode-class="modeClass" :styles="styles"
  18. :show="isSHowContent1">
  19. <u-line color="#EEEEEE" />
  20. <view class="row1 mtb40">
  21. <view class="left">
  22. <view class="">
  23. {{ym1Change}}
  24. </view>
  25. <view class="" style="font-size: 12px; color:#9E9E9E; margin-top: 10rpx;">
  26. 单位:万元
  27. </view>
  28. </view>
  29. <view class="right" v-if="index!=2">
  30. <text class="text" :class="textIndex==1?'text-active':''" @click="accounting(1)">
  31. 按月
  32. </text>
  33. <text class="text" :class="textIndex==2?'text-active':''" @click="accounting(2)">按年</text>
  34. </view>
  35. </view>
  36. <view class="row2" @click='godetail(2)'>
  37. <view class="text">
  38. 收入(万元)
  39. </view>
  40. <view class="price">
  41. {{sr?Number(sr).toFixed(2):0}}
  42. </view>
  43. </view>
  44. <view class="row3" @click='godetail(2)'>
  45. <view class="left">
  46. <view class="text">
  47. 支出(万元)
  48. </view>
  49. <view class="number">
  50. {{zc?Number(zc).toFixed(2):0}}
  51. </view>
  52. </view>
  53. <view class="center">
  54. </view>
  55. <view class="right">
  56. <view class="text">
  57. 差额(万元)
  58. </view>
  59. <view class="number">
  60. {{Number(sr-zc).toFixed(2)}}
  61. </view>
  62. </view>
  63. </view>
  64. <view class="row5 flex alc">
  65. <view class="left">
  66. <text class="point-left flex alc"></text>收入(万元):<text
  67. class="text-left">{{Number(sr).toFixed(2)}}</text>
  68. <!-- <text class="point-left flex alc"></text>收入(万元):<text class="text-left">2000.00</text> -->
  69. </view>
  70. <view class="right">
  71. <text class="point-right"></text>支出(万元):<text
  72. class="text-right">{{Number(zc).toFixed(2)}}</text>
  73. <!-- <text class="point-left flex alc"></text>收入(万元):<text class="text-left">2000.00</text> -->
  74. </view>
  75. </view>
  76. <view class="row4">
  77. <qiun-data-charts type="area" :opts="opts" :chartData="chartData" :ontouch="true"
  78. @getIndex="getIndex" />
  79. </view>
  80. </uni-transition>
  81. <view class="zd flex" @click="foldClcik('fade',1)">
  82. {{this.isSHowContent1?'点击收起':'点击展开'}}
  83. <u-icon :name="iconName1" size="30" style="margin-left: 10rpx;">
  84. </u-icon>
  85. </view>
  86. </view>
  87. <view class="content2 content-item">
  88. <view class="title">
  89. 合同数据
  90. </view>
  91. <uni-transition ref="ani" custom-class="transition" :mode-class="modeClass" :styles="styles"
  92. :show="isSHowContent2">
  93. <u-line color="#EEEEEE" />
  94. <view class="row1 flex jcsb" style="margin-top: 40rpx;">
  95. <view class="left title-lv2">
  96. 数量统计
  97. </view>
  98. <view @click='godetail(0)' class="right-btn">
  99. 合同明细
  100. </view>
  101. </view>
  102. <!-- <view class="row2 flex jcse">
  103. <view class="left flex alc">
  104. <view class="color1"></view>
  105. <text class="text">{{index==1?'过去12个月累计签订数量':'本季累计签订合同数量'}}</text>
  106. </view>
  107. <view class="right flex alc">
  108. <view class="color2"></view>
  109. <text class="text">{{index==1?'当前执行中数量':'本季执行中数量'}}</text>
  110. </view>
  111. </view> -->
  112. <view class="row3">
  113. <qiun-data-charts type="bar" :opts="opts2" :chartData="chartData1" />
  114. </view>
  115. <view class="row4 flex jcsb mtb40">
  116. <view class="left title-lv2">
  117. 利润核算
  118. </view>
  119. <view @click='godetail(1)' class="right-btn">
  120. 利润明细
  121. </view>
  122. </view>
  123. <view class="row5">
  124. <view class="left flex">
  125. <view class="" v-if="index==1">
  126. <u-icon name="arrow-left" size="26" style="margin-right: 10rpx;" color="#969696"
  127. @click="yearClick('1')">
  128. </u-icon>
  129. <text @click="showYear=true">{{year}}年</text>
  130. <u-icon name="arrow-right" size="26" style="margin-left: 10rpx;"
  131. :color="nowYear!=year?'#969696':'#DBDBDB'" @click="yearClick('2')" v-if="nowYear!=year">
  132. </u-icon>
  133. <u-icon name="arrow-right" size="26" style="margin-left: 10rpx;"
  134. :color="nowYear!=year?'#969696':'#DBDBDB'" v-if="nowYear==year">
  135. </u-icon>
  136. </view>
  137. <view class="" v-else>
  138. 新季利润
  139. </view>
  140. </view>
  141. <view class="right">
  142. 单位:元
  143. </view>
  144. </view>
  145. <view class="row6" v-if="isHaveData3">
  146. <qiun-data-charts type="column" :opts="opts3" :chartData="chartData3" />
  147. </view>
  148. </uni-transition>
  149. <view class="zd flex" @click="foldClcik('fade',2)">
  150. {{this.isSHowContent2?'点击收起':'点击展开'}}
  151. <u-icon :name="iconName2" size="30" style="margin-left: 10rpx;">
  152. </u-icon>
  153. </view>
  154. </view>
  155. <view class="content3 content-item">
  156. <view class="title flex jcsb">
  157. <view class="">
  158. 仓储数据
  159. </view>
  160. <view @click='goToPage(5)' class="right-btn">
  161. 库存明细
  162. </view>
  163. </view>
  164. <uni-transition ref="ani" custom-class="transition" :mode-class="modeClass" :styles="styles"
  165. :show="isSHowContent3">
  166. <u-line color="#EEEEEE" />
  167. <view class="row1 flex jcsb mtb40">
  168. <view class="left title-lv2">
  169. 库存储量
  170. </view>
  171. <view class="right">
  172. 单位:吨
  173. </view>
  174. </view>
  175. <view class="row2">
  176. <view class="" v-for="(item,index) in clList">
  177. <view class="name">
  178. {{item.name}}
  179. </view>
  180. <view class="bottom flex alc">
  181. <u-line-progress :percent="item.percent" :active-color="color4(index)" :show-percent='false'
  182. class='left' height='12'>
  183. </u-line-progress>
  184. <view class="weight">
  185. {{item.weight}}
  186. </view>
  187. </view>
  188. </view>
  189. <!-- <qiun-data-charts type="bar" :opts="opts4" :chartData="chartData4" :ontouch="true" /> -->
  190. </view>
  191. <view class="row3">
  192. <view class="list-item flex jcsb" v-for="(item,index) in InventoryList">
  193. <view class="flex alc">
  194. <image :src="item.src" mode="widthFix" style="width: 40rpx;margin-right: 20rpx;"></image>
  195. <text style="color:#707575;">{{item.name}}</text>
  196. </view>
  197. <view class="number">
  198. {{item.number}}
  199. </view>
  200. </view>
  201. </view>
  202. <view class="row5 flex jcsb mtb40">
  203. <view class="left title-lv2">
  204. 当期货值
  205. </view>
  206. <view class="right">
  207. 单位:万元
  208. </view>
  209. </view>
  210. <view class="row6">
  211. <qiun-data-charts type="column" :opts="opts5" :chartData="chartData5" :ontouch="true" />
  212. </view>
  213. <view class="row7">
  214. <view class="left title-lv2" style="margin: 30rpx;">
  215. 平均成本
  216. </view>
  217. <view class="list-item" v-for="item in averageCostList">
  218. <view class="flex jcsb alc">
  219. <view class="left" style="color: #7A7A7A;">
  220. {{item.name}}
  221. </view>
  222. <view class="">
  223. {{Number(item.result).toFixed(0)}}
  224. </view>
  225. </view>
  226. </view>
  227. </view>
  228. </uni-transition>
  229. <view class="zd flex" @click="foldClcik('fade',3)">
  230. {{this.isSHowContent3?'点击收起':'点击展开'}}
  231. <u-icon :name="iconName3" size="30" style="margin-left: 10rpx;">
  232. </u-icon>
  233. </view>
  234. </view>
  235. <view class="content4 content-item">
  236. <view class="title flex jcsb">
  237. <view class="">
  238. 今日入库
  239. </view>
  240. <view @click='godetail(3)' class="right-btn">
  241. 入库明细
  242. </view>
  243. </view>
  244. <uni-transition ref="ani" custom-class="transition" :mode-class="modeClass" :styles="styles"
  245. :show="isSHowContent4">
  246. <u-line color="#EEEEEE" />
  247. <view class="" style="color: #9E9E9E;margin: 30rpx 0 0 30rpx; font-size: 12px;">
  248. 单位:吨
  249. </view>
  250. <view class="flex alc">
  251. <view class="" style="width:40%;height: 160px;">
  252. <qiun-data-charts type="ring" :opts="opts6" :chartData="chartData6" class='opts6' />
  253. </view>
  254. <view class="zt-right">
  255. <view class="flex jcsb alc" v-for="item in rkList" style="font-weight: 700;">
  256. <view class="left">
  257. <text :style="item.style"></text>{{item.name}}
  258. </view>
  259. <view class="right">
  260. {{Number(item.value).toFixed(2)}}
  261. </view>
  262. </view>
  263. </view>
  264. </view>
  265. </uni-transition>
  266. <view class="zd flex" @click="foldClcik('fade',4)">
  267. {{this.isSHowContent4?'点击收起':'点击展开'}}
  268. <u-icon :name="iconName4" size="30" style="margin-left: 10rpx;">
  269. </u-icon>
  270. </view>
  271. </view>
  272. <view class="content5 content-item">
  273. <view class="title">
  274. 在途数据
  275. </view>
  276. <uni-transition ref="ani" custom-class="transition" :mode-class="modeClass" :styles="styles"
  277. :show="isSHowContent5">
  278. <u-line color="#EEEEEE" />
  279. <view class="row1 days-nav">
  280. <view class="item" :class="carIndex==index?'item-active':''" v-for="(item, index) in dayList"
  281. @click="clickNav(index)">
  282. {{item}}
  283. </view>
  284. </view>
  285. <view class="flex alc">
  286. <view class="" style="width:40%;height: 160px;">
  287. <qiun-data-charts type="ring" :opts="opts7" :chartData="chartData7" />
  288. </view>
  289. <view class="zt-right">
  290. <view class="flex jcsb alc" v-for="item in ztList" style="font-weight: 700;">
  291. <view class="left">
  292. <text :style="item.style"></text>{{item.name}}
  293. </view>
  294. <view class="right">
  295. {{item.value}}
  296. </view>
  297. </view>
  298. </view>
  299. </view>
  300. </uni-transition>
  301. <view class="zd flex" @click="foldClcik('fade',5)">
  302. {{this.isSHowContent5?'点击收起':'点击展开'}}
  303. <u-icon :name="iconName5" size="30" style="margin-left: 10rpx;">
  304. </u-icon>
  305. </view>
  306. </view>
  307. <view class="content6 content-item">
  308. <view class="title">
  309. 用户增长
  310. </view>
  311. <uni-transition ref="ani" custom-class="transition" :mode-class="modeClass" :styles="styles"
  312. :show="isSHowContent6">
  313. <u-line color="#EEEEEE" />
  314. <view class="row1 flex jcsb">
  315. <view class="left">
  316. app注册
  317. </view>
  318. <view class="right">
  319. <text>合计:</text>
  320. <text style="color: #EC6666;">{{appTotal}}</text>
  321. <text>人</text>
  322. </view>
  323. </view>
  324. <view class="row2">
  325. <qiun-data-charts type="area" :opts="opts8" :chartData="chartData8" />
  326. </view>
  327. <view class="row1 flex jcsb">
  328. <view class="left">
  329. 粮脉入驻
  330. </view>
  331. <view class="right">
  332. <text>合计:</text>
  333. <text style="color: #22C572;">{{lmTotal}}</text>
  334. <text>人</text>
  335. </view>
  336. </view>
  337. <view class="row2">
  338. <qiun-data-charts type="area" :opts="opts9" :chartData="chartData9" />
  339. </view>
  340. </uni-transition>
  341. <view class="zd flex" @click="foldClcik('fade',6)">
  342. {{this.isSHowContent6?'点击收起':'点击展开'}}
  343. <u-icon :name="iconName6" size="30" style="margin-left: 10rpx;">
  344. </u-icon>
  345. </view>
  346. </view>
  347. <u-picker v-model="showYear" mode="selector" :range="selector" :default-selector="[2]"></u-picker>
  348. </view>
  349. </template>
  350. <script>
  351. export default {
  352. data() {
  353. return {
  354. rkList: [],
  355. ztList: [],
  356. ztColor: ['#38CA80', '#8D9EE9', '#FFBB6E'],
  357. color: ['#FFBB6E', '#8D9EE9', '#FF8B95', '#38CA80', '#FFDD85', "#1890FF", "#91CB74", "#FAC858", "#EE6666",
  358. "#73C0DE", "#3CA272", "#FC8452", "#9A60B4",
  359. "#ea7ccc"
  360. ],
  361. clList: [],
  362. isHaveData3: true,
  363. val: 1000,
  364. carIndex: 0,
  365. appTotal: '',
  366. lmTotal: '',
  367. ym1: '',
  368. ym1Change: '',
  369. sr: '',
  370. zc: '',
  371. seachYear: '',
  372. seachMoth: '2022-10-10',
  373. dayList: ['1天', '7天', '30天'],
  374. averageCostList: [{
  375. name: '玉米',
  376. number: '2000.00'
  377. },
  378. {
  379. name: '玉米(潮粮)',
  380. number: '2000.00'
  381. },
  382. {
  383. name: '高粱',
  384. number: '2000.00'
  385. },
  386. {
  387. name: '高粱(潮粮)',
  388. number: '2000.00'
  389. },
  390. {
  391. name: '小麦',
  392. number: '2000.00'
  393. },
  394. {
  395. name: '大豆',
  396. number: '2000.00'
  397. },
  398. ],
  399. InventoryList: [{
  400. name: '合计储量',
  401. number: '1000.00',
  402. src: '../../static/img/cl.png'
  403. }, {
  404. name: '采购待执行',
  405. number: '1000.00',
  406. src: '../../static/img/cg.png'
  407. },
  408. {
  409. name: '销待执行售',
  410. number: '1000.00',
  411. src: '../../static/img/xs.png'
  412. },
  413. {
  414. name: '头寸',
  415. number: '1000.00',
  416. src: '../../static/img/tc.png'
  417. },
  418. ],
  419. year: 2022,
  420. selector: [2020, 2021, 2022],
  421. showYear: false,
  422. iconName1: 'arrow-up',
  423. iconName2: 'arrow-up',
  424. iconName3: 'arrow-up',
  425. iconName4: 'arrow-up',
  426. iconName5: 'arrow-up',
  427. iconName6: 'arrow-up',
  428. styles: {},
  429. modeClass: 'fade',
  430. isSHowContent1: true,
  431. isSHowContent2: true,
  432. isSHowContent3: true,
  433. isSHowContent4: true,
  434. isSHowContent5: true,
  435. isSHowContent6: true,
  436. chartData: {},
  437. chartData1: {},
  438. chartData3: {},
  439. chartData4: {},
  440. chartData5: {},
  441. chartData6: {},
  442. chartData7: {},
  443. chartData8: {},
  444. chartData9: {},
  445. opts: {
  446. enableScroll: true,
  447. color: ["#E84A55", "#22C572"],
  448. padding: [15, 15, 0, 15],
  449. dataPointShapeType: "hollow",
  450. legend: {
  451. show: false
  452. },
  453. xAxis: {
  454. gridType: "dash",
  455. disableGrid: true,
  456. itemCount: 6,
  457. },
  458. yAxis: {
  459. // gridType: "dash",
  460. gridType: 'solid',
  461. gridColor: "#E9E9E9",
  462. splitNumber: 5,
  463. data: [{
  464. // disabled: true,
  465. axisLine: false,
  466. fontColor: "#BEBEBE",
  467. }],
  468. },
  469. extra: {
  470. area: {
  471. type: "straight",
  472. opacity: 0.3,
  473. addLine: true,
  474. width: 2,
  475. gradient: true
  476. },
  477. tooltip: {
  478. showBox: false,
  479. showArrow: true,
  480. showCategory: false,
  481. borderWidth: 0,
  482. borderRadius: 0,
  483. borderColor: "#000000",
  484. borderOpacity: 0.7,
  485. bgColor: "#000000",
  486. bgOpacity: 0.7,
  487. gridType: "dash",
  488. dashLength: 4,
  489. gridColor: "#E9E9E9",
  490. fontColor: "#FFFFFF",
  491. splitLine: true,
  492. horizentalLine: false,
  493. xAxisLabel: false,
  494. yAxisLabel: false,
  495. labelBgColor: "#FFFFFF",
  496. labelBgOpacity: 0.7,
  497. labelFontColor: "#666666"
  498. }
  499. },
  500. },
  501. opts2: {
  502. color: ["#D2F3E2", "#22C572"],
  503. padding: [15, 30, 0, 5],
  504. legend: {
  505. fontSize: 12,
  506. position: 'top',
  507. itemGap: 10,
  508. margin: 30
  509. },
  510. xAxis: {
  511. boundaryGap: "justify",
  512. disableGrid: false,
  513. axisLine: false,
  514. gridType: "dash",
  515. dashLength: 10,
  516. },
  517. yAxis: {
  518. },
  519. extra: {
  520. // tooltip: {
  521. // showBox: false,
  522. // },
  523. bar: {
  524. type: "group",
  525. width: 10,
  526. meterBorde: 1,
  527. meterFillColor: "#FFFFFF",
  528. activeBgColor: "#000000",
  529. activeBgOpacity: 0.08,
  530. // linearType: "custom",
  531. barBorderCircle: true,
  532. seriesGap: 2,
  533. categoryGap: 6
  534. }
  535. }
  536. },
  537. opts3: {
  538. color: ["#8D9EE9"],
  539. padding: [15, 15, 0, 5],
  540. legend: {
  541. show: false
  542. },
  543. xAxis: {
  544. disableGrid: true,
  545. gridType: "dash",
  546. },
  547. yAxis: {
  548. gridType: "dash",
  549. data: [{
  550. min: 0
  551. }]
  552. },
  553. extra: {
  554. column: {
  555. type: "group",
  556. width: 15,
  557. activeBgColor: "#000000",
  558. activeBgOpacity: 0.08,
  559. linearType: "custom",
  560. seriesGap: 5,
  561. linearOpacity: 0.5,
  562. barBorderCircle: true,
  563. customColor: [
  564. "#8D9EE9",
  565. "#8D9EE9"
  566. ]
  567. }
  568. }
  569. },
  570. opts4: {
  571. enableScroll: true,
  572. color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4",
  573. "#ea7ccc"
  574. ],
  575. padding: [15, 30, 0, 5],
  576. legend: {
  577. show: false,
  578. },
  579. xAxis: {
  580. boundaryGap: "justify",
  581. disableGrid: false,
  582. axisLine: false,
  583. itemCount: 4,
  584. },
  585. yAxis: {
  586. },
  587. extra: {
  588. bar: {
  589. type: "group",
  590. width: 15,
  591. meterBorde: 1,
  592. meterFillColor: "#FFFFFF",
  593. activeBgColor: "#000000",
  594. activeBgOpacity: 0.08,
  595. // linearType: "custom",
  596. barBorderCircle: true,
  597. seriesGap: 2,
  598. categoryGap: 6
  599. }
  600. }
  601. },
  602. opts5: {
  603. enableScroll: true,
  604. color: ["#8D9EE9"],
  605. padding: [15, 15, 0, 5],
  606. legend: {
  607. show: false,
  608. },
  609. xAxis: {
  610. disableGrid: true,
  611. itemCount: 4,
  612. gridType: "dash",
  613. },
  614. yAxis: {
  615. gridType: "dash",
  616. data: [{
  617. min: 0,
  618. fontColor: "#BEBEBE",
  619. axisLine: false
  620. }]
  621. },
  622. extra: {
  623. column: {
  624. type: "group",
  625. width: 15,
  626. activeBgColor: "#000000",
  627. activeBgOpacity: 0.08,
  628. // linearType: "custom",
  629. seriesGap: 5,
  630. // linearOpacity: 0.5,
  631. barBorderCircle: true,
  632. customColor: [
  633. "#8D9EE9",
  634. "#8D9EE9"
  635. ]
  636. }
  637. }
  638. },
  639. opts6: {
  640. dataLabel: false,
  641. rotate: false,
  642. rotateLock: false,
  643. color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4",
  644. "#ea7ccc"
  645. ],
  646. legend: {
  647. show: false,
  648. position: "right",
  649. lineHeight: 25
  650. },
  651. title: {
  652. name: "",
  653. fontSize: 15,
  654. color: "#666666"
  655. },
  656. subtitle: {
  657. name: "",
  658. fontSize: 25,
  659. color: "#7cb5ec"
  660. },
  661. extra: {
  662. ring: {
  663. ringWidth: 10,
  664. activeOpacity: 0.5,
  665. activeRadius: 10,
  666. offsetAngle: 0,
  667. labelWidth: 15,
  668. border: false,
  669. borderWidth: 3,
  670. borderColor: "#FFFFFF"
  671. }
  672. }
  673. },
  674. opts7: {
  675. dataLabel: false,
  676. rotate: false,
  677. rotateLock: false,
  678. color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4",
  679. "#ea7ccc"
  680. ],
  681. legend: {
  682. show: false,
  683. position: "right",
  684. lineHeight: 25
  685. },
  686. title: {
  687. name: "",
  688. fontSize: 15,
  689. color: "#666666"
  690. },
  691. subtitle: {
  692. name: "",
  693. fontSize: 25,
  694. color: "#7cb5ec"
  695. },
  696. extra: {
  697. ring: {
  698. ringWidth: 10,
  699. activeOpacity: 0.5,
  700. activeRadius: 10,
  701. offsetAngle: 0,
  702. labelWidth: 15,
  703. border: false,
  704. borderWidth: 3,
  705. borderColor: "#FFFFFF"
  706. }
  707. }
  708. },
  709. opts8: {
  710. color: ["#EC6666"],
  711. padding: [15, 15, 0, 15],
  712. legend: {
  713. show: false,
  714. },
  715. xAxis: {
  716. disableGrid: true
  717. },
  718. yAxis: {
  719. gridType: "dash",
  720. dashLength: 2,
  721. data: [{
  722. // disabled: true,
  723. axisLine: false,
  724. fontColor: "#BEBEBE",
  725. }],
  726. },
  727. extra: {
  728. area: {
  729. type: "curve",
  730. opacity: 0.2,
  731. addLine: true,
  732. width: 2,
  733. gradient: true
  734. },
  735. tooltip: {
  736. showBox: false,
  737. showArrow: true,
  738. showCategory: false,
  739. borderWidth: 0,
  740. borderRadius: 0,
  741. borderColor: "#000000",
  742. borderOpacity: 0.7,
  743. bgColor: "#000000",
  744. bgOpacity: 0.7,
  745. gridType: "dash",
  746. dashLength: 4,
  747. gridColor: "#E9E9E9",
  748. fontColor: "#FFFFFF",
  749. splitLine: true,
  750. horizentalLine: false,
  751. xAxisLabel: false,
  752. yAxisLabel: false,
  753. labelBgColor: "#FFFFFF",
  754. labelBgOpacity: 0.7,
  755. labelFontColor: "#666666"
  756. }
  757. }
  758. },
  759. opts9: {
  760. color: ["#22C572"],
  761. padding: [15, 15, 0, 15],
  762. legend: {
  763. show: false,
  764. },
  765. xAxis: {
  766. disableGrid: true
  767. },
  768. yAxis: {
  769. gridType: "dash",
  770. dashLength: 2,
  771. data: [{
  772. // disabled: true,
  773. axisLine: false,
  774. fontColor: "#BEBEBE",
  775. }],
  776. },
  777. extra: {
  778. area: {
  779. type: "curve",
  780. opacity: 0.2,
  781. addLine: true,
  782. width: 2,
  783. gradient: true
  784. },
  785. tooltip: {
  786. showBox: false,
  787. showArrow: true,
  788. showCategory: false,
  789. borderWidth: 0,
  790. borderRadius: 0,
  791. borderColor: "#000000",
  792. borderOpacity: 0.7,
  793. bgColor: "#000000",
  794. bgOpacity: 0.7,
  795. gridType: "dash",
  796. dashLength: 4,
  797. gridColor: "#E9E9E9",
  798. fontColor: "#FFFFFF",
  799. splitLine: true,
  800. horizentalLine: false,
  801. xAxisLabel: false,
  802. yAxisLabel: false,
  803. labelBgColor: "#FFFFFF",
  804. labelBgOpacity: 0.7,
  805. labelFontColor: "#666666"
  806. }
  807. }
  808. },
  809. textIndex: 1,
  810. index: 2,
  811. background: {
  812. backgroundColor: '#2E303A',
  813. backgroundColor: 'red',
  814. },
  815. nowYear: ''
  816. }
  817. },
  818. onLoad: function(option) {
  819. this.nowYear = new Date().getFullYear()
  820. },
  821. destroyed() {
  822. },
  823. onUnload() {
  824. },
  825. onReady() {
  826. this.getServerData();
  827. },
  828. methods: {
  829. color4(index) {
  830. console.log(index)
  831. index = index + 1
  832. switch (index) {
  833. case 1:
  834. return '#FFBB6E'
  835. case 2:
  836. return '##8D9EE9'
  837. case 3:
  838. return '#FF8B95'
  839. case 4:
  840. return '#38CA80'
  841. case 5:
  842. return '#FFDD85'
  843. case 6:
  844. return '#FFBB6E'
  845. case 7:
  846. return '#FFBB6E'
  847. case 8:
  848. return '#FFBB6E'
  849. case 9:
  850. return '#FFBB6E'
  851. case 10:
  852. return '#FFBB6E'
  853. }
  854. },
  855. goToPage(index) {
  856. uni.navigateTo({
  857. url: '/pages/user/contractLook/inventoryCost?searchMonth=' + this.seachMoth
  858. })
  859. },
  860. clickNav(index) {
  861. this.carIndex = index
  862. let _data = ""
  863. if (index == 0) {
  864. _data = 1
  865. } else if (index == 1) {
  866. _data = 7
  867. } else {
  868. _data = 30
  869. }
  870. this.$api.doRequest('get', '/biInfoController/getTranCountWai', {
  871. seachMoth: _data,
  872. }).then(res => {
  873. console.log(res.data)
  874. this.selectMakeDate7(res.data.data[0])
  875. })
  876. },
  877. yearClick(type) {
  878. if (type == 1) {
  879. this.year--
  880. } else {
  881. this.year++
  882. }
  883. this.$api.doRequest('get', '/biInfoController/profitAccount', {
  884. compId: uni.getStorageSync('pcUserInfo').compId,
  885. seachYear: this.year,
  886. // biViewInfoList: {weight:''}
  887. }).then(res => {
  888. console.log("利润切换", res.data.data[0])
  889. // this.makeDate3(res.data[0])
  890. this.chartData3.series = [];
  891. let _categorieslr = []
  892. let _countlr = []
  893. if (res.data.data[0].biViewInfoList.length > 0) {
  894. for (let i = 0; i < res.data.data[0].biViewInfoList.length; i++) {
  895. _categorieslr.push(res.data.data[0].biViewInfoList[i].name)
  896. _countlr.push(res.data.data[0].biViewInfoList[i].weight ? res.data.data[0]
  897. .biViewInfoList[
  898. i].weight :
  899. 0)
  900. //利润核算
  901. }
  902. }
  903. let res3 = {
  904. categories: _categorieslr,
  905. series: [{
  906. name: "利润金额",
  907. data: _countlr
  908. }]
  909. };
  910. this.chartData3 = JSON.parse(JSON.stringify(res3));
  911. })
  912. },
  913. godetail(status) {
  914. var url = ''
  915. switch (status) {
  916. case 0:
  917. url = '/pages/dataReport/contractdetails/contractdetails'
  918. break;
  919. case 1:
  920. url = '/pages/dataReport/breakdownofprofit'
  921. break;
  922. case 2:
  923. url = '/pages/dataReport/costbreakdown?data=' + this.ym1 + '&type=' + this.index
  924. break;
  925. case 3:
  926. url = '/pages/dataReport/Inventoryentrydetails'
  927. break;
  928. }
  929. uni.navigateTo({
  930. url: url
  931. })
  932. },
  933. foldClcik(type, index) {
  934. switch (index) {
  935. case 1:
  936. this.isSHowContent1 = !this.isSHowContent1
  937. this.iconName1 = this.isSHowContent1 ? "arrow-up" : 'arrow-down'
  938. break;
  939. case 2:
  940. this.isSHowContent2 = !this.isSHowContent2
  941. this.iconName2 = this.isSHowContent2 ? "arrow-up" : 'arrow-down'
  942. break;
  943. case 3:
  944. this.isSHowContent3 = !this.isSHowContent3
  945. this.iconName3 = this.isSHowContent3 ? "arrow-up" : 'arrow-down'
  946. break;
  947. case 4:
  948. this.isSHowContent4 = !this.isSHowContent4
  949. this.iconName4 = this.isSHowContent4 ? "arrow-up" : 'arrow-down'
  950. break;
  951. case 5:
  952. this.isSHowContent5 = !this.isSHowContent5
  953. this.iconName5 = this.isSHowContent5 ? "arrow-up" : 'arrow-down'
  954. break;
  955. case 6:
  956. this.isSHowContent6 = !this.isSHowContent6
  957. this.iconName6 = this.isSHowContent6 ? "arrow-up" : 'arrow-down'
  958. break;
  959. }
  960. this.modeClass = type
  961. },
  962. getIndex(e) {
  963. console.log(e)
  964. // 点击图表
  965. if (this.textIndex == 1) {
  966. this.ym1 = this.chartList[0].biViewInfoList[e.currentIndex.index].name
  967. this.ym1Change = this.chartList[0].biViewInfoList[e.currentIndex.index].name.replace(/-/g, ".");
  968. this.sr = this.chartList[0].biViewInfoList[e.currentIndex.index].weight
  969. this.zc = this.chartList[2].biViewInfoList[e.currentIndex.index].weight
  970. } else {
  971. this.ym1 = this.chartList[1].biViewInfoList[e.currentIndex.index].name
  972. this.ym1Change = this.chartList[1].biViewInfoList[e.currentIndex.index].name.replace(/-/g, ".");
  973. this.sr = this.chartList[1].biViewInfoList[e.currentIndex.index].weight
  974. this.zc = this.chartList[3].biViewInfoList[e.currentIndex.index].weight
  975. }
  976. },
  977. makeDate1(val) {
  978. console.log("val", val)
  979. // 按月1
  980. let _categories = []
  981. let _price1 = []
  982. let _price2 = []
  983. this.chartData.series = [];
  984. // 设置x轴数据
  985. let _ySRPriceMax = 0
  986. let _yZCPriceMax = 0
  987. let _max = 0
  988. if (this.textIndex == 1) {
  989. if (val[0].biViewInfoList && val[0].biViewInfoList.length > 0) {
  990. for (let i = 0; i < val[0].biViewInfoList.length; i++) {
  991. val[0].biViewInfoList[i].weight = Number(val[0].biViewInfoList[i].weight).toFixed(2)
  992. _price1.push(val[0].biViewInfoList[i].weight)
  993. }
  994. //月收入最大值
  995. _ySRPriceMax = Math.max(..._price1)
  996. for (let i = 0; i < val[2].biViewInfoList.length; i++) {
  997. val[2].biViewInfoList[i].weight = Number(val[2].biViewInfoList[i].weight).toFixed(2)
  998. _price2.push(val[2].biViewInfoList[i].weight)
  999. _categories.push(new Date(val[2].biViewInfoList[i].name).getMonth() + 1)
  1000. }
  1001. //月收入最大值
  1002. _yZCPriceMax = Math.max(..._price2)
  1003. // 判断收入支出最大值构建y坐标轴刻度
  1004. _max = _ySRPriceMax > _yZCPriceMax ? _ySRPriceMax : _yZCPriceMax
  1005. this.ym1 = val[0].biViewInfoList[val[0].biViewInfoList.length - 1].name
  1006. this.ym1Change = val[0].biViewInfoList[val[0].biViewInfoList.length - 1].name.replace(/-/g, ".");
  1007. this.sr = val[0].biViewInfoList[val[0].biViewInfoList.length - 1].weight
  1008. this.zc = val[2].biViewInfoList[val[2].biViewInfoList.length - 1].weight
  1009. }
  1010. } else {
  1011. if (val[1].biViewInfoList && val[1].biViewInfoList.length > 0) {
  1012. this.ym1 = val[1].biViewInfoList[val[1].biViewInfoList.length - 1].name
  1013. this.sr = val[1].biViewInfoList[val[1].biViewInfoList.length - 1].weight
  1014. this.zc = val[3].biViewInfoList[val[3].biViewInfoList.length - 1].weight
  1015. for (let i = 0; i < val[1].biViewInfoList.length; i++) {
  1016. _categories.push(val[1].biViewInfoList[i].name)
  1017. _price1.push(val[1].biViewInfoList[i].weight)
  1018. }
  1019. for (let i = 0; i < val[3].biViewInfoList.length; i++) {
  1020. _price2.push(val[3].biViewInfoList[i].weight)
  1021. }
  1022. }
  1023. _max = _price1 > _price2 ? _price1 : _price2
  1024. }
  1025. let res = {
  1026. categories: _categories,
  1027. series: [{
  1028. name: "收入",
  1029. data: _price1,
  1030. textColor: "transparent"
  1031. }, {
  1032. name: "支出",
  1033. data: _price2,
  1034. textColor: "transparent"
  1035. }
  1036. ]
  1037. };
  1038. // this.opts.yAxis.data[0].max = Math.ceil(_max / 1000) * 1000
  1039. this.opts.yAxis.data[0].max = Math.ceil(_max * 1.05 / 500) * 500
  1040. this.chartData = JSON.parse(JSON.stringify(res));
  1041. },
  1042. makeDate2(val) {
  1043. let _categories = []
  1044. let _count1 = []
  1045. let _count2 = []
  1046. let _xMax1 = 0
  1047. let _xMax2 = 0
  1048. let _max = 0
  1049. if (val[4].biViewInfoList && val[4].biViewInfoList.length > 0) {
  1050. for (let i = 0; i < val[4].biViewInfoList.length; i++) {
  1051. _categories.push(val[4].biViewInfoList[i].name.substring(0, 2))
  1052. _count1.push(Number(val[4].biViewInfoList[i].weight).toFixed(0))
  1053. _count2.push(val[4].biViewInfoList[i].count ? Number(val[4].biViewInfoList[i].count).toFixed(0) :
  1054. 0)
  1055. }
  1056. }
  1057. _xMax1 = Math.max(..._count1)
  1058. _xMax2 = Math.max(..._count2)
  1059. _max = _xMax1 > _xMax2 ? _xMax1 : _xMax2
  1060. console.log(_xMax1)
  1061. console.log(_xMax2)
  1062. console.log(Math.ceil(_max / 100) * 100)
  1063. this.opts2.xAxis.max = Math.ceil(_max / 100) * 100
  1064. // for (let i = 0; i < val[5].biViewInfoList.length; i++) {
  1065. // _count2.push(val[5].biViewInfoList[i].weight)
  1066. // }
  1067. let res1 = {
  1068. categories: _categories,
  1069. series: [{
  1070. name: this.index == 1 ? '过去12个月累计签订数量' : '本季累计签订合同数量',
  1071. data: _count1,
  1072. legendShape: "circle",
  1073. textColor: "transparent"
  1074. },
  1075. {
  1076. name: this.index == 1 ? '当前执行中数量' : '本季执行中数量',
  1077. data: _count2,
  1078. legendShape: "circle",
  1079. textColor: "transparent"
  1080. }
  1081. ]
  1082. };
  1083. this.chartData1 = JSON.parse(JSON.stringify(res1));
  1084. },
  1085. makeDate3(val) {
  1086. let _categorieslr = []
  1087. let _countlr = []
  1088. if (val[5].biViewInfoList.length > 0) {
  1089. for (let i = 0; i < val[5].biViewInfoList.length; i++) {
  1090. _categorieslr.push(val[5].biViewInfoList[i].name.substring(0, 2))
  1091. _countlr.push(val[5].biViewInfoList[i].weight ? val[5].biViewInfoList[i].weight : 0)
  1092. }
  1093. } else {
  1094. this.isHaveData3 = false
  1095. }
  1096. //利润核算
  1097. let res3 = {
  1098. categories: _categorieslr,
  1099. series: [{
  1100. name: "利润金额",
  1101. data: _countlr
  1102. }]
  1103. };
  1104. this.chartData3 = JSON.parse(JSON.stringify(res3));
  1105. },
  1106. makeDate4(val) {
  1107. let _categorieslr = []
  1108. let _countlr = []
  1109. // this.clList =
  1110. let _weightList = []
  1111. let _maxWeight = ''
  1112. if (val[8].biViewInfoList && val[8].biViewInfoList.length > 0) {
  1113. for (let i = 0; i < val[8].biViewInfoList.length; i++) {
  1114. _weightList.push(Number(val[8].biViewInfoList[i].weight).toFixed(0) ? Number(val[8].biViewInfoList[
  1115. i]
  1116. .weight).toFixed(0) : 0)
  1117. }
  1118. _maxWeight = Math.max(..._weightList) + Math.max(..._weightList) * 0.05
  1119. for (let i = 0; i < val[8].biViewInfoList.length; i++) {
  1120. let _obj = {
  1121. percent: Number(val[8].biViewInfoList[i].weight).toFixed(0) / _maxWeight * 100,
  1122. name: val[8].biViewInfoList[i].name,
  1123. weight: Number(val[8].biViewInfoList[i].weight).toFixed(0) + '吨'
  1124. }
  1125. console.log("库存储量", _obj)
  1126. this.clList.push(_obj)
  1127. // _categorieslr.push(val[8].biViewInfoList[i].name)
  1128. // _countlr.push(Number(val[8].biViewInfoList[i].weight).toFixed(0) ? Number(val[8]
  1129. // .biViewInfoList[i]
  1130. // .weight).toFixed(0) : 0)
  1131. }
  1132. }
  1133. // let res4 = {
  1134. // categories: _categorieslr,
  1135. // series: [{
  1136. // name: '库存储量',
  1137. // data: _countlr
  1138. // }]
  1139. // };
  1140. // this.chartData4 = JSON.parse(JSON.stringify(res4));
  1141. let _tc = Number(val[6].biViewInfoList[0].count) + Number(val[6].biViewInfoList[1].count) - Number(
  1142. val[6].biViewInfoList[2].count)
  1143. this.InventoryList = [{
  1144. name: '合计储量',
  1145. number: Number(val[6].biViewInfoList[0].count).toFixed(3),
  1146. src: '../../static/img/cl.png'
  1147. }, {
  1148. name: '采购待执行',
  1149. number: Number(val[6].biViewInfoList[1].count).toFixed(3),
  1150. src: '../../static/img/cg.png'
  1151. },
  1152. {
  1153. name: '销待执行售',
  1154. number: Number(val[6].biViewInfoList[2].count).toFixed(3),
  1155. src: '../../static/img/xs.png'
  1156. },
  1157. {
  1158. name: '头寸',
  1159. number: Number(_tc).toFixed(3),
  1160. src: '../../static/img/tc.png'
  1161. },
  1162. ]
  1163. },
  1164. makeDate5(val) {
  1165. let _categorieslr = []
  1166. let _count = []
  1167. if (val[7].biViewInfoList && val[9].biViewInfoList.length > 0) {
  1168. for (let i = 0; i < val[9].biViewInfoList.length; i++) {
  1169. let _obj = {
  1170. value: Number(val[9].biViewInfoList[i].weight ? val[9].biViewInfoList[i].weight : 0)
  1171. .toFixed(
  1172. 0),
  1173. color: this.color[i]
  1174. }
  1175. _categorieslr.push(val[9].biViewInfoList[i].name)
  1176. _count.push(_obj)
  1177. }
  1178. }
  1179. // data: [{
  1180. // value: 10000,
  1181. // color: "#FFBB6E"
  1182. // },
  1183. // {
  1184. // value: 40000,
  1185. // color: "#8D9EE9"
  1186. // }, {
  1187. // value: 70000,
  1188. // color: "#FF8B95"
  1189. // }, {
  1190. // value: 90000,
  1191. // color: "#38CA80"
  1192. // },
  1193. // {
  1194. // value: 100000,
  1195. // color: "#FFDD85"
  1196. // }
  1197. // ]
  1198. let res5 = {
  1199. categories: _categorieslr,
  1200. series: [{
  1201. name: "货值(万元)",
  1202. data: _count
  1203. }]
  1204. };
  1205. this.chartData5 = JSON.parse(JSON.stringify(res5));
  1206. this.averageCostList = val[9].biViewInfoList
  1207. },
  1208. makeDate6(val) {
  1209. let _data = []
  1210. if (val[10].biViewInfoList && val[10].biViewInfoList.length > 0) {
  1211. for (let i = 0; i < val[10].biViewInfoList.length; i++) {
  1212. let _obj = {
  1213. name: val[10].biViewInfoList[i].name,
  1214. value: val[10].biViewInfoList[i].weight,
  1215. color: this.color[i],
  1216. style: {
  1217. 'background': this.color[i],
  1218. 'border-radius': '50%',
  1219. 'width': '20rpx',
  1220. 'height': '20rpx',
  1221. 'display': 'inline-block',
  1222. 'margin-right': '10rpx'
  1223. },
  1224. }
  1225. _data.push(_obj)
  1226. this.rkList = _data
  1227. }
  1228. }
  1229. let res6 = {
  1230. width: 200,
  1231. series: [{
  1232. data: _data
  1233. }]
  1234. };
  1235. this.chartData6 = JSON.parse(JSON.stringify(res6));
  1236. },
  1237. selectMakeDate7(val) {
  1238. console.log(11)
  1239. console.log(val)
  1240. this.chartData7.series = [];
  1241. let _data = []
  1242. this.ztList = []
  1243. for (let i = 0; i < val.biViewInfoList.length; i++) {
  1244. let _obj = {
  1245. name: val.biViewInfoList[i].name,
  1246. value: Number(val.biViewInfoList[i].count),
  1247. color: this.ztColor[i],
  1248. style: {
  1249. 'background': this.ztColor[i],
  1250. 'border-radius': '50%',
  1251. 'width': '20rpx',
  1252. 'height': '20rpx',
  1253. 'display': 'inline-block',
  1254. 'margin-right': '10rpx'
  1255. },
  1256. }
  1257. _data.push(_obj)
  1258. this.ztList = _data
  1259. }
  1260. console.log(_data)
  1261. let res7 = {
  1262. series: [{
  1263. data: _data
  1264. }]
  1265. };
  1266. this.chartData7 = JSON.parse(JSON.stringify(res7));
  1267. },
  1268. makeDate7(val) {
  1269. let _data = []
  1270. this.ztList = []
  1271. if (val[11].biViewInfoList && val[11].biViewInfoList.length) {
  1272. for (let i = 0; i < val[11].biViewInfoList.length; i++) {
  1273. let _obj = {
  1274. name: val[11].biViewInfoList[i].name,
  1275. value: Number(val[11].biViewInfoList[i].count),
  1276. color: this.ztColor[i],
  1277. style: {
  1278. 'background': this.ztColor[i],
  1279. 'border-radius': '50%',
  1280. 'width': '20rpx',
  1281. 'height': '20rpx',
  1282. 'display': 'inline-block',
  1283. 'margin-right': '10rpx'
  1284. },
  1285. }
  1286. _data.push(_obj)
  1287. this.ztList = _data
  1288. }
  1289. }
  1290. console.log(_data)
  1291. let res7 = {
  1292. series: [{
  1293. data: _data
  1294. }]
  1295. };
  1296. this.chartData7 = JSON.parse(JSON.stringify(res7));
  1297. },
  1298. makeDate8(val) {
  1299. let _categories = []
  1300. let _data = []
  1301. let _categories1 = []
  1302. let _data1 = []
  1303. this.appTotal = val[12].count
  1304. this.lmTotal = val[13].count
  1305. if (val[12].biViewInfoList && val[12].biViewInfoList.length) {
  1306. for (let i = 0; i < val[12].biViewInfoList.length; i++) {
  1307. _categories.push(val[12].biViewInfoList[i].name)
  1308. _data.push(val[12].biViewInfoList[i].weight)
  1309. }
  1310. }
  1311. if (val[13].biViewInfoList && val[13].biViewInfoList.length > 0) {
  1312. for (let i = 0; i < val[13].biViewInfoList.length; i++) {
  1313. _categories1.push(val[13].biViewInfoList[i].name)
  1314. _data1.push(val[13].biViewInfoList[i].weight)
  1315. }
  1316. }
  1317. let res8 = {
  1318. categories: _categories,
  1319. series: [{
  1320. name: "成交量A",
  1321. data: _data,
  1322. textColor: "transparent"
  1323. }]
  1324. }
  1325. let res9 = {
  1326. categories: _categories1,
  1327. series: [{
  1328. name: "成交量A",
  1329. data: _data1,
  1330. textColor: "transparent"
  1331. }]
  1332. }
  1333. this.chartData8 = JSON.parse(JSON.stringify(res8))
  1334. this.chartData9 = JSON.parse(JSON.stringify(res9))
  1335. },
  1336. isShowChart(val, index) {
  1337. if (val.length == 0) {
  1338. return false
  1339. switch (index) {
  1340. case 3:
  1341. this.isHaveData3 = false
  1342. }
  1343. }
  1344. return true
  1345. },
  1346. getServerData() {
  1347. uni.showLoading({
  1348. title: "加载中",
  1349. mask: true
  1350. })
  1351. this.$api.doRequest('get', '/biInfoController/selectPhoneBiInfo?compId=' + uni.getStorageSync(
  1352. 'pcUserInfo')
  1353. .compId + '&seachMoth=' + this.seachMoth + '&seachYear=' + this.seachYear).then(
  1354. res => {
  1355. console.log("数据报表", res)
  1356. uni.hideLoading()
  1357. this.chartList = res.data.data
  1358. // 收支核算数据处理
  1359. this.makeDate1(res.data.data)
  1360. //合同数据
  1361. this.makeDate2(res.data.data)
  1362. //利润核算
  1363. this.makeDate3(res.data.data)
  1364. //库存储量
  1365. this.makeDate4(res.data.data)
  1366. //当期货值
  1367. this.makeDate5(res.data.data)
  1368. //今日入库
  1369. this.makeDate6(res.data.data)
  1370. //在途数据
  1371. this.makeDate7(res.data.data)
  1372. //APP注册
  1373. this.makeDate8(res.data.data)
  1374. // uni.hideLoading()
  1375. })
  1376. //模拟从服务器获取数据时的延时
  1377. setTimeout(() => {
  1378. //模拟服务器返回数据,如果数据格式和标准格式不同,需自行按下面的格式拼接
  1379. // let res = {
  1380. // categories: ["2016", "2017", "2018", "2019", "2020", "2021", "2022", "2023"],
  1381. // series: [{
  1382. // name: "收入",
  1383. // data: [70, 40, 65, 100, 44, 68, 90, 240]
  1384. // }, {
  1385. // name: "支出",
  1386. // data: [35, 8, 25, 37, 4, 20, 56, 30]
  1387. // }
  1388. // ]
  1389. // };
  1390. // this.chartData = JSON.parse(JSON.stringify(res));
  1391. // let res1 = {
  1392. // categories: ["2016", "2017", "2018", "2019", "2020", "2021"],
  1393. // series: [{
  1394. // name: this.index == 1 ? '过去12个月累计签订数量' : '本季累计签订合同数量',
  1395. // data: [35, 36, 31, 33, 13, 34],
  1396. // legendShape: "circle",
  1397. // },
  1398. // {
  1399. // name: this.index == 1 ? '当前执行中数量' : '本季执行中数量',
  1400. // data: [18, 27, 21, 24, 6, 28],
  1401. // legendShape: "circle"
  1402. // }
  1403. // ]
  1404. // };
  1405. // this.chartData1 = JSON.parse(JSON.stringify(res1));
  1406. // let res3 = {
  1407. // categories: ["销售", "采购", "收购", "代收", "代储"],
  1408. // series: [{
  1409. // name: "利润金额",
  1410. // data: [35, 36, 31, 33, 13]
  1411. // }]
  1412. // };
  1413. // this.chartData3 = JSON.parse(JSON.stringify(res3));
  1414. let res4 = {
  1415. categories: ["小麦", "高粱(潮粮)", "高粱", "玉米(潮粮)", "玉米"],
  1416. series: [{
  1417. name: '库存储量',
  1418. data: [{
  1419. value: 35,
  1420. color: "#FFBB6E"
  1421. },
  1422. {
  1423. value: 36,
  1424. color: "#8D9EE9"
  1425. }, {
  1426. value: 31,
  1427. color: "#FF8B95"
  1428. }, {
  1429. value: 33,
  1430. color: "#38CA80"
  1431. },
  1432. {
  1433. color: "#FFDD85"
  1434. }
  1435. ]
  1436. }]
  1437. };
  1438. this.chartData4 = JSON.parse(JSON.stringify(res4));
  1439. // let res5 = {
  1440. // categories: ["小麦", "高粱(潮粮)", "高粱", "玉米(潮粮)", "玉米"],
  1441. // series: [{
  1442. // name: "利润金额",
  1443. // data: [{
  1444. // value: 10000,
  1445. // color: "#FFBB6E"
  1446. // },
  1447. // {
  1448. // value: 40000,
  1449. // color: "#8D9EE9"
  1450. // }, {
  1451. // value: 70000,
  1452. // color: "#FF8B95"
  1453. // }, {
  1454. // value: 90000,
  1455. // color: "#38CA80"
  1456. // },
  1457. // {
  1458. // value: 100000,
  1459. // color: "#FFDD85"
  1460. // }
  1461. // ]
  1462. // }]
  1463. // };
  1464. // this.chartData5 = JSON.parse(JSON.stringify(res5));
  1465. // let res6 = {
  1466. // series: [{
  1467. // data: [{
  1468. // "name": "一班",
  1469. // "value": 50
  1470. // }, {
  1471. // "name": "二班",
  1472. // "value": 30
  1473. // }, {
  1474. // "name": "三班",
  1475. // "value": 20
  1476. // }, {
  1477. // "name": "四班",
  1478. // "value": 18
  1479. // }, {
  1480. // "name": "五班",
  1481. // "value": 8
  1482. // }]
  1483. // }]
  1484. // };
  1485. // this.chartData6 = JSON.parse(JSON.stringify(res6));
  1486. // let res7 = {
  1487. // series: [{
  1488. // data: [{
  1489. // "name": "一班",
  1490. // "value": 50
  1491. // }, {
  1492. // "name": "二班",
  1493. // "value": 30
  1494. // }, {
  1495. // "name": "三班",
  1496. // "value": 20
  1497. // }, {
  1498. // "name": "四班",
  1499. // "value": 18
  1500. // }, {
  1501. // "name": "五班",
  1502. // "value": 8
  1503. // }]
  1504. // }]
  1505. // };
  1506. // this.chartData7 = JSON.parse(JSON.stringify(res7));
  1507. // let res8 = {
  1508. // categories: ["2016", "2017", "2018", "2019", "2020", "2021"],
  1509. // series: [{
  1510. // name: "成交量A",
  1511. // data: [35, 8, 25, 37, 4, 20]
  1512. // }
  1513. // ]
  1514. // };
  1515. // this.chartData8 = JSON.parse(JSON.stringify(res8));
  1516. // let res9 = {
  1517. // categories: ["2016", "2017", "2018", "2019", "2020", "2021"],
  1518. // series: [{
  1519. // name: "成交量A",
  1520. // data: [35, 8, 25, 37, 4, 20]
  1521. // },
  1522. // {
  1523. // name: "成交量B",
  1524. // data: [70, 40, 65, 100, 44, 68]
  1525. // },
  1526. // {
  1527. // name: "成交量C",
  1528. // data: [100, 80, 95, 150, 112, 132]
  1529. // }
  1530. // ]
  1531. // };
  1532. // this.chartData9 = JSON.parse(JSON.stringify(res9));
  1533. },
  1534. 500);
  1535. },
  1536. back() {
  1537. uni.navigateBack()
  1538. },
  1539. navClick(val) {
  1540. this.clList = []
  1541. this.index = val
  1542. if (val == 1) {
  1543. this.seachMoth = ''
  1544. } else {
  1545. this.seachMoth = '2022-10-10'
  1546. }
  1547. this.getServerData();
  1548. },
  1549. accounting(val) {
  1550. this.textIndex = val
  1551. if (val == 1) {
  1552. console.log("按月")
  1553. } else {
  1554. console.log("按年")
  1555. }
  1556. this.makeDate1(this.chartList)
  1557. }
  1558. }
  1559. }
  1560. </script>
  1561. <style scoped lang="scss">
  1562. .flex {
  1563. display: flex;
  1564. }
  1565. .alc {
  1566. align-items: center;
  1567. }
  1568. .jcse {
  1569. justify-content: space-evenly;
  1570. }
  1571. .jcsb {
  1572. justify-content: space-between;
  1573. }
  1574. .mtb40 {
  1575. margin: 40rpx 0;
  1576. }
  1577. .title-lv2 {
  1578. font-weight: bold;
  1579. color: #333333;
  1580. }
  1581. .status_bar {
  1582. height: var(--status-bar-height);
  1583. width: 100%;
  1584. }
  1585. .top-nav {
  1586. display: flex;
  1587. align-items: center;
  1588. justify-content: space-evenly;
  1589. position: relative;
  1590. }
  1591. .back {
  1592. position: absolute;
  1593. left: 20rpx;
  1594. top: 0;
  1595. bottom: 0;
  1596. margin: auto;
  1597. }
  1598. .zd {
  1599. color: #969696;
  1600. margin-top: 20rpx;
  1601. justify-content: center;
  1602. }
  1603. .top-nav {
  1604. font-size: 36rpx;
  1605. background: white;
  1606. padding: 20rpx;
  1607. }
  1608. .nav-active {
  1609. font-weight: 700;
  1610. position: relative;
  1611. }
  1612. .nav-active:after {
  1613. content: "";
  1614. position: absolute;
  1615. bottom: -20rpx;
  1616. left: 0;
  1617. right: 0;
  1618. margin: auto;
  1619. height: 10rpx;
  1620. width: 60%;
  1621. background: #262626;
  1622. border-radius: 40rpx;
  1623. }
  1624. .content-item {
  1625. background: white;
  1626. margin: 20rpx 20rpx 0 20rpx;
  1627. border-radius: 20rpx;
  1628. padding: 20rpx;
  1629. box-sizing: border-box;
  1630. }
  1631. .title {
  1632. margin-bottom: 22rpx;
  1633. font-size: 32rpx;
  1634. font-weight: 700;
  1635. color: #343434;
  1636. }
  1637. .right-btn {
  1638. width: 120rpx;
  1639. height: 42rpx;
  1640. display: flex;
  1641. align-items: center;
  1642. justify-content: center;
  1643. background: #F1F1F1;
  1644. border-radius: 30px;
  1645. font-size: 22rpx;
  1646. color: #707575;
  1647. }
  1648. .content1 {
  1649. .content1-wrap {}
  1650. .row1 {
  1651. display: flex;
  1652. justify-content: space-between;
  1653. align-items: center;
  1654. .left {
  1655. color: #868686;
  1656. }
  1657. .text {
  1658. margin-left: 38rpx;
  1659. color: #2E303A;
  1660. height: 60rpx;
  1661. display: inline-block;
  1662. line-height: 60rpx;
  1663. padding: 0 26rpx;
  1664. }
  1665. .text-active {
  1666. // margin-left: 38rpx;
  1667. color: #FFF;
  1668. background: #2E303A;
  1669. // padding: 1rpx 26rpx;
  1670. height: 60rpx;
  1671. display: inline-block;
  1672. line-height: 60rpx;
  1673. padding: 0 26rpx;
  1674. border-radius: 10rpx;
  1675. }
  1676. }
  1677. .row2 {
  1678. display: flex;
  1679. flex-direction: column;
  1680. align-items: center;
  1681. .text {
  1682. color: #636363;
  1683. margin-bottom: 10rpx
  1684. }
  1685. .price {
  1686. font-size: 56rpx;
  1687. font-weight: 700;
  1688. color: #D79C58;
  1689. }
  1690. }
  1691. .row3 {
  1692. display: flex;
  1693. justify-content: space-between;
  1694. margin-top: 27rpx;
  1695. align-items: center;
  1696. .center {
  1697. width: 2px;
  1698. height: 61rpx;
  1699. border: 2rpx solid #EEEEEE;
  1700. }
  1701. .left,
  1702. .right {
  1703. // background: green;
  1704. width: calc(50% - 1px);
  1705. text-align: center;
  1706. .text {
  1707. color: #636363
  1708. }
  1709. .number {
  1710. margin-top: 12rpx;
  1711. font-size: 34rpx;
  1712. font-weight: 700;
  1713. color: #343434;
  1714. }
  1715. }
  1716. }
  1717. .row4 {
  1718. margin-top: 20rpx;
  1719. }
  1720. .row5 {
  1721. background: #F6F6F6;
  1722. border-radius: 8px;
  1723. padding: 16rpx 0;
  1724. box-sizing: border-box;
  1725. margin: 20rpx 0;
  1726. .left,
  1727. .right {
  1728. width: 50%;
  1729. text-align: center;
  1730. }
  1731. .point-left {
  1732. width: 11rpx;
  1733. height: 11rpx;
  1734. background: #E84A55;
  1735. display: inline-block;
  1736. border-radius: 50%;
  1737. margin: 6rpx;
  1738. }
  1739. .point-right {
  1740. width: 11rpx;
  1741. height: 11rpx;
  1742. background: #22C572;
  1743. display: inline-block;
  1744. border-radius: 50%;
  1745. margin: 6rpx;
  1746. }
  1747. .text-left {
  1748. color: #E84A55;
  1749. font-weight: 700;
  1750. }
  1751. .text-right {
  1752. color: #22C572;
  1753. font-weight: 700;
  1754. }
  1755. }
  1756. }
  1757. .content2 {
  1758. .row1 {}
  1759. .row2 {
  1760. color: #707575;
  1761. font-size: 22rpx;
  1762. .color1 {
  1763. width: 16rpx;
  1764. height: 12rpx;
  1765. background: #D2F3E2;
  1766. border-radius: 7rpx;
  1767. margin-right: 10rpx;
  1768. }
  1769. .color2 {
  1770. width: 16rpx;
  1771. height: 12rpx;
  1772. background: #2CC778;
  1773. border-radius: 7rpx;
  1774. margin-right: 10rpx;
  1775. }
  1776. }
  1777. .row5 {
  1778. display: flex;
  1779. justify-content: space-between;
  1780. color: #9E9E9E;
  1781. .left {}
  1782. }
  1783. }
  1784. .content3 {
  1785. .right {
  1786. color: #9E9E9E;
  1787. }
  1788. .row2 {
  1789. .name {
  1790. color: #7A7A7A;
  1791. margin: 17rpx 0;
  1792. }
  1793. .bottom {
  1794. display: flex;
  1795. }
  1796. .left {
  1797. width: 70%;
  1798. }
  1799. .weight {
  1800. margin-left: 20rpx;
  1801. }
  1802. }
  1803. .row3 {
  1804. padding: 10rpx 25rpx 30rpx 25rpx;
  1805. border-radius: 15rpx;
  1806. margin-top: 20rpx;
  1807. background: #FAFAFA;
  1808. .list-item {
  1809. margin-top: 20rpx;
  1810. .number {
  1811. font-weight: 700;
  1812. }
  1813. }
  1814. }
  1815. .row7 {
  1816. .list-item {
  1817. font-size: 24rpx;
  1818. display: inline-block;
  1819. padding: 20rpx;
  1820. box-sizing: border-box;
  1821. background: #FAFAFA;
  1822. width: calc(50% - 40rpx);
  1823. margin: 20rpx;
  1824. border-radius: 8rpx;
  1825. }
  1826. }
  1827. }
  1828. .content4 {
  1829. .row1 {
  1830. display: flex;
  1831. .opts6 uni-canvas {
  1832. width: 200px;
  1833. }
  1834. }
  1835. }
  1836. .content5 {
  1837. .days-nav {
  1838. display: flex;
  1839. justify-content: space-evenly;
  1840. }
  1841. }
  1842. .zt-right {
  1843. flex-direction: column;
  1844. justify-content: space-evenly;
  1845. height: 100px;
  1846. display: flex;
  1847. width: 100%;
  1848. }
  1849. .content6 {
  1850. .row1 {
  1851. margin: 20rpx 0;
  1852. }
  1853. .left {
  1854. font-weight: 700;
  1855. }
  1856. }
  1857. .days-nav {
  1858. margin: 20rpx;
  1859. background: #F5F6FA;
  1860. border-radius: 8rpx;
  1861. padding: 4rpx 0;
  1862. .item {
  1863. width: 33%;
  1864. display: flex;
  1865. justify-content: center;
  1866. padding: 6px 0;
  1867. }
  1868. .item-active {
  1869. background: #fff;
  1870. }
  1871. }
  1872. </style>