<template>
<div class="dashboard-editor-container">
<div style="background: #F4F4F4;height: 10px;" />
<div v-if="news==1" style="display:none;" class="news"><b>消息提醒:</b>撒料计划未分配完善，请及时进行计划分配</div>
<div v-if="news==2" style="display:none;" class="news"><b>消息提醒:</b>预混计划未分配完善，请及时进行计划分配</div>
<div v-if="news==3" style="display:none;" class="news"><b>消息提醒:</b>剩料计划未分配完善，请及时进行计划分配</div>
<div class="bottom">
<!-- <h4>{{ date }}</h4> -->
<el-row :gutter="20" style="margin-top: 10px;">
<el-col :span="6">
<div class="grid-content one">
<div class="Left">
<i class="iconfont icon-shuaxin" />
</div>
<div class="Right">
<span>昨日混料准确率：</span>{{ row.list[0].A1 }}<br>
<span>近30天混料准确率：</span>{{ row.list[0].A2 }}
</div>
</div>
</el-col>
<el-col :span="6">
<div class="grid-content two">
<div class="Left">
<i class="iconfont icon-zhunqueshuai2" />
</div>
<div class="Right">
<span>昨日撒料准确率：</span>{{ row.list[1].A1 }}<br>
<span>近30天撒料准确率：</span>{{ row.list[1].A2 }}
</div>
</div>
</el-col>
<el-col :span="6">
<div class="grid-content three">
<div class="Left">
<i class="iconfont icon-zhinengsiwei" style="font-size: 40px;" />
</div>
<div class="Right">
<span>昨日撒料正确率：</span>{{ row.list[2].A1 }}<br>
<span>近30天撒料正确率：</span>{{ row.list[2].A2 }}
</div>
</div>
</el-col>
<el-col :span="6">
<div class="grid-content four">
<div class="Left">
<i class="iconfont icon-siliaotoufangjilu" style="font-size: 50px;" />
</div>
<div class="Right">
<span>昨日撒料偏差：</span>{{ row.list[3].A1 }} min<br>
<span>近30天撒料偏差：</span>{{ row.list[3].A2 }} min
</div>
</div>
</el-col>
</el-row>
<el-row :gutter="20" style="margin-top: 20px;">
<el-col :span="6">
<div class="grid-content" style="height:500px;background: #fff;">
<div style="height: 250px; border-bottom: 1px solid #000;">
<!-- <div class="Title">今日计划统计</div> -->
<b style="padding-left: 10px;line-height: 50px;font-size: 20px;">今日计划统计</b><br>
<div style="text-align: center;">
<b style="padding-right: 10px;font-size: 14px;">完成车次：{{ row2.chart1.chartLine_data.data1 }}</b>
<b style="padding-right: 10px;font-size: 14px;">计划车次：{{ row2.chart1.chartLine_data.data2 }}</b>
</div>
<div id="row2chartLine1" style="height: 150px;" />
</div>
<div style="height: 250px;">
<div style="text-align: center;padding-top:50px;">
<b style="padding-right: 5px;font-size: 14px;">完成重量：{{ row2.chart2.chartLine_data.data1 }}kg</b>
<b style="padding-right: 5px;font-size: 14px;">计划重量：{{ row2.chart2.chartLine_data.data2 }}kg</b>
</div>
<div id="row2chartLine2" style="height: 150px;" />
</div>
</div>
</el-col>
<el-col :span="18" style="margin-top:-20px;">
<div class="grid-content" style="height:500px;">
<div style="height:350px;">
<div style="font-size:14px;color:#666;margin:0 auto;position: relative;">
<span style="line-height:30px;position:absolute;right:190px;top:30px;"><i class="el-icon-caret-top" style="color:#ff3131;line-height:30px;font-size:30px;" /><b style="line-height:32px;">开始重量</b></span>
<span style="line-height:30px;position:absolute;right:100px;top:30px;"><i class="el-icon-caret-top" style="color:#61a5e8;line-height:30px;font-size:30px;" /><b style="line-height:32px;">结束重量</b></span>
</div>
<div class="Title">实时监控</div>
<div id="row2chartLine3" style="height: 90%;" />
</div>
<div class="car" style="position: relative;">
<p style="position: absolute;left:50px;top:-50px;">当前车辆数：3</p>
<i ref="left" class="el-icon-arrow-left" @click="handleLeft" />
<el-row :gutter="20" class="carList">
<el-col v-for="(item,index) in list" :key="index" :span="8">
<div ref="list" class="list" :style="{'background': item.background,'color':item.color}" @mouseover="mouseOver" @mouseleave="mouseLeave" @click="handleList(index,item.id)">
<el-row :gutter="20">
<el-col :span="12" class="list-l">
<!-- 车辆/描述 -->
<p><span>车辆：</span>{{ item.A1 }}</p>
<el-tooltip placement="top">
<p slot="content">
<span v-if="item.states == 1">饲料：{{ item.A2 }}</span>
<span v-if="item.states == 2">栏舍：{{ item.A2 }}</span>
</p>
<p>
<span v-if="item.states == 1">饲料：{{ item.A2 }}</span>
<span v-if="item.states == 2">栏舍：{{ item.A2 }}</span>
</p>
</el-tooltip>
<p><span>完成重量：</span>{{ item.A3 }}</p>
<p><span>完成度：</span>{{ item.A4 }}</p>
</el-col>
<el-col :span="12" class="list-r">
<!-- 栏舍/饲料 -->
<el-tooltip placement="top">
<p slot="content"> <span>描述：</span> {{ item.A5 }} </p>
<p> <span>描述：</span> {{ item.A5 }} </p>
</el-tooltip>
<p><span>计划重量：</span>{{ item.A6 }}</p>
<p><span>剩余重量：</span>{{ item.A7 }}</p>
<p><span>车辆已载重：</span>{{ item.A8 }}</p>
</el-col>
</el-row>
</div>
</el-col>
</el-row>
<i ref="right" class="el-icon-arrow-right" @click="handleRight" />
</div>
</div>
</el-col>
</el-row>
<el-row :gutter="20">
<!-- 计划统计 -->
<el-col :span="12" style="position: relative;">
<div class="Title">计划统计</div>
<div style="background: #fff;height:50px;">
<el-button type="text" style="float: right;margin-right: 5px;" @click="handleExport('row3chartLine1')">导出</el-button>
<el-button type="text" style="float: right;margin-right: 5px;" @click="handleTable('row3chartLine1')">切换表格</el-button>
</div>
<div id="row3chartLine1" style="background: #fff;height:350px;" />
<div v-if="row3.chart1.isTable" class="table" style="position: absolute;width:97%;top:19px;">
<el-button type="text" style="float: right;margin-right: 5px;" @click="handleExport('row3chartLine1')">导出</el-button>
<el-button type="text" style="float: right;margin-right: 5px;" @click="handleChart('row3chartLine1')">切换图表</el-button>
<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%;"
height="400"
:row-style="rowStyle"
:cell-style="cellStyle"
class="elTable table-fixed"
>
<el-table-column label="日期" min-width="110px" align="center" prop="A1" />
<el-table-column label="执行重量(kg)" min-width="110px" align="center" prop="A2" />
<el-table-column label="配方理论重量（kg）" min-width="110px" align="center" prop="A3" />
<el-table-column label="计划准确率" min-width="110px" align="center" prop="A4" />
<el-table-column label="计划取消重量(kg)" min-width="110px" align="center" prop="A5" />
<el-table-column label="计划准确率(去除取消重量)" min-width="110px" align="center" prop="A6" />
<el-table-column label="计划正确数" min-width="110px" align="center" prop="A7" />
<el-table-column label="计划数" min-width="110px" align="center" prop="A8" />
<el-table-column label="计划正确率" min-width="110px" align="center" prop="A9" />
</el-table>
</div>
</el-col>
<!-- 泌乳牛采食量 -->
<el-col :span="12" style="position: relative;">
<div class="Title">泌乳牛采食量</div>
<div style="background: #fff;height:50px;">
<el-button type="text" style="float: right;margin-right: 5px;" @click="handleExport('row3chartLine2')">导出</el-button>
<el-button type="text" style="float: right;margin-right: 5px;" @click="handleTable('row3chartLine2')">切换表格</el-button>
</div>
<div id="row3chartLine2" style="background: #fff;height:350px;" />
<div v-if="row3.chart2.isTable" class="table" style="position: absolute;width:97%;top:19px;">
<el-button type="text" style="float: right;margin-right: 5px;" @click="handleExport('row3chartLine2')">导出</el-button>
<el-button type="text" style="float: right;margin-right: 5px;" @click="handleChart('row3chartLine2')">切换图表</el-button>
<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%;"
height="400"
:row-style="rowStyle"
:cell-style="cellStyle"
class="elTable table-fixed"
>
<el-table-column label="日期" min-width="110px" align="center" prop="A1" />
<el-table-column label="泌乳牛采食量(kg)" min-width="110px" align="center" prop="A2" />
<el-table-column label="泌乳牛产奶量（kg）" min-width="110px" align="center" prop="A3" />
</el-table>
</div>
</el-col>
</el-row>
<el-row :gutter="20">
<!-- 成本统计 -->
<el-col :span="8">
<div class="Title">成本统计</div>
<div id="row4chartLine1" style="background: #fff;height:400px;" />
</el-col>
<!-- 出库统计 -->
<el-col :span="8">
<div class="Title">出库统计</div>
<div id="row4chartLine2" style="background: #fff;height:400px;" />
</el-col>
<el-col :span="8">
<div class="Title">库存预警</div>
<div id="table" style="height: 400px;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: 100%;background: #fff;"
height="400"
:row-style="rowStyle"
:cell-style="cellStyle"
class="elTable table-fixed"
>
<el-table-column label="序号" min-width="80px" align="center" prop="A1" />
<el-table-column label="饲料名称" min-width="80px" align="center" prop="A2" />
<el-table-column label="库存量（kg）" min-width="70px" align="center" prop="A3" />
<el-table-column label="剩余使用天数" min-width="80px" align="center" prop="A4" />
</el-table>
<!-- <span style="line-height: 50px;color:#82CBB3;text-align: center;width: 100%;display: inline-block;cursor:pointer;" @click="handleMore">查看更多</span> -->
</div>
</el-col>
</el-row>
</div>
</div>
</template>
<script>
import { GetDataByName } from '@/api/common'
import Cookies from 'js-cookie'
import { parseTime } from '@/utils/index.js'
import echarts from 'echarts'
require('echarts/theme/macarons')
var myKey = 0
export default {
name: 'DashboardEditor',
data() {
return {
date: parseTime(new Date(), '{y}-{m}-{d}'),
'list': [],
news: 1,
row: {
list: [
{ 'A1': '95.2%', 'A2': '91.5%' },
{ 'A1': '90.4%', 'A2': '90.2%' },
{ 'A1': '95.6%', 'A2': '93.2%' },
{ 'A1': '15', 'A2': '21' }
]
},
row2: {
chart1: {
chartLine: null,
chartLine_data: {},
getdataListParm: {
name: 'getBarmilkList',
page: 1,
offset: 1,
pagecount: 10,
returntype: 'Map',
parammaps: {
pastureid: Cookies.get('pastureid'),
enable: ''
}
},
list: [],
total: 0,
listLoading: true
},
chart2: {
chartLine: null,
chartLine_data: {},
getdataListParm: {
name: 'getBarmilkList',
page: 1,
offset: 1,
pagecount: 10,
returntype: 'Map',
parammaps: {
pastureid: Cookies.get('pastureid'),
enable: ''
}
},
list: [],
total: 0,
listLoading: true
},
chart3: {
chartLine: null,
chartLine_data: {},
getdataListParm: {
name: 'getBarmilkList',
page: 1,
offset: 1,
pagecount: 3,
returntype: 'Map',
parammaps: {
pastureid: Cookies.get('pastureid'),
enable: ''
}
},
list: [],
total: 0,
listLoading: true,
pageNum: '',
pages: '',
getdataListParmList: {
name: 'getBarmilkList',
page: 1,
offset: 1,
pagecount: 3,
returntype: 'Map',
parammaps: {
pastureid: Cookies.get('pastureid'),
enable: ''
}
},
list2: [],
total2: 0,
listLoading2: true,
pageNum2: '',
pages2: ''
}
},
row3: {
chart1: {
chartLine: null,
chartLine_data: {},
getdataListParm: {
name: 'getBarmilkList',
page: 1,
offset: 1,
pagecount: 10,
returntype: 'Map',
parammaps: {
pastureid: Cookies.get('pastureid'),
enable: ''
}
},
list: [],
total: 0,
listLoading: true,
isChart: true,
isTable: false,
table: {
getdataListParm: {
name: 'getBarmilkList',
page: 1,
offset: 1,
pagecount: 10,
returntype: 'Map',
parammaps: {
pastureid: Cookies.get('pastureid'),
enable: ''
}
},
tableKey: 1,
list: [],
total: 0,
listLoading: true
}
},
chart2: {
chartLine: null,
chartLine_data: {},
getdataListParm: {
name: 'getBarmilkList',
page: 1,
offset: 1,
pagecount: 10,
returntype: 'Map',
parammaps: {
pastureid: Cookies.get('pastureid'),
enable: ''
}
},
list: [],
total: 0,
listLoading: true,
isChart: true,
isTable: false,
table: {
getdataListParm: {
name: 'getBarmilkList',
page: 1,
offset: 1,
pagecount: 10,
returntype: 'Map',
parammaps: {
pastureid: Cookies.get('pastureid'),
enable: ''
}
},
tableKey: 1,
list: [],
total: 0,
listLoading: true
}
}
},
row4: {
chart1: {
chartLine: null,
chartLine_data: {},
getdataListParm: {
name: 'getBarmilkList',
page: 1,
offset: 1,
pagecount: 10,
returntype: 'Map',
parammaps: {
pastureid: Cookies.get('pastureid'),
enable: ''
}
},
list: [],
total: 0,
listLoading: true
},
chart2: {
chartLine: null,
chartLine_data: {},
getdataListParm: {
name: 'getBarmilkList',
page: 1,
offset: 1,
pagecount: 10,
returntype: 'Map',
parammaps: {
pastureid: Cookies.get('pastureid'),
enable: ''
}
},
list: [],
total: 0,
listLoading: true
},
table: {
getdataListParm: {
name: 'getBarmilkList',
page: 1,
offset: 1,
pagecount: 5,
returntype: 'Map',
parammaps: {
pastureid: Cookies.get('pastureid')
}
},
tableKey: 1,
list: [],
total: 0,
listLoading: true,
temp: {}
}
},
rowStyle: { maxHeight: 50 + 'px', height: 45 + 'px' },
cellStyle: { padding: 0 + 'px' },
timer: ''
}
},
created() {
this.getChart1()
this.getChart2()
this.getChart3List()
console.log(this.$route)
this.getChart4()
this.getChart5()
this.getChart6()
this.getChart7()
this.getTable8()
},
mounted() {
const that = this
let num = 0
// 创建并执行定时器
this.timer = setInterval(() => {
// 当num等于100时清除定时器
if (num >= 3) {
// clearInterval(that.timer)
num = 0
console.log('关闭了定时器===')
}
myKey = num
if (myKey == 0) {
this.$refs.list[0].style.background = '#7ac3ec'
this.$refs.list[0].style.color = '#f7f941'
this.$refs.list[1].style.background = '#7ac3ec'
this.$refs.list[1].style.color = '#fff'
this.$refs.list[2].style.background = '#7ac3ec'
this.$refs.list[2].style.color = '#fff'
this.row2.chart3.chartLine_data = {
data1: ['06:34:10', '06:34:11', '06:34:12', '06:34:13', '06:34:14', '06:34:14', '06:34:15', '06:34:16', '06:34:17', '06:34:18', '06:34:19', '06:34:20', '06:34:21', '06:34:22', '06:34:23', '06:34:29', '06:34:44', '06:34:59', '06:35:14', '06:35:29', '06:35:44', '06:35:59', '06:36:14', '06:36:29', '06:36:44', '06:36:59', '06:37:14', '06:37:28', '06:37:29', '06:37:44', '06:37:59', '06:38:14', '06:38:29', '06:38:44', '06:38:59', '06:38:59', '06:39:14', '06:39:29', '06:39:44', '06:39:59', '06:40:08', '06:40:14', '06:40:29', '06:40:44', '06:40:59', '06:41:14', '06:41:29', '06:41:40', '06:41:44', '06:41:59', '06:42:14', '06:42:29', '06:42:44', '06:42:59', '06:43:09', '06:43:14', '06:43:29', '06:43:44', '06:43:59', '06:44:14', '06:44:29', '06:44:44'],
data2: [141.6, 141.6, 141.6, 141.6, 141.6, 141.6, 141.6, 141.6, 141.6, 141.6, 141.6, 141.6, 141.6, 141.6, 141.6, 141.6, 141.6, 141.6, 141.6, 141.6, 141.6, 141.6, 141.6, 141.6, 141.6, 141.6, 141.6, 141.6, 341.46, 341.46, 341.46, 341.46, 341.46, 341.46, 341.46, 437.73, 437.73, 437.73, 437.73, 437.73, 437.73, 687.33, 687.33, 687.33, 687.33, 687.33, 687.33, 687.33, 959.24, 959.24, 959.24, 959.24, 959.24, 959.24, 959.24, 1107.6, 1107.6, 1107.6, 1107.6, 1107.6, 1107.6, 1107.6],
data3: [-8, -8, -8, -8, -8, -8, -8, -8, -8, -8, -8, -8, -8, -8, -8, -8, -11, -9, -4, -8, -10, -8, -8, 0, -1, 32, 88, 142, 143, 141, 154, 215, 250, 256, 338, 337, 329, 325, 409, 420, 438, 434, 432, 447, 439, 496, 655, 680, 678, 670, 669, 741, 752, 924, 958, 962, 955, 961, 956, 956, 968],
data4: [
['06:34:10', -8],
['06:37:28', 142],
['06:37:29', 143],
['06:38:59', 338],
['06:38:59', 337],
['06:40:08', 438],
['06:40:08', 438],
['06:41:40', 680],
['06:41:44', 678],
['06:43:09', 958],
['06:43:09', 958]
]
}
this.roadChartLine3(this.row2.chart3.chartLine_data)
} else if (myKey == 1) {
this.$refs.list[0].style.background = '#7ac3ec'
this.$refs.list[0].style.color = '#fff'
this.$refs.list[myKey].style.background = '#7ac3ec'
this.$refs.list[myKey].style.color = '#f7f941'
this.$refs.list[2].style.background = '#7ac3ec'
this.$refs.list[2].style.color = '#fff'
this.row2.chart3.chartLine_data = {
data1: ['06:43:09', '06:43:14', '06:43:29', '06:43:44', '06:43:59', '06:44:14', '06:44:29', '06:44:44', '06:44:44', '06:44:59', '06:45:14', '06:45:30', '06:45:45', '06:46:00', '06:46:15', '06:46:30', '06:46:45', '06:47:00', '06:47:15', '06:47:30', '06:47:40', '06:47:45', '06:48:00', '06:48:15', '06:48:30', '06:48:45', '06:49:00', '06:49:15', '06:49:20', '06:49:30', '06:49:45', '06:50:00', '06:50:15', '06:50:30', '06:50:45', '06:51:00', '06:51:15', '06:51:30', '06:51:45', '06:52:00', '06:52:15', '06:52:30', '06:52:45', '06:53:00', '06:53:14', '06:53:15', '06:53:30', '06:53:45', '06:54:00', '06:54:15', '06:54:30', '06:54:45', '06:55:00', '06:55:15', '06:55:30'],
data2: [959.24, 959.24, 959.24, 959.24, 959.24, 959.24, 959.24, 1107.6, 1107.6, 1107.6, 1107.6, 1107.6, 1107.6, 1107.6, 2496.22, 2496.22, 2496.22, 2496.22, 2496.22, 2496.22, 2496.22, 2496.22, 2496.22, 2496.22, 2496.22, 2496.22, 2496.22, 3233.97, 3233.97, 3233.97, 3233.97, 3233.97, 3233.97, 3233.97, 3233.97, 3834.38, 3834.38, 3834.38, 3834.38, 3834.38, 3834.38, 3834.38, 3834.38, 3834.38, 3834.38, 3834.38, 3834.38, 3834.38, 3834.38, 3834.38, 3834.38],
data3: [958, 962, 955, 961, 956, 956, 968, 1100, 1099, 1102, 1115, 1103, 1217, 1266, 1681, 1919, 1968, 2139, 2426, 2479, 2486, 2489, 2480, 2502, 2498, 2769, 3097, 3224, 3236, 3242, 3238, 3282, 3320, 3369, 3411, 3458, 3499, 3540, 3580, 3632, 3668, 3708, 3753, 3798, 3830, 3830],
data4: [
['06:44:44', 1100],
['06:44:44', 1099],
['06:47:40', 2486],
['06:47:45', 2489],
['06:49:20', 3236],
['06:49:20', 3236],
['06:53:14', 3830],
['06:53:15', 3830]
]
}
this.roadChartLine3(this.row2.chart3.chartLine_data)
} else if (myKey == 2) {
this.$refs.list[0].style.background = '#7ac3ec'
this.$refs.list[0].style.color = '#fff'
this.$refs.list[1].style.background = '#7ac3ec'
this.$refs.list[1].style.color = '#fff'
this.$refs.list[myKey].style.background = '#7ac3ec'
this.$refs.list[myKey].style.color = '#f7f941'
this.row2.chart3.chartLine_data = {
data1: ['06:53:14', '06:53:15', '06:53:30', '06:53:45', '06:54:00', '06:54:15', '06:54:30', '06:54:45', '06:55:00', '06:55:15', '06:55:30', '06:55:45', '06:56:00', '06:56:15', '06:56:30', '06:56:45', '06:57:00', '06:57:15', '06:57:30', '06:57:45', '06:58:00', '06:58:16', '06:58:31', '06:58:46', '06:59:01', '06:59:03', '06:59:16', '06:59:31', '06:59:46', '07:00:01', '07:00:16', '07:00:31', '07:00:46', '07:01:01', '07:01:16', '07:01:31', '07:01:46', '07:02:01', '07:02:01', '07:02:16', '07:02:31', '07:02:46', '07:03:01', '07:03:16', '07:03:31', '07:03:46', '07:04:01', '07:04:16', '07:04:31', '07:04:46', '07:05:01', '07:05:16', '07:05:20', '07:05:31', '07:05:46', '07:06:01', '07:06:16', '07:06:31', '07:06:46', '07:07:01', '07:07:10', '07:07:16', '07:07:31', '07:07:46', '07:08:01', '07:08:16', '07:08:31', '07:08:46', '07:09:01', '07:09:16', '07:09:31', '07:09:46'],
data2: [3027.62, 3027.62, 3027.62, 3027.62, 3027.62, 3027.62, 3027.62, 3027.62, 3027.62, 3027.62, 3027.62, 3027.62, 3027.62, 3027.62, 3027.62, 3027.62, 3027.62, 3027.62, 3027.62, 3027.62, 3027.62, 3027.62, 3027.62, 3027.62, 3027.62, 1223.14, 1223.14, 1223.14, 1223.14, 1223.14, 1223.14, 1223.14, 1223.14, 1223.14, 1223.14, 1223.14, 1223.14, 1223.14, 702.38, 702.38, 702.38, 702.38, 702.38, 702.38, 702.38, 702.38, 702.38, 702.38, 702.38, 702.38, 702.38, 702.38, 702.38, 351.82, 351.82, 351.82, 351.82, 351.82, 351.82, 351.82, -16.48, -16.48, -16.48, -16.48, -16.48, -16.48, -16.48, -16.48, -16.48, -16.48, -16.48],
data3: [3837, 3840, 3832, 3829, 3842, 3817, 3825, 3822, 3850, 3820, 3830, 3837, 3833, 3830, 3832, 3829, 3814, 3681, 3575, 3423, 3268, 3138, 3036, 3032, 3039, 3032, 3017, 3025, 3036, 2926, 2895, 2696, 2315, 1831, 1379, 1232, 1232, 1227, 1228, 1224, 1225, 1213, 1230, 1209, 1221, 1225, 1231, 1138, 928, 736, 708, 707, 674, 540, 530, 527, 437, 390, 356, 325, 307, 309, 310, 308, 294, 308, 306, 293, 278, 226],
data4: [
['06:59:01', 3036],
['06:59:03', 3032],
['07:02:01', 1232],
['07:02:01', 1232],
['07:05:16', 736],
['07:05:20', 708],
['07:07:10', 356],
['07:07:10', 356]
]
}
this.roadChartLine3(this.row2.chart3.chartLine_data)
}
console.log(num++)
}, 1000000)
},
methods: {
// 今日计划统计-完成车次
getChart1() {
this.row2.chart1.listLoading = true
GetDataByName(this.row2.chart1.getdataListParm).then(response => {
console.log('完成车次数据', response.data.list)
if (response.data.list !== null) {
this.row2.chart1.chartLine_data = {
data1: 7,
data2: 7
}
this.row2.chart1.total = response.data.total
this.roadChartLine1(this.row2.chart1.chartLine_data)
} else {
this.row2.chart1.list = []
}
setTimeout(() => {
this.row2.chart1.listLoading = false
}, 100)
})
},
roadChartLine1(chartLine_data) {
if (this.row2.chart1.chartLine != null) {
this.row2.chart1.chartLine.dispose()
}
this.row2.chart1.chartLine = echarts.init(document.getElementById('row2chartLine1'))
var option = {
// 标题组件，包含主标题和副标题
title: {
show: true,
x: 'center',
textStyle: {
fontSize: '15',
color: 'green',
fontWeight: 'bold'
}
},
// 提示框组件
tooltip: {
// 是否显示提示框组件，包括提示框浮层和 axisPointe
show: false,
// 触发类型: item:数据项触发，axis：坐标轴触发
trigger: 'item',
formatter: '{a} <br/>{b}: {c} ({d}%)'
},
// 系列列表。每个系列通过 type 决定自己的图表类型
series: [{
// 系列名称，用于tooltip的显示，legend 的图例筛选，在 setOption 更新数据和配置项时用于指定对应的系列。
name: '任务进度',
type: 'pie',
// 饼图的半径，数组的第一项是内半径，第二项是外半径
radius: ['80%', '70%'],
// 是否启用防止标签重叠策略，默认开启
avoidLabelOverlap: false,
hoverAnimation: false,
// 标签的视觉引导线样式，在 label 位置 设置为'outside'的时候会显示视觉引导线
labelLine: {
normal: {
show: false
}
},
data: [{
value: chartLine_data.data1, // 数据值
name: '完成率', // 数据项名称
selected: false, // 该数据项是否被选中
// 单个扇区的标签配置
label: {
normal: {
show: true, // 是显示标签
position: 'center',
fontSize: 20,
// 标签内容格式器，支持字符串模板和回调函数两种形式，字符串模板与回调函数返回的字符串均支持用 \n 换行
formatter: '{b}\n{d}%'
}
}
}, {
value: chartLine_data.data2 - chartLine_data.data1,
label: {
normal: {
show: false
}
}
}]
}],
color: ['#409EFF', '#B7DBFF']
}
this.row2.chart1.chartLine.setOption(option)
window.onresize = function() {
this.row2.chart1.chartLine.resize()
}
},
// 今日计划统计-完成重量
getChart2() {
this.row2.chart2.listLoading = true
GetDataByName(this.row2.chart2.getdataListParm).then(response => {
console.log('完成重量数据', response.data.list)
if (response.data.list !== null) {
this.row2.chart2.chartLine_data = {
data1: 3023,
data2: 3050
}
this.row2.chart2.total = response.data.total
this.roadChartLine2(this.row2.chart2.chartLine_data)
} else {
this.row2.chart2.list = []
}
setTimeout(() => {
this.row2.chart2.listLoading = false
}, 100)
})
},
roadChartLine2(chartLine_data) {
if (this.row2.chart2.chartLine != null) {
this.row2.chart2.chartLine.dispose()
}
this.row2.chart2.chartLine = echarts.init(document.getElementById('row2chartLine2'))
var option = {
// 标题组件，包含主标题和副标题
title: {
show: true,
x: 'center',
textStyle: {
fontSize: '15',
color: 'green',
fontWeight: 'bold'
}
},
// 提示框组件
tooltip: {
// 是否显示提示框组件，包括提示框浮层和 axisPointe
show: false,
// 触发类型: item:数据项触发，axis：坐标轴触发
trigger: 'item',
formatter: '{a} <br/>{b}: {c} ({d}%)'
},
// 系列列表。每个系列通过 type 决定自己的图表类型
series: [{
// 系列名称，用于tooltip的显示，legend 的图例筛选，在 setOption 更新数据和配置项时用于指定对应的系列。
name: '任务进度',
type: 'pie',
// 饼图的半径，数组的第一项是内半径，第二项是外半径
radius: ['80%', '70%'],
// 是否启用防止标签重叠策略，默认开启
avoidLabelOverlap: false,
hoverAnimation: false,
// 标签的视觉引导线样式，在 label 位置 设置为'outside'的时候会显示视觉引导线
labelLine: {
normal: {
show: false
}
},
data: [{
value: chartLine_data.data1, // 数据值
name: '完成率', // 数据项名称
selected: false, // 该数据项是否被选中
// 单个扇区的标签配置
label: {
normal: {
show: true, // 是显示标签
position: 'center',
fontSize: 20,
// 标签内容格式器，支持字符串模板和回调函数两种形式，字符串模板与回调函数返回的字符串均支持用 \n 换行
formatter: '{b}\n{d}%'
}
}
}, {
value: chartLine_data.data2 - chartLine_data.data1,
label: {
normal: {
show: false
}
}
}]
}],
color: ['#409EFF', '#B7DBFF']
}
this.row2.chart2.chartLine.setOption(option)
window.onresize = function() {
this.row2.chart2.chartLine.resize()
}
},
// 实时监控
getChart3() {
this.row2.chart3.listLoading = true
GetDataByName(this.row2.chart3.getdataListParm).then(response => {
console.log('实时监控数据', response.data.list)
if (response.data.list !== null) {
console.log(this.$refs.list)
this.$refs.list[myKey].style.background = '#7ac3ec'
console.log(this.$refs)
this.row2.chart3.chartLine_data = {
data1: ['06:34:10', '06:34:11', '06:34:12', '06:34:13', '06:34:14', '06:34:14', '06:34:15', '06:34:16', '06:34:17', '06:34:18', '06:34:19', '06:34:20', '06:34:21', '06:34:22', '06:34:23', '06:34:29', '06:34:44', '06:34:59', '06:35:14', '06:35:29', '06:35:44', '06:35:59', '06:36:14', '06:36:29', '06:36:44', '06:36:59', '06:37:14', '06:37:28', '06:37:29', '06:37:44', '06:37:59', '06:38:14', '06:38:29', '06:38:44', '06:38:59', '06:38:59', '06:39:14', '06:39:29', '06:39:44', '06:39:59', '06:40:08', '06:40:14', '06:40:29', '06:40:44', '06:40:59', '06:41:14', '06:41:29', '06:41:40', '06:41:44', '06:41:59', '06:42:14', '06:42:29', '06:42:44', '06:42:59', '06:43:09', '06:43:14', '06:43:29', '06:43:44', '06:43:59', '06:44:14', '06:44:29', '06:44:44'],
data2: [141.6, 141.6, 141.6, 141.6, 141.6, 141.6, 141.6, 141.6, 141.6, 141.6, 141.6, 141.6, 141.6, 141.6, 141.6, 141.6, 141.6, 141.6, 141.6, 141.6, 141.6, 141.6, 141.6, 141.6, 141.6, 141.6, 141.6, 141.6, 341.46, 341.46, 341.46, 341.46, 341.46, 341.46, 341.46, 437.73, 437.73, 437.73, 437.73, 437.73, 437.73, 687.33, 687.33, 687.33, 687.33, 687.33, 687.33, 687.33, 959.24, 959.24, 959.24, 959.24, 959.24, 959.24, 959.24, 1107.6, 1107.6, 1107.6, 1107.6, 1107.6, 1107.6, 1107.6],
data3: [-8, -8, -8, -8, -8, -8, -8, -8, -8, -8, -8, -8, -8, -8, -8, -8, -11, -9, -4, -8, -10, -8, -8, 0, -1, 32, 88, 142, 143, 141, 154, 215, 250, 256, 338, 337, 329, 325, 409, 420, 438, 434, 432, 447, 439, 496, 655, 680, 678, 670, 669, 741, 752, 924, 958, 962, 955, 961, 956, 956, 968],
data4: [
['06:34:10', -8],
['06:37:28', 142],
['06:37:29', 143],
['06:38:59', 338],
['06:38:59', 337],
['06:40:08', 438],
['06:40:08', 438],
['06:41:40', 680],
['06:41:44', 678],
['06:43:09', 958],
['06:43:09', 958]
]
}
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 = []
}
setTimeout(() => {
this.row2.chart3.listLoading = false
}, 100)
})
},
roadChartLine3(chartLine_data) {
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: ['#61a5e8', '#ff3131'], // 关键加上这句话，legend的颜色和折线的自定义颜色就一致了
legend: {
icon: 'rectangle',
data: ['设计重量', '实际重量'],
// right: '20%',
textStyle: {
fontSize: 12,
color: '#666'
}
},
/* grid:{y:15},*/
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' // 这里用参数代替了
}
}
}
],
series: [{
symbol: 'none',
name: '实际重量',
type: 'line',
// step: 'end',
data: chartLine_data.data3,
smooth: true,
barWidth: '37',
itemStyle: {
normal: {
lineStyle: { color: '#61a5e8' }
}
}
}, {
symbol: 'none',
name: '设计重量',
type: 'line',
barWidth: '37',
data: chartLine_data.data2
}, {
symbol: 'triangle',
symbolSize: 10,
itemStyle: {
normal: {
lineStyle: { color: '#ff3131' },
color: function(param) {
const colorList = ['#61a5e8', '#ff3131']
let x = ''
param.dataIndex % 2 == 0 ? x = 1 : x = 2
if (x == '1') {
return colorList[1]
} else {
return colorList[0]
}
}
}
},
data: chartLine_data.data4,
type: 'scatter'
}]
}
this.row2.chart3.chartLine.setOption(option)
window.onresize = function() {
this.row2.chart3.chartLine.resize()
}
},
// 图三轮询列表
getChart3List() {
this.row2.chart3.listLoading2 = true
GetDataByName(this.row2.chart3.getdataListParmList).then(response => {
console.log('实时监控数据', response.data.list)
this.list = [
{ 'id': 1, 'A1': '1', 'A2': '进口燕麦草，1号苜蓿，棉籽', 'A3': '958kg', 'A4': '99.89%', 'A5': '新配方', 'A6': '959kg', 'A7': '1kg', 'A8': '958kg', states: 1, 'color': '#fff', 'background': '#7ac3ec' },
{ 'id': 2, 'A1': '1', 'A2': '青贮苜蓿，湿储玉米，啤酒糟，青贮玉米，水', 'A3': '2872', 'A4': '99.89%', 'A5': '新配方', 'A6': '2875.14', 'A7': '3.14kg', 'A8': '3830kg', states: 1, 'color': '#fff', 'background': '#7ac3ec' },
{ 'id': 3, 'A1': '1', 'A2': '17号,5号南', 'A3': '3860kg', 'A4': '99.75%', 'A5': '新配方', 'A6': '3869.52', 'A7': '9.52kg', 'A8': '3860kg', states: 2, 'color': '#fff', 'background': '#7ac3ec' }
]
this.carLength = this.list.length
if (response.data.list !== null) {
this.row2.chart3.total2 = response.data.total
this.row2.chart3.pageNum2 = response.data.pageNum
this.row2.chart3.pages2 = response.data.pages
this.getChart3()
if (this.row2.chart3.getdataListParmList.offset == 1) {
this.$refs.left.style.color = '#ccc'
} else {
// this.$refs.left.style.color = '#000'
this.$refs.left.style.color = '#ccc'
}
if (response.data.pageNum == response.data.pages) {
this.$refs.right.style.color = '#ccc'
} else {
// this.$refs.right.style.color = '#000'
this.$refs.right.style.color = '#ccc'
}
} else {
this.row2.chart3.list2 = []
}
setTimeout(() => {
this.row2.chart3.listLoading2 = false
}, 100)
})
},
// 向左切换
handleLeft() {
console.log('左')
if (this.row2.chart3.getdataListParmList.offset > 1) {
this.row2.chart3.getdataListParmList.offset = this.row2.chart3.getdataListParmList.offset - 1
this.$refs.left.style.color = '#ccc'
this.$refs.right.style.color = '#000'
}
},
// 向右切换
handleRight() {
if (this.row2.chart3.pageNum2 !== this.row2.chart3.pages2) {
this.row2.chart3.getdataListParmList.offset = this.row2.chart3.getdataListParmList.offset + 1
this.$refs.left.style.color = '#000'
this.$refs.right.style.color = '#ccc'
}
},
// 移入
mouseOver() {
console.log('移入')
clearInterval(this.timer)
},
// 移除
mouseLeave() {
const that = this
let num = 0
// 创建并执行定时器
this.timer = setInterval(() => {
// 当num等于100时清除定时器
if (num >= 3) {
// clearInterval(that.timer)
num = 0
console.log('关闭了定时器===')
}
myKey = num
if (myKey == 0) {
this.$refs.list[0].style.background = '#7ac3ec'
this.$refs.list[0].style.color = '#f7f941'
this.$refs.list[1].style.background = '#7ac3ec'
this.$refs.list[1].style.color = '#fff'
this.$refs.list[2].style.background = '#7ac3ec'
this.$refs.list[2].style.color = '#fff'
this.row2.chart3.chartLine_data = {
data1: ['06:34:10', '06:34:11', '06:34:12', '06:34:13', '06:34:14', '06:34:14', '06:34:15', '06:34:16', '06:34:17', '06:34:18', '06:34:19', '06:34:20', '06:34:21', '06:34:22', '06:34:23', '06:34:29', '06:34:44', '06:34:59', '06:35:14', '06:35:29', '06:35:44', '06:35:59', '06:36:14', '06:36:29', '06:36:44', '06:36:59', '06:37:14', '06:37:28', '06:37:29', '06:37:44', '06:37:59', '06:38:14', '06:38:29', '06:38:44', '06:38:59', '06:38:59', '06:39:14', '06:39:29', '06:39:44', '06:39:59', '06:40:08', '06:40:14', '06:40:29', '06:40:44', '06:40:59', '06:41:14', '06:41:29', '06:41:40', '06:41:44', '06:41:59', '06:42:14', '06:42:29', '06:42:44', '06:42:59', '06:43:09', '06:43:14', '06:43:29', '06:43:44', '06:43:59', '06:44:14', '06:44:29', '06:44:44'],
data2: [141.6, 141.6, 141.6, 141.6, 141.6, 141.6, 141.6, 141.6, 141.6, 141.6, 141.6, 141.6, 141.6, 141.6, 141.6, 141.6, 141.6, 141.6, 141.6, 141.6, 141.6, 141.6, 141.6, 141.6, 141.6, 141.6, 141.6, 141.6, 341.46, 341.46, 341.46, 341.46, 341.46, 341.46, 341.46, 437.73, 437.73, 437.73, 437.73, 437.73, 437.73, 687.33, 687.33, 687.33, 687.33, 687.33, 687.33, 687.33, 959.24, 959.24, 959.24, 959.24, 959.24, 959.24, 959.24, 1107.6, 1107.6, 1107.6, 1107.6, 1107.6, 1107.6, 1107.6],
data3: [-8, -8, -8, -8, -8, -8, -8, -8, -8, -8, -8, -8, -8, -8, -8, -8, -11, -9, -4, -8, -10, -8, -8, 0, -1, 32, 88, 142, 143, 141, 154, 215, 250, 256, 338, 337, 329, 325, 409, 420, 438, 434, 432, 447, 439, 496, 655, 680, 678, 670, 669, 741, 752, 924, 958, 962, 955, 961, 956, 956, 968],
data4: [
['06:34:10', -8],
['06:37:28', 142],
['06:37:29', 143],
['06:38:59', 338],
['06:38:59', 337],
['06:40:08', 438],
['06:40:08', 438],
['06:41:40', 680],
['06:41:44', 678],
['06:43:09', 958],
['06:43:09', 958]
]
}
this.roadChartLine3(this.row2.chart3.chartLine_data)
} else if (myKey == 1) {
this.$refs.list[0].style.background = '#7ac3ec'
this.$refs.list[0].style.color = '#fff'
this.$refs.list[myKey].style.background = '#7ac3ec'
this.$refs.list[myKey].style.color = '#f7f941'
this.$refs.list[2].style.background = '#7ac3ec'
this.$refs.list[2].style.color = '#fff'
this.row2.chart3.chartLine_data = {
data1: ['06:43:09', '06:43:14', '06:43:29', '06:43:44', '06:43:59', '06:44:14', '06:44:29', '06:44:44', '06:44:44', '06:44:59', '06:45:14', '06:45:30', '06:45:45', '06:46:00', '06:46:15', '06:46:30', '06:46:45', '06:47:00', '06:47:15', '06:47:30', '06:47:40', '06:47:45', '06:48:00', '06:48:15', '06:48:30', '06:48:45', '06:49:00', '06:49:15', '06:49:20', '06:49:30', '06:49:45', '06:50:00', '06:50:15', '06:50:30', '06:50:45', '06:51:00', '06:51:15', '06:51:30', '06:51:45', '06:52:00', '06:52:15', '06:52:30', '06:52:45', '06:53:00', '06:53:14', '06:53:15', '06:53:30', '06:53:45', '06:54:00', '06:54:15', '06:54:30', '06:54:45', '06:55:00', '06:55:15', '06:55:30'],
data2: [959.24, 959.24, 959.24, 959.24, 959.24, 959.24, 959.24, 1107.6, 1107.6, 1107.6, 1107.6, 1107.6, 1107.6, 1107.6, 2496.22, 2496.22, 2496.22, 2496.22, 2496.22, 2496.22, 2496.22, 2496.22, 2496.22, 2496.22, 2496.22, 2496.22, 2496.22, 3233.97, 3233.97, 3233.97, 3233.97, 3233.97, 3233.97, 3233.97, 3233.97, 3834.38, 3834.38, 3834.38, 3834.38, 3834.38, 3834.38, 3834.38, 3834.38, 3834.38, 3834.38, 3834.38, 3834.38, 3834.38, 3834.38, 3834.38, 3834.38],
data3: [958, 962, 955, 961, 956, 956, 968, 1100, 1099, 1102, 1115, 1103, 1217, 1266, 1681, 1919, 1968, 2139, 2426, 2479, 2486, 2489, 2480, 2502, 2498, 2769, 3097, 3224, 3236, 3242, 3238, 3282, 3320, 3369, 3411, 3458, 3499, 3540, 3580, 3632, 3668, 3708, 3753, 3798, 3830, 3830],
data4: [
['06:44:44', 1100],
['06:44:44', 1099],
['06:47:40', 2486],
['06:47:45', 2489],
['06:49:20', 3236],
['06:49:20', 3236],
['06:53:14', 3830],
['06:53:15', 3830]
]
}
this.roadChartLine3(this.row2.chart3.chartLine_data)
} else if (myKey == 2) {
this.$refs.list[0].style.background = '#7ac3ec'
this.$refs.list[0].style.color = '#fff'
this.$refs.list[1].style.background = '#7ac3ec'
this.$refs.list[1].style.color = '#fff'
this.$refs.list[myKey].style.background = '#7ac3ec'
this.$refs.list[myKey].style.color = '#f7f941'
this.row2.chart3.chartLine_data = {
data1: ['06:53:14', '06:53:15', '06:53:30', '06:53:45', '06:54:00', '06:54:15', '06:54:30', '06:54:45', '06:55:00', '06:55:15', '06:55:30', '06:55:45', '06:56:00', '06:56:15', '06:56:30', '06:56:45', '06:57:00', '06:57:15', '06:57:30', '06:57:45', '06:58:00', '06:58:16', '06:58:31', '06:58:46', '06:59:01', '06:59:03', '06:59:16', '06:59:31', '06:59:46', '07:00:01', '07:00:16', '07:00:31', '07:00:46', '07:01:01', '07:01:16', '07:01:31', '07:01:46', '07:02:01', '07:02:01', '07:02:16', '07:02:31', '07:02:46', '07:03:01', '07:03:16', '07:03:31', '07:03:46', '07:04:01', '07:04:16', '07:04:31', '07:04:46', '07:05:01', '07:05:16', '07:05:20', '07:05:31', '07:05:46', '07:06:01', '07:06:16', '07:06:31', '07:06:46', '07:07:01', '07:07:10', '07:07:16', '07:07:31', '07:07:46', '07:08:01', '07:08:16', '07:08:31', '07:08:46', '07:09:01', '07:09:16', '07:09:31', '07:09:46'],
data2: [3027.62, 3027.62, 3027.62, 3027.62, 3027.62, 3027.62, 3027.62, 3027.62, 3027.62, 3027.62, 3027.62, 3027.62, 3027.62, 3027.62, 3027.62, 3027.62, 3027.62, 3027.62, 3027.62, 3027.62, 3027.62, 3027.62, 3027.62, 3027.62, 3027.62, 1223.14, 1223.14, 1223.14, 1223.14, 1223.14, 1223.14, 1223.14, 1223.14, 1223.14, 1223.14, 1223.14, 1223.14, 1223.14, 702.38, 702.38, 702.38, 702.38, 702.38, 702.38, 702.38, 702.38, 702.38, 702.38, 702.38, 702.38, 702.38, 702.38, 702.38, 351.82, 351.82, 351.82, 351.82, 351.82, 351.82, 351.82, -16.48, -16.48, -16.48, -16.48, -16.48, -16.48, -16.48, -16.48, -16.48, -16.48, -16.48],
data3: [3837, 3840, 3832, 3829, 3842, 3817, 3825, 3822, 3850, 3820, 3830, 3837, 3833, 3830, 3832, 3829, 3814, 3681, 3575, 3423, 3268, 3138, 3036, 3032, 3039, 3032, 3017, 3025, 3036, 2926, 2895, 2696, 2315, 1831, 1379, 1232, 1232, 1227, 1228, 1224, 1225, 1213, 1230, 1209, 1221, 1225, 1231, 1138, 928, 736, 708, 707, 674, 540, 530, 527, 437, 390, 356, 325, 307, 309, 310, 308, 294, 308, 306, 293, 278, 226],
data4: [
['06:59:01', 3036],
['06:59:03', 3032],
['07:02:01', 1232],
['07:02:01', 1232],
['07:05:16', 736],
['07:05:20', 708],
['07:07:10', 356],
['07:07:10', 356]
]
}
this.roadChartLine3(this.row2.chart3.chartLine_data)
}
console.log(num++)
}, 5000)
console.log('移除')
},
// 点击
handleList(key, id) {
console.log(id)
clearInterval(this.timer)
for (var i in this.$refs.list) {
if (i == key) {
this.$refs.list[i].style.background = '#7ac3ec'
this.$refs.list[i].style.color = '#f7f941'
// this.getChart3()
} else {
this.$refs.list[i].style.background = '#7ac3ec'
this.$refs.list[i].style.color = '#fff'
}
}
if (id == 1) {
this.row2.chart3.chartLine_data = {
data1: ['06:34:10', '06:34:11', '06:34:12', '06:34:13', '06:34:14', '06:34:14', '06:34:15', '06:34:16', '06:34:17', '06:34:18', '06:34:19', '06:34:20', '06:34:21', '06:34:22', '06:34:23', '06:34:29', '06:34:44', '06:34:59', '06:35:14', '06:35:29', '06:35:44', '06:35:59', '06:36:14', '06:36:29', '06:36:44', '06:36:59', '06:37:14', '06:37:28', '06:37:29', '06:37:44', '06:37:59', '06:38:14', '06:38:29', '06:38:44', '06:38:59', '06:38:59', '06:39:14', '06:39:29', '06:39:44', '06:39:59', '06:40:08', '06:40:14', '06:40:29', '06:40:44', '06:40:59', '06:41:14', '06:41:29', '06:41:40', '06:41:44', '06:41:59', '06:42:14', '06:42:29', '06:42:44', '06:42:59', '06:43:09', '06:43:14', '06:43:29', '06:43:44', '06:43:59', '06:44:14', '06:44:29', '06:44:44'],
data2: [141.6, 141.6, 141.6, 141.6, 141.6, 141.6, 141.6, 141.6, 141.6, 141.6, 141.6, 141.6, 141.6, 141.6, 141.6, 141.6, 141.6, 141.6, 141.6, 141.6, 141.6, 141.6, 141.6, 141.6, 141.6, 141.6, 141.6, 141.6, 341.46, 341.46, 341.46, 341.46, 341.46, 341.46, 341.46, 437.73, 437.73, 437.73, 437.73, 437.73, 437.73, 687.33, 687.33, 687.33, 687.33, 687.33, 687.33, 687.33, 959.24, 959.24, 959.24, 959.24, 959.24, 959.24, 959.24, 1107.6, 1107.6, 1107.6, 1107.6, 1107.6, 1107.6, 1107.6],
data3: [-8, -8, -8, -8, -8, -8, -8, -8, -8, -8, -8, -8, -8, -8, -8, -8, -11, -9, -4, -8, -10, -8, -8, 0, -1, 32, 88, 142, 143, 141, 154, 215, 250, 256, 338, 337, 329, 325, 409, 420, 438, 434, 432, 447, 439, 496, 655, 680, 678, 670, 669, 741, 752, 924, 958, 962, 955, 961, 956, 956, 968],
data4: [
['06:34:10', -8],
['06:37:28', 142],
['06:37:29', 143],
['06:38:59', 338],
['06:38:59', 337],
['06:40:08', 438],
['06:40:08', 438],
['06:41:40', 680],
['06:41:44', 678],
['06:43:09', 958],
['06:43:09', 958]
]
}
this.roadChartLine3(this.row2.chart3.chartLine_data)
} else if (id == 2) {
this.row2.chart3.chartLine_data = {
data1: ['06:43:09', '06:43:14', '06:43:29', '06:43:44', '06:43:59', '06:44:14', '06:44:29', '06:44:44', '06:44:44', '06:44:59', '06:45:14', '06:45:30', '06:45:45', '06:46:00', '06:46:15', '06:46:30', '06:46:45', '06:47:00', '06:47:15', '06:47:30', '06:47:40', '06:47:45', '06:48:00', '06:48:15', '06:48:30', '06:48:45', '06:49:00', '06:49:15', '06:49:20', '06:49:30', '06:49:45', '06:50:00', '06:50:15', '06:50:30', '06:50:45', '06:51:00', '06:51:15', '06:51:30', '06:51:45', '06:52:00', '06:52:15', '06:52:30', '06:52:45', '06:53:00', '06:53:14', '06:53:15', '06:53:30', '06:53:45', '06:54:00', '06:54:15', '06:54:30', '06:54:45', '06:55:00', '06:55:15', '06:55:30'],
data2: [959.24, 959.24, 959.24, 959.24, 959.24, 959.24, 959.24, 1107.6, 1107.6, 1107.6, 1107.6, 1107.6, 1107.6, 1107.6, 2496.22, 2496.22, 2496.22, 2496.22, 2496.22, 2496.22, 2496.22, 2496.22, 2496.22, 2496.22, 2496.22, 2496.22, 2496.22, 3233.97, 3233.97, 3233.97, 3233.97, 3233.97, 3233.97, 3233.97, 3233.97, 3834.38, 3834.38, 3834.38, 3834.38, 3834.38, 3834.38, 3834.38, 3834.38, 3834.38, 3834.38, 3834.38, 3834.38, 3834.38, 3834.38, 3834.38, 3834.38],
data3: [958, 962, 955, 961, 956, 956, 968, 1100, 1099, 1102, 1115, 1103, 1217, 1266, 1681, 1919, 1968, 2139, 2426, 2479, 2486, 2489, 2480, 2502, 2498, 2769, 3097, 3224, 3236, 3242, 3238, 3282, 3320, 3369, 3411, 3458, 3499, 3540, 3580, 3632, 3668, 3708, 3753, 3798, 3830, 3830],
data4: [
['06:44:44', 1100],
['06:44:44', 1099],
['06:47:40', 2486],
['06:47:45', 2489],
['06:49:20', 3236],
['06:49:20', 3236],
['06:53:14', 3830],
['06:53:15', 3830]
]
}
this.roadChartLine3(this.row2.chart3.chartLine_data)
} else if (id == 3) {
this.row2.chart3.chartLine_data = {
data1: ['06:53:14', '06:53:15', '06:53:30', '06:53:45', '06:54:00', '06:54:15', '06:54:30', '06:54:45', '06:55:00', '06:55:15', '06:55:30', '06:55:45', '06:56:00', '06:56:15', '06:56:30', '06:56:45', '06:57:00', '06:57:15', '06:57:30', '06:57:45', '06:58:00', '06:58:16', '06:58:31', '06:58:46', '06:59:01', '06:59:03', '06:59:16', '06:59:31', '06:59:46', '07:00:01', '07:00:16', '07:00:31', '07:00:46', '07:01:01', '07:01:16', '07:01:31', '07:01:46', '07:02:01', '07:02:01', '07:02:16', '07:02:31', '07:02:46', '07:03:01', '07:03:16', '07:03:31', '07:03:46', '07:04:01', '07:04:16', '07:04:31', '07:04:46', '07:05:01', '07:05:16', '07:05:20', '07:05:31', '07:05:46', '07:06:01', '07:06:16', '07:06:31', '07:06:46', '07:07:01', '07:07:10', '07:07:16', '07:07:31', '07:07:46', '07:08:01', '07:08:16', '07:08:31', '07:08:46', '07:09:01', '07:09:16', '07:09:31', '07:09:46'],
data2: [3027.62, 3027.62, 3027.62, 3027.62, 3027.62, 3027.62, 3027.62, 3027.62, 3027.62, 3027.62, 3027.62, 3027.62, 3027.62, 3027.62, 3027.62, 3027.62, 3027.62, 3027.62, 3027.62, 3027.62, 3027.62, 3027.62, 3027.62, 3027.62, 3027.62, 1223.14, 1223.14, 1223.14, 1223.14, 1223.14, 1223.14, 1223.14, 1223.14, 1223.14, 1223.14, 1223.14, 1223.14, 1223.14, 702.38, 702.38, 702.38, 702.38, 702.38, 702.38, 702.38, 702.38, 702.38, 702.38, 702.38, 702.38, 702.38, 702.38, 702.38, 351.82, 351.82, 351.82, 351.82, 351.82, 351.82, 351.82, -16.48, -16.48, -16.48, -16.48, -16.48, -16.48, -16.48, -16.48, -16.48, -16.48, -16.48],
data3: [3837, 3840, 3832, 3829, 3842, 3817, 3825, 3822, 3850, 3820, 3830, 3837, 3833, 3830, 3832, 3829, 3814, 3681, 3575, 3423, 3268, 3138, 3036, 3032, 3039, 3032, 3017, 3025, 3036, 2926, 2895, 2696, 2315, 1831, 1379, 1232, 1232, 1227, 1228, 1224, 1225, 1213, 1230, 1209, 1221, 1225, 1231, 1138, 928, 736, 708, 707, 674, 540, 530, 527, 437, 390, 356, 325, 307, 309, 310, 308, 294, 308, 306, 293, 278, 226],
data4: [
['06:59:01', 3036],
['06:59:03', 3032],
['07:02:01', 1232],
['07:02:01', 1232],
['07:05:16', 736],
['07:05:20', 708],
['07:07:10', 356],
['07:07:10', 356]
]
}
this.roadChartLine3(this.row2.chart3.chartLine_data)
}
// if (key % 2 == 0) {
// this.row2.chart3.chartLine_data = {
// }
// this.roadChartLine3(this.row2.chart3.chartLine_data)
// } else {
// this.row2.chart3.chartLine_data = {
// }
// this.roadChartLine3(this.row2.chart3.chartLine_data)
// }
},
// 计划统计
getChart4() {
this.row3.chart1.listLoading = true
GetDataByName(this.row3.chart1.getdataListParm).then(response => {
console.log('计划统计数据', response.data.list)
if (response.data.list !== null) {
this.row3.chart1.chartLine_data = {
data1: ['计划准确率1', '计划正确率', '计划准确率（去除取消重量）'],
data2: ['09/16', '09/17', '09/18', '09/19', '09/20', '09/21', '09/22', '09/23', '09/24', '09/25', '09/26', '09/27', '09/28', '09/29', '09/30'],
data3: [
{ data: [95.6, 94.1, 89.8, 95.5, 93.6, 95.7, 90.2, 94.53, 96.88, 91, 89.5, 87, 93.2, 95, 97.23] },
{ data: [97, 96, 88, 91, 93, 97.7, 90, 92, 91, 91, 95, 94.5, 91.6, 92, 92] },
{ data: [91.2, 95, 89, 97, 95.9, 92.7, 89, 96, 98, 91, 85, 82, 95, 96, 90, 94] }
]
}
this.row3.chart1.total = response.data.total
this.roadChartLine4(this.row3.chart1.chartLine_data)
} else {
this.row3.chart1.list = []
}
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: ''
},
tooltip: {
trigger: 'axis'
},
legend: {
data: chartLine_data.data1,
top: 10
},
grid: {
left: '3%',
right: '8%',
bottom: '3%',
containLabel: true
},
toolbox: {
show: true,
right: '2%',
feature: {}
},
xAxis: { type: 'category', boundaryGap: false, data: chartLine_data.data2, name: '日期' },
yAxis: {
type: 'value', name: '百分比'
},
series: (function() {
var serie = []
for (var i = 0; i < chartLine_data.data3.length; i++) {
var item = {
name: chartLine_data.data1[i],
type: 'line',
data: chartLine_data.data3[i].data
}
serie.push(item)
}
return serie
}())
}
this.row3.chart1.chartLine.setOption(option)
window.onresize = function() {
this.row3.chart1.chartLine.resize()
}
},
getChart4Table() {
this.row3.chart1.table.listLoading = true
GetDataByName(this.row3.chart1.table.getdataListParm).then(response => {
console.log('计划统计table/导出数据', response.data.list)
if (response.data.list !== null) {
// this.row3.chart1.table.list = response.data.list
this.row3.chart1.table.list = [
{ 'id': 1, 'A1': '2020-09-16', 'A2': '3850', 'A3': '3862', 'A4': '95.6%', 'A5': '20', 'A6': '92.2%', 'A7': '10', 'A8': '11', 'A9': '97%' },
{ 'id': 2, 'A1': '2020-09-17', 'A2': '3500', 'A3': '3428', 'A4': '94.1%', 'A5': '50', 'A6': '92.3%', 'A7': '9', 'A8': '11', 'A9': '95%' },
{ 'id': 3, 'A1': '2020-09-18', 'A2': '3429', 'A3': '3401', 'A4': '89.8%', 'A5': '151', 'A6': '93.1%', 'A7': '8', 'A8': '11', 'A9': '94%' },
{ 'id': 4, 'A1': '2020-09-19', 'A2': '3105', 'A3': '3015', 'A4': '95.5%', 'A5': '170', 'A6': '95%', 'A7': '11', 'A8': '11', 'A9': '96%' },
{ 'id': 5, 'A1': '2020-09-20', 'A2': '3122', 'A3': '3100', 'A4': '93.6%', 'A5': '180', 'A6': '94%', 'A7': '10', 'A8': '11', 'A9': '90%' },
{ 'id': 6, 'A1': '2020-09-21', 'A2': '3526', 'A3': '3497', 'A4': '95.7%', 'A5': '165', 'A6': '93%', 'A7': '13', 'A8': '11', 'A9': '90%' },
{ 'id': 7, 'A1': '2020-09-22', 'A2': '3120', 'A3': '3015', 'A4': '90.2%', 'A5': '150', 'A6': '96.4%', 'A7': '7', 'A8': '11', 'A9': '91.5%' },
{ 'id': 8, 'A1': '2020-09-23', 'A2': '3005', 'A3': '2995', 'A4': '94.53%', 'A5': '80', 'A6': '95.2%', 'A7': '9', 'A8': '11', 'A9': '95%' },
{ 'id': 9, 'A1': '2020-09-24', 'A2': '2864', 'A3': '2761', 'A4': '96.88%', 'A5': '75', 'A6': '94.1%', 'A7': '10', 'A8': '11', 'A9': '92%' },
{ 'id': 10, 'A1': '2020-09-25', 'A2': '2795', 'A3': '2755', 'A4': '91%', 'A5': '120', 'A6': '90.5%', 'A7': '8', 'A8': '11', 'A9': '91%' },
{ 'id': 11, 'A1': '2020-09-26', 'A2': '3168', 'A3': '3100', 'A4': '89%', 'A5': '130', 'A6': '97.5%', 'A7': '9', 'A8': '11', 'A9': '95%' },
{ 'id': 12, 'A1': '2020-09-27', 'A2': '3195', 'A3': '3100', 'A4': '89.5%', 'A5': '115', 'A6': '91.4%', 'A7': '11', 'A8': '11', 'A9': '92.4%' },
{ 'id': 13, 'A1': '2020-09-28', 'A2': '3270', 'A3': '3190', 'A4': '93.2%', 'A5': '170', 'A6': '89.4%', 'A7': '12', 'A8': '11', 'A9': '96%' },
{ 'id': 14, 'A1': '2020-09-29', 'A2': '3410', 'A3': '3395', 'A4': '95%', 'A5': '110', 'A6': '86.4%', 'A7': '10', 'A8': '11', 'A9': '94%' },
{ 'id': 15, 'A1': '2020-09-30', 'A2': '3210', 'A3': '3125', 'A4': '97.23%', 'A5': '95', 'A6': '88%', 'A7': '19', 'A8': '11', 'A9': '92%' }
]
this.row3.chart1.table.total = response.data.total
} else {
this.row3.chart1.table.list = []
}
setTimeout(() => {
this.row3.chart1.table.listLoading = false
}, 100)
})
},
getChart5() {
this.row3.chart2.listLoading = true
GetDataByName(this.row3.chart2.getdataListParm).then(response => {
console.log('泌乳牛采食量数据', response.data.list)
if (response.data.list !== null) {
this.row3.chart2.chartLine_data = {
data1: ['09/16', '09/17', '09/18', '09/19', '09/20', '09/21', '09/22', '09/23', '09/24', '09/25', '09/26', '09/27', '09/28', '09/29', '09/30'],
data2: [25, 27.2, 26.5, 29, 26.4, 23.6, 27.7, 28, 31, 33.5, 30, 35, 29.8, 26, 29.5],
data3: [22.5, 25, 26.5, 24.3, 27.1, 25.5, 29, 22.4, 29, 19.8, 23.5, 22.8, 27.6, 21.2, 26]
}
this.row3.chart2.total = response.data.total
this.roadChartLine5(this.row3.chart2.chartLine_data)
} else {
this.row3.chart2.list = []
}
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: ''
},
tooltip: {
trigger: 'axis'
},
legend: {
data: ['泌乳牛产奶量', '泌乳牛采食量']
},
xAxis: [
{
type: 'category',
data: chartLine_data.data1,
name: '日期'
}
],
yAxis: [
{
type: 'value',
name: '泌乳牛采食量(kg)',
axisLabel: {
formatter: '{value} '
}
}, {
type: 'value',
name: '产奶量(kg)',
axisLabel: {
formatter: '{value} '
}
}
],
series: [{
name: '泌乳牛采食量',
type: 'bar',
itemStyle: { /* 设置柱状颜色*/
normal: {
color: '#61a5e8'
}
},
data: chartLine_data.data2
}, {
name: '泌乳牛产奶量',
type: 'line',
itemStyle: { /* 设置折线颜色*/
normal: {
color: '#ff2d2d'
}
},
data: chartLine_data.data3
}]
}
this.row3.chart2.chartLine.setOption(option)
window.onresize = function() {
this.row3.chart2.chartLine.resize()
}
},
getChart5Table() {
this.row3.chart2.table.listLoading = true
GetDataByName(this.row3.chart2.table.getdataListParm).then(response => {
console.log('泌乳牛采食量table/导出数据', response.data.list)
if (response.data.list !== null) {
// this.row3.chart2.table.list = response.data.list
this.row3.chart2.table.list = [
{ 'id': 1, 'A1': '2020-09-16', 'A2': '25', 'A3': '22.5' },
{ 'id': 2, 'A1': '2020-09-17', 'A2': '27.2', 'A3': '25' },
{ 'id': 3, 'A1': '2020-09-18', 'A2': '26.5', 'A3': '26.5' },
{ 'id': 4, 'A1': '2020-09-19', 'A2': '29', 'A3': ' 24.3' },
{ 'id': 5, 'A1': '2020-09-20', 'A2': '26.4', 'A3': '27.1' },
{ 'id': 6, 'A1': '2020-09-21', 'A2': '23.6', 'A3': '25.5' },
{ 'id': 7, 'A1': '2020-09-22', 'A2': '27.7', 'A3': '29' },
{ 'id': 8, 'A1': '2020-09-23', 'A2': '28', 'A3': '22.4' },
{ 'id': 9, 'A1': '2020-09-24', 'A2': '31', 'A3': '29' },
{ 'id': 10, 'A1': '2020-09-25', 'A2': '33.5', 'A3': '19.8' },
{ 'id': 11, 'A1': '2020-09-26', 'A2': '30', 'A3': '23.5' },
{ 'id': 12, 'A1': '2020-09-27', 'A2': '35', 'A3': '22.8' },
{ 'id': 13, 'A1': '2020-09-28', 'A2': '29.8', 'A3': '27.6' },
{ 'id': 14, 'A1': '2020-09-29', 'A2': '26', 'A3': '21.2' },
{ 'id': 15, 'A1': '2020-09-30', 'A2': '29.5', 'A3': '26' }
]
this.row3.chart2.table.total = response.data.total
} else {
this.row3.chart2.table.list = []
}
setTimeout(() => {
this.row3.chart2.table.listLoading = false
}, 100)
})
},
getChart6() {
this.row4.chart1.listLoading = true
GetDataByName(this.row4.chart1.getdataListParm).then(response => {
console.log('成本统计数据', response.data.list)
if (response.data.list !== null) {
this.row4.chart1.chartLine_data = {
data1: ['09/16', '09/17', '09/18', '09/19', '09/20', '09/21', '09/22', '09/23', '09/24', '09/25', '09/26', '09/27', '09/28', '09/29', '09/30'],
data2: [1.5, 1.8, 2.2, 1.9, 1.8, 1.7, 2.0, 2.7, 2.4, 1.7, 1.8, 1.7, 2.7, 2.4, 2.1],
data3: [50, 65, 70, 45, 42, 45, 29, 39, 47, 56, 67, 72, 75, 68, 66]
}
this.row4.chart1.total = response.data.total
this.roadChartLine6(this.row4.chart1.chartLine_data)
} else {
this.row4.chart1.list = []
}
setTimeout(() => {
this.row4.chart1.listLoading = false
}, 100)
})
},
roadChartLine6(chartLine_data) {
if (this.row4.chart1.chartLine != null) {
this.row4.chart1.chartLine.dispose()
}
this.row4.chart1.chartLine = echarts.init(document.getElementById('row4chartLine1'))
var option = {
title: {
text: ''
},
grid: {
left: '8%',
right: '8%',
bottom: '3%',
containLabel: true
},
tooltip: {
trigger: 'axis'
},
legend: {
data: ['泌乳牛采食量', '泌乳牛产奶量']
},
xAxis: [
{
type: 'category',
data: chartLine_data.data1,
axisPointer: {
type: 'shadow'
},
name: '日期'
}
],
yAxis: [
{
type: 'value',
name: '公斤奶\n饲料成本（元）',
axisLabel: {
formatter: '{value}'
}
}, {
type: 'value',
name: '单头牛\n饲料成本（元）',
axisLabel: {
formatter: '{value}'
}
}
],
series: [
{
name: '泌乳牛采食量',
type: 'bar',
itemStyle: { /* 设置柱状颜色*/
normal: {
color: '#61a5e8'
}
},
data: chartLine_data.data2
}, {
name: '泌乳牛产奶量',
type: 'line',
yAxisIndex: 1,
itemStyle: { /* 设置柱状颜色*/
normal: {
color: '#ff3131'
}
},
data: chartLine_data.data3
}
]
}
this.row4.chart1.chartLine.setOption(option)
window.onresize = function() {
this.row4.chart1.chartLine.resize()
}
},
getChart7() {
this.row4.chart2.listLoading = true
GetDataByName(this.row4.chart2.getdataListParm).then(response => {
console.log('出库统计数据', response.data.list)
if (response.data.list !== null) {
this.row4.chart2.chartLine_data = {
data1: ['09/16', '09/17', '09/18', '09/19', '09/20', '09/21', '09/22', '09/23', '09/24', '09/25', '09/26', '09/27', '09/28', '09/29', '09/30'],
data2: [3860, 3200, 3560, 3428, 3108, 2986, 2670, 3120, 3204, 3150, 2850, 3220, 3321, 3125, 3410],
data3: [120, 225, 0, 0, 124, 0, 159, 122, 0, 85, 62, 55, 0, 0, 75],
data4: [4800, 5572, 6820, 3880, 4830, 8800, 4575, 3850, 3896, 4285, 3800, 6562, 6720, 3580, 4120]
}
this.row4.chart2.total = response.data.total
this.roadChartLine7(this.row4.chart2.chartLine_data)
} else {
this.row4.chart2.list = []
}
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: ''
},
grid: {
left: '3%',
right: '8%',
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}'
}
}, {
type: 'value',
name: '金额（元）',
axisLabel: {
formatter: '{value}'
}
}
],
series: [
{
name: '系统用量',
type: 'bar',
stack: '广告',
itemStyle: { /* 设置柱状颜色*/
normal: {
color: '#61a5e8'
}
},
data: chartLine_data.data2
}, {
name: '人工用量',
type: 'bar',
stack: '广告',
itemStyle: { /* 设置柱状颜色*/
normal: {
color: 'orange'
}
},
data: chartLine_data.data3
}, {
name: '金额',
type: 'line',
yAxisIndex: 1,
data: chartLine_data.data4,
itemStyle: { /* 设置折线颜色*/
normal: {
color: '#ff3131'
}
}
}
]
}
this.row4.chart2.chartLine.setOption(option)
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.list = [
{ 'id': 1, 'A1': '1', 'A2': '国产燕麦草', 'A3': '150', 'A4': '2' },
{ 'id': 2, 'A1': '2', 'A2': '棉籽', 'A3': '120', 'A4': '3' },
{ 'id': 3, 'A1': '3', 'A2': '麦秸秆', 'A3': '260', 'A4': '6' },
{ 'id': 4, 'A1': '4', 'A2': '花生秧', 'A3': '210', 'A4': '4' },
{ 'id': 5, 'A1': '5', 'A2': '青贮苜蓿', 'A3': '68', 'A4': '2' }
]
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' })
},
handleExport() {},
handleTable(item) {
if (item == 'row3chartLine1') {
console.log('计划统计表格')
this.row3.chart1.isTable = true
this.row3.chart1.isChart = false
this.getChart4Table()
} else if (item == 'row3chartLine2') {
console.log('泌乳牛采食量表格')
this.row3.chart2.isTable = true
this.row3.chart2.isChart = false
this.getChart5Table()
}
},
handleChart(item) {
// 显示切换图表
if (item == 'row3chartLine1') {
console.log('计划统计图表')
this.row3.chart1.isTable = false
this.row3.chart1.isChart = true
} else if (item == 'row3chartLine2') {
console.log('泌乳牛采食量图表')
this.row3.chart2.isTable = false
this.row3.chart2.isChart = true
}
}
}
}
</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;
}
.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>