|
|
@@ -43,218 +43,304 @@
|
|
|
</template>
|
|
|
|
|
|
<script lang="ts" setup>
|
|
|
-import { BasicModal, useModalInner } from '/@/components/Modal';
|
|
|
-import { ref, onMounted, nextTick, watch } from 'vue';
|
|
|
-import echarts from '/@/utils/lib/echarts';
|
|
|
-import BarAndLine from '/@/components/chart/BarAndLine.vue';
|
|
|
-import { option, chartsColumnList1, echatsOption1 } from '../fanLocal.data';
|
|
|
-import { autoAdjust } from '../fanLocal.api';
|
|
|
-import { message } from 'ant-design-vue';
|
|
|
-const emit = defineEmits(['close', 'register', 'openModal']);
|
|
|
-const props = defineProps({
|
|
|
- data: {
|
|
|
- type: Object,
|
|
|
- default: () => {},
|
|
|
- },
|
|
|
- targetVolume: {
|
|
|
- type: Number,
|
|
|
- },
|
|
|
- fanlocalId: {
|
|
|
- type: String,
|
|
|
- },
|
|
|
-});
|
|
|
-// 注册 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 BarAndLine from '/@/components/chart/BarAndLine.vue';
|
|
|
+ import { option, chartsColumnList1, echatsOption1 } from '../fanLocal.data';
|
|
|
+ import { autoAdjust } from '../fanLocal.api';
|
|
|
+ import { message } from 'ant-design-vue';
|
|
|
+ const emit = defineEmits(['close', 'register', 'openModal']);
|
|
|
+ const props = defineProps({
|
|
|
+ data: {
|
|
|
+ type: Object,
|
|
|
+ default: () => {},
|
|
|
+ },
|
|
|
+ targetVolume: {
|
|
|
+ type: Number,
|
|
|
+ },
|
|
|
+ fanlocalId: {
|
|
|
+ type: String,
|
|
|
+ },
|
|
|
});
|
|
|
-});
|
|
|
-const ChartRef = ref();
|
|
|
-const myChart = ref();
|
|
|
-const refresh = ref(true);
|
|
|
-const xData: any[] = [];
|
|
|
-const yDataList: [] = [];
|
|
|
-// const echartsData = ref([]);
|
|
|
-// const monitorData = ref({});
|
|
|
-const echartsData = ref<Record<string, any>[]>([]);
|
|
|
-const monitorData = ref<Record<string, any>>({});
|
|
|
-watch(
|
|
|
- () => props.data,
|
|
|
- (newVal) => {
|
|
|
- // 创建新对象，合并 newVal 和 targetVolume
|
|
|
- const combinedData = {
|
|
|
- inletAirVolume_merge: newVal.inletAirVolume_merge,
|
|
|
- targetVolume: props.targetVolume, // 添加目标风量
|
|
|
- readTime: newVal.readTime || new Date().toISOString(), // 确保有时间字段
|
|
|
- };
|
|
|
- monitorData.value = combinedData;
|
|
|
- if (echartsData.value.length > 20) {
|
|
|
- echartsData.value.shift();
|
|
|
- }
|
|
|
- echartsData.value = [...echartsData.value, combinedData];
|
|
|
- }
|
|
|
-);
|
|
|
-function onSubmit() {
|
|
|
- emit('close');
|
|
|
- closeModal();
|
|
|
-}
|
|
|
-function onCancel() {
|
|
|
- //
|
|
|
-}
|
|
|
-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({});
|
|
|
+ const echartsData = ref<Record<string, any>[]>([]);
|
|
|
+ const monitorData = ref<Record<string, any>>({});
|
|
|
+ watch(
|
|
|
+ () => props.data,
|
|
|
+ (newVal) => {
|
|
|
+ // 创建新对象，合并 newVal 和 targetVolume
|
|
|
+ const combinedData = {
|
|
|
+ inletAirVolume_merge: newVal.inletAirVolume_merge,
|
|
|
+ targetVolume: props.targetVolume, // 添加目标风量
|
|
|
+ readTime: newVal.readTime || new Date().toISOString(), // 确保有时间字段
|
|
|
+ };
|
|
|
+ monitorData.value = combinedData;
|
|
|
+ if (echartsData.value.length > 20) {
|
|
|
+ echartsData.value.shift();
|
|
|
+ }
|
|
|
+ echartsData.value = [...echartsData.value, combinedData];
|
|
|
+ }
|
|
|
+ );
|
|
|
+ function onSubmit() {
|
|
|
+ emit('close');
|
|
|
+ closeModal();
|
|
|
+ }
|
|
|
+ function onCancel() {
|
|
|
+ //
|
|
|
}
|
|
|
-}
|
|
|
-function onHide() {
|
|
|
- closeModal();
|
|
|
-}
|
|
|
-function stop() {
|
|
|
- const params = { auto: 0, fanlocalId: props.fanlocalId };
|
|
|
- autoAdjust(params)
|
|
|
- .then(() => {
|
|
|
- message.success('指令已下发成功！');
|
|
|
- })
|
|
|
- .catch(() => {
|
|
|
- message.error('指令下发失败');
|
|
|
+ function initEcharts() {
|
|
|
+ if (ChartRef.value) {
|
|
|
+ myChart.value = echarts.init(ChartRef.value);
|
|
|
+ option && myChart.value.setOption(option);
|
|
|
+ refresh.value = false;
|
|
|
+ nextTick(() => {
|
|
|
+ if (option['xAxis']) option['xAxis']['data'] = xData;
|
|
|
+ option['series'] = yDataList;
|
|
|
+ initEcharts();
|
|
|
+ });
|
|
|
});
|
|
|
-}
|
|
|
-onMounted(() => {
|
|
|
- // initEcharts();
|
|
|
-});
|
|
|
+ const ChartRef = ref();
|
|
|
+ const myChart = ref();
|
|
|
+ const refresh = ref(true);
|
|
|
+ const xData: any[] = [];
|
|
|
+ const yDataList: [] = [];
|
|
|
+ // const echartsData = ref([]);
|
|
|
+ // const monitorData = ref({});
|
|
|
+ const echartsData = ref<Record<string, any>[]>([]);
|
|
|
+ const monitorData = ref<Record<string, any>>({});
|
|
|
+ watch(
|
|
|
+ () => props.data,
|
|
|
+ (newVal) => {
|
|
|
+ // 创建新对象，合并 newVal 和 targetVolume
|
|
|
+ const combinedData = {
|
|
|
+ inletAirVolume_merge: newVal.inletAirVolume_merge,
|
|
|
+ targetVolume: props.targetVolume, // 添加目标风量
|
|
|
+ readTime: newVal.readTime || new Date().toISOString(), // 确保有时间字段
|
|
|
+ };
|
|
|
+ monitorData.value = combinedData;
|
|
|
+ if (echartsData.value.length > 20) {
|
|
|
+ echartsData.value.shift();
|
|
|
+ }
|
|
|
+ echartsData.value = [...echartsData.value, combinedData];
|
|
|
+ }
|
|
|
+ );
|
|
|
+ function onSubmit() {
|
|
|
+ emit('close');
|
|
|
+ closeModal();
|
|
|
+ }
|
|
|
+ }
|
|
|
+ function onHide() {
|
|
|
+ closeModal();
|
|
|
+ }
|
|
|
+ function stop() {
|
|
|
+ const params = { auto: 0, fanlocalId: props.fanlocalId };
|
|
|
+ autoAdjust(params)
|
|
|
+ .then(() => {
|
|
|
+ message.success('指令已下发成功！');
|
|
|
+ })
|
|
|
+ .catch(() => {
|
|
|
+ message.error('指令下发失败');
|
|
|
+ });
|
|
|
+ }
|
|
|
+ onMounted(() => {
|
|
|
+ // initEcharts();
|
|
|
+ });
|
|
|
</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; /* 确保背景图片居中 */
|
|
|
- }
|
|
|
- .right-box {
|
|
|
- flex: 1; /* 占据 3/4 的空间 */
|
|
|
- height: 400px;
|
|
|
- width: 100%;
|
|
|
+ .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; /* 确保背景图片居中 */
|
|
|
+ }
|
|
|
+ .right-box {
|
|
|
+ flex: 1; /* 占据 3/4 的空间 */
|
|
|
+ height: 400px;
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
}
|
|
|
-}
|
|
|
-.setting-box {
|
|
|
- width: 100%;
|
|
|
- height: 70px;
|
|
|
- margin: 10px 0;
|
|
|
- background-color: #ffffff05;
|
|
|
- border: 1px solid #00d8ff22;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: space-between;
|
|
|
-
|
|
|
- .right-inputs {
|
|
|
+ .setting-box {
|
|
|
width: 100%;
|
|
|
+ height: 70px;
|
|
|
+ margin: 10px 0;
|
|
|
+ background-color: #ffffff05;
|
|
|
+ border: 1px solid #00d8ff22;
|
|
|
display: flex;
|
|
|
- height: 40px;
|
|
|
- margin: 0 10px;
|
|
|
+ align-items: center;
|
|
|
justify-content: space-between;
|
|
|
- }
|
|
|
- .left-buttons {
|
|
|
- display: flex;
|
|
|
- height: 40px;
|
|
|
|
|
|
- .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: 120px !important;
|
|
|
- background: transparent !important;
|
|
|
- border-color: #00d8ff44 !important;
|
|
|
- margin-right: 20px;
|
|
|
- color: #fff !important;
|
|
|
- }
|
|
|
- .btn {
|
|
|
- padding: 8px 20px;
|
|
|
- margin: 10px;
|
|
|
- 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;
|
|
|
+ }
|
|
|
}
|
|
|
- }
|
|
|
+ .border-clip {
|
|
|
+ width: 1px;
|
|
|
+ height: 25px;
|
|
|
+ border-right: 1px solid #8b8b8b77;
|
|
|
+ }
|
|
|
+ .input-title {
|
|
|
+ max-width: 150px;
|
|
|
+ }
|
|
|
+ .input-box {
|
|
|
+ width: 120px !important;
|
|
|
+ background: transparent !important;
|
|
|
+ border-color: #00d8ff44 !important;
|
|
|
+ margin-right: 20px;
|
|
|
+ color: #fff !important;
|
|
|
+ }
|
|
|
+ .btn {
|
|
|
+ padding: 8px 20px;
|
|
|
+ margin: 10px;
|
|
|
+ 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%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .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;
|
|
|
|
|
|
- .btn1 {
|
|
|
- border: 1px solid #5cfaff;
|
|
|
+ .right-inputs {
|
|
|
+ width: 100%;
|
|
|
+ display: flex;
|
|
|
+ height: 40px;
|
|
|
+ margin: 0 10px;
|
|
|
+ justify-content: space-between;
|
|
|
+ }
|
|
|
+ .left-buttons {
|
|
|
+ display: flex;
|
|
|
+ height: 40px;
|
|
|
|
|
|
- &::before {
|
|
|
- background-image: linear-gradient(#2effee92, #0cb1d592);
|
|
|
- }
|
|
|
+ .btn {
|
|
|
+ margin: 0 10px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .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 {
|
|
|
+ position: absolute;
|
|
|
+ display: block;
|
|
|
+ content: '';
|
|
|
+ width: calc(100% - 4px);
|
|
|
+ height: calc(100% - 4px);
|
|
|
+ top: 2px;
|
|
|
+ left: 2px;
|
|
|
+ border-radius: 2px;
|
|
|
+ z-index: -1;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .btn1 {
|
|
|
+ border: 1px solid #5cfaff;
|
|
|
|
|
|
- &:hover {
|
|
|
- border: 1px solid #5cfaffaa;
|
|
|
+ &::before {
|
|
|
+ background-image: linear-gradient(#2effee92, #0cb1d592);
|
|
|
+ }
|
|
|
|
|
|
- &::before {
|
|
|
- background-image: linear-gradient(#2effee72, #0cb1d572);
|
|
|
+ &: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;
|
|
|
- }
|
|
|
- 100% {
|
|
|
- height: 0px;
|
|
|
- }
|
|
|
-}
|
|
|
-:deep(.zxm-divider-inner-text) {
|
|
|
- color: #cacaca88 !important;
|
|
|
-}
|
|
|
-:deep(.zxm-form-item) {
|
|
|
- margin-bottom: 10px;
|
|
|
-}
|
|
|
+ @keyframes close {
|
|
|
+ 0% {
|
|
|
+ height: fit-content;
|
|
|
+ }
|
|
|
+ 100% {
|
|
|
+ height: 0px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ :deep(.zxm-divider-inner-text) {
|
|
|
+ color: #cacaca88 !important;
|
|
|
+ }
|
|
|
+ :deep(.zxm-form-item) {
|
|
|
+ margin-bottom: 10px;
|
|
|
+ }
|
|
|
</style>
|
