TraficCanvas.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-editbox">
      <div class="modal-lb" id="edit_list" v-if="drawState != -1">
        <!--<button>加载图片</button>-->
        <!--<button>修改保存路径</button>-->
        <!--<button>删除区域</button>-->
        <el-radio-group
          v-model="canvasState"
          @change="changeCanvasState"
          :disabled="needLine || needRect"
          v-show="drawState != 2"
        >
          <el-radio-button :label="1" class="editbtn">
            <i class="el-icon-circle-plus icon"></i>
          </el-radio-button>
          <el-radio-button :label="0" class="editbtn">
            <i class="el-icon-edit-outline"></i>
          </el-radio-button>
        </el-radio-group>
        <div v-if="!canvasState">
          <span
            @click="delShape"
            class="delbtn editbtn"
            v-show="drawState != '2'"
          >
            <i class="el-icon-delete icon"></i>
          </span>
          <el-select
            v-if="drawState == 1 && selectedShape"
            v-model="markLineType"
            @change="lineChange"
          >
            <el-option value="0" label="普通车道线"></el-option>
            <el-option value="7" label="白实线"></el-option>
            <el-option value="1" label="黄实线"></el-option>
            <el-option value="2" label="停止线"></el-option>
            <el-option value="3" label="左转判定线"></el-option>
            <el-option value="4" label="右转判定线"></el-option>
            <el-option value="5" label="直行判定线"></el-option>
            <el-option value="9" label="左转弯弧度判定线"></el-option>
          </el-select>
          <span v-if="drawState == 2 && selectedShape">导向类型</span>
          <el-select
            v-if="drawState == 2 && selectedShape"
            v-model="guidingtype"
          >
            <el-option value="0" label="直行车道"></el-option>
            <el-option value="1" label="左转车道"></el-option>
            <el-option value="2" label="右转车道"></el-option>
            <el-option value="3" label="直左混行"></el-option>
            <el-option value="4" label="直右混行"></el-option>
            <el-option value="5" label="左直右混行"></el-option>
          </el-select>
          <span v-if="drawState == 2 && selectedShape">使用类型</span>
          <el-select v-if="drawState == 2 && selectedShape" v-model="lanuse">
            <el-option value="0" label="普通车道"></el-option>
            <el-option value="1" label="公交车道"></el-option>
            <el-option value="2" label="应急车道"></el-option>
            <el-option value="3" label="非机动车道"></el-option>
            <el-option value="4" label="大货车禁行车道"></el-option>
            <el-option value="5" label="隔离带"></el-option>
          </el-select>
          <span v-if="drawState == 2 && selectedShape">方向</span>
          <el-select
            v-if="drawState == 2 && selectedShape"
            v-model="markLineDirect"
            placeholder="方向选择"
          >
            <el-option value="0" label="去向"></el-option>
            <el-option value="1" label="来向"></el-option>
            <el-option value="2" label="双向"></el-option>
          </el-select>
          <span v-if="drawState == 2 && selectedShape">车道号</span>
          <el-input
            type="number"
            placeholder="车道号"
            v-model="lineNum"
            min="1"
            v-if="
              ((drawState == 1 &&
                (markLineType == '0' ||
                  markLineType == '1' ||
                  markLineType == '7')) ||
                drawState == 2) &&
                selectedShape
            "
          ></el-input>
          <el-select
            name=""
            v-model="lightInfo.type"
            v-if="drawState == 3 && selectedShape"
          >
            <el-option value="1" label="左转灯"></el-option>
            <el-option value="2" label="直行灯"></el-option>
            <el-option value="3" label="左直灯"></el-option>
            <el-option value="4" label="右转灯"></el-option>
            <el-option value="6" label="右直灯"></el-option>
          </el-select>
          <el-select
            v-model="lightInfo.distribute"
            v-if="drawState == 3 && selectedShape"
          >
            <el-option value="1" label="单眼灯"></el-option>
            <el-option value="2" label="两眼灯"></el-option>
            <el-option value="3" label="三眼灯"></el-option>
          </el-select>
          <el-select
            name=""
            v-model="lightInfo.shap"
            v-if="drawState == 3 && selectedShape"
          >
            <el-option value="1" label="圆形"></el-option>
            <el-option value="2" label="箭头"></el-option>
            <el-option value="3" label="条形"></el-option>
          </el-select>
        </div>
        <div
          class=""
          v-if="
            !canvasState && (drawState == 6 || drawState == 7 || drawState == 8)
          "
        >
          <el-input
            v-model="polygon_id"
            disabled="disabled"
            type="text"
            class="w120"
            style="margin-top:10px"
            placeholder="区域ID"
          ></el-input>
          <el-input
            v-model="polygon_name"
            disabled="disabled"
            type="text"
            class="w120 mt10"
            placeholder="区域名称"
          ></el-input>
        </div>
        <div v-if="canvasState" sytle="textAlign:center">
          <!-- <button>撤销</button> -->
          <el-radio-group v-model="polyline" @change="polyChang">
            <div>
              <el-radio
                class="radio"
                :label="0"
                :style="lineRadioStyle"
                v-if="drawState == 1"
                >直线</el-radio
              >
            </div>
            <el-radio
              class="radio"
              :label="1"
              :style="lineRadioStyle"
              v-if="drawState == 1"
              >折线</el-radio
            >
          </el-radio-group>
        </div>
      </div>
    </div>
    <div class="modal-right">
      <div class="pic" id="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 v-if="typeFlag == 1">线属性</p>
        <p v-if="typeFlag == 0">车道属性</p>
        <p v-if="typeFlag == 2">灯属性</p>
        <div class="item">
          <span v-if="typeFlag != 3">类型：</span>
          <div>
            <el-select v-if="typeFlag == 1" v-model="markLineType">
              <el-option value="0" label="普通车道线"></el-option>
              <el-option value="7" label="白实线"></el-option>
              <el-option value="1" label="黄实线"></el-option>
              <el-option value="2" label="停止线"></el-option>
              <el-option value="3" label="左转判定线"></el-option>
              <el-option value="4" label="右转判定线"></el-option>
              <el-option value="5" label="直行判定线"></el-option>
              <el-option value="9" label="左转弯弧度判定线"></el-option>
            </el-select>
            <el-select v-if="typeFlag == 0" v-model="markLineType">
              <el-option value="0" label="左转车道"></el-option>
              <el-option value="1" label="右转车道"></el-option>
              <el-option value="2" label="直行车道"></el-option>
              <el-option value="3" label="直左混行"></el-option>
              <el-option value="4" label="直右混行"></el-option>
              <el-option value="8" label="公交车道"></el-option>
              <el-option value="9" label="应急车道"></el-option>
              <el-option value="10" label="非机动车道"></el-option>
            </el-select>
            <el-select name="" v-model="lightInfo.type" v-if="typeFlag == 2">
              <el-option value="1" label="左转灯"></el-option>
              <el-option value="2" label="直行灯"></el-option>
              <el-option value="3" label="左直灯"></el-option>
              <el-option value="4" label="右转灯"></el-option>
              <el-option value="6" label="右直灯"></el-option>
            </el-select>
          </div>
        </div>
        <div
          class="item"
          v-if="
            (typeFlag == 1 &&
              (markLineType == '0' ||
                markLineType == '1' ||
                markLineType == '7')) ||
              drawState == 2
          "
        >
          <span>序号：</span>
          <div>
            <el-input type="number" v-model="lineNum" min="1"></el-input>
          </div>
        </div>
        <div v-if="typeFlag == 2" class="lightInfo item">
          <span>灯眼模式：</span>
          <div>
            <el-select v-model="lightInfo.distribute">
              <el-option value="1" label="单眼灯"></el-option>
              <el-option value="2" label="两眼灯"></el-option>
              <el-option value="3" label="三眼灯"></el-option>
            </el-select>
          </div>
        </div>
        <div v-if="typeFlag == 2" class="item">
          <span>形状：</span>
          <div>
            <el-select name="" v-model="lightInfo.shap">
              <el-option value="1" label="圆形"></el-option>
              <el-option value="2" label="箭头"></el-option>
              <el-option value="3" label="条形"></el-option>
            </el-select>
          </div>
        </div>
        <LightCanvas v-if="typeFlag == 3" ref="lightCanvas"></LightCanvas>
      </div>
      <div v-if="typeFlag != 3">
        <button @click="lineTypeCancel">取消</button>
        <button @click="lightLast" v-if="typeFlag == 2">上一步</button>
        <button @click="lineTypeBtn">确定</button>
      </div>
      <div v-if="typeFlag == 3">
        <button @click="lineTypeCancel">取消</button>
        <button @click="childCancle" v-if="lightCancle">撤销</button>
        <button @click="lightNext" v-if="lightNextBtn">下一步</button>
      </div>
    </div>
    <div class="pedestrian-area-attr BR" v-if="curLayerstate">
      <div class="mt40">
        <span class="label">ID号:</span>
        <input type="text" v-model="polygon_id" />
      </div>
      <div class="mt10">
        <span class="label">名称:</span>
        <input type="text" v-model="polygon_name" />
      </div>
      <div class="btn-box mt40">
        <button @click="bicyEnter">确定</button>
        <button @click="curlayCancel">取消</button>
      </div>
    </div>
  </div>
</template>
<script>
import LightCanvas from "./LightCanvas";
export default {
  name: "zoneSetting",
  data() {
    return {
      color: [
        "222,50,212",
        "24,0,254",
        "0,254,137",
        "255,255,0",
        "138,43,226",
        "241,31,8",
        "31,151,181",
        "3,65,76",
        "12,222,235",
        "12,222,235"
      ], //线颜色
      typeData: [
        "预览",
        "车牌检测区域",
        "车道标志线",
        "车道属性",
        "红绿灯区域",
        "对向车道",
        "违停区域",
        "行人检测区域",
        "行人密度区域",
        "异物检测区域",
        
      ],
      cindex: 0,
      //laneMark:false,
      drawState: -1, //配置项类型
      lineRadioStyle: {
        color: "#fff",
        width: "40px",
        margin: "10px 15px"
      },
      istest:false,
      canvasState: 0, //控制编辑/添加
      polyline: 0, //控制直线/折线
      smallWindow: false, //控制属性弹窗
      lightCancle: false, //控制属性弹窗是否显示撤销按钮
      lightNextBtn: false, //控制属性弹窗是否显示下一步按钮
      roadFlag: "", //标记车道线是否有修改
      needRect: false, //标记是否处于划矩形状态
      needLine: false, //标记是否处于划线状态
      lightShootState: 0, //标记选择灯区域截图起止方式，用于放大图片
      layers: [], //用于记录各个配置项的图层
      blueLines: [], //记录用于连接车道的车道线
      greenLines: [], //记录车道中线箭头
      roads: [],
      selectedShape: null, //当前选中图形
      typeFlag: 1, //选择属性弹窗状态
      lineNum: 1, //车道线/车道序号
      curLayerstate: false, //行人检测区域属性设置
      testLayerstate: false, //测试检测区域属性设置
      polygon_id: "", //行人检测区域id
      polygon_name: "", //行人检测区域name
      markLineType: "0",
      lanuse: "0", //车道属性类型
      guidingtype: "", //车道导向类型
      markLineDirect: "",
      childUrl: "", //红绿灯区域截图
      scale: {}, //红绿灯区域截图放大倍数
      lightInfo: {
        type: "1",
        distribute: "1",
        shap: "1",
        delay: 3
      },
      roiBody: {},
      XMLStr: "",
      eventData: []
    };
  },
  props: ["bgUrl"],
  components: {
    LightCanvas
  },
  methods: {
    stageInit: function(params) {
      console.log("init1");
      this.drawState = -1;
      this.stage = new Kinetic.Stage({
        container: "traficCanvas", //<div>的id
        width: 800, //创建的舞台宽度
        height: 500 //创建的舞台高度
      });
      this.shadowLayer = new Kinetic.Layer({
        id: "shadowLayer"
      });
      this.testLayer = new Kinetic.Layer({
        id: "testLayer",
        name: "layer"
      });
      this.lineLayer = new Kinetic.Layer({
        id: "lineLayer",
        name: "layer"
      });
      this.roadLayer = new Kinetic.Layer({
        id: "roadLayer",
        name: "layer"
      });
      this.lightLayer = new Kinetic.Layer({
        id: "lightLayer",
        name: "layer"
      });
      this.subtendLayer = new Kinetic.Layer({
        id: "subtendLayer",
        name: "layer"
      });
      this.noStopLayer = new Kinetic.Layer({
        id: "noStopLayer",
        name: "layer"
      });
      this.bicyLayer = new Kinetic.Layer({
        //行人检测区域
        id: "bicyLayer",
        name: "layer"
      });
      this.densityLayer = new Kinetic.Layer({
        //密度
        id: "densityLayer",
        name: "layer"
      });
      this.foreignLayer = new Kinetic.Layer({
        //异物
        id: "foreignLayer",
        name: "layer"
      });
      this.testRegionLayer = new Kinetic.Layer({
        //测试检测区域
        id: "testRegionLayer",
        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.testLayer);
      this.stage.add(this.lineLayer);
      this.stage.add(this.roadLayer);
      this.stage.add(this.lightLayer);
      this.stage.add(this.bicyLayer);
      this.stage.add(this.subtendLayer);
      this.stage.add(this.noStopLayer);
      this.stage.add(this.densityLayer);
      this.stage.add(this.foreignLayer);
      this.stage.add(this.testRegionLayer);
      this.layers = [
        this.testLayer,
        this.lineLayer,
        this.roadLayer,
        this.lightLayer,
        this.subtendLayer,
        this.noStopLayer,
        this.bicyLayer,
        this.densityLayer,
        this.foreignLayer,
        this.testRegionLayer
      ];
    },
    //还原配置
    configInit: function(xml) {
      let obj = this.oParse.parseXML(xml).roi;
      let that = this;
      console.log(obj);
      //检测区域
      // console.log(obj)
      let testAry = obj.flow_roi.flow_region.point;
      let testRect = [];
      try {
        testAry.forEach((ele, index) => {
          testRect.push(ele.x * 800);
          testRect.push(ele.y * 500);
        });
        let line = this.drawRect("morePoints", testRect, this.color[0]);
        this.testLayer.add(line);
      } catch (error) {
        console.log(error);
      }
      //车道线
      try {
        console.log(obj.lane_line);
        let normalLines = obj.lane_line.line;
        if (!normalLines.length) {
          normalLines = [normalLines];
        }
        normalLines.forEach(ele => {
          let points = ele.points.point;
          let lineType = ele.line_type;
          let color = "24,0,254";
          console.log(lineType);
          if (lineType == 1) {
            color = "255,255,0";
          } else if (lineType == 2) {
            color = "255,0,0";
          } else if (lineType == 7) {
            color = "255,255,255";
          } else if (
            lineType == 3 ||
            lineType == 4 ||
            lineType == 5 ||
            lineType == 9
          ) {
            color = "0,255,0";
          }
          let ary = [];
          for (let i = 0; i < points.length; i++) {
            ary.push(points[i].x * 800);
            ary.push(points[i].y * 500);
          }
          let line = this.drawLine("morePoints", ary, color);
          line.line_type = ele.line_type;
          if (
            line.line_type == 0 ||
            line.line_type == 1 ||
            line.line_type == 7
          ) {
            this.blueLines.push(line);
          }
          this.lineLayer.add(line);
        });
      } catch (e) {
        //TODO handle the exception
        console.log(e);
      }
      debugger
      //车道和行人
      if (obj.median_lines.lane_count > 0) {
        let ary = obj.median_lines.lane;
        if (!ary.length) {
          ary = [ary];
        }
        try {
          ary.forEach((ele, index) => {
            // if (ele.lane_type == "12") {
            //   let points = [];
            //   ele.lane_polygon.point.forEach((ele, index) => {
            //     points.push(ele.x * 800);
            //     points.push(ele.y * 500);
            //   });
            //   let rect = this.drawRect("morePoints", points, this.color[4]);
            //   this.bicyLayer.add(rect);
            // } else
            if (ele.lane_type == "11") {
              let points = [];
              ele.lane_polygon.point.forEach((ele, index) => {
                points.push(ele.x * 800);
                points.push(ele.y * 500);
              });
              let rect = this.drawRect("morePoints", points, this.color[5]);
              this.subtendLayer.add(rect);
            } else {
              let points = ele.line.point;
              let group = new Kinetic.Group({ name: "arr" });
              let line = this.drawLine(
                { x: points[0].x * 800, y: points[0].y * 500 },
                { x: points[1].x * 800, y: points[1].y * 500 },
                this.color[2]
              );
              this.greenLines[ele.lane_seq - 1] = line;
              let cPoints, direct;
              if (points[0].y < points[1].y) {
                cPoints = [
                  points[0].x * 800,
                  points[0].y * 500,
                  points[1].x * 800,
                  points[1].y * 500
                ];
                direct = "1";
              } else {
                cPoints = [
                  points[1].x * 800,
                  points[1].y * 500,
                  points[0].x * 800,
                  points[0].y * 500
                ];
                direct = "0";
              }
              this.drawArrow(
                [points[0].x * 800, points[0].y * 500],
                [points[1].x * 800, points[1].y * 500],
                30,
                20,
                3,
                this.color[2],
                this.roadLayer,
                group,
                line
              );
              let arrs = this.roadLayer.get(".arr");
              let arr = arrs[arrs.length - 1];
              line.index = ele.lane_no;
              let lane_guid_type = 0;
              let lane_use = 0;
              if (obj.lanes.lane_count == 1) {
                lane_guid_type = obj.lanes.lane.lane_guiding_type;
                lane_use = obj.lanes.lane.lane_use_type;
              } else {
                lane_guid_type = obj.lanes.lane[index].lane_guiding_type;
                lane_use = obj.lanes.lane[index].lane_use_type;
              }
              this.roads[parseInt(ele.lane_seq - 1)] = {
                type: ele.lane_type,
                index: ele.lane_no,
                direct: direct,
                lane_guiding_type: lane_guid_type,
                lane_use_type: lane_use
              };
            }
          });
        } catch (error) {
          console.log(error);
        }
      }
      //红绿灯
      try {
        let ary = obj.lights.light;
        if (!ary.length) {
          ary = [ary];
        }
        ary.forEach((ele, index) => {
          let points = ele.light_regions.light_region;
          let left = points.left * 800;
          let top = points.top * 500;
          let right = points.right * 800;
          let bottom = points.bottom * 500;
          let pointsAry = [left, top, left, bottom, right, bottom, right, top];
          let rect = this.drawRect("morePoints", pointsAry, this.color[3]);

          let linghtRoi = {
            light_region_seq: 1,
            top: (top / 500).toFixed(6),
            right: (right / 800).toFixed(6),
            bottom: (bottom / 500).toFixed(6),
            left: (left / 800).toFixed(6)
          };
          (rect.light_seq = index + 1),
            (rect.light_type = ele.light_type),
            (rect.light_distribute = ele.light_distribute),
            (rect.light_shape = ele.light_shape),
            (rect.light_delay =
              ele.light_yellow_delay || ele.light_yellow_interval),
            (rect.light_regions = {
              light_region_count: 1,
              light_region: linghtRoi
            });
          this.lightLayer.add(rect);
        });
      } catch (error) {
        console.log(error);
      }

      //违停区域
      let noStopAry = obj.no_stop_region.no_stop_polygon;
      console.log(noStopAry);
      try {
        if (!noStopAry.length) {
          noStopAry = [noStopAry];
        }
        noStopAry.forEach(ele => {
          let points = ele.point;
          let noStopRect = [];
          for (let i = 0; i < points.length; i++) {
            const point = points[i];
            noStopRect.push(point.x * 800);
            noStopRect.push(point.y * 500);
          }
          let line = this.drawRect("morePoints", noStopRect, this.color[5]);
          this.noStopLayer.add(line);
        });
      } catch (error) {
        console.log(error);
      }
      //行人检测区域
      try {
        let bicyarr = obj.pedestrian_detection_region.polygon;
        if (!bicyarr.length) {
          bicyarr = [bicyarr];
        }
        bicyarr.forEach(ele => {
          let points = ele.point;
          let bicRect = [];
          for (let i = 0; i < points.length; i++) {
            const point = points[i];
            bicRect.push(point.x * 800);
            bicRect.push(point.y * 500);
          }
          let rect = this.drawRect("morePoints", bicRect, this.color[6]);
          rect.polygon_name = ele.polygon_name;
          rect.polygon_id = ele.polygon_id;
          this.bicyLayer.add(rect);
        });
      } catch (error) {
        console.log(error);
      }
      //行人密度区域
      try {
        let densityarr = obj.pedestrian_density_region.polygon;
        if (!densityarr.length) {
          densityarr = [densityarr];
        }
        densityarr.forEach(ele => {
          let points = ele.point;
          let densityRect = [];
          for (let i = 0; i < points.length; i++) {
            const point = points[i];
            densityRect.push(point.x * 800);
            densityRect.push(point.y * 500);
          }
          let rect = this.drawRect("morePoints", densityRect, this.color[7]);
          rect.polygon_name = ele.polygon_name;
          rect.polygon_id = ele.polygon_id;
          this.densityLayer.add(rect);
        });
      } catch (error) {
        console.log(error);
      }
      //异物检测区域
      try {
        let foreignarr = obj.foreign_detection_region.polygon;
        if (!foreignarr.length) {
          foreignarr = [foreignarr];
        }
        foreignarr.forEach(ele => {
          let points = ele.point;
          let foreignRect = [];
          for (let i = 0; i < points.length; i++) {
            const point = points[i];
            foreignRect.push(point.x * 800);
            foreignRect.push(point.y * 500);
          }
          let rect = this.drawRect("morePoints", foreignRect, this.color[8]);
          rect.polygon_name = ele.polygon_name;
          rect.polygon_id = ele.polygon_id;
          this.foreignLayer.add(rect);
        });
      } catch (error) {
        console.log(error);
      }
      //测试检测区域
      try {
        let testarr = obj.test_result_region.polygon;
        if (!testarr.length) {
          testarr = [testarr];
        }
        testarr.forEach(ele => {
          let points = ele.point;
          let bicRect = [];
          for (let i = 0; i < points.length; i++) {
            const point = points[i];
            bicRect.push(point.x * 800);
            bicRect.push(point.y * 500);
          }
          let rect = this.drawRect("morePoints", bicRect, this.color[9]);
          rect.polygon_name = ele.polygon_name;
          rect.polygon_id = ele.polygon_id;
          this.testRegionLayer.add(rect);
        });
      } catch (error) {
        console.log(error);
      }

      this.selectedShape = null;
      this.drawRoad();
      console.log(this.stage);
      this.stage.draw();
    },
    //切换编辑、添加状态
    changeCanvasState: function() {
      if (this.canvasState) {
        this.cancleSelectedGroup();
      }
      if (this.drawState == 1) {
        this.lineNum = this.blueLines.length + 1;
      } else if (this.drawState == 2) {
        this.lineNum = this.roads.length + 1;
      }
      this.selectedShape = null;
      this.markLineType = "0";
      this.lightInfo.type = "1";
    },
    //切换配置项
    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;
      this.polygon_name = "";
      this.polygon_id = "";
      var e = e || window.event;

      switch (index - 1) {
        case -1:
          this.layers.forEach(ele => {
            ele.setVisible(true);
          });
          this.drawRoad();
          this.stage.draw();
          break;
        case 1:
          this.typeFlag = 1;
          this.lineNum = this.blueLines.length + 1 || 1;
          break;
        case 2:
          this.typeFlag = 0;
          this.drawRoad();
          break;
      }
      this.drawState = index - 1;
      // this.layers[this.drawState].moveToTop()

      if (index) {
        console.log(this.drawState);
        this.layers[this.drawState].setVisible(true);
        this.layers[this.drawState].draw();
      }
    },
    //切换直线/折线
    polyChang: function() {
      if (this.polyline) {
        this.markLineType = "9";
      } else {
        this.markLineType = "0";
      }
    },
    //点击配置区域
    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") {
          let tar = evt.target;
          if (this.drawState == "2" && tar.attrs.name != "rect") {
            return;
          }
          this.makeSelectedGroup(tar);
        }
      }
    },
    //添加图形
    addShape: function(evt) {
      let pos = {
        x: evt.evt.offsetX,
        y: evt.evt.offsetY
      };
      let layer = this.layers[this.drawState];
      switch (this.drawState) {
        case 0:
          let testRects = layer.get(".rect");
          if (testRects.length && !this.needRect) {
            this.$message({
              type: "error",
              message: "只允许设置一个车牌检测区域"
            });
            return;
          }

          if (this.needRect) {
            this.endChangeShape(evt);
          } else {
            this.needRect = true;
            this.startChangeShape(pos, layer, this.color[this.drawState]);
          }
          break;
        case 1:
          if (this.roadFlag) {
            this.roadFlag = false;
          }
          this.startChangeShape(pos, layer, this.color[this.drawState]);
          break;
        case 3:
          if (this.needRect) {
            this.endChangeShape(evt);
          } else {
            this.needRect = true;
            this.startChangeShape(pos, layer, this.color[this.drawState]);
          }
          break;
        case 4:
          if (this.needRect) {
            this.endChangeShape(evt);
          } else {
            this.needRect = true;
            this.startChangeShape(pos, layer, this.color[this.drawState]);
          }
          break;
        case 6:
          let rects = layer.get(".rect");
          if (rects.length > 1 && !this.needRect) {
            this.$message({
              type: "error",
              message: "只允许设置两个行人检测区域"
            });
            return;
          }
          if (this.needRect) {
            this.endChangeShape(evt);
          } else {
            this.needRect = true;
            this.startChangeShape(pos, layer, this.color[this.drawState]);
          }
          break;
        case 5:
          if (this.needRect) {
            this.endChangeShape(evt);
          } else {
            this.needRect = true;
            this.startChangeShape(pos, layer, this.color[this.drawState]);
          }
          break;
        case 7:
          if (this.needRect) {
            this.endChangeShape(evt);
          } else {
            this.needRect = true;
            this.startChangeShape(pos, layer, this.color[this.drawState]);
          }
          break;
        case 8:
          if (this.needRect) {
            this.endChangeShape(evt);
          } else {
            this.needRect = true;
            this.startChangeShape(pos, layer, this.color[this.drawState]);
          }
          break;
        case 9:
          if (this.needRect) {
            this.endChangeShape(evt);
          } else {
            this.needRect = true;
            this.startChangeShape(pos, layer, this.color[this.drawState]);
          }
          break;
        default:
          break;
      }
    },
    //改变选中图形样式
    makeSelectedGroup: function(shape) {
      console.log(shape);
      let points = shape.attrs.points;
      let lineType = shape.line_type;
      let color = this.color[this.drawState];
      if (this.drawState == 2) {
        this.lineNum = this.roads[shape.roadIndex].index;
        this.markLineType = this.roads[shape.roadIndex].type;
        this.markLineDirect = this.roads[shape.roadIndex].direct;
        this.guidingtype = this.roads[shape.roadIndex].lane_guiding_type;
        this.lanuse = this.roads[shape.roadIndex].lane_use_type || "0";
        shape.setFill("rgba(" + this.color[1] + ",0.3)");
        let gLine = this.greenLines[shape.roadIndex];
        if (gLine.getParent().attrs.name == "arr") {
          gLine.getParent().destroy();
          this.roadLayer.add(gLine);
        }
      } else {
        if (this.drawState == 1) {
          let index = this.blueLines.indexOf(shape);
          if (lineType == 0) {
            color = "0,0,255";
          } else if (lineType == 1) {
            color = "255,255,0";
          } else if (lineType == 2) {
            color = "255,0,0";
          } else if (lineType == 7) {
            color = "255,255,255";
          } else {
            color = "0,255,0";
          }
          if (index > -1) {
            this.blueLines.splice(index, 1);
          } else {
            index = this.blueLines.length;
          }
          this.lineNum = index + 1;
        }
        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);
        }
      }
      if (this.drawState == 1) {
        this.markLineType = shape.line_type;
      } else if (this.drawState == 3) {
        this.lightInfo = {
          type: shape.light_type,
          shap: shape.light_shape,
          distribute: shape.light_distribute,
          delay: shape.light_delay
        };
      } else if (
        this.drawState == 6 ||
        this.drawState == 7 ||
        this.drawState == 8
      ) {
        this.polygon_name = shape.polygon_name;
        this.polygon_id = shape.polygon_id;
      }
      this.selectedShape = shape;

      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 == 1) {
        if (
          (this.markLineType == "0" ||
            this.markLineType == "1" ||
            this.markLineType == "7") &&
          !isdel
        ) {
          this.blueLines.splice(this.lineNum - 1, 0, this.selectedShape);
          this.lineNum++;
          this.roadFlag = false;
        }
        this.selectedShape.line_type = this.markLineType;
      } else if (this.drawState == 2) {
        console.log(this.selectedShape);
        let road = this.roads[this.selectedShape.roadIndex];
        road.type = this.markLineType;
        road.index = this.lineNum;
        road.lane_use_type = this.lanuse;
        road.lane_guiding_type = this.guidingtype;
        this.selectedShape.setFill("rgba(255,255,255,0)");
        if (this.markLineDirect != undefined) {
          road.direct = this.markLineDirect;
          road.cPoints = this.sortLinePoints(road.cPoints);
          let points;
          if (this.markLineDirect == "0") {
            points = [
              road.cPoints[2],
              road.cPoints[3],
              road.cPoints[0],
              road.cPoints[1]
            ];
          } else {
            points = road.cPoints;
          }

          let line = this.greenLines[this.selectedShape.roadIndex];
          let group = new Kinetic.Group({ name: "arr" });
          this.drawArrow(
            [points[0], points[1]],
            [points[2], points[3]],
            30,
            20,
            3,
            this.color[2],
            this.roadLayer,
            group,
            line
          );
        }
      } else if (this.drawState == 3) {
        this.selectedShape.light_type = this.lightInfo.type;
        this.selectedShape.light_shape = this.lightInfo.shap;
        this.selectedShape.light_distribute = this.lightInfo.distribute;
        this.selectedShape.light_delay = this.lightInfo.delay;
      }

      this.selectedShape = null;
      this.markLineType = "0";
      this.lightInfo = {
        type: "1",
        distribute: "1",
        shap: "1",
        delay: 3
      };
      this.layers[this.drawState].draw();
    },
    //开始绘制图形（第一次点击）
    startChangeShape: function(pos, layer, col) {
      let ary = layer.get(".circle");
      if (
        this.drawState == 0 ||
        this.drawState == 3 ||
        this.drawState == 4 ||
        this.drawState == 5 ||
        this.drawState == 6 ||
        this.drawState == 7 ||
        this.drawState == 8 ||
        this.drawState == 9
      ) {
        let rect = this.drawRect(pos, pos, col);
        rect.moveToBottom();
        layer.add(rect);
      } else {
        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 {
          if (this.polyline) {
            let lines = layer.get(".line");
            let lastLine = lines[lines.length - 1];
            let points = lastLine.attrs.points;
            if (points.length >= 4) {
              points.push(pos.x);
              points.push(pos.y);
            }
            lastLine.attrs.points = points;
          } else {
            this.lineStop(layer, pos);
            this.smallWindow = true;
          }
        }
      }
      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;
        if (this.drawState == 2) {
          lines = layer.get(".centerLine");
        } else {
          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();
    },
    //结束一个图形配置
    endChangeShape: function(evt) {
      evt.cancelBubble = true;
      if (!this.needRect) return;
      this.needRect = false;
      if (this.drawState == 3) {
        //车道属性
        debugger
        let layer = this.layers[this.drawState];
        let rects = layer.get(".rect");
        let rect = rects[rects.length - 1];
        let points = rect.attrs.points;
        let canvas = document.createElement("canvas");
        let img = document.getElementById("pic").childNodes[0];
        console.log(img);
        let w = Math.abs(points[0] - points[4]);
        let h = Math.abs(points[1] - points[5]);
        this.scale = {
          x: 200 / w,
          y: 200 / h
        };
        console.log(this.scale);
        canvas.width = w;
        canvas.height = h;
        if (points[0] - points[4] > 0 && points[1] - points[5] > 0) {
          this.lightShootState = 2;
          canvas
            .getContext("2d")
            .drawImage(img, points[4], points[5], w, h, 0, 0, w, h);
        } else if (points[0] - points[4] > 0 && points[1] - points[5] < 0) {
          this.lightShootState = 3;
          canvas
            .getContext("2d")
            .drawImage(img, points[6], points[7], w, h, 0, 0, w, h);
        } else if (points[0] - points[4] < 0 && points[1] - points[5] > 0) {
          this.lightShootState = 1;
          canvas
            .getContext("2d")
            .drawImage(img, points[2], points[3], w, h, 0, 0, w, h);
        } else if (points[0] - points[4] < 0 && points[1] - points[5] < 0) {
          this.lightShootState = 0;
          canvas
            .getContext("2d")
            .drawImage(img, points[0], points[1], w, h, 0, 0, w, h);
        }
        console.log(this.lightShootState);
        this.typeFlag = 3;
        // this.lineTypeShow()
        this.smallWindow = true;

        let that = this;
        this.childUrl = canvas.toDataURL("image/webp");
        setTimeout(function() {
          that.$refs.lightCanvas.bgUrl = that.childUrl;
          that.$refs.lightCanvas.imgSize(w, h);
        }, 0);
        layer.draw();
      }
      if (this.drawState == 6 || this.drawState == 7 || this.drawState == 8) {
        this.curLayerstate = true;
      }
      if (this.drawState == 9) {
        this.testLayerstate = true;
      }
    },
    lineChange: function name() {
      let color = "blue";
      if (this.markLineType == 1) {
        color = "yellow";
      } else if (this.markLineType == 2) {
        color = "red";
      } else if (this.markLineType == 7) {
        color = "white";
      } else if (
        this.markLineType == 3 ||
        this.markLineType == 4 ||
        this.markLineType == 5 ||
        this.markLineType == 9
      ) {
        color = "rgb(0,255,0)";
      }
      this.selectedShape.attrs.stroke = color;

      this.lineLayer.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();

      if (this.drawState == 2) {
        let group = new Kinetic.Group({
          name: "arr"
        });
        let lines = layer.get(".centerLine");
        let line = lines[lines.length - 1];

        this.drawArrow(
          [x, y],
          [pos.x, pos.y],
          30,
          20,
          3,
          this.color[2],
          layer,
          group,
          line
        );
      } else {
        layer.draw();
      }
    },
    //行人检测信息/异物检测信息/测试检测区域
    bicyEnter() {
      let curLayers = this.layers[this.drawState].get(".rect");
      let curlay = curLayers[curLayers.length - 1];
      curlay.polygon_id = this.polygon_id;
      curlay.polygon_name = this.polygon_name;
      this.curLayerstate = false;
      //测试区域弹窗
      this.testLayerstate = false;
      //清空输入框
      this.polygon_id = "";
      this.polygon_name = "";
    },
    curlayCancel() {
      let curLayers = this.layers[this.drawState].get(".rect");
      let curlay = curLayers[curLayers.length - 1];
      curlay.destroy();
      console.log(curlay);
      this.selectedShape = null;
      this.cancleSelectedGroup();
      this.layers[this.drawState].draw();
      this.curLayerstate = false;
      //测试区域弹窗
      this.testLayerstate = false;
      //清空输入框
      this.polygon_id = "";
      this.polygon_name = "";
    },
    //画圆
    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;
      if (this.drawState == 2 && this.needLine) {
        name = "centerLine";
      }
      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, boo) {
      let points,
        isFill = true;
      if (boo == false) {
        isFill = boo;
      }
      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,
        dashEnabled: true,
        dash: ["8"],
        stroke: "rgb(" + color + ")",
        strokeWidth: 2,
        name: "rect",
        fill: isFill ? "rgba(" + color + ",0.3)" : "transparent"
      });
      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;
      }
      switch (this.drawState) {
        case 1:
          if (
            this.selectedShape.line_type != 0 &&
            this.selectedShape.line_type != 1 &&
            this.selectedShape.line_type != 7
          ) {
            let index = this.blueLines.indexOf(this.selectedShape);
            this.blueLines.splice(index, 1);
            this.lineNum = this.blueLines.length + 1;
          }
          this.roadFlag = false;
          break;
        case 2:
          // eslint-disable-next-line no-case-declarations
          let rindex = this.roads.indexOf(this.selectedShape);
          console.log(rindex);
          this.roads[rindex] = "";
          break;
        case 6:
          this.polygon_name = "";
          this.polygon_id = "";
        // eslint-disable-next-line no-fallthrough
        default:
          break;
      }
      this.selectedShape.destroy();
      this.cancleSelectedGroup(true);
      this.selectedShape = null;
    },
    //选择线/区域属性弹窗
    lineTypeCancel: function() {
      if (this.drawState == 3) {
        let rects = this.lightLayer.get(".rect");
        let rect = rects[rects.length - 1];
        rect.destroy();
      } else {
        this.selectedShape.destroy();
      }
      this.selectedShape = null;
      this.cancleSelectedGroup();
      this.layers[this.drawState].draw();
      this.smallWindow = false;
    },
    lineTypeBtn: function() {
      this.smallWindow = false;
      let layer = this.layers[this.drawState];
      if (this.typeFlag == 1) {
        let lines = layer.get(".line");
        let line = lines[lines.length - 1];
        let color = "blue";
        line.line_type = this.markLineType;

        if (this.markLineType == 1) {
          color = "yellow";
        } else if (this.markLineType == 2) {
          color = "red";
        } else if (this.markLineType == 7) {
          color = "white";
        } else if (
          this.markLineType == 3 ||
          this.markLineType == 4 ||
          this.markLineType == 5 ||
          this.markLineType == 9
        ) {
          color = "rgb(0,255,0)";
        }
        line.attrs.stroke = color;

        layer.draw();
        if (
          this.markLineType == "0" ||
          this.markLineType == "1" ||
          this.markLineType == "7"
        ) {
          this.blueLines.splice(this.lineNum - 1, 0, lines[lines.length - 1]);
          this.lineNum++;
        }
      } else if (this.typeFlag == 0) {
        if (this.roads[this.lineNum - 1]) {
          console.log(this.roads[this.lineNum - 1]);
          this.roads[this.lineNum - 1].getParent().destroy();
          layer.draw();
        }
        let arrs = layer.get(".arr");
        let lastLine = arrs[arrs.length - 1].children[0];
        lastLine.line_type = this.markLineType;
        lastLine.roadsIndex = this.lineNum - 1;
        this.roads[this.lineNum - 1] = lastLine;
        this.lineNum++;
      } else if (this.typeFlag == 2) {
        let that = this;
        let rects = layer.get(".rect");
        let rect = rects[rects.length - 1];
        let points = [];
        this.childCirAry.forEach(ele => {
          let cir = [];
          console.log(this.lightShootState);
          switch (this.lightShootState) {
            case 0:
              cir = [rect.attrs.points[0], rect.attrs.points[1]];
              break;
            case 1:
              cir = [rect.attrs.points[2], rect.attrs.points[3]];
              break;
            case 2:
              cir = [rect.attrs.points[4], rect.attrs.points[5]];
              break;
            case 3:
              cir = [rect.attrs.points[6], rect.attrs.points[7]];
              break;
          }
          let x = parseInt(ele[0] / that.scale.x) + parseInt(cir[0]);
          let y = parseInt(ele[1] / that.scale.y) + parseInt(cir[1]);
          points.push(x);
          points.push(y);
        });
        console.log(points);
        rect.attrs.points = points;
        layer.draw();
        let length = points;
        let top = Math.min(points[1], points[3], points[5], points[7]);
        let left = Math.min(points[0], points[2], points[4], points[6]);
        let bottom = Math.max(points[1], points[3], points[5], points[7]);
        let right = Math.max(points[0], points[2], points[4], points[6]);
        let linghtRoi = {
          light_region_seq: 1,
          top: (top / 500).toFixed(6),
          right: (right / 800).toFixed(6),
          bottom: (bottom / 500).toFixed(6),
          left: (left / 800).toFixed(6)
        };

        (rect.light_seq = this.lightLayer.get("rect").length + 1),
          (rect.light_type = this.lightInfo.type),
          (rect.light_distribute = this.lightInfo.distribute),
          (rect.light_shape = this.lightInfo.shap),
          (rect.light_delay = this.lightInfo.delay),
          (rect.light_regions = {
            light_region_count: 1,
            light_region: linghtRoi
          });
        this.childCirAry = [];
      }
      // this.markLineType = "0";
      this.lightInfo = {
        type: "1",
        distribute: "1",
        shap: "1",
        delay: 3
      };
      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";

      // 计算各角度和对应的P2,P3坐标
      var angle = (Math.atan2(c1[1] - c2[1], c1[0] - c2[0]) * 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);

      var arrowX = c1[0] - topX,
        arrowY = c1[1] - topY;

      // let line = this.drawLine({x:c1[0],y:c1[1]},{x:c2[0],y:c2[1]},color)
      line.attrs.name = "centerLine";
      arrowX = c2[0] + topX;
      arrowY = c2[1] + topY;

      let line1 = this.drawLine(
        { x: c2[0], y: c2[1] },
        { x: arrowX, y: arrowY },
        color,
        3
      );
      arrowX = c2[0] + botX;
      arrowY = c2[1] + botY;

      let line2 = this.drawLine(
        { x: c2[0], y: c2[1] },
        { x: arrowX, y: arrowY },
        color,
        3
      );
      group.add(line);
      group.add(line1);
      group.add(line2);

      layer.add(group);
      layer.draw();
    },
    //生成车道
    drawRoad: function() {
      if (this.roadFlag === true) return;
      if (this.roadFlag === false) {
        this.$alert("车道线有修改，请逐一检查车道属性是否正确", "提示", {
          confirmButtonText: "确定"
        });
      }
      let childs = this.roadLayer.children;
      //清空层内非中线图形
      const num = childs.length - 1;
      for (let i = num; i > -1; i--) {
        const element = childs[i];
        element.destroy();
      }
      this.roadLayer.draw();

      try {
        console.log("蓝色车道线");
        console.log(this.blueLines);
        // this.blueLines.forEach((ele, index) => {
        //   if (ele.attrs.points[1] - ele.attrs.points[3] > 0) {
        //     var copypoint = Array.from(ele.attrs.points);
        //     ele.attrs.points[0] = copypoint[copypoint.length - 2];
        //     ele.attrs.points[1] = copypoint[copypoint.length - 1];
        //     ele.attrs.points[2] = copypoint[0];
        //     ele.attrs.points[3] = copypoint[1];
        //     console.log('*******蓝色车道线*******')
        //     console.log(ele)
        //   }
        // });
        //车道线根据坐标排序
        // eslint-disable-next-line no-inner-declarations
        function sortBlueLine(arr) {
          var len = arr.length;
          for (var i = 0; i < len; i++) {
            for (var j = 0; j < len - 1 - i; j++) {
              let startpointx = arr[j].attrs.points[0];
              let endpointx = arr[j].attrs.points[arr[j].attrs.points.length -2];
              let centerx =  (endpointx - startpointx) /2 + startpointx;
              let nextstartpointx = arr[j+1].attrs.points[0];
              let nextendpointx = arr[j + 1].attrs.points[arr[j + 1].attrs.points.length -2];
              let nextcenterx =  (nextstartpointx - nextendpointx) /2 + nextstartpointx;
              // let startpointy = arr[j].attrs.points[1];
              // let endpointy = arr[j].attrs.points[arr[j].attrs.points.length -2];
              // let centery = (endpointy -startpointy) /2 + startpointy;
              if (centerx > nextcenterx) {
                //相邻元素两两对比
                var temp = arr[j + 1]; //元素交换
                arr[j + 1] = arr[j];
                arr[j] = temp;
              }
            }
          }
          return arr;
        }
        //  this.blueLines = sortBlueLine(this.blueLines);
        console.log("蓝色车道线",this.blueLines);
        // console.log(sortBlueLine(this.blueLines));
        this.blueLines.forEach((ele, index) => {
          let points = this.sortLinePoints(ele.attrs.points);
          if (index > 0) {
            //绘制车道
            let lastPoints = this.sortLinePoints(
              this.blueLines[index - 1].attrs.points
            );
            let num1 =
              Math.pow(points[0] - lastPoints[0], 2) +
              Math.pow(points[1] - lastPoints[1], 2) +
              Math.pow(
                points[points.length - 2] - lastPoints[lastPoints.length - 2],
                2
              ) +
              Math.pow(
                points[points.length - 1] - lastPoints[lastPoints.length - 1],
                2
              );
            let num2 =
              Math.pow(points[0] - lastPoints[lastPoints.length - 2], 2) +
              Math.pow(points[1] - lastPoints[lastPoints.length - 1], 2) +
              Math.pow(points[points.length - 2] - lastPoints[0], 2) +
              Math.pow(points[points.length - 1] - lastPoints[1], 2);
            let mPoints;
            if (num1 < num2) {
                var arr = [];
                var len = lastPoints.length
                for(var i = len; 0 < i ; i--) {
                  if(i%2 == 0){
                    arr.push(lastPoints[i-2])
                    arr.push(lastPoints[i-1])
                  }
                }
              // mPoints = points.concat([
              //   lastPoints[lastPoints.length - 2],
              //   lastPoints[lastPoints.length - 1],
              //   lastPoints[0],
              //   lastPoints[1]
              // ]);
               mPoints = points.concat(arr)
            } else {
                let arr = [];
                let len = lastPoints.length
                for(let i = 0; i < len; i++) {
                  if(i%2 == 0){
                    a.push(lastPoints[i])
                    a.push(lastPoints[i+1])
                  }
                }
                mPoints = points.concat(arr)
              // mPoints = points.concat([
              //   lastPoints[0],
              //   lastPoints[1],
              //   lastPoints[lastPoints.length - 2],
              //   lastPoints[lastPoints.length - 1]
              // ]);
            }
            let rect = this.drawRect(
              "morePoints",
              mPoints,
              this.color[1],
              false
            );
            rect.roadIndex = index - 1;
            this.roadLayer.add(rect);
            //绘制车道
            debugger
            if (!this.roads[index - 1]) {
              this.roads[index - 1] = {};
            }
            var newmPoints = mPoints.filter(item => item);
            let road = this.roads[index - 1];
            let cPoints = [
              (newmPoints[0] + newmPoints[newmPoints.length -2]) / 2,
              (newmPoints[1] + newmPoints[newmPoints.length -1]) / 2,
              (newmPoints[2] + newmPoints[newmPoints.length - 4]) / 2,
              (newmPoints[3] + newmPoints[newmPoints.length -3]) / 2
            ];
            road.cPoints = cPoints;
            let cLine = this.drawLine("morePoints", cPoints, this.color[2]);
            this.greenLines[index - 1] = cLine;

            if (road.direct == undefined) {
              this.roadLayer.add(cLine);
            } else if (road.direct == "1") {
              this.drawArrow(
                [cPoints[0], cPoints[1]],
                [cPoints[cPoints.length - 2], cPoints[cPoints.length - 1]],
                30,
                20,
                3,
                this.color[2],
                this.roadLayer,
                new Kinetic.Group({ name: "arr" }),
                cLine
              );
            } else if (road.direct == "0") {
              this.drawArrow(
                [cPoints[cPoints.length - 2], cPoints[cPoints.length - 1]],
                [cPoints[0], cPoints[1]],
                30,
                20,
                3,
                this.color[2],
                this.roadLayer,
                new Kinetic.Group({ name: "arr" }),
                cLine
              );
            }
          }
        });
        this.roadFlag = true;
      } catch (error) {
        console.log(error);
      }
      this.roadLayer.draw();
    },
    lightNext: function() {
      this.childCirAry = this.$refs.lightCanvas.cirAry;
      this.typeFlag = 2;
    },
    lightLast: function() {
      this.typeFlag = 3;
      let that = this;
      setTimeout(function() {
        that.$refs.lightCanvas.cirAry = that.childCirAry;
        that.$refs.lightCanvas.bgUrl = that.childUrl;
        that.$refs.lightCanvas.draw();
      }, 0);
    },
    childCancle: function() {
      this.$refs.lightCanvas.cancle();
    },
    save: function() {
      this.cancleSelectedGroup();
      //车牌检测区域
      let testAry = [];
      try {
        const testPoints = this.testLayer.get(".rect")[0].attrs.points;
        for (let i = 0; i < testPoints.length; i += 2) {
          testAry.push({
            point_seq: i / 2 + 1,
            x: (testPoints[i] / 800).toFixed(6),
            y: (testPoints[i + 1] / 500).toFixed(6)
          });
        }
      } catch (error) {}

      this.roiBody.flow_roi = {
        flow_type: "",
        flow_region: {
          polygon_point_count: testAry.length,
          point: testAry
        }
      };
      //新增新增
      this.roiBody.plate_detect_region = {
        detect_polygon: {
          polygon_point_count: testAry.length,
          point: testAry
        }
      };
      //车道线
      let lineAry = [];
      try {
        this.blueLines.forEach((ele, index) => {
          let points = ele.attrs.points;
          let pointarr = [];
          for (let i = 0; i < points.length / 2; i++) {
            let obj = {
              point_seq: i + 1,
              x: (points[2 * i] / 800).toFixed(6),
              y: (points[2 * i + 1] / 500).toFixed(6)
            };
            pointarr.push(obj);
          }
          console.log("pointarr", pointarr);
          lineAry.push({
            line_seq: index + 1,
            lane_no: 1,
            line_type: ele.line_type,
            points: {
              point_count: pointarr.length,
              point: pointarr
              // [
              //   {
              //     point_seq: 1,
              //     x: (points[0] / 800).toFixed(6),
              //     y: (points[1] / 500).toFixed(6)
              //   },
              //   {
              //     point_seq: 2,
              //     x: (points[2] / 800).toFixed(6),
              //     y: (points[3] / 500).toFixed(6)
              //   }
              // ]
            }
          });
        });
      } catch (error) {
        console.log(error);
      }
      try {
        this.lineLayer.get(".line").forEach((ele, index) => {
          if (ele.line_type != 0 && ele.line_type != 1 && ele.line_type != 7) {
            let points = ele.attrs.points;
            let ary = [];
            for (let i = 0; i < points.length; i += 2) {
              ary.push({
                point_seq: i / 2 + 1,
                x: (points[i] / 800).toFixed(6),
                y: (points[i + 1] / 500).toFixed(6)
              });
            }
            lineAry.push({
              line_seq: lineAry.length + 1,
              lane_no: 1,
              line_type: ele.line_type,
              points: {
                point_count: points.length / 2,
                point: ary
              }
            });
          }
        });
      } catch (error) {
        console.log(error);
      }
      this.roiBody.lane_line = {
        line_count: lineAry.length,
        line: lineAry
      };

      //车道
      let roadAry = [];
      let lanaAry = [];
      console.log(this.roads);
      try {
        console.log(this.roads);
        this.blueLines.forEach((ele, index) => {
          if (index != this.blueLines.length - 1) {
            let midLine = this.roads[index],
              points =
                midLine.direct != "1"
                  ? [
                      midLine.cPoints[2],
                      midLine.cPoints[3],
                      midLine.cPoints[0],
                      midLine.cPoints[1]
                    ]
                  : midLine.cPoints,
              rectPoints1 = this.sortLinePoints(ele.attrs.points),
              rectPoints2 = this.sortLinePoints(
                this.blueLines[index + 1].attrs.points
              );
              debugger
            let options = {
              lane_seq: index + 1,
              lane_no: midLine.index,
              line: {
                polygon_point_count: 2,
                point: [
                  {
                    point_seq: 1,
                    x: points ? (points[0] / 800).toFixed(6) : "",
                    y: points ? (points[1] / 500).toFixed(6) : ""
                  },
                  {
                    point_seq: 2,
                    x: points ? (points[2] / 800).toFixed(6) : "",
                    y: points ? (points[3] / 500).toFixed(6) : ""
                  }
                ]
              },
              direction_polygon: {
                polygon_point_count: 2,
                point: [
                  {
                    point_seq: 1,
                    x: points ? (points[0] / 800).toFixed(6) : "",
                    y: points ? (points[1] / 500).toFixed(6) : ""
                  },
                  {
                    point_seq: 2,
                    x: points ? (points[2] / 800).toFixed(6) : "",
                    y: points ? (points[3] / 500).toFixed(6) : ""
                  }
                ]
              },
              lane_polygon: {
                polygon_point_count: 4,
                point: [
                  {
                    point_seq: 1,
                    x: (rectPoints1[2] / 800).toFixed(6),
                    y: (rectPoints1[3] / 500).toFixed(6)
                  },
                  {
                    point_seq: 2,
                    x: (rectPoints1[0] / 800).toFixed(6),
                    y: (rectPoints1[1] / 500).toFixed(6)
                  },
                  {
                    point_seq: 3,
                    x: (rectPoints2[0] / 800).toFixed(6),
                    y: (rectPoints2[1] / 500).toFixed(6)
                  },
                  {
                    point_seq: 4,
                    x: (rectPoints2[2] / 800).toFixed(6),
                    y: (rectPoints2[3] / 500).toFixed(6)
                  }
                ]
              }
            };
            let linetype = "";
            if (midLine.lane_use_type == 0) {
              // linetype = this.lanuse;
              switch (midLine.lane_guiding_type) {
                case "0":
                  linetype = 2;
                  break;
                case "1":
                  linetype = 0;
                  break;
                case "2":
                  linetype = 1;
                  break;
                case "3":
                  linetype = 3;
                  break;
                case "4":
                  linetype = 4;
                  break;
                case "5":
                  linetype = 5;
                  break;
                default:
                  break;
              }
            } else if (
              midLine.lane_use_type != "" &&
              midLine.lane_use_type != 0
            ) {
              //  linetype = this.lanuse;
              switch (midLine.lane_use_type) {
                case "1":
                  linetype = 8;
                  break;
                case "2":
                  linetype = 9;
                  break;
                case "3":
                  linetype = 10;
                  break;
                case "4":
                  linetype = 13;
                  break;
                case "5":
                  linetype = 14;
                  break;
                default:
                  break;
              }
            }
            options.lane_type = linetype;
            roadAry.push(options);
            //新增
            let L = JSON.stringify(options);
            let lanaOptions = JSON.parse(L);
            console.log(this.lanuse);

            lanaOptions.lane_use_type = midLine.lane_use_type;
            lanaOptions.lane_guiding_type = midLine.lane_guiding_type;
            lanaOptions.lane_type = linetype;
            lanaOptions.lane_user_id = options.lane_no;
            lanaOptions.lane_middle_line = {
              polygon_point_count: 2,
              point1: {
                x: points ? (points[0] / 800).toFixed(6) : "",
                y: points ? (points[1] / 500).toFixed(6) : ""
              },
              point2: {
                x: points ? (points[2] / 800).toFixed(6) : "",
                y: points ? (points[3] / 500).toFixed(6) : ""
              }
            };
            lanaOptions.lane_directions = {
              lane_direction_count: "1",
              lane_direction: {
                lane_direction_type: midLine.direct,
                lane_direction_time: "00:00:00-23:59:59"
              }
            };
            lanaAry.push(lanaOptions);
          }
        });
      } catch (error) {
        console.log(error);
      }

      //对向车道
      try {
        this.subtendLayer.get(".rect").forEach((el, index) => {
          let bicAry = [];
          let points = el.attrs.points;
          for (let i = 0; i < points.length; i += 2) {
            bicAry.push({
              point_seq: i / 2 + 1,
              x: (points[i] / 800).toFixed(6),
              y: (points[i + 1] / 500).toFixed(6)
            });
          }

          roadAry.push({
            lane_no: 1,
            lane_seq: roadAry.length + 1,
            lane_type: 11,
            lane_polygon: {
              polygon_point_count: bicAry.length,
              point: bicAry
            }
          });
          lanaAry.push({
            lane_no: 1,
            lane_seq: roadAry.length + 1,
            lane_use_type: 6,
            lane_type: 11,
            lane_polygon: {
              polygon_point_count: bicAry.length,
              point: bicAry
            }
          });
        });
      } catch (error) {
        console.log(error);
      }
      console.log("#######################");
      console.log(lanaAry);
      console.log("#######################");
      this.roiBody.lanes = {
        lane_count: lanaAry.length ? lanaAry.length : 0,
        lane: lanaAry ? lanaAry : []
      };
      // 红绿灯区域
      let lightAry = [];
      try {
        this.lightLayer.get(".rect").forEach((ele, index) => {
          lightAry.push({
            light_seq: index + 1,
            light_type: ele.light_type,
            light_id: ele.light_type,
            light_distribute: ele.light_distribute,
            light_number_type: ele.light_distribute,
            light_yellow_delay: Number(ele.light_delay),
            light_yellow_interval: Number(ele.light_delay),
            light_shape: ele.light_shape,
            light_shape_type: ele.light_shape,
            light_regions: ele.light_regions
          });
        });
      } catch (error) {
        console.log(error);
      }
      this.roiBody.lights = {
        light_count: lightAry.length,
        light: lightAry
      };

      //违停区域
      let noStopRois = this.noStopLayer.get(".rect");
      let noStopAry = [];
      try {
        noStopRois.forEach((el, index) => {
          let points = el.attrs.points;
          let ary = [];
          for (let i = 0; i < points.length; i += 2) {
            ary.push({
              point_seq: i / 2 + 1,
              x: (points[i] / 800).toFixed(6),
              y: (points[i + 1] / 500).toFixed(6)
            });
          }
          noStopAry.push({
            polygon_seq: index + 1,
            polygon_point_count: ary.length,
            point: ary
          });
        });
      } catch (error) {
        console.log(error);
      }

      this.roiBody.no_stop_region = {
        region_count: noStopAry.length,
        no_stop_polygon: noStopAry
      };

      //行人检测区域
      let bicArys = [];
      try {
        this.bicyLayer.get(".rect").forEach((el, index) => {
          let bicAry = [];
          let points = el.attrs.points;
          for (let i = 0; i < points.length; i += 2) {
            bicAry.push({
              point_seq: i / 2 + 1,
              x: (points[i] / 800).toFixed(6),
              y: (points[i + 1] / 500).toFixed(6)
            });
          }
          roadAry.push({
            lane_no: 1,
            lane_seq: roadAry.length + 1,
            lane_type: 12,
            lane_polygon: {
              polygon_point_count: bicAry.length,
              point: bicAry
            }
          });
          bicArys.push({
            polygon_id: el.polygon_id,
            polygon_name: el.polygon_name,
            polygon_point_count: bicAry.length,
            point: bicAry
          });
        });
      } catch (error) {
        console.log(error);
      }

      this.roiBody.pedestrian_detection_region = {
        region_count: bicArys.length,
        polygon: bicArys
      };
      this.roiBody.median_lines = {
        lane_count: roadAry.length ? roadAry.length : 0,
        lane: roadAry ? roadAry : []
      };

      //行人密度检测区域
      let densityAry = [];
      try {
        this.densityLayer.get(".rect").forEach((el, index) => {
          let denAry = [];
          let points = el.attrs.points;
          for (let i = 0; i < points.length; i += 2) {
            denAry.push({
              point_seq: i / 2 + 1,
              x: (points[i] / 800).toFixed(6),
              y: (points[i + 1] / 500).toFixed(6)
            });
          }
          densityAry.push({
            polygon_id: el.polygon_id,
            polygon_name: el.polygon_name,
            polygon_point_count: denAry.length,
            point: denAry
          });
        });
      } catch (error) {
        console.log(error);
      }

      this.roiBody.pedestrian_density_region = {
        region_count: densityAry.length,
        polygon: densityAry
      };

      //异物检测区域
      let foreignAry = [];
      try {
        this.foreignLayer.get(".rect").forEach((el, index) => {
          let foAry = [];
          let points = el.attrs.points;
          for (let i = 0; i < points.length; i += 2) {
            foAry.push({
              point_seq: i / 2 + 1,
              x: (points[i] / 800).toFixed(6),
              y: (points[i + 1] / 500).toFixed(6)
            });
          }
          foreignAry.push({
            polygon_id: el.polygon_id,
            polygon_name: el.polygon_name,
            polygon_point_count: foAry.length,
            point: foAry
          });
        });
      } catch (error) {
        console.log(error);
      }

      this.roiBody.foreign_detection_region = {
        region_count: foreignAry.length,
        polygon: foreignAry
      };

      //测试检测区域
      let testRegion = [];
      try {
        this.testRegionLayer.get(".rect").forEach((el, index) => {
          let foAry = [];
          let points = el.attrs.points;
          for (let i = 0; i < points.length; i += 2) {
            foAry.push({
              point_seq: i / 2 + 1,
              x: (points[i] / 800).toFixed(6),
              y: (points[i + 1] / 500).toFixed(6)
            });
          }
          testRegion.push({
            polygon_id: el.polygon_id,
            polygon_name: el.polygon_name,
            polygon_point_count: foAry.length,
            point: foAry
          });
        });
      } catch (error) {
        console.log(error);
      }

      this.roiBody.test_result_region = {
        region_count: foreignAry.length,
        polygon: testRegion
      };

      console.log(this.roiBody);
      return this.oParse.writeXML({ roi: this.roiBody });
    },
    clear: function() {
      (this.blueLines = []),
        (this.roads = []),
        (this.drawState = -1),
        (this.smallWindow = false),
        (this.roadFlag = ""),
        (this.needRect = false),
        (this.needLine = false),
        (this.canvasState = 0),
        (this.polygon_name = ""),
        (this.polygon_id = ""),
        (this.polyline = 0);
      $(".modal-lt button").removeClass("active");
    },
    sortLinePoints(pointarr) {
      try {
        let newpoint = [];
        if (pointarr[1] - pointarr[pointarr.length - 1] > 0) {
          newpoint[0] = pointarr[pointarr.length - 2];
          newpoint[1] = pointarr[pointarr.length - 1];
          newpoint[pointarr.length - 2] = pointarr[0];
          newpoint[pointarr.length - 1] = pointarr[1];
        } else {
          newpoint = pointarr;
        }
        return newpoint;
      } catch (err) {
        console.log(err);
      }
    },
    changetestid() {
      this.eventData.forEach(ele => {
        if (ele.value == this.polygon_id) {
          this.polygon_name = ele.name;
        }
      });
    }
  },
  mounted() {
    // console.log(eventJson);
    // this.eventData = eventJson;

    // this.stageInit()
    key("alt+1", () => {
      if (this.istest) {
        this.istest = false;
         this.typeData.splice(-1,1)
      } else {
        this.istest = true;
        this.typeData.push("测试区域")
      }
    });
  }
};
</script>

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

.modal-body {
  height: 540px !important;
}
.modal-lt {
  width: 100%;
  margin-bottom: 10px;
  text-align: center;
  overflow: hidden;
}
.modal-lt button {
  outline: none;
  height: 30px;
  line-height: 30px;
  float: left;
  padding: 0 10px;
  border-radius: 15px;
  margin: 0 0px 10px 15px;
  background: #d7edff;
  border: 1px solid rgba(59, 183, 255, 1);
  cursor: pointer;
  color: #666666;
}
.modal-lt .curmodal {
  background: #d7edff !important;
  border: 1px solid rgba(59, 183, 255, 1);
  color: #3bb7ff;
}

.modal-editbox {
  position: relative;
  float: right;
  min-height: 450px;
  width: 22%;
  color: #fff;
}
.modal-editbox .modal-lb {
  position: absolute;
  bottom: 0;
  width: 150px;
}
.modal-right {
  position: relative;
  float: left;
  text-align: center;
}

.modal-editbox button {
  display: block;
  margin: 10px;
}

.modal-lb button {
  float: left;
  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: 340px;
  margin-left: -250px;
  margin-top: -150px;
  z-index: 52;
  color: #fff;
  text-align: center;
  line-height: 35px;
  /* background: #409eff; */
  background: rgba(1, 20, 51, 0.9);
}

#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: #3a51f2;
  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: 10px auto;
}
.item span {
  display: inline-block;
  width: 28%;
  text-align: right;
}
.item div {
  display: inline-block;
  width: 70%;
}
.w120 {
  width: 120px;
}
.mt10 {
  margin-top: 10px;
}
.pedestrian-area-attr {
  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;
}
.pedestrian-area-attr .label {
  width: 80px;
}
.pedestrian-area-attr input {
  width: 200px !important;
  opacity: 0.8;
  height: 30px;
  line-height: 30px;
  border: 0px;
}
.mt40 {
  margin-top: 40px;
}
.btn-box button {
  height: 30px;
  line-height: 30px;
  width: 100px;
  border: 0;
  cursor: pointer;
  background: #145b93;
  color: #ffffff;
}

.delbtn {
  color: #fff;
  background: #e5e5e5;
}
</style>
b