newReport.vue 47 KB

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