需求变更

packages/IntelligentSecurity/AppISManage/AppISManage.vue

@@ -13,18 +13,13 @@
       </div>
       <div class="videoList">
         <div
-            class="videoBox"
+          class="videoBox"
-            v-for="(m,i) in monitors"
+          v-for="(m, i) in monitors"
-            :key="m.id"
+          :key="m.id"
-            @mouseenter.stop="m.isShowPlayBtn = true"
+          @mouseenter.stop="m.isShowPlayBtn = true"
-            @mouseleave.stop="m.isShowPlayBtn = false"
+          @mouseleave.stop="m.isShowPlayBtn = false"
-            :style="currentSplitStyle">
+          :style="currentSplitStyle">
-          <AiMonitor :src="m.url" type="slw"></AiMonitor>
+          <AiMonitor :src="m.url" type="slw" :name="m.name" @close="removeMonitor(i)"></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>
         </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",

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>

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">

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'"

packages/bigscreen/designer/config.js

@@ -585,6 +585,7 @@ const components = [
             left: 0,
             dataX: '',
             dataY: [],
+            summaryTitle: '',
             border: 'border3',
             sourceDataId: '',
             title: '数据统计',

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'

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: {
           //地址重写