|
@@ -42,10 +42,20 @@
|
|
<div>站台状况</div>
|
|
<div>站台状况</div>
|
|
<div v-if="customizeColumns&&customizeColumns.length>0" class="container-device-main mt15">
|
|
<div v-if="customizeColumns&&customizeColumns.length>0" class="container-device-main mt15">
|
|
<template v-for="item in customizeColumns">
|
|
<template v-for="item in customizeColumns">
|
|
- <div class="container-device-item">
|
|
|
|
|
|
+ <div class="container-device-item" @click="handlePlatform(item)">
|
|
<div class="container-text-box">
|
|
<div class="container-text-box">
|
|
<div class="container-title">{{item.se_name}}</div>
|
|
<div class="container-title">{{item.se_name}}</div>
|
|
- <div class="container-name mt15 mb15">传感器状态:{{getProcessValue(item.se_type)}}</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 class="container-name">证书剩余时间:{{findRemainingDays(item.se_type)}}</div>
|
|
</div>
|
|
</div>
|
|
<div class="device-img">
|
|
<div class="device-img">
|
|
@@ -107,6 +117,73 @@
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</template>
|
|
</el-dialog>
|
|
</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>
|
|
</div>
|
|
</template>
|
|
</template>
|
|
|
|
|
|
@@ -132,6 +209,8 @@ import img1700 from "@/assets/images/single/1700.png"
|
|
import {getPlatformList, getQuerCertList, getStaitemList, getYallSensorList} from "@/api/modules/allData";
|
|
import {getPlatformList, getQuerCertList, getStaitemList, getYallSensorList} from "@/api/modules/allData";
|
|
import {onMounted, reactive, ref} from "vue";
|
|
import {onMounted, reactive, ref} from "vue";
|
|
import {Platform} from "@/api/interface";
|
|
import {Platform} from "@/api/interface";
|
|
|
|
+import {ColumnProps} from "@/components/ProTable/interface";
|
|
|
|
+const radio1 =ref('1');
|
|
const getCustomImg = (iconName: string) => {
|
|
const getCustomImg = (iconName: string) => {
|
|
const icons = {
|
|
const icons = {
|
|
0: img0,
|
|
0: img0,
|
|
@@ -156,6 +235,23 @@ const getCustomImg = (iconName: string) => {
|
|
return icons[iconName] || null;
|
|
return icons[iconName] || null;
|
|
};
|
|
};
|
|
|
|
|
|
|
|
+// 表格配置项
|
|
|
|
+const columns = reactive<ColumnProps[]>([
|
|
|
|
+ { prop: "a", label: "状态"},
|
|
|
|
+ { prop: "b", label: "状态值"},
|
|
|
|
+ { prop: "c", label: "备注" },
|
|
|
|
+]);
|
|
|
|
+
|
|
|
|
+
|
|
|
|
+const handlePlatform = (item)=>{
|
|
|
|
+ radio1.value = '1'
|
|
|
|
+ itemData.value = item
|
|
|
|
+ dialog2.visible = true
|
|
|
|
+ dialog2.title = '传感器信息'
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+const itemData= ref({})
|
|
|
|
+
|
|
const pageable = ref<any>({
|
|
const pageable = ref<any>({
|
|
data_type: true,
|
|
data_type: true,
|
|
time_order: undefined,
|
|
time_order: undefined,
|
|
@@ -172,6 +268,7 @@ const pageable = ref<any>({
|
|
});
|
|
});
|
|
|
|
|
|
const processTableData = ref([]);
|
|
const processTableData = ref([]);
|
|
|
|
+const processTableData2 = ref([]);
|
|
const processTableFrom = ref({});
|
|
const processTableFrom = ref({});
|
|
const certData = ref([]);
|
|
const certData = ref([]);
|
|
|
|
|
|
@@ -285,6 +382,11 @@ const dialog = reactive<any>({
|
|
title: ''
|
|
title: ''
|
|
});
|
|
});
|
|
|
|
|
|
|
|
+const dialog2 = reactive<any>({
|
|
|
|
+ visible: false,
|
|
|
|
+ title: ''
|
|
|
|
+});
|
|
|
|
+
|
|
const handleSetting = () => {
|
|
const handleSetting = () => {
|
|
copiedCustomizeColumns.value = [...customizeColumns.value]
|
|
copiedCustomizeColumns.value = [...customizeColumns.value]
|
|
sensorList.value.forEach(element => {
|
|
sensorList.value.forEach(element => {
|
|
@@ -393,6 +495,10 @@ const cancel = () => {
|
|
dialog.visible = false;
|
|
dialog.visible = false;
|
|
}
|
|
}
|
|
|
|
|
|
|
|
+const cancel2 = () => {
|
|
|
|
+ dialog2.visible = false;
|
|
|
|
+}
|
|
|
|
+
|
|
onMounted(() => {
|
|
onMounted(() => {
|
|
loadCustomizeColumns()
|
|
loadCustomizeColumns()
|
|
// updateColumns()
|
|
// updateColumns()
|
|
@@ -473,4 +579,12 @@ function addressLabel(item) {
|
|
color: var(--el-text-color-secondary);
|
|
color: var(--el-text-color-secondary);
|
|
font-size: 12px;
|
|
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>
|
|
</style>
|