From 9b80c42df73cb99b37d95b5c0a186ceec5e45a27 Mon Sep 17 00:00:00 2001
From: liukangdong <898885815@qq.com>
Date: 星期二, 07 一月 2025 17:23:31 +0800
Subject: [PATCH] ll
---
screen/src/views/SecurityControl.vue | 221 ++++++++++---------------------------------------------
1 files changed, 41 insertions(+), 180 deletions(-)
diff --git a/screen/src/views/SecurityControl.vue b/screen/src/views/SecurityControl.vue
index 0703983..775eaa9 100644
--- a/screen/src/views/SecurityControl.vue
+++ b/screen/src/views/SecurityControl.vue
@@ -111,7 +111,9 @@
<div v-show="showJk" class="jiankong">
<img class="jk_bg" src="@/assets/images/SecurityControl/jiankong_bg@2x.png" alt="">
<div class="content">
- <div class="player_bg" style="width: 100%;height: 100%;" id="playWnd"> </div>
+ <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">
@@ -162,7 +164,7 @@
<img src="@/assets/images/SecurityControl/title_short@2x.png" class="bg" alt="">
</div>
<div class="num_wrap">
- <div class="num">{{ data.internalCarTotal }}</div>
+ <div class="num">{{ data.inParkCarTotal || 0 }}</div>
<img src="@/assets/images/SecurityControl/anfang_ic_data@2x.png" class="bg" alt="">
</div>
</div>
@@ -310,6 +312,7 @@
</div>
</div> -->
<div class="safe_warning">
+ <Loading v-if="loading1" />
<div class="com_header">
<div class="title">
<img src="@/assets/images/ic_title@2x.png" class="icon" alt="" />
@@ -372,7 +375,6 @@
</div>
</div>
</div>
-
</div>
</div>
@@ -384,7 +386,7 @@
</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="">
@@ -421,7 +423,7 @@
</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.totalNum > 0)">
<div class="item two-swiper-slide swiper-slide">
<div class="line">
<div class="driver">{{ item.deviceType }}</div>
@@ -485,6 +487,8 @@
import * as echarts from 'echarts'
import 'swiper/css/swiper.min.css'
import Swiper from 'swiper'
+import Video from './videoUrl/Video.vue'
+import Loading from '@/components/Loading.vue'
import {
getEnergyCenterData,
afgetCarmeraPreviemUrl,
@@ -507,145 +511,6 @@
time.value = dayjs().format('HH:mm:ss')
}, 1000)
-
-
-const oWebControl = ref(null)
-const initCount = ref()
-const pubKey = ref('')
-const initPlugin = () => {
- oWebControl.value = new WebControl({
- szPluginContainer: "playWnd", // 鎸囧畾瀹瑰櫒id
- iServicePortStart: 15900, // 鎸囧畾璧锋绔彛鍙凤紝寤鸿浣跨敤璇ュ��
- iServicePortEnd: 15900,
- szClassId: "23BF3B0A-2C56-4D97-9C03-0CB103AA8F11", // 鐢ㄤ簬IE10浣跨敤ActiveX鐨刢lsid
- cbConnectSuccess: function () {
- // 鍒涘缓WebControl瀹炰緥鎴愬姛
- console.log('鍒涘缓WebControl瀹炰緥鎴愬姛');
-
- oWebControl.value.JS_StartService("window", { // WebControl瀹炰緥鍒涘缓鎴愬姛鍚庨渶瑕佸惎鍔ㄦ湇鍔�
- dllPath: "./VideoPluginConnect.dll" // 鍊�"./VideoPluginConnect.dll"鍐欐
- }).then(function () {
- oWebControl.value.JS_SetWindowControlCallback({ // 璁剧疆娑堟伅鍥炶皟
- cbIntegrationCallBack: cbIntegrationCallBack
- })// 鍚姩鎻掍欢鏈嶅姟鎴愬姛
- oWebControl.value.JS_CreateWnd("playWnd", '300', '200').then(function () { //JS_CreateWnd鍒涘缓瑙嗛鎾斁绐楀彛锛屽楂樺彲璁惧畾锛宐oxWidth, boxHeight瀹瑰櫒
- // oWebControl.value.JS_CreateWnd("playWnd").then(function () { //JS_CreateWnd鍒涘缓瑙嗛鎾斁绐楀彛锛屽楂樺彲璁惧畾锛宐oxWidth, boxHeight瀹瑰櫒
- init() // 鍒涘缓鎾斁瀹炰緥鎴愬姛鍚庡垵濮嬪寲
- })
- }, function () { // 鍚姩鎻掍欢鏈嶅姟澶辫触
- })
- },
- cbConnectError: function () { // 鍒涘缓WebControl瀹炰緥澶辫触
- console.log('鍒涘缓WebControl瀹炰緥澶辫触');
- oWebControl.value = null
- $("#playWnd").html("鎻掍欢鏈惎鍔紝姝ｅ湪灏濊瘯鍚姩锛岃绋嶅��...")
- WebControl.JS_WakeUp("VideoWebPlugin://") // 绋嬪簭鏈惎鍔ㄦ椂鎵цerror鍑芥暟锛岄噰鐢╳akeup鏉ュ惎鍔ㄧ▼搴�
- initCount.value++
- if (initCount.value < 3) {
- setTimeout(function () {
- initPlugin()
- }, 3000)
- } else {
- $("#playWnd").html("鎻掍欢鍚姩澶辫触锛岃妫�鏌ユ彃浠舵槸鍚﹀畨瑁咃紒鎴栭噸鏂颁笅杞� <a href='./videoUrl/VideoWebPlugin.exe' target='_blank'>涓嬭浇a<a>")
- }
- },
- cbConnectClose: function (bNormalClose) {
- // 寮傚父鏂紑锛歜NormalClose = false
- // JS_Disconnect姝ｅ父鏂紑锛歜NormalClose = true
- console.log('寮傚父鏂紑锛歜NormalClose');
- oWebControl.value = null
- $("#playWnd").html("鎻掍欢鏈惎鍔紝姝ｅ湪灏濊瘯鍚姩锛岃绋嶅��...")
- WebControl.JS_WakeUp("VideoWebPlugin://")
- initCount.value++
- if (initCount.value < 3) {
- setTimeout(function () {
- initPlugin()
- }, 3000)
- } else {
- $("#playWnd").html("鎻掍欢鍚姩澶辫触锛岃妫�鏌ユ彃浠舵槸鍚﹀畨瑁咃紒鎴栭噸鏂颁笅杞� <a href='https://img0.baidu.com/it/u=3867022436,608124672&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=1422' target='_blank'>涓嬭浇b<a>")
- }
- }
- })
-}
-function fileDown() {
- window.open('./videoUrl/VideoWebPlugin.exe')
-}
-// 娑堟伅鍥炶皟
-const cbIntegrationCallBack = (oData) => {
- let response = oData.responseMsg
- // response.type=1 閫変腑绐楀彛娑堟伅 type=2 鎾斁娑堟伅
-}
-// 鐩戞帶
-
-
-
-
-// 鍒濆鍖�
-const init = () => {
- getPubKey(function () {
- ////////////////////////////////// 璇疯嚜琛屼慨鏀逛互涓嬪彉閲忓�� ////////////////////////////////////
- let appkey = "23154099" //缁煎悎瀹夐槻绠＄悊骞冲彴鎻愪緵鐨刟ppkey锛屽繀濉�
- let secret = '88wFsg3xfn7o8QMsWEO2' //缁煎悎瀹夐槻绠＄悊骞冲彴鎻愪緵鐨剆ecret锛屽繀濉�
- // let secret = setEncrypt("88wFsg3xfn7o8QMsWEO2") //缁煎悎瀹夐槻绠＄悊骞冲彴鎻愪緵鐨剆ecret锛屽繀濉�
- let ip = "10.50.250.253" //缁煎悎瀹夐槻绠＄悊骞冲彴IP鍦板潃锛屽繀濉�
- let playMode = 0 //鍒濆鎾斁妯″紡锛�0-棰勮(瀹炴椂娴�)锛�1-鍥炴斁(瑙嗛)
- let port = 443 //缁煎悎瀹夐槻绠＄悊骞冲彴绔彛锛岃嫢鍚敤HTTPS鍗忚锛岄粯璁�443
- let snapDir = "D:\\SnapDir" //鎶撳浘瀛樺偍璺緞
- let videoDir = "D:\\VideoDir" //绱ф�ュ綍鍍忔垨褰曞儚鍓緫瀛樺偍璺緞
- let layout = "1x1" //playMode鎸囧畾妯″紡鐨勫竷灞�
- let enableHTTPS = 1 //鏄惁鍚敤HTTPS鍗忚涓庣患鍚堝畨闃茬鐞嗗钩鍙颁氦浜掞紝杩欓噷鎬绘槸濉�1
- let encryptedFields = 'secret' //鍔犲瘑瀛楁锛岄粯璁ゅ姞瀵嗛鍩熶负secret
- let showToolbar = 1 //鏄惁鏄剧ず宸ュ叿鏍忥紝0-涓嶆樉绀猴紝闈�0-鏄剧ず
- let showSmart = 1 //鏄惁鏄剧ず鏅鸿兘淇℃伅锛堝閰嶇疆绉诲姩渚︽祴鍚庣敾闈笂鐨勭嚎妗嗭級锛�0-涓嶆樉绀猴紝闈�0-鏄剧ず
- let buttonIDs = "0,16,256,257,258,259,260,513,514,515,516,517,768" //鑷畾涔夊伐鍏锋潯鎸夐挳
- oWebControl.value.JS_RequestInterface({
- funcName: "init",
- argument: JSON.stringify({
- appkey: appkey, //API缃戝叧鎻愪緵鐨刟ppkey
- secret: secret, //API缃戝叧鎻愪緵鐨剆ecret
- ip: ip, //API缃戝叧IP鍦板潃
- playMode: playMode, //鎾斁妯″紡锛堝喅瀹氭樉绀洪瑙堣繕鏄洖鏀剧晫闈級
- port: port, //绔彛
- snapDir: snapDir, //鎶撳浘瀛樺偍璺緞
- videoDir: videoDir, //绱ф�ュ綍鍍忔垨褰曞儚鍓緫瀛樺偍璺緞
- layout: layout, //甯冨眬
- enableHTTPS: enableHTTPS, //鏄惁鍚敤HTTPS鍗忚
- encryptedFields: encryptedFields, //鍔犲瘑瀛楁
- showToolbar: showToolbar, //鏄惁鏄剧ず宸ュ叿鏍�
- showSmart: showSmart, //鏄惁鏄剧ず鏅鸿兘淇℃伅
- buttonIDs: buttonIDs //鑷畾涔夊伐鍏锋潯鎸夐挳
- })
- }).then(function (oData) {
- console.log('鍒濆鍖栨垚鍔�');
-
- // oWebControl.value.JS_Resize(that.boxWidth, that.boxHeight) // 鍒濆鍖栧悗resize涓�娆★紝瑙勯伩firefox涓嬮娆℃樉绀虹獥鍙ｅ悗鎻掍欢绐楀彛鏈笌DIV绐楀彛閲嶅悎闂
- })
- })
-}
-
-// 鑾峰彇鍏挜
-function getPubKey(callback) {
- oWebControl.value.JS_RequestInterface({
- funcName: 'getRSAPubKey',
- argument: JSON.stringify({
- keyLength: 1024,
- }),
- }).then((oData) => {
- if (oData.responseMsg.data) {
- pubKey.value = oData.responseMsg.data
- callback()
- }
- })
-}
-
-// RSA鍔犲瘑
-function setEncrypt(value) {
- let that = this
- let encrypt = new JSEncrypt()
- encrypt.setPublicKey(pubKey.value)
- return encrypt.encrypt(value)
-}
-
const arr = ['#68e2e3', '#50afd3', '#377cdb', '#d5ae3a']
const initEnergy = () => {
@@ -747,7 +612,7 @@
})
}
-const colors = ['#FEAF01', '#01ABFE', '#51F9E4']
+const colors = [ '#01ABFE','#FEAF01', '#51F9E4']
const initEchart2 = () => {
const myChart = echarts.init(document.getElementById('echart2'))
const option = {
@@ -810,10 +675,18 @@
}]),
]
const data = []
- data.push({ name: '寰呰闂�', value: data4.value.waitVisitNum, rate: (data4.value.waitVisitNum / data4.value.total).toFixed(1) })
- data.push({ name: '宸茬櫥璁�', value: data4.value.registerVisitNum, rate: (data4.value.registerVisitNum / data4.value.total).toFixed(1) })
- data.push({ name: '宸茬寮�', value: data4.value.levelNum, rate: (data4.value.levelNum / data4.value.total).toFixed(1) })
- data.push({ name: '婊炵暀', value: data4.value.retentionNum, rate: (data4.value.retentionNum / data4.value.total).toFixed(1) })
+ if (data4.value.total) {
+ data.push({ name: '寰呰闂�', value: data4.value.waitVisitNum, rate: (data4.value.waitVisitNum / data4.value.total).toFixed(1) })
+ data.push({ name: '宸茬櫥璁�', value: data4.value.registerVisitNum, rate: (data4.value.registerVisitNum / data4.value.total).toFixed(1) })
+ data.push({ name: '宸茬寮�', value: data4.value.levelNum, rate: (data4.value.levelNum / data4.value.total).toFixed(1) })
+ data.push({ name: '婊炵暀', value: data4.value.retentionNum, rate: (data4.value.retentionNum / data4.value.total).toFixed(1) })
+ } else {
+ data.push({ name: '寰呰闂�', value: data4.value.waitVisitNum, rate: 0 })
+ data.push({ name: '宸茬櫥璁�', value: data4.value.registerVisitNum, rate: 0 })
+ data.push({ name: '宸茬寮�', value: data4.value.levelNum, rate: 0 })
+ data.push({ name: '婊炵暀', value: data4.value.retentionNum, rate: 0 })
+ }
+
const option = {
color: colors,
tooltip: {
@@ -953,6 +826,8 @@
}
return item
})
+ console.log('dataList2', dataList2.value);
+
data2.value = total
if (online >= outline) {
temp.push({ name: '鍦ㄧ嚎', value: online, rate: ((online / (online + outline)) * 100).toFixed(1) })
@@ -995,11 +870,14 @@
})
}
+const loading1 = ref(false)
const warningTab = ref('0')
const warningNum = ref(0)
const warningList = ref([])
const getWarning = () => {
+ loading1.value = true
afwarningEventData({ type: warningTab.value }).then(res => {
+ loading1.value = false
if (!res.data) return
const result = res.data.list || []
warningNum.value = res.data.total
@@ -1022,6 +900,8 @@
})
warningList.value = temp
// console.log('temp', warningList.value);
+ }, () => {
+ loading1.value = false
})
}
const tasClick = (val) => {
@@ -1045,6 +925,13 @@
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
@@ -1053,35 +940,9 @@
}
}
const menuItemClick = (val) => {
- initPlugin()
activeMenu.value = val
- nextTick(() => {
- console.log('indexCode', val.indexCode);
-
- oWebControl.value.JS_RequestInterface({
- funcName: "startPreview",
- argument: JSON.stringify({
- cameraIndexCode: val.indexCode, //鐩戞帶鐐圭紪鍙�
- streamMode: 0, //涓诲瓙鐮佹祦鏍囪瘑锛�0-涓荤爜娴侊紝1-瀛愮爜娴�
- transMode: 1, //浼犺緭鍗忚锛�0-UDP锛�1-TCP
- gpuMode: 0, //鏄惁鍚敤GPU纭В锛�0-涓嶅惎鐢紝1-鍚敤
- wndId: -1 //鎾斁绐楀彛搴忓彿锛堝湪2x2浠ヤ笂甯冨眬涓嬪彲鎸囧畾鎾斁绐楀彛锛�
- })
- }).then((oData) => {
- if (oData.responseMsg.code === 1) {
- console.log('success', oData)
- }
- }, err => {
- console.log('err', err)
- })
- })
-
- // 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 }
@@ -1104,7 +965,7 @@
initialSlide: 0,
direction: 'vertical', //绔栫洿鏂瑰悜
slidesPerView: 3,
- autoplay: autoplayFlag(dataList2.value, 3, 4000),
+ autoplay: autoplayFlag(dataList2.value.filter(i => i.totalNum > 0), 3, 4000),
observer: true, //淇敼swiper鑷繁鎴栧瓙鍏冪礌鏃讹紝鑷姩鍒濆鍖杝wiper
})
}
@@ -1129,7 +990,6 @@
getData3()
getData5()
getWarning()
-
setInterval(() => {
getData1()
@@ -1738,7 +1598,7 @@
.safe_warning {
width: 786px;
margin-right: 20px;
-
+ position: relative;
/* one-swiper */
.one_swiper_wrap {
height: 140px;
@@ -1845,7 +1705,8 @@
display: flex;
justify-content: center;
align-items: center;
- padding: 16px 24px;
+ padding-top: 16px;
+ padding-left: 24px;
.echart_wrap {
position: relative;
@@ -1881,7 +1742,7 @@
}
.list {
- margin-left: 36px;
+ margin-left: 32px;
flex: 1;
display: flex;
flex-direction: column;
--
Gitblit v1.9.3