lishenfeng
/
tsg-web
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Compare commits

base: lishenfeng:master
Branches Tags
lishenfeng:master
lishenfeng:qzc-dev
lishenfeng:qzc-dev-demo
lishenfeng:lsf-dev
..
compare: lishenfeng:qzc-dev
Branches Tags
lishenfeng:master
lishenfeng:qzc-dev
lishenfeng:qzc-dev-demo
lishenfeng:lsf-dev

1 Commits
master ... qzc-dev

Author SHA1 Message Date
秦子超 3b2a1445c7 提交 2025-11-21 09:49:24 +08:00
55 changed files with 1596 additions and 2925 deletions
Show Stats Expand all files Collapse all files

2
.env.development
View File

@ -1,3 +1,3 @@
GENERATE_SOURCEMAP=true GENERATE_SOURCEMAP=true
PUBLIC_URL=/tsg PUBLIC_URL=/tsg
REACT_APP_API_URL=http://223.75.53.141:83 REACT_APP_API_URL=http://local.gunshiiot.com:18083

2
.env.production
View File

@ -1,3 +1,3 @@
GENERATE_SOURCEMAP=false GENERATE_SOURCEMAP=false
PUBLIC_URL=/tsg PUBLIC_URL=/tsg
REACT_APP_API_URL=http://223.75.53.141:83 REACT_APP_API_URL=http://local.gunshiiot.com:18083

1
.gitignore vendored
View File

@ -24,7 +24,6 @@ yarn-debug.log*
yarn-error.log* yarn-error.log*
yarn.lock yarn.lock
build.7z build.7z
build1.zip
#ai #ai
.serena/ .serena/

1
public/data/json/czml3.json Normal file
View File

File diff suppressed because one or more lines are too long

0
public/data/json/czml4.json Normal file
View File

314
public/h5Player/h5player.min.js vendored
View File

File diff suppressed because one or more lines are too long

79
public/h5Player/playctrl1/DecodeWorker.js
View File

@ -17,10 +17,10 @@
const PLAYM4_NEED_NEET_LOOP = 35; //丢帧需要下个循环 const PLAYM4_NEED_NEET_LOOP = 35; //丢帧需要下个循环
const PLAYM4_SYS_NOT_SUPPORT = 16; // 不支持 const PLAYM4_SYS_NOT_SUPPORT = 16; // 不支持
// importScripts('Decoder.js'); importScripts('Decoder.js');
// Module.addOnPostRun(function () { Module.addOnPostRun(function () {
// postMessage({ 'function': "loaded" }); postMessage({ 'function': "loaded" });
// }); });
var iStreamMode = 0; // 流模式 var iStreamMode = 0; // 流模式
@ -48,32 +48,10 @@
postMessage({ 'function': "RunTimeInfoCallBack", 'nRunTimeModule': nRunTimeModule, 'nStrVersion': nStrVersion, 'nFrameTimeStamp': nFrameTimeStamp, 'nFrameNum': nFrameNum, 'nErrorCode': nErrorCode }); postMessage({ 'function': "RunTimeInfoCallBack", 'nRunTimeModule': nRunTimeModule, 'nStrVersion': nStrVersion, 'nFrameTimeStamp': nFrameTimeStamp, 'nFrameNum': nFrameNum, 'nErrorCode': nErrorCode });
} }
self.JSPlayM4_StreamInfoCallBack = function (nPort, pstStreamInfo, pUser)
{
let port = nPort;
let user = pUser;
let nSystemformat = Module.HEAP16[pstStreamInfo >> 1]; //封装类型
let nVideoformat = Module.HEAP16[pstStreamInfo + 2 >> 1];//视频编码类型
let nAudioformat = Module.HEAP16[pstStreamInfo + 4 >> 1];//音频编码类型
let nAudiochannels = Module.HEAP16[pstStreamInfo + 6 >> 1]; //音频通道数
let nAudiobitspersample = Module.HEAP32[pstStreamInfo + 8 >> 2];//音频样位率
let nAudiosamplesrate = Module.HEAP32[pstStreamInfo + 12 >> 2];//音频采样率
let nAudiobitrate = Module.HEAP32[pstStreamInfo + 16 >> 2];//音频比特率,单位：bit
//console.log("nSystemformat:" + nSystemformat + ",nVideoformat:" + nVideoformat + ",nAudioformat:" + nAudioformat + ",nAudiochannels:" + nAudiochannels + ",nAudiobitspersample:" + nAudiobitspersample + ",nAudiosamplesrate:" + nAudiosamplesrate + ",nAudiobitrate:" + nAudiobitrate);
postMessage({ 'function': "StreamInfoCallBack", 'nSystemformat': nSystemformat, 'nVideoformat': nVideoformat, 'nAudioformat': nAudioformat, 'nAudiochannels': nAudiochannels, 'nAudiobitspersample': nAudiobitspersample, 'nAudiosamplesrate': nAudiosamplesrate, 'nAudiobitrate': nAudiobitrate});
}
onmessage = function (event) { onmessage = function (event) {
var eventData = event.data; var eventData = event.data;
var res = 0; var res = 0;
switch (eventData.command) { switch (eventData.command) {
case "importScripts":
const decodebase = eventData.data + "Decoder.js"
importScripts(decodebase);
Module.addOnPostRun(function () {
postMessage({ 'function': "loaded" });
});
break;
case "printLog": case "printLog":
let downloadFlag = eventData.data; let downloadFlag = eventData.data;
if (downloadFlag === true) { if (downloadFlag === true) {
@ -228,7 +206,7 @@
var nBMPHeight = eventData.height; var nBMPHeight = eventData.height;
var pYUVData = eventData.data; var pYUVData = eventData.data;
var nYUVSize = nBMPWidth * nBMPHeight * 3 / 2; var nYUVSize = nBMPWidth * nBMPHeight * 3 / 2;
var oBMPCropRect = { var oJpegCropRect = {
left: eventData.left, left: eventData.left,
top: eventData.top, top: eventData.top,
right: eventData.right, right: eventData.right,
@ -475,7 +453,7 @@
Module._SetLostFrameMode(g_nPort, eventData.data, 0); Module._SetLostFrameMode(g_nPort, eventData.data, 0);
break; break;
case "SetDemuxModel": case "SetDemuxModel":
let resSDM = Module._SetDemuxModel(g_nPort, eventData.nIdemuxType, eventData.bTrue); Module._SetDemuxModel(g_nPort, eventData.nIdemuxType, eventData.bTrue);
break; break;
case "SkipErrorData": case "SkipErrorData":
Module._SkipErrorData(g_nPort, eventData.bSkip); Module._SkipErrorData(g_nPort, eventData.bSkip);
@ -498,12 +476,6 @@
break; break;
case "SetRunTimeInfoCB": case "SetRunTimeInfoCB":
Module._SetRunTimeInfoCallBackEx(g_nPort, eventData.nModuleType, 0); Module._SetRunTimeInfoCallBackEx(g_nPort, eventData.nModuleType, 0);
break;
case "SetStreamInfoCB":
Module._SetStreamInfoCallBack(g_nPort, eventData.nType, 0);
break;
case "ResetBuffer":
Module._JSPlayM4_ResetBuffer(g_nPort, eventData.type);
break; break;
default: default:
break; break;
@ -517,7 +489,6 @@
var iHour = oFrameInfo.hour; var iHour = oFrameInfo.hour;
var iMinute = oFrameInfo.minute; var iMinute = oFrameInfo.minute;
var iSecond = oFrameInfo.second; var iSecond = oFrameInfo.second;
var iMiSecond = oFrameInfo.misecond
if (iMonth < 10) { if (iMonth < 10) {
iMonth = "0" + iMonth; iMonth = "0" + iMonth;
@ -534,18 +505,8 @@
if (iSecond < 10) { if (iSecond < 10) {
iSecond = "0" + iSecond; iSecond = "0" + iSecond;
} }
let osdTime = {};
osdTime.year = iYear; return iYear + "-" + iMonth + "-" + iDay + " " + iHour + ":" + iMinute + ":" + iSecond;
osdTime.month = iMonth;
osdTime.week = 0;
osdTime.day = iDay;
osdTime.hour = iHour;
osdTime.minute = iMinute;
osdTime.second = iSecond;
osdTime.milliseconds = iMiSecond;
return osdTime;
//return iYear + "-" + iMonth + "-" + iDay + " " + iHour + ":" + iMinute + ":" + iSecond;
} }
// 获取帧数据 // 获取帧数据
function getFrameData() { function getFrameData() {
@ -554,31 +515,7 @@
var res = Module._GetFrameData(); var res = Module._GetFrameData();
//var res = fun(); //var res = fun();
if (res === PLAYM4_OK) { if (res === PLAYM4_OK) {
var iFrameInfo = Module._GetFrameInfo(); var oFrameInfo = Module._GetFrameInfo();
let oFrameInfo = {};
oFrameInfo.frameType = Module.HEAP32[iFrameInfo >> 2];
oFrameInfo.frameSize = Module.HEAP32[iFrameInfo + 4 >> 2];
oFrameInfo.width = Module.HEAP32[iFrameInfo + 8 >> 2];
oFrameInfo.height = Module.HEAP32[iFrameInfo + 12 >> 2];
oFrameInfo.timeStamp = Module.HEAP32[iFrameInfo + 16 >> 2];
oFrameInfo.frameRate = Module.HEAP32[iFrameInfo + 20 >> 2];
oFrameInfo.bitsPerSample = Module.HEAP32[iFrameInfo + 24 >> 2];
oFrameInfo.samplesPerSec = Module.HEAP32[iFrameInfo + 28 >> 2];
oFrameInfo.channels = Module.HEAP32[iFrameInfo + 32 >> 2];
oFrameInfo.frameNum = Module.HEAP32[iFrameInfo + 36 >> 2];
oFrameInfo.cropLeft = Module.HEAP32[iFrameInfo + 40 >> 2];
oFrameInfo.cropRight = Module.HEAP32[iFrameInfo + 44 >> 2];
oFrameInfo.cropTop = Module.HEAP32[iFrameInfo + 48 >> 2];
oFrameInfo.cropBottom = Module.HEAP32[iFrameInfo + 52 >> 2];
oFrameInfo.year = Module.HEAP16[iFrameInfo + 64 >> 1];
oFrameInfo.month = Module.HEAP16[iFrameInfo + 66 >> 1];
oFrameInfo.day = Module.HEAP16[iFrameInfo + 68 >> 1];
oFrameInfo.hour = Module.HEAP16[iFrameInfo + 70 >> 1];
oFrameInfo.minute = Module.HEAP16[iFrameInfo + 72 >> 1];
oFrameInfo.second = Module.HEAP16[iFrameInfo + 74 >> 1];
oFrameInfo.misecond = Module.HEAP16[iFrameInfo + 76 >> 1];
switch (oFrameInfo.frameType) { switch (oFrameInfo.frameType) {
case AUDIO_TYPE: case AUDIO_TYPE:
var iSize = oFrameInfo.frameSize; var iSize = oFrameInfo.frameSize;

177
public/h5Player/playctrl1/Decoder.js
View File

File diff suppressed because one or more lines are too long

79
public/h5Player/playctrl1simd/DecodeWorker.js
View File

@ -17,10 +17,10 @@
const PLAYM4_NEED_NEET_LOOP = 35; //丢帧需要下个循环 const PLAYM4_NEED_NEET_LOOP = 35; //丢帧需要下个循环
const PLAYM4_SYS_NOT_SUPPORT = 16; // 不支持 const PLAYM4_SYS_NOT_SUPPORT = 16; // 不支持
// importScripts('Decoder.js'); importScripts('Decoder.js');
// Module.addOnPostRun(function () { Module.addOnPostRun(function () {
// postMessage({ 'function': "loaded" }); postMessage({ 'function': "loaded" });
// }); });
var iStreamMode = 0; // 流模式 var iStreamMode = 0; // 流模式
@ -48,32 +48,10 @@
postMessage({ 'function': "RunTimeInfoCallBack", 'nRunTimeModule': nRunTimeModule, 'nStrVersion': nStrVersion, 'nFrameTimeStamp': nFrameTimeStamp, 'nFrameNum': nFrameNum, 'nErrorCode': nErrorCode }); postMessage({ 'function': "RunTimeInfoCallBack", 'nRunTimeModule': nRunTimeModule, 'nStrVersion': nStrVersion, 'nFrameTimeStamp': nFrameTimeStamp, 'nFrameNum': nFrameNum, 'nErrorCode': nErrorCode });
} }
self.JSPlayM4_StreamInfoCallBack = function (nPort, pstStreamInfo, pUser)
{
let port = nPort;
let user = pUser;
let nSystemformat = Module.HEAP16[pstStreamInfo >> 1]; //封装类型
let nVideoformat = Module.HEAP16[pstStreamInfo + 2 >> 1];//视频编码类型
let nAudioformat = Module.HEAP16[pstStreamInfo + 4 >> 1];//音频编码类型
let nAudiochannels = Module.HEAP16[pstStreamInfo + 6 >> 1]; //音频通道数
let nAudiobitspersample = Module.HEAP32[pstStreamInfo + 8 >> 2];//音频样位率
let nAudiosamplesrate = Module.HEAP32[pstStreamInfo + 12 >> 2];//音频采样率
let nAudiobitrate = Module.HEAP32[pstStreamInfo + 16 >> 2];//音频比特率,单位：bit
//console.log("nSystemformat:" + nSystemformat + ",nVideoformat:" + nVideoformat + ",nAudioformat:" + nAudioformat + ",nAudiochannels:" + nAudiochannels + ",nAudiobitspersample:" + nAudiobitspersample + ",nAudiosamplesrate:" + nAudiosamplesrate + ",nAudiobitrate:" + nAudiobitrate);
postMessage({ 'function': "StreamInfoCallBack", 'nSystemformat': nSystemformat, 'nVideoformat': nVideoformat, 'nAudioformat': nAudioformat, 'nAudiochannels': nAudiochannels, 'nAudiobitspersample': nAudiobitspersample, 'nAudiosamplesrate': nAudiosamplesrate, 'nAudiobitrate': nAudiobitrate});
}
onmessage = function (event) { onmessage = function (event) {
var eventData = event.data; var eventData = event.data;
var res = 0; var res = 0;
switch (eventData.command) { switch (eventData.command) {
case "importScripts":
const decodebase = eventData.data + "Decoder.js"
importScripts(decodebase);
Module.addOnPostRun(function () {
postMessage({ 'function': "loaded" });
});
break;
case "printLog": case "printLog":
let downloadFlag = eventData.data; let downloadFlag = eventData.data;
if (downloadFlag === true) { if (downloadFlag === true) {
@ -228,7 +206,7 @@
var nBMPHeight = eventData.height; var nBMPHeight = eventData.height;
var pYUVData = eventData.data; var pYUVData = eventData.data;
var nYUVSize = nBMPWidth * nBMPHeight * 3 / 2; var nYUVSize = nBMPWidth * nBMPHeight * 3 / 2;
var oBMPCropRect = { var oJpegCropRect = {
left: eventData.left, left: eventData.left,
top: eventData.top, top: eventData.top,
right: eventData.right, right: eventData.right,
@ -475,7 +453,7 @@
Module._SetLostFrameMode(g_nPort, eventData.data, 0); Module._SetLostFrameMode(g_nPort, eventData.data, 0);
break; break;
case "SetDemuxModel": case "SetDemuxModel":
let resSDM = Module._SetDemuxModel(g_nPort, eventData.nIdemuxType, eventData.bTrue); Module._SetDemuxModel(g_nPort, eventData.nIdemuxType, eventData.bTrue);
break; break;
case "SkipErrorData": case "SkipErrorData":
Module._SkipErrorData(g_nPort, eventData.bSkip); Module._SkipErrorData(g_nPort, eventData.bSkip);
@ -498,12 +476,6 @@
break; break;
case "SetRunTimeInfoCB": case "SetRunTimeInfoCB":
Module._SetRunTimeInfoCallBackEx(g_nPort, eventData.nModuleType, 0); Module._SetRunTimeInfoCallBackEx(g_nPort, eventData.nModuleType, 0);
break;
case "SetStreamInfoCB":
Module._SetStreamInfoCallBack(g_nPort, eventData.nType, 0);
break;
case "ResetBuffer":
Module._JSPlayM4_ResetBuffer(g_nPort, eventData.type);
break; break;
default: default:
break; break;
@ -517,7 +489,6 @@
var iHour = oFrameInfo.hour; var iHour = oFrameInfo.hour;
var iMinute = oFrameInfo.minute; var iMinute = oFrameInfo.minute;
var iSecond = oFrameInfo.second; var iSecond = oFrameInfo.second;
var iMiSecond = oFrameInfo.misecond
if (iMonth < 10) { if (iMonth < 10) {
iMonth = "0" + iMonth; iMonth = "0" + iMonth;
@ -534,18 +505,8 @@
if (iSecond < 10) { if (iSecond < 10) {
iSecond = "0" + iSecond; iSecond = "0" + iSecond;
} }
let osdTime = {};
osdTime.year = iYear; return iYear + "-" + iMonth + "-" + iDay + " " + iHour + ":" + iMinute + ":" + iSecond;
osdTime.month = iMonth;
osdTime.week = 0;
osdTime.day = iDay;
osdTime.hour = iHour;
osdTime.minute = iMinute;
osdTime.second = iSecond;
osdTime.milliseconds = iMiSecond;
return osdTime;
//return iYear + "-" + iMonth + "-" + iDay + " " + iHour + ":" + iMinute + ":" + iSecond;
} }
// 获取帧数据 // 获取帧数据
function getFrameData() { function getFrameData() {
@ -554,31 +515,7 @@
var res = Module._GetFrameData(); var res = Module._GetFrameData();
//var res = fun(); //var res = fun();
if (res === PLAYM4_OK) { if (res === PLAYM4_OK) {
var iFrameInfo = Module._GetFrameInfo(); var oFrameInfo = Module._GetFrameInfo();
let oFrameInfo = {};
oFrameInfo.frameType = Module.HEAP32[iFrameInfo >> 2];
oFrameInfo.frameSize = Module.HEAP32[iFrameInfo + 4 >> 2];
oFrameInfo.width = Module.HEAP32[iFrameInfo + 8 >> 2];
oFrameInfo.height = Module.HEAP32[iFrameInfo + 12 >> 2];
oFrameInfo.timeStamp = Module.HEAP32[iFrameInfo + 16 >> 2];
oFrameInfo.frameRate = Module.HEAP32[iFrameInfo + 20 >> 2];
oFrameInfo.bitsPerSample = Module.HEAP32[iFrameInfo + 24 >> 2];
oFrameInfo.samplesPerSec = Module.HEAP32[iFrameInfo + 28 >> 2];
oFrameInfo.channels = Module.HEAP32[iFrameInfo + 32 >> 2];
oFrameInfo.frameNum = Module.HEAP32[iFrameInfo + 36 >> 2];
oFrameInfo.cropLeft = Module.HEAP32[iFrameInfo + 40 >> 2];
oFrameInfo.cropRight = Module.HEAP32[iFrameInfo + 44 >> 2];
oFrameInfo.cropTop = Module.HEAP32[iFrameInfo + 48 >> 2];
oFrameInfo.cropBottom = Module.HEAP32[iFrameInfo + 52 >> 2];
oFrameInfo.year = Module.HEAP16[iFrameInfo + 64 >> 1];
oFrameInfo.month = Module.HEAP16[iFrameInfo + 66 >> 1];
oFrameInfo.day = Module.HEAP16[iFrameInfo + 68 >> 1];
oFrameInfo.hour = Module.HEAP16[iFrameInfo + 70 >> 1];
oFrameInfo.minute = Module.HEAP16[iFrameInfo + 72 >> 1];
oFrameInfo.second = Module.HEAP16[iFrameInfo + 74 >> 1];
oFrameInfo.misecond = Module.HEAP16[iFrameInfo + 76 >> 1];
switch (oFrameInfo.frameType) { switch (oFrameInfo.frameType) {
case AUDIO_TYPE: case AUDIO_TYPE:
var iSize = oFrameInfo.frameSize; var iSize = oFrameInfo.frameSize;

177
public/h5Player/playctrl1simd/Decoder.js
View File

File diff suppressed because one or more lines are too long

10
public/h5Player/playctrl2/Decoder.js
View File

File diff suppressed because one or more lines are too long

BIN
public/h5Player/playctrl2/Decoder.wasm
View File

Binary file not shown.

2
public/h5Player/playctrl2/Decoder.worker.js
View File

@ -1 +1 @@
"use strict";var Module={};var initializedJS=false;function threadPrintErr(){var text=Array.prototype.slice.call(arguments).join(" ");console.error(text)}function threadAlert(){var text=Array.prototype.slice.call(arguments).join(" ");postMessage({cmd:"alert",text:text,threadId:Module["_pthread_self"]()})}var err=threadPrintErr;self.alert=threadAlert;Module["instantiateWasm"]=(info,receiveInstance)=>{var module=Module["wasmModule"];Module["wasmModule"]=null;var instance=new WebAssembly.Instance(module,info);return receiveInstance(instance)};self.onunhandledrejection=e=>{throw e.reason??e};function handleMessage(e){try{if(e.data.cmd==="load"){let messageQueue=[];self.onmessage=e=>messageQueue.push(e);self.startWorker=instance=>{Module=instance;postMessage({"cmd":"loaded"});for(let msg of messageQueue){handleMessage(msg)}self.onmessage=handleMessage};Module["wasmModule"]=e.data.wasmModule;for(const handler of e.data.handlers){Module[handler]=(...args)=>{postMessage({cmd:"callHandler",handler:handler,args:args})}}Module["wasmMemory"]=e.data.wasmMemory;Module["buffer"]=Module["wasmMemory"].buffer;Module["ENVIRONMENT_IS_PTHREAD"]=true;if(typeof e.data.urlOrBlob=="string"){importScripts(e.data.urlOrBlob)}else{var objectUrl=URL.createObjectURL(e.data.urlOrBlob);importScripts(objectUrl);URL.revokeObjectURL(objectUrl)}JSPlayerModule(Module)}else if(e.data.cmd==="run"){Module["__emscripten_thread_init"](e.data.pthread_ptr,0,0,1);Module["__emscripten_thread_mailbox_await"](e.data.pthread_ptr);Module["establishStackSpace"]();Module["PThread"].receiveObjectTransfer(e.data);Module["PThread"].threadInitTLS();if(!initializedJS){Module["__embind_initialize_bindings"]();initializedJS=true}try{Module["invokeEntryPoint"](e.data.start_routine,e.data.arg)}catch(ex){if(ex!="unwind"){throw ex}}}else if(e.data.cmd==="cancel"){if(Module["_pthread_self"]()){Module["__emscripten_thread_exit"](-1)}}else if(e.data.target==="setimmediate"){}else if(e.data.cmd==="checkMailbox"){if(initializedJS){Module["checkMailbox"]()}}else if(e.data.cmd){err("worker.js received unknown command "+e.data.cmd);err(e.data)}}catch(ex){if(Module["__emscripten_thread_crashed"]){Module["__emscripten_thread_crashed"]()}throw ex}}self.onmessage=handleMessage; "use strict";var Module={};var initializedJS=false;function threadPrintErr(){var text=Array.prototype.slice.call(arguments).join(" ");console.error(text)}function threadAlert(){var text=Array.prototype.slice.call(arguments).join(" ");postMessage({cmd:"alert",text:text,threadId:Module["_pthread_self"]()})}var err=threadPrintErr;self.alert=threadAlert;Module["instantiateWasm"]=function(info,receiveInstance){var instance=new WebAssembly.Instance(Module["wasmModule"],info);receiveInstance(instance);Module["wasmModule"]=null;return instance.exports};self.onmessage=function(e){try{if(e.data.cmd==="load"){Module["wasmModule"]=e.data.wasmModule;Module["wasmMemory"]=e.data.wasmMemory;Module["buffer"]=Module["wasmMemory"].buffer;Module["ENVIRONMENT_IS_PTHREAD"]=true;if(typeof e.data.urlOrBlob==="string"){importScripts(e.data.urlOrBlob)}else{var objectUrl=URL.createObjectURL(e.data.urlOrBlob);importScripts(objectUrl);URL.revokeObjectURL(objectUrl)}JSPlayerModule(Module).then(function(instance){Module=instance})}else if(e.data.cmd==="run"){Module["__performance_now_clock_drift"]=performance.now()-e.data.time;Module["__emscripten_thread_init"](e.data.threadInfoStruct,0,0);var max=e.data.stackBase;var top=e.data.stackBase+e.data.stackSize;Module["establishStackSpace"](top,max);Module["PThread"].receiveObjectTransfer(e.data);Module["PThread"].threadInit();if(!initializedJS){Module["___embind_register_native_and_builtin_types"]();initializedJS=true}try{var result=Module["invokeEntryPoint"](e.data.start_routine,e.data.arg);if(Module["keepRuntimeAlive"]()){Module["PThread"].setExitStatus(result)}else{Module["__emscripten_thread_exit"](result)}}catch(ex){if(ex!="unwind"){if(ex instanceof Module["ExitStatus"]){if(Module["keepRuntimeAlive"]()){}else{Module["__emscripten_thread_exit"](ex.status)}}else{Module["__emscripten_thread_exit"](-2);throw ex}}}}else if(e.data.cmd==="cancel"){if(Module["_pthread_self"]()){Module["__emscripten_thread_exit"](-1)}postMessage({"cmd":"cancelDone"})}else if(e.data.target==="setimmediate"){}else if(e.data.cmd==="processThreadQueue"){if(Module["_pthread_self"]()){Module["_emscripten_current_thread_process_queued_calls"]()}}else{err("worker.js received unknown command "+e.data.cmd);err(e.data)}}catch(ex){err("worker.js onmessage() captured an uncaught exception: "+ex);if(ex&&ex.stack)err(ex.stack);throw ex}};

10
public/h5Player/playctrl3/Decoder.js
View File

File diff suppressed because one or more lines are too long

BIN
public/h5Player/playctrl3/Decoder.wasm
View File

Binary file not shown.

2
public/h5Player/playctrl3/Decoder.worker.js
View File

@ -1 +1 @@
"use strict";var Module={};var initializedJS=false;function threadPrintErr(){var text=Array.prototype.slice.call(arguments).join(" ");console.error(text)}function threadAlert(){var text=Array.prototype.slice.call(arguments).join(" ");postMessage({cmd:"alert",text:text,threadId:Module["_pthread_self"]()})}var err=threadPrintErr;self.alert=threadAlert;Module["instantiateWasm"]=(info,receiveInstance)=>{var module=Module["wasmModule"];Module["wasmModule"]=null;var instance=new WebAssembly.Instance(module,info);return receiveInstance(instance)};self.onunhandledrejection=e=>{throw e.reason??e};function handleMessage(e){try{if(e.data.cmd==="load"){let messageQueue=[];self.onmessage=e=>messageQueue.push(e);self.startWorker=instance=>{Module=instance;postMessage({"cmd":"loaded"});for(let msg of messageQueue){handleMessage(msg)}self.onmessage=handleMessage};Module["wasmModule"]=e.data.wasmModule;for(const handler of e.data.handlers){Module[handler]=(...args)=>{postMessage({cmd:"callHandler",handler:handler,args:args})}}Module["wasmMemory"]=e.data.wasmMemory;Module["buffer"]=Module["wasmMemory"].buffer;Module["ENVIRONMENT_IS_PTHREAD"]=true;if(typeof e.data.urlOrBlob=="string"){importScripts(e.data.urlOrBlob)}else{var objectUrl=URL.createObjectURL(e.data.urlOrBlob);importScripts(objectUrl);URL.revokeObjectURL(objectUrl)}JSPlayerModule(Module)}else if(e.data.cmd==="run"){Module["__emscripten_thread_init"](e.data.pthread_ptr,0,0,1);Module["__emscripten_thread_mailbox_await"](e.data.pthread_ptr);Module["establishStackSpace"]();Module["PThread"].receiveObjectTransfer(e.data);Module["PThread"].threadInitTLS();if(!initializedJS){Module["__embind_initialize_bindings"]();initializedJS=true}try{Module["invokeEntryPoint"](e.data.start_routine,e.data.arg)}catch(ex){if(ex!="unwind"){throw ex}}}else if(e.data.cmd==="cancel"){if(Module["_pthread_self"]()){Module["__emscripten_thread_exit"](-1)}}else if(e.data.target==="setimmediate"){}else if(e.data.cmd==="checkMailbox"){if(initializedJS){Module["checkMailbox"]()}}else if(e.data.cmd){err("worker.js received unknown command "+e.data.cmd);err(e.data)}}catch(ex){if(Module["__emscripten_thread_crashed"]){Module["__emscripten_thread_crashed"]()}throw ex}}self.onmessage=handleMessage; "use strict";var Module={};var initializedJS=false;function threadPrintErr(){var text=Array.prototype.slice.call(arguments).join(" ");console.error(text)}function threadAlert(){var text=Array.prototype.slice.call(arguments).join(" ");postMessage({cmd:"alert",text:text,threadId:Module["_pthread_self"]()})}var err=threadPrintErr;self.alert=threadAlert;Module["instantiateWasm"]=function(info,receiveInstance){var instance=new WebAssembly.Instance(Module["wasmModule"],info);receiveInstance(instance);Module["wasmModule"]=null;return instance.exports};self.onmessage=function(e){try{if(e.data.cmd==="load"){Module["wasmModule"]=e.data.wasmModule;Module["wasmMemory"]=e.data.wasmMemory;Module["buffer"]=Module["wasmMemory"].buffer;Module["ENVIRONMENT_IS_PTHREAD"]=true;if(typeof e.data.urlOrBlob==="string"){importScripts(e.data.urlOrBlob)}else{var objectUrl=URL.createObjectURL(e.data.urlOrBlob);importScripts(objectUrl);URL.revokeObjectURL(objectUrl)}JSPlayerModule(Module).then(function(instance){Module=instance})}else if(e.data.cmd==="run"){Module["__performance_now_clock_drift"]=performance.now()-e.data.time;Module["__emscripten_thread_init"](e.data.threadInfoStruct,0,0);var max=e.data.stackBase;var top=e.data.stackBase+e.data.stackSize;Module["establishStackSpace"](top,max);Module["PThread"].receiveObjectTransfer(e.data);Module["PThread"].threadInit();if(!initializedJS){Module["___embind_register_native_and_builtin_types"]();initializedJS=true}try{var result=Module["invokeEntryPoint"](e.data.start_routine,e.data.arg);if(Module["keepRuntimeAlive"]()){Module["PThread"].setExitStatus(result)}else{Module["__emscripten_thread_exit"](result)}}catch(ex){if(ex!="unwind"){if(ex instanceof Module["ExitStatus"]){if(Module["keepRuntimeAlive"]()){}else{Module["__emscripten_thread_exit"](ex.status)}}else{Module["__emscripten_thread_exit"](-2);throw ex}}}}else if(e.data.cmd==="cancel"){if(Module["_pthread_self"]()){Module["__emscripten_thread_exit"](-1)}postMessage({"cmd":"cancelDone"})}else if(e.data.target==="setimmediate"){}else if(e.data.cmd==="processThreadQueue"){if(Module["_pthread_self"]()){Module["_emscripten_current_thread_process_queued_calls"]()}}else{err("worker.js received unknown command "+e.data.cmd);err(e.data)}}catch(ex){err("worker.js onmessage() captured an uncaught exception: "+ex);if(ex&&ex.stack)err(ex.stack);throw ex}};

10
public/h5Player/talk/AudioInterCom.js
View File

File diff suppressed because one or more lines are too long

BIN
public/h5Player/talk/AudioInterCom.wasm
View File

Binary file not shown.

102
public/h5Player/transform/libSystemTransform.js
View File

@ -718,8 +718,8 @@ var wasmMemory;
// In the wasm backend, we polyfill the WebAssembly object, // In the wasm backend, we polyfill the WebAssembly object,
// so this creates a (non-native-wasm) table for us. // so this creates a (non-native-wasm) table for us.
var wasmTable = new WebAssembly.Table({ var wasmTable = new WebAssembly.Table({
'initial': 283, 'initial': 275,
'maximum': 283 + 0, 'maximum': 275 + 0,
'element': 'anyfunc' 'element': 'anyfunc'
}); });
@ -1346,11 +1346,11 @@ function updateGlobalBufferAndViews(buf) {
} }
var STATIC_BASE = 1024, var STATIC_BASE = 1024,
STACK_BASE = 5535520, STACK_BASE = 5534128,
STACKTOP = STACK_BASE, STACKTOP = STACK_BASE,
STACK_MAX = 292640, STACK_MAX = 291248,
DYNAMIC_BASE = 5535520, DYNAMIC_BASE = 5534128,
DYNAMICTOP_PTR = 292464; DYNAMICTOP_PTR = 291072;
assert(STACK_BASE % 16 === 0, 'stack must start aligned'); assert(STACK_BASE % 16 === 0, 'stack must start aligned');
assert(DYNAMIC_BASE % 16 === 0, 'heap must start aligned'); assert(DYNAMIC_BASE % 16 === 0, 'heap must start aligned');
@ -1360,7 +1360,7 @@ assert(DYNAMIC_BASE % 16 === 0, 'heap must start aligned');
var TOTAL_STACK = 5242880; var TOTAL_STACK = 5242880;
if (Module['TOTAL_STACK']) assert(TOTAL_STACK === Module['TOTAL_STACK'], 'the stack size can no longer be determined at runtime') if (Module['TOTAL_STACK']) assert(TOTAL_STACK === Module['TOTAL_STACK'], 'the stack size can no longer be determined at runtime')
var INITIAL_INITIAL_MEMORY = Module['INITIAL_MEMORY'] || 134217728;if (!Object.getOwnPropertyDescriptor(Module, 'INITIAL_MEMORY')) Object.defineProperty(Module, 'INITIAL_MEMORY', { configurable: true, get: function() { abort('Module.INITIAL_MEMORY has been replaced with plain INITIAL_INITIAL_MEMORY') } }); var INITIAL_INITIAL_MEMORY = Module['INITIAL_MEMORY'] || 268435456;if (!Object.getOwnPropertyDescriptor(Module, 'INITIAL_MEMORY')) Object.defineProperty(Module, 'INITIAL_MEMORY', { configurable: true, get: function() { abort('Module.INITIAL_MEMORY has been replaced with plain INITIAL_INITIAL_MEMORY') } });
assert(INITIAL_INITIAL_MEMORY >= TOTAL_STACK, 'INITIAL_MEMORY should be larger than TOTAL_STACK, was ' + INITIAL_INITIAL_MEMORY + '! (TOTAL_STACK=' + TOTAL_STACK + ')'); assert(INITIAL_INITIAL_MEMORY >= TOTAL_STACK, 'INITIAL_MEMORY should be larger than TOTAL_STACK, was ' + INITIAL_INITIAL_MEMORY + '! (TOTAL_STACK=' + TOTAL_STACK + ')');
@ -1935,7 +1935,7 @@ function _emscripten_asm_const_iii(code, sigPtr, argbuf) {
// STATICTOP = STATIC_BASE + 291616; // STATICTOP = STATIC_BASE + 290224;
/* global initializers */ __ATINIT__.push({ func: function() { ___wasm_call_ctors() } }); /* global initializers */ __ATINIT__.push({ func: function() { ___wasm_call_ctors() } });
@ -2000,43 +2000,6 @@ function _emscripten_asm_const_iii(code, sigPtr, argbuf) {
return _atexit(a0,a1); return _atexit(a0,a1);
} }
function ___cxa_find_matching_catch_2() {
var thrown = ___exception_last;
if (!thrown) {
// just pass through the null ptr
return ((setTempRet0(0),0)|0);
}
var info = ___exception_infos[thrown];
var throwntype = info.type;
if (!throwntype) {
// just pass through the thrown ptr
return ((setTempRet0(0),thrown)|0);
}
var typeArray = Array.prototype.slice.call(arguments);
var pointer = ___cxa_is_pointer_type(throwntype);
// can_catch receives a **, add indirection
var buffer = 292624;
HEAP32[((buffer)>>2)]=thrown;
thrown = buffer;
// The different catch blocks are denoted by different types.
// Due to inheritance, those types may not precisely match the
// type of the thrown object. Find one which matches, and
// return the type of the catch block which should be called.
for (var i = 0; i < typeArray.length; i++) {
if (typeArray[i] && ___cxa_can_catch(typeArray[i], throwntype, thrown)) {
thrown = HEAP32[((thrown)>>2)]; // undo indirection
info.adjusted.push(thrown);
return ((setTempRet0(typeArray[i]),thrown)|0);
}
}
// Shouldn't happen unless we have bogus data in typeArray
// or encounter a type for which emscripten doesn't have suitable
// typeinfo defined. Best-efforts match just in case.
thrown = HEAP32[((thrown)>>2)]; // undo indirection
return ((setTempRet0(throwntype),thrown)|0);
}
var ___exception_infos={}; var ___exception_infos={};
@ -2067,11 +2030,6 @@ function _emscripten_asm_const_iii(code, sigPtr, argbuf) {
abort('stack overflow') abort('stack overflow')
} }
function ___resumeException(ptr) {
if (!___exception_last) { ___exception_last = ptr; }
throw ptr;
}
function setErrNo(value) { function setErrNo(value) {
HEAP32[((___errno_location())>>2)]=value; HEAP32[((___errno_location())>>2)]=value;
@ -5542,7 +5500,7 @@ function _emscripten_asm_const_iii(code, sigPtr, argbuf) {
} }
function _emscripten_get_sbrk_ptr() { function _emscripten_get_sbrk_ptr() {
return 292464; return 291072;
} }
function _emscripten_memcpy_big(dest, src, num) { function _emscripten_memcpy_big(dest, src, num) {
@ -5620,10 +5578,6 @@ function _emscripten_asm_const_iii(code, sigPtr, argbuf) {
} }
} }
function _getTempRet0() {
return (getTempRet0() | 0);
}
function _gettimeofday(ptr) { function _gettimeofday(ptr) {
var now = Date.now(); var now = Date.now();
HEAP32[((ptr)>>2)]=(now/1000)|0; // seconds HEAP32[((ptr)>>2)]=(now/1000)|0; // seconds
@ -5632,10 +5586,10 @@ function _emscripten_asm_const_iii(code, sigPtr, argbuf) {
} }
var ___tm_current=292480; var ___tm_current=291088;
var ___tm_timezone=(stringToUTF8("GMT", 292528, 4), 292528); var ___tm_timezone=(stringToUTF8("GMT", 291136, 4), 291136);
function _tzset() { function _tzset() {
// TODO: Use (malleable) environment variables instead of system settings. // TODO: Use (malleable) environment variables instead of system settings.
@ -5886,7 +5840,7 @@ function intArrayToString(array) {
var asmGlobalArg = {}; var asmGlobalArg = {};
var asmLibraryArg = { "__assert_fail": ___assert_fail, "__cxa_allocate_exception": ___cxa_allocate_exception, "__cxa_atexit": ___cxa_atexit, "__cxa_find_matching_catch_2": ___cxa_find_matching_catch_2, "__cxa_throw": ___cxa_throw, "__handle_stack_overflow": ___handle_stack_overflow, "__resumeException": ___resumeException, "__sys_fcntl64": ___sys_fcntl64, "__sys_ioctl": ___sys_ioctl, "__sys_open": ___sys_open, "_embind_finalize_value_object": __embind_finalize_value_object, "_embind_register_bool": __embind_register_bool, "_embind_register_emval": __embind_register_emval, "_embind_register_float": __embind_register_float, "_embind_register_function": __embind_register_function, "_embind_register_integer": __embind_register_integer, "_embind_register_memory_view": __embind_register_memory_view, "_embind_register_std_string": __embind_register_std_string, "_embind_register_std_wstring": __embind_register_std_wstring, "_embind_register_value_object": __embind_register_value_object, "_embind_register_value_object_field": __embind_register_value_object_field, "_embind_register_void": __embind_register_void, "emscripten_asm_const_iii": _emscripten_asm_const_iii, "emscripten_get_sbrk_ptr": _emscripten_get_sbrk_ptr, "emscripten_memcpy_big": _emscripten_memcpy_big, "emscripten_resize_heap": _emscripten_resize_heap, "fd_close": _fd_close, "fd_read": _fd_read, "fd_seek": _fd_seek, "fd_write": _fd_write, "getTempRet0": _getTempRet0, "gettimeofday": _gettimeofday, "invoke_iii": invoke_iii, "localtime": _localtime, "localtime_r": _localtime_r, "memory": wasmMemory, "mktime": _mktime, "pthread_create": _pthread_create, "pthread_join": _pthread_join, "pthread_mutexattr_init": _pthread_mutexattr_init, "pthread_mutexattr_settype": _pthread_mutexattr_settype, "setTempRet0": _setTempRet0, "table": wasmTable, "time": _time, "usleep": _usleep }; var asmLibraryArg = { "__assert_fail": ___assert_fail, "__cxa_allocate_exception": ___cxa_allocate_exception, "__cxa_atexit": ___cxa_atexit, "__cxa_throw": ___cxa_throw, "__handle_stack_overflow": ___handle_stack_overflow, "__sys_fcntl64": ___sys_fcntl64, "__sys_ioctl": ___sys_ioctl, "__sys_open": ___sys_open, "_embind_finalize_value_object": __embind_finalize_value_object, "_embind_register_bool": __embind_register_bool, "_embind_register_emval": __embind_register_emval, "_embind_register_float": __embind_register_float, "_embind_register_function": __embind_register_function, "_embind_register_integer": __embind_register_integer, "_embind_register_memory_view": __embind_register_memory_view, "_embind_register_std_string": __embind_register_std_string, "_embind_register_std_wstring": __embind_register_std_wstring, "_embind_register_value_object": __embind_register_value_object, "_embind_register_value_object_field": __embind_register_value_object_field, "_embind_register_void": __embind_register_void, "emscripten_asm_const_iii": _emscripten_asm_const_iii, "emscripten_get_sbrk_ptr": _emscripten_get_sbrk_ptr, "emscripten_memcpy_big": _emscripten_memcpy_big, "emscripten_resize_heap": _emscripten_resize_heap, "fd_close": _fd_close, "fd_read": _fd_read, "fd_seek": _fd_seek, "fd_write": _fd_write, "gettimeofday": _gettimeofday, "localtime": _localtime, "localtime_r": _localtime_r, "memory": wasmMemory, "mktime": _mktime, "pthread_create": _pthread_create, "pthread_join": _pthread_join, "pthread_mutexattr_init": _pthread_mutexattr_init, "pthread_mutexattr_settype": _pthread_mutexattr_settype, "setTempRet0": _setTempRet0, "table": wasmTable, "time": _time, "usleep": _usleep };
var asm = createWasm(); var asm = createWasm();
Module["asm"] = asm; Module["asm"] = asm;
/** @type {function(...*):?} */ /** @type {function(...*):?} */
@ -5959,13 +5913,6 @@ var _SysTransSetGlobalTime = Module["_SysTransSetGlobalTime"] = function() {
return Module["asm"]["SysTransSetGlobalTime"].apply(null, arguments) return Module["asm"]["SysTransSetGlobalTime"].apply(null, arguments)
}; };
/** @type {function(...*):?} */
var _SysTransEnableCapacity = Module["_SysTransEnableCapacity"] = function() {
assert(runtimeInitialized, 'you need to wait for the runtime to be ready (e.g. wait for main() to be called)');
assert(!runtimeExited, 'the runtime was exited (use NO_EXIT_RUNTIME to keep it alive after main() exits)');
return Module["asm"]["SysTransEnableCapacity"].apply(null, arguments)
};
/** @type {function(...*):?} */ /** @type {function(...*):?} */
var _malloc = Module["_malloc"] = function() { var _malloc = Module["_malloc"] = function() {
assert(runtimeInitialized, 'you need to wait for the runtime to be ready (e.g. wait for main() to be called)'); assert(runtimeInitialized, 'you need to wait for the runtime to be ready (e.g. wait for main() to be called)');
@ -6043,13 +5990,6 @@ var _emscripten_main_thread_process_queued_calls = Module["_emscripten_main_thre
return Module["asm"]["emscripten_main_thread_process_queued_calls"].apply(null, arguments) return Module["asm"]["emscripten_main_thread_process_queued_calls"].apply(null, arguments)
}; };
/** @type {function(...*):?} */
var dynCall_iii = Module["dynCall_iii"] = function() {
assert(runtimeInitialized, 'you need to wait for the runtime to be ready (e.g. wait for main() to be called)');
assert(!runtimeExited, 'the runtime was exited (use NO_EXIT_RUNTIME to keep it alive after main() exits)');
return Module["asm"]["dynCall_iii"].apply(null, arguments)
};
/** @type {function(...*):?} */ /** @type {function(...*):?} */
var ___set_stack_limit = Module["___set_stack_limit"] = function() { var ___set_stack_limit = Module["___set_stack_limit"] = function() {
assert(runtimeInitialized, 'you need to wait for the runtime to be ready (e.g. wait for main() to be called)'); assert(runtimeInitialized, 'you need to wait for the runtime to be ready (e.g. wait for main() to be called)');
@ -6120,6 +6060,13 @@ var dynCall_viii = Module["dynCall_viii"] = function() {
return Module["asm"]["dynCall_viii"].apply(null, arguments) return Module["asm"]["dynCall_viii"].apply(null, arguments)
}; };
/** @type {function(...*):?} */
var dynCall_iii = Module["dynCall_iii"] = function() {
assert(runtimeInitialized, 'you need to wait for the runtime to be ready (e.g. wait for main() to be called)');
assert(!runtimeExited, 'the runtime was exited (use NO_EXIT_RUNTIME to keep it alive after main() exits)');
return Module["asm"]["dynCall_iii"].apply(null, arguments)
};
/** @type {function(...*):?} */ /** @type {function(...*):?} */
var dynCall_iiii = Module["dynCall_iiii"] = function() { var dynCall_iiii = Module["dynCall_iiii"] = function() {
assert(runtimeInitialized, 'you need to wait for the runtime to be ready (e.g. wait for main() to be called)'); assert(runtimeInitialized, 'you need to wait for the runtime to be ready (e.g. wait for main() to be called)');
@ -6170,17 +6117,6 @@ var dynCall_iiiii = Module["dynCall_iiiii"] = function() {
}; };
function invoke_iii(index,a1,a2) {
var sp = stackSave();
try {
return dynCall_iii(index,a1,a2);
} catch(e) {
stackRestore(sp);
if (e !== e+0 && e !== 'longjmp') throw e;
_setThrew(1, 0);
}
}
/** /**
* @license * @license

BIN
public/h5Player/transform/libSystemTransform.wasm
View File

Binary file not shown.

8
public/h5Player/transform/systemTransform-worker.js
View File

@ -67,13 +67,7 @@ importScripts('libSystemTransform.js');
{ {
console.log("_SysTransRegisterDataCallBack Failed:" + iRet); console.log("_SysTransRegisterDataCallBack Failed:" + iRet);
} }
if (iTransType === 5) {//转mp4支持私有帧打入
iRet = Module._SysTransEnableCapacity(7)
if(iRet != 0)
{
console.log("_SysTransSetGlobalTime Failed:" + iRet);
}
}
iRet = Module._SysTransStart(null, null); iRet = Module._SysTransStart(null, null);
if(iRet != 0) if(iRet != 0)
{ {

7
src/components/DashboardLayout/SiderMenu.tsx
View File

@ -31,12 +31,7 @@ const SiderMenu: React.FC<{
const pathname = location.pathname; const pathname = location.pathname;
const navigate = useNavigate(); const navigate = useNavigate();
// 当menuIndexes[1]变化时，更新openKeys
useEffect(() => {
if (menuIndexes[1]) {
setOpenKeys([`${menuIndexes[1]}`]);
}
}, [menuIndexes[1]]);
function goto(url: string) { function goto(url: string) {
if (pathname !== url) { if (pathname !== url) {
navigate(url); navigate(url);

2
src/components/DashboardLayout/TopMenu.tsx
View File

@ -12,7 +12,7 @@ function getMenuUrl(menuItem: MenuItem | undefined): string | null {
return null; return null;
} }
const url = menuItem.path; const url = menuItem.path || menuItem.redirect;
if (url) { if (url) {
return url; return url;
} }

196
src/components/DashboardLayout/index.tsx
View File

@ -13,124 +13,56 @@ import { currentBreadcrumbs } from '../../models/auth/_';
import {page} from '../../service/warn'; import {page} from '../../service/warn';
import { qryBasicWatershedDetailApi } from "../../service/preplan"; import { qryBasicWatershedDetailApi } from "../../service/preplan";
import moment from "moment" import moment from "moment"
import { httppostAuth } from '../../utils/request'; import { httppost2 } from '../../utils/request';
import apiurl from '../../service/apiurl'; import apiurl from '../../service/apiurl';
const { Header, Content, Sider } = Layout; const { Header, Content, Sider } = Layout;
const meunObj:any = { const meunObj:any = {
'home':'水库一张图', 'home':'基本情况',
'sq':'四全', 'fxzb':'防汛准备',
'qfg':'全覆盖', 'sxfd':'思想发动',
'zcdjxx':'注册登记信息', 'fxkhgzh':'防汛抗旱工作会',
'qys':'全要素', 'fbzrh':'防办主任会',
'kqys':'库区要素', 'fxpxb':'防汛培训班',
'gcys':'工程要素', 'fxtj':'防汛图件',
'xyys': '下游要素', 'zzjg':'组织机构',
'qth':"全天候", 'zq':'政区',
'sksq':"水库水情", 'gc':'工程',
'hdsq': "河道水情", 'gczx':'工程整修',
'ssyq':'实时水情',
'trsq':'土壤墒情',
'skyh':'水库溢洪',
'spjk':'视频监控',
'ytygc':'已投运工程', 'ytygc':'已投运工程',
'qzq':'全周期', 'zjgc':'在建工程',
'gcdsj':'工程大事记', 'hdqz':'河道清障',
'qzqda':'全周期档案', 'yaxb':'预案修编',
'sz':'四制', 'zqya':'政区预案',
'gltx':'管理体系', 'ytygcya':'已投运工程预案',
'zzjgck':'组织机构查看', 'zjgcya':'在建工程预案',
'zrrgl': '责任人管理', 'hsddya':'洪水调度方案',
'pxgl':'培训管理',
'pxjhgl':'培训计划管理',
'pxjlgl':'培训记录管理',
'szzf':'水政执法',
'ajdj':'案件登记',
'ajtj':'案件统计',
'clyj':'处理依据',
'jdkh':'监督考核',
'khtj':'考核统计',
'khrwgl':'考核任务管理',
'khwtzg':'考核问题整改',
'khzbgl':'考核指标管理',
'khmbgl':'考核模版管理',
'zdgl':'制度管理',
'flfg':'法律法规',
'zsk':'知识库',
'ddfa':'调度方案库',
'ywgz':'业务规则库',
'gcaq':'工程安全知识库',
'sy':'四预',
'fhxzfx': '防洪形式',
'tqyb': '天气预报',
'hsyb':'洪水预报',
'hyybjs':'洪水预报计算',
'ybfagl':'预报方案管理',
'csgl': '参数管理',
'hsyj':'洪水预警',
'yjxx':'预警信息',
'gzpz': '规则配置',
'hsyy':'洪水预演',
'fxya':'防汛预案',
'ddgc':'调度规程',
'qxdw':'抢险队伍', 'qxdw':'抢险队伍',
'qxwl': '抢险物料', 'qxwl':'抢险物料',
'sg':"四管", 'jczw':'检测站网',
'xcxj':"巡查巡检", 'yqz':'雨情站',
'xcrw':"巡查任务", 'sqz':'水情站',
'xjwtcl':"巡查问题处理",
'xjxpz':"巡检项配置",
'aqgl':"安全管理",
'fxgkqd':"风险管控清单",
'aqyhpc':"安全隐患排查",
'aqjcgl':"安全检查管理",
'aqsgdj':"安全事故登记",
'aqjdtz':"安全鉴定台帐",
'cxjgtz':"除险加固台帐",
'byfz':"白蚁防治",
'bypc':"白蚁监测",
'byxc':"防治宣传",
'zmjk':"闸门监控",
'wxyh':"维修养护",
'zbgl':"值班管理",
'zbb':'值班表', 'zbb':'值班表',
'zbrz':'值班日志', 'txl':'通讯录',
'btbb':'报表管理', 'ysgzq':'雨水工灾情',
'sdjyrbb':'时段降雨日报表', 'ssyq':'实时雨情',
'rjylnbb':'日降雨量年报表', 'sssq':'实时水情',
'sdswbb':'时段水位日报表', 'ssgq':'实时工情',
'rjswbb':'日均水位年报表', 'yxqk':'运行情况',
'dbaq':'告警管理', 'gcxq':'工程险情',
'aigj':'AI告警', 'dbaq':'大坝安全监测数据',
'gbyj':'广播预警', 'sszq':'实时灾情',
'gcaqjc':'工程安全监测', 'fxdd':'防汛调度',
'bzt':'布置图', 'dqxsfx':'当前形势分析',
'gcaqfx':'工程安全分析', 'tqyb':'天气预报',
'jrx':'浸润线', 'hsyb':'洪水预报',
'gcaqyj':'工程安全预警', 'skhs':'水库洪水',
'yhyj':'隐患预警', 'hdhs':'河道洪水',
'yjgzpz':'预警规则配置', 'ddjc':'调度决策',
'sjtjcx':'数据统计查询', 'yjxy':'应急响应',
'sjlr':'人工监测数据录入', 'ddzl':'调度指令',
'czcx':'测值查询', 'videoSurveillance':'视频监控',
'syjx':'渗压监测', 'fxdp':'防汛大屏',
'sljx':'渗流监测',
'wyjx':'位移监测',
'ndsytjb':'年度渗压统计表',
'ndsltjb':'年度渗流统计表',
'ndwytjb':'年度位移统计表',
'szydd':'水资源调度',
'gsnlfx':'供水能力分析',
'diaodu':'调度记录',
'gstjfx':'供水统计分析',
'dxnjyzl':'典型年降雨资料',
'skzfzl': '水库蒸发资料',
'sys':'系统管理',
'user':'用户管理',
'department':'部门管理',
'role':'角色管理',
'menuM':'菜单管理',
'loginLog':'登录日志',
} }
@ -181,25 +113,31 @@ const DashboardLayout: React.FC = () => {
// 这个方法是统计菜单点击情况的 // 这个方法是统计菜单点击情况的
useEffect(()=>{ // useEffect(()=>{
(async()=>{ // (async()=>{
const list = location.pathname.split('/') // const list = location.pathname.split('/')
let menu1:any = meunObj?.[list[2]] //一级菜单 // let menu1:any = meunObj?.[list[2]]
let menu2:any = meunObj?.[list[3]] //二级菜单 // let menu2:any = meunObj?.[list[3]]
let menu3:any = meunObj?.[list[4]] //三级菜单 // let menu3:any = meunObj?.[list[4]]
if(menu1==='水库一张图'){ // if(menu1==='基本情况'){
menu2 = '水库一张图' // menu2 = '基本情况'
} // }
// if(menu1==='视频监控'){
// menu2 = '视频监控'
// }
// if(menu1==='防汛大屏'){
// menu2 = '防汛大屏'
// }
const res = await httppostAuth(apiurl.setMenu,{ // const res = await httppost2(apiurl.setMenu,{
createId:localStorage.getItem('userId'), // createId:localStorage.getItem('userId'),
loginType:0, // loginType:0,
menu1:menu1, // menu1:menu1,
menu2:menu2, // menu2:menu2,
menu3:menu3 // menu3:menu3
}) // })
})() // })()
},[location.pathname]) // },[location.pathname])
const menuIndexes = useMemo(() => findMenu(menu, pathname), [menu, pathname]); const menuIndexes = useMemo(() => findMenu(menu, pathname), [menu, pathname]);

95
src/components/video1Plary.js
View File

@ -2,7 +2,6 @@ import { FC, useEffect, useRef, useState } from 'react'
// import styles from './index.module.less' // import styles from './index.module.less'
import { message, Spin } from "antd"; import { message, Spin } from "antd";
import EZUIKit from 'ezuikit-js'; import EZUIKit from 'ezuikit-js';
import moment from 'moment';
/** /**
* 海康视频H5插件视频播放 * 海康视频H5插件视频播放
@ -19,22 +18,15 @@ const HFivePlayer = ({ wsUrl, playerID, size }) => {
const [width, setWidth] = useState(null); const [width, setWidth] = useState(null);
const [height, setHeight] = useState(null); const [height, setHeight] = useState(null);
const [type, setType] = useState(false); const [type, setType] = useState(false);
const lastErrorKeyRef = useRef(null);
const initVideo = () => { const initVideo = () => {
const hasReplayRange = wsUrl?.beginTime && wsUrl?.endTime && wsUrl?.indexCode;
const beginStr = hasReplayRange ? moment(wsUrl.beginTime).format('YYYYMMDDHHmmss') : '';
const endStr = hasReplayRange ? moment(wsUrl.endTime).format('YYYYMMDDHHmmss') : '';
const ezUrl = hasReplayRange
? `ezopen://open.ys7.com/${wsUrl.indexCode}/1.rec?begin=${beginStr}&end=${endStr}`
: `ezopen://open.ys7.com/${wsUrl.indexCode}/1.live`;
playerYsy.current = new EZUIKit.EZUIKitPlayer({ playerYsy.current = new EZUIKit.EZUIKitPlayer({
id: 'player' + playerID, // 视频容器ID id: 'player' + playerID, // 视频容器ID
accessToken: wsUrl.src, accessToken: wsUrl.src,
url: ezUrl, url: `ezopen://open.ys7.com/${wsUrl.indexCode}/1.live`,
// plugin: ["talk"], // 加载插件，talk-对讲 // plugin: ["talk"], // 加载插件，talk-对讲
width: parentRef.current?.offsetWidth, width: parentRef.current?.offsetWidth,
height: parentRef.current?.offsetHeight, height: parentRef.current?.offsetHeight,
@ -87,14 +79,12 @@ const HFivePlayer = ({ wsUrl, playerID, size }) => {
// wholeFullScreen() // wholeFullScreen()
}, },
pluginErrorHandler(iWindIndex, iErrorCode, oError) { pluginErrorHandler(iWindIndex, iErrorCode, oError) {
// 插件错误回调
// console.error(`window-${iWindIndex}, errorCode: ${iErrorCode}`, oError)
// message.error('播放失败1:' + VideoPlayerException[iErrorCode])
setIsLoading(false) setIsLoading(false)
const key = `${playerID}-${iWindIndex}-${iErrorCode}` //重新播放
if (lastErrorKeyRef.current !== key) { // initPlayer()
lastErrorKeyRef.current = key
const msgText = VideoPlayerException?.[iErrorCode] || `错误码：${iErrorCode}`
message.error(`window-${iWindIndex} 播放失败：${msgText}`)
}
console.error(`window-${iWindIndex} pluginErrorHandler`, iErrorCode, oError)
}, },
windowEventOver(iWindIndex) { windowEventOver(iWindIndex) {
// 鼠标移过回调 // 鼠标移过回调
@ -138,23 +128,11 @@ const HFivePlayer = ({ wsUrl, playerID, size }) => {
* 播放 * 播放
*/ */
const play = () => { const play = () => {
const src = typeof wsUrl === 'string' ? wsUrl : wsUrl?.src console.log(wsUrl?.src, '6543');
console.log(src, '6543'); // if(!wsUrl?.src) return
if (src) { if (wsUrl?.src) {
if (window.location?.protocol === 'https:' && src.startsWith('ws://')) {
setIsLoading(false)
message.error('当前页面为https，浏览器会阻止ws://取流，请使用wss://地址或改为http访问')
return
}
setIsLoading(true) //开始加载 setIsLoading(true) //开始加载
let preUrl = src // 播放地址 let preUrl = wsUrl?.src // 播放地址
// 支持回放时间范围（海康取流地址若后端支持时间参数则追加）
if (wsUrl?.beginTime && wsUrl?.endTime) {
const begin = moment(wsUrl.beginTime).subtract(1,'hours').format('YYYY-MM-DD HH:mm:ss');
const end = moment(wsUrl.endTime).format('YYYY-MM-DD HH:mm:ss');
const sep = preUrl.includes('?') ? '&' : '?';
preUrl = `${preUrl}${sep}beginTime=${begin}&endTime=${end}`;
}
console.log(preUrl); console.log(preUrl);
const param = { const param = {
playURL: preUrl, playURL: preUrl,
@ -167,14 +145,10 @@ const HFivePlayer = ({ wsUrl, playerID, size }) => {
// 播放成功回调 // 播放成功回调
// console.log('播放成功') // console.log('播放成功')
}, (err) => { }, (err) => {
// console.log('播放失败')
// console.info('JS_Play failed:', err)
setIsLoading(false) setIsLoading(false)
const errorCode = err?.errorCode ?? err?.code message.error('视频离线，播放失败')
const msgText =
VideoPlayerException?.[errorCode] ||
VideoPlayerException?.[String(errorCode)] ||
(errorCode ? `错误码：${errorCode}` : '')
message.error(msgText ? `播放失败：${msgText}` : '播放失败')
console.error('JS_Play failed:', err)
} }
) )
@ -182,44 +156,15 @@ const HFivePlayer = ({ wsUrl, playerID, size }) => {
} }
useEffect(() => { useEffect(() => {
if (!wsUrl) return if (wsUrl) {
if (wsUrl?.relType == 'ysy') {
initVideo()
} else {
initPlayer()
}
if (wsUrl?.relType === 'ysy') {
initVideo()
} else {
initPlayer()
} }
return () => {
setIsLoading(false)
try {
player.current?.JS_StopRealPlayAll?.()
} catch (e) {}
try {
player.current?.JS_Stop?.(0)
} catch (e) {}
try {
player.current?.JS_StopTalk?.()
} catch (e) {}
try {
player.current?.JS_CloseSound?.(0)
} catch (e) {}
try {
const el = document.getElementById('player' + playerID)
if (el) el.innerHTML = ''
} catch (e) {}
player.current = {}
try {
playerYsy.current?.stop?.()
} catch (e) {}
try {
playerYsy.current?.destroy?.()
} catch (e) {}
playerYsy.current = {}
}
}, [wsUrl]) }, [wsUrl])
useEffect(() => { useEffect(() => {
handleWindowResize() handleWindowResize()
@ -229,7 +174,7 @@ const HFivePlayer = ({ wsUrl, playerID, size }) => {
return ( return (
<div ref={parentRef} style={{ height: '100%', width: '100%' }}> <div ref={parentRef} style={{ height: '100%', width: '100%' }}>
<Spin tip="Loading" spinning={isLoading} size="small"> <Spin tip="Loading" spinning={isLoading} size="small">
<div style={{ width: width, height: height }} onDoubleClick={() => playerYsy.current?.fullScreen?.()}> <div style={{ width: width, height: height }} onDoubleClick={() => playerYsy.current.fullScreen()}>
<div id={'player' + playerID} style={{ width: width, height: height}} > <div id={'player' + playerID} style={{ width: width, height: height}} >
</div> </div>
</div> </div>

24
src/service/apiurl.js
View File

@ -49,15 +49,6 @@ const apiurl = {
view:baseFileView view:baseFileView
}, },
systemM: { systemM: {
action: {
todayData: service_fxdd + "/userLoginLog/todayCount",
activeCount: service_fxdd + "/userLoginLog/userCount",
userCount: service_fxdd + "/userLoginLog/visitCount",
hotData:service_fxdd + "/visitMenuLog/count"
},
yhxwrz:{
page:service_fxdd + "/visitMenuLog/page",
},
userM: { userM: {
updatePassword:service_xyt + '/system/user/profile/updatePwd' updatePassword:service_xyt + '/system/user/profile/updatePwd'
} }
@ -235,17 +226,6 @@ const apiurl = {
}, },
sy: {
yjxx: {
page: service_fxdd + "/warningRule/info/page",
},
yjxxpz: {
page: service_fxdd + "/warningRule/page",
edit: service_fxdd + '/warningRule/update',
save: service_fxdd + '/warningRule/insert',
delete: service_fxdd + "/warningRule/del/",
}
},
// 防汛准备 // 防汛准备
fxzb1: { fxzb1: {
ddgc: { ddgc: {
@ -559,12 +539,9 @@ const apiurl = {
}, },
zfzl: { zfzl: {
list: service_fxdd + "/gateValveReal/list", list: service_fxdd + "/gateValveReal/list",
list1: service_fxdd + "/gate/list",
historypage: service_fxdd + '/gateValveReal/log/page', historypage: service_fxdd + '/gateValveReal/log/page',
historypage1: service_fxdd + '/gate/page/history',
historyList: service_fxdd + '/gateValveReal/log/loglist', historyList: service_fxdd + '/gateValveReal/log/loglist',
historyPageExport: service_fxdd + '/gateValveReal/log/exp', historyPageExport: service_fxdd + '/gateValveReal/log/exp',
historyPageExport1: service_fxdd + '/gate/exp',
swInfo:service_fxdd + '/reservoir/water/waterInfo', swInfo:service_fxdd + '/reservoir/water/waterInfo',
krlist: service_fxdd + "/reservoir/water/data", krlist: service_fxdd + "/reservoir/water/data",
info: service_fxdd + "/attGateValve/detail", info: service_fxdd + "/attGateValve/detail",
@ -593,7 +570,6 @@ const apiurl = {
spjk1: { spjk1: {
aiWarn: { aiWarn: {
page: service_fxdd + "/stImgWarnR/page", page: service_fxdd + "/stImgWarnR/page",
page1: service_fxdd + "/iscaiEvent/page",
list: service_fxdd + "/attCctvBase/list", list: service_fxdd + "/attCctvBase/list",
controler:service_fxdd + "/attCctvBase/control" controler:service_fxdd + "/attCctvBase/control"
} }

4
src/setupProxy.js
View File

@ -10,8 +10,8 @@ module.exports = function (app) {
// target: 'http://192.168.66.199:24105/',//正式 // target: 'http://192.168.66.199:24105/',//正式
// target: 'http://36.139.207.50:18083/',//移动云 // target: 'http://36.139.207.50:18083/',//移动云
// target: 'http://192.168.66.49:24105/',//移动云 // target: 'http://192.168.66.49:24105/',//移动云
// target: 'http://192.168.66.43:24105/',//ls // target: 'http://192.168.66.32:24105/',//ls
// target: 'http://192.168.66.23:24105/', //ls // target: 'http://192.168.66.32:24105/', //ls
changeOrigin: true, changeOrigin: true,
}) })
); );

16
src/utils/request.js
View File

@ -21,7 +21,6 @@ function request(url, options,type) {
const opt = { ...options }; const opt = { ...options };
opt.headers = opt.headers || {}; opt.headers = opt.headers || {};
opt.headers.Accept = 'application/json'; opt.headers.Accept = 'application/json';
// opt.headers.Authorization = "Bearer" + ' ' + localStorage.getItem('access_token');
// opt.credentials = opt.credentials || 'include'; // opt.credentials = opt.credentials || 'include';
return fetch(url, opt) return fetch(url, opt)
@ -399,21 +398,6 @@ export function httppost2(url, data = {}) {
return send(url, options); return send(url, options);
} }
export function httppostAuth(url, data = {}) {
const options = {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'adcd': localStorage.getItem('ADCD6'),
"gs-token": localStorage.getItem('access_token'),
"Authorization":"Bearer" + ' ' + localStorage.getItem('access_token')
},
body: JSON.stringify(data),
};
return send(url, options);
}
export function httppost5(url, data = {}) { export function httppost5(url, data = {}) {
const options = { const options = {
method: 'POST', method: 'POST',

10
src/views/AppRouters.tsx
View File

@ -21,8 +21,6 @@ import Fxya from './fxzb/fxya'
import Hsybjs from './fxzb/hsybjs' import Hsybjs from './fxzb/hsybjs'
import Ybfagl from './fxzb/ybfagl' import Ybfagl from './fxzb/ybfagl'
import Csgl from './fxzb/csgl' import Csgl from './fxzb/csgl'
import Yjxx from './fxzb/yjxx'
import Gzpz from './fxzb/gzpz'
import Qxdw_Gc from './fxzb/qxdw/gc/index.js' import Qxdw_Gc from './fxzb/qxdw/gc/index.js'
import Qxwl_Gc from './fxzb/qxwl/gc' import Qxwl_Gc from './fxzb/qxwl/gc'
@ -123,8 +121,6 @@ import Ywgz from './sz/ywgz'
import Gcaq from './sz/khzbgl' import Gcaq from './sz/khzbgl'
//系统管理 //系统管理
import SystemPage from './systemMange' import SystemPage from './systemMange'
import Yhxwrz from './yhxwrz'
import Yhxwfx from './yhxwfx'
const HomePage = lazy(() => import('./Home')) const HomePage = lazy(() => import('./Home'))
@ -166,10 +162,6 @@ const AppRouters: React.FC = () => {
{ path: 'sy/hsyb/ybfagl', element: <Ybfagl /> }, { path: 'sy/hsyb/ybfagl', element: <Ybfagl /> },
{ path: 'sy/hsyb/csgl', element: <Csgl /> }, { path: 'sy/hsyb/csgl', element: <Csgl /> },
// 四预-洪水预警
{ path: 'sy/hsyj/yjxx', element: <Yjxx/> },
{ path: 'sy/hsyj/gzpz', element: <Gzpz /> },
// 调度规程 // 调度规程
{ path: 'sy/ddgc', element: <Ddgc /> }, { path: 'sy/ddgc', element: <Ddgc /> },
@ -306,8 +298,6 @@ const AppRouters: React.FC = () => {
{ path: 'sys/role', element: <SystemPage src={'/mgr/home/role'}/> }, { path: 'sys/role', element: <SystemPage src={'/mgr/home/role'}/> },
{ path: 'sys/menuM', element: <SystemPage src={'/mgr/home/menuM'}/> }, { path: 'sys/menuM', element: <SystemPage src={'/mgr/home/menuM'}/> },
{ path: 'sys/loginLog', element: <SystemPage src={'/mgr/home/loginLog'}/> }, { path: 'sys/loginLog', element: <SystemPage src={'/mgr/home/loginLog'}/> },
{ path: 'sys/yhxwrz', element: <Yhxwrz /> },
{ path: 'sys/yhxwfx', element: <Yhxwfx /> },
], ],
}, },
{ path: '/login', element: <LoginPage /> }, { path: '/login', element: <LoginPage /> },

2
src/views/Home/MapCtrl/Map3D/Map3D.js
View File

@ -357,6 +357,8 @@ export default class Map3D extends BaseMap {
// this.demo.getCzml2(viewer) //demo // this.demo.getCzml2(viewer) //demo
// demo.getWater(viewer)//水面 // demo.getWater(viewer)//水面
// this.demo.getWater3(viewer) // this.demo.getWater3(viewer)
// this.demo.getWater4(viewer)
// this.demo.getWAter5(viewer)
// demo.getTool(viewer)//工具 // demo.getTool(viewer)//工具
// await this.demo.getWater2(viewer,[ // await this.demo.getWater2(viewer,[

476
src/views/Home/MapCtrl/Map3D/demo.js
View File

@ -258,63 +258,127 @@ export default class LayerMgr {
//全村的希望 //全村的希望
async getWater3(viewer) { async getWater3(viewer) {
// baseWaterColor: new Cesium.Color(64 / 255.0, 157 / 255.0, 253 / 255.0, 1), // 水的基本颜色
// normalMap: normalMap,
// // normalMap: Cesium.buildModuleUrl(
// // `${process.env.PUBLIC_URL}/models/waternormals.jpg`
// // ),
// frequency: 1000.0,
// animationSpeed: 0.01,
// amplitude: 10,
// specularIntensity: 1, // 镜面反射强度
const simpleWaterMaterial = new Cesium.Material({ const simpleWaterMaterial = new Cesium.Material({
fabric: { fabric: {
type: 'FixedWater', type: 'AdvancedWater',
uniforms: { uniforms: {
color: new Cesium.Color(64 / 255.0, 157 / 255.0, 253 / 255.0, 1), baseWaterColor: new Cesium.Color(0.2, 0.4, 0.7, 0.85),
highlightColor: new Cesium.Color(0.5, 0.8, 1.0, 1), specularColor: new Cesium.Color(1.0, 1.0, 1.0, 1.0),
speed: 0.01, reflectionColor: new Cesium.Color(0.3, 0.6, 0.9, 1.0),
// frequency: 50.0 smallWaveSpeed: 0.05,
bigWaveSpeed: 0.02,
frequency: 1000.0, smallWaveFrequency: 800.0,
animationSpeed: 0.01, bigWaveFrequency: 200.0,
amplitude: 10, waveAmplitude: 5.0,
specularIntensity: 1, // 镜面反射强度 foamThreshold: 0.4,
time: 0.0
}, },
source: source: `
// 简单的噪声函数
float noise(vec2 p) {
return fract(sin(dot(p, vec2(127.1, 311.7))) * 43758.5453);
}
// 2D噪声函数
float noise2D(vec2 p) {
vec2 i = floor(p);
vec2 f = fract(p);
f = f * f * (3.0 - 2.0 * f);
float a = noise(i);
float b = noise(i + vec2(1.0, 0.0));
float c = noise(i + vec2(0.0, 1.0));
float d = noise(i + vec2(1.0, 1.0));
return mix(mix(a, b, f.x), mix(c, d, f.x), f.y);
}
// 分形噪声
float fbm(vec2 p) {
float value = 0.0;
float amplitude = 0.5;
float frequency = 1.0;
for(int i = 0; i < 4; i++) {
value += amplitude * noise2D(p * frequency);
amplitude *= 0.5;
frequency *= 2.0;
}
return value;
}
czm_material czm_getMaterial(czm_materialInput materialInput)
{
czm_material material = czm_getDefaultMaterial(materialInput);
vec2 st = materialInput.st * 3.0;
float time = czm_frameNumber * 0.005;
// 大波浪 - 主要形状
float bigWave1 = sin(st.x * bigWaveFrequency + time * bigWaveSpeed) *
cos(st.y * bigWaveFrequency * 0.7 + time * bigWaveSpeed * 1.3);
float bigWave2 = cos(st.x * bigWaveFrequency * 0.8 - st.y * bigWaveFrequency * 1.2 +
time * bigWaveSpeed * 0.7) * 0.7;
// 小波浪 - 细节
float smallWave1 = fbm(vec2(st.x * smallWaveFrequency + time,
st.y * smallWaveFrequency)) * 0.5;
float smallWave2 = fbm(vec2(st.x * smallWaveFrequency * 1.7 - time * 0.7,
st.y * smallWaveFrequency * 1.3)) * 0.3;
// 组合波浪
float totalWave = (bigWave1 * 0.6 + bigWave2 * 0.4 +
smallWave1 * 0.3 + smallWave2 * 0.2) * waveAmplitude;
// 计算法线 - 使用波浪梯度
vec2 eps = vec2(0.001, 0.0);
float h1 = sin((st.x + eps.x) * bigWaveFrequency + time) *
cos(st.y * bigWaveFrequency * 0.7 + time);
float h2 = sin(st.x * bigWaveFrequency + time) *
cos((st.y + eps.x) * bigWaveFrequency * 0.7 + time);
vec3 normal = normalize(vec3(h1 - totalWave, h2 - totalWave, 1.0));
// 基于法线的光照计算
vec3 lightDir = czm_sunDirectionEC;
float diffuse = max(dot(normal, lightDir), 0.0);
// 高光计算
vec3 viewDir = vec3(0.0, 0.0, 1.0); // 简化视角方向
vec3 halfDir = normalize(lightDir + viewDir);
float specular = pow(max(dot(normal, halfDir), 0.0), 120.0) * 1.5;
// 泡沫生成 - 基于波浪陡度
float foam = smoothstep(foamThreshold, 1.0, abs(totalWave));
// 深度效果 - 模拟浅水和深水
float depthEffect = 1.0 - smoothstep(0.0, 1.0, st.y);
vec3 deepWaterColor = baseWaterColor.rgb * 0.7;
vec3 shallowWaterColor = baseWaterColor.rgb * 1.3;
vec3 waterBase = mix(deepWaterColor, shallowWaterColor, depthEffect);
// 颜色混合
vec3 diffuseColor = waterBase * (diffuse * 0.6 + 0.4);
vec3 specularColor = specularColor.rgb * specular;
vec3 foamColor = mix(diffuseColor, vec3(1.0), foam * 0.3);
// 最终颜色
material.diffuse = foamColor + specularColor;
// 透明度 - 边缘更透明
float edgeAlpha = 1.0 - smoothstep(0.0, 0.2, min(min(st.x, st.y), min(1.0-st.x, 1.0-st.y)));
material.alpha = baseWaterColor.a * (0.9 - edgeAlpha * 0.3);
// 材质属性
material.normal = normal;
material.specular = min(specular * 2.0, 1.0);
material.shininess = 100.0;
return material;
}
` `
czm_material czm_getMaterial(czm_materialInput materialInput)
{
czm_material material = czm_getDefaultMaterial(materialInput);
vec2 st = materialInput.st;
float time = czm_frameNumber * speed;
// 创建多层波纹
float wave1 = sin(st.x * frequency * 2.0 + st.y * frequency + time) * 0.4;
float wave2 = cos(st.x * frequency * 1.5 - st.y * frequency * 1.2 + time * 1.7) * 0.3;
float wave3 = sin(st.x * frequency * 3.0 + st.y * frequency * 0.8 + time * 0.6) * 0.2;
float combinedWave = (wave1 + wave2 + wave3) / 3.0;
// 颜色混合 - 基础色与高光色
vec3 waterColor = mix(color.rgb, highlightColor.rgb,
abs(combinedWave) * 2.0);
// 透明度变化
float alpha = color.a * (0.6 + combinedWave * 0.4);
material.diffuse = waterColor;
material.alpha = alpha;
material.specular = 0.7 + combinedWave * 0.3;
material.shininess = 50.0; // 增加光泽度
return material;
}
`
} }
}); });
// 创建水面Primitive // 创建水面Primitive
const waterPrimitive = new Cesium.Primitive({ const waterPrimitive = new Cesium.Primitive({
geometryInstances: new Cesium.GeometryInstance({ geometryInstances: new Cesium.GeometryInstance({
@ -401,6 +465,152 @@ export default class LayerMgr {
waterPrimitive2.show = true waterPrimitive2.show = true
} }
getWater4(viewer) {
const realisticWaterMaterial = new Cesium.Material({
fabric: {
type: 'AdvancedWater',
uniforms: {
baseWaterColor: new Cesium.Color(0.2, 0.4, 0.7, 0.85),
specularColor: new Cesium.Color(1.0, 1.0, 1.0, 1.0),
reflectionColor: new Cesium.Color(0.3, 0.6, 0.9, 1.0),
smallWaveSpeed: 0.05,
bigWaveSpeed: 0.02,
smallWaveFrequency: 1000.0,
bigWaveFrequency: 100.0,
waveAmplitude: 0.5,
foamThreshold: 0.2,
time: 0.0
},
source: `
// 简单的噪声函数
float noise(vec2 p) {
return fract(sin(dot(p, vec2(127.1, 311.7))) * 43758.5453);
}
// 2D噪声函数
float noise2D(vec2 p) {
vec2 i = floor(p);
vec2 f = fract(p);
f = f * f * (3.0 - 2.0 * f);
float a = noise(i);
float b = noise(i + vec2(1.0, 0.0));
float c = noise(i + vec2(0.0, 1.0));
float d = noise(i + vec2(1.0, 1.0));
return mix(mix(a, b, f.x), mix(c, d, f.x), f.y);
}
// 分形噪声
float fbm(vec2 p) {
float value = 0.0;
float amplitude = 0.5;
float frequency = 1.0;
for(int i = 0; i < 4; i++) {
value += amplitude * noise2D(p * frequency);
amplitude *= 0.5;
frequency *= 2.0;
}
return value;
}
czm_material czm_getMaterial(czm_materialInput materialInput)
{
czm_material material = czm_getDefaultMaterial(materialInput);
vec2 st = materialInput.st * 3.0;
float time = czm_frameNumber * 0.005;
// 大波浪 - 主要形状
float bigWave1 = sin(st.x * bigWaveFrequency + time * bigWaveSpeed) *
cos(st.y * bigWaveFrequency * 0.7 + time * bigWaveSpeed * 1.3);
float bigWave2 = cos(st.x * bigWaveFrequency * 0.8 - st.y * bigWaveFrequency * 1.2 +
time * bigWaveSpeed * 0.7) * 0.7;
// 小波浪 - 细节
float smallWave1 = fbm(vec2(st.x * smallWaveFrequency + time,
st.y * smallWaveFrequency)) * 0.5;
float smallWave2 = fbm(vec2(st.x * smallWaveFrequency * 1.7 - time * 0.7,
st.y * smallWaveFrequency * 1.3)) * 0.3;
// 组合波浪
float totalWave = (bigWave1 * 0.6 + bigWave2 * 0.4 +
smallWave1 * 0.3 + smallWave2 * 0.2) * waveAmplitude;
// 计算法线 - 使用波浪梯度
vec2 eps = vec2(0.001, 0.0);
float h1 = sin((st.x + eps.x) * bigWaveFrequency + time) *
cos(st.y * bigWaveFrequency * 0.7 + time);
float h2 = sin(st.x * bigWaveFrequency + time) *
cos((st.y + eps.x) * bigWaveFrequency * 0.7 + time);
vec3 normal = normalize(vec3(h1 - totalWave, h2 - totalWave, 1.0));
// 基于法线的光照计算
vec3 lightDir = czm_sunDirectionEC;
float diffuse = max(dot(normal, lightDir), 0.0);
// 高光计算
vec3 viewDir = vec3(0.0, 1.0, 0.0); // 简化视角方向
vec3 halfDir = normalize(viewDir);
float specular = pow(max(dot(normal, halfDir), 0.0), 120.0) * 1.5;
// 泡沫生成 - 基于波浪陡度
float foam = smoothstep(foamThreshold, 1.0, abs(totalWave));
// 深度效果 - 模拟浅水和深水
float depthEffect = 1.0 - smoothstep(0.0, 1.0, st.y);
vec3 deepWaterColor = baseWaterColor.rgb * 0.7;
vec3 shallowWaterColor = baseWaterColor.rgb * 1.3;
vec3 waterBase = mix(deepWaterColor, shallowWaterColor, depthEffect);
// 颜色混合
vec3 diffuseColor = waterBase * (diffuse * 0.6 + 0.4);
vec3 specularColor = specularColor.rgb * specular;
vec3 foamColor = mix(diffuseColor, vec3(1.0), foam * 0.3);
// 最终颜色
material.diffuse = foamColor + specularColor;
// 透明度 - 边缘更透明
float edgeAlpha = 1.0 - smoothstep(0.0, 0.2, min(min(st.x, st.y), min(1.0-st.x, 1.0-st.y)));
material.alpha = baseWaterColor.a * (0.9 - edgeAlpha * 0.3);
// 材质属性
material.normal = normal;
material.specular = min(specular * 2.0, 1.0);
material.shininess = 100.0;
return material;
}
`
}
});
// 创建水面Primitive
const waterPrimitive = new Cesium.Primitive({
geometryInstances: new Cesium.GeometryInstance({
geometry: new Cesium.PolygonGeometry({
polygonHierarchy: new Cesium.PolygonHierarchy(
Cesium.Cartesian3.fromDegreesArrayHeights([
114.76352489831815,31.494754219571522,80,114.76520120583086,31.4999564874016,80,114.76980240861486,31.498491685970183,80,114.77288986029524,31.499291609035314,80,114.7752374682663,31.497030189270138,80,114.77496372060254,31.49482620567726,80,114.77471997997016,31.490858103316754,80,114.77276936030704,31.48685100847121,80,114.77069081826704,31.483979297273798,80,114.76965049062629,31.48370282132599,80,114.76441718716531,31.48255871323312,80,114.76372798131092,31.47900692403831,80,114.76293736420705,31.477822176429328,80,114.75120596797079,31.471419526420515,80,114.75038568642819,31.469139708715907,80,114.74958949458313,31.46814991520691,80,114.74789070463534,31.468121367311053,80,114.7471786876506,31.466373139201135,80,114.74930655086952,31.461932951570883,80,114.74805372401946,31.458130678122178,80,114.7445797538948,31.45414539792457,80,114.73993504386465,31.45124971272249,80,114.73636690633312,31.452374249551728,80,114.73813467149844,31.456832583528676,80,114.74095195126414,31.460165343908727,80,114.74011304826205,31.464062436365865,80,114.73995399997894,31.46681589187651,80,114.74014787758605,31.470080972179417,80,114.74046551608743,31.47381704756393,80,114.74421736191424,31.47792376112243,80,114.7520809314138,31.483752378529545,80,114.7580325301891,31.49028179289772,80,114.76385167039098,31.493196679385143,80
])
),
extrudedHeight: 0.1,
perPositionHeight: true,
vertexFormat: Cesium.MaterialAppearance.VERTEX_FORMAT
})
}),
appearance: new Cesium.MaterialAppearance({
material: realisticWaterMaterial,
translucent: true
}),
show:true,
});
viewer.scene.primitives.add(waterPrimitive);
}
async getQxsy(viewer) { async getQxsy(viewer) {
try { try {
let tileset = await Cesium.Cesium3DTileset.fromUrl( let tileset = await Cesium.Cesium3DTileset.fromUrl(
@ -1732,5 +1942,169 @@ export default class LayerMgr {
viewer.dataSources.add(Cesium.CzmlDataSource.load(czml)); viewer.dataSources.add(Cesium.CzmlDataSource.load(czml));
viewer.clock.shouldAnimate = false; // 暂停动画 viewer.clock.shouldAnimate = false; // 暂停动画
} }
async getWAter5(viewer) {
const realisticWaterMaterial = new Cesium.Material({
fabric: {
type: 'AdvancedWater',
uniforms: {
baseWaterColor: new Cesium.Color(0.2, 0.4, 0.7, 0.85),
specularColor: new Cesium.Color(1.0, 1.0, 1.0, 1.0),
reflectionColor: new Cesium.Color(0.3, 0.6, 0.9, 1.0),
smallWaveSpeed: 0.5,
bigWaveSpeed: 0.2,
smallWaveFrequency: 1000.0, // 调整频率以适应世界坐标
bigWaveFrequency: 1000.0, // 调整频率以适应世界坐标
waveAmplitude: 1.0,
foamThreshold: 1.0,
time: 0.0
},
source: `
// 简单的噪声函数
float noise(vec2 p) {
return fract(sin(dot(p, vec2(127.1, 311.7))) * 43758.5453);
}
// 2D噪声函数
float noise2D(vec2 p) {
vec2 i = floor(p);
vec2 f = fract(p);
f = f * f * (3.0 - 2.0 * f);
float a = noise(i);
float b = noise(i + vec2(1.0, 0.0));
float c = noise(i + vec2(0.0, 1.0));
float d = noise(i + vec2(1.0, 1.0));
return mix(mix(a, b, f.x), mix(c, d, f.x), f.y);
}
// 分形噪声
float fbm(vec2 p) {
float value = 0.0;
float amplitude = 0.5;
float frequency = 1.0;
for(int i = 0; i < 4; i++) {
value += amplitude * noise2D(p * frequency);
amplitude *= 0.5;
frequency *= 2.0;
}
return value;
}
czm_material czm_getMaterial(czm_materialInput materialInput)
{
czm_material material = czm_getDefaultMaterial(materialInput);
// 获取世界坐标 - 使用正确的方法
vec4 worldPosition = czm_inverseModelView * vec4(materialInput.positionToEyeEC, 1.0);
vec3 worldPos = worldPosition.xyz;
// 使用世界坐标的x和z分量（忽略y分量，因为水面是水平的）
vec2 worldCoord = worldPos.xz / 100000.0; // 缩放以适应波浪频率
// 使用系统时间，确保所有Primitive使用相同的时间
float time = czm_frameNumber * 0.005;
// 大波浪 - 主要形状
float bigWave1 = sin(worldCoord.x * bigWaveFrequency + time * bigWaveSpeed) *
cos(worldCoord.y * bigWaveFrequency * 0.7 + time * bigWaveSpeed * 1.3);
float bigWave2 = cos(worldCoord.x * bigWaveFrequency * 0.8 - worldCoord.y * bigWaveFrequency * 1.2 +
time * bigWaveSpeed * 0.7) * 0.7;
// 小波浪 - 细节
float smallWave1 = fbm(vec2(worldCoord.x * smallWaveFrequency + time,
worldCoord.y * smallWaveFrequency)) * 0.5;
float smallWave2 = fbm(vec2(worldCoord.x * smallWaveFrequency * 1.7 - time * 0.7,
worldCoord.y * smallWaveFrequency * 1.3)) * 0.3;
// 组合波浪
float totalWave = (bigWave1 * 0.6 + bigWave2 * 0.4 +
smallWave1 * 0.3 + smallWave2 * 0.2) * waveAmplitude;
// 计算法线 - 使用波浪梯度
vec2 eps = vec2(0.001, 0.0);
float h1 = sin((worldCoord.x + eps.x) * bigWaveFrequency + time) *
cos(worldCoord.y * bigWaveFrequency * 0.7 + time);
float h2 = sin(worldCoord.x * bigWaveFrequency + time) *
cos((worldCoord.y + eps.x) * bigWaveFrequency * 0.7 + time);
vec3 normal = normalize(vec3(h1 - totalWave, h2 - totalWave, 1.0));
// 基于法线的光照计算
vec3 lightDir = czm_sunDirectionEC;
float diffuse = max(dot(normal, lightDir), 0.0);
// 高光计算
vec3 viewDir = normalize(materialInput.positionToEyeEC);
vec3 reflectDir = reflect(-lightDir, normal);
float specular = pow(max(dot(viewDir, reflectDir), 0.0), 120.0) * 1.5;
// 泡沫生成 - 基于波浪陡度
float foam = smoothstep(foamThreshold, 1.0, abs(totalWave));
// 使用固定的水颜色，不再依赖纹理坐标
vec3 waterBase = baseWaterColor.rgb;
// 颜色混合
vec3 diffuseColor = waterBase * (diffuse * 0.6 + 0.4);
vec3 specularColor = specularColor.rgb * specular;
vec3 foamColor = mix(diffuseColor, vec3(1.0), foam * 0.3);
// 最终颜色
material.diffuse = foamColor + specularColor;
// 固定的透明度
material.alpha = baseWaterColor.a;
// 材质属性
material.normal = normal;
material.specular = min(specular * 2.0, 1.0);
material.shininess = 100.0;
return material;
}
`
}
});
const { czml } = await fetch(`${process.env.PUBLIC_URL}/data/json/czml3.json`)
.then(resp => resp.json())
.then(data => data)
.catch(() => []);
const waterPrimitiveList = czml.map((item,index)=>{
// 创建水面Primitive
const waterPrimitive = new Cesium.Primitive({
geometryInstances: new Cesium.GeometryInstance({
geometry: new Cesium.PolygonGeometry({
polygonHierarchy: new Cesium.PolygonHierarchy(
Cesium.Cartesian3.fromDegreesArrayHeights(
item.cartographicDegrees
)
),
extrudedHeight: 0.1,
perPositionHeight: true,
vertexFormat: Cesium.MaterialAppearance.VERTEX_FORMAT
})
}),
appearance: new Cesium.MaterialAppearance({
material: realisticWaterMaterial,
translucent: true
}),
show:index===false,
});
waterPrimitive.id = 'myWater_'+index
viewer.scene.primitives.add(waterPrimitive)
return waterPrimitive
})
await this.sleep(2000)
for(let i = 0; i < waterPrimitiveList.length; ++i) {
const item = waterPrimitiveList[i]
if(i>0){
waterPrimitiveList[i-1].show = false
}
item.show = true
await this.sleep(2000)
}
}
} }

2
src/views/Home/homePanelsLayoutPage/item_yujing/index.js
View File

@ -121,7 +121,7 @@ const Page = ({ mySetTms }) => {
{ key==='位移告警'?<Table_wy data={dataObj.shiftWarn} onCancel={()=>setOpen(false)}/>:null } { key==='位移告警'?<Table_wy data={dataObj.shiftWarn} onCancel={()=>setOpen(false)}/>:null }
{ key==='渗压告警'?<Table_sy data={dataObj.pressWarn} onCancel={()=>setOpen(false)}/>:null } { key==='渗压告警'?<Table_sy data={dataObj.pressWarn} onCancel={()=>setOpen(false)}/>:null }
{ key==='渗流告警'?<Table_sl data={dataObj.flowWarn} onCancel={()=>setOpen(false)}/>:null } { key==='渗流告警'?<Table_sl data={dataObj.flowWarn} onCancel={()=>setOpen(false)}/>:null }
{key === 'AI告警' ? <Table_AI tms={tms} /> : null} {key === 'AI告警' ? <Table_AI /> : null}
{ key==='白蚁告警'?<Table_by data={dataObj.byWarn} onCancel={()=>setOpen(false)}/>:null } { key==='白蚁告警'?<Table_by data={dataObj.byWarn} onCancel={()=>setOpen(false)}/>:null }
</div> </div>
</Modal> </Modal>

18
src/views/Home/homePanelsLayoutPage/item_yujing/table_AI.js
View File

@ -10,20 +10,20 @@ import apiurl from "../../../../service/apiurl";
import moment from 'moment'; import moment from 'moment';
const Page = ({ tms }) => { const Page = () => {
// const { tableProps, search, refresh } = usePageTable(createCrudService('/gunshiApp/tsg/rescue/goods/page/query').find_noCode,{}); const { tableProps, search, refresh } = usePageTable(createCrudService('/gunshiApp/tsg/rescue/goods/page/query').find_noCode,{});
// useEffect(()=>{ useEffect(()=>{
// const params = { const params = {
// search: {} search: {}
// }; };
// search(params) search(params)
// }, []) }, [])
return ( return (
<div className="ant-card-body" style={{padding:"0 10px",height:'600px',overflowY:'auto'}}> <div className="ant-card-body" style={{padding:"0 10px",height:'600px',overflowY:'auto'}}>
<AiWarn tm={tms}/> <AiWarn/>
{/* <div>时间：{moment().format('YYYY-MM-DD HH:mm:ss')} 至 {moment().format('YYYY-MM-DD HH:mm:ss')}</div> */} {/* <div>时间：{moment().format('YYYY-MM-DD HH:mm:ss')} 至 {moment().format('YYYY-MM-DD HH:mm:ss')}</div> */}
</div> </div>
) )

177
src/views/fxzb/gzpz/form.js
View File

@ -1,177 +0,0 @@
import React, { useEffect, useState, useMemo, useRef } from 'react';
import { Form, Button, Input, Row, Upload, Col, Table, DatePicker, InputNumber, message, Image, Modal, Radio, Popconfirm } from 'antd';
import { DeleteOutlined, VideoCameraOutlined } from '@ant-design/icons';
import { formItemLayout, btnItemLayout } from '../../../components/crud/FormLayoutProps';
import apiurl from '../../../service/apiurl';
import NormalSelect from '../../../components/Form/NormalSelect';
import moment from 'moment';
const ModalForm = ({ mode, record, onEdit, onSave, onSimilarSave }) => {
const [form] = Form.useForm();
const onfinish = (values) => {
const userId = localStorage.getItem('userId')
values.userId = userId
values.createTime = values.createTime ? moment(values.createTime).format("YYYY-MM-DD 00:00:00") : undefined
if (mode === 'edit') {
onEdit(apiurl.sy.yjxxpz.edit, { ...record, ...values })
}
if (mode === 'save') {
onSave(apiurl.sy.yjxxpz.save, values)
}
}
useEffect(() => {
if (mode == "save") {
const name = localStorage.getItem('userName')
form.setFieldValue("createName", name)
form.setFieldValue("createTime", moment())
}
}, [mode])
return (
<>
<Form
form={form}
{...formItemLayout}
onFinish={onfinish}
initialValues={record}
>
<Row>
<Col span={12}>
<Form.Item
label="规则名称"
name="ruleName"
rules={[{ required: true }]}
>
<Input style={{ width: '100%' }} allowClear disabled={mode === 'view'} />
</Form.Item>
</Col>
<Col span={12}>
<Form.Item
label="预警等级"
name="warningLevel"
rules={[{ required: true }]}
>
<NormalSelect
options={[
{ label: '蓝色', value: 0 },
{ label: '黄色', value: 1 },
{ label: '橙色', value: 2 },
{ label: '红色', value: 3 }
]}
allowClear={true}
style={{ width: '100%' }}
disabled={mode === 'view'}
/>
</Form.Item>
</Col>
<Col span={12}>
<Form.Item
label="启用状态"
name="status"
rules={[{ required: true }]}
>
<Radio.Group disabled={mode === 'view'}>
<Radio value={0}>未启用</Radio>
<Radio value={1}>启用</Radio>
</Radio.Group>
</Form.Item>
</Col>
</Row>
<Row>
<Col span={12}>
<Form.Item
label="规则配置"
name="durationHours"
rules={[{ required: true, message: '请选择对象' }]}
>
<NormalSelect
allowClear
style={{ width: '100%' }}
disabled={mode === 'view'}
placeholder="请选择对象"
options={[
{ label: '未来1h水库预报水位', value: 1 },
{ label: '未来3h水库预报水位', value: 3 },
{ label: '未来6h水库预报水位', value: 6 },
{ label: '未来12h水库预报水位', value: 12 },
{ label: '未来24h水库预报水位', value: 24 },
]}
/>
</Form.Item>
</Col>
<Col span={4}>
<Form.Item
label=""
name="operator"
rules={[{ required: true, message: '请选择关系' }]}
>
<NormalSelect
allowClear
style={{ width: '100%' }}
disabled={mode === 'view'}
placeholder="请选择关系"
options={[
{ label: '>', value: '>' },
{ label: '≥', value: '>=' },
]}
/>
</Form.Item>
</Col>
<Col span={8}>
<Form.Item
label=""
name="type"
rules={[{ required: true, message: '请选择阈值' }]}
>
<NormalSelect
allowClear
style={{ width: '100%' }}
disabled={mode === 'view'}
placeholder="请选择阈值"
options={[
{ label: '汛限水位(109.00m)', value: 0 },
{ label: '设计洪水位(111.89m)', value: 1 },
{ label: '校核洪水位(113.06m)', value: 2 },
]}
/>
</Form.Item>
</Col>
</Row>
<Row>
<Col span={12}>
<Form.Item
label="创建人"
name="createName"
>
<Input disabled={true} style={{ width: '100%' }} allowClear />
</Form.Item>
</Col>
<Col span={12}>
<Form.Item
label="创建时间"
name="createTime"
getValueFromEvent={(e, dateString) => dateString}
getValueProps={(value) => ({ value: value ? moment(value) : undefined })}
>
<DatePicker disabled={true} style={{ width: '100%' }} allowClear format={"YYYY-MM-DD HH:mm:ss"} />
</Form.Item>
</Col>
</Row>
{
mode === 'view' ? null : (
<>
<Form.Item {...btnItemLayout}>
<Button type="primary" htmlType="submit">
{mode === 'save' ? '提交' : '修改'}
</Button>
</Form.Item>
</>
)
}
</Form>
</>
);
}
export default ModalForm;

109
src/views/fxzb/gzpz/index.js
View File

@ -1,109 +0,0 @@
import React, { Fragment, useRef, useMemo,useEffect,useState } from 'react';
import BasicCrudModal from '../../../components/crud/BasicCrudModal';
import { Table, Card, Modal, Form, Input, Button, Row,Col, Timeline, message, Tabs,Image } from 'antd';
import {FileWordOutlined,FilePdfOutlined,FileZipOutlined,FileExcelOutlined } from '@ant-design/icons';
import { useSelector } from 'react-redux';
import ToolBar from './toolbar';
import ModalForm from './form';
import apiurl from '../../../service/apiurl';
import usePageTable from '../../../components/crud/usePageTable2';
import { createCrudService } from '../../../components/crud/_';
import {CrudOpRender_text} from '../../../components/crud/CrudOpRender';
import moment from 'moment';
const url = "http://223.75.53.141:9100/gs-tsg"
const Page = () => {
const role = useSelector(state => state.auth.role);
const editBtn = role?.rule?.find(item => item.menuName == "编辑")|| true;
const viewBtn = role?.rule?.find(item => item.menuName == "查看")|| true;
const delBtn = role?.rule?.find(item => item.menuName == "删除")|| true;
const levelObj = {
0: "蓝色",
1: "黄色",
2: "橙色",
3: "红色",
}
const statusObj = {
0: "未启用",
1: "启用",
}
const refModal = useRef();
const [searchVal, setSearchVal] = useState(false)
const columns = [
{ title: '序号', key: 'inx', dataIndex: 'inx', width: 60, align: "center" },
{ title: '规则名称', key: 'ruleName', dataIndex: 'ruleName', width: 140, align: "center", },
{ title: '预警等级', key: 'warningLevel', dataIndex: 'warningLevel', width: 100, align: "center", render: (v) => <span>{levelObj[v]}</span> },
{ title: '状态', key: 'status', dataIndex: 'status', width: 100,align:"center",render: (v) => <span>{statusObj[v]}</span> },
{ title: '规则描述', key: 'ruleDesc', dataIndex: 'ruleDesc', width: 300, align: "center", },
{ title: '创建时间', key: 'createTime', dataIndex: 'createTime', width: 140, align: "center"},
{ title: '创建人', key: 'createName', dataIndex: 'createName', width: 140, align: "center"},
{
title: '操作', key: 'operation', width: 100, fixed: 'right', align: 'center',
render: (value, row, index) => (<CrudOpRender_text edit={true} del={true} command={(cmd) => () => command(cmd)(row)} />)
},
];
const width = useMemo(() => columns.reduce((total, cur) => total + (cur.width), 0), [columns]);
const command = (type) => (params) => {
if (type === 'save') {
refModal.current.showSave();
} else if (type === 'edit') {
refModal.current.showEdit({ ...params });
} else if (type === 'view') {
refModal.current.showView(params);
} else if (type === 'del') {
refModal.current.onDeleteGet(apiurl.sy.yjxxpz.delete + `${params.id}`);
}
}
const { tableProps, search, refresh } = usePageTable(createCrudService(apiurl.sy.yjxxpz.page).find_noCode);
/**
* @description 处理成功的回调
*/
const successCallback = () => {
refresh()
}
useEffect(() => {
const params = {
search: {
...searchVal,
}
};
search(params)
}, [searchVal])
return (
<>
<div className='content-root clearFloat xybm' style={{paddingRight:"0",paddingBottom:"0"}}>
<div className='lf CrudAdcdTreeTableBox' style={{width:"100%",overflowY:"auto"}}>
<Card className='nonebox'>
<ToolBar
setSearchVal={setSearchVal}
onSave={command('save')}
role={role}
/>
</Card>
<div className="ant-card-body" style={{ padding: "20px 0 0 0" }}>
<Table columns={columns} rowKey="inx" {...tableProps} scroll={{ x: width , y: "calc( 100vh - 400px )"}}/>
</div>
</div>
<BasicCrudModal
width={1000}
ref={refModal}
title=""
component={ModalForm}
onCrudSuccess={successCallback}
// onCrudSuccess={()=>{refresh({addvcd:localStorage.getItem('ADCD6')})}}
/>
</div>
</>
);
}
export default Page;

57
src/views/fxzb/gzpz/toolbar.js
View File

@ -1,57 +0,0 @@
import React, { useEffect,useState } from 'react';
import { Form, Input, Button, DatePicker } from 'antd';
import moment from 'moment';
import NormalSelect from '../../../components/Form/NormalSelect';
const { RangePicker } = DatePicker;
const ToolBar = ({ setSearchVal, onSave, storeData, role }) => {
const addBtn = role?.rule?.find(item => item.menuName == "新增")|| true;
const searchBtn = role?.rule?.find(item => item.menuName == "查询")|| true;
const [form] = Form.useForm();
const onFinish = (values) => {
setSearchVal({...values})
}
return (
<>
<div style={{display:'flex',justifyContent:'space-between'}}>
<Form form={form} className='toolbarBox' layout="inline" onFinish={onFinish}>
<Form.Item label="规则名称" name="ruleName">
<Input allowClear style={{width:200}}/>
</Form.Item>
<Form.Item label="预警等级" name="warningLevel">
<NormalSelect
allowClear
style={{ width: '150px' }}
options={[
{ label: '蓝色', value: 0 },
{ label: '黄色', value: 1 },
{ label: '橙色', value: 2 },
{ label: '红色', value: 3 }
]}
/>
</Form.Item>
{searchBtn ? <Form.Item>
<Button type="primary" htmlType="submit">查询</Button>
</Form.Item> : null }
<Form.Item>
<Button onClick={() => form.resetFields()}>重置</Button>
</Form.Item>
{
(onSave && addBtn) ?
<Form.Item>
<Button onClick={onSave}>新增</Button>
</Form.Item>
:null
}
</Form>
</div>
</>
);
}
export default ToolBar;

149
src/views/fxzb/yjxx/form.js
View File

@ -1,149 +0,0 @@
import React,{useEffect,useState,useMemo,useRef} from 'react';
import { Form, Button, Input, Row,Upload, Col, Table, DatePicker, InputNumber,message,Image,Modal,Radio ,Popconfirm } from 'antd';
import { DeleteOutlined,VideoCameraOutlined } from '@ant-design/icons';
import { formItemLayout, btnItemLayout } from '../../../components/crud/FormLayoutProps';
import apiurl from '../../../service/apiurl';
import NormalSelect from '../../../components/Form/NormalSelect';
import moment from 'moment';
const ModalForm = ({ mode, record, onEdit, onSave, onSimilarSave }) => {
const [form] = Form.useForm();
const onfinish = (values) => {
const userId = localStorage.getItem('userId')
values.userId = userId
if (mode === 'edit') {
onEdit(apiurl.rcgl.wxyh.edit,{...record,...values})
}
if (mode === 'save') {
onSave(apiurl.rcgl.wxyh.save,values)
}
}
return (
<>
<Form
form={form}
{...formItemLayout}
onFinish={onfinish}
initialValues={record}
>
<Row>
<Col span={12}>
<Form.Item
label="规则名称"
name="ruleName"
rules={[{ required: true }]}
>
<Input style={{ width: '100%' }} allowClear disabled={mode === 'view'} />
</Form.Item>
</Col>
<Col span={12}>
<Form.Item
label="预警等级"
name="warningLevel"
rules={[{ required: true }]}
>
<NormalSelect
options={[
{ label: '蓝色', value: 0 },
{ label: '黄色', value: 1 },
{ label: '橙色', value: 2 },
{ label: '红色', value: 3 }
]}
allowClear={true}
style={{ width: '100%' }}
disabled={mode === 'view'}
/>
</Form.Item>
</Col>
<Col span={12}>
<Form.Item
label="启用状态"
name="status"
rules={[{ required: true }]}
>
<Radio.Group disabled={mode === 'view'}>
<Radio value={0}>未启用</Radio>
<Radio value={1}>启用</Radio>
</Radio.Group>
</Form.Item>
</Col>
</Row>
<Row>
<Col span={24}>
<Form.Item
label="规则配置"
required
labelCol={{ span: 3 }}
wrapperCol={{ span: 19 }}
>
<Row gutter={16}>
<Col span={8}>
<Form.Item name="durationHours" rules={[{ required: true }]} noStyle>
<NormalSelect
allowClear
style={{ width: '100%' }}
disabled={mode === 'view'}
placeholder="请选择对象"
options={[
{ label: '未来1h水库预报水位', value: 1 },
{ label: '未来3h水库预报水位', value: 3 },
{ label: '未来6h水库预报水位', value: 6 },
{ label: '未来12h水库预报水位', value: 12 },
{ label: '未来24h水库预报水位', value: 24 },
]}
/>
</Form.Item>
</Col>
<Col span={8}>
<Form.Item name="operator" rules={[{ required: true }]} noStyle>
<NormalSelect
allowClear
style={{ width: '100%' }}
disabled={mode === 'view'}
placeholder="请选择关系"
options={[
{ label: '>', value: '>' },
{ label: '≥', value: '>=' },
]}
/>
</Form.Item>
</Col>
<Col span={8}>
<Form.Item name="type" rules={[{ required: true }]} noStyle>
<NormalSelect
allowClear
style={{ width: '100%' }}
disabled={mode === 'view'}
placeholder="请选择阈值"
options={[
{ label: '汛限水位(109.00m)', value: 0 },
{ label: '设计洪水位(111.89m)', value: 1 },
{ label: '校核洪水位(113.06m)', value: 2 },
]}
/>
</Form.Item>
</Col>
</Row>
</Form.Item>
</Col>
</Row>
{
mode==='view'?null:(
<>
<Form.Item {...btnItemLayout}>
<Button type="primary" htmlType="submit">
{mode === 'save' ? '提交' : '修改'}
</Button>
</Form.Item>
</>
)
}
</Form>
</>
);
}
export default ModalForm;

105
src/views/fxzb/yjxx/index.js
View File

@ -1,105 +0,0 @@
import React, { Fragment, useRef, useMemo,useEffect,useState } from 'react';
import BasicCrudModal from '../../../components/crud/BasicCrudModal';
import { Table, Card, Modal, Form, Input, Button, Row,Col, Timeline, message, Tabs,Image } from 'antd';
import {FileWordOutlined,FilePdfOutlined,FileZipOutlined,FileExcelOutlined } from '@ant-design/icons';
import { useSelector } from 'react-redux';
import ToolBar from './toolbar';
import ModalForm from './form';
import apiurl from '../../../service/apiurl';
import usePageTable from '../../../components/crud/usePageTable2';
import { createCrudService } from '../../../components/crud/_';
import {CrudOpRender_text} from '../../../components/crud/CrudOpRender';
import moment from 'moment';
const url = "http://223.75.53.141:9100/gs-tsg"
const Page = () => {
const role = useSelector(state => state.auth.role);
const editBtn = role?.rule?.find(item => item.menuName == "编辑")|| true;
const viewBtn = role?.rule?.find(item => item.menuName == "查看")|| true;
const delBtn = role?.rule?.find(item => item.menuName == "删除")|| true;
const levelObj = {
0: "蓝色",
1: "黄色",
2: "橙色",
3: "红色",
}
const refModal = useRef();
const [searchVal, setSearchVal] = useState(false)
const columns = [
{ title: '序号', key: 'inx', dataIndex: 'inx', width: 60, align: "center" },
{ title: '预警时间', key: 'createTime', dataIndex: 'createTime', width: 140, align: "center", },
{ title: '规则名称', key: 'ruleName', dataIndex: 'ruleName', width: 140, align: "center", },
{ title: '预警等级', key: 'warningLevel', dataIndex: 'warningLevel', width: 100, align: "center", render: (v) => <span>{levelObj[v]}</span> },
{ title: '预警信息', key: 'ruleDesc', dataIndex: 'ruleDesc', width: 300, align: "center", },
{
title: '操作', key: 'operation', width: 100, fixed: 'right', align: 'center',
render: (value, row, index) => (<CrudOpRender_text view={true} command={(cmd) => () => command(cmd)(row)} />)
},
];
const width = useMemo(() => columns.reduce((total, cur) => total + (cur.width), 0), [columns]);
const command = (type) => (params) => {
if (type === 'save') {
refModal.current.showSave();
} else if (type === 'edit') {
refModal.current.showEdit({ ...params });
} else if (type === 'view') {
refModal.current.showView(params);
} else if (type === 'del') {
refModal.current.onDeleteGet(apiurl.sy.yjxxpz.delete + `${params.id}`);
}
}
const { tableProps, search, refresh } = usePageTable(createCrudService(apiurl.sy.yjxxpz.page).find_noCode);
/**
* @description 处理成功的回调
*/
const successCallback = () => {
refresh()
}
useEffect(() => {
if (searchVal) {
const params = {
search: {
...searchVal,
}
};
search(params)
}
}, [searchVal])
return (
<>
<div className='content-root clearFloat xybm' style={{paddingRight:"0",paddingBottom:"0"}}>
<div className='lf CrudAdcdTreeTableBox' style={{width:"100%",overflowY:"auto"}}>
<Card className='nonebox'>
<ToolBar
setSearchVal={setSearchVal}
onSave={command('save')}
role={role}
/>
</Card>
<div className="ant-card-body" style={{ padding: "20px 0 0 0" }}>
<Table columns={columns} rowKey="inx" {...tableProps} scroll={{ x: width , y: "calc( 100vh - 400px )"}}/>
</div>
</div>
<BasicCrudModal
width={1000}
ref={refModal}
title=""
component={ModalForm}
onCrudSuccess={successCallback}
// onCrudSuccess={()=>{refresh({addvcd:localStorage.getItem('ADCD6')})}}
/>
</div>
</>
);
}
export default Page;

71
src/views/fxzb/yjxx/toolbar.js
View File

@ -1,71 +0,0 @@
import React, { useEffect,useState } from 'react';
import { Form, Input, Button, DatePicker } from 'antd';
import moment from 'moment';
import NormalSelect from '../../../components/Form/NormalSelect';
const { RangePicker } = DatePicker;
const ToolBar = ({ setSearchVal, onSave, storeData, role }) => {
const addBtn = role?.rule?.find(item => item.menuName == "新增")|| true;
const searchBtn = role?.rule?.find(item => item.menuName == "查询")|| true;
const [form] = Form.useForm();
const onFinish = (values) => {
let dateTimeRangeSo;
if (values.tm) {
dateTimeRangeSo = {
start: moment(values.tm[0]).format('YYYY-MM-DD 00:00:00'),
end: moment(values.tm[1]).format('YYYY-MM-DD 23:59:59')
}
}
delete values.tm
setSearchVal({...values, dateTimeRangeSo});
}
useEffect(() => {
let dateTimeRangeSo = {
start: moment().subtract(1,"months").format('YYYY-MM-DD 00:00:00'),
end: moment().format('YYYY-MM-DD 23:59:59')
}
form.setFieldValue("tm", [moment(dateTimeRangeSo.start), moment(dateTimeRangeSo.end)])
setSearchVal({ dateTimeRangeSo })
}, [])
return (
<>
<div style={{display:'flex',justifyContent:'space-between'}}>
<Form form={form} className='toolbarBox' layout="inline" onFinish={onFinish}>
<Form.Item label="预警时间" name="tm">
<RangePicker
allowClear
style={{ width: "300px" }}
format="YYYY-MM-DD"
/>
</Form.Item>
<Form.Item label="预警等级" name="warningLevel">
<NormalSelect
allowClear
style={{ width: '150px' }}
options={[
{ label: '蓝色', value: 0 },
{ label: '黄色', value: 1 },
{ label: '橙色', value: 2 },
{ label: '红色', value: 3 }
]}
/>
</Form.Item>
{searchBtn ? <Form.Item>
<Button type="primary" htmlType="submit">查询</Button>
</Form.Item> : null }
<Form.Item>
<Button onClick={() => form.resetFields()}>重置</Button>
</Form.Item>
</Form>
</div>
</>
);
}
export default ToolBar;

604
src/views/gcaqjc/gcaqfx/jrx/jrxOptions.js
View File

@ -1,68 +1,136 @@
import pieMonth from "./pieMonth";
/** export default function jrxOptions(data = {}, type = "1",typeName='1') {
* 生成通用的测值图 ECharts 配置项 // debugger
* @param {Object} data - 数据对象 console.log("data",data);
* @param {Object} config - 配置对象，包含所有项目相关的具体参数 // data.rz = 112
* @returns {Object} ECharts option // 根据断面类型确定y轴刻度以及最大和最小
*/ const yMin = type == "3" ? 70 : type == "2" ? 67 :
export const getJrxChartOption = (data, config) => { type == '1' ? 59 : 99;
const { const yMax = type == "3" ? 129 : type == "2" ? 117
yAxis, // { min, max } : type == "1" ? 118 : 116;
xAxis, // { min, max } (optional, default 0-100)
backgroundImage, // { url, width, height }
damLines, // { rz: [], rz1: [] } - 大坝轮廓线
waterLevel, // { value, x, label } - 水位标注信息
pipes, // Array<{ x, bottomY, topY, value }> - 渗压管列表
connectionLine, // Array<Point> - 连接线点集
toolbox, // (optional)
} = config;
const textColor = '#666'; // 断面上的渗压管
const type1 = ["UPD1", "UPD4", "UPD7", "UPD16"];
const type2 = ["UPD10", "UPD13"];
const type3 = ["UPD2", "UPD5", "UPD8", "UPD17"];
const type4 = ["UPD11", "UPD14"];
const type5 = ["UPD3", "UPD6", "UPD9"];
const type6 = ["UPD12", "UPD15"];
const type7 = ["UPD24", "UPD26","UPD28"]; //UPD24:109.87,UPD26:109.75,UPD28:109.43
const type8 = ["UPD25", "UPD27","UPD29"]; //UPD25:109.87,UPD27:109.75,UPD29:109.43
// 构造渗压管的 Series 数据 // 管底高程
// 蓝色段 (gz): 从底到测值 const alltype = typeName == "1" ? type1 :
const gzSeries = pipes.map((pipe, index) => { typeName == "2" ? type2 :
const dataPoints = (pipe.value !== undefined && pipe.value !== null) typeName == "3" ? type3 :
? [[pipe.x, pipe.bottomY], [pipe.x, pipe.value]] typeName == "4" ? type4 :
: []; typeName == "5" ? type5 :
return { typeName == "6" ? type6 :
type: 'line', typeName == "7" ? type7 :
name: `pipe-gz-${index}`, typeName == "8" ? type8 :
symbol: 'none', [];
symbolSize: 10,
z: 1, // 字体颜色
itemStyle: { color: '#5487FF' }, const textColor = '#666'
lineStyle: { color: '#5487FF', width: 6 }, const imageUrl370 = `${process.env.PUBLIC_URL}/assets/images/zb370.png `
data: dataPoints const imageUrl250 = `${process.env.PUBLIC_URL}/assets/images/zb250.png `
}; const imageUrl130 = `${process.env.PUBLIC_URL}/assets/images/zb130.png `
const imageUrl010 = `${process.env.PUBLIC_URL}/assets/images/fb010.png `
const imageUrl = type == "1" ? imageUrl130 :
type == "2" ? imageUrl250 :
type == "3" ? imageUrl370 : imageUrl010
;
const rule = `${process.env.PUBLIC_URL}/assets/images/ruler.png `
// rz 是最上面那条线 rz1是那条贴近坝面的线 xValue求解的是最上面那条线的末尾横坐标
const xValue = type == "3" ? (((data?.rz - 86) + 0.6 * 5) / 0.6) :
type == "2" ? (((data?.rz - 87) + 0.63 * 7) / 0.63) :
type == "1" ? (((data?.rz - 88) + 0.7 * 10) / 0.7) :
(((data?.rz - 102) + 0.25 * 4) / 0.25)
const rz = data?.rz ?
[[xValue, data?.rz], [0, data?.rz]] :
[]
const rz1 = data?.rz ?
type == "3" ?
[[0, 86], [5, 86], [xValue, data?.rz]] :
type == "2" ?
[[0, 87], [7, 87], [xValue, data?.rz]]
:
type == "1" ?
[[0, 88], [10, 88], [xValue, data?.rz]]
:
[[0, 102], [4, 102], [xValue, data?.rz]]
: [];
// gz1、gz2、gz3、gz4分别为渗压管
const gz1 = data[alltype[0]] ?
type == "3" ? [[typeName =='5' ?47:51, typeName =='5' ?76.56:92.18], [typeName =='5' ?47:51, data[alltype[0]]]] :
type == "2" ? [[typeName =='3' ? 45.5:50, typeName =='3' ?76.76:77.18], [typeName =='3' ? 45.5:50, data[alltype[0]]]] :
type == "1" ? [[44, typeName =='1' ?79.16:77.18], [44, data[alltype[0]]]] :
[[55, typeName =='7'?109.08:108.77], [55, data[alltype[0]]]]
: [];
const gz2 = data[alltype[1]] ?
type == "3" ? [[typeName =='5' ?51:62, typeName =='5' ?77.18:83.50], [typeName =='5' ?51:62, data[alltype[1]]]] :
type == "2" ? [[typeName =='3' ?50:61, typeName =='3' ?77.18:77.50], [typeName =='3' ?50:61, data[alltype[1]]]] :
type == "1" ? [[51.5, typeName =='1' ?77.18:74.5], [51.5, data[alltype[1]]]] :
[[65, typeName =='7'?109.32:109.36], [65, data[alltype[1]]]] :
[];
const gz3 = data[alltype[2]] ?
type == "3" ? [[62, 81.50], [62, data[alltype[2]]]] :
type == "2" ? [[61, 80.50], [61, data[alltype[2]]]] :
type == "1" ? [[58, 66.50], [58, data[alltype[2]]]] :
[[77, typeName =='7'?109.01:108.87], [77, data[alltype[2]]]] : [];
const gz4 = data[alltype[3]] ?
type == "3" ? [] :
type == "2" ? [[79, 73.50], [79, data[alltype[3]]]] :
type == "1" ? [[79, 72.50], [79, data[alltype[3]]]] :
[[85, 166], [85, data[alltype[3]]]] : [];
// 将渗压管连起来的线
const line = data?.rz ?
type == "3" ?
[
[xValue, data?.rz],
[typeName =='5' ?47:51, data[alltype[0]]],
[typeName =='5' ?51:62, data[alltype[1]]],
[62, data[alltype[2]]],
] :
type == "2" ?
[
[xValue, data?.rz],
[typeName =='3' ? 45.5:50, data[alltype[0]]],
[typeName =='3' ?50:61, data[alltype[1]]],
[61, data[alltype[2]]],
[79, data[alltype[3]]]
] :
type == "1"?
[
[xValue, data?.rz],
[44, data[alltype[0]]],
[51.5, data[alltype[1]]],
[58, data[alltype[2]]],
[79, data[alltype[3]]]
]:
[
[xValue, data?.rz],
[55, data[alltype[0]]],
[65, data[alltype[1]]],
[77, data[alltype[2]]],
[85, data[alltype[3]]]
]
: []
const filteredArray = line.filter(subArray => {
return subArray.every(item => item !== null && item !== undefined);
}); });
// 灰色段 (gk): 从测值(或底)到管口
const gkSeries = pipes.map((pipe, index) => {
// 只有当管口高程存在时才绘制
const dataPoints = (pipe.topY !== undefined && pipe.topY !== null)
? [[pipe.x, pipe.bottomY], [pipe.x, pipe.topY]]
: [];
return {
type: 'line',
name: `pipe-gk-${index}`,
symbol: 'none',
symbolSize: 10,
z: 1,
itemStyle: { color: 'rgba(154, 160, 166,.4)' },
lineStyle: { color: 'rgba(154, 160, 166,.4)', width: 6 },
data: dataPoints
};
});
// 过滤连接线中的空点
const filteredConnectionLine = connectionLine.filter(subArray => {
return subArray && subArray.every(item => item !== null && item !== undefined);
});
return { return {
toolbox: toolbox || { toolbox: {
show: true, show: true,
feature: { feature: {
saveAsImage: { saveAsImage: {
@ -75,35 +143,49 @@ export const getJrxChartOption = (data, config) => {
right: "10%", right: "10%",
top: "4%" top: "4%"
}, },
// title: {
// show: true,
// text: "断面名称",
// left: 'center',
// bottom: '-5%',
// // textStyle: {
// },
graphic: [ graphic: [
{ {
type: 'image', type: 'image',
// id: 'background',
left: 'center', left: 'center',
// top: '11%',
top: 0, top: 0,
bottom: 0, bottom: 0,
z: 1, z: 1,
bounding: 'all', bounding: 'all',
style: { style: {
image: backgroundImage.url, image: imageUrl,
width: backgroundImage.width || 1100, width: 1100,
height: backgroundImage.height || 380 height: 380
} }
}, },
// 标尺图片，这里假设是通用的，如果需要配置也可以放入 config
{ {
type: 'image', type: 'image',
// id: 'background',
left: '7%', left: '7%',
bottom: "5%", bottom: "5%",
z: 1, z: 1,
bounding: 'all', bounding: 'all',
style: { style: {
image: `${process.env.PUBLIC_URL}/assets/images/ruler.png`, image: rule,
width: 10, width: 10,
height: 450 height: 450
} }
} }
], ],
grid: { grid: {
// top: '10%',
// left: '2%',
// right: '5%',
// bottom: '10%',
// containLabel: true
top: '0%', top: '0%',
left: '2%', left: '2%',
right: '5%', right: '5%',
@ -111,307 +193,211 @@ export const getJrxChartOption = (data, config) => {
containLabel: true containLabel: true
}, },
xAxis: { xAxis: {
min: xAxis?.min ?? 0, min: 0,
max: xAxis?.max ?? 100, max: 100,
axisLabel: { show: false, color: textColor, fontSize: 18 }, axisLabel: {
axisLine: { show: false, lineStyle: { color: textColor } }, show: false,
axisTick: { show: false }, // 坐标轴字体颜色
splitLine: { show: false }, color: textColor,
fontSize: 18
},
axisLine: {
show: false,
lineStyle: {
color: textColor
}
},
axisTick: {
// y轴刻度线
show: false
},
splitLine: {
// 网格
show: false
},
boundaryGap: false boundaryGap: false
}, },
yAxis: { yAxis: {
type: 'value', type: 'value',
min: yAxis.min, min:yMin,
max: yAxis.max, max: yMax,
interval: yAxis.interval || 5, interval: 5,
// data:[155,160,180,190,210],
nameTextStyle: { nameTextStyle: {
color: '#333', color: '#333',
fontSize: 18, fontSize: 18,
padding: [0, 0, 0, 80] padding: [0, 0, 0, 80]
}, },
axisLabel: { axisLabel: {
// 坐标轴字体颜色
color: textColor, color: textColor,
fontSize: 18, fontSize: 18,
formatter: function (value, index) { formatter: function (value, index, i) {
// 隐藏第一个和最后一个刻度 if (index === 0 || value === yMax) {
if (value === yAxis.min || value === yAxis.max) { return ''; // 隐藏第一个刻度和最后一个刻度
return ''; } else {
return value; // 显示其他刻度
} }
return value;
} }
}, },
axisLine: { show: false }, axisLine: {
axisTick: { show: false }, show: false
},
axisTick: {
// y轴刻度线
show: false
},
splitLine: { splitLine: {
// 网格
show: false, show: false,
lineStyle: { color: '#CCCCCC', type: 'dashed' } lineStyle: {
color: '#CCCCCC',
type: 'dashed'
}
} }
}, },
series: [ series: [
// 1. 大坝坡面填充 // 和大坝坡面重合的线 斜率为0.75
{ {
type: 'line', type: 'line',
symbol: 'none', symbol: 'none',
symbolSize: 10, symbolSize: 10,
z: 1, z: 1,
itemStyle: { color: '#fff' }, itemStyle: {
lineStyle: { color: '#fff' }, color: '#fff'
},
lineStyle: {
color: '#fff'
},
areaStyle: { areaStyle: {
origin: "end", origin: "end",
color: 'rgba(0, 128, 255, 0.3)' color: 'rgba(0, 128, 255, 0.3)' // 设置区域填充颜色
}, },
data: [...damLines.rz, ...damLines.rz1] data:[...rz, ...rz1]
}, },
// 2. 库水位线 (带标注)
{ {
type: 'line', type: 'line',
symbol: 'none', symbol: 'none',
symbolSize: 10, symbolSize: 10,
z: 1, z: 1,
itemStyle: { color: '#5487FF' }, itemStyle: {
lineStyle: { color: '#5487FF' }, color: '#5487FF'
},
lineStyle: {
color: '#5487FF'
},
markPoint: { markPoint: {
data: waterLevel.value ? [{ data: [{ type: 'max', x: "20%", coord: [xValue, data?.rz] }],
type: 'max',
x: "20%",
coord: [waterLevel.x, waterLevel.value]
}] : [],
symbol: 'pin', symbol: 'pin',
symbolSize: [30, 10], symbolSize: [30, 10],
itemStyle: { itemStyle: {
color: '#fff', color: '#fff', // 标注点颜色
borderColor: '#ffa500', borderColor: '#ffa500', // 标注点边框颜色
borderWidth: 0 borderWidth: 0 // 标注点边框宽度
}, },
label: { label: {
show: !!waterLevel.value, show: data?.rz ? true : false, // 是否显示标签
formatter: waterLevel.label || ("库水位" + waterLevel.value + "m"), formatter: "库水位" + data?.rz + "m", // 标签格式
color: '#5487FF', color: '#5487FF', // 标签文字颜色
fontSize: 12, fontSize: 12, // 标签文字大小
} }
}, },
data: damLines.rz data: rz
}, },
// 3. 另一条大坝线 (rz1) {
type: 'line',
symbol: 'none',
symbolSize: 10,
z: 1,
itemStyle: {
color: '#5487FF'
},
lineStyle: {
color: '#5487FF'
},
data: rz1
},
// 管位
{ {
type: 'line', type: 'line',
symbol: 'none', symbol: 'none',
symbolSize: 10, symbolSize: 10,
z: 1, z: 1,
itemStyle: { color: '#5487FF' }, itemStyle: {
lineStyle: { color: '#5487FF' }, color: '#5487FF'
data: damLines.rz1 },
lineStyle: {
color: '#5487FF',
width: 6
},
data: gz1
}, },
// 4. 管口/管身灰色段
...gkSeries,
// 5. 管身蓝色段
...gzSeries,
// 6. 连线
{ {
type: 'line', type: 'line',
symbol: 'none', symbol: 'none',
symbolSize: 10, symbolSize: 10,
z: 1, z: 1,
itemStyle: { color: '#5487FF' }, itemStyle: {
lineStyle: { color: '#5487FF', width: 2 }, color: '#5487FF'
data: filteredConnectionLine },
} lineStyle: {
color: '#5487FF',
width: 6
},
data: gz2
},
{
type: 'line',
symbol: 'none',
symbolSize: 10,
z: 1,
itemStyle: {
color: '#5487FF'
},
lineStyle: {
color: '#5487FF',
width: 6
},
data: gz3
},
{
type: 'line',
symbol: 'none',
symbolSize: 10,
z: 1,
itemStyle: {
color: '#5487FF'
},
lineStyle: {
color: '#5487FF',
width: 6
},
data: gz4
},
// 管位连接线
{
type: 'line',
symbol: 'none',
symbolSize: 10,
z: 1,
smooth: 0.6, // 设置平滑度
smoothMonotone: 'x', // 保持 x 方向的单调性
itemStyle: {
color: '#5487FF'
},
lineStyle: {
color: '#5487FF',
width: 2,
curveness: 0.5 // 增加曲线程度
},
data: filteredArray
},
] ]
}; };
};
/**
* 获取当前项目的特定配置（为了兼容旧逻辑）
* 这里将原有的 hardcoded 逻辑提取出来，作为"配置生成器"的一个示例
*/
export const getCurrentProjectConfig = (data = {}, type = "1", typeName = '1') => {
// 1. Y轴范围
const yMin = type == "3" ? 70 : type == "2" ? 67 : type == '1' ? 59 : 99;
const yMax = type == "3" ? 129 : type == "2" ? 117 : type == "1" ? 118 : 116;
// 2. 背景图
const imageUrl370 = `${process.env.PUBLIC_URL}/assets/images/zb370.png `;
const imageUrl250 = `${process.env.PUBLIC_URL}/assets/images/zb250.png `;
const imageUrl130 = `${process.env.PUBLIC_URL}/assets/images/zb130.png `;
const imageUrl010 = `${process.env.PUBLIC_URL}/assets/images/fb010.png `;
const imageUrl = type == "1" ? imageUrl130 :
type == "2" ? imageUrl250 :
type == "3" ? imageUrl370 : imageUrl010;
// 3. 渗压管类型定义
const typeMap = {
"1": ["UPD1", "UPD4", "UPD7", "UPD16"],
"2": ["UPD10", "UPD13"],
"3": ["UPD2", "UPD5", "UPD8", "UPD17"],
"4": ["UPD11", "UPD14"],
"5": ["UPD3", "UPD6", "UPD12"],
"6": ["UPD9", "UPD15"],
"7": ["UPD24", "UPD26", "UPD28"],
"8": ["UPD25", "UPD27", "UPD29"]
};
const alltype = typeMap[typeName] || [];
// 4. 大坝轮廓计算
const xValue = type == "3" ? (((data?.rz - 86) + 0.6 * 5) / 0.6) :
type == "2" ? (((data?.rz - 87) + 0.63 * 7) / 0.63) :
type == "1" ? (((data?.rz - 88) + 0.7 * 10) / 0.7) :
(((data?.rz - 102) + 0.25 * 4) / 0.25);
const rz = data?.rz ? [[xValue, data?.rz], [0, data?.rz]] : [];
let rz1 = [];
if (data?.rz) {
if (type == "3") rz1 = [[0, 86], [5, 86], [xValue, data?.rz]];
else if (type == "2") rz1 = [[0, 87], [7, 87], [xValue, data?.rz]];
else if (type == "1") rz1 = [[0, 88], [10, 88], [xValue, data?.rz]];
else rz1 = [[0, 102], [4, 102], [xValue, data?.rz]];
}
// 5. 坐标和高程计算 (Pipe Configs)
const baseY1 = type == "3" ? (typeName == '5' ? 90.50 : 81.85)
: type == "2" ? (typeName == '3' ? 84.41 : 83.78)
: type == "1" ? (typeName == '1' ? 80.11 : 78.64)
: (typeName == '7' ? 109.08 : 108.77);
const baseY2 = type == "3" ? (typeName == '5' ? 90.94 : 84.85)
: type == "2" ? (typeName == '3' ? 84.04 : 81.05)
: type == "1" ? (typeName == '1' ? 78.61 : 82.75)
: (typeName == '7' ? 109.32 : 109.36);
const baseY3 = type == "3" ? 92.65
: type == "2" ? 83.93
: type == "1" ? 81.38
: (typeName == '7' ? 109.01 : 108.87);
const baseY4 = type == "3" ? null
: type == "2" ? 79.57
: type == "1" ? 79.09
: 166;
const x1 = type == "3" ? (typeName == '5' ? 47 : 51)
: type == "2" ? (typeName == '3' ? 45.5 : 50)
: type == "1" ? (typeName == '1' ? 44 : 51.5)
: 53.5;
const x2 = type == "3" ? (typeName == '5' ? 51 : 63)
: type == "2" ? (typeName == '3' ? 50 : 61)
: type == "1" ? (typeName == '1' ? 51.5 : 61)
: 66;
const x3 = type == "3" ? 63
: type == "2" ? 61
: type == "1" ? 61
: 77;
const x4 = type == "3" ? null
: type == "2" ? 79
: type == "1" ? 81
: 85;
// 构建 Pipes 数组
const pipes = [];
const coords = [
{ x: x1, y: baseY1 },
{ x: x2, y: baseY2 },
{ x: x3, y: baseY3 },
{ x: x4, y: baseY4 }
];
for (let i = 0; i < 4; i++) {
if (alltype[i] && coords[i].x !== null && coords[i].y !== null) {
pipes.push({
x: coords[i].x,
bottomY: coords[i].y,
topY: pieMonth[alltype[i]],
value: data[alltype[i]]
});
}
}
// 6. 连接线逻辑 (Connection Line)
const xCenter = type === "3" ? 49 : (type === "2" ? 47.5 : (type === "1" ? 47.5 : 60));
const rightSideOnly = ['2', '4', '6'].includes(typeName);
const skipCenterLine = ['7', '8'].includes(typeName);
// 左/右管取值
const leftSyg = rightSideOnly ? undefined : data[alltype[0]];
const rightSyg = rightSideOnly ? (data[alltype[0]] ?? data[alltype[1]]) : data[alltype[1]];
let midPts = [];
if (!skipCenterLine && data?.rz) {
if (leftSyg !== undefined && leftSyg !== null) {
const A = leftSyg - 1;
const B = (rightSyg !== undefined && rightSyg !== null) ? (rightSyg + 0.5) : undefined;
if (B !== undefined) {
if (A > B) {
midPts = [[xCenter, A], [xCenter, B]];
} else {
midPts = [[xCenter, leftSyg], [xCenter, rightSyg]];
}
}
} else if (rightSyg !== undefined && rightSyg !== null) {
midPts = [[xCenter, data.rz - 1], [xCenter, rightSyg + 0.5]];
}
}
// 生成连接线点集
let connectionLine = [];
if (data?.rz) {
if (type == "3") {
connectionLine = [
[xValue, data?.rz],
...(rightSideOnly ? midPts : []),
[typeName == '5' ? 47 : 51, data[alltype[0]]],
...(!rightSideOnly ? midPts : []),
[typeName == '5' ? 51 : 63, data[alltype[1]]],
[63, data[alltype[2]]],
];
} else if (type == "2") {
connectionLine = [
[xValue, data?.rz],
...(rightSideOnly ? midPts : []),
[typeName == '3' ? 45.5 : 50, data[alltype[0]]],
...(!rightSideOnly ? midPts : []),
[typeName == '3' ? 50 : 61, data[alltype[1]]],
[61, data[alltype[2]]],
[79, data[alltype[3]]]
];
} else if (type == "1") {
connectionLine = [
[xValue, data?.rz],
...(rightSideOnly ? midPts : []),
[typeName == '1' ? 44 : 51.5, data[alltype[0]]],
...(!rightSideOnly ? midPts : []),
[typeName == '1' ? 51.5 : 61, data[alltype[1]]],
[61, data[alltype[2]]],
[81, data[alltype[3]]]
];
} else {
connectionLine = [
[xValue, data?.rz],
...(rightSideOnly ? midPts : []),
[53.5, data[alltype[0]]],
...(!rightSideOnly ? midPts : []),
[66, data[alltype[1]]],
[77, data[alltype[2]]],
[85, data[alltype[3]]]
];
}
}
return {
yAxis: { min: yMin, max: yMax },
backgroundImage: { url: imageUrl, width: 1100, height: 380 },
damLines: { rz, rz1 },
waterLevel: { value: data?.rz, x: xValue },
pipes,
connectionLine
};
};
// 默认导出保持向后兼容，或者作为入口
export default function jrxOptions(data = {}, type = "1", typeName = '1') {
console.log("data", data);
const config = getCurrentProjectConfig(data, type, typeName);
return getJrxChartOption(data, config);
} }

40
src/views/gcaqjc/gcaqfx/jrx/pieMonth.js
View File

@ -1,40 +0,0 @@
export default {
// ZB0+130
UPD1: 113.66,
UPD4: 113.66,
UPD7: 105.27,
UPD16: 89.54,
// ZB0+132
UPD10: 113.66,
UPD13: 105.38,
// ZB0+250
UPD2: 113.98,
UPD5: 114.53,
UPD8: 104.45,
UPD17: 91.33,
// ZB0+252
UPD11: 114.36,
UPD14: 104.49,
// ZB0+370
UPD3: 114.12,
UPD6: 114.34,
UPD12: 104.52,
// ZB0+372
UPD9: 114.28,
UPD15: 105.16,
// FB0+010
UPD24: 114.22,
UPD26: 114.44,
UPD28: 112.28,
// FB0+030
UPD25: 114.22,
UPD27: 114.48,
UPD29: 112.28,
};

40
src/views/rcgl/zmjk/ModalContent.js
View File

@ -6,34 +6,34 @@ import { exportFile } from '../../../utils/tools';
import apiurl from '../../../service/apiurl'; import apiurl from '../../../service/apiurl';
import usePageTable from '../../../components/crud/usePageTable2'; import usePageTable from '../../../components/crud/usePageTable2';
import { createCrudService } from '../../../components/crud/_'; import { createCrudService } from '../../../components/crud/_';
export default function ModalContent({ item }) { export default function ModalContent({zfjkData}) {
const myType = {
// 闸前水位站 2闸后水位站 3流量站
'1': '工作闸门',
'2': '检修闸门',
}
const columns = [ const columns = [
{ {
title: '序号', title: '序号',
key: 'inx', key: 'inx',
dataIndex:'inx', dataIndex:'inx',
width: 80, width: 80,
},
{
title: '闸门名称',
key: 'stcd',
dataIndex:'stcd',
width: 150,
render: (v) => <span>{myType[v]}</span>
}, },
{ {
title: '当前开度(m)', title: '闸阀名称',
key: 'gtop', key: 'valveName',
dataIndex:'gtop', dataIndex:'valveName',
width: 150, width: 150,
}, },
{ {
title: '数据采集时间', title: '操作内容',
dataIndex:'opContent',
key: 'opContent',
width: 150,
},
{
title: '操作结果',
dataIndex:'status',
key: 'status',
width: 150,
},
{
title: '操作时间',
dataIndex:'tm', dataIndex:'tm',
key: 'tm', key: 'tm',
width: 150, width: 150,
@ -41,7 +41,7 @@ export default function ModalContent({ item }) {
] ]
const [searchVal, setSearchVal] = useState(false) const [searchVal, setSearchVal] = useState(false)
// 闸阀弹框更多数据 // 闸阀弹框更多数据
const { tableProps, search, refresh } = usePageTable(createCrudService(apiurl.gsxl.zfzl.historypage1).find_noCode); const { tableProps, search, refresh } = usePageTable(createCrudService(apiurl.gsxl.zfzl.historypage).find_noCode);
const exportExcel = () => { const exportExcel = () => {
let params = { let params = {
...searchVal, ...searchVal,
@ -50,7 +50,7 @@ export default function ModalContent({ item }) {
pageSize:tableProps.pagination.pageSize pageSize:tableProps.pagination.pageSize
} }
} }
httppost5(apiurl.gsxl.zfzl.historyPageExport1, params).then(res => { httppost5(apiurl.gsxl.zfzl.historyPageExport, params).then(res => {
exportFile(`闸门操作记录.xlsx`,res.data) exportFile(`闸门操作记录.xlsx`,res.data)
}) })
} }
@ -70,7 +70,7 @@ export default function ModalContent({ item }) {
<ModalToolBar <ModalToolBar
setSearchVal={setSearchVal} setSearchVal={setSearchVal}
exportFile={exportExcel} exportFile={exportExcel}
item={item} list={zfjkData}
/> />
</Card> </Card>

16
src/views/rcgl/zmjk/ModalToolBar.js
View File

@ -4,7 +4,7 @@ import { Form, Input, Button, DatePicker } from 'antd';
import moment from 'moment'; import moment from 'moment';
import NormalSelect from '../../../components/Form/NormalSelect'; import NormalSelect from '../../../components/Form/NormalSelect';
const { RangePicker } = DatePicker; const { RangePicker } = DatePicker;
const ToolBar = ({ setSearchVal, exportFile,item }) => { const ToolBar = ({ setSearchVal, exportFile,list }) => {
const optionsType = [ const optionsType = [
{ {
label: "今日", label: "今日",
@ -70,27 +70,27 @@ const ToolBar = ({ setSearchVal, exportFile,item }) => {
} }
useEffect(() => { useEffect(() => {
if (item) { if (list.length > 0) {
let dateTimeSo = { let dateTimeSo = {
start: moment().subtract(7, "days").format('YYYY-MM-DD 00:00:00'), start: moment().subtract(7, "days").format('YYYY-MM-DD 00:00:00'),
end: moment().format('YYYY-MM-DD 00:00:00') end: moment().format('YYYY-MM-DD 00:00:00')
} }
form.setFieldValue("tm", [moment(dateTimeSo.start), moment(dateTimeSo.end)]) form.setFieldValue("tm", [moment(dateTimeSo.start), moment(dateTimeSo.end)])
form.setFieldValue("stcd", item.stcd) form.setFieldValue("valveCode", list[0]?.valveCode)
setSearchVal({dateTimeRangeSo:dateTimeSo, stcd:item.stcd}) setSearchVal({dateTimeRangeSo:dateTimeSo, valveCode:list[0]?.valveCode})
} }
}, [item]) }, [list])
return ( return (
<> <>
<div style={{ display: 'flex', justifyContent: 'space-between' }}> <div style={{ display: 'flex', justifyContent: 'space-between' }}>
<Form form={form} className='toolbarBox' layout="inline" onFinish={onFinish} onValuesChange={onValuesChange}> <Form form={form} className='toolbarBox' layout="inline" onFinish={onFinish} onValuesChange={onValuesChange}>
<Form.Item label="闸门名称" name="stcd"> <Form.Item label="闸门名称" name="valveCode">
<NormalSelect <NormalSelect
style={{ width: '150px' }} style={{ width: '150px' }}
options={[{label:'工作闸门',value:"1"},{label:'检修闸门',value:"2"}]} options={list}
allowClear={false} allowClear={false}
disabled={true} fieldNames={{label: 'valveName',value: 'valveCode'}}
/> />
</Form.Item> </Form.Item>
<Form.Item label="日期范围" name="tm"> <Form.Item label="日期范围" name="tm">

318
src/views/rcgl/zmjk/index.js
View File

@ -17,12 +17,165 @@ import ModalContent from './ModalContent';
const url = "http://223.75.53.141:9100/gs-tsg" const url = "http://223.75.53.141:9100/gs-tsg"
const CanvasW = 1080 const CanvasW = 1080
const CanvasH = 640 const CanvasH = 640
// const waterRatio = 0
const zmobj = {
"hpCode": "HP0074208040002120",
"stcd": "4265630075",
"ctrlType": "PLC",
"ctrlProtocol": "PLC",
"uprzStcd": null,
"dwrzStcd": null,
"flowStcd": null,
"gaType": "waga",
"ctrlPass": null,
"maxHgt": 1.9,
"minHgt": 0,
"name": "五岭包节制闸",
"ghtX": null,
"ghtY": null,
"irrCode": "D00000020",
"irrName": "三干渠",
"engCode": "ENG100076",
"engName": "三干渠管理处",
"orgCode": "A07",
"gaorNum": 3,
"wagaType": "节制闸",
"plcType": null,
"bim": 0,
"vip": 0,
"miu": null,
"lgtd": 112.242945,
"lttd": 30.848166,
"runtime": [
null,
{
"stcd": "4265630075",
"gateNumber": 1,
"realAperture": 376,
"setAperture": 0,
"sensorLever": null,
"altitudeLever": null,
"remoteSignal": 0,
"powerSignal": 0,
"openingSignal": 0,
"closeingSignal": 0,
"errorSignal": 0,
"openedSignal": 0,
"closedSignal": 0,
"tm": "2024-09-25 20:03:26",
"_online": true
},
{
"stcd": "4265630075",
"gateNumber": 2,
"realAperture": 388,
"setAperture": 0,
"sensorLever": null,
"altitudeLever": null,
"remoteSignal": 0,
"powerSignal": 0,
"openingSignal": 0,
"closeingSignal": 0,
"errorSignal": 0,
"openedSignal": 0,
"closedSignal": 0,
"tm": "2024-09-25 20:03:26",
"_online": true
},
{
"stcd": "4265630075",
"gateNumber": 3,
"realAperture": 394,
"setAperture": 0,
"sensorLever": null,
"altitudeLever": null,
"remoteSignal": 0,
"powerSignal": null,
"openingSignal": 0,
"closeingSignal": 0,
"errorSignal": 0,
"openedSignal": 0,
"closedSignal": 0,
"tm": "2024-09-25 20:03:26",
"_online": true
}
],
"real": {
"stcd": "4265630075",
"stationName": "五岭包节制闸",
"z1": null,
"zz1": null,
"z1tm": null,
"z2": null,
"zz2": null,
"z2tm": null,
"hq": null,
"hqtm": null,
"demtl": null
},
"cctvs": [],
"_idx": 88,
"_fav": false,
"_sort": 10086
}
const runtime = [
null,
{
"stcd": "4265630075",
"gateNumber": 1,
"realAperture": 976,
"setAperture": 0,
"sensorLever": null,
"altitudeLever": null,
"remoteSignal": 0,
"powerSignal": 0,
"openingSignal": 0,
"closeingSignal": 0,
"errorSignal": 0,
"openedSignal": 0,
"closedSignal": 0,
"tm": "2024-09-25 20:03:31"
},
{
"stcd": "4265630075",
"gateNumber": 2,
"realAperture": 388,
"setAperture": 0,
"sensorLever": null,
"altitudeLever": null,
"remoteSignal": 0,
"powerSignal": 0,
"openingSignal": 0,
"closeingSignal": 0,
"errorSignal": 0,
"openedSignal": 0,
"closedSignal": 0,
"tm": "2024-09-25 20:03:31"
},
{
"stcd": "4265630075",
"gateNumber": 3,
"realAperture": 394,
"setAperture": 0,
"sensorLever": null,
"altitudeLever": null,
"remoteSignal": 0,
"powerSignal": null,
"openingSignal": 0,
"closeingSignal": 0,
"errorSignal": 0,
"openedSignal": 0,
"closedSignal": 0,
"tm": "2024-09-25 20:03:31"
}
]
const myType = { const myType = {
// 闸前水位站 2闸后水位站 3流量站 // 闸前水位站 2闸后水位站 3流量站
'1': '工作闸门', '1': '闸前水位/水深(m)',
'2': '检修闸门', '2': '闸后水位/水深(m)',
'3': '流量 (m³/s)',
} }
const Page = () => { const Page = () => {
@ -50,16 +203,15 @@ const Page = () => {
const zfColumns = [ const zfColumns = [
{ {
title: '闸门名称', title: '闸阀名称',
key: 'stcd', key: 'valveName',
dataIndex:'stcd', dataIndex:'valveName',
width: 150, width: 150,
render: (v) => <span>{myType[v]}</span>
}, },
{ {
title: '当前开度(m)', title: '当前开关状态',
key: 'gtop', key: 'status',
dataIndex:'gtop', dataIndex:'status',
width: 150, width: 150,
}, },
{ {
@ -111,9 +263,9 @@ const Page = () => {
const pts = contextCoordinates(xunit, hole); const pts = contextCoordinates(xunit, hole);
const eqpnoList = useMemo(() => damList ? new Array(damList.length).fill(0).map((o, index) => index) : [], [damList]); const eqpnoList = useMemo(() => damList ? new Array(damList.length).fill(0).map((o, index) => index) : [], [damList]);
// useEffect(() => { useEffect(() => {
// getList() getList()
// }, []) }, [])
const getList = async () => { const getList = async () => {
const { code, data } = await httppost2(apiurl.zmjk.video) const { code, data } = await httppost2(apiurl.zmjk.video)
@ -183,10 +335,9 @@ const Page = () => {
// 闸阀监控列表数据 // 闸阀监控列表数据
const [zfjkData, setzfjkData] = useState([]) const [zfjkData, setzfjkData] = useState([])
const [rowItem, setRowItem] = useState({})
const getZfjkData = async () => { const getZfjkData = async () => {
try { try {
const res = await httppost2(apiurl.gsxl.zfzl.list1) const res = await httppost2(apiurl.gsxl.zfzl.list)
if (res.code == 200) { if (res.code == 200) {
setzfjkData(res.data) setzfjkData(res.data)
} }
@ -275,8 +426,8 @@ const Page = () => {
useEffect(() => { useEffect(() => {
getZfjkData() getZfjkData()
// getZfjkHistoryData() getZfjkHistoryData()
// getZfjkSwData() getZfjkSwData()
}, []) }, [])
@ -287,28 +438,20 @@ const Page = () => {
{/* <Card className='nonebox'> {/* <Card className='nonebox'>
</Card> */} </Card> */}
<div className="ant-card-body" style={{ padding: "20px 0 0 0" }}> <div className="ant-card-body" style={{ padding: "20px 0 0 0" }}>
<div className="sg_zmjk_left" style={{width:'100%'}}> <div className="sg_zmjk_left">
{/* <div className='sg_zmjk_left_title'> <div className='sg_zmjk_left_title'>
<Divider type="vertical" style={{ width: 5, background: '#259def', height: 20 }} /> <Divider type="vertical" style={{ width: 5, background: '#259def', height: 20 }} />
闸阀监控 闸阀监控
</div> */} </div>
<div className='sz_left_up_table'> <div className='sz_left_up_table'>
<Table <Table
columns={zfColumns} columns={zfColumns}
rowKey={(record) => record.id} rowKey={(record) => record.tm}
dataSource={zfjkData} dataSource={zfjkData}
pagination={false} pagination={false}
onRow={
(data)=>({
onClick:()=>{
setOpen(true)
setRowItem(data)
}
})
}
/> />
</div> </div>
{/* <div className='sg_zmjk_left_title' style={{ marginTop: 150,display:'flex',justifyContent:'space-between' }}> <div className='sg_zmjk_left_title' style={{ marginTop: 150,display:'flex',justifyContent:'space-between' }}>
<div><Divider type="vertical" style={{ width: 5, background: '#259def', height: 20 }} /> <div><Divider type="vertical" style={{ width: 5, background: '#259def', height: 20 }} />
最近操作记录</div> 最近操作记录</div>
<div onClick={() => setOpen(true)}> <div onClick={() => setOpen(true)}>
@ -325,24 +468,76 @@ const Page = () => {
dataSource={zfjkHistoryListData} dataSource={zfjkHistoryListData}
pagination={false} pagination={false}
/> />
</div> */} </div>
</div> </div>
{/* <div className="sg_zmjk_left">
{/* <div className="sg_zmjk_right"> <Stage width={1080} height={640}>
<Sider pts={pts} side="left" />
<Sider pts={pts} side="right" />
<Topper1 pts={pts} type={hole} />
<ZmColumns runtime={damList} zmobj={zmobj} pts={pts} waterRatio={waterRatio} />
<Topper2 pts={pts} waterRatio={waterRatio} />
</Stage>
<div style={{ position: 'absolute', left: 0, top: 20, width: '100%', height: 100, display: 'flex', alignContent: 'center' }}>
<div key="sider1" style={{ flexGrow: 1, width: 100 }}></div>
{
eqpnoList.map(o => (
<div key={o}
onClick={() => {}}
className='o' style={{ flexGrow: 1, width: 100, display: 'flex', justifyContent: 'center', cursor: 'pointer' }}>
<div style={{ width: 80, height: 40, backgroundColor: '#43c4e7', borderRadius: 12, color: '#fff', display: 'flex', justifyContent: 'center', alignItems: 'center', fontSize: 28 }}>#{o+1}</div>
</div>
))
}
<div key="sider2" style={{ flexGrow: 1, width: 100 }}></div>
</div>
<div style={{ position: 'absolute', left: 0, bottom: 20, width: '100%', height: 100, display: 'flex', alignContent: 'center' }}>
<div key="sider1" style={{ flexGrow: 1, width: 100 }}></div>
{
eqpnoList.map(o => (
<div key={o} className='o' style={{ flexGrow: 1, width: 100, display: 'flex', justifyContent: 'center' }}>
<div
onClick={() => {}}
style={{ width: 80, height: 32, border: '1px solid #444', backgroundColor: '#fff', borderRadius: 4, color: '#888', display: 'flex', justifyContent: 'center', alignItems: 'center', fontSize: 18, cursor: 'pointer' }}
>
{renAperture(damList[o]?.realAperture)}
</div>
</div>
))
}
<div key="sider2" style={{ flexGrow: 1, width: 100 }}></div>
</div>
</div> */}
<div className="sg_zmjk_right">
<div className='sg_zmjk_right_video'> <div className='sg_zmjk_right_video'>
<div className='sg_zmjk_right_video_title'> <div className='sg_zmjk_right_video_title'>
<Divider type="vertical" style={{ width: 5, background: '#259def', height: 20 }} /> <Divider type="vertical" style={{ width: 5, background: '#259def', height: 20 }} />
监控视频</div> 监控视频</div>
<div className='sg_zmjk_right_video_content'> <div className='sg_zmjk_right_video_content'>
{/* <div className='sg_zmjk_right_video_content_left'>
{
videoList.map((item,index)=>(
<div className={index===itemIndex?'sg_zmjk_right_video_content_left_item itemChecked':'sg_zmjk_right_video_content_left_item'} onClick={()=>{setItemIndex(index);getVideoSrc(item.indexCode)}}>
{item.name}
</div>
))
}
</div> */}
<div className='sg_zmjk_right_video_content_right'> <div className='sg_zmjk_right_video_content_right'>
{ {
videoArr?.src && videoArr?.src &&
<div <div
className="content-video" className="content-video"
style={{ width: '100%', height: '100%', cursor: "pointer" }} style={{ width: '100%', height: '100%', cursor: "pointer" }}
onClick={() => {
// if (controlerParams.type == 1) {
// setVideoOpen(true)
// setIsShow(!isShow)
// }
}}
> >
<HFivePlayer size={1} wsUrl={videoArr} playerID={'111'} /> <HFivePlayer size={1} wsUrl={videoArr} playerID={'111'} />
{/* <div style={{textAlign:"right"}}>注：单击视频显示/隐藏云台</div> */}
</div> </div>
} }
</div> </div>
@ -359,11 +554,39 @@ const Page = () => {
dataSource={zfjkSwData} dataSource={zfjkSwData}
pagination={false} pagination={false}
/> />
{/* {
list?.map((item)=>{
if(item.type===1){
return (
<div className='sg_zmjk_right_information_content'>
<div>{myType[item.type]}</div>
<div>{item.value||'-'} / {getNum(item.value,data.inEle)}</div>
<div>{item.tm?.slice(5,19)}</div>
</div>
)
}else if(item.type===2){
return (
<div className='sg_zmjk_right_information_content'>
<div>{myType[item.type]}</div>
<div>{item.value||'-'} / {getNum(item.value,data.inEle)}</div>
<div>{item.tm?.slice(5,19)}</div>
</div>
)
}else{
return (
<div className='sg_zmjk_right_information_content'>
<div>{myType[item.type]}</div>
<div>{item.value}</div>
<div>{item.tm?.slice(5,19)}</div>
</div>
)
}
})
} */}
</div> </div>
</div> </div>
<div className='sg_zmjk_right_more' onClick={() => setOpen(true)}>查看更多信息</div> {/* <div className='sg_zmjk_right_more' onClick={() => setOpen(true)}>查看更多信息</div> */}
</div> */} </div>
</div> </div>
</div> </div>
</div> </div>
@ -378,7 +601,28 @@ const Page = () => {
}} }}
> >
<div style={{ height: '600px' }}> <div style={{ height: '600px' }}>
<ModalContent item={rowItem} /> <ModalContent zfjkData={zfjkData} />
{/* <Tabs>
<Tabs.TabPane tab="基本信息" key="item-1">
<Descriptions bordered size="small" column={3} >
<Descriptions.Item label="启闭设备类型" style={{ width: '16.5%' }}>{{ 1: '卷扬式', 2: '螺杆式', 3: '凹轮式', 4: '涡轮式', 5: '丝杆式' }?.[data?.hdgrTp] || '-'}</Descriptions.Item>
<Descriptions.Item label="动力类型" style={{ width: '16.5%' }}>{{ 1: '手动', 2: '电动', 3: '手电两用' }?.[data?.pwrTp] || '-'}</Descriptions.Item>
<Descriptions.Item label="水闸类型" style={{ width: '16.5%' }}>{{ 1: '分（泄）洪闸', 2: '节制闸', 3: '排（退）水闸', 4: '引（进）水闸', 5: '挡潮闸', 6: '船闸', 9: '其他' }?.[data?.wagaType] || '-'}</Descriptions.Item>
<Descriptions.Item label="进口高程">{data?.inEle || '-'} m</Descriptions.Item>
<Descriptions.Item label="出口高程">{data?.outEle || '-'} m</Descriptions.Item>
<Descriptions.Item label="闸门孔数">{data?.gaorNum || '-'} 孔</Descriptions.Item>
<Descriptions.Item label="设计流量">{data?.dsfl || '-'} m³/s</Descriptions.Item>
<Descriptions.Item label="实达流量">{data?.stfl || '-'} m³/s</Descriptions.Item>
<Descriptions.Item label="闸门尺寸">{data?.gateSize || '-'} m*m</Descriptions.Item>
<Descriptions.Item label="工程等级">{{ 1: 'Ⅰ', 2: 'Ⅱ', 3: 'Ⅲ', 4: 'Ⅳ', 5: 'Ⅴ' }?.[data?.engGrad] || '-'}</Descriptions.Item>
<Descriptions.Item label="运行状况">{{ 1: '在用良好', 2: '在用故障', 3: '停用' }?.[data?.runStat] || '-'}</Descriptions.Item>
<Descriptions.Item label="建成时间">{data?.compDate || '-'}</Descriptions.Item>
</Descriptions>
</Tabs.TabPane>
<Tabs.TabPane tab="工程图片" key="item-2">
<Image width={800} src={url + data?.files?.filePath} alt='' />
</Tabs.TabPane>
</Tabs> */}
</div> </div>
</Modal> </Modal>
</> </>

6
src/views/spjk/aiWarn/Card.js
View File

@ -1,7 +1,5 @@
import React from 'react' import React from 'react'
import { Image } from 'antd' import { Image } from 'antd'
import HFivePlayer from '../../../components/video1Plary'
export default function Card({record}) { export default function Card({record}) {
return ( return (
<div className='card-box' style={{border:"1px solid #fff",boxShadow:"0 0 10px #c0c0c0",padding:10,marginBottom:10,marginLeft:10}}> <div className='card-box' style={{border:"1px solid #fff",boxShadow:"0 0 10px #c0c0c0",padding:10,marginBottom:10,marginLeft:10}}>
@ -9,10 +7,6 @@ export default function Card({record}) {
src={record?.imgPath} src={record?.imgPath}
style={{width:360,height:220}} style={{width:360,height:220}}
></Image> ></Image>
{/* <div style={{width:360,height:220}}>
<HFivePlayer size={1} wsUrl={record?.resIndexCode} playerID={record?.id} />
</div> */}
<div style={{display:"flex",alignItems:"center",columnGap:5}}> <div style={{display:"flex",alignItems:"center",columnGap:5}}>
<span style={{ <span style={{
padding: "4px 2px", padding: "4px 2px",

139
src/views/spjk/aiWarn/index.js
View File

@ -1,128 +1,75 @@
import React, { Fragment, useRef, useMemo, useEffect, useState } from 'react'; import React, { Fragment, useRef, useMemo,useEffect,useState } from 'react';
import { Table, Card, Modal, Form, Input, Button, Row, Pagination, message } from 'antd'; import { Table, Card,Modal,Form,Input,Button,Row,Pagination,message } from 'antd';
import { useSelector } from 'react-redux'; import { useSelector } from 'react-redux';
import ToolBar from './toolbar'; import ToolBar from './toolbar';
import apiurl from '../../../service/apiurl'; import apiurl from '../../../service/apiurl';
import usePageTable from '../../../components/crud/usePageTable3'; import usePageTable from '../../../components/crud/usePageTable3';
import { createCrudService } from '../../../components/crud/_'; import { createCrudService } from '../../../components/crud/_';
import { httpget2,httppost2 } from '../../../utils/request';
import HFivePlayer from '../../../components/video1Plary';
import CardShow from "./Card" import CardShow from "./Card"
import "./index.less" import "./index.less"
import moment from 'moment'; const Page = () => {
const Page = (props) => {
const tm = props?.tm;
const statusObj = {
0: "未处理",
1: '已处理'
};
const levelStatus = {
1: '低',
2: '中',
3: '高'
}
const role = useSelector(state => state.auth.role); const role = useSelector(state => state.auth.role);
const columns = [
{ title: '序号', key: 'inx', dataIndex: 'inx', width: 60, align: "center" },
{ title: '事件源名称', key: 'resName', dataIndex: 'resName', width: 150, ellipsis: true },
{
title: '事件类型名称', key: 'eventTypeName', dataIndex: 'eventTypeName', width: 150, ellipsis: true
},
{ title: '事件处理状态', key: 'handleStatus', dataIndex: 'handleStatus', width: 120, render: (v) => <span>{statusObj[v]}</span> },
{ title: '事件等级', key: 'eventLevel', dataIndex: 'eventLevel', width: 100, render: (v) => <span>{levelStatus[v]}</span> },
{ title: '事件开始时间', key: 'startTime', dataIndex: 'startTime', width: 150, render: (v) => <span>{v ? moment(v).format("YYYY-MM-DD HH:mm:ss") : ''}</span> },
{ title: '事件结束时间', key: 'endTime', dataIndex: 'endTime', width: 150, render: (v) => <span>{v ? moment(v).format("YYYY-MM-DD HH:mm:ss") : ''}</span> },
// {
// title: '操作', key: 'opr', dataIndex: 'opr', width: 100, align: "center",
// render:(v,r)=><Button type="link" onClick={()=>replay(r)}>回放</Button>
// },
];
const [searchVal, setSearchVal] = useState(false) const [searchVal, setSearchVal] = useState(false)
const [replayOpen, setReplayOpen] = useState(false) const { tableProps, search, refresh } = usePageTable(createCrudService(apiurl.spjk1.aiWarn.page).find_noCode);
const [replayItem, setReplayItem] = useState({}) const onchange = (page, pageSize) => {
const [videoSrc, setVideoSrc] = useState('') const obj = {
const { tableProps, search, refresh } = usePageTable(createCrudService(apiurl.spjk1.aiWarn.page1).find_noCode); pageNumber: page,
const width = useMemo(() => columns.reduce((total, cur) => total + (cur.width), 0), [columns]); pageSize: pageSize,
}
const replay = (r) => { const searchParams = {
setReplayOpen(true); ...obj,
setReplayItem(r) // search: {
getVideoSrc(r) // ...searchVal,
// }
}
search(searchParams)
} }
const getVideoSrc = async(data) => {
try {
// 仅获取播放地址，回放时间由播放器拼接
const res = await httpget2(`${apiurl.gsxl.zfzl.videosrc}${data.resIndexCode}`)
setVideoSrc(res.data)
} catch (error) {
console.log(error);
}
}
// 当外部传入 tm（[start,end]）时，初始化查询条件
useEffect(() => {
if (tm && Array.isArray(tm) && tm[0]) {
setSearchVal({
startTime: moment(tm[0]).format('YYYY-MM-DD HH:mm:ss'),
})
}
}, [tm])
// 路由直接进入 AI 告警页（没有 tm）时，初始化一次默认查询
useEffect(() => {
if (!tm) {
setSearchVal({})
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [])
useEffect(() => { useEffect(() => {
const params = { const params = {
search: { search: {
...searchVal, ...searchVal,
} }
}; };
// 避免初始化时触发空查询造成二次请求闪烁 search(params)
if (searchVal !== false) {
search(params)
}
}, [searchVal]) }, [searchVal])
return ( return (
<> <>
<div className='content-root clearFloat xybm' style={{ paddingRight: "0", paddingBottom: "0" }}> <div className='content-root clearFloat xybm' style={{paddingRight:"0",paddingBottom:"0"}}>
<div className='lf CrudAdcdTreeTableBox' style={{ width: "100%" }}> <div className='lf CrudAdcdTreeTableBox' style={{ width: "100%" }}>
<Card className='nonebox'> <Card className='nonebox'>
<ToolBar <ToolBar
setSearchVal={setSearchVal} setSearchVal={setSearchVal}
role={role} role={role}
tm={tm}
/> />
</Card> </Card>
<div className="ant-card-body" style={{ padding: "20px 0 0 0" }}> <div className="ant-card-body" style={{padding:"20px 0 0 0",display:"flex",flexWrap:"wrap",maxHeight:650,overflowY:"auto"}}>
<Table columns={columns} rowKey="inx" {...tableProps} scroll={{ x: width, y: "calc( 100vh - 500px )" }} /> {
tableProps.dataSource.length > 0 ?
tableProps.dataSource.map((item,i) => {
return (
<div key={i} >
<CardShow
record={item}
/>
</div>
)
}) : null
}
</div> </div>
<div style={{textAlign: "right", marginTop: "25px",marginRight:40}}>
<Pagination
current={tableProps.pagination.current}
total={tableProps.pagination.total}
showTotal={tableProps.pagination.showTotal}
pageSize={tableProps.pagination.pageSize}
showSizeChanger
showQuickJumper
pageSizeOptions={[4, 8, 12, 16]}
onChange={onchange}
/>
</div>
</div> </div>
<Modal
open={replayOpen}
width={800}
title={replayItem?.resName}
onCancel={() => setReplayOpen(false)}
footer={null}
destroyOnClose
>
<div style={{ width: "100%", height: 500 }}>
<HFivePlayer
size={1}
wsUrl={{
src: videoSrc,
indexCode: replayItem?.resIndexCode,
beginTime: replayItem?.startTime,
endTime: replayItem?.endTime,
}}
playerID={replayItem?.id} />
</div>
</Modal>
</div> </div>
</> </>
); );

60
src/views/spjk/aiWarn/toolbar.js
View File

@ -5,22 +5,26 @@ import moment from 'moment';
import { httppost2 } from '../../../utils/request'; import { httppost2 } from '../../../utils/request';
import apiurl from '../../../service/apiurl'; import apiurl from '../../../service/apiurl';
const { RangePicker } = DatePicker; const { RangePicker } = DatePicker;
const ToolBar = ({ setSearchVal, onSave, storeData, role, tm }) => { const ToolBar = ({ setSearchVal, onSave, storeData, role }) => {
const searchBtn = role?.rule?.find(item => item.menuName == "查询")|| true; const searchBtn = role?.rule?.find(item => item.menuName == "查询")|| true;
const warnTypes = [ const warnTypes = [
{ {
label: "低", label: "人员闯入",
value:1 value:1
}, },
{ {
label: "中", label: "工程车辆识别",
value:2 value:2
}, },
{ {
label: "高", label: "漂浮物识别",
value:3 value:3
} },
{
label: "游泳识别",
value:4
},
] ]
const [form] = Form.useForm(); const [form] = Form.useForm();
const [codeList, setCodeList] = useState([]) const [codeList, setCodeList] = useState([])
@ -34,30 +38,46 @@ const ToolBar = ({ setSearchVal, onSave, storeData, role, tm }) => {
} }
} }
const onFinish = (values) => { const onFinish = (values) => {
if (values.startTime) { let dateSo;
values.startTime = moment(values.startTime).format('YYYY-MM-DD HH:mm:ss'); if (values.tm) {
dateSo = {
start: moment(values.tm[0]).format('YYYY-MM-DD 00:00:00'),
end: moment(values.tm[1]).format('YYYY-MM-DD 23:59:59')
}
} }
setSearchVal({...values}); delete values.tm
setSearchVal({...values, dateTimeRangeSo:dateSo});
} }
// 预填开始时间（来自外部 tm）
useEffect(() => { useEffect(() => {
if (tm && Array.isArray(tm) && tm[0]) { getStationCode()
form.setFieldsValue({ startTime: moment(tm[0]) }) let time = [moment().subtract(1,"weeks"),moment()]
} let dateSo = {
}, [tm]) start:moment(time[0]).format('YYYY-MM-DD 00:00:00'),
end:moment(time[1]).format('YYYY-MM-DD 23:59:59'),
}
form.setFieldValue("tm",time)
setSearchVal({dateTimeRangeSo:dateSo})
}, [])
return ( return (
<> <>
<div style={{display:'flex',justifyContent:'space-between'}}> <div style={{display:'flex',justifyContent:'space-between'}}>
<Form form={form} className='toolbarBox' layout="inline" onFinish={onFinish} > <Form form={form} className='toolbarBox' layout="inline" onFinish={onFinish} >
<Form.Item label="事件开始时间" name="startTime"> <Form.Item label="告警日期" name="tm">
<DatePicker <RangePicker
allowClear allowClear
style={{ width: "200px" }} style={{ width: "350px" }}
showTime format="YYYY-MM-DD"
placeholder='请选择时间'
/> />
</Form.Item> </Form.Item>
<Form.Item label="事件等级" name="eventLevel"> <Form.Item label="告警点位" name="indexCode">
<NormalSelect
allowClear
style={{ width: "150px" }}
options={codeList}
/>
</Form.Item>
<Form.Item label="告警类型" name="type">
<NormalSelect <NormalSelect
allowClear allowClear
style={{ width: "150px" }} style={{ width: "150px" }}

11
src/views/video/splitScreen.tsx
View File

@ -76,19 +76,18 @@ const SplitScreen: React.FC = (props: any) => {
{/* {props.videoArr} */} {/* {props.videoArr} */}
<div className={['flex', 'flexwarp', 'borderF'].join(' ')} style={{ position: 'relative' }}> <div className={['flex', 'flexwarp', 'borderF'].join(' ')} style={{ position: 'relative' }}>
{list.map((item: any, index: any) => { {list.map((item: any, index: any) => {
const videoItem = videoList[index] return <div onClick={() => clickVideo(index,item)}
return <div key={index} onClick={() => clickVideo(index,item)}
// onClick={()=>clickVideo(index)} // onClick={()=>clickVideo(index)}
className={[getNum() == index ? 'videoBorder' : null, className={[getNum() == index ? 'videoBorder' : null,
size == 1 ? 'videoBorder1' : null, size == 4 ? 'videoBorder4' : null, size == 1 ? 'videoBorder1' : null, size == 4 ? 'videoBorder4' : null,
size == 9 ? 'videoBorder9' : null,'borderFa'].join(' ')}> size == 9 ? 'videoBorder9' : null,'borderFa'].join(' ')}>
{videoItem?.src && <div style={{height:'100%',width:'100%'}}> {props.videoArr[index]&&<div style={{height:'100%',width:'100%'}}>
<div style={{ height: 'calc(100% - 20px)',width:'100%' }}> <div style={{ height: 'calc(100% - 20px)',width:'100%' }}>
<HFivePlayer size={size} wsUrl={videoItem} playerID={index} /> {videoList.length&&<HFivePlayer size={size} wsUrl={videoList[index]} playerID={index} />}
</div> </div>
<div style={{ textAlign: 'center' }}>{videoItem?.name}</div> <div style={{ textAlign: 'center' }}>{videoList[index]?.name}</div>
</div>} </div>}
{!videoItem?.src && <div className='borderType'> {!props.videoArr[index]&&<div className='borderType'>
<img src={require('../../assets/images/no-video.png')}/> <img src={require('../../assets/images/no-video.png')}/>
<div className='text'>暂无视频数据</div> <div className='text'>暂无视频数据</div>
</div>} </div>}

72
src/views/yhxwfx/hotOption.js
View File

@ -1,72 +0,0 @@
export default function hotOption(data) {
const result = data.map(item => {
if (item.menu3 && item.menu3 == '布置图') item.menu2 = '';
return{
...item,
menu: item.menu1 + "-" + item.menu2 + (item?.menu3 ? "-" + item.menu3 : '')
}
})
const maxY = Math.ceil(Math.max(...data.map(item => item.count)))
const minY = Math.floor(Math.min(...data.map(item => item.count)))
return {
grid: {
left:"25%",
top: "0%",
bottom:"0%"
},
tooltip: {
trigger: "axis",
},
calculable: true,
xAxis: {
type: "value",
min:minY,
max: maxY,
axisLine: {
show: false
},
axisTick: {
show: false
},
splitLine: {
show: false
}
},
yAxis: {
type: "category",
inverse: true,
axisLine: {
show: false
},
axisTick: {
show: false
},
axisLabel: {
// textStyle: {
// color: '#999'
// },
fontSize:14//调整坐标轴字体大小
},
data: result.map(item => item.menu),
},
series: [
{
name: "",
type: "bar",
barWidth:"30%",
label: {
normal: {
show: true,
// position: "insideRight",
},
offset:[100,0]
},
itemStyle: {
color:"#1283e3"
},
data: result.map(item => item.count),
},
],
}
}

254
src/views/yhxwfx/index.js
View File

@ -1,254 +0,0 @@
import React, { Fragment, useRef, useMemo,useEffect,useState } from 'react';
import { Divider,Tabs,Dropdown,Space} from 'antd';
import ToolBar from './toolbar';
import { DownOutlined,UpOutlined } from '@ant-design/icons';
import apiurl from '../../service/apiurl';
import moment from 'moment';
import { httpget2, httppost2 } from '../../utils/request';
import userBarOption from "./userBarOption"
import userLineOption from "./userLineOption"
import hotOption from './hotOption';
import ReactEcharts from 'echarts-for-react';
import "./index.less"
const Page = () => {
const [searchVal, setSearchVal] = useState(false)
const [todayData, setTodayData] = useState({})
const [activeCount, setActiveCount] = useState()
const [userCountData, setUserCountData] = useState()
const [hotData, setHotData] = useState()
const [tabs, setTabs] = useState({active:0})
const [showMore, setShowMore] = useState(false)
const [height, setHeight] = useState("100%")
const [hotWidth, setHotWidth] = useState("100%")
const dtoption = useMemo(() => {
if (userCountData) {
return userBarOption(userCountData)
}
}, [userCountData])
const lineoption = useMemo(() => {
if (activeCount) {
return userLineOption(activeCount)
}
}, [activeCount])
const hotoption = useMemo(() => {
if (hotData) {
let substrData = [];
if (!showMore) {
substrData = hotData.slice(0, 10)
} else {
substrData = hotData
}
setHeight(((substrData.length) * 10) + "%")
try {
const labels = substrData.map(item => (
(item.menu1 || '') + '-' + (item.menu2 || '') + (item.menu3 ? '-' + item.menu3 : '')
));
const maxLen = Math.max(...labels.map(l => (l || '').length), 0);
const px = Math.min(Math.max(maxLen * 12 + 600, 800), 2400);
setHotWidth(px + 'px');
} catch (e) {}
return hotOption(substrData)
}
}, [hotData,showMore])
// 获取今日数据
const getTodayData = async () => {
try {
const res = await httpget2(apiurl.systemM.action.todayData)
setTodayData(res.data)
} catch (error) {
console.log(error);
}
}
// 获取日活跃数
const getActiveCount = async (params) => {
try {
const {data} = await httppost2(apiurl.systemM.action.activeCount,params)
const {appList,webList} = data
if(appList&&webList){
setActiveCount({appList:appList,webList:webList})
}
} catch (error) {
console.log(error);
}
}
// 获取前十用户活跃数
const getUserActiveCount = async (params) => {
try {
const { data } = await httppost2(apiurl.systemM.action.userCount, params)
const {appList,webList} = data
if(appList&&webList){
setUserCountData({appList:appList,webList:webList})
}
} catch (error) {
console.log(error);
}
}
// 获取热点数据
const getHotData = async (data) => {
try {
const res = await httppost2(apiurl.systemM.action.hotData, data)
setHotData(res.data)
} catch (error) {
console.log(error);
}
}
useEffect(() => {
getTodayData()
}, [])
useEffect(() => {
if (searchVal) {
getActiveCount(searchVal)
getUserActiveCount(searchVal)
}
}, [searchVal])
useEffect(() => {
if (searchVal && tabs) {
const params = {
...searchVal,
loginType:Number(tabs?.active)
}
getHotData(params)
}
}, [searchVal,tabs])
return (
<>
<div className='content-root clearFloat' style={{padding:8,paddingBottom:"0"}}>
<div className='action-top'>
<div className='comomn-title'>
<img alt='' src={`${process.env.PUBLIC_URL}/assets/panelTitle.png`} />
<span>今日数据总览</span>
</div>
<div className='data-panel'>
<div className='panel-item'>
<span className='name'>WEB端访问用户</span>
<p className='value'>{todayData?.web1Count || '-' }</p>
</div>
<Divider type="vertical" style={{fontSize:100,background:"#d7d7d7"}}/>
<div className='panel-item'>
<span className='name'>WEB端浏览次数</span>
<p className='value'>{todayData?.web2Count || '-' }</p>
</div>
<Divider type="vertical" style={{fontSize:100,background:"#d7d7d7"}} />
<div className='panel-item'>
<span className='name'>WEB端平均访问时长</span>
<p className='value'>{todayData?.web3Count || '-' }&nbsp;<span style={{fontSize:16}}>h</span></p>
</div>
<Divider type="vertical" style={{fontSize:100,background:"#d7d7d7"}} />
<div className='panel-item'>
<span className='name'>移动端访问用户</span>
<p className='value'>{todayData?.app1Count || '-'}</p>
</div>
<Divider type="vertical" style={{fontSize:100,background:"#d7d7d7"}}/>
<div className='panel-item'>
<span className='name'>移动端浏览次数</span>
<p className='value'>{todayData?.app2Count || '-'}</p>
</div>
<Divider type="vertical" style={{fontSize:100,background:"#d7d7d7"}}/>
<div className='panel-item'>
<span className='name'>移动端平均访问时长</span>
<p className='value'>{todayData?.app3Count || '-'}&nbsp;<span style={{fontSize:16}}>h</span></p>
</div>
<Divider type="vertical" style={{fontSize:100,background:"#d7d7d7"}} />
</div>
</div>
<div className='action-middle'>
<ToolBar
setSearchVal={setSearchVal}
/>
</div>
<div className='action-bottom'>
<div className='left'>
<div className='left-top'>
<div className='comomn-title'>
<img alt='' src={`${process.env.PUBLIC_URL}/assets/panelTitle.png`} />
<span>浏览次数前十</span>
</div>
<div className='left-top-charts'>
<ReactEcharts
option={dtoption || {}}
style={{ width: "100%", height: '100%' }}
notMerge={true}
/>
</div>
</div>
<div className='left-bottom'>
<div className='comomn-title'>
<img alt='' src={`${process.env.PUBLIC_URL}/assets/panelTitle.png`} />
<span>日活跃用户数</span>
</div>
<div className='left-bottom-charts'>
<ReactEcharts
option={lineoption || {}}
style={{ width: "100%", height: '100%' }}
notMerge={true}
/>
</div>
</div>
</div>
<div className='right'>
<div className='right-title'>
<div className='comomn-title'>
<img alt='' src={`${process.env.PUBLIC_URL}/assets/panelTitle.png`} />
<span>功能热度前十</span>
</div>
<Tabs
defaultActiveKey="1"
onChange={(e) => { setTabs({ active: e }); setShowMore(false)}}
items={[
{
label: `web端`,
key: 0,
children: ``,
},
{
label: `移动端`,
key: 1,
children: ``,
},
]}
/>
<div className='more'>
<a onClick={(e) => { e.preventDefault(); setShowMore(!showMore) }}>
<Space>
更多
{!showMore ? <DownOutlined /> :<UpOutlined /> }
</Space>
</a>
</div>
</div>
<div className='right-charts'>
<ReactEcharts
option={hotoption || {}}
style={{ width: hotWidth, height: height }}
notMerge={true}
/>
</div>
</div>
</div>
</div>
</>
);
}
export default Page;

93
src/views/yhxwfx/index.less
View File

@ -1,93 +0,0 @@
.action-top{
width: 100%;
height: 170px;
background-color: #fff;
.data-panel{
display: flex;
justify-content: center;
column-gap: 45px;
align-items: center;
.panel-item{
display: flex;
flex-direction: column;
align-items: center;
.name{
color: #999999;
font-weight: 400;
font-family: '微软雅黑', sans-serif;
font-size: 16px;
}
.value{
font-size: 28px;
}
}
}
}
.action-middle{
width: 100%;
height: 60px;
margin: 10px 0;
background-color: #fff;
padding-left: 30px;
display: flex;
align-items: center;
}
.action-bottom{
width: 100%;
display: flex;
column-gap: 10px;
.left{
width: 50%;
.left-top{
background-color: #fff;
.left-top-charts{
width: 100%;
height: 250px;
}
}
.left-bottom{
background-color: #fff;
margin-top: 10px;
.left-bottom-charts{
width: 100%;
height: 248px;
}
}
}
.right{
width: 50%;
background-color: #fff;
.right-title{
position: relative;
display: flex;
align-items: center;
column-gap: 20px;
.ant-tabs-top > .ant-tabs-nav, .ant-tabs-bottom > .ant-tabs-nav, .ant-tabs-top > div > .ant-tabs-nav, .ant-tabs-bottom > div > .ant-tabs-nav{
margin: 0;
}
.ant-tabs-top > .ant-tabs-nav::before, .ant-tabs-bottom > .ant-tabs-nav::before, .ant-tabs-top > div > .ant-tabs-nav::before, .ant-tabs-bottom > div > .ant-tabs-nav::before{
border: none;
}
.more{
position: absolute;
right: 6%;
top: 30%;
}
}
.right-charts{
width: 100%;
height: 552px;
overflow-y: auto;
overflow-x: auto;
}
}
}
.comomn-title{
display: flex;
align-items: center;
column-gap: 10px;
padding: 20px 10px;
}

115
src/views/yhxwfx/toolbar.js
View File

@ -1,115 +0,0 @@
import React, { useEffect,useState } from 'react';
import { Form, Input, Button, DatePicker } from 'antd';
import NormalSelect from '../../components/Form/NormalSelect';
import moment from 'moment';
const { RangePicker } = DatePicker;
const ToolBar = ({ setSearchVal, onSave, storeData }) => {
const optionsType = [
{
label: "今日",
value:1
},
{
label: "近一周",
value:2
},
{
label:"近一月",
value:3
},
{
label:"近三月",
value:4
},
{
label:"近一年",
value:5
},
]
const [form] = Form.useForm();
const onValuesChange = (e) => {
switch (e.ranger) {
case 1:
form.setFieldValue("tm", [moment().startOf("day"), moment()])
setSearchVal({
stm: moment().startOf("day").format("YYYY-MM-DD 00:00:00"),
etm: moment().format("YYYY-MM-DD 23:59:59")
})
break;
case 2:
form.setFieldValue("tm",[moment().subtract(7, 'days'),moment()])
setSearchVal({
stm: moment().subtract(7, 'days').format("YYYY-MM-DD 00:00:00"),
etm: moment().format("YYYY-MM-DD 23:59:59")
})
break;
case 3:
form.setFieldValue("tm",[moment().subtract(1, 'months'),moment()])
setSearchVal({
stm: moment().subtract(1, 'months').format("YYYY-MM-DD 00:00:00"),
etm: moment().format("YYYY-MM-DD 23:59:59")
})
break;
case 4:
form.setFieldValue("tm",[moment().subtract(3, 'months'),moment()])
setSearchVal({
stm: moment().subtract(3, 'months').format("YYYY-MM-DD 00:00:00"),
etm: moment().format("YYYY-MM-DD 23:59:59")
})
break;
case 5:
form.setFieldValue("tm",[moment().subtract(1, 'years'),moment()])
setSearchVal({
stm: moment().subtract(1, 'years').format("YYYY-MM-DD 00:00:00"),
etm: moment().format("YYYY-MM-DD 23:59:59")
})
break;
default:
break;
}
}
useEffect(() => {
form.setFieldValue("tm", [moment().subtract(7, 'days'), moment()])
setSearchVal({
stm: moment().subtract(7, 'days').format("YYYY-MM-DD 00:00:00"),
etm: moment().format("YYYY-MM-DD 23:59:59")
})
}, [])
return (
<>
<div style={{display:'flex',justifyContent:'space-between'}}>
<Form form={form} className='toolbarBox' layout="inline" onValuesChange={onValuesChange}>
<Form.Item label="时间" name="tm">
<RangePicker
allowClear
style={{ width: "350px" }}
format="YYYY-MM-DD"
onChange={e => {
setSearchVal({
stm: e[0].format("YYYY-MM-DD 00:00:00"),
etm: e[1].format("YYYY-MM-DD 23:59:59")
})
}}
/>
</Form.Item>
<Form.Item label="常用时段" name="ranger">
<NormalSelect
allowClear
style={{ width: "150px" }}
options={optionsType}
/>
</Form.Item>
</Form>
</div>
</>
);
}
export default ToolBar;

87
src/views/yhxwfx/userBarOption.js
View File

@ -1,87 +0,0 @@
import { rotate } from "ol/coordinate";
export default function userBarOption(data) {
const appList = data.appList.map(item => ({
...item, appCount: item?.count
}))
const webList = data.webList.map(item => ({
...item, webCount: item?.count
}))
const arr = [...appList,...webList]
const compareLength = appList.length - webList.length;
// 找出长度大的数组
const mapArr1 = compareLength >= 0 ? appList : webList;
// 找出长度小的数组
const mapArr2 = compareLength < 0 ? appList : webList;
const maxY = Math.ceil(Math.max(...arr.map(item => item.count)))
const minY = Math.floor(Math.min(...arr.map(item => item.count)))
const result = mapArr1.map(item => {
let filterData = mapArr2.find(o => item.name == o.name)
return {
...item,
...filterData,
}
})
return {
grid: {
top: "15%",
bottom:"20%"
},
tooltip: {
trigger: "axis",
},
legend: {
show:true
},
calculable: true,
xAxis: [
{
type: "category",
axisLabel:{
interval:0,
rotate:15
},
data:result.map(item => item.name),
},
],
yAxis: [
{
type: "value",
name:"浏览次数",
min:minY - 1,
max:maxY + 1,
axisLine: {
show: false
},
axisTick: {
show: false
},
},
],
series: [
{
name: "WEB端",
type: "bar",
barWidth:"13%",
itemStyle: {
color:"#357efe"
},
data:result.map(item => item?.webCount || 0),
},
{
name: "移动端",
type: "bar",
barWidth:"13%",
itemStyle: {
color:"#62dffe"
},
data:result.map(item => item?.appCount || 0),
},
],
}
}

92
src/views/yhxwfx/userLineOption.js
View File

@ -1,92 +0,0 @@
export default function userLineOption(data) {
const appList = data.appList.map(item => ({
...item, appCount: item?.count
}))
const webList = data.webList.map(item => ({
...item, webCount: item?.count
}))
const arr = [...appList,...webList]
const compareLength = appList.length - webList.length;
// 找出长度大的数组
const mapArr1 = compareLength >= 0 ? appList : webList;
// 找出长度小的数组
const mapArr2 = compareLength < 0 ? appList : webList;
const maxY = Math.ceil(Math.max(...arr.map(item => item.count)))
const minY = Math.floor(Math.min(...arr.map(item => item.count)))
const result = mapArr1.map(item => {
let filterData = mapArr2.find(o => item.createDate == o.createDate)
return {
...item,
...filterData,
}
})
return {
grid: {
top: "15%",
bottom:"20%"
},
tooltip: {
trigger: "axis",
},
legend: {
show: true,
top:"0%"
},
calculable: true,
xAxis: [
{
type: "category",
data: result.map(item => item.createDate),
},
],
yAxis: [
{
type: "value",
min:minY - 1,
max:maxY + 1,
axisLine: {
show: false
},
axisTick: {
show: false
},
},
],
series: [
{
name: "WEB端",
type: "line",
smooth:true,
itemStyle: {
color:"#357efe"
},
label: {
normal: {
show: true,
position: "top",
},
},
data: result.map(item => item?.webCount || 0),
},
{
name: "移动端",
type: "line",
smooth:true,
itemStyle: {
color:"#62dffe"
},
label: {
normal: {
show: true,
position: "top",
},
},
data: result.map(item => item?.appCount || 0),
},
],
}
}

68
src/views/yhxwrz/index.js
View File

@ -1,68 +0,0 @@
import React, { Fragment, useRef, useMemo,useEffect,useState } from 'react';
import { Table, Card, Row, Col, Divider, Empty } from 'antd';
import apiurl from '../../service/apiurl';
import usePageTable from '../../components/crud/usePageTable2';
import { paginate_noCode } from '../../components/crud/_';
// 页面初始默认查询参数
const options = {
search:{
// year:moment().format('YYYY')
},
};
const Page = () => {
const refModal = useRef();
const isRender = useRef(true)
const [searchVal, setSearchVal] = useState({year:options.search.year})
const columns = [
{ title: '序号', key: 'inx', dataIndex: 'inx', width: 100, align:"center" },
{ title: '用户', key: 'name', dataIndex: 'name', width: 200 },
{ title: '页面', key: 'menu1', dataIndex: 'menu1', width: 300, render:(i,row)=>{
return (row.menu1?row.menu1:'')+(row.menu2?('-'+row.menu2):'')+(row.menu3?('-'+row.menu3):'')
}},
{ title: '时间', key: 'createTime', dataIndex: 'createTime', width: 150},
];
const width = useMemo(() => columns.reduce((total, cur) => total + (cur.width), 0), [columns]);
const { tableProps, search, refresh } = usePageTable((params)=>paginate_noCode(apiurl.systemM.yhxwrz.page,params),options);
useEffect(()=>{
// if(isRender.current){
// isRender.current = false
// return
// }
const params = {
search: {
...searchVal
}
};
search(params)
},[searchVal])
return (
<>
<div className='content-root clearFloat xybm' style={{paddingRight:"0",paddingBottom:"0"}}>
<div className='AdcdTreeTableBox'>
{/* <Card className='nonebox'>
<ToolBar setSearchVal={setSearchVal}/>
</Card> */}
<div className="ant-card-body" style={{padding:"20px 0 0 0"}}>
<Table
columns={columns}
rowKey="inx"
{...tableProps}
scroll={{ x: width, y: "calc( 100vh - 400px )" }} />
</div>
</div>
</div>
</>
);
}
export default Page;