<template>
  <div>
    <!-- 主体内容 -->
    <div class="main-content">
            <!-- 左侧 -->
            <div class="sidebar sidebar-left">
                <div class="sidebar-item">
                  <div class="sub-title por"><span>分站状态分析</span></div>
                  <div class="sub-con sub-con1">
                    <div class="sub-con-left por">
                      <div><p>带班领导：王伟威</p></div>
                    </div>
                    <div class="sub-con-right">
                      <div><p class="p-out"><i>系统监控总人数</i><span class="por">135</span></p></div>
                      <div><p class="p-out"><i>下井总人数</i><span class="por">124</span></p></div>
                      <div><p class="p-out"><i>地面井口总人数</i><span class="por">123</span></p></div>
                      <div><p class="p-out"><i>重点区域人数</i><span class="por">234</span></p></div>
                    </div>
                  </div>
                  
                </div>
                <!-- 状态统计组件 -->
                <div class="sidebar-item status-box">
                  <div class="sub-title por"><span>区域人数实时分布图</span></div>
                  <div class="sub-con">
                    <div class="left-chart" ref="left1" id="left1"></div>
                  </div>
                </div>
                <!-- 报警分析组件 -->
                <div class="sidebar-item alert-analysis">
                  <div class="sub-title por"><span>井下人员实时状态</span></div>
                  <div class="sub-con sub-con-scroll-table">
                    <ScrollTable
                      :data="tableData1"
                      :height="'220px'"
                      :auto-scroll-enabled="true"
                      :scroll-speed="80"
                      :columns="columns1"
                    >
                      <!-- 自定义表头 -->
                      <template v-slot:header>
                        <div class="custom-header">
                          <span class="custom-header-item" >姓名</span>
                          <span class="custom-header-item" >分站名称</span>
                          <span class="custom-header-item" >距离分站</span>
                          <span class="custom-header-item" >时间</span>
                        </div>
                      </template>

                      <!-- 自定义列表项内容 -->
                      <template v-slot:item-content="{ item, index }">
                        <div class="custom-item">
                          <span class="custom-item-content">{{ item.name }}</span>
                          <span class="custom-item-content">{{ item.station }}</span>
                          <span class="custom-item-content">{{ item.distance }}</span>
                          <span class="custom-item-content">{{ item.time }}</span>
                        </div>
                      </template>
                    </ScrollTable>

                  </div>
                </div>
            </div>

            <!-- 中间 -->
            <div class="main-area">
              
                
                <!-- 人员点位 -->
                <div class="dot dot1" @click=""></div>
            </div>

            <!-- 右侧 -->
            <div class="sidebar sidebar-right">
              <div class="sidebar-item alert-analysis">
                <div class="sub-title por"><span>分站状态分析</span></div>
                <div class="sub-con sub-con-r">
                  <div class="sub-con-r-left"></div>
                  <div class="sub-con-r-right">
                    <p><span>分站总数</span><span>---------</span><span>28</span></p>
                    <p><span>运行中分站</span><span>---------</span><span>28</span></p>
                    <p><span>休眠中分站</span><span>---------</span><span>28</span></p>
                  </div>
                </div>
              </div>
              <!-- 重点区域组件 -->
              <div class="sidebar-item alert-analysis">
                <div class="sub-title por"><span>近30天报警分析</span></div>
                <div class="sub-con">
                  <div class="left-chart" ref="right" id="right"></div>
                </div>
              </div>
              <!-- 报警信息流 -->
              <div class="sidebar-item alert-analysis">
                <div class="sub-title por"><span>近7日井下人员报警信息</span></div>
                <div class="sub-con sub-con-scroll-table">
                    <ScrollTable
                      :data="tableData2"
                      :height="'220px'"
                      :auto-scroll-enabled="true"
                      :scroll-speed="80"
                      :columns="columns2"
                    >
                      <!-- 自定义表头 -->
                      <template v-slot:header>
                        <div class="custom-header custom-header2">
                          <span class="custom-header-item custom-header-item2" >姓名</span>
                          <span class="custom-header-item custom-header-item2" >部门</span>
                          <span class="custom-header-item custom-header-item2" >报警时间</span>
                          <span class="custom-header-item custom-header-item2" >报警位置</span>
                        </div>
                      </template>

                      <!-- 自定义列表项内容 -->
                      <template v-slot:item-content="{ item, index }">
                        <div class="custom-item custom-item2">
                          <span class="custom-item-content custom-item-content2">{{ item.name }}</span>
                          <span class="custom-item-content custom-item-content2">{{ item.department }}</span>
                          <span class="custom-item-content custom-item-content2">{{ item.alertTime }}</span>
                          <span class="custom-item-content custom-item-content2">{{ item.alertLocation }}</span>
                        </div>
                      </template>
                    </ScrollTable>

                  </div>
              </div>
            </div>
        </div>
  </div>
</template>
<script>
import * as echarts from "echarts";
import { getScale } from "@/utils/tylerlcl";
import ScrollTable from '@/components/Tyler/ScrollTable.vue';
import screenfull from "screenfull";
export default {
  name: "cockpit",
  components: {
    ScrollTable,
  },
  data() {
    return {
      tableData1: [
        { name: "陈玉强", station: "一中运输巷", distance: 14.21, time: "2025-01-10 14:21:31" },
        { name: "陈玉强", station: "一中运输巷", distance: 14.21, time: "2025-01-10 14:21:31" },
        { name: "陈玉强", station: "一中运输巷", distance: 14.21, time: "2025-01-10 14:21:31" },
        { name: "陈玉强", station: "一中运输巷", distance: 14.21, time: "2025-01-10 14:21:31" },
        { name: "陈玉强", station: "一中运输巷", distance: 14.21, time: "2025-01-10 14:21:31" },
        { name: "陈玉强", station: "一中运输巷", distance: 14.21, time: "2025-01-10 14:21:31" },
        { name: "陈玉强", station: "一中运输巷", distance: 14.21, time: "2025-01-10 14:21:31" },
      ],
      columns1: [
        { label: "姓名", field: "name", width: "100px" },
        { label: "分站名称", field: "station", width: "150px" },
        { label: "距离分站(m)", field: "distance", width: "120px" },
        { label: "时间", field: "time", width: "180px" },
      ],
      tableData2: [
        { name: "陈玉强", department: "生产部", alertTime: "2025-01-10 14:21:31", alertLocation: "四中车场" },
        { name: "陈玉强", department: "生产部", alertTime: "2025-01-10 14:21:31", alertLocation: "四中车场" },
        { name: "陈玉强", department: "生产部", alertTime: "2025-01-10 14:21:31", alertLocation: "四中车场" },
        { name: "陈玉强", department: "生产部", alertTime: "2025-01-10 14:21:31", alertLocation: "四中车场" },
        { name: "陈玉强", department: "生产部", alertTime: "2025-01-10 14:21:31", alertLocation: "四中车场" },
        { name: "陈玉强", department: "生产部", alertTime: "2025-01-10 14:21:31", alertLocation: "四中车场" },
        { name: "陈玉强", department: "生产部", alertTime: "2025-01-10 14:21:31", alertLocation: "四中车场" },
      ],
      columns2: [
        { label: "姓名", field: "name", width: "100px" },
        { label: "部门", field: "department", width: "120px" },
        { label: "报警时间", field: "alertTime", width: "180px" },
        { label: "报警位置", field: "alertLocation", width: "150px" },
      ],
    };
  },
  mounted() {
    if (screenfull && screenfull.enabled && !screenfull.isFullscreen) {
      screenfull.request();
    }
    this.areaCharts();
    this.alarm30();
  },
  methods: {
    // 辅助方法：获取字段值
    getItemField(item, fieldKey) {
      return item[this.fieldMap[fieldKey]] || "";
    },
    areaCharts(){
      let that = this;
      let myChart = echarts.init(document.getElementById('left1'));
      let xAxisData =['一中','二中','三中','四中','五中','井口','中央井'];
      let yAxisData = [20,10,34,22,18,34,22];
      let option ={
          title: {
            text: "",
            x: "center",
            y:"4%",
            textStyle: {
                color: '#fff',
                fontSize: '12'
            },
            subtextStyle: {
                color: '#90979c',
                fontSize: '12',

            },
          },
          tooltip: {
              trigger: 'axis',
              axisPointer: {
                  type: 'shadow'
              }
          },
          grid: {
              top: '5%',
              right: '3%',
              left: '8%',
              bottom: '12%'
          },
          xAxis: [{
              type: 'category',
              data: xAxisData,
              axisLine: {
                  show:true,
                  lineStyle: {
                      color: 'rgba(255,255,255,0.12)'
                  }
              },
              axisLabel: {
                  show:true,
                  margin: 10,
                  color: '#fff',
                  textStyle: {
                      fontSize: 14
                  },
              },
          }],
          yAxis: [{
              // name: '单位：人',
              axisLabel: {
                  show:true,
                  formatter: '{value}',
                  color: '#B7CCDA',
                  textStyle: {
                      fontSize: 14
                  },
              },
              axisTick:{       //y轴刻度线
                show:true,
                color: '#e2e9ff',
              },
              axisLine: {
                  show: true,
                  color: '#e2e9ff',
                  lineStyle: {
                      color: 'rgba(255,255,255,0.12)'
                  }
              },
              splitLine: {
                  show:true,
                  lineStyle: {
                      color: 'rgba(255,255,255,0.12)'
                  }
              }
          }],
          series: [{
              type: 'bar',
              data: yAxisData,
              barWidth: '16px',
              itemStyle: {
                  normal: {
                      color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                          offset: 0,
                          color: '#37BBFF' // 0% 处的颜色
                      }, {
                          offset: 1,
                          color: '#1C3454' // 100% 处的颜色
                      }], false),
                      // barBorderRadius: [30, 30, 8, 8],
                      // shadowColor: 'rgba(0,160,221,1)',
                      // shadowBlur: 4,
                  }
              },
              label: {
                  normal: {
                      show: false,
                      lineHeight: 20,
                      width: 10,
                      height: 20,
                      backgroundColor: 'rgba(0,160,221,0.1)',
                      // borderRadius: 200,
                   
                  }
              }
          }]
      }
      myChart.setOption(option);
      setTimeout(() => {
        myChart.resize();
      }, 600);

    },
    alarm30(){
      let that = this;
      let myChart = echarts.init(document.getElementById('right'));
      var salvProName = [
        "超时报警",
        "超员报警",
        "限制区报警",
        "工作异常报警",
        "井下人员报警",
        "通讯报警",
      ];
      var salvProValue = [239, 181, 154, 144, 135,100 ];
      var salvProMax = []; //背景按最大值
      for (let i = 0; i < salvProValue.length; i++) {
        salvProMax.push(salvProValue[0]);
      }
      let option ={
        grid: {
          left: "4%",
          right: "0%",
          bottom: "2%",
          top: "2%",
          containLabel: true,
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "none",
          },
          formatter: function (params) {
            return params[0].name + " : " + params[0].value;
          },
        },
        xAxis: {
          // show: false,
          type: "value",
          axisLabel: {
              show:true,
              color: '#B7CCDA',
              textStyle: {
                  fontSize: 14
              },
          },
          axisLine: {
            show: false,
          },
          splitLine: {
            show: false,
          },
        },
        yAxis: [
          {
            type: "category",
            inverse: true,
            axisLabel: {
              show: true,
              textStyle: {
                color: "#fff",
                fontSize: 14
              },
            },
            splitLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            axisLine: {
              show: false,
            },
            data: salvProName,
          },
          {
            type: "category",
            inverse: true,
            axisTick: "none",
            axisLine: "none",
            show: false,
            axisLabel: {
              textStyle: {
                color: "#ffffff",
                fontSize: "14",
              },
            },
            data: salvProValue,
          },
        ],
        series: [
          {
            name: "值",
            type: "bar",
            zlevel: 1,
            itemStyle: {
              normal: {
                // barBorderRadius: 30,
                color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                  {
                    offset: 0,
                    color: "#1C3454",
                  },
                  {
                    offset: 1,
                    color: "#37BBFF",
                  },
                ]),
              },
            },
            barWidth: 10,
            data: salvProValue,
          },
          {
            name: "背景",
            type: "bar",
            barWidth: 10,
            barGap: "-100%",
            data: salvProMax,
            itemStyle: {
              normal: {
                color: "rgba(24,31,68,1)",
                barBorderRadius: 30,
              },
            },
          },
        ],
      };
      myChart.setOption(option);
      setTimeout(() => {
        myChart.resize();
      }, 600);

    },
    //自动滚动
    autoScroll() {
      const divData = this.$refs.scroll_List3;
      // 拿到表格中承载数据的div元素
      divData.scrollTop += 1;
        if (
          Math.round(divData.clientHeight + divData.scrollTop) + 1 >=
          divData.scrollHeight
        ) {
          // 重置table距离顶部距离
          divData.scrollTop = 0;
        }
        this.scrolltimer3 = window.requestAnimationFrame(
          this.autoScroll.bind(this)
        );
    },
    //停止滚动
    cancelScroll() {
      window.cancelAnimationFrame(this.scrolltimer3)
    },
    goToSys(){
      var link = this.$router.resolve({
        path: "/",
      });
      window.open(link.href);
      return;
    },
  },
};
</script>
<style lang="scss" scoped>
.por{position: relative;}
.sidebar-left{
  transform-origin: left center;
  transform: scaleX(1) perspective(610px) rotateY(5deg);
}
.sidebar-right{
  transform-origin:center right ;
  transform: scaleX(1) perspective(610px) rotateY(-5deg);
}
/* 主体内容 */
.main-content {
    // flex: 1;
    // display: grid;
    // grid-template-columns: 1fr 3fr 1fr; /* 三列布局 */
    // gap: 20px;
    // max-height: calc(100% - 70px);
    // overflow: hidden;
    display: flex;
    justify-content: space-between;
    padding:0 30px;
    
}

/* 左右侧边栏 */
.sidebar {
  width: 460px;
  border-radius: 8px;
  flex: 1;
  // display: flex;
  // flex-direction: column;
  display: grid;
  grid-template-rows: repeat(3,1fr);
  gap: 2px;
  margin-top: -10px;
}
.sidebar-item{
  width: 100%;
  height: 286px;
  margin-bottom: 30px;
  background: linear-gradient(180deg, rgba(1,33,58,.2) 0%, rgba(8,132,233,.2) 100%);
  position: relative;
  &::before{
    content: '';
    width: 460px;
    height: 4px;
    position: absolute;
    background: url("~@/assets/images/screen/bottom.png") no-repeat center;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: 20;
  }
  .sub-title{
    width: 100%;
    height: 46px;
    background: url("~@/assets/images/screen/title1.png") no-repeat center;
    font-weight: bold;
    span{
      position: absolute;
      top:-10px;
      left:30px;
      font-size: 22px;
    }
  }
  .sub-con1{
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    .sub-con-left{
      div{
        margin-top: -40px;
        width: 144px;
        height: 178px;
        background: url("~@/assets/images/screen/icon1.png") no-repeat center;
        
        p{
          font-size: 18px;
          color: #FFFFFF;
          background: linear-gradient(180deg, #FFED9B 0%, #FFFFFF 48.9990234375%, #FFE25D 100%);
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
          text-align: center;
          font-weight: bold;
        }
      }
      
    }
    .sub-con-right{
      div{
        width: 243px;
        height: 32px;
        background: url("~@/assets/images/screen/underline.png") no-repeat center;
        position: relative;
        margin-bottom: 30px;
        font-size: 18px;
        

        .p-out{
          width: 100%;
          position: absolute;
          left:30px;
          top:-16px;
          display: flex;
          flex-direction: row;
          align-items: center;
          justify-content: space-between;
          padding-right: 50px;
          span{
            font-size: 30px;
            color: #FFD929;
            text-indent: 15px;
            font-family: 'number';
            margin-top: -4px;
            &::before{
              content: '';
              width: 6px;
              height: 8px;
              position: absolute;
              background: url("~@/assets/images/screen/icon2.png") no-repeat center;
              left: 5px;
              top:10px;
              z-index: 20;
            }
           
          }
        }
        &:nth-child(1) p.p-out span{
          color: #29CAFF;
        }
        &:nth-child(2) p.p-out span{
          color: #00FFC0;
        }
      }
      
      
    }
  }
}
/* 中间主区域 */
.main-area {
  width: calc(100% - 920px);
  background: url("~@/assets/images/screen/bg3.png") no-repeat center;
  text-align: center;
}

/* 实时分布图区域 */
.distribution-map {
    height: 300px;
    background: rgba(8, 28, 49, 0.8);
    border-radius: 8px;
}

/* 底部信息栏 */
// .footer {
//     height: 120px;
//     margin-top: 20px;
//     background: rgba(0, 72, 143, 0.6);
//     border-radius: 8px;
//     display: flex;
//     align-items: center;
//     padding: 0 30px;
// }


.left-chart{
  width: 100%;
  height: 14em;
}
.sub-con-scroll-table{
  width: 95%;
  margin: 0 auto;
  overflow: hidden;
}
.custom-header{
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 2fr;
  text-align: center;
  color: #2ED5FF;
}
.custom-item{
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 2fr;
  text-align: center;
}
.custom-header2{
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr 2fr 1fr;
  text-align: center;
  color: #2ED5FF;
}
.custom-item2{
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr 2fr 1fr;
  text-align: center;
}
.sub-con-r{
  width: 100%;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  height: calc(100% - 70px);
  .sub-con-r-left{
    width: 127px;
    height: 161px;
    background: url("~@/assets/images/screen/icon3.png") no-repeat center;
    background-size: 100%;
  }
  .sub-con-r-right{
    
    width: 250px;
    display: flex;
    flex-direction: column;
    // gap: 10px;
    p{
      display: grid;
      grid-template-columns: 4fr 4fr 1fr;
      font-size: 18px;
      line-height: 24px;
      color: #BBD7EA;
      background-color: rgba(61, 98, 147,.2);
      padding:10px 10px;
      text-align: justify;
      box-sizing: border-box;
      span:nth-child(2){
        color: rgba(187, 215, 234,.2);
      }
      span:nth-child(3){
        font-weight: bold;
        font-size: 24px;
        color: #BBD7EA;
        background: linear-gradient(0deg, #47C5FF 0%, #FDFEFF 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
      }
    }
  }
}
</style>