|
@@ -0,0 +1,225 @@
|
|
|
+<template>
|
|
|
+ <CustomBadges class="w-1710px ml-100px mt-50px" :badges="headerBadges" />
|
|
|
+ <div class="monitor-container">
|
|
|
+ <transition enter-active-class="animate__animated animate__fadeInLeft" leave-active-class="animate__animated animate__fadeOutLeft">
|
|
|
+ <div class="lr left-box" v-if="loading">
|
|
|
+ <template v-for="unitIndex in unitNum" :key="unitIndex">
|
|
|
+ <ventBox1 v-if="unitIndex < 4" class="vent-margin-t-10">
|
|
|
+ <template #title>
|
|
|
+ <div>抽采单元{{ unitIndex }}</div>
|
|
|
+ </template>
|
|
|
+ <template #container>
|
|
|
+ <BarAndLine
|
|
|
+ xAxisPropType="time"
|
|
|
+ :dataSource="get(mockGasUnitData, 'history')"
|
|
|
+ height="205px"
|
|
|
+ :chartsColumns="gasUnitOption"
|
|
|
+ :option="echatsOption"
|
|
|
+ />
|
|
|
+ </template>
|
|
|
+ </ventBox1>
|
|
|
+ </template>
|
|
|
+ </div>
|
|
|
+ </transition>
|
|
|
+ <transition enter-active-class="animate__animated animate__fadeInRight" leave-active-class="animate__animated animate__fadeInRight">
|
|
|
+ <div class="lr right-box" v-if="loading">
|
|
|
+ <template v-for="unitIndex in unitNum" :key="unitIndex">
|
|
|
+ <ventBox1 v-if="unitIndex >= 4" class="vent-margin-t-10">
|
|
|
+ <template #title>
|
|
|
+ <div>抽采单元{{ unitIndex }}</div>
|
|
|
+ </template>
|
|
|
+ <template #container>
|
|
|
+ <BarAndLine
|
|
|
+ xAxisPropType="time"
|
|
|
+ :dataSource="get(mockGasUnitData, 'history')"
|
|
|
+ height="205px"
|
|
|
+ :chartsColumns="gasUnitOption"
|
|
|
+ :option="echatsOption"
|
|
|
+ />
|
|
|
+ </template>
|
|
|
+ </ventBox1>
|
|
|
+ </template>
|
|
|
+ <ventBox1 class="vent-margin-t-10">
|
|
|
+ <template #title>
|
|
|
+ <div>阀门调控</div>
|
|
|
+ </template>
|
|
|
+ <template #container>
|
|
|
+ <CustomChart :chart-config="gasUnitPieOption" :chart-data="mockPieData" height="200px" />
|
|
|
+ </template>
|
|
|
+ </ventBox1>
|
|
|
+ </div>
|
|
|
+ </transition>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script setup lang="ts">
|
|
|
+ import { ref, onMounted } from 'vue';
|
|
|
+ import ventBox1 from '/@/components/vent/ventBox1.vue';
|
|
|
+ import CustomBadges from './customHeader.vue';
|
|
|
+ import { gasUnitOption, headerBadges, mockGasUnitData, gasUnitBarOption, mockData, gasUnitPieOption, mockPieData } from '../gasAssessment.data';
|
|
|
+ import ListItem from '@/views/vent/gas/components/list/listItem.vue';
|
|
|
+ import { get } from '@/utils/ventutil';
|
|
|
+ import CustomChart from '@/views/vent/home/configurable/components/detail/CustomChart.vue';
|
|
|
+ import BarAndLine from '/@/components/chart/BarAndLine.vue';
|
|
|
+ const echatsOption = {
|
|
|
+ grid: {
|
|
|
+ top: '70px',
|
|
|
+ left: '0px',
|
|
|
+ right: '30px',
|
|
|
+ bottom: '10px',
|
|
|
+ containLabel: true,
|
|
|
+ },
|
|
|
+ legend: {
|
|
|
+ top: '5',
|
|
|
+ },
|
|
|
+ };
|
|
|
+ const loading = ref(false);
|
|
|
+ const dataSource = ref({});
|
|
|
+ const unitNum = ref(5);
|
|
|
+ // // https获取监测数据
|
|
|
+ let timer: null | NodeJS.Timeout = null;
|
|
|
+ function getMonitor(flag?) {
|
|
|
+ if (Object.prototype.toString.call(timer) === '[object Null]') {
|
|
|
+ timer = setTimeout(
|
|
|
+ async () => {
|
|
|
+ if (timer) {
|
|
|
+ timer = null;
|
|
|
+ }
|
|
|
+ await getMonitor();
|
|
|
+ // loading.value = false;
|
|
|
+ },
|
|
|
+ flag ? 0 : 1000
|
|
|
+ );
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ onMounted(async () => {
|
|
|
+ timer = null;
|
|
|
+ await getMonitor(true);
|
|
|
+ loading.value = true;
|
|
|
+ });
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="less" scoped>
|
|
|
+ @ventSpace: zxm;
|
|
|
+ @import '/@/design/vent/modal.less';
|
|
|
+ @import '@/views/vent/monitorManager/comment/less/workFace.less';
|
|
|
+ .monitor-container {
|
|
|
+ height: 850px;
|
|
|
+ pointer-events: none;
|
|
|
+ }
|
|
|
+ .modal-monitor {
|
|
|
+ position: absolute;
|
|
|
+ z-index: -1;
|
|
|
+ flex-direction: row-reverse;
|
|
|
+ .main-container {
|
|
|
+ background-color: #00000078;
|
|
|
+ }
|
|
|
+ .monitor-item {
|
|
|
+ width: 180px;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: row;
|
|
|
+ width: auto;
|
|
|
+ margin-bottom: 3px;
|
|
|
+ .monitor-title {
|
|
|
+ width: 120px;
|
|
|
+ color: #7af5ff;
|
|
|
+ font-weight: 400;
|
|
|
+ font-size: 13px;
|
|
|
+ }
|
|
|
+ .monitor-val {
|
|
|
+ color: #ffb700;
|
|
|
+ display: flex;
|
|
|
+ width: auto;
|
|
|
+
|
|
|
+ .val {
|
|
|
+ width: 60px;
|
|
|
+ font-size: 13px;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ .unit {
|
|
|
+ color: #ffffffbb;
|
|
|
+ font-size: 13px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .title {
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .left-box,
|
|
|
+ .right-box {
|
|
|
+ width: 380px !important;
|
|
|
+ }
|
|
|
+ .gas-pump-item {
|
|
|
+ padding: 3px 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .param-set {
|
|
|
+ color: #45d3fd;
|
|
|
+ cursor: pointer;
|
|
|
+ &:hover {
|
|
|
+ color: #38a6c8;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .input-item {
|
|
|
+ margin: 3px 0 !important;
|
|
|
+ .value {
|
|
|
+ width: 80px;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .data-group {
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ justify-content: space-between;
|
|
|
+ padding-bottom: 8px;
|
|
|
+ .data-item {
|
|
|
+ width: calc(50% - 10px);
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ line-height: 24px;
|
|
|
+ background-image: linear-gradient(to right, #39a3ff00, #39a3ff10, #39a3ff02);
|
|
|
+ margin: 4px 0;
|
|
|
+ }
|
|
|
+ .value {
|
|
|
+ color: #00eefffe;
|
|
|
+ }
|
|
|
+ .data-item1 {
|
|
|
+ width: 100%;
|
|
|
+ line-height: 24px;
|
|
|
+ background-image: linear-gradient(to right, #39a3ff00, #39a3ff10, #39a3ff02);
|
|
|
+ margin: 4px 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .base-title {
|
|
|
+ line-height: 26px;
|
|
|
+ position: relative;
|
|
|
+ padding-left: 15px;
|
|
|
+ color: #9bf2ff;
|
|
|
+ &::after {
|
|
|
+ content: '';
|
|
|
+ position: absolute;
|
|
|
+ display: block;
|
|
|
+ width: 4px;
|
|
|
+ height: 12px;
|
|
|
+ top: 8px;
|
|
|
+ left: 5px;
|
|
|
+ background: #45d3fd;
|
|
|
+ border-radius: 4px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .detail {
|
|
|
+ border: 1px solid #9bf2ff88;
|
|
|
+ padding: 0 5px;
|
|
|
+ background-color: #ffffff11;
|
|
|
+ margin-right: 4px;
|
|
|
+ &:hover {
|
|
|
+ background-color: #ffffff05;
|
|
|
+ }
|
|
|
+ }
|
|
|
+</style>
|