Merge branch 'master' of https://codeup.aliyun.com/645deca397d94d909e439238/iotplatform_sourcecode/screenFront
This commit is contained in:
hzz
commit
e1ef7bcb4c
@ -1,5 +1,5 @@
|
||||
/*
|
||||
* @FilePath: \wwwd:\code\screenFront\src\store\module\Mechanics.ts
|
||||
* @FilePath: \code\gitscreenFront\src\store\module\Mechanics.ts
|
||||
* @Author: 王路平
|
||||
* @文件版本: V1.0.0
|
||||
* @Date: 2023-02-06 15:58:13
|
||||
@ -102,7 +102,11 @@ export const useMechanicsStore = defineStore(Names.Mechanics, {
|
||||
//需要使用return将数据抛出
|
||||
//getters内可相互使用计算结果
|
||||
//使用时可直接放入标签内<div>Index.方法()</div>
|
||||
getters: {},
|
||||
getters: {
|
||||
getmechanicsData(state){
|
||||
return state.mechanicsData
|
||||
}
|
||||
},
|
||||
//methods 可同步/异步，提交state
|
||||
//actions内获取state数据使用this
|
||||
// 使用方式
|
||||
|
||||
163
src/views/Mechanics/components/gateway.vue
Normal file
163
src/views/Mechanics/components/gateway.vue
Normal file
@ -0,0 +1,163 @@
|
||||
<!--
|
||||
* @FilePath: \code\gitscreenFront\src\views\Mechanics\components\gateway.vue
|
||||
* @Author: 王路平
|
||||
* @文件版本: V1.0.0
|
||||
* @Date: 2023-02-16 11:51:32
|
||||
* @Description:
|
||||
*
|
||||
* 版权信息 : 2023 by ${再登软件}, All Rights Reserved.
|
||||
-->
|
||||
<template>
|
||||
<div class="box" :style="{ width: '100%', height: '100%' }">
|
||||
|
||||
<div class="title-box" >
|
||||
<h2>{{ props.title }}</h2>
|
||||
<div class="colorTip">
|
||||
<div><i class="iconfont icon-beikongshuiwupingtaimenhu-tubiao_zhinengwangguan icon-blue"></i> {{t('messages.onLine')}}</div>
|
||||
<div style="color:#e43961"><i class="iconfont icon-beikongshuiwupingtaimenhu-tubiao_zhinengwangguan icon-red"></i>
|
||||
{{t('messages.offline')}}</div>
|
||||
</div>
|
||||
</div>
|
||||
<ul class="gatewaystatus">
|
||||
<li v-for="item in props.data" @click="clickBotton(item)">
|
||||
<i :class="JSON.parse(item.gateway)
|
||||
? 'iconfont icon-beikongshuiwupingtaimenhu-tubiao_zhinengwangguan online'
|
||||
: 'iconfont icon-beikongshuiwupingtaimenhu-tubiao_zhinengwangguan noonline'
|
||||
"></i>
|
||||
<h2 class="titlesize-name">{{ item.title+'车间' }}</h2>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { getCurrentInstance, onMounted, reactive, ref } from "vue";
|
||||
import border13 from "@/components/border/Border13.vue";
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import { useMechanicsStore } from "@/store/module/Mechanics";
|
||||
import { useRouter } from "vue-router";
|
||||
const router=useRouter()
|
||||
const store = useMechanicsStore();
|
||||
let {t} = useI18n();
|
||||
let props = defineProps<{
|
||||
title: string;
|
||||
data: any
|
||||
}>();
|
||||
const clickBotton=(item:any)=>{
|
||||
store.changePage(item.index)
|
||||
router.push({
|
||||
name:'Mechanicschild',
|
||||
params:{
|
||||
id:item.index
|
||||
}
|
||||
})
|
||||
}
|
||||
onMounted(() => { });
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
h2 {
|
||||
color: #fff;
|
||||
font-size: 20px;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 0 10px 0 10px;
|
||||
color: #fff;
|
||||
font-weight: 800;
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
.box {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.gatewaystatus {
|
||||
margin: auto;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.gatewaystatus>li {
|
||||
width: 50%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.gatewaystatus>li {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.noonline {
|
||||
font-size: 5rem;
|
||||
color: rgb(228, 57, 97);
|
||||
position: relative;
|
||||
/* top: -20px; */
|
||||
}
|
||||
|
||||
.online {
|
||||
font-size: 5rem;
|
||||
color: rgb(32, 174, 197);
|
||||
position: relative;
|
||||
/* top: -20px; */
|
||||
}
|
||||
|
||||
.colorTip {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.colorTip span {
|
||||
margin-right: 1rem;
|
||||
}
|
||||
|
||||
.colorTip>div {
|
||||
margin-right: 1rem;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.colorTip .icon-red {
|
||||
display: inline-block;
|
||||
/* background-color: #e43961; */
|
||||
/* border-radius: 1rem; */
|
||||
color: #e43961;
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
}
|
||||
|
||||
.colorTip .icon-blue {
|
||||
display: inline-block;
|
||||
/* background-color: #20aec5; */
|
||||
/* border-radius: 1rem; */
|
||||
color: #20aec5;
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
}
|
||||
|
||||
.titlesize-name {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
.title-box {
|
||||
padding: 10px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
}
|
||||
</style>
|
||||
104
src/views/Mechanics/components/scrollBoard.vue
Normal file
104
src/views/Mechanics/components/scrollBoard.vue
Normal file
@ -0,0 +1,104 @@
|
||||
<!--
|
||||
* @FilePath: \code\gitscreenFront\src\views\Mechanics\components\scrollBoard.vue
|
||||
* @Author: 王路平
|
||||
* @文件版本: V1.0.0
|
||||
* @Date: 2023-06-13 08:33:37
|
||||
* @Description:
|
||||
*
|
||||
* 版权信息 : 2023 by ${再登软件}, All Rights Reserved.
|
||||
-->
|
||||
<template>
|
||||
<div class="box">
|
||||
<div class="box-title">{{t('messages.LegionDevList')}}</div>
|
||||
<div class="box-body">
|
||||
<dv-scroll-board ref="devList" :config="prop.config" @mouseover="dvMouseover" @mouseend="dvmouseleave" :style="{
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
}" />
|
||||
<el-tooltip v-model:visible="visible" :content="tipcontent" placement="top" effect="light" trigger="click" popper-class="tooltip-class"
|
||||
virtual-triggering :virtual-ref="triggerRef" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang='ts'>
|
||||
import { getCurrentInstance, onMounted, reactive, ref } from "vue";
|
||||
import { devListType } from "@/type/InPlantProducts";
|
||||
import { useRouter } from "vue-router"
|
||||
import { useI18n } from 'vue-i18n'
|
||||
let {t} = useI18n();
|
||||
const prop = defineProps({
|
||||
config: Object,
|
||||
})
|
||||
const router = useRouter()
|
||||
//弹窗文本
|
||||
let tipcontent = ref(null)
|
||||
//弹窗显示与隐藏
|
||||
let visible = ref(false)
|
||||
//存储弹窗dom
|
||||
let triggerRef = ref(null)
|
||||
|
||||
/**
|
||||
* @函数功能: 鼠标移入组件方法
|
||||
* @param {*} value
|
||||
* @出口参数:
|
||||
* @函数备注:
|
||||
*/
|
||||
const dvMouseover = (value) => {
|
||||
if (value.toElement && value.toElement.innerHTML&&value.toElement.className == 'ceil') {
|
||||
triggerRef.value = value.toElement
|
||||
tipcontent.value = value.toElement.innerText
|
||||
visible.value = true
|
||||
}
|
||||
|
||||
};
|
||||
/**
|
||||
* @函数功能: 鼠标移出组件方法
|
||||
* @出口参数:
|
||||
* @函数备注:
|
||||
*/
|
||||
const dvmouseleave = () => {
|
||||
triggerRef.value = null
|
||||
tipcontent.value = null
|
||||
visible.value = false
|
||||
};
|
||||
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.box {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-around;
|
||||
}
|
||||
|
||||
.box-title {
|
||||
width: 100%;
|
||||
padding: 10px;
|
||||
font-size: 20px;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.box-body {
|
||||
width: 100%;
|
||||
height: 90%;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
:deep(.dv-scroll-board .rows .ceil) {
|
||||
overflow: auto;
|
||||
white-space: pre-wrap;
|
||||
text-overflow: none
|
||||
}
|
||||
</style>
|
||||
<style>
|
||||
.el-popper.tooltip-class{
|
||||
color: #fff !important;
|
||||
}
|
||||
</style>
|
||||
299
src/views/Mechanics/indexNew.vue
Normal file
299
src/views/Mechanics/indexNew.vue
Normal file
@ -0,0 +1,299 @@
|
||||
<template>
|
||||
<div :class="$style['container']">
|
||||
<div class="header">
|
||||
<div class="title">
|
||||
<header2
|
||||
ref="headerref"
|
||||
:width="'100%'"
|
||||
:height="'100px'"
|
||||
:title="t('messages.Mechanics')"
|
||||
:titleTip="[]"
|
||||
:typeFun="['AbnormalData', 'time']"
|
||||
:alarmType="['machinefactory']"
|
||||
>
|
||||
</header2>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="content" ref="Acontent">
|
||||
<el-row class="layout" :gutter="20">
|
||||
<el-col :span="7" class="flex-left">
|
||||
<div style="width: 100%; height: 68%;">
|
||||
<border13>
|
||||
<div style="width: 100%;height: 100%;">
|
||||
<h2 class="module-header">设备总览</h2>
|
||||
<div class="module-content">
|
||||
<DevOverview :title="'设备总数'" :value="[112]"></DevOverview>
|
||||
<DevOverview :title="'车间1'" :value="[null,12,12]"></DevOverview>
|
||||
<DevOverview :title="'车间2'" :value="[null,12,12]"></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>
|
||||
</border13>
|
||||
</div>
|
||||
<div style="width: 100%; height: 28%;">
|
||||
<border13>
|
||||
<div style="width: 98%;height: 100%;">
|
||||
<devFaultTip :title="'设备故障提醒'" :tipList="devFaultTipData"></devFaultTip>
|
||||
</div>
|
||||
</border13>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="10" class="flex-left">
|
||||
<div style="width: 100%; height: 18%;">
|
||||
<gateway :title="'物联网关状态'" :data="gatewayData"></gateway>
|
||||
</div>
|
||||
<div style="width: 100%; height: 78%;">
|
||||
<border13>
|
||||
<scrollBoard :config="scrollBoardConfig"></scrollBoard>
|
||||
</border13>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="7" class="flex-left">
|
||||
<div style="width: 100%; height: 48%;">
|
||||
<border13>
|
||||
<ringChart :data="ringData"></ringChart>
|
||||
</border13>
|
||||
</div>
|
||||
<div style="width: 100%; height: 48%;">
|
||||
<border13>
|
||||
<div style="width: 100%;height: 100%;">
|
||||
<devStatusTip :title="'设备状态累积时长'" :tipList="devStatusTipData"></devStatusTip>
|
||||
</div>
|
||||
</border13>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { nextTick, onMounted, onUnmounted, reactive, ref } from "vue";
|
||||
import header2 from "@/components/headerBox/header2.vue";
|
||||
import border13 from '@/components/border/Border13.vue'
|
||||
import DevOverview from "./components/DevOverview.vue";
|
||||
import devFaultTip from "./components/devFaultTip.vue";
|
||||
import devStatusTip from "./components/devStatusTip.vue";
|
||||
import ringChart from "./components/ringChart.vue";
|
||||
import scrollBoard from "./components/scrollBoard.vue";
|
||||
import gateway from "./components/gateway.vue";
|
||||
import { connectWebsocket, closeWebsocket } from "@/utils/websocket";
|
||||
import { ElRow, ElCol } from "element-plus";
|
||||
import { gatcountsOfMachineryFactoryInStatusTime } from "@/http/Mechanics";
|
||||
import { useMechanicsStore } from "@/store/module/Mechanics";
|
||||
import { gatewayOfMachineryFactory,gatcountsOfMachineryFactory } from "@/http/Mechanics";
|
||||
import { useI18n } from "vue-i18n";
|
||||
let { t } = useI18n();
|
||||
const store = useMechanicsStore();
|
||||
|
||||
let Acontent = ref();
|
||||
let headerref = ref();
|
||||
|
||||
let DevOverviewData=ref([])
|
||||
let devFaultTipData=ref([])
|
||||
let devStatusTipData=ref([])
|
||||
let ringData=ref([])
|
||||
let scrollBoardConfig = reactive({
|
||||
header: ['序号', '机架号', '设备名称', '所属车间','设备状态','稼动率', '故障率'],
|
||||
headerBGC: 'rgb(52, 105, 243)',
|
||||
oddRowBGC: '#100c2a',
|
||||
evenRowBGC: '#100c2a',
|
||||
rowNum: 10,
|
||||
columnWidth: [80, 170, 120, 120, 120, 120, 120],
|
||||
align: ['center', 'center', 'center', 'center', 'center', 'center', 'center'],
|
||||
data: []
|
||||
})
|
||||
let gatewayData=ref([])
|
||||
|
||||
|
||||
function getWebsocket(val) {
|
||||
headerref.value.HeadergetWebsocket(val);
|
||||
try {
|
||||
let data = JSON.parse(val);
|
||||
|
||||
if (data.type == "CountsOfMachineryFactoryInStatusTime") {
|
||||
store.changedevstatus(data.msg);
|
||||
}
|
||||
if (data.type == "gatewayMF") {
|
||||
store.changegateway(data.msg);
|
||||
gatewayData.value=store.getmechanicsData
|
||||
store.changegatewaynum(data.msg);
|
||||
// store.changePM(data.msg)
|
||||
}
|
||||
} catch (err) {
|
||||
console.log(err);
|
||||
}
|
||||
}
|
||||
function errWebsocket(val) {
|
||||
headerref.value ? headerref.value.HeadererrWebsocket(val) : "";
|
||||
// console.log(val);
|
||||
}
|
||||
async function gatewayOfMachineryFactoryfun(){
|
||||
let result:any = await gatewayOfMachineryFactory()
|
||||
|
||||
if(result.code==200){
|
||||
store.changegateway(result.data)
|
||||
gatewayData.value=store.getmechanicsData
|
||||
|
||||
}
|
||||
}
|
||||
async function gatcountsOfMachineryFactoryfun(){
|
||||
let result:any = await gatcountsOfMachineryFactory()
|
||||
|
||||
if(result.code==200){
|
||||
store.changegatewaynum(result.data)
|
||||
}
|
||||
}
|
||||
onMounted(() => {
|
||||
// let Timedombox=Timedom.value
|
||||
window.document.title = t("messages.Mechanics");
|
||||
setTimeout(()=>{
|
||||
DevOverviewData.value=[{title:'车间',value:[1,2,3]}]
|
||||
devFaultTipData.value=[{label:'111111',devName:'富怡精密绣花机' ,status:'故障'},
|
||||
{label:'222222',devName:'富怡精密绣花机' ,status:'故障'},
|
||||
{label:'333333',devName:'富怡精密绣花机' ,status:'故障'},
|
||||
{label:'444444',devName:'富怡精密绣花机' ,status:'故障'},
|
||||
{label:'555555',devName:'富怡精密绣花机' ,status:'故障'},
|
||||
{label:'666666',devName:'富怡精密绣花机' ,status:'故障'},
|
||||
{label:'777777',devName:'富怡精密绣花机' ,status:'故障'}]
|
||||
devStatusTipData.value=[{label:'111111',devName:'富怡精密绣花机' ,on:111,off:222,stop:333},
|
||||
{label:'222222',devName:'富怡精密绣花机' ,on:111,off:222,stop:333},
|
||||
{label:'333333',devName:'富怡精密绣花机' ,on:111,off:222,stop:333},
|
||||
{label:'444444',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:'777777',devName:'富怡精密绣花机' ,on:111,off:222,stop:333},{label:'111111',devName:'富怡精密绣花机' ,on:111,off:222,stop:333},
|
||||
{label:'222222',devName:'富怡精密绣花机' ,on:111,off:222,stop:333},
|
||||
{label:'333333',devName:'富怡精密绣花机' ,on:111,off:222,stop:333},
|
||||
{label:'444444',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:'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)
|
||||
|
||||
gatewayOfMachineryFactoryfun()
|
||||
gatcountsOfMachineryFactoryfun()
|
||||
connectWebsocket(null, null, getWebsocket, errWebsocket);
|
||||
});
|
||||
|
||||
onUnmounted(() => {
|
||||
closeWebsocket();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style module>
|
||||
.container {
|
||||
height: 1080px;
|
||||
width: 1920px;
|
||||
color: #20aec5;
|
||||
background-color: #100c2a;
|
||||
}
|
||||
</style>
|
||||
|
||||
<style scoped>
|
||||
.title {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
}
|
||||
.title > h1 {
|
||||
font-size: 30px;
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
}
|
||||
.header {
|
||||
position: relative;
|
||||
}
|
||||
.header p {
|
||||
position: absolute;
|
||||
right: 50px;
|
||||
bottom: 20px;
|
||||
font-size: 20px;
|
||||
}
|
||||
.module-header{
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
font-size: 20px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.module-content{
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
height: 98%;
|
||||
width: 100%;
|
||||
}
|
||||
.layout {
|
||||
height: 100%;
|
||||
}
|
||||
.flex-left{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
.content {
|
||||
width: 100%;
|
||||
--header: 100px;
|
||||
height: calc(1080px - var(--header));
|
||||
}
|
||||
</style>
|
||||
|
||||
<style>
|
||||
body {
|
||||
/* --content:calc(100vh - var(--header)) */
|
||||
overflow: hidden !important;
|
||||
-ms-overflow-style: none; /* IE + Edge */
|
||||
scrollbar-width: none; /* Firefox */
|
||||
}
|
||||
::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue
Block a user