|
@@ -0,0 +1,350 @@
|
|
|
+<template>
|
|
|
+ <div class="device-contents">
|
|
|
+ <div class="icons-box" @mouseleave="resetScroll">
|
|
|
+ <template v-for="(item, key) in iconsMonitor" :key="key">
|
|
|
+ <div class="icon-item" v-if="item.text">
|
|
|
+ <div class="wrapper">
|
|
|
+ {{ item.text }}
|
|
|
+ </div>
|
|
|
+ <div></div>
|
|
|
+ <img :src="item.url" :alt="item.text" />
|
|
|
+ <div class="level-text">
|
|
|
+ <div class="all-count">
|
|
|
+ <span>{{ `${item.allText} : ` }}</span>
|
|
|
+ <span class="num-count">{{ item.allCount || 0 }}</span>
|
|
|
+ </div>
|
|
|
+ <div class="warn-count">
|
|
|
+ <span>{{ `${item.warnText} : ` }}</span>
|
|
|
+ <span :class="item.warnCount ? 'num-count1' : 'num-count'">{{ item.warnCount || 0 }}</span>
|
|
|
+ </div>
|
|
|
+ <div class="close-count">
|
|
|
+ <span> {{ `${item.closeText} : ` }}</span>
|
|
|
+ <span :class="item.closeCount ? 'num-count1' : 'num-count'">{{ item.closeCount || 0 }}</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script lang="ts" setup>
|
|
|
+ import { reactive, defineProps, watch } from 'vue';
|
|
|
+ import { getAssetURL } from '/@/utils/ui';
|
|
|
+ let props = defineProps({
|
|
|
+ devicedata: Object,
|
|
|
+ });
|
|
|
+ let iconsMonitor = reactive({
|
|
|
+ fanmain: {
|
|
|
+ url: getAssetURL('vent/alarm-icons/zhushan.png'),
|
|
|
+ level: 100,
|
|
|
+ text: '',
|
|
|
+ allText: '总数',
|
|
|
+ warnText: '报警数',
|
|
|
+ closeText: '断开数',
|
|
|
+ allCount: 0,
|
|
|
+ warnCount: 0,
|
|
|
+ closeCount: 0,
|
|
|
+ },
|
|
|
+ fanlocal: {
|
|
|
+ url: getAssetURL('vent/alarm-icons/js.png'),
|
|
|
+ level: 100,
|
|
|
+ text: '',
|
|
|
+ allText: '总数',
|
|
|
+ warnText: '报警数',
|
|
|
+ closeText: '断开数',
|
|
|
+ allCount: 0,
|
|
|
+ warnCount: 0,
|
|
|
+ closeCount: 0,
|
|
|
+ },
|
|
|
+ fanlocaldp: {
|
|
|
+ url: getAssetURL('vent/alarm-icons/js.png'),
|
|
|
+ level: 100,
|
|
|
+ text: '',
|
|
|
+ allText: '总数',
|
|
|
+ warnText: '报警数',
|
|
|
+ closeText: '断开数',
|
|
|
+ allCount: 0,
|
|
|
+ warnCount: 0,
|
|
|
+ closeCount: 0,
|
|
|
+ },
|
|
|
+ gate: {
|
|
|
+ url: getAssetURL('vent/alarm-icons/fm.png'),
|
|
|
+ level: 100,
|
|
|
+ text: '',
|
|
|
+ allText: '总数',
|
|
|
+ warnText: '报警数',
|
|
|
+ closeText: '断开数',
|
|
|
+ allCount: 0,
|
|
|
+ warnCount: 0,
|
|
|
+ closeCount: 0,
|
|
|
+ },
|
|
|
+ window: {
|
|
|
+ url: getAssetURL('vent/alarm-icons/fc.png'),
|
|
|
+ level: 100,
|
|
|
+ text: '',
|
|
|
+ allText: '总数',
|
|
|
+ warnText: '报警数',
|
|
|
+ closeText: '断开数',
|
|
|
+ allCount: 0,
|
|
|
+ warnCount: 0,
|
|
|
+ closeCount: 0,
|
|
|
+ },
|
|
|
+ windrect: {
|
|
|
+ url: getAssetURL('vent/alarm-icons/cf.png'),
|
|
|
+ level: 100,
|
|
|
+ text: '',
|
|
|
+ allText: '总数',
|
|
|
+ warnText: '报警数',
|
|
|
+ closeText: '断开数',
|
|
|
+ allCount: 0,
|
|
|
+ warnCount: 0,
|
|
|
+ closeCount: 0,
|
|
|
+ },
|
|
|
+ forcFan: {
|
|
|
+ url: getAssetURL('vent/alarm-icons/yafeng.png'),
|
|
|
+ level: 100,
|
|
|
+ text: '',
|
|
|
+ allText: '总数',
|
|
|
+ warnText: '报警数',
|
|
|
+ closeText: '断开数',
|
|
|
+ allCount: 0,
|
|
|
+ warnCount: 0,
|
|
|
+ closeCount: 0,
|
|
|
+ },
|
|
|
+ spray: {
|
|
|
+ url: getAssetURL('vent/alarm-icons/penlin.png'),
|
|
|
+ level: 100,
|
|
|
+ text: '',
|
|
|
+ allText: '总数',
|
|
|
+ warnText: '报警数',
|
|
|
+ closeText: '断开数',
|
|
|
+ allCount: 0,
|
|
|
+ warnCount: 0,
|
|
|
+ closeCount: 0,
|
|
|
+ },
|
|
|
+ dustdev: {
|
|
|
+ url: getAssetURL('vent/alarm-icons/penfen.png'),
|
|
|
+ level: 100,
|
|
|
+ text: '',
|
|
|
+ allText: '总数',
|
|
|
+ warnText: '报警数',
|
|
|
+ closeText: '断开数',
|
|
|
+ allCount: 0,
|
|
|
+ warnCount: 0,
|
|
|
+ closeCount: 0,
|
|
|
+ },
|
|
|
+ nitrogen: {
|
|
|
+ url: getAssetURL('vent/alarm-icons/zhudan.png'),
|
|
|
+ level: 100,
|
|
|
+ text: '',
|
|
|
+ allText: '总数',
|
|
|
+ warnText: '报警数',
|
|
|
+ closeText: '断开数',
|
|
|
+ allCount: 0,
|
|
|
+ warnCount: 0,
|
|
|
+ closeCount: 0,
|
|
|
+ },
|
|
|
+ pulping: {
|
|
|
+ url: getAssetURL('vent/alarm-icons/zhujiang.png'),
|
|
|
+ level: 100,
|
|
|
+ text: '',
|
|
|
+ allText: '总数',
|
|
|
+ warnText: '报警数',
|
|
|
+ closeText: '断开数',
|
|
|
+ allCount: 0,
|
|
|
+ warnCount: 0,
|
|
|
+ closeCount: 0,
|
|
|
+ },
|
|
|
+ atomizing: {
|
|
|
+ url: getAssetURL('vent/alarm-icons/pw.png'),
|
|
|
+ level: 100,
|
|
|
+ text: '',
|
|
|
+ allText: '总数',
|
|
|
+ warnText: '报警数',
|
|
|
+ closeText: '断开数',
|
|
|
+ allCount: 0,
|
|
|
+ warnCount: 0,
|
|
|
+ closeCount: 0,
|
|
|
+ },
|
|
|
+ dustsensor: {
|
|
|
+ url: getAssetURL('vent/alarm-icons/ccq.png'),
|
|
|
+ level: 100,
|
|
|
+ text: '',
|
|
|
+ allText: '总数',
|
|
|
+ warnText: '报警数',
|
|
|
+ closeText: '断开数',
|
|
|
+ allCount: 0,
|
|
|
+ warnCount: 0,
|
|
|
+ closeCount: 0,
|
|
|
+ },
|
|
|
+ gas: {
|
|
|
+ url: getAssetURL('vent/alarm-icons/wasichoucaig.png'),
|
|
|
+ level: 100,
|
|
|
+ text: '',
|
|
|
+ allText: '总数',
|
|
|
+ warnText: '报警数',
|
|
|
+ closeText: '断开数',
|
|
|
+ allCount: 0,
|
|
|
+ warnCount: 0,
|
|
|
+ closeCount: 0,
|
|
|
+ },
|
|
|
+ pump: {
|
|
|
+ url: getAssetURL('vent/alarm-icons/wasibeng.png'),
|
|
|
+ level: 100,
|
|
|
+ text: '',
|
|
|
+ allText: '总数',
|
|
|
+ warnText: '报警数',
|
|
|
+ closeText: '断开数',
|
|
|
+ allCount: 0,
|
|
|
+ warnCount: 0,
|
|
|
+ closeCount: 0,
|
|
|
+ },
|
|
|
+ modelsensor: {
|
|
|
+ url: getAssetURL('vent/alarm-icons/cf.png'),
|
|
|
+ level: 100,
|
|
|
+ text: '',
|
|
|
+ allText: '总数',
|
|
|
+ warnText: '报警数',
|
|
|
+ closeText: '断开数',
|
|
|
+ allCount: 0,
|
|
|
+ warnCount: 0,
|
|
|
+ closeCount: 0,
|
|
|
+ },
|
|
|
+ });
|
|
|
+
|
|
|
+ const resetScroll = (e: Event) => {
|
|
|
+ if (e.target && e.target) (e.target as Element).scrollTop = 0;
|
|
|
+ };
|
|
|
+
|
|
|
+ watch(
|
|
|
+ () => props.devicedata,
|
|
|
+ (val) => {
|
|
|
+ Object.keys(iconsMonitor).forEach((el) => {
|
|
|
+ if (val && val[el]) {
|
|
|
+ iconsMonitor[el].level = val[el].maxLevel;
|
|
|
+ iconsMonitor[el]['text'] = val[el].name;
|
|
|
+ // iconsMonitor[el]['count'] = val[el].count;
|
|
|
+ iconsMonitor[el].allCount = val[el].totalcount;
|
|
|
+ iconsMonitor[el].warnCount = val[el].count;
|
|
|
+ iconsMonitor[el].closeCount = val[el].netstatus;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ {
|
|
|
+ deep: true,
|
|
|
+ }
|
|
|
+ );
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="less" scoped>
|
|
|
+ @font-face {
|
|
|
+ font-family: 'douyuFont';
|
|
|
+ src: url('/@/assets/font/douyuFont.otf');
|
|
|
+ }
|
|
|
+
|
|
|
+ .device-contents {
|
|
|
+ height: 100%;
|
|
|
+ padding: 10px 15px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ width: 100%;
|
|
|
+ overflow-y: auto;
|
|
|
+
|
|
|
+ .icons-box {
|
|
|
+ // display: flex; lxh
|
|
|
+ // flex-wrap: wrap; lxh
|
|
|
+ // justify-content: space-around;
|
|
|
+ // justify-content: space-between; lxh
|
|
|
+ height: 100%;
|
|
|
+
|
|
|
+ // overflow-y: hidden;
|
|
|
+ // align-items: start ;
|
|
|
+ // &:hover {
|
|
|
+ // overflow-y: auto;
|
|
|
+ // & > .icon-item {
|
|
|
+ // // animation-play-state: paused; lxh
|
|
|
+ // // animation: move1 2s linear;lxh
|
|
|
+ // }
|
|
|
+ // }
|
|
|
+ .icon-item {
|
|
|
+ position: relative;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ padding: 3px;
|
|
|
+ // animation: move 10s linear infinite;lxh
|
|
|
+
|
|
|
+ .level-text {
|
|
|
+ width: 220px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ position: absolute;
|
|
|
+ // top: 42px;lxh
|
|
|
+ // right: 25px;lxh
|
|
|
+ // color: #fff;lxh
|
|
|
+ // font-family: 'douyuFont';lxh
|
|
|
+ // font-size: 12px;lxh
|
|
|
+ top: 37px;
|
|
|
+ left: 165px;
|
|
|
+ color: #ffffffe0;
|
|
|
+ font-size: 13px;
|
|
|
+ text-align: center;
|
|
|
+ letter-spacing: 1px;
|
|
|
+
|
|
|
+ .num-count,
|
|
|
+ .num-count1 {
|
|
|
+ font-family: 'douyuFont';
|
|
|
+ font-size: 12px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .warn-count,
|
|
|
+ .close-count {
|
|
|
+ .num-count {
|
|
|
+ color: #ffffffe0;
|
|
|
+ }
|
|
|
+ .num-count1 {
|
|
|
+ color: #ff0000;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ img {
|
|
|
+ width: 427px;
|
|
|
+ height: 64px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ @keyframes move {
|
|
|
+ 0% {
|
|
|
+ transform: translateY(0px);
|
|
|
+ }
|
|
|
+
|
|
|
+ 100% {
|
|
|
+ transform: translateY(-269px);
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ @keyframes move1 {
|
|
|
+ 0% {
|
|
|
+ transform: translateY(0px);
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .wrapper {
|
|
|
+ position: absolute;
|
|
|
+ top: 37px;
|
|
|
+ left: 90px;
|
|
|
+ color: #ffffffe0;
|
|
|
+ font-size: 13px;
|
|
|
+ text-align: center;
|
|
|
+ letter-spacing: 1px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .level-warning {
|
|
|
+ font-weight: 600;
|
|
|
+ color: #ff2e2e;
|
|
|
+ text-shadow: 2px 2px 4px #000000;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+</style>
|