修改看板
夜笙歌
1 year ago
parent
1c5bfc9901
commit
a5772364f6
|
Before Width: | Height: | Size: 778 KiB After Width: | Height: | Size: 778 KiB |
@ -0,0 +1,592 @@
|
||||
<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="scrollTable">
|
||||
<div style="background-color: #094170">
|
||||
<div class="scrollTableItem" style="font-weight: bold;">
|
||||
编号
|
||||
</div>
|
||||
<div class="scrollTableItem" style="font-weight: bold;">
|
||||
生产工单
|
||||
</div>
|
||||
<div class="scrollTableItem" style="font-weight: bold;">
|
||||
计划数量
|
||||
</div>
|
||||
<div class="scrollTableItem" style="font-weight: bold;">
|
||||
实际数量
|
||||
</div>
|
||||
<div class="scrollTableItem" style="font-weight: bold;">
|
||||
差异值
|
||||
</div>
|
||||
<div class="scrollTableItem" style="font-weight: bold;">
|
||||
完成率
|
||||
</div>
|
||||
</div>
|
||||
<vue-seamless-scroll
|
||||
:class-option="scrollTableOption"
|
||||
:data="scrollTableData"
|
||||
class="case-item"
|
||||
style="height: 84%;overflow: hidden;"
|
||||
>
|
||||
<div
|
||||
v-for="(item, index) in scrollTableData"
|
||||
:key="index"
|
||||
|
||||
>
|
||||
<div :style='"background-color:" + ((index % 2 === 0)? "#053460":"#032d57") '>
|
||||
<div
|
||||
class="scrollTableItem">
|
||||
{{ item.name }}
|
||||
</div>
|
||||
<div
|
||||
class="scrollTableItem">
|
||||
{{ item.value }}
|
||||
</div>
|
||||
<div
|
||||
class="scrollTableItem">
|
||||
{{ item.value2 }}
|
||||
</div>
|
||||
<div
|
||||
class="scrollTableItem">
|
||||
{{ item.value2 }}
|
||||
</div>
|
||||
<div
|
||||
class="scrollTableItem">
|
||||
{{ item.value2 }}
|
||||
</div>
|
||||
<div
|
||||
class="scrollTableItem">
|
||||
{{ item.value2 }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</vue-seamless-scroll>
|
||||
</div>
|
||||
|
||||
<div class="chart1">
|
||||
<Chart ref="chart1"></Chart>
|
||||
</div>
|
||||
<div class="chart2">
|
||||
<Chart ref="chart2"></Chart>
|
||||
</div>
|
||||
<div class="chart3">
|
||||
<Chart ref="chart3"></Chart>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import vueSeamlessScroll from "vue-seamless-scroll";
|
||||
import Chart from "../../../components/board/Chart";
|
||||
import * as echarts from 'echarts'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
vueSeamlessScroll,
|
||||
Chart
|
||||
},
|
||||
name: "Liner",
|
||||
data() {
|
||||
return {
|
||||
title: [
|
||||
'工单计划',
|
||||
'泡后库存',
|
||||
'小时产量',
|
||||
'出入库统计',
|
||||
],
|
||||
titlePosition: [
|
||||
{
|
||||
top: 11.5,
|
||||
left: 5.5
|
||||
},
|
||||
{
|
||||
top: 55.4,
|
||||
left: 5.5
|
||||
},
|
||||
{
|
||||
top: 11.5,
|
||||
left: 52.7
|
||||
},
|
||||
{
|
||||
top: 55.4,
|
||||
left: 52.7
|
||||
},
|
||||
],
|
||||
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: [
|
||||
{
|
||||
value: 1,
|
||||
value2: 1,
|
||||
name: '1',
|
||||
},
|
||||
{
|
||||
value: 1,
|
||||
value2: 1,
|
||||
name: '1',
|
||||
},
|
||||
{
|
||||
value: 1,
|
||||
value2: 1,
|
||||
name: '1',
|
||||
},
|
||||
{
|
||||
value: 1,
|
||||
value2: 1,
|
||||
name: '1',
|
||||
},
|
||||
{
|
||||
value: 1,
|
||||
value2: 1,
|
||||
name: '1',
|
||||
},
|
||||
],
|
||||
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.$refs.chart1.setData({
|
||||
grid: {
|
||||
left: "0",
|
||||
right: "4%",
|
||||
bottom: '2%',
|
||||
top: "10%",
|
||||
containLabel: true,
|
||||
},
|
||||
xAxis: {
|
||||
data: [
|
||||
"1时",
|
||||
"2时",
|
||||
"3时",
|
||||
"4时",
|
||||
"5时",
|
||||
"7时",
|
||||
"8时",
|
||||
],
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: "#3d5269",
|
||||
},
|
||||
},
|
||||
axisLabel: {
|
||||
interval: 0,
|
||||
color: "#fff",
|
||||
fontSize: 14,
|
||||
},
|
||||
},
|
||||
yAxis: {
|
||||
nameTextStyle: {
|
||||
color: "#fff",
|
||||
fontSize: 16,
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: "#3d5269",
|
||||
},
|
||||
},
|
||||
axisLabel: {
|
||||
color: "#fff",
|
||||
fontSize: 10,
|
||||
},
|
||||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: "#2d3d53",
|
||||
},
|
||||
},
|
||||
interval: 500,
|
||||
},
|
||||
series: [
|
||||
{
|
||||
type: "bar",
|
||||
barWidth: '40%',
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: new echarts.graphic.LinearGradient(
|
||||
0,
|
||||
0,
|
||||
0,
|
||||
1,
|
||||
[
|
||||
{
|
||||
offset: 0,
|
||||
color: "#5ef3ff",
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: "#06a4f4",
|
||||
},
|
||||
],
|
||||
false
|
||||
),
|
||||
},
|
||||
},
|
||||
label: {
|
||||
normal: {
|
||||
show: true,
|
||||
fontSize: 12,
|
||||
fontWeight: "bold",
|
||||
color: "#ffffff",
|
||||
position: "top",
|
||||
},
|
||||
},
|
||||
data: [254, 3254, 1654, 2454, 2757, 2011, 1211],
|
||||
},
|
||||
],
|
||||
})
|
||||
this.$refs.chart2.setData({
|
||||
grid: {
|
||||
left: "0",
|
||||
right: "4%",
|
||||
bottom: '2%',
|
||||
top: "10%",
|
||||
containLabel: true,
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'shadow'
|
||||
}
|
||||
},
|
||||
xAxis: {
|
||||
data: ["A-01", "A-02", "A-03"],
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
axisLine: {
|
||||
show: false,
|
||||
},
|
||||
axisLabel: {
|
||||
show: true,
|
||||
margin: 30,
|
||||
textStyle: {
|
||||
color: "#f0f0f0",
|
||||
},
|
||||
},
|
||||
},
|
||||
yAxis: {
|
||||
splitLine: {
|
||||
show: false,
|
||||
},
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
axisLine: {
|
||||
show: false,
|
||||
},
|
||||
axisLabel: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: "上底",
|
||||
type: "pictorialBar",
|
||||
symbolSize: [30, 16],
|
||||
symbolOffset: [0, -8],
|
||||
z: 12,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: "#14b1eb",
|
||||
},
|
||||
},
|
||||
tooltip: {
|
||||
show: false
|
||||
},
|
||||
data: [
|
||||
{
|
||||
value: 100,
|
||||
symbolPosition: "end",
|
||||
},
|
||||
{
|
||||
value: 50,
|
||||
symbolPosition: "end",
|
||||
},
|
||||
{
|
||||
value: 20,
|
||||
symbolPosition: "end",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
name: "下底",
|
||||
type: "pictorialBar",
|
||||
symbolSize: [30, 16],
|
||||
symbolOffset: [0, 8],
|
||||
z: 12,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: "#14b1eb",
|
||||
},
|
||||
},
|
||||
tooltip: {
|
||||
show: false
|
||||
},
|
||||
data: [100, 50, 20],
|
||||
},
|
||||
{
|
||||
name: "内环",
|
||||
type: "pictorialBar",
|
||||
symbolSize: [40, 20],
|
||||
symbolOffset: [0, 10],
|
||||
z: 11,
|
||||
tooltip: {
|
||||
show: false
|
||||
},
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: "transparent",
|
||||
borderColor: "#14b1eb",
|
||||
borderWidth: 5,
|
||||
},
|
||||
},
|
||||
data: [100, 50, 20],
|
||||
},
|
||||
{
|
||||
tooltip: {
|
||||
show: false
|
||||
},
|
||||
name: "外环",
|
||||
type: "pictorialBar",
|
||||
symbolSize: [55, 26],
|
||||
symbolOffset: [0, 13],
|
||||
z: 10,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: "transparent",
|
||||
borderColor: "#14b1eb",
|
||||
borderType: "dashed",
|
||||
borderWidth: 5,
|
||||
},
|
||||
},
|
||||
data: [100, 50, 20],
|
||||
},
|
||||
{
|
||||
name: "数量",
|
||||
type: "bar",
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: "#14b1eb",
|
||||
opacity: 0.7,
|
||||
},
|
||||
},
|
||||
silent: true,
|
||||
barWidth: 30,
|
||||
barGap: "-100%", // Make series be overlap
|
||||
data: [100, 50, 20],
|
||||
},
|
||||
],
|
||||
})
|
||||
this.$refs.chart3.setData({
|
||||
tooltip: {
|
||||
trigger: "axis",
|
||||
axisPointer: {
|
||||
type: "shadow",
|
||||
},
|
||||
},
|
||||
grid: {
|
||||
top: "10%",
|
||||
right: "0%",
|
||||
left: "5%",
|
||||
bottom: 20,
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
type: "category",
|
||||
data: [
|
||||
"A1库",
|
||||
"A2库",
|
||||
"A3库",
|
||||
"A4库",
|
||||
"A5库",
|
||||
"A6库",
|
||||
"A7库",
|
||||
"A8库",
|
||||
"A9库",
|
||||
"A10库",
|
||||
"A11库",
|
||||
"A12库",
|
||||
],
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: "rgba(66, 192, 255, .3)",
|
||||
},
|
||||
},
|
||||
axisLabel: {
|
||||
interval: 0,
|
||||
margin: 10,
|
||||
color: "#05D5FF",
|
||||
textStyle: {
|
||||
fontSize: 11,
|
||||
},
|
||||
},
|
||||
axisTick: {
|
||||
//刻度
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
axisLabel: {
|
||||
padding: [3, 0, 0, 0],
|
||||
formatter: "{value}",
|
||||
color: "rgba(95, 187, 235, 1)",
|
||||
textStyle: {
|
||||
fontSize: 11,
|
||||
},
|
||||
},
|
||||
axisTick: {
|
||||
show: true,
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: "rgba(66, 192, 255, .3)",
|
||||
},
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
color: "rgba(255,255,255,0)",
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: '库存',
|
||||
type: "bar",
|
||||
data: [
|
||||
20, 50, 15, 35, 50, 30, 40, 50, 60, 20, 50, 15
|
||||
],
|
||||
barWidth: "30%",
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: new echarts.graphic.LinearGradient(
|
||||
0,
|
||||
0,
|
||||
0,
|
||||
1,
|
||||
[
|
||||
{
|
||||
offset: 0,
|
||||
color: "rgba(5, 213, 255, 1)", // 0% 处的颜色
|
||||
},
|
||||
{
|
||||
offset: 0.98,
|
||||
color: "rgba(5, 213, 255, 0)", // 100% 处的颜色
|
||||
},
|
||||
],
|
||||
false
|
||||
),
|
||||
shadowColor: "rgba(5, 213, 255, 1)",
|
||||
shadowBlur: 4,
|
||||
},
|
||||
},
|
||||
label: {
|
||||
normal: {
|
||||
show: true,
|
||||
lineHeight: 10,
|
||||
formatter: "{c}",
|
||||
position: "top",
|
||||
textStyle: {
|
||||
color: "#fff",
|
||||
fontSize: 10,
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
})
|
||||
},
|
||||
methods: {}
|
||||
};
|
||||
</script>
|
||||
<style scoped>
|
||||
.app-container {
|
||||
background-image: url("../../../assets/board/pourInto.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;
|
||||
}
|
||||
|
||||
|
||||
.scrollTable {
|
||||
position: absolute;
|
||||
top: 15%;
|
||||
left: 4%;
|
||||
width: 45%;
|
||||
height: 36%;
|
||||
}
|
||||
|
||||
|
||||
.scrollTableItem {
|
||||
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: 16.6%;
|
||||
}
|
||||
|
||||
.chart1 {
|
||||
position: absolute;
|
||||
top: 58.5%;
|
||||
left: 3.6%;
|
||||
width: 45.5%;
|
||||
height: 35%;
|
||||
}
|
||||
|
||||
.chart2 {
|
||||
position: absolute;
|
||||
top: 15%;
|
||||
left: 51%;
|
||||
width: 45.5%;
|
||||
height: 35%;
|
||||
}
|
||||
|
||||
.chart3 {
|
||||
position: absolute;
|
||||
top: 58.5%;
|
||||
left: 51%;
|
||||
width: 45.5%;
|
||||
height: 35%;
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue