路径规划，底图切换

Surpriseplus

2022-10-25 6e0ef2d1f836680e6a55b7fc2d813b759038c144

 src/views/maintenance/systemMonitoring.vue

@@ -12,13 +12,7 @@
        <div class="top_box">
          <div style="width: 100%; height: 100%">
            <div
              style="
                width: 30%;
                height: 100%;

                float: left;
                margin-left: 20%;
              "
              style="width: 30%; height: 100%; float: left; margin-left: 20%"
            >
              <div class="Syslabel">
                <p style="line-height: 25px">
@@ -94,10 +88,50 @@
      </div> -->
    </div>
    <div class="chart_box">
      <p class="title_box">
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane
          :label="$t('operatManage.systemMonitoringObj.abnormalResources')"
          name="first"
          ><el-table :data="resInfo" style="width: 100%">
            <el-table-column
              prop="id"
              :label="$t('operatManage.systemMonitoringObj.resourceID')"
            >
            </el-table-column>
            <el-table-column
              prop="name"
              :label="$t('operatManage.systemMonitoringObj.resourceName')"
            >
            </el-table-column>
            <el-table-column
              prop="bak"
              :label="$t('operatManage.systemMonitoringObj.resourceState')"
            >
            </el-table-column>
            <el-table-column
              prop="createTime"
              :label="$t('operatManage.systemMonitoringObj.abnormaltime')"
              show-overflow-tooltip
            >
            </el-table-column> </el-table
        ></el-tab-pane>
        <el-tab-pane label="服务资源状态" name="second">
          <div id="resUseChart" style="width: 1515px; height: 243px"></div>
        </el-tab-pane>
        <el-tab-pane label="用户登录状态" name="third">
          <div id="userLoginChart" style="width: 1515px; height: 243px"></div>
        </el-tab-pane>
        <el-tab-pane label="资源操作状态" name="fourth"
          ><div
            id="operateCountChart"
            style="width: 1515px; height: 243px"
          ></div
        ></el-tab-pane>
      </el-tabs>
      <!-- <p class="title_box">
        {{ $t('operatManage.systemMonitoringObj.abnormalResources') }}
      </p>
      <el-table :data="resInfo" style="width: 100%">
      </p> -->
      <!-- <el-table :data="resInfo" style="width: 100%">
        <el-table-column
          prop="id"
          :label="$t('operatManage.systemMonitoringObj.resourceID')"
@@ -119,7 +153,7 @@
          show-overflow-tooltip
        >
        </el-table-column>
      </el-table>
      </el-table> -->
      <!-- <div style="margin-top: 10px" class="pagination_box">
        <el-pagination
          @size-change="handleSizeChange"
@@ -190,6 +224,7 @@
  data() {
    //这里存放数据
    return {
      activeName: 'first',
      ws: null,
      tableData: [],
      memInfo: { totalMem: 0, use: 0, usage: 0 },
@@ -197,6 +232,9 @@
      resInfo: [],
      resInfoCount: 0,
      echartData: [],
      resUseCount: {},
      userLoginCount: [],
      operateCount: [],
    };
  },
  //方法集合
@@ -216,6 +254,29 @@
    SetTableData2(res) {
      this.resInfo = res.resInfo;
      this.resInfoCount = res.resInfo.length;
    },
    SetTableData3(res) {
      this.resUseCount = res.resUseCount;
      this.operateCount = res.operateCount.operateCount;
      this.userLoginCount = res.userLoginCount.userLoginCount;
      this.lineChart3();
      this.lineChart4();
      this.lineChart5();
    },
    handleClick(tab, event) {
      switch (tab) {
        case 'first':
          break;
        case 'second':
          this.lineChart3();
          break;
        case 'third':
          this.lineChart4();
          break;
        case 'fourth':
          this.lineChart5();
          break;
      }
    },
    lineChart1() {
      let option = {
@@ -258,7 +319,7 @@
    },
    lineChart2(res) {
      var a = res.split('%').join('');
      console.log(a);

      let value = parseFloat(a);
      let data = [value, value, value];
      let option = {
@@ -396,8 +457,156 @@
      let myChart1 = this.$echarts.init(document.getElementById('shuiwen'));
      myChart1.setOption(option);
      window.addEventListener('resize', function () {
        myChart.resize();
        myChart1.resize();
      });
    },
    lineChart3() {
      var data = [
        { name: '可用资源', value: this.resUseCount.resAbleCount },
        { name: '不可用资源', value: this.resUseCount.resUnableCount },
      ];
      var option = {
        tooltip: {
          trigger: 'item',
        },
        legend: {
          top: '5%',
          left: 'center',
        },
        series: [
          {
            name: ' ',
            type: 'pie',
            radius: ['40%', '70%'],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 10,
              borderColor: '#fff',
              borderWidth: 2,
            },
            label: {
              show: false,
              position: 'center',
            },
            emphasis: {
              label: {
                show: true,
                fontSize: '40',
                fontWeight: 'bold',
              },
            },
            labelLine: {
              show: false,
            },
            data: data,
          },
        ],
      };
      let myChart2 = this.$echarts.init(document.getElementById('resUseChart'));
      myChart2.setOption(option);
      window.addEventListener('resize', function () {
        myChart2.resize();
      });
    },
    lineChart4() {
      var data1 = [];
      var data2 = [];
      for (var i in this.userLoginCount) {
        data1.push(this.userLoginCount[i].optime);
        data2.push(this.userLoginCount[i].count);
      }

      var option = {
        title: {
          show: false,
        },
        tooltip: {
          trigger: 'axis',
        },
        legend: {
          show: false,
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true,
        },
        toolbox: {
          feature: {
            saveAsImage: {},
          },
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: data1,
        },
        yAxis: {
          type: 'value',
        },
        series: [
          {
            name: '',
            type: 'line',
            stack: 'Total',
            data: data2,
          },
        ],
      };
      let myChart3 = this.$echarts.init(
        document.getElementById('userLoginChart')
      );
      myChart3.setOption(option);
    },
    lineChart5() {
      var data1 = [];
      var data2 = [];
      for (var i in this.operateCount) {
        data1.push(this.operateCount[i].modular2);
        data2.push(this.operateCount[i].count);
      }

      var option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow',
          },
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true,
        },
        xAxis: [
          {
            type: 'category',
            data: data1,
            axisTick: {
              alignWithLabel: true,
            },
          },
        ],
        yAxis: [
          {
            type: 'value',
          },
        ],
        series: [
          {
            name: 'Direct',
            type: 'bar',
            barWidth: '60%',
            data: data2,
          },
        ],
      };
      let myChart4 = this.$echarts.init(
        document.getElementById('operateCountChart')
      );
      myChart4.setOption(option);
    },
  },
  created() {
@@ -408,17 +617,20 @@
      };
      Window.ws = null;
    }
    Window.ws = new WebSocket('ws://192.168.20.55:12316/ws');

    Window.ws = new WebSocket(socketUrl);
    Window.ws.option = () => {};
    var that = this;
    Window.ws.onmessage = (msg) => {
      // console.log('来自服务器端的数据：' + msg.data); //监听接受来自服务端的信息
      var data = JSON.parse(msg.data);

      if (data.resInfo == undefined) {
      console.log(data);
      if (data.userInfo != undefined) {
        that.SetTableData1(data);
      } else {
      } else if (data.resInfo != undefined) {
        that.SetTableData2(data);
      } else if (data.operateCount != undefined) {
        that.SetTableData3(data);
      }
    };
  },