昌昊项目大屏前端代码
This commit is contained in:
123@123.com
parent
87241457c8
commit
64548cc671
@ -1,8 +1,8 @@
|
|||||||
@font-face {
|
@font-face {
|
||||||
font-family: "iconfont"; /* Project id 4404806 */
|
font-family: "iconfont"; /* Project id 4404806 */
|
||||||
src: url('iconfont.woff2?t=1719991936473') format('woff2'),
|
src: url('iconfont.woff2?t=1721977017018') format('woff2'),
|
||||||
url('iconfont.woff?t=1719991936473') format('woff'),
|
url('iconfont.woff?t=1721977017018') format('woff'),
|
||||||
url('iconfont.ttf?t=1719991936473') format('truetype');
|
url('iconfont.ttf?t=1721977017018') format('truetype');
|
||||||
}
|
}
|
||||||
|
|
||||||
.iconfont {
|
.iconfont {
|
||||||
@ -13,6 +13,10 @@
|
|||||||
-moz-osx-font-smoothing: grayscale;
|
-moz-osx-font-smoothing: grayscale;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.icon-caijishebeixinxichaxun:before {
|
||||||
|
content: "\e611";
|
||||||
|
}
|
||||||
|
|
||||||
.icon-yuyin:before {
|
.icon-yuyin:before {
|
||||||
content: "\e905";
|
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"),
|
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