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

<template>
  <el-row style="height: 100%" :gutter="10">
    <el-col :span="18" style="height: 100%">
      <el-row style="height: 66%" :gutter="10">
        <el-col :span="8" style="height: 100%">
          <el-card class="tableHeight">
            <div slot="header" class="clearfix">
              <span>网络组参数设置</span>
              <el-select  v-model="selectedGroupId" size="mini" style="width: 40%;float: right;background-color: #8CC0FB;"
              @change="selectChange">
                    <el-option v-for="item in networkGroupList"
                               :key="item.id"
                               :label="item.name"
                               :value="item.id"/>
                  </el-select>
            </div>
            <el-table height="90%" :data="Params" style="width: 100%;overflow-y: auto"  fit size="mini">
              <el-table-column width="80" prop="key" label="属性"></el-table-column>
              <el-table-column width="80" prop="value" label="值"></el-table-column>
              <el-table-column label="操作" align="center">
                <template slot-scope="scope">
                  <el-switch v-if="scope.row.key === '链路开关'" active-text="开" inactive-text="关"
                    v-model="linkVUProps.linkSwitchBoolean" :change="switchChange()">
                  </el-switch>
                  <el-switch v-if="scope.row.key === '静默状态'" active-text="非静默" inactive-text="静默"
                    v-model="linkVUProps.linkSilentBoolean" :change="switchChange()">
                  </el-switch>
                  <el-select v-if="scope.row.key === '通信速率'" v-model="linkVUProps.linkSpeed" size="mini"
                    placeholder="选择速率">
                    <el-option v-for="item in linkVUSpeedOptions" :key="item.value" :label="item.label"
                      :value="item.label"></el-option>
                  </el-select>
                  <el-select v-if="scope.row.key === '传输模式'" v-model="linkVUProps.linkQuality" size="mini"
                    placeholder="选择质量">
                    <el-option v-for="item in linkVUQualityOptions" :key="item.value" :label="item.label"
                      :value="item.label"></el-option>
                  </el-select>
                </template>
              </el-table-column>
            </el-table>
            <div >
              <el-button size="mini" type="success" style="float: right"
                         :disabled="!editable">修改参数</el-button>
              <el-button size="mini" type="info" style="float: right"
                         :disabled="editable()"
                         @click="getParams"
              >刷新</el-button>
            </div>
          </el-card>
        </el-col>
        <el-col :span="16" style="height: 100%">
          <el-card class="radar" border>
            <div slot="header" class="clearfix" >
              <span>通信状态显示</span>
            </div>
            <div class="echarts-box">
              <div ref="chart" id="radarEchart"></div>
            </div>
          </el-card>
        </el-col>
      </el-row>
      <el-row style="height: calc(34% - 6px); margin-top: 6px;" :gutter="10">
        <el-card class="box-card">
          <div slot="header" class="clearfix" style="height: 28px">
            <span>已接收消息</span>
          </div>
          <el-table :data="receivedMessage"   size="mini" height="tableHeight">
            <el-table-column prop="time" label="时间"></el-table-column>
            <el-table-column prop="translation" label="传输双方" ></el-table-column>
            <el-table-column prop="type" label="主题"></el-table-column>
            <el-table-column prop="status" label="状态" width="150">
            </el-table-column>
          </el-table>
        </el-card>
      </el-row>
    </el-col>
    <el-col :span="6" style="height: 100%;overflow-y: auto">
      <el-row style="height: calc(36%)">
        <el-card class="box-card">
          <div slot="header" class="clearfix" style="height: 28px">
            <span>已发送消息</span>
          </div>
          <el-table :data="sendMessage" fit size="mini" height="sendMessageHeight">
            <el-table-column width="80" prop="time" label="时间"></el-table-column>
            <el-table-column width="90" prop="translation" label="传输双方"></el-table-column>
            <el-table-column prop="type" label="主题"></el-table-column>
            <el-table-column width="60" prop="status" label="状态"></el-table-column>
          </el-table>
        </el-card>
      </el-row>
      <el-row style="height: calc(64% - 6px); margin-top: 6px;">
        <el-card class="target">
          <div slot="header" class="clearfix" style="height: 28px">
            <span>成员列表</span>
          </div>
          <el-table height="tableHeight" :data="members" border fit size="mini">
            <el-table-column prop="id" label="平台ID"> </el-table-column>
            <el-table-column prop="isOnline" label="是否在网"> </el-table-column>
            <el-table-column prop="status" label="静默状态"> </el-table-column>
            <el-table-column prop="linkModel" label="连接方式"> </el-table-column>
          </el-table>
        </el-card>
      </el-row>
    </el-col>
  </el-row>
</template>

<script>
import {Message} from "element-ui";
export default {
  data() {
    return {
      selectedGroupId: null,
      selectedGroup: null,
      networkGroupList: [],

      chartInstance: null,
      nodes: [],
      edges: [],

      sendMessage: [],
      receivedMessage: [],
      members: [],

      tableHeight: "calc(100vh - 30px)",

      Params: [{
        key: "链路开关",
        value: "开"
      },
        {
          key: "静默状态",
          value: "非静默"
        },
        {
          key: "通信速率",
          value: "速率1"
        },
        {
          key: "传输模式",
          value: "模式1"
        }
      ],
      linkVUProps: {
        linkSwitch: 1,
        linkSilent: 1,
        linkSwitchBoolean: true,
        linkSilentBoolean: true,
        linkSpeed: null,
        platInfo: null,
        linkEdit: null,
        linkQuality: null,
      },
      linkJProps: {
        WorkMode: 1,
        WireLessStatus: 1,
        WorkModeBoolean: true,
        WireLessStatusBoolean: true,
        PlatType: null,
      },
      linkVUSpeedOptions: [
        {value: 0, label: "无报告"},
        {value: 1, label: "2.4kbps"},
        {value: 2, label: "4.8kbps"},
        {value: 3, label: "6.4kbps"},
        {value: 4, label: "128kbps"},
        {value: 5, label: "256kbps"},
        {value: 6, label: "512kbps"},
        {value: 7, label: "1Mbps"},
        {value: 8, label: "2Mbps"},
      ],
      linkVUQualityOptions: [
        {value: 1, label: "可靠性"},
        {value: 2, label: "实时性"},
      ],
    };
  },
  created() {
  },
  activated() {
    this.init();
  },
  deactivated() {
    if(this.interval){
      clearInterval(this.interval)
    }
  },
  mounted() {
    this.init();
    // 页面加载设置高度自适应
    window.onresize = () => {
      this.resizeDom();
    };
    // 页面加载设置高度自适应
    this.resizeDom();
    this.interval=setInterval(this.fetchData, 5000)
  },
  methods: {
    async init() {
      await this.getNetworkGroupList();
      this.initGroup()
      if (this.selectedGroupId != null) {
        this.initChart()
        this.initSend()
        this.initReceived()
        this.initMembers()
        this.getParams()
      }
    },
    initGroup() {
      let flag = true;
      if (this.selectedGroupId !== 0) {
        for (let i = 0; i < this.networkGroupList.length; i++) {
          if (this.selectedGroupId === this.networkGroupList[i].id) {
            flag = false;
            this.selectedGroup = this.networkGroupList[i]
          }
        }
        if (flag) {
          this.selectedGroupId = null;
          this.selectedGroup = null;
        }
      }
    },
    selectChange() {
      for (let i = 0; i < this.networkGroupList.length; i++) {
        if (this.selectedGroupId === this.networkGroupList[i].id) {
          this.selectedGroup = this.networkGroupList[i];
          break
        }
      }
      this.initChart();
      this.initSend();
      this.initReceived();
      this.initMembers();
    },
    getNetworkGroupList() {
      this.$http({
        url: this.$http.adornUrl("/communication/getNetworkGroups"),
        method: "get",
      }).then(({data}) => {
        if (data && data.code === 0) {
          this.networkGroupList = data.data;
          if (this.networkGroupList.length === 0) {
            Message.info("暂未设置网络组信息")
          }
        } else {
          this.networkGroupList = [];
          Message.error("无法获取网络组信息")
        }
      })
    },
    editable() {
      return this.selectedGroupId === 0;
    },
    fetchData(){
      if(this.selectedGroupId!=null){
        this.initMembers();
        this.initChart();
        this.initSend();
        this.initReceived();
      }
    },
    initChart() {
      this.$http({
        url: this.$http.adornUrl("/communication/getChart?id=" + this.selectedGroupId),
        method: "get",
      }).then(({data}) => {
        if (data && data.code === 0) {
          this.nodes = data.nodes;
          this.edges = data.edges;
          if (this.chartInstance == null) {
            this.createChartInstance(this.$refs.chart);
          }
          this.chartInstance.setOption({
            series: [{
              data: this.nodes,
              links: this.edges,
            }]
          })
        }
      })
    },
    initSend() {
      this.$http({
        url: this.$http.adornUrl("/communication/getSendMessage?id=" + this.selectedGroupId),
        method: "get",
      }).then(({data}) => {
        if (data && data.code === 0) {
          this.sendMessage = data.data;
        }
      })
    },
    initReceived() {
      this.$http({
        url: this.$http.adornUrl("/communication/getSendMessage?id=" + this.selectedGroupId),
        method: "get",
      }).then(({data}) => {
        if (data && data.code === 0) {
          this.receivedMessage = data.data;
        }
      })
    },
    initMembers(){
      this.$http({
        url: this.$http.adornUrl("/communication/getMembers?id=" + this.selectedGroupId),
        method: "get",
      }).then(({data}) => {
        if (data && data.code === 0) {
          this.members = data.data;
        }
      })
    },
    getParams(){},
    createChartInstance(dom) {
      this.chartInstance = this.$echarts.init(dom)
      const chartOption = {
        title: {},
        animation: true,
        series: [
          {
            type: "graph",
            layout: "force",
            symbolSize: 30,
            roam: true,
            label: {
              show: true,
            },
            edgeSymbol: ["circle"],
            edgeSymbolSize: [4, 10],
            edgeLabel: {
              fontSize: 12,
            },
            emphasis: {
              focus: "adjacency",
              lineStyle: {
                width: 10,
              },
            },
            force: {
              repulsion: 1000,
              edgeLength: [10, 50],
            },
            draggable: true,
            cursor: "pointer",
            lineStyle: {
              opacity: 0.9,
              width: 2,
              curveness: 0.2,
            },
          },
        ],
      };

      this.chartInstance.setOption(chartOption)
    },
    //通过窗体高宽计算容器高宽，渲染echart图表的div的宽高度以达到自适应目的
    resizeDom() {
      const boxHeight =
          document.getElementsByClassName("echarts-box")[0].clientHeight;
      var Echart = document.getElementById("radarEchart");
      Echart.style.height = boxHeight - 65 + "px";
      this.$echarts.init(document.getElementById("radarEchart")).resize();
    },
    //变更参数
    handleEdit() {
      console.log("aaa")
    },
    switchChange() {
      if (this.currentLink === 1) {
        this.linkVUProps.linkSilent =
            this.linkVUProps.linkSilentBoolean == true ? 1 : 0;
        this.linkVUProps.linkSwitch =
            this.linkVUProps.linkSwitchBoolean == true ? 1 : 0;
      } else if (this.currentLink === 2) {
        this.linkJProps.WireLessStatus =
            this.linkJProps.WireLessStatusBoolean == true ? 1 : 0;
        this.linkJProps.WorkMode =
            this.linkJProps.WorkModeBoolean == true ? 1 : 2;
      }
    },
  }
}

</script>
<style scoped>

.echarts-box {
  height: 100%;
  width: 100%;
}

.radar {
  height: 100%;
}
</style>