zangch
/
SaiLun.Thermoelectricity
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

修改看板

Browse Source
IOT
夜笙歌 2 months ago
parent 24caf73263
commit ba5274e660
7 changed files with 625 additions and 4 deletions
Show Stats Download Patch File Download Diff File

BIN
ruoyi-ui/src/assets/board/subheadClick.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.2 KiB

BIN
ruoyi-ui/src/assets/board/subheadClick1.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 993 B

115
ruoyi-ui/src/layout/index2.vue
Unescape Escape View File

@ -1,6 +1,44 @@
<template>
<div>
<router-view></router-view>
<div :class="`menu `" style="left: 2%"
@click="toLink('index2','1')">
<span>
监控主页
</span>
</div>
<div :class="`menu`" style="left: 9%">
<el-dropdown trigger="click" @command="dropdownLink">
<span class="el-dropdown-link">
智慧场景 <i class="el-icon-arrow-down el-icon--right"></i>
</span>
<el-dropdown-menu slot="dropdown">
<div class="topNavScroll"
style="max-height: 300px;overflow: auto;background-color: #053563;padding: 0;border: none;">
<el-dropdown-item command="index1">
<span style="color: #f8fefd">
智能巡检
</span>
</el-dropdown-item>
<el-dropdown-item command="index">
<span style="color: #f8fefd">
无线测温
</span>
</el-dropdown-item>
</div>
</el-dropdown-menu>
</el-dropdown>
</div>
<div class="right">
<span>
管 理
</span>
</div>
<div class="rightImg" @click="toIndex">
</div>
</div>
</template>
@ -9,11 +47,84 @@
export default {
name: 'BoardIndex',
data() {
return {
}
return {}
},
methods: {
toIndex() {
this.$router.replace({path: "/index"});
},
async dropdownLink(e,) {
await this.$router.replace({path: "/board/" + e});
},
toLink(e, nowMenu) {
this.$router.replace({path: "/board/" + e});
},
}
}
</script>
<style scoped>
.el-dropdown-menu {
padding: 0 !important;
border: none !important;
}
.topNavScroll::-webkit-scrollbar {
width: 0px;
height: 0px;
}
.el-dropdown-menu__item:not(.is-disabled):hover span {
color: #053563 !important;
}
/deep/ .el-upload-dragger {
width: 100%;
}
/deep/ .el-upload {
width: 100%;
}
.menu {
background-image: url("~@/assets/board/subheadClick1.png");
background-repeat: no-repeat;
background-size: 100% 100%;
position: absolute;
width: 8vw;
height: 1.66vw;
top: 5.2%;
line-height: 1.66vw;
font-size: 0.8vw;
color: #d4d4d4;
text-align: center;
}
.menu .el-dropdown {
font-size: 0.8vw;
color: #d4d4d4;
}
.rightImg {
transform: rotateX(180deg);
background-image: url('~@/assets/board/subheadClick1.png');
background-repeat: no-repeat;
background-size: 100% 100%;
position: absolute;
width: 8vw;
height: 1.66vw;
top: 5.2%;
left: 71%;
}
.right {
position: absolute;
width: 8vw;
height: 1.66vw;
top: 5.2%;
left: 71%;
line-height: 1.66vw;
font-size: 0.8vw;
color: #d4d4d4;
text-align: center;
}
</style>

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

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

6
ruoyi-ui/src/router/index.js
Unescape Escape View File

@ -85,6 +85,12 @@ export const constantRoutes = [
name: 'Board1',
meta: { title: '看板2', icon: 'dashboard', affix: true }
},
{
path: 'index2',
component: () => import('@/views/board/index2'),
name: 'Board3',
meta: { title: '看板3', icon: 'dashboard', affix: true }
},
]
},
{

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

@ -23,7 +23,7 @@
<div class="info2" style="top: 57.6%;left: 13%;"><span style="font-size: 2vw;color: #3fb0f2">19 </span> ℃</div>
<div class="info2" style="top: 57.6%;left: 30.5%;"><span style="font-size: 2vw;color: #f5f5f5">0 </span> ℃</div>
<div class="span3">当前状态：<span style="color：#eee">巡检中</span></div>
<div class="span3">当前状态：<span style="color:#eee">巡检中</span></div>
<Chart class="chart1" ref="chart1"/>
<Chart class="chart2" ref="chart2"/>

504
ruoyi-ui/src/views/board/index2.vue
Unescape Escape View File

@ -0,0 +1,504 @@
<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="safe">已安全运行 <span style="color: #4667d0;font-size: 1.2vw;padding: 0 0.3vw"> 382 </span> 天</div>
<div class="time">{{ parseTime(new Date(), '{y}.{m}.{d} {h}:{i}:{s} 周{a}') }}</div>
<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">3838</div>
<div class="span1" style="color: #f3de40;top: 32%;left: 15.3%;font-weight: 700">3838</div>
<div class="span1" style="color: #f3de40;top: 32%;left: 23.7%;font-weight: 700">3838</div>
<div class="span2" style="color: #46c9f9;top: 49.7%;left: 9.6%"><span
style="font-weight: 600;font-size:1.3vw;">13</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>℃
</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>
<div class="span" style="color: #eee;top: 62.7%;left: 5.9%;font-size: 1.1vw">照度</div>
<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="span3" style="color: #3597df;top: 30%;left: 50%">设备监控</div>
<div class="span" style="color: #3597df;top: 31.2%; left: 38.7%;">温度</div>
<div class="span" style="color: #3597df;top: 47%;left: 34.9%">湿度</div>
<div class="span" style="color: #3597df;top: 62.2%;left: 41%">照度</div>
<div class="span" style="color: #3597df;top: 31.2%;left: 61.3%">颗粒物</div>
<div class="span" style="color: #3597df;top: 47%;left: 65.1%">烟感</div>
<div class="span" style="color: #3597df;top: 62.2%; left: 59%;">噪声</div>
<div class="icon" style="top:61.8%;left:13%"></div>
<div class="icon" style="top:61.8%;left:17%"></div>
<div class="icon1" style="top:61.8%;left:24.8%"></div>
<Chart ref="chart1" class="chart1"></Chart>
<Chart ref="chart2" class="chart2"></Chart>
<div class="table">
<div style="background-color: #1077bc19">
<div class="scrollTableItem" style="width:22%;color:#65c2f3;font-weight: bold;">
报警开始时间
</div>
<div class="scrollTableItem" style="width:16%;color:#65c2f3;font-weight: bold;">
报警来源
</div>
<div class="scrollTableItem" style="width:16%;color:#65c2f3;font-weight: bold;">
告警等级
</div>
<div class="scrollTableItem" style="width:16%;color:#65c2f3;font-weight: bold;">
报警内容
</div>
<div class="scrollTableItem" style="width:30%;color:#65c2f3;font-weight: bold;">
操作
</div>
</div>
<vue-seamless-scroll
:class-option="scrollTableOption"
:data="scrollTableData"
class="case-item"
style="height: calc(100% - 30px);overflow: hidden;"
>
<div
v-for="(item, index) in scrollTableData"
:key="index"
>
<div :style='"background-color:" + ((index % 2 === 0)? "#1077bc19":"#1077bc05") '>
<div class="scrollTableItem" style="width:22%;color:#65c2f3;">
{{ item.value1 }}
</div>
<div class="scrollTableItem" style="width:16%;color:#65c2f3;">
{{ item.value2 }}
</div>
<div class="scrollTableItem" style="width:16%;color:#65c2f3;">
{{ item.value3 }}
</div>
<div class="scrollTableItem" style="width:16%;color:#65c2f3;">
{{ item.value4 }}
</div>
<div class="scrollTableItem" style="width:30%;color:#65c2f3;">
<el-button type="primary" size="mini">查看</el-button>
<el-button type="info" size="mini">处理</el-button>
</div>
</div>
</div>
</vue-seamless-scroll>
</div>
</div>
</div>
</template>
<script>
import Chart from '@/components/Charts/Chart'
import vueSeamlessScroll from 'vue-seamless-scroll'
export default {
data() {
return {
scrollTableOption: {
step: 0.5, // 数值越大速度滚动越快
limitMoveNum: 5, // 开始无缝滚动的数据量 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,
},
scrollTableData: Array(100).fill('').map(function (i, k) {
return {
value1: '2222-22-22 22:22:22',
value2: '设备1',
value3: '1级',
value4: '温度过高',
value5: '巡检对象名称1',
value6: '【一般警告】噪音>60db',
value7: '无',
}
}),
subTitleList: [
{
name: '场景统计',
top: 11.2,
left: 3
},
{
name: '智能巡检测温曲线',
top: 71.2,
left: 3
},
{
name: '设备监控',
top: 11.2,
left: 30.8
},
{
name: '告警信息',
top: 49.2,
left: 72.8
},
{
name: '告警趋势图',
top: 11.2,
left: 72.8
},
],
}
},
components: {
vueSeamlessScroll,
Chart
},
mounted() {
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'
},
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: 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(7).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'
}
},
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: Array(7).fill(0).map(e => {
return 0 + parseFloat((Math.random() * 5).toFixed(0))
}),
}
]
})
},
methods: {}
}
</script>
<style scoped>
.content {
background-image: url("~@/assets/board/bg2.jpg");
background-size: 100% 100%;
background-repeat: no-repeat;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.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%);
}
.subTitle {
position: absolute;
transform: translateY(-50%);
font-size: 0.9vw;
color: #fff;
letter-spacing: 2px;
}
.safe {
position: absolute;
top: 2.4%;
right: 2%;
transform: translateY(-50%);
color: #fff;
font-size: 0.7vw;
}
.time {
position: absolute;
top: 2.4%;
left: 2%;
transform: translateY(-50%);
color: #fff;
font-size: 0.7vw;
letter-spacing: 1px;
}
.span {
position: absolute;
transform: translate(-50%, -50%);
font-size: 0.9vw;
letter-spacing: 1px;
}
.span1 {
position: absolute;
transform: translate(-50%, -50%);
font-size: 1.5vw;
font-weight: 700;
letter-spacing: 1px;
}
.span2 {
position: absolute;
transform: translate(-50%, -50%);
font-size: 0.6vw;
letter-spacing: 3px;
}
.span3 {
position: absolute;
transform: translate(-50%, -50%);
font-size: 1.4vw;
letter-spacing: 2px;
}
.icon {
position: absolute;
width: 1.15vw;
transform: translate(-50%, -50%);
height: 1.35vw;
background-image: url("~@/assets/board/icon1.png");
background-size: 100% 100%;
background-repeat: no-repeat;
}
.icon1 {
position: absolute;
width: 1.3vw;
transform: translate(-50%, -50%);
height: 1.2vw;
background-image: url("~@/assets/board/icon2.png");
background-size: 100% 100%;
background-repeat: no-repeat;
}
.chart1 {
position: absolute;
top: 75.3%;
left: 2.3%;
width: 67.8%;
height: 18.6%;
}
.chart2 {
position: absolute;
top: 15.7%;
left: 71.7%;
width: 26%;
height: 28.6%;
}
.table {
position: absolute;
top: 51.8%;
left: 72%;
width: 25.9%;
height: 42.4%;
}
.scrollTableItem {
display: inline-block;
text-align: center;
padding: 14px 0;
color: #4e99c5
}
</style>
Write Preview
Loading…
Cancel
Save