From a184ca666e74839edfa83af66130bac6c8509ad2 Mon Sep 17 00:00:00 2001
From: yanran200730 <yanran200830@163.com>
Date: Wed, 13 Apr 2022 18:57:48 +0800
Subject: [PATCH] =?UTF-8?q?=E9=9C=80=E6=B1=82=E5=8F=98=E6=9B=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../AppISManage/AppISManage.vue               |  21 +-
 .../components/AiSlwVideo.vue                 | 332 ++++++++++++++++++
 .../bigscreen/designer/components/Layout.vue  |   6 +
 .../designer/components/RenderElement.vue     |   2 +-
 packages/bigscreen/designer/config.js         |   1 +
 .../dvui/layout/AiDvSummary/AiDvSummary.vue   |   7 +-
 vue.config.js                                 |   2 +-
 7 files changed, 355 insertions(+), 16 deletions(-)
 create mode 100644 packages/IntelligentSecurity/components/AiSlwVideo.vue

diff --git a/packages/IntelligentSecurity/AppISManage/AppISManage.vue b/packages/IntelligentSecurity/AppISManage/AppISManage.vue
index fa6e3f77..c0ea5caf 100644
--- a/packages/IntelligentSecurity/AppISManage/AppISManage.vue
+++ b/packages/IntelligentSecurity/AppISManage/AppISManage.vue
@@ -13,18 +13,13 @@
       </div>
       <div class="videoList">
         <div
-            class="videoBox"
-            v-for="(m,i) in monitors"
-            :key="m.id"
-            @mouseenter.stop="m.isShowPlayBtn = true"
-            @mouseleave.stop="m.isShowPlayBtn = false"
-            :style="currentSplitStyle">
-          <AiMonitor :src="m.url" type="slw"></AiMonitor>
-          <span :title="m.name">{{ m.name }}</span>
-          <div class="videoBox-close" @click="removeMonitor(i)" v-if="m.isShowPlayBtn">
-            <i class="el-icon-circle-close"></i>
-            <span>关闭视频</span>
-          </div>
+          class="videoBox"
+          v-for="(m, i) in monitors"
+          :key="m.id"
+          @mouseenter.stop="m.isShowPlayBtn = true"
+          @mouseleave.stop="m.isShowPlayBtn = false"
+          :style="currentSplitStyle">
+          <AiMonitor :src="m.url" type="slw" :name="m.name" @close="removeMonitor(i)"></AiMonitor>
         </div>
       </div>
     </div>
@@ -47,7 +42,7 @@
 import {mapState} from 'vuex'
 import DeviceSlider from "../components/deviceSlider";
 import LocateDialog from "../components/locateDialog";
-import AiMonitor from "dvcp-dv-ui/components/AiMonitor/AiMonitor";
+import AiMonitor from "../components/AiSlwVideo";
 
 export default {
   name: "AppISManage",
diff --git a/packages/IntelligentSecurity/components/AiSlwVideo.vue b/packages/IntelligentSecurity/components/AiSlwVideo.vue
new file mode 100644
index 00000000..a1447df1
--- /dev/null
+++ b/packages/IntelligentSecurity/components/AiSlwVideo.vue
@@ -0,0 +1,332 @@
+<template>
+  <div class="slw" :id="videoId">
+    <div class="slw-title">
+      <h2>{{ name }}</h2>
+      <div class="slw-title__close" @click="removeMonitor">
+        <i class="el-icon-circle-close"></i>
+        <span>关闭视频</span>
+      </div>
+    </div>
+    <iframe
+      v-if="isShow"
+      :id="id"
+      allow="autoplay *; microphone *; fullscreen *" allowfullscreen allowtransparency key="" allowusermedia frameBorder="no"
+      style="width: 100%; height: 100%;"
+      :src="`https://cdn.cunwuyun.cn/slw2.0/index.html?url=${src}`">
+    </iframe>
+    <div class="action-bar">
+      <div class="left">
+        <div class="left-btns">
+          <span :class="[currIndex === 0 ? 'active' : '']" @click="currIndex = 0">实时</span>
+          <span :class="[currIndex === 1 ? 'active' : '']" @click="currIndex = 1">历史</span>
+        </div>
+        <div
+          class="volume"
+          @mouseleave.stop="isShowVolume = false">
+          <img 
+            @mouseenter.stop="isShowVolume = true"
+            src="https://cdn.cunwuyun.cn/slw2.0/images/sound.png">
+          <div class="volume-slider" :class="[isShowVolume ? 'active' : '']">
+            <el-slider
+              input-size="mini"
+              v-model="volume"
+              vertical
+              @change="onVolume"
+              height="80px">
+            </el-slider>
+          </div>
+        </div>
+      </div>
+      <div class="right">
+        <img src="https://cdn.cunwuyun.cn/slw2.0/images/date.png" @click="isShowDate = true">
+        <img src="https://cdn.cunwuyun.cn/slw2.0/images/screenshots.png" title="截屏" @click="screenshots">
+        <img src="https://cdn.cunwuyun.cn/slw2.0/images/full-screen.png" :title="isFullscreen ? '退出全屏' : '全屏'" @click="fullscreen">
+      </div>
+    </div>
+    <ai-dialog
+      title="选择日期"
+      :visible.sync="isShowDate"
+      width="520px"
+      @onConfirm="onConfirm">
+      <el-form class="ai-form" ref="form" :model="form" label-width="80px" size="small">
+        <el-form-item label="选择日期" prop="date" :rules="[{ required: true, message: '请选择日期', trigger: 'change' }]">
+          <el-date-picker
+            value-format="yyyy-MM-DD"
+            v-model="form.date"
+            type="date"
+            placeholder="选择日期">
+          </el-date-picker>
+        </el-form-item>
+      </el-form>
+    </ai-dialog>
+  </div>
+</template>
+
+<script>
+  export default {
+    props: ['src', 'name'],
+
+    name: 'slwVideo',
+
+    data () {
+      return {
+        currIndex: 0,
+        isShowDate: false,
+        isShowPlayBtn: false,
+        isShow: true,
+        isShowVolume: false,
+        form: {
+          date: ''
+        },
+        volume: 100,
+        videoId: `slwvideo-${new Date().getTime()}`,
+        id: `video-${new Date().getTime()}`,
+        isFullscreen: false
+      }
+    },
+
+    watch: {
+      src: {
+        handler (val) {
+          if (val) {
+            this.isShow = false
+
+            this.$nextTick(() => {
+              this.isShow = true
+            })
+          }
+        },
+        immediate: true,
+        deep: true
+      }
+    },
+
+    mounted () {
+    },
+
+    methods: {
+      exitFullscreen () {
+        if (document.exitFullscreen) {
+          document.exitFullscreen()
+        } else if (document.msExitFullscreen) {
+          document.msExitFullscreen()
+        } else if (document.mozCancelFullScreen) {
+          document.mozCancelFullScreen()
+        } else if (document.webkitExitFullscreen) {
+          document.webkitExitFullscreen()
+        }
+      },
+
+      onConfirm () {
+        this.$refs.form.validate((valid) => {
+          if (valid) {
+          }
+        })
+      },
+
+      onVolume (e) {
+        const v = (e / 100).toFixed(1)
+        const subPage = document.querySelector(`#${this.id}`).contentWindow
+        subPage.postMessage({
+          type: 'volume',
+          value: Number(v)
+        }, '*')
+      },
+
+      fullscreen () {
+        if (this.isFullscreen) {
+          this.exitFullscreen()
+        } else {
+          this.requestFullScreen(document.querySelector(`#${this.videoId}`))
+        }
+
+        this.isFullscreen = !this.isFullscreen
+      },
+
+      screenshots () {
+        const subPage = document.querySelector(`#${this.id}`).contentWindow
+        subPage.postMessage({
+          type: 'screenshot'
+        }, '*')
+      },
+
+      removeMonitor () {
+        this.$emit('close')
+      },
+
+      requestFullScreen (element) {
+        var requestMethod = element.requestFullScreen || element.webkitRequestFullScreen || element.mozRequestFullScreen || element.msRequestFullScreen;
+        if (requestMethod) {
+          requestMethod.call(element);
+        } else if (typeof window.ActiveXObject !== 'undefined') {
+          var wscript = new ActiveXObject('WScript.Shell')
+          if (wscript !== null) {
+            wscript.SendKeys('{F11}')
+          }
+        }
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  .slw {
+    position: relative;
+    width: 100%;
+    height: 100%;
+
+    iframe {
+      border: none;
+    }
+
+    .slw-title {
+      display: flex;
+      position: absolute;
+      align-items: center;
+      justify-content: space-between;
+      top: 0;
+      left: 0;
+      z-index: 1;
+      width: 100%;
+      height: 40px;
+      line-height: 40px;
+      padding: 0 16px;
+      background: rgba(0, 0, 0, 0.8);
+
+      h2 {
+        font-size: 16px;
+        color: #fff;
+        font-weight: normal;
+      }
+
+      .slw-title__close {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 84px;
+        height: 32px;
+        background: linear-gradient(180deg, #2E3447 0%, #151825 100%);
+        border-radius: 2px;
+        cursor: pointer;
+        font-size: 12px;
+        color: #fff;
+
+        &:hover {
+          opacity: 0.9;
+        }
+
+        span {
+          margin-left: 4px;
+        }
+
+        i {
+          position: relative;
+          font-size: 16px;
+        }
+      }
+    }
+
+    .action-bar {
+      display: flex;
+      position: absolute;
+      align-items: center;
+      justify-content: space-between;
+      bottom: 0;
+      left: 0;
+      z-index: 1;
+      width: 100%;
+      height: 40px;
+      padding: 0 16px;
+      background: rgba(0, 0, 0, 0.8);
+
+      .left {
+        .volume {
+          position: relative;
+          height: 100%;
+
+          .volume-slider {
+            display: none;
+            position: absolute;
+            bottom: 20px;
+            left: 50%;
+            z-index: -1;
+            opacity: 0;
+            padding: 20px 0 10px;
+            background-color: rgba(0, 0,0,.8);
+            transform: translate(-50%, 0);
+            transition: all ease 0.3s;
+
+            &.active {
+              display: block;
+              z-index: 1;
+              opacity: 1;
+            }
+          }
+        }
+
+        img {
+          cursor: pointer;
+        }
+
+        .left-btns {
+          display: flex;
+          align-items: center;
+          width: 96px;
+          height: 24px;
+          margin-right: 10px;
+          background: #222838;
+          border-radius: 100px;
+          text-align: center;
+          overflow: hidden;
+
+          span {
+            flex: 1;
+            height: 100%;
+            line-height: 24px;
+            background: #222838;
+            color: #c9c9c9;
+            font-size: 12px;
+            cursor: pointer;
+
+            &.active {
+              color: #fff;
+              background: linear-gradient(180deg, #28B2EB 0%, #193D91 100%);
+            }
+          }
+        }
+      }
+
+      .right {
+        color: #c9c9c9;
+        font-size: 12px;
+
+        span {
+          margin-right: 32px;
+          cursor: pointer;
+
+          &:hover {
+            opacity: 0.6;
+          }
+        }
+
+        img {
+          margin-right: 16px;
+          cursor: pointer;
+
+          &:last-child {
+            margin-right: 0;
+          }
+
+          &:hover {
+            opacity: 0.6;
+          }
+        }
+      }
+
+      & > div {
+        display: flex;
+        align-items: center;
+      }
+    }
+  }
+</style>
\ No newline at end of file
diff --git a/packages/bigscreen/designer/components/Layout.vue b/packages/bigscreen/designer/components/Layout.vue
index 72409299..a7a6b9b9 100644
--- a/packages/bigscreen/designer/components/Layout.vue
+++ b/packages/bigscreen/designer/components/Layout.vue
@@ -136,6 +136,12 @@
                   <el-input v-model="currLayout.title" size="mini"></el-input>
                 </div>
               </div>
+              <div class="layout-config__item layout-config__item--input" v-if="currLayout.display === 'summary2'">
+                <label>标题</label>
+                <div class="layout-config__item--right">
+                  <el-input v-model="currLayout.summaryTitle" size="mini"></el-input>
+                </div>
+              </div>
               <div class="layout-config__item" v-if="currLayout.type !== 'display'">
                 <label>边框</label>
                 <div class="layout-config__item--right">
diff --git a/packages/bigscreen/designer/components/RenderElement.vue b/packages/bigscreen/designer/components/RenderElement.vue
index c465f0c2..b24f25c3 100644
--- a/packages/bigscreen/designer/components/RenderElement.vue
+++ b/packages/bigscreen/designer/components/RenderElement.vue
@@ -6,7 +6,7 @@
       v-if="data.type !== 'display'"
       :title="data.title"
       :border="data.border || ''">
-      <AiDvSummary v-if="data.type === 'summary'" :key="`summary${index}`" :type="data.display" :data="data[data.dataType]"/>
+      <AiDvSummary v-if="data.type === 'summary'" :summaryTitle="data.summaryTitle" :key="`summary${index}`" :type="data.display" :data="data[data.dataType]"/>
       <AiSwiper v-else-if="data.type === 'swiper'" :heigth="'100%'" :data="data[data.dataType]"/>
       <dv-scroll-board
         v-if="data.type === 'table'"
diff --git a/packages/bigscreen/designer/config.js b/packages/bigscreen/designer/config.js
index 14e6add3..cd39e657 100644
--- a/packages/bigscreen/designer/config.js
+++ b/packages/bigscreen/designer/config.js
@@ -585,6 +585,7 @@ const components = [
             left: 0,
             dataX: '',
             dataY: [],
+            summaryTitle: '',
             border: 'border3',
             sourceDataId: '',
             title: '数据统计',
diff --git a/project/dvui/layout/AiDvSummary/AiDvSummary.vue b/project/dvui/layout/AiDvSummary/AiDvSummary.vue
index 8a6068dd..14942010 100644
--- a/project/dvui/layout/AiDvSummary/AiDvSummary.vue
+++ b/project/dvui/layout/AiDvSummary/AiDvSummary.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="AiSummary">
-    <component :is="type" :data="data" :keys="keys" :value="value"></component>
+    <component :is="type" :data="data" :keys="keys" :value="value" :summaryTitle="summaryTitle"></component>
   </div>
 </template>
 
@@ -42,6 +42,11 @@
         default: () => []
       },
 
+      summaryTitle: {
+        type: String,
+        default: ''
+      },
+
       keys: {
         type: String,
         default: 'key'
diff --git a/vue.config.js b/vue.config.js
index f365a93e..d1c02023 100644
--- a/vue.config.js
+++ b/vue.config.js
@@ -64,7 +64,7 @@ module.exports = {
     proxy: {
       //设置代理,可解决跨5
       '/lan': {
-        target: 'http://192.168.1.87:9000',
+        target: 'https://sdtestweb.sdvillage.cn',
         changeOrigin: true,
         pathRewrite: {
           //地址重写