路径规划，底图切换

Surpriseplus

2022-10-25 6e0ef2d1f836680e6a55b7fc2d813b759038c144

路径规划，底图切换

 public/SmartEarthSDK/Workers/image/end.png

 public/SmartEarthSDK/Workers/image/start.png

 public/config/config.js

@@ -1,5 +1,10 @@
//const BASE_URL = 'http://192.168.20.55:12316';

//var socketUrl = 'ws://192.168.20.55:12316/ws';
const BASE_URL = 'http://192.168.20.39:12316';
//webSocket 服务地址
var socketUrl = 'ws://192.168.20.39:12316/ws';

var gisUrl = 'http://183.162.245.49:3301';
var ifreamUrl = 'http://192.168.20.39:12306/';


 src/components/mapol.vue

@@ -1,17 +1,31 @@
<template>
  <div id="mapol"></div>
  <div id="mapol">
    <div
      @click="changeMenulayer"
      class="center CenDiv"
      :class="{ center1: centerFlag }"
    >
      <div
        id="cenBg"
        v-bind:class="{ active: isActive, menuLayer: isMenuLayer }"
      ></div>
    </div>
  </div>
</template>

<script>
import TileLayer from "ol/layer/Tile";
import XYZ from "ol/source/XYZ";
import Map from "ol/Map";
import View from "ol/View";
import { transform } from "ol/proj";
import TileLayer from 'ol/layer/Tile';
import XYZ from 'ol/source/XYZ';
import Map from 'ol/Map';
import View from 'ol/View';
import { transform } from 'ol/proj';
export default {
  name: "",
  name: '',
  data() {
    return {};
    return {
      isActive: true,
      isMenuLayer: false,
    };
  },
  mounted() {
    this.init2DMap();
@@ -20,23 +34,37 @@
    init2DMap() {
      var vectorLayer = new TileLayer({
        source: new XYZ({
          url: "http://wprd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}",
          url: 'http://wprd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}',
        }),
      });
      var imageLayer = new TileLayer({
        source: new XYZ({
          url: "http://wprd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=6&x={x}&y={y}&z={z}",
          url: 'http://wprd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=6&x={x}&y={y}&z={z}',
        }),
      });
      window.map = new Map({
        target: "mapol",
        target: 'mapol',
        layers: [imageLayer, vectorLayer],
        view: new View({
          center: transform([105.02, 34.9], "EPSG:4326", "EPSG:3857"),
          center: transform([105.02, 34.9], 'EPSG:4326', 'EPSG:3857'),
          zoom: 4,
          projection: "EPSG:3857",
          projection: 'EPSG:3857',
        }),
      });
    },
    changeMenulayer() {
      this.isActive = !this.isActive;
      this.isMenuLayer = !this.isMenuLayer;
      this.setLayerVisible();
    },
    setLayerVisible() {
      if (this.isActive == true) {
        map.getLayers().item(0).setVisible(false);
        map.getLayers().item(1).setVisible(true);
      } else {
        map.getLayers().item(0).setVisible(true);
        map.getLayers().item(1).setVisible(false);
      }
    },
  },
};
@@ -51,4 +79,54 @@
  padding: 0;
  position: relative;
}
.center {
  left: 1%;
}
.CenDiv {
  position: absolute;
  bottom: 1%;
  height: 40px;
  width: 60px;
  z-index: 101;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: 3px 3px 6px #666;
  border: 1px solid rgba(204, 204, 204, 0.76);
  border-radius: 5px;
  cursor: pointer;
}
.center1 {
  right: 1%;
}
.right {
  position: absolute;
  top: 50px;
  right: 0;
  width: 20%;
  height: calc(100% - 50px);

  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.CenDiv:hover {
  border: 1px solid #409eff;
}
.active {
  width: 100%;
  height: 100%;
  background: url('../assets/img/Layer/imgLayer2.png') no-repeat center;
  position: absolute;
  background-size: 100% 100%;
  border-radius: 5px;
}
.menuLayer {
  width: 100%;
  height: 100%;
  background: url('../assets/img/Layer/imgLayer1.png') no-repeat center;
  position: absolute;
  background-size: 100% 100%;
  border-radius: 5px;
}
</style>

 src/components/mapsdk.vue

@@ -103,10 +103,58 @@
        </div>
      </el-card>
    </div>
    <div class="pathAnalysisBox" v-if="showPathAnalysisBoxDialog">
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>路径分析</span>
          <div style="float: right; cursor: pointer">
            <i class="el-icon-close" @click="closeBufferBox(4)"></i>
          </div>
        </div>
        <div class="box-body">
          <el-form ref="form" :model="pathFrom" label-width="50px">
            <el-form-item label="经度:">
              <el-input style="width: 300px" v-model="pathFrom.lon"></el-input>
              <el-link
                :underline="false"
                @click="showMouseLeftClick(1)"
                style="margin-left: 10px"
                ><i style="color: white" class="el-icon-plus"></i
              ></el-link>
            </el-form-item>
            <el-form-item label="纬度:">
              <el-input style="width: 300px" v-model="pathFrom.lat"></el-input>
              <el-link
                :underline="false"
                @click="showMouseLeftClick(2)"
                style="margin-left: 10px"
                ><i style="color: white" class="el-icon-plus"></i
              ></el-link>
            </el-form-item>
            <el-form-item>
              <el-button @click="showMouseLeftClick(3)" type="info"
                >查询</el-button
              >
            </el-form-item>
          </el-form>
        </div>
      </el-card>
    </div>
    <div
      @click="changeMenulayer"
      class="center CenDiv"
      :class="{ center1: centerFlag }"
    >
      <div
        id="cenBg"
        v-bind:class="{ active: isActive, menuLayer: isMenuLayer }"
      ></div>
    </div>
  </div>
</template>

<script>
import $ from 'jquery';
import {
  select_Comprehensive_ByPageAndCount,
  select_Comprehensive_SelectWktById,
@@ -119,7 +167,12 @@
      showBufferBoxDialog: false,
      showCoordLocalBoxDialog: false,
      showToponymicLocalBoxDialog: false,
      showPathAnalysisBoxDialog: false,
      comprehensive: {},
      pathFrom: {
        lon: '116.086746,39.937314',
        lat: '116.086000,39.936289',
      },
      bufFrom: {
        val: 50,
      },
@@ -136,6 +189,13 @@
      count: 0,
      tableData: [],
      imagePoint: null,
      handler: null,
      pathStart: null,
      pathEnd: null,
      pathData: null,

      isActive: false,
      isMenuLayer: true,
    };
  },
  mounted() {
@@ -146,29 +206,70 @@
  },
  methods: {
    init3DMap() {
      var webKey = '94a34772eb88317fcbf8428e10448561';

      //地图初始化
      window.sgworld = new SmartEarth.SGWorld('mapdiv', {
        licenseServer: window.sceneConfig.licenseServer,
      });

      window.Viewer = window.sgworld._Viewer;

      //定位
      // sgworld.Navigate.jumpTo({
      //   //跳转视角
      //   destination: new Cesium.Cartesian3.fromDegrees(110, 32, 8000000),
      // });
      sgworld.Navigate.jumpTo({
        //跳转视角
        destination: {
          x: 311837.3471863137,
          y: 5628280.936629815,
          z: 2992581.921482893,
        },
        orientation: {
          heading: 2.5028896264234364,
          pitch: -0.2201285642360813,
          roll: 0.0,
        },
        destination: new Cesium.Cartesian3.fromDegrees(
          116.055913,
          39.937685,
          8000
        ),
      });
      Viewer.imageryLayers.addImageryProvider(
        new Cesium.WebMapTileServiceImageryProvider({
          url: 'http://t0.tianditu.com/vec_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=vec&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default&format=tiles&tk=94a34772eb88317fcbf8428e10448561',
          layer: 'tdtVecBasicLayer',
          style: 'default',
          format: 'image/jpeg',
          tileMatrixSetID: 'GoogleMapsCompatible',
          show: false,
        })
      );

      Viewer.imageryLayers.addImageryProvider(
        new Cesium.WebMapTileServiceImageryProvider({
          url: 'http://t0.tianditu.com/img_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=img&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default&format=tiles&tk=94a34772eb88317fcbf8428e10448561',
          layer: 'tdtBasicLayer',
          style: 'default',
          format: 'image/jpeg',
          tileMatrixSetID: 'GoogleMapsCompatible',
          show: false,
        })
      );
      Viewer.imageryLayers.addImageryProvider(
        new Cesium.WebMapTileServiceImageryProvider({
          url: 'http://t0.tianditu.com/cva_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=cva&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default.jpg&tk=94a34772eb88317fcbf8428e10448561',
          layer: 'tdtAnnoLayer',
          style: 'default',
          format: 'image/jpeg',
          tileMatrixSetID: 'GoogleMapsCompatible',
        })
      );

      // sgworld.Navigate.jumpTo({
      //   //跳转视角
      //   destination: {
      //     x: 311837.3471863137,
      //     y: 5628280.936629815,
      //     z: 2992581.921482893,
      //   },
      //   orientation: {
      //     heading: 2.5028896264234364,
      //     pitch: -0.2201285642360813,
      //     roll: 0.0,
      //   },
      // });

      // Viewer.scene.globe.depthTestAgainstTerrain = true;
      Viewer._enableInfoOrSelection = false;
      //显示fps
      Viewer.scene.debugShowFramesPerSecond = false;
@@ -197,9 +298,23 @@
        layerName: window.sceneConfig.mpt.name,
        requestVertexNormals: true,
      };
      sgworld.Creator.sfsterrainprovider('mpt', option, '', true, '');
      // sgworld.Creator.sfsterrainprovider('mpt', option, '', true, '');
      window.elevationTool = new SmartEarth.ElevationTool(window.sgworld);
      //模型加载
    },

    changeMenulayer() {
      this.isActive = !this.isActive;
      this.isMenuLayer = !this.isMenuLayer;
      this.setLayerVisible();
    },
    setLayerVisible() {
      if (this.isActive == true) {
        Viewer.imageryLayers.get(1).show = true;
        Viewer.imageryLayers.get(2).show = false;
      } else {
        Viewer.imageryLayers.get(1).show = false;
        Viewer.imageryLayers.get(2).show = true;
      }
    },
    //显示弹窗
    showChangeBox(res) {
@@ -215,6 +330,10 @@
        } else if (res.id == '2') {
          this.showToponymicLocalBoxDialog = true;
          this.getToponymicData();
        }
      } else if (res.name == 'Analysis') {
        if (res.id == '3') {
          this.showPathAnalysisBoxDialog = true;
        }
      }
    },
@@ -292,6 +411,11 @@
            this.imagePoint = null;
          }
          break;
        case 4:
          this.showPathAnalysisBoxDialog = false;
          this.clearPathAll(3);

          break;
      }
    },
    //定位
@@ -355,6 +479,168 @@
          break;
      }
    },
    showMouseLeftClick(res) {
      if (res == 3) {
        if (this.linePath != null) {
          this.clearPathAll(3);
        }

        var jsonurl =
          'http://192.168.20.39:9055/gisserver/wnsserver/beijingdaohang_wns?start=' +
          this.pathFrom.lon +
          '&end=' +
          this.pathFrom.lat +
          '&propertyName=Shape&tolerance=500&request=FindPath&format=json';
        $.ajax({
          url: jsonurl,
          async: false,
          type: 'GET',
          dataType: 'json',
          contentType: 'application/json;charset=utf-8',
          success: (data) => {
            this.executeFly3D(data);
          },
        });
      } else {
        var that = this;
        if (this.handler != null) {
          this.clearLeftClick();
        }
        this.handler = new Cesium.ScreenSpaceEventHandler(Viewer.scene.canvas);
        this.handler.setInputAction(function (event) {
          let cartesian = Viewer.camera.pickEllipsoid(event.position);
          let cartographic = Cesium.Cartographic.fromCartesian(cartesian);
          let lng = parseFloat(
            Cesium.Math.toDegrees(cartographic.longitude)
          ).toFixed(6); // 经度
          let lat = parseFloat(
            Cesium.Math.toDegrees(cartographic.latitude)
          ).toFixed(6); // 纬度
          if (that.linePath != null) {
            that.clearPathAll(3);
          }
          if (lng != null && lat != null) {
            let val = lng + ',' + lat;
            var position = sgworld.Creator.CreatePosition(lng, lat, 0);
            if (res == 1) {
              if (that.pathStart != null) {
                that.clearPathAll(1);
              }

              that.pathStart = sgworld.Creator.CreateLabel(
                position,
                '',
                SmartEarthRootUrl + 'Workers/image/start.png',
                {
                  // 文本偏移量
                  pixelOffset: {
                    x: 0,
                    y: -50,
                  }, // 无视遮挡
                  disableDepthTestDistance: Infinity,
                  scale: 0.8,
                },
                0,
                '起始点'
              );

              that.pathFrom.lon = val;
            } else if (res == 2) {
              if (that.pathEnd != null) {
                that.clearPathAll(2);
              }

              that.pathEnd = sgworld.Creator.CreateLabel(
                position,
                '',
                SmartEarthRootUrl + 'Workers/image/end.png',
                {
                  // 文本偏移量
                  pixelOffset: {
                    x: 0,
                    y: -50,
                  }, // 无视遮挡
                  disableDepthTestDistance: Infinity,
                  scale: 0.8,
                },
                0,
                '结束点'
              );
              that.pathFrom.lat = val;
            }
            that.clearLeftClick();
          }
        }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
      }
    },
    clearPathAll(res) {
      switch (res) {
        case 1:
          if (this.pathStart != null) {
            sgworld.Creator.DeleteObject(this.pathStart);
            this.pathStart = null;
          }
          break;
        case 2:
          if (this.pathEnd != null) {
            sgworld.Creator.DeleteObject(this.pathEnd);
            this.pathEnd = null;
          }
          break;
        case 3:
          if (this.pathStart != null) {
            sgworld.Creator.DeleteObject(this.pathStart);
            this.pathStart = null;
          }

          if (this.pathEnd != null) {
            sgworld.Creator.DeleteObject(this.pathEnd);
            this.pathEnd = null;
          }
          if (this.linePath != null) {
            sgworld.Creator.DeleteObject(this.linePath);
            this.linePath = null;
          }
          break;
        case 4:
          if (this.linePath != null) {
            sgworld.Creator.DeleteObject(this.linePath);
            this.linePath = null;
          }
          break;
      }
    },
    clearLeftClick() {
      this.handler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_CLICK); //移除事件
      this.handler = null;
    },
    executeFly3D(res) {
      var position = [];
      if (res) {
        var positionA = res.features;
        if (positionA.length > 0) {
          for (var i = 0; i < positionA.length; i++) {
            var val = positionA[i];
            if (val.geometry.type == 'LineString') {
              var val_data = val.geometry.coordinates;
              for (var j = 0; j < val_data.length; j++) {
                position.push({ x: val_data[j][0], y: val_data[j][1] });
              }
            }
          }
          this.linePath = sgworld.Creator.createPolyline(
            position,
            '#ffff00',
            1,
            0,
            '线'
          );
          sgworld.Navigate.flyToObj(this.linePath);
        } else {
          return;
        }
      }
    },
  },
};
</script>
@@ -371,6 +657,15 @@
.bufferBox {
  width: 412px;
  height: 230px;
  z-index: 40;
  position: absolute;
  right: 1%;
  bottom: 1%;
}

.pathAnalysisBox {
  width: 412px;

  z-index: 40;
  position: absolute;
  right: 1%;
@@ -445,4 +740,54 @@
::v-deep .el-pagination__jump {
  color: white;
}
.center {
  left: 1%;
}
.CenDiv {
  position: absolute;
  bottom: 1%;
  height: 40px;
  width: 60px;
  z-index: 101;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: 3px 3px 6px #666;
  border: 1px solid rgba(204, 204, 204, 0.76);
  border-radius: 5px;
  cursor: pointer;
}
.center1 {
  right: 1%;
}
.right {
  position: absolute;
  top: 50px;
  right: 0;
  width: 20%;
  height: calc(100% - 50px);

  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.CenDiv:hover {
  border: 1px solid #409eff;
}
.active {
  width: 100%;
  height: 100%;
  background: url('../assets/img/Layer/imgLayer2.png') no-repeat center;
  position: absolute;
  background-size: 100% 100%;
  border-radius: 5px;
}
.menuLayer {
  width: 100%;
  height: 100%;
  background: url('../assets/img/Layer/imgLayer1.png') no-repeat center;
  position: absolute;
  background-size: 100% 100%;
  border-radius: 5px;
}
</style>

 src/views/AuthorizationManagement/menuRoleAuthorization.vue

@@ -20,6 +20,7 @@
          node-key="id"
          @check="treeCheck"
          ref="treeForm"
          :default-expanded-keys="[1]"
        >
        </el-tree>
      </div>

 src/views/AuthorizationManagement/roleMenuAuthorization.vue

@@ -20,7 +20,7 @@
            style="width: 300px"
            v-model="selFrom.name"
            placeholder="请选择单位名称..."
            @change="chooseCustom"
            @change="chooseCustom('multiSelect')"
          >
            <el-option
              :value="selectTree"
@@ -36,6 +36,7 @@
                node-key="id"
                ref="treeForm"
                @node-click="addAdminHandleNodeClick"
                :default-expanded-keys="[1]"
              >
              </el-tree>
            </el-option>
@@ -125,6 +126,7 @@
          node-key="id"
          @check="menuTreeCheck"
          ref="treeForm"
          :default-expanded-keys="[1]"
        >
        </el-tree>
      </div>
@@ -344,6 +346,7 @@
      this.depid = e.id;
      this.selFrom.name = e.name;
      this.selectTree = e.name;
      this.chooseCustom('multiSelect');
      this.getRoleDep();
      this.getMenuTree();
    },
@@ -353,6 +356,10 @@
        this.menuid = node.id;
        this.rolMenuListData.roleid = this.roleid;
        this.getRoleMenu();
        if (list.checkedKeys.length == 2) {
          //单选实现
          this.$refs.treeForm.setCheckedKeys([node.id]);
        }
      } else {
        this.menuid = null;
      }
@@ -392,10 +399,20 @@
      );
    },
    //下拉框选中后自动关闭
    chooseCustom() {
      setTimeout(() => {
        this.$refs.multiSelect.blur();
    chooseCustom(refName) {
      // this.$refs[refName] && this.$refs[refName].blur();
      this.createTimer(this.autoCloseSelect, refName);
    },
    createTimer(callback, refName) {
      const timer = setTimeout(() => {
        callback(refName);
      }, 50);
      this.$once('hook:beforeDestroy', () => {
        clearInterval(timer);
      });
    },
    autoCloseSelect(refName) {
      this.$refs[refName] && this.$refs[refName].blur();
    },
    dephandleSizeChange() {
      this.roleDepListData.pageSize = val;

 src/views/AuthorizationManagement/roleResAuthorization.vue

@@ -19,6 +19,7 @@
          node-key="id"
          @check="treeCheck"
          ref="treeForm"
          :default-expanded-keys="[1]"
        >
        </el-tree>
      </div>

 src/views/AuthorizationManagement/userRoleAuthorization.vue

@@ -18,6 +18,7 @@
          :check-strictly="true"
          node-key="id"
          @check="treeCheck"
          :default-expanded-keys="[1]"
          ref="treeForm"
        >
        </el-tree>
@@ -379,7 +380,7 @@
    treeCheck(node, list) {
      //node 该节点所对应的对象、list 树目前的选中状态对象
      //选中事件在选中后执行，当lis中有两个选中时，使用setCheckedKeys方法，选中一个节点
      console.log(node, list);

      if (list.checkedNodes.length > 0) {
        this.listData.depid = node.id;
        this.debid = node.id;

 src/views/Synthesis/analyse.vue

@@ -17,6 +17,7 @@
</template>

<script>
import $ from 'jquery';
// 测量-信息弹窗
import mapinfo from '../Tools/mapinfo.vue';
export default {
@@ -94,6 +95,34 @@
          }
          elevationTool.render();
          break;
        case '3':
          var value = {
            name: 'Analysis',
            id: 3,
          };
          this.$bus.$emit('mapChangeBox', value);
          // var jsonurl =
          //   'http://192.168.20.39:9055/gisserver/wnsserver/beijingdaohang_wns?start=' +
          //   '116.0867468497,39.937314280233' +
          //   '&end=' +
          //   '116.0860003269,39.936289981725' +
          //   '&propertyName=Shape&tolerance=500&request=FindPath&format=json';
          // $.ajax({
          //   url: jsonurl,
          //   async: false,
          //   type: 'GET',
          //   dataType: 'json',
          //   contentType: 'application/json;charset=utf-8',
          //   success: (data) => {
          //     data.features.forEach((e) => {
          //       if (e.geometry.type == 'LineString') {
          //         //this.executeFly3D(e.geometry.coordinates);
          //         this.executeFly3D(e.geometry.coordinates);
          //       }
          //     });
          //   },
          // });
          break;
        case '4':
          if (window.AnalysisDXPM) {
            this.clear(res.id);

 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);
      }
    };
  },