gitY
/
LinYeFangHuo
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

智感等-设置默认sql+视频组件增加下拉框选项

main
滕嵩 2025-04-14 14:22:16 +08:00
parent 2b36a762bd
commit cfaad8b9c5
22 changed files with 890 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

145
public/monitor/common.css Normal file
View File

@ -0,0 +1,145 @@
.flex{
display: flex;
}
.flex-1{
flex: 1;
}
.wrap{
flex-wrap: wrap;
}
.nowrap{
flex-wrap: nowrap;
white-space: nowrap;
}
.row{
flex-direction: row;
}
.column{
flex-direction: column;
}
.hidden{
overflow: hidden;
}
.auto{
overflow: auto;
}
.ai-c{
align-items: center;
}
.ai-e{
align-items: end;
}
.jc-se{
justify-content: space-evenly;
}
.jc-sa{
justify-content: space-around;
}
.jc-sb{
justify-content: space-between;
}
.jc-c{
justify-content: center;
}
.jc-e{
justify-content: flex-end;
}
.mt-1{
margin-top: 10px;
}
.mt-2{
margin-top: 20px;
}
.mt-3{
margin-top: 30px;
}
.ml-1{
margin-left: 10px;
}
.ml-2{
margin-left: 20px;
}
.ml-3{
margin-left: 30px;
}
.mb-1{
margin-bottom: 10px;
}
.mb-2{
margin-bottom: 20px;
}
.mb-3{
margin-bottom: 30px;
}
.mr-1{
margin-right: 10px;
}
.mr-2{
margin-right: 20px;
}
.mr-3{
margin-right: 30px;
}
.ta-c{
text-align: center;
}
.ta-l{
text-align: left;
}
.cursor{
cursor: pointer;
}
.pos-r{
position: relative;
}
.pos-a{
position: absolute;
}
.pos-f{
position: fixed;
}
.max-w{
width: 100%;
}
.max-h{
height: 100%;
}
.fz-12{
font-size: 12px;
}
.fz-14{
font-size: 14px;
}
.fz-16{
font-size: 16px;
}
.fz-18{
font-size: 18px;
}
.fz-20{
font-size: 20px;
}
.fz-22{
font-size: 22px;
}
.fz-24{
font-size: 24px;
}
.fz-26{
font-size: 26px;
}
.fz-28{
font-size: 28px;
}
.fc-w{
color: white;
}
.fc-b{
color: black;
}
.fc-r{
color: red;
}
.fw-b{
font-weight: bold;
}

74
public/monitor/jquery-1.12.4.min.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

1
public/monitor/jsWebControl-1.0.0.min.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

1
public/monitor/jsencrypt.min.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

359
public/monitor/mulIndex.html Normal file
View File

@ -0,0 +1,359 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>preview_demo</title>
</head>
<style>
html, body {
padding: 0;
margin: 0;
}
.camera-box{
width: 1200px;
height: 700px;
border-radius: 5px;
position: relative;
z-index:100000000000000000000000000000000!important;
position: fixed;
left: 50%;
top: 50%;
z-index: 9999;
transform: translate(-50%,-50%);
padding:0px;
}
.playWnd {
width: 1200px; /*播放容器的宽和高设定*/
height: 700px;
}
</style>
<body>
<div class="camera-box">
<!-- 视口区域 -->
<div class="camera-body">
<div id="playWnd" class="playWnd"></div>
</div>
</div>
</body>
<!--三个必要的js文件引入-->
<script src="jquery-1.12.4.min.js"></script>
<script src="jsencrypt.min.js"></script> <!-- 用于RSA加密 -->
<script src="jsWebControl-1.0.0.min.js"></script> <!-- 用于前端与插件交互 -->
<script type="text/javascript">
let carmerCard = "";
// 窗口加载结束事件
window.onload = () => {
// 子页面接收消息
window.addEventListener('message', function (e) {
if (e.data) {
carmerCard = e.data[1]
$("#carmerName").text(e.data[0]) // 设备名称
$("#carmerCard").text(e.data[1]) // 设备编号
$("#carmerAppKey").text(e.data[2])// appkey
$("#carmerIp").text(e.data[3]) // 设备ip
$("#carmerPort").text(e.data[4]) // 网络端口
$("#appSecret").text(e.data[5]) // 秘钥
}
}, false)
// 创建视频播放插件
initPlugin();
}
// 关闭按钮 调用父页面的关闭函数
$("#closeBtn").click(function(){
window.parent.postMessage(
{
cmd: 'close'
}
)
})
//声明公用变量
var initCount = 0;
var pubKey = '';
// 创建播放器方法实例
function initPlugin () {
oWebControl = new WebControl({
szPluginContainer: "playWnd", // 指定容器id
iServicePortStart: 15900, // 指定起止端口号，建议使用该值
iServicePortEnd: 15909,
szClassId:"23BF3B0A-2C56-4D97-9C03-0CB103AA8F11", // 用于IE10使用ActiveX的clsid
cbConnectSuccess: function () { // 创建WebControl实例成功后的回调函数
oWebControl.JS_StartService("window", { // WebControl实例创建成功后需要启动VideoPluginPlugin.exe服务
dllPath: "./VideoPluginConnect.dll" // 值"./VideoPluginConnect.dll"写死
}).then(function () { // 启动插件服务成功
oWebControl.JS_SetWindowControlCallback({ // 设置消息回调
cbIntegrationCallBack: cbIntegrationCallBack
});
oWebControl.JS_CreateWnd("playWnd", 1200, 700).then(function () { //JS_CreateWnd创建视频播放窗口，宽高可设定
init(); // 创建播放实例成功后初始化
});
}, function () { // 创建播放实例失败回调
console.log("创建播放实例失败！！！");
});
},
cbConnectError: function () { // 创建WebControl实例失败
oWebControl = null;
$("#playWnd").html("插件未启动，正在尝试启动，请稍候...");
WebControl.JS_WakeUp("VideoWebPlugin://"); // 程序未启动时执行error函数，采用wakeup来启动程序
initCount ++;
if (initCount < 3) {
setTimeout(function () {
initPlugin();
}, 3000)
} else {
$("#playWnd").html("插件启动失败，请检查插件是否安装！");
}
},
cbConnectClose: function (bNormalClose) {
// 异常断开：bNormalClose = false
// JS_Disconnect正常断开：bNormalClose = true
oWebControl = null;
}
});
}
// 设置窗口控制回调
function setCallbacks() {
oWebControl.JS_SetWindowControlCallback({
cbIntegrationCallBack: cbIntegrationCallBack
});
}
// 推送消息
function cbIntegrationCallBack(oData) {
// showCBInfo(JSON.stringify(oData.responseMsg));
}
//初始化播放内容
function init()
{
getPubKey(function () {
////////////////////////////////// 请自行修改以下变量值 ////////////////////////////////////
// var appkey = "21274765"; //综合安防管理平台提供的appkey，必填
// var ip = "223.99.16.253"; //综合安防管理平台IP地址，必填
// var port = 1443; //综合安防管理平台端口，若启用HTTPS协议，默认443
var appkey = "23604396"; //综合安防管理平台提供的appkey，必填
var ip = "221.2.83.54"; //综合安防管理平台IP地址，必填
var port = 1443;
var appSecret = "NZJ8L3bxCOOV6rtTFjsx";
var secret = setEncrypt(appSecret); //综合安防管理平台提供的secret，必填
let cameraCount = carmerCard.split(",").length;
let layerOut = "1x1";
if(cameraCount<=1){
layerOut = "1x1";
}else if(cameraCount>1 && cameraCount<=4){
layerOut = "2x2";
}else if(cameraCount>4 && cameraCount<=9){
layerOut = "3x3";
}else if(cameraCount>9 && cameraCount<=16){
layerOut = "4x4";
}else if(cameraCount>16 && cameraCount<=25){
layerOut = "5x5";
}
var playMode = 0; //初始播放模式：0-预览，1-回放
var snapDir = "D:\\SnapDir"; //抓图存储路径
var videoDir = "D:\\VideoDir"; //紧急录像或录像剪辑存储路径
var layout = layerOut; //playMode指定模式的布局 默认1*1
var enableHTTPS = 1; //是否启用HTTPS协议与综合安防管理平台交互，这里总是填1
var encryptedFields = 'secret'; //加密字段，默认加密领域为secret
var showToolbar = 1; //是否显示工具栏，0-不显示，非0-显示
var showSmart = 1; //是否显示智能信息（如配置移动侦测后画面上的线框），0-不显示，非0-显示
var buttonIDs = "0,16,256,257,258,259,260,512,513,514,515,516,517,768,769"; //自定义工具条按钮
////////////////////////////////// 请自行修改以上变量值 ////////////////////////////////////
oWebControl.JS_RequestInterface({
funcName: "init",
argument: JSON.stringify({
appkey: appkey, //API网关提供的appkey
secret: secret, //API网关提供的secret
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) {
oWebControl.JS_Resize(1200, 700); // 初始化后resize一次，规避firefox下首次显示窗口后插件窗口未与DIV窗口重合问题
setWndCover();
});
var cameraIndexCode = carmerCard; //获取输入的监控点编号值，必填
var streamMode = 0; //主子码流标识：0-主码流，1-子码流
var transMode = 1; //传输协议：0-UDP，1-TCP
var gpuMode = 0; //是否启用GPU硬解，0-不启用，1-启用
var wndId = -1; //播放窗口序号（在2x2以上布局下可指定播放窗口）
// 封装传入需要播放的监控信息
let monitors = {list:[]};
var cameraIndexCodes = cameraIndexCode.split(",")
cameraIndexCodes.forEach((item,index)=>{
let obj = {
cameraIndexCode:item, //监控点编号
streamMode: streamMode, //主子码流标识
transMode: transMode, //传输协议
gpuMode: gpuMode, //是否开启GPU硬解
wndId:index+1 //可指定播放窗口
}
monitors.list.push(obj);
})
// 开始预览多个视频
oWebControl.JS_RequestInterface({
funcName: "startMultiPreviewByCameraIndexCode",
argument: JSON.stringify(monitors)
})
});
}
//获取公钥
function getPubKey (callback) {
oWebControl.JS_RequestInterface({
funcName: "getRSAPubKey",
argument: JSON.stringify({
keyLength: 1024
})
}).then(function (oData) {
if (oData.responseMsg.data) {
pubKey = oData.responseMsg.data;
callback()
}
})
}
//RSA加密
function setEncrypt (value) {
var encrypt = new JSEncrypt();
encrypt.setPublicKey(pubKey);
return encrypt.encrypt(value);
}
// 监听resize事件，使插件窗口尺寸跟随DIV窗口变化
$(window).resize(function (event) {
console.log(event);
if (oWebControl != null) {
oWebControl.JS_Resize(1200, 700);
setWndCover();
}
});
// 监听滚动条scroll事件，使插件窗口跟随浏览器滚动而移动
$(window).scroll(function () {
if (oWebControl != null) {
oWebControl.JS_Resize(360, 230);
setWndCover();
}
});
// 设置窗口裁剪，当因滚动条滚动导致窗口需要被遮住的情况下需要JS_CuttingPartWindow部分窗口
function setWndCover() {
var iWidth = $(window).width();
var iHeight = $(window).height();
var oDivRect = $("#playWnd").get(0).getBoundingClientRect();
var iCoverLeft = (oDivRect.left < 0) ? Math.abs(oDivRect.left): 0;
var iCoverTop = (oDivRect.top < 0) ? Math.abs(oDivRect.top): 0;
var iCoverRight = (oDivRect.right - iWidth > 0) ? Math.round(oDivRect.right - iWidth) : 0;
var iCoverBottom = (oDivRect.bottom - iHeight > 0) ? Math.round(oDivRect.bottom - iHeight) : 0;
iCoverLeft = (iCoverLeft > 360) ? 360 : iCoverLeft;
iCoverTop = (iCoverTop > 230) ? 230 : iCoverTop;
iCoverRight = (iCoverRight > 360) ? 360 : iCoverRight;
iCoverBottom = (iCoverBottom > 230) ? 230 : iCoverBottom;
oWebControl.JS_RepairPartWindow(0, 0, 1001, 230); // 多1个像素点防止还原后边界缺失一个像素条
if (iCoverLeft != 0) {
oWebControl.JS_CuttingPartWindow(0, 0, iCoverLeft, 230);
}
if (iCoverTop != 0) {
oWebControl.JS_CuttingPartWindow(0, 0, 1001, iCoverTop); // 多剪掉一个像素条，防止出现剪掉一部分窗口后出现一个像素条
}
if (iCoverRight != 0) {
oWebControl.JS_CuttingPartWindow(360 - iCoverRight, 0, iCoverRight, 230);
}
if (iCoverBottom != 0) {
oWebControl.JS_CuttingPartWindow(0, 230 - iCoverBottom, 360, iCoverBottom);
}
}
//视频预览功能
$("#startPreview").click(function () {
var cameraIndexCode = cameraIndexCode; //获取输入的监控点编号值，必填
var streamMode = 0; //主子码流标识：0-主码流，1-子码流
var transMode = 1; //传输协议：0-UDP，1-TCP
var gpuMode = 0; //是否启用GPU硬解，0-不启用，1-启用
var wndId = -1; //播放窗口序号（在2x2以上布局下可指定播放窗口）
cameraIndexCode = cameraIndexCode.replace(/(^\s*)/g, "");
cameraIndexCode = cameraIndexCode.replace(/(\s*$)/g, "");
oWebControl.JS_RequestInterface({
funcName: "startPreview",
argument: JSON.stringify({
cameraIndexCode:cameraIndexCode, //监控点编号
streamMode: streamMode, //主子码流标识
transMode: transMode, //传输协议
gpuMode: gpuMode, //是否开启GPU硬解
wndId:wndId //可指定播放窗口
})
})
});
//停止全部预览
$("#stopAllPreview").click(function () {
oWebControl.JS_RequestInterface({
funcName: "stopAllPreview"
});
});
// 标签关闭
$(window).unload(function () {
if (oWebControl != null){
oWebControl.JS_HideWnd(); // 先让窗口隐藏，规避可能的插件窗口滞后于浏览器消失问题
oWebControl.JS_Disconnect().then(function(){ // 断开与插件服务连接成功
},
function() { // 断开与插件服务连接失败
});
}
});
</script>
<!--
-->
</html>

1
src/packages/components/Zhichu/Zhichu/ZhiChu_LuXianGuHua/config.ts
View File

@ -62,4 +62,5 @@ export default class Config extends PublicConfigClass implements CreateComponent
public attr = { ...chartInitConfig, w: 417, h: 891, zIndex: -1 }
public chartConfig = cloneDeep(ZhiChu_LuXianGuHuaConfig)
public option = cloneDeep(option)
public filter = "return res.result;"
}

1
src/packages/components/Zhichu/Zhichu/ZhiChu_ModalTable/config.ts
View File

@ -106,4 +106,5 @@ export default class Config extends PublicConfigClass implements CreateComponent
public attr = { ...chartInitConfig, w: 1060, h: 570, zIndex: -1 }
public chartConfig = cloneDeep(ZhiChu_ModalTableConfig)
public option = cloneDeep(option)
public filter = "return res.result;"
}

1
src/packages/components/Zhichu/Zhichu/ZhiChu_TuLi/config.ts
View File

@ -118,4 +118,5 @@ export default class Config extends PublicConfigClass implements CreateComponent
public attr = { ...chartInitConfig, w: 400, h: 260, zIndex: -1 }
public chartConfig = cloneDeep(ZhiChu_TuLiConfig)
public option = cloneDeep(option)
public filter = "return res.result;"
}

1
src/packages/components/Zhigan/Zhigan/ZhiGan_ModalCarousel/config.ts
View File

@ -62,4 +62,5 @@ export default class Config extends PublicConfigClass implements CreateComponent
public attr = { ...chartInitConfig, w: 320, h: 250, zIndex: -1 }
public chartConfig = cloneDeep(ZhiGan_ModalCarouselConfig)
public option = cloneDeep(option)
public filter = "return res.result;"
}

2
src/packages/components/Zhigan/Zhigan/ZhiGan_ModalInfo/config.ts
View File

@ -38,6 +38,6 @@ export default class Config extends PublicConfigClass implements CreateComponent
public attr = { ...chartInitConfig, w: 400, h: 300, zIndex: -1 }
public chartConfig = cloneDeep(ZhiGan_ModalInfoConfig)
public option = cloneDeep(option)
public request = { ...requestSqlConfig, requestSQLContent: { sql: "select * from fm_fireclueinfo where Id = '530885841530002'"}, }
public request = { ...requestSqlConfig, requestSQLContent: { sql: 'select * from fm_fireclueinfo where "Id" = #{Id}'}, }
public filter = "return res.result;"
}

4
src/packages/components/Zhigan/Zhigan/ZhiGan_ModalTimeLine/config.ts
View File

@ -1,7 +1,7 @@
import cloneDeep from 'lodash/cloneDeep'
import { PublicConfigClass } from '@/packages/public'
import { CreateComponentType } from '@/packages/index.d'
import { chartInitConfig } from '@/settings/designSetting'
import { chartInitConfig, requestSqlConfig } from '@/settings/designSetting'
import { ZhiGan_ModalTimeLineConfig } from './index'
import dataJson from './data.json'
@ -70,4 +70,6 @@ export default class Config extends PublicConfigClass implements CreateComponent
public attr = { ...chartInitConfig, w: 250, h: 450, zIndex: 5 }
public chartConfig = cloneDeep(ZhiGan_ModalTimeLineConfig)
public option = cloneDeep(option)
public request = { ...requestSqlConfig, requestSQLContent: { sql: 'select "Title" AS "title","Content" ,"CreateTime" AS "time" from fm_fireclueinfolog where "Fireclueid" = #{Id}' }, }
public filter = "return res.result;"
}

12
src/packages/components/Zhigan/Zhigan/ZhiGan_ModalVideo/config.ts
View File

@ -1,12 +1,14 @@
import cloneDeep from 'lodash/cloneDeep'
import { PublicConfigClass } from '@/packages/public'
import { CreateComponentType } from '@/packages/index.d'
import { chartInitConfig } from '@/settings/designSetting'
import { chartInitConfig, requestSqlConfig } from '@/settings/designSetting'
import { ZhiGan_ModalVideoConfig } from './index'
import dataJson from './data.json'
const { source } = dataJson;
export const option = {
dataset: 'http://111.36.45.20:18000/flv/hls/H-dcb1ea7388588111.flv',
dataset: source,
dataStyle: {
backgroud: '#FFFFFF00',
videoLoop: false, // 视频-循环播放
@ -19,6 +21,10 @@ export const option = {
borderColor: '#008000',
borderColorClone: '#008000',
padding: 4,
serialNumberValue: '',
titleFontSize: 12,
titleFontColor: '#ffffff',
}
}
@ -27,4 +33,6 @@ export default class Config extends PublicConfigClass implements CreateComponent
public attr = { ...chartInitConfig, w: 320, h: 220, zIndex: -1 }
public chartConfig = cloneDeep(ZhiGan_ModalVideoConfig)
public option = cloneDeep(option)
public request = { ...requestSqlConfig, requestSQLContent: { sql: 'SELECT "Id", "Name", "SerialNumber"\r\nFROM fm_camera\r\nWHERE ST_DWithin(\r\n ST_GeographyFromText(\'POINT(\' || \r\n (SELECT \"Lng\" FROM fm_fireclueinfo WHERE "Id" = #{Id}) || \' \' || \r\n (SELECT \"Lat\" FROM fm_fireclueinfo WHERE "Id" = #{Id}) || \r\n \')\'),\r\n ST_GeographyFromText(\'POINT(\' || \"Lng\" || \' \' || \"Lat\" || \')\'),\r\n 1000\r\n) = true' }, }
public filter = "return res.result;"
}

22
src/packages/components/Zhigan/Zhigan/ZhiGan_ModalVideo/config.vue
View File

@ -2,7 +2,13 @@
<CollapseItem name="数据设置" :expanded="true">
<n-tag type="primary">编辑页面修改视频数据配置后，请在预览页面查看效果</n-tag>
<SettingItemBox name="默认路径" :alone="true">
<n-input v-model:value="optionData.dataset" size="small"></n-input>
<n-select
v-model:value="optionData.dataStyle.serialNumberValue"
:options="option.dataset"
label-field="name"
value-field="serialNumber"
placeholder="请选择默认视频"
/>
</SettingItemBox>
<SettingItemBox name="视频设置">
@ -51,6 +57,20 @@
:min="0"
></n-input-number>
</SettingItem>
<SettingItem name="标题字体大小">
<n-input-number
v-model:value="optionData.dataStyle.titleFontSize"
size="small"
:min="0"
></n-input-number>
</SettingItem>
<SettingItem name="标题字体颜色">
<n-color-picker
size="small"
:modes="['rgb']"
v-model:value="optionData.dataStyle.titleFontColor"
></n-color-picker>
</SettingItem>
<SettingItem name="背景颜色">
<n-color-picker
size="small"

44
src/packages/components/Zhigan/Zhigan/ZhiGan_ModalVideo/data.json Normal file
View File

@ -0,0 +1,44 @@
{
"source": [
{
"id": 418015298064389,
"name": "XZD148青山裕南山",
"serialNumber": "13b23c9b878143bc99269898964af54f"
},
{
"id": 418015349661701,
"name": "XZD153狼窝沟西南",
"serialNumber": "74b95e6575d741489b9a9061bb646467"
},
{
"id": 418015349899269,
"name": "XZD152青山裕水库东",
"serialNumber": "ecdb49050c57452dbae7ec6f03e82667"
},
{
"id": 418015350452229,
"name": "XZD147大古台南山",
"serialNumber": "edd84ccac34441c48c6a7bf030f9c13f"
},
{
"id": 418015351681029,
"name": "XZD151青山裕水库西",
"serialNumber": "c10f9faea87d4f659e2bc01de24e29a9"
},
{
"id": 418015351836677,
"name": "XZD149青山裕北山",
"serialNumber": "909e98d192f649fea4c5269f5f7832e1"
},
{
"id": 418015351025669,
"name": "XZD150青山裕山里人家西北",
"serialNumber": "b56f09f8c64249379e42481c7b173dce"
},
{
"id": 490483936976901,
"name": "XZD155突围路广场",
"serialNumber": "a8010ac49baa4b81a569ba24dc95a4e7"
}
]
}

132
src/packages/components/Zhigan/Zhigan/ZhiGan_ModalVideo/hk/mulHKmonitor.vue Normal file
View File

@ -0,0 +1,132 @@
<template>
<div class="box-container">
<iframe
id="iframe"
ref="fIframe"
scrolling="no"
frameborder="0"
width="100%"
height="100%"
src="/public/monitor/mulIndex.html"
>
</iframe>
</div>
</template>
<script>
export default {
name: 'monitorbox',
props: ['deviceId', 'channelId'],
data() {
return {
list: [],
monitorPlayer: null,
};
},
mounted() {
let arr = [
this.deviceId,
this.deviceId,
'23604396',
'221.2.83.54',
1443,
'NZJ8L3bxCOOV6rtTFjsx',
];
let _this = this;
this.$refs.fIframe.onload = function () {
_this.$refs.fIframe.contentWindow.postMessage(arr);
};
window.addEventListener('message', (e) => {
this.$emit('closeMonitor');
});
},
};
</script>
<style scoped>
.box-container {
width: 100vw;
height: 100vh;
}
.table-header {
width: calc(100% - 10px);
height: 25px;
color: #fff;
text-align: center;
}
.table-header div {
float: left;
width: 25%;
border-bottom: 1px dashed #00fff0;
padding-bottom: 8px;
}
.table-body {
width: 100%;
height: calc(100% - 40px);
overflow-y: auto;
}
.table-body .item {
width: 100%;
height: 36px;
background: #00ffee2f;
font-size: 12px;
text-align: center;
line-height: 36px;
cursor: pointer;
}
.table-body .item:nth-child(2n) {
background: #00ffee50;
}
.table-body .item div {
float: left;
width: 25%;
color: #eee;
overflow: hidden;
height: 36px;
}
::-webkit-scrollbar-track,
::-webkit-scrollbar-thumb {
border: 0;
}
::-webkit-scrollbar {
height: 10px;
width: 10px;
background: transparent;
border-radius: 5px;
}
::-webkit-scrollbar-thumb {
padding-top: 100px;
-webkit-box-shadow:
inset 1px 1px 0 rgba(0, 0, 0, 0.1),
inset -1px -1px 0 rgba(0, 0, 0, 0.07);
background-color: #797979;
min-height: 28px;
border-radius: 4px;
background-clip: padding-box;
}
::-webkit-scrollbar-track,
::-webkit-scrollbar-thumb {
border: 0;
}
::-webkit-scrollbar-thumb:hover {
-webkit-box-shadow: inset 1px 1px 1px rgba(0, 0, 0, 0.25);
background-color: rgba(0, 0, 0, 0.4);
}
::-webkit-scrollbar-thumb:active {
-webkit-box-shadow: inset 1px 1px 3px rgba(0, 0, 0, 0.35);
background-color: rgba(0, 0, 0, 0.5);
}
</style>

109
src/packages/components/Zhigan/Zhigan/ZhiGan_ModalVideo/index.vue
View File

@ -1,8 +1,30 @@
<template>
<div class="ZhiGan_ModalVideo">
<div class="modalVideoTitle">
<n-select
v-model:value="option.dataStyle.serialNumberValue"
:options="option.dataset"
label-field="name"
value-field="serialNumber"
placeholder="请选择查看的视频"
/>
</div>
<!-- 编辑状态 -->
<!-- 无视频url的情况 -->
<n-image
v-if="isEdit || !option.dataStyle.serialNumberValue"
:width="`${w - 2 * option.dataStyle.padding - 2 * option.dataStyle.borderWidth}`"
:height="`${h - 2 * option.dataStyle.padding - 2 * option.dataStyle.borderWidth}`"
src="/src/assets/images/chart/zhichu/component/SheXiangTouModal_Image.png"
preview-disabled
/>
<!-- 其他情况 -->
<video
v-if="isEdit"
v-else-if="
option.dataStyle.serialNumberValue.includes('https://') ||
option.dataStyle.serialNumberValue.includes('http://')
"
:id="'ZhiGan_ModalVideo' + option.dataStyle.timestamp"
class="TCPlayer-video-contaiiner"
preload="auto"
crossOrigin="anonymous"
@ -12,19 +34,10 @@
:muted="option.dataStyle.videoMuted"
:width="`${w - 2 * option.dataStyle.padding - 2 * option.dataStyle.borderWidth}`"
:height="`${h - 2 * option.dataStyle.padding - 2 * option.dataStyle.borderWidth}`"
src="/src/assets/videos/earth.mp4"
/>
<!-- 其他情况 -->
<video
<MulHKmonitor
v-else
:id="'ZhiGan_ModalVideo' + option.dataStyle.timestamp"
class="TCPlayer-video-contaiiner"
preload="auto"
crossOrigin="anonymous"
playsinline
autoplay
:loop="option.dataStyle.videoLoop"
:muted="option.dataStyle.videoMuted"
:serialNumberValue="option.dataStyle.serialNumberValue"
:width="`${w - 2 * option.dataStyle.padding - 2 * option.dataStyle.borderWidth}`"
:height="`${h - 2 * option.dataStyle.padding - 2 * option.dataStyle.borderWidth}`"
/>
@ -40,6 +53,7 @@
import { EventBus } from '@/utils/eventBus';
import { replaceSqlParams } from '@/utils/sqlHandler';
import dayjs from 'dayjs';
import MulHKmonitor from './hk/mulHKmonitor.vue';
const props = defineProps({
chartConfig: {
@ -48,6 +62,8 @@
},
});
console.log(document.location);
const { w, h } = toRefs(props.chartConfig.attr);
const option = reactive({
@ -58,27 +74,47 @@
// 是否是编辑状态
const isEdit = window.location.href.includes('/chart/home/');
// 状态隐藏、显示
watch(
() => option.status.hide,
() => {
if (!option.status.hide) {
if (!window.location.href.includes('/chart/home/')) {
setTimeout(function () {
handlerPlayVideo();
}, 1000);
if (!option.status.hide && !isEdit) {
setTimeout(function () {
handlerPlayVideo();
}, 1000);
}
},
);
// 播放的视频
watch(
() => option.dataStyle.serialNumberValue,
() => {
if (option.dataStyle.serialNumberValue) {
handlerPlayVideo();
} else {
if (player) {
player.dispose();
player = null;
}
}
},
);
// 视频控件初始化
let player: any = null;
function handlerPlayVideo() {
if (!option.status.hide) {
if (
!option.status.hide &&
!isEdit &&
(option.dataStyle.serialNumberValue.includes('https://') ||
option.dataStyle.serialNumberValue.includes('http://'))
) {
if (player) {
player.src(option.dataset);
player.src(option.dataStyle.serialNumberValue);
} else {
player = TCPlayer('ZhiGan_ModalVideo' + option.dataStyle.timestamp, {});
player.src(option.dataset);
player.src(option.dataStyle.serialNumberValue);
}
}
}
@ -125,6 +161,7 @@
<style lang="scss" scoped>
.ZhiGan_ModalVideo {
overflow-y: auto;
position: relative;
border: v-bind('`${option.dataStyle.borderWidth}px`') solid
v-bind('`${option.dataStyle.borderColor}`');
background: v-bind('`${option.dataStyle.backgroud}`');
@ -144,6 +181,38 @@
object-fit: v-bind('option.dataStyle.videoFit');
}
.modalVideoTitle {
position: absolute;
width: 90%;
top: 5%;
left: 5%;
z-index: 1;
}
::v-deep .n-base-selection {
--n-border: 0px solid #ffffff00 !important;
background: #ffffff00 !important;
}
::v-deep .n-base-selection--selected {
--n-border: 0px solid #ffffff00 !important;
}
::v-deep .n-base-selection-label {
background: #ffffff00 !important;
}
::v-deep .n-base-selection-input {
background: #ffffff00 !important;
}
::v-deep .n-base-selection-input__content {
font-family:
PingFangSC,
PingFang SC;
font-weight: 900;
font-size: v-bind('`${ option.dataStyle.titleFontSize }px`') !important;
color: v-bind('`${option.dataStyle.titleFontColor}`') !important;
text-align: left;
font-style: normal;
}
::v-deep .vjs-live-control .vjs-live-display {
width: 100px !important;
}

1
src/packages/components/Zhigan/Zhigan/ZhiGan_SheXiangTouLeiXing/config.ts
View File

@ -29,4 +29,5 @@ export default class Config extends PublicConfigClass implements CreateComponent
public attr = { ...chartInitConfig, w: 400, h: 430, zIndex: -1 }
public chartConfig = cloneDeep(ZhiGan_SheXiangTouLeiXingConfig)
public option = cloneDeep(option)
public filter = "return res.result;"
}

1
src/packages/components/Zhigan/Zhigan/ZhiGan_YongHuShu/config.ts
View File

@ -40,4 +40,5 @@ export default class Config extends PublicConfigClass implements CreateComponent
public attr = { ...chartInitConfig, w: 400, h: 250, zIndex: -1 }
public chartConfig = cloneDeep(ZhiGan_YongHuShuConfig)
public option = cloneDeep(option)
public filter = "return res.result;"
}

1
src/packages/components/Zhiku/Zhiku/HuoQingDetailInfo/config.ts
View File

@ -37,4 +37,5 @@ export default class Config extends PublicConfigClass implements CreateComponent
public attr = { ...chartInitConfig, w: 320, h: 220, zIndex: -1 }
public chartConfig = cloneDeep(HuoQingDetailInfoConfig)
public option = cloneDeep(option)
public filter = "return res.result;"
}

1
src/packages/components/Zhiku/Zhiku/HuoQingDetailProcessButton/config.ts
View File

@ -32,4 +32,5 @@ export default class Config extends PublicConfigClass implements CreateComponent
public attr = { ...chartInitConfig, w: 197, h: 480, zIndex: 5 }
public chartConfig = cloneDeep(HuoQingDetailProcessButtonConfig)
public option = cloneDeep(option)
public filter = "return res.result;"
}

1
src/packages/components/Zhiku/Zhiku/HuoQingDetailTimeLine/config.ts
View File

@ -70,4 +70,5 @@ export default class Config extends PublicConfigClass implements CreateComponent
public attr = { ...chartInitConfig, w: 350, h: 680, zIndex: 5 }
public chartConfig = cloneDeep(HuoQingDetailTimeLineConfig)
public option = cloneDeep(option)
public filter = "return res.result;"
}

1
src/packages/components/Zhilan/Zhilan/ZhiLan_ZhongZhiShuLiangMianJi/config.ts
View File

@ -45,4 +45,5 @@ export default class Config extends PublicConfigClass implements CreateComponent
public attr = { ...chartInitConfig, w: 400, h: 900, zIndex: 1 }
public chartConfig = cloneDeep(ZhiLan_ZhongZhiShuLiangMianJiConfig)
public option = cloneDeep(option)
public filter = "return res.result;"
}