|
@@ -10,16 +10,6 @@
|
|
|
</div>
|
|
|
<div></div>
|
|
|
<img :src="item.url" :alt="item.text" />
|
|
|
-
|
|
|
- <!-- <div
|
|
|
- class="level-text"
|
|
|
- :class="{
|
|
|
- 'level-text-0': item['count'] == 0,
|
|
|
- 'level-text-5': item['count'] > 0,
|
|
|
- }"
|
|
|
- >{{ item['count'] == 0 ? '正常' : `${item['count']}` }}</div
|
|
|
- >
|
|
|
- </div> -->
|
|
|
<div class="level-text">
|
|
|
<div class="all-count">
|
|
|
<span>{{ `${item.allText} : ` }}</span>
|
|
@@ -27,11 +17,11 @@
|
|
|
</div>
|
|
|
<div class="warn-count">
|
|
|
<span>{{ `${item.warnText} : ` }}</span>
|
|
|
- <span class="num-count">{{ item.warnCount || 0 }}</span>
|
|
|
+ <span :class="item.warnCount ? 'num-count1' : 'num-count'">{{ item.warnCount || 0 }}</span>
|
|
|
</div>
|
|
|
<div class="close-count">
|
|
|
<span> {{ `${item.closeText} : ` }}</span>
|
|
|
- <span class="num-count">{{ item.closeCount || 0 }}</span>
|
|
|
+ <span :class="item.closeCount ? 'num-count1' : 'num-count'">{{ item.closeCount || 0 }}</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
@@ -42,410 +32,368 @@
|
|
|
</template>
|
|
|
|
|
|
<script lang="ts" setup>
|
|
|
- import { ref, reactive, defineProps, watch } from 'vue';
|
|
|
- import { getAssetURL } from '/@/utils/ui';
|
|
|
- let props = defineProps({
|
|
|
- devicedata: Object,
|
|
|
- });
|
|
|
- const emit = defineEmits(['goDetail']);
|
|
|
- let iconsMonitor = reactive({
|
|
|
- // fanmain: {
|
|
|
- // url: getAssetURL('home-container/device/zhushan.png'),
|
|
|
- // level: 0,
|
|
|
- // text: '',
|
|
|
- // },
|
|
|
+import { ref, reactive, defineProps, watch } from 'vue';
|
|
|
+import { getAssetURL } from '/@/utils/ui';
|
|
|
+let props = defineProps({
|
|
|
+ devicedata: Object,
|
|
|
+});
|
|
|
+const emit = defineEmits(['goDetail']);
|
|
|
+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,
|
|
|
+ },
|
|
|
+});
|
|
|
|
|
|
- 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;
|
|
|
+};
|
|
|
|
|
|
- const resetScroll = (e: Event) => {
|
|
|
- if (e.target && e.target) (e.target as Element).scrollTop = 0;
|
|
|
- };
|
|
|
+//跳转详情
|
|
|
+function getDetail() {
|
|
|
+ // emit('goDetail', 'windrect')
|
|
|
+}
|
|
|
|
|
|
- //跳转详情
|
|
|
- function getDetail() {
|
|
|
- // emit('goDetail', 'windrect')
|
|
|
+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,
|
|
|
}
|
|
|
-
|
|
|
- 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');
|
|
|
- }
|
|
|
+@font-face {
|
|
|
+ font-family: 'douyuFont';
|
|
|
+ src: url('../../../../../assets/font/douyuFont.otf');
|
|
|
+}
|
|
|
|
|
|
- .windDevice {
|
|
|
- width: 100%;
|
|
|
- // min-width: ;
|
|
|
- height: 100%;
|
|
|
- position: relative;
|
|
|
+.windDevice {
|
|
|
+ width: 100%;
|
|
|
+ // min-width: ;
|
|
|
+ height: 100%;
|
|
|
+ position: relative;
|
|
|
|
|
|
- .title-top {
|
|
|
- position: absolute;
|
|
|
- top: 9px;
|
|
|
- left: 46px;
|
|
|
- color: #fff;
|
|
|
- font-size: 16px;
|
|
|
- font-family: 'douyuFont';
|
|
|
- cursor: pointer;
|
|
|
+ .title-top {
|
|
|
+ position: absolute;
|
|
|
+ top: 9px;
|
|
|
+ left: 46px;
|
|
|
+ color: #fff;
|
|
|
+ font-size: 16px;
|
|
|
+ font-family: 'douyuFont';
|
|
|
+ cursor: pointer;
|
|
|
|
|
|
- &:hover {
|
|
|
- color: #66ffff;
|
|
|
- }
|
|
|
+ &:hover {
|
|
|
+ color: #66ffff;
|
|
|
}
|
|
|
+ }
|
|
|
|
|
|
- .device-contents {
|
|
|
- position: absolute;
|
|
|
- top: 30px;
|
|
|
- left: 0;
|
|
|
- height: calc(100% - 30px);
|
|
|
- padding: 10px 15px;
|
|
|
- box-sizing: border-box;
|
|
|
- width: 100%;
|
|
|
- overflow-y: auto;
|
|
|
+ .device-contents {
|
|
|
+ position: absolute;
|
|
|
+ top: 30px;
|
|
|
+ left: 0;
|
|
|
+ height: calc(100% - 30px);
|
|
|
+ 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%;
|
|
|
+ .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
|
|
|
+ // 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: 47px;
|
|
|
- left: 185px;
|
|
|
- color: #ffffffe0;
|
|
|
- font-size: 13px;
|
|
|
- text-align: center;
|
|
|
- letter-spacing: 1px;
|
|
|
+ .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: 47px;
|
|
|
+ left: 185px;
|
|
|
+ color: #ffffffe0;
|
|
|
+ font-size: 13px;
|
|
|
+ text-align: center;
|
|
|
+ letter-spacing: 1px;
|
|
|
|
|
|
- .all-count,
|
|
|
- .warn-count,
|
|
|
- .close-count {
|
|
|
- // margin: 0px 5px;
|
|
|
- .num-count {
|
|
|
- font-family: 'douyuFont';
|
|
|
- font-size: 12px;
|
|
|
- }
|
|
|
- }
|
|
|
+ .num-count,
|
|
|
+ .num-count1 {
|
|
|
+ font-family: 'douyuFont';
|
|
|
+ font-size: 12px;
|
|
|
}
|
|
|
|
|
|
- // .level-text-0 {
|
|
|
- // color: rgb(145, 230, 9);
|
|
|
- // text-shadow: 2px 2px 4px #001c22;
|
|
|
- // }
|
|
|
-
|
|
|
- // .level-text-1 {
|
|
|
- // color: rgb(0, 242, 255);
|
|
|
- // text-shadow: 2px 2px 4px #001c22;
|
|
|
- // }
|
|
|
-
|
|
|
- // .level-text-2 {
|
|
|
- // color: #ffff35;
|
|
|
- // text-shadow: 2px 2px 4px #313100;
|
|
|
- // }
|
|
|
-
|
|
|
- // .level-text-3 {
|
|
|
- // color: #ffbe69;
|
|
|
- // text-shadow: 2px 2px 4px #271600;
|
|
|
- // }
|
|
|
-
|
|
|
- // .level-text-4 {
|
|
|
- // color: #ff6f00;
|
|
|
- // // color: #09caff;
|
|
|
- // text-shadow: 2px 2px 4px #060200;
|
|
|
- // }
|
|
|
-
|
|
|
- // .level-text-5 {
|
|
|
- // width: 35px;
|
|
|
- // color: #ff0000;
|
|
|
- // text-shadow: 2px 2px 4px #200000;
|
|
|
- // }
|
|
|
-
|
|
|
- // .level-text-6 {
|
|
|
- // color: #bbb;
|
|
|
- // text-shadow: 2px 2px 4px #001c22;
|
|
|
- // }
|
|
|
-
|
|
|
- img {
|
|
|
- // width: 208px; //lxh
|
|
|
- // height: 69px;//lxh
|
|
|
- width: 427px;
|
|
|
- height: 79px;
|
|
|
+ .warn-count,.close-count {
|
|
|
+ .num-count {
|
|
|
+ color: #ffffffe0;
|
|
|
+ }
|
|
|
+ .num-count1 {
|
|
|
+ color: #ff0000;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
|
|
|
- @keyframes move {
|
|
|
- 0% {
|
|
|
- transform: translateY(0px);
|
|
|
- }
|
|
|
-
|
|
|
- 100% {
|
|
|
- transform: translateY(-269px);
|
|
|
- }
|
|
|
+ img {
|
|
|
+ width: 427px;
|
|
|
+ height: 79px;
|
|
|
}
|
|
|
+ }
|
|
|
|
|
|
- @keyframes move1 {
|
|
|
- 0% {
|
|
|
- transform: translateY(0px);
|
|
|
- }
|
|
|
+ @keyframes move {
|
|
|
+ 0% {
|
|
|
+ transform: translateY(0px);
|
|
|
}
|
|
|
|
|
|
- .wrapper {
|
|
|
- position: absolute;
|
|
|
- // top: 40px; lxh
|
|
|
- // left: 82px;lxh
|
|
|
- top: 47px;
|
|
|
- left: 100px;
|
|
|
- color: #ffffffe0;
|
|
|
- font-size: 13px;
|
|
|
- text-align: center;
|
|
|
- letter-spacing: 1px;
|
|
|
+ 100% {
|
|
|
+ transform: translateY(-269px);
|
|
|
}
|
|
|
+ }
|
|
|
|
|
|
- .level-warning {
|
|
|
- font-weight: 600;
|
|
|
- color: #ff2e2e;
|
|
|
- text-shadow: 2px 2px 4px #000000;
|
|
|
+ @keyframes move1 {
|
|
|
+ 0% {
|
|
|
+ transform: translateY(0px);
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
+ .wrapper {
|
|
|
+ position: absolute;
|
|
|
+ top: 47px;
|
|
|
+ left: 100px;
|
|
|
+ color: #ffffffe0;
|
|
|
+ font-size: 13px;
|
|
|
+ text-align: center;
|
|
|
+ letter-spacing: 1px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .level-warning {
|
|
|
+ font-weight: 600;
|
|
|
+ color: #ff2e2e;
|
|
|
+ text-shadow: 2px 2px 4px #000000;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
+}
|
|
|
|
|
|
- :deep .zxm-select-selector {
|
|
|
- width: 100%;
|
|
|
- height: 30px !important;
|
|
|
- padding: 0 11px 0px 25px !important;
|
|
|
- background-color: rgba(8, 148, 255, 0.3) !important;
|
|
|
- border: 1px solid #1d80da !important;
|
|
|
- }
|
|
|
+:deep .zxm-select-selector {
|
|
|
+ width: 100%;
|
|
|
+ height: 30px !important;
|
|
|
+ padding: 0 11px 0px 25px !important;
|
|
|
+ background-color: rgba(8, 148, 255, 0.3) !important;
|
|
|
+ border: 1px solid #1d80da !important;
|
|
|
+}
|
|
|
|
|
|
- :deep .zxm-select-selection-item {
|
|
|
- color: #fff !important;
|
|
|
- line-height: 28px !important;
|
|
|
- }
|
|
|
+:deep .zxm-select-selection-item {
|
|
|
+ color: #fff !important;
|
|
|
+ line-height: 28px !important;
|
|
|
+}
|
|
|
|
|
|
- :deep .zxm-select-arrow {
|
|
|
- color: #fff !important;
|
|
|
- }
|
|
|
+:deep .zxm-select-arrow {
|
|
|
+ color: #fff !important;
|
|
|
+}
|
|
|
</style>
|