index.js
5.75 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
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
// 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:[]
}
}
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() {
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> */}
</div>
)
}
}
ReactDOM.render(<App />, document.getElementById('root'));