科达视频

src/router/index.ts

@@ -28,7 +28,7 @@ const routes = [
     },
     {
         path: '/video-resource/important-area-focus',
-        component: () => import('@/views/screen/video-resource/important-area-focus.vue')
+        component: () => import('@/views/screen/video-resource/important-area-focus-keda.vue')
     },
     {
         path: '/video-resource/keda',

src/views/screen/video-resource/important-area-focus-keda.vue

@@ -0,0 +1,209 @@
+<template>
+  <div class="important-area-focus">
+    <div class="left">
+      <template v-for="(item, index) in videoData">
+        <div class="list-item" :class="{active: currentInfo.areaType === item.areaType}" @click="currentInfo = item">
+          {{item.areaName}}
+        </div>
+      </template>
+    </div>
+    <div class="right">
+      <div class="right-title">{{ currentInfo.areaName }}</div>
+      <div class="right-content">
+        <template v-if="switchArea">
+          <template v-for="(item, index) in currentInfo.viseoRecords?.filter(v => v.code).filter((v, i) => i < 8)">
+            <div class="video-item" @dblclick.capture="fullScreen($event)" >
+              <div class="video-item-title">{{item.name}}</div>
+              <KedaCom class="video-keda" :video-code="item.code"/>
+            </div>
+          </template>
+        </template>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import {
+  defineComponent,
+  ref,
+  nextTick,
+  onMounted,
+  watch,
+  computed,
+  ComponentInternalInstance,
+  reactive,
+  toRefs,
+  getCurrentInstance
+} from 'vue'
+import {useStore} from 'vuex'
+import axios from "axios";
+import {ElMessage, ElMessageBox} from "element-plus";
+import KedaCom from "./keda/keda-com.vue";
+
+export default defineComponent({
+  name: 'App',
+  components: {KedaCom},
+  setup() {
+    const store = useStore()
+    const that = (getCurrentInstance() as ComponentInternalInstance).appContext.config.globalProperties
+    const state = reactive({
+      videoData: [],
+      currentInfo: {},
+      switchArea: false,
+    });
+    //  @ts-ignore
+    const cC = window.cusConfig
+    watch(() => state.videoData, (n) => {
+      state.currentInfo = n?.[0] || {}
+    })
+    watch(() => state.currentInfo, (n: any) => {
+      state.switchArea = false
+      setTimeout(() => {
+        state.switchArea = true
+      }, 100)
+    })
+    const fullScreen = (event: any) => {
+      const deep: any = (el: any) => {
+        if (el.className.includes('video-item')) {
+          return el
+        } else {
+          return deep(el.parentElement)
+        }
+      }
+      deep(event.target).requestFullscreen()
+    }
+    onMounted(() => {
+      window.addEventListener("message", function (event) {
+        const result = event.data;
+        if (result.videoData) {
+          state.videoData = result.videoData
+        }
+      });
+      window.parent.postMessage({
+        from: window.name,
+        variable: "videoIframeLoading",
+        value: true,
+      }, "*")
+      window.addEventListener('dblclick', (e) => {
+        if (document.fullscreenElement) {
+          document.exitFullscreen()
+        }
+      })
+    })
+    return {
+      ...toRefs(state),
+      fullScreen
+    }
+  }
+})
+</script>
+
+<style lang="scss" scoped>
+.important-area-focus {
+  height: 360px;
+  display: flex;
+  line-height: 1;
+
+  .left {
+    width: 174px;
+    height: 100%;
+    margin-right: 10px;
+    display: flex;
+    flex-direction: column;
+    overflow-y: auto;
+
+    .list-item {
+      width: 100%;
+      min-height: 42px;
+      padding: 10px 10px;
+      box-sizing: border-box;
+      cursor: pointer;
+      background-image: url("./img/video_bg.png");
+      background-repeat: no-repeat;
+      background-size: 100% 100%;
+      font-size: 20px;
+      font-family: FZLanTingHeiS-DB-GB;
+      font-weight: 400;
+      color: #FFFFFF;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      margin-top: 10px;
+      &:first-child {
+        margin-top: 0;
+      }
+      &.active {
+        background-image: url("./img/video_bg_active.png");
+      }
+    }
+  }
+
+  .right {
+    box-sizing: border-box;
+    width: 960px;
+    padding: 12px;
+    height: 100%;
+    border: 1px solid #3573FC;
+    background: linear-gradient(90deg, rgba(0, 100, 241, 0.3) 0%, rgba(27, 36, 68, 0.3) 100%);
+    display: flex;
+    flex-direction: column;
+
+    .right-title {
+      box-sizing: border-box;
+      padding-left: 14px;
+      margin-top: 4px;
+      width: 100%;
+      border-bottom: 2px solid #062548;
+      font-size: 24px;
+      font-family: Adobe Heiti Std;
+      font-weight: normal;
+      color: #E2EBF1;
+      padding-bottom: 15px;
+    }
+
+    .right-content {
+      margin-top: 9px;
+      display: grid;
+      flex: 1;
+      grid-template-columns: repeat(4, 1fr);
+      column-gap: 7px;
+      row-gap: 20px;
+
+      .video-item {
+        width: 222px;
+        height: 128px;
+        background: rgba(28, 45, 65, 0);
+        border: 2px solid rgba(18, 87, 201, 0.4);
+        border-radius: 4px;
+        position: relative;
+
+        .video-item-title {
+          position: absolute;
+          align-items: center;
+          width: 100%;
+          height: 24px;
+          background: #000000;
+          opacity: 0.8;
+          border-radius: 2px;
+          font-size: 12px;
+          font-family: SimHei;
+          font-weight: 400;
+          color: #FEFEFE;
+          padding: 0 6px;
+          box-sizing: border-box;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+          line-height: 24px;
+          z-index: 2;
+        }
+        .video-keda {
+          width: 100%;
+          height: 100%;
+        }
+      }
+    }
+  }
+}
+</style>

src/views/screen/video-resource/keda/keda-com.vue

@@ -62,7 +62,6 @@ export default defineComponent({
   .keda-com {
     width: 400px;
     height: 300px;
-    border: 1px solid;
     display: flex;
     .container {
       flex: 1;