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

修改生产界面

Browse Source
master
夜笙歌 9 months ago
parent 13418a9e87
commit 9c81a45837
3 changed files with 470 additions and 341 deletions
Show Stats Download Patch File Download Diff File

2
hw-ui/package.json
Unescape Escape View File

@ -40,7 +40,7 @@
"axios": "0.24.0",
"clipboard": "2.0.8",
"core-js": "3.25.3",
"echarts": "5.4.0",
"echarts": "5.5.0",
"element-ui": "2.15.14",
"file-saver": "2.0.5",
"fuse.js": "6.4.3",

40
hw-ui/src/layout/index2.vue
Unescape Escape View File

@ -1,18 +1,58 @@
<template>
<div>
<router-view></router-view>
<div class="time" id="time">{{ time }}</div>
<div class="date" id="date">{{ date }}</div>
</div>
</template>
<script>
let getDateIntervalFun = null
export default {
name: 'BoardIndex',
data() {
return {
time: '',
date: ''
}
},
created() {
const getDate = () => {
let date = new Date()
let YYYY = date.getFullYear()
let MM = (date.getMonth() + 1).toString().length === 1 ? ('0' + (date.getMonth() + 1)) : (date.getMonth() + 1)
let dd = date.getDate().toString().length === 1 ? ('0' + date.getDate()) : date.getDate()
let HH = date.getHours().toString().length === 1 ? ('0' + date.getHours()) : date.getHours()
let mm = date.getMinutes().toString().length === 1 ? ('0' + date.getMinutes()) : date.getMinutes()
let ss = date.getSeconds().toString().length === 1 ? ('0' + date.getSeconds()) : date.getSeconds()
this.date = `${YYYY} - ${MM} - ${dd}`
this.time = `${HH} : ${mm} : ${ss}`
}
getDate()
getDateIntervalFun = setInterval(getDate, 1000)
},
beforeDestroy() {
getDateIntervalFun = null
}
}
</script>
<style scoped>
.time, .date {
position: absolute;
font-size: 0.8vw;
color: #fcfcfc;
transform: translate(-50%, -50%);
white-space: nowrap;
}
.time {
top: 3.2%;
left: 85.8%;
}
.date {
top: 3.2%;
left: 94.1%;
}
</style>

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

@ -1,29 +1,27 @@
<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)+'%'"
<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 style="background-color: #094170aa">
<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 class="scrollTableItem" style="color:#fff;font-weight: bold;">
完成率
时间
</div>
</div>
<vue-seamless-scroll
@ -36,13 +34,13 @@
v-for="(item, index) in scrollTableData"
:key="index"
>
<div :style='"background-color:" + ((index % 2 === 0)? "#053460":"#032d57") '>
<div :style='"background-color:" + ((index % 2 === 0)? "#053460aa":"#032d57aa") '>
<div
class="scrollTableItem" style="width: 10%">
class="scrollTableItem">
{{ item.value1 }}
</div>
<div
class="scrollTableItem" style="width: 23.333%">
class="scrollTableItem">
{{ item.value2 }}
</div>
<div
@ -57,10 +55,6 @@
class="scrollTableItem">
{{ item.value5 }}
</div>
<div
class="scrollTableItem">
{{ item.value6 }}
</div>
</div>
</div>
</vue-seamless-scroll>
@ -77,6 +71,27 @@
<div class="chart4">
<Chart key="chart4" ref="chart4"></Chart>
</div>
<div class="chart5">
<Chart key="chart5" ref="chart5"></Chart>
</div>
<div class="span1">可用库位占比</div>
<div class="span2">库存占用率</div>
<div class="info1">
<div class="infoSpan">当日入库量:</div>
<div class="infoSum" style="color:#bbc2c6;">1122</div>
</div>
<div class="info2">
<div class="infoSpan">当日入库量:</div>
<div class="infoSum" style="color:#a68b19;">1122</div>
</div>
<div class="info3">
<div class="infoSpan">当日入库量:</div>
<div class="infoSum" style="color:#01c038;">1122</div>
</div>
<div class="info4">
<div class="infoSpan">当日入库量:</div>
<div class="infoSum" style="color:#c0070c;">1122</div>
</div>
</div>
</template>
@ -102,20 +117,20 @@ export default {
],
titlePosition: [
{
top: 11.3,
top: 19.7,
left: 5.5
},
{
top: 11.3,
left: 75
top: 19.7,
left: 35.2
},
{
top: 63,
top: 59.8,
left: 5.5
},
{
top: 63,
left: 30.5
top: 59.8,
left: 35.2
},
],
scrollTableOption: {
@ -128,18 +143,13 @@ export default {
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) + '%'
scrollTableData: Array(4).fill('').map(function (i, k) {
return {
value1: k + 1,
value2: "20230304" + k,
value3: val1,
value4: val2,
value5: val3,
value6: val4,
value2: '出库',
value3: '物料1',
value4: '000' + k,
value5: '2024.03.04',
}
}),
}
@ -147,97 +157,142 @@ export default {
mounted() {
this.$refs.chart1.setData({
tooltip: {
trigger: 'axis',
axisPointer: {
// 坐标轴指示器，坐标轴触发有效
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
}
trigger: "item",
},
grid: {
left: '0',
right: '4%',
bottom: '0',
top: 20,
containLabel: true
borderWidth: 0,
top: "10%",
left: "10%",
right: "10%",
bottom: "10%",
},
xAxis: {
type: 'category',
data: [1, 2, 3, 4, 5, 6],
yAxis: {
type: "category",
axisLabel: {
margin: 10,
color: "#ffffff63",
},
axisTick: {
show: true,
lineStyle: {
color: "#ffffff1f",
},
},
splitLine: {
show: true,
lineStyle: {
type: 'dashed',
color: "#ffffff1f",
},
},
axisLine: {
lineStyle: {
color: 'white'
}
color: "#fff3",
width: 2,
},
},
axisLabel: {
// interval: 0,
// rotate: 40,
textStyle: {
fontFamily: 'Microsoft YaHei'
}
}
data: ['物料1', '物料2', '物料3'],
},
yAxis: {
type: 'value',
xAxis: {
type: "value",
axisLabel: {
margin: 10,
color: "#ffffff63",
},
axisLine: {
show: false,
},
axisTick: {
show: true,
lineStyle: {
color: 'white'
}
color: "#ffffff1f",
},
},
splitLine: {
show: false
show: true,
lineStyle: {
type: 'dashed',
color: "#ffffff1f",
},
},
axisLabel: {}
},
series: [
{
name: '数量',
label: {
normal: {
show: true,
position: 'top',
textStyle: {
color: '#a8aab0',
fontStyle: 'normal',
fontFamily: '微软雅黑',
fontSize: 0.75 * vw
}
}
},
type: 'bar',
barWidth: '30%',
barMaxWidth: 50,
name: "",
type: "bar",
barWidth: "40%",
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
color: new echarts.graphic.LinearGradient(
0,
0,
1,
0,
[
{
offset: 0,
color: '#39ffff'
color: "#0a2ad7",
},
{
offset: 1,
color: '#5affa6'
}
])
}
color: "#138dd7",
},
],
false
),
},
data: [1, 2, 3, 4, 5, 6]
}
data: [1, 2, 3],
},
{
name: "",
type: "pictorialBar",
barWidth: "40%",
symbolSize: [5, '100%'],
symbolPosition: 'end',
symbolOffset: [3, 0],
barGap: '-100%',
itemStyle: {
color: '#138dd7'
},
data: [1, 2, 3],
},
]
})
this.$refs.chart2.setData({
grid: {
top: 30,
left: "2%",
top: "10%",
left: "5%",
right: "5%",
bottom: "2%",
containLabel: true,
bottom: "10%",
},
tooltip: {
trigger: "axis",
axisPointer: {
type: "shadow",
label: {
show: true,
},
},
},
legend: {
data: ["出库", "入库"],
top: "0%",
textStyle: {
color: "#ffffff",
},
},
xAxis: {
type: "category",
boundaryGap: false,
data: ["14", "15", "16", "17", "18", "19", "20", "21", "22", "23"],
data: [
"物料1",
"物料2",
"物料3",
"物料4",
"物料5",
"物料6",
"物料7",
"物料8",
],
axisLabel: {
margin: 10,
color: "#ffffff63",
@ -252,300 +307,264 @@ export default {
},
},
splitLine: {
show: false,
show: true,
lineStyle: {
type: 'dashed',
color: "#ffffff1f",
},
},
},
yAxis: [
{
type: "value",
axisLabel: {
margin: 10,
color: "#ffffff63",
},
yAxis: {
type: "value",
axisLabel: {
margin: 10,
color: "#ffffff63",
},
axisTick: {
show: true,
lineStyle: {
color: "#ffffff1f",
},
axisTick: {
show: true,
lineStyle: {
color: "#ffffff1f",
},
splitLine: {
show: false,
lineStyle: {
type: 'dashed',
color: "#ffffff1f",
},
},
splitLine: {
show: true,
lineStyle: {
type: 'dashed',
color: "#ffffff1f",
},
axisLine: {
lineStyle: {
color: "#fff",
width: 2,
},
},
axisLine: {
lineStyle: {
color: "#fff3",
width: 2,
},
},
],
},
series: [
{
name: "产量",
type: "line",
smooth: true, //是否平滑曲线显示
showAllSymbol: true,
symbol: "circle",
symbolSize: 6,
lineStyle: {
name: "出库",
type: "bar",
barWidth: '25%',
itemStyle: {
normal: {
color: "#fff", // 线条颜色
},
},
label: {
show: true,
position: "top",
textStyle: {
color: "#fff",
color: new echarts.graphic.LinearGradient(
0,
1,
0,
0,
[
{
offset: 0,
color: "#0a2ad7",
},
{
offset: 1,
color: "#138dd7",
},
],
false
),
},
},
data: [4.2, 3.8, 4.8, 3.5, 2.9, 2.8, 3, 5],
},
{
name: "入库",
type: "bar",
barWidth: '25%',
barGap: '20%',
itemStyle: {
color: "red",
borderColor: "#fff",
borderWidth: 3,
},
tooltip: {
show: false,
},
areaStyle: {
normal: {
color: new echarts.graphic.LinearGradient(
0,
1,
0,
0,
1,
[
{
offset: 0,
color: "#eb64fb",
color: "#159d40",
},
{
offset: 1,
color: "#3fbbff0d",
color: "#0bcb98",
},
],
false
),
},
},
data: [393, 438, 485, 631, 689, 824, 987, 1000, 1100, 1200],
},
],
})
this.$refs.chart3.setData({
grid: {
top: 30,
left: "2%",
right: "5%",
bottom: "2%",
containLabel: true,
},
xAxis: {
type: "category",
data: ["14", "15", "16", "17", "18", "19", "20", "21", "22", "23"],
axisLabel: {
margin: 10,
color: "#ffffff63",
},
axisLine: {
show: false,
data: [4.2, 3.8, 4.8, 3.5, 2.9, 2.8, 3, 5],
},
axisTick: {
show: true,
lineStyle: {
color: "#ffffff1f",
{
name: "",
tooltip: {
show: false
},
},
splitLine: {
show: true,
lineStyle: {
type: 'dashed',
color: "#ffffff1f",
type: "pictorialBar",
barWidth: "25%",
symbolSize: ['100%', 5],
symbolPosition: 'end',
symbolOffset: ['-60%', -3],
itemStyle: {
color: '#138dd7'
},
data: [4.2, 3.8, 4.8, 3.5, 2.9, 2.8, 3, 5],
},
},
yAxis: [
{
type: "value",
axisLabel: {
margin: 10,
color: "#ffffff63",
},
axisTick: {
show: true,
lineStyle: {
color: "#ffffff1f",
},
},
splitLine: {
show: true,
lineStyle: {
type: 'dashed',
color: "#ffffff1f",
},
name: "",
type: "pictorialBar",
tooltip: {
show: false
},
axisLine: {
lineStyle: {
color: "#fff",
width: 2,
},
barWidth: "25%",
symbolSize: ['100%', 5],
symbolPosition: 'end',
symbolOffset: ['60%', -3],
itemStyle: {
color: '#0bcb98'
},
data: [4.2, 3.8, 4.8, 3.5, 2.9, 2.8, 3, 5],
},
],
})
this.$refs.chart3.setData({
tooltip: {
trigger: "item",
formatter: "{a} <br/>{b} : {c} ({d}%)",
},
legend: {
type: "scroll",
orient: "vertical",
left: "70%",
align: "left",
top: "middle",
textStyle: {
color: "#8C8C8C",
},
height: 250,
},
series: [
{
name: "产量",
type: "line",
smooth: true, //是否平滑曲线显示
showAllSymbol: true,
symbol: "circle",
symbolSize: 6,
lineStyle: {
normal: {
color: "#fff", // 线条颜色
name: "库存情况",
type: "pie",
radius: ["20%", "70%"],
center: ["35%", "50%"],
clockwise: false,
data: [
{
value: 45,
name: "已过期",
},
},
{
value: 25,
name: "半年内",
},
{
value: 15,
name: "三个月内",
},
{
value: 8,
name: "一个月内",
},
],
label: {
show: true,
position: "top",
textStyle: {
color: "#fff",
normal: {
position: "inner",
textStyle: {
color: "#fff",
fontSize: 14,
},
formatter: (e) => {
return e.percent.toFixed(2) + '%'
}
},
},
itemStyle: {
color: "red",
borderColor: "#fff",
borderWidth: 3,
},
tooltip: {
show: false,
labelLine: {
normal: {
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: "#ffffff1f",
},
},
splitLine: {
show: false,
lineStyle: {
type: 'dashed',
color: "#ffffff1f",
},
title: {
x: 'center',
y: 'center',
text: "75%",
textStyle: {
color: '#ccc',
fontSize: 1.5 * vw,
},
},
yAxis: [
series: [
{
type: "value",
axisLabel: {
margin: 10,
color: "#ffffff63",
},
axisTick: {
show: true,
lineStyle: {
color: "#ffffff1f",
type: "pie",
radius: ["47.5%", "55%"],
center: ["50%", "50%"],
startAngle: 225,
endAngle: -45,
color: ['#fa9800', "transparent"],
data: [
{
value: 75,
name: ''
},
},
splitLine: {
show: false,
lineStyle: {
type: 'dashed',
color: "#ffffff1f",
{
value: 25,
name: ''
},
],
label: {
show: false
},
axisLine: {
lineStyle: {
color: "#fff",
width: 2,
labelLine: {
normal: {
show: false,
},
},
},
],
})
this.$refs.chart5.setData({
title: {
x: 'center',
y: 'center',
text: "75%",
textStyle: {
color: '#ccc',
fontSize: 1.5 * vw,
},
},
series: [
{
name: "产量",
type: "line",
smooth: true, //是否平滑曲线显示
showAllSymbol: true,
symbol: "circle",
symbolSize: 6,
lineStyle: {
normal: {
color: "#fff", // 线条颜色
type: "pie",
radius: ["47.5%", "55%"],
center: ["50%", "50%"],
startAngle: 225,
endAngle: -45,
color: ['#00f79e', "transparent"],
data: [
{
value: 75,
name: '',
},
},
label: {
show: true,
position: "top",
textStyle: {
color: "#fff",
{
value: 25,
name: ''
},
],
label: {
// show: false
},
itemStyle: {
color: "red",
borderColor: "#fff",
borderWidth: 3,
},
tooltip: {
show: false,
},
areaStyle: {
labelLine: {
normal: {
color: new echarts.graphic.LinearGradient(
0,
0,
0,
1,
[
{
offset: 0,
color: "#eb64fb",
},
{
offset: 1,
color: "#3fbbff0d",
},
],
false
),
show: false,
},
},
data: [393, 438, 485, 631, 689, 824, 987, 1000, 1100, 1200],
},
],
})
@ -555,6 +574,7 @@ export default {
this.$refs.chart2.chart.resize()
this.$refs.chart3.chart.resize()
this.$refs.chart4.chart.resize()
this.$refs.chart5.chart.resize()
}
},
methods: {}
@ -593,53 +613,122 @@ export default {
.table1 {
position: absolute;
top: 14.5%;
left: 3.3%;
width: 23.8%;
height: 45.5%;
top: 66.5%;
left: 67.3%;
width: 27.8%;
height: 27.5%;
color: #fff
}
.scrollTableItem {
display: inline-block;
width: calc(100% / 6);
width: calc(100% / 5);
text-align: center;
padding: 4px 0;
padding: 14px 0;
color: #fff9
}
.chart1 {
position: absolute;
top: 14.5%;
left: 73%;
width: 23.8%;
height: 45.5%;
top: 23%;
left: 3.8%;
width: 27.8%;
height: 32%;
}
.chart2 {
position: absolute;
top: 66%;
left: 3.3%;
width: 23.8%;
height: 29%;
top: 23%;
left: 33%;
width: 63.8%;
height: 32%;
}
.chart3 {
position: absolute;
top: 66%;
left: 28.4%;
width: 43.1%;
height: 29%;
top: 63%;
left: 3.8%;
width: 27.8%;
height: 32%;
}
.chart4 {
position: absolute;
top: 66%;
left: 73%;
width: 23.8%;
height: 29%;
top: 64.6%;
left: 33.9%;
width: 16vw;
height: 16vw;
}
.chart5 {
position: absolute;
top: 64.6%;
left: 48.8%;
width: 16vw;
height: 16vw;
}
.span1 {
position: absolute;
top: 86.3%;
left: 41.9%;
transform: translate(-50%, -50%);
color: #dddddd;
font-size: 1vw;
}
.span2 {
position: absolute;
top: 86.3%;
left: 56.8%;
transform: translate(-50%, -50%);
color: #dddddd;
font-size: 1vw;
}
.info1, .info2, .info3, .info4 {
position: absolute;
top: 11.9%;
width: 19.6%;
height: 5.8%;
transform: translate(-50%, -50%);
.infoSpan {
position: absolute;
transform: translate(-100%, -50%);
top: 50%;
left: 45%;
color: #ccc;
font-size: 1.1vw;
}
.infoSum {
position: absolute;
transform: translate(100%, -50%);
top: 50%;
left: 47%;
font-size: 1.1vw;
}
}
.info1 {
left: 13.1%;
}
.info2 {
left: 37.7%;
}
.info3 {
left: 62.3%;
}
.info4 {
left: 86.9%;
}
</style>

Write Preview
Loading…
Cancel
Save