kd-aiot-frontend-yms/src/views/monitor/index.vue

<template>
  <div class="inspection">
    <div class="left">
      <div class="tree">
        <monitorList
          @getClickId="getClickId"
          @getCameraList="getCameraList"
        ></monitorList>
      </div>
    </div>

    <div class="center">
      <div class="monitor">
        <el-carousel
          ref="carouselRef"
          indicator-position="outside"
          style="height: calc(100% - 42px)"
          :autoplay="false"
          trigger="click"
          @change="carouselChange"
        >
          <el-carousel-item
            v-for="(page, pageIndex) in pageNum"
            :key="pageIndex"
          >
            <div class="page" v-loading="loading">
              <div
                :style="itemStyle"
                v-for="(video, videoIndex) in itemNum(pageIndex)"
                :key="videoIndex"
              >
                <div
                  v-if="pageIndex == carouselIndex"
                  style="width: 100%; height: 100%"
                  @click="
                    deviceCode =
                      videoList[pageIndex * layout * layout + videoIndex][
                        'cameraCode'
                      ]
                  "
                  :class="{
                    active:
                      deviceCode ==
                      videoList[pageIndex * layout * layout + videoIndex][
                        'cameraCode'
                      ]
                  }"
                  class="box-border videoItem"
                >
                  <!-- <myVideo
                    :video-url="
                      videoList[pageIndex * layout * layout + videoIndex]['url']
                    "
                    :index="pageIndex * layout * layout + videoIndex"
                  /> -->
                  <myVideo
                    :autoplay="true"
                    :muted="true"
                    :width="960"
                    :height="540"
                    :isLive="true"
                    show-reload-btn
                    @setLoading="setLoading"
                    :video-url="
                      videoList[pageIndex * layout * layout + videoIndex]['url']
                    "
                  />
                  <div class="mask1">
                    <img
                      @click.stop="
                        handleScreenshot(
                          pageIndex * layout * layout + videoIndex,
                          $event
                        )
                      "
                      :src="
                        require('@/assets/svgs/centerctl/videoSur/camera.svg')
                      "
                    />
                  </div>
                  <div
                    class="mask2"
                    v-if="
                      stopList.includes(
                        pageIndex * layout * layout + videoIndex
                      )
                    "
                  >
                    <img
                      class="play"
                      @click.stop="
                        play(pageIndex * layout * layout + videoIndex)
                      "
                      :src="
                        require('@/assets/svgs/centerctl/videoSur/play.svg')
                      "
                      alt=""
                    />
                  </div>
                </div>
              </div>
            </div>
          </el-carousel-item>
        </el-carousel>

        <div class="center-handle">
          <div
            class="layout-type"
            id="layout"
            @click="getFocus"
            @blur="blur"
            tabindex="0"
          >
            <div style="width: 100%; height: 100%" @click="toggle" tabindex="0">
              <div class="layout">
                <div
                  v-for="(item, index) in layout * layout"
                  :key="index"
                  :style="{
                    width: `calc((100% - 1px * (${layout} - 1)) / ${layout})`,
                    height: `calc((100% - 1px * (${layout} - 1)) / ${layout})`,
                    backgroundColor: '#404446'
                  }"
                ></div>
              </div>
              <i class="el-icon-caret-bottom"></i>
            </div>

            <div class="group" v-show="isShow">
              <div
                class="layout"
                v-show="index + 1 != layout"
                v-for="(item, index) in maxLayout"
                :key="index"
              >
                <div
                  @click="choose(index)"
                  v-for="n in (index + 1) * (index + 1)"
                  :key="n"
                  :style="{
                    width: `calc((100% - 1px * (${index + 1} - 1)) / ${
                      index + 1
                    })`,
                    height: `calc((100% - 1px * (${index + 1} - 1)) / ${
                      index + 1
                    })`,
                    backgroundColor: '#404446'
                  }"
                ></div>
              </div>
            </div>
          </div>
          <div class="play">
            <el-tooltip
              class="item"
              effect="dark"
              content="第一个"
              placement="top"
            >
              <img
                @click="home"
                :src="require('@/assets/svgs/centerctl/videoSur/last.svg')"
                alt=""
              />
            </el-tooltip>
            <el-tooltip
              class="item"
              effect="dark"
              content="上一个"
              placement="top"
            >
              <img
                @click="last"
                :src="
                  require('@/assets/svgs/centerctl/videoSur/fast-backward.svg')
                "
                alt=""
              />
            </el-tooltip>
            <el-tooltip
              class="item"
              effect="dark"
              content="播放/暂停"
              placement="top"
            >
              <img
                @click="playStop"
                :src="require('@/assets/svgs/centerctl/videoSur/play-stop.svg')"
                alt=""
              />
            </el-tooltip>
            <el-tooltip
              class="item"
              effect="dark"
              content="下一个"
              placement="top"
            >
              <img
                @click="next"
                :src="
                  require('@/assets/svgs/centerctl/videoSur/fast-forward.svg')
                "
                alt=""
              />
            </el-tooltip>
            <el-tooltip
              class="item"
              effect="dark"
              content="最后一个"
              placement="top"
            >
              <img
                @click="end"
                :src="require('@/assets/svgs/centerctl/videoSur/next.svg')"
                alt=""
              />
            </el-tooltip>
          </div>

          <div class="video-handle">
            <img
              :src="require('@/assets/svgs/centerctl/videoSur/volume-x.svg')"
              alt=""
            />
            <img
              :src="require('@/assets/svgs/centerctl/videoSur/big.svg')"
              alt=""
            />
          </div>
        </div>
      </div>
    </div>
    <div style="height: 100%; padding: 0">
      <div class="deviceInfo">
        <div class="frame-48095487">
          <div class="div">设备信息</div>
        </div>
        <div class="row">
          <div class="div">摄像机名称</div>
          <div class="name">{{ camera.name }}</div>
        </div>
        <div class="row">
          <div class="div">摄像机编号</div>
          <div class="div">{{ camera.deviceCode }}</div>
        </div>
        <div class="row">
          <div class="div">设备品牌</div>
          <div class="div">{{ camera.brandName }}</div>
        </div>
        <div class="row">
          <div class="div">设备型号</div>
          <div class="div">{{ camera.modelName }}</div>
        </div>
      </div>

      <div class="handle">
        <direction @handle="handle" />

        <div class="slider">
          <el-slider
            v-model="slider"
            :min="1"
            :max="7"
            style="width: 154px"
          ></el-slider>
          <div class="sliderNum">{{ slider }}</div>
        </div>

        <div class="moreHandle">
          <div class="row">
            <div class="item normal">
              <el-tooltip effect="dark" content="开关灯" placement="top">
                <img
                  :src="
                    require('@/assets/svgs/isp/ispRealTime/video/light.svg')
                  "
                  alt=""
                  @click="switchLamp(camera.deviceCode)"
                />
              </el-tooltip>
            </div>
            <div class="item">
              <img
                :src="require('@/assets/svgs/isp/ispRealTime/video/yushua.svg')"
                alt=""
              />
            </div>
            <div class="item">
              <img
                :src="require('@/assets/svgs/isp/ispRealTime/video/jvjiao.svg')"
                alt=""
              />
            </div>
            <div class="item">
              <img
                :src="
                  require('@/assets/svgs/isp/ispRealTime/video/chushihua.svg')
                "
                alt=""
              />
            </div>
            <div class="item">
              <img
                :src="require('@/assets/svgs/isp/ispRealTime/video/menu.svg')"
                alt=""
              />
            </div>
          </div>

          <div class="line"></div>

          <div class="row">
            <div class="item normal" v-loading="screenshotVal">
              <el-tooltip effect="dark" content="截图" placement="top">
                <img
                  @click="screenshot(camera.deviceCode)"
                  :src="require('@/assets/svgs/isp/ispRealTime/video/cw.svg')"
                  alt=""
                />
              </el-tooltip>
            </div>
            <div class="item">
              <img
                :src="require('@/assets/svgs/isp/ispRealTime/video/3d.svg')"
                alt=""
              />
            </div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
          </div>
        </div>

        <PresetPositions
          :PresetList="PresetList"
          :deviceCode="deviceCode"
          @getPreset="getPreset"
        ></PresetPositions>
      </div>
    </div>
  </div>
</template>

<script>
  import PresetPositions from './components/Preset-positions.vue';
  import monitorList from './components/monitorList.vue';
  import direction from './components/direction.vue';
  import myVideo from '../components/video.vue';
  import * as realTime from '@/api/isp/ispRealtime/monitor/index';
  import * as deviceApi from '@/api/isp/deviceManage/robot';
  // import FLVPlayer from "./FLVPlayer.vue";
  export default {
    name: 'MonitorPage',
    components: {
      PresetPositions,
      monitorList,
      direction,
      myVideo
    },
    data() {
      return {
        layout: 1,
        loading: false,
        videoList: [],
        carouselIndex: 0,
        isShow: false,
        deviceCode: undefined,
        camera: {},
        stopList: [],
        slider: 1,
        screenshotVal: false,
        PresetList: [],
        codeList: [],
        monitorData: []
      };
    },
    beforeDestroy() {
      if (this.deviceCode) {
        realTime.delStreamProxy(this.deviceCode);
      }
    },
    computed: {
      maxLayout() {
        if (this.videoList.length > 8) {
          return 4;
        } else if (this.videoList.length > 3) {
          return 3;
        } else if (this.videoList.length > 1) {
          return 2;
        } else {
          return 1;
        }
      },
      count() {
        return this.videoList.length;
      },
      pageNum() {
        let num = this.count / (this.layout * this.layout);
        return Math.ceil(num);
      },
      itemStyle() {
        return {
          width: `calc((100% - 10px * (${this.layout} - 1)) / ${this.layout})`,
          height: `calc((100% - 10px * (${this.layout} - 1)) / ${this.layout})`
        };
      }
    },
    watch: {
      deviceCode(val, oldVal) {
        if (oldVal) {
          realTime.delStreamProxy(oldVal);
        }
        this.getPreset();
      }
    },
    mounted() {},
    methods: {
      setLoading(loading) {
        this.loading = loading;
      },
      itemNum(pageIndex) {
        if (this.pageNum != 1 && pageIndex == this.pageNum - 1) {
          return this.count - this.layout * this.layout * (this.pageNum - 1);
        } else if (this.pageNum == 1) {
          return this.count;
        } else {
          return this.layout * this.layout;
        }
      },
      carouselChange(index) {
        this.carouselIndex = index;
        if (this.layout == 1) this.getClickId(this.monitorData[index]);
      },
      toggle(e) {
        this.isShow = !this.isShow;
      },
      getFocus() {
        const layout = document.getElementById('layout');
        if (layout) layout.focus();
      },
      blur() {
        this.isShow = false;
      },
      choose(index) {
        this.layout = index + 1;
        this.isShow = false;
      },
      home() {
        this.carouselIndex = 0;
        this.$refs.carouselRef && this.$refs.carouselRef.setActiveItem(0);
      },
      last() {
        if (this.carouselIndex > 0) {
          this.carouselIndex--;
          this.$refs.carouselRef &&
            this.$refs.carouselRef.setActiveItem(this.carouselIndex);
        } else {
          this.carouselIndex = this.pageNum - 1;
          this.$refs.carouselRef &&
            this.$refs.carouselRef.setActiveItem(this.pageNum - 1);
        }
      },
      next() {
        if (this.carouselIndex < this.pageNum - 1) {
          this.carouselIndex++;
          this.$refs.carouselRef &&
            this.$refs.carouselRef.setActiveItem(this.carouselIndex);
        } else {
          this.carouselIndex = 0;
          this.$refs.carouselRef && this.$refs.carouselRef.setActiveItem(0);
        }
      },
      end() {
        this.carouselIndex = this.pageNum - 1;
        this.$refs.carouselRef &&
          this.$refs.carouselRef.setActiveItem(this.pageNum - 1);
      },
      handleScreenshot(index, e) {
        const videoPlayback = document.getElementById('video' + index);
        if (!videoPlayback) return;
        const canvas = document.createElement('canvas');
        canvas.width = videoPlayback.videoWidth;
        canvas.height = videoPlayback.videoHeight;
        const ctx = canvas.getContext('2d');
        if (ctx) {
          ctx.drawImage(videoPlayback, 0, 0, canvas.width, canvas.height);
        }
        const img = new Image();
        img.src = canvas.toDataURL('image/png');
        const a = document.createElement('a');
        a.href = img.src;
        a.download = 'screenshot.png';
        document.body.appendChild(a);
        a.click();
        document.body.removeChild(a);
        e.stopPropagation();
      },
      async handle(SDK) {
        if (SDK == 'reset') {
          let params = {
            cameraCode: this.deviceCode,
            wPresetNum: 34,
            command: 'GOTO_PRESET'
          };
          const res = await realTime.oprPreset(params);
          if (res == 'SUCCESS') {
            this.$message.success('操作成功');
          } else {
            this.$message.error(res);
          }
          return;
        }
        let res = await realTime.playControl({
          cameraCode: this.deviceCode,
          mill: this.slider * 1000,
          command: SDK
        });
        if (res == 'SUCCESS') {
          this.$message.success('操作成功');
        } else {
          this.$message.error(res);
        }
      },
      async switchLamp(code) {
        if (!code) return this.$message.warning('当前设备异常');
        const data = await deviceApi.playControl({
          cameraCode: code,
          mill: 1000,
          command: 'LIGHT_PWRON'
        });
        if (data == 'SUCCESS') {
          this.$message.success('指令下发成功');
        } else {
          this.$message.error('指令下发失败');
        }
      },
      async screenshot(code) {
        if (!code) return this.$message.warning('当前设备异常');
        this.screenshotVal = true;
        try {
          const data = await deviceApi.catchPic(code);
          if (data.size < 100) {
            this.$message.warning('截图失败');
          } else {
            const dlink = document.createElement('a');
            dlink.download = '截图.png';
            dlink.style.display = 'none';
            dlink.href = URL.createObjectURL(data);
            document.body.appendChild(dlink);
            dlink.click();
            URL.revokeObjectURL(dlink.href);
            document.body.removeChild(dlink);
            this.$message.success('截图下载成功');
          }
        } finally {
          this.screenshotVal = false;
        }
      },
      playStop() {
        let index = Math.floor(
          this.videoList.findIndex(
            (item) => item.cameraCode == this.deviceCode
          ) /
            (this.layout * this.layout)
        );
        let videoElement = document.getElementById('video' + index);
        if (videoElement && videoElement.paused) {
          videoElement.play();
          this.stopList = this.stopList.filter((item) => item != index);
        } else {
          if (videoElement) videoElement.pause();
          this.stopList.push(index);
        }
      },
      play(index) {
        let videoElement = document.getElementById('video' + index);
        if (videoElement) videoElement.play();
        this.stopList = this.stopList.filter((item) => item != index);
      },
      async getCameraList(list) {
        this.monitorData = list;
        list.forEach((item) => {
          this.codeList.push(item.deviceCode);
        });

        // this.getClickId(list[0]);
      },
      async getClickId(device) {
        this.camera = device;
        this.deviceCode = device.deviceCode;
        await this.getCameraUrl();

        let index = Math.floor(
          this.videoList.findIndex(
            (item) => item.cameraCode == device.deviceCode
          ) /
            (this.layout * this.layout)
        );
        this.$refs.carouselRef && this.$refs.carouselRef.setActiveItem(index);
        this.carouselIndex = index;
      },
      async getPreset() {
        const res = await realTime.getPreset(this.deviceCode);
        this.PresetList = res;
      },
      async getCameraUrl() {
        await realTime.delStreamProxy(this.deviceCode);
        const res = await realTime.getCameraUrl([this.deviceCode]);
        this.videoList = res;
        console.log(this.videoList);
      }
    }
  };
</script>

<style lang="scss" scoped>
  .inspection {
    display: flex;
    width: 100%;
    .left {
      padding-right: 0;
      height: 100%;
      width: 232px;
    }
    .center {
      width: calc(100%);
      padding-left: 10px;
      padding-right: 10px;
      padding-bottom: 20px;
    }
  }

  .missonList,
  .missonList * {
    box-sizing: border-box;
  }
  .missonList {
    background: #fff;
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-items: flex-start;
    justify-content: flex-start;
    align-self: stretch;
    flex-shrink: 0;
    position: relative;
    width: 232px;
    .list {
      width: 100%;
      ::v-deep .el-scrollbar__thumb {
        display: none;
      }
    }
    .title {
      background: #f2f4f5;
      display: flex;
      flex-direction: row;
      gap: 1px;
      align-items: center;
      justify-content: center;
      align-self: stretch;
      flex-shrink: 0;
      height: 24px;
      position: relative;
      > div {
        color: #404446;
        text-align: left;
        font-family: 'Alibaba PuHuiTi 2.0', sans-serif;
        font-size: 14px;
        line-height: 16px;
        font-weight: 400;
        position: relative;
      }
    }

    .row {
      padding: 4px 0px 4px 0px;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
      align-self: stretch;
      flex-shrink: 0;
      position: relative;
      &:hover {
        background: linear-gradient(
          270deg,
          rgba(44, 138, 224, 0.44) 0%,
          rgba(44, 138, 224, 0.22) 119.59%
        );
      }
    }
    .name {
      color: rgb(64, 68, 70);
      text-align: left;
      font-family: var(
        --small-none-regular-font-family,
        'Alibaba PuHuiTi 2.0',
        sans-serif
      );
      font-size: var(--small-none-regular-font-size, 14px);
      line-height: var(--small-none-regular-line-height, 16px);
      font-weight: var(--small-none-regular-font-weight, 400);
      position: relative;
    }
    .done {
      color: #32a2d4;
      text-align: left;
      font-family: var(
        --small-none-regular-font-family,
        'Alibaba PuHuiTi 2.0',
        sans-serif
      );
      font-size: var(--small-none-regular-font-size, 14px);
      line-height: var(--small-none-regular-line-height, 16px);
      font-weight: var(--small-none-regular-font-weight, 400);
      position: relative;
    }
    .doing {
      color: #ffb323;
      text-align: left;
      font-family: var(
        --small-none-regular-font-family,
        'Alibaba PuHuiTi 2.0',
        sans-serif
      );
      font-size: var(--small-none-regular-font-size, 14px);
      line-height: var(--small-none-regular-line-height, 16px);
      font-weight: var(--small-none-regular-font-weight, 400);
      position: relative;
    }
    .todo {
      color: #ff4d4f;
      text-align: left;
      font-family: var(
        --small-none-regular-font-family,
        'Alibaba PuHuiTi 2.0',
        sans-serif
      );
      font-size: var(--small-none-regular-font-size, 14px);
      line-height: var(--small-none-regular-line-height, 16px);
      font-weight: var(--small-none-regular-font-weight, 400);
      position: relative;
    }
  }
  .tree {
    background-color: #fff;
    margin-top: 16px;
  }

  .el-carousel {
    ::v-deep .el-carousel__container {
      height: calc(100% - 27px);
    }
  }
  .page {
    display: flex;
    align-content: space-between;
    flex-wrap: wrap;
    gap: 5px;
    height: 100%;
    .videoItem {
      border: 4px solid transparent;
      position: relative;
      .mask1 {
        position: absolute;
        top: 0;
        left: 0;
        width: 50px;
        height: 20px;
        z-index: 111;
      }
      .mask2 {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 50px;
        height: 50px;
        z-index: 111;
        background-color: #000000d3;
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        .play {
          width: 70%;
          transform: translateX(3px);
        }
      }
    }
    .active {
      border: 4px solid #2c8ae0;
    }
    img {
      vertical-align: middle;
    }
  }

  .deviceInfo,
  .deviceInfo * {
    box-sizing: border-box;
  }
  .deviceInfo {
    background: #fff;
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-items: flex-start;
    justify-content: flex-start;
    align-self: stretch;
    flex-shrink: 0;
    position: relative;
    width: 232px;
    .frame-48095487 {
      background: #f2f4f5;
      display: flex;
      flex-direction: row;
      gap: 1px;
      align-items: center;
      justify-content: center;
      align-self: stretch;
      flex-shrink: 0;
      height: 24px;
      position: relative;
    }
    .div {
      color: rgb(64, 68, 70);
      text-align: left;
      font-family: 'Alibaba PuHuiTi 2.0', sans-serif;
      font-size: 14px;
      line-height: 16px;
      font-weight: 400;
      position: relative;
    }
    .row {
      padding: 4px 0px 4px 0px;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
      align-self: stretch;
      flex-shrink: 0;
      position: relative;
    }
    .name {
      color: #32a2d4;
      text-align: left;
      font-family: 'Alibaba PuHuiTi 2.0', sans-serif;
      font-size: 14px;
      line-height: 16px;
      font-weight: 400;
      position: relative;
    }
  }
  .handle {
    display: flex;
    padding: 10px;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    flex: 1 0 0;
    background: #fff;
    margin-top: 10px;
  }
  .slider {
    display: flex;
    justify-content: space-between;
    align-items: center;
    align-self: stretch;
    padding-left: 10px;
    .sliderNum {
      display: flex;
      height: 17px;
      padding: 10px;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      gap: 10px;
      border: 1px solid #cdcfd0;
      width: 29px;
      box-sizing: border-box;
      ::v-deep .el-slider__button {
        background-color: #fff;
        border-color: #ff7b30;
      }
    }
  }
  .moreHandle {
    display: flex;
    width: 200px;
    padding: 5px 0px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 4px;
    position: relative;
    border-radius: 4px;
    border: 2px solid #e3e5e6;
    .row {
      display: flex;
      align-items: flex-start;
      align-self: stretch;
    }
    .line {
      width: 180px;
      height: 1px;
      background: #e3e5e6;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
    .item {
      display: flex;
      height: 21px;
      padding: 0px 9px;
      justify-content: center;
      align-items: center;
      width: 39px;
      cursor: not-allowed;
      border-left: 1px solid #e3e5e6;
      border-right: 1px solid #e3e5e6;
      &:first-child {
        border-left: 0;
      }
      &:last-child {
        border-right: 0;
      }
    }
    .normal {
      cursor: pointer;
    }
  }

  .center-handle {
    display: flex;
    height: 42px;
    justify-content: space-between;
    align-items: center;
    align-self: stretch;
    width: 100%;
    .layout-type {
      display: flex;
      width: 98px;
      align-items: center;
      position: relative;
      > div {
        display: flex;
      }
    }

    .play {
      display: flex;
      align-items: flex-start;
      gap: 24px;
    }

    .video-handle {
      display: flex;
      align-items: flex-end;
      gap: 16px;
    }
  }
  .monitor {
    height: 100%;
    padding: 10px;
  }
  .layout {
    width: 20px;
    height: 15px;
    padding: 1px;
    display: flex;
    flex-wrap: wrap;
    gap: 1px;
    border: 1px #404446 solid;
  }
  .group {
    display: flex;
    padding: 4px;
    align-items: flex-start;
    gap: 4px;
    position: absolute;
    top: 20px;
    border-radius: 4px;
    border: 0.5px solid #404446;
    background: #fff;
  }
</style>