|
|
@@ -0,0 +1,341 @@
|
|
|
+<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 typeNameList" :key="item.id" :label="item.name" :value="item.id" />
|
|
|
+ </el-select>
|
|
|
+
|
|
|
+ <el-select v-if="searchData.typeId == '栏舍组'" v-model="searchData.barid" filterable placeholder="栏舍组名称" style="width: 180px;" class="g-mr20" clearable>
|
|
|
+ <el-option v-for="item in barnGroupList" :key="item.id" :label="item.name" :value="item.id" />
|
|
|
+ </el-select>
|
|
|
+
|
|
|
+ <el-input v-if="searchData.typeId == '单头犊牛'" v-model="searchData.repairCode" placeholder="牛号" style="width: 180px;" class="g-mr20" />
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ <el-button type="primary" @click="form_search">搜索</el-button>
|
|
|
+ <el-button type="primary" @click="form_clear">重置</el-button>
|
|
|
+ <el-button type="primary" v-if="isButtonEdit" @click="form_add">添加</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="犊牛头数" min-width="150px" align="center">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <span>{{ scope.row.name }}</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>
|
|
|
+
|
|
|
+ <!-- 分页区域 -->
|
|
|
+ <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' },
|
|
|
+ ],
|
|
|
+
|
|
|
+
|
|
|
+ typeNameList: [
|
|
|
+ {id: "全部", name: "全部"},
|
|
|
+ {id: "栏舍组", name: "栏舍组"},
|
|
|
+ {id: "单头犊牛", name: "单头犊牛"}
|
|
|
+ ],
|
|
|
+
|
|
|
+ // 下拉框 - 栏舍组
|
|
|
+ barnGroupList: [
|
|
|
+ // {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:[22, 22, 22, 2, 22, 22, 55],
|
|
|
+ arr2:[33, 11, 44, 55, 90, 230, 55],
|
|
|
+
|
|
|
+ },
|
|
|
+
|
|
|
+
|
|
|
+ }
|
|
|
+ },
|
|
|
+ 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/barn_group/list?page=1&page_size=1000", { name: ""}).then(e => {
|
|
|
+ console.log("栏舍组下拉框：",e)
|
|
|
+
|
|
|
+ if(e.data.list == null || e.data.list == undefined ||e.data.list.length == 0 ){
|
|
|
+ me.barnGroupList = []
|
|
|
+ } else {
|
|
|
+ me.barnGroupList = e.data.list
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ })
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ },
|
|
|
+
|
|
|
+
|
|
|
+ //搜索 查询表格
|
|
|
+ form_search(){
|
|
|
+ var me = this
|
|
|
+ console.log('请求表格列表searchData',me.searchData)
|
|
|
+ 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'
|
|
|
+ },
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ name: '全部犊牛',
|
|
|
+ type: 'line',
|
|
|
+ data: chartLine1_data.arr1
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ this.chartLine1.setOption(option)
|
|
|
+ window.onresize = function () {
|
|
|
+ this.chartLine1.resize()
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped>
|
|
|
+
|
|
|
+</style>
|
