<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">
<template #default="scope">
<template v-if="item.prop === 'sta_value'">
{{scope.row.sta_value}} {{scope.row.sta_unit}}
</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>
</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>([
{
"data_value": "",
"data_item": "",
"se_state": 0,
"data_h_table": "",
"data_r_table": "",
"se_name": "预处理器",
"se_type": 0,
"isSelected": true
},
{
"se_type": 1,
"se_name": "通信模块",
"data_r_table": "",
"data_h_table": "",
"se_state": 0,
"data_item": "",
"data_value": "",
"isSelected": true
},
{
"data_value": "",
"data_item": "",
"se_state": 1,
"data_h_table": "",
"data_r_table": "",
"se_name": "超声风传感器",
"se_type": 100,
"isSelected": true
},
{
"data_value": "",
"data_item": "",
"se_state": 1,
"data_h_table": "",
"data_r_table": "",
"se_name": "旋转式风向传感器",
"se_type": 200,
"isSelected": true
},
{
"se_type": 300,
"se_name": "旋转式风速传感器",
"data_r_table": "",
"data_h_table": "",
"se_state": 1,
"data_item": "",
"data_value": "",
"isSelected": true
},
{
"data_value": "",
"data_item": "",
"se_state": 1,
"data_h_table": "",
"data_r_table": "",
"se_name": "气温传感器",
"se_type": 400,
"isSelected": true
},
{
"data_value": "",
"data_item": "",
"se_state": 1,
"data_h_table": "",
"data_r_table": "",
"se_name": "湿度传感器",
"se_type": 500,
"isSelected": true
},
{
"data_value": "",
"data_item": "",
"se_state": 1,
"data_h_table": "",
"data_r_table": "",
"se_name": "气压传感器",
"se_type": 600,
"isSelected": true
},
{
"se_type": 700,
"se_name": "称重式降水传感器",
"data_r_table": "",
"data_h_table": "",
"se_state": 1,
"data_item": "",
"data_value": "",
"isSelected": true
},
{
"se_type": 800,
"se_name": "翻斗雨量传感器",
"data_r_table": "",
"data_h_table": "",
"se_state": 1,
"data_item": "",
"data_value": "",
"isSelected": true
},
{
"se_type": 900,
"se_name": "云高仪",
"data_r_table": "",
"data_h_table": "",
"se_state": 1,
"data_item": "",
"data_value": "",
"isSelected": true
},
{
"se_type": 1000,
"se_name": "能见度/天气现象传感器",
"data_r_table": "",
"data_h_table": "",
"se_state": 1,
"data_item": "",
"data_value": "",
"isSelected": true
},
{
"se_type": 1100,
"se_name": "DSS1型雪深观测仪",
"data_r_table": "",
"data_h_table": "",
"se_state": 1,
"data_item": "",
"data_value": "",
"isSelected": true
},
{
"se_type": 1200,
"se_name": "地面温度传感器",
"data_r_table": "",
"data_h_table": "",
"se_state": 1,
"data_item": "",
"data_value": "",
"isSelected": true
},
{
"se_type": 1300,
"se_name": "大气电场传感器",
"data_r_table": "",
"data_h_table": "",
"se_state": 1,
"data_item": "",
"data_value": "",
"isSelected": true
},
{
"se_type": 1400,
"se_name": "雷电预警仪",
"data_r_table": "",
"data_h_table": "",
"se_state": 1,
"data_item": "",
"data_value": "",
"isSelected": true
},
{
"se_type": 1500,
"se_name": "日照传感器",
"data_r_table": "",
"data_h_table": "",
"se_state": 1,
"data_item": "",
"data_value": "",
"isSelected": true
},
{
"se_type": 1600,
"se_name": "总辐射传感器",
"data_r_table": "",
"data_h_table": "",
"se_state": 1,
"data_item": "",
"data_value": "",
"isSelected": true
},
{
"se_type": 1700,
"se_name": "光照度传感器",
"data_r_table": "",
"data_h_table": "",
"se_state": 1,
"data_item": "",
"data_value": "",
"isSelected": true
},
{
"se_type": 1800,
"se_name": "压力式水位传感器",
"data_r_table": "",
"data_h_table": "",
"se_state": 1,
"data_item": "",
"data_value": "",
"isSelected": true
},
{
"se_type": 1900,
"se_name": "流向流速传感器",
"data_r_table": "",
"data_h_table": "",
"se_state": 1,
"data_item": "",
"data_value": "",
"isSelected": 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.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]
console.log(customizeColumns.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>