Zzreact NPM | npm.io

React 17版本以上的组件封装

flv播放器封装

介绍：支持大屏适配宽度高度百分百，支持视频切换。

解释：只需要传入不同的videoUrl，切换做了处理直接改变videoUrl即可

使用：

import {FlvCom} from "zzreact"
export default class App extends Component {
    constructor() {
        super();
        this.state = {
            videoUrl: ""
        }
    }
    render() {
        let {videoUrl} = this.state
        return <FlvCom videoUrl={videoUrl}></FlvCom>
    }
}

支持多种格式的播放器（基于dplayer封装）

介绍：支持大屏适配，支持移动端，自动播放（要是不能自动播放就是浏览器不支持）支持截图

解释：只需要传入不同的videoUrl，切换做了处理直接改变videoUrl即可（根据url识别视频格式，这里还没有处理，现在只支持）

import {AllVideoCom} from "zzreact"
export default class App extends Component {
    constructor() {
        super();
        this.state = {
            videoUrl: ""
        }
    }
    render() {
        let {videoUrl} = this.state
        return <AllVideoCom videoUrl={videoUrl}></AllVideoCom>
    }
}

支持参数：

<AllVideoCom 
    config={{}}//里面和flv的配置是一样的
    maxCount="5"  //设置重连次数，默认5次
    testingTimer={30} //检测时间
    volume={0}//音量大小静音设置成0
    ></AllVideoCom>

time时间组件封装

介绍：用来大屏展示时间用

解释：可以加入className来自行改变样式

使用：

import {Timer} from "zzreact"

export default class App extends Component {
    render() {//通过下面的className写在css中样式就会生效
        //type可以不传默认YYYY-MM-DD HH:mm:ss
        //也可以改变，规则和moment.js中format的规则一致
        return (<div>
            <Timer className="timerComCssss" type="YYYY-MM-DD HH:mm:ss"></Timer>
            <Timer className="timerComCssss"></Timer>
        </div>)
    }
}

图片请求base64地址组件

介绍：用来请求加密地址用的，支持切换。

解释：传入请求地址和图片的静态路径，切换做了处理直接改变imgUrl即可

使用：

import {ImgCom} from "zzreact"
//httpImg是必穿参数
export default class App extends Component {//默认图片样式宽度100%高度自适应
    constructor(){
        super();
        this.state = {
            imgUrl:"C:/*****"
        }
    }
    render() {
        return (<ImgCom httpImg="http://***"  imgUrl={imgUrl}></ImgCom>)
    }
}

区域选择组件封装

介绍：用来在视频上描绘区域

解释：可以设置模式点击模式和鼠标移动模式，支持移动端手指触摸移动。支持适配百分比会获取父元素的宽高来渲染画布的大小，如果父元素没有默认宽高是100px

点的顺序说明

使用：

import {AreaSelete} from "zzreact"
export default class App extends Component {//默认图片样式宽度100%高度自适应
    constructor(){
        super();
        this.state = {
            serviceData:[[20, 15], [20, 80], [100, 15]]
        }
    }
    change(val){//点发生改变的回调函数  只要点击点在松开就会触发不会判断只有位置移动了才触发可以自行判断
        console.log(val)  //注：当添加了disabled=”true“没有此回调函数
    }
    wenziChange(val){//这个是文字发生变化的然后返回一个新的值
        console.log(val)  //注：当添加了disabled=”true“没有此回调函数
    }
    render() {
        return (<div style={{width:"81.2%",height:"80%"}}>
                    <AreaSelete serviceData={} change={(val)=>this.change(val)} wenziChange={(val)=>this.wenziChange(val)}></AreaSelete>
                </div>)
    }
}

支持传的参数：

//如果一下参数不添加就是默认参数 
<AreaSelete
     mode=""						 //两种模式1.默认空为鼠标移动；2.click是点击模式
     circleRadius="10"       		 //点击圆的半径
     circleBorderWidth="4"      	 //圆边框的宽度
     circleBorderColor="#28B1D9"     //圆边框的颜色
     circleInColor="#28B1D9"		 //圆区域的颜色
     circleSelectColor="#FFF"	 	 //圆选中的颜色
     lineColor="#28B1D9"			 //线的颜色
     lineWidth="2"			 		 //线的宽度
     areaColor="rgba(40, 177, 217, 0.2)"	//选中区域的颜色支持rgba
     disabled="true"                //默认是false如果是true就是不可滑动
     title= ""		  //文字的内容填写就有 \n是换行 添加这个属性的时候注意要 {"sdf\ndsd"}不然没效果
     titleColor="#000"	   //文字的颜色  默认黑色
     titleFont="14px bold 黑体"  //文字的字体
     titleLineHeight=""			//文字的行高  默认和文字行字体大小一样
     position={[10,10]}      //文字的位置0是x  y是一 如果不设置:里面是判断x最大的y最小的值来进行判断
     titleBackgroundColor= ""//字的背景颜色支持rgba（注意这里是disabled为false的时候）
     titlePadding= "10px"   //文字的padding
     titleTextAlign= "center"  //文字居中或者左对齐，只支持在disabled为false的时候
     titleWidth= 100  //字底下背景的宽度
     titleFillColor= ""//字底下背景的颜色（注意这里是disabled为true的时候）
     inputStyle={width:"20px"}//这里是添加input的自定义样式(根据js填写就行)
></AreaSelete>

区域多功能封装

介绍：支持多边形和矩形模式

解释：多边形当绘制完成时点击鼠标右键即可完成就不在绘制，可以进行随意拽动,也可以自行扩展成动态添加多个矩形或者多边形

使用：

import {FunAreaSelect} from "zzreact"
export default class App extends Component {
    change(val){//点位画好就会返回数组，如果是多边形点击右键的时候会返回数组，当数组变化的时候会返回
        //如果是矩形当拉出框的时候就会发生变化返回数组
        //mode不些默认是多边形
        console.log(val)  //注：当添加了disabled=”true“没有此回调函数
    }
    wenziChange(val){//文字发生变化的时候进行改变
        console.log(val)  //注：当添加了disabled=”true“没有此回调函数
    }
    render() {
        return (<div style={{width:"81.2%",height:"80%"}}>
                    <FunAreaSelect wenziChange={(val)=>this.wenziChange(val)} mode="react" change={(val) => this.change(val)}></FunAreaSelect>
                </div>)
    }
}

支持传的参数：

//如果一下参数不添加就是默认参数 
<FunAreaSelect
     mode="polygon"					//两种模式1.多边形；2.react是矩形
     circleRadius="10"       		 //点击圆的半径
     circleBorderWidth="4"      	 //圆边框的宽度
     circleBorderColor="#28B1D9"     //圆边框的颜色
     circleInColor="#28B1D9"		 //圆区域的颜色
     circleSelectColor="#FFF"	 	 //圆选中的颜色
     lineColor="#28B1D9"			 //线的颜色
     lineWidth="2"			 		 //线的宽度
     areaColor="rgba(40, 177, 217, 0.2)"	//选中区域的颜色支持rgba
     disabled="true"                //默认是false如果是true就是不可滑动
     title= ""		  //文字的内容填写就有 \n是换行 添加这个属性的时候注意要 {"sdf\ndsd"}不然没效果
     titleColor="#000"	   //文字的颜色  默认黑色
     titleFont="14px bold 黑体"  //文字的字体
     titleLineHeight=""			//文字的行高  默认和文字行字体大小一样
     position={[10,10]}      //文字的位置0是x  y是一 如果不设置:里面是判断x最大的y最小的值来进行判断
     titleBackgroundColor= ""//字的背景颜色支持rgba
     titlePadding= "10px"   //文字的padding
     titleTextAlign= "center"  //文字居中或者左对齐，只支持在disabled为false的时候
     titleWidth= 100  //字底下背景的宽度
     titleFillColor= ""//字底下背景的颜色
></FunAreaSelect>

升级版区域选择

介绍：继承选区多功能的基础上进行封装，拥有按钮可以自定义样式

解释：如果觉的不好用也可以自行封装，用里ref可以直接调用里面的方法

（注意：如果你不自己封装就不用看这个）

this.refs这里是帮定的ref.myRef可以取出canvas中的元素可以打印出来看下

this.refs这里是帮定的ref.myRef.selectBox(x,y)这个方法是判断点击是否点击到点上

this.refs这里是帮定的ref.isNull()这个方法是判断你的画布是否为空用于你添加的时候看看是否允许你添加

this.refs这里是帮定的ref.clickIt("react")//这里是添加矩形也可以添加多边形

this.refs这里是帮定的ref.delete()//可以删除图形

使用：

import {FunAreaSelectPlus} from "zzreact"
export default class App extends Component {
 	constructor() {
        super();
        this.state = {
            list: []//可以设置初始值 传的数据要是这个格式    
            //{id:new Date().getTime()+""+item.id,
          	//mode:"react",
          	//serviceData:item.coordinate}
        }
    }
    changeSelect(val) {//修改完的list传到父组件中
        this.setState({
            list:val
        })
    }
    wenziChange(val,index){//修改文字后放入里面  第一个值是修改后的值，后面的index是修改list中的索引
        var {list} = this.state
        list[index].title = val 
        this.setState({
            list:list
        },()=>{
            console.log(this.state.list)
        })
    }
    delete(selectIndex){//删除的id会返回给父组件
        let {list} = this.state
        list = list.filter(item=>item.id!==selectIndex)
        this.setState({list:list})
    }
    err(falg,msg){//当画布为空的时候，绘画进行行中的时候，会返回状态和错误的消息
        console.log(falg,msg)
    }
    render() {
        return (<div style={{width:"81.2%",height:"80%"}}>
                    <FunAreaSelectPlus list={list}
                        wenziChange={(val,index) => { this.wenziChange(val,index)}}
                        change={(val) => { this.changeSelect(val)}} delete={(selectIndex)=>{this.delete(selectIndex)}} err={(falg,msg)=>{this.err(falg,msg)}}></FunAreaSelectPlus>
                </div>)
    }
}

支持传的参数：

//如果一下参数不添加就是默认参数 
<FunAreaSelectPlus
     circleRadius="10"       		 //点击圆的半径
     circleBorderWidth="4"      	 //圆边框的宽度
     circleBorderColor="#28B1D9"     //圆边框的颜色
     circleInColor="#28B1D9"		 //圆区域的颜色
     circleSelectColor="#FFF"	 	 //圆选中的颜色
     lineColor="#28B1D9"			 //线的颜色
     lineWidth="2"			 		 //线的宽度
     areaColor="rgba(40, 177, 217, 0.2)"	//选中区域的颜色支持rgba
     disabled="true"                //默认是false如果是true就是不可滑动
     title= ""		  //文字的内容填写就有 \n是换行 添加这个属性的时候注意要 {"sdf\ndsd"}不然没效果
     titleColor="#000"	   //文字的颜色  默认黑色
     titleFont="14px bold 黑体"  //文字的字体
     titleLineHeight=""			//文字的行高  默认和文字行字体大小一样
     position={[10,10]}      //文字的位置0是x  y是一 如果不设置:里面是判断x最大的y最小的值来进行判断
     titleBackgroundColor= ""//字的背景颜色支持rgba
     titlePadding= "10px"   //文字的padding
     titleTextAlign= "center"  //文字居中或者左对齐，只支持在disabled为false的时候
     titleWidth= 100  //字底下背景的宽度
     titleFillColor= ""//字底下背景的颜色
></FunAreaSelectPlus>

动画(轮播进入动画)

介绍：能设置三个参数，动画每次滚动的时间，展示的数量，和每个元素左面的间隔

import React, { Component } from "react"
export default class App extends Component {
    constructor() {
        super();
        this.state = {
            listArr: [
                {
                    id: new Date().getTime(),
                    imgSrc: "***/img/envMonitorBj.png",
                    contant: "你好"
                }
            ]
        }
    }
 	componentDidMount() {
        var ws = new WebSocket('ws://***/ws');
        ws.onopen = function () { }
        ws.onmessage =  (e) =>{
            var data = JSON.parse(e.data)
            let {listArr} = this.state;
            listArr.push(data)
            this.setState({
                listArr
            })
        }
    }
    render() {
        return (<div> 
                <TransitionCom>
                    {
                        listArr.map((item,index)=>{
                            return (<div key={index}>
                                <img src={item.imgSrc} alt=""></img>
                                <p>{item.contant}</p>
                            </div>)
                        })
                    }
                </TransitionCom> 
            </div>)
    }
}

<TransitionCom 
    count={3} //展示的数量
    leftSpance={1} //和左面的间距按百分比算
    timeSlide={1}  //每次滑动的时间是按秒算的
>
</TransitionCom>

mqtt封装使用（基于promise）

介绍：根据mqtt.js封装

import {Mqtt} from "zzreact"
export default class App extends Component {
 	componentDidMount() {
        var mqtt = new Mqtt("xx.xx.xx.xx:4545");
        mqtt.link().then((client) => {//封装成promsie方便使用  
            //client这里保留了原生的client函数和用法(也就是mqtt.js原生的使用)
            var ClientID = mqtt.random();//这里我内置了随机数，可以直接使用
            var topicOne = "xxx/xxx"
            var sendMess = { //这就是要传给后端的参数
                MessageId: topicOne,
                TopicId: topicOne,
                Time: new Date().getTime(),
                CompanyId: "xxxx",
                ClientID: ClientID,//这个mqtt是生成随机生成的随机数
                //当然要想申请新的随机数可以mqtt.random()
            };
            // mqtt.subscribe(topic);//订阅主题
            mqtt.subscribe(topicOne + "/" + ClientID);//订阅主题
            mqtt.publish(topicOne, sendMess, { qos: 0 })//向某个主题发送消息
            mqtt.message((data, topic) => {//接收消息，跟据返回的主题可以确定是哪个主题给的消息
                if (topic === topicOne + "/" + ClientID) {
                    console.log(data)//这里就是该主题传来的结果
                    mqtt.unsubscribe(topicOne + "/" + ClientID)
                }
            });

        });
    }
    render() {
        return (<div> 123 </div>)
    }
}

api介绍：

//topicOne这个变量就是一个主题名，相当与接口的那种地址xxx/xxx
var mqtt = new Mqtt("xx.xx.xx.xx:4545");//这里填入端口和ip即可
mqtt.link().then(client=>{})//这是mqtt  这是一个promise对象  client这个是mqtt.js原生对象
mqtt.subscribe(topicOne);//订阅主题
mqtt.publish(topicOne, {}, { qos: 0 })//向某个主题发送消息（主题名，参数（json），qos等的设置）
mqtt.message((data, topic) => {//接收消息，跟据返回的主题可以确定是哪个主题给的消息
    if (topic === topicOne ) {//判断一下是哪个主题反给你的消息
        console.log(data)//这里就是该主题传来的结果，后端给的结果
    }
})
mqtt.unsubscribe(topicOne)//这是注销主题的方法

获取地址栏中http://localhost:8080/?id=454参数信息

import {getQuery} from "zzreact"
export default class App extends Component {
 	componentDidMount() {
        console.log(getQuery(id))
    }
    render() {
        return (<div> 123 </div>)
    }
}

延时获取cookie基于promise

介绍：有时候大屏跳转的时候不能马上就出现cookie会有延时

import {getCookie} from "zzreact"
export default class App extends Component {
 	componentDidMount() {
        getCookie("a").then(res=>{//获取成功
            console.log(res)
        }).catch(err=>{//获取失败
            console.log(err)
        })
    }
    render() {
        return (<div> 123 </div>)
    }
}

api介绍

getCookie("a",10,200).then(res=>{//获取成功   getCookie(cookie的名字,最大链接次数,每次链接时间)
    console.log(res)//成功 会返回cookie
}).catch(err=>{//获取失败
    console.log(err)//失败  返回获取失败
})

dplayer flv.js mqtt

@infinitebrahmanuniverse/nolb-zz

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago