1

Surpriseplus

2023-01-18 dd1f65280f3348506bc54a1022fd8572b6ba4eff

1

 public/LfSKyline/index.html

@@ -18,7 +18,6 @@
    window.app = {
      fly: window.sceneConfig.fly,
      mainUrl: location.href.substring(0, location.href.lastIndexOf("/") + 1)

    }
    document.writeln("<link href='./layui-v2.6.8/css/layui.css?" + new Date().getTime() + "' rel='stylesheet' \/>");
    document.writeln("<link href='./css/index.css?" + new Date().getTime() + "' rel='stylesheet' \/>");

 public/LfSKyline/js/index.js

@@ -21,6 +21,9 @@
    initSG: function () {
        SG = TEWinEx.CreateInstance("TerraExplorerX.SGWorld74"); // SGWorld74,SGWorld71,SGWorld66
        SG.AttachEvent("OnLoadFinished", this.loadFinished);

            

        SG.Open(app.fly);
    },
    loadFinished: function () {

 public/config/config.js

@@ -1,50 +1,47 @@
// var ipConfig =  location.hostname;
var ipConfig = '192.168.20.205';
var isWeb = location.hostname.indexOf("103.85.165.") > -1;
 
var webHost = isWeb ? location.hostname + ":8052" : '192.168.20.205' + ":8088";

var fmeHost = isWeb ? location.hostname + ":8051" : '192.168.20.205' + ":88";

var iisHost = isWeb ? location.hostname + ":8050" : '192.168.20.205' + ":80";

var menuStartName = "管道基础大数据平台";

var LFData = "http://" + ipConfig + "/LFData";
var LFData = "http://" + iisHost + "/LFData";

var BASE_URL = 'http://' + ipConfig + ':8088/server';
var BASE_URL = 'http://' + webHost + '/server';

//webSocket æœåŠ¡åœ°å€
var socketUrl = 'ws://' + ipConfig + ':8088/server/ws/select';
// WebSocket æœåŠ¡åœ°å€
var socketUrl = 'ws://' + webHost + '/server/ws/select';

//数据库监控地址
var sql_Url = 'http://' + ipConfig + ':8081/admin/druid/sql.html';
// GeoServerUrl
var geoServerURl = '/geoserver/LF/wms';

//路径分析地址
var wnsUrl = 'http://' + ipConfig + ':9055/gisserver/wnsserver/beijingdaohang_wns';
var geoserverWFS = '/geoserver/LF/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=LF%3Abs_project&maxFeatures=50&outputFormat=application%2Fjson&cql_filter=projname=';

//gisserver
var gisServerUrl = 'http://' + ipConfig + ':9055/gisserver';
var geoserverWFSLine = '/geoserver/LF/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=LF%3Am_pipeline&maxFeatures=50&outputFormat=application%2Fjson&cql_filter=projname=';

//geoServerUrl
var geoserver = 'http://' + ipConfig + ':8088';
var geoServerURl = geoserver + '/geoserver/LF/wms';
var geoserverWFS = geoserver + '/geoserver/LF/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=LF%3Abs_project&maxFeatures=50&outputFormat=application%2Fjson&cql_filter=projname=';
var geoserverWFSLine = geoserver + '/geoserver/LF/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=LF%3Am_pipeline&maxFeatures=50&outputFormat=application%2Fjson&cql_filter=projname=';
// æ¨¡åž‹åŠ è½½åœ°å€
var modelUrl = LFData + '/tileset/SN/tileset.json';

//模型加载地址
var modelUrl = 'http://' + ipConfig + '/LFData/tileset/SN/tileset.json';

//DEM
var demLayer = 'http://' + ipConfig + '/LFData/dem';
// DEM
var demLayer = LFData + '/dem';

// ç»¼åˆå±•ç¤º
window.sceneConfig = {
  // sdk许可
  licenseServer: 'http://localhost/LFServer',
  // æœåŠ¡åœ°å€
  // baseURL: 'http://183.162.245.49:8888/',
  // MPT名称
  // mptName: "china_5m.Ei.397334",
  // // SG地址
  SGUrl: "http://" + ipConfig + "/SG/Elevation",
  //fly地址
  fly: 'http://' + ipConfig + '/LFData/fly/' + (ipConfig.indexOf("103.21.") ? "lfy_web.fly" : "lf_127.fly"),
  mptName: 'zhufeng.397336.mpt',
  positionBtn: [],
    // Sdk许可
    licenseServer: 'http://' + iisHost + '/LFServer',
    // MPT名称
    mptName: "china_5m.Ei.397334",
    // SG地址
    SGUrl: "http://" + iisHost + "/SG/Elevation",
    // Fly地址
    fly: 'http://' + iisHost + '/LFData/fly/' + (isWeb ? "lfy_web.fly" : "lf_127.fly"),
    //
    positionBtn: [],
};

var gaoDeBaseUrl = [{
  url: 'http://webrd02.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}',
  label: '高德矢量',

 public/config/config1.js

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,57 @@
// var ipConfig =  location.hostname;
var ipConfig = '192.168.20.205';
var menuStartName = "管道基础大数据平台";

var LFData = "http://" + ipConfig + "/LFData";

var BASE_URL = 'http://' + ipConfig + ':8088/server';

//webSocket æœåŠ¡åœ°å€
var socketUrl = 'ws://' + ipConfig + ':8088/server/ws/select';

//数据库监控地址
var sql_Url = 'http://' + ipConfig + ':8081/admin/druid/sql.html';

//路径分析地址
var wnsUrl = 'http://' + ipConfig + ':9055/gisserver/wnsserver/beijingdaohang_wns';

//gisserver
var gisServerUrl = 'http://' + ipConfig + ':9055/gisserver';

//geoServerUrl
var geoserver = 'http://' + ipConfig + ':8088';
var geoServerURl = geoserver + '/geoserver/LF/wms';
var geoserverWFS = geoserver + '/geoserver/LF/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=LF%3Abs_project&maxFeatures=50&outputFormat=application%2Fjson&cql_filter=projname=';
var geoserverWFSLine = geoserver + '/geoserver/LF/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=LF%3Am_pipeline&maxFeatures=50&outputFormat=application%2Fjson&cql_filter=projname=';

//模型加载地址
var modelUrl = 'http://' + ipConfig + '/LFData/tileset/SN/tileset.json';

//DEM
var demLayer = 'http://' + ipConfig + '/LFData/dem';

// ç»¼åˆå±•ç¤º
window.sceneConfig = {
  // sdk许可
  licenseServer: 'http://localhost/LFServer',
  // æœåŠ¡åœ°å€
  // baseURL: 'http://183.162.245.49:8888/',
  // MPT名称
  // mptName: "china_5m.Ei.397334",
  // // SG地址
  SGUrl: "http://" + ipConfig + "/SG/Elevation",
  //fly地址
  fly: 'http://' + ipConfig + '/LFData/fly/' + (ipConfig.indexOf("103.21.") ? "lfy_web.fly" : "lf_127.fly"),
  mptName: 'zhufeng.397336.mpt',
  positionBtn: [],
};
var gaoDeBaseUrl = [{
  url: 'http://webrd02.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}',
  label: '高德矢量',
}, {
  url: 'https://webst02.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}',
  label: '高德影像',
}, {
  url: 'http://webst02.is.autonavi.com/appmaptile?x={x}&y={y}&z={z}&lang=zh_cn&size=1&scale=1&style=8',
  label: '高德影像标注'
}];

 src/views/PackageTwo/WareInspection.vue

@@ -21,10 +21,11 @@
  methods: {
    showChangeIfream(res) {

      if (res.indexOf('{host}') != -1) {
      if (res.indexOf('{fmeHost}') != -1) {
 
        res = res.replace('{host}',ipConfig )
        res = res.replace('{fmeHost}',fmeHost )
      }

      if (res.indexOf('token=') != -1) {
        res = res + getToken();
      }

 src/views/maintenance/databaseMonitoring.vue

@@ -29,10 +29,10 @@
  methods: {
    handleSelectionChange() { },
    getUrl() {

 
      var url = this.$store.state.iframeMsg;
      if (url.indexOf('{host}') != -1) {
        url = url.replace('{host}', ipConfig)
      if (url.indexOf('{webHost}') != -1) {
        url = url.replace('{webHost}', webHost)
      }
 
      if (url.indexOf('token=') != -1) {

 src/views/maintenance/menuSettings.vue

@@ -795,6 +795,7 @@
      }
    },
    showPermsMenu(res) {
 
      switch (res.tag) {
        case '/delete':
          this.menuStatus.delete = true;
@@ -810,6 +811,7 @@
    getPerms() {
      var val = this.$store.state.currentPerms;
      var permsEntity = this.$store.state.permsEntity;
     
      if (permsEntity.length == 0) {
        getPerms().then((res) => {
          if (res.code == 200) {

 src/views/maintenance/systemMonitoring copy.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,1091 @@
<template>
  <div class="systemMonitoring_box">
    <My-bread :list="[
        `${$t('operatManage.operatManage')}`,
        `${$t('operatManage.systemMonitoring')}`,
      ]"></My-bread>
    <el-divider />
    <div class="content_Box">
      <div class="cloumn_Box1">
        <div class="flex_Box1">
          <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%; height: 310px"
              >
                <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="
                $t('operatManage.systemMonitoringObj.serviceResourceStatus')
              "
              name="second"
            >

              <div
                id="resUseChart"
                style="width:101vh; height: 30vh; "
              ></div>

            </el-tab-pane>
            <el-tab-pane
              :label="$t('operatManage.systemMonitoringObj.userloginStatus')"
              name="third"
            >
              <div
                id="userLoginChart"
                style="width:101vh; height: 30vh; "
              ></div>
            </el-tab-pane>
            <el-tab-pane
              :label="
                $t('operatManage.systemMonitoringObj.resourceOperationStatus')
              "
              name="fourth"
            >
              <div
                id="operateCountChart"
                style="width:101vh; height: 30vh; "
              ></div>
            </el-tab-pane>
          </el-tabs>
        </div>
        <div class="flex_Box">
          <div>
            <div
              style="line-height: 32px"
              class="imageTitle"
            >
              {{ $t('operatManage.systemMonitoringObj.onlinePersonnel') }}
            </div>
          </div>
          <el-table
            :data="tableData"
            style="width: 100%"
            height="90%"
          >
            <el-table-column
              align="center"
              type="index"
              :label="$t('operatManage.ELM.index')"
              width="100px"
            />
            <el-table-column
              prop="uid"
              :label="$t('operatManage.systemMonitoringObj.userID')"
            >
            </el-table-column>
            <el-table-column
              prop="uname"
              :label="$t('operatManage.systemMonitoringObj.username')"
            >
            </el-table-column>
            <el-table-column
              prop="loginTime"
              :label="$t('operatManage.systemMonitoringObj.onlineTime')"
              fixed="right"
            >
            </el-table-column>
          </el-table>
        </div>
      </div>
      <div class="cloumn_Box">
        <div class="flex_Box">
          <div style="width: 100%; height: 20px">
            <div class="image1"></div>
            <div class="imageTitle">
              {{ $t('operatManage.systemMonitoringObj.memoryMonitoring') }}
            </div>
          </div>
          <div class="top_Box1">
            <div class="top_box_left">
              <div class="left_title">
                <div class="height_title">
                  <label>
                    {{
                      $t('operatManage.systemMonitoringObj.haveBeenUsed')
                    }}</label>
                  <p>{{ memInfo.use }}</p>
                </div>
                <div class="height_title">
                  <label>
                    {{
                      $t('operatManage.systemMonitoringObj.usageRate')
                    }}</label>
                  <p>{{ memInfo.usage }}</p>
                </div>
              </div>
              <div class="left_title">
                <div class="height_title">
                  <label>
                    {{
                      $t('operatManage.systemMonitoringObj.totalMemory')
                    }}</label>
                  <p>{{ memInfo.totalMem }}</p>
                </div>
                <div class="height_title">
                  <label>
                    {{
                      $t('operatManage.systemMonitoringObj.remainingMemory')
                    }}</label>
                  <p>{{ memInfo.remainMem }}</p>
                </div>
              </div>
            </div>
            <div
              id="fathershuiWen"
              class="top_box_right"
            >
              <div id="shuiwen"></div>
            </div>
          </div>
        </div>
        <div class="flex_Box">
          <div>
            <div class="image2"></div>
            <div
              style="line-height: 32px"
              class="imageTitle"
            >
              {{ $t('operatManage.systemMonitoringObj.cpuMonitoring') }}
            </div>
          </div>
          <div
            id="Sys_cpu_chart"
            style="width: 100%; height: 86%; margin-top: 8%"
          ></div>
        </div>
        <div class="flex_Box">
          <div style="width: 100%; height: 34px">
            <div class="image3"></div>
            <div
              style="line-height: 32px"
              class="imageTitle"
            >
              {{ $t('operatManage.systemMonitoringObj.heteroconstant') }}
            </div>
          </div>
          <div class="ycContent">
            <div class="ycsBox">
              <div style="width:100%;height:100%">
                <div class="ycTltle">{{ resInfoCount }}</div>
                <div class="heteroTitle">
                  {{ $t('operatManage.systemMonitoringObj.numberOfExceptions') }}
                </div>
              </div>

            </div>
          </div>

        </div>
      </div>

    </div>
    <!-- <div class="inform_box">
      <div class="content_box">
        <div class="top_box">
          <div style="width: 100%; height: 100%">
            <div
              style="width: 30%; height: 100%; float: left; margin-left: 20%"
            >
              <div class="Syslabel">
                <p style="line-height: 25px">
                  {{ $t('operatManage.systemMonitoringObj.haveBeenUsed') }}
                  {{ memInfo.use }}
                </p>
                <br />
                <p style="line-height: 25px">
                  {{ $t('operatManage.systemMonitoringObj.totalMemory') }}
                  {{ memInfo.totalMem }}
                </p>
              </div>
            </div>
            <div
              id="shuiwen"
              style="
                width: 40%;
                height: 100%;

                float: left;
              "
            ></div>
          </div>
        </div>
        <div class="bottom_box">
          {{ $t('operatManage.systemMonitoringObj.systemMemory') }}
        </div>
      </div>
      <div class="content_box">
        <div class="top_box">
          <div class="Syslabel">
            {{ $t('operatManage.systemMonitoringObj.CPUusage') }}
          </div>
          <div class="details">{{ cpuInfo.cpuSysUsage }}</div>
          <div id="Sys_cpu_chart"></div>
        </div>
        <div class="bottom_box">
          {{ $t('operatManage.systemMonitoringObj.CPUsystemUsage') }}
        </div>
      </div>
      <div class="content_box">
        <div class="top_box">
          <div class="Syslabel">
            {{ $t('operatManage.systemMonitoringObj.numberOfExceptions') }}
          </div>
          <div class="details">{{ resInfoCount }}</div>
        </div>
        <div class="bottom_box">
          {{ $t('operatManage.systemMonitoringObj.numberOfAbnormalSystems') }}
        </div>
      </div>
    </div>
    <div class="chart_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%">
        <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> -->
    <!-- <div style="margin-top: 10px" class="pagination_box">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage4"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="10"
          layout="total, sizes, prev, pager, next, jumper"
          :total="4"
        >
        </el-pagination>
      </div>
    </div>

    <div class="left">
      <p class="title_box">
        {{ $t('operatManage.systemMonitoringObj.onlinePersonnel') }}
      </p>
      <el-table :data="tableData" style="width: 100%">
        <el-table-column
          align="center"
          type="index"
          :label="$t('operatManage.ELM.index')"
          width="100px"
        />
        <el-table-column
          prop="uid"
          :label="$t('operatManage.systemMonitoringObj.userID')"
        >
        </el-table-column>
        <el-table-column
          prop="uname"
          :label="$t('operatManage.systemMonitoringObj.username')"
        >
        </el-table-column>
        <el-table-column
          prop="loginTime"
          :label="$t('operatManage.systemMonitoringObj.onlineTime')"
          fixed="right"
        >
        </el-table-column>
      </el-table>

      <!-- <div style="margin-top: 10px" class="pagination_box">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage4"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="10"
          layout="total, sizes, prev, pager, next, jumper"
          :total="4"
        >
        </el-pagination>
      </div>
    </div>   -->
  </div>
</template>

<script>
import MyBread from '../../components/MyBread.vue';
import 'echarts-liquidfill';
export default {
  //import引入的组件需要注入到对象中才能使用
  components: {
    MyBread,
  },
  data() {
    //这里存放数据
    return {
      activeName: 'first',
      ws: null,
      tableData: [],
      memInfo: { totalMem: 0, use: 0, usage: 0, remainMem: 0 },
      cpuInfo: { cpuSysUsage: 0 },
      resInfo: [],
      resInfoCount: 0,
      echartData: [],
      resUseCount: {},
      userLoginCount: [],
      operateCount: [],
    };
  },
  //方法集合
  methods: {
    SetTableData1(res) {
      this.tableData = res.userInfo;
      this.memInfo = res.memInfo;
      this.cpuInfo = res.cpuInfo;
      if (this.echartData.length == 7) {
        this.echartData.splice(0, 1);
      }
      this.lineChart2(this.memInfo.usage);
      this.echartData.push([' ', parseFloat(res.cpuInfo.cpuSysUsage)]);
      this.lineChart1();
    },
    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() {
      const valueList = this.echartData.map(function (item) {
        return item[1];
      });

      var option = {
        // Make gradient line here
        visualMap: [
          {
            show: false,
            type: 'continuous',
            seriesIndex: 0,
          },
        ],
        toolbox: {
          show: true,
          feature: {

            saveAsImage: { show: true }
          }
        },
        title: [],
        tooltip: {
          trigger: 'axis',
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: ['', '', '', '', '', '', ''],
        },
        yAxis: [
          {
            axisLabel: {
              show: false, // ä¸æ˜¾ç¤ºåæ ‡è½´ä¸Šçš„文字
            },
          },
        ],
        grid: [
          {
            top: '10%',
            bottom: '10%',
            left: '10%',
            right: '10%',
          },
        ],
        series: [
          {
            type: 'line',
            showSymbol: false,
            data: valueList,
          },
        ],
      };

      let myChart = this.$echarts.init(
        document.getElementById('Sys_cpu_chart')
      );
      myChart.setOption(option);
      window.addEventListener('resize', function () {
        myChart.resize();
      });
    },
    lineChart2(res) {


      var a = 0;
      if (res != 0) {
        a = res.split('%').join('');
      }

      var data = { name: '1111', value: parseFloat(a) / 100 };
      var list = [];
      let value = data.value;
      list.push({ name: data.name, value: data.value });

      for (let i = 0; i < 2; i++) {
        if (value - 0.1 > 0) {
          value -= 0.1;
          list.push({ name: data.name, value: value });
        }
      }
      var options = {
        // æç¤ºæ¡†ç»„件
        tooltip: {
          show: false,
          trigger: 'item', // è§¦å‘类型, æ•°æ®é¡¹å›¾å½¢è§¦å‘，主要在散点图，饼图等无类目轴的图表中使用。
          textStyle: {
            show: false,
          },
          formatter: function (value) {
            return value.seriesName + ': ' + parseInt(value.value * 100) + '% ';
          },
        },
        series: [
          {
            type: 'liquidFill',
            name: ' ',
            radius: '40%',
            center: ['30%', '30%'],
            shape: 'circle',
            phase: 0,
            direction: 'right',
            outline: {
              show: true,
              borderDistance: 0, // è¾¹æ¡†çº¿ä¸Žå›¾è¡¨çš„距离 æ•°å­—
              itemStyle: {
                opacity: 1,
                borderWidth: 0,
                borderColor: '#2bf9ed',
              },
            },
            // å›¾å½¢æ ·å¼
            itemStyle: {
              color: this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: '#c5e87e' }, //柱图渐变色
                { offset: 0.5, color: '#2bf9ed' }, //柱图渐变色                 //柱图渐变色
              ]),
              opacity: 0.5,
              shadowBlur: 10,
            },
            backgroundStyle: {
              color: this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: '#2bf9ed' }, //柱图渐变色
                { offset: 0.4, color: '#44C0C1' }, //柱图渐变色                 //柱图渐变色
              ]),
              opacity: 0.5,
            },
            // å›¾å½¢çš„高亮样式
            emphasis: {
              itemStyle: {
                opacity: 1,
              },
            },
            // å›¾å½¢ä¸Šçš„文本标签
            label: {
              fontSize: 40,
              fontWeight: 600,
              color: '#fff',
            },
            data: list,
          },
          {
            name: 'Access From',
            type: 'pie',
            radius: ['43%', '50%'],
            center: ['30%', '30%'],
            startAngle: 340,
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 10,
            },
            label: {
              show: false,
              position: 'center',
            },
            emphasis: {
              label: {
                show: true,
                fontSize: '40',
                fontWeight: 'bold',
              },
            },
            labelLine: {
              show: false,
            },
            data: [
              {
                value: 0.4,
                name: 'Direct',
                itemStyle: {
                  color: '#2bf9ed',
                },
              },
              {
                value: 0.6,
                name: 'Direct',
                itemStyle: {
                  color: 'rgba(240, 248, 255, 0)',
                },
              },
            ],
            emphasis: {
              disabled: true,
            },
            tooltip: {
              show: false,
            },
          },
        ],
      };

      let myChart1 = this.$echarts.init(document.getElementById('shuiwen'));
      myChart1.setOption(options);
      window.addEventListener('resize', function () {
        myChart1.resize();
      });
    },
    lineChart3() {
      var data = [
        { name: '可用资源', value: this.resUseCount.resAbleCount },
        { name: '不可用资源', value: this.resUseCount.resUnableCount },
      ];
      var option = {
        tooltip: {
          trigger: 'item',
        },
        toolbox: {
          show: true,
          feature: {

            saveAsImage: { show: true }
          }
        },
        legend: {
          top: '5%',
          left: 'center',
          textStyle: {
            fontSize: 18, //字体大小
            color: '#ffffff', //字体颜色
          },
        },
        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',
          },
        },
        toolbox: {
          show: true,
          feature: {

            saveAsImage: { show: true }
          }
        },
        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() {
    if (Window.ws != null) {
      Window.ws.close();
      Window.ws.onclose = () => {
        console.log('服务器关闭');
      };
      Window.ws = null;
    }

    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);
      console.log(data);
      if (data.userInfo != undefined) {
        that.SetTableData1(data);
      } else if (data.resInfo != undefined) {
        that.SetTableData2(data);
      } else if (data.operateCount != undefined) {
        that.SetTableData3(data);
      }
    };
  },

  mounted() {
    var mywidth = $("#fathershuiWen").width();
    var mysright = $("#fathershuiWen").height();
    var width = (mywidth * 1.5) + "px"
    var height = (mysright * 1.5) + "px"
    $("#shuiwen").width(width);
    $("#shuiwen").height(height);





    this.lineChart2(0);
  },
};
</script>
<style lang="less" scoped>
//@import url(); å¼•å…¥å…¬å…±cssç±»
.systemMonitoring_box {
  height: 98%;
  width: 98%;
  padding: 1%;
  position: absolute;
  .content_Box {
    width: 97%;
    height: 85%;
    position: absolute;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    .cloumn_Box {
      width: 100%;
      height: 38%;

      display: flex;
      justify-content: space-between;
      .flex_Box {
        width: 30.5%;
        height: 88%;
        border: 1px solid rgb(202, 201, 204);
        border-radius: 5px;
        padding: 1%;
        background: rgb(21, 20, 20);

        .image1 {
          width: 46px;
          height: 20px;
          float: left;
          background: url("../../assets/img/systemMonitoring/图层 38.png")
            no-repeat;
          background-size: 100% 100%;
        }
        .image2 {
          width: 34px;
          height: 34px;
          float: left;
          background: url("../../assets/img/systemMonitoring/图层 37.png")
            no-repeat;
          background-size: 100% 100%;
        }
        .image3 {
          width: 32px;
          height: 32px;
          float: left;
          background: url("../../assets/img/systemMonitoring/图层 40.png")
            no-repeat;
          background-size: 100% 100%;
        }
      }
      .ycsBox {
        width: 200px;
        height: 200px;
        background: url("../../assets/img/systemMonitoring/图层 39.png")
          no-repeat;
        background-size: 100% 100%;
        border: 1px;
        display: flex;
        align-items: center;
      }
      .ycContent {
        width: 100%;
        padding: 1%;
        height: 80%;
        display: flex;
        justify-content: center;
      }
    }
    .imageTitle {
      float: left;
      color: white;
      margin-left: 10px;
    }
    .ycTltle {
      width: 100%;
      margin-top: 8%;
      font-size: 60px;
      font-family: Microsoft YaHei;
      font-weight: 300;
      color: #009cff;
      text-align: center;
    }
    .heteroTitle {
      width: 100%;
      text-align: center;
      font-size: 16px;
      font-family: Microsoft YaHei;
      font-weight: 300;
      color: #ffffff;
      line-height: 49px;

      // margin-top: 20px;

      // text-align: center;
    }
    .top_Box1 {
      width: 96%;
      height: 91%;
      margin-top: 2%;
      margin-left: 4%;
      display: flex;
      justify-content: space-between;
      .top_box_left {
        width: 59%;
        height: 100%;
        display: flex;
        justify-content: space-between;
        .left_title {
          width: 48%;
          height: 100%;
          display: flex;
          flex-direction: column;
          justify-content: space-around;
          .height_title {
            width: 100%;
            height: 48%;
            label {
              color: white;
            }
            p {
              color: white;
              margin-top: 3%;
              font-size: 24px;
            }
          }
        }
      }
      .top_box_right {
        width: 39%;
        height: 100%;
      }
    }

    .cloumn_Box1 {
      width: 100%;
      height: 58%;

      display: flex;
      justify-content: space-between;
      .flex_Box1 {
        width: 64%;
        height: 92%;
        padding: 1%;
        border: 1px solid rgb(202, 201, 204);
        border-radius: 5px;
        background: rgb(21, 20, 20);
      }
      .flex_Box {
        width: 30.5%;
        height: 92%;
        border: 1px solid rgb(202, 201, 204);
        border-radius: 5px;
        padding: 1%;
        background: rgb(21, 20, 20);
      }
    }
  }
  /deep/.el-tabs__item {
    color: white;
  }
  /deep/.el-tabs__item.is-active {
    color: #009cff;
  }
  /*修改table è¡¨ä½“的背景颜色和文字颜色*/
  /deep/ .el-table {
    background-color: transparent;

    th,
    td {
      background-color: transparent;
    }
    .el-table__expanded-cell {
      background-color: transparent !important;
    }

    // è¡¨å¤´èƒŒæ™¯è‰²
    th.el-table__cell {
      background-color: #303030;
      color: #fff;
    }
    tr > td {
      background-color: #303030;
      color: #fff;
    }

    // hover效果
    tr:hover > td {
      background-color: rgba(255, 255, 255, 0.3) !important;
    }

    tbody tr:hover {
      background-color: rgba(255, 255, 255, 0.3) !important;
      // text-align: center;
    }

    // æ»šåŠ¨æ¡å®½é«˜
    .el-table__body-wrapper::-webkit-scrollbar {
      width: 5px;
      height: 5px;
    }

    .el-table__body-wrapper::-webkit-scrollbar {
      width: 5px;
      /*滚动条宽度*/
      height: 10px;
      /*滚动条高度*/
    }
    /*定义滚动条轨道 å†…阴影+圆角*/
    .el-table__body-wrapper::-webkit-scrollbar-track {
      box-shadow: 0px 1px 3px #216fe6 inset;
      /*滚动条的背景区域的内阴影*/
      border-radius: 10px;
    }

    /*定义滑块 å†…阴影+圆角*/
    .el-table__body-wrapper::-webkit-scrollbar-thumb {
      box-shadow: 0px 1px 3px #216fe6 inset;
      border-radius: 6px;
      background-color: #216fe6;
    }
  }
}
</style>