<!-- 车道 -->
<template lang="html">
  <div id="id_map_center_cross">
    <!--    {{ crossData }}-->
    <div id="imgSrcMap">
      <div class="drawCross" id="id_drawCross">
        <div class="drawCrossWarp">
          <div class="crossCenter" :style="crossCenter">
            <div class="crossCenterBox" :style="centeBoxStyle">
              <div class="crossCenterBox_warp">
                <p style="color: #fff">
                  {{ websocketData.cycleCountDown }} /
                  {{ websocketData.cycleLen }}
                </p>
              </div>
            </div>
            <div style="width: 100%; height: 100%; position: relative">
              <!--每个方向-->
              <div
                class="crossLane"
                v-for="(item, index) in dirList"
                :key="index"
                :style="getLaneStyle(item)"
                :class="'crossLane_' + item.dirType"
              >
                <div class="crossLaneWait_warp" v-if="item.isRoad">
                  <div
                    class="crossLaneWait crossLaneWaitLeft"
                    v-if="index % 2 == 0 && isShowRadius(item, index, 'left')"
                  ></div>
                  <div
                    class="crossLaneWait crossLaneWaitRight"
                    v-if="index % 2 == 0 && isShowRadius(item, index, 'right')"
                  ></div>
                </div>
                <div class="crossLaneWarp" v-if="item.isRoad">
                  <!-- 出口 -->
                  <div class="crossLane_out carLaneBox">
                    <div class="roadName">
                      {{ item.roadName }}
                    </div>
                    <div
                      class="two_way"
                      :style="getWayImg(item)"
                      v-if="item.pedestrian == '2'"
                    ></div>
                    <div
                      v-for="(ln, li) in getkeyList(
                        dirList,
                        'dirType',
                        item.outLane,
                        'list'
                      )"
                      :key="li"
                      class="carLane"
                    ></div>
                  </div>

                  <!-- 进口  -->
                  <div class="crossLane_in carLaneBox">
                    <div
                      class="two_way"
                      :style="getWayImg(item)"
                      v-if="item.pedestrian == '2'"
                    ></div>
                    <!-- {{item.list}} -->
                    <div
                      v-for="(ln, li) in item.list"
                      :key="li"
                      class="carLane"
                    >
                      <img :src="getLaneImg(ln, item)" />

                      <img
                        :src="getLaneImg(ln, item, ln.isNoCrossLamp)"
                        v-if="ln.isNoCrossLamp == '1'"
                      />
                    </div>
                  </div>
                  <!-- 双向行人过街 -->
                  <div
                    class="crossLane_way"
                    :style="getWayImg(item)"
                    v-if="item.pedestrian == '1'"
                  ></div>
                </div>
                <div
                  class="crossLaneWarp crossLaneWarpNotRoad"
                  v-if="!item.isRoad"
                ></div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import "@/common/js/singal/resize.js";
// import "../../common/js/prototypes";
import { api_getCrossData } from "../../dao/situation";
const removeStr = function (arr, str) {
  var index = arr.indexOf(str);
  if (index == -1) {
    return arr;
  } else {
    arr.splice(index, 1);
    return arr;
  }
};
/**
 * 在数组中删除其中几个数据
 * @param {Object} list
 */
const removeArrayStr = function (arr, list) {
  var length = list.length;
  if (length == 0 || arr.length == 0) {
    return arr;
  } else {
    var newArray = arr;
    for (var i = 0; i < length; i++) {
      var json = list[i];
      newArray = removeStr(arr, json);
    }
    return newArray;
  }
};
export default {
  components: {},
  props: {
    crossData: {
      type: Object,
      default() {
        return {};
      },
    },
    websocketData: {
      type: Object,
      default() {
        return {};
      },
    },
    type: {
      type: String,
      default: "",
    },
    view: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      crossIndex: 0,
      colorObj: {
        1: "#16CD95", //畅通
        2: "#F79E06", //缓行
        3: "#D80305", //拥堵
        4: "#900021", //严重拥堵
      },
      dirList: [],
      centeBoxStyle: {
        width: 0,
        height: 0,
      },
      crossCenter: {},
      laneWidth: 8, //每个车道的距离
      lineHeight: this.type === "planSend" ? 200 : 70,
      laneImgWidth: 25 - 8,
      dirLampGroupMap: {},
      crossName: "",
      crossid: "",
    };
  },
  created() {},
  mounted() {
    this.initData();
  },
  watch: {
    websocketData: {
      deep: true,
      handler() {
        var websocketData = this.websocketData;
        //导向灯灯态
        var json = websocketData.dirLampGroupMap;
        this.dirLampGroupMap = json;
      },
    },
    crossData: {
      deep: true,
      handler() {
        this.initData();
      },
    },
  },
  methods: {
    getkeyList(list, key, value, returnKey) {
      var arr = [];
      for (var i = 0; i < this.length; i++) {
        var item = list[i];
        var v = item[key];
        var rv = item[returnKey];
        if (v == value) {
          arr = rv;
        }
      }
      return arr;
    },
    initData() {
      var crossData = this.crossData;
      this.crossid = crossData.crossId || crossData.id;
      this.crossName = crossData.crossName;
      if (this.crossid) {
        this.getCrossInfo();
      }
    },
    getCrossInfo() {
      var params = {
        crossId: this.crossid,
      };
      // if (cur_system === "singalControl") {
      //   api = api_getCrossData;
      // } else if (cur_system === "singalOptimizat") {
      //   api = api_getCrossData_opt;
      // }
      api_getCrossData(params).then((res) => {
        if (!res || !res) {
          return;
        }
        const data = res.content.dirList;
        // const data = [
        //   { dir: 1, laneList: [{ direction: 1, laneType: 1 }] },
        //   { dir: 3, laneList: [{ direction: 1, laneType: 1 }] },
        //   { dir: 4, laneList: [{ direction: 8, laneType: 1 }] },
        // ];
        this.crossIndex = res.content.crossIndex;
        let dirMaps = {};
        data.forEach((item) => {
          const obj = {
            1: "1",
            2: "3",
            3: "3",
            4: "5",
            5: "5",
            6: "7",
            7: "7",
            8: "1",
          };
          item.dir = obj[item.dir];
          if (!dirMaps[item.dir]) {
            dirMaps[item.dir] = {};
          }
          dirMaps[item.dir].status = item.status;
          dirMaps[item.dir].traffic_index = item.traffic_index;
          dirMaps[item.dir].length = item.length;
          dirMaps[item.dir].duration = item.duration;
          if (!item.laneList) {
            return;
          }
          const data = item.laneList.map((item) => {
            return {
              laneId: item.id,
              direction: String(item.direction),
            };
          });
          dirMaps[item.dir].vehicle =
            this.type === "mainCross" ? data.splice(0, 3) : data;
        });
        this.setCrossInit(dirMaps);
      });
    },
    /**@argument
     * 渲染路口
     */
    setCrossInit(dirMaps) {
      // var dirMaps = res.data.data.dir || {};
      var dirList = [];
      var withLane = -Infinity;
      var heightLane = -Infinity;
      //路口方向类型：1 北 2 东北 3 东 4 东南 5 南 6 西南 7 西 8 西北

      var withMaps = [1, 5];
      var heightMaps = [3, 7];
      //var roadName = ['凤翔伦桂路', '博奥城路']

      var outlenMas = {
        1: "5",
        5: "1",
        3: "7",
        7: "3",
      };
      var dirNameMaps = {
        1: "北",
        3: "东",
        5: "南",
        7: "北",
      };
      //1 北 2 东北 3 东 4 东南 5 南 6 西南 7 西 8 西北

      var allRadius = ["北左", "北右", "南左", "南右"];
      var dirRadius = {
        1: ["北右", "北左"],
        3: ["北左", "南右"],
        5: ["南左", "南右"],
        7: ["北右", "南左"],
      };
      var allDir = ["1", "3", "5", "7"];
      for (var key in dirMaps) {
        //var list = dirMaps[key] || [];
        var dir = dirMaps[key] || [];
        dir.dirName = dirNameMaps[key];
        allDir = removeStr(allDir, key);
        var pedestrian = dir.pedestrian || dir["pedestrian "];
        var vehicle = dir.vehicle;
        var roadName = vehicle[0].crossDirName || "";

        var newList = [];
        var list = vehicle;
        var length = list.length;
        //var name = roadName[index%2]
        var outLane = outlenMas[key];

        var dirJson = {
          traffic_index: dir.traffic_index,
          length: dir.length,
          duration: dir.duration,
          status: dir.status,
          dirType: key,
          list: list,
          roadName: roadName,
          outLane: outLane,
          isRoad: true,
          pedestrian: pedestrian, //
        };
        dirList.push(dirJson);
        key = parseInt(key);
        if (withMaps.indexOf(key) > -1) {
          withLane = withLane > length ? withLane : length;
        }
        if (heightMaps.indexOf(key) > -1) {
          heightLane = heightLane > length ? heightLane : length;
        }
      }
      if (allDir.length > 0) {
        // 缺1   是     上
        // 缺 3

        allDir.forEach((item) => {
          var rlist = dirRadius[item] || [];
          allRadius = removeArrayStr(allRadius, rlist);

          var dirKey = item;
          var json = {
            dirType: dirKey,
            list: [],
            roadName: "",
            outLane: [],
            isRoad: false,
          };
          dirList.push(json);
        });
      }
      dirList.forEach((item) => {
        item.defectDir = allDir;
        item.allRadius = allRadius;
      });
      var dirList2 = this.getSortLIst(dirList);
      dirList2.forEach((item) => {});
      var maxlane = withLane > heightLane ? withLane : heightLane;
      if (withLane <= 0) {
        withLane = heightLane;
      }
      if (heightLane <= 0) {
        heightLane = withLane;
      }
      console.log(maxlane);
      if (maxlane < 10) {
        if (maxlane <= 2) {
          this.laneWidth =
            this.type === "opCross" || this.type === "mainCross" ? 20 : 26;
        } else if (maxlane <= 4) {
          this.laneWidth = this.type === "opCross" ? 14 : 16;
        } else {
          this.laneWidth = this.type === "opCross" ? 10 : 12;
        }
        this.laneImgWidth = this.laneWidth - 10;
      } else {
        this.laneWidth = 50 - (maxlane - 4) * 5;
      }
      withLane = withLane * (this.type === "planSend" ? 4 : 2);
      heightLane = heightLane * (this.type === "planSend" ? 4 : 2);
      var ml = this.getPxToRem((withLane * this.laneWidth) / 2);
      this.crossCenter = {
        //width: withLane * this.laneWidth + "px",
        width: this.getPxToRem(withLane * this.laneWidth) + "rem",

        //height: heightLane * this.laneWidth + "px",
        height: this.getPxToRem(heightLane * this.laneWidth) + "rem",

        //"margin-left": -(withLane * this.laneWidth / 2) + "px",
        "margin-left": -ml + "rem",
        "margin-top":
          -this.getPxToRem((heightLane * this.laneWidth) / 2) + "rem",
      };
      var centerWidth = 0;
      centerWidth = withLane > heightLane ? heightLane : withLane;
      console.log(centerWidth);
      var xs = 0.6;
      this.centeBoxStyle = {
        width:
          this.getPxToRem(centerWidth * this.laneWidth * xs) + 0.25 + "rem",
        height:
          this.getPxToRem(centerWidth * this.laneWidth * xs) + 0.25 + "rem",
        "margin-top":
          this.getPxToRem(
            (heightLane * this.laneWidth - centerWidth * this.laneWidth * xs) /
              2
          ) + "rem",
        "margin-bottom":
          this.getPxToRem(
            (heightLane * this.laneWidth - centerWidth * this.laneWidth * xs) /
              2
          ) + "rem",
        "margin-left":
          this.getPxToRem(
            (withLane * this.laneWidth - centerWidth * this.laneWidth * xs) / 2
          ) +
          0.2 +
          "rem",
        "margin-right":
          this.getPxToRem(
            (withLane * this.laneWidth - centerWidth * this.laneWidth * xs) / 2
          ) + "rem",
      };
      if (allDir.indexOf("7") > -1) {
        this.crossCenter["margin-left"] =
          -this.getPxToRem(withLane * this.laneWidth * 0.75) + "rem";
      }
      if (allDir.indexOf("3") > -1) {
        this.crossCenter["margin-left"] =
          -this.getPxToRem(withLane * this.laneWidth * 0.255) + "rem";
      }
      if (allDir.indexOf("1") > -1) {
        this.crossCenter["margin-top"] =
          -this.getPxToRem(heightLane * this.laneWidth * 0.75) + "rem";
      }
      if (allDir.indexOf("5") > -1) {
        this.crossCenter["margin-top"] =
          -this.getPxToRem(heightLane * this.laneWidth * 0.25) + "rem";
      }
      dirList2.forEach((item) => {
        item.crossCenter = this.crossCenter;
      });
      if (dirList2.length == 0) {
        this.$message.error("该路口无车道数据");
        //this.imgSrc = "";

        //this.getmapLine({}, 1);
      }
      this.dirList = dirList2;
    },
    getSortLIst(dirList) {
      var dirList2 = dirList.sort(function (a, b) {
        var value2 = parseInt(b["dirType"]);
        var value1 = parseInt(a["dirType"]);
        return value1 - value2;
      });
      return dirList2;
    },
    /**@argument
     * 渲染路口线的样式
     */
    getLaneStyle(item) {
      // 路口方向类型：1 北 2 东北 3 东 4 东南 5 南 6 西南 7 西 8 西北
      var crossCenter = item.crossCenter;
      var dirType = item.dirType;
      var width = crossCenter.width.replace("px", "").replace("rem", "");
      var height = crossCenter.height.replace("px", "").replace("rem", "");
      height = Number(height);
      width = Number(width);
      var lineHeight = this.lineHeight;
      var isRoad = item.isRoad;
      var defectDir = item.defectDir || [];
      var defectDirStr = defectDir.join("");
      //这是因为有可能2个值不一样

      var remLineHeight = this.getPxToRem(lineHeight);
      lineHeight = remLineHeight;

      var diff = height - remLineHeight;
      var left = 0,
        size = 0,
        top = 0,
        bottom = 0;
      if (dirType == 5) {
        if (isRoad) {
          return {
            left: 0 + "px",
            top: height + this.getPxToRem(1) + "rem",
            height: remLineHeight + "rem",
            width: width + "rem",
          };
        } else {
          size = 0;
          left = -this.getPxToRem(20);
          if (defectDirStr == "5") {
            size = this.getPxToRem(40);
            width += size;
            left = -size / 2;
          } else if (defectDirStr == "57") {
            size = this.getPxToRem(20);
            width += size;
            left = 0;
          } else if (defectDirStr == "35") {
            size = this.getPxToRem(20);
            width += size;
            left = -this.getPxToRem(20);
          } else if (defectDirStr == "15") {
            size = this.getPxToRem(40);
            width += size;
            left = -this.getPxToRem(20);
          }
          //width += 80;
          return {
            left: left + "rem",
            top: height + this.getPxToRem(1) + "rem",
            height: lineHeight + "rem",
            width: width + "rem",
          };
        }
      }
      if (dirType == 1) {
        if (isRoad) {
          return {
            left: 0 + "px",
            top: -lineHeight + this.getPxToRem(1) + "rem",
            height: lineHeight + "rem",
            width: width + "rem",
          };
        } else {
          left = 0;
          top = -lineHeight + this.getPxToRem(1);
          if (defectDirStr == "17") {
            width += this.getPxToRem(20);
          } else if (defectDirStr == "13") {
            width += this.getPxToRem(20);
            left = -this.getPxToRem(20);
          } else {
            width += this.getPxToRem(40);
            left = -this.getPxToRem(40);
          }

          return {
            left: left + "rem",
            top: top + "rem",
            height: lineHeight + "rem",
            width: width + "rem",
          };
        }
      }

      if (dirType == 7) {
        if (isRoad) {
          return {
            left: -height + diff / 2 + "rem",
            top: diff / 2 + "rem",
            height: lineHeight + "rem",
            width: height + "rem",
          };
        } else {
          size = 0;
          left = -height + diff / 2;
          top = diff / 2;
          if (this.type === "mainCross") {
          } else if (defectDirStr == "7") {
            size = this.getPxToRem(40);
            height += size;
            left = left - size / 2 + 0.01;
            //top = top
          } else if (defectDirStr == "57") {
            size = this.getPxToRem(20);
            height += size;
            left = left - size / 2;
            top = top - this.getPxToRem(20);
          } else if (defectDirStr == "17") {
            height += this.getPxToRem(20);
            size = 20;
            left = left - this.getPxToRem(20);
            top = top + this.getPxToRem(20);
          } else if (defectDirStr == "37") {
            height += this.getPxToRem(20);
            left = left - this.getPxToRem(20);
            //top = top;
          } else {
          }
          return {
            left: left + "rem",
            top: top + "rem",
            height: lineHeight + "rem",
            width: height + "rem",
          };
        }
      }

      if (dirType == 3) {
        if (isRoad) {
          return {
            left: width - diff / 2 + "rem",
            top: diff / 2 + this.getPxToRem(2) + "rem",
            height: lineHeight + "rem",
            width: height + "rem",
          };
        } else {
          left = width - diff / 2;
          top = diff / 2 + this.getPxToRem(1);
          size = this.getPxToRem(40);
          if (defectDirStr == "35") {
            size = this.getPxToRem(20);
            width += size;
            left = left - this.getPxToRem(20);
            top = top - this.getPxToRem(19);
          } else if (defectDirStr == "13") {
            size = this.getPxToRem(20);
            width += size;
            left = left - this.getPxToRem(10);
            top = top + this.getPxToRem(10);
          } else if (defectDirStr == "37") {
            left = left - this.getPxToRem(20);
            //top = top;
          } else {
            left = left - this.getPxToRem(20);
          }
          height += size;
          return {
            left: left + "rem",
            top: top + "rem",
            height: lineHeight + "rem",
            width: height + "rem",
          };
        }
      }
    },
    /**@argument
     * 渲染方向图片
     */
    getLaneImg(item, paranItem, isNoCrossLamp) {
      var phaseDist = {
        1: "1",
        5: "1",
        10: "1",
        14: "1",
        16: "1",
        8: "2",
        2: "2",
        9: "2",
        12: "2",
        13: "2",
        15: "2",
        18: "2",
        3: "3",
        4: "4",
      };
      var dirType = paranItem.dirType;
      var direction = item.direction || "";
      if (isNoCrossLamp == "1") {
        direction = "4";
      }
      if (direction == 0 || !direction) {
        return "";
      }
      var srcUrl = "phase_lane_" + direction;

      var dirLampGroupMap = this.dirLampGroupMap || {};
      var dirMap = dirLampGroupMap[dirType] || {};
      var color = dirMap[phaseDist[direction]] || "";
      color = color.trim();
      if (color) {
        color = color.replace("lightsOut", "");
        color = color == "greenFlash" ? "drakGreen" : color;
        color = color == "yellowFlash" ? "yellow" : color;
        color = color == "redFlash" ? "red" : color;

        if (color) {
          srcUrl = srcUrl + "_" + color;
        }
      } else {
        //  如果 改 车道灯 没有获取到颜色值
        // 判断 是否 5 为有颜色 否
        // 如果有 在直接赋值 并且为左转 及灯态方向 为1
        // 如果没有值  在判断
        var colorAll = "";
        var allLampGroup = dirMap["5"];
        if (allLampGroup != undefined && allLampGroup["5"] != null) {
          if (direction != 3) {
            colorAll = allLampGroup;
          }
        } else {
          if (dirMap[direction] != undefined) {
            colorAll = dirMap[direction];
          } else if (direction == 1) {
            colorAll = dirMap["2"];
          } else if (direction == 3 && this.isNull(dirMap[direction])) {
            colorAll = "green";
          }
        }
        colorAll = colorAll == "greenFlash" ? "drakGreen" : colorAll;
        colorAll = colorAll == "lightsOut" ? "" : colorAll;
        colorAll = colorAll == "yellowFlash" ? "yellow" : colorAll;
        colorAll = colorAll == "redwFlash" ? "red" : colorAll;
        if (colorAll) {
          srcUrl = srcUrl + "_" + colorAll;
        }
      }
      srcUrl += ".png";
      var str = require("@/assets/images/crossDirImgs/" + srcUrl);
      return str;
    },
    isNull(str) {
      return str != "" || str != undefined || str;
    },
    getWayImg(item) {
      //var direction = item.direction;
      var direction = "21";
      var srcUrl = "phase_lane_" + direction + ".png";
      var str = require("@/assets/images/crossDirImgs/" + srcUrl);
      //return str;
      return {
        "background-image": 'url("' + str + '") ',
      };
    },
    isShowRadius(item, index, type) {
      var name = "";
      if (type == "left") {
        name = index == "0" ? "北左" : "南左";
      } else {
        name = index == "0" ? "北右" : "南右";
      }
      var allRadius = item.allRadius || [];
      var status = allRadius.indexOf(name) > -1;
      return status;
    },
    getPxToRem(px) {
      var rem = getPxToRem(px);
      return rem;
    },
  },
};
</script>

<style lang="less">
.m-txt {
  position: absolute;
  color: #000;
  right: -50px;
  bottom: 20px;
}
.min-txt {
  position: absolute;
  color: #000;
  right: -35px;
  bottom: 20px;
}
#id_map_center_cross {
  /*z-index: 2000;*/
  width: 100%;
  height: 100%;
  position: relative;
}
#id_map_center_cross .mapContainerBtn {
  position: absolute;
  right: 0.1rem;
  bottom: 0;
  width: auto;
  height: 0.6rem;
  width: 0.4rem;
}
.mapContainerBtn .mapbtns {
  width: 0.4rem;
  height: 0.25rem;
  background: white;
  text-align: center;
  line-height: 0.25rem;
  cursor: pointer;
  margin-bottom: 0.1rem;
  color: #000;
  z-index: 1;
}
#imgSrcMap {
  width: 100%;
  height: 100%;
  position: relative;
}

.mapContainer {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
}
/*#id_map_center .mapabcgl-ctrl-bottom-left {
		left: 830px;
		position: absolute;
	}*/
/**
	 * 这里是自定义路口的样式
	 */

.drawCross {
  width: 100%;
  height: 100%;
  position: relative;
  /*padding-top: 100px;
		height: calc(100% - 100px) !important;*/
}

.drawCross .crossCenter {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 200px;
  height: 200px;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -100px;
  margin-top: -100px;
  /*border: 0.0115rem solid ##ffffff;*/
}

.crossCenter .crossCenterBox {
  margin: 0 auto;
  /*border-radius: 100%;
		border: 0.0115rem solid #ffffff;*/
  width: 100px;
  height: 100px;
  position: absolute;
  text-align: center;
  min-width: 0.8rem;
  min-height: 0.8rem;
}

.drawCross .crossCenter .carmeaBox {
  width: 30px;
  height: 30px;
  position: absolute;
  background-size: 100%;
  background-repeat: no-repeat;
  cursor: pointer;
  z-index: 1;
}

.crossCenterBox_warp {
  display: flex;
  width: 100%;
  height: 100%;
  position: relative;
  border: 0.0115rem solid #ffffff;
  border-radius: 100%;
}

.crossCenter .crossCenterBox p {
  align-items: center;
  /*垂直居中*/
  justify-content: center;
  /*水平居中*/
  display: flex;
  flex: 1;
  font-size: 16px;
  color: #666;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.drawCross .crossLane {
  position: absolute;
  left: 50%;
  top: 50%;
}

.drawCross .drawCrossWarp {
  /*width: 950px;*/
  width: 100%;
  height: 100%;
  margin: 0 auto;
  position: relative;
  background: #101010;
  overflow: hidden;
}

.drawCross .drawCrossWarp .corssDir {
  position: absolute;
  right: 10px;
  top: 70px;
  /*width: 145px;
		height: 150.0115rem;*/
  width: 125px;
}

.drawCross .drawCrossWarp .corssDir img {
  width: 100%;
  height: auto;
}

.drawCross .drawCrossWarp .crossLane {
  width: 200px;
  color: #ffffff;
}

.drawCross .drawCrossWarp .crossLane .crossLaneWarp {
  width: 100%;
  height: 100%;
  position: relative;
  display: flex;
  border-left: 0.0115rem solid #ffffff;
  border-right: 0.0115rem solid #ffffff;
}

.drawCross .drawCrossWarp .crossLane .crossLaneWarp.crossLaneWarpNotRoad {
  border: none;
  border-top: 0.0115rem solid #ffffff;
}
/*
	   1 北 2 东北 3 东 4 东南 5 南 6 西南 7 西 8 西北

	 * 
	 * */

.crossLane_1 {
  transform: rotate(180deg);
}

.crossLane_3 {
  transform: rotate(270deg);
}

.crossLane_5 {
}

.crossLane_7 {
  transform: rotate(90deg);
}

.drawCross .drawCrossWarp .crossLaneWarp.crossLaneWarp_5 {
}

.drawCross .drawCrossWarp .crossLaneWarp.crossLaneWarp_1 {
  transform: rotate(180deg);
}

.drawCross .drawCrossWarp .crossLaneWarp.crossLaneWarp_3 {
  transform: rotate(270deg);
}

.drawCross .drawCrossWarp .crossLaneWarp.crossLaneWarp_7 {
  transform: rotate(90deg);
}
/*.drawCross .drawCrossWarp .crossLaneWarp.crossLaneWarp_5 {
		left: -100px;
		top: 100.0115rem;
	}
	
	.drawCross .drawCrossWarp .crossLaneWarp.crossLaneWarp_1 {
		left: -100px;
		top: -400.0115rem;
		transform:rotate(180deg);
	}
	
	.drawCross .drawCrossWarp .crossLaneWarp.crossLaneWarp_3 {
		left: 150.0115rem;
		top: -149px;
		transform:rotate(270deg);
	}
	.drawCross .drawCrossWarp .crossLaneWarp.crossLaneWarp_7{
		transform:rotate(90deg);
		left: -350.0115rem;
		top: -149px;
	}*/

.crossLane .crossLane_in,
.crossLane .crossLane_out {
  flex: 1;
  height: 100%;
  width: 50%;
  display: flex;
  position: relative;
  overflow: hidden;
}

.drawCross .drawCrossWarp .crossLane .crossLane_in {
  border-left: 0.0115rem solid #ffffff;
}

.drawCross .drawCrossWarp .crossLane .crossLane_out {
  border-right: 0.0115rem solid #ffffff;
}

.drawCross .drawCrossWarp .crossLane .crossLane_way {
  position: absolute;
  width: 100%;
  height: 0.2305rem;
  background-size: auto 0.2305rem;
  background-repeat: repeat;
}

.drawCross .drawCrossWarp .crossLane .crossLane_way img {
}

.drawCross .drawCrossWarp .crossLane .crossLane_out .carLane {
  flex: 1;
  height: 100%;
  border-right: 0.0115rem dashed #ffffff;
}

.drawCross .drawCrossWarp .crossLane .carLaneBox .carLane:last-child {
  border: none;
}

.drawCross .drawCrossWarp .crossLane .crossLane_in .carLane {
  flex: 1;
  height: 100%;
  border-right: 0.0115rem solid #ffffff;
}

.drawCross .drawCrossWarp .crossLane .carLaneBox .carLane img {
  /*width: 20px;*/
  width: auto;
  height: 0.3458rem;
  vertical-align: middle;
  display: block;
  margin: 0 auto;
  margin-top: 0.2305rem;
}

.drawCross .drawCrossWarp .crossLane .carLaneBox .carLane img:nth-child(2) {
  margin-top: 0.1153rem;
}

.drawCross .drawCrossWarp .crossLane .carLaneBox.crossLane_out .two_way {
  background-size: auto 0.2882rem;
  background-repeat-x: repeat;
  background-repeat-y: no-repeat;
  position: absolute;
  width: 96%;
  height: 0.3458rem;
}

.drawCross .drawCrossWarp .crossLane .carLaneBox.crossLane_in .two_way {
  background-size: auto 25px;
  background-repeat-x: repeat;
  background-repeat-y: no-repeat;
  position: absolute;
  width: 96%;
  height: 0.3458rem;
  margin-left: 4%;
}

.drawCross .drawCrossWarp .crossLane .carLaneBox .roadName {
  color: rgba(255, 255, 255, 0.75);
  position: absolute;
  width: 0.2882rem;
  left: 50%;
  margin-left: -0.1153rem;
  top: 0.2305rem;
  font-size: 0.1844rem;
  letter-spacing: 0.0231rem;
  height: calc(100% - 40px);
}

.crossLaneWait_warp {
  width: 100%;
  height: 0.2305rem;
  position: relative;
  object-fit: inherit;
}

.crossLaneWait_warp .crossLaneWaitLeft {
  position: absolute;
  top: -2px;
  left: -0.2536rem;
  border-top: 0.0115rem solid #ffffff;
  border-right: 0.0115rem solid #ffffff;
  width: 0.2605rem;
  height: 0.2605rem;
  border-top-right-radius: 100%;
}

.crossLaneWait_warp .crossLaneWaitRight {
  position: absolute;
  right: -0.2536rem;
  border-top: 0.0115rem solid #ffffff;
  border-left: 0.0115rem solid #ffffff;
  width: 0.2605rem;
  height: 0.2605rem;
  border-top-left-radius: 100%;
}

.carLane {
  text-align: center;
}

.phase-btn:hover {
  cursor: pointer;
  margin-top: 10px;
  border: 3px solid #fff;
  -webkit-box-shadow: 2px 3px 0px 3px #1c1b1b;
  box-shadow: 2px 3px 0px 3px #1c1b1b;
  border-radius: 5px;
}

.phase-btn {
  cursor: pointer;
  margin-top: 10px;
  border: 2px solid #979494;
  -webkit-box-shadow: 2px 3px 0px 3px #1c1b1b;
  box-shadow: 3px 3px 4px 4px #28073d;
  border-radius: 8px;
}

.nextTimeLength:hover,
.nextTimeLength.hover,
.nextTimeLength:hover > span {
  color: #409eff !important;
}

#id_map_center_cross .mapabcgl-scalebox {
}
</style>
