修改agv
夜笙歌
2 weeks ago
parent
a03673b467
commit
a4ce820649
Binary file not shown.
|
After Width: | Height: | Size: 1.5 MiB |
@ -0,0 +1,35 @@
|
||||
<template>
|
||||
<div />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import * as echarts from 'echarts';
|
||||
|
||||
export default {
|
||||
expose: ['setData'],
|
||||
data() {
|
||||
return {
|
||||
chart: null,
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
},
|
||||
beforeDestroy() {
|
||||
if (!this.chart) {
|
||||
return
|
||||
}
|
||||
this.chart.dispose()
|
||||
this.chart = null
|
||||
},
|
||||
methods: {
|
||||
setData(option) {
|
||||
this.initChart(option)
|
||||
},
|
||||
initChart(option) {
|
||||
this.chart = echarts.init(this.$el, 'macarons')
|
||||
|
||||
this.chart.setOption(option)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@ -1,30 +1,132 @@
|
||||
<template>
|
||||
<div class="body">
|
||||
<iframe :src="iframeSrc" style="width: 100%;height: 100%"></iframe>
|
||||
<div class="bg">
|
||||
<div class="title">白坯车间数字应用大屏</div>
|
||||
|
||||
<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="{...chart1TableOption,limitMoveNum:10}"
|
||||
: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.no }}
|
||||
</div>
|
||||
<div
|
||||
class="scrollTable">
|
||||
{{ item.alarmInfoType === '1' ? '设备报警' : '' }}
|
||||
{{ item.alarmInfoType === '2' ? '监控单元报警' : '' }}
|
||||
{{ item.alarmInfoType === '3' ? '离线报警' : '' }}
|
||||
{{ item.alarmInfoType === '4' ? '电子围栏' : '' }}
|
||||
</div>
|
||||
<div
|
||||
class="scrollTable">
|
||||
{{ item.location }}
|
||||
</div>
|
||||
<div class="scrollTable" style="width: 25%">
|
||||
<el-button v-if="item.status === '0'" size="mini" type="primary" @click="dispose(item)">处理</el-button>
|
||||
<span v-else>已处理</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</vue-seamless-scroll>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
|
||||
import * as TWEEN from '@tweenjs/tween.js'
|
||||
import {getAgvData, getHourProductionList} from "../../api/board/cs2";
|
||||
import Chart from "@/components/Charts/Chart";
|
||||
import vueSeamlessScroll from "vue-seamless-scroll";
|
||||
|
||||
export default {
|
||||
components: {
|
||||
Chart,
|
||||
vueSeamlessScroll,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
iframeSrc:'http://192.168.202.20:8100/#/de-link/gXZdFzxH'
|
||||
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,
|
||||
autoPlay: false,
|
||||
navigation: false
|
||||
},
|
||||
table1Data: []
|
||||
}
|
||||
},
|
||||
methods: {},
|
||||
mounted() {}
|
||||
mounted() {
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style scoped lang="less">
|
||||
.body{
|
||||
.bg {
|
||||
background-image: url("~@/assets/board/cs3/bg.png");
|
||||
background-size: 100% 100%;
|
||||
background-repeat: no-repeat;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.title {
|
||||
position: absolute;
|
||||
top: 3%;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
font-size: 2vw;
|
||||
color: #fff;
|
||||
letter-spacing: 2px;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
|
||||
.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%;
|
||||
}
|
||||
|
||||
.table1 {
|
||||
position: absolute;
|
||||
top: 10%;
|
||||
left: 10%;
|
||||
width: 20%;
|
||||
height: 40%;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -0,0 +1,30 @@
|
||||
<template>
|
||||
<div class="body">
|
||||
<iframe :src="iframeSrc" style="width: 100%;height: 100%"></iframe>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
|
||||
import * as TWEEN from '@tweenjs/tween.js'
|
||||
import {getAgvData, getHourProductionList} from "../../api/board/cs2";
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
iframeSrc:'http://192.168.202.20:8100/#/de-link/gXZdFzxH'
|
||||
}
|
||||
},
|
||||
methods: {},
|
||||
mounted() {}
|
||||
}
|
||||
</script>
|
||||
<style scoped lang="less">
|
||||
.body{
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue