单站设备状态监测报警

src/api/modules/allData.ts

@@ -31,4 +31,13 @@ export const getTacRecordList = (params:{}) => {
 };
 
 
+//查询所有自动站部件字典
+export const getYallSensorList = () => {
+  return http.post<ResPage<any>>(PORT1 + `/queryallsensorlist`);
+};
+
 
+//查询观测要素
+export const getStaitemList = (params:{}) => {
+  return http.post<ResPage<any>>(PORT1 + `/querystaitem`,params);
+};

src/styles/common.scss

@@ -273,6 +273,7 @@
     display: flex;
     flex-direction: column;
     width: 200px;
+    flex-shrink: 0;
     height: 100%;
     padding-left: 20px;
     border-left: var(--el-border-color-light) solid 2px
@@ -314,7 +315,9 @@
     flex-grow: 1;
     display: flex;
     flex-direction: column;
-    gap: 10px
+    gap: 10px;
+    height: 400px;
+    overflow-y: auto;
   }
 
   .selected-item-tag {

src/views/alarm/allData/index.vue

@@ -418,7 +418,7 @@ const copiedCustomizeColumns = ref<any>([...customizeColumns.value]);
 
 // 查询自动站列表
 const queryas = ref<Platform>({
-  pageSize: 50,
+  pageSize: 10000,
   pageNum: 1
 })
 

src/views/alarm/allWeather/index.vue

@@ -92,8 +92,6 @@ const changeCodeList =(value)=>{
   }else {
     pageable.value.as_code_list= []
   }
-
-
 }
 
 const timeBegin = ref()
@@ -264,7 +262,7 @@ onDeactivated(() => {
 const platformList =ref<any>([])
 // 查询自动站列表
 const queryas = ref<Platform>({
-  pageSize: 50,
+  pageSize: 10000,
   pageNum: 1
 })
 

src/views/alarm/singleDevice/index.vue

@@ -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>

src/views/query/hazardousWeather/index.vue

@@ -282,7 +282,7 @@ onMounted(() => {
 const platformList =ref<any>([])
 // 查询自动站列表
 const queryas = ref<Platform>({
-  pageSize: 50,
+  pageSize: 10000,
   pageNum: 1
 })
 

src/views/query/queryObservationData/index.vue

@@ -611,7 +611,7 @@ const copiedCustomizeColumns = ref<any>([...customizeColumns.value]);
 
 // 查询自动站列表
 const queryas = ref<Platform>({
-  pageSize: 50,
+  pageSize: 10000,
   pageNum: 1
 })