| | |
| | | </div> |
| | | </div> |
| | | <div class="center_box"> |
| | | <div v-if="showJk" class="jiankong"> |
| | | <div v-show="showJk" class="jiankong"> |
| | | <img class="jk_bg" src="@/assets/images/SecurityControl/jiankong_bg@2x.png" alt=""> |
| | | <div class="content"> |
| | | <video :src="activeVideo" class="video"></video> |
| | | <Video v-if="showJk && activeMenu && activeMenu.indexCode" :href="data.videoPluginUrl" :indexCode="activeMenu.indexCode" /> |
| | | <!-- <div class="player_bg" style="width: 100%;height: 100%;" id="playWnd"> </div> --> |
| | | </div> |
| | | <div class="right_wrap"> |
| | | <div class="menus"> |
| | |
| | | </div> |
| | | |
| | | </div> |
| | | <div v-else class="center_box_one"> |
| | | <div v-show="!showJk" class="center_box_one"> |
| | | <div class="list"> |
| | | <div class="item"> |
| | | <div class="name_wrap"> |
| | |
| | | </div> |
| | | <img src="@/assets/images/task/title@2x.png" class="bg" alt="" /> |
| | | </div> |
| | | <div class="monitoring" @click="showJk = !showJk"> |
| | | <div class="monitoring" @click="changeMon"> |
| | | <img src="@/assets/images/SecurityControl/ic_jiankong@2x.png" class="icon" alt=""> |
| | | <div>监控列表</div> |
| | | <img v-if="showJk" src="@/assets/images/SecurityControl/jiankong_ic_close@2x.png" class="top" alt=""> |
| | |
| | | </div> |
| | | <div class="list two-swiper"> |
| | | <div class="swiper-wrapper"> |
| | | <template v-for="item, i in dataList2"> |
| | | <template v-for="item, i in dataList2.filter(i => i.total > 0)"> |
| | | <div class="item two-swiper-slide swiper-slide"> |
| | | <div class="line"> |
| | | <div class="driver">{{ item.deviceType }}</div> |
| | |
| | | </template> |
| | | |
| | | <script setup> |
| | | import { ref, onMounted } from 'vue' |
| | | import { ref, onMounted, nextTick } from 'vue' |
| | | import VScaleScreen from 'v-scale-screen' |
| | | import Percent from '@/components/percent.vue' |
| | | import dayjs from 'dayjs' |
| | |
| | | import * as echarts from 'echarts' |
| | | import 'swiper/css/swiper.min.css' |
| | | import Swiper from 'swiper' |
| | | import Video from './videoUrl/Video.vue' |
| | | import { |
| | | getEnergyCenterData, |
| | | afgetCarmeraPreviemUrl, |
| | |
| | | time.value = dayjs().format('HH:mm:ss') |
| | | |
| | | }, 1000) |
| | | |
| | | |
| | | |
| | | const arr = ['#68e2e3', '#50afd3', '#377cdb', '#d5ae3a'] |
| | | const initEnergy = () => { |
| | |
| | | data4.value = res.data || {} |
| | | let obj = data4.value |
| | | data4.value.total = obj.levelNum + obj.retentionNum + obj.registerVisitNum + obj.waitVisitNum |
| | | const result = res.data.visitRetentionDataList || [] |
| | | const result = res.data?.visitRetentionDataList || [] |
| | | dataList3.value = result.map(i => { |
| | | if (i.timeOutMinute) { |
| | | i.timeOutMinute = Math.abs(i.timeOutMinute) |
| | |
| | | data5.value = result.filter(item => item.carmeraList && item.carmeraList.length > 0) |
| | | }) |
| | | } |
| | | const changeMon = () => { |
| | | showJk.value = !showJk.value |
| | | if(!showJk.value){ |
| | | activeJkIndex.value = -1 |
| | | activeMenu.value = {} |
| | | } |
| | | } |
| | | const menuClick = (val) => { |
| | | if (val == activeJkIndex.value) { |
| | | activeJkIndex.value = -1 |
| | |
| | | } |
| | | const menuItemClick = (val) => { |
| | | activeMenu.value = val |
| | | afgetCarmeraPreviemUrl({ indexCode: val.indexCode }).then(res => { |
| | | activeVideo.value = res.data |
| | | }) |
| | | } |
| | | |
| | | } |
| | | const autoplayFlag = (list = [], leng = 4, time = 2000) => { |
| | | if (list.length > leng) { |
| | | return { delay: time, disableOnInteraction: false } |
| | |
| | | initialSlide: 0, |
| | | direction: 'vertical', //竖直方向 |
| | | slidesPerView: 3, |
| | | autoplay: autoplayFlag(dataList2.value, 3, 4000), |
| | | autoplay: autoplayFlag(dataList2.value.filter(i => i.total > 0), 3, 4000), |
| | | observer: true, //修改swiper自己或子元素时,自动初始化swiper |
| | | }) |
| | | } |
| | |
| | | observer: true, //修改swiper自己或子元素时,自动初始化swiper |
| | | }) |
| | | } |
| | | |
| | | |
| | | |
| | | |
| | |
| | | display: flex; |
| | | justify-content: center; |
| | | align-items: center; |
| | | padding: 16px 24px; |
| | | padding-top: 16px; |
| | | padding-left: 24px; |
| | | |
| | | .echart_wrap { |
| | | position: relative; |
| | |
| | | } |
| | | |
| | | .list { |
| | | margin-left: 36px; |
| | | margin-left: 32px; |
| | | flex: 1; |
| | | display: flex; |
| | | flex-direction: column; |