修改看板
夜笙歌
2 months ago
parent
24caf73263
commit
ba5274e660
Binary file not shown.
|
After Width: | Height: | Size: 5.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 993 B |
@ -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>
|
||||||
Loading…
Reference in New Issue