....

src/router/childrenRouters.js

@@ -80,6 +80,16 @@ const childrenRouters = [
       defaultUrl: false,
       id: 3,
     }
+  },
+  {
+    path: '/houseManage',
+    name: 'houseManage',
+    component: () => import('../views/deviceAdmin/houseManage.vue'),
+    meta: {
+      title: '栋舍管理',
+      defaultUrl: true,
+      id: 3,
+    }
   }
 ]
 

src/views/MainLayout.vue

@@ -51,7 +51,7 @@ export default {
         {
           id: 3,
           img: require('../assets/u18.png'),
-          name: '设备管理'
+          name: '系统管理'
         }
       ],
       menuItem: [
@@ -91,11 +91,16 @@ export default {
         },
         {
           id: '3',
-          name: '设备管理',
+          name: '系统管理',
           parentId: 3,
           children: [
             {
               id: '31',
+              name: '栋舍管理',
+              url: '/houseManage'
+            },
+            {
+              id: '32',
               name: '设备管理',
               url: '/deviceAdmin'
             }

src/views/collectData/collectData.vue

@@ -7,7 +7,14 @@
       <div class="box">
         <div class="box_item" v-for="item in boxList" :key="item.id">
           <p>{{item.name}}</p>
-          <p>{{item.value}}</p>
+          <p class="number">
+          {{item.value}}
+          <!-- <template v-if="item.data !==0">
+            <i :class="['icon', item.isUp ? '' : 'icon_red']"></i>
+            <span v-if="item.isUp" class="icon_green">+{{item.data}}</span>
+            <span v-else class="icon_dev">-{{item.data}}</span>
+          </template> -->
+          </p>
         </div>
       </div>
 
@@ -565,6 +572,29 @@ export default {
   line-height: 39px;
   margin: 0;
 }
+.number {
+  font-size: 24px;
+  font-weight: 600;
+}
+.icon_green {
+  color: #33FA40;
+  font-size: 16px;
+}
+.icon_dev {
+  color: #DA331D;
+  font-size: 16px;
+}
+.icon {
+  display: inline-block;
+  background-image: url("../../assets/up.png");
+  width: 24px;
+  height: 24px;
+  background-size: 100% 100%;
+}
+.icon_red {
+  background-image: url("../../assets/decline.png");
+  background-size: 100% 100%;
+}
 
 /* 图表结构的大局 */
 .chartDiv {

src/views/deviceAdmin/addOrUpdatePigpen.vue

@@ -0,0 +1,228 @@
+<template>
+  <!-- 新增设备或编辑设备弹出框 -->
+  <el-dialog
+    :visible.sync="visible"
+    class="form">
+    <div slot="title" class="dialog-title">
+      {{ form.id? '编辑栋舍': '新增栋舍' }}
+    </div>
+    <el-form
+      :model="form"
+      :rules="formRule"
+      size="mini"
+      label-position="left"
+      label-width="135px"
+      ref="form"
+      inline>
+      <el-row :gutter="20">
+        <el-col :span="12">
+          <el-form-item label="注册时间：" prop="creatTime">
+            <el-input v-model="form.creatTime" disabled></el-input>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="牧场名：" prop="farmCode">
+            <el-select
+              v-model="form.farmCode"
+              style="width: 178px;"
+              disabled>
+              <el-option
+                v-for="item in farmList"
+                :key="item.farmCode"
+                :label="item.farmName"
+                :value="item.farmCode">
+              </el-option>
+            </el-select>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row :gutter="20">
+        <el-col :span="12">
+          <el-form-item label="阶段：" prop="stage">
+            <el-select v-model="form.stage" style="width: 178px;">
+              <el-option
+                v-for="item in stageList"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value">
+              </el-option>
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="栋舍：" prop="pigpenName">
+            <el-input v-model="form.pigpenName"></el-input>
+          </el-form-item>
+        </el-col>
+      </el-row>
+    </el-form>
+    <div slot="footer" class="dialog-footer">
+      <el-button size="mini" plain @click="visible = false">取 消</el-button>
+      <el-button size="mini" type="success" @click="onSubmit">确 定</el-button>
+    </div>
+  </el-dialog>
+</template>
+<script>
+import {mapState} from 'vuex'
+import utils from '../../utils/index';
+export default {
+  data() {
+    return {
+      visible: false,
+      form: {
+        id: 0,
+        creatTime: '',
+        farmCode: "330703010000422",
+        stage: '',
+        pigpenName: ''
+      },
+      stageList: [ // 阶段
+        {
+          value: 1,
+          label: '配怀'
+        },
+        {
+          value: 2,
+          label: '分娩'
+        },
+        {
+          value: 3,
+          label: '保育'
+        },
+        {
+          value: 4,
+          label: '育成育肥'
+        },
+        {
+          value: 5,
+          label: '空怀'
+        },
+        {
+          value: 6,
+          label: '后备母猪'
+        },
+        {
+          value: 7,
+          label: '公猪'
+        },
+        {
+          value: 8,
+          label: '病死猪场内收集'
+        },
+        {
+          value: 9,
+          label: '病死猪无害化'
+        }
+      ],
+      farmList: [ // 牧场List
+      ],
+      formRule: {
+        farmCode: [
+          { required: true, message: '牧场名不能为空', trigger: 'blur' }
+        ],
+        stage: [
+          { required: true, message: '阶段不能为空', trigger: 'blur' }
+        ],
+        // countyName: [],
+        pigpenName: [
+          { required: true, message: '栋舍名不能为空', trigger: 'blur' }
+        ]
+      },
+      msgFlag: false
+    }
+  },
+  computed: {
+    ...mapState(['baseUrl'])
+  },
+  methods: {
+    init (row) {
+      this.visible = true
+      console.log(row);
+      // 默认注册时间
+      this.form.creatTime = utils.timeDate(new Date().getTime());
+      this.$http({
+        url: this.$http.adornUrl(`${this.baseUrl}/management/basefarminfo/findAll`),
+        method: 'get'
+      }).then(async({data}) => {
+        this.farmList = data.data
+        if (row.id) { // 如果没有参数传入，会默认传入鼠标点击事件
+          this.form.id = row.id
+          this.form.creatTime = row.creatTime
+          this.form.stage = row.stage
+          this.form.pigpenName = row.pigpenName
+          this.form.farmCode = "330703010000422"
+          console.log(this.form);
+        }
+      }).catch(() => {})
+    },
+    // 确定按钮
+    onSubmit () {
+      this.$refs['form'].validate((valid) => {
+        if (valid) {
+          this.$http({
+            url: this.$http.adornUrl(`${this.baseUrl}/manager/basepigpen/${this.form.id? 'update': 'save'}`),
+            method: 'post',
+            data: this.$http.adornData({
+              'id': this.form.id || undefined,
+              'creatTime': this.form.creatTime,
+              'stage': this.form.stage,
+              'pigpenName': this.form.pigpenName,
+              'farmCode': this.form.farmCode,
+              'type': 1,
+              'parentId': 0
+            })
+          }).then(({data}) => {
+            if (data && data.code === 0) {
+              this.$refs['form'].resetFields()
+              this.$emit('refreshData')
+              this.$message({
+                message: '操作成功',
+                type: 'success',
+                duration: 1500,
+                // onClose: () => {
+                //   this.visible = false
+                //   this.$emit('refreshDataList')
+                // }
+              })
+              // this.resetForm()
+              this.visible = false
+            } else {
+              this.$message.error(data.msg)
+            }
+          })
+        }
+      })
+      // this.visible = false
+    }
+  }
+}
+</script>
+<style>
+  .form {
+    margin-top: 150px !important;
+  }
+  .form .el-dialog {
+    border-radius: 5px;
+    width: 45%;
+  }
+  .form .el-dialog__header {
+    padding: 0;
+    border-radius: 5px;
+  }
+  .dialog-title {
+    background-color: #f3f3f3;
+    padding: 15px;
+    font-weight: 700;
+    border-bottom: 1px solid #ddd;
+  }
+  .form .el-dialog__body {
+    padding: 20px 60px;
+  }
+  .form .el-dialog__footer {
+    border-top: 1px solid #ddd;
+  }
+  .form .dialog-footer {
+    padding-right: 50px;
+    padding-top: 10px;
+  }
+</style>

src/views/deviceAdmin/addOrUpdateUnit.vue

@@ -0,0 +1,231 @@
+<template>
+  <!-- 新增设备或编辑设备弹出框 -->
+  <el-dialog
+    :visible.sync="visible"
+    class="form"
+    ref="form">
+    <div slot="title" class="dialog-title">
+      {{ form.id? '编辑单元': '新增单元' }}
+    </div>
+    <el-form
+      :model="form"
+      :rules="formRule"
+      size="mini"
+      label-position="left"
+      label-width="135px"
+      ref="form">
+      <el-form-item label="阶段：" prop="stage">
+        <el-select v-model="form.stage" style="width: 188px;">
+          <el-option
+            v-for="item in stageList"
+            :key="item.value"
+            :label="item.label"
+            :value="item.value">
+          </el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item label="栋舍：" prop="parentId">
+        <el-select
+          v-model="form.parentId"
+          style="width: 188px;">
+          <el-option
+            v-for="item in pigpenList"
+            :key="item.id"
+            :label="item.pigpenName"
+            :value="item.id">
+          </el-option>
+        </el-select>
+      </el-form-item>
+      <!-- <el-form-item label="单元：" prop="pigpenName">
+        <el-input v-model="form.pigpenName"></el-input>
+      </el-form-item> -->
+      <el-form-item
+        v-for="(pigpenName, index) in form.pigpenNames"
+        :label="'单元' + (index + 1)"
+        :key="pigpenName.key" 
+        :prop="'pigpenNames.' + index + '.value'"
+        :rules="{
+          required: true, message: '单元不能为空', trigger: 'blur'
+        }">
+        <el-input v-model="pigpenName.value" style="width: 127px; margin-right: 5px"></el-input>
+        <el-button @click.prevent="removePigpenName(pigpenName)" :disabled="form.id">删除</el-button>
+      </el-form-item>
+    </el-form>
+    <div slot="footer" class="dialog-footer">
+      <el-button size="mini" plain @click="visible = false">取 消</el-button>
+      <el-button size="mini" type="warning" @click="addPigpenName" :disabled="form.id">新增域名</el-button>
+      <el-button size="mini" type="success" @click="onSubmit">确 定</el-button>
+    </div>
+  </el-dialog>
+</template>
+<script>
+import {mapState} from 'vuex'
+export default {
+  data() {
+    return {
+      visible: false,
+      form: {
+        id: 0,
+        stage: '',
+        pigpenNames: [
+          { value: '' }
+        ],
+        parentId: ''
+      },
+      stageList: [ // 阶段
+        {
+          value: 1,
+          label: '配怀'
+        },
+        {
+          value: 2,
+          label: '分娩'
+        },
+        {
+          value: 3,
+          label: '保育'
+        },
+        {
+          value: 4,
+          label: '育成育肥'
+        },
+        {
+          value: 5,
+          label: '空怀'
+        },
+        {
+          value: 6,
+          label: '后备母猪'
+        },
+        {
+          value: 7,
+          label: '公猪'
+        },
+        {
+          value: 8,
+          label: '病死猪场内收集'
+        },
+        {
+          value: 9,
+          label: '病死猪无害化'
+        }
+      ],
+      pigpenList: [ // 牧场List
+      ],
+      formRule: {
+        parentId: [
+          { required: true, message: '栋舍名不能为空', trigger: 'blur' }
+        ],
+        stage: [
+          { required: true, message: '阶段不能为空', trigger: 'blur' }
+        ],
+        // countyName: [],
+        pigpenName: [
+          { required: true, message: '栋舍名不能为空', trigger: 'blur' }
+        ]
+      },
+      msgFlag: false
+    }
+  },
+  computed: {
+    ...mapState(['baseUrl'])
+  },
+  methods: {
+    // 移除单元项
+    removePigpenName(item) {
+      var index = this.form.pigpenNames.indexOf(item)
+      if (index !== -1) {
+        this.form.pigpenNames.splice(index, 1)
+      }
+    },
+    // 新增单元项
+    addPigpenName() {
+      this.form.pigpenNames.push({
+        value: '',
+        key: Date.now()
+      })
+    },
+    init (row) {
+      this.visible = true
+      this.$http({
+        url: this.$http.adornUrl(`${this.baseUrl}/manager/basepigpen/listAll`),
+        method: 'get'
+      }).then(async({data}) => {
+        this.pigpenList = data.page
+        if (row.id) { // 如果没有参数传入，会默认传入鼠标点击事件
+          this.form.id = row.id
+          this.form.parentId = row.parentId
+          this.form.stage = row.stage
+          this.form.pigpenNames[0].value = row.pigpenName
+          console.log(this.form);
+        }
+      }).catch(() => {})
+    },
+    // 确定按钮
+    onSubmit () {
+      let pigpenNames = this.form.pigpenNames.map((item) => item.value)
+      this.$refs['form'].validate((valid) => {
+        if (valid) {
+          this.$http({
+            url: this.$http.adornUrl(`${this.baseUrl}/manager/basepigpen/${this.form.id? 'update': 'save'}`),
+            method: 'post',
+            data: this.$http.adornData({
+              'id': this.form.id || undefined,
+              'stage': this.form.stage,
+              'pigpenName': pigpenNames.join(','),
+              'parentId': this.form.parentId,
+              'type': 2
+            })
+          }).then(({data}) => {
+            if (data && data.code === 0) {
+              this.$refs['form'].resetFields()
+              this.$emit('refreshData')
+              this.$message({
+                message: '操作成功',
+                type: 'success',
+                duration: 1500,
+                // onClose: () => {
+                //   this.visible = false
+                //   this.$emit('refreshDataList')
+                // }
+              })
+              this.visible = false
+            } else {
+              this.$message.error(data.msg)
+            }
+          })
+        }
+      })
+    }
+  }
+}
+</script>
+<style>
+  .form {
+    margin-top: 100px !important;
+  }
+  .form .el-dialog {
+    border-radius: 5px;
+    width: 25%;
+  }
+  .form .el-dialog__header {
+    padding: 0;
+    border-radius: 5px;
+  }
+  .dialog-title {
+    background-color: #f3f3f3;
+    padding: 15px;
+    font-weight: 700;
+    border-bottom: 1px solid #ddd;
+  }
+  .form .el-dialog__body {
+    padding: 20px 60px;
+  }
+  .form .el-dialog__footer {
+    border-top: 1px solid #ddd;
+  }
+  .form .dialog-footer {
+    padding-right: 70px;
+    padding-top: 10px;
+  }
+</style>

src/views/deviceAdmin/deviceAdmin.vue

@@ -6,7 +6,7 @@
       <div class="box">
         <div class="box_item" v-for="item in boxList" :key="item.id">
           <p>{{item.name}}</p>
-          <p>{{item.value}}</p>
+          <p class="number">{{item.value}}</p>
         </div>
       </div>
       <!-- 查询条件 -->
@@ -589,6 +589,10 @@ export default {
   line-height: 39px;
   margin: 0;
 }
+.number {
+  font-size: 24px;
+  font-weight: 600;
+}
 
 /** 选择条件 */
 .conditions {

src/views/deviceAdmin/houseManage.vue

@@ -0,0 +1,320 @@
+<template>
+  <div>
+    <div class="header_title">栋舍管理</div>
+    <div class="house-manage">
+      <!-- 查询条件 -->
+      <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="stage" style="width: 310px">
+            <el-select v-model="searchForm.stage" style="width: 178px;">
+              <el-option
+                v-for="item in stageList"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value">
+              </el-option>
+            </el-select>
+          </el-form-item>
+          <el-form-item label="栋舍：" prop="pigpenName" style="width: 310px">
+            <el-input v-model="searchForm.pigpenName"></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="chartDiv">
+        <div class="title">
+          <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="handleAdd(1)">新增栋舍</el-button>
+          <el-button type="primary" plain size="mini" @click="handleAdd(2)">新增单元</el-button>
+        </div>
+        <div class="box_table">
+          <el-table
+            :data="tableData"
+            border
+            stripe
+            v-loading="dataListLoading"
+            style="width: 100%"
+            :header-cell-style="{'text-align':'center', 'background-color': '#F9FAFC', 'padding': '5px 0', 'color': '#666666'}"
+            :cell-style="{'text-align':'center', 'padding': '5px 0', 'cursor': 'pointer'}"
+            height="700"
+            row-key="id"
+            :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
+            <el-table-column
+              prop="pigpenName"
+              label="栋舍名">
+            </el-table-column>
+            <el-table-column
+              prop="creatTime"
+              label="注册时间">
+            </el-table-column>
+            <el-table-column
+              label="阶段">
+              <template slot-scope="scope">
+                <span>{{ stageList[scope.row.stage - 1].label }}</span>
+              </template>
+            </el-table-column>
+            <el-table-column
+              label="操作">
+              <template slot-scope="scope">
+                <el-button type="text" size="small" @click="handleEdit(scope.row)">编辑</el-button>
+                <el-button type="text" size="small" @click="handleDelete(scope.row)">删除</el-button>
+              </template>
+            </el-table-column>
+          </el-table>
+          <table-footer
+            :totals="totalPages"
+            :size="pageSize"
+            @sizeChange="sizeChange"
+            @pageChange="pageChange">
+          </table-footer>
+        </div>
+      </div>
+    </div>
+    <add-or-update-pigpen ref="pigpenEdit" @refreshData="init"></add-or-update-pigpen>
+    <add-or-update-unit ref="unitEdit" @refreshData="init"></add-or-update-unit>
+  </div>
+</template>
+<script>
+import TableFooter from "../../components/TableFooter"
+import addOrUpdatePigpen from './addOrUpdatePigpen.vue'
+import addOrUpdateUnit from './addOrUpdateUnit.vue'
+import {mapState} from 'vuex'
+export default {
+  data() {
+    return {
+      tableData: [],
+      stageList: [ // 阶段
+        {
+          value: 1,
+          label: '配怀'
+        },
+        {
+          value: 2,
+          label: '分娩'
+        },
+        {
+          value: 3,
+          label: '保育'
+        },
+        {
+          value: 4,
+          label: '育成育肥'
+        },
+        {
+          value: 5,
+          label: '空怀'
+        },
+        {
+          value: 6,
+          label: '后备母猪'
+        },
+        {
+          value: 7,
+          label: '公猪'
+        },
+        {
+          value: 8,
+          label: '病死猪场内收集'
+        },
+        {
+          value: 9,
+          label: '病死猪无害化'
+        }
+      ],
+      pigpenList: [ // 猪舍List
+      ],
+      searchForm: {
+        registerTime: '',
+        stage: '',
+        pigpenId: ''
+      },
+      pageSize: 20, // 表格显示条数
+      totalPages: 0, // 共 n 条数据
+      pageIndex: 1, // 表格当前页数
+      dataListLoading: true
+    }
+  },
+  components: {
+    TableFooter,
+    addOrUpdatePigpen,
+    addOrUpdateUnit
+  },
+  computed: {
+    ...mapState(['baseUrl'])
+  },
+  methods: {
+    // 初始化
+    init() {
+      this.$http({
+        url: this.$http.adornUrl(`${this.baseUrl}/manager/basepigpen/list`),
+        method: 'get',
+        params: this.$http.adornParams({
+          'page': this.pageIndex,
+          'limit': this.pageSize,
+          'farmCode': '330703010000422'
+        }, false)
+      }).then(({data}) => {
+        if (data.code === 0) {
+          this.tableData = data.page.list
+          this.totalPages = data.page.totalCount
+          this.dataListLoading = false
+        }
+      })
+    },
+    // 显示条数改变
+    sizeChange (val) {
+      this.pageSize = val
+      this.init()
+    },
+    // 页数改变
+    pageChange (val) {
+      this.pageIndex = val
+      this.init()
+    },
+    // 新增
+    handleAdd (type) {
+      if (type === 1) { // 猪舍
+        this.$nextTick(() => {
+          this.$refs.pigpenEdit.init()
+        })
+      } else if (type === 2) { // 单元
+        this.$nextTick(() => {
+          this.$refs.unitEdit.init()
+        })
+      }
+    },
+    // 编辑
+    handleEdit(row) {
+      if (row.type === 1) { // 猪舍
+        this.$nextTick(() => {
+          this.$refs.pigpenEdit.init(row)
+        })
+      } else if (row.type === 2) { // 单元
+        this.$nextTick(() => {
+          this.$refs.unitEdit.init(row)
+        })
+      }
+    },
+    // 删除
+    handleDelete(row) {
+      let ids = [row.id]
+      this.$confirm(`确定删除名称为{${row.pigpenName}}的${row.type === 1? '栋舍': '单元'}？`, '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        this.$http({
+          url: this.$http.adornUrl(`${this.baseUrl}/manager/basepigpen/delete`),
+          method: 'post',
+          data: this.$http.adornData(ids, false)
+        }).then(result => {
+          if (result.data.code === 0) {
+            this.init()
+            this.$message({
+              message: `确定删除名称为{${row.pigpenName}}的${row.type === 1? '栋舍': '单元'}`,
+              type: 'success',
+              duration: 1000
+            })
+          } else {
+            this.$confirm(result.data.msg, '删除失败', {
+              confirmButtonText: '确定',
+              cancelButtonText: '取消',
+              type: 'warning'
+            })
+          }
+        })
+      })
+    }
+  },
+  mounted() {
+    this.init()
+  },
+}
+</script>
+<style scoped>
+/* 标题 */
+.header_title {
+  height: 40px;
+  background-color: #F7F7F7;
+  border: 1px solid #ddd;
+  line-height: 40px;
+  color: #6FA8C8;
+  margin-bottom: 10px;
+  padding-left: 20px;
+  position: fixed;
+  width: 1660px;
+  z-index: 1000;
+}
+
+.button-margin {
+  margin: 0 5px 0 20px;
+}
+
+/* 标题固定后对下面影响的消除 */
+.house-manage {
+  padding-top: 40px;
+}
+
+/** 选择条件 */
+.conditions {
+  /* width: 100%; */
+  background-color: #fff;
+  margin: 30px 0;
+  border: 1px solid #ddd;
+  padding: 20px;
+  padding-bottom: 10px;
+}
+
+/* 图表结构的大局 */
+.chartDiv {
+  /* margin: 10px; */
+  margin-top: 20px;
+  margin-left: 0;
+  border: 1px solid #ddd;
+  background-color: #fff;
+}
+
+.title {
+  background-color: rgba(243, 243, 243, 1);
+  height: 50px;
+  line-height: 50px;
+  padding-left: 50px;
+  font-size: 14px;
+  border-bottom: 1px solid #ddd;
+}
+
+.form_item {
+  width: 100%;
+  height: 60px;
+  background-color: #fff;
+  border-top: 1px solid #ddd;
+  border-bottom: 1px solid #ddd;
+  box-sizing: border-box;
+  padding: 15px;
+  margin-top: 15px;
+}
+.box_table {
+  width: 100%;
+  box-sizing: border-box;
+  margin-top: 15px;
+  padding-right: 10px;
+  position: relative;
+  /*padding: 10px;*/
+}
+</style>