|
|
@@ -6,7 +6,7 @@
|
|
|
width="1200px"
|
|
|
v-bind="$attrs"
|
|
|
@ok="onSubmit"
|
|
|
- :closeFunc="onCancel"
|
|
|
+ @cancel="onCancel"
|
|
|
:canFullscreen="false"
|
|
|
:destroyOnClose="true"
|
|
|
:footer="null"
|
|
|
@@ -19,7 +19,7 @@
|
|
|
class="echarts-line"
|
|
|
xAxisPropType="time"
|
|
|
height="400px"
|
|
|
- :dataSource="monitorData"
|
|
|
+ :dataSource="echartsData"
|
|
|
:chartsColumns="chartsColumnList1"
|
|
|
:option="echatsOption"
|
|
|
/>
|
|
|
@@ -29,9 +29,9 @@
|
|
|
<div class="right-inputs">
|
|
|
<div class="vent-flex-row">
|
|
|
<div class="input-title">出风口风量(m³/min)：</div>
|
|
|
- <InputNumber class="input-box" size="large" v-model:value="ductOutletAirVolume_merge" />
|
|
|
+ <InputNumber class="input-box" size="large" v-model:value="dataSource['ductOutletAirVolume_merge']" />
|
|
|
<div class="input-title">局扇供风量(m³/min)：</div>
|
|
|
- <InputNumber class="input-box" size="large" v-model:value="inletAirVolume_merge" />
|
|
|
+ <InputNumber class="input-box" size="large" v-model:value="dataSource['inletAirVolume_merge']" />
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
@@ -39,177 +39,193 @@
|
|
|
</template>
|
|
|
|
|
|
<script lang="ts" setup>
|
|
|
-import { BasicModal, useModalInner } from '/@/components/Modal';
|
|
|
-import { ref, onMounted, reactive, nextTick, computed } from 'vue';
|
|
|
-import echarts from '/@/utils/lib/echarts';
|
|
|
-import { option, initData, fanInfoData, chartsColumnList1, echatsOption } from '../fanLocal.data';
|
|
|
-import BarAndLine from '/@/components/chart/BarAndLine.vue';
|
|
|
-import dayjs from 'dayjs';
|
|
|
-const emit = defineEmits(['close', 'register', 'openModal']);
|
|
|
-// 注册 modal
|
|
|
-const [register, { closeModal }] = useModalInner((data) => {
|
|
|
- nextTick(() => {
|
|
|
- if (option['xAxis']) option['xAxis']['data'] = xData;
|
|
|
- option['series'] = yDataList;
|
|
|
- initEcharts();
|
|
|
+ import { BasicModal, useModalInner } from '/@/components/Modal';
|
|
|
+ import { ref, onMounted, nextTick, watch } from 'vue';
|
|
|
+ import echarts from '/@/utils/lib/echarts';
|
|
|
+ import { option, chartsColumnList1, echatsOption } from '../fanLocal.data';
|
|
|
+ import BarAndLine from '/@/components/chart/BarAndLine.vue';
|
|
|
+ import dayjs from 'dayjs';
|
|
|
+ const emit = defineEmits(['close', 'register', 'openModal']);
|
|
|
+ const props = defineProps({
|
|
|
+ data: {
|
|
|
+ type: Object,
|
|
|
+ default: () => {},
|
|
|
+ },
|
|
|
+ targetVolume: {
|
|
|
+ type: Number,
|
|
|
+ },
|
|
|
});
|
|
|
-});
|
|
|
-const ChartRef = ref();
|
|
|
-const myChart = ref();
|
|
|
-const refresh = ref(true);
|
|
|
-const xDataMax = 1000;
|
|
|
-const xData: any[] = [];
|
|
|
-const yDataList: [] = [];
|
|
|
-const monitorData = ref([]);
|
|
|
-const props = defineProps({
|
|
|
- data: {
|
|
|
- type: Array,
|
|
|
- default: () => [],
|
|
|
- },
|
|
|
- targetVolume: {
|
|
|
- type: Number,
|
|
|
- },
|
|
|
-});
|
|
|
-function onSubmit() {
|
|
|
- emit('close');
|
|
|
- closeModal();
|
|
|
-}
|
|
|
-function initEcharts() {
|
|
|
- if (ChartRef.value) {
|
|
|
- myChart.value = echarts.init(ChartRef.value);
|
|
|
- option && myChart.value.setOption(option);
|
|
|
- refresh.value = false;
|
|
|
+ // 注册 modal
|
|
|
+ const [register, { closeModal }] = useModalInner((data) => {
|
|
|
nextTick(() => {
|
|
|
- setTimeout(() => {
|
|
|
- refresh.value = true;
|
|
|
- }, 0);
|
|
|
+ if (option['xAxis']) option['xAxis']['data'] = xData;
|
|
|
+ option['series'] = yDataList;
|
|
|
+ initEcharts();
|
|
|
});
|
|
|
+ });
|
|
|
+ const ChartRef = ref();
|
|
|
+ const myChart = ref();
|
|
|
+ const refresh = ref(true);
|
|
|
+ const xData: any[] = [];
|
|
|
+ const yDataList: [] = [];
|
|
|
+ const echartsData = ref([]);
|
|
|
+ const monitorData = ref({});
|
|
|
+ watch(
|
|
|
+ () => props.data,
|
|
|
+ (newVal) => {
|
|
|
+ monitorData.value = newVal;
|
|
|
+ if (echartsData.value.length > 20) {
|
|
|
+ echartsData.value.shift();
|
|
|
+ }
|
|
|
+ echartsData.value = [...echartsData.value, newVal];
|
|
|
+ console.log(echartsData.value);
|
|
|
+ }
|
|
|
+ );
|
|
|
+ function onSubmit() {
|
|
|
+ emit('close');
|
|
|
+ closeModal();
|
|
|
}
|
|
|
-}
|
|
|
-onMounted(() => {});
|
|
|
-</script>
|
|
|
-
|
|
|
-<style scoped lang="less">
|
|
|
-.modal-box {
|
|
|
- display: flex;
|
|
|
- flex-direction: row;
|
|
|
- background-color: #ffffff05;
|
|
|
- padding: 10px 8px 0 8px;
|
|
|
- border: 1px solid #00d8ff22;
|
|
|
- position: relative;
|
|
|
- // min-height: 600px;
|
|
|
- .left-box {
|
|
|
- flex: 1; /* 占据 3/4 的空间 */
|
|
|
- background-image: url(../../../../../assets/images/supplyAir.svg);
|
|
|
- background-repeat: no-repeat;
|
|
|
- background-size: contain; /* 确保背景图片完整显示 */
|
|
|
- background-position: center; /* 确保背景图片居中 */
|
|
|
+ function onCancel() {
|
|
|
+ //
|
|
|
}
|
|
|
- .right-box {
|
|
|
- flex: 1; /* 占据 3/4 的空间 */
|
|
|
- height: 400px;
|
|
|
- width: 100%;
|
|
|
+ function initEcharts() {
|
|
|
+ if (ChartRef.value) {
|
|
|
+ myChart.value = echarts.init(ChartRef.value);
|
|
|
+ option && myChart.value.setOption(option);
|
|
|
+ refresh.value = false;
|
|
|
+ nextTick(() => {
|
|
|
+ setTimeout(() => {
|
|
|
+ refresh.value = true;
|
|
|
+ }, 0);
|
|
|
+ });
|
|
|
+ }
|
|
|
}
|
|
|
-}
|
|
|
-.setting-box {
|
|
|
- width: 1570px;
|
|
|
- height: 70px;
|
|
|
- margin: 10px 0;
|
|
|
- background-color: #ffffff05;
|
|
|
- border: 1px solid #00d8ff22;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: space-between;
|
|
|
+ onMounted(() => {
|
|
|
+ // initEcharts();
|
|
|
+ });
|
|
|
+</script>
|
|
|
|
|
|
- .right-inputs {
|
|
|
- width: 100%;
|
|
|
+<style scoped lang="less">
|
|
|
+ .modal-box {
|
|
|
display: flex;
|
|
|
- height: 40px;
|
|
|
- margin: 0 10px;
|
|
|
- justify-content: space-between;
|
|
|
+ flex-direction: row;
|
|
|
+ background-color: #ffffff05;
|
|
|
+ padding: 10px 8px 0 8px;
|
|
|
+ border: 1px solid #00d8ff22;
|
|
|
+ position: relative;
|
|
|
+ // min-height: 600px;
|
|
|
+ .left-box {
|
|
|
+ flex: 1; /* 占据 3/4 的空间 */
|
|
|
+ background-image: url(../../../../../assets/images/supplyAir.svg);
|
|
|
+ background-repeat: no-repeat;
|
|
|
+ background-size: contain; /* 确保背景图片完整显示 */
|
|
|
+ background-position: center; /* 确保背景图片居中 */
|
|
|
+ }
|
|
|
+ .right-box {
|
|
|
+ flex: 1; /* 占据 3/4 的空间 */
|
|
|
+ height: 400px;
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
}
|
|
|
- .left-buttons {
|
|
|
+ .setting-box {
|
|
|
+ width: 1570px;
|
|
|
+ height: 70px;
|
|
|
+ margin: 10px 0;
|
|
|
+ background-color: #ffffff05;
|
|
|
+ border: 1px solid #00d8ff22;
|
|
|
display: flex;
|
|
|
- height: 40px;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
|
|
|
- .btn {
|
|
|
+ .right-inputs {
|
|
|
+ width: 100%;
|
|
|
+ display: flex;
|
|
|
+ height: 40px;
|
|
|
margin: 0 10px;
|
|
|
+ justify-content: space-between;
|
|
|
}
|
|
|
- }
|
|
|
- .border-clip {
|
|
|
- width: 1px;
|
|
|
- height: 25px;
|
|
|
- border-right: 1px solid #8b8b8b77;
|
|
|
- }
|
|
|
- .input-title {
|
|
|
- max-width: 150px;
|
|
|
- }
|
|
|
- .input-box {
|
|
|
- width: 220px !important;
|
|
|
- background: transparent !important;
|
|
|
- border-color: #00d8ff44 !important;
|
|
|
- margin-right: 20px;
|
|
|
- color: #fff !important;
|
|
|
- }
|
|
|
- .btn {
|
|
|
- padding: 8px 20px;
|
|
|
- position: relative;
|
|
|
- border-radius: 2px;
|
|
|
- color: #fff;
|
|
|
- width: fit-content;
|
|
|
- cursor: pointer;
|
|
|
+ .left-buttons {
|
|
|
+ display: flex;
|
|
|
+ height: 40px;
|
|
|
|
|
|
- &::before {
|
|
|
- position: absolute;
|
|
|
- display: block;
|
|
|
- content: '';
|
|
|
- width: calc(100% - 4px);
|
|
|
- height: calc(100% - 4px);
|
|
|
- top: 2px;
|
|
|
- left: 2px;
|
|
|
- border-radius: 2px;
|
|
|
- z-index: -1;
|
|
|
+ .btn {
|
|
|
+ margin: 0 10px;
|
|
|
+ }
|
|
|
}
|
|
|
- }
|
|
|
-
|
|
|
- .btn1 {
|
|
|
- border: 1px solid #5cfaff;
|
|
|
+ .border-clip {
|
|
|
+ width: 1px;
|
|
|
+ height: 25px;
|
|
|
+ border-right: 1px solid #8b8b8b77;
|
|
|
+ }
|
|
|
+ .input-title {
|
|
|
+ max-width: 150px;
|
|
|
+ }
|
|
|
+ .input-box {
|
|
|
+ width: 220px !important;
|
|
|
+ background: transparent !important;
|
|
|
+ border-color: #00d8ff44 !important;
|
|
|
+ margin-right: 20px;
|
|
|
+ color: #fff !important;
|
|
|
+ }
|
|
|
+ .btn {
|
|
|
+ padding: 8px 20px;
|
|
|
+ position: relative;
|
|
|
+ border-radius: 2px;
|
|
|
+ color: #fff;
|
|
|
+ width: fit-content;
|
|
|
+ cursor: pointer;
|
|
|
|
|
|
- &::before {
|
|
|
- background-image: linear-gradient(#2effee92, #0cb1d592);
|
|
|
+ &::before {
|
|
|
+ position: absolute;
|
|
|
+ display: block;
|
|
|
+ content: '';
|
|
|
+ width: calc(100% - 4px);
|
|
|
+ height: calc(100% - 4px);
|
|
|
+ top: 2px;
|
|
|
+ left: 2px;
|
|
|
+ border-radius: 2px;
|
|
|
+ z-index: -1;
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
- &:hover {
|
|
|
- border: 1px solid #5cfaffaa;
|
|
|
+ .btn1 {
|
|
|
+ border: 1px solid #5cfaff;
|
|
|
|
|
|
&::before {
|
|
|
- background-image: linear-gradient(#2effee72, #0cb1d572);
|
|
|
+ background-image: linear-gradient(#2effee92, #0cb1d592);
|
|
|
+ }
|
|
|
+
|
|
|
+ &:hover {
|
|
|
+ border: 1px solid #5cfaffaa;
|
|
|
+
|
|
|
+ &::before {
|
|
|
+ background-image: linear-gradient(#2effee72, #0cb1d572);
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
-}
|
|
|
|
|
|
-@keyframes open {
|
|
|
- 0% {
|
|
|
- height: 0px;
|
|
|
- }
|
|
|
- 100% {
|
|
|
- height: fit-content;
|
|
|
+ @keyframes open {
|
|
|
+ 0% {
|
|
|
+ height: 0px;
|
|
|
+ }
|
|
|
+ 100% {
|
|
|
+ height: fit-content;
|
|
|
+ }
|
|
|
}
|
|
|
-}
|
|
|
|
|
|
-@keyframes close {
|
|
|
- 0% {
|
|
|
- height: fit-content;
|
|
|
+ @keyframes close {
|
|
|
+ 0% {
|
|
|
+ height: fit-content;
|
|
|
+ }
|
|
|
+ 100% {
|
|
|
+ height: 0px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ :deep(.zxm-divider-inner-text) {
|
|
|
+ color: #cacaca88 !important;
|
|
|
}
|
|
|
- 100% {
|
|
|
- height: 0px;
|
|
|
+ :deep(.zxm-form-item) {
|
|
|
+ margin-bottom: 10px;
|
|
|
}
|
|
|
-}
|
|
|
-:deep(.zxm-divider-inner-text) {
|
|
|
- color: #cacaca88 !important;
|
|
|
-}
|
|
|
-:deep(.zxm-form-item) {
|
|
|
- margin-bottom: 10px;
|
|
|
-}
|
|
|
</style>
|
hongrunxia