Commit 0c6b1263 authored by 程恺文's avatar 程恺文
parents 1b859064 c4b3b73f
......@@ -107,6 +107,7 @@ export default {
'AlarmScrollAssembly',
'DataCarousel',
'VmsVideo',
'VideoSliderModal',
],
},
{
......
......@@ -2,6 +2,18 @@
All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
# [1.12.0](https://g.civnet.cn:8443/ReactWeb5/wisdom-components/compare/@wisdom-components/alarmscrollassembly@1.11.2...@wisdom-components/alarmscrollassembly@1.12.0) (2023-05-12)
### Features
- 调整滚动组件时间显示 ([ce718cd](https://g.civnet.cn:8443/ReactWeb5/wisdom-components/commits/ce718cdd9a6b1e974848e0ce069286b64acacdaa))
## [1.11.2](https://g.civnet.cn:8443/ReactWeb5/wisdom-components/compare/@wisdom-components/alarmscrollassembly@1.11.1...@wisdom-components/alarmscrollassembly@1.11.2) (2023-05-08)
### Bug Fixes
- AlarmScrollAssembly 添加权限参数 ([1b62441](https://g.civnet.cn:8443/ReactWeb5/wisdom-components/commits/1b62441f3bc2af17465791956a37ab8473cd76a5))
## [1.11.1](https://g.civnet.cn:8443/ReactWeb5/wisdom-components/compare/@wisdom-components/alarmscrollassembly@1.11.0...@wisdom-components/alarmscrollassembly@1.11.1) (2023-04-13)
**Note:** Version bump only for package @wisdom-components/alarmscrollassembly
......
{
"name": "@wisdom-components/alarmscrollassembly",
"version": "1.11.1",
"version": "1.12.0",
"description": "滚动组件",
"author": "chenlong <857265978@qq.com>",
"homepage": "",
......
......@@ -11,6 +11,7 @@ export default () => {
prefix={'报警信息:'}
showTotal={false}
interval={1}
userAccess={true}
/>
); // 最小宽度930px
};
......@@ -190,11 +190,13 @@ AlarmScrollAssembly.defaultProps = {
prefix: '',
showTotal: true,
interval: 5,
userAccess:false
};
AlarmScrollAssembly.propTypes = {
deviceType: PropTypes.string,
prefix: PropTypes.string,
showTotal: PropTypes.bool,
interval: PropTypes.number,
userAccess: PropTypes.bool,
};
export default AlarmScrollAssembly;
......@@ -127,6 +127,10 @@
.time {
display: inline-block;
width: 120px;
max-width: 120px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
color: #333333;
}
......@@ -153,6 +157,10 @@
.period {
display: inline-block;
width: 120px;
max-width: 120px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
margin-left: 10px;
color: #333333;
}
......
......@@ -2,6 +2,12 @@
All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
## [1.5.6](https://g.civnet.cn:8443/ReactWeb5/wisdom-components/compare/@wisdom-components/basicchart@1.5.5...@wisdom-components/basicchart@1.5.6) (2023-05-12)
### Bug Fixes
- 图表重渲染 ([407e89f](https://g.civnet.cn:8443/ReactWeb5/wisdom-components/commits/407e89f017e1d5221e522bc20cba93a316b1aef2))
## [1.5.5](https://g.civnet.cn:8443/ReactWeb5/wisdom-components/compare/@wisdom-components/basicchart@1.5.4...@wisdom-components/basicchart@1.5.5) (2023-04-13)
**Note:** Version bump only for package @wisdom-components/basicchart
......
{
"name": "@wisdom-components/basicchart",
"version": "1.5.5",
"version": "1.5.6",
"description": "> TODO: description",
"author": "tuqian <webtuqian@163.com>",
"homepage": "",
......
......@@ -16,7 +16,11 @@ const ECharts = memo(
}, [props.option]);
// const chartProps = pick(props, ['option', 'notMerge', 'lazyUpdate', 'style', 'className', 'theme', 'onChartReady', 'loadingOption', 'showLoading', 'onEvents', 'opts']);
if (ref.current) {
ref.current.getEchartsInstance().clear();
ref.current.getEchartsInstance().setOption(option);
ref.current.getEchartsInstance().resize();
}
return (
<ReactEcharts
ref={ref}
......
# Change Log
All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
## [1.1.3](https://g.civnet.cn:8443/ReactWeb5/wisdom-components/compare/@wisdom-components/videoslidermodal@1.1.2...@wisdom-components/videoslidermodal@1.1.3) (2023-05-12)
**Note:** Version bump only for package @wisdom-components/videoslidermodal
## [1.1.2](https://g.civnet.cn:8443/ReactWeb5/wisdom-components/compare/@wisdom-components/videoslidermodal@1.1.1...@wisdom-components/videoslidermodal@1.1.2) (2023-05-12)
### Bug Fixes
- 轮播交互修改 ([f2d0e76](https://g.civnet.cn:8443/ReactWeb5/wisdom-components/commits/f2d0e769ae840d8c103e973cd3e052f37764f56d))
## [1.1.1](https://g.civnet.cn:8443/ReactWeb5/wisdom-components/compare/@wisdom-components/videoslidermodal@1.1.0...@wisdom-components/videoslidermodal@1.1.1) (2023-05-11)
### Bug Fixes
- 视频弹窗组件修改 ([dc55354](https://g.civnet.cn:8443/ReactWeb5/wisdom-components/commits/dc553545e3fa34d5e983aa6e1e9a97586f615077))
# 1.1.0 (2023-05-11)
### Features
- 新增视频轮组组件 ([c1290bb](https://g.civnet.cn:8443/ReactWeb5/wisdom-components/commits/c1290bb85a7e55e70337d3af2b0103199b9eff41))
# `@wisdom-components/VideoSliderModal`
> TODO: description
## Usage
```
const videoslidermodal = require('@wisdom-components/VideoSliderModal');
// TODO: DEMONSTRATE API
```
{
"name": "@wisdom-components/videoslidermodal",
"version": "1.1.3",
"description": "> TODO: description",
"author": "Liumh <liumh564@163.com>",
"homepage": "",
"license": "ISC",
"module": "es/index.js",
"main": "lib/index.js",
"sideEffects": [
"*.less"
],
"directories": {
"lib": "lib",
"test": "__tests__"
},
"files": [
"lib",
"es",
"dist"
],
"publishConfig": {
"registry": "https://g.civnet.cn:4873/"
},
"repository": {
"type": "git",
"url": "https://g.civnet.cn:8443/ReactWeb5/wisdom-components.git"
},
"scripts": {
"test": "node ./__tests__/@wisdom-components/VideoSliderModal.test.js"
},
"dependencies": {
"@babel/runtime": "^7.17.9",
"@wisdom-components/VmsVideo": "1.2.0",
"swiper": "^6.8.1"
}
}
This source diff could not be displayed because it is too large. You can view the blob instead.
This source diff could not be displayed because it is too large. You can view the blob instead.
---
title: VideoSliderModal - 视频弹窗组件
nav:
title: 基础组件
path: /components
group:
path: /
---
# VmsVideo 视频弹窗组件
## 组件使用
<code src="./demos/demo.tsx">
## API
### 主要参数说明
| 参数 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| ModalInfo | api 参考 Antd Modal 组件 https://ant.design/components/modal-cn#api | object | {width:1000,title:'视频预览',footer:null} |
| VideoInfo | 传参格式[VideoParams,VideoParams,...],VideoParams 可参考如下详细说明 | array | - |
| JessibucaObj | 传参格式可参考如下详细说明 | object | - |
### VideoParam 参数和 JessibucaObj 参数详细说明
| 参数 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| VideoParams | 每一个视频的信息,更多 api 可参考视频组件 VmsVideo 的 VideoParam | object | { } |
| | 【fullUrl】 完整 url,接入 flv 或者三方的链接 | string | "" |
| | 【username】 账号 | string | "6c44c8e92d1c4d75a9818756025df550" |
| | 【password】 密码 | string | "78b7dc88f9f4bf19c2b1aabfdd995244" |
| | 【address】 地址 | string | "123638446" |
| | 【protocol】 协议类型 | string | "萤石 EZOPEN" |
| | 【gateway】 是否走网关 | boolean | false |
| | 【pandavmsHost】 pandavms 后端主机地址 eg | string | ws://172.16.19.19:8080/ |
| | 【useFullUrl】 是否为完整 url,是,则取 fullUrl,否,则会用 pandavmsHost 和 id 去拼接 | boolean | false |
| | 【id】 摄像头唯一标识,一串 GUID | string | "" |
| | 【name】 摄像头名称 | string | "" |
| | 【dataRate】 码率,Main 为主码流,Sub 为辅码流,与消耗网络有关,主码流消耗最高,**由于拼接方式不定,改为是字符串传入** | string | 'Sub' |
| JessibucaObj | 更多 api 可参考视频组件 VmsVideo 的 JessibucaObj | object | { } |
| | 【hiddenAutoPause】 是否开启当页面的'visibilityState'变为'hidden'的时候,自动暂停播放。 | boolean | false |
| | 【hasAudio】 是否有音频,如果设置 false,则不对音频数据解码,提升性能 | boolean | true |
| | 【isFlv】 当为 true 的时候:ws 协议不检验是否以.flv 为依据,进行协议解析。 | boolean | false |
| | 【isNotMute】 是否开启声音,默认是关闭声音播放的。 | boolean | false |
| | 【loadingText】 加载过程中文案 | string | "视频加载中" |
| | 【controlAutoHide】 底部控制台是否自动隐藏 | boolean | false |
| | 【recordType】 默认录制的视频格式 | string | mp4 |
| | 【operateBtns】 配置操作按钮,以下为 operateBtns 详细属性 | object | |
| | 【fullscreen】 是否显示全屏按钮 | boolean | true |
| | 【screenshot】 是否显示截图按钮 | boolean | true |
| | 【play】 是否显示播放暂停按钮 | boolean | true |
| | 【audio】 是否显示声音按钮 | boolean | true |
| | 【record】 是否显示录制按钮 | boolean | true |
### 补充
更多参数,方法,事件,可查看 demo 中的传参
import React, { useState } from 'react';
import { Button } from 'antd';
import VideoSliderModal from '../index';
const Demo = () => {
const [showModal, setShowModal] = useState(false);
// 关闭弹窗
const closeModal = () => {
setShowModal(false);
};
// 弹窗参数
const modalInfo = {
title: '视频预览测试',
open: showModal,
onCancel: closeModal,
};
// 视频数据源信息
const videos = [
{
id: '339B3B67-A7AE-45B2-89B7-227619A88A01', // 398993BB-A795-4237-BE75-B6A7EC9D675
name: '琼海电信小区1', // 设备名称
protocol: '萤石云HTTP-FLV', // 萤石EZOPE 萤石HTTP-FLV RTSP GB28181
username: '6c44c8e92d1c4d75a9818756025df550',
password: '78b7dc88f9f4bf19c2b1aabfdd995244',
dataRate: 'Sub', // Main 主码流 Sub 子码流
pandavmsHost: `ws://192.168.8.30:7000/`, // pandavms后端主机地址 eg: ws://172.16.19.19:8080/
address: '236644034',
},
{
id: '339B3B67-A7AE-45B2-89B7-227619A88A01', // 398993BB-A795-4237-BE75-B6A7EC9D675
name: '琼海电信小区2', // 设备名称
protocol: '萤石云HTTP-FLV', // 萤石EZOPE 萤石HTTP-FLV RTSP GB28181
username: '6c44c8e92d1c4d75a9818756025df550',
password: '78b7dc88f9f4bf19c2b1aabfdd995244',
dataRate: 'Sub', // Main 主码流 Sub 子码流
pandavmsHost: `ws://192.168.8.30:7000/`, // pandavms后端主机地址 eg: ws://172.16.19.19:8080/
address: '236644034',
},
{
id: '972DF430-2E69-4960-86E2-C1D336B85280', // 398993BB-A795-4237-BE75-B6A7EC9D675
name: '琼海电信小区3', // 设备名称
protocol: '萤石云HTTP-FLV', // 萤石EZOPE 萤石HTTP-FLV RTSP GB28181
username: '6c44c8e92d1c4d75a9818756025df550',
password: '78b7dc88f9f4bf19c2b1aabfdd995244',
dataRate: 'Sub', // Main 主码流 Sub 子码流
pandavmsHost: `ws://192.168.8.30:7000/`, // pandavms后端主机地址 eg: ws://172.16.19.19:8080/
address: '236644034',
},
];
const _JessibucaObj = {
operateBtns: {
screenshot: false,
},
loadingText: '视频加载中',
decoder: '/JessibucaVideo/decoder.js',
};
return (
<>
<Button onClick={() => setShowModal(true)}>打开弹窗</Button>
<VideoSliderModal modalInfo={modalInfo} videoInfos={videos} JessibucaObj={_JessibucaObj} />
</>
);
};
export default Demo;
import VmsVideo from '@wisdom-components/VmsVideo';
import { Modal } from 'antd';
import React from 'react';
import SwiperCore, { Autoplay, Lazy, Navigation, Pagination, Virtual } from 'swiper';
import { Swiper, SwiperSlide } from 'swiper/react';
import 'swiper/swiper.min.css';
import styles from './index.less';
SwiperCore.use([Virtual, Navigation, Lazy, Autoplay, Pagination]);
const VideoSliderModal = (props) => {
const { modalInfo, videoInfos, JessibucaObj } = props;
// 切换轮播页 控制按钮是否显示
const handleSlideChange = (swiper) => {
const nextButton = document.querySelector('.swiper-button-next');
const prevButton = document.querySelector('.swiper-button-prev');
if (swiper.isBeginning) {
prevButton.style.display = 'none'; // 隐藏左侧按钮
} else {
prevButton.style.display = 'block'; // 显示左侧按钮
}
if (swiper.isEnd) {
nextButton.style.display = 'none'; // 隐藏右侧按钮
} else {
nextButton.style.display = 'block'; // 显示右侧按钮
}
};
return (
<Modal
footer={null}
width={1000}
title="视频预览"
{...modalInfo}
wrapClassName={styles['video-carousel-modal']}
bodyStyle={{ padding: 0 }}
getContainer={document.body}
destroyOnClose
>
<>
{videoInfos.length === 1 ? (
videoInfos.map((item, index) => <VmsVideo VideoInfo={item} JessibucaObj={JessibucaObj} />)
) : (
<>
<Swiper
slidesPerView={1}
spaceBetween={0}
initialSlide={0}
pagination={{
clickable: true,
}}
lazy
virtual
navigation
onSlideChange={(swiper) => handleSlideChange(swiper)}
>
{videoInfos.map((item, index) => (
<SwiperSlide key={index}>
<div className={styles['swiper-wrap']}>
<div className={styles['swiper-title']}>{item.name}</div>
<div className={styles['swiper-content']}>
<VmsVideo VideoInfo={item} JessibucaObj={JessibucaObj} />
</div>
</div>
</SwiperSlide>
))}
</Swiper>
</>
)}
</>
</Modal>
);
};
export default VideoSliderModal;
@root-entry-name: 'default';
@import '~antd/es/style/themes/index.less';
.video-carousel-modal {
:global {
.@{ant-prefix}-modal-body {
position: relative;
height: auto;
padding: 0;
}
}
.swiper-wrap {
display: flex;
flex-direction: column;
height: 100%;
.swiper-title {
flex: none;
width: 100%;
height: 40px;
padding-left: 20px;
color: #ffffff;
line-height: 40px;
background: #454545;
}
.swiper-content {
flex: 1;
}
}
}
# Change Log
All notable changes to this project will be documented in this file.
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
## [1.1.13](https://g.civnet.cn:8443/ReactWeb5/wisdom-components/compare/@wisdom-components/VmsVideo@1.1.12...@wisdom-components/VmsVideo@1.1.13) (2023-04-26)
**Note:** Version bump only for package @wisdom-components/VmsVideo
All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
# [1.2.0](https://g.civnet.cn:8443/ReactWeb5/wisdom-components/compare/@wisdom-components/VmsVideo@1.1.13...@wisdom-components/VmsVideo@1.2.0) (2023-05-12)
### Features
- 支持移动端的网关配置 ([62deabf](https://g.civnet.cn:8443/ReactWeb5/wisdom-components/commits/62deabf769dcda125d1cc23f9b50c6d6503d804a))
## [1.1.13](https://g.civnet.cn:8443/ReactWeb5/wisdom-components/compare/@wisdom-components/VmsVideo@1.1.12...@wisdom-components/VmsVideo@1.1.13) (2023-04-26)
**Note:** Version bump only for package @wisdom-components/VmsVideo
## [1.1.12](https://g.civnet.cn:8443/ReactWeb5/wisdom-components/compare/@wisdom-components/VmsVideo@1.1.11...@wisdom-components/VmsVideo@1.1.12) (2023-04-26)
**Note:** Version bump only for package @wisdom-components/VmsVideo
## [1.1.11](https://g.civnet.cn:8443/ReactWeb5/wisdom-components/compare/@wisdom-components/VmsVideo@1.1.9...@wisdom-components/VmsVideo@1.1.11) (2023-04-20)
### Bug Fixes
......
{
"name": "@wisdom-components/VmsVideo",
"version": "1.1.13",
"version": "1.2.0",
"description": "> TODO: description",
"author": "yutian <249303761@qq.com>",
"homepage": "",
......
......@@ -36,7 +36,7 @@ import style from './index.less';
const Video = (props, ref) => {
const _video = useRef(null);
const Players = useRef(null);
const { VideoInfo, JessibucaObj } = props;
const { VideoInfo, JessibucaObj,gateway } = props;
let baseUrl = `ws://${window.location.host}/jessica`;
let _VideoInfo = {
......@@ -88,7 +88,7 @@ const Video = (props, ref) => {
} else {
getToken();
}
const CommonPath = window?.globalConfig?.hasGateWay ? 'PandaCore/GateWay/Video/' : '';
const CommonPath = (VideoInfo.gateway || window?.globalConfig?.hasGateWay) ? 'PandaCore/GateWay/Video/' : ''; // 配置了gateway或者pc端web配置中有gateway
VideoInfo.url = VideoInfo.useFullUrl
? VideoInfo.fullUrl
: (VideoInfo.pandavmsHost || 'ws://' + location.host + '/') +
......
......@@ -2,6 +2,48 @@
All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
## [1.4.56](https://g.civnet.cn:8443/ReactWeb5/wisdom-components/compare/@wisdom-components/ec_configurationview@1.4.55...@wisdom-components/ec_configurationview@1.4.56) (2023-05-15)
### Bug Fixes
- 组态视频查看 ([5798a13](https://g.civnet.cn:8443/ReactWeb5/wisdom-components/commits/5798a137b08bc4cf5c3ae0381ef921244ff7320b))
## [1.4.55](https://g.civnet.cn:8443/ReactWeb5/wisdom-components/compare/@wisdom-components/ec_configurationview@1.4.54...@wisdom-components/ec_configurationview@1.4.55) (2023-05-12)
### Bug Fixes
- 是否在线数据变更颜色变换 ([ea87564](https://g.civnet.cn:8443/ReactWeb5/wisdom-components/commits/ea8756493b7a257d2741f050f7e0e09aaa17add0))
## [1.4.54](https://g.civnet.cn:8443/ReactWeb5/wisdom-components/compare/@wisdom-components/ec_configurationview@1.4.53...@wisdom-components/ec_configurationview@1.4.54) (2023-05-11)
### Bug Fixes
- 组态增加在线状态 ([99fb2a7](https://g.civnet.cn:8443/ReactWeb5/wisdom-components/commits/99fb2a74d7595bf6ab846c1d33f36878ecef4d98))
## [1.4.53](https://g.civnet.cn:8443/ReactWeb5/wisdom-components/compare/@wisdom-components/ec_configurationview@1.4.51...@wisdom-components/ec_configurationview@1.4.53) (2023-05-10)
### Bug Fixes
- 千分增加千分分割 ([3d35383](https://g.civnet.cn:8443/ReactWeb5/wisdom-components/commits/3d353831d86d30ebd44465f1d4dfe45fa3b716bd))
## [1.4.52](https://g.civnet.cn:8443/ReactWeb5/wisdom-components/compare/@wisdom-components/ec_configurationview@1.4.51...@wisdom-components/ec_configurationview@1.4.52) (2023-05-10)
### Bug Fixes
- 千分增加千分分割 ([3d35383](https://g.civnet.cn:8443/ReactWeb5/wisdom-components/commits/3d353831d86d30ebd44465f1d4dfe45fa3b716bd))
## [1.4.51](https://g.civnet.cn:8443/ReactWeb5/wisdom-components/compare/@wisdom-components/ec_configurationview@1.4.50...@wisdom-components/ec_configurationview@1.4.51) (2023-04-28)
### Bug Fixes
- 增加状态模型 ([9ca6780](https://g.civnet.cn:8443/ReactWeb5/wisdom-components/commits/9ca6780e79d929f40f68bb8dfaf23c0f19249292))
## [1.4.50](https://g.civnet.cn:8443/ReactWeb5/wisdom-components/compare/@wisdom-components/ec_configurationview@1.4.49...@wisdom-components/ec_configurationview@1.4.50) (2023-04-27)
### Bug Fixes
- 修改 ([a495f50](https://g.civnet.cn:8443/ReactWeb5/wisdom-components/commits/a495f503da04a43cddb82e2d16201711d6103117))
## [1.4.49](https://g.civnet.cn:8443/ReactWeb5/wisdom-components/compare/@wisdom-components/ec_configurationview@1.4.48...@wisdom-components/ec_configurationview@1.4.49) (2023-04-26)
### Bug Fixes
......
{
"name": "@wisdom-components/ec_configurationview",
"version": "1.4.49",
"version": "1.4.56",
"description": "> TODO: description",
"author": "tuqian <webtuqian@163.com>",
"homepage": "",
......
......@@ -50,6 +50,7 @@ const ConfigurationView = (props) => {
const ConfigurationRef = useRef();
const customBack = props.customBack ? props.customBack : () => {};
const { devices = [], config, isZoom = false, flowShow = true, deviceName = [] } = props;
let devicesCode = [];
const globalConfig = window.globalConfig || config;
let isClose = false;
......@@ -84,6 +85,19 @@ const ConfigurationView = (props) => {
stationList.push(stationData[remain]);
}
}
const siteInfoArr = Object.getOwnPropertyNames(siteInfo);
devicesCode = [];
bindData = [];
siteInfoArr.forEach((name, index) => {
const deviceList =
devices[index] || (siteInfo && siteInfo[name] ? siteInfo[name].Code || '' : '');
bindData.push({
code: deviceList,
name,
type: siteInfo && siteInfo[name] ? siteInfo[name].Type : '',
});
devicesCode.push(deviceList);
});
getDiagramJson(data[0], siteInfo);
} else {
setDescription('咦~未查询到工艺图画板信息哦~');
......@@ -100,7 +114,7 @@ const ConfigurationView = (props) => {
// 获取点表信息
const pointInfo = await getPointAddress({
code: devices.join(','),
code: devicesCode.join(','),
_site:
globalConfig.userInfo && globalConfig.userInfo.LocalSite
? globalConfig.userInfo.LocalSite
......@@ -150,11 +164,21 @@ const ConfigurationView = (props) => {
}
break;
case 'valCase': // 实时值模型
const division = node.division || false;
if (node.shType === '值显示') {
myDiagram.model.setDataProperty(node, 'showVal', realVal < 0 ? 0 : realVal);
myDiagram.model.setDataProperty(
node,
'showVal',
realVal < 0 ? 0 : division ? realVal.toLocaleString() : realVal,
);
} else {
myDiagram.model.setDataProperty(node, 'showVal', realVal);
myDiagram.model.setDataProperty(
node,
'showVal',
division ? realVal.toLocaleString() : realVal,
);
}
if (node.stateName) return false;
shRule = ruleOperation(node, realVal);
myDiagram.model.setDataProperty(
node,
......@@ -267,6 +291,30 @@ const ConfigurationView = (props) => {
}
};
/** *********************************节点状态展示逻辑****************************** */
const stateMethod = (node, list) => {
const realVal = list.Value * 1;
if (!node.shType) return false;
let shRule = [];
try {
switch (node.category) {
case 'valCase': // 实时值模型
// 颜色规则
shRule = ruleOperation(node, realVal);
myDiagram.model.setDataProperty(
node,
'fontStroke',
shRule ? shRule.attr : node.fontStroke,
);
break;
default:
break;
}
} catch (err) {
console.log(err);
}
};
/** ***********************************展示规则运算********************************* */
const ruleOperation = (node, realVal) => {
const patt = /[><=]/gi;
......@@ -536,7 +584,7 @@ const ConfigurationView = (props) => {
};
useEffect(() => {
if (!props.name || !props.devices || !props.devices.length) {
if (!props.name) {
setDescription('咦~工艺图配置信息不全哦~');
setIsEmpty(true);
setSpinning(false);
......@@ -588,15 +636,15 @@ const ConfigurationView = (props) => {
nodeDataArray: [],
linkDataArray: [],
};
bindData = [];
devices.forEach((item, index) => {
const name = `设备${stationList[index]}`;
bindData.push({
code: item,
name,
type: siteInfo && siteInfo[name] ? siteInfo[name].Type : '',
});
});
// bindData = [];
// devices.forEach((item, index) => {
// const name = `设备${stationList[index]}`;
// bindData.push({
// code: item,
// name,
// type: siteInfo && siteInfo[name] ? siteInfo[name].Type : '',
// });
// });
diagramRender(typeof fromJson === 'string' ? fromJson : JSON.stringify(fromJson), list);
getHistoryData(true);
} else {
......@@ -621,7 +669,7 @@ const ConfigurationView = (props) => {
jsonCopy.linkDataArray.forEach((item) => {
item.shName && item.stationName === list.name && sensors.push(item.shName);
});
if (sensors.length)
if (sensors.length && list.code)
acrossTables.push({
deviceType: list.type,
sensors: Array.from(new Set(sensors)).join(','),
......@@ -726,14 +774,16 @@ const ConfigurationView = (props) => {
});
if (!bindList || item.stationName !== bindList.name) return false;
if (
!pvList ||
pvList.pv === null ||
list.sensorName !== item.shName ||
item.realVal === pvList.pv
(!pvList ||
pvList.pv === null ||
list.sensorName !== item.shName ||
item.realVal === pvList.pv) &&
list.sensorName !== item.stateName
)
return false;
pvList.Value = pvList.pv;
showNodeMethod(node, pvList);
if (list.sensorName === item.shName) showNodeMethod(node, pvList);
if (list.sensorName === item.stateName) stateMethod(node, pvList);
});
});
} catch (e) {
......
This source diff could not be displayed because it is too large. You can view the blob instead.
This source diff could not be displayed because it is too large. You can view the blob instead.
......@@ -5,6 +5,7 @@ import moment from 'moment';
import sha1 from 'sha1';
import Empty from '@wisdom-components/empty';
import LoadBox from '@wisdom-components/loadbox';
import VideoSliderModal from '@wisdom-components/videoslidermodal';
import { Input, message, Modal, Form, ConfigProvider, Button } from 'antd';
import {
ExclamationCircleOutlined,
......@@ -23,7 +24,13 @@ import BarLink from './js/BarLink';
import WaterFlowControlView from './js/WaterFlowControlView';
import ConfigurationDetail from './js/ConfigurationDetail';
import DragModal from './js/DragModal';
import { getSketchPadList, getSketchPadContent, getPointAddress, getDeviceRealInfo } from './apis';
import {
getSketchPadList,
getSketchPadContent,
getPointAddress,
getDeviceRealInfo,
getVideoDetail,
} from './apis';
import {
isNumber,
createGuid,
......@@ -35,6 +42,7 @@ import {
querySkipUrl,
isJson,
stationData,
getVideoUrl,
} from './js/utils';
import './index.less';
......@@ -71,6 +79,9 @@ const ConfigurationView = (props) => {
const [isEmpty, setIsEmpty] = useState(false); // 画板无数据状态
const [description, setDescription] = useState(''); // 画板无数据描述
const [first, setFirst] = useState(true); // 第一次加载
const [isVideoVisible, setIsVideoVisible] = useState(false);
const [videoData, setVideoData] = useState([]);
const [videoTitle, setVideoTitle] = useState('');
twoID = `TDG${Date.now().toString(36)}`;
const AdjustControlInput = useRef();
......@@ -78,9 +89,18 @@ const ConfigurationView = (props) => {
const ConfigurationRef = useRef();
const customBack = props.customBack ? props.customBack : () => {};
const { devices = [], config, isZoom = false, flowShow = true, deviceName = [] } = props;
let devicesCode = [];
const globalConfig = window.globalConfig || config;
let isClose = false;
const _JessibucaObj = {
operateBtns: {
screenshot: false,
},
loadingText: '视频加载中',
decoder: '/JessibucaVideo/decoder.js',
};
/** **********************************获取工艺图画板信息*********************** */
const getConfiguraList = async () => {
const url = globalConfig.mainserver ? globalConfig.mainserver : 'https://panda-water.cn/';
......@@ -112,6 +132,18 @@ const ConfigurationView = (props) => {
stationList.push(stationData[remain]);
}
}
const siteInfoArr = Object.getOwnPropertyNames(siteInfo);
devicesCode = [];
siteInfoArr.forEach((name, index) => {
const deviceList =
devices[index] || (siteInfo && siteInfo[name] ? siteInfo[name].Code || '' : '');
bindData.push({
code: deviceList,
name,
type: siteInfo && siteInfo[name] ? siteInfo[name].Type : '',
});
devicesCode.push(deviceList);
});
getDiagramJson(data[0], siteInfo);
} else {
setDescription('咦~未查询到工艺图画板信息哦~');
......@@ -127,9 +159,9 @@ const ConfigurationView = (props) => {
}
// 获取点表信息
const pointInfo = devices.length
const pointInfo = devicesCode.length
? await getPointAddress({
code: devices.join(','),
code: devicesCode.join(','),
_site:
globalConfig.userInfo && globalConfig.userInfo.LocalSite
? globalConfig.userInfo.LocalSite
......@@ -180,18 +212,33 @@ const ConfigurationView = (props) => {
}
break;
case 'valCase': // 实时值模型
const division = node.division || false;
if (node.shType === '值显示') {
myDiagram.model.setDataProperty(node, 'showVal', realVal < 0 ? 0 : realVal);
myDiagram.model.setDataProperty(
node,
'showVal',
realVal < 0 ? 0 : division ? realVal.toLocaleString() : realVal,
);
} else {
myDiagram.model.setDataProperty(node, 'showVal', realVal);
myDiagram.model.setDataProperty(
node,
'showVal',
division ? realVal.toLocaleString() : realVal,
);
}
// 颜色规则
if (node.stateName) return false;
shRule = ruleOperation(node, realVal);
myDiagram.model.setDataProperty(
node,
'fontStroke',
shRule ? shRule.attr : node.fontStroke,
node.realType === '在线'
? shRule
? shRule.attr
: node.fontStroke
: node.oflColor || '#999999',
);
myDiagram.model.setDataProperty(node, 'dtStroke', shRule ? shRule.attr : node.fontStroke);
break;
case 'waterCase': // 水池模型
const height = node.height - node.strokeWidth * 2;
......@@ -293,8 +340,37 @@ const ConfigurationView = (props) => {
default:
break;
}
} catch (err) {
console.log(err);
} catch (e) {
// console.log(e);
}
};
/** *********************************节点状态展示逻辑****************************** */
const stateMethod = (node, list) => {
const realVal = list.Value * 1;
if (!node.shType) return false;
let shRule = [];
try {
switch (node.category) {
case 'valCase': // 实时值模型
// 颜色规则
shRule = ruleOperation(node, realVal);
myDiagram.model.setDataProperty(
node,
'fontStroke',
node.realType === '在线'
? shRule
? shRule.attr
: node.fontStroke
: node.oflColor || '#999999',
);
myDiagram.model.setDataProperty(node, 'dtStroke', shRule ? shRule.attr : node.fontStroke);
break;
default:
break;
}
} catch (e) {
// console.log(e);
}
};
......@@ -356,13 +432,6 @@ const ConfigurationView = (props) => {
return item.code === code;
});
if (!mqttData) return false;
try {
if (unitRender) unitRender.tipRender({ deviceID: code, data: mqttData });
} catch (err) {
// 三维调用
}
const json = JSON.parse(myDiagram.model.toJson());
const jsonCopy = JSON.parse(JSON.stringify(json));
const oldJson = deepCopy(jsonCopy, {});
......@@ -397,6 +466,12 @@ const ConfigurationView = (props) => {
if (!(item.shName || item.figure === 'updateTime') || item.stationName !== name)
return false;
const node = myDiagram.model.findNodeDataForKey(item.key);
const onlineList = onLineDataMethod(mqttData);
if (onlineList) {
node.realType = onlineList.Value ? '在线' : '离线';
myDiagram.model.setDataProperty(node, 'realType', onlineList.Value ? '在线' : '离线');
onlineColorMethod(node);
}
mqttData.forEach((list) => {
if (node.figure === 'updateTime') {
myDiagram.model.setDataProperty(
......@@ -411,9 +486,13 @@ const ConfigurationView = (props) => {
const ptName = itemID.substring(0, num);
const shName = itemID.substring(num + 1, Infinity);
if (editionList && `${editionList.name}.${editionList.version}` !== ptName) return false;
if (list.Value == null || shName !== item.shName || item.realVal === list.Value)
if (
(list.Value == null || shName !== item.shName || item.realVal === list.Value) &&
shName !== item.stateName
)
return false;
showNodeMethod(node, list);
if (shName === item.shName) showNodeMethod(node, list);
if (shName === item.stateName) stateMethod(node, list);
});
});
} catch (e) {
......@@ -450,6 +529,37 @@ const ConfigurationView = (props) => {
}
};
/** **************************************是否在线数据获取****************************************** */
const onLineDataMethod = (data) => {
const onlineList = data.find((list) => {
const itemID = list.ItemID;
const num = itemID.lastIndexOf('.');
const shName = itemID.substring(num + 1, Infinity);
return shName === '是否在线';
});
return onlineList;
};
/** **************************************是否在线颜色变化****************************************** */
const onlineColorMethod = (node) => {
if (node.realVal === '--' || !node.shName) return false;
try {
switch (node.category) {
case 'valCase': // 实时值模型
myDiagram.model.setDataProperty(
node,
'fontStroke',
node.realType === '在线' ? node.dtStroke : node.oflColor || '#999999',
);
break;
default:
break;
}
} catch (e) {
// console.log(e)
}
};
/** **************************************合管****************************************** */
const changLinkRouting = (e) => {
const link = e.subject;
......@@ -689,7 +799,7 @@ const ConfigurationView = (props) => {
};
useEffect(() => {
if (!props.name || !props.devices || !props.devices.length) {
if (!props.name) {
setDescription('咦~工艺图配置信息不全哦~');
setIsEmpty(true);
setSpinning(false);
......@@ -743,21 +853,21 @@ const ConfigurationView = (props) => {
nodeDataArray: [],
linkDataArray: [],
};
devices.forEach((item, index) => {
const name = `设备${stationList[index]}`;
bindData.push({
code: item,
name,
type: siteInfo && siteInfo[name] ? siteInfo[name].Type : '',
});
});
mqttView = devices.length
// devices.forEach((item, index) => {
// const name = `设备${stationList[index]}`;
// bindData.push({
// code: item,
// name,
// type: siteInfo && siteInfo[name] ? siteInfo[name].Type : '',
// });
// });
mqttView = devicesCode.length
? new MqttView({
mqttIP: globalConfig.mqtt_iotIP,
mqttPath: globalConfig.mqtt_path,
mqttSsl: globalConfig.mqtt_IsSSL,
siteCode: globalConfig.mqtt_mess.site_code,
devices,
devices: devicesCode,
callback: refreshData,
controlback: controlData,
})
......@@ -785,7 +895,7 @@ const ConfigurationView = (props) => {
});
}
const params = {
equipmentCode: devices.join(','),
equipmentCode: devicesCode.join(','),
accountFieldParams,
};
const results = await getDeviceRealInfo(params);
......@@ -862,14 +972,16 @@ const ConfigurationView = (props) => {
});
if (!bindList || item.stationName !== bindList.name) return false;
if (
!pvList ||
pvList.pv === null ||
pvList.dName !== item.shName ||
item.realVal === pvList.pv
(!pvList ||
pvList.pv === null ||
pvList.dName !== item.shName ||
item.realVal === pvList.pv) &&
pvList.dName !== item.stateName
)
return false;
pvList.Value = pvList.pv;
showNodeMethod(node, pvList);
if (pvList.dName === item.shName) showNodeMethod(node, pvList);
if (pvList.dName === item.stateName) stateMethod(node, list);
});
});
} catch (e) {
......@@ -1180,6 +1292,43 @@ const ConfigurationView = (props) => {
}
};
/** **************************************视频查看****************************************** */
const videoScanMethod = async (data) => {
try {
const opRule = JSON.parse(data.opRule);
const video = opRule && opRule.video ? opRule.video : '';
if (!video) return false;
const detail = await getVideoDetail({
id: video,
_site:
globalConfig.userInfo && globalConfig.userInfo.LocalSite
? globalConfig.userInfo.LocalSite
: '',
});
const dataList = detail?.data;
if (!dataList) return setVideoData([]);
const videoChannels = detail?.data?.videoChannels || [];
const detailList = [];
videoChannels.forEach((item, index) => {
detailList.push({
id: item.id,
name: item.channelName,
protocol: item.protocol,
username: item.username,
password: item.password,
dataRate: 'Sub',
pandavmsHost: getVideoUrl(),
address: item.address,
});
});
setVideoTitle(dataList?.deviceName || '视频查看');
setVideoData(detailList);
setIsVideoVisible(true);
} catch (e) {
// console.log(e)
}
};
/** **************************************交互脚本****************************************** */
const interactiveScript = (data) => {
try {
......@@ -1452,6 +1601,9 @@ const ConfigurationView = (props) => {
case '功能跳转': // 功能模型
menuJumpMethod(data);
break;
case '视频查看': // 视频查看
videoScanMethod(data);
break;
case '自定义交互': // 自定义交互
customBack(data);
interactiveScript(data);
......@@ -1516,6 +1668,9 @@ const ConfigurationView = (props) => {
case '功能跳转': // 功能模型
menuJumpMethod(data);
break;
case '视频查看': // 视频查看
videoScanMethod(data);
break;
case '自定义交互': // 自定义交互
customBack(data);
interactiveScript(data);
......@@ -1648,6 +1803,9 @@ const ConfigurationView = (props) => {
case '功能跳转': // 功能模型
menuJumpMethod(data);
break;
case '视频查看': // 视频查看
videoScanMethod(data);
break;
case '自定义交互': // 自定义交互
customBack(data);
interactiveScript(data);
......@@ -1724,6 +1882,9 @@ const ConfigurationView = (props) => {
case '功能跳转': // 功能模型
menuJumpMethod(data);
break;
case '视频查看': // 视频查看
videoScanMethod(data);
break;
case '自定义交互': // 自定义交互
customBack(data);
interactiveScript(data);
......@@ -2380,7 +2541,7 @@ const ConfigurationView = (props) => {
json.nodeDataArray.forEach((item) => {
item.showVal = '--';
item.realVal = '--';
item.realType = '线';
item.realType = '线';
item.Unit = '';
item.switchState = '开';
item.dtImgSrc = item.imgSrc || '';
......@@ -2390,6 +2551,7 @@ const ConfigurationView = (props) => {
}
if (item.category === 'valCase') {
if (item.shType === '') item.showVal = item.text;
item.dtStroke = item.fontStroke;
}
if (item.category === 'nameCase') {
item.dtFillColor = item.fillColor;
......@@ -2507,6 +2669,19 @@ const ConfigurationView = (props) => {
/>
</DragModal>
)}
{isVideoVisible && (
<VideoSliderModal
modalInfo={{
title: videoTitle,
open: isVideoVisible,
onCancel: () => {
setIsVideoVisible(false);
},
}}
videoInfos={videoData}
JessibucaObj={_JessibucaObj}
/>
)}
</div>
);
};
......
......@@ -58,3 +58,21 @@ export function getHistoryInfo(data) {
data,
});
}
// 获取视频列表
export function getVideoSourceList(params) {
return request({
url: `${baseURI}/PandaMonitor/Monitor/Video/GetVideoSourceList`,
method: REQUEST_METHOD_GET,
params,
});
}
// 获取视频通道详情
export function getVideoDetail(params) {
return request({
url: `${baseURI}/PandaMonitor/Monitor/Video/GetVideoSourceDetail`,
method: REQUEST_METHOD_GET,
params,
});
}
\ No newline at end of file
......@@ -149,3 +149,13 @@ export const stationData = [
'Y',
'Z',
];
export const getVideoUrl = () => {
const hasGateWay = window.globalConfig?.hasGateWay;
const protocol = window.location.protocol;
const address = window.location.origin.replace(protocol, 'ws:');
const port = window.location.port;
const defaultAddress = address.replace(port, 7000);
return hasGateWay ? `${address}/` : `${defaultAddress}/`;
};
......@@ -2,6 +2,30 @@
All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
# [1.11.0](https://g.civnet.cn:8443/ReactWeb5/wisdom-components/compare/@wisdom-components/ec_historyview@1.10.0...@wisdom-components/ec_historyview@1.11.0) (2023-05-12)
### Features
- 优化图表 ([e12aaa9](https://g.civnet.cn:8443/ReactWeb5/wisdom-components/commits/e12aaa90d6cb7448fb2af05950d1e57ad4e6ffa2))
# [1.10.0](https://g.civnet.cn:8443/ReactWeb5/wisdom-components/compare/@wisdom-components/ec_historyview@1.9.0...@wisdom-components/ec_historyview@1.10.0) (2023-05-11)
### Features
- 优化图表代码 ([9396e39](https://g.civnet.cn:8443/ReactWeb5/wisdom-components/commits/9396e391b3c461487a89e7cf35d5e1e26befc6de))
# [1.9.0](https://g.civnet.cn:8443/ReactWeb5/wisdom-components/compare/@wisdom-components/ec_historyview@1.8.1...@wisdom-components/ec_historyview@1.9.0) (2023-05-11)
### Features
- 优化图表代码 ([2beb13a](https://g.civnet.cn:8443/ReactWeb5/wisdom-components/commits/2beb13a606ce65d6db31e2c01e46a7c67d1b7086))
## [1.8.1](https://g.civnet.cn:8443/ReactWeb5/wisdom-components/compare/@wisdom-components/ec_historyview@1.8.0...@wisdom-components/ec_historyview@1.8.1) (2023-05-10)
### Bug Fixes
- 修复 x 轴显示时间异常;修复分隔线显示异常 ([4552dff](https://g.civnet.cn:8443/ReactWeb5/wisdom-components/commits/4552dff49b1a246aa3591a5caba921f8646c8875))
# [1.8.0](https://g.civnet.cn:8443/ReactWeb5/wisdom-components/compare/@wisdom-components/ec_historyview@1.7.2...@wisdom-components/ec_historyview@1.8.0) (2023-04-26)
### Features
......
{
"name": "@wisdom-components/ec_historyview",
"version": "1.8.0",
"version": "1.11.0",
"description": "> TODO: description",
"author": "cuijiahao <15927252954@163.com>",
"homepage": "",
......
......@@ -11,10 +11,11 @@ const SimgleChart = memo((props) => {
contrastOption = 'day',
smooth = true,
curveCenter,
showGridLine = false,
showGridLine = true,
deviceAlarmSchemes,
chartType,
justLine
// justLine,
showBoxOption
} = props;
const chartRef = useRef();
......@@ -27,7 +28,8 @@ const SimgleChart = memo((props) => {
showMarkLine: true,
showPoint: true,
chartType,
justLine
// justLine,
showBoxOption
};
return optionGenerator(dataSource, null, contrast, contrastOption, smooth, config);
}, [dataSource, smooth, curveCenter]);
......
......@@ -11,11 +11,11 @@ const deviceParams = [
{
// deviceCode: 'EGBF00000002',
// deviceCode: 'EGBF00000018',
deviceCode: 'EGBF00000017',
deviceCode: 'XMYL00000345',
// deviceCode: 'EGBF00000014',
// sensors: '今日供水量,今日用电量,1#水箱液位,是否在线',
sensors: '今日供水量',
deviceType: '二供泵房',
sensors: '进水压力',
deviceType: '熊猫压力表',
pointAddressID: 4,
},
// {
......
......@@ -80,14 +80,15 @@ const CheckboxData = [
showInTable: true,
tooltip: '本算法采用递推平均滤波法(滑动平均滤波法)对采样数据进行均值化平滑处理。',
},
{
// 需求变更,剔除
/* {
key: 'justLine',
label: '仅查看曲线',
type: '',
checked: false,
showInCurve: false,
showInTable: false,
},
},*/
{
key: 'dataThin',
label: '数据抽稀',
......@@ -256,6 +257,7 @@ const HistoryView = (props) => {
const [chartDataSource, setChartDataSource] = useState([]);
const [chartType, setChartType] = useState('lineChart');
const [showBoxOption, setShowBoxOption] = useState(true);
// 选择的时间范围值
const dateRange = useMemo(() => {
if (timeValue === 'customer') {
......@@ -357,9 +359,15 @@ const HistoryView = (props) => {
if (e.target.value === 'contrast') {
// 同期对比
onContrastChange(contrastOption);
setShowBoxOption(false);
setChartType('lineChart');
onCheckboxChange({target: {value: false}}, 'chartType');
onCheckboxChange({target: {value: false}}, 'ignoreOutliers');
} else {
// 自定义
// 不需要处理
setShowBoxOption(true);
onCheckboxChange({target: {value: true}}, 'chartType');
}
};
......@@ -424,22 +432,29 @@ const HistoryView = (props) => {
// 曲线设置项选择/取消
const onCheckboxChange = (e, key, showJustLine) => {
let data = [...checkboxData];
let _index = data.findIndex(item => item.key === 'justLine'); // 仅查看曲线会在勾选了数据滤波后展示
// let _index = data.findIndex(item => item.key === 'justLine'); // 仅查看曲线会在勾选了数据滤波后展示
let _index1 = data.findIndex(item => item.key === 'ignoreOutliers'); // 仅查看曲线会在勾选了数据滤波后展示
data.forEach((item) => {
if (item.key === key) {
item.checked = e.target.checked;
}
});
if (key === 'ignoreOutliers' && showJustLine) {
data[_index].showInCurve = e.target.checked;
data[_index].checked = e.target.checked;
if (key === 'ignoreOutliers') {
// 需求变更,仅查看曲线剔除
/* if (showJustLine) {
data[_index].showInCurve = e.target.checked;
data[_index].checked = e.target.checked;
} else {*/
data[_index1].showInCurve = true;
// data[_index1].checked = false;
// }
}
if (key === 'chartType') {
data[_index1].showInCurve = e.target.value;
data[_index1].checked = false;
data[_index].showInCurve = false;
data[_index].checked = false;
// data[_index].showInCurve = false;
// data[_index].checked = false;
}
setCheckboxData(data);
};
......@@ -458,7 +473,7 @@ const HistoryView = (props) => {
return (
(curveAccess || tableAccess) && (
<>
<Checkbox checked={child.checked} onChange={(e) => onCheckboxChange(e, child.key, showJustLine)}>
<Checkbox checked={child.checked} onChange={(e) => onCheckboxChange(e, child.key)}>
{child.label}
</Checkbox>
{child.tooltip && (
......@@ -475,7 +490,7 @@ const HistoryView = (props) => {
return (
<div className={classNames(`${prefixCls}-cover`)} style={isChart && isSingle ? {width: '100%'} : {}}>
{
isChart && isSingle ? <>
isChart && isSingle && showBoxOption ? <>
<div className={classNames(`${prefixCls}-label`)}>曲线形态</div>
<Radio.Group value={chartType} style={{marginRight: 16}} onChange={(e) => {
let _value = e.target.value;
......@@ -685,7 +700,7 @@ const HistoryView = (props) => {
return;
}
dateRange.forEach((item) => {
let _showLine = checkboxData.find(item => item.key === 'justLine');
// let _showLine = checkboxData.find(item => item.key === 'justLine');
const param = {
isDilute,
zoom,
......@@ -770,11 +785,12 @@ const HistoryView = (props) => {
/>
) : (
<SimgleChart
showBoxOption={showBoxOption}
curveCenter={curveCenter}
showGridLine={chartGrid}
prefixCls={prefixCls}
dataSource={chartDataSource}
justLine={!!checkboxData.find(item => item.key === 'justLine' && item.checked)}
// justLine={!!checkboxData.find(item => item.key === 'justLine' && item.checked)}
chartType={isBoxPlots ? chartType : null}
contrast={timeValue === 'contrast'}
contrastOption={contrastOption}
......
......@@ -41,7 +41,8 @@ const nameFormatter = (data, contrast, contrastOption, nameWithSensor) => {
*/
const dataAccessor = (data, contrast, contrastOption) => {
const {dataModel} = data;
const formatStr = contrastOption === 'day' ? '2020-01-01 HH:mm:00' : '2020-01-DD HH:mm:00';
let _currentYear = moment().format('YYYY');
const formatStr = contrastOption === 'day' ? `${_currentYear}-01-01 HH:mm:00` : `${_currentYear}-01-DD HH:mm:00`;
return dataModel.filter(item => item.sensorName !== '是否在线').map((item) => {
const time = contrast ? moment(item.pt).format(formatStr) : item.pt;
return [moment(time).valueOf(), item.pv];
......@@ -137,8 +138,8 @@ export const minMaxMarkPoint = (dataItem, index, dataSource) => {
// 只有一个数据曲线时显示markline
if (!dataItem || dataSource.length !== 1) return {};
const data = [];
data.push({type: 'min', name: '最小: '});
data.push({type: 'max', name: '最大: '});
data.push({type: 'min', name: '最小: ',});
data.push({type: 'max', name: '最大: ',});
return {
symbolSize: 1,
symbolOffset: [0, '50%'],
......@@ -252,12 +253,13 @@ const optionGenerator = (dataSource, cusOption, contrast, contrastOption, smooth
const needUnit = _.get(config, 'needUnit', false);
const curveCenter = _.get(config, 'curveCenter', false);
const nameWithSensor = _.get(config, 'nameWithSensor', true);
const showGridLine = _.get(config, 'showGridLine', false);
const showGridLine = _.get(config, 'showGridLine', true);
const showMarkLine = _.get(config, 'showMarkLine', false);
const showPoint = _.get(config, 'showPoint', false);
const deviceAlarmSchemes = _.get(config, 'deviceAlarmSchemes', []);
const chartType = _.get(config, 'chartType', null);
const justLine = _.get(config, 'justLine', false);
// const justLine = _.get(config, 'justLine', false);
const showBoxOption = _.get(config, 'showBoxOption', false);
// 自定义属性
const restOption = _.pick(cusOption, ['title', 'legend']);
......@@ -319,6 +321,7 @@ const optionGenerator = (dataSource, cusOption, contrast, contrastOption, smooth
top: needUnit ? 80 : 60,
left: 10 + leftNum * axisWidth,
right: rightNum === 0 ? 20 : rightNum * axisWidth,
bottom: 60
};
const headTemplate = (param) => {
if (!param) return '';
......@@ -330,6 +333,7 @@ const optionGenerator = (dataSource, cusOption, contrast, contrastOption, smooth
};
const seriesTemplate = (param, unit) => {
if (!param) return '';
console.log(param);
const {value, encode} = param;
// const val = value[encode.y[0]];
const _unit = unit || 'Mpa';
......@@ -339,7 +343,11 @@ const optionGenerator = (dataSource, cusOption, contrast, contrastOption, smooth
<span style="color:${color};margin: 0 5px 0 auto;">${value?.toFixed(3) ?? '-'}</span>
<span style="font-size: 12px;">${_unit}</span>
</div>`;
return `
return param.componentSubType !== 'candlestick' ? `<div style="display: flex; align-items: center;">
<span>${param.seriesName}</span><span style="display:inline-block;">:</span>
<span style="color: ${COLOR.AVG};margin: 0 5px 0 auto;">${value[1] ?? '-'}</span>
<span style="font-size: 12px;">${_unit}</span>
</div>` : `
<div style="display: flex; align-items: center;">
<span>首值</span><span style="display:inline-block;">:</span>
<span style="color: ${COLOR.AVG};margin: 0 5px 0 auto;">${value[1] ?? '-'}</span>
......@@ -376,7 +384,6 @@ const optionGenerator = (dataSource, cusOption, contrast, contrastOption, smooth
tooltipHeader = headTemplate(params);
tooltipContent += seriesTemplate(params, unit);
}
return `
<div>
${tooltipHeader}
......@@ -462,20 +469,22 @@ const optionGenerator = (dataSource, cusOption, contrast, contrastOption, smooth
// }
};
// 增加箱线图的逻辑,单曲线才存在
if (!justLine && chartType) {
if (chartType && showBoxOption) {
if (chartType === 'boxChart') {
const otherData = dataSource?.[0]?.dataModel.map(item => {
const {firstPV, lastPV, maxPV, minPV} = item;
return [firstPV, lastPV, minPV, maxPV]
const {firstPV, lastPV, maxPV, minPV, pt} = item;
return [moment(pt).valueOf(), firstPV, lastPV, minPV, maxPV]
}) || []; //当存在othersData的时候,只是单曲线
xAxis = {type: 'category', data: series[0].data.map(item => moment(item[0]).format('YYYY-MM-DD'))};
// xAxis = {type: 'category', data: series[0].data.map(item => moment(item[0]).format('YYYY-MM-DD HH:mm:ss'))};
xAxis = {type: 'time'};
decorateAxisGridLine(xAxis, showGridLine);
let unit = ''
series = series.map(item => {
if (item.unit) unit = item.unit;
let _item = {...item, symbol: 'none'};
_item.data = _item?.data?.map(d => {
return d[1] || null
}) || [];
/* _item.data = _item?.data?.map(d => {
return d[1] || null
}) || [];*/
return _item;
})
series.push({
......@@ -494,17 +503,26 @@ const optionGenerator = (dataSource, cusOption, contrast, contrastOption, smooth
} else {
let _maxData = [];
let _minData = [];
let _currentYear = moment().format('YYYY');
const formatStr = contrastOption === 'day' ? `${_currentYear}-01-01 HH:mm:00` : `${_currentYear}-01-DD HH:mm:00`;// 用来做同期对比,把日期拉到同一区间
let _maxValues = [];
dataSource?.[0]?.dataModel.forEach(item => {
const {firstPV, lastPV, maxPV, minPV} = item;
_maxData.push(maxPV);
_minData.push(minPV);
const {firstPV, lastPV, maxPV, minPV, pt} = item;
_maxValues.push(maxPV);
let time = contrast ? moment(pt).format(formatStr) : pt;
_maxData.push([moment(time).valueOf(), (maxPV - minPV).toFixed(2)]);
_minData.push([moment(time).valueOf(), minPV]);
}); //当存在othersData的时候,只是单曲线
xAxis = {type: 'category', data: series[0].data.map(item => moment(item[0]).format('YYYY-MM-DD'))};
// xAxis = {type: 'category', data: series[0].data.map(item => moment(item[0]).format('YYYY-MM-DD HH:mm:ss'))};
xAxis = {type: 'time'};
decorateAxisGridLine(xAxis, showGridLine);
let _unit = ''
series = series.map(item => {
_unit = item.unit;
let _item = {...item, symbol: 'none'};
_item.data = _item?.data?.map(d => {
return d[1] || null
}) || [];
/* _item.data = _item?.data?.map(d => {
return d[1] || null
}) || [];*/
return _item;
});
console.log(series);
......@@ -526,8 +544,53 @@ const optionGenerator = (dataSource, cusOption, contrast, contrastOption, smooth
symbol: 'none'
});
})
tooltip = {
formatter: (e) => {
return `<div>
${headTemplate(e[0])}
<div>
<div style="display: flex; align-items: center;">
<span>${e[0].seriesName}</span><span style="display:inline-block;">:</span>
<span style="color: ${COLOR.NORMAL};margin: 0 5px 0 auto;">${e[0]?.value?.[1] ?? '-'}</span>
<span style="font-size: 12px;">${_unit}</span>
</div>
<div style="display: flex; align-items: center;">
<span>最小值</span><span style="display:inline-block;">:</span>
<span style="color: ${COLOR.AVG};margin: 0 5px 0 auto;">${e[1]?.value?.[1] ?? '-'}</span>
<span style="font-size: 12px;">${_unit}</span>
</div>
<div style="display: flex; align-items: center;">
<span>最大值</span><span style="display:inline-block;">:</span>
<span style="color: ${COLOR.AVG};margin: 0 5px 0 auto;">${_maxValues[e[2].dataIndex] ?? '-'}</span>
<span style="font-size: 12px;">${_unit}</span>
</div>
</div>
</div>`
}
}
}
}
restOption.dataZoom = [
{
show: true,
bottom: 10,
start: 0,
end: 100,
height: 28,
type: 'inside',
zoomOnMouseWheel: true
},
{
show: true,
bottom: 10,
start: 0,
end: 100,
height: 28,
type: 'slider',
zoomOnMouseWheel: true
}
];
xAxis.minInterval = 3600 * 1 * 1000
return {
yAxis,
grid,
......
......@@ -2,6 +2,12 @@
All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
## [1.4.3](https://g.civnet.cn:8443/ReactWeb5/wisdom-components/compare/@wisdom-components/ec_quotaselect@1.4.2...@wisdom-components/ec_quotaselect@1.4.3) (2023-05-15)
### Bug Fixes
- 添加参数 禁止选择的数组 ([11de155](https://g.civnet.cn:8443/ReactWeb5/wisdom-components/commits/11de155b41069a8187630d31d491b3ea29ff5a5f))
## [1.4.2](https://g.civnet.cn:8443/ReactWeb5/wisdom-components/compare/@wisdom-components/ec_quotaselect@1.4.1...@wisdom-components/ec_quotaselect@1.4.2) (2023-04-20)
### Bug Fixes
......
{
"name": "@wisdom-components/ec_quotaselect",
"version": "1.4.2",
"version": "1.4.3",
"description": "> TODO: description",
"author": "tuqian <webtuqian@163.com>",
"homepage": "",
......
......@@ -44,10 +44,10 @@ const QuotaSelect = ({
user,
treeProps,
defaultSelect,
disabledList,
}) => {
const { getPrefixCls } = useContext(ConfigProvider.ConfigContext);
const prefixCls = getPrefixCls('ec-quota-select');
const [visible, setVisible] = useState(false);
const [targetValue, setTargetValue] = useState(defaultSelect);
const [allQuotaList, setAllQuotaList] = useState([]);
......@@ -174,7 +174,7 @@ const QuotaSelect = ({
};
useEffect(() => {
const param = confList.filter((child) => child.deviceType === selectDevice.deviceType)[0];
let param = confList.filter((child) => child.deviceType === selectDevice.deviceType)[0];
if (!param)
param = {
deviceType: selectDevice.deviceType,
......@@ -421,8 +421,8 @@ const QuotaSelect = ({
value={item.title}
checked={item.checked}
disabled={
(selectData.length > maximum || selectData.length === maximum) &&
!item.checked
((selectData.length > maximum || selectData.length === maximum) &&
!item.checked)||disabledList.includes(item.title)
}
onChange={(e) => handleCheckboxChange(e, item)}
>
......@@ -481,6 +481,7 @@ QuotaSelect.defaultProps = {
onModalOk: () => {},
onModalClose: () => {},
defaultSelect: 'emphasis',
disabledList:[],
};
QuotaSelect.propTypes = {
......@@ -502,6 +503,7 @@ QuotaSelect.propTypes = {
onModalOk: PropTypes.func,
onModalClose: PropTypes.func,
defaultSelect: PropTypes.string,
disabledList: PropTypes.array,
};
export default QuotaSelect;
......@@ -2,6 +2,19 @@
All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
# [1.6.0](https://g.civnet.cn:8443/ReactWeb5/wisdom-components/compare/@wisdom-components/ec_realtimeinfo@1.5.0...@wisdom-components/ec_realtimeinfo@1.6.0) (2023-05-11)
### Features
- 修改 ([6042094](https://g.civnet.cn:8443/ReactWeb5/wisdom-components/commits/60420943ff1c940403c9b6fd02998b891b0799f7))
# [1.5.0](https://g.civnet.cn:8443/ReactWeb5/wisdom-components/compare/@wisdom-components/ec_realtimeinfo@1.4.18...@wisdom-components/ec_realtimeinfo@1.5.0) (2023-05-11)
### Features
- 修改 ([9169251](https://g.civnet.cn:8443/ReactWeb5/wisdom-components/commits/9169251065c78439f89e3eedc2feee2f8def2acc))
- 修改设备实时数据弹框组件 ([bb203f7](https://g.civnet.cn:8443/ReactWeb5/wisdom-components/commits/bb203f71bea16558ec982dc1ce5fab2868f9f538))
## [1.4.18](https://g.civnet.cn:8443/ReactWeb5/wisdom-components/compare/@wisdom-components/ec_realtimeinfo@1.4.17...@wisdom-components/ec_realtimeinfo@1.4.18) (2023-02-08)
### Bug Fixes
......
{
"name": "@wisdom-components/ec_realtimeinfo",
"version": "1.4.18",
"version": "1.6.0",
"description": "> TODO: description",
"author": "tuqian <webtuqian@163.com>",
"homepage": "",
......
......@@ -53,7 +53,7 @@ const RealTimeInfo = (props) => {
const { getPrefixCls } = useContext(ConfigProvider.ConfigContext);
const prefixCls = getPrefixCls('realtime-info');
const { deviceParams, user, placeholder, defaultTargetValue, modalTitle, buttonText } = props;
const { deviceParams, infoData, user, placeholder, defaultTargetValue, modalTitle, buttonText } = props;
const [isModalVisible, setIsModalVisible] = useState(false);
const [targetValue, setTargetValue] = useState(defaultTargetValue); // 重点/全部
......@@ -110,15 +110,29 @@ const RealTimeInfo = (props) => {
};
const getData = () => {
const deviceType =
deviceParams.length > 0
? Array.from(new Set(deviceParams.map((item) => item.deviceType))).join(',')
: '二供泵房,二供机组';
let deviceType = '';
if (infoData) {
let devices = [infoData.aName];
infoData.child?.forEach(function (val) {
let k = devices.find(function (a) { return a == val.aName });
if (!k) {
devices.push(val.aName);
}
})
deviceType = devices.join(',');
} else {
deviceType =
deviceParams.length > 0
? Array.from(new Set(deviceParams.map((item) => item.deviceType))).join(',')
: '二供泵房,二供机组';
}
const configReq = getMonitorConfig({
params: {
user,
showAll: true,
deviceType,
deviceType: deviceType,
},
});
const sensorReq = getSensorType();
......@@ -325,10 +339,10 @@ RealTimeInfo.defaultProps = {
user: null,
deviceParams: [],
deviceRealInfoParams: {},
deviceConfService: () => {},
pointAddressEntryService: () => {},
sensorTypeService: () => {},
deviceRealInfoService: () => {},
deviceConfService: () => { },
pointAddressEntryService: () => { },
sensorTypeService: () => { },
deviceRealInfoService: () => { },
};
RealTimeInfo.propTypes = {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment