2025.9.19 数据产品（待完成）

riku

2025-09-19 58c0f11fe2f23a1be2dec768f9ac02107301a634

 src/views/fysp/support/JingAnSupport.vue

@@ -1,72 +1,63 @@
<template>
  <FYOptionTime :initValue="true" type="date" v-model:value="updateTime"></FYOptionTime>
  <el-button type="primary" @click="fetchNewDevice">查询新设备</el-button>
  <el-button type="primary" @click="fetchNewConstruction">查询新工地</el-button>
  <el-row>
    <el-col :span="12">
      <el-text>新设备</el-text>
      <div v-for="item in deviceList" :key="item.id">
        <div>{{ item.id }}</div>
        <div>{{ item.code }}</div>
        <div>{{ item.name }}</div>
        <div>{{ item.address }}</div>
        <div>{{ item.status }}</div>
        <span>{{ item.createTime }} |</span>
        <span>{{ item.updateTime }} |</span>
        <span>{{ item.remark }} |</span>
        <span>{{ item.lon }} |</span>
        <span>{{ item.lat }}</span>
      </div>
    </el-col>
    <el-col :span="12">
      <el-text>新工地</el-text>
      <div v-for="item in constructionList" :key="item.id">
        <div>{{ item.id }}</div>
        <div>{{ item.code }}</div>
        <div>{{ item.name }}</div>
        <div>{{ item.address }}</div>
        <div>{{ item.street }}</div>
        <div>{{ item.status }}</div>
        <span>{{ item.lon }} |</span>
        <span>{{ item.lat }}</span>
        <span>{{ item.score }} |</span>
        <span>{{ item.grade }}</span>
        <span>{{ item.subTaskId }} |</span>
        <span>{{ item.createTime }} |</span>
      </div>
    </el-col>
  </el-row>
  <el-tabs ref="tabsRef">
    <el-tab-pane label="静安夜间施工管理">
      <JingAnNightConstruction></JingAnNightConstruction>
    </el-tab-pane>
    <el-tab-pane label="静安工地扬尘设备信息匹配">
      <NewDevice></NewDevice>
    </el-tab-pane>
    <el-tab-pane label="新工地">
      <NewConstruction></NewConstruction>
    </el-tab-pane>
  </el-tabs>
</template>
<script setup>
import { ref } from 'vue';
import dayjs from 'dayjs';
import constructionApi from '@/api/additional-jingan/constructionApi';
import { useFetchData } from '@/composables/fetchData';
import { ref, onMounted, provide, computed } from 'vue';
import NewDevice from './NewDevice.vue';
import NewConstruction from './NewConstruction.vue';
import JingAnNightConstruction from './JingAnNightConstruction.vue';

const { loading, fetchData } = useFetchData();
// 定义 tabs ref
const tabsRef = ref(null);
const tabsHeaderHeight = ref(0);

const updateTime = ref();
const deviceList = ref([]);
const constructionList = ref([]);
onMounted(() => {
  // 确保 DOM 已经渲染完成
  setTimeout(() => {
    tabsHeaderHeight.value = getTabsHeaderHeight();
  }, 0);
});

// 查询需确认的设备清单
function fetchNewDevice() {
  const param = dayjs(updateTime.value).format('YYYY-MM-DD HH:mm:ss');
  fetchData(() => {
    return constructionApi.queryDevice(param).then((res) => {
      deviceList.value = res.data;
    });
  });
function getTabsHeaderHeight() {
  if (tabsRef.value) {
    // 获取 el-tabs 组件的 DOM 元素
    const tabsElement = tabsRef.value.$el;

    // Element UI 的 el-tabs header 通常有 .el-tabs__header 类名
    const headerElement = tabsElement.querySelector('.el-tabs__header');

    if (headerElement) {
      // 获取 header 的 offsetHeight（包含 padding 和 border，不包含 margin）
      const offsetHeight = headerElement.offsetHeight;

      // 获取计算样式以获取 margin 值
      const computedStyle = window.getComputedStyle(headerElement);

      // 解析 margin 值（上下左右）
      const marginTop = parseFloat(computedStyle.marginTop || 0);
      const marginBottom = parseFloat(computedStyle.marginBottom || 0);
      // const marginLeft = parseFloat(computedStyle.marginLeft || 0);
      // const marginRight = parseFloat(computedStyle.marginRight || 0);

      // 计算总高度（包含所有 padding、border 和 margin）
      const totalHeightWithMargin = offsetHeight + marginTop + marginBottom;

      return totalHeightWithMargin;
    }
  }
  return 0;
}

// 查询新建工地
function fetchNewConstruction() {
  const param = dayjs(updateTime.value).format('YYYY-MM-DD HH:mm:ss');
  fetchData(() => {
    return constructionApi.queryGdNew(param).then((res) => {
      constructionList.value = res.data;
    });
  });
}
provide('tabsHeaderHeight', computed(() => tabsHeaderHeight.value));
</script>
<style scoped></style>