<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">统计范围:</div>
<el-date-picker v-model="inputDatetime" :clearable="false" class="inputDatetime filter-item content" type="daterange" :picker-options="pickerOptions" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" align="right" @change="changeDate" />
</div>
</div>
<div class="row1-t" style="margin-top: 10px;">
<div class="row1-t-l">
<div class="img-l">牧场选择:</div>
<el-select v-model="ranchSelection" filterable placeholder="牧场选择" class="filter-item content">
<el-option v-for="item in ranchSelectionList" :key="item.id" :label="item.name" :value="item.id" />
</el-select>
</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[0].rateAvg }}</b>
<br>昨日
</span>
</div>
<div class="row1-c-l-b">
<div><span>混料最高准确率：</span><b>{{ row1.list[0].rateMAX }}</b></div>
<div><span>混料最低准确率：</span><b>{{ row1.list[0].rateMIN }}</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[1].rateAvg }}</b>
<br>昨日
</span>
</div>
<div class="row1-c-l-b">
<div><span>撒料最高准确率：</span><b>{{ row1.list[1].rateMAX }}</b></div>
<div><span>撒料最低准确率：</span><b>{{ row1.list[1].rateMIN }}</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[2].rateAvg }}</b>
<br>昨日
</span>
</div>
<div class="row1-c-l-b">
<div><span>撒料最高正确率：</span><b>{{ row1.list[2].rateMAX }}</b></div>
<div><span>撒料最低正确率：</span><b>{{ row1.list[2].rateMIN }}</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[3].rateAvg }}</b>
<br>昨日
</span>
</div>
<div class="row1-c-l-b">
<div><span>撒料最高偏差：</span><b>{{ row1.list[3].rateMAX }}</b>分钟</div>
<div><span>撒料最低偏差：</span><b>{{ row1.list[3].rateMIN }}</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="row1Title">当前车辆数：{{ row2.carLength }}</div>
<div id="car" ref="car" v-loading="row2.listLoading2" class="car">
<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">
<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>{{ row2.chart2.chartLine_data.data1 }}</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>{{ row2.chart2.chartLine_data.data2 }}</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>
</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="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>
<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="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 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')
export default {
name: 'GroupDashboard',
data() {
return {
ranchSelectionList: [{ id: 0, name: '集团' }, { id: 1, name: '牧场01' }, { id: 2, name: '牧场02' }],
ranchSelection: 0,
inputDatetime: [new Date().setTime(new Date().getTime() - 3600 * 1000 * 24 * 7), new Date()],
myDate: parseTime(new Date().setTime(new Date().getTime() - 3600 * 1000 * 24 * 7), '{y}-{m}-{d}') + '-' + parseTime(new Date(), '{y}-{m}-{d}'),
pickerOptions: {
shortcuts: [{
text: '最近一周',
onClick(picker) {
const end = new Date()
const start = new Date()
start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
picker.$emit('pick', [start, end])
}
}, {
text: '最近一个月',
onClick(picker) {
const end = new Date()
const start = new Date()
start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
picker.$emit('pick', [start, end])
}
}, {
text: '最近一年',
onClick(picker) {
const end = new Date()
const start = new Date()
start.setTime(start.getTime() - 3600 * 1000 * 24 * 365)
picker.$emit('pick', [start, end])
}
}]
},
date: parseTime(new Date(), '{y}-{m}-{d}'),
row1: {
getdataListParm: {
name: 'getHomepageStrJT',
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: {}
},
list: [],
total: 0,
listLoading: true,
getdataListParmList: {
name: 'getHomepageLBList',
page: 1,
offset: 1,
pagecount: 3,
returntype: 'Map',
parammaps: {
pastureid: Cookies.get('pastureid')
}
}
},
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: '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: 'getAccuracActHLJT',
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: 'getFsWarnListJT',
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' }
}
},
created() {
this.getRow1List()
this.getRow2List1()
this.getRow3List1()
this.getRow3List2()
this.getRow4List1()
this.getRow4List2()
this.getRow4List3()
},
methods: {
changeDate(item) {
this.myDate = parseTime(this.inputDatetime[0], '{y}-{m}-{d}') + '-' + parseTime(this.inputDatetime[1], '{y}-{m}-{d}')
this.getRow1List()
},
getRow1List() {
this.row1.listLoading = true
this.row1.getdataListParm.parammaps.startTime = parseTime(this.inputDatetime[0], '{y}-{m}-{d}')
this.row1.getdataListParm.parammaps.stopTime = parseTime(this.inputDatetime[1], '{y}-{m}-{d}')
GetDataByName(this.row1.getdataListParm).then(response => {
if (response.data.list !== null) {
console.log('row1数据', response.data.list)
for (let i = 0; i < response.data.list.length; i++) {
if (response.data.list[i].rateAvg == undefined) {
this.$set(response.data.list[i], 'rateAvg', '')
}
if (response.data.list[i].rateMAX == undefined) {
this.$set(response.data.list[i], 'rateMAX', '')
}
if (response.data.list[i].rateMIN == undefined) {
this.$set(response.data.list[i], 'rateMIN', '')
}
}
this.row1.list = response.data.list
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.roadRow1ChartLine1(this.row2.chart1.chartLine_data)
this.roadRow1ChartLine2(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)
})
},
// 今日计划统计-完成车次
roadRow1ChartLine1(chartLine_data) {
console.log(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()
}
},
// 今日计划统计-完成重量
roadRow1ChartLine2(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()
}
},
// 今日执行计划监控
getRow2List1() {
this.row2.listLoading2 = true
GetDataByName(this.row2.getdataListParmList).then(response => {
if (response.data.list !== null) {
response.data.list = [
{ 'datacaptureno': 1, 'donerate': '198.14%', 'doneweight': 510, 'fname': '测试饲料1,测试饲料0927', 'id': '3052755377885545472', 'inorout': 0, 'lastactualweight': '100.0', 'leftweight': -252.60000000000002, 'lweight': '257.40', 'nowweight': 610, 'pid': '575305', 'tname': '卧式固定TMR搅拌机' },
{ 'datacaptureno': 1, 'donerate': '198.14%', 'doneweight': 510, 'fname': '测试饲料1,测试饲料0927', 'id': '3052755377885545472', 'inorout': 0, 'lastactualweight': '100.0', 'leftweight': -252.60000000000002, 'lweight': '257.40', 'nowweight': 610, 'pid': '575305', 'tname': '卧式固定TMR搅拌机2' },
{ 'datacaptureno': 1, 'donerate': '198.14%', 'doneweight': 510, 'fname': '测试饲料1,测试饲料0927', 'id': '3052755377885545472', 'inorout': 0, 'lastactualweight': '100.0', 'leftweight': -252.60000000000002, 'lweight': '257.40', 'nowweight': 610, 'pid': '575305', 'tname': '卧式固定TMR搅拌机3' },
{ 'datacaptureno': 1, 'donerate': '198.14%', 'doneweight': 510, 'fname': '测试饲料1,测试饲料0927', 'id': '3052755377885545472', 'inorout': 0, 'lastactualweight': '100.0', 'leftweight': -252.60000000000002, 'lweight': '257.40', 'nowweight': 610, 'pid': '575305', 'tname': '卧式固定TMR搅拌机4' },
{ 'datacaptureno': 1, 'donerate': '198.14%', 'doneweight': 510, 'fname': '测试饲料1,测试饲料0927', 'id': '3052755377885545472', 'inorout': 0, 'lastactualweight': '100.0', 'leftweight': -252.60000000000002, 'lweight': '257.40', 'nowweight': 610, 'pid': '575305', 'tname': '卧式固定TMR搅拌机4' },
{ 'datacaptureno': 1, 'donerate': '198.14%', 'doneweight': 510, 'fname': '测试饲料1,测试饲料0927', 'id': '3052755377885545472', 'inorout': 0, 'lastactualweight': '100.0', 'leftweight': -252.60000000000002, 'lweight': '257.40', 'nowweight': 610, 'pid': '575305', 'tname': '卧式固定TMR搅拌机4' },
{ 'datacaptureno': 1, 'donerate': '198.14%', 'doneweight': 510, 'fname': '测试饲料1,测试饲料0927', 'id': '3052755377885545472', 'inorout': 0, 'lastactualweight': '100.0', 'leftweight': -252.60000000000002, 'lweight': '257.40', 'nowweight': 610, 'pid': '575305', 'tname': '卧式固定TMR搅拌机4' },
{ 'datacaptureno': 1, 'donerate': '198.14%', 'doneweight': 510, 'fname': '测试饲料1,测试饲料0927', 'id': '3052755377885545472', 'inorout': 0, 'lastactualweight': '100.0', 'leftweight': -252.60000000000002, 'lweight': '257.40', 'nowweight': 610, 'pid': '575305', 'tname': '卧式固定TMR搅拌机4' },
{ 'datacaptureno': 1, 'donerate': '198.14%', 'doneweight': 510, 'fname': '测试饲料1,测试饲料0927', 'id': '3052755377885545472', 'inorout': 0, 'lastactualweight': '100.0', 'leftweight': -252.60000000000002, 'lweight': '257.40', 'nowweight': 610, 'pid': '575305', 'tname': '卧式固定TMR搅拌机4' },
{ 'datacaptureno': 1, 'donerate': '198.14%', 'doneweight': 510, 'fname': '测试饲料1,测试饲料0927', 'id': '3052755377885545472', 'inorout': 0, 'lastactualweight': '100.0', 'leftweight': -252.60000000000002, 'lweight': '257.40', 'nowweight': 610, 'pid': '575305', 'tname': '卧式固定TMR搅拌机4' },
{ 'datacaptureno': 1, 'donerate': '198.14%', 'doneweight': 510, 'fname': '测试饲料1,测试饲料0927', 'id': '3052755377885545472', 'inorout': 0, 'lastactualweight': '100.0', 'leftweight': -252.60000000000002, 'lweight': '257.40', 'nowweight': 610, 'pid': '575305', 'tname': '卧式固定TMR搅拌机5' }
]
for (let i = 0; i < response.data.list.length; i++) {
this.$set(response.data.list[i], 'color', '#fff')
this.$set(response.data.list[i], 'background', '#7ac3ec')
}
this.row2.list = response.data.list
this.row2.carLength = response.data.total
} else {
this.carLength = 0
}
setTimeout(() => {
this.row2.listLoading2 = false
}, 100)
})
},
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
} else if (item == 'row3chartLine2') {
console.log('泌乳牛采食量图表')
this.row3.chart2.isTable = false
this.row3.chart2.isChart = true
} else if (item == 'row4chartLine1') {
console.log('成本统计图表')
this.row4.chart1.isTable = false
this.row4.chart1.isChart = true
} else if (item == 'row4chartLine2') {
console.log('混料实际重量统计图表')
this.row4.chart2.isTable = false
this.row4.chart2.isChart = true
}
},
handleExport(item) {
console.log(item)
// 显示切换图表
if (item == 'row3chartLine1') {
console.log('计划统计')
var excelDatasTabChart1 = [
{
tHeader: ['日期', '计划执行重量（kg）', '配方理论重量（kg）', '计划准确率', '计划取消重量（kg）', '计划准确率（去除取消重量）', '计划正确数', '计划数', '计划正确率'],
filterVal: ['日期', '实际量', '理论量', 'field1', '计划取消重量', 'field3', '正确数', '计划数', 'field2'],
tableDatas: this.row3.chart1.table.list,
sheetName: '计划统计'
}
]
json2excel(excelDatasTabChart1, '计划统计', true, 'xlsx')
}
},
// 计划统计
getRow3List1() {
this.row3.chart1.listLoading = true
GetReportform(this.row3.chart1.getdataListParm).then(response => {
if (response.data.list !== null) {
console.log('计划统计', response.data.list)
this.row3.chart1.table.list = response.data.data
this.row3.chart1.chartLine_data = response.data.list
this.row3.chart1.chartLine_data = {
'data1': ['1牧', '2牧', '3牧', '4牧', '5牧', '6牧', '7牧', '8牧', '9牧', '10牧', '11牧', '12牧'], // x轴
'data2': [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3], // 计划准确率
'data3': [2.6, 5.9, 9.0, 30, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3], // 计划正确率
'data4': [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3]// 计划准确率（去除取消重量）
}
this.row3.chart1.total = response.data.total
this.roadRow3ChartLine1(this.row3.chart1.chartLine_data)
} else {
this.row3.chart1.list = []
}
setTimeout(() => {
this.row3.chart1.listLoading = false
}, 100)
})
},
roadRow3ChartLine1(chartLine_data) {
if (this.row3.chart1.chartLine != null) {
this.row3.chart1.chartLine.dispose()
}
this.row3.chart1.chartLine = echarts.init(document.getElementById('row3chartLine1'))
var option = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
crossStyle: {
color: '#999'
}
}
},
legend: {
data: ['计划准确率', '计划正确率', '计划准确率（去除取消重量）']
},
xAxis: [{ type: 'category', data: chartLine_data.data1, axisPointer: { type: 'shadow' }}],
yAxis: [{ type: 'value', name: '百分比', min: 0, max: 100, interval: 20, axisLabel: { formatter: '{value}' }}],
series: [{ name: '计划准确率', type: 'bar', itemStyle: { normal: { color: '#7ecf51' }},
data: chartLine_data.data2,
markLine: {
data: [{ type: 'average' }],
symbol: ['none', 'none'],
position: 'insideTopCenter',
itemStyle: {
normal: {
lineStyle: { type: 'dotted', width: 3 },
label: { show: true, position: 'middle', formatter: '' }
}
},
large: true,
effect: { show: false, loop: true, period: 0, scaleSize: 2, color: null, shadowColor: null, shadowBlur: null }
}
},
{
name: '计划正确率',
type: 'bar',
itemStyle: {
normal: {
color: '#ff6600'
}
},
data: chartLine_data.data3,
markLine: {
data: [{ type: 'average' }],
symbol: ['none', 'none'],
position: 'insideTopCenter',
itemStyle: {
normal: {
lineStyle: { type: 'dotted', width: 3 },
label: { show: true, position: 'middle', formatter: '' }
}
},
large: true,
effect: { show: false, loop: true, period: 0, scaleSize: 2, color: null, shadowColor: null, shadowBlur: null }
}
},
{
name: '计划准确率（去除取消重量）',
type: 'bar',
itemStyle: {
normal: {
color: '#61a5e8'
}
},
data: chartLine_data.data4,
markLine: {
data: [{ type: 'average' }],
symbol: ['none', 'none'],
position: 'insideTopCenter',
itemStyle: {
normal: {
lineStyle: { type: 'dotted', width: 3 },
label: { show: true, position: 'middle', formatter: '' }
}
},
large: true,
effect: { show: false, loop: true, period: 0, scaleSize: 2, color: null, shadowColor: null, shadowBlur: null }
}
}
]
}
this.row3.chart1.chartLine.setOption(option)
window.onresize = function() {
this.row3.chart1.chartLine.resize()
}
},
// 泌乳牛干物质采食量
getRow3List2() {
this.row3.chart2.listLoading = true
GetReportform(this.row3.chart2.getdataListParm).then(response => {
if (response.data.list !== null) {
console.log('泌乳牛采食量数据', response.data.list)
this.row3.chart2.table.list = response.data.data
this.row3.chart2.chartLine_data = response.data.list
this.row3.chart2.chartLine_data = {
data1: ['1牧', '2牧', '3牧'], // 折线
data2: ['12/01', '12/02', '12/03'], // X轴
data3: [
{ data: [1.5, 1.2, 1.7, 1.2] },
{ data: [1.7, 0.8, 1.2, 1.8] },
{ data: [1.3, 2.2, 1.9, 1.4] }
]// 折线对应数据
}
this.row3.chart2.total = response.data.total
this.roadRow3ChartLine2(this.row3.chart2.chartLine_data)
} else {
this.row3.chart2.list = []
}
setTimeout(() => {
this.row3.chart2.listLoading = false
}, 100)
})
},
roadRow3ChartLine2(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: chartLine_data.data1,
right: 10
},
grid: {
top: '20%',
left: '5%',
right: '8%',
containLabel: true
},
toolbox: {
show: true,
right: '2%',
feature: {}
},
xAxis: { type: 'category', boundaryGap: false, data: chartLine_data.data2, name: '日期' },
yAxis: {
type: 'value', name: 'kg', axisLabel: { formatter: '{value}' }
},
series: (function() {
var serie = []
for (var i = 0; i < chartLine_data.data3.length; i++) {
var item = {
name: chartLine_data.data1[i],
type: 'line',
data: chartLine_data.data3[i].data
}
serie.push(item)
}
return serie
}())
}
this.row3.chart2.chartLine.setOption(option)
window.onresize = function() {
this.row3.chart2.chartLine.resize()
}
},
// 成本统计
getRow4List1() {
this.row4.chart1.listLoading = true
GetReportform(this.row4.chart1.getdataListParm).then(response => {
if (response.data.list !== null) {
console.log('成本统计数据', response.data.list)
this.row4.chart1.table.list = response.data.data
this.row4.chart1.chartLine_data = response.data.list
this.row4.chart1.chartLine_data = {
data1: ['1牧', '2牧', '3牧'], // 折线
data2: ['12/01', '12/02', '12/03'], // X轴
data3: [
{ data: [1.5, 1.2, 1.7, 1.2] },
{ data: [1.7, 0.8, 1.2, 1.8] },
{ data: [1.3, 2.2, 1.9, 1.4] }
]// 折线对应数据
}
this.row4.chart1.total = response.data.total
this.roadRow4ChartLine1(this.row4.chart1.chartLine_data)
} else {
this.row4.chart1.list = []
}
setTimeout(() => {
this.row4.chart1.listLoading = false
}, 100)
})
},
roadRow4ChartLine1(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: ''
},
tooltip: {
trigger: 'axis'
},
legend: {
data: chartLine_data.data1,
right: 10
},
grid: {
top: '20%',
left: '5%',
right: '8%',
containLabel: true
},
toolbox: {
show: true,
right: '2%',
feature: {}
},
xAxis: { type: 'category', boundaryGap: false, data: chartLine_data.data2, name: '日期' },
yAxis: {
type: 'value', name: 'kg', axisLabel: { formatter: '{value}' }
},
series: (function() {
var serie = []
for (var i = 0; i < chartLine_data.data3.length; i++) {
var item = {
name: chartLine_data.data1[i],
type: 'line',
data: chartLine_data.data3[i].data
}
serie.push(item)
}
return serie
}())
}
this.row4.chart1.chartLine.setOption(option)
window.onresize = function() {
this.row4.chart1.chartLine.resize()
}
},
// 混料实际重量统计
getRow4List2() {
this.row4.chart2.listLoading = true
GetReportform(this.row4.chart2.getdataListParm).then(response => {
if (response.data.list !== null) {
console.log('混料实际重量统计数据', response.data.list)
this.row4.chart2.table.list = response.data.data
this.row4.chart2.chartLine_data = response.data.list
// this.row4.chart2.chartLine_data = {
// data1: ['1牧', '2牧', '3牧'], // 折线
// data2: ['12/01', '12/02', '12/03'], // X轴
// data3: [
// { data: [1.5, 1.2, 1.7, 1.2] },
// { data: [1.7, 0.8, 1.2, 1.8] },
// { data: [1.3, 2.2, 1.9, 1.4] }
// ]// 折线对应数据
// }
this.row4.chart2.total = response.data.total
this.roadRow4ChartLine2(this.row4.chart2.chartLine_data)
} else {
this.row4.chart2.list = []
}
setTimeout(() => {
this.row4.chart2.listLoading = false
}, 100)
})
},
roadRow4ChartLine2(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: ''
},
tooltip: {
trigger: 'axis'
},
legend: {
data: chartLine_data.data1,
right: 10
},
grid: {
top: '20%',
left: '5%',
right: '8%',
containLabel: true
},
toolbox: {
show: true,
right: '2%',
feature: {}
},
xAxis: { type: 'category', boundaryGap: false, data: chartLine_data.data2, name: '日期' },
yAxis: {
type: 'value', name: 'kg', axisLabel: { formatter: '{value}' }
},
series: (function() {
var serie = []
for (var i = 0; i < chartLine_data.data3.length; i++) {
var item = {
name: chartLine_data.data1[i],
type: 'line',
data: chartLine_data.data3[i].data
}
serie.push(item)
}
return serie
}())
}
this.row4.chart2.chartLine.setOption(option)
window.onresize = function() {
this.row4.chart2.chartLine.resize()
}
},
getRow4List3() {
this.row4.table.listLoading = true
GetDataByName(this.row4.table.getdataListParm).then(response => {
if (response.data.list !== null) {
console.log('库存预警table数据', response.data.list)
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)
})
}
}
}
</script>
<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: 20px 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;overflow: hidden;width: 100%;}
}
}
.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 0 16px 10px;width: 100px;height: 18px;}
.content{float:left;width: 68%;font-size: 14px;margin-top: 5px;}
}
.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:195px;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:195px;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:195px;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:195px;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;
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;
.row1Title{float: right;height: 50px;line-height: 50px;margin-right: 50px;}
.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>