.

src/views/collectData/collectData.vue

@@ -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>
-              &nbsp;至&nbsp;
-              <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>
-              &nbsp;至&nbsp;
-              <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>
-              &nbsp;至&nbsp;
-              <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>
-              &nbsp;至&nbsp;
-              <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>
+                &nbsp;至&nbsp;
+                <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>
+                &nbsp;至&nbsp;
+                <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>
+                &nbsp;至&nbsp;
+                <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>
+                &nbsp;至&nbsp;
+                <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>

src/views/deviceAdmin/deviceAdmin.vue

@@ -389,7 +389,7 @@ export default {
         this.boxList[3].value = res.data.data.logout
         console.log(res);
         this.tableData = data.page.list
-        this.totalPages = data.page.totalPage
+        this.totalPages = data.page.totalCount
         this.dataListLoading = false
       }).catch(() => {
         this.dataListLoading = false
@@ -398,10 +398,12 @@ export default {
     // 显示条数改变
     sizeChange (val) {
       this.pageSize = val
+      this.init()
     },
     // 页数改变
     pageChange (val) {
       this.pageIndex = val
+      this.init()
     },
     // 清空 el-form 
     resetForm(form) {