<template>
  <v-scale-screen
    ref="scale-screen"
    width="1920"
    height="1080"
    :fullScreen="true"
  >
    <div class="container">
      <!-- 头部 -->
      <div class="header por">银洞坡金矿智能化综合管控平台</div>
      <div class="sub-header">
        <div class="sub-header-left">
          <div class="sub-item" @click="changeMenu(1)"><p>人员定位</p></div>
          <div class="sub-item" @click="changeMenu(2)"><p>环境监测</p></div>
          <div class="sub-item"><p>排水系统</p></div>
        </div>
        <div class="sub-header-mid">
          <div class="top-change">
            <span @click="changeMenu(0)">首页</span>
            <span>企业宣传</span>
            <span @click="goToSys">后台管理</span>
          </div>
        </div>
        <div class="sub-header-right">
          <div class="sub-item"><p>提升机系统</p></div>
          <div class="sub-item"><p>风机系统</p></div>
          <div class="sub-item"><p>电力系统</p></div>
        </div>
      </div>

      <rydw v-if="showMenu === 1"></rydw>
      <hjjc v-if="showMenu === 2"></hjjc>

      <!-- 底部 -->
      <!-- <div class="footer">
        </div> -->
    </div>
  </v-scale-screen>
</template>
<script>
// import * as echarts from "echarts";
// import { getScale } from "@/utils/tylerlcl";
import screenfull from "screenfull";
import rydw from "./items/rydw.vue";
import hjjc from "./items/hjjc.vue";

export default {
  name: "cockpit",
  components: {
    rydw,
    hjjc,
  },
  data() {
    return {
      showMenu: 0,
    };
  },
  mounted() {
    if (screenfull && screenfull.enabled && !screenfull.isFullscreen) {
      screenfull.request();
    }
    //     this.areaCharts();
    //     this.alarm30();
  },
  methods: {
    changeMenu(val) {
      this.showMenu = val;
    },
    //     // 辅助方法：获取字段值
    //     getItemField(item, fieldKey) {
    //       return item[this.fieldMap[fieldKey]] || "";
    //     },
    //     areaCharts(){
    //       let that = this;
    //       let myChart = echarts.init(document.getElementById('left1'));
    //       let xAxisData =['中段1','中段2','中段3','中段4','中段5',];
    //       let yAxisData = [20,10,34,22,18];
    //       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: '15%',
    //               bottom: '10%'
    //           },
    //           xAxis: [{
    //               type: 'category',
    //               data: xAxisData,
    //               axisLine: {
    //                   show:true,
    //                   lineStyle: {
    //                       color: 'rgba(255,255,255,0.12)'
    //                   }
    //               },
    //               axisLabel: {
    //                   show:true,
    //                   margin: 10,
    //                   color: '#e2e9ff',
    //                   textStyle: {
    //                       fontSize: 12
    //                   },
    //               },
    //           }],
    //           yAxis: [{
    //               // name: '单位：人',
    //               axisLabel: {
    //                   show:true,
    //                   formatter: '{value}',
    //                   color: '#e2e9ff',
    //               },
    //               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: 'rgba(0,244,255,1)' // 0% 处的颜色
    //                       }, {
    //                           offset: 1,
    //                           color: 'rgba(0,77,167,1)' // 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: "2%",
    //           right: "2%",
    //           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",
    //         },
    //         yAxis: [
    //           {
    //             type: "category",
    //             inverse: true,
    //             axisLabel: {
    //               show: true,
    //               textStyle: {
    //                 color: "#fff",
    //               },
    //             },
    //             splitLine: {
    //               show: false,
    //             },
    //             axisTick: {
    //               show: false,
    //             },
    //             axisLine: {
    //               show: false,
    //             },
    //             data: salvProName,
    //           },
    //           {
    //             type: "category",
    //             inverse: true,
    //             axisTick: "none",
    //             axisLine: "none",
    //             show: true,
    //             axisLabel: {
    //               textStyle: {
    //                 color: "#ffffff",
    //                 fontSize: "12",
    //               },
    //             },
    //             data: salvProValue,
    //           },
    //         ],
    //         series: [
    //           {
    //             name: "值",
    //             type: "bar",
    //             zlevel: 1,
    //             itemStyle: {
    //               normal: {
    //                 barBorderRadius: 30,
    //                 color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
    //                   {
    //                     offset: 0,
    //                     color: "rgb(57,89,255,1)",
    //                   },
    //                   {
    //                     offset: 1,
    //                     color: "rgb(46,200,207,1)",
    //                   },
    //                 ]),
    //               },
    //             },
    //             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>
/* 标题 */
@font-face {
  font-family: "ysbth";
  src: url("~@/assets/font/syhtCN-Medium.ttf") format("truetype");
}
@font-face {
  font-family: "number";
  src: url("~@/assets/font/DS-Digital.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}
.por {
  position: relative;
}
.poa {
  position: absolute;
}
/* 基础容器 */
.container {
  width: 100%;
  height: 100%;
  background: url("~@/assets/images/screen/bg.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
  display: flex;
  flex-direction: column;
  padding: 0 20px;
  background-color: #08152a;
  position: relative;
  font-family: "SimHei";

  color: #fff;
}
/* 头部标题 */
.header {
  // height: 80px;
  text-align: center;
  // margin-bottom: 20px;
  // background: linear-gradient(90deg, rgba(0,72,143,0.8) 0%, rgba(0,36,71,0.6) 100%);

  display: flex;
  align-items: center;
  justify-content: center;
  // font-size: 2.5vw;
  letter-spacing: 2px;

  font-family: SimHei;
  // font-weight: 500;
  font-size: 38px;
  font-weight: bold;
  color: #ffffff;
  line-height: 55px;
  background: -webkit-gradient(
    linear,
    left top,
    left bottom,
    from(#ffffff),
    color-stop(39.7216796875%, #f3f7fa),
    to(#03a9ff)
  );
  background: linear-gradient(
    180deg,
    #ffffff 0%,
    #f3f7fa 39.7216796875%,
    #03a9ff 100%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  line-height: 70px;
}
.sub-header {
  display: flex;
  justify-content: space-between;
  padding: 0 30px;
  // transform-style: preserve-3d;
  perspective: 1000px;
  // transform: translateZ(-10px);
}
.sub-header-left,
.sub-header-right {
  display: flex;
  justify-content: space-between;
  width: 494px;
  margin-top: -30px;

  .sub-item {
    width: 134px;
    height: auto;
    background: url("~@/assets/images/screen/normal.png") no-repeat center;
    background-size: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    p {
      font-family: Source Han Sans SC;
      font-weight: bold;
      font-size: 19px;
      color: #ffffff;
      line-height: 55px;
      background: linear-gradient(
        180deg,
        #ffffff 0%,
        #f3f7fa 39.7216796875%,
        #03a9ff 100%
      );
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      padding-bottom: 4px;
    }
  }
}
.sub-header-left {
  transform: rotateZ(4deg);
}
.sub-header-right {
  transform: rotateZ(-4deg);
}
.top-change {
  width: 425px;
  height: 44px;
  background: url("~@/assets/images/screen/top_bg.png") no-repeat center;
  margin: 20px auto 0;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  font-size: 16px;
  color: #11e0ff;
  span {
    cursor: pointer;
    text-indent: 1em;
    position: relative;
  }
  span:nth-child(1)::after {
    content: "";
    width: 17px;
    height: 17px;
    position: absolute;
    background: url("~@/assets/images/screen/icon7.png") no-repeat center;
    left: -4px;
    top: 0px;
    z-index: 20;
  }
  span:nth-child(2)::after {
    content: "";
    width: 17px;
    height: 17px;
    position: absolute;
    background: url("~@/assets/images/screen/icon6.png") no-repeat center;
    left: -4px;
    top: 2px;
    z-index: 20;
  }
  span:nth-child(3)::after {
    content: "";
    width: 17px;
    height: 17px;
    position: absolute;
    background: url("~@/assets/images/screen/icon8.png") no-repeat center;
    left: -4px;
    top: 0px;
    z-index: 20;
  }
}
</style>