<template>
<div class="app-container">
<el-tabs v-model="activeName" @tab-click="handleTabClick">
<el-tab-pane label="汇总统计" name="first">
<div class="search">
<el-date-picker v-model="tab.table.getdataListParm.parammaps.inputDatetime" class="inputDatetime" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" style="width: 250px;" @change="changeDate" />
<span style="margin-left: 10px;">统计类型：</span>
<el-radio v-model="tab.radio" label="1" @change="changeRadio">配方名称</el-radio>
<el-radio v-model="tab.radio" label="2" @change="changeRadio">栏舍名称</el-radio>
<el-radio v-model="tab.radio" label="3" @change="changeRadio">牲畜类别</el-radio>
<el-radio v-model="tab.radio" label="4" @change="changeRadio">车次</el-radio>
<el-input v-model="tab.table.getdataListParm.parammaps.source" style="width: 245px;" placeholder="配方名称" />
<el-button class="successBorder" @click="handleSearch">查询</el-button>
</div>
<div class="table">
<h4>混料</h4>
<el-table
:key="tab.table.tableKey"
v-loading="tab.table.listLoading"
element-loading-text="给我一点时间"
:data="tab.table.list"
border
fit
highlight-current-row
style="width: 100%;"
:row-style="rowStyle"
:cell-style="cellStyle"
class="elTable table-fixed"
>
<el-table-column v-if="tab.isFormulaName" label="配方名称" min-width="110px" align="center" prop="barname" />
<el-table-column v-if="tab.isHouseName" label="栏舍名称" min-width="110px" align="center" prop="barname" />
<el-table-column v-if="tab.isLivestockType" label="牲畜类别" min-width="110px" align="center" prop="barname" />
<el-table-column v-if="tab.isTrainNumber" label="车次" min-width="110px" align="center" prop="barname" />
<el-table-column label="理论重量" min-width="110px" align="center" prop="barname" />
<el-table-column label="实际重量" min-width="110px" align="center" prop="barname" />
<el-table-column label="计划混料操作数" min-width="110px" align="center" prop="barname" />
<el-table-column label="已混料操作数" min-width="110px" align="center" prop="barname" />
<el-table-column label="混料操作率" min-width="110px" align="center" prop="barname" />
<el-table-column label="混料误差值" min-width="110px" align="center" prop="barname" />
<el-table-column label="混料误差率" min-width="110px" align="center" prop="barname" />
<el-table-column label="混料自动跳转次数" min-width="110px" align="center" prop="barname" />
<el-table-column label="混料手动跳转次数" min-width="110px" align="center" prop="barname" />
<el-table-column label="去除取消重量" min-width="110px" align="center" prop="barname" />
<el-table-column label="方差" min-width="110px" align="center" prop="barname" />
</el-table>
<pagination v-show="tab.table.total>=0" :total="tab.table.total" :page.sync="tab.table.getdataListParm.offset" :limit.sync="tab.table.getdataListParm.pagecount" @pagination="getTabList" />
<h4>撒料</h4>
<el-table
:key="tab.table2.tableKey"
v-loading="tab.table2.listLoading"
element-loading-text="给我一点时间"
:data="tab.table2.list"
border
fit
highlight-current-row
style="width: 100%;"
:row-style="rowStyle"
:cell-style="cellStyle"
class="elTable table-fixed"
>
<el-table-column v-if="tab.isFormulaName" label="配方名称" min-width="110px" align="center" prop="barname" />
<el-table-column v-if="tab.isHouseName" label="栏舍名称" min-width="110px" align="center" prop="barname" />
<el-table-column v-if="tab.isLivestockType" label="牲畜类别" min-width="110px" align="center" prop="barname" />
<el-table-column v-if="tab.isTrainNumber" label="车次" min-width="110px" align="center" prop="barname" />
<el-table-column label="理论重量" min-width="110px" align="center" prop="barname" />
<el-table-column label="实际重量" min-width="110px" align="center" prop="barname" />
<el-table-column label="计划撒料操作数" min-width="110px" align="center" prop="barname" />
<el-table-column label="已撒料操作数" min-width="110px" align="center" prop="barname" />
<el-table-column label="撒料操作率" min-width="110px" align="center" prop="barname" />
<el-table-column label="撒料误差值" min-width="110px" align="center" prop="barname" />
<el-table-column label="撒料误差率" min-width="110px" align="center" prop="barname" />
<el-table-column label="撒料自动跳转次数" min-width="110px" align="center" prop="barname" />
<el-table-column label="撒料手动跳转次数" min-width="110px" align="center" prop="barname" />
</el-table>
<pagination v-show="tab.table2.total>=0" :total="tab.table2.total" :page.sync="tab.table2.getdataListParm.offset" :limit.sync="tab.table2.getdataListParm.pagecount" @pagination="getTabList2" />
</div>
<div class="AnalysisChart">
<el-row :gutter="10">
<!-- 配方准确率 -->
<el-col :span="12" style="position: relative;">
<h4 style="text-align:center;">配方准确率</h4>
<div>
<el-select v-model="tab.chart1.getdataListParm.parammaps.enable" style="width: 150px;margin-right: 5px;" multiple collapse-tags placeholder="请选择统计参数">
<el-option v-for="item in tab.chart1.statisticsList" :key="item.id" :label="item.name" :value="item.id" />
</el-select>
<el-date-picker v-model="tab.chart1.getdataListParm.parammaps.inputDatetime" style="width: 250px;" class="inputDatetime" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" />
<el-button type="text" style="float: right;margin-right: 5px;" @click="handleExport('chart1')">导出</el-button>
<el-button type="text" style="float: right;margin-right: 5px;" @click="handleTable('chart1')">切换表格</el-button>
</div>
<div id="chartLine1" style="width:100%;height:400px;" />
<div v-if="tab.chart1.isTable" class="table" style="width: 100%;position: absolute;top:19px;right: 0;">
<el-button type="text" style="float: right;margin-right: 5px;" @click="handleExport('chart1')">导出</el-button>
<el-button type="text" style="float: right;margin-right: 5px;" @click="handleChart('chart1')">切换图表</el-button>
<el-table
:key="tab.chart1.table.tableKey"
v-loading="tab.chart1.table.listLoading"
element-loading-text="给我一点时间"
:data="tab.chart1.table.list"
border
fit
highlight-current-row
style="width: 100%;"
height="430"
:row-style="rowStyle"
:cell-style="cellStyle"
class="elTable table-fixed"
>
<el-table-column label="日期" min-width="110px" align="center" prop="barname" />
<el-table-column label="配方名称" min-width="110px" align="center" prop="barname" />
<el-table-column label="计划重量（kg）" min-width="110px" align="center" prop="barname" />
<el-table-column label="实际重量（kg）" min-width="110px" align="center" prop="barname" />
<el-table-column label="准确率" min-width="110px" align="center" prop="barname" />
</el-table>
</div>
</el-col>
<!-- 计划统计 -->
<el-col :span="12" style="position: relative;">
<h4 style="text-align:center;">计划统计</h4>
<div>
<el-date-picker v-model="tab.chart2.getdataListParm.parammaps.inputDatetime" style="width: 250px;" class="inputDatetime" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" />
<el-button type="text" style="float: right;margin-right: 5px;" @click="handleExport('chart2')">导出</el-button>
<el-button type="text" style="float: right;margin-right: 5px;" @click="handleTable('chart2')">切换表格</el-button>
</div>
<div id="chartLine2" style="width:100%;height:400px;" />
<div v-if="tab.chart2.isTable" class="table" style="width: 100%;position: absolute;top:19px;right: 0;">
<el-button type="text" style="float: right;margin-right: 5px;" @click="handleExport('chart2')">导出</el-button>
<el-button type="text" style="float: right;margin-right: 5px;" @click="handleChart('chart2')">切换图表</el-button>
<el-table
:key="tab.chart2.table.tableKey"
v-loading="tab.chart2.table.listLoading"
element-loading-text="给我一点时间"
:data="tab.chart2.table.list"
border
fit
highlight-current-row
style="width: 100%;"
height="430"
:row-style="rowStyle"
:cell-style="cellStyle"
class="elTable table-fixed"
>
<el-table-column label="日期" min-width="110px" align="center" prop="barname" />
<el-table-column label="计划执行重量（kg）" min-width="110px" align="center" prop="barname" />
<el-table-column label="配方理论重量（kg）" min-width="110px" align="center" prop="barname" />
<el-table-column label="计划准确率" min-width="110px" align="center" prop="barname" />
<el-table-column label="计划取消重量（kg）" min-width="110px" align="center" prop="barname" />
<el-table-column label="计划准确率（去除取消重量）" min-width="110px" align="center" prop="barname" />
<el-table-column label="计划正确数" min-width="110px" align="center" prop="barname" />
<el-table-column label="计划数" min-width="110px" align="center" prop="barname" />
<el-table-column label="计划正确率" min-width="110px" align="center" prop="barname" />
</el-table>
</div>
</el-col>
</el-row>
<el-row :gutter="10">
<!-- 牛群准确率 -->
<el-col :span="12" style="position: relative;">
<h4 style="text-align:center;">牛群准确率</h4>
<div>
<el-select v-model="tab.chart3.getdataListParm.parammaps.enable" style="width: 150px;margin-right: 5px;" multiple collapse-tags placeholder="请选择统计参数">
<el-option v-for="item in tab.chart3.statisticsList" :key="item.id" :label="item.name" :value="item.id" />
</el-select>
<el-date-picker v-model="tab.chart3.getdataListParm.parammaps.inputDatetime" style="width: 250px;" class="inputDatetime" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" />
<el-button type="text" style="float: right;margin-right: 5px;" @click="handleExport('chart3')">导出</el-button>
<el-button type="text" style="float: right;margin-right: 5px;" @click="handleTable('chart3')">切换表格</el-button>
</div>
<div id="chartLine3" style="width:100%;height:400px;" />
<div v-if="tab.chart3.isTable" class="table" style="width: 100%;position: absolute;top:19px;right: 0;">
<el-button type="text" style="float: right;margin-right: 5px;" @click="handleExport('chart3')">导出</el-button>
<el-button type="text" style="float: right;margin-right: 5px;" @click="handleChart('chart3')">切换图表</el-button>
<el-table
:key="tab.chart3.table.tableKey"
v-loading="tab.chart3.table.listLoading"
element-loading-text="给我一点时间"
:data="tab.chart3.table.list"
border
fit
highlight-current-row
style="width: 100%;"
height="430"
:row-style="rowStyle"
:cell-style="cellStyle"
class="elTable table-fixed"
>
<el-table-column label="日期" min-width="110px" align="center" prop="barname" />
<el-table-column label="牲畜类别" min-width="110px" align="center" prop="barname" />
<el-table-column label="计划重量（kg）" min-width="110px" align="center" prop="barname" />
<el-table-column label="实际重量（kg）" min-width="110px" align="center" prop="barname" />
<el-table-column label="准确率" min-width="110px" align="center" prop="barname" />
</el-table>
</div>
</el-col>
<!-- 车辆准确率（重量） -->
<el-col :span="12" style="position: relative;">
<h4 style="text-align:center;">车辆准确率（重量）</h4>
<div>
<el-select v-model="tab.chart4.getdataListParm.parammaps.enable" style="width: 150px;margin-right: 5px;" multiple collapse-tags placeholder="请选择统计参数">
<el-option v-for="item in tab.chart4.statisticsList" :key="item.id" :label="item.name" :value="item.id" />
</el-select>
<el-date-picker v-model="tab.chart4.getdataListParm.parammaps.inputDatetime" style="width: 250px;" class="inputDatetime" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" />
<el-button type="text" style="float: right;margin-right: 5px;" @click="handleExport('chart4')">导出</el-button>
<el-button type="text" style="float: right;margin-right: 5px;" @click="handleTable('chart4')">切换表格</el-button>
</div>
<div id="chartLine4" style="width:100%;height:400px;" />
<div v-if="tab.chart4.isTable" class="table" style="width: 100%;position: absolute;top:19px;right: 0;">
<el-button type="text" style="float: right;margin-right: 5px;" @click="handleExport('chart4')">导出</el-button>
<el-button type="text" style="float: right;margin-right: 5px;" @click="handleChart('chart4')">切换图表</el-button>
<el-table
:key="tab.chart4.table.tableKey"
v-loading="tab.chart4.table.listLoading"
element-loading-text="给我一点时间"
:data="tab.chart4.table.list"
border
fit
highlight-current-row
style="width: 100%;"
height="430"
:row-style="rowStyle"
:cell-style="cellStyle"
class="elTable table-fixed"
>
<el-table-column label="日期" min-width="110px" align="center" prop="barname" />
<el-table-column label="车次" min-width="110px" align="center" prop="barname" />
<el-table-column label="计划重量（kg）" min-width="110px" align="center" prop="barname" />
<el-table-column label="实际重量（kg）" min-width="110px" align="center" prop="barname" />
<el-table-column label="准确率" min-width="110px" align="center" prop="barname" />
</el-table>
</div>
</el-col>
</el-row>
<el-row :gutter="10">
<!-- 混料统计 -->
<el-col :span="12" style="position: relative;">
<h4 style="text-align:center;">混料统计</h4>
<div>
<el-date-picker v-model="tab.chart5.getdataListParm.parammaps.inputDatetime" style="width: 250px;" class="inputDatetime" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" />
<el-button type="text" style="float: right;margin-right: 5px;" @click="handleExport('chart5')">导出</el-button>
<el-button type="text" style="float: right;margin-right: 5px;" @click="handleTable('chart5')">切换表格</el-button>
</div>
<div id="chartLine5" style="width:100%;height:400px;" />
<div v-if="tab.chart5.isTable" class="table" style="width: 100%;position: absolute;top:19px;right: 0;">
<el-button type="text" style="float: right;margin-right: 5px;" @click="handleExport('chart5')">导出</el-button>
<el-button type="text" style="float: right;margin-right: 5px;" @click="handleChart('chart5')">切换图表</el-button>
<el-table
:key="tab.chart5.table.tableKey"
v-loading="tab.chart5.table.listLoading"
element-loading-text="给我一点时间"
:data="tab.chart5.table.list"
border
fit
highlight-current-row
style="width: 100%;"
height="430"
:row-style="rowStyle"
:cell-style="cellStyle"
class="elTable table-fixed"
>
<el-table-column label="日期" min-width="110px" align="center" prop="barname" />
<el-table-column label="自动跳转次数" min-width="110px" align="center" prop="barname" />
<el-table-column label="手动跳转次数" min-width="110px" align="center" prop="barname" />
<el-table-column label="自动跳转理论重量" min-width="110px" align="center" prop="barname" />
<el-table-column label="自动跳转实际重量" min-width="110px" align="center" prop="barname" />
<el-table-column label="自动跳转准确率" min-width="110px" align="center" prop="barname" />
<el-table-column label="手动跳转理论重量" min-width="110px" align="center" prop="barname" />
<el-table-column label="手动跳转实际重量" min-width="110px" align="center" prop="barname" />
<el-table-column label="手动跳转准确率" min-width="110px" align="center" prop="barname" />
</el-table>
</div>
</el-col>
<!-- 混料计划取消次数 -->
<el-col :span="12" style="position: relative;">
<h4 style="text-align:center;">混料计划取消次数</h4>
<div>
<el-date-picker v-model="tab.chart6.getdataListParm.parammaps.inputDatetime" style="width: 250px;" class="inputDatetime" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" />
<el-button type="text" style="float: right;margin-right: 5px;" @click="handleExport('chart6')">导出</el-button>
<el-button type="text" style="float: right;margin-right: 5px;" @click="handleTable('chart6')">切换表格</el-button>
</div>
<div id="chartLine6" style="width:100%;height:400px;" />
<div v-if="tab.chart6.isTable" class="table" style="width: 100%;position: absolute;top:19px;right: 0;">
<el-button type="text" style="float: right;margin-right: 5px;" @click="handleExport('chart6')">导出</el-button>
<el-button type="text" style="float: right;margin-right: 5px;" @click="handleChart('chart6')">切换图表</el-button>
<el-table
:key="tab.chart6.table.tableKey"
v-loading="tab.chart6.table.listLoading"
element-loading-text="给我一点时间"
:data="tab.chart6.table.list"
border
fit
highlight-current-row
style="width: 100%;"
height="430"
:row-style="rowStyle"
:cell-style="cellStyle"
class="elTable table-fixed"
>
<el-table-column label="日期" min-width="110px" align="center" prop="barname" />
<el-table-column label="混料计划取消次数" min-width="110px" align="center" prop="barname" />
</el-table>
</div>
</el-col>
</el-row>
<el-row :gutter="10">
<!-- 栏舍撒料时间统计 -->
<el-col :span="12" style="position: relative;">
<h4 style="text-align:center;">栏舍撒料时间统计</h4>
<div>
<el-select v-model="tab.chart7.getdataListParm.parammaps.enable" style="width: 150px;margin-right: 5px;" multiple collapse-tags placeholder="请选择统计参数">
<el-option v-for="item in tab.chart7.statisticsList" :key="item.id" :label="item.name" :value="item.id" />
</el-select>
<el-date-picker v-model="tab.chart7.getdataListParm.parammaps.inputDatetime" style="width: 250px;" class="inputDatetime" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" />
<el-button type="text" style="float: right;margin-right: 5px;" @click="handleExport('chart7')">导出</el-button>
<el-button type="text" style="float: right;margin-right: 5px;" @click="handleTable('chart7')">切换表格</el-button>
</div>
<div id="chartLine7" style="width:100%;height:400px;" />
<div v-if="tab.chart7.isTable" class="table" style="width: 100%;position: absolute;top:19px;right: 0;">
<el-button type="text" style="float: right;margin-right: 5px;" @click="handleExport('chart7')">导出</el-button>
<el-button type="text" style="float: right;margin-right: 5px;" @click="handleChart('chart7')">切换图表</el-button>
<el-table
:key="tab.chart7.table.tableKey"
v-loading="tab.chart7.table.listLoading"
element-loading-text="给我一点时间"
:data="tab.chart7.table.list"
border
fit
highlight-current-row
style="width: 100%;"
height="430"
:row-style="rowStyle"
:cell-style="cellStyle"
class="elTable table-fixed"
>
<el-table-column label="日期" min-width="110px" align="center" prop="barname" />
<el-table-column label="栏舍01（撒料时间）" min-width="110px" align="center" prop="barname" />
<el-table-column label="栏舍02（撒料时间）" min-width="110px" align="center" prop="barname" />
<el-table-column label="栏舍03（撒料时间）" min-width="110px" align="center" prop="barname" />
<el-table-column label="栏舍04（撒料时间）" min-width="110px" align="center" prop="barname" />
</el-table>
</div>
</el-col>
</el-row>
</div>
</el-tab-pane>
<el-tab-pane label="混料统计" name="second">
<div class="search">
<el-date-picker v-model="tab2.table.getdataListParm.parammaps.inputDatetime" style="float: left;margin-right: 10px;margin-bottom:10px;width: 250px;" class="inputDatetime" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" />
<el-input v-model="tab2.table.getdataListParm.parammaps.fname" style="float: left;margin-right: 10px;margin-bottom:10px;width: 130px;" placeholder="TMR名称" class="filter-item" clearable />
<el-input v-model="tab2.table.getdataListParm.parammaps.fname" style="float: left;margin-right: 10px;margin-bottom:10px;width: 130px;" placeholder="驾驶员车次" class="filter-item" clearable />
<el-select v-model="tab2.table.getdataListParm.parammaps.fclassid" style="float: left;margin-right: 10px;margin-bottom:10px;width: 150px;" filterable placeholder="班次" class="filter-item" clearable>
<el-option v-for="item in tab2.frequencyList" :key="item.id" :label="item.name" :value="item.id" />
</el-select>
<el-select v-model="tab2.table.getdataListParm.parammaps.source" style="float: left;margin-right: 10px;margin-bottom:10px;" filterable placeholder="跳转方式" class="filter-item" clearable>
<el-option v-for="item in tab2.jumpModeList" :key="item.id" :label="item.name" :value="item.id" />
</el-select>
<el-button class="successBorder" style="float: left;margin-right: 10px;margin-bottom:10px;" @click="handleSearch2">查询</el-button>
<el-button class="successBorder" style="float: left;margin-right: 10px;margin-bottom:10px;" @click="handleRefresh2">重置</el-button>
<el-button class="export" style="float: right;margin-right: 10px;margin-bottom:10px;" @click="handleExport2">导出</el-button>
</div>
<div class="table">
<el-table
:key="tab2.table.tableKey"
v-loading="tab2.table.listLoading"
element-loading-text="给我一点时间"
:data="tab2.table.list"
border
fit
highlight-current-row
style="width: 100%;"
:row-style="rowStyle"
:cell-style="cellStyle"
class="elTable table-fixed"
>
<el-table-column label="日期" min-width="130px" align="center">
<template slot-scope="scope">
<span>{{ scope.row.fname }}</span>
</template>
</el-table-column>
<el-table-column label="TMR名称" min-width="130px" align="center">
<template slot-scope="scope">
<span>{{ scope.row.fclass }}</span>
</template>
</el-table-column>
<el-table-column label="车次" min-width="110px" align="center">
<template slot-scope="scope">
<span>{{ scope.row.feedcode }}</span>
</template>
</el-table-column>
<el-table-column label="班次" min-width="110px" align="center">
<template slot-scope="scope">
<span>{{ scope.row.source }}</span>
</template>
</el-table-column>
<el-table-column label="配方名称" min-width="110px" align="center">
<template slot-scope="scope">
<span>{{ scope.row.printgroup }}</span>
</template>
</el-table-column>
<el-table-column label="饲料" min-width="110px" align="center">
<template slot-scope="scope">
<span>{{ scope.row.allowratio }}</span>
</template>
</el-table-column>
<el-table-column label="理论重量" min-width="110px" align="center">
<template slot-scope="scope">
<span>{{ scope.row.unitweight }}</span>
</template>
</el-table-column>
<el-table-column label="实际重量" min-width="110px" align="center">
<template slot-scope="scope">
<span>{{ scope.row.uprice }}</span>
</template>
</el-table-column>
<el-table-column label="误差值" min-width="110px" align="center">
<template slot-scope="scope">
<span>{{ scope.row.autozone }}</span>
</template>
</el-table-column>
<el-table-column label="误差率" min-width="110px" align="center">
<template slot-scope="scope">
<span>{{ scope.row.autosecondname }}</span>
</template>
</el-table-column>
<el-table-column label="计划时间" min-width="110px" align="center">
<template slot-scope="scope">
<span>{{ scope.row.confirmstartname }}</span>
</template>
</el-table-column>
<el-table-column label="开始时间" min-width="110px" align="center">
<template slot-scope="scope">
<span>{{ scope.row.trgaddress }}</span>
</template>
</el-table-column>
<el-table-column label="结束时间" min-width="110px" align="center">
<template slot-scope="scope">
<span>{{ scope.row.backup1 }}</span>
</template>
</el-table-column>
<el-table-column label="跳转方式" min-width="110px" align="center">
<template slot-scope="scope">
<span>{{ scope.row.backup2 }}</span>
</template>
</el-table-column>
<el-table-column label="开始重量" min-width="110px" align="center">
<template slot-scope="scope">
<span>{{ scope.row.backup3 }}</span>
</template>
</el-table-column>
<el-table-column label="结束重量" min-width="110px" align="center">
<template slot-scope="scope">
<span>{{ scope.row.backup3 }}</span>
</template>
</el-table-column>
</el-table>
<pagination v-show="tab2.table.total>=0" :total="tab2.table.total" :page.sync="tab2.table.getdataListParm.offset" :limit.sync="tab2.table.getdataListParm.pagecount" @pagination="getTab2List" />
</div>
</el-tab-pane>
<el-tab-pane label="撒料统计" name="third">
<div class="search">
<el-date-picker v-model="tab3.table.getdataListParm.parammaps.inputDatetime" style="float: left;margin-right: 10px;margin-bottom:10px;width: 250px;" class="inputDatetime" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" />
<el-input v-model="tab3.table.getdataListParm.parammaps.fname" style="float: left;margin-right: 10px;margin-bottom:10px;width: 130px;" placeholder="TMR名称" class="filter-item" clearable />
<el-input v-model="tab3.table.getdataListParm.parammaps.fname" style="float: left;margin-right: 10px;margin-bottom:10px;width: 130px;" placeholder="驾驶员车次" class="filter-item" clearable />
<el-select v-model="tab3.table.getdataListParm.parammaps.fclassid" style="float: left;margin-right: 10px;margin-bottom:10px;width: 150px;" filterable placeholder="班次" class="filter-item" clearable>
<el-option v-for="item in tab3.frequencyList" :key="item.id" :label="item.name" :value="item.id" />
</el-select>
<el-input v-model="tab3.table.getdataListParm.parammaps.fname" style="float: left;margin-right: 10px;margin-bottom:10px;width: 130px;" placeholder="配方名称" class="filter-item" clearable />
<el-input v-model="tab3.table.getdataListParm.parammaps.fname" style="float: left;margin-right: 10px;margin-bottom:10px;width: 130px;" placeholder="栏舍名称" class="filter-item" clearable />
<el-select v-model="tab3.table.getdataListParm.parammaps.source" style="float: left;margin-right: 10px;margin-bottom:10px;" filterable placeholder="跳转方式" class="filter-item" clearable>
<el-option v-for="item in tab3.jumpModeList" :key="item.id" :label="item.name" :value="item.id" />
</el-select>
<el-button class="successBorder" style="float: left;margin-right: 10px;margin-bottom:10px;" @click="handleSearch3">查询</el-button>
<el-button class="successBorder" style="float: left;margin-right: 10px;margin-bottom:10px;" @click="handleRefresh3">重置</el-button>
<el-button class="export" style="float: right;margin-right: 10px;margin-bottom:10px;" @click="handleExport3">导出</el-button>
</div>
<div class="table">
<el-table
:key="tab3.table.tableKey"
v-loading="tab3.table.listLoading"
element-loading-text="给我一点时间"
:data="tab3.table.list"
border
fit
highlight-current-row
style="width: 100%;"
:row-style="rowStyle"
:cell-style="cellStyle"
class="elTable table-fixed"
>
<el-table-column label="日期" min-width="130px" align="center">
<template slot-scope="scope">
<span>{{ scope.row.fname }}</span>
</template>
</el-table-column>
<el-table-column label="TMR名称" min-width="130px" align="center">
<template slot-scope="scope">
<span>{{ scope.row.fclass }}</span>
</template>
</el-table-column>
<el-table-column label="车次" min-width="110px" align="center">
<template slot-scope="scope">
<span>{{ scope.row.feedcode }}</span>
</template>
</el-table-column>
<el-table-column label="班次" min-width="110px" align="center">
<template slot-scope="scope">
<span>{{ scope.row.source }}</span>
</template>
</el-table-column>
<el-table-column label="配方名称" min-width="110px" align="center">
<template slot-scope="scope">
<span>{{ scope.row.printgroup }}</span>
</template>
</el-table-column>
<el-table-column label="栏舍" min-width="110px" align="center">
<template slot-scope="scope">
<span>{{ scope.row.allowratio }}</span>
</template>
</el-table-column>
<el-table-column label="理论重量" min-width="110px" align="center">
<template slot-scope="scope">
<span>{{ scope.row.unitweight }}</span>
</template>
</el-table-column>
<el-table-column label="实际重量" min-width="110px" align="center">
<template slot-scope="scope">
<span>{{ scope.row.uprice }}</span>
</template>
</el-table-column>
<el-table-column label="误差值" min-width="110px" align="center">
<template slot-scope="scope">
<span>{{ scope.row.autozone }}</span>
</template>
</el-table-column>
<el-table-column label="误差率" min-width="110px" align="center">
<template slot-scope="scope">
<span>{{ scope.row.autosecondname }}</span>
</template>
</el-table-column>
<el-table-column label="开始时间" min-width="110px" align="center">
<template slot-scope="scope">
<span>{{ scope.row.trgaddress }}</span>
</template>
</el-table-column>
<el-table-column label="结束时间" min-width="110px" align="center">
<template slot-scope="scope">
<span>{{ scope.row.backup1 }}</span>
</template>
</el-table-column>
<el-table-column label="跳转方式" min-width="110px" align="center">
<template slot-scope="scope">
<span>{{ scope.row.backup2 }}</span>
</template>
</el-table-column>
<el-table-column label="开始重量" min-width="110px" align="center">
<template slot-scope="scope">
<span>{{ scope.row.backup3 }}</span>
</template>
</el-table-column>
<el-table-column label="结束重量" min-width="110px" align="center">
<template slot-scope="scope">
<span>{{ scope.row.backup3 }}</span>
</template>
</el-table-column>
</el-table>
<pagination v-show="tab3.table.total>=0" :total="tab3.table.total" :page.sync="tab3.table.getdataListParm.offset" :limit.sync="tab3.table.getdataListParm.pagecount" @pagination="getTab3List" />
</div>
</el-tab-pane>
</el-tabs>
</div>
</template>
<script>
import echarts from 'echarts'
require('echarts/theme/macarons')
import { GetDataByName } from '@/api/common'
import Cookies from 'js-cookie'
import { parseTime } from '@/utils/index.js'
import Pagination from '@/components/Pagination'
export default {
name: 'ErrorAnalysis',
components: { Pagination },
data() {
return {
activeName: 'first',
tab: {
radio: '1',
isFormulaName: true, // 配方名称
isHouseName: false, // 栏舍名称
isLivestockType: false, // 牲畜类别
isTrainNumber: false, // 车次
table: {
getdataListParm: {
name: 'getBarmilkList',
page: 1,
offset: 1,
pagecount: 10,
returntype: 'Map',
parammaps: {
pastureid: Cookies.get('pastureid'),
startTime: '',
stopTime: '',
inputDatetime: ''
}
},
tableKey: 1,
list: [],
total: 0,
listLoading: true,
temp: {}
},
table2: {
getdataListParm: {
name: 'getBarmilkList',
page: 1,
offset: 1,
pagecount: 10,
returntype: 'Map',
parammaps: {
pastureid: Cookies.get('pastureid'),
startTime: '',
stopTime: '',
inputDatetime: ''
}
},
tableKey: 2,
list: [],
total: 0,
listLoading: true,
temp: {}
},
chart1: {
chartLine: null,
chartLine_data: {},
getdataListParm: {
name: 'getBarmilkList',
page: 1,
offset: 1,
pagecount: 10,
returntype: 'Map',
parammaps: {
pastureid: Cookies.get('pastureid'),
enable: ''
}
},
tableKey: 1,
list: [],
total: 0,
listLoading: true,
statisticsList: [{ id: '0', name: '配方01' }, { id: '1', name: '配方02' }, { id: '2', name: '配方03' }],
isChart: true,
isTable: false,
table: {
getdataListParm: {
name: 'getBarmilkList',
page: 1,
offset: 1,
pagecount: 10,
returntype: 'Map',
parammaps: {
pastureid: Cookies.get('pastureid'),
enable: ''
}
},
tableKey: 1,
list: [],
total: 0,
listLoading: true
}
},
chart2: {
chartLine: null,
chartLine_data: {},
getdataListParm: {
name: 'getBarmilkList',
page: 1,
offset: 1,
pagecount: 10,
returntype: 'Map',
parammaps: {
pastureid: Cookies.get('pastureid'),
enable: ''
}
},
tableKey: 1,
list: [],
total: 0,
listLoading: true,
isChart: true,
isTable: false,
table: {
getdataListParm: {
name: 'getBarmilkList',
page: 1,
offset: 1,
pagecount: 10,
returntype: 'Map',
parammaps: {
pastureid: Cookies.get('pastureid'),
enable: ''
}
},
tableKey: 1,
list: [],
total: 0,
listLoading: true
}
},
chart3: {
chartLine: null,
chartLine_data: {},
getdataListParm: {
name: 'getBarmilkList',
page: 1,
offset: 1,
pagecount: 10,
returntype: 'Map',
parammaps: {
pastureid: Cookies.get('pastureid'),
enable: ''
}
},
tableKey: 1,
list: [],
total: 0,
listLoading: true,
statisticsList: [{ id: '0', name: '配方01' }, { id: '1', name: '配方02' }, { id: '2', name: '配方03' }],
isChart: true,
isTable: false,
table: {
getdataListParm: {
name: 'getBarmilkList',
page: 1,
offset: 1,
pagecount: 10,
returntype: 'Map',
parammaps: {
pastureid: Cookies.get('pastureid'),
enable: ''
}
},
tableKey: 1,
list: [],
total: 0,
listLoading: true
}
},
chart4: {
chartLine: null,
chartLine_data: {},
getdataListParm: {
name: 'getBarmilkList',
page: 1,
offset: 1,
pagecount: 10,
returntype: 'Map',
parammaps: {
pastureid: Cookies.get('pastureid'),
enable: ''
}
},
tableKey: 1,
list: [],
total: 0,
listLoading: true,
statisticsList: [{ id: '0', name: '配方01' }, { id: '1', name: '配方02' }, { id: '2', name: '配方03' }],
isChart: true,
isTable: false,
table: {
getdataListParm: {
name: 'getBarmilkList',
page: 1,
offset: 1,
pagecount: 10,
returntype: 'Map',
parammaps: {
pastureid: Cookies.get('pastureid'),
enable: ''
}
},
tableKey: 1,
list: [],
total: 0,
listLoading: true
}
},
chart5: {
chartLine: null,
chartLine_data: {},
getdataListParm: {
name: 'getBarmilkList',
page: 1,
offset: 1,
pagecount: 10,
returntype: 'Map',
parammaps: {
pastureid: Cookies.get('pastureid'),
enable: ''
}
},
tableKey: 1,
list: [],
total: 0,
listLoading: true,
isChart: true,
isTable: false,
table: {
getdataListParm: {
name: 'getBarmilkList',
page: 1,
offset: 1,
pagecount: 10,
returntype: 'Map',
parammaps: {
pastureid: Cookies.get('pastureid'),
enable: ''
}
},
tableKey: 1,
list: [],
total: 0,
listLoading: true
}
},
chart6: {
chartLine: null,
chartLine_data: {},
getdataListParm: {
name: 'getBarmilkList',
page: 1,
offset: 1,
pagecount: 10,
returntype: 'Map',
parammaps: {
pastureid: Cookies.get('pastureid'),
enable: ''
}
},
tableKey: 1,
list: [],
total: 0,
listLoading: true,
isChart: true,
isTable: false,
table: {
getdataListParm: {
name: 'getBarmilkList',
page: 1,
offset: 1,
pagecount: 10,
returntype: 'Map',
parammaps: {
pastureid: Cookies.get('pastureid'),
enable: ''
}
},
tableKey: 1,
list: [],
total: 0,
listLoading: true
}
},
chart7: {
chartLine: null,
chartLine_data: {},
getdataListParm: {
name: 'getBarmilkList',
page: 1,
offset: 1,
pagecount: 10,
returntype: 'Map',
parammaps: {
pastureid: Cookies.get('pastureid'),
enable: ''
}
},
tableKey: 1,
list: [],
total: 0,
listLoading: true,
statisticsList: [{ id: '0', name: '配方01' }, { id: '1', name: '配方02' }, { id: '2', name: '配方03' }],
isChart: true,
isTable: false,
table: {
getdataListParm: {
name: 'getBarmilkList',
page: 1,
offset: 1,
pagecount: 10,
returntype: 'Map',
parammaps: {
pastureid: Cookies.get('pastureid'),
enable: ''
}
},
tableKey: 1,
list: [],
total: 0,
listLoading: true
}
}
},
tab2: {
table: {
getdataListParm: {
name: 'getBarmilkList',
page: 1,
offset: 1,
pagecount: 10,
returntype: 'Map',
parammaps: {
pastureid: Cookies.get('pastureid'),
startTime: '',
stopTime: '',
inputDatetime: ''
}
},
tableKey: 1,
list: [],
total: 0,
listLoading: true,
temp: {}
},
frequencyList: [{ id: '0', name: '第一班' }, { id: '1', name: '第二班' }, { id: '2', name: '第三班' }],
jumpModeList: [{ id: '0', name: '手动跳转' }, { id: '1', name: '自动跳转' }]
},
tab3: {
table: {
getdataListParm: {
name: 'getBarmilkList',
page: 1,
offset: 1,
pagecount: 10,
returntype: 'Map',
parammaps: {
pastureid: Cookies.get('pastureid'),
startTime: '',
stopTime: '',
inputDatetime: ''
}
},
tableKey: 1,
list: [],
total: 0,
listLoading: true,
temp: {}
},
frequencyList: [{ id: '0', name: '第一班' }, { id: '1', name: '第二班' }, { id: '2', name: '第三班' }],
jumpModeList: [{ id: '0', name: '手动跳转' }, { id: '1', name: '自动跳转' }]
},
rowStyle: { maxHeight: 50 + 'px', height: 45 + 'px' },
cellStyle: { padding: 0 + 'px' }
}
},
created() {
this.getTabList()
this.getTabList2()
this.getChart1()
this.getChart2()
this.getChart3()
this.getChart4()
this.getChart5()
this.getChart6()
this.getChart7()
},
mounted() {
},
methods: {
handleTabClick() {
if (this.activeName == 'first') {
this.getTabList()
this.getTabList2()
this.getChart1()
this.getChart2()
this.getChart3()
this.getChart4()
this.getChart5()
this.getChart6()
this.getChart7()
} else if (this.activeName == 'second') {
this.getTab2List()
} else if (this.activeName == 'third') {
this.getTab3List()
}
},
changeRadio() {
console.log(this.tab.radio)
if (this.tab.radio == '1') {
console.log('配方名称')
this.tab.isFormulaName = true
this.tab.isHouseName = false
this.tab.isLivestockType = false
this.tab.isTrainNumber = false
this.tab.table.getdataListParm.name = 'getBarmilkList'
this.getTabList()
this.tab.table2.getdataListParm.name = 'getBarmilkList'
this.getTabList2()
} else if (this.tab.radio == '2') {
console.log('栏舍名称')
this.tab.isFormulaName = false
this.tab.isHouseName = true
this.tab.isLivestockType = false
this.tab.isTrainNumber = false
this.tab.table.getdataListParm.name = 'getBarmilkList'
this.getTabList()
this.tab.table2.getdataListParm.name = 'getBarmilkList'
this.getTabList2()
} else if (this.tab.radio == '3') {
console.log(' 牲畜类别')
this.tab.isFormulaName = false
this.tab.isHouseName = false
this.tab.isLivestockType = true
this.tab.isTrainNumber = false
this.tab.table.getdataListParm.name = 'getBarmilkList'
this.getTabList()
this.tab.table2.getdataListParm.name = 'getBarmilkList'
this.getTabList2()
} else if (this.tab.radio == '4') {
console.log('车次')
this.tab.isFormulaName = false
this.tab.isHouseName = false
this.tab.isLivestockType = false
this.tab.isTrainNumber = true
this.tab.table.getdataListParm.name = 'getBarmilkList'
this.getTabList()
this.tab.table2.getdataListParm.name = 'getBarmilkList'
this.getTabList2()
}
},
// 汇总统计/混料
getTabList() {
this.tab.table.listLoading = true
GetDataByName(this.tab.table.getdataListParm).then(response => {
console.log('汇总统计/混料table数据', response.data.list)
if (response.data.list !== null) {
this.tab.table.list = response.data.list
this.tab.table.total = response.data.total
} else {
this.tab.table.list = []
}
setTimeout(() => {
this.tab.table.listLoading = false
}, 100)
})
},
// 汇总统计/撒料
getTabList2() {
this.tab.table2.listLoading = true
GetDataByName(this.tab.table2.getdataListParm).then(response => {
console.log('汇总统计/撒料table数据', response.data.list)
if (response.data.list !== null) {
this.tab.table2.list = response.data.list
this.tab.table2.total = response.data.total
} else {
this.tab.table2.list = []
}
setTimeout(() => {
this.tab.table2.listLoading = false
}, 100)
})
},
// 开始日期/结束日期
changeDate() {
if (this.tab.table.getdataListParm.parammaps.inputDatetime !== '' && this.tab.table.getdataListParm.parammaps.inputDatetime !== null) {
this.tab.table.getdataListParm.parammaps.startTime = parseTime(this.tab.table.getdataListParm.parammaps.inputDatetime[0], '{y}-{m}-{d}')
this.tab.table.getdataListParm.parammaps.stopTime = parseTime(this.tab.table.getdataListParm.parammaps.inputDatetime[1], '{y}-{m}-{d}')
} else {
this.tab.table.getdataListParm.parammaps.inputDatetime = ''
this.tab.table.getdataListParm.parammaps.startTime = ''
this.tab.table.getdataListParm.parammaps.stopTime = ''
}
this.tab.table.getdataListParm.offset = 1
this.getTabList()
},
// 查询
handleSearch() {
if (this.tab.radio == '1') {
console.log('配方名称/查询')
this.tab.isFormulaName = true
this.tab.isHouseName = false
this.tab.isLivestockType = false
this.tab.isTrainNumber = false
this.tab.table.getdataListParm.name = 'getBarmilkList'
this.getTabList()
this.tab.table2.getdataListParm.name = 'getBarmilkList'
this.getTabList2()
} else if (this.tab.radio == '2') {
console.log('栏舍名称/查询')
this.tab.isFormulaName = false
this.tab.isHouseName = true
this.tab.isLivestockType = false
this.tab.isTrainNumber = false
this.tab.table.getdataListParm.name = 'getBarmilkList'
this.getTabList()
this.tab.table2.getdataListParm.name = 'getBarmilkList'
this.getTabList2()
} else if (this.tab.radio == '3') {
console.log(' 牲畜类别/查询')
this.tab.isFormulaName = false
this.tab.isHouseName = false
this.tab.isLivestockType = true
this.tab.isTrainNumber = false
this.tab.table.getdataListParm.name = 'getBarmilkList'
this.getTabList()
this.tab.table2.getdataListParm.name = 'getBarmilkList'
this.getTabList2()
} else if (this.tab.radio == '4') {
console.log('车次/查询')
this.tab.isFormulaName = false
this.tab.isHouseName = false
this.tab.isLivestockType = false
this.tab.isTrainNumber = true
this.tab.table.getdataListParm.name = 'getBarmilkList'
this.getTabList()
this.tab.table2.getdataListParm.name = 'getBarmilkList'
this.getTabList2()
}
},
// 配方准确率
getChart1() {
this.tab.chart1.listLoading = true
GetDataByName(this.tab.chart1.getdataListParm).then(response => {
console.log('配方准确率图表数据', response.data.list)
if (response.data.list !== null) {
this.tab.chart1.chartLine_data = {
data1: ['配方01', '配方02', '配方03'],
data2: ['08/12', '08/13', '08/14', '08/15', '08/16', '08/17', '08/18'],
data3: [220, 182, 191, 234, 290, 330, 310],
data4: [150, 232, 201, 154, 190, 330, 410],
data5: [120, 132, 101, 134, 90, 230, 210]
}
this.tab.chart1.total = response.data.total
this.roadChartLine1(this.tab.chart1.chartLine_data)
} else {
this.tab.chart1.list = []
}
setTimeout(() => {
this.tab.chart1.listLoading = false
}, 100)
})
},
getChart1Table() {
this.tab.chart1.table.listLoading = true
GetDataByName(this.tab.chart1.table.getdataListParm).then(response => {
console.log('配方准确率table/导出数据', response.data.list)
if (response.data.list !== null) {
this.tab.chart1.table.list = response.data.list
this.tab.chart1.table.total = response.data.total
} else {
this.tab.chart1.table.list = []
}
setTimeout(() => {
this.tab.chart1.table.listLoading = false
}, 100)
})
},
roadChartLine1(chartLine_data) {
if (this.tab.chart1.chartLine != null) {
this.tab.chart1.chartLine.dispose()
}
this.tab.chart1.chartLine = echarts.init(document.getElementById('chartLine1'))
var option = {
title: {
text: ''
},
tooltip: {
trigger: 'axis'
},
legend: {
data: chartLine_data.data1,
top: 10,
right: 10
},
grid: {
left: '3%',
right: '8%',
bottom: '3%',
containLabel: true
},
toolbox: {
show: true,
right: '2%',
feature: {}
},
xAxis: { type: 'category', boundaryGap: false, data: chartLine_data.data2, name: '时间' },
yAxis: {
type: 'value', name: '百分比'
},
series: [
{
name: chartLine_data.data1[0],
type: 'line',
stack: '总量',
data: chartLine_data.data3
},
{
name: chartLine_data.data1[1],
type: 'line',
stack: '总量',
data: chartLine_data.data4
},
{
name: chartLine_data.data1[2],
type: 'line',
stack: '总量',
data: chartLine_data.data5
}
]
}
this.tab.chart1.chartLine.setOption(option)
window.onresize = function() {
this.tab.chart1.chartLine.resize()
}
},
// 计划统计
getChart2() {
this.tab.chart2.listLoading = true
GetDataByName(this.tab.chart2.getdataListParm).then(response => {
console.log('计划统计图表数据', response.data.list)
if (response.data.list !== null) {
this.tab.chart2.chartLine_data = {
data1: ['计划准确率', '计划正确率', '计划准确率（去除取消重量）'],
data2: ['08/12', '08/13', '08/14', '08/15', '08/16', '08/17', '08/18'],
data3: [220, 182, 191, 234, 290, 330, 310],
data4: [150, 232, 201, 154, 190, 330, 410],
data5: [120, 132, 101, 134, 90, 230, 210]
}
this.tab.chart2.total = response.data.total
this.roadChartLine2(this.tab.chart2.chartLine_data)
} else {
this.tab.chart2.list = []
}
setTimeout(() => {
this.tab.chart2.listLoading = false
}, 100)
})
},
getChart2Table() {
this.tab.chart2.table.listLoading = true
GetDataByName(this.tab.chart2.table.getdataListParm).then(response => {
console.log('计划统计table/导出数据', response.data.list)
if (response.data.list !== null) {
this.tab.chart2.table.list = response.data.list
this.tab.chart2.table.total = response.data.total
} else {
this.tab.chart2.table.list = []
}
setTimeout(() => {
this.tab.chart2.table.listLoading = false
}, 100)
})
},
roadChartLine2(chartLine_data) {
if (this.tab.chart2.chartLine != null) {
this.tab.chart2.chartLine.dispose()
}
this.tab.chart2.chartLine = echarts.init(document.getElementById('chartLine2'))
var option = {
title: {
text: ''
},
tooltip: {
trigger: 'axis'
},
legend: {
data: chartLine_data.data1,
top: 10,
right: 10
},
grid: {
left: '3%',
right: '8%',
bottom: '3%',
containLabel: true
},
toolbox: {
show: true,
right: '2%',
feature: {}
},
xAxis: { type: 'category', boundaryGap: false, data: chartLine_data.data2, name: '时间' },
yAxis: {
type: 'value', name: '百分比'
},
series: [
{
name: chartLine_data.data1[0],
type: 'line',
stack: '总量',
data: chartLine_data.data3
},
{
name: chartLine_data.data1[1],
type: 'line',
stack: '总量',
data: chartLine_data.data4
},
{
name: chartLine_data.data1[2],
type: 'line',
stack: '总量',
data: chartLine_data.data5
}
]
}
this.tab.chart2.chartLine.setOption(option)
window.onresize = function() {
this.tab.chart2.chartLine.resize()
}
},
// 牛群准确率
getChart3() {
this.tab.chart3.listLoading = true
GetDataByName(this.tab.chart3.getdataListParm).then(response => {
console.log('牛群准确率图表数据', response.data.list)
if (response.data.list !== null) {
this.tab.chart3.chartLine_data = {
data1: ['配方01', '配方02', '配方03'],
data2: ['08/12', '08/13', '08/14', '08/15', '08/16', '08/17', '08/18'],
data3: [220, 182, 191, 234, 290, 330, 310],
data4: [150, 232, 201, 154, 190, 330, 410],
data5: [120, 132, 101, 134, 90, 230, 210]
}
this.tab.chart3.total = response.data.total
this.roadChartLine3(this.tab.chart3.chartLine_data)
} else {
this.tab.chart3.list = []
}
setTimeout(() => {
this.tab.chart3.listLoading = false
}, 100)
})
},
getChart3Table() {
this.tab.chart3.table.listLoading = true
GetDataByName(this.tab.chart3.table.getdataListParm).then(response => {
console.log('牛群准确率table/导出数据', response.data.list)
if (response.data.list !== null) {
this.tab.chart3.table.list = response.data.list
this.tab.chart3.table.total = response.data.total
} else {
this.tab.chart3.table.list = []
}
setTimeout(() => {
this.tab.chart3.table.listLoading = false
}, 100)
})
},
roadChartLine3(chartLine_data) {
if (this.tab.chart3.chartLine != null) {
this.tab.chart3.chartLine.dispose()
}
this.tab.chart3.chartLine = echarts.init(document.getElementById('chartLine3'))
var option = {
title: {
text: ''
},
tooltip: {
trigger: 'axis'
},
legend: {
data: chartLine_data.data1,
top: 10,
right: 10
},
grid: {
left: '3%',
right: '8%',
bottom: '3%',
containLabel: true
},
toolbox: {
show: true,
right: '2%',
feature: {}
},
xAxis: { type: 'category', boundaryGap: false, data: chartLine_data.data2, name: '时间' },
yAxis: {
type: 'value', name: '百分比'
},
series: [
{
name: chartLine_data.data1[0],
type: 'line',
stack: '总量',
data: chartLine_data.data3
},
{
name: chartLine_data.data1[1],
type: 'line',
stack: '总量',
data: chartLine_data.data4
},
{
name: chartLine_data.data1[2],
type: 'line',
stack: '总量',
data: chartLine_data.data5
}
]
}
this.tab.chart3.chartLine.setOption(option)
window.onresize = function() {
this.tab.chart3.chartLine.resize()
}
},
// 车辆准确率（重量）
getChart4() {
this.tab.chart4.listLoading = true
GetDataByName(this.tab.chart4.getdataListParm).then(response => {
console.log('车辆准确率（重量）图表数据', response.data.list)
if (response.data.list !== null) {
this.tab.chart4.chartLine_data = {
data1: ['配方01', '配方02', '配方03'],
data2: ['08/12', '08/13', '08/14', '08/15', '08/16', '08/17', '08/18'],
data3: [220, 182, 191, 234, 290, 330, 310],
data4: [150, 232, 201, 154, 190, 330, 410],
data5: [120, 132, 101, 134, 90, 230, 210]
}
this.tab.chart4.total = response.data.total
this.roadChartLine4(this.tab.chart4.chartLine_data)
} else {
this.tab.chart4.list = []
}
setTimeout(() => {
this.tab.chart4.listLoading = false
}, 100)
})
},
getChart4Table() {
this.tab.chart4.table.listLoading = true
GetDataByName(this.tab.chart4.table.getdataListParm).then(response => {
console.log('车辆准确率（重量）table/导出数据', response.data.list)
if (response.data.list !== null) {
this.tab.chart4.table.list = response.data.list
this.tab.chart4.table.total = response.data.total
} else {
this.tab.chart4.table.list = []
}
setTimeout(() => {
this.tab.chart4.table.listLoading = false
}, 100)
})
},
roadChartLine4(chartLine_data) {
if (this.tab.chart4.chartLine != null) {
this.tab.chart4.chartLine.dispose()
}
this.tab.chart4.chartLine = echarts.init(document.getElementById('chartLine4'))
var option = {
title: {
text: ''
},
tooltip: {
trigger: 'axis'
},
legend: {
data: chartLine_data.data1,
top: 10,
right: 10
},
grid: {
left: '3%',
right: '8%',
bottom: '3%',
containLabel: true
},
toolbox: {
show: true,
right: '2%',
feature: {}
},
xAxis: { type: 'category', boundaryGap: false, data: chartLine_data.data2, name: '时间' },
yAxis: {
type: 'value', name: '百分比'
},
series: [
{
name: chartLine_data.data1[0],
type: 'line',
stack: '总量',
data: chartLine_data.data3
},
{
name: chartLine_data.data1[1],
type: 'line',
stack: '总量',
data: chartLine_data.data4
},
{
name: chartLine_data.data1[2],
type: 'line',
stack: '总量',
data: chartLine_data.data5
}
]
}
this.tab.chart4.chartLine.setOption(option)
window.onresize = function() {
this.tab.chart4.chartLine.resize()
}
},
// 混料统计
getChart5() {
this.tab.chart5.listLoading = true
GetDataByName(this.tab.chart5.getdataListParm).then(response => {
console.log('混料统计图表数据', response.data.list)
if (response.data.list !== null) {
this.tab.chart5.chartLine_data = {
data1: ['8/10', '8/11', '8/12', '8/13', '8/14', '8/15', '8/16', '8/17'],
data2: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2],
data3: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2],
data4: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4],
data5: [1.5, 3, 2.8, 5, 5.3, 10.2, 19, 23.4]
}
this.tab.chart5.total = response.data.total
this.roadChartLine5(this.tab.chart5.chartLine_data)
} else {
this.tab.chart5.list = []
}
setTimeout(() => {
this.tab.chart5.listLoading = false
}, 100)
})
},
getChart5Table() {
this.tab.chart5.table.listLoading = true
GetDataByName(this.tab.chart5.table.getdataListParm).then(response => {
console.log('混料统计table/导出数据', response.data.list)
if (response.data.list !== null) {
this.tab.chart5.table.list = response.data.list
this.tab.chart5.table.total = response.data.total
} else {
this.tab.chart5.table.list = []
}
setTimeout(() => {
this.tab.chart5.table.listLoading = false
}, 100)
})
},
roadChartLine5(chartLine_data) {
if (this.tab.chart5.chartLine != null) {
this.tab.chart5.chartLine.dispose()
}
this.tab.chart5.chartLine = echarts.init(document.getElementById('chartLine5'))
var option = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
crossStyle: {
color: '#999'
}
}
},
toolbox: {
feature: {}
},
legend: {
data: ['自动跳转次数', '手动跳转次数', '自动跳转准确率', '手动跳转准确率']
},
xAxis: [
{
type: 'category',
data: chartLine_data.data1,
axisPointer: {
type: 'shadow'
}
}
],
yAxis: [
{
type: 'value',
name: '跳转次数',
min: 0,
max: 250,
interval: 50,
axisLabel: {
formatter: '{value}'
}
},
{
type: 'value',
name: '混料准确率',
min: 0,
max: 25,
interval: 5,
axisLabel: {
formatter: '{value} %'
}
}
],
series: [
{
name: '自动跳转次数',
type: 'bar',
data: chartLine_data.data2
},
{
name: '手动跳转次数',
type: 'bar',
data: chartLine_data.data3
},
{
name: '自动跳转准确率',
type: 'line',
yAxisIndex: 1,
data: chartLine_data.data4
},
{
name: '手动跳转准确率',
type: 'line',
yAxisIndex: 1,
data: chartLine_data.data5
}
]
}
this.tab.chart5.chartLine.setOption(option)
window.onresize = function() {
this.tab.chart5.chartLine.resize()
}
},
// 混料计划取消次数
getChart6() {
this.tab.chart6.listLoading = true
GetDataByName(this.tab.chart6.getdataListParm).then(response => {
console.log('混料计划取消次数图表数据', response.data.list)
if (response.data.list !== null) {
this.tab.chart6.chartLine_data = {
data1: ['08/12', '08/13', '08/14', '08/15', '08/16', '08/17', '08/18'],
data2: [220, 182, 191, 234, 290, 330, 310]
}
this.tab.chart6.total = response.data.total
this.roadChartLine6(this.tab.chart6.chartLine_data)
} else {
this.tab.chart6.list = []
}
setTimeout(() => {
this.tab.chart6.listLoading = false
}, 100)
})
},
getChart6Table() {
this.tab.chart6.table.listLoading = true
GetDataByName(this.tab.chart6.table.getdataListParm).then(response => {
console.log('车辆准确率（重量）table/导出数据', response.data.list)
if (response.data.list !== null) {
this.tab.chart6.table.list = response.data.list
this.tab.chart6.table.total = response.data.total
} else {
this.tab.chart6.table.list = []
}
setTimeout(() => {
this.tab.chart6.table.listLoading = false
}, 100)
})
},
roadChartLine6(chartLine_data) {
if (this.tab.chart6.chartLine != null) {
this.tab.chart6.chartLine.dispose()
}
this.tab.chart6.chartLine = echarts.init(document.getElementById('chartLine6'))
var option = {
color: ['#3398DB'],
tooltip: {
trigger: 'axis',
axisPointer: { // 坐标轴指示器，坐标轴触发有效
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
}
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
legend: {
data: ['取消次数']
},
xAxis: [
{
name: '时间',
type: 'category',
data: chartLine_data.data1,
axisTick: {
alignWithLabel: true
}
}
],
yAxis: [
{
name: '次数',
type: 'value'
}
],
series: [
{
name: '取消次数',
type: 'bar',
barWidth: '60%',
data: chartLine_data.data2
}
]
}
this.tab.chart6.chartLine.setOption(option)
window.onresize = function() {
this.tab.chart6.chartLine.resize()
}
},
// 栏舍撒料时间统计
getChart7() {
this.tab.chart7.listLoading = true
GetDataByName(this.tab.chart7.getdataListParm).then(response => {
console.log('栏舍撒料时间统计图表数据', response.data.list)
if (response.data.list !== null) {
this.tab.chart7.chartLine_data = {
data1: ['配方01', '配方02', '配方03'],
data2: ['08/12', '08/13', '08/14', '08/15', '08/16', '08/17', '08/18'],
// data3: ['0:00', '02:00', '04:00', '06:00', '08:00', '10:00', '12:00', '14:00', '16:00', '18:00', '20:00', '22:00', '24:00'],
data3: [0, 2, 4, 6, 8, 10, 12, 14, 16, 18, 20, 22, 24],
data4: [0, 3, 5, 8, 10, 16, 20],
data5: [23, 15, 5, 18, 4, 8, 10],
data6: [2, 5, 8, 10, 15, 16, 22]
}
this.tab.chart7.total = response.data.total
this.roadChartLine7(this.tab.chart7.chartLine_data)
} else {
this.tab.chart7.list = []
}
setTimeout(() => {
this.tab.chart7.listLoading = false
}, 100)
})
},
getChart7Table() {
this.tab.chart7.table.listLoading = true
GetDataByName(this.tab.chart7.table.getdataListParm).then(response => {
console.log('栏舍撒料时间统计table/导出数据', response.data.list)
if (response.data.list !== null) {
this.tab.chart7.table.list = response.data.list
this.tab.chart7.table.total = response.data.total
} else {
this.tab.chart7.table.list = []
}
setTimeout(() => {
this.tab.chart7.table.listLoading = false
}, 100)
})
},
roadChartLine7(chartLine_data) {
if (this.tab.chart7.chartLine != null) {
this.tab.chart7.chartLine.dispose()
}
this.tab.chart7.chartLine = echarts.init(document.getElementById('chartLine7'))
var option = {
title: {
text: ''
},
tooltip: {
trigger: 'axis'
},
legend: {
data: chartLine_data.data1,
top: 10,
right: 10
},
grid: {
left: '3%',
right: '8%',
bottom: '3%',
containLabel: true
},
toolbox: {
show: true,
right: '2%',
feature: {}
},
xAxis: { type: 'category', boundaryGap: false, data: chartLine_data.data2, name: '日期' },
yAxis: [{
type: 'value',
name: '时间',
mix: 0,
max: 24,
interval: 2,
axisLabel: {
formatter: function(value) {
var texts = []
if (value < 10) {
texts.push('0' + value + ':00')
} else {
texts.push(value + ':00')
}
return texts
}
}
}],
series: [
{
name: chartLine_data.data1[0],
type: 'line',
stack: '总量',
data: chartLine_data.data4
},
{
name: chartLine_data.data1[1],
type: 'line',
stack: '总量',
data: chartLine_data.data5
},
{
name: chartLine_data.data1[2],
type: 'line',
stack: '总量',
data: chartLine_data.data6
}
]
}
this.tab.chart7.chartLine.setOption(option)
window.onresize = function() {
this.tab.chart7.chartLine.resize()
}
},
// 导出
handleExport(item) {
if (item == 'chart1') {
console.log('配方准确率导出')
this.getChart1Table()
} else if (item == 'chart2') {
console.log('计划统计导出')
this.getChart2Table()
} else if (item == 'chart3') {
console.log('牛群准确率导出')
this.getChart3Table()
} else if (item == 'chart4') {
console.log('车辆准确率（重量）导出')
this.getChart4Table()
} else if (item == 'chart5') {
console.log('混料统计导出')
this.getChart5Table()
} else if (item == 'chart6') {
console.log('混料计划取消次数导出')
this.getChart6Table()
} else if (item == 'chart7') {
console.log('栏舍撒料时间统计导出')
this.getChart7Table()
}
},
// 切换表格
handleTable(item) {
// 显示切换表格
if (item == 'chart1') {
console.log('配方准确率表格')
this.tab.chart1.isTable = true
this.tab.chart1.isChart = false
this.getChart1Table()
} else if (item == 'chart2') {
console.log('计划统计表格')
this.tab.chart2.isTable = true
this.tab.chart2.isChart = false
this.getChart2Table()
} else if (item == 'chart3') {
console.log('牛群准确率表格')
this.tab.chart3.isTable = true
this.tab.chart3.isChart = false
this.getChart3Table()
} else if (item == 'chart4') {
console.log('车辆准确率（重量）表格')
this.tab.chart4.isTable = true
this.tab.chart4.isChart = false
this.getChart4Table()
} else if (item == 'chart5') {
console.log('混料统计表格')
this.tab.chart5.isTable = true
this.tab.chart5.isChart = false
this.getChart5Table()
} else if (item == 'chart6') {
console.log('混料计划取消次数表格')
this.tab.chart6.isTable = true
this.tab.chart6.isChart = false
this.getChart6Table()
} else if (item == 'chart7') {
console.log('栏舍撒料时间统计表格')
this.tab.chart7.isTable = true
this.tab.chart7.isChart = false
this.getChart7Table()
}
},
// 切换图表
handleChart(item) {
// 显示切换图表
if (item == 'chart1') {
console.log('配方准确率图表')
this.tab.chart1.isTable = false
this.tab.chart1.isChart = true
} else if (item == 'chart2') {
console.log('计划统计图表')
this.tab.chart2.isTable = false
this.tab.chart2.isChart = true
} else if (item == 'chart3') {
console.log('牛群准确率图表')
this.tab.chart3.isTable = false
this.tab.chart3.isChart = true
} else if (item == 'chart4') {
console.log('车辆准确率（重量）图表')
this.tab.chart4.isTable = false
this.tab.chart4.isChart = true
} else if (item == 'chart5') {
console.log('混料统计图表')
this.tab.chart5.isTable = false
this.tab.chart5.isChart = true
} else if (item == 'chart6') {
console.log('混料计划取消次数图表')
this.tab.chart6.isTable = false
this.tab.chart6.isChart = true
} else if (item == 'chart7') {
console.log('栏舍撒料时间统计图表')
this.tab.chart7.isTable = false
this.tab.chart7.isChart = true
}
},
// 混料统计
getTab2List() {
this.tab2.table.listLoading = true
GetDataByName(this.tab2.table.getdataListParm).then(response => {
console.log('混料统计table数据', response.data.list)
if (response.data.list !== null) {
this.tab2.table.list = response.data.list
this.tab2.table.total = response.data.total
} else {
this.tab2.table.list = []
}
setTimeout(() => {
this.tab2.table.listLoading = false
}, 100)
})
},
handleSearch2() {
this.getTab2List()
},
handleRefresh2() {
this.getTab2List()
},
handleExport2() {},
// 撒料统计
getTab3List() {
this.tab3.table.listLoading = true
GetDataByName(this.tab3.table.getdataListParm).then(response => {
console.log('撒料统计table数据', response.data.list)
if (response.data.list !== null) {
this.tab3.table.list = response.data.list
this.tab3.table.total = response.data.total
} else {
this.tab3.table.list = []
}
setTimeout(() => {
this.tab3.table.listLoading = false
}, 100)
})
},
handleSearch3() {
this.getTab3List()
},
handleRefresh3() {
this.getTab3List()
},
handleExport3() {}
}
}
</script>
<style lang="scss" scoped>
.search{margin-bottom:10px;}
</style>