Skip to content

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

add:大屏欢迎页面

parent 9a43f85f
Show whitespace changes
Inline Side-by-side
Showing with 490 additions and 240 deletions
src/api/tyler/screen.js
View file @ 4bce6e1b
......@@ -97,3 +97,22 @@ export function monthlyRankings(query) {
params: query,
});
}
//欢迎语句查询
//欢迎语句查询
export function welcomeQuery(query) {
return request({
url: "/sys/home/title/query",
method: "get",
params: query,
});
}
//欢迎语句编辑
export function welcomeEdit(query) {
return request({
url: "/sys/home/title/edit",
method: "post",
data: query,
});
}
src/assets/icons/svg/huanying.svg 0 → 100644
View file @ 4bce6e1b
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1755223631925" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4925" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M618.9056 162.304L645.12 130.8672l-57.7536-25.088-2.56 21.8112c-3.2768 23.1424-5.8368 46.2848-9.0112 71.68l-2.56 18.6368 12.1856-14.7456c11.6736-14.5408 22.528-27.4432 33.4848-40.8576z m-120.6272 10.8544l1.2288 3.8912h10.24l25.6-82.7392h-61.44l1.8432 6.9632c7.7824 25.088 15.7696 48.128 22.528 71.8848z m-90.5216 7.0656l17.3056 20.48 5.12-1.9456c0.7168 0 1.3312-0.6144 1.9456-0.6144l3.8912-1.3312L425.0624 112.64l-0.6144-7.68-7.0656 3.7888-50.688 23.1424 4.5056 5.7344c12.8 14.4384 24.9856 28.4672 36.5568 42.5984zM751.7184 672.4608a165.1712 165.1712 0 0 0-17.92-84.0704c-35.328-66.7648-73.8304-134.144-107.8272-193.8432A57.7536 57.7536 0 0 0 604.16 376.0128a37.7856 37.7856 0 0 0-14.7456-3.2768h-0.7168a34.5088 34.5088 0 0 0-34.6112 34.7136 86.4256 86.4256 0 0 0 7.0656 33.3824c9.0112 19.8656 18.6368 40.3456 28.2624 59.5968 5.7344 11.5712 10.8544 23.1424 15.9744 34.7136a15.0528 15.0528 0 0 1 0 14.7456 7.68 7.68 0 0 1-7.0656 3.8912 25.3952 25.3952 0 0 1-15.36-7.7824c-24.9856-24.3712-49.4592-49.3568-73.8304-73.728l-56.4224-56.5248c-33.9968-34.6112-68.7104-68.608-102.4-103.3216a43.8272 43.8272 0 0 0-44.9536-14.1312 33.4848 33.4848 0 0 0-24.3712 25.088 42.2912 42.2912 0 0 0 11.5712 38.5024c27.648 27.5456 54.5792 55.1936 81.92 82.7392l52.6336 52.6336c3.1744 3.1744 6.4512 7.0656 9.6256 10.9568a8.9088 8.9088 0 0 1 1.9456 7.68 10.24 10.24 0 0 1-3.8912 5.12 24.6784 24.6784 0 0 1-15.9744 1.9456c-1.3312 0-4.5056-3.2768-6.4512-5.12l-2.7648-2.56-46.08-46.2848a2103.0912 2103.0912 0 0 1-36.5568-37.1712l-93.0816-93.0816a38.2976 38.2976 0 0 0-37.888-12.8 36.7616 36.7616 0 0 0-27.5456 26.3168 41.984 41.984 0 0 0 12.8 40.96c43.6224 44.2368 86.6304 87.8592 130.2528 131.4816l43.008 43.008a75.9808 75.9808 0 0 1 9.6256 10.9568A11.6736 11.6736 0 0 1 347.4432 593.92a56.4224 56.4224 0 0 1-7.0656-6.3488l-20.48-20.48c-36.6592-36.5568-74.4448-74.4448-111.7184-112.64A44.2368 44.2368 0 0 0 163.2256 440.32a34.304 34.304 0 0 0-24.9856 25.088 39.8336 39.8336 0 0 0 10.9568 38.5024c29.4912 29.9008 59.5968 59.2896 89.1904 90.0096l52.6336 52.6336 3.1744 3.1744 4.5056 4.5056c1.9456 10.9568 0.6144 14.7456 0 15.4624-2.56 2.56-13.5168 1.2288-17.3056 1.2288l-3.8912-3.7888c-0.6144-1.3312-1.9456-1.9456-2.56-3.2768-8.704-8.4992-17.3056-17.7152-25.7024-26.7264-18.5344-18.6368-37.1712-37.888-56.4224-55.808a39.6288 39.6288 0 0 0-36.5568-11.5712 39.5264 39.5264 0 0 0-27.648 28.8768 36.4544 36.4544 0 0 0 12.8 38.5024L312.832 808.96A372.9408 372.9408 0 0 0 419.84 884.224a239.5136 239.5136 0 0 0 99.5328 23.1424A204.8 204.8 0 0 0 571.392 901.12c42.3936-10.24 79.5648-35.9424 116.8384-79.5648 42.2912-48.9472 62.2592-96.4608 63.488-149.0944z" p-id="4926"></path><path d="M472.8832 349.3888a76.8 76.8 0 0 1-6.7584 21.9136q-17.7152-18.1248-35.84-36.1472l-17.1008-17.2032a81.92 81.92 0 0 1 14.848-7.0656 38.912 38.912 0 0 1 15.0528-1.024h0.6144a34.5088 34.5088 0 0 1 29.184 39.5264zM738.5088 343.2448c-22.3232 16.4864-44.3392 33.0752-66.4576 49.5616l-6.4512-12.288-3.584-6.2464a94.5152 94.5152 0 0 0-37.4784-34.0992l-1.8432-1.024-2.3552-1.2288h-1.4336c23.3472-17.2032 46.6944-34.4064 69.8368-51.9168a43.52 43.52 0 0 1 46.4896-7.2704 33.5872 33.5872 0 0 1 20.48 28.3648 42.0864 42.0864 0 0 1-17.2032 36.1472zM843.776 390.2464c-40.96 30.72-81.2032 60.8256-121.7536 90.9312-12.5952-22.7328-25.2928-45.056-37.5808-66.6624l9.4208-7.2704 105.8816-78.1312a38.1952 38.1952 0 0 1 39.3216-7.0656 36.9664 36.9664 0 0 1 23.3472 30.1056 41.984 41.984 0 0 1-18.6368 38.0928zM865.1776 601.7024a36.5568 36.5568 0 0 1-18.432 36.2496l-54.272 40.1408v-4.8128a217.8048 217.8048 0 0 0-12.3904-81.1008c7.8848-5.8368 15.872-11.5712 23.9616-17.1008a37.0688 37.0688 0 0 1 60.928 26.624zM858.9312 504.832c-29.2864 22.1184-59.0848 43.6224-88.3712 65.7408a7.68 7.68 0 0 0-0.6144-1.3312c-11.6736-22.2208-23.7568-44.4416-35.9424-66.4576 24.576-18.1248 49.3568-36.5568 73.8304-54.9888a44.1344 44.1344 0 0 1 46.592-7.4752 34.6112 34.6112 0 0 1 21.0944 28.5696 40.3456 40.3456 0 0 1-16.5888 35.9424z" p-id="4927" ></path></svg>
\ No newline at end of file
src/assets/images/screen/bg3.png
View replaced file @ 9a43f85f View file @ 4bce6e1b
src/assets/images/screen/bg3.png

688 KB | W: | H:

src/assets/images/screen/bg3.png

219 KB | W: | H:

src/assets/images/screen/bg3.png
src/assets/images/screen/bg3.png
src/assets/images/screen/bg3.png
src/assets/images/screen/bg3.png
  • 2-up
  • Swipe
  • Onion skin
src/views/Screen/items/hjjc.vue
View file @ 4bce6e1b
......@@ -7,7 +7,12 @@
<div class="sidebar-item H917">
<div class="sub-title por"><span>环境监测实时数据 </span></div>
<div class="table-box">
<vue-seamless-scroll ref="sssjControl" :data="tableData1" :class-option="classOption" class="warp">
<vue-seamless-scroll
ref="sssjControl"
:data="tableData1"
:class-option="classOption"
class="warp"
>
<ul class="item">
<div
:class="upWindowData.upWindowActive === i ? 'active' : ''"
......@@ -19,14 +24,21 @@
<li class="table-item">
<el-row :gutter="16">
<el-col :span="6" class="jz">
<img class="img-class" :src="require(`@/assets/images/screen/hjjc/${item.typeId}.png`)" />
<img
class="img-class"
:src="
require(`@/assets/images/screen/hjjc/${item.typeId}.png`)
"
/>
</el-col>
<el-col :span="10">
<p class="device-name">{{ item.tpName }}</p>
<p class="device-time">{{ item.time }}</p>
</el-col>
<el-col :span="8">
<p class="device-value">{{ item.value | capitalize }}{{ item.unit }}</p>
<p class="device-value">
{{ item.value | capitalize }}{{ item.unit }}
</p>
</el-col>
</el-row>
</li>
......@@ -55,7 +67,11 @@
>
<div class="dot1">
<div class="tip-box">
<p v-for="(iitem, l) in item.monitorPositionList" :key="l + 'ccc'" :class="iitem.isWarning == 1 ? 'active' : ''">
<p
v-for="(iitem, l) in item.monitorPositionList"
:key="l + 'ccc'"
:class="iitem.isWarning == 1 ? 'active' : ''"
>
{{ iitem.equipmentName }}
<span></span>
</p>
......@@ -93,7 +109,11 @@
<div class="sub-con histrybox">
<div class="histrubox_left">
<div class="echarts_title">
<img src="../../../assets/images/screen/jianceshebei.png" alt="" class="img_class" />
<img
src="../../../assets/images/screen/jianceshebei.png"
alt=""
class="img_class"
/>
<span>环境监测设备</span>
</div>
<div class="chart_bg"></div>
......@@ -106,7 +126,11 @@
</div>
<div class="histrubox_right">
<div class="echarts_title">
<img src="../../../assets/images/screen/shipingshebei.png" alt="" class="img_class" />
<img
src="../../../assets/images/screen/shipingshebei.png"
alt=""
class="img_class"
/>
<span>视频监测设备</span>
</div>
<div class="chart_bg_right"></div>
......@@ -127,7 +151,10 @@
</div>
<div class="sub-con">
<div class="sub-con">
<span v-for="(item, i) in rightTopLssjData.list" :key="i + 'aab'" :class="i == rightTopLssjData.mark ? 'active' : ''"
<span
v-for="(item, i) in rightTopLssjData.list"
:key="i + 'aab'"
:class="i == rightTopLssjData.mark ? 'active' : ''"
>{{ item.name }}
<p class="subscript"></p>
</span>
......@@ -143,7 +170,10 @@
</div>
<div class="sub-con">
<div class="sub-con">
<span v-for="(item, i) in rightCenterLssjData.list" :key="i + 'abb'" :class="i == rightCenterLssjData.mark ? 'active' : ''"
<span
v-for="(item, i) in rightCenterLssjData.list"
:key="i + 'abb'"
:class="i == rightCenterLssjData.mark ? 'active' : ''"
>{{ item.name }}
<p class="subscript"></p>
</span>
......@@ -173,19 +203,26 @@
</div>
</template>
<script>
import * as echarts from 'echarts';
import { getRealData, getRtData, getDeviceStatus, getDeviceData, getRcData, getDeviceStatusNum } from '@/api/tyler/hjjc';
import { listVideoTable } from '@/api/tyler/videoTable';
import ScrollTable from '@/components/Tyler/ScrollTable.vue';
import screenfull from 'screenfull';
import vueSeamlessScroll from 'vue-seamless-scroll';
import Highcharts from 'highcharts/highcharts';
import highcharts3d from 'highcharts/highcharts-3d';
import { EQUIPMENT_POSITIONS, CAMERA_POSITIONS } from './hjjc-config';
import * as echarts from "echarts";
import {
getRealData,
getRtData,
getDeviceStatus,
getDeviceData,
getRcData,
getDeviceStatusNum,
} from "@/api/tyler/hjjc";
import { listVideoTable } from "@/api/tyler/videoTable";
import ScrollTable from "@/components/Tyler/ScrollTable.vue";
import screenfull from "screenfull";
import vueSeamlessScroll from "vue-seamless-scroll";
import Highcharts from "highcharts/highcharts";
import highcharts3d from "highcharts/highcharts-3d";
import { EQUIPMENT_POSITIONS, CAMERA_POSITIONS } from "./hjjc-config";
highcharts3d(Highcharts);
export default {
name: 'cockpit',
name: "cockpit",
components: {
ScrollTable,
vueSeamlessScroll,
......@@ -194,10 +231,10 @@ export default {
return {
// 设备实施数据弹窗
upWindowData: {
upWindowActive: '',
upWindowActive: "",
upWindowVisible: false,
title: '',
date: '2025-03-19',
title: "",
date: "2025-03-19",
},
// 左边列表数据
tableData1: [],
......@@ -208,12 +245,12 @@ export default {
autoPlay: true,
},
// 设备定位分类开关
checkList: ['2', '1'],
checkList: ["2", "1"],
// 右侧上部分历史数据
rightTopLssjData: {
list: [
{
name: '',
name: "",
value: [
{
data: {
......@@ -229,13 +266,13 @@ export default {
},
],
mark: 0,
name: '',
name: "",
},
// 右侧中间历史数据
rightCenterLssjData: {
list: [
{
name: '',
name: "",
value: [
{
data: {
......@@ -251,7 +288,7 @@ export default {
},
],
mark: 0,
name: '',
name: "",
},
// 设备列表
equipmentList: [],
......@@ -260,8 +297,8 @@ export default {
// 视频弹窗
video: {
upWindowVisible: false,
title: '',
videoUrl: '',
title: "",
videoUrl: "",
},
player: null,
//highCharts配置
......@@ -279,10 +316,10 @@ export default {
computed: {
// 优化：计算属性替代v-if+v-for
filteredEquipmentList() {
return this.equipmentList.filter(item => this.checkList.includes('2'));
return this.equipmentList.filter((item) => this.checkList.includes("2"));
},
filteredCameraList() {
return this.cameraList.filter(item => this.checkList.includes('1'));
return this.cameraList.filter((item) => this.checkList.includes("1"));
},
},
mounted() {
......@@ -293,10 +330,10 @@ export default {
this.initvideoPlayer();
},
created() {
listVideoTable().then(res => {
listVideoTable().then((res) => {
if (res.code === 200) {
this.cameraList = res.rows.map(el => {
const camera = CAMERA_POSITIONS.find(c => c.name === el.cameraName);
this.cameraList = res.rows.map((el) => {
const camera = CAMERA_POSITIONS.find((c) => c.name === el.cameraName);
return {
...el,
x: camera?.x || 0,
......@@ -308,9 +345,11 @@ export default {
},
beforeDestroy() {
// 清理所有定时器
Object.values(this.timers).forEach(timer => clearInterval(timer));
Object.values(this.timers).forEach((timer) => clearInterval(timer));
// 销毁所有图表实例
Object.values(this.chartInstances).forEach(instance => instance.dispose());
Object.values(this.chartInstances).forEach((instance) =>
instance.dispose()
);
// 清理播放器
if (this.player) {
this.player.disconnect();
......@@ -322,7 +361,11 @@ export default {
async initPageData() {
try {
// 并行请求关键数据
const [rtDataRes, rcDataRes, deviceStatusRes] = await Promise.all([getRtData(), getRcData(), getDeviceStatus()]);
const [rtDataRes, rcDataRes, deviceStatusRes] = await Promise.all([
getRtData(),
getRcData(),
getDeviceStatus(),
]);
// 处理历史数据
this.rightTopLssjData.list = rtDataRes.data || [];
......@@ -337,14 +380,14 @@ export default {
await this.initRealData();
await this.initDeviceStatusNum();
} catch (error) {
console.error('页面初始化失败:', error);
this.$message.error('数据加载失败，请刷新页面重试');
console.error("页面初始化失败:", error);
this.$message.error("数据加载失败，请刷新页面重试");
}
},
async initRealData() {
const res = await getRealData();
this.tableData1 = res.data.map(el => ({ ...el, value: el.value }));
this.tableData1 = res.data.map((el) => ({ ...el, value: el.value }));
},
async initDeviceStatusNum() {
......@@ -360,8 +403,10 @@ export default {
handleDeviceStatus(apiData) {
if (apiData && apiData.length) {
this.equipmentList = apiData.map(apiItem => {
const localItem = EQUIPMENT_POSITIONS.find(xy => xy.name === apiItem.name);
this.equipmentList = apiData.map((apiItem) => {
const localItem = EQUIPMENT_POSITIONS.find(
(xy) => xy.name === apiItem.name
);
return {
...apiItem,
x: localItem?.x || 0,
......@@ -373,25 +418,29 @@ export default {
},
initvideoPlayer() {
this.player = new WebRtcStreamer('player', 'http://127.0.0.1:8000');
this.player = new WebRtcStreamer("player", "http://127.0.0.1:8000");
},
// 查看视频
lookVideo(item, i) {
fetch('http://localhost:8000/api/version')
.then(response => {
fetch("http://localhost:8000/api/version")
.then((response) => {
this.video.upWindowVisible = true;
this.video.title = item.cameraName;
this.video.videoUrl = item.cameraUrl;
this.player.connect(this.video.videoUrl);
})
.catch(error =>
this.$confirm('需要启动/安装WebRtcStreamer才能播放视频，是否现在安装？', '提示', {
confirmButtonText: '安装',
cancelButtonText: '取消',
type: 'warning',
}).then(() => {
window.open('/webrtcstreamer/webrtc-streamer.exe'); // 确保webrtc-streamer.exe的路径正确 在pulic/webrtcstreamer目录下
.catch((error) =>
this.$confirm(
"需要启动/安装WebRtcStreamer才能播放视频，是否现在安装？",
"提示",
{
confirmButtonText: "安装",
cancelButtonText: "取消",
type: "warning",
}
).then(() => {
window.open("/webrtcstreamer/webrtc-streamer.exe"); // 确保webrtc-streamer.exe的路径正确 在pulic/webrtcstreamer目录下
})
);
},
......@@ -404,38 +453,38 @@ export default {
getHighChartsData(value = []) {
this.highChartsOption = {
chart: {
type: 'pie',
type: "pie",
options3d: {
enabled: true,
alpha: 60,
beta: 0,
},
backgroundColor: 'rgba(64, 158, 255, 0)',
backgroundColor: "rgba(64, 158, 255, 0)",
},
legend: {
enabled: true,
align: 'center',
verticalAlign: 'middle',
layout: 'vertical',
align: "center",
verticalAlign: "middle",
layout: "vertical",
y: 60,
itemStyle: {
color: '#fff',
fontSize: '12px',
color: "#fff",
fontSize: "12px",
},
labelFormatter: function () {
return `${this.name}: ${this.y}`;
},
},
title: { text: '' },
subtitle: { text: '' },
title: { text: "" },
subtitle: { text: "" },
plotOptions: {
pie: {
size: '55%',
size: "55%",
allowPointSelect: false,
cursor: 'pointer',
innerSize: '65%',
cursor: "pointer",
innerSize: "65%",
showInLegend: false,
center: ['50%', '34%'],
center: ["50%", "34%"],
depth: 15,
dataLabels: { enabled: false },
},
......@@ -443,19 +492,19 @@ export default {
credits: { enabled: false },
series: [
{
type: 'pie',
name: '设备统计',
type: "pie",
name: "设备统计",
showInLegend: true,
data: [
{
name: '正常设备',
name: "正常设备",
y: value[0].online,
color: 'RGBA(37, 160, 238, 1)',
color: "RGBA(37, 160, 238, 1)",
},
{
name: '异常设备',
name: "异常设备",
y: value[0].offline,
color: 'RGBA(252, 183, 62, 1)',
color: "RGBA(252, 183, 62, 1)",
},
],
startAngle: 0,
......@@ -464,12 +513,12 @@ export default {
],
};
Highcharts.chart('EchartsPieLeft', this.highChartsOption);
Highcharts.chart("EchartsPieLeft", this.highChartsOption);
this.highChartsOption.series[0].data = [
{ name: '在线', y: value[1].online, color: '#02CD9B' },
{ name: '离线', y: value[1].offline, 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);
Highcharts.chart("EchartsPieRight", this.highChartsOption);
},
initEchartBox(id, xData = [], yData = [], mkData = 28, step = 4, grid) {
......@@ -486,61 +535,61 @@ export default {
grid: grid,
xAxis: {
show: true,
type: 'category',
type: "category",
boundaryGap: false,
data: xData,
axisLabel: {
show: true,
interval: step,
textStyle: { color: '#FFFFFF', fontSize: 16 },
textStyle: { color: "#FFFFFF", fontSize: 16 },
},
axisTick: { alignWithLabel: true },
splitLine: {
lineStyle: { type: 'dashed', opacity: 0.5 },
lineStyle: { type: "dashed", opacity: 0.5 },
show: true,
},
},
yAxis: {
type: 'value',
type: "value",
max: mkData > maxData ? mkData : maxData,
min: minData,
boundaryGap: false,
axisTick: { alignWithLabel: true },
axisLabel: {
show: true,
textStyle: { color: '#FFFFFF', fontSize: 16 },
textStyle: { color: "#FFFFFF", fontSize: 16 },
},
splitLine: {
lineStyle: { type: 'dashed', opacity: 0.5 },
lineStyle: { type: "dashed", opacity: 0.5 },
show: true,
},
},
series: [
{
type: 'line',
stack: 'Total',
type: "line",
stack: "Total",
smooth: 0.2,
lineStyle: { width: 2, color: '#35B1F3' },
lineStyle: { width: 2, color: "#35B1F3" },
markLine: {
data: [
{
name: '警戒线',
name: "警戒线",
yAxis: mkData,
label: { show: false },
},
],
symbol: ['none', 'none'],
lineStyle: { color: 'red', width: 2 },
symbol: ["none", "none"],
lineStyle: { color: "red", width: 2 },
},
showSymbol: false,
areaStyle: {
opacity: 0.8,
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: 'rgb(55, 184, 251,0.5)' },
{ offset: 1, color: 'rgb(55, 184, 251,0.1)' },
{ offset: 0, color: "rgb(55, 184, 251,0.5)" },
{ offset: 1, color: "rgb(55, 184, 251,0.1)" },
]),
},
emphasis: { focus: 'series' },
emphasis: { focus: "series" },
data: yData,
},
],
......@@ -552,8 +601,8 @@ export default {
// 保存实例引用
this.chartInstances[id] = myChart;
this.$on('hook:deactivated', () => {
if (myChart && myChart !== '' && myChart !== undefined) {
this.$on("hook:deactivated", () => {
if (myChart && myChart !== "" && myChart !== undefined) {
myChart.dispose();
}
myChart = null;
......@@ -563,24 +612,27 @@ export default {
// 右上图表轮播
rtPlayFun(data) {
if (!data || !data.list || !data.list.length) {
console.error('数据格式错误或数据为空');
console.error("数据格式错误或数据为空");
return;
}
this.clearTimer('rtPlayTimer');
this.clearTimer("rtPlayTimer");
let i = 0,
l = 0;
const grid = {
left: '4%',
right: '5%',
bottom: '4%',
top: '7%',
left: "4%",
right: "5%",
bottom: "4%",
top: "7%",
containLabel: true,
};
// 初始化首次渲染
this.updateRtChart(0, 0);
this.timers.rtPlayTimer = setInterval(() => {
if (i < data.list.length) {
if (Array.isArray(data.list[i].value) && l < data.list[i].value.length) {
if (
Array.isArray(data.list[i].value) &&
l < data.list[i].value.length
) {
this.updateRtChart(i, l);
l++;
} else {
......@@ -599,37 +651,44 @@ export default {
if (data && data.length) {
this.rightTopLssjData.mark = i;
this.rightTopLssjData.name = data[i].value[l].name;
this.initEchartBox('sssj', data[i].value[l].value.xData.data, data[i].value[l].value.yData.data, data[i].value[l].value.yData.alarm, 4, {
left: '4%',
right: '5%',
bottom: '4%',
top: '7%',
this.initEchartBox(
"sssj",
data[i].value[l].value.xData.data,
data[i].value[l].value.yData.data,
data[i].value[l].value.yData.alarm,
4,
{
left: "4%",
right: "5%",
bottom: "4%",
top: "7%",
containLabel: true,
});
}
);
}
},
// 右中图表轮播
rcPlayFun(data) {
if (!data || !data.list || !data.list.length) {
console.error('数据格式错误或数据为空');
console.error("数据格式错误或数据为空");
return;
}
this.clearTimer('rcPlayTimer');
this.clearTimer("rcPlayTimer");
let i = 0,
l = 0;
const grid = {
left: '4%',
right: '5%',
bottom: '4%',
top: '7%',
left: "4%",
right: "5%",
bottom: "4%",
top: "7%",
containLabel: true,
};
this.rightCenterLssjData.mark = i;
this.rightCenterLssjData.name = data.list[i].value[l].name;
this.initEchartBox(
'rclssj',
"rclssj",
data.list[i].value[l].value.xData.data,
data.list[i].value[l].value.yData.data,
data.list[i].value[l].value.yData.alarm,
......@@ -639,11 +698,14 @@ export default {
this.timers.rcPlayTimer = setInterval(() => {
if (i < data.list.length) {
if (Array.isArray(data.list[i].value) && l < data.list[i].value.length) {
if (
Array.isArray(data.list[i].value) &&
l < data.list[i].value.length
) {
this.rightCenterLssjData.mark = i;
this.rightCenterLssjData.name = data.list[i].value[l].name;
this.initEchartBox(
'rclssj',
"rclssj",
data.list[i].value[l].value.xData.data,
data.list[i].value[l].value.yData.data,
data.list[i].value[l].value.yData.alarm,
......@@ -674,15 +736,15 @@ export default {
lookRealData(item, i) {
let grid = {
left: 0,
right: '1.7%',
bottom: '4%',
top: '7%',
right: "1.7%",
bottom: "4%",
top: "7%",
containLabel: true,
};
let xData = [];
let yData = [];
getDeviceData({ id: item.id }).then(res => {
getDeviceData({ id: item.id }).then((res) => {
if (res.code === 200) {
this.upWindowData.upWindowActive = i;
this.upWindowData.upWindowVisible = true;
......@@ -690,27 +752,27 @@ export default {
this.upWindowData.date = res.data.day;
this.classOption.autoPlay = false;
let threshold = 0;
res.data.envScreenEditDto.forEach(i => {
res.data.envScreenEditDto.forEach((i) => {
xData.push(i.time);
yData.push(i.value);
});
threshold = res.data.threshold || 0;
this.initEchartBox('chartBox', xData, yData, threshold, 0, grid);
this.initEchartBox("chartBox", xData, yData, threshold, 0, grid);
} else {
this.$message.error('数据请求失败！');
this.$message.error("数据请求失败！");
}
});
},
closeUpWindow() {
this.upWindowData.upWindowActive = '';
this.upWindowData.upWindowActive = "";
this.upWindowData.upWindowVisible = false;
this.classOption.autoPlay = true;
this.$refs.sssjControl._startMove();
},
goToSys() {
var link = this.$router.resolve({ path: '/' });
var link = this.$router.resolve({ path: "/" });
window.open(link.href);
return;
},
......@@ -721,19 +783,22 @@ export default {
this.$refs.sssjControl.yPos = 0;
return;
}
if (Math.abs(this.$refs.sssjControl.yPos) > this.$refs.sssjControl.realBoxHeight / 2) {
if (
Math.abs(this.$refs.sssjControl.yPos) >
this.$refs.sssjControl.realBoxHeight / 2
) {
this.$refs.sssjControl.yPos = 0;
}
},
},
filters: {
capitalize(value) {
if (value === null || value === undefined) return '--';
if (value === '开' || value === '关') {
if (value === null || value === undefined) return "--";
if (value === "开" || value === "关") {
return value;
}
const parsedValue = Number(value);
return isNaN(parsedValue) ? '--' : parsedValue.toFixed(1);
return isNaN(parsedValue) ? "--" : parsedValue.toFixed(1);
},
},
};
......@@ -749,16 +814,20 @@ $spacing: 16px;
@mixin sidebar-item {
width: 100%;
margin-bottom: $spacing;
background: linear-gradient(180deg, $bg-color 0%, rgba(8, 132, 233, 0.2) 100%);
background: linear-gradient(
180deg,
$bg-color 0%,
rgba(8, 132, 233, 0.2) 100%
);
position: relative;
border-radius: $border-radius;
&::before {
content: '';
content: "";
width: 460px;
height: 4px;
position: absolute;
background: url('~@/assets/images/screen/title1.png') no-repeat center;
background: url("~@/assets/images/screen/title1.png") no-repeat center;
left: 0;
bottom: 0;
right: 0;
......@@ -786,7 +855,7 @@ $spacing: 16px;
justify-content: space-between;
padding: 0 $spacing;
padding-top: 173px;
background: url('~@/assets/images/screen/bg12.png');
background: url("~@/assets/images/screen/bg12.png");
color: #fff;
height: 100%;
box-sizing: border-box;
......@@ -834,7 +903,7 @@ $spacing: 16px;
position: absolute;
width: 140px;
height: 150px;
background-image: url('~@/assets/images/screen/chart.png');
background-image: url("~@/assets/images/screen/chart.png");
background-repeat: no-repeat;
background-position: cover;
background-size: 100% 100%;
......@@ -894,9 +963,9 @@ $spacing: 16px;
.sub-title {
width: 100%;
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-family: 'fangsong';
font-family: "fangsong";
span {
position: absolute;
......@@ -951,7 +1020,12 @@ $spacing: 16px;
font-weight: 500;
font-size: 28px;
color: #ffffff;
background: linear-gradient(0deg, #3cbffa 0%, #ffffff 56.005859375%, #e2f6ff 100%);
background: linear-gradient(
0deg,
#3cbffa 0%,
#ffffff 56.005859375%,
#e2f6ff 100%
);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
width: 100%;
......@@ -963,7 +1037,7 @@ $spacing: 16px;
width: 100%;
height: 100%;
overflow: hidden;
font-family: 'fangzhengyaoti';
font-family: "fangzhengyaoti";
ul {
list-style: none;
......@@ -986,9 +1060,9 @@ $spacing: 16px;
/* 中间主区域 */
.main-area {
width: calc(100% - 920px);
background: url('~@/assets/images/screen/bg3.png') no-repeat center;
background: url("~@/assets/images/screen/bg3.png") no-repeat center;
background-size: contain;
background-position-y: 10px;
background-position-y: 0px;
text-align: center;
position: relative;
pointer-events: auto;
......@@ -1000,7 +1074,7 @@ $spacing: 16px;
line-height: 36px;
font-weight: bold;
position: absolute;
font-family: 'fangsong';
font-family: "fangsong";
}
.dot {
......@@ -1009,7 +1083,7 @@ $spacing: 16px;
position: absolute;
top: 100px;
left: 500px;
background: url('~@/assets/images/screen/hjjc/icon8.png') no-repeat center;
background: url("~@/assets/images/screen/hjjc/icon8.png") no-repeat center;
.dot1 {
position: relative;
......@@ -1039,7 +1113,8 @@ $spacing: 16px;
display: none;
width: 16px;
height: 16px;
background: url('~@/assets/images/screen/hjjc/icon10.png') no-repeat center;
background: url("~@/assets/images/screen/hjjc/icon10.png") no-repeat
center;
margin-bottom: -3px;
}
......@@ -1054,7 +1129,8 @@ $spacing: 16px;
}
&:hover {
background: url('~@/assets/images/screen/hjjc/icon8_hover.png') no-repeat center;
background: url("~@/assets/images/screen/hjjc/icon8_hover.png") no-repeat
center;
.tip-box {
display: block;
......@@ -1062,10 +1138,11 @@ $spacing: 16px;
}
&.active {
background: url('~@/assets/images/screen/hjjc/icon9.png') no-repeat center;
background: url("~@/assets/images/screen/hjjc/icon9.png") no-repeat center;
&:hover {
background: url('~@/assets/images/screen/hjjc/icon9_hover.png') no-repeat center;
background: url("~@/assets/images/screen/hjjc/icon9_hover.png")
no-repeat center;
}
}
}
......@@ -1076,15 +1153,18 @@ $spacing: 16px;
position: absolute;
top: 100px;
left: 500px;
background: url('~@/assets/images/screen/hjjc/icon_normal.png') no-repeat center;
background: url("~@/assets/images/screen/hjjc/icon_normal.png") no-repeat
center;
cursor: pointer;
&:hover {
background: url('~@/assets/images/screen/hjjc/icon_hover.png') no-repeat center;
background: url("~@/assets/images/screen/hjjc/icon_hover.png") no-repeat
center;
}
&.offline {
background: url('~@/assets/images/screen/hjjc/icon_click.png') no-repeat center;
background: url("~@/assets/images/screen/hjjc/icon_click.png") no-repeat
center;
}
}
......@@ -1105,7 +1185,7 @@ $spacing: 16px;
color: #fdfeff;
font-size: 16px;
font-weight: 500;
font-family: 'fangzhengyaoti';
font-family: "fangzhengyaoti";
}
}
}
......@@ -1122,7 +1202,7 @@ $spacing: 16px;
.sub-con {
height: 2em;
width: 100%;
font-family: 'fangzhengyaoti';
font-family: "fangzhengyaoti";
span {
float: left;
......@@ -1141,7 +1221,8 @@ $spacing: 16px;
.subscript {
height: 19px;
width: 100%;
background: url('~@/assets/images/screen/hjjc/icon7.png') no-repeat center;
background: url("~@/assets/images/screen/hjjc/icon7.png") no-repeat
center;
}
}
}
......@@ -1185,7 +1266,11 @@ $spacing: 16px;
line-height: 36px;
font-size: 16px;
font-weight: 500;
background: linear-gradient(0deg, rgba(61, 98, 147, 0.35) 0%, rgba(61, 98, 147, 0.03) 100%);
background: linear-gradient(
0deg,
rgba(61, 98, 147, 0.35) 0%,
rgba(61, 98, 147, 0.03) 100%
);
}
.warp {
......@@ -1204,7 +1289,11 @@ $spacing: 16px;
display: grid;
grid-template-columns: 1.5fr 2.2fr 1.3fr;
text-align: center;
background: linear-gradient(0deg, rgba(61, 98, 147, 0.35) 0%, rgba(61, 98, 147, 0.03) 100%);
background: linear-gradient(
0deg,
rgba(61, 98, 147, 0.35) 0%,
rgba(61, 98, 147, 0.03) 100%
);
margin-top: 11px;
}
......@@ -1226,7 +1315,7 @@ $spacing: 16px;
.sub-con-r-left {
width: 127px;
height: 161px;
background: url('~@/assets/images/screen/icon3.png') no-repeat center;
background: url("~@/assets/images/screen/icon3.png") no-repeat center;
background-size: 100%;
}
......@@ -1269,7 +1358,7 @@ $spacing: 16px;
width: 1360px;
height: 480px;
transform: translate(-50%, -50%);
background: url('~@/assets/images/screen/hjjc/popup.png') no-repeat;
background: url("~@/assets/images/screen/hjjc/popup.png") no-repeat;
background-size: 1377px 501px;
box-shadow: 0px 15px 11px 2px rgba(0, 20, 39, 0.31);
padding: 28px 37px;
......@@ -1289,7 +1378,8 @@ $spacing: 16px;
width: 1271px;
height: 37px;
margin: 0px;
background: url('~@/assets/images/screen/hjjc/title-popup.png') no-repeat center;
background: url("~@/assets/images/screen/hjjc/title-popup.png") no-repeat
center;
background-size: 100%;
font-weight: 500;
font-size: 22px;
......
src/views/Screen/items/home.vue
View file @ 4bce6e1b
<template>
<div class="home">
<div id="cesiumContainer"></div>
<transition name="el-zoom-in-center">
<div v-if="huanyingBox" @dblclick="huanyingBox = false" class="welcome">
<span>{{ welcomeStr }}</span>
</div>
</transition>
<svg-icon
icon-class="huanying"
style="color: red"
class="iconhuanying"
@click="huanyingBox = true"
/>
</div>
</template>
<script>
import { welcomeQuery } from "@/api/tyler/screen";
export default {
name: "cesium",
data() {
......@@ -13,7 +26,7 @@ export default {
markerList: [
{
longitude: 113.43095267132009,
latitude: 32.54745665190039,
latitude: 32.547011665190039,
height: 70,
des: {
name: "指挥中心",
......@@ -75,9 +88,15 @@ export default {
},
},
],
huanyingBox: false,
welcomeStr: "",
};
},
created() {
welcomeQuery().then((res) => {
this.welcomeStr = res.rows[0].title;
});
this.$nextTick(() => {
Cesium.Ion.defaultAccessToken =
"eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI2ZmY5ZWUyZS00MjQwLTQzZjUtYTBjZi02ZWZiYzJhMmY2NTYiLCJpZCI6MTMxMzY5LCJpYXQiOjE3NDE2NzY4Mzh9.QD-8cQI_VqPG2t-S8KxLyMFux0R429lfTdhQWrdeWhE";
......@@ -98,13 +117,14 @@ export default {
this.viewer.cesiumWidget.creditContainer.style.display = "none";
// 加载3D Tileset
Cesium.Cesium3DTileset.fromUrl("/terra_b3dms_yd/tileset.json", {
// Cesium.Cesium3DTileset.fromUrl(
// "http://localhost/terra_b3dms_yd/tileset.json",
// {
// Cesium.Cesium3DTileset.fromUrl("/terra_b3dms_yd/tileset.json", {
Cesium.Cesium3DTileset.fromUrl(
"http://localhost/terra_b3dms_yd/tileset.json",
{
maximumScreenSpaceError: 1,
pickable: true,
})
}
)
.then((tileset) => {
this.tileset = tileset; // 存储tileset供后续使用
this.viewer.scene.primitives.add(tileset);
......@@ -246,6 +266,7 @@ export default {
if (this.viewer) {
this.viewer.destroy();
}
``;
},
};
</script>
......@@ -264,6 +285,51 @@ export default {
z-index: 0 !important; // 强制设置基础层级
transform: translateZ(0); // 创建独立层叠上下文
}
.welcome {
width: 100%;
height: 100%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 999;
background: url("~@/assets/images/screen/welcom.png") no-repeat;
background-size: 100% 100%;
color: red;
font-family: "fangsong";
font-size: 54px;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
user-select: none;
padding-bottom: 100px;
span {
font-weight: 800;
background: linear-gradient(
0deg,
#38d7ff 0.634765625%,
#f4ffff 61.279296875%
);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
display: inline-block;
max-width: 1300px;
}
}
.iconhuanying {
font-size: 52px;
position: absolute;
right: 50px;
bottom: 50px;
color: #000;
fill: rgba(25, 69, 108, 0.5); /* 修改第二个路径的颜色 */
&:hover {
cursor: pointer;
fill: rgba(25, 69, 108, 1);
}
}
}
// 新增强制穿透样式
::v-deep .cesium-widget canvas {
......
src/views/Screen/items/tfxt.vue
View file @ 4bce6e1b
......@@ -523,16 +523,57 @@
</div>
</div>
<div class="up-window" v-show="upWindowShow">
<div class="up-window-box" ref="upWindowBox">
<!-- 添加 ref 引用 -->
<div class="up-window-box" v-if="showPas" ref="upWindowBox">
<p><span></span>{{ windowTitle }}</p>
<!-- 改为数据绑定 -->
<i class="el-icon-close close-button" @click="upWindowShow = false"></i>
<div class="W400">
<div class="but-box" @click="submitPumpSetting(1)">风机正向启动</div>
<div class="but-box" @click="submitPumpSetting(2)">风机反向启动</div>
<div class="but-box" @click="submitPumpSetting(3)">风机停止运行</div>
<div class="but-box" @click="submitPumpSetting(4)">风机故障复位</div>
<div
class="but-box"
@click="
currentDevice.status = 1;
showPas = false;
"
>
风机正向启动
</div>
<div
class="but-box"
@click="
currentDevice.status = 2;
showPas = false;
"
>
风机反向启动
</div>
<div
class="but-box"
@click="
currentDevice.status = 3;
showPas = false;
"
>
风机停止运行
</div>
<div
class="but-box"
@click="
currentDevice.status = 4;
showPas = false;
"
>
风机故障复位
</div>
</div>
</div>
<div class="up-window-box" v-else>
<p><span></span>请输入风机操作密码</p>
<i class="el-icon-close close-button" @click="upWindowShow = false"></i>
<div class="pas-box">
<el-input placeholder="" v-model="password" show-password></el-input>
</div>
<div>
<div class="button close" @click="upWindowShow = false">取消</div>
<div class="button" @click="submitPumpPassword()">确认</div>
</div>
</div>
</div>
......@@ -549,6 +590,8 @@ import {
kongyajiQuery,
editFengjiStatus,
} from "@/api/tyler/tfxt";
import { updatePumpSwitch } from "@/api/tyler/psxt.js";
export default {
name: "",
props: {},
......@@ -559,7 +602,10 @@ export default {
kyList: [],
upWindowShow: false,
windowTitle: "", // 新增标题字段
currentDevice: null, // 新增当前设备字段
currentDevice: {
id: "",
status: "",
}, // 新增当前设备字段
timer: null, // 新增定时器引用
exampleWindow: false,
fengjiIconClass: {
......@@ -567,6 +613,9 @@ export default {
2: "runingopps",
3: "",
},
password: "",
pumpPassword: "",
showPas: true,
};
},
computed: {},
......@@ -581,6 +630,29 @@ export default {
}, 10000);
},
methods: {
//提交水泵密码
submitPumpPassword() {
console.log(this.currentDevice);
let password = this.password;
if (!password) {
return this.$modal.msgError("请输入密码");
}
updatePumpSwitch({
deviceId: this.currentDevice.deviceId,
password,
status: this.currentDevice.status,
}).then((res) => {
if (res.code === 200) {
this.upWindowShow = false;
this.password = "";
this.$modal.msgSuccess(res.msg);
this.initPumpList();
} else {
this.$modal.msgError(res.msg);
}
});
},
getData() {
fenshanQuery().then((res) => {
if (res.code == 200) {
......@@ -992,6 +1064,48 @@ export default {
}
}
}
.pas-box {
width: 400px;
margin: auto;
margin-top: 30px;
::v-deep .el-input__inner {
border-radius: 0px !important;
height: 42px;
}
span {
font-weight: 400;
font-size: 21px;
color: #ffffff;
margin-top: 10px;
display: inline-block;
margin-bottom: 15px;
}
}
.button {
width: 110px;
height: 42px;
background: #11b9ff;
border-radius: 4px;
font-weight: 400;
font-size: 20px;
color: #ffffff;
text-align: center;
line-height: 42px;
float: left;
margin-left: 100px;
margin-top: 25px;
cursor: pointer;
&:hover {
background: #66d2ff;
}
&.close {
background: none;
color: #fff;
&:hover {
color: #66d2ff;
}
}
}
}
}
.example-window {
......
src/views/index.vue
View file @ 4bce6e1b
......@@ -5,7 +5,6 @@
<source :src="videoData" type="video/mp4" />
</video>
</div>
<div v-else>加载中...</div>
<div class="upv">
<el-upload
......@@ -29,37 +28,28 @@
</el-button>
<div slot="tip" class="el-upload__tip">只能上传.mp4文件</div>
</el-upload>
<!-- <el-upload
ref="upload"
:action="uploadUrl1"
:before-upload="handleBeforeUpload"
:on-success="
(res, file) => {
handleUploadSuccess(res, file, 'pic');
}
"
:on-error="handleUploadError"
name="file"
:show-file-list="false"
:headers="headers"
accept=".jpg, .jpeg, .png"
>
<el-button size="small">
选择视频封面
<i class="el-icon-upload el-icon--right"></i>
</el-button>
<div slot="tip" class="el-upload__tip">
只能上传jpg/png/jpeg文件
</div>
</el-upload> -->
</div>
<!-- <el-button @click="videoPlayer">测试视频流</el-button> -->
<video width="500" class="player" id="player"></video>
<el-divider content-position="left">欢迎语句编辑</el-divider>
<el-row :gutter="20">
<el-col :span="8">
<el-input
v-model="welcomeStr"
type="textarea"
:autosize="{ minRows: 2 }"
placeholder="请输入欢迎语句"
></el-input>
</el-col>
<el-col :span="8">
<el-button type="primary" @click="submitForm">保存</el-button>
</el-col>
</el-row>
</div>
</template>
<script>
import { getToken } from "@/utils/auth";
import { listVideo, addVideo } from "@/api/tyler/mainVideo";
import { welcomeQuery, welcomeEdit } from "@/api/tyler/screen";
export default {
name: "mainVideo",
data() {
......@@ -80,64 +70,34 @@ export default {
videoData: null,
fileSize: 1024,
show: false,
player: null,
welcomeStr: "",
};
},
created() {
this.getList();
welcomeQuery().then((res) => {
this.welcomeStr = res.rows[0].title;
});
},
mounted() {
this.initvideoPlayer();
},
methods: {
submitForm() {
welcomeEdit({
title: this.welcomeStr,
}).then((res) => {
this.$modal.msgSuccess("成功");
});
},
initvideoPlayer() {
// this.player = new JSPlugin({
// szId: "player", //父窗口id，需要英文字母开头 必填
// szBasePath: "/h5player/", // 必填,与h5player.min.js的引用路径一致
// iMaxSplit: 4,
// // iCurrentSplit: IS_MOVE_DEVICE ? 1 : 2,
// openDebug: true,
// mseWorkerEnable: false, //是否开启多线程解码，分辨率大于1080P建议开启，否则可能卡顿
// bSupporDoubleClickFull: true, //是否支持双击全屏，true-双击是全屏；false-双击无响应
// // oStyle: {
// // borderSelect: IS_MOVE_DEVICE ? "#000" : "#FFCC00",
// // },
// });
// // 事件回调绑定
// this.player.JS_SetWindowControlCallback({
// //断流回调
// InterruptStream: (iWndIndex, iTime) => {
// // this.videoPlayer();
// console.log(
// "recv InterruptStream: " + iWndIndex + ", iTime:" + iTime
// );
// },
// });
this.player = new WebRtcStreamer("player", "http://127.0.0.1:8000");
},
videoPlayer() {
// this.player
// .JS_Play(
// "ws://192.168.10.150:559/openUrl/vsigy9zKpB6e50fcfb7675b4eb4bc103",
// {
// playURL:
// "ws://192.168.10.150:559/openUrl/vsigy9zKpB6e50fcfb7675b4eb4bc103", // 流媒体播放时必传
// mode: 0, // 解码类型：0=普通模式; 1=高级模式 默认为0
// PlayBackMode: 1, //1：绝对时间正放; 3 绝对时间倒放 默认为1
// keepDecoder: 0, // 0:回收解码资源; 1:不回收解码资源。为1时相同的编码格式，通过直接调用js_play接口切换点
// token: "",
// },
// 1
// )
// .then((res) => {
// console.log(res);
// });
this.player.connect(
"rtsp://192.168.10.150:8604/EUrl/3IRr6GG?params=eyJwcm90b2NvbCI6InJ0c3AiLCJ1c2VySWQiOiJhcGkiLCJ0IjoxLCJhIjoiNWQ4MGYxZjg5N2ZkNGZjOGJkZDc2ZTVhY2NlNzVmN2R8MHwwfDF8b3Blbl9hcGkifQ=="
);
// this.player.connect(
// "rtsp://admin:Gemho120611@192.168.0.26:554/h264/ch1/main/av_stream"
// );
},
getList() {
this.videoData = null;
......
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