标注场内二级 状态颜色区分，头部报警信息栏没有数据不显示加载更多
This commit is contained in:
hzz
parent
ffae1d4a47
commit
7998e246dc
@ -123,7 +123,7 @@ const changeData = (val: any) => {
|
|||||||
const dvMouseover = (value) => {
|
const dvMouseover = (value) => {
|
||||||
if (value.toElement && value.toElement.innerHTML&&value.toElement.className == 'ceil') {
|
if (value.toElement && value.toElement.innerHTML&&value.toElement.className == 'ceil') {
|
||||||
triggerRef.value = value.toElement;
|
triggerRef.value = value.toElement;
|
||||||
tipcontent.value = value.toElement.innerHTML;
|
tipcontent.value = value.toElement.innerText;
|
||||||
visible.value = true;
|
visible.value = true;
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|||||||
@ -1,5 +1,5 @@
|
|||||||
<!--
|
<!--
|
||||||
* @FilePath: \gitscreenFront\src\components\headerBox\header2.vue
|
* @FilePath: \screenFront\src\components\headerBox\header2.vue
|
||||||
* @Author: 王路平
|
* @Author: 王路平
|
||||||
* @文件版本: V1.0.0
|
* @文件版本: V1.0.0
|
||||||
* @Date: 2023-02-16 11:04:06
|
* @Date: 2023-02-16 11:04:06
|
||||||
@ -45,7 +45,7 @@
|
|||||||
<ul class="popoverBOX" ref="popoverliDom" v-click-outside="noClickAbnormalDataFun">
|
<ul class="popoverBOX" ref="popoverliDom" v-click-outside="noClickAbnormalDataFun">
|
||||||
<li v-for="item in powerlist" :key="item.deviceId" >{{item.context}}</li>
|
<li v-for="item in powerlist" :key="item.deviceId" >{{item.context}}</li>
|
||||||
<li class="lookdown" v-show="onloadlist">
|
<li class="lookdown" v-show="onloadlist">
|
||||||
<span @click="clickNextPageAlarmList">加载更多</span>
|
<span @click="clickNextPageAlarmList">{{ t('messages.加载更多') }}</span>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
|
|
||||||
@ -59,10 +59,12 @@ import { ClickOutside as vClickOutside } from 'element-plus'
|
|||||||
import { useRoute,useRouter } from "vue-router";
|
import { useRoute,useRouter } from "vue-router";
|
||||||
import { devListType } from "@/type/InPlantProducts";
|
import { devListType } from "@/type/InPlantProducts";
|
||||||
import { getAlarmListData} from "@/http/index";
|
import { getAlarmListData} from "@/http/index";
|
||||||
import { onMounted, onUnmounted, reactive, ref ,unref, watch } from "vue";
|
import { onMounted, onUnmounted, reactive, ref ,unref, watch,computed } from "vue";
|
||||||
import { connectWebsocket, closeWebsocket } from "@/utils/websocket";
|
import { connectWebsocket, closeWebsocket } from "@/utils/websocket";
|
||||||
import { useHeaderStore } from "@/store/components/header";
|
import { useHeaderStore } from "@/store/components/header";
|
||||||
import { getStoredLanguage } from "@/utils/languageStorage"
|
import { getStoredLanguage } from "@/utils/languageStorage"
|
||||||
|
import { useI18n } from 'vue-i18n'
|
||||||
|
let {t} = useI18n();
|
||||||
const storeheader = useHeaderStore();
|
const storeheader = useHeaderStore();
|
||||||
let { timeHtml } = useNowTime();
|
let { timeHtml } = useNowTime();
|
||||||
const router=useRouter()
|
const router=useRouter()
|
||||||
@ -77,7 +79,9 @@ let popoverliDom=ref()
|
|||||||
//历史报警数据弹窗显示
|
//历史报警数据弹窗显示
|
||||||
let Abnormalpopovervisible=ref(false)
|
let Abnormalpopovervisible=ref(false)
|
||||||
let AbnormalpopovervisibleCtrl=ref(false)//解决点击历史报警数据弹窗外部关闭再打开问题
|
let AbnormalpopovervisibleCtrl=ref(false)//解决点击历史报警数据弹窗外部关闭再打开问题
|
||||||
let onloadlist=ref(true)
|
let onloadlist= computed(()=>{
|
||||||
|
return storeheader.num>powerlist.length
|
||||||
|
})
|
||||||
const listdata = reactive<devListType>({data: [],
|
const listdata = reactive<devListType>({data: [],
|
||||||
rowNum:2,
|
rowNum:2,
|
||||||
oddRowBGC:'#100C2A',
|
oddRowBGC:'#100C2A',
|
||||||
@ -191,10 +195,10 @@ if (result.code == 200) {
|
|||||||
function clickNextPageAlarmList(){
|
function clickNextPageAlarmList(){
|
||||||
|
|
||||||
|
|
||||||
if(storeheader.num<=powerlist.length){
|
// if(storeheader.num<=powerlist.length){
|
||||||
onloadlist.value=false
|
// onloadlist.value=false
|
||||||
return
|
// return
|
||||||
}
|
// }
|
||||||
AbnormalType.pageNum++
|
AbnormalType.pageNum++
|
||||||
getAlarmListDatafun()
|
getAlarmListDatafun()
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,5 +1,5 @@
|
|||||||
/*
|
/*
|
||||||
* @FilePath: \gitscreenFront\src\locales\lang\en.ts
|
* @FilePath: \screenFront\src\locales\lang\en.ts
|
||||||
* @Author: 王路平
|
* @Author: 王路平
|
||||||
* @文件版本: V1.0.0
|
* @文件版本: V1.0.0
|
||||||
* @Date: 2023-05-04 16:36:13
|
* @Date: 2023-05-04 16:36:13
|
||||||
@ -263,6 +263,7 @@ export default {
|
|||||||
'AlarmTime':'Alarm Time',
|
'AlarmTime':'Alarm Time',
|
||||||
'duration':'duration',
|
'duration':'duration',
|
||||||
'IoT_System':'IoT Management System',
|
'IoT_System':'IoT Management System',
|
||||||
'environment_dust':'Environment-Dust Real-time Monitoring System'
|
'environment_dust':'Environment-Dust Real-time Monitoring System',
|
||||||
|
'加载更多':'Load More',
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -263,6 +263,7 @@ export default {
|
|||||||
'AlarmTime':'报警时间',
|
'AlarmTime':'报警时间',
|
||||||
'duration':'持续时间',
|
'duration':'持续时间',
|
||||||
'IoT_System':'物联管理系统',
|
'IoT_System':'物联管理系统',
|
||||||
'environment_dust':'环境-粉尘 实时监测系统'
|
'environment_dust':'环境-粉尘 实时监测系统',
|
||||||
|
'加载更多':'加载更多',
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -1,5 +1,5 @@
|
|||||||
/*
|
/*
|
||||||
* @FilePath: \daping\src\main.ts
|
* @FilePath: \screenFront\src\main.ts
|
||||||
* @Author: 王路平
|
* @Author: 王路平
|
||||||
* @文件版本: V1.0.0
|
* @文件版本: V1.0.0
|
||||||
* @Date: 2023-01-29 15:16:36
|
* @Date: 2023-01-29 15:16:36
|
||||||
@ -20,7 +20,6 @@ import dataV from '@jiaminghi/data-view'
|
|||||||
import './registerServiceWorker'
|
import './registerServiceWorker'
|
||||||
import router from './router'
|
import router from './router'
|
||||||
import i18n from './locales'
|
import i18n from './locales'
|
||||||
console.log(i18n,'i18n');
|
|
||||||
|
|
||||||
let app = createApp(App)
|
let app = createApp(App)
|
||||||
const store = createPinia()
|
const store = createPinia()
|
||||||
|
|||||||
@ -1,5 +1,5 @@
|
|||||||
<!--
|
<!--
|
||||||
* @FilePath: \wwwd:\code\screenFront\src\views\InPlantProducts\child\component\axle.vue
|
* @FilePath: \screenFront\src\views\InPlantProducts\child\component\axle.vue
|
||||||
* @Author: 王路平
|
* @Author: 王路平
|
||||||
* @文件版本: V1.0.0
|
* @文件版本: V1.0.0
|
||||||
* @Date: 2023-02-16 11:51:32
|
* @Date: 2023-02-16 11:51:32
|
||||||
@ -11,7 +11,13 @@
|
|||||||
<div :style="{width:itemSize.width,height:itemSize.height}">
|
<div :style="{width:itemSize.width,height:itemSize.height}">
|
||||||
<border1 ref="refborder1" :title="t('messages.DevMotor')">
|
<border1 ref="refborder1" :title="t('messages.DevMotor')">
|
||||||
<template v-slot>
|
<template v-slot>
|
||||||
<div class="box" :key="keynum" :style="{width:boxSize.width,height:boxSize.height}">
|
<div class="box" :key="keynum" :style="{width:boxSize.width,height:boxSize.height,position:'relative'}">
|
||||||
|
<div class="type">
|
||||||
|
<ul>
|
||||||
|
<li class="on">已调试</li>
|
||||||
|
<li class="off">未调试</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
<div v-for="(res,index) in data" :style="{width:'120px',height:'120px'}" >
|
<div v-for="(res,index) in data" :style="{width:'120px',height:'120px'}" >
|
||||||
<span>
|
<span>
|
||||||
<i :class="res.value=='1'?'iconfont icon-dianji green':'iconfont icon-dianji red'"></i>
|
<i :class="res.value=='1'?'iconfont icon-dianji green':'iconfont icon-dianji red'"></i>
|
||||||
@ -93,4 +99,42 @@ p{
|
|||||||
font-size:30px;
|
font-size:30px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.type {
|
||||||
|
position: absolute;
|
||||||
|
top: 10px;
|
||||||
|
width: 100%;
|
||||||
|
left: 0;
|
||||||
|
font-size: 20px;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
.type ul {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
.type ul li {
|
||||||
|
position: relative;
|
||||||
|
margin: 0 20px;
|
||||||
|
}
|
||||||
|
.type ul .on::before {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
background-color: green;
|
||||||
|
top: 05px;
|
||||||
|
left: -30px;
|
||||||
|
width: 20px;
|
||||||
|
height: 20px;
|
||||||
|
border-radius: 100%;
|
||||||
|
}
|
||||||
|
.type ul .off::before {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
background-color: #aaa;
|
||||||
|
top: 05px;
|
||||||
|
left: -30px;
|
||||||
|
width: 20px;
|
||||||
|
height: 20px;
|
||||||
|
border-radius: 100%;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@ -11,10 +11,17 @@
|
|||||||
<div :style="{ width: itemSize.width, height: itemSize.height }">
|
<div :style="{ width: itemSize.width, height: itemSize.height }">
|
||||||
<border1 ref="refborder1" :title="t('messages.DevSensors')">
|
<border1 ref="refborder1" :title="t('messages.DevSensors')">
|
||||||
<template v-slot>
|
<template v-slot>
|
||||||
<div class="box" :key="keynum" :style="{width:boxSize.width,height:boxSize.height}">
|
<div class="box" :key="keynum" :style="{ width: boxSize.width, height: boxSize.height, position: 'relative' }">
|
||||||
|
<div class="type">
|
||||||
|
<ul>
|
||||||
|
<li class="on">已调试</li>
|
||||||
|
<li class="off">未调试</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
<div v-for="(res, index) in data" :style="{ width: '130px', height: '130px' }">
|
<div v-for="(res, index) in data" :style="{ width: '130px', height: '130px' }">
|
||||||
<span>
|
<span>
|
||||||
<i :class="res.value=='1'?'iconfont icon-jingshideng green':'iconfont icon-jingshideng red'"></i>
|
<i
|
||||||
|
:class="res.value == '1' ? 'iconfont icon-jingshideng green' : 'iconfont icon-jingshideng red'"></i>
|
||||||
</span>
|
</span>
|
||||||
<p>{{ res.name }}</p>
|
<p>{{ res.name }}</p>
|
||||||
</div>
|
</div>
|
||||||
@ -70,11 +77,13 @@ let {t} = useI18n();
|
|||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
@import '@/assets/css/iconfont.css';
|
@import '@/assets/css/iconfont.css';
|
||||||
|
|
||||||
p {
|
p {
|
||||||
margin: 0 5px 0 5px;
|
margin: 0 5px 0 5px;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
font-size: 18px;
|
font-size: 18px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.box {
|
.box {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 80%;
|
height: 80%;
|
||||||
@ -85,13 +94,53 @@ p{
|
|||||||
/* align-content: flex-start; */
|
/* align-content: flex-start; */
|
||||||
overflow: auto;
|
overflow: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
.green {
|
.green {
|
||||||
color: green;
|
color: green;
|
||||||
font-size: 30px;
|
font-size: 30px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.red {
|
.red {
|
||||||
color: #aaa;
|
color: #aaa;
|
||||||
font-size: 30px;
|
font-size: 30px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.type {
|
||||||
|
position: absolute;
|
||||||
|
top: 10px;
|
||||||
|
width: 100%;
|
||||||
|
left: 0;
|
||||||
|
font-size: 20px;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
.type ul {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
.type ul li {
|
||||||
|
position: relative;
|
||||||
|
margin: 0 20px;
|
||||||
|
}
|
||||||
|
.type ul .on::before {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
background-color: green;
|
||||||
|
top: 05px;
|
||||||
|
left: -30px;
|
||||||
|
width: 20px;
|
||||||
|
height: 20px;
|
||||||
|
border-radius: 100%;
|
||||||
|
}
|
||||||
|
.type ul .off::before {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
background-color: #aaa;
|
||||||
|
top: 05px;
|
||||||
|
left: -30px;
|
||||||
|
width: 20px;
|
||||||
|
height: 20px;
|
||||||
|
border-radius: 100%;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@ -1,5 +1,5 @@
|
|||||||
<!--
|
<!--
|
||||||
* @FilePath: \wwwd:\code\screenFront\src\views\Offsite\child\childContent\right.vue
|
* @FilePath: \screenFront\src\views\Offsite\child\childContent\right.vue
|
||||||
* @Author: 王路平
|
* @Author: 王路平
|
||||||
* @文件版本: V1.0.0
|
* @文件版本: V1.0.0
|
||||||
* @Date: 2023-04-13 09:09:03
|
* @Date: 2023-04-13 09:09:03
|
||||||
@ -107,98 +107,98 @@ let DevType = reactive({
|
|||||||
],
|
],
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
let data2 = [
|
// let data2 = [
|
||||||
{
|
// {
|
||||||
"name": "全自动铺布机",
|
// "name": "全自动铺布机",
|
||||||
"label": "50945",
|
// "label": "50945",
|
||||||
"ts": "2023-05-12 08:36:37",
|
// "ts": "2023-05-12 08:36:37",
|
||||||
"status": "false",
|
// "status": "false",
|
||||||
"deptId": null,
|
// "deptId": null,
|
||||||
"context": "设备离线提醒:富怡全自动铺布机，时间：2023-05-11 17:36:37",
|
// "context": "设备离线提醒:富怡全自动铺布机，时间：2023-05-11 17:36:37",
|
||||||
"remark": "常规警报数据-设备离线"
|
// "remark": "常规警报数据-设备离线"
|
||||||
},
|
// },
|
||||||
{
|
// {
|
||||||
"name": "电脑绣花机",
|
// "name": "电脑绣花机",
|
||||||
"label": "0201112",
|
// "label": "0201112",
|
||||||
"ts": "2023-05-12 08:36:37",
|
// "ts": "2023-05-12 08:36:37",
|
||||||
"status": "false",
|
// "status": "false",
|
||||||
"deptId": null,
|
// "deptId": null,
|
||||||
"context": "设备离线提醒:富怡电脑绣花机，时间：2023-05-11 17:36:37",
|
// "context": "设备离线提醒:富怡电脑绣花机，时间：2023-05-11 17:36:37",
|
||||||
"remark": "常规警报数据-设备离线"
|
// "remark": "常规警报数据-设备离线"
|
||||||
},
|
// },
|
||||||
{
|
// {
|
||||||
"name": "全自动双头垫板式冲孔机",
|
// "name": "全自动双头垫板式冲孔机",
|
||||||
"label": "1170824#",
|
// "label": "1170824#",
|
||||||
"ts": "2023-05-12 08:36:47",
|
// "ts": "2023-05-12 08:36:47",
|
||||||
"status": "false",
|
// "status": "false",
|
||||||
"deptId": null,
|
// "deptId": null,
|
||||||
"context": "设备离线提醒:富怡全自动双头垫板式冲孔机，时间：2023-05-11 17:36:47",
|
// "context": "设备离线提醒:富怡全自动双头垫板式冲孔机，时间：2023-05-11 17:36:47",
|
||||||
"remark": "常规警报数据-设备离线"
|
// "remark": "常规警报数据-设备离线"
|
||||||
},
|
// },
|
||||||
{
|
// {
|
||||||
"name": "三合一裁床",
|
// "name": "三合一裁床",
|
||||||
"label": "040720",
|
// "label": "040720",
|
||||||
"ts": "2023-05-12 08:37:05",
|
// "ts": "2023-05-12 08:37:05",
|
||||||
"status": "false",
|
// "status": "false",
|
||||||
"deptId": null,
|
// "deptId": null,
|
||||||
"context": "设备离线提醒:三合一裁床，时间：2023-05-11 17:37:05",
|
// "context": "设备离线提醒:三合一裁床，时间：2023-05-11 17:37:05",
|
||||||
"remark": "常规警报数据-设备离线"
|
// "remark": "常规警报数据-设备离线"
|
||||||
},
|
// },
|
||||||
{
|
// {
|
||||||
"name": "全自动任意转单针缝纫机",
|
// "name": "全自动任意转单针缝纫机",
|
||||||
"label": "RHUL-01",
|
// "label": "RHUL-01",
|
||||||
"ts": "2023-05-12 08:37:05",
|
// "ts": "2023-05-12 08:37:05",
|
||||||
"status": "false",
|
// "status": "false",
|
||||||
"deptId": null,
|
// "deptId": null,
|
||||||
"context": "设备离线提醒:富怡全自动任意转单针缝纫机，时间：2023-05-11 17:37:05",
|
// "context": "设备离线提醒:富怡全自动任意转单针缝纫机，时间：2023-05-11 17:37:05",
|
||||||
"remark": "常规警报数据-设备离线"
|
// "remark": "常规警报数据-设备离线"
|
||||||
},
|
// },
|
||||||
{
|
// {
|
||||||
"name": "特种缝纫机",
|
// "name": "特种缝纫机",
|
||||||
"label": "RPS-1108-165",
|
// "label": "RPS-1108-165",
|
||||||
"ts": "2023-05-12 08:37:05",
|
// "ts": "2023-05-12 08:37:05",
|
||||||
"status": "false",
|
// "status": "false",
|
||||||
"deptId": null,
|
// "deptId": null,
|
||||||
"context": "设备离线提醒:富怡特种缝纫机，时间：2023-05-11 17:37:05",
|
// "context": "设备离线提醒:富怡特种缝纫机，时间：2023-05-11 17:37:05",
|
||||||
"remark": "常规警报数据-设备离线"
|
// "remark": "常规警报数据-设备离线"
|
||||||
},
|
// },
|
||||||
{
|
// {
|
||||||
"name": "全自动缝纫机(零等待)",
|
// "name": "全自动缝纫机(零等待)",
|
||||||
"label": "170321NS064",
|
// "label": "170321NS064",
|
||||||
"ts": "2023-05-12 08:37:06",
|
// "ts": "2023-05-12 08:37:06",
|
||||||
"status": "false",
|
// "status": "false",
|
||||||
"deptId": null,
|
// "deptId": null,
|
||||||
"context": "设备离线提醒:富怡全自动缝纫机(零等待)，时间：2023-05-11 17:37:06",
|
// "context": "设备离线提醒:富怡全自动缝纫机(零等待)，时间：2023-05-11 17:37:06",
|
||||||
"remark": "常规警报数据-设备离线"
|
// "remark": "常规警报数据-设备离线"
|
||||||
},
|
// },
|
||||||
{
|
// {
|
||||||
"name": "激光雕刻切割机",
|
// "name": "激光雕刻切割机",
|
||||||
"label": "170322798",
|
// "label": "170322798",
|
||||||
"ts": "2023-05-12 08:37:06",
|
// "ts": "2023-05-12 08:37:06",
|
||||||
"status": "false",
|
// "status": "false",
|
||||||
"deptId": null,
|
// "deptId": null,
|
||||||
"context": "设备离线提醒:富怡激光雕刻切割机，时间：2023-05-11 17:37:06",
|
// "context": "设备离线提醒:富怡激光雕刻切割机，时间：2023-05-11 17:37:06",
|
||||||
"remark": "常规警报数据-设备离线"
|
// "remark": "常规警报数据-设备离线"
|
||||||
},
|
// },
|
||||||
{
|
// {
|
||||||
"name": "电脑绣花机(三合一)",
|
// "name": "电脑绣花机(三合一)",
|
||||||
"label": "1885",
|
// "label": "1885",
|
||||||
"ts": "2023-05-12 08:37:25",
|
// "ts": "2023-05-12 08:37:25",
|
||||||
"status": "false",
|
// "status": "false",
|
||||||
"deptId": null,
|
// "deptId": null,
|
||||||
"context": "设备离线提醒:富怡电脑绣花机(三合一)，时间：2023-05-11 17:37:25",
|
// "context": "设备离线提醒:富怡电脑绣花机(三合一)，时间：2023-05-11 17:37:25",
|
||||||
"remark": "常规警报数据-设备离线"
|
// "remark": "常规警报数据-设备离线"
|
||||||
},
|
// },
|
||||||
{
|
// {
|
||||||
"name": "全自动电脑裁床",
|
// "name": "全自动电脑裁床",
|
||||||
"label": "50231",
|
// "label": "50231",
|
||||||
"ts": "2023-05-12 08:37:25",
|
// "ts": "2023-05-12 08:37:25",
|
||||||
"status": "false",
|
// "status": "false",
|
||||||
"deptId": null,
|
// "deptId": null,
|
||||||
"context": "设备离线提醒:富怡全自动电脑裁床，时间：2023-05-11 17:37:25",
|
// "context": "设备离线提醒:富怡全自动电脑裁床，时间：2023-05-11 17:37:25",
|
||||||
"remark": "常规警报数据-设备离线"
|
// "remark": "常规警报数据-设备离线"
|
||||||
}
|
// }
|
||||||
]
|
// ]
|
||||||
function setDataList(val:any){
|
function setDataList(val:any){
|
||||||
let echartdata=[]
|
let echartdata=[]
|
||||||
val.typenum.forEach(res=>{
|
val.typenum.forEach(res=>{
|
||||||
@ -207,8 +207,7 @@ val.typenum.forEach(res=>{
|
|||||||
DevType.option.series[0].data=echartdata
|
DevType.option.series[0].data=echartdata
|
||||||
chartref.value.changeData(DevType.option)
|
chartref.value.changeData(DevType.option)
|
||||||
|
|
||||||
data2.push(...data2)
|
devTipRef.value.setData(val.data2);
|
||||||
devTipRef.value.setData(data2);
|
|
||||||
}
|
}
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
|
|
||||||
|
|||||||
@ -1,5 +1,5 @@
|
|||||||
<!--
|
<!--
|
||||||
* @FilePath: \wwwd:\code\screenFront\src\views\Offsite\child\index.vue
|
* @FilePath: \screenFront\src\views\Offsite\child\index.vue
|
||||||
* @Author: 王路平
|
* @Author: 王路平
|
||||||
* @文件版本: V1.0.0
|
* @文件版本: V1.0.0
|
||||||
* @Date: 2023-04-11 13:50:05
|
* @Date: 2023-04-11 13:50:05
|
||||||
@ -11,7 +11,8 @@
|
|||||||
<div class="container">
|
<div class="container">
|
||||||
<div class="header">
|
<div class="header">
|
||||||
<div class="title">
|
<div class="title">
|
||||||
<header2 ref="headerref" :width="'100%'" :height="'100px'" :title="t('messages.Offsite')" :titleTip="[]" :typeFun="['comback','time']" :alarmType="[]"></header2>
|
<header2 ref="headerref" :width="'100%'" :height="'100px'" :title="t('messages.Offsite')" :titleTip="[]"
|
||||||
|
:typeFun="['comback', 'time']" :alarmType="[]"></header2>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="content" ref="Acontent">
|
<div class="content" ref="Acontent">
|
||||||
@ -37,6 +38,7 @@ import header2 from '@/components/headerBox/header2.vue'
|
|||||||
import { calcWH } from '@/components/ts/selfAdaption'
|
import { calcWH } from '@/components/ts/selfAdaption'
|
||||||
import { Offsite } from "@/store/module/offsite";
|
import { Offsite } from "@/store/module/offsite";
|
||||||
import { deviceCountsSecondaryOfOutPlantData, deviceTypeCountsSecondaryOfOutPlantData, deviceStatusCountsSecondaryOfOutPlantData, secondaryOutPlantData } from "@/http/offsite";
|
import { deviceCountsSecondaryOfOutPlantData, deviceTypeCountsSecondaryOfOutPlantData, deviceStatusCountsSecondaryOfOutPlantData, secondaryOutPlantData } from "@/http/offsite";
|
||||||
|
import {getElectronDeviceStatus} from "@/http/electronicControl";
|
||||||
import left from "./childContent/left.vue"
|
import left from "./childContent/left.vue"
|
||||||
import center from "./childContent/center.vue"
|
import center from "./childContent/center.vue"
|
||||||
import right from "./childContent/right.vue"
|
import right from "./childContent/right.vue"
|
||||||
@ -47,8 +49,11 @@ const route = useRoute();
|
|||||||
const store = Offsite()
|
const store = Offsite()
|
||||||
let Acontent = ref()
|
let Acontent = ref()
|
||||||
let time = ref(null)
|
let time = ref(null)
|
||||||
let routeCity=route.params.city
|
let routeCity:any = route.params.city
|
||||||
|
let deptId_list = {
|
||||||
|
'广东省': '16',
|
||||||
|
'浙江省': '17'
|
||||||
|
}
|
||||||
let leftRef = ref()
|
let leftRef = ref()
|
||||||
let centerRef = ref()
|
let centerRef = ref()
|
||||||
let rightRef = ref()
|
let rightRef = ref()
|
||||||
@ -97,15 +102,26 @@ let size=reactive({
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
function getdata() {
|
function getdata() {
|
||||||
Promise.all([deviceCountsSecondaryOfOutPlantData(),deviceTypeCountsSecondaryOfOutPlantData(),deviceStatusCountsSecondaryOfOutPlantData(),secondaryOutPlantData()]).then((res:any)=>{
|
Promise.all([
|
||||||
let data={devnum:null,typenum:null,statusnum:null,citylist:null,}
|
deviceCountsSecondaryOfOutPlantData(),
|
||||||
res.forEach((ele,i)=>{
|
deviceTypeCountsSecondaryOfOutPlantData(),
|
||||||
for(let key in ele.data){
|
deviceStatusCountsSecondaryOfOutPlantData(),
|
||||||
if(key==route.params.city){
|
secondaryOutPlantData(),
|
||||||
i==0?data.devnum=ele.data[key]:i==1?data.typenum=ele.data[key]:i==2?data.statusnum=ele.data[key]:i==3?data.citylist=ele.data[key]:''
|
getElectronDeviceStatus(deptId_list[routeCity])]).then((res: any) => {
|
||||||
}
|
let data = { devnum: null, typenum: null, statusnum: null, citylist: null, data2:null}
|
||||||
}
|
data.devnum = res[0].data[routeCity]
|
||||||
})
|
data.typenum = res[1].data[routeCity]
|
||||||
|
data.statusnum = res[2].data[routeCity]
|
||||||
|
data.citylist = res[3].data[routeCity]
|
||||||
|
data.data2 = res[4].data
|
||||||
|
|
||||||
|
// res.forEach((ele, i) => {
|
||||||
|
// for (let key in ele.data) {
|
||||||
|
// if (key == route.params.city) {
|
||||||
|
// i == 0 ? data.devnum = ele.data[key] : i == 1 ? data.typenum = ele.data[key] : i == 2 ? data.statusnum = ele.data[key] : i == 3 ? data.citylist = ele.data[key] : ''
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
// })
|
||||||
|
|
||||||
leftRef.value.setDataList(data)
|
leftRef.value.setDataList(data)
|
||||||
centerRef.value.setDataList(data)
|
centerRef.value.setDataList(data)
|
||||||
@ -127,7 +143,8 @@ let size=reactive({
|
|||||||
clearTimeout(time.value)
|
clearTimeout(time.value)
|
||||||
time.value = null
|
time.value = null
|
||||||
}
|
}
|
||||||
time.value = setTimeout(() => {WH(contentBox)
|
time.value = setTimeout(() => {
|
||||||
|
WH(contentBox)
|
||||||
}, 1000);
|
}, 1000);
|
||||||
})
|
})
|
||||||
})
|
})
|
||||||
@ -144,6 +161,7 @@ let size=reactive({
|
|||||||
color: #20aec5;
|
color: #20aec5;
|
||||||
background-color: #100c2a;
|
background-color: #100c2a;
|
||||||
}
|
}
|
||||||
|
|
||||||
.title {
|
.title {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
display: flex;
|
display: flex;
|
||||||
@ -151,20 +169,24 @@ let size=reactive({
|
|||||||
align-items: center;
|
align-items: center;
|
||||||
position: relative;
|
position: relative;
|
||||||
}
|
}
|
||||||
|
|
||||||
.title>h1 {
|
.title>h1 {
|
||||||
font-size: 30px;
|
font-size: 30px;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 10px;
|
top: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.header {
|
.header {
|
||||||
position: relative;
|
position: relative;
|
||||||
}
|
}
|
||||||
|
|
||||||
.header p {
|
.header p {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
right: 50px;
|
right: 50px;
|
||||||
bottom: 20px;
|
bottom: 20px;
|
||||||
font-size: 20px;
|
font-size: 20px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.content {
|
.content {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
--header: 100px;
|
--header: 100px;
|
||||||
@ -176,10 +198,12 @@ body {
|
|||||||
|
|
||||||
/* --content:calc(100vh - var(--header)) */
|
/* --content:calc(100vh - var(--header)) */
|
||||||
overflow: hidden !important;
|
overflow: hidden !important;
|
||||||
-ms-overflow-style: none; /* IE + Edge */
|
-ms-overflow-style: none;
|
||||||
scrollbar-width: none; /* Firefox */
|
/* IE + Edge */
|
||||||
|
scrollbar-width: none;
|
||||||
|
/* Firefox */
|
||||||
}
|
}
|
||||||
|
|
||||||
::-webkit-scrollbar {
|
::-webkit-scrollbar {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}</style>
|
||||||
</style>
|
|
||||||
@ -107,98 +107,98 @@ let DevType = reactive({
|
|||||||
],
|
],
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
let data2 = [
|
// let data2 = [
|
||||||
{
|
// {
|
||||||
"name": "全自动铺布机",
|
// "name": "全自动铺布机",
|
||||||
"label": "50945",
|
// "label": "50945",
|
||||||
"ts": "2023-05-12 08:36:37",
|
// "ts": "2023-05-12 08:36:37",
|
||||||
"status": "false",
|
// "status": "false",
|
||||||
"deptId": null,
|
// "deptId": null,
|
||||||
"context": "设备离线提醒:富怡全自动铺布机，时间：2023-05-11 17:36:37",
|
// "context": "设备离线提醒:富怡全自动铺布机，时间：2023-05-11 17:36:37",
|
||||||
"remark": "常规警报数据-设备离线"
|
// "remark": "常规警报数据-设备离线"
|
||||||
},
|
// },
|
||||||
{
|
// {
|
||||||
"name": "电脑绣花机",
|
// "name": "电脑绣花机",
|
||||||
"label": "0201112",
|
// "label": "0201112",
|
||||||
"ts": "2023-05-12 08:36:37",
|
// "ts": "2023-05-12 08:36:37",
|
||||||
"status": "false",
|
// "status": "false",
|
||||||
"deptId": null,
|
// "deptId": null,
|
||||||
"context": "设备离线提醒:富怡电脑绣花机，时间：2023-05-11 17:36:37",
|
// "context": "设备离线提醒:富怡电脑绣花机，时间：2023-05-11 17:36:37",
|
||||||
"remark": "常规警报数据-设备离线"
|
// "remark": "常规警报数据-设备离线"
|
||||||
},
|
// },
|
||||||
{
|
// {
|
||||||
"name": "全自动双头垫板式冲孔机",
|
// "name": "全自动双头垫板式冲孔机",
|
||||||
"label": "1170824#",
|
// "label": "1170824#",
|
||||||
"ts": "2023-05-12 08:36:47",
|
// "ts": "2023-05-12 08:36:47",
|
||||||
"status": "false",
|
// "status": "false",
|
||||||
"deptId": null,
|
// "deptId": null,
|
||||||
"context": "设备离线提醒:富怡全自动双头垫板式冲孔机，时间：2023-05-11 17:36:47",
|
// "context": "设备离线提醒:富怡全自动双头垫板式冲孔机，时间：2023-05-11 17:36:47",
|
||||||
"remark": "常规警报数据-设备离线"
|
// "remark": "常规警报数据-设备离线"
|
||||||
},
|
// },
|
||||||
{
|
// {
|
||||||
"name": "三合一裁床",
|
// "name": "三合一裁床",
|
||||||
"label": "040720",
|
// "label": "040720",
|
||||||
"ts": "2023-05-12 08:37:05",
|
// "ts": "2023-05-12 08:37:05",
|
||||||
"status": "false",
|
// "status": "false",
|
||||||
"deptId": null,
|
// "deptId": null,
|
||||||
"context": "设备离线提醒:三合一裁床，时间：2023-05-11 17:37:05",
|
// "context": "设备离线提醒:三合一裁床，时间：2023-05-11 17:37:05",
|
||||||
"remark": "常规警报数据-设备离线"
|
// "remark": "常规警报数据-设备离线"
|
||||||
},
|
// },
|
||||||
{
|
// {
|
||||||
"name": "全自动任意转单针缝纫机",
|
// "name": "全自动任意转单针缝纫机",
|
||||||
"label": "RHUL-01",
|
// "label": "RHUL-01",
|
||||||
"ts": "2023-05-12 08:37:05",
|
// "ts": "2023-05-12 08:37:05",
|
||||||
"status": "false",
|
// "status": "false",
|
||||||
"deptId": null,
|
// "deptId": null,
|
||||||
"context": "设备离线提醒:富怡全自动任意转单针缝纫机，时间：2023-05-11 17:37:05",
|
// "context": "设备离线提醒:富怡全自动任意转单针缝纫机，时间：2023-05-11 17:37:05",
|
||||||
"remark": "常规警报数据-设备离线"
|
// "remark": "常规警报数据-设备离线"
|
||||||
},
|
// },
|
||||||
{
|
// {
|
||||||
"name": "特种缝纫机",
|
// "name": "特种缝纫机",
|
||||||
"label": "RPS-1108-165",
|
// "label": "RPS-1108-165",
|
||||||
"ts": "2023-05-12 08:37:05",
|
// "ts": "2023-05-12 08:37:05",
|
||||||
"status": "false",
|
// "status": "false",
|
||||||
"deptId": null,
|
// "deptId": null,
|
||||||
"context": "设备离线提醒:富怡特种缝纫机，时间：2023-05-11 17:37:05",
|
// "context": "设备离线提醒:富怡特种缝纫机，时间：2023-05-11 17:37:05",
|
||||||
"remark": "常规警报数据-设备离线"
|
// "remark": "常规警报数据-设备离线"
|
||||||
},
|
// },
|
||||||
{
|
// {
|
||||||
"name": "全自动缝纫机(零等待)",
|
// "name": "全自动缝纫机(零等待)",
|
||||||
"label": "170321NS064",
|
// "label": "170321NS064",
|
||||||
"ts": "2023-05-12 08:37:06",
|
// "ts": "2023-05-12 08:37:06",
|
||||||
"status": "false",
|
// "status": "false",
|
||||||
"deptId": null,
|
// "deptId": null,
|
||||||
"context": "设备离线提醒:富怡全自动缝纫机(零等待)，时间：2023-05-11 17:37:06",
|
// "context": "设备离线提醒:富怡全自动缝纫机(零等待)，时间：2023-05-11 17:37:06",
|
||||||
"remark": "常规警报数据-设备离线"
|
// "remark": "常规警报数据-设备离线"
|
||||||
},
|
// },
|
||||||
{
|
// {
|
||||||
"name": "激光雕刻切割机",
|
// "name": "激光雕刻切割机",
|
||||||
"label": "170322798",
|
// "label": "170322798",
|
||||||
"ts": "2023-05-12 08:37:06",
|
// "ts": "2023-05-12 08:37:06",
|
||||||
"status": "false",
|
// "status": "false",
|
||||||
"deptId": null,
|
// "deptId": null,
|
||||||
"context": "设备离线提醒:富怡激光雕刻切割机，时间：2023-05-11 17:37:06",
|
// "context": "设备离线提醒:富怡激光雕刻切割机，时间：2023-05-11 17:37:06",
|
||||||
"remark": "常规警报数据-设备离线"
|
// "remark": "常规警报数据-设备离线"
|
||||||
},
|
// },
|
||||||
{
|
// {
|
||||||
"name": "电脑绣花机(三合一)",
|
// "name": "电脑绣花机(三合一)",
|
||||||
"label": "1885",
|
// "label": "1885",
|
||||||
"ts": "2023-05-12 08:37:25",
|
// "ts": "2023-05-12 08:37:25",
|
||||||
"status": "false",
|
// "status": "false",
|
||||||
"deptId": null,
|
// "deptId": null,
|
||||||
"context": "设备离线提醒:富怡电脑绣花机(三合一)，时间：2023-05-11 17:37:25",
|
// "context": "设备离线提醒:富怡电脑绣花机(三合一)，时间：2023-05-11 17:37:25",
|
||||||
"remark": "常规警报数据-设备离线"
|
// "remark": "常规警报数据-设备离线"
|
||||||
},
|
// },
|
||||||
{
|
// {
|
||||||
"name": "全自动电脑裁床",
|
// "name": "全自动电脑裁床",
|
||||||
"label": "50231",
|
// "label": "50231",
|
||||||
"ts": "2023-05-12 08:37:25",
|
// "ts": "2023-05-12 08:37:25",
|
||||||
"status": "false",
|
// "status": "false",
|
||||||
"deptId": null,
|
// "deptId": null,
|
||||||
"context": "设备离线提醒:富怡全自动电脑裁床，时间：2023-05-11 17:37:25",
|
// "context": "设备离线提醒:富怡全自动电脑裁床，时间：2023-05-11 17:37:25",
|
||||||
"remark": "常规警报数据-设备离线"
|
// "remark": "常规警报数据-设备离线"
|
||||||
}
|
// }
|
||||||
]
|
// ]
|
||||||
function setDataList(val:any){
|
function setDataList(val:any){
|
||||||
let echartdata=[]
|
let echartdata=[]
|
||||||
val.typenum.forEach(res=>{
|
val.typenum.forEach(res=>{
|
||||||
@ -207,7 +207,7 @@ val.typenum.forEach(res=>{
|
|||||||
DevType.option.series[0].data=echartdata
|
DevType.option.series[0].data=echartdata
|
||||||
chartref.value.changeData(DevType.option)
|
chartref.value.changeData(DevType.option)
|
||||||
|
|
||||||
devTipRef.value.setData(data2);
|
devTipRef.value.setData(val.data2);
|
||||||
}
|
}
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
|
|
||||||
|
|||||||
@ -38,6 +38,7 @@ import header2 from '@/components/headerBox/header2.vue'
|
|||||||
import { calcWH } from '@/components/ts/selfAdaption'
|
import { calcWH } from '@/components/ts/selfAdaption'
|
||||||
import { Offsite } from "@/store/module/offsite";
|
import { Offsite } from "@/store/module/offsite";
|
||||||
import { deviceCountsSecondaryOfOutPlantData, deviceTypeCountsSecondaryOfOutPlantData, deviceStatusCountsSecondaryOfOutPlantData, secondaryOutPlantData } from "@/http/offsite";
|
import { deviceCountsSecondaryOfOutPlantData, deviceTypeCountsSecondaryOfOutPlantData, deviceStatusCountsSecondaryOfOutPlantData, secondaryOutPlantData } from "@/http/offsite";
|
||||||
|
import {getElectronDeviceStatus} from "@/http/electronicControl";
|
||||||
import left from "./childContent/left.vue"
|
import left from "./childContent/left.vue"
|
||||||
import center from "./childContent/center.vue"
|
import center from "./childContent/center.vue"
|
||||||
import right from "./childContent/right.vue"
|
import right from "./childContent/right.vue"
|
||||||
@ -48,8 +49,11 @@ const route = useRoute();
|
|||||||
const store = Offsite()
|
const store = Offsite()
|
||||||
let Acontent = ref()
|
let Acontent = ref()
|
||||||
let time = ref(null)
|
let time = ref(null)
|
||||||
let routeCity = route.params.city
|
let routeCity:any = '广东省'
|
||||||
|
let deptId_list = {
|
||||||
|
'广东省': '16',
|
||||||
|
'浙江省': '17'
|
||||||
|
}
|
||||||
let leftRef = ref()
|
let leftRef = ref()
|
||||||
let centerRef = ref()
|
let centerRef = ref()
|
||||||
let rightRef = ref()
|
let rightRef = ref()
|
||||||
@ -98,15 +102,26 @@ async function secondaryOutPlantDatafun() {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
function getdata() {
|
function getdata() {
|
||||||
Promise.all([deviceCountsSecondaryOfOutPlantData(), deviceTypeCountsSecondaryOfOutPlantData(), deviceStatusCountsSecondaryOfOutPlantData(), secondaryOutPlantData()]).then((res: any) => {
|
Promise.all([
|
||||||
let data = { devnum: null, typenum: null, statusnum: null, citylist: null, }
|
deviceCountsSecondaryOfOutPlantData(),
|
||||||
res.forEach((ele, i) => {
|
deviceTypeCountsSecondaryOfOutPlantData(),
|
||||||
for (let key in ele.data) {
|
deviceStatusCountsSecondaryOfOutPlantData(),
|
||||||
if (key == "广东省") {
|
secondaryOutPlantData(),
|
||||||
i == 0 ? data.devnum = ele.data[key] : i == 1 ? data.typenum = ele.data[key] : i == 2 ? data.statusnum = ele.data[key] : i == 3 ? data.citylist = ele.data[key] : ''
|
getElectronDeviceStatus(deptId_list[routeCity])]).then((res: any) => {
|
||||||
}
|
let data = { devnum: null, typenum: null, statusnum: null, citylist: null, data2:null}
|
||||||
}
|
data.devnum = res[0].data[routeCity]
|
||||||
})
|
data.typenum = res[1].data[routeCity]
|
||||||
|
data.statusnum = res[2].data[routeCity]
|
||||||
|
data.citylist = res[3].data[routeCity]
|
||||||
|
data.data2 = res[4].data
|
||||||
|
|
||||||
|
// res.forEach((ele, i) => {
|
||||||
|
// for (let key in ele.data) {
|
||||||
|
// if (key == route.params.city) {
|
||||||
|
// i == 0 ? data.devnum = ele.data[key] : i == 1 ? data.typenum = ele.data[key] : i == 2 ? data.statusnum = ele.data[key] : i == 3 ? data.citylist = ele.data[key] : ''
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
// })
|
||||||
|
|
||||||
leftRef.value.setDataList(data)
|
leftRef.value.setDataList(data)
|
||||||
centerRef.value.setDataList(data)
|
centerRef.value.setDataList(data)
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user