index2.js
4.19 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
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,FunAreaSelect,FunAreaSelectPlus} 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)
}
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'));