|
|
@@ -1,1829 +1,1829 @@
|
|
|
-<template>
|
|
|
- <div ref="dashboardEditor" class="dashboard-editor-container">
|
|
|
- <div class="dashboard" style="margin-bottom: 10px;">
|
|
|
- <div class="dashboard-l">
|
|
|
- <div class="row1">
|
|
|
- <div class="row1-t">
|
|
|
- <div class="row1-t-l">
|
|
|
- <div class="img-l" />
|
|
|
- <span class="content">暂无消息通知</span>
|
|
|
- <!-- <div class="img-r" /> -->
|
|
|
- </div>
|
|
|
- <div class="row1-t-r">{{ date }}</div>
|
|
|
- </div>
|
|
|
- <div class="row1-c">
|
|
|
- <div class="row1-c-l">
|
|
|
- <div class="title1">
|
|
|
- <div class="img-title">
|
|
|
- <img src="../../../assets/images/index/l1.png">
|
|
|
- </div>
|
|
|
- <span class="content">混料准确率</span>
|
|
|
- </div>
|
|
|
- <div class="row1-c-l-c">
|
|
|
- <span>
|
|
|
- <b>{{ row1.list.yesRateHL }}</b>
|
|
|
- <br>昨日
|
|
|
- </span>
|
|
|
- </div>
|
|
|
- <div class="row1-c-l-b">
|
|
|
- <div><span>近30天混料准确率：</span><b>{{ row1.list.monRateHL }}</b></div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="row1-c-r">
|
|
|
- <div class="title1">
|
|
|
- <div class="img-title">
|
|
|
- <img src="../../../assets/images/index/l4.png">
|
|
|
- </div>
|
|
|
- <span class="content">撒料准确率</span>
|
|
|
- </div>
|
|
|
- <div class="row1-c-l-c">
|
|
|
- <span>
|
|
|
- <b>{{ row1.list.yesRateSL }}</b>
|
|
|
- <br>昨日
|
|
|
- </span>
|
|
|
- </div>
|
|
|
- <div class="row1-c-l-b">
|
|
|
- <div><span>近30天撒料准确率：</span><b>{{ row1.list.monRateSL }}</b></div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="row1-b">
|
|
|
- <div class="row1-b-l">
|
|
|
- <div class="title1">
|
|
|
- <div class="img-title">
|
|
|
- <img src="../../../assets/images/index/l3.png">
|
|
|
- </div>
|
|
|
- <span class="content">撒料正确率</span>
|
|
|
- </div>
|
|
|
- <div class="row1-c-l-c">
|
|
|
- <span>
|
|
|
- <b>{{ row1.list.yesRateSLR }}</b>
|
|
|
- <br>昨日
|
|
|
- </span>
|
|
|
- </div>
|
|
|
- <div class="row1-c-l-b">
|
|
|
- <div><span>近30天撒料正确率：</span><b>{{ row1.list.monRateSLR }}</b></div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="row1-b-r">
|
|
|
- <div class="title1">
|
|
|
- <div class="img-title">
|
|
|
- <img src="../../../assets/images/index/l2.png">
|
|
|
- </div>
|
|
|
- <span class="content">撒料偏差</span>
|
|
|
- </div>
|
|
|
- <div class="row1-c-l-c">
|
|
|
- <span>
|
|
|
- <b>{{ row1.list.temtime }}</b>
|
|
|
- <br>昨日
|
|
|
- </span>
|
|
|
- </div>
|
|
|
- <div class="row1-c-l-b">
|
|
|
- <div><span>近30天撒料偏差：</span><b>{{ row1.list.montime }}</b>分钟</div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="row2">
|
|
|
- <div class="title">
|
|
|
- <div class="img-title" />
|
|
|
- <span class="content">今日计划统计</span>
|
|
|
- </div>
|
|
|
- <div class="todayPlan">
|
|
|
- <div>
|
|
|
- <div id="row2chartLine1" style="height: 185px;" />
|
|
|
- <div class="bottom">
|
|
|
- <div class="bottom-l">
|
|
|
- <div class="bottom-l-t">
|
|
|
- <b>{{ row2.chart1.chartLine_data.data1 }}</b>次
|
|
|
- </div>
|
|
|
- <div class="bottom-l-b">
|
|
|
- 完成车次
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="bottom-r">
|
|
|
- <div class="bottom-r-t">
|
|
|
- <b>{{ row2.chart1.chartLine_data.data2 }}</b>次
|
|
|
- </div>
|
|
|
- <div class="bottom-r-b">
|
|
|
- 计划车次
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div>
|
|
|
- <div id="row2chartLine2" style="height: 185px;" />
|
|
|
- <div class="bottom">
|
|
|
- <div class="bottom-l">
|
|
|
- <div class="bottom-l-t">
|
|
|
- <b>{{ row2.chart2.chartLine_data.data1 }}</b>kg
|
|
|
- </div>
|
|
|
- <div class="bottom-l-b">
|
|
|
- 完成重量
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="bottom-r">
|
|
|
- <div class="bottom-r-t">
|
|
|
- <b>{{ row2.chart2.chartLine_data.data2 }}</b>kg
|
|
|
- </div>
|
|
|
- <div class="bottom-r-b">
|
|
|
- 计划重量
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <div class="row3" style="position: relative;">
|
|
|
- <div class="title">
|
|
|
- <div class="img-title" />
|
|
|
- <span class="content">成本统计</span>
|
|
|
- </div>
|
|
|
- <div v-if="row4.chart1.isChart" class="button">
|
|
|
- <div class="exportTable" @click="handleExport('row4chartLine1')">导出</div>
|
|
|
- <div class="exportTable" @click="handleTable('row4chartLine1')">切换表格</div>
|
|
|
- </div>
|
|
|
- <div v-if="row4.chart1.isChart" id="row4chartLine1" v-loading="row4.chart1.listLoading" style="background: #fff;height:310px;" />
|
|
|
- <div v-if="row4.chart1.isTable" class="table" style="position: absolute;width: 100%;">
|
|
|
- <div class="button">
|
|
|
- <div class="exportTable" @click="handleExport('row4chartLine1')">导出</div>
|
|
|
- <div class="exportTable" @click="handleChart('row4chartLine1')">切换图表</div>
|
|
|
- </div>
|
|
|
- <el-table
|
|
|
- :key="row4.chart1.table.tableKey"
|
|
|
- v-loading="row4.chart1.table.listLoading"
|
|
|
- element-loading-text="给我一点时间"
|
|
|
- :data="row4.chart1.table.list"
|
|
|
- border
|
|
|
- fit
|
|
|
- highlight-current-row
|
|
|
- style="width: 100%;margin-top: 10px;"
|
|
|
- height="300"
|
|
|
- :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="field2" />
|
|
|
- <el-table-column label="公斤奶饲料成本（元）" sortable min-width="120px" align="center" prop="field1" />
|
|
|
- </el-table>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="dashboard-r">
|
|
|
- <div class="row1">
|
|
|
- <div class="title">
|
|
|
- <div class="img-title" />
|
|
|
- <span class="content">实时监控</span>
|
|
|
- </div>
|
|
|
- <div v-if="carLength>0" id="row2chartLine3" ref="row2chartLine3" style="height: 260px;" />
|
|
|
- <div v-else style="height: 260px;text-align: center;line-height: 260px;">当前无正在进行中车次 </div>
|
|
|
- <div class="carsLength">当前车辆：<span>{{ carLength }}</span></div>
|
|
|
- <div id="car" ref="car" v-loading="row2.chart3.listLoading2" class="car">
|
|
|
- <div ref="iconLeft" class="iconLeft" @click="handleLeft">
|
|
|
- <img v-if="row2.chart3.isLeft" src="../../../assets/images/index/row-r3.png" class="img-title">
|
|
|
- <img v-if="row2.chart3.isLeftA" src="../../../assets/images/index/row-r2.png" class="img-title">
|
|
|
- </div>
|
|
|
- <div id="carList" ref="carList" class="carList">
|
|
|
- <div v-for="(item,index) in list" ref="listW" :key="index" class="listW">
|
|
|
- <div ref="list" class="list" :style="{'background': item.background,'color':item.color,'borderColor':item.borderColor}" @click="handleList(index,item)">
|
|
|
- <div class="list-t">
|
|
|
- <div class="list-t-t">
|
|
|
- <el-tooltip :content="item.tname" placement="top">
|
|
|
- <span>车辆：{{ item.tname }}</span>
|
|
|
- </el-tooltip>
|
|
|
- </div>
|
|
|
- <div class="list-t-t">
|
|
|
- <el-tooltip :content="item.fname" placement="top">
|
|
|
- <span v-if="item.inorout == 0">饲料：{{ item.fname }}</span>
|
|
|
- <span v-if="item.inorout == 1">栏舍：{{ item.fname }}</span>
|
|
|
- </el-tooltip>
|
|
|
- </div>
|
|
|
- <div class="list-t-t">
|
|
|
- <el-tooltip :content="item.remark" placement="top">
|
|
|
- <span>描述：{{ item.remark }}</span>
|
|
|
- </el-tooltip>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <div class="list-b">
|
|
|
- <div class="list-b-l">
|
|
|
- <div class="left">
|
|
|
- <div class="num"><b>{{ item.doneweight }}</b>Kg</div>
|
|
|
- <div class="weight">完成重量</div>
|
|
|
- </div>
|
|
|
- <div class="right" />
|
|
|
- </div>
|
|
|
- <div class="list-b-l">
|
|
|
- <div class="left">
|
|
|
- <div class="num"><b>{{ item.leftweight }}</b>Kg</div>
|
|
|
- <div class="weight">剩余重量</div>
|
|
|
- </div>
|
|
|
- <div class="right" />
|
|
|
- </div>
|
|
|
- <div class="list-b-l">
|
|
|
- <div class="left">
|
|
|
- <div class="num"><b>{{ item.nowweight }}</b>Kg</div>
|
|
|
- <div class="weight">车辆当前载重</div>
|
|
|
- </div>
|
|
|
- <div class="right" />
|
|
|
- </div>
|
|
|
- <div class="list-b-l">
|
|
|
- <div class="left">
|
|
|
- <div class="num"><b>{{ item.lweight }}</b>Kg</div>
|
|
|
- <div class="weight">计划重量</div>
|
|
|
- </div>
|
|
|
- <div class="right" />
|
|
|
- </div>
|
|
|
- <div class="list-b-l">
|
|
|
- <div class="left">
|
|
|
- <div class="num"><b>{{ item.donerate }}</b></div>
|
|
|
- <div class="weight">完成度</div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div v-if="item.isChecked" ref="checked" class="img-checked" />
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div ref="iconRight" class="iconRight" @click="handleRight">
|
|
|
- <img v-if="row2.chart3.isRightA" src="../../../assets/images/index/row-r5.png" class="img-title">
|
|
|
- <img v-if="row2.chart3.isRight" src="../../../assets/images/index/row-r4.png" class="img-title">
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-
|
|
|
- </div>
|
|
|
- <div class="row2">
|
|
|
- <div class="row2-l" style="position: relative;">
|
|
|
- <div class="title">
|
|
|
- <div class="img-title" />
|
|
|
- <span class="content">计划统计</span>
|
|
|
- </div>
|
|
|
- <div v-if="row3.chart1.isChart" class="button">
|
|
|
- <div class="exportTable" @click="handleExport('row3chartLine1')">导出</div>
|
|
|
- <div class="exportTable" @click="handleTable('row3chartLine1')">切换表格</div>
|
|
|
- </div>
|
|
|
- <div v-if="row3.chart1.isChart" id="row3chartLine1" v-loading="row3.chart1.listLoading" style="background: #fff;height:310px;" />
|
|
|
- <div v-if="row3.chart1.isTable" class="table" style="position: absolute;width: 100%;">
|
|
|
- <div class="button">
|
|
|
- <div class="exportTable" @click="handleExport('row3chartLine1')">导出</div>
|
|
|
- <div class="exportTable" @click="handleChart('row3chartLine1')">切换图表</div>
|
|
|
- </div>
|
|
|
- <el-table
|
|
|
- :key="row3.chart1.table.tableKey"
|
|
|
- v-loading="row3.chart1.table.listLoading"
|
|
|
- element-loading-text="给我一点时间"
|
|
|
- :data="row3.chart1.table.list"
|
|
|
- border
|
|
|
- fit
|
|
|
- highlight-current-row
|
|
|
- style="width: 100%;margin-top: 10px;"
|
|
|
- height="300"
|
|
|
- :row-style="rowStyle"
|
|
|
- :cell-style="cellStyle"
|
|
|
- class="elTable table-fixed"
|
|
|
- >
|
|
|
- <el-table-column label="日期" sortable min-width="85px" align="center" prop="日期" />
|
|
|
- <el-table-column label="计划执行重量(kg)" sortable min-width="90px" align="center" prop="实际量" />
|
|
|
- <el-table-column label="配方理论重量(kg)" sortable min-width="90px" align="center" prop="理论量" />
|
|
|
- <el-table-column label="计划准确率" sortable min-width="85px" align="center" prop="field1" />
|
|
|
- <el-table-column label="计划取消重量(kg)" sortable min-width="90px" align="center" prop="计划取消重量" />
|
|
|
- <el-table-column label="计划准确率(去除取消重量)" sortable min-width="100px" align="center" prop="field3" />
|
|
|
- <el-table-column label="计划正确数" sortable min-width="85px" align="center" prop="正确数" />
|
|
|
- <el-table-column label="计划数" sortable min-width="85px" align="center" prop="计划数" />
|
|
|
- <el-table-column label="计划正确率" sortable min-width="75px" align="center" prop="field2" />
|
|
|
- </el-table>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="row2-r" style="position: relative;">
|
|
|
-
|
|
|
- <div class="title">
|
|
|
- <div class="img-title" />
|
|
|
- <span class="content">混料实际重量统计</span>
|
|
|
- </div>
|
|
|
- <div v-if="row4.chart2.isChart" class="button">
|
|
|
- <div class="exportTable" @click="handleExport('row4chartLine2')">导出</div>
|
|
|
- <div class="exportTable" @click="handleTable('row4chartLine2')">切换表格</div>
|
|
|
- </div>
|
|
|
- <div v-if="row4.chart2.isChart" id="row4chartLine2" v-loading="row4.chart2.listLoading" style="background: #fff;height:310px;" />
|
|
|
- <div v-if="row4.chart2.isTable" class="table" style="position: absolute;width:100%;">
|
|
|
- <div class="button">
|
|
|
- <div class="exportTable" @click="handleExport('row4chartLine2')">导出</div>
|
|
|
- <div class="exportTable" @click="handleChart('row4chartLine2')">切换图表</div>
|
|
|
- </div>
|
|
|
- <el-table
|
|
|
- :key="row4.chart2.table.tableKey"
|
|
|
- v-loading="row4.chart2.table.listLoading"
|
|
|
- element-loading-text="给我一点时间"
|
|
|
- :data="row4.chart2.table.list"
|
|
|
- border
|
|
|
- fit
|
|
|
- highlight-current-row
|
|
|
- style="width: 100%;margin-top: 10px;"
|
|
|
- height="300"
|
|
|
- :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="field1" />
|
|
|
- </el-table>
|
|
|
- </div>
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
- </div>
|
|
|
-
|
|
|
- </div>
|
|
|
- <div class="row3">
|
|
|
- <div class="row3-l" style="position: relative;">
|
|
|
-
|
|
|
- <div class="title">
|
|
|
- <div class="img-title" />
|
|
|
- <span class="content">泌乳牛干物质采食量</span>
|
|
|
- </div>
|
|
|
- <div v-if="row3.chart2.isChart" class="button">
|
|
|
- <div class="exportTable" @click="handleExport('row3chartLine2')">导出</div>
|
|
|
- <div class="exportTable" @click="handleTable('row3chartLine2')">切换表格</div>
|
|
|
- </div>
|
|
|
- <div v-if="row3.chart2.isChart" id="row3chartLine2" v-loading="row3.chart2.listLoading" style="background: #fff;height:310px;" />
|
|
|
- <div v-if="row3.chart2.isTable" class="table" style="position: absolute;width: 100%;">
|
|
|
- <div class="button">
|
|
|
- <div class="exportTable" @click="handleExport('row3chartLine2')">导出</div>
|
|
|
- <div class="exportTable" @click="handleChart('row3chartLine2')">切换图表</div>
|
|
|
- </div>
|
|
|
- <el-table
|
|
|
- :key="row3.chart2.table.tableKey"
|
|
|
- v-loading="row3.chart2.table.listLoading"
|
|
|
- element-loading-text="给我一点时间"
|
|
|
- :data="row3.chart2.table.list"
|
|
|
- border
|
|
|
- fit
|
|
|
- highlight-current-row
|
|
|
- style="width: 100%;margin-top: 10px;"
|
|
|
- height="300"
|
|
|
- :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>
|
|
|
-
|
|
|
- </div>
|
|
|
- <div class="row3-r">
|
|
|
- <div class="title">
|
|
|
- <div class="img-title" />
|
|
|
- <span class="content">库存预警</span>
|
|
|
- <a style="float: right;color: #009C69;font-size: 12px;margin-right: 10px;" @click="handleMore">查看更多 >></a>
|
|
|
- </div>
|
|
|
- <div id="table" style="height: 330px;background: #fff;">
|
|
|
- <el-table
|
|
|
- :key="row4.table.tableKey"
|
|
|
- v-loading="row4.table.listLoading"
|
|
|
- element-loading-text="给我一点时间"
|
|
|
- :data="row4.table.list"
|
|
|
- border
|
|
|
- fit
|
|
|
- highlight-current-row
|
|
|
- style="width: 98%;background: #fff;margin-top: 10px;"
|
|
|
- height="320"
|
|
|
- :row-style="rowStyle"
|
|
|
- :cell-style="cellStyle"
|
|
|
- class="elTable table-fixed"
|
|
|
- >
|
|
|
- <el-table-column label="序号" type="index" min-width="80px" align="center" />
|
|
|
- <el-table-column label="饲料名称" min-width="80px" align="center" prop="feedname" />
|
|
|
- <el-table-column label="库存量（kg）" min-width="70px" align="center" prop="stockweight" />
|
|
|
- <el-table-column label="剩余使用天数" min-width="80px" align="center" prop="ldays" />
|
|
|
- </el-table>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-</template>
|
|
|
-
|
|
|
-<script>
|
|
|
-import { GetDataByName, GetReportform } from '@/api/common'
|
|
|
-import Cookies from 'js-cookie'
|
|
|
-import { parseTime } from '@/utils/index.js'
|
|
|
-import echarts from 'echarts'
|
|
|
-import { json2excel } from '@/utils/index.js'
|
|
|
-
|
|
|
-require('echarts/theme/macarons')
|
|
|
-// var myKey = 0
|
|
|
-var that = this
|
|
|
-var carIndex = 0 // 判断是否大于当前车辆数
|
|
|
-var index = 0 // 判断当前跳到第几个车辆
|
|
|
-var timer = null
|
|
|
-export default {
|
|
|
- name: 'PastureDashboard',
|
|
|
- inject: ['reload'],
|
|
|
- data() {
|
|
|
- return {
|
|
|
- val: '这是值1',
|
|
|
- date: parseTime(new Date(), '{y}-{m}-{d}'),
|
|
|
- list: [],
|
|
|
- news: 1,
|
|
|
- carLength: 0, // 车辆
|
|
|
- myKey: 0, // 轮播Key值
|
|
|
- row1: {
|
|
|
- getdataListParm: {
|
|
|
- name: 'getHomepageStr',
|
|
|
- page: 1,
|
|
|
- offset: 1,
|
|
|
- pagecount: 10,
|
|
|
- returntype: 'Map',
|
|
|
- parammaps: {
|
|
|
- pastureid: Cookies.get('pastureid')
|
|
|
- }
|
|
|
- },
|
|
|
- listLoading: true,
|
|
|
- list: ''
|
|
|
- },
|
|
|
- row2: {
|
|
|
- chart1: {
|
|
|
- chartLine: null,
|
|
|
- chartLine_data: {}
|
|
|
- },
|
|
|
- chart2: {
|
|
|
- chartLine: null,
|
|
|
- chartLine_data: {}
|
|
|
- },
|
|
|
- chart3: {
|
|
|
- isLeft: true,
|
|
|
- isRight: true,
|
|
|
- chartLine: null,
|
|
|
- chartLine_data: {},
|
|
|
- getdataListParm: {
|
|
|
- name: 'getHomeprocessAnalysis',
|
|
|
- page: 1,
|
|
|
- offset: 1,
|
|
|
- pagecount: 2,
|
|
|
- returntype: 'Map',
|
|
|
- parammaps: {
|
|
|
- pastureid: Cookies.get('pastureid'),
|
|
|
- id: '',
|
|
|
- pid: ''
|
|
|
- }
|
|
|
- },
|
|
|
- list: [],
|
|
|
- total: 0,
|
|
|
- listLoading: true,
|
|
|
- pageNum: '',
|
|
|
- pages: '',
|
|
|
- getdataListParmList: {
|
|
|
- name: 'getHomepageLBList',
|
|
|
- page: 1,
|
|
|
- offset: 1,
|
|
|
- pagecount: 2,
|
|
|
- returntype: 'Map',
|
|
|
- parammaps: {
|
|
|
- pastureid: Cookies.get('pastureid')
|
|
|
- }
|
|
|
- },
|
|
|
- list2: [],
|
|
|
- total2: 0,
|
|
|
- listLoading2: true,
|
|
|
- pageNum2: '',
|
|
|
- pages2: ''
|
|
|
- }
|
|
|
- },
|
|
|
- row3: {
|
|
|
- chartDate: [],
|
|
|
- chart1: {
|
|
|
- chartLine: null,
|
|
|
- chartLine_data: {},
|
|
|
- getdataListParm: {
|
|
|
- name: 'getAccuracyAllJH',
|
|
|
- page: 1,
|
|
|
- offset: 1,
|
|
|
- pagecount: 10,
|
|
|
- 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()]
|
|
|
- }
|
|
|
- },
|
|
|
- list: [],
|
|
|
- total: 0,
|
|
|
- listLoading: true,
|
|
|
- isChart: true,
|
|
|
- isTable: false,
|
|
|
- table: {
|
|
|
- tableKey: 1,
|
|
|
- list: [],
|
|
|
- total: 0,
|
|
|
- listLoading: false
|
|
|
- }
|
|
|
- },
|
|
|
- chart2: {
|
|
|
- chartLine: null,
|
|
|
- chartLine_data: {},
|
|
|
- getdataListParm: {
|
|
|
- name: 'getFeedEffMR',
|
|
|
- page: 1,
|
|
|
- offset: 1,
|
|
|
- pagecount: 10,
|
|
|
- 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()]
|
|
|
- }
|
|
|
- },
|
|
|
- list: [],
|
|
|
- total: 0,
|
|
|
- listLoading: true,
|
|
|
- isChart: true,
|
|
|
- isTable: false,
|
|
|
- table: {
|
|
|
- tableKey: 1,
|
|
|
- list: [],
|
|
|
- total: 0,
|
|
|
- listLoading: false
|
|
|
- }
|
|
|
- }
|
|
|
- },
|
|
|
- row4: {
|
|
|
- chartDate: [],
|
|
|
- chart1: {
|
|
|
- chartLine: null,
|
|
|
- chartLine_data: {},
|
|
|
- getdataListParm: {
|
|
|
- name: 'getHomepageCB',
|
|
|
- page: 1,
|
|
|
- offset: 1,
|
|
|
- pagecount: 10,
|
|
|
- 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()]
|
|
|
- }
|
|
|
- },
|
|
|
- list: [],
|
|
|
- total: 0,
|
|
|
- listLoading: true,
|
|
|
- isChart: true,
|
|
|
- isTable: false,
|
|
|
- table: {
|
|
|
- tableKey: 1,
|
|
|
- list: [],
|
|
|
- total: 0,
|
|
|
- listLoading: false
|
|
|
- }
|
|
|
- },
|
|
|
- chart2: {
|
|
|
- chartLine: null,
|
|
|
- chartLine_data: {},
|
|
|
- getdataListParm: {
|
|
|
- name: 'getAccuraaActHL',
|
|
|
- page: 1,
|
|
|
- offset: 1,
|
|
|
- pagecount: 10,
|
|
|
- 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()]
|
|
|
- }
|
|
|
- },
|
|
|
- list: [],
|
|
|
- total: 0,
|
|
|
- listLoading: true,
|
|
|
- isChart: true,
|
|
|
- isTable: false,
|
|
|
- table: {
|
|
|
- tableKey: 1,
|
|
|
- list: [],
|
|
|
- total: 0,
|
|
|
- listLoading: false
|
|
|
- }
|
|
|
- },
|
|
|
- table: {
|
|
|
- getdataListParm: {
|
|
|
- name: 'getFsWarnList',
|
|
|
- page: 1,
|
|
|
- offset: 1,
|
|
|
- pagecount: 5,
|
|
|
- returntype: 'Map',
|
|
|
- parammaps: {
|
|
|
- pastureid: Cookies.get('pastureid')
|
|
|
- }
|
|
|
- },
|
|
|
- tableKey: 1,
|
|
|
- list: [],
|
|
|
- total: 0,
|
|
|
- listLoading: true,
|
|
|
- temp: {}
|
|
|
- }
|
|
|
- },
|
|
|
- rowStyle: { maxHeight: 30 + 'px', height: 30 + 'px' },
|
|
|
- cellStyle: { padding: 0 + 'px' },
|
|
|
- timer: null,
|
|
|
- clickKey: 0,
|
|
|
- isClick: false
|
|
|
- }
|
|
|
- },
|
|
|
- watch: {
|
|
|
- isClick: {
|
|
|
- handler(newName, oldName) {
|
|
|
- if (newName == true) {
|
|
|
- setTimeout(() => {
|
|
|
- this.timer = setInterval(this.autoPlay, 15000)
|
|
|
- }, 20000)
|
|
|
- }
|
|
|
- },
|
|
|
- immediate: true
|
|
|
- }
|
|
|
- },
|
|
|
- created() {
|
|
|
- // this.reload()
|
|
|
- this.getCarLength()
|
|
|
- this.getChart3List()
|
|
|
- this.getTimeFn()
|
|
|
- this.getList()
|
|
|
-
|
|
|
- this.getChart4()
|
|
|
- this.getChart5()
|
|
|
- this.getChart6()
|
|
|
- this.getChart7()
|
|
|
- this.getTable8()
|
|
|
- },
|
|
|
- mounted() {
|
|
|
- this.timer = null
|
|
|
- this.timer = setInterval(this.autoPlay, 15000)
|
|
|
- },
|
|
|
- destroyed() {
|
|
|
- clearInterval(this.timer)
|
|
|
- },
|
|
|
- methods: {
|
|
|
- getTimeFn() {
|
|
|
- // this.reload()
|
|
|
- const that = this
|
|
|
- const end = new Date()
|
|
|
- const start = new Date()
|
|
|
- start.setTime(start.getTime() - 3600 * 1000 * 24 * 20)
|
|
|
- that.row3.chartDate[0] = parseTime(start, '{y}-{m}-{d}')
|
|
|
- that.row3.chartDate[1] = parseTime(end, '{y}-{m}-{d}')
|
|
|
- that.row3.chart1.getdataListParm.parammaps.inputDatetime[0] = parseTime(start, '{y}-{m}-{d}')
|
|
|
- that.row3.chart1.getdataListParm.parammaps.inputDatetime[1] = parseTime(end, '{y}-{m}-{d}')
|
|
|
- that.row3.chart1.getdataListParm.parammaps.startTime = parseTime(start, '{y}-{m}-{d}')
|
|
|
- that.row3.chart1.getdataListParm.parammaps.stopTime = parseTime(end, '{y}-{m}-{d}')
|
|
|
-
|
|
|
- that.row3.chart2.getdataListParm.parammaps.inputDatetime[0] = parseTime(start, '{y}-{m}-{d}')
|
|
|
- that.row3.chart2.getdataListParm.parammaps.inputDatetime[1] = parseTime(end, '{y}-{m}-{d}')
|
|
|
- that.row3.chart2.getdataListParm.parammaps.startTime = parseTime(start, '{y}-{m}-{d}')
|
|
|
- that.row3.chart2.getdataListParm.parammaps.stopTime = parseTime(end, '{y}-{m}-{d}')
|
|
|
-
|
|
|
- that.row4.chartDate[0] = parseTime(start, '{y}-{m}-{d}')
|
|
|
- that.row4.chartDate[1] = parseTime(end, '{y}-{m}-{d}')
|
|
|
- that.row4.chart1.getdataListParm.parammaps.inputDatetime[0] = parseTime(start, '{y}-{m}-{d}')
|
|
|
- that.row4.chart1.getdataListParm.parammaps.inputDatetime[1] = parseTime(end, '{y}-{m}-{d}')
|
|
|
- that.row4.chart1.getdataListParm.parammaps.startTime = parseTime(start, '{y}-{m}-{d}')
|
|
|
- that.row4.chart1.getdataListParm.parammaps.stopTime = parseTime(end, '{y}-{m}-{d}')
|
|
|
-
|
|
|
- that.row4.chart2.getdataListParm.parammaps.inputDatetime[0] = parseTime(start, '{y}-{m}-{d}')
|
|
|
- that.row4.chart2.getdataListParm.parammaps.inputDatetime[1] = parseTime(end, '{y}-{m}-{d}')
|
|
|
- that.row4.chart2.getdataListParm.parammaps.startTime = parseTime(start, '{y}-{m}-{d}')
|
|
|
- that.row4.chart2.getdataListParm.parammaps.stopTime = parseTime(end, '{y}-{m}-{d}')
|
|
|
- },
|
|
|
- getList() {
|
|
|
- this.row1.listLoading = true
|
|
|
- GetDataByName(this.row1.getdataListParm).then(response => {
|
|
|
- if (response.data !== null && response.data.list !== null) {
|
|
|
- console.log('row1数据', response.data.list)
|
|
|
- if (response.data.list[0].monRateHL == undefined) { response.data.list[0].monRateHL = '' }
|
|
|
- if (response.data.list[0].monRateSL == undefined) { response.data.list[0].monRateSL = '' }
|
|
|
- if (response.data.list[0].monRateSLR == undefined) { response.data.list[0].monRateSLR = '' }
|
|
|
- if (response.data.list[0].yesRateHL == undefined) { response.data.list[0].yesRateHL = '' }
|
|
|
- if (response.data.list[0].yesRateHL == undefined) { response.data.list[0].yesRateHL = '' }
|
|
|
- if (response.data.list[0].yesRateSL == undefined) { response.data.list[0].yesRateSL = '' }
|
|
|
- if (response.data.list[0].yesRateSLR == undefined) { response.data.list[0].yesRateSLR = '' }
|
|
|
- if (response.data.list[0].temtime == undefined) { response.data.list[0].temtime = '' }
|
|
|
- if (response.data.list[0].montime == undefined) { response.data.list[0].montime = '' }
|
|
|
- this.row1.list = response.data.list[0]
|
|
|
- this.row2.chart1.chartLine_data.data1 = parseFloat(response.data.list[0].doneTimes)
|
|
|
- this.row2.chart1.chartLine_data.data2 = parseFloat(response.data.list[0].planTimes)
|
|
|
- this.row2.chart2.chartLine_data.data1 = parseFloat(response.data.list[0].doneWeight)
|
|
|
- this.row2.chart2.chartLine_data.data2 = parseFloat(response.data.list[0].planWeight)
|
|
|
-
|
|
|
- this.roadChartLine1(this.row2.chart1.chartLine_data)
|
|
|
- this.roadChartLine2(this.row2.chart2.chartLine_data)
|
|
|
- } else {
|
|
|
- this.row1.list.data1.monRateHL = ''
|
|
|
- this.row1.list.data1.monRateSL = ''
|
|
|
- this.row1.list.data1.monRateSLR = ''
|
|
|
- this.row1.list.data1.yesRateHL = ''
|
|
|
- this.row1.list.data1.yesRateSL = ''
|
|
|
- this.row1.list.data1.yesRateSLR = ''
|
|
|
- this.row1.list.data1.temtime = ''
|
|
|
- this.row1.list.data1.montime = ''
|
|
|
- this.row2.chart1.chartLine_data.data1 = ''
|
|
|
- this.row2.chart1.chartLine_data.data2 = ''
|
|
|
- this.row2.chart2.chartLine_data.data1 = ''
|
|
|
- this.row2.chart2.chartLine_data.data2 = ''
|
|
|
- }
|
|
|
- setTimeout(() => {
|
|
|
- this.row1.listLoading = false
|
|
|
- }, 100)
|
|
|
- })
|
|
|
- },
|
|
|
- // 今日计划统计-完成车次
|
|
|
- roadChartLine1(chartLine_data) {
|
|
|
- console.log('chartLine_data', chartLine_data)
|
|
|
- if (this.row2.chart1.chartLine != null) {
|
|
|
- this.row2.chart1.chartLine.dispose()
|
|
|
- }
|
|
|
- this.row2.chart1.chartLine = echarts.init(document.getElementById('row2chartLine1'))
|
|
|
- if (chartLine_data.data2 == 0 || chartLine_data.data1 == 0) {
|
|
|
- chartLine_data.data1 = 0
|
|
|
- chartLine_data.data2 = 100
|
|
|
- }
|
|
|
- var option = {
|
|
|
- title: { show: true, x: 'center', textStyle: { fontSize: '15', color: 'green', fontWeight: 'bold' }},
|
|
|
- tooltip: { show: false, trigger: 'item', formatter: '{a} <br/>{b}: {c} ({d}%)' },
|
|
|
- color: ['#1bbe89', '#e4e7ec'],
|
|
|
- series: [{
|
|
|
- name: '任务进度', type: 'pie', radius: ['80%', '70%'], avoidLabelOverlap: false, hoverAnimation: false, labelLine: { normal: { show: false }},
|
|
|
- data: [{
|
|
|
- value: chartLine_data.data1, name: '车次完成率', selected: false, // 单个扇区的标签配置
|
|
|
- label: { normal: { show: true, position: 'center', fontSize: 20, formatter: '{b}\n{d}%' }}
|
|
|
- }, {
|
|
|
- value: chartLine_data.data2 - chartLine_data.data1,
|
|
|
- label: { normal: { show: false }
|
|
|
- }
|
|
|
- }]
|
|
|
- }]
|
|
|
- }
|
|
|
- this.row2.chart1.chartLine.setOption(option)
|
|
|
- if (this.row2.chart1.chartLine != null) {
|
|
|
- window.onresize = function() {
|
|
|
- this.row2.chart1.chartLine.resize()
|
|
|
- }
|
|
|
- }
|
|
|
- var that = this
|
|
|
- that.row2.chart1.chartLine.on('mouseover', e => {
|
|
|
- const op = that.row2.chart1.chartLine.getOption()
|
|
|
- that.row2.chart1.chartLine.dispatchAction({
|
|
|
- type: 'downplay',
|
|
|
- seriesIndex: 0,
|
|
|
- dataIndex: e.dataIndex,
|
|
|
- color: e.color
|
|
|
- })
|
|
|
- that.row2.chart1.chartLine.setOption(op, true)
|
|
|
- })
|
|
|
- },
|
|
|
- // 今日计划统计-完成重量
|
|
|
- roadChartLine2(chartLine_data) {
|
|
|
- if (this.row2.chart2.chartLine != null) {
|
|
|
- this.row2.chart2.chartLine.dispose()
|
|
|
- }
|
|
|
- this.row2.chart2.chartLine = echarts.init(document.getElementById('row2chartLine2'))
|
|
|
- if (chartLine_data.data2 == 0 || chartLine_data.data1 == 0) {
|
|
|
- chartLine_data.data1 = 0
|
|
|
- chartLine_data.data2 = 100
|
|
|
- }
|
|
|
- var option = {
|
|
|
- title: { show: true, x: 'center', textStyle: { fontSize: '15', color: 'green', fontWeight: 'bold' }},
|
|
|
- tooltip: { show: false, trigger: 'item', formatter: '{a} <br/>{b}: {c} ({d}%)' },
|
|
|
- series: [{
|
|
|
- name: '任务进度', type: 'pie', radius: ['80%', '70%'], avoidLabelOverlap: false, hoverAnimation: false,
|
|
|
- labelLine: { normal: { show: false }},
|
|
|
- data: [{
|
|
|
- value: chartLine_data.data1, name: '重量完成率', selected: false, label: { normal: { show: true, position: 'center', fontSize: 20, formatter: '{b}\n{d}%' }}
|
|
|
- }, {
|
|
|
- value: chartLine_data.data2 - chartLine_data.data1, label: { normal: { show: false }}
|
|
|
- }]
|
|
|
- }],
|
|
|
- color: ['#529ae4', '#e4e7ec']
|
|
|
- }
|
|
|
- this.row2.chart2.chartLine.setOption(option)
|
|
|
- if (this.row2.chart2.chartLine != null) {
|
|
|
- window.onresize = function() {
|
|
|
- this.row2.chart2.chartLine.resize()
|
|
|
- }
|
|
|
- }
|
|
|
- var that = this
|
|
|
- that.row2.chart2.chartLine.on('mouseover', e => {
|
|
|
- const op = that.row2.chart2.chartLine.getOption()
|
|
|
- that.row2.chart2.chartLine.dispatchAction({
|
|
|
- type: 'downplay',
|
|
|
- seriesIndex: 0,
|
|
|
- dataIndex: e.dataIndex,
|
|
|
- color: e.color
|
|
|
- })
|
|
|
- that.row2.chart2.chartLine.setOption(op, true)
|
|
|
- })
|
|
|
- },
|
|
|
-
|
|
|
- // 实时监控
|
|
|
- getChart3() {
|
|
|
- this.row2.chart3.listLoading = true
|
|
|
- GetReportform(this.row2.chart3.getdataListParm).then(response => {
|
|
|
- console.log('实时监控数据', response.data.list)
|
|
|
- if (response.data !== null && response.data.list !== null) {
|
|
|
- var evenNumbers = []// 偶数
|
|
|
- var oddNumbers = []// 奇数
|
|
|
- for (let i = 0; i < response.data.list.data4.length; i++) {
|
|
|
- if (i == 0) {
|
|
|
- oddNumbers.push(response.data.list.data4[i])
|
|
|
- } else {
|
|
|
- if (i % 2 == 0) {
|
|
|
- evenNumbers.push(response.data.list.data4[i])
|
|
|
- } else {
|
|
|
- oddNumbers.push(response.data.list.data4[i])
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- response.data.list.data4 = oddNumbers
|
|
|
- response.data.list.data5 = evenNumbers
|
|
|
- this.row2.chart3.chartLine_data = response.data.list
|
|
|
- this.row2.chart3.total = response.data.total
|
|
|
- this.row2.chart3.pageNum = response.data.pageNum
|
|
|
- this.row2.chart3.pages = response.data.pages
|
|
|
- this.roadChartLine3(this.row2.chart3.chartLine_data)
|
|
|
- } else {
|
|
|
- this.row2.chart3.list = []
|
|
|
- this.row2.chart3.chartLine_data = []
|
|
|
- this.roadChartLine3(this.row2.chart3.chartLine_data)
|
|
|
- }
|
|
|
- setTimeout(() => {
|
|
|
- this.row2.chart3.listLoading = false
|
|
|
- }, 100)
|
|
|
- })
|
|
|
- },
|
|
|
- roadChartLine3(chartLine_data) {
|
|
|
- console.log(chartLine_data, 'chartLine_data666')
|
|
|
- if (this.row2.chart3.chartLine != null) {
|
|
|
- this.row2.chart3.chartLine.dispose()
|
|
|
- }
|
|
|
- this.row2.chart3.chartLine = echarts.init(document.getElementById('row2chartLine3'))
|
|
|
- var option = {
|
|
|
- title: {
|
|
|
- text: '',
|
|
|
- subtext: ''
|
|
|
- },
|
|
|
- color: ['#ff0000', '#5199e5', '#fdb06a', '#fb8b73'], // 关键加上这句话，legend的颜色和折线的自定义颜色就一致了
|
|
|
- grid: {
|
|
|
- bottom: '10%'
|
|
|
- },
|
|
|
- legend: [{
|
|
|
- itemWidth: 15, itemHeight: 7, right: '25%', textStyle: { fontSize: 12 },
|
|
|
- data: [{ name: '设计重量' }, { name: '实际重量' }]
|
|
|
- }, {
|
|
|
- itemWidth: 15, itemHeight: 15, right: '0', textStyle: { fontSize: 12 },
|
|
|
- data: [{ name: '开始重量', icon: 'image://https://kptyun.cn:8081/file/pic/3.png' }, { name: '结束重量', icon: 'image://https://kptyun.cn:8081/file/pic/4.png' }]
|
|
|
- }],
|
|
|
- tooltip: {
|
|
|
- trigger: 'axis'
|
|
|
- },
|
|
|
- calculable: true,
|
|
|
- yAxis: [
|
|
|
- { type: 'value', name: '重量（kg）', splitLine: { show: false }, axisLabel: { show: true, textStyle: { color: '#666' }}}
|
|
|
- ],
|
|
|
- xAxis: [
|
|
|
- { type: 'category', splitLine: { show: false }, name: '时间', data: chartLine_data.data1, axisLabel: { show: true, textStyle: { color: '#666' }}}
|
|
|
- ],
|
|
|
- toolbox: {
|
|
|
- show: false,
|
|
|
- feature: {
|
|
|
- dataZoom: { realtime: false, yAxisIndex: 'none', },
|
|
|
- restore: {},
|
|
|
- }
|
|
|
- },
|
|
|
- dataZoom: [
|
|
|
- {type: 'inside'}, //用于添加滚轮缩放
|
|
|
- {type:'slider' }, //用于添加滑动条缩放，
|
|
|
- ],
|
|
|
- series: [
|
|
|
- { symbol: 'none', name: '实际重量', type: 'line', data: chartLine_data.data3, itemStyle: { normal: { lineStyle: { color: '#ff0000' ,width:2}}}},
|
|
|
- { symbol: 'none', name: '设计重量', type: 'line', data: chartLine_data.data2, itemStyle: { normal: { lineStyle: { width:2}}}},
|
|
|
- { name: '开始重量', symbol: 'image://https://kptyun.cn:8081/file/pic/3.png', symbolSize: 6, type: 'scatter', data: chartLine_data.data4 },
|
|
|
- { name: '结束重量', symbol: 'image://https://kptyun.cn:8081/file/pic/4.png', symbolSize: 6, type: 'scatter', data: chartLine_data.data5 }
|
|
|
- ]
|
|
|
- }
|
|
|
- this.row2.chart3.chartLine.setOption(option)
|
|
|
- if (this.row2.chart3.chartLine != null) {
|
|
|
- window.onresize = function() {
|
|
|
- this.row2.chart3.chartLine.resize()
|
|
|
- }
|
|
|
- }
|
|
|
- },
|
|
|
- getCarLength() {
|
|
|
- this.row2.chart3.listLoading2 = true
|
|
|
- this.row2.chart3.getdataListParmList.pagecount = 0
|
|
|
- GetDataByName(this.row2.chart3.getdataListParmList).then(response => {
|
|
|
- if (response.data.list !== null) {
|
|
|
- this.carLength = response.data.total
|
|
|
- } else {
|
|
|
- this.carLength = 0
|
|
|
- }
|
|
|
- setTimeout(() => {
|
|
|
- this.row2.chart3.listLoading2 = false
|
|
|
- }, 100)
|
|
|
- })
|
|
|
- },
|
|
|
- // 图三轮询列表
|
|
|
- getChart3List() {
|
|
|
- this.row2.chart3.listLoading2 = true
|
|
|
- this.row2.chart3.getdataListParmList.pagecount = 2
|
|
|
- GetDataByName(this.row2.chart3.getdataListParmList).then(response => {
|
|
|
- if (response.data.list !== null) {
|
|
|
- this.$set(response.data.list[0], 'background', '#f3f9f7')
|
|
|
- this.$set(response.data.list[0], 'borderColor', '#009d6a')
|
|
|
- this.$set(response.data.list[0], 'isChecked', true)
|
|
|
- if (response.data.list.length > 1) {
|
|
|
- this.$set(response.data.list[1], 'background', '#f9f9f9')
|
|
|
- this.$set(response.data.list[1], 'borderColor', '#f9f9f9')
|
|
|
- this.$set(response.data.list[1], 'isChecked', false)
|
|
|
- }
|
|
|
- this.list = response.data.list
|
|
|
- this.row2.chart3.getdataListParm.parammaps.pid = this.list[this.myKey].pid
|
|
|
- this.row2.chart3.getdataListParm.parammaps.id = this.list[this.myKey].id
|
|
|
- this.getChart3()
|
|
|
- this.row2.chart3.pageNum2 = response.data.pageNum
|
|
|
- this.row2.chart3.pages2 = response.data.pages
|
|
|
- } else {
|
|
|
- this.row2.chart3.list2 = []
|
|
|
- }
|
|
|
- if (response.data.pageNum == 1) {
|
|
|
- if (response.data.total > 2) {
|
|
|
- this.row2.chart3.isLeftA = false
|
|
|
- this.row2.chart3.isLeft = true
|
|
|
- this.row2.chart3.isRightA = true
|
|
|
- this.row2.chart3.isRight = false
|
|
|
- } else {
|
|
|
- this.row2.chart3.isLeftA = false
|
|
|
- this.row2.chart3.isLeft = true
|
|
|
- this.row2.chart3.isRightA = true
|
|
|
- this.row2.chart3.isRight = false
|
|
|
- }
|
|
|
- } else {
|
|
|
- if (response.data.pageNum * response.data.pageSize > response.data.total || response.data.pageNum * response.data.pageSize == response.data.total) {
|
|
|
- this.row2.chart3.isLeftA = true
|
|
|
- this.row2.chart3.isLeft = false
|
|
|
- this.row2.chart3.isRightA = false
|
|
|
- this.row2.chart3.isRight = true
|
|
|
- } else {
|
|
|
- this.row2.chart3.isLeftA = true
|
|
|
- this.row2.chart3.isLeft = false
|
|
|
- this.row2.chart3.isRightA = true
|
|
|
- this.row2.chart3.isRight = false
|
|
|
- }
|
|
|
- }
|
|
|
- setTimeout(() => {
|
|
|
- this.row2.chart3.listLoading2 = false
|
|
|
- }, 100)
|
|
|
- })
|
|
|
- },
|
|
|
- // 向左切换
|
|
|
- handleLeft() {
|
|
|
- console.log('左')
|
|
|
- if (this.row2.chart3.isLeftA == false) {
|
|
|
- console.log('前边没有啦')
|
|
|
- } else {
|
|
|
- console.log(this.row2.chart3.getdataListParmList.offset)
|
|
|
- this.row2.chart3.getdataListParmList.offset = this.row2.chart3.getdataListParmList.offset - 1
|
|
|
- this.getChart3List()
|
|
|
- }
|
|
|
- },
|
|
|
- // 向右切换
|
|
|
- handleRight() {
|
|
|
- if (this.row2.chart3.isRightA == false) {
|
|
|
- console.log('后边没有啦')
|
|
|
- } else {
|
|
|
- this.row2.chart3.getdataListParmList.offset = this.row2.chart3.getdataListParmList.offset + 1
|
|
|
- console.log(this.row2.chart3.getdataListParmList.offset)
|
|
|
- this.getChart3List()
|
|
|
- }
|
|
|
- },
|
|
|
- handleList(key, item) {
|
|
|
- console.log(item, key)
|
|
|
- this.isClick = true
|
|
|
- this.clickKey = key
|
|
|
- clearInterval(this.timer)
|
|
|
- for (let i = 0; i < this.list.length; i++) {
|
|
|
- if (key == i) {
|
|
|
- this.$set(this.list[i], 'background', '#f3f9f7')
|
|
|
- this.$set(this.list[i], 'borderColor', '#009d6a')
|
|
|
- this.$set(this.list[i], 'isChecked', true)
|
|
|
- } else {
|
|
|
- this.$set(this.list[i], 'background', '#f9f9f9')
|
|
|
- this.$set(this.list[i], 'borderColor', '#f9f9f9')
|
|
|
- this.$set(this.list[i], 'isChecked', false)
|
|
|
- }
|
|
|
- }
|
|
|
- this.row2.chart3.getdataListParm.parammaps.pid = this.list[key].pid
|
|
|
- this.row2.chart3.getdataListParm.parammaps.id = this.list[key].id
|
|
|
- this.getChart3()
|
|
|
- // this.timer = null
|
|
|
- // clearInterval(this.timer)
|
|
|
- // setTimeout(() => {
|
|
|
- // this.timer = null
|
|
|
- // this.timer = setInterval(this.autoPlay, 15000)
|
|
|
- // }, 20000)
|
|
|
- },
|
|
|
- autoPlay() {
|
|
|
- if (this.list[0].isChecked == true) {
|
|
|
- if (this.list.length > 1) {
|
|
|
- this.$set(this.list[1], 'background', '#f3f9f7')
|
|
|
- this.$set(this.list[1], 'borderColor', '#009d6a')
|
|
|
- this.$set(this.list[1], 'isChecked', true)
|
|
|
- this.$set(this.list[0], 'background', '#f9f9f9')
|
|
|
- this.$set(this.list[0], 'borderColor', '#f9f9f9')
|
|
|
- this.$set(this.list[0], 'isChecked', false)
|
|
|
- this.row2.chart3.getdataListParm.parammaps.pid = this.list[1].pid
|
|
|
- this.row2.chart3.getdataListParm.parammaps.id = this.list[1].id
|
|
|
- this.getChart3()
|
|
|
- } else {
|
|
|
- if (this.row2.chart3.isRightA == false && this.row2.chart3.isLeftA == true) {
|
|
|
- this.row2.chart3.getdataListParmList.offset = this.row2.chart3.getdataListParmList.offset - 1
|
|
|
- this.getChart3List()
|
|
|
- }
|
|
|
- }
|
|
|
- } else {
|
|
|
- if (this.row2.chart3.isRightA == true) {
|
|
|
- this.row2.chart3.getdataListParmList.offset = this.row2.chart3.getdataListParmList.offset + 1
|
|
|
- console.log(this.row2.chart3.getdataListParmList.offset)
|
|
|
- this.getChart3List()
|
|
|
- } else {
|
|
|
- if (this.row2.chart3.isLeftA == true) {
|
|
|
- this.row2.chart3.getdataListParmList.offset = this.row2.chart3.getdataListParmList.offset - 1
|
|
|
- console.log(this.row2.chart3.getdataListParmList.offset)
|
|
|
- this.getChart3List()
|
|
|
- } else {
|
|
|
- this.$set(this.list[0], 'background', '#f3f9f7')
|
|
|
- this.$set(this.list[0], 'borderColor', '#009d6a')
|
|
|
- this.$set(this.list[0], 'isChecked', true)
|
|
|
- this.$set(this.list[1], 'background', '#f9f9f9')
|
|
|
- this.$set(this.list[1], 'borderColor', '#f9f9f9')
|
|
|
- this.$set(this.list[1], 'isChecked', false)
|
|
|
- this.row2.chart3.getdataListParm.parammaps.pid = this.list[0].pid
|
|
|
- this.row2.chart3.getdataListParm.parammaps.id = this.list[0].id
|
|
|
- this.getChart3()
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- },
|
|
|
-
|
|
|
- // 计划统计
|
|
|
- getChart4() {
|
|
|
- this.row3.chart1.listLoading = true
|
|
|
- GetReportform(this.row3.chart1.getdataListParm).then(response => {
|
|
|
- if (response.data !== null && response.data.list !== null) {
|
|
|
- console.log('计划统计数据', response.data.list)
|
|
|
- for (let i = 0; i < response.data.data.length; i++) {
|
|
|
- if (response.data.data[i].实际量 !== '' && response.data.data[i].实际量 !== undefined) {
|
|
|
- response.data.data[i].实际量 = parseFloat(response.data.data[i].实际量)
|
|
|
- }
|
|
|
- if (response.data.data[i].理论量 !== '' && response.data.data[i].理论量 !== undefined) {
|
|
|
- response.data.data[i].理论量 = parseFloat(response.data.data[i].理论量)
|
|
|
- }
|
|
|
- if (response.data.data[i].field1 !== '' && response.data.data[i].field1 !== undefined) {
|
|
|
- response.data.data[i].field1 = parseFloat(response.data.data[i].field1)
|
|
|
- }
|
|
|
- if (response.data.data[i].计划取消重量 !== '' && response.data.data[i].计划取消重量 !== undefined) {
|
|
|
- response.data.data[i].计划取消重量 = parseFloat(response.data.data[i].计划取消重量)
|
|
|
- }
|
|
|
- if (response.data.data[i].field3 !== '' && response.data.data[i].field3 !== undefined) {
|
|
|
- response.data.data[i].field3 = parseFloat(response.data.data[i].field3)
|
|
|
- }
|
|
|
- if (response.data.data[i].正确数 !== '' && response.data.data[i].正确数 !== undefined) {
|
|
|
- response.data.data[i].正确数 = parseFloat(response.data.data[i].正确数)
|
|
|
- }
|
|
|
- if (response.data.data[i].计划数 !== '' && response.data.data[i].计划数 !== undefined) {
|
|
|
- response.data.data[i].计划数 = parseFloat(response.data.data[i].计划数)
|
|
|
- }
|
|
|
- if (response.data.data[i].field2 !== '' && response.data.data[i].field2 !== undefined) {
|
|
|
- response.data.data[i].field2 = parseFloat(response.data.data[i].field2)
|
|
|
- }
|
|
|
- }
|
|
|
- this.row3.chart1.table.list = response.data.data
|
|
|
- console.log(this.row3.chart1.table.list, '123')
|
|
|
- this.row3.chart1.chartLine_data = response.data.list
|
|
|
- this.row3.chart1.total = response.data.total
|
|
|
- } else {
|
|
|
- this.row3.chart1.list = []
|
|
|
- this.row3.chart1.chartLine_data = []
|
|
|
- this.row3.chart1.chartLine_data.data1 = []
|
|
|
- }
|
|
|
- if (this.row3.chart1.chartLine_data.data1.length == 0) {
|
|
|
- this.row3.chart1.chartLine_data.title = '暂无数据'
|
|
|
- } else {
|
|
|
- this.row3.chart1.chartLine_data.title = ''
|
|
|
- }
|
|
|
- this.roadChartLine4(this.row3.chart1.chartLine_data)
|
|
|
- setTimeout(() => {
|
|
|
- this.row3.chart1.listLoading = false
|
|
|
- }, 100)
|
|
|
- })
|
|
|
- },
|
|
|
- roadChartLine4(chartLine_data) {
|
|
|
- if (this.row3.chart1.chartLine != null) {
|
|
|
- this.row3.chart1.chartLine.dispose()
|
|
|
- }
|
|
|
- this.row3.chart1.chartLine = echarts.init(document.getElementById('row3chartLine1'))
|
|
|
- var option = {
|
|
|
- title: { text: chartLine_data.title, x: 'center', y: 'center', textStyle: { color: '#909399', fontWeight: 'normal', fontSize: 12 }},
|
|
|
- tooltip: { trigger: 'axis' },
|
|
|
- color: ['#1abd88', '#549be9', '#fd8d75'],
|
|
|
- legend: {
|
|
|
- data: ['计划准确率', '计划正确率', '计划准确率（去除取消重量）'],
|
|
|
- top: 10, itemHeight: 7, itemWidth: 15, textStyle: { fontSize: 12 }
|
|
|
- },
|
|
|
- grid: {
|
|
|
- top: '20%',
|
|
|
- left: '10%',
|
|
|
- right: '10%',
|
|
|
- bottom: '10%',
|
|
|
- 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} %' }
|
|
|
- },
|
|
|
- series: [
|
|
|
- { name: '计划准确率', type: 'line', symbol: 'none', smooth: true, itemStyle: { normal: { lineStyle: { color: '#1abd88' }}}, data: chartLine_data.data2 },
|
|
|
- { name: '计划正确率', type: 'line', symbol: 'none', smooth: true, itemStyle: { normal: { lineStyle: { color: '#549be9' }}}, data: chartLine_data.data3 },
|
|
|
- { name: '计划准确率（去除取消重量）', type: 'line', symbol: 'none', smooth: true, itemStyle: { normal: { lineStyle: { color: '#fd8d75' }}}, data: chartLine_data.data4 }
|
|
|
- ]
|
|
|
- }
|
|
|
- this.row3.chart1.chartLine.setOption(option)
|
|
|
- if (this.row3.chart1.chartLine != null) {
|
|
|
- window.onresize = function() {
|
|
|
- this.row3.chart1.chartLine.resize()
|
|
|
- }
|
|
|
- }
|
|
|
- },
|
|
|
- // 泌乳牛干物质采食量
|
|
|
- getChart5() {
|
|
|
- this.row3.chart2.listLoading = true
|
|
|
- GetReportform(this.row3.chart2.getdataListParm).then(response => {
|
|
|
- console.log('泌乳牛干物质采食量数据', response)
|
|
|
- if (response.data !== null && response.data.list !== null && response.data.data !== null) {
|
|
|
- for (let i = 0; i < response.data.data.length; i++) {
|
|
|
- if (response.data.data[i].field1 !== '' && response.data.data[i].field1 !== undefined) {
|
|
|
- response.data.data[i].field1 = parseFloat(response.data.data[i].field1)
|
|
|
- }
|
|
|
- if (response.data.data[i].field2 !== '' && response.data.data[i].field2 !== undefined) {
|
|
|
- response.data.data[i].field2 = parseFloat(response.data.data[i].field2)
|
|
|
- }
|
|
|
- }
|
|
|
- this.row3.chart2.table.list = response.data.data
|
|
|
- this.row3.chart2.chartLine_data = response.data.list
|
|
|
- this.row3.chart2.total = response.data.total
|
|
|
- } else {
|
|
|
- this.row3.chart2.list = []
|
|
|
- this.row3.chart2.chartLine_data = []
|
|
|
- this.row3.chart2.chartLine_data.data1 = []
|
|
|
- }
|
|
|
- if (this.row3.chart2.chartLine_data.data1.length == 0) {
|
|
|
- this.row3.chart2.chartLine_data.title = '暂无数据'
|
|
|
- } else {
|
|
|
- this.row3.chart2.chartLine_data.title = ''
|
|
|
- }
|
|
|
- this.roadChartLine5(this.row3.chart2.chartLine_data)
|
|
|
- setTimeout(() => {
|
|
|
- this.row3.chart2.listLoading = false
|
|
|
- }, 100)
|
|
|
- })
|
|
|
- },
|
|
|
- roadChartLine5(chartLine_data) {
|
|
|
- if (this.row3.chart2.chartLine != null) {
|
|
|
- this.row3.chart2.chartLine.dispose()
|
|
|
- }
|
|
|
- this.row3.chart2.chartLine = echarts.init(document.getElementById('row3chartLine2'))
|
|
|
- var option = {
|
|
|
- title: { text: chartLine_data.title, x: 'center', y: 'center', textStyle: { color: '#909399', fontWeight: 'normal', fontSize: 12 }},
|
|
|
- tooltip: { trigger: 'axis', axisPointer: { type: 'cross', crossStyle: { color: '#999' }}},
|
|
|
- grid: { top: '20%', left: '8%', right: '10%', bottom: '10%', containLabel: true },
|
|
|
- legend: { data: ['泌乳牛干物质采食量', '泌乳牛产奶量'], right: 10, itemHeight: 7, itemWidth: 15 },
|
|
|
- xAxis: [{ type: 'category', data: chartLine_data.data1 }],
|
|
|
- yAxis: [{
|
|
|
- splitLine: { show: false }, type: 'value', name: '泌乳牛干\n物质采食量', axisLabel: { formatter: '{value} ' }
|
|
|
- }, {
|
|
|
- splitLine: { show: false }, type: 'value', name: '泌乳牛产奶量', axisLabel: { formatter: '{value} ' }
|
|
|
- }],
|
|
|
- series: [{
|
|
|
- name: '泌乳牛干物质采食量', type: 'bar', barWidth: 5, itemStyle: { barBorderRadius: [18, 18, 0, 0], normal: { color: '#5199e5' }}, data: chartLine_data.data2
|
|
|
- }, {
|
|
|
- name: '泌乳牛产奶量', type: 'line', barWidth: 5,
|
|
|
- itemStyle: { barBorderRadius: [18, 18, 0, 0], normal: { color: '#36c293' }}, yAxisIndex: 1, data: chartLine_data.data3
|
|
|
- }]
|
|
|
- }
|
|
|
- this.row3.chart2.chartLine.setOption(option)
|
|
|
- if (this.row3.chart2.chartLine != null) {
|
|
|
- window.onresize = function() {
|
|
|
- this.row3.chart2.chartLine.resize()
|
|
|
- }
|
|
|
- }
|
|
|
- },
|
|
|
-
|
|
|
- // 成本统计
|
|
|
- getChart6() {
|
|
|
- this.row4.chart1.table.listLoading = true
|
|
|
- this.row4.chart1.listLoading = true
|
|
|
- GetReportform(this.row4.chart1.getdataListParm).then(response => {
|
|
|
- if (response.data !== null && response.data.list !== null && response.data.data !== null && response.data.data !== '') {
|
|
|
- console.log('成本统计数据', response.data.data)
|
|
|
- console.log('成本统计数据', response.data.list)
|
|
|
- for (let i = 0; i < response.data.data.length; i++) {
|
|
|
- if (response.data.data[i].field1 !== '' && response.data.data[i].field1 !== undefined) {
|
|
|
- response.data.data[i].field1 = parseFloat(response.data.data[i].field1)
|
|
|
- }
|
|
|
- if (response.data.data[i].field2 !== '' && response.data.data[i].field2 !== undefined) {
|
|
|
- response.data.data[i].field2 = parseFloat(response.data.data[i].field2)
|
|
|
- }
|
|
|
- }
|
|
|
- this.row4.chart1.table.list = response.data.data
|
|
|
- this.row4.chart1.chartLine_data = response.data.list
|
|
|
- this.row4.chart1.total = response.data.total
|
|
|
- } else {
|
|
|
- this.row4.chart1.list = []
|
|
|
- this.row4.chart1.chartLine_data = []
|
|
|
- this.row4.chart1.chartLine_data.data1 = []
|
|
|
- }
|
|
|
- if (this.row4.chart1.chartLine_data.data1.length == 0) {
|
|
|
- this.row4.chart1.chartLine_data.title = '暂无数据'
|
|
|
- } else {
|
|
|
- this.row4.chart1.chartLine_data.title = ''
|
|
|
- }
|
|
|
- this.roadChartLine6(this.row4.chart1.chartLine_data)
|
|
|
- setTimeout(() => {
|
|
|
- this.row4.chart1.listLoading = false
|
|
|
- this.row4.chart1.table.listLoading = false
|
|
|
- }, 100)
|
|
|
- })
|
|
|
- },
|
|
|
- roadChartLine6(chartLine_data) {
|
|
|
- if (this.row4.chart1.chartLine != null) {
|
|
|
- this.row4.chart1.chartLine.dispose()
|
|
|
- }
|
|
|
- console.log(chartLine_data, '===666')
|
|
|
- this.row4.chart1.chartLine = echarts.init(document.getElementById('row4chartLine1'))
|
|
|
- var option = {
|
|
|
- title: { text: chartLine_data.title, x: 'center', y: 'center', textStyle: { color: '#909399', fontWeight: 'normal', fontSize: 12 }},
|
|
|
- grid: { left: '10%', right: '12%', bottom: '3%', containLabel: true },
|
|
|
- tooltip: { trigger: 'axis', axisPointer: { type: 'cross', crossStyle: { color: '#999' }}},
|
|
|
- legend: { data: ['公斤奶饲料成本', '单头牛饲料成本'], itemHeight: 7, itemWidth: 15 },
|
|
|
- xAxis: [{ type: 'category', data: chartLine_data.data1, axisPointer: { type: 'shadow' }, name: '日期' }],
|
|
|
- yAxis: [{
|
|
|
- splitLine: { show: false }, type: 'value', name: '公斤奶\n饲料成本（元）', axisLabel: { formatter: '{value}' }
|
|
|
- }, {
|
|
|
- splitLine: { show: false }, type: 'value', name: '单头牛\n饲料成本（元）', axisLabel: { formatter: '{value}' }
|
|
|
- }
|
|
|
- ],
|
|
|
- series: [{
|
|
|
- name: '公斤奶饲料成本', type: 'bar', itemStyle: { normal: { color: '#1abd88' }}, data: chartLine_data.data2
|
|
|
- }, {
|
|
|
- name: '单头牛饲料成本', type: 'line', yAxisIndex: 1, itemStyle: { normal: { color: '#ff8d78' }}, data: chartLine_data.data3
|
|
|
- }]
|
|
|
- }
|
|
|
- this.row4.chart1.chartLine.setOption(option)
|
|
|
- if (this.row4.chart1.chartLine != null) {
|
|
|
- window.onresize = function() {
|
|
|
- this.row4.chart1.chartLine.resize()
|
|
|
- }
|
|
|
- }
|
|
|
- },
|
|
|
-
|
|
|
- // 混料实际重量统计
|
|
|
- getChart7() {
|
|
|
- this.row4.chart2.listLoading = true
|
|
|
- GetReportform(this.row4.chart2.getdataListParm).then(response => {
|
|
|
- if (response.data !== null && response.data.list !== null) {
|
|
|
- console.log('混料实际重量统计数据', response.data.list)
|
|
|
- for (let i = 0; i < response.data.data.length; i++) {
|
|
|
- if (response.data.data[i].field1 !== '' && response.data.data[i].field1 !== undefined) {
|
|
|
- response.data.data[i].field1 = parseFloat(response.data.data[i].field1)
|
|
|
- }
|
|
|
- }
|
|
|
- this.row4.chart2.table.list = response.data.data
|
|
|
- this.row4.chart2.chartLine_data = response.data.list
|
|
|
- this.row4.chart2.total = response.data.total
|
|
|
- } else {
|
|
|
- this.row4.chart2.list = []
|
|
|
- this.row4.chart2.chartLine_data = []
|
|
|
- this.row4.chart2.chartLine_data.data1 = []
|
|
|
- }
|
|
|
- if (this.row4.chart2.chartLine_data.data1.length == 0) {
|
|
|
- this.row4.chart2.chartLine_data.title = '暂无数据'
|
|
|
- } else {
|
|
|
- this.row4.chart2.chartLine_data.title = ''
|
|
|
- }
|
|
|
- this.roadChartLine7(this.row4.chart2.chartLine_data)
|
|
|
- setTimeout(() => {
|
|
|
- this.row4.chart2.listLoading = false
|
|
|
- }, 100)
|
|
|
- })
|
|
|
- },
|
|
|
- roadChartLine7(chartLine_data) {
|
|
|
- if (this.row4.chart2.chartLine != null) {
|
|
|
- this.row4.chart2.chartLine.dispose()
|
|
|
- }
|
|
|
- this.row4.chart2.chartLine = echarts.init(document.getElementById('row4chartLine2'))
|
|
|
- var option = {
|
|
|
- title: { text: chartLine_data.title, x: 'center', y: 'center', textStyle: { color: '#909399', fontWeight: 'normal', fontSize: 12 }},
|
|
|
- grid: { left: '10%', right: '10%', bottom: '3%', containLabel: true },
|
|
|
- tooltip: { trigger: 'axis' },
|
|
|
- legend: { data: [''] },
|
|
|
- xAxis: [{ type: 'category', data: chartLine_data.data1, name: '日期' }],
|
|
|
- yAxis: [
|
|
|
- { type: 'value', name: '重量（kg）', axisLabel: { formatter: '{value}' }}
|
|
|
- ],
|
|
|
- series: [{
|
|
|
- name: '重量', type: 'bar', stack: '广告', itemStyle: { normal: { color: '#36C293' }}, data: chartLine_data.data2
|
|
|
- }]
|
|
|
- }
|
|
|
- this.row4.chart2.chartLine.setOption(option)
|
|
|
- if (this.row4.chart2.chartLine != null) {
|
|
|
- window.onresize = function() {
|
|
|
- this.row4.chart2.chartLine.resize()
|
|
|
- }
|
|
|
- }
|
|
|
- },
|
|
|
-
|
|
|
- getTable8() {
|
|
|
- this.row4.table.listLoading = true
|
|
|
- GetDataByName(this.row4.table.getdataListParm).then(response => {
|
|
|
- console.log('库存预警table数据', response.data.list)
|
|
|
- if (response.data.list !== null) {
|
|
|
- this.row4.table.list = response.data.list
|
|
|
- this.row4.table.total = response.data.total
|
|
|
- } else {
|
|
|
- this.row4.table.list = []
|
|
|
- }
|
|
|
- setTimeout(() => {
|
|
|
- this.row4.table.listLoading = false
|
|
|
- }, 100)
|
|
|
- })
|
|
|
- },
|
|
|
- // 更多
|
|
|
- handleMore() {
|
|
|
- // this.$router.push({ path: '/inventoryManagement/Warning' })
|
|
|
- this.$router.push({ name: 'Warning', params: { jmp: 'jmp' }})
|
|
|
- },
|
|
|
- // 导出
|
|
|
- handleExport(item) {
|
|
|
- console.log(item)
|
|
|
- // 计划统计
|
|
|
- if (item == 'row3chartLine1') {
|
|
|
- console.log(this.row3.chart1.table.list)
|
|
|
- var excelDatasTabChart1 = [
|
|
|
- {
|
|
|
- tHeader: ['日期', '计划执行重量（kg）', '配方理论重量（kg）', '计划准确率', '计划取消重量（kg）', '计划准确率（去除取消重量）', '计划正确数', '计划数', '计划正确率'],
|
|
|
- filterVal: ['日期', '实际量', '理论量', 'field1', '计划取消重量', 'field3', '正确数', '计划数', 'field2'],
|
|
|
- tableDatas: this.row3.chart1.table.list,
|
|
|
- sheetName: '计划统计'
|
|
|
- }
|
|
|
- ]
|
|
|
- json2excel(excelDatasTabChart1, '计划统计', true, 'xlsx')
|
|
|
- } else if (item == 'row3chartLine2') {
|
|
|
- // 泌乳牛采食量
|
|
|
- var excelDatasTabChart2 = [
|
|
|
- {
|
|
|
- tHeader: ['日期', '泌乳牛采食量（kg）', '泌乳牛产奶量（kg）'],
|
|
|
- filterVal: ['日期', 'field1', 'field2'],
|
|
|
- tableDatas: this.row3.chart2.table.list,
|
|
|
- sheetName: '泌乳牛采食量'
|
|
|
- }
|
|
|
- ]
|
|
|
- json2excel(excelDatasTabChart2, '泌乳牛采食量', true, 'xlsx')
|
|
|
- } else if (item == 'row4chartLine1') {
|
|
|
- // 成本统计
|
|
|
- console.log('成本统计')
|
|
|
- var excelDatasTabChart2 = [
|
|
|
- {
|
|
|
- tHeader: ['日期', '单头牛饲料成本', '公斤奶饲料成本（元）'],
|
|
|
- filterVal: ['日期', 'field1', 'field2'],
|
|
|
- tableDatas: this.row4.chart1.table.list,
|
|
|
- sheetName: '成本统计'
|
|
|
- }
|
|
|
- ]
|
|
|
- json2excel(excelDatasTabChart2, '成本统计', true, 'xlsx')
|
|
|
- } else if (item == 'row4chartLine2') {
|
|
|
- console.log('混料实际重量统计')
|
|
|
- var excelDatasTabChart4 = [
|
|
|
- {
|
|
|
- tHeader: ['日期', '重量'],
|
|
|
- filterVal: ['日期', 'field1'],
|
|
|
- tableDatas: this.row4.chart2.table.list,
|
|
|
- sheetName: '混料实际重量统计'
|
|
|
- }
|
|
|
- ]
|
|
|
- json2excel(excelDatasTabChart4, '混料实际重量统计', true, 'xlsx')
|
|
|
- }
|
|
|
- },
|
|
|
-
|
|
|
- handleTable(item) {
|
|
|
- console.log(item)
|
|
|
- if (item == 'row3chartLine1') {
|
|
|
- console.log('计划统计表格')
|
|
|
- this.row3.chart1.isTable = true
|
|
|
- this.row3.chart1.isChart = false
|
|
|
- } else if (item == 'row3chartLine2') {
|
|
|
- console.log('泌乳牛采食量表格')
|
|
|
- this.row3.chart2.isTable = true
|
|
|
- this.row3.chart2.isChart = false
|
|
|
- } else if (item == 'row4chartLine1') {
|
|
|
- console.log('成本统计表格')
|
|
|
- this.row4.chart1.isTable = true
|
|
|
- this.row4.chart1.isChart = false
|
|
|
- } else if (item == 'row4chartLine2') {
|
|
|
- console.log('混料实际重量统计表格')
|
|
|
- this.row4.chart2.isTable = true
|
|
|
- this.row4.chart2.isChart = false
|
|
|
- }
|
|
|
- },
|
|
|
- handleChart(item) {
|
|
|
- console.log(item)
|
|
|
- // 显示切换图表
|
|
|
- if (item == 'row3chartLine1') {
|
|
|
- console.log('计划统计图表')
|
|
|
- this.row3.chart1.isTable = false
|
|
|
- this.row3.chart1.isChart = true
|
|
|
- this.getChart4()
|
|
|
- } else if (item == 'row3chartLine2') {
|
|
|
- console.log('泌乳牛采食量图表')
|
|
|
- this.row3.chart2.isTable = false
|
|
|
- this.row3.chart2.isChart = true
|
|
|
- this.getChart5()
|
|
|
- } else if (item == 'row4chartLine1') {
|
|
|
- console.log('成本统计图表')
|
|
|
- this.row4.chart1.isTable = false
|
|
|
- this.row4.chart1.isChart = true
|
|
|
- this.getChart6()
|
|
|
- } else if (item == 'row4chartLine2') {
|
|
|
- console.log('混料实际重量统计图表')
|
|
|
- this.row4.chart2.isTable = false
|
|
|
- this.row4.chart2.isChart = true
|
|
|
- this.getChart7()
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- }
|
|
|
-}
|
|
|
-</script>
|
|
|
-
|
|
|
-<style lang="scss" scoped>
|
|
|
- .Title{
|
|
|
- padding-left: 10px;border-radius: 10px;margin-top: 20px;background: #fff;height:40px;font-size:20px;line-height:40px;text-align: left;font-weight: 600;color:#333333;
|
|
|
- }
|
|
|
- .dashboard-editor-container {
|
|
|
- background-color: #F4F4F4;
|
|
|
- min-height: 100vh;
|
|
|
- .news{
|
|
|
- width: 70%;
|
|
|
- height: 30px;
|
|
|
- background: #fff;
|
|
|
- margin: 0 auto;
|
|
|
- border-radius: 10px;
|
|
|
- text-align: center;
|
|
|
- line-height: 30px;
|
|
|
- color: red;
|
|
|
- b{color: #000;}
|
|
|
- }
|
|
|
-
|
|
|
- .bottom{
|
|
|
- padding:0 30px;
|
|
|
- h4{text-align: right;}
|
|
|
- .grid-content{
|
|
|
- background: #fff;height: 90px;
|
|
|
- border-radius: 10px;
|
|
|
- }
|
|
|
- .one{
|
|
|
- border: 1px solid #82CBB3;height: 90px;
|
|
|
- .Left{
|
|
|
- float: left;
|
|
|
- width: 65px;
|
|
|
- text-align: center;
|
|
|
- i{font-size: 36px;color:#82CBB3;line-height: 90px;}
|
|
|
- }
|
|
|
- .Right{
|
|
|
- float: left;
|
|
|
- margin-top:15px;
|
|
|
- height: 60px;
|
|
|
- font-weight: 600;
|
|
|
- font-size: 14px;
|
|
|
- line-height: 30px;
|
|
|
- span{
|
|
|
- display: inline-block;
|
|
|
- width: 130px;
|
|
|
- text-align: right;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- .two{
|
|
|
- border: 1px solid #FF9900;
|
|
|
- .Left{
|
|
|
- float: left;
|
|
|
- width: 65px;
|
|
|
- text-align: center;
|
|
|
- i{font-size: 36px;color:#FF9900;line-height: 90px;}
|
|
|
- }
|
|
|
- .Right{
|
|
|
- float: left;
|
|
|
- margin-top:15px;
|
|
|
- height: 60px;
|
|
|
- font-weight: 600;
|
|
|
- font-size: 14px;
|
|
|
- line-height: 30px;
|
|
|
- span{
|
|
|
- display: inline-block;
|
|
|
- width: 130px;
|
|
|
- text-align: right;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- .three{
|
|
|
- border: 1px solid #0099FF;
|
|
|
- .Left{
|
|
|
- float: left;
|
|
|
- width: 65px;
|
|
|
- text-align: center;
|
|
|
- i{font-size: 36px;color:#0099FF;line-height: 90px;}
|
|
|
- }
|
|
|
- .Right{
|
|
|
- float: left;
|
|
|
- height: 60px;
|
|
|
- font-weight: 600;
|
|
|
- font-size: 14px;
|
|
|
- line-height: 30px;
|
|
|
- margin-top:15px;
|
|
|
- span{
|
|
|
- display: inline-block;
|
|
|
- width: 130px;
|
|
|
- text-align: right;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- .four{
|
|
|
- border: 1px solid #FF5C5C;
|
|
|
- .Left{
|
|
|
- float: left;
|
|
|
- width: 55px;
|
|
|
- text-align: center;
|
|
|
- i{font-size: 36px;color:#FF5C5C;line-height: 90px;}
|
|
|
- }
|
|
|
- .Right{
|
|
|
- float: left;
|
|
|
- flex: 1;
|
|
|
- height: 60px;
|
|
|
- font-weight: 600;
|
|
|
- font-size: 14px;
|
|
|
- line-height: 30px;
|
|
|
- margin-top:15px;
|
|
|
- span{
|
|
|
- display: inline-block;
|
|
|
- width: 150px;
|
|
|
- text-align: right;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .car{
|
|
|
- width:100%;height:150px;
|
|
|
- display:flex;
|
|
|
- display: -webkit-flex;
|
|
|
- -webkit-flex-direction:row;
|
|
|
- i{font-size: 50px;width:50px;display: block;line-height: 150px;}
|
|
|
- .carList{
|
|
|
- flex:1;height: 130px;
|
|
|
- .list{
|
|
|
- height: 130px;color: #fff;
|
|
|
- // box-shadow: #000 0px 0px 10px;
|
|
|
- // border-radius: 10px;
|
|
|
- .list-l{
|
|
|
- p{
|
|
|
- padding-left:10px;font-size:13px;line-height: 16px; text-overflow: ellipsis;white-space:nowrap; overflow:hidden;
|
|
|
- }
|
|
|
- }
|
|
|
- .list-r{
|
|
|
- p{
|
|
|
- font-size:13px;line-height: 16px;text-overflow: ellipsis;white-space:nowrap; overflow:hidden;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-</style>
|
|
|
-
|
|
|
-<style>
|
|
|
- .app-main{background:#f5f5f5;}
|
|
|
-</style>
|
|
|
-<style lang="scss" scoped>
|
|
|
-
|
|
|
- .dashboard-editor-container{padding-left: 10px;background: #f5f5f5;padding-bottom: 10px;}
|
|
|
- // 公共
|
|
|
- .img-t{position: absolute;left: 0;right: 0;margin: 30px auto;width: 31%;height: 31%;background-size: 100% 100%;}
|
|
|
- .row1-c-l-c{
|
|
|
- margin: 30px auto;border: 1px solid #eee;height: 40%;width: 50%;border-radius: 50%;text-align: center;display:table;
|
|
|
- span{
|
|
|
- height:100%;display:table-cell;vertical-align: middle;font-size:14px;color: #009C69;
|
|
|
- b{padding-bottom: 10px;font-size: 16px;}
|
|
|
- }
|
|
|
- }
|
|
|
- .row1-c-l-b{
|
|
|
- width: 100%;text-align: center;display:table;font-size: 12px;
|
|
|
- // div{
|
|
|
- // font-size: 12px;height:100%;display:table-cell;vertical-align: middle;color: #323232;padding: 0 10px;width: 100%;
|
|
|
- // span{text-align: right;width: 75%;display: block;float: left;}
|
|
|
- // b{float: left;display: block;width: 25%;}
|
|
|
- // }
|
|
|
- }
|
|
|
- .title{
|
|
|
- height: 36px;padding-top: 7px;line-height: 36px;position: relative;
|
|
|
- .img-title{
|
|
|
- position: absolute;top: 10px; right:10px;bottom:0;left:20px;width: 30px;height: 30px;background: url(../../../assets/images/index/row-bg3.png) no-repeat;
|
|
|
- }
|
|
|
- .content{font-size: 18px;position: absolute;top: 7px;left: 55px;}
|
|
|
- }
|
|
|
- .title1{
|
|
|
- height: 36px;padding-top: 7px;line-height: 36px;position: relative;
|
|
|
-
|
|
|
- .img-title{
|
|
|
- position: absolute;top: 10px; right:10px;bottom:0;left:10px;
|
|
|
- width: 25px;height: 25px;
|
|
|
- img{width: 25px;height: 25px;}
|
|
|
- }
|
|
|
- .content{font-size: 16px;position: absolute;top: 7px;left: 40px;}
|
|
|
- }
|
|
|
- .button{
|
|
|
- height: 30px;
|
|
|
- .exportTable{float: right;margin-right: 5px;}
|
|
|
- }
|
|
|
- .dashboard{
|
|
|
- display: flex;margin-top: 10px;
|
|
|
- .dashboard-l{
|
|
|
- // width: 540px;
|
|
|
- width: 30%;
|
|
|
- .row1{
|
|
|
- height: 520px;
|
|
|
- .row1-t{
|
|
|
- background: #fff; height: 50px; color: #f28b46;
|
|
|
- .row1-t-l{
|
|
|
- .img-l{float:left;padding: 16px 10px 16px 20px;width: 18px;height: 18px;background: url(../../../assets/images/index/row-bg2.png) no-repeat;background-position: 0 8px;}
|
|
|
- .content{float:left;width: 54%;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;font-size: 14px;line-height: 50px;padding-left: 3px;}
|
|
|
- .img-r{float:left;padding: 16px 0 16px 17px;width: 30px;height: 15px;background: url(../../../assets/images/index/row-bg2.png) no-repeat;background-position: 0 -24px;}
|
|
|
- }
|
|
|
- .row1-t-r{padding-right: 20px;text-align: right;line-height: 50px;}
|
|
|
- }
|
|
|
-
|
|
|
- .row1-c{
|
|
|
- display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between;margin-top: 10px;
|
|
|
- .row1-c-l{
|
|
|
- background: #fff;width:49%;height:225px;border-radius:3px;margin-right: 1%;position: relative;
|
|
|
- .img-t{width:49%;height:38%;background: url(../../../assets/images/index/t1.png) no-repeat; background-size: 100% 100%;}
|
|
|
- }
|
|
|
- .row1-c-r{
|
|
|
- background: #fff;width:49%;height:225px;border-radius:3px;position: relative;
|
|
|
- .img-t{width:49%;height:38%;background: url(../../../assets/images/index/t2.png) no-repeat; background-size: 100% 100%;}
|
|
|
- }
|
|
|
- }
|
|
|
- .row1-b{
|
|
|
- display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between;margin-top: 10px;
|
|
|
- .row1-b-l{
|
|
|
- background: #fff;width:49%;height:225px;border-radius:3px;margin-right:1%;position: relative;
|
|
|
- .img-t{width:49%;height:38%;background: url(../../../assets/images/index/t4.png) no-repeat; background-size: 100% 100%;}
|
|
|
- }
|
|
|
- .row1-b-r{
|
|
|
- background: #fff;width:49%;height:225px;border-radius:3px;position: relative;
|
|
|
- .img-t{width:49%;height:38%;background: url(../../../assets/images/index/t3.png) no-repeat; background-size: 100% 100%;}
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .row2{
|
|
|
- margin-top:10px;height: 375px;background: #fff;
|
|
|
- .img-title{background-position: 0 0;}
|
|
|
- .todayPlan{
|
|
|
- display: flex; flex-direction: row;margin-top: 10px;
|
|
|
- div{
|
|
|
- flex: 1;position: relative;
|
|
|
- .bottom{
|
|
|
- width: 99%;height: 70px;background: #f9f9f9;margin: 30px auto 5px;display: flex; flex-direction: row;text-align: center;
|
|
|
- div{
|
|
|
- flex: 1;height: 42px;color: #333333;
|
|
|
- }
|
|
|
- .bottom-l{
|
|
|
- border-right: 1px solid #e0e0e0;margin-top: 15px;width: 100%;
|
|
|
- .bottom-l-t{
|
|
|
- height: 30px;
|
|
|
- b{font-size: 18px;}
|
|
|
- }
|
|
|
- .bottom-l-b{font-size: 12px;}
|
|
|
- }
|
|
|
- .bottom-r{
|
|
|
- margin-top: 15px;width: 100%;
|
|
|
- .bottom-r-t{height: 30px;padding-left: 10px;}
|
|
|
- .bottom-r-b{padding-left: 10px;font-size: 12px;}
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- .row3{
|
|
|
- margin-top:10px;height: 375px;background: #fff;
|
|
|
- .img-title{background-position: 0 -90px;}
|
|
|
- }
|
|
|
- }
|
|
|
- .dashboard-r{
|
|
|
- margin-left: 10px;flex:1;
|
|
|
- .row1{
|
|
|
- height: 520px;background: #fff;
|
|
|
- .img-title{background-position: 0 -240px;}
|
|
|
- #row2chartLine3{height: 270px;margin-top: 10px;}
|
|
|
- .carsLength{
|
|
|
- padding: 13px 0 0 22px;line-height: 38px;font-size: 18px;font-weight: 700;
|
|
|
- }
|
|
|
- .car{
|
|
|
- height: 140px;position: relative;
|
|
|
- .iconLeft{width:32px;height:32px;position:absolute;top:46px;left:15px; z-index:1;}
|
|
|
- .iconRight{width:32px;height:32px;position:absolute;top:46px;right: 20px ;z-index:1;}
|
|
|
- .carList{
|
|
|
- padding:0 30px;height: 120px;overflow: hidden;display: flex;
|
|
|
- .listW{
|
|
|
- background: #f3f9f7;
|
|
|
- float: left;
|
|
|
- // flex: 1 1;
|
|
|
- margin: 0 5px;position: relative;width: 50%;
|
|
|
- .list{
|
|
|
- width: 100%;height: 100%;border-radius: 5px;border:1px solid #000;
|
|
|
- .list-t{
|
|
|
- display: flex;border-bottom: 1px solid #f1f1f1;
|
|
|
- .list-t-t{
|
|
|
- flex: 1 1;width: 0;font-size: 12px;line-height: 22px;padding: 25px 5px 15px;text-align: center;
|
|
|
- span{ display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
|
|
|
- }
|
|
|
- }
|
|
|
- .list-b{
|
|
|
- display: flex; text-align: center;margin-top: 14px;color: #323232;
|
|
|
- .list-b-l{
|
|
|
- flex: 1;width: 0; height: 40px; position: relative;
|
|
|
- .left{
|
|
|
- .num{
|
|
|
- font-size: 12px;
|
|
|
- b{font-size: 12px;}
|
|
|
- }
|
|
|
- .weight{font-size: 12px;}
|
|
|
- }
|
|
|
- .right{
|
|
|
- height: 30px;width: 1px;background: #e0e0e0;position: absolute;right: 0;top: 0;bottom: 0;margin-top:auto;margin-bottom:auto
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- .img-checked{width: 30px;height: 28px;position: absolute;top: 0;right: 0;background: url(../../../assets/images/index/row-r6.png);}
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .row2{
|
|
|
- margin-top:10px;height: 375px;
|
|
|
- display: flex; flex-direction: row;
|
|
|
- .row2-l{
|
|
|
- margin-right: 10px; background: #fff;height:375px;border-radius:3px;flex: 1;
|
|
|
- .img-title{background-position: 0 -30px;}
|
|
|
- }
|
|
|
- .row2-r{
|
|
|
- background: #fff;height:375px;border-radius:3px;flex: 1;
|
|
|
- .img-title{background-position: 0 -60px;}
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .row3{
|
|
|
- margin-top:10px;height: 375px;
|
|
|
- display: flex; flex-direction: row;
|
|
|
- .row3-l{
|
|
|
- margin-right: 10px; background: #fff;height:375px;border-radius:3px;flex: 1;
|
|
|
- .img-title{background-position: 0 -120px;}
|
|
|
- }
|
|
|
- .row3-r{
|
|
|
- background: #fff;height:375px;border-radius:3px;flex: 1;
|
|
|
- .img-title{background-position: 0 -150px;}
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- }
|
|
|
- }
|
|
|
-</style>
|
|
|
+<template>
|
|
|
+ <div ref="dashboardEditor" class="dashboard-editor-container">
|
|
|
+ <div class="dashboard" style="margin-bottom: 10px;">
|
|
|
+ <div class="dashboard-l">
|
|
|
+ <div class="row1">
|
|
|
+ <div class="row1-t">
|
|
|
+ <div class="row1-t-l">
|
|
|
+ <div class="img-l" />
|
|
|
+ <span class="content">暂无消息通知</span>
|
|
|
+ <!-- <div class="img-r" /> -->
|
|
|
+ </div>
|
|
|
+ <div class="row1-t-r">{{ date }}</div>
|
|
|
+ </div>
|
|
|
+ <div class="row1-c">
|
|
|
+ <div class="row1-c-l">
|
|
|
+ <div class="title1">
|
|
|
+ <div class="img-title">
|
|
|
+ <img src="../../../assets/images/index/l1.png">
|
|
|
+ </div>
|
|
|
+ <span class="content">混料准确率</span>
|
|
|
+ </div>
|
|
|
+ <div class="row1-c-l-c">
|
|
|
+ <span>
|
|
|
+ <b>{{ row1.list.yesRateHL }}</b>
|
|
|
+ <br>昨日
|
|
|
+ </span>
|
|
|
+ </div>
|
|
|
+ <div class="row1-c-l-b">
|
|
|
+ <div><span>近30天混料准确率：</span><b>{{ row1.list.monRateHL }}</b></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="row1-c-r">
|
|
|
+ <div class="title1">
|
|
|
+ <div class="img-title">
|
|
|
+ <img src="../../../assets/images/index/l4.png">
|
|
|
+ </div>
|
|
|
+ <span class="content">撒料准确率</span>
|
|
|
+ </div>
|
|
|
+ <div class="row1-c-l-c">
|
|
|
+ <span>
|
|
|
+ <b>{{ row1.list.yesRateSL }}</b>
|
|
|
+ <br>昨日
|
|
|
+ </span>
|
|
|
+ </div>
|
|
|
+ <div class="row1-c-l-b">
|
|
|
+ <div><span>近30天撒料准确率：</span><b>{{ row1.list.monRateSL }}</b></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="row1-b">
|
|
|
+ <div class="row1-b-l">
|
|
|
+ <div class="title1">
|
|
|
+ <div class="img-title">
|
|
|
+ <img src="../../../assets/images/index/l3.png">
|
|
|
+ </div>
|
|
|
+ <span class="content">撒料正确率</span>
|
|
|
+ </div>
|
|
|
+ <div class="row1-c-l-c">
|
|
|
+ <span>
|
|
|
+ <b>{{ row1.list.yesRateSLR }}</b>
|
|
|
+ <br>昨日
|
|
|
+ </span>
|
|
|
+ </div>
|
|
|
+ <div class="row1-c-l-b">
|
|
|
+ <div><span>近30天撒料正确率：</span><b>{{ row1.list.monRateSLR }}</b></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="row1-b-r">
|
|
|
+ <div class="title1">
|
|
|
+ <div class="img-title">
|
|
|
+ <img src="../../../assets/images/index/l2.png">
|
|
|
+ </div>
|
|
|
+ <span class="content">撒料偏差</span>
|
|
|
+ </div>
|
|
|
+ <div class="row1-c-l-c">
|
|
|
+ <span>
|
|
|
+ <b>{{ row1.list.temtime }}</b>
|
|
|
+ <br>昨日
|
|
|
+ </span>
|
|
|
+ </div>
|
|
|
+ <div class="row1-c-l-b">
|
|
|
+ <div><span>近30天撒料偏差：</span><b>{{ row1.list.montime }}</b>分钟</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="row2">
|
|
|
+ <div class="title">
|
|
|
+ <div class="img-title" />
|
|
|
+ <span class="content">今日计划统计</span>
|
|
|
+ </div>
|
|
|
+ <div class="todayPlan">
|
|
|
+ <div>
|
|
|
+ <div id="row2chartLine1" style="height: 185px;" />
|
|
|
+ <div class="bottom">
|
|
|
+ <div class="bottom-l">
|
|
|
+ <div class="bottom-l-t">
|
|
|
+ <b>{{ row2.chart1.chartLine_data.data1 }}</b>次
|
|
|
+ </div>
|
|
|
+ <div class="bottom-l-b">
|
|
|
+ 完成车次
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="bottom-r">
|
|
|
+ <div class="bottom-r-t">
|
|
|
+ <b>{{ row2.chart1.chartLine_data.data2 }}</b>次
|
|
|
+ </div>
|
|
|
+ <div class="bottom-r-b">
|
|
|
+ 计划车次
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <div id="row2chartLine2" style="height: 185px;" />
|
|
|
+ <div class="bottom">
|
|
|
+ <div class="bottom-l">
|
|
|
+ <div class="bottom-l-t">
|
|
|
+ <b>{{ row2.chart2.chartLine_data.data1 }}</b>kg
|
|
|
+ </div>
|
|
|
+ <div class="bottom-l-b">
|
|
|
+ 完成重量
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="bottom-r">
|
|
|
+ <div class="bottom-r-t">
|
|
|
+ <b>{{ row2.chart2.chartLine_data.data2 }}</b>kg
|
|
|
+ </div>
|
|
|
+ <div class="bottom-r-b">
|
|
|
+ 计划重量
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="row3" style="position: relative;">
|
|
|
+ <div class="title">
|
|
|
+ <div class="img-title" />
|
|
|
+ <span class="content">成本统计</span>
|
|
|
+ </div>
|
|
|
+ <div v-if="row4.chart1.isChart" class="button">
|
|
|
+ <div class="exportTable" @click="handleExport('row4chartLine1')">导出</div>
|
|
|
+ <div class="exportTable" @click="handleTable('row4chartLine1')">切换表格</div>
|
|
|
+ </div>
|
|
|
+ <div v-if="row4.chart1.isChart" id="row4chartLine1" v-loading="row4.chart1.listLoading" style="background: #fff;height:310px;" />
|
|
|
+ <div v-if="row4.chart1.isTable" class="table" style="position: absolute;width: 100%;">
|
|
|
+ <div class="button">
|
|
|
+ <div class="exportTable" @click="handleExport('row4chartLine1')">导出</div>
|
|
|
+ <div class="exportTable" @click="handleChart('row4chartLine1')">切换图表</div>
|
|
|
+ </div>
|
|
|
+ <el-table
|
|
|
+ :key="row4.chart1.table.tableKey"
|
|
|
+ v-loading="row4.chart1.table.listLoading"
|
|
|
+ element-loading-text="给我一点时间"
|
|
|
+ :data="row4.chart1.table.list"
|
|
|
+ border
|
|
|
+ fit
|
|
|
+ highlight-current-row
|
|
|
+ style="width: 100%;margin-top: 10px;"
|
|
|
+ height="300"
|
|
|
+ :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="field2" />
|
|
|
+ <el-table-column label="公斤奶饲料成本（元）" sortable min-width="120px" align="center" prop="field1" />
|
|
|
+ </el-table>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="dashboard-r">
|
|
|
+ <div class="row1">
|
|
|
+ <div class="title">
|
|
|
+ <div class="img-title" />
|
|
|
+ <span class="content">实时监控</span>
|
|
|
+ </div>
|
|
|
+ <div v-if="carLength>0" id="row2chartLine3" ref="row2chartLine3" style="height: 260px;" />
|
|
|
+ <div v-else style="height: 260px;text-align: center;line-height: 260px;">当前无正在进行中车次 </div>
|
|
|
+ <div class="carsLength">当前车辆：<span>{{ carLength }}</span></div>
|
|
|
+ <div id="car" ref="car" v-loading="row2.chart3.listLoading2" class="car">
|
|
|
+ <div ref="iconLeft" class="iconLeft" @click="handleLeft">
|
|
|
+ <img v-if="row2.chart3.isLeft" src="../../../assets/images/index/row-r3.png" class="img-title">
|
|
|
+ <img v-if="row2.chart3.isLeftA" src="../../../assets/images/index/row-r2.png" class="img-title">
|
|
|
+ </div>
|
|
|
+ <div id="carList" ref="carList" class="carList">
|
|
|
+ <div v-for="(item,index) in list" ref="listW" :key="index" class="listW">
|
|
|
+ <div ref="list" class="list" :style="{'background': item.background,'color':item.color,'borderColor':item.borderColor}" @click="handleList(index,item)">
|
|
|
+ <div class="list-t">
|
|
|
+ <div class="list-t-t">
|
|
|
+ <el-tooltip :content="item.tname" placement="top">
|
|
|
+ <span>车辆：{{ item.tname }}</span>
|
|
|
+ </el-tooltip>
|
|
|
+ </div>
|
|
|
+ <div class="list-t-t">
|
|
|
+ <el-tooltip :content="item.fname" placement="top">
|
|
|
+ <span v-if="item.inorout == 0">饲料：{{ item.fname }}</span>
|
|
|
+ <span v-if="item.inorout == 1">栏舍：{{ item.fname }}</span>
|
|
|
+ </el-tooltip>
|
|
|
+ </div>
|
|
|
+ <div class="list-t-t">
|
|
|
+ <el-tooltip :content="item.remark" placement="top">
|
|
|
+ <span>描述：{{ item.remark }}</span>
|
|
|
+ </el-tooltip>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="list-b">
|
|
|
+ <div class="list-b-l">
|
|
|
+ <div class="left">
|
|
|
+ <div class="num"><b>{{ item.doneweight }}</b>Kg</div>
|
|
|
+ <div class="weight">完成重量</div>
|
|
|
+ </div>
|
|
|
+ <div class="right" />
|
|
|
+ </div>
|
|
|
+ <div class="list-b-l">
|
|
|
+ <div class="left">
|
|
|
+ <div class="num"><b>{{ item.leftweight }}</b>Kg</div>
|
|
|
+ <div class="weight">剩余重量</div>
|
|
|
+ </div>
|
|
|
+ <div class="right" />
|
|
|
+ </div>
|
|
|
+ <div class="list-b-l">
|
|
|
+ <div class="left">
|
|
|
+ <div class="num"><b>{{ item.nowweight }}</b>Kg</div>
|
|
|
+ <div class="weight">车辆当前载重</div>
|
|
|
+ </div>
|
|
|
+ <div class="right" />
|
|
|
+ </div>
|
|
|
+ <div class="list-b-l">
|
|
|
+ <div class="left">
|
|
|
+ <div class="num"><b>{{ item.lweight }}</b>Kg</div>
|
|
|
+ <div class="weight">计划重量</div>
|
|
|
+ </div>
|
|
|
+ <div class="right" />
|
|
|
+ </div>
|
|
|
+ <div class="list-b-l">
|
|
|
+ <div class="left">
|
|
|
+ <div class="num"><b>{{ item.donerate }}</b></div>
|
|
|
+ <div class="weight">完成度</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div v-if="item.isChecked" ref="checked" class="img-checked" />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div ref="iconRight" class="iconRight" @click="handleRight">
|
|
|
+ <img v-if="row2.chart3.isRightA" src="../../../assets/images/index/row-r5.png" class="img-title">
|
|
|
+ <img v-if="row2.chart3.isRight" src="../../../assets/images/index/row-r4.png" class="img-title">
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ </div>
|
|
|
+ <div class="row2">
|
|
|
+ <div class="row2-l" style="position: relative;">
|
|
|
+ <div class="title">
|
|
|
+ <div class="img-title" />
|
|
|
+ <span class="content">计划统计</span>
|
|
|
+ </div>
|
|
|
+ <div v-if="row3.chart1.isChart" class="button">
|
|
|
+ <div class="exportTable" @click="handleExport('row3chartLine1')">导出</div>
|
|
|
+ <div class="exportTable" @click="handleTable('row3chartLine1')">切换表格</div>
|
|
|
+ </div>
|
|
|
+ <div v-if="row3.chart1.isChart" id="row3chartLine1" v-loading="row3.chart1.listLoading" style="background: #fff;height:310px;" />
|
|
|
+ <div v-if="row3.chart1.isTable" class="table" style="position: absolute;width: 100%;">
|
|
|
+ <div class="button">
|
|
|
+ <div class="exportTable" @click="handleExport('row3chartLine1')">导出</div>
|
|
|
+ <div class="exportTable" @click="handleChart('row3chartLine1')">切换图表</div>
|
|
|
+ </div>
|
|
|
+ <el-table
|
|
|
+ :key="row3.chart1.table.tableKey"
|
|
|
+ v-loading="row3.chart1.table.listLoading"
|
|
|
+ element-loading-text="给我一点时间"
|
|
|
+ :data="row3.chart1.table.list"
|
|
|
+ border
|
|
|
+ fit
|
|
|
+ highlight-current-row
|
|
|
+ style="width: 100%;margin-top: 10px;"
|
|
|
+ height="300"
|
|
|
+ :row-style="rowStyle"
|
|
|
+ :cell-style="cellStyle"
|
|
|
+ class="elTable table-fixed"
|
|
|
+ >
|
|
|
+ <el-table-column label="日期" sortable min-width="85px" align="center" prop="日期" />
|
|
|
+ <el-table-column label="计划执行重量(kg)" sortable min-width="90px" align="center" prop="实际量" />
|
|
|
+ <el-table-column label="配方理论重量(kg)" sortable min-width="90px" align="center" prop="理论量" />
|
|
|
+ <el-table-column label="计划准确率" sortable min-width="85px" align="center" prop="field1" />
|
|
|
+ <el-table-column label="计划取消重量(kg)" sortable min-width="90px" align="center" prop="计划取消重量" />
|
|
|
+ <el-table-column label="计划准确率(去除取消重量)" sortable min-width="100px" align="center" prop="field3" />
|
|
|
+ <el-table-column label="计划正确数" sortable min-width="85px" align="center" prop="正确数" />
|
|
|
+ <el-table-column label="计划数" sortable min-width="85px" align="center" prop="计划数" />
|
|
|
+ <el-table-column label="计划正确率" sortable min-width="75px" align="center" prop="field2" />
|
|
|
+ </el-table>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="row2-r" style="position: relative;">
|
|
|
+
|
|
|
+ <div class="title">
|
|
|
+ <div class="img-title" />
|
|
|
+ <span class="content">混料实际重量统计</span>
|
|
|
+ </div>
|
|
|
+ <div v-if="row4.chart2.isChart" class="button">
|
|
|
+ <div class="exportTable" @click="handleExport('row4chartLine2')">导出</div>
|
|
|
+ <div class="exportTable" @click="handleTable('row4chartLine2')">切换表格</div>
|
|
|
+ </div>
|
|
|
+ <div v-if="row4.chart2.isChart" id="row4chartLine2" v-loading="row4.chart2.listLoading" style="background: #fff;height:310px;" />
|
|
|
+ <div v-if="row4.chart2.isTable" class="table" style="position: absolute;width:100%;">
|
|
|
+ <div class="button">
|
|
|
+ <div class="exportTable" @click="handleExport('row4chartLine2')">导出</div>
|
|
|
+ <div class="exportTable" @click="handleChart('row4chartLine2')">切换图表</div>
|
|
|
+ </div>
|
|
|
+ <el-table
|
|
|
+ :key="row4.chart2.table.tableKey"
|
|
|
+ v-loading="row4.chart2.table.listLoading"
|
|
|
+ element-loading-text="给我一点时间"
|
|
|
+ :data="row4.chart2.table.list"
|
|
|
+ border
|
|
|
+ fit
|
|
|
+ highlight-current-row
|
|
|
+ style="width: 100%;margin-top: 10px;"
|
|
|
+ height="300"
|
|
|
+ :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="field1" />
|
|
|
+ </el-table>
|
|
|
+ </div>
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ </div>
|
|
|
+
|
|
|
+ </div>
|
|
|
+ <div class="row3">
|
|
|
+ <div class="row3-l" style="position: relative;">
|
|
|
+
|
|
|
+ <div class="title">
|
|
|
+ <div class="img-title" />
|
|
|
+ <span class="content">泌乳牛干物质采食量</span>
|
|
|
+ </div>
|
|
|
+ <div v-if="row3.chart2.isChart" class="button">
|
|
|
+ <div class="exportTable" @click="handleExport('row3chartLine2')">导出</div>
|
|
|
+ <div class="exportTable" @click="handleTable('row3chartLine2')">切换表格</div>
|
|
|
+ </div>
|
|
|
+ <div v-if="row3.chart2.isChart" id="row3chartLine2" v-loading="row3.chart2.listLoading" style="background: #fff;height:310px;" />
|
|
|
+ <div v-if="row3.chart2.isTable" class="table" style="position: absolute;width: 100%;">
|
|
|
+ <div class="button">
|
|
|
+ <div class="exportTable" @click="handleExport('row3chartLine2')">导出</div>
|
|
|
+ <div class="exportTable" @click="handleChart('row3chartLine2')">切换图表</div>
|
|
|
+ </div>
|
|
|
+ <el-table
|
|
|
+ :key="row3.chart2.table.tableKey"
|
|
|
+ v-loading="row3.chart2.table.listLoading"
|
|
|
+ element-loading-text="给我一点时间"
|
|
|
+ :data="row3.chart2.table.list"
|
|
|
+ border
|
|
|
+ fit
|
|
|
+ highlight-current-row
|
|
|
+ style="width: 100%;margin-top: 10px;"
|
|
|
+ height="300"
|
|
|
+ :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>
|
|
|
+
|
|
|
+ </div>
|
|
|
+ <div class="row3-r">
|
|
|
+ <div class="title">
|
|
|
+ <div class="img-title" />
|
|
|
+ <span class="content">库存预警</span>
|
|
|
+ <a style="float: right;color: #c88d42;font-size: 12px;margin-right: 10px;" @click="handleMore">查看更多 >></a>
|
|
|
+ </div>
|
|
|
+ <div id="table" style="height: 330px;background: #fff;">
|
|
|
+ <el-table
|
|
|
+ :key="row4.table.tableKey"
|
|
|
+ v-loading="row4.table.listLoading"
|
|
|
+ element-loading-text="给我一点时间"
|
|
|
+ :data="row4.table.list"
|
|
|
+ border
|
|
|
+ fit
|
|
|
+ highlight-current-row
|
|
|
+ style="width: 98%;background: #fff;margin-top: 10px;"
|
|
|
+ height="320"
|
|
|
+ :row-style="rowStyle"
|
|
|
+ :cell-style="cellStyle"
|
|
|
+ class="elTable table-fixed"
|
|
|
+ >
|
|
|
+ <el-table-column label="序号" type="index" min-width="80px" align="center" />
|
|
|
+ <el-table-column label="饲料名称" min-width="80px" align="center" prop="feedname" />
|
|
|
+ <el-table-column label="库存量（kg）" min-width="70px" align="center" prop="stockweight" />
|
|
|
+ <el-table-column label="剩余使用天数" min-width="80px" align="center" prop="ldays" />
|
|
|
+ </el-table>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import { GetDataByName, GetReportform } from '@/api/common'
|
|
|
+import Cookies from 'js-cookie'
|
|
|
+import { parseTime } from '@/utils/index.js'
|
|
|
+import echarts from 'echarts'
|
|
|
+import { json2excel } from '@/utils/index.js'
|
|
|
+
|
|
|
+require('echarts/theme/macarons')
|
|
|
+// var myKey = 0
|
|
|
+var that = this
|
|
|
+var carIndex = 0 // 判断是否大于当前车辆数
|
|
|
+var index = 0 // 判断当前跳到第几个车辆
|
|
|
+var timer = null
|
|
|
+export default {
|
|
|
+ name: 'PastureDashboard',
|
|
|
+ inject: ['reload'],
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ val: '这是值1',
|
|
|
+ date: parseTime(new Date(), '{y}-{m}-{d}'),
|
|
|
+ list: [],
|
|
|
+ news: 1,
|
|
|
+ carLength: 0, // 车辆
|
|
|
+ myKey: 0, // 轮播Key值
|
|
|
+ row1: {
|
|
|
+ getdataListParm: {
|
|
|
+ name: 'getHomepageStr',
|
|
|
+ page: 1,
|
|
|
+ offset: 1,
|
|
|
+ pagecount: 10,
|
|
|
+ returntype: 'Map',
|
|
|
+ parammaps: {
|
|
|
+ pastureid: Cookies.get('pastureid')
|
|
|
+ }
|
|
|
+ },
|
|
|
+ listLoading: true,
|
|
|
+ list: ''
|
|
|
+ },
|
|
|
+ row2: {
|
|
|
+ chart1: {
|
|
|
+ chartLine: null,
|
|
|
+ chartLine_data: {}
|
|
|
+ },
|
|
|
+ chart2: {
|
|
|
+ chartLine: null,
|
|
|
+ chartLine_data: {}
|
|
|
+ },
|
|
|
+ chart3: {
|
|
|
+ isLeft: true,
|
|
|
+ isRight: true,
|
|
|
+ chartLine: null,
|
|
|
+ chartLine_data: {},
|
|
|
+ getdataListParm: {
|
|
|
+ name: 'getHomeprocessAnalysis',
|
|
|
+ page: 1,
|
|
|
+ offset: 1,
|
|
|
+ pagecount: 2,
|
|
|
+ returntype: 'Map',
|
|
|
+ parammaps: {
|
|
|
+ pastureid: Cookies.get('pastureid'),
|
|
|
+ id: '',
|
|
|
+ pid: ''
|
|
|
+ }
|
|
|
+ },
|
|
|
+ list: [],
|
|
|
+ total: 0,
|
|
|
+ listLoading: true,
|
|
|
+ pageNum: '',
|
|
|
+ pages: '',
|
|
|
+ getdataListParmList: {
|
|
|
+ name: 'getHomepageLBList',
|
|
|
+ page: 1,
|
|
|
+ offset: 1,
|
|
|
+ pagecount: 2,
|
|
|
+ returntype: 'Map',
|
|
|
+ parammaps: {
|
|
|
+ pastureid: Cookies.get('pastureid')
|
|
|
+ }
|
|
|
+ },
|
|
|
+ list2: [],
|
|
|
+ total2: 0,
|
|
|
+ listLoading2: true,
|
|
|
+ pageNum2: '',
|
|
|
+ pages2: ''
|
|
|
+ }
|
|
|
+ },
|
|
|
+ row3: {
|
|
|
+ chartDate: [],
|
|
|
+ chart1: {
|
|
|
+ chartLine: null,
|
|
|
+ chartLine_data: {},
|
|
|
+ getdataListParm: {
|
|
|
+ name: 'getAccuracyAllJH',
|
|
|
+ page: 1,
|
|
|
+ offset: 1,
|
|
|
+ pagecount: 10,
|
|
|
+ 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()]
|
|
|
+ }
|
|
|
+ },
|
|
|
+ list: [],
|
|
|
+ total: 0,
|
|
|
+ listLoading: true,
|
|
|
+ isChart: true,
|
|
|
+ isTable: false,
|
|
|
+ table: {
|
|
|
+ tableKey: 1,
|
|
|
+ list: [],
|
|
|
+ total: 0,
|
|
|
+ listLoading: false
|
|
|
+ }
|
|
|
+ },
|
|
|
+ chart2: {
|
|
|
+ chartLine: null,
|
|
|
+ chartLine_data: {},
|
|
|
+ getdataListParm: {
|
|
|
+ name: 'getFeedEffMR',
|
|
|
+ page: 1,
|
|
|
+ offset: 1,
|
|
|
+ pagecount: 10,
|
|
|
+ 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()]
|
|
|
+ }
|
|
|
+ },
|
|
|
+ list: [],
|
|
|
+ total: 0,
|
|
|
+ listLoading: true,
|
|
|
+ isChart: true,
|
|
|
+ isTable: false,
|
|
|
+ table: {
|
|
|
+ tableKey: 1,
|
|
|
+ list: [],
|
|
|
+ total: 0,
|
|
|
+ listLoading: false
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ row4: {
|
|
|
+ chartDate: [],
|
|
|
+ chart1: {
|
|
|
+ chartLine: null,
|
|
|
+ chartLine_data: {},
|
|
|
+ getdataListParm: {
|
|
|
+ name: 'getHomepageCB',
|
|
|
+ page: 1,
|
|
|
+ offset: 1,
|
|
|
+ pagecount: 10,
|
|
|
+ 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()]
|
|
|
+ }
|
|
|
+ },
|
|
|
+ list: [],
|
|
|
+ total: 0,
|
|
|
+ listLoading: true,
|
|
|
+ isChart: true,
|
|
|
+ isTable: false,
|
|
|
+ table: {
|
|
|
+ tableKey: 1,
|
|
|
+ list: [],
|
|
|
+ total: 0,
|
|
|
+ listLoading: false
|
|
|
+ }
|
|
|
+ },
|
|
|
+ chart2: {
|
|
|
+ chartLine: null,
|
|
|
+ chartLine_data: {},
|
|
|
+ getdataListParm: {
|
|
|
+ name: 'getAccuraaActHL',
|
|
|
+ page: 1,
|
|
|
+ offset: 1,
|
|
|
+ pagecount: 10,
|
|
|
+ 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()]
|
|
|
+ }
|
|
|
+ },
|
|
|
+ list: [],
|
|
|
+ total: 0,
|
|
|
+ listLoading: true,
|
|
|
+ isChart: true,
|
|
|
+ isTable: false,
|
|
|
+ table: {
|
|
|
+ tableKey: 1,
|
|
|
+ list: [],
|
|
|
+ total: 0,
|
|
|
+ listLoading: false
|
|
|
+ }
|
|
|
+ },
|
|
|
+ table: {
|
|
|
+ getdataListParm: {
|
|
|
+ name: 'getFsWarnList',
|
|
|
+ page: 1,
|
|
|
+ offset: 1,
|
|
|
+ pagecount: 5,
|
|
|
+ returntype: 'Map',
|
|
|
+ parammaps: {
|
|
|
+ pastureid: Cookies.get('pastureid')
|
|
|
+ }
|
|
|
+ },
|
|
|
+ tableKey: 1,
|
|
|
+ list: [],
|
|
|
+ total: 0,
|
|
|
+ listLoading: true,
|
|
|
+ temp: {}
|
|
|
+ }
|
|
|
+ },
|
|
|
+ rowStyle: { maxHeight: 30 + 'px', height: 30 + 'px' },
|
|
|
+ cellStyle: { padding: 0 + 'px' },
|
|
|
+ timer: null,
|
|
|
+ clickKey: 0,
|
|
|
+ isClick: false
|
|
|
+ }
|
|
|
+ },
|
|
|
+ watch: {
|
|
|
+ isClick: {
|
|
|
+ handler(newName, oldName) {
|
|
|
+ if (newName == true) {
|
|
|
+ setTimeout(() => {
|
|
|
+ this.timer = setInterval(this.autoPlay, 15000)
|
|
|
+ }, 20000)
|
|
|
+ }
|
|
|
+ },
|
|
|
+ immediate: true
|
|
|
+ }
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ // this.reload()
|
|
|
+ this.getCarLength()
|
|
|
+ this.getChart3List()
|
|
|
+ this.getTimeFn()
|
|
|
+ this.getList()
|
|
|
+
|
|
|
+ this.getChart4()
|
|
|
+ this.getChart5()
|
|
|
+ this.getChart6()
|
|
|
+ this.getChart7()
|
|
|
+ this.getTable8()
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ this.timer = null
|
|
|
+ this.timer = setInterval(this.autoPlay, 15000)
|
|
|
+ },
|
|
|
+ destroyed() {
|
|
|
+ clearInterval(this.timer)
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ getTimeFn() {
|
|
|
+ // this.reload()
|
|
|
+ const that = this
|
|
|
+ const end = new Date()
|
|
|
+ const start = new Date()
|
|
|
+ start.setTime(start.getTime() - 3600 * 1000 * 24 * 20)
|
|
|
+ that.row3.chartDate[0] = parseTime(start, '{y}-{m}-{d}')
|
|
|
+ that.row3.chartDate[1] = parseTime(end, '{y}-{m}-{d}')
|
|
|
+ that.row3.chart1.getdataListParm.parammaps.inputDatetime[0] = parseTime(start, '{y}-{m}-{d}')
|
|
|
+ that.row3.chart1.getdataListParm.parammaps.inputDatetime[1] = parseTime(end, '{y}-{m}-{d}')
|
|
|
+ that.row3.chart1.getdataListParm.parammaps.startTime = parseTime(start, '{y}-{m}-{d}')
|
|
|
+ that.row3.chart1.getdataListParm.parammaps.stopTime = parseTime(end, '{y}-{m}-{d}')
|
|
|
+
|
|
|
+ that.row3.chart2.getdataListParm.parammaps.inputDatetime[0] = parseTime(start, '{y}-{m}-{d}')
|
|
|
+ that.row3.chart2.getdataListParm.parammaps.inputDatetime[1] = parseTime(end, '{y}-{m}-{d}')
|
|
|
+ that.row3.chart2.getdataListParm.parammaps.startTime = parseTime(start, '{y}-{m}-{d}')
|
|
|
+ that.row3.chart2.getdataListParm.parammaps.stopTime = parseTime(end, '{y}-{m}-{d}')
|
|
|
+
|
|
|
+ that.row4.chartDate[0] = parseTime(start, '{y}-{m}-{d}')
|
|
|
+ that.row4.chartDate[1] = parseTime(end, '{y}-{m}-{d}')
|
|
|
+ that.row4.chart1.getdataListParm.parammaps.inputDatetime[0] = parseTime(start, '{y}-{m}-{d}')
|
|
|
+ that.row4.chart1.getdataListParm.parammaps.inputDatetime[1] = parseTime(end, '{y}-{m}-{d}')
|
|
|
+ that.row4.chart1.getdataListParm.parammaps.startTime = parseTime(start, '{y}-{m}-{d}')
|
|
|
+ that.row4.chart1.getdataListParm.parammaps.stopTime = parseTime(end, '{y}-{m}-{d}')
|
|
|
+
|
|
|
+ that.row4.chart2.getdataListParm.parammaps.inputDatetime[0] = parseTime(start, '{y}-{m}-{d}')
|
|
|
+ that.row4.chart2.getdataListParm.parammaps.inputDatetime[1] = parseTime(end, '{y}-{m}-{d}')
|
|
|
+ that.row4.chart2.getdataListParm.parammaps.startTime = parseTime(start, '{y}-{m}-{d}')
|
|
|
+ that.row4.chart2.getdataListParm.parammaps.stopTime = parseTime(end, '{y}-{m}-{d}')
|
|
|
+ },
|
|
|
+ getList() {
|
|
|
+ this.row1.listLoading = true
|
|
|
+ GetDataByName(this.row1.getdataListParm).then(response => {
|
|
|
+ if (response.data !== null && response.data.list !== null) {
|
|
|
+ console.log('row1数据', response.data.list)
|
|
|
+ if (response.data.list[0].monRateHL == undefined) { response.data.list[0].monRateHL = '' }
|
|
|
+ if (response.data.list[0].monRateSL == undefined) { response.data.list[0].monRateSL = '' }
|
|
|
+ if (response.data.list[0].monRateSLR == undefined) { response.data.list[0].monRateSLR = '' }
|
|
|
+ if (response.data.list[0].yesRateHL == undefined) { response.data.list[0].yesRateHL = '' }
|
|
|
+ if (response.data.list[0].yesRateHL == undefined) { response.data.list[0].yesRateHL = '' }
|
|
|
+ if (response.data.list[0].yesRateSL == undefined) { response.data.list[0].yesRateSL = '' }
|
|
|
+ if (response.data.list[0].yesRateSLR == undefined) { response.data.list[0].yesRateSLR = '' }
|
|
|
+ if (response.data.list[0].temtime == undefined) { response.data.list[0].temtime = '' }
|
|
|
+ if (response.data.list[0].montime == undefined) { response.data.list[0].montime = '' }
|
|
|
+ this.row1.list = response.data.list[0]
|
|
|
+ this.row2.chart1.chartLine_data.data1 = parseFloat(response.data.list[0].doneTimes)
|
|
|
+ this.row2.chart1.chartLine_data.data2 = parseFloat(response.data.list[0].planTimes)
|
|
|
+ this.row2.chart2.chartLine_data.data1 = parseFloat(response.data.list[0].doneWeight)
|
|
|
+ this.row2.chart2.chartLine_data.data2 = parseFloat(response.data.list[0].planWeight)
|
|
|
+
|
|
|
+ this.roadChartLine1(this.row2.chart1.chartLine_data)
|
|
|
+ this.roadChartLine2(this.row2.chart2.chartLine_data)
|
|
|
+ } else {
|
|
|
+ this.row1.list.data1.monRateHL = ''
|
|
|
+ this.row1.list.data1.monRateSL = ''
|
|
|
+ this.row1.list.data1.monRateSLR = ''
|
|
|
+ this.row1.list.data1.yesRateHL = ''
|
|
|
+ this.row1.list.data1.yesRateSL = ''
|
|
|
+ this.row1.list.data1.yesRateSLR = ''
|
|
|
+ this.row1.list.data1.temtime = ''
|
|
|
+ this.row1.list.data1.montime = ''
|
|
|
+ this.row2.chart1.chartLine_data.data1 = ''
|
|
|
+ this.row2.chart1.chartLine_data.data2 = ''
|
|
|
+ this.row2.chart2.chartLine_data.data1 = ''
|
|
|
+ this.row2.chart2.chartLine_data.data2 = ''
|
|
|
+ }
|
|
|
+ setTimeout(() => {
|
|
|
+ this.row1.listLoading = false
|
|
|
+ }, 100)
|
|
|
+ })
|
|
|
+ },
|
|
|
+ // 今日计划统计-完成车次
|
|
|
+ roadChartLine1(chartLine_data) {
|
|
|
+ console.log('chartLine_data', chartLine_data)
|
|
|
+ if (this.row2.chart1.chartLine != null) {
|
|
|
+ this.row2.chart1.chartLine.dispose()
|
|
|
+ }
|
|
|
+ this.row2.chart1.chartLine = echarts.init(document.getElementById('row2chartLine1'))
|
|
|
+ if (chartLine_data.data2 == 0 || chartLine_data.data1 == 0) {
|
|
|
+ chartLine_data.data1 = 0
|
|
|
+ chartLine_data.data2 = 100
|
|
|
+ }
|
|
|
+ var option = {
|
|
|
+ title: { show: true, x: 'center', textStyle: { fontSize: '15', color: 'green', fontWeight: 'bold' }},
|
|
|
+ tooltip: { show: false, trigger: 'item', formatter: '{a} <br/>{b}: {c} ({d}%)' },
|
|
|
+ color: ['#1bbe89', '#e4e7ec'],
|
|
|
+ series: [{
|
|
|
+ name: '任务进度', type: 'pie', radius: ['80%', '70%'], avoidLabelOverlap: false, hoverAnimation: false, labelLine: { normal: { show: false }},
|
|
|
+ data: [{
|
|
|
+ value: chartLine_data.data1, name: '车次完成率', selected: false, // 单个扇区的标签配置
|
|
|
+ label: { normal: { show: true, position: 'center', fontSize: 20, formatter: '{b}\n{d}%' }}
|
|
|
+ }, {
|
|
|
+ value: chartLine_data.data2 - chartLine_data.data1,
|
|
|
+ label: { normal: { show: false }
|
|
|
+ }
|
|
|
+ }]
|
|
|
+ }]
|
|
|
+ }
|
|
|
+ this.row2.chart1.chartLine.setOption(option)
|
|
|
+ if (this.row2.chart1.chartLine != null) {
|
|
|
+ window.onresize = function() {
|
|
|
+ this.row2.chart1.chartLine.resize()
|
|
|
+ }
|
|
|
+ }
|
|
|
+ var that = this
|
|
|
+ that.row2.chart1.chartLine.on('mouseover', e => {
|
|
|
+ const op = that.row2.chart1.chartLine.getOption()
|
|
|
+ that.row2.chart1.chartLine.dispatchAction({
|
|
|
+ type: 'downplay',
|
|
|
+ seriesIndex: 0,
|
|
|
+ dataIndex: e.dataIndex,
|
|
|
+ color: e.color
|
|
|
+ })
|
|
|
+ that.row2.chart1.chartLine.setOption(op, true)
|
|
|
+ })
|
|
|
+ },
|
|
|
+ // 今日计划统计-完成重量
|
|
|
+ roadChartLine2(chartLine_data) {
|
|
|
+ if (this.row2.chart2.chartLine != null) {
|
|
|
+ this.row2.chart2.chartLine.dispose()
|
|
|
+ }
|
|
|
+ this.row2.chart2.chartLine = echarts.init(document.getElementById('row2chartLine2'))
|
|
|
+ if (chartLine_data.data2 == 0 || chartLine_data.data1 == 0) {
|
|
|
+ chartLine_data.data1 = 0
|
|
|
+ chartLine_data.data2 = 100
|
|
|
+ }
|
|
|
+ var option = {
|
|
|
+ title: { show: true, x: 'center', textStyle: { fontSize: '15', color: 'green', fontWeight: 'bold' }},
|
|
|
+ tooltip: { show: false, trigger: 'item', formatter: '{a} <br/>{b}: {c} ({d}%)' },
|
|
|
+ series: [{
|
|
|
+ name: '任务进度', type: 'pie', radius: ['80%', '70%'], avoidLabelOverlap: false, hoverAnimation: false,
|
|
|
+ labelLine: { normal: { show: false }},
|
|
|
+ data: [{
|
|
|
+ value: chartLine_data.data1, name: '重量完成率', selected: false, label: { normal: { show: true, position: 'center', fontSize: 20, formatter: '{b}\n{d}%' }}
|
|
|
+ }, {
|
|
|
+ value: chartLine_data.data2 - chartLine_data.data1, label: { normal: { show: false }}
|
|
|
+ }]
|
|
|
+ }],
|
|
|
+ color: ['#529ae4', '#e4e7ec']
|
|
|
+ }
|
|
|
+ this.row2.chart2.chartLine.setOption(option)
|
|
|
+ if (this.row2.chart2.chartLine != null) {
|
|
|
+ window.onresize = function() {
|
|
|
+ this.row2.chart2.chartLine.resize()
|
|
|
+ }
|
|
|
+ }
|
|
|
+ var that = this
|
|
|
+ that.row2.chart2.chartLine.on('mouseover', e => {
|
|
|
+ const op = that.row2.chart2.chartLine.getOption()
|
|
|
+ that.row2.chart2.chartLine.dispatchAction({
|
|
|
+ type: 'downplay',
|
|
|
+ seriesIndex: 0,
|
|
|
+ dataIndex: e.dataIndex,
|
|
|
+ color: e.color
|
|
|
+ })
|
|
|
+ that.row2.chart2.chartLine.setOption(op, true)
|
|
|
+ })
|
|
|
+ },
|
|
|
+
|
|
|
+ // 实时监控
|
|
|
+ getChart3() {
|
|
|
+ this.row2.chart3.listLoading = true
|
|
|
+ GetReportform(this.row2.chart3.getdataListParm).then(response => {
|
|
|
+ console.log('实时监控数据', response.data.list)
|
|
|
+ if (response.data !== null && response.data.list !== null) {
|
|
|
+ var evenNumbers = []// 偶数
|
|
|
+ var oddNumbers = []// 奇数
|
|
|
+ for (let i = 0; i < response.data.list.data4.length; i++) {
|
|
|
+ if (i == 0) {
|
|
|
+ oddNumbers.push(response.data.list.data4[i])
|
|
|
+ } else {
|
|
|
+ if (i % 2 == 0) {
|
|
|
+ evenNumbers.push(response.data.list.data4[i])
|
|
|
+ } else {
|
|
|
+ oddNumbers.push(response.data.list.data4[i])
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ response.data.list.data4 = oddNumbers
|
|
|
+ response.data.list.data5 = evenNumbers
|
|
|
+ this.row2.chart3.chartLine_data = response.data.list
|
|
|
+ this.row2.chart3.total = response.data.total
|
|
|
+ this.row2.chart3.pageNum = response.data.pageNum
|
|
|
+ this.row2.chart3.pages = response.data.pages
|
|
|
+ this.roadChartLine3(this.row2.chart3.chartLine_data)
|
|
|
+ } else {
|
|
|
+ this.row2.chart3.list = []
|
|
|
+ this.row2.chart3.chartLine_data = []
|
|
|
+ this.roadChartLine3(this.row2.chart3.chartLine_data)
|
|
|
+ }
|
|
|
+ setTimeout(() => {
|
|
|
+ this.row2.chart3.listLoading = false
|
|
|
+ }, 100)
|
|
|
+ })
|
|
|
+ },
|
|
|
+ roadChartLine3(chartLine_data) {
|
|
|
+ console.log(chartLine_data, 'chartLine_data666')
|
|
|
+ if (this.row2.chart3.chartLine != null) {
|
|
|
+ this.row2.chart3.chartLine.dispose()
|
|
|
+ }
|
|
|
+ this.row2.chart3.chartLine = echarts.init(document.getElementById('row2chartLine3'))
|
|
|
+ var option = {
|
|
|
+ title: {
|
|
|
+ text: '',
|
|
|
+ subtext: ''
|
|
|
+ },
|
|
|
+ color: ['#ff0000', '#5199e5', '#fdb06a', '#fb8b73'], // 关键加上这句话，legend的颜色和折线的自定义颜色就一致了
|
|
|
+ grid: {
|
|
|
+ bottom: '10%'
|
|
|
+ },
|
|
|
+ legend: [{
|
|
|
+ itemWidth: 15, itemHeight: 7, right: '25%', textStyle: { fontSize: 12 },
|
|
|
+ data: [{ name: '设计重量' }, { name: '实际重量' }]
|
|
|
+ }, {
|
|
|
+ itemWidth: 15, itemHeight: 15, right: '0', textStyle: { fontSize: 12 },
|
|
|
+ data: [{ name: '开始重量', icon: 'image://https://kptyun.cn:8081/file/pic/3.png' }, { name: '结束重量', icon: 'image://https://kptyun.cn:8081/file/pic/4.png' }]
|
|
|
+ }],
|
|
|
+ tooltip: {
|
|
|
+ trigger: 'axis'
|
|
|
+ },
|
|
|
+ calculable: true,
|
|
|
+ yAxis: [
|
|
|
+ { type: 'value', name: '重量（kg）', splitLine: { show: false }, axisLabel: { show: true, textStyle: { color: '#666' }}}
|
|
|
+ ],
|
|
|
+ xAxis: [
|
|
|
+ { type: 'category', splitLine: { show: false }, name: '时间', data: chartLine_data.data1, axisLabel: { show: true, textStyle: { color: '#666' }}}
|
|
|
+ ],
|
|
|
+ toolbox: {
|
|
|
+ show: false,
|
|
|
+ feature: {
|
|
|
+ dataZoom: { realtime: false, yAxisIndex: 'none', },
|
|
|
+ restore: {},
|
|
|
+ }
|
|
|
+ },
|
|
|
+ dataZoom: [
|
|
|
+ {type: 'inside'}, //用于添加滚轮缩放
|
|
|
+ {type:'slider' }, //用于添加滑动条缩放，
|
|
|
+ ],
|
|
|
+ series: [
|
|
|
+ { symbol: 'none', name: '实际重量', type: 'line', data: chartLine_data.data3, itemStyle: { normal: { lineStyle: { color: '#ff0000' ,width:2}}}},
|
|
|
+ { symbol: 'none', name: '设计重量', type: 'line', data: chartLine_data.data2, itemStyle: { normal: { lineStyle: { width:2}}}},
|
|
|
+ { name: '开始重量', symbol: 'image://https://kptyun.cn:8081/file/pic/3.png', symbolSize: 6, type: 'scatter', data: chartLine_data.data4 },
|
|
|
+ { name: '结束重量', symbol: 'image://https://kptyun.cn:8081/file/pic/4.png', symbolSize: 6, type: 'scatter', data: chartLine_data.data5 }
|
|
|
+ ]
|
|
|
+ }
|
|
|
+ this.row2.chart3.chartLine.setOption(option)
|
|
|
+ if (this.row2.chart3.chartLine != null) {
|
|
|
+ window.onresize = function() {
|
|
|
+ this.row2.chart3.chartLine.resize()
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ getCarLength() {
|
|
|
+ this.row2.chart3.listLoading2 = true
|
|
|
+ this.row2.chart3.getdataListParmList.pagecount = 0
|
|
|
+ GetDataByName(this.row2.chart3.getdataListParmList).then(response => {
|
|
|
+ if (response.data.list !== null) {
|
|
|
+ this.carLength = response.data.total
|
|
|
+ } else {
|
|
|
+ this.carLength = 0
|
|
|
+ }
|
|
|
+ setTimeout(() => {
|
|
|
+ this.row2.chart3.listLoading2 = false
|
|
|
+ }, 100)
|
|
|
+ })
|
|
|
+ },
|
|
|
+ // 图三轮询列表
|
|
|
+ getChart3List() {
|
|
|
+ this.row2.chart3.listLoading2 = true
|
|
|
+ this.row2.chart3.getdataListParmList.pagecount = 2
|
|
|
+ GetDataByName(this.row2.chart3.getdataListParmList).then(response => {
|
|
|
+ if (response.data.list !== null) {
|
|
|
+ this.$set(response.data.list[0], 'background', '#f3f9f7')
|
|
|
+ this.$set(response.data.list[0], 'borderColor', '#009d6a')
|
|
|
+ this.$set(response.data.list[0], 'isChecked', true)
|
|
|
+ if (response.data.list.length > 1) {
|
|
|
+ this.$set(response.data.list[1], 'background', '#f9f9f9')
|
|
|
+ this.$set(response.data.list[1], 'borderColor', '#f9f9f9')
|
|
|
+ this.$set(response.data.list[1], 'isChecked', false)
|
|
|
+ }
|
|
|
+ this.list = response.data.list
|
|
|
+ this.row2.chart3.getdataListParm.parammaps.pid = this.list[this.myKey].pid
|
|
|
+ this.row2.chart3.getdataListParm.parammaps.id = this.list[this.myKey].id
|
|
|
+ this.getChart3()
|
|
|
+ this.row2.chart3.pageNum2 = response.data.pageNum
|
|
|
+ this.row2.chart3.pages2 = response.data.pages
|
|
|
+ } else {
|
|
|
+ this.row2.chart3.list2 = []
|
|
|
+ }
|
|
|
+ if (response.data.pageNum == 1) {
|
|
|
+ if (response.data.total > 2) {
|
|
|
+ this.row2.chart3.isLeftA = false
|
|
|
+ this.row2.chart3.isLeft = true
|
|
|
+ this.row2.chart3.isRightA = true
|
|
|
+ this.row2.chart3.isRight = false
|
|
|
+ } else {
|
|
|
+ this.row2.chart3.isLeftA = false
|
|
|
+ this.row2.chart3.isLeft = true
|
|
|
+ this.row2.chart3.isRightA = true
|
|
|
+ this.row2.chart3.isRight = false
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ if (response.data.pageNum * response.data.pageSize > response.data.total || response.data.pageNum * response.data.pageSize == response.data.total) {
|
|
|
+ this.row2.chart3.isLeftA = true
|
|
|
+ this.row2.chart3.isLeft = false
|
|
|
+ this.row2.chart3.isRightA = false
|
|
|
+ this.row2.chart3.isRight = true
|
|
|
+ } else {
|
|
|
+ this.row2.chart3.isLeftA = true
|
|
|
+ this.row2.chart3.isLeft = false
|
|
|
+ this.row2.chart3.isRightA = true
|
|
|
+ this.row2.chart3.isRight = false
|
|
|
+ }
|
|
|
+ }
|
|
|
+ setTimeout(() => {
|
|
|
+ this.row2.chart3.listLoading2 = false
|
|
|
+ }, 100)
|
|
|
+ })
|
|
|
+ },
|
|
|
+ // 向左切换
|
|
|
+ handleLeft() {
|
|
|
+ console.log('左')
|
|
|
+ if (this.row2.chart3.isLeftA == false) {
|
|
|
+ console.log('前边没有啦')
|
|
|
+ } else {
|
|
|
+ console.log(this.row2.chart3.getdataListParmList.offset)
|
|
|
+ this.row2.chart3.getdataListParmList.offset = this.row2.chart3.getdataListParmList.offset - 1
|
|
|
+ this.getChart3List()
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 向右切换
|
|
|
+ handleRight() {
|
|
|
+ if (this.row2.chart3.isRightA == false) {
|
|
|
+ console.log('后边没有啦')
|
|
|
+ } else {
|
|
|
+ this.row2.chart3.getdataListParmList.offset = this.row2.chart3.getdataListParmList.offset + 1
|
|
|
+ console.log(this.row2.chart3.getdataListParmList.offset)
|
|
|
+ this.getChart3List()
|
|
|
+ }
|
|
|
+ },
|
|
|
+ handleList(key, item) {
|
|
|
+ console.log(item, key)
|
|
|
+ this.isClick = true
|
|
|
+ this.clickKey = key
|
|
|
+ clearInterval(this.timer)
|
|
|
+ for (let i = 0; i < this.list.length; i++) {
|
|
|
+ if (key == i) {
|
|
|
+ this.$set(this.list[i], 'background', '#f3f9f7')
|
|
|
+ this.$set(this.list[i], 'borderColor', '#009d6a')
|
|
|
+ this.$set(this.list[i], 'isChecked', true)
|
|
|
+ } else {
|
|
|
+ this.$set(this.list[i], 'background', '#f9f9f9')
|
|
|
+ this.$set(this.list[i], 'borderColor', '#f9f9f9')
|
|
|
+ this.$set(this.list[i], 'isChecked', false)
|
|
|
+ }
|
|
|
+ }
|
|
|
+ this.row2.chart3.getdataListParm.parammaps.pid = this.list[key].pid
|
|
|
+ this.row2.chart3.getdataListParm.parammaps.id = this.list[key].id
|
|
|
+ this.getChart3()
|
|
|
+ // this.timer = null
|
|
|
+ // clearInterval(this.timer)
|
|
|
+ // setTimeout(() => {
|
|
|
+ // this.timer = null
|
|
|
+ // this.timer = setInterval(this.autoPlay, 15000)
|
|
|
+ // }, 20000)
|
|
|
+ },
|
|
|
+ autoPlay() {
|
|
|
+ if (this.list[0].isChecked == true) {
|
|
|
+ if (this.list.length > 1) {
|
|
|
+ this.$set(this.list[1], 'background', '#f3f9f7')
|
|
|
+ this.$set(this.list[1], 'borderColor', '#009d6a')
|
|
|
+ this.$set(this.list[1], 'isChecked', true)
|
|
|
+ this.$set(this.list[0], 'background', '#f9f9f9')
|
|
|
+ this.$set(this.list[0], 'borderColor', '#f9f9f9')
|
|
|
+ this.$set(this.list[0], 'isChecked', false)
|
|
|
+ this.row2.chart3.getdataListParm.parammaps.pid = this.list[1].pid
|
|
|
+ this.row2.chart3.getdataListParm.parammaps.id = this.list[1].id
|
|
|
+ this.getChart3()
|
|
|
+ } else {
|
|
|
+ if (this.row2.chart3.isRightA == false && this.row2.chart3.isLeftA == true) {
|
|
|
+ this.row2.chart3.getdataListParmList.offset = this.row2.chart3.getdataListParmList.offset - 1
|
|
|
+ this.getChart3List()
|
|
|
+ }
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ if (this.row2.chart3.isRightA == true) {
|
|
|
+ this.row2.chart3.getdataListParmList.offset = this.row2.chart3.getdataListParmList.offset + 1
|
|
|
+ console.log(this.row2.chart3.getdataListParmList.offset)
|
|
|
+ this.getChart3List()
|
|
|
+ } else {
|
|
|
+ if (this.row2.chart3.isLeftA == true) {
|
|
|
+ this.row2.chart3.getdataListParmList.offset = this.row2.chart3.getdataListParmList.offset - 1
|
|
|
+ console.log(this.row2.chart3.getdataListParmList.offset)
|
|
|
+ this.getChart3List()
|
|
|
+ } else {
|
|
|
+ this.$set(this.list[0], 'background', '#f3f9f7')
|
|
|
+ this.$set(this.list[0], 'borderColor', '#009d6a')
|
|
|
+ this.$set(this.list[0], 'isChecked', true)
|
|
|
+ this.$set(this.list[1], 'background', '#f9f9f9')
|
|
|
+ this.$set(this.list[1], 'borderColor', '#f9f9f9')
|
|
|
+ this.$set(this.list[1], 'isChecked', false)
|
|
|
+ this.row2.chart3.getdataListParm.parammaps.pid = this.list[0].pid
|
|
|
+ this.row2.chart3.getdataListParm.parammaps.id = this.list[0].id
|
|
|
+ this.getChart3()
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ // 计划统计
|
|
|
+ getChart4() {
|
|
|
+ this.row3.chart1.listLoading = true
|
|
|
+ GetReportform(this.row3.chart1.getdataListParm).then(response => {
|
|
|
+ if (response.data !== null && response.data.list !== null) {
|
|
|
+ console.log('计划统计数据', response.data.list)
|
|
|
+ for (let i = 0; i < response.data.data.length; i++) {
|
|
|
+ if (response.data.data[i].实际量 !== '' && response.data.data[i].实际量 !== undefined) {
|
|
|
+ response.data.data[i].实际量 = parseFloat(response.data.data[i].实际量)
|
|
|
+ }
|
|
|
+ if (response.data.data[i].理论量 !== '' && response.data.data[i].理论量 !== undefined) {
|
|
|
+ response.data.data[i].理论量 = parseFloat(response.data.data[i].理论量)
|
|
|
+ }
|
|
|
+ if (response.data.data[i].field1 !== '' && response.data.data[i].field1 !== undefined) {
|
|
|
+ response.data.data[i].field1 = parseFloat(response.data.data[i].field1)
|
|
|
+ }
|
|
|
+ if (response.data.data[i].计划取消重量 !== '' && response.data.data[i].计划取消重量 !== undefined) {
|
|
|
+ response.data.data[i].计划取消重量 = parseFloat(response.data.data[i].计划取消重量)
|
|
|
+ }
|
|
|
+ if (response.data.data[i].field3 !== '' && response.data.data[i].field3 !== undefined) {
|
|
|
+ response.data.data[i].field3 = parseFloat(response.data.data[i].field3)
|
|
|
+ }
|
|
|
+ if (response.data.data[i].正确数 !== '' && response.data.data[i].正确数 !== undefined) {
|
|
|
+ response.data.data[i].正确数 = parseFloat(response.data.data[i].正确数)
|
|
|
+ }
|
|
|
+ if (response.data.data[i].计划数 !== '' && response.data.data[i].计划数 !== undefined) {
|
|
|
+ response.data.data[i].计划数 = parseFloat(response.data.data[i].计划数)
|
|
|
+ }
|
|
|
+ if (response.data.data[i].field2 !== '' && response.data.data[i].field2 !== undefined) {
|
|
|
+ response.data.data[i].field2 = parseFloat(response.data.data[i].field2)
|
|
|
+ }
|
|
|
+ }
|
|
|
+ this.row3.chart1.table.list = response.data.data
|
|
|
+ console.log(this.row3.chart1.table.list, '123')
|
|
|
+ this.row3.chart1.chartLine_data = response.data.list
|
|
|
+ this.row3.chart1.total = response.data.total
|
|
|
+ } else {
|
|
|
+ this.row3.chart1.list = []
|
|
|
+ this.row3.chart1.chartLine_data = []
|
|
|
+ this.row3.chart1.chartLine_data.data1 = []
|
|
|
+ }
|
|
|
+ if (this.row3.chart1.chartLine_data.data1.length == 0) {
|
|
|
+ this.row3.chart1.chartLine_data.title = '暂无数据'
|
|
|
+ } else {
|
|
|
+ this.row3.chart1.chartLine_data.title = ''
|
|
|
+ }
|
|
|
+ this.roadChartLine4(this.row3.chart1.chartLine_data)
|
|
|
+ setTimeout(() => {
|
|
|
+ this.row3.chart1.listLoading = false
|
|
|
+ }, 100)
|
|
|
+ })
|
|
|
+ },
|
|
|
+ roadChartLine4(chartLine_data) {
|
|
|
+ if (this.row3.chart1.chartLine != null) {
|
|
|
+ this.row3.chart1.chartLine.dispose()
|
|
|
+ }
|
|
|
+ this.row3.chart1.chartLine = echarts.init(document.getElementById('row3chartLine1'))
|
|
|
+ var option = {
|
|
|
+ title: { text: chartLine_data.title, x: 'center', y: 'center', textStyle: { color: '#909399', fontWeight: 'normal', fontSize: 12 }},
|
|
|
+ tooltip: { trigger: 'axis' },
|
|
|
+ color: ['#1abd88', '#549be9', '#fd8d75'],
|
|
|
+ legend: {
|
|
|
+ data: ['计划准确率', '计划正确率', '计划准确率（去除取消重量）'],
|
|
|
+ top: 10, itemHeight: 7, itemWidth: 15, textStyle: { fontSize: 12 }
|
|
|
+ },
|
|
|
+ grid: {
|
|
|
+ top: '20%',
|
|
|
+ left: '10%',
|
|
|
+ right: '10%',
|
|
|
+ bottom: '10%',
|
|
|
+ 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} %' }
|
|
|
+ },
|
|
|
+ series: [
|
|
|
+ { name: '计划准确率', type: 'line', symbol: 'none', smooth: true, itemStyle: { normal: { lineStyle: { color: '#1abd88' }}}, data: chartLine_data.data2 },
|
|
|
+ { name: '计划正确率', type: 'line', symbol: 'none', smooth: true, itemStyle: { normal: { lineStyle: { color: '#549be9' }}}, data: chartLine_data.data3 },
|
|
|
+ { name: '计划准确率（去除取消重量）', type: 'line', symbol: 'none', smooth: true, itemStyle: { normal: { lineStyle: { color: '#fd8d75' }}}, data: chartLine_data.data4 }
|
|
|
+ ]
|
|
|
+ }
|
|
|
+ this.row3.chart1.chartLine.setOption(option)
|
|
|
+ if (this.row3.chart1.chartLine != null) {
|
|
|
+ window.onresize = function() {
|
|
|
+ this.row3.chart1.chartLine.resize()
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 泌乳牛干物质采食量
|
|
|
+ getChart5() {
|
|
|
+ this.row3.chart2.listLoading = true
|
|
|
+ GetReportform(this.row3.chart2.getdataListParm).then(response => {
|
|
|
+ console.log('泌乳牛干物质采食量数据', response)
|
|
|
+ if (response.data !== null && response.data.list !== null && response.data.data !== null) {
|
|
|
+ for (let i = 0; i < response.data.data.length; i++) {
|
|
|
+ if (response.data.data[i].field1 !== '' && response.data.data[i].field1 !== undefined) {
|
|
|
+ response.data.data[i].field1 = parseFloat(response.data.data[i].field1)
|
|
|
+ }
|
|
|
+ if (response.data.data[i].field2 !== '' && response.data.data[i].field2 !== undefined) {
|
|
|
+ response.data.data[i].field2 = parseFloat(response.data.data[i].field2)
|
|
|
+ }
|
|
|
+ }
|
|
|
+ this.row3.chart2.table.list = response.data.data
|
|
|
+ this.row3.chart2.chartLine_data = response.data.list
|
|
|
+ this.row3.chart2.total = response.data.total
|
|
|
+ } else {
|
|
|
+ this.row3.chart2.list = []
|
|
|
+ this.row3.chart2.chartLine_data = []
|
|
|
+ this.row3.chart2.chartLine_data.data1 = []
|
|
|
+ }
|
|
|
+ if (this.row3.chart2.chartLine_data.data1.length == 0) {
|
|
|
+ this.row3.chart2.chartLine_data.title = '暂无数据'
|
|
|
+ } else {
|
|
|
+ this.row3.chart2.chartLine_data.title = ''
|
|
|
+ }
|
|
|
+ this.roadChartLine5(this.row3.chart2.chartLine_data)
|
|
|
+ setTimeout(() => {
|
|
|
+ this.row3.chart2.listLoading = false
|
|
|
+ }, 100)
|
|
|
+ })
|
|
|
+ },
|
|
|
+ roadChartLine5(chartLine_data) {
|
|
|
+ if (this.row3.chart2.chartLine != null) {
|
|
|
+ this.row3.chart2.chartLine.dispose()
|
|
|
+ }
|
|
|
+ this.row3.chart2.chartLine = echarts.init(document.getElementById('row3chartLine2'))
|
|
|
+ var option = {
|
|
|
+ title: { text: chartLine_data.title, x: 'center', y: 'center', textStyle: { color: '#909399', fontWeight: 'normal', fontSize: 12 }},
|
|
|
+ tooltip: { trigger: 'axis', axisPointer: { type: 'cross', crossStyle: { color: '#999' }}},
|
|
|
+ grid: { top: '20%', left: '8%', right: '10%', bottom: '10%', containLabel: true },
|
|
|
+ legend: { data: ['泌乳牛干物质采食量', '泌乳牛产奶量'], right: 10, itemHeight: 7, itemWidth: 15 },
|
|
|
+ xAxis: [{ type: 'category', data: chartLine_data.data1 }],
|
|
|
+ yAxis: [{
|
|
|
+ splitLine: { show: false }, type: 'value', name: '泌乳牛干\n物质采食量', axisLabel: { formatter: '{value} ' }
|
|
|
+ }, {
|
|
|
+ splitLine: { show: false }, type: 'value', name: '泌乳牛产奶量', axisLabel: { formatter: '{value} ' }
|
|
|
+ }],
|
|
|
+ series: [{
|
|
|
+ name: '泌乳牛干物质采食量', type: 'bar', barWidth: 5, itemStyle: { barBorderRadius: [18, 18, 0, 0], normal: { color: '#5199e5' }}, data: chartLine_data.data2
|
|
|
+ }, {
|
|
|
+ name: '泌乳牛产奶量', type: 'line', barWidth: 5,
|
|
|
+ itemStyle: { barBorderRadius: [18, 18, 0, 0], normal: { color: '#36c293' }}, yAxisIndex: 1, data: chartLine_data.data3
|
|
|
+ }]
|
|
|
+ }
|
|
|
+ this.row3.chart2.chartLine.setOption(option)
|
|
|
+ if (this.row3.chart2.chartLine != null) {
|
|
|
+ window.onresize = function() {
|
|
|
+ this.row3.chart2.chartLine.resize()
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ // 成本统计
|
|
|
+ getChart6() {
|
|
|
+ this.row4.chart1.table.listLoading = true
|
|
|
+ this.row4.chart1.listLoading = true
|
|
|
+ GetReportform(this.row4.chart1.getdataListParm).then(response => {
|
|
|
+ if (response.data !== null && response.data.list !== null && response.data.data !== null && response.data.data !== '') {
|
|
|
+ console.log('成本统计数据', response.data.data)
|
|
|
+ console.log('成本统计数据', response.data.list)
|
|
|
+ for (let i = 0; i < response.data.data.length; i++) {
|
|
|
+ if (response.data.data[i].field1 !== '' && response.data.data[i].field1 !== undefined) {
|
|
|
+ response.data.data[i].field1 = parseFloat(response.data.data[i].field1)
|
|
|
+ }
|
|
|
+ if (response.data.data[i].field2 !== '' && response.data.data[i].field2 !== undefined) {
|
|
|
+ response.data.data[i].field2 = parseFloat(response.data.data[i].field2)
|
|
|
+ }
|
|
|
+ }
|
|
|
+ this.row4.chart1.table.list = response.data.data
|
|
|
+ this.row4.chart1.chartLine_data = response.data.list
|
|
|
+ this.row4.chart1.total = response.data.total
|
|
|
+ } else {
|
|
|
+ this.row4.chart1.list = []
|
|
|
+ this.row4.chart1.chartLine_data = []
|
|
|
+ this.row4.chart1.chartLine_data.data1 = []
|
|
|
+ }
|
|
|
+ if (this.row4.chart1.chartLine_data.data1.length == 0) {
|
|
|
+ this.row4.chart1.chartLine_data.title = '暂无数据'
|
|
|
+ } else {
|
|
|
+ this.row4.chart1.chartLine_data.title = ''
|
|
|
+ }
|
|
|
+ this.roadChartLine6(this.row4.chart1.chartLine_data)
|
|
|
+ setTimeout(() => {
|
|
|
+ this.row4.chart1.listLoading = false
|
|
|
+ this.row4.chart1.table.listLoading = false
|
|
|
+ }, 100)
|
|
|
+ })
|
|
|
+ },
|
|
|
+ roadChartLine6(chartLine_data) {
|
|
|
+ if (this.row4.chart1.chartLine != null) {
|
|
|
+ this.row4.chart1.chartLine.dispose()
|
|
|
+ }
|
|
|
+ console.log(chartLine_data, '===666')
|
|
|
+ this.row4.chart1.chartLine = echarts.init(document.getElementById('row4chartLine1'))
|
|
|
+ var option = {
|
|
|
+ title: { text: chartLine_data.title, x: 'center', y: 'center', textStyle: { color: '#909399', fontWeight: 'normal', fontSize: 12 }},
|
|
|
+ grid: { left: '10%', right: '12%', bottom: '3%', containLabel: true },
|
|
|
+ tooltip: { trigger: 'axis', axisPointer: { type: 'cross', crossStyle: { color: '#999' }}},
|
|
|
+ legend: { data: ['公斤奶饲料成本', '单头牛饲料成本'], itemHeight: 7, itemWidth: 15 },
|
|
|
+ xAxis: [{ type: 'category', data: chartLine_data.data1, axisPointer: { type: 'shadow' }, name: '日期' }],
|
|
|
+ yAxis: [{
|
|
|
+ splitLine: { show: false }, type: 'value', name: '公斤奶\n饲料成本（元）', axisLabel: { formatter: '{value}' }
|
|
|
+ }, {
|
|
|
+ splitLine: { show: false }, type: 'value', name: '单头牛\n饲料成本（元）', axisLabel: { formatter: '{value}' }
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ series: [{
|
|
|
+ name: '公斤奶饲料成本', type: 'bar', itemStyle: { normal: { color: '#1abd88' }}, data: chartLine_data.data2
|
|
|
+ }, {
|
|
|
+ name: '单头牛饲料成本', type: 'line', yAxisIndex: 1, itemStyle: { normal: { color: '#ff8d78' }}, data: chartLine_data.data3
|
|
|
+ }]
|
|
|
+ }
|
|
|
+ this.row4.chart1.chartLine.setOption(option)
|
|
|
+ if (this.row4.chart1.chartLine != null) {
|
|
|
+ window.onresize = function() {
|
|
|
+ this.row4.chart1.chartLine.resize()
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ // 混料实际重量统计
|
|
|
+ getChart7() {
|
|
|
+ this.row4.chart2.listLoading = true
|
|
|
+ GetReportform(this.row4.chart2.getdataListParm).then(response => {
|
|
|
+ if (response.data !== null && response.data.list !== null) {
|
|
|
+ console.log('混料实际重量统计数据', response.data.list)
|
|
|
+ for (let i = 0; i < response.data.data.length; i++) {
|
|
|
+ if (response.data.data[i].field1 !== '' && response.data.data[i].field1 !== undefined) {
|
|
|
+ response.data.data[i].field1 = parseFloat(response.data.data[i].field1)
|
|
|
+ }
|
|
|
+ }
|
|
|
+ this.row4.chart2.table.list = response.data.data
|
|
|
+ this.row4.chart2.chartLine_data = response.data.list
|
|
|
+ this.row4.chart2.total = response.data.total
|
|
|
+ } else {
|
|
|
+ this.row4.chart2.list = []
|
|
|
+ this.row4.chart2.chartLine_data = []
|
|
|
+ this.row4.chart2.chartLine_data.data1 = []
|
|
|
+ }
|
|
|
+ if (this.row4.chart2.chartLine_data.data1.length == 0) {
|
|
|
+ this.row4.chart2.chartLine_data.title = '暂无数据'
|
|
|
+ } else {
|
|
|
+ this.row4.chart2.chartLine_data.title = ''
|
|
|
+ }
|
|
|
+ this.roadChartLine7(this.row4.chart2.chartLine_data)
|
|
|
+ setTimeout(() => {
|
|
|
+ this.row4.chart2.listLoading = false
|
|
|
+ }, 100)
|
|
|
+ })
|
|
|
+ },
|
|
|
+ roadChartLine7(chartLine_data) {
|
|
|
+ if (this.row4.chart2.chartLine != null) {
|
|
|
+ this.row4.chart2.chartLine.dispose()
|
|
|
+ }
|
|
|
+ this.row4.chart2.chartLine = echarts.init(document.getElementById('row4chartLine2'))
|
|
|
+ var option = {
|
|
|
+ title: { text: chartLine_data.title, x: 'center', y: 'center', textStyle: { color: '#909399', fontWeight: 'normal', fontSize: 12 }},
|
|
|
+ grid: { left: '10%', right: '10%', bottom: '3%', containLabel: true },
|
|
|
+ tooltip: { trigger: 'axis' },
|
|
|
+ legend: { data: [''] },
|
|
|
+ xAxis: [{ type: 'category', data: chartLine_data.data1, name: '日期' }],
|
|
|
+ yAxis: [
|
|
|
+ { type: 'value', name: '重量（kg）', axisLabel: { formatter: '{value}' }}
|
|
|
+ ],
|
|
|
+ series: [{
|
|
|
+ name: '重量', type: 'bar', stack: '广告', itemStyle: { normal: { color: '#36C293' }}, data: chartLine_data.data2
|
|
|
+ }]
|
|
|
+ }
|
|
|
+ this.row4.chart2.chartLine.setOption(option)
|
|
|
+ if (this.row4.chart2.chartLine != null) {
|
|
|
+ window.onresize = function() {
|
|
|
+ this.row4.chart2.chartLine.resize()
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ getTable8() {
|
|
|
+ this.row4.table.listLoading = true
|
|
|
+ GetDataByName(this.row4.table.getdataListParm).then(response => {
|
|
|
+ console.log('库存预警table数据', response.data.list)
|
|
|
+ if (response.data.list !== null) {
|
|
|
+ this.row4.table.list = response.data.list
|
|
|
+ this.row4.table.total = response.data.total
|
|
|
+ } else {
|
|
|
+ this.row4.table.list = []
|
|
|
+ }
|
|
|
+ setTimeout(() => {
|
|
|
+ this.row4.table.listLoading = false
|
|
|
+ }, 100)
|
|
|
+ })
|
|
|
+ },
|
|
|
+ // 更多
|
|
|
+ handleMore() {
|
|
|
+ // this.$router.push({ path: '/inventoryManagement/Warning' })
|
|
|
+ this.$router.push({ name: 'Warning', params: { jmp: 'jmp' }})
|
|
|
+ },
|
|
|
+ // 导出
|
|
|
+ handleExport(item) {
|
|
|
+ console.log(item)
|
|
|
+ // 计划统计
|
|
|
+ if (item == 'row3chartLine1') {
|
|
|
+ console.log(this.row3.chart1.table.list)
|
|
|
+ var excelDatasTabChart1 = [
|
|
|
+ {
|
|
|
+ tHeader: ['日期', '计划执行重量（kg）', '配方理论重量（kg）', '计划准确率', '计划取消重量（kg）', '计划准确率（去除取消重量）', '计划正确数', '计划数', '计划正确率'],
|
|
|
+ filterVal: ['日期', '实际量', '理论量', 'field1', '计划取消重量', 'field3', '正确数', '计划数', 'field2'],
|
|
|
+ tableDatas: this.row3.chart1.table.list,
|
|
|
+ sheetName: '计划统计'
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ json2excel(excelDatasTabChart1, '计划统计', true, 'xlsx')
|
|
|
+ } else if (item == 'row3chartLine2') {
|
|
|
+ // 泌乳牛采食量
|
|
|
+ var excelDatasTabChart2 = [
|
|
|
+ {
|
|
|
+ tHeader: ['日期', '泌乳牛采食量（kg）', '泌乳牛产奶量（kg）'],
|
|
|
+ filterVal: ['日期', 'field1', 'field2'],
|
|
|
+ tableDatas: this.row3.chart2.table.list,
|
|
|
+ sheetName: '泌乳牛采食量'
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ json2excel(excelDatasTabChart2, '泌乳牛采食量', true, 'xlsx')
|
|
|
+ } else if (item == 'row4chartLine1') {
|
|
|
+ // 成本统计
|
|
|
+ console.log('成本统计')
|
|
|
+ var excelDatasTabChart2 = [
|
|
|
+ {
|
|
|
+ tHeader: ['日期', '单头牛饲料成本', '公斤奶饲料成本（元）'],
|
|
|
+ filterVal: ['日期', 'field1', 'field2'],
|
|
|
+ tableDatas: this.row4.chart1.table.list,
|
|
|
+ sheetName: '成本统计'
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ json2excel(excelDatasTabChart2, '成本统计', true, 'xlsx')
|
|
|
+ } else if (item == 'row4chartLine2') {
|
|
|
+ console.log('混料实际重量统计')
|
|
|
+ var excelDatasTabChart4 = [
|
|
|
+ {
|
|
|
+ tHeader: ['日期', '重量'],
|
|
|
+ filterVal: ['日期', 'field1'],
|
|
|
+ tableDatas: this.row4.chart2.table.list,
|
|
|
+ sheetName: '混料实际重量统计'
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ json2excel(excelDatasTabChart4, '混料实际重量统计', true, 'xlsx')
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ handleTable(item) {
|
|
|
+ console.log(item)
|
|
|
+ if (item == 'row3chartLine1') {
|
|
|
+ console.log('计划统计表格')
|
|
|
+ this.row3.chart1.isTable = true
|
|
|
+ this.row3.chart1.isChart = false
|
|
|
+ } else if (item == 'row3chartLine2') {
|
|
|
+ console.log('泌乳牛采食量表格')
|
|
|
+ this.row3.chart2.isTable = true
|
|
|
+ this.row3.chart2.isChart = false
|
|
|
+ } else if (item == 'row4chartLine1') {
|
|
|
+ console.log('成本统计表格')
|
|
|
+ this.row4.chart1.isTable = true
|
|
|
+ this.row4.chart1.isChart = false
|
|
|
+ } else if (item == 'row4chartLine2') {
|
|
|
+ console.log('混料实际重量统计表格')
|
|
|
+ this.row4.chart2.isTable = true
|
|
|
+ this.row4.chart2.isChart = false
|
|
|
+ }
|
|
|
+ },
|
|
|
+ handleChart(item) {
|
|
|
+ console.log(item)
|
|
|
+ // 显示切换图表
|
|
|
+ if (item == 'row3chartLine1') {
|
|
|
+ console.log('计划统计图表')
|
|
|
+ this.row3.chart1.isTable = false
|
|
|
+ this.row3.chart1.isChart = true
|
|
|
+ this.getChart4()
|
|
|
+ } else if (item == 'row3chartLine2') {
|
|
|
+ console.log('泌乳牛采食量图表')
|
|
|
+ this.row3.chart2.isTable = false
|
|
|
+ this.row3.chart2.isChart = true
|
|
|
+ this.getChart5()
|
|
|
+ } else if (item == 'row4chartLine1') {
|
|
|
+ console.log('成本统计图表')
|
|
|
+ this.row4.chart1.isTable = false
|
|
|
+ this.row4.chart1.isChart = true
|
|
|
+ this.getChart6()
|
|
|
+ } else if (item == 'row4chartLine2') {
|
|
|
+ console.log('混料实际重量统计图表')
|
|
|
+ this.row4.chart2.isTable = false
|
|
|
+ this.row4.chart2.isChart = true
|
|
|
+ this.getChart7()
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+ .Title{
|
|
|
+ padding-left: 10px;border-radius: 10px;margin-top: 20px;background: #fff;height:40px;font-size:20px;line-height:40px;text-align: left;font-weight: 600;color:#333333;
|
|
|
+ }
|
|
|
+ .dashboard-editor-container {
|
|
|
+ background-color: #F4F4F4;
|
|
|
+ min-height: 100vh;
|
|
|
+ .news{
|
|
|
+ width: 70%;
|
|
|
+ height: 30px;
|
|
|
+ background: #fff;
|
|
|
+ margin: 0 auto;
|
|
|
+ border-radius: 10px;
|
|
|
+ text-align: center;
|
|
|
+ line-height: 30px;
|
|
|
+ color: red;
|
|
|
+ b{color: #000;}
|
|
|
+ }
|
|
|
+
|
|
|
+ .bottom{
|
|
|
+ padding:0 30px;
|
|
|
+ h4{text-align: right;}
|
|
|
+ .grid-content{
|
|
|
+ background: #fff;height: 90px;
|
|
|
+ border-radius: 10px;
|
|
|
+ }
|
|
|
+ .one{
|
|
|
+ border: 1px solid #82CBB3;height: 90px;
|
|
|
+ .Left{
|
|
|
+ float: left;
|
|
|
+ width: 65px;
|
|
|
+ text-align: center;
|
|
|
+ i{font-size: 36px;color:#82CBB3;line-height: 90px;}
|
|
|
+ }
|
|
|
+ .Right{
|
|
|
+ float: left;
|
|
|
+ margin-top:15px;
|
|
|
+ height: 60px;
|
|
|
+ font-weight: 600;
|
|
|
+ font-size: 14px;
|
|
|
+ line-height: 30px;
|
|
|
+ span{
|
|
|
+ display: inline-block;
|
|
|
+ width: 130px;
|
|
|
+ text-align: right;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .two{
|
|
|
+ border: 1px solid #FF9900;
|
|
|
+ .Left{
|
|
|
+ float: left;
|
|
|
+ width: 65px;
|
|
|
+ text-align: center;
|
|
|
+ i{font-size: 36px;color:#FF9900;line-height: 90px;}
|
|
|
+ }
|
|
|
+ .Right{
|
|
|
+ float: left;
|
|
|
+ margin-top:15px;
|
|
|
+ height: 60px;
|
|
|
+ font-weight: 600;
|
|
|
+ font-size: 14px;
|
|
|
+ line-height: 30px;
|
|
|
+ span{
|
|
|
+ display: inline-block;
|
|
|
+ width: 130px;
|
|
|
+ text-align: right;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .three{
|
|
|
+ border: 1px solid #0099FF;
|
|
|
+ .Left{
|
|
|
+ float: left;
|
|
|
+ width: 65px;
|
|
|
+ text-align: center;
|
|
|
+ i{font-size: 36px;color:#0099FF;line-height: 90px;}
|
|
|
+ }
|
|
|
+ .Right{
|
|
|
+ float: left;
|
|
|
+ height: 60px;
|
|
|
+ font-weight: 600;
|
|
|
+ font-size: 14px;
|
|
|
+ line-height: 30px;
|
|
|
+ margin-top:15px;
|
|
|
+ span{
|
|
|
+ display: inline-block;
|
|
|
+ width: 130px;
|
|
|
+ text-align: right;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .four{
|
|
|
+ border: 1px solid #FF5C5C;
|
|
|
+ .Left{
|
|
|
+ float: left;
|
|
|
+ width: 55px;
|
|
|
+ text-align: center;
|
|
|
+ i{font-size: 36px;color:#FF5C5C;line-height: 90px;}
|
|
|
+ }
|
|
|
+ .Right{
|
|
|
+ float: left;
|
|
|
+ flex: 1;
|
|
|
+ height: 60px;
|
|
|
+ font-weight: 600;
|
|
|
+ font-size: 14px;
|
|
|
+ line-height: 30px;
|
|
|
+ margin-top:15px;
|
|
|
+ span{
|
|
|
+ display: inline-block;
|
|
|
+ width: 150px;
|
|
|
+ text-align: right;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .car{
|
|
|
+ width:100%;height:150px;
|
|
|
+ display:flex;
|
|
|
+ display: -webkit-flex;
|
|
|
+ -webkit-flex-direction:row;
|
|
|
+ i{font-size: 50px;width:50px;display: block;line-height: 150px;}
|
|
|
+ .carList{
|
|
|
+ flex:1;height: 130px;
|
|
|
+ .list{
|
|
|
+ height: 130px;color: #fff;
|
|
|
+ // box-shadow: #000 0px 0px 10px;
|
|
|
+ // border-radius: 10px;
|
|
|
+ .list-l{
|
|
|
+ p{
|
|
|
+ padding-left:10px;font-size:13px;line-height: 16px; text-overflow: ellipsis;white-space:nowrap; overflow:hidden;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .list-r{
|
|
|
+ p{
|
|
|
+ font-size:13px;line-height: 16px;text-overflow: ellipsis;white-space:nowrap; overflow:hidden;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+</style>
|
|
|
+
|
|
|
+<style>
|
|
|
+ .app-main{background:#f5f5f5;}
|
|
|
+</style>
|
|
|
+<style lang="scss" scoped>
|
|
|
+
|
|
|
+ .dashboard-editor-container{padding-left: 10px;background: #f5f5f5;padding-bottom: 10px;}
|
|
|
+ // 公共
|
|
|
+ .img-t{position: absolute;left: 0;right: 0;margin: 30px auto;width: 31%;height: 31%;background-size: 100% 100%;}
|
|
|
+ .row1-c-l-c{
|
|
|
+ margin: 30px auto;border: 1px solid #eee;height: 40%;width: 50%;border-radius: 50%;text-align: center;display:table;
|
|
|
+ span{
|
|
|
+ height:100%;display:table-cell;vertical-align: middle;font-size:14px;color: #c88d42;
|
|
|
+ b{padding-bottom: 10px;font-size: 16px;}
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .row1-c-l-b{
|
|
|
+ width: 100%;text-align: center;display:table;font-size: 12px;
|
|
|
+ // div{
|
|
|
+ // font-size: 12px;height:100%;display:table-cell;vertical-align: middle;color: #323232;padding: 0 10px;width: 100%;
|
|
|
+ // span{text-align: right;width: 75%;display: block;float: left;}
|
|
|
+ // b{float: left;display: block;width: 25%;}
|
|
|
+ // }
|
|
|
+ }
|
|
|
+ .title{
|
|
|
+ height: 36px;padding-top: 7px;line-height: 36px;position: relative;
|
|
|
+ .img-title{
|
|
|
+ position: absolute;top: 10px; right:10px;bottom:0;left:20px;width: 30px;height: 30px;background: url(../../../assets/images/index/row-bg3.png) no-repeat;
|
|
|
+ }
|
|
|
+ .content{font-size: 18px;position: absolute;top: 7px;left: 55px;}
|
|
|
+ }
|
|
|
+ .title1{
|
|
|
+ height: 36px;padding-top: 7px;line-height: 36px;position: relative;
|
|
|
+
|
|
|
+ .img-title{
|
|
|
+ position: absolute;top: 10px; right:10px;bottom:0;left:10px;
|
|
|
+ width: 25px;height: 25px;
|
|
|
+ img{width: 25px;height: 25px;}
|
|
|
+ }
|
|
|
+ .content{font-size: 16px;position: absolute;top: 7px;left: 40px;}
|
|
|
+ }
|
|
|
+ .button{
|
|
|
+ height: 30px;
|
|
|
+ .exportTable{float: right;margin-right: 5px;}
|
|
|
+ }
|
|
|
+ .dashboard{
|
|
|
+ display: flex;margin-top: 10px;
|
|
|
+ .dashboard-l{
|
|
|
+ // width: 540px;
|
|
|
+ width: 30%;
|
|
|
+ .row1{
|
|
|
+ height: 520px;
|
|
|
+ .row1-t{
|
|
|
+ background: #fff; height: 50px; color: #f28b46;
|
|
|
+ .row1-t-l{
|
|
|
+ .img-l{float:left;padding: 16px 10px 16px 20px;width: 18px;height: 18px;background: url(../../../assets/images/index/row-bg2.png) no-repeat;background-position: 0 8px;}
|
|
|
+ .content{float:left;width: 54%;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;font-size: 14px;line-height: 50px;padding-left: 3px;}
|
|
|
+ .img-r{float:left;padding: 16px 0 16px 17px;width: 30px;height: 15px;background: url(../../../assets/images/index/row-bg2.png) no-repeat;background-position: 0 -24px;}
|
|
|
+ }
|
|
|
+ .row1-t-r{padding-right: 20px;text-align: right;line-height: 50px;}
|
|
|
+ }
|
|
|
+
|
|
|
+ .row1-c{
|
|
|
+ display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between;margin-top: 10px;
|
|
|
+ .row1-c-l{
|
|
|
+ background: #fff;width:49%;height:225px;border-radius:3px;margin-right: 1%;position: relative;
|
|
|
+ .img-t{width:49%;height:38%;background: url(../../../assets/images/index/t1.png) no-repeat; background-size: 100% 100%;}
|
|
|
+ }
|
|
|
+ .row1-c-r{
|
|
|
+ background: #fff;width:49%;height:225px;border-radius:3px;position: relative;
|
|
|
+ .img-t{width:49%;height:38%;background: url(../../../assets/images/index/t2.png) no-repeat; background-size: 100% 100%;}
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .row1-b{
|
|
|
+ display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between;margin-top: 10px;
|
|
|
+ .row1-b-l{
|
|
|
+ background: #fff;width:49%;height:225px;border-radius:3px;margin-right:1%;position: relative;
|
|
|
+ .img-t{width:49%;height:38%;background: url(../../../assets/images/index/t4.png) no-repeat; background-size: 100% 100%;}
|
|
|
+ }
|
|
|
+ .row1-b-r{
|
|
|
+ background: #fff;width:49%;height:225px;border-radius:3px;position: relative;
|
|
|
+ .img-t{width:49%;height:38%;background: url(../../../assets/images/index/t3.png) no-repeat; background-size: 100% 100%;}
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .row2{
|
|
|
+ margin-top:10px;height: 375px;background: #fff;
|
|
|
+ .img-title{background-position: 0 0;}
|
|
|
+ .todayPlan{
|
|
|
+ display: flex; flex-direction: row;margin-top: 10px;
|
|
|
+ div{
|
|
|
+ flex: 1;position: relative;
|
|
|
+ .bottom{
|
|
|
+ width: 99%;height: 70px;background: #f9f9f9;margin: 30px auto 5px;display: flex; flex-direction: row;text-align: center;
|
|
|
+ div{
|
|
|
+ flex: 1;height: 42px;color: #333333;
|
|
|
+ }
|
|
|
+ .bottom-l{
|
|
|
+ border-right: 1px solid #e0e0e0;margin-top: 15px;width: 100%;
|
|
|
+ .bottom-l-t{
|
|
|
+ height: 30px;
|
|
|
+ b{font-size: 18px;}
|
|
|
+ }
|
|
|
+ .bottom-l-b{font-size: 12px;}
|
|
|
+ }
|
|
|
+ .bottom-r{
|
|
|
+ margin-top: 15px;width: 100%;
|
|
|
+ .bottom-r-t{height: 30px;padding-left: 10px;}
|
|
|
+ .bottom-r-b{padding-left: 10px;font-size: 12px;}
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .row3{
|
|
|
+ margin-top:10px;height: 375px;background: #fff;
|
|
|
+ .img-title{background-position: 0 -90px;}
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .dashboard-r{
|
|
|
+ margin-left: 10px;flex:1;
|
|
|
+ .row1{
|
|
|
+ height: 520px;background: #fff;
|
|
|
+ .img-title{background-position: 0 -240px;}
|
|
|
+ #row2chartLine3{height: 270px;margin-top: 10px;}
|
|
|
+ .carsLength{
|
|
|
+ padding: 13px 0 0 22px;line-height: 38px;font-size: 18px;font-weight: 700;
|
|
|
+ }
|
|
|
+ .car{
|
|
|
+ height: 140px;position: relative;
|
|
|
+ .iconLeft{width:32px;height:32px;position:absolute;top:46px;left:15px; z-index:1;}
|
|
|
+ .iconRight{width:32px;height:32px;position:absolute;top:46px;right: 20px ;z-index:1;}
|
|
|
+ .carList{
|
|
|
+ padding:0 30px;height: 120px;overflow: hidden;display: flex;
|
|
|
+ .listW{
|
|
|
+ background: #f3f9f7;
|
|
|
+ float: left;
|
|
|
+ // flex: 1 1;
|
|
|
+ margin: 0 5px;position: relative;width: 50%;
|
|
|
+ .list{
|
|
|
+ width: 100%;height: 100%;border-radius: 5px;border:1px solid #000;
|
|
|
+ .list-t{
|
|
|
+ display: flex;border-bottom: 1px solid #f1f1f1;
|
|
|
+ .list-t-t{
|
|
|
+ flex: 1 1;width: 0;font-size: 12px;line-height: 22px;padding: 25px 5px 15px;text-align: center;
|
|
|
+ span{ display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .list-b{
|
|
|
+ display: flex; text-align: center;margin-top: 14px;color: #323232;
|
|
|
+ .list-b-l{
|
|
|
+ flex: 1;width: 0; height: 40px; position: relative;
|
|
|
+ .left{
|
|
|
+ .num{
|
|
|
+ font-size: 12px;
|
|
|
+ b{font-size: 12px;}
|
|
|
+ }
|
|
|
+ .weight{font-size: 12px;}
|
|
|
+ }
|
|
|
+ .right{
|
|
|
+ height: 30px;width: 1px;background: #e0e0e0;position: absolute;right: 0;top: 0;bottom: 0;margin-top:auto;margin-bottom:auto
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .img-checked{width: 30px;height: 28px;position: absolute;top: 0;right: 0;background: url(../../../assets/images/index/row-r6.png);}
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .row2{
|
|
|
+ margin-top:10px;height: 375px;
|
|
|
+ display: flex; flex-direction: row;
|
|
|
+ .row2-l{
|
|
|
+ margin-right: 10px; background: #fff;height:375px;border-radius:3px;flex: 1;
|
|
|
+ .img-title{background-position: 0 -30px;}
|
|
|
+ }
|
|
|
+ .row2-r{
|
|
|
+ background: #fff;height:375px;border-radius:3px;flex: 1;
|
|
|
+ .img-title{background-position: 0 -60px;}
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .row3{
|
|
|
+ margin-top:10px;height: 375px;
|
|
|
+ display: flex; flex-direction: row;
|
|
|
+ .row3-l{
|
|
|
+ margin-right: 10px; background: #fff;height:375px;border-radius:3px;flex: 1;
|
|
|
+ .img-title{background-position: 0 -120px;}
|
|
|
+ }
|
|
|
+ .row3-r{
|
|
|
+ background: #fff;height:375px;border-radius:3px;flex: 1;
|
|
|
+ .img-title{background-position: 0 -150px;}
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+</style>
|
