123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535 |
- <template>
- <div v-if="visible">
- <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%">
- <template slot="title">
- <div class="avue-crud__dialog__header">
- <span class="el-dialog__title">
- <span style="display:inline-block;width:3px;height:20px;margin-right:5px; float: left;margin-top:2px" />
- {{ title }}
- </span>
- <div class="avue-crud__dialog__menu" @click="dialogFull? dialogFull=false: dialogFull=true">
- <svg-icon v-if="dialogFull" icon-class="exit-fullscreen" />
- <svg-icon v-else icon-class="fullscreen" />
- </div>
- </div>
- </template>
- <div class="see" style="max-height: 600px;overflow-y: auto;overflow-x: hidden">
- <el-row :gutter="10">
- <el-col :span="10">
- <div class="train">
- <h4>车次信息</h4>
- <div class="table">
- <el-table
- :key="table1.tableKey"
- v-loading="table1.listLoading"
- element-loading-text="给我一点时间"
- :data="table1.list"
- border
- fit
- highlight-current-row
- style="width: 98%;"
- :row-style="rowStyle"
- :cell-style="cellStyle"
- class="elTable table-fixed"
- @row-click="rowClick"
- >
- <el-table-column label="序号" align="center" type="index" width="50" />
- <el-table-column label="计划名称" min-width="60px" align="center" prop="projname" />
- <el-table-column label="TMR名称" min-width="60px" align="center" prop="tmrtname" />
- <el-table-column sortable label="制定日期" min-width="70px" align="center" prop="mydate" />
- <el-table-column sortable label="开始时间" min-width="70px" align="center" prop="intime" />
- </el-table>
- </div>
- </div>
- </el-col>
- <el-col :span="14">
- <div class="mixture">
- <h4>混料信息</h4>
- <div class="table">
- <el-table
- :key="table2.tableKey"
- v-loading="table2.listLoading"
- element-loading-text="给我一点时间"
- :data="table2.list"
- border
- fit
- highlight-current-row
- style="width: 98%;"
- :row-style="rowStyle"
- :cell-style="cellStyle"
- class="elTable table-fixed"
- >
- <el-table-column label="操作编号" min-width="50px" align="center" prop="sort" />
- <el-table-column label="饲料名称" min-width="50px" align="center" prop="fname" />
- <el-table-column label="计划重量" min-width="50px" align="center" prop="lweight" />
- <el-table-column label="实际重量" min-width="50px" align="center" prop="actualweightminus" />
- <el-table-column label="误差值" min-width="50px" align="center" prop="diff" />
- <el-table-column label="准确率" min-width="50px" align="center" prop="diffRate" />
- <el-table-column label="完成时间" min-width="50px" align="center" prop="intime" />
- <el-table-column label="过程时间" min-width="50px" align="center" prop="proesstime" />
- <el-table-column label="开始读取重量" min-width="50px" align="center" prop="lastactualweight" />
- <el-table-column label="最后读取重量" min-width="50px" align="center" prop="actualweight" />
- <el-table-column label="取料方式" min-width="50px" align="center" prop="buttontype" />
- </el-table>
- </div>
- </div>
- <div class="spreading">
- <h4>撒料信息</h4>
- <div class="table">
- <el-table
- :key="table3.tableKey"
- v-loading="table3.listLoading"
- element-loading-text="给我一点时间"
- :data="table3.list"
- border
- fit
- highlight-current-row
- style="width: 98%;"
- :row-style="rowStyle"
- :cell-style="cellStyle"
- class="elTable table-fixed"
- max-height="300"
- >
- <el-table-column label="操作编号" min-width="50px" align="center" prop="sort" />
- <el-table-column label="栏舍名称" min-width="50px" align="center" prop="fname" />
- <el-table-column label="计划重量" min-width="50px" align="center" prop="lweight" />
- <el-table-column label="实际重量" min-width="50px" align="center" prop="actualweightminus" />
- <el-table-column label="误差值" min-width="50px" align="center" prop="diff" />
- <el-table-column label="准确率" min-width="50px" align="center" prop="diffRate" />
- <el-table-column label="完成时间" min-width="50px" align="center" prop="intime" />
- <el-table-column label="过程时间" min-width="50px" align="center" prop="proesstime" />
- <el-table-column label="开始读取重量" min-width="50px" align="center" prop="lastactualweight" />
- <el-table-column label="最后读取重量" min-width="50px" align="center" prop="actualweight" />
- <el-table-column label="取料方式" min-width="50px" align="center" prop="buttontype" />
- </el-table>
- </div>
- </div>
- <div class="controlChart">
- <h4>监控图</h4>
- <div id="chartLine" style="width: 100%;height:300px;" />
- </div>
- </el-col>
- </el-row>
- </div>
- <div slot="footer" class="dialog-footer">
- <el-button class="cancelClose cancelClose1" @click="closeDialog()">关闭</el-button>
- </div>
- </el-dialog>
- </div>
- </template>
- <script>
- import * as echarts from 'echarts';
- require('echarts/theme/macarons')
- import Cookies from 'js-cookie'
- import { GetDataByName,postJson, GetReportform, formatNum } from '@/api/common'
- import { parseTime } from '@/utils/index.js'
- export default {
- name: 'See',
- props: {
- show: { type: Boolean, default: false }, // 弹框可见标志
- titleFname: { type: String, defalut: '准确性详情' },
- methodName:{ type: String, defalut: '' },
- methodPastureid:{ type: String, defalut: '' },
- rowPid: { type: String, defalut: '0' },
- optdevice: { type: String, defalut: '' },
- startTime:{ type: String, defalut: '' },
- stopTime:{ type: String, defalut: '' },
- error:{type: String, defalut: '' }
- },
- data() {
- return {
- dialogFull: false,
- visible: this.show,
- title: '',
- pid: '',
- methodname:'',
- methodpastureid:'',
- optdevice1:'',
- startTime1:'',
- stopTime1:'',
- error1:'',
- table1: {
- getdataListParm: {
- name: '', page: 1, offset: 1, pagecount: '', returntype: 'Map',
- parammaps: { pid: '', optdevice:'', startTime:'', stopTime:'',pastureid: '' }
- },
- tableKey: 0, list: [], total: 0, listLoading: false
- },
- table2: {
- getdataListParm: {
- name: 'getprocessAnalysisHL', page: 1, offset: 1, pagecount: '', returntype: 'Map',
- parammaps: { pid: '', pastureid: '' }
- },
- tableKey: 0, list: [], total: 0, listLoading: false
- },
- table3: {
- getdataListParm: {
- name: 'getprocessAnalysisSL', page: 1, offset: 1, pagecount: '', returntype: 'Map',
- parammaps: { pid: '', pastureid: '' }
- },
- tableKey: 0, list: [], total: 0, listLoading: false
- },
- chart1: {
- getdataListParm: {
- name: 'getprocessAnalysisTB', page: 1, offset: 1, pagecount: '', returntype: 'Map',
- parammaps: {
- pid: '', pastureid: ''
- }
- },
- tableKey: 0, list: [], total: 0, listLoading: false, chartLine_data: []
- },
- chartLine: null, chartLine_data: {}, chartName: '',
- // rowStyle: { maxHeight: 30 + 'px', height: 30 + 'px' },
- cellStyle: { padding: 0 + 'px' },
- myHeight: document.documentElement.clientHeight - 85 - 200
- }
- },
- watch: {
- // 监听show,visible 随着show变化而变化
- show: {
- immediate: true,
- handler(show) {
- console.log(show, 'show')
- this.visible = show
- if(show == true){
- setTimeout(() => {
- this.getList1()
- }, 500)
- }
- }
- },
- titleFname: {
- immediate: true,
- handler(newVal, oldVal) {
- console.log(newVal, 'titleFname')
- this.title = newVal
- }
- },
- rowPid: {
- immediate: true,
- handler(newVal, oldVal) {
- console.log(newVal, 'rowPid')
- this.pid = newVal
- }
- },
- methodName: {
- immediate: true,
- handler(newVal, oldVal) {
- console.log(newVal, 'methodname')
- this.methodname = newVal
- }
- },
- methodPastureid: {
- immediate: true,
- handler(newVal, oldVal) {
- console.log(newVal, 'methodPastureid')
- this.methodpastureid = newVal
- }
- },
- optdevice: {
- immediate: true,
- handler(newVal, oldVal) {
- console.log(newVal, 'optdevice')
- this.optdevice1 = newVal
- }
- },
- startTime: {
- immediate: true,
- handler(newVal, oldVal) {
- console.log(newVal, 'startTime')
- this.startTime1 = newVal
- }
- },
- stopTime: {
- immediate: true,
- handler(newVal, oldVal) {
- console.log(newVal, 'stopTime')
- this.stopTime1 = newVal
- }
- },
- error: {
- immediate: true,
- handler(newVal, oldVal) {
- console.log(newVal, 'error')
- this.error1 = newVal
- }
- },
- },
- created() {
- },
- mounted() {
- },
- methods: {
- closeDialog() {
- this.dialogFull = false
- this.$emit('update:show', false)
- },
- // TMR设备列表
- getList1() {
- console.log(this.seepastureid,'this.seepastureid')
- this.table1.listLoading = true
- this.table1.getdataListParm.name = this.methodname
- this.table1.getdataListParm.parammaps.optdevice = this.optdevice1
- this.table1.getdataListParm.parammaps.startTime = this.startTime1
- this.table1.getdataListParm.parammaps.stopTime = this.stopTime1
- this.table1.getdataListParm.parammaps.pid = this.pid
- this.table1.getdataListParm.parammaps.error = this.error1
- this.table1.getdataListParm.parammaps.pastureid = this.methodpastureid
- let url = 'api/v1/ops/accuracy/data_by_name'
- let data = {}
- data.api_name = this.table1.getdataListParm.name
- data.optdevice = this.table1.getdataListParm.parammaps.optdevice
- data.start_time = this.table1.getdataListParm.parammaps.startTime
- data.end_time = this.table1.getdataListParm.parammaps.stopTime
- data.pid = this.table1.getdataListParm.parammaps.pid
- data.error = this.table1.getdataListParm.parammaps.error
- data.pasture_id = this.table1.getdataListParm.parammaps.pastureid
- postJson(url,data).then(response => {
- console.log('车次信息数据', response.data.list)
- if (response.data !== null && response.data.list !== null) {
- this.table1.list = response.data.list
- this.table2.getdataListParm.parammaps.pid = response.data.list[0].pid
- this.table2.getdataListParm.parammaps.pastureid = response.data.list[0].pastureid
- this.table3.getdataListParm.parammaps.pid = response.data.list[0].pid
- this.table3.getdataListParm.parammaps.pastureid = response.data.list[0].pastureid
- this.chart1.getdataListParm.parammaps.pid = response.data.list[0].pid
- this.chart1.getdataListParm.parammaps.pastureid = response.data.list[0].pastureid
- this.getList2()
- this.getList3()
- this.getChart1()
- } else {
- this.table1.list = []
- this.table2.getdataListParm.parammaps.pid = ''
- this.table2.getdataListParm.parammaps.pastureid = ''
- this.table3.getdataListParm.parammaps.pid = ''
- this.table3.getdataListParm.parammaps.pastureid = ''
- this.chart1.getdataListParm.parammaps.pid = ''
- this.chart1.getdataListParm.parammaps.pastureid = ''
- }
- setTimeout(() => {
- this.table1.listLoading = false
- }, 100)
- })
- },
- getList2() {
- this.table2.listLoading = true
- this.table2.getdataListParm.parammaps.error = this.error
- let url = 'api/v1/ops/accuracy/data_by_name'
- let data = {}
- data.api_name = this.table2.getdataListParm.name
- data.error = this.table2.getdataListParm.parammaps.error
- data.pasture_id = this.methodpastureid
- data.pid = this.table2.getdataListParm.parammaps.pid
- data.start_time = parseTime(new Date(), '{y}-{m}-{d}')
- data.end_time = parseTime(new Date(), '{y}-{m}-{d}')
- postJson(url,data).then(response => {
- // GetDataByName(this.table2.getdataListParm).then(response => {
- console.log('混料信息数据', response.data.list)
- if (response.data !== null && response.data.list !== null) {
- this.table2.list = response.data.list
- var sumlweight = 0
- var sumactualweightminus = 0
- var sumsweight = 0
- var sumproesstime = ''
- for (let i = 0; i < response.data.list.length; i++) {
- if (response.data.list[i].lweight == undefined) { response.data.list[i].lweight = 0 }
- if (response.data.list[i].actualweightminus == undefined) { response.data.list[i].actualweightminus = 0 }
- if (response.data.list[i].sweight == undefined) { response.data.list[i].sweight = 0 }
- sumlweight += parseFloat(response.data.list[i].lweight)
- sumactualweightminus += parseFloat(response.data.list[i].actualweightminus)
- sumsweight += parseFloat(response.data.list[i].sweight)
- sumproesstime = response.data.list[0].sumproesstime
- }
- sumlweight = formatNum(sumlweight, 2)
- sumactualweightminus = formatNum(sumactualweightminus, 2)
- sumsweight = formatNum(sumsweight, 2)
- this.table2.list.push({ 'sort': '合计', 'lweight': sumlweight, 'actualweightminus': sumactualweightminus, 'sweight': sumsweight, 'proesstime': sumproesstime })
- } else {
- this.table2.list = []
- }
- setTimeout(() => {
- this.table2.listLoading = false
- }, 100)
- })
- },
- getList3() {
- this.table3.listLoading = true
- this.table3.getdataListParm.parammaps.error = this.error
- console.log(this.table3.getdataListParm,'table2')
- let url = 'api/v1/ops/accuracy/data_by_name'
- let data = {}
- data.api_name = this.table3.getdataListParm.name
- data.error = this.table3.getdataListParm.parammaps.error
- data.pasture_id = this.methodpastureid
- data.pid = this.table3.getdataListParm.parammaps.pid
- data.start_time = parseTime(new Date(), '{y}-{m}-{d}')
- data.end_time = parseTime(new Date(), '{y}-{m}-{d}')
- postJson(url,data).then(response => {
- // GetDataByName(this.table3.getdataListParm).then(response => {
- if (response.data !== null && response.data.list !== null) {
- console.log('撒料信息数据', response.data.list)
- this.table3.list = response.data.list
- var sumlweight = 0
- var sumactualweightminus = 0
- var sumsweight = 0
- var sumproesstime = ''
- for (let i = 0; i < response.data.list.length; i++) {
- if (response.data.list[i].lweight == undefined) { response.data.list[i].lweight = 0 }
- if (response.data.list[i].actualweightminus == undefined) { response.data.list[i].actualweightminus = 0 }
- if (response.data.list[i].sweight == undefined) { response.data.list[i].sweight = 0 }
- sumlweight += parseFloat(response.data.list[i].lweight)
- sumactualweightminus += parseFloat(response.data.list[i].actualweightminus)
- sumsweight += parseFloat(response.data.list[i].sweight)
- sumproesstime = response.data.list[0].sumproesstime
- }
- sumlweight = formatNum(sumlweight, 2)
- sumactualweightminus = formatNum(sumactualweightminus, 2)
- sumsweight = formatNum(sumsweight, 2)
- this.table3.list.push({ 'sort': '合计', 'lweight': sumlweight, 'actualweightminus': sumactualweightminus, 'sweight': sumsweight, 'proesstime': sumproesstime })
- } else {
- this.table3.list = []
- }
- setTimeout(() => {
- this.table3.listLoading = false
- }, 100)
- })
- },
- getChart1() {
- this.chart1.listLoading = true
- this.chart1.getdataListParm.parammaps.error = this.error
- let page = 0
- let page_size = 0
- let url = '/api/v1/ops/process/analysis/mixed_sprinkle_detail' + '?page=' + page + '&page_size=' + page_size
- let data = {
- 'pasture_id':this.methodpastureid,
- 'api_name':this.chart1.getdataListParm.name,
- 'start_time':this.chart1.getdataListParm.parammaps.startTime,
- 'end_time':this.chart1.getdataListParm.parammaps.stopTime
- }
- if(this.chart1.getdataListParm.parammaps.pid){
- data.pid = this.chart1.getdataListParm.parammaps.pid
- }
- postJson(url, data).then(response => {
- if (response.data !== null && response.data.list !== null) {
- this.chart1.list = response.data.data
- console.log('监控图', response.data.list)
- this.chart1.chartLine_data = response.data.list
- this.chart1.total = response.data.total
- this.roadChartLine1(this.chart1.chartLine_data)
- } else {
- this.chart1.list = []
- }
- setTimeout(() => {
- this.chart1.listLoading = false
- }, 100)
- })
- },
- roadChartLine1(chartLine_data) {
- console.log(chartLine_data.data5, 'chartLine_data')
- if (this.chartLine != null) {
- this.chartLine.dispose()
- }
- this.chartLine = echarts.init(document.getElementById('chartLine'))
- var option = {
- title: { text: '', subtext: '' },
- color: ['#ff0000', '#5199e5', '#fdb06a', '#fb8b73'], // 关键加上这句话,legend的颜色和折线的自定义颜色就一致了
- legend: [{
- itemWidth: 15, itemHeight: 7, right: '25%', textStyle: { fontSize: 12 },
- data: [{ name: '设计重量' }, { name: '实际重量' }]
- }, {
- itemWidth: 15, itemHeight: 15, right: '0', textStyle: { fontSize: 12 },
- data: [
- { name: '开始重量' },
- { name: '结束重量' }
- ]
- }],
- tooltip: {
- trigger: 'axis',
- formatter: function(params) {
- console.log(params, 'params')
- var tip = params[0].name
- for (let i = 0; i < params.length; i++) {
- if (params[i].seriesName == '设计重量') {
- tip += '<br>' + params[i].seriesName + ':' + params[i].value[1]
- }
- if (params[i].seriesName == '实际重量') {
- tip += '<br>' + params[i].seriesName + ':' + params[i].value[1]
- }
- if (params[i].seriesName == '开始重量') {
- tip += '<br>' + params[i].seriesName + ':' + params[i].value[1]
- }
- if (params[i].seriesName == '结束重量') {
- tip += '<br>' + params[i].seriesName + ':' + params[i].value[1] + '<br>' + params[i].value[2] + params[i].value[3]
- }
- }
- return tip
- }
- },
- calculable: true,
- xAxis: [
- { type: 'category' }
- ],
- yAxis: [{ type: 'value' }],
- toolbox: {
- show: false,
- feature: {
- dataZoom: { realtime: false, yAxisIndex: 'none', },
- restore: {},
- }
- },
- dataZoom: [
- {type: 'inside'}, //用于添加滚轮缩放
- {type:'slider' }, //用于添加滑动条缩放,
- ],
- series: [
- { symbol: 'none', name: '实际重量', type: 'line', data: chartLine_data.data3, itemStyle: { normal: { lineStyle: { color: '#ff0000' }}}},
- { symbol: 'none', name: '设计重量', type: 'line', step: 'middle', data: chartLine_data.data2 },
- { name: '开始重量', symbolSize: 10, type: 'scatter', data: chartLine_data.data4 },
- { name: '结束重量', symbolSize: 10, type: 'scatter', data: chartLine_data.data5 }
- ]
- }
- this.chartLine.setOption(option)
- if (this.chartLine != null ) {
- window.onresize = ()=> {
- this.chartLine.resize()
- }
- }
- },
- rowClick(row, column, event) {
- this.table2.getdataListParm.parammaps.pid = row.pid
- this.table3.getdataListParm.parammaps.pid = row.pid
- this.chart1.getdataListParm.parammaps.pid = row.pid
- this.getList2()
- this.getList3()
- this.getChart1()
- },
- rowStyle({ row, rowIndex }) {
- let stylejson = {};
- if (row.abnormal == 1) {
- stylejson.background = "#fb8072";// 背景颜色
- stylejson.maxHeight = '30px';// 背景颜色
- stylejson.height = '30px';// 背景颜色
- // 也可以修改文字颜色
- return stylejson;
- } else {
- return "";
- }
- },
- }
- }
- </script>
- <style lang="scss" scoped>
- /deep/ .el-table th>.cell{
- padding-left: 0 !important;;
- padding-right: 0 !important;;
- }
- /deep/ .el-table td>.cell{
- padding-left: 0 !important;;
- padding-right: 0 !important;;
- }
- </style>
|