昌昊项目大屏前端代码
This commit is contained in:
123@123.com
parent
87241457c8
commit
64548cc671
@ -1,8 +1,8 @@
|
||||
@font-face {
|
||||
font-family: "iconfont"; /* Project id 4404806 */
|
||||
src: url('iconfont.woff2?t=1719991936473') format('woff2'),
|
||||
url('iconfont.woff?t=1719991936473') format('woff'),
|
||||
url('iconfont.ttf?t=1719991936473') format('truetype');
|
||||
src: url('iconfont.woff2?t=1721977017018') format('woff2'),
|
||||
url('iconfont.woff?t=1721977017018') format('woff'),
|
||||
url('iconfont.ttf?t=1721977017018') format('truetype');
|
||||
}
|
||||
|
||||
.iconfont {
|
||||
@ -13,6 +13,10 @@
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
.icon-caijishebeixinxichaxun:before {
|
||||
content: "\e611";
|
||||
}
|
||||
|
||||
.icon-yuyin:before {
|
||||
content: "\e905";
|
||||
}
|
||||
|
||||
Binary file not shown.
Binary file not shown.
Binary file not shown.
BIN
src/assets/header/CHT.png
Normal file
BIN
src/assets/header/CHT.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 27 KiB |
BIN
src/assets/img/CHBJ.png
Normal file
BIN
src/assets/img/CHBJ.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 961 KiB |
584
src/components/headerBox/header3.vue
Normal file
584
src/components/headerBox/header3.vue
Normal file
@ -0,0 +1,584 @@
|
||||
<!--
|
||||
* @FilePath: header3.vue
|
||||
* @Author: zz
|
||||
* @Date: 2024-07-19 08:16:33
|
||||
* @LastEditors: Please set LastEditors
|
||||
* @LastEditTime: 2024-07-19 09:14:40
|
||||
* @Descripttion:
|
||||
-->
|
||||
<!--
|
||||
* @FilePath: \code\gitscreenFront\src\components\headerBox\header2.vue
|
||||
* @Author: 王路平
|
||||
* @文件版本: V1.0.0
|
||||
* @Date: 2023-02-16 11:04:06
|
||||
* @Description:
|
||||
*
|
||||
* 版权信息 : 2023 by ${再登软件}, All Rights Reserved.
|
||||
-->
|
||||
|
||||
<template>
|
||||
<div class="header2" :style="{ width: props.width, height: props.height }">
|
||||
<h1 :class="langJudge() == '简体中文' ? 'zh-title' : 'en-title'">
|
||||
{{ props.title }}
|
||||
</h1>
|
||||
<div class="slot">
|
||||
<div class="tip" style="display: flex">
|
||||
<span class="tipspan" v-for="item in props.titleTip">
|
||||
<div class="colortip" :style="{ backgroundColor: item.color }"></div>
|
||||
<span class="tipstring">{{ item.name }}</span></span
|
||||
>
|
||||
<slot></slot>
|
||||
</div>
|
||||
<!-- <div v-show="typeObj.comback" class="comeBack" @click="comeBackFun">
|
||||
<i class="iconfont icon-back"></i>
|
||||
</div> -->
|
||||
<div
|
||||
v-show="typeObj.AbnormalData"
|
||||
ref="AbnormalDataRef"
|
||||
class="AbnormalData"
|
||||
@click="AbnormalDataFun"
|
||||
>
|
||||
<dv-scroll-board
|
||||
class="dv-scroll-boardclass"
|
||||
ref="tipList"
|
||||
:config="listdata"
|
||||
style="width: 30rem; height: 50px"
|
||||
/>
|
||||
<el-badge :value="AbnormalNum" class="i-badge" :hidden="AbnormalNum == 0">
|
||||
<i
|
||||
:class="
|
||||
AbnormalNum > 0
|
||||
? 'iconfont icon-baojingxinxi Abnormal-icon-yellow'
|
||||
: 'iconfont icon-baojingxinxi'
|
||||
"
|
||||
></i>
|
||||
</el-badge>
|
||||
</div>
|
||||
<div v-show="typeObj.time" class="time">
|
||||
<p ref="Timedom">{{ timeHtml }}</p>
|
||||
</div>
|
||||
</div>
|
||||
<el-popover
|
||||
ref="popoverRef"
|
||||
:virtual-ref="AbnormalDataRef"
|
||||
:visible="Abnormalpopovervisible"
|
||||
trigger="click"
|
||||
width="600px"
|
||||
placement="bottom-start"
|
||||
virtual-triggering
|
||||
>
|
||||
<ul class="popoverBOX" ref="popoverliDom" v-click-outside="noClickAbnormalDataFun">
|
||||
<li class="popoverHeader">
|
||||
<!-- <span><i class="iconfont icon-lishijilu lishijilu"></i>历史记录</span> -->
|
||||
<el-button type="primary" :icon="Clock" text @click="showDialog"
|
||||
>历史记录</el-button
|
||||
>
|
||||
</li>
|
||||
<li v-for="item in powerlist" :key="item.deviceId">
|
||||
{{ item.context }}
|
||||
</li>
|
||||
<li class="lookdown" v-show="onloadlist">
|
||||
<span @click="clickNextPageAlarmList">{{ t("messages.加载更多") }}</span>
|
||||
</li>
|
||||
</ul>
|
||||
</el-popover>
|
||||
<HDialog
|
||||
:tableData="dialogdata"
|
||||
v-model:dialogTableVisible="dialogTableVisible"
|
||||
:dialogLoading="dialogLoading"
|
||||
@getDialogdatafun="getDialogdatafun"
|
||||
:type="AbnormalType.type"
|
||||
:total="dialogtotal"
|
||||
></HDialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import useNowTime from "@/hook/nowTime";
|
||||
import { ClickOutside as vClickOutside } from "element-plus";
|
||||
import { useRoute, useRouter } from "vue-router";
|
||||
import { devListType } from "@/type/InPlantProducts";
|
||||
import { getAlarmListData, getAlarmListHistoryData } from "@/http/index";
|
||||
import { onMounted, onUnmounted, reactive, ref, unref, watch, computed } from "vue";
|
||||
import { connectWebsocket, closeWebsocket } from "@/utils/websocket";
|
||||
import { useHeaderStore } from "@/store/components/header";
|
||||
import { getStoredLanguage } from "@/utils/languageStorage";
|
||||
import { useI18n } from "vue-i18n";
|
||||
import { Clock } from "@element-plus/icons-vue";
|
||||
import HDialog from "./dialog/headerDialog.vue";
|
||||
let { t } = useI18n();
|
||||
const storeheader = useHeaderStore();
|
||||
let { timeHtml } = useNowTime();
|
||||
const router = useRouter();
|
||||
//刷新数据
|
||||
let numkey = ref(0);
|
||||
let popoverkey = ref(0);
|
||||
//历史数据dom
|
||||
let AbnormalDataRef = ref();
|
||||
let popoverRef = ref();
|
||||
let tipList = ref();
|
||||
let popoverliDom = ref();
|
||||
//历史报警数据弹窗显示
|
||||
let Abnormalpopovervisible = ref(false);
|
||||
let AbnormalpopovervisibleCtrl = ref(false); //解决点击历史报警数据弹窗外部关闭再打开问题
|
||||
//dialog
|
||||
let dialogdata = ref([]);
|
||||
let dialogTableVisible = ref(false);
|
||||
let dialogLoading = ref(true);
|
||||
let dialogtotal = ref(0);
|
||||
let onloadlist = computed(() => {
|
||||
return storeheader.num > powerlist.length;
|
||||
});
|
||||
const listdata = reactive<devListType>({
|
||||
data: [],
|
||||
rowNum: 2,
|
||||
oddRowBGC: "#100C2A",
|
||||
evenRowBGC: "#100C2A",
|
||||
hoverPause: true,
|
||||
carousel: "page",
|
||||
waitTime: 3000,
|
||||
align: ["left"],
|
||||
});
|
||||
let AbnormalNum = ref(0);
|
||||
//弹窗历史数据
|
||||
let powerlist = reactive([]);
|
||||
let props = defineProps<{
|
||||
width: string;
|
||||
height: string;
|
||||
title: string;
|
||||
titleTip: any;
|
||||
typeFun: any[];
|
||||
alarmType: any[];
|
||||
}>();
|
||||
|
||||
window.document.title = props.title;
|
||||
const typeObj = reactive({
|
||||
comback: false,
|
||||
AbnormalData: false,
|
||||
time: false,
|
||||
});
|
||||
const AbnormalType = reactive({
|
||||
pageSize: 5,
|
||||
pageNum: 1,
|
||||
type: "",
|
||||
});
|
||||
let comeBackFun = () => {
|
||||
router.go(-1);
|
||||
};
|
||||
const changeAbnormalData = (val: any) => {
|
||||
tipList.value.updateRows(val.data, { ...val });
|
||||
};
|
||||
let AbnormalDataFun = () => {
|
||||
//该函数执行优先级低于noClickAbnormalDataFun
|
||||
//Abnormalpopovervisibled代表弹窗是否已经显示
|
||||
// 判断弹窗是否打开如果打开就关闭 关闭就打开
|
||||
if (Abnormalpopovervisible.value) {
|
||||
Abnormalpopovervisible.value = false;
|
||||
} else {
|
||||
//关闭情况下判断是否点击了非弹窗位置如果是则仍然关闭 否则打开
|
||||
if (AbnormalpopovervisibleCtrl.value) {
|
||||
Abnormalpopovervisible.value = false;
|
||||
} else {
|
||||
Abnormalpopovervisible.value = true;
|
||||
}
|
||||
}
|
||||
};
|
||||
let noClickAbnormalDataFun = () => {
|
||||
//该函数执行优先级高于AbnormalDataFun
|
||||
// 判断弹窗是否打开如果打开并且我点击了非弹窗位置则ctrl为true否则为false
|
||||
if (Abnormalpopovervisible.value) {
|
||||
AbnormalpopovervisibleCtrl.value = true;
|
||||
} else {
|
||||
AbnormalpopovervisibleCtrl.value = false;
|
||||
}
|
||||
|
||||
Abnormalpopovervisible.value ? (Abnormalpopovervisible.value = false) : "";
|
||||
};
|
||||
function typeStatus() {
|
||||
if (props.typeFun.length == 0) {
|
||||
return;
|
||||
}
|
||||
props.typeFun.forEach((res) => {
|
||||
for (let key in typeObj) {
|
||||
if (res == key) {
|
||||
typeObj[key] = true;
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
function langJudge() {
|
||||
let lang = getStoredLanguage();
|
||||
if (lang) {
|
||||
return lang;
|
||||
} else {
|
||||
return "简体中文";
|
||||
}
|
||||
}
|
||||
function showDialog() {
|
||||
if (dialogTableVisible.value == false) {
|
||||
getDialogdatafun({
|
||||
type: AbnormalType.type,
|
||||
pageSize: 10,
|
||||
pageNum: 1,
|
||||
});
|
||||
}
|
||||
Abnormalpopovervisible.value = false;
|
||||
dialogTableVisible.value = true;
|
||||
}
|
||||
async function getDialogdatafun(config) {
|
||||
dialogLoading.value = true;
|
||||
let result: any = await getAlarmListHistoryData(config);
|
||||
|
||||
if (result.code == 200) {
|
||||
dialogtotal.value = result.total;
|
||||
dialogdata.value = result.rows;
|
||||
dialogLoading.value = false;
|
||||
} else {
|
||||
setTimeout(() => {
|
||||
if (dialogLoading.value) {
|
||||
dialogLoading.value = false;
|
||||
}
|
||||
}, 0);
|
||||
}
|
||||
}
|
||||
//判断是否显示对应组件后所做操作
|
||||
watch(
|
||||
() => typeObj,
|
||||
(newVal, oldVal) => {
|
||||
if (newVal.AbnormalData) {
|
||||
AbnormalType.type = props.alarmType.join(",");
|
||||
getAlarmListDatafun();
|
||||
// connectWebsocket(null, null, getWebsocket, errWebsocket);
|
||||
setAlarmscrollBoardList();
|
||||
}
|
||||
},
|
||||
{ deep: true, flush: "post" }
|
||||
);
|
||||
//获取异常信息接口数据
|
||||
async function getAlarmListDatafun() {
|
||||
let result: any = await getAlarmListData(AbnormalType);
|
||||
|
||||
if (result.code == 200) {
|
||||
storeheader.setDataList(result);
|
||||
}
|
||||
}
|
||||
//单机显示更多历史报警数据
|
||||
function clickNextPageAlarmList() {
|
||||
// if(storeheader.num<=powerlist.length){
|
||||
// onloadlist.value=false
|
||||
// return
|
||||
// }
|
||||
AbnormalType.pageNum++;
|
||||
getAlarmListDatafun();
|
||||
}
|
||||
//接受历史报警数据
|
||||
watch(
|
||||
() => storeheader.AlarmpopoverList,
|
||||
(newVal, oldVal) => {
|
||||
newVal.forEach((res) => {
|
||||
powerlist.push(res);
|
||||
});
|
||||
},
|
||||
{ deep: true, flush: "post" }
|
||||
);
|
||||
//接受历史报警数据滚动效果栏
|
||||
watch(
|
||||
() => storeheader.AlarmscrollBoardList,
|
||||
(newVal, oldVal) => {
|
||||
// newVal.forEach(res=>{
|
||||
// let e=res.context.split('，')
|
||||
// listdata.data.push([e[0]])
|
||||
// listdata.data.push([e[1]])
|
||||
// })
|
||||
// changeAbnormalData(listdata)
|
||||
// numkey.value++
|
||||
},
|
||||
{ deep: true, flush: "post" }
|
||||
);
|
||||
let AlarmscrollTime = null;
|
||||
//每隔15秒钟替换一次组件数据进行轮播
|
||||
function setAlarmscrollBoardList() {
|
||||
let start = 0;
|
||||
let end = 4;
|
||||
|
||||
let i = 0;
|
||||
setTimeout(() => {
|
||||
storeheader.AlarmscrollBoardList.slice(0, 5).forEach((element) => {
|
||||
let e = element.context.split("，");
|
||||
listdata.data.push(...[[e[0]], [e[1]]]);
|
||||
i++;
|
||||
});
|
||||
|
||||
end = end + 5;
|
||||
start = i >= 5 ? 5 : storeheader.AlarmscrollBoardList.length - 1;
|
||||
start <= 0 ? (start = 0) : "";
|
||||
}, 1000);
|
||||
|
||||
AlarmscrollTime = setInterval(() => {
|
||||
if (i == 0) {
|
||||
listdata.data = [];
|
||||
}
|
||||
i = 0;
|
||||
if (storeheader.AlarmscrollBoardList.length == 0) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (storeheader.AlarmscrollBoardList.length - 1 < end) {
|
||||
end = storeheader.AlarmscrollBoardList.length - 1;
|
||||
}
|
||||
for (start; start <= end; start++) {
|
||||
// console.log(storeheader.AlarmscrollBoardList[start],start,end);
|
||||
// console.log(storeheader.AlarmscrollBoardList.length-1);
|
||||
let listcontent = storeheader.AlarmscrollBoardList[start]?.context.split("，");
|
||||
|
||||
listdata.data.push(...[[listcontent[0]], [listcontent[1]]]);
|
||||
}
|
||||
changeAbnormalData(listdata);
|
||||
numkey.value++;
|
||||
end = end + 5;
|
||||
//如果下次数据剩一个则只拿一条数据
|
||||
if (start == storeheader.AlarmscrollBoardList.length - 1) {
|
||||
// console.log('进入了2');
|
||||
start = storeheader.AlarmscrollBoardList.length - 1;
|
||||
end = storeheader.AlarmscrollBoardList.length - 1;
|
||||
}
|
||||
//如果剩余数据不足5个则拿出剩余数据
|
||||
if (
|
||||
end > storeheader.AlarmscrollBoardList.length - 1 &&
|
||||
start <= storeheader.AlarmscrollBoardList.length - 1
|
||||
) {
|
||||
// console.log('进入了3');
|
||||
end = storeheader.AlarmscrollBoardList.length - 1;
|
||||
}
|
||||
// 如果全部超出则从头拿
|
||||
if (
|
||||
start > storeheader.AlarmscrollBoardList.length - 1 &&
|
||||
end > storeheader.AlarmscrollBoardList.length - 1
|
||||
) {
|
||||
// console.log('进入了4',start,end,storeheader.AlarmscrollBoardList.length-1,storeheader.AlarmscrollBoardList);
|
||||
start = 0;
|
||||
end = 4;
|
||||
}
|
||||
}, 15000);
|
||||
}
|
||||
//接受历史报警数据量
|
||||
watch(
|
||||
() => storeheader.num,
|
||||
(newVal, oldVal) => {
|
||||
AbnormalNum.value = newVal;
|
||||
numkey.value++;
|
||||
},
|
||||
{ deep: true, flush: "post" }
|
||||
);
|
||||
function HeadergetWebsocket(val) {
|
||||
let data = null;
|
||||
try {
|
||||
data = JSON.parse(val);
|
||||
} catch (e) {
|
||||
console.log(e);
|
||||
return;
|
||||
}
|
||||
|
||||
if (
|
||||
props.alarmType.some((e) => {
|
||||
return e == data.type;
|
||||
})
|
||||
) {
|
||||
// console.log(props.alarmType);
|
||||
// console.log(props.alarmType.some(e=>{return e==data.type}));
|
||||
storeheader.changeDataList(data);
|
||||
}
|
||||
}
|
||||
function HeadererrWebsocket(val) {
|
||||
// console.log(val);
|
||||
}
|
||||
onMounted(() => {
|
||||
//判断需要显示出来的数据
|
||||
typeStatus();
|
||||
});
|
||||
onUnmounted(() => {
|
||||
// closeWebsocket();
|
||||
storeheader.resetData();
|
||||
AlarmscrollTime ? clearInterval(AlarmscrollTime) : "";
|
||||
});
|
||||
defineExpose({
|
||||
changeAbnormalData,
|
||||
HeadergetWebsocket,
|
||||
HeadererrWebsocket,
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
@import "@/assets/css/iconfont.css";
|
||||
.header2 {
|
||||
width: 100%;
|
||||
/* background-image: url(@/assets/header/CHT.png); */
|
||||
background-size: 100% 100%;
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.header2-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
/* height: 100%; */
|
||||
width: 100%;
|
||||
}
|
||||
h1 {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
}
|
||||
.zh-title {
|
||||
margin-top: 6px;
|
||||
font-size: 2.5rem;
|
||||
}
|
||||
.en-title {
|
||||
font-size: 2rem;
|
||||
max-width: 600px;
|
||||
height: 80px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
overflow: hidden;
|
||||
/* line-height: 80px; */
|
||||
}
|
||||
/* .header2 p {
|
||||
position: absolute;
|
||||
right: 50px;
|
||||
bottom: 20px;
|
||||
font-size: 20px;
|
||||
} */
|
||||
.slot {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 50px 10px 10px 10px;
|
||||
}
|
||||
|
||||
/* .red {
|
||||
background-color: rgb(228, 57, 97);
|
||||
}
|
||||
.blue {
|
||||
background-color: rgb(32, 174, 197);
|
||||
} */
|
||||
.colortip {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
border-radius: 8px;
|
||||
}
|
||||
.tipstring {
|
||||
font-size: 20px;
|
||||
color: #fff;
|
||||
}
|
||||
.tip {
|
||||
margin-top: 15px;
|
||||
}
|
||||
.tipspan {
|
||||
display: flex;
|
||||
margin-left: 10px;
|
||||
align-items: center;
|
||||
}
|
||||
.comeBack {
|
||||
position: absolute;
|
||||
/* width: 2rem;
|
||||
height: 2rem; */
|
||||
bottom: 10%;
|
||||
left: 1.5rem;
|
||||
font-size: 3rem;
|
||||
color: #fff;
|
||||
cursor: pointer;
|
||||
}
|
||||
.comeBack > i {
|
||||
font-size: 3rem;
|
||||
}
|
||||
.AbnormalData {
|
||||
position: absolute;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
/* width: 2rem;
|
||||
height: 2rem; */
|
||||
bottom: 20%;
|
||||
right: 1%;
|
||||
font-size: 3rem;
|
||||
color: #fff;
|
||||
}
|
||||
.AbnormalData:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
.AbnormalData > span {
|
||||
font-size: 1rem;
|
||||
}
|
||||
.popoverBOX {
|
||||
max-height: 15rem;
|
||||
font-size: 18px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
.popoverBOX li {
|
||||
padding: 10px 0 10px 0;
|
||||
}
|
||||
.lookdown {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #1c78c2;
|
||||
}
|
||||
.lookdown:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
.time {
|
||||
position: absolute;
|
||||
width: 350px;
|
||||
height: 2rem;
|
||||
bottom: 30%;
|
||||
left: 4.2rem;
|
||||
font-size: 25px;
|
||||
}
|
||||
.i-badge {
|
||||
width: 3rem;
|
||||
height: 3rem;
|
||||
}
|
||||
.i-badge > i {
|
||||
font-size: 3rem;
|
||||
position: relative;
|
||||
top: -5px;
|
||||
}
|
||||
/* .dv-scroll-board /deep/ .ceil {
|
||||
font-size: 1.2rem;
|
||||
} */
|
||||
.dv-scroll-boardclass :deep(.ceil) {
|
||||
font-size: 20px;
|
||||
}
|
||||
.el-popper.is-dark:deep() {
|
||||
background: #14274b !important;
|
||||
}
|
||||
.el-popover.el-popper:deep() {
|
||||
background: #14274b !important;
|
||||
}
|
||||
.Abnormal-icon-yellow {
|
||||
color: #ddb14f;
|
||||
}
|
||||
.lishijilu {
|
||||
font-size: 2rem;
|
||||
color: #fff;
|
||||
}
|
||||
.popoverHeader {
|
||||
padding: 0 !important;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
line-height: 1.5rem;
|
||||
}
|
||||
.popoverHeader span {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 5px;
|
||||
/* border-radius: 50px;
|
||||
background: linear-gradient(315deg, #404040, #4c4c4c); */
|
||||
/* box-shadow: -20px -20px 60px #3c3c3c, 20px 20px 60px #525252; */
|
||||
}
|
||||
</style>
|
||||
39
src/http/changHao/index.ts
Normal file
39
src/http/changHao/index.ts
Normal file
@ -0,0 +1,39 @@
|
||||
/*
|
||||
* @FilePath: index.ts
|
||||
* @Author: zz
|
||||
* @Date: 2024-07-29 08:13:59
|
||||
* @LastEditors: Please set LastEditors
|
||||
* @LastEditTime: 2024-07-29 16:15:35
|
||||
* @Descripttion:
|
||||
*/
|
||||
import {get,post} from "@/utils/http"
|
||||
|
||||
// 设备信息
|
||||
export function reqdevicebyid(data:any){
|
||||
return get('/socket/getdevicebyid/'+ data.id)
|
||||
}
|
||||
|
||||
// 耗电量
|
||||
export function reqtelectricity(data:any){
|
||||
return get('/socket/getelectricity/' + data.id)
|
||||
}
|
||||
|
||||
// 生产情况列表
|
||||
export function reqproinfo(data:any){
|
||||
return get('/socket/getproinfo/' + data.id)
|
||||
}
|
||||
|
||||
// 故障时长
|
||||
export function reqfaultinfo(data:any){
|
||||
return get('/socket/getfaultinfo/' + data.id)
|
||||
}
|
||||
|
||||
// 急停时长
|
||||
export function reqstopinfo(data:any){
|
||||
return get('/socket/getstopinfo/' + data.id)
|
||||
}
|
||||
|
||||
// 设备告警
|
||||
export function reqtalarm(data:any){
|
||||
return get('/socket/getalarm/' + data.id)
|
||||
}
|
||||
@ -378,6 +378,13 @@ const routes: Array<RouteRecordRaw> = [
|
||||
component: () => import("../views/Exhibition/Germany/loop.vue"),
|
||||
},
|
||||
|
||||
// 昌昊大屏
|
||||
{
|
||||
path:"/ChangHaoView_:id",
|
||||
name:"ChangHaoView",
|
||||
component: () => import("../views/ChangHaoView/index.vue"),
|
||||
|
||||
},
|
||||
|
||||
|
||||
|
||||
|
||||
28
src/views/ChangHaoView/components/Border.vue
Normal file
28
src/views/ChangHaoView/components/Border.vue
Normal file
@ -0,0 +1,28 @@
|
||||
<!--
|
||||
* @FilePath: Border.vue
|
||||
* @Author: zz
|
||||
* @Date: 2024-07-19 10:10:26
|
||||
* @LastEditors: Please set LastEditors
|
||||
* @LastEditTime: 2024-07-20 17:20:58
|
||||
* @Descripttion:
|
||||
-->
|
||||
<template>
|
||||
<div class="box" style="text-align: center">
|
||||
<slot></slot>
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts"></script>
|
||||
<style scoped>
|
||||
.box {
|
||||
background: linear-gradient(to top, #2667ab, #2667ab) left top no-repeat,
|
||||
/*上左*/ linear-gradient(to right, #2667ab, #2667ab) left top no-repeat,
|
||||
/*左上*/ linear-gradient(to left, #2667ab, #2667ab) right top no-repeat,
|
||||
/*上右*/ linear-gradient(to bottom, #2667ab, #2667ab) right top no-repeat,
|
||||
/*上右*/ linear-gradient(to left, #2667ab, #2667ab) left bottom no-repeat,
|
||||
/*下左*/ linear-gradient(to bottom, #2667ab, #2667ab) left bottom no-repeat,
|
||||
/*左下*/ linear-gradient(to top, #2667ab, #2667ab) right bottom no-repeat,
|
||||
/*下右*/ linear-gradient(to left, #2667ab, #2667ab) right bottom no-repeat; /*右下*/
|
||||
background-size: 2px 16px, 16px 2px, 2px 16px, 16px 2px;
|
||||
background-color: rgba(36, 56, 128, 0.04);
|
||||
}
|
||||
</style>
|
||||
105
src/views/ChangHaoView/components/Center.vue
Normal file
105
src/views/ChangHaoView/components/Center.vue
Normal file
@ -0,0 +1,105 @@
|
||||
<!--
|
||||
* @FilePath: Center.vue
|
||||
* @Author: zz
|
||||
* @Date: 2024-07-19 11:04:25
|
||||
* @LastEditors: Please set LastEditors
|
||||
* @LastEditTime: 2024-07-19 11:11:38
|
||||
* @Descripttion:
|
||||
-->
|
||||
<template>
|
||||
<Border class="center">
|
||||
<v-chart :option="options" class="line"></v-chart>
|
||||
</Border>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import Border from "./Border.vue";
|
||||
import {
|
||||
ref,
|
||||
onMounted,
|
||||
onUnmounted,
|
||||
getCurrentInstance,
|
||||
onUpdated,
|
||||
defineProps,
|
||||
computed,
|
||||
} from "vue";
|
||||
const { proxy } = getCurrentInstance() as any;
|
||||
|
||||
let lineRef = ref();
|
||||
let lineChart = null;
|
||||
|
||||
const props = defineProps({
|
||||
data: {
|
||||
type: Array,
|
||||
default: [],
|
||||
},
|
||||
});
|
||||
// 折线图配置
|
||||
|
||||
let options = computed(() => {
|
||||
return {
|
||||
tooltip: {
|
||||
trigger: "axis",
|
||||
},
|
||||
backgroundColor: "transparent",
|
||||
legend: {
|
||||
data: ["日耗电曲线"],
|
||||
icon: "none",
|
||||
right: "10px",
|
||||
textStyle: {
|
||||
color: "#ff7b12",
|
||||
fontSize: 20,
|
||||
fontWeight: "bold",
|
||||
},
|
||||
},
|
||||
grid: {
|
||||
left: "3%",
|
||||
right: "4%",
|
||||
bottom: "3%",
|
||||
containLabel: true,
|
||||
},
|
||||
xAxis: {
|
||||
type: "category",
|
||||
boundaryGap: false,
|
||||
// data: ["07-05", "07-06", "07-07", "07-08", "07-09", "07-10", "07-11"],
|
||||
data: props.data.x,
|
||||
},
|
||||
yAxis: {
|
||||
type: "value",
|
||||
axisLabel: {
|
||||
formatter: "{value} ",
|
||||
},
|
||||
splitLine: {
|
||||
show: false,
|
||||
lineStyle: {
|
||||
type: "dashed",
|
||||
},
|
||||
},
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: "日耗电曲线",
|
||||
type: "line",
|
||||
stack: "Total",
|
||||
lineStyle: {
|
||||
color: "#ff7b12",
|
||||
},
|
||||
// data: [120, 135, 101, 134, 90, 230, 210],
|
||||
data: props.data.y,
|
||||
symbol: "none",
|
||||
smooth: true,
|
||||
},
|
||||
],
|
||||
};
|
||||
});
|
||||
</script>
|
||||
<style scoped>
|
||||
.center {
|
||||
height: 30%;
|
||||
width: 94%;
|
||||
margin: 2% 3%;
|
||||
}
|
||||
.line {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
129
src/views/ChangHaoView/components/CenterBottom.vue
Normal file
129
src/views/ChangHaoView/components/CenterBottom.vue
Normal file
@ -0,0 +1,129 @@
|
||||
<!--
|
||||
* @FilePath: CenterBottom.vue
|
||||
* @Author: zz
|
||||
* @Date: 2024-07-19 11:04:25
|
||||
* @LastEditors: Please set LastEditors
|
||||
* @LastEditTime: 2024-07-19 11:08:37
|
||||
* @Descripttion:
|
||||
-->
|
||||
<template>
|
||||
<Border class="centerbottom">
|
||||
<h2 class="components-header">
|
||||
<DecorationFadeOut> {{ title }} </DecorationFadeOut>
|
||||
</h2>
|
||||
<ZdScrollBoard ref="devList" class="dev-list" :config="config" />
|
||||
</Border>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import Border from "./Border.vue";
|
||||
import {
|
||||
ref,
|
||||
onMounted,
|
||||
onUnmounted,
|
||||
getCurrentInstance,
|
||||
onUpdated,
|
||||
defineProps,
|
||||
computed,
|
||||
reactive,
|
||||
watch,
|
||||
} from "vue";
|
||||
const { proxy } = getCurrentInstance() as any;
|
||||
import DecorationFadeOut from "@/components/decoration/DecorationFadeOut.vue";
|
||||
import ZdScrollBoard from "@/components/data-view/index.vue";
|
||||
const prop = defineProps({
|
||||
title: {
|
||||
type: String,
|
||||
default: "",
|
||||
},
|
||||
data: {
|
||||
type: Object,
|
||||
default: () => ({
|
||||
list: [],
|
||||
}),
|
||||
},
|
||||
});
|
||||
|
||||
const devList = ref(null);
|
||||
let config = reactive({
|
||||
header: [
|
||||
'<span style="color:#AEEEFAFE;font-size:18px;">' + "程序名称" + "</span>",
|
||||
'<span style="color:#AEEEFAFE;font-size:18px;">' + "刀具号" + "</span>",
|
||||
'<span style="color:#AEEEFAFE;font-size:18px;">' + "加工数量" + "</span>",
|
||||
'<span style="color:#AEEEFAFE;font-size:18px;">' + "操作模式" + "</span>",
|
||||
'<span style="color:#AEEEFAFE;font-size:18px;">' + "运行模式" + "</span>",
|
||||
'<span style="color:#AEEEFAFE;font-size:18px;">' + "实际加工周期 " + "</span>",
|
||||
'<span style="color:#AEEEFAFE;font-size:18px;">' + "轴状态" + "</span>",
|
||||
'<span style="color:#AEEEFAFE;font-size:18px;">' + "实际加工时间" + "</span>",
|
||||
],
|
||||
|
||||
headerBGC: "rgba(0, 11, 18, 1)",
|
||||
oddRowBGC: "#0d1625",
|
||||
evenRowBGC: "#000F1D",
|
||||
wrap: [false, false, false, false, false],
|
||||
columnWidth: [130, 120, 130, 120, 130, 160, 130, 160],
|
||||
align: ["center", "center", "center", "center", "center", "center", "center", "center"],
|
||||
rowNum: 3,
|
||||
fontsize: "18px",
|
||||
waitTime: 3000,
|
||||
// data: computed(() => prop.data),
|
||||
});
|
||||
|
||||
const handleData = () => {
|
||||
let config_data = prop.data.map((item: any) => {
|
||||
let statusString;
|
||||
if (item.axisstatus === 0) {
|
||||
statusString = "***";
|
||||
} else if (item.axisstatus === 1) {
|
||||
statusString = "移动";
|
||||
} else if (item.axisstatus === 2) {
|
||||
statusString = "暂停";
|
||||
} else {
|
||||
// 可选：如果axisstatus不是0、1或2，你可以设置一个默认值或抛出错误
|
||||
statusString = "未知状态";
|
||||
}
|
||||
return [
|
||||
item.procedurename,
|
||||
item.knifenum,
|
||||
item.pronum,
|
||||
item.operate,
|
||||
item.run,
|
||||
item.machining + "min",
|
||||
statusString,
|
||||
item.processingtime + "s",
|
||||
];
|
||||
});
|
||||
console.log(config_data, "-------------");
|
||||
if (devList.value) {
|
||||
devList.value.updateRows(config_data, config);
|
||||
}
|
||||
};
|
||||
watch(
|
||||
() => prop.data,
|
||||
(newVal, oldVal) => {
|
||||
handleData();
|
||||
},
|
||||
{ deep: true }
|
||||
);
|
||||
onMounted(() => {
|
||||
// console.log(config_data);
|
||||
});
|
||||
</script>
|
||||
<style scoped>
|
||||
.centerbottom {
|
||||
height: 30%;
|
||||
width: 94%;
|
||||
margin: 2% 3%;
|
||||
}
|
||||
.components-header {
|
||||
font-size: 20px;
|
||||
margin-bottom: 20px;
|
||||
color: #00c7ebfc;
|
||||
}
|
||||
.dev-list {
|
||||
width: 100%;
|
||||
height: 75%;
|
||||
}
|
||||
:deep(.zd-scroll-board .rows .row-item) {
|
||||
font-size: 18px;
|
||||
}
|
||||
</style>
|
||||
270
src/views/ChangHaoView/components/CenterTop.vue
Normal file
270
src/views/ChangHaoView/components/CenterTop.vue
Normal file
@ -0,0 +1,270 @@
|
||||
<template>
|
||||
<Border class="centertop">
|
||||
<!-- <div ref="gaugeRef" id="gauge" style="width: 800px; height: 300px"></div> -->
|
||||
<v-chart class="chart" :option="option" style="width: 800px; height: 300px" />
|
||||
</Border>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import Border from "./Border.vue";
|
||||
import {
|
||||
ref,
|
||||
onMounted,
|
||||
onUnmounted,
|
||||
getCurrentInstance,
|
||||
onUpdated,
|
||||
defineProps,
|
||||
computed,
|
||||
} from "vue";
|
||||
const { proxy } = getCurrentInstance() as any;
|
||||
let gaugeRef = ref();
|
||||
let gaugeChart = null;
|
||||
|
||||
const props = defineProps({
|
||||
data: {
|
||||
type: Array,
|
||||
default: [],
|
||||
},
|
||||
});
|
||||
const option = computed(() => {
|
||||
return {
|
||||
tooltip: {
|
||||
formatter: "{a} <br/>{c} {b}",
|
||||
},
|
||||
backgroundColor: "transparent",
|
||||
series: [
|
||||
{
|
||||
name: "稼动率",
|
||||
type: "gauge",
|
||||
z: 3,
|
||||
min: 0,
|
||||
max: 100,
|
||||
radius: "85%",
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
width: 4,
|
||||
color: [
|
||||
[0.9, "#00b2b9"],
|
||||
[1, "#e60007"],
|
||||
],
|
||||
},
|
||||
},
|
||||
//指针
|
||||
pointer: {
|
||||
itemStyle: {
|
||||
color: "auto",
|
||||
},
|
||||
},
|
||||
axisTick: {
|
||||
distance: 1,
|
||||
length: 5, //长度
|
||||
splitNumber: 5, //数量
|
||||
lineStyle: { color: "#464646" }, //小刻度
|
||||
},
|
||||
//分隔线
|
||||
splitLine: {
|
||||
distance: -3,
|
||||
length: 14,
|
||||
lineStyle: {
|
||||
color: "auto",
|
||||
},
|
||||
},
|
||||
axisLabel: {
|
||||
color: "#fbffff",
|
||||
distance: 10,
|
||||
fontSize: 16,
|
||||
fontWeight: "bolder",
|
||||
},
|
||||
title: {
|
||||
offsetCenter: ["0", "90%"],
|
||||
textStyle: {
|
||||
fontWeight: "bolder",
|
||||
fontSize: 20,
|
||||
color: "#fbffff",
|
||||
},
|
||||
},
|
||||
detail: {
|
||||
formatter: "{value} %",
|
||||
// formatter(params) {
|
||||
// return `${params.name}${params.value}h`;
|
||||
// },
|
||||
color: "inherit",
|
||||
fontSize: 40,
|
||||
textStyle: {
|
||||
fontWeight: "bolder",
|
||||
},
|
||||
},
|
||||
// data: [
|
||||
// {
|
||||
// value: 45.9,
|
||||
// name: "稼动率",
|
||||
// },
|
||||
// ],
|
||||
data: [
|
||||
props.data.find((item) => item.name === "稼动率") || {
|
||||
value: 0,
|
||||
name: "稼动率",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
name: "主轴转速",
|
||||
type: "gauge",
|
||||
center: ["20%", "55%"],
|
||||
radius: "55%",
|
||||
min: 0,
|
||||
max: 100,
|
||||
endAngle: 45,
|
||||
splitNumber: 10,
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
width: 3,
|
||||
color: [
|
||||
[0.9, "#00b2b9"],
|
||||
[1, "#e60007"],
|
||||
],
|
||||
},
|
||||
},
|
||||
axisTick: {
|
||||
distance: 1,
|
||||
length: 5, //长度
|
||||
splitNumber: 5, //数量
|
||||
lineStyle: { color: "#464646" }, //小刻度
|
||||
},
|
||||
//分隔线
|
||||
splitLine: {
|
||||
distance: -2,
|
||||
length: 10,
|
||||
lineStyle: {
|
||||
color: "auto",
|
||||
},
|
||||
},
|
||||
axisLabel: {
|
||||
show: false,
|
||||
},
|
||||
title: {
|
||||
offsetCenter: ["0", "115%"],
|
||||
textStyle: {
|
||||
fontWeight: "bolder",
|
||||
fontSize: 20,
|
||||
color: "#fbffff",
|
||||
},
|
||||
},
|
||||
detail: {
|
||||
formatter: "{value}R/Min ",
|
||||
color: "inherit",
|
||||
fontSize: 20,
|
||||
textStyle: {
|
||||
fontWeight: "bolder",
|
||||
},
|
||||
},
|
||||
// data: [
|
||||
// {
|
||||
// value: 99.1,
|
||||
// name: "主轴转速",
|
||||
// },
|
||||
// ],
|
||||
data: [
|
||||
props.data.find((item) => item.name === "主轴转速") || {
|
||||
value: 0,
|
||||
name: "主轴转速",
|
||||
},
|
||||
],
|
||||
//指针
|
||||
pointer: {
|
||||
width: 5,
|
||||
itemStyle: {
|
||||
color: "auto",
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "进给速度",
|
||||
type: "gauge",
|
||||
center: ["80%", "55%"],
|
||||
radius: "55%",
|
||||
min: 0,
|
||||
max: 100,
|
||||
startAngle: 135,
|
||||
endAngle: -45,
|
||||
splitNumber: 7,
|
||||
axisLine: { lineStyle: { width: 8 } },
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
width: 3,
|
||||
color: [
|
||||
[0.9, "#00b2b9"],
|
||||
[1, "#e60007"],
|
||||
],
|
||||
},
|
||||
},
|
||||
axisTick: {
|
||||
distance: 1,
|
||||
length: 5, //长度
|
||||
splitNumber: 5, //数量
|
||||
lineStyle: { color: "#464646" }, //小刻度
|
||||
},
|
||||
//分隔线
|
||||
splitLine: {
|
||||
distance: -2,
|
||||
length: 10,
|
||||
lineStyle: {
|
||||
color: "auto",
|
||||
},
|
||||
},
|
||||
axisLabel: {
|
||||
show: false,
|
||||
},
|
||||
title: {
|
||||
offsetCenter: ["0", "115%"],
|
||||
textStyle: {
|
||||
fontWeight: "bolder",
|
||||
fontSize: 20,
|
||||
color: "#fbffff",
|
||||
},
|
||||
},
|
||||
detail: {
|
||||
formatter: "{value}MM/Min",
|
||||
color: "inherit",
|
||||
fontSize: 20,
|
||||
textStyle: {
|
||||
fontWeight: "bolder",
|
||||
},
|
||||
},
|
||||
// data: [
|
||||
// {
|
||||
// value: 45.5,
|
||||
// name: "进给速度",
|
||||
// },
|
||||
// ],
|
||||
data: [
|
||||
props.data.find((item) => item.name === "进给速度") || {
|
||||
value: 0,
|
||||
name: "进给速度",
|
||||
},
|
||||
],
|
||||
//指针
|
||||
pointer: {
|
||||
width: 5,
|
||||
itemStyle: {
|
||||
color: "auto",
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
};
|
||||
});
|
||||
</script>
|
||||
<style scoped>
|
||||
.centertop {
|
||||
height: 30%;
|
||||
width: 94%;
|
||||
margin: 2% 3%;
|
||||
}
|
||||
.gauge {
|
||||
width: 800px;
|
||||
height: 600px;
|
||||
}
|
||||
.chart {
|
||||
padding-left: 50px;
|
||||
}
|
||||
</style>
|
||||
29
src/views/ChangHaoView/components/LeftBottom.vue
Normal file
29
src/views/ChangHaoView/components/LeftBottom.vue
Normal file
@ -0,0 +1,29 @@
|
||||
<template>
|
||||
<Border class="leftbottom">
|
||||
<devStatusTip
|
||||
:title="'设备告警'"
|
||||
:tipList="tipList"
|
||||
:label="{ name: '设备名称', alarmcode: '告警代码', alarminfo: '提示' }"
|
||||
:per_view="4"
|
||||
></devStatusTip>
|
||||
</Border>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { ref, defineProps } from "vue";
|
||||
import Border from "./Border.vue";
|
||||
import devStatusTip from "./devStatusTip.vue";
|
||||
|
||||
const props = defineProps({
|
||||
tipList: {
|
||||
type: Array as () => Array<{ name: string; alarmcode: string; alarminfo: string }>,
|
||||
required: true,
|
||||
},
|
||||
});
|
||||
</script>
|
||||
<style scoped>
|
||||
.leftbottom {
|
||||
margin: 4%;
|
||||
height: 41%;
|
||||
/* width: 480px; */
|
||||
}
|
||||
</style>
|
||||
198
src/views/ChangHaoView/components/LeftTop.vue
Normal file
198
src/views/ChangHaoView/components/LeftTop.vue
Normal file
@ -0,0 +1,198 @@
|
||||
<template>
|
||||
<Border class="lefttop">
|
||||
<h2 class="components-header">
|
||||
<DecorationFadeOut> {{ title }} </DecorationFadeOut>
|
||||
</h2>
|
||||
<div class="chart-and-status">
|
||||
<div ref="ringRef" class="ring"></div>
|
||||
<!-- 新增的运行时间显示区域 -->
|
||||
<div class="status-display">
|
||||
<ul>
|
||||
<li v-for="(item, index) in data" :key="item.key" class="status-item">
|
||||
<span class="color-bar" :style="{ backgroundColor: colors[index] }"></span>
|
||||
<span class="label">{{ item.name }}:</span>
|
||||
<span class="value" :style="{ color: colors[index] }"
|
||||
>{{ item.value }}min</span
|
||||
>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</Border>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import Border from "./Border.vue";
|
||||
import * as echarts from "echarts";
|
||||
import {
|
||||
ref,
|
||||
onMounted,
|
||||
onUnmounted,
|
||||
getCurrentInstance,
|
||||
onUpdated,
|
||||
defineProps,
|
||||
computed,
|
||||
} from "vue";
|
||||
const { proxy } = getCurrentInstance() as any;
|
||||
import DecorationFadeOut from "@/components/decoration/DecorationFadeOut.vue";
|
||||
let ringRef = ref();
|
||||
let ringChart = null;
|
||||
|
||||
const prop = defineProps({
|
||||
title: {
|
||||
type: String,
|
||||
default: "",
|
||||
},
|
||||
data: {
|
||||
type: Array,
|
||||
default: [],
|
||||
},
|
||||
statusList: {
|
||||
type: Array as any,
|
||||
default: () => [],
|
||||
},
|
||||
});
|
||||
// 生成颜色数组的计算属性
|
||||
const colors = computed(() => {
|
||||
const baseColors = ["#44ce81", "#ff4f4e", "#a3a2a7", "#e9ac53", "#ff0700"]; // 示例颜色
|
||||
return prop.data.map((_, index) => {
|
||||
return baseColors[index % baseColors.length]; // 循环使用颜色数组
|
||||
});
|
||||
});
|
||||
// 环形图配置
|
||||
const init = () => {
|
||||
ringChart = proxy.$echarts.init(ringRef.value, "dark");
|
||||
let option = {
|
||||
tooltip: {
|
||||
trigger: "item",
|
||||
},
|
||||
color: ["#44ce81", "#ff4f4e", "#a3a2a7", "#e9ac53", "#ff0700"],
|
||||
backgroundColor: "transparent",
|
||||
legend: {
|
||||
show: false,
|
||||
// type: "scroll",
|
||||
// bottom: "0",
|
||||
// left: "center",
|
||||
// textStyle: {
|
||||
// color: "#fff",
|
||||
// fontSize: 16,
|
||||
// },
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: "",
|
||||
type: "pie",
|
||||
radius: ["40%", "70%"],
|
||||
center: ["50%", "45%"],
|
||||
label: {
|
||||
show: true,
|
||||
formatter(params) {
|
||||
return `${params.name}${params.value}min`;
|
||||
},
|
||||
fontSize: 18,
|
||||
fontWeight: 500,
|
||||
},
|
||||
labelLine: {
|
||||
show: true,
|
||||
},
|
||||
top: "5%",
|
||||
data: prop.data,
|
||||
},
|
||||
],
|
||||
};
|
||||
ringChart.setOption(option);
|
||||
};
|
||||
onUpdated(() => {
|
||||
ringChart.setOption({
|
||||
series: [
|
||||
{
|
||||
data: prop.data,
|
||||
},
|
||||
],
|
||||
});
|
||||
});
|
||||
|
||||
// 初始化 ECharts 实例
|
||||
onMounted(() => {
|
||||
init();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.lefttop {
|
||||
margin: 4%;
|
||||
height: 50%;
|
||||
/* width: 480px; */
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
align-content: space-around;
|
||||
}
|
||||
.components-header {
|
||||
font-size: 20px;
|
||||
margin-bottom: 20px;
|
||||
color: #00c7ebfc;
|
||||
}
|
||||
.chart-and-status {
|
||||
width: 100%;
|
||||
height: 90%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.ring {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.status-display {
|
||||
width: 90%;
|
||||
color: #f4f4f4;
|
||||
border-radius: 8px;
|
||||
max-width: 600px;
|
||||
margin: 10px auto;
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
ul {
|
||||
list-style-type: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
.color-bar {
|
||||
display: inline-block;
|
||||
width: 5px;
|
||||
height: 20px;
|
||||
margin-right: 1px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.status-item {
|
||||
display: flex;
|
||||
/* justify-content: space-between; */
|
||||
align-items: center;
|
||||
padding: 5px 0;
|
||||
border-bottom: 1px solid #88beed33;
|
||||
list-style-type: none;
|
||||
}
|
||||
|
||||
.label {
|
||||
color: #fff;
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
display: block;
|
||||
text-align: left !important; /* 使用!important确保左对齐设置被优先考虑 */
|
||||
padding-left: 20px;
|
||||
}
|
||||
|
||||
.value {
|
||||
font-size: 20px;
|
||||
margin-left: 40%;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.status-item:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
</style>
|
||||
229
src/views/ChangHaoView/components/Right.vue
Normal file
229
src/views/ChangHaoView/components/Right.vue
Normal file
@ -0,0 +1,229 @@
|
||||
<!--
|
||||
* @FilePath: Right.vue
|
||||
* @Author: zz
|
||||
* @Date: 2024-07-23 10:17:14
|
||||
* @LastEditors: Please set LastEditors
|
||||
* @LastEditTime: 2024-07-29 11:28:49
|
||||
* @Descripttion:
|
||||
-->
|
||||
<template>
|
||||
<Border class="righttop">
|
||||
<div class="box-left">
|
||||
<!-- <el-image style="width: 100%; height: 60%" :src="imgSrc" fit="contain"></el-image> -->
|
||||
<div class="iconfont icon-caijishebeixinxichaxun"></div>
|
||||
<div class="device-status">
|
||||
<div
|
||||
class="status-indicator"
|
||||
:style="{ background: status_color[prop.deviceStatus] }"
|
||||
></div>
|
||||
<span style="margin-left: 10px" :style="{ color: statusTextColor }">{{
|
||||
statusText
|
||||
}}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="box-right">
|
||||
<ul style="margin-bottom: 30px">
|
||||
<li v-for="(item, index) in deviceList" :key="item.key" class="device-item">
|
||||
<span class="label">{{ item.label }}  </span>
|
||||
<span class="value">{{ item.value }}</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</Border>
|
||||
|
||||
<Border class="rightcenter">
|
||||
<div class="box-item" style="width: 40%; padding-top: 30px;}">
|
||||
<span class="label">通讯状态:  </span
|
||||
><span class="value" :style="{ color: comTextColor }">{{ comvalue }}</span>
|
||||
</div>
|
||||
<div class="combox">
|
||||
<div class="top-item1" v-for="(item, index) in comList" :key="item.key">
|
||||
<span class="label">{{ item.label }}:   </span>
|
||||
<span class="value">{{ item.value + item.unit }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</Border>
|
||||
|
||||
<Border class="rightbottom">
|
||||
<div class="box-item" style="width: 40%; padding-top: 30px;}">
|
||||
<span class="label">实时电压、电流</span>
|
||||
</div>
|
||||
<div class="combox">
|
||||
<div class="top-item" v-for="(item, index) in CurList" :key="item.key">
|
||||
<span class="label">{{ item.label }}:   </span>
|
||||
<span class="value">{{ item.value + item.unit }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</Border>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import Border from "./Border.vue";
|
||||
import { defineComponent, ref, onMounted, computed } from "vue";
|
||||
const prop = defineProps({
|
||||
imgSrc: {
|
||||
type: String,
|
||||
default: "",
|
||||
},
|
||||
deviceList: {
|
||||
type: Array,
|
||||
default: [],
|
||||
},
|
||||
comList: {
|
||||
type: Array,
|
||||
default: [],
|
||||
},
|
||||
CurList: {
|
||||
type: Array,
|
||||
default: [],
|
||||
},
|
||||
communication: {
|
||||
type: Number,
|
||||
default: null,
|
||||
},
|
||||
deviceStatus: {
|
||||
type: Number,
|
||||
default: null,
|
||||
},
|
||||
});
|
||||
|
||||
// const deviceStatus = ref(1);
|
||||
// const communicationValue = ref(5);
|
||||
|
||||
const comvalue = computed(() => {
|
||||
switch (prop.communication) {
|
||||
case 5:
|
||||
return "正常";
|
||||
case 15:
|
||||
return "断线";
|
||||
default:
|
||||
return "未知状态";
|
||||
}
|
||||
});
|
||||
|
||||
const com_color = {
|
||||
"5": "#44ce81",
|
||||
"15": "#c1c1c1",
|
||||
};
|
||||
const comTextColor = computed(() => {
|
||||
return com_color[prop.communication] || "#000000";
|
||||
});
|
||||
|
||||
const status_color = {
|
||||
"0": "#FF6E76",
|
||||
"1": "#44ce81",
|
||||
};
|
||||
|
||||
const statusText = computed(() => {
|
||||
switch (prop.deviceStatus) {
|
||||
case 0:
|
||||
return "停止";
|
||||
case 1:
|
||||
return "运行";
|
||||
default:
|
||||
return "未知状态";
|
||||
}
|
||||
});
|
||||
const statusTextColor = computed(() => {
|
||||
return status_color[prop.deviceStatus] || "#000000";
|
||||
});
|
||||
|
||||
// onMounted(() => {
|
||||
// console.log( devStatus.value);
|
||||
// }
|
||||
</script>
|
||||
<style scoped>
|
||||
@import url("@/assets/css/iconfont/iconfont.css");
|
||||
.righttop {
|
||||
margin: 4%;
|
||||
height: 22%;
|
||||
width: 440px;
|
||||
display: flex; /* 启用 Flexbox 布局 */
|
||||
align-items: center; /* 如果需要，可以在垂直方向上居中对齐子元素 */
|
||||
/* 其他样式，如高度、宽度、边距等 */
|
||||
}
|
||||
.rightcenter {
|
||||
margin: 4%;
|
||||
height: 40%;
|
||||
width: 440px;
|
||||
}
|
||||
.rightbottom {
|
||||
margin: 4%;
|
||||
height: 27%;
|
||||
width: 440px;
|
||||
}
|
||||
.box-left {
|
||||
width: 30%;
|
||||
height: 100%;
|
||||
/* background-color: red; */
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
align-content: space-around;
|
||||
}
|
||||
.status-indicator {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
border-radius: 50%;
|
||||
background-color: red;
|
||||
}
|
||||
|
||||
.device-status {
|
||||
width: 80%;
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
color: #aeeefafe;
|
||||
box-sizing: border-box;
|
||||
padding-left: 10px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin-top: 20px;
|
||||
}
|
||||
.box-right {
|
||||
width: 70%;
|
||||
font-size: 20px;
|
||||
}
|
||||
.device-item {
|
||||
display: flex;
|
||||
padding: 8px 8px 8px 30px;
|
||||
list-style-type: none;
|
||||
}
|
||||
.value {
|
||||
color: #5abcfa;
|
||||
font-weight: 700;
|
||||
font-size: 18px;
|
||||
}
|
||||
.label {
|
||||
font-weight: 800;
|
||||
font-size: 18px;
|
||||
}
|
||||
/* .comvalue {
|
||||
color: #5abcfa;
|
||||
font-weight: 700;
|
||||
font-size: 20px;
|
||||
} */
|
||||
.combox {
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
padding-top: 10px;
|
||||
vertical-align: middle;
|
||||
.top-item {
|
||||
padding: 10px 10px 10px 20px;
|
||||
width: 40%;
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
.top-item1 {
|
||||
padding: 10px 0px 10px 0px;
|
||||
width: 50%;
|
||||
display: flex;
|
||||
}
|
||||
.iconfont {
|
||||
font-size: 80px;
|
||||
/* color: #00b2b9; */
|
||||
}
|
||||
</style>
|
||||
241
src/views/ChangHaoView/components/devStatusTip.vue
Normal file
241
src/views/ChangHaoView/components/devStatusTip.vue
Normal file
@ -0,0 +1,241 @@
|
||||
<!--
|
||||
* @FilePath: devStatusTip.vue
|
||||
* @Author: zz
|
||||
* @Date: 2024-07-20 17:06:42
|
||||
* @LastEditors: Please set LastEditors
|
||||
* @LastEditTime: 2024-07-20 17:57:53
|
||||
* @Descripttion:
|
||||
-->
|
||||
<!--
|
||||
* @FilePath: \code\gitscreenFront\src\views\Mechanics\components\devStatusTip.vue
|
||||
* @Author: 王路平
|
||||
* @文件版本: V1.0.0
|
||||
* @Date: 2023-06-12 08:52:40
|
||||
* @Description:
|
||||
*
|
||||
* 版权信息 : 2023 by ${再登软件}, All Rights Reserved.
|
||||
-->
|
||||
<template>
|
||||
<div style="height: 100%; width: 100%">
|
||||
<h2 class="components-header">
|
||||
<DecorationFadeOut> {{ title }} </DecorationFadeOut>
|
||||
</h2>
|
||||
<div class="components-content" :key="keynum">
|
||||
<swiper-container
|
||||
:slidesPerView="props.per_view"
|
||||
:loop="true"
|
||||
:initialSlide="0"
|
||||
:spaceBetween="0"
|
||||
direction="vertical"
|
||||
:autoplay="{
|
||||
delay: 3000,
|
||||
disableOnInteraction: false,
|
||||
}"
|
||||
autoHeight="true"
|
||||
observer="true"
|
||||
observeParents="true"
|
||||
@progress="onProgress"
|
||||
:loopAdditionalSlides="1"
|
||||
@slidechange="onSlideChange"
|
||||
v-if="props.tipList.length > 0"
|
||||
>
|
||||
<swiper-slide v-for="(res, index) in props.tipList" :key="res.id">
|
||||
<div class="itemclass">
|
||||
<el-row :gutter="5" class="row-flex">
|
||||
<el-col :span="2" class="col-flex" style="color: #fff; font-size: 18px">
|
||||
{{ index + 1 }}
|
||||
</el-col>
|
||||
<el-col
|
||||
:span="18"
|
||||
class="col-flex"
|
||||
style="
|
||||
flex-direction: column;
|
||||
font-size: 18px;
|
||||
color: #fff;
|
||||
align-items: flex-start;
|
||||
"
|
||||
>
|
||||
<p class="item-name">
|
||||
<span class="item-name-key">{{ label.name }}：</span
|
||||
><span class="item-name-value">{{ res.name }}</span>
|
||||
</p>
|
||||
<p style="margin-top: 10px 0">
|
||||
<span>{{ label.alarmcode }}：</span
|
||||
><span>{{ res.alarmcode }}</span>
|
||||
<span>{{ label.alarminfo }}：</span><span>{{ res.alarminfo }}</span>
|
||||
</p>
|
||||
</el-col>
|
||||
<el-col
|
||||
:span="4"
|
||||
class="col-flex"
|
||||
style="font-size: 25px; font-weight: bold"
|
||||
:style="{ color: compare[res.status] ? compare[res.status] : 'red' }"
|
||||
>
|
||||
{{ res.status }}
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</swiper-slide>
|
||||
<template
|
||||
v-if="
|
||||
props.tipList.length >= props.per_view &&
|
||||
props.tipList.length < props.per_view * 2
|
||||
"
|
||||
>
|
||||
<swiper-slide v-for="(res, index) in props.tipList" :key="res.id">
|
||||
<div class="itemclass">
|
||||
<el-row :gutter="5" class="row-flex">
|
||||
<el-col :span="2" class="col-flex" style="color: #fff; font-size: 18px">
|
||||
{{ index + 1 }}
|
||||
</el-col>
|
||||
<el-col
|
||||
:span="18"
|
||||
class="col-flex"
|
||||
style="
|
||||
flex-direction: column;
|
||||
font-size: 18px;
|
||||
color: #fff;
|
||||
align-items: flex-start;
|
||||
"
|
||||
>
|
||||
<p class="item-name">
|
||||
<span class="item-name-key">{{ label.name }}：</span
|
||||
><span class="item-name-value">{{ res.name }}</span>
|
||||
</p>
|
||||
<p style="margin-top: 10px 0">
|
||||
<span>{{ label.alarmcode }}：</span
|
||||
><span>{{ res.alarmcode }}</span>
|
||||
<span>{{ label.alarminfo }}：</span><span>{{ res.alarminfo }}</span>
|
||||
</p>
|
||||
</el-col>
|
||||
<el-col
|
||||
:span="4"
|
||||
class="col-flex"
|
||||
style="font-size: 25px; font-weight: bold"
|
||||
:style="{ color: compare[res.status] ? compare[res.status] : 'red' }"
|
||||
>
|
||||
{{ res.status }}
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</swiper-slide>
|
||||
</template>
|
||||
</swiper-container>
|
||||
<div
|
||||
v-else
|
||||
style="
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
justify-content: center;
|
||||
"
|
||||
>
|
||||
<el-empty :image-size="120" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { reactive, ref, watch } from "vue";
|
||||
import { register } from "swiper/element/bundle";
|
||||
import { useI18n } from "vue-i18n";
|
||||
import DecorationFadeOut from "@/components/decoration/DecorationFadeOut.vue";
|
||||
let { t } = useI18n();
|
||||
register();
|
||||
const props: any = defineProps({
|
||||
title: {
|
||||
type: String,
|
||||
default: "",
|
||||
},
|
||||
tipList: {
|
||||
type: Array,
|
||||
default: [{ name: "", alarmcode: "", alarminfo: "" }],
|
||||
},
|
||||
label: {
|
||||
type: Object,
|
||||
default: { name: "设备名称", alarmcode: "告警代码", alarminfo: "提示" },
|
||||
},
|
||||
per_view: {
|
||||
type: Number,
|
||||
default: 5,
|
||||
},
|
||||
});
|
||||
let compare = {
|
||||
进行中: "#83C710",
|
||||
未开始: "#E44610",
|
||||
未进行: "#E54711",
|
||||
故障: "#DA0F10",
|
||||
维修中: "#83C710",
|
||||
};
|
||||
let useSwiper: any = ref(null);
|
||||
let swiperRef = ref(null);
|
||||
let listVal = ref([]);
|
||||
let keynum = ref(0);
|
||||
watch(
|
||||
() => props.tipList,
|
||||
(val) => {
|
||||
keynum.value++;
|
||||
},
|
||||
{ deep: true }
|
||||
);
|
||||
|
||||
const onProgress = (e) => {};
|
||||
|
||||
const onSlideChange = (e) => {};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.components-header {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
color: #00c7ebfc;
|
||||
font-size: 20px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.components-content {
|
||||
height: 90%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.itemclass {
|
||||
display: flex;
|
||||
height: 100%;
|
||||
width: 120%;
|
||||
align-items: center;
|
||||
/* border-bottom: #0545a1 1px solid; */
|
||||
}
|
||||
|
||||
.row-flex {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.col-flex {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.swiper,
|
||||
swiper-container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: inline-block !important;
|
||||
}
|
||||
|
||||
.item-name {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
}
|
||||
.item-name-key {
|
||||
width: 92px;
|
||||
}
|
||||
.item-name-value {
|
||||
flex: 1;
|
||||
text-align: left;
|
||||
}
|
||||
</style>
|
||||
22
src/views/ChangHaoView/config.js
Normal file
22
src/views/ChangHaoView/config.js
Normal file
@ -0,0 +1,22 @@
|
||||
export const caozuomoshi = {
|
||||
'0': 'MDI',
|
||||
'1':'MEM',
|
||||
'2':'***',
|
||||
'3':'EDIT',
|
||||
'4':'HND',
|
||||
'5':'JOG',
|
||||
'6':'Teach in JOG',
|
||||
'7':'Teaxh in HaNDle ' ,
|
||||
'8':'INC',
|
||||
'9':'REF',
|
||||
'10':'RMF',
|
||||
}
|
||||
|
||||
export const yunxingmoshi ={
|
||||
'0': '****',
|
||||
'1':'STOP ',
|
||||
'2':'***',
|
||||
'3':'HOLD',
|
||||
'4':'START',
|
||||
'5':'MSTR',
|
||||
}
|
||||
330
src/views/ChangHaoView/index.vue
Normal file
330
src/views/ChangHaoView/index.vue
Normal file
@ -0,0 +1,330 @@
|
||||
<!--
|
||||
* @FilePath: index.vue
|
||||
* @Author: zz
|
||||
* @Date: 2024-07-18 17:18:08
|
||||
* @LastEditors: Please set LastEditors
|
||||
* @LastEditTime: 2024-07-20 17:23:36
|
||||
* @Descripttion:
|
||||
-->
|
||||
<template>
|
||||
<div class="container">
|
||||
<div class="header">
|
||||
<div class="title">
|
||||
<header3
|
||||
ref="headerref"
|
||||
:width="'100%'"
|
||||
:height="'100px'"
|
||||
:title="title"
|
||||
:titleTip="[]"
|
||||
:typeFun="['time', 'comback']"
|
||||
:alarmType="[]"
|
||||
></header3>
|
||||
</div>
|
||||
</div>
|
||||
<div class="border-box">
|
||||
<dv-border-box-1 class="box-left" style="width: 30%"
|
||||
><h2 class="title2">设备运行</h2>
|
||||
<LeftTop :data="ringData" :title="'设备实时状态'"></LeftTop>
|
||||
<LeftBottom :tipList="tipList"></LeftBottom>
|
||||
</dv-border-box-1>
|
||||
|
||||
<dv-border-box-1 class="box-center" style="width: 50%"
|
||||
><h2 class="title2">设备绩效</h2>
|
||||
<CenterTop :data="gaugeData"></CenterTop>
|
||||
<Center :data="lineData"></Center>
|
||||
<CenterBottom :data="prodData" :title="'当日生产情况'"></CenterBottom>
|
||||
</dv-border-box-1>
|
||||
|
||||
<dv-border-box-1 class="box-right" style="width: 30%"
|
||||
><h2 class="title2">设备信息</h2>
|
||||
<Right
|
||||
:deviceList="deviceList"
|
||||
:comList="comList"
|
||||
:CurList="CurList"
|
||||
:communication="communication"
|
||||
:deviceStatus="deviceStatus"
|
||||
></Right>
|
||||
</dv-border-box-1>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import {
|
||||
ref,
|
||||
reactive,
|
||||
onMounted,
|
||||
onUnmounted,
|
||||
getCurrentInstance,
|
||||
watch,
|
||||
onUpdated,
|
||||
computed,
|
||||
} from "vue";
|
||||
import header3 from "./../../components/headerBox/header3.vue";
|
||||
import LeftTop from "./components/LeftTop.vue";
|
||||
import LeftBottom from "./components/LeftBottom.vue";
|
||||
import CenterTop from "./components/CenterTop.vue";
|
||||
import { useRoute } from "vue-router";
|
||||
import Center from "./components/Center.vue";
|
||||
import CenterBottom from "./components/CenterBottom.vue";
|
||||
import Right from "./components/Right.vue";
|
||||
import {
|
||||
reqdevicebyid,
|
||||
reqtelectricity,
|
||||
reqproinfo,
|
||||
reqfaultinfo,
|
||||
reqstopinfo,
|
||||
reqtalarm,
|
||||
} from "@/http/changHao";
|
||||
import { caozuomoshi, yunxingmoshi } from "./config.js";
|
||||
import { connectWebsocket, closeWebsocket } from "@/utils/websocket";
|
||||
let route = useRoute();
|
||||
let device_id = route.params.id;
|
||||
// console.log(device_id, "device_id");
|
||||
let timer = null;
|
||||
let devnum = reactive({
|
||||
on: 0,
|
||||
off: 0,
|
||||
wait: 0,
|
||||
});
|
||||
let title = ref("设备云眼");
|
||||
let ringData = ref([
|
||||
{ key: "a046", name: "运行时长", value: "5" },
|
||||
{ key: "a036", name: "故障时长", value: "5" },
|
||||
{ key: "a044", name: "停机时长", value: "5" },
|
||||
{ key: "idletime", name: "空闲时长", value: "5" },
|
||||
{ key: "stoptime", name: "急停时长", value: "5" },
|
||||
]);
|
||||
|
||||
// let deviceList = ref([]);
|
||||
// let comList = ref([]);
|
||||
// let CurList = ref([]);
|
||||
let communication = ref(5);
|
||||
let deviceStatus = ref(0);
|
||||
|
||||
let deviceList = ref([
|
||||
{ key: "devicenum", label: "设备编号", value: " F-20240723456111" },
|
||||
{ key: "serialnumber", label: "设备序列号", value: "iFc023456789154" },
|
||||
{ key: "description", label: "设备描述", value: "1600立车" },
|
||||
{ key: "modelnumber", label: "设备型号", value: "Series" },
|
||||
]);
|
||||
function getData() {
|
||||
setTimeout(() => {
|
||||
prodData.value = [
|
||||
{
|
||||
procedurename: "0",
|
||||
knifenum: "0",
|
||||
pronum: "0",
|
||||
operate: "0",
|
||||
run: "0",
|
||||
machining: "1.0",
|
||||
axisstatus: 0,
|
||||
processingtime: "0",
|
||||
},
|
||||
];
|
||||
}, 0);
|
||||
}
|
||||
const comList = ref([
|
||||
{ key: "a017", label: "主轴伺服温度", unit: "℃", value: "E-2" },
|
||||
{ key: "a082", label: "累计待机时长", unit: "分钟", value: "iF" },
|
||||
{ key: "a021", label: "X轴DC电压", unit: "V", value: "16" },
|
||||
{ key: "a085", label: "累计上电时长", unit: "分钟", value: "Ser" },
|
||||
{ key: "a022", label: "Y轴DC电压", unit: "V", value: "E-2" },
|
||||
{ key: "a006", label: "主轴转速", unit: "R/min", value: "iF" },
|
||||
{ key: "a023", label: "Z轴DC电压", unit: "V", value: "16" },
|
||||
{ key: "a007", label: "进给速度", unit: "mm/min", value: "589" },
|
||||
{ key: "a083", label: "累计故障时长", unit: "秒", value: "789" },
|
||||
{ key: "a084", label: "累计运行时长", unit: "分钟", value: "524" },
|
||||
]);
|
||||
const CurList = ref([
|
||||
{ key: "aphasev", label: "A相电压", unit: "V", value: "6.0" },
|
||||
{ key: "aphasea", label: "A相电流", unit: "A", value: "8" },
|
||||
{ key: "bphasev", label: "B相电压", unit: "V", value: "2" },
|
||||
{ key: "bphasea", label: "B相电流", unit: "A", value: "3" },
|
||||
{ key: "cphasev", label: "C相电压", unit: "V", value: "5" },
|
||||
{ key: "cphasea", label: "C相电流", unit: "A", value: "4" },
|
||||
]);
|
||||
// }
|
||||
|
||||
// 模设备告警数据
|
||||
const tipList = ref([{ name: "设备A", alarmcode: "001", alarminfo: "温度过高" }]);
|
||||
// 仪表盘数据
|
||||
let gaugeData = ref([
|
||||
{ key: "utilizationRate", name: "稼动率", value: "46.9" },
|
||||
{ key: "a006", name: "主轴转速", value: "91.1" },
|
||||
{ key: "a007", name: "进给速度", value: "31.5" },
|
||||
]);
|
||||
|
||||
// 折线图数据日耗电曲线
|
||||
let lineData = ref({
|
||||
y: [120, 135, 101, 134, 90, 230, 210],
|
||||
x: ["07-05", "07-06", "07-07", "07-08", "07-09", "07-10", "07-11"],
|
||||
});
|
||||
// 生产情况数据
|
||||
let prodData = ref([]);
|
||||
let deviceinfo = ref({});
|
||||
|
||||
// 设备信息接口数据
|
||||
function getdevicebyid() {
|
||||
reqdevicebyid({ id: device_id }).then((res: any) => {
|
||||
if (res.code == 0) {
|
||||
title.value = res.data.name;
|
||||
deviceList.value = [
|
||||
{ key: "devicenum", label: "设备编号", value: res.data.devicenum },
|
||||
{ key: "serialnumber", label: "设备序列号", value: res.data.serialnumber },
|
||||
{ key: "description", label: "设备描述", value: res.data.description },
|
||||
{ key: "modelnumber", label: "设备型号", value: res.data.modelnumber },
|
||||
];
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
//耗电量接口
|
||||
function getelectricity() {
|
||||
reqtelectricity({ id: device_id }).then((res: any) => {
|
||||
if (res.code == 0) {
|
||||
lineData.value.x = res.data.x;
|
||||
lineData.value.y = res.data.y;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// 生产情况接口
|
||||
// function getproinfo() {
|
||||
// reqproinfo({ id: device_id }).then((res: any) => {
|
||||
// if (res.code == 0) {
|
||||
// prodData.value = res.data;
|
||||
// }
|
||||
// });
|
||||
// }
|
||||
// 设备告警接口
|
||||
function getalarm() {
|
||||
reqtalarm({ id: device_id }).then((res: any) => {
|
||||
if (res.code == 0) {
|
||||
tipList.value = res.data;
|
||||
}
|
||||
});
|
||||
}
|
||||
// 故障时长接口
|
||||
function getstopinfo() {
|
||||
reqstopinfo({ id: device_id }).then((res: any) => {
|
||||
if (res.code == 0) {
|
||||
ringData.value = ringData.value.map((item) => {
|
||||
if (item.key == "a036") {
|
||||
item.value = res.data.alltime;
|
||||
}
|
||||
if (item.key == "stoptime") {
|
||||
item.value = res.data.allstoptime;
|
||||
}
|
||||
return item;
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
let a036 = 0;
|
||||
//socket
|
||||
function getWebsocket(val) {
|
||||
try {
|
||||
let data = JSON.parse(val);
|
||||
if (data.type == "deviceinfo" && data.msg.id == device_id) {
|
||||
let obj = data.msg;
|
||||
if (obj.a036 != a036) {
|
||||
getalarm();
|
||||
a036 = obj.a036;
|
||||
}
|
||||
// 运行状态
|
||||
ringData.value = ringData.value.map((item) => {
|
||||
item.value = obj[item.key];
|
||||
// item.key
|
||||
return item;
|
||||
});
|
||||
// 仪表盘
|
||||
gaugeData.value = gaugeData.value.map((item) => {
|
||||
item.value = obj[item.key];
|
||||
return item;
|
||||
});
|
||||
// 当日生产情况
|
||||
prodData.value = [
|
||||
{
|
||||
procedurename: obj.a039,
|
||||
knifenum: obj.a008,
|
||||
pronum: obj.a005,
|
||||
operate: caozuomoshi[obj.a032] || "未知状态",
|
||||
run: yunxingmoshi[obj.a033] || "未知状态",
|
||||
machining: obj.cycletimeInMinutes,
|
||||
axisstatus: obj.a034,
|
||||
processingtime: obj.a048,
|
||||
},
|
||||
];
|
||||
// 通讯状态
|
||||
communication.value = obj.a041;
|
||||
|
||||
let tempcomList = comList.value.map((item) => {
|
||||
item.value = obj[item.key];
|
||||
return item;
|
||||
});
|
||||
comList.value = tempcomList;
|
||||
|
||||
// 设备状态
|
||||
deviceStatus.value = obj.a038;
|
||||
// 电压电流
|
||||
}
|
||||
if (data.type == "electinfo" && data.msg.id == device_id) {
|
||||
let obj = data.msg;
|
||||
|
||||
CurList.value = CurList.value.map((item) => {
|
||||
item.value = obj[item.key];
|
||||
return item;
|
||||
});
|
||||
}
|
||||
} catch (err) {
|
||||
console.log(err);
|
||||
}
|
||||
}
|
||||
function errWebsocket(val) {
|
||||
// console.log(val);
|
||||
}
|
||||
onMounted(() => {
|
||||
getdevicebyid();
|
||||
getelectricity();
|
||||
// getData();
|
||||
// getproinfo();
|
||||
getalarm();
|
||||
getstopinfo();
|
||||
timer = setInterval(() => {
|
||||
getstopinfo();
|
||||
getalarm();
|
||||
}, 1800000);
|
||||
connectWebsocket(null, null, getWebsocket, errWebsocket);
|
||||
});
|
||||
onUnmounted(() => {
|
||||
clearInterval(timer);
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.container {
|
||||
height: 1080px;
|
||||
width: 1920px;
|
||||
color: #ffffff;
|
||||
background: url("./../../assets/img/CHBJ.png") no-repeat center center / 100% 100%;
|
||||
background-color: #0e0e0e;
|
||||
position: relative;
|
||||
}
|
||||
.header {
|
||||
height: 100px;
|
||||
width: 1920px;
|
||||
}
|
||||
.border-box {
|
||||
width: 100%;
|
||||
height: 90%;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
.title2 {
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue
Block a user