Skip to content

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

环境监测弹窗

parent 8fdf8b52
Hide whitespace changes
Inline Side-by-side
Showing with 745 additions and 73 deletions
.env.development
View file @ 7db1f784
...@@ -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.37:9091 VUE_APP_API_TARGET = http://192.168.2.14:9091
# VUE_APP_API_TARGET = http://localhost:8080 # VUE_APP_API_TARGET = http://localhost:8080
\ No newline at end of file
src/api/tyler/hjjc.js
View file @ 7db1f784
...@@ -8,7 +8,15 @@ export function getRealData(query) { ...@@ -8,7 +8,15 @@ export function getRealData(query) {
params: query, params: query,
}); });
} }
// 查询设备25H数据
export function getDeviceData(query) {
return request({
url: "/business/screen/env/deviceData",
method: "get",
params: query,
});
}
// 查询历史数据右上 // 查询历史数据右上
export function getRtData(query) { export function getRtData(query) {
return request({ return request({
...@@ -25,3 +33,12 @@ export function getRcData(query) { ...@@ -25,3 +33,12 @@ export function getRcData(query) {
params: query, params: query,
}); });
} }
// 查询设备位置
export function getDeviceStatus(query) {
return request({
url: "/business/screen/env/deviceStatus",
method: "get",
params: query,
});
}
src/views/Screen/items/hjjc.vue
View file @ 7db1f784
...@@ -8,34 +8,42 @@ ...@@ -8,34 +8,42 @@
<div class="sub-title por"><span>环境监测实时数据 </span></div> <div class="sub-title por"><span>环境监测实时数据 </span></div>
<div class="table-box"> <div class="table-box">
<vue-seamless-scroll <vue-seamless-scroll
ref="vueSeamlessScroll" ref="sssjControl"
:data="tableData1" :data="tableData1"
:class-option="classOption" :class-option="classOption"
@mousewheel.native="handleScroll" @mousewheel.native="handleScroll"
class="warp" class="warp"
> >
<ul class="item"> <ul class="item">
<li class="table-item" v-for="(item, i) in tableData1" :key="i"> <div
<el-row :gutter="16"> :class="upWindowData.upWindowActive === i ? 'active' : ''"
<el-col :span="6" class="jz"> style="cursor: pointer"
<img v-for="(item, i) in tableData1"
class="img-class" :key="i"
:src=" @click="lookRealData(item, i)"
require(`@/assets/images/screen/hjjc/${item.typeId}.png`) >
" <li class="table-item">
/> <el-row :gutter="16">
</el-col> <el-col :span="6" class="jz">
<el-col :span="10"> <img
<p class="device-name">{{ item.tpName }}</p> class="img-class"
<p class="device-time">{{ item.time }}</p> :src="
</el-col> require(`@/assets/images/screen/hjjc/${item.typeId}.png`)
<el-col :span="8"> "
<p class="device-value"> />
{{ item.value | capitalize }}{{ item.unit }} </el-col>
</p> <el-col :span="10">
</el-col> <p class="device-name">{{ item.tpName }}</p>
</el-row> <p class="device-time">{{ item.time }}</p>
</li> </el-col>
<el-col :span="8">
<p class="device-value">
{{ item.value | capitalize }}{{ item.unit }}
</p>
</el-col>
</el-row>
</li>
</div>
</ul> </ul>
</vue-seamless-scroll> </vue-seamless-scroll>
</div> </div>
...@@ -44,15 +52,23 @@ ...@@ -44,15 +52,23 @@
<!-- 中间 --> <!-- 中间 -->
<div class="main-area"> <div class="main-area">
<!-- 设备点位 --> <!-- 设备点位 -->
<div class="dot"> <div
class="dot"
v-for="(item, i) in equipmentList"
:key="i"
:class="item.isWarning == 1 ? 'active' : ''"
:style="{ left: item.x + 'px', top: item.y + 'px' }"
>
<div class="dot1" @click=""> <div class="dot1" @click="">
<div class="tip-box"> <div class="tip-box">
<p>一中避险硐室氧气</p> <p
<p class="active"> v-for="(iitem, l) in item.monitorPositionList"
一中避险硐室一氧化碳 :key="l"
:class="iitem.isWarning == 1 ? 'active' : ''"
>
{{ iitem.equipmentName }}
<span></span> <span></span>
</p> </p>
<p>一中避险硐室氧气</p>
</div> </div>
</div> </div>
</div> </div>
...@@ -119,7 +135,8 @@ ...@@ -119,7 +135,8 @@
class="warp" class="warp"
:data="tableData2" :data="tableData2"
:class-option="classOption2" :class-option="classOption2"
ref="vueSeamlessScroll" @mousewheel.native="handleScrollR"
ref="RightScroll"
> >
<ul class="item"> <ul class="item">
<li <li
...@@ -142,17 +159,29 @@ ...@@ -142,17 +159,29 @@
</div> </div>
</div> </div>
</div> </div>
<!-- 弹窗内容 -->
<transition name="el-fade-in">
<div v-show="upWindowData.upWindowVisible" class="up-window">
<p><span></span>四中温度设备一</p>
<i class="el-icon-close close-button" @click="closeUpWindow"></i>
<p class="date-title">2025-3-13</p>
<div class="chart-box" id="chartBox"></div>
</div>
</transition>
</div> </div>
</div> </div>
</template> </template>
<script> <script>
import * as echarts from "echarts"; import * as echarts from "echarts";
import { getRealData, getRtData } from "@/api/tyler/hjjc"; import {
getRealData,
getRtData,
getDeviceStatus,
getDeviceData,
} from "@/api/tyler/hjjc";
import ScrollTable from "@/components/Tyler/ScrollTable.vue"; import ScrollTable from "@/components/Tyler/ScrollTable.vue";
import screenfull from "screenfull"; import screenfull from "screenfull";
import vueSeamlessScroll from "vue-seamless-scroll"; import vueSeamlessScroll from "vue-seamless-scroll";
{
}
export default { export default {
name: "cockpit", name: "cockpit",
components: { components: {
...@@ -161,16 +190,27 @@ export default { ...@@ -161,16 +190,27 @@ export default {
}, },
data() { data() {
return { return {
// 设备实施数据弹窗
upWindowData: {
upWindowActive: "",
upWindowVisible: false,
},
// 左边列表数据
tableData1: [], tableData1: [],
// 左侧滚动 参数
classOption: { classOption: {
singleHeight: 110, singleHeight: 110,
openTouch: true, hoverStop: true,
autoPlay: true,
}, },
// 设备定位分类开关
checkList: ["1", "2"], checkList: ["1", "2"],
// 右下滚动 参数
classOption2: { classOption2: {
singleHeight: 47, singleHeight: 47,
openTouch: true, hoverStop: true,
}, },
// 左侧实施数据列表
sssjData: [ sssjData: [
{ {
name: "", name: "",
...@@ -188,8 +228,11 @@ export default { ...@@ -188,8 +228,11 @@ export default {
], ],
}, },
], ],
// 右上设备轮播下标
sssjMark: 0, sssjMark: 0,
// 右上设备轮播名称
sssjName: "", sssjName: "",
// 右下 列表数据
tableData2: [ tableData2: [
{ {
name: "陈玉强", name: "陈玉强",
...@@ -234,6 +277,218 @@ export default { ...@@ -234,6 +277,218 @@ export default {
alertLocation: "四中车场", alertLocation: "四中车场",
}, },
], ],
// 中间图片数据列表
equipmentList: [
{
isWarning: 0, //是否报警
x: 85,
y: 233,
name: "一中避险硐室",
// 监测点
monitorPositionList: [
{
equipmentName: "一中避险硐室氧气", //设备名称
equipmentTy: "", //设备类型
isWarning: 0, //是否报警
},
{
equipmentName: "一中避险硐室一氧化碳", //设备名称
equipmentTy: "", //设备类型
isWarning: 0, //是否报警
},
],
},
{
isWarning: 0, //是否报警
x: 145,
y: 253,
name: "一中风机",
// 监测点
monitorPositionList: [
{
equipmentName: "一中避险硐室氧气", //设备名称
equipmentTy: "", //设备类型
isWarning: 0, //是否报警
},
{
equipmentName: "一中避险硐室一氧化碳", //设备名称
equipmentTy: "", //设备类型
isWarning: 0, //是否报警
},
],
},
{
isWarning: 0, //是否报警
x: 185,
y: 258,
name: "一中主运输港",
// 监测点
monitorPositionList: [
{
equipmentName: "一中避险硐室氧气", //设备名称
equipmentTy: "", //设备类型
isWarning: 0, //是否报警
},
{
equipmentName: "一中避险硐室一氧化碳", //设备名称
equipmentTy: "", //设备类型
isWarning: 0, //是否报警
},
],
},
{
isWarning: 0, //是否报警
x: 270,
y: 270,
name: "一中运输港",
// 监测点
monitorPositionList: [
{
equipmentName: "一中避险硐室氧气", //设备名称
equipmentTy: "", //设备类型
isWarning: 0, //是否报警
},
{
equipmentName: "一中避险硐室一氧化碳", //设备名称
equipmentTy: "", //设备类型
isWarning: 0, //是否报警
},
],
},
{
isWarning: 0, //是否报警
x: 237,
y: 280,
name: "一中西采区",
// 监测点
monitorPositionList: [
{
equipmentName: "一中避险硐室氧气", //设备名称
equipmentTy: "", //设备类型
isWarning: 0, //是否报警
},
{
equipmentName: "一中避险硐室一氧化碳", //设备名称
equipmentTy: "", //设备类型
isWarning: 0, //是否报警
},
],
},
{
isWarning: 0, //是否报警
x: 816,
y: 221,
name: "东风井",
// 监测点
monitorPositionList: [
{
equipmentName: "一中避险硐室氧气", //设备名称
equipmentTy: "", //设备类型
isWarning: 0, //是否报警
},
{
equipmentName: "一中避险硐室一氧化碳", //设备名称
equipmentTy: "", //设备类型
isWarning: 0, //是否报警
},
],
},
{
isWarning: 0, //是否报警
x: 75,
y: 331,
name: "二中避险硐室",
// 监测点
monitorPositionList: [
{
equipmentName: "一中避险硐室氧气", //设备名称
equipmentTy: "", //设备类型
isWarning: 0, //是否报警
},
{
equipmentName: "一中避险硐室一氧化碳", //设备名称
equipmentTy: "", //设备类型
isWarning: 0, //是否报警
},
],
},
{
isWarning: 0, //是否报警
x: 153,
y: 357,
name: "二中主运输港",
// 监测点
monitorPositionList: [
{
equipmentName: "一中避险硐室氧气", //设备名称
equipmentTy: "", //设备类型
isWarning: 0, //是否报警
},
{
equipmentName: "一中避险硐室一氧化碳", //设备名称
equipmentTy: "", //设备类型
isWarning: 0, //是否报警
},
],
},
{
isWarning: 0, //是否报警
x: 217,
y: 366,
name: "二中中运输港",
// 监测点
monitorPositionList: [
{
equipmentName: "一中避险硐室氧气", //设备名称
equipmentTy: "", //设备类型
isWarning: 0, //是否报警
},
{
equipmentName: "一中避险硐室一氧化碳", //设备名称
equipmentTy: "", //设备类型
isWarning: 0, //是否报警
},
],
},
{
isWarning: 0, //是否报警
x: 317,
y: 379,
name: "二中运输港",
// 监测点
monitorPositionList: [
{
equipmentName: "一中避险硐室氧气", //设备名称
equipmentTy: "", //设备类型
isWarning: 0, //是否报警
},
{
equipmentName: "一中避险硐室一氧化碳", //设备名称
equipmentTy: "", //设备类型
isWarning: 0, //是否报警
},
],
},
{
isWarning: 0, //是否报警
x: 128,
y: 396,
name: "二中西采区",
// 监测点
monitorPositionList: [
{
equipmentName: "一中避险硐室氧气", //设备名称
equipmentTy: "", //设备类型
isWarning: 0, //是否报警
},
{
equipmentName: "一中避险硐室一氧化碳", //设备名称
equipmentTy: "", //设备类型
isWarning: 0, //是否报警
},
],
},
],
}; };
}, },
mounted() { mounted() {
...@@ -247,6 +502,9 @@ export default { ...@@ -247,6 +502,9 @@ export default {
this.sssjData = res.data; this.sssjData = res.data;
this.playFun(this.sssjData); this.playFun(this.sssjData);
}); });
getDeviceStatus().then((res) => {
console.log(res, "中间图片");
});
}, },
created() {}, created() {},
methods: { methods: {
...@@ -261,26 +519,11 @@ export default { ...@@ -261,26 +519,11 @@ export default {
}); });
}, },
// 初始化eChartDOM // 初始化eChartDOM
initEchartBox(id, xData = [], yData = [], mkData = 28) { initEchartBox(id, xData = [], yData = [], mkData = 28, step = 4, grid) {
let that = this; let that = this;
let myChart = echarts.init(document.getElementById(id)); let myChart = echarts.init(document.getElementById(id));
let option = { let option = {
grid: { grid: 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: { xAxis: {
show: true, show: true,
type: "category", type: "category",
...@@ -288,7 +531,7 @@ export default { ...@@ -288,7 +531,7 @@ export default {
data: xData, data: xData,
axisLabel: { axisLabel: {
show: true, show: true,
interval: 4, interval: step,
textStyle: { textStyle: {
color: "#FFFFFF", //更改坐标轴文字颜色 color: "#FFFFFF", //更改坐标轴文字颜色
fontSize: 16, //更改坐标轴文字大小 fontSize: 16, //更改坐标轴文字大小
...@@ -385,16 +628,25 @@ export default { ...@@ -385,16 +628,25 @@ export default {
// 启动定时器，每隔 3 秒执行一次 // 启动定时器，每隔 3 秒执行一次
let i = 0; let i = 0;
let l = 0; let l = 0;
let grid = {
left: "4%",
right: "5%",
bottom: "4%",
top: "7%",
containLabel: true,
};
const timer = setInterval(() => { const timer = setInterval(() => {
if (i < list.length) { if (i < list.length) {
if (Array.isArray(list[i].value) && l < list[i].value.length) { if (Array.isArray(list[i].value) && l < list[i].value.length) {
this.sssjMark = i; this.sssjMark = i;
this.sssjName = list[i].value[l].tpName; this.sssjName = list[i].value[l].tpName;
this.initEchartBox( // this.initEchartBox(
"sssj", // "sssj",
list[i].value[l].data.xData.data, // list[i].value[l].data.xData.data,
list[i].value[l].data.yData.data // list[i].value[l].data.yData.data,
); // "",
// grid
// );
l++; l++;
} else { } else {
i++; i++;
...@@ -422,11 +674,59 @@ export default { ...@@ -422,11 +674,59 @@ export default {
this.autoScroll.bind(this) this.autoScroll.bind(this)
); );
}, },
//停止滚动 // 查看设备24H实时数据
cancelScroll() { lookRealData(item, i) {
window.cancelAnimationFrame(this.scrolltimer3); this.upWindowData.upWindowActive = i;
}, this.upWindowData.upWindowVisible = true;
this.classOption.autoPlay = false;
console.log(item);
getDeviceData({ tpName: item.tpName }).then((res) => {});
let a = [
"01:00",
"02:00",
"03:00",
"04:00",
"05:00",
"06:00",
"07:00",
"08:00",
"09:00",
"10:00",
"11:00",
"12:00",
"13:00",
"14:00",
"15:00",
"16:00",
"17:00",
"18:00",
"19:00",
"20:00",
"21:00",
"22:00",
"23:00",
];
let b = [
29.1, 28, 27, 26, 25, 24, 29, 25, 28, 26, 28, 27, 26, 24, 28, 21, 29,
28, 24, 26, 28, 24, 24, 26,
];
let grid = {
left: 0,
right: "1.7%",
bottom: "4%",
top: "7%",
containLabel: true,
};
this.initEchartBox("chartBox", a, b, 25, 0, grid);
},
// 关闭弹窗
closeUpWindow() {
this.upWindowData.upWindowActive = "";
this.upWindowData.upWindowVisible = false;
this.classOption.autoPlay = true;
this.$refs.sssjControl._startMove();
},
goToSys() { goToSys() {
var link = this.$router.resolve({ var link = this.$router.resolve({
path: "/", path: "/",
...@@ -434,24 +734,42 @@ export default { ...@@ -434,24 +734,42 @@ export default {
window.open(link.href); window.open(link.href);
return; return;
}, },
// 鼠标滚动代码 // 左侧 鼠标滚动代码
handleScroll(e) { handleScroll(e) {
// 改变组件内部 yPos 的值，这样html的translate(0, yPos)就会随之改变 // 改变组件内部 yPos 的值，这样html的translate(0, yPos)就会随之改变
// e.deltaY是滚动的距离 // e.deltaY是滚动的距离
this.$refs.vueSeamlessScroll.yPos = this.$refs.sssjControl.yPos = this.$refs.sssjControl.yPos - e.deltaY;
this.$refs.vueSeamlessScroll.yPos - e.deltaY; // 如果是正数 说明是往上滚
if (this.$refs.sssjControl.yPos > 0) {
this.$refs.sssjControl.yPos = 0;
return;
}
// 如果yPos超过内部实际高度的一半则重新到顶部滚动
// 一半的原因是因为组件实际上创建了两个dom，以达到无缝衔接的效果
if (
Math.abs(this.$refs.sssjControl.yPos) >
this.$refs.sssjControl.realBoxHeight / 2
) {
this.$refs.sssjControl.yPos = 0;
}
},
// 右侧 鼠标滚动代码
handleScrollR(e) {
// 改变组件内部 yPos 的值，这样html的translate(0, yPos)就会随之改变
// e.deltaY是滚动的距离
this.$refs.RightScroll.yPos = this.$refs.RightScroll.yPos - e.deltaY;
// 如果是正数 说明是往上滚 // 如果是正数 说明是往上滚
if (this.$refs.vueSeamlessScroll.yPos > 0) { if (this.$refs.RightScroll.yPos > 0) {
this.$refs.vueSeamlessScroll.yPos = 0; this.$refs.RightScroll.yPos = 0;
return; return;
} }
// 如果yPos超过内部实际高度的一半则重新到顶部滚动 // 如果yPos超过内部实际高度的一半则重新到顶部滚动
// 一半的原因是因为组件实际上创建了两个dom，以达到无缝衔接的效果 // 一半的原因是因为组件实际上创建了两个dom，以达到无缝衔接的效果
if ( if (
Math.abs(this.$refs.vueSeamlessScroll.yPos) > Math.abs(this.$refs.RightScroll.yPos) >
this.$refs.vueSeamlessScroll.realBoxHeight / 2 this.$refs.RightScroll.realBoxHeight / 2
) { ) {
this.$refs.vueSeamlessScroll.yPos = 0; this.$refs.RightScroll.yPos = 0;
} }
}, },
}, },
...@@ -557,10 +875,10 @@ export default { ...@@ -557,10 +875,10 @@ export default {
.table-box { .table-box {
height: 866px; height: 866px;
width: calc(100% - 4px); width: calc(100% - 4px);
padding: 0px 23px;
.table-item { .table-item {
height: 110px; height: 110px;
width: 100%; width: calc(100% - 46px);
margin: 0 auto;
border-bottom: 2px dashed rgba(100, 194, 255, 0.3); border-bottom: 2px dashed rgba(100, 194, 255, 0.3);
padding-top: 9px; padding-top: 9px;
.img-class { .img-class {
...@@ -605,8 +923,11 @@ export default { ...@@ -605,8 +923,11 @@ export default {
overflow: hidden; overflow: hidden;
ul { ul {
list-style: none; list-style: none;
padding: 0;
margin: 0 auto; margin: 0 auto;
.active {
// width: 100%;
background: RGBA(2, 87, 149, 1);
}
} }
} }
} }
...@@ -847,4 +1168,60 @@ export default { ...@@ -847,4 +1168,60 @@ export default {
} }
} }
} }
.up-window {
position: absolute;
top: 50%;
left: 50%;
width: 1360px;
height: 480px;
transform: translate(-50%, -50%);
background: url("~@/assets/images/screen/hjjc/popup.png") no-repeat;
background-size: 1377px 501px;
box-shadow: 0px 15px 11px 2px rgba(0, 20, 39, 0.31);
padding: 28px 37px;
p {
width: 1271px;
height: 37px;
margin: 0px;
background: url("~@/assets/images/screen/hjjc/title-popup.png") no-repeat
center;
background-size: 100%;
font-weight: 500;
font-size: 22px;
color: #ffffff;
height: 37px;
background-position-y: 9px;
span {
width: 27px;
display: inline-block;
}
}
.close-button {
font-size: 30px;
position: absolute;
top: 16px;
right: 16px;
cursor: pointer;
&:hover {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
-webkit-transition: -webkit-transform 1s linear;
transition: transform 1s linear;
}
}
.date-title {
width: 108px;
height: 18px;
font-weight: 500;
font-size: 22px;
color: #15f1ff;
background: none;
margin-left: 56px;
margin-top: 5px;
}
.chart-box {
width: 100%;
height: 355px;
}
}
</style> </style>
src/views/Screen/items/psxt.vue
View file @ 7db1f784
<template> <template>
<div class="app-container home"> <div class="app-container home">
<div id="cesiumContainer"></div> <div id="cesiumContainer">
<div class="center-title-box">
<div class="control-state">
<p>
<span class="icon-img"></span>
<span>已开启智能控制</span>
</p>
</div>
<div class="title-box top">
<p class="title">液体高度:10m</p>
<p class="name">蓄水池</p>
</div>
<div class="title-box center">
<p class="title">液体高度:10m</p>
<p class="name">二中水仓</p>
</div>
<div class="title-box bottom">
<p class="title">液体高度:10m</p>
<p class="name">五中水仓</p>
</div>
</div>
<div class="water-pump pst1">
<div class="H36">
<div class="button on">开启</div>
<div class="button off">关闭</div>
</div>
<div class="H164">
<div class="phd-left"></div>
<div class="phd-right">
<div class="phd-top"></div>
<div class="water-pump-img-left"></div>
<p>5#水泵</p>
</div>
</div>
</div>
<div class="water-pump pst2">
<div class="H36">
<div class="button on">开启</div>
<div class="button off">关闭</div>
</div>
<div class="H164">
<div class="phd-left"></div>
<div class="phd-right">
<div class="phd-top"></div>
<div class="water-pump-img-left"></div>
<p>5#水泵</p>
</div>
</div>
</div>
<div class="water-pump pst3">
<div class="H36">
<div class="button on">开启</div>
<div class="button off">关闭</div>
</div>
<div class="H164">
<div class="phd-right">
<div class="phd-top"></div>
<div class="water-pump-img-right"></div>
<p>5#水泵</p>
</div>
<div class="phd-left"></div>
</div>
</div>
<div class="water-pump pst4">
<div class="H36">
<div class="button on">开启</div>
<div class="button off">关闭</div>
</div>
<div class="H164">
<div class="phd-left"></div>
<div class="phd-right">
<div class="phd-top"></div>
<div class="water-pump-img-left"></div>
<p>5#水泵</p>
</div>
</div>
</div>
<div class="water-pump pst5">
<div class="H36">
<div class="button on">开启</div>
<div class="button off">关闭</div>
</div>
<div class="H164">
<div class="phd-left"></div>
<div class="phd-right">
<div class="phd-top"></div>
<div class="water-pump-img-left"></div>
<p>5#水泵</p>
</div>
</div>
</div>
<div class="water-pump pst6">
<div class="H36">
<div class="button on">开启</div>
<div class="button off">关闭</div>
</div>
<div class="H164">
<div class="phd-right">
<div class="phd-top"></div>
<div class="water-pump-img-right"></div>
<p>5#水泵</p>
</div>
<div class="phd-left"></div>
</div>
</div>
<div class="water-pump pst7">
<div class="H36">
<div class="button on">开启</div>
<div class="button off">关闭</div>
</div>
<div class="H164">
<div class="phd-right">
<div class="phd-top"></div>
<div class="water-pump-img-right"></div>
<p>5#水泵</p>
</div>
<div class="phd-left"></div>
</div>
</div>
</div>
</div> </div>
</template> </template>
<script> <script>
...@@ -27,6 +146,165 @@ export default { ...@@ -27,6 +146,165 @@ export default {
height: 745px; height: 745px;
background: url("~@/assets/images/screen/psxt/gd.png") no-repeat center; background: url("~@/assets/images/screen/psxt/gd.png") no-repeat center;
background-size: 1800px 745px; background-size: 1800px 745px;
position: relative;
.center-title-box {
width: 200px;
height: 100%;
margin: auto;
position: relative;
.control-state {
width: 260px;
height: 44px;
background: url("~@/assets/images/screen/psxt/bg1.png") no-repeat center;
background-size: 100% 100%;
position: absolute;
top: 33px;
left: 342px;
p {
font-weight: 400;
font-size: 20px;
color: #ffd929;
line-height: 44px;
margin: 0px;
text-align: center;
.icon-img {
background: url("~@/assets/images/screen/psxt/icon1.png") no-repeat
center;
width: 20px;
height: 20px;
display: inline-block;
margin-bottom: -4px;
margin-right: 10px;
}
}
}
.title-box {
text-align: center;
.title {
font-family: Source Han Sans SC;
font-weight: 400;
font-size: 18px;
color: #11e0ff;
}
.name {
font-weight: 400;
font-size: 20px;
color: #ffffff;
}
}
.top {
margin-top: -35px;
}
.center {
margin-top: 273px;
}
.bottom {
margin-top: 270px;
}
}
.water-pump {
position: absolute;
width: 172px;
height: 200px;
// background: #ffffff;
.H36 {
height: 36px;
.button {
width: 86px;
height: 36px;
float: left;
line-height: 36px;
text-align: center;
font-weight: bold;
font-size: 18px;
color: #96aeba;
line-height: 32px;
text-shadow: 0px 1px 4px rgba(5, 38, 68, 0.73);
border: 2px solid #d8efff;
border-radius: 2px;
background: RGBA(0, 26, 49, 1);
}
.on {
&.active {
background: url("~@/assets/images/screen/psxt/button.png") no-repeat
center;
color: #ffffff;
}
}
.off {
border-left: none;
&.active {
background: url("~@/assets/images/screen/psxt/button2.png")
no-repeat center;
color: #ffffff;
}
}
}
.H164 {
height: calc(100% - 36px);
.phd-left {
width: 50px;
height: calc(100% - 36px);
float: left;
}
.phd-right {
width: 122px;
height: calc(100% - 36px);
float: left;
.phd-top {
height: 40px;
}
.water-pump-img-left {
width: 122px;
height: 70px;
background: url("~@/assets/images/screen/psxt/item.png") no-repeat
center;
}
.water-pump-img-right {
width: 122px;
height: 70px;
background: url("~@/assets/images/screen/psxt/item1.png") no-repeat
center;
}
p {
font-weight: 400;
font-size: 20px;
color: #ffffff;
line-height: 30px;
text-align: center;
margin-top: 3px;
}
}
}
&.pst1 {
top: 139px;
left: 143px;
}
&.pst2 {
top: 139px;
left: 582px;
}
&.pst3 {
top: 139px;
left: 1408px;
}
&.pst4 {
top: 480px;
left: 0px;
}
&.pst5 {
top: 480px;
left: 440px;
}
&.pst6 {
top: 480px;
left: 1188px;
}
&.pst7 {
top: 480px;
left: 1630px;
}
}
} }
} }
</style> </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