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
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;
} }
......
...@@ -3,20 +3,95 @@ ...@@ -3,20 +3,95 @@
<div class="home"> <div class="home">
<div id="dlxt"> <div id="dlxt">
<div class="dlxt-change"> <div class="dlxt-change">
<span @click="changeBtn(1)" :class="showBtn == 1 ? 'active' : ''">{{ getSubstationName(1) }}</span> <span @click="changeBtn(1)" :class="showBtn == 1 ? 'active' : ''">{{
<span @click="changeBtn(2)" :class="showBtn == 2 ? 'active' : ''">{{ getSubstationName(2) }}</span> statusNames[0].name
}}</span>
<span @click="changeBtn(2)" :class="showBtn == 2 ? 'active' : ''">{{
statusNames[1].name
}}</span>
</div> </div>
<div class="dlxt-bg dlxt-bg1"> <div class="dlxt-bg dlxt-bg1" v-show="showBtn === 1">
<div v-for="(status, index) in statusNames" :key="index" class="dlxt-val" :class="`dlxt-val${index + 1}`" :style="{ color: getColor(status) }"> <!--电柜布局-->
{{ getLabel(status) }} <div
v-for="(item, index) in dgList"
:key="'item1-' + index"
class="dlxt-tit"
:class="`dlxt-tit${index + 1}`"
>
<div :class="index <= 2 ? 'dlxt-dg' : 'dlxt-dg2'"></div>
<p>
<span>{{ item.dgname }}</span>
</p>
<div class="dlxt-list" :class="`dlxt-list${index + 1}`">
<p v-for="param in item.dataList" :key="param.name">
<span>{{ param.name }}</span
>:<span>{{ param.value }}</span
><span>{{ param.unit }}</span>
</p>
</div>
</div> </div>
<!--电表布局-->
<div v-for="(item, index) in eleName" :key="index" class="dlxt-tit" :class="`dlxt-tit${index + 1}`"><p>{{ item }}</p></div> <div
v-for="(item, index) in dbList"
<div v-for="(params, index) in formattedParameters" :key="index" class="dlxt-list" :class="`dlxt-list${index + 1}`"> :key="'item-' + index"
<p v-for="param in params" :key="param.name"> class="dlxt-tit-db"
<span>{{ param.name }}</span>:<span>{{ param.value }}</span><span>{{ param.unit }}</span> :class="`dlxt-tit-db${index + 1}`"
>
<p>
<span>{{ item.dgname }}</span>
</p> </p>
<div class="dlxt-db"></div>
<div class="dlxt-list" :class="`dlxt-list${index + 1}`">
<p v-for="param in item.dataList" :key="param.name">
<span>{{ param.name }}</span
>:<span>{{ param.value }}</span
><span>{{ param.unit }}</span>
</p>
</div>
</div>
</div>
<div class="dlxt-bg dlxt-bg2" v-show="showBtn === 2">
<!--电柜布局-->
<div
class="for-box"
:class="`pos${index + 1}`"
v-for="(item, index) in dgList"
:key="index"
>
<div class="for-box-content"></div>
<div class="for-box-tit">
<p>
<span>{{ item.dgname }}</span>
</p>
</div>
<div class="for-box-list">
<p v-for="param in item.dataList" :key="param.name">
<span>{{ param.name }}</span
>:<span>{{ param.value }}</span
><span>{{ param.unit }}</span>
</p>
</div>
</div>
<!--电表布局-->
<div
class="for-box-db"
:class="`db-pos${index + 1}`"
v-for="(item, index) in dbList"
:key="index"
>
<div class="for-box-db-status">
<span>
{{ item.dgname }}
</span>
</div>
<div class="for-box-db-content"></div>
<div class="for-box-db-list">
<p v-for="param in item.dataList" :key="param.name">
<span>{{ param.name }}</span
>:<span>{{ param.value }}</span
><span>{{ param.unit }}</span>
</p>
</div>
</div> </div>
</div> </div>
</div> </div>
...@@ -25,87 +100,1030 @@ ...@@ -25,87 +100,1030 @@
</template> </template>
<script> <script>
import { eleAll } from "@/api/tyler/screen"; import { updateSelectEleHistoryData } from "@/api/tyler/dlxt";
export default { export default {
name: "dlxt", name: "dlxt",
dicts: ['power_val'], dicts: ["power_val"],
data() { data() {
return { return {
showBtn: 1, showBtn: 1,
eleName: [], eleName: [],
colors: ['#20F09F', '#00FCFF', '#00C6FF'], colors: [
{
status: "遥控指示",
color: "#20F09F",
icon: "icon5",
},
{
status: "就地指示",
color: "#00FCFF",
icon: "icon6",
},
{
status: "故障复位",
color: "#FFC411",
icon: "icon10",
},
],
eleAllData: [], eleAllData: [],
substations: [], substations: [],
formattedParameters: [], formattedParameters: [],
statusNames: [] // 用于存储 eleboxStatusName statusNames: [
{
name: "35变电所",
dglist: [
{
status: "遥控指示",
dgname: "35KV进线柜",
type: "dg",
dataList: [
{
name: "COS",
value: "0.00",
},
{
name: "Ep",
value: "86003048kWh",
},
{
name: "Eq",
value: "86003048kVarh",
},
],
},
{
status: "就地指示",
dgname: "35KVPT",
type: "dg",
dataList: [
{
name: "COS",
value: "0.00",
},
{
name: "Ep",
value: "86003048kWh",
},
{
name: "Eq",
value: "86003048kVarh",
},
],
},
{
status: "故障复位",
dgname: "35KV主变",
type: "dg",
dataList: [
{
name: "UA",
value: "0.00KV",
},
{
name: "UB",
value: "0.00KV",
},
{
name: "UC",
value: "0.00KV",
},
],
},
{
status: "遥控指示",
dgname: "16AH电容",
type: "dg",
dataList: [
{
name: "COS",
value: "0.00",
},
{
name: "Ep",
value: "86003048kWh",
},
{
name: "Eq",
value: "86003048kVarh",
},
],
},
{
status: "就地指示",
dgname: "15AH金沙",
type: "dg",
dataList: [
{
name: "COS",
value: "0.00",
},
{
name: "Ep",
value: "86003048kWh",
},
{
name: "Eq",
value: "86003048kVarh",
},
],
},
{
status: "故障复位",
dgname: "14AH金沙",
type: "dg",
dataList: [
{
name: "COS",
value: "0.00",
},
{
name: "Ep",
value: "86003048kWh",
},
{
name: "Eq",
value: "86003048kVarh",
},
],
},
{
status: "故障复位",
dgname: "13AH金采",
type: "dg",
dataList: [
{
name: "COS",
value: "0.00",
},
{
name: "Ep",
value: "86003048kWh",
},
{
name: "Eq",
value: "86003048kVarh",
},
],
},
],
dblist: [
{
status: "",
dgname: "5AHPT计量",
type: "db",
dataList: [
{
name: "UA",
value: "0.00KV",
},
{
name: "UB",
value: "0.00KV",
},
{
name: "UC",
value: "0.00KV",
},
],
},
{
status: "",
dgname: "1AH站用",
type: "db",
dataList: [
{
name: "la",
value: "64.22A",
},
{
name: "lc",
value: "63.53A",
},
{
name: "p",
value: "1107.20KW",
},
{
name: "Q",
value: "288.00KVAR",
},
{
name: "COS",
value: "0.972",
},
],
},
{
status: "",
dgname: "2AH金西",
type: "db",
dataList: [
{
name: "la",
value: "0.00A",
},
{
name: "lc",
value: "0.00A",
},
{
name: "p",
value: "0.0KW",
},
{
name: "Q",
value: "0.0KVAR",
},
{
name: "COS",
value: "0.000",
},
],
},
{
status: "",
dgname: "3AH金磨Ⅰ",
type: "db",
dataList: [
{
name: "la",
value: "0.00A",
},
{
name: "lc",
value: "0.00A",
},
{
name: "p",
value: "0.0KW",
},
{
name: "Q",
value: "0.0KVAR",
},
{
name: "COS",
value: "0.000",
},
],
},
{
status: "",
dgname: "4AH金磨Ⅱ",
type: "db",
dataList: [
{
name: "la",
value: "0.00A",
},
{
name: "lc",
value: "0.00A",
},
{
name: "p",
value: "0.0KW",
},
{
name: "Q",
value: "0.0KVAR",
},
{
name: "COS",
value: "0.000",
},
],
},
{
status: "",
dgname: "6AH进线",
type: "db",
dataList: [
{
name: "la",
value: "0.00A",
},
{
name: "lc",
value: "0.00A",
},
{
name: "p",
value: "0.0KW",
},
{
name: "Q",
value: "0.0KVAR",
},
{
name: "COS",
value: "0.000",
},
],
},
{
status: "",
dgname: "7AH新金采",
type: "db",
dataList: [
{
name: "la",
value: "0.00A",
},
{
name: "lc",
value: "0.00A",
},
{
name: "p",
value: "0.0KW",
},
{
name: "Q",
value: "0.0KVAR",
},
{
name: "COS",
value: "0.000",
},
],
},
{
status: "",
dgname: "8AH金选",
type: "db",
dataList: [
{
name: "la",
value: "0.00A",
},
{
name: "lc",
value: "0.00A",
},
{
name: "p",
value: "0.0KW",
},
{
name: "Q",
value: "0.0KVAR",
},
{
name: "COS",
value: "0.000",
},
],
},
{
status: "",
dgname: "9AH金修",
type: "db",
dataList: [
{
name: "la",
value: "0.00A",
},
{
name: "lc",
value: "0.00A",
},
{
name: "p",
value: "0.0KW",
},
{
name: "Q",
value: "0.0KVAR",
},
{
name: "COS",
value: "0.000",
},
],
},
{
status: "",
dgname: "10AH金碎",
type: "db",
dataList: [
{
name: "la",
value: "0.00A",
},
{
name: "lc",
value: "0.00A",
},
{
name: "p",
value: "0.0KW",
},
{
name: "Q",
value: "0.0KVAR",
},
{
name: "COS",
value: "0.000",
},
],
},
{
status: "",
dgname: "11AH备1",
type: "db",
dataList: [
{
name: "la",
value: "0.00A",
},
{
name: "lc",
value: "0.00A",
},
{
name: "p",
value: "0.0KW",
},
{
name: "Q",
value: "0.0KVAR",
},
{
name: "COS",
value: "0.000",
},
],
},
{
status: "",
dgname: "12AH朱金",
type: "db",
dataList: [
{
name: "la",
value: "0.00A",
},
{
name: "lc",
value: "0.00A",
},
{
name: "p",
value: "0.0KW",
},
{
name: "Q",
value: "0.0KVAR",
},
{
name: "COS",
value: "0.000",
},
],
},
],
},
{
name: "小高尖开关室",
dglist: [
{
status: "遥控指示",
dgname: "1AH主电源",
type: "dg",
dataList: [
{
name: "la",
value: "64.22A",
},
{
name: "lc",
value: "63.53A",
},
{
name: "P",
value: "1107.20KW",
},
{
name: "Q",
value: "288.00KVAR",
},
{
name: "COS",
value: "0.972",
},
{
name: "EP",
value: "53879640KWh",
},
{
name: "Eq",
value: "25341000KVarh",
},
],
},
{
status: "就地指示",
dgname: "10AH双电源",
type: "dg",
dataList: [
{
name: "la",
value: "64.22A",
},
{
name: "lc",
value: "63.53A",
},
{
name: "P",
value: "1107.20KW",
},
{
name: "Q",
value: "288.00KVAR",
},
{
name: "COS",
value: "0.972",
},
{
name: "EP",
value: "53879640KWh",
},
{
name: "Eq",
value: "25341000KVarh",
},
],
},
{
status: "故障复位",
dgname: "15AH金银联",
type: "dg",
dataList: [
{
name: "la",
value: "64.22A",
},
{
name: "lc",
value: "63.53A",
},
{
name: "P",
value: "1107.20KW",
},
{
name: "Q",
value: "288.00KVAR",
},
{
name: "COS",
value: "0.972",
},
{
name: "EP",
value: "53879640KWh",
},
{
name: "Eq",
value: "25341000KVarh",
},
],
},
],
dblist: [
{
status: "",
dgname: "2AHPT计量",
type: "db",
dataList: [
{
name: "la",
value: "64.22A",
},
{
name: "lc",
value: "63.53A",
},
{
name: "p",
value: "1107.20KW",
},
{
name: "Q",
value: "288.00KVAR",
},
{
name: "COS",
value: "0.972",
},
{
name: "EP",
value: "53879640KWh",
},
],
},
{
status: "",
dgname: "3AH二中西",
type: "db",
dataList: [
{
name: "la",
value: "64.22A",
},
{
name: "lc",
value: "63.53A",
},
{
name: "p",
value: "1107.20KW",
},
{
name: "Q",
value: "288.00KVAR",
},
{
name: "COS",
value: "0.972",
},
{
name: "EP",
value: "53879640KWh",
},
],
},
{
status: "",
dgname: "4AH五中出",
type: "db",
dataList: [
{
name: "la",
value: "64.22A",
},
{
name: "lc",
value: "63.53A",
},
{
name: "p",
value: "1107.20KW",
},
{
name: "Q",
value: "288.00KVAR",
},
{
name: "COS",
value: "0.972",
},
{
name: "EP",
value: "53879640KWh",
},
],
},
{
status: "",
dgname: "5AH地变出",
type: "db",
dataList: [
{
name: "la",
value: "64.22A",
},
{
name: "lc",
value: "63.53A",
},
{
name: "p",
value: "1107.20KW",
},
{
name: "Q",
value: "288.00KVAR",
},
{
name: "COS",
value: "0.972",
},
{
name: "EP",
value: "53879640KWh",
},
],
},
{
status: "",
dgname: "6AH备用出",
type: "db",
dataList: [
{
name: "la",
value: "64.22A",
},
{
name: "lc",
value: "63.53A",
},
{
name: "p",
value: "1107.20KW",
},
{
name: "Q",
value: "288.00KVAR",
},
{
name: "COS",
value: "0.972",
},
{
name: "EP",
value: "53879640KWh",
},
],
},
{
status: "",
dgname: "7AH电容出",
type: "db",
dataList: [
{
name: "la",
value: "64.22A",
},
{
name: "lc",
value: "63.53A",
},
{
name: "p",
value: "1107.20KW",
},
{
name: "Q",
value: "288.00KVAR",
},
{
name: "COS",
value: "0.972",
},
{
name: "EP",
value: "53879640KWh",
},
],
},
{
status: "",
dgname: "8AH备用出",
type: "db",
dataList: [
{
name: "la",
value: "64.22A",
},
{
name: "lc",
value: "63.53A",
},
{
name: "p",
value: "1107.20KW",
},
{
name: "Q",
value: "288.00KVAR",
},
{
name: "COS",
value: "0.972",
},
{
name: "EP",
value: "53879640KWh",
},
],
},
{
status: "",
dgname: "9AH备用1",
type: "db",
dataList: [
{
name: "la",
value: "64.22A",
},
{
name: "lc",
value: "63.53A",
},
{
name: "p",
value: "1107.20KW",
},
{
name: "Q",
value: "288.00KVAR",
},
{
name: "COS",
value: "0.972",
},
{
name: "EP",
value: "53879640KWh",
},
],
},
{
status: "",
dgname: "11AH备用2",
type: "db",
dataList: [
{
name: "la",
value: "64.22A",
},
{
name: "lc",
value: "63.53A",
},
{
name: "p",
value: "1107.20KW",
},
{
name: "Q",
value: "288.00KVAR",
},
{
name: "COS",
value: "0.972",
},
{
name: "EP",
value: "53879640KWh",
},
],
},
{
status: "",
dgname: "12AH二中东",
type: "db",
dataList: [
{
name: "la",
value: "64.22A",
},
{
name: "lc",
value: "63.53A",
},
{
name: "p",
value: "1107.20KW",
},
{
name: "Q",
value: "288.00KVAR",
},
{
name: "COS",
value: "0.972",
},
{
name: "EP",
value: "53879640KWh",
},
],
},
{
status: "",
dgname: "13AH卷扬出",
type: "db",
dataList: [
{
name: "la",
value: "64.22A",
},
{
name: "lc",
value: "63.53A",
},
{
name: "p",
value: "1107.20KW",
},
{
name: "Q",
value: "288.00KVAR",
},
{
name: "COS",
value: "0.972",
},
{
name: "EP",
value: "53879640KWh",
},
],
},
{
status: "",
dgname: "14AH原风变",
type: "db",
dataList: [
{
name: "la",
value: "64.22A",
},
{
name: "lc",
value: "63.53A",
},
{
name: "p",
value: "1107.20KW",
},
{
name: "Q",
value: "288.00KVAR",
},
{
name: "COS",
value: "0.972",
},
{
name: "EP",
value: "53879640KWh",
},
],
},
],
},
], // 用于存储 eleboxStatusName
dgList: [],
dbList: [],
}; };
}, },
created() { created() {
this.eleAllList(); this.init();
}, },
methods: { methods: {
changeBtn(val) { init() {
this.showBtn = val; this.getdata();
const substation = this.substations.find(s => s.index === val);
if (substation) {
this.eleName = substation.eleNames;
this.formattedParameters = substation.parameters;
this.statusNames = substation.statusNames;
}
},
getSubstationName(val) {
const substation = this.substations.find(s => s.index === val);
return substation ? substation.name : 'XX变电站';
},
getLabel(value) {
const item = this.dict.type.power_val.find(item => item.value === value);
return item ? item.label : '暂无数据';
}, },
getColor(value) { getdata() {
const index = this.dict.type.power_val.findIndex(item => item.value === value); updateSelectEleHistoryData({ name: this.statusNames[0].name }).then(
return index !== -1 && this.colors[index] ? this.colors[index] : '#fff'; (res) => {
console.log(res);
}
);
this.dgList = this.statusNames[0].dglist;
this.dbList = this.statusNames[0].dblist;
}, },
eleAllList() { changeBtn(index) {
eleAll().then(res => { this.showBtn = index;
this.eleAllData = res.data; this.dgList = this.statusNames[index - 1].dglist.map((el) => {
this.processData(res.data); const matchedColor = this.colors.find(
(item) => item.status === el.status
);
return {
...el,
color: matchedColor ? matchedColor.color : "#fff", // 提供默认颜色
icon: matchedColor ? matchedColor.icon : "",
};
}); });
}, this.dbList = this.statusNames[index - 1].dblist.map((el) => {
processData(data) { const matchedColor = this.colors.find(
this.substations = data.map((item, index) => { (item) => item.status === el.status
const eleNames = item.data.eleboxNameList.map(ele => ele.eleboxName); );
const parameters = item.data.eleboxNameList.map(ele => {
return ele.eleboxParameterList.map(param => ({
name: param.eleboxParameterName.toLowerCase(),
value: param.eleboxParameterValue,
unit: param.eleboxParameterUnits
}));
});
const statusNames = item.data.eleboxNameList.map(ele => ele.eleboxStatusName);
return { return {
index: index + 1, ...el,
name: item.name, color: matchedColor ? matchedColor.color : "#fff", // 提供默认颜色
eleNames, icon: matchedColor ? matchedColor.icon : "",
parameters,
statusNames
}; };
}); });
},
// 默认显示第一个变电站的数据 },
if (this.substations.length > 0) {
this.eleName = this.substations[0].eleNames;
this.formattedParameters = this.substations[0].parameters;
this.statusNames = this.substations[0].statusNames;
}
}
}
}; };
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
p{margin: 0;padding: 0;} p {
margin: 0;
padding: 0;
}
.home { .home {
width: 100%; width: 100%;
height: 100%; height: 100%;
...@@ -114,16 +1132,17 @@ p{margin: 0;padding: 0;} ...@@ -114,16 +1132,17 @@ p{margin: 0;padding: 0;}
padding-top: 160px; padding-top: 160px;
overflow: hidden; overflow: hidden;
pointer-events: auto; pointer-events: auto;
#dlxt{ font-family: "fangsong";
.dlxt-change{ #dlxt {
.dlxt-change {
width: 100%; width: 100%;
height: 36px; height: 36px;
display: flex; display: flex;
justify-content: center; justify-content: center;
color:#fff; color: #fff;
align-items: center; align-items: center;
margin-bottom: 32px; margin-bottom: 32px;
span{ span {
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
...@@ -131,122 +1150,374 @@ p{margin: 0;padding: 0;} ...@@ -131,122 +1150,374 @@ p{margin: 0;padding: 0;}
height: 36px; height: 36px;
font-size: 20px; font-size: 20px;
font-weight: bold; font-weight: bold;
background-color: rgba(10, 30, 54,.5); background-color: rgba(10, 30, 54, 0.5);
border: 1px solid #00FCFF; border: 1px solid #00fcff;
cursor: pointer; cursor: pointer;
&.active{ &.active {
background: linear-gradient(0deg, #1679B6 0%, #00DEE9 100%); background: linear-gradient(0deg, #1679b6 0%, #00dee9 100%);
border: 1px solid #00FCFF; border: 1px solid #00fcff;
} }
} }
} }
.dlxt-bg{ .dlxt-bg {
width: 1830px; width: 1830px;
height: 792px; height: 792px;
margin: 0 auto; margin: 0 auto;
background: url("~@/assets/images/screen/dlxt/bg2.png") no-repeat center;
background-size: 100%; color: #fff;
color:#fff;
position: relative; position: relative;
.dlxt-val{ .dlxt-tit {
position: absolute; position: absolute;
top:100px; top: 20px;
width: 181px;
padding-top: 38px;
.dlxt-val {
text-align: center;
i {
display: inline-block;
width: 14px;
height: 14px;
margin-right: 5px;
margin-bottom: -1px;
}
}
.dlxt-dg {
width: 181px;
height: 202px;
background: url("~@/assets/images/screen/dlxt/3.png") no-repeat center;
background-size: 100%;
margin-bottom: 10px;
}
.dlxt-dg2 {
width: 181px;
height: 202px;
background: url("~@/assets/images/screen/dlxt/4.png") no-repeat center;
background-size: 100%;
margin-bottom: 10px;
}
p {
font-weight: bold;
font-size: 20px;
color: #ffffff;
line-height: 38px;
text-align: center;
background: url("~@/assets/images/screen/dlxt/title.png") no-repeat
center;
background-size: 100%;
span {
background: linear-gradient(180deg, #ffffff 0%, #00cbff 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
}
.dlxt-list {
border: 2px solid #00ccff;
box-sizing: border-box;
padding: 10px;
margin-top: 5px;
p {
background: none;
margin: 0px;
padding: 0px;
font-weight: 400;
font-size: 18px;
color: #11e0ff;
line-height: 25px;
text-align: left;
}
}
} }
.dlxt-tit{ .dlxt-tit-db {
position: absolute; position: absolute;
top:270px; top: 560px;
width: 230px; width: 122px;
.dlxt-db {
width: 96px;
height: 123px;
background: url("~@/assets/images/screen/dlxt/1.png") no-repeat center;
background-size: 100%;
}
p {
font-weight: bold;
font-size: 18px;
color: #ffc411;
text-align: center;
background-size: 100%;
margin-bottom: -10px;
margin-top: 5px;
}
.dlxt-list {
padding: 10px;
p {
background: none;
margin: 0px;
padding: 0px;
font-weight: 400;
font-size: 18px;
color: #11e0ff;
text-align: left;
}
}
}
.dlxt-tit-db1 {
position: absolute;
top: 250px;
width: 122px;
height: 38px; height: 38px;
background: url("~@/assets/images/screen/dlxt/title.png") no-repeat center; left: 730px;
.dlxt-val {
text-align: center;
}
.dlxt-db {
width: 113px;
height: 133px;
background: url("~@/assets/images/screen/dlxt/2.png") no-repeat center;
background-size: 100%;
margin-bottom: 10px;
margin: auto;
}
.dlxt-list {
border: 2px solid #00ccff;
box-sizing: border-box;
padding: 10px;
margin-top: 5px;
p {
background: none;
margin: 0px;
padding: 0px;
font-weight: 400;
font-size: 18px;
color: #11e0ff;
line-height: 25px;
text-align: left;
}
}
}
.dlxt-tit-db2 {
left: 0px;
}
.dlxt-tit-db3 {
left: 175px;
}
.dlxt-tit-db4 {
left: 350px;
}
.dlxt-tit-db5 {
left: 524px;
}
.dlxt-tit-db6 {
left: 695px;
}
.dlxt-tit-db7 {
left: 865px;
}
.dlxt-tit-db8 {
left: 1035px;
}
.dlxt-tit-db9 {
left: 1205px;
}
.dlxt-tit-db10 {
left: 1375px;
}
.dlxt-tit-db11 {
left: 1545px;
}
.dlxt-tit-db12 {
left: 1715px;
}
.dlxt-tit-db13 {
left: 1915px;
}
}
.dlxt-bg1 {
background: url("~@/assets/images/screen/dlxt/bg2.png") no-repeat center;
background-size: 100%;
background-position-y: 0;
.dlxt-tit1 {
left: 6px;
}
.dlxt-tit2 {
left: 240px;
}
.dlxt-tit3 {
left: 460px;
}
.dlxt-tit4 {
left: 925px;
}
.dlxt-tit5 {
left: 1155px;
}
.dlxt-tit6 {
left: 1400px;
}
.dlxt-tit7 {
left: 1630px;
}
}
.dlxt-bg2 {
background: url("~@/assets/images/screen/dlxt/bg1.png") no-repeat center;
background-size: 100%;
background-position-y: 260px;
}
.for-box {
width: 170px;
position: absolute;
top: -10px;
padding-top: 25px;
.for-box-content {
width: 181px;
height: 202px;
background: url("~@/assets/images/screen/dlxt/3.png") no-repeat center;
background-size: 100%; background-size: 100%;
p{ margin-bottom: 10px;
}
.for-box-tit {
p {
font-weight: bold; font-weight: bold;
font-size: 20px; font-size: 20px;
color: #FFFFFF; color: #ffffff;
line-height: 38px; line-height: 38px;
text-align: center; text-align: center;
background: linear-gradient(180deg, #FFFFFF 0%, #00CBFF 100%); background: url("~@/assets/images/screen/dlxt/title.png") no-repeat
-webkit-background-clip: text; center;
-webkit-text-fill-color: transparent; background-size: 100%;
span {
background: linear-gradient(180deg, #ffffff 0%, #00cbff 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
} }
} }
.dlxt-list{ .for-box-list {
width: 180px; border: 2px solid #00ccff;
border: 2px solid #00CCFF;
padding: 13px 20px;
box-sizing: border-box; box-sizing: border-box;
padding: 10px;
margin-top: 5px;
position: absolute; position: absolute;
top:340px; top: 25px;
display: flex; left: 200px;
flex-direction: column; p {
font-weight: 400; background: none;
font-size: 18px; margin: 0px;
color: #11E0FF; padding: 0px;
line-height: 30px; font-weight: 400;
} font-size: 18px;
} color: #11e0ff;
.dlxt-bg1{ line-height: 25px;
.dlxt-val1{ text-align: left;
left:190px; }
} }
.dlxt-val2{ &.pos1 {
left:490px; left: 165px;
} }
.dlxt-val3{ &.pos2 {
left:790px; left: 915px;
} }
.dlxt-val4{ &.pos3 {
left:970px; left: 1385px;
} }
.dlxt-val5{ }
left:1270px;
.for-box-db {
width: 96;
position: absolute;
padding-top: 10px;
.for-box-db-status {
width: 96;
text-align: center;
font-weight: 400;
font-size: 18px;
color: #ffc411;
} }
.dlxt-val6{ .for-box-db-content {
left:1570px; width: 96px;
height: 123px;
background: url("~@/assets/images/screen/dlxt/1.png") no-repeat center;
background-size: 100%;
margin: auto;
margin-bottom: 10px;
} }
.dlxt-tit1{ .for-box-db-list {
left: 6px; margin-top: 5px;
position: absolute;
p {
background: none;
margin: 0px;
padding: 0px;
font-weight: 400;
font-size: 18px;
color: #11e0ff;
line-height: 25px;
text-align: left;
}
} }
.dlxt-tit2{ &.db-pos1 {
left: 300px; top: 320px;
left: 10px;
} }
.dlxt-tit3{ &.db-pos2 {
left: 600px; top: 470px;
left: 185px;
} }
.dlxt-tit4{ &.db-pos3 {
left: 1000px; top: 320px;
left: 320px;
} }
.dlxt-tit5{ &.db-pos4 {
left: 1300px; top: 470px;
left: 500px;
} }
.dlxt-tit6{ &.db-pos5 {
left: 1600px; top: 320px;
left: 630px;
} }
.dlxt-list1{ &.db-pos6 {
left: 30px; top: 470px;
left: 810px;
} }
.dlxt-list2{ &.db-pos7 {
left: 330px; top: 320px;
left: 945px;
} }
.dlxt-list3{ &.db-pos8 {
left: 630px; top: 470px;
left: 1120px;
} }
.dlxt-list4{ &.db-pos9 {
left: 1030px; top: 320px;
left: 1260px;
} }
.dlxt-list5{ &.db-pos10 {
left: 1330px; top: 470px;
left: 1430px;
} }
.dlxt-list6{ &.db-pos11 {
left: 1630px; top: 320px;
left: 1565px;
}
&.db-pos12 {
top: 470px;
left: 1740px;
} }
} }
} }
.icon5 {
background: url("~@/assets/images/screen/dlxt/5.png") no-repeat center;
background-size: 100%;
}
.icon6 {
background: url("~@/assets/images/screen/dlxt/6.png") no-repeat center;
background-size: 100%;
}
.icon10 {
background: url("~@/assets/images/screen/dlxt/10.png") no-repeat center;
background-size: 100%;
}
} }
</style> </style>
...@@ -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;
} }
} }
} }
......
<template> <template>
<div class="main-content"> <div class="main-content">
<!-- 左侧数据区 -->
<div class="left"> <div class="left">
<div class="item-class" v-for="item in leftList" :key="item.name"> <div class="item-class" v-for="item in leftList" :key="item.name">
<i class="icon" :class="item.icon"></i> <i class="icon" :class="item.icon"></i>
<span class="item-name">{{ item.name }}</span> <span class="item-name" :style="{ color: item.color }">{{
item.name
}}</span>
<span class="item-value">{{ item.value }}</span> <span class="item-value">{{ item.value }}</span>
</div> </div>
<div class="left-botton"> <div class="left-botton">
<span class="item-name">主控<br />位置</span> <span class="item-name">主控<br />位置</span>
<span class="item-value">0.00</span> <span class="item-value">
<count-to
:start-val="0"
:end-val="Number(zgposition)"
:duration="860"
:decimals="2"
separator=","
/>
</span>
</div> </div>
</div> </div>
<!-- 中央电梯模拟区 -->
<div class="center"> <div class="center">
<div class="center-box"> <div class="center-box">
<div class="dianti-target" style="top: 300px; left: 170px">去井口</div> <div class="dianti-target" :style="targetStyle">{{ displayTrend }}</div>
<div class="dianti-peizhong" style="top: 150px; left: 365px"></div> <div class="dianti-peizhong" :style="counterweightStyle"></div>
<div class="dianti-box" style="top: 450px; left: 413px"></div> <div
class="dianti-box"
:class="{ active: isMoving }"
:style="elevatorStyle"
></div>
<div class="dianti-louceng" style="top: 290px; left: 526px"> <div class="dianti-louceng" style="top: 290px; left: 526px">
<div class="louceng-item">一中</div> <div
<div class="louceng-item">二中</div> class="louceng-item"
<div class="louceng-item">三中</div> v-for="(floor, index) in floors"
<div class="louceng-item">四中</div> :key="index"
<div class="louceng-item">五中</div> >
{{ floor }}
</div>
</div> </div>
</div> </div>
</div> </div>
<!-- 右侧状态区 -->
<div class="right"> <div class="right">
<div class="right-item-class" v-for="item in rightList" :key="item.name"> <div
class="right-item-class"
v-for="(item, index) in rightList"
:key="'right-' + index"
>
<div class="left-item-box">{{ item.name }}</div> <div class="left-item-box">{{ item.name }}</div>
<div class="right-item-box"> <div class="right-item-box">
<div class="right-item-box-item">{{ item.value1 }}</div> <div
<div class="right-item-box-item">{{ item.value2 }}</div> class="right-item-box-item"
<div class="right-item-box-item">{{ item.value3 }}</div> v-for="(value, subIndex) in [
<div class="right-item-box-item">{{ item.value4 }}</div> item.value1,
item.value2,
item.value3,
item.value4,
]"
:key="'value-' + index + '-' + subIndex"
:class="{ active: value.status == 1 }"
>
{{ value.name }}
</div>
</div> </div>
</div> </div>
<div class="right-item-botton"> <div class="right-item-botton">
<div class="title">井下人工安全巡检</div> <div class="title">井下人工安全巡检</div>
<div class="right-item-body"> <div class="right-item-body">
<div class="table-header"> <div class="table-header">
<span>检查人</span> <span v-for="(header, index) in tableHeaders" :key="index">{{
<span>检查点位</span> header
<span>是否正常</span> }}</span>
<span>日期</span>
</div> </div>
<div class="table-content" v-for="item in tableList" :key="item.name"> <div
class="table-content"
v-for="(item, index) in tableList"
:key="'table-' + index"
>
<span>{{ item.name }}</span> <span>{{ item.name }}</span>
<span>{{ item.point }}</span> <span>{{ item.point }}</span>
<span>{{ item.isNormal }}</span> <span>{{ item.isNormal }}</span>
...@@ -57,110 +94,416 @@ ...@@ -57,110 +94,416 @@
</template> </template>
<script> <script>
import CountTo from "vue-count-to";
import { getElevatorData } from "@/api/tyler/jst";
// 修改位置配置常量(添加中间点容差)
const POSITIONS = [
{
name: "去井口",
value: 0,
depth: 0,
glposy: 76,
pzposy: 673,
range: [-205, 0],
},
{
name: "去一中",
value: 1,
depth: 410,
glposy: 253,
pzposy: 578,
range: [-430, -206],
},
{
name: "去二中",
value: 2,
depth: 450,
glposy: 338,
pzposy: 491,
range: [-470, -431],
},
{
name: "去三中",
value: 3,
depth: 490,
glposy: 422,
pzposy: 415,
range: [-510, -471],
},
{
name: "去四中",
value: 4,
depth: 530,
glposy: 506,
pzposy: 325,
range: [-550, -511],
},
{
name: "去五中",
value: 5,
depth: 570,
glposy: 596,
pzposy: 156,
range: [-999, -551],
},
];
export default { export default {
name: "", components: { CountTo },
props: {},
components: {},
data() { data() {
return { return {
leftList: [ // 数据列表
{ icon: "icon1", name: "主控速度", value: "0.00m/s" }, leftList: [],
{ icon: "icon1", name: "编码器速度", value: "0.00m/s" }, rightList: [],
{ icon: "icon1", name: "给定速度", value: "0.00m/s" }, tableList: [
{ icon: "icon1", name: "从编码器速度", value: "0.00m/s" }, {
{ icon: "icon2", name: "主罐位置", value: "0.00m" }, name: "zhangsan",
{ icon: "icon2", name: "位置偏差", value: "0.00m" }, point: "123",
{ icon: "icon3", name: "电枢电流", value: "0.00A" }, isNormal: "正常",
{ icon: "icon3", name: "磁场电流", value: "-0.08A" }, date: "2023-01-01",
{ icon: "icon1", name: "运行油压", value: "0.08MPa" }, },
], ],
rightList: [
// 电梯状态
zgposition: 0,
zgtrend: "待命",
isMoving: false,
// 动画控制
animationId: null,
timer: null,
// 位置信息
currentPos: null,
targetPos: null,
// 静态配置
floors: ["一中", "二中", "三中", "四中", "五中"],
tableHeaders: ["检查人", "检查点位", "是否正常", "日期"],
};
},
computed: {
// 电梯状态显示
displayTrend() {
return this.zgtrend.includes("待命")
? `${this.zgtrend}`
: `前往:${this.zgtrend}`;
},
// 电梯目标样式
targetStyle() {
return {
top: "300px",
left: "170px",
backgroundColor: this.zgtrend.includes("待命") ? "#999" : "#fecb00",
};
},
// 电梯位置样式
elevatorStyle() {
return this.calculatePosition("glposy");
},
// 配重位置样式
counterweightStyle() {
return this.calculatePosition("pzposy");
},
},
watch: {},
created() {
this.startAutoUpdate(); // 在created中启动定时器
},
beforeDestroy() {
this.clearAnimation();
clearInterval(this.timer);
},
mounted() {
this.initPositions();
this.startAutoUpdate();
},
methods: {
// 初始化位置数据
initPositions() {
this.currentPos = POSITIONS[0];
this.targetPos = POSITIONS[0];
},
// 计算当前位置
calculatePosition(type) {
if (!POSITIONS.length) return { top: "450px", left: "413px" };
const currentDepth = Number(this.zgposition) || 0;
// 添加安全判断
const position =
(this.zgtrend === "待命"
? this.findNearestPosition(currentDepth)
: this.calculateMovingPosition(type, currentDepth)) || POSITIONS[0];
return {
top: `${position[type] || POSITIONS[0][type]}px`, // 添加默认值
left: type === "glposy" ? "413px" : "365px",
};
},
// 加强查找方法的安全性
findNearestPosition(depth) {
console.log(depth, "当前深度");
// 处理负数区间匹配
const rangeMatch = POSITIONS.find(
(p) => depth >= p.range[0] && depth <= p.range[1]
);
console.log("负数区间匹配结果:", rangeMatch?.name);
if (rangeMatch) return rangeMatch;
console.log("区间匹配结果:", rangeMatch?.name);
// 无区间匹配时找最近深度(使用原始深度值)
return POSITIONS.reduce(
(prev, curr) =>
Math.abs(curr.depth - Math.abs(depth)) <
Math.abs(prev.depth - Math.abs(depth))
? curr
: prev,
POSITIONS[0]
);
},
// 查找最近楼层
// 统一后的查找方法
findNearestPosition(depth) {
console.log("当前深度:", depth);
// 优先匹配区间范围
const rangeMatch = POSITIONS.find(
(p) => depth >= p.range[0] && depth <= p.range[1]
);
console.log("区间匹配结果:", rangeMatch?.name);
if (rangeMatch) return rangeMatch;
// 无区间匹配时找最近深度
return POSITIONS.reduce(
(prev, curr) =>
Math.abs(curr.depth - depth) < Math.abs(prev.depth - depth)
? curr
: prev,
POSITIONS[0]
);
},
// 计算移动中的位置
calculateMovingPosition(type, currentDepth) {
const nearest = this.findNearestPosition(currentDepth);
// 添加位置强制更新
this.currentPos = nearest;
this.targetPos = this.targetPos;
const progress = Math.min(
1,
Math.abs(currentDepth - nearest.depth) /
Math.abs(this.targetPos.depth - nearest.depth)
);
return {
...nearest,
[type]:
nearest[type] + (this.targetPos[type] - nearest[type]) * progress,
};
},
// 启动自动更新
startAutoUpdate() {
this.clearAnimation();
this.getdata();
this.timer = setInterval(this.getdata, 30000);
},
// 获取数据
async getdata() {
try {
const res = await getElevatorData();
if (res.code === 200) {
this.processData(res.rows[0]);
this.updateElevatorStatus(res.rows[0]);
this.moveElevator();
}
} catch (error) {
console.error("数据获取失败:", error);
}
},
// 处理数据更新
processData(data) {
// 左侧数据列表
this.leftList = [
{ {
name: "硬件条件", icon: "icon1",
value1: "运行准备", name: "主控速度",
value2: "主风机启", value: `${Number(data.mainSpeed).toFixed(2)}m/s`,
value3: "变流器启", color: "#00FEEF",
value4: "液压站启",
}, },
{ {
name: "安全保护", icon: "icon1",
value1: "硬件安全", name: "编码器速度",
value2: "软件安全", value: `${Number(data.coderSpeed).toFixed(2)}m/s`,
value3: "操作台安全", color: "#00FEEF",
value4: "轻故障",
}, },
{ {
name: "信号方向", icon: "icon1",
value1: "井口信号", name: "给定速度",
value2: "信号继电器", value: `${Number(data.givenSpeed).toFixed(2)}m/s`,
value3: "选择正向", color: "#00FEEF",
value4: "选择反向",
}, },
{ {
name: "闸回路", icon: "icon1",
value1: "手动闸", name: "从编码器速度",
value2: "工作闸", value: `${Number(data.givenSpeed).toFixed(2)}m/s`,
value3: "全敞闸", color: "#00FEEF",
value4: "一级制动",
}, },
{ {
name: "开车回路", icon: "icon2",
value1: "选低速", name: "主罐位置",
value2: "使能输出", value: `${Number(data.position).toFixed(2)}m`,
value3: "装置解封", color: "#26DEFF",
value4: "系统减速",
}, },
],
tableList: [
{ {
name: "张三", icon: "icon2",
point: "中段12", name: "位置偏差",
isNormal: "正常", value: `${Number(data.locationDeviation).toFixed(2)}m`,
date: "2023-01-01", color: "#26DEFF",
}, },
{ {
name: "张三", icon: "icon3",
point: "中段12", name: "电枢电流",
isNormal: "正常", value: `${Number(data.motorCurrent).toFixed(2)}A`,
date: "2023-01-01", color: "#FECB00",
}, },
{ {
name: "张三", icon: "icon3",
point: "中段12", name: "磁场电流",
isNormal: "正常", value: `${Number(data.runningPressure).toFixed(2)}A`,
date: "2023-01-01", color: "#FECB00",
}, },
{ {
name: "张三", icon: "icon1",
point: "中段12", name: "运行油压",
isNormal: "正常", value: `${Number(data.controlPosition).toFixed(2)}MPa`,
date: "2023-01-01", color: "#3AFF7B",
}, },
];
// 右侧数据列表
this.rightList = [
{ {
name: "张三", name: "硬件条件",
point: "中段12", value1: { name: "运行准备", status: data.runPrepare },
isNormal: "正常",
date: "2023-01-01", value2: { name: "主风机启", status: data.mainFan },
value3: { name: "变流器启", status: data.transformer },
value4: {
name: "液压站启",
status: data.hydraulicStation,
},
}, },
{ {
name: "张三", name: "安全保护",
point: "中段12", value1: {
isNormal: "正常", name: "硬件安全",
date: "2023-01-01", status: data.hardwareSecurity,
},
value2: {
name: "软件安全",
status: data.hardwareSecurity,
},
value3: { name: "操作台安全", status: data.consoleSafety },
value4: { name: "轻故障", status: data.minorMalfunction },
}, },
], {
}; name: "信号方向",
value1: { name: "井口信号", status: data.wellheadSignal },
value2: { name: "信号继电器", status: data.signalRelay },
value3: { name: "选择正向", status: data.chooseForward },
value4: { name: "选择反向", status: data.chooseReverse },
},
{
name: "闸回路",
value1: { name: "手动闸", status: data.manualGate },
value2: { name: "工作闸", status: data.workGate },
value3: { name: "全敞闸", status: data.openGate },
value4: { name: "一级制动", status: data.firstBraking },
},
{
name: "开车回路",
value1: { name: "选低速", status: data.lowSpeed },
value2: { name: "使能输出", status: data.enableOutput },
value3: { name: "装置解封", status: data.deviceUnsealed },
value4: { name: "系统减速", status: data.systemSlowdown },
},
];
this.zgposition = (Number(data.position) || 0).toFixed(2);
},
// 更新电梯状态
updateElevatorStatus(data) {
if (!data.currentAction) {
const currentDepth = Number(data.position) || 0;
const nearest = this.findNearestPosition(currentDepth);
// 强制更新当前位置
this.currentPos = nearest; // 新增
this.targetPos = nearest; // 新增
this.zgtrend = `待命(${nearest.name})`;
this.isMoving = false;
} else {
this.targetPos =
POSITIONS.find((item) => item.value == data.currentAction) ||
POSITIONS[0];
this.zgtrend = this.targetPos.name;
this.isMoving = true;
}
},
// 电梯移动动画
moveElevator() {
if (!this.isMoving) return;
this.clearAnimation();
const startTime = Date.now();
const startPosition = Number(this.zgposition);
const targetDepth = this.targetPos.depth;
const distance = targetDepth - startPosition;
const duration = Math.abs(distance) * 10; // 根据距离计算动画时长
const animate = () => {
const progress = Math.min(1, (Date.now() - startTime) / duration);
// 实时更新电梯位置
this.zgposition = (startPosition + distance * progress).toFixed(2);
// 到达目标位置后更新状态
if (progress < 1) {
this.animationId = requestAnimationFrame(animate);
} else {
this.isMoving = false;
this.zgtrend = `待命(${this.targetPos.name})`;
this.currentPos = this.targetPos;
}
};
animate();
},
// 清除动画
clearAnimation() {
if (this.animationId) {
cancelAnimationFrame(this.animationId);
this.animationId = null;
}
},
}, },
computed: {},
watch: {},
created() {},
mounted() {},
methods: {},
}; };
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
.main-content { .main-content {
font-family: "fangsong";
background: url("~@/assets/images/screen/tfxt/bg.png") no-repeat center; background: url("~@/assets/images/screen/tfxt/bg.png") no-repeat center;
padding-top: 100px; padding-top: 100px;
display: flex; // 新增弹性布局 display: flex; // 新增弹性布局
...@@ -179,11 +522,23 @@ export default { ...@@ -179,11 +522,23 @@ export default {
width: 50px; width: 50px;
height: 50px; height: 50px;
display: inline-block; display: inline-block;
background: url("~@/assets/images/screen/tsj/icon1.png") no-repeat
center;
background-size: 100% 100%;
margin-left: 15px; margin-left: 15px;
vertical-align: middle; // 新增垂直对齐 vertical-align: middle; // 新增垂直对齐
&.icon1 {
background: url("~@/assets/images/screen/tsj/icon1.png") no-repeat
center;
background-size: 100% 100%;
}
&.icon2 {
background: url("~@/assets/images/screen/tsj/icon2.png") no-repeat
center;
background-size: 100% 100%;
}
&.icon3 {
background: url("~@/assets/images/screen/tsj/icon3.png") no-repeat
center;
background-size: 100% 100%;
}
} }
.item-name { .item-name {
margin-left: 15px; margin-left: 15px;
...@@ -275,6 +630,7 @@ export default { ...@@ -275,6 +630,7 @@ export default {
background: url("~@/assets/images/screen/tsj/bg4.png") no-repeat center; background: url("~@/assets/images/screen/tsj/bg4.png") no-repeat center;
background-size: 100% 100%; background-size: 100% 100%;
position: absolute; position: absolute;
transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
} }
.dianti-box { .dianti-box {
width: 78px; width: 78px;
...@@ -282,7 +638,31 @@ export default { ...@@ -282,7 +638,31 @@ export default {
background: url("~@/assets/images/screen/tsj/bg3.png") no-repeat center; background: url("~@/assets/images/screen/tsj/bg3.png") no-repeat center;
background-size: 100% 100%; background-size: 100% 100%;
position: absolute; position: absolute;
transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
&.active {
&::before {
content: "";
width: 16px;
height: 26px;
position: absolute;
top: 0;
left: 0;
background: url("~@/assets/images/screen/tsj/icon5.png") no-repeat
center;
background-size: 100% 100%;
}
}
}
.dianti-box,
.dianti-peizhong {
transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
will-change: transform;
} }
.status-normal {
color: #00ff0d;
}
.dianti-louceng { .dianti-louceng {
position: absolute; position: absolute;
.louceng-item { .louceng-item {
...@@ -340,9 +720,12 @@ export default { ...@@ -340,9 +720,12 @@ export default {
font-size: 20px; font-size: 20px;
color: #ffffff; color: #ffffff;
margin: 0; // 移除原有宽度限制 margin: 0; // 移除原有宽度限制
line-height: 44px; // 垂直居中 line-height: 40px; // 垂直居中
&.active { &.active {
background: #02dbf2; background: url("~@/assets/images/screen/tsj/button.png") no-repeat
center;
background-size: 100% 100%;
line-height: 40px; // 垂直居中
color: black; color: black;
} }
} }
......
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