1 year ago · b97ba3a882
--- a/index.html
+++ b/index.html
@@ -6,6 +6,8 @@
 
				     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
			
 
				     <title>海南社会管理信息化平台</title>
			
 
				     <script src="/config.js"></script>
			
 
				+    <script src="/kmedia.js"></script>
			
 
				+<!--    <script src="/kmedia-basic.js"></script>-->
			
 
				   </head>
			
 
				   <body>
			
 
				     <div id="app"></div>
			
--- a/src/out/kmedia-basic.js
+++ b/src/out/kmedia-basic.js
--- a/src/out/kmedia.js
+++ b/src/out/kmedia.js
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -30,6 +30,10 @@ const routes = [
 
				         path: '/video-resource/important-area-focus',
			
 
				         component: () => import('@/views/screen/video-resource/important-area-focus.vue')
			
 
				     },
			
 
				+    {
			
 
				+        path: '/video-resource/keda',
			
 
				+        component: () => import('@/views/screen/video-resource/keda/demo.vue')
			
 
				+    },
			
 
				 ]
			
 
				 
			
 
				 const router = createRouter({
			
--- a/src/views/screen/video-resource/keda/VideoDialog.vue
+++ b/src/views/screen/video-resource/keda/VideoDialog.vue
@@ -0,0 +1,139 @@
 
				+<template>
			
 
				+  <!-- 视频播放弹窗 -->
			
 
				+  <div class="video_dialog" ref="dialog2">
			
 
				+    <div class="dia_title">
			
 
				+      <div class="txt">视频详情</div>
			
 
				+      <div class="btns">
			
 
				+        <img @click="fullScreen" src="/image/icon/full_screen.png" alt/>
			
 
				+        <!-- <span class="close">×</span> -->
			
 
				+        <img @click="closedialog2" src="/image/icon/close.png"/>
			
 
				+      </div>
			
 
				+    </div>
			
 
				+    <div class="container" id="container">
			
 
				+      <!-- <video :src="videoURL" autoplay loop muted></video> -->
			
 
				+    </div>
			
 
				+  </div>
			
 
				+</template>
			
 
				+
			
 
				+<script>
			
 
				+import outputOptions from "./index.js";
			
 
				+
			
 
				+export default {
			
 
				+  name: "VideoDialog",
			
 
				+  components: {},
			
 
				+  props: {},
			
 
				+  data() {
			
 
				+    return {
			
 
				+      isFull: false,
			
 
				+      video: ''
			
 
				+    };
			
 
				+  },
			
 
				+  computed: {
			
 
				+    // 是否显示视频详情弹窗 和 视频源
			
 
				+    // ...mapState(["videoURL"]),
			
 
				+    // videoURL() {
			
 
				+    //   return JSON.parse(JSON.stringify(this.$store.state.videoURL));
			
 
				+    // }
			
 
				+
			
 
				+  },
			
 
				+  watch: {
			
 
				+    videoURL(val) {
			
 
				+      this.myfunction2();
			
 
				+      this.myfunction(val)
			
 
				+    }
			
 
				+  },
			
 
				+  mounted() {
			
 
				+    this.myfunction(this.videoURL);
			
 
				+  },
			
 
				+  methods: {
			
 
				+    myfunction(videos) {
			
 
				+      this.video = new KMedia(outputOptions("#container", videos));
			
 
				+    },
			
 
				+    myfunction2() {
			
 
				+      if (this.video != null) {
			
 
				+        this.video.closeMedia();
			
 
				+      }
			
 
				+      this.video = null;
			
 
				+      document.getElementById('container').innerHTML = "";
			
 
				+    },
			
 
				+    // 放大视频弹窗
			
 
				+    fullScreen() {
			
 
				+      let dialog2 = this.$refs.dialog2;
			
 
				+      if (this.isFull) {
			
 
				+        dialog2.classList.remove("dialog_big");
			
 
				+      } else {
			
 
				+        dialog2.classList.add("dialog_big");
			
 
				+        dialog2.style.left = "2853px";
			
 
				+        dialog2.style.top = "90px";
			
 
				+      }
			
 
				+      this.isFull = !this.isFull;
			
 
				+    },
			
 
				+    // 关闭视频弹窗
			
 
				+    closedialog2() {
			
 
				+      this.myfunction2();
			
 
				+      this.$store.commit("changeVideoURL", null);
			
 
				+    }
			
 
				+  },
			
 
				+};
			
 
				+</script>
			
 
				+
			
 
				+<style lang="less" scoped>
			
 
				+.video_dialog {
			
 
				+  z-index: 10099;
			
 
				+  pointer-events: all;
			
 
				+  width: 800px;
			
 
				+  height: 500px;
			
 
				+  z-index: 10;
			
 
				+  left: 2930px;
			
 
				+  top: 300px;
			
 
				+  position: absolute;
			
 
				+  display: flex;
			
 
				+  background-color: rgba(9, 24, 40, 0.95);
			
 
				+  flex-direction: column;
			
 
				+
			
 
				+  .dia_title {
			
 
				+    height: 40px;
			
 
				+    flex-shrink: 0;
			
 
				+    display: flex;
			
 
				+    background: linear-gradient(to right, #00cc66, #0085b2);
			
 
				+    color: #fff;
			
 
				+    font-size: 24px;
			
 
				+    line-height: 40px;
			
 
				+    font-weight: bold;
			
 
				+    padding: 0 15px;
			
 
				+    flex-shrink: 0;
			
 
				+    justify-content: space-between;
			
 
				+
			
 
				+    .close {
			
 
				+      font-size: 30px;
			
 
				+    }
			
 
				+
			
 
				+    .btns {
			
 
				+      width: 50px;
			
 
				+      display: flex;
			
 
				+      justify-content: space-between;
			
 
				+      align-items: center;
			
 
				+    }
			
 
				+  }
			
 
				+
			
 
				+  .container {
			
 
				+    flex: 1 1 100%;
			
 
				+
			
 
				+    video {
			
 
				+      display: block;
			
 
				+      width: 100%;
			
 
				+      height: 100%;
			
 
				+    }
			
 
				+  }
			
 
				+}
			
 
				+
			
 
				+.dialog_big {
			
 
				+  width: 980px;
			
 
				+  height: 980px;
			
 
				+  // transform: translate(-90px, -240px);
			
 
				+}
			
 
				+
			
 
				+.hide {
			
 
				+  display: none;
			
 
				+}
			
 
				+</style>
			
--- a/src/views/screen/video-resource/keda/demo.vue
+++ b/src/views/screen/video-resource/keda/demo.vue
@@ -0,0 +1,77 @@
 
				+<template>
			
 
				+  <div class="main">
			
 
				+    <h1>科达demo</h1>
			
 
				+    <div class="list">
			
 
				+      <template v-for="item in videoList">
			
 
				+        <KedaCom :videoCode="item"/>
			
 
				+      </template>
			
 
				+    </div>
			
 
				+  </div>
			
 
				+</template>
			
 
				+
			
 
				+<script lang="ts">
			
 
				+import {
			
 
				+  defineComponent,
			
 
				+  computed,
			
 
				+  onMounted,
			
 
				+  ref,
			
 
				+  reactive,
			
 
				+  watch,
			
 
				+  getCurrentInstance,
			
 
				+  ComponentInternalInstance,
			
 
				+  toRefs,
			
 
				+  nextTick
			
 
				+} from 'vue'
			
 
				+import {useStore} from 'vuex'
			
 
				+import {useRouter, useRoute} from 'vue-router'
			
 
				+import outputOptions from "./options";
			
 
				+import KedaCom from './keda-com.vue'
			
 
				+
			
 
				+export default defineComponent({
			
 
				+  name: '',
			
 
				+  components: {KedaCom},
			
 
				+  setup() {
			
 
				+    const store = useStore();
			
 
				+    const router = useRouter();
			
 
				+    const route = useRoute();
			
 
				+    const that = (getCurrentInstance() as ComponentInternalInstance).appContext.config.globalProperties
			
 
				+    const state = reactive({
			
 
				+      videoList: []
			
 
				+    })
			
 
				+    onMounted(() => {
			
 
				+      window.addEventListener("message", function (event) {
			
 
				+        const result = event.data;
			
 
				+        if (result.videoData) {
			
 
				+          state.videoList = result.videoData
			
 
				+        }
			
 
				+      });
			
 
				+      window.parent.postMessage({
			
 
				+        from: window.name,
			
 
				+        variable: "videoIframeLoading",
			
 
				+        value: true,
			
 
				+      }, "*")
			
 
				+    })
			
 
				+    return {
			
 
				+      ...toRefs(state),
			
 
				+    }
			
 
				+  },
			
 
				+})
			
 
				+</script>
			
 
				+
			
 
				+<style scoped lang="scss">
			
 
				+.main {
			
 
				+  width: 100%;
			
 
				+  height: 100%;
			
 
				+  padding: 20px;
			
 
				+
			
 
				+  .list {
			
 
				+    display: flex;
			
 
				+    flex-wrap: wrap;
			
 
				+
			
 
				+    > div {
			
 
				+      margin-right: 10px;
			
 
				+      margin-bottom: 10px;
			
 
				+    }
			
 
				+  }
			
 
				+}
			
 
				+</style>
			
--- a/src/views/screen/video-resource/keda/index.js
+++ b/src/views/screen/video-resource/keda/index.js
@@ -0,0 +1,55 @@
 
				+const option = {
			
 
				+  selector: "#videOne",
			
 
				+  mediaUrl: "./static/demo.mp4",
			
 
				+  mediaType: "video",
			
 
				+  playType: "liveStreaming",
			
 
				+  progressDisplayTime: false,
			
 
				+  theme: "blue",
			
 
				+  autoplay: true,
			
 
				+  muted: true,
			
 
				+  videoFit:'cover',
			
 
				+  noBorder: true,
			
 
				+  hideControlsBar: true,
			
 
				+  tools: [
			
 
				+    "backward",
			
 
				+    "play",
			
 
				+    "forward",
			
 
				+    "timings",
			
 
				+    "playbackRate",
			
 
				+    "backplay",
			
 
				+    "ptz",
			
 
				+    "videoClip",
			
 
				+    "videoRecorder",
			
 
				+    "digitalZoom",
			
 
				+    "screenSplit",
			
 
				+    "snapshot",
			
 
				+    "multiShot",
			
 
				+    "imgControl",
			
 
				+    "loop",
			
 
				+    "volume",
			
 
				+    "requestFullscreen"
			
 
				+  ],
			
 
				+  restore: false,
			
 
				+  loading: {
			
 
				+    beforeStream: "初始化中",
			
 
				+    beforePicture: "视频加载中",
			
 
				+    timeout: "视频加载已超时"
			
 
				+  },
			
 
				+  mediaInfo: {
			
 
				+    file: {},
			
 
				+    liveStreaming: {
			
 
				+      websocketUrl: "ws://59.212.10.165:8081",
			
 
				+      devId: "46040052001321000402"
			
 
				+    },
			
 
				+    nonLiveStreaming: {}
			
 
				+  },
			
 
				+  onload: function () {}
			
 
				+};
			
 
				+
			
 
				+function outputOptions(selector, devId) {
			
 
				+  option.selector = selector;
			
 
				+  option.mediaInfo.liveStreaming.devId = devId;
			
 
				+  return option;
			
 
				+}
			
 
				+
			
 
				+export default outputOptions;
			
--- a/src/views/screen/video-resource/keda/keda-com.vue
+++ b/src/views/screen/video-resource/keda/keda-com.vue
@@ -0,0 +1,71 @@
 
				+<template>
			
 
				+  <div class="keda-com">
			
 
				+    <div class="container" ref="ref_video"/>
			
 
				+  </div>
			
 
				+</template>
			
 
				+
			
 
				+<script lang="ts">
			
 
				+import {
			
 
				+  defineComponent,
			
 
				+  computed,
			
 
				+  onMounted,
			
 
				+  ref,
			
 
				+  reactive,
			
 
				+  watch,
			
 
				+  getCurrentInstance,
			
 
				+  ComponentInternalInstance,
			
 
				+  toRefs,
			
 
				+  nextTick
			
 
				+} from 'vue'
			
 
				+import {useStore} from 'vuex'
			
 
				+import {useRouter, useRoute} from 'vue-router'
			
 
				+import outputOptions from "./options";
			
 
				+
			
 
				+export default defineComponent({
			
 
				+  name: '',
			
 
				+  components: {},
			
 
				+  props: {
			
 
				+    videoCode: { required: true, type: String }
			
 
				+  },
			
 
				+  setup(props) {
			
 
				+    const store = useStore();
			
 
				+    const router = useRouter();
			
 
				+    const route = useRoute();
			
 
				+    const that = (getCurrentInstance() as ComponentInternalInstance).appContext.config.globalProperties
			
 
				+    const state = reactive({
			
 
				+      video: null,
			
 
				+    })
			
 
				+    const ref_video = ref()
			
 
				+    watch(() => props.videoCode, (n) => {
			
 
				+      console.log(n)
			
 
				+      if (n) {
			
 
				+        initVideo()
			
 
				+      }
			
 
				+    })
			
 
				+    const initVideo = () => {
			
 
				+      if (props.videoCode) {
			
 
				+        state.video = new KMedia(outputOptions(ref_video.value, props.videoCode));
			
 
				+      }
			
 
				+    }
			
 
				+    onMounted(() => {
			
 
				+      initVideo()
			
 
				+    })
			
 
				+    return {
			
 
				+      ...toRefs(state),
			
 
				+      ref_video
			
 
				+    }
			
 
				+  },
			
 
				+})
			
 
				+</script>
			
 
				+
			
 
				+<style scoped lang="scss">
			
 
				+  .keda-com {
			
 
				+    width: 400px;
			
 
				+    height: 300px;
			
 
				+    border: 1px solid;
			
 
				+    display: flex;
			
 
				+    .container {
			
 
				+      flex: 1;
			
 
				+    }
			
 
				+  }
			
 
				+</style>
			
--- a/src/views/screen/video-resource/keda/kmedia-basic.js
+++ b/src/views/screen/video-resource/keda/kmedia-basic.js
--- a/src/views/screen/video-resource/keda/kmedia.js
+++ b/src/views/screen/video-resource/keda/kmedia.js
--- a/src/views/screen/video-resource/keda/options.ts
+++ b/src/views/screen/video-resource/keda/options.ts
@@ -0,0 +1,55 @@
 
				+const option = {
			
 
				+  selector: "#videOne",
			
 
				+  mediaUrl: "./static/demo.mp4",
			
 
				+  mediaType: "video",
			
 
				+  playType: "liveStreaming",
			
 
				+  progressDisplayTime: false,
			
 
				+  theme: "blue",
			
 
				+  autoplay: true,
			
 
				+  muted: true,
			
 
				+  videoFit:'cover',
			
 
				+  noBorder: true,
			
 
				+  hideControlsBar: true,
			
 
				+  tools: [
			
 
				+    "backward",
			
 
				+    "play",
			
 
				+    "forward",
			
 
				+    "timings",
			
 
				+    "playbackRate",
			
 
				+    "backplay",
			
 
				+    "ptz",
			
 
				+    "videoClip",
			
 
				+    "videoRecorder",
			
 
				+    "digitalZoom",
			
 
				+    "screenSplit",
			
 
				+    "snapshot",
			
 
				+    "multiShot",
			
 
				+    "imgControl",
			
 
				+    "loop",
			
 
				+    "volume",
			
 
				+    "requestFullscreen"
			
 
				+  ],
			
 
				+  restore: false,
			
 
				+  loading: {
			
 
				+    beforeStream: "初始化中",
			
 
				+    beforePicture: "视频加载中",
			
 
				+    timeout: "视频加载已超时"
			
 
				+  },
			
 
				+  mediaInfo: {
			
 
				+    file: {},
			
 
				+    liveStreaming: {
			
 
				+      websocketUrl: "ws://59.212.10.165:8081",
			
 
				+      devId: "46040052001321000402"
			
 
				+    },
			
 
				+    nonLiveStreaming: {}
			
 
				+  },
			
 
				+  onload: function () {}
			
 
				+};
			
 
				+
			
 
				+function outputOptions(selector: any, devId: string) {
			
 
				+  option.selector = selector;
			
 
				+  option.mediaInfo.liveStreaming.devId = devId;
			
 
				+  return option;
			
 
				+}
			
 
				+
			
 
				+export default outputOptions;
			
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -21,8 +21,8 @@ export default defineConfig({
 
				     proxy: {
			
 
				       '/api/': {
			
 
				         // target: 'http://localhost:8080/',
			
 
				-        target: 'http://127.0.0.1:3001/',
			
 
				-        // target: 'http://10.110.35.47/',
			
 
				+        // target: 'http://127.0.0.1:3001/',
			
 
				+        target: 'http://10.110.35.47/',
			
 
				         changeOrigin: true,
			
 
				         rewrite: path => {
			
 
				           return path.replace(/^\/api/, '')
			
@@ -30,8 +30,8 @@ export default defineConfig({
 
				       },
			
 
				       '/api-gateway/': {
			
 
				         // target: 'http://localhost:8080/',
			
 
				-        target: 'http://127.0.0.1:3002/',
			
 
				-        // target: 'http://10.110.32.62/',
			
 
				+        // target: 'http://127.0.0.1:3002/',
			
 
				+        target: 'http://10.110.32.62/',
			
 
				         changeOrigin: true,
			
 
				         rewrite: path => {
			
 
				           return path.replace(/^\/api-gateway/, '')