src/index.js

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import { FlvCom, Timer, ImgCom, AreaSelete, FunAreaSelect, FunAreaSelectPlus, Mqtt, getQuery, getCookie, TransitionCom,AllVideoCom } from "./components/index"
// import {FlvCom,Timer,ImgCom,AreaSelete,FunAreaSelect,FunAreaSelectPlus, Mqtt,getQuery,getCookie,TransitionCom} from "../dist/index.js"
class App extends Component {
    constructor() {
        super();
        this.state = {
            imgUrl: "C:/imagelib/imgalarm/2020/12/21/192.168.166.155/192.168.166.155_00_20201221181716755_ALARM_210_9891_HEL_SNAP.jpg",
            serviceData: [[431, 55], [479, 55], [481, 107], [435, 107]],
            arr: [
                {
                    id: "1", title: "点位1", num: 5, serviceData: [
                        ["95.16", "13.60"],
                        ["126.40", "13.37"],
                        ["127.37", "28.82"],
                        ["95.65", "28.59"]]
                },
                {
                    id: "2", title: "点位2", num: 5, serviceData: [
                        ["210.34", "12.68"],
                        ["233.76", "12.68"],
                        ["234.74", "24.67"],
                        ["212.29", "24.67"]
                    ]
                },
                {
                    id: "3", title: "点位3", num: 5, serviceData: [
                        ["256.21", "29.51"],
                        ["283.05", "29.51"],
                        ["282.08", "41.50"],
                        ["257.19", "41.50"]
                    ]
                },
            ],
            serviceData2: [],
            list: [{ "id": "1", title: "点位1", "mode": "polygon", "serviceData": [[323, 76], [336, 195], [617, 151], [452, 45]] }, { "id": "2", title: "点位1\n偏移量：10mm", "mode": "react", "serviceData": [[615, 379], [615, 254], [309, 254], [309, 379]] }],
            listArr: [
                {
                    id: new Date().getTime(),
                    imgSrc: "http://182.92.117.176:8081/shixun/img/envMonitorBj.png",
                    contant: "你好"
                }
            ]
            // lsit:[]
        }
    }
    wenziChange(val, index) {
        var { list } = this.state
        list[index].title = val
        this.setState({
            list: list
        }, () => {
            console.log(this.state.list)
        })
    }
    changeSelect(val) {//保存后把最后一个放入这个list中储存，这样可以判断是否储存，点击的时候是否在点内
        this.setState({
            list: val
        })
    }
    delete(selectIndex) {
        let { list } = this.state
        list = list.filter(item => item.id !== selectIndex)
        this.setState({ list: list })
    }
    baocun() {
        let { list } = this.state
        this.setState({
            list: list
        })
    }
    err(falg, msg) {
        console.log(falg, msg)
    }
    componentDidMount() {
        // var ws = new WebSocket('ws://localhost:3001/ws');
        // ws.onopen = function () { }
        // ws.onmessage =  (e) =>{
        //     var data = JSON.parse(e.data)
        //     let {listArr} = this.state;
        //     listArr.push(data)
        //     this.setState({
        //         listArr
        //     })
        // }
        // getCookie("a").then(res=>{
        //     console.log(res)
        // }).catch(err=>{
        //     console.log(err)
        // })
        // console.log(getQuery("id"))
        // var mqtt = new Mqtt("112.125.25.140:8183");
        // mqtt.link().then((client) => {//封装成promsie方便使用  
        //     //client这里保留了原生的client函数和用法(也就是mqtt.js原生的使用)
        //     var ClientID = mqtt.random();
        //     var topicOne = "CompayInfo/GetAllSiteData"
        //     var sendMess = { //这就是要传给后端的参数
        //         MessageId: topicOne,
        //         TopicId: topicOne,
        //         Time: new Date().getTime(),
        //         CompanyId: "6f87622b-5148-433a-ad33-106785e78de6",
        //         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() {
        let { imgUrl, serviceData, serviceData2, arr, list,listArr } = this.state;
        return (
            <div style={{
                width: "1000px", height: "100%",
                margin:"0 auto",
                position:"relative"
            }}>
                {/* <AllVideoCom videoUrl="http://8.131.254.61:8888/httpflvlive?app=lskjapp&stream=2200001201000B01.flv"></AllVideoCom> */}
                {/* <TransitionCom>
                    {
                        listArr.map((item,index)=>{
                            return (<div key={index}>
                                <img src={item.imgSrc} alt=""></img>
                                <p>{item.contant}</p>
                            </div>)
                        })
                    }
                </TransitionCom> */}
                {/* <button onClick={() => this.baocun()}>保存</button>
                <FunAreaSelectPlus list={list}
                    placeholder="请输入点位编号"
                    inputStyle={{ width: "50px" }}
                    areaColor="rgba(15, 62, 166, 0.2)"
                    change={(val) => { this.changeSelect(val) }}
                    wenziChange={(val, index) => { this.wenziChange(val, index) }}
                    delete={(selectIndex) => { this.delete(selectIndex) }}
                    err={(falg, msg) => { this.err(falg, msg) }}></FunAreaSelectPlus> */}
                {/* <button onClick={() => this.clickIt()}>添加</button> */}
                <div id="waiceng" style={{ width: "81.2%", height: "80%", position: "relative" }}>
                    {
                        arr.map(item => {
                            return (<AreaSelete key={item.id}
                                serviceData={item.serviceData} 
                                change={(val) => this.changeSelect(val)}></AreaSelete>)
                        })
                    }
                </div>
                {/* <ImgCom httpImg="http://112.125.25.140:8083/syboxms/getImgDataByPath"  imgUrl={imgUrl}></ImgCom> */}
                {/* <FlvCom videoUrl="http://27.128.170.246:8888/httpflvlive?app=lskjapp&stream=2200001201001501.flv"></FlvCom> */}
                {/* <Timer className="timerComCssss" type="YYYY-MM-DD HH:mm:ss"></Timer>  */}
            </div>
        )
    }
}
ReactDOM.render(<App />, document.getElementById('root'));