场外离线状态颜色修改
添加危废品箱大屏
This commit is contained in:
hzz
parent
a27c3efb17
commit
db4cc27eff
@ -290,6 +290,11 @@ const routes: Array<RouteRecordRaw> = [
|
||||
name: "MicroExhibitionTable",
|
||||
component: () => import("../views/MicroExhibition/table.vue"),
|
||||
},
|
||||
{
|
||||
path: "/Hazardous",
|
||||
name: "Hazardous",
|
||||
component: () => import("../views/Hazardous/index.vue"),
|
||||
},
|
||||
|
||||
|
||||
|
||||
|
||||
16
src/views/Hazardous/components/Border.vue
Normal file
16
src/views/Hazardous/components/Border.vue
Normal file
@ -0,0 +1,16 @@
|
||||
<template>
|
||||
<div class="border-container">
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang='ts'>
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.border-container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
</style>
|
||||
76
src/views/Hazardous/index.vue
Normal file
76
src/views/Hazardous/index.vue
Normal file
@ -0,0 +1,76 @@
|
||||
<template>
|
||||
<div class="container">
|
||||
<div class="header">
|
||||
<div class="title">
|
||||
<header2 ref="headerref" :width="'100%'" :height="'100px'" :title="'危废品箱物联检测系统'" :titleTip="[]"
|
||||
:typeFun="['time']" :alarmType="[]"></header2>
|
||||
</div>
|
||||
</div>
|
||||
<div class="content">
|
||||
<div class="img-box">
|
||||
<svg t="1695353681154" class="icon" viewBox="0 0 1332 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6587" xmlns:xlink="http://www.w3.org/1999/xlink" width="166.5" height="128"><path d="M407.556511 774.956201a35.225282 35.225282 0 0 1 14.090113-22.191928 35.225282 35.225282 0 0 0-35.225282-60.939738 105.675846 105.675846 0 0 0-46.497372 66.22353 161.331791 161.331791 0 0 0 33.464018 126.458762 35.225282 35.225282 0 0 1 8.101814 30.998248 84.188424 84.188424 0 0 1-35.225281 42.270338 35.225282 35.225282 0 0 0 15.146871 63.757761 39.452316 39.452316 0 0 0 17.260388-4.579287 153.934482 153.934482 0 0 0 70.450564-87.710952 108.141615 108.141615 0 0 0-18.6694-87.006446 101.096559 101.096559 0 0 1-22.896433-67.280288zM959.88893 774.956201a35.225282 35.225282 0 0 1 14.090113-22.191928 35.225282 35.225282 0 0 0-35.225282-60.939738 105.675846 105.675846 0 0 0-46.497372 66.22353 161.331791 161.331791 0 0 0 35.225282 126.458762 35.225282 35.225282 0 0 1 8.101815 30.998248 84.188424 84.188424 0 0 1-35.225282 42.270338 35.225282 35.225282 0 0 0-13.73786 48.258637 35.225282 35.225282 0 0 0 30.998248 17.964893 39.452316 39.452316 0 0 0 17.260388-4.579286 155.343493 155.343493 0 0 0 70.450564-87.710952 108.141615 108.141615 0 0 0-18.6694-87.006446 101.096559 101.096559 0 0 1-26.771214-69.746058zM683.722721 774.956201a35.225282 35.225282 0 0 1 14.090112-22.191928 35.225282 35.225282 0 0 0-35.225281-60.939738 105.675846 105.675846 0 0 0-46.497373 66.22353 161.331791 161.331791 0 0 0 35.225282 126.458762 35.225282 35.225282 0 0 1 8.101815 30.998248 84.188424 84.188424 0 0 1-35.225282 42.270338A35.225282 35.225282 0 0 0 637.577601 1021.533174a39.452316 39.452316 0 0 0 17.260389-4.579287 155.343493 155.343493 0 0 0 70.450563-87.710952 108.141615 108.141615 0 0 0-18.669399-87.006446 101.096559 101.096559 0 0 1-22.896433-67.280288z" fill="#20AEC5" p-id="6588"></path><path d="M1141.299132 239.179664m-52.837923 0a52.837923 52.837923 0 1 0 105.675846 0 52.837923 52.837923 0 1 0-105.675846 0Z" fill="#20AEC5" p-id="6589"></path><path d="M1224.78305 0H105.675846a105.675846 105.675846 0 0 0-105.675846 105.675846v428.69168a105.675846 105.675846 0 0 0 105.675846 105.675845h1119.107204a105.675846 105.675846 0 0 0 105.675845-105.675845V105.675846a105.675846 105.675846 0 0 0-105.675845-105.675846zM105.675846 70.450564h1119.107204a35.225282 35.225282 0 0 1 35.225282 35.225282v281.802254H70.450564V105.675846a35.225282 35.225282 0 0 1 35.225282-35.225282z m1119.107204 499.142243H105.675846a35.225282 35.225282 0 0 1-35.225282-35.225281V457.928664h1189.557768v77.847873a35.225282 35.225282 0 0 1-35.225282 33.81627z" fill="#20AEC5" p-id="6590"></path></svg>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang='ts'>
|
||||
import header2 from '@/components/headerBox/header2.vue'
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.container {
|
||||
height: 1080px;
|
||||
width: 1920px;
|
||||
color: #FFFFFF;
|
||||
/* background-color: #0E0E0E; */
|
||||
position: relative;
|
||||
|
||||
}
|
||||
|
||||
.header {
|
||||
height: 100px;
|
||||
width: 1920px;
|
||||
}
|
||||
|
||||
.content {
|
||||
height: 980px;
|
||||
width: 1920px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
padding: 0 5px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.img-box {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
position: relative;
|
||||
}
|
||||
.img-box svg {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.img-box::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 40%;
|
||||
background-color: #100c2a;
|
||||
box-sizing: border-box;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
z-index: 1;
|
||||
animation: myfirst 1.5s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes myfirst
|
||||
{
|
||||
0% {height: 40%;}
|
||||
25% {height: 25%;}
|
||||
50% {height: 10%;}
|
||||
100% {height: 0;}
|
||||
}
|
||||
</style>
|
||||
@ -144,7 +144,7 @@ function changedevlist(val: any) {
|
||||
res.realityDate,
|
||||
JSON.parse(res.deviceStatus)
|
||||
? `<span style="color:#20aec5;">${t('messages.onLine')}</span>`
|
||||
: `<span style="color:rgb(228, 57, 97);">${t('messages.offline')}</span>`,
|
||||
: `<span style="">${t('messages.offline')}</span>`,
|
||||
// "",
|
||||
]);
|
||||
|
||||
@ -191,7 +191,7 @@ function setDataList(val: any) {
|
||||
//设置页面数据
|
||||
topTitleRef.value.setData({ title: t('messages.OnlineNum'), num: tipdata.ison });
|
||||
topTitleRef2.value.setData({ title: t('messages.TOTAL'), num: tipdata.isall });
|
||||
topTitleRef3.value.setData({ title: t('messages.OffNum'), num: tipdata.isoff ,color:'rgb(228, 57, 97)' });
|
||||
topTitleRef3.value.setData({ title: t('messages.OffNum'), num: tipdata.isoff ,color:'' });
|
||||
changedevlist(val.citylist);
|
||||
}
|
||||
onMounted(() => {
|
||||
|
||||
@ -33,7 +33,7 @@
|
||||
<p>时间:<span>{{ res.ts }}</span></p>
|
||||
</div>
|
||||
<div class="item-text">
|
||||
<p><span :style="{ color: JSON.parse(res.status) ? '#20aec5' : 'rgb(228, 57, 97)' }">{{ JSON.parse(res.status) ? t('messages.onLine') : t('messages.offline') }}</span></p>
|
||||
<p><span :style="{ color: JSON.parse(res.status) ? '#20aec5' : '' }">{{ JSON.parse(res.status) ? t('messages.onLine') : t('messages.offline') }}</span></p>
|
||||
<p>{{t('messages.JiqiName')}}:<span>{{ res.name }}</span></p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -145,7 +145,7 @@ function changedevlist(val: any) {
|
||||
res.realityDate,
|
||||
JSON.parse(res.deviceStatus)
|
||||
? `<span style="color:#20aec5;">${t('messages.onLine')}</span>`
|
||||
: `<span style="color:rgb(228, 57, 97);">${t('messages.offline')}</span>`,
|
||||
: `<span style="">${t('messages.offline')}</span>`,
|
||||
// "",
|
||||
]);
|
||||
|
||||
@ -192,7 +192,7 @@ function setDataList(val: any) {
|
||||
//设置页面数据
|
||||
topTitleRef.value.setData({ title: t('messages.OnlineNum'), num: tipdata.ison });
|
||||
topTitleRef2.value.setData({ title: t('messages.TOTAL'), num: tipdata.isall });
|
||||
topTitleRef3.value.setData({ title: t('messages.OffNum'), num: tipdata.isoff,color:'rgb(228, 57, 97)' });
|
||||
topTitleRef3.value.setData({ title: t('messages.OffNum'), num: tipdata.isoff,color:'' });
|
||||
changedevlist(val.citylist);
|
||||
}
|
||||
onMounted(() => {
|
||||
|
||||
@ -33,7 +33,7 @@
|
||||
<p>时间:<span>{{ res.ts }}</span></p>
|
||||
</div>
|
||||
<div class="item-text">
|
||||
<p><span :style="{ color: JSON.parse(res.status) ? '#20aec5' : 'rgb(228, 57, 97)' }">{{ JSON.parse(res.status) ? t('messages.onLine') : t('messages.offline') }}</span></p>
|
||||
<p><span :style="{ color: JSON.parse(res.status) ? '#20aec5' : '' }">{{ JSON.parse(res.status) ? t('messages.onLine') : t('messages.offline') }}</span></p>
|
||||
<p>{{t('messages.DevName')}}:<span>{{ res.name }}</span></p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user