|
|
@@ -68,335 +68,335 @@
|
|
|
</template>
|
|
|
|
|
|
<script lang="ts" setup>
|
|
|
- import { ref, nextTick, onMounted, watch, computed, reactive } from 'vue';
|
|
|
- import BarAndLine from '/@/components/chart/BarAndLine.vue';
|
|
|
- import { number } from 'vue-types';
|
|
|
- const props = defineProps({
|
|
|
- modalIsShow: {
|
|
|
- type: Boolean,
|
|
|
- default: false,
|
|
|
- },
|
|
|
- modalType: {
|
|
|
- type: String,
|
|
|
- },
|
|
|
- data: {
|
|
|
- type: Object,
|
|
|
- default: () => {},
|
|
|
- },
|
|
|
- gasVal: {
|
|
|
- type: Number,
|
|
|
- },
|
|
|
- isMock: {
|
|
|
- type: Boolean,
|
|
|
- },
|
|
|
- });
|
|
|
- const emit = defineEmits(['handleOk', 'handleCancel']);
|
|
|
- const visible = computed(() => props.modalIsShow);
|
|
|
- const changeEchart = computed(() => props.modalType);
|
|
|
- const echartsData = ref<
|
|
|
- {
|
|
|
- gasVal: string | number;
|
|
|
- gas: string | number;
|
|
|
- readTime: string;
|
|
|
- fWindowM3: string | number;
|
|
|
- forntArea: string | number;
|
|
|
- rearArea?: string | number;
|
|
|
- }[]
|
|
|
- >([]);
|
|
|
- const monitorData = ref({});
|
|
|
- const echatsOption = {
|
|
|
- legend: {
|
|
|
- top: 10,
|
|
|
- },
|
|
|
- grid: {
|
|
|
- top: '80',
|
|
|
- left: '30',
|
|
|
- right: '35',
|
|
|
- bottom: '10',
|
|
|
- containLabel: true,
|
|
|
- },
|
|
|
- toolbox: {
|
|
|
- feature: {
|
|
|
- saveAsImage: {
|
|
|
- show: false,
|
|
|
- },
|
|
|
+import { ref, nextTick, onMounted, watch, computed, reactive } from 'vue';
|
|
|
+import BarAndLine from '/@/components/chart/BarAndLine.vue';
|
|
|
+import { number } from 'vue-types';
|
|
|
+const props = defineProps({
|
|
|
+ modalIsShow: {
|
|
|
+ type: Boolean,
|
|
|
+ default: false,
|
|
|
+ },
|
|
|
+ modalType: {
|
|
|
+ type: String,
|
|
|
+ },
|
|
|
+ data: {
|
|
|
+ type: Object,
|
|
|
+ default: () => {},
|
|
|
+ },
|
|
|
+ gasVal: {
|
|
|
+ type: Number,
|
|
|
+ },
|
|
|
+ isMock: {
|
|
|
+ type: Boolean,
|
|
|
+ },
|
|
|
+});
|
|
|
+const emit = defineEmits(['handleOk', 'handleCancel']);
|
|
|
+const visible = computed(() => props.modalIsShow);
|
|
|
+const changeEchart = computed(() => props.modalType);
|
|
|
+const echartsData = ref<
|
|
|
+ {
|
|
|
+ gasVal: string | number;
|
|
|
+ gas: string | number;
|
|
|
+ readTime: string;
|
|
|
+ fWindowM3: string | number;
|
|
|
+ forntArea: string | number;
|
|
|
+ rearArea?: string | number;
|
|
|
+ }[]
|
|
|
+>([]);
|
|
|
+const monitorData = ref({});
|
|
|
+const echatsOption = {
|
|
|
+ legend: {
|
|
|
+ top: 10,
|
|
|
+ },
|
|
|
+ grid: {
|
|
|
+ top: '80',
|
|
|
+ left: '30',
|
|
|
+ right: '35',
|
|
|
+ bottom: '10',
|
|
|
+ containLabel: true,
|
|
|
+ },
|
|
|
+ toolbox: {
|
|
|
+ feature: {
|
|
|
+ saveAsImage: {
|
|
|
+ show: false,
|
|
|
},
|
|
|
},
|
|
|
- xAxis: {
|
|
|
- type: 'category',
|
|
|
- axisLabel: {
|
|
|
- margin: 10,
|
|
|
- color: '#f1f1f199',
|
|
|
- },
|
|
|
- name: '',
|
|
|
+ },
|
|
|
+ xAxis: {
|
|
|
+ type: 'category',
|
|
|
+ axisLabel: {
|
|
|
+ margin: 10,
|
|
|
+ color: '#f1f1f199',
|
|
|
},
|
|
|
- yAxis: {
|
|
|
- axisLabel: {
|
|
|
- color: '#0071A5',
|
|
|
- },
|
|
|
+ name: '',
|
|
|
+ },
|
|
|
+ yAxis: {
|
|
|
+ axisLabel: {
|
|
|
+ color: '#0071A5',
|
|
|
},
|
|
|
- };
|
|
|
+ },
|
|
|
+};
|
|
|
|
|
|
- const chartsColumnListTemp = [
|
|
|
- {
|
|
|
- legend: '瓦斯超限值',
|
|
|
- seriesName: '(%)',
|
|
|
- ymax: 1100,
|
|
|
- yname: '%',
|
|
|
- linetype: 'line',
|
|
|
- yaxispos: 'left',
|
|
|
- color: '#00FFA8',
|
|
|
- sort: 1,
|
|
|
- xRotate: 0,
|
|
|
- dataIndex: 'gasVal',
|
|
|
- },
|
|
|
- {
|
|
|
- legend: '瓦斯实时值',
|
|
|
- seriesName: '(%)',
|
|
|
- ymax: 1100,
|
|
|
- yname: '%',
|
|
|
- linetype: 'line',
|
|
|
- yaxispos: 'left',
|
|
|
- color: '#00FFA8',
|
|
|
- sort: 1,
|
|
|
- xRotate: 0,
|
|
|
- dataIndex: 'gas',
|
|
|
- },
|
|
|
- {
|
|
|
- legend: '风窗开度',
|
|
|
- seriesName: '(°)',
|
|
|
- ymax: 1100,
|
|
|
- yname: '°',
|
|
|
- linetype: 'line',
|
|
|
- yaxispos: 'right',
|
|
|
- color: '#FDB146',
|
|
|
- sort: 2,
|
|
|
- xRotate: 0,
|
|
|
- dataIndex: 'forntArea',
|
|
|
- },
|
|
|
- {
|
|
|
- legend: '前窗开度',
|
|
|
- seriesName: '(°)',
|
|
|
- ymax: 1100,
|
|
|
- yname: '°',
|
|
|
- linetype: 'line',
|
|
|
- yaxispos: 'right',
|
|
|
- color: '#FDB146',
|
|
|
- sort: 2,
|
|
|
- xRotate: 0,
|
|
|
- dataIndex: 'forntArea',
|
|
|
- },
|
|
|
- {
|
|
|
- legend: '后窗开度',
|
|
|
- seriesName: '(°)',
|
|
|
- ymax: 1100,
|
|
|
- yname: '°',
|
|
|
- linetype: 'line',
|
|
|
- yaxispos: 'right',
|
|
|
- color: '#FDB146',
|
|
|
- sort: 2,
|
|
|
- xRotate: 0,
|
|
|
- dataIndex: 'rearArea',
|
|
|
- },
|
|
|
- ];
|
|
|
- const chartsColumnList = ref(chartsColumnListTemp);
|
|
|
- let frontWindowAngle = ref<undefined | number>(undefined);
|
|
|
- let rearWindowAngle = ref<undefined | number>(undefined);
|
|
|
- let fWindowM3 = ref<undefined | number>(undefined);
|
|
|
- let gas = ref<undefined | number>(undefined);
|
|
|
- let fWindowM3Temp = ref<undefined | number>(undefined);
|
|
|
- let gasTemp = ref<undefined | number>(undefined);
|
|
|
- let index = 1;
|
|
|
- watch(
|
|
|
- () => props.data,
|
|
|
- (newVal) => {
|
|
|
- if (!visible.value) return;
|
|
|
- if (newVal['nwindownum'] == 1) {
|
|
|
- // 单道风窗
|
|
|
- if (chartsColumnList.value.length != 3) chartsColumnList.value = [chartsColumnListTemp[0], chartsColumnListTemp[1], chartsColumnListTemp[2]];
|
|
|
- } else {
|
|
|
- // 多道风窗
|
|
|
- if (chartsColumnList.value.length != 4)
|
|
|
- chartsColumnList.value = [chartsColumnListTemp[0], chartsColumnListTemp[1], chartsColumnListTemp[3], chartsColumnListTemp[4]];
|
|
|
- }
|
|
|
- monitorData.value = newVal;
|
|
|
- if (echartsData.value.length > 20) {
|
|
|
- echartsData.value.shift();
|
|
|
+const chartsColumnListTemp = [
|
|
|
+ {
|
|
|
+ legend: '瓦斯超限值',
|
|
|
+ seriesName: '(%)',
|
|
|
+ ymax: 1100,
|
|
|
+ yname: '%',
|
|
|
+ linetype: 'line',
|
|
|
+ yaxispos: 'left',
|
|
|
+ color: '#00FFA8',
|
|
|
+ sort: 1,
|
|
|
+ xRotate: 0,
|
|
|
+ dataIndex: 'gasVal',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ legend: '瓦斯实时值',
|
|
|
+ seriesName: '(%)',
|
|
|
+ ymax: 1100,
|
|
|
+ yname: '%',
|
|
|
+ linetype: 'line',
|
|
|
+ yaxispos: 'left',
|
|
|
+ color: '#00FFA8',
|
|
|
+ sort: 1,
|
|
|
+ xRotate: 0,
|
|
|
+ dataIndex: 'gas',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ legend: '风窗开度',
|
|
|
+ seriesName: '(°)',
|
|
|
+ ymax: 1100,
|
|
|
+ yname: '°',
|
|
|
+ linetype: 'line',
|
|
|
+ yaxispos: 'right',
|
|
|
+ color: '#FDB146',
|
|
|
+ sort: 2,
|
|
|
+ xRotate: 0,
|
|
|
+ dataIndex: 'forntArea',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ legend: '前窗开度',
|
|
|
+ seriesName: '(°)',
|
|
|
+ ymax: 1100,
|
|
|
+ yname: '°',
|
|
|
+ linetype: 'line',
|
|
|
+ yaxispos: 'right',
|
|
|
+ color: '#FDB146',
|
|
|
+ sort: 2,
|
|
|
+ xRotate: 0,
|
|
|
+ dataIndex: 'forntArea',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ legend: '后窗开度',
|
|
|
+ seriesName: '(°)',
|
|
|
+ ymax: 1100,
|
|
|
+ yname: '°',
|
|
|
+ linetype: 'line',
|
|
|
+ yaxispos: 'right',
|
|
|
+ color: '#FDB146',
|
|
|
+ sort: 2,
|
|
|
+ xRotate: 0,
|
|
|
+ dataIndex: 'rearArea',
|
|
|
+ },
|
|
|
+];
|
|
|
+const chartsColumnList = ref(chartsColumnListTemp);
|
|
|
+let frontWindowAngle = ref<undefined | number>(undefined);
|
|
|
+let rearWindowAngle = ref<undefined | number>(undefined);
|
|
|
+let fWindowM3 = ref<undefined | number>(undefined);
|
|
|
+let gas = ref<undefined | number>(undefined);
|
|
|
+let fWindowM3Temp = ref<undefined | number>(undefined);
|
|
|
+let gasTemp = ref<undefined | number>(undefined);
|
|
|
+let index = 1;
|
|
|
+watch(
|
|
|
+ () => props.data,
|
|
|
+ (newVal) => {
|
|
|
+ if (!visible.value) return;
|
|
|
+ if (newVal['nwindownum'] == 1) {
|
|
|
+ // 单道风窗
|
|
|
+ if (chartsColumnList.value.length != 3) chartsColumnList.value = [chartsColumnListTemp[0], chartsColumnListTemp[1], chartsColumnListTemp[2]];
|
|
|
+ } else {
|
|
|
+ // 多道风窗
|
|
|
+ if (chartsColumnList.value.length != 4)
|
|
|
+ chartsColumnList.value = [chartsColumnListTemp[0], chartsColumnListTemp[1], chartsColumnListTemp[3], chartsColumnListTemp[4]];
|
|
|
+ }
|
|
|
+ monitorData.value = newVal;
|
|
|
+ if (echartsData.value.length > 20) {
|
|
|
+ echartsData.value.shift();
|
|
|
+ }
|
|
|
+ if (props.isMock) {
|
|
|
+ // 这里开启风窗开度模拟
|
|
|
+ if (newVal['nwindownum'] == 1 && frontWindowAngle.value === undefined) {
|
|
|
+ frontWindowAngle.value = newVal['forntArea'];
|
|
|
+ } else if (newVal['nwindownum'] == 2) {
|
|
|
+ if (frontWindowAngle.value === undefined) frontWindowAngle.value = (newVal['forntArea'] / newVal['maxarea']) * 90;
|
|
|
+ if (rearWindowAngle.value === undefined) rearWindowAngle.value = (newVal['rearArea'] / newVal['maxarea']) * 90;
|
|
|
}
|
|
|
- if (props.isMock) {
|
|
|
- // 这里开启风窗开度模拟
|
|
|
- if (newVal['nwindownum'] == 1 && frontWindowAngle.value === undefined) {
|
|
|
- frontWindowAngle.value = newVal['forntArea'];
|
|
|
- } else if (newVal['nwindownum'] == 2) {
|
|
|
- if (frontWindowAngle.value === undefined) frontWindowAngle.value = (newVal['forntArea'] / newVal['maxarea']) * 90;
|
|
|
- if (rearWindowAngle.value === undefined) rearWindowAngle.value = (newVal['rearArea'] / newVal['maxarea']) * 90;
|
|
|
- }
|
|
|
- if (fWindowM3.value === undefined) fWindowM3.value = newVal['fWindowM3'];
|
|
|
- // if (gas == undefined) gas = Number(newVal['gas']) > Number(props.gasVal) ? newVal['gas'] : props.gasVal + 0.2;
|
|
|
- if (gas.value == undefined) gas.value = props.gasVal + 0.2;
|
|
|
- // 开启模拟
|
|
|
- if (gas.value > props.gasVal - 0.3) {
|
|
|
- mock(newVal['maxarea']);
|
|
|
- echartsData.value = [
|
|
|
- ...echartsData.value,
|
|
|
- {
|
|
|
- gasVal: props.gasVal,
|
|
|
- gas: gas.value as number,
|
|
|
- readTime: newVal['readTime'].substring(11),
|
|
|
- forntArea: frontWindowAngle.value as number,
|
|
|
- rearArea: rearWindowAngle.value as number,
|
|
|
- fWindowM3: fWindowM3.value as number,
|
|
|
- },
|
|
|
- ];
|
|
|
- } else {
|
|
|
- const random = Math.random() - 0.5;
|
|
|
- fWindowM3Temp.value = fWindowM3.value + random * 50;
|
|
|
- gasTemp.value = gas.value + random * 0.01;
|
|
|
- echartsData.value = [
|
|
|
- ...echartsData.value,
|
|
|
- {
|
|
|
- gasVal: props.gasVal,
|
|
|
- gas: gasTemp.value,
|
|
|
- readTime: newVal['readTime'].substring(11),
|
|
|
- forntArea: frontWindowAngle.value as number,
|
|
|
- rearArea: rearWindowAngle.value as number,
|
|
|
- fWindowM3: fWindowM3Temp.value,
|
|
|
- },
|
|
|
- ];
|
|
|
- }
|
|
|
+ if (fWindowM3.value === undefined) fWindowM3.value = newVal['fWindowM3'];
|
|
|
+ // if (gas == undefined) gas = Number(newVal['gas']) > Number(props.gasVal) ? newVal['gas'] : props.gasVal + 0.2;
|
|
|
+ if (gas.value == undefined) gas.value = props.gasVal + 0.2;
|
|
|
+ // 开启模拟
|
|
|
+ if (gas.value > props.gasVal - 0.3) {
|
|
|
+ mock(newVal['maxarea']);
|
|
|
+ echartsData.value = [
|
|
|
+ ...echartsData.value,
|
|
|
+ {
|
|
|
+ gasVal: props.gasVal,
|
|
|
+ gas: gas.value as number,
|
|
|
+ readTime: newVal['readTime'].substring(11),
|
|
|
+ forntArea: frontWindowAngle.value as number,
|
|
|
+ rearArea: rearWindowAngle.value as number,
|
|
|
+ fWindowM3: fWindowM3.value as number,
|
|
|
+ },
|
|
|
+ ];
|
|
|
} else {
|
|
|
+ const random = Math.random() - 0.5;
|
|
|
+ fWindowM3Temp.value = fWindowM3.value + random * 50;
|
|
|
+ gasTemp.value = gas.value + random * 0.01;
|
|
|
echartsData.value = [
|
|
|
...echartsData.value,
|
|
|
{
|
|
|
gasVal: props.gasVal,
|
|
|
- gas: newVal['gas'],
|
|
|
+ gas: gasTemp.value,
|
|
|
readTime: newVal['readTime'].substring(11),
|
|
|
- forntArea: (newVal['forntArea'] / newVal['maxarea']) * 90,
|
|
|
- rearArea: (newVal['rearArea'] / newVal['maxarea']) * 90,
|
|
|
- fWindowM3: newVal['fWindowM3'],
|
|
|
+ forntArea: frontWindowAngle.value as number,
|
|
|
+ rearArea: rearWindowAngle.value as number,
|
|
|
+ fWindowM3: fWindowM3Temp.value,
|
|
|
},
|
|
|
];
|
|
|
}
|
|
|
+ } else {
|
|
|
+ echartsData.value = [
|
|
|
+ ...echartsData.value,
|
|
|
+ {
|
|
|
+ gasVal: props.gasVal,
|
|
|
+ gas: newVal['gas'],
|
|
|
+ readTime: newVal['readTime'].substring(11),
|
|
|
+ forntArea: (newVal['forntArea'] / newVal['maxarea']) * 90,
|
|
|
+ rearArea: (newVal['rearArea'] / newVal['maxarea']) * 90,
|
|
|
+ fWindowM3: newVal['fWindowM3'],
|
|
|
+ },
|
|
|
+ ];
|
|
|
}
|
|
|
- );
|
|
|
+ }
|
|
|
+);
|
|
|
|
|
|
- function mock(maxArea?: number) {
|
|
|
- debugger;
|
|
|
- if (maxArea) {
|
|
|
- // 每调用一次数据就增减一些
|
|
|
- // frontWindowAngle 增加一些
|
|
|
- if (frontWindowAngle.value !== undefined && frontWindowAngle.value <= 90) {
|
|
|
- frontWindowAngle.value = Math.min(frontWindowAngle.value + 3, 90);
|
|
|
- }
|
|
|
- if (rearWindowAngle.value !== undefined && rearWindowAngle.value <= 90) {
|
|
|
- rearWindowAngle.value = Math.min(rearWindowAngle.value + 3, 90);
|
|
|
- }
|
|
|
- if (fWindowM3.value !== undefined) {
|
|
|
- fWindowM3.value += 40 * index;
|
|
|
- }
|
|
|
- if (gas.value !== undefined) {
|
|
|
- gas.value -= 0.001 * index;
|
|
|
- }
|
|
|
- ++index;
|
|
|
+function mock(maxArea?: number) {
|
|
|
+ debugger;
|
|
|
+ if (maxArea) {
|
|
|
+ // 每调用一次数据就增减一些
|
|
|
+ // frontWindowAngle 增加一些
|
|
|
+ if (frontWindowAngle.value !== undefined && frontWindowAngle.value <= 90) {
|
|
|
+ frontWindowAngle.value = Math.min(frontWindowAngle.value + 3, 90);
|
|
|
+ }
|
|
|
+ if (rearWindowAngle.value !== undefined && rearWindowAngle.value <= 90) {
|
|
|
+ rearWindowAngle.value = Math.min(rearWindowAngle.value + 3, 90);
|
|
|
+ }
|
|
|
+ if (fWindowM3.value !== undefined) {
|
|
|
+ fWindowM3.value += 40 * index;
|
|
|
+ }
|
|
|
+ if (gas.value !== undefined) {
|
|
|
+ gas.value -= 0.001 * index;
|
|
|
}
|
|
|
+ ++index;
|
|
|
}
|
|
|
+}
|
|
|
|
|
|
- function handleOk() {
|
|
|
- emit('handleCancel');
|
|
|
- echartsData.value = [];
|
|
|
- frontWindowAngle.value = undefined;
|
|
|
- rearWindowAngle.value = undefined;
|
|
|
- fWindowM3.value = undefined;
|
|
|
- gas.value = undefined;
|
|
|
- fWindowM3Temp.value = undefined;
|
|
|
- gasTemp.value = undefined;
|
|
|
- }
|
|
|
- onMounted(() => {});
|
|
|
+function handleOk() {
|
|
|
+ emit('handleCancel');
|
|
|
+ echartsData.value = [];
|
|
|
+ frontWindowAngle.value = undefined;
|
|
|
+ rearWindowAngle.value = undefined;
|
|
|
+ fWindowM3.value = undefined;
|
|
|
+ gas.value = undefined;
|
|
|
+ fWindowM3Temp.value = undefined;
|
|
|
+ gasTemp.value = undefined;
|
|
|
+}
|
|
|
+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; /* 确保背景图片居中 */
|
|
|
- }
|
|
|
- .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/autoWindow.svg);
|
|
|
+ background-repeat: no-repeat;
|
|
|
+ background-size: contain; /* 确保背景图片完整显示 */
|
|
|
+ background-position: center; /* 确保背景图片居中 */
|
|
|
}
|
|
|
- .setting-box {
|
|
|
- width: 1570px;
|
|
|
- height: 70px;
|
|
|
- margin: 10px 0;
|
|
|
- background-color: #ffffff05;
|
|
|
- border: 1px solid #00d8ff22;
|
|
|
+ .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;
|
|
|
+
|
|
|
+ .right-inputs {
|
|
|
+ width: 100%;
|
|
|
display: flex;
|
|
|
- align-items: center;
|
|
|
+ height: 40px;
|
|
|
+ margin: 0 10px;
|
|
|
justify-content: space-between;
|
|
|
+ }
|
|
|
+ .left-buttons {
|
|
|
+ display: flex;
|
|
|
+ height: 40px;
|
|
|
|
|
|
- .right-inputs {
|
|
|
- width: 100%;
|
|
|
- display: flex;
|
|
|
- height: 40px;
|
|
|
+ .btn {
|
|
|
margin: 0 10px;
|
|
|
- justify-content: space-between;
|
|
|
- }
|
|
|
- .left-buttons {
|
|
|
- display: flex;
|
|
|
- height: 40px;
|
|
|
-
|
|
|
- .btn {
|
|
|
- margin: 0 10px;
|
|
|
- }
|
|
|
- }
|
|
|
- .border-clip {
|
|
|
- width: 1px;
|
|
|
- height: 25px;
|
|
|
- border-right: 1px solid #8b8b8b77;
|
|
|
- }
|
|
|
-
|
|
|
- .input-box {
|
|
|
- width: 300px;
|
|
|
- span {
|
|
|
- color: aqua;
|
|
|
- padding: 0 20px;
|
|
|
- }
|
|
|
}
|
|
|
}
|
|
|
+ .border-clip {
|
|
|
+ width: 1px;
|
|
|
+ height: 25px;
|
|
|
+ border-right: 1px solid #8b8b8b77;
|
|
|
+ }
|
|
|
|
|
|
- @keyframes open {
|
|
|
- 0% {
|
|
|
- height: 0px;
|
|
|
- }
|
|
|
- 100% {
|
|
|
- height: fit-content;
|
|
|
+ .input-box {
|
|
|
+ width: 300px;
|
|
|
+ span {
|
|
|
+ color: aqua;
|
|
|
+ padding: 0 20px;
|
|
|
}
|
|
|
}
|
|
|
+}
|
|
|
|
|
|
- @keyframes close {
|
|
|
- 0% {
|
|
|
- height: fit-content;
|
|
|
- }
|
|
|
- 100% {
|
|
|
- height: 0px;
|
|
|
- }
|
|
|
+@keyframes open {
|
|
|
+ 0% {
|
|
|
+ height: 0px;
|
|
|
+ }
|
|
|
+ 100% {
|
|
|
+ height: fit-content;
|
|
|
}
|
|
|
- :deep(.zxm-divider-inner-text) {
|
|
|
- color: #cacaca88 !important;
|
|
|
+}
|
|
|
+
|
|
|
+@keyframes close {
|
|
|
+ 0% {
|
|
|
+ height: fit-content;
|
|
|
}
|
|
|
- :deep(.zxm-form-item) {
|
|
|
- margin-bottom: 10px;
|
|
|
+ 100% {
|
|
|
+ height: 0px;
|
|
|
}
|
|
|
+}
|
|
|
+:deep(.zxm-divider-inner-text) {
|
|
|
+ color: #cacaca88 !important;
|
|
|
+}
|
|
|
+:deep(.zxm-form-item) {
|
|
|
+ margin-bottom: 10px;
|
|
|
+}
|
|
|
</style>
|
