设备管理 样式调整

mark

2022-10-25 f20a554bdb24e9dfde9dc6a69d78595944f61d15

 src/views/hashrate/CameraManage/CameraRules/components/LinkageCameraBox.vue

@@ -1,67 +1,62 @@
<template>
  <div class="CameraBox">
    <div v-if="cameras">
      <div v-for="(camera, index) in cameraArr" :key="index" class="boxItem">
        <div class="header">
          <i class="iconfont">&#xe646;</i>
          <div class="name">{{ camera.cameraName }}</div>
          <el-switch
            v-model="camera.analytics"
            @change="pollEnable($event, index)"
            active-color="#D4E3FA"
            inactive-color="#E9EBEE"
            :width="56"
          >
          </el-switch>
        </div>

        <div class="body">
          <div class="row">
            <div class="label">处理方式:</div>
            <div
              class="button pollingBtn"
              :class="{ active: !camera.dealWay }"
              @click="changePoll(false, index)"
            >
              轮询
            </div>
            <div
              class="button realtimeBtn"
              :class="{ active: camera.dealWay }"
              @click="changePoll(true, index)"
            >
              实时
            </div>
          </div>
          <div class="row">
            <div class="label">分辨率:</div>
            <div
              class="data"
              v-if="camera.camearInfo.resolution_width != undefined"
            >
              {{
                camera.camearInfo.resolution_width == 0 ||
                camera.camearInfo.resolution_height == 0
                  ? "本机分辨率"
                  : `${camera.camearInfo.resolution_width} * ${camera.camearInfo.resolution_height}`
              }}
            </div>
          </div>
        </div>
  <div class="CameraBox" v-if="cameras">
    <div v-for="(camera, index) in cameraArr" :key="index" class="boxItem">
      <div class="header">
        <i class="iconfont">&#xe646;</i>
        <div class="name">{{ camera.cameraName }}</div>
        <el-switch
          v-model="camera.analytics"
          @change="pollEnable($event, index)"
          active-color="#D4E3FA"
          inactive-color="#E9EBEE"
          :width="56"
        >
        </el-switch>
      </div>
      <div class="footer">
        <div class="button addModel">添加到模板</div>
        <div class="button addRule" @click="addRule">添加新场景</div>

      <div class="body">
        <div class="row" v-if="camera.analytics">
          <div class="label">处理方式:</div>
          <div
            class="button pollingBtn"
            :class="{ active: !camera.dealWay }"
            @click="changePoll(false, index)"
          >
            轮询
          </div>
          <div
            class="button realtimeBtn"
            :class="{ active: camera.dealWay }"
            @click="changePoll(true, index)"
          >
            实时
          </div>
        </div>
        <div class="row">
          <div class="label">分辨率:</div>
          <div class="data">
            {{
              !camera.camearInfo.resolutionWidth ||
              !camera.camearInfo.resolutionHeight ||
              camera.camearInfo.resolutionWidth == 0 ||
              camera.camearInfo.resolutionHeight == 0
                ? "本机分辨率"
                : `${camera.camearInfo.resolutionWidth} * ${camera.camearInfo.resolutionHeight}`
            }}
          </div>
        </div>
      </div>
    </div>

    <div class="empty" v-else>暂未获得摄像机信息</div>
    <div class="footer">
      <!-- <div class="button addModel">添加到模板</div> -->
      <div class="button addRule" @click="addRule">添加新场景</div>
    </div>
  </div>
</template>

<script>
import { changeRunType } from "@/api/pollConfig";
import VideoRuleData from "@/Pool/VideoRuleData";
import { getCameraInfo } from "@/api/camera";

export default {
  props: {
@@ -69,15 +64,16 @@
      type: Array,
    },
  },
  created() {
    this.getCameraInfo();
  },

  data() {
    return {
      cameraArr: [],
    };
  },
  created() {
    this.getCameraInfo();
  },
  computed: {},
  methods: {
    //是否进行视频分析处理
    pollEnable(row, index) {
@@ -113,7 +109,6 @@
              message: "配置失败",
            });
          }
          this.TreeDataPool.fetchTreeData();
        });
      }
      //    this.PollData.statisticTaskInfo();
@@ -121,11 +116,9 @@

    //实时、轮询切换
    changePoll(row, index) {
      if (!this.cameraArr[index].analytics) {
        return;
      }

      //判断是新增还是更新
      console.log(this.cameraArr[index]);

      if (
        this.cameraArr[index].cameraId &&
        this.cameraArr[index].cameraId !== undefined
@@ -173,7 +166,7 @@
            });
          }
        }
        this.TreeDataPool.fetchTreeData();
        //  this.TreeDataPool.fetchTreeData();
        //    this.PollData.statisticTaskInfo();
      }
    },
@@ -184,10 +177,38 @@
    },

    getCameraInfo() {
      this.cameras.forEach((id) => {
        let newCamera = new VideoRuleData(id);
        this.cameraArr.push(newCamera);
      if (this.cameras.length <= 0) {
        return;
      }

      let arr = [];

      this.cameras.forEach(async (id) => {
        if (!id) {
          return;
        }
        const rsp = await getCameraInfo(id);
        if (rsp.success) {
          arr.push({
            cameraId: rsp.data.id,
            cameraName: rsp.data.name ? rsp.data.name : "",
            analytics: rsp.data.runType !== -1 ? true : false,
            dealWay: rsp.data.runType == 1 ? true : false,
            camearInfo: {
              resolutionWidth: rsp.data.resolutionWidth,
              resolutionHeight: rsp.data.resolutionHeight,
            },
          });
        }
      });

      this.cameraArr = arr;
      this.$forceUpdate();
    },
  },
  watch: {
    cameras() {
      this.getCameraInfo();
    },
  },
};