|
|
@@ -1,21 +1,16 @@
|
|
|
<template>
|
|
|
<div class="center-container">
|
|
|
<div class="lr-box left-box">
|
|
|
- <div class = "container-title">
|
|
|
- <a-select
|
|
|
- class="title-select"
|
|
|
- ref="select"
|
|
|
- v-model:value="currentTitleValue"
|
|
|
- @change="handleTitleChange"
|
|
|
- >
|
|
|
+ <div class="container-title">
|
|
|
+ <a-select class="title-select" ref="select" v-model:value="currentTitleValue" @change="handleTitleChange">
|
|
|
<a-select-option value="2">15212工作面</a-select-option>
|
|
|
<a-select-option value="1598491318007898113">采煤工作面</a-select-option>
|
|
|
<a-select-option value="3">掘进工作面</a-select-option>
|
|
|
</a-select>
|
|
|
</div>
|
|
|
-
|
|
|
+
|
|
|
<div class="item">
|
|
|
- <dv-decoration7 style="height:30px;">
|
|
|
+ <dv-decoration7 style="height: 30px">
|
|
|
<div class="base-title">监测信息</div>
|
|
|
</dv-decoration7>
|
|
|
<div class="need-air-group vent-flex-row">
|
|
|
@@ -33,17 +28,11 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="item-container">
|
|
|
-
|
|
|
- <BarAndLineCustom
|
|
|
- xAxisPropType="time"
|
|
|
- :chartData="monitorData"
|
|
|
- height="240px"
|
|
|
- :propTypeArr="['jin', 'hui']"
|
|
|
- :option="echartsOption" />
|
|
|
+ <!-- <BarAndLineCustom xAxisPropType="time" :chartData="monitorData" height="240px" :propTypeArr="['jin', 'hui']" :option="echartsOption" /> -->
|
|
|
</div>
|
|
|
</div>
|
|
|
- <div class="item ">
|
|
|
- <dv-decoration7 style="height:30px;">
|
|
|
+ <div class="item">
|
|
|
+ <dv-decoration7 style="height: 30px">
|
|
|
<div class="base-title">基本信息</div>
|
|
|
</dv-decoration7>
|
|
|
<div class="base-information-box">
|
|
|
@@ -56,13 +45,12 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
-
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="lr-box right-box">
|
|
|
<div class="warning-box">
|
|
|
- <dv-decoration7 style="height:30px;">
|
|
|
+ <dv-decoration7 style="height: 30px">
|
|
|
<div class="base-title">报警信息</div>
|
|
|
</dv-decoration7>
|
|
|
<div class="warning-top">
|
|
|
@@ -91,19 +79,26 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="warning-monitor">
|
|
|
- <dv-scroll-board ref="scrollBoard" :config="warningConfig" style="width:100%;height:220px" />
|
|
|
+ <dv-scroll-board ref="scrollBoard" :config="warningConfig" style="width: 100%; height: 220px" />
|
|
|
</div>
|
|
|
<div class="device-monitor-box">
|
|
|
- <dv-decoration7 style="height:30px;">
|
|
|
+ <dv-decoration7 style="height: 30px">
|
|
|
<div class="base-title">设备信息</div>
|
|
|
</dv-decoration7>
|
|
|
<div class="device-btn-group">
|
|
|
- <div v-for="deviceType in deviceTypes" class="device-btn" :class="{'device-active': deviceActive === deviceType.type}" :key="deviceType.type" @click="showDeviceMonitor(deviceType)">{{ deviceType.text }}</div>
|
|
|
+ <div
|
|
|
+ v-for="deviceType in deviceTypes"
|
|
|
+ class="device-btn"
|
|
|
+ :class="{ 'device-active': deviceActive === deviceType.type }"
|
|
|
+ :key="deviceType.type"
|
|
|
+ @click="showDeviceMonitor(deviceType)"
|
|
|
+ >{{ deviceType.text }}</div
|
|
|
+ >
|
|
|
</div>
|
|
|
- <div class="device-table" :class="{'device-table-open': deviceActive, 'device-table-close': !deviceActive }">
|
|
|
+ <div class="device-table" :class="{ 'device-table-open': deviceActive, 'device-table-close': !deviceActive }">
|
|
|
<div class="vent-flex-row device-tab">
|
|
|
<div class="tab tab-active">设备监测</div>
|
|
|
- <a-divider type="vertical" style=" height: 10px; background-color: #aaa" />
|
|
|
+ <a-divider type="vertical" style="height: 10px; background-color: #aaa" />
|
|
|
<div class="tab">历史信息</div>
|
|
|
</div>
|
|
|
<div class="device-animation">
|
|
|
@@ -113,30 +108,46 @@
|
|
|
:dataSource="deviceMonitorData"
|
|
|
title="风门监测"
|
|
|
:isShowSelect="false"
|
|
|
- :isShowPagination = "false"
|
|
|
+ :isShowPagination="false"
|
|
|
:isShowActionColumn="true"
|
|
|
:scroll="{ y: 160 }"
|
|
|
>
|
|
|
<template #filterCell="{ column, record }">
|
|
|
<template v-if="record.frontGateOpenCtrl">
|
|
|
- <a-tag v-if="column.dataIndex === 'frontGateOpen' && record.frontGateOpen == 0 && record.frontGateClose == 0" color="red">正在打开</a-tag>
|
|
|
+ <a-tag v-if="column.dataIndex === 'frontGateOpen' && record.frontGateOpen == 0 && record.frontGateClose == 0" color="red"
|
|
|
+ >正在打开</a-tag
|
|
|
+ >
|
|
|
<a-tag v-else-if="column.dataIndex === 'frontGateOpen'" color="processing">打开</a-tag>
|
|
|
</template>
|
|
|
<template v-else>
|
|
|
- <a-tag v-if="column.dataIndex === 'frontGateOpen' && record.frontGateOpen == 0 && record.frontGateClose == 0" color="red">正在关闭</a-tag>
|
|
|
- <a-tag v-else-if="column.dataIndex === 'frontGateOpen' && record.frontGateOpen == 0 && record.frontGateClose == 1" color="default">关闭</a-tag>
|
|
|
- <a-tag v-else-if="column.dataIndex === 'frontGateOpen' && record.frontGateOpen == 1 && record.frontGateClose == 0" color="default">打开</a-tag>
|
|
|
+ <a-tag v-if="column.dataIndex === 'frontGateOpen' && record.frontGateOpen == 0 && record.frontGateClose == 0" color="red"
|
|
|
+ >正在关闭</a-tag
|
|
|
+ >
|
|
|
+ <a-tag v-else-if="column.dataIndex === 'frontGateOpen' && record.frontGateOpen == 0 && record.frontGateClose == 1" color="default"
|
|
|
+ >关闭</a-tag
|
|
|
+ >
|
|
|
+ <a-tag v-else-if="column.dataIndex === 'frontGateOpen' && record.frontGateOpen == 1 && record.frontGateClose == 0" color="default"
|
|
|
+ >打开</a-tag
|
|
|
+ >
|
|
|
</template>
|
|
|
<template v-if="record.rearGateOpenCtrl">
|
|
|
- <a-tag v-if="column.dataIndex === 'rearGateOpen' && record.rearGateOpen == 0 && record.rearGateClose == 0" color="red">正在打开</a-tag>
|
|
|
+ <a-tag v-if="column.dataIndex === 'rearGateOpen' && record.rearGateOpen == 0 && record.rearGateClose == 0" color="red"
|
|
|
+ >正在打开</a-tag
|
|
|
+ >
|
|
|
<a-tag v-else-if="column.dataIndex === 'rearGateOpen'" color="processing">打开</a-tag>
|
|
|
</template>
|
|
|
<template v-else>
|
|
|
- <a-tag v-if="column.dataIndex === 'rearGateOpen' && record.rearGateOpen == 0 && record.rearGateClose == 0" color="red">正在关闭</a-tag>
|
|
|
- <a-tag v-else-if="column.dataIndex === 'rearGateOpen' && record.rearGateOpen == 0 && record.rearGateClose == 1" color="default">关闭</a-tag>
|
|
|
- <a-tag v-else-if="column.dataIndex === 'rearGateOpen' && record.rearGateOpen == 1 && record.rearGateClose == 0" color="default">打开</a-tag>
|
|
|
+ <a-tag v-if="column.dataIndex === 'rearGateOpen' && record.rearGateOpen == 0 && record.rearGateClose == 0" color="red"
|
|
|
+ >正在关闭</a-tag
|
|
|
+ >
|
|
|
+ <a-tag v-else-if="column.dataIndex === 'rearGateOpen' && record.rearGateOpen == 0 && record.rearGateClose == 1" color="default"
|
|
|
+ >关闭</a-tag
|
|
|
+ >
|
|
|
+ <a-tag v-else-if="column.dataIndex === 'rearGateOpen' && record.rearGateOpen == 1 && record.rearGateClose == 0" color="default"
|
|
|
+ >打开</a-tag
|
|
|
+ >
|
|
|
</template>
|
|
|
-
|
|
|
+
|
|
|
<a-tag v-if="column.dataIndex === 'warnFlag'" :color="record.warnFlag == 0 ? 'green' : 'red'">{{
|
|
|
record.warnFlag == 0 ? '正常' : '报警'
|
|
|
}}</a-tag>
|
|
|
@@ -164,24 +175,22 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
-
|
|
|
</template>
|
|
|
<script lang="ts" setup>
|
|
|
-import { TableAction } from '/@/components/Table';
|
|
|
-import { onMounted, onUnmounted, ref, reactive } from 'vue'
|
|
|
-import { Decoration7 as DvDecoration7, ScrollBoard as DvScrollBoard, BorderBox7 as DvBorderBox7 } from '@kjgl77/datav-vue3'
|
|
|
-import { workerFaceDeviceList } from "../home.data";
|
|
|
-import BarAndLineCustom from '/@/components/chart/BarAndLineCustom.vue';
|
|
|
-import { list, deviceMonitor } from '../home.api'
|
|
|
-import echarts from '/@/utils/lib/echarts'
|
|
|
-import MonitorTable from '/@/views/vent/monitorManager/comment/MonitorTable.vue';
|
|
|
+ import { TableAction } from '/@/components/Table';
|
|
|
+ import { onMounted, onUnmounted, ref, reactive } from 'vue';
|
|
|
+ import { Decoration7 as DvDecoration7, ScrollBoard as DvScrollBoard, BorderBox7 as DvBorderBox7 } from '@kjgl77/datav-vue3';
|
|
|
+ import { workerFaceDeviceList } from '../home.data';
|
|
|
+ // import BarAndLineCustom from '/@/components/chart/BarAndLineCustom.vue';
|
|
|
+ import { list, deviceMonitor } from '../home.api';
|
|
|
+ import echarts from '/@/utils/lib/echarts';
|
|
|
+ import MonitorTable from '/@/views/vent/monitorManager/comment/MonitorTable.vue';
|
|
|
|
|
|
-const currentTitleValue = ref('2') // 监测工作面id
|
|
|
+ const currentTitleValue = ref('2'); // 监测工作面id
|
|
|
|
|
|
-const monitorData = ref([]) // 存放监测数据
|
|
|
+ const monitorData = ref([]); // 存放监测数据
|
|
|
|
|
|
-const echartsOption = reactive(
|
|
|
- {
|
|
|
+ const echartsOption = reactive({
|
|
|
tooltip: { trigger: 'axis', axisPointer: { lineStyle: { color: '#fff' } } },
|
|
|
legend: {
|
|
|
top: '10',
|
|
|
@@ -189,7 +198,7 @@ const echartsOption = reactive(
|
|
|
// itemWidth: 14, itemHeight: 5, itemGap: 10,
|
|
|
data: ['进风', '回风'],
|
|
|
right: '10px',
|
|
|
- textStyle: { fontSize: 12, color: '#fff' }
|
|
|
+ textStyle: { fontSize: 12, color: '#fff' },
|
|
|
},
|
|
|
grid: { x: 50, y: 50, x2: 12, y2: 40 },
|
|
|
xAxis: {
|
|
|
@@ -197,499 +206,521 @@ const echartsOption = reactive(
|
|
|
boundaryGap: false,
|
|
|
axisLine: { lineStyle: { color: '#57617B' } },
|
|
|
axisLabel: { textStyle: { color: '#ffffffcc' } },
|
|
|
- splitLine: { show: true, lineStyle: { color: '#57617B22', type: 'dashed', } },
|
|
|
- data: []
|
|
|
+ splitLine: { show: true, lineStyle: { color: '#57617B22', type: 'dashed' } },
|
|
|
+ data: [],
|
|
|
},
|
|
|
- yAxis: [{
|
|
|
- type: 'value',
|
|
|
- name:'m³/min',
|
|
|
- axisTick: {
|
|
|
- show: false
|
|
|
+ yAxis: [
|
|
|
+ {
|
|
|
+ type: 'value',
|
|
|
+ name: 'm³/min',
|
|
|
+ axisTick: {
|
|
|
+ show: false,
|
|
|
+ },
|
|
|
+ axisLine: { lineStyle: { show: true, color: '#57617B' } },
|
|
|
+ axisLabel: { margin: 10, textStyle: { fontSize: 12, color: '#ffffffcc' } },
|
|
|
+ splitLine: { show: true, lineStyle: { color: '#57617B22', type: 'dashed' } },
|
|
|
},
|
|
|
- axisLine: { lineStyle: { show: true, color: '#57617B' } },
|
|
|
- axisLabel: { margin: 10, textStyle: { fontSize: 12, color: '#ffffffcc' }},
|
|
|
- splitLine: { show: true, lineStyle: { color: '#57617B22', type: 'dashed', } }
|
|
|
- }],
|
|
|
- series: [{
|
|
|
- name: '进风', type: 'line', smooth: true, lineStyle: { normal: { width: 2 } },
|
|
|
- yAxisIndex: 0,
|
|
|
- areaStyle: {
|
|
|
- normal: {
|
|
|
- color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
|
|
|
- offset: 0,
|
|
|
- color: 'rgba(185,150,248,0.3)'
|
|
|
- }, {
|
|
|
- offset: 0.8,
|
|
|
- color: 'rgba(185,150,248,0)'
|
|
|
- }], false),
|
|
|
- shadowColor: 'rgba(0, 0, 0, 0.1)',
|
|
|
- shadowBlur: 10
|
|
|
- }
|
|
|
+ ],
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ name: '进风',
|
|
|
+ type: 'line',
|
|
|
+ smooth: true,
|
|
|
+ lineStyle: { normal: { width: 2 } },
|
|
|
+ yAxisIndex: 0,
|
|
|
+ areaStyle: {
|
|
|
+ normal: {
|
|
|
+ color: new echarts.graphic.LinearGradient(
|
|
|
+ 0,
|
|
|
+ 0,
|
|
|
+ 0,
|
|
|
+ 1,
|
|
|
+ [
|
|
|
+ {
|
|
|
+ offset: 0,
|
|
|
+ color: 'rgba(185,150,248,0.3)',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ offset: 0.8,
|
|
|
+ color: 'rgba(185,150,248,0)',
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ false
|
|
|
+ ),
|
|
|
+ shadowColor: 'rgba(0, 0, 0, 0.1)',
|
|
|
+ shadowBlur: 10,
|
|
|
+ },
|
|
|
+ },
|
|
|
+ itemStyle: { normal: { color: '#B996F8' } },
|
|
|
+ data: [],
|
|
|
},
|
|
|
- itemStyle: { normal: { color: '#B996F8' } },
|
|
|
- data: []
|
|
|
- }, {
|
|
|
- name: '回风', type: 'line', smooth: true, lineStyle: { normal: { width: 2 } },
|
|
|
- yAxisIndex: 0,
|
|
|
- areaStyle: {
|
|
|
- normal: {
|
|
|
- color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
|
|
|
- offset: 0,
|
|
|
- color: 'rgba(3, 194, 236, 0.3)'
|
|
|
- }, {
|
|
|
- offset: 0.8,
|
|
|
- color: 'rgba(3, 194, 236, 0)'
|
|
|
- }], false),
|
|
|
- shadowColor: 'rgba(0, 0, 0, 0.1)',
|
|
|
- shadowBlur: 10
|
|
|
- }
|
|
|
+ {
|
|
|
+ name: '回风',
|
|
|
+ type: 'line',
|
|
|
+ smooth: true,
|
|
|
+ lineStyle: { normal: { width: 2 } },
|
|
|
+ yAxisIndex: 0,
|
|
|
+ areaStyle: {
|
|
|
+ normal: {
|
|
|
+ color: new echarts.graphic.LinearGradient(
|
|
|
+ 0,
|
|
|
+ 0,
|
|
|
+ 0,
|
|
|
+ 1,
|
|
|
+ [
|
|
|
+ {
|
|
|
+ offset: 0,
|
|
|
+ color: 'rgba(3, 194, 236, 0.3)',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ offset: 0.8,
|
|
|
+ color: 'rgba(3, 194, 236, 0)',
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ false
|
|
|
+ ),
|
|
|
+ shadowColor: 'rgba(0, 0, 0, 0.1)',
|
|
|
+ shadowBlur: 10,
|
|
|
+ },
|
|
|
+ },
|
|
|
+ itemStyle: { normal: { color: '#03C2EC' } },
|
|
|
+ data: [],
|
|
|
},
|
|
|
- itemStyle: { normal: { color: '#03C2EC' } },
|
|
|
- data: []
|
|
|
- }]
|
|
|
- }
|
|
|
-)
|
|
|
-
|
|
|
-const warningConfig = reactive({
|
|
|
- data: [
|
|
|
- ['15211辅运顺槽', '测风装置', '异常信息'],
|
|
|
- ['2-2煤辅运大巷4联巷对面胶运联巷', '气源压力', '异常信息'],
|
|
|
- ['3-1煤回风延伸', '平均风速', '异常信息'],
|
|
|
- ['2-4煤辅运大巷水仓', '风门', '异常信息'],
|
|
|
- ['4-2煤南部集中回风二联巷', '测风装置', '异常信息'],
|
|
|
- ['5-2煤回风大巷西侧', '测风装置', '异常信息'],
|
|
|
- ['2-2煤辅运大巷三联巷', '风门', '异常信息'],
|
|
|
- ['利民风窗', '风窗', '异常信息'],
|
|
|
- ],
|
|
|
- index: false,
|
|
|
- columnWidth: [150],
|
|
|
- oddRowBGC: '#003B5155',
|
|
|
- evenRowBGC: '#0A273255',
|
|
|
- align: ['center', 'center', 'center'],
|
|
|
-})
|
|
|
-// 监测设备类型集合
|
|
|
-const deviceTypes = ref([
|
|
|
- {
|
|
|
- text: '风门',
|
|
|
- type: 'gate_normal',
|
|
|
- columnsType: 'gate_monitor'
|
|
|
- },
|
|
|
- {
|
|
|
- text: '风窗',
|
|
|
- type: 'window_normal',
|
|
|
- columnsType: 'window_monitor'
|
|
|
- },
|
|
|
- {
|
|
|
- text: '测风装置',
|
|
|
- type: 'windrect_rect',
|
|
|
- columnsType: 'windrect_monitor'
|
|
|
- },
|
|
|
-])
|
|
|
-const deviceActive = ref('') //当前监测的设备
|
|
|
-const deviceColumnsType = ref('') //存放当前监测的Columns的key值
|
|
|
-const deviceMonitorData = ref([]) //存放监测的数据集合
|
|
|
-// const deviceType =
|
|
|
+ ],
|
|
|
+ });
|
|
|
|
|
|
+ const warningConfig = reactive({
|
|
|
+ data: [
|
|
|
+ ['15211辅运顺槽', '测风装置', '异常信息'],
|
|
|
+ ['2-2煤辅运大巷4联巷对面胶运联巷', '气源压力', '异常信息'],
|
|
|
+ ['3-1煤回风延伸', '平均风速', '异常信息'],
|
|
|
+ ['2-4煤辅运大巷水仓', '风门', '异常信息'],
|
|
|
+ ['4-2煤南部集中回风二联巷', '测风装置', '异常信息'],
|
|
|
+ ['5-2煤回风大巷西侧', '测风装置', '异常信息'],
|
|
|
+ ['2-2煤辅运大巷三联巷', '风门', '异常信息'],
|
|
|
+ ['利民风窗', '风窗', '异常信息'],
|
|
|
+ ],
|
|
|
+ index: false,
|
|
|
+ columnWidth: [150],
|
|
|
+ oddRowBGC: '#003B5155',
|
|
|
+ evenRowBGC: '#0A273255',
|
|
|
+ align: ['center', 'center', 'center'],
|
|
|
+ });
|
|
|
+ // 监测设备类型集合
|
|
|
+ const deviceTypes = ref([
|
|
|
+ {
|
|
|
+ text: '风门',
|
|
|
+ type: 'gate_normal',
|
|
|
+ columnsType: 'gate_monitor',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ text: '风窗',
|
|
|
+ type: 'window_normal',
|
|
|
+ columnsType: 'window_monitor',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ text: '测风装置',
|
|
|
+ type: 'windrect_rect',
|
|
|
+ columnsType: 'windrect_monitor',
|
|
|
+ },
|
|
|
+ ]);
|
|
|
+ const deviceActive = ref(''); //当前监测的设备
|
|
|
+ const deviceColumnsType = ref(''); //存放当前监测的Columns的key值
|
|
|
+ const deviceMonitorData = ref([]); //存放监测的数据集合
|
|
|
+ // const deviceType =
|
|
|
|
|
|
-// 标题选择
|
|
|
-function handleTitleChange() {
|
|
|
- //
|
|
|
-}
|
|
|
-function showDeviceMonitor(deviceType) {
|
|
|
- if(deviceActive.value === deviceType.type){
|
|
|
- deviceActive.value = ''
|
|
|
- }else {
|
|
|
-
|
|
|
- deviceColumnsType.value = deviceType.columnsType
|
|
|
- deviceActive.value = deviceType.type
|
|
|
+ // 标题选择
|
|
|
+ function handleTitleChange() {
|
|
|
+ //
|
|
|
}
|
|
|
-}
|
|
|
-let timer: null | NodeJS.Timeout | undefined = null;
|
|
|
-function getMonitor() {
|
|
|
- if (timer == null) {
|
|
|
- timer = setTimeout(async () => {
|
|
|
- // 首页监测
|
|
|
- const result = await list({})
|
|
|
- if (result) {
|
|
|
- const list = result['sys_surface']
|
|
|
- const currentObj = list.find((item) => {
|
|
|
- return item.deviceID == currentTitleValue.value
|
|
|
- })
|
|
|
- if(currentObj){
|
|
|
- monitorData.value = currentObj['history']
|
|
|
- }
|
|
|
-
|
|
|
- }
|
|
|
- // 设备监测
|
|
|
- const deviceMonitorList = await deviceMonitor({ devicetype: 'sys', pagetype: 'normal', systemID: '2'})
|
|
|
- deviceMonitorList.forEach(item => {
|
|
|
- if(item['msgTxt']['type'] === deviceActive.value){
|
|
|
- deviceMonitorData.value = item['msgTxt']['datalist']
|
|
|
+ function showDeviceMonitor(deviceType) {
|
|
|
+ if (deviceActive.value === deviceType.type) {
|
|
|
+ deviceActive.value = '';
|
|
|
+ } else {
|
|
|
+ deviceColumnsType.value = deviceType.columnsType;
|
|
|
+ deviceActive.value = deviceType.type;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ let timer: null | NodeJS.Timeout | undefined = null;
|
|
|
+ function getMonitor() {
|
|
|
+ if (timer == null) {
|
|
|
+ timer = setTimeout(async () => {
|
|
|
+ // 首页监测
|
|
|
+ const result = await list({});
|
|
|
+ if (result) {
|
|
|
+ const list = result['sys_surface'];
|
|
|
+ const currentObj = list.find((item) => {
|
|
|
+ return item.deviceID == currentTitleValue.value;
|
|
|
+ });
|
|
|
+ if (currentObj) {
|
|
|
+ monitorData.value = currentObj['history'];
|
|
|
+ }
|
|
|
}
|
|
|
- })
|
|
|
+ // 设备监测
|
|
|
+ const deviceMonitorList = await deviceMonitor({ devicetype: 'sys', pagetype: 'normal', systemID: '2' });
|
|
|
+ deviceMonitorList.forEach((item) => {
|
|
|
+ if (item['msgTxt']['type'] === deviceActive.value) {
|
|
|
+ deviceMonitorData.value = item['msgTxt']['datalist'];
|
|
|
+ }
|
|
|
+ });
|
|
|
|
|
|
- if (timer) {
|
|
|
- timer = null
|
|
|
- }
|
|
|
- getMonitor()
|
|
|
- }, 1000)
|
|
|
-
|
|
|
+ if (timer) {
|
|
|
+ timer = null;
|
|
|
+ }
|
|
|
+ getMonitor();
|
|
|
+ }, 1000);
|
|
|
+ }
|
|
|
}
|
|
|
-}
|
|
|
-
|
|
|
-function goDetail() {
|
|
|
|
|
|
-}
|
|
|
+ function goDetail() {}
|
|
|
|
|
|
-onMounted(() => {
|
|
|
- getMonitor()
|
|
|
-})
|
|
|
-
|
|
|
-onUnmounted(() => {
|
|
|
- if(timer)
|
|
|
- timer = undefined
|
|
|
-})
|
|
|
+ onMounted(() => {
|
|
|
+ getMonitor();
|
|
|
+ });
|
|
|
|
|
|
+ onUnmounted(() => {
|
|
|
+ if (timer) timer = undefined;
|
|
|
+ });
|
|
|
</script>
|
|
|
|
|
|
<style lang="less" scoped>
|
|
|
-@ventSpace: zxm;
|
|
|
-.center-container{
|
|
|
- width: 100%;
|
|
|
- height: calc(100% - 100px);
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- position: absolute;
|
|
|
- top: 90px;
|
|
|
- .lr-box {
|
|
|
- height: 100%;
|
|
|
- width: 347px;
|
|
|
- color: #fff;
|
|
|
+ @ventSpace: zxm;
|
|
|
+ .center-container{
|
|
|
+ width: 100%;
|
|
|
+ height: calc(100% - 100px);
|
|
|
display: flex;
|
|
|
- flex-direction: column;
|
|
|
- pointer-events: auto;
|
|
|
-
|
|
|
- .container-title {
|
|
|
- width: 398px;
|
|
|
- height: 34px;
|
|
|
- position: relative;
|
|
|
- top: -30px;
|
|
|
- background: url('/@/assets/images/vent/new-home/container-title-bg.png') no-repeat;
|
|
|
- background-size: contain;
|
|
|
- padding: 0 0 0 180px;
|
|
|
- font-size: 20px;
|
|
|
+ justify-content: space-between;
|
|
|
+ position: absolute;
|
|
|
+ top: 90px;
|
|
|
+ .lr-box {
|
|
|
+ height: 100%;
|
|
|
+ width: 347px;
|
|
|
+ color: #fff;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
pointer-events: auto;
|
|
|
- position: relative;
|
|
|
|
|
|
- .title-select {
|
|
|
- width: 198px;
|
|
|
- position: absolute;
|
|
|
- top: 0;
|
|
|
- left: 180px;
|
|
|
+ .container-title {
|
|
|
+ width: 398px;
|
|
|
+ height: 34px;
|
|
|
+ position: relative;
|
|
|
+ top: -30px;
|
|
|
+ background: url('/@/assets/images/vent/new-home/container-title-bg.png') no-repeat;
|
|
|
+ background-size: contain;
|
|
|
+ padding: 0 0 0 180px;
|
|
|
+ font-size: 20px;
|
|
|
+ pointer-events: auto;
|
|
|
+ position: relative;
|
|
|
+
|
|
|
+ .title-select {
|
|
|
+ width: 198px;
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ left: 180px;
|
|
|
+ }
|
|
|
}
|
|
|
- }
|
|
|
- .item {
|
|
|
- // flex: 1;
|
|
|
- width: 100%;
|
|
|
- display: flex;
|
|
|
- justify-content: center;
|
|
|
- flex-direction: column;
|
|
|
- min-height: 200px;
|
|
|
- margin-bottom: 20px;
|
|
|
- align-items: center;
|
|
|
- .item-container {
|
|
|
+ .item {
|
|
|
+ // flex: 1;
|
|
|
width: 100%;
|
|
|
- height: 100%;
|
|
|
- }
|
|
|
- }
|
|
|
- .need-air-group{
|
|
|
- width: calc(100% - 20px);
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- border: 1px solid #20dbfd22;
|
|
|
- box-shadow: 0 0 5px #00d8ff22 inset;
|
|
|
- padding: 10px;
|
|
|
- margin: 10px 10px 0 10px;
|
|
|
- .air-box{
|
|
|
display: flex;
|
|
|
- flex-direction: column;
|
|
|
justify-content: center;
|
|
|
+ flex-direction: column;
|
|
|
+ min-height: 200px;
|
|
|
+ margin-bottom: 20px;
|
|
|
align-items: center;
|
|
|
- .title{
|
|
|
- margin-left: 5px;
|
|
|
- }
|
|
|
- .air-num{
|
|
|
- font-family: 'numberFont';
|
|
|
- color: #20dbfd;
|
|
|
- text-shadow: 0 0 25px #00d8ff;
|
|
|
- font-size: 28px;
|
|
|
- font-weight: bolder;
|
|
|
+ .item-container {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
}
|
|
|
}
|
|
|
-
|
|
|
- }
|
|
|
- .base-title {
|
|
|
- width: calc(100% - 60px);
|
|
|
- text-align: center;
|
|
|
- color: #00d8ff;
|
|
|
- }
|
|
|
- .base-information-box{
|
|
|
- display: flex;
|
|
|
- margin-left: 5px;
|
|
|
- .base-information {
|
|
|
+ .need-air-group{
|
|
|
+ width: calc(100% - 20px);
|
|
|
display: flex;
|
|
|
- flex-direction: row;
|
|
|
- flex-wrap: wrap;
|
|
|
- .device-num-box {
|
|
|
- width: 170px;
|
|
|
- height: 82px;
|
|
|
- background: url('/@/assets/images/vent/new-home/num-bg.png') no-repeat;
|
|
|
- background-size: contain;
|
|
|
- margin: 5px 0px;
|
|
|
- position: relative;
|
|
|
+ justify-content: space-between;
|
|
|
+ border: 1px solid #20dbfd22;
|
|
|
+ box-shadow: 0 0 5px #00d8ff22 inset;
|
|
|
+ padding: 10px;
|
|
|
+ margin: 10px 10px 0 10px;
|
|
|
+ .air-box{
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ .title{
|
|
|
+ margin-left: 5px;
|
|
|
+ }
|
|
|
+ .air-num{
|
|
|
+ font-family: 'numberFont';
|
|
|
+ color: #20dbfd;
|
|
|
+ text-shadow: 0 0 25px #00d8ff;
|
|
|
+ font-size: 28px;
|
|
|
+ font-weight: bolder;
|
|
|
+ }
|
|
|
+ }
|
|
|
|
|
|
- .icon {
|
|
|
- position: absolute;
|
|
|
- width: 40px;
|
|
|
- height: 40px;
|
|
|
- background: url('/@/assets/images/vent/new-home/base-icon1.png') no-repeat;
|
|
|
+ }
|
|
|
+ .base-title {
|
|
|
+ width: calc(100% - 60px);
|
|
|
+ text-align: center;
|
|
|
+ color: #00d8ff;
|
|
|
+ }
|
|
|
+ .base-information-box{
|
|
|
+ display: flex;
|
|
|
+ margin-left: 5px;
|
|
|
+ .base-information {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: row;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ .device-num-box {
|
|
|
+ width: 170px;
|
|
|
+ height: 82px;
|
|
|
+ background: url('/@/assets/images/vent/new-home/num-bg.png') no-repeat;
|
|
|
background-size: contain;
|
|
|
- top: 22px;
|
|
|
- left: 16px;
|
|
|
- }
|
|
|
+ margin: 5px 0px;
|
|
|
+ position: relative;
|
|
|
|
|
|
- .text-box {
|
|
|
- height: 100%;
|
|
|
- margin-left: 70px;
|
|
|
- display: flex;
|
|
|
- justify-content: center;
|
|
|
- flex-direction: column;
|
|
|
- margin-top: 2px;
|
|
|
+ .icon {
|
|
|
+ position: absolute;
|
|
|
+ width: 40px;
|
|
|
+ height: 40px;
|
|
|
+ background: url('/@/assets/images/vent/new-home/base-icon1.png') no-repeat;
|
|
|
+ background-size: contain;
|
|
|
+ top: 22px;
|
|
|
+ left: 16px;
|
|
|
+ }
|
|
|
|
|
|
- .value {
|
|
|
- font-family: 'douyuFont';
|
|
|
- color: #28DCE4;
|
|
|
- margin-top: 5px;
|
|
|
+ .text-box {
|
|
|
+ height: 100%;
|
|
|
+ margin-left: 70px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ flex-direction: column;
|
|
|
+ margin-top: 2px;
|
|
|
+
|
|
|
+ .value {
|
|
|
+ font-family: 'douyuFont';
|
|
|
+ color: #28DCE4;
|
|
|
+ margin-top: 5px;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
- }
|
|
|
-
|
|
|
- .warning-box{
|
|
|
- .warning-top{
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- padding: 10px 2px 0px 2px;
|
|
|
- .warning-icon{
|
|
|
- width: 168px;
|
|
|
- height: 105px;
|
|
|
+
|
|
|
+ .warning-box{
|
|
|
+ .warning-top{
|
|
|
display: flex;
|
|
|
- flex-direction: column;
|
|
|
- background: url('/@/assets/images/vent/new-home/warning-bg.png') no-repeat;
|
|
|
- background-size: contain;
|
|
|
- .title{
|
|
|
- font-size: 13px;
|
|
|
- margin: 5px 0 5px 14px;
|
|
|
-
|
|
|
- }
|
|
|
- .num-box{
|
|
|
+ justify-content: space-between;
|
|
|
+ padding: 10px 2px 0px 2px;
|
|
|
+ .warning-icon{
|
|
|
+ width: 168px;
|
|
|
+ height: 105px;
|
|
|
display: flex;
|
|
|
- margin-left: 20px;
|
|
|
- .num{
|
|
|
- font-family: 'numberFont';
|
|
|
- font-size: 34px;
|
|
|
- color: #20dbfd;
|
|
|
- text-shadow: 0 0 25px #00d8ff;
|
|
|
- margin-right: 10px;
|
|
|
+ flex-direction: column;
|
|
|
+ background: url('/@/assets/images/vent/new-home/warning-bg.png') no-repeat;
|
|
|
+ background-size: contain;
|
|
|
+ .title{
|
|
|
+ font-size: 13px;
|
|
|
+ margin: 5px 0 5px 14px;
|
|
|
+
|
|
|
}
|
|
|
- .rate-box{
|
|
|
- font-size: 12px;
|
|
|
- .day-rate{
|
|
|
- color: #FE3E12;
|
|
|
- }
|
|
|
- .week-rate{
|
|
|
- color: #FADB3E;
|
|
|
+ .num-box{
|
|
|
+ display: flex;
|
|
|
+ margin-left: 20px;
|
|
|
+ .num{
|
|
|
+ font-family: 'numberFont';
|
|
|
+ font-size: 34px;
|
|
|
+ color: #20dbfd;
|
|
|
+ text-shadow: 0 0 25px #00d8ff;
|
|
|
+ margin-right: 10px;
|
|
|
}
|
|
|
- .moth-rate{
|
|
|
- color: #12FE81;
|
|
|
+ .rate-box{
|
|
|
+ font-size: 12px;
|
|
|
+ .day-rate{
|
|
|
+ color: #FE3E12;
|
|
|
+ }
|
|
|
+ .week-rate{
|
|
|
+ color: #FADB3E;
|
|
|
+ }
|
|
|
+ .moth-rate{
|
|
|
+ color: #12FE81;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
}
|
|
|
-
|
|
|
}
|
|
|
- }
|
|
|
- .device-monitor-box{
|
|
|
- margin-top: 20px;
|
|
|
- position: reactive;
|
|
|
- .device-btn-group{
|
|
|
- display: flex;
|
|
|
- flex-wrap: wrap;
|
|
|
- margin-top: 10px;
|
|
|
- .device-active{
|
|
|
- &::before{
|
|
|
- border-color: #0efcff;
|
|
|
- box-shadow: 1px 1px 3px 1px #0efcff inset;
|
|
|
+ .device-monitor-box{
|
|
|
+ margin-top: 20px;
|
|
|
+ position: reactive;
|
|
|
+ .device-btn-group{
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ margin-top: 10px;
|
|
|
+ .device-active{
|
|
|
+ &::before{
|
|
|
+ border-color: #0efcff;
|
|
|
+ box-shadow: 1px 1px 3px 1px #0efcff inset;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .device-btn{
|
|
|
+ width: 100px;
|
|
|
+ height: 40px;
|
|
|
+ position: relative;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ font-size: 14px;
|
|
|
+ color: #0efcff;
|
|
|
+ cursor: pointer;
|
|
|
+ margin: 0 6px;
|
|
|
+ &::before{
|
|
|
+ content: '';
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ right: 0;
|
|
|
+ bottom: 0;
|
|
|
+ left: 0;
|
|
|
+ border: 1px solid #6176AF;
|
|
|
+ transform: skewX(-38deg);
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
- .device-btn{
|
|
|
- width: 100px;
|
|
|
- height: 40px;
|
|
|
- position: relative;
|
|
|
- display: flex;
|
|
|
- justify-content: center;
|
|
|
- align-items: center;
|
|
|
- font-size: 14px;
|
|
|
- color: #0efcff;
|
|
|
- cursor: pointer;
|
|
|
- margin: 0 6px;
|
|
|
+ .device-table{
|
|
|
+ position: absolute;
|
|
|
+ width: 1550px;
|
|
|
+ height: 270px;
|
|
|
+ right: 0;
|
|
|
+ bottom: 0;
|
|
|
+ backdrop-filter: blur(30px);
|
|
|
+ border: 1px solid #8b8b8b22;
|
|
|
+ padding: 2px 0 10px 10px;
|
|
|
+ z-index: 9999;
|
|
|
+
|
|
|
&::before{
|
|
|
+ position: absolute;
|
|
|
content: '';
|
|
|
+ width: 10px;
|
|
|
+ height: 10px;
|
|
|
+ border-top: 1px solid #00d8ff;
|
|
|
+ border-left: 1px solid #00d8ff;
|
|
|
+ left: 0px;
|
|
|
+ top: -1px;
|
|
|
+ }
|
|
|
+ &::after{
|
|
|
position: absolute;
|
|
|
- top: 0;
|
|
|
- right: 0;
|
|
|
- bottom: 0;
|
|
|
- left: 0;
|
|
|
- border: 1px solid #6176AF;
|
|
|
- transform: skewX(-38deg);
|
|
|
+ content: '';
|
|
|
+ width: 10px;
|
|
|
+ height: 10px;
|
|
|
+ border-bottom: 1px solid #00d8ff;
|
|
|
+ border-left: 1px solid #00d8ff;
|
|
|
+ left: 0px;
|
|
|
+ bottom: -1px;
|
|
|
}
|
|
|
- }
|
|
|
- }
|
|
|
- .device-table{
|
|
|
- position: absolute;
|
|
|
- width: 1550px;
|
|
|
- height: 270px;
|
|
|
- right: 0;
|
|
|
- bottom: 0;
|
|
|
- backdrop-filter: blur(30px);
|
|
|
- border: 1px solid #8b8b8b22;
|
|
|
- padding: 2px 0 10px 10px;
|
|
|
- z-index: 9999;
|
|
|
-
|
|
|
- &::before{
|
|
|
- position: absolute;
|
|
|
- content: '';
|
|
|
- width: 10px;
|
|
|
- height: 10px;
|
|
|
- border-top: 1px solid #00d8ff;
|
|
|
- border-left: 1px solid #00d8ff;
|
|
|
- left: 0px;
|
|
|
- top: -1px;
|
|
|
- }
|
|
|
- &::after{
|
|
|
- position: absolute;
|
|
|
- content: '';
|
|
|
- width: 10px;
|
|
|
- height: 10px;
|
|
|
- border-bottom: 1px solid #00d8ff;
|
|
|
- border-left: 1px solid #00d8ff;
|
|
|
- left: 0px;
|
|
|
- bottom: -1px;
|
|
|
- }
|
|
|
- .device-tab{
|
|
|
- width: 100%;
|
|
|
- .tab{
|
|
|
- margin: 5px;
|
|
|
- cursor: pointer;
|
|
|
+ .device-tab{
|
|
|
+ width: 100%;
|
|
|
+ .tab{
|
|
|
+ margin: 5px;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+ .tab-active{
|
|
|
+ color: #00d8ff;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .device-animation{
|
|
|
+ border-bottom: 1px solid #91e9fe44;
|
|
|
}
|
|
|
- .tab-active{
|
|
|
- color: #00d8ff;
|
|
|
+ .monitor-table{
|
|
|
+ background-color: #67e6fd05;
|
|
|
}
|
|
|
}
|
|
|
- .device-animation{
|
|
|
- border-bottom: 1px solid #91e9fe44;
|
|
|
+ .device-table-open{
|
|
|
+ width: 1550;
|
|
|
+ animation-name: open;
|
|
|
+ /* 持续时间 */
|
|
|
+ animation-duration: 2s;
|
|
|
+ transition: all 2s linear 1s;
|
|
|
}
|
|
|
- .monitor-table{
|
|
|
- background-color: #67e6fd05;
|
|
|
+ .device-table-close{
|
|
|
+ width: 0px;
|
|
|
+ animation-name: close;
|
|
|
+ /* 持续时间 */
|
|
|
+ animation-duration: 2s;
|
|
|
+ transition: all 2s linear 1s;
|
|
|
}
|
|
|
+
|
|
|
}
|
|
|
- .device-table-open{
|
|
|
- width: 1550;
|
|
|
- animation-name: open;
|
|
|
- /* 持续时间 */
|
|
|
- animation-duration: 2s;
|
|
|
- transition: all 2s linear 1s;
|
|
|
- }
|
|
|
- .device-table-close{
|
|
|
- width: 0px;
|
|
|
- animation-name: close;
|
|
|
- /* 持续时间 */
|
|
|
- animation-duration: 2s;
|
|
|
- transition: all 2s linear 1s;
|
|
|
- }
|
|
|
-
|
|
|
}
|
|
|
}
|
|
|
-}
|
|
|
|
|
|
-:deep(.@{ventSpace}-table-thead){
|
|
|
- background-color: transparent !important;
|
|
|
-
|
|
|
- th{
|
|
|
- color: #00d8ff !important;
|
|
|
- border-color: #91e9fe44 !important;
|
|
|
- border: none !important;
|
|
|
- border-top: 1px solid #91e9fe44 !important;
|
|
|
- &:first-child{
|
|
|
- border-left: 1px solid #91e9fe44 !important;
|
|
|
- }
|
|
|
- &:last-child{
|
|
|
- border-right: 1px solid #91e9fe44 !important;
|
|
|
- }
|
|
|
- .@{ventSpace}-table-column-title{
|
|
|
+ :deep(.@{ventSpace}-table-thead){
|
|
|
+ background-color: transparent !important;
|
|
|
+
|
|
|
+ th{
|
|
|
color: #00d8ff !important;
|
|
|
- }
|
|
|
- .@{ventSpace}-table-cell-scrollbar{
|
|
|
- box-shadow: none !important;
|
|
|
- }
|
|
|
- }
|
|
|
-}
|
|
|
-:deep(.@{ventSpace}-table-tbody){
|
|
|
- tr{
|
|
|
- td{
|
|
|
- background-color: transparent !important;
|
|
|
- border-bottom: 1px solid #91e9fe33 !important;
|
|
|
- // border-top: none !important;
|
|
|
- // border-left: none !important;
|
|
|
+ border-color: #91e9fe44 !important;
|
|
|
+ border: none !important;
|
|
|
+ border-top: 1px solid #91e9fe44 !important;
|
|
|
&:first-child{
|
|
|
border-left: 1px solid #91e9fe44 !important;
|
|
|
}
|
|
|
&:last-child{
|
|
|
border-right: 1px solid #91e9fe44 !important;
|
|
|
}
|
|
|
+ .@{ventSpace}-table-column-title{
|
|
|
+ color: #00d8ff !important;
|
|
|
+ }
|
|
|
+ .@{ventSpace}-table-cell-scrollbar{
|
|
|
+ box-shadow: none !important;
|
|
|
+ }
|
|
|
}
|
|
|
- &:last-child{
|
|
|
+ }
|
|
|
+ :deep(.@{ventSpace}-table-tbody){
|
|
|
+ tr{
|
|
|
td{
|
|
|
- border-bottom: 1px solid #91e9fe44 !important;
|
|
|
+ background-color: transparent !important;
|
|
|
+ border-bottom: 1px solid #91e9fe33 !important;
|
|
|
+ // border-top: none !important;
|
|
|
+ // border-left: none !important;
|
|
|
+ &:first-child{
|
|
|
+ border-left: 1px solid #91e9fe44 !important;
|
|
|
+ }
|
|
|
+ &:last-child{
|
|
|
+ border-right: 1px solid #91e9fe44 !important;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ &:last-child{
|
|
|
+ td{
|
|
|
+ border-bottom: 1px solid #91e9fe44 !important;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
}
|
|
|
-
|
|
|
-}
|
|
|
|
|
|
-@keyframes open {
|
|
|
- /* 开始状态 */
|
|
|
- 0% {
|
|
|
- opacity: 0;
|
|
|
- width: 0px;
|
|
|
- }
|
|
|
- /* 结束状态 */
|
|
|
- 100% {
|
|
|
- opacity: 1;
|
|
|
- width: 1550px;
|
|
|
- }
|
|
|
-}
|
|
|
-@keyframes close {
|
|
|
- /* 开始状态 */
|
|
|
- 0% {
|
|
|
- opacity: 1;
|
|
|
- width: 1550px;
|
|
|
- }
|
|
|
- /* 结束状态 */
|
|
|
- 100% {
|
|
|
- opacity: 0;
|
|
|
- width: 0px;
|
|
|
- }
|
|
|
-}
|
|
|
+ @keyframes open {
|
|
|
+ /* 开始状态 */
|
|
|
+ 0% {
|
|
|
+ opacity: 0;
|
|
|
+ width: 0px;
|
|
|
+ }
|
|
|
+ /* 结束状态 */
|
|
|
+ 100% {
|
|
|
+ opacity: 1;
|
|
|
+ width: 1550px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ @keyframes close {
|
|
|
+ /* 开始状态 */
|
|
|
+ 0% {
|
|
|
+ opacity: 1;
|
|
|
+ width: 1550px;
|
|
|
+ }
|
|
|
+ /* 结束状态 */
|
|
|
+ 100% {
|
|
|
+ opacity: 0;
|
|
|
+ width: 0px;
|
|
|
+ }
|
|
|
+ }
|
|
|
</style>
|
lxh