<template>
|
<div class="home-index-module-b-compontent">
|
<div v-for="(item, index) in datas" :key="item.id" class="content">
|
<div class="module-box">
|
<div class="top-title"><icon-font type="icon-title_tubiao" />{{ item.name }}</div>
|
<!-- <div class="action-row">
|
<div class="layout-row">
|
<a-range-picker @change="onChange" class="date-range" separator="至" format="YYYY-MM-DD" />
|
<a-radio-group :value="chartType" @change="changeType" class="date-buttons">
|
<a-radio-button :value="1" class="date-button">今日</a-radio-button>
|
<div class="space"></div>
|
<a-radio-button :value="2" class="date-button">本周</a-radio-button>
|
<div class="space"></div>
|
<a-radio-button :value="3" class="date-button">本月</a-radio-button>
|
<div class="space"></div>
|
<a-radio-button :value="4" class="date-button">今年</a-radio-button>
|
</a-radio-group>
|
</div>
|
</div> -->
|
<div class="line-chart-block">
|
<!-- 设备运行状态 -->
|
<EquipmentRunStatus v-show="item.id == 1" :equipmentStatusData="equipmentStatusData" />
|
<!-- 产线健康 -->
|
<ProdlineHealthy v-show="item.id == 2" />
|
<!-- 质量数据趋势 -->
|
<div v-show="item.id == 3">
|
<div style="color: #aaa; margin: 0 10px; text-align: center; font-size: 14px">
|
{{ qualityData.qualityType }}
|
</div>
|
<div>
|
<div style="margin: 0 10px; height: 10px; background-color: #f14158"></div>
|
<div style="margin: 0 10px; height: 10px; background-color: #a7cf29"></div>
|
</div>
|
<QualityDataTrends :qualityData="qualityData.list" />
|
<div>
|
<div style="margin: 0 10px; height: 10px; background-color: #a7cf29"></div>
|
<div style="margin: 0 10px; height: 10px; background-color: #f14158"></div>
|
</div>
|
</div>
|
<!-- 产量统计 -->
|
<div v-show="item.id == 4" style="position:relative">
|
<ProductionStatistics :produceStatisData="produceStatisData" />
|
<div class="pie-label-left">
|
{{ produceStatisData.currentShiftProduceNum }}/{{ produceStatisData.currentShiftPlanNum }}
|
</div>
|
<div class="pie-label-right">
|
{{ produceStatisData.currentMonthProduceNum }}/{{ produceStatisData.currentMonthPlanNum }}
|
</div>
|
</div>
|
<!-- 生产完成 -->
|
<ProductionCompletionTrend v-show="item.id == 5" :produceCompletionData="produceCompletionData" />
|
</div>
|
</div>
|
<div class="divider" v-if="index !== datas.length - 1 && (index + 1) % 3 !== 0"></div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import {
|
GeInOutTaskNumber,
|
GetEquipmentCurrentState,
|
getQualityData,
|
getCurrentProduceInfo,
|
getProduceCompletionStatus,
|
getLargeScreenFrequency
|
} from '@/api/modular/system/homeManage'
|
import { Icon } from 'ant-design-vue'
|
import SmoothLineEcharts from './SmoothLineEcharts.vue'
|
import LineEcharts from './LineEcharts.vue'
|
import Echarts from './Echarts.vue'
|
import EquipmentRunStatus from './modules/EquipmentRunStatus.vue'
|
|
import ProdlineHealthy from './modules/ProdlineHealthy.vue'
|
import ProductionCompletionTrend from './modules/ProductionCompletionTrend.vue'
|
import QualityDataTrends from './modules/QualityDataTrends.vue'
|
import ProductionStatistics from './modules/ProductionStatistics.vue'
|
|
const IconFont = Icon.createFromIconfontCN({
|
scriptUrl: '//at.alicdn.com/t/c/font_3968332_p1lipsnaiie.js'
|
})
|
|
var timer = null
|
export default {
|
name: 'HomeIndexModuleBCompontent',
|
components: {
|
IconFont,
|
SmoothLineEcharts,
|
Echarts,
|
LineEcharts,
|
EquipmentRunStatus,
|
ProdlineHealthy,
|
ProductionCompletionTrend,
|
QualityDataTrends,
|
ProductionStatistics
|
},
|
data() {
|
return {
|
datas: [],
|
chartType: 1,
|
equipmentStatusData: [],
|
qualityData: {},
|
produceStatisData: {},
|
produceCompletionData: [],
|
time: 5000
|
}
|
},
|
created() {
|
this.getData()
|
this.getEquipmentCurrentState()
|
this.getQualityData()
|
this.getCurrentProduceInfo()
|
this.getProduceCompletionStatus()
|
this.init()
|
},
|
beforeDestroy() {
|
clearInterval(timer)
|
},
|
methods: {
|
// 获取定时器时间
|
async getLargeScreenFrequency() {
|
try {
|
const { data } = await getLargeScreenFrequency()
|
this.time = data
|
} catch (error) {
|
console.log(error)
|
}
|
},
|
// 设置定时器
|
init() {
|
timer = setInterval(() => {
|
this.getEquipmentCurrentState()
|
this.getQualityData()
|
this.getCurrentProduceInfo()
|
this.getProduceCompletionStatus()
|
}, this.time)
|
},
|
// 日周月年切换
|
changeType(e) {
|
this.chartType = e.target.value
|
},
|
// 发请求获取数据
|
getData() {
|
this.datas = [
|
{
|
id: 1,
|
name: '设备运行状态统计图'
|
},
|
{
|
id: 2,
|
name: '产线健康能力图'
|
},
|
{
|
id: 3,
|
name: '质量数据趋势图'
|
},
|
{
|
id: 4,
|
name: '本班/本月产量统计'
|
},
|
{
|
id: 5,
|
name: '生产完成趋势'
|
}
|
]
|
},
|
changeData() {
|
this.datas.pop(this.datas.length - 1)
|
this.datas.push({
|
id: 5,
|
xAxisData: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
|
yAxisData: [344, 167, 423, 278, 98, 188, 275, 240, 359, 464, 355, 297, 185],
|
name: '男装',
|
type: 'bar',
|
color: '#1e9fff'
|
})
|
},
|
// 选择日期
|
// dateString 格式化后的日期
|
onChange(date, dateString) {
|
console.log(date, dateString)
|
this.changeData()
|
},
|
// 获取设备状态
|
async getEquipmentCurrentState() {
|
try {
|
const { data } = await GetEquipmentCurrentState()
|
this.equipmentStatusData = data
|
} catch (error) {
|
console.log(error)
|
}
|
},
|
// 获取质量数据
|
async getQualityData() {
|
const { qualityData } = this
|
try {
|
const { data } = await getQualityData({
|
qualityType: qualityData.qualityType
|
})
|
this.qualityData = data
|
// console.log(this.qualityData);
|
} catch (error) {
|
console.log(error)
|
}
|
},
|
// 获取产量统计数据
|
async getCurrentProduceInfo() {
|
try {
|
const { data } = await getCurrentProduceInfo()
|
this.produceStatisData = data
|
// console.log(data);
|
} catch (error) {
|
console.log(error)
|
}
|
},
|
// 获取生产完成趋势数据
|
async getProduceCompletionStatus() {
|
try {
|
const { data } = await getProduceCompletionStatus()
|
this.produceCompletionData = data
|
} catch (error) {
|
console.log(error)
|
}
|
}
|
}
|
}
|
</script>
|
|
<style lang="less" >
|
.home-index-module-b-compontent {
|
height: 100%;
|
box-sizing: border-box;
|
display: flex;
|
justify-content: space-between;
|
flex-wrap: wrap;
|
|
.content {
|
height: 100%;
|
margin-bottom: 10px;
|
flex: 30%;
|
flex-grow: 1;
|
display: flex;
|
|
.module-box {
|
flex: 1;
|
background-color: #fff;
|
border-radius: 10px;
|
padding: 10px 20px;
|
overflow: hidden;
|
|
.top-title {
|
background-color: #fff;
|
padding: 8px 16px;
|
font-size: 16px;
|
color: #000;
|
}
|
|
.action-row {
|
display: flex;
|
justify-content: flex-end;
|
|
.layout-row {
|
width: 90%;
|
display: flex;
|
justify-content: space-between;
|
|
.date-range {
|
width: 60%;
|
}
|
|
.date-buttons {
|
width: 38%;
|
display: flex;
|
justify-content: space-between;
|
|
.date-button {
|
flex: 1;
|
padding: 0;
|
background-color: #f2f2f2;
|
text-align: center;
|
border: 0;
|
border-radius: 3px;
|
}
|
|
.date-button::before {
|
width: 0px;
|
}
|
|
.date-button:not(.ant-radio-button-wrapper-checked):hover {
|
color: #515a6e;
|
}
|
|
.ant-radio-button-wrapper-checked {
|
background-color: #f18202;
|
border: 1px solid #f18202;
|
color: #fff;
|
|
&:hover {
|
opacity: 0.8;
|
}
|
}
|
|
.space {
|
width: 4px;
|
}
|
|
.line-chart-block {
|
// display: flex;
|
flex-grow: 1;
|
margin-top: 5%;
|
background-color: pink;
|
position: relative;
|
|
}
|
}
|
}
|
}
|
}
|
|
.divider {
|
width: 8px;
|
height: 100%;
|
}
|
|
.pie-label-left {
|
position: absolute;
|
bottom: 30px;
|
left: 140px;
|
color: #aaa;
|
font-size: 20px;
|
font-weight: 500;
|
}
|
|
.pie-label-right {
|
position: absolute;
|
bottom: 30px;
|
right: 110px;
|
color: #aaa;
|
font-size: 20px;
|
font-weight: 500;
|
}
|
}
|
}
|
</style>
|
