111

src/store/index.js

@@ -22,7 +22,7 @@ export default new Vuex.Store({
     mode: true,
     // 按钮权限
     buttons: [],
-    ip: 'http://120.27.234.126:8010',
+    ip: 'http://192.168.1.165:8010',
     // 所选择的farmId
     farmId: '',
     farmList: [],

src/utils/apis/device-admin/deviceAdmin.js

@@ -0,0 +1,8 @@
+import axios from "../../http";
+export function getDeviceList(data) {
+  return axios({
+    url: 'eartag/collectorRegister/page',
+    method: 'get',
+    params: data
+  })
+}

src/views/basic-data/device-admin/DeviceAdmin.vue

@@ -7,11 +7,204 @@
  * @FilePath: \goldenPig\src\views\basic-data\device-admin\DeviceAdmin.vue
 -->
 <template>
-  <div>
-    设备管理
+  <div class="device">
+    <el-card>
+      <el-form :inline="true" label-width="100px" size="mini" :model="form">
+        <el-form-item label="采集牧场" v-if="userItem.type !== 2">
+          <el-select v-model="form.farm">
+            <el-option
+              v-for="item in farmList"
+              :key="item.id"
+              :value="item.id"
+              :label="item.farmName"
+            ></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="设备编码">
+          <el-input v-model="form.registeCode"></el-input>
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary">搜索</el-button>
+        </el-form-item>
+      </el-form>
+    </el-card>
+    <br>
+    <div>
+      <new-table
+        v-loading="loading"
+        :height="600"
+        :title="devTitle"
+        :listData="list"
+        :tableItems="tableItems">
+        <template #right>
+          <el-button type="primary" size="mini">新增设备</el-button>
+        </template>
+        <template #stage="scope">
+          <span>{{ getStage(scope.row.stage) }}</span>
+        </template>
+        <template #dong="scope">
+          <span>{{ scope.row.penName }}{{ scope.row.unitName }}</span>
+        </template>
+        <template #canStatus="scope">
+          <span v-if="scope.row.canStatus === 0" style="color: #52c41a">正常</span>
+          <span v-else style="color: red">异常</span>
+        </template>
+        <template #handler="scope">
+          <el-button type="text" @click="edit(scope.row)">编辑</el-button>
+          <el-divider direction="vertical"></el-divider>
+          <el-button type="text" style="color: red">删除</el-button>
+        </template>
+      </new-table>
+      <table-footer
+        :totals="total"
+        :size="pageSize"
+        @sizeChange="sizeChange"
+        @pageChange="pageChange"
+      ></table-footer>
+    </div>
   </div>
 </template>
 <script>
-export default {};
+import { mapState, mapActions } from "vuex";
+import { getDeviceList } from "@/utils/apis/device-admin/deviceAdmin";
+import NewTable from "@/components/newTable/NewTable";
+import TableFooter from "@/components/TableFooter";
+
+export default {
+  name: 'DeviceAdmin',
+  components: {
+    NewTable,
+    TableFooter
+  },
+  computed: {
+    ...mapState(["stageList", "farmList"]),
+  },
+  data() {
+    return {
+      form: {
+        farm: '',
+        registeCode: '',
+      },
+      devTitle: '设备列表',
+      pageNum: 1,
+      pageSize: 20,
+      total: 0,
+      loading: true,
+      list: [],
+      tableItems: [
+        {
+          prop: "id",
+          label: "注册id",
+          minWidth: "50",
+          slotName: "id",
+        },
+        {
+          prop: "registerTime",
+          label: "注册时间",
+          minWidth: "100",
+          slotName: "registerTime",
+        },
+        {
+          prop: "registeCode",
+          label: "设备编码",
+          minWidth: "100",
+          slotName: "registeCode",
+        },
+        {
+          prop: "farmName",
+          label: "牧场名",
+          minWidth: "100",
+          slotName: "farmName",
+        },
+        {
+          prop: "farmCode",
+          label: "牧场编码",
+          minWidth: "100",
+          slotName: "farmCode",
+        },
+        {
+          label: "牧场编码",
+          minWidth: "50",
+          slotName: "stage",
+        },
+        {
+          label: "栋舍",
+          minWidth: "100",
+          slotName: "dong",
+        },
+        {
+          prop: 'lastTime',
+          label: "最后上传时间",
+          minWidth: "100",
+          slotName: "lastTime",
+        },
+        {
+          label: "设备状态",
+          minWidth: "50",
+          slotName: "canStatus",
+        },
+        {
+          label: "操作",
+          minWidth: "50",
+          slotName: "handler",
+        }
+      ]
+    }
+  },
+  methods: {
+    ...mapActions(["GetFarm"]),
+    // 修改size
+    sizeChange(val) {
+      this.size = val;
+      this.init();
+    },
+    // 修改页数
+    pageChange(val) {
+      this.pageSize = val;
+      this.init();
+    },
+    init() {
+      let params = {
+        farmId: this.form.farm,
+        pageNo: this.pageNum,
+        pageSize: this.pageSize
+      }
+      if(this.form.registeCode !== '') {
+        params.registeCode = this.form.registeCode
+      }
+      getDeviceList(params).then(res => {
+        this.loading = false
+        console.log(res)
+        if(res.code === 10000) {
+          this.list = res.data.records;
+          this.total = res.data.total;
+        }
+      })
+    },
+    getStage(id) {
+      let data = this.stageList.find((item) => {
+        return item.value == id;
+      });
+      return data.label;
+    },
+    edit() {}
+  },
+  created() {
+    this.userItem = JSON.parse(localStorage.getItem("gold_UserItem"));
+    this.GetFarm()
+  },
+  mounted() {
+    this.form.farm = this.farmList[0].id;
+    this.init();
+  },
+};
 </script>
-<style scoped></style>
+<style scoped>
+  .device{
+    box-sizing: border-box;
+    padding: 20px;
+  }
+  .x-from {
+    box-sizing: border-box;
+  }
+</style>