Blame view

src/components/funAreaSelectPlus/funAreaSelectPlus.js 7.63 KB
e2460342   Zhang Zhuo   更改 -张卓
1
2
3
4
5
6
7
  import React, { Component } from 'react';
  import FunAreaSelect from "../funAreaSelect/funAreaSelect.js"
  export default class FunAreaSelectPlus extends Component {
      constructor() {
          super();
          this.state = {
              id: new Date().getTime() + "waiceng",
e2460342   Zhang Zhuo   更改 -张卓
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
              disabled: "false",//判断是否可以移动  false是可以移动
              circleRadius: 5,//圆半径
              circleBorderWidth: 2,//圆边线的半径宽
              circleBorderColor: "#28B1D9",//圆边线的颜色
              circleInColor: "#28B1D9",//圆里里面的颜色
              circleSelectColor: "#FFF",
              lineColor: "#28B1D9",//线的颜色
              lineWidth: 2,//线的宽度
              areaColor: "rgba(40, 177, 217, 0.2)",//选中区域颜色
              disabled: "false",//判断是否可以移动  false是可以移动
              title: "",//文字的内容
              titleColor: "#000",//文字的颜色
              titleFont: "14px bold 黑体",//文字的字体
              titleLineHeight: "",//文字的行高
              position: [10, 10],//文字的位置
          }
      }
      static getDerivedStateFromProps(props, state) {
          var obj = {};
          for (var key in props) {
              if (props[key] && props[key] !== state[key]) {
42886855   Zhang Zhuo   更改保存下 -张卓
29
                  if (typeof props[key] === "object") {
e2460342   Zhang Zhuo   更改 -张卓
30
                      obj[key] = JSON.parse(JSON.stringify(props[key]))
42886855   Zhang Zhuo   更改保存下 -张卓
31
                  } else {
e2460342   Zhang Zhuo   更改 -张卓
32
33
                      obj[key] = props[key]
                  }
e2460342   Zhang Zhuo   更改 -张卓
34
35
36
37
38
39
40
41
42
              }
          }
          if (Object.keys(obj).length > 0) {
              return obj;
          } else {
              return null
          }
      }
      componentDidMount() {
42886855   Zhang Zhuo   更改保存下 -张卓
43
44
45
46
          let {list} = this.props;
          if(list&&list.length>0){
              this.selectIndex = list[list.length - 1].id;
          }
e2460342   Zhang Zhuo   更改 -张卓
47
48
          this.selectArea();
      }
42886855   Zhang Zhuo   更改保存下 -张卓
49
50
51
52
53
      clickIt(mode) {
          let { list } = this.props;
          var id = new Date().getTime()
          if (!list||list.length === 0) {
              list = []
e2460342   Zhang Zhuo   更改 -张卓
54
              list.push({
42886855   Zhang Zhuo   更改保存下 -张卓
55
56
                  id: id,
                  mode: mode
e2460342   Zhang Zhuo   更改 -张卓
57
              })
42886855   Zhang Zhuo   更改保存下 -张卓
58
              this.selectIndex = id;
e2460342   Zhang Zhuo   更改 -张卓
59
          } else {
42886855   Zhang Zhuo   更改保存下 -张卓
60
61
              var boo = this[list[list.length - 1].id + list[list.length - 1].mode].isNull()//判断画布是否为空
  
e2460342   Zhang Zhuo   更改 -张卓
62
              if (boo) {//画布为空
42886855   Zhang Zhuo   更改保存下 -张卓
63
                  this.props.err(false,"画布为空,请先绘制在添加。")
e2460342   Zhang Zhuo   更改 -张卓
64
              } else if (!list[list.length - 1].serviceData) {
42886855   Zhang Zhuo   更改保存下 -张卓
65
                  this.props.err(false,"画布没有保存,请先绘制完成在添加")
e2460342   Zhang Zhuo   更改 -张卓
66
              } else {
42886855   Zhang Zhuo   更改保存下 -张卓
67
68
69
70
71
                  list.push({
                      id: id,
                      mode: mode
                  })
                  this.selectIndex = id;//这个地方是用来判断当前点击或者添加的第几个,通过这个控制着list父子组件的同时赋值
e2460342   Zhang Zhuo   更改 -张卓
72
73
              }
          }
42886855   Zhang Zhuo   更改保存下 -张卓
74
75
76
77
          this.props.change(list)
      }
      delete(){
          this.props.delete(this.selectIndex,"发出删除指令")
e2460342   Zhang Zhuo   更改 -张卓
78
79
      }
      change(val) {//保存后把最后一个放入这个list中储存,这样可以判断是否储存,点击的时候是否在点内
42886855   Zhang Zhuo   更改保存下 -张卓
80
81
82
83
84
85
86
          let { list } = this.props;
          list  = list.map(item=>{
              if(item.id === this.selectIndex){
                  item.serviceData = JSON.parse(JSON.stringify(val));
              }
              return item
          })
e2460342   Zhang Zhuo   更改 -张卓
87
88
89
          this.props.change(list)
      }
      selectArea() {//选中区域z-index应该增大放在最上面
42886855   Zhang Zhuo   更改保存下 -张卓
90
          let { id } = this.state;
e2460342   Zhang Zhuo   更改 -张卓
91
92
          var waiceng = document.getElementById(id);
          waiceng.onclick = (e) => {
42886855   Zhang Zhuo   更改保存下 -张卓
93
94
              // let { list } = this.state;
              let list = this.props.list//这里用里this.list因为有时候在change中setState不好使不能设置list怀疑是this指向问题但是打印出来没什么问题所以还没解决
e2460342   Zhang Zhuo   更改 -张卓
95
96
97
              var left = e.layerX
              var top = e.layerY
              this.indexflag = false;//这里是为了防止点击到重复的区域导致无法选区的情况
42886855   Zhang Zhuo   更改保存下 -张卓
98
99
100
101
102
103
104
105
106
107
108
109
110
              if(list){
                  for (var i = 0; i < list.length; i++) {
                      if (list[i].serviceData) {
                          var myRef = this[list[i].id + list[i].mode].state.id;//获取内部id
                          if (this.isInPolygon([left, top], JSON.parse(JSON.stringify(list[i].serviceData)), this[list[i].id + list[i].mode][myRef])) {//选中之后放在最上层
                              var id = this[list[i].id + list[i].mode][myRef].state.id
                              if (this.indexflag) {
                                  document.getElementById(id).style.zIndex = 0
                              } else {
                                  document.getElementById(id).style.zIndex = 99
                                  this.selectIndex = list[i].id;
                                  this.indexflag = true
                              }
e2460342   Zhang Zhuo   更改 -张卓
111
                          } else {
42886855   Zhang Zhuo   更改保存下 -张卓
112
113
                              var id = this[list[i].id + list[i].mode][myRef].state.id
                              document.getElementById(id).style.zIndex = 0
e2460342   Zhang Zhuo   更改 -张卓
114
                          }
e2460342   Zhang Zhuo   更改 -张卓
115
116
117
118
119
                      }
                  }
              }
          }
      }
42886855   Zhang Zhuo   更改保存下 -张卓
120
121
122
123
124
125
126
127
128
      isInPolygon(point, vs, childEl) {//判断多边形是否在点内
          var x = point[0], y = point[1];
          var inside = false;
          for (var i = 0, j = vs.length - 1; i < vs.length; j = i++) {
              var xi = vs[i][0], yi = vs[i][1];
              var xj = vs[j][0], yj = vs[j][1];
              var intersect = ((yi > y) != (yj > y))
                  && (x < (xj - xi) * (y - yi) / (yj - yi) + xi);
              if (intersect) inside = !inside;
e2460342   Zhang Zhuo   更改 -张卓
129
          }
42886855   Zhang Zhuo   更改保存下 -张卓
130
131
          if (!intersect) {
              if (childEl.selectBox(point[0], point[1])) {
e2460342   Zhang Zhuo   更改 -张卓
132
133
                  return true;
              }
e2460342   Zhang Zhuo   更改 -张卓
134
          }
42886855   Zhang Zhuo   更改保存下 -张卓
135
          return inside;
e2460342   Zhang Zhuo   更改 -张卓
136
137
      }
      render() {
42886855   Zhang Zhuo   更改保存下 -张卓
138
          let { id, disabled, circleRadius,
e2460342   Zhang Zhuo   更改 -张卓
139
140
141
142
143
144
145
146
147
148
149
150
              circleBorderWidth,
              circleBorderColor,
              circleInColor,
              circleSelectColor,
              lineColor,
              lineWidth,
              areaColor,
              title,
              titleColor,
              titleFont,
              titleLineHeight,
              position } = this.state;
42886855   Zhang Zhuo   更改保存下 -张卓
151
          let {list} = this.props
e2460342   Zhang Zhuo   更改 -张卓
152
153
          return (
              <div id={id} style={{ width: "100%", height: "100%", position: "relative" }}>
42886855   Zhang Zhuo   更改保存下 -张卓
154
155
156
                  <button style={{ position: "absolute", right: "-70px", top: "0" }} onClick={() => this.clickIt("react")}>添加矩形</button>
                  <button style={{ position: "absolute", right: "-83px", top: "40px" }} onClick={() => this.clickIt("polygon")}>添加多边形</button>
                  <button style={{ position: "absolute", right: "-43px", top: "80px" }} onClick={() => this.delete()}>删除</button>
e2460342   Zhang Zhuo   更改 -张卓
157
                  {
42886855   Zhang Zhuo   更改保存下 -张卓
158
                     list&&list.map((item, index) => {
e2460342   Zhang Zhuo   更改 -张卓
159
160
161
162
163
164
165
166
167
168
                          return <FunAreaSelect
                              disabled={disabled}
                              circleRadius={circleRadius}
                              circleBorderWidth={circleBorderWidth}
                              circleBorderColor={circleBorderColor}
                              circleSelectColor={circleSelectColor}
                              circleInColor={circleInColor}
                              lineColor={lineColor}
                              lineWidth={lineWidth}
                              areaColor={areaColor}
42886855   Zhang Zhuo   更改保存下 -张卓
169
                              title={item.title?item.title:""}
e2460342   Zhang Zhuo   更改 -张卓
170
171
172
                              titleColor={titleColor}
                              titleFont={titleFont}
                              titleLineHeight={titleLineHeight}
42886855   Zhang Zhuo   更改保存下 -张卓
173
                              position={position} key={item.id} serviceData={item.serviceData}ref={(inst) => { this[item.id + item.mode] = inst }} mode={item.mode} change={(val) => this.change(val)}></FunAreaSelect>
e2460342   Zhang Zhuo   更改 -张卓
174
175
176
177
178
                      })
                  }
              </div>)
      }
  }