SMO/src/views/alarm/singleDevice/index.vue

<template>
  <div class="table-box">
    <div class="card container-box">
      <div style="display: flex;justify-content: space-between">站台概况
        <div class="header-button-ri">
        <slot name="toolButton">
          <img class="setting" src="@/assets/images/setting.png" @click="handleSetting"/>
        </slot>
      </div>
      </div>
      <div class="container-main mt15">
        <div class="container-item container__label">站号：
          <SelectItem :select-data="selectedData" :select-list="platformList" :is-checkbox="true" @update:selectedItems="selectedItems" style="width: 200px"> </SelectItem>
        </div>
        <div class="container-item container__label">名称：{{selectedItem.as_name?selectedItem.as_name:'--'}}</div>
        <div class="container-item container__label">观测时间：{{processTableFrom.data_time?processTableFrom.data_time:'--'}}</div>
        <div class="container-item container__label">自动站状态：
<!--          <el-tag type="danger" size="default" hit>离线</el-tag>-->
<!--          <el-tag type="success" size="default" hit>在线</el-tag>-->
          --
        </div>
        <div class="container-item container__label">站址：{{addressLabel(selectedItem)}}</div>
      </div>
<!--      <div class="container-main mt15">-->
<!--        <div class="container-item container__label">自动站状态：<el-tag type="danger" size="default" hit>故障</el-tag></div>-->
<!--        <div class="container-item container__label">站址：未命名29号</div>-->
<!--        <div class="container-item container__label"></div>-->
<!--        <div class="container-item container__label"></div>-->
<!--      </div>-->
    </div>
    <div class="card table-main">
      <div>站台状况</div>
      <div v-if="customizeColumns&&customizeColumns.length>0" class="container-device-main mt15">
        <template v-for="item in customizeColumns">
          <div class="container-device-item" @click="handlePlatform(item)">
            <div class="container-text-box">
              <div class="container-title">{{item.se_name}}</div>
              <div class="container-name mt15 mb15">传感器状态:
                <el-button v-if="getProcessValue(item.se_type)==='正常'"  color="#009100" plain>{{getProcessValue(item.se_type)}}</el-button>
                <el-button v-if="getProcessValue(item.se_type)==='未连接'"  color="#636363" plain>{{getProcessValue(item.se_type)}}</el-button>
                <el-button v-if="getProcessValue(item.se_type)==='告警'"  color="#ff7700" plain>{{getProcessValue(item.se_type)}}</el-button>
                <el-button v-if="getProcessValue(item.se_type)==='故障'"  color="#910000" plain>{{getProcessValue(item.se_type)}}</el-button>
                <el-button v-if="getProcessValue(item.se_type)==='不确定'"  color="#777700" plain>{{getProcessValue(item.se_type)}}</el-button>
                <el-button v-if="getProcessValue(item.se_type)==='未启用'"  color="#9e6b85" plain>{{getProcessValue(item.se_type)}}</el-button>
                <template v-if="getProcessValue(item.se_type)==='--'">
                  {{getProcessValue(item.se_type)}}
                </template>
              </div>
              <div class="container-name">证书剩余时间:{{findRemainingDays(item.se_type)}}</div>
            </div>
            <div class="device-img">
              <img :src="getCustomImg(item.se_type)" class="device-img">
            </div>
          </div>
        </template>
      </div>
      <div v-else  class="no-data">
        <img src="/src/assets/images/notData.png" alt="notData">
        <div class="no-data-title">暂无数据</div>
      </div>
    </div>
    <!-- 添加或修改对话框 -->
    <el-dialog :title="dialog.title" v-model="dialog.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.se_type"  >
                <div v-if="item.se_state===0"  :class="item.isSelected?'item-tag-active':'item-tag'" @click="toggleSelection(item)" >{{item.se_name}}</div>
              </template>
            </div>
          </el-tab-pane>
          <el-tab-pane label="自动">
            <div class="container-tag">
              <template v-for="item in sensorList" :key="item.se_type"  >
                <div v-if="item.se_state===1"  :class="item.isSelected?'item-tag-active':'item-tag'" @click="toggleSelection(item)" >{{item.se_name}}</div>
              </template>
            </div>
          </el-tab-pane>
          <el-tab-pane label="人工">
            <div class="container-tag">
              <template v-for="item in sensorList" :key="item.se_type"  >
                <div v-if="item.se_state===2"  :class="item.isSelected?'item-tag-active':'item-tag'" @click="toggleSelection(item)" >{{item.se_name}}</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.se_type">
              <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.se_name}}</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="cancel">取 消</el-button>
          <el-button type="primary" @click="submitForm">确 定</el-button>
        </div>
      </template>
    </el-dialog>


    <!-- 添加或修改对话框 -->
    <el-dialog :title="dialog2.title" v-model="dialog2.visible" width="900px" append-to-body>
      <div style="height: 400px;display: flex">
        <div style="width: 25%;display: flex;justify-content: center;align-items: center">
          <div class="device-img">
            <img :src="getCustomImg(itemData.se_type)" class="device-img">
          </div>
        </div>
        <div style="width: 75%;">
          <el-radio-group v-model="radio1">
            <el-radio-button  label="传感器" value="1" plain/>
            <el-radio-button  label="状态组" value="2" plain/>
          </el-radio-group>
          <div style="height: 300px;margin-top:20px;">
           <div v-if="radio1==='1'" class="item-system" >
              <div>传感器类型：{{itemData.se_name}}</div>
             <div style="margin-top: 10px">传感器状态：
               <el-button v-if="getProcessValue(itemData.se_type)==='正常'"  color="#009100" plain>{{getProcessValue(itemData.se_type)}}</el-button>
               <el-button v-if="getProcessValue(itemData.se_type)==='未连接'"  color="#636363" plain>{{getProcessValue(itemData.se_type)}}</el-button>
               <el-button v-if="getProcessValue(itemData.se_type)==='告警'"  color="#ff7700" plain>{{getProcessValue(itemData.se_type)}}</el-button>
               <el-button v-if="getProcessValue(itemData.se_type)==='故障'"  color="#910000" plain>{{getProcessValue(itemData.se_type)}}</el-button>
               <el-button v-if="getProcessValue(itemData.se_type)==='不确定'"  color="#777700" plain>{{getProcessValue(itemData.se_type)}}</el-button>
               <el-button v-if="getProcessValue(itemData.se_type)==='未启用'"  color="#9e6b85" plain>{{getProcessValue(itemData.se_type)}}</el-button>
               <template v-if="getProcessValue(itemData.se_type)==='--'">
                 {{getProcessValue(itemData.se_type)}}
               </template>
             </div>
             <div style="margin-top: 10px">证书剩余时间：{{findRemainingDays(itemData.se_type)}}</div>
           </div>
            <div v-if="radio1==='2'" class="table-box" style="margin-top: 10px;" >
              <!-- 表格主体 -->
              <el-table stripe ref="tableRef" :border="true" :data="processTableData2"  size="small">
                <el-table-column align="left" label="序号" width="80px" :show-overflow-tooltip="true">
                  <template #default="scope">
                    {{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">
                  </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>
            </div>
          </div>
        </div>
      </div>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="cancel2">取 消</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import SelectItem from "@/components/SelectItem/index.vue";
import img0 from "@/assets/images/single/0.png"
import img100 from "@/assets/images/single/100.png"
import img200 from "@/assets/images/single/200.png"
import img300 from "@/assets/images/single/300.png"
import img400 from "@/assets/images/single/400.png"
import img500 from "@/assets/images/single/500.png"
import img600 from "@/assets/images/single/600.png"
import img700 from "@/assets/images/single/700.png"
import img800 from "@/assets/images/single/800.png"
import img900 from "@/assets/images/single/900.png"
import img1000 from "@/assets/images/single/1000.png"
import img1100 from "@/assets/images/single/1100.png"
import img1200 from "@/assets/images/single/1200.png"
import img1300 from "@/assets/images/single/1300.png"
import img1400 from "@/assets/images/single/1400.png"
import img1500 from "@/assets/images/single/1500.png"
import img1600 from "@/assets/images/single/1600.png"
import img1700 from "@/assets/images/single/1700.png"
import {getPlatformList, getQuerCertList, getStaitemList, getYallSensorList} from "@/api/modules/allData";
import {computed, onActivated, onDeactivated, onMounted, reactive, ref} from "vue";
import {Platform} from "@/api/interface";
import {ColumnProps} from "@/components/ProTable/interface";
import {useUserStore} from "@/stores/modules/user";
const radio1 =ref('1');
const getCustomImg = (iconName: string) => {
  const icons = {
    0: img0,
    100: img100,
    200: img200,
    300: img300,
    400: img400,
    500: img500,
    600: img600,
    700: img700,
    800: img800,
    900: img900,
    1000: img1000,
    1100: img1100,
    1200: img1200,
    1300: img1300,
    1400: img1400,
    1500: img1500,
    1600: img1600,
    1700: img1700,
  };
  return icons[iconName] || null;
};

// 表格配置项
const columns = reactive<ColumnProps[]>([
  { prop: "sta_name", label: "状态"},
  { prop: "sta_value", label: "状态值"},
  { prop: "sta_remark", label: "备注" },
]);

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 handlePlatform = (item) => {
  if (!item || typeof item !== 'object') {
    console.error('Invalid item provided');
    return;
  }

  radio1.value = '1';
  itemData.value = item;
  dialog2.visible = true;
  dialog2.title = '传感器信息';

  processTableData2.value = [];

  const { se_type } = item;
  if (se_type === undefined || se_type === null) {
    console.error('Invalid se_type in item');
    return;
  }

  switch (se_type) {
    case 0:
      processTableData2.value = processTableFrom.value?.sta_yclq || [];
      break;
    case 1:
      processTableData2.value = processTableFrom.value?.sta_txmk || [];
      break;
    default:
      const result = processTableFrom.value?.sta_list?.find(obj => obj.id === se_type.toString());
      if (result) {
        processTableData2.value = result.item || [];
      } else {
        console.warn(`No matching entry found for se_type: ${se_type}`);
      }
      break;
  }
};

const itemData= ref({})

const pageable = ref<any>({
  data_type: true,
  time_order: undefined,
  time_space: 1,
  as_code_list:[],
  state_list: [
    0,
    1,
    2
  ],
  pageNum: 1,
  pageSize: 1000,
  total: 0
});

const processTableData = ref([]);
const processTableData2 = ref([]);
const processTableFrom = ref({});
const certData = ref([]);

const findRemainingDays = (inputSeType) => {
  if(!certData.value){
    return '--'
  }
  const selectedCert = certData.value.find(cert => cert.se_type === parseInt(inputSeType));
  if (selectedCert) {
    // 将 cal_date_i 转换为毫秒
    const startTime = selectedCert.cal_date_i * 1000;
    // 创建 Date 对象
    const startDate = new Date(startTime);
    // 计算结束日期
    const endDate = new Date(startDate);
    endDate.setMonth(endDate.getMonth() + selectedCert.cal_period);
    // 获取当前时间
    const currentDate = new Date();
    // 计算剩余天数
    const timeDifference = endDate - currentDate;
    const daysRemaining = Math.ceil(timeDifference / (1000 * 60 * 60 * 24))+'天';
    return daysRemaining;
  } else {
    return '--'
  }
};

const getProcessValue=(param)=>{
  if (!processTableFrom.value) {
    console.error('processTableFrom is null or undefined');
    return '';
  }
  const  valve = processTableFrom.value[param] !== undefined ? processTableFrom.value[param] : null;
  return getLabelByValue(valve);
}

const sensorList =ref<any>([])
// 被选中当条数据下标
const selectedItemIndex = ref(0)
let customizeColumns= ref<any>([])

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.se_type
    for (let i = 0; i < sensorList.value.length; i++) {
      if (sensorList.value[i].se_type === 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 copiedCustomizeColumns = ref<any>([...customizeColumns.value]);

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

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

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

const handleSetting = () => {
  copiedCustomizeColumns.value = [...customizeColumns.value]
  sensorList.value.forEach(element => {
    const column = copiedCustomizeColumns.value.find(col => col.se_type === element.se_type);
    if (column) {
      element.isSelected = true;
    } else {
      element.isSelected = false;
    }
  });


  dialog.title = "列表字段设置"
  dialog.visible = true;
}



const queryParams = ref({
  name: "1"
});

const getSensorList = async () => {
  const { data } = await getYallSensorList();
  sensorList.value = data.list
};

const querCert = ref<any>({
  pageSize: 1000,
  pageNum: 1,
  asCode: undefined
})
const getCertList= async ()=>{
  const { data } = await getQuerCertList(querCert.value);
  certData.value = data.list
}


const getLabelByValue = (value) => {
  const item = deviceType.find(device => device.value === value);
  return item ? item.label : '--';
};

const deviceType= [
  {
    value: 0,
    label: '正常',
  },
  {
    value: 1,
    label: '未连接',
  },
  {
    value: 2,
    label: '告警',
  },
  {
    value: 3,
    label: '故障',
  },
  {
    value: 4,
    label: '不确定',
  },
  {
    value: 5,
    label: '未启用',
  }
]



const submitForm = () => {
  dialog.visible = false;
  customizeColumns.value = [...copiedCustomizeColumns.value]
  updateColumns()
  saveCustomizeColumns()
}

const updateColumns = () => {
  // pageable.value.data_items = [...customizeColumns.value];
  if(pageable.value.as_code_list&&pageable.value.as_code_list.length>0){
    getList()
  }
}

const as_code_list = ref('')
const selectedItem =ref({})


//搜索站号
const selectedData= ref([])
const selectedItems =(data)=>{
  if(data.length>0){
    pageable.value.as_code_list = data
    const firstCode = data[0] ?? null;
    selectedItem.value = platformList.value.find(item => item.as_code === firstCode);
    querCert.value.asCode = firstCode
  }else {
    const firstCode = platformList.value[0]?.as_code ?? null;
    pageable.value.as_code_list = firstCode ? [firstCode] : [];
    selectedItem.value = platformList.value.find(item => item.as_code === firstCode);
    querCert.value.asCode = firstCode
    selectedData.value = [firstCode]
  }

  getList()
  getCertList()

};

const cancel = () => {
  dialog.visible = false;
}

const cancel2 = () => {
  dialog2.visible = false;
}

onMounted(() => {
  loadCustomizeColumns()
  // updateColumns()
  getPlatforms()
  getSensorList()
})

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

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


const userStore = useUserStore();
const platformList =ref<any>(computed(() => userStore.stations))

const getPlatforms = async () => {
  if (platformList.value .length > 0) {
    const firstCode = platformList.value[0]?.as_code ?? null;
    pageable.value.as_code_list = firstCode ? [firstCode] : [];
    selectedItem.value = platformList.value.find(item => item.as_code === firstCode);
    as_code_list.value = firstCode;
    querCert.value.asCode = firstCode
    selectedData.value = [firstCode]
    await getList()
    await getCertList()
  }
};


const getList = async () => {
  const { data } = await getStaitemList(pageable.value);
  processTableData.value = data.list
  if (Array.isArray(processTableData.value) && processTableData.value.length > 0) {
    processTableFrom.value = processTableData.value[0];
  } else {
    processTableFrom.value = {}
  }
  pageable.value.total = data.total
};



function addressLabel(item) {
  const { as_province, as_city, as_area, as_address } = item;
  if (as_province===undefined&&as_province===undefined&&as_area===undefined&&as_address===undefined) {
    return '--';
  } else {
    return `${as_province}${as_city}${as_area}${as_address}`;
  }
}

let intervalId;
onActivated(() => {
  intervalId = setInterval(() => {
     getList()
     getCertList()
  }, 30 * 1000);
});

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


</script>

<style scoped>
.no-data{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-top: 200px
}

.no-data-title{
  margin-top: 12px;
  color: var(--el-text-color-secondary);
  font-size: 12px;
}

.item-system{
  border: 1px solid var(--el-color-primary-light-5);
  border-radius: 10px;
  padding: 30px;
  height: 230px;
  font-size: 16px
}
</style>