xins
/
highwaysass
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

上传电子围栏

Browse Source
dev
夜笙歌 1 year ago
parent bcccd60a6b
commit c88f1bbf83
7 changed files with 599 additions and 695 deletions
Show Stats Download Patch File Download Diff File

22
ruoyi-ui/src/api/board/GPS.js
Unescape Escape View File

@ -4,7 +4,7 @@ import request from '@/utils/request'
export function alarmStats(query) { export function alarmStats(query) {
return request({ return request({
// baseURL:'/monitoring-api', // baseURL:'/monitoring-api',
url: '/business/monitorPlatform/alarmStats', url: '/business/monitorPlatform/alarmStats/1',
method: 'get', method: 'get',
}) })
} }
@ -12,7 +12,23 @@ export function alarmStats(query) {
export function subDevice(query) { export function subDevice(query) {
return request({ return request({
// baseURL:'/monitoring-api', // baseURL:'/monitoring-api',
url: '/business/monitorPlatform/SubDevice', url: '/business/monitorPlatform/subDevice/1',
method: 'post', method: 'get',
})
}
// 左下
export function getAlarmInfos(query) {
return request({
// baseURL:'/monitoring-api',
url: '/business/monitorPlatform/getAlarmInfos',
method: 'get',
})
}
// 右下
export function ElectronicNumVo(query) {
return request({
// baseURL:'/monitoring-api',
url: '/business/monitorPlatform/ElectronicNumVo/1',
method: 'get',
}) })
} }

18
ruoyi-ui/src/api/board/index.js
Unescape Escape View File

@ -26,3 +26,21 @@ export function allNums(query) {
method: 'get', method: 'get',
}) })
} }
// 右下
export function getAlarmInfos(query) {
return request({
// baseURL:'/monitoring-api',
url: '/business/monitorPlatform/getAlarmInfos',
method: 'get',
})
}
// 右上
export function getDeviceOperations(query) {
return request({
// baseURL:'/monitoring-api',
url: '/business/monitorPlatform/getDeviceOperations/1',
method: 'get',
})
}

29
ruoyi-ui/src/api/board/smartScene.js
Unescape Escape View File

@ -4,7 +4,34 @@ import request from '@/utils/request'
export function sceneAllNums(query) { export function sceneAllNums(query) {
return request({ return request({
// baseURL:'/monitoring-api', // baseURL:'/monitoring-api',
url: '/business/monitorPlatform/sceneAllNums', url: '/business/monitorPlatform/sceneAllNums/1',
method: 'get',
})
}
// 右
export function getLimitSubMonitorUnit(query) {
return request({
// baseURL:'/monitoring-api',
url: '/business/monitorPlatform/limitSubMonitorUnit/1',
method: 'get',
})
}
// 左中
export function getAlarmCountGroupAlarmType(query) {
return request({
// baseURL:'/monitoring-api',
url: '/business/monitorPlatform/getAlarmCountGroupAlarmType/1',
method: 'get',
})
}
// 左下
export function getAlarmInfos(query) {
return request({
// baseURL:'/monitoring-api',
url: '/business/monitorPlatform/getAlarmInfos',
method: 'get', method: 'get',
}) })
} }

2
ruoyi-ui/src/main.js
Unescape Escape View File

@ -67,7 +67,7 @@ Vue.component('ImagePreview', ImagePreview)
AMapLoader.load({ AMapLoader.load({
'key': '268909dc36fd438908a64ebe057bfb17', 'key': '268909dc36fd438908a64ebe057bfb17',
'version': '2.0', 'version': '2.0',
'plugins': ['AMap.Scale','AMap.GeoJSON'] 'plugins': ['AMap.Scale','AMap.GeoJSON','AMap.MarkerClusterer','AMap.PolygonEditor','AMap.Polygon','AMap.CircleEditor']
}).then((AMap) => { }).then((AMap) => {
Vue.use(AMap) Vue.use(AMap)
}) })

183
ruoyi-ui/src/views/board/GPS/index.vue
Unescape Escape View File

@ -19,7 +19,7 @@
</div> </div>
</div> </div>
<vue-seamless-scroll <vue-seamless-scroll
:class-option="table1Data" :class-option="{...chart1TableOption,limitMoveNum:10}"
:data="table1Data" :data="table1Data"
class="case-item" class="case-item"
style="height: 84%;overflow: hidden;" style="height: 84%;overflow: hidden;"
@ -55,11 +55,11 @@
<div class="info1">监控单元数量</div> <div class="info1">监控单元数量</div>
<div class="info2">设备数量</div> <div class="info2">设备数量</div>
<div class="info3">在线设备数量</div> <div class="info3">在线设备数量</div>
<div class="num1">20</div> <div class="num1">{{ num1 }}</div>
<div class="num2">20</div> <div class="num2">{{ num2 }}</div>
<div class="num3">20</div> <div class="num3">{{ num3 }}</div>
</div> </div>
<div class="map" id="map"></div> <div id="map" class="map"></div>
</div> </div>
</template> </template>
@ -70,12 +70,15 @@ import vueSeamlessScroll from "vue-seamless-scroll";
import * as echarts from 'echarts'; import * as echarts from 'echarts';
import { import {
alarmStats, alarmStats,
subDevice subDevice,
getAlarmInfos,
ElectronicNumVo
} from '@/api/board/GPS' } from '@/api/board/GPS'
let map = null
import red from '@/assets/board/GPS/red.png' import red from '@/assets/board/GPS/red.png'
import green from '@/assets/board/GPS/green.png' import green from '@/assets/board/GPS/green.png'
let map = null
let polyEditor = null
export default { export default {
components: { components: {
Chart, Chart,
@ -84,28 +87,19 @@ export default {
}, },
data() { data() {
return { return {
chart1Data: [ num1: 0,
{ num2: 0,
value: 12, num3: 0,
name: '监控单元1', chart1TableOption: {
}, step: 0.5, // 数值越大速度滚动越快
{ limitMoveNum: 3, // 开始无缝滚动的数据量 this.dataList.length
value: 23, hoverStop: true, // 是否开启鼠标悬停stop
name: '监控单元2', direction: 1, // 0向下 1向上 2向左 3向右
}, openWatch: true, // 开启数据实时监控刷新dom
{ singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
value: 34, singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
name: '监控单元3', waitTime: 0,
}, },
{
value: 45,
name: '监控单元4',
},
{
value: 55,
name: '监控单元5',
}
],
chart1Option: { chart1Option: {
grid: { grid: {
left: "0%", left: "0%",
@ -138,92 +132,48 @@ export default {
boundaryGap: [0, 0.01], boundaryGap: [0, 0.01],
}, },
}, },
table1Data: [ table1Data: []
{
value1: '001',
value2: '高温预警',
value3: '车间',
},
{
value1: '001',
value2: '高温预警',
value3: '车间',
},
{
value1: '001',
value2: '高温预警',
value3: '车间',
},
{
value1: '001',
value2: '高温预警',
value3: '车间',
},
{
value1: '001',
value2: '高温预警',
value3: '车间',
},
{
value1: '001',
value2: '高温预警',
value3: '车间',
},
{
value1: '001',
value2: '高温预警',
value3: '车间',
},
{
value1: '001',
value2: '高温预警',
value3: '车间',
},
{
value1: '001',
value2: '高温预警',
value3: '车间',
},
{
value1: '001',
value2: '高温预警',
value3: '车间',
},
{
value1: '001',
value2: '高温预警',
value3: '车间',
},
]
} }
}, },
mounted() { mounted() {
this.createMap() this.createMap()
this.setMarker()
this.getAlarmStats() this.getAlarmStats()
this.getAubDevice()
this.setAlarmInfos()
this.setElectronicNumVo()
}, },
methods: { methods: {
createMap(){ createMap() {
map = new AMap.Map('map', { map = new AMap.Map('map', {
zoom: 11, zoom: 11,
zooms: [8, 20],
center: [113.4, 23.35], center: [113.4, 23.35],
}); });
}, },
setMarker(){ setMarker(position) {
var marker = new AMap.Marker({ let marker =new AMap.Marker({
position: [113.2, 23.35], position: position,
icon: red, icon: red,
}); })
var marker1 = new AMap.Marker({
position: [113.6, 23.35],
icon: green,
});
map.add(marker) map.add(marker)
map.add(marker1) map.setFitView()
},
setCircle(center,radius) {
let circle =new AMap.Circle({
center,
radius,
borderWeight: 3,
strokeColor: "#FF33FF",
strokeWeight: 6,
strokeOpacity: 0.2,
fillOpacity: 0.4,
strokeDasharray: [10, 10],
fillColor: '#1791fc',
})
map.add(circle);
map.setFitView()
}, },
async getAlarmStats(){ async getAlarmStats() {
const {rows:data} = await alarmStats() const {data} = await alarmStats()
let option1 = { let option1 = {
...this.chart1Option, ...this.chart1Option,
yAxis: { yAxis: {
@ -270,9 +220,35 @@ export default {
} }
this.$refs.chart1.setData(option1) this.$refs.chart1.setData(option1)
}, },
async getAubDevice(){ async getAubDevice() {
let data = await subDevice() let data = await subDevice()
this.num1 = data.deviceNum
this.num2 = data.onlineDeviceNum
this.num3 = data.subSum
},
async setAlarmInfos() {
const {rows: data} = await getAlarmInfos()
this.table1Data = data.map((e, i) => {
return {
value1: i,
value2: '高温预警',
value3: e.monitorUnitName,
}
})
},
async setElectronicNumVo() {
const {data} = await ElectronicNumVo()
console.log(data) console.log(data)
data.forEach(e => {
if (e.areaPoints?.length > 0) {
e.areaPoints.forEach(val => {
this.setMarker([val.longitude,val.latitude])
})
}
if(e.centerPoint){
this.setCircle([e.centerPoint.longitude,e.centerPoint.latitude],e.radius)
}
})
} }
} }
}; };
@ -387,7 +363,8 @@ export default {
font-size: 1.4vw; font-size: 1.4vw;
color: #fff; color: #fff;
} }
.map{
.map {
position: absolute; position: absolute;
top: 28%; top: 28%;
left: 31%; left: 31%;

277
ruoyi-ui/src/views/board/index/index.vue
Unescape Escape View File

@ -39,11 +39,11 @@
</div> </div>
<div <div
class="scrollTable"> class="scrollTable">
{{ item.value2 }} {{ item.value }}
</div> </div>
<div <div
class="scrollTable"> class="scrollTable">
{{ item.value }} {{ item.value2 }}
</div> </div>
</div> </div>
</div> </div>
@ -83,7 +83,10 @@
</div> </div>
<div> <div>
<div class="centerInfo">传感器数量</div> <div class="centerInfo">传感器数量</div>
<div class="centerInfo" style="font-weight:bold;top:19.3%;left: 42.5%;font-size: 2vw;">{{ centerNum.subSum }}</div> <div class="centerInfo" style="font-weight:bold;top:19.3%;left: 42.5%;font-size: 2vw;">{{
centerNum.subSum
}}
</div>
<div class="centerInfo" style="left: 56%">监控单元数量</div> <div class="centerInfo" style="left: 56%">监控单元数量</div>
<div class="centerInfo" style="font-weight:bold;top:19.3%;left: 66%;font-size: 2vw;">{{ centerNum.sum }}</div> <div class="centerInfo" style="font-weight:bold;top:19.3%;left: 66%;font-size: 2vw;">{{ centerNum.sum }}</div>
</div> </div>
@ -105,7 +108,7 @@
</div> </div>
</div> </div>
<vue-seamless-scroll <vue-seamless-scroll
:class-option="chart1TableOption" :class-option="{...chart1TableOption,limitMoveNum:10}"
:data="table1Data" :data="table1Data"
class="case-item" class="case-item"
style="height: calc(100% - 33px);overflow: hidden;" style="height: calc(100% - 33px);overflow: hidden;"
@ -142,18 +145,21 @@ import * as echarts from 'echarts';
import { import {
monitorUnitPercentage, monitorUnitPercentage,
monitorPercentage, monitorPercentage,
allNums allNums,
getAlarmInfos,
getDeviceOperations
} from '@/api/board/index' } from '@/api/board/index'
export default { export default {
components: { components: {
vueSeamlessScroll, vueSeamlessScroll,
Chart, Chart,
BoardTopNav BoardTopNav,
}, },
data() { data() {
return { return {
centerNum:{}, centerNum: {},
chart1Option: { chart1Option: {
tooltip: {}, tooltip: {},
angleAxis: { angleAxis: {
@ -191,28 +197,7 @@ export default {
singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3 singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
waitTime: 0, waitTime: 0,
}, },
chart2Data: [ chart2Data: [],
{
value: 111,
name: '无源温度传感器',
},
{
value: 111,
name: '有源温度传感器',
},
{
value: 111,
name: '烟雾传感器',
},
{
value: 111,
name: '温湿度传感器',
},
{
value: 111,
name: 'CO传感器',
}
],
chart2Option: { chart2Option: {
color: ["#22acfd", "#22fe97", "#f9e728", "#ff922b", "#ed1814"], color: ["#22acfd", "#22fe97", "#f9e728", "#ff922b", "#ed1814"],
legend: { legend: {
@ -263,29 +248,7 @@ export default {
}, },
], ],
}, },
inTransitNum: 1999, inTransitNum: 0,
chart3Data: [
{
date: '10-01',
value: '100',
},
{
date: '10-02',
value: '200',
},
{
date: '10-03',
value: '100',
},
{
date: '10-04',
value: '300',
},
{
date: '10-05',
value: '200',
},
],
chart3Option: { chart3Option: {
tooltip: { tooltip: {
trigger: "axis", trigger: "axis",
@ -320,126 +283,19 @@ export default {
}, },
}, },
}, },
table1Data: [ table1Data: []
{
no: '001',
type: '高温警告',
location: '车间',
},
{
no: '001',
type: '高温警告',
location: '车间',
},
{
no: '001',
type: '高温警告',
location: '车间',
},
{
no: '001',
type: '高温警告',
location: '车间',
},
{
no: '001',
type: '高温警告',
location: '车间',
},
{
no: '001',
type: '高温警告',
location: '车间',
},
{
no: '001',
type: '高温警告',
location: '车间',
},
{
no: '001',
type: '高温警告',
location: '车间',
},
{
no: '001',
type: '高温警告',
location: '车间',
},
{
no: '001',
type: '高温警告',
location: '车间',
},
{
no: '001',
type: '高温警告',
location: '车间',
},
]
} }
}, },
mounted() { mounted() {
let option3 = {
...this.chart3Option,
xAxis: {
boundaryGap: false,
type: "category",
data: this.chart3Data.map(e => e.date),
splitLine: {
show: true,
lineStyle: {
type: "dashed",
color: "#ccc3",
},
},
axisLine: {
lineStyle: {
color: "#999",
},
},
},
series: [
{
name: "",
type: "line",
data: this.chart3Data.map(e => e.value),
color: "#00dae0",
areaStyle: {
normal: {
color: new echarts.graphic.LinearGradient(
0,
0,
0,
1,
[
{
offset: 0,
color: "#00dae033",
},
{
offset: 1,
color: "rgba(0,202,149,0)",
},
],
false
),
shadowColor: "rgba(0,202,149, 0.9)",
shadowBlur: 20,
},
},
},
],
}
this.$refs.chart3.setData(option3)
this.setChart1() this.setChart1()
this.setChart2() this.setChart2()
this.setAllNums() this.setAllNums()
this.setTable3()
this.setDeviceOperations()
}, },
methods: { methods: {
async setChart1() { async setChart1() {
const {rows: data} = await monitorUnitPercentage() const {rows: data} = await monitorPercentage()
let option1 = { let option1 = {
...this.chart1Option, ...this.chart1Option,
series: [ series: [
@ -447,10 +303,10 @@ export default {
type: "bar", type: "bar",
data: data.map((e, i) => { data: data.map((e, i) => {
return { return {
value: e.percentage, value: parseFloat(e.percentage),
name: e.deviceModeName, name: e.sceneName,
itemStyle: { itemStyle: {
color: this.chart1Color[i] color: this.chart1Color[this.chart1Color.length % i]
} }
} }
}), }),
@ -466,29 +322,110 @@ export default {
return { return {
value: e.sum || 0, value: e.sum || 0,
value2: e.err || 0, value2: e.err || 0,
name: e.deviceModeName || '', name: e.sceneName || '',
} }
}) })
}, },
async setChart2() { async setChart2() {
const {rows: data} = await monitorPercentage() const {rows: data} = await monitorUnitPercentage()
let chart2Num = eval(data.map(e => e.sum).join("+")); let chart2Num = eval(data.map(e => e.sum).join("+"));
let option2 = { let option2 = {
...this.chart2Option, ...this.chart2Option,
dataset: { dataset: {
source: [ source: [
["group", "占比"], ["group", "占比"],
...data.map(e => [e.sceneName, (e.sum / chart2Num) * 100]) ...data.map(e => [e.deviceModeName, parseFloat(e.percentage)])
], ],
} }
} }
this.$refs.chart2.setData(option2) this.$refs.chart2.setData(option2)
this.chart2Data = data.map(e => {
return {
value: e.sum,
name: e.deviceModeName,
}
})
}, },
async setAllNums() { async setAllNums() {
const data = await allNums() const data = await allNums()
this.centerNum = data this.centerNum = data
} },
async setTable3(){
const {rows:data} = await getAlarmInfos()
this.table1Data = data.map((e,i) => {
return {
no: i,
type: '高温警告',
location: e.monitorUnitName,
}
})
},
async setDeviceOperations(){
const {data:data} = await getDeviceOperations()
console.log(data)
let x = Object.keys(data)
let y = Object.values(data)
this.inTransitNum = y.reduce((a,b)=> {
return a + b
},0)
let option3 = {
...this.chart3Option,
xAxis: {
boundaryGap: false,
type: "category",
data: x,
splitLine: {
show: true,
lineStyle: {
type: "dashed",
color: "#ccc3",
},
},
axisLine: {
lineStyle: {
color: "#999",
},
},
},
series: [
{
name: "",
type: "line",
data: y,
color: "#00dae0",
areaStyle: {
normal: {
color: new echarts.graphic.LinearGradient(
0,
0,
0,
1,
[
{
offset: 0,
color: "#00dae033",
},
{
offset: 1,
color: "rgba(0,202,149,0)",
},
],
false
),
shadowColor: "rgba(0,202,149, 0.9)",
shadowBlur: 20,
},
},
},
],
}
this.$refs.chart3.setData(option3)
},
} }
} }
; ;

763
ruoyi-ui/src/views/board/smartScene/index.vue
Unescape Escape View File

@ -1,518 +1,447 @@
<template> <template>
<div class="container"> <div class="container">
<BoardTopNav nowMenu="2"></BoardTopNav> <BoardTopNav nowMenu="2"></BoardTopNav>
<div class="num1">30</div> <div class="num1">{{ num1 }}</div>
<div class="num2">216</div> <div class="num2">{{ num2 }}</div>
<div class="num3">0</div> <div class="title1">监控单元</div>
<div class="num4">0</div> <div class="title2">传感器</div>
<div class="num5">0</div> <div v-for="(i,k) in alarmCountGroupAlarmType" :class="'num'+(k+3)">
<div class="num6">0</div> {{ i.alarmCount }}
<div class="num7">0</div> </div>
<div class="num8">0</div> <div v-for="(i,k) in alarmCountGroupAlarmType" :class="'title'+(k+3)">
<div class="title1">监控单元</div> {{ i.alarmTypeName }}
<div class="title2">传感器</div> </div>
<div class="title3">设备高温</div>
<div class="title4">设备振动</div> <div class="table1">
<div class="title5">烟雾火情</div> <div style="background-color: #094170">
<div class="title6">环境大风</div> <div class="scrollTable" style="font-weight: bold;width: 8%">
<div class="title7">柜内温度</div> 告警编号
<div class="title8">柜内冰浸</div> </div>
<div class="title9">告警信息</div> <div class="scrollTable" style="font-weight: bold;width: 8%">
<div class="title10">监控单元</div> 告警类型
</div>
<div class="table1"> <div class="scrollTable" style="font-weight: bold;width: 15%">
<div style="background-color: #094170"> 告警单元
<div class="scrollTable" style="font-weight: bold;width: 8%"> </div>
告警编号 <div class="scrollTable" style="font-weight: bold;width: 30%">
</div> 告警信息
<div class="scrollTable" style="font-weight: bold;width: 8%"> </div>
告警类型 <div class="scrollTable" style="font-weight: bold;width: 11%">
</div> 告警位置
<div class="scrollTable" style="font-weight: bold;width: 15%"> </div>
告警单元 <div class="scrollTable" style="font-weight: bold;width: 20%">
</div> 告警时间
<div class="scrollTable" style="font-weight: bold;width: 30%"> </div>
告警信息 <div class="scrollTable" style="font-weight: bold;width: 8%">
</div> 处理情况
<div class="scrollTable" style="font-weight: bold;width: 11%">
告警位置
</div>
<div class="scrollTable" style="font-weight: bold;width: 20%">
告警时间
</div>
<div class="scrollTable" style="font-weight: bold;width: 8%">
处理情况
</div>
</div>
<vue-seamless-scroll :class-option="chart1TableOption" :data="table1Data" class="case-item"
style="height: calc(100% - 33px);overflow: hidden;">
<div v-for="(item, index) in table1Data" :key="index">
<div :style='"background-color:" + ((index % 2 === 0) ? "#053460" : "#032d57")'>
<div class="scrollTable" style="width: 8%">
{{ item.data1 }}
</div>
<div class="scrollTable" style="width: 8%">
{{ item.data2 }}
</div>
<div class="scrollTable" style="width: 15%">
{{ item.data3 }}
</div>
<div class="scrollTable" style="width: 30%">
{{ item.data4 }}
</div>
<div class="scrollTable" style="width: 11%">
{{ item.data5 }}
</div>
<div class="scrollTable" style="width: 20%">
{{ item.data6 }}
</div>
<div class="scrollTable" style="width: 8%">
<span style="color: #67C23A;">已处理</span>
</div>
</div>
</div>
</vue-seamless-scroll>
</div> </div>
<div class="right"> </div>
<el-row> <vue-seamless-scroll :class-option="{...chart1TableOption,limitMoveNum:8}" :data="table1Data" class="case-item"
<el-col :span="12"> style="height: calc(100% - 33px);overflow: hidden;">
<div class="item"> <div v-for="(item, index) in table1Data" :key="index">
<div class="titleBg"></div> <div :style='"background-color:" + ((index % 2 === 0) ? "#053460" : "#032d57")'>
<div class="title"> <div class="scrollTable" style="width: 8%">
<span style="margin-right: 28px;"> 变压器 </span> {{ item.data1 }}
<el-tag type="success">正常</el-tag>
</div>
<div class="img"></div>
</div>
</el-col>
<el-col :span="12">
<div class="item">
<div class="titleBg"></div>
<div class="title">
<span style="margin-right: 28px;"> 变压器 </span>
<el-tag type="success">正常</el-tag>
</div>
<div class="img"></div>
</div>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<div class="item">
<div class="titleBg"></div>
<div class="title">
<span style="margin-right: 28px;"> 变压器 </span>
<el-tag type="success">正常</el-tag>
</div>
<div class="img"></div>
</div>
</el-col>
<el-col :span="12">
<div class="item">
<div class="titleBg"></div>
<div class="title">
<span style="margin-right: 28px;"> 变压器 </span>
<el-tag type="success">正常</el-tag>
</div>
<div class="img"></div>
</div>
</el-col>
</el-row>
<div class="pagination">
<el-pagination :page-size="20" :pager-count="11" layout="prev, pager, next" :total="1000">
</el-pagination>
</div> </div>
<div class="scrollTable" style="width: 8%">
{{ item.data2 }}
</div>
<div class="scrollTable" style="width: 15%">
{{ item.data3 }}
</div>
<div class="scrollTable" style="width: 30%">
{{ item.data4 }}
</div>
<div class="scrollTable" style="width: 11%">
{{ item.data5 }}
</div>
<div class="scrollTable" style="width: 20%">
{{ item.data6 }}
</div>
<div class="scrollTable" style="width: 8%">
<span style="color: #67C23A;">已处理</span>
</div>
</div>
</div> </div>
</vue-seamless-scroll>
</div>
<div class="right">
<el-row>
<el-col v-for="i in tableData" :key="i.monitorUnitId" :span="12">
<div class="item">
<div class="titleBg"></div>
<div class="title">
<span style="margin-right: 28px;"> {{ i.monitorUnitName }} </span>
<el-tag :type="i.alarmStatus === 1 ?'success' : 'danger'">{{ i.alarmStatus === 1 ? '正常' : '异常' }}</el-tag>
</div>
<div class="img"></div>
</div>
</el-col>
</el-row>
<div class="pagination">
<el-pagination :page-size="pageSize" :pager-count="11" :total="total" layout="prev, pager, next"
@current-change="currentChange">
</el-pagination>
</div>
</div> </div>
</div>
</template> </template>
<script> <script>
import vueSeamlessScroll from "vue-seamless-scroll"; import vueSeamlessScroll from "vue-seamless-scroll";
import BoardTopNav from '@/components/BoardTopNav' import BoardTopNav from '@/components/BoardTopNav'
import { import {
sceneAllNums sceneAllNums,
getLimitSubMonitorUnit,
getAlarmCountGroupAlarmType,
getAlarmInfos
} from '@/api/board/smartScene' } from '@/api/board/smartScene'
export default { export default {
components: { components: {
vueSeamlessScroll, vueSeamlessScroll,
BoardTopNav BoardTopNav
},
data() {
return {
num1: 0,
num2: 0,
alarmCountGroupAlarmType: [],
LimitSubMonitorUnitList: [],
tableData: [],
pageSize: 4,
total: 1,
chart1TableOption: {
step: 0.5, // 数值越大速度滚动越快
limitMoveNum: 3, // 开始无缝滚动的数据量 this.dataList.length
hoverStop: true, // 是否开启鼠标悬停stop
direction: 1, // 0向下 1向上 2向左 3向右
openWatch: true, // 开启数据实时监控刷新dom
singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
waitTime: 0,
},
table1Data: []
}
},
mounted() {
this.setAllNum()
this.setLimitSubMonitorUnit()
this.setAlarmCountGroupAlarmType()
this.setAlarmInfos()
},
methods: {
async setAllNum() {
const {subSum, sum} = await sceneAllNums()
this.num1 = subSum
this.num2 = sum
}, },
data() { async setLimitSubMonitorUnit() {
return { const data = await getLimitSubMonitorUnit()
table1Data: [ this.LimitSubMonitorUnitList = data.rows
{ this.tableData = data.rows.slice(0, 4)
data1: '001', this.total = data.total
data2: '越限',
data3: '123123',
data4: '无线检测 检测值为 21° - 25°',
data5: '设备11233',
data6: '2021.01.01 00:00:00',
},
{
data1: '001',
data2: '越限',
data3: '123123',
data4: '无线检测 检测值为 21° - 25°',
data5: '设备11233',
data6: '2021.01.01 00:00:00',
},
{
data1: '001',
data2: '越限',
data3: '123123',
data4: '无线检测 检测值为 21° - 25°',
data5: '设备11233',
data6: '2021.01.01 00:00:00',
},
{
data1: '001',
data2: '越限',
data3: '123123',
data4: '无线检测 检测值为 21° - 25°',
data5: '设备11233',
data6: '2021.01.01 00:00:00',
},
{
data1: '001',
data2: '越限',
data3: '123123',
data4: '无线检测 检测值为 21° - 25°',
data5: '设备11233',
data6: '2021.01.01 00:00:00',
},
{
data1: '001',
data2: '越限',
data3: '123123',
data4: '无线检测 检测值为 21° - 25°',
data5: '设备11233',
data6: '2021.01.01 00:00:00',
},
{
data1: '001',
data2: '越限',
data3: '123123',
data4: '无线检测 检测值为 21° - 25°',
data5: '设备11233',
data6: '2021.01.01 00:00:00',
},
{
data1: '001',
data2: '越限',
data3: '123123',
data4: '无线检测 检测值为 21° - 25°',
data5: '设备11233',
data6: '2021.01.01 00:00:00',
},
{
data1: '001',
data2: '越限',
data3: '123123',
data4: '无线检测 检测值为 21° - 25°',
data5: '设备11233',
data6: '2021.01.01 00:00:00',
},
{
data1: '001',
data2: '越限',
data3: '123123',
data4: '无线检测 检测值为 21° - 25°',
data5: '设备11233',
data6: '2021.01.01 00:00:00',
},
{
data1: '001',
data2: '越限',
data3: '123123',
data4: '无线检测 检测值为 21° - 25°',
data5: '设备11233',
data6: '2021.01.01 00:00:00',
},
]
}
}, },
mounted() { currentChange(e) {
this.setAllNum() this.tableData = this.LimitSubMonitorUnitList.slice(4 * (e - 1), 4 * (e - 1) + 4)
}, },
methods: { async setAlarmCountGroupAlarmType() {
async setAllNum(){ let {data: data} = await getAlarmCountGroupAlarmType()
const data = await sceneAllNums() data.sort((a, b) => {
console.log(data) return b.alarmCount - a.alarmCount
} })
data = data.slice(0, 6)
this.alarmCountGroupAlarmType = data
},
async setAlarmInfos() {
const {rows: data} = await getAlarmInfos()
console.log(data)
this.table1Data = data.map((e,i)=>{
return {
data1: i,
data2: e.alarmLevelName,
data3: e.alarmTypeName,
data4: '无线检测 检测值为 21° - 25°',
data5: e.monitorUnitName,
data6: '2021.01.01 00:00:00',
}
})
} }
}
}; };
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
.container { .container {
background-image: url("~@/assets/board/smartScene/bg.jpg"); background-image: url("~@/assets/board/smartScene/bg.jpg");
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: 100% 100%; background-size: 100% 100%;
width: 100%; width: 100%;
height: calc(100vh); height: calc(100vh);
position: relative; position: relative;
} }
.menu { .menu {
background-image: url("~@/assets/board/common/subheadClick1.png"); background-image: url("~@/assets/board/common/subheadClick1.png");
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: 100% 100%; background-size: 100% 100%;
position: absolute; position: absolute;
width: 8vw; width: 8vw;
height: 1.66vw; height: 1.66vw;
top: 3.8%; top: 3.8%;
line-height: 1.66vw; line-height: 1.66vw;
font-size: 0.8vw; font-size: 0.8vw;
color: #d4d4d4; color: #d4d4d4;
text-align: center; text-align: center;
} }
.menu .el-dropdown { .menu .el-dropdown {
font-size: 0.8vw; font-size: 0.8vw;
color: #d4d4d4; color: #d4d4d4;
} }
.menuClick { .menuClick {
background-image: url("~@/assets/board/common/subheadClick.png"); background-image: url("~@/assets/board/common/subheadClick.png");
color: #f3f3f3; color: #f3f3f3;
} }
.num1 { .num1 {
position: absolute; position: absolute;
top: 21%; top: 21%;
left: 18%; left: 18%;
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
font-size: 3vw; font-size: 3vw;
color: #15d654; color: #15d654;
} }
.num2 { .num2 {
position: absolute; position: absolute;
top: 21%; top: 21%;
left: 33%; left: 33%;
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
font-size: 3vw; font-size: 3vw;
color: #00fff0; color: #00fff0;
} }
.num3 { .num3 {
position: absolute; position: absolute;
top: 52%; top: 52%;
left: 7.5%; left: 7.5%;
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
font-size: 2vw; font-size: 2vw;
color: #d73827; color: #d73827;
} }
.num4 { .num4 {
position: absolute; position: absolute;
top: 52%; top: 52%;
left: 15%; left: 15%;
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
font-size: 2vw; font-size: 2vw;
color: #1ef16d; color: #1ef16d;
} }
.num5 { .num5 {
position: absolute; position: absolute;
top: 52%; top: 52%;
left: 22.5%; left: 22.5%;
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
font-size: 2vw; font-size: 2vw;
color: #f2711f; color: #f2711f;
} }
.num6 { .num6 {
position: absolute; position: absolute;
top: 52%; top: 52%;
left: 30%; left: 30%;
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
font-size: 2vw; font-size: 2vw;
color: #2a46f9; color: #2a46f9;
} }
.num7 { .num7 {
position: absolute; position: absolute;
top: 52%; top: 52%;
left: 37.5%; left: 37.5%;
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
font-size: 2vw; font-size: 2vw;
color: #00a3fd; color: #00a3fd;
} }
.num8 { .num8 {
position: absolute; position: absolute;
top: 52%; top: 52%;
left: 45%; left: 45%;
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
font-size: 2vw; font-size: 2vw;
color: #eff721; color: #eff721;
} }
.title1 { .title1 {
position: absolute; position: absolute;
top: 28%; top: 28%;
left: 18%; left: 18%;
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
font-size: 2vw; font-size: 2vw;
color: #62bff2; color: #62bff2;
} }
.title2 { .title2 {
position: absolute; position: absolute;
top: 28%; top: 28%;
left: 33%; left: 33%;
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
font-size: 2vw; font-size: 2vw;
color: #62bff2; color: #62bff2;
} }
.title3 { .title3 {
position: absolute; position: absolute;
top: 48%; top: 48%;
left: 7.5%; left: 7.5%;
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
font-size: 1vw; font-size: 1vw;
color: #fff; color: #fff;
} }
.title4 { .title4 {
position: absolute; position: absolute;
top: 48%; top: 48%;
left: 15%; left: 15%;
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
font-size: 1vw; font-size: 1vw;
color: #fff; color: #fff;
} }
.title5 { .title5 {
position: absolute; position: absolute;
top: 48%; top: 48%;
left: 22.5%; left: 22.5%;
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
font-size: 1vw; font-size: 1vw;
color: #fff; color: #fff;
} }
.title6 { .title6 {
position: absolute; position: absolute;
top: 48%; top: 48%;
left: 30%; left: 30%;
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
font-size: 1vw; font-size: 1vw;
color: #fff; color: #fff;
} }
.title7 { .title7 {
position: absolute; position: absolute;
top: 48%; top: 48%;
left: 37.5%; left: 37.5%;
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
font-size: 1vw; font-size: 1vw;
color: #fff; color: #fff;
} }
.title8 { .title8 {
position: absolute; position: absolute;
top: 48%; top: 48%;
left: 45%; left: 45%;
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
font-size: 1vw; font-size: 1vw;
color: #fff; color: #fff;
} }
.title9 { .title9 {
position: absolute; position: absolute;
top: 61%; top: 61%;
left: 26.1%; left: 26.1%;
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
font-size: 1vw; font-size: 1vw;
color: #fff; color: #fff;
} }
.title10 { .title10 {
position: absolute; position: absolute;
top: 13%; top: 13%;
left: 74.3%; left: 74.3%;
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
font-size: 1vw; font-size: 1vw;
color: #fff; color: #fff;
} }
.table1 { .table1 {
position: absolute; position: absolute;
top: 63%; top: 63%;
left: 3.5%; left: 3.5%;
width: 45.4%; width: 45.4%;
height: 32%; height: 32%;
} }
.scrollTable { .scrollTable {
color: rgb(185, 186, 192); color: rgb(185, 186, 192);
margin: auto 0px; margin: auto 0px;
padding: 4px 0; padding: 4px 0;
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
text-align: center; text-align: center;
display: inline-block; display: inline-block;
} }
.right { .right {
position: absolute; position: absolute;
top: 16%; top: 16%;
left: 52%; left: 52%;
width: 44.8%; width: 44.8%;
height: 80%; height: 80%;
.item { .item {
width: 22vw; width: 22vw;
height: 37vh; height: 37vh;
position: relative; position: relative;
border: 1px solid #1ea6ec; border: 1px solid #1ea6ec;
margin-bottom: 12px; margin-bottom: 12px;
.titleBg { .titleBg {
position: absolute; position: absolute;
top: 0%; top: 0%;
left: 0%; left: 0%;
width: 100%; width: 100%;
height: 10%; height: 10%;
background-color: #063b5a; background-color: #063b5a;
} }
.title { .title {
position: absolute; position: absolute;
top: 5%; top: 5%;
left: 50%; left: 50%;
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
color: #fff9f6; color: #fff9f6;
font-size: 0.9vw; font-size: 0.9vw;
.el-tag.el-tag--success {
vertical-align: top !important;
}
}
.img { .el-tag.el-tag--success {
background-image: url("~@/assets/board/smartScene/device.png"); vertical-align: top !important;
background-repeat: no-repeat; }
background-size: 100% 100%; }
position: absolute;
width: 100%;
height: 90%;
top: 10%;
}
.img {
background-image: url("~@/assets/board/smartScene/device.png");
background-repeat: no-repeat;
background-size: 100% 100%;
position: absolute;
width: 100%;
height: 90%;
top: 10%;
} }
.pagination{
position: relative; }
left: 50%;
transform: translateX(-50%); .pagination {
display: inline-block; position: relative;
.el-pagination{ left: 50%;
display: inline-block; transform: translateX(-50%);
} display: inline-block;
.el-pagination {
display: inline-block;
} }
}
} }
</style> </style>

Write Preview
Loading…
Cancel
Save