SMO/src/views/alarm/singleDevice/index.vue

<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">站号：
          <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>-->
          <el-tag type="success" size="default" hit>正常</el-tag>
        </div>
        <div class="container-item container__label">站址：未命名29号</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 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>
          <div class="device-img"></div>
        </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 { 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>

</style>