<template>
<div>
<home v-if="showMenu===0" style="position: absolute;top:0;left:0;right: 0;bottom:0;"></home>
<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"><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" style="pointer-events: auto;"></rydw>
<!-- 底部 -->
<!-- <div class="footer">
</div> -->
</div>
</v-scale-screen>
</div>
</template>
<script>
// import * as echarts from "echarts";
// import { getScale } from "@/utils/tylerlcl";
import screenfull from "screenfull";
import home from './items/home.vue';
import rydw from './items/rydw.vue';
export default {
name: "cockpit",
components: {
home,
rydw,
},
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';
pointer-events: none;
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);
pointer-events: auto;
}
.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;
}
}
::v-deep .screen-box{
pointer-events: none;
}
</style>