Skip to content

M
mes-ui
Commit 47bf5bb4 authored by kangzhenfei's avatar kangzhenfei
Browse files
Options

Merge branch 'product-kk' into product

parents 614278c5 7edb4e9d
Hide whitespace changes
Inline Side-by-side
Showing with 420 additions and 157 deletions
pages/dncmnc/mnc/analysis.vue
View file @ 47bf5bb4
......@@ -4,77 +4,37 @@
<a class="back_href" @click="goView">
<Icon type="ios-undo-outline" size="24" />返回设备监控
</a>
<p>
<Tabs size="small" type="card">
<TabPane label="工厂级分析"></TabPane>
<TabPane label="班组级分析"></TabPane>
<TabPane label="设备级分析"></TabPane>
</Tabs>
<RadioGroup v-model="nian" type="button" size="small" >
<!-- <Radio label="0">全部</Radio> @on-change="changeStatus"-->
<Radio label="1">年度</Radio>
<Radio label="2">月度</Radio>
</RadioGroup>
<DatePicker v-model="taskTime" type="month" placeholder="选择月份" style="width: 200px"></DatePicker>
<Button @click="search()">查询</Button>
</p>
<!-- 数据分析表 -->
<Echart1 ></Echart1>
<Echart4 ></Echart4>
</div>
</template>
<script>
import Echart1 from './compose/echart1'
import Echart4 from './compose/echart4'
export default {
components: {
Echart1,
Echart4,
},
data() {
return {
// echarts选项
option: {
title: {
text: '折线图堆叠'
},
tooltip: {
trigger: 'axis'
},
legend: {
data: ['在用率', '运行率', '故障率', '停机率'],
right: '50px' ,
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
toolbox: {
feature: {
saveAsImage: {}
}
},
xAxis: {
type: 'category',
boundaryGap: false,
data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
},
yAxis: {
type: 'value'
},
series: [
{
name: '在用率',
type: 'line',
stack: '总量',
data: [120, 132, 101, 134, 90, 230, 210]
},
{
name: '运行率',
type: 'line',
stack: '总量',
data: [220, 182, 191, 234, 290, 330, 310]
},
{
name: '故障率',
type: 'line',
stack: '总量',
data: [150, 232, 201, 154, 190, 330, 410]
},
{
name: '停机率',
type: 'line',
stack: '总量',
data: [320, 332, 301, 334, 390, 330, 320]
},
]
},
nian:2,
taskTime: new Date(),
};
},
methods: {
......@@ -82,6 +42,9 @@ export default {
//返回设备监控页面
this.$router.push("/dncmnc/mnc");
},
search(){
this.$Message.success("查询数据...")
}
},
};
</script>
pages/dncmnc/mnc/compose/echart1.vue
View file @ 47bf5bb4
<template>
<div>
<div id="myChart" style="width:1200px;height:410px;margin:0 auto;top: -40px;"></div>
<div id="myChart" style="width:100%;height:340px;margin:0 auto;top: 0px;"></div>
</div>
</template>
<script>
......@@ -21,98 +21,55 @@ export default {
var option = {
title: {
text:
'Total: 115 SampleSize: 5 Groups: 23 Max: 0.966 Min: 0.91 Dev: 0.022003 CPK: 1.34 PPK: 1.36 Ca: 0.1 Cp: 1.49 Pp: 1.51',
subtext: '',
textStyle: {
fontWeight: 'normal',
fontSize:'12px',
color: '#515A6E' //legend颜色
},
left: 'center',
top: 'bottom'
},
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: '#739ADD' // 0% 处的颜色
},
{
offset: 1,
color: '#739ADD' // 100% 处的颜色
}
],
global: false // 缺省为 false
text: ''
},
tooltip: {
trigger: 'axis',
axisPointer: {
animation: false
}
trigger: 'axis'
},
legend: {
data: ['在用率', '运行率', '故障率', '停机率'],
right: 55,
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: {
type: 'category',
data: [
'2019',
'2020',
'2021',
'2022',
'2023',
'2024',
'2025',
'2026',
'2027',
'2028',
'2029',
'2030'
]
type: 'category',
boundaryGap: false,
data: ['1日', '2日', '3日', '4日', '5日', '6日', '7日', '8日', '9日', '10日', '11日', '12日', '13日',
'14日', '15日', '16日', '17日', '18日']
},
yAxis: {
type: 'value',
axisLabel: {
formatter: '{value} ‰'
}
type: 'value'
},
series: [
{
data: [1.6, 2.8, 3.2, 1.6, 0.2, 4.7, 1.5, 4.9, 2.5, 5.4, 6.2, 1.5],
type: 'line',
markLine: {
data: [
{
type: 'max',
label: {
formatter: '2020目标值 6 ‰'
},
lineStyle: {
//警戒线的样式 ，虚实 颜色
type: 'dashed',
color: '#0B5813',
width: 2
}
},
{
type: 'min',
label: {
formatter: '2030目标值 0.2 ‰'
},
lineStyle: {
//警戒线的样式 ，虚实 颜色
type: 'dashed',
color: '#E99224',
width: 2
}
}
]
{
name: '在用率',
type: 'line',
stack: '总量',
data: [120, 132, 101, 134, 90, 230, 210,120, 132, 101, 134, 90, 230, 210,120, 132, 101, 134]
},
{
name: '运行率',
type: 'line',
stack: '总量',
data: [220, 182, 191, 234, 290, 330, 310,220, 182, 191, 234, 290, 330, 310,220, 182, 191, 234, 290, 330, 310]
},
{
name: '故障率',
type: 'line',
stack: '总量',
data: [150, 232, 201, 154, 190, 330, 410,150, 232, 201, 154, 190, 330, 410,150, 232, 201, 154, 190, 330, 410]
},
{
name: '停机率',
type: 'line',
stack: '总量',
data: [320, 332, 301, 334, 390, 330, 320,320, 332, 301, 334, 390, 330, 320,320, 332, 301, 334, 390, 330, 320]
}
}
]
}
// 绘制图表
......
pages/dncmnc/mnc/compose/echart2.vue 0 → 100644
View file @ 47bf5bb4
<template>
<div>
<div id="myChart" style="width:380px;height:300px;margin:0 auto;top: 0px;"></div>
</div>
</template>
<script>
export default {
name: 'Echart2',
data() {
return {
disabled: false
}
},
methods: {
handleClose() {
this.$emit('on-close')
},
loadEchart() {
// 基于准备好的dom，初始化echarts实例
var myChart = this.$echarts.init(document.getElementById('myChart'))
var option = {
tooltip: {
trigger: 'axis',
axisPointer: { // 坐标轴指示器，坐标轴触发有效
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
}
},
legend: {
data: ['关机', '空闲', '运行', '故障']
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: {
type: 'value'
},
yAxis: {
type: 'category',
data: ['03-01', '03-02', '03-03', '03-04', '03-05']
},
series: [
{
name: '关机',
type: 'bar',
barWidth: 13,//宽度
stack: '总量',
data: [320, 302, 301, 334, 390, 330, 320]
},
{
name: '空闲',
type: 'bar',
barWidth: 13,//宽度
stack: '总量',
data: [120, 132, 101, 134, 90, 230, 210]
},
{
name: '运行',
type: 'bar',
barWidth: 13,//宽度
stack: '总量',
data: [150, 212, 201, 154, 190, 330, 410]
},
{
name: '故障',
type: 'bar',
barWidth: 13,//宽度
stack: '总量',
data: [220, 182, 191, 234, 290, 330, 310]
},
]
}
// 绘制图表
myChart.setOption(option)
}
},
mounted() {
this.loadEchart()
}
}
</script>
pages/dncmnc/mnc/compose/echart3.vue 0 → 100644
View file @ 47bf5bb4
<template>
<div>
<div id="myChart03" style="width:865px;height:516px;top: 0px;"></div>
</div>
</template>
<script>
export default {
name: 'Echart3',
data() {
return {
disabled: false
}
},
methods: {
handleClose() {
this.$emit('on-close')
},
loadEchart() {
// 基于准备好的dom，初始化echarts实例
var myChart03 = this.$echarts.init(document.getElementById('myChart03'))
var option = {
title: {
text: ''
},
tooltip: {
// trigger: 'axis'
},
legend: {
data: ['功率', '转速', '进给']
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
// toolbox: { //保存为图片
// feature: {
// saveAsImage: {}
// }
// },
xAxis: {
type: 'category',
boundaryGap: false,
data: ['12:05', '12:06', '12:07', '12:08', '12:09', '12:10']
},
yAxis: {
type: 'value'
},
series: [
{
name: '功率',
type: 'line',
stack: '总量',
data: [120, 132, 101, 134, 90, 230, 210]
},
{
name: '转速',
type: 'line',
stack: '总量',
data: [220, 182, 191, 234, 290, 330, 310]
},
{
name: '进给',
type: 'line',
stack: '总量',
data: [150, 232, 201, 154, 190, 330, 410]
},
]
}
// 绘制图表
myChart03.setOption(option)
}
},
mounted() {
this.loadEchart()
}
}
</script>
pages/dncmnc/mnc/compose/echart4.vue 0 → 100644
View file @ 47bf5bb4
<template>
<div>
<div id="myChart04" style="width:100%;height:340px;margin:20px auto;top: 0px;"></div>
</div>
</template>
<script>
export default {
name: 'Echart4',
data() {
return {
disabled: false
}
},
methods: {
handleClose() {
this.$emit('on-close')
},
loadEchart() {
// 基于准备好的dom，初始化echarts实例
var myChart04 = this.$echarts.init(document.getElementById('myChart04'))
var option = {
title: {
text: ''
},
legend: {
data: ['开机', '关机', '故障', '运行'],
right: 55,
},
tooltip: {
trigger: 'axis'
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: {
data: ['1日', '2日', '3日', '4日', '5日', '6日', '7日', '8日', '9日', '10日', '11日', '12日', '13日',
'14日', '15日', '16日', '17日', '18日']
},
yAxis: {
type: 'value'
},
series: [
{
name: '开机',
type: 'bar',
barWidth: 8,
data: [120, 132, 101, 134, 90, 230, 210,120, 132, 101, 134, 90, 230, 210,120, 132, 101, 134]
},
{
name: '关机',
type: 'bar',
barWidth: 8,
data: [220, 182, 191, 234, 290, 330, 310,220, 182, 191, 234, 290, 330, 310,220, 182, 191, 234, 290, 330, 310]
},
{
name: '故障',
type: 'bar',
barWidth: 8,
data: [150, 232, 201, 154, 190, 330, 410,150, 232, 201, 154, 190, 330, 410,150, 232, 201, 154, 190, 330, 410]
},
{
name: '运行',
type: 'bar',
barWidth: 8,
data: [320, 332, 301, 334, 390, 330, 320,320, 332, 301, 334, 390, 330, 320,320, 332, 301, 334, 390, 330, 320]
}
]
}
// 绘制图表
myChart04.setOption(option)
}
},
mounted() {
this.loadEchart()
}
}
</script>
pages/dncmnc/mnc/mnc.less
View file @ 47bf5bb4
......@@ -19,6 +19,10 @@
min-height: 120px;
text-align: center;
}
.statu_box{
line-height: 30px;
padding: 20px 0 0 0;
}
.bao_code{
line-height: 32px;
font-size: 16px;
......@@ -29,6 +33,37 @@
}
.set_masage{
min-height: 125px;
line-height: 25px;
.time_bg{
background: #267feb49;
line-height: 34px;
width: 160px;
text-align: center;
border-radius: 3px;
}
}
}
}
}
#echarts{
.set_echarts{
.tips{
// padding: 20px;
.tips_item{
background: #eff1f7;
margin: 20px;
line-height: 36px;
padding: 0 20px;
.item_top{
border-bottom: 1px solid #b1b1b1;
}
.item_center{
text-align: center;
line-height: 32px;
}
.item_right{
float: right;
}
}
}
}
......
pages/dncmnc/mnc/monitoring.vue
View file @ 47bf5bb4
......@@ -72,30 +72,87 @@
<div class="set_card_box">
<p class="set_top">设备状态</p>
<div class="set_card_body">
<div class="set_img">
<img src="../image/guz.png" alt="">
<p>故障</p>
</div>
<div class="set_masage">
<p>当前状态开始时间：</p>
<p class="time_bg">11：45：05</p>
<p>当前状态持续时间：</p>
<p class="time_bg">11：55：25</p>
</div>
<Row>
<Col span="9">
<div class="set_img statu_box">
<img src="../image/guz.png" alt="">
<p>故障</p>
</div>
</Col>
<Col span="15">
<div class="set_masage">
<p>当前状态开始时间：</p>
<p class="time_bg">11:45:05</p>
<p>当前状态持续时间：</p>
<p class="time_bg">11:55:25</p>
</div>
</Col>
</Row>
</div>
</div>
<div class="set_card_box">
<p class="set_top">加工状态统计</p>
<div class="center">
图表
<Echart2 ></Echart2>
</div>
</div>
</Col>
<Col span="18">
<div class="set_card_box">
<div class="set_card_box" id="echarts">
<p class="set_top">加工状态实时信息</p>
<div class="center">
图表
<div class="set_echarts">
<Row>
<Col span="16">
<div class="echart3">
<Echart3 ></Echart3>
</div>
</Col>
<Col span="8">
<div class="tips">
<div class="tips_item">
<Row class="item_top">
<Col span="8" class="item_center"> 工件坐标 </Col>
<Col span="8" class="item_center"> 位置值 </Col>
<Col span="8" class="item_center"> 角速率 </Col>
</Row>
<Row>
<Col span="8" class="item_center"> X </Col>
<Col span="8" class="item_center"> 30mm </Col>
<Col span="8" class="item_center"> 0 </Col>
</Row>
<Row>
<Col span="8" class="item_center"> Y </Col>
<Col span="8" class="item_center"> 30mm </Col>
<Col span="8" class="item_center"> 0 </Col>
</Row>
<Row>
<Col span="8" class="item_center"> Z </Col>
<Col span="8" class="item_center"> 30mm </Col>
<Col span="8" class="item_center"> 0 </Col>
</Row>
<Row>
<Col span="8" class="item_center"> A </Col>
<Col span="8" class="item_center"> 30deg</Col>
<Col span="8" class="item_center"> 18 </Col>
</Row>
<Row >
<Col span="8" class="item_center"> B </Col>
<Col span="8" class="item_center"> 30deg</Col>
<Col span="8" class="item_center"> 6 </Col>
</Row>
</div>
<div class="tips_item">
<p>当前程序行：<span class="item_right"> G01*100 </span></p>
<p>当前刀具名称：<span class="item_right"> GD236689 </span></p>
<p>当前刀库号： <span class="item_right"> 1213 </span></p>
<p>刀具已使用工时： <span class="item_right"> 10 </span></p>
<p>刀补值： <span class="item_right"> 20 </span>-</p>
<p>刀补地址： <span class="item_right"> D1 </span></p>
<p>扭矩： <span class="item_right"> 200 </span></p>
</div>
</div>
</Col>
</Row>
</div>
</div>
</Col>
......@@ -104,7 +161,13 @@
</div>
</template>
<script>
import Echart2 from './compose/echart2'
import Echart3 from './compose/echart3'
export default {
components: {
Echart2,
Echart3,
},
data(){
return{
......
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