临时提交

2024-07-29 17:44:34 +08:00
parent e285257f24
commit 112cb2dfd8
9 changed files with 197 additions and 20 deletions
--- a/web_src/src/components/dialog/GbDeviceSelect.vue
+++ b/web_src/src/components/dialog/GbDeviceSelect.vue
@@ -0,0 +1,138 @@
+<template>
+  <div id="addUser" v-loading="getDeviceListLoading">
+    <el-dialog
+      title="选择设备"
+      width="40%"
+      top="2rem"
+      :close-on-click-modal="false"
+      :visible.sync="showDialog"
+      :destroy-on-close="true"
+      @close="close()"
+    >
+      <div class="page-header">
+        <div class="page-header-btn">
+          搜索:
+          <el-input @input="getDeviceList" style="margin-right: 1rem; width: auto;" size="mini" placeholder="关键字"
+                    prefix-icon="el-icon-search" v-model="searchSrt" clearable></el-input>
+          在线状态:
+          <el-select size="mini" style="width: 8rem; margin-right: 1rem;" @change="getDeviceList" v-model="online" placeholder="请选择"
+                     default-first-option>
+            <el-option label="全部" value=""></el-option>
+            <el-option label="在线" value="true"></el-option>
+            <el-option label="离线" value="false"></el-option>
+          </el-select>
+          <el-button icon="el-icon-refresh-right" circle size="mini" :loading="getDeviceListLoading"
+                     @click="getDeviceList()"></el-button>
+        </div>
+      </div>
+      <!--设备列表-->
+      <el-table :data="deviceList" style="width: 100%;font-size: 12px;" :height="winHeight" header-row-class-name="table-header" @selection-change="handleSelectionChange">
+        <el-table-column type="selection" width="55" >
+        </el-table-column>
+        <el-table-column prop="name" label="名称" min-width="160">
+        </el-table-column>
+        <el-table-column prop="deviceId" label="设备编号" min-width="200" >
+        </el-table-column>
+        <el-table-column prop="manufacturer" label="厂家" min-width="120" >
+        </el-table-column>
+        <el-table-column label="状态" min-width="120">
+          <template slot-scope="scope">
+            <div slot="reference" class="name-wrapper">
+              <el-tag size="medium" v-if="scope.row.onLine">在线</el-tag>
+              <el-tag size="medium" type="info" v-if="!scope.row.onLine">离线</el-tag>
+            </div>
+          </template>
+        </el-table-column>
+      </el-table>
+      <el-pagination
+        style="float: right"
+        @size-change="handleSizeChange"
+        @current-change="currentChange"
+        :current-page="currentPage"
+        :page-size="count"
+        :page-sizes="[15, 25, 35, 50, 200, 1000, 50000]"
+        layout="total, sizes, prev, pager, next"
+        :total="total">
+      </el-pagination>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+
+export default {
+  name: "gbDeviceSelect",
+  props: {},
+  computed: {},
+  data() {
+    return {
+      showDialog: false,
+      deviceList: [], //设备列表
+      currentDevice: {}, //当前操作设备对象
+      searchSrt: "",
+      online: null,
+      videoComponentList: [],
+      updateLooper: 0, //数据刷新轮训标志
+      currentDeviceChannelsLenth: 0,
+      winHeight: window.innerHeight - 200,
+      currentPage: 1,
+      count: 15,
+      total: 0,
+      getDeviceListLoading: false,
+      multipleSelection: [],
+    };
+  },
+  mounted() {
+    this.initData();
+  },
+  methods: {
+    initData: function () {
+      this.getDeviceList();
+    },
+    currentChange: function (val) {
+      this.currentPage = val;
+      this.getDeviceList();
+    },
+    handleSizeChange: function (val) {
+      this.count = val;
+      this.getDeviceList();
+    },
+    handleSelectionChange: function (val){
+      this.multipleSelection = val;
+    },
+    getDeviceList: function () {
+      this.getDeviceListLoading = true;
+      this.$axios({
+        method: 'get',
+        url: `/api/device/query/devices`,
+        params: {
+          page: this.currentPage,
+          count: this.count,
+          query: this.searchSrt,
+          status: this.online,
+        }
+      }).then( (res)=> {
+        if (res.data.code === 0) {
+          this.total = res.data.data.total;
+          this.deviceList = res.data.data.list;
+        }
+        this.getDeviceListLoading = false;
+      }).catch( (error)=> {
+        console.error(error);
+        this.getDeviceListLoading = false;
+      });
+    },
+    openDialog: function (callback) {
+      this.listChangeCallback = callback;
+      this.showDialog = true;
+    },
+    onSubmit: function () {
+
+    },
+    close: function () {
+      this.showDialog = false;
+    },
+
+  }
+};
+</script>