|
@@ -1,17 +1,34 @@
|
|
|
<template>
|
|
|
<div class="table-box">
|
|
|
<div class="card container-box">
|
|
|
- <div>站台概况</div>
|
|
|
+ <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">站号:
|
|
|
- <el-select v-model="queryParams.name" filterable placeholder="请选择自动站" clearable style="width: 150px">
|
|
|
- <el-option label="固定站1" value="1" />
|
|
|
- <el-option label="站2" value="2" />
|
|
|
- </el-select></div>
|
|
|
+ <el-select v-model="as_code_list" @change="changeCodeList" collapse-tags filterable placeholder="请搜索自动站" remote reserve-keyword clearable style="width: 200px">
|
|
|
+ <el-option
|
|
|
+ v-for="item in platformList"
|
|
|
+ :key="item.as_code"
|
|
|
+ :label="item.as_code +' '+item.as_name"
|
|
|
+ :value="item.as_code"
|
|
|
+ />
|
|
|
+ <template #prefix>
|
|
|
+ <el-icon class="el-input__icon"><search /></el-icon>
|
|
|
+ </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">自动站状态:<el-tag type="danger" size="default" hit>故障</el-tag></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">站址:未命名29号</div>
|
|
|
</div>
|
|
|
<!-- <div class="container-main mt15">-->
|
|
@@ -162,15 +179,265 @@
|
|
|
</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)">{{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>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script setup lang="ts">
|
|
|
-import {ref} from "vue";
|
|
|
+import { getPlatformList, getStaitemList, getYallSensorList} from "@/api/modules/allData";
|
|
|
+
|
|
|
+const pageable = ref<any>({
|
|
|
+ data_type: true,
|
|
|
+ time_order: 0,
|
|
|
+ as_code_list:[],
|
|
|
+ state_list: [
|
|
|
+ "STATE_PART",
|
|
|
+ "STATE_SENSOR",
|
|
|
+ "STATE_ARTIFICIAL"
|
|
|
+ ],
|
|
|
+ pageNum: 1,
|
|
|
+ pageSize: 1000,
|
|
|
+ total: 0
|
|
|
+});
|
|
|
+
|
|
|
+const processTableData = ref([]);
|
|
|
+
|
|
|
+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
|
|
|
+ }
|
|
|
+])
|
|
|
+
|
|
|
+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 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;
|
|
|
+}
|
|
|
+
|
|
|
+import {onMounted, reactive, ref} from "vue";
|
|
|
+import {Platform} from "@/api/interface";
|
|
|
|
|
|
const queryParams = ref({
|
|
|
name: "1"
|
|
|
});
|
|
|
+
|
|
|
+const getSensorList = async () => {
|
|
|
+ const { data } = await getYallSensorList();
|
|
|
+ sensorList.value = data.list
|
|
|
+};
|
|
|
+
|
|
|
+
|
|
|
+const submitForm = () => {
|
|
|
+ dialog.visible = false;
|
|
|
+ customizeColumns.value = [...copiedCustomizeColumns.value]
|
|
|
+ updateColumns()
|
|
|
+ saveCustomizeColumns()
|
|
|
+}
|
|
|
+
|
|
|
+const updateColumns = () => {
|
|
|
+ pageable.value.data_items = [...customizeColumns.value];
|
|
|
+ getList()
|
|
|
+}
|
|
|
+
|
|
|
+const as_code_list = ref('')
|
|
|
+
|
|
|
+const changeCodeList =(value)=>{
|
|
|
+ if(value){
|
|
|
+ pageable.value.as_code_list = [value]
|
|
|
+ }else {
|
|
|
+ pageable.value.as_code_list= []
|
|
|
+ }
|
|
|
+ getList()
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+const cancel = () => {
|
|
|
+ dialog.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 platformList =ref<any>([])
|
|
|
+// 查询自动站列表
|
|
|
+const queryas = ref<Platform>({
|
|
|
+ pageSize: 10000,
|
|
|
+ pageNum: 1
|
|
|
+})
|
|
|
+
|
|
|
+const getPlatforms = async () => {
|
|
|
+ const { data } = await getPlatformList(queryas.value);
|
|
|
+ platformList.value = data.list
|
|
|
+};
|
|
|
+
|
|
|
+
|
|
|
+const getList = async () => {
|
|
|
+ const { data } = await getStaitemList(pageable.value);
|
|
|
+ processTableData.value = data.list
|
|
|
+ pageable.value.total = data.total
|
|
|
+};
|
|
|
+
|
|
|
</script>
|
|
|
|
|
|
<style scoped>
|