SafeCanvas.vue

<template>
  <div class="modal-body">
    <div class="modal-lt">
      <button v-for="(item,index) in typeData" :class="{'curmodal':index==cindex}" @click="changeLayer(index)" :key="index">{{item}}</button>
    </div>
    <div class="modal-left">
      <div class=""  v-if="(drawState==10||drawState==11||drawState==12)&&!canvasState&&selectedShape">
				<div class="other-info">
					<span>ID:</span><el-input class="info" disabled v-model="area_id"></el-input>
				</div>
				<div class="other-info">
					<span>名称:</span><el-input class="info" disabled v-model="area_name"></el-input>
				</div>
			</div>
      <div class="modal-lb" id="edit_list" v-if="drawState!=-1">
        <el-radio-group v-model="canvasState" @change='changeCanvasState' :disabled='needLine||needRect'>
          <el-radio-button :label="1">添加</el-radio-button>
          <el-radio-button :label="0">编辑</el-radio-button>
        </el-radio-group>
        <div v-if="!canvasState">
          <button @click='delShape' class="delbtn">删除</button>
        </div>
      </div>
    </div>
    <div class="modal-right">
      <div class="pic"><img :src="bgUrl" id='bg' /></div>
      <div id='traficCanvas'></div>
    </div>
    <div class='clear'></div>
    <div id="line_type" class="littleModel BR active" v-if="smallWindow">
      <div>
        <p>线属性</p>
        <div class='item'>
        <div v-if="drawState==0">
          	<span>类型：</span>
            <el-select v-model="markLineType">
              <el-option value="0" label="单向线"></el-option>
              <el-option value="1" label="双线线"></el-option>
            </el-select>
          </div>
					<div  v-if="drawState==1">
						<span>类型：</span>
            <el-select v-model="markLineType" v-if="drawState==1">
              <el-option value="2" label="内到外"></el-option>
              <el-option value="3" label="外到内"></el-option>
            </el-select>
					</div>
					<div class="areaset" v-if="drawState==10 || drawState==11||drawState==12">
						<div>
							<span>区域ID：</span><el-input v-model="area_id"></el-input>
						</div>
						<div>
							<span>区域名称:</span><el-input v-model="area_name"></el-input>
						</div>
					</div>
      </div>
      </div>
      <div>
        <button @click="lineTypeCancel">取消</button>
        <button @click="lineTypeBtn">确定</button>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'zoneSetting',
    data() {
      return {
        color: ["222,50,212", "24,0,254", "0,254,137", "255,255,0", "138,43,226", "31,151,181", "241,31,8", "0,255,0",
          "125,125,255", "200,225,255",'192,161,96','235,27,37','27,177,235'
        ],
				drawState: -1,
				cindex:0,
        typeData: ['预览', '拌线', '区域入侵', '摆摊', '黑摩的', '奔跑', '人群聚集', '安全帽', '脱岗', '打架', '人脸','物品遗留','物品丢失','跨域闸机'],
        lineRadioStyle: {
          color: '#fff',
          width: '40px',
          margin: '10px 15px',
        },
        canvasState: 0,
        leftType: 0,
        needRect: false,
        needLine: false,
        smallWindow: false,
        lightShootState: 0,
        layers: [],
        selectedShape: null,
        markLineType: null,
        roiBody: [],
        area_id:'',
				area_name:'',
        XMLStr: ''
      }
    },
    props: ['bgUrl'],
    methods: {
      stageInit: function (params) {
        document.getElementsByClassName('pic')[0].style.background = 'url("' + this.bgUrl + '") no-repeat';
        document.getElementsByClassName('pic')[0].style.backgroundSize = 'cover';
        console.log('init1')
        this.stage = new Kinetic.Stage({
          container: "traficCanvas", //<div>的id 
          width: 800, //创建的舞台宽度 
          height: 500 //创建的舞台高度 
        });
        this.shadowLayer = new Kinetic.Layer({
          id: "shadowLayer",
        });
        this.banLayer = new Kinetic.Layer({
          id: "banLayer",
          name: 'layer'
        });
        this.baiLayer = new Kinetic.Layer({
          id: "baiLayer",
          name: 'layer'
        });
        this.heiLayer = new Kinetic.Layer({
          id: "heiLayer",
          name: 'layer'
        });
        this.benLayer = new Kinetic.Layer({
          id: "benLayer",
          name: 'layer'
        });
        this.renLayer = new Kinetic.Layer({
          id: "renLayer",
          name: 'layer'
        });
        this.anLayer = new Kinetic.Layer({
          id: "anLayer",
          name: 'layer'
        });
        this.tuoLayer = new Kinetic.Layer({
          id: "tuoLayer",
          name: 'layer'
        });
        this.quLayer = new Kinetic.Layer({
          id: "quLayer",
          name: 'layer'
        });
        this.daLayer = new Kinetic.Layer({
          id: "daLayer",
          name: 'layer'
        });
        this.rlLayer = new Kinetic.Layer({
          id: "rlLayer",
          name: 'layer'
        });
        	// 物品遗留
        this.remnantLayer = new Kinetic.Layer({
          id: "remnantLayer",
          name: 'layer'
        });
				// 物品丢失
        this.loseLayer = new Kinetic.Layer({
          id: "loseLayer",
          name: 'layer'
        });
				// 跨域闸机
        this.gateLayer = new Kinetic.Layer({
          id: "gateLayer",
          name: 'layer'
        });
        let shadow = new Kinetic.Rect({
          x: 0, //矩形左上角x坐标 
          y: 0, //矩形左上角y坐标 
          width: 800, //矩形的宽度 
          height: 500, //矩形的高度 
          fill: 'rgba(255,255,255,.2)', //矩形的填充色 
          stroke: "black", //矩形边缘线的颜色
          strokeWidth: 3 //矩形边缘线的宽度
        });
        let that = this
        this.stage.on('click', function (evt) {
          that.stageClick(evt)
        })
        this.stage.on('dblclick', function (evt) {
          if (that.polyline) {
            let pos = {
              x: evt.evt.offsetX,
              y: evt.evt.offsetY
            }
            that.lineStop(that.layers[1], pos)
            that.smallWindow = true
          }
        })
        this.stage.on('mousemove', function (evt) {
          that.stageMouseMove(evt)
        });
        this.shadowLayer.add(shadow)
        this.stage.add(this.shadowLayer)
        this.stage.add(this.banLayer)
        this.stage.add(this.baiLayer)
        this.stage.add(this.heiLayer)
        this.stage.add(this.benLayer)
        this.stage.add(this.renLayer)
        this.stage.add(this.anLayer)
        this.stage.add(this.tuoLayer)
        this.stage.add(this.quLayer)
        this.stage.add(this.daLayer)
        this.stage.add(this.rlLayer)
        this.stage.add(this.remnantLayer)
				this.stage.add(this.loseLayer)
				this.stage.add(this.gateLayer)
        this.layers = [this.banLayer, this.quLayer, this.baiLayer, this.heiLayer, this.benLayer, this.renLayer, this.anLayer,
          this.tuoLayer, this.daLayer, this.rlLayer,this.remnantLayer,this.loseLayer,this.gateLayer
        ]
      },
      configInit: function (xml) {
        let obj = this.oParse.parseXML(xml).root.roilist
        let that = this;
        if (!obj.length) {
          obj = [obj]
        }
        for (let i = 0; i < obj.length; i++) {
          const ele = obj[i];
          let index = 0;
          try {
            let roiAry = ele.roi
            if (!roiAry.length) {
              roiAry = [roiAry]
            }
            switch (ele.algotype) {
              case '0':
                index = parseInt(roiAry[0].type) < 2 ? 0 : 1
                break;
              case '20':
                index = 2
                break;
              case '19':
                index = 3
                break;
              case '5':
                index = 4
                break;
              case '32':
                index = 5
                break;
              case '33':
                index = 6
                break;
              case '4':
                index = 8
                break;
              case '55':
                index = 7
              case '22':
                index = 9
                break;
              	case '34':
                index = 10
                break;
							case '35':
                index = 11
                break;
							case '36':
								index = 12
                break;
            }
            let layer = this.layers[index]
            roiAry.forEach((ele) => {
              let points = ele.points.point
              let morePoints = []
              points.forEach((el) => {
                let xy = el.split(',')
                morePoints.push(xy[0].split('=')[1] * 800)
                morePoints.push(xy[1].split('=')[1] * 500)
              })
              if (index == 0) {
                let line = this.drawLine('morePoints', morePoints, this.color[index])
                let group = new Kinetic.Group({
                  name: 'arr'
                })
                line.line_type = ele.type
                this.drawArrow([morePoints[0], morePoints[1]], [morePoints[2], morePoints[3]], 30, 10, 3, '0,0,0',
                  this.banLayer, group, line)
              } else {
                let rect = this.drawRect('morePoints', morePoints, this.color[index])
                if (index == 1) {
                  rect.line_type = ele.type
                }
                if(index == 10 || index == 11 || index == 12) {
                  rect.id = ele.id
                  rect.name = ele.name
                }
                layer.add(rect)
                layer.draw()
              }
            })
          } catch (error) {
            console.log(error)
            continue
          }
        }
        this.selectedShape = null
        console.log(this.stage)
        this.stage.draw()
      },
      changeCanvasState: function () {
        if (this.canvasState) {
          this.area_id = '';
					this.area_name = '';
          this.cancleSelectedGroup()
        }
        this.selectedShape = null
      },
      changeLayer: function (index) {
				this.cindex = index;
        if (this.needRect || this.needLine) {
          let shape = this.needRect ? '区域' : '线段'
          this.$message({
            type: 'error',
            message: '当前' + shape + '配置未完成'
          })
          return
        }
        if (this.smallWindow) {
          this.$message({
            type: 'error',
            message: '当前属性配置未完成'
          })
          return
        }
        this.layers.forEach((ele) => {
          ele.setVisible(false)
        })
        if (this.drawState != -1) {
          this.cancleSelectedGroup()
        }
        this.canvasState = 0
        this.polyline = 0
        switch (index - 1) {
          case -1:
            this.layers.forEach((ele) => {
              ele.setVisible(true)
            })
            this.stage.draw()
            break;
        }
        this.drawState = index - 1
        if (this.drawState == 0) {
          this.markLineType = '0'
        } else if (this.drawState == 1) {
          this.markLineType = '2'
        }
        if (index) {
          this.layers[this.drawState].setVisible(true)
          this.layers[this.drawState].draw()
        }
      },
      stageClick: function (evt) {
        if (this.drawState == -1) {
          this.$message({
            type: 'info',
            message: '预览模式下无法操作！'
          })
          return
        }
        if (this.canvasState) {
          if (this.smallWindow) return
          this.addShape(evt)
        } else {
          this.cancleSelectedGroup()
          if (evt.target.className != 'Rect') {
            this.makeSelectedGroup(evt.target)
          }
        }
      },
      addShape: function (evt) {
        let pos = {
          x: evt.evt.offsetX,
          y: evt.evt.offsetY
        }
        let layer = this.layers[this.drawState]
        let rects = layer.get('.rect')
        switch (this.drawState) {
          case 0:
            this.startChangeShape(pos, layer, this.color[this.drawState])
            break;
          case 1:
            if (rects.length > 3 && !this.needRect) {
              this.$message({
                type: 'error',
                message: '最多设置4个摆摊区域'
              })
              return
            }

            break;
          case 2:

            break;
          case 3:

            break;
          case 4:

            break;
          case 5:

            break;
          case 6:

            break;
          default:
            break;
        }
        if (this.drawState != 0) {
          if (this.needRect) {
            if (this.drawState == 1||this.drawState == 10||this.drawState == 11||this.drawState == 12) {
              this.smallWindow = true
            }
            this.needRect = false
          } else {
            this.needRect = true
            this.startChangeShape(pos, layer, this.color[this.drawState])
          }
        }
      },
      makeSelectedGroup: function (shape) {
        let points = shape.attrs.points
        let lineType = shape.line_type
        let color = this.color[this.drawState]
        if (this.drawState == 0) {
          let parShape = shape.getParent()
          this.layers[this.drawState].add(shape)
          parShape.destroy()
        }
        if(this.drawState == 10||this.drawState == 11||this.drawState == 12){
					this.area_id =  shape.id
					this.area_name = shape.name
				}
        this.selectedShape = shape
        for (let i = 0; i < points.length; i += 2) {
          const pos = {
            x: points[i],
            y: points[i + 1]
          };

          let cir = this.drawCircle(pos, color, 5)
          this.layers[this.drawState].add(cir)
        }
        this.layers[this.drawState].draw()
      },
      cancleSelectedGroup: function (isdel) {
        if (!this.selectedShape) return
        let cirs = this.layers[this.drawState].get('.circle')
        for (let i = 0; i < cirs.length; i++) {
          const cir = cirs[i];
          cir.destroy()
        }
        if (this.drawState == 0 && !isdel) {
          let group = new Kinetic.Group({
            name: 'arr'
          })
          let points = this.selectedShape.attrs.points
          this.drawArrow([points[0], points[1]], [points[2], points[3]], 30, 10, 3, '0,0,0', this.banLayer, group,
            this.selectedShape)
        }
        this.selectedShape = null
        this.layers[this.drawState].draw()
      },
      startChangeShape: function (pos, layer, col) {
        let ary = layer.get('.circle')
        if (this.drawState == 0) {
          if (ary.length == 0 && !this.needLine) {
            let circle = this.drawCircle(pos, 'rgba(255,255,255,.2)')
            layer.add(circle)
            this.needLine = true
            let line = this.drawLine(pos, pos, col)
            this.selectedShape = line
            layer.add(line)
          } else {
            this.lineStop(layer, pos)
            this.smallWindow = true
          }
        } else {
          let rect = this.drawRect(pos, pos, col)
          this.selectedShape = rect
          rect.moveToBottom()
          layer.add(rect)
        }
        layer.draw()
      },
      stageMouseMove: function (evt) {
        if (!this.needLine && !this.needRect) return
        let pos = {
          x: evt.evt.offsetX,
          y: evt.evt.offsetY
        }
        let layer = this.layers[this.drawState]
        if (this.needLine) {
          let lines;
          lines = layer.get('.line')
          let points = lines[lines.length - 1].attrs.points
          points[points.length - 2] = pos.x
          points[points.length - 1] = pos.y
        } else if (this.needRect) {
          let rects = layer.get('.rect')
          let rect = rects[rects.length - 1]
          rect.moveToBottom()
          rect.attrs.points[3] = pos.y
          rect.attrs.points[4] = pos.x
          rect.attrs.points[5] = pos.y, pos
          rect.attrs.points[6] = pos.x
        }
        layer.draw()
      },
      lineStop: function (layer, pos) {
        this.needLine = false
        let start = layer.get('.circle')[0]
        let x = start.attrs.x
        let y = start.attrs.y
        start.destroy()

        layer.draw()
      },
      drawCircle: function (pos, col, r) {
        let size = r || 2
        let circle = new Kinetic.Circle({
          x: pos.x,
          y: pos.y,
          fill: 'rgb(' + col + ')',
          radius: size,
          name: 'circle',
          draggable: true
        });

        circle.on("dragmove", (evt) => {
          if (this.canvasState) return
          evt.cancelBubble = true
          this.changeRect(evt)
        })
        return circle
      },
      drawLine: function (start, end, col, width) {
        let points;
        if (start === 'morePoints') {
          points = end
        } else {
          points = [start.x, start.y, end.x, end.y]
        }
        let name = 'line';
        let size = width || 4

        let line = new Kinetic.Line({
          x: 0,
          points: points,
          tension: 0,
          closed: false,
          stroke: 'rgb(' + col + ')',
          strokeWidth: size,
          name: name
        });

        return line
      },
      drawRect: function (start, end, color) {
        let points;
        if (start === 'morePoints') {
          points = end
        } else {
          points = [start.x, start.y, start.x, end.y, end.x, end.y, end.x, start.y]
        }
        let rect = new Kinetic.Line({
          x: 0,
          points: points,
          // tension: 0.5,
          closed: true,
          stroke: 'rgb(' + color + ')',
          strokeWidth: 4,
          name: 'rect',
          fill: 'rgba(' + color + ',0.3)',
        });
        return rect
      },
      changeRect: function (evt) {
        let rects = evt.target.getParent().get('.rect')
        let cirs = evt.target.getParent().get('.circle')
        let points = []
        cirs.forEach((ele) => {
          points.push(ele.attrs.x)
          points.push(ele.attrs.y)
        })

        this.selectedShape.attrs.points = points
        this.layers[this.drawState].draw()
      },
      delShape: function () {
        if (!this.selectedShape) {
          return
        }
        this.selectedShape.destroy()
        this.cancleSelectedGroup(true)
        this.selectedShape = null
      },
      lineTypeCancel: function () {
        this.selectedShape.destroy()
        this.selectedShape = null
        this.cancleSelectedGroup()
        this.layers[this.drawState].draw()
        this.smallWindow = false
        this.area_id='';
        this.area_name = '';
      },
      lineTypeBtn: function () {
        this.smallWindow = false
        let layer = this.layers[this.drawState]
        if (this.drawState == 0) {
          let line = this.selectedShape
          line.line_type = this.markLineType
          let points = line.attrs.points
          let group = new Kinetic.Group({
            name: 'arr'
          })
          this.drawArrow([points[0], points[1]], [points[2], points[3]], 30, 10, 3, '0,0,0', layer, group, line)
          this.markLineType = '0'
        } else if (this.drawState == 1) {
          this.selectedShape.line_type = this.markLineType
          this.markLineType = '2'
        }else if (this.drawState == 10 || this.drawState == 11 ||this.drawState == 12){
					this.selectedShape.id = this.area_id;
          this.selectedShape.name = this.area_name;
          
          this.area_id='';
          this.area_name = '';
				}
        this.selectedShape = null
      },
      drawArrow: function (c1, c2, theta, headlen, width, color, layer, group, line) {
        theta = typeof (theta) != 'undefined' ? theta : 30;
        headlen = typeof (theta) != 'undefined' ? headlen : 10;
        width = typeof (width) != 'undefined' ? width : 1;
        color = typeof (color) != 'color' ? color : '#000';
        //计算中点
        let c3 = [(c1[0] + c2[0]) / 2, (c1[1] + c2[1]) / 2]


        // 计算各角度和对应的P2,P3坐标
        let angle = Math.atan2(c1[1] - c2[1], c1[0] - c2[0]) * 180 / Math.PI,
          angle1 = (angle + 90) * Math.PI / 180,
          angle2 = (angle - 90) * Math.PI / 180,
          topX = 20 * Math.cos(angle1),
          topY = 20 * Math.sin(angle1),
          botX = 20 * Math.cos(angle2),
          botY = 20 * Math.sin(angle2);

        let arrowTX = c3[0] + topX,
          arrowTY = c3[1] + topY,
          arrowBX = c3[0] + botX,
          arrowBY = c3[1] + botY;

        let arrLine = this.drawLine({
          x: arrowTX,
          y: arrowTY
        }, {
          x: arrowBX,
          y: arrowBY
        }, color, 3);

        angle = Math.atan2(arrowBY - arrowTY, arrowBX - arrowTX) * 180 / Math.PI,
          angle1 = (angle + theta) * Math.PI / 180,
          angle2 = (angle - theta) * Math.PI / 180,
          topX = headlen * Math.cos(angle1),
          topY = headlen * Math.sin(angle1),
          botX = headlen * Math.cos(angle2),
          botY = headlen * Math.sin(angle2);

        let arrowX = arrowTX + topX,
          arrowY = arrowTY + topY;
        let line1 = this.drawLine({
          x: arrowTX,
          y: arrowTY
        }, {
          x: arrowX,
          y: arrowY
        }, color, 3)

        arrowX = arrowTX + botX;
        arrowY = arrowTY + botY;
        let line2 = this.drawLine({
          x: arrowTX,
          y: arrowTY
        }, {
          x: arrowX,
          y: arrowY
        }, color, 3)

        group.add(line)
        group.add(arrLine)
        group.add(line1)
        group.add(line2)

        if (line.line_type == 1) {
          angle = Math.atan2(arrowTY - arrowBY, arrowTX - arrowBX) * 180 / Math.PI,
            angle1 = (angle + theta) * Math.PI / 180,
            angle2 = (angle - theta) * Math.PI / 180,
            topX = headlen * Math.cos(angle1),
            topY = headlen * Math.sin(angle1),
            botX = headlen * Math.cos(angle2),
            botY = headlen * Math.sin(angle2);

          let arrowX = arrowBX + topX,
            arrowY = arrowBY + topY;
          let line3 = this.drawLine({
            x: arrowBX,
            y: arrowBY
          }, {
            x: arrowX,
            y: arrowY
          }, color, 3)

          arrowX = arrowBX + botX;
          arrowY = arrowBY + botY;
          let line4 = this.drawLine({
            x: arrowBX,
            y: arrowBY
          }, {
            x: arrowX,
            y: arrowY
          }, color, 3)
          group.add(line3)
          group.add(line4)
        }
        this.selectedShape = group
        layer.add(group)
        layer.draw()
      },
      lightNext: function () {
        this.childCirAry = this.$refs.lightCanvas.cirAry;
      },
      lightLast: function () {
        let that = this;
        setTimeout(function () {
          that.$refs.lightCanvas.cirAry = that.childCirAry;
          that.$refs.lightCanvas.bgUrl = that.childUrl;
          that.$refs.lightCanvas.draw()
        }, 0)
      },
      save: function () {
        this.cancleSelectedGroup()
        this.roiBody = []
        try {
          this.layers.forEach((ele, index) => {
            let ary = []
            let shape = index == 0 ? '.arr' : '.rect'
            let shapes = ele.get(shape)
            shapes.forEach((el, num) => {
              let points = index == 0 ? el.children[0].attrs.points : el.attrs.points
              let pointAry = []
              for (let i = 0; i < points.length; i += 2) {
                const point = points[i];
                pointAry.push('x=' + (point / 800).toFixed(6) + ',y=' + (points[i + 1] / 500).toFixed(6))
              }
              let type = index == 0 ? el.children[0].line_type : index == 1 ? el.line_type : '2'
              if(index == 10 || index == 11 || index == 12) {
                ary.push({
                  type: type,
                  id:el.id,
                  name:el.name,
                  points: {
                    point: pointAry
                  }
                })
              } else {
                ary.push({
                  type: type,
                  points: {
                    point: pointAry
                  }
                })
              }
            })
            if (shapes.length) {
              let algotype = 0
              switch (index) {
                case 0:
                  algotype = 0
                  break;
                case 1:
                  algotype = 0
                  break;
                case 2:
                  algotype = 20
                  break;
                case 3:
                  algotype = 19
                  break;
                case 4:
                  algotype = 5
                  break;
                case 5:
                  algotype = 32
                  break;
                case 6:
                  algotype = 33
                  break;
                case 7:
                  algotype = 55
                  break;
                case 8:
                  algotype = 4
                  break;
                case 9:
                  algotype = 22
                  break;
                case 10:
                  algotype = 34
                  break;
                case 11:
                  algotype = 35
                  break;
                case 12:
                  algotype = 36
                  break;
              }
              
              this.roiBody.push({
                algotype: algotype,
                roi: ary
              })
            }
          })
        } catch (error) {
          console.log(error)
        }

        return this.oParse.writeXML({
          root: {
            roilist: this.roiBody
          }
        })
      },
      clear: function () {
        this.drawState = -1,
          this.smallWindow = false,
          this.needRect = false,
          this.needLine = false,
          this.canvasState = 0;
      }
    },
    mounted() {
      this.stageInit()
    }
  }
</script>

<style scoped>
	button {
		width: 10%;
	}
	
	.modal-title {
		float: left;
		width: 93%;
		overflow: hidden;
	}

	.modal-body {
		/* height: 540px!important; */
	}
	.modal-lt {
		width: 100%;
		margin-bottom: 10px;
		text-align: center;
	}
	.modal-lt button {
		width: 9%;
	}
	.modal-lt button.active {
        background: #145B93!important
    }
	.modal-left {
		float: left;
		min-height: 350px;
		width: 15%;
		color: #fff;
		padding-top:40px
	}
	.modal-right {
		position: relative;
		float: left;
		text-align: center;
	}
	
	.modal-left button {
		display: block;
		margin: 10px;
	}
	
	.modal-lb button {
		width: 90px;
		margin-left: 15px
	}
	
	#zone_list button.active {
		background: #fff;
		color: #3d6797;
	}
	
	#line_type {
		display: none;
		position: fixed;
		top: 50%;
		left: 50%;
		width: 500px;
		height: 300px;
		margin-left: -250px;
		margin-top: -150px;
		z-index: 52;
		color: #fff;
		text-align: center;
		line-height: 35px;
		background: #409eff;
	}
	
	#line_type.active {
		display: block;
		z-index: 1001;
		opacity:1
	}
	
	#line_type p {
		padding: 15px;
		font-size: 17px;
		font-weight: bold;
	}
	#line_type input {
		width: 150px;
	}
	el-select{
		width:90px!important
	}
	#line_type button {
		color: #fff;
		margin: 50px 2%;
		width: 100px;
		height: 35px;
		line-height: 35px;
		background: #3a51;
		color: #fff;
		border: 0;
	}
	
	#c1 {
		position: absolute;
		top: 0;
		left: 0;
	}
	
	.pic {
		position: absolute;
		top: 0;
		left: 0;
	}
	
	.pic img {
		width: 800px;
		height: 500px;
		margin: 0;
		padding: 0;
        
	}
	
	canvas {
		margin: 0;
		padding: 0;
	}
	
	.title {
		/*background: url('../../../assets/18.png') no-repeat;*/
		width: 24%;
		height: 70px;
		line-height: 50px;
		margin: 0;
		margin-left: 3.5%;
		font-size: 25px;
		letter-spacing: 10px;
		display: inline-block;
	}
	
	.shadow {
		display: none;
		position: fixed;
		left: 0;
		top: 0;
		z-index: 1000;
		width: 100%;
		height: 100%;
		background: #000;
		filter: alpha(opacity=50);
		-moz-opacity: 0.5;
		opacity: 0.5;
	}
	
	ul {
		padding: 10px;
	}
	
	li {
		width: 130px;
		text-align: center;
	}
	
	.item {
		width: 50%;
		margin:0 auto
	}
  .areaset>div{
    width: 100%;
  }
	.areaset span {
		display: inline-block;
		width: 60px;
		text-align: right;
	}
	.areaset>div>div {
		display: inline-block;
		width: 150px;
    margin-top: 10px;
	}
  .other-info {
		margin-bottom: 10px;
    color:#333;
	}
	.other-info .info{
		width: 100px;

	}
	.other-info span{
		display: inline-block;
		width: 40px;
    color: #333;
	}
</style>