<template>
  <div class="container">
    <div class="left">
      <div class="left_top animate__fadeInDown animate__animated animate__slow">
        <contentTitle :title="'人员考勤数量'" />
        <div class="left_top_content">
          <lineLeft :lineHeight="left_top_height" />
          <div class="itemList">
            <div v-for="item in 4" class="item">
              <div class="item_left">
                <img src="../../assets/menber/anquanyuan.svg" alt="">
              </div>
              <div class="item_right">
                <div class="item_right_title">在场人员</div>
                <div class="item_right_num">59人</div>
              </div>
              <div class="dot_lt"></div>
              <div class="dot_lb"></div>
              <div class="dot_rt"></div>
              <div class="dot_rb"></div>
              <div class="dot_line_l"></div>
              <div class="dot_line_r"></div>
            </div>
          </div>
          <lineRight :lineHeight="left_top_height" />
          <bottomLine />
        </div>
      </div>
      <div class="left_bottom animate__fadeInDown animate__animated animate__slow">
        <div class="chartBox">
          <div class="chartItem animate__fadeInDown animate__animated animate__slow">
            <contentTitle :title="'人员教育分析'" />
            <div class="chart_item_content">
              <lineLeft :lineHeight="chart_item_height" />
              <div id="chart1">
              </div>
              <div v-show="isShowTip" class="showData">
                {{ tip }}
              </div>
              <div class="chart_item_content_title">
                <div class="chart_item_content_title_item">
                  <div><span class="colorT_dot"></span>班前教育</div>
                  <div>59</div>
                  <div>40.4%</div>
                </div>
                <div class="chart_item_content_title_item">
                  <div><span class="colorT_dot"></span>班前教育</div>
                  <div>59</div>
                  <div>40.4%</div>
                </div>
                <div class="chart_item_content_title_item">
                  <div><span class="colorT_dot"></span>班前教育</div>
                  <div>59</div>
                  <div>40.4%</div>
                </div>
                <div class="chart_item_content_title_item">
                  <div><span class="colorT_dot"></span>班前教育</div>
                  <div>59</div>
                  <div>40.4%</div>
                </div>
              </div>
              <lineRight :lineHeight="chart_item_height" />
              <bottomLine />
            </div>
          </div>
          <div class="chartItem animate__fadeInDown animate__animated animate__slow">
            <contentTitle :title="'人员教育分析'" />
            <div class="chart_item_content">
              <lineLeft :lineHeight="chart_item_height" />
              <div id="chart2"></div>
              <div id="chart3"></div>
              <lineRight :lineHeight="chart_item_height" />
              <bottomLine />
            </div>
          </div>
          <div class="chartItem animate__fadeInDown animate__animated animate__slow">
            <contentTitle :title="'人员教育分析'" />
            <div class="chart_item_content">
              <lineLeft :lineHeight="chart_item_height" />
              <div id="chart4"></div>
              <div class="chart_item_content_title">
                <div class="chart_item_content_title_item">
                  <div><span class="colorT_dot"></span>班前教育</div>
                  <div>59</div>
                  <div>40.4%</div>
                </div>
                <div class="chart_item_content_title_item">
                  <div><span class="colorT_dot"></span>班前教育</div>
                  <div>59</div>
                  <div>40.4%</div>
                </div>
              </div>
              <lineRight :lineHeight="chart_item_height" />
              <bottomLine />
            </div>
          </div>
          <div class="chartItem animate__fadeInDown animate__animated animate__slow">
            <contentTitle :title="'人员教育分析'" />
            <div class="chart_item_content">
              <lineLeft :lineHeight="chart_item_height" />
              <div id="chart5"></div>
              <div class="chart_item_content_title">
                <div class="chart_item_content_title_item">
                  <div><span class="colorT_dot"></span>班前教育</div>
                  <div>59</div>
                  <div>40.4%</div>
                </div>
                <div class="chart_item_content_title_item">
                  <div><span class="colorT_dot"></span>班前教育</div>
                  <div>59</div>
                  <div>40.4%</div>
                </div>
              </div>
              <lineRight :lineHeight="chart_item_height" />
              <bottomLine />
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="right">
      <div class="right_top animate__fadeInDown animate__animated animate__slow">
        <contentTitle :title="'人员进出数据'" />
        <div class="right_top_content">
          <lineLeft :lineHeight="right_top_height" />
          <div id="chart6"></div>
          <lineRight :lineHeight="right_top_height" />
          <bottomLine />
        </div>
      </div>
      <div class="right_center animate__fadeInDown animate__animated animate__slow">
        <contentTitle :title="'安管人员进场数据'" />
        <div class="right_center_content">
          <lineLeft :lineHeight="right_center_height" />
          <div class="table_content">
            <div class="table_content_title">
              <div>序号</div>
              <div>姓名</div>
              <div>进出场</div>
              <div>职务</div>
              <div>考勤时间</div>
            </div>
            <div class="table_content_list">
              <div v-for="item in 10" :key="item" @click="togglePop" @mouseenter="clearScroll" @mouseleave="startScroll"
                class="table_content_list_item" :style="{ background: item % 2 === 0 ? 'rgba(48,142,255,.3)' : '' }">
                <div class="table_content_list_item_item">
                  {{ item }}
                </div>
                <div class="table_content_list_item_item">
                  张三
                </div>
                <div class="table_content_list_item_item">
                  进场
                </div>
                <div class="table_content_list_item_item">
                  安管员
                </div>
                <div class="table_content_list_item_item">
                  2025-05-09 10:00:00
                </div>
              </div>
              <div v-for="item in 10" :key="item" @click="togglePop(true)" @mouseenter="clearScroll"
                @mouseleave="startScroll" class="table_content_list_item"
                :style="{ background: item % 2 === 0 ? 'rgba(48,142,255,.3)' : '' }">
                <div class="table_content_list_item_item">
                  {{ item }}
                </div>
                <div class="table_content_list_item_item">
                  张三
                </div>
                <div class="table_content_list_item_item">
                  进场
                </div>
                <div class="table_content_list_item_item">
                  安管员
                </div>
                <div class="table_content_list_item_item">
                  2025-05-09 10:00:00
                </div>
              </div>
            </div>
          </div>
          <lineRight :lineHeight="right_center_height" />
          <bottomLine />
        </div>
      </div>
      <div class="right_bottom animate__fadeInDown animate__animated animate__slow">
        <contentTitle :title="'人员教育分析'" />
        <div class="right_bottom_content">
          <lineLeft :lineHeight="right_bottom_height" />
          <div class="btnBox">
            <div class="btnItem" :class="{ active: activeBtn === 'age' }" @click="activeBtn = 'age'">
              年龄
            </div>
            <div class="btnItem" :class="{ active: activeBtn === 'origin' }" @click="activeBtn = 'origin'">
              籍贯
            </div>
          </div>
          <div id="ageBarChart" style="width: 100%; height: 100%;"></div>
          <lineRight :lineHeight="right_bottom_height" />
          <bottomLine />
        </div>
      </div>
    </div>
  </div>
  <pop v-if="isShow" @close="togglePop" />
</template>
<script setup lang="ts">
import * as echarts from "echarts";
import { onMounted, ref } from 'vue';
import contentTitle from '@/components/contentTitle.vue';
import lineLeft from '@/components/lineLeft.vue';
import lineRight from '@/components/rightLine.vue';
import bottomLine from '@/components/bottomLine.vue';
// 弹窗
import pop from '@/components/pop.vue';
const left_top_height = ref(0);
const chart_item_height = ref(0);
const right_top_height = ref(0);
const right_center_height = ref(0);
const right_bottom_height = ref(0);
const activeBtn = ref('age');
const tip = ref('');
const isShowTip = ref(false);
const isShow = ref(false);
const togglePop = (newShow: any) => {
  isShow.value = !isShow.value;
  if (newShow) {
    isShow.value = newShow;
  }
};
onMounted(() => {
  const left_top = document.querySelector('.left_top');
  const chart_item = document.querySelector('.chartItem');
  const right_top = document.querySelector('.right_top');
  const right_center = document.querySelector('.right_center');
  const right_bottom = document.querySelector('.right_bottom');
  if (left_top) {
    left_top_height.value = left_top.clientHeight - 60;
  }
  if (chart_item) {
    chart_item_height.value = chart_item.clientHeight - 60;
  }
  if (right_top) {
    right_top_height.value = right_top.clientHeight - 60;
  }
  if (right_center) {
    right_center_height.value = right_center.clientHeight - 60;
  }
  if (right_bottom) {
    right_bottom_height.value = right_bottom.clientHeight - 60;
  }
  init()
  init1()
  init2()
  init3()
  init4()
  init5()
  init6()
  startScroll()
});
function init6() {
  const sortData = [75, 40, 22, 83, 19];
  const ageBarChart = document.getElementById('ageBarChart');
  if (!ageBarChart) return;
  const myageBarChart = echarts.init(ageBarChart);
  const option = {
    tooltip: {
      show: true,
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      }
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '8%',
      top: '10%',
      containLabel: true
    },
    xAxis: [
      {
        type: 'category',
        data: ['0-30岁', '30-40岁', '40-50岁', '50-60岁', '60岁以上'],
        axisLine: {
          lineStyle: {
            color: '#4B8FFB'
          }
        },
        axisLabel: {
          color: '#fff',
          fontSize: 12
        }
      }
    ],
    yAxis: [
      {
        type: 'value',
        min: 0,
        max: 90,
        interval: 30,
        axisLine: {
          lineStyle: {
            color: '#4B8FFB'
          }
        },
        splitLine: {
          lineStyle: {
            color: 'rgba(75,143,251,0.2)'
          }
        },
        axisLabel: {
          color: '#fff',
          fontSize: 16
        }
      }
    ],
    series: [
      {
        name: '人数',
        markPoint: {
          symbol: '../../assets/menber/hengtiao.svg', // 使用 SVG path 绘制扁圆形状
          symbolSize: [22, 4], // 设置扁圆的宽和高
          itemStyle: {
            color: 'rgba(94, 238, 255, 1)' // 圆盘颜色
          },
          data: sortData.map((obj, index) => ({
            xAxis: index, // 对应柱子的横坐标 
            yAxis: obj + 0 // 柱子的值加上一些偏移量
          }))
        },
        type: 'bar',
        barWidth: '20%',
        data: sortData,
        itemStyle: {
          color: {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              { offset: 0, color: '#4B8FFB' },
              { offset: 1, color: '#163A6F' }
            ]
          },
          borderRadius: [0, 0, 0, 0]
        },
        label: {
          show: true,
          position: 'top',
          color: '#fff',
          fontSize: 16
        }
      }
    ]
  };
  myageBarChart.setOption(option);
}


const clearScroll = function () {
  clearInterval(intervalId);
};
let intervalId: any;
const startScroll = function () {
  // 列表向滚动
  const left_bottom_itemcontent = document.querySelector('.table_content_list');
  if (!left_bottom_itemcontent) return;

  // 解决第二个列表出现时跳动问题：重置scrollTop并清除旧定时器
  clearInterval(intervalId);
  left_bottom_itemcontent.scrollTop = 0;

  intervalId = setInterval(() => {
    if (left_bottom_itemcontent) {
      left_bottom_itemcontent.scrollTop += 1;
      // 兼容第二个列表内容高度变化时的滚动
      if (left_bottom_itemcontent.scrollTop >= left_bottom_itemcontent.scrollHeight - left_bottom_itemcontent.clientHeight) {
        left_bottom_itemcontent.scrollTop = 0;
      }
    }
  }, 20);
};
function init() {
  const chart1 = document.getElementById('chart1');
  if (!chart1) return;
  const myChart1 = echarts.init(chart1);
  const option = {
    // 提示数据显示在图表中间
    series: [
      {
        label: {
          show: false,
        },
        name: '',
        type: 'pie',
        radius: ['50%', '90%'],
        avoidLabelOverlap: false,
        data: [
          { value: 1048, name: '劳务人员' },
          { value: 735, name: '班组长' },
          { value: 580, name: '特种作业' },
          { value: 484, name: '安管人员' },
        ]
      }
    ]
  };
  myChart1.setOption(option);
  myChart1.on('mouseover', (params: any) => {
    tip.value = `${params.name}：${params.value}`;
    isShowTip.value = true;
  });
  myChart1.on('globalout', () => {
    isShowTip.value = false;
  });
}
function init1() {
  const chart2 = document.getElementById('chart2');
  if (!chart2) return;
  const myChart2 = echarts.init(chart2);
  const option = {
    graphic: [
      // 第一个外圈
      {
        type: 'circle',
        left: 'center',
        top: 'center',
        shape: {
          r: 100 // 半径
        },
        style: {
          fill: 'none',
          stroke: 'rgba(7,121,202,1)',
          lineWidth: 5
        }
      },
      // 第二个外圈
      {
        type: 'circle',
        left: 'center',
        top: 'center',
        shape: {
          r: 105 // 半径
        },
        style: {
          fill: 'none',
          stroke: 'rgba(7,121,202,.5)',
          lineWidth: 8
        }
      }
    ],
    series: [{
      type: 'liquidFill',
      data: [0.6, 0.4], // 数据值，代表填充的比例，范围是[0, 1]
      color: ['#1c88d1'],
      radius: '80%', // 图表半径大小
      outline: {
        show: false, // 是否显示轮廓，默认显示
      },

      backgroundStyle: {
        borderWidth: 4,
        borderColor: '#000',
        shadowColor: 'rgba(255, 255, 255, 9)',
        shadowBlur: 20,
        color: 'transparent' // 背景颜色
      },
      label: {
        normal: {
          formatter: '60%', // 中心文本内容
          textStyle: {
            fontSize: 20,
            color: '#fff'
          }
        }
      },
      itemStyle: {
        opacity: 0.7,
      },
    }]
  };
  myChart2.setOption(option);
}
function init2() {
  const chart3 = document.getElementById('chart3');
  if (!chart3) return;
  const myChart = echarts.init(chart3);
  const option = {
    graphic: [
      // 第一个外圈
      {
        type: 'circle',
        left: 'center',
        top: 'center',
        shape: {
          r: 100 // 半径
        },
        style: {
          fill: 'none',
          stroke: 'rgba(217,107,105,1)',
          lineWidth: 5
        }
      },
      // 第二个外圈
      {
        type: 'circle',
        left: 'center',
        top: 'center',
        shape: {
          r: 105 // 半径
        },
        style: {
          fill: 'none',
          stroke: 'rgba(217,107,105,.5)',
          lineWidth: 8
        }
      }
    ],
    series: [{
      type: 'liquidFill',
      data: [0.6, 0.4], // 数据值，代表填充的比例，范围是[0, 1]
      color: ['rgba(217,107,105,.5)'],
      radius: '80%', // 图表半径大小
      outline: {
        show: false,
        borderDistance: 0,
        itemStyle: {
          borderWidth: 5,
          borderColor: '#fff',
          shadowColor: 'rgba(255, 255, 255, 0.2)',
          shadowBlur: -10
        }
      },
      backgroundStyle: {
        borderWidth: 4,
        borderColor: '#000',
        shadowColor: 'rgba(255, 255, 255, 9)',
        shadowBlur: 20,
        color: 'transparent' // 背景颜色
      },
      label: {
        normal: {
          formatter: '60%', // 中心文本内容
          textStyle: {
            fontSize: 20,
            color: '#fff'
          }
        }
      },
      itemStyle: {
        opacity: 0.9,
      },
    }]
  };
  myChart.setOption(option);
}

var optionData = [
  {
    name: '数学',
    value: 60,
  },
  {
    name: '语文',
    value: 44,
  },
]
const option = getPie3D(optionData, 0);// 可做为调整内环大小 0为实心圆饼图，大于0 小于1 为圆环
/*************************
生成扇形的曲面参数方程 生成 3D 扇形环曲面：
   【 getParametricEquation 函数说明 】 
      startRatio（浮点数）: 当前扇形起始比例，取值区间 [0, endRatio)
      endRatio（浮点数）: 当前扇形结束比例，取值区间 (startRatio, 1]
      isSelected（布尔值）:是否选中，效果参照二维饼图选中效果（单选）
      isHovered（布尔值）: 是否放大，效果接近二维饼图高亮（放大）效果（未能实现阴影）
      k（0~1之间的浮点数）：用于参数方程的一个参数，取值 0~1 之间，通过「内径/外径」的值换算而来。
      h :饼图的初始高度
 *************************/
function getParametricEquation(startRatio: number, endRatio: number, isSelected: boolean, isHovered: boolean, k: number, h: number) {
  const midRatio = (startRatio + endRatio) / 2;
  const startRadian = startRatio * Math.PI * 2;
  const endRadian = endRatio * Math.PI * 2;
  const midRadian = midRatio * Math.PI * 2;
  // 如果只有一个扇形，则不实现选中效果。
  if (startRatio === 0 && endRatio === 1) {
    isSelected = false;
  }
  k = typeof k !== 'undefined' ? k : 1 / 3;
  const offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;
  const offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;
  const hoverRate = isHovered ? 5 : 1;
  // 返回曲面参数方程
  return {
    u: {
      min: -Math.PI,
      max: Math.PI * 3,
      step: Math.PI / 32,
    },

    v: {
      min: 0,
      max: Math.PI * 2,
      step: Math.PI / 20,
    },

    x(u: number, v: number) {
      if (u < startRadian) {
        return offsetX + Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate;
      }
      if (u > endRadian) {
        return offsetX + Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate;
      }
      return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
    },

    y(u: number, v: number) {
      if (u < startRadian) {
        return offsetY + Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate;
      }
      if (u > endRadian) {
        return offsetY + Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate;
      }
      return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
    },

    z(u: number, v: number) {
      if (u < -Math.PI * 0.5) {
        return Math.sin(u);
      }
      if (u > Math.PI * 2.5) {
        return Math.sin(u) * h * 0.1;
      }
      // 当前图形的高度是Z根据h（每个value的值决定的）
      return Math.sin(v) > 0 ? 1 * h * 0.1 : -1;
    },
  };
}
/********** 
生成模拟 3D 饼图的配置项
   【 getPie3D 函数说明 】 :
      pieData（object）：饼图数据
      internalDiameterRatio（0~1之间的浮点数）：内径/外径的值（默认值 1/2），当该值等于 0 时，为普通饼图
   // 为每一个饼图数据，生成一个 series-surface 配置
   // 使用遍历计算出的数据和 sumValue，调用 getParametricEquation 函数，实现每一个扇形。
*/
function getPie3D(pieData: any, internalDiameterRatio: number) {
  const series = [];
  let sumValue = 0;
  let startValue = 0;
  let endValue = 0;
  const legendData = [];
  const k =
    typeof internalDiameterRatio !== 'undefined'
      ? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
      : 1 / 3;
  for (let i = 0; i < pieData.length; i += 1) {
    sumValue += pieData[i].value;
    const seriesItem = {
      name: typeof pieData[i].name === 'undefined' ? `series${i}` : pieData[i].name,
      type: 'surface',
      parametric: true,
      wireframe: {
        show: false,
      },
      pieData: pieData[i],
      pieStatus: {
        selected: false,
        hovered: false,
        k,
      },
    };
    if (typeof pieData[i].itemStyle !== 'undefined') {
      const { itemStyle } = pieData[i];
      // eslint-disable-next-line no-unused-expressions
      typeof pieData[i].itemStyle.color !== 'undefined' ? (itemStyle.color = pieData[i].itemStyle.color) : null;
      // eslint-disable-next-line no-unused-expressions
      typeof pieData[i].itemStyle.opacity !== 'undefined'
        ? (itemStyle.opacity = pieData[i].itemStyle.opacity)
        : null;

      // 修复：只有在 seriesItem 存在 itemStyle 属性时才赋值
      (seriesItem as any).itemStyle = itemStyle;
    }
    series.push(seriesItem);
  }
  for (let i = 0; i < series.length; i += 1) {
    endValue = startValue + series[i].pieData.value;
    series[i].pieData.startRatio = startValue / sumValue;
    series[i].pieData.endRatio = endValue / sumValue;
    (series[i] as any).parametricEquation = getParametricEquation(
      series[i].pieData.startRatio,
      series[i].pieData.endRatio,
      false,
      false,
      k,
      1//在此处传入饼图初始高度h
    );
    startValue = endValue;
    legendData.push(series[i].name);
  }
  // 准备待返回的配置项，把准备好的series 传入。
  const option = {
    color: [
      '#08d8e5',
      '#0380d6',
    ],
    xAxis3D: {
      min: -1,
      max: 1,
    },
    yAxis3D: {
      min: -1,
      max: 1,
    },
    zAxis3D: {
      min: -1,
      max: 1,
    },
    tooltip: {
      formatter: (params: any) => {
        let str = `${params.marker}${params.seriesName}：${optionData[params.seriesIndex].value}`
        return str;
      },
    },
    itemStyle: {
      opacity: 0,
    },
    grid3D: {
      show: false,
      boxHeight: 10,//修改立体饼图的高度
      top: '-10%',
      left: '2%',
      viewControl: {
        // 3d效果可以放大、旋转等，
        alpha: 35,//饼图翻转的程度
        beta: 30,
        rotateSensitivity: 1,
        zoomSensitivity: 0,
        panSensitivity: 0,
        autoRotate: false,//是否自动旋转
        distance: 250,//距离越小看到的饼图越大
      },
    },
    series,
  };
  return option;
}
function init3() {
  const chart4 = document.getElementById('chart4');
  if (!chart4) return;
  const myChart3 = echarts.init(chart4);
  myChart3.setOption(option);
  myChart3.on('mouseover', function (params: any) {
    // 监听鼠标移入事件其他变透明
    option.series.forEach((item: any) => {
      if (item.name !== params.seriesName) {
        item.itemStyle = {
          opacity: 0.2
        }
      } else {
        item.itemStyle = {
          opacity: 1
        }
      }
    })
    myChart3.setOption(option);
  });
  myChart3.on('globalout', function (params: any) {
    // 监听鼠标移出事件所有变不透明
    option.series.map((item: any) => {
      item.itemStyle = {
        opacity: 1
      }
    });
    myChart3.setOption(option);
  });
}
function init4() {
  const chart5 = document.getElementById('chart5');
  if (!chart5) return;
  const myChart4 = echarts.init(chart5);
  const option = {
    series: [
      {
        label: {
          show: false,
        },
        itemStyle: {
          borderWidth: 1,
          borderRadius: 5,
        },
        name: '',
        type: 'pie',
        radius: ['85%', '90%'],
        avoidLabelOverlap: false,
        data: [
          { value: 1048, name: '劳务人员' },
          { value: 735, name: '班组长' },
          { value: 580, name: '特种作业' },
          { value: 484, name: '安管人员' },
        ]
      }
    ]
  };
  // 设置数据间隙插入透明数据项,间隔插入
  var obj = {
    value: 30,
    name: '间隙',
    itemStyle: {
      opacity: 0
    }
  }
  option.series[0].data.map((item: any, index: number) => {
    option.series[0].data.splice(1 + 2 * index, 0, obj)
  })
  myChart4.setOption(option);
}
function init5() {
  const chart6 = document.getElementById('chart6');
  if (!chart6) return;
  const myChart5 = echarts.init(chart6);
  const option = {
    color: ['#1ecfff', '#ff9900'],
    tooltip: {
      trigger: 'axis'
    },
    legend: {
      data: ['进场', '出场'],
      right: 20,
      top: 20,
      textStyle: {
        color: '#fff'
      }
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '8%',
      top: '18%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      boundaryGap: true,
      data: ['2025-05-03', '2025-05-04', '2025-05-05', '2025-05-06', '2025-05-07', '2025-05-08', '2025-05-09'],
      axisLine: {
        lineStyle: {
          color: '#3a7cae'
        }
      },
      axisLabel: {
        color: '#b8e1ff'
      }
    },
    yAxis: {
      type: 'value',
      axisLine: {
        lineStyle: {
          color: '#3a7cae'
        }
      },
      splitLine: {
        lineStyle: {
          color: 'rgba(58,124,174,0.3)'
        }
      },
      axisLabel: {
        color: '#b8e1ff'
      }
    },
    series: [
      {
        name: '进场',
        type: 'line',
        smooth: true,
        symbol: 'circle',
        symbolSize: 8,
        itemStyle: {
          color: '#1ecfff'
        },
        lineStyle: {
          width: 3,
          color: '#1ecfff'
        },
        areaStyle: {
          color: 'rgba(30,207,255,0.08)'
        },
        data: [50, 80, 100, 60, 40, 20, 70]
      },
      {
        name: '出场',
        type: 'line',
        smooth: true,
        symbol: 'circle',
        symbolSize: 8,
        itemStyle: {
          color: '#ff9900'
        },
        lineStyle: {
          width: 3,
          color: '#ff9900'
        },
        areaStyle: {
          color: 'rgba(255,153,0,0.08)'
        },
        data: [20, 70, 40, 90, 100, 10, 50]
      }
    ]
  };
  myChart5.setOption(option);
}
</script>
<style lang="scss" scoped>
.container {
  display: flex;
  width: 100%;
  height: calc(100vh - 85px);
}

.left {
  height: 100%;
  width: 65%;
  display: flex;
  flex-direction: column;

  .left_top {
    height: 25%;

    .left_top_content {
      height: calc(100% - 50px);
      position: relative;
      background: rgba(3, 51, 130, .4);

      .itemList {
        color: #f0f0f0;
        display: flex;
        justify-content: space-around;
        height: 100%;
        padding: 12px;

        .item {
          position: relative;
          height: 80%;
          width: 23%;
          background: rgba(11, 47, 87, .7);
          display: flex;
          align-items: center;
          font-size: 18px;
          font-weight: 600;

          .item_left {
            width: 50%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            background: url("../../assets/menber/t_bg.png") no-repeat center center;
            background-size: 50% 50%;
          }

          img {
            height: 20%;
            width: 20%;
          }

          .dot_lt {
            height: 5px;
            width: 3px;
            background: #1cd3ff;
            position: absolute;
            top: 0;
            left: 0;
          }

          .dot_lb {
            height: 5px;
            width: 3px;
            background: #1cd3ff;
            position: absolute;
            bottom: 0;
            left: 0;
          }

          .dot_rt {
            height: 5px;
            width: 3px;
            background: #1cd3ff;
            position: absolute;
            top: 0;
            right: 0;
          }

          .dot_rb {
            height: 5px;
            width: 3px;
            background: #1cd3ff;
            position: absolute;
            bottom: 0;
            right: 0;
          }

          @keyframes lachang {
            25% {
              transform: scaleY(1.5);
            }

            100% {
              transform: scaleY(1);
            }
          }

          .dot_line_l {
            height: 35%;
            width: 2px;
            background: #1cd3ff;
            position: absolute;
            bottom: 35%;
            left: 0;
            animation: lachang 2s infinite;
          }

          .dot_line_r {
            height: 35%;
            width: 2px;
            background: #1cd3ff;
            position: absolute;
            bottom: 35%;
            right: 0;
            animation: lachang 2s infinite;
          }
        }
      }
    }
  }

  .left_bottom {
    flex: 1;

    .chartBox {
      display: flex;
      flex-wrap: wrap;
      height: 100%;
      justify-content: space-between;

      .chartItem {
        position: relative;
        height: 48%;
        width: 49.5%;
        background: rgba(3, 51, 130, .4);

        .chart_item_content {
          height: calc(100% - 50px);
          position: relative;
          display: flex;
          align-items: center;
          color: #fff;

          .showData {
            position: absolute;
            top: 50%;
            left: 25%;
            transform: translate(-50%, -50%);
          }

          #chart1 {
            height: 90%;
            width: 50%;
          }

          #chart2 {
            height: 90%;
            width: 50%;
          }

          #chart3 {
            height: 90%;
            width: 50%;
          }

          #chart4 {
            height: 90%;
            width: 50%;
          }

          #chart5 {
            height: 90%;
            width: 50%;
            background: url("../../assets/menber/b_bg.png") no-repeat center center;
            background-size: 60% 70%;
          }

          .chart_item_content_title {
            height: 100%;
            flex: 1;
            display: flex;
            flex-direction: column;
            justify-content: space-around;

            .chart_item_content_title_item {
              width: 100%;
              display: flex;
              align-items: center;
              justify-content: space-around;

              .colorT_dot {
                display: inline-block;
                height: 10px;
                width: 10px;
                background: yellow;
                margin-right: 12px;
              }
            }

          }
        }
      }
    }
  }
}

.right {
  flex: 1;
  margin-left: 10px;
  display: flex;
  flex-direction: column;

  .right_top {
    height: 35.5%;

    .right_top_content {
      height: calc(100% - 50px);
      position: relative;
      background: rgba(3, 51, 130, .4);

      #chart6 {
        height: 100%;
        width: 100%;
      }
    }
  }

  .right_center {
    height: 32%;
    margin: 6px 0;

    .right_center_content {
      height: calc(100% - 50px);
      position: relative;
      background: rgba(3, 51, 130, .4);

      .table_content {
        height: 100%;
        width: 100%;
        display: flex;
        flex-direction: column;
        color: #fff;

        .table_content_title {
          display: flex;
          align-items: center;
          background: rgba(48, 142, 255, .3);
          justify-content: space-around;
          padding: 10px 0;

          div {
            width: 100%;
            text-align: center;
          }
        }

        .table_content_list {
          height: 73%;
          width: 100%;
          overflow-y: hidden;

          .table_content_list_item {
            display: flex;
            align-items: center;
            justify-content: space-around;
            padding: 10px 0;

            .table_content_list_item_item {
              width: 100%;
              text-align: center;
            }

            &:hover {
              border: 1px solid #0a7cb1;
            }
          }
        }
      }
    }
  }

  .right_bottom {
    height: 29.5%;

    .right_bottom_content {
      height: calc(100% - 50px);
      position: relative;
      background: rgba(3, 51, 130, .4);
    }
  }
}

.btnBox {
  width: 30%;
  position: absolute;
  top: -35px;
  right: 50px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-around;
}

.btnItem {
  width: 80px;
  height: 30px;
  background: url("../../assets/menber/r_b_bg_n.png") no-repeat center center;
  background-size: 100% 100%;
  opacity: 0.5;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
}

.active {
  background: url("../../assets/menber/r_b_bg.png") no-repeat center center;
  background-size: 100% 100%;
  opacity: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: nowrap;
  flex-direction: row;
  align-content: flex-start
}
</style>