<template>
  <div class="crossDetail">
    <div class="crossDetailHead">
      <span>{{ crossDetailData.name }}</span
      ><i class="el-icon-close" @click="closeDetail"></i>
    </div>
    <div class="content">
      <div class="left-side">
        <div class="left-top">
          <CrossControl :cross-control-data="crossPropData"/>
        </div>
        <div class="left-bottom">
          <simple-card title="路口交通指标">
            <div
                class="left-bottom-in"
                v-loading="leftIndexLoading"
                element-loading-spinner="el-icon-loading"
                element-loading-background="rgba(0,0,0, 0.4)"
            >
              <div class="item" :title="`服务水平：${serviceLevelVal}`">
                服务水平：{{ serviceLevelVal }}
              </div>
              <div class="item" :title="`平均运行速度：${speedVal}km/h`">
                平均运行速度：{{ speedVal }} km/h
              </div>
              <div class="item" :title="`路口饱和度：${saturationVal}`">
                路口饱和度：{{ saturationVal }}
              </div>
              <div class="item" :title="`平均停车次数：${stopNumVal}`">
                平均停车次数：{{ stopNumVal }}
              </div>
              <div class="item" :title="`拥堵指数：${congestIndexVal}`">
                拥堵指数：{{ congestIndexVal }}
              </div>
              <div class="item" :title="`最大排队长度：${maxQueueLengthVal}m`">
                最大排队长度：{{ maxQueueLengthVal }} m
              </div>
              <div class="item" :title="`小时流量：${hourFlowVal}pcu/h`">
                小时流量：{{ hourFlowVal }} pcu/h
              </div>
              <div class="item" :title="`近一周违法数：${illegalNumVal}`">
                近一周违法数：{{ illegalNumVal }}
              </div>
              <div class="item" :title="`峰值流量：${peakFlowVal}pcu/h`">
                峰值流量：{{ peakFlowVal }} pcu/h
              </div>
              <div class="item" :title="`近一周事故数：${accidentNumVal}`">
                近一周事故数：{{ accidentNumVal }}
              </div>
            </div>
          </simple-card>
        </div>
      </div>
      <div class="right-side">
        <el-tabs
            style="height: 100%"
            v-model="activeName"
            @tab-click="handleClick"
            :stretch="true"
            v-loading="tabLoading"
            element-loading-text="数据加载中..."
            element-loading-spinner="el-icon-loading"
            element-loading-background="rgba(0,0,0, 0.4)"
        >
          <el-tab-pane label="进口交通指标" name="first">
            <div class="tab">
              <div class="tab-row top">
                <el-table
                    class="crossDetail-table1"
                    cell-class-name="custom-table-cell"
                    header-row-class-name="tab-table-header"
                    header-cell-class-name="tab-table-header-cell"
                    :data="jkTableData"
                    height="100%"
                    style="width: 100%"
                >
                  <el-table-column min-width="50" label="进口指标">
                    <template slot-scope="scope">
                      {{ dirDic[scope.row.ridDir] }}
                    </template>
                  </el-table-column>
                  <el-table-column
                      prop="trafficIndex"
                      min-width="50"
                      label="交通指数"
                  >
                  </el-table-column>
                  <el-table-column
                      prop="trafficState"
                      min-width="50"
                      label="交通状态"
                  >
                  </el-table-column>
                  <el-table-column
                      prop="capacity"
                      min-width="60"
                      label="通行能力(pcu/h)"
                  >
                  </el-table-column>
                  <el-table-column
                      prop="flow"
                      min-width="65"
                      label="交通流量(pcu/5min)  "
                  >
                  </el-table-column>
                  <el-table-column
                      prop="saturation"
                      min-width="50"
                      label="饱和度(%)"
                  >
                  </el-table-column>
                  <el-table-column
                      prop="queueLength"
                      min-width="50"
                      label="排队长度(m)"
                  >
                  </el-table-column>
                  <el-table-column
                      prop="speed"
                      min-width="60"
                      label="平均速度(km/h)"
                  >
                  </el-table-column>
                  <el-table-column
                      prop="delayTime"
                      min-width="50"
                      label="平均延误(s)"
                  >
                  </el-table-column>
                  <el-table-column
                      prop="stopNum"
                      min-width="50"
                      label="平均停车次数"
                  >
                  </el-table-column>
                </el-table>
              </div>
              <div class="tab-row center">
                <div class="chart-container half-w">
                  <simple-card title="各进口流量趋势图">
                    <div id="row-leftchart" class="full-w-h"></div>
                  </simple-card>
                </div>
                <div class="chart-container half-w">
                  <simple-card title="各进口排队长度趋势">
                    <div id="row-rightchart" class="full-w-h"></div>
                  </simple-card>
                </div>
              </div>
              <div class="tab-row bottom">
                <div class="chart-container full-w">
                  <simple-card title="各进口交通状态趋势">
                    <div class="gradiant-container">
                      畅通<span class="colors-gradiant"></span>拥堵
                    </div>
                    <div id="row-bottomchart" class="full-w-h"></div>
                  </simple-card>
                </div>
              </div>
            </div>
          </el-tab-pane>
          <el-tab-pane label="转向交通指标" name="second">
            <div class="tab">
              <div class="tab-row top">
                <el-table
                    height="100%"
                    class="crossDetail-table1"
                    cell-class-name="custom-table-cell"
                    header-row-class-name="tab-table-header"
                    header-cell-class-name="tab-table-header-cell"
                    :data="zxTableData"
                    style="width: 100%"
                >
                  <el-table-column
                      prop="zxIndex"
                      min-width="50"
                      label="转向指标"
                  >
                  </el-table-column>
                  <el-table-column
                      prop="flow"
                      min-width="50"
                      label="交通流量(pcu)"
                  >
                  </el-table-column>
                  <el-table-column
                      prop="speed"
                      min-width="50"
                      label="平均速度(km/h)"
                  >
                  </el-table-column>
                  <el-table-column
                      prop="queueLength"
                      min-width="50"
                      label="排队长度(m)"
                  >
                  </el-table-column>
                  <el-table-column
                      prop="greenUsageRate"
                      min-width="50"
                      label="绿灯有效利用率"
                  >
                  </el-table-column>
                  <el-table-column
                      prop="stopNum"
                      min-width="50"
                      label="平均停车次数"
                  >
                  </el-table-column>
                  <el-table-column
                      prop="onceStopRate"
                      min-width="50"
                      label="一次停车率(%)"
                  >
                  </el-table-column>
                  <el-table-column
                      prop="secondStopRate"
                      min-width="50"
                      label="二次停车率(%)"
                  >
                  </el-table-column>
                </el-table>
              </div>
              <div class="tab-row center">
                <div class="chart-container half-w">
                  <simple-card title="转向交通流量趋势图">
                    <div id="row-leftchart2" class="full-w-h"></div>
                  </simple-card>
                </div>
                <div class="chart-container half-w">
                  <simple-card title="各转向停车次数趋势">
                    <div id="row-rightchart2" class="full-w-h"></div>
                    <div class="chart-title"></div>
                  </simple-card>
                  <el-select
                      class="third-select"
                      @change="secondStopChange"
                      v-model="secondStop"
                      placeholder="请选择"
                  >
                    <el-option
                        v-for="(item, index) of secondStopOptions"
                        :key="index"
                        :label="`${dirDic[item.dir]}${
                        roadTurnDic[item.turnDirNo]
                      }`"
                        :value="`${item.dir}${item.turnDirNo}`"
                    >
                    </el-option>
                  </el-select>
                </div>
              </div>
              <div class="tab-row bottom">
                <div class="chart-container full-w">
                  <simple-card title="各转向交通状态趋势">
                    <div class="gradiant-container">
                      畅通<span class="colors-gradiant"></span>拥堵
                    </div>
                    <div id="row-bottomchart2" class="full-w-h"></div>
                  </simple-card>
                </div>
              </div>
            </div>
          </el-tab-pane>
          <el-tab-pane label="车道交通指标" name="third">
            <div class="tab">
              <div class="tab-row top">
                <el-tabs
                    style="height: 100%"
                    v-model="activeName1"
                    :stretch="true"
                    @tab-click="tab1Click"
                >
                  <el-tab-pane
                      v-for="(item, index) of roadTables"
                      :key="index"
                      :label="`${dirDic[item.dir]}进口`"
                      :name="item.dir"
                  >
                    <el-table
                        height="100%"
                        style="width: 100%"
                        class="crossDetail-table1"
                        cell-class-name="custom-table-cell"
                        header-row-class-name="tab-table-header"
                        header-cell-class-name="tab-table-header-cell"
                        :data="item.list"
                    >
                      <el-table-column min-width="50" label="车道指标">
                        <template slot-scope="scope">
                          {{ translateToRoad(scope) }}
                        </template>
                      </el-table-column>
                      <el-table-column
                          prop="queueLength"
                          min-width="50"
                          label="排队长度（m）"
                      >
                      </el-table-column>
                      <el-table-column
                          prop="delayTime"
                          min-width="50"
                          label="平均延误（s）"
                      >
                      </el-table-column>
                      <el-table-column
                          prop="saturation"
                          min-width="50"
                          label="饱和度（%）"
                      >
                      </el-table-column>
                      <el-table-column
                          prop="speed"
                          min-width="50"
                          label="平均速度（km/h）"
                      >
                      </el-table-column>
                      <el-table-column
                          prop="flow"
                          min-width="50"
                          label="交通流量（pcu）"
                      >
                      </el-table-column>
                      <el-table-column
                          prop="stopNum"
                          min-width="50"
                          label="平均停车次数"
                      >
                      </el-table-column>
                      <el-table-column
                          prop="onceStopRate"
                          min-width="50"
                          label="一次停车率（%）"
                      >
                      </el-table-column>
                      <el-table-column
                          prop="secondStopRate"
                          min-width="50"
                          label="二次停车率（%）"
                      >
                      </el-table-column>
                    </el-table>
                  </el-tab-pane>
                </el-tabs>
              </div>
              <div class="tab-row center">
                <div class="chart-container half-w">
                  <simple-card title="车道交通流量趋势图">
                    <div id="row-leftchart3" class="full-w-h"></div>
                  </simple-card>
                </div>
                <div class="chart-container half-w">
                  <el-select
                      class="third-select"
                      @change="activeName2Change"
                      v-model="activeName2"
                      placeholder="请选择"
                  >
                    <el-option
                        v-for="(item, index) of roadOptions"
                        :key="index"
                        :label="item.label"
                        :value="item.laneNo"
                    >
                    </el-option>
                  </el-select>
                  <simple-card title="各车道停车次数趋势">
                    <div id="row-rightchart3" class="full-w-h"></div>
                  </simple-card>
                </div>
              </div>
              <div class="tab-row bottom">
                <div class="chart-container full-w">
                  <simple-card title="各车道交通状态趋势">
                    <div class="gradiant-container">
                      畅通<span class="colors-gradiant"></span>拥堵
                    </div>
                    <div id="row-bottomchart3" class="full-w-h"></div>
                  </simple-card>
                </div>
              </div>
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>
  </div>
</template>

<script>
import {getFontSize} from "../../../config/holo/fontSize.js";
import {
  crossIndex,
  getRoadsTurn,
  inletWayRealTime,
  inletWayTimeBetw,
  inletWayTurnRealTime,
  inletWayTurnTimeBetw,
  roadRealTime,
  roadTimeBetw,
} from "../../../dao/situation";
import SimpleCard from "../../../components/Standard/simple-card.vue";
import CrossControl from "../../../components/CrossControl/crossControl.vue";

let roadTrafficChart = null,
    turnFlowTrendChart = null,
    turnTrafficStateTrendChart = null,
    crossInTrafficTrendChart = null,
    secondStopChart = null,
    roadTrafficStateTrendChart = null,
    roadStopNumChart = null,
    crossInFlowTrendChart = null,
    crossInLengthTrendChart = null;
export default {
  components: {SimpleCard, CrossControl},
  name: "crossDetail",
  data() {
    return {
      tabLoading: true,
      crossIndexes: {},
      leftIndexLoading: true,
      activeName2: "",
      roadOptions: [],
      secondStopOptions: [],
      secondStop: "",
      secondStopAllData: "",
      dirDic: {
        1: "北",
        2: "东北",
        3: "东",
        4: "东南",
        5: "南",
        6: "西南",
        7: "西",
        8: "西北",
      },
      roadTurnDic: {
        1: "左转",
        2: "直行",
        3: "右转",
        4: "掉头",
        5: "直左",
        6: "直右",
        7: "左直右",
        8: "左右",
        9: "左转掉头",
        10: "直行掉头",
        11: "右转掉头",
        12: "左直掉头",
        13: "直右掉头",
        14: "左直右掉头",
        15: "左右掉头",
      },
      jkTableData: [],
      zxTableData: [],
      cdTableData: [],
      roadTables: [],
      activeName: "first",
      activeName1: "",
      roadData: {
        trafficFlow: [],
        stopNums: [],
      },
      roadTurnMap: [],
      sendData: {crossId: ""},
    };
  },
  props: {
    crossDetailData: {
      type: Object,
      default: () => {
        return {
          name: '旅游路与霞景路交叉口',
          id: '13NF80B5QN0',
        }
      }
    },
    dialogId: {
      type: String,
      default: () => {
        return ''
      }
    }
  },
  mounted() {
    this.sendData.crossId = this.crossDetailData.id;
    this.loadfirstChart();
    this.getRoadsTurnTo();
    this.loadCrossIndex();
  },
  methods: {
    isValid(prop) {
      if (prop === 0) return prop;
      return prop || "--";
    },
    // 左侧指标
    loadCrossIndex() {
      this.leftIndexLoading = true;
      crossIndex(this.sendData).then((res) => {
        // console.log("交通指标", res.content);
        this.crossIndexes = res.content;
        this.leftIndexLoading = false;
      });
    },
    // 转向交通指标 转向 select change
    secondStopChange(e) {
      this.updateSecondStopChart(this.secondStopAllData);
    },
    // 字典翻译 车道号 => 转向+车道号
    translateToRoad(scope) {
      //   // console.log("scope.row", scope);
      //   // console.log(this.roadTurnMap);
      for (let item of this.roadTurnMap) {
        if (scope.row.ridDir === item.dir) {
          for (let it of item.laneList) {
            if (it.laneId === scope.row.laneId) {
              return `${this.roadTurnDic[it.turnDirNo]}${
                  Number(it.seq) === 0 ? 1 : it.seq
              }车道`;
            }
          }
        }
      }
    },
    // 车道交通指标 select change
    activeName2Change(e) {
      this.roadStopNumsChart(this.roadData.stopNums);
    },
    updateSecondStopChart(content) {
      let optionRight = {
        color: ["#53c188", "#318af5", "#6a38e1", "#6f9cf9"],
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
          confine: true,
        },
        legend: {
          inactiveColor:'rgba(255,255,255,0.7)',
          itemGap: getFontSize(16),
          itemWidth: getFontSize(12),
          itemHeight: getFontSize(12),
          textStyle: {
            color: "rgba(255,255,255,0.9)",
            fontSize: getFontSize(12),
          },
          pageTextStyle: {
            color: "rgba(255,255,255,0.9)",
            fontSize: getFontSize(12),
          },
          pageIconColor: "white",
          pageIconSize: getFontSize(12),
          pageIconInactiveColor: "rgba(255,255,255,0.7)",
          type: "scroll",
        },
        grid: {
          containLabel: true,
          bottom: 0,
          left: 0,
          top: getFontSize(38),
          right: 0,
        },
        xAxis: {
          type: "category",
          data: content.timeList,
          axisLabel: {
            fontSize: getFontSize(12),
            color: "rgba(126, 139, 166, 1)",
          },
          boundaryGap: true,
          axisTick: {
            alignWithLabel: true,
          },
        },
        yAxis: {
          axisTick: {
            show: false,
          },
          axisLine: {
            show: false,
          },
          splitLine: {
            show: true,
            lineStyle: {
              type: "solid",
              // type: "dashed",
              color: "rgba(255, 255, 255, 0.2)",
            },
          },
          type: "value",
          axisLabel: {
            fontSize: getFontSize(12),
            color: "rgba(126, 139, 166, 1)",
          },
        },
        series: (() => {
          let series = [];
          content.dataList.forEach((flow) => {
            if (`${flow.dir}${flow.turnDirNo}` == this.secondStop) {
              series.push({
                name: "平均停车次数",
                type: "line",
                symbol: "none",
                label: {
                  show: false,
                },
                emphasis: {
                  focus: "series",
                },
                data: flow.list1,
              });
              series.push({
                name: "一次停车率",
                type: "bar",
                barWidth: "6",
                label: {
                  show: false,
                },
                emphasis: {
                  focus: "series",
                },
                data: flow.list2,
              });
              series.push({
                name: "二次停车率",
                type: "bar",
                barWidth: "6",
                label: {
                  show: false,
                },
                emphasis: {
                  focus: "series",
                },
                data: flow.list3,
              });
            }
          });
          return series;
        })(),
      };
      secondStopChart?.dispose();
      secondStopChart = echarts.init(
          document.getElementById("row-rightchart2")
      );
      secondStopChart.setOption(optionRight);
      window.addEventListener("resize", () => {
        secondStopChart.resize();
      });
    },
    getRoadsTurnTo() {
      getRoadsTurn(this.sendData).then((res) => {
        // console.log("get roads turn", res.content);
        for (let item of res.content) {
          for (let i = 0; i < item.laneList.length; i++) {
            item.laneList[i].label = `${
                this.roadTurnDic[item.laneList[i].turnDirNo]
            }${
                Number(item.laneList[i].seq) === 0 ? 1 : item.laneList[i].seq
            }车道`;
          }
        }
        this.roadTurnMap = res.content;
      });
    },
    closeDetail() {
      this.$emit("actionFinished", this.dialogId);
    },
    handleClick(tab, event) {
      // console.log("tab", tab);
      this.$nextTick(() => {
        this[`load${tab.name}Chart`]();
      });
    },
    // 车道进口变化 -> 车道list变化 -> 各车道停车趋势变化 -> 车道交通流量趋势图变化
    tab1Click(e) {
      // console.log('left...',this.roadData);
      this.roadTrafficFlowChart(this.roadData.trafficFlow);
      this.roadStopNumsChart(this.roadData.stopNums);
      let match = this.roadTurnMap.filter((item) => {
        return Number(item.dir) === Number(e.name);
      });
      // console.log("match", match);
      let matchTable = this.roadTables.filter((item) => {
        return Number(item.dir) === Number(e.name);
      });
      // console.log("matchTable", matchTable);
      let matchArr = [];
      for (let row of matchTable[0].list) {
        matchArr.push(Number(row.laneNo));
      }

      this.roadOptions = match[0].laneList.filter((item) => {
        return matchArr.includes(item.laneNo);
      });
      this.activeName2 = this.roadOptions[0]?.laneNo;
    },
    roadTrafficFlowChart(content) {
      console.log("ccccccccc", content, this.activeName1);
      let colors = [
        "rgba(24, 144, 255, 1)",
        "rgba(198, 255, 170, 1)",
        "rgba(255, 189, 122, 1)",
        "rgba(218, 244, 255, 1)",
      ];
      let currentDirList = [];

      for (let i = 0; i < content.dataList.length; i++) {
        if (content.dataList[i].dir == this.activeName1) {
          currentDirList.push(content.dataList[i]);
        }
      }
      let optionLeft = {
        color: colors,
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
          confine: true,
          enterable: true,
          formatter: function (params) {
            if (params && params.length) {
              var str = `<p>${params[0]?.name}</p>`;
              for (var i = 0; i < params.length; i++) {
                str += `<p>${params[i].seriesName}&nbsp;&nbsp;:&nbsp;&nbsp;${params[i].value}</p>`;
              }
              var tooltipHtml =
                  '<div style="max-height:120px;overflow-y:auto">' +
                  str +
                  "</div>";
              return tooltipHtml;
            }
          },
        },
        legend: {
          inactiveColor:'rgba(255,255,255,0.7)',
          itemGap: getFontSize(16),
          itemWidth: getFontSize(12),
          itemHeight: getFontSize(12),
          textStyle: {
            color: "rgba(255,255,255,0.9)",
            fontSize: getFontSize(12),
          },
          pageTextStyle: {
            color: "rgba(255,255,255,0.9)",
            fontSize: getFontSize(12),
          },
          pageIconColor: "white",
          pageIconSize: getFontSize(12),
          pageIconInactiveColor: "rgba(255,255,255,0.7)",
          type: "scroll",
        },
        grid: {
          bottom: 0,
          left: 0,
          right: 0,
          // bottom: 0,
          // top: "22%",
          top: getFontSize(38),
          containLabel: true,
        },
        xAxis: {
          type: "category",
          data: content.timeList,
          axisLabel: {
            fontSize: getFontSize(12),
            color: "rgba(126, 139, 166, 1)",
          },
          boundaryGap: true,
          axisTick: {
            alignWithLabel: true,
          },
        },
        yAxis: {
          axisTick: {
            show: false,
          },
          axisLine: {
            show: false,
          },
          splitLine: {
            show: true,
            lineStyle: {
              // type: "dashed",
              type: "solid",
              color: "rgba(255, 255, 255, 0.2)",
            },
          },
          type: "value",
          axisLabel: {
            fontSize: getFontSize(12),
            color: "rgba(126, 139, 166, 1)",
          },
        },
        series: (() => {
          let series = [];
          currentDirList.forEach((item, index) => {
            series.push({
              name: `${this.dirDic[item.dir]}${
                  this.roadTurnDic[item.turnDirNo]
              }`,
              type: "line",
              symbol: "none",
              label: {
                show: false,
              },
              emphasis: {
                focus: "series",
              },
              data: item.list,
            });
          });
          return series;
        })(),
      };
      console.log("oooooo", optionLeft);
      roadTrafficChart?.dispose();
      roadTrafficChart = echarts.init(
          document.getElementById("row-leftchart3")
      );
      roadTrafficChart.setOption(optionLeft);
      window.addEventListener("resize", () => {
        roadTrafficChart.resize();
      });
    },
    roadStopNumsChart(content) {
      let optionRight = {
        color: ["#1890ff", "#c6ffaa", "#ffbd7a", "#daf4ff"],
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
          confine: true,
        },
        legend: {
          inactiveColor:'rgba(255,255,255,0.7)',
          itemGap: getFontSize(16),
          itemWidth: getFontSize(12),
          itemHeight: getFontSize(12),
          textStyle: {
            color: "rgba(255,255,255,0.9)",
            fontSize: getFontSize(12),
          },
          pageTextStyle: {
            color: "rgba(255,255,255,0.9)",
            fontSize: getFontSize(12),
          },
          pageIconColor: "white",
          pageIconSize: getFontSize(12),
          pageIconInactiveColor: "rgba(255,255,255,0.7)",
          type: "scroll",
        },
        grid: {
          containLabel: true,
          bottom: 0,
          top: getFontSize(38),
          left: 0,
          right: 0,
        },
        xAxis: {
          type: "category",
          data: content.timeList,
          axisLabel: {
            fontSize: getFontSize(12),
            color: "rgba(126, 139, 166, 1)",
          },
          boundaryGap: true,
          axisTick: {
            alignWithLabel: true,
          },
        },
        yAxis: {
          axisTick: {
            show: false,
          },
          axisLine: {
            show: false,
          },
          splitLine: {
            show: true,
            lineStyle: {
              // type: "dashed",
              type: "solid",
              color: "rgba(255, 255, 255, 0.2)",
            },
          },
          type: "value",
          axisLabel: {
            fontSize: getFontSize(12),
            color: "rgba(126, 139, 166, 1)",
          },
        },
        series: (() => {
          let series = [];
          content.dataList.forEach((flow) => {
            if (
                flow.dir == this.activeName1 &&
                flow.laneNo == this.activeName2
            ) {
              series.push({
                name: "停车次数",
                type: "line",
                symbol: "none",
                label: {
                  show: false,
                },
                emphasis: {
                  focus: "series",
                },
                data: flow.list1,
              });
              series.push({
                name: "一次停车率",
                type: "bar",
                label: {
                  show: false,
                },
                emphasis: {
                  focus: "series",
                },
                data: flow.list2,
              });
              series.push({
                name: "二次停车率",
                type: "bar",
                label: {
                  show: false,
                },
                emphasis: {
                  focus: "series",
                },
                data: flow.list3,
              });
            }
          });
          return series;
        })(),
      };
      roadStopNumChart?.dispose();
      roadStopNumChart = echarts.init(
          document.getElementById("row-rightchart3")
      );
      roadStopNumChart.setOption(optionRight);
      window.addEventListener("resize", () => {
        roadStopNumChart.resize();
      });
    },
    loadfirstChart() {
      this.tabLoading = true;
      Promise.all([
        inletWayRealTime(this.sendData),
        inletWayTimeBetw({...this.sendData, type: "1"}),
        inletWayTimeBetw({...this.sendData, type: "2"}),
        inletWayTimeBetw({...this.sendData, type: "3"}),
      ]).then(([res1, res2, res3, res4]) => {
        this.tabLoading = false;
        this.jkTableData = res1.content;
        // =============================================
        let optionLeft = {
          color: ["#1890ff", "#c6ffaa", "#ffbd7a", "#daf4ff"],
          tooltip: {
            trigger: "axis",
            axisPointer: {
              type: "shadow",
            },
            confine: true,
            enterable: true,
            formatter: function (params) {
              if (params && params.length) {
                var str = `<p>${params[0]?.name}</p>`;
                for (var i = 0; i < params.length; i++) {
                  str += `<p>${params[i].seriesName}&nbsp;&nbsp;:&nbsp;&nbsp;${params[i].value}</p>`;
                }
                var tooltipHtml =
                    '<div style="max-height:120px;overflow-y:auto">' +
                    str +
                    "</div>";
                return tooltipHtml;
              }
            },
          },
          legend: {
            inactiveColor:'rgba(255,255,255,0.7)',
            itemGap: getFontSize(16),
            itemWidth: getFontSize(12),
            itemHeight: getFontSize(12),
            textStyle: {
              color: "rgba(255,255,255,0.9)",
              fontSize: getFontSize(12),
            },
            pageTextStyle: {
              color: "rgba(255,255,255,0.9)",
              fontSize: getFontSize(12),
            },
            pageIconColor: "white",
            pageIconSize: getFontSize(12),
            pageIconInactiveColor: "rgba(255,255,255,0.7)",
            type: "scroll",
          },
          grid: {
            bottom: 0,
            left: 0,
            right: 0,
            top: getFontSize(38),
            // top: "22%",
            containLabel: true,
          },
          xAxis: {
            type: "category",
            data: res2.content.timeList,
            axisLabel: {
              fontSize: getFontSize(12),
              color: "rgba(126, 139, 166, 1)",
            },
            boundaryGap: true,
            axisTick: {
              alignWithLabel: true,
            },
          },
          yAxis: {
            axisTick: {
              show: false,
            },
            axisLine: {
              show: false,
            },
            splitLine: {
              show: true,
              lineStyle: {
                // type: "dashed",
                type: "solid",
                color: "rgba(255, 255, 255, 0.2)",
              },
            },
            type: "value",
            axisLabel: {
              fontSize: getFontSize(12),
              color: "rgba(126, 139, 166, 1)",
            },
          },
          series: (() => {
            let series = [];
            res2.content.dataList.forEach((item) => {
              series.push({
                symbol: "none",
                name: this.dirDic[item.dir],
                type: "line",
                label: {
                  show: false,
                },
                // emphasis: {
                //   focus: "series",
                // },
                data: item.list,
              });
            });
            return series;
          })(),
        };
        crossInFlowTrendChart?.dispose();
        crossInFlowTrendChart = echarts.init(
            document.getElementById("row-leftchart")
        );
        crossInFlowTrendChart.setOption(optionLeft);
        window.addEventListener("resize", () => {
          crossInFlowTrendChart.resize();
        });
        // ==============================================================
        let optionRight1 = {
          color: ["#1890ff", "#c6ffaa", "#ffbd7a", "#daf4ff"],
          tooltip: {
            trigger: "axis",
            axisPointer: {
              type: "shadow",
            },
            confine: true,
          },
          legend: {
            inactiveColor:'rgba(255,255,255,0.7)',
            itemGap: getFontSize(16),
            itemWidth: getFontSize(12),
            itemHeight: getFontSize(12),
            textStyle: {
              color: "rgba(255,255,255,0.9)",
              fontSize: getFontSize(12),
            },
            pageTextStyle: {
              color: "rgba(255,255,255,0.9)",
              fontSize: getFontSize(12),
            },
            pageIconColor: "white",
            pageIconSize: getFontSize(12),
            pageIconInactiveColor: "rgba(255,255,255,0.7)",
            type: "scroll",
          },
          grid: {
            containLabel: true,
            bottom: 0,
            left: 0,
            top: getFontSize(38),
            right: 0,
          },
          xAxis: {
            type: "category",
            data: res3.content.timeList,
            axisLabel: {
              fontSize: getFontSize(12),
              color: "rgba(126, 139, 166, 1)",
            },
            boundaryGap: true,
            axisTick: {
              alignWithLabel: true,
            },
          },
          yAxis: {
            axisTick: {
              show: false,
            },
            axisLine: {
              show: false,
            },
            splitLine: {
              show: true,
              lineStyle: {
                type: "solid",
                // type: "dashed",
                color: "rgba(255, 255, 255, 0.2)",
              },
            },
            type: "value",
            axisLabel: {
              fontSize: getFontSize(12),
              color: "rgba(126, 139, 166, 1)",
            },
          },
          series: (() => {
            let series = [];
            res3.content.dataList.forEach((flow) => {
              series.push({
                name: this.dirDic[flow.dir],
                type: "bar",
                barWidth: "6",
                label: {
                  show: false,
                },
                emphasis: {
                  focus: "series",
                },
                data: flow.list,
              });
            });
            return series;
          })(),
        };
        crossInLengthTrendChart?.dispose();
        crossInLengthTrendChart = echarts.init(
            document.getElementById("row-rightchart")
        );
        crossInLengthTrendChart.setOption(optionRight1);
        window.addEventListener("resize", () => {
          crossInLengthTrendChart.resize();
        });
        // ============================================
        let optionRight2 = {
          color: ["#1890ff", "#c6ffaa", "#ffbd7a", "#daf4ff"],
          tooltip: {
            trigger: "axis",
            axisPointer: {
              type: "shadow",
            },
            confine: true,
            show: false,
          },
          legend: {
            show: false,
            itemGap: getFontSize(16),
            itemWidth: getFontSize(12),
            itemHeight: getFontSize(12),
            textStyle: {
              color: "rgba(126, 139, 166, 1)",
              fontSize: getFontSize(12),
            },
            pageTextStyle: {
              color: "rgba(126, 139, 166, 1)",
              fontSize: getFontSize(12),
            },
            pageIconColor: "white",
            pageIconSize: getFontSize(12),
            pageIconInactiveColor: "rgba(153, 153, 153, 1)",
            type: "scroll",
          },
          grid: {
            containLabel: true,
            bottom: -28,
            top: 26,
            // top: getFontSize(38),
            left: 0,
            right: 0,
          },
          xAxis: {
            type: "value",
            interval: 1,
            splitLine: {
              show: true,
              lineStyle: {
                // type: "solid",
                type: "dashed",
                color: "rgba(255, 255, 255, 0.2)",
              },
            },
            // data: res.content.timeList,
            axisLabel: {
              fontSize: getFontSize(12),
              color: "rgba(126, 139, 166, 1)",
              rotate: 45,
              formatter: (params) => {
                return res4.content.timeList[params];
              },
              align: "left",
              margin: 30,
            },
            // boundaryGap: true,
            // axisTick: {
            //   alignWithLabel: true,
            // },
          },
          yAxis: {
            data: (() => {
              let arr = [];
              for (let item of res4.content.dataList) {
                // // console.log(res4.content);
                arr.push(item.dir);
              }
              return arr;
            })(),
            axisTick: {
              show: false,
            },
            axisLine: {
              show: false,
            },
            splitLine: {
              show: false,
            },
            type: "category",
            axisLabel: {
              fontSize: getFontSize(12),
              color: "rgba(126, 139, 166, 1)",
              formatter: (val, index) => {
                return this.dirDic[val];
              },
              //   align: "left",
              //   margin: 0,
              interval: 0,
            },
          },
          series: (() => {
            let series = [];
            let result = [];
            // 切割数据
            if (res4.content.dataList.length) {
              for (let i = 0; i < res4.content.dataList[0].list.length; i++) {
                // for (let i = 0; i < 24; i++) {
                let showLength = [];
                let flag = "";
                for (let item of res4.content.dataList) {
                  showLength.push({
                    value: 1,
                    itemStyle: {
                      color:
                          item.list[i] == "1"
                              ? "#42b200"
                              : item.list[i] == "2"
                                  ? "#eec900"
                                  : item.list[i] == "3"
                                      ? "#e31f01"
                                      : item.list[i] == "4"
                                          ? "#960d0a"
                                          : "",
                    },
                  });
                  flag = item.dir;
                }
                series.push({flag: flag, length: showLength});
              }
            }

            for (let s of series) {
              result.push({
                name: s.flag,
                type: "bar",
                barWidth: "10",
                barGap: "100%",
                stack: "total",
                data: s.length,
              });
            }
            return result;
          })(),
        };
        crossInTrafficTrendChart?.dispose();
        crossInTrafficTrendChart = echarts.init(
            document.getElementById("row-bottomchart")
        );
        crossInTrafficTrendChart.setOption(optionRight2);
        window.addEventListener("resize", () => {
          crossInTrafficTrendChart.resize();
        });
      });
    },

    loadsecondChart() {
      this.tabLoading = true;
      let send = {crossId: "14Q1409IRF0"};
      Promise.all([
        inletWayTurnRealTime(this.sendData),
        inletWayTurnTimeBetw({...this.sendData, type: "1"}),
        inletWayTurnTimeBetw({...this.sendData, type: "2"}),
        inletWayTurnTimeBetw({...this.sendData, type: "3"}),
      ]).then(([res1, res2, res3, res4]) => {
        this.tabLoading = false;
        this.zxTableData = res1.content;
        // console.log("tab2 table", res1.content);
        for (let i = 0; i < res1.content.length; i++) {
          res1.content[i].zxIndex = `${this.dirDic[res1.content[i].fRidDir]}${
              this.roadTurnDic[res1.content[i].turnDirNo]
          }`;
        }
        // =======================================================
        let optionLeft = {
          color: ["#1890ff", "#c6ffaa", "#ffbd7a", "#daf4ff"],
          tooltip: {
            trigger: "axis",
            axisPointer: {
              type: "shadow",
            },
            confine: true,
            enterable: true,
            formatter: function (params) {
              if (params && params.length) {
                var str = `<p>${params[0]?.name}</p>`;
                for (var i = 0; i < params.length; i++) {
                  str += `<p>${params[i].seriesName}&nbsp;&nbsp;:&nbsp;&nbsp;${params[i].value}</p>`;
                }
                var tooltipHtml =
                    '<div style="max-height:120px;overflow-y:auto">' +
                    str +
                    "</div>";
                return tooltipHtml;
              }
            },
          },
          legend: {
            inactiveColor:'rgba(255,255,255,0.7)',
            itemGap: getFontSize(16),
            itemWidth: getFontSize(12),
            itemHeight: getFontSize(12),
            textStyle: {
              color: "rgba(126, 139, 166, 1)",
              fontSize: getFontSize(12),
            },
            pageTextStyle: {
              color: "rgba(126, 139, 166, 1)",
              fontSize: getFontSize(12),
            },
            pageIconColor: "white",
            pageIconSize: getFontSize(12),
            pageIconInactiveColor: "rgba(153, 153, 153, 1)",
            type: "scroll",
          },
          grid: {
            bottom: 0,
            top: getFontSize(38),
            left: 0,
            right: 0,
            // bottom: 0,
            // top: "22%",
            containLabel: true,
          },
          xAxis: {
            type: "category",
            data: res2.content.timeList,
            axisLabel: {
              fontSize: getFontSize(12),
              color: "rgba(126, 139, 166, 1)",
            },
            boundaryGap: true,
            axisTick: {
              alignWithLabel: true,
            },
          },
          yAxis: {
            axisTick: {
              show: false,
            },
            axisLine: {
              show: false,
            },
            splitLine: {
              show: true,
              lineStyle: {
                type: "solid",
                // type: "dashed",
                color: "rgba(255, 255, 255, 0.2)",
              },
            },
            type: "value",
            axisLabel: {
              fontSize: getFontSize(12),
              color: "rgba(126, 139, 166, 1)",
            },
          },
          series: (() => {
            let series = [];
            res2.content.dataList.forEach((item) => {
              series.push({
                name: `${this.dirDic[item.dir]}${
                    this.roadTurnDic[item.turnDirNo]
                }`,
                type: "line",
                symbol: "none",
                label: {
                  show: false,
                },
                emphasis: {
                  focus: "series",
                },
                data: item.list,
              });
            });
            return series;
          })(),
        };
        turnFlowTrendChart?.dispose();
        turnFlowTrendChart = echarts.init(
            document.getElementById("row-leftchart2")
        );
        turnFlowTrendChart.setOption(optionLeft);
        window.addEventListener("resize", () => {
          turnFlowTrendChart.resize();
        });
        // =======================================================
        this.secondStopOptions = res3.content.turnList;
        this.secondStop = res3.content.turnList.length
            ? `${res3.content.turnList[0].dir}${res3.content.turnList[0].turnDirNo}`
            : "";
        this.secondStopAllData = res3.content;
        this.updateSecondStopChart(res3.content);
        // =======================================================
        let optionRight = {
          color: ["#1890ff", "#c6ffaa", "#ffbd7a", "#daf4ff"],
          tooltip: {
            trigger: "axis",
            axisPointer: {
              type: "shadow",
            },
            confine: true,
            show: false,
          },
          legend: {
            show: false,
            itemGap: getFontSize(16),
            itemWidth: getFontSize(12),
            itemHeight: getFontSize(12),
            textStyle: {
              color: "rgba(126, 139, 166, 1)",
              fontSize: getFontSize(12),
            },
            pageTextStyle: {
              color: "rgba(126, 139, 166, 1)",
              fontSize: getFontSize(12),
            },
            pageIconColor: "white",
            pageIconSize: getFontSize(12),
            pageIconInactiveColor: "rgba(153, 153, 153, 1)",
            type: "scroll",
          },
          grid: {
            containLabel: true,
            bottom: -28,
            top: 26,
            // top: getFontSize(38),
            left: 0,
            right: 0,
          },
          xAxis: {
            type: "value",
            interval: 1,
            splitLine: {
              show: true,
              lineStyle: {
                type: "solid",
                // type: "dashed",
                color: "rgba(255, 255, 255, 0.2)",
              },
            },
            // data: res.content.timeList,
            axisLabel: {
              fontSize: getFontSize(12),
              color: "rgba(126, 139, 166, 1)",
              rotate: 45,
              formatter: (params) => {
                return res4.content.timeList[params];
              },
              align: "left",
              margin: 30,
            },
            boundaryGap: true,
            axisTick: {
              alignWithLabel: true,
            },
          },
          yAxis: {
            data: (() => {
              let arr = [];
              for (let item of res4.content.dataList) {
                // console.log("2", res4.content);
                arr.push(`${item.dir},${item.turnDirNo}`);
              }
              return arr;
            })(),
            axisTick: {
              show: false,
            },
            axisLine: {
              show: false,
            },
            splitLine: {
              show: false,
            },
            type: "category",
            axisLabel: {
              fontSize: getFontSize(12),
              color: "rgba(126, 139, 166, 1)",
              formatter: (val, index) => {
                return `${
                    this.dirDic[val.split(",")[0]] +
                    this.roadTurnDic[val.split(",")[1]]
                }`;
              },
              interval: 0,
            },
          },
          series: (() => {
            let series = [];
            let result = [];
            if (res4.content.dataList.length) {
              for (let i = 0; i < res4.content.dataList[0].list.length; i++) {
                let showLength = [];
                let flag = "";
                for (let item of res4.content.dataList) {
                  showLength.push({
                    value: 1,
                    itemStyle: {
                      color:
                          item.list[i] == "1"
                              ? "#42b200"
                              : item.list[i] == "2"
                                  ? "#eec900"
                                  : item.list[i] == "3"
                                      ? "#e31f01"
                                      : item.list[i] == "4"
                                          ? "#960d0a"
                                          : "",
                    },
                  });
                  flag = item.dir;
                }
                series.push({flag: flag, length: showLength});
              }
            }
            for (let s of series) {
              result.push({
                name: s.flag,
                type: "bar",
                barWidth: "6",
                barGap: "100%",
                stack: "total",
                data: s.length,
              });
            }
            return result;
          })(),
        };
        turnTrafficStateTrendChart?.dispose();
        turnTrafficStateTrendChart = echarts.init(
            document.getElementById("row-bottomchart2")
        );
        turnTrafficStateTrendChart.setOption(optionRight);
        window.addEventListener("resize", () => {
          turnTrafficStateTrendChart.resize();
        });
      });
    },
    loadthirdChart() {
      this.tabLoading = true;
      this.roadTables = [];
      roadRealTime(this.sendData).then((res) => {
        for (let i = 0; i < res.content.length; i++) {
          this.roadTables.push(res.content[i]);
          if (i == 0) this.activeName1 = res.content[i].dir;
        }
        if (this.roadTables.length) {
          let match = this.roadTurnMap.filter((item) => {
            return Number(item.dir) === Number(this.roadTables[0].dir);
          });
          let matchTable = this.roadTables.filter((item) => {
            return Number(item.dir) === Number(this.roadTables[0].dir);
          });
          let matchArr = [];
          for (let row of matchTable[0].list) {
            matchArr.push(Number(row.laneNo));
          }
          this.roadOptions = match[0].laneList.filter((item) => {
            return matchArr.includes(item.laneNo);
          });
          this.activeName2 = this.roadOptions[0]?.laneNo;
        }

        Promise.all([
          roadTimeBetw({...this.sendData, type: "2"}),
          roadTimeBetw({...this.sendData, type: "1"}),
          roadTimeBetw({...this.sendData, type: "3"}),
        ]).then(([childRes1, childRes2, childRes3]) => {
          this.tabLoading = false;
          this.roadData.stopNums = childRes1.content;
          this.roadStopNumsChart(childRes1.content);

          this.roadData.trafficFlow = childRes2.content;
          this.roadTrafficFlowChart(childRes2.content);

          let optionRight = {
            color: ["#1890ff", "#c6ffaa", "#ffbd7a", "#daf4ff"],
            tooltip: {
              trigger: "axis",
              axisPointer: {
                type: "shadow",
              },
              confine: true,
              show: false,
            },
            legend: {
              show: false,
              itemGap: getFontSize(16),
              itemWidth: getFontSize(12),
              itemHeight: getFontSize(12),
              textStyle: {
                color: "rgba(126, 139, 166, 1)",
                fontSize: getFontSize(12),
              },
              pageTextStyle: {
                color: "rgba(126, 139, 166, 1)",
                fontSize: getFontSize(12),
              },
              pageIconColor: "white",
              pageIconSize: getFontSize(12),
              pageIconInactiveColor: "rgba(153, 153, 153, 1)",
              type: "scroll",
            },
            grid: {
              containLabel: true,
              bottom: -28,
              top: 26,
              // top: getFontSize(38),
              left: 0,
              right: 0,
            },
            xAxis: {
              type: "value",
              interval: 1,
              splitLine: {
                show: true,
                lineStyle: {
                  type: "solid",
                  // type: "dashed",
                  color: "rgba(255, 255, 255, 0.2)",
                },
              },

              // data: res.content.timeList,
              axisLabel: {
                fontSize: getFontSize(12),
                color: "rgba(126, 139, 166, 1)",
                rotate: 45,
                formatter: (params) => {
                  return childRes3.content.timeList[params];
                },
                align: "left",
                margin: 30,
              },
              boundaryGap: true,
              axisTick: {
                alignWithLabel: true,
              },
            },
            yAxis: {
              data: (() => {
                let arr = [];
                for (let item of childRes3.content.dataList) {
                  arr.push(item.dir);
                }
                arr.sort();
                return arr;
              })(),

              axisTick: {
                show: false,
              },
              axisLine: {
                show: false,
              },
              splitLine: {
                show: false,
              },
              type: "category",
              axisLabel: {
                fontSize: getFontSize(12),
                color: "rgba(126, 139, 166, 1)",
                formatter: (val, index) => {
                  return `${this.dirDic[val.split(",")[0]] + "进口"}`;
                },
                interval: 1,
              },
            },
            series: (() => {
              let series = [];
              let result = [];
              // 切割数据
              // for (let i = 0; i < 24; i++) {
              if (childRes3.content.dataList.length) {
                for (
                    let i = 0;
                    i < childRes3.content.dataList[0].list.length;
                    i++
                ) {
                  let showLength = [];
                  let flag = "";
                  for (let item of childRes3.content.dataList) {
                    showLength.push({
                      value: 1,
                      itemStyle: {
                        color:
                            item.list[i] == "1"
                                ? "#42b200"
                                : item.list[i] == "2"
                                    ? "#eec900"
                                    : item.list[i] == "3"
                                        ? "#e31f01"
                                        : item.list[i] == "4"
                                            ? "#960d0a"
                                            : "",
                      },
                    });
                    flag = item.dir;
                  }
                  series.push({flag: flag, length: showLength});
                }
              }
              for (let s of series) {
                result.push({
                  name: s.flag,
                  type: "bar",
                  barWidth: "2",
                  barGap: "100%",
                  stack: "total",
                  data: s.length,
                });
              }
              return result;
            })(),
          };
          roadTrafficStateTrendChart?.dispose();
          roadTrafficStateTrendChart = echarts.init(
              document.getElementById("row-bottomchart3")
          );
          roadTrafficStateTrendChart.setOption(optionRight);
          window.addEventListener("resize", () => {
            roadTrafficStateTrendChart.resize();
          });
        });
      });
    },
  },
  computed: {
    crossPropData() {
      return {
        crossName: this.crossDetailData.name,
        crossId: this.crossDetailData.id,
      };
    },
    serviceLevelVal() {
      return this.isValid(this.crossIndexes?.serviceLevel);
    },
    speedVal() {
      return this.isValid(this.crossIndexes?.speed);
    },
    saturationVal() {
      if (this.crossIndexes?.saturation) {
        return `${(this.crossIndexes?.saturation * 100).toFixed(2)}%`;
      } else {
        return "--";
      }
    },
    stopNumVal() {
      return this.isValid(this.crossIndexes?.stopNum);
    },
    congestIndexVal() {
      return this.isValid(this.crossIndexes?.congestIndex);
    },
    maxQueueLengthVal() {
      return this.isValid(this.crossIndexes?.maxQueueLength);
    },
    hourFlowVal() {
      return this.isValid(this.crossIndexes?.hourFlow);
    },
    illegalNumVal() {
      return this.isValid(this.crossIndexes?.illegalNum);
    },
    peakFlowVal() {
      return this.isValid(this.crossIndexes?.peakFlow);
    },
    accidentNumVal() {
      return this.isValid(this.crossIndexes?.accidentNum);
    },
  },
  beforeDestroy() {
  },
};
</script>
<style lang="less" scoped>
.crossDetail {
  box-shadow: 0 0 30px 15px #030916;
  position: absolute;
  z-index: 13;
  top: 2vh;
  left: 50%;
  transform: translateX(-50%);
  width: 1023px;
  height: 700px;
  background-color: #0f2645;
  color: #ffffff;

  .half-w {
    width: 48%;
  }

  .chart-container {
    height: 100%;
    position: relative;

    .chart-title {
      height: 20px;
      font-weight: 700;
    }
  }

  ::v-deep .el-table__body-wrapper {
    background: #0f2645;
  }

  ::v-deep .el-table {
    background: #0f2645;
  }

  ::v-deep .el-table::before {
    height: 0;
  }

  .gradiant-container {
    position: absolute;
    right: 5px;

    .colors-gradiant {
      height: 8px;
      width: 160px;
      margin: 0 8px;
      display: inline-block;
      background-image: linear-gradient(90deg,
      #42a507 0%,
      #bfb507 25%,
      #d96807 50%,
      #af1c0b 75%,
      #8b1010 100%);
    }
  }

  .full-w-h {
    width: 100%;
    height: 100%;
  }

  /*滚动条样式：谷歌浏览器下*/
  // ::-webkit-scrollbar {
  //   width: 10px;
  //   height: 10px;
  //   background-color: #2e5e99;
  //   display: none;
  // }

  // /*滚动条的轨道*/
  // ::-webkit-scrollbar-track {
  //   background-color: #0f2645;
  // }

  // /*滚动条的滑块按钮*/
  // ::-webkit-scrollbar-thumb {
  //   border-radius: 10px;
  //   background-color: #2e5e99;
  // }

  /*滚动条的上下两端的按钮*/
  //::-webkit-scrollbar-button {
  //  width: 0;
  // height: 0px;
  //}

  .crossDetail-table1 {
    // width: 100%;
    height: 100%;
    overflow: auto;
  }

  //   .crossDetail-table2 {
  //     height: 180px;
  //     overflow: auto;
  //   }

  //   .crossDetail-table3 {
  //     height: 140px;
  //     overflow: auto;
  //   }

  ::v-deep .el-tabs__nav-wrap::after {
    height: 0;
  }

  ::v-deep .el-tabs__nav-wrap {
    margin-bottom: unset;
  }

  ::v-deep .el-input__inner {
    height: 20px;
    line-height: 20px;
    padding: 0 5px;
    background: #0d7fd7;
    color: white;
    font-size: 12px;
  }

  ::v-deep .third-select {
    position: absolute;
    width: 26%;
    right: 4px;
    top: 0;
    z-index: 2;
  }

  ::v-deep .el-input--small .el-input__icon {
    height: 20px;
    line-height: 20px;
  }

  ::v-deep .el-tabs__item.is-active {
    background: #2e5e99;
    color: white;
  }

  ::v-deep .el-tabs__item {
    padding: 0;
    font-size: 16px;
    color: #707f9a;
    border: 2px solid #0f2645;
    height: 24px;
    line-height: 20px;
  }

  ::v-deep .el-tabs__active-bar {
    width: 0 !important;
  }

  ::v-deep .el-tabs__header {
    border: 2px solid #275b92;
    color: #707f9a;
  }

  .crossDetailHead {
    height: 43px;
    padding: 2px 8px;
    line-height: 48px;
    position: relative;
    background: url("../../../assets/images/holo/crossWindowTop.png");
    background-size: 100% 100%;

    span {
      font-size: 18px;
      font-weight: 700;
    }

    i {
      position: absolute;
      right: 5px;
      line-height: 40px;
      font-size: 24px;
      cursor: pointer;
    }
  }

  .content {
    background-color: #0f2645;
    height: calc(100% - 30px);
    padding: 16px;
    width: 100%;
    border: 1px solid #0a5b85;
    position: relative;
    display: flex;
    justify-content: space-between;

    .left-side {
      font-size: 14px;
      flex: 0 0 35%;

      .left-top {
        height: 70%;
      }

      .left-bottom {
        height: 30%;

        .left-bottom-in {
          color: #d1d5db;
          height: 100%;
          padding: 8px 4px 0 4px;
          display: flex;
          flex-direction: row;
          flex-flow: row wrap;
          justify-content: space-around;

          .item {
            flex: 0 0 48%;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
          }
        }
      }
    }

    .right-side {
      flex: 0 0 63%;
      width: 500px;
      height: 100%;

      ::v-deep .tab-table-header th {
        padding: 0px;
      }

      ::v-deep .el-tabs__header {
        height: 26px;
        line-height: 26px;
        margin-bottom: 4px;
      }

      ::v-deep .el-tabs__content {
        height: calc(100% - 30px);
      }

      ::v-deep .el-tab-pane {
        height: 100%;
      }

      ::v-deep .content table tbody td {
        border: 1px solid #26486d !important;
      }

      ::v-deep .tab-table-header-cell {
        background: #0f2645;
        border: 1px solid rgba(62, 108, 150, 1);
        color: #d2d7e0;

        .cell {
          padding: 2px 2px;
          line-height: unset;
          text-align: center;
        }

        padding: 1px 1px;
      }

      ::v-deep .custom-table-cell {
        background: #0f2645;
        color: rgba(255, 255, 255, 1);
        border: 1px solid rgba(62, 108, 150, 1);
        padding: 3px 4px;

        .cell {
          padding: 2px 2px;
          text-align: center;
        }
      }

      .tab {
        height: 100%;

        .tab-row {
          height: 33.3%;
          padding-bottom: 4px;
        }

        .center {
          display: flex;
          justify-content: space-between;

          .center-item {
            width: 50%;
          }
        }
      }
    }
  }
}
</style>
