see.vue 22 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535
  1. <template>
  2. <div v-if="visible">
  3. <el-dialog id="reviseplanDialog" :title="title" :fullscreen="dialogFull" :destroy-on-close="true" :visible.sync="visible" :close-on-click-modal="false" append-to-body :before-close="closeDialog" width="90%">
  4. <template slot="title">
  5. <div class="avue-crud__dialog__header">
  6. <span class="el-dialog__title">
  7. <span style="display:inline-block;width:3px;height:20px;margin-right:5px; float: left;margin-top:2px" />
  8. {{ title }}
  9. </span>
  10. <div class="avue-crud__dialog__menu" @click="dialogFull? dialogFull=false: dialogFull=true">
  11. <svg-icon v-if="dialogFull" icon-class="exit-fullscreen" />
  12. <svg-icon v-else icon-class="fullscreen" />
  13. </div>
  14. </div>
  15. </template>
  16. <div class="see" style="max-height: 600px;overflow-y: auto;overflow-x: hidden">
  17. <el-row :gutter="10">
  18. <el-col :span="10">
  19. <div class="train">
  20. <h4>车次信息</h4>
  21. <div class="table">
  22. <el-table
  23. :key="table1.tableKey"
  24. v-loading="table1.listLoading"
  25. element-loading-text="给我一点时间"
  26. :data="table1.list"
  27. border
  28. fit
  29. highlight-current-row
  30. style="width: 98%;"
  31. :row-style="rowStyle"
  32. :cell-style="cellStyle"
  33. class="elTable table-fixed"
  34. @row-click="rowClick"
  35. >
  36. <el-table-column label="序号" align="center" type="index" width="50" />
  37. <el-table-column label="计划名称" min-width="60px" align="center" prop="projname" />
  38. <el-table-column label="TMR名称" min-width="60px" align="center" prop="tmrtname" />
  39. <el-table-column sortable label="制定日期" min-width="70px" align="center" prop="mydate" />
  40. <el-table-column sortable label="开始时间" min-width="70px" align="center" prop="intime" />
  41. </el-table>
  42. </div>
  43. </div>
  44. </el-col>
  45. <el-col :span="14">
  46. <div class="mixture">
  47. <h4>混料信息</h4>
  48. <div class="table">
  49. <el-table
  50. :key="table2.tableKey"
  51. v-loading="table2.listLoading"
  52. element-loading-text="给我一点时间"
  53. :data="table2.list"
  54. border
  55. fit
  56. highlight-current-row
  57. style="width: 98%;"
  58. :row-style="rowStyle"
  59. :cell-style="cellStyle"
  60. class="elTable table-fixed"
  61. >
  62. <el-table-column label="操作编号" min-width="50px" align="center" prop="sort" />
  63. <el-table-column label="饲料名称" min-width="50px" align="center" prop="fname" />
  64. <el-table-column label="计划重量" min-width="50px" align="center" prop="lweight" />
  65. <el-table-column label="实际重量" min-width="50px" align="center" prop="actualweightminus" />
  66. <el-table-column label="误差值" min-width="50px" align="center" prop="diff" />
  67. <el-table-column label="准确率" min-width="50px" align="center" prop="diffRate" />
  68. <el-table-column label="完成时间" min-width="50px" align="center" prop="intime" />
  69. <el-table-column label="过程时间" min-width="50px" align="center" prop="proesstime" />
  70. <el-table-column label="开始读取重量" min-width="50px" align="center" prop="lastactualweight" />
  71. <el-table-column label="最后读取重量" min-width="50px" align="center" prop="actualweight" />
  72. <el-table-column label="取料方式" min-width="50px" align="center" prop="buttontype" />
  73. </el-table>
  74. </div>
  75. </div>
  76. <div class="spreading">
  77. <h4>撒料信息</h4>
  78. <div class="table">
  79. <el-table
  80. :key="table3.tableKey"
  81. v-loading="table3.listLoading"
  82. element-loading-text="给我一点时间"
  83. :data="table3.list"
  84. border
  85. fit
  86. highlight-current-row
  87. style="width: 98%;"
  88. :row-style="rowStyle"
  89. :cell-style="cellStyle"
  90. class="elTable table-fixed"
  91. max-height="300"
  92. >
  93. <el-table-column label="操作编号" min-width="50px" align="center" prop="sort" />
  94. <el-table-column label="栏舍名称" min-width="50px" align="center" prop="fname" />
  95. <el-table-column label="计划重量" min-width="50px" align="center" prop="lweight" />
  96. <el-table-column label="实际重量" min-width="50px" align="center" prop="actualweightminus" />
  97. <el-table-column label="误差值" min-width="50px" align="center" prop="diff" />
  98. <el-table-column label="准确率" min-width="50px" align="center" prop="diffRate" />
  99. <el-table-column label="完成时间" min-width="50px" align="center" prop="intime" />
  100. <el-table-column label="过程时间" min-width="50px" align="center" prop="proesstime" />
  101. <el-table-column label="开始读取重量" min-width="50px" align="center" prop="lastactualweight" />
  102. <el-table-column label="最后读取重量" min-width="50px" align="center" prop="actualweight" />
  103. <el-table-column label="取料方式" min-width="50px" align="center" prop="buttontype" />
  104. </el-table>
  105. </div>
  106. </div>
  107. <div class="controlChart">
  108. <h4>监控图</h4>
  109. <div id="chartLine" style="width: 100%;height:300px;" />
  110. </div>
  111. </el-col>
  112. </el-row>
  113. </div>
  114. <div slot="footer" class="dialog-footer">
  115. <el-button class="cancelClose cancelClose1" @click="closeDialog()">关闭</el-button>
  116. </div>
  117. </el-dialog>
  118. </div>
  119. </template>
  120. <script>
  121. import * as echarts from 'echarts';
  122. require('echarts/theme/macarons')
  123. import Cookies from 'js-cookie'
  124. import { GetDataByName,postJson, GetReportform, formatNum } from '@/api/common'
  125. import { parseTime } from '@/utils/index.js'
  126. export default {
  127. name: 'See',
  128. props: {
  129. show: { type: Boolean, default: false }, // 弹框可见标志
  130. titleFname: { type: String, defalut: '准确性详情' },
  131. methodName:{ type: String, defalut: '' },
  132. methodPastureid:{ type: String, defalut: '' },
  133. rowPid: { type: String, defalut: '0' },
  134. optdevice: { type: String, defalut: '' },
  135. startTime:{ type: String, defalut: '' },
  136. stopTime:{ type: String, defalut: '' },
  137. error:{type: String, defalut: '' }
  138. },
  139. data() {
  140. return {
  141. dialogFull: false,
  142. visible: this.show,
  143. title: '',
  144. pid: '',
  145. methodname:'',
  146. methodpastureid:'',
  147. optdevice1:'',
  148. startTime1:'',
  149. stopTime1:'',
  150. error1:'',
  151. table1: {
  152. getdataListParm: {
  153. name: '', page: 1, offset: 1, pagecount: '', returntype: 'Map',
  154. parammaps: { pid: '', optdevice:'', startTime:'', stopTime:'',pastureid: '' }
  155. },
  156. tableKey: 0, list: [], total: 0, listLoading: false
  157. },
  158. table2: {
  159. getdataListParm: {
  160. name: 'getprocessAnalysisHL', page: 1, offset: 1, pagecount: '', returntype: 'Map',
  161. parammaps: { pid: '', pastureid: '' }
  162. },
  163. tableKey: 0, list: [], total: 0, listLoading: false
  164. },
  165. table3: {
  166. getdataListParm: {
  167. name: 'getprocessAnalysisSL', page: 1, offset: 1, pagecount: '', returntype: 'Map',
  168. parammaps: { pid: '', pastureid: '' }
  169. },
  170. tableKey: 0, list: [], total: 0, listLoading: false
  171. },
  172. chart1: {
  173. getdataListParm: {
  174. name: 'getprocessAnalysisTB', page: 1, offset: 1, pagecount: '', returntype: 'Map',
  175. parammaps: {
  176. pid: '', pastureid: ''
  177. }
  178. },
  179. tableKey: 0, list: [], total: 0, listLoading: false, chartLine_data: []
  180. },
  181. chartLine: null, chartLine_data: {}, chartName: '',
  182. // rowStyle: { maxHeight: 30 + 'px', height: 30 + 'px' },
  183. cellStyle: { padding: 0 + 'px' },
  184. myHeight: document.documentElement.clientHeight - 85 - 200
  185. }
  186. },
  187. watch: {
  188. // 监听show,visible 随着show变化而变化
  189. show: {
  190. immediate: true,
  191. handler(show) {
  192. console.log(show, 'show')
  193. this.visible = show
  194. if(show == true){
  195. setTimeout(() => {
  196. this.getList1()
  197. }, 500)
  198. }
  199. }
  200. },
  201. titleFname: {
  202. immediate: true,
  203. handler(newVal, oldVal) {
  204. console.log(newVal, 'titleFname')
  205. this.title = newVal
  206. }
  207. },
  208. rowPid: {
  209. immediate: true,
  210. handler(newVal, oldVal) {
  211. console.log(newVal, 'rowPid')
  212. this.pid = newVal
  213. }
  214. },
  215. methodName: {
  216. immediate: true,
  217. handler(newVal, oldVal) {
  218. console.log(newVal, 'methodname')
  219. this.methodname = newVal
  220. }
  221. },
  222. methodPastureid: {
  223. immediate: true,
  224. handler(newVal, oldVal) {
  225. console.log(newVal, 'methodPastureid')
  226. this.methodpastureid = newVal
  227. }
  228. },
  229. optdevice: {
  230. immediate: true,
  231. handler(newVal, oldVal) {
  232. console.log(newVal, 'optdevice')
  233. this.optdevice1 = newVal
  234. }
  235. },
  236. startTime: {
  237. immediate: true,
  238. handler(newVal, oldVal) {
  239. console.log(newVal, 'startTime')
  240. this.startTime1 = newVal
  241. }
  242. },
  243. stopTime: {
  244. immediate: true,
  245. handler(newVal, oldVal) {
  246. console.log(newVal, 'stopTime')
  247. this.stopTime1 = newVal
  248. }
  249. },
  250. error: {
  251. immediate: true,
  252. handler(newVal, oldVal) {
  253. console.log(newVal, 'error')
  254. this.error1 = newVal
  255. }
  256. },
  257. },
  258. created() {
  259. },
  260. mounted() {
  261. },
  262. methods: {
  263. closeDialog() {
  264. this.dialogFull = false
  265. this.$emit('update:show', false)
  266. },
  267. // TMR设备列表
  268. getList1() {
  269. console.log(this.seepastureid,'this.seepastureid')
  270. this.table1.listLoading = true
  271. this.table1.getdataListParm.name = this.methodname
  272. this.table1.getdataListParm.parammaps.optdevice = this.optdevice1
  273. this.table1.getdataListParm.parammaps.startTime = this.startTime1
  274. this.table1.getdataListParm.parammaps.stopTime = this.stopTime1
  275. this.table1.getdataListParm.parammaps.pid = this.pid
  276. this.table1.getdataListParm.parammaps.error = this.error1
  277. this.table1.getdataListParm.parammaps.pastureid = this.methodpastureid
  278. let url = 'api/v1/ops/accuracy/data_by_name'
  279. let data = {}
  280. data.api_name = this.table1.getdataListParm.name
  281. data.optdevice = this.table1.getdataListParm.parammaps.optdevice
  282. data.start_time = this.table1.getdataListParm.parammaps.startTime
  283. data.end_time = this.table1.getdataListParm.parammaps.stopTime
  284. data.pid = this.table1.getdataListParm.parammaps.pid
  285. data.error = this.table1.getdataListParm.parammaps.error
  286. data.pasture_id = this.table1.getdataListParm.parammaps.pastureid
  287. postJson(url,data).then(response => {
  288. console.log('车次信息数据', response.data.list)
  289. if (response.data !== null && response.data.list !== null) {
  290. this.table1.list = response.data.list
  291. this.table2.getdataListParm.parammaps.pid = response.data.list[0].pid
  292. this.table2.getdataListParm.parammaps.pastureid = response.data.list[0].pastureid
  293. this.table3.getdataListParm.parammaps.pid = response.data.list[0].pid
  294. this.table3.getdataListParm.parammaps.pastureid = response.data.list[0].pastureid
  295. this.chart1.getdataListParm.parammaps.pid = response.data.list[0].pid
  296. this.chart1.getdataListParm.parammaps.pastureid = response.data.list[0].pastureid
  297. this.getList2()
  298. this.getList3()
  299. this.getChart1()
  300. } else {
  301. this.table1.list = []
  302. this.table2.getdataListParm.parammaps.pid = ''
  303. this.table2.getdataListParm.parammaps.pastureid = ''
  304. this.table3.getdataListParm.parammaps.pid = ''
  305. this.table3.getdataListParm.parammaps.pastureid = ''
  306. this.chart1.getdataListParm.parammaps.pid = ''
  307. this.chart1.getdataListParm.parammaps.pastureid = ''
  308. }
  309. setTimeout(() => {
  310. this.table1.listLoading = false
  311. }, 100)
  312. })
  313. },
  314. getList2() {
  315. this.table2.listLoading = true
  316. this.table2.getdataListParm.parammaps.error = this.error
  317. let url = 'api/v1/ops/accuracy/data_by_name'
  318. let data = {}
  319. data.api_name = this.table2.getdataListParm.name
  320. data.error = this.table2.getdataListParm.parammaps.error
  321. data.pasture_id = this.methodpastureid
  322. data.pid = this.table2.getdataListParm.parammaps.pid
  323. data.start_time = parseTime(new Date(), '{y}-{m}-{d}')
  324. data.end_time = parseTime(new Date(), '{y}-{m}-{d}')
  325. postJson(url,data).then(response => {
  326. // GetDataByName(this.table2.getdataListParm).then(response => {
  327. console.log('混料信息数据', response.data.list)
  328. if (response.data !== null && response.data.list !== null) {
  329. this.table2.list = response.data.list
  330. var sumlweight = 0
  331. var sumactualweightminus = 0
  332. var sumsweight = 0
  333. var sumproesstime = ''
  334. for (let i = 0; i < response.data.list.length; i++) {
  335. if (response.data.list[i].lweight == undefined) { response.data.list[i].lweight = 0 }
  336. if (response.data.list[i].actualweightminus == undefined) { response.data.list[i].actualweightminus = 0 }
  337. if (response.data.list[i].sweight == undefined) { response.data.list[i].sweight = 0 }
  338. sumlweight += parseFloat(response.data.list[i].lweight)
  339. sumactualweightminus += parseFloat(response.data.list[i].actualweightminus)
  340. sumsweight += parseFloat(response.data.list[i].sweight)
  341. sumproesstime = response.data.list[0].sumproesstime
  342. }
  343. sumlweight = formatNum(sumlweight, 2)
  344. sumactualweightminus = formatNum(sumactualweightminus, 2)
  345. sumsweight = formatNum(sumsweight, 2)
  346. this.table2.list.push({ 'sort': '合计', 'lweight': sumlweight, 'actualweightminus': sumactualweightminus, 'sweight': sumsweight, 'proesstime': sumproesstime })
  347. } else {
  348. this.table2.list = []
  349. }
  350. setTimeout(() => {
  351. this.table2.listLoading = false
  352. }, 100)
  353. })
  354. },
  355. getList3() {
  356. this.table3.listLoading = true
  357. this.table3.getdataListParm.parammaps.error = this.error
  358. console.log(this.table3.getdataListParm,'table2')
  359. let url = 'api/v1/ops/accuracy/data_by_name'
  360. let data = {}
  361. data.api_name = this.table3.getdataListParm.name
  362. data.error = this.table3.getdataListParm.parammaps.error
  363. data.pasture_id = this.methodpastureid
  364. data.pid = this.table3.getdataListParm.parammaps.pid
  365. data.start_time = parseTime(new Date(), '{y}-{m}-{d}')
  366. data.end_time = parseTime(new Date(), '{y}-{m}-{d}')
  367. postJson(url,data).then(response => {
  368. // GetDataByName(this.table3.getdataListParm).then(response => {
  369. if (response.data !== null && response.data.list !== null) {
  370. console.log('撒料信息数据', response.data.list)
  371. this.table3.list = response.data.list
  372. var sumlweight = 0
  373. var sumactualweightminus = 0
  374. var sumsweight = 0
  375. var sumproesstime = ''
  376. for (let i = 0; i < response.data.list.length; i++) {
  377. if (response.data.list[i].lweight == undefined) { response.data.list[i].lweight = 0 }
  378. if (response.data.list[i].actualweightminus == undefined) { response.data.list[i].actualweightminus = 0 }
  379. if (response.data.list[i].sweight == undefined) { response.data.list[i].sweight = 0 }
  380. sumlweight += parseFloat(response.data.list[i].lweight)
  381. sumactualweightminus += parseFloat(response.data.list[i].actualweightminus)
  382. sumsweight += parseFloat(response.data.list[i].sweight)
  383. sumproesstime = response.data.list[0].sumproesstime
  384. }
  385. sumlweight = formatNum(sumlweight, 2)
  386. sumactualweightminus = formatNum(sumactualweightminus, 2)
  387. sumsweight = formatNum(sumsweight, 2)
  388. this.table3.list.push({ 'sort': '合计', 'lweight': sumlweight, 'actualweightminus': sumactualweightminus, 'sweight': sumsweight, 'proesstime': sumproesstime })
  389. } else {
  390. this.table3.list = []
  391. }
  392. setTimeout(() => {
  393. this.table3.listLoading = false
  394. }, 100)
  395. })
  396. },
  397. getChart1() {
  398. this.chart1.listLoading = true
  399. this.chart1.getdataListParm.parammaps.error = this.error
  400. let page = 0
  401. let page_size = 0
  402. let url = '/api/v1/ops/process/analysis/mixed_sprinkle_detail' + '?page=' + page + '&page_size=' + page_size
  403. let data = {
  404. 'pasture_id':this.methodpastureid,
  405. 'api_name':this.chart1.getdataListParm.name,
  406. 'start_time':this.chart1.getdataListParm.parammaps.startTime,
  407. 'end_time':this.chart1.getdataListParm.parammaps.stopTime
  408. }
  409. if(this.chart1.getdataListParm.parammaps.pid){
  410. data.pid = this.chart1.getdataListParm.parammaps.pid
  411. }
  412. postJson(url, data).then(response => {
  413. if (response.data !== null && response.data.list !== null) {
  414. this.chart1.list = response.data.data
  415. console.log('监控图', response.data.list)
  416. this.chart1.chartLine_data = response.data.list
  417. this.chart1.total = response.data.total
  418. this.roadChartLine1(this.chart1.chartLine_data)
  419. } else {
  420. this.chart1.list = []
  421. }
  422. setTimeout(() => {
  423. this.chart1.listLoading = false
  424. }, 100)
  425. })
  426. },
  427. roadChartLine1(chartLine_data) {
  428. console.log(chartLine_data.data5, 'chartLine_data')
  429. if (this.chartLine != null) {
  430. this.chartLine.dispose()
  431. }
  432. this.chartLine = echarts.init(document.getElementById('chartLine'))
  433. var option = {
  434. title: { text: '', subtext: '' },
  435. color: ['#ff0000', '#5199e5', '#fdb06a', '#fb8b73'], // 关键加上这句话,legend的颜色和折线的自定义颜色就一致了
  436. legend: [{
  437. itemWidth: 15, itemHeight: 7, right: '25%', textStyle: { fontSize: 12 },
  438. data: [{ name: '设计重量' }, { name: '实际重量' }]
  439. }, {
  440. itemWidth: 15, itemHeight: 15, right: '0', textStyle: { fontSize: 12 },
  441. data: [
  442. { name: '开始重量' },
  443. { name: '结束重量' }
  444. ]
  445. }],
  446. tooltip: {
  447. trigger: 'axis',
  448. formatter: function(params) {
  449. console.log(params, 'params')
  450. var tip = params[0].name
  451. for (let i = 0; i < params.length; i++) {
  452. if (params[i].seriesName == '设计重量') {
  453. tip += '<br>' + params[i].seriesName + ':' + params[i].value[1]
  454. }
  455. if (params[i].seriesName == '实际重量') {
  456. tip += '<br>' + params[i].seriesName + ':' + params[i].value[1]
  457. }
  458. if (params[i].seriesName == '开始重量') {
  459. tip += '<br>' + params[i].seriesName + ':' + params[i].value[1]
  460. }
  461. if (params[i].seriesName == '结束重量') {
  462. tip += '<br>' + params[i].seriesName + ':' + params[i].value[1] + '<br>' + params[i].value[2] + params[i].value[3]
  463. }
  464. }
  465. return tip
  466. }
  467. },
  468. calculable: true,
  469. xAxis: [
  470. { type: 'category' }
  471. ],
  472. yAxis: [{ type: 'value' }],
  473. toolbox: {
  474. show: false,
  475. feature: {
  476. dataZoom: { realtime: false, yAxisIndex: 'none', },
  477. restore: {},
  478. }
  479. },
  480. dataZoom: [
  481. {type: 'inside'}, //用于添加滚轮缩放
  482. {type:'slider' }, //用于添加滑动条缩放,
  483. ],
  484. series: [
  485. { symbol: 'none', name: '实际重量', type: 'line', data: chartLine_data.data3, itemStyle: { normal: { lineStyle: { color: '#ff0000' }}}},
  486. { symbol: 'none', name: '设计重量', type: 'line', step: 'middle', data: chartLine_data.data2 },
  487. { name: '开始重量', symbolSize: 10, type: 'scatter', data: chartLine_data.data4 },
  488. { name: '结束重量', symbolSize: 10, type: 'scatter', data: chartLine_data.data5 }
  489. ]
  490. }
  491. this.chartLine.setOption(option)
  492. if (this.chartLine != null ) {
  493. window.onresize = ()=> {
  494. this.chartLine.resize()
  495. }
  496. }
  497. },
  498. rowClick(row, column, event) {
  499. this.table2.getdataListParm.parammaps.pid = row.pid
  500. this.table3.getdataListParm.parammaps.pid = row.pid
  501. this.chart1.getdataListParm.parammaps.pid = row.pid
  502. this.getList2()
  503. this.getList3()
  504. this.getChart1()
  505. },
  506. rowStyle({ row, rowIndex }) {
  507. let stylejson = {};
  508. if (row.abnormal == 1) {
  509. stylejson.background = "#fb8072";// 背景颜色
  510. stylejson.maxHeight = '30px';// 背景颜色
  511. stylejson.height = '30px';// 背景颜色
  512. // 也可以修改文字颜色
  513. return stylejson;
  514. } else {
  515. return "";
  516. }
  517. },
  518. }
  519. }
  520. </script>
  521. <style lang="scss" scoped>
  522. /deep/ .el-table th>.cell{
  523. padding-left: 0 !important;;
  524. padding-right: 0 !important;;
  525. }
  526. /deep/ .el-table td>.cell{
  527. padding-left: 0 !important;;
  528. padding-right: 0 !important;;
  529. }
  530. </style>