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) {
return request({
// baseURL:'/monitoring-api',
url: '/business/monitorPlatform/alarmStats',
url: '/business/monitorPlatform/alarmStats/1',
method: 'get',
})
}
@ -12,7 +12,23 @@ export function alarmStats(query) {
export function subDevice(query) {
return request({
// baseURL:'/monitoring-api',
url: '/business/monitorPlatform/SubDevice',
method: 'post',
url: '/business/monitorPlatform/subDevice/1',
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',
})
}
// 右下
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) {
return request({
// 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',
})
}

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

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

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

@ -19,7 +19,7 @@
</div>
</div>
<vue-seamless-scroll
:class-option="table1Data"
:class-option="{...chart1TableOption,limitMoveNum:10}"
:data="table1Data"
class="case-item"
style="height: 84%;overflow: hidden;"
@ -55,11 +55,11 @@
<div class="info1">监控单元数量</div>
<div class="info2">设备数量</div>
<div class="info3">在线设备数量</div>
<div class="num1">20</div>
<div class="num2">20</div>
<div class="num3">20</div>
<div class="num1">{{ num1 }}</div>
<div class="num2">{{ num2 }}</div>
<div class="num3">{{ num3 }}</div>
</div>
<div class="map" id="map"></div>
<div id="map" class="map"></div>
</div>
</template>
@ -70,12 +70,15 @@ import vueSeamlessScroll from "vue-seamless-scroll";
import * as echarts from 'echarts';
import {
alarmStats,
subDevice
subDevice,
getAlarmInfos,
ElectronicNumVo
} from '@/api/board/GPS'
let map = null
import red from '@/assets/board/GPS/red.png'
import green from '@/assets/board/GPS/green.png'
let map = null
let polyEditor = null
export default {
components: {
Chart,
@ -84,28 +87,19 @@ export default {
},
data() {
return {
chart1Data: [
{
value: 12,
name: '监控单元1',
},
{
value: 23,
name: '监控单元2',
num1: 0,
num2: 0,
num3: 0,
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,
},
{
value: 34,
name: '监控单元3',
},
{
value: 45,
name: '监控单元4',
},
{
value: 55,
name: '监控单元5',
}
],
chart1Option: {
grid: {
left: "0%",
@ -138,92 +132,48 @@ export default {
boundaryGap: [0, 0.01],
},
},
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: '车间',
},
]
table1Data: []
}
},
mounted() {
this.createMap()
this.setMarker()
this.getAlarmStats()
this.getAubDevice()
this.setAlarmInfos()
this.setElectronicNumVo()
},
methods: {
createMap() {
map = new AMap.Map('map', {
zoom: 11,
zooms: [8, 20],
center: [113.4, 23.35],
});
},
setMarker(){
var marker = new AMap.Marker({
position: [113.2, 23.35],
setMarker(position) {
let marker =new AMap.Marker({
position: position,
icon: red,
});
var marker1 = new AMap.Marker({
position: [113.6, 23.35],
icon: green,
});
})
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() {
const {rows:data} = await alarmStats()
const {data} = await alarmStats()
let option1 = {
...this.chart1Option,
yAxis: {
@ -272,7 +222,33 @@ export default {
},
async getAubDevice() {
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)
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,6 +363,7 @@ export default {
font-size: 1.4vw;
color: #fff;
}
.map {
position: absolute;
top: 28%;

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

@ -39,11 +39,11 @@
</div>
<div
class="scrollTable">
{{ item.value2 }}
{{ item.value }}
</div>
<div
class="scrollTable">
{{ item.value }}
{{ item.value2 }}
</div>
</div>
</div>
@ -83,7 +83,10 @@
</div>
<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="font-weight:bold;top:19.3%;left: 66%;font-size: 2vw;">{{ centerNum.sum }}</div>
</div>
@ -105,7 +108,7 @@
</div>
</div>
<vue-seamless-scroll
:class-option="chart1TableOption"
:class-option="{...chart1TableOption,limitMoveNum:10}"
:data="table1Data"
class="case-item"
style="height: calc(100% - 33px);overflow: hidden;"
@ -142,14 +145,17 @@ import * as echarts from 'echarts';
import {
monitorUnitPercentage,
monitorPercentage,
allNums
allNums,
getAlarmInfos,
getDeviceOperations
} from '@/api/board/index'
export default {
components: {
vueSeamlessScroll,
Chart,
BoardTopNav
BoardTopNav,
},
data() {
return {
@ -191,28 +197,7 @@ export default {
singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
waitTime: 0,
},
chart2Data: [
{
value: 111,
name: '无源温度传感器',
},
{
value: 111,
name: '有源温度传感器',
},
{
value: 111,
name: '烟雾传感器',
},
{
value: 111,
name: '温湿度传感器',
},
{
value: 111,
name: 'CO传感器',
}
],
chart2Data: [],
chart2Option: {
color: ["#22acfd", "#22fe97", "#f9e728", "#ff922b", "#ed1814"],
legend: {
@ -263,29 +248,7 @@ export default {
},
],
},
inTransitNum: 1999,
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',
},
],
inTransitNum: 0,
chart3Option: {
tooltip: {
trigger: "axis",
@ -320,72 +283,101 @@ export default {
},
},
},
table1Data: [
{
no: '001',
type: '高温警告',
location: '车间',
},
{
no: '001',
type: '高温警告',
location: '车间',
},
{
no: '001',
type: '高温警告',
location: '车间',
},
{
no: '001',
type: '高温警告',
location: '车间',
},
{
no: '001',
type: '高温警告',
location: '车间',
table1Data: []
}
},
{
no: '001',
type: '高温警告',
location: '车间',
mounted() {
this.setChart1()
this.setChart2()
this.setAllNums()
this.setTable3()
this.setDeviceOperations()
},
methods: {
async setChart1() {
const {rows: data} = await monitorPercentage()
let option1 = {
...this.chart1Option,
series: [
{
no: '001',
type: '高温警告',
location: '车间',
type: "bar",
data: data.map((e, i) => {
return {
value: parseFloat(e.percentage),
name: e.sceneName,
itemStyle: {
color: this.chart1Color[this.chart1Color.length % i]
}
}
}),
showBackground: true,
coordinateSystem: "polar",
roundCap: true,
barWidth: 8,
},
{
no: '001',
type: '高温警告',
location: '车间',
]
}
this.$refs.chart1.setData(option1)
this.chart1Data = data.map(e => {
return {
value: e.sum || 0,
value2: e.err || 0,
name: e.sceneName || '',
}
})
},
{
no: '001',
type: '高温警告',
location: '车间',
async setChart2() {
const {rows: data} = await monitorUnitPercentage()
let chart2Num = eval(data.map(e => e.sum).join("+"));
let option2 = {
...this.chart2Option,
dataset: {
source: [
["group", "占比"],
...data.map(e => [e.deviceModeName, parseFloat(e.percentage)])
],
}
}
this.$refs.chart2.setData(option2)
this.chart2Data = data.map(e => {
return {
value: e.sum,
name: e.deviceModeName,
}
})
},
{
no: '001',
type: '高温警告',
location: '车间',
async setAllNums() {
const data = await allNums()
this.centerNum = data
},
{
no: '001',
async setTable3(){
const {rows:data} = await getAlarmInfos()
this.table1Data = data.map((e,i) => {
return {
no: i,
type: '高温警告',
location: '车间',
},
]
location: e.monitorUnitName,
}
})
},
mounted() {
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: this.chart3Data.map(e => e.date),
data: x,
splitLine: {
show: true,
@ -404,7 +396,7 @@ export default {
{
name: "",
type: "line",
data: this.chart3Data.map(e => e.value),
data: y,
color: "#00dae0",
areaStyle: {
normal: {
@ -433,62 +425,7 @@ export default {
],
}
this.$refs.chart3.setData(option3)
this.setChart1()
this.setChart2()
this.setAllNums()
},
methods: {
async setChart1() {
const {rows: data} = await monitorUnitPercentage()
let option1 = {
...this.chart1Option,
series: [
{
type: "bar",
data: data.map((e, i) => {
return {
value: e.percentage,
name: e.deviceModeName,
itemStyle: {
color: this.chart1Color[i]
}
}
}),
showBackground: true,
coordinateSystem: "polar",
roundCap: true,
barWidth: 8,
},
]
}
this.$refs.chart1.setData(option1)
this.chart1Data = data.map(e => {
return {
value: e.sum || 0,
value2: e.err || 0,
name: e.deviceModeName || '',
}
})
},
async setChart2() {
const {rows: data} = await monitorPercentage()
let chart2Num = eval(data.map(e => e.sum).join("+"));
let option2 = {
...this.chart2Option,
dataset: {
source: [
["group", "占比"],
...data.map(e => [e.sceneName, (e.sum / chart2Num) * 100])
],
}
}
this.$refs.chart2.setData(option2)
},
async setAllNums() {
const data = await allNums()
this.centerNum = data
}
}
}
;

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

@ -1,24 +1,16 @@
<template>
<div class="container">
<BoardTopNav nowMenu="2"></BoardTopNav>
<div class="num1">30</div>
<div class="num2">216</div>
<div class="num3">0</div>
<div class="num4">0</div>
<div class="num5">0</div>
<div class="num6">0</div>
<div class="num7">0</div>
<div class="num8">0</div>
<div class="num1">{{ num1 }}</div>
<div class="num2">{{ num2 }}</div>
<div class="title1">监控单元</div>
<div class="title2">传感器</div>
<div class="title3">设备高温</div>
<div class="title4">设备振动</div>
<div class="title5">烟雾火情</div>
<div class="title6">环境大风</div>
<div class="title7">柜内温度</div>
<div class="title8">柜内冰浸</div>
<div class="title9">告警信息</div>
<div class="title10">监控单元</div>
<div v-for="(i,k) in alarmCountGroupAlarmType" :class="'num'+(k+3)">
{{ i.alarmCount }}
</div>
<div v-for="(i,k) in alarmCountGroupAlarmType" :class="'title'+(k+3)">
{{ i.alarmTypeName }}
</div>
<div class="table1">
<div style="background-color: #094170">
@ -44,7 +36,7 @@
处理情况
</div>
</div>
<vue-seamless-scroll :class-option="chart1TableOption" :data="table1Data" class="case-item"
<vue-seamless-scroll :class-option="{...chart1TableOption,limitMoveNum:8}" :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")'>
@ -75,51 +67,20 @@
</div>
<div class="right">
<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">
<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;"> 变压器 </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>
<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="20" :pager-count="11" layout="prev, pager, next" :total="1000">
<el-pagination :page-size="pageSize" :pager-count="11" :total="total" layout="prev, pager, next"
@current-change="currentChange">
</el-pagination>
</div>
</div>
@ -130,7 +91,10 @@
import vueSeamlessScroll from "vue-seamless-scroll";
import BoardTopNav from '@/components/BoardTopNav'
import {
sceneAllNums
sceneAllNums,
getLimitSubMonitorUnit,
getAlarmCountGroupAlarmType,
getAlarmInfos
} from '@/api/board/smartScene'
export default {
@ -140,105 +104,68 @@ export default {
},
data() {
return {
table1Data: [
{
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',
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,
},
{
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',
table1Data: []
}
},
{
data1: '001',
data2: '越限',
data3: '123123',
data4: '无线检测 检测值为 21° - 25°',
data5: '设备11233',
data6: '2021.01.01 00:00:00',
mounted() {
this.setAllNum()
this.setLimitSubMonitorUnit()
this.setAlarmCountGroupAlarmType()
this.setAlarmInfos()
},
{
data1: '001',
data2: '越限',
data3: '123123',
data4: '无线检测 检测值为 21° - 25°',
data5: '设备11233',
data6: '2021.01.01 00:00:00',
methods: {
async setAllNum() {
const {subSum, sum} = await sceneAllNums()
this.num1 = subSum
this.num2 = sum
},
{
data1: '001',
data2: '越限',
data3: '123123',
data4: '无线检测 检测值为 21° - 25°',
data5: '设备11233',
data6: '2021.01.01 00:00:00',
async setLimitSubMonitorUnit() {
const data = await getLimitSubMonitorUnit()
this.LimitSubMonitorUnitList = data.rows
this.tableData = data.rows.slice(0, 4)
this.total = data.total
},
{
data1: '001',
data2: '越限',
data3: '123123',
data4: '无线检测 检测值为 21° - 25°',
data5: '设备11233',
data6: '2021.01.01 00:00:00',
currentChange(e) {
this.tableData = this.LimitSubMonitorUnitList.slice(4 * (e - 1), 4 * (e - 1) + 4)
},
{
data1: '001',
data2: '越限',
data3: '123123',
data4: '无线检测 检测值为 21° - 25°',
data5: '设备11233',
data6: '2021.01.01 00:00:00',
async setAlarmCountGroupAlarmType() {
let {data: data} = await getAlarmCountGroupAlarmType()
data.sort((a, b) => {
return b.alarmCount - a.alarmCount
})
data = data.slice(0, 6)
this.alarmCountGroupAlarmType = data
},
{
data1: '001',
data2: '越限',
data3: '123123',
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: '设备11233',
data5: e.monitorUnitName,
data6: '2021.01.01 00:00:00',
},
]
}
},
mounted() {
this.setAllNum()
},
methods: {
async setAllNum(){
const data = await sceneAllNums()
console.log(data)
})
}
}
};
@ -505,11 +432,13 @@ export default {
}
}
.pagination {
position: relative;
left: 50%;
transform: translateX(-50%);
display: inline-block;
.el-pagination {
display: inline-block;
}

Write Preview
Loading…
Cancel
Save