dataExchange-front/src/views/messageManagement/index.vue

<template>
  <el-col style="height:100%;">
    <el-row :gutter="20" style="height: 50%;">
      <el-col :span="12" style="height:100%;">
        <el-card class="box-card" style="width: 100%;">
          <div slot="header" class="clearfix" style="height: 28px">
            <span>雷达脉冲数据</span>
          </div>
          <div style="height: calc(100% - 40px)">
              <el-table :data="this.singleData" height="100%">
                <el-table-column label="序号" width="55" type="index" :index='(index) => { return (index + 1) + (radarPageIndex - 1) * radarPageSize }'></el-table-column>
                <el-table-column prop="type" label="类型" width="55"></el-table-column>
                <el-table-column prop="environment" label="环境" width="55"></el-table-column>
                <el-table-column prop="longitude" label="经度" width="55"></el-table-column>
                <el-table-column prop="latitude" label="纬度" width="55"></el-table-column>
                <el-table-column prop="height" label="高度" width="55"></el-table-column>
                <el-table-column prop="frequency" label="频率(MHz)"></el-table-column>
                <el-table-column prop="pri" label="PRI(MHz)"></el-table-column>
                <el-table-column prop="from" label="发送方"></el-table-column>
                <el-table-column prop="to" label="接收方"></el-table-column>
              </el-table>
          </div>
          <div style="height: 30px">
            <el-pagination
                background
                @size-change="radarSizeChangeHandle"
                @current-change="radarCurrentChangeHandle"
                :current-page="radarPageIndex"
                :page-sizes="[10, 20, 50, 100]"
                :page-size="radarPageSize"
                :total="radarTotalPage"
                layout="total, sizes, prev, pager, next, jumper">
            </el-pagination>
          </div>
        </el-card>
      </el-col>

      <el-col :span="12" style="height:100%;">
        <el-card class="box-card" style="width: 100%;height: 100%">
          <div slot="header" class="clearfix" style="height: 28px">
            <span>电子干扰数据</span>
          </div>
          <div style="height: calc(100% - 40px)">
            <el-table :data="this.interferenceData" height="100%">
              <el-table-column label="序号" type="index"  width="55" :index='(index) => { return (index + 1) + (interferencePageIndex - 1) * interferencePageSize }'></el-table-column>
              <el-table-column prop="type" label="类型" width="80"></el-table-column>
              <el-table-column prop="environment" label="环境" width="55"></el-table-column>
              <el-table-column prop="area" label="区域" width="55"></el-table-column>
              <el-table-column prop="strategy" label="干扰策略" width="80"></el-table-column>
              <el-table-column prop="target" label="干扰目标" width="80"></el-table-column>
              <el-table-column prop="isCollaborated" label="是否协同干扰" width="110"/>
              <el-table-column prop="pri" label="PRI(MHz)" width="100"></el-table-column>
              <el-table-column prop="from" label="发送方"></el-table-column>
              <el-table-column prop="to" label="接收方"></el-table-column>
            </el-table>
          </div>
          <div style="height: 30px;">
            <el-pagination
                background
                @size-change="interferenceSizeChangeHandle"
                @current-change="interferenceCurrentChangeHandle"
                :current-page="interferencePageIndex"
                :page-sizes="[10, 20, 50, 100]"
                :page-size="interferencePageSize"
                :total="interferenceTotalPage"
                layout="total, sizes, prev, pager, next, jumper">
            </el-pagination>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <el-row style="height: 50%;">
      <el-card class="box-card" style="width: 100%;">
        <div slot="header" class="clearfix" style="height: 28px">
          <span>综合/战术/自由</span>
        </div>
        <div style="height: calc(100% - 30px)">
          <el-table :data="this.otherData" height="100%">
            <el-table-column label="序号" type="index" :index='(index) => { return (index + 1) + (otherPageIndex - 1) * otherPageSize }'></el-table-column>
            <el-table-column prop="type" label="消息类型"></el-table-column>
            <el-table-column prop="priority" label="优先级"></el-table-column>
            <el-table-column prop="isBroadcast" label="是否广播">
            </el-table-column>
            <el-table-column prop="from" label="发送方"></el-table-column>
            <el-table-column prop="to" label="接收方"></el-table-column>
            <el-table-column prop="message" label="消息内容"></el-table-column>
          </el-table>
        </div>
        <div style="height: 30px">
          <el-pagination
              background
              @size-change="otherSizeChangeHandle"
              @current-change="otherCurrentChangeHandle"
              :current-page="otherPageIndex"
              :page-sizes="[10, 20, 50, 100]"
              :page-size="otherPageSize"
              :total="otherTotalPage"
              layout="total, sizes, prev, pager, next, jumper">
          </el-pagination>
        </div>
      </el-card>
    </el-row>

  </el-col>
</template>

<script>

export default {
  data() {
    return {
      dialogVisible: false,
      radarPageIndex: 1,
      radarPageSize: 10,
      radarTotalPage: 0,
      interferencePageIndex: 1,
      interferencePageSize: 10,
      interferenceTotalPage: 0,
      otherPageIndex: 1,
      otherPageSize: 10,
      otherTotalPage: 0,
      singleData: [],
      interferenceData: [],
      otherData: [],
    };
  },

  created() {
      this.getRadarMessage();
      this.getInterferenceMessage();
      this.getOtherMessage();

    // 设置定时器，每隔 5 秒更新一次数据（可以根据需求调整时间）
    // this.dataUpdateInterval = setInterval(() => {
    //   this.getRadarMessage();
    //   this.getInterferenceMessage();
    // }, 5000); // 5000 毫秒 = 5 秒
  },
  activated() {
    this.radarCurrentChangeHandle(1);
    this.interferenceCurrentChangeHandle(1);
    this.otherCurrentChangeHandle(1);
  },

  methods:{
    handleClose(){},
    //获取雷达脉冲数据
    getRadarMessage(){
      this.singleData=[]
      const params = {
        page: this.radarPageIndex,
        limit: this.radarPageSize,
      };
      this.$http({
        url: this.$http.adornUrl("/message/listRadarPulses"),
        method: "get",
        params: this.$http.adornParams(params),
      }).then(({ data }) => {
        if (data && data.code === 0) {
          this.singleData = data.page.list;
          this.radarTotalPage = data.page.totalCount;
        } else {
          this.singleData = [];
          this.radarTotalPage = 0;
        }
        // this.dataListLoading = false;
      });
    },
    // 雷达脉冲数据每页数
    radarSizeChangeHandle(val) {
      this.radarPageSize = val;
      this.radarPageIndex = 1;
      this.getRadarMessage();
    },
    // 雷达脉冲数据当前页
    radarCurrentChangeHandle(val) {
      this.radarPageIndex = val;
      this.getRadarMessage();
    },
    //获取电子干扰数据
    getInterferenceMessage(){
      const params = {
        page: this.interferencePageIndex,
        limit: this.interferencePageSize,
      };
      this.$http({
        url: this.$http.adornUrl("/message/listEleInters"),
        method: "get",
        params: this.$http.adornParams(params),
      }).then(({ data }) => {
        if (data && data.code === 0) {
          this.interferenceData = data.page.list;
          this.interferenceTotalPage = data.page.totalCount;
        } else {
          this.interferenceData = [];
          this.interferenceTotalPage = 0;
        }
        // this.dataListLoading = false;
      });
    },
    // 电子干扰数据每页数
    interferenceSizeChangeHandle(val) {
      this.interferencePageSize = val;
      this.interferencePageIndex = 1;
      this.getInterferenceMessage();
    },
    // 电子干扰数据当前页
    interferenceCurrentChangeHandle(val) {
      this.interferencePageIndex = val;
      this.getInterferenceMessage();
    },
    //获取其他数据
    getOtherMessage(){
      const params = {
        page: this.otherPageIndex,
        limit: this.otherPageSize,
      };
      this.$http({
        url: this.$http.adornUrl("/message/listComInts"),
        method: "get",
        params: this.$http.adornParams(params),
      }).then(({ data }) => {
        if (data && data.code === 0) {
          this.otherData = data.page.list;
          this.otherTotalPage = data.page.totalCount;
        } else {
          this.otherData = [];
          this.otherTotalPage = 0;
        }
        // this.dataListLoading = false;
      });
    },
    // 其他数据每页数
    otherSizeChangeHandle(val) {
      this.otherPageSize = val;
      this.otherPageIndex = 1;
      this.getOtherMessage();
    },
    // 其他数据当前页
    otherCurrentChangeHandle(val) {
      this.otherPageIndex = val;
      this.getOtherMessage();
    },
  }
};
</script>

<style scoped>
.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both;
}

.box-card {
  width: 480px;
}
</style>