隐藏首次时间

ZZJ

2022-07-15 5226a8a3642a17084c8263109395adaaf1d2664f

 src/views/equipmentManagement/equipmentList/components/FormList.vue

@@ -44,7 +44,7 @@
      <div class="button add" @click="isShowAdd = true">
        <span>+</span>添加设备
      </div>
      <div class="button export">
      <div class="button export" @click="exportFile">
        <span class="iconfont">&#xe614;</span>导出
      </div>
    </div>
@@ -59,7 +59,7 @@
        :default-sort="{ prop: 'createTime', order: 'descending' }"
        :stripe="true"
      >
        <el-table-column label="序号" width="48" class-name="index">
        <el-table-column label="序号" width="80" class-name="index">
          <template slot-scope="scope">{{
            scope.$index + 1 + (page - 1) * size
          }}</template>
@@ -67,7 +67,7 @@
        <el-table-column
          prop="devId"
          label="设备ID"
          min-width="180"
          min-width="140"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
@@ -90,7 +90,7 @@
            <div v-else>--</div>
          </template>
        </el-table-column>
        <el-table-column label="首次使用时间" min-width="159">
        <!-- <el-table-column label="首次使用时间" min-width="159">
          <template slot-scope="scope">
            <div v-if="scope.row.firstUseTime.length > 1">
              <div>{{ scope.row.firstUseTime[0] }}</div>
@@ -98,10 +98,10 @@
            </div>
            <div v-else>--</div>
          </template>
        </el-table-column>
        </el-table-column> -->

        <el-table-column label="所属集群" show-overflow-tooltip min-width="154">
          <template> -- </template>
          <template slot-scope="scope"> {{ scope.row.clusterName }} </template>
        </el-table-column>

        <el-table-column label="状态" min-width="70">
@@ -114,28 +114,54 @@
        <el-table-column label="操作" min-width="180">
          <template slot-scope="scope">
            <!-- 加入 -->
            <span class="iconfont option" @click="joinCluster(scope.row)"
              >&#xe640;</span
            <el-tooltip
              content="加入集群"
              placement="top"
              v-if="!scope.row.clusterId"
            >
              <span
                class="iconfont option"
                @click="joinCluster(scope.row)"
                :class="{ disable: scope.row.isOnline != 1 }"
                >&#xe640;</span
              >
            </el-tooltip>
            <!-- 退出 -->
            <span
              class="iconfont option"
              @click="quitCluster(scope.row)"
              v-if="false"
              >&#xe63c;</span
            >
            <el-tooltip content="退出集群" placement="top" v-else>
              <span
                class="iconfont option"
                @click="quitCluster(scope.row)"
                :class="{ disable: scope.row.isOnline != 1 }"
                >&#xe63c;</span
              >
            </el-tooltip>
            <!-- 算法详情 -->
            <span class="iconfont option" @click="algorithmDetail(scope.row)"
              >&#xe621;</span
            >
            <el-tooltip content="应用详情" placement="top">
              <span
                class="iconfont option"
                :class="{ disable: scope.row.isOnline != 1 }"
                @click="algorithmDetail(scope.row)"
                >&#xe621;</span
              >
            </el-tooltip>
            <!-- 设备详情 -->
            <span class="iconfont option" @click="checkDetail(scope.row)"
              >&#xe619;</span
            >
            <el-tooltip content="设备详情" placement="top">
              <span
                class="iconfont option"
                :class="{ disable: scope.row.isOnline != 1 }"
                @click="checkDetail(scope.row)"
                >&#xe619;</span
              >
            </el-tooltip>
            <!-- 解绑 -->
            <span class="iconfont option" @click="Untying(scope.row)"
              >&#xe617;</span
            >
            <el-tooltip content="解除绑定" placement="top">
              <span
                class="iconfont option"
                @click="Untying(scope.row)"
                :class="{ disable: scope.row.isOnline != 1 }"
                >&#xe617;</span
              >
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>
@@ -181,11 +207,18 @@
</template>

<script>
import { findDevList } from "@/api/device";
import {
  findDevList,
  findClustersBySearch,
  exportDevListExcel,
} from "@/api/device";
import AddBox from "@/views/equipmentManagement/equipmentList/components/AddBox";
import UnbindBox from "@/views/equipmentManagement/equipmentDetail/components/UnbindBox";
import QuitClusterBox from "@/views/equipmentManagement/equipmentList/components/QuitClusterBox";
import JoinClusterBox from "@/views/equipmentManagement/equipmentList/components/JoinClusterBox";

import bus from "@/plugin/bus";

export default {
  components: {
    AddBox,
@@ -193,12 +226,12 @@
    QuitClusterBox,
    JoinClusterBox,
  },
  created() {
    this.getCluster();
  },
  data() {
    return {
      searchTime: [
        this.$moment().format("YYYY-MM-DD 00:00:00"),
        this.$moment().format("YYYY-MM-DD HH:mm:ss"),
      ], //搜索时间
      searchTime: [], //搜索时间
      page: 1,
      size: 10, //分页相关
      inputText: "", //输入框内容
@@ -207,16 +240,7 @@
      isShowAdd: false, //是否展示新增弹窗
      isShowUnbind: false, //是否展示解绑弹窗
      unbindId: "",
      clusterArr: [
        {
          value: 0,
          label: "集群1",
        },
        {
          value: 1,
          label: "集群2",
        },
      ], //所属集群下拉框
      clusterArr: [], //所属集群下拉框
      cluster: null, //选中的集群类型
      showQuit: false, //展示退出集群的弹窗
      showJoin: false, //展示加入集群的弹窗
@@ -224,45 +248,77 @@
    };
  },
  methods: {
    async getCluster() {
      const res = await findClustersBySearch({
        InputText: "",
        Page: 1,
        Size: 10000,
        userId: JSON.parse(sessionStorage.getItem("userInfo")).id,
      });
      if (res && res.success) {
        res.data.list.forEach((item) => {
          this.clusterArr.push({
            label: item.clusterName,
            value: item.clusterId,
          });
        });
      }
    },

    // 跳到设备详情
    checkDetail(row) {
      if (row.isOnline != 1) {
        return;
      }
      this.$router.push({
        path: "/equipmentDetail",
        query: {
          id: row.devId,
          ip: row.devIp,
          port: row.serverPort,
          ndid: row.id,
        },
      });
    },

    // 跳到算法详情
    algorithmDetail(row) {
      if (row.isOnline != 1) {
        return;
      }
      this.$router.push({
        path: "/algorithmDetail",
        query: {
          id: row.devId,
          ip: row.devIp,
          port: row.serverPort,
        },
      });
    },

    // 查询列表
    searchingBtn() {
      let param = {
        page: this.page,
        size: this.size,
        // startTime: this.searchTime[0],
        // endTime: this.searchTime[1],
        inputText: this.inputText,
      };
      let param = {};

      if (!this.searchTime) {
        param = {
          page: this.page,
          size: this.size,
          startTime: "",
          endTime: "",
          clusterId: this.cluster,
          inputText: this.inputText,
        };
      } else {
        param = {
          page: this.page,
          size: this.size,
          startTime: this.searchTime[0],
          endTime: this.searchTime[1],
          clusterId: this.cluster,
          inputText: this.inputText,
        };
      }

      findDevList(param)
        .then((res) => {
          this.dataList = res.data.list;
          //时间分行显示

          this.dataList.forEach((item) => {
            item.installTime = item.installTime.split(" ");
            item.firstUseTime = item.firstUseTime.split(" ");
@@ -271,6 +327,8 @@
          if (res.data.total <= this.size) {
            this.page = 1;
          }

          bus.$emit("refleshNode", this.dataList);
        })
        .catch((err) => {
          console.log(err);
@@ -290,40 +348,11 @@

    //解绑按钮
    Untying(row) {
      console.log(row);
      this.unbindId = row.id;
      if (row.isOnline != 1) {
        return;
      }
      this.unbindId = row.devId;
      this.isShowUnbind = true;
      /*  this.$confirm(
        "解绑后该设备将从设备列表中移除，是否确认操作?",
        "解绑提示",
        {
          type: "warning",
          center: true,
        }
      )
        .then(() => {
          unbind({ ids: [row.id] })
            .then(() => {
              this.$notify({
                type: "success",
                message: "解绑成功",
                duration: 2500,
                offset: 57,
              });
              this.searchingBtn();
            })
            .catch(() => {
              this.$notify({
                type: "error",
                message: "解绑失败，请联系客服",
                duration: 2500,
                offset: 57,
              });
            });
        })
        .catch((e) => {
          console.log(e);
        }); */
    },

    //获得默认时间
@@ -347,6 +376,7 @@
    //关闭新增弹窗
    closeAddBox() {
      this.isShowAdd = false;
      this.searchingBtn();
    },
    // 关闭解绑弹窗
    closeUnbindBox() {
@@ -362,23 +392,77 @@
    clearSearch() {
      this.searchTime = this.getDateInit();
      this.inputText = "";
      this.cluster = "";
      this.searchingBtn();
    },

    //退出集群
    quitCluster(equipment) {
      if (equipment.isOnline != 1) {
        return;
      }
      this.activeEquipment = equipment;
      this.showQuit = true;
    },

    //加入集群
    joinCluster(equipment) {
      if (equipment.isOnline != 1) {
        return;
      }
      this.activeEquipment = equipment;
      this.showJoin = true;
    },

    //导出列表文件
    async exportFile() {
      let param = {};

      if (!this.searchTime) {
        param = {
          page: this.page,
          size: this.size,
          startTime: "",
          endTime: "",
          clusterId: this.cluster,
          inputText: this.inputText,
        };
      } else {
        param = {
          page: this.page,
          size: this.size,
          startTime: this.searchTime[0],
          endTime: this.searchTime[1],
          clusterId: this.cluster,
          inputText: this.inputText,
        };
      }
      const result = await exportDevListExcel(param);

      var blob = new Blob([result.body.data], {
          type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8",
        }),
        Temp = document.createElement("a");

      Temp.href = window.URL.createObjectURL(blob);

      console.log(result);
      console.log(result.fileName);

      Temp.download = window.decodeURI(result.fileName);

      Temp.setAttribute("download", result.fileName);

      document.body.appendChild(Temp);

      Temp.click();

      document.body.removeChild(Temp);

      window.URL.revokeObjectURL(Temp);
    },
  },
  mounted() {
    this.searchTime = this.getDateInit();
    this.searchingBtn();
  },
};
@@ -392,6 +476,7 @@
    padding: 60px 0 30px 0;
    font-size: 14px;
    border-bottom: 1px solid #e9ebee;
    background-color: #fff;

    .left,
    .right,
@@ -400,6 +485,26 @@
    .cluster {
      display: flex;
      align-items: center;
    }

    .cluster {
      .el-select {
        width: 190px;
        height: 40px;
        line-height: 40px;

        ::v-deep input {
          height: 40px;
        }

        .el-icon-arrow-up {
          line-height: 40px;
        }

        ::v-deep .el-icon-arrow-up {
          height: 40px;
        }
      }
    }

    .id .el-input ::v-deep {
@@ -425,7 +530,7 @@
    }

    .el-input ::v-deep {
      width: 280px;
      width: 270px;
      height: 40px;
      margin-left: 10px;
      margin-right: 20px;
@@ -443,7 +548,7 @@
    }

    .el-date-editor {
      width: 318px;
      width: 340px;
      height: 40px;
      margin-left: 10px;
      margin-right: 20px;
@@ -459,7 +564,7 @@
    }

    .searchBtn {
      width: 120px;
      width: 110px;
      height: 40px;
      line-height: 40px;
      text-align: center;
@@ -469,7 +574,7 @@
    }

    .resetBtn {
      width: 120px;
      width: 110px;
      height: 40px;
      line-height: 40px;
      text-align: center;
@@ -562,12 +667,17 @@
      font-size: 24px;
      color: rgb(0, 101, 255);
      cursor: pointer;

      &.disable {
        color: #666;
        cursor: default;
      }
    }
  }

  .el-pagination ::v-deep {
    margin-top: 30px;
    text-align: center;
    text-align: right;
    height: 24px;
    .el-pagination__sizes {
      margin-right: 0;
@@ -601,6 +711,16 @@
        border-color: #0065ff;
      }
    }

    .el-pagination__jump {
      margin-left: 12px;
      .el-pagination__editor {
        width: 37px;
        input {
          width: 32px;
        }
      }
    }
  }
}
</style>