tab禁用

ZZJ

2022-01-12 9d43e7051075f1fc1b2fee680a79f90becddd63f

 src/pages/cameraAccess/components/CameraInfo.vue

@@ -4,12 +4,17 @@
      <el-row>
        <el-col :span="9">
          <el-form-item label="RTSP地址" :span="11" prop="rtsp">
            <el-input v-model="form.rtsp" placeholder="rtsp://" :disabled="isDisabled" size="small"></el-input>
            <el-input
              v-model="form.rtsp"
              placeholder="rtsp://"
              :disabled="isDisabled"
              size="small"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="9" :offset="1">
          <el-form-item label="坐标" style="width:100%;">
            <label slot="label">&nbsp;&nbsp;&nbsp;坐标</label>
          <el-form-item label="坐标" style="width: 100%">
            <label slot="label">坐标</label>
            <el-col :span="11">
              <el-input
                v-model="form.latitude"
@@ -31,23 +36,33 @@
      </el-row>
      <el-row>
        <el-col :span="9">
          <el-form-item label="设备名称" style="width:100%" prop="name">
            <el-input v-model="form.name" placeholder="请输入设备名称" :disabled="isDisabled" size="small"></el-input>
          <el-form-item label="设备名称" style="width: 100%" prop="name">
            <el-input
              v-model="form.name"
              placeholder="请输入设备名称"
              :disabled="isDisabled"
              size="small"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="9" :offset="1">
          <el-form-item label="设备地址" style="width:100%" prop="addr">
            <el-input v-model="form.addr" placeholder="请输入地址描述" :disabled="!form.rtsp" size="small"></el-input>
          <el-form-item label="设备地址" style="width: 100%" prop="addr">
            <el-input
              v-model="form.addr"
              placeholder="请输入地址描述"
              :disabled="isDisabled"
              size="small"
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="9">
          <el-form-item label="处理分辨率" style="width:100%">
          <el-form-item label="处理分辨率" style="width: 100%">
            <el-select
              v-model="form.resolution"
              placeholder="本机分辨率"
              style="position: absolute;left: 0;"
              style="position: absolute; left: 0"
              size="small"
            >
              <el-option
@@ -59,12 +74,13 @@
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="9" :offset="1" style="padding-left: 11px;">
        <el-col :span="9" :offset="1">
          <el-form-item label="事件声音">
            <div class="flex-wrap" style="margin-left:-10px">
              <el-switch v-model="form.voiceEnable" active-color="#409eff" :width="50"></el-switch>
              <el-select
                v-model="form.voiceId"
            <div class="flex-wrap" style="margin-top: 10px">
              <el-switch v-model="form.voiceEnable" :width="50"></el-switch>
              <!-- 屏蔽声音选择,调整到场景 -->
              <!-- <el-select
                v-model="voice"
                placeholder="选择声音"
                size="small"
                value-key="id"
@@ -77,57 +93,79 @@
                  :value="item"
                ></el-option>
              </el-select>
              <span class="player-btn" @click="togglePlayer">
              <span class="player-btn" @click="togglePlayer" style="cursor:pointer;">
                <i
                  v-if="togglePlay"
                  class="el-icon-video-play"
                  style="font-size:26px; vertical-align:middle; color:#409eff"
                ></i>
              </span>
                <i
                  v-else
                  class="el-icon-video-pause"
                  style="font-size:26px; vertical-align:middle; color:#409eff"
                ></i>
              </span>-->
            </div>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row v-show="isGb28182">
        <el-col :span="9">
          <el-form-item label="设备别名" style="width:100%" prop="alias">
            <el-input v-model="form.alias" placeholder="请输入设备别名" size="small"></el-input>
          <el-form-item label="设备别名" style="width: 100%" prop="alias">
            <el-input
              v-model="form.alias"
              placeholder="请输入设备别名"
              size="small"
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <!-- 添加传感器 -->
        <CameraInfoEditor ref="cameraEditor" :Carmeras="form" :sensors="sensors"></CameraInfoEditor>
        <CameraInfoEditor
          ref="cameraEditor"
          :Carmeras="form"
          :sensors="sensors"
        ></CameraInfoEditor>
      </el-row>

      <el-row style="padding-top: 15px">
        <el-col :span="19" style="text-align: right;">
        <el-col :span="19" style="text-align: right">
          <el-button
            size="small"
            type="primary"
            @click="onSubmit('addForm')"
            :disabled="conDisabled"
          >保存</el-button>
            >保存</el-button
          >
          <el-button
            type="danger"
            size="small"
            @click="deleteCamera"
            v-if="!isAdd"
            :disabled="isDisabled"
          >删除摄像机</el-button>
            >删除摄像机</el-button
          >
        </el-col>
      </el-row>
      <el-divider></el-divider>
      <input v-model="form.id" type="hidden" />
      <input v-model="form.areaid" type="hidden" />
      <el-row>
        <el-col :span="12" style="text-align: right;">
          <el-button size="small" type="primary" @click="cameraConnet" :disabled="conDisabled">连接测试</el-button>
        <el-col :span="12" style="text-align: right">
          <el-button
            size="small"
            type="primary"
            @click="cameraConnet"
            :disabled="conDisabled"
            >连接测试</el-button
          >
        </el-col>
      </el-row>
      <el-row style="padding-top: 15px">
      <el-row style="padding: 15px 0">
        <el-col :span="12">
          <camera-player
          <!-- <camera-player
            :cameraName="videoItem.name"
            :cameraID="videoItem.id"
            :isGb="videoItem.cameraType === 1"
@@ -135,7 +173,26 @@
            :isRunning="false"
            v-if="videoItem !== '' && videoItem !== undefined && videoItem !== null && visibilityState"
          ></camera-player>
          <video v-else poster="/images/cameraAccess/video-poster.png" preload="none"></video>
          <video v-else poster="/images/cameraAccess/video-poster.png" preload="none"></video> -->
          <wasm-player
            :cameraName="videoItem.name"
            :cameraID="videoItem.id"
            :isGb="videoItem.cameraType === 1"
            :rtspUrl="videoItem.rtsp"
            :isRunning="false"
            :showArea="false"
            v-if="
              videoItem !== '' &&
              videoItem !== undefined &&
              videoItem !== null &&
              visibilityState
            "
          ></wasm-player>
          <video
            v-else
            poster="/images/cameraAccess/video-poster.png"
            preload="none"
          ></video>
        </el-col>

        <!-- 系统运行信息 -->
@@ -143,10 +200,10 @@
          <div class="sysinfo-box">
            <div style="width: 70%">
              <ul>
                <li style="width:100%">
                <li style="width: 100%">
                  <info-card
                    style="width:100%;min-width: 440px"
                    :realtime="PollData.RealTimeSum"
                    style="width: 100%; min-width: 440px"
                    :realtime="PollData.RealTimeValidCount"
                    :polling="PollData.PollValidCount"
                    :dataStack="PollData.stackChannelCount"
                  ></info-card>
@@ -157,7 +214,10 @@
              :style="`width:80%;height:174px;position: relative;left: -12px;`"
              v-if="PollData.barCharts && PollData.barCharts.length !== 0"
            >
              <eChartsBar ref="cpuMeneryCharts" :xAxisData="PollData.barCharts"></eChartsBar>
              <eChartsBar
                ref="cpuMeneryCharts"
                :xAxisData="PollData.barCharts"
              ></eChartsBar>
            </div>
          </div>
        </el-col>
@@ -167,36 +227,36 @@
</template>
<script>
import {
  checkCameraConnet,
  createCamera,
  updateCameraInfo,
  getCameraInfo,
  delCamera
  delCamera,
} from "@/api/camera";
import { getSoundList } from "@/api/event";
import { changeRunType } from "@/api/pollConfig";

import WasmPlayer from "@/components/wasmPlayer";
import CameraPlayer from "@/components/player";
import eChartsBar from '@/components/subComponents/eChartsBar'
import eChartsBar from "@/components/subComponents/eChartsBar";

import InfoCard from "./infoCard"
import CameraInfoEditor from './CameraInfoEditor'
import InfoCard from "./infoCard";
import CameraInfoEditor from "./CameraInfoEditor";

export default {
  name: "CameraInfo",
  components: {
    CameraPlayer,
    // CameraPlayer,
    WasmPlayer,
    InfoCard,
    eChartsBar,
    CameraInfoEditor
    CameraInfoEditor,
  },
  props: {
    cameraList: {
      default: () => {
        return [];
      },
      type: Array
    }
      type: Array,
    },
  },
  data() {
    return {
@@ -205,50 +265,31 @@
      soundList: [],
      togglePlay: true,
      eventAudio: new Audio(),
      soundPath: '',
      form: {
        latitude: 0,
        rtsp: "",
        longitude: 0,
        name: "",
        addr: "",
        alias: "",
        areaid: "",
        brand: "",
        id: "",
        ip: "",
        reserved: "",
        run_type: 0,
        isAI: false,
        username: "",
        password: "",
        cameraType: 0,
        resolution: "",
        voiceId: "",
        voiceEnable: true
      },
      soundPath: "",
      form: {},
      // 记录添加状态
      isAdd: false,
      addParentId: "",
      rules: {
        name: [
          { required: true, message: "设备名称不能为空", trigger: "blur" }
          { required: true, message: "设备名称不能为空", trigger: "blur" },
        ],
        rtsp: [
          { required: true, message: "RTSP地址不能为空", trigger: "blur" }
          { required: true, message: "RTSP地址不能为空", trigger: "blur" },
        ],
        addr: [
          { required: true, message: "设备地址不能为空", trigger: "blur" }
        ]
          { required: true, message: "设备地址不能为空", trigger: "blur" },
        ],
      },
      resolutionList: [],
      //传感器列表
      sensors: []
      sensors: [],
      voice: null,
    };
  },
  computed: {
    isSelected() {
      return this.TreeDataPool.selectedNode.type !== "4"
      return this.TreeDataPool.selectedNode.type !== "4";
    },
    isGb28182() {
      return this.TreeDataPool.selectedNode.cameraType === 1;
@@ -262,7 +303,7 @@
    },
    conDisabled() {
      return this.isAdd ? false : this.TreeDataPool.selectedNode.type !== "4";
    }
    },
  },
  mounted() {
    this.initFormData();
@@ -270,37 +311,45 @@
      this.visibilitychange();
    });
    this.getSounds();

    this.eventAudio.addEventListener("ended", () => {
      this.togglePlay = true;
    });
  },
  methods: {
    getSounds() {
      getSoundList().then(res => {
        if (res.success) {
          this.soundList = res.data.list
        }
      }).catch(
        e => console.log(e)
      )
      getSoundList()
        .then((res) => {
          if (res.success) {
            this.soundList = res.data;
          }
        })
        .catch((e) => console.log(e));
    },
    selSound(sound) {
      this.soundPath = sound.path;
      this.form.voiceId = sound.id
      this.form.voiceId = sound.id;
      this.togglePlay = true;
      this.eventAudio.pause();
      // this.eventAudio.
    },
    togglePlayer() {
      if (!this.soundPath) {
        this.$notify({
          type: 'info',
          message: '请先选择一个声音!'
        })
          type: "info",
          message: "请先选择一个声音!",
        });
        return false;
      }
      this.eventAudio.src = this.soundPath;

      if (this.togglePlay) {
        this.eventAudio.play();
        this.togglePlay = false;
      } else {
        this.eventAudio.pause()
        this.eventAudio.pause();
        this.togglePlay = true;
      }
      this.togglePlay = !this.togglePlay
      // this.togglePlay = !this.togglePlay
    },
    visibilitychange() {
      switch (document.visibilityState) {
@@ -316,111 +365,139 @@
      this.isAdd = false;
      this.videoItem = null;
      this.$refs.addForm.resetFields();
      this.voice = null;

      // this.initFormData();
      // this.$refs.addForm.clearValidate();
      if (node.type === "4") {
        getCameraInfo(node.id).then(res => {
        getCameraInfo(node.id).then((res) => {
          if (res.success) {
            console.log(res, '获取摄像机信息')
            // console.log(res, '获取摄像机信息')
            if (res.data.resolutions) {
              let list = res.data.resolutions.map(i => {
                let obj = {}
              let list = res.data.resolutions.map((i) => {
                let obj = {};
                if (i.width == 0 && i.height == 0) {
                  obj.label = "本机分辨率"
                  obj.value = "0*0"
                  obj.label = "本机分辨率";
                  obj.value = "0*0";
                } else {
                  obj.label = i.width + "*" + i.height
                  obj.value = i.width + "*" + i.height
                  obj.label = i.width + "*" + i.height;
                  obj.value = i.width + "*" + i.height;
                }
                return obj
              })
              this.resolutionList = list
              this.sensors = res.data.sensors
                return obj;
              });
              this.resolutionList = list;
              this.sensors = res.data.sensors;
            }

            this.$nextTick(() => {
              Object.assign(this.form, res.data)
              this.initFormData();
              Object.assign(this.form, res.data);

              this.soundList.forEach((element) => {
                if (this.form.voiceId == element.id) {
                  this.voice = element;
                }
              });

              if (this.form.run_type !== -1) {
                this.form.isAI = true
                this.form.isAI = true;
              } else {
                this.form.isAI = false
                this.form.isAI = false;
              }
              this.form.resolution = this.form.resolution_width + "*" + this.form.resolution_height
            })
              this.form.resolution =
                this.form.resolution_width + "*" + this.form.resolution_height;
            });
          }
        });
      }
    },
    // 保存
    onSubmit(formName) {
      let list = this.$refs.cameraEditor.getResult()
      console.log(list, "sensor")
      // id为空，新增摄像机
      this.$refs[formName].validate(async valid => {
      let list = this.$refs.cameraEditor.getResult();
      this.$refs[formName].validate(async (valid) => {
        if (valid) {
          const isRequire = this.verifyRequrie();
          if (!isRequire) return false;

          this.form.latitude = Number.isNaN(parseFloat(this.form.latitude))
            ? 0
            : parseFloat(this.form.latitude);
          this.form.longitude = Number.isNaN(parseFloat(this.form.longitude))
            ? 0
            : parseFloat(this.form.longitude);
          this.form.sensors = list;
          this.form.resolution_width = Number(
            this.form.resolution.split("*")[0]
          );
          this.form.resolution_height = Number(
            this.form.resolution.split("*")[1]
          );
          let _this = this;
          // 更新
          if (this.form.id !== "") {
            this.form.areaid = this.TreeDataPool.getParent(this.form.id, this.isGb28182);
            this.form.latitude = Number.isNaN(parseFloat(this.form.latitude)) ? 0 : parseFloat(this.form.latitude);
            this.form.longitude = Number.isNaN(parseFloat(this.form.longitude)) ? 0 : parseFloat(this.form.longitude);
            this.form.sensors = list
            this.form.resolution_width = Number(this.form.resolution.split("*")[0])
            this.form.resolution_height = Number(this.form.resolution.split("*")[1])
            updateCameraInfo(this.form).then(rsp => {
              if (rsp.success) {
                this.$notify({
                  type: "success",
                  message: "摄像机信息修改成功！"
                });
                this.TreeDataPool.fetchTreeData();
              } else {
                this.selectCamera(this.TreeDataPool.selectedNode);
            this.form.areaid = this.TreeDataPool.getParent(
              this.form.id,
              this.isGb28182
            );
            console.log(this.TreeDataPool.selectedNode);
            updateCameraInfo(this.form)
              .then((rsp) => {
                if (rsp.success) {
                  this.$notify({
                    type: "success",
                    message: "摄像机信息修改成功！",
                  });
                  this.TreeDataPool.fetchTreeData();
                  console.log(this.TreeDataPool.selectedNode);
                  //_this.$root.$children[0].$refs['leftTree'].$refs.tree.ztreeObj.checkNode(_this.TreeDataPool.selectedNode, true, false, false);
                  //选中修改后的节点
                  let { evt, treeId } =
                    _this.$root.$children[0].$refs["leftTree"].$refs.tree;
                  console.log(evt, treeId);
                  // this.$nextTick(()=>{
                  //_this.$root.$children[0].$refs['leftTree'].$refs.tree.handleCreated()
                  // })
                } else {
                  this.selectCamera(this.TreeDataPool.selectedNode);
                  this.$notify({
                    type: "error",
                    message: "摄像机信息修改失败！",
                  });
                }
              })
              .catch((err) => {
                this.$notify({
                  type: "error",
                  message: "摄像机信息修改失败！"
                  message: err.msg,
                });
              }
            });
              });
          } else {
            this.form.areaid = this.addParentId;
            this.form.sensors = list
            const { ...json } = this.form;
            createCamera({
              latitude: parseFloat(json.latitude),
              rtsp: this.form.rtsp,
              longitude: parseFloat(json.longitude),
              name: this.form.name,
              addr: this.form.addr,
              areaid: this.form.areaid,
              brand: this.form.brand,
              id: this.form.id,
              ip: this.form.ip,
              port: parseFloat(json.port),
              reserved: this.form.reserved,
              run_type: this.form.isAI ? this.form.run_type : -1,
              username: this.form.username,
              password: this.form.password,
              areaId: this.form.areaId,
              sensors: this.form.sensors
            }).then(rsp => {
              if (rsp.success) {
                this.$notify({
                  type: "success",
                  message: "摄像机添加成功！"
                });
                this.TreeDataPool.selectedNode = rsp.data;
                this.TreeDataPool.fetchTreeData();
                // 后端返回结果为0，查询后为4
                this.TreeDataPool.selectedNode.type = "4";
                this.selectCamera(this.TreeDataPool.selectedNode);
              } else {
            createCamera(this.form)
              .then((rsp) => {
                if (rsp.success) {
                  this.$notify({
                    type: "success",
                    message: "摄像机添加成功！",
                  });
                  this.TreeDataPool.selectedNode = rsp.data;
                  this.TreeDataPool.fetchTreeData();
                  // 后端返回结果为0，查询后为4
                  this.TreeDataPool.selectedNode.type = "4";
                  this.selectCamera(this.TreeDataPool.selectedNode);
                } else {
                  this.$notify({
                    type: "error",
                    message: "摄像机添加失败！",
                  });
                }
              })
              .catch((err) => {
                this.$notify({
                  type: "error",
                  message: "摄像机添加失败！"
                  message: err.msg,
                });
              }
            });
              });
          }
        }
      });
@@ -434,9 +511,9 @@
          rtsp: this.form.rtsp,
          id: this.form.id,
          isRunning: this.form.run_enable,
          cameraType: this.form.type
          cameraType: this.form.type,
        };
      })
      });
    },
    // * 验证必选项
    verifyRequrie() {
@@ -449,7 +526,7 @@
      if (this.form.rtsp === "") {
        this.$notify({
          type: "warning",
          message: "请输入正确的rtsp地址"
          message: "请输入正确的rtsp地址",
        });
        return false;
      }
@@ -460,21 +537,21 @@
      this.$confirm("是否删除此摄像机？", {
        center: true,
        cancelButtonClass: "comfirm-class-cancle",
        confirmButtonClass: "comfirm-class-sure"
        confirmButtonClass: "comfirm-class-sure",
      }).then(() => {
        delCamera(this.form.id).then(res => {
        delCamera(this.form.id).then((res) => {
          if (res.success) {
            this.initFormData();
            this.$notify({
              type: "success",
              message: "删除成功！"
              message: "删除成功！",
            });
            this.TreeDataPool.fetchTreeData();
            this.TreeDataPool.selectedNode = {};
          } else {
            this.$notify({
              type: "error",
              message: "删除失败！"
              message: "删除失败！",
            });
          }
        });
@@ -494,13 +571,13 @@
        id: "",
        ip: "",
        reserved: "",
        run_type: 0,
        run_type: -1,
        isAI: false,
        username: "",
        password: "",
        resolution: "",
        voiceId: "",
        voiceEnable: true
        voiceEnable: false,
      };
    },
    // 添加设备
@@ -509,106 +586,16 @@
      this.addParentId = node;
      this.initFormData();
    },
    //实时、轮询切换
    changePoll(row) {
      // console.log(row,'实时、轮询切换',this.form,this.PollData.RealTimeSum)
      //判断是新增还是更新
      if (this.form.id && this.form.id !== undefined) {
        if (this.PollData.RealTimeSum < 16) {
          if (row.value) {
            this.form.run_type = 1
          } else {
            this.form.run_type = 0
          }
          changeRunType({ camera_ids: [this.form.id], run_type: this.form.run_type }).then(
            rsp => {
              if (rsp && rsp.success) {
                this.$notify({
                  type: "success",
                  message: "配置成功"
                });
              } else {
                this.$notify({
                  type: "error",
                  message: "配置失败"
                });
              }
            }
          );
        } else {
          if (this.form.run_type === 1) {
            this.form.run_type = 0
            changeRunType({ camera_ids: [this.form.id], run_type: this.form.run_type }).then(
              rsp => {
                if (rsp && rsp.success) {
                  this.$notify({
                    type: "success",
                    message: "配置成功"
                  });
                } else {
                  this.$notify({
                    type: "error",
                    message: "配置失败"
                  });
                }
              }
            );
          }
          this.$nextTick(() => {
            this.$set(this.form, 'run_type', 0)
          })
          // this.$notify({
          //   type: 'warning',
          //   message: '实时处理路数已达最大处理路数！'
          // })
        }
        this.TreeDataPool.fetchTreeData();
        this.PollData.statisticTaskInfo();
      }
    },
    //是否进行视频分析处理
    pollEnable(row) {
      // console.log(row,'实时、轮询切换')
      if (row) {
        if (this.PollData.RealTimeSum < 16) {
          this.form.run_type = 1
        } else {
          this.form.run_type = 0
        }
      } else {
        this.form.run_type = -1
      }
      if (this.form.id && this.form.id !== undefined) {
        changeRunType({ camera_ids: [this.form.id], run_type: this.form.run_type }).then(
          rsp => {
            if (rsp && rsp.success) {
              this.$notify({
                type: "success",
                message: "配置成功"
              });
            } else {
              this.$notify({
                type: "error",
                message: "配置失败"
              });
            }
            this.selectCamera(this.TreeDataPool.selectedNode)
          }
        );
      }
      this.TreeDataPool.fetchTreeData();
      this.PollData.statisticTaskInfo();
    }
  }
  },
};
</script>

<style lang="scss">
.camera-info {
  width: 100%;
  height: 100%;
  margin-left: 20px;
  overflow: auto;

  margin: 20px 0 20px 20px;

  .ai-select {
    text-align: left;
  }
@@ -647,5 +634,9 @@
      }
    }
  }

  .video-player {
    height: 450px;
  }
}
</style>