|
|
@@ -1,225 +1,239 @@
|
|
|
<template>
|
|
|
- <div class="collectData">
|
|
|
+ <div>
|
|
|
<div class="header_title">数据分析</div>
|
|
|
- <!-- 汇总数据的 nav -->
|
|
|
- <div class="box">
|
|
|
- <label>母猪存栏区域选择：</label>
|
|
|
- <area-zz :countyCode="330000" @getCityCode="getCityCode"></area-zz>
|
|
|
- <div class="box_item" v-for="item in boxList" :key="item.id">
|
|
|
- <p>{{item.name}}</p>
|
|
|
- <p>{{item.value}}</p>
|
|
|
+ <div class="collectData">
|
|
|
+
|
|
|
+ <!-- 汇总数据的 nav -->
|
|
|
+ <div class="box">
|
|
|
+ <div class="box_item" v-for="item in boxList" :key="item.id">
|
|
|
+ <p>{{item.name}}</p>
|
|
|
+ <p>{{item.value}}</p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="conditions">
|
|
|
+ <el-form inline size="mini" label-width="110px">
|
|
|
+ <el-form-item label="区域选择：" style="width: 310px">
|
|
|
+ <!-- <el-input v-model="searchForm.registerTime" placeholder=""></el-input> -->
|
|
|
+ <area-zz :countyCode="330000" @getCityCode="getCityCode" style="width: 200px"></area-zz>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item style="margin-left: 55px">
|
|
|
+ <el-button type="primary" @click="selectCity">查询</el-button>
|
|
|
+ <!-- <el-button plain type="info" @click="resetForm('searchForm')">清空</el-button> -->
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
</div>
|
|
|
- </div>
|
|
|
|
|
|
- <!-- 以下为图表 -->
|
|
|
- <div>
|
|
|
- <!-- <div class="chartDiv">
|
|
|
- <div class="title">
|
|
|
- <span>母猪总存栏走势</span>
|
|
|
- <div class="right">
|
|
|
- <el-date-picker
|
|
|
- v-model="timeSelected"
|
|
|
- v-show="daySelected === 1"
|
|
|
- type="daterange"
|
|
|
- range-separator="—"
|
|
|
- start-placeholder="开始日期"
|
|
|
- end-placeholder="结束日期"
|
|
|
- @change="onChange"
|
|
|
- value-format="yyyy-MM-dd"
|
|
|
- size="mini">
|
|
|
- </el-date-picker>
|
|
|
- <el-date-picker
|
|
|
- v-model="monthSelected"
|
|
|
- v-show="daySelected === 2"
|
|
|
- type="monthrange"
|
|
|
- range-separator="至"
|
|
|
- start-placeholder="开始月份"
|
|
|
- end-placeholder="结束月份"
|
|
|
- @change="onChange"
|
|
|
- size="mini"
|
|
|
- value-format="yyyy-MM">
|
|
|
- </el-date-picker>
|
|
|
- <div v-show="daySelected === 3">
|
|
|
+ <!-- 以下为图表 -->
|
|
|
+ <div>
|
|
|
+ <!-- <div class="chartDiv">
|
|
|
+ <div class="title">
|
|
|
+ <span>母猪总存栏走势</span>
|
|
|
+ <div class="right">
|
|
|
<el-date-picker
|
|
|
- v-model="startYear"
|
|
|
- type="year"
|
|
|
- placeholder="选择年"
|
|
|
- size="mini"
|
|
|
- style="width: 100px;"
|
|
|
- value-format="yyyy">
|
|
|
+ v-model="timeSelected"
|
|
|
+ v-show="daySelected === 1"
|
|
|
+ type="daterange"
|
|
|
+ range-separator="—"
|
|
|
+ start-placeholder="开始日期"
|
|
|
+ end-placeholder="结束日期"
|
|
|
+ @change="onChange"
|
|
|
+ value-format="yyyy-MM-dd"
|
|
|
+ size="mini">
|
|
|
</el-date-picker>
|
|
|
- -
|
|
|
<el-date-picker
|
|
|
- v-model="endYear"
|
|
|
- type="year"
|
|
|
- placeholder="选择年"
|
|
|
- size="mini"
|
|
|
+ v-model="monthSelected"
|
|
|
+ v-show="daySelected === 2"
|
|
|
+ type="monthrange"
|
|
|
+ range-separator="至"
|
|
|
+ start-placeholder="开始月份"
|
|
|
+ end-placeholder="结束月份"
|
|
|
@change="onChange"
|
|
|
- style="width: 100px;"
|
|
|
- value-format="yyyy">
|
|
|
+ size="mini"
|
|
|
+ value-format="yyyy-MM">
|
|
|
</el-date-picker>
|
|
|
+ <div v-show="daySelected === 3">
|
|
|
+ <el-date-picker
|
|
|
+ v-model="startYear"
|
|
|
+ type="year"
|
|
|
+ placeholder="选择年"
|
|
|
+ size="mini"
|
|
|
+ style="width: 100px;"
|
|
|
+ value-format="yyyy">
|
|
|
+ </el-date-picker>
|
|
|
+ -
|
|
|
+ <el-date-picker
|
|
|
+ v-model="endYear"
|
|
|
+ type="year"
|
|
|
+ placeholder="选择年"
|
|
|
+ size="mini"
|
|
|
+ @change="onChange"
|
|
|
+ style="width: 100px;"
|
|
|
+ value-format="yyyy">
|
|
|
+ </el-date-picker>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="right">
|
|
|
+ <span :class="{'scopeEle': true, 'ifScoped': daySelected === 1, 'borderLeft': true}" @click="scopeDay(1)">日</span>
|
|
|
+ <span :class="{'scopeEle': true, 'ifScoped': daySelected === 2}" @click="scopeDay(2)">月</span>
|
|
|
+ <span :class="{'scopeEle': true, 'ifScoped': daySelected === 3, 'borderRight': true}" @click="scopeDay(3)">年</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <div class="right">
|
|
|
- <span :class="{'scopeEle': true, 'ifScoped': daySelected === 1, 'borderLeft': true}" @click="scopeDay(1)">日</span>
|
|
|
- <span :class="{'scopeEle': true, 'ifScoped': daySelected === 2}" @click="scopeDay(2)">月</span>
|
|
|
- <span :class="{'scopeEle': true, 'ifScoped': daySelected === 3, 'borderRight': true}" @click="scopeDay(3)">年</span>
|
|
|
+ <line-chart :lineList="lineList"></line-chart>
|
|
|
+ </div> -->
|
|
|
+ <div class="chartDiv">
|
|
|
+ <div class="title">
|
|
|
+ <span>各牧场母猪存栏比较</span>
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <his-chart :hisList="hisList"></his-chart>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <line-chart :lineList="lineList"></line-chart>
|
|
|
- </div> -->
|
|
|
- <div class="chartDiv">
|
|
|
- <div class="title">
|
|
|
- <span>各牧场母猪存栏比较</span>
|
|
|
- </div>
|
|
|
- <div>
|
|
|
- <his-chart :hisList="hisList"></his-chart>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="chartDiv">
|
|
|
- <div class="title">
|
|
|
- <span>牧场排名</span>
|
|
|
- </div>
|
|
|
- <!-- 查询 -->
|
|
|
- <div class="form_item">
|
|
|
- <el-form :inline="true" size="mini">
|
|
|
- <el-form-item label="母猪存栏:" style="width: 270px">
|
|
|
- <el-input style="width: 50px;" v-model="searchForm.pigAllMin"></el-input>
|
|
|
- 至
|
|
|
- <el-input style="width: 50px;" v-model="searchForm.pigAllMax"></el-input>
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="母猪新增:" style="width: 270px">
|
|
|
- <el-input style="width: 50px;" v-model="searchForm.pigAddMin"></el-input>
|
|
|
- 至
|
|
|
- <el-input style="width: 50px;" v-model="searchForm.pigAddMax"></el-input>
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="耳标离线:" style="width: 270px">
|
|
|
- <el-input style="width: 50px;" v-model="searchForm.eartagMin"></el-input>
|
|
|
- 至
|
|
|
- <el-input style="width: 50px;" v-model="searchForm.eartagMax"></el-input>
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="能繁母猪:" style="width: 270px">
|
|
|
- <el-input style="width: 50px;" v-model="searchForm.bearPigMin"></el-input>
|
|
|
- 至
|
|
|
- <el-input style="width: 50px;" v-model="searchForm.bearPigMax"></el-input>
|
|
|
- </el-form-item>
|
|
|
- <el-form-item>
|
|
|
- <el-button type="primary" @click="search">查询</el-button>
|
|
|
- </el-form-item>
|
|
|
- </el-form>
|
|
|
- </div>
|
|
|
- <div class="box_table">
|
|
|
- <el-table
|
|
|
- :data="tableData"
|
|
|
- border
|
|
|
- stripe
|
|
|
- :header-cell-style="{'text-align':'center', 'background-color': '#F9FAFC', 'padding': '5px 0', 'color': '#666666'}"
|
|
|
- :cell-style="{'text-align':'center', 'padding': '5px 0'}"
|
|
|
- height="700"
|
|
|
- row-key="name"
|
|
|
- default-expand-all
|
|
|
- :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
|
|
|
- style="width: 100%;"
|
|
|
- @selection-change="selectFarm"
|
|
|
- ref="table"
|
|
|
- @row-click="rowClick">
|
|
|
- <el-table-column
|
|
|
- type="selection"
|
|
|
- width="55">
|
|
|
- </el-table-column>
|
|
|
- <el-table-column
|
|
|
- label="牧场名"
|
|
|
- prop="farmName">
|
|
|
- </el-table-column>
|
|
|
- <el-table-column label="母猪存栏">
|
|
|
+ <div class="chartDiv">
|
|
|
+ <div class="title">
|
|
|
+ <span>牧场排名</span>
|
|
|
+ </div>
|
|
|
+ <!-- 查询 -->
|
|
|
+ <div class="form_item">
|
|
|
+ <el-form :inline="true" size="mini">
|
|
|
+ <el-form-item label="母猪存栏:" style="width: 270px">
|
|
|
+ <el-input style="width: 50px;" v-model="searchForm.pigAllMin"></el-input>
|
|
|
+ 至
|
|
|
+ <el-input style="width: 50px;" v-model="searchForm.pigAllMax"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="母猪新增:" style="width: 270px">
|
|
|
+ <el-input style="width: 50px;" v-model="searchForm.pigAddMin"></el-input>
|
|
|
+ 至
|
|
|
+ <el-input style="width: 50px;" v-model="searchForm.pigAddMax"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <!-- <el-form-item label="耳标离线:" style="width: 270px">
|
|
|
+ <el-input style="width: 50px;" v-model="searchForm.eartagMin"></el-input>
|
|
|
+ 至
|
|
|
+ <el-input style="width: 50px;" v-model="searchForm.eartagMax"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="能繁母猪:" style="width: 270px">
|
|
|
+ <el-input style="width: 50px;" v-model="searchForm.bearPigMin"></el-input>
|
|
|
+ 至
|
|
|
+ <el-input style="width: 50px;" v-model="searchForm.bearPigMax"></el-input>
|
|
|
+ </el-form-item> -->
|
|
|
+ <el-form-item>
|
|
|
+ <el-button type="primary" @click="search">查询</el-button>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ </div>
|
|
|
+ <div class="box_table">
|
|
|
+ <el-table
|
|
|
+ :data="tableData"
|
|
|
+ border
|
|
|
+ stripe
|
|
|
+ :header-cell-style="{'text-align':'center', 'background-color': '#F9FAFC', 'padding': '5px 0', 'color': '#666666'}"
|
|
|
+ :cell-style="{'text-align':'center', 'padding': '5px 0'}"
|
|
|
+ height="700"
|
|
|
+ row-key="name"
|
|
|
+ default-expand-all
|
|
|
+ :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
|
|
|
+ style="width: 100%;"
|
|
|
+ @selection-change="selectFarm"
|
|
|
+ ref="table"
|
|
|
+ @row-click="rowClick">
|
|
|
<el-table-column
|
|
|
- label="存栏量"
|
|
|
- prop="sowLivestock">
|
|
|
+ type="selection"
|
|
|
+ width="55">
|
|
|
</el-table-column>
|
|
|
<el-table-column
|
|
|
- label="省排名"
|
|
|
- prop="sowLivestockRank">
|
|
|
+ label="牧场名"
|
|
|
+ prop="farmName">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="母猪存栏">
|
|
|
+ <el-table-column
|
|
|
+ label="存栏量"
|
|
|
+ prop="sowLivestock">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ label="省排名"
|
|
|
+ prop="sowLivestockRank">
|
|
|
+ </el-table-column>
|
|
|
</el-table-column>
|
|
|
- </el-table-column>
|
|
|
- <el-table-column
|
|
|
- label="母猪存栏月增长">
|
|
|
<el-table-column
|
|
|
- label="存栏月环比增长量"
|
|
|
- prop="sowLivestockInc">
|
|
|
+ label="母猪存栏月增长">
|
|
|
+ <el-table-column
|
|
|
+ label="存栏月环比增长量"
|
|
|
+ prop="sowLivestockInc">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ label="省排名"
|
|
|
+ prop="sowLivestockIncRank">
|
|
|
+ </el-table-column>
|
|
|
</el-table-column>
|
|
|
<el-table-column
|
|
|
- label="省排名"
|
|
|
- prop="sowLivestockIncRank">
|
|
|
+ label="MSY">
|
|
|
+ <el-table-column
|
|
|
+ label="MSY"
|
|
|
+ prop="sowMsy">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ label="省排名"
|
|
|
+ prop="sowMsyRank">
|
|
|
+ </el-table-column>
|
|
|
</el-table-column>
|
|
|
- </el-table-column>
|
|
|
- <el-table-column
|
|
|
- label="MSY">
|
|
|
<el-table-column
|
|
|
- label="MSY"
|
|
|
- prop="sowMsy">
|
|
|
+ prop="outStockCount"
|
|
|
+ label="今年累计出栏量">
|
|
|
</el-table-column>
|
|
|
<el-table-column
|
|
|
- label="省排名"
|
|
|
- prop="sowMsyRank">
|
|
|
+ prop="outStockExpected"
|
|
|
+ label="预计年出栏量">
|
|
|
</el-table-column>
|
|
|
- </el-table-column>
|
|
|
- <el-table-column
|
|
|
- prop="outStockCount"
|
|
|
- label="今年累计出栏量">
|
|
|
- </el-table-column>
|
|
|
- <el-table-column
|
|
|
- prop="outStockExpected"
|
|
|
- label="预计年出栏量">
|
|
|
- </el-table-column>
|
|
|
- <el-table-column
|
|
|
- prop="ainOutStock"
|
|
|
- label="目标年出栏量">
|
|
|
- </el-table-column>
|
|
|
- <el-table-column
|
|
|
- prop="finishPercent"
|
|
|
- label="目标完成度">
|
|
|
- </el-table-column>
|
|
|
- <el-table-column
|
|
|
- label="操作"
|
|
|
- width="100">
|
|
|
- <template slot-scope="scope">
|
|
|
- <el-button @click="handleEdit(scope.row)" type="text" size="small">编辑</el-button>
|
|
|
- </template>
|
|
|
- </el-table-column>
|
|
|
- </el-table>
|
|
|
- <table-footer
|
|
|
- :totals="totalPages"
|
|
|
- :size="pageSize"
|
|
|
- @sizeChange="sizeChange"
|
|
|
- @pageChange="pageChange">
|
|
|
- </table-footer>
|
|
|
- <!-- 对比框 -->
|
|
|
- <div v-show="constrastShow" class="constrast_box">
|
|
|
- <el-card style="height: 100%">
|
|
|
- <div class="card_title">
|
|
|
- <span>对比框（{{constrastNum}}/8）</span>
|
|
|
- <i class="el-icon-circle-close card_icon" @click="closeConstrast"></i>
|
|
|
- </div>
|
|
|
- <!-- 被选中的牧场 -->
|
|
|
- <div class="card_body">
|
|
|
- <ul class="card_ul">
|
|
|
- <li
|
|
|
- v-for="item in cardFarms"
|
|
|
- :key="item.id">
|
|
|
- {{ item.farmName }}
|
|
|
- </li>
|
|
|
- </ul>
|
|
|
- </div>
|
|
|
- <div class="card_footer">
|
|
|
- <el-button plain size="small" @click="handleClear">清 空</el-button>
|
|
|
- <el-button type="primary" size="small" @click="handleConstrast">对 比</el-button>
|
|
|
- </div>
|
|
|
- </el-card>
|
|
|
+ <el-table-column
|
|
|
+ prop="ainOutStock"
|
|
|
+ label="目标年出栏量">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ prop="finishPercent"
|
|
|
+ label="目标完成度">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ label="操作"
|
|
|
+ width="100">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <el-button @click.stop="handleEdit(scope.row)" type="text" size="small">编辑</el-button>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ <table-footer
|
|
|
+ :totals="totalPages"
|
|
|
+ :size="pageSize"
|
|
|
+ @sizeChange="sizeChange"
|
|
|
+ @pageChange="pageChange">
|
|
|
+ </table-footer>
|
|
|
+ <!-- 对比框 -->
|
|
|
+ <div v-show="constrastShow" class="constrast_box">
|
|
|
+ <el-card style="height: 100%">
|
|
|
+ <div class="card_title">
|
|
|
+ <span>对比框（{{constrastNum}}/8）</span>
|
|
|
+ <i class="el-icon-circle-close card_icon" @click="closeConstrast"></i>
|
|
|
+ </div>
|
|
|
+ <!-- 被选中的牧场 -->
|
|
|
+ <div class="card_body">
|
|
|
+ <ul class="card_ul">
|
|
|
+ <li
|
|
|
+ v-for="item in cardFarms"
|
|
|
+ :key="item.id">
|
|
|
+ {{ item.farmName }}
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ <div class="card_footer">
|
|
|
+ <el-button plain size="small" @click="handleClear">清 空</el-button>
|
|
|
+ <el-button type="primary" size="small" @click="handleConstrast">对 比</el-button>
|
|
|
+ </div>
|
|
|
+ </el-card>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
+ <update ref="update" @refreshData="init"></update>
|
|
|
</div>
|
|
|
- <update ref="update" @refreshData="init"></update>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
@@ -323,11 +337,13 @@ export default {
|
|
|
},
|
|
|
// 修改size
|
|
|
sizeChange(val) {
|
|
|
- this.pageSize = val;
|
|
|
+ this.pageSize = val
|
|
|
+ this.init()
|
|
|
},
|
|
|
// 修改页数
|
|
|
pageChange(val) {
|
|
|
- this.pageNum = val;
|
|
|
+ this.pageNum = val
|
|
|
+ this.init()
|
|
|
},
|
|
|
// echarts 图的数据
|
|
|
initEchart () {
|
|
|
@@ -366,7 +382,7 @@ export default {
|
|
|
},
|
|
|
// 牧场排名的查询
|
|
|
search () {
|
|
|
- console.log('查询');
|
|
|
+ this.init()
|
|
|
},
|
|
|
// 牧场排名 - 表格
|
|
|
init () {
|
|
|
@@ -375,11 +391,16 @@ export default {
|
|
|
method: 'get',
|
|
|
data: this.$http.adornData({
|
|
|
'page': this.pageNum,
|
|
|
- 'limit': this.pageSize
|
|
|
+ 'limit': this.pageSize,
|
|
|
+ 'maxSowCount': this.searchForm.pigAllMax || undefined,
|
|
|
+ 'minSowCount': this.searchForm.pigAllMin || undefined,
|
|
|
+ 'maxSowInc': this.searchForm.pigAddMax || undefined,
|
|
|
+ 'minSowInc': this.searchForm.pigAddMin || undefined,
|
|
|
})
|
|
|
}).then(({data}) => {
|
|
|
if(data.code === 0) {
|
|
|
this.tableData = data.page.list
|
|
|
+ this.totalPages = data.page.totalCount
|
|
|
} else {
|
|
|
this.hisList = [];
|
|
|
}
|
|
|
@@ -446,6 +467,9 @@ export default {
|
|
|
console.log(val);
|
|
|
let len = val.length
|
|
|
this.areaSelected = val[len-1]
|
|
|
+ // this.initCom();
|
|
|
+ },
|
|
|
+ selectCity () {
|
|
|
this.initCom();
|
|
|
},
|
|
|
onChange() {
|
|
|
@@ -514,6 +538,7 @@ export default {
|
|
|
display: flex;
|
|
|
justify-content: space-around;
|
|
|
align-items: center;
|
|
|
+ /* margin-right: 10px; */
|
|
|
}
|
|
|
|
|
|
/* 汇总数据块的顶栏 */
|
|
|
@@ -531,8 +556,9 @@ export default {
|
|
|
|
|
|
/* 图表结构的大局 */
|
|
|
.chartDiv {
|
|
|
- margin: 10px;
|
|
|
+ /* margin: 10px; */
|
|
|
margin-top: 20px;
|
|
|
+ margin-left: 0;
|
|
|
border: 1px solid #ddd;
|
|
|
background-color: #fff;
|
|
|
}
|
|
|
@@ -643,4 +669,16 @@ export default {
|
|
|
justify-content: space-around;
|
|
|
padding: 15px 20px;
|
|
|
}
|
|
|
+/** 选择条件 */
|
|
|
+.conditions {
|
|
|
+ /* width: 100%; */
|
|
|
+ background-color: #fff;
|
|
|
+ margin: 30px 0;
|
|
|
+ border: 1px solid #ddd;
|
|
|
+ padding: 20px;
|
|
|
+ padding-bottom: 10px;
|
|
|
+}
|
|
|
+.collectData {
|
|
|
+ /* margin: 10px; */
|
|
|
+}
|
|
|
</style>
|
East