水房大屏完善,修改场内大屏设备->产品 将机械分厂设备大屏路由换成indexNew

This commit is contained in:
hzz 2023-06-16 10:57:20 +08:00
parent c18fb8d84a
commit b4a3a8c6d3
12 changed files with 79 additions and 33 deletions

View File

@ -275,5 +275,7 @@ export default {
'传感器监测走势图':'传感器监测走势图', '传感器监测走势图':'传感器监测走势图',
'机械分厂设备列表':'机械分厂设备列表', '机械分厂设备列表':'机械分厂设备列表',
'设备状态总览':'设备状态总览', '设备状态总览':'设备状态总览',
'产品状态':'产品状态',
'产品数量':'产品数量',
} }
} }

View File

@ -75,15 +75,15 @@ export default {
'fanwei':'范围', 'fanwei':'范围',
'onLine':'在线', 'onLine':'在线',
'offline':'离线', 'offline':'离线',
'QiCheCommunication':'汽车军团数据通', 'QiCheCommunication':'汽车军团数据通',
'FuZhuangCommunication':'服装军团数据通', 'FuZhuangCommunication':'服装军团数据通',
'JiaFangCommunication':'家纺军团数据通', 'JiaFangCommunication':'家纺军团数据通',
'YiFangCommunication':'医防军团数据通', 'YiFangCommunication':'医防军团数据通',
'DevNum':'设备数量', 'DevNum':'设备数量',
'FuZhuangDevSchedule':'服装军团 设备完成进度', 'FuZhuangDevSchedule':'服装军团 产品完成进度',
'JiaFangDevSchedule':'家纺军团 设备完成进度', 'JiaFangDevSchedule':'家纺军团 产品完成进度',
'YiFangDevSchedule':'医防军团 设备完成进度', 'YiFangDevSchedule':'医防军团 产品完成进度',
'QiCheDevSchedule':'汽车军团 设备完成进度', 'QiCheDevSchedule':'汽车军团 产品完成进度',
'InPlantProductsDevList':'军团厂内设备列表', 'InPlantProductsDevList':'军团厂内设备列表',
'SerialNum':'序号', 'SerialNum':'序号',
'RackNum':'机架号', 'RackNum':'机架号',
@ -130,11 +130,11 @@ export default {
'ClientName':'客户名称', 'ClientName':'客户名称',
'ClientSalesman':'客户业务员', 'ClientSalesman':'客户业务员',
'expectDeliveryDate':'预计工厂交货日期', 'expectDeliveryDate':'预计工厂交货日期',
'JingJia_datacom':'精加-数据通', 'JingJia_datacom':'精加-数据通',
'JiJia_datacom':'机加-数据通', 'JiJia_datacom':'机加-数据通',
'DaJian_datacom':'大件-数据通', 'DaJian_datacom':'大件-数据通',
'JingShi_datacom':'精饰-数据通', 'JingShi_datacom':'精饰-数据通',
'HanJie_datacom':'焊接-数据通', 'HanJie_datacom':'焊接-数据通',
'JingJiaDevStatus':'精加设备状态', 'JingJiaDevStatus':'精加设备状态',
'JiJiaDevStatus':'机加设备状态', 'JiJiaDevStatus':'机加设备状态',
'DaJianDevStatus':'大件设备状态', 'DaJianDevStatus':'大件设备状态',
@ -171,8 +171,8 @@ export default {
'realityTrimNum':'实际剪线次数', 'realityTrimNum':'实际剪线次数',
'AvgTrimNum':'平均剪线次数', 'AvgTrimNum':'平均剪线次数',
'runTime':'运行时间', 'runTime':'运行时间',
'datacom':'数据通', 'datacom':'数据通',
'OffSiteDevList':'厂外设备列表', 'OffSiteDevList':'厂外机器列表',
'province':'省份', 'province':'省份',
'type':'类型', 'type':'类型',
'OnlineOrNot':'是否在线', 'OnlineOrNot':'是否在线',
@ -275,5 +275,11 @@ export default {
'传感器监测走势图':'传感器监测走势图', '传感器监测走势图':'传感器监测走势图',
'机械分厂设备列表':'机械分厂设备列表', '机械分厂设备列表':'机械分厂设备列表',
'设备状态总览':'设备状态总览', '设备状态总览':'设备状态总览',
'产品状态':'产品状态',
'产品数量':'产品数量',
'产品类型':'产品类型',
'产品信息':'产品信息',
'产品电机':'产品电机',
'产品传感器':'产品传感器',
} }
} }

View File

@ -20,7 +20,7 @@ const routes: Array<RouteRecordRaw> = [
{ {
path: "/Mechanics", path: "/Mechanics",
name: "Mechanics", name: "Mechanics",
component: () => import("../views/Mechanics/index.vue"), component: () => import("../views/Mechanics/indexNew.vue"),
}, },
{ {
path: "/demo", path: "/demo",

View File

@ -9,7 +9,7 @@
--> -->
<template> <template>
<div :style="{width:itemSize.width,height:itemSize.height}"> <div :style="{width:itemSize.width,height:itemSize.height}">
<border1 ref="refborder1" :title="t('messages.DevMotor')"> <border1 ref="refborder1" :title="t('messages.产品电机')">
<template v-slot> <template v-slot>
<div class="box" :key="keynum" :style="{width:boxSize.width,height:boxSize.height,position:'relative'}"> <div class="box" :key="keynum" :style="{width:boxSize.width,height:boxSize.height,position:'relative'}">
<div class="type"> <div class="type">

View File

@ -9,7 +9,7 @@
--> -->
<template> <template>
<div :style="{ width: itemSize.width, height: itemSize.height }"> <div :style="{ width: itemSize.width, height: itemSize.height }">
<border1 ref="refborder1" :title="t('messages.DevSensors')"> <border1 ref="refborder1" :title="t('messages.产品传感器')">
<template v-slot> <template v-slot>
<div class="box" :key="keynum" :style="{ width: boxSize.width, height: boxSize.height, position: 'relative' }"> <div class="box" :key="keynum" :style="{ width: boxSize.width, height: boxSize.height, position: 'relative' }">
<div class="type"> <div class="type">

View File

@ -217,7 +217,7 @@ watch(
// //
let originData=[ let originData=[
[t('messages.RackNum'),route.params.label], [t('messages.RackNum'),route.params.label],
[t('messages.DevName'),route.params.name], [t('messages.productName'),route.params.name],
[t('messages.SupplierSalesperson'),newVal.devInfo.partnerName], [t('messages.SupplierSalesperson'),newVal.devInfo.partnerName],
[t('messages.TradeType'),newVal.devInfo.tradeType], [t('messages.TradeType'),newVal.devInfo.tradeType],
[t('messages.ModelNo'),newVal.devInfo.productModel], [t('messages.ModelNo'),newVal.devInfo.productModel],
@ -229,7 +229,7 @@ watch(
[t('messages.ClientName'),newVal.devInfo.customerName], [t('messages.ClientName'),newVal.devInfo.customerName],
[t('messages.ClientSalesman'),newVal.devInfo.customerSalesman], [t('messages.ClientSalesman'),newVal.devInfo.customerSalesman],
] ]
originRef.value.setData(originData,t('messages.DevInfo')); originRef.value.setData(originData,t('messages.产品信息'));
let detailsData = []; let detailsData = [];

View File

@ -87,9 +87,9 @@ const setData = (val: any) => {
listdata.header = [ listdata.header = [
t('messages.SerialNum'), t('messages.SerialNum'),
t('messages.RackNum'), t('messages.RackNum'),
t('messages.DevName'), t('messages.productName'),
t('messages.ofLegion'), t('messages.ofLegion'),
t('messages.DevStatus'), t('messages.产品状态'),
t('messages.DebugProgress'), t('messages.DebugProgress'),
t('messages.deliveryDay'), t('messages.deliveryDay'),
]; ];

View File

@ -17,7 +17,7 @@
<i :class="value.data==1?'iconfont '+value.iconname+' online':'iconfont '+value.iconname+' noonline'"></i> <i :class="value.data==1?'iconfont '+value.iconname+' online':'iconfont '+value.iconname+' noonline'"></i>
<!-- <img src="../../../../assets/svg/gateway.svg" alt="" :class="value.data==1?' online':' noonline'"> --> <!-- <img src="../../../../assets/svg/gateway.svg" alt="" :class="value.data==1?' online':' noonline'"> -->
<h2>{{ props.title }}</h2> <h2>{{ props.title }}</h2>
<h2 class="devnum">{{t('messages.DevNum')}}:{{ value.num }}</h2> <h2 class="devnum">{{t('messages.产品数量')}}:{{ value.num }}</h2>
</div> </div>
</template> </template>
</border6> </border6>

View File

@ -24,13 +24,29 @@
<div class="rt-title">总体趋势图</div> <div class="rt-title">总体趋势图</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">近一周</el-radio-button>
<el-radio-button label="2" >近三</el-radio-button> <el-radio-button label="2">近一</el-radio-button>
<el-radio-button label="3" >近一年</el-radio-button> <el-radio-button label="3">近三月</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> <div class="math-content">
<el-row>
<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">最小值</el-col>
<el-col :span="4" class="math-title-color">平均值</el-col>
</el-row>
<el-row v-for="item in mathList">
<el-col :span="12" class="p-left10" style="display: flex;justify-content: start;align-items: center;">
<div :style="{'background':item.color,'width':'25px','height':'20px','margin-right':'5px'}"></div>
<text>{{ item.name }}</text>
</el-col>
<el-col :span="4">{{ item.max }}</el-col>
<el-col :span="4">{{ item.min }}</el-col>
<el-col :span="4">{{ item.avg }}</el-col>
</el-row>
</div>
<!-- 效益&效率 --> <!-- 效益&效率 -->
<div class="rb-title">效益&效率</div> <div class="rb-title">效益&效率</div>
<div class="rb-content"> <div class="rb-content">
@ -56,6 +72,12 @@ const mainChart = ref(null)
let chart = null let chart = null
let date = ref('1') let date = ref('1')
const colors = ['#5470C6', '#91CC75', '#EE6666']; const colors = ['#5470C6', '#91CC75', '#EE6666'];
//
let mathList = reactive([
{ color: '#5470C6', 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 }
])
function init() { function init() {
chart = proxy.$echarts.init(mainChart.value, 'dark'); chart = proxy.$echarts.init(mainChart.value, 'dark');
let option = { let option = {
@ -199,6 +221,7 @@ onMounted(() => {
font-size: 28px; font-size: 28px;
color: #fff; color: #fff;
} }
.rt-radio { .rt-radio {
position: absolute; position: absolute;
top: 96px; top: 96px;
@ -213,13 +236,17 @@ onMounted(() => {
top: 136px; top: 136px;
left: 1227px; left: 1227px;
} }
.math-content { .math-content {
position: absolute; position: absolute;
width: 555px; width: 555px;
height: 100px; height: 100px;
top: 418px; top: 418px;
left: 1271px; left: 1271px;
background: rgba(255, 255, 255, 0.4); display: flex;
flex-direction: column;
justify-content: space-around;
color: #fff;
} }
.rb-title { .rb-title {
@ -229,6 +256,7 @@ onMounted(() => {
font-size: 28px; font-size: 28px;
color: #fff; color: #fff;
} }
.rb-content { .rb-content {
position: absolute; position: absolute;
display: flex; display: flex;
@ -242,13 +270,23 @@ onMounted(() => {
} }
:deep(.progress .el-progress__text) { :deep(.progress .el-progress__text) {
font-weight: bold; font-weight: bold;
font-size: 30px !important; font-size: 30px !important;
} }
.progress-text { .progress-text {
font-size: 18px; font-size: 18px;
font-weight: bold; font-weight: bold;
margin-top: 5px; margin-top: 5px;
color: #fff; color: #fff;
} }
.p-left10 {
text-align: left;
box-sizing: border-box;
padding-left: 10px;
}
.math-title-color {
color: #025AE5;
}
</style> </style>

View File

@ -9,7 +9,7 @@
--> -->
<template> <template>
<div class="box"> <div class="box">
<div class="box-title">{{t('messages.DevStatus')}}</div> <div class="box-title">{{t('messages.产品状态')}}</div>
<div class="box-body"> <div class="box-body">
<div class="card"> <div class="card">
<div><b>{{ prop.data.counts}}</b>{{t('messages.units')}}</div> <div><b>{{ prop.data.counts}}</b>{{t('messages.units')}}</div>

View File

@ -25,7 +25,7 @@ const init = () => {
ringChart = proxy.$echarts.init(ringRef.value, 'dark') ringChart = proxy.$echarts.init(ringRef.value, 'dark')
let option = { let option = {
title: { title: {
text: t('messages.DevType'), text: t('messages.产品类型'),
show: true, show: true,
textStyle: { textStyle: {
color: "#fff", color: "#fff",

View File

@ -87,7 +87,7 @@ let legion: any = {
'15': '医防军团' '15': '医防军团'
} }
let scrollBoardConfig = reactive({ let scrollBoardConfig = reactive({
header: [t('messages.SerialNum'), t('messages.DevName'), t('messages.model'), t('messages.RackNum'), t('messages.type'), t('messages.InstallPhase'), t('messages.DevStatus'), t('messages.AssemblyGroup'), t('messages.electronicGroup'), t('messages.inspector'), t('messages.deliveryDay')], header: [t('messages.SerialNum'), t('messages.productName'), t('messages.model'), t('messages.RackNum'), t('messages.type'), t('messages.InstallPhase'), t('messages.产品状态'), t('messages.AssemblyGroup'), t('messages.electronicGroup'), t('messages.inspector'), t('messages.deliveryDay')],
headerBGC: 'rgb(52, 105, 243)', headerBGC: 'rgb(52, 105, 243)',
oddRowBGC: '#100c2a', oddRowBGC: '#100c2a',
evenRowBGC: '#100c2a', evenRowBGC: '#100c2a',