|
@@ -14,7 +14,7 @@
|
|
|
<el-option
|
|
|
v-for="item in platformList"
|
|
|
:key="item.as_code"
|
|
|
- :label="item.as_code +' '+item.as_name"
|
|
|
+ :label="item.as_code"
|
|
|
:value="item.as_code"
|
|
|
/>
|
|
|
<template #prefix>
|
|
@@ -22,14 +22,14 @@
|
|
|
</template>
|
|
|
</el-select>
|
|
|
</div>
|
|
|
- <div class="container-item container__label">名称:固定站1</div>
|
|
|
- <div class="container-item container__label">通信模块状态:</div>
|
|
|
- <div class="container-item container__label">观测时间:2024-09-19 23:00</div>
|
|
|
+ <div class="container-item container__label">名称:{{processTableFrom.as_name?processTableFrom.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>
|
|
|
+<!-- <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">站址:未命名29号</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>-->
|
|
@@ -40,143 +40,23 @@
|
|
|
</div>
|
|
|
<div class="card table-main">
|
|
|
<div>站台状况</div>
|
|
|
- <div class="container-device-main mt15">
|
|
|
- <div class="container-device-item">
|
|
|
- <div class="container-text-box">
|
|
|
- <div class="container-title">超声风传感器</div>
|
|
|
- <div class="container-name mt15 mb15">传感器状态:</div>
|
|
|
- <div class="container-name">证书剩余时间:536天</div>
|
|
|
- </div>
|
|
|
- <div class="device-img"></div>
|
|
|
- </div>
|
|
|
- <div class="container-device-item">
|
|
|
- <div class="container-text-box">
|
|
|
- <div class="container-title">超声风传感器</div>
|
|
|
- <div class="container-name mt15 mb15">传感器状态:</div>
|
|
|
- <div class="container-name">证书剩余时间:536天</div>
|
|
|
- </div>
|
|
|
- <div class="device-img"></div>
|
|
|
- </div>
|
|
|
- <div class="container-device-item">
|
|
|
- <div class="container-text-box">
|
|
|
- <div class="container-title">超声风传感器</div>
|
|
|
- <div class="container-name mt15 mb15">传感器状态:</div>
|
|
|
- <div class="container-name">证书剩余时间:536天</div>
|
|
|
- </div>
|
|
|
- <div class="device-img"></div>
|
|
|
- </div>
|
|
|
- <div class="container-device-item">
|
|
|
- <div class="container-text-box">
|
|
|
- <div class="container-title">超声风传感器</div>
|
|
|
- <div class="container-name mt15 mb15">传感器状态:</div>
|
|
|
- <div class="container-name">证书剩余时间:536天</div>
|
|
|
- </div>
|
|
|
- <div class="device-img"></div>
|
|
|
- </div>
|
|
|
- <div class="container-device-item">
|
|
|
- <div class="container-text-box">
|
|
|
- <div class="container-title">超声风传感器</div>
|
|
|
- <div class="container-name mt15 mb15">传感器状态:</div>
|
|
|
- <div class="container-name">证书剩余时间:536天</div>
|
|
|
- </div>
|
|
|
- <div class="device-img"></div>
|
|
|
- </div>
|
|
|
- <div class="container-device-item">
|
|
|
- <div class="container-text-box">
|
|
|
- <div class="container-title">超声风传感器</div>
|
|
|
- <div class="container-name mt15 mb15">传感器状态:</div>
|
|
|
- <div class="container-name">证书剩余时间:536天</div>
|
|
|
- </div>
|
|
|
- <div class="device-img"></div>
|
|
|
- </div>
|
|
|
- <div class="container-device-item">
|
|
|
- <div class="container-text-box">
|
|
|
- <div class="container-title">超声风传感器</div>
|
|
|
- <div class="container-name mt15 mb15">传感器状态:</div>
|
|
|
- <div class="container-name">证书剩余时间:536天</div>
|
|
|
- </div>
|
|
|
- <div class="device-img"></div>
|
|
|
- </div>
|
|
|
- <div class="container-device-item">
|
|
|
- <div class="container-text-box">
|
|
|
- <div class="container-title">超声风传感器</div>
|
|
|
- <div class="container-name mt15 mb15">传感器状态:</div>
|
|
|
- <div class="container-name">证书剩余时间:536天</div>
|
|
|
- </div>
|
|
|
- <div class="device-img"></div>
|
|
|
- </div>
|
|
|
- <div class="container-device-item">
|
|
|
- <div class="container-text-box">
|
|
|
- <div class="container-title">超声风传感器</div>
|
|
|
- <div class="container-name mt15 mb15">传感器状态:</div>
|
|
|
- <div class="container-name">证书剩余时间:536天</div>
|
|
|
- </div>
|
|
|
- <div class="device-img"></div>
|
|
|
- </div>
|
|
|
- <div class="container-device-item">
|
|
|
- <div class="container-text-box">
|
|
|
- <div class="container-title">超声风传感器</div>
|
|
|
- <div class="container-name mt15 mb15">传感器状态:</div>
|
|
|
- <div class="container-name">证书剩余时间:536天</div>
|
|
|
- </div>
|
|
|
- <div class="device-img"></div>
|
|
|
- </div>
|
|
|
- <div class="container-device-item">
|
|
|
- <div class="container-text-box">
|
|
|
- <div class="container-title">超声风传感器</div>
|
|
|
- <div class="container-name mt15 mb15">传感器状态:</div>
|
|
|
- <div class="container-name">证书剩余时间:536天</div>
|
|
|
- </div>
|
|
|
- <div class="device-img"></div>
|
|
|
- </div>
|
|
|
- <div class="container-device-item">
|
|
|
- <div class="container-text-box">
|
|
|
- <div class="container-title">超声风传感器</div>
|
|
|
- <div class="container-name mt15 mb15">传感器状态:</div>
|
|
|
- <div class="container-name">证书剩余时间:536天</div>
|
|
|
- </div>
|
|
|
- <div class="device-img"></div>
|
|
|
- </div>
|
|
|
- <div class="container-device-item">
|
|
|
- <div class="container-text-box">
|
|
|
- <div class="container-title">超声风传感器</div>
|
|
|
- <div class="container-name mt15 mb15">传感器状态:</div>
|
|
|
- <div class="container-name">证书剩余时间:536天</div>
|
|
|
- </div>
|
|
|
- <div class="device-img"></div>
|
|
|
- </div>
|
|
|
- <div class="container-device-item">
|
|
|
- <div class="container-text-box">
|
|
|
- <div class="container-title">超声风传感器</div>
|
|
|
- <div class="container-name mt15 mb15">传感器状态:</div>
|
|
|
- <div class="container-name">证书剩余时间:536天</div>
|
|
|
- </div>
|
|
|
- <div class="device-img"></div>
|
|
|
- </div>
|
|
|
- <div class="container-device-item">
|
|
|
- <div class="container-text-box">
|
|
|
- <div class="container-title">超声风传感器</div>
|
|
|
- <div class="container-name mt15 mb15">传感器状态:</div>
|
|
|
- <div class="container-name">证书剩余时间:536天</div>
|
|
|
- </div>
|
|
|
- <div class="device-img"></div>
|
|
|
- </div>
|
|
|
- <div class="container-device-item">
|
|
|
- <div class="container-text-box">
|
|
|
- <div class="container-title">超声风传感器</div>
|
|
|
- <div class="container-name mt15 mb15">传感器状态:</div>
|
|
|
- <div class="container-name">证书剩余时间:536天</div>
|
|
|
- </div>
|
|
|
- <div class="device-img"></div>
|
|
|
- </div>
|
|
|
- <div class="container-device-item">
|
|
|
- <div class="container-text-box">
|
|
|
- <div class="container-title">超声风传感器</div>
|
|
|
- <div class="container-name mt15 mb15">传感器状态:</div>
|
|
|
- <div class="container-name">证书剩余时间:536天</div>
|
|
|
+ <div v-if="customizeColumns&&customizeColumns.length>0" class="container-device-main mt15">
|
|
|
+ <template v-for="item in customizeColumns">
|
|
|
+ <div class="container-device-item">
|
|
|
+ <div class="container-text-box">
|
|
|
+ <div class="container-title">{{item.se_name}}</div>
|
|
|
+ <div class="container-name mt15 mb15">传感器状态:{{getProcessValue(item.se_type)}}</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>
|
|
|
- <div 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>
|
|
|
<!-- 添加或修改对话框 -->
|
|
@@ -231,17 +111,60 @@
|
|
|
</template>
|
|
|
|
|
|
<script setup lang="ts">
|
|
|
+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, getStaitemList, getYallSensorList} from "@/api/modules/allData";
|
|
|
import {onMounted, reactive, ref} from "vue";
|
|
|
import {Platform} from "@/api/interface";
|
|
|
+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 pageable = ref<any>({
|
|
|
data_type: true,
|
|
|
- time_order: 0,
|
|
|
+ time_order: undefined,
|
|
|
+ time_space: 1,
|
|
|
as_code_list:[],
|
|
|
state_list: [
|
|
|
- "STATE_PART",
|
|
|
- "STATE_SENSOR",
|
|
|
- "STATE_ARTIFICIAL"
|
|
|
+ 0,
|
|
|
+ 1,
|
|
|
+ 2
|
|
|
],
|
|
|
pageNum: 1,
|
|
|
pageSize: 1000,
|
|
@@ -249,22 +172,33 @@ const pageable = ref<any>({
|
|
|
});
|
|
|
|
|
|
const processTableData = ref([]);
|
|
|
+const processTableFrom = ref({});
|
|
|
+const certData = ref([]);
|
|
|
+
|
|
|
+const findRemainingDays = (inputSeType) => {
|
|
|
+ const selectedCert = certData.value.find(cert => cert.se_type === parseInt(inputSeType));
|
|
|
+ if (selectedCert) {
|
|
|
+ const currentTime = Math.floor(Date.now() / 1000);
|
|
|
+ const remainingSeconds = selectedCert.cal_date_i - currentTime;
|
|
|
+ return Math.ceil(remainingSeconds / (60 * 60 * 24))+'天';
|
|
|
+ } 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>([
|
|
|
- {
|
|
|
- se_type: 0,
|
|
|
- se_name: "预处理器",
|
|
|
- data_item: "",
|
|
|
- se_state: 0,
|
|
|
- data_r_table: "",
|
|
|
- data_h_table: "",
|
|
|
- data_value: "",
|
|
|
- isSelected: false
|
|
|
- }
|
|
|
-])
|
|
|
+let customizeColumns= ref<any>([])
|
|
|
|
|
|
const changeMoveUp = () =>{
|
|
|
//上移
|
|
@@ -365,6 +299,39 @@ const getSensorList = async () => {
|
|
|
sensorList.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;
|
|
@@ -374,19 +341,25 @@ const submitForm = () => {
|
|
|
}
|
|
|
|
|
|
const updateColumns = () => {
|
|
|
- pageable.value.data_items = [...customizeColumns.value];
|
|
|
- getList()
|
|
|
+ // 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 changeCodeList =(value)=>{
|
|
|
if(value){
|
|
|
+ selectedItem.value = platformList.value.find(item => item.as_code === value);
|
|
|
pageable.value.as_code_list = [value]
|
|
|
+ getList()
|
|
|
}else {
|
|
|
+ selectedItem.value= {}
|
|
|
pageable.value.as_code_list= []
|
|
|
+ processTableFrom.value = {}
|
|
|
}
|
|
|
- getList()
|
|
|
}
|
|
|
|
|
|
|
|
@@ -396,7 +369,7 @@ const cancel = () => {
|
|
|
|
|
|
onMounted(() => {
|
|
|
loadCustomizeColumns()
|
|
|
- updateColumns()
|
|
|
+ // updateColumns()
|
|
|
getPlatforms()
|
|
|
getSensorList()
|
|
|
})
|
|
@@ -432,11 +405,38 @@ const getPlatforms = async () => {
|
|
|
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}`;
|
|
|
+ }
|
|
|
+}
|
|
|
</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;
|
|
|
+}
|
|
|
</style>
|