Commit 6811d952 authored by lei's avatar lei

add:近期调整

parent 25bf70ae
...@@ -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.16:9091
# VUE_APP_API_TARGET = http://localhost:8080 # VUE_APP_API_TARGET = http://localhost:8080
\ No newline at end of file
import request from "@/utils/request";
// 发送数据格式
export function updateSelectEleHistoryData(query) {
return request({
url: '/business/screen/ele/all',
method: 'get',
params: query,
})
}
\ No newline at end of file
import request from "@/utils/request";
// 查询提升机数据
export function getElevatorData(query) {
return request({
url: "/business/elevator/real/query",
method: "get",
params: query,
});
}
// 修改水泵开关
export function updatePumpSwitch(data) {
return request({
url: "/business/screen/dra/changePumpStatus",
method: "post",
data: data,
});
}
import request from '@/utils/request'
//空压机数据
export function kongyajiQuery(query) {
return request({
url: '/business/screen/fan/kongyajiQuery',
method: 'get',
data: query
})
}
//空压机数据
export function fenshanQuery(query) {
return request({
url: '/business/screen/fan/dianjiQuery',
method: 'get',
data: query
})
}
export function peakEditDra(query) {
return request({
url: '/business/peak/add',
method: 'post',
data: query
})
}
src/assets/images/screen/bg.png

605 KB | W: | H:

src/assets/images/screen/bg.png

336 KB | W: | H:

src/assets/images/screen/bg.png
src/assets/images/screen/bg.png
src/assets/images/screen/bg.png
src/assets/images/screen/bg.png
  • 2-up
  • Swipe
  • Onion skin
This diff is collapsed.
This diff is collapsed.
src/assets/images/screen/dlxt/bg2.png

408 KB | W: | H:

src/assets/images/screen/dlxt/bg2.png

7.69 KB | W: | H:

src/assets/images/screen/dlxt/bg2.png
src/assets/images/screen/dlxt/bg2.png
src/assets/images/screen/dlxt/bg2.png
src/assets/images/screen/dlxt/bg2.png
  • 2-up
  • Swipe
  • Onion skin
src/assets/images/screen/dlxt/title.png

8.04 KB | W: | H:

src/assets/images/screen/dlxt/title.png

7.07 KB | W: | H:

src/assets/images/screen/dlxt/title.png
src/assets/images/screen/dlxt/title.png
src/assets/images/screen/dlxt/title.png
src/assets/images/screen/dlxt/title.png
  • 2-up
  • Swipe
  • Onion skin
src/assets/images/screen/psxt/gd.png

21 KB | W: | H:

src/assets/images/screen/psxt/gd.png

14.1 KB | W: | H:

src/assets/images/screen/psxt/gd.png
src/assets/images/screen/psxt/gd.png
src/assets/images/screen/psxt/gd.png
src/assets/images/screen/psxt/gd.png
  • 2-up
  • Swipe
  • Onion skin
@import './variables.scss'; @import "./variables.scss";
@import './mixin.scss'; @import "./mixin.scss";
@import './transition.scss'; @import "./transition.scss";
@import './element-ui.scss'; @import "./element-ui.scss";
@import './sidebar.scss'; @import "./sidebar.scss";
@import './btn.scss'; @import "./btn.scss";
@font-face {
font-family: "fangsong";
src: url("~@/assets/font/simfang.ttf") format("truetype");
font-weight: normal;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "fangzhengyaoti";
src: url("~@/assets/font/FZYTK.TTF") format("truetype");
font-weight: normal;
font-style: normal;
font-display: swap;
}
body { body {
height: 100%; height: 100%;
-moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility; text-rendering: optimizeLegibility;
font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif; font-family: $--font-family;
} }
label { label {
...@@ -104,7 +117,8 @@ aside { ...@@ -104,7 +117,8 @@ aside {
display: block; display: block;
line-height: 32px; line-height: 32px;
font-size: 16px; font-size: 16px;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
color: #2c3e50; color: #2c3e50;
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale;
...@@ -134,7 +148,7 @@ aside { ...@@ -134,7 +148,7 @@ aside {
} }
.text-center { .text-center {
text-align: center text-align: center;
} }
.sub-navbar { .sub-navbar {
...@@ -145,7 +159,13 @@ aside { ...@@ -145,7 +159,13 @@ aside {
text-align: right; text-align: right;
padding-right: 20px; padding-right: 20px;
transition: 600ms ease position; transition: 600ms ease position;
background: linear-gradient(90deg, rgba(32, 182, 249, 1) 0%, rgba(32, 182, 249, 1) 0%, rgba(33, 120, 241, 1) 100%, rgba(33, 120, 241, 1) 100%); background: linear-gradient(
90deg,
rgba(32, 182, 249, 1) 0%,
rgba(32, 182, 249, 1) 0%,
rgba(33, 120, 241, 1) 100%,
rgba(33, 120, 241, 1) 100%
);
.subtitle { .subtitle {
font-size: 20px; font-size: 20px;
......
// base color // base color
$blue:#324157; $blue: #324157;
$light-blue:#3A71A8; $light-blue: #3a71a8;
$red:#C03639; $red: #c03639;
$pink: #E65D6E; $pink: #e65d6e;
$green: #30B08F; $green: #30b08f;
$tiffany: #4AB7BD; $tiffany: #4ab7bd;
$yellow:#FEC171; $yellow: #fec171;
$panGreen: #30B08F; $panGreen: #30b08f;
// 默认菜单主题风格 // 默认菜单主题风格
$base-menu-color:#bfcbd9; $base-menu-color: #bfcbd9;
$base-menu-color-active:#f4f4f5; $base-menu-color-active: #f4f4f5;
$base-menu-background:#304156; $base-menu-background: #304156;
$base-logo-title-color: #ffffff; $base-logo-title-color: #ffffff;
$base-menu-light-color:rgba(0,0,0,.70); $base-menu-light-color: rgba(0, 0, 0, 0.7);
$base-menu-light-background:#ffffff; $base-menu-light-background: #ffffff;
$base-logo-light-title-color: #001529; $base-logo-light-title-color: #001529;
$base-sub-menu-background:#1f2d3d; $base-sub-menu-background: #1f2d3d;
$base-sub-menu-hover:#001528; $base-sub-menu-hover: #001528;
// 自定义暗色菜单风格 // 自定义暗色菜单风格
/** /**
...@@ -50,5 +50,9 @@ $base-sidebar-width: 200px; ...@@ -50,5 +50,9 @@ $base-sidebar-width: 200px;
subMenuHover: $base-sub-menu-hover; subMenuHover: $base-sub-menu-hover;
sideBarWidth: $base-sidebar-width; sideBarWidth: $base-sidebar-width;
logoTitleColor: $base-logo-title-color; logoTitleColor: $base-logo-title-color;
logoLightTitleColor: $base-logo-light-title-color logoLightTitleColor: $base-logo-light-title-color;
} }
// 添加字体变量
$--font-family: "Microsoft YaHei", "PingFang SC", "Helvetica Neue", Arial,
sans-serif, "fangsong", "fangzhengyaoti";
<template>
<canvas ref="waveCanvas" class="wave-canvas"></canvas>
</template>
<script>
export default {
name: "WaveCanvas",
data() {
return {
animationId: null,
time: 0,
waves: [
{
height: 12,
speed: 0.03,
length: 0.05,
color: "rgba(0, 222, 255, 0.6)",
offsetY: 0,
},
{
height: 9,
speed: 0.05,
length: 0.055,
color: "rgba(0, 180, 255, 0.5)",
offsetY: 2,
},
{
height: 6,
speed: 0.04,
length: 0.056,
color: "rgba(0, 150, 255, 0.4)",
offsetY: 2,
},
],
};
},
mounted() {
this.initCanvas();
this.startAnimation();
},
beforeDestroy() {
cancelAnimationFrame(this.animationId);
},
methods: {
initCanvas() {
const canvas = this.$refs.waveCanvas;
canvas.width = 337;
canvas.height = 47;
},
drawWave() {
const canvas = this.$refs.waveCanvas;
const ctx = canvas.getContext("2d");
const width = canvas.width;
const height = canvas.height;
ctx.clearRect(0, 0, width, height);
// 绘制多层波浪
this.waves.forEach((wave) => {
ctx.beginPath();
ctx.moveTo(0, height);
// 创建波浪路径
const points = [];
for (let i = -20; i <= width + 20; i += 5) {
const x = i;
const y =
height -
20 +
wave.offsetY +
Math.sin(x * wave.length + this.time * wave.speed) * wave.height;
points.push({ x, y });
}
// 绘制贝塞尔曲线
ctx.moveTo(0, points[0].y);
for (let i = 1; i < points.length; i++) {
const xc = (points[i].x + points[i - 1].x) / 2;
const yc = (points[i].y + points[i - 1].y) / 2;
ctx.quadraticCurveTo(points[i - 1].x, points[i - 1].y, xc, yc);
}
// 闭合路径
ctx.lineTo(width, height);
ctx.lineTo(0, height);
ctx.fillStyle = wave.color;
ctx.fill();
});
},
startAnimation() {
const animate = () => {
this.time += 0.5;
this.drawWave();
this.animationId = requestAnimationFrame(animate);
};
animate();
},
},
};
</script>
<style scoped lang="scss">
.wave-canvas {
position: absolute;
width: 337px;
height: 47px;
overflow: hidden; // 确保内容不会溢出
}
</style>
...@@ -4,10 +4,6 @@ ...@@ -4,10 +4,6 @@
v-if="showMenu === 0" v-if="showMenu === 0"
style="position: absolute; top: 0; left: 0; right: 0; bottom: 0" style="position: absolute; top: 0; left: 0; right: 0; bottom: 0"
></home> ></home>
<psxt
v-if="showMenu === 3"
style="position: absolute; top: 0; left: 0; right: 0; bottom: 0"
></psxt>
<v-scale-screen <v-scale-screen
ref="scale-screen" ref="scale-screen"
...@@ -15,6 +11,11 @@ ...@@ -15,6 +11,11 @@
height="1080" height="1080"
:fullScreen="true" :fullScreen="true"
> >
<psxt
v-if="showMenu === 3"
style="position: absolute; top: 0; left: 0; right: 0; bottom: 0"
></psxt>
<dlxt <dlxt
v-if="showMenu === 6" v-if="showMenu === 6"
style="position: absolute; top: 0; left: 0; right: 0; bottom: 0" style="position: absolute; top: 0; left: 0; right: 0; bottom: 0"
...@@ -27,6 +28,14 @@ ...@@ -27,6 +28,14 @@
v-if="showMenu === 4" v-if="showMenu === 4"
style="position: absolute; top: 0; left: 0; right: 0; bottom: 0" style="position: absolute; top: 0; left: 0; right: 0; bottom: 0"
></tsj> ></tsj>
<rydw
v-if="showMenu === 1"
style="position: absolute; top: 0; left: 0; right: 0; bottom: 0"
></rydw>
<hjjc
v-if="showMenu === 2"
style="position: absolute; top: 0; left: 0; right: 0; bottom: 0"
></hjjc>
<div class="container"> <div class="container">
<!-- 头部 --> <!-- 头部 -->
<div class="header por"></div> <div class="header por"></div>
...@@ -89,9 +98,6 @@ ...@@ -89,9 +98,6 @@
</div> </div>
</div> </div>
<rydw v-if="showMenu === 1" style="pointer-events: auto"></rydw>
<hjjc v-if="showMenu === 2" style="pointer-events: auto"></hjjc>
<!-- 底部 --> <!-- 底部 -->
<!-- <div class="footer"> <!-- <div class="footer">
</div> --> </div> -->
...@@ -197,7 +203,7 @@ export default { ...@@ -197,7 +203,7 @@ export default {
padding: 0 20px; padding: 0 20px;
// background-color: #08152a; // background-color: #08152a;
position: relative; position: relative;
font-family: "SimHei"; font-family: "fangsong";
pointer-events: none; pointer-events: none;
color: #fff; color: #fff;
} }
...@@ -206,7 +212,7 @@ export default { ...@@ -206,7 +212,7 @@ export default {
width: 590px; width: 590px;
height: 80px; height: 80px;
background: url("~@/assets/images/screen/tit.png") no-repeat center; // background: url("~@/assets/images/screen/tit.png") no-repeat center;
background-size: 100%; background-size: 100%;
margin: 0 auto; margin: 0 auto;
} }
......
This diff is collapsed.
...@@ -1215,6 +1215,9 @@ export default { ...@@ -1215,6 +1215,9 @@ export default {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
padding: 0 30px; padding: 0 30px;
padding-top: 160px;
background: url("~@/assets/images/screen/bg12.png");
color: #fff;
} }
.histrybox { .histrybox {
width: 100%; width: 100%;
...@@ -1360,6 +1363,7 @@ export default { ...@@ -1360,6 +1363,7 @@ export default {
height: 46px; height: 46px;
background: url("~@/assets/images/screen/title1.png") no-repeat center; background: url("~@/assets/images/screen/title1.png") no-repeat center;
font-weight: bold; font-weight: bold;
font-family: "fangsong";
span { span {
position: absolute; position: absolute;
top: -10px; top: -10px;
...@@ -1424,6 +1428,7 @@ export default { ...@@ -1424,6 +1428,7 @@ export default {
width: 100%; width: 100%;
height: 100%; height: 100%;
overflow: hidden; overflow: hidden;
font-family: "fangzhengyaoti";
ul { ul {
list-style: none; list-style: none;
margin: 0 auto; margin: 0 auto;
...@@ -1523,6 +1528,7 @@ export default { ...@@ -1523,6 +1528,7 @@ export default {
color: #fdfeff; color: #fdfeff;
font-size: 16px; font-size: 16px;
font-weight: 500; font-weight: 500;
font-family: "fangzhengyaoti";
} }
} }
} }
...@@ -1542,6 +1548,7 @@ export default { ...@@ -1542,6 +1548,7 @@ export default {
// display: flex; // display: flex;
// justify-content: space-around; // justify-content: space-around;
// align-items: center; // align-items: center;
font-family: "fangzhengyaoti";
span { span {
float: left; float: left;
margin-left: 25px; margin-left: 25px;
......
...@@ -12,40 +12,40 @@ export default { ...@@ -12,40 +12,40 @@ export default {
tileset: null, // 存储加载的3D Tileset tileset: null, // 存储加载的3D Tileset
markerList: [ markerList: [
{ {
longitude: 113.43095267132009, longitude: 113.43095267132009,
latitude: 32.54745665190039, latitude: 32.54745665190039,
height: 70, height: 70,
des: { des: {
name: '指挥中心', name: "指挥中心",
height: 300 height: 300,
} },
}, },
{ {
longitude: 113.42852104976393, longitude: 113.42852104976393,
latitude: 32.54756929901858, latitude: 32.54756929901858,
height: 35, height: 35,
des: { des: {
name: '交电所', name: "交电所",
height: 100 height: 100,
} },
}, },
{ {
longitude: 113.42927005190415, longitude: 113.42927005190415,
latitude: 32.5467314676447, latitude: 32.5467314676447,
height: 40, height: 40,
des: { des: {
name: '西矿厂', name: "西矿厂",
height: 300 height: 300,
} },
}, },
{ {
longitude: 113.43050560273339, longitude: 113.43050560273339,
latitude: 32.544308886167876, latitude: 32.544308886167876,
height: 40, height: 40,
des: { des: {
name: '办公楼', name: "办公楼",
height: 300 height: 300,
} },
}, },
], ],
}; };
...@@ -71,18 +71,38 @@ export default { ...@@ -71,18 +71,38 @@ export default {
this.viewer.cesiumWidget.creditContainer.style.display = "none"; this.viewer.cesiumWidget.creditContainer.style.display = "none";
// 加载3D Tileset // 加载3D Tileset
Cesium.Cesium3DTileset.fromUrl("/terra_b3dms/tileset.json") Cesium.Cesium3DTileset.fromUrl(
"http://localhost:80/terra_b3dms_yd/tileset.json",
{
maximumScreenSpaceError: 1,
pickable: true,
}
)
.then((tileset) => { .then((tileset) => {
this.tileset = tileset; // 存储tileset供后续使用 this.tileset = tileset; // 存储tileset供后续使用
this.viewer.scene.primitives.add(tileset); this.viewer.scene.primitives.add(tileset);
// 调整模型高度 // 调整模型高度
var heightOffset = -330.0; var heightOffset = 0;
var boundingSphere = tileset.boundingSphere; var boundingSphere = tileset.boundingSphere;
var cartographic = Cesium.Cartographic.fromCartesian(boundingSphere.center); var cartographic = Cesium.Cartographic.fromCartesian(
var surface = Cesium.Cartesian3.fromRadians(cartographic.longitude, cartographic.latitude, 0.0); boundingSphere.center
var offset = Cesium.Cartesian3.fromRadians(cartographic.longitude, cartographic.latitude, cartographic.height + heightOffset); );
var translation = Cesium.Cartesian3.subtract(offset, surface, new Cesium.Cartesian3()); var surface = Cesium.Cartesian3.fromRadians(
cartographic.longitude,
cartographic.latitude,
0.0
);
var offset = Cesium.Cartesian3.fromRadians(
cartographic.longitude,
cartographic.latitude,
cartographic.height + heightOffset
);
var translation = Cesium.Cartesian3.subtract(
offset,
surface,
new Cesium.Cartesian3()
);
tileset.modelMatrix = Cesium.Matrix4.fromTranslation(translation); tileset.modelMatrix = Cesium.Matrix4.fromTranslation(translation);
// 开启地形深度检测 // 开启地形深度检测
...@@ -98,7 +118,9 @@ export default { ...@@ -98,7 +118,9 @@ export default {
}); });
// 监听鼠标点击事件 // 监听鼠标点击事件
const handler = new Cesium.ScreenSpaceEventHandler(this.viewer.scene.canvas); const handler = new Cesium.ScreenSpaceEventHandler(
this.viewer.scene.canvas
);
handler.setInputAction((movement) => { handler.setInputAction((movement) => {
this.pickPosition(movement.position); this.pickPosition(movement.position);
}, Cesium.ScreenSpaceEventType.LEFT_CLICK); }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
...@@ -107,7 +129,7 @@ export default { ...@@ -107,7 +129,7 @@ export default {
methods: { methods: {
// 添加所有标记点 // 添加所有标记点
addMarkers() { addMarkers() {
this.markerList.forEach(marker => { this.markerList.forEach((marker) => {
this.addCustomPoint(marker); this.addCustomPoint(marker);
}); });
}, },
...@@ -122,38 +144,44 @@ export default { ...@@ -122,38 +144,44 @@ export default {
// 创建描述信息HTML // 创建描述信息HTML
let des = '<table class="cesium-infoBox-defaultTable"><tbody>'; let des = '<table class="cesium-infoBox-defaultTable"><tbody>';
Object.keys(pointInfo.des).forEach(key => { Object.keys(pointInfo.des).forEach((key) => {
des += `<tr><th>${key}</th><td>${pointInfo.des[key]}</td></tr>`; des += `<tr><th>${key}</th><td>${pointInfo.des[key]}</td></tr>`;
}); });
des += '</tbody></table>'; des += "</tbody></table>";
// 添加实体 // 添加实体
const entity = this.viewer.entities.add({ const entity = this.viewer.entities.add({
position: position, position: position,
billboard: { billboard: {
// image: Cesium.buildModuleUrl('Assets/Textures/maki/grocery.png'), // image: Cesium.buildModuleUrl('Assets/Textures/maki/grocery.png'),
image: '/img/location.png', image: "/img/location.png",
width: 26, width: 26,
height: 26, height: 26,
verticalOrigin: Cesium.VerticalOrigin.BOTTOM, verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
distanceDisplayCondition: new Cesium.DistanceDisplayCondition(1.0, 8000.0), distanceDisplayCondition: new Cesium.DistanceDisplayCondition(
disableDepthTestDistance:15, 1.0,
8000.0
),
disableDepthTestDistance: 15,
// disableDepthTestDistance: Number.POSITIVE_INFINITY // disableDepthTestDistance: Number.POSITIVE_INFINITY
}, },
label: { label: {
text: pointInfo.des.name || '监测点', text: pointInfo.des.name || "监测点",
font: '14px Microsoft YaHei', font: "14px Microsoft YaHei",
style: Cesium.LabelStyle.FILL_AND_OUTLINE, style: Cesium.LabelStyle.FILL_AND_OUTLINE,
outlineWidth: 2, outlineWidth: 2,
verticalOrigin: Cesium.VerticalOrigin.TOP, verticalOrigin: Cesium.VerticalOrigin.TOP,
distanceDisplayCondition: new Cesium.DistanceDisplayCondition(1.0, 8000.0), distanceDisplayCondition: new Cesium.DistanceDisplayCondition(
pixelOffset: new Cesium.Cartesian2(0, -60) 1.0,
8000.0
),
pixelOffset: new Cesium.Cartesian2(0, -60),
}, },
name: pointInfo.des.name || '建筑物信息', name: pointInfo.des.name || "建筑物信息",
description: des description: des,
}); });
console.log('添加标记点:', pointInfo.des.name); console.log("添加标记点:", pointInfo.des.name);
}, },
// 拾取坐标点 // 拾取坐标点
...@@ -168,15 +196,17 @@ export default { ...@@ -168,15 +196,17 @@ export default {
const latitude = Cesium.Math.toDegrees(cartographic.latitude); const latitude = Cesium.Math.toDegrees(cartographic.latitude);
const height = cartographic.height; const height = cartographic.height;
console.log(`拾取的坐标点:经度 ${longitude}, 纬度 ${latitude}, 高度 ${height}`); console.log(
`拾取的坐标点:经度 ${longitude}, 纬度 ${latitude}, 高度 ${height}`
);
} }
} },
}, },
beforeDestroy() { beforeDestroy() {
if (this.viewer) { if (this.viewer) {
this.viewer.destroy(); this.viewer.destroy();
} }
} },
}; };
</script> </script>
...@@ -189,4 +219,4 @@ export default { ...@@ -189,4 +219,4 @@ export default {
height: 100%; height: 100%;
} }
} }
</style> </style>
\ No newline at end of file
...@@ -18,7 +18,9 @@ ...@@ -18,7 +18,9 @@
:class="['top', 'center', 'bottom'][index]" :class="['top', 'center', 'bottom'][index]"
> >
<p class="title"> <p class="title">
液体高度:{{ item | sumpFilter("heghtThreshold") }}m <span v-if="item.sumpName !== '蓄水池'"
>液体高度: {{ item | sumpFilter("heghtThreshold") }}m</span
>
</p> </p>
<p class="name">{{ item | sumpFilter("sumpName") }}</p> <p class="name">{{ item | sumpFilter("sumpName") }}</p>
</div> </div>
...@@ -68,14 +70,16 @@ ...@@ -68,14 +70,16 @@
: 'dwr' : 'dwr'
" "
> >
<p>点击电流:{{ item.motorCurrent }}A</p> <p>电机电流:{{ item.motorCurrent }}A</p>
<p>电机轴承温度:{{ item.motorBearingTemp }}</p> <p>电机轴承温度:{{ item.motorBearingTemp }}</p>
<p>水泵轴承温度:{{ item.pumpBearingTemp }}</p> <p>水泵轴承温度:{{ item.pumpBearingTemp }}</p>
<p>水泵流量:{{ item.pumpFlow }}</p> <p>水泵流量:{{ item.pumpFlow }}</p>
<p>排水管路压力:{{ item.drainagePressure }}</p> <p>排水管路压力:{{ item.drainagePressure }}</p>
</div> </div>
</div> </div>
<p>{{ item.pumpName }}</p> <p>
<span>{{ item.pumpName }}</span>
</p>
</div> </div>
<div <div
class="phd-left" class="phd-left"
...@@ -99,12 +103,19 @@ ...@@ -99,12 +103,19 @@
</div> </div>
</div> </div>
</div> </div>
<pool style="position: absolute; top: 195px; left: 793px"></pool>
<pool style="position: absolute; top: 580px; left: 793px"></pool>
<pool style="position: absolute; top: 962px; left: 795px"></pool>
</div> </div>
</template> </template>
<script> <script>
import { getDraData, updatePumpSwitch } from "@/api/tyler/psxt.js"; import { getDraData, updatePumpSwitch } from "@/api/tyler/psxt.js";
import pool from "@/components/Pool/pool.vue";
export default { export default {
name: "psxt", name: "psxt",
components: {
pool,
},
data() { data() {
return { return {
password: "", password: "",
...@@ -126,6 +137,9 @@ export default { ...@@ -126,6 +137,9 @@ export default {
created() { created() {
this.initPumpList(); this.initPumpList();
}, },
mounted() {
this.startWaterAnimation();
},
methods: { methods: {
initPumpList() { initPumpList() {
getDraData().then((res) => { getDraData().then((res) => {
...@@ -192,12 +206,13 @@ export default { ...@@ -192,12 +206,13 @@ export default {
background: url("~@/assets/images/screen/psxt/bg.png") no-repeat center; background: url("~@/assets/images/screen/psxt/bg.png") no-repeat center;
display: flex; display: flex;
justify-content: center; justify-content: center;
padding-top: 155px; padding-top: 185px;
font-family: "fangsong";
#cesiumContainer { #cesiumContainer {
width: 1800px; width: 1800px;
height: 745px; height: 837px;
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: 100% 100%;
position: relative; position: relative;
.center-title-box { .center-title-box {
width: 200px; width: 200px;
...@@ -239,8 +254,8 @@ export default { ...@@ -239,8 +254,8 @@ export default {
} }
.title-box { .title-box {
text-align: center; text-align: center;
.title { .title {
font-family: Source Han Sans SC;
font-weight: 400; font-weight: 400;
font-size: 18px; font-size: 18px;
color: #11e0ff; color: #11e0ff;
...@@ -252,13 +267,10 @@ export default { ...@@ -252,13 +267,10 @@ export default {
} }
} }
.top { .top {
margin-top: -35px; padding-top: 360px;
} }
.center { .center {
margin-top: 273px; padding-top: 280px;
}
.bottom {
margin-top: 270px;
} }
} }
.water-pump { .water-pump {
...@@ -321,7 +333,7 @@ export default { ...@@ -321,7 +333,7 @@ export default {
center; center;
position: relative; position: relative;
.tip-box { .tip-box {
width: 182px; width: 192px;
height: 136px; height: 136px;
background: #0a1e36; background: #0a1e36;
border: 2px solid #00deff; border: 2px solid #00deff;
...@@ -351,13 +363,22 @@ export default { ...@@ -351,13 +363,22 @@ export default {
p { p {
font-weight: 400; font-weight: 400;
font-size: 20px; font-size: 20px;
color: #ffffff;
line-height: 30px; line-height: 30px;
text-align: center; text-align: center;
margin-top: 3px; margin-top: 3px;
background: url("~@/assets/images/screen/psxt/sbmcbg.png") no-repeat
center;
span {
font-family: "fangzhengyaoti";
background: linear-gradient(180deg, #ffffff 0%, #ffd200 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
text-fill-color: transparent;
}
} }
.tip-box { .tip-box {
width: 182px; width: 192px;
height: 136px; height: 136px;
background: #0a1e36; background: #0a1e36;
border: 2px solid #00deff; border: 2px solid #00deff;
...@@ -370,6 +391,7 @@ export default { ...@@ -370,6 +391,7 @@ export default {
margin-bottom: -2px; margin-bottom: -2px;
text-align: left; text-align: left;
font-weight: 400; font-weight: 400;
background: none;
} }
&.dwr { &.dwr {
position: absolute; position: absolute;
...@@ -380,31 +402,31 @@ export default { ...@@ -380,31 +402,31 @@ export default {
} }
} }
&.pst5 { &.pst5 {
top: 139px; top: 169px;
left: 143px; left: 143px;
} }
&.pst6 { &.pst6 {
top: 139px; top: 169px;
left: 582px; left: 582px;
} }
&.pst7 { &.pst7 {
top: 139px; top: 169px;
left: 1408px; left: 1408px;
} }
&.pst1 { &.pst1 {
top: 480px; top: 555px;
left: 0px; left: 0px;
} }
&.pst2 { &.pst2 {
top: 480px; top: 555px;
left: 440px; left: 440px;
} }
&.pst3 { &.pst3 {
top: 480px; top: 555px;
left: 1188px; left: 1188px;
} }
&.pst4 { &.pst4 {
top: 480px; top: 555px;
left: 1630px; left: 1630px;
} }
} }
...@@ -503,4 +525,18 @@ export default { ...@@ -503,4 +525,18 @@ export default {
} }
} }
} }
@keyframes wave {
0% {
background-position-x: 0;
border-radius: 50% 50% 0 0 / v-bind('waveHeight + "px"');
}
50% {
border-radius: 50% 50% 0 0 / v-bind('(waveHeight + 2) + "px"');
}
100% {
background-position-x: 200px;
border-radius: 50% 50% 0 0 / v-bind('waveHeight + "px"');
}
}
</style> </style>
...@@ -884,6 +884,9 @@ export default { ...@@ -884,6 +884,9 @@ export default {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
padding: 0 30px; padding: 0 30px;
padding-top: 160px;
background: url("~@/assets/images/screen/bg12.png");
color: #fff;
} }
/* 左右侧边栏 */ /* 左右侧边栏 */
...@@ -924,6 +927,7 @@ export default { ...@@ -924,6 +927,7 @@ export default {
height: 46px; height: 46px;
background: url("~@/assets/images/screen/title1.png") no-repeat center; background: url("~@/assets/images/screen/title1.png") no-repeat center;
font-weight: bold; font-weight: bold;
font-family: "fangsong";
span { span {
position: absolute; position: absolute;
top: -10px; top: -10px;
...@@ -935,6 +939,7 @@ export default { ...@@ -935,6 +939,7 @@ export default {
display: flex; display: flex;
justify-content: space-evenly; justify-content: space-evenly;
align-items: center; align-items: center;
font-family: "fangzhengyaoti";
.sub-con-left { .sub-con-left {
div { div {
margin-top: -40px; margin-top: -40px;
...@@ -959,6 +964,8 @@ export default { ...@@ -959,6 +964,8 @@ export default {
} }
} }
.sub-con-right { .sub-con-right {
font-family: "fangzhengyaoti";
div { div {
width: 243px; width: 243px;
height: 32px; height: 32px;
...@@ -978,12 +985,14 @@ export default { ...@@ -978,12 +985,14 @@ export default {
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
padding-right: 50px; padding-right: 50px;
span { span {
font-size: 30px; font-size: 30px;
color: #ffd929; color: #ffd929;
text-indent: 15px; text-indent: 15px;
font-family: "number"; font-family: "number";
margin-top: -4px; margin-top: -4px;
&::before { &::before {
content: ""; content: "";
width: 6px; width: 6px;
...@@ -1007,6 +1016,7 @@ export default { ...@@ -1007,6 +1016,7 @@ export default {
} }
} }
} }
/* 中间主区域 */ /* 中间主区域 */
.main-area { .main-area {
width: calc(100% - 920px); width: calc(100% - 920px);
...@@ -1027,6 +1037,7 @@ export default { ...@@ -1027,6 +1037,7 @@ export default {
height: 14em; height: 14em;
} }
.sub-con-scroll-table { .sub-con-scroll-table {
font-family: "fangzhengyaoti";
width: 100%; width: 100%;
height: 100%; height: 100%;
margin: 0 auto; margin: 0 auto;
...@@ -1068,6 +1079,7 @@ export default { ...@@ -1068,6 +1079,7 @@ export default {
text-align: center; text-align: center;
} }
.sub-con-r { .sub-con-r {
font-family: "fangzhengyaoti";
width: 100%; width: 100%;
display: flex; display: flex;
justify-content: flex-start; // 改为左对齐 justify-content: flex-start; // 改为左对齐
......
...@@ -17,18 +17,18 @@ ...@@ -17,18 +17,18 @@
</div> </div>
<div class="fengji-button">本地控制</div> <div class="fengji-button">本地控制</div>
<div class="fengji-msg"> <div class="fengji-msg">
<p>电源电压:10V</p> <p>电源电压:406.29V</p>
<p>电机电流:10A</p> <p>电机电流:266.3A</p>
<p>运行频率:100HZ</p> <p>运行频率:100HZ</p>
<p>设定频率:100HZ</p> <p>设定频率:45HZ</p>
<p>风压:10Kpa</p> <p>风压:1.01KPa</p>
<p>风速:10m/s</p> <p>风速:3.42m/s</p>
<p>风量:m3/s</p> <p>风量:24.64m³/s</p>
<p>前轴温:10°</p> <p>电机温度1:36.1</p>
<p>后轴温:10°</p> <p>电机温度2:0</p>
<p>电机温度:10°</p> <p>环境温度:36.81</p>
<p>前振动:10000mm/s</p> <p>电机振动1:5.2mm/s</p>
<p>后振动:10000mm/s</p> <p>电机振动2:3.29mm/s</p>
</div> </div>
</div> </div>
<div class="arrow-psition" style="top: 132px; left: 300px"> <div class="arrow-psition" style="top: 132px; left: 300px">
...@@ -56,9 +56,10 @@ ...@@ -56,9 +56,10 @@
</div> </div>
<div class="fengji-button">本地控制</div> <div class="fengji-button">本地控制</div>
<div class="fengji-msg msg-postion"> <div class="fengji-msg msg-postion">
<p>电源电压:10V</p> <p>电源电压:390.46V</p>
<p>电机电流:10A</p> <p>电机电流:28.10A</p>
<p>运行频率:100HZ</p> <p>运行频率:49.90HZ</p>
<p>设定频率:49.90HZ</p>
</div> </div>
</div> </div>
<!--地面空压机--> <!--地面空压机-->
...@@ -68,12 +69,7 @@ ...@@ -68,12 +69,7 @@
</div> </div>
<!--东风井风机dom--> <!--东风井风机dom-->
<div class="fengji" style="right: 80px; top: 24px"> <div class="fengji" style="right: 80px; top: 24px">
<div <div class="fengji-title" style="margin-left: 50px">东风进风机</div>
class="fengji-title"
style="text-align: right; padding-right: 20px"
>
东风进风机
</div>
<div class="fengji-content"> <div class="fengji-content">
<div class="fengji-control"> <div class="fengji-control">
<div class="fengji-icon"></div> <div class="fengji-icon"></div>
...@@ -87,18 +83,18 @@ ...@@ -87,18 +83,18 @@
</div> </div>
<div class="fengji-button" style="margin-left: 55px">本地控制</div> <div class="fengji-button" style="margin-left: 55px">本地控制</div>
<div class="fengji-msg" style="position: absolute; right: -30px"> <div class="fengji-msg" style="position: absolute; right: -30px">
<p>电源电压:10V</p> <p>电源电压:418.00V</p>
<p>电机电流:10A</p> <p>电机电流:126.00A</p>
<p>运行频率:100HZ</p> <p>运行频率:40HZ</p>
<p>设定频率:100HZ</p> <p>设定频率:40HZ</p>
<p>风压:10Kpa</p> <p>风压:0.28KPa</p>
<p>风速:10m/s</p> <p>风速:1.31m/s</p>
<p>风量:m3/s</p> <p>风量:9.45m³/s</p>
<p>前轴温:10°</p> <p>电机温度1:22.9</p>
<p>后轴温:10°</p> <p>电机温度2:124.8</p>
<p>电机温度:10°</p> <p>环境温度:16.76</p>
<p>前振动:10000mm/s</p> <p>电机振动1:4.24mm/s</p>
<p>后振动:10000mm/s</p> <p>电机振动2:1.58mm/s</p>
</div> </div>
</div> </div>
<div class="arrow-psition" style="top: 302px; left: 558px"> <div class="arrow-psition" style="top: 302px; left: 558px">
...@@ -114,12 +110,7 @@ ...@@ -114,12 +110,7 @@
</div> </div>
<!--二中副扇风机dom--> <!--二中副扇风机dom-->
<div class="fengji" style="left: 960px; top: 247px"> <div class="fengji" style="left: 960px; top: 247px">
<div <div class="fengji-title" style="margin-left: 50px">二中副扇风机</div>
class="fengji-title"
style="text-align: right; padding-right: 20px"
>
二中副扇风机
</div>
<div class="fengji-content"> <div class="fengji-content">
<div class="fengji-control"> <div class="fengji-control">
<div class="fengji-icon"></div> <div class="fengji-icon"></div>
...@@ -134,11 +125,12 @@ ...@@ -134,11 +125,12 @@
<div class="fengji-button" style="margin-left: 55px">本地控制</div> <div class="fengji-button" style="margin-left: 55px">本地控制</div>
<div <div
class="fengji-msg" class="fengji-msg"
style="position: absolute; right: -190px; top: 20px" style="position: absolute; right: -200px; top: 20px"
> >
<p>电源电压:10V</p> <p>电源电压:381.18V</p>
<p>电机电流:10A</p> <p>电机电流:25.20A</p>
<p>运行频率:100HZ</p> <p>运行频率:49.91HZ</p>
<p>设定频率:49.91HZ</p>
</div> </div>
</div> </div>
<div class="arrow-psition" style="top: 472px; left: 288px"> <div class="arrow-psition" style="top: 472px; left: 288px">
...@@ -169,19 +161,15 @@ ...@@ -169,19 +161,15 @@
</div> </div>
<div class="fengji-button">本地控制</div> <div class="fengji-button">本地控制</div>
<div class="fengji-msg msg-postion"> <div class="fengji-msg msg-postion">
<p>电源电压:10V</p> <p>电源电压:396.18V</p>
<p>电机电流:10A</p> <p>电机电流:28.40A</p>
<p>运行频率:100HZ</p> <p>运行频率:49.94HZ</p>
<p>设定频率:49.94HZ</p>
</div> </div>
</div> </div>
<!--四中副扇风机dom--> <!--四中副扇风机dom-->
<div class="fengji" style="left: 1260px; top: 583px"> <div class="fengji" style="left: 1260px; top: 583px">
<div <div class="fengji-title" style="margin-left: 50px">四中副扇风机</div>
class="fengji-title"
style="text-align: right; padding-right: 20px"
>
四中副扇风机
</div>
<div class="fengji-content"> <div class="fengji-content">
<div class="fengji-control"> <div class="fengji-control">
<div class="fengji-icon"></div> <div class="fengji-icon"></div>
...@@ -196,11 +184,12 @@ ...@@ -196,11 +184,12 @@
<div class="fengji-button" style="margin-left: 55px">本地控制</div> <div class="fengji-button" style="margin-left: 55px">本地控制</div>
<div <div
class="fengji-msg" class="fengji-msg"
style="position: absolute; right: -190px; top: 20px" style="position: absolute; right: -200px; top: 20px"
> >
<p>电源电压:10V</p> <p>电源电压:390.50V</p>
<p>电机电流:10A</p> <p>电机电流:33.90A</p>
<p>运行频率:100HZ</p> <p>运行频率:39.92HZ</p>
<p>设定频率:40.00HZ</p>
</div> </div>
</div> </div>
<div class="arrow-psition" style="top: 642px; left: 288px"> <div class="arrow-psition" style="top: 642px; left: 288px">
...@@ -231,9 +220,10 @@ ...@@ -231,9 +220,10 @@
</div> </div>
<div class="fengji-button">本地控制</div> <div class="fengji-button">本地控制</div>
<div class="fengji-msg msg-postion"> <div class="fengji-msg msg-postion">
<p>电源电压:10V</p> <p>电源电压:402.71V</p>
<p>电机电流:10A</p> <p>电机电流:35.10A</p>
<p>运行频率:100HZ</p> <p>运行频率:49.92HZ</p>
<p>设定频率:49.92HZ</p>
</div> </div>
</div> </div>
<div class="arrow-psition" style="top: 812px; left: 188px"> <div class="arrow-psition" style="top: 812px; left: 188px">
...@@ -273,6 +263,7 @@ export default { ...@@ -273,6 +263,7 @@ export default {
background: url("~@/assets/images/screen/tfxt/line.png") no-repeat center; background: url("~@/assets/images/screen/tfxt/line.png") no-repeat center;
background-size: 90% 95%; background-size: 90% 95%;
background-position-x: 50px; background-position-x: 50px;
font-family: "fangsong";
.fengji { .fengji {
position: absolute; position: absolute;
width: 195px; width: 195px;
...@@ -282,12 +273,15 @@ export default { ...@@ -282,12 +273,15 @@ export default {
color: #ffd200; color: #ffd200;
line-height: 30px; line-height: 30px;
margin: 0; margin: 0;
padding-left: 5px; background: url("~@/assets/images/screen/tfxt/fengjititle.png")
no-repeat center;
text-align: center;
width: 150px;
} }
.fengji-content { .fengji-content {
display: flex; display: flex;
img { img {
width: 141px; width: 149px;
height: 141px; height: 141px;
padding: 10px 18px; padding: 10px 18px;
} }
...@@ -335,7 +329,6 @@ export default { ...@@ -335,7 +329,6 @@ export default {
.fengji-msg { .fengji-msg {
padding: 17px; padding: 17px;
border: 2px solid #00ccff; border: 2px solid #00ccff;
font-family: Source Han Sans SC;
font-weight: 400; font-weight: 400;
font-size: 18px; font-size: 18px;
color: #11e0ff; color: #11e0ff;
...@@ -349,7 +342,7 @@ export default { ...@@ -349,7 +342,7 @@ export default {
&.msg-postion { &.msg-postion {
position: absolute; position: absolute;
top: 30px; top: 30px;
left: -180px; left: -190px;
} }
} }
} }
......
This diff is collapsed.
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