修改看板
夜笙歌
11 months ago
parent
e60b379e97
commit
3281005500
Binary file not shown.
|
After Width: | Height: | Size: 782 KiB |
@ -0,0 +1,209 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<div class="headTitle">综合安全生产平台</div>
|
||||
<div class="title" v-for="(i,k) in title"
|
||||
:style="'top:'+(titlePosition[k]&&titlePosition[k].top||0)+'%;left:'+(titlePosition[k]&&titlePosition[k].left||0)+'%'">
|
||||
{{ i }}
|
||||
</div>
|
||||
<!--每日人力出勤-->
|
||||
<div class="manpowerAttendance" id="manpowerAttendance">
|
||||
<Chart ref="manpowerAttendance"></Chart>
|
||||
</div>
|
||||
|
||||
<!--IQC-->
|
||||
<div class="IQC" id="IQC"><
|
||||
<Chart ref="IQC"></Chart>
|
||||
</div>
|
||||
|
||||
<!--生产效率-->
|
||||
<div class="productionEfficiency" id="productionEfficiency">
|
||||
<Chart ref="productionEfficiency"></Chart>
|
||||
</div>
|
||||
|
||||
|
||||
<!--周质量分析-->
|
||||
<div class="equipmentPowerOne" id="equipmentPowerOne">
|
||||
<Chart ref="equipmentPowerOne"></Chart>
|
||||
</div>
|
||||
<div class="equipmentPowerTwo" id="equipmentPowerTwo">
|
||||
<Chart ref="equipmentPowerTwo"></Chart>
|
||||
</div>
|
||||
<div class="equipmentPowerThree" id="equipmentPowerThree">
|
||||
<Chart ref="equipmentPowerThree"></Chart>
|
||||
</div>
|
||||
<div class="equipmentPowerFour" id="equipmentPowerFour">
|
||||
<Chart ref="equipmentPowerFour"></Chart>
|
||||
</div>
|
||||
<div class="equipmentPowerFive" id="equipmentPowerFive">
|
||||
<Chart ref="equipmentPowerFive"></Chart>
|
||||
</div>
|
||||
|
||||
<!--设备功率-->
|
||||
<div class="topLeft" id="topLeft">
|
||||
<Chart ref="topLeft"></Chart>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import vueSeamlessScroll from "vue-seamless-scroll";
|
||||
import Chart from "../../../components/board/Chart";
|
||||
import * as echarts from 'echarts'
|
||||
import {getData} from "@/api/board/getData";
|
||||
|
||||
export default {
|
||||
components: {
|
||||
vueSeamlessScroll,
|
||||
Chart
|
||||
},
|
||||
name: "Liner",
|
||||
data() {
|
||||
return {
|
||||
title: [
|
||||
'产量统计',
|
||||
'三日订单执行情况',
|
||||
'班组 6s 排行榜',
|
||||
'周生产型号统计',
|
||||
'周质量分析',
|
||||
'安全生产',
|
||||
],
|
||||
titlePosition: [
|
||||
{
|
||||
top: 11.5,
|
||||
left: 5.5
|
||||
},
|
||||
{
|
||||
top: 11.5,
|
||||
left: 32
|
||||
},
|
||||
{
|
||||
top: 11.5,
|
||||
left: 73.5
|
||||
},
|
||||
{
|
||||
top: 55.4,
|
||||
left: 5.5
|
||||
},
|
||||
{
|
||||
top: 55.4,
|
||||
left: 32
|
||||
},
|
||||
{
|
||||
top: 55.4,
|
||||
left: 73.6
|
||||
},
|
||||
],
|
||||
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: [],
|
||||
|
||||
}
|
||||
},
|
||||
mounted(){
|
||||
},
|
||||
methods: {}
|
||||
};
|
||||
</script>
|
||||
<style scoped>
|
||||
.app-container {
|
||||
background-image: url("../../../assets/board/week.jpg");
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100% 100%;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.headTitle {
|
||||
position: absolute;
|
||||
top: 5%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -100%);
|
||||
font-size: 1.5vw;
|
||||
color: #d6eaed;
|
||||
letter-spacing: 10px;
|
||||
}
|
||||
|
||||
.title {
|
||||
position: absolute;
|
||||
transform: translateY(-50%);
|
||||
color: #dddddd;
|
||||
font-size: 1vw;
|
||||
letter-spacing: 2px;
|
||||
}
|
||||
|
||||
.manpowerAttendance{
|
||||
position: absolute;
|
||||
width: 25%;
|
||||
height: 35%;
|
||||
top: 15%;
|
||||
left: 71.5%;
|
||||
}
|
||||
.IQC{
|
||||
position: absolute;
|
||||
width: 40%;
|
||||
height: 35%;
|
||||
top: 15%;
|
||||
left: 30%;
|
||||
}
|
||||
.productionEfficiency{
|
||||
position: absolute;
|
||||
width: 25%;
|
||||
height: 35%;
|
||||
top: 60%;
|
||||
left: 3%;
|
||||
}
|
||||
.topLeft{
|
||||
position: absolute;
|
||||
width: 25%;
|
||||
height: 34%;
|
||||
top: 15.5%;
|
||||
left: 3.5%;
|
||||
}
|
||||
.equipmentPowerOne{
|
||||
position: absolute;
|
||||
width: 13%;
|
||||
height: 16%;
|
||||
top: 60%;
|
||||
left: 30.5%;
|
||||
}
|
||||
.equipmentPowerTwo{
|
||||
position: absolute;
|
||||
width: 13%;
|
||||
height: 16%;
|
||||
top: 60%;
|
||||
left: 43.5%;
|
||||
}
|
||||
.equipmentPowerThree{
|
||||
position: absolute;
|
||||
width: 13%;
|
||||
height: 16%;
|
||||
top: 60%;
|
||||
left: 56.5%;
|
||||
}
|
||||
.equipmentPowerFour{
|
||||
position: absolute;
|
||||
width: 19%;
|
||||
height: 16%;
|
||||
top: 76%;
|
||||
left: 30.5%;
|
||||
}
|
||||
.equipmentPowerFive{
|
||||
position: absolute;
|
||||
width: 19%;
|
||||
height: 16%;
|
||||
top: 76%;
|
||||
left: 49.5%;
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue