Skip to content

Z
zhongtong-avi-web
Commit a739ed31 authored by 李志鸣's avatar 李志鸣
Browse files
Options

fea(监控大屏): 修改设备运行时间统计图表

parent 4bb8089d
Hide whitespace changes
Inline Side-by-side
Showing with 234 additions and 165 deletions
src/interface/apis.js
View file @ a739ed31
......@@ -157,6 +157,10 @@
}
},
"equipment-controller": {
"data-get": {
"url": "/api/equipment/data",
"method": "get"
},
"export-post": {
"url": "/api/equipment/data/export",
"method": "post"
......@@ -169,6 +173,10 @@
"url": "/api/equipment/file/upload",
"method": "post"
},
"findByShopCode-get": {
"url": "/api/equipment/findByShopCode",
"method": "get"
},
"transfer-post": {
"url": "/api/equipment/program/transfer",
"method": "post"
......@@ -259,6 +267,10 @@
"url": "/api/v1/group",
"method": "put"
},
"page-post": {
"url": "/api/v1/group/page",
"method": "post"
},
"role-post": {
"url": "/api/v1/group/role",
"method": "post"
......@@ -275,6 +287,10 @@
"url": "/api/v1/group/tree/user",
"method": "get"
},
"groupId-get": {
"url": "/api/v1/group/{groupId}",
"method": "get"
},
"groupId-delete": {
"url": "/api/v1/group/{groupId}",
"method": "delete"
......@@ -401,6 +417,14 @@
"url": "/api/v1/user/group/users",
"method": "get"
},
"id-get": {
"url": "/api/v1/user/id/{id}",
"method": "get"
},
"userId-delete": {
"url": "/api/v1/user/id/{userId}",
"method": "delete"
},
"no-get": {
"url": "/api/v1/user/no/{no}",
"method": "get"
......@@ -409,6 +433,10 @@
"url": "/api/v1/user/page",
"method": "get"
},
"page-post": {
"url": "/api/v1/user/page",
"method": "post"
},
"list-get": {
"url": "/api/v1/user/resource/list",
"method": "get"
......@@ -609,6 +637,14 @@
"url": "/api/v2/workStation/delete/{id}",
"method": "delete"
},
"eqpRelation-post": {
"url": "/api/v2/workStation/eqpRelation",
"method": "post"
},
"eqpRelation-put": {
"url": "/api/v2/workStation/eqpRelation",
"method": "put"
},
"workPositionId-post": {
"url": "/api/v2/workStation/equipmentRelation/{workPositionId}",
"method": "post"
......@@ -633,6 +669,10 @@
"url": "/api/v2/workStation/pageEqpRelation",
"method": "get"
},
"pageEquip-post": {
"url": "/api/v2/workStation/pageEquip",
"method": "post"
},
"username-get": {
"url": "/api/v2/workStation/pdaUser/{username}",
"method": "get"
......@@ -702,6 +742,10 @@
"busNo-get": {
"url": "/area/detail/busNo",
"method": "get"
},
"test-get": {
"url": "/area/test",
"method": "get"
}
},
"report-controller": {
......@@ -725,6 +769,10 @@
"url": "/area/oeuTrend",
"method": "get"
},
"runTimeList-get": {
"url": "/area/runTimeList",
"method": "get"
},
"stateTrend-get": {
"url": "/area/stateTrend",
"method": "get"
......
src/views/Basic/DeviceBasic/list.vue
View file @ a739ed31
......@@ -226,19 +226,19 @@
},
// 获取设备分类数据
getSeviceSortSelectData () {
let queryParams = { dicCode: 'DEVICE_SORT', hash: 'dicCode' };
let queryParams = { dicCode: 'DEVICE_SORT', hash: 'dicCode' }
this.$fetch('dict-item-controller/dicCode-get', queryParams).then(response => {
this.equipTypeData = _.cloneDeep(response);
this.equipTypeData = _.cloneDeep(response)
});
}
},
mounted () {
setTimeout(() => {
this.tableConfig.height = document.querySelector('.page-pack').offsetHeight - 210;
this.tableConfig.height = document.querySelector('.page-pack').offsetHeight - 210
// 获取设备分类数据
this.getSeviceSortSelectData();
this.getSeviceSortSelectData()
// 获取表格数据
this.getTableList();
this.getTableList()
}, 0)
}
}
......
src/views/CenterControl/components/MachineFailureTrend.vue
View file @ a739ed31
......@@ -95,7 +95,6 @@
lineStyle: {
color: '#234eb6'
}
},
axisLine: {
lineStyle: {
......@@ -199,4 +198,4 @@
width: 607px;
}
}
</style>
\ No newline at end of file
</style>
src/views/CenterControl/components/MachineStateTrend.vue
View file @ a739ed31
<template>
<!--设备累计运行时间统计-->
<div class="machine-state-trend">
<div class="search-pack">
<el-date-picker
style="width: 135px;"
class="date-picker-reset"
v-model="startTime"
type="date"
placeholder="开始时间">
</el-date-picker>
<span class="middle-text">至</span>
<el-date-picker
style="width: 135px;"
class="date-picker-reset"
v-model="endTime"
type="date"
placeholder="结束时间">
</el-date-picker>
<el-select
class="select-reset"
v-model="workshopCode"
placeholder="请选择车间"
size="small"
clearable>
<el-option
v-for="(item, index) in workshopList"
:key="index"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
<el-button
class="ml-10"
@click="doConfirmClick()"
......@@ -40,24 +39,48 @@
},
watch: {
pollingRequestTime (newVal, oldVal) {
if (this.workshopCode === '') {
this.workshopCode = this.workshopList[0].value
}
// 请求设备状态趋势图图表数据
this.getMachineStateTrendEchartData()
}
},
data () {
return {
// 开始时间
startTime: '',
// 结束时间
endTime: '',
// 图表时间数据
echartTimeData: [],
// 图表故障率数据
echartFailureData: [],
// 图表运行率数据
echartRunningData: [],
// 图表待机率数据
echartLoadingData: []
// 车间
workshopCode: '',
// 车间数据
workshopList: [
{
label: '制件车间',
value: 'PARTS'
},
{
label: '焊装车间',
value: 'WELDING'
},
{
label: '涂装车间',
value: 'PAINTING'
},
{
label: '底盘车间',
value: 'CHASSIS'
},
{
label: '装配车间',
value: 'ASSEMBLY'
},
{
label: '试交车间',
value: 'TRIAL'
}
],
// 图表X轴设备名称
machineNameList: [],
// 图表Y轴运行时间
machineRunTime: []
}
},
methods: {
......@@ -66,132 +89,97 @@
let domItem = document.getElementById('stateTrendChart')
echarts.dispose(domItem)
let echart = echarts.init(domItem)
let echartTimeData = this.echartTimeData
let echartFailureData = this.echartFailureData
let echartRunningData = this.echartRunningData
let echartLoadingData = this.echartLoadingData
let machineNameList = this.machineNameList
let machineRunTime = this.machineRunTime
echart.setOption({
color: ['#15e067'],
tooltip: {
trigger: 'axis'
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
grid: {
left: 60,
right: 110,
top: 30,
bottom: 30
},
color: ['#7460ee', '#15e067', '#ee295c'],
legend: {
orient: 'vertical',
top: 'center',
left: '85%',
data: ['故障', '运行', '待机'],
itemGap: 10,
itemWidth: 15,
itemHeight: 12,
textStyle: {
color: '#00b4ff',
fontSize: 14
}
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: [{
name: '',
type: 'category',
axisTick: {
'alignWithLabel': true
},
axisLabel: {
color: '#00b4ff'
},
axisLine: {
lineStyle: {
color: '#3569fd'
}
},
data: echartTimeData
}],
yAxis: [{
type: 'value',
min: 0,
max: 100,
axisLabel: {
color: '#00b4ff',
formatter: '{value}%'
},
splitLine: {
lineStyle: {
color: '#234eb6'
xAxis: [
{
type: 'category',
data: machineNameList,
axisTick: {
alignWithLabel: true
},
axisLabel: {
interval: 0,
rotate: 30,
color: '#00b4ff',
lineStyle: {
color: '#00b4ff'
}
},
axisLine: {
lineStyle: {
color: '#3569fd'
}
}
},
axisLine: {
lineStyle: {
color: '#3569fd'
}
],
yAxis: [
{
type: 'value',
axisLabel: {
color: '#00b4ff'
},
splitLine: {
lineStyle: {
color: '#234eb6'
}
},
axisLine: {
lineStyle: {
color: '#3569fd'
}
}
},
name: ''
}],
series: [{
data: echartLoadingData,
name: '待机',
stack: 'one',
type: 'bar'
// label: {
// show: true
// }
}, {
data: echartRunningData,
name: '运行',
stack: 'one',
type: 'bar'
// label: {
// show: true
// }
}, {
data: echartFailureData,
name: '故障',
stack: 'one',
type: 'bar'
// label: {
// show: true
// }
}]
}
],
series: [
{
name: '设备运行时间',
type: 'bar',
barWidth: '30%',
data: machineRunTime
}
]
})
},
// 点击确认按钮
doConfirmClick () {
if (this.startTime !== '' && this.endTime !== '') {
if (this.startTime > this.endTime) {
this.$message.warning('设备状态趋势图开始时间不能大于结束时间！')
} else {
// 请求设备状态趋势图图表数据
this.getMachineStateTrendEchartData()
}
if (_.trim(this.workshopCode) === '') {
this.$message.warning('车间不能为空！')
} else {
this.$message.warning('设备状态趋势图开始时间和结束时间不能为空！')
// 请求设备状态趋势图图表数据
this.getMachineStateTrendEchartData()
}
},
// 点击重置按钮
doRestClick () {
this.startTime = ''
this.endTime = ''
// 请求设备状态趋势图图表数据
// this.getMachineStateTrendEchartData()
this.workshopCode = this.workshopList[0].value
},
// 请求设备状态趋势图图表数据
getMachineStateTrendEchartData () {
let queryParams = { beginTime: this.startTime, endTime: this.endTime }
this.$fetch('report-controller/stateTrend-get', queryParams).then(response => {
this.echartTimeData = []
this.echartFailureData = []
this.echartRunningData = []
this.echartLoadingData = []
for (let item of response) {
this.echartTimeData.push(item.date)
this.echartFailureData.push(item.errorStatePercent)
this.echartRunningData.push(item.runStatePercent)
this.echartLoadingData.push(item.loadStatePercent)
}
let params = {workshopCode: this.workshopCode}
this.$fetch('report-controller/runTimeList-get', params).then(res => {
let resolveMachineName = []
let resolveMachineRunTime = []
res.forEach((item) => {
resolveMachineName.push(item.equipCode)
resolveMachineRunTime.push(item.currentRuntime)
})
this.machineNameList = _.cloneDeep(resolveMachineName)
this.machineRunTime = _.cloneDeep(resolveMachineRunTime)
// 渲染echarts图表
this.renderEcharts()
})
......@@ -202,7 +190,7 @@
<style lang="scss" scoped>
.machine-state-trend {
width: 607px;
width: 1191px;
height: 414px;
position: absolute;
overflow: hidden;
......@@ -210,17 +198,12 @@
left: 1302px;
.search-pack {
width: 607px;
width: 1191px;
height: 60px;
margin-top: 30px;
text-align: center;
line-height: 60px;
.middle-text {
font-size: 18px;
padding: 0 10px;
color: #00b4ff;
}
/deep/ .date-picker-reset {
/deep/ .select-reset {
.el-input__inner {
background-color: #102040;
color: #00b4ff;
......@@ -235,11 +218,31 @@
}
}
}
/*.middle-text {*/
/* font-size: 18px;*/
/* padding: 0 10px;*/
/* color: #00b4ff;*/
/*}*/
/*/deep/ .date-picker-reset {*/
/* .el-input__inner {*/
/* background-color: #102040;*/
/* color: #00b4ff;*/
/* border: 1px solid #2563ca;*/
/* }*/
/* input::-webkit-input-placeholder {*/
/* color: #00b4ff;*/
/* }*/
/* .el-input__prefix {*/
/* .el-input__icon.el-icon-date {*/
/* color: #00b4ff;*/
/* }*/
/* }*/
/*}*/
}
#stateTrendChart {
height: 300px;
width: 607px;
width: 1191px;
}
}
</style>
\ No newline at end of file
</style>
src/views/CenterControl/components/MachineWarning.vue
View file @ a739ed31
......@@ -21,8 +21,12 @@
<span>描述</span>
</div>
</div>
<div class="table-body">
<div
<VueSeamlessScroll
v-if="warningList.length > 0"
:data="warningList"
:class-option="optionSingleHeight"
class="table-body">
<div
class="tr"
v-for="(item, index) in warningList"
:key="index">
......@@ -30,15 +34,19 @@
<div class="th-machine">{{item.equipName}}</div>
<div class="th-pencil">{{item.info}}</div>
</div>
</div>
</VueSeamlessScroll>
</div>
</div>
</template>
<script>
import Moment from 'moment'
import VueSeamlessScroll from 'vue-seamless-scroll'
export default {
components: {
VueSeamlessScroll
},
props: {
pollingRequestTime: {}
},
......@@ -50,6 +58,13 @@
this.judgeTime()
}
},
computed: {
optionSingleHeight () {
return {
singleHeight: 50
}
}
},
data () {
return {
// 报警信息列表
......@@ -64,7 +79,7 @@
// 请求设备异常列表
getMachineWarningList () {
this.$fetch('report-controller/warningList-get', {}).then(response => {
this.warningList = _.cloneDeep(response.slice(0, 17))
this.warningList = _.cloneDeep(response)
})
},
// 时间处理
......@@ -103,16 +118,16 @@
<style lang="scss" scoped>
.machine-warning {
width: 534px;
height: 881px;
height: 414px;
position: absolute;
top: 166px;
right: 57px;
overflow: hidden;
/*background-color: rgba(1,1,1,0.5);*/
.time-warning-pack {
width: 534px;
height: 60px;
// background-color: rgba(1,1,1,0.5);
margin-top: 27px;
line-height: 60px;
.time {
......@@ -139,9 +154,10 @@
.warning-message-pack {
margin-top: 10px;
width: 474px;
height: 767px;
height: 317px;
padding: 0 30px;
// background-color: rgba(1,1,1,0.5);
overflow: hidden;
.table-header {
height: 40px;
color: #00b4ff;
......@@ -168,11 +184,14 @@
}
}
.table-body {
height: 257px;
overflow: hidden;
.tr {
overflow: hidden;
div {
float: left;
height: 40px;
line-height: 40px;
height: 50px;
line-height: 50px;
font-weight: bold;
font-size: 18px;
color: #3facd9;
......@@ -196,4 +215,4 @@
}
}
}
</style>
\ No newline at end of file
</style>
src/views/CenterControl/index.vue
View file @ a739ed31
......@@ -21,7 +21,7 @@
<MachineOperatingStatus
:pollingRequestTime="pollingRequestTime">
</MachineOperatingStatus>
<!-- 设备状态趋势图 -->
<!-- 设备累计运行时间统计 -->
<MachineStateTrend
:pollingRequestTime="pollingRequestTime">
</MachineStateTrend>
......
src/views/Led/Station/stationSix.vue
View file @ a739ed31
......@@ -130,8 +130,8 @@
//获取工位实时信息
getData () {
this.$fetch('led-controller/ledInfo-get', {ledNo: '6'}).then(res => {
this.timmingData = _.cloneDeep(res);
this.roomInfoList = _.cloneDeep(res.roomInfoList);
this.timmingData = _.cloneDeep(res)
this.roomInfoList = _.cloneDeep(res.roomInfoList)
this.warningList = _.cloneDeep(res.warningList)
for (let item of this.roomInfoList) {
console.log('item', item)
......
src/views/Workshop/Parts/components/ProgramIssued.vue
View file @ a739ed31
......@@ -241,6 +241,6 @@
}
</script>
<style>
<style lang="scss" scoped>
</style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment