323 lines
7.6 KiB
Vue
323 lines
7.6 KiB
Vue
<template>
|
||
<div class="app-container">
|
||
<!-- <el-row :gutter="10" class="mb8">
|
||
<el-col :span="3">
|
||
<div class="card-box">
|
||
{{ tLang('home', '员工总数') }}：200{{ tLang('home', '人') }}
|
||
</div>
|
||
</el-col>
|
||
<el-col :span="3">
|
||
<div class="card-box">
|
||
{{ tLang('home', '产出进度') }}：60%
|
||
</div>
|
||
</el-col>
|
||
</el-row> -->
|
||
<div class="chart-content">
|
||
<div class="chart-content-card">
|
||
<v-chart ref="lineChartRef" class="line-chart" :option="line_option" />
|
||
</div>
|
||
<div class="chart-content-card">
|
||
<v-chart ref="pieChartRef" class="line-chart" :option="pie_option" />
|
||
</div>
|
||
<div class="right-content-card">
|
||
<div>{{ deviceState.on + tLang('home', '台') }}/{{ deviceState.total + tLang('home', '台') }}</div>
|
||
<div>{{ tLang('home', '设备') + `:` + tLang('home', '使用中') + `/` + tLang('home', '总数') }}</div>
|
||
</div>
|
||
</div>
|
||
<div class="bottom">
|
||
<div class="device-item" v-for="(item, index) in produceList"
|
||
:style="{ 'background-color': item_bgcolor[item.state] }">
|
||
<span class="iconfont icon-shengchanxiaoshuai icon-style"
|
||
:style="{ color: item_color[item.progressSignal], borderColor: item_color[item.progressSignal] }"></span>
|
||
<div class="device-item-content">
|
||
<div class="device-item-content-flex left">
|
||
<img class="frj-img" :src="item.file" alt="">
|
||
<span>{{ tLang('device', '设备编码') + `：` + item.deviceCode }}</span>
|
||
</div>
|
||
<div class="device-item-content-flex right">
|
||
<ul class="produce-list">
|
||
<li>{{ tLang('home', '工作人员') + `：` + item.userName }}</li>
|
||
<li>{{ tLang('home', '加工信息') + `：` + item.productionCode }}</li>
|
||
<li>{{ tLang('home', '产量') + `：` + item.output }}/{{ item.planOutput }}</li>
|
||
<li>{{ tLang('home', '稼动率') + `：` + item.activation }}</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="pagination">
|
||
<el-pagination :hide-on-single-page="false" v-model:current-page="queryParams.pageNum"
|
||
v-model:page-size="queryParams.pageSize" layout="total, prev, pager, next, jumper" :total="total"
|
||
@size-change="getList" @current-change="getList" />
|
||
</div>
|
||
</div>
|
||
|
||
</template>
|
||
|
||
<script setup>
|
||
import { getHomeDeviceInfoVO, homeDeviceRate, halfHourOutputTotal } from "@/api/home";
|
||
const { proxy } = getCurrentInstance();
|
||
let loading = ref(true)
|
||
// 查询参数
|
||
let queryParams = reactive({
|
||
pageNum: 1,
|
||
pageSize: 10,
|
||
})
|
||
const baseUrl = import.meta.env.VITE_APP_BASE_API;
|
||
let total = ref(0)
|
||
let deviceState = reactive({
|
||
on: 0,
|
||
off: 0,
|
||
total: 0
|
||
})
|
||
let produceList = ref([])
|
||
let item_bgcolor = {
|
||
0: '#E8E8E8',
|
||
1: '#E9E5C9',
|
||
2: '#C9F6CC',
|
||
3: '#E9E5C9',
|
||
4: '#EFCAC5',
|
||
}
|
||
|
||
let item_color = {
|
||
0: '#5EF417',
|
||
1: '#176AF4',
|
||
2: '#DACB71',
|
||
3: '#D81E06',
|
||
4: '#CCCCCC',
|
||
|
||
}
|
||
let lineChartRef = ref(null);
|
||
let pieChartRef = ref(null);
|
||
window.onresize = () => {
|
||
lineChartRef.value.resize();
|
||
pieChartRef.value.resize();
|
||
}
|
||
|
||
const line_option = ref({
|
||
title: {
|
||
text: proxy.tLang('home', '产量')
|
||
},
|
||
xAxis: {
|
||
type: 'category',
|
||
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
|
||
},
|
||
yAxis: {
|
||
type: 'value'
|
||
},
|
||
series: [
|
||
{
|
||
data: [820, 932, 901, 934, 1290, 1330, 1320],
|
||
type: 'line',
|
||
smooth: true
|
||
}
|
||
]
|
||
});
|
||
|
||
const pie_option = ref({
|
||
title: {
|
||
"text": proxy.tLang('home', '设备利用率') + "：60%",
|
||
"left": "0",
|
||
"top": 0,
|
||
"textStyle": {
|
||
"color": "#333",
|
||
"fontSize": 24
|
||
}
|
||
},
|
||
tooltip: {
|
||
trigger: 'item'
|
||
},
|
||
legend: {
|
||
orient: 'vertical',
|
||
right: '5%',
|
||
},
|
||
series: [
|
||
{
|
||
name: proxy.tLang('home', '设备状态'),
|
||
type: 'pie',
|
||
radius: ['40%', '70%'],
|
||
avoidLabelOverlap: false,
|
||
padAngle: 5,
|
||
itemStyle: {
|
||
borderRadius: 10
|
||
},
|
||
label: {
|
||
show: true,
|
||
fontSize: 16,
|
||
formatter: '{b} : {c} ({d}%)'
|
||
},
|
||
data: []
|
||
}
|
||
]
|
||
})
|
||
|
||
function getList() {
|
||
loading.value = true;
|
||
halfHourOutputTotal().then(response => {
|
||
line_option.value.series[0].data = response.data.count
|
||
line_option.value.xAxis.data = response.data.time
|
||
});
|
||
homeDeviceRate().then(response => {
|
||
pie_option.value.series[0].data = [
|
||
{ value: response.data.off, name: proxy.tLang('home', '停机') },
|
||
|
||
{ value: response.data.on, name: proxy.tLang('home', '使用中') }
|
||
]
|
||
deviceState.on = response.data.on;
|
||
deviceState.off = response.data.off;
|
||
deviceState.total = response.data.total;
|
||
pie_option.value.title.text = proxy.tLang('home', '设备利用率') + `：${((response.data.on / response.data.total) * 100).toFixed(1)}%`
|
||
});
|
||
getHomeDeviceInfoVO().then(response => {
|
||
produceList.value = response.rows.map((item, index) => {
|
||
item.file = baseUrl + item.file;
|
||
return item;
|
||
});
|
||
total.value = response.total;
|
||
// loading.value = false;
|
||
});
|
||
}
|
||
onMounted(() => {
|
||
getList();
|
||
})
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
@import '@/assets/iconfont/iconfont.css';
|
||
|
||
.card-box {
|
||
background-color: #C8EAF4;
|
||
border-radius: 4px;
|
||
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
|
||
padding: 5px 5px;
|
||
text-align: center;
|
||
font-size: 18px;
|
||
font-weight: 700;
|
||
color: #333333;
|
||
}
|
||
|
||
.chart-content {
|
||
width: 100%;
|
||
height: 310px;
|
||
box-sizing: border-box;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
|
||
.chart-content-card {
|
||
width: 40%;
|
||
height: 100%;
|
||
|
||
.line-chart {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
}
|
||
|
||
.right-content-card {
|
||
width: 200px;
|
||
height: 100%;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
align-items: center;
|
||
font-size: 18px;
|
||
font-weight: 700;
|
||
color: #333333;
|
||
|
||
div {
|
||
margin-bottom: 10px;
|
||
}
|
||
}
|
||
|
||
}
|
||
|
||
.bottom {
|
||
width: 100%;
|
||
height: calc(100vh - 310px - 110px);
|
||
display: grid;
|
||
grid-template-columns: 16.66% 16.66% 16.66% 16.66% 16.66% 16.66%;
|
||
grid-template-rows: 50% 50%;
|
||
/* 设置网格项目间间隙 */
|
||
gap: 10px 10px;
|
||
|
||
.device-item {
|
||
width: 100%;
|
||
height: 100%;
|
||
background-color: #fff;
|
||
border-radius: 10px;
|
||
box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.1);
|
||
text-align: center;
|
||
padding: 8px 2px 2px 2px;
|
||
box-sizing: border-box;
|
||
|
||
.icon-style {
|
||
font-size: 30px;
|
||
border: 2px solid;
|
||
border-radius: 50%;
|
||
padding: 10px;
|
||
line-height: 50px;
|
||
/*color: #bfc;*/
|
||
}
|
||
|
||
.device-item-content {
|
||
width: calc(100% - 4px);
|
||
height: calc(100% - 50px - 4px);
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
font-size: 14px;
|
||
|
||
.left {
|
||
width: 50%;
|
||
}
|
||
|
||
.right {
|
||
flex: 1;
|
||
font-size: 12px;
|
||
}
|
||
|
||
.device-item-content-flex {
|
||
height: 100%;
|
||
box-sizing: border-box;
|
||
padding: 10px 0;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: space-around;
|
||
align-items: center;
|
||
overflow: hidden;
|
||
|
||
.frj-img {
|
||
max-width: 100%;
|
||
max-height: 70%;
|
||
margin-bottom: 5px;
|
||
}
|
||
|
||
.produce-list {
|
||
padding: 0;
|
||
margin: 0 0 0 15px;
|
||
width: 100%;
|
||
height: 100%;
|
||
display: flex;
|
||
justify-content: space-around;
|
||
align-items: flex-start;
|
||
flex-direction: column;
|
||
|
||
li {
|
||
list-style: none;
|
||
}
|
||
}
|
||
}
|
||
|
||
}
|
||
}
|
||
}
|
||
|
||
.pagination {
|
||
width: 100%;
|
||
margin: 10px;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
}
|
||
</style> |