SMO/src/views/system/stations/index.vue

<template>
  <div class="table-box">
    <div class="card table-main">
      <!-- 表格头部 操作按钮 -->
      <div class="table-header">
        <div class="header-button-lf">
          <el-form :model="pageable" label-width="auto" :inline="true">
            <el-form-item label="自动站:">
              <SelectItem :select-data="selectedData" :select-list="platformList" :is-checkbox="true"
                          @update:selectedItems="selectedItems" style="width: 200px"></SelectItem>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="handleQuery"> 查询</el-button>
              <el-button style="margin-left: 10px" @click="resetQuery"> 重置</el-button>
              <!--              <el-button  style="margin-left: 10px" type="primary" plain  @click="handleAdd"> 新增 </el-button>-->
            </el-form-item>
          </el-form>
        </div>
        <div class="header-button-ri">
          <slot name="toolButton">
            <img class="setting" src="@/assets/images/setting.png" @click="handleSetting"/>
          </slot>
        </div>
      </div>
      <!-- 表格主体 -->
      <el-table stripe ref="tableRef" :border="true" :data="showList" size="small">
        <el-table-column align="left" label="序号" width="45px" :show-overflow-tooltip="true">
          <template #default="scope">
            {{ (pageable.pageNum - 1) * pageable.pageSize + scope.$index + 1 }}
          </template>
        </el-table-column>
        <template v-for="item in columns" :key="item">
          <el-table-column v-bind="item" :align="item.align ?? 'left'" :reserve-selection="item.type == 'selection'"
                           :show-overflow-tooltip="true">
            <template #default="scope">
              <template v-if="item.prop === 'address'">
                {{ scope.row['as_province'] }}
                {{ scope.row['as_city'] }}
                {{ scope.row['as_area'] }}
                {{ scope.row['as_address'] }}
              </template>
              <template v-if="item.prop === 'map_level'">
                {{ scope.row.map_level + 1 }}
              </template>
              <template v-if="item.prop === 'install_type'">
                {{ findLabelByValue(installTypeList, scope.row.install_type) }}
              </template>
              <template v-if="item.prop === 'view_mode'">
                {{ findLabelByValue(typeList, scope.row.view_mode) }}
              </template>
              <template v-if="item.prop === 'operation'">
                <el-tooltip
                  class="box-item"
                  effect="dark"
                  content="编辑"
                  placement="top"
                >
                  <el-button type="primary" link @click="handleUpdate(scope.row)">
                    <el-icon>
                      <Edit/>
                    </el-icon>
                  </el-button>
                </el-tooltip>
                <!--                <el-tooltip-->
                <!--                  class="box-item"-->
                <!--                  effect="dark"-->
                <!--                  content="删除"-->
                <!--                  placement="top"-->
                <!--                >-->
                <!--                  <el-button type="primary" link  @click="handleDelete(scope.row)">-->
                <!--                    <el-icon >-->
                <!--                      <Delete />-->
                <!--                    </el-icon>-->
                <!--                  </el-button>-->
                <!--                </el-tooltip>-->
              </template>
            </template>
          </el-table-column>
        </template>

        <!-- 无数据 -->
        <template #empty>
          <div class="table-empty">
            <slot name="empty">
              <img src="@/assets/images/notData.png" alt="notData"/>
              <div>暂无数据</div>
            </slot>
          </div>
        </template>
      </el-table>
      <!-- 分页组件 -->
      <Pagination :pageable="pageable" :handle-size-change="handleSizeChange" :handle-current-change="handleCurrentChange"/>
    </div>

    <!-- 添加或修改对话框 -->
    <el-dialog v-if="dialog.visible" :title="dialog.title" v-model="dialog.visible" width="1600px" append-to-body
               :close-on-click-modal="false">
      <el-tabs tab-position="left" class="demo-tabs" style="height: 700px">
        <el-tab-pane label="基本参数">
          <ParametersBasic :select-data="rowItem"></ParametersBasic>
        </el-tab-pane>
        <el-tab-pane label="观测要素">
          <Translation :select-data="rowItem" :sensorList="sensorList2"></Translation>
        </el-tab-pane>
        <el-tab-pane label="仪器检定证">
          <VerificationCertificate :select-data="rowItem" :sensorList="sensorList2"></VerificationCertificate>
        </el-tab-pane>
        <el-tab-pane label="阈值设置">
          <Threshold :select-data="rowItem"></Threshold>
        </el-tab-pane>
        <el-tab-pane label="保障策略设置">
          <StrategySafeguard :select-data="rowItem"></StrategySafeguard>
        </el-tab-pane>
        <el-tab-pane label="编报项目设置">
          <Newspapers :select-data="rowItem"></Newspapers>
        </el-tab-pane>
      </el-tabs>
    </el-dialog>


    <!-- 添加或修改对话框 -->
    <el-dialog :title="dialog2.title" v-model="dialog2.visible" width="1200px" append-to-body>
      <div style="height: 500px;display: flex">
        <el-tabs tab-position="left" class="demo-tabs" style="height: 100%;flex-grow: 1">
          <el-tab-pane label="基本信息">
            <div class="container-tag">
              <template v-for="item in sensorList" :key="item.prop">
                <div v-if="item.se_type===0" :class="item.isSelected?'item-tag-active':'item-tag'" @click="toggleSelection(item)">
                  {{ item.label }}
                </div>
              </template>
            </div>
          </el-tab-pane>
          <el-tab-pane label="通信方式">
            <div class="container-tag">
              <template v-for="item in sensorList" :key="item.prop">
                <div v-if="item.se_type===1" :class="item.isSelected?'item-tag-active':'item-tag'" @click="toggleSelection(item)">
                  {{ item.label }}
                </div>
              </template>
            </div>
          </el-tab-pane>
          <el-tab-pane label="位置信息">
            <div class="container-tag">
              <template v-for="item in sensorList" :key="item.prop">
                <div v-if="item.se_type===2" :class="item.isSelected?'item-tag-active':'item-tag'" @click="toggleSelection(item)">
                  {{ item.label }}
                </div>
              </template>
            </div>
          </el-tab-pane>
          <el-tab-pane label="人员信息">
            <div class="container-tag">
              <template v-for="item in sensorList" :key="item.prop">
                <div v-if="item.se_type===3" :class="item.isSelected?'item-tag-active':'item-tag'" @click="toggleSelection(item)">
                  {{ item.label }}
                </div>
              </template>
            </div>
          </el-tab-pane>
        </el-tabs>
        <div class="selected-list-box">
          <div class="disposition-title" style="margin-top: 0px">已选设备</div>
          <div class="selected-list-c">
            <template v-for="(item,index) in copiedCustomizeColumns" :key="item.prop">
              <div :class="selectedItemIndex===index?'selected-item-tag-active':'selected-item-tag'"
                   @click="changeSelected(index)"
                   draggable="true"
                   @dragstart="dragStart($event, index)"
                   @dragover.prevent
                   @drop="drop($event, index)"
              >{{ item.label }}
              </div>
            </template>
          </div>
          <div class="button-container">
            <el-button type="primary" plain class="top-left" @click="changeMoveUp">上移</el-button>
            <el-button type="primary" plain class="top-right" @click="changeMoveDown">下移</el-button>
            <el-button type="primary" plain class="bottom-left" @click="changeRemove">移除</el-button>
            <el-button type="primary" plain class="bottom-right" @click="changeCleared">清空</el-button>
          </div>
        </div>
      </div>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="cancel2">取 消</el-button>
          <el-button type="primary" @click="submitForm2">确 定</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts" name="useProTable">
import Pagination from "@/components/ProTable/components/Pagination.vue";
import Translation from "./components/translation.vue";
import SelectItem from "@/components/SelectItem/index.vue";
import VerificationCertificate from "./components/verificationCertificate.vue";
import Threshold from "./components/threshold.vue";
import Newspapers from "./components/newspapers.vue";
import ParametersBasic from "./components/parametersBasic.vue";
import StrategySafeguard from "./components/strategySafeguard.vue";
import {computed, onActivated, onDeactivated, onMounted, reactive, ref} from "vue";
import {ColumnProps} from "@/components/ProTable/interface";
import {ElMessageBox} from 'element-plus'
import {useUserStore} from "@/stores/modules/user";
import {getAs_status, getYallSensorList, getYascomm} from "@/api/modules/allData";

// 获取传感器字典
const sensorList2 = ref<any>([]);
const getSensorList = async () => {
  const {data} = await getYallSensorList();
  sensorList2.value = data.list
};
//搜索站号
const selectedData = ref([])
const userStore = useUserStore();
//下拉数据
const platformList = ref<any>(computed(() => userStore.stations))
//列表展示原始数据
const processTableData = ref(computed(() => userStore.stations));
//列表展示查询分页后数据
const initList = computed(() => {
  const start = (pageable.value.pageNum - 1) * pageable.value.pageSize;
  const end = start + pageable.value.pageSize;
  // 根据分页参数截取数据
  return processTableData.value.slice(start, end);
});

// 响应式引用，存储初始列表的副本
const showList = ref([]);

const pageable = ref<any>({
  as_code: '',
  pageNum: 1,
  pageSize: 20,
  total: platformList.value.length
});

// 查询功能
const handleQuery = () => {
  pageable.value.pageNum = 1; // 重置到第一页
  const filteredData = processTableData.value.filter(item =>
    item.as_code.includes(pageable.value.as_code)
  );
  pageable.value.total = filteredData.length; // 更新总数
  // 确保通过 .value 修改 ref 的值
  showList.value = filteredData;

  getStatus()
};

// 重置功能
const resetQuery = () => {
  selectedData.value = []
  pageable.value.as_code = ''; // 清除查询条件
  pageable.value.pageNum = 1; // 重置到第一页
  pageable.value.total = processTableData.value.length; // 重置总数
  // 确保通过 .value 修改 ref 的值
  showList.value = processTableData.value.slice((pageable.value.pageNum - 1) * pageable.value.pageSize, pageable.value.pageNum * pageable.value.pageSize);

  getStatus()
};
// 每页条数改变
const handleSizeChange = (val: number) => {
  pageable.value.pageSize = val;
  pageable.value.pageNum = 1; // 重置到第一页
  updateShowList();
};

// 当前页改变
const handleCurrentChange = (val: number) => {
  pageable.value.pageNum = val;
  updateShowList();
};

// 更新显示列表
const updateShowList = () => {
  if (pageable.value.as_code) {
    const filteredData = processTableData.value.filter(item =>
      item.as_code.includes(pageable.value.as_code)
    );
    showList.value = filteredData.slice((pageable.value.pageNum - 1) * pageable.value.pageSize, pageable.value.pageNum * pageable.value.pageSize);
  } else {
    showList.value = processTableData.value.slice((pageable.value.pageNum - 1) * pageable.value.pageSize, pageable.value.pageNum * pageable.value.pageSize);
  }
};


const selectedItems = (data) => {
  if (data.length > 0) {
    pageable.value.as_code = data[0]
  }
};

// 表格配置项
let columns = reactive<ColumnProps[]>([]);

const dialog = reactive<any>({
  visible: false,
  title: ''
});
const formRef = ref<any>();

const initFormData = ref<any>(
  {
    code: "",
    type: "",
    name: "",
    startTime: "",
    endTime: "",
    remark: ""
  }
);


const form = ref<any>({...initFormData});

/** 新增按钮操作 */
const handleAdd = () => {
  reset();
  dialog.visible = true;
  dialog.title = "新增台站";
}

const rowItem = ref({})

/** 修改按钮操作 */
const handleUpdate = async (row?: any) => {
  reset();
  rowItem.value = row
  dialog.visible = true;
  dialog.title = "编辑台站";
}

/** 取消按钮 */
const cancel = () => {
  reset();
  dialog.visible = false;
}
/** 表单重置 */
const reset = () => {
  form.value = {...initFormData};
  formRef.value?.resetFields();
}

/** 提交按钮 */
const submitForm = () => {
  formRef.value?.validate(async (valid: boolean) => {
    if (valid) {
      dialog.visible = false;
    }
  });
}

/** 删除按钮操作 */
const handleDelete = async (row?: any) => {
  ElMessageBox.confirm('是否确认删除编号为"' + row.b + '"的数据项？', {
    confirmButtonText: '删除',
    cancelButtonText: '取消',
    type: 'warning',
    title: '删除数据',
    draggable: true
  })
    .then(() => {

    })
    .catch(() => {

    })
}

function findLabelByValue(noticeTypeList, value) {
  const item = noticeTypeList.find(item => item.value === value);
  return item ? item.label : null;
}

const typeList = [
  {
    value: 0,
    label: '人工值班',
  },
  {
    value: 1,
    label: '自动值班',
  },
  {
    value: 2,
    label: '自动值班',
  }
]

const installTypeList = [
  {
    value: 0,
    label: '业务站',
  },
  {
    value: 1,
    label: '无人站',
  },
  {
    value: 2,
    label: '梯度站',
  }
]
onMounted(() => {
  loadCustomizeColumns()
  updateColumns()
  getSensorList()
  getStatus()
  // 在组件挂载时，将计算属性 initList 的值赋值给 showList
  showList.value = [...initList.value];
});


/** 表单重置 */
const cancel2 = () => {
  dialog2.visible = false;
}

/** 提交按钮 */
const submitForm2 = () => {
  dialog2.visible = false;
  customizeColumns.value = [...copiedCustomizeColumns.value]
  updateColumns()
  saveCustomizeColumns()
}


const sensorList = ref<any>([
  {prop: "as_depart", label: "部别", se_type: 0},
  {prop: "as_name", label: "站名", se_type: 0},
  {prop: "as_code", label: "站号", se_type: 0},
  {prop: "view_mode", label: "观测方式", se_type: 0},
  {prop: "install_type", label: "架设方式", se_type: 0},
  {prop: "address", label: "地址", se_type: 2},
  {prop: "as_lon", label: "经度", se_type: 2},
  {prop: "as_lat", label: "纬度", se_type: 2},
  {prop: "as_auditor", label: "预审员", se_type: 3},
  {prop: "check_leader", label: "测试组长", se_type: 3},
  {prop: "station_leader", label: "台长", se_type: 3},
  {prop: "communication_method", label: "主通信方式", se_type: 1},
  {prop: "device_number_primary", label: "主通信设备号", se_type: 1},
  {prop: "communication_status_primary", label: "主通信状态", se_type: 1},
  {prop: "heartbeat_time_primary", label: "主通信心跳时间", se_type: 1},
  {prop: "connection_status_primary", label: "主通信自动站连接状态", se_type: 1},
  {prop: "last_data_received_time_primary", label: "主通信最近数据接收时间", se_type: 1},
  {prop: "communication_status_secondary", label: "从通信状态", se_type: 1},
  {prop: "device_number_secondary", label: "从通信设备号", se_type: 1},
  {prop: "communication_method_secondary", label: "从通信方式", se_type: 1},
  {prop: "heartbeat_time_secondary", label: "从通信心跳时间", se_type: 1},
  {prop: "connection_status_secondary", label: "从通信自动站连接状态", se_type: 1},
  {prop: "last_data_received_time_secondary", label: "从通信最近数据接收时间", se_type: 1},
  {prop: "ip_address_4g", label: "4G设备IP", se_type: 1}
])
let customizeColumns = ref<any>([
  {prop: "as_depart", label: "部别", se_type: 0},
  {prop: "as_name", label: "站名", se_type: 0},
  {prop: "as_code", label: "站号", se_type: 0},
  {prop: "view_mode", label: "观测方式", se_type: 0},
  {prop: "install_type", label: "架设方式", se_type: 0},
  {prop: "address", label: "地址", se_type: 2},
  {prop: "as_lon", label: "经度", se_type: 2},
  {prop: "as_lat", label: "纬度", se_type: 2},
  {prop: "as_auditor", label: "预审员", se_type: 3},
  {prop: "check_leader", label: "测试组长", se_type: 3},
  {prop: "station_leader", label: "台长", se_type: 3},
  {prop: "communication_method", label: "主通信方式", se_type: 1},
  {prop: "device_number_primary", label: "主通信设备号", se_type: 1},
  {prop: "communication_status_primary", label: "主通信状态", se_type: 1},
  {prop: "heartbeat_time_primary", label: "主通信心跳时间", se_type: 1},
  {prop: "connection_status_primary", label: "主通信自动站连接状态", se_type: 1},
  {prop: "last_data_received_time_primary", label: "主通信最近数据接收时间", se_type: 1},

])
// 被选中当条数据下标
const selectedItemIndex = ref(0)

//操作 自定义部分表头
const copiedCustomizeColumns = ref<any>([...customizeColumns.value]);

const dialog2 = reactive<any>({
  visible: false,
  title: ''
});

const handleSetting = () => {
  copiedCustomizeColumns.value = [...customizeColumns.value]
  sensorList.value.forEach(element => {
    const column = copiedCustomizeColumns.value.find(col => col.prop === element.prop);
    if (column) {
      element.isSelected = true;
    } else {
      element.isSelected = false;
    }
  });
  dialog2.title = "列表字段设置"
  dialog2.visible = true;
}

const changeMoveUp = () => {
//上移
  if (selectedItemIndex.value > 0) {
    const temp = copiedCustomizeColumns.value[selectedItemIndex.value - 1]
    copiedCustomizeColumns.value[selectedItemIndex.value - 1] = copiedCustomizeColumns.value[selectedItemIndex.value]
    copiedCustomizeColumns.value[selectedItemIndex.value] = temp
    selectedItemIndex.value--
  }
}

const changeMoveDown = () => {
//下移
  if (selectedItemIndex.value < copiedCustomizeColumns.value.length - 1) {
    const temp = copiedCustomizeColumns.value[selectedItemIndex.value + 1]
    copiedCustomizeColumns.value[selectedItemIndex.value + 1] = copiedCustomizeColumns.value[selectedItemIndex.value]
    copiedCustomizeColumns.value[selectedItemIndex.value] = temp
    selectedItemIndex.value++
  }
}

const changeRemove = () => {
  //删除数据
  if (copiedCustomizeColumns.value.length > 0) {
    const custom = copiedCustomizeColumns.value[selectedItemIndex.value];
    const se_type = custom.prop
    for (let i = 0; i < sensorList.value.length; i++) {
      if (sensorList.value[i].prop === se_type) {
        sensorList.value[i].isSelected = false;
      }
    }
    copiedCustomizeColumns.value.splice(selectedItemIndex.value, 1)
    if (selectedItemIndex.value === copiedCustomizeColumns.value.length) {
      selectedItemIndex.value--
    }

  }
}

const changeCleared = () => {
  //清空所有数据
  selectedItemIndex.value = 0
  copiedCustomizeColumns.value = []
  for (let i = 0; i < sensorList.value.length; i++) {
    sensorList.value[i].isSelected = false;
  }
}

const changeSelected = (index) => {
  selectedItemIndex.value = index
}

const dragStart = (event, index) => {
  event.dataTransfer.effectAllowed = 'move';
  // 保存当前拖动的元素索引
  event.dataTransfer.setData('text/plain', index.toString());
};


const drop = (event, index) => {
  const draggedIndex = parseInt(event.dataTransfer.getData('text/plain'));
  // 移动数组中的元素来更新顺序
  const draggedItem = copiedCustomizeColumns.value.splice(draggedIndex, 1)[0];
  copiedCustomizeColumns.value.splice(index, 0, draggedItem);
};


// 要素的选中和取消
const toggleSelection = (item) => {
  item.isSelected = !item.isSelected
  if (item.isSelected) {
    //添加
    copiedCustomizeColumns.value.push(item)
  } else {
    //删除
    copiedCustomizeColumns.value = copiedCustomizeColumns.value.filter(column => column.prop !== item.prop);
  }
}


// 保存customizeColumns数组到localStorage
function saveCustomizeColumns() {
  const jsonString = JSON.stringify(customizeColumns.value);
  localStorage.setItem('singleStations', jsonString);
}

// 从localStorage中获取customizeColumns数组
function loadCustomizeColumns() {
  const jsonString = localStorage.getItem('singleStations');
  if (jsonString) {
    customizeColumns.value = JSON.parse(jsonString);
  }
}


// {prop: "as_depart", label: "部别", se_type: 0},
// {prop: "as_name", label: "站名", se_type: 0},
// {prop: "as_code", label: "站号", se_type: 0},
const updateColumns = () => {
  const column = [
    {prop: "operation", label: "操作", width: 150, align: 'center', fixed: "right"}
  ];
  customizeColumns.value.forEach(item => {

    if(item.prop==='as_depart'||item.prop==='as_name'||item.prop==='as_code'){
      item.width = 90
    }else {
      item.width = calculateTextLengthInPixels(item.label)
    }
  })
  columns = [...column, ...customizeColumns.value];

}

// 大概计算字符串长度
function calculateTextLengthInPixels(text) {
  return (text.length * 14)+30;
}



const getStatus = ()=>{
  if (processTableData.value && processTableData.value.length > 0) {
    getStations_Status();
    getYascommList();
  }
}

// 更新站状态
const getStations_Status =async () => {
  const { data } = await getAs_status();
  processTableData.value.forEach(item => {
    const level_main= item.as_code+"|LEVEL_MAIN"
    const level_sub= item.as_code+"|LEVEL_SUB"
    const found_main = data.list.find(item => item.key === level_main);
    const found_sub = data.list.find(item => item.key === level_sub);
    item.communication_status_primary =findLabelByValue(statusList,found_main.as_link)
    item.last_data_received_time_primary = formatTimestamp(found_main.as_last_time)
    item.connection_status_primary =findLabelByValue(status2List,found_main.comm_link)
    item.heartbeat_time_primary = formatTimestamp(found_main.comm_last_time)
    item.communication_status_secondary =findLabelByValue(statusList,found_sub.as_link)
    item.last_data_received_time_secondary = formatTimestamp(found_sub.as_last_time)
    item.connection_status_secondary =findLabelByValue(status2List,found_sub.comm_link)
    item.heartbeat_time_secondary = formatTimestamp(found_sub.comm_last_time)
  });

}



const yascommStatus=ref<any>([])
const getYascommList = async () => {
  const {data} = await getYascomm({pageSize: 999, pageNum: 1});
  yascommStatus.value = data
  console.log(yascommStatus.value)
  console.log(processTableData.value)

  processTableData.value.forEach(item => {
    item.communication_method =  ""
    item.communication_method_secondary =""
    item.device_number_primary = ""
    item.device_number_secondary = ""
    const list = data[item.as_code]


    if (list != undefined) {
      const data = list.find(station => station.comm_level === 0);
      item.communication_method =  findLabelByValue(mannerList,data.comm_type)
      if(data.comm_type === 0){
        if (data.comm_param) {
          const params = data.comm_param.split(',');
          if (params.length >= 1) {
            item.device_number_primary = params[0].trim()
          }
        }
      }else  if(data.comm_type === 1){
        if (data.comm_param) {
          const params = data.comm_param.split(',');
          if (params.length >= 2) {
            item.device_number_primary = params[0].trim()
          }
        }
      }else  if(data.comm_type === 2){
        if (data.comm_param) {
          const params = data.comm_param.split(',');
          if (params.length >= 4) {
            item.device_number_primary = params[0].trim()+','+params[2].trim()+','+params[3].trim()
          }
        }
      }else  if(data.comm_type === 3){
         item.device_number_primary=''
      }else  if(data.comm_level === 4){
        if (data.comm_param) {
          const params = data.comm_param.split(',');
          if (params.length >= 2) {
            item.device_number_primary = params[0].trim()+','+params[1].trim()
          }
        }
      }


      const data2 = list.find(station => station.comm_level === 1);
      item.communication_method_secondary = findLabelByValue(mannerList,data2.comm_type)
      if(data2.comm_type === 0){
        if (data2.comm_param) {
          const params = data2.comm_param.split(',');
          if (params.length >= 1) {
            item.device_number_secondary = params[0].trim()
          }
        }
      }else  if(data2.comm_type === 1){
        if (data2.comm_param) {
          const params = data2.comm_param.split(',');
          if (params.length >= 2) {
            item.device_number_secondary = params[0].trim()
          }
        }
      }else  if(data2.comm_type === 2){
        if (data2.comm_param) {
          const params = data2.comm_param.split(',');
          if (params.length >= 4) {
            item.device_number_secondary = params[0].trim()+','+params[2].trim()+','+params[3].trim()
          }
        }
      }else  if(data2.comm_type === 3){
        item.device_number_secondary=''
      }else  if(data2.comm_level === 4){
        if (data2.comm_param) {
          const params = data2.comm_param.split(',');
          if (params.length >= 2) {
            item.device_number_secondary = params[0].trim()+','+params[1].trim()
          }
        }
      }
    }
  });


}

const status2List= [
  {
    value: 0,
    label: '异常',
  },
  {
    value: 1,
    label: '正常',
  },
  {
    value: 2,
    label: '',
  }
]

const statusList= [
  {
    value: 0,
    label: '未知',
  },
  {
    value: 1,
    label: '在线',
  },
  {
    value: 2,
    label: '未连接',
  }
]
const mannerList= [
    {
      value: 0,
      label: '串口',
    },
    {
      value: 1,
      label: '北斗',
    },
    {
      value: 2,
      label: '4G',
    },
    {
      value: 3,
      label: '文件',
    },
    {
      value: 4,
      label: 'TCPClient',
    }
  ]
function formatTimestamp(timestamp) {
  if (timestamp === 0) {
    return ''; // 如果时间戳为0，返回空值
  }
  const date = new Date(timestamp * 1000); // JavaScript的时间戳是毫秒级，所以需要乘以1000
  const year = date.getFullYear();
  const month = String(date.getMonth() + 1).padStart(2, '0'); // 月份从0开始，所以加1
  const day = String(date.getDate()).padStart(2, '0');
  const hours = String(date.getHours()).padStart(2, '0');
  const minutes = String(date.getMinutes()).padStart(2, '0');
  return `${year}-${month}-${day} ${hours}:${minutes}`;
}

let intervalId;

onActivated(() => {
  intervalId = setInterval(() => {
    getStatus();
  }, 30 * 1000);
});

onDeactivated(() => {
  clearInterval(intervalId);
});


</script>