<template>
|
<el-card shadow="never" class="aui-card--fill">
|
<el-row :gutter="10">
|
<el-col :span="4">
|
<el-card class="box-card-task-statistics">
|
<div class="text item">昨日原煤调入量</div>
|
<el-row type="flex" justify="space-between">
|
<div class="amountText">
|
{{dataForm.coalTransferIn }}
|
<span class="title-unit">t</span>
|
</div>
|
<img class="img" src="./image/原煤调入.png"/>
|
</el-row>
|
</el-card>
|
</el-col>
|
<el-col :span="4">
|
<el-card class="box-card-task-statistics">
|
<div class="text item">昨日原煤入洗量</div>
|
<el-row type="flex" justify="space-between">
|
<div class="amountText">
|
{{ dataForm.coalToWash }} <span class="title-unit">t</span>
|
</div>
|
<img class="img" src="./image/原煤入洗.png"/>
|
</el-row>
|
</el-card>
|
</el-col>
|
<el-col :span="4">
|
<el-card class="box-card-task-statistics">
|
<div class="text item">昨日生产量统计</div>
|
<el-row type="flex" justify="space-between">
|
<div class="amountText">
|
{{ dataForm.prodVolume }} <span class="title-unit">t</span>
|
</div>
|
<img class="img" src="./image/生产量.png"/>
|
</el-row>
|
</el-card>
|
</el-col>
|
<el-col :span="4">
|
<el-card class="box-card-task-statistics">
|
<div class="text item">昨日耗电量</div>
|
<el-row type="flex" justify="space-between">
|
<div class="amountText">
|
<span v-if="Number(dataForm.powerConsumption) === Number('-2')"
|
style="color: red;">昨日电耗通讯中断</span>
|
<span v-else>{{ dataForm.powerConsumption}}</span>
|
<span v-if="Number(dataForm.powerConsumption) != Number('-2')"
|
class="title-unit">kWh</span>
|
</div>
|
<img class="img" src="./image/耗电量.png"/>
|
</el-row>
|
</el-card>
|
</el-col>
|
<el-col :span="4">
|
<el-card class="box-card-task-statistics">
|
<div class="text item">昨日吨煤电耗</div>
|
<el-row type="flex" justify="space-between">
|
<div class="amountText">
|
<span v-if="Number(dataForm.coalToWash)===Number('0')"
|
style="color: red;">昨日未入洗</span>
|
<span
|
v-else>{{(dataForm.powerConsumption/dataForm.coalToWash).toFixed(2)}}</span>
|
<span v-if="Number(dataForm.coalToWash)!=Number('0')"
|
class="title-unit">kwh/t</span>
|
</div>
|
<img class="img" src="./image/耗介量.png"/>
|
</el-row>
|
</el-card>
|
</el-col>
|
<el-col :span="4">
|
<el-card class="box-card-task-statistics">
|
<div class="text item">昨日生产事故时长</div>
|
<el-row type="flex" justify="space-between">
|
<div class="amountText">
|
{{ dataForm.prodAccidentTime==null?"0":dataForm.prodAccidentTime}}
|
<span class="title-unit">min</span>
|
</div>
|
<img class="img" src="./image/生产事故.png"/>
|
</el-row>
|
</el-card>
|
</el-col>
|
</el-row>
|
<el-row :gutter="10" style="margin-top: 20px">
|
<el-col :span="10">
|
<el-card style="height: 20rem" :body-style="{ height: '100%' }">
|
小时量
|
<bar-line :option="hourVolume"/>
|
</el-card>
|
</el-col>
|
<el-col :span="10">
|
<el-card style="height: 20rem" :body-style="{ height: '100%' }">
|
指标消耗
|
<bar-line :option="targetConsume"/>
|
</el-card>
|
</el-col>
|
<el-col :span="4">
|
<el-card style="height: 20rem">
|
<div>
|
<slot name="header">
|
<span style="font-size: 15px" :body-style="{ height: '100%' }">
|
当班信息
|
</span>
|
</slot>
|
</div>
|
<table>
|
<tr>
|
<td class="duty-title">值班领导：</td>
|
<td class="duty-text">{{ dutyInfo.zbldName }}</td>
|
</tr>
|
<tr>
|
<td class="duty-title">值班调度：</td>
|
<td class="duty-text">{{ dutyInfo.zbddName }}</td>
|
</tr>
|
<tr>
|
<td class="duty-title">洗选车间值班：</td>
|
<td class="duty-text">{{ dutyInfo.xxcjzbName }}</td>
|
</tr>
|
<tr>
|
<td class="duty-title">机电车间值班：</td>
|
<td class="duty-text">{{ dutyInfo.jdcjzbName }}</td>
|
</tr>
|
</table>
|
</el-card>
|
</el-col>
|
</el-row>
|
<el-row :gutter="10" style="margin-top: 20px">
|
<el-col :span="10">
|
<el-card style="height: 20rem" :body-style="{ height: '100%' }">
|
昨日运行时长
|
<bar-line :option="runTime"/>
|
</el-card>
|
</el-col>
|
<el-col :span="10">
|
<el-card style="height: 20rem" :body-style="{ height: '100%' }">
|
当前原煤存量
|
<bar-line :option="inventory"/>
|
</el-card>
|
</el-col>
|
<el-col :span="4">
|
<el-card style="height: 20rem">
|
<div>
|
<slot name="header">
|
<span style="font-size: 15px" :body-style="{ height: '100%' }">
|
调入来源
|
</span>
|
</slot>
|
</div>
|
<table>
|
<tr>
|
<td style="width: 120px; padding: 1px">主碎车间来煤：</td>
|
<td style="padding: 1px">{{ drly.LM_YMP }}</td>
|
</tr>
|
<tr>
|
<td style="width: 120px; padding: 1px">原煤棚来煤：</td>
|
<td style="padding: 1px">{{ drly.LM_ZSCJ }}</td>
|
</tr>
|
</table>
|
</el-card>
|
</el-col>
|
</el-row>
|
<el-row :gutter="10" style="margin-top: 20px">
|
<el-col :span="12">
|
<el-card style="height: 20rem" :body-style="{ height: '100%' }">
|
原煤调入趋势
|
<bar-line :option="coalTransferIn"/>
|
</el-card>
|
</el-col>
|
<el-col :span="12">
|
<el-card style="height: 20rem" :body-style="{ height: '100%' }">
|
生产量趋势
|
<bar-line :option="prodVolume"/>
|
</el-card>
|
</el-col>
|
</el-row>
|
</el-card>
|
</template>
|
|
<script lang="ts" setup>
|
|
defineOptions({name: 'Board'})
|
|
|
const dataForm = reactive({
|
coalTransferIn: "",
|
coalToWash: "",
|
prodVolume: "",
|
powerConsumption: "",
|
mediumConsumption: "",
|
prodAccidentTime: "",
|
})
|
const dutyInfo = {}
|
const hourVolume = {}
|
const targetConsume = {}
|
const runTime = {}
|
const inventory = {}
|
const prodVolume = {}
|
const coalTransferIn = {}
|
const coalToWash = {}
|
const drly = reactive({
|
LM_YMP: "",
|
LM_ZSCJ: "",
|
})
|
|
</script>
|
|
<style scoped>
|
.title-unit {
|
padding: 2px;
|
font-size: 16px;
|
}
|
|
.duty-title {
|
text-align: right;
|
}
|
|
.duty-text {
|
text-align: left;
|
font-size: 16px;
|
font-weight: 500;
|
}
|
|
.text {
|
margin-top: -15px;
|
font-size: 15px;
|
color: black;
|
}
|
|
.amountText {
|
margin-top: 10px;
|
font-size: 20px;
|
color: black;
|
}
|
|
.item {
|
padding: 10px 0;
|
}
|
|
.box-card-task-statistics {
|
height: 100px;
|
text-align: left;
|
}
|
|
.order-chart {
|
height: 160px;
|
}
|
|
.order-type-chart {
|
height: 300px;
|
}
|
|
.img {
|
height: 40px;
|
width: 40px;
|
}
|
|
.right-table {
|
width: 90px;
|
color: #99a9bf;
|
}
|
|
th,
|
td {
|
padding: 8px;
|
text-align: left;
|
}
|
</style>
|
