Skip to content

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

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

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