Skip to content

Y
yindong-tongbai-automation
Commit e441cbb6 authored by lei's avatar lei
Browse files
Options

环境监测界面新增按钮，按钮active状态添加

parent 69924ed1
Hide whitespace changes
Inline Side-by-side
Showing with 60 additions and 1965 deletions
src/api/tyler/hjjc.js
View file @ e441cbb6
......@@ -12,7 +12,15 @@ export function getRealData(query) {
// 查询历史数据右上
export function getRtData(query) {
return request({
url: "/business/screen/env/deal",
url: "/business/screen/env/carouselLineChartUp",
method: "get",
params: query,
});
}
// 查询历史数据右中
export function getRcData(query) {
return request({
url: "/business/screen/env/carouselLineChartDow",
method: "get",
params: query,
});
......
src/views/Screen/index.vue
View file @ e441cbb6
......@@ -15,9 +15,24 @@
<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
class="sub-item"
:class="showMenu == 1 ? 'active' : ''"
@click="changeMenu(1)"
>
<p>人员定位</p>
</div>
<div
class="sub-item"
@click="changeMenu(2)"
key=""
:class="showMenu == 2 ? 'active' : ''"
>
<p>环境监测</p>
</div>
<div class="sub-item" key="" :class="showMenu == 1 ? 'active' : ''">
<p>排水系统</p>
</div>
</div>
<div class="sub-header-mid">
<div class="top-change">
......@@ -34,6 +49,7 @@
</div>
<rydw v-if="showMenu === 1" style="pointer-events: auto"></rydw>
<hjjc v-if="showMenu === 2" style="pointer-events: auto"></hjjc>
<!-- 底部 -->
<!-- <div class="footer">
......@@ -432,6 +448,10 @@ export default {
justify-content: center;
align-items: center;
cursor: pointer;
&.active {
background: url("~@/assets/images/screen/click.png") no-repeat center;
background-size: 100%;
}
p {
font-family: Source Han Sans SC;
font-weight: bold;
......
src/views/Screen/index_BACKUP_1366.vue deleted 100644 → 0
View file @ 69924ed1
<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 rydw from "./items/rydw.vue";
import hjjc from "./items/hjjc.vue";
import home from "./items/home.vue";
export default {
name: "cockpit",
components: {
home,
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";
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>
src/views/Screen/index_BASE_1366.vue deleted 100644 → 0
View file @ 69924ed1
<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"><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>
<!-- 底部 -->
<!-- <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';
export default {
name: "cockpit",
components: {
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';
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>
\ No newline at end of file
src/views/Screen/index_LOCAL_1366.vue deleted 100644 → 0
View file @ 69924ed1
<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>
src/views/Screen/index_REMOTE_1366.vue deleted 100644 → 0
View file @ 69924ed1
<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>
\ No newline at end of file
src/views/Screen/items/hjjc.vue
View file @ e441cbb6
......@@ -56,6 +56,13 @@
</div>
</div>
</div>
<!-- 现实设备切换按钮 -->
<div class="toggle-button">
<el-checkbox-group v-model="checkList">
<el-checkbox label="1">监控</el-checkbox>
<el-checkbox label="2">监测设备</el-checkbox>
</el-checkbox-group>
</div>
</div>
<!-- 右侧 -->
<div class="sidebar sidebar-right">
......@@ -160,6 +167,7 @@ export default {
singleHeight: 110,
openTouch: true,
},
checkList: ["1", "2"],
classOption2: {
singleHeight: 47,
openTouch: true,
......@@ -675,6 +683,26 @@ export default {
}
}
}
.toggle-button {
width: 120px;
height: 90px;
background: RGBA(8, 27, 58, 1);
position: absolute;
bottom: 58px;
right: 0px;
.el-checkbox-group {
width: 100%;
height: 100%;
.el-checkbox {
margin-top: 16px;
color: #fdfeff;
font-size: 16px;
font-weight: 500;
&.is-checked {
}
}
}
}
}
/* 实时分布图区域 */
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment