上传看板

dev
夜笙歌 1 year ago
parent 44bc09806c
commit a34afd7263

@ -36,6 +36,7 @@
"url": "https://gitee.com/y_project/RuoYi-Cloud.git"
},
"dependencies": {
"@amap/amap-jsapi-loader": "^1.0.1",
"@riophae/vue-treeselect": "0.4.0",
"Vue-i18n": "npm:vue-i18n@^8.26.7",
"axios": "0.24.0",

Binary file not shown.

After

Width:  |  Height:  |  Size: 254 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 9.1 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 9.1 KiB

Before

Width:  |  Height:  |  Size: 305 KiB

After

Width:  |  Height:  |  Size: 305 KiB

Before

Width:  |  Height:  |  Size: 490 KiB

After

Width:  |  Height:  |  Size: 490 KiB

@ -0,0 +1,80 @@
<template>
<div>
<div>
<div :class="`menu ${nowMenu==='1'? 'menuClick' :''}`" style="left: 2%">
<span>
监控主页
</span>
</div>
<div :class="`menu ${nowMenu==='2'? 'menuClick' :''}`" style="left: 9%">
<el-dropdown trigger="click">
<span class="el-dropdown-link">
智慧场景 <i class="el-icon-arrow-down el-icon--right"></i>
</span>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item>黄金糕</el-dropdown-item>
<el-dropdown-item>狮子头</el-dropdown-item>
<el-dropdown-item>螺蛳粉</el-dropdown-item>
<el-dropdown-item>双皮奶</el-dropdown-item>
<el-dropdown-item>蚵仔煎</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</div>
<div :class="`menu ${nowMenu==='3'? 'menuClick' :''}`" style="left: 16%">
<span>
设备监测
</span>
</div>
<div :class="`menu ${nowMenu==='4'? 'menuClick' :''}`" style="left: 23%">
<span>
传感器汇总
</span>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {}
},
props: {
nowMenu: {
type: String,
default: '1'
},
},
mounted() {
},
methods: {}
};
</script>
<style lang="less" scoped>
.menu {
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%;
line-height: 1.66vw;
font-size: 0.8vw;
color: #d4d4d4;
text-align: center;
}
.menu .el-dropdown {
font-size: 0.8vw;
color: #d4d4d4;
}
.menuClick {
background-image: url("~@/assets/board/common/subheadClick.png");
color: #f3f3f3;
}
</style>

@ -1,6 +1,6 @@
import Vue from 'vue'
import less from 'less'
import AMapLoader from "@amap/amap-jsapi-loader";
import Cookies from 'js-cookie'
@ -63,6 +63,14 @@ Vue.component('FileUpload', FileUpload)
Vue.component('ImageUpload', ImageUpload)
Vue.component('ImagePreview', ImagePreview)
AMapLoader.load({
'key': '268909dc36fd438908a64ebe057bfb17',
'version': '2.0',
'plugins': ['AMap.Scale','AMap.GeoJSON']
}).then((AMap) => {
Vue.use(AMap)
})
Vue.use(directive)
Vue.use(plugins)
Vue.use(VueMeta)

@ -89,36 +89,36 @@ export const constantRoutes = [
]
},
// {
// path: '/board1',
// component: () => import('@/views/board/index'),
// name: 'Index',
// meta: { title: '1', icon: 'dashboard', affix: true }
// },
// {
// path: '/board2',
// component: () => import('@/views/board/equipmentMonitoring'),
// name: 'Index',
// meta: { title: '2', icon: 'dashboard', affix: true }
// },
// {
// path: '/board3',
// component: () => import('@/views/board/GPS'),
// name: 'Index',
// meta: { title: '3', icon: 'dashboard', affix: true }
// },
// {
// path: '/board4',
// component: () => import('@/views/board/senso'),
// name: 'Index',
// meta: { title: '4', icon: 'dashboard', affix: true }
// },
// {
// path: '/board5',
// component: () => import('@/views/board/smartScene'),
// name: 'Index',
// meta: { title: '5', icon: 'dashboard', affix: true }
// },
{
path: '/board1',
component: () => import('@/views/board/index'),
name: 'Index',
meta: { title: '1', icon: 'dashboard', affix: true }
},
{
path: '/board2',
component: () => import('@/views/board/equipmentMonitoring'),
name: 'Index',
meta: { title: '2', icon: 'dashboard', affix: true }
},
{
path: '/board3',
component: () => import('@/views/board/GPS'),
name: 'Index',
meta: { title: '3', icon: 'dashboard', affix: true }
},
{
path: '/board4',
component: () => import('@/views/board/senso'),
name: 'Index',
meta: { title: '4', icon: 'dashboard', affix: true }
},
{
path: '/board5',
component: () => import('@/views/board/smartScene'),
name: 'Index',
meta: { title: '5', icon: 'dashboard', affix: true }
},
]
// 动态路由,基于用户权限动态去加载

@ -0,0 +1,385 @@
<template>
<div class="container">
<div class="centerImg"></div>
<BoardTopNav nowMenu="2"></BoardTopNav>
<Chart ref="chart1" class="chart1"></Chart>
<div class="table1">
<div style="background-color: #094170">
<div class="scrollTable" style="font-weight: bold;">
告警编号
</div>
<div class="scrollTable" style="font-weight: bold;">
告警类型
</div>
<div class="scrollTable" style="font-weight: bold;">
告警位置
</div>
<div class="scrollTable" style="font-weight: bold;">
操作
</div>
</div>
<vue-seamless-scroll
:class-option="table1Data"
:data="table1Data"
class="case-item"
style="height: 84%;overflow: hidden;"
>
<div
v-for="(item, index) in table1Data"
:key="index"
>
<div :style='"background-color:" + ((index % 2 === 0)? "#053460":"#032d57") '>
<div
class="scrollTable">
{{ item.value1 }}
</div>
<div
class="scrollTable">
{{ item.value2 }}
</div>
<div
class="scrollTable">
{{ item.value3 }}
</div>
<div class="scrollTable">
<el-button size="mini" type="primary">处理</el-button>
</div>
</div>
</div>
</vue-seamless-scroll>
</div>
<div>
<div class="title1">监控单元报警统计</div>
<div class="title2">告警信息</div>
<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>
<div class="map" id="map"></div>
</div>
</template>
<script>
import Chart from "@/components/Charts/Chart";
import BoardTopNav from '@/components/BoardTopNav'
import vueSeamlessScroll from "vue-seamless-scroll";
import * as echarts from 'echarts';
let map = null
import red from '@/assets/board/GPS/red.png'
import green from '@/assets/board/GPS/green.png'
export default {
components: {
Chart,
vueSeamlessScroll,
BoardTopNav
},
data() {
return {
chart1Data: [
{
value: 12,
name: '监控单元1',
},
{
value: 23,
name: '监控单元2',
},
{
value: 34,
name: '监控单元3',
},
{
value: 45,
name: '监控单元4',
},
{
value: 55,
name: '监控单元5',
}
],
chart1Option: {
grid: {
left: "0%",
right: "5%",
top: "0%",
bottom: "0%",
containLabel: true,
},
tooltip: {
trigger: "axis",
axisPointer: {
type: "shadow",
},
},
xAxis: {
type: "value",
axisLine: {
show: true,
lineStyle: {
color: "#fffa",
},
},
splitLine: {
show: true,
lineStyle: {
color: "#fff4",
type: 'dashed'
},
},
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: '车间',
},
]
}
},
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()
},
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],
icon: red,
});
var marker1 = new AMap.Marker({
position: [113.6, 23.35],
icon: green,
});
map.add(marker)
map.add(marker1)
}
}
};
</script>
<style scoped>
.container {
background-image: url("~@/assets/board/GPS/bg.jpg");
background-repeat: no-repeat;
background-size: 100% 100%;
width: 100%;
height: calc(100vh);
position: relative;
}
.chart1 {
position: absolute;
width: 25%;
height: 21%;
top: 16%;
left: 3%;
}
.table1 {
position: absolute;
top: 48%;
left: 2.5%;
width: 26%;
height: 48%;
overflow: hidden;
}
.scrollTable {
color: rgb(185, 186, 192);
margin: auto 0px;
padding: 4px 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
text-align: center;
display: inline-block;
width: 25%;
}
.title1 {
position: absolute;
top: 13%;
left: 15.5%;
transform: translate(-50%, -50%);
font-size: 1vw;
color: #fff;
}
.title2 {
position: absolute;
top: 45.4%;
left: 15.6%;
transform: translate(-50%, -50%);
font-size: 1vw;
color: #fff;
}
.info1 {
position: absolute;
top: 18%;
left: 39%;
transform: translate(-50%, -50%);
font-size: 1vw;
color: #179ce1;
}
.info2 {
position: absolute;
top: 18%;
left: 62%;
transform: translate(-50%, -50%);
font-size: 1vw;
color: #179ce1;
}
.info3 {
position: absolute;
top: 18%;
left: 83%;
transform: translate(-50%, -50%);
font-size: 1vw;
color: #179ce1;
}
.num1 {
position: absolute;
top: 18%;
left: 47%;
transform: translate(-50%, -50%);
font-size: 1.4vw;
color: #fff;
}
.num2 {
position: absolute;
top: 18%;
left: 69%;
transform: translate(-50%, -50%);
font-size: 1.4vw;
color: #fff;
}
.num3 {
position: absolute;
top: 18%;
left: 91%;
transform: translate(-50%, -50%);
font-size: 1.4vw;
color: #fff;
}
.map{
position: absolute;
top: 28%;
left: 31%;
width: 67%;
height: 69%;
}
</style>

@ -0,0 +1,35 @@
<template>
<div class="container">
<div class="centerImg"></div>
<BoardTopNav nowMenu="3"></BoardTopNav>
</div>
</template>
<script>
import BoardTopNav from '@/components/BoardTopNav'
export default {
components: {
BoardTopNav
},
data() {
return {
}
},
mounted() {
},
methods: {
}
};
</script>
<style scoped>
.container {
background-image: url("~@/assets/board/GPS/bg.jpg");
background-repeat: no-repeat;
background-size: 100% 100%;
width: 100%;
height: calc(100vh);
position: relative;
}
</style>

@ -1,37 +1,7 @@
<template>
<div class="container">
<div class="centerImg"></div>
<div>
<div class="menu menuClick" style="left: 2%">
<span>
监控主页
</span>
</div>
<div class="menu" style="left: 9%">
<el-dropdown trigger="click">
<span class="el-dropdown-link">
智慧场景 <i class="el-icon-arrow-down el-icon--right"></i>
</span>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item>黄金糕</el-dropdown-item>
<el-dropdown-item>狮子头</el-dropdown-item>
<el-dropdown-item>螺蛳粉</el-dropdown-item>
<el-dropdown-item>双皮奶</el-dropdown-item>
<el-dropdown-item>蚵仔煎</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</div>
<div class="menu" style="left: 16%">
<span>
设备监测
</span>
</div>
<div class="menu" style="left: 23%">
<span>
传感器汇总
</span>
</div>
</div>
<BoardTopNav nowMenu="1"></BoardTopNav>
<Chart ref="chart1" class="chart1"></Chart>
<div class="chart1Right">
<p style="color: #2ff;">电流互感器</p>
@ -167,12 +137,14 @@
<script>
import Chart from "@/components/Charts/Chart";
import vueSeamlessScroll from "vue-seamless-scroll";
import BoardTopNav from '@/components/BoardTopNav'
import * as echarts from 'echarts';
export default {
components: {
vueSeamlessScroll,
Chart
Chart,
BoardTopNav
},
data() {
return {
@ -535,29 +507,6 @@ export default {
transform: translate(-50%, -50%);
}
.menu {
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%;
line-height: 1.66vw;
font-size: 0.8vw;
color: #d4d4d4;
text-align: center;
}
.menu .el-dropdown {
font-size: 0.8vw;
color: #d4d4d4;
}
.menuClick {
background-image: url("~@/assets/board/common/subheadClick.png");
color: #f3f3f3;
}
.scrollTable {
color: rgb(185, 186, 192);

@ -1,37 +1,7 @@
<template>
<div class="container">
<div class="centerImg"></div>
<div>
<div class="menu" style="left: 2%">
<span>
监控主页
</span>
</div>
<div class="menu" style="left: 9%">
<el-dropdown trigger="click">
<span class="el-dropdown-link">
智慧场景 <i class="el-icon-arrow-down el-icon--right"></i>
</span>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item>黄金糕</el-dropdown-item>
<el-dropdown-item>狮子头</el-dropdown-item>
<el-dropdown-item>螺蛳粉</el-dropdown-item>
<el-dropdown-item>双皮奶</el-dropdown-item>
<el-dropdown-item>蚵仔煎</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</div>
<div class="menu" style="left: 16%">
<span>
设备监测
</span>
</div>
<div class="menu menuClick " style="left: 23%">
<span>
传感器汇总
</span>
</div>
</div>
<BoardTopNav nowMenu="4"></BoardTopNav>
<div class="collapse">
<el-collapse v-model="activeName" accordion>
<el-collapse-item name="1">
@ -312,9 +282,11 @@
</template>
<script>
import BoardTopNav from '@/components/BoardTopNav'
export default {
components: {
BoardTopNav
},
data() {
return {
@ -373,30 +345,6 @@ export default {
position: relative;
}
.menu {
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%;
line-height: 1.66vw;
font-size: 0.8vw;
color: #d4d4d4;
text-align: center;
}
.menu .el-dropdown {
font-size: 0.8vw;
color: #d4d4d4;
}
.menuClick {
background-image: url("~@/assets/board/common/subheadClick.png");
color: #f3f3f3;
}
.collapse {
position: absolute;
top: 9%;

@ -1,36 +1,6 @@
<template>
<div class="container">
<div>
<div class="menu " style="left: 2%">
<span>
监控主页
</span>
</div>
<div class="menu menuClick" style="left: 9%">
<el-dropdown trigger="click">
<span class="el-dropdown-link">
智慧场景 <i class="el-icon-arrow-down el-icon--right"></i>
</span>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item>黄金糕</el-dropdown-item>
<el-dropdown-item>狮子头</el-dropdown-item>
<el-dropdown-item>螺蛳粉</el-dropdown-item>
<el-dropdown-item>双皮奶</el-dropdown-item>
<el-dropdown-item>蚵仔煎</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</div>
<div class="menu" style="left: 16%">
<span>
设备监测
</span>
</div>
<div class="menu" style="left: 23%">
<span>
传感器汇总
</span>
</div>
</div>
<BoardTopNav nowMenu="2"></BoardTopNav>
<div class="num1">30</div>
<div class="num2">216</div>
<div class="num3">0</div>
@ -158,10 +128,12 @@
<script>
import vueSeamlessScroll from "vue-seamless-scroll";
import BoardTopNav from '@/components/BoardTopNav'
export default {
components: {
vueSeamlessScroll,
BoardTopNav
},
data() {
return {
@ -264,7 +236,7 @@ export default {
</script>
<style lang="less" scoped>
.container {
background-image: url("~@/assets/board/standard/bg.jpg");
background-image: url("~@/assets/board/smartScene/bg.jpg");
background-repeat: no-repeat;
background-size: 100% 100%;
width: 100%;
@ -514,7 +486,7 @@ export default {
}
.img {
background-image: url("~@/assets/board/standard/device.png");
background-image: url("~@/assets/board/smartScene/device.png");
background-repeat: no-repeat;
background-size: 100% 100%;
position: absolute;

Loading…
Cancel
Save