Zhang Zhuo / ObjectEVEComponents

  import React, { Component } from 'react';

  import ReactDOM from 'react-dom';

  import { FlvCom, Timer, ImgCom, AreaSelete, FunAreaSelect, FunAreaSelectPlus } from "./components/index"

  // import {FlvCom,Timer,ImgCom,AreaSelete} 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": 1608808157114, "mode": "polygon", "serviceData": [[323, 76], [336, 195], [617, 151], [452, 45]] }, { "id": 1608808178878, "mode": "react", "serviceData": [[615, 379], [615, 254], [309, 254], [309, 379]] }]

          }
      }

      changeSelect(val) {//保存后把最后一个放入这个list中储存，这样可以判断是否储存，点击的时候是否在点内

          this.setState({

              list:val

          })
      }

      render() {

          let { imgUrl, serviceData, serviceData2, arr, list } = this.state;

          return (
              <div style={{

                  width: "1000px", height: "100%"

              }}>

                  <FunAreaSelectPlus list={list} change={(val) => { this.changeSelect(val) }}></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} 
                                  title={item.title+"\n偏移量:"+item.num} change={(val) => this.changeSelect(val)}></AreaSelete>)

                          })

                      }
                  </div> */}

                  {/* <ImgCom httpImg="http://112.125.25.140:8083/syboxms/getImgDataByPath"  imgUrl={imgUrl}></ImgCom> */}
                  {/* <FlvCom vidoeUrl=""></FlvCom>
                  <Timer className="timerComCssss" type="YYYY-MM-DD HH:mm:ss"></Timer>  */}

              </div>
          )
      }
  }
  
  ReactDOM.render(<App />, document.getElementById('root'));