index.vue

<script setup>
import {getCurrentInstance, nextTick, onMounted, reactive, ref, watch} from 'vue'
import MoveMonitorNewDataPage from './MoveMonitorNewDataPage.vue' // 导入组件
import MoveMonitorHistoryPage from './MoveMonitorHistoryPage.vue' // 导入组件
import MoveMonitorAlarmPage from './MoveMonitorAlarmPage.vue' // 导入组件
import zhCn from "element-plus/dist/locale/zh-cn.mjs"
import store from "../../../store/index.js";
import {
  getMoveAlarmNumber,
  exportMoveMonitorNewData,
  exportMoveMonitorHistoryData,
  exportMoveMonitorAlarmData,
} from "../../../api/AIStation/MoveMonitor.js";
import {busdynamicenvironmentalalarmQueryAlarmsList} from "../../../dataJson/AIStation-data/MoveMonitor.js";
import {useRoute} from "vue-router";
import {handleGetAIToken} from "../AItoken.js";

import {ElMessage} from "element-plus";


const options = ref([]);
const enterpriseId = ref();
const props = {multiple: true, emitPath: false}
const {proxy} = getCurrentInstance();
const childComponentRef = ref(null);
const getData = () => {
  if (childComponentRef.value && childComponentRef.value.getData) {
    console.log('能不能成功啊')
    childComponentRef.value.getData(); // 调用子组件的 getData 方法
  }
};
// 列表
const topBtn = ref([
  {id: 1, name: '最新数据', component: MoveMonitorNewDataPage},
  {id: 2, name: '历史数据', component: MoveMonitorHistoryPage},
  {id: 3, name: '报警信息', component: MoveMonitorAlarmPage}
]);
const selectedBtn = ref(null);
const optionsList = ref([])
const childParams = ref({})
// 默认显示的组件页面
const selectedComponent = ref(MoveMonitorNewDataPage);

// 当前选中的标签页名称
const activeName = ref(MoveMonitorNewDataPage);

// 报警数量
const alarmNum = ref(0);

// 查询结果数据
const searchData = ref([]);
// 点击标签页切换事件
const handleTabClick = (tab, event) => {
  console.log('id', tab)
  const itemName = tab.props.label
  const selectedItem = topBtn.value.find(item => item.name === itemName.slice(0, 4));
  if (selectedItem) {
    selectedComponent.value = selectedItem.component;
    selectedBtn.value = selectedItem.id;
    resetSearch();
    search()
  }
};

// 初始化选中的标签页
onMounted(() => {
  activeName.value = topBtn.value[0].component;
  selectedBtn.value = topBtn.value[0].id;
});
const Page = reactive({total: 0, rows: 20, page: 1});
// 告警状态
const alarmStatusList = [
  {
    label: '正常',
    value: 0
  },
  {
    label: '异常',
    value: 1
  }
]
const queryParams = reactive({
  stationId: '',
  alarmStatus: '',
  alarmType: '',
  beginTime: '',
  endTime: '',
});

const search = () => {
  let stationId = ''
  if (queryParams.stationId === undefined){
    stationId = queryParams.stationId = ''
  } else {
    stationId = queryParams.stationId[2]
  }
  const item = {
    page: Page.page,
    size: Page.rows,
    stationId: stationId,
    alarmStatus: queryParams.alarmStatus,
    alarmType: queryParams.alarmType,
    beginTime: queryParams.beginTime,
    endTime: queryParams.endTime,
  }
  if (item.stationId === undefined){
    item.stationId = ''
  }
  if (item.beginTime == null){
    item.beginTime = ''
  }
  if (item.endTime == null){
    item.endTime = ''
  }
  if (item.alarmStatus === undefined){
    item.alarmStatus = ''
  }
  if (item.alarmType === undefined){
    item.alarmType = ''
  }
  if (selectedBtn.value === 1) {
    childParams.value = item
  } else if (selectedBtn.value === 2) {
    childParams.value = item
  } else if (selectedBtn.value === 3) {
    childParams.value = item
  }
  console.log('查询:', item);
};

function getNumber() {
/*  getMoveAlarmNumber().then(res => {
    console.log('123123123123-----------', res.data)
    alarmNum.value = res.data ? res.data : 0
  })*/
  alarmNum.value = busdynamicenvironmentalalarmQueryAlarmsList.data
}

/** 导出按钮操作 */
const handleExport = () => {
  const item = {
    stationId: queryParams.stationId,
    alarmStatus: queryParams.alarmStatus,
    alarmType: queryParams.alarmType,
    beginTime: queryParams.beginTime,
    endTime: queryParams.endTime,
  }
  if (item.stationId === undefined){
    item.stationId = ''
  }
  if (item.beginTime == null){
    item.beginTime = ''
  }
  if (item.endTime == null){
    item.endTime = ''
  }
  if (item.alarmStatus === undefined){
    item.alarmStatus = ''
  }
  if (item.alarmType === undefined){
    item.alarmType = ''
  }
  console.log('selectedBtn.value:', selectedBtn.value)
  if (selectedBtn.value === 1) {
    console.log('11111')
    exportMoveMonitorNewData(item).then(res => {
      const blob = new Blob([res])
      const downloadElement = document.createElement('a')
      const href = window.URL.createObjectURL(blob)// 创建下载的链接
      downloadElement.href = href
      downloadElement.download = '动环监视最新信息' + '.xls' // 下载后文件名
      document.body.appendChild(downloadElement)
      downloadElement.click()// 点击下载
      document.body.removeChild(downloadElement)// 下载完成移除元素
      window.URL.revokeObjectURL(href)// 释放掉blob对象
    })
  } else if (selectedBtn.value === 2) {
    console.log('22222')
    exportMoveMonitorHistoryData(item).then(res => {
      const blob = new Blob([res])
      const downloadElement = document.createElement('a')
      const href = window.URL.createObjectURL(blob)// 创建下载的链接
      downloadElement.href = href
      downloadElement.download = '动环监视历史信息' + '.xls' // 下载后文件名
      document.body.appendChild(downloadElement)
      downloadElement.click()// 点击下载
      document.body.removeChild(downloadElement)// 下载完成移除元素
      window.URL.revokeObjectURL(href)// 释放掉blob对象
    })
  } else if (selectedBtn.value === 3) {
    console.log('33333')
    exportMoveMonitorAlarmData(item).then(res => {
      const blob = new Blob([res])
      const downloadElement = document.createElement('a')
      const href = window.URL.createObjectURL(blob)// 创建下载的链接
      downloadElement.href = href
      downloadElement.download = '动环监视报警信息' + '.xls' // 下载后文件名
      document.body.appendChild(downloadElement)
      downloadElement.click()// 点击下载
      document.body.removeChild(downloadElement)// 下载完成移除元素
      window.URL.revokeObjectURL(href)// 释放掉blob对象
    })
  }
  console.log('导出:', queryParams.value);
};

// 重置
const resetSearch = () => {
  queryParams.alarmStatus = ''
  queryParams.beginTime = ''
  queryParams.endTime = ''
  queryParams.alarmType = ''
  queryParams.stationId = ''
  searchData.value = []
  childParams.value = {
    page: Page.page,
    size: Page.rows,
    stationId: '',
    alarmStatus: '',
    alarmType: '',
    beginTime: '',
    endTime: '',
  }
  // getData()
}

const loading = ref(true);
getEnterprise();

function getEnterprise() {
  const result = store.getters.getEnterprise();
  if (result) {
    enterpriseId.value = result[0].enterpriseId;
  }
}

// function getSupplys() {
//   loading.value = true;
//   // tableData.length = 0;
//   options.length = 0;
//   const result = store.getters.getEnterprise();
//   if (result) {
//     console.log('result:', result)
//     result.forEach(element => {
//       let allItems = []
//       if (element.enterpriseId === enterpriseId.value) {
//         if (element.enterpriseId === "9BCA54BC-8F27-4849-8D7D-50C5099E1949".toLowerCase()) {
//           element.serviceCenterList.forEach(center => {//遍历一级目录下的
//             center.supplyList.forEach(supply => {//拿到一级目录下的然后遍历它二级目录下的
//               console.log('supply:', supply)
//               supply.stationList.forEach(station => {//拿到
//                 let unitIdList = []
//                 supply.transferList.forEach(unit => {
//                   //unit的stationId等于station的stationId的话，就把这个unit的unitId添加到unitIdList中
//                   if (unit.stationId === station.stationId) {
//                     unitIdList.push(unit.unitId)
//                   }
//                 })
//                 //将unitIdList集合按逗号分隔成字符串
//                 let unitId = unitIdList.join(',')
//                 allItems.push({
//                   stationId: station.stationId,
//                   stationName: station.stationName,
//                   supplyId: station.supplyId,
//                   unitId: unitId
//                 })
//               });
//             });
//           })
//         } else {
//           element.supplyList.forEach(element => {
//             element.stationList.forEach(station => {
//               allItems.push({
//                 stationId: station.stationId,
//                 stationName: station.stationName,
//                 supplyId: station.supplyId
//               })
//             })
//           })
//         }
//       }
//       options.value = allItems;
//     });
//   }
// }
function getSupplys(){
  loading.value = true;
  // tableData.length = 0;
  options.length = 0;
  const result = store.getters.getEnterprise();
  if (result) {
    let allItems = []
    result.forEach(element=>{
      if(element.enterpriseId=== enterpriseId.value){
        if(element.enterpriseId ===  "9BCA54BC-8F27-4849-8D7D-50C5099E1949".toLowerCase()){
          element.serviceCenterList.forEach(center=>{
            let c = [];
            center.supplyList.forEach(supply => {
              let chi = [];
              supply.stationList.forEach(station => {
                chi.push({ value: station.stationId, label: station.stationName });
              });
              c.push({ children: chi, label: supply.supplyName});
            });
            allItems.push({children: c, label: center.serviceCenterName});
          })
        }else{
          element.supplyList.forEach(element => {
            let chi = [];
            element.stationList.forEach(station => {
              chi.push({ value: station.stationId, label: station.stationName });
            })
            allItems.push({children: chi, label: element.serviceCenterName});
          })
        }
        options.value = allItems;
      }
    });
  }
  // stationId.value.push(options[0].children[0].children[0].value);
}
getSupplys();
const performActions = async () => {
  try {
    await handleGetAIToken(); // 等待 handleGetAIToken 完成
    resetSearch()
    getNumber()
  } catch (error) {
    console.error('处理 Token 时出错:', error);
  }
};
const route = useRoute()
const number = ref(0)
watch(
    () => route.path,  // 只监听路径变化
    () => {
      if(route.path === '/AIStation/MoveMonitor') {
        selectedComponent.value = MoveMonitorNewDataPage
        activeName.value = MoveMonitorNewDataPage
        selectedBtn.value = 1
        // 路由变化，执行相应操作
        performActions()
      }
    },
    { immediate: true }  // 只在路径变化时触发
)
let isErrorDisplayed = false;

watch(
    () => queryParams.endTime,
    async () => {
      const beginTime = new Date(queryParams.beginTime).getTime();
      const endTime = new Date(queryParams.endTime).getTime();

      if (queryParams.beginTime && endTime < beginTime && !isErrorDisplayed) {
        isErrorDisplayed = true; // 设置标志
        ElMessage.error({
          message: '结束时间不能早于开始时间!'
        });
        queryParams.beginTime = '';
        queryParams.endTime = '';
        await nextTick();
        queryParams.endTime = '';
        isErrorDisplayed = false; // 重置标志
      }
    }
);

watch(
    () => queryParams.beginTime,
    async () => {
      const beginTime = new Date(queryParams.beginTime).getTime();
      const endTime = new Date(queryParams.endTime).getTime();

      if (queryParams.endTime && endTime < beginTime && !isErrorDisplayed) {
        isErrorDisplayed = true; // 设置标志
        ElMessage.error({
          message: '结束时间不能早于开始时间!'
        });
        queryParams.beginTime = '';
        queryParams.endTime = '';
        await nextTick();
        queryParams.beginTime = '';
        isErrorDisplayed = false; // 重置标志
      }
    }
);
</script>
<template>
  <div class="app-content">
    <div class="search-wrapper">
      <el-form :model="queryParams" :inline="true" style="padding: 10px 0 0 10px">
        <el-form-item label="换热站：">
          <el-cascader :options="options" v-model="queryParams.stationId" filterable clearable :show-all-levels="false"
                       placeholder="请选择" style="min-width: 210px;" />
<!--          <el-select v-model="queryParams.stationId" placeholder="请选择" style="min-width: 200px" filterable clearable>-->
<!--            <el-option-->
<!--                v-for="item in options"-->
<!--                :key="item.value"-->
<!--                :label="item.stationName"-->
<!--                :value="item.stationId">-->
<!--            </el-option>-->
<!--          </el-select>-->
        </el-form-item>
        <el-form-item label="告警状态:" prop="alarmStatus" v-show="selectedBtn === 1 || selectedBtn === 2">
          <el-select placeholder="请选择" clearable style="width: 200px" v-model="queryParams.alarmStatus">
            <el-option v-for="item in alarmStatusList" :key="item.value" :value="item.value" :label="item.label"/>
          </el-select>
        </el-form-item>
        <el-form-item label="开始时间：" prop="beginTime" v-if="selectedBtn !== 1">
          <el-config-provider :locale="zhCn">
            <el-date-picker
                type="datetime"
                value-format="YYYY-MM-DD HH:mm:ss"
                placeholder="选择开始时间"
                style="width: 200px"
                v-model="queryParams.beginTime"
            />
          </el-config-provider>
        </el-form-item>
        <el-form-item label="结束时间：" prop="endTime" v-if="selectedBtn !== 1">
          <el-config-provider :locale="zhCn">
            <el-date-picker
                type="datetime"
                value-format="YYYY-MM-DD HH:mm:ss"
                placeholder="选择结束时间"
                style="width: 200px"
                v-model="queryParams.endTime"
            />
          </el-config-provider>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="search" class="add-search-btn">查询</el-button>
          <el-button type="primary" @click="resetSearch" class="add-search-btn" v-if="selectedBtn !== 3">重置</el-button>
          <el-button type="primary" @click="handleExport" class="add-search-btn">导出</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div>
      <el-tabs v-model="activeName" @tab-click="handleTabClick" style="padding: 0 0 0 10px">
        <el-tab-pane
            v-for="item in topBtn"
            :key="item.id"
            :label="item.name + (item.name === '报警信息' ? `(${alarmNum})` : '')"
            :name="item.component"
        >
        </el-tab-pane>
      </el-tabs>
      <component :is="selectedComponent"  ref="childComponentRef" :queryParams='childParams' :search-data="searchData"></component>
    </div>

  </div>
</template>


<style lang="scss" scoped>
.app-content {
  width: 100%;
  background-color: white;
}

.search-wrapper {
  width: 100%;
  display: flex;
  justify-content: start;
}

.search-wrapper .el-row {
  width: 50%;
  border: none;
  display: flex;
  align-items: center;
  margin: 5px 10px 5px 5px;
}
</style>