|
|
@@ -4,39 +4,49 @@
|
|
|
<!-- 表格头部 操作按钮 -->
|
|
|
<div class="table-header">
|
|
|
<div class="header-button-lf">
|
|
|
- <el-form :model="pageable" label-width="auto" :inline="true">
|
|
|
+ <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>
|
|
|
+ <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-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="80px" :show-overflow-tooltip="true">
|
|
|
+ <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">
|
|
|
+ <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']}}
|
|
|
+ {{ 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}}
|
|
|
+ {{ 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)}}
|
|
|
+ {{ findLabelByValue(typeList, scope.row.view_mode) }}
|
|
|
</template>
|
|
|
<template v-if="item.prop === 'operation'">
|
|
|
<el-tooltip
|
|
|
@@ -46,23 +56,23 @@
|
|
|
placement="top"
|
|
|
>
|
|
|
<el-button type="primary" link @click="handleUpdate(scope.row)">
|
|
|
- <el-icon >
|
|
|
- <Edit />
|
|
|
+ <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>-->
|
|
|
+ <!-- <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>
|
|
|
@@ -72,27 +82,28 @@
|
|
|
<template #empty>
|
|
|
<div class="table-empty">
|
|
|
<slot name="empty">
|
|
|
- <img src="@/assets/images/notData.png" alt="notData" />
|
|
|
+ <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" />
|
|
|
+ <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-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="sensorList"></Translation>
|
|
|
+ <Translation :select-data="rowItem" :sensorList="sensorList2"></Translation>
|
|
|
</el-tab-pane>
|
|
|
<el-tab-pane label="仪器检定证">
|
|
|
- <VerificationCertificate :select-data="rowItem" :sensorList="sensorList"></VerificationCertificate>
|
|
|
+ <VerificationCertificate :select-data="rowItem" :sensorList="sensorList2"></VerificationCertificate>
|
|
|
</el-tab-pane>
|
|
|
<el-tab-pane label="阈值设置">
|
|
|
<Threshold :select-data="rowItem"></Threshold>
|
|
|
@@ -105,6 +116,78 @@
|
|
|
</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>
|
|
|
|
|
|
@@ -117,27 +200,23 @@ 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 {ref, reactive, computed, onMounted} from "vue";
|
|
|
-import { ColumnProps } from "@/components/ProTable/interface";
|
|
|
-import { ElMessageBox } from 'element-plus'
|
|
|
+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 { getYallSensorList } from "@/api/modules/allData";
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
+import {getAs_status, getYallSensorList, getYascomm} from "@/api/modules/allData";
|
|
|
|
|
|
// 获取传感器字典
|
|
|
-const sensorList = ref<any>([]);
|
|
|
+const sensorList2 = ref<any>([]);
|
|
|
const getSensorList = async () => {
|
|
|
- const { data } = await getYallSensorList();
|
|
|
- sensorList.value = data.list
|
|
|
+ const {data} = await getYallSensorList();
|
|
|
+ sensorList2.value = data.list
|
|
|
};
|
|
|
//搜索站号
|
|
|
-const selectedData= ref([])
|
|
|
+const selectedData = ref([])
|
|
|
const userStore = useUserStore();
|
|
|
//下拉数据
|
|
|
-const platformList =ref<any>(computed(() => userStore.stations))
|
|
|
+const platformList = ref<any>(computed(() => userStore.stations))
|
|
|
//列表展示原始数据
|
|
|
const processTableData = ref(computed(() => userStore.stations));
|
|
|
//列表展示查询分页后数据
|
|
|
@@ -167,6 +246,8 @@ const handleQuery = () => {
|
|
|
pageable.value.total = filteredData.length; // 更新总数
|
|
|
// 确保通过 .value 修改 ref 的值
|
|
|
showList.value = filteredData;
|
|
|
+
|
|
|
+ getStatus()
|
|
|
};
|
|
|
|
|
|
// 重置功能
|
|
|
@@ -177,6 +258,8 @@ const resetQuery = () => {
|
|
|
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) => {
|
|
|
@@ -204,28 +287,14 @@ const updateShowList = () => {
|
|
|
};
|
|
|
|
|
|
|
|
|
-const selectedItems =(data)=>{
|
|
|
- if(data.length>0){
|
|
|
+const selectedItems = (data) => {
|
|
|
+ if (data.length > 0) {
|
|
|
pageable.value.as_code = data[0]
|
|
|
}
|
|
|
};
|
|
|
|
|
|
-
|
|
|
// 表格配置项
|
|
|
-const columns = reactive<ColumnProps[]>([
|
|
|
- { prop: "as_depart", label: "部别" },
|
|
|
- { prop: "as_name", label: "站名" },
|
|
|
- { prop: "as_code", label: "站号" },
|
|
|
- { prop: "map_level", label: "地图层级" },
|
|
|
- { prop: "address", label: "地址" },
|
|
|
- { prop: "as_lon", label: "经度" },
|
|
|
- { prop: "as_lat", label: "纬度" },
|
|
|
- { prop: "as_auditor", label: "预审员"},
|
|
|
- { prop: "check_leader", label: "测试组长"},
|
|
|
- { prop: "station_leader", label: "台长"},
|
|
|
- { prop: "view_mode", label: "观测方式"},
|
|
|
- { prop: "operation", label: "操作", width:150,align: 'center' }
|
|
|
-]);
|
|
|
+let columns = reactive<ColumnProps[]>([]);
|
|
|
|
|
|
const dialog = reactive<any>({
|
|
|
visible: false,
|
|
|
@@ -238,8 +307,8 @@ const initFormData = ref<any>(
|
|
|
code: "",
|
|
|
type: "",
|
|
|
name: "",
|
|
|
- startTime:"",
|
|
|
- endTime:"",
|
|
|
+ startTime: "",
|
|
|
+ endTime: "",
|
|
|
remark: ""
|
|
|
}
|
|
|
);
|
|
|
@@ -271,7 +340,7 @@ const cancel = () => {
|
|
|
}
|
|
|
/** 表单重置 */
|
|
|
const reset = () => {
|
|
|
- form.value = { ...initFormData };
|
|
|
+ form.value = {...initFormData};
|
|
|
formRef.value?.resetFields();
|
|
|
}
|
|
|
|
|
|
@@ -290,7 +359,7 @@ const handleDelete = async (row?: any) => {
|
|
|
confirmButtonText: '删除',
|
|
|
cancelButtonText: '取消',
|
|
|
type: 'warning',
|
|
|
- title:'删除数据',
|
|
|
+ title: '删除数据',
|
|
|
draggable: true
|
|
|
})
|
|
|
.then(() => {
|
|
|
@@ -306,7 +375,7 @@ function findLabelByValue(noticeTypeList, value) {
|
|
|
return item ? item.label : null;
|
|
|
}
|
|
|
|
|
|
-const typeList= [
|
|
|
+const typeList = [
|
|
|
{
|
|
|
value: 0,
|
|
|
label: '人工值班',
|
|
|
@@ -320,9 +389,430 @@ const typeList= [
|
|
|
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>
|
cxs