123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134 |
- <!-- eslint-disable vue/multi-word-component-names -->
- <template>
- <div class="w-100% h-100% pl-5px pr-5px">
- <div class="flex items-center h-140px">
- <div class="fire-warn__image">
- <div class="fire-warn__image_sub w-50px h-50px top-10px left-20px line-height-50px">低风险</div>
- <div class="fire-warn__image_sub w-30px h-30px top-50px left-70px line-height-30px">CO</div>
- <div class="fire-warn__image_sub w-20px h-20px top-80px left-20px line-height-20px">CO</div>
- </div>
- <CustomList type="A" :list-config="listAConfig" />
- </div>
- <CustomList type="B" :list-config="listBConfig" style="height: 80px; margin-top: 10px" />
- </div>
- </template>
- <script lang="ts" setup>
- import { computed, onMounted } from 'vue';
- // import { Config } from '../../../deviceManager/configurationTable/types';
- // import { useInitDevices } from '../hooks/useInit';
- // import { MenuItem, Menu, Dropdown } from 'ant-design-vue';
- // import { SwapOutlined, CaretUpOutlined, CaretDownOutlined } from '@ant-design/icons-vue';
- // import MiniBoard from './MiniBoard.vue';
- // import TimelineList from './TimelineList.vue';
- import CustomList from '../detail/CustomList.vue';
- import { getFormattedText } from '../../../../deviceManager/configurationTable/adapters';
- // import CustomChart from './CustomChart.vue';
- // import { get } from 'lodash-es';
- // import CommonTable from '../../billboard/components/CommonTable.vue';
- // import BlastDelta from '../../../monitorManager/deviceMonitor/components/device/modal/blastDelta.vue';
- // const { header: headerConfig, background, board, layout, list, chart, table } = props.moduleData;
- const listA = [
- {
- info: 'A',
- prop: 'a',
- label: '火情状态',
- color: 'yellow',
- },
- {
- info: 'A',
- prop: 'b',
- label: '回采位置',
- color: 'white',
- },
- {
- info: 'A',
- prop: 'c',
- label: '硐室火情',
- color: 'blue',
- },
- {
- info: 'A',
- prop: 'd',
- label: '联动设备状态',
- color: 'blue',
- },
- ];
- const listB = [
- {
- info: 'B',
- prop: 'a',
- label: '2024/07/22 07:00:00',
- color: 'white',
- },
- {
- info: 'B',
- prop: 'b',
- label: '2811工作面上隅角',
- color: 'white',
- },
- ];
- const listBConfig = computed(() => {
- const data = {
- a: '轻微堵塞',
- b: '甲烷0.02%',
- };
- return listB.map((b) => {
- return {
- ...b,
- value: getFormattedText(data, b.prop),
- // value: getFormattedText(data, b.prop, b.formatter),
- };
- });
- });
- const listAConfig = computed(() => {
- const data = {
- a: '缓慢氧化',
- b: '800m',
- c: '正常',
- d: '正常',
- };
- return listA.map((b) => {
- return {
- ...b,
- value: getFormattedText(data, b.prop),
- // value: getFormattedText(data, b.prop, b.formatter),
- };
- });
- });
- // const listType = computed(() => {
- // return list[0]?.type || 'A';
- // });
- // const { selectedDeviceID, selectedDevice, selectedDeviceSlot, selectedDeviceLabel, options, fetchDevices } = useInitDevices(
- // props.deviceType,
- // headerConfig
- // );
- onMounted(() => {
- // fetchDevices();
- });
- </script>
- <style lang="less" scoped>
- @import '@/design/vent/color.less';
- .fire-warn__image {
- position: relative;
- width: 200px;
- height: 100%;
- margin: 0 10px;
- background-repeat: no-repeat;
- background-position: center;
- background-size: 100% auto;
- background-image: url(/@/assets/images/home-container/configurable/deco_2.png);
- }
- .fire-warn__image_sub {
- text-align: center;
- position: absolute;
- background-repeat: no-repeat;
- background-position: center;
- background-size: 100% auto;
- background-image: url(/@/assets/images/home-container/configurable/deco_3.png);
- }
- </style>
|