123123

src/views/collectData/collectData.vue

@@ -83,7 +83,7 @@
         </div> -->
         <div class="chartDiv">
           <div class="title">
-            <span>各牧场母猪存栏比较</span>
+            <span>各{{ range }}母猪存栏比较</span>
           </div>
           <div>
             <his-chart :hisList="hisList"></his-chart>
@@ -248,6 +248,7 @@ export default {
   name: "collectData",
   data () {
     return {
+      range: '市',
       areaSelected: '330000',
       boxList: [
         {
@@ -467,6 +468,12 @@ export default {
       console.log(val);
       let len = val.length
       this.areaSelected = val[len-1]
+      const ranges = {
+        1: '市',
+        2: '县',
+        3: '牧场'
+      }
+      this.range = ranges[len]
       // this.initCom();
     },
     selectCity () {
@@ -530,6 +537,9 @@ export default {
   color: #6FA8C8;
   margin-bottom: 10px;
   padding-left: 20px;
+  position: fixed;
+  width: 1660px;
+  z-index: 1000;
 }
 .box {
   width: 100%;
@@ -679,6 +689,6 @@ export default {
   padding-bottom: 10px;
 }
 .collectData {
-  /* margin: 10px; */
+  padding-top: 40px;
 }
 </style>

src/views/deviceAdmin/deviceAdmin.vue

@@ -1,218 +1,220 @@
 <template>
-  <div class="device-management">
+  <div>
     <div class="header_title">设备管理</div>
-    <!-- 设备管理 -->
-    <div class="box">
-      <div class="box_item" v-for="item in boxList" :key="item.id">
-        <p>{{item.name}}</p>
-        <p>{{item.value}}</p>
+    <div class="device-management">
+      <!-- 设备管理 -->
+      <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 ref="searchForm" inline :model="searchForm" size="mini" label-width="110px">
+          <el-form-item label="注册时间：" prop="registerTime" style="width: 310px">
+            <!-- <el-input v-model="searchForm.registerTime" placeholder=""></el-input> -->
+            <el-date-picker
+              v-model="searchForm.registerTime"
+              type="daterange"
+              placeholder="选择日期"
+              style="width: 200px"
+              value-format="yyyy-MM-dd">
+            </el-date-picker>
+          </el-form-item>
+          <el-form-item label="省市县：" prop="countyName" style="width: 310px">
+            <el-input v-model="searchForm.countyName" placeholder="地县名/编码" style="width: 200px"></el-input>
+          </el-form-item>
+          <el-form-item label="牧场：" prop="farmName" style="width: 310px">
+            <el-input v-model="searchForm.farmName" placeholder="牧场名/编码" style="width: 200px"></el-input>
+          </el-form-item>
+          <!-- <el-form-item label="栋舍：" prop="pigsty" style="width: 310px">
+            <el-input v-model="searchForm.pigsty" placeholder="" style="width: 200px"></el-input>
+          </el-form-item> -->
+          <el-form-item label="网络通信状态：" prop="networkStatus" style="width: 310px">
+            <el-select v-model="searchForm.networkStatus" style="width: 200px">
+              <el-option
+                v-for="item in networkList"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value">
+              </el-option>
+            </el-select>
+          </el-form-item>
+          <el-form-item label="采集状态：" prop="acqStatus" style="width: 310px">
+            <el-select v-model="searchForm.acqStatus" style="width: 200px">
+              <el-option
+                v-for="item in acqList"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value">
+              </el-option>
+            </el-select>
+          </el-form-item>
+          <el-form-item label="注销状态：" prop="canStatus" style="width: 310px">
+            <el-select v-model="searchForm.canStatus" style="width: 200px">
+              <el-option
+                v-for="item in canList"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value">
+              </el-option>
+            </el-select>
+          </el-form-item>
+          <el-form-item label="设备编码：" prop="deviceCode" style="width: 310px">
+            <el-input v-model="searchForm.deviceCode" placeholder="" style="width: 200px"></el-input>
+          </el-form-item>
+          <el-form-item style="margin-left: 55px">
+            <el-button type="primary" @click="init">查询</el-button>
+            <el-button plain type="info" @click="resetForm('searchForm')">清空</el-button>
+          </el-form-item>
+        </el-form>
       </div>
-    </div>
-    <!-- 查询条件 -->
-    <div class="conditions">
-      <el-form ref="searchForm" inline :model="searchForm" size="mini" label-width="110px">
-        <el-form-item label="注册时间：" prop="registerTime" style="width: 310px">
-          <!-- <el-input v-model="searchForm.registerTime" placeholder=""></el-input> -->
-          <el-date-picker
-            v-model="searchForm.registerTime"
-            type="daterange"
-            placeholder="选择日期"
-            style="width: 200px"
-            value-format="yyyy-MM-dd">
-          </el-date-picker>
-        </el-form-item>
-        <el-form-item label="省市县：" prop="countyName" style="width: 310px">
-          <el-input v-model="searchForm.countyName" placeholder="地县名/编码" style="width: 200px"></el-input>
-        </el-form-item>
-        <el-form-item label="牧场：" prop="farmName" style="width: 310px">
-          <el-input v-model="searchForm.farmName" placeholder="牧场名/编码" style="width: 200px"></el-input>
-        </el-form-item>
-        <!-- <el-form-item label="栋舍：" prop="pigsty" style="width: 310px">
-          <el-input v-model="searchForm.pigsty" placeholder="" style="width: 200px"></el-input>
-        </el-form-item> -->
-        <el-form-item label="网络通信状态：" prop="networkStatus" style="width: 310px">
-          <el-select v-model="searchForm.networkStatus" style="width: 200px">
-            <el-option
-              v-for="item in networkList"
-              :key="item.value"
-              :label="item.label"
-              :value="item.value">
-            </el-option>
-          </el-select>
-        </el-form-item>
-        <el-form-item label="采集状态：" prop="acqStatus" style="width: 310px">
-          <el-select v-model="searchForm.acqStatus" style="width: 200px">
-            <el-option
-              v-for="item in acqList"
-              :key="item.value"
-              :label="item.label"
-              :value="item.value">
-            </el-option>
-          </el-select>
-        </el-form-item>
-        <el-form-item label="注销状态：" prop="canStatus" style="width: 310px">
-          <el-select v-model="searchForm.canStatus" style="width: 200px">
-            <el-option
-              v-for="item in canList"
-              :key="item.value"
-              :label="item.label"
-              :value="item.value">
-            </el-option>
-          </el-select>
-        </el-form-item>
-        <el-form-item label="设备编码：" prop="deviceCode" style="width: 310px">
-          <el-input v-model="searchForm.deviceCode" placeholder="" style="width: 200px"></el-input>
-        </el-form-item>
-        <el-form-item style="margin-left: 55px">
-          <el-button type="primary" @click="init">查询</el-button>
-          <el-button plain type="info" @click="resetForm('searchForm')">清空</el-button>
-        </el-form-item>
-      </el-form>
-    </div>
 
-    <!-- 按钮栏 -->
-    <div class="title">
-      <div class="title-left">
-        <i class="el-icon-s-unfold"></i>
-        <span>设备列表</span>
-        <el-button plain size="mini" class="button-margin">批量上传</el-button>
-        <el-button type="primary" plain size="mini" @click="handleAddOrEdit">新增设备</el-button>
+      <!-- 按钮栏 -->
+      <div class="title">
+        <div class="title-left">
+          <i class="el-icon-s-unfold"></i>
+          <span>设备列表</span>
+          <el-button plain size="mini" class="button-margin">批量上传</el-button>
+          <el-button type="primary" plain size="mini" @click="handleAddOrEdit">新增设备</el-button>
+        </div>
       </div>
+      <!-- 表格 -->
+      <el-table
+        :data="tableData"
+        style="width: 100%"
+        height="700"
+        border
+        stripe
+        :default-sort="{prop: 'date', order: 'descending'}"
+        size="mini"
+        v-loading="dataListLoading">
+        <el-table-column
+          type="selection"
+          width="40"
+          align="center">
+        </el-table-column>
+        <el-table-column
+          prop="id"
+          label="注册ID"
+          width="60"
+          align="center">
+        </el-table-column>
+        <el-table-column
+          prop="registerTime"
+          sortable
+          label="注册时间"
+          width="100"
+          align="center">
+        </el-table-column>
+        <el-table-column
+          prop="deviceCode"
+          label="设备编码"
+          width="80"
+          align="center">
+        </el-table-column>
+        <el-table-column
+          prop="countyName"
+          label="省市县"
+          align="center">
+        </el-table-column>
+        <el-table-column
+          prop="countyCode"
+          label="省市县编码"
+          align="center">
+        </el-table-column>
+        <el-table-column
+          prop="farmName"
+          label="牧场名称"
+          width="90"
+          align="center">
+        </el-table-column>
+        <el-table-column
+          prop="farmCode"
+          label="牧场编码"
+          width="90"
+          align="center">
+        </el-table-column>
+        <el-table-column
+          label="阶段"
+          width="70"
+          align="center">
+          <template slot-scope="scope">
+            <span>{{ stageList[scope.row.stage - 1].label }}</span>
+            <!-- <span>{{ scope.row.stage }}</span> -->
+          </template>
+        </el-table-column>
+        <el-table-column
+          prop="pigpenName"
+          label="栋舍"
+          width="100"
+          align="center">
+        </el-table-column>
+        <el-table-column
+          prop="serverIp"
+          label="上传服务器地址"
+          width="105"
+          align="center">
+        </el-table-column>
+        <el-table-column
+          prop="port"
+          label="端口"
+          width="60"
+          align="center">
+        </el-table-column>
+        <el-table-column
+          prop="lastTime"
+          label="最后上传时间"
+          sortable
+          align="center">
+        </el-table-column>
+        <el-table-column
+          label="网络通信状态"
+          width="70"
+          align="center">
+          <template slot-scope="scope">
+            <span :class="{ 'normal': scope.row.networkStatus === 1, 'abnormal': scope.row.networkStatus === 0}">{{ networkList[1 - scope.row.networkStatus].label }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column
+          label="采集状态"
+          width="70"
+          align="center">
+          <template slot-scope="scope">
+            <span :class="{ 'normal': scope.row.acqStatus === 1, 'abnormal': scope.row.acqStatus === 2}">{{ acqList[scope.row.acqStatus - 1].label }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column
+          label="注销状态"
+          width="70"
+          align="center">
+          <template slot-scope="scope">
+            <span :class="{ 'normal': scope.row.canStatus === 1, 'logout': scope.row.canStatus === 0}">{{ canList[1 - scope.row.canStatus].label }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column
+          label="操作"
+          align="center">
+          <template slot-scope="scope">
+            <el-button type="text" size="small" @click="handleCheck(scope.row)">查看</el-button>
+            <el-button type="text" size="small" @click="handleAddOrEdit(scope.row)">编辑</el-button>
+            <el-button v-if="scope.row.canStatus === 1" type="text" size="small" @click="handleLogout(scope.row)">注销</el-button>
+            <el-button v-else type="text" size="small" @click="handleLogin(scope.row)">在线</el-button>
+            <el-button type="text" size="small" @click="handleDelete(scope.row)">删除</el-button>
+          </template>
+          <!-- TODO: 按钮 -->
+        </el-table-column>
+      </el-table>
+      <table-footer
+        :totals="totalPages"
+        :size="pageSize"
+        @sizeChange="sizeChange"
+        @pageChange="pageChange">
+      </table-footer>
+      <!-- 新增或者编辑设备弹出框 -->
+      <add-or-update ref="addOrUpdate" @refreshData="init"></add-or-update>
     </div>
-    <!-- 表格 -->
-    <el-table
-      :data="tableData"
-      style="width: 100%"
-      height="700"
-      border
-      stripe
-      :default-sort="{prop: 'date', order: 'descending'}"
-      size="mini"
-      v-loading="dataListLoading">
-      <el-table-column
-        type="selection"
-        width="40"
-        align="center">
-      </el-table-column>
-      <el-table-column
-        prop="id"
-        label="注册ID"
-        width="60"
-        align="center">
-      </el-table-column>
-      <el-table-column
-        prop="registerTime"
-        sortable
-        label="注册时间"
-        width="100"
-        align="center">
-      </el-table-column>
-      <el-table-column
-        prop="deviceCode"
-        label="设备编码"
-        width="80"
-        align="center">
-      </el-table-column>
-      <el-table-column
-        prop="countyName"
-        label="省市县"
-        align="center">
-      </el-table-column>
-      <el-table-column
-        prop="countyCode"
-        label="省市县编码"
-        align="center">
-      </el-table-column>
-      <el-table-column
-        prop="farmName"
-        label="牧场名称"
-        width="90"
-        align="center">
-      </el-table-column>
-      <el-table-column
-        prop="farmCode"
-        label="牧场编码"
-        width="90"
-        align="center">
-      </el-table-column>
-      <el-table-column
-        label="阶段"
-        width="70"
-        align="center">
-        <template slot-scope="scope">
-          <span>{{ stageList[scope.row.stage - 1].label }}</span>
-          <!-- <span>{{ scope.row.stage }}</span> -->
-        </template>
-      </el-table-column>
-      <el-table-column
-        prop="pigpenName"
-        label="栋舍"
-        width="100"
-        align="center">
-      </el-table-column>
-      <el-table-column
-        prop="serverIp"
-        label="上传服务器地址"
-        width="105"
-        align="center">
-      </el-table-column>
-      <el-table-column
-        prop="port"
-        label="端口"
-        width="60"
-        align="center">
-      </el-table-column>
-      <el-table-column
-        prop="lastTime"
-        label="最后上传时间"
-        sortable
-        align="center">
-      </el-table-column>
-      <el-table-column
-        label="网络通信状态"
-        width="70"
-        align="center">
-        <template slot-scope="scope">
-          <span :class="{ 'normal': scope.row.networkStatus === 1, 'abnormal': scope.row.networkStatus === 0}">{{ networkList[1 - scope.row.networkStatus].label }}</span>
-        </template>
-      </el-table-column>
-      <el-table-column
-        label="采集状态"
-        width="70"
-        align="center">
-        <template slot-scope="scope">
-          <span :class="{ 'normal': scope.row.acqStatus === 1, 'abnormal': scope.row.acqStatus === 2}">{{ acqList[scope.row.acqStatus - 1].label }}</span>
-        </template>
-      </el-table-column>
-      <el-table-column
-        label="注销状态"
-        width="70"
-        align="center">
-        <template slot-scope="scope">
-          <span :class="{ 'normal': scope.row.canStatus === 1, 'logout': scope.row.canStatus === 0}">{{ canList[1 - scope.row.canStatus].label }}</span>
-        </template>
-      </el-table-column>
-      <el-table-column
-        label="操作"
-        align="center">
-        <template slot-scope="scope">
-          <el-button type="text" size="small" @click="handleCheck(scope.row)">查看</el-button>
-          <el-button type="text" size="small" @click="handleAddOrEdit(scope.row)">编辑</el-button>
-          <el-button v-if="scope.row.canStatus === 1" type="text" size="small" @click="handleLogout(scope.row)">注销</el-button>
-          <el-button v-else type="text" size="small" @click="handleLogin(scope.row)">在线</el-button>
-          <el-button type="text" size="small" @click="handleDelete(scope.row)">删除</el-button>
-        </template>
-        <!-- TODO: 按钮 -->
-      </el-table-column>
-    </el-table>
-    <table-footer
-      :totals="totalPages"
-      :size="pageSize"
-      @sizeChange="sizeChange"
-      @pageChange="pageChange">
-    </table-footer>
-    <!-- 新增或者编辑设备弹出框 -->
-    <add-or-update ref="addOrUpdate" @refreshData="init"></add-or-update>
   </div>
 </template>
 
@@ -537,6 +539,12 @@ export default {
   color: #6FA8C8;
   margin-bottom: 10px;
   padding-left: 20px;
+  position: fixed;
+  width: 1660px;
+  z-index: 1000;
+}
+.device-management {
+  padding-top: 40px;
 }
 .box{
   width: 100%;

src/views/deviceAdmin/deviceInfo.vue

@@ -197,9 +197,12 @@ export default {
   color: #6FA8C8;
   margin-bottom: 10px;
   padding-left: 20px;
+  position: fixed;
+  width: 1660px;
+  z-index: 1000;
 }
   .device-info {
-    padding: 10px 20px;
+    padding: 50px 20px 0;
   }
 
   .deviceTitle {