修改机械分厂车间环境 用电量生产额图表柱宽度
水房大屏添加国际化
This commit is contained in:
parent
c0bbca1e72
commit
752211c2db
@ -290,5 +290,21 @@ export default {
|
|||||||
'机器名称':'机器名称',
|
'机器名称':'机器名称',
|
||||||
'机器类型':'机器类型',
|
'机器类型':'机器类型',
|
||||||
'机器状态':'机器状态',
|
'机器状态':'机器状态',
|
||||||
|
'南门水房物联监测系统':'南门水房物联监测系统',
|
||||||
|
'数据监测':'数据监测',
|
||||||
|
'进水':'进水',
|
||||||
|
'出水':'出水',
|
||||||
|
'消耗':'消耗',
|
||||||
|
'用电':'用电',
|
||||||
|
'总体趋势图':'总体趋势图',
|
||||||
|
'近一周':'Last Week',
|
||||||
|
'近一月':'Last Month',
|
||||||
|
'近三月':'Last Three Months',
|
||||||
|
'最大值':'Max',
|
||||||
|
'最小值':'Min',
|
||||||
|
'平均值':'Avg',
|
||||||
|
'效益&效率':'Benefit&Efficiency',
|
||||||
|
'效益':'Benefit',
|
||||||
|
'效率':'Efficiency',
|
||||||
}
|
}
|
||||||
}
|
}
|
@ -290,5 +290,21 @@ export default {
|
|||||||
'机器名称':'机器名称',
|
'机器名称':'机器名称',
|
||||||
'机器类型':'机器类型',
|
'机器类型':'机器类型',
|
||||||
'机器状态':'机器状态',
|
'机器状态':'机器状态',
|
||||||
|
'南门水房物联监测系统':'南门水房物联监测系统',
|
||||||
|
'数据监测':'数据监测',
|
||||||
|
'进水':'进水',
|
||||||
|
'出水':'出水',
|
||||||
|
'消耗':'消耗',
|
||||||
|
'用电':'用电',
|
||||||
|
'总体趋势图':'总体趋势图',
|
||||||
|
'近一周':'近一周',
|
||||||
|
'近一月':'近一月',
|
||||||
|
'近三月':'近三月',
|
||||||
|
'最大值':'最大值',
|
||||||
|
'最小值':'最小值',
|
||||||
|
'平均值':'平均值',
|
||||||
|
'效益&效率':'效益&效率',
|
||||||
|
'效益':'效益',
|
||||||
|
'效率':'效率',
|
||||||
}
|
}
|
||||||
}
|
}
|
@ -119,6 +119,8 @@ const router=useRouter()
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
function setdata(val:any){
|
function setdata(val:any){
|
||||||
|
|
||||||
|
|
||||||
let data={
|
let data={
|
||||||
name:val.name, //设备名称
|
name:val.name, //设备名称
|
||||||
status:val.status=='H_E_STOP'?t('messages.STOP'):val.status=='H_OFF'?t('messages.Standby'):val.status=='H_ON'?t('messages.work'):t('messages.halt'), //设备状态
|
status:val.status=='H_E_STOP'?t('messages.STOP'):val.status=='H_OFF'?t('messages.Standby'):val.status=='H_ON'?t('messages.work'):t('messages.halt'), //设备状态
|
||||||
@ -127,7 +129,7 @@ let data={
|
|||||||
stoptime:val.stoptime,//急停时长
|
stoptime:val.stoptime,//急停时长
|
||||||
data:'2020-05-06',//采购日期
|
data:'2020-05-06',//采购日期
|
||||||
src:imgurlAddXhr(val.data),//设备图片
|
src:imgurlAddXhr(val.data),//设备图片
|
||||||
timeguagu:Math.abs((val.ontime)/(val.ontime+val.offtime)*100).toFixed(1)||0,//时间稼动率
|
timeguagu:+Math.abs((val.ontime)/(val.ontime+val.offtime+val.stoptime)*100).toFixed(1)||0,//时间稼动率
|
||||||
MTBF:2724,//MTBF
|
MTBF:2724,//MTBF
|
||||||
MTTR:169,//MTTR
|
MTTR:169,//MTTR
|
||||||
MTTF:2555,//MTTF
|
MTTF:2555,//MTTF
|
||||||
|
@ -11,7 +11,7 @@
|
|||||||
<div class="box">
|
<div class="box">
|
||||||
<div class="box-title">{{t('messages.机械分厂设备列表')}}</div>
|
<div class="box-title">{{t('messages.机械分厂设备列表')}}</div>
|
||||||
<div class="box-body">
|
<div class="box-body">
|
||||||
<dv-scroll-board ref="devList" :config="prop.config" @mouseover="dvMouseover" @mouseend="dvmouseleave" :style="{
|
<dv-scroll-board ref="devList" @click="dvClick" :config="prop.config" @mouseover="dvMouseover" @mouseend="dvmouseleave" :style="{
|
||||||
width: '100%',
|
width: '100%',
|
||||||
height: '100%',
|
height: '100%',
|
||||||
}" />
|
}" />
|
||||||
@ -51,6 +51,34 @@ const dvMouseover = (value) => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
};
|
};
|
||||||
|
/**
|
||||||
|
* 点击表格事件
|
||||||
|
*/
|
||||||
|
const dvClick = (value) =>{
|
||||||
|
if (value.row) {
|
||||||
|
let id = {
|
||||||
|
'精加车间':1,
|
||||||
|
'机加车间':2,
|
||||||
|
'大件车间':3,
|
||||||
|
'精饰车间':4,
|
||||||
|
'焊接车间':5,
|
||||||
|
}
|
||||||
|
|
||||||
|
prop.config.rawData.forEach((res,index) => {
|
||||||
|
|
||||||
|
if (index == value.row[0]-1) {
|
||||||
|
router.push({
|
||||||
|
name: "Mechanicsson",
|
||||||
|
params: {
|
||||||
|
id: id[value.row[2]],
|
||||||
|
dev: res.id
|
||||||
|
},
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
/**
|
/**
|
||||||
* @函数功能: 鼠标移出组件方法
|
* @函数功能: 鼠标移出组件方法
|
||||||
* @出口参数:
|
* @出口参数:
|
||||||
|
@ -94,7 +94,8 @@ let scrollBoardConfig = reactive({
|
|||||||
rowNum: 10,
|
rowNum: 10,
|
||||||
columnWidth: [80, 290, 120, 120, 120, 120],
|
columnWidth: [80, 290, 120, 120, 120, 120],
|
||||||
align: ['center', 'center', 'center', 'center', 'center', 'center'],
|
align: ['center', 'center', 'center', 'center', 'center', 'center'],
|
||||||
data: []
|
data: [],
|
||||||
|
rawData:[]
|
||||||
})
|
})
|
||||||
let gatewayData = ref([])
|
let gatewayData = ref([])
|
||||||
let devNumTimer: any = null
|
let devNumTimer: any = null
|
||||||
@ -169,6 +170,7 @@ async function reqDeviceTotelListMFfun() {
|
|||||||
item.failure + '%'
|
item.failure + '%'
|
||||||
]
|
]
|
||||||
})
|
})
|
||||||
|
scrollBoardConfig.rawData = result.data;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -207,7 +207,7 @@ function setcontentData(val) {
|
|||||||
return color[params.dataIndex];
|
return color[params.dataIndex];
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
barWidth: '30%',
|
barWidth: '50%',
|
||||||
label: {
|
label: {
|
||||||
show: true,
|
show: true,
|
||||||
color: '#fff',
|
color: '#fff',
|
||||||
@ -251,7 +251,7 @@ function setcontentData(val) {
|
|||||||
return color[params.dataIndex];
|
return color[params.dataIndex];
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
barWidth: '25%',
|
barWidth: '45%',
|
||||||
label: {
|
label: {
|
||||||
show: true,
|
show: true,
|
||||||
color: '#fff',
|
color: '#fff',
|
||||||
|
@ -205,7 +205,7 @@ function setcontentData(val) {
|
|||||||
return color[params.dataIndex];
|
return color[params.dataIndex];
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
barWidth: '30%',
|
barWidth: '50%',
|
||||||
label: {
|
label: {
|
||||||
show: true,
|
show: true,
|
||||||
color: '#fff',
|
color: '#fff',
|
||||||
@ -248,7 +248,7 @@ function setcontentData(val) {
|
|||||||
return color[params.dataIndex];
|
return color[params.dataIndex];
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
barWidth: '25%',
|
barWidth: '45%',
|
||||||
label: {
|
label: {
|
||||||
show: true,
|
show: true,
|
||||||
color: '#fff',
|
color: '#fff',
|
||||||
|
@ -206,7 +206,7 @@ function setcontentData(val) {
|
|||||||
return color[params.dataIndex];
|
return color[params.dataIndex];
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
barWidth: '30%',
|
barWidth: '50%',
|
||||||
label: {
|
label: {
|
||||||
show: true,
|
show: true,
|
||||||
color: '#fff',
|
color: '#fff',
|
||||||
@ -249,7 +249,7 @@ function setcontentData(val) {
|
|||||||
return color[params.dataIndex];
|
return color[params.dataIndex];
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
barWidth: '25%',
|
barWidth: '45%',
|
||||||
label: {
|
label: {
|
||||||
show: true,
|
show: true,
|
||||||
color: '#fff',
|
color: '#fff',
|
||||||
|
@ -206,7 +206,7 @@ function setcontentData(val) {
|
|||||||
return color[params.dataIndex];
|
return color[params.dataIndex];
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
barWidth: '30%',
|
barWidth: '50%',
|
||||||
label: {
|
label: {
|
||||||
show: true,
|
show: true,
|
||||||
color: '#fff',
|
color: '#fff',
|
||||||
@ -250,7 +250,7 @@ function setcontentData(val) {
|
|||||||
return color[params.dataIndex];
|
return color[params.dataIndex];
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
barWidth: '25%',
|
barWidth: '45%',
|
||||||
label: {
|
label: {
|
||||||
show: true,
|
show: true,
|
||||||
color: '#fff',
|
color: '#fff',
|
||||||
|
@ -206,7 +206,7 @@ function setcontentData(val) {
|
|||||||
return color[params.dataIndex];
|
return color[params.dataIndex];
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
barWidth: '30%',
|
barWidth: '50%',
|
||||||
label: {
|
label: {
|
||||||
show: true,
|
show: true,
|
||||||
color: '#fff',
|
color: '#fff',
|
||||||
@ -250,7 +250,7 @@ function setcontentData(val) {
|
|||||||
return color[params.dataIndex];
|
return color[params.dataIndex];
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
barWidth: '25%',
|
barWidth: '45%',
|
||||||
label: {
|
label: {
|
||||||
show: true,
|
show: true,
|
||||||
color: '#fff',
|
color: '#fff',
|
||||||
|
@ -1,41 +1,41 @@
|
|||||||
<template>
|
<template>
|
||||||
<div :class="$style['container']">
|
<div :class="$style['container']">
|
||||||
<header2 ref="headerref" :width="'100%'" :height="'100px'" :title="`南门水房物联监测系统`" :titleTip="[]" :typeFun="['time']"
|
<header2 ref="headerref" :width="'100%'" :height="'100px'" :title="t('messages.南门水房物联监测系统')" :titleTip="[]" :typeFun="['time']"
|
||||||
:alarmType="['']"></header2>
|
:alarmType="['']"></header2>
|
||||||
<div class="main">
|
<div class="main">
|
||||||
<div class="left-title">数据监测</div>
|
<div class="left-title">{{ t('messages.数据监测') }}</div>
|
||||||
<div class="lt-data item">
|
<div class="lt-data item">
|
||||||
<div class="left">进水</div>
|
<div class="left">{{ t('messages.进水') }}</div>
|
||||||
<div class="center">20</div>
|
<div class="center">20</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="rt-data item">
|
<div class="rt-data item">
|
||||||
<div class="left">出水</div>
|
<div class="left">{{ t('messages.出水') }}</div>
|
||||||
<div class="center">20</div>
|
<div class="center">20</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="lb-data item">
|
<div class="lb-data item">
|
||||||
<div class="left">消耗</div>
|
<div class="left">{{ t('messages.消耗') }}</div>
|
||||||
<div class="center">20</div>
|
<div class="center">20</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="rb-data item">
|
<div class="rb-data item">
|
||||||
<div class="left">用电</div>
|
<div class="left">{{ t('messages.用电') }}</div>
|
||||||
<div class="center">20</div>
|
<div class="center">20</div>
|
||||||
</div>
|
</div>
|
||||||
<!-- 总体趋势图 -->
|
<!-- 总体趋势图 -->
|
||||||
<div class="rt-title">总体趋势图</div>
|
<div class="rt-title">{{ t('messages.总体趋势图') }}</div>
|
||||||
<div class="rt-radio">
|
<div class="rt-radio">
|
||||||
<el-radio-group v-model="date" size="small">
|
<el-radio-group v-model="date" size="small">
|
||||||
<el-radio-button label="1">近一周</el-radio-button>
|
<el-radio-button label="1">{{ t('messages.近一周') }}</el-radio-button>
|
||||||
<el-radio-button label="2">近一月</el-radio-button>
|
<el-radio-button label="2">{{ t('messages.近一月') }}</el-radio-button>
|
||||||
<el-radio-button label="3">近三月</el-radio-button>
|
<el-radio-button label="3">{{ t('messages.近三月') }}</el-radio-button>
|
||||||
</el-radio-group>
|
</el-radio-group>
|
||||||
</div>
|
</div>
|
||||||
<div class="mainChart" ref="mainChart"></div>
|
<div class="mainChart" ref="mainChart"></div>
|
||||||
<div class="math-content">
|
<div class="math-content">
|
||||||
<el-row>
|
<el-row>
|
||||||
<el-col :span="12" class="p-left10"></el-col>
|
<el-col :span="12" class="p-left10"></el-col>
|
||||||
<el-col :span="4" class="math-title-color">最大值</el-col>
|
<el-col :span="4" class="math-title-color">{{ t('messages.最大值') }}</el-col>
|
||||||
<el-col :span="4" class="math-title-color">最小值</el-col>
|
<el-col :span="4" class="math-title-color">{{ t('messages.最小值') }}</el-col>
|
||||||
<el-col :span="4" class="math-title-color">平均值</el-col>
|
<el-col :span="4" class="math-title-color">{{ t('messages.平均值') }}</el-col>
|
||||||
</el-row>
|
</el-row>
|
||||||
<el-row v-for="item in mathList">
|
<el-row v-for="item in mathList">
|
||||||
<el-col :span="12" class="p-left10" style="display: flex;justify-content: start;align-items: center;">
|
<el-col :span="12" class="p-left10" style="display: flex;justify-content: start;align-items: center;">
|
||||||
@ -48,15 +48,15 @@
|
|||||||
</el-row>
|
</el-row>
|
||||||
</div>
|
</div>
|
||||||
<!-- 效益&效率 -->
|
<!-- 效益&效率 -->
|
||||||
<div class="rb-title">效益&效率</div>
|
<div class="rb-title">{{ t('messages.效益&效率') }}</div>
|
||||||
<div class="rb-content">
|
<div class="rb-content">
|
||||||
<div class="progress">
|
<div class="progress">
|
||||||
<el-progress type="circle" width="150" :percentage="25" />
|
<el-progress type="circle" :width="150" :percentage="25" />
|
||||||
<div class="progress-text">效益</div>
|
<div class="progress-text">{{ t('messages.效益') }}</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="progress">
|
<div class="progress">
|
||||||
<el-progress type="circle" width="150" :percentage="25" />
|
<el-progress type="circle" :width="150" :percentage="25" />
|
||||||
<div class="progress-text">效率</div>
|
<div class="progress-text">{{ t('messages.效益') }}</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -66,11 +66,14 @@
|
|||||||
<script setup lang='ts'>
|
<script setup lang='ts'>
|
||||||
import { onMounted, onUnmounted, reactive, ref, getCurrentInstance } from "vue";
|
import { onMounted, onUnmounted, reactive, ref, getCurrentInstance } from "vue";
|
||||||
import header2 from "@/components/headerBox/header2.vue";
|
import header2 from "@/components/headerBox/header2.vue";
|
||||||
|
import { useI18n } from 'vue-i18n'
|
||||||
|
let { t } = useI18n();
|
||||||
let imgUrl = require('@/assets/img/water_room.png')
|
let imgUrl = require('@/assets/img/water_room.png')
|
||||||
const { proxy } = getCurrentInstance() as any
|
const { proxy } = getCurrentInstance() as any
|
||||||
const mainChart = ref(null)
|
const mainChart = ref(null)
|
||||||
let chart = null
|
let chart = null
|
||||||
let date = ref('1')
|
let date = ref('1')
|
||||||
|
document.title = t('messages.南门水房物联监测系统')
|
||||||
const colors = ['#5470C6', '#91CC75', '#EE6666'];
|
const colors = ['#5470C6', '#91CC75', '#EE6666'];
|
||||||
//进水量 出水量 用电量 最大值 最小值 平均值
|
//进水量 出水量 用电量 最大值 最小值 平均值
|
||||||
let mathList = reactive([
|
let mathList = reactive([
|
||||||
@ -78,6 +81,7 @@ let mathList = reactive([
|
|||||||
{ color: '#91CC75', name: '出水量', max: 100, min: 0, avg: 50 },
|
{ color: '#91CC75', name: '出水量', max: 100, min: 0, avg: 50 },
|
||||||
{ color: '#EE6666', name: '用电量', max: 100, min: 0, avg: 50 }
|
{ color: '#EE6666', name: '用电量', max: 100, min: 0, avg: 50 }
|
||||||
])
|
])
|
||||||
|
|
||||||
function init() {
|
function init() {
|
||||||
chart = proxy.$echarts.init(mainChart.value, 'dark');
|
chart = proxy.$echarts.init(mainChart.value, 'dark');
|
||||||
let option = {
|
let option = {
|
||||||
|
Loading…
Reference in New Issue
Block a user