<template>
  <el-container>
    <el-header style="height: 20px;">
      <div v-if="this.$router.currentRoute.path=='/tunnelling'">
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item :to="{ path: '/tunnelling'}">掘进系统</el-breadcrumb-item>
          <el-breadcrumb-item>系统数据</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
    </el-header>

    <el-main>
      <span style="font-size: 20px;">掘进工作面：</span>
      <div class="coalblock" v-for="item in options" :key="item.title">
        <span style="font-size: 12px; color:#9196a1 ;">{{item.title}}</span>
        <!-- </br> -->
        <span style="font-size: 24px;">{{item.num}}</span>
      </div>

      <el-card>
        <el-table :data="tableData" style="width: 100%" border stripe>
          <el-table-column type="index" label="序号" header-align="center" align="center" width="160">
          </el-table-column>
          <el-table-column prop="sub_system_name" label="子系统名称" header-align="center" align="center" width="180">
          </el-table-column>
          <el-table-column prop="describe" label="描述" header-align="center" align="center" width="500">
          </el-table-column>
          <el-table-column prop="remark" label="备注" header-align="center" align="center" width="180">
          </el-table-column>
        </el-table>
        <!-- 分页区域 -->
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                       :current-page="currentPage1" :page-sizes="[1, 2, 5, 10]" :page-size="1"
                       layout="total, sizes, prev, pager, next, jumper" :total="9">
        </el-pagination>
      </el-card>
    </el-main>

    
	<div class="tunneling" >
      <!-- <header class="screen-header">
       
          <h1 >掘进机远程智能控制系统</h1>
      </header> -->
      <div class="screen-body">
          <section class="screen-left">
              <div id="left-top">
                  <div id="left-top-left">
                      <!-- 行走状态 -->
                      <!-- <footState></footState> -->
                      <ruler></ruler>
                  </div>
                  <div id="left-top-right">
                      <!-- 割接轨迹 -->
                      <hard></hard>
                  </div>
              </div>
              <div id="left-mid">
                     <!-- 压入式风机 -->
                     <lmid></lmid>
              </div>
              <div id="left-bottom">
                  <!-- 除尘风机 -->
                  <lbottom></lbottom>
              </div>
          </section>
          <section class="screen-middle">
              <div id="middle-top">
                <!-- 6个仪表盘 -->
                <div id="line_1">
                    <div id="top_1">
                        <dashBoard></dashBoard>
                    </div>
                    <div id="top_2">
                        <one></one>
                    </div>
                    <div id="top_3">
                        <two></two>
                    </div>
                </div>
                <div id="line_2">
                    <div id="bottom_1">
                        <three></three>
                    </div>
                    <div id="bottom_2">
                        <four></four>
                    </div>
                    <div id="bottom_3">
                        <five></five>                        
                    </div>
                </div>
              </div>
              <div id="middle-bottom">
                  <div id="middle-bottom-left">
                      <!-- 掘进机工作状态 -->
                      <mbl2></mbl2>
                  </div>
                  <div id="middle-bottom-right">
                      <div id="tem1">
                        <!-- 油缸温度 -->
                        <tempChart></tempChart>
                      </div>
                     <div id="tem2">
                        <!-- 油位 -->
                        <tempChart2></tempChart2>
                      </div> 
                  </div>
              </div>
          </section>
          <section class="screen-right">
              <div id="right-top">
                  <!-- 掘进机控制系统 -->
                  <rtop></rtop>
              </div>
              <div id="right-mid-one">
                  <!-- 时间 ************************************************-->
                  <current_time></current_time>
              </div>
              <div id="right-mid-two">
                  <!-- 远控模式 -->
                  <rtone></rtone>
              </div>
              <div id="right-bottom">
                  <!-- 日志 -->
                  <log></log>
              </div>
          </section>
      </div>
    </div>

  </el-container>
</template>

<script>
import current_time from '@/components/tunneling/current_time.vue'
import dashBoard from '@/components/tunneling/dashBoard.vue'
import one from '@/components/tunneling/six/one.vue'
import two from '@/components/tunneling/six/two.vue'
import three from '@/components/tunneling/six/three.vue'
import four from '@/components/tunneling/six/four.vue'
import five from '@/components/tunneling/six/five.vue'
import tempChart from '@/components/tunneling/temporature.vue'
import ruler from '@/components/tunneling/ruler.vue'
import tempChart2 from '@/components/tunneling/temporature-two.vue'
import rtop from '@/components/tunneling/rtop.vue'
import mbl2 from '@/components/tunneling/mbl2.vue'
import rtone from '@/components/tunneling/rtone.vue'
import lmid from '@/components/tunneling/lmid.vue'
import lbottom from '@/components/tunneling/lbottom.vue'
import log from '@/components/tunneling/log.vue'
import hard from '@/components/tunneling/hard.vue'
    export default {
        name: "systemData",
        data() {
            return {
                options: [{
                    title: '总数据量',
                    num: '1.2T'
                }, {
                    title: '系统个数',
                    num: '8个'
                }, {
                    title: '子系统个数',
                    num: '12个'
                }, {
                    title: '设备个数',
                    num: '125个'
                }],
                tableData: [{
                    sub_system_name: '综掘机',
                    describe: 'YB2-5002-4型，功率900kW，U=6kV,I=105.1A，功率因数0.86',
                    remark: '暂无'
                }, {
                    sub_system_name: '转载机',
                    describe: 'YB2-5002-4型，功率900kW，U=6kV,I=105.1A，功率因数0.86',
                    remark: '暂无'
                }, {
                    sub_system_name: '装煤机',
                    describe: 'YB2-5002-4型，功率900kW，U=6kV,I=105.1A，功率因数0.86',
                    remark: '暂无'
                }, {
                    sub_system_name: '局部扇风机',
                    describe: 'YB2-5002-4型，功率900kW，U=6kV,I=105.1A，功率因数0.86',
                    remark: '暂无'
                }, {
                    sub_system_name: '锚索钻机',
                    describe: 'YB2-5002-4型，功率900kW，U=6kV,I=105.1A，功率因数0.86',
                    remark: '暂无'
                }, {
                    sub_system_name: 'xxx',
                    describe: 'YB2-5002-4型，功率900kW，U=6kV,I=105.1A，功率因数0.86',
                    remark: '暂无'
                }, {
                    sub_system_name: 'xxx',
                    describe: 'YB2-5002-4型，功率900kW，U=6kV,I=105.1A，功率因数0.86',
                    remark: '暂无'
                }, {
                    sub_system_name: 'xxx',
                    describe: '无',
                    remark: '暂无'
                }, {
                    sub_system_name: 'xxx',
                    describe: '无',
                    remark: '暂无'
                }],

                currentPage1: 1,
                currentPage2: 2,
                currentPage3: 3,
                currentPage4: 4,
                checkVisible: false
            }
        },
        methods: {
            handleSizeChange(newSize) {
                // console.log(newSize)
            },
            //监听 页码值 改变的事件
            handleCurrentChange(newPage) {
                // console.log(newPage)
            }
        },
         components: {
            current_time,
            dashBoard,
            tempChart,
            tempChart2,
            one,
            two,
            three,
            four,
            five,
            ruler,
            mbl2,
            rtop,
            rtone,
            lmid,
            lbottom,
            log,
            hard
        },
    }
</script>

<style scoped>
    .coalblock {
        width: 115px;
        height: 77px;
        border: solid 1px #dcdfe6;
        padding-top: 20px;
        margin-left: 25px;
        text-align: center;
        display: inline-block;
    }
/* header{
    border-bottom: 1px solid red;
    color: red;
    position: relative;
    margin-bottom: 0%;
    padding: 0 0 0;
} */
  /* 声明字体 */
/* @font-face {
    font-family: electronicFont;
    src: url(@/assets/font/DS-DIGIT.TTF);
} */
.fullscreen {
    position: relative!important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    /* z-index: 100; */
}
.home{
    width: 100%;
    height: 100%;
    padding: 0 20px;
    background-color: #161522;
    color: #fff;
    box-sizing: border-box;
    position: relative;
}
.screen-container {
    width: 100%;
    height: 100%;
    padding: 0 20px;
    background-color: #161522;
    color: #fff;
    box-sizing: border-box;
}
.screen-header {
    width: 100%;
    height: 64px;
    font-size: 20px;
    position: relative;
}
h1 {
    color: blue;
    text-align: center;
    margin: 0%;
    height: 100%;

}
.screen-body {
    width: 100%;
    height: 100%;
    display: flex;
    margin-top: 10px;
}
.screen-left{
    height: 100%;
    flex: 3;
    display: flex;
    flex-direction: column;
}
#left-top{
    height: 33%;
    display: flex;
    position: relative;
    border: 1px solid rgba(25, 186, 139, 0.17);
}
#left-top-left{
    flex: 3;
    position: relative;
    border: 1px solid rgba(25, 186, 139, 0.17);
}
#left-top-right{
    flex: 4;
    position: relative;
    border: 1px solid rgba(25, 186, 139, 0.17);
}
        
#left-mid{
    height: 33%;
    margin-top: 10px;
    position: relative;
    border: 1px solid rgba(25, 186, 139, 0.17);
}
#left-bottom{
    height: 33%;
    margin-top: 10px;
    position: relative;  
    border: 1px solid rgba(25, 186, 139, 0.17);
}
.screen-middle{
    height: 100%;
    width: 41.5%;
    margin-left: 1.6%;
    margin-right: 1.6%;
    border: 1px solid rgba(25, 186, 139, 0.17);
}
#middle-top{
    height: 60%;
    border: 1px solid rgba(25, 186, 139, 0.17);
    margin-bottom: 0.1875rem;
    display: flex;
    flex-direction: column;
}
#line_1{    
    flex: 1;
    display: flex;
}
#top_1{     
    flex: 1;
    border: 1px solid rgba(25, 186, 139, 0.17);
}
#top_2{
    flex: 1;
    border: 1px solid rgba(25, 186, 139, 0.17);
}
#top_3{
    flex: 1;
    border: 1px solid rgba(25, 186, 139, 0.17);
}
#line_2{    
    flex: 1;
    display: flex;
}
#bottom_1{
    flex: 1;
    border: 1px solid rgba(25, 186, 139, 0.17);
}
#bottom_2{
    flex: 1;
    border: 1px solid rgba(25, 186, 139, 0.17);
}
#bottom_3{
    flex: 1;
    border: 1px solid rgba(25, 186, 139, 0.17);
}
#middle-bottom{
    height: 35%;
    margin-top: 5px;
    position: relative;
    border: 1px solid rgba(25, 186, 139, 0.17);
    display: flex;
}
#middle-bottom-left{
    border: 1px solid rgba(25, 186, 139, 0.17);
    margin-bottom: 0.1875rem;
    margin-right: 0.1875rem;
    flex:3;
    position: relative; 
    /* // 添加边角 */
}
#middle-bottom-right{
    border: 1px solid rgba(25, 186, 139, 0.17);
    margin-bottom: 0.1875rem;
    margin-right: 0.1875rem;
    width: 100%;
    height: 100%;
    flex: 2;
    /* position: relative; */
    display: flex;
    /* // 添加边角 */
}
#tem1{
    flex: 1;
    width: 50%;
    height: 100%;
    /* position: relative; */
}
#tem2{
    flex: 1;
    width: 50%;
    height: 100%;
    /* position: relative; */
}
.screen-right{
    flex: 2;
    display: flex;
    flex-direction: column ;
    border: 1px solid rgba(25, 186, 139, 0.17);
}
#right-top{
    border: 1px solid rgba(25, 186, 139, 0.17);
    margin-bottom: 0.1875rem;
    flex:2
}
#right-mid-one{
    border: 1px solid rgba(25, 186, 139, 0.17);
    margin-bottom: 0.1875rem;
    flex: 1;
}
#right-mid-two{
    border: 1px solid rgba(25, 186, 139, 0.17);
    margin-bottom: 0.1875rem;
    flex: 2;
}
#right-bottom{
    border: 1px solid rgba(25, 186, 139, 0.17);
    margin-bottom: 0.1875rem;
    flex: 5;
} 
</style>