spring
2025-02-17 5d61e3ea816a74f4491276e2d73cca2e42af3b10
src/components/do/a6-device/device-overview.vue
@@ -49,7 +49,7 @@
  width: 380px;
  height: 165px;
  border-radius: 8px 8px 8px 8px;
  border: 1px solid #EEEEEE;
  border: 1px solid #eeeeee;
  margin: 0 !important;
  display: flex;
  align-items: center;
@@ -76,7 +76,7 @@
.text-truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap
  white-space: nowrap;
}
.circles {
@@ -128,15 +128,15 @@
}
.success .circle {
  background: #34BD66;
  background: #34bd66;
}
.danger .circle {
  background: #FF3838;
  background: #ff3838;
}
.warning .circle {
  background: #FBB247;
  background: #fbb247;
}
.info .circle {
  background: #909399;
@@ -148,20 +148,45 @@
    <div>
      <el-form :model="entity" inline label-position="right" label-width="80px">
        <el-form-item label="状态:">
          <el-select v-model="entity.deviceStatus" placeholder="全部" size="small" clearable>
            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
          <el-select
            v-model="entity.deviceStatus"
            placeholder="全部"
            size="small"
            clearable
          >
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="设备名称:">
          <el-input size="small" placeholder="请输入" clearable v-model="entity.deviceName"></el-input>
          <el-input
            size="small"
            placeholder="请输入"
            clearable
            v-model="entity.deviceName"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button size="small" @click="refresh()">重 置</el-button>
        </el-form-item>
        <el-form-item>
          <el-button size="small" type="primary"
          @click="currentPage = 1, keyMap = {}, list = [], finishLoding = false, refreshTable()">查 询</el-button>
          <el-button
            size="small"
            type="primary"
            @click="
              (currentPage = 1),
                (keyMap = {}),
                (list = []),
                (finishLoding = false),
                refreshTable()
            "
            >查 询</el-button
          >
        </el-form-item>
      </el-form>
      <!-- <div class="search_thing">
@@ -179,43 +204,61 @@
            </div>
      </div> -->
      <!-- <div class="search_thing" style="padding-left: 30px;">
      </div> -->
    </div>
    <div class="table" v-loading="loading">
      <scroll-pagination @load="refreshTable()" :finishLoding="finishLoding" :list="list"
        v-if="list.length > 0 || loading">
      <scroll-pagination
        @load="refreshTable()"
        :finishLoding="finishLoding"
        :list="list"
        v-if="list.length > 0 || loading"
      >
        <ul class="card">
          <li v-for="(m, i) in list" :key="i">
            <el-image class="img" :src="javaApi + '/img/' + m.imageUpload">
              <div slot="error" class="image-error" style="width: 112px;
              <div
                slot="error"
                class="image-error"
                style="width: 112px;
            height: 112px;
            border-radius: 16px;
            display: flex;
            align-items: center;
            justify-content: center;
            border: 1px solid #EEEEEE;">
                <i class="el-icon-picture-outline" style="font-size:30px;color:#666666;"></i>
            border: 1px solid #EEEEEE;"
              >
                <i
                  class="el-icon-picture-outline"
                  style="font-size:30px;color:#666666;"
                ></i>
              </div>
            </el-image>
            <div class="list-left">
              <div class="list-left-info">
                <span class="label">设备名称:</span>
                <span style="color:#3A7BFA;
                <span
                  style="color:#3A7BFA;
              font-size: 16px;
              display: inline-block;
              width: 129px;
              word-break: break-all;" class="text-truncate" :title="m.deviceName">{{ m.deviceName ? m.deviceName : '无' }}</span>
              word-break: break-all;"
                  class="text-truncate"
                  :title="m.deviceName"
                  >{{ m.deviceName ? m.deviceName : "无" }}</span
                >
              </div>
              <div class="list-left-info">
                <span class="label">规格型号:</span>
                <span style="color:#333333;font-size: 16px;">{{ m.specificationModel ? m.specificationModel : '无'
                  }}</span>
                <span style="color:#333333;font-size: 16px;">{{
                  m.specificationModel ? m.specificationModel : "无"
                }}</span>
              </div>
              <div class="list-left-info">
                <span class="label">状态:</span>
                <el-tag :type="m.type" v-if="m.deviceStatusName">{{ m.deviceStatusName }}</el-tag>
                <el-tag :type="m.type" v-if="m.deviceStatusName">{{
                  m.deviceStatusName
                }}</el-tag>
                <span v-else style="color:#333333;font-size: 16px;">无</span>
              </div>
            </div>
@@ -228,7 +271,10 @@
          </li>
        </ul>
      </scroll-pagination>
      <div v-if="list.length < 1 && !loading" style="color:#909399;font-size:14px;text-align: center;margin-top:200px">
      <div
        v-if="list.length < 1 && !loading"
        style="color:#909399;font-size:14px;text-align: center;margin-top:200px"
      >
        暂无数据
      </div>
    </div>
@@ -236,7 +282,7 @@
</template>
<script>
import ScrollPagination from '../../tool/scroll-paging.vue'
import ScrollPagination from "../../tool/scroll-paging.vue";
export default {
  props: {
    clickNodeVal: {
@@ -260,90 +306,98 @@
      list: [],
      currentPage: 1, // 当前页
      pageSize: 16, // 一页16条
      total: '',
      total: "",
      loading: true, // 组件loading的展示,默认为true
      finishLoding: false, // 加载完成,显示已经没有更多了
      keyMap: {},
      laboratoryNameIsNull: false,
    }
      laboratoryNameIsNull: false
    };
  },
  created() {
    this.selectEnumByCategory()
    this.selectEnumByCategory();
    this.keyMap = {};
    this.currentPage = 1;
    this.list = [];
    this.clickSidebar(this.clickNodeVal)
    this.clickSidebar(this.clickNodeVal);
  },
  methods: {
    refreshTable() {
      const key = `_${this.currentPage}`
      const value = this.keyMap[key]
      const key = `_${this.currentPage}`;
      const value = this.keyMap[key];
      // 如果value存在,表示缓存有值,那么阻止请求
      if (value) {
        return
        return;
      }
      // value不存在,表示第一次请求,设置占位
      this.keyMap[key] = 'temp'
      this.keyMap[key] = "temp";
      if (this.currentPage == 1) {
        this.loading = true
        this.loading = true;
      }
      if(this.list.length==0){
          this.finishLoding = false;
        }
      this.$axios.post(this.$api.deviceScope.selectDeviceParameter + "?laboratoryNameIsNull=" + this.laboratoryNameIsNull, {
        page: {
          current: this.currentPage,
          size: this.pageSize
        },
        entity: this.entity
      }, {
        headers: {
          'Content-Type': 'application/json'
        }
      }).then(res => {
        if (res.code == 200) {
          this.total = res.data.body.total
          let list = res.data.body.records.map(m => {
            switch (m.deviceStatus) {
              case 0:
                // 正常
                m.type = 'success'
                break;
              case 1:
                // 维修
                m.type = 'warning'
                break;
              case 2:
                // 停用
                m.type = 'danger'
                break;
              case 3:
                // 报废
                m.type = 'info'
                break;
      if (this.list.length == 0) {
        this.finishLoding = false;
      }
      this.$axios
        .post(
          this.$api.deviceScope.selectDeviceParameter +
            "?laboratoryNameIsNull=" +
            this.laboratoryNameIsNull,
          {
            page: {
              current: this.currentPage,
              size: this.pageSize
            },
            entity: this.entity
          },
          {
            headers: {
              "Content-Type": "application/json"
            }
            this.options.forEach(j => {
              if (m.deviceStatus == j.value) {
                m.deviceStatusName = j.label
              }
            })
            return m;
          })
          if (list.length == 0) {
            this.finishLoding = true;
          } else {
            if (list.length < this.pageSize) {
              this.finishLoding = true;
            }
            this.list = this.list.concat(list)
            if (this.total == this.list.length) {
              this.finishLoding = true;
            }
            this.currentPage++;
          }
        }
        this.loading = false
      })
        )
        .then(res => {
          if (res.code == 200) {
            this.total = res.data.body.total;
            let list = res.data.body.records.map(m => {
              switch (m.deviceStatus) {
                case 0:
                  // 正常
                  m.type = "success";
                  break;
                case 1:
                  // 维修
                  m.type = "warning";
                  break;
                case 2:
                  // 停用
                  m.type = "danger";
                  break;
                case 3:
                  // 报废
                  m.type = "info";
                  break;
              }
              this.options.forEach(j => {
                if (m.deviceStatus == j.value) {
                  m.deviceStatusName = j.label;
                }
              });
              return m;
            });
            if (list.length == 0) {
              this.finishLoding = true;
            } else {
              if (list.length < this.pageSize) {
                this.finishLoding = true;
              }
              this.list = this.list.concat(list);
              if (this.total == this.list.length) {
                this.finishLoding = true;
              }
              this.currentPage++;
            }
          }
          this.loading = false;
        });
    },
    refresh() {
      this.keyMap = {};
@@ -355,44 +409,46 @@
        deviceName: null,
        orderBy: { field: "id", order: "asc" }
      };
      this.refreshTable()
      this.refreshTable();
    },
    // 获取字典
    selectEnumByCategory() {
      this.$axios.post(this.$api.enums.selectEnumByCategory, {
        category: "设备状态"
      }).then(res => {
        this.options = res.data
      })
      this.$axios
        .post(this.$api.enums.selectEnumByCategory, {
          category: "设备状态"
        })
        .then(res => {
          this.options = res.data;
        });
    },
    // 点击侧边栏刷新
    clickSidebar(clickNodeVal) {
      this.laboratoryNameIsNull = false
      this.laboratoryNameIsNull = false;
      // 是否存在value,存在value代表为三级
      if (!clickNodeVal.value) {
        this.finishLoding = false;
        this.keyMap = {};
        this.currentPage = 1;
        this.list = [];
        this.entity.laboratoryName = null
        this.entity.storagePoint = null
        this.entity.laboratoryName = null;
        this.entity.storagePoint = null;
        // 等于1代表为树的一级,label为部门
        if (clickNodeVal.label == '其他') {
          this.laboratoryNameIsNull = true
        if (clickNodeVal.label == "其他") {
          this.laboratoryNameIsNull = true;
          this.refreshTable();
          return
          return;
        }
        if (clickNodeVal.level == 1) {
          this.entity.laboratoryName = clickNodeVal.label
          this.entity.laboratoryName = clickNodeVal.label;
          // 等于二级。label为存储地点
        } else if (clickNodeVal.level == 2) {
          // 其他表示没有配置实验室,只配置了地点
          if (clickNodeVal.parent.label == '其他') {
            this.laboratoryNameIsNull = true
          if (clickNodeVal.parent.label == "其他") {
            this.laboratoryNameIsNull = true;
          } else {
            this.entity.laboratoryName = clickNodeVal.parent.label
            this.entity.laboratoryName = clickNodeVal.parent.label;
          }
          this.entity.storagePoint = clickNodeVal.label
          this.entity.storagePoint = clickNodeVal.label;
        }
        this.refreshTable();
      }
@@ -401,8 +457,8 @@
  watch: {
    // 监听点击el-tree的数据,进行数据刷新
    clickNodeVal(newVal) {
      this.clickSidebar(newVal)
      this.clickSidebar(newVal);
    }
  }
}
};
</script>