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

修改显示

Browse Source
yangwl
夜笙歌 3 days ago
parent 7b87c057c5
commit 16e7f9898c
1 changed files with 227 additions and 61 deletions
Show Stats Download Patch File Download Diff File

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

@ -2,24 +2,24 @@
<div class="bg"> <div class="bg">
<div class="title">白坯车间数字应用大屏</div> <div class="title">白坯车间数字应用大屏</div>
<div class="modelTitle" style=" top: 15.2%;left: 3%;">烘房状态</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:32%">设备运行数据</div>-->
<div class="modelTitle" style="top:15.2%;left:32%">烘房耗电量</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:15.2%;left:71%">烘房白坯质量统计</div>
<div class="modelTitle" style="top:65%;left:32%">近7天产量</div> <div class="modelTitle" style="top:65%;left:32%">近7天产量</div>
<!-- <div class="modelTitle" style="top:65%;left:32%">烘房耗电量</div>--> <!-- <div class="modelTitle" style="top:65%;left:32%">烘房耗电量</div>-->
<div class="modelTitle" style="top:65%;left:71%">计划达成率</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:34%">成型机产量：</div>-->
<!-- <div class="title1" style="top:24%;left:52.5%">烘房产量：</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:34%">烘房耗电量：</div>-->
<!-- <div class="title1" style="top:45%;left:52.5%">AGV开动数量：</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: 45.5%;">车</div>-->
<!-- <div class="unit1" style="top: 31.3%;left: 63.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: 45.5%;">KWh</div>-->
<!-- <div class="unit1" style="top: 51.3%;left: 63.5%;">台</div>--> <!-- <div class="unit1" style="top: 51.3%;left: 63.5%;">台</div>-->
<!-- <div class="num1" style="top: 31.5%;left: 39.5%;">{{ CData.map(e=>parseFloat(e.quantity)||0).reduce((a,b)=>a+b,0) }}</div>--> <!-- <div class="num1" style="top: 31.5%;left: 39.5%;">{{ CData.map(e=>parseFloat(e.quantity)||0).reduce((a,b)=>a+b,0) }}</div>-->
<!-- <div class="num1" style="top:31.5%;left:57.7%">{{ HData.map(e=>parseFloat(e.quantity)||0).reduce((a,b)=>a+b,0) }}</div>--> <!-- <div class="num1" style="top:31.5%;left:57.7%">{{ HData.map(e=>parseFloat(e.quantity)||0).reduce((a,b)=>a+b,0) }}</div>-->
<!-- <div class="num1" style="top:51.6%;left:39.5%">{{ expend }}</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="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: 73.5%;left: 86.8%;">计划生产数量：</div>
<div class="title2" style="top: 85.3%;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: 76.5%;left: 95%;">车</div>
@ -77,7 +77,7 @@
</div> </div>
<div <div
class="scrollTable" style="color:#49b2fc"> class="scrollTable" style="color:#49b2fc">
{{ (parseFloat(item.expend/item.yield)||0).toFixed(2) }}KWh {{ (parseFloat(item.expend / item.yield) || 0).toFixed(2) }}KWh
</div> </div>
</div> </div>
</div> </div>
@ -137,7 +137,7 @@ export default {
methods: { methods: {
getData() { getData() {
dryRoomDataCarousel().then(e => { dryRoomDataCarousel().then(e => {
this.table1Data = e.data.dryingroomList.filter(v=>parseFloat(v.expend/v.yield)) || [] this.table1Data = e.data.dryingroomList.filter(v => parseFloat(v.expend / v.yield)) || []
}) })
EnergyExpend().then(e => { EnergyExpend().then(e => {
this.expend = e.map(v => v.expend).reduce((a, b) => a + b, 0).toFixed(2) this.expend = e.map(v => v.expend).reduce((a, b) => a + b, 0).toFixed(2)
@ -165,7 +165,7 @@ export default {
} }
}, },
xAxis: { xAxis: {
data: e.map(v => parseFloat(v.monitorName.split(' - ')?.[1]?.split('(')?.[0])+"#"), data: e.map(v => parseFloat(v.monitorName.split(' - ')?.[1]?.split('(')?.[0]) + "#"),
axisLine: { axisLine: {
show: true, //隐藏X轴轴线 show: true, //隐藏X轴轴线
lineStyle: { lineStyle: {
@ -176,7 +176,7 @@ export default {
show: true //隐藏X轴刻度 show: true //隐藏X轴刻度
}, },
axisLabel: { axisLabel: {
interval:0, interval: 0,
show: true, show: true,
textStyle: { textStyle: {
color: '#fff' //X轴文字颜色 color: '#fff' //X轴文字颜色
@ -241,8 +241,7 @@ export default {
this.$refs.chart3.setData(option2) this.$refs.chart3.setData(option2)
}) })
agvdata().then(e => { agvdata().then(e => {
console.log(e) this.agvData = e.Data.filter(v => v.State === 2)
this.agvData = e.Data.filter(v=>v.State===2)
}) })
PlanAchievementRate().then(e => { PlanAchievementRate().then(e => {
this.proData = e.data this.proData = e.data
@ -279,57 +278,144 @@ export default {
createTimeStart: createTimeStart, createTimeStart: createTimeStart,
createTimeEnd: createTimeEnd, createTimeEnd: createTimeEnd,
chartType: 'cp' chartType: 'cp'
}).then(e => { }).then(vv => {
let e = vv.checkList
console.log(e)
let option = { let option = {
grid: {
top: '15%',
bottom: '10%',
left: '6%',
right: '6%'
},
tooltip: { tooltip: {
trigger: 'axis', trigger: 'axis',
axisPointer: { axisPointer: {
// Use axis to trigger tooltip type: 'shadow',
type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow' label: {
show: true
}
} }
}, },
legend: { legend: {
right: 0,
textStyle: { textStyle: {
color: '#eee' color: '#eee'
} }
}, },
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: { xAxis: {
type: 'value' data: e.map(v => v.machineName),
}, axisLine: {
yAxis: { show: true, //隐藏X轴轴线
type: 'category', lineStyle: {
axisLabel: { color: '#fff'
color: '#ccc' }
},
axisTick: {
show: true //隐藏X轴刻度
}, },
data: e.checkList.map(v => v.machineName), axisLabel: {
// data: e.checkList.map((v,k) => '产品'+k), interval:0,
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'
}
}
},
{
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: [ series: [
{ {
name: '合格数量',
type: 'bar',
stack: 'total',
label: { label: {
show: true, show: true,
position: 'insideRight', position: 'top',
formatter: "{c}车", formatter: "{c}%",
color: "#000" color: "#fff"
}, },
emphasis: { name: '合格率',
focus: 'series' type: 'line',
yAxisIndex: 1,
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.okQuality) / parseFloat(v.quality)) * 100).toFixed(2)),
},
{
label: {
show: true,
position: 'top',
formatter: "{c}",
color: "#fff"
}, },
itemStyle: { itemStyle: {
color: { color: {
type: 'linear', type: 'linear',
x: 0, x: 0,
y: 0, y: 1,
x2: 1, x2: 0,
y2: 0, y2: 0,
colorStops: [{ colorStops: [{
offset: 0, color: '#1e60f2' // 0% 处的颜色 offset: 0, color: '#1e60f2' // 0% 处的颜色
@ -339,23 +425,102 @@ export default {
global: false // 缺省为 false global: false // 缺省为 false
} }
}, },
data: e.checkList.map(v => parseFloat(v.quality)) name: '合格数',
},
{
name: '不合格数量',
type: 'bar', type: 'bar',
stack: 'total', smooth: true, //平滑曲线显示
label: { showAllSymbol: true, //显示所有图形。
show: true, symbol: "emptyCircle", //标记的图形为实心圆
position: 'right' symbolSize: 5, //标记的大小
}, // itemStyle: {
emphasis: { // //折线拐点标志的样式
focus: 'series' // color: "#058cff",
}, // },
data: e.checkList.map(v => 0) // lineStyle: {
// color: "#058cff",
// },
// areaStyle: {
// color: "rgba(5,140,255, 0.2)",
// },
data: e.map(v => parseFloat(v.quality)),
}, },
] ]
}; };
// 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),
// // data: e.checkList.map((v,k) => '产品'+k),
// },
// 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) this.$refs.chart1.setData(option)
}) })
@ -593,6 +758,7 @@ export default {
left: 31.3%; left: 31.3%;
} }
.chart3 { .chart3 {
position: absolute; position: absolute;
width: 37.4%; width: 37.4%;
@ -601,7 +767,7 @@ export default {
left: 31.3%; left: 31.3%;
} }
.case-item { .case-item {
border: 2px solid #0c61ad; border: 2px solid #0c61ad;
border-radius: 2px; border-radius: 2px;
margin: 8px 0 0 0; margin: 8px 0 0 0;

Write Preview
Loading…
Cancel
Save