newReport.vue 48 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134113511361137113811391140114111421143114411451146114711481149115011511152115311541155115611571158115911601161116211631164116511661167116811691170117111721173117411751176117711781179118011811182118311841185118611871188118911901191119211931194119511961197119811991200120112021203120412051206120712081209121012111212121312141215121612171218121912201221122212231224122512261227122812291230123112321233123412351236123712381239124012411242124312441245124612471248124912501251125212531254125512561257125812591260126112621263126412651266126712681269127012711272127312741275127612771278127912801281128212831284128512861287128812891290129112921293129412951296129712981299130013011302130313041305130613071308130913101311131213131314131513161317131813191320132113221323132413251326132713281329133013311332133313341335133613371338133913401341134213431344134513461347134813491350135113521353135413551356135713581359136013611362136313641365136613671368136913701371137213731374137513761377137813791380138113821383138413851386138713881389139013911392139313941395139613971398139914001401140214031404140514061407140814091410141114121413141414151416141714181419142014211422142314241425142614271428142914301431143214331434143514361437143814391440144114421443144414451446144714481449145014511452145314541455145614571458145914601461146214631464146514661467146814691470147114721473147414751476147714781479148014811482148314841485148614871488148914901491149214931494149514961497149814991500150115021503150415051506150715081509151015111512151315141515151615171518151915201521152215231524152515261527152815291530153115321533153415351536153715381539154015411542154315441545154615471548154915501551155215531554155515561557155815591560156115621563156415651566156715681569157015711572157315741575157615771578157915801581158215831584158515861587158815891590159115921593159415951596159715981599160016011602160316041605160616071608160916101611161216131614161516161617161816191620162116221623162416251626162716281629163016311632163316341635163616371638163916401641164216431644164516461647164816491650165116521653165416551656165716581659166016611662166316641665166616671668166916701671167216731674167516761677167816791680168116821683168416851686168716881689169016911692169316941695169616971698169917001701170217031704170517061707170817091710171117121713171417151716171717181719172017211722172317241725172617271728172917301731173217331734173517361737173817391740174117421743174417451746174717481749175017511752175317541755175617571758175917601761176217631764176517661767176817691770177117721773177417751776177717781779178017811782178317841785178617871788178917901791179217931794179517961797179817991800180118021803180418051806180718081809181018111812181318141815181618171818181918201821182218231824182518261827182818291830183118321833183418351836183718381839184018411842184318441845184618471848184918501851185218531854185518561857185818591860186118621863186418651866186718681869187018711872187318741875187618771878187918801881188218831884188518861887188818891890189118921893189418951896189718981899190019011902190319041905190619071908190919101911191219131914191519161917191819191920192119221923192419251926192719281929193019311932193319341935193619371938193919401941194219431944194519461947194819491950195119521953195419551956195719581959196019611962196319641965196619671968196919701971197219731974197519761977197819791980198119821983198419851986198719881989199019911992199319941995199619971998199920002001200220032004200520062007200820092010201120122013201420152016201720182019202020212022202320242025202620272028202920302031203220332034
  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 jcsb">
  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" style="padding:0 12rpx 0 5rpx;">
  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" style="margin-top: 90rpx;padding:0 12rpx 0 5rpx;">
  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. makeYData(max) {
  978. if (max <= 100) {
  979. return Math.ceil(max * 1.05 / 20) * 20
  980. } else if (max <= 1000) {
  981. return Math.ceil(max * 1.05 / 100) * 100
  982. } else if (max > 1000) {
  983. console.log(111)
  984. return Math.ceil(max * 1.05 / 500) * 500
  985. }
  986. // Math.ceil(_max * 1.05 / 500) * 500
  987. },
  988. makeDate1(val) {
  989. console.log("val", val)
  990. // 按月1
  991. let _categories = []
  992. let _price1 = []
  993. let _price2 = []
  994. this.chartData.series = [];
  995. // 设置x轴数据
  996. let _ySRPriceMax = 0
  997. let _yZCPriceMax = 0
  998. let _max = 0
  999. if (this.textIndex == 1) {
  1000. if (val[0].biViewInfoList && val[0].biViewInfoList.length > 0) {
  1001. for (let i = 0; i < val[0].biViewInfoList.length; i++) {
  1002. val[0].biViewInfoList[i].weight = Number(val[0].biViewInfoList[i].weight).toFixed(2)
  1003. _price1.push(val[0].biViewInfoList[i].weight)
  1004. }
  1005. //月收入最大值
  1006. _ySRPriceMax = Math.max(..._price1)
  1007. for (let i = 0; i < val[2].biViewInfoList.length; i++) {
  1008. val[2].biViewInfoList[i].weight = Number(val[2].biViewInfoList[i].weight).toFixed(2)
  1009. _price2.push(val[2].biViewInfoList[i].weight)
  1010. _categories.push(new Date(val[2].biViewInfoList[i].name).getMonth() + 1)
  1011. }
  1012. //月收入最大值
  1013. _yZCPriceMax = Math.max(..._price2)
  1014. // 判断收入支出最大值构建y坐标轴刻度
  1015. _max = _ySRPriceMax > _yZCPriceMax ? _ySRPriceMax : _yZCPriceMax
  1016. this.ym1 = val[0].biViewInfoList[val[0].biViewInfoList.length - 1].name
  1017. this.ym1Change = val[0].biViewInfoList[val[0].biViewInfoList.length - 1].name.replace(/-/g, ".");
  1018. this.sr = val[0].biViewInfoList[val[0].biViewInfoList.length - 1].weight
  1019. this.zc = val[2].biViewInfoList[val[2].biViewInfoList.length - 1].weight
  1020. }
  1021. } else {
  1022. if (val[1].biViewInfoList && val[1].biViewInfoList.length > 0) {
  1023. this.ym1 = val[1].biViewInfoList[val[1].biViewInfoList.length - 1].name
  1024. this.sr = val[1].biViewInfoList[val[1].biViewInfoList.length - 1].weight
  1025. this.zc = val[3].biViewInfoList[val[3].biViewInfoList.length - 1].weight
  1026. for (let i = 0; i < val[1].biViewInfoList.length; i++) {
  1027. _categories.push(val[1].biViewInfoList[i].name)
  1028. _price1.push(val[1].biViewInfoList[i].weight)
  1029. }
  1030. for (let i = 0; i < val[3].biViewInfoList.length; i++) {
  1031. _price2.push(val[3].biViewInfoList[i].weight)
  1032. }
  1033. }
  1034. _max = _price1 > _price2 ? _price1 : _price2
  1035. }
  1036. let res = {
  1037. categories: _categories,
  1038. series: [{
  1039. name: "收入",
  1040. data: _price1,
  1041. textColor: "transparent"
  1042. }, {
  1043. name: "支出",
  1044. data: _price2,
  1045. textColor: "transparent"
  1046. }
  1047. ]
  1048. };
  1049. // this.opts.yAxis.data[0].max = Math.ceil(_max / 1000) * 1000
  1050. // 处理y轴最大值
  1051. console.log("max1", _max)
  1052. let _newMax = this.makeYData(_max)
  1053. console.log('max1', _newMax)
  1054. // this.opts.yAxis.data[0].max = Math.ceil(_max * 1.05 / 500) * 500
  1055. this.opts.yAxis.data[0].max = _newMax
  1056. this.chartData = JSON.parse(JSON.stringify(res));
  1057. },
  1058. makeDate2(val) {
  1059. let _categories = []
  1060. let _count1 = []
  1061. let _count2 = []
  1062. let _xMax1 = 0
  1063. let _xMax2 = 0
  1064. let _max = 0
  1065. if (val[4].biViewInfoList && val[4].biViewInfoList.length > 0) {
  1066. for (let i = 0; i < val[4].biViewInfoList.length; i++) {
  1067. _categories.push(val[4].biViewInfoList[i].name.substring(0, 2))
  1068. _count1.push(Number(val[4].biViewInfoList[i].weight).toFixed(0))
  1069. _count2.push(val[4].biViewInfoList[i].count ? Number(val[4].biViewInfoList[i].count).toFixed(0) :
  1070. 0)
  1071. }
  1072. }
  1073. _xMax1 = Math.max(..._count1)
  1074. _xMax2 = Math.max(..._count2)
  1075. _max = _xMax1 > _xMax2 ? _xMax1 : _xMax2
  1076. console.log(_xMax1)
  1077. console.log(_xMax2)
  1078. // this.opts2.xAxis.max = Math.ceil(_max / 100) * 100
  1079. let _newMax = this.makeYData(_max)
  1080. console.log('max2', _newMax)
  1081. this.opts2.xAxis.max = _newMax
  1082. let res1 = {
  1083. categories: _categories,
  1084. series: [{
  1085. name: this.index == 1 ? '过去12个月累计签订数量' : '本季累计签订合同数量',
  1086. data: _count1,
  1087. legendShape: "circle",
  1088. textColor: "transparent"
  1089. },
  1090. {
  1091. name: this.index == 1 ? '当前执行中数量' : '本季执行中数量',
  1092. data: _count2,
  1093. legendShape: "circle",
  1094. textColor: "transparent"
  1095. }
  1096. ]
  1097. };
  1098. this.chartData1 = JSON.parse(JSON.stringify(res1));
  1099. },
  1100. makeDate3(val) {
  1101. let _max = 0
  1102. let _categorieslr = []
  1103. let _countlr = []
  1104. if (val[5].biViewInfoList.length > 0) {
  1105. for (let i = 0; i < val[5].biViewInfoList.length; i++) {
  1106. _categorieslr.push(val[5].biViewInfoList[i].name.substring(0, 2))
  1107. _countlr.push(val[5].biViewInfoList[i].weight ? val[5].biViewInfoList[i].weight : 0)
  1108. }
  1109. _max = Math.max(..._countlr)
  1110. } else {
  1111. this.isHaveData3 = false
  1112. }
  1113. let _newMax = this.makeYData(_max)
  1114. console.log('max3', _newMax)
  1115. this.opts3.yAxis.data[0].max = _newMax
  1116. //利润核算
  1117. let res3 = {
  1118. categories: _categorieslr,
  1119. series: [{
  1120. name: "利润金额",
  1121. data: _countlr
  1122. }]
  1123. };
  1124. this.chartData3 = JSON.parse(JSON.stringify(res3));
  1125. },
  1126. makeDate4(val) {
  1127. let _categorieslr = []
  1128. let _countlr = []
  1129. // this.clList =
  1130. let _weightList = []
  1131. let _maxWeight = ''
  1132. if (val[8].biViewInfoList && val[8].biViewInfoList.length > 0) {
  1133. for (let i = 0; i < val[8].biViewInfoList.length; i++) {
  1134. _weightList.push(Number(val[8].biViewInfoList[i].weight).toFixed(0) ? Number(val[8].biViewInfoList[
  1135. i]
  1136. .weight).toFixed(0) : 0)
  1137. }
  1138. _maxWeight = Math.max(..._weightList) + Math.max(..._weightList) * 0.05
  1139. for (let i = 0; i < val[8].biViewInfoList.length; i++) {
  1140. let _obj = {
  1141. percent: Number(val[8].biViewInfoList[i].weight).toFixed(0) / _maxWeight * 100,
  1142. name: val[8].biViewInfoList[i].name,
  1143. weight: Number(val[8].biViewInfoList[i].weight).toFixed(0)
  1144. }
  1145. console.log("库存储量", _obj)
  1146. this.clList.push(_obj)
  1147. // _categorieslr.push(val[8].biViewInfoList[i].name)
  1148. // _countlr.push(Number(val[8].biViewInfoList[i].weight).toFixed(0) ? Number(val[8]
  1149. // .biViewInfoList[i]
  1150. // .weight).toFixed(0) : 0)
  1151. }
  1152. }
  1153. // let res4 = {
  1154. // categories: _categorieslr,
  1155. // series: [{
  1156. // name: '库存储量',
  1157. // data: _countlr
  1158. // }]
  1159. // };
  1160. // this.chartData4 = JSON.parse(JSON.stringify(res4));
  1161. let _tc = Number(val[6].biViewInfoList[0].count) + Number(val[6].biViewInfoList[1].count) - Number(
  1162. val[6].biViewInfoList[2].count)
  1163. this.InventoryList = [{
  1164. name: '合计储量',
  1165. number: Number(val[6].biViewInfoList[0].count).toFixed(3),
  1166. src: '../../static/img/cl.png'
  1167. }, {
  1168. name: '采购待执行',
  1169. number: Number(val[6].biViewInfoList[1].count).toFixed(3),
  1170. src: '../../static/img/cg.png'
  1171. },
  1172. {
  1173. name: '销待执行售',
  1174. number: Number(val[6].biViewInfoList[2].count).toFixed(3),
  1175. src: '../../static/img/xs.png'
  1176. },
  1177. {
  1178. name: '头寸',
  1179. number: Number(_tc).toFixed(3),
  1180. src: '../../static/img/tc.png'
  1181. },
  1182. ]
  1183. },
  1184. makeDate5(val) {
  1185. let _max = 0
  1186. let _categorieslr = []
  1187. let _count = []
  1188. let count = []
  1189. if (val[7].biViewInfoList && val[9].biViewInfoList.length > 0) {
  1190. for (let i = 0; i < val[9].biViewInfoList.length; i++) {
  1191. let _obj = {
  1192. value: Number(val[9].biViewInfoList[i].weight ? val[9].biViewInfoList[i].weight : 0)
  1193. .toFixed(
  1194. 0),
  1195. color: this.color[i]
  1196. }
  1197. _categorieslr.push(val[9].biViewInfoList[i].name)
  1198. _count.push(_obj)
  1199. count.push(Number(val[9].biViewInfoList[i].weight ? val[9].biViewInfoList[i].weight : 0))
  1200. }
  1201. _max = Math.max(...count)
  1202. }
  1203. let _newMax = this.makeYData(_max)
  1204. console.log('max5', _newMax)
  1205. this.opts5.yAxis.data[0].max = _newMax
  1206. // data: [{
  1207. // value: 10000,
  1208. // color: "#FFBB6E"
  1209. // },
  1210. // {
  1211. // value: 40000,
  1212. // color: "#8D9EE9"
  1213. // }, {
  1214. // value: 70000,
  1215. // color: "#FF8B95"
  1216. // }, {
  1217. // value: 90000,
  1218. // color: "#38CA80"
  1219. // },
  1220. // {
  1221. // value: 100000,
  1222. // color: "#FFDD85"
  1223. // }
  1224. // ]
  1225. let res5 = {
  1226. categories: _categorieslr,
  1227. series: [{
  1228. name: "货值(万元)",
  1229. data: _count
  1230. }]
  1231. };
  1232. this.chartData5 = JSON.parse(JSON.stringify(res5));
  1233. this.averageCostList = val[9].biViewInfoList
  1234. },
  1235. makeDate6(val) {
  1236. let _data = []
  1237. if (val[10].biViewInfoList && val[10].biViewInfoList.length > 0) {
  1238. for (let i = 0; i < val[10].biViewInfoList.length; i++) {
  1239. let _obj = {
  1240. name: val[10].biViewInfoList[i].name,
  1241. value: val[10].biViewInfoList[i].weight,
  1242. color: this.color[i],
  1243. style: {
  1244. 'background': this.color[i],
  1245. 'border-radius': '50%',
  1246. 'width': '20rpx',
  1247. 'height': '20rpx',
  1248. 'display': 'inline-block',
  1249. 'margin-right': '10rpx'
  1250. },
  1251. }
  1252. _data.push(_obj)
  1253. this.rkList = _data
  1254. }
  1255. }
  1256. let res6 = {
  1257. width: 200,
  1258. series: [{
  1259. data: _data
  1260. }]
  1261. };
  1262. this.chartData6 = JSON.parse(JSON.stringify(res6));
  1263. },
  1264. selectMakeDate7(val) {
  1265. console.log(11)
  1266. console.log(val)
  1267. this.chartData7.series = [];
  1268. let _data = []
  1269. this.ztList = []
  1270. for (let i = 0; i < val.biViewInfoList.length; i++) {
  1271. let _obj = {
  1272. name: val.biViewInfoList[i].name,
  1273. value: Number(val.biViewInfoList[i].count),
  1274. color: this.ztColor[i],
  1275. style: {
  1276. 'background': this.ztColor[i],
  1277. 'border-radius': '50%',
  1278. 'width': '20rpx',
  1279. 'height': '20rpx',
  1280. 'display': 'inline-block',
  1281. 'margin-right': '10rpx'
  1282. },
  1283. }
  1284. _data.push(_obj)
  1285. this.ztList = _data
  1286. }
  1287. console.log(_data)
  1288. let res7 = {
  1289. series: [{
  1290. data: _data
  1291. }]
  1292. };
  1293. this.chartData7 = JSON.parse(JSON.stringify(res7));
  1294. },
  1295. makeDate7(val) {
  1296. let _data = []
  1297. this.ztList = []
  1298. if (val[11].biViewInfoList && val[11].biViewInfoList.length) {
  1299. for (let i = 0; i < val[11].biViewInfoList.length; i++) {
  1300. let _obj = {
  1301. name: val[11].biViewInfoList[i].name,
  1302. value: Number(val[11].biViewInfoList[i].count),
  1303. color: this.ztColor[i],
  1304. style: {
  1305. 'background': this.ztColor[i],
  1306. 'border-radius': '50%',
  1307. 'width': '20rpx',
  1308. 'height': '20rpx',
  1309. 'display': 'inline-block',
  1310. 'margin-right': '10rpx'
  1311. },
  1312. }
  1313. _data.push(_obj)
  1314. this.ztList = _data
  1315. }
  1316. }
  1317. console.log(_data)
  1318. let res7 = {
  1319. series: [{
  1320. data: _data
  1321. }]
  1322. };
  1323. this.chartData7 = JSON.parse(JSON.stringify(res7));
  1324. },
  1325. makeDate8(val) {
  1326. let _categories = []
  1327. let _data = []
  1328. let _categories1 = []
  1329. let _data1 = []
  1330. this.appTotal = val[12].count
  1331. this.lmTotal = val[13].count
  1332. let _max1 = 0
  1333. let _max2 = 0
  1334. if (val[12].biViewInfoList && val[12].biViewInfoList.length) {
  1335. for (let i = 0; i < val[12].biViewInfoList.length; i++) {
  1336. _categories.push(new Date(val[12].biViewInfoList[i].name).getMonth() + 1 + '月')
  1337. _data.push(val[12].biViewInfoList[i].weight)
  1338. }
  1339. }
  1340. _max1 = Math.max(..._data)
  1341. if (val[13].biViewInfoList && val[13].biViewInfoList.length > 0) {
  1342. for (let i = 0; i < val[13].biViewInfoList.length; i++) {
  1343. _categories1.push(new Date(val[13].biViewInfoList[i].name).getMonth() + 1 + '月')
  1344. _data1.push(val[13].biViewInfoList[i].weight)
  1345. }
  1346. }
  1347. _max2 = Math.max(..._data1)
  1348. let _newMax1 = this.makeYData(_max1)
  1349. console.log('max8', _newMax1)
  1350. this.opts8.yAxis.data[0].max = _newMax1
  1351. let _newMax2 = this.makeYData(_max2)
  1352. console.log('max9', _newMax2)
  1353. this.opts9.yAxis.data[0].max = _newMax2
  1354. let res8 = {
  1355. categories: _categories,
  1356. series: [{
  1357. name: "成交量A",
  1358. data: _data,
  1359. textColor: "transparent"
  1360. }]
  1361. }
  1362. let res9 = {
  1363. categories: _categories1,
  1364. series: [{
  1365. name: "成交量A",
  1366. data: _data1,
  1367. textColor: "transparent"
  1368. }]
  1369. }
  1370. this.chartData8 = JSON.parse(JSON.stringify(res8))
  1371. this.chartData9 = JSON.parse(JSON.stringify(res9))
  1372. },
  1373. isShowChart(val, index) {
  1374. if (val.length == 0) {
  1375. return false
  1376. switch (index) {
  1377. case 3:
  1378. this.isHaveData3 = false
  1379. }
  1380. }
  1381. return true
  1382. },
  1383. getServerData() {
  1384. uni.showLoading({
  1385. title: "加载中",
  1386. mask: true
  1387. })
  1388. this.$api.doRequest('get', '/biInfoController/selectPhoneBiInfo?compId=' + uni.getStorageSync(
  1389. 'pcUserInfo')
  1390. .compId + '&seachMoth=' + this.seachMoth + '&seachYear=' + this.seachYear).then(
  1391. res => {
  1392. console.log("数据报表", res)
  1393. uni.hideLoading()
  1394. this.chartList = res.data.data
  1395. // 收支核算数据处理
  1396. this.makeDate1(res.data.data)
  1397. //合同数据
  1398. this.makeDate2(res.data.data)
  1399. //利润核算
  1400. this.makeDate3(res.data.data)
  1401. //库存储量
  1402. this.makeDate4(res.data.data)
  1403. //当期货值
  1404. this.makeDate5(res.data.data)
  1405. //今日入库
  1406. this.makeDate6(res.data.data)
  1407. //在途数据
  1408. this.makeDate7(res.data.data)
  1409. //APP注册
  1410. this.makeDate8(res.data.data)
  1411. // uni.hideLoading()
  1412. })
  1413. //模拟从服务器获取数据时的延时
  1414. setTimeout(() => {
  1415. //模拟服务器返回数据,如果数据格式和标准格式不同,需自行按下面的格式拼接
  1416. // let res = {
  1417. // categories: ["2016", "2017", "2018", "2019", "2020", "2021", "2022", "2023"],
  1418. // series: [{
  1419. // name: "收入",
  1420. // data: [70, 40, 65, 100, 44, 68, 90, 240]
  1421. // }, {
  1422. // name: "支出",
  1423. // data: [35, 8, 25, 37, 4, 20, 56, 30]
  1424. // }
  1425. // ]
  1426. // };
  1427. // this.chartData = JSON.parse(JSON.stringify(res));
  1428. // let res1 = {
  1429. // categories: ["2016", "2017", "2018", "2019", "2020", "2021"],
  1430. // series: [{
  1431. // name: this.index == 1 ? '过去12个月累计签订数量' : '本季累计签订合同数量',
  1432. // data: [35, 36, 31, 33, 13, 34],
  1433. // legendShape: "circle",
  1434. // },
  1435. // {
  1436. // name: this.index == 1 ? '当前执行中数量' : '本季执行中数量',
  1437. // data: [18, 27, 21, 24, 6, 28],
  1438. // legendShape: "circle"
  1439. // }
  1440. // ]
  1441. // };
  1442. // this.chartData1 = JSON.parse(JSON.stringify(res1));
  1443. // let res3 = {
  1444. // categories: ["销售", "采购", "收购", "代收", "代储"],
  1445. // series: [{
  1446. // name: "利润金额",
  1447. // data: [35, 36, 31, 33, 13]
  1448. // }]
  1449. // };
  1450. // this.chartData3 = JSON.parse(JSON.stringify(res3));
  1451. let res4 = {
  1452. categories: ["小麦", "高粱(潮粮)", "高粱", "玉米(潮粮)", "玉米"],
  1453. series: [{
  1454. name: '库存储量',
  1455. data: [{
  1456. value: 35,
  1457. color: "#FFBB6E"
  1458. },
  1459. {
  1460. value: 36,
  1461. color: "#8D9EE9"
  1462. }, {
  1463. value: 31,
  1464. color: "#FF8B95"
  1465. }, {
  1466. value: 33,
  1467. color: "#38CA80"
  1468. },
  1469. {
  1470. color: "#FFDD85"
  1471. }
  1472. ]
  1473. }]
  1474. };
  1475. this.chartData4 = JSON.parse(JSON.stringify(res4));
  1476. // let res5 = {
  1477. // categories: ["小麦", "高粱(潮粮)", "高粱", "玉米(潮粮)", "玉米"],
  1478. // series: [{
  1479. // name: "利润金额",
  1480. // data: [{
  1481. // value: 10000,
  1482. // color: "#FFBB6E"
  1483. // },
  1484. // {
  1485. // value: 40000,
  1486. // color: "#8D9EE9"
  1487. // }, {
  1488. // value: 70000,
  1489. // color: "#FF8B95"
  1490. // }, {
  1491. // value: 90000,
  1492. // color: "#38CA80"
  1493. // },
  1494. // {
  1495. // value: 100000,
  1496. // color: "#FFDD85"
  1497. // }
  1498. // ]
  1499. // }]
  1500. // };
  1501. // this.chartData5 = JSON.parse(JSON.stringify(res5));
  1502. // let res6 = {
  1503. // series: [{
  1504. // data: [{
  1505. // "name": "一班",
  1506. // "value": 50
  1507. // }, {
  1508. // "name": "二班",
  1509. // "value": 30
  1510. // }, {
  1511. // "name": "三班",
  1512. // "value": 20
  1513. // }, {
  1514. // "name": "四班",
  1515. // "value": 18
  1516. // }, {
  1517. // "name": "五班",
  1518. // "value": 8
  1519. // }]
  1520. // }]
  1521. // };
  1522. // this.chartData6 = JSON.parse(JSON.stringify(res6));
  1523. // let res7 = {
  1524. // series: [{
  1525. // data: [{
  1526. // "name": "一班",
  1527. // "value": 50
  1528. // }, {
  1529. // "name": "二班",
  1530. // "value": 30
  1531. // }, {
  1532. // "name": "三班",
  1533. // "value": 20
  1534. // }, {
  1535. // "name": "四班",
  1536. // "value": 18
  1537. // }, {
  1538. // "name": "五班",
  1539. // "value": 8
  1540. // }]
  1541. // }]
  1542. // };
  1543. // this.chartData7 = JSON.parse(JSON.stringify(res7));
  1544. // let res8 = {
  1545. // categories: ["2016", "2017", "2018", "2019", "2020", "2021"],
  1546. // series: [{
  1547. // name: "成交量A",
  1548. // data: [35, 8, 25, 37, 4, 20]
  1549. // }
  1550. // ]
  1551. // };
  1552. // this.chartData8 = JSON.parse(JSON.stringify(res8));
  1553. // let res9 = {
  1554. // categories: ["2016", "2017", "2018", "2019", "2020", "2021"],
  1555. // series: [{
  1556. // name: "成交量A",
  1557. // data: [35, 8, 25, 37, 4, 20]
  1558. // },
  1559. // {
  1560. // name: "成交量B",
  1561. // data: [70, 40, 65, 100, 44, 68]
  1562. // },
  1563. // {
  1564. // name: "成交量C",
  1565. // data: [100, 80, 95, 150, 112, 132]
  1566. // }
  1567. // ]
  1568. // };
  1569. // this.chartData9 = JSON.parse(JSON.stringify(res9));
  1570. },
  1571. 500);
  1572. },
  1573. back() {
  1574. uni.navigateBack()
  1575. },
  1576. navClick(val) {
  1577. this.clList = []
  1578. this.index = val
  1579. if (val == 1) {
  1580. this.seachMoth = ''
  1581. } else {
  1582. this.seachMoth = '2022-10-10'
  1583. }
  1584. this.getServerData();
  1585. },
  1586. accounting(val) {
  1587. this.textIndex = val
  1588. if (val == 1) {
  1589. console.log("按月")
  1590. } else {
  1591. console.log("按年")
  1592. }
  1593. this.makeDate1(this.chartList)
  1594. }
  1595. }
  1596. }
  1597. </script>
  1598. <style scoped lang="scss">
  1599. .flex {
  1600. display: flex;
  1601. }
  1602. .alc {
  1603. align-items: center;
  1604. }
  1605. .jcse {
  1606. justify-content: space-evenly;
  1607. }
  1608. .jcsb {
  1609. justify-content: space-between;
  1610. }
  1611. .mtb40 {
  1612. margin: 40rpx 0;
  1613. }
  1614. .title-lv2 {
  1615. font-weight: bold;
  1616. color: #333333;
  1617. }
  1618. .status_bar {
  1619. height: var(--status-bar-height);
  1620. width: 100%;
  1621. }
  1622. .top-nav {
  1623. display: flex;
  1624. align-items: center;
  1625. justify-content: space-evenly;
  1626. position: relative;
  1627. }
  1628. .back {
  1629. position: absolute;
  1630. left: 20rpx;
  1631. top: 0;
  1632. bottom: 0;
  1633. margin: auto;
  1634. }
  1635. .zd {
  1636. color: #969696;
  1637. margin-top: 20rpx;
  1638. justify-content: center;
  1639. }
  1640. .top-nav {
  1641. font-size: 36rpx;
  1642. background: white;
  1643. padding: 20rpx;
  1644. }
  1645. .nav-active {
  1646. font-weight: 700;
  1647. position: relative;
  1648. }
  1649. .nav-active:after {
  1650. content: "";
  1651. position: absolute;
  1652. bottom: -20rpx;
  1653. left: 0;
  1654. right: 0;
  1655. margin: auto;
  1656. height: 10rpx;
  1657. width: 60%;
  1658. background: #262626;
  1659. border-radius: 40rpx;
  1660. }
  1661. .content-item {
  1662. background: white;
  1663. margin: 20rpx 25rpx 0 25rpx;
  1664. border-radius: 20rpx;
  1665. padding: 20rpx;
  1666. box-sizing: border-box;
  1667. }
  1668. .title {
  1669. margin-bottom: 22rpx;
  1670. font-size: 32rpx;
  1671. font-weight: 700;
  1672. color: #343434;
  1673. }
  1674. .right-btn {
  1675. width: 120rpx;
  1676. height: 42rpx;
  1677. display: flex;
  1678. align-items: center;
  1679. justify-content: center;
  1680. background: #F1F1F1;
  1681. border-radius: 30px;
  1682. font-size: 22rpx;
  1683. color: #707575;
  1684. }
  1685. .content1 {
  1686. .content1-wrap {}
  1687. .row1 {
  1688. display: flex;
  1689. justify-content: space-between;
  1690. align-items: center;
  1691. .left {
  1692. color: #868686;
  1693. }
  1694. .text {
  1695. margin-left: 38rpx;
  1696. color: #2E303A;
  1697. height: 60rpx;
  1698. display: inline-block;
  1699. line-height: 60rpx;
  1700. padding: 0 26rpx;
  1701. }
  1702. .text-active {
  1703. // margin-left: 38rpx;
  1704. color: #FFF;
  1705. background: #2E303A;
  1706. // padding: 1rpx 26rpx;
  1707. height: 60rpx;
  1708. display: inline-block;
  1709. line-height: 60rpx;
  1710. padding: 0 26rpx;
  1711. border-radius: 10rpx;
  1712. }
  1713. }
  1714. .row2 {
  1715. display: flex;
  1716. flex-direction: column;
  1717. align-items: center;
  1718. .text {
  1719. color: #636363;
  1720. margin-bottom: 10rpx
  1721. }
  1722. .price {
  1723. font-size: 56rpx;
  1724. font-weight: 700;
  1725. color: #D79C58;
  1726. }
  1727. }
  1728. .row3 {
  1729. display: flex;
  1730. justify-content: space-between;
  1731. margin-top: 27rpx;
  1732. align-items: center;
  1733. .center {
  1734. width: 2px;
  1735. height: 61rpx;
  1736. border: 2rpx solid #EEEEEE;
  1737. }
  1738. .left,
  1739. .right {
  1740. // background: green;
  1741. width: calc(50% - 1px);
  1742. text-align: center;
  1743. .text {
  1744. color: #636363
  1745. }
  1746. .number {
  1747. margin-top: 12rpx;
  1748. font-size: 34rpx;
  1749. font-weight: 700;
  1750. color: #343434;
  1751. }
  1752. }
  1753. }
  1754. .row4 {
  1755. margin-top: 20rpx;
  1756. }
  1757. .row5 {
  1758. background: #F6F6F6;
  1759. border-radius: 8px;
  1760. padding: 16rpx 0;
  1761. box-sizing: border-box;
  1762. margin: 20rpx 0;
  1763. .left,
  1764. .right {
  1765. width: 50%;
  1766. text-align: center;
  1767. }
  1768. .point-left {
  1769. width: 11rpx;
  1770. height: 11rpx;
  1771. background: #E84A55;
  1772. display: inline-block;
  1773. border-radius: 50%;
  1774. margin: 6rpx;
  1775. }
  1776. .point-right {
  1777. width: 11rpx;
  1778. height: 11rpx;
  1779. background: #22C572;
  1780. display: inline-block;
  1781. border-radius: 50%;
  1782. margin: 6rpx;
  1783. }
  1784. .text-left {
  1785. color: #E84A55;
  1786. font-weight: 700;
  1787. }
  1788. .text-right {
  1789. color: #22C572;
  1790. font-weight: 700;
  1791. }
  1792. }
  1793. }
  1794. .content2 {
  1795. .row1 {}
  1796. .row2 {
  1797. color: #707575;
  1798. font-size: 22rpx;
  1799. .color1 {
  1800. width: 16rpx;
  1801. height: 12rpx;
  1802. background: #D2F3E2;
  1803. border-radius: 7rpx;
  1804. margin-right: 10rpx;
  1805. }
  1806. .color2 {
  1807. width: 16rpx;
  1808. height: 12rpx;
  1809. background: #2CC778;
  1810. border-radius: 7rpx;
  1811. margin-right: 10rpx;
  1812. }
  1813. }
  1814. .row5 {
  1815. display: flex;
  1816. justify-content: space-between;
  1817. color: #9E9E9E;
  1818. .left {}
  1819. }
  1820. }
  1821. .content3 {
  1822. .right {
  1823. color: #9E9E9E;
  1824. }
  1825. .row2 {
  1826. .name {
  1827. color: #7A7A7A;
  1828. margin: 17rpx 0;
  1829. }
  1830. .bottom {
  1831. display: flex;
  1832. }
  1833. .left {
  1834. width: 80%;
  1835. }
  1836. .weight {
  1837. margin-left: 20rpx;
  1838. }
  1839. }
  1840. .row3 {
  1841. padding: 31rpx 25rpx 51rpx 25rpx;
  1842. border-radius: 15rpx;
  1843. margin-top: 31rpx;
  1844. background: #FAFAFA;
  1845. .list-item {
  1846. margin-top: 20rpx;
  1847. .number {
  1848. font-weight: 700;
  1849. }
  1850. }
  1851. }
  1852. .row7 {
  1853. .list-item {
  1854. font-size: 24rpx;
  1855. display: inline-block;
  1856. padding: 20rpx;
  1857. box-sizing: border-box;
  1858. background: #FAFAFA;
  1859. width: calc(50% - 40rpx);
  1860. margin: 20rpx;
  1861. border-radius: 8rpx;
  1862. }
  1863. }
  1864. }
  1865. .content4 {
  1866. .row1 {
  1867. display: flex;
  1868. .opts6 uni-canvas {
  1869. width: 200px;
  1870. }
  1871. }
  1872. }
  1873. .content5 {
  1874. .days-nav {
  1875. display: flex;
  1876. justify-content: space-evenly;
  1877. }
  1878. }
  1879. .zt-right {
  1880. flex-direction: column;
  1881. justify-content: space-evenly;
  1882. height: 100px;
  1883. display: flex;
  1884. width: 100%;
  1885. }
  1886. .content6 {
  1887. .row1 {
  1888. margin: 20rpx 0;
  1889. }
  1890. .left {
  1891. // font-weight: 700;
  1892. // margin
  1893. }
  1894. }
  1895. .days-nav {
  1896. margin: 20rpx;
  1897. background: #F5F6FA;
  1898. border-radius: 8rpx;
  1899. padding: 4rpx 0;
  1900. .item {
  1901. width: 33%;
  1902. display: flex;
  1903. justify-content: center;
  1904. padding: 6px 0;
  1905. }
  1906. .item-active {
  1907. background: #fff;
  1908. }
  1909. }
  1910. </style>