Yangwl
/
LJ-UI
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

添加白坯页面

Browse Source
yangwl
夜笙歌 3 weeks ago
parent a4ce820649
commit 20b298f092
4 changed files with 437 additions and 36 deletions
Show Stats Download Patch File Download Diff File

61
src/api/board/cs3.js
Unescape Escape View File

@ -0,0 +1,61 @@
import request from '@/utils/request'
// 查询产量
export function dryRoomDataCarousel(query) {
return request({
url: '/mes/wcsInterface/dryRoomDataCarousel',
method: 'post',
data: {
"factory": "999"
}
});
}
// 查询产量
export function getHourProductionList(query) {
return request({
url: '/mes/reportWork/getHourProductionList',
method: 'get',
params: query
});
}
export function EnergyExpend(query) {
return request({
url: '/mes/h5/EnergyExpend',
method: 'get',
params: query
});
}
export function agvdata(query) {
return request({
url: 'http://192.168.202.25:9001/api/scada/agvdata',
method: 'get',
params: query
});
}
export function PlanAchievementRate(query) {
return request({
url: '/mes/reportWork/PlanAchievementRate',
method: 'get',
params: query
});
}
export function getHfChartDatas(query) {
return request({
url: '/quality/qcProCheck/getHfChartDatas',
method: 'get',
params: query
});
}
export function getHourProductionLists(query) {
return request({
url: '/mes/reportWork/getHourProductionLists',
method: 'get',
params: query
});
}

BIN
src/assets/board/cs3/bg.jpg
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 244 KiB

9
src/views/cs/index2.vue
Unescape Escape View File

@ -101,7 +101,7 @@
<div :class="((equipmentData||[])[k]||{}).quantity>0 ? 'ring':'ring1'" :style="`top:${i.top}%;left:${i.left}%`" v-for="(i,k) in ringLocation"></div>
<div :class="`${i.isGoods? 'agv2':'agv1'}`" v-for="i in agvData" v-show="i.show"
<div :class="`${i.IsLoad? 'agv2':'agv1'}`" v-for="i in agvData" v-show="i.show"
:style="`${getLocation(i.x,i.y)}transform: rotate(${parseFloat(i.rotate )- 180}deg);`"></div>
</div>
</div>
@ -300,7 +300,7 @@ export default {
x: (v.X - 126061) / this.siteData.x,
y: (71313 - (v.Y - 116722)) / this.siteData.y,
rotate: v.Angle,
isGoods: false,
IsLoad: v.IsLoad,
show: v.X < 245000 && v.X > 126000 && v.Y < 187000 && v.Y > 116000
// show: true
})
@ -320,7 +320,8 @@ export default {
let f2 = new TWEEN.Tween(this.agvData.find(r => r.id === v.AgvId)).to({
x: (v.X - 126061) / this.siteData.x,
y: (71313 - (v.Y - 116722)) / this.siteData.y,
show: v.X < 245000 && v.X > 126000 && v.Y < 187000 && v.Y > 116000
show: v.X < 245000 && v.X > 126000 && v.Y < 187000 && v.Y > 116000,
IsLoad: v.IsLoad,
// show: true
}, time - 100).start().onComplete(()=>{
f2 = null
@ -331,7 +332,7 @@ export default {
x: (v.X - 126061) / this.siteData.x,
y: (71313 - (v.Y - 116722)) / this.siteData.y,
rotate: v.Angle,
isGoods: false,
IsLoad: v.IsLoad,
show: v.X < 245000 && v.X > 126000 && v.Y < 187000 && v.Y > 116000
// show: true
})

401
src/views/cs/index3.vue
Unescape Escape View File

@ -1,63 +1,102 @@
<template>
<div class="bg">
<div class="title">白坯车间数字应用大屏</div>
<div class="modelTitle" style=" top: 15.2%;left: 3%;">烘房状态</div>
<div class="modelTitle" style="top:15.2%;left:32%">设备运行数据</div>
<div class="modelTitle" style="top:15.2%;left:71%">烘房白坯质量统计</div>
<div class="modelTitle" style="top:65%;left:32%">近7天产量</div>
<div class="modelTitle" style="top:65%;left:71%">计划达成率</div>
<div class="title1" style="top:24%;left:34%">成型机数量：</div>
<div class="title1" style="top:24%;left:52.5%">烘房数量：</div>
<div class="title1" style="top:45%;left:34%">烘房耗电量：</div>
<div class="title1" style="top:45%;left:52.5%">AGV数量：</div>
<div class="unit1" style="top: 31.3%;left: 45.5%;">车</div>
<div class="unit1" style="top: 31.3%;left: 63.5%">车</div>
<div class="unit1" style="top: 51.3%;left: 45.5%;">KWh</div>
<div class="unit1" style="top: 51.3%;left: 63.5%;">台</div>
<div class="num1" style="top: 31.5%;left: 39.5%;">{{ CData.length }}</div>
<div class="num1" style="top:31.5%;left:57.7%">{{ HData.length }}</div>
<div class="num1" style="top:51.6%;left:39.5%">{{ expend }}</div>
<div class="num1" style="top:51.6%;left:57.7%">{{ agvData.length }}</div>
<div class="title2" style="top: 73.5%;left: 86.8%;">计划生产数量：</div>
<div class="title2" style="top: 85.3%;left: 86.8%;">实际生产数量：</div>
<div class="unit2" style="top: 76.5%;left: 95%;">车</div>
<div class="unit2" style="top: 88.5%;left: 95%;">车</div>
<div class="num2" style="top: 76.8%;left: 90.7%;color:#12fdae">{{ proData.totalRecordCount }}</div>
<div class="num2" style="top: 88.6%;left: 90.7%;color:#48b5fd">{{ proData.sumChe }}</div>
<div class="num3" style="top: 80.3%;left: 78.6%;">{{ percent }}</div>
<div class="title3" style="top: 91%;left: 78.8%;">计划达成率</div>
<div class="table1">
<div style="background-color: #094170">
<div style="background-color: #0d61aa;height: 5%;line-height: calc(3.9vh - 8px);color:#fbfafd">
<div class="scrollTable" style="font-weight: bold;">
告警编号
烘房
</div>
<div class="scrollTable" style="font-weight: bold;">
告警类型
温度
</div>
<div class="scrollTable" style="font-weight: bold;">
告警单元
湿度
</div>
<div class="scrollTable" style="font-weight: bold;">
操作
在生产
</div>
<div class="scrollTable" style="font-weight: bold;">
单车耗能
</div>
</div>
<vue-seamless-scroll
:class-option="{...chart1TableOption,limitMoveNum:10}"
:data="table1Data"
class="case-item"
style="height: 84%;overflow: hidden;"
style="height: 94%;overflow: hidden;margin-top: 1%"
>
<div
v-for="(item, index) in table1Data"
:key="index"
class="case-item"
>
<div :style='"background-color:" + ((index % 2 === 0)? "#053460":"#032d57") '>
<div
class="scrollTable">
{{ item.no }}
class="scrollTable" style="color:#49b2fc">
{{ item.equipment_code }}
</div>
<div
class="scrollTable">
{{ item.alarmInfoType === '1' ? '设备报警' : '' }}
{{ item.alarmInfoType === '2' ? '监控单元报警' : '' }}
{{ item.alarmInfoType === '3' ? '离线报警' : '' }}
{{ item.alarmInfoType === '4' ? '电子围栏' : '' }}
class="scrollTable" style="color:#49b2fc">
{{ item.temperature }}℃
</div>
<div
class="scrollTable">
{{ item.location }}
class="scrollTable" style="color:#49b2fc">
{{ item.humidity }}
</div>
<div class="scrollTable" style="width: 25%">
<el-button v-if="item.status === '0'" size="mini" type="primary" @click="dispose(item)">处理</el-button>
<span v-else>已处理</span>
<div
class="scrollTable" style="color:#49b2fc">
{{ item.dollyNumber }}
</div>
<div
class="scrollTable" style="color:#49b2fc">
{{ item.expend }}KWh
</div>
</div>
</div>
</vue-seamless-scroll>
</div>
<Chart ref="chart1" class="chart1"></Chart>
<Chart ref="chart2" class="chart2"></Chart>
</div>
</template>
<script>
import Chart from "@/components/Charts/Chart";
import vueSeamlessScroll from "vue-seamless-scroll";
import {
agvdata,
avgdata,
dryRoomDataCarousel,
EnergyExpend, getHfChartDatas,
getHourProductionList, getHourProductionLists,
PlanAchievementRate
} from "../../api/board/cs3";
export default {
components: {
@ -75,20 +114,221 @@ export default {
singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
waitTime: 0,
autoPlay: false,
navigation: false
},
table1Data: []
table1Data: [],
CData: [],
HData: [],
expend: 0,
agvData: [],
proData: {},
percent: ''
}
},
methods: {},
mounted() {
this.getData()
},
methods: {
getData() {
dryRoomDataCarousel().then(e => {
this.table1Data = e.data.dryingroomList || []
})
getHourProductionList().then(e => {
this.CData = e.filter(v => v.equName.includes('成型机'))
this.HData = e.filter(v => v.equName.includes('烘房'))
})
EnergyExpend().then(e => {
this.expend = e.map(v => v.expend).reduce((a, b) => a + b, 0).toFixed(2)
})
agvdata().then(e => {
this.agvData = e.Data
})
PlanAchievementRate().then(e => {
this.proData = e.data
this.percent = e.msg
})
getHfChartDatas({
createTimeStart: '2024-11-02 00:00:00',
createTimeEnd: '2024-11-04 00:00:00',
chartType: 'cp'
}).then(e => {
let option = {
tooltip: {
trigger: 'axis',
axisPointer: {
// Use axis to trigger tooltip
type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow'
}
},
legend: {
textStyle: {
color: '#eee'
}
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: {
type: 'value'
},
yAxis: {
type: 'category',
axisLabel: {
color: '#ccc'
},
data: e.checkList.map(v => v.machineName),
},
series: [
{
name: '合格数量',
type: 'bar',
stack: 'total',
label: {
show: true,
position:'insideRight',
formatter:"{c}车",
color:"#000"
},
emphasis: {
focus: 'series'
},
itemStyle: {
color:{
type: 'linear',
x: 0,
y: 0,
x2: 1,
y2: 0,
colorStops: [{
offset: 0, color: '#1e60f2' // 0% 处的颜色
}, {
offset: 1, color: '#00b9ff' // 100% 处的颜色
}],
global: false // 缺省为 false
}
},
data: e.checkList.map(v => parseFloat(v.quality))
},
{
name: '不合格数量',
type: 'bar',
stack: 'total',
label: {
show: true,
position:'right'
},
emphasis: {
focus: 'series'
},
data: e.checkList.map(v => 0)
},
]
};
this.$refs.chart1.setData(option)
})
getHourProductionLists().then(e => {
console.log(e)
let option1 = {
grid: {
top: '15%',
bottom: '10%',
left: '5%',
right: '3%'
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow',
label: {
show: true
}
}
},
legend: {
right: 0,
textStyle: {
color: '#eee'
}
},
xAxis: {
data: e.map(v=>v.pdate),
axisLine: {
show: true, //隐藏X轴轴线
lineStyle: {
color: '#fff'
}
},
axisTick: {
show: true //隐藏X轴刻度
},
axisLabel: {
show: true,
textStyle: {
color: '#fff' //X轴文字颜色
}
}
},
yAxis: [
{
type: 'value',
name: '单位：车',
nameTextStyle: {
color: '#fff'
},
splitLine: {
show: false
},
axisTick: {
show: true
},
axisLine: {
show: true,
lineStyle: {
color: '#fff'
}
},
axisLabel: {
show: true,
textStyle: {
color: '#fff'
}
}
}
],
series: [
{
name: '产量',
type: 'line',
smooth: true, //平滑曲线显示
showAllSymbol: true, //显示所有图形。
symbol: "emptyCircle", //标记的图形为实心圆
symbolSize: 5, //标记的大小
// itemStyle: {
// //折线拐点标志的样式
// color: "#058cff",
// },
// lineStyle: {
// color: "#058cff",
// },
// areaStyle: {
// color: "rgba(5,140,255, 0.2)",
// },
data: e.map(v=>parseFloat(v.quantity)),
},
]
};
this.$refs.chart2.setData(option1)
})
},
},
}
</script>
<style scoped lang="less">
.bg {
background-image: url("~@/assets/board/cs3/bg.png");
background-image: url("~@/assets/board/cs3/bg.jpg");
background-size: 100% 100%;
background-repeat: no-repeat;
position: absolute;
@ -110,23 +350,122 @@ export default {
transform: translateY(-50%);
}
.title1 {
position: absolute;
font-size: 1.2vw;
color: #fff;
letter-spacing: 2px;
transform: translateY(-50%);
}
.title2 {
position: absolute;
font-size: 0.7vw;
color: #fff;
letter-spacing: 2px;
transform: translateY(-50%);
}
.title3 {
position: absolute;
font-size: 1.2vw;
color: #0394fc;
letter-spacing: 2px;
transform: translate(-50%, -50%);
}
.unit1 {
position: absolute;
font-size: 0.8vw;
color: #eee;
letter-spacing: 2px;
transform: translateY(-50%);
}
.unit2 {
position: absolute;
font-size: 0.8vw;
color: #eee;
letter-spacing: 2px;
transform: translateY(-50%);
}
.num1 {
position: absolute;
font-size: 1.3vw;
color: #4ab4fd;
letter-spacing: 2px;
transform: translate(-50%, -50%);
}
.num2 {
position: absolute;
font-size: 1.3vw;
color: #4ab4fd;
letter-spacing: 2px;
transform: translate(-50%, -50%);
}
.num3 {
position: absolute;
font-size: 2vw;
color: #fff;
letter-spacing: 2px;
transform: translate(-50%, -50%);
}
.modelTitle {
position: absolute;
font-size: 1vw;
color: #fff;
letter-spacing: 2px;
transform: translateY(-50%);
}
.scrollTable {
color: rgb(185, 186, 192);
margin: auto 0px;
padding: 4px 0;
white-space: nowrap;
overflow: hidden;
//overflow: hidden;
text-overflow: ellipsis;
text-align: center;
display: inline-block;
width: 25%;
width: 20%;
}
.table1 {
position: absolute;
top: 10%;
left: 10%;
width: 20%;
height: 40%;
top: 18.5%;
left: 3.2%;
width: 25.4%;
height: 78%;
}
.chart1 {
position: absolute;
width: 27.4%;
height: 41.7%;
top: 18%;
left: 70.4%;
}
.chart2 {
position: absolute;
width: 37.4%;
height: 28.5%;
top: 67.6%;
left: 31.3%;
}
.case-item {
border: 2px solid #0c61ad;
border-radius: 2px;
margin: 8px 0 0 0;
color: #0c61ad;
font-size: 0.9vw;
line-height: 1.5vw;
background-color: #134781;
}
</style>

Write Preview
Loading…
Cancel
Save