| 1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150115111521153115411551156115711581159116011611162116311641165116611671168116911701171117211731174117511761177117811791180118111821183118411851186118711881189119011911192119311941195119611971198119912001201120212031204120512061207120812091210121112121213121412151216121712181219122012211222122312241225122612271228122912301231123212331234123512361237123812391240124112421243124412451246124712481249125012511252125312541255125612571258125912601261126212631264126512661267126812691270127112721273127412751276127712781279128012811282128312841285128612871288128912901291129212931294129512961297129812991300130113021303130413051306130713081309131013111312131313141315131613171318131913201321132213231324132513261327132813291330133113321333133413351336133713381339134013411342134313441345134613471348134913501351135213531354135513561357135813591360136113621363136413651366136713681369137013711372137313741375137613771378137913801381138213831384138513861387138813891390139113921393139413951396139713981399140014011402140314041405140614071408140914101411141214131414141514161417141814191420142114221423142414251426142714281429143014311432143314341435143614371438143914401441144214431444144514461447144814491450145114521453145414551456145714581459146014611462146314641465146614671468146914701471147214731474147514761477147814791480148114821483148414851486148714881489149014911492149314941495149614971498149915001501150215031504150515061507150815091510151115121513151415151516151715181519152015211522152315241525152615271528152915301531153215331534153515361537153815391540154115421543154415451546154715481549155015511552155315541555155615571558155915601561156215631564156515661567156815691570157115721573157415751576157715781579158015811582158315841585158615871588158915901591159215931594159515961597159815991600160116021603 | <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.date" :clearable="false" type="date" placeholder="选择日期" style="width: 150px;" format="yyyy-MM-dd" value-format="yyyy-MM-dd" />          <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-input v-if="tab.isFormulaName" v-model="tab.table.getdataListParm.parammaps.ftname" class="filter-item" style="width: 245px;" placeholder="配方模板" />          <el-input v-if="tab.isHouseName" v-model="tab.table.getdataListParm.parammaps.barname" class="filter-item" style="width: 150px;" placeholder="栏舍" />          <el-input v-if="tab.isHouseName" v-model="tab.table.getdataListParm.parammaps.ftname" class="filter-item" style="width: 150px;" placeholder="配方模板" />          <el-input v-if="tab.isLivestockType" v-model="tab.table.getdataListParm.parammaps.cowclass" class="filter-item" style="width: 150px;" placeholder="牲畜类别" />          <el-button class="successBorder" @click="handleSearch">查询</el-button>          <el-button class="export" @click="handleDownload">导出</el-button>        </div>        <div class="table">          <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="配方模板" />            <el-table-column v-if="tab.isHouseName" label="栏舍" min-width="110px" align="center" prop="栏舍" />            <el-table-column v-if="tab.isHouseName" label="配方模板" min-width="110px" align="center" prop="配方模板" />            <el-table-column v-if="tab.isLivestockType" label="牲畜类别" min-width="110px" align="center" prop="牲畜类别" />            <el-table-column label="实际牛头数" min-width="110px" align="center" prop="实际牛头数" />            <el-table-column label="应混料量(kg)" min-width="110px" align="center" prop="应混料量" />            <el-table-column label="实际混料量(kg)" min-width="110px" align="center" prop="实际混料量" />            <el-table-column label="撒料量(kg)" min-width="110px" align="center" prop="撒料量" />            <el-table-column label="混料时间(min)" min-width="110px" align="center" prop="混料时间" />            <el-table-column label="转投剩料量(kg)" min-width="110px" align="center" prop="转投剩料量" />            <el-table-column label="今日剩料量(kg)" min-width="110px" align="center" prop="今日剩料量" />            <el-table-column label="剩料率(%)" min-width="110px" align="center" prop="剩料率" />            <el-table-column label="TMR干物质(%)" min-width="110px" align="center" prop="TMR干物质" />            <el-table-column label="配方干物质采食量(kg/头)" min-width="110px" align="center" prop="配方干物质采食量" />            <el-table-column label="实际干物质采食量(kg/头)" min-width="110px" align="center" prop="实际干物质采食量" />            <el-table-column label="采食率(%)" min-width="110px" align="center" prop="采食率" />            <el-table-column label="配方成本(元/头)" min-width="110px" align="center" prop="配方成本" />            <el-table-column label="实际成本(元/头)" min-width="110px" align="center" prop="实际成本" />            <el-table-column label="产奶量(kg/头)" min-width="110px" align="center" prop="产奶量" />            <el-table-column label="饲料转化率" min-width="110px" align="center" prop="饲料转化率" />            <el-table-column label="公斤奶饲料成本" min-width="110px" align="center" prop="公斤奶饲料成本" />          </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" /> -->        </div>        <div class="AnalysisChart">          <el-row :gutter="10">            <el-col :span="12" style="margin-top: 10px;">              <el-date-picker v-model="tab.chartDate" :clearable="false" style="width: 250px;margin-right: 10px;" class="inputDatetime filter-item" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" />              <el-button class="successBorder" @click="handleChartDate">确认</el-button>            </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.chart1.getdataListParm.parammaps.inputDatetime" style="width: 250px;" class="inputDatetime" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" :clearable="false" @change="changeChartDate('chart1')" />                <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:430px;" />              <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="日期" sortable min-width="110px" align="center" prop="日期" />                  <el-table-column label="泌乳牛采食量(kg)" sortable min-width="110px" align="center" prop="field1" />                  <el-table-column label="泌乳牛产奶量(kg)" sortable min-width="110px" align="center" prop="field2" />                </el-table>              </div>            </el-col>            <!-- 牛栏剩料率 -->            <el-col :span="12" style="position: relative;">              <h4 style="text-align:center;">牛栏剩料率</h4>              <div>                <el-select v-model="tab.chart2.getdataListParm.parammaps.statisticsList" style="width: 200px;margin-right: 5px;" multiple collapse-tags placeholder="请选择统计参数" @visible-change="changeStatisticChart2()">                  <el-option v-for="item in tab.chart2.statisticsList" :key="item.id" :label="item.name" :value="item.name" />                </el-select>                <el-date-picker v-model="tab.chart2.getdataListParm.parammaps.inputDatetime" style="width: 250px;" class="inputDatetime" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" :clearable="false" @change="changeChartDate('chart2')" />                <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:430px;" />              <div v-if="tab.chart2.isTable" class="table" style="width: 100%;z-index:1;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="日期" sortable min-width="110px" align="center" prop="日期" />                  <el-table-column label="栏舍名称" sortable min-width="110px" align="center" prop="名称" />                  <el-table-column label="剩料量" sortable min-width="110px" align="center" prop="剩料量" />                  <el-table-column label="撒料量" sortable min-width="110px" align="center" prop="撒料量" />                  <el-table-column label="剩料率" sortable min-width="110px" align="center" prop="准确率" />                </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.chart3.getdataListParm.parammaps.inputDatetime" style="width: 250px;" class="inputDatetime" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" :clearable="false" @change="changeChartDate('chart3')" />                <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:430px;" />              <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="日期" />                  <el-table-column label="混料时间(分钟)" min-width="110px" align="center" prop="field1" />                </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.statisticsList" style="width: 200px;margin-right: 5px;" multiple collapse-tags placeholder="请选择统计参数" @visible-change="changeStatisticChart4()">                  <el-option v-for="item in tab.chart4.statisticsList" :key="item.id" :label="item.name" :value="item.name" />                </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="结束日期" :clearable="false" @change="changeChartDate('chart4')" />                <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:430px;" />              <div v-if="tab.chart4.isTable" class="table" style="width: 100%;z-index:1;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="日期" />                  <el-table-column label="配方名称" min-width="110px" align="center" prop="名称" />                  <el-table-column label="饲料转化率" min-width="110px" align="center" prop="准确率" />                </el-table>              </div>            </el-col>          </el-row>          <el-row :gutter="10">            <!-- 成本分析 -->            <el-col :span="24" style="position: relative;">              <h4 style="text-align:center;">成本分析</h4>              <div>                <el-select v-model="tab.chart5.getdataListParm.parammaps.statisticsList" style="width: 200px;margin-right: 5px;" multiple collapse-tags placeholder="请选择统计参数" @visible-change="changeStatisticChart5()">                  <el-option v-for="item in tab.chart5.statisticsList" :key="item.id" :label="item.name" :value="item.name" />                </el-select>                <el-date-picker v-model="tab.chart5.getdataListParm.parammaps.inputDatetime" style="width: 250px;" class="inputDatetime" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" :clearable="false" @change="changeChartDate('chart5')" />                <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:430px;" />              <div v-if="tab.chart5.isTable" class="table" style="width: 100%;z-index:1;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="日期" />                  <el-table-column label="牲畜类别" min-width="110px" align="center" prop="名称" />                  <el-table-column label="公斤奶饲料成本(元)" min-width="110px" align="center" prop="准确率" />                </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.date" :clearable="false" type="date" placeholder="选择日期" style="width: 150px;" format="yyyy-MM-dd" value-format="yyyy-MM-dd" @change="changeTab2Date" />        </div>        <div class="table">          <el-row :gutter="10">            <!-- 宾州筛分析 -->            <el-col :span="12">              <h4 style="text-align:center;">宾州筛分析</h4>              <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"                height="400px"              >                <el-table-column label="宾州筛" min-width="110px" align="center" prop="宾州筛" />                <el-table-column label="第一层重量" min-width="110px" align="center" prop="oneweight" />                <el-table-column label="第一层百分比" min-width="110px" align="center" prop="onerate" />                <el-table-column label="第二层重量" min-width="110px" align="center" prop="twoweight" />                <el-table-column label="第二层百分比" min-width="110px" align="center" prop="tworate" />                <el-table-column label="第三层重量" min-width="110px" align="center" prop="threeweight" />                <el-table-column label="第三层百分比" min-width="110px" align="center" prop="threerate" />                <el-table-column label="第四层重量" min-width="110px" align="center" prop="fourweight" />                <el-table-column label="第四层百分比" min-width="110px" align="center" prop="fourrate" />                <el-table-column label="参考标准" min-width="110px" align="center" prop="standard" />              </el-table>            </el-col>            <!-- 粪便筛分析 -->            <el-col :span="12">              <h4 style="text-align:center;">粪便筛分析</h4>              <el-table                :key="tab2.table2.tableKey"                v-loading="tab2.table2.listLoading"                element-loading-text="给我一点时间"                :data="tab2.table2.list"                border                fit                highlight-current-row                style="width: 100%;"                :row-style="rowStyle"                :cell-style="cellStyle"                class="elTable table-fixed"                height="400px"              >                <el-table-column label="粪便筛" min-width="150px" align="center" prop="barname" />                <el-table-column label="第一层重量" min-width="110px" align="center" prop="oneweight" />                <el-table-column label="第一层百分比" min-width="110px" align="center" prop="onerate" />                <el-table-column label="第二层重量" min-width="110px" align="center" prop="twoweight" />                <el-table-column label="第二层百分比" min-width="110px" align="center" prop="tworate" />                <el-table-column label="第三层重量" min-width="110px" align="center" prop="threeweight" />                <el-table-column label="第三层百分比" min-width="110px" align="center" prop="threerate" />                <el-table-column label="参考标准" min-width="110px" align="center" prop="standard" />              </el-table>            </el-col>          </el-row>          <el-row :gutter="10">            <!-- BCS评分 -->            <el-col :span="12">              <h4 style="text-align:center;">BCS评分</h4>              <el-table                :key="tab2.table3.tableKey"                v-loading="tab2.table3.listLoading"                element-loading-text="给我一点时间"                :data="tab2.table3.list"                border                fit                highlight-current-row                style="width: 100%;"                :row-style="rowStyle"                :cell-style="cellStyle"                class="elTable table-fixed"                height="400px"              >                <el-table-column label="栏舍" min-width="110px" align="center" prop="barname" />                <el-table-column label="抽查样本数" min-width="110px" align="center" prop="sumcowcount" />                <el-table-column label="单产" min-width="110px" align="center" prop="product" />                <el-table-column label="干物质采食量" min-width="110px" align="center" prop="dryweight" />                <el-table-column label="泌乳天数" min-width="110px" align="center" prop="avgdim" />                <el-table-column label="标准分数" min-width="110px" align="center" prop="standardscore" />                <el-table-column label="2.75-分(数量、百分比)" min-width="110px" align="center" prop="score25" />                <el-table-column label="2.75分(数量、百分比" min-width="110px" align="center" prop="score275" />                <el-table-column label="3分(数量、百分比)" min-width="110px" align="center" prop="score3" />                <el-table-column label="3.25分(数量、百分比)" min-width="110px" align="center" prop="score325" />                <el-table-column label="3.5分(数量、百分比)" min-width="110px" align="center" prop="score35" />                <el-table-column label="3.75分(数量、百分比)" min-width="110px" align="center" prop="score375" />                <el-table-column label="4+分(数量、百分比)" min-width="110px" align="center" prop="score4" />              </el-table>            </el-col>            <!-- 粪便评分 -->            <el-col :span="12">              <h4 style="text-align:center;">粪便评分</h4>              <el-table                :key="tab2.table4.tableKey"                v-loading="tab2.table4.listLoading"                element-loading-text="给我一点时间"                :data="tab2.table4.list"                border                fit                highlight-current-row                style="width: 100%;"                :row-style="rowStyle"                :cell-style="cellStyle"                class="elTable table-fixed"                height="400px"              >                <el-table-column label="栏舍" min-width="110px" align="center" prop="barname" />                <el-table-column label="抽查样本数" min-width="110px" align="center" prop="sumcowcount" />                <el-table-column label="单产" min-width="110px" align="center" prop="product" />                <el-table-column label="干物质采食量" min-width="110px" align="center" prop="dryweight" />                <el-table-column label="泌乳天数" min-width="110px" align="center" prop="avgdim" />                <el-table-column label="标准分数" min-width="110px" align="center" prop="standardscore" />                <el-table-column label="1分(数量、百分比)" min-width="110px" align="center" prop="score1" />                <el-table-column label="2分(数量、百分比)" min-width="110px" align="center" prop="score2" />                <el-table-column label="3分(数量、百分比)" min-width="110px" align="center" prop="score3" />                <el-table-column label="4分(数量、百分比)" min-width="110px" align="center" prop="score4" />                <el-table-column label="5分(数量、百分比)" min-width="110px" align="center" prop="score5" />              </el-table>            </el-col>          </el-row>        </div>      </el-tab-pane>    </el-tabs>  </div></template><script>import echarts from 'echarts'require('echarts/theme/macarons')import { GetDataByName, GetReportform } from '@/api/common'import Cookies from 'js-cookie'import { parseTime } from '@/utils/index.js'import Pagination from '@/components/Pagination'import { json2excel } from '@/utils/index.js'import { MessageBox } from 'element-ui'export default {  name: 'ErrorAnalysis',  components: { Pagination },  data() {    return {      activeName: 'first',      tab: {        radio: '1',        isFormulaName: true, // 配方名称        isHouseName: false, // 栏舍名称        isLivestockType: false, // 牲畜类别        chartDate: [],        table: {          getdataListParm: {            name: 'getFeedEfficiencyFT',            page: 1,            offset: 1,            pagecount: '',            returntype: 'Map',            parammaps: {              pastureid: Cookies.get('pastureid'),              date: parseTime(new Date(), '{y}-{m}-{d}'),              ftname: '',              barname: '',              cowclass: ''            }          },          tableKey: 1,          list: [],          total: 0,          listLoading: true,          temp: {}        },        chart1: {          chartLine: null,          chartLine_data: {},          getdataListParm: {            name: 'getFeedEffMR',            page: 1,            offset: 1,            pagecount: '',            returntype: 'Map',            parammaps: {              pastureid: Cookies.get('pastureid'),              startTime: parseTime(new Date(), '{y}-{m}-{d}'),              stopTime: parseTime(new Date(), '{y}-{m}-{d}'),              inputDatetime: [new Date(), new Date()]            }          },          tableKey: 1,          list: [],          total: 0,          listLoading: true,          isChart: true,          isTable: false,          table: {            tableKey: 1,            list: [],            total: 0,            listLoading: false          }        },        chart2: {          chartLine: null,          chartLine_data: {},          getdataListParm: {            name: 'getFeedEffSL',            page: 1,            offset: 1,            pagecount: '',            returntype: 'Map',            parammaps: {              pastureid: Cookies.get('pastureid'),              startTime: parseTime(new Date(), '{y}-{m}-{d}'),              stopTime: parseTime(new Date(), '{y}-{m}-{d}'),              inputDatetime: [new Date(), new Date()]            }          },          tableKey: 1,          list: [],          total: 0,          listLoading: true,          statisticsList: [],          chart2Data3: [],          isChart: true,          isTable: false,          table: {            tableKey: 1,            list: [],            total: 0,            listLoading: false          }        },        chart3: {          chartLine: null,          chartLine_data: {},          getdataListParm: {            name: 'getFeedEffHL',            page: 1,            offset: 1,            pagecount: '',            returntype: 'Map',            parammaps: {              pastureid: Cookies.get('pastureid'),              startTime: parseTime(new Date(), '{y}-{m}-{d}'),              stopTime: parseTime(new Date(), '{y}-{m}-{d}'),              inputDatetime: [new Date(), new Date()]            }          },          tableKey: 1,          list: [],          total: 0,          listLoading: true,          isChart: true,          isTable: false,          table: {            tableKey: 1,            list: [],            total: 0,            listLoading: false          }        },        chart4: {          chartLine: null,          chartLine_data: {},          getdataListParm: {            name: 'getFeedEffZH',            page: 1,            offset: 1,            pagecount: '',            returntype: 'Map',            parammaps: {              pastureid: Cookies.get('pastureid'),              startTime: parseTime(new Date(), '{y}-{m}-{d}'),              stopTime: parseTime(new Date(), '{y}-{m}-{d}'),              inputDatetime: [new Date(), new Date()]            }          },          tableKey: 1,          list: [],          total: 0,          listLoading: true,          statisticsList: [],          chart4Data3: [],          isChart: true,          isTable: false,          table: {            tableKey: 1,            list: [],            total: 0,            listLoading: false          }        },        chart5: {          chartLine: null,          chartLine_data: {},          getdataListParm: {            name: 'getFeedEffCB',            page: 1,            offset: 1,            pagecount: '',            returntype: 'Map',            parammaps: {              pastureid: Cookies.get('pastureid'),              startTime: parseTime(new Date(), '{y}-{m}-{d}'),              stopTime: parseTime(new Date(), '{y}-{m}-{d}'),              inputDatetime: [new Date(), new Date()]            }          },          tableKey: 1,          list: [],          total: 0,          listLoading: true,          statisticsList: [],          chart5Data3: [],          isChart: true,          isTable: false,          table: {            tableKey: 1,            list: [],            total: 0,            listLoading: false          }        }      },      tab2: {        table: {          getdataListParm: {            name: 'getAssessCowPenn',            page: 1,            offset: 1,            pagecount: '',            returntype: 'Map',            parammaps: {              pastureid: Cookies.get('pastureid'),              date: parseTime(new Date(), '{y}-{m}-{d}')            }          },          tableKey: 1,          list: [],          total: 0,          listLoading: true,          temp: {}        },        table2: {          getdataListParm: {            name: 'getAssessCowDung',            page: 1,            offset: 1,            pagecount: '',            returntype: 'Map',            parammaps: {              pastureid: Cookies.get('pastureid'),              date: ''            }          },          tableKey: 1,          list: [],          total: 0,          listLoading: true,          temp: {}        },        table3: {          getdataListParm: {            name: 'getAssessBodyscore',            page: 1,            offset: 1,            pagecount: '',            returntype: 'Map',            parammaps: {              pastureid: Cookies.get('pastureid'),              date: ''            }          },          tableKey: 1,          list: [],          total: 0,          listLoading: true,          temp: {}        },        table4: {          getdataListParm: {            name: 'getAssessDungscore',            page: 1,            offset: 1,            pagecount: '',            returntype: 'Map',            parammaps: {              pastureid: Cookies.get('pastureid'),              date: ''            }          },          tableKey: 1,          list: [],          total: 0,          listLoading: true,          temp: {}        }      },      rowStyle: { maxHeight: 50 + 'px', height: 45 + 'px' },      cellStyle: { padding: 0 + 'px' }    }  },  created() {    this.getTabList()    this.getTimeFn()    this.getChart1()    this.getChart2()    this.getChart3()    this.getChart4()    this.getChart5()  },  mounted() {  },  methods: {    getTimeFn() {      const that = this      const end = new Date()      const start = new Date()      start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)      that.tab.chartDate[0] = parseTime(start, '{y}-{m}-{d}')      that.tab.chartDate[1] = parseTime(end, '{y}-{m}-{d}')      that.tab.chart1.getdataListParm.parammaps.inputDatetime[0] = parseTime(start, '{y}-{m}-{d}')      that.tab.chart1.getdataListParm.parammaps.inputDatetime[1] = parseTime(end, '{y}-{m}-{d}')      that.tab.chart1.getdataListParm.parammaps.startTime = parseTime(start, '{y}-{m}-{d}')      that.tab.chart1.getdataListParm.parammaps.stopTime = parseTime(end, '{y}-{m}-{d}')      that.tab.chart2.getdataListParm.parammaps.inputDatetime[0] = parseTime(start, '{y}-{m}-{d}')      that.tab.chart2.getdataListParm.parammaps.inputDatetime[1] = parseTime(end, '{y}-{m}-{d}')      that.tab.chart2.getdataListParm.parammaps.startTime = parseTime(start, '{y}-{m}-{d}')      that.tab.chart2.getdataListParm.parammaps.stopTime = parseTime(end, '{y}-{m}-{d}')      that.tab.chart3.getdataListParm.parammaps.inputDatetime[0] = parseTime(start, '{y}-{m}-{d}')      that.tab.chart3.getdataListParm.parammaps.inputDatetime[1] = parseTime(end, '{y}-{m}-{d}')      that.tab.chart3.getdataListParm.parammaps.startTime = parseTime(start, '{y}-{m}-{d}')      that.tab.chart3.getdataListParm.parammaps.stopTime = parseTime(end, '{y}-{m}-{d}')      that.tab.chart4.getdataListParm.parammaps.inputDatetime[0] = parseTime(start, '{y}-{m}-{d}')      that.tab.chart4.getdataListParm.parammaps.inputDatetime[1] = parseTime(end, '{y}-{m}-{d}')      that.tab.chart4.getdataListParm.parammaps.startTime = parseTime(start, '{y}-{m}-{d}')      that.tab.chart4.getdataListParm.parammaps.stopTime = parseTime(end, '{y}-{m}-{d}')      that.tab.chart5.getdataListParm.parammaps.inputDatetime[0] = parseTime(start, '{y}-{m}-{d}')      that.tab.chart5.getdataListParm.parammaps.inputDatetime[1] = parseTime(end, '{y}-{m}-{d}')      that.tab.chart5.getdataListParm.parammaps.startTime = parseTime(start, '{y}-{m}-{d}')      that.tab.chart5.getdataListParm.parammaps.stopTime = parseTime(end, '{y}-{m}-{d}')    },    // 导出    handleDownload() {      if (this.tab.radio == '1') {        var excelDatas = [          {            tHeader: ['配方模板', '实际牛头数', '应混料量(kg)', '实际混料量(kg)', '撒料量(kg)', '混料时间(min)', '转投剩料量(kg)', '今日剩料量(kg)', '剩料率(%)', 'TMR干物质(%)', '配方干物质采食量(kg/头)', '实际干物质采食量(kg/头)', '采食率(%)', '配方成本(元/头 )', '实际成本(元/ 头)', '产奶量(kg /头)', '饲料转化率', '公斤奶饲料成本'],            filterVal: ['配方模板', '实际牛头数', '应混料量', '实际混料量', '撒料量', '混料时间', '转投剩料量', '今日剩料量', '剩料率', 'TMR干物质', '配方干物质采食量', '实际干物质采食量', '采食率', '配方成本', '实际成本', '产奶量', '饲料转化率', '公斤奶饲料成本'],            tableDatas: this.tab.table.list,            sheetName: '配方'          }        ]        json2excel(excelDatas, '效率统计-配方', true, 'xlsx')      } else if (this.tab.radio == '2') {        var excelDatas2 = [          {            tHeader: ['栏舍', '配方模板', '实际牛头数', '应混料量(kg)', '实际混料量(kg)', '撒料量(kg)', '混料时间(min)', '转投剩料量(kg)', '今日剩料量(kg)', '剩料率(%)', 'TMR干物质(%)', '配方干物质采食量(kg/头)', ' 实际干物质采食量( kg/头)', '采食率 (%)', '配方成本( 元/头)', '实际成本 (元/头)', '产奶量(kg/头)', '饲料转化率', '公斤奶饲料成本'],            filterVal: ['栏舍', '配方模板', '实际牛头数', '应混料量', '实际混料量', '撒料量', '混料时间', '转投剩料量', '今日剩料量', '剩料率', 'TMR干物质', '配方干物质采食量', '实际干物质采食量', '采食率', '配方成本', '实际成本', '产奶量', '饲料转化率', '公斤奶饲料成本'],            tableDatas: this.tab.table.list,            sheetName: '栏舍'          }        ]        json2excel(excelDatas2, '效率统计-栏舍', true, 'xlsx')      } else if (this.tab.radio == '3') {        var excelDatas3 = [          {            tHeader: ['牲畜类别', '实际牛头数', '应混料量(kg)', '实际混料量(kg)', '撒料量(kg)', '混料时间(min)', '转投剩料量(kg)', '今日剩料量(kg)', '剩料率(%)', 'TMR干物质(%)', '配方 物质采食量(kg/ 头)', '实际干物质采 食量(kg/头)', ' 采食率(%)', '配方 成本(元/头)', '实际成本(元/头)', '产奶量(kg/头)', '饲料转化率', '公斤奶饲料成本'],            filterVal: ['牲畜类别', '实际牛头数', '应混料量', '实际混料量', '撒料量', '混料时间', '转投剩料量', '今日剩料量', '剩料率', 'TMR干物质', '配方干物质采食量', '实际干物质采食量', ' 采食率', '配方成本', '实际成本', '产奶量', '饲料转化率', '公斤奶饲料成本'],            tableDatas: this.tab.table.list,            sheetName: '牲畜类别'          }        ]        json2excel(excelDatas3, '效率统计-牲畜类别', true, 'xlsx')      }    },    // Tab切换    handleTabClick() {      if (this.activeName == 'first') {        this.getTabList()        this.getChart1()        this.getChart2()        this.getChart3()        this.getChart4()        this.getChart5()      } else if (this.activeName == 'second') {        this.getTab2List()        this.getTab2List2()        this.getTab2List3()        this.getTab2List4()      }    },    // 切换统计类型    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.table.getdataListParm.parammaps.ftname = ''        this.tab.table.getdataListParm.parammaps.barname = ''        this.tab.table.getdataListParm.parammaps.ftname = ''        this.tab.table.getdataListParm.parammaps.cowclass = ''        this.tab.table.getdataListParm.name = 'getFeedEfficiencyFT'        this.getTabList()      } else if (this.tab.radio == '2') {        console.log('栏舍名称')        this.tab.isFormulaName = false        this.tab.isHouseName = true        this.tab.isLivestockType = false        this.tab.table.getdataListParm.parammaps.ftname = ''        this.tab.table.getdataListParm.parammaps.barname = ''        this.tab.table.getdataListParm.parammaps.ftname = ''        this.tab.table.getdataListParm.parammaps.cowclass = ''        this.tab.table.getdataListParm.name = 'getFeedEfficiencyLS'        this.getTabList()      } else if (this.tab.radio == '3') {        console.log(' 牲畜类别')        this.tab.isFormulaName = false        this.tab.isHouseName = false        this.tab.isLivestockType = true        this.tab.table.getdataListParm.parammaps.ftname = ''        this.tab.table.getdataListParm.parammaps.barname = ''        this.tab.table.getdataListParm.parammaps.ftname = ''        this.tab.table.getdataListParm.parammaps.cowclass = ''        this.tab.table.getdataListParm.name = 'getFeedEfficiencySC'        this.getTabList()      }    },    // 效率统计    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)      })    },    // 查询    handleSearch() {      if (this.tab.radio == '1') {        console.log('配方名称/查询')        this.tab.isFormulaName = true        this.tab.isHouseName = false        this.tab.isLivestockType = false        this.tab.table.getdataListParm.name = 'getFeedEfficiencyFT'        this.getTabList()      } else if (this.tab.radio == '2') {        console.log('栏舍名称/查询')        this.tab.isFormulaName = false        this.tab.isHouseName = true        this.tab.isLivestockType = false        this.tab.table.getdataListParm.name = 'getFeedEfficiencyLS'        this.getTabList()      } else if (this.tab.radio == '3') {        console.log(' 牲畜类别/查询')        this.tab.isFormulaName = false        this.tab.isHouseName = false        this.tab.isLivestockType = true        this.tab.table.getdataListParm.name = 'getFeedEfficiencySC'        this.getTabList()      }    },    // 图表总查询    handleChartDate() {      console.log('点击了确认时间')      MessageBox.confirm('是否调整以下所有图表查询时间?', {        confirmButtonText: '确认', cancelButtonText: '取消', type: 'warning'      }).then(() => {        var that = this        var startTime = parseTime(this.tab.chartDate[0], '{y}-{m}-{d}')        var stopTime = parseTime(this.tab.chartDate[1], '{y}-{m}-{d}')        that.tab.chart1.getdataListParm.parammaps.inputDatetime = this.tab.chartDate        that.tab.chart1.getdataListParm.parammaps.startTime = startTime        that.tab.chart1.getdataListParm.parammaps.stopTime = stopTime        that.getChart1()        that.tab.chart2.getdataListParm.parammaps.inputDatetime = this.tab.chartDate        that.tab.chart2.getdataListParm.parammaps.startTime = startTime        that.tab.chart2.getdataListParm.parammaps.stopTime = stopTime        that.getChart2()        that.tab.chart3.getdataListParm.parammaps.inputDatetime = this.tab.chartDate        that.tab.chart3.getdataListParm.parammaps.startTime = startTime        that.tab.chart3.getdataListParm.parammaps.stopTime = stopTime        that.getChart3()        that.tab.chart4.getdataListParm.parammaps.inputDatetime = this.tab.chartDate        that.tab.chart4.getdataListParm.parammaps.startTime = startTime        that.tab.chart4.getdataListParm.parammaps.stopTime = stopTime        that.getChart4()        that.tab.chart5.getdataListParm.parammaps.inputDatetime = this.tab.chartDate        that.tab.chart5.getdataListParm.parammaps.startTime = startTime        that.tab.chart5.getdataListParm.parammaps.stopTime = stopTime        that.getChart5()      })    },    // 泌乳牛采食量    getChart1() {      this.tab.chart1.listLoading = true      GetReportform(this.tab.chart1.getdataListParm).then(response => {        console.log('泌乳牛采食量图表数据', response.data.list)        if (response.data.list !== null) {          this.tab.chart1.table.list = response.data.data          this.tab.chart1.chartLine_data = response.data.list          // 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)      })    },    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 = {        tooltip: {          trigger: 'axis'        },        legend: {          data: ['泌乳牛采食量', '泌乳牛产奶量'],          right: 10        },        grid: {          top: '20%',          left: '5%',          right: '8%',          containLabel: true        },        xAxis: [          {            type: 'category',            data: chartLine_data.data1          }        ],        yAxis: [          {            type: 'value',            name: '泌乳牛采食量',            axisLabel: {              formatter: '{value} '            }          }, {            type: 'value',            name: '泌乳牛产奶量',            axisLabel: {              formatter: '{value} '            }          }        ],        series: [{          name: '泌乳牛采食量',          type: 'bar',          itemStyle: { /* 设置柱状颜色*/            normal: {              color: '#61a5e8'            }          },          data: chartLine_data.data2        }, {          name: '泌乳牛产奶量',          type: 'line',          itemStyle: { /* 设置折线颜色*/            normal: {              color: '#ff2d2d'            }          },          yAxisIndex: 1,          data: chartLine_data.data3        }]      }      this.tab.chart1.chartLine.setOption(option)      window.onresize = function() {        this.tab.chart1.chartLine.resize()      }    },    // 牛栏剩料率    changeStatisticChart2() {      var arrData3 = []      for (let i = 0; i < this.tab.chart2.getdataListParm.parammaps.statisticsList.length; i++) {        const myId = this.tab.chart2.statisticsList.find(obj => obj.name == this.tab.chart2.getdataListParm.parammaps.statisticsList[i]).id        for (let j = 0; j < this.tab.chart2.chart2Data3.length; j++) {          if (j == myId) {            arrData3.push(this.tab.chart2.chart2Data3[j])          }        }      }      this.tab.chart2.chartLine_data.data3 = arrData3      this.tab.chart2.chartLine_data.data1 = this.tab.chart2.getdataListParm.parammaps.statisticsList      this.roadChartLine2(this.tab.chart2.chartLine_data)    },    getChart2() {      this.tab.chart2.listLoading = true      GetReportform(this.tab.chart2.getdataListParm).then(response => {        console.log('牛栏剩料率图表数据', response.data.list)        if (response.data.list !== null) {          for (let i = 0; i < response.data.data.length; i++) {            if (response.data.data[i].准确率 !== undefined) {              response.data.data[i].准确率 = response.data.data[i].准确率 + '%'            }          }          this.tab.chart2.table.list = response.data.data          this.tab.chart2.chartLine_data = response.data.list          this.tab.chart2.total = response.data.total          this.tab.chart2.statisticsList = []          this.tab.chart2.getdataListParm.parammaps.statisticsList = []          for (let i = 0; i < response.data.list.data1.length; i++) {            if (i < 10) {              this.tab.chart2.getdataListParm.parammaps.statisticsList.push(response.data.list.data1[i])            }            var obj = {}            obj.id = i            obj.name = response.data.list.data1[i]            this.tab.chart2.statisticsList.push(obj)          }          this.tab.chart2.chart2Data3 = response.data.list.data3          this.tab.chart2.total = response.data.total          console.log('牛栏剩料率图数据', this.tab.chart2.chartLine_data)          console.log('牛栏剩料率表数据', this.tab.chart2.table.list)          var arrData3 = []          for (let i = 0; i < this.tab.chart2.getdataListParm.parammaps.statisticsList.length; i++) {            const myId = this.tab.chart2.statisticsList.find(obj => obj.name == this.tab.chart2.getdataListParm.parammaps.statisticsList[i]).id            for (let j = 0; j < this.tab.chart2.chart2Data3.length; j++) {              if (j == myId) {                arrData3.push(this.tab.chart2.chart2Data3[j])              }            }          }          this.tab.chart2.chartLine_data.data3 = arrData3          this.tab.chart2.chartLine_data.data1 = this.tab.chart2.getdataListParm.parammaps.statisticsList          this.roadChartLine2(this.tab.chart2.chartLine_data)        } else {          this.tab.chart2.list = []        }        setTimeout(() => {          this.tab.chart2.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,          right: 10          },          grid: {            top: '20%',            left: '5%',            right: '8%',            containLabel: true          },        toolbox: {          show: true,          right: '2%',          feature: {}        },        xAxis: { type: 'category', boundaryGap: false, data: chartLine_data.data2, name: '日期' },        yAxis: {          type: 'value', name: '剩料率'        },        series: (function() {          var serie = []          for (var i = 0; i < chartLine_data.data3.length; i++) {            var item = {              name: chartLine_data.data1[i],              type: 'line',              data: chartLine_data.data3[i].data            }            serie.push(item)          }          return serie        }())      }      this.tab.chart2.chartLine.setOption(option)      window.onresize = function() {        this.tab.chart2.chartLine.resize()      }    },    // 混料时间统计    getChart3() {      this.tab.chart3.listLoading = true      GetReportform(this.tab.chart3.getdataListParm).then(response => {        console.log('混料时间统计图表数据', response.data.list)        if (response.data.list !== null) {          this.tab.chart3.table.list = response.data.data          this.tab.chart3.chartLine_data = response.data.list          this.tab.chart3.total = response.data.total          // this.tab.chart3.chartLine_data = {          //   data1: ['平均搅拌时间', '混料+搅拌时间'],          //   data2: ['09/16', '09/17', '09/18', '09/19', '09/20', '09/21', '09/22', '09/23', '09/24', '09/25', '09/26', '09/27', '09/28', '09/29', '09/30'],          //   data3: [12, 13, 10.5, 10.4, 12.9, 13.3, 11.1, 11.5, 10.8, 12.5, 11.8, 12.9, 12.3, 12.1, 11.9],          //   data4: [33.5, 33.2, 34.1, 35.4, 35.9, 36.4, 34.1, 34.2, 33.9, 35.5, 34.7, 35.9, 35.2, 34.8, 34.1]          // }          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)      })    },    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: ['混料时间'],          right: 10        },        grid: {          top: '20%',          left: '5%',          right: '8%',          containLabel: true        },        toolbox: {          show: true,          right: '2%',          feature: {}        },        xAxis: { type: 'category', boundaryGap: false, data: chartLine_data.data1, name: '日期' },        yAxis: {          type: 'value', name: '分钟',          axisLabel: {            formatter: '{value}min'          }        },        series: [          {            name: '混料时间',            type: 'line',            stack: '总量',            data: chartLine_data.data2          }        ]      }      this.tab.chart3.chartLine.setOption(option)      window.onresize = function() {        this.tab.chart3.chartLine.resize()      }    },    // 转化率    changeStatisticChart4() {      var arrData3 = []      for (let i = 0; i < this.tab.chart4.getdataListParm.parammaps.statisticsList.length; i++) {        const myId = this.tab.chart4.statisticsList.find(obj => obj.name == this.tab.chart4.getdataListParm.parammaps.statisticsList[i]).id        for (let j = 0; j < this.tab.chart4.chart4Data3.length; j++) {          if (j == myId) {            arrData3.push(this.tab.chart4.chart4Data3[j])          }        }      }      this.tab.chart4.chartLine_data.data3 = arrData3      this.tab.chart4.chartLine_data.data1 = this.tab.chart4.getdataListParm.parammaps.statisticsList      this.roadChartLine4(this.tab.chart4.chartLine_data)    },    getChart4() {      this.tab.chart4.listLoading = true      GetReportform(this.tab.chart4.getdataListParm).then(response => {        console.log('转化率图表数据', response.data.list)        if (response.data.list !== null) {          this.tab.chart4.table.list = response.data.data          this.tab.chart4.chartLine_data = response.data.list          this.tab.chart4.total = response.data.total          this.tab.chart4.statisticsList = []          this.tab.chart4.getdataListParm.parammaps.statisticsList = []          for (let i = 0; i < response.data.list.data1.length; i++) {            if (i < 10) {              this.tab.chart4.getdataListParm.parammaps.statisticsList.push(response.data.list.data1[i])            }            var obj = {}            obj.id = i            obj.name = response.data.list.data1[i]            this.tab.chart4.statisticsList.push(obj)          }          this.tab.chart4.chart4Data3 = response.data.list.data3          this.tab.chart4.total = response.data.total          console.log('转化率图数据', this.tab.chart4.chartLine_data)          console.log('转化率表数据', this.tab.chart4.table.list)          var arrData3 = []          for (let i = 0; i < this.tab.chart4.getdataListParm.parammaps.statisticsList.length; i++) {            const myId = this.tab.chart4.statisticsList.find(obj => obj.name == this.tab.chart4.getdataListParm.parammaps.statisticsList[i]).id            for (let j = 0; j < this.tab.chart4.chart4Data3.length; j++) {              if (j == myId) {                arrData3.push(this.tab.chart4.chart4Data3[j])              }            }          }          this.tab.chart4.chartLine_data.data3 = arrData3          this.tab.chart4.chartLine_data.data1 = this.tab.chart4.getdataListParm.parammaps.statisticsList          this.roadChartLine4(this.tab.chart4.chartLine_data)        } else {          this.tab.chart4.list = []        }        setTimeout(() => {          this.tab.chart4.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,          right: 10        },        grid: {          top: '20%',          left: '3%',          right: '8%',          containLabel: true        },        toolbox: {          show: true,          right: '2%',          feature: {}        },        xAxis: { type: 'category', boundaryGap: false, data: chartLine_data.data2, name: '日期' },        yAxis: {          type: 'value', name: '百分比', axisLabel: { formatter: '{value} %' }        },        series: (function() {          var serie = []          for (var i = 0; i < chartLine_data.data3.length; i++) {            var item = {              name: chartLine_data.data1[i],              type: 'line',              data: chartLine_data.data3[i].data            }            serie.push(item)          }          return serie        }())      }      this.tab.chart4.chartLine.setOption(option)      window.onresize = function() {        this.tab.chart4.chartLine.resize()      }    },    // 成本分析    changeStatisticChart5() {      var arrData3 = []      for (let i = 0; i < this.tab.chart5.getdataListParm.parammaps.statisticsList.length; i++) {        const myId = this.tab.chart5.statisticsList.find(obj => obj.name == this.tab.chart5.getdataListParm.parammaps.statisticsList[i]).id        for (let j = 0; j < this.tab.chart5.chart5Data3.length; j++) {          if (j == myId) {            arrData3.push(this.tab.chart5.chart5Data3[j])          }        }      }      this.tab.chart5.chartLine_data.data3 = arrData3      this.tab.chart5.chartLine_data.data1 = this.tab.chart5.getdataListParm.parammaps.statisticsList      this.roadChartLine5(this.tab.chart5.chartLine_data)    },    getChart5() {      this.tab.chart5.listLoading = true      GetReportform(this.tab.chart5.getdataListParm).then(response => {        console.log('转化率图表数据', response.data.list)        if (response.data.list !== null) {          this.tab.chart5.table.list = response.data.data          this.tab.chart5.chartLine_data = response.data.list          this.tab.chart5.total = response.data.total          this.tab.chart5.statisticsList = []          this.tab.chart5.getdataListParm.parammaps.statisticsList = []          for (let i = 0; i < response.data.list.data1.length; i++) {            if (i < 10) {              this.tab.chart5.getdataListParm.parammaps.statisticsList.push(response.data.list.data1[i])            }            var obj = {}            obj.id = i            obj.name = response.data.list.data1[i]            this.tab.chart5.statisticsList.push(obj)          }          this.tab.chart5.chart5Data3 = response.data.list.data3          this.tab.chart5.total = response.data.total          console.log('转化率图数据', this.tab.chart5.chartLine_data)          console.log('转化率表数据', this.tab.chart5.table.list)          var arrData3 = []          for (let i = 0; i < this.tab.chart5.getdataListParm.parammaps.statisticsList.length; i++) {            const myId = this.tab.chart5.statisticsList.find(obj => obj.name == this.tab.chart5.getdataListParm.parammaps.statisticsList[i]).id            for (let j = 0; j < this.tab.chart5.chart5Data3.length; j++) {              if (j == myId) {                arrData3.push(this.tab.chart5.chart5Data3[j])              }            }          }          this.tab.chart5.chartLine_data.data3 = arrData3          this.tab.chart5.chartLine_data.data1 = this.tab.chart5.getdataListParm.parammaps.statisticsList          this.roadChartLine5(this.tab.chart5.chartLine_data)        } else {          this.tab.chart5.list = []        }        setTimeout(() => {          this.tab.chart5.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 = {        title: {          text: ''        },        tooltip: {          trigger: 'axis'        },        legend: {          data: chartLine_data.data1,          right: 10        },        grid: {          top: '20%',          left: '5%',          right: '8%',          containLabel: true        },        toolbox: {          show: true,          right: '2%',          feature: {}        },        xAxis: { type: 'category', boundaryGap: false, data: chartLine_data.data2, name: '日期' },        yAxis: {          type: 'value', name: '公斤奶饲料成本(元)'        },        series: (function() {          var serie = []          for (var i = 0; i < chartLine_data.data3.length; i++) {            var item = {              name: chartLine_data.data1[i],              type: 'line',              data: chartLine_data.data3[i].data            }            serie.push(item)          }          return serie        }())      }      this.tab.chart5.chartLine.setOption(option)      window.onresize = function() {        this.tab.chart5.chartLine.resize()      }    },    // 时间    changeChartDate(item) {      console.log(item)      if (item == 'chart1') {        if (this.tab.chart1.getdataListParm.parammaps.inputDatetime !== '' && this.tab.chart1.getdataListParm.parammaps.inputDatetime !== null) {          this.tab.chart1.getdataListParm.parammaps.startTime = parseTime(this.tab.chart1.getdataListParm.parammaps.inputDatetime[0], '{y}-{m}-{d}')          this.tab.chart1.getdataListParm.parammaps.stopTime = parseTime(this.tab.chart1.getdataListParm.parammaps.inputDatetime[1], '{y}-{m}-{d}')          this.getChart1()        } else {          this.tab.chart1.getdataListParm.parammaps.inputDatetime = ''          this.tab.chart1.getdataListParm.parammaps.startTime = ''          this.tab.chart1.getdataListParm.parammaps.stopTime = ''          this.getChart1()        }      } else if (item == 'chart2') {        if (this.tab.chart2.getdataListParm.parammaps.inputDatetime !== '' && this.tab.chart2.getdataListParm.parammaps.inputDatetime !== null) {          this.tab.chart2.getdataListParm.parammaps.startTime = parseTime(this.tab.chart2.getdataListParm.parammaps.inputDatetime[0], '{y}-{m}-{d}')          this.tab.chart2.getdataListParm.parammaps.stopTime = parseTime(this.tab.chart2.getdataListParm.parammaps.inputDatetime[1], '{y}-{m}-{d}')          this.getChart2()        } else {          this.tab.chart2.getdataListParm.parammaps.inputDatetime = ''          this.tab.chart2.getdataListParm.parammaps.startTime = ''          this.tab.chart2.getdataListParm.parammaps.stopTime = ''          this.getChart2()        }      } else if (item == 'chart3') {        if (this.tab.chart3.getdataListParm.parammaps.inputDatetime !== '' && this.tab.chart3.getdataListParm.parammaps.inputDatetime !== null) {          this.tab.chart3.getdataListParm.parammaps.startTime = parseTime(this.tab.chart3.getdataListParm.parammaps.inputDatetime[0], '{y}-{m}-{d}')          this.tab.chart3.getdataListParm.parammaps.stopTime = parseTime(this.tab.chart3.getdataListParm.parammaps.inputDatetime[1], '{y}-{m}-{d}')          this.getChart3()        } else {          this.tab.chart3.getdataListParm.parammaps.inputDatetime = ''          this.tab.chart3.getdataListParm.parammaps.startTime = ''          this.tab.chart3.getdataListParm.parammaps.stopTime = ''          this.getChart3()        }      } else if (item == 'chart4') {        if (this.tab.chart4.getdataListParm.parammaps.inputDatetime !== '' && this.tab.chart4.getdataListParm.parammaps.inputDatetime !== null) {          this.tab.chart4.getdataListParm.parammaps.startTime = parseTime(this.tab.chart4.getdataListParm.parammaps.inputDatetime[0], '{y}-{m}-{d}')          this.tab.chart4.getdataListParm.parammaps.stopTime = parseTime(this.tab.chart4.getdataListParm.parammaps.inputDatetime[1], '{y}-{m}-{d}')          this.getChart4()        } else {          this.tab.chart4.getdataListParm.parammaps.inputDatetime = ''          this.tab.chart4.getdataListParm.parammaps.startTime = ''          this.tab.chart4.getdataListParm.parammaps.stopTime = ''          this.getChart4()        }      } else if (item == 'chart5') {        if (this.tab.chart5.getdataListParm.parammaps.inputDatetime !== '' && this.tab.chart5.getdataListParm.parammaps.inputDatetime !== null) {          this.tab.chart5.getdataListParm.parammaps.startTime = parseTime(this.tab.chart5.getdataListParm.parammaps.inputDatetime[0], '{y}-{m}-{d}')          this.tab.chart5.getdataListParm.parammaps.stopTime = parseTime(this.tab.chart5.getdataListParm.parammaps.inputDatetime[1], '{y}-{m}-{d}')          this.getChart5()        } else {          this.tab.chart5.getdataListParm.parammaps.inputDatetime = ''          this.tab.chart5.getdataListParm.parammaps.startTime = ''          this.tab.chart5.getdataListParm.parammaps.stopTime = ''          this.getChart5()        }      }    },    // 导出    handleExport(item) {      if (item == 'chart1') {        console.log('泌乳牛采食量导出')        var excelDatasTabChart1 = [          {            tHeader: ['日期', '泌乳牛采食量', '泌乳牛产奶量'],            filterVal: ['日期', 'field1', 'field2'],            tableDatas: this.tab.chart1.table.list,            sheetName: '泌乳牛采食量'          }        ]        json2excel(excelDatasTabChart1, '泌乳牛采食量', true, 'xlsx')      } else if (item == 'chart2') {        console.log('牛栏剩料率导出')        var excelDatasTabChart2 = [          {            tHeader: ['日期', '栏舍名称', '剩料量', '撒料量', '剩料率'],            filterVal: ['日期', '名称', '剩料量', '撒料量', '准确率'],            tableDatas: this.tab.chart2.table.list,            sheetName: '牛栏剩料率'          }        ]        json2excel(excelDatasTabChart2, '牛栏剩料率', true, 'xlsx')      } else if (item == 'chart3') {        console.log('混料时间统计导出')        var excelDatasTabChart3 = [          {            tHeader: ['日期', '混料时间(分钟)'],            filterVal: ['日期', 'field1'],            tableDatas: this.tab.chart3.table.list,            sheetName: '混料时间统计'          }        ]        json2excel(excelDatasTabChart3, '混料时间统计', true, 'xlsx')      } else if (item == 'chart4') {        console.log('转化率导出')        var excelDatasTabChart4 = [          {            tHeader: ['日期', '配方名称', '饲料转化率'],            filterVal: ['日期', '名称', '准确率'],            tableDatas: this.tab.chart4.table.list,            sheetName: '转化率统计'          }        ]        json2excel(excelDatasTabChart4, '转化率', true, 'xlsx')      } else if (item == 'chart5') {        console.log('成本分析导出')        var excelDatasTabChart5 = [          {            tHeader: ['日期', '牲畜类别', '公斤奶饲料成本(元)'],            filterVal: ['日期', '名称', '准确率'],            tableDatas: this.tab.chart5.table.list,            sheetName: '成本分析'          }        ]        json2excel(excelDatasTabChart5, '成本分析', true, 'xlsx')      }    },    // 切换表格    handleTable(item) {      // 显示切换表格      if (item == 'chart1') {        console.log('泌乳牛采食量表格')        this.tab.chart1.isTable = true        this.tab.chart1.isChart = false      } else if (item == 'chart2') {        console.log('牛栏剩料率表格')        this.tab.chart2.isTable = true        this.tab.chart2.isChart = false      } else if (item == 'chart3') {        console.log('混料时间统计表格')        this.tab.chart3.isTable = true        this.tab.chart3.isChart = false      } else if (item == 'chart4') {        console.log('转化率表格')        this.tab.chart4.isTable = true        this.tab.chart4.isChart = false      } else if (item == 'chart5') {        console.log('成本分析表格')        this.tab.chart5.isTable = true        this.tab.chart5.isChart = false      }    },    // 切换图表    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      }    },    // 切换tab2日期    changeTab2Date() {      this.getTab2List()      this.getTab2List2()      this.getTab2List3()      this.getTab2List4()    },    // 宾州筛分析    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)      })    },    // 粪便筛分析    getTab2List2() {      this.tab2.table2.listLoading = true      this.tab2.table2.getdataListParm.parammaps.date = this.tab2.table.getdataListParm.parammaps.date      GetDataByName(this.tab2.table2.getdataListParm).then(response => {        console.log('粪便筛分析table数据', response.data.list)        if (response.data.list !== null) {          this.tab2.table2.list = response.data.list          this.tab2.table2.total = response.data.total        } else {          this.tab2.table2.list = []        }        setTimeout(() => {          this.tab2.table2.listLoading = false        }, 100)      })    },    // BCS评分    getTab2List3() {      this.tab2.table3.listLoading = true      this.tab2.table3.getdataListParm.parammaps.date = this.tab2.table.getdataListParm.parammaps.date      GetDataByName(this.tab2.table3.getdataListParm).then(response => {        console.log('BCS评分table数据', response.data.list)        if (response.data.list !== null) {          this.tab2.table3.list = response.data.list          this.tab2.table3.total = response.data.total        } else {          this.tab2.table3.list = []        }        setTimeout(() => {          this.tab2.table3.listLoading = false        }, 100)      })    },    // 粪便评分    getTab2List4() {      this.tab2.table4.listLoading = true      this.tab2.table4.getdataListParm.parammaps.date = this.tab2.table.getdataListParm.parammaps.date      GetDataByName(this.tab2.table4.getdataListParm).then(response => {        console.log('成本分析table数据', response.data.list)        if (response.data.list !== null) {          this.tab2.table4.list = response.data.list          this.tab2.table4.total = response.data.total        } else {          this.tab2.table4.list = []        }        setTimeout(() => {          this.tab2.table4.listLoading = false        }, 100)      })    }  }}</script><style lang="scss" scoped>  .search{margin-bottom:10px;}</style>
 |