Skip to content

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

环境监测页面修改

parent 44d06d5f
Hide whitespace changes
Inline Side-by-side
Showing with 1221 additions and 351 deletions
.env.development
View file @ cf0598c8
...@@ -14,5 +14,5 @@ VUE_APP_BASE_API = '/dev-api' ...@@ -14,5 +14,5 @@ VUE_APP_BASE_API = '/dev-api'
VUE_CLI_BABEL_TRANSPILE_MODULES = true VUE_CLI_BABEL_TRANSPILE_MODULES = true
# 开发环境的后端接口地址 # 开发环境的后端接口地址
VUE_APP_API_TARGET = http://192.168.2.14:9091 VUE_APP_API_TARGET = http://192.168.2.37:9091
# VUE_APP_API_TARGET = http://localhost:8080 # VUE_APP_API_TARGET = http://localhost:8080
\ No newline at end of file
package.json
View file @ cf0598c8
...@@ -59,6 +59,7 @@ ...@@ -59,6 +59,7 @@
"vue-cropper": "0.5.5", "vue-cropper": "0.5.5",
"vue-meta": "2.4.0", "vue-meta": "2.4.0",
"vue-router": "3.4.9", "vue-router": "3.4.9",
"vue-seamless-scroll": "^1.1.23",
"vuedraggable": "2.24.3", "vuedraggable": "2.24.3",
"vuex": "3.6.0" "vuex": "3.6.0"
}, },
......
src/api/tyler/hjjc.js 0 → 100644
View file @ cf0598c8
import request from "@/utils/request";
// 查询实时监测
export function getRealData(query) {
return request({
url: "/business/screen/env/realData",
method: "get",
params: query,
});
}
// 查询历史数据右上
export function getRtData(query) {
return request({
url: "/business/screen/env/deal",
method: "get",
params: query,
});
}
src/views/Screen/index.vue
View file @ cf0598c8
<template> <template>
<v-scale-screen ref="scale-screen" width="1920" height="1080" :fullScreen="true"> <v-scale-screen
ref="scale-screen"
width="1920"
height="1080"
:fullScreen="true"
>
<div class="container"> <div class="container">
<!-- 头部 --> <!-- 头部 -->
<div class="header por">银洞坡金矿智能化综合管控平台</div> <div class="header por">银洞坡金矿智能化综合管控平台</div>
<div class="sub-header"> <div class="sub-header">
<div class="sub-header-left"> <div class="sub-header-left">
<div class="sub-item" @click='changeMenu(1)'><p>人员定位</p></div> <div class="sub-item" @click="changeMenu(1)"><p>人员定位</p></div>
<div class="sub-item"><p>环境监测</p></div> <div class="sub-item" @click="changeMenu(2)"><p>环境监测</p></div>
<div class="sub-item"><p>排水系统</p></div> <div class="sub-item"><p>排水系统</p></div>
</div> </div>
<div class="sub-header-mid"> <div class="sub-header-mid">
<div class="top-change"> <div class="top-change">
<span @click="changeMenu(0)">首页</span> <span @click="changeMenu(0)">首页</span>
<span>企业宣传</span> <span>企业宣传</span>
<span @click="goToSys">后台管理</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>
</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> <rydw v-if="showMenu === 1"></rydw>
<hjjc v-if="showMenu === 2"></hjjc>
<!-- 底部 --> <!-- 底部 -->
<!-- <div class="footer"> <!-- <div class="footer">
</div> --> </div> -->
</div> </div>
</v-scale-screen> </v-scale-screen>
</template> </template>
<script> <script>
// import * as echarts from "echarts"; // import * as echarts from "echarts";
// import { getScale } from "@/utils/tylerlcl"; // import { getScale } from "@/utils/tylerlcl";
import screenfull from "screenfull"; import screenfull from "screenfull";
import rydw from './items/rydw.vue'; import rydw from "./items/rydw.vue";
import hjjc from "./items/hjjc.vue";
export default { export default {
name: "cockpit", name: "cockpit",
components: { components: {
rydw, rydw,
hjjc,
}, },
data() { data() {
return { return {
showMenu:0, showMenu: 0,
}; };
}, },
mounted() { mounted() {
if (screenfull && screenfull.enabled && !screenfull.isFullscreen) { if (screenfull && screenfull.enabled && !screenfull.isFullscreen) {
screenfull.request(); screenfull.request();
} }
// this.areaCharts(); // this.areaCharts();
// this.alarm30(); // this.alarm30();
}, },
methods: { methods: {
changeMenu(val){ changeMenu(val) {
this.showMenu = val this.showMenu = val;
}, },
// // 辅助方法：获取字段值 // // 辅助方法：获取字段值
// getItemField(item, fieldKey) { // getItemField(item, fieldKey) {
// return item[this.fieldMap[fieldKey]] || ""; // return item[this.fieldMap[fieldKey]] || "";
// }, // },
// areaCharts(){ // areaCharts(){
// let that = this; // let that = this;
// let myChart = echarts.init(document.getElementById('left1')); // let myChart = echarts.init(document.getElementById('left1'));
// let xAxisData =['中段1','中段2','中段3','中段4','中段5',]; // let xAxisData =['中段1','中段2','中段3','中段4','中段5',];
// let yAxisData = [20,10,34,22,18]; // let yAxisData = [20,10,34,22,18];
// let option ={ // let option ={
// title: { // title: {
// text: "", // text: "",
// x: "center", // x: "center",
// y:"4%", // y:"4%",
// textStyle: { // textStyle: {
// color: '#fff', // color: '#fff',
// fontSize: '12' // fontSize: '12'
// }, // },
// subtextStyle: { // subtextStyle: {
// color: '#90979c', // color: '#90979c',
// fontSize: '12', // fontSize: '12',
// }, // },
// }, // },
// tooltip: { // tooltip: {
// trigger: 'axis', // trigger: 'axis',
// axisPointer: { // axisPointer: {
// type: 'shadow' // type: 'shadow'
// } // }
// }, // },
// grid: { // grid: {
// top: '5%', // top: '5%',
// right: '3%', // right: '3%',
// left: '15%', // left: '15%',
// bottom: '10%' // bottom: '10%'
// }, // },
// xAxis: [{ // xAxis: [{
// type: 'category', // type: 'category',
// data: xAxisData, // data: xAxisData,
// axisLine: { // axisLine: {
// show:true, // show:true,
// lineStyle: { // lineStyle: {
// color: 'rgba(255,255,255,0.12)' // color: 'rgba(255,255,255,0.12)'
// } // }
// }, // },
// axisLabel: { // axisLabel: {
// show:true, // show:true,
// margin: 10, // margin: 10,
// color: '#e2e9ff', // color: '#e2e9ff',
// textStyle: { // textStyle: {
// fontSize: 12 // fontSize: 12
// }, // },
// }, // },
// }], // }],
// yAxis: [{ // yAxis: [{
// // name: '单位：人', // // name: '单位：人',
// axisLabel: { // axisLabel: {
// show:true, // show:true,
// formatter: '{value}', // formatter: '{value}',
// color: '#e2e9ff', // color: '#e2e9ff',
// }, // },
// axisTick:{ //y轴刻度线 // axisTick:{ //y轴刻度线
// show:true, // show:true,
// color: '#e2e9ff', // color: '#e2e9ff',
// }, // },
// axisLine: { // axisLine: {
// show: true, // show: true,
// color: '#e2e9ff', // color: '#e2e9ff',
// lineStyle: { // lineStyle: {
// color: 'rgba(255,255,255,0.12)' // color: 'rgba(255,255,255,0.12)'
// } // }
// }, // },
// splitLine: { // splitLine: {
// show:true, // show:true,
// lineStyle: { // lineStyle: {
// color: 'rgba(255,255,255,0.12)' // color: 'rgba(255,255,255,0.12)'
// } // }
// } // }
// }], // }],
// series: [{ // series: [{
// type: 'bar', // type: 'bar',
// data: yAxisData, // data: yAxisData,
// barWidth: '16px', // barWidth: '16px',
// itemStyle: { // itemStyle: {
// normal: { // normal: {
// color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ // color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
// offset: 0, // offset: 0,
// color: 'rgba(0,244,255,1)' // 0% 处的颜色 // color: 'rgba(0,244,255,1)' // 0% 处的颜色
// }, { // }, {
// offset: 1, // offset: 1,
// color: 'rgba(0,77,167,1)' // 100% 处的颜色 // color: 'rgba(0,77,167,1)' // 100% 处的颜色
// }], false), // }], false),
// barBorderRadius: [30, 30, 8, 8], // barBorderRadius: [30, 30, 8, 8],
// shadowColor: 'rgba(0,160,221,1)', // shadowColor: 'rgba(0,160,221,1)',
// shadowBlur: 4, // shadowBlur: 4,
// } // }
// }, // },
// label: { // label: {
// normal: { // normal: {
// show: false, // show: false,
// lineHeight: 20, // lineHeight: 20,
// width: 10, // width: 10,
// height: 20, // height: 20,
// backgroundColor: 'rgba(0,160,221,0.1)', // backgroundColor: 'rgba(0,160,221,0.1)',
// borderRadius: 200, // borderRadius: 200,
// }
// }
// }]
// }
// myChart.setOption(option);
// setTimeout(() => {
// myChart.resize();
// }, 600);
// }, // }
// alarm30(){ // }
// let that = this; // }]
// let myChart = echarts.init(document.getElementById('right')); // }
// var salvProName = [ // myChart.setOption(option);
// "超时报警", // setTimeout(() => {
// "超员报警", // myChart.resize();
// "限制区报警", // }, 600);
// "工作异常报警",
// "井下人员报警",
// "通讯报警",
// ];
// 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);
// }, // },
// //自动滚动 // alarm30(){
// autoScroll() { // let that = this;
// const divData = this.$refs.scroll_List3; // let myChart = echarts.init(document.getElementById('right'));
// // 拿到表格中承载数据的div元素 // var salvProName = [
// divData.scrollTop += 1; // "超时报警",
// if ( // "超员报警",
// Math.round(divData.clientHeight + divData.scrollTop) + 1 >= // "限制区报警",
// divData.scrollHeight // "工作异常报警",
// ) { // "井下人员报警",
// // 重置table距离顶部距离 // "通讯报警",
// divData.scrollTop = 0; // ];
// } // var salvProValue = [239, 181, 154, 144, 135,100 ];
// this.scrolltimer3 = window.requestAnimationFrame( // var salvProMax = []; //背景按最大值
// this.autoScroll.bind(this) // for (let i = 0; i < salvProValue.length; i++) {
// ); // salvProMax.push(salvProValue[0]);
// }, // }
// //停止滚动 // let option ={
// cancelScroll() { // grid: {
// window.cancelAnimationFrame(this.scrolltimer3) // left: "2%",
// }, // right: "2%",
goToSys(){ // 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({ var link = this.$router.resolve({
path: "/", path: "/",
}); });
...@@ -324,76 +332,91 @@ export default { ...@@ -324,76 +332,91 @@ export default {
<style lang="scss" scoped> <style lang="scss" scoped>
/* 标题 */ /* 标题 */
@font-face { @font-face {
font-family: 'ysbth'; font-family: "ysbth";
src: url('~@/assets/font/syhtCN-Medium.ttf') format('truetype'); src: url("~@/assets/font/syhtCN-Medium.ttf") format("truetype");
} }
@font-face { @font-face {
font-family: 'number'; font-family: "number";
src: url('~@/assets/font/DS-Digital.ttf') format('truetype'); src: url("~@/assets/font/DS-Digital.ttf") format("truetype");
font-weight: normal; font-weight: normal;
font-style: normal; font-style: normal;
} }
.por{position: relative;} .por {
.poa{position: absolute;} position: relative;
}
.poa {
position: absolute;
}
/* 基础容器 */ /* 基础容器 */
.container { .container {
width: 100%; width: 100%;
height: 100%; height: 100%;
background: url('~@/assets/images/screen/bg.png'); background: url("~@/assets/images/screen/bg.png");
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: center; background-position: center;
background-size: 100% 100%; background-size: 100% 100%;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
padding: 0 20px; padding: 0 20px;
background-color: #08152a; background-color: #08152a;
position: relative; position: relative;
font-family: 'SimHei'; font-family: "SimHei";
color:#fff; color: #fff;
} }
/* 头部标题 */ /* 头部标题 */
.header { .header {
// height: 80px; // height: 80px;
text-align: center; text-align: center;
// margin-bottom: 20px; // margin-bottom: 20px;
// background: linear-gradient(90deg, rgba(0,72,143,0.8) 0%, rgba(0,36,71,0.6) 100%); // 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; display: flex;
// font-weight: 500; align-items: center;
font-size: 38px; justify-content: center;
font-weight: bold; // font-size: 2.5vw;
color: #FFFFFF; letter-spacing: 2px;
line-height: 55px;
background: -webkit-gradient(linear, left top, left bottom, from(#FFFFFF), color-stop(39.7216796875%, #F3F7FA), to(#03A9FF)); font-family: SimHei;
background: linear-gradient(180deg, #FFFFFF 0%, #F3F7FA 39.7216796875%, #03A9FF 100%); // font-weight: 500;
-webkit-background-clip: text; font-size: 38px;
-webkit-text-fill-color: transparent; font-weight: bold;
line-height: 70px; 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{ .sub-header {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
padding:0 30px; padding: 0 30px;
// transform-style: preserve-3d; // transform-style: preserve-3d;
perspective: 1000px; perspective: 1000px;
// transform: translateZ(-10px); // transform: translateZ(-10px);
} }
.sub-header-left,.sub-header-right{ .sub-header-left,
.sub-header-right {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
width: 494px; width: 494px;
margin-top: -30px; margin-top: -30px;
.sub-item{ .sub-item {
width: 134px; width: 134px;
height: auto; height: auto;
background: url("~@/assets/images/screen/normal.png") no-repeat center; background: url("~@/assets/images/screen/normal.png") no-repeat center;
...@@ -402,27 +425,31 @@ export default { ...@@ -402,27 +425,31 @@ export default {
justify-content: center; justify-content: center;
align-items: center; align-items: center;
cursor: pointer; cursor: pointer;
p{ p {
font-family: Source Han Sans SC; font-family: Source Han Sans SC;
font-weight: bold; font-weight: bold;
font-size: 19px; font-size: 19px;
color: #FFFFFF; color: #ffffff;
line-height: 55px; line-height: 55px;
background: linear-gradient(180deg, #FFFFFF 0%, #F3F7FA 39.7216796875%, #03A9FF 100%); background: linear-gradient(
180deg,
#ffffff 0%,
#f3f7fa 39.7216796875%,
#03a9ff 100%
);
-webkit-background-clip: text; -webkit-background-clip: text;
-webkit-text-fill-color: transparent; -webkit-text-fill-color: transparent;
padding-bottom: 4px; padding-bottom: 4px;
} }
} }
} }
.sub-header-left{ .sub-header-left {
transform: rotateZ(4deg); transform: rotateZ(4deg);
} }
.sub-header-right{ .sub-header-right {
transform: rotateZ(-4deg); transform: rotateZ(-4deg);
} }
.top-change{ .top-change {
width: 425px; width: 425px;
height: 44px; height: 44px;
background: url("~@/assets/images/screen/top_bg.png") no-repeat center; background: url("~@/assets/images/screen/top_bg.png") no-repeat center;
...@@ -431,43 +458,41 @@ export default { ...@@ -431,43 +458,41 @@ export default {
justify-content: space-evenly; justify-content: space-evenly;
align-items: center; align-items: center;
font-size: 16px; font-size: 16px;
color: #11E0FF; color: #11e0ff;
span{ span {
cursor: pointer; cursor: pointer;
text-indent: 1em; text-indent: 1em;
position: relative; position: relative;
} }
span:nth-child(1)::after{ span:nth-child(1)::after {
content: ''; content: "";
width: 17px; width: 17px;
height: 17px; height: 17px;
position: absolute; position: absolute;
background: url("~@/assets/images/screen/icon7.png") no-repeat center; background: url("~@/assets/images/screen/icon7.png") no-repeat center;
left: -4px; left: -4px;
top:0px; top: 0px;
z-index: 20; z-index: 20;
} }
span:nth-child(2)::after{ span:nth-child(2)::after {
content: ''; content: "";
width: 17px; width: 17px;
height: 17px; height: 17px;
position: absolute; position: absolute;
background: url("~@/assets/images/screen/icon6.png") no-repeat center; background: url("~@/assets/images/screen/icon6.png") no-repeat center;
left: -4px; left: -4px;
top:2px; top: 2px;
z-index: 20; z-index: 20;
} }
span:nth-child(3)::after{ span:nth-child(3)::after {
content: ''; content: "";
width: 17px; width: 17px;
height: 17px; height: 17px;
position: absolute; position: absolute;
background: url("~@/assets/images/screen/icon8.png") no-repeat center; background: url("~@/assets/images/screen/icon8.png") no-repeat center;
left: -4px; left: -4px;
top:0px; top: 0px;
z-index: 20; z-index: 20;
} }
} }
</style> </style>
\ No newline at end of file
src/views/Screen/items/hjjc.vue 0 → 100644
View file @ cf0598c8
<template>
<div>
<!-- 主体内容 -->
<div class="main-content">
<!-- 左侧 -->
<div class="sidebar sidebar-left">
<div class="sidebar-item H917">
<div class="sub-title por"><span>环境监测实时数据 </span></div>
<div class="table-box">
<vue-seamless-scroll
ref="vueSeamlessScroll"
:data="tableData1"
:class-option="classOption"
@mousewheel.native="handleScroll"
class="warp"
>
<ul class="item">
<li class="table-item" v-for="(item, i) in tableData1" :key="i">
<el-row :gutter="16">
<el-col :span="6" class="jz">
<img
class="img-class"
:src="
require(`@/assets/images/screen/hjjc/${item.typeId}.png`)
"
/>
</el-col>
<el-col :span="10">
<p class="device-name">{{ item.tpName }}</p>
<p class="device-time">{{ item.time }}</p>
</el-col>
<el-col :span="8">
<p class="device-value">
{{ item.value | capitalize }}{{ item.unit }}
</p>
</el-col>
</el-row>
</li>
</ul>
</vue-seamless-scroll>
</div>
</div>
</div>
<!-- 中间 -->
<div class="main-area">
<!-- 设备点位 -->
<div class="dot">
<div class="dot1" @click="">
<div class="tip-box">
<p>一中避险硐室氧气</p>
<p class="active">
一中避险硐室一氧化碳
<span></span>
</p>
<p>一中避险硐室氧气</p>
</div>
</div>
</div>
</div>
<!-- 右侧 -->
<div class="sidebar sidebar-right">
<!-- 右上历史数据图组件 -->
<div class="sidebar-item H286 alert-analysis">
<div class="sub-title por">
<span>历史数据图</span>
<span class="scroll-title">{{ sssjName }}</span>
</div>
<div class="sub-con">
<div class="sub-con">
<span
v-for="(item, i) in sssjData"
:key="i"
:class="i == sssjMark ? 'active' : ''"
>{{ item.name }}
<p class="subscript"></p>
</span>
</div>
<div class="left-chart" ref="sssj" id="sssj"></div>
</div>
</div>
<!-- 右中历史数据图组件 -->
<div class="sidebar-item H286 alert-analysis">
<div class="sub-title por">
<span>历史数据图</span>
<span class="scroll-title">1</span>
</div>
<div class="sub-con">
<div class="sub-con">
<span
v-for="(item, i) in sssjData"
:key="i"
:class="i == sssjMark ? 'active' : ''"
>{{ item.name }}
<p class="subscript"></p>
</span>
</div>
<div class="left-chart" ref="right" id="right"></div>
</div>
</div>
<!-- 近7日设备监测报警信息 -->
<div class="sidebar-item H286 alert-analysis">
<div class="sub-title por"><span>近7日设备监测报警信息</span></div>
<div class="sub-con sub-con-scroll-table">
<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>
</div>
<vue-seamless-scroll
class="warp"
:data="tableData2"
:class-option="classOption2"
ref="vueSeamlessScroll"
>
<ul class="item">
<li
class="table-item custom-item custom-item2"
v-for="(item, i) in tableData2"
:key="i"
>
<span class="custom-item-content custom-item-content2">{{
item.name
}}</span>
<span class="custom-item-content custom-item-content2">{{
item.alertTime
}}</span>
<span class="custom-item-content custom-item-content2">{{
item.alertLocation
}}</span>
</li>
</ul>
</vue-seamless-scroll>
</div>
</div>
</div>
</div>
<!-- 弹窗内容 -->
</div>
</template>
<script>
import * as echarts from "echarts";
import { getRealData, getRtData } from "@/api/tyler/hjjc";
import ScrollTable from "@/components/Tyler/ScrollTable.vue";
import screenfull from "screenfull";
import vueSeamlessScroll from "vue-seamless-scroll";
{
}
export default {
name: "cockpit",
components: {
ScrollTable,
vueSeamlessScroll,
},
data() {
return {
tableData1: [],
classOption: {
singleHeight: 110,
openTouch: true,
},
classOption2: {
singleHeight: 47,
openTouch: true,
},
sssjData: [
{
name: "",
value: [
{
data: {
xData: {
data: [],
},
yData: {
data: [],
},
},
},
],
},
],
sssjMark: 0,
sssjName: "",
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: "四中车场",
},
],
};
},
mounted() {
if (screenfull && screenfull.enabled && !screenfull.isFullscreen) {
screenfull.request();
}
// this.initEchartBox("right", this.salvProName, this.salvProValue, 28);
// this.initEchartBox("sssj", this.salvProName, this.salvProValue, 28);
this.initRealData();
getRtData().then((res) => {
this.sssjData = res.data;
this.playFun(this.sssjData);
});
},
created() {},
methods: {
// 辅助方法：获取字段值
getItemField(item, fieldKey) {
return item[this.fieldMap[fieldKey]] || "";
},
//初始化获取左侧环境监测实施数据
initRealData() {
getRealData().then((res) => {
this.tableData1 = res.data;
});
},
// 初始化eChartDOM
initEchartBox(id, xData = [], yData = [], mkData = 28) {
let that = this;
let myChart = echarts.init(document.getElementById(id));
let option = {
grid: {
left: "4%",
right: "5%",
bottom: "4%",
top: "7%",
containLabel: true,
},
// tooltip: {
// trigger: "axis",
// axisPointer: {
// type: "none",
// },
// formatter: function (params) {
// return params[0].name + " : " + params[0].value;
// },
// },
xAxis: {
show: true,
type: "category",
boundaryGap: false,
data: xData,
axisLabel: {
show: true,
interval: 4,
textStyle: {
color: "#FFFFFF", //更改坐标轴文字颜色
fontSize: 16, //更改坐标轴文字大小
},
},
axisTick: {
alignWithLabel: true,
},
splitLine: {
//网格线
lineStyle: {
type: "dashed", //设置网格线类型 dotted：虚线 solid:实线
opacity: 0.5,
},
show: true, //隐藏或显示
},
},
yAxis: {
type: "value",
boundaryGap: false,
axisTick: {
alignWithLabel: true,
},
axisLabel: {
show: true,
textStyle: {
color: "#FFFFFF", //更改坐标轴文字颜色
fontSize: 16, //更改坐标轴文字大小
},
},
splitLine: {
//网格线
lineStyle: {
type: "dashed", //设置网格线类型 dotted：虚线 solid:实线
opacity: 0.5,
},
show: true, //隐藏或显示
},
},
series: [
{
type: "line",
stack: "Total",
smooth: 0.2,
lineStyle: {
width: 2,
color: "#35B1F3",
},
markLine: {
data: [
{
name: "警戒线",
yAxis: mkData,
label: {
show: false,
},
},
],
symbol: ["none", "none"],
lineStyle: {
color: "red",
width: 2,
},
},
showSymbol: false,
areaStyle: {
opacity: 0.8,
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: "rgb(55, 184, 251,0.5)",
},
{
offset: 1,
color: "rgb(55, 184, 251,0.1)",
},
]),
},
emphasis: {
focus: "series",
},
data: yData,
},
],
};
myChart.setOption(option);
setTimeout(() => {
myChart.resize();
}, 600);
},
// 轮播eChart
// 更改数据达到轮播效果
playFun(list = []) {
// 启动定时器，每隔 3 秒执行一次
let i = 0;
let l = 0;
const timer = setInterval(() => {
if (i < list.length) {
if (Array.isArray(list[i].value) && l < list[i].value.length) {
this.sssjMark = i;
this.sssjName = list[i].value[l].tpName;
this.initEchartBox(
"sssj",
list[i].value[l].data.xData.data,
list[i].value[l].data.yData.data
);
l++;
} else {
i++;
}
} else {
i = 0;
l = 0;
}
}, 15000);
},
//自动滚动
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;
},
// 鼠标滚动代码
handleScroll(e) {
// 改变组件内部 yPos 的值，这样html的translate(0, yPos)就会随之改变
// e.deltaY是滚动的距离
this.$refs.vueSeamlessScroll.yPos =
this.$refs.vueSeamlessScroll.yPos - e.deltaY;
// 如果是正数 说明是往上滚
if (this.$refs.vueSeamlessScroll.yPos > 0) {
this.$refs.vueSeamlessScroll.yPos = 0;
return;
}
// 如果yPos超过内部实际高度的一半则重新到顶部滚动
// 一半的原因是因为组件实际上创建了两个dom，以达到无缝衔接的效果
if (
Math.abs(this.$refs.vueSeamlessScroll.yPos) >
this.$refs.vueSeamlessScroll.realBoxHeight / 2
) {
this.$refs.vueSeamlessScroll.yPos = 0;
}
},
},
filters: {
capitalize: function (value) {
if (!value) return "";
value = value.slice(0, 2);
return value;
},
},
watch: {
tableData1: {
handler() {
// 数据更改时也要加
this.$nextTick(() => {
this.$refs.vueSeamlessScroll.reset();
});
},
immediate: true,
},
},
};
</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 {
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;
}
.H917 {
height: 917px;
}
.H286 {
height: 286px;
}
.sidebar-item {
width: 100%;
// height: 286px;
margin-bottom: 30px;
background: linear-gradient(
180deg,
rgba(1, 33, 58, 0.2) 0%,
rgba(8, 132, 233, 0.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;
}
.scroll-title {
position: absolute;
top: -7px;
left: 157px;
font-weight: 800;
font-size: 18px;
color: #ffc62e;
}
}
.table-box {
height: 866px;
width: calc(100% - 4px);
padding: 0px 23px;
.table-item {
height: 110px;
width: 100%;
border-bottom: 2px dashed rgba(100, 194, 255, 0.3);
padding-top: 9px;
.img-class {
display: block;
width: 85px;
height: 85px;
}
.device-name {
width: 100%;
font-weight: 400;
font-size: 18px;
color: #63c2ff;
font-family: Source Han Sans SC;
height: 15px;
}
.device-time {
font-weight: 400;
font-size: 16px;
color: #b4d5ea;
font-family: Source Han Sans SC;
}
.device-value {
font-family: Source Han Sans SC;
font-weight: 500;
font-size: 28px;
color: #ffffff;
background: linear-gradient(
0deg,
#3cbffa 0%,
#ffffff 56.005859375%,
#e2f6ff 100%
);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
width: 100%;
text-align: center;
}
}
.warp {
width: 100%;
height: 100%;
overflow: hidden;
ul {
list-style: none;
padding: 0;
margin: 0 auto;
}
}
}
.jz {
display: flex;
align-items: center;
justify-content: center;
}
}
/* 中间主区域 */
.main-area {
width: calc(100% - 920px);
background: url("~@/assets/images/screen/bg3.png") no-repeat center;
text-align: center;
position: relative;
.dot {
width: 42px;
height: 70px;
position: absolute;
top: 100px;
left: 500px;
background: url("~@/assets/images/screen/hjjc/icon8.png") no-repeat center;
.dot1 {
position: relative;
.tip-box {
width: 216px;
background: linear-gradient(0deg, #062451 0%, #09162d 100%);
box-shadow: 0px 15px 11px 2px rgba(0, 20, 39, 0.31);
border-radius: 4px;
border: 1px solid #11b9ff;
position: absolute;
bottom: 10px;
left: -81px;
padding: 9px 14px 14px 14px;
display: none;
p {
font-family: Source Han Sans SC;
font-weight: 400;
font-size: 16px;
color: #1cd2ff;
margin: 5px 0 0 0;
text-align: left;
span {
display: none;
}
&.active {
color: rgba(255, 43, 58, 1);
span {
display: inline-block;
width: 16px;
height: 16px;
background: url("~@/assets/images/screen/hjjc/icon10.png")
no-repeat center;
margin-bottom: -3px;
}
}
}
}
}
&:hover {
background: url("~@/assets/images/screen/hjjc/icon8_hover.png") no-repeat
center;
.tip-box {
display: block;
}
}
&.active {
background: url("~@/assets/images/screen/hjjc/icon9.png") no-repeat center;
&:hover {
background: url("~@/assets/images/screen/hjjc/icon9_hover.png")
no-repeat center;
}
}
}
}
/* 实时分布图区域 */
.distribution-map {
height: 300px;
background: rgba(8, 28, 49, 0.8);
border-radius: 8px;
}
.sub-con {
.sub-con {
height: 2em;
width: 100%;
// display: flex;
// justify-content: space-around;
// align-items: center;
span {
float: left;
margin-left: 25px;
min-width: 63px;
height: 2em;
font-size: 16px;
line-height: 16px;
font-weight: 500;
color: rgba(179, 240, 255, 1);
text-align: center;
}
.active {
color: rgba(46, 213, 255, 1);
.subscript {
height: 19px;
width: 100%;
margin-top: 3px;
background: url("~@/assets/images/screen/hjjc/icon7.png") no-repeat
center;
}
}
}
}
.left-chart {
width: 100%;
height: 12em;
}
.sub-con-scroll-table {
width: 95%;
margin: 0 auto;
height: 83%;
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: 1.5fr 2.2fr 1.3fr;
text-align: center;
color: #2ed5ff;
height: 36px;
line-height: 36px;
color: #2ed5ff;
font-size: 16px;
font-weight: 500;
background: linear-gradient(
0deg,
rgba(61, 98, 147, 0.35) 0%,
rgba(61, 98, 147, 0.03) 100%
);
}
.warp {
height: calc(100% - 36px);
overflow: hidden;
.item {
padding-left: 0px;
}
.custom-item2 {
width: 100%;
height: 36px;
display: grid;
grid-template-columns: 1.5fr 2.2fr 1.3fr;
text-align: center;
background: linear-gradient(
0deg,
rgba(61, 98, 147, 0.35) 0%,
rgba(61, 98, 147, 0.03) 100%
);
margin-top: 11px;
}
.custom-item-content2 {
font-family: Source Han Sans SC;
font-size: 16px;
line-height: 36px;
color: #bbd7ea;
}
}
.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, 0.2);
padding: 10px 10px;
text-align: justify;
box-sizing: border-box;
span:nth-child(2) {
color: rgba(187, 215, 234, 0.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>
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