机械分厂设备新 接口调试

This commit is contained in:
hzz 2023-06-14 15:52:17 +08:00
parent 3f5189d292
commit 8884e04ff8
6 changed files with 264 additions and 211 deletions

View File

@ -29,3 +29,15 @@ export function gatcountsOfMachineryFactoryInStatusTime(){
export function gatdeviceStatusInfoMF(data:any){ export function gatdeviceStatusInfoMF(data:any){
return get('/device/deviceStatusInfoMF',data) return get('/device/deviceStatusInfoMF',data)
} }
/**newIndex */
//设备列表
export function reqDeviceTotelListMF(){
return get('/device/deviceTotelListMF')
}
//状态数量
export function reqDeviceTotelStatusMF() {
return get('/device/deviceTotelStatusMF')
}

View File

@ -12,16 +12,22 @@
<h2>{{ props.title }}</h2> <h2>{{ props.title }}</h2>
<div class="devItem-content"> <div class="devItem-content">
<div class="content-value" v-if="props.title == '设备总数'"> <div class="content-value" v-if="props.title == '设备总数'">
<h2>112</h2> <h2>{{ value.total }}</h2>
</div> </div>
<div class="content-value-cheijan " v-else> <div class="content-value-cheijan " v-else>
<el-row style="margin-top: 20px;"> <el-row>
<el-col :span="7"> <div class="chejian-online on-status">15在线</div></el-col> <el-col :span="7">
<div class="chejian-online on-status">{{ value.onLine }} <div>在线</div>
</div>
</el-col>
<el-col :span="17"></el-col> <el-col :span="17"></el-col>
</el-row> </el-row>
<el-row> <el-row>
<el-col :span="17"></el-col> <el-col :span="17"></el-col>
<el-col :span="7"><div class="chejian-offline on-status">15离线</div></el-col> <el-col :span="7">
<div class="chejian-offline on-status">{{ value.total - value.onLine }}<div>离线</div>
</div>
</el-col>
</el-row> </el-row>
</div> </div>
</div> </div>
@ -37,8 +43,8 @@ const props=defineProps({
default: '' default: ''
}, },
value: { value: {
type:Array, type: Object,
default:[] default: { onLine: 0, total: 0 }
} }
}) })
</script> </script>
@ -50,16 +56,19 @@ font-size: 18px;
padding-left: 20px; padding-left: 20px;
text-align: left; text-align: left;
} }
.devItem-box { .devItem-box {
width: 48%; width: 48%;
height: 30%; height: 30%;
} }
.devItem-content { .devItem-content {
width: 100%; width: 100%;
height: 90%; height: 75%;
display: flex; display: flex;
justify-content: flex-end; justify-content: flex-end;
} }
.content-value { .content-value {
width: 70%; width: 70%;
height: 100%; height: 100%;
@ -70,22 +79,27 @@ text-align: left;
border-image: linear-gradient(to right, #00D0FE, #2969E8) 1; border-image: linear-gradient(to right, #00D0FE, #2969E8) 1;
} }
.on-status { .on-status {
width: 50px; width: 50px;
font-size: 25px; font-size: 25px;
} }
.chejian-online { .chejian-online {
color: #7CFFB2; color: #7CFFB2;
} }
.chejian-offline { .chejian-offline {
color: #4992FF; color: #4992FF;
} }
.content-value-cheijan { .content-value-cheijan {
width: 70%; width: 70%;
height: 100%; height: 100%;
border-bottom: 2px solid; border-bottom: 2px solid;
border-image: linear-gradient(to right, #00D0FE, #2969E8) 1; border-image: linear-gradient(to right, #00D0FE, #2969E8) 1;
} }
.content-value-cheijan::after { .content-value-cheijan::after {
content: ''; content: '';
display: block; display: block;
@ -93,10 +107,10 @@ border-bottom: 2px dashed #2969E8;
transform: rotate(-45deg); transform: rotate(-45deg);
margin-top: -40%; margin-top: -40%;
} }
.content-value>h2 { .content-value>h2 {
display: block; display: block;
margin-top: 20px; margin-top: 20px;
font-size: 50px; font-size: 50px;
color: #64A1FC; color: #64A1FC;
} }</style>
</style>

View File

@ -96,6 +96,9 @@ const dvmouseleave = () => {
white-space: pre-wrap; white-space: pre-wrap;
text-overflow: none text-overflow: none
} }
:deep(.dv-scroll-board .rows .row-item) {
font-size: 16px;
}
</style> </style>
<style> <style>
.el-popper.tooltip-class{ .el-popper.tooltip-class{

View File

@ -2,15 +2,8 @@
<div :class="$style['container']"> <div :class="$style['container']">
<div class="header"> <div class="header">
<div class="title"> <div class="title">
<header2 <header2 ref="headerref" :width="'100%'" :height="'100px'" :title="t('messages.Mechanics')" :titleTip="[]"
ref="headerref" :typeFun="['AbnormalData', 'time']" :alarmType="['machinefactory']">
:width="'100%'"
:height="'100px'"
:title="t('messages.Mechanics')"
:titleTip="[]"
:typeFun="['AbnormalData', 'time']"
:alarmType="['machinefactory']"
>
</header2> </header2>
</div> </div>
</div> </div>
@ -23,12 +16,9 @@
<div style="width: 100%;height: 100%;"> <div style="width: 100%;height: 100%;">
<h2 class="module-header">设备总览</h2> <h2 class="module-header">设备总览</h2>
<div class="module-content"> <div class="module-content">
<DevOverview :title="'设备总数'" :value="[112]"></DevOverview> <DevOverview :title="'设备总数'" :value="{ onLine: facTotal.onLine, total: facTotal.total }"></DevOverview>
<DevOverview :title="'车间1'" :value="[null,12,12]"></DevOverview> <DevOverview :title="item.name" :value="{ onLine: item.onLine, total: item.total }"
<DevOverview :title="'车间2'" :value="[null,12,12]"></DevOverview> v-for="(item) in facList"></DevOverview>
<DevOverview :title="'车间3'" :value="[null,12,12]"></DevOverview>
<DevOverview :title="'车间4'" :value="[null,12,12]"></DevOverview>
<DevOverview :title="'车间5'" :value="[null,12,12]"></DevOverview>
</div> </div>
</div> </div>
</border13> </border13>
@ -82,9 +72,8 @@ import scrollBoard from "./components/scrollBoard.vue";
import gateway from "./components/gateway.vue"; import gateway from "./components/gateway.vue";
import { connectWebsocket, closeWebsocket } from "@/utils/websocket"; import { connectWebsocket, closeWebsocket } from "@/utils/websocket";
import { ElRow, ElCol } from "element-plus"; import { ElRow, ElCol } from "element-plus";
import { gatcountsOfMachineryFactoryInStatusTime } from "@/http/Mechanics";
import { useMechanicsStore } from "@/store/module/Mechanics"; import { useMechanicsStore } from "@/store/module/Mechanics";
import { gatewayOfMachineryFactory,gatcountsOfMachineryFactory } from "@/http/Mechanics"; import { gatewayOfMachineryFactory, gatcountsOfMachineryFactory, reqDeviceTotelListMF, reqDeviceTotelStatusMF } from "@/http/Mechanics";
import { useI18n } from "vue-i18n"; import { useI18n } from "vue-i18n";
let { t } = useI18n(); let { t } = useI18n();
const store = useMechanicsStore(); const store = useMechanicsStore();
@ -97,16 +86,24 @@ let devFaultTipData=ref([])
let devStatusTipData = ref([]) let devStatusTipData = ref([])
let ringData = ref([]) let ringData = ref([])
let scrollBoardConfig = reactive({ let scrollBoardConfig = reactive({
header: ['序号', '机架号', '设备名称', '所属车间','设备状态','稼动率', '故障率'], header: ['序号', '设备名称', '所属车间', '设备状态', '稼动率', '故障率'],
headerBGC: 'rgb(52, 105, 243)', headerBGC: 'rgb(52, 105, 243)',
oddRowBGC: '#100c2a', oddRowBGC: '#100c2a',
evenRowBGC: '#100c2a', evenRowBGC: '#100c2a',
rowNum: 10, rowNum: 10,
columnWidth: [80, 170, 120, 120, 120, 120, 120], columnWidth: [80, 290, 120, 120, 120, 120],
align: ['center', 'center', 'center', 'center', 'center', 'center', 'center'], align: ['center', 'center', 'center', 'center', 'center', 'center'],
data: [] data: []
}) })
let gatewayData = ref([]) let gatewayData = ref([])
//
let facList = ref([])
//
let facTotal = reactive({
total: 0,
onLine: 0,
offLine: 0
})
function getWebsocket(val) { function getWebsocket(val) {
@ -131,6 +128,7 @@ function errWebsocket(val) {
headerref.value ? headerref.value.HeadererrWebsocket(val) : ""; headerref.value ? headerref.value.HeadererrWebsocket(val) : "";
// console.log(val); // console.log(val);
} }
//
async function gatewayOfMachineryFactoryfun() { async function gatewayOfMachineryFactoryfun() {
let result: any = await gatewayOfMachineryFactory() let result: any = await gatewayOfMachineryFactory()
@ -140,19 +138,59 @@ async function gatewayOfMachineryFactoryfun(){
} }
} }
async function gatcountsOfMachineryFactoryfun(){ // async function gatcountsOfMachineryFactoryfun() {
let result:any = await gatcountsOfMachineryFactory() // let result: any = await gatcountsOfMachineryFactory()
// if (result.code == 200) {
// store.changegatewaynum(result.data)
// }
// }
//
async function reqDeviceTotelListMFfun() {
let result: any = await reqDeviceTotelListMF()
if (result.code == 200) { if (result.code == 200) {
store.changegatewaynum(result.data) scrollBoardConfig.data = result.data.map((item, index) => {
return [
index + 1,
item.name,
item.dept,
item.status == 'false' ? '离线' : '在线',
item.activation+'%',
item.failure+'%'
]
})
} }
} }
//
async function getDeviceTotelStatusMF() {
let result: any = await reqDeviceTotelStatusMF()
if (result.code == 200) {
facList.value = result.data.list
facTotal.total = result.data.total
facTotal.onLine = result.data.list.reduce((total, item) => {
return total + item.onLine
}, 0)
facTotal.offLine = facTotal.total - facTotal.onLine
ringData.value = [
{ name: '在线', value: facTotal.onLine },
{ name: '离线', value: facTotal.offLine }
]
}
}
onMounted(() => { onMounted(() => {
// let Timedombox=Timedom.value // let Timedombox=Timedom.value
window.document.title = t("messages.Mechanics"); window.document.title = t("messages.Mechanics");
setTimeout(() => { setTimeout(() => {
DevOverviewData.value = [{ title: '车间', value: [1, 2, 3] }] DevOverviewData.value = [{ title: '车间', value: [1, 2, 3] }]
devFaultTipData.value=[{label:'111111',devName:'富怡精密绣花机' ,status:'故障'}, devFaultTipData.value = [
{ label: '111111', devName: '富怡精密绣花机', status: '故障' },
{ label: '222222', devName: '富怡精密绣花机', status: '故障' }, { label: '222222', devName: '富怡精密绣花机', status: '故障' },
{ label: '333333', devName: '富怡精密绣花机', status: '故障' }, { label: '333333', devName: '富怡精密绣花机', status: '故障' },
{ label: '444444', devName: '富怡精密绣花机', status: '故障' }, { label: '444444', devName: '富怡精密绣花机', status: '故障' },
@ -172,52 +210,14 @@ onMounted(() => {
{ label: '555555', devName: '富怡精密绣花机', on: 111, off: 222, stop: 333 }, { label: '555555', devName: '富怡精密绣花机', on: 111, off: 222, stop: 333 },
{ label: '666666', devName: '富怡精密绣花机', on: 111, off: 222, stop: 333 }, { label: '666666', devName: '富怡精密绣花机', on: 111, off: 222, stop: 333 },
{ label: '777777', devName: '富怡精密绣花机', on: 111, off: 222, stop: 333 }] { label: '777777', devName: '富怡精密绣花机', on: 111, off: 222, stop: 333 }]
ringData.value=[{
value:120,
name:'在线',
},
{
value:120,
name:'离线',
}]
scrollBoardConfig.data=[[1,111111,'富怡绣花机123145','机加车间','在线','95%','1%'],
[2,111111,'富怡绣花机123145','机加车间','在线','95%','1%'],
[3,111111,'富怡绣花机123145','机加车间','在线','95%','1%'],
[4,111111,'富怡绣花机123145','机加车间','在线','95%','1%'],
[5,111111,'富怡绣花机123145','机加车间','在线','95%','1%'],
[6,111111,'富怡绣花机123145','机加车间','在线','95%','1%'],
[7,111111,'富怡绣花机123145','机加车间','在线','95%','1%'],
[8,111111,'富怡绣花机123145','机加车间','在线','95%','1%'],
[9,111111,'富怡绣花机123145','机加车间','在线','95%','1%'],
[10,111111,'富怡绣花机123145','机加车间','在线','95%','1%'],
[11,111111,'富怡绣花机123145','机加车间','在线','95%','1%'],
[12,111111,'富怡绣花机123145','机加车间','在线','95%','1%'],
[13,111111,'富怡绣花机123145','机加车间','在线','95%','1%'],
[14,111111,'富怡绣花机123145','机加车间','在线','95%','1%'],
[15,111111,'富怡绣花机123145','机加车间','在线','95%','1%'],
[16,111111,'富怡绣花机123145','机加车间','在线','95%','1%'],
[17,111111,'富怡绣花机123145','机加车间','在线','95%','1%']]
// gatewayData.value=[{
// name:'',
// status:'false'
// },{
// name:'',
// status:'false'
// },{
// name:'',
// status:'false'
// },{
// name:'',
// status:'false'
// },{
// name:'',
// status:'false'
// },]
}, 1000) }, 1000)
gatewayOfMachineryFactoryfun() gatewayOfMachineryFactoryfun()
gatcountsOfMachineryFactoryfun() // gatcountsOfMachineryFactoryfun()
//
getDeviceTotelStatusMF()
//
reqDeviceTotelListMFfun()
connectWebsocket(null, null, getWebsocket, errWebsocket); connectWebsocket(null, null, getWebsocket, errWebsocket);
}); });
@ -243,20 +243,24 @@ onUnmounted(() => {
align-items: center; align-items: center;
position: relative; position: relative;
} }
.title>h1 { .title>h1 {
font-size: 30px; font-size: 30px;
position: absolute; position: absolute;
top: 10px; top: 10px;
} }
.header { .header {
position: relative; position: relative;
} }
.header p { .header p {
position: absolute; position: absolute;
right: 50px; right: 50px;
bottom: 20px; bottom: 20px;
font-size: 20px; font-size: 20px;
} }
.module-header { .module-header {
width: 100%; width: 100%;
text-align: center; text-align: center;
@ -264,21 +268,25 @@ onUnmounted(() => {
font-size: 20px; font-size: 20px;
margin-bottom: 10px; margin-bottom: 10px;
} }
.module-content { .module-content {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
height: 98%; height: 98%;
width: 100%; width: 100%;
} }
.layout { .layout {
height: 100%; height: 100%;
} }
.flex-left { .flex-left {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
} }
.content { .content {
width: 100%; width: 100%;
--header: 100px; --header: 100px;
@ -290,9 +298,12 @@ width: 100%;
body { body {
/* --content:calc(100vh - var(--header)) */ /* --content:calc(100vh - var(--header)) */
overflow: hidden !important; overflow: hidden !important;
-ms-overflow-style: none; /* IE + Edge */ -ms-overflow-style: none;
scrollbar-width: none; /* Firefox */ /* IE + Edge */
scrollbar-width: none;
/* Firefox */
} }
::-webkit-scrollbar { ::-webkit-scrollbar {
display: none; display: none;
} }

View File

@ -44,7 +44,7 @@ function init() {
show: true, show: true,
textStyle: { textStyle: {
color: "#fff", color: "#fff",
fontSize: 20, fontSize: 18,
}, },
top: 5 top: 5
}, },

View File

@ -38,6 +38,19 @@ let errList = computed(() => {
item.name = item.name.split('车间')[0] item.name = item.name.split('车间')[0]
return item return item
}) })
if (arr.length>0) {
//name
let nameArr = []
arr = arr.filter(item=>{
if (nameArr.indexOf(item.name)===-1) {
nameArr.push(item.name)
return true
}else{
return false
}
})
}
return arr; return arr;
}) })
const borderColor = ["#E43961","#E43961"] const borderColor = ["#E43961","#E43961"]