Skip to content

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

fea(中控监控): 中控监控页面功能联调

parent ef5e0d33
Hide whitespace changes
Inline Side-by-side
Showing with 164 additions and 49 deletions
config/index.js
View file @ c0a4ca6f
......@@ -15,7 +15,7 @@ module.exports = {
'/host': {
// target: 'http://10.100.172.150:9108', //设置你调用的接口域名和端口号 别忘了加http
// target: 'http://192.168.43.244:8888', // 东伟服务器地址
target: 'http://192.168.0.126', // 训浩服务器
target: 'http://192.168.0.126:8080', // 训浩服务器
changeOrigin: true,
pathRewrite: {
'^/host': ''//这里理解成用‘/host’代替target里面的地址，后面组件中我们掉接口时直接用api代替 比如我要调用'http://40.00.100.100:3002/user/add'，直接写‘/api/user/add’即可
......
src/interface/apis.js
View file @ c0a4ca6f
......@@ -675,17 +675,29 @@
"url": "/area/efr",
"method": "get"
},
"trend-get": {
"url": "/area/oeu/trend",
"efrTrend-get": {
"url": "/area/efrTrend",
"method": "get"
},
"state-get": {
"url": "/area/equ/state",
"equState-get": {
"url": "/area/equState",
"method": "get"
},
"oeu-get": {
"url": "/area/oeu",
"method": "get"
},
"oeuTrend-get": {
"url": "/area/oeuTrend",
"method": "get"
},
"stateTrend-get": {
"url": "/area/stateTrend",
"method": "get"
},
"warningList-get": {
"url": "/area/warningList",
"method": "get"
}
},
"auth-controller": {
......
src/views/CenterControl/components/MachineFailureRate.vue
View file @ c0a4ca6f
......@@ -18,29 +18,49 @@
placeholder="结束时间">
</el-date-picker>
<el-button
class="ml-10"
@click="doConfirmClick()"
type="primary"
size="small">
确定
</el-button>
<el-button
@click="doRestClick()"
size="small">
重置
</el-button>
</div>
</div>
</template>
<script>
export default {
props: {
pollingRequestTime: {}
},
watch: {
pollingRequestTime (newVal, oldVal) {
// 请求设备故障率图表数据
this.getMachineFilureEchartData()
}
},
data () {
return {
// 开始时间
startTime: null,
// 结束时间
endTime: null
endTime: null,
// 设备故障率
machineFilureRate: []
}
},
methods: {
// 渲染echarts图表
renderEcharts () {
let echart = echarts.init(document.getElementById('failureChart'))
let domItem = document.getElementById('failureChart')
echarts.dispose(domItem)
let echart = echarts.init(domItem)
let machineFilureRate = this.machineFilureRate
echart.setOption({
toolbox: {
'show': false
......@@ -66,7 +86,7 @@
color: [[0, '#b90b38'], [1, '#ee295c']]
}
},
data: [{value: 3, name: ''}]
data: machineFilureRate
}
]
})
......@@ -77,18 +97,31 @@
if (this.startTime > this.endTime) {
this.$message.warning('设备故障率图标开始时间不能大于结束时间！')
} else {
console.log('调取接口数据')
// 请求设备故障率图表数据
this.getMachineFilureEchartData()
}
} else {
this.$message.warning('设备故障率图标开始时间不能大于结束时间！')
}
},
// 点击重置按钮
doRestClick () {
this.startTime = ''
this.endTime = ''
// 请求设备故障率图表数据
this.getMachineFilureEchartData()
},
// 请求设备故障率图表数据
getMachineFilureEchartData () {
let queryParams = { beginTime: this.startTime, endTime: this.endTime }
this.$fetch('report-controller/efr-get', queryParams).then(response => {
this.machineFilureRate.push({
value: _.cloneDeep(response)
})
// 渲染echarts图表
this.renderEcharts()
})
}
},
mounted () {
setTimeout(() => {
// 渲染echarts图表
this.renderEcharts()
}, 0)
}
}
</script>
......
src/views/CenterControl/components/MachineStateTrend.vue
View file @ c0a4ca6f
......@@ -51,7 +51,7 @@
top: 30,
bottom: 30
},
color: ['#ee295c', '#15e067', '#7460ee'],
color: ['#7460ee', '#15e067', '#ee295c'],
legend: {
orient: 'vertical',
top: 'center',
......@@ -104,7 +104,7 @@
}],
series: [{
data: [50, 22, 50, 70, 50, 60],
name: '故障',
name: '待机',
stack: 'one',
type: 'bar'
// label: {
......@@ -120,7 +120,7 @@
// }
}, {
data: [30, 30, 40, 10, 20, 10],
name: '待机',
name: '故障',
stack: 'one',
type: 'bar'
// label: {
......
src/views/CenterControl/components/MachineUtilizationRate.vue
View file @ c0a4ca6f
......@@ -18,29 +18,49 @@
placeholder="结束时间">
</el-date-picker>
<el-button
class="ml-10"
type="primary"
size="small"
@click="doConfirmClick">
@click="doConfirmClick()">
确定
</el-button>
<el-button
size="small"
@click="doRestClick()">
重置
</el-button>
</div>
</div>
</template>
<script>
export default {
props: {
pollingRequestTime: {}
},
watch: {
pollingRequestTime (newVal, oldVal) {
// 请求设备利用率图表数据
this.getOeuEchartData()
}
},
data () {
return {
// 开始时间
startTime: null,
startTime: '',
// 结束时间
endTime: null
endTime: '',
// 设备利用率
machineUtilizationRate: []
}
},
methods: {
// 渲染echarts图表
renderEcharts () {
let echart = echarts.init(document.getElementById('utilizationChart'))
let domItem = document.getElementById('utilizationChart')
echarts.dispose(domItem)
let echart = echarts.init(domItem)
let machineUtilizationRate = this.machineUtilizationRate
echart.setOption({
toolbox: {
'show': false
......@@ -66,29 +86,42 @@
color: [[0, '#0ea418'], [1, '#02fb66']]
}
},
data: [{value: 32}]
data: machineUtilizationRate
}
]
})
},
// 点击确认按钮
doConfirmClick () {
if (this.startTime !== null && this.endTime !== null) {
if (this.startTime !== '' && this.endTime !== '') {
if (this.startTime > this.endTime) {
this.$message.warning('设备利用率图表开始时间不能大于结束时间！')
} else {
console.log('开始时间小于结束时间')
// 请求设备利用率图表数据
this.getOeuEchartData()
}
} else {
this.$message.warning('设备利用率图表开始时间和结束时间不能为空！')
}
},
// 点击重置按钮
doRestClick () {
this.startTime = ''
this.endTime = ''
// 请求设备利用率图表数据
this.getOeuEchartData()
},
// 请求设备利用率图表数据
getOeuEchartData () {
let queryParams = { beginTime: this.startTime, endTime: this.endTime }
this.$fetch('report-controller/oeu-get', queryParams).then(response => {
this.machineUtilizationRate.push({
value: _.cloneDeep(response)
})
// 渲染echarts图表
this.renderEcharts()
})
}
},
mounted () {
setTimeout(() => {
// 渲染echarts图表
this.renderEcharts()
}, 0)
}
}
</script>
......
src/views/CenterControl/components/MachineUtilizationTrend.vue
View file @ c0a4ca6f
......@@ -17,11 +17,16 @@
placeholder="结束时间">
</el-date-picker>
<el-button
class="ml-10"
@click="doConfirmClick()"
type="primary"
size="small">
确定
</el-button>
<el-button
size="small"
@click="doRestClick()">
</el-button>
</div>
<div id="utilizationTrendChart"></div>
</div>
......@@ -29,6 +34,12 @@
<script>
export default {
props: {
pollingRequestTime: {}
},
watch: {
pollingRequestTime (newVal, oldVal) {}
},
data () {
return {
// 开始时间
......@@ -103,15 +114,13 @@
this.$message.warning('设备利用率趋势图开始时间不能大于结束时间！')
} else {
console.log('调取接口数据')
console.log(this.startTime)
console.log(this.endTime)
}
} else {
this.$message.warning('设备利用率趋势图开始时间和结束时间不能为空！')
console.log(this.startTime)
console.log(this.endTime)
}
}
},
// 点击取消按钮
doRestClick () {}
},
mounted () {
setTimeout(() => {
......
src/views/CenterControl/index.vue
View file @ c0a4ca6f
......@@ -2,19 +2,33 @@
<div class="page-pack">
<div class="container" :style="{transform: zoom}" style="transform-origin: 0 0">
<!-- 设备利用率 -->
<MachineUtilizationRate></MachineUtilizationRate>
<MachineUtilizationRate
:pollingRequestTime="pollingRequestTime">
</MachineUtilizationRate>
<!-- 设备故障率 -->
<MachineFailureRate></MachineFailureRate>
<MachineFailureRate
:pollingRequestTime="pollingRequestTime">
</MachineFailureRate>
<!-- 设备利用率趋势 -->
<MachineUtilizationTrend></MachineUtilizationTrend>
<MachineUtilizationTrend
:pollingRequestTime="pollingRequestTime">
</MachineUtilizationTrend>
<!-- 设备故障率趋势图 -->
<MachineFailureTrend></MachineFailureTrend>
<MachineFailureTrend
:pollingRequestTime="pollingRequestTime">
</MachineFailureTrend>
<!-- 设备运行状态 -->
<MachineOperatingStatus></MachineOperatingStatus>
<MachineOperatingStatus
:pollingRequestTime="pollingRequestTime">
</MachineOperatingStatus>
<!-- 设备状态趋势图 -->
<MachineStateTrend></MachineStateTrend>
<MachineStateTrend
:pollingRequestTime="pollingRequestTime">
</MachineStateTrend>
<!-- 设备告警 -->
<MachineWarning></MachineWarning>
<MachineWarning
:pollingRequestTime="pollingRequestTime">
</MachineWarning>
</div>
</div>
</template>
......@@ -40,17 +54,31 @@
},
data () {
return {
// 默认缩放比例
zoom: 'scale(0)',
// X缩放比
width: 0,
height: 0
// Y缩放比
height: 0,
// 轮询请求标识时间
pollingRequestTime: ''
}
},
methods: {
// 轮询请求图表数据
pollingGetEchartData () {
this.pollingRequestTime = new Date()
setInterval(() => {
this.pollingRequestTime = new Date()
}, 60000)
}
},
mounted () {
this.width = document.body.offsetWidth
this.height = document.body.offsetHeight
this.zoom = `scale(${this.width / 2550},${this.height / 1140})`
console.log(this.zoom)
console.log(this.width)
// 轮询请求图表数据
this.pollingGetEchartData()
}
}
</script>
......
src/views/Workshop/Final/list.vue
View file @ c0a4ca6f
......@@ -82,8 +82,8 @@
sortTreeData: [
{
id: 1,
label: '板链',
code: 'PLATE_CHAIN'
label: '总装板链',
code: 'ASSEMBLY_PLATE_CHAIN'
},
{
id: 2,
......
src/views/Workshop/Welding/list.vue
View file @ c0a4ca6f
......@@ -97,7 +97,7 @@
},
{
id: 4,
label: '板链',
label: '焊装板链',
code: 'PLATE_CHAIN'
},
{
......
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