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", "axios": "0.24.0",
"clipboard": "2.0.8", "clipboard": "2.0.8",
"core-js": "3.25.3", "core-js": "3.25.3",
"echarts": "5.4.0", "echarts": "5.5.0",
"element-ui": "2.15.14", "element-ui": "2.15.14",
"file-saver": "2.0.5", "file-saver": "2.0.5",
"fuse.js": "6.4.3", "fuse.js": "6.4.3",

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

@ -1,18 +1,58 @@
<template> <template>
<div> <div>
<router-view></router-view> <router-view></router-view>
<div class="time" id="time">{{ time }}</div>
<div class="date" id="date">{{ date }}</div>
</div> </div>
</template> </template>
<script> <script>
let getDateIntervalFun = null
export default { export default {
name: 'BoardIndex', name: 'BoardIndex',
data() { data() {
return { 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> </script>
<style scoped> <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> </style>

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

@ -1,29 +1,27 @@
<template> <template>
<div class="app-container"> <div class="app-container">
<div class="headTitle">京源生产监控平台</div> <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 v-for="(i,k) in title"
:style="'top:'+(titlePosition[k]&&titlePosition[k].top||0)+'%;left:'+(titlePosition[k]&&titlePosition[k].left||0)+'%'"
class="title"> class="title">
{{ i }} {{ i }}
</div> </div>
<div class="table1"> <div class="table1">
<div style="background-color: #094170"> <div style="background-color: #094170aa">
<div class="scrollTableItem" style="color:#fff;font-weight: bold;width: 10%"> <div class="scrollTableItem" style="color:#fff;font-weight: bold;">
编号 任务编号
</div>
<div class="scrollTableItem" style="color:#fff;font-weight: bold;width: 23.333%">
生产工单
</div> </div>
<div class="scrollTableItem" style="color:#fff;font-weight: bold;"> <div class="scrollTableItem" style="color:#fff;font-weight: bold;">
计划数量 任务类型
</div> </div>
<div class="scrollTableItem" style="color:#fff;font-weight: bold;"> <div class="scrollTableItem" style="color:#fff;font-weight: bold;">
实际数量 物料名称
</div> </div>
<div class="scrollTableItem" style="color:#fff;font-weight: bold;"> <div class="scrollTableItem" style="color:#fff;font-weight: bold;">
差异值 库位编号
</div> </div>
<div class="scrollTableItem" style="color:#fff;font-weight: bold;"> <div class="scrollTableItem" style="color:#fff;font-weight: bold;">
完成率 时间
</div> </div>
</div> </div>
<vue-seamless-scroll <vue-seamless-scroll
@ -36,13 +34,13 @@
v-for="(item, index) in scrollTableData" v-for="(item, index) in scrollTableData"
:key="index" :key="index"
> >
<div :style='"background-color:" + ((index % 2 === 0)? "#053460":"#032d57") '> <div :style='"background-color:" + ((index % 2 === 0)? "#053460aa":"#032d57aa") '>
<div <div
class="scrollTableItem" style="width: 10%"> class="scrollTableItem">
{{ item.value1 }} {{ item.value1 }}
</div> </div>
<div <div
class="scrollTableItem" style="width: 23.333%"> class="scrollTableItem">
{{ item.value2 }} {{ item.value2 }}
</div> </div>
<div <div
@ -57,10 +55,6 @@
class="scrollTableItem"> class="scrollTableItem">
{{ item.value5 }} {{ item.value5 }}
</div> </div>
<div
class="scrollTableItem">
{{ item.value6 }}
</div>
</div> </div>
</div> </div>
</vue-seamless-scroll> </vue-seamless-scroll>
@ -77,6 +71,27 @@
<div class="chart4"> <div class="chart4">
<Chart key="chart4" ref="chart4"></Chart> <Chart key="chart4" ref="chart4"></Chart>
</div> </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> </div>
</template> </template>
@ -102,20 +117,20 @@ export default {
], ],
titlePosition: [ titlePosition: [
{ {
top: 11.3, top: 19.7,
left: 5.5 left: 5.5
}, },
{ {
top: 11.3, top: 19.7,
left: 75 left: 35.2
}, },
{ {
top: 63, top: 59.8,
left: 5.5 left: 5.5
}, },
{ {
top: 63, top: 59.8,
left: 30.5 left: 35.2
}, },
], ],
scrollTableOption: { scrollTableOption: {
@ -128,18 +143,13 @@ export default {
singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3 singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
waitTime: 0, waitTime: 0,
}, },
scrollTableData: Array(50).fill('').map(function (i, k) { scrollTableData: Array(4).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 { return {
value1: k + 1, value1: k + 1,
value2: "20230304" + k, value2: '出库',
value3: val1, value3: '物料1',
value4: val2, value4: '000' + k,
value5: val3, value5: '2024.03.04',
value6: val4,
} }
}), }),
} }
@ -147,97 +157,142 @@ export default {
mounted() { mounted() {
this.$refs.chart1.setData({ this.$refs.chart1.setData({
tooltip: { tooltip: {
trigger: 'axis', trigger: "item",
axisPointer: {
// 坐标轴指示器，坐标轴触发有效
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
}
}, },
grid: { grid: {
left: '0', borderWidth: 0,
right: '4%', top: "10%",
bottom: '0', left: "10%",
top: 20, right: "10%",
containLabel: true bottom: "10%",
}, },
xAxis: { yAxis: {
type: 'category', type: "category",
data: [1, 2, 3, 4, 5, 6], axisLabel: {
margin: 10,
color: "#ffffff63",
},
axisTick: {
show: true,
lineStyle: {
color: "#ffffff1f",
},
},
splitLine: {
show: true,
lineStyle: {
type: 'dashed',
color: "#ffffff1f",
},
},
axisLine: { axisLine: {
lineStyle: { lineStyle: {
color: 'white' color: "#fff3",
} width: 2,
},
}, },
axisLabel: { data: ['物料1', '物料2', '物料3'],
// interval: 0,
// rotate: 40,
textStyle: {
fontFamily: 'Microsoft YaHei'
}
}
}, },
xAxis: {
yAxis: { type: "value",
type: 'value', axisLabel: {
margin: 10,
color: "#ffffff63",
},
axisLine: { axisLine: {
show: false, show: false,
},
axisTick: {
show: true,
lineStyle: { lineStyle: {
color: 'white' color: "#ffffff1f",
} },
}, },
splitLine: { splitLine: {
show: false show: true,
lineStyle: {
type: 'dashed',
color: "#ffffff1f",
},
}, },
axisLabel: {}
}, },
series: [ series: [
{ {
name: '数量', name: "",
label: { type: "bar",
normal: { barWidth: "40%",
show: true,
position: 'top',
textStyle: {
color: '#a8aab0',
fontStyle: 'normal',
fontFamily: '微软雅黑',
fontSize: 0.75 * vw
}
}
},
type: 'bar',
barWidth: '30%',
barMaxWidth: 50,
itemStyle: { itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ color: new echarts.graphic.LinearGradient(
0,
0,
1,
0,
[
{ {
offset: 0, offset: 0,
color: '#39ffff' color: "#0a2ad7",
}, },
{ {
offset: 1, 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({ this.$refs.chart2.setData({
grid: { grid: {
top: 30, top: "10%",
left: "2%", left: "5%",
right: "5%", right: "5%",
bottom: "2%", bottom: "10%",
containLabel: true, },
tooltip: {
trigger: "axis",
axisPointer: {
type: "shadow",
label: {
show: true,
},
},
},
legend: {
data: ["出库", "入库"],
top: "0%",
textStyle: {
color: "#ffffff",
},
}, },
xAxis: { xAxis: {
type: "category", data: [
boundaryGap: false, "物料1",
data: ["14", "15", "16", "17", "18", "19", "20", "21", "22", "23"], "物料2",
"物料3",
"物料4",
"物料5",
"物料6",
"物料7",
"物料8",
],
axisLabel: { axisLabel: {
margin: 10, margin: 10,
color: "#ffffff63", color: "#ffffff63",
@ -252,300 +307,264 @@ export default {
}, },
}, },
splitLine: { splitLine: {
show: false, show: true,
lineStyle: { lineStyle: {
type: 'dashed', type: 'dashed',
color: "#ffffff1f", color: "#ffffff1f",
}, },
}, },
}, },
yAxis: [ yAxis: {
{ type: "value",
type: "value", axisLabel: {
axisLabel: { margin: 10,
margin: 10, color: "#ffffff63",
color: "#ffffff63", },
},
axisTick: { axisTick: {
show: true, show: true,
lineStyle: { lineStyle: {
color: "#ffffff1f", color: "#ffffff1f",
},
}, },
splitLine: { },
show: false, splitLine: {
lineStyle: { show: true,
type: 'dashed', lineStyle: {
color: "#ffffff1f", type: 'dashed',
}, color: "#ffffff1f",
}, },
axisLine: { },
lineStyle: { axisLine: {
color: "#fff", lineStyle: {
width: 2, color: "#fff3",
}, width: 2,
}, },
}, },
], },
series: [ series: [
{ {
name: "产量", name: "出库",
type: "line", type: "bar",
smooth: true, //是否平滑曲线显示 barWidth: '25%',
showAllSymbol: true, itemStyle: {
symbol: "circle",
symbolSize: 6,
lineStyle: {
normal: { normal: {
color: "#fff", // 线条颜色 color: new echarts.graphic.LinearGradient(
}, 0,
}, 1,
label: { 0,
show: true, 0,
position: "top", [
textStyle: { {
color: "#fff", 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: { itemStyle: {
color: "red",
borderColor: "#fff",
borderWidth: 3,
},
tooltip: {
show: false,
},
areaStyle: {
normal: { normal: {
color: new echarts.graphic.LinearGradient( color: new echarts.graphic.LinearGradient(
0, 0,
1,
0, 0,
0, 0,
1,
[ [
{ {
offset: 0, offset: 0,
color: "#eb64fb", color: "#159d40",
}, },
{ {
offset: 1, offset: 1,
color: "#3fbbff0d", color: "#0bcb98",
}, },
], ],
false false
), ),
}, },
}, },
data: [393, 438, 485, 631, 689, 824, 987, 1000, 1100, 1200], data: [4.2, 3.8, 4.8, 3.5, 2.9, 2.8, 3, 5],
},
],
})
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,
}, },
axisTick: { {
show: true, name: "",
lineStyle: { tooltip: {
color: "#ffffff1f", show: false
}, },
}, type: "pictorialBar",
splitLine: { barWidth: "25%",
show: true, symbolSize: ['100%', 5],
lineStyle: { symbolPosition: 'end',
type: 'dashed', symbolOffset: ['-60%', -3],
color: "#ffffff1f", itemStyle: {
color: '#138dd7'
}, },
data: [4.2, 3.8, 4.8, 3.5, 2.9, 2.8, 3, 5],
}, },
},
yAxis: [
{ {
type: "value", name: "",
axisLabel: { type: "pictorialBar",
margin: 10, tooltip: {
color: "#ffffff63", show: false
},
axisTick: {
show: true,
lineStyle: {
color: "#ffffff1f",
},
},
splitLine: {
show: true,
lineStyle: {
type: 'dashed',
color: "#ffffff1f",
},
}, },
axisLine: { barWidth: "25%",
lineStyle: { symbolSize: ['100%', 5],
color: "#fff", symbolPosition: 'end',
width: 2, 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: [ series: [
{ {
name: "产量", name: "库存情况",
type: "line", type: "pie",
smooth: true, //是否平滑曲线显示 radius: ["20%", "70%"],
showAllSymbol: true, center: ["35%", "50%"],
symbol: "circle", clockwise: false,
symbolSize: 6, data: [
lineStyle: { {
normal: { value: 45,
color: "#fff", // 线条颜色 name: "已过期",
}, },
}, {
value: 25,
name: "半年内",
},
{
value: 15,
name: "三个月内",
},
{
value: 8,
name: "一个月内",
},
],
label: { label: {
show: true, normal: {
position: "top", position: "inner",
textStyle: { textStyle: {
color: "#fff", color: "#fff",
fontSize: 14,
},
formatter: (e) => {
return e.percent.toFixed(2) + '%'
}
}, },
}, },
itemStyle: { labelLine: {
color: "red", normal: {
borderColor: "#fff", show: false,
borderWidth: 3, },
},
tooltip: {
show: false,
}, },
data: [393, 438, 485, 631, 689, 824, 987, 1000, 1100, 1200],
}, },
], ],
}) })
this.$refs.chart4.setData({ this.$refs.chart4.setData({
grid: { title: {
top: 30, x: 'center',
left: "2%", y: 'center',
right: "5%", text: "75%",
bottom: "2%", textStyle: {
containLabel: true, color: '#ccc',
}, fontSize: 1.5 * vw,
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: [ series: [
{ {
type: "value", type: "pie",
axisLabel: { radius: ["47.5%", "55%"],
margin: 10, center: ["50%", "50%"],
color: "#ffffff63", startAngle: 225,
}, endAngle: -45,
color: ['#fa9800', "transparent"],
axisTick: { data: [
show: true, {
lineStyle: { value: 75,
color: "#ffffff1f", name: ''
}, },
}, {
splitLine: { value: 25,
show: false, name: ''
lineStyle: {
type: 'dashed',
color: "#ffffff1f",
}, },
],
label: {
show: false
}, },
axisLine: { labelLine: {
lineStyle: { normal: {
color: "#fff", show: false,
width: 2,
}, },
}, },
}, },
], ],
})
this.$refs.chart5.setData({
title: {
x: 'center',
y: 'center',
text: "75%",
textStyle: {
color: '#ccc',
fontSize: 1.5 * vw,
},
},
series: [ series: [
{ {
name: "产量", type: "pie",
type: "line", radius: ["47.5%", "55%"],
smooth: true, //是否平滑曲线显示 center: ["50%", "50%"],
showAllSymbol: true, startAngle: 225,
symbol: "circle", endAngle: -45,
symbolSize: 6, color: ['#00f79e', "transparent"],
lineStyle: { data: [
normal: { {
color: "#fff", // 线条颜色 value: 75,
name: '',
}, },
}, {
label: { value: 25,
show: true, name: ''
position: "top",
textStyle: {
color: "#fff",
}, },
],
label: {
// show: false
}, },
itemStyle: { labelLine: {
color: "red",
borderColor: "#fff",
borderWidth: 3,
},
tooltip: {
show: false,
},
areaStyle: {
normal: { normal: {
color: new echarts.graphic.LinearGradient( show: false,
0,
0,
0,
1,
[
{
offset: 0,
color: "#eb64fb",
},
{
offset: 1,
color: "#3fbbff0d",
},
],
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.chart2.chart.resize()
this.$refs.chart3.chart.resize() this.$refs.chart3.chart.resize()
this.$refs.chart4.chart.resize() this.$refs.chart4.chart.resize()
this.$refs.chart5.chart.resize()
} }
}, },
methods: {} methods: {}
@ -593,53 +613,122 @@ export default {
.table1 { .table1 {
position: absolute; position: absolute;
top: 14.5%; top: 66.5%;
left: 3.3%; left: 67.3%;
width: 23.8%; width: 27.8%;
height: 45.5%; height: 27.5%;
color: #fff color: #fff
} }
.scrollTableItem { .scrollTableItem {
display: inline-block; display: inline-block;
width: calc(100% / 6); width: calc(100% / 5);
text-align: center; text-align: center;
padding: 4px 0; padding: 14px 0;
color: #fff9 color: #fff9
} }
.chart1 { .chart1 {
position: absolute; position: absolute;
top: 14.5%; top: 23%;
left: 73%; left: 3.8%;
width: 23.8%; width: 27.8%;
height: 45.5%; height: 32%;
} }
.chart2 { .chart2 {
position: absolute; position: absolute;
top: 66%; top: 23%;
left: 3.3%; left: 33%;
width: 23.8%; width: 63.8%;
height: 29%; height: 32%;
} }
.chart3 { .chart3 {
position: absolute; position: absolute;
top: 66%; top: 63%;
left: 28.4%; left: 3.8%;
width: 43.1%; width: 27.8%;
height: 29%; height: 32%;
} }
.chart4 { .chart4 {
position: absolute; position: absolute;
top: 66%; top: 64.6%;
left: 73%; left: 33.9%;
width: 23.8%; width: 16vw;
height: 29%; 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> </style>

Write Preview
Loading…
Cancel
Save