<template>
<div class="app-container">
<!-- <h1>集团</h1> -->
<div class="search">
<el-select v-model="table.getdataListParm.parammaps.pastureid" placeholder="牧场" class="filter-item" style="width: 120px;">
<el-option v-for="item in pastureList" :key="item.pastureid" :label="item.pasturename" :value="item.pastureid" />
</el-select>
<el-date-picker v-model="table.getdataListParm.parammaps.inputDatetime" :clearable="false" class="inputDatetime filter-item" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" style="width: 250px;" :picker-options="pickerOptions" />
<el-select v-model="table.getdataListParm.parammaps.lpplantype" placeholder="计划类型" class="filter-item" style="width: 120px;" clearable>
<el-option v-for="item in planTypeList" :key="item.value" :label="item.lable" :value="item.value" />
</el-select>
<el-input v-model="table.getdataListParm.parammaps.tmrtname" placeholder="TMR名称" style="width: 180px;" class="filter-item" clearable />
<el-select v-model="table.getdataListParm.parammaps.iscompleted" placeholder="工作状态" class="filter-item" style="width: 120px;" clearable>
<el-option v-for="item in workingConditionList" :key="item.id" :label="item.name" :value="item.id" />
</el-select>
<el-button class="successBorder" @click="handleSearch">查询</el-button>
<el-button class="successBorder" @click="handleRefresh">重置</el-button>
</div>
<el-row :gutter="20">
<el-col :span="8">
<h4>TMR设备列表</h4>
<div class="table">
<el-table
:key="table.tableKey"
v-loading="table.listLoading"
element-loading-text="给我一点时间"
:data="table.list"
border
fit
highlight-current-row
style="width: 100%;"
:row-style="rowStyle"
:cell-style="cellStyle"
class="elTable table-fixed"
height="970px"
@row-click="rowClick"
>
<el-table-column label="牧场" min-width="100px" align="center">
<template slot-scope="scope">
<span>{{ scope.row.pastureName }}</span>
</template>
</el-table-column>
<el-table-column label="开始时间" min-width="100px" align="center">
<template slot-scope="scope">
<span>{{ scope.row.intime }}</span>
</template>
</el-table-column>
<el-table-column label="计划类型" min-width="90px" align="center">
<template slot-scope="scope">
<span>{{ scope.row.lpplantype }}</span>
</template>
</el-table-column>
<el-table-column label="描述" min-width="90px" align="center">
<template slot-scope="scope">
<span>{{ scope.row.remark }}</span>
</template>
</el-table-column>
<el-table-column label="TMR名称" min-width="110px" align="center">
<template slot-scope="scope">
<span>{{ scope.row.tmrtname }}</span>
</template>
</el-table-column>
</el-table>
</div>
</el-col>
<!-- 预混计划 -->
<el-col v-if="isPremixedPlan" :span="16">
<h4>过程详情-预混计划</h4>
<div class="detail">
<div class="detail-t">
过程时间：<span v-if="table2.list.length !== 0">{{ table2.list[0].proesstime }}</span>;
工作状态：<span v-if="table2.list.length !== 0">{{ table2.list[0].iscompleted }}</span>
</div>
<div class="detail-b">
<span>混料误差值：<span v-if="table2.list.length !== 0">{{ table2.list[0].Hdif }}kg</span>;</span>
<span>混料准确率：<span v-if="table2.list.length !== 0">{{ table2.list[0].HdifRate }}</span>;</span>
</div>
</div>
<div class="Mixture">
<h4>混料详情</h4>
<el-table
:key="table3.tableKey"
v-loading="table3.listLoading"
element-loading-text="给我一点时间"
:data="table3.list"
border
fit
highlight-current-row
style="width: 100%;"
:row-style="rowStyle"
:cell-style="cellStyle"
class="elTable table-fixed"
height="200px"
>
<el-table-column label="操作编号" min-width="110px" align="center">
<template slot-scope="scope">
<span>{{ scope.row.sort }}</span>
</template>
</el-table-column>
<el-table-column label="饲料名称" min-width="90px" align="center">
<template slot-scope="scope">
<span>{{ scope.row.fname }}</span>
</template>
</el-table-column>
<el-table-column label="计划重量" min-width="110px" align="center">
<template slot-scope="scope">
<span>{{ scope.row.lweight }}</span>
</template>
</el-table-column>
<el-table-column label="实际重量" min-width="110px" align="center">
<template slot-scope="scope">
<span>{{ scope.row.actualweightminus }}</span>
</template>
</el-table-column>
<el-table-column label="误差值" min-width="110px" align="center">
<template slot-scope="scope">
<span>{{ scope.row.diff }}</span>
</template>
</el-table-column>
<el-table-column label="准确率" min-width="90px" align="center">
<template slot-scope="scope">
<span>{{ scope.row.diffRate }}</span>
</template>
</el-table-column>
<el-table-column label="完成时间" min-width="110px" align="center">
<template slot-scope="scope">
<span>{{ scope.row.intime }}</span>
</template>
</el-table-column>
<el-table-column label="过程时间" min-width="110px" align="center">
<template slot-scope="scope">
<span>{{ scope.row.proesstime }}</span>
</template>
</el-table-column>
<el-table-column label="跳转方式" min-width="110px" align="center">
<template slot-scope="scope">
<span>{{ scope.row.buttontype }}</span>
</template>
</el-table-column>
<el-table-column label="开始重量" min-width="110px" align="center">
<template slot-scope="scope">
<span>{{ scope.row.lastactualweight }}</span>
</template>
</el-table-column>
<el-table-column label="结束重量" min-width="110px" align="center">
<template slot-scope="scope">
<span>{{ scope.row.actualweight }}</span>
</template>
</el-table-column>
</el-table>
</div>
</el-col>
<!-- 撒料计划 -->
<el-col v-if="isSpreadingPlan" :span="16">
<h4>过程详情-撒料计划</h4>
<div class="detail">
<div class="detail-t">
过程时间：<span v-if="table2.list.length !== 0">{{ table2.list[0].proesstime }}</span>;
工作状态：<span v-if="table2.list.length !== 0">{{ table2.list[0].iscompleted }}</span>
</div>
<div class="detail-b">
<span>混料误差值：<span v-if="table2.list.length !== 0">{{ table2.list[0].Hdif }}kg</span>;</span>
<span>混料准确率：<span v-if="table2.list.length !== 0">{{ table2.list[0].HdifRate }}</span>;</span>
<span>撒料误差值：<span v-if="table2.list.length !== 0">{{ table2.list[0].Sdif }}kg</span>;</span>
<span>撒料准确率：<span v-if="table2.list.length !== 0">{{ table2.list[0].SdifRate }}</span></span>
</div>
</div>
<div class="Mixture">
<h4>混料详情</h4>
<el-table
:key="table3.tableKey"
v-loading="table3.listLoading"
element-loading-text="给我一点时间"
:data="table3.list"
border
fit
highlight-current-row
style="width: 100%;"
:row-style="rowStyle"
:cell-style="cellStyle"
class="elTable table-fixed"
height="200px"
>
<el-table-column label="操作编号" min-width="110px" align="center">
<template slot-scope="scope">
<span>{{ scope.row.sort }}</span>
</template>
</el-table-column>
<el-table-column label="饲料名称" min-width="90px" align="center">
<template slot-scope="scope">
<span>{{ scope.row.fname }}</span>
</template>
</el-table-column>
<el-table-column label="计划重量" min-width="110px" align="center">
<template slot-scope="scope">
<span>{{ scope.row.lweight }}</span>
</template>
</el-table-column>
<el-table-column label="实际重量" min-width="110px" align="center">
<template slot-scope="scope">
<span>{{ scope.row.actualweightminus }}</span>
</template>
</el-table-column>
<el-table-column label="误差值" min-width="110px" align="center">
<template slot-scope="scope">
<span>{{ scope.row.diff }}</span>
</template>
</el-table-column>
<el-table-column label="准确率" min-width="90px" align="center">
<template slot-scope="scope">
<span>{{ scope.row.diffRate }}</span>
</template>
</el-table-column>
<el-table-column label="完成时间" min-width="110px" align="center">
<template slot-scope="scope">
<span>{{ scope.row.intime }}</span>
</template>
</el-table-column>
<el-table-column label="过程时间" min-width="110px" align="center">
<template slot-scope="scope">
<span>{{ scope.row.proesstime }}</span>
</template>
</el-table-column>
<el-table-column label="跳转方式" min-width="110px" align="center">
<template slot-scope="scope">
<span>{{ scope.row.buttontype }}</span>
</template>
</el-table-column>
<el-table-column label="开始重量" min-width="110px" align="center">
<template slot-scope="scope">
<span>{{ scope.row.lastactualweight }}</span>
</template>
</el-table-column>
<el-table-column label="结束重量" min-width="110px" align="center">
<template slot-scope="scope">
<span>{{ scope.row.actualweight }}</span>
</template>
</el-table-column>
</el-table>
</div>
<div class="SpreadingMaterials">
<h4>撒料详情</h4>
<el-table
:key="table4.tableKey"
v-loading="table4.listLoading"
element-loading-text="给我一点时间"
:data="table4.list"
border
fit
highlight-current-row
style="width: 100%;"
:row-style="rowStyle"
:cell-style="cellStyle"
class="elTable table-fixed"
height="200px"
>
<el-table-column label="操作编号" min-width="110px" align="center">
<template slot-scope="scope">
<span>{{ scope.row.sort }}</span>
</template>
</el-table-column>
<el-table-column label="栏舍名称" min-width="90px" align="center">
<template slot-scope="scope">
<span>{{ scope.row.fname }}</span>
</template>
</el-table-column>
<el-table-column label="计划重量" min-width="110px" align="center">
<template slot-scope="scope">
<span>{{ scope.row.lweight }}</span>
</template>
</el-table-column>
<el-table-column label="实际重量" min-width="110px" align="center">
<template slot-scope="scope">
<span>{{ scope.row.actualweightminus }}</span>
</template>
</el-table-column>
<el-table-column label="误差值" min-width="110px" align="center">
<template slot-scope="scope">
<span>{{ scope.row.diff }}</span>
</template>
</el-table-column>
<el-table-column label="准确率" min-width="90px" align="center">
<template slot-scope="scope">
<span>{{ scope.row.diffRate }}</span>
</template>
</el-table-column>
<el-table-column label="完成时间" min-width="110px" align="center">
<template slot-scope="scope">
<span>{{ scope.row.intime }}</span>
</template>
</el-table-column>
<el-table-column label="过程时间" min-width="110px" align="center">
<template slot-scope="scope">
<span>{{ scope.row.proesstime }}</span>
</template>
</el-table-column>
<el-table-column label="跳转方式" min-width="110px" align="center">
<template slot-scope="scope">
<span>{{ scope.row.buttontype }}</span>
</template>
</el-table-column>
<el-table-column label="开始重量" min-width="110px" align="center">
<template slot-scope="scope">
<span>{{ scope.row.lastactualweight }}</span>
</template>
</el-table-column>
<el-table-column label="结束重量" min-width="110px" align="center">
<template slot-scope="scope">
<span>{{ scope.row.actualweight }}</span>
</template>
</el-table-column>
</el-table>
</div>
<div class="ControlChart">
<h4>监控图</h4>
<div id="chartLine" style="width: 100%;height:300px;" />
</div>
</el-col>
<!-- 剩料计划 -->
<el-col v-if="isResidualMaterialPlan" :span="16">
<h4>过程详情-剩料计划</h4>
<div class="detail">
<div class="detail-t">
过程时间：<span v-if="table2.list.length !== 0">{{ table2.list[0].proesstime }}</span>;
工作状态：<span v-if="table2.list.length !== 0">{{ table2.list[0].iscompleted }}</span>
</div>
<div class="detail-b" />
</div>
<div class="Mixture">
<h4>剩料收集详情</h4>
<el-table
:key="table3.tableKey"
v-loading="table3.listLoading"
element-loading-text="给我一点时间"
:data="table3.list"
border
fit
highlight-current-row
style="width: 100%;"
:row-style="rowStyle"
:cell-style="cellStyle"
class="elTable table-fixed"
height="200px"
>
<el-table-column label="操作编号" min-width="110px" align="center">
<template slot-scope="scope">
<span>{{ scope.row.sort }}</span>
</template>
</el-table-column>
<el-table-column label="栏舍名称" min-width="90px" align="center">
<template slot-scope="scope">
<span>{{ scope.row.fname }}</span>
</template>
</el-table-column>
<el-table-column label="剩料采集重量（kg）" min-width="110px" align="center">
<template slot-scope="scope">
<span>{{ scope.row.sweight }}</span>
</template>
</el-table-column>
</el-table>
</div>
<div class="SpreadingMaterials">
<h4>撒料详情</h4>
<el-table
:key="table4.tableKey"
v-loading="table4.listLoading"
:span-method="objectSpanMethod"
element-loading-text="给我一点时间"
:data="table4.list"
border
fit
highlight-current-row
style="width: 100%;"
:row-style="rowStyle"
:cell-style="cellStyle"
class="elTable table-fixed"
height="200px"
>
<el-table-column label="操作编号" min-width="110px" align="center">
<template slot-scope="scope">
<span>{{ scope.row.sort }}</span>
</template>
</el-table-column>
<el-table-column label="转投栏舍" min-width="90px" align="center">
<template slot-scope="scope">
<span>{{ scope.row.fname }}</span>
</template>
</el-table-column>
<el-table-column label="允许分配剩料量" min-width="110px" align="center">
<template slot-scope="scope">
<span>{{ scope.row.lweight }}</span>
</template>
</el-table-column>
<el-table-column label="实际分配重量（kg）" min-width="110px" align="center">
<template slot-scope="scope">
<span>{{ scope.row.actualweightminus }}</span>
</template>
</el-table-column>
<el-table-column label="废弃剩料重量" min-width="110px" align="center" prop="aweight">
<template slot-scope="scope">
<span>{{ scope.row.aweight }}</span>
</template>
</el-table-column>
</el-table>
</div>
</el-col>
</el-row>
</div>
</template>
<script>
import echarts from 'echarts'
require('echarts/theme/macarons')
import { GetDataByName, GetReportform, GetDataByNames } from '@/api/common'
import Cookies from 'js-cookie'
import { parseTime } from '@/utils/index.js'
export default {
name: 'GroupProcessAnalysis',
data() {
return {
isPremixedPlan: '', // 预混计划
isSpreadingPlan: '', // 撒料计划
isResidualMaterialPlan: '', // 剩料计划
pickerMinDate: '',
pickerOptions: {
onPick: ({ maxDate, minDate }) => {
this.pickerMinDate = minDate.getTime()
if (maxDate) {
this.pickerMinDate = ''
}
},
// 限制不能选择今天之后的日期
disabledDate: (time) => {
if (this.pickerMinDate !== '') {
const one = 31 * 24 * 3600 * 1000
const minTime = this.pickerMinDate - one
let maxTime = this.pickerMinDate + one
if (maxTime > new Date()) {
maxTime = new Date()
}
return time.getTime() < minTime || time.getTime() > maxTime
}
return time.getTime() > Date.now()
}
},
requestParams: [
{ name: 'getPastureListJT', offset: 0, pagecount: 0, parammaps: { pastureid: Cookies.get('pastureid'), pasturename: '' }}
],
pastureList: [], // 牧场
planTypeList: [{ lable: '预混计划', value: '4' }, { lable: '撒料计划', value: '0' }, { lable: '剩料计划', value: '3' }, { lable: '撒料计划-混料', value: '1' }, { lable: '撒料计划-撒料', value: '2' }, { lable: '预称重计划', value: '5' }], // 计划类型
workingConditionList: [{ id: '0', name: '进行中' }, { id: '1', name: '已完成' }], // 工作状态
// TMR设备列表
table: {
getdataListParm: {
name: 'getprocessAnalysis',
page: 1,
offset: 1,
pagecount: '',
returntype: 'Map',
parammaps: {
pastureid: '',
startTime: parseTime(new Date(), '{y}-{m}-{d}'),
stopTime: parseTime(new Date(), '{y}-{m}-{d}'),
// startTime: '2020-09-15',
// stopTime: '2020-09-16',
inputDatetime: [new Date(), new Date()],
iscompleted: '',
tmrtname: '',
lpplantype: ''
}
},
tableKey: 0,
list: [],
total: 0,
listLoading: true
},
// 过程详情
table2: {
getdataListParm: {
name: 'getprocessAnalysisStr',
page: 1,
offset: 1,
pagecount: 1,
returntype: 'Map',
parammaps: {
pastureid: Cookies.get('pastureid'),
id: ''
}
},
tableKey: 0,
list: [],
total: 0,
listLoading: true
},
// 混料详情
table3: {
getdataListParm: {
name: 'getprocessAnalysisHL',
page: 1,
offset: 1,
pagecount: '',
returntype: 'Map',
parammaps: {
pastureid: Cookies.get('pastureid'),
id: ''
}
},
tableKey: 0,
list: [],
total: 0,
listLoading: true
},
// 撒料详情
table4: {
getdataListParm: {
name: 'getprocessAnalysisSL',
page: 1,
offset: 1,
pagecount: '',
returntype: 'Map',
parammaps: {
pastureid: Cookies.get('pastureid'),
id: ''
}
},
tableKey: 0,
list: [],
total: 0,
listLoading: true
},
chart1: {
getdataListParm: {
name: 'getprocessAnalysisTB',
page: 1,
offset: 1,
pagecount: '',
returntype: 'Map',
parammaps: {
pastureid: Cookies.get('pastureid'),
id: ''
}
},
tableKey: 0,
list: [],
total: 0,
listLoading: false,
chartLine_data: []
},
chartLine: null,
chartLine_data: {},
rowStyle: { maxHeight: 50 + 'px', height: 45 + 'px' },
cellStyle: { padding: 0 + 'px' }
}
},
created() {
this.getDownList()
// this.getTimeFn()
},
methods: {
getDownList() {
GetDataByNames(this.requestParams).then(response => {
this.pastureList = response.data.getPastureListJT.list
this.table.getdataListParm.parammaps.pastureid = response.data.getPastureListJT.list[0].pastureid
this.getList()
})
},
// getTimeFn() {
// const that = this
// const start2 = new Date()
// const end2 = new Date()
// start2.setTime(start2.getTime() - 3600 * 1000 * 24 * 1)
// end2.setTime(end2.getTime() - 3600 * 1000 * 24 * 1)
// that.table.getdataListParm.parammaps.inputDatetime[0] = parseTime(start2, '{y}-{m}-{d}')
// that.table.getdataListParm.parammaps.inputDatetime[1] = parseTime(end2, '{y}-{m}-{d}')
// that.table.getdataListParm.parammaps.startTime = parseTime(start2, '{y}-{m}-{d}')
// that.table.getdataListParm.parammaps.stopTime = parseTime(end2, '{y}-{m}-{d}')
// },
// TMR设备列表
getList() {
this.table.listLoading = true
GetDataByName(this.table.getdataListParm).then(response => {
console.log('TMR设备列表table数据', response.data.list)
if (response.data.list !== null) {
this.table.list = response.data.list
if (response.data.list[0].lpplantype == '预混计划') {
this.isPremixedPlan = true
this.isSpreadingPlan = false
this.isResidualMaterialPlan = false
this.table2.getdataListParm.parammaps.id = response.data.list[0].id
this.table3.getdataListParm.parammaps.pid = response.data.list[0].id
this.getList2()
this.getList3()
} else if (response.data.list[0].lpplantype == '剩料计划') {
this.isResidualMaterialPlan = true
this.isPremixedPlan = false
this.isSpreadingPlan = false
this.table2.getdataListParm.name = 'getprocessAnalysisStrSH'
this.table3.getdataListParm.name = 'getprocessAnalysisHLSH'
this.table4.getdataListParm.name = 'getprocessAnalysisSLSH'
this.table2.getdataListParm.parammaps.id = response.data.list[0].id
this.table3.getdataListParm.parammaps.pid = response.data.list[0].id
this.table4.getdataListParm.parammaps.pid = response.data.list[0].id
this.getList2()
this.getList3()
this.getList4()
} else {
// 撒料
this.isSpreadingPlan = true
this.isResidualMaterialPlan = false
this.isPremixedPlan = false
this.table2.getdataListParm.parammaps.id = response.data.list[0].id
this.table3.getdataListParm.parammaps.pid = response.data.list[0].id
this.table4.getdataListParm.parammaps.pid = response.data.list[0].id
this.getList2()
this.getList3()
this.getList4()
this.chart1.getdataListParm.parammaps.pid = response.data.list[0].id
this.getChart1()
}
} else {
this.table.list = []
this.table2.list = []
this.table3.list = []
this.table2.listLoading = false
this.table3.listLoading = false
this.table4.listLoading = false
this.chart1.listLoading = false
}
setTimeout(() => {
this.table.listLoading = false
}, 100)
})
},
handleSearch() {
console.log('点击了查询')
if (this.table.getdataListParm.parammaps.inputDatetime !== '' && this.table.getdataListParm.parammaps.inputDatetime !== null) {
this.table.getdataListParm.parammaps.startTime = parseTime(this.table.getdataListParm.parammaps.inputDatetime[0], '{y}-{m}-{d}')
this.table.getdataListParm.parammaps.stopTime = parseTime(this.table.getdataListParm.parammaps.inputDatetime[1], '{y}-{m}-{d}')
} else {
this.table.getdataListParm.parammaps.inputDatetime = ''
this.table.getdataListParm.parammaps.startTime = ''
this.table.getdataListParm.parammaps.stopTime = ''
}
this.table.getdataListParm.offset = 1
this.getList()
},
handleRefresh() {
console.log('点击了重置')
this.table.getdataListParm.parammaps.tmrtname = ''
this.table.getdataListParm.parammaps.iscompleted = ''
this.table.getdataListParm.parammaps.lpplantype = ''
this.table.getdataListParm.parammaps.startTime = ''
this.table.getdataListParm.parammaps.stopTime = ''
this.table.getdataListParm.parammaps.inputDatetime = ''
this.table.getdataListParm.offset = 1
this.getList()
},
rowClick(row, column, event) {
this.table2.getdataListParm.parammaps.id = row.id
this.table3.getdataListParm.parammaps.pid = row.id
this.table4.getdataListParm.parammaps.pid = row.id
this.chart1.getdataListParm.parammaps.pid = row.id
if (row.lpplantype == '预混计划') {
this.isPremixedPlan = true
this.isResidualMaterialPlan = false
this.isSpreadingPlan = false
this.table2.getdataListParm.name = 'getprocessAnalysisStr'
this.table3.getdataListParm.name = 'getprocessAnalysisHL'
this.getList2()
this.getList3()
} else if (row.lpplantype == '剩料计划') {
this.isResidualMaterialPlan = true
this.isPremixedPlan = false
this.isSpreadingPlan = false
this.table2.getdataListParm.name = 'getprocessAnalysisStrSH'
this.table3.getdataListParm.name = 'getprocessAnalysisHLSH'
this.table4.getdataListParm.name = 'getprocessAnalysisSLSH'
this.getList2()
this.getList3()
this.getList4()
} else {
this.isSpreadingPlan = true
this.isPremixedPlan = false
this.isResidualMaterialPlan = false
this.table2.getdataListParm.name = 'getprocessAnalysisStr'
this.table3.getdataListParm.name = 'getprocessAnalysisHL'
this.table4.getdataListParm.name = 'getprocessAnalysisSL'
this.getList2()
this.getList3()
this.getList4()
this.getChart1()
}
},
// 过程详情
getList2() {
this.table2.listLoading = false
GetDataByName(this.table2.getdataListParm).then(response => {
console.log('过程详情table数据', response.data.list)
if (response.data.list !== null) {
this.table2.list = response.data.list
} else {
this.table2.list = []
}
setTimeout(() => {
this.table2.listLoading = false
}, 100)
})
},
// 混料详情
getList3() {
this.table3.listLoading = false
GetDataByName(this.table3.getdataListParm).then(response => {
console.log('混料详情table数据', response.data.list)
if (response.data.list !== null) {
this.table3.list = response.data.list
} else {
this.table3.list = []
}
setTimeout(() => {
this.table3.listLoading = false
}, 100)
})
},
// 撒料详情
getList4() {
this.table4.listLoading = false
GetDataByName(this.table4.getdataListParm).then(response => {
console.log('撒料详情table数据', response.data.list)
if (response.data.list !== null) {
this.table4.list = response.data.list
this.rowspan()
} else {
this.table4.list = []
}
setTimeout(() => {
this.table4.listLoading = false
}, 100)
})
},
rowspan() {
this.spanArr = []
this.table4.list.forEach((item, index) => {
if (index == 0) {
this.spanArr.push(1)
this.position = 0
} else {
console.log(item, index, '======')
if (this.table4.list[index].aweight == this.table4.list[index - 1].aweight) {
this.spanArr[this.position] += 1
this.spanArr.push(0)
} else {
this.spanArr.push(1)
this.position = index
}
}
})
},
objectSpanMethod({ row, column, rowIndex, columnIndex }) {
if (columnIndex == 4) {
const _row = this.spanArr[rowIndex]
const _col = _row > 0 ? 1 : 0
return {
rowspan: _row,
colspan: _col
}
}
},
getChart1() {
this.chart1.listLoading = true
GetReportform(this.chart1.getdataListParm).then(response => {
if (response.data.list !== null) {
this.chart1.list = response.data.data
console.log('实时监控', response.data.list)
// console.log('实时监控', response.data.list.data4)
var evenNumbers = []// 偶数
var oddNumbers = []// 奇数
for (let i = 0; i < response.data.list.data4.length; i++) {
console.log(response.data.list.data4[i])
if (i == 0) {
oddNumbers.push(response.data.list.data4[i])
} else {
if (i % 2 == 0) {
evenNumbers.push(response.data.list.data4[i])
} else {
oddNumbers.push(response.data.list.data4[i])
}
}
}
response.data.list.data4 = oddNumbers
response.data.list.data5 = evenNumbers
// response.data.list.data1 = ['06:34:10', '06:34:11', '06:34:12', '06:34:13', '06:34:14', '06:34:14', '06:34:15', '06:34:16', '06:34:17', '06:34:18', '06:34:19', '06:34:20', '06:34:21', '06:34:22', '06:34:23', '06:34:29', '06:34:44', '06:34:59', '06:35:14', '06:35:29', '06:35:44', '06:35:59', '06:36:14', '06:36:29', '06:36:44', '06:36:59', '06:37:14', '06:37:28', '06:37:29', '06:37:44', '06:37:59', '06:38:14', '06:38:29', '06:38:44', '06:38:59', '06:38:59', '06:39:14', '06:39:29', '06:39:44', '06:39:59', '06:40:08', '06:40:14', '06:40:29', '06:40:44', '06:40:59', '06:41:14', '06:41:29', '06:41:40', '06:41:44', '06:41:59', '06:42:14', '06:42:29', '06:42:44', '06:42:59', '06:43:09', '06:43:14', '06:43:29', '06:43:44', '06:43:59', '06:44:14', '06:44:29', '06:44:44'],
// response.data.list.data2 = [
// { 'value': '141.6', 'myname': 'A1' },
// { 'value': '141.6', 'myname': 'A1' },
// { 'value': '141.6', 'myname': 'A1' },
// { 'value': '141.6', 'myname': 'A1' },
// { 'value': '141.6', 'myname': 'A1' },
// { 'value': '141.6', 'myname': 'A1' },
// { 'value': '141.6', 'myname': 'A1' },
// { 'value': '141.6', 'myname': 'A1' },
// { 'value': '141.6', 'myname': 'A1' },
// { 'value': '141.6', 'myname': 'A1' },
// { 'value': '141.6', 'myname': 'A1' },
// { 'value': '141.6', 'myname': 'A1' },
// { 'value': '141.6', 'myname': 'A1' },
// { 'value': '141.6', 'myname': 'A1' },
// { 'value': '141.6', 'myname': 'A1' },
// { 'value': '141.6', 'myname': 'A1' },
// { 'value': '141.6', 'myname': 'A1' },
// { 'value': '141.6', 'myname': 'A1' },
// { 'value': '141.6', 'myname': 'A1' },
// { 'value': '141.6', 'myname': 'A1' },
// { 'value': '141.6', 'myname': 'A1' },
// { 'value': '141.6', 'myname': 'A1' },
// { 'value': '141.6', 'myname': 'A1' },
// { 'value': '141.6', 'myname': 'A1' },
// { 'value': '141.6', 'myname': 'A1' },
// { 'value': '141.6', 'myname': 'A1' },
// { 'value': '141.6', 'myname': 'A1' },
// { 'value': '141.6', 'myname': 'A1' },
// { 'value': '341.46', 'myname': 'B1' },
// { 'value': '341.46', 'myname': 'B1' },
// { 'value': '341.46', 'myname': 'B1' },
// { 'value': '341.46', 'myname': 'B1' },
// { 'value': '341.46', 'myname': 'B1' },
// { 'value': '341.46', 'myname': 'B1' },
// { 'value': '341.46', 'myname': 'B1' },
// { 'value': '437.73', 'myname': 'C1' },
// { 'value': '437.73', 'myname': 'C1' },
// { 'value': '437.73', 'myname': 'C1' },
// { 'value': '437.73', 'myname': 'C1' },
// { 'value': '437.73', 'myname': 'C1' },
// { 'value': '437.73', 'myname': 'C1' },
// { 'value': '437.73', 'myname': 'C1' },
// { 'value': '687.33', 'myname': 'C1' },
// { 'value': '687.33', 'myname': 'C1' },
// { 'value': '687.33', 'myname': 'C1' },
// { 'value': '687.33', 'myname': 'C1' },
// { 'value': '687.33', 'myname': 'C1' },
// { 'value': '687.33', 'myname': 'C1' },
// { 'value': '687.33', 'myname': 'C1' },
// { 'value': '959.24', 'myname': 'D1' },
// { 'value': '959.24', 'myname': 'D1' },
// { 'value': '959.24', 'myname': 'D1' },
// { 'value': '959.24', 'myname': 'D1' },
// { 'value': '959.24', 'myname': 'D1' },
// { 'value': '959.24', 'myname': 'D1' },
// { 'value': '959.24', 'myname': 'D1' },
// { 'value': '959.24', 'myname': 'D1' },
// { 'value': '1107.6', 'myname': 'D1' },
// { 'value': '1107.6', 'myname': 'D1' },
// { 'value': '1107.6', 'myname': 'D1' },
// { 'value': '1107.6', 'myname': 'D1' },
// { 'value': '1107.6', 'myname': 'D1' },
// { 'value': '1107.6', 'myname': 'D1' },
// { 'value': '1107.6', 'myname': 'D1' },
// { 'value': '1107.6', 'myname': 'D1' }
// ]
// response.data.list.data3 = [-8, -8, -8, -8, -8, -8, -8, -8, -8, -8, -8, -8, -8, -8, -8, -8, -11, -9, -4, -8, -10, -8, -8, 0, -1, 32, 88, 142, 143, 141, 154, 215, 250, 256, 338, 337, 329, 325, 409, 420, 438, 434, 432, 447, 439, 496, 655, 680, 678, 670, 669, 741, 752, 924],
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) {
if (this.chartLine != null) {
this.chartLine.dispose()
}
this.chartLine = echarts.init(document.getElementById('chartLine'))
var option = {
title: {
text: '',
subtext: ''
},
color: ['#ff3131', '#61a5e8', '#ff3131', '#61a5e8'], // 关键加上这句话，legend的颜色和折线的自定义颜色就一致了
legend: {
data: [
{ name: '设计重量', icon: 'rectangle' },
{ name: '实际重量', icon: 'rectangle' },
// { name: '饲料名称', icon: 'rectangle' },
{ name: '开始重量', icon: 'triangle' },
{ name: '结束重量', icon: 'triangle' }
],
right: '20%',
textStyle: {
fontSize: 12,
color: '#666'
}
},
/* grid:{y:15},*/
tooltip: {
trigger: 'axis'
// formatter: function(params) {
// if (params.length > 0) {
// console.log(params)
// for (let i = 0; i < params.length; i++) {
// if (params.length == 1 && params[0].seriesName == '设计重量') {
// return params[0].name + '<br>' + params[i].seriesName + ':' + params[i].value + '<br>饲料名称:' + params[0].data.myname
// } else if (params.length > 1 && params[1].seriesName == '设计重量') {
// return params[0].name + '<br>' + params[i].seriesName + ':' + params[i].value + '<br>饲料名称:' + params[1].data.myname
// } else {
// return params[0].name + '<br>' + params[i].seriesName + ':' + params[i].value
// }
// }
// }
// }
},
calculable: true,
yAxis: [
{
type: 'value',
name: '重量（kg）',
splitLine: { show: false }, // 去除网格线
axisLabel: {
show: true,
textStyle: {
color: '#666' // 这里用参数代替了
}
}
}
],
xAxis: [
{
type: 'category',
splitLine: { show: false }, // 去除网格线
name: '时间',
data: chartLine_data.data1,
axisLabel: {
show: true,
textStyle: {
color: '#666' // 这里用参数代替了
}
}
}
],
series: [{
symbol: 'none',
name: '实际重量',
type: 'line',
// step: 'end',
data: chartLine_data.data3,
smooth: true,
barWidth: '37',
itemStyle: {
normal: {
lineStyle: { color: '#ff3131' }
}
}
}, {
symbol: 'none',
name: '设计重量',
type: 'line',
barWidth: '37',
data: chartLine_data.data2,
itemStyle: {
normal: {
lineStyle: { color: '#61a5e8' }
}
}
}, {
name: '开始重量',
symbol: 'triangle',
symbolSize: 10,
type: 'scatter',
data: chartLine_data.data4
}, {
name: '结束重量',
symbol: 'triangle',
symbolSize: 10,
type: 'scatter',
data: chartLine_data.data5
}]
}
this.chartLine.setOption(option)
window.onresize = function() {
this.chartLine.resize()
}
}
}
}
</script>
<style lang="scss" scoped>
.search{padding-top:10px;clear: both;}
.table{margin-top:10px;}
.detail{
height:84px;border: 1px solid #EBEEF5;padding-left:10px;font:16px/32px '';color:#333;
.detail-t{margin-top: 10px;}
.detail-b{margin-bottom: 10px;}
}
</style>