修改看板
夜笙歌
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