移除视频分析相关功能, 默认自动登录

zhangzengfei

2023-09-05 51ecc231aa4f73a5071e188b4528ab59d730b07f

 src/pages/systemMonitor/index/App.vue

@@ -1,41 +1,21 @@
<template>
  <div class="s-system-monitor">
    <el-tabs id="systemMonitor" v-model="activeName">
      <el-tab-pane name="proc">
      <el-tab-pane name="proc" v-if="false">
        <span slot="label">
          <span class="iconfont icon">&#xe742;</span>
          单元</span
        >
        <div class="left-tab">
          <div
            class="tab-item"
            :class="activeTab == 0 ? 'tab-item-active' : ''"
            @click="activeTab = 0"
          >
          <div class="tab-item" :class="activeTab == 0 ? 'tab-item-active' : ''" @click="activeTab = 0">
            <div class="title">算法单元</div>
            <div class="subtitle">
              正在进行{{ algoProcessData.length }}个算法单元
            </div>
            <span
              class="iconfont icon"
              :style="activeTab == 0 ? {} : { color: '#fff' }"
              >&#xe741;</span
            >
            <div class="subtitle">正在进行{{ algoProcessData.length }}个算法单元</div>
            <span class="iconfont icon" :style="activeTab == 0 ? {} : { color: '#fff' }">&#xe741;</span>
          </div>
          <div
            class="tab-item"
            :class="activeTab == 1 ? 'tab-item-active' : ''"
            @click="activeTab = 1"
          >
          <div class="tab-item" :class="activeTab == 1 ? 'tab-item-active' : ''" @click="activeTab = 1">
            <div class="title">应用单元</div>
            <div class="subtitle">
              正在进行{{ appProcessData.length }}个应用单元
            </div>
            <span
              class="iconfont icon"
              :style="activeTab == 1 ? {} : { color: '#fff' }"
              >&#xe744;</span
            >
            <div class="subtitle">正在进行{{ appProcessData.length }}个应用单元</div>
            <span class="iconfont icon" :style="activeTab == 1 ? {} : { color: '#fff' }">&#xe744;</span>
          </div>
        </div>
        <div class="form-title" v-if="activeTab == 0">
@@ -118,13 +98,7 @@
        >
        <div class="column-left" ref="left">
          <div class="resize-bar">
            <div
              :class="[
                'ax_default',
                activeChartItem == 'cpu' ? 'selected' : '',
              ]"
              @click="setActiveChartItem('cpu')"
            >
            <div :class="['ax_default', activeChartItem == 'cpu' ? 'selected' : '']" @click="setActiveChartItem('cpu')">
              <div class="ax_default_pic color-cpu"></div>
              <div>
                <div class="ax_default_text">CPU</div>
@@ -132,13 +106,7 @@
              </div>
            </div>

            <div
              :class="[
                'ax_default',
                activeChartItem == 'mem' ? 'selected' : '',
              ]"
              @click="setActiveChartItem('mem')"
            >
            <div :class="['ax_default', activeChartItem == 'mem' ? 'selected' : '']" @click="setActiveChartItem('mem')">
              <div class="ax_default_pic color-mem"></div>
              <div>
                <div class="ax_default_text">内存</div>
@@ -146,13 +114,7 @@
              </div>
            </div>

            <div
              :class="[
                'ax_default',
                activeChartItem == 'gpu' ? 'selected' : '',
              ]"
              @click="setActiveChartItem('gpu')"
            >
            <div :class="['ax_default', activeChartItem == 'gpu' ? 'selected' : '']" @click="setActiveChartItem('gpu')">
              <div class="ax_default_pic color-gpu"></div>
              <div>
                <div class="ax_default_text">算力</div>
@@ -160,29 +122,18 @@
              </div>
            </div>

            <div
              :class="[
                'ax_default',
                activeChartItem == 'net' ? 'selected' : '',
              ]"
              @click="setActiveChartItem('net')"
            >
            <div :class="['ax_default', activeChartItem == 'net' ? 'selected' : '']" @click="setActiveChartItem('net')">
              <div class="ax_default_pic color-net"></div>
              <div>
                <div class="ax_default_text">网络</div>
                <div class="ax_default_subtext">
                  {{ netSend | byteConver }} / {{ netRecive | byteConver }}
                </div>
                <div class="ax_default_subtext">{{ netSend | byteConver }} / {{ netRecive | byteConver }}</div>
              </div>
            </div>

            <div
              v-for="(v, k) in disks"
              :key="k"
              :class="[
                'ax_default',
                activeChartItem == 'disk|' + k ? 'selected' : '',
              ]"
              :class="['ax_default', activeChartItem == 'disk|' + k ? 'selected' : '']"
              @click="setActiveChartItem('disk|' + k)"
            >
              <div class="ax_default_pic color-disk"></div>
@@ -280,7 +231,7 @@
        </div>
      </el-tab-pane>

      <el-tab-pane name="service">
      <el-tab-pane name="service" v-if="false">
        <span slot="label">
          <span class="iconfont icon">&#xe944;</span>
          服务</span
@@ -312,59 +263,56 @@
</template>

<script>
import echarts from "echarts";
import { showSystemStates, showService, showProcesses } from "../api/api";
import echarts from "echarts"
import { showSystemStates, showService, showProcesses } from "../api/api"

export default {
  components: {},
  computed: {
    isDisk() {
      return this.activeChartItem.indexOf("disk") == 0;
      return this.activeChartItem.indexOf("disk") == 0
    },
    isAdmin() {
      if (
        sessionStorage.getItem("userInfo") &&
        sessionStorage.getItem("userInfo") !== ""
      ) {
        let loginName = JSON.parse(sessionStorage.getItem("userInfo")).username;
        return loginName === "superadmin" || loginName === "basic";
      if (sessionStorage.getItem("userInfo") && sessionStorage.getItem("userInfo") !== "") {
        let loginName = JSON.parse(sessionStorage.getItem("userInfo")).username
        return loginName === "superadmin" || loginName === "basic"
      }
      return false;
    },
      return false
    }
  },
  filters: {
    byteConver(limit) {
      var size = "";
      var size = ""
      if (limit < 1024) {
        //如果小于0.1KB转化成B
        size = limit + "B";
        size = limit + "B"
      } else if (limit < 1024 * 1024) {
        //如果小于0.1MB转化成KB
        size = (limit / 1024).toFixed(2) + "KB";
        size = (limit / 1024).toFixed(2) + "KB"
      } else if (limit < 1024 * 1024 * 1024) {
        //如果小于0.1GB转化成MB
        size = (limit / (1024 * 1024)).toFixed(2) + "MB";
        size = (limit / (1024 * 1024)).toFixed(2) + "MB"
      } else if (limit < 1024 * 1024 * 1024 * 1024) {
        //其他转化成GB
        size = (limit / (1024 * 1024 * 1024)).toFixed(2) + "GB";
        size = (limit / (1024 * 1024 * 1024)).toFixed(2) + "GB"
      } else {
        size = (limit / (1024 * 1024 * 1024 * 1024)).toFixed(2) + "TB";
        size = (limit / (1024 * 1024 * 1024 * 1024)).toFixed(2) + "TB"
      }

      var sizestr = size + "";
      var len = sizestr.indexOf(".");
      var dec = sizestr.substr(len + 1, 2);
      var sizestr = size + ""
      var len = sizestr.indexOf(".")
      var dec = sizestr.substr(len + 1, 2)
      if (dec == "00") {
        //当小数点后为00时 去掉小数部分
        return sizestr.substring(0, len) + sizestr.substr(len + 3, 2);
        return sizestr.substring(0, len) + sizestr.substr(len + 3, 2)
      }

      return sizestr;
    },
      return sizestr
    }
  },
  data() {
    return {
      activeName: "proc",
      activeName: "top",
      activeChartItem: "cpu",
      yAxisMaxVal: "100%",
      algoProcessData: [],
@@ -374,7 +322,7 @@
      activeTab: 0,
      eChartsBaseOpt: {
        title: {
          top: 10,
          top: 10
        },
        animation: false,
        grid: {
@@ -385,7 +333,7 @@

          containLabel: true,
          borderWidth: 2,
          borderColor: "#000",
          borderColor: "#000"
        },
        xAxis: {
          type: "category",
@@ -393,10 +341,10 @@
          data: Array.from({ length: 60 }, () => 0),
          // show: false,
          axisLabel: {
            show: false,
            show: false
          },
          axisTick: {
            show: false,
            show: false
          },
          splitLine: {
            show: true,
@@ -404,27 +352,27 @@
            lineStyle: {
              width: 1,
              type: "solid",
              color: "rgb(242,242,242)",
            },
          },
              color: "rgb(242,242,242)"
            }
          }
        },
        yAxis: {
          type: "value",
          // show: false,
          axisLine: {
            show: false,
            show: false
          },
          axisLabel: {
            show: false,
            show: false
          },
          axisTick: {
            show: false,
            show: false
          },
          splitLine: {
            lineStyle: {
              color: "rgb(242,242,242)",
            },
          },
              color: "rgb(242,242,242)"
            }
          }
        },
        series: [
          {
@@ -433,9 +381,9 @@
            data: Array.from({ length: 60 }, () => 0),
            // smooth: true,
            itemStyle: {},
            areaStyle: {},
          },
        ],
            areaStyle: {}
          }
        ]
      },
      cpuUtilizations: Array.from({ length: 60 }, () => 0),
      memUtilizations: Array.from({ length: 60 }, () => 0),
@@ -462,264 +410,244 @@
      disks: {},
      activeDisk: {},
      ioRead: 0,
      ioWrite: 0,
    };
      ioWrite: 0
    }
  },
  mounted() {
    this.dataCollection();
    this.initChart();
    this.dataCollection()
    this.initChart()
  },
  methods: {
    // 循环采集所有数据
    dataCollection() {
      this.serviceCollect();
      this.procCollect();
      this.serviceCollect()
      this.procCollect()
      setTimeout(() => {
        this.dataCollection();
      }, 5000);
        this.dataCollection()
      }, 5000)
    },
    serviceCollect() {
      showService()
        .then((rsp) => {
          if (rsp && rsp.success) {
            rsp.data.sort(function (obj1, obj2) {
              var val1 = obj1.name;
              var val2 = obj2.name;
            rsp.data.sort(function(obj1, obj2) {
              var val1 = obj1.name
              var val2 = obj2.name
              if (val1 < val2) {
                return -1;
                return -1
              } else if (val1 > val2) {
                return 1;
                return 1
              } else {
                return 0;
                return 0
              }
            });
            this.vasystemServicesData = rsp.data;
            })
            this.vasystemServicesData = rsp.data
          }
        })
        .catch(() => {});
        .catch(() => {})
    },
    procCollect() {
      showProcesses()
        .then((rsp) => {
          if (rsp && rsp.success) {
            if (rsp.data.algos) this.algoProcessData = rsp.data.algos;
            if (rsp.data.algos) this.algoProcessData = rsp.data.algos

            if (rsp.data.apps) this.appProcessData = rsp.data.apps;
            if (rsp.data.apps) this.appProcessData = rsp.data.apps
          }
        })
        .catch(() => {});
        .catch(() => {})
    },
    getSystemState() {
      showSystemStates().then((rsp) => {
        if (rsp && rsp.success) {
          // 处理cpu
          this.cpuUtilizations = this.cpuUtilizations.slice(1);
          this.cpuUtilizations.push(rsp.data.cpu.toFixed(2));
          this.cpuUsedPercent = this.cpuUtilizations[59];
          this.cpuUtilizations = this.cpuUtilizations.slice(1)
          this.cpuUtilizations.push(rsp.data.cpu.toFixed(2))
          this.cpuUsedPercent = this.cpuUtilizations[59]
          if (rsp.data.cpu_info) {
            this.cpuMaxRate = (rsp.data.cpu_info[0].mhz / 1024).toFixed(2);
            this.cpuModel = rsp.data.cpu_info[0].modelName;
            this.cpuCore =
              Number(rsp.data.cpu_info[rsp.data.cpu_info.length - 1].coreId) +
              1;
            this.cpuCount = (rsp.data.cpu_info.length / this.cpuCore).toFixed(
              0
            );
            this.cpuMaxRate = (rsp.data.cpu_info[0].mhz / 1024).toFixed(2)
            this.cpuModel = rsp.data.cpu_info[0].modelName
            this.cpuCore = Number(rsp.data.cpu_info[rsp.data.cpu_info.length - 1].coreId) + 1
            this.cpuCount = (rsp.data.cpu_info.length / this.cpuCore).toFixed(0)
          }

          // 内存
          this.memUtilizations = this.memUtilizations.slice(1);
          this.memUtilizations.push(rsp.data.mem.usedPercent.toFixed(2));
          this.memTotal = (rsp.data.mem.total / 1024 / 1024 / 1000).toFixed(0);
          this.memUsed = (rsp.data.mem.used / 1024 / 1024 / 1000).toFixed(2);
          this.memFree = (rsp.data.mem.free / 1024 / 1024 / 1000).toFixed(2);
          this.memCache = (
            (rsp.data.mem.cached + rsp.data.mem.buffers) /
            1024 /
            1024 /
            1000
          ).toFixed(2);
          this.memUsedPercent = rsp.data.mem.usedPercent.toFixed(2);
          this.memUtilizations = this.memUtilizations.slice(1)
          this.memUtilizations.push(rsp.data.mem.usedPercent.toFixed(2))
          this.memTotal = (rsp.data.mem.total / 1024 / 1024 / 1000).toFixed(0)
          this.memUsed = (rsp.data.mem.used / 1024 / 1024 / 1000).toFixed(2)
          this.memFree = (rsp.data.mem.free / 1024 / 1024 / 1000).toFixed(2)
          this.memCache = ((rsp.data.mem.cached + rsp.data.mem.buffers) / 1024 / 1024 / 1000).toFixed(2)
          this.memUsedPercent = rsp.data.mem.usedPercent.toFixed(2)

          // 算力
          this.gpuUtilizations = this.gpuUtilizations.slice(1);
          this.gpuUtilizations.push(rsp.data.gpu.toFixed(2));
          this.gpuUsedPercent = this.gpuUtilizations[59];
          this.gpuUtilizations = this.gpuUtilizations.slice(1)
          this.gpuUtilizations.push(rsp.data.gpu.toFixed(2))
          this.gpuUsedPercent = this.gpuUtilizations[59]

          // 网络
          this.netReciveCount = this.netReciveCount.slice(1);
          this.netReciveCount.push(rsp.data.net.bytesRecv);
          this.netSendCount = this.netSendCount.slice(1);
          this.netSendCount.push(rsp.data.net.bytesSent);
          this.netReciveCount = this.netReciveCount.slice(1)
          this.netReciveCount.push(rsp.data.net.bytesRecv)
          this.netSendCount = this.netSendCount.slice(1)
          this.netSendCount.push(rsp.data.net.bytesSent)

          this.netRecive = this.netReciveCount[59];
          this.netSend = this.netSendCount[59];
          this.macAddr = rsp.data.net.mac;
          this.netRecive = this.netReciveCount[59]
          this.netSend = this.netSendCount[59]
          this.macAddr = rsp.data.net.mac
          if (rsp.data.net.addr.length) {
            this.ipAddr = rsp.data.net.addr[0].addr;
            this.ipAddr = rsp.data.net.addr[0].addr
          }

          // 磁盘
          rsp.data.disk.sort(function (obj1, obj2) {
            var val1 = obj1.name;
            var val2 = obj2.name;
          rsp.data.disk.sort(function(obj1, obj2) {
            var val1 = obj1.name
            var val2 = obj2.name
            if (val1 < val2) {
              return -1;
              return -1
            } else if (val1 > val2) {
              return 1;
              return 1
            } else {
              return 0;
              return 0
            }
          });
          })

          rsp.data.disk.forEach((d) => {
            if (d.name in this.disks) {
              this.disks[d.name].readBytes =
                this.disks[d.name].readBytes.slice(1);
              this.disks[d.name].readBytes.push(d.readBytes);
              this.disks[d.name].writeBytes =
                this.disks[d.name].writeBytes.slice(1);
              this.disks[d.name].writeBytes.push(d.writeBytes);
              this.disks[d.name].readBytes = this.disks[d.name].readBytes.slice(1)
              this.disks[d.name].readBytes.push(d.readBytes)
              this.disks[d.name].writeBytes = this.disks[d.name].writeBytes.slice(1)
              this.disks[d.name].writeBytes.push(d.writeBytes)
            } else {
              this.disks[d.name] = {};
              this.disks[d.name]["info"] = d.info;
              this.disks[d.name]["readBytes"] = Array.from(
                { length: 60 },
                () => 0
              );
              this.disks[d.name]["writeBytes"] = Array.from(
                { length: 60 },
                () => 0
              );
              this.disks[d.name] = {}
              this.disks[d.name]["info"] = d.info
              this.disks[d.name]["readBytes"] = Array.from({ length: 60 }, () => 0)
              this.disks[d.name]["writeBytes"] = Array.from({ length: 60 }, () => 0)
            }
          });
          })

          // this.disks = rsp.data.disk;
        }

        this.setChartData();
        this.setChartData()
        setTimeout(() => {
          this.getSystemState();
        }, 1000);
      });
          this.getSystemState()
        }, 1000)
      })
    },
    isShow(authority) {
      if (this.isAdmin) {
        return true;
        return true
      } else if (this.buttonAuthority.indexOf("," + authority + ",") > -1) {
        return true;
        return true
      } else {
        return false;
        return false
      }
    },
    format(array) {
      return [
        this.$moment(array[0]).format("YYYY-MM-DD"),
        this.$moment(array[1]).format("YYYY-MM-DD"),
      ];
      return [this.$moment(array[0]).format("YYYY-MM-DD"), this.$moment(array[1]).format("YYYY-MM-DD")]
    },
    setActiveChartItem(item) {
      this.activeChartItem = item;
      this.eChartsObj.clear();
      this.setChartData();
      this.activeChartItem = item
      this.eChartsObj.clear()
      this.setChartData()
    },
    initChart() {
      this.eChartsObj = echarts.init(this.$refs.graphs);
      this.getSystemState();
      this.eChartsObj = echarts.init(this.$refs.graphs)
      this.getSystemState()
    },
    setChartData() {
      let option = JSON.parse(JSON.stringify(this.eChartsBaseOpt));
      let option = JSON.parse(JSON.stringify(this.eChartsBaseOpt))
      switch (this.activeChartItem) {
        case "cpu":
          this.yAxisMaxVal = this.cpuModel;
          option.title.text = "CPU";
          option.title.subtext = "%占用率";
          option.yAxis.max = 100;
          option.yAxis.min = 0;
          option.grid.borderColor = "#8aadd0";
          option.series[0].itemStyle.color = "#8aadd0";
          option.series[0].areaStyle.color = "#a8d4ff";
          option.series[0].data = this.cpuUtilizations;
          this.yAxisMaxVal = this.cpuModel
          option.title.text = "CPU"
          option.title.subtext = "%占用率"
          option.yAxis.max = 100
          option.yAxis.min = 0
          option.grid.borderColor = "#8aadd0"
          option.series[0].itemStyle.color = "#8aadd0"
          option.series[0].areaStyle.color = "#a8d4ff"
          option.series[0].data = this.cpuUtilizations

          break;
          break
        case "mem":
          this.yAxisMaxVal = this.memTotal + "G";
          option.title.text = "内存";
          option.title.subtext = "内存使用量";
          option.yAxis.max = 100;
          option.yAxis.min = 0;
          option.grid.borderColor = "#ff9900";
          option.series[0].itemStyle.color = "#ff9900";
          option.series[0].areaStyle.color = "#f7bb88";
          option.series[0].data = this.memUtilizations;
          break;
          this.yAxisMaxVal = this.memTotal + "G"
          option.title.text = "内存"
          option.title.subtext = "内存使用量"
          option.yAxis.max = 100
          option.yAxis.min = 0
          option.grid.borderColor = "#ff9900"
          option.series[0].itemStyle.color = "#ff9900"
          option.series[0].areaStyle.color = "#f7bb88"
          option.series[0].data = this.memUtilizations
          break
        case "gpu":
          this.yAxisMaxVal = "100%";
          option.title.text = "算力";
          option.title.subtext = "%使用率";
          option.yAxis.max = 100;
          option.yAxis.min = 0;
          option.grid.borderColor = "#bc84d8";
          option.series[0].itemStyle.color = "#bc84d8";
          option.series[0].areaStyle.color = "#de9dff";
          option.series[0].data = this.gpuUtilizations;
          break;
          this.yAxisMaxVal = "100%"
          option.title.text = "算力"
          option.title.subtext = "%使用率"
          option.yAxis.max = 100
          option.yAxis.min = 0
          option.grid.borderColor = "#bc84d8"
          option.series[0].itemStyle.color = "#bc84d8"
          option.series[0].areaStyle.color = "#de9dff"
          option.series[0].data = this.gpuUtilizations
          break
        case "net":
          this.yAxisMaxVal = "";
          option.title.text = "网络";
          option.title.subtext = "网络负载";
          option.grid.borderColor = "#4696da";
          option.series[0].itemStyle.color = "#ffa16a";
          option.series[0].areaStyle.color = "#d68658";
          option.series[0].data = this.netReciveCount;
          this.yAxisMaxVal = ""
          option.title.text = "网络"
          option.title.subtext = "网络负载"
          option.grid.borderColor = "#4696da"
          option.series[0].itemStyle.color = "#ffa16a"
          option.series[0].areaStyle.color = "#d68658"
          option.series[0].data = this.netReciveCount
          option.series.push({
            type: "line",
            symbol: "none",
            data: this.netSendCount,
            // smooth: true,
            itemStyle: {
              color: "#4696da",
              color: "#4696da"
            },
            areaStyle: {
              color: "#4eacfd",
            },
          });
          break;
              color: "#4eacfd"
            }
          })
          break
        default:
          if (this.activeChartItem.indexOf("disk|") == 0) {
            let dev = this.activeChartItem.split("|")[1];
            let dev = this.activeChartItem.split("|")[1]

            this.yAxisMaxVal = "";
            option.title.text = "磁盘";
            option.title.subtext = "磁盘传输速率";
            option.grid.borderColor = "#33cc66";
            option.series[0].itemStyle.color = "#4696da";
            option.series[0].areaStyle.color = "#4eacfd";
            option.series[0].data = this.disks[dev].readBytes;
            this.yAxisMaxVal = ""
            option.title.text = "磁盘"
            option.title.subtext = "磁盘传输速率"
            option.grid.borderColor = "#33cc66"
            option.series[0].itemStyle.color = "#4696da"
            option.series[0].areaStyle.color = "#4eacfd"
            option.series[0].data = this.disks[dev].readBytes
            option.series.push({
              type: "line",
              symbol: "none",
              data: this.disks[dev].writeBytes,
              // smooth: true,
              itemStyle: {
                color: "#33ff66",
                color: "#33ff66"
              },
              areaStyle: {
                color: "#33cc66",
              },
            });
                color: "#33cc66"
              }
            })

            this.activeDisk = this.disks[dev].info;
            this.ioRead = this.disks[dev].readBytes[59];
            this.ioWrite = this.disks[dev].writeBytes[59];
            this.activeDisk = this.disks[dev].info
            this.ioRead = this.disks[dev].readBytes[59]
            this.ioWrite = this.disks[dev].writeBytes[59]
          }
          break;
          break
      }

      this.eChartsObj.setOption(option);
    },
  },
};
      this.eChartsObj.setOption(option)
    }
  }
}
</script>
<style lang="scss">
.s-system-monitor {
@@ -749,10 +677,7 @@
    .el-table td.el-table__cell {
      border-bottom: none;
    }
    .el-table--striped
      .el-table__body
      tr.el-table__row--striped
      td.el-table__cell {
    .el-table--striped .el-table__body tr.el-table__row--striped td.el-table__cell {
      background: #f8f8ff;
    }