286127c403c306793e369344f9f36d5004118b52.svn-base 72 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037103810391040104110421043104410451046104710481049105010511052105310541055105610571058105910601061106210631064106510661067106810691070107110721073107410751076107710781079108010811082108310841085108610871088108910901091109210931094109510961097109810991100110111021103110411051106110711081109111011111112111311141115111611171118111911201121112211231124112511261127112811291130113111321133113411351136113711381139114011411142114311441145114611471148114911501151115211531154115511561157115811591160116111621163116411651166116711681169117011711172117311741175117611771178117911801181118211831184118511861187118811891190119111921193119411951196119711981199120012011202120312041205120612071208120912101211121212131214121512161217121812191220122112221223122412251226122712281229123012311232123312341235123612371238123912401241124212431244124512461247124812491250125112521253125412551256125712581259126012611262126312641265126612671268126912701271127212731274127512761277127812791280128112821283128412851286128712881289129012911292129312941295129612971298129913001301130213031304130513061307130813091310131113121313131413151316131713181319132013211322132313241325132613271328132913301331133213331334133513361337133813391340134113421343134413451346134713481349135013511352135313541355135613571358135913601361136213631364136513661367136813691370137113721373137413751376137713781379138013811382138313841385138613871388138913901391139213931394139513961397139813991400140114021403140414051406140714081409141014111412141314141415141614171418141914201421142214231424142514261427142814291430143114321433143414351436143714381439144014411442144314441445144614471448144914501451145214531454145514561457145814591460146114621463146414651466146714681469147014711472147314741475147614771478147914801481148214831484148514861487148814891490149114921493149414951496149714981499150015011502150315041505150615071508150915101511151215131514151515161517151815191520152115221523152415251526152715281529153015311532153315341535153615371538153915401541154215431544154515461547154815491550155115521553155415551556155715581559156015611562156315641565156615671568156915701571157215731574157515761577157815791580158115821583158415851586158715881589159015911592159315941595159615971598159916001601160216031604160516061607160816091610161116121613161416151616161716181619162016211622162316241625162616271628162916301631163216331634163516361637163816391640164116421643164416451646164716481649165016511652165316541655165616571658165916601661166216631664166516661667166816691670167116721673167416751676167716781679168016811682168316841685168616871688168916901691169216931694169516961697169816991700170117021703170417051706170717081709171017111712171317141715171617171718171917201721172217231724172517261727172817291730173117321733173417351736173717381739174017411742174317441745174617471748174917501751175217531754175517561757
  1. <template>
  2. <div ref="dashboardEditor" class="dashboard-editor-container">
  3. <div class="dashboard" style="margin-bottom: 10px;">
  4. <div class="dashboard-l">
  5. <div class="row1">
  6. <div class="row1-t">
  7. <div class="row1-t-l">
  8. <div class="img-l" />
  9. <span class="content">暂无消息通知</span>
  10. <!-- <div class="img-r" /> -->
  11. </div>
  12. <div class="row1-t-r">{{ date }}</div>
  13. </div>
  14. <div class="row1-c">
  15. <div class="row1-c-l">
  16. <div class="title1">
  17. <div class="img-title">
  18. <img src="../../../assets/images/index/l1.png">
  19. </div>
  20. <span class="content">混料准确率</span>
  21. </div>
  22. <div class="row1-c-l-c">
  23. <span>
  24. <b>{{ row1.list.yesRateHL }}</b>
  25. <br>昨日
  26. </span>
  27. </div>
  28. <div class="row1-c-l-b">
  29. <div><span>近30天混料准确率:</span><b>{{ row1.list.monRateHL }}</b></div>
  30. </div>
  31. </div>
  32. <div class="row1-c-r">
  33. <div class="title1">
  34. <div class="img-title">
  35. <img src="../../../assets/images/index/l4.png">
  36. </div>
  37. <span class="content">撒料准确率</span>
  38. </div>
  39. <div class="row1-c-l-c">
  40. <span>
  41. <b>{{ row1.list.yesRateSL }}</b>
  42. <br>昨日
  43. </span>
  44. </div>
  45. <div class="row1-c-l-b">
  46. <div><span>近30天撒料准确率:</span><b>{{ row1.list.monRateSL }}</b></div>
  47. </div>
  48. </div>
  49. </div>
  50. <div class="row1-b">
  51. <div class="row1-b-l">
  52. <div class="title1">
  53. <div class="img-title">
  54. <img src="../../../assets/images/index/l3.png">
  55. </div>
  56. <span class="content">撒料正确率</span>
  57. </div>
  58. <div class="row1-c-l-c">
  59. <span>
  60. <b>{{ row1.list.yesRateSLR }}</b>
  61. <br>昨日
  62. </span>
  63. </div>
  64. <div class="row1-c-l-b">
  65. <div><span>近30天撒料正确率:</span><b>{{ row1.list.monRateSLR }}</b></div>
  66. </div>
  67. </div>
  68. <div class="row1-b-r">
  69. <div class="title1">
  70. <div class="img-title">
  71. <img src="../../../assets/images/index/l2.png">
  72. </div>
  73. <span class="content">撒料偏差</span>
  74. </div>
  75. <div class="row1-c-l-c">
  76. <span>
  77. <b>{{ row1.list.temtime }}</b>
  78. <br>昨日
  79. </span>
  80. </div>
  81. <div class="row1-c-l-b">
  82. <div><span>近30天撒料偏差:</span><b>{{ row1.list.montime }}</b>分钟</div>
  83. </div>
  84. </div>
  85. </div>
  86. </div>
  87. <div class="row2">
  88. <div class="title">
  89. <div class="img-title" />
  90. <span class="content">今日计划统计</span>
  91. </div>
  92. <div class="todayPlan">
  93. <div>
  94. <div id="row2chartLine1" style="height: 185px;" />
  95. <div class="bottom">
  96. <div class="bottom-l">
  97. <div class="bottom-l-t">
  98. <b>{{ row2.chart1.chartLine_data.data1 }}</b>次
  99. </div>
  100. <div class="bottom-l-b">
  101. 完成车次
  102. </div>
  103. </div>
  104. <div class="bottom-r">
  105. <div class="bottom-r-t">
  106. <b>{{ row2.chart1.chartLine_data.data2 }}</b>次
  107. </div>
  108. <div class="bottom-r-b">
  109. 计划车次
  110. </div>
  111. </div>
  112. </div>
  113. </div>
  114. <div>
  115. <div id="row2chartLine2" style="height: 185px;" />
  116. <div class="bottom">
  117. <div class="bottom-l">
  118. <div class="bottom-l-t">
  119. <b>{{ row2.chart2.chartLine_data.data1 }}</b>kg
  120. </div>
  121. <div class="bottom-l-b">
  122. 完成重量
  123. </div>
  124. </div>
  125. <div class="bottom-r">
  126. <div class="bottom-r-t">
  127. <b>{{ row2.chart2.chartLine_data.data2 }}</b>kg
  128. </div>
  129. <div class="bottom-r-b">
  130. 计划重量
  131. </div>
  132. </div>
  133. </div>
  134. </div>
  135. </div>
  136. </div>
  137. <div class="row3" style="position: relative;">
  138. <div class="title">
  139. <div class="img-title" />
  140. <span class="content">成本统计</span>
  141. </div>
  142. <div v-if="row4.chart1.isChart" class="button">
  143. <div class="exportTable" @click="handleExport('row4chartLine1')">导出</div>
  144. <div class="exportTable" @click="handleTable('row4chartLine1')">切换表格</div>
  145. </div>
  146. <div v-if="row4.chart1.isChart" id="row4chartLine1" v-loading="row4.chart1.listLoading" style="background: #fff;height:310px;" />
  147. <div v-if="row4.chart1.isTable" class="table" style="position: absolute;width: 100%;">
  148. <div class="button">
  149. <div class="exportTable" @click="handleExport('row4chartLine1')">导出</div>
  150. <div class="exportTable" @click="handleChart('row4chartLine1')">切换图表</div>
  151. </div>
  152. <el-table
  153. :key="row4.chart1.table.tableKey"
  154. v-loading="row4.chart1.table.listLoading"
  155. element-loading-text="给我一点时间"
  156. :data="row4.chart1.table.list"
  157. border
  158. fit
  159. highlight-current-row
  160. style="width: 100%;margin-top: 10px;"
  161. height="300"
  162. :row-style="rowStyle"
  163. :cell-style="cellStyle"
  164. class="elTable table-fixed"
  165. >
  166. <el-table-column label="日期" sortable min-width="110px" align="center" prop="日期" />
  167. <el-table-column label="单头牛饲料成本" sortable min-width="110px" align="center" prop="field2" />
  168. <el-table-column label="公斤奶饲料成本(元)" sortable min-width="120px" align="center" prop="field1" />
  169. </el-table>
  170. </div>
  171. </div>
  172. </div>
  173. <div class="dashboard-r">
  174. <div class="row1">
  175. <div class="title">
  176. <div class="img-title" />
  177. <span class="content">实时监控</span>
  178. </div>
  179. <div v-if="carLength>0" id="row2chartLine3" ref="row2chartLine3" style="height: 260px;" />
  180. <div v-else style="height: 260px;text-align: center;line-height: 260px;">当前无正在进行中车次 </div>
  181. <div class="carsLength">当前车辆:<span>{{ carLength }}</span></div>
  182. <div id="car" ref="car" v-loading="row2.chart3.listLoading2" class="car">
  183. <div ref="iconLeft" class="iconLeft" @click="handleLeft">
  184. <img v-if="row2.chart3.isLeft" src="../../../assets/images/index/row-r3.png" class="img-title">
  185. <img v-if="row2.chart3.isLeftA" src="../../../assets/images/index/row-r2.png" class="img-title">
  186. </div>
  187. <div id="carList" ref="carList" class="carList">
  188. <div v-for="(item,index) in list" ref="listW" :key="index" class="listW">
  189. <div ref="list" class="list" :style="{'background': item.background,'color':item.color,'borderColor':item.borderColor}" @click="handleList(index,item)">
  190. <div class="list-t">
  191. <div class="list-t-t">
  192. <el-tooltip :content="item.tname" placement="top">
  193. <span>车辆:{{ item.tname }}</span>
  194. </el-tooltip>
  195. </div>
  196. <div class="list-t-t">
  197. <el-tooltip :content="item.fname" placement="top">
  198. <span v-if="item.inorout == 0">饲料:{{ item.fname }}</span>
  199. <span v-if="item.inorout == 1">栏舍:{{ item.fname }}</span>
  200. </el-tooltip>
  201. </div>
  202. <div class="list-t-t">
  203. <el-tooltip :content="item.remark" placement="top">
  204. <span>描述:{{ item.remark }}</span>
  205. </el-tooltip>
  206. </div>
  207. </div>
  208. <div class="list-b">
  209. <div class="list-b-l">
  210. <div class="left">
  211. <div class="num"><b>{{ row2.chart2.chartLine_data.data1 }}</b>Kg</div>
  212. <div class="weight">完成重量</div>
  213. </div>
  214. <div class="right" />
  215. </div>
  216. <div class="list-b-l">
  217. <div class="left">
  218. <div class="num"><b>{{ item.leftweight }}</b>Kg</div>
  219. <div class="weight">剩余重量</div>
  220. </div>
  221. <div class="right" />
  222. </div>
  223. <div class="list-b-l">
  224. <div class="left">
  225. <div class="num"><b>{{ item.nowweight }}</b>Kg</div>
  226. <div class="weight">车辆当前载重</div>
  227. </div>
  228. <div class="right" />
  229. </div>
  230. <div class="list-b-l">
  231. <div class="left">
  232. <div class="num"><b>{{ row2.chart2.chartLine_data.data2 }}</b>Kg</div>
  233. <div class="weight">计划重量</div>
  234. </div>
  235. <div class="right" />
  236. </div>
  237. <div class="list-b-l">
  238. <div class="left">
  239. <div class="num"><b>{{ item.donerate }}</b></div>
  240. <div class="weight">完成度</div>
  241. </div>
  242. </div>
  243. </div>
  244. </div>
  245. <div v-if="item.isChecked" ref="checked" class="img-checked" />
  246. </div>
  247. </div>
  248. <div ref="iconRight" class="iconRight" @click="handleRight">
  249. <img v-if="row2.chart3.isRightA" src="../../../assets/images/index/row-r5.png" class="img-title">
  250. <img v-if="row2.chart3.isRight" src="../../../assets/images/index/row-r4.png" class="img-title">
  251. </div>
  252. </div>
  253. </div>
  254. <div class="row2">
  255. <div class="row2-l" style="position: relative;">
  256. <div class="title">
  257. <div class="img-title" />
  258. <span class="content">计划统计</span>
  259. </div>
  260. <div v-if="row3.chart1.isChart" class="button">
  261. <div class="exportTable" @click="handleExport('row3chartLine1')">导出</div>
  262. <div class="exportTable" @click="handleTable('row3chartLine1')">切换表格</div>
  263. </div>
  264. <div v-if="row3.chart1.isChart" id="row3chartLine1" v-loading="row3.chart1.listLoading" style="background: #fff;height:310px;" />
  265. <div v-if="row3.chart1.isTable" class="table" style="position: absolute;width: 100%;">
  266. <div class="button">
  267. <div class="exportTable" @click="handleExport('row3chartLine1')">导出</div>
  268. <div class="exportTable" @click="handleChart('row3chartLine1')">切换图表</div>
  269. </div>
  270. <el-table
  271. :key="row3.chart1.table.tableKey"
  272. v-loading="row3.chart1.table.listLoading"
  273. element-loading-text="给我一点时间"
  274. :data="row3.chart1.table.list"
  275. border
  276. fit
  277. highlight-current-row
  278. style="width: 100%;margin-top: 10px;"
  279. height="300"
  280. :row-style="rowStyle"
  281. :cell-style="cellStyle"
  282. class="elTable table-fixed"
  283. >
  284. <el-table-column label="日期" sortable min-width="85px" align="center" prop="日期" />
  285. <el-table-column label="计划执行重量(kg)" sortable min-width="90px" align="center" prop="实际量" />
  286. <el-table-column label="配方理论重量(kg)" sortable min-width="90px" align="center" prop="理论量" />
  287. <el-table-column label="计划准确率" sortable min-width="85px" align="center" prop="field1" />
  288. <el-table-column label="计划取消重量(kg)" sortable min-width="90px" align="center" prop="计划取消重量" />
  289. <el-table-column label="计划准确率(去除取消重量)" sortable min-width="100px" align="center" prop="field3" />
  290. <el-table-column label="计划正确数" sortable min-width="85px" align="center" prop="正确数" />
  291. <el-table-column label="计划数" sortable min-width="85px" align="center" prop="计划数" />
  292. <el-table-column label="计划正确率" sortable min-width="75px" align="center" prop="field2" />
  293. </el-table>
  294. </div>
  295. </div>
  296. <div class="row2-r" style="position: relative;">
  297. <div class="title">
  298. <div class="img-title" />
  299. <span class="content">泌乳牛干物质采食量</span>
  300. </div>
  301. <div v-if="row3.chart2.isChart" class="button">
  302. <div class="exportTable" @click="handleExport('row3chartLine2')">导出</div>
  303. <div class="exportTable" @click="handleTable('row3chartLine2')">切换表格</div>
  304. </div>
  305. <div v-if="row3.chart2.isChart" id="row3chartLine2" v-loading="row3.chart2.listLoading" style="background: #fff;height:310px;" />
  306. <div v-if="row3.chart2.isTable" class="table" style="position: absolute;width: 100%;">
  307. <div class="button">
  308. <div class="exportTable" @click="handleExport('row3chartLine2')">导出</div>
  309. <div class="exportTable" @click="handleChart('row3chartLine2')">切换图表</div>
  310. </div>
  311. <el-table
  312. :key="row3.chart2.table.tableKey"
  313. v-loading="row3.chart2.table.listLoading"
  314. element-loading-text="给我一点时间"
  315. :data="row3.chart2.table.list"
  316. border
  317. fit
  318. highlight-current-row
  319. style="width: 100%;margin-top: 10px;"
  320. height="300"
  321. :row-style="rowStyle"
  322. :cell-style="cellStyle"
  323. class="elTable table-fixed"
  324. >
  325. <el-table-column label="日期" sortable min-width="110px" align="center" prop="日期" />
  326. <el-table-column label="泌乳牛采食量(kg)" sortable min-width="110px" align="center" prop="field1" />
  327. <el-table-column label="泌乳牛产奶量(kg)" sortable min-width="110px" align="center" prop="field2" />
  328. </el-table>
  329. </div>
  330. </div>
  331. </div>
  332. <div class="row3">
  333. <div class="row3-l" style="position: relative;">
  334. <div class="title">
  335. <div class="img-title" />
  336. <span class="content">混料实际重量统计</span>
  337. </div>
  338. <div v-if="row4.chart2.isChart" class="button">
  339. <div class="exportTable" @click="handleExport('row4chartLine2')">导出</div>
  340. <div class="exportTable" @click="handleTable('row4chartLine2')">切换表格</div>
  341. </div>
  342. <div v-if="row4.chart2.isChart" id="row4chartLine2" v-loading="row4.chart2.listLoading" style="background: #fff;height:310px;" />
  343. <div v-if="row4.chart2.isTable" class="table" style="position: absolute;width:100%;">
  344. <div class="button">
  345. <div class="exportTable" @click="handleExport('row4chartLine2')">导出</div>
  346. <div class="exportTable" @click="handleChart('row4chartLine2')">切换图表</div>
  347. </div>
  348. <el-table
  349. :key="row4.chart2.table.tableKey"
  350. v-loading="row4.chart2.table.listLoading"
  351. element-loading-text="给我一点时间"
  352. :data="row4.chart2.table.list"
  353. border
  354. fit
  355. highlight-current-row
  356. style="width: 100%;margin-top: 10px;"
  357. height="300"
  358. :row-style="rowStyle"
  359. :cell-style="cellStyle"
  360. class="elTable table-fixed"
  361. >
  362. <el-table-column label="日期" sortable min-width="110px" align="center" prop="日期" />
  363. <el-table-column label="重量" sortable min-width="110px" align="center" prop="field1" />
  364. </el-table>
  365. </div>
  366. </div>
  367. <div class="row3-r">
  368. <div class="title">
  369. <div class="img-title" />
  370. <span class="content">库存预警</span>
  371. <a style="float: right;color: #009C69;font-size: 12px;margin-right: 10px;" @click="handleMore">查看更多 &nbsp;>></a>
  372. </div>
  373. <div id="table" style="height: 330px;background: #fff;">
  374. <el-table
  375. :key="row4.table.tableKey"
  376. v-loading="row4.table.listLoading"
  377. element-loading-text="给我一点时间"
  378. :data="row4.table.list"
  379. border
  380. fit
  381. highlight-current-row
  382. style="width: 98%;background: #fff;margin-top: 10px;"
  383. height="320"
  384. :row-style="rowStyle"
  385. :cell-style="cellStyle"
  386. class="elTable table-fixed"
  387. >
  388. <el-table-column label="序号" type="index" min-width="80px" align="center" />
  389. <el-table-column label="饲料名称" min-width="80px" align="center" prop="feedname" />
  390. <el-table-column label="库存量(kg)" min-width="70px" align="center" prop="stockweight" />
  391. <el-table-column label="剩余使用天数" min-width="80px" align="center" prop="ldays" />
  392. </el-table>
  393. </div>
  394. </div>
  395. </div>
  396. </div>
  397. </div>
  398. </div>
  399. </template>
  400. <script>
  401. import { GetDataByName, GetReportform } from '@/api/common'
  402. import Cookies from 'js-cookie'
  403. import { parseTime } from '@/utils/index.js'
  404. import echarts from 'echarts'
  405. import { json2excel } from '@/utils/index.js'
  406. require('echarts/theme/macarons')
  407. // var myKey = 0
  408. var that = this
  409. var carIndex = 0 // 判断是否大于当前车辆数
  410. var index = 0 // 判断当前跳到第几个车辆
  411. var timer = null
  412. export default {
  413. name: 'PastureDashboard',
  414. inject: ['reload'],
  415. data() {
  416. return {
  417. val: '这是值1',
  418. date: parseTime(new Date(), '{y}-{m}-{d}'),
  419. list: [],
  420. news: 1,
  421. carLength: 0, // 车辆
  422. myKey: 0, // 轮播Key值
  423. row1: {
  424. getdataListParm: {
  425. name: 'getHomepageStr',
  426. page: 1,
  427. offset: 1,
  428. pagecount: 10,
  429. returntype: 'Map',
  430. parammaps: {
  431. pastureid: Cookies.get('pastureid')
  432. }
  433. },
  434. listLoading: true,
  435. list: ''
  436. },
  437. row2: {
  438. chart1: {
  439. chartLine: null,
  440. chartLine_data: {}
  441. },
  442. chart2: {
  443. chartLine: null,
  444. chartLine_data: {}
  445. },
  446. chart3: {
  447. isLeft: true,
  448. isRight: true,
  449. chartLine: null,
  450. chartLine_data: {},
  451. getdataListParm: {
  452. name: 'getHomeprocessAnalysis',
  453. page: 1,
  454. offset: 1,
  455. pagecount: 2,
  456. returntype: 'Map',
  457. parammaps: {
  458. pastureid: Cookies.get('pastureid'),
  459. id: '',
  460. pid: ''
  461. }
  462. },
  463. list: [],
  464. total: 0,
  465. listLoading: true,
  466. pageNum: '',
  467. pages: '',
  468. getdataListParmList: {
  469. name: 'getHomepageLBList',
  470. page: 1,
  471. offset: 1,
  472. pagecount: 2,
  473. returntype: 'Map',
  474. parammaps: {
  475. pastureid: Cookies.get('pastureid')
  476. }
  477. },
  478. list2: [],
  479. total2: 0,
  480. listLoading2: true,
  481. pageNum2: '',
  482. pages2: ''
  483. }
  484. },
  485. row3: {
  486. chartDate: [],
  487. chart1: {
  488. chartLine: null,
  489. chartLine_data: {},
  490. getdataListParm: {
  491. name: 'getAccuracyAllJH',
  492. page: 1,
  493. offset: 1,
  494. pagecount: 10,
  495. returntype: 'Map',
  496. parammaps: {
  497. pastureid: Cookies.get('pastureid'),
  498. startTime: parseTime(new Date(), '{y}-{m}-{d}'),
  499. stopTime: parseTime(new Date(), '{y}-{m}-{d}'),
  500. inputDatetime: [new Date(), new Date()]
  501. }
  502. },
  503. list: [],
  504. total: 0,
  505. listLoading: true,
  506. isChart: true,
  507. isTable: false,
  508. table: {
  509. tableKey: 1,
  510. list: [],
  511. total: 0,
  512. listLoading: false
  513. }
  514. },
  515. chart2: {
  516. chartLine: null,
  517. chartLine_data: {},
  518. getdataListParm: {
  519. name: 'getFeedEffMR',
  520. page: 1,
  521. offset: 1,
  522. pagecount: 10,
  523. returntype: 'Map',
  524. parammaps: {
  525. pastureid: Cookies.get('pastureid'),
  526. startTime: parseTime(new Date(), '{y}-{m}-{d}'),
  527. stopTime: parseTime(new Date(), '{y}-{m}-{d}'),
  528. inputDatetime: [new Date(), new Date()]
  529. }
  530. },
  531. list: [],
  532. total: 0,
  533. listLoading: true,
  534. isChart: true,
  535. isTable: false,
  536. table: {
  537. tableKey: 1,
  538. list: [],
  539. total: 0,
  540. listLoading: false
  541. }
  542. }
  543. },
  544. row4: {
  545. chartDate: [],
  546. chart1: {
  547. chartLine: null,
  548. chartLine_data: {},
  549. getdataListParm: {
  550. name: 'getHomepageCB',
  551. page: 1,
  552. offset: 1,
  553. pagecount: 10,
  554. returntype: 'Map',
  555. parammaps: {
  556. pastureid: Cookies.get('pastureid'),
  557. startTime: parseTime(new Date(), '{y}-{m}-{d}'),
  558. stopTime: parseTime(new Date(), '{y}-{m}-{d}'),
  559. inputDatetime: [new Date(), new Date()]
  560. }
  561. },
  562. list: [],
  563. total: 0,
  564. listLoading: true,
  565. isChart: true,
  566. isTable: false,
  567. table: {
  568. tableKey: 1,
  569. list: [],
  570. total: 0,
  571. listLoading: false
  572. }
  573. },
  574. chart2: {
  575. chartLine: null,
  576. chartLine_data: {},
  577. getdataListParm: {
  578. name: 'getAccuraaActHL',
  579. page: 1,
  580. offset: 1,
  581. pagecount: 10,
  582. returntype: 'Map',
  583. parammaps: {
  584. pastureid: Cookies.get('pastureid'),
  585. startTime: parseTime(new Date(), '{y}-{m}-{d}'),
  586. stopTime: parseTime(new Date(), '{y}-{m}-{d}'),
  587. inputDatetime: [new Date(), new Date()]
  588. }
  589. },
  590. list: [],
  591. total: 0,
  592. listLoading: true,
  593. isChart: true,
  594. isTable: false,
  595. table: {
  596. tableKey: 1,
  597. list: [],
  598. total: 0,
  599. listLoading: false
  600. }
  601. },
  602. table: {
  603. getdataListParm: {
  604. name: 'getFsWarnList',
  605. page: 1,
  606. offset: 1,
  607. pagecount: 5,
  608. returntype: 'Map',
  609. parammaps: {
  610. pastureid: Cookies.get('pastureid')
  611. }
  612. },
  613. tableKey: 1,
  614. list: [],
  615. total: 0,
  616. listLoading: true,
  617. temp: {}
  618. }
  619. },
  620. rowStyle: { maxHeight: 30 + 'px', height: 30 + 'px' },
  621. cellStyle: { padding: 0 + 'px' },
  622. timer: null
  623. }
  624. },
  625. created() {
  626. // this.reload()
  627. this.getCarLength()
  628. this.getChart3List()
  629. this.getTimeFn()
  630. this.getList()
  631. this.getChart4()
  632. this.getChart5()
  633. this.getChart6()
  634. this.getChart7()
  635. this.getTable8()
  636. },
  637. mounted() {
  638. this.timer = null
  639. this.timer = setInterval(this.autoPlay, 15000)
  640. },
  641. destroyed() {
  642. clearInterval(this.timer)
  643. },
  644. methods: {
  645. getTimeFn() {
  646. // this.reload()
  647. const that = this
  648. const end = new Date()
  649. const start = new Date()
  650. start.setTime(start.getTime() - 3600 * 1000 * 24 * 20)
  651. that.row3.chartDate[0] = parseTime(start, '{y}-{m}-{d}')
  652. that.row3.chartDate[1] = parseTime(end, '{y}-{m}-{d}')
  653. that.row3.chart1.getdataListParm.parammaps.inputDatetime[0] = parseTime(start, '{y}-{m}-{d}')
  654. that.row3.chart1.getdataListParm.parammaps.inputDatetime[1] = parseTime(end, '{y}-{m}-{d}')
  655. that.row3.chart1.getdataListParm.parammaps.startTime = parseTime(start, '{y}-{m}-{d}')
  656. that.row3.chart1.getdataListParm.parammaps.stopTime = parseTime(end, '{y}-{m}-{d}')
  657. that.row3.chart2.getdataListParm.parammaps.inputDatetime[0] = parseTime(start, '{y}-{m}-{d}')
  658. that.row3.chart2.getdataListParm.parammaps.inputDatetime[1] = parseTime(end, '{y}-{m}-{d}')
  659. that.row3.chart2.getdataListParm.parammaps.startTime = parseTime(start, '{y}-{m}-{d}')
  660. that.row3.chart2.getdataListParm.parammaps.stopTime = parseTime(end, '{y}-{m}-{d}')
  661. that.row4.chartDate[0] = parseTime(start, '{y}-{m}-{d}')
  662. that.row4.chartDate[1] = parseTime(end, '{y}-{m}-{d}')
  663. that.row4.chart1.getdataListParm.parammaps.inputDatetime[0] = parseTime(start, '{y}-{m}-{d}')
  664. that.row4.chart1.getdataListParm.parammaps.inputDatetime[1] = parseTime(end, '{y}-{m}-{d}')
  665. that.row4.chart1.getdataListParm.parammaps.startTime = parseTime(start, '{y}-{m}-{d}')
  666. that.row4.chart1.getdataListParm.parammaps.stopTime = parseTime(end, '{y}-{m}-{d}')
  667. that.row4.chart2.getdataListParm.parammaps.inputDatetime[0] = parseTime(start, '{y}-{m}-{d}')
  668. that.row4.chart2.getdataListParm.parammaps.inputDatetime[1] = parseTime(end, '{y}-{m}-{d}')
  669. that.row4.chart2.getdataListParm.parammaps.startTime = parseTime(start, '{y}-{m}-{d}')
  670. that.row4.chart2.getdataListParm.parammaps.stopTime = parseTime(end, '{y}-{m}-{d}')
  671. },
  672. getList() {
  673. this.row1.listLoading = true
  674. GetDataByName(this.row1.getdataListParm).then(response => {
  675. console.log('row1数据', response.data.list)
  676. if (response.data.list !== null) {
  677. if (response.data.list[0].monRateHL == undefined) { response.data.list[0].monRateHL = '' }
  678. if (response.data.list[0].monRateSL == undefined) { response.data.list[0].monRateSL = '' }
  679. if (response.data.list[0].monRateSLR == undefined) { response.data.list[0].monRateSLR = '' }
  680. if (response.data.list[0].yesRateHL == undefined) { response.data.list[0].yesRateHL = '' }
  681. if (response.data.list[0].yesRateHL == undefined) { response.data.list[0].yesRateHL = '' }
  682. if (response.data.list[0].yesRateSL == undefined) { response.data.list[0].yesRateSL = '' }
  683. if (response.data.list[0].yesRateSLR == undefined) { response.data.list[0].yesRateSLR = '' }
  684. if (response.data.list[0].temtime == undefined) { response.data.list[0].temtime = '' }
  685. if (response.data.list[0].montime == undefined) { response.data.list[0].montime = '' }
  686. this.row1.list = response.data.list[0]
  687. this.row2.chart1.chartLine_data.data1 = parseFloat(response.data.list[0].doneTimes)
  688. this.row2.chart1.chartLine_data.data2 = parseFloat(response.data.list[0].planTimes)
  689. this.row2.chart2.chartLine_data.data1 = parseFloat(response.data.list[0].doneWeight)
  690. this.row2.chart2.chartLine_data.data2 = parseFloat(response.data.list[0].planWeight)
  691. this.roadChartLine1(this.row2.chart1.chartLine_data)
  692. this.roadChartLine2(this.row2.chart2.chartLine_data)
  693. } else {
  694. this.row1.list.data1.monRateHL = ''
  695. this.row1.list.data1.monRateSL = ''
  696. this.row1.list.data1.monRateSLR = ''
  697. this.row1.list.data1.yesRateHL = ''
  698. this.row1.list.data1.yesRateSL = ''
  699. this.row1.list.data1.yesRateSLR = ''
  700. this.row1.list.data1.temtime = ''
  701. this.row1.list.data1.montime = ''
  702. this.row2.chart1.chartLine_data.data1 = ''
  703. this.row2.chart1.chartLine_data.data2 = ''
  704. this.row2.chart2.chartLine_data.data1 = ''
  705. this.row2.chart2.chartLine_data.data2 = ''
  706. }
  707. setTimeout(() => {
  708. this.row1.listLoading = false
  709. }, 100)
  710. })
  711. },
  712. // 今日计划统计-完成车次
  713. roadChartLine1(chartLine_data) {
  714. console.log('chartLine_data', chartLine_data)
  715. if (this.row2.chart1.chartLine != null) {
  716. this.row2.chart1.chartLine.dispose()
  717. }
  718. this.row2.chart1.chartLine = echarts.init(document.getElementById('row2chartLine1'))
  719. if (chartLine_data.data2 == 0 || chartLine_data.data1 == 0) {
  720. chartLine_data.data1 = 0
  721. chartLine_data.data2 = 100
  722. }
  723. var option = {
  724. title: { show: true, x: 'center', textStyle: { fontSize: '15', color: 'green', fontWeight: 'bold' }},
  725. tooltip: { show: false, trigger: 'item', formatter: '{a} <br/>{b}: {c} ({d}%)' },
  726. color: ['#1bbe89', '#e4e7ec'],
  727. series: [{
  728. name: '任务进度', type: 'pie', radius: ['80%', '70%'], avoidLabelOverlap: false, hoverAnimation: false, labelLine: { normal: { show: false }},
  729. data: [{
  730. value: chartLine_data.data1, name: '车次完成率', selected: false, // 单个扇区的标签配置
  731. label: { normal: { show: true, position: 'center', fontSize: 20, formatter: '{b}\n{d}%' }}
  732. }, {
  733. value: chartLine_data.data2 - chartLine_data.data1,
  734. label: { normal: { show: false }
  735. }
  736. }]
  737. }]
  738. }
  739. this.row2.chart1.chartLine.setOption(option)
  740. window.onresize = function() {
  741. this.row2.chart1.chartLine.resize()
  742. }
  743. var that = this
  744. that.row2.chart1.chartLine.on('mouseover', e => {
  745. const op = that.row2.chart1.chartLine.getOption()
  746. that.row2.chart1.chartLine.dispatchAction({
  747. type: 'downplay',
  748. seriesIndex: 0,
  749. dataIndex: e.dataIndex,
  750. color: e.color
  751. })
  752. that.row2.chart1.chartLine.setOption(op, true)
  753. })
  754. },
  755. // 今日计划统计-完成重量
  756. roadChartLine2(chartLine_data) {
  757. if (this.row2.chart2.chartLine != null) {
  758. this.row2.chart2.chartLine.dispose()
  759. }
  760. this.row2.chart2.chartLine = echarts.init(document.getElementById('row2chartLine2'))
  761. if (chartLine_data.data2 == 0 || chartLine_data.data1 == 0) {
  762. chartLine_data.data1 = 0
  763. chartLine_data.data2 = 100
  764. }
  765. var option = {
  766. title: { show: true, x: 'center', textStyle: { fontSize: '15', color: 'green', fontWeight: 'bold' }},
  767. tooltip: { show: false, trigger: 'item', formatter: '{a} <br/>{b}: {c} ({d}%)' },
  768. series: [{
  769. name: '任务进度', type: 'pie', radius: ['80%', '70%'], avoidLabelOverlap: false, hoverAnimation: false,
  770. labelLine: { normal: { show: false }},
  771. data: [{
  772. value: chartLine_data.data1, name: '重量完成率', selected: false, label: { normal: { show: true, position: 'center', fontSize: 20, formatter: '{b}\n{d}%' }}
  773. }, {
  774. value: chartLine_data.data2 - chartLine_data.data1, label: { normal: { show: false }}
  775. }]
  776. }],
  777. color: ['#529ae4', '#e4e7ec']
  778. }
  779. this.row2.chart2.chartLine.setOption(option)
  780. window.onresize = function() {
  781. this.row2.chart2.chartLine.resize()
  782. }
  783. var that = this
  784. that.row2.chart2.chartLine.on('mouseover', e => {
  785. const op = that.row2.chart2.chartLine.getOption()
  786. that.row2.chart2.chartLine.dispatchAction({
  787. type: 'downplay',
  788. seriesIndex: 0,
  789. dataIndex: e.dataIndex,
  790. color: e.color
  791. })
  792. that.row2.chart2.chartLine.setOption(op, true)
  793. })
  794. },
  795. // 实时监控
  796. getChart3() {
  797. this.row2.chart3.listLoading = true
  798. GetReportform(this.row2.chart3.getdataListParm).then(response => {
  799. console.log('实时监控数据', response.data.list)
  800. if (response.data.list !== null) {
  801. var evenNumbers = []// 偶数
  802. var oddNumbers = []// 奇数
  803. for (let i = 0; i < response.data.list.data4.length; i++) {
  804. if (i == 0) {
  805. oddNumbers.push(response.data.list.data4[i])
  806. } else {
  807. if (i % 2 == 0) {
  808. evenNumbers.push(response.data.list.data4[i])
  809. } else {
  810. oddNumbers.push(response.data.list.data4[i])
  811. }
  812. }
  813. }
  814. response.data.list.data4 = oddNumbers
  815. response.data.list.data5 = evenNumbers
  816. this.row2.chart3.chartLine_data = response.data.list
  817. this.row2.chart3.total = response.data.total
  818. this.row2.chart3.pageNum = response.data.pageNum
  819. this.row2.chart3.pages = response.data.pages
  820. this.roadChartLine3(this.row2.chart3.chartLine_data)
  821. } else {
  822. this.row2.chart3.list = []
  823. }
  824. setTimeout(() => {
  825. this.row2.chart3.listLoading = false
  826. }, 100)
  827. })
  828. },
  829. roadChartLine3(chartLine_data) {
  830. if (this.row2.chart3.chartLine != null) {
  831. this.row2.chart3.chartLine.dispose()
  832. }
  833. this.row2.chart3.chartLine = echarts.init(document.getElementById('row2chartLine3'))
  834. var option = {
  835. title: {
  836. text: '',
  837. subtext: ''
  838. },
  839. color: ['#38c193', '#5199e5', '#fdb06a', '#fb8b73'], // 关键加上这句话,legend的颜色和折线的自定义颜色就一致了
  840. grid: {
  841. bottom: '10%'
  842. },
  843. legend: [{
  844. itemWidth: 15, itemHeight: 7, right: '25%', textStyle: { fontSize: 12 },
  845. data: [{ name: '设计重量' }, { name: '实际重量' }]
  846. }, {
  847. itemWidth: 15, itemHeight: 15, right: '0', textStyle: { fontSize: 12 },
  848. data: [{ name: '开始重量', icon: 'image://https://kptyun.cn:8081/file/pic/3.png' }, { name: '结束重量', icon: 'image://https://kptyun.cn:8081/file/pic/4.png' }]
  849. }],
  850. tooltip: {
  851. trigger: 'axis'
  852. },
  853. calculable: true,
  854. yAxis: [
  855. { type: 'value', name: '重量(kg)', splitLine: { show: false }, axisLabel: { show: true, textStyle: { color: '#666' }}}
  856. ],
  857. xAxis: [
  858. { type: 'category', splitLine: { show: false }, name: '时间', data: chartLine_data.data1, axisLabel: { show: true, textStyle: { color: '#666' }}}
  859. ],
  860. series: [
  861. { symbol: 'none', name: '实际重量', type: 'line', symbolSize: 4, data: chartLine_data.data3, smooth: true, barWidth: '37', itemStyle: { normal: { lineStyle: { color: '#38c193' }}}},
  862. { symbol: 'none', name: '设计重量', type: 'line', symbolSize: 4, barWidth: '37', data: chartLine_data.data2, itemStyle: { normal: { lineStyle: { color: '#5199e5' }}}},
  863. { name: '开始重量', symbol: 'image://https://kptyun.cn:8081/file/pic/3.png', symbolSize: 10, type: 'scatter', data: chartLine_data.data4 },
  864. { name: '结束重量', symbol: 'image://https://kptyun.cn:8081/file/pic/4.png', symbolSize: 10, type: 'scatter', data: chartLine_data.data5 }
  865. ]
  866. }
  867. this.row2.chart3.chartLine.setOption(option)
  868. window.onresize = function() {
  869. this.row2.chart3.chartLine.resize()
  870. }
  871. },
  872. getCarLength() {
  873. this.row2.chart3.listLoading2 = true
  874. this.row2.chart3.getdataListParmList.pagecount = 0
  875. GetDataByName(this.row2.chart3.getdataListParmList).then(response => {
  876. if (response.data.list !== null) {
  877. this.carLength = response.data.total
  878. } else {
  879. this.carLength = 0
  880. }
  881. setTimeout(() => {
  882. this.row2.chart3.listLoading2 = false
  883. }, 100)
  884. })
  885. },
  886. // 图三轮询列表
  887. getChart3List() {
  888. this.row2.chart3.listLoading2 = true
  889. this.row2.chart3.getdataListParmList.pagecount = 2
  890. GetDataByName(this.row2.chart3.getdataListParmList).then(response => {
  891. if (response.data.list !== null) {
  892. this.$set(response.data.list[0], 'background', '#f3f9f7')
  893. this.$set(response.data.list[0], 'borderColor', '#009d6a')
  894. this.$set(response.data.list[0], 'isChecked', true)
  895. if (response.data.list.length > 1) {
  896. this.$set(response.data.list[1], 'background', '#f9f9f9')
  897. this.$set(response.data.list[1], 'borderColor', '#f9f9f9')
  898. this.$set(response.data.list[1], 'isChecked', false)
  899. }
  900. this.list = response.data.list
  901. this.row2.chart3.getdataListParm.parammaps.pid = this.list[this.myKey].pid
  902. this.row2.chart3.getdataListParm.parammaps.id = this.list[this.myKey].id
  903. this.getChart3()
  904. this.row2.chart3.pageNum2 = response.data.pageNum
  905. this.row2.chart3.pages2 = response.data.pages
  906. } else {
  907. this.row2.chart3.list2 = []
  908. }
  909. if (response.data.pageNum == 1) {
  910. if (response.data.total > 2) {
  911. this.row2.chart3.isLeftA = false
  912. this.row2.chart3.isLeft = true
  913. this.row2.chart3.isRightA = true
  914. this.row2.chart3.isRight = false
  915. } else {
  916. this.row2.chart3.isLeftA = false
  917. this.row2.chart3.isLeft = true
  918. this.row2.chart3.isRightA = true
  919. this.row2.chart3.isRight = false
  920. }
  921. } else {
  922. if (response.data.pageNum * response.data.pageSize > response.data.total || response.data.pageNum * response.data.pageSize == response.data.total) {
  923. this.row2.chart3.isLeftA = true
  924. this.row2.chart3.isLeft = false
  925. this.row2.chart3.isRightA = false
  926. this.row2.chart3.isRight = true
  927. } else {
  928. this.row2.chart3.isLeftA = true
  929. this.row2.chart3.isLeft = false
  930. this.row2.chart3.isRightA = true
  931. this.row2.chart3.isRight = false
  932. }
  933. }
  934. setTimeout(() => {
  935. this.row2.chart3.listLoading2 = false
  936. }, 100)
  937. })
  938. },
  939. // 向左切换
  940. handleLeft() {
  941. console.log('左')
  942. if (this.row2.chart3.isLeftA == false) {
  943. console.log('前边没有啦')
  944. } else {
  945. console.log(this.row2.chart3.getdataListParmList.offset)
  946. this.row2.chart3.getdataListParmList.offset = this.row2.chart3.getdataListParmList.offset - 1
  947. this.getChart3List()
  948. }
  949. },
  950. // 向右切换
  951. handleRight() {
  952. if (this.row2.chart3.isRightA == false) {
  953. console.log('后边没有啦')
  954. } else {
  955. this.row2.chart3.getdataListParmList.offset = this.row2.chart3.getdataListParmList.offset + 1
  956. console.log(this.row2.chart3.getdataListParmList.offset)
  957. this.getChart3List()
  958. }
  959. },
  960. handleList(key, item) {
  961. console.log(item, key)
  962. clearInterval(this.timer)
  963. for (let i = 0; i < this.list.length; i++) {
  964. if (key == i) {
  965. this.$set(this.list[i], 'background', '#f3f9f7')
  966. this.$set(this.list[i], 'borderColor', '#009d6a')
  967. this.$set(this.list[i], 'isChecked', true)
  968. } else {
  969. this.$set(this.list[i], 'background', '#f9f9f9')
  970. this.$set(this.list[i], 'borderColor', '#f9f9f9')
  971. this.$set(this.list[i], 'isChecked', false)
  972. }
  973. }
  974. this.row2.chart3.getdataListParm.parammaps.pid = this.list[key].pid
  975. this.row2.chart3.getdataListParm.parammaps.id = this.list[key].id
  976. this.getChart3()
  977. setTimeout(() => {
  978. this.timer = setInterval(this.autoPlay, 15000)
  979. }, 20000)
  980. },
  981. autoPlay() {
  982. if (this.list[0].isChecked == true) {
  983. if (this.list.length > 1) {
  984. this.$set(this.list[1], 'background', '#f3f9f7')
  985. this.$set(this.list[1], 'borderColor', '#009d6a')
  986. this.$set(this.list[1], 'isChecked', true)
  987. this.$set(this.list[0], 'background', '#f9f9f9')
  988. this.$set(this.list[0], 'borderColor', '#f9f9f9')
  989. this.$set(this.list[0], 'isChecked', false)
  990. this.row2.chart3.getdataListParm.parammaps.pid = this.list[1].pid
  991. this.row2.chart3.getdataListParm.parammaps.id = this.list[1].id
  992. this.getChart3()
  993. } else {
  994. if (this.row2.chart3.isRightA == false && this.row2.chart3.isLeftA == true) {
  995. this.row2.chart3.getdataListParmList.offset = this.row2.chart3.getdataListParmList.offset - 1
  996. this.getChart3List()
  997. }
  998. }
  999. } else {
  1000. if (this.row2.chart3.isRightA == true) {
  1001. this.row2.chart3.getdataListParmList.offset = this.row2.chart3.getdataListParmList.offset + 1
  1002. console.log(this.row2.chart3.getdataListParmList.offset)
  1003. this.getChart3List()
  1004. } else {
  1005. if (this.row2.chart3.isLeftA == true) {
  1006. this.row2.chart3.getdataListParmList.offset = this.row2.chart3.getdataListParmList.offset - 1
  1007. console.log(this.row2.chart3.getdataListParmList.offset)
  1008. this.getChart3List()
  1009. } else {
  1010. this.$set(this.list[0], 'background', '#f3f9f7')
  1011. this.$set(this.list[0], 'borderColor', '#009d6a')
  1012. this.$set(this.list[0], 'isChecked', true)
  1013. this.$set(this.list[1], 'background', '#f9f9f9')
  1014. this.$set(this.list[1], 'borderColor', '#f9f9f9')
  1015. this.$set(this.list[1], 'isChecked', false)
  1016. this.row2.chart3.getdataListParm.parammaps.pid = this.list[0].pid
  1017. this.row2.chart3.getdataListParm.parammaps.id = this.list[0].id
  1018. this.getChart3()
  1019. }
  1020. }
  1021. }
  1022. },
  1023. // 计划统计
  1024. getChart4() {
  1025. this.row3.chart1.listLoading = true
  1026. GetReportform(this.row3.chart1.getdataListParm).then(response => {
  1027. console.log('计划统计数据', response.data.list)
  1028. if (response.data.list !== null) {
  1029. for (let i = 0; i < response.data.data.length; i++) {
  1030. if (response.data.data[i].实际量 !== '' && response.data.data[i].实际量 !== undefined) {
  1031. response.data.data[i].实际量 = parseFloat(response.data.data[i].实际量)
  1032. }
  1033. if (response.data.data[i].理论量 !== '' && response.data.data[i].理论量 !== undefined) {
  1034. response.data.data[i].理论量 = parseFloat(response.data.data[i].理论量)
  1035. }
  1036. if (response.data.data[i].field1 !== '' && response.data.data[i].field1 !== undefined) {
  1037. response.data.data[i].field1 = parseFloat(response.data.data[i].field1)
  1038. }
  1039. if (response.data.data[i].计划取消重量 !== '' && response.data.data[i].计划取消重量 !== undefined) {
  1040. response.data.data[i].计划取消重量 = parseFloat(response.data.data[i].计划取消重量)
  1041. }
  1042. if (response.data.data[i].field3 !== '' && response.data.data[i].field3 !== undefined) {
  1043. response.data.data[i].field3 = parseFloat(response.data.data[i].field3)
  1044. }
  1045. if (response.data.data[i].正确数 !== '' && response.data.data[i].正确数 !== undefined) {
  1046. response.data.data[i].正确数 = parseFloat(response.data.data[i].正确数)
  1047. }
  1048. if (response.data.data[i].计划数 !== '' && response.data.data[i].计划数 !== undefined) {
  1049. response.data.data[i].计划数 = parseFloat(response.data.data[i].计划数)
  1050. }
  1051. if (response.data.data[i].field2 !== '' && response.data.data[i].field2 !== undefined) {
  1052. response.data.data[i].field2 = parseFloat(response.data.data[i].field2)
  1053. }
  1054. }
  1055. this.row3.chart1.table.list = response.data.data
  1056. console.log(this.row3.chart1.table.list, '123')
  1057. this.row3.chart1.chartLine_data = response.data.list
  1058. this.row3.chart1.total = response.data.total
  1059. if (this.row3.chart1.chartLine_data.data1.length == 0) {
  1060. this.row3.chart1.chartLine_data.title = '暂无数据'
  1061. } else {
  1062. this.row3.chart1.chartLine_data.title = ''
  1063. }
  1064. this.roadChartLine4(this.row3.chart1.chartLine_data)
  1065. } else {
  1066. this.row3.chart1.list = []
  1067. }
  1068. setTimeout(() => {
  1069. this.row3.chart1.listLoading = false
  1070. }, 100)
  1071. })
  1072. },
  1073. roadChartLine4(chartLine_data) {
  1074. if (this.row3.chart1.chartLine != null) {
  1075. this.row3.chart1.chartLine.dispose()
  1076. }
  1077. this.row3.chart1.chartLine = echarts.init(document.getElementById('row3chartLine1'))
  1078. var option = {
  1079. title: { text: chartLine_data.title, x: 'center', y: 'center', textStyle: { color: '#909399', fontWeight: 'normal', fontSize: 12 }},
  1080. tooltip: { trigger: 'axis' },
  1081. color: ['#1abd88', '#549be9', '#fd8d75'],
  1082. legend: {
  1083. data: ['计划准确率', '计划正确率', '计划准确率(去除取消重量)'],
  1084. top: 10, itemHeight: 7, itemWidth: 15, textStyle: { fontSize: 12 }
  1085. },
  1086. grid: {
  1087. top: '20%',
  1088. left: '10%',
  1089. right: '10%',
  1090. bottom: '10%',
  1091. containLabel: true
  1092. },
  1093. toolbox: {
  1094. show: true,
  1095. right: '2%',
  1096. feature: {}
  1097. },
  1098. xAxis: { type: 'category', boundaryGap: false, data: chartLine_data.data1, name: '日期' },
  1099. yAxis: {
  1100. type: 'value', name: '百分比', axisLabel: { formatter: '{value} %' }
  1101. },
  1102. series: [
  1103. { name: '计划准确率', type: 'line', symbol: 'none', smooth: true, itemStyle: { normal: { lineStyle: { color: '#1abd88' }}}, data: chartLine_data.data2 },
  1104. { name: '计划正确率', type: 'line', symbol: 'none', smooth: true, itemStyle: { normal: { lineStyle: { color: '#549be9' }}}, data: chartLine_data.data3 },
  1105. { name: '计划准确率(去除取消重量)', type: 'line', symbol: 'none', smooth: true, itemStyle: { normal: { lineStyle: { color: '#fd8d75' }}}, data: chartLine_data.data4 }
  1106. ]
  1107. }
  1108. this.row3.chart1.chartLine.setOption(option)
  1109. window.onresize = function() {
  1110. this.row3.chart1.chartLine.resize()
  1111. }
  1112. },
  1113. // 泌乳牛干物质采食量
  1114. getChart5() {
  1115. this.row3.chart2.listLoading = true
  1116. GetReportform(this.row3.chart2.getdataListParm).then(response => {
  1117. console.log('泌乳牛干物质采食量数据', response)
  1118. if (response.data.list !== null) {
  1119. for (let i = 0; i < response.data.data.length; i++) {
  1120. if (response.data.data[i].field1 !== '' && response.data.data[i].field1 !== undefined) {
  1121. response.data.data[i].field1 = parseFloat(response.data.data[i].field1)
  1122. }
  1123. if (response.data.data[i].field2 !== '' && response.data.data[i].field2 !== undefined) {
  1124. response.data.data[i].field2 = parseFloat(response.data.data[i].field2)
  1125. }
  1126. }
  1127. this.row3.chart2.table.list = response.data.data
  1128. this.row3.chart2.chartLine_data = response.data.list
  1129. this.row3.chart2.total = response.data.total
  1130. if (this.row3.chart2.chartLine_data.data1.length == 0) {
  1131. this.row3.chart2.chartLine_data.title = '暂无数据'
  1132. } else {
  1133. this.row3.chart2.chartLine_data.title = ''
  1134. }
  1135. this.roadChartLine5(this.row3.chart2.chartLine_data)
  1136. } else {
  1137. this.row3.chart2.list = []
  1138. }
  1139. setTimeout(() => {
  1140. this.row3.chart2.listLoading = false
  1141. }, 100)
  1142. })
  1143. },
  1144. roadChartLine5(chartLine_data) {
  1145. if (this.row3.chart2.chartLine != null) {
  1146. this.row3.chart2.chartLine.dispose()
  1147. }
  1148. this.row3.chart2.chartLine = echarts.init(document.getElementById('row3chartLine2'))
  1149. var option = {
  1150. title: { text: chartLine_data.title, x: 'center', y: 'center', textStyle: { color: '#909399', fontWeight: 'normal', fontSize: 12 }},
  1151. tooltip: { trigger: 'axis', axisPointer: { type: 'cross', crossStyle: { color: '#999' }}},
  1152. grid: { top: '20%', left: '8%', right: '10%', bottom: '10%', containLabel: true },
  1153. legend: { data: ['泌乳牛干物质采食量', '泌乳牛产奶量'], right: 10, itemHeight: 7, itemWidth: 15 },
  1154. xAxis: [{ type: 'category', data: chartLine_data.data1 }],
  1155. yAxis: [{
  1156. splitLine: { show: false }, type: 'value', name: '泌乳牛干\n物质采食量', axisLabel: { formatter: '{value} ' }
  1157. }, {
  1158. splitLine: { show: false }, type: 'value', name: '泌乳牛产奶量', axisLabel: { formatter: '{value} ' }
  1159. }],
  1160. series: [{
  1161. name: '泌乳牛干物质采食量', type: 'bar', barWidth: 5, itemStyle: { barBorderRadius: [18, 18, 0, 0], normal: { color: '#5199e5' }}, data: chartLine_data.data2
  1162. }, {
  1163. name: '泌乳牛产奶量', type: 'line', barWidth: 5,
  1164. itemStyle: { barBorderRadius: [18, 18, 0, 0], normal: { color: '#36c293' }}, yAxisIndex: 1, data: chartLine_data.data3
  1165. }]
  1166. }
  1167. this.row3.chart2.chartLine.setOption(option)
  1168. window.onresize = function() {
  1169. this.row3.chart2.chartLine.resize()
  1170. }
  1171. },
  1172. // 成本统计
  1173. getChart6() {
  1174. this.row4.chart1.table.listLoading = true
  1175. this.row4.chart1.listLoading = true
  1176. GetReportform(this.row4.chart1.getdataListParm).then(response => {
  1177. console.log('成本统计数据', response.data.data)
  1178. console.log('成本统计数据', response.data.list)
  1179. if (response.data.list !== null) {
  1180. for (let i = 0; i < response.data.data.length; i++) {
  1181. if (response.data.data[i].field1 !== '' && response.data.data[i].field1 !== undefined) {
  1182. response.data.data[i].field1 = parseFloat(response.data.data[i].field1)
  1183. }
  1184. if (response.data.data[i].field2 !== '' && response.data.data[i].field2 !== undefined) {
  1185. response.data.data[i].field2 = parseFloat(response.data.data[i].field2)
  1186. }
  1187. }
  1188. this.row4.chart1.table.list = response.data.data
  1189. this.row4.chart1.chartLine_data = response.data.list
  1190. this.row4.chart1.total = response.data.total
  1191. if (this.row4.chart1.chartLine_data.data1.length == 0) {
  1192. this.row4.chart1.chartLine_data.title = '暂无数据'
  1193. } else {
  1194. this.row4.chart1.chartLine_data.title = ''
  1195. }
  1196. this.roadChartLine6(this.row4.chart1.chartLine_data)
  1197. } else {
  1198. this.row4.chart1.list = []
  1199. }
  1200. setTimeout(() => {
  1201. this.row4.chart1.listLoading = false
  1202. this.row4.chart1.table.listLoading = false
  1203. }, 100)
  1204. })
  1205. },
  1206. roadChartLine6(chartLine_data) {
  1207. if (this.row4.chart1.chartLine != null) {
  1208. this.row4.chart1.chartLine.dispose()
  1209. }
  1210. console.log(chartLine_data, '===666')
  1211. this.row4.chart1.chartLine = echarts.init(document.getElementById('row4chartLine1'))
  1212. var option = {
  1213. title: { text: chartLine_data.title, x: 'center', y: 'center', textStyle: { color: '#909399', fontWeight: 'normal', fontSize: 12 }},
  1214. grid: { left: '10%', right: '12%', bottom: '3%', containLabel: true },
  1215. tooltip: { trigger: 'axis', axisPointer: { type: 'cross', crossStyle: { color: '#999' }}},
  1216. legend: { data: ['公斤奶饲料成本', '单头牛饲料成本'], itemHeight: 7, itemWidth: 15 },
  1217. xAxis: [{ type: 'category', data: chartLine_data.data1, axisPointer: { type: 'shadow' }, name: '日期' }],
  1218. yAxis: [{
  1219. splitLine: { show: false }, type: 'value', name: '公斤奶\n饲料成本(元)', axisLabel: { formatter: '{value}' }
  1220. }, {
  1221. splitLine: { show: false }, type: 'value', name: '单头牛\n饲料成本(元)', axisLabel: { formatter: '{value}' }
  1222. }
  1223. ],
  1224. series: [{
  1225. name: '公斤奶饲料成本', type: 'bar', itemStyle: { normal: { color: '#1abd88' }}, data: chartLine_data.data2
  1226. }, {
  1227. name: '单头牛饲料成本', type: 'line', yAxisIndex: 1, itemStyle: { normal: { color: '#ff8d78' }}, data: chartLine_data.data3
  1228. }]
  1229. }
  1230. this.row4.chart1.chartLine.setOption(option)
  1231. window.onresize = function() {
  1232. this.row4.chart1.chartLine.resize()
  1233. }
  1234. },
  1235. // 混料实际重量统计
  1236. getChart7() {
  1237. this.row4.chart2.listLoading = true
  1238. GetReportform(this.row4.chart2.getdataListParm).then(response => {
  1239. console.log('混料实际重量统计数据', response.data.list)
  1240. if (response.data.list !== null) {
  1241. for (let i = 0; i < response.data.data.length; i++) {
  1242. if (response.data.data[i].field1 !== '' && response.data.data[i].field1 !== undefined) {
  1243. response.data.data[i].field1 = parseFloat(response.data.data[i].field1)
  1244. }
  1245. }
  1246. this.row4.chart2.table.list = response.data.data
  1247. this.row4.chart2.chartLine_data = response.data.list
  1248. this.row4.chart2.total = response.data.total
  1249. if (this.row4.chart2.chartLine_data.data1.length == 0) {
  1250. this.row4.chart2.chartLine_data.title = '暂无数据'
  1251. } else {
  1252. this.row4.chart2.chartLine_data.title = ''
  1253. }
  1254. this.roadChartLine7(this.row4.chart2.chartLine_data)
  1255. } else {
  1256. this.row4.chart2.list = []
  1257. }
  1258. setTimeout(() => {
  1259. this.row4.chart2.listLoading = false
  1260. }, 100)
  1261. })
  1262. },
  1263. roadChartLine7(chartLine_data) {
  1264. if (this.row4.chart2.chartLine != null) {
  1265. this.row4.chart2.chartLine.dispose()
  1266. }
  1267. this.row4.chart2.chartLine = echarts.init(document.getElementById('row4chartLine2'))
  1268. var option = {
  1269. title: { text: chartLine_data.title, x: 'center', y: 'center', textStyle: { color: '#909399', fontWeight: 'normal', fontSize: 12 }},
  1270. grid: { left: '10%', right: '10%', bottom: '3%', containLabel: true },
  1271. tooltip: { trigger: 'axis' },
  1272. legend: { data: [''] },
  1273. xAxis: [{ type: 'category', data: chartLine_data.data1, name: '日期' }],
  1274. yAxis: [
  1275. { type: 'value', name: '重量(kg)', axisLabel: { formatter: '{value}' }}
  1276. ],
  1277. series: [{
  1278. name: '重量', type: 'bar', stack: '广告', itemStyle: { normal: { color: '#36C293' }}, data: chartLine_data.data2
  1279. }]
  1280. }
  1281. this.row4.chart2.chartLine.setOption(option)
  1282. window.onresize = function() {
  1283. this.row4.chart2.chartLine.resize()
  1284. }
  1285. },
  1286. getTable8() {
  1287. this.row4.table.listLoading = true
  1288. GetDataByName(this.row4.table.getdataListParm).then(response => {
  1289. console.log('库存预警table数据', response.data.list)
  1290. if (response.data.list !== null) {
  1291. this.row4.table.list = response.data.list
  1292. this.row4.table.total = response.data.total
  1293. } else {
  1294. this.row4.table.list = []
  1295. }
  1296. setTimeout(() => {
  1297. this.row4.table.listLoading = false
  1298. }, 100)
  1299. })
  1300. },
  1301. // 更多
  1302. handleMore() {
  1303. // this.$router.push({ path: '/inventoryManagement/Warning' })
  1304. this.$router.push({ name: 'Warning', params: { jmp: 'jmp' }})
  1305. },
  1306. // 导出
  1307. handleExport(item) {
  1308. console.log(item)
  1309. // 计划统计
  1310. if (item == 'row3chartLine1') {
  1311. console.log(this.row3.chart1.table.list)
  1312. var excelDatasTabChart1 = [
  1313. {
  1314. tHeader: ['日期', '计划执行重量(kg)', '配方理论重量(kg)', '计划准确率', '计划取消重量(kg)', '计划准确率(去除取消重量)', '计划正确数', '计划数', '计划正确率'],
  1315. filterVal: ['日期', '实际量', '理论量', 'field1', '计划取消重量', 'field3', '正确数', '计划数', 'field2'],
  1316. tableDatas: this.row3.chart1.table.list,
  1317. sheetName: '计划统计'
  1318. }
  1319. ]
  1320. json2excel(excelDatasTabChart1, '计划统计', true, 'xlsx')
  1321. } else if (item == 'row3chartLine2') {
  1322. // 泌乳牛采食量
  1323. var excelDatasTabChart2 = [
  1324. {
  1325. tHeader: ['日期', '泌乳牛采食量(kg)', '泌乳牛产奶量(kg)'],
  1326. filterVal: ['日期', 'field1', 'field2'],
  1327. tableDatas: this.row3.chart2.table.list,
  1328. sheetName: '泌乳牛采食量'
  1329. }
  1330. ]
  1331. json2excel(excelDatasTabChart2, '泌乳牛采食量', true, 'xlsx')
  1332. } else if (item == 'row4chartLine1') {
  1333. // 成本统计
  1334. console.log('成本统计')
  1335. // var excelDatasTabChart2 = [
  1336. // {
  1337. // tHeader: ['日期', '泌乳牛采食量(kg)', '泌乳牛产奶量(kg)'],
  1338. // filterVal: ['日期', 'field1', 'field2'],
  1339. // tableDatas: this.row3.chart2.table.list,
  1340. // sheetName: '泌乳牛采食量'
  1341. // }
  1342. // ]
  1343. // json2excel(excelDatasTabChart2, '泌乳牛采食量', true, 'xlsx')
  1344. }
  1345. },
  1346. handleTable(item) {
  1347. console.log(item)
  1348. if (item == 'row3chartLine1') {
  1349. console.log('计划统计表格')
  1350. this.row3.chart1.isTable = true
  1351. this.row3.chart1.isChart = false
  1352. } else if (item == 'row3chartLine2') {
  1353. console.log('泌乳牛采食量表格')
  1354. this.row3.chart2.isTable = true
  1355. this.row3.chart2.isChart = false
  1356. } else if (item == 'row4chartLine1') {
  1357. console.log('成本统计表格')
  1358. this.row4.chart1.isTable = true
  1359. this.row4.chart1.isChart = false
  1360. } else if (item == 'row4chartLine2') {
  1361. console.log('混料实际重量统计表格')
  1362. this.row4.chart2.isTable = true
  1363. this.row4.chart2.isChart = false
  1364. }
  1365. },
  1366. handleChart(item) {
  1367. console.log(item)
  1368. // 显示切换图表
  1369. if (item == 'row3chartLine1') {
  1370. console.log('计划统计图表')
  1371. this.row3.chart1.isTable = false
  1372. this.row3.chart1.isChart = true
  1373. this.getChart4()
  1374. } else if (item == 'row3chartLine2') {
  1375. console.log('泌乳牛采食量图表')
  1376. this.row3.chart2.isTable = false
  1377. this.row3.chart2.isChart = true
  1378. this.getChart5()
  1379. } else if (item == 'row4chartLine1') {
  1380. console.log('成本统计图表')
  1381. this.row4.chart1.isTable = false
  1382. this.row4.chart1.isChart = true
  1383. this.getChart6()
  1384. } else if (item == 'row4chartLine2') {
  1385. console.log('混料实际重量统计图表')
  1386. this.row4.chart2.isTable = false
  1387. this.row4.chart2.isChart = true
  1388. this.getChart7()
  1389. }
  1390. }
  1391. }
  1392. }
  1393. </script>
  1394. <style lang="scss" scoped>
  1395. .Title{
  1396. padding-left: 10px;border-radius: 10px;margin-top: 20px;background: #fff;height:40px;font-size:20px;line-height:40px;text-align: left;font-weight: 600;color:#333333;
  1397. }
  1398. .dashboard-editor-container {
  1399. background-color: #F4F4F4;
  1400. min-height: 100vh;
  1401. .news{
  1402. width: 70%;
  1403. height: 30px;
  1404. background: #fff;
  1405. margin: 0 auto;
  1406. border-radius: 10px;
  1407. text-align: center;
  1408. line-height: 30px;
  1409. color: red;
  1410. b{color: #000;}
  1411. }
  1412. .bottom{
  1413. padding:0 30px;
  1414. h4{text-align: right;}
  1415. .grid-content{
  1416. background: #fff;height: 90px;
  1417. border-radius: 10px;
  1418. }
  1419. .one{
  1420. border: 1px solid #82CBB3;height: 90px;
  1421. .Left{
  1422. float: left;
  1423. width: 65px;
  1424. text-align: center;
  1425. i{font-size: 36px;color:#82CBB3;line-height: 90px;}
  1426. }
  1427. .Right{
  1428. float: left;
  1429. margin-top:15px;
  1430. height: 60px;
  1431. font-weight: 600;
  1432. font-size: 14px;
  1433. line-height: 30px;
  1434. span{
  1435. display: inline-block;
  1436. width: 130px;
  1437. text-align: right;
  1438. }
  1439. }
  1440. }
  1441. .two{
  1442. border: 1px solid #FF9900;
  1443. .Left{
  1444. float: left;
  1445. width: 65px;
  1446. text-align: center;
  1447. i{font-size: 36px;color:#FF9900;line-height: 90px;}
  1448. }
  1449. .Right{
  1450. float: left;
  1451. margin-top:15px;
  1452. height: 60px;
  1453. font-weight: 600;
  1454. font-size: 14px;
  1455. line-height: 30px;
  1456. span{
  1457. display: inline-block;
  1458. width: 130px;
  1459. text-align: right;
  1460. }
  1461. }
  1462. }
  1463. .three{
  1464. border: 1px solid #0099FF;
  1465. .Left{
  1466. float: left;
  1467. width: 65px;
  1468. text-align: center;
  1469. i{font-size: 36px;color:#0099FF;line-height: 90px;}
  1470. }
  1471. .Right{
  1472. float: left;
  1473. height: 60px;
  1474. font-weight: 600;
  1475. font-size: 14px;
  1476. line-height: 30px;
  1477. margin-top:15px;
  1478. span{
  1479. display: inline-block;
  1480. width: 130px;
  1481. text-align: right;
  1482. }
  1483. }
  1484. }
  1485. .four{
  1486. border: 1px solid #FF5C5C;
  1487. .Left{
  1488. float: left;
  1489. width: 55px;
  1490. text-align: center;
  1491. i{font-size: 36px;color:#FF5C5C;line-height: 90px;}
  1492. }
  1493. .Right{
  1494. float: left;
  1495. flex: 1;
  1496. height: 60px;
  1497. font-weight: 600;
  1498. font-size: 14px;
  1499. line-height: 30px;
  1500. margin-top:15px;
  1501. span{
  1502. display: inline-block;
  1503. width: 150px;
  1504. text-align: right;
  1505. }
  1506. }
  1507. }
  1508. .car{
  1509. width:100%;height:150px;
  1510. display:flex;
  1511. display: -webkit-flex;
  1512. -webkit-flex-direction:row;
  1513. i{font-size: 50px;width:50px;display: block;line-height: 150px;}
  1514. .carList{
  1515. flex:1;height: 130px;
  1516. .list{
  1517. height: 130px;color: #fff;
  1518. // box-shadow: #000 0px 0px 10px;
  1519. // border-radius: 10px;
  1520. .list-l{
  1521. p{
  1522. padding-left:10px;font-size:13px;line-height: 16px; text-overflow: ellipsis;white-space:nowrap; overflow:hidden;
  1523. }
  1524. }
  1525. .list-r{
  1526. p{
  1527. font-size:13px;line-height: 16px;text-overflow: ellipsis;white-space:nowrap; overflow:hidden;
  1528. }
  1529. }
  1530. }
  1531. }
  1532. }
  1533. }
  1534. }
  1535. </style>
  1536. <style>
  1537. .app-main{background:#f5f5f5;}
  1538. </style>
  1539. <style lang="scss" scoped>
  1540. .dashboard-editor-container{padding-left: 10px;background: #f5f5f5;padding-bottom: 10px;}
  1541. // 公共
  1542. .img-t{position: absolute;left: 0;right: 0;margin: 30px auto;width: 31%;height: 31%;background-size: 100% 100%;}
  1543. .row1-c-l-c{
  1544. margin: 30px auto;border: 1px solid #eee;height: 40%;width: 50%;border-radius: 50%;text-align: center;display:table;
  1545. span{
  1546. height:100%;display:table-cell;vertical-align: middle;font-size:14px;color: #009C69;
  1547. b{padding-bottom: 10px;font-size: 16px;}
  1548. }
  1549. }
  1550. .row1-c-l-b{
  1551. width: 100%;text-align: center;display:table;font-size: 12px;
  1552. // div{
  1553. // font-size: 12px;height:100%;display:table-cell;vertical-align: middle;color: #323232;padding: 0 10px;width: 100%;
  1554. // span{text-align: right;width: 75%;display: block;float: left;}
  1555. // b{float: left;display: block;width: 25%;}
  1556. // }
  1557. }
  1558. .title{
  1559. height: 36px;padding-top: 7px;line-height: 36px;position: relative;
  1560. .img-title{
  1561. position: absolute;top: 10px; right:10px;bottom:0;left:20px;width: 30px;height: 30px;background: url(../../../assets/images/index/row-bg3.png) no-repeat;
  1562. }
  1563. .content{font-size: 18px;position: absolute;top: 7px;left: 55px;}
  1564. }
  1565. .title1{
  1566. height: 36px;padding-top: 7px;line-height: 36px;position: relative;
  1567. .img-title{
  1568. position: absolute;top: 10px; right:10px;bottom:0;left:10px;
  1569. width: 25px;height: 25px;
  1570. img{width: 25px;height: 25px;}
  1571. }
  1572. .content{font-size: 16px;position: absolute;top: 7px;left: 40px;}
  1573. }
  1574. .button{
  1575. height: 30px;
  1576. .exportTable{float: right;margin-right: 5px;}
  1577. }
  1578. .dashboard{
  1579. display: flex;margin-top: 10px;
  1580. .dashboard-l{
  1581. // width: 540px;
  1582. width: 30%;
  1583. .row1{
  1584. height: 520px;
  1585. .row1-t{
  1586. background: #fff; height: 50px; color: #f28b46;
  1587. .row1-t-l{
  1588. .img-l{float:left;padding: 16px 10px 16px 20px;width: 18px;height: 18px;background: url(../../../assets/images/index/row-bg2.png) no-repeat;background-position: 0 8px;}
  1589. .content{float:left;width: 54%;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;font-size: 14px;line-height: 50px;padding-left: 3px;}
  1590. .img-r{float:left;padding: 16px 0 16px 17px;width: 30px;height: 15px;background: url(../../../assets/images/index/row-bg2.png) no-repeat;background-position: 0 -24px;}
  1591. }
  1592. .row1-t-r{padding-right: 20px;text-align: right;line-height: 50px;}
  1593. }
  1594. .row1-c{
  1595. display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between;margin-top: 10px;
  1596. .row1-c-l{
  1597. background: #fff;width:49%;height:225px;border-radius:3px;margin-right: 1%;position: relative;
  1598. .img-t{width:49%;height:38%;background: url(../../../assets/images/index/t1.png) no-repeat; background-size: 100% 100%;}
  1599. }
  1600. .row1-c-r{
  1601. background: #fff;width:49%;height:225px;border-radius:3px;position: relative;
  1602. .img-t{width:49%;height:38%;background: url(../../../assets/images/index/t2.png) no-repeat; background-size: 100% 100%;}
  1603. }
  1604. }
  1605. .row1-b{
  1606. display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between;margin-top: 10px;
  1607. .row1-b-l{
  1608. background: #fff;width:49%;height:225px;border-radius:3px;margin-right:1%;position: relative;
  1609. .img-t{width:49%;height:38%;background: url(../../../assets/images/index/t4.png) no-repeat; background-size: 100% 100%;}
  1610. }
  1611. .row1-b-r{
  1612. background: #fff;width:49%;height:225px;border-radius:3px;position: relative;
  1613. .img-t{width:49%;height:38%;background: url(../../../assets/images/index/t3.png) no-repeat; background-size: 100% 100%;}
  1614. }
  1615. }
  1616. }
  1617. .row2{
  1618. margin-top:10px;height: 375px;background: #fff;
  1619. .img-title{background-position: 0 0;}
  1620. .todayPlan{
  1621. display: flex; flex-direction: row;margin-top: 10px;
  1622. div{
  1623. flex: 1;position: relative;
  1624. .bottom{
  1625. width: 99%;height: 70px;background: #f9f9f9;margin: 30px auto 5px;display: flex; flex-direction: row;
  1626. div{
  1627. flex: 1;height: 42px;color: #333333;
  1628. }
  1629. .bottom-l{
  1630. border-right: 1px solid #e0e0e0;margin-top: 15px;width: 100%;
  1631. .bottom-l-t{
  1632. height: 30px;
  1633. b{font-size: 18px;}
  1634. }
  1635. .bottom-l-b{font-size: 12px;}
  1636. }
  1637. .bottom-r{
  1638. margin-top: 15px;width: 100%;
  1639. .bottom-r-t{height: 30px;padding-left: 10px;}
  1640. .bottom-r-b{padding-left: 10px;font-size: 12px;}
  1641. }
  1642. }
  1643. }
  1644. }
  1645. }
  1646. .row3{
  1647. margin-top:10px;height: 375px;background: #fff;
  1648. .img-title{background-position: 0 -90px;}
  1649. }
  1650. }
  1651. .dashboard-r{
  1652. margin-left: 10px;flex:1;
  1653. .row1{
  1654. height: 520px;background: #fff;
  1655. .img-title{background-position: 0 -240px;}
  1656. #row2chartLine3{height: 270px;margin-top: 10px;}
  1657. .carsLength{
  1658. padding: 13px 0 0 22px;line-height: 38px;font-size: 18px;font-weight: 700;
  1659. }
  1660. .car{
  1661. height: 140px;position: relative;
  1662. .iconLeft{width:32px;height:32px;position:absolute;top:46px;left:15px; z-index:1;}
  1663. .iconRight{width:32px;height:32px;position:absolute;top:46px;right: 20px ;z-index:1;}
  1664. .carList{
  1665. padding:0 30px;height: 120px;overflow: hidden;display: flex;
  1666. .listW{
  1667. background: #f3f9f7;
  1668. float: left;
  1669. // flex: 1 1;
  1670. margin: 0 5px;position: relative;width: 50%;
  1671. .list{
  1672. width: 100%;height: 100%;border-radius: 5px;border:1px solid #000;
  1673. .list-t{
  1674. display: flex;border-bottom: 1px solid #f1f1f1;
  1675. .list-t-t{
  1676. flex: 1 1;width: 0;font-size: 12px;line-height: 22px;padding: 25px 5px 15px;text-align: center;
  1677. span{ display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  1678. }
  1679. }
  1680. .list-b{
  1681. display: flex; text-align: center;margin-top: 14px;color: #323232;
  1682. .list-b-l{
  1683. flex: 1;width: 0; height: 40px; position: relative;
  1684. .left{
  1685. .num{
  1686. font-size: 12px;
  1687. b{font-size: 12px;}
  1688. }
  1689. .weight{font-size: 12px;}
  1690. }
  1691. .right{
  1692. height: 30px;width: 1px;background: #e0e0e0;position: absolute;right: 0;top: 0;bottom: 0;margin-top:auto;margin-bottom:auto
  1693. }
  1694. }
  1695. }
  1696. }
  1697. .img-checked{width: 30px;height: 28px;position: absolute;top: 0;right: 0;background: url(../../../assets/images/index/row-r6.png);}
  1698. }
  1699. }
  1700. }
  1701. }
  1702. .row2{
  1703. margin-top:10px;height: 375px;
  1704. display: flex; flex-direction: row;
  1705. .row2-l{
  1706. margin-right: 10px; background: #fff;height:375px;border-radius:3px;flex: 1;
  1707. .img-title{background-position: 0 -30px;}
  1708. }
  1709. .row2-r{
  1710. background: #fff;height:375px;border-radius:3px;flex: 1;
  1711. .img-title{background-position: 0 -60px;}
  1712. }
  1713. }
  1714. .row3{
  1715. margin-top:10px;height: 375px;
  1716. display: flex; flex-direction: row;
  1717. .row3-l{
  1718. margin-right: 10px; background: #fff;height:375px;border-radius:3px;flex: 1;
  1719. .img-title{background-position: 0 -120px;}
  1720. }
  1721. .row3-r{
  1722. background: #fff;height:375px;border-radius:3px;flex: 1;
  1723. .img-title{background-position: 0 -150px;}
  1724. }
  1725. }
  1726. }
  1727. }
  1728. </style>