展会设备 update
This commit is contained in:
hzz
parent
9aaf1c0102
commit
e3a482733c
@ -7,4 +7,7 @@ export function getCismaList(){
|
||||
|
||||
export function getFiveList(){
|
||||
return get('/cisma/getFiveList')
|
||||
}
|
||||
export function getTopDevice(){
|
||||
return get('/cisma/getTopDevice')
|
||||
}
|
||||
@ -22,50 +22,40 @@ export const useMicroExhibitionStore = defineStore(Names.MicroExhibition, {
|
||||
devlist: [],
|
||||
devnum: { all: 17, wait: 7, off: 3, on: 7 },
|
||||
caijian: {
|
||||
'value': [ //'设备名称', '设备编码', '稼动率', '状态' //0:停机 1:待机 2:工作 3:待机
|
||||
['全自动针梭两用铺布机', '1050910', '95%', '0'],
|
||||
['全自动9公分电脑裁床', '1190269', '80%', '1'],
|
||||
],
|
||||
'value': [],
|
||||
'chart': {
|
||||
xData: ['1050910', '1050269'],
|
||||
series: [
|
||||
{
|
||||
name: '计划完成',
|
||||
data: [120, 200],
|
||||
type: 'bar',
|
||||
barMaxWidth: 30,
|
||||
},
|
||||
{
|
||||
name: '实际完成',
|
||||
data: [130, 180],
|
||||
type: 'bar',
|
||||
barMaxWidth: 30,
|
||||
}
|
||||
]
|
||||
xData: [],
|
||||
series: []
|
||||
}
|
||||
},
|
||||
tuoxie: {
|
||||
'value': [ //'设备名称', '设备编码', '稼动率', '状态' //0:停机 1:待机 2:工作 3:待机
|
||||
['1050910', '95%', '2'],
|
||||
],
|
||||
'value': [ ],
|
||||
'chart': {
|
||||
xData: ['1050910'],
|
||||
series: [
|
||||
{
|
||||
name: '计划完成',
|
||||
data: [120],
|
||||
type: 'bar',
|
||||
barMaxWidth: 45,
|
||||
},
|
||||
{
|
||||
name: '实际完成',
|
||||
data: [130],
|
||||
type: 'bar',
|
||||
barMaxWidth: 45,
|
||||
}
|
||||
]
|
||||
xData: [],
|
||||
series: []
|
||||
}
|
||||
}
|
||||
},
|
||||
"zuoyi": {
|
||||
"value": [ ],
|
||||
"chart": {
|
||||
"series": [],
|
||||
"xData": []
|
||||
}
|
||||
},
|
||||
"fengzhong": {
|
||||
"value": [ ],
|
||||
"chart": {
|
||||
"series": [],
|
||||
"xData": []
|
||||
}
|
||||
},
|
||||
"banfang": {
|
||||
"value": [],
|
||||
"chart": {
|
||||
"series": [],
|
||||
"xData": []
|
||||
}
|
||||
},
|
||||
};
|
||||
},
|
||||
//computed 修改一些值
|
||||
@ -79,6 +69,61 @@ export const useMicroExhibitionStore = defineStore(Names.MicroExhibition, {
|
||||
},
|
||||
setDevnum(data) {
|
||||
this.devnum = data;
|
||||
}
|
||||
},
|
||||
setcaijian(data) {
|
||||
|
||||
data.chart.series = data.chart.series.map((item) => {
|
||||
item.type = 'bar'
|
||||
item.barMaxWidth = 30
|
||||
return item
|
||||
})
|
||||
this.caijian = data;
|
||||
},
|
||||
settuoxie(data) {
|
||||
|
||||
data.chart.series = data.chart.series.map((item) => {
|
||||
item.type = 'bar'
|
||||
item.barMaxWidth = 45
|
||||
return item
|
||||
})
|
||||
this.tuoxie = data;
|
||||
},
|
||||
setfengzhong(data) {
|
||||
data.value = data.value.map((item,index) => {
|
||||
item.unshift(index+1)
|
||||
return item
|
||||
})
|
||||
data.chart.series = data.chart.series.map((item) => {
|
||||
item.type = 'bar'
|
||||
item.barMaxWidth = 30
|
||||
return item
|
||||
})
|
||||
this.fengzhong = data;
|
||||
},
|
||||
setbanfang(data) {
|
||||
data.value = data.value.map((item,index) => {
|
||||
item.unshift(index+1)
|
||||
return item
|
||||
})
|
||||
data.chart.series = data.chart.series.map((item) => {
|
||||
item.type = 'bar'
|
||||
item.barMaxWidth = 30
|
||||
return item
|
||||
})
|
||||
this.banfang = data;
|
||||
},
|
||||
setzuoyi(data) {
|
||||
data.value = data.value.map((item,index) => {
|
||||
item.unshift(index+1)
|
||||
|
||||
return item
|
||||
})
|
||||
data.chart.series = data.chart.series.map((item) => {
|
||||
item.type = 'bar'
|
||||
item.barMaxWidth = 30
|
||||
return item
|
||||
})
|
||||
this.zuoyi = data;
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
@ -13,20 +13,7 @@ const prop = defineProps({
|
||||
},
|
||||
seriesData: {
|
||||
type: Array,
|
||||
default: [
|
||||
{
|
||||
name:'计划完成',
|
||||
data: [120, 200],
|
||||
type: 'bar',
|
||||
barMaxWidth: 30,
|
||||
},
|
||||
{
|
||||
name:'实际完成',
|
||||
data: [130, 180],
|
||||
type: 'bar',
|
||||
barMaxWidth: 30,
|
||||
}
|
||||
]
|
||||
default: [ ]
|
||||
}
|
||||
})
|
||||
|
||||
@ -66,6 +53,19 @@ watch(()=>prop.seriesData, (newVal, oldVal) => {
|
||||
series: newVal
|
||||
});
|
||||
},{deep:true})
|
||||
watch(()=>prop.xData, (newVal, oldVal) => {
|
||||
charts.setOption({
|
||||
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: prop.xData,
|
||||
// axisLabel: {
|
||||
// interval: 0, //控制X轴刻度全部显示
|
||||
// rotate: 45, //倾斜角度
|
||||
// },
|
||||
},
|
||||
});
|
||||
},{deep:true})
|
||||
onMounted(() => {
|
||||
setCharts()
|
||||
})
|
||||
|
||||
@ -8,7 +8,8 @@
|
||||
<ZdScrollBoard ref="devList" class="dev-list" :config="config" />
|
||||
</div>
|
||||
<div class="bb-bottom">
|
||||
<BarChart style="width: 100%;height: 100%;"></BarChart>
|
||||
<BarChart style="width: 100%;height: 100%;" :xData="prop.xData"
|
||||
:seriesData="prop.seriesData"></BarChart>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@ -24,16 +25,15 @@ const devList = ref(null);
|
||||
const prop = defineProps({
|
||||
data: {
|
||||
type: Array,
|
||||
default: [[1, '富怡全自动皮革缝纫机(任意转)整机', '10201421', '180分钟', '0'],
|
||||
[2, '富怡全自动皮革缝纫机(任意转)整机', '10201421', '180分钟', '1'],
|
||||
[3, '富怡全自动皮革缝纫机(任意转)整机', '10201421', '180分钟', '2'],
|
||||
[4, '富怡全自动皮革缝纫机(任意转)整机', '10201421', '180分钟', '1'],
|
||||
[5, '富怡全自动皮革缝纫机(任意转)整机', '10201421', '180分钟', '3'],
|
||||
[6, '富怡全自动皮革缝纫机(任意转)整机', '10201421', '180分钟', '1'],
|
||||
[7, '富怡全自动皮革缝纫机(任意转)整机', '10201421', '180分钟', '2'],
|
||||
[8, '富怡全自动皮革缝纫机(任意转)整机', '10201421', '180分钟', '1'],
|
||||
[9, '富怡全自动皮革缝纫机(任意转)整机', '10201421', '180分钟', '0'],
|
||||
[10, '富怡全自动皮革缝纫机(任意转)整机', '10201421', '180分钟', '3'],]
|
||||
default: []
|
||||
},
|
||||
xData: {
|
||||
type: Array,
|
||||
default: ['1050910', '1050269']
|
||||
},
|
||||
seriesData: {
|
||||
type: Array,
|
||||
default: [ ]
|
||||
}
|
||||
})
|
||||
let header = ['序号', '设备名称', '设备编码', '稼动率', '状态']
|
||||
@ -52,7 +52,7 @@ let config = reactive({
|
||||
columnWidth: [80, 290, 120, 120, 120, 120],
|
||||
align: ['center', 'center', 'center', 'center', 'center', 'center'],
|
||||
rowNum: 2,
|
||||
waitTime: 300000,
|
||||
waitTime: 3000,
|
||||
data: [
|
||||
]
|
||||
})
|
||||
@ -67,7 +67,10 @@ const handleData = () => {
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
watch(()=>prop.data, (newVal, oldVal) => {
|
||||
handleData()
|
||||
},{deep:true}
|
||||
)
|
||||
|
||||
const status_color = {
|
||||
'0': '#FF6E76',
|
||||
|
||||
554
src/views/MicroExhibition/components/header2.vue
Normal file
554
src/views/MicroExhibition/components/header2.vue
Normal file
@ -0,0 +1,554 @@
|
||||
<!--
|
||||
* @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> -->
|
||||
</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>
|
||||
</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";
|
||||
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 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[];
|
||||
}>();
|
||||
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 "简体中文";
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//判断是否显示对应组件后所做操作
|
||||
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/header1.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;
|
||||
z-index: 2;
|
||||
}
|
||||
.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: 20rem;
|
||||
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>
|
||||
@ -2,7 +2,7 @@
|
||||
<div class="container">
|
||||
<div class="header">
|
||||
<div class="title">
|
||||
<header2 ref="headerref" :width="'100%'" :height="'100px'" :title="'设备大屏展示系统'" :titleTip="[]"
|
||||
<header2 ref="headerref" :width="'100%'" :height="'100px'" :title="'设备工况物联系统'" :titleTip="[]"
|
||||
:typeFun="['time']" :alarmType="[]"></header2>
|
||||
</div>
|
||||
</div>
|
||||
@ -18,7 +18,8 @@
|
||||
</div>
|
||||
<div class="lb">
|
||||
<NewBoder :title="'缝中设备'">
|
||||
<BoardBar></BoardBar>
|
||||
<BoardBar :data="store.fengzhong.value" :xData="store.fengzhong.chart.xData"
|
||||
:seriesData="store.fengzhong.chart.series"></BoardBar>
|
||||
</NewBoder>
|
||||
</div>
|
||||
</div>
|
||||
@ -48,7 +49,8 @@
|
||||
</div>
|
||||
<div class="cb">
|
||||
<NewBoder :title="'板房设备'">
|
||||
<BoardBar></BoardBar>
|
||||
<BoardBar :data="store.banfang.value" :xData="store.banfang.chart.xData"
|
||||
:seriesData="store.banfang.chart.series"></BoardBar>
|
||||
</NewBoder>
|
||||
</div>
|
||||
</div>
|
||||
@ -63,7 +65,8 @@
|
||||
</div>
|
||||
<div class="rb">
|
||||
<NewBoder :title="'座椅面套生产线'">
|
||||
<BoardBar></BoardBar>
|
||||
<BoardBar :data="store.zuoyi.value" :xData="store.zuoyi.chart.xData"
|
||||
:seriesData="store.zuoyi.chart.series"></BoardBar>
|
||||
</NewBoder>
|
||||
</div>
|
||||
</div>
|
||||
@ -92,31 +95,33 @@
|
||||
<div class="left-tip-type-item-text">离线</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="wrap"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang='ts'>
|
||||
import header2 from '@/components/headerBox/header2.vue'
|
||||
import header2 from './components/header2.vue'
|
||||
import NewBoder from './components/NewBoder.vue';
|
||||
import DevCard from "./components/DevCard.vue";
|
||||
import BarChart from './components/BarChart.vue'
|
||||
import ringChart from "./components/ringChart.vue";
|
||||
import BoardBar from "./components/BoardBar.vue";
|
||||
|
||||
import { getTopDevice, getCismaList } from '@/http/cisma'
|
||||
import { ref, onMounted, onUnmounted, getCurrentInstance, watch, onUpdated, computed } from 'vue'
|
||||
import { useMicroExhibitionStore } from '@/store/module/MicroExhibition'
|
||||
import {connectWebsocket,closeWebsocket} from "@/utils/websocket"
|
||||
|
||||
import { useI18n } from 'vue-i18n'
|
||||
let { t } = useI18n();
|
||||
const store = useMicroExhibitionStore()
|
||||
let ringData = computed(() => {
|
||||
return [
|
||||
{ name: '工作', value: store.devnum.on },
|
||||
{ name: '停机', value: store.devnum.off },
|
||||
{ name: '待机', value: store.devnum.wait },
|
||||
]
|
||||
{ name: '工作', value: store.devnum.on },
|
||||
{ name: '停机', value: store.devnum.off },
|
||||
{ name: '待机', value: store.devnum.wait },
|
||||
]
|
||||
})
|
||||
|
||||
let dev_caijian_title = ['设备名称', '设备编码', '稼动率', '状态']
|
||||
let dev_tuoxie_title = ['设备编码', '稼动率', '状态']
|
||||
let dev_value = [
|
||||
@ -124,7 +129,50 @@ let dev_value = [
|
||||
['全自动9公分电脑裁床', '待机', '40层', '0'],
|
||||
]
|
||||
|
||||
async function getTopDeviceData() {
|
||||
let res = await getTopDevice() as any
|
||||
if (res.code === 200) {
|
||||
store.setbanfang(res.data.板房设备)
|
||||
store.setcaijian(res.data.裁剪设备)
|
||||
store.setfengzhong(res.data.缝中设备)
|
||||
store.settuoxie(res.data.拖鞋自动生产线)
|
||||
store.setzuoyi(res.data.座椅面套生产线)
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
async function getCismaListData() {
|
||||
let res = await getCismaList() as any
|
||||
if (res.code === 200) {
|
||||
store.setDevnum(res.data.devnum)
|
||||
}
|
||||
}
|
||||
|
||||
function getWebsocket(val){
|
||||
try{
|
||||
let data=JSON.parse(val)
|
||||
|
||||
|
||||
if(data.type=='StateChart'){
|
||||
store.setDevnum(data.msg)
|
||||
}
|
||||
if(data.type=='WorkingState'){
|
||||
store.setDevnum(data.msg)
|
||||
}
|
||||
|
||||
}catch(err){
|
||||
console.log(err);
|
||||
}
|
||||
|
||||
}
|
||||
function errWebsocket(val){
|
||||
// console.log(val);
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
getTopDeviceData()
|
||||
getCismaListData()
|
||||
connectWebsocket(null,null,getWebsocket,errWebsocket)
|
||||
document.getElementById('app').style.backgroundColor = '#0E0E0E'
|
||||
})
|
||||
|
||||
@ -317,4 +365,16 @@ h2 {
|
||||
|
||||
.gatway {
|
||||
font-size: 36px;
|
||||
}
|
||||
|
||||
|
||||
.wrap {
|
||||
position: absolute;
|
||||
top: 2px;
|
||||
left: 582px;
|
||||
width: 537px;
|
||||
border-bottom: 0px solid transparent;
|
||||
border-top: 92px solid #0E1D2F;
|
||||
border-left: 109px solid transparent;
|
||||
border-right: 110px solid transparent;
|
||||
}</style>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user