|
@@ -1,178 +0,0 @@
|
|
|
-<!-- eslint-disable vue/multi-word-component-names -->
|
|
|
-<template>
|
|
|
- <ModuleBasic :title="config.moduleName" :version="config.showStyle?.version" :size="config.showStyle?.size" :position="config.showStyle?.position">
|
|
|
- <CostumeHeader>
|
|
|
- <template #select>
|
|
|
- <!-- 填写空的div以覆盖默认的选择框 -->
|
|
|
- <div></div>
|
|
|
- </template>
|
|
|
- <div class="w-200px flex flex-items-center">
|
|
|
- <RightCircleOutlined class="w-30px" />
|
|
|
- <div v-for="(label, prop) in config.moduleData.header" :key="prop" class="flex-grow-1">
|
|
|
- {{ label }}
|
|
|
- <span> {{ get(scene, prop) }}条 </span>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </CostumeHeader>
|
|
|
- <div class="timeline">
|
|
|
- <div v-for="(item, i) in warns" :key="`svvhccdw-${i}`" class="flex items-center timeline-item">
|
|
|
- <div class="timeline-item__icon" :class="`timeline-item__icon_${item.color}`"></div>
|
|
|
- <div class="timeline-item__dot"></div>
|
|
|
- <div class="timeline-item__label">{{ item.label }}</div>
|
|
|
- <div :class="`timeline-item__value_${item.color}`">{{ item.count }}</div>
|
|
|
- </div>
|
|
|
- <div class="timeline-component"></div>
|
|
|
- </div>
|
|
|
- </ModuleBasic>
|
|
|
-</template>
|
|
|
-<script lang="ts" setup>
|
|
|
- import { computed, onMounted, ref } from 'vue';
|
|
|
- // import { list as cfgList } from '@/views/vent/deviceManager/configurationTable/configuration.api';
|
|
|
- // import { list } from '@/views/vent/deviceManager/deviceTable/device.api';
|
|
|
- import ModuleBasic from './moduleBasic.vue';
|
|
|
- import CostumeHeader from './CostumeHeader.vue';
|
|
|
- import { RightCircleOutlined } from '@ant-design/icons-vue';
|
|
|
- import { useInitScene } from '../hooks/useInit';
|
|
|
- import { get } from '../../billboard/utils';
|
|
|
- import _ from 'lodash-es';
|
|
|
- // import MiniBoard from './MiniBoard.vue';
|
|
|
- // import mapComponent from './components/3Dmap/index.vue';
|
|
|
-
|
|
|
- // 设备类别,是个枚举 TODO: 将手动换为自动获取类别
|
|
|
- const devicekind = 'warn';
|
|
|
-
|
|
|
- // const configs = ref<{ prop: string; label: string }[]>([]);
|
|
|
- // function fetchConfig() {
|
|
|
- // cfgList({
|
|
|
- // deviceType: 'devicekind',
|
|
|
- // }).then(({ records }) => {
|
|
|
- // const moduleData = JSON.parse(records[0]?.moduleData);
|
|
|
- // configs.value = Object.keys(moduleData).map((k) => {
|
|
|
- // return {
|
|
|
- // prop: k,
|
|
|
- // label: moduleData[k],
|
|
|
- // };
|
|
|
- // });
|
|
|
- // });
|
|
|
- // }
|
|
|
- const config = ref({
|
|
|
- moduleName: '设备告警',
|
|
|
- moduleData: {
|
|
|
- header: {
|
|
|
- 'netstatus.val': '网络断开',
|
|
|
- },
|
|
|
- main: {
|
|
|
- 'red.val': '严重',
|
|
|
- 'orange.val': '非常严重',
|
|
|
- 'yellow.val': '较严重',
|
|
|
- 'blue.val': '一般严重',
|
|
|
- 'alarm.val': '报警',
|
|
|
- },
|
|
|
- },
|
|
|
- showStyle: {
|
|
|
- size: 'width:450px;height:280px;',
|
|
|
- position: 'right:0px;top:640px;',
|
|
|
- version: 'enhanced',
|
|
|
- },
|
|
|
- });
|
|
|
- // const { config: remoteConfig, fetchConfig } = useInitConfig(devicekind);
|
|
|
- const { scene, fetchScene } = useInitScene(devicekind);
|
|
|
-
|
|
|
- const warns = computed(() => {
|
|
|
- const colors = ['red', 'orange', 'yellow', 'green', 'blue'];
|
|
|
- let i = -1;
|
|
|
- return _.map(config.value.moduleData.main || [], (label, prop) => {
|
|
|
- i += 1;
|
|
|
- return {
|
|
|
- label,
|
|
|
- count: get(scene, prop),
|
|
|
- color: colors[i],
|
|
|
- };
|
|
|
- });
|
|
|
- });
|
|
|
-
|
|
|
- onMounted(() => {
|
|
|
- fetchScene();
|
|
|
- // fetchConfig();
|
|
|
- });
|
|
|
-</script>
|
|
|
-<style lang="less" scoped>
|
|
|
- @import '@/design/vent/color.less';
|
|
|
-
|
|
|
- .timeline-item {
|
|
|
- height: 20%;
|
|
|
- }
|
|
|
- .timeline-item__icon_red {
|
|
|
- background-image: url('@/assets/images/home-container/configurable/warn_icon_5.png');
|
|
|
- }
|
|
|
- .timeline-item__icon_orange {
|
|
|
- background-image: url('@/assets/images/home-container/configurable/warn_icon_4.png');
|
|
|
- }
|
|
|
- .timeline-item__icon_yellow {
|
|
|
- background-image: url('@/assets/images/home-container/configurable/warn_icon_3.png');
|
|
|
- }
|
|
|
- .timeline-item__icon_green {
|
|
|
- background-image: url('@/assets/images/home-container/configurable/warn_icon_2.png');
|
|
|
- }
|
|
|
- .timeline-item__icon_blue {
|
|
|
- background-image: url('@/assets/images/home-container/configurable/warn_icon_1.png');
|
|
|
- }
|
|
|
- .timeline-item__icon {
|
|
|
- width: 33px;
|
|
|
- height: 35px;
|
|
|
- margin-left: 50px;
|
|
|
- background-repeat: no-repeat;
|
|
|
- background-position: center center;
|
|
|
- }
|
|
|
- .timeline-item__dot {
|
|
|
- width: 10px;
|
|
|
- height: 10px;
|
|
|
- margin-left: 70px;
|
|
|
- background-color: @vent-gas-primary-bg;
|
|
|
- border-radius: 5px;
|
|
|
- position: relative;
|
|
|
- }
|
|
|
- .timeline-item__dot::before {
|
|
|
- content: '';
|
|
|
- position: absolute;
|
|
|
- top: -3px;
|
|
|
- left: -3px;
|
|
|
- width: 16px;
|
|
|
- height: 16px;
|
|
|
- border-radius: 8px;
|
|
|
- border: 1px solid @vent-gas-tab-border;
|
|
|
- }
|
|
|
- .timeline-item__label {
|
|
|
- width: 100px;
|
|
|
- margin-left: 70px;
|
|
|
- }
|
|
|
- .timeline-item__value_red {
|
|
|
- color: red;
|
|
|
- }
|
|
|
- .timeline-item__value_orange {
|
|
|
- color: orange;
|
|
|
- }
|
|
|
- .timeline-item__value_yellow {
|
|
|
- color: yellow;
|
|
|
- }
|
|
|
- .timeline-item__value_green {
|
|
|
- color: yellowgreen;
|
|
|
- }
|
|
|
- .timeline-item__value_blue {
|
|
|
- color: lightblue;
|
|
|
- }
|
|
|
-
|
|
|
- .timeline {
|
|
|
- height: 220px;
|
|
|
- padding: 5px;
|
|
|
- position: relative;
|
|
|
- }
|
|
|
- .timeline-component {
|
|
|
- position: absolute;
|
|
|
- width: 2px;
|
|
|
- height: 180px;
|
|
|
- top: 20px;
|
|
|
- left: 162px;
|
|
|
- background-image: @vent-configurable-home-timeline;
|
|
|
- }
|
|
|
-</style>
|