修改机械分厂车间环境 用电量生产额图表柱宽度

水房大屏添加国际化
This commit is contained in:
hzz 2023-06-16 17:42:25 +08:00
parent c0bbca1e72
commit 752211c2db
11 changed files with 99 additions and 31 deletions

View File

@ -290,5 +290,21 @@ export default {
'机器名称':'机器名称', '机器名称':'机器名称',
'机器类型':'机器类型', '机器类型':'机器类型',
'机器状态':'机器状态', '机器状态':'机器状态',
'南门水房物联监测系统':'南门水房物联监测系统',
'数据监测':'数据监测',
'进水':'进水',
'出水':'出水',
'消耗':'消耗',
'用电':'用电',
'总体趋势图':'总体趋势图',
'近一周':'Last Week',
'近一月':'Last Month',
'近三月':'Last Three Months',
'最大值':'Max',
'最小值':'Min',
'平均值':'Avg',
'效益&效率':'Benefit&Efficiency',
'效益':'Benefit',
'效率':'Efficiency',
} }
} }

View File

@ -290,5 +290,21 @@ export default {
'机器名称':'机器名称', '机器名称':'机器名称',
'机器类型':'机器类型', '机器类型':'机器类型',
'机器状态':'机器状态', '机器状态':'机器状态',
'南门水房物联监测系统':'南门水房物联监测系统',
'数据监测':'数据监测',
'进水':'进水',
'出水':'出水',
'消耗':'消耗',
'用电':'用电',
'总体趋势图':'总体趋势图',
'近一周':'近一周',
'近一月':'近一月',
'近三月':'近三月',
'最大值':'最大值',
'最小值':'最小值',
'平均值':'平均值',
'效益&效率':'效益&效率',
'效益':'效益',
'效率':'效率',
} }
} }

View File

@ -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

View File

@ -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
},
});
}
});
}
}
/** /**
* @函数功能: 鼠标移出组件方法 * @函数功能: 鼠标移出组件方法
* @出口参数: * @出口参数:

View File

@ -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;
} }
} }

View File

@ -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',

View File

@ -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',

View File

@ -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',

View File

@ -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',

View File

@ -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',

View File

@ -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 = {