|
@@ -0,0 +1,382 @@
|
|
|
|
+<template>
|
|
|
|
+
|
|
|
|
+ <div>
|
|
|
|
+
|
|
|
|
+ <el-card class="box-card">
|
|
|
|
+
|
|
|
|
+ <!-- 搜索区域 -->
|
|
|
|
+ <div class="search-bx1">
|
|
|
|
+
|
|
|
|
+
|
|
|
|
+ <el-date-picker v-model="searchData.inputDatetime1" class="g-mr20" type="daterange" range-separator="至" start-placeholder="日期" end-placeholder="日期" style="width: 250px;" />
|
|
|
|
+
|
|
|
|
+ <el-select v-model="searchData.typeId" filterable placeholder="犊牛类型" style="width: 180px;" class="g-mr20">
|
|
|
|
+ <el-option v-for="item in calfTypeList" :key="item.id" :label="item.name" :value="item.id" />
|
|
|
|
+ </el-select>
|
|
|
|
+
|
|
|
|
+ <el-select v-model="searchData.barid" placeholder="饲料" style="width: 180px;" class="g-mr20" clearable>
|
|
|
|
+ <el-option v-for="item in feedList" :key="item.id" :label="item.name" :value="item.id" />
|
|
|
|
+ </el-select>
|
|
|
|
+
|
|
|
|
+
|
|
|
|
+
|
|
|
|
+
|
|
|
|
+
|
|
|
|
+ <el-button type="primary" @click="form_search">搜索</el-button>
|
|
|
|
+ <!-- <el-button type="primary" @click="form_clear">重置</el-button> -->
|
|
|
|
+
|
|
|
|
+ <el-button type="primary" @click="form_export">导出</el-button>
|
|
|
|
+ </div>
|
|
|
|
+
|
|
|
|
+
|
|
|
|
+ <div id="chartLine1" style="width: 100%;height:280px;"></div>
|
|
|
|
+
|
|
|
|
+
|
|
|
|
+ <!-- 表格 -->
|
|
|
|
+ <el-table key="0" :data="tableList" v-loading="tableLoading" element-loading-text="给我一点时间" border fit>
|
|
|
|
+ <el-table-column label="日期" width="50px" align="center">
|
|
|
|
+ <template slot-scope="scope">
|
|
|
|
+ <span>{{ scope.row.id }}</span>
|
|
|
|
+ </template>
|
|
|
|
+ </el-table-column>
|
|
|
|
+ <el-table-column label="牛奶用量(kg)" min-width="150px" align="center">
|
|
|
|
+ <template slot-scope="scope">
|
|
|
|
+ <span>{{ scope.row.name }}</span>
|
|
|
|
+ </template>
|
|
|
|
+ </el-table-column>
|
|
|
|
+ <el-table-column label="牛奶费用(元)" min-width="150px" align="center">
|
|
|
|
+ <template slot-scope="scope">
|
|
|
|
+ <span>{{ scope.row.number }}</span>
|
|
|
|
+ </template>
|
|
|
|
+ </el-table-column>
|
|
|
|
+ <el-table-column label="水用量(kg)" min-width="150px" align="center">
|
|
|
|
+ <template slot-scope="scope">
|
|
|
|
+ <span>{{ scope.row.number }}</span>
|
|
|
|
+ </template>
|
|
|
|
+ </el-table-column>
|
|
|
|
+ <el-table-column label="水费用(元)" min-width="150px" align="center">
|
|
|
|
+ <template slot-scope="scope">
|
|
|
|
+ <span>{{ scope.row.number }}</span>
|
|
|
|
+ </template>
|
|
|
|
+ </el-table-column>
|
|
|
|
+ <el-table-column label="代乳粉用量(kg)" min-width="150px" align="center">
|
|
|
|
+ <template slot-scope="scope">
|
|
|
|
+ <span>{{ scope.row.number }}</span>
|
|
|
|
+ </template>
|
|
|
|
+ </el-table-column>
|
|
|
|
+ <el-table-column label="代乳粉费用(元)" min-width="150px" align="center">
|
|
|
|
+ <template slot-scope="scope">
|
|
|
|
+ <span>{{ scope.row.number }}</span>
|
|
|
|
+ </template>
|
|
|
|
+ </el-table-column>
|
|
|
|
+
|
|
|
|
+ <el-table-column label="合计费用(元)" min-width="150px" align="center">
|
|
|
|
+ <template slot-scope="scope">
|
|
|
|
+ <span>{{ scope.row.number }}</span>
|
|
|
|
+ </template>
|
|
|
|
+ </el-table-column>
|
|
|
|
+ </el-table>
|
|
|
|
+
|
|
|
|
+ <!-- 分页区域 -->
|
|
|
|
+ <el-pagination @size-change="change_size_page" @current-change="change_current_page" :current-page="searchData.page" :page-sizes="[1,5,10,20,30,50]" :page-size="searchData.page_size" layout="total, prev, pager, next" :total="searchData.total"/>
|
|
|
|
+
|
|
|
|
+
|
|
|
|
+ </el-card >
|
|
|
|
+ </div>
|
|
|
|
+
|
|
|
|
+
|
|
|
|
+</template>
|
|
|
|
+
|
|
|
|
+<script>
|
|
|
|
+import { ajaxDataGet, ajaxDataPost, ajaxDataPut, ajaxDataDelete, checkButtons} from '@/api/common'
|
|
|
|
+import { parseTime, json2excel } from '@/utils/index.js'
|
|
|
|
+
|
|
|
|
+import * as echarts from 'echarts';
|
|
|
|
+
|
|
|
|
+export default {
|
|
|
|
+ data() {
|
|
|
|
+
|
|
|
|
+
|
|
|
|
+
|
|
|
|
+
|
|
|
|
+ return {
|
|
|
|
+
|
|
|
|
+
|
|
|
|
+ //接口 - 获取 - 表格
|
|
|
|
+ url_get_table:'/api/v1/ops/barn_group/list',
|
|
|
|
+ //接口 - 获取 - 图表
|
|
|
|
+ url_get_echart:'/api/v1/ops/barn_group/add',
|
|
|
|
+
|
|
|
|
+ //获取 - 表格数据 - 参数
|
|
|
|
+ searchData:{
|
|
|
|
+ inputDatetime1:"",
|
|
|
|
+ typeId:"全部",
|
|
|
|
+ name: "",
|
|
|
|
+ barn_group_name: "",
|
|
|
|
+ number: "",
|
|
|
|
+ status: undefined,
|
|
|
|
+ page: 1, //页码
|
|
|
|
+ page_size: 10, //每页数量
|
|
|
|
+ total:0, //总页数
|
|
|
|
+ pastureId: ""
|
|
|
|
+ },
|
|
|
|
+ tableLoading: false,
|
|
|
|
+ //表格内容
|
|
|
|
+ tableList:[
|
|
|
|
+ // { username:"admin", id:100, date:'2023-12-01',email:'测试信息1123',roleList:[2,3] },
|
|
|
|
+ // { username:"epans", id:200, date:'2023-12-01',email:'测试信息1123',roleList:[] },
|
|
|
|
+ // { username:"derek", id:300, date:'2023-12-01',email:'测试信息1123' },
|
|
|
|
+ // { username:"admin", id:100, date:'2023-12-01',email:'测试信息1123' },
|
|
|
|
+ // { username:"epans", id:200, date:'2023-12-01',email:'测试信息1123' },
|
|
|
|
+ // { username:"derek", id:300, date:'2023-12-01',email:'测试信息1123' },
|
|
|
|
+ // { username:"admin", id:100, date:'2023-12-01',email:'测试信息1123' },
|
|
|
|
+ // { username:"epans", id:200, date:'2023-12-01',email:'测试信息1123' },
|
|
|
|
+ // { username:"derek", id:300, date:'2023-12-01',email:'测试信息1123' },
|
|
|
|
+ // { username:"admin", id:100, date:'2023-12-01',email:'测试信息1123' },
|
|
|
|
+ // { username:"epans", id:200, date:'2023-12-01',email:'测试信息1123' },
|
|
|
|
+ // { username:"derek", id:300, date:'2023-12-01',email:'测试信息1123' },
|
|
|
|
+ ],
|
|
|
|
+
|
|
|
|
+
|
|
|
|
+ feedList: [
|
|
|
|
+ {id: "全部饲料", name: "全部饲料"},
|
|
|
|
+ {id: "牛奶", name: "牛奶"},
|
|
|
|
+ {id: "水", name: "水"},
|
|
|
|
+ {id: "代乳粉", name: "代乳粉"},
|
|
|
|
+ ],
|
|
|
|
+
|
|
|
|
+ // 下拉框 - 栏舍组
|
|
|
|
+ calfTypeList: [
|
|
|
|
+ // {id: "栏舍组1", name: "栏舍组1"},
|
|
|
|
+ // {id: "栏舍组2", name: "栏舍组2"},
|
|
|
|
+ // {id: "栏舍组3", name: "栏舍组3"}
|
|
|
|
+ ],
|
|
|
|
+
|
|
|
|
+
|
|
|
|
+
|
|
|
|
+ chart1: {
|
|
|
|
+ getdataListParm: {
|
|
|
|
+ name: 'getChart1ByHomepage',
|
|
|
|
+ page: 1,
|
|
|
|
+ offset: 1,
|
|
|
|
+ pagecount: '',
|
|
|
|
+ returntype: 'Map',
|
|
|
|
+ parammaps: {
|
|
|
|
+ inputDatetime: '',
|
|
|
|
+ beginDate: '',
|
|
|
|
+ endDate: '',
|
|
|
|
+
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ //图表实例
|
|
|
|
+ chartLine1: null,
|
|
|
|
+ //图表数据
|
|
|
|
+ chartLine1_data: {
|
|
|
|
+ monthdate:['2022-08-04', '2022-08-05', '2022-08-06', '2022-08-07', '2022-08-08', '2022-08-09', '2022-08-10'],
|
|
|
|
+ arr1:['3.52', '3.17', '3.31', '2.79', '3.22', '2.98', '3.06'],
|
|
|
|
+ arr2:['3.52', '3.17', '3.31', '2.79', '3.22', '2.98', '3.06'],
|
|
|
|
+ arr3:['3.52', '3.17', '3.31', '2.79', '3.22', '2.98', '3.06'],
|
|
|
|
+ arr4:['3.52', '3.17', '3.31', '2.79', '3.22', '2.98', '3.06'],
|
|
|
|
+ arr5:['3.52', '3.17', '3.31', '2.79', '3.22', '2.98', '3.06'],
|
|
|
|
+ arr6:['3.52', '3.17', '3.31', '2.79', '3.22', '2.98', '3.06'],
|
|
|
|
+ sum:['300.52', '300.17', '300.31', '200.79', '300.22', '200.98', '300.06'],
|
|
|
|
+
|
|
|
|
+ },
|
|
|
|
+
|
|
|
|
+
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ mounted() {
|
|
|
|
+ //加载 - 图表假数据,如果是图表需要放mounted里测试假数据
|
|
|
|
+ this.roadchartLine1(this.chartLine1_data)
|
|
|
|
+
|
|
|
|
+
|
|
|
|
+
|
|
|
|
+ },
|
|
|
|
+ created(){
|
|
|
|
+
|
|
|
|
+ //获取下拉框
|
|
|
|
+ this.get_select_list1()
|
|
|
|
+ //表格 - 初始化
|
|
|
|
+ this.get_table_data()
|
|
|
|
+
|
|
|
|
+
|
|
|
|
+ //this.getChart1
|
|
|
|
+
|
|
|
|
+ },
|
|
|
|
+ methods:{
|
|
|
|
+
|
|
|
|
+ //获取 下拉框
|
|
|
|
+ get_select_list1(){
|
|
|
|
+ var me = this
|
|
|
|
+ ajaxDataPost('/api/v1/ops/base_setting/calf_type/list?page=1&page_size=1000', {name:"" }).then(e => {
|
|
|
|
+ console.log("穿梭框1:",e)
|
|
|
|
+
|
|
|
|
+ //打印请求成功结果
|
|
|
|
+ if(e.data.list == null || e.data.list == undefined ||e.data.list.length == 0 ){
|
|
|
|
+ me.calfTypeList = []
|
|
|
|
+ } else {
|
|
|
|
+ me.calfTypeList = e.data.list
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ })
|
|
|
|
+
|
|
|
|
+
|
|
|
|
+
|
|
|
|
+ },
|
|
|
|
+
|
|
|
|
+
|
|
|
|
+ //搜索 查询表格
|
|
|
|
+ form_search(){
|
|
|
|
+ var me = this
|
|
|
|
+ console.log('请求表格列表searchData',me.searchData)
|
|
|
|
+
|
|
|
|
+ if (me.searchData.inputDatetime1 !== '' && me.searchData.inputDatetime1 !== null) {
|
|
|
|
+ me.searchData.min_operation_time = parseTime(me.searchData.inputDatetime1[0], '{y}-{m}-{d}')
|
|
|
|
+ me.searchData.max_operation_time = parseTime(me.searchData.inputDatetime1[1], '{y}-{m}-{d}')
|
|
|
|
+ } else {
|
|
|
|
+ me.searchData.inputDatetime1 = ''
|
|
|
|
+ me.searchData.min_operation_time = ''
|
|
|
|
+ me.searchData.max_operation_time = ''
|
|
|
|
+ }
|
|
|
|
+ me.get_table_data()
|
|
|
|
+ me.getChart1()
|
|
|
|
+
|
|
|
|
+ },
|
|
|
|
+
|
|
|
|
+
|
|
|
|
+ //获取 表格
|
|
|
|
+ get_table_data() {
|
|
|
|
+
|
|
|
|
+ var me = this
|
|
|
|
+
|
|
|
|
+ me.tableLoading = true
|
|
|
|
+ console.log("searchData======>", me.searchData)
|
|
|
|
+
|
|
|
|
+
|
|
|
|
+
|
|
|
|
+ if( me.searchData.status == ""){
|
|
|
|
+ me.searchData.status = undefined
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ var send_url = me.url_get_table + '?page=' + me.searchData.page + '&page_size=' + me.searchData.page_size
|
|
|
|
+
|
|
|
|
+ ajaxDataPost(send_url, me.searchData).then(e => {
|
|
|
|
+ console.log("表格请求结果:",e)
|
|
|
|
+ //打印请求成功结果
|
|
|
|
+ if(e.code == 200 ){
|
|
|
|
+ me.tableList = e.data.list
|
|
|
|
+ me.searchData.total = e.data.total; // 总数
|
|
|
|
+ me.searchData.page = e.data.page; //页码
|
|
|
|
+ me.searchData.page_size = e.data.page_size; //每页数量
|
|
|
|
+
|
|
|
|
+ } else {
|
|
|
|
+ me.$message({ type: 'error', message: '请求表格列表失败!' + e.msg, duration: 2000 })
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ setTimeout(() => {
|
|
|
|
+ me.tableLoading = false
|
|
|
|
+ }, 100)
|
|
|
|
+
|
|
|
|
+ })
|
|
|
|
+
|
|
|
|
+
|
|
|
|
+ },
|
|
|
|
+
|
|
|
|
+ getChart1() {
|
|
|
|
+
|
|
|
|
+
|
|
|
|
+ var send_url = me.url_get_chart + '?page=' + me.searchData.page + '&page_size=' + me.searchData.page_size
|
|
|
|
+
|
|
|
|
+ ajaxDataPost(send_url, me.searchData).then(e => {
|
|
|
|
+ console.log("图表请求结果:",e)
|
|
|
|
+ //打印请求成功结果
|
|
|
|
+ // if(e.code == 200 ){
|
|
|
|
+ // me.tableList = e.data.list
|
|
|
|
+ // me.searchData.total = e.data.total; // 总数
|
|
|
|
+ // me.searchData.page = e.data.page; //页码
|
|
|
|
+ // me.searchData.page_size = e.data.page_size; //每页数量
|
|
|
|
+
|
|
|
|
+ // } else {
|
|
|
|
+ // me.$message({ type: 'error', message: '请求表格列表失败!' + e.msg, duration: 2000 })
|
|
|
|
+ // }
|
|
|
|
+
|
|
|
|
+ // if (response.data.list !== null) {
|
|
|
|
+ // var chartLine1_data = response.data.list[0]
|
|
|
|
+ // this.chartLine1_data = chartLine1_data
|
|
|
|
+ // this.roadchartLine1(chartLine1_data)
|
|
|
|
+ // } else {
|
|
|
|
+ // this.chart1.list = []
|
|
|
|
+ // }
|
|
|
|
+
|
|
|
|
+
|
|
|
|
+ })
|
|
|
|
+
|
|
|
|
+
|
|
|
|
+
|
|
|
|
+ },
|
|
|
|
+
|
|
|
|
+ roadchartLine1(chartLine1_data) {
|
|
|
|
+
|
|
|
|
+
|
|
|
|
+ if (this.chartLine1 != null) {
|
|
|
|
+ this.chartLine1.dispose()
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ console.log(echarts)
|
|
|
|
+ this.chartLine1 = echarts.init(document.getElementById('chartLine1'))
|
|
|
|
+ var option = {
|
|
|
|
+ title: {
|
|
|
|
+ text: '犊牛饲料趋势'
|
|
|
|
+ },
|
|
|
|
+ tooltip: {
|
|
|
|
+ trigger: 'axis'
|
|
|
|
+ },
|
|
|
|
+ legend: {
|
|
|
|
+ data: ['牛奶','代乳粉','总费用','牛奶费','代乳粉费']
|
|
|
|
+ },
|
|
|
|
+ grid: {
|
|
|
|
+ left: '3%',
|
|
|
|
+ right: '4%',
|
|
|
|
+ bottom: '3%',
|
|
|
|
+ containLabel: true
|
|
|
|
+ },
|
|
|
|
+ xAxis: {
|
|
|
|
+ type: 'category',
|
|
|
|
+ boundaryGap: false,
|
|
|
|
+ data: chartLine1_data.monthdate
|
|
|
|
+ },
|
|
|
|
+ yAxis: [
|
|
|
|
+ { type: 'value', name: '用量(kg)',axisLabel: {formatter: '{value}' }},
|
|
|
|
+ { type: 'value',name: '费用(元)',axisLabel: {formatter: '{value}' }},
|
|
|
|
+ ],
|
|
|
|
+ series: [
|
|
|
|
+ { name: '牛奶', type: 'line', data: chartLine1_data.arr1 },
|
|
|
|
+ { name: '代乳粉', type: 'line', data: chartLine1_data.arr3 },
|
|
|
|
+ { name: '牛奶费', yAxisIndex: 1, type: 'line', data: chartLine1_data.arr4,yAxisIndex: 1 },
|
|
|
|
+ { name: '代乳粉费', yAxisIndex: 1, type: 'line', data: chartLine1_data.arr6,yAxisIndex: 1 },
|
|
|
|
+ { name: '总费用', yAxisIndex: 1, type: 'line', data: chartLine1_data.sum },
|
|
|
|
+ ]
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+
|
|
|
|
+ this.chartLine1.setOption(option)
|
|
|
|
+ window.onresize = function () {
|
|
|
|
+ this.chartLine1.resize()
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+
|
|
|
|
+
|
|
|
|
+
|
|
|
|
+
|
|
|
|
+
|
|
|
|
+
|
|
|
|
+
|
|
|
|
+ }
|
|
|
|
+}
|
|
|
|
+</script>
|
|
|
|
+
|
|
|
|
+<style scoped>
|
|
|
|
+
|
|
|
|
+</style>
|