摄像机管理

ZZJ

2022-04-12 994e5e08cba4e6b9ce321b7cf5cb1ec8d19dfa22

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

@@ -1,12 +1,12 @@
<template>
  <div class="EquipmentForm">
    <div class="back">
      <span class="iconfont" @click="hiddenList">&#xe62c;</span>服务器20.10
      <span class="iconfont" @click="hiddenList">&#xe62c;</span>{{ name }}
    </div>
    <div class="header">
      <div class="search">
        <el-input v-model="searchInput" placeholder="请输入内容"></el-input>
        <div class="button searchBtn">搜索</div>
        <div class="button searchBtn" @click="getDevice">搜索</div>
        <div class="button settingBtn" @click="showSettingBox = true">设置</div>
      </div>

@@ -29,58 +29,74 @@
        :fit="true"
        :stripe="true"
      >
        <el-table-column label="序号" class-name="index" width="70">
          <template slot-scope="scope">{{
            scope.$index + 1 + (page - 1) * size
          }}</template>
        </el-table-column>
        <el-table-column
          prop="name"
          label="序号"
          type="index"
          align="center"
          width="80"
        ></el-table-column>
        <el-table-column
          label="摄像机名称"
          align="center"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          prop="position"
          label="摄像机位置"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column prop="IP" label="摄像机IP"></el-table-column>
        <el-table-column prop="type" label="摄像机类型"></el-table-column>
        <el-table-column prop="sdk" label="执行算法"></el-table-column>
        <el-table-column prop="device" label="运行设备"></el-table-column>

        <el-table-column label="状态">
        >
          <template slot-scope="scope">
            <div v-if="scope.row.status == 1" class="status green">处理中</div>
            <div v-else class="status">等待处理</div>
            <span>{{
              scope.row.alias !== "" ? scope.row.alias : scope.row.name
            }}</span>
          </template>
        </el-table-column>

        <el-table-column label="实时/轮询">
        <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">
            <div class="switch">
              <el-switch
                v-model="scope.row.realTime"
                active-color="#D4E3FA"
                inactive-color="#FAE4D4"
                :width="56"
              >
              </el-switch>
              <div
                class="activeText"
                v-if="scope.row.realTime"
                @click="scope.row.realTime = !scope.row.realTime"
              >
                实时
              </div>
              <div
                class="inactiveText"
                v-else
                @click="scope.row.realTime = !scope.row.realTime"
              >
                轮询
              </div>
            </div>
            <span>{{ scope.row.runType | cameraType }}</span>
          </template>
        </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-else>-</span>
          </template>
        </el-table-column>
        <el-table-column label="运行设备" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.runServerName }}</span>
          </template>
        </el-table-column>
        <el-table-column label="状态" align="center" show-overflow-tooltip>
          <template slot-scope="scope">
            <span v-if="scope.row.isRunning">{{ "处理中" }}</span>
            <span v-else>{{ "等待处理" }}</span>
          </template>
        </el-table-column>
        <el-table-column label="实时/轮询" align="center" width="100px">
          <template slot-scope="scope">
            <span v-if="scope.row.runType === -1">-</span>
            <toggle-button
              v-else
              :value="scope.row.runType === 1"
              :width="60"
              :labels="{ checked: '实时', unchecked: '轮询' }"
              :color="{
                checked: '#4D88FF',
                unchecked: '#FF7733',
                disabled: '#CCCCCC',
              }"
              :sync="true"
              @change="pollSwitch(scope.row)"
            />
          </template>
        </el-table-column>
      </el-table>
@@ -102,113 +118,111 @@
    <SettingBox
      v-if="showSettingBox"
      @close="showSettingBox = false"
      :id="id"
    ></SettingBox>
  </div>
</template>

<script>
import SettingBox from "./SettingBox";
import { getCameraByPage } from "@/api/clusterManage";
export default {
  props: {
    id: {},
    name: {},
  },
  components: {
    SettingBox,
  },
  created() {
    this.getDevice();
  },
  data() {
    return {
      searchInput: "",
      showSettingBox: false,
      dataList: [
        {
          name: "5.151（产品旁）265",
          position: "5.155摄像机",
          IP: "192.168.20.110",
          type: "监控摄像机",
          sdk: "场景1，sleep",
          device: "189服务",
          status: 1,
          realTime: true,
        },
        {
          name: "5.151（产品旁）265",
          position: "5.155摄像机",
          IP: "192.168.20.110",
          type: "监控摄像机",
          sdk: "场景1，sleep",
          device: "189服务",
          status: 0,
          realTime: true,
        },
        {
          name: "5.151（产品旁）265",
          position: "5.155摄像机",
          IP: "192.168.20.110",
          type: "监控摄像机",
          sdk: "场景1，sleep",
          device: "189服务",
          status: 1,
          realTime: true,
        },
        {
          name: "5.151（产品旁）265",
          position: "5.155摄像机",
          IP: "192.168.20.110",
          type: "监控摄像机",
          sdk: "场景1，sleep",
          device: "189服务",
          status: 1,
          realTime: true,
        },
        {
          name: "5.151（产品旁）265",
          position: "5.155摄像机",
          IP: "192.168.20.110",
          type: "监控摄像机",
          sdk: "场景1，sleep",
          device: "189服务",
          status: 1,
          realTime: true,
        },
        {
          name: "5.151（产品旁）265",
          position: "5.155摄像机",
          IP: "192.168.20.110",
          type: "监控摄像机",
          sdk: "场景1，sleep",
          device: "189服务",
          status: 1,
          realTime: false,
        },
        {
          name: "5.151（产品旁）265",
          position: "5.155摄像机",
          IP: "192.168.20.110",
          type: "监控摄像机",
          sdk: "场景1，sleep",
          device: "189服务",
          status: 1,
          realTime: false,
        },
        {
          name: "5.151（产品旁）265",
          position: "5.155摄像机",
          IP: "192.168.20.110",
          type: "监控摄像机",
          sdk: "场景1，sleep",
          device: "189服务",
          status: 1,
          realTime: false,
        },
      ],
      dataList: [],
      page: 1,
      size: 10,
      total: 100,
    };
  },
  methods: {
    handleSizeChange() {},
    refrash() {},
    async getDevice() {
      const res = await getCameraByPage({
        deviceId: this.id,
        inputText: this.searchInput,
        page: this.page,
        size: this.size,
      });
      if (res && res.success) {
        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}/;
      this.dataList.forEach((cam) => {
        // 国标摄像机不显示ip
        if (cam.type === 1) {
          cam.ip = "-";
          return;
        }
        let ip = ipReg.exec(cam.rtsp);
        if (ip.length > 0) {
          cam.ip = ip[0];
        }
      });
    },
    handleSizeChange(size) {
      this.size = size;
      this.getDevice();
    },
    refrash(page) {
      this.page = page;
      this.getDevice();
    },
    hiddenList() {
      this.$emit("hiddenList");
    },
    pollSwitch(row) {
      changeRunType({ camera_ids: [row.id], run_type: row.run_type ^ 1 }).then(
        (rsp) => {
          if (rsp && rsp.success) {
            this.$notify({
              type: "success",
              message: "配置成功",
            });

            row.run_type = row.run_type ^ 1;
          } else {
            this.$notify({
              type: "error",
              message: "配置失败",
            });
          }

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