xins
/
HwMes
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

修改生产界面

Browse Source
master
夜笙歌 9 months ago
parent 9a2df9f62f
commit 13418a9e87
2 changed files with 524 additions and 74 deletions
Show Stats Download Patch File Download Diff File

7
hw-ui/src/views/board/production/firstFloor.vue
Unescape Escape View File

@ -1,8 +1,8 @@
<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)+'%'">
<div v-for="(i,k) in title" :style="'top:'+(titlePosition[k]&&titlePosition[k].top||0)+'%;left:'+(titlePosition[k]&&titlePosition[k].left||0)+'%'"
class="title">
{{ i }}
</div>
<div class="table1">
@ -610,6 +610,7 @@ export default {
top: 0;
left: 0;
}
.headTitle {
position: absolute;
top: 5%;
@ -627,6 +628,7 @@ export default {
font-size: 1vw;
letter-spacing: 2px;
}
.num1 {
position: absolute;
font-size: 2vw;
@ -684,6 +686,7 @@ export default {
height: 29%;
}
.state {
position: absolute;
transform: translate(-50%, -50%);

549
hw-ui/src/views/board/warehouse/firstFloor.vue
Unescape Escape View File

@ -1,9 +1,87 @@
<template>
<div class="app-container">
<div class="headTitle">京源生产监控平台</div>
<div v-for="(i,k) in title" :style="'top:'+(titlePosition[k]&&titlePosition[k].top||0)+'%;left:'+(titlePosition[k]&&titlePosition[k].left||0)+'%'"
class="title">
{{ i }}
</div>
<div class="table1">
<div style="background-color: #094170">
<div class="scrollTableItem" style="color:#fff;font-weight: bold;width: 10%">
编号
</div>
<div class="scrollTableItem" style="color:#fff;font-weight: bold;width: 23.333%">
生产工单
</div>
<div class="scrollTableItem" style="color:#fff;font-weight: bold;">
计划数量
</div>
<div class="scrollTableItem" style="color:#fff;font-weight: bold;">
实际数量
</div>
<div class="scrollTableItem" style="color:#fff;font-weight: bold;">
差异值
</div>
<div class="scrollTableItem" style="color:#fff;font-weight: bold;">
完成率
</div>
</div>
<vue-seamless-scroll
:class-option="scrollTableOption"
:data="scrollTableData"
class="case-item"
style="height: calc(100% - 30px);overflow: hidden;"
>
<div
v-for="(item, index) in scrollTableData"
:key="index"
>
<div :style='"background-color:" + ((index % 2 === 0)? "#053460":"#032d57") '>
<div
class="scrollTableItem" style="width: 10%">
{{ item.value1 }}
</div>
<div
class="scrollTableItem" style="width: 23.333%">
{{ item.value2 }}
</div>
<div
class="scrollTableItem">
{{ item.value3 }}
</div>
<div
class="scrollTableItem">
{{ item.value4 }}
</div>
<div
class="scrollTableItem">
{{ item.value5 }}
</div>
<div
class="scrollTableItem">
{{ item.value6 }}
</div>
</div>
</div>
</vue-seamless-scroll>
</div>
<div class="chart1">
<Chart key="chart1" ref="chart1"></Chart>
</div>
<div class="chart2">
<Chart key="chart2" ref="chart2"></Chart>
</div>
<div class="chart3">
<Chart key="chart3" ref="chart3"></Chart>
</div>
<div class="chart4">
<Chart key="chart4" ref="chart4"></Chart>
</div>
</div>
</template>
<script>
import vueSeamlessScroll from "vue-seamless-scroll";
import Chart from '@/components/board/Chart'
import * as echarts from 'echarts'
@ -11,13 +89,63 @@ const vw = (document.documentElement.clientWidth || document.body.clientWidth) /
export default {
name: 'Board1',
components: {
vueSeamlessScroll,
Chart
},
data() {
return {}
return {
title: [
'库存总量统计',
'库位动态',
'物料时效统计',
'库位原理统计',
],
titlePosition: [
{
top: 11.3,
left: 5.5
},
{
top: 11.3,
left: 75
},
{
top: 63,
left: 5.5
},
{
top: 63,
left: 30.5
},
],
scrollTableOption: {
step: 0.5, // 数值越大速度滚动越快
limitMoveNum: 22, // 开始无缝滚动的数据量 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: Array(50).fill('').map(function (i, k) {
let val1 = Math.ceil(Math.random() * 10000)
let val2 = val1 - Math.ceil(Math.random() * val1)
let val3 = val1 - val2
let val4 = ((val2 / val1) * 100).toFixed(2) + '%'
return {
value1: k + 1,
value2: "20230304" + k,
value3: val1,
value4: val2,
value5: val3,
value6: val4,
}
}),
}
},
mounted() {
this.$refs.chart2.setData({
this.$refs.chart1.setData({
tooltip: {
trigger: 'axis',
axisPointer: {
@ -98,87 +226,336 @@ export default {
}
]
})
this.$refs.chart4.setData({
this.$refs.chart2.setData({
grid: {
top: 30,
left: "2%",
right: "5%",
bottom: "2%",
containLabel: true,
},
xAxis: {
type: "category",
boundaryGap: false,
data: ["14", "15", "16", "17", "18", "19", "20", "21", "22", "23"],
axisLabel: {
margin: 10,
color: "#ffffff63",
},
axisLine: {
show: false,
},
axisTick: {
show: true,
lineStyle: {
color: "#ffffff1f",
},
},
splitLine: {
show: false,
lineStyle: {
type: 'dashed',
color: "#ffffff1f",
},
},
},
yAxis: [
{
type: "value",
axisLabel: {
margin: 10,
color: "#ffffff63",
},
axisTick: {
show: true,
lineStyle: {
color: "#ffffff1f",
},
},
splitLine: {
show: false,
lineStyle: {
type: 'dashed',
color: "#ffffff1f",
},
},
axisLine: {
lineStyle: {
color: "#fff",
width: 2,
},
},
},
],
series: [
{
name: "产量",
type: "line",
smooth: true, //是否平滑曲线显示
showAllSymbol: true,
symbol: "circle",
symbolSize: 6,
lineStyle: {
normal: {
color: "#fff", // 线条颜色
},
},
label: {
show: true,
position: "top",
textStyle: {
color: "#fff",
},
},
itemStyle: {
color: "red",
borderColor: "#fff",
borderWidth: 3,
},
tooltip: {
trigger: 'axis',
axisPointer: {
// 坐标轴指示器，坐标轴触发有效
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
}
show: false,
},
areaStyle: {
normal: {
color: new echarts.graphic.LinearGradient(
0,
0,
0,
1,
[
{
offset: 0,
color: "#eb64fb",
},
{
offset: 1,
color: "#3fbbff0d",
},
],
false
),
},
},
data: [393, 438, 485, 631, 689, 824, 987, 1000, 1100, 1200],
},
],
})
this.$refs.chart3.setData({
grid: {
left: '0',
right: '4%',
bottom: '0',
top: 20,
containLabel: true
top: 30,
left: "2%",
right: "5%",
bottom: "2%",
containLabel: true,
},
xAxis: {
type: 'category',
data: [1, 2, 3, 4, 5, 6],
type: "category",
data: ["14", "15", "16", "17", "18", "19", "20", "21", "22", "23"],
axisLabel: {
margin: 10,
color: "#ffffff63",
},
axisLine: {
show: false,
},
axisTick: {
show: true,
lineStyle: {
color: 'white'
}
color: "#ffffff1f",
},
},
splitLine: {
show: true,
lineStyle: {
type: 'dashed',
color: "#ffffff1f",
},
},
},
yAxis: [
{
type: "value",
axisLabel: {
// interval: 0,
// rotate: 40,
textStyle: {
fontFamily: 'Microsoft YaHei'
}
}
margin: 10,
color: "#ffffff63",
},
yAxis: {
type: 'value',
axisTick: {
show: true,
lineStyle: {
color: "#ffffff1f",
},
},
splitLine: {
show: true,
lineStyle: {
type: 'dashed',
color: "#ffffff1f",
},
},
axisLine: {
lineStyle: {
color: "#fff",
width: 2,
},
},
},
],
series: [
{
name: "产量",
type: "line",
smooth: true, //是否平滑曲线显示
showAllSymbol: true,
symbol: "circle",
symbolSize: 6,
lineStyle: {
normal: {
color: "#fff", // 线条颜色
},
},
label: {
show: true,
position: "top",
textStyle: {
color: "#fff",
},
},
itemStyle: {
color: "red",
borderColor: "#fff",
borderWidth: 3,
},
tooltip: {
show: false,
},
data: [393, 438, 485, 631, 689, 824, 987, 1000, 1100, 1200],
},
],
})
this.$refs.chart4.setData({
grid: {
top: 30,
left: "2%",
right: "5%",
bottom: "2%",
containLabel: true,
},
xAxis: {
type: "category",
boundaryGap: false,
data: ["14", "15", "16", "17", "18", "19", "20", "21", "22", "23"],
axisLabel: {
margin: 10,
color: "#ffffff63",
},
axisLine: {
show: false,
},
axisTick: {
show: true,
lineStyle: {
color: 'white'
}
color: "#ffffff1f",
},
},
splitLine: {
show: false
show: false,
lineStyle: {
type: 'dashed',
color: "#ffffff1f",
},
axisLabel: {}
},
},
yAxis: [
{
type: "value",
axisLabel: {
margin: 10,
color: "#ffffff63",
},
axisTick: {
show: true,
lineStyle: {
color: "#ffffff1f",
},
},
splitLine: {
show: false,
lineStyle: {
type: 'dashed',
color: "#ffffff1f",
},
},
axisLine: {
lineStyle: {
color: "#fff",
width: 2,
},
},
},
],
series: [
{
name: '数量',
label: {
name: "产量",
type: "line",
smooth: true, //是否平滑曲线显示
showAllSymbol: true,
symbol: "circle",
symbolSize: 6,
lineStyle: {
normal: {
color: "#fff", // 线条颜色
},
},
label: {
show: true,
position: 'top',
position: "top",
textStyle: {
color: '#a8aab0',
fontStyle: 'normal',
fontFamily: '微软雅黑',
fontSize: 0.75 * vw
}
}
color: "#fff",
},
},
type: 'bar',
barWidth: '30%',
barMaxWidth: 50,
itemStyle: {
color: "red",
borderColor: "#fff",
borderWidth: 3,
},
tooltip: {
show: false,
},
areaStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
color: new echarts.graphic.LinearGradient(
0,
0,
0,
1,
[
{
offset: 0,
color: '#39ffff'
color: "#eb64fb",
},
{
offset: 1,
color: '#5affa6'
}
])
}
color: "#3fbbff0d",
},
data: [1, 2, 3, 4, 5, 6]
}
]
],
false
),
},
},
data: [393, 438, 485, 631, 689, 824, 987, 1000, 1100, 1200],
},
],
})
window.onresize = () => {
this.$refs.chart1.chart.resize()
this.$refs.chart2.chart.resize()
this.$refs.chart3.chart.resize()
this.$refs.chart4.chart.resize()
}
},
methods: {}
}
@ -186,7 +563,7 @@ export default {
<style lang="less" scoped>
.app-container {
background-image: url("../../../assets/board/bg.jpg");
background-image: url("../../../assets/board/warehouseBg1.jpg");
background-repeat: no-repeat;
background-size: 100% 100%;
width: 100%;
@ -195,4 +572,74 @@ export default {
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;
}
.table1 {
position: absolute;
top: 14.5%;
left: 3.3%;
width: 23.8%;
height: 45.5%;
color: #fff
}
.scrollTableItem {
display: inline-block;
width: calc(100% / 6);
text-align: center;
padding: 4px 0;
color: #fff9
}
.chart1 {
position: absolute;
top: 14.5%;
left: 73%;
width: 23.8%;
height: 45.5%;
}
.chart2 {
position: absolute;
top: 66%;
left: 3.3%;
width: 23.8%;
height: 29%;
}
.chart3 {
position: absolute;
top: 66%;
left: 28.4%;
width: 43.1%;
height: 29%;
}
.chart4 {
position: absolute;
top: 66%;
left: 73%;
width: 23.8%;
height: 29%;
}
</style>

Write Preview
Loading…
Cancel
Save