iot-front-ui/src/components/security/camera/hkwsCamera.vue

<template>
    <HikComp v-if="show" ref="hkws" class="hkws-camera" :playConfig.sync="playConfig"
             :nameId="jkInfo.nameId" :cameraIndexCode.sync="jkInfo.cameraIndexCode"/>

</template>

<script>
import apiSecurityCamera from "@/api/security/apiSecurityCamera";
import HikComp from "@/components/hkws/hikComp.vue";

export default {
    components: {HikComp},
    data() {
        return {
            show: false,
            jkInfo: {
                nameId: "playWnd1", // nameId 具有唯一性，否则无效，如果有多个，一定不能重复
                cameraIndexCode: "",  // 监控点编号
            }
        }
    },
    props: {
        cameraId: String,
        toolButtonIds: String,
        showToolbar: Boolean
    },
    watch: {
        cameraId: function (val) {
            this.jkInfo.cameraIndexCode = val;
            this.$refs.hkws.cameraConfig.cameraIndexCode = val;
            this.$refs.hkws.startPreview();
        }
    },
    computed: {
        playConfig: function () {
            return {
                appkey: "test",
                secret: "test",
                ip: "127.0.0.1",
                playMode: 0,
                port: 443,
                snapDir: "/SnapDir",
                videoDir: "/VideoDir",
                layout: "1x1",
                enableHTTPS: 1,
                encryptedFields: 'secret',
                showToolbar: this.showToolbar ? 1 : 0,
                showSmart: 0,
                buttonIDs: "",
                toolBarButtonIDs: "4097,4098",
            }
        }
    },
    mounted() {
        this.show = true;
        this.$nextTick(() => {
            if (this.cameraId && this.cameraId.length > 0) {
                this.jkInfo.cameraIndexCode = this.cameraId
            }
            if (this.toolButtonIds && this.toolButtonIds.length > 0) {
                this.playConfig.toolBarButtonIDs = this.toolButtonIds
            }
            this.getApiInfo()
        })
    },
    methods: {
        getApiInfo() {
            let app = this;
            apiSecurityCamera.getHkApi().then(res => {
                let split = res.host.split(":");
                this.playConfig.ip = split[0];
                this.playConfig.port = Number(split[1]);
                this.playConfig.appkey = res.appKey
                this.playConfig.secret = res.appSecret
                this.show = false;
                setTimeout(function () {
                    app.show = true;
                }, 100)
            }).catch(err => {
                this.$message.error('摄像头平台初始化失败')
            })
        },
    },
    beforeDestroy() {
        if (this.$refs.hkws && this.$refs.hkws.oWebControl) {
            this.$refs.hkws.oWebControl.JS_StopService('window')
                .then(() => {
                })
                .catch((err) => console.log(err))
            this.$refs.hkws.oWebControl.JS_DestroyWnd()
                .then(() => {
                })
                .catch((err) => console.log(err))
        }

    }
}
</script>

<style scoped>
.hkws-camera {
    width: 100%;
    height: 100%;
}
</style>