iot-front-ui/src/components/security/alarm/securityAlarmGrid.vue

<template>
  <div class="securityAlarmGrid">
    <Card title="宫格模式" style="height: 99%;padding-bottom: 12px">
      <div style="height: 100%;margin: 0 15px 15px">
        <a-row style="height: 100%">
          <a-col :span="4" style="height: 90%">
            <div style="padding-left: 15px; height: 100%">
              <SecurityDeviceSelect :tree-data="treeData"></SecurityDeviceSelect>
            </div>
          </a-col>
          <a-col :span="20" style="height: 90%">
            <div style="height: 100%">
              <HkwsCamera />
            </div>
          </a-col>
        </a-row>
      </div>
    </Card>
  </div>
</template>

<script>
import HkwsCamera from "@/components/security/camera/hkwsCamera.vue";
import SecurityDeviceSelect from "@/components/security/common/securityDeviceSelect.vue";

export default {
  components: {
    SecurityDeviceSelect,
    HkwsCamera
  },
  data() {
    return {
      gridConfig: {
        span: 8,
        num: 1,
      },
      playerIdx: 1,
      treeData: [
        {
          title: '一层大厅',
          key: '1',
          selectable: false,
          children: [
            {
              title: '大厅正门',
              key: '1-0',
              slots: {
                icon: 'camera',
              },
            },
            {
              title: '1-2',
              key: '1-2',
              slots: {
                icon: 'camera',
              },
            },{
              title: '1-3',
              key: '1-3',
              slots: {
                icon: 'camera',
              },
            }

          ],
        },
        {
          title: '2F',
          key: '2',
          selectable: false,
          children: [
            {
              title: '正门',
              key: '2-0',
              slots: {
                icon: 'camera',
              },
            },{
              title: '2-1',
              key: '2-1',
              slots: {
                icon: 'camera',
              },
            },{
              title: '2-2',
              key: '2-2',
              slots: {
                icon: 'camera',
              },
            }
          ],
        },
        {
          title: '3F',
          key: '3',
          selectable: false,
          children: [
            {
              title: '正门',
              key: '3-0',
              slots: {
                icon: 'camera',
              },
            },
            {
              title: '3-1',
              key: '3-1',
              slots: {
                icon: 'camera',
              },
            },
            {
              title: '3-2',
              key: '3-1',
              slots: {
                icon: 'camera',
              },
            }
          ],
        },
        {
          title: '4F',
          key: '4',
          selectable: false,
          children: [
            {
              title: '4-1',
              key: '4-1',
              slots: {
                icon: 'camera',
              },
            }
          ],
        },{
          title: '5F',
          key: '5',
          selectable: false,
          children: [
            {
              title: '5-1',
              key: '5-1',
              slots: {
                icon: 'camera',
              },
            }
          ],
        },{
          title: '6F',
          key: '6',
          selectable: false,
          children: [
            {
              title: '6-1',
              key: '6-1',
              slots: {
                icon: 'camera',
              },
            }
          ],
        },{
          title: '7F',
          key: '7',
          selectable: false,
          children: [
            {
              title: '7-1',
              key: '7-1',
              slots: {
                icon: 'camera',
              },
            }
          ],
        },
      ],
    }
  },
  methods: {
    shot(e) {
      // console.log(e)
      // send({code:'image',data:e})
      var base64ToBlob = function (code) {
        let parts = code.split(';base64,');
        let contentType = parts[0].split(':')[1];
        let raw = window.atob(parts[1]);
        let rawLength = raw.length;
        let uInt8Array = new Uint8Array(rawLength);
        for (let i = 0; i < rawLength; ++i) {
          uInt8Array[i] = raw.charCodeAt(i);
        }
        return new Blob([uInt8Array], {
          type: contentType
        });
      };
      let aLink = document.createElement('a');
      let blob = base64ToBlob(e); //new Blob([content]);
      let evt = document.createEvent("HTMLEvents");
      evt.initEvent("click", true, true); //initEvent 不加后两个参数在FF下会报错  事件类型，是否冒泡，是否阻止浏览器的默认行为
      aLink.download = '截图';
      aLink.href = URL.createObjectURL(blob);
      aLink.click();
    },
    destroy(idx) {
      console.log(idx);
      this.clear(idx.substring(idx.length - 1))
    },
  }
}
</script>

<style lang="less" scoped>
.securityAlarmGrid {
  width: 100%;
  height: 100%;
}
</style>