添加实时监控，调整树的滚动条

zhangzengfei

2022-08-10 907a3504a77873a8e762adc2f684222c8946adec

 src/views/hashrate/HashManage/components/EquipmentForm.vue

@@ -1,8 +1,6 @@
<template>
  <div class="EquipmentForm">
    <div class="back">
      <span class="iconfont" @click="hiddenList">&#xe62c;</span>{{ name }}
    </div>
    <div class="back"><span class="iconfont" @click="hiddenList">&#xe62c;</span>{{ name }}</div>
    <div class="header">
      <div class="search">
        <el-input v-model="searchInput" placeholder="请输入内容"></el-input>
@@ -29,34 +27,14 @@
        :fit="true"
        :stripe="true"
      >
        <el-table-column
          label="序号"
          type="index"
          align="center"
          width="80"
        ></el-table-column>
        <el-table-column
          label="摄像机名称"
          align="center"
          show-overflow-tooltip
        >
        <el-table-column label="序号" type="index" align="center" width="80"></el-table-column>
        <el-table-column label="摄像机名称" align="center" show-overflow-tooltip>
          <template slot-scope="scope">
            <span>{{
              scope.row.alias !== "" ? scope.row.alias : scope.row.name
            }}</span>
            <span>{{ scope.row.alias !== "" ? scope.row.alias : scope.row.name }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="摄像机地址"
          prop="addr"
          align="center"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          label="摄像机IP"
          prop="ip"
          align="center"
        ></el-table-column>
        <el-table-column label="摄像机地址" prop="addr" align="center" show-overflow-tooltip></el-table-column>
        <el-table-column label="摄像机IP" prop="ip" align="center"></el-table-column>
        <el-table-column label="摄像机类型" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.runType | cameraType }}</span>
@@ -64,9 +42,7 @@
        </el-table-column>
        <el-table-column label="执行算法" align="center" show-overflow-tooltip>
          <template slot-scope="scope">
            <span v-if="scope.row.tasks != null">{{
              scope.row.tasks | taskList
            }}</span>
            <span v-if="scope.row.tasks != null">{{ scope.row.tasks | taskList }}</span>
            <span v-else>-</span>
          </template>
        </el-table-column>
@@ -92,7 +68,7 @@
              :color="{
                checked: '#4D88FF',
                unchecked: '#FF7733',
                disabled: '#CCCCCC',
                disabled: '#CCCCCC'
              }"
              :sync="true"
              @change="pollSwitch(scope.row)"
@@ -115,29 +91,25 @@
      </div>
    </div>

    <SettingBox
      v-if="showSettingBox"
      @close="showSettingBox = false"
      :id="id"
    ></SettingBox>
    <SettingBox v-if="showSettingBox" @close="showSettingBox = false" :id="id"></SettingBox>
  </div>
</template>

<script>
import SettingBox from "./SettingBox";
import { getCameraByPage } from "@/api/clusterManage";
import { changeRunType } from "@/api/pollConfig";
import SettingBox from "./SettingBox"
import { getCameraByPage } from "@/api/clusterManage"
import { changeRunType } from "@/api/pollConfig"

export default {
  props: {
    id: {},
    name: {},
    name: {}
  },
  components: {
    SettingBox,
    SettingBox
  },
  created() {
    this.getDevice();
    this.getDevice()
  },
  data() {
    return {
@@ -146,8 +118,8 @@
      dataList: [],
      page: 1,
      size: 10,
      total: 100,
    };
      total: 100
    }
  },
  methods: {
    async getDevice() {
@@ -155,79 +127,76 @@
        deviceId: this.id,
        inputText: this.searchInput,
        page: this.page,
        size: this.size,
      });
        size: this.size
      })
      if (res && res.success) {
        this.dataList = res.data.lists;
        this.total = res.data.total;
        this.dataList = res.data.lists
        this.total = res.data.total
      }
      // 根据rtsp 提取ip地址
      const ipReg = /\d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3}/;
      const ipReg = /\d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3}/
      this.dataList.forEach((cam) => {
        // 国标摄像机不显示ip
        if (cam.type === 1) {
          cam.ip = "-";
          return;
          cam.ip = "-"
          return
        }
        let ip = ipReg.exec(cam.rtsp);
        let ip = ipReg.exec(cam.rtsp)
        if (ip.length > 0) {
          cam.ip = ip[0];
          cam.ip = ip[0]
        }
      });
      })
    },
    handleSizeChange(size) {
      this.size = size;
      this.getDevice();
      this.size = size
      this.getDevice()
    },
    refrash(page) {
      this.page = page;
      this.getDevice();
      this.page = page
      this.getDevice()
    },
    hiddenList() {
      this.$emit("hiddenList");
      this.$emit("hiddenList")
    },
    pollSwitch(row) {
      row.runType = row.runType ^ 1;
      row.runType = row.runType ^ 1
      changeRunType({
        camera_ids: [row.id],
        run_type: row.runType ^ 1,
        clusterId: row.clusterId,
        clusterId: row.clusterId
      }).then((rsp) => {
        if (rsp && rsp.success) {
          this.$notify({
            type: "success",
            message: "配置成功",
          });
            message: "配置成功"
          })
        } else {
          this.$notify({
            type: "error",
            message: "配置失败",
          });
            message: "配置失败"
          })
        }

        // this.PollData.fetchPollList();
      });
    },
      })
    }
  },
  filters: {
    cameraType(type) {
      return type === -1 ? "监控摄像机" : "AI摄像机";
      return type === -1 ? "监控摄像机" : "AI摄像机"
    },
    taskList(tasks) {
      return tasks
        .filter((task) => {
          return task.hasRule;
        })
        .map((task) => {
          return task.taskname;
          return task.taskname
        })
        .join(",");
        .join(",")
    },
    switchText(type) {
      return type ? "已开启" : "未开启";
    },
  },
};
      return type ? "已开启" : "未开启"
    }
  }
}
</script>

<style lang="scss" scoped>
@@ -459,4 +428,4 @@
    }
  }
}
</style>
</style>