摄像机管理

ZZJ

2022-04-12 994e5e08cba4e6b9ce321b7cf5cb1ec8d19dfa22

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

@@ -1,6 +1,6 @@
<template>
  <div class="addBox">
    <div class="title">加入集群</div>
    <div class="title">添加设备</div>

    <div class="close iconfont" @click="close()">&#xe60f;</div>

@@ -9,8 +9,8 @@
        v-model="searchContent"
        placeholder="请输入集群IP/集群名称/设备IP/设备名称"
      ></el-input>
      <div class="button" @click="listType = 'cluster'">搜索集群</div>
      <div class="button" @click="listType = 'equipment'">搜索设备</div>
      <div class="button" @click="searchCluster">搜索集群</div>
      <div class="button" @click="searchDevice">搜索设备</div>
    </div>

    <div class="clusterList">
@@ -28,21 +28,28 @@
          <div class="row" v-for="(item, index) in clusterList" :key="index">
            <div class="content">
              <div class="rowItem index">{{ index + 1 }}</div>
              <div class="rowItem name">{{ item.name }}</div>
              <div class="rowItem ip">{{ item.ip }}</div>
              <div class="rowItem name">{{ item.clusterName }}</div>
              <div class="rowItem ip">{{ item.virtualIp }}</div>
              <div class="rowItem status">
                <div v-if="item.status == 1" class="status green">已添加</div>
                <div v-if="!item.canAdd" class="status green">已添加</div>
                <div v-else class="status">未添加</div>
              </div>
              <div class="rowItem options">
                <!-- 添加 -->
                <span class="iconfont option" @click="showPasswordBox = true"
                  >&#xe63f;</span
                >
                <!-- 集群详情  -->
                <span class="iconfont option" @click="showChildrenLIst(index)"
                  >&#xe63e;</span
                >
                <span v-if="!item.canAdd">-</span>
                <template v-else>
                  <span
                    class="iconfont option"
                    @click="showBox('cluster', item.clusterId)"
                    >&#xe63f;</span
                  >
                  <!-- 集群详情  -->
                  <span
                    class="iconfont option"
                    @click="showChildrenLIst(index, item.clusterId)"
                    >&#xe63e;</span
                  >
                </template>
              </div>
            </div>

@@ -63,19 +70,19 @@
                >
                </el-table-column>
                <el-table-column
                  prop="id"
                  prop="dev_id"
                  label="设备ID"
                  width="146"
                ></el-table-column>

                <el-table-column
                  prop="ip"
                  prop="dev_ip"
                  label="设备IP"
                  width="146"
                ></el-table-column>

                <el-table-column
                  prop="name"
                  prop="dev_name"
                  label="设备名称"
                  width="240"
                ></el-table-column>
@@ -101,21 +108,29 @@
          class-name="index"
        >
        </el-table-column>
        <el-table-column prop="id" label="设备ID" width="107"></el-table-column>
        <el-table-column
          prop="name"
          prop="devId"
          label="设备ID"
          width="107"
        ></el-table-column>
        <el-table-column
          prop="devName"
          label="设备名称"
          width="107"
        ></el-table-column>
        <el-table-column prop="ip" label="设备IP" width="107"></el-table-column>
        <el-table-column
          prop="cluster"
          prop="devIp"
          label="设备IP"
          width="107"
        ></el-table-column>
        <el-table-column
          prop="clusterName"
          label="所属集群"
          width="107"
        ></el-table-column>
        <el-table-column label="状态" width="107">
          <template slot-scope="scope">
            <div v-if="scope.row.status == 1" class="status green">已添加</div>
            <div v-if="!scope.row.canAdd" class="status green">已添加</div>
            <div v-else class="status">未添加</div>
          </template>
        </el-table-column>
@@ -124,7 +139,11 @@
          <template slot-scope="scope">
            <div class="options" v-if="scope">
              <!-- 添加 -->
              <span class="iconfont option" @click="showPasswordBox = true"
              <span v-if="!scope.row.canAdd">-</span>
              <span
                v-else
                class="iconfont option"
                @click="showBox('dev', scope.row.devId, scope.row.clusterId)"
                >&#xe63f;</span
              >
            </div>
@@ -144,13 +163,21 @@
      <el-input v-model="auth_password"></el-input>
      <div class="btns">
        <div class="cancel button" @click="showPasswordBox = false">取消</div>
        <div class="submit button" @click="showPasswordBox = false">提交</div>
        <div class="submit button" @click="submit">提交</div>
      </div>
    </div>
  </div>
</template>

<script>
import {
  findDeviceListAll,
  findClustersBySearch,
  getDevicesByCluster,
  addCluster,
  addDeviceToUser,
} from "@/api/device";

export default {
  data() {
    return {
@@ -159,131 +186,19 @@
      showClusterChild: null, //展示集群列表下拉列表
      clusterHeader: ["序号", "集群名称", "IP地址", "状态", "操作"], //集群列表表头
      showPasswordBox: false,
      clusterList: [
        {
          name: "集群1",
          ip: "192.168.7.45",
          status: "1",
        },
        {
          name: "集群1",
          ip: "192.168.7.45",
          status: "1",
        },
        {
          name: "集群1",
          ip: "192.168.7.45",
          status: "0",
        },
        {
          name: "集群1",
          ip: "192.168.7.45",
          status: "0",
        },
      ],
      equipmentList: [
        {
          id: "BJS23123132",
          name: "服务器20.10",
          ip: "192.168.7.45",
          cluster: "集群1",
          status: "1",
        },
        {
          id: "BJS23123132",
          name: "服务器20.10",
          ip: "192.168.7.45",
          cluster: "集群1",
          status: "1",
        },
        {
          id: "BJS23123132",
          name: "服务器20.10",
          ip: "192.168.7.45",
          cluster: "集群1",
          status: "1",
        },
        {
          id: "BJS23123132",
          name: "服务器20.10",
          ip: "192.168.7.45",
          cluster: "集群1",
          status: "1",
        },
        {
          id: "BJS23123132",
          name: "服务器20.10",
          ip: "192.168.7.45",
          cluster: "集群1",
          status: "1",
        },
        {
          id: "BJS23123132",
          name: "服务器20.10",
          ip: "192.168.7.45",
          cluster: "集群1",
          status: "1",
        },
        {
          id: "BJS23123132",
          name: "服务器20.10",
          ip: "192.168.7.45",
          cluster: "集群1",
          status: "1",
        },
        {
          id: "BJS23123132",
          name: "服务器20.10",
          ip: "192.168.7.45",
          cluster: "集群1",
          status: "1",
        },
        {
          id: "BJS23123132",
          name: "服务器20.10",
          ip: "192.168.7.45",
          cluster: "集群1",
          status: "1",
        },
      ],
      overList: [
        {
          id: "BJS23123132",
          name: "服务器20.10",
          ip: "192.168.7.45",
          cluster: "集群1",
          status: "1",
        },
        {
          id: "BJS23123132",
          name: "服务器20.10",
          ip: "192.168.7.45",
          cluster: "集群1",
          status: "1",
        },
        {
          id: "BJS23123132",
          name: "服务器20.10",
          ip: "192.168.7.45",
          cluster: "集群1",
          status: "1",
        },
        {
          id: "BJS23123132",
          name: "服务器20.10",
          ip: "192.168.7.45",
          cluster: "集群1",
          status: "1",
        },
      ],
      clusterList: [],
      equipmentList: [],
      overList: [],
      auth_password: "", //授权秘钥
      addObj: {},
    };
  },

  methods: {
    close() {
      this.$emit("close");
    },
    showChildrenLIst(index) {
    async showChildrenLIst(index, id) {
      if (this.showClusterChild === index) {
        this.showClusterChild = null;
        return;
@@ -294,6 +209,68 @@
      setTimeout(() => {
        this.showClusterChild = index;
      }, 400);

      const res = await getDevicesByCluster({
        clusterId: id,
      });
      if (res && res.success) {
        this.overList = res.data.list;
      }
    },
    async getCluster() {
      const res = await findClustersBySearch({
        InputText: this.searchContent,
        Page: 1,
        Size: 10000,
      });
      if (res && res.success) {
        this.clusterList = res.data.list;
      }
    },

    async getDevice() {
      const res = await findDeviceListAll({
        InputText: this.searchContent,
        Page: 1,
        Size: 10000,
      });
      if (res && res.success) {
        this.equipmentList = res.data.list;
      }
    },

    searchCluster() {
      this.getCluster();
      this.listType = "cluster";
    },

    searchDevice() {
      this.getDevice();
      this.listType = "equipment";
    },

    async submit() {
      if (this.addObj.type == "cluster") {
        const res = await addCluster({
          clusterPwd: this.auth_password,
          clusterId: this.addObj.id,
        });
      } else {
        const res = await addDeviceToUser({
          clusterPwd: this.auth_password,
          deviceId: this.addObj.id,
          clusterId: this.addObj.cid,
        });
      }
    },
    showBox(type, id, cid) {
      console.log(cid);
      this.showPasswordBox = true;
      this.addObj = {
        type,
        id,
        cid,
      };
    },
  },
};