|
|
@@ -0,0 +1,131 @@
|
|
|
+<template>
|
|
|
+ <BasicModal
|
|
|
+ @register="register"
|
|
|
+ title="报警点位限值设置"
|
|
|
+ width="1400px"
|
|
|
+ v-bind="$attrs"
|
|
|
+ @ok="onSubmit"
|
|
|
+ @cancel="onSubmit"
|
|
|
+ :defaultFullscreen="false"
|
|
|
+ >
|
|
|
+ <div class="setting-box">
|
|
|
+ <div class="set-box" v-if="pointListFan1.length">
|
|
|
+ <div class="set-box-item" v-for="(point, key) in pointListFan1" :key="key">
|
|
|
+ <div class="button-box" @click="showModal(point)">{{ point['valuename'] }}</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="set-box" v-if="pointListFan2.length">
|
|
|
+ <div class="set-box-item" v-for="(point, key) in pointListFan2" :key="key">
|
|
|
+ <div class="button-box" @click="showModal(point)">{{ point['valuename'] }}</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="set-box" v-if="pointListFan3.length">
|
|
|
+ <div class="set-box-item" v-for="(point, key) in pointListFan3" :key="key">
|
|
|
+ <div class="button-box" @click="showModal(point)">{{ point['valuename'] }}</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </BasicModal>
|
|
|
+</template>
|
|
|
+<script lang="ts" setup>
|
|
|
+ import { onMounted, ref, onUnmounted } from 'vue';
|
|
|
+ import { BasicModal, useModalInner } from '/@/components/Modal';
|
|
|
+ import { list } from '/@/views/vent/deviceManager/comment/pointTabel/point.api';
|
|
|
+
|
|
|
+ const emit = defineEmits(['close', 'register', 'showSetModal']);
|
|
|
+ const props = defineProps({
|
|
|
+ deviceType: {
|
|
|
+ type: String,
|
|
|
+ default: '',
|
|
|
+ },
|
|
|
+ });
|
|
|
+ const pointListFan1 = ref<{ valuename: string; valuecode: string }[]>([]);
|
|
|
+ const pointListFan2 = ref<{ valuename: string; valuecode: string }[]>([]);
|
|
|
+ const pointListFan3 = ref<{ valuename: string; valuecode: string }[]>([]);
|
|
|
+
|
|
|
+ // 注册 modal
|
|
|
+ const [register, { closeModal }] = useModalInner();
|
|
|
+
|
|
|
+ async function onSubmit() {
|
|
|
+ emit('close');
|
|
|
+ closeModal();
|
|
|
+ }
|
|
|
+
|
|
|
+ function showModal(item) {
|
|
|
+ emit('showSetModal', item);
|
|
|
+ }
|
|
|
+
|
|
|
+ onMounted(async () => {
|
|
|
+ const result = await list({ devicetype: props.deviceType, size: 500, valuecode: '*setVal' }); //setVal
|
|
|
+ const dataList = result.records.sort((a, b) => a.valuename.localeCompare(b.valuename));
|
|
|
+ pointListFan1.value = dataList.filter((item) => item.valuecode.startsWith('fan1') || item.valuecode.startsWith('Fan1'));
|
|
|
+ pointListFan2.value = dataList.filter((item) => item.valuecode.startsWith('fan2') || item.valuecode.startsWith('Fan2'));
|
|
|
+ pointListFan3.value = dataList.filter((item) => item.valuecode.startsWith('fan3') || item.valuecode.startsWith('Fan3'));
|
|
|
+ });
|
|
|
+ onUnmounted(() => {});
|
|
|
+</script>
|
|
|
+<style scoped lang="less">
|
|
|
+ @import '/@/design/theme.less';
|
|
|
+ @import '/@/design/vent/modal.less';
|
|
|
+ .setting-box {
|
|
|
+ flex: 1;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: row;
|
|
|
+ justify-content: center;
|
|
|
+ }
|
|
|
+ .set-box {
|
|
|
+ flex: 1;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: row;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ margin: 0 10px;
|
|
|
+ justify-content: center;
|
|
|
+ &:not(:last-child) {
|
|
|
+ margin-right: 10px;
|
|
|
+ border-right: 1px solid var(--vent-base-border);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .set-box-item {
|
|
|
+ width: 200px;
|
|
|
+ height: auto;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: row;
|
|
|
+ // flex-wrap: wrap;
|
|
|
+ justify-content: flex-start;
|
|
|
+ margin-bottom: 10px;
|
|
|
+ }
|
|
|
+ .button-box {
|
|
|
+ position: relative;
|
|
|
+ padding: 5px;
|
|
|
+ border: 1px transparent solid;
|
|
|
+ border-radius: 5px;
|
|
|
+ width: auto;
|
|
|
+ height: 34px;
|
|
|
+ border: 1px solid var(--vent-base-border);
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ color: var(--vent-font-color);
|
|
|
+ padding: 0 10px;
|
|
|
+ cursor: pointer;
|
|
|
+
|
|
|
+ &:hover {
|
|
|
+ background: linear-gradient(#3eb2ff55, #00c3ff55);
|
|
|
+ }
|
|
|
+
|
|
|
+ &::before {
|
|
|
+ width: calc(100% - 6px);
|
|
|
+ height: 26px;
|
|
|
+ content: '';
|
|
|
+ position: absolute;
|
|
|
+ top: 3px;
|
|
|
+ right: 0;
|
|
|
+ left: 3px;
|
|
|
+ bottom: 0;
|
|
|
+ z-index: -1;
|
|
|
+ border-radius: inherit;
|
|
|
+ /*important*/
|
|
|
+ background: linear-gradient(#014978, #2ec2ca);
|
|
|
+ }
|
|
|
+ }
|
|
|
+</style>
|