Skip to content

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

add:银洞大屏

parent 6811d952
Expand all Show whitespace changes
Inline Side-by-side
Showing with 1587 additions and 253 deletions
src/api/tyler/hjjc.js
View file @ 40bf9150
......@@ -46,7 +46,15 @@ export function getDeviceStatus(query) {
// 查询近7日报警信息
export function getRecentSevDaysAlarms(query) {
return request({
url: "/business/screen/env/recentSevDaysAlarms",
url: "/business/screen/env/videoMonitoringList",
method: "get",
params: query,
});
}
// 查询设备状态分析
export function getDeviceStatusNum(query) {
return request({
url: "/business/screen/env/deviceStatusNum",
method: "get",
params: query,
});
......
src/api/tyler/tfxt.js
View file @ 40bf9150
......@@ -9,19 +9,22 @@ export function kongyajiQuery(query) {
data: query
})
}
//空压机数据
//风扇数据
export function fenshanQuery(query) {
return request({
url: '/business/screen/fan/dianjiQuery',
url: '/business/screen/fan/fengjiQuery',
method: 'get',
data: query
})
}
export function peakEditDra(query) {
// 编辑风扇状态
export function editFengjiStatus(data) {
return request({
url: '/business/peak/add',
url: '/business/screen/dev/addDeviceStatus',
method: 'post',
data: query
data
})
}
src/assets/images/screen/tsj/bg3.png
View replaced file @ 6811d952 View file @ 40bf9150
src/assets/images/screen/tsj/bg3.png

304 Bytes | W: | H:

src/assets/images/screen/tsj/bg3.png

6.16 KB | W: | H:

src/assets/images/screen/tsj/bg3.png
src/assets/images/screen/tsj/bg3.png
src/assets/images/screen/tsj/bg3.png
src/assets/images/screen/tsj/bg3.png
  • 2-up
  • Swipe
  • Onion skin
src/views/Screen/index.vue
View file @ 40bf9150
<template>
<div>
<home
v-if="showMenu === 0"
style="position: absolute; top: 0; left: 0; right: 0; bottom: 0"
></home>
<v-scale-screen
ref="scale-screen"
width="1920"
height="1080"
:fullScreen="true"
>
<home
v-if="showMenu === 0"
style="position: absolute; top: 0; left: 0; right: 0; bottom: 0"
></home>
<psxt
v-if="showMenu === 3"
style="position: absolute; top: 0; left: 0; right: 0; bottom: 0"
......@@ -36,10 +35,10 @@
v-if="showMenu === 2"
style="position: absolute; top: 0; left: 0; right: 0; bottom: 0"
></hjjc>
<div class="container">
<div class="container" style="pointer-events: none">
<!-- 头部 -->
<div class="header por"></div>
<div class="sub-header">
<div class="header por" style="pointer-events: auto"></div>
<div class="sub-header" style="pointer-events: auto">
<div class="sub-header-left">
<div
class="sub-item"
......@@ -204,7 +203,6 @@ export default {
// background-color: #08152a;
position: relative;
font-family: "fangsong";
pointer-events: none;
color: #fff;
}
/* 头部标题 */
......@@ -217,6 +215,7 @@ export default {
margin: 0 auto;
}
.sub-header {
pointer-events: auto; // 新增这行
display: flex;
justify-content: space-between;
padding: 0 30px;
......@@ -279,6 +278,7 @@ export default {
align-items: center;
font-size: 16px;
color: #11e0ff;
pointer-events: auto; // 新增这行
span {
cursor: pointer;
text-indent: 1em;
......@@ -330,6 +330,7 @@ export default {
}
}
::v-deep .screen-box {
pointer-events: none;
pointer-events: auto !important; // 修改这行
transform-style: preserve-3d; // 新增这行
}
</style>
src/views/Screen/items/dlxt.vue
View file @ 40bf9150
This diff is collapsed.
src/views/Screen/items/hjjc.vue
View file @ 40bf9150
......@@ -11,7 +11,6 @@
ref="sssjControl"
:data="tableData1"
:class-option="classOption"
@mousewheel.native="handleScroll"
class="warp"
>
<ul class="item">
......@@ -100,7 +99,7 @@
<div class="chart_bg"></div>
<div id="EchartsPieLeft" class="chart_box"></div>
<div class="chart_number">
<span>42个</span>
<span>{{ deviceStatusNum.total }}个</span>
<br />
<span>总数</span>
</div>
......@@ -117,7 +116,7 @@
<div class="chart_bg_right"></div>
<div id="EchartsPieRight" class="chart_box"></div>
<div class="chart_number_right">
<span>42个</span>
<span>{{ deviceStatusNum.cameraTotal }}个</span>
<br />
<span>总数</span>
</div>
......@@ -183,7 +182,7 @@ import {
getDeviceStatus,
getDeviceData,
getRcData,
getRecentSevDaysAlarms,
getDeviceStatusNum,
} from "@/api/tyler/hjjc";
import ScrollTable from "@/components/Tyler/ScrollTable.vue";
import screenfull from "screenfull";
......@@ -289,6 +288,12 @@ export default {
],
//highCharts配置
highChartsOption: {},
deviceStatusNum: {
//设备总数
total: 0,
//摄像头总数
cameraTotal: 0,
},
};
},
mounted() {
......@@ -307,11 +312,12 @@ export default {
});
getDeviceStatus().then((res) => {
// this.equipmentList = res.data;
this.equipmentList = [
let dataXY = [
{
name: "三中码头门",
x: "50",
y: "436",
y: "406",
isWarning: 0,
monitorPositionList: [
{
......@@ -329,7 +335,7 @@ export default {
{
name: "二中空压机房",
x: "258",
y: "335",
y: "299",
isWarning: 0,
monitorPositionList: [
{
......@@ -346,8 +352,8 @@ export default {
},
{
name: "东风井",
x: "816",
y: "176",
x: "856",
y: "136",
isWarning: 0,
monitorPositionList: [
{
......@@ -365,7 +371,7 @@ export default {
{
name: "二中避险硐室",
x: "75",
y: "318",
y: "288",
isWarning: 0,
monitorPositionList: [
{
......@@ -383,7 +389,7 @@ export default {
{
name: "一中避险硐室",
x: "85",
y: "193",
y: "153",
isWarning: 0,
monitorPositionList: [
{
......@@ -401,7 +407,7 @@ export default {
{
name: "五中避险硐室",
x: "102",
y: "687",
y: "677",
isWarning: 0,
monitorPositionList: [
{
......@@ -419,7 +425,7 @@ export default {
{
name: "四中避险硐室",
x: "96",
y: "561",
y: "541",
isWarning: 0,
monitorPositionList: [
{
......@@ -437,7 +443,7 @@ export default {
{
name: "四中车场",
x: "53",
y: "557",
y: "527",
isWarning: 0,
monitorPositionList: [
{
......@@ -450,7 +456,7 @@ export default {
{
name: "一中主运输巷",
x: "185",
y: "204",
y: "164",
isWarning: 0,
monitorPositionList: [
{
......@@ -468,7 +474,7 @@ export default {
{
name: "二中主运输巷",
x: "187",
y: "331",
y: "296",
isWarning: 0,
monitorPositionList: [
{
......@@ -491,7 +497,7 @@ export default {
{
name: "二中中运输巷",
x: "316",
y: "338",
y: "303",
isWarning: 0,
monitorPositionList: [
{
......@@ -504,7 +510,7 @@ export default {
{
name: "三中避险硐室",
x: "93",
y: "441",
y: "411",
isWarning: 0,
monitorPositionList: [
{
......@@ -535,7 +541,7 @@ export default {
{
name: "一中风机",
x: "145",
y: "199",
y: "159",
isWarning: 0,
monitorPositionList: [
{
......@@ -553,7 +559,7 @@ export default {
{
name: "一中西采区",
x: "341",
y: "222",
y: "192",
isWarning: 0,
monitorPositionList: [
{
......@@ -581,7 +587,7 @@ export default {
{
name: "三中运输巷",
x: "518",
y: "474",
y: "439",
isWarning: 0,
monitorPositionList: [
{
......@@ -632,7 +638,7 @@ export default {
{
name: "四中运输巷",
x: "206",
y: "584",
y: "559",
isWarning: 0,
monitorPositionList: [
{
......@@ -660,7 +666,7 @@ export default {
{
name: "五中运输巷",
x: "166",
y: "707",
y: "697",
isWarning: 0,
monitorPositionList: [
{
......@@ -688,7 +694,7 @@ export default {
{
name: "一中运输巷",
x: "367",
y: "208",
y: "168",
isWarning: 0,
monitorPositionList: [
{
......@@ -701,7 +707,7 @@ export default {
{
name: "二中西采区",
x: "237",
y: "369",
y: "339",
isWarning: 0,
monitorPositionList: [
{
......@@ -724,7 +730,7 @@ export default {
{
name: "二中运输巷",
x: "415",
y: "341",
y: "311",
isWarning: 0,
monitorPositionList: [
{
......@@ -735,20 +741,41 @@ export default {
],
},
];
if (res.data && res.data.length) {
// 使用接口数据为基础，合并本地坐标数据
this.equipmentList = res.data.map((apiItem) => {
// 在dataXY中查找同名设备
const localItem = dataXY.find((xy) => xy.name === apiItem.name);
// 合并坐标数据，保留接口返回的其他字段
return {
...apiItem,
x: localItem ? localItem.x : 0, // 默认值处理
y: localItem ? localItem.y : 0,
monitorPositionList: apiItem.monitorPositionList || [],
};
});
getRecentSevDaysAlarms().then((res) => {
//数据空
} else {
// 降级方案：使用本地数据
}
});
//初始化获取左侧环境监测实施数据
getRealData().then((res) => {
this.tableData1 = res.data;
});
//初始化highCharts
this.getHighChartsData();
getDeviceStatusNum().then((res) => {
if (res.code == 200) {
this.deviceStatusNum = {
total: res.data[0].online + res.data[0].offline,
cameraTotal: res.data[1].online + res.data[1].offline,
};
this.getHighChartsData(res.data);
}
});
},
created() {},
methods: {
getHighChartsData() {
getHighChartsData(value = []) {
this.highChartsOption = {
chart: {
type: "pie", //饼图
......@@ -803,8 +830,16 @@ export default {
name: "设备统计",
showInLegend: true,
data: [
{ name: "正常设备", y: 80, color: "RGBA(37, 160, 238, 1)" }, // 高数据部分
{ name: "异常设备", y: 20, color: "RGBA(252, 183, 62, 1)" }, // 低数据部分
{
name: "正常设备",
y: value[0].online,
color: "RGBA(37, 160, 238, 1)",
}, // 高数据部分
{
name: "异常设备",
y: value[0].offline,
color: "RGBA(252, 183, 62, 1)",
}, // 低数据部分
],
startAngle: 0, //起始角度,
label: {
......@@ -829,8 +864,8 @@ export default {
Highcharts.chart("EchartsPieLeft", this.highChartsOption);
this.highChartsOption.series[0].data = [
{ name: "在线", y: 40, color: "#02CD9B" }, // 高数据部分
{ name: "离线", y: 1, color: "RGBA(252, 183, 62, 1)" }, // 低数据部分
{ name: "在线", y: value[1].online, color: "#02CD9B" }, // 高数据部分
{ name: "离线", y: value[1].offline, color: "RGBA(252, 183, 62, 1)" }, // 低数据部分
];
Highcharts.chart("EchartsPieRight", this.highChartsOption);
},
......@@ -1188,9 +1223,8 @@ export default {
watch: {
tableData1: {
handler() {
// 数据更改时也要加
this.$nextTick(() => {
this.$refs.vueSeamlessScroll.reset();
this.$refs.sssjControl && this.$refs.sssjControl.reset(); // 添加存在性判断
});
},
immediate: true,
......@@ -1451,8 +1485,11 @@ export default {
width: calc(100% - 920px);
background: url("~@/assets/images/screen/bg3.png") no-repeat center;
background-size: contain;
background-position-y: 10px;
text-align: center;
position: relative;
pointer-events: auto;
z-index: 999;
.dot {
width: 42px;
height: 70px;
......
src/views/Screen/items/home.vue
View file @ 40bf9150
<template>
<div class="app-container home">
<div class="home">
<div id="cesiumContainer"></div>
</div>
</template>
......@@ -71,13 +71,14 @@ export default {
this.viewer.cesiumWidget.creditContainer.style.display = "none";
// 加载3D Tileset
Cesium.Cesium3DTileset.fromUrl(
"http://localhost:80/terra_b3dms_yd/tileset.json",
{
maximumScreenSpaceError: 1,
pickable: true,
}
)
Cesium.Cesium3DTileset.fromUrl("/terra_b3dms_yd/tileset.json", {
maximumScreenSpaceError: 8, // 从默认16改为8（值越小越清晰）
maximumMemoryUsage: 1024, // 增加内存限制到1024MB
skipLevelOfDetail: false, // 禁用LOD跳过
preferLeaves: true, // 优先加载叶子节点
skipScreenSpaceErrorFactor: 16, // 降低跳过系数
loadSiblings: true, // 加载相邻节点
})
.then((tileset) => {
this.tileset = tileset; // 存储tileset供后续使用
this.viewer.scene.primitives.add(tileset);
......@@ -214,9 +215,26 @@ export default {
.home {
width: 100%;
height: 100%;
padding-top: 0px;
pointer-events: auto;
#cesiumContainer {
width: 100%;
height: 100%;
pointer-events: auto;
position: relative;
z-index: 0 !important; // 强制设置基础层级
transform: translateZ(0); // 创建独立层叠上下文
}
}
// 新增强制穿透样式
::v-deep .cesium-widget canvas {
pointer-events: auto !important;
position: relative;
z-index: 0;
}
// 移除Cesium默认事件拦截
::v-deep .cesium-widget-credits {
display: none !important;
}
</style>
src/views/Screen/items/psxt.vue
View file @ 40bf9150
......@@ -70,11 +70,12 @@
: 'dwr'
"
>
<p>电机电流：{{ item.motorCurrent }}A</p>
<p>电机轴承温度：{{ item.motorBearingTemp }}℃</p>
<p>水泵轴承温度：{{ item.pumpBearingTemp }}℃</p>
<p>水泵流量：{{ item.pumpFlow }}</p>
<p>排水管路压力：{{ item.drainagePressure }}</p>
<p>水泵前温：{{ item.pumpFrontTemp | decimalFilter }}℃</p>
<p>水泵后温：{{ item.pumpRearTemp | decimalFilter }}℃</p>
<p>电机前温：{{ item.motorFrontTemp | decimalFilter }}℃</p>
<p>电机后温：{{ item.motorRearTemp | decimalFilter }}℃</p>
<p>出水压力：{{ item.outletPressure | decimalFilter }}Mpa</p>
<p>吸水负压：{{ item.inletVacuum | decimalFilter }}Mpa</p>
</div>
</div>
<p>
......@@ -137,9 +138,7 @@ export default {
created() {
this.initPumpList();
},
mounted() {
this.startWaterAnimation();
},
mounted() {},
methods: {
initPumpList() {
getDraData().then((res) => {
......@@ -155,6 +154,8 @@ export default {
},
// 水泵开启按钮
openWaterPump(item, status) {
console.log("我点击了");
this.upWindowShow = true;
// this.submitPumpPassword(pumpId, this.password, 0);
this.pumpId = item.pumpId;
......@@ -190,6 +191,11 @@ export default {
},
},
filters: {
decimalFilter(value) {
return value === null || typeof value === "undefined"
? "--"
: Number(value).toFixed(2);
},
// 水池显示数据过滤
sumpFilter(item, key) {
// 优化过滤逻辑
......@@ -201,6 +207,7 @@ export default {
<style scoped lang="scss">
.home {
pointer-events: auto; // 新增这行
width: 100%;
height: 100%;
background: url("~@/assets/images/screen/psxt/bg.png") no-repeat center;
......@@ -215,6 +222,7 @@ export default {
background-size: 100% 100%;
position: relative;
.center-title-box {
z-index: 888;
width: 200px;
height: 100%;
margin: auto;
......@@ -279,7 +287,9 @@ export default {
height: 200px;
// background: #ffffff;
.H36 {
height: 36px;
pointer-events: auto; // 新增这行
position: relative; // 新增层级控制
z-index: 999;
.button {
width: 86px;
height: 36px;
......@@ -334,7 +344,7 @@ export default {
position: relative;
.tip-box {
width: 192px;
height: 136px;
height: 156px;
background: #0a1e36;
border: 2px solid #00deff;
padding: 7px 13px 15px 10px;
......@@ -379,7 +389,7 @@ export default {
}
.tip-box {
width: 192px;
height: 136px;
height: 156px;
background: #0a1e36;
border: 2px solid #00deff;
padding: 7px 13px 15px 10px;
......
src/views/Screen/items/rydw.vue
View file @ 40bf9150
......@@ -191,7 +191,7 @@
class="custom-item custom-item2"
>
<span class="custom-item-content custom-item-content2">{{
item.serialNumber
index + 1
}}</span>
<span class="custom-item-content custom-item-content2">{{
item.name
......@@ -201,11 +201,11 @@
>
<div
class="progress"
:style="{ width: progressWidth(item.frequency) }"
:style="{ width: progressWidth(item.value) }"
></div>
</div>
<span class="custom-item-content custom-item-content2">{{
item.frequency
item.value
}}</span>
</li>
</ul>
......@@ -350,28 +350,7 @@ export default {
lastTime: "2025-01-10 14:21:31",
},
],
recentSevDaysAlarmsData: [
{
serialNumber: "1",
name: "张三",
frequency: "45",
},
{
serialNumber: "1",
name: "张三",
frequency: "32",
},
{
serialNumber: "1",
name: "张三",
frequency: "31",
},
{
serialNumber: "1",
name: "张三",
frequency: "29",
},
],
recentSevDaysAlarmsData: [],
subStaStatus: [],
realTimeDistributionData: [],
subStaStatusData: [{ num: 0 }, { num: 0 }, { num: 0 }],
......@@ -449,14 +428,17 @@ export default {
getMonthlyRankings() {
monthlyRankings().then((res) => {
if (res.code !== 200) return;
this.recentSevDaysAlarmsData = res.data;
this.recentSevDaysAlarmsData = res.data.sort(
(a, b) => b.value - a.value
);
//获取的re.data格式为[{name：张三,value：54}]这样。需要根据value排序，然后value大的在前
});
},
//控制进度条宽度
progressWidth(frequency) {
//最大值从recentSevDaysAlarmsData中获取，且保证位数为0
const maxFrequencyData = this.recentSevDaysAlarmsData.reduce(
(max, item) => Math.max(max, Math.ceil(item.frequency / 10) * 10),
(max, item) => Math.max(max, Math.ceil(item.value / 10) * 10),
0
);
const width = (frequency / maxFrequencyData) * 100 + "%";
......
src/views/Screen/items/tfxt.vue
View file @ 40bf9150
This diff is collapsed.
src/views/Screen/items/tsj.vue
View file @ 40bf9150
......@@ -171,7 +171,7 @@ export default {
// 动画控制
animationId: null,
timer: null,
source: null, // 新增取消令牌源
// 位置信息
currentPos: null,
targetPos: null,
......@@ -211,7 +211,10 @@ export default {
},
beforeDestroy() {
this.clearAnimation();
if (this.timer) {
clearInterval(this.timer);
this.timer = null; // 新增清理引用
}
},
mounted() {
this.initPositions();
......@@ -226,7 +229,7 @@ export default {
// 计算当前位置
calculatePosition(type) {
if (!POSITIONS.length) return { top: "450px", left: "413px" };
if (!POSITIONS.length) return { top: "450px", left: "428px" };
const currentDepth = Number(this.zgposition) || 0;
......@@ -238,7 +241,7 @@ export default {
return {
top: `${position[type] || POSITIONS[0][type]}px`, // 添加默认值
left: type === "glposy" ? "413px" : "365px",
left: type === "glposy" ? "428px" : "365px",
};
},
......@@ -310,6 +313,7 @@ export default {
startAutoUpdate() {
this.clearAnimation();
this.getdata();
this.timer = setInterval(this.getdata, 30000);
},
......@@ -633,7 +637,7 @@ export default {
transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.dianti-box {
width: 78px;
width: 46px;
height: 78px;
background: url("~@/assets/images/screen/tsj/bg3.png") no-repeat center;
background-size: 100% 100%;
......
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