Blame view

src/index.js 5.75 KB
de70de77   Zhang Zhuo   更新使用小功能 -张卓
1
  import React, { Component } from 'react';
f248ca05   Zhang Zhuo   初始化版本 -张卓
2
  import ReactDOM from 'react-dom';
de70de77   Zhang Zhuo   更新使用小功能 -张卓
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
  // import { FlvCom, Timer, ImgCom, AreaSelete, FunAreaSelect, FunAreaSelectPlus, Mqtt,getQuery,getCookie} from "./components/index"
  import {FlvCom,Timer,ImgCom,AreaSelete,FunAreaSelect,FunAreaSelectPlus, Mqtt,getQuery,getCookie} 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]] }]
              // lsit:[]
          }
42886855   Zhang Zhuo   更改保存下 -张卓
40
      }
de70de77   Zhang Zhuo   更新使用小功能 -张卓
41
42
43
44
45
46
47
      wenziChange(val, index) {
          var { list } = this.state
          list[index].title = val
          this.setState({
              list: list
          }, () => {
              console.log(this.state.list)
a031df93   Zhang Zhuo   更新视频稳定版本 -张卓
48
          })
42886855   Zhang Zhuo   更改保存下 -张卓
49
      }
de70de77   Zhang Zhuo   更新使用小功能 -张卓
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
      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() {
          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 } = this.state;
          return (
              <div style={{
                  width: "1000px", height: "100%"
              }}>
                  {/* <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 vidoeUrl=""></FlvCom>
                  <Timer className="timerComCssss" type="YYYY-MM-DD HH:mm:ss"></Timer>  */}
76d17fa3   Zhang Zhuo   更新bug -张卓
129
  
de70de77   Zhang Zhuo   更新使用小功能 -张卓
130
131
              </div>
          )
a031df93   Zhang Zhuo   更新视频稳定版本 -张卓
132
      }
f248ca05   Zhang Zhuo   初始化版本 -张卓
133
  }
de70de77   Zhang Zhuo   更新使用小功能 -张卓
134
135
  
  ReactDOM.render(<App />, document.getElementById('root'));