index.js
7.08 KB
1
2
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
40
41
42
43
44
45
46
47
48
49
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
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
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'));