src/index.js

import React, { Component, createRef } from 'react';
import ReactDOM from 'react-dom';
import { FunAreaSelectPlus, FlvCom,AllVideoCom } from "./components"
// import { FunAreaSelectPlus, FlvCom, AllVideoCom } from "../dist/index"
import { Select, Button } from 'antd';
import 'antd/dist/antd.css';
import axios from "axios"
import './App.css';
const { Option } = Select;
axios.defaults.baseURL = "http://192.168.10.144:8083"
var companyIdAll = "2fe2a70a-fa66-4233-9179-89e3531209d7"
export default class App extends Component {
  constructor() {
    super();
    this.state = {
      list: [],//可以设置初始值
      options: [],
      optionsTwo: [],
      valueOne: "",
      valueTwo: "",
      videoUrl: "",
      key: new Date().getTime(),
    }
    this.funAreaSelectPlus = createRef();
  }
  componentDidMount() {
    this.getOptionOne()
  }
  getdian(companyId, deviceId) {
    axios.get("/site_config/get", {
      params: {
        companyId: companyId,
        deviceId: deviceId
      }
    }).then(res => {
      var content = JSON.parse(res.data.resInfo.content)
      window.addEventListener("resize", () => {
        var contentStr1 = content.map(item => {
          return {
            id: item.id,
            mode: "react",
            title: "点位" + item.id,
            serviceData: this.getFenbial(JSON.parse(item.coordinate), "show")
          }
        })
        this.setState({ list: contentStr1 })
      })
      var contentStr = content.map(item => {
        return {
          id: item.id,
          mode: "react",
          title: "点位" + item.id,
          serviceData: this.getFenbial(JSON.parse(item.coordinate), "show")
        }
      })
      if (this.state.videoUrl !== res.data.resInfo.url) {
        // this.setState({ videoUrl: res.data.resInfo.url })
        this.setState({ videoUrl: res.data.resInfo.url })
      }
      this.setState({ list: contentStr, key: new Date().getTime() })
    })
  }
  getFenbial(data, type) {
    var changeXPx = 1080, changeYPx = 1920;
    var width = document.getElementById("kuangneiCon11").offsetWidth;
    var height = document.getElementById("kuangneiCon11").offsetHeight;
    if (type === "show") {//展示
      return data.map(item => {
        return [((item[0] / changeXPx) * width).toFixed(2), ((item[1] / changeYPx) * height).toFixed(2)]
      })
    } else {//储存的时候
      return data.map(item => {
        return [((item[0] / width) * changeXPx).toFixed(2), ((item[1] / height) * changeYPx).toFixed(2)]
      })
    }
  }
  getOptionOne() {
    axios.get("/site_config/selectSite", {
      params: {
        companyId: companyIdAll
      }
    }).then(res => {
      this.setState({ options: res.data.reInfo, valueOne: res.data.reInfo[0].companyId }, () => {
        this.getOptionTwo(res.data.reInfo[0].companyId)
      })
    })
  }
  getOptionTwo(companyId) {
    axios.get("/site_config/selectDevices", {
      params: {
        companyId: companyId
      }
    }).then(res => {
      this.setState({ optionsTwo: res.data.reInfo, valueTwo: res.data.reInfo[0].deviceId }, () => {
        this.getdian(this.state.valueOne, this.state.valueTwo)
      })
    })
  }
  changeSelect(val) {//修改完的list传到父组件中
    this.setState({
      list: val
    })
  }
  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)
  }
  optionsOneSelect(e) {
    this.getOptionTwo(e)
    this.setState({ valueOne: e })
  }
  optionsTwoSelect(e) {
    this.setState({ valueTwo: e }, () => {
      this.getdian(this.state.valueOne, this.state.valueTwo)
    })
  }
  baocun() {
    let { list, valueOne, valueTwo } = this.state;
    var content = list.map(item => {
      return {
        id: item.title ? item.title.replace(/[^0-9]/ig, "") : item.id,
        coordinate: JSON.stringify(this.getFenbial(item.serviceData))
      }
    })
    axios.post("/site_config/update", {
      companyId: valueOne,
      deviceId: valueTwo,
      content: JSON.stringify(content)
    }).then(res => {
      this.getdian(this.state.valueOne, this.state.valueTwo)
    })
  }
  wenziChange(val, index) {
    let { list } = this.state;
    list[index].title = val;
    this.setState({ list: list })
  }
  changea() {
    if (this.state.videoUrl !== "http://27.128.170.246:8888/httpflvlive?app=lskjapp&stream=2200001201000901.flv") {
      this.setState({
        videoUrl: "http://27.128.170.246:8888/httpflvlive?app=lskjapp&stream=2200001201000901.flv"
      })
    } else {
      this.setState({
        videoUrl: "http://27.128.170.246:8888/httpflvlive?app=lskjapp&stream=2200001201001101.flv"
      })
    }
  }
  render() {
    let { list, options, optionsTwo, valueOne, valueTwo, videoUrl, key } = this.state
    var VideoS = `[{"CameraName":"枪机65","OnLine":1,"VideoUrl":"http://27.128.170.246:8888/httpflvlive?app=lskjapp&stream=2200001201001101.flv"},{"CameraName":"球机4","OnLine":1,"VideoUrl":"http://27.128.170.246:8888/httpflvlive?app=lskjapp&stream=2200001201000D01.flv"},{"CameraName":"枪机66","OnLine":1,"VideoUrl":"http://27.128.170.246:8888/httpflvlive?app=lskjapp&stream=2200001201001201.flv"},{"CameraName":"球机6","OnLine":1,"VideoUrl":"http://27.128.170.246:8888/httpflvlive?app=lskjapp&stream=2200001201000901.flv"},{"CameraName":"球机5","OnLine":1,"VideoUrl":"http://27.128.170.246:8888/httpflvlive?app=lskjapp&stream=2200001201000E01.flv"},{"CameraName":"枪机67","OnLine":1,"VideoUrl":"http://27.128.170.246:8888/httpflvlive?app=lskjapp&stream=2200001201001301.flv"}] `
    return (
      <div className="all">
        <header>
          <div className="title">配置平台</div>
        </header>
        <div className="xialakuang">
          <div>
            <Select value={valueOne} style={{ width: 140 }} onChange={(e) => this.optionsOneSelect(e)}>
              {
                options.map((item, index) => { return <Option key={item.companyId + index} value={item.companyId}>{item.companyName}</Option> })
              }
            </Select>
          </div>
          <div>
            <Select value={valueTwo} style={{ width: 140 }} onChange={(e) => this.optionsTwoSelect(e)}>
              {
                optionsTwo.map(item => { return <Option key={item.deviceId} value={item.deviceId}>{item.deviceName}</Option> })
              }
            </Select>
          </div>
          <div style={{ width: 140 }}>
            <Button type="primary" onClick={() => { this.funAreaSelectPlus.current.clickIt("react") }} shape="round">
              添加矩形
            </Button>
          </div>
          <div style={{ width: 140 }}>
            <Button type="primary" shape="round">
              保存
            </Button>
          </div>
          <div style={{ width: 140 }}>
            <Button type="primary" danger onClick={() => { this.funAreaSelectPlus.current.delete() }} shape="round">
              删除
            </Button>
          </div>
          <button onClick={() => this.changea()}>点击</button>
        </div>
        <div id="kuangneiCon11" >
          {JSON.parse(VideoS).map((item,index)=>{
            return <div key={index} style={{width:"10%",position:"relative",float:"left",height:"100%"}}><AllVideoCom videoUrl={item.VideoUrl}></AllVideoCom></div> 
          })}
          {/* <AllVideoCom videoUrl={videoUrl}></AllVideoCom> */}
          {/* <FlvCom videoUrl={videoUrl}></FlvCom> */}
          {/* <FunAreaSelectPlus titleColor="#FFF"
            ref={this.funAreaSelectPlus}
            key={key}
            list={list} wenziChange={(val, index) => this.wenziChange(val, index)}
            titleTextAlign="left"
            titleWidth="100"
            change={(val) => { this.changeSelect(val) }} delete={(selectIndex) => { this.delete(selectIndex) }} err={(falg, msg) => { this.err(falg, msg) }}></FunAreaSelectPlus> */}
        </div>
      </div>
    )
  }
}
ReactDOM.render(<App />, document.getElementById('root'));