修改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>
|
<template>
|
||||||
<div class="body">
|
<div class="bg">
|
||||||
<iframe :src="iframeSrc" style="width: 100%;height: 100%"></iframe>
|
<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>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<script>
|
<script>
|
||||||
|
|
||||||
import * as TWEEN from '@tweenjs/tween.js'
|
import Chart from "@/components/Charts/Chart";
|
||||||
import {getAgvData, getHourProductionList} from "../../api/board/cs2";
|
import vueSeamlessScroll from "vue-seamless-scroll";
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
|
components: {
|
||||||
|
Chart,
|
||||||
|
vueSeamlessScroll,
|
||||||
|
},
|
||||||
data() {
|
data() {
|
||||||
return {
|
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: {},
|
methods: {},
|
||||||
mounted() {}
|
mounted() {
|
||||||
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
<style scoped lang="less">
|
<style scoped lang="less">
|
||||||
.body{
|
.bg {
|
||||||
|
background-image: url("~@/assets/board/cs3/bg.png");
|
||||||
|
background-size: 100% 100%;
|
||||||
|
background-repeat: no-repeat;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 0;
|
top: 0;
|
||||||
left: 0;
|
left: 0;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 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;
|
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>
|
</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