上传看板

dev
夜笙歌 1 year ago
parent b4b02d9763
commit c3453a69a9

@ -0,0 +1,18 @@
import request from '@/utils/request'
// 左上
export function alarmStats(query) {
return request({
// baseURL:'/monitoring-api',
url: '/business/monitorPlatform/alarmStats',
method: 'get',
})
}
// 右上
export function subDevice(query) {
return request({
// baseURL:'/monitoring-api',
url: '/business/monitorPlatform/SubDevice',
method: 'post',
})
}

@ -0,0 +1,28 @@
import request from '@/utils/request'
// 树
export function treeList(query) {
return request({
// baseURL:'/monitoring-api',
url: '/business/monitorPlatform/treeList',
method: 'get',
})
}
// 中下
export function selectDeviceByDeviceModeByMonitorUnitId(query) {
return request({
// baseURL:'/monitoring-api',
url: '/business/monitorPlatform/selectDeviceByDeviceModeByMonitorUnitId',
method: 'post',
data:query
})
}
// 右
export function selectDeviceModeFunctionByFunctionType(query) {
return request({
// baseURL:'/monitoring-api',
url: '/business/monitorPlatform/selectDeviceModeFunctionByFunctionType',
method: 'post',
data:query
})
}

@ -1,9 +1,28 @@
import request from '@/utils/request'
// 查询定时任务调度列表
// 左下
export function monitorUnitPercentage(query) {
return request({
url: '/business/monitorUnit/monitorUnitPercentage',
// baseURL:'/monitoring-api',
url: '/business/monitorPlatform/monitorUnitPercentage',
method: 'get',
})
}
// 左上
export function monitorPercentage(query) {
return request({
// baseURL:'/monitoring-api',
url: '/business/monitorPlatform/monitorPercentage',
method: 'get',
})
}
// 中
export function allNums(query) {
return request({
// baseURL:'/monitoring-api',
url: '/business/monitorPlatform/allNums',
method: 'get',
})
}

@ -0,0 +1,10 @@
import request from '@/utils/request'
// 左上
export function sceneAllNums(query) {
return request({
// baseURL:'/monitoring-api',
url: '/business/monitorPlatform/sceneAllNums',
method: 'get',
})
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 239 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 611 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 13 KiB

@ -1,5 +1,6 @@
<template>
<div>
<div class="title">智慧物联监控平台</div>
<div>
<div :class="`menu ${nowMenu==='1'? 'menuClick' :''}`" style="left: 2%">
<span>
@ -31,6 +32,15 @@
</span>
</div>
</div>
<div class="right" >
<span>
</span>
</div>
<div class="rightImg" >
</div>
</div>
</template>
@ -77,4 +87,36 @@ export default {
background-image: url("~@/assets/board/common/subheadClick.png");
color: #f3f3f3;
}
.title {
position: absolute;
top: 3%;
left: 50%;
font-size: 2vw;
letter-spacing: 12px;
transform: translate(-50%, -50%);
color: #f6f6f6;
}
.rightImg{
transform: rotateX(180deg);
background-image: url('~@/assets/board/common/subheadClick1.png');
background-repeat: no-repeat;
background-size: 100% 100%;
position: absolute;
width: 8vw;
height: 1.66vw;
top: 3.8%;
left: 71%;
}
.right{
position: absolute;
width: 8vw;
height: 1.66vw;
top: 3.8%;
left: 71%;
line-height: 1.66vw;
font-size: 0.8vw;
color: #d4d4d4;
text-align: center;
}
</style>

@ -93,37 +93,43 @@ export const constantRoutes = [
path: '/board1',
component: () => import('@/views/board/index'),
name: 'Index',
meta: { title: '1', icon: 'dashboard', affix: true }
meta: { title: 'index', icon: 'dashboard', affix: true }
},
{
path: '/board2',
component: () => import('@/views/board/equipmentMonitoring'),
name: 'Index',
meta: { title: '2', icon: 'dashboard', affix: true }
meta: { title: 'equipmentMonitoring', icon: 'dashboard', affix: true }
},
{
path: '/board3',
component: () => import('@/views/board/GPS'),
name: 'Index',
meta: { title: '3', icon: 'dashboard', affix: true }
meta: { title: 'GPS', icon: 'dashboard', affix: true }
},
{
path: '/board4',
component: () => import('@/views/board/senso'),
name: 'Index',
meta: { title: '4', icon: 'dashboard', affix: true }
meta: { title: 'senso', icon: 'dashboard', affix: true }
},
{
path: '/board5',
component: () => import('@/views/board/smartScene'),
name: 'Index',
meta: { title: '5', icon: 'dashboard', affix: true }
meta: { title: 'smartScene', icon: 'dashboard', affix: true }
},
{
path: '/board6',
component: () => import('@/views/board/equipment'),
name: 'Index',
meta: { title: '5', icon: 'dashboard', affix: true }
meta: { title: 'equipment', icon: 'dashboard', affix: true }
},
{
path: '/board7',
component: () => import('@/views/board/allScenes'),
name: 'Index',
meta: { title: 'allScenes', icon: 'dashboard', affix: true }
},
]

@ -68,6 +68,10 @@ import Chart from "@/components/Charts/Chart";
import BoardTopNav from '@/components/BoardTopNav'
import vueSeamlessScroll from "vue-seamless-scroll";
import * as echarts from 'echarts';
import {
alarmStats,
subDevice
} from '@/api/board/GPS'
let map = null
import red from '@/assets/board/GPS/red.png'
@ -194,53 +198,9 @@ export default {
}
},
mounted() {
let option1 = {
...this.chart1Option,
yAxis: {
axisLine: {
show: true,
lineStyle: {
color: "#fffa",
},
},
splitLine: {
show: true,
lineStyle: {
color: "#fff4",
type: 'dashed'
},
},
type: "category",
data: this.chart1Data.map(e => e.name),
},
series: [
{
name: "数量",
type: "bar",
yAxisIndex: 0,
data: this.chart1Data.map(e => e.value),
barWidth: '60%',
itemStyle: {
normal: {
show: true,
color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [
{
offset: 0,
color: "#00faff",
},
{
offset: 1,
color: "#1eadf1",
},
]),
},
},
},
],
}
this.$refs.chart1.setData(option1)
this.createMap()
this.setMarker()
this.getAlarmStats()
},
methods: {
createMap(){
@ -261,6 +221,58 @@ export default {
});
map.add(marker)
map.add(marker1)
},
async getAlarmStats(){
const {rows:data} = await alarmStats()
let option1 = {
...this.chart1Option,
yAxis: {
axisLine: {
show: true,
lineStyle: {
color: "#fffa",
},
},
splitLine: {
show: true,
lineStyle: {
color: "#fff4",
type: 'dashed'
},
},
type: "category",
data: data.map(e => e.monitorUnitName),
},
series: [
{
name: "数量",
type: "bar",
yAxisIndex: 0,
data: data.map(e => e.sum),
barWidth: '60%',
itemStyle: {
normal: {
show: true,
color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [
{
offset: 0,
color: "#00faff",
},
{
offset: 1,
color: "#1eadf1",
},
]),
},
},
},
],
}
this.$refs.chart1.setData(option1)
},
async getAubDevice(){
let data = await subDevice()
console.log(data)
}
}
};

@ -0,0 +1,158 @@
<template>
<div class="container">
<div class="centerImg"></div>
<BoardTopNav nowMenu="3"></BoardTopNav>
<div class="leftMenu">
<div v-for="i in 10" class="item">
<span>温度传感器</span>
</div>
</div>
<div class="right">
<div class="select">
<el-select v-model="value" placeholder="请选择">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</div>
<div class="list">
<div v-for="i in 20" class="item"></div>
</div>
</div>
</div>
</template>
<script>
import BoardTopNav from '@/components/BoardTopNav'
export default {
components: {
BoardTopNav
},
data() {
return {
options: [{
value: '选项1',
label: '黄金糕'
}, {
value: '选项2',
label: '双皮奶'
}, {
value: '选项3',
label: '蚵仔煎'
}, {
value: '选项4',
label: '龙须面'
}, {
value: '选项5',
label: '北京烤鸭'
}],
value: ''
}
},
mounted() {
},
methods: {}
};
</script>
<style lang="less" scoped>
.container {
background-image: url("~@/assets/board/allScenes/bg.jpg");
background-repeat: no-repeat;
background-size: 100% 100%;
width: 100%;
height: calc(100vh);
position: relative;
}
.leftMenu::-webkit-scrollbar {
width: 0;
}
.leftMenu {
position: absolute;
width: 14%;
height: 84%;
top: 12%;
left: 2%;
padding: 1vw;
overflow: auto;
.item {
background-image: url("~@/assets/board/allScenes/item.png");
background-repeat: no-repeat;
background-size: 100% 100%;
width: 12vw;
height: 5.1vw;
margin-bottom: 1vw;
}
span {
position: absolute;
left: 44%;
line-height: 5.1vw;
font-size: 1vw;
color: #f1f3f5;
white-space: nowrap;
}
}
.right {
position: absolute;
width: 78.5%;
height: 84%;
top: 12%;
left: 19%;
.select {
/deep/ .el-form-item__label {
color: #25bffc !important;
font-weight: normal;
}
/deep/ .el-input__inner {
background-color: #0000;
border-color: #25bffc;
color: #f6f6f6
}
/deep/ .el-button--default {
background-color: #0000;
color: #25bffc;
border-color: #25bffc;
}
}
.list::-webkit-scrollbar {
width: 0;
}
.list {
position: absolute;
width: 100%;
height: calc(100% - 50px);
top: 50px;
left: 0;
overflow: auto;
.item {
display: inline-block;
margin-right: 2vw;
margin-bottom: 1vw;
width: 30%;
height: 12vw;
background-image: url("~@/assets/board/allScenes/bg1.png");
background-repeat: no-repeat;
background-size: 100% 100%;
}
}
}
</style>

@ -7,7 +7,9 @@
<el-tree
:data="treeData"
:props="{label:'monitorUnitName',children:'child',value:'monitorUnitId'}"
accordion
@node-click="treeClick"
node-key="id">
<span slot-scope="{ node, data }" class="custom-tree-node">
<span>{{ node.label }}</span>
@ -82,6 +84,11 @@
</template>
<script>
import {
treeList,
selectDeviceByDeviceModeByMonitorUnitId,
selectDeviceModeFunctionByFunctionType
} from '@/api/board/equipment'
import BoardTopNav from '@/components/BoardTopNav'
@ -91,67 +98,41 @@ export default {
},
data() {
return {
monitorUnitId:'',
data1: true,
form: {
data1: '1'
data1: ''
},
treeData: [
{
id: 1,
label: '变压器1',
children: [
{
id: 11,
label: '点1',
},
{
id: 12,
label: '点2',
},
{
id: 13,
label: '点3',
children: [
{
id: 131,
label: '点1',
},
{
id: 132,
label: '点2',
},
{
id: 133,
label: '点3',
},
]
},
]
},
{
id: 2,
label: '变压器1',
children: [
{
id: 21,
label: '点1',
},
{
id: 22,
label: '点2',
},
{
id: 23,
label: '点3',
},
]
},
]
treeData: []
}
},
mounted() {
this.getTree()
},
methods: {}
methods: {
async getTree() {
const {rows: data} = await treeList()
console.log(data)
this.treeData = data
},
treeClick(e){
if(e.child.length === 0){
this.monitorUnitId = e.monitorUnitId
this.getDevice(e.monitorUnitId)
this.getRightDevice(e.monitorUnitId)
}
},
getDevice(e){
selectDeviceByDeviceModeByMonitorUnitId({monitorUnitId:e}).then(val=>{
console.log(val)
})
},
getRightDevice(e){
selectDeviceModeFunctionByFunctionType({monitorUnitId:e}).then(val=>{
console.log(val)
})
},
}
};
</script>
<style lang="less" scoped>

@ -83,9 +83,9 @@
</div>
<div>
<div class="centerInfo">传感器数量</div>
<div class="centerInfo" style="font-weight:bold;top:19.3%;left: 42.5%;font-size: 2vw;">978</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;">978</div>
<div class="centerInfo" style="font-weight:bold;top:19.3%;left: 66%;font-size: 2vw;">{{ centerNum.sum }}</div>
</div>
<div class="inTransit">在运 <span style="color: #00f6ff">{{ inTransitNum }}</span></div>
<Chart ref="chart3" class="chart3"></Chart>
@ -139,7 +139,11 @@ import Chart from "@/components/Charts/Chart";
import vueSeamlessScroll from "vue-seamless-scroll";
import BoardTopNav from '@/components/BoardTopNav'
import * as echarts from 'echarts';
import {monitorUnitPercentage} from '@/api/board/index'
import {
monitorUnitPercentage,
monitorPercentage,
allNums
} from '@/api/board/index'
export default {
components: {
@ -149,6 +153,7 @@ export default {
},
data() {
return {
centerNum:{},
chart1Option: {
tooltip: {},
angleAxis: {
@ -175,28 +180,7 @@ export default {
},
},
chart1Color: ['#2ff', '#f22', '#f2f', '#1f1'],
chart1Data: [
{
value: 12,
value2: 100,
name: '电流互感器',
},
{
value: 23,
value2: 100,
name: '电压互感器',
},
{
value: 34,
value2: 100,
name: '变压器',
},
{
value: 45,
value2: 100,
name: '电容电抗器',
}
],
chart1Data: [],
chart1TableOption: {
step: 0.5, //
limitMoveNum: 3, // this.dataList.length
@ -396,39 +380,6 @@ export default {
}
},
mounted() {
let option1 = {
...this.chart1Option,
series: [
{
type: "bar",
data: this.chart1Data.map((e, i) => {
return {
value: (e.value / e.value2) * 100,
name: e.name,
itemStyle: {
color: this.chart1Color[i]
}
}
}),
showBackground: true,
coordinateSystem: "polar",
roundCap: true,
barWidth: 8,
},
]
}
this.$refs.chart1.setData(option1)
let chart2Num = eval(this.chart2Data.map(e => e.value).join("+"));
let option2 = {
...this.chart2Option,
dataset: {
source: [
["group", "占比"],
...this.chart2Data.map(e => [e.name, (e.value / chart2Num) * 100])
],
}
}
this.$refs.chart2.setData(option2)
let option3 = {
...this.chart3Option,
xAxis: {
@ -483,14 +434,64 @@ export default {
}
this.$refs.chart3.setData(option3)
this.setChart1()
this.setChart2()
this.setAllNums()
},
methods: {
async setChart1 () {
const data = await monitorUnitPercentage()
console.log(data)
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
}
}
};
}
;
</script>
<style scoped>
.container {

@ -129,6 +129,9 @@
<script>
import vueSeamlessScroll from "vue-seamless-scroll";
import BoardTopNav from '@/components/BoardTopNav'
import {
sceneAllNums
} from '@/api/board/smartScene'
export default {
components: {
@ -230,8 +233,14 @@ export default {
}
},
mounted() {
this.setAllNum()
},
methods: {}
methods: {
async setAllNum(){
const data = await sceneAllNums()
console.log(data)
}
}
};
</script>
<style lang="less" scoped>

Loading…
Cancel
Save