修改看板

IOT
夜笙歌 3 months ago
parent e5f919bbee
commit 11456eb95d

@ -6237,14 +6237,14 @@
} else {
g = w[S].szId
}
var u = '<div class="parent-wnd" style="overflow:hidden;width:100%; height:100%; position: relative;">';
var u = '<div class="parent-wnd" style="width:100%; height:100%; position: relative;">';
for (var f = 0; f < w[_]; f++) {
e = r + (f % l === l - 1 ? i : 0);
t = o + (f + l >= Math.pow(l, 2) ? n : 0);
var h = a + (f % l === l - 1 ? i : 0);
var c = s + (f + l >= Math.pow(l, 2) ? n : 0);
if (f === 1) {
u += '<div style="float:left; background-color: ' + w[S].oStyle.background + "; position: absolute;top:0;left:-100%; width: " + h + "px; height: " + c + 'px;">' + '<canvas id="canvas' + f + '" class="play-window" wid="' + f + '" width="' + h + '" height="' + c + '"></canvas>' + (f === 0 ? '<img style="display:none;" id="playImg' + f + '" src="">' : "") + '<canvas id="canvas_draw' + f + '" class="draw-window" style="border:1px solid ' + w[S].oStyle.border + ';position:absolute; top:0; left:0;" wid="' + f + '" width=' + e + " height=" + t + "></canvas>" + "</div>"
u += '<div style="float:left; background-color: ' + w[S].oStyle.background + "; position: absolute;top:0;left:calc(-100% - 1.4vw); width: " + h + "px; height: " + c + 'px;">' + '<canvas id="canvas' + f + '" class="play-window" wid="' + f + '" width="' + h + '" height="' + c + '"></canvas>' + (f === 0 ? '<img style="display:none;" id="playImg' + f + '" src="">' : "") + '<canvas id="canvas_draw' + f + '" class="draw-window" style="border:1px solid ' + w[S].oStyle.border + ';position:absolute; top:0; left:0;" wid="' + f + '" width=' + e + " height=" + t + "></canvas>" + "</div>"
} else {
u += '<div style="float:left; background-color: ' + w[S].oStyle.background + "; position: relative; width: " + h + "px; height: " + c + 'px;">' + '<canvas id="canvas' + f + '" class="play-window" wid="' + f + '" width="' + h + '" height="' + c + '"></canvas>' + (f === 0 ? '<img style="display:none;" id="playImg' + f + '" src="">' : "") + '<canvas id="canvas_draw' + f + '" class="draw-window" style="border:1px solid ' + w[S].oStyle.border + ';position:absolute; top:0; left:0;" wid="' + f + '" width=' + e + " height=" + t + "></canvas>" + "</div>"
@ -6349,9 +6349,10 @@
}()
}
setTimeout(()=>{
setTimeout(() => {
w.EventCallback.windowEventSelect(1)
},1000)
}, 3000)
function L() {
e();
g.find(".parent-wnd").eq(0).children().each(function (n) {

@ -0,0 +1,2 @@
import request from '@/utils/request'

@ -0,0 +1,51 @@
import request from '@/utils/request'
export function baseMonitorInfoList(query) {
return request({
url: '/ems/base/baseMonitorInfo/list',
method: 'get',
params: query
})
}
export function countCabinet(query) {
return request({
url: '/base/baseCabinetInfo/countCabinet',
method: 'post',
params: query
})
}
export function selectLastTWTempertureData(query) {
return request({
url: '/ems/record/recordIOTInstant/selectLastTWTempertureData',
method: 'post',
params: {}
})
}
export function boardTempList(query) {
return request({
url: '/record/recordBusbarTemp/boardTempList',
method: 'post',
params: query
})
}
export function recordBusbarAlarmCount(query) {
return request({
url: '/record/recordBusbarAlarm/recordBusbarAlarmCount',
method: 'post',
params: query
})
}
export function recordBusbarAlarmList(query) {
return request({
url: '/record/recordBusbarAlarm/recordBusbarAlarmList',
method: 'post',
params: query
})
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 390 KiB

@ -8,7 +8,7 @@ import { isRelogin } from '@/utils/request'
NProgress.configure({ showSpinner: false })
const whiteList = ['/login', '/register','/board/index','/board/index1','/board/index2']
const whiteList = ['/login', '/register','/board/index','/board/index1','/board/index2','/board/index3']
router.beforeEach((to, from, next) => {
NProgress.start()

@ -92,6 +92,12 @@ export const constantRoutes = [
name: 'Board3',
meta: { title: '看板3', icon: 'dashboard' }
},
{
path: 'index3',
component: () => import('@/views/board/index3'),
name: 'Board4',
meta: { title: '看板4', icon: 'dashboard' }
},
]
},
{

@ -592,28 +592,27 @@ export default {
},
methods: {
getData() {
// WebSocket
const socket = new WebSocket('ws://192.168.2.165:7181/ws');
// WebSocket
socket.onopen = function (event) {
console.log('WebSocket 连接已打开');
};
//
socket.onmessage = function (event) {
if (event.data.AlarmInfo) {
this.AlarmInfo = event.data.AlarmInfo
let data = JSON.parse(event.data)
if (data.AlarmInfo) {
this.AlarmInfo = data.AlarmInfo
}
if (event.data.DeviceInfo) {
this.DeviceInfo = event.data.DeviceInfo
if (data.DeviceInfo) {
this.DeviceInfo = data.DeviceInfo
}
if (event.data.TemParam) {
this.TemParam = event.data.TemParam
if (data.TemParam) {
this.TemParam = data.TemParam
}
};
// WebSocket
socket.onclose = function (event) {
console.log('WebSocket 连接已关闭');
};

@ -8,14 +8,14 @@
<div class="span" style="color: #46c9f9;top: 29%;left: 6.8%">智能巡检</div>
<div class="span" style="color: #4befb7;top: 29%;left: 15.3%">无线测温</div>
<div class="span" style="color: #f3de40;top: 29%;left: 23.7%">动力环境</div>
<div class="span1" style="color: #f3de40;top: 32%;left: 6.8%;font-weight: 700">1</div>
<div class="span1" style="color: #f3de40;top: 32%;left: 15.3%;font-weight: 700">30</div>
<div class="span1" style="color: #f3de40;top: 32%;left: 23.7%;font-weight: 700">15</div>
<div class="span1" style="color: #f3de40;top: 32%;left: 6.8%;font-weight: 700">{{ data1.num1 }}</div>
<div class="span1" style="color: #f3de40;top: 32%;left: 15.3%;font-weight: 700">{{ data1.num2 }}</div>
<div class="span1" style="color: #f3de40;top: 32%;left: 23.7%;font-weight: 700">{{ data1.num3 }}</div>
<div class="span2" style="color: #46c9f9;top: 49.7%;left: 9.6%"><span
style="font-weight: 600;font-size:1.3vw;">13</span>
style="font-weight: 600;font-size:1.3vw;">{{ data2.num1 }}</span>
</div>
<div class="span2" style="color: #46c9f9;top: 49.7%;left:21.1%"><span
style="font-weight: 600;font-size:1.3vw;">30</span>
style="font-weight: 600;font-size:1.3vw;">{{ data2.num2 }}</span>
</div>
<div class="span" style="color: #eee;top: 56%;left: 9.4%">温度</div>
<div class="span" style="color: #eee;top: 56%;left: 20.9%">湿度</div>
@ -23,9 +23,9 @@
<div class="span" style="font-size: 0.6vw;color: #eee;top: 64.5%;left: 13%">410-1烟感</div>
<div class="span" style="font-size: 0.6vw;color: #eee;top: 64.5%;left:17%">410-2烟感</div>
<div class="span" style="font-size: 0.6vw;color: #eee;top: 64.5%;left: 24.8%">噪声</div>
<div class="span2" style="color: #46c9f9;top:61.8%;left:24.8%;font-size: 0.9vw">40db
<div class="span2" style="color: #46c9f9;top:61.8%;left:24.8%;font-size: 0.9vw">{{ data2.num4 }}db
</div>
<div class="span2" style="color: #46c9f9;top:61.8%;left:5.9%;font-size: 0.9vw">60
<div class="span2" style="color: #46c9f9;top:61.8%;left:5.9%;font-size: 0.9vw">{{ data2.num3 }}
</div>
<div class="span3" style="color: #3597df;top: 30%;left: 50%">设备监控</div>
@ -72,7 +72,7 @@
>
<div :style='"background-color:" + ((index % 2 === 0)? "#1077bc19":"#1077bc05") '>
<div class="scrollTableItem" style="width:22%;color:#65c2f3;">
{{ item.value1 }}
{{ item.recordTime }}
</div>
<div class="scrollTableItem" style="width:16%;color:#65c2f3;">
{{ item.value2 }}
@ -98,6 +98,12 @@
<script>
import Chart from '@/components/Charts/Chart'
import vueSeamlessScroll from 'vue-seamless-scroll'
import {
baseMonitorInfoList,
countCabinet,
boardTempList,
selectLastTWTempertureData, recordBusbarAlarmCount, recordBusbarAlarmList
} from "@/api/board/index2";
export default {
data() {
@ -112,17 +118,7 @@ export default {
singleWidth: 0, // (0) direction => 2/3
waitTime: 0,
},
scrollTableData: Array(0).fill('').map(function (i, k) {
return {
value1: '2222-22-22 22:22:22',
value2: '设备1',
value3: '1级',
value4: '温度过高',
value5: '巡检对象名称1',
value6: '【一般警告】噪音>60db',
value7: '无',
}
}),
scrollTableData: [],
subTitleList: [
{
name: '场景统计',
@ -150,6 +146,17 @@ export default {
left: 72.8
},
],
data1:{
num1:1,
num2:30,
num3:15
},
data2:{
num1:0,
num2:0,
num3:0,
num4:0
}
}
},
components: {
@ -158,237 +165,237 @@ export default {
},
mounted() {
this.getData()
this.$refs.chart1.setData({
grid: {
top: 30,
left: '2%',
right: '5%',
bottom: '2%',
containLabel: true
},
legend: {
textStyle: {
color: '#fff'
}
},
tooltip: {
trigger: 'axis'
},
xAxis: {
type: 'category',
data: ['D01', 'D02', 'D03', 'D04', 'D05', 'D06', 'D07', 'C01', 'C02', 'C03', 'C04', 'C05', 'C06', 'C07'],
axisLabel: {
margin: 10,
color: '#ffffff63'
},
axisLine: {
show: false
},
axisTick: {
show: true,
lineStyle: {
color: '#ffffff1f'
}
},
splitLine: {
show: true,
lineStyle: {
type: 'dashed',
color: '#ffffff1f'
}
}
},
yAxis: [
{
type: 'value',
axisLabel: {
margin: 10,
color: '#ffffff63'
},
},
methods: {
getData(){
axisTick: {
show: true,
lineStyle: {
color: '#ffffff1f'
}
},
splitLine: {
show: true,
lineStyle: {
type: 'dashed',
color: '#ffffff1f'
}
},
axisLine: {
lineStyle: {
color: '#fff',
width: 2
}
}
baseMonitorInfoList().then(e=>{
this.data1.num2 = e.data.filter(v=>v.monitorType === 1).length
this.data1.num3 = e.data.filter(v=>v.monitorType !== 1).length
})
countCabinet().then(e=>{
this.data1.num1 = e
})
selectLastTWTempertureData().then(e=>{
this.data2 = {
num1:e?.tempreture || 0,
num2:e?.humidity || 0,
num3:e?.illuminance || 0,
num4:e?.noise || 0,
}
],
series: [
{
name: '温度',
type: 'line',
smooth: true, //线
showAllSymbol: true,
symbol: 'circle',
symbolSize: 6,
lineStyle: {
normal: {
color: '#fff' // 线
}
})
boardTempList().then(e=>{
this.$refs.chart1.setData({
grid: {
top: 30,
left: '2%',
right: '5%',
bottom: '2%',
containLabel: true
},
label: {
show: true,
position: 'top',
legend: {
textStyle: {
color: '#fff'
}
},
itemStyle: {
color: 'red',
borderColor: '#fff',
borderWidth: 3
},
tooltip: {
// show: false,
},
data: Array(14).fill(0).map(e => {
return 30 + parseFloat((Math.random() * 20).toFixed(0))
}),
},
]
})
this.$refs.chart2.setData({
grid: {
top: 30,
left: '2%',
right: '5%',
bottom: '2%',
containLabel: true
},
legend: {
textStyle: {
color: '#fff'
}
},
tooltip: {
trigger: 'axis'
},
xAxis: {
type: 'category',
data: Array(5).fill(0).map((i, k) => {
return '12-0' + (k + 1)
}),
axisLabel: {
margin: 10,
color: '#ffffff63'
},
axisLine: {
show: false
},
axisTick: {
show: true,
lineStyle: {
color: '#ffffff1f'
}
},
splitLine: {
show: true,
lineStyle: {
type: 'dashed',
color: '#ffffff1f'
}
}
},
yAxis: [
{
type: 'value',
axisLabel: {
margin: 10,
color: '#ffffff63'
},
axisTick: {
show: true,
lineStyle: {
color: '#ffffff1f'
}
tooltip: {
trigger: 'axis'
},
splitLine: {
show: true,
lineStyle: {
type: 'dashed',
color: '#ffffff1f'
xAxis: {
type: 'category',
data: e.data.map(v=>v.cabinetAlias),
axisLabel: {
margin: 10,
color: '#ffffff63'
},
axisLine: {
show: false
},
axisTick: {
show: true,
lineStyle: {
color: '#ffffff1f'
}
},
splitLine: {
show: true,
lineStyle: {
type: 'dashed',
color: '#ffffff1f'
}
}
},
axisLine: {
lineStyle: {
color: '#fff',
width: 2
}
}
}
],
series: [
{
name: '次数',
type: 'line',
smooth: true, //线
showAllSymbol: true,
symbol: 'circle',
symbolSize: 6,
lineStyle: {
normal: {
color: '#ff0' // 线
yAxis: [
{
type: 'value',
axisLabel: {
margin: 10,
color: '#ffffff63'
},
axisTick: {
show: true,
lineStyle: {
color: '#ffffff1f'
}
},
splitLine: {
show: true,
lineStyle: {
type: 'dashed',
color: '#ffffff1f'
}
},
axisLine: {
lineStyle: {
color: '#fff',
width: 2
}
}
}
],
series: [
{
name: '温度',
type: 'line',
smooth: true, //线
showAllSymbol: true,
symbol: 'circle',
symbolSize: 6,
lineStyle: {
normal: {
color: '#fff' // 线
}
},
label: {
show: true,
position: 'top',
textStyle: {
color: '#fff'
}
},
itemStyle: {
color: 'red',
borderColor: '#fff',
borderWidth: 3
},
tooltip: {
// show: false,
},
data: e.data.map(v=>v.tempMax),
},
]
})
})
recordBusbarAlarmCount().then(e=>{
this.$refs.chart2.setData({
grid: {
top: 30,
left: '2%',
right: '5%',
bottom: '2%',
containLabel: true
},
label: {
show: true,
position: 'top',
legend: {
textStyle: {
color: '#fff'
}
},
itemStyle: {
color: 'red',
borderColor: '#fff',
borderWidth: 3
},
tooltip: {
// show: false,
trigger: 'axis'
},
data: Array(5).fill(0).map(e => {
return 0 + parseFloat((Math.random() * 5).toFixed(0))
}),
}
]
})
},
methods: {
getData(){
// WebSocket
const socket = new WebSocket('ws://192.168.2.165:7181/ws');
// WebSocket
socket.onopen = function(event) {
console.log('WebSocket 连接已打开');
};
//
socket.onmessage = function(event) {
console.log('收到消息:', event.data);
};
// WebSocket
socket.onclose = function(event) {
console.log('WebSocket 连接已关闭');
};
xAxis: {
type: 'category',
data: e.data.map(v=>v.recordDate),
axisLabel: {
margin: 10,
color: '#ffffff63'
},
axisLine: {
show: false
},
axisTick: {
show: true,
lineStyle: {
color: '#ffffff1f'
}
},
splitLine: {
show: true,
lineStyle: {
type: 'dashed',
color: '#ffffff1f'
}
}
},
yAxis: [
{
type: 'value',
axisLabel: {
margin: 10,
color: '#ffffff63'
},
axisTick: {
show: true,
lineStyle: {
color: '#ffffff1f'
}
},
splitLine: {
show: true,
lineStyle: {
type: 'dashed',
color: '#ffffff1f'
}
},
axisLine: {
lineStyle: {
color: '#fff',
width: 2
}
}
}
],
series: [
{
name: '次数',
type: 'line',
smooth: true, //线
showAllSymbol: true,
symbol: 'circle',
symbolSize: 6,
lineStyle: {
normal: {
color: '#ff0' // 线
}
},
label: {
show: true,
position: 'top',
textStyle: {
color: '#fff'
}
},
itemStyle: {
color: 'red',
borderColor: '#fff',
borderWidth: 3
},
tooltip: {
// show: false,
},
data: e.data.map(v=>v.alarmCount),
}
]
})
})
recordBusbarAlarmList().then(e=>{
console.log(e)
this.scrollTableData = e.data
})
}
}
}

@ -0,0 +1,188 @@
<template>
<div>
<div class="content">
<div class="title">赛轮智慧热电无人巡检系统</div>
<div class="subTitle" v-for="i in subTitleList" :style="`top:${i.top}%;left:${i.left}%`">{{ i.name }}</div>
<div class="time">{{ parseTime(new Date(), '{y}.{m}.{d} {h}:{i}:{s} 周{a}') }}</div>
<div class="span" style="color: #3597df;top: 19.5%;left: 38.7%;">A项温度</div>
<div class="span" style="color: #3597df;top: 19.5%;left: 54.7%;">B项温度</div>
<div class="span" style="color: #3597df;top: 31.2%;left: 38.7%;">C项温度</div>
<div class="span" style="color: #3597df;top: 31.2%;left: 54.7%;">D项温度</div>
<div class="span" style="color: #3597df;top: 48.6%;left: 38.7%;">A项温度</div>
<div class="span" style="color: #3597df;top: 48.6%;left: 54.7%;">B项温度</div>
<div class="span" style="color: #3597df;top: 60.5%;left: 38.7%;">C项温度</div>
<div class="span" style="color: #3597df;top: 60.5%;left: 54.7%;">D项温度</div>
<div class="span" style="color: #3597df;top: 78.1%;left: 38.7%;">1#烟感</div>
<div class="span" style="color: #3597df;top: 78.1%;left: 54.7%;">2#烟感</div>
<div class="span" style="color: #3597df;top: 89.8%;left: 38.7%;">3#烟感</div>
<div class="span" style="color: #3597df;top: 89.8%;left: 54.7%;">4#烟感</div>
<div class="span1" style="color: #3597df;top: 19.5%;left: 45.5%"><span
style="font-size: 1.6vw;font-weight: 700;margin: 0 0.5vw">0</span>
</div>
<div class="span1" style="color: #3597df;top: 19.5%;left: 61.7%"><span
style="font-size: 1.6vw;font-weight: 700;margin: 0 0.5vw">0</span>
</div>
<div class="span1" style="color: #3597df;top: 31.2%;left: 45.5%"><span
style="font-size: 1.6vw;font-weight: 700;margin: 0 0.5vw">0</span>
</div>
<div class="span1" style="color: #3597df;top: 31.2%;left: 61.7%"><span
style="font-size: 1.6vw;font-weight: 700;margin: 0 0.5vw">0</span>
</div>
<div class="span1" style="color: #3597df;top: 48.6%;left: 45.5%"><span
style="font-size: 1.6vw;font-weight: 700;margin: 0 0.5vw">0</span>
</div>
<div class="span1" style="color: #3597df;top: 48.6%;left: 61.7%"><span
style="font-size: 1.6vw;font-weight: 700;margin: 0 0.5vw">0</span>
</div>
<div class="span1" style="color: #3597df;top: 60.5%;left: 45.5%"><span
style="font-size: 1.6vw;font-weight: 700;margin: 0 0.5vw">0</span>
</div>
<div class="span1" style="color: #3597df;top: 60.5%;left: 61.7%"><span
style="font-size: 1.6vw;font-weight: 700;margin: 0 0.5vw">0</span>
</div>
<div class="span1" style="color: #3597df;top: 78.1%;left: 45.5%"><span
style="font-size: 1.6vw;font-weight: 700;margin: 0 0.5vw">0.5</span>db/m
</div>
<div class="span1" style="color: #3597df;top: 78.1%;left: 61.7%"><span
style="font-size: 1.6vw;font-weight: 700;margin: 0 0.5vw">0.5</span>db/m
</div>
<div class="span1" style="color: #3597df;top: 89.8%;left: 45.5%"><span
style="font-size: 1.6vw;font-weight: 700;margin: 0 0.5vw">0.5</span>db/m
</div>
<div class="span1" style="color: #3597df;top: 89.8%;left: 61.7%"><span
style="font-size: 1.6vw;font-weight: 700;margin: 0 0.5vw">0.5</span>db/m
</div>
</div>
</div>
</template>
<script>
import Chart from '@/components/Charts/Chart'
import vueSeamlessScroll from 'vue-seamless-scroll'
import {
baseMonitorInfoList,
countCabinet,
boardTempList,
selectLastTWTempertureData, recordBusbarAlarmCount
} from "@/api/board/index2";
export default {
data() {
return {
subTitleList: [
{
name: '湿度曲线',
top: 11.2,
left: 3
},
{
name: '照度',
top: 40.5,
left: 3
},
{
name: '颗粒物柱状图',
top: 69.6,
left: 30.8
},
{
name: '1#变压器测温',
top: 11.2,
left: 35.4
},
{
name: '2#变压器测温',
top: 40.5,
left: 35.4
},
{
name: '烟感',
top: 69.6,
left: 35.4
},
{
name: '告警统计',
top: 11.2,
left: 68
},
{
name: '未处理报警',
top: 55.1,
left: 68
},
],
}
},
components: {
vueSeamlessScroll,
Chart
},
mounted() {
this.getData()
},
methods: {
getData() {
}
}
}
</script>
<style scoped>
.content {
background-image: url("~@/assets/board/bg3.jpg");
background-size: 100% 100%;
background-repeat: no-repeat;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.subTitle {
position: absolute;
transform: translateY(-50%);
font-size: 0.9vw;
color: #fff;
letter-spacing: 2px;
}
.title {
position: absolute;
top: 2.8%;
left: 0;
width: 100%;
text-align: center;
font-size: 1.5vw;
color: #fff;
font-weight: 700;
letter-spacing: 10px;
transform: translateY(-50%);
}
.time {
position: absolute;
top: 2.4%;
left: 2%;
transform: translateY(-50%);
color: #fff;
font-size: 0.7vw;
letter-spacing: 1px;
}
.span {
position: absolute;
transform: translateY(-50%);
font-size: 0.9vw;
letter-spacing: 1px;
}
.span1 {
position: absolute;
transform: translate(-50%, -50%);
font-size: 0.9vw;
letter-spacing: 1px;
}
</style>

@ -1,7 +1,7 @@
<template>
<div>
<div class="aaa">
<el-button @click="aaaa" type="primary">主要按钮</el-button>
<!-- <el-button @click="aaaa" type="primary">主要按钮</el-button>-->
</div>
<div id="divPlugin" class="plugin"></div>
</div>
@ -81,7 +81,7 @@ export default {
}, 500)
setTimeout(() => {
clickStartRealPlay1()
}, 1500)
}, 5000)
}, 10);
},
error: function (status, xmlDoc) {

Loading…
Cancel
Save