前端组件公共弹窗 element-plus

  <el-dialog
    modal-class="publicDialogVisible"
    v-model="dialogConfig.visible"
    :title="dialogConfig.title"
    width="1400px"
    :append-to-body="true"
    :destroy-on-close="true"
    :draggable="true"
    @closed="handleClosed"
  >
    <DialogTabs
      :gettype="dialogConfig.gettype"
      :dataID="dialogConfig.getSiteId"
      :SiteNo="dialogConfig.SiteNo"
      :comIDs="dialogConfig.comIDs"
      :customComponents="dialogConfig.customData"
      :RefName="dialogConfig.RefName"
    ></DialogTabs>
  </el-dialog>

重点：对应文件夹的位置

// 前端共同弹窗  界面引用

import DialogTabs from '@/views/DialogTabs/dialogTabs.vue';

// 公共弹窗

const dialogConfig = reactive({

  visible: false,

  getSiteId: '',

  SiteNo: '',

  data: {},

  comIDs: ['spjk'],

  customData: [],

  RefName: '',

  title: '详情',

  gettype: '',

});

2.新建dialogTabs.vue  组件

<template>
  <div id="NewdialogTabs">
    <el-tabs v-model="AllData.editableTabsValue" :stretch="true" @tab-click="TabsChange">
      <el-tab-pane v-for="item in AllData.editableTabs" :key="item.name" :label="item.title" :name="item.name">
        <component
          :is="item.content"
          :dataID="dataID"
          :SiteNo="SiteNo"
          :gettype="gettype"
          :tabsType="AllData.editableTabsValue"
          @update-tabs-type="updateTabsType"
          :RefreshName="AllData.RefreshName"
          :key="AllData.RefreshName"
          v-if="AllData.RefreshName == item.name"
        ></component>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script setup name="NewdialogTabs">
import { ref, reactive, toRefs, onMounted } from 'vue';
import Config from './DialogConfig';
// 父元素传值
// debugger;
const props = defineProps({
  //桥梁
  gettype: {
    type: String,
  },
  // 数据id
  dataID: {
    type: String,
  },
  SiteNo: {
    type: String,
  },
  // 当前站点需要展示的且已集成的组件列表
  comIDs: {
    type: Array,
  },
  // 自定义组件,产品化开发人员不建议使用,此配置是给项目的特殊需求预留功能,项目中正常的组件需求可以直接使用comIDs
  customComponents: {
    type: Array,
  },
  // 默认打开tabs的key
  RefName: {
    type: String,
  },
});

// 声明本页面中的变量
const AllData = reactive({
  editableTabsValue: '',
  editableTabs: [],
  RefreshName: '',
});
const updateTabsType = name => {
  AllData.editableTabsValue = name;
  AllData.RefreshName = name;
};
// tab切换事件
const TabsChange = (tab, event) => {
  AllData.RefreshName = tab.paneName;
  console.log(tab, AllData.RefreshName);
};
onMounted(() => {
  // 获取当前组件已分配的组件ID与配置文件中的公共组件ID进行对比,控制展示的tab选项
  let ComparisonTable = Config.ComparisonTable;
  AllData.editableTabs = [];
  Promise.all(
    ComparisonTable.map(function (element) {
      if (props.comIDs.includes(element.name)) {
        return element;
      }
    })
  ).then(function (data) {
    data = data.filter(n => n);
    //赋值其拥有的公共组件
    AllData.editableTabs = AllData.editableTabs.concat(data);
    console.log(AllData.editableTabs, '公共组件');
    //对自定义组件进行插入
    props.customComponents.forEach(element => {
      if (element.sort && element.sort != '') {
        // 如果有排序,就按照排序顺序插入到editableTabs中
        AllData.editableTabs.splice(element.sort, 0, element);
      } else if (element.sort == 0) {
        // 如果0,就默认放置在数据队列的最前面
        AllData.editableTabs.splice(0, 0, element);
      } else {
        // 如果没有排序,就默认放置在数据队列的最后面
        AllData.editableTabs.push(element);
      }
    });
    if (props.RefName == '' || props.RefName == undefined) {
      // 默认展示第一个
      AllData.editableTabsValue = AllData.editableTabs[0].name;
      AllData.RefreshName = AllData.editableTabs[0].name;
    } else {
      AllData.editableTabsValue = props.RefName;
      AllData.RefreshName = props.RefName;
    }
  });
});
</script>

<style lang="scss">
#NewdialogTabs {
  width: 100%;
  height: calc(100% - 10px);

  .el-tabs--top {
    width: 100%;
    height: 100%;

    .el-tabs__nav-wrap::after {
      display: none;
    }

    .el-tabs__header {
      background: #02366b;
      margin: 0;

      .el-tabs__item {
        color: #93a7ba;
        font-size: 16px;
      }

      .is-active {
        color: #00a9ff;
      }

      .el-tabs__active-bar {
        color: #00a9ff;
      }
    }

    .el-tabs__content {
      width: 100%;
      height: calc(100% - 45px);

      .el-tab-pane {
        width: 100%;
        height: 100%;
      }
    }
  }
}
</style>

3. 新建  DialogConfig.js

// 批量引入所有封装的子组件  component下组件为封装的公共组件  component下项目路径文件夹下的组件为定制化组件
const AllComponents = import.meta.globEager('./component/*.vue');
let res_components = {};
console.log(AllComponents);
Object.keys(AllComponents).forEach(item => {
  console.log(item);
  let comp = AllComponents[item];
  let name = comp.default.name;
  res_components[name] = comp.default;
});

const config = {
  ComparisonTable: [
    {
      title: '实时数据',
      content: markRaw(res_components['JC_dialog']),
      name: 'JC_dialog',
    },
    {
      title: '历史数据',
      content: markRaw(res_components['JC_oldList']),
      name: 'JC_oldList',
    },
   
  ],
};

export default config;

4.实时数据组件

<template>
  <div id="JC_dialog">
    <div class="table-content">
      <el-form :model="ListData">
        <!-- 排水 -->
        <div>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="站点编码:" prop="" class="mb5">
                <span class="title">{{ ListData.stCode }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="站点名称:" prop="" class="mb5">
                <span class="title">{{ ListData.stName }}</span>
              </el-form-item>
            </el-col>
          </el-row>
        </div>

      </el-form>
    </div>
  </div>
</template>

<script setup name="JC_dialog">
import { ref, reactive, toRefs, onMounted } from 'vue';
import bus from '@/bus';


const { proxy } = getCurrentInstance();
const { gas_type } = proxy.useDict('gas_type');
const useDialogTabs = dialogTabsStore();
const ListData = ref({});
//定义桥梁实时数据
const bridgesignage = ref('');
const showData = ref(null);
const loading = ref(false);
const props = defineProps({
  // 数据SiteNo
  SiteNo: {
    type: String,
  },
  gettype: {
    type: String,
  },
});

// 获取排水数据列表
const getPsData = () => {
  realtimeDataLatest(props.SiteNo).then(res => {
    // console.log('🚀 ~ getPsData ~ res:', res);
    ListData.value = res.data;
  });
};

onMounted(() => {
  if (useDialogTabs.mapType == 'paishuiSupervise') {
    getPsData();
  } else if (useDialogTabs.mapType == 'ranQi_supervise') {
    getRqData();
  }
});
</script>

<style lang="scss" scoped>
#JC_dialog {
  width: 100%;
  height: 100%;
  margin-top: 15px;
  .table-content {
    // height: calc(100% - 44px);
    width: 100%;
    padding: 0 20px;
    // overflow: hidden;
    overflow-y: auto;
    .title {
      font-size: 16px;
      font-weight: 600;
      color: #fff;
    }
    :deep(.el-form-item__label) {
      font-size: 16px;
      font-weight: 600;
      color: #fff;
    }
  }
}
:deep(.el-form-item__label) {
  color: #fff;
}

:deep(.el-form-item__content) {
  color: #fff;
}
</style>