Source/plt-web/plt-web-ui/src/views/wel/index.vue

@@ -1,28 +1,15 @@
<template>
  <div>
    <!--    <el-row>-->
    <!--      <el-col :span="24">-->
    <!--        <third-register></third-register>-->
    <!--      </el-col>-->
    <!--    </el-row>-->
    <el-row>
      <el-col :span="24">
        <basic-container v-loading="loading">
          <!--          <div style="display: flex">-->
          <!--            <div style="height: 80px; width: 50px; overflow: hidden;margin-right: 20px">-->
          <!--              <img src="../../../public/img/mainTop.png" style="height: 100%; width: 100%; object-fit: contain;" />-->
          <!--            </div>-->
          <!--            <avue-text-ellipsis :text="text" :height="80" :width="1600" use-tooltip placement="top">-->
          <!--              <small slot="more">...</small>-->
          <!--            </avue-text-ellipsis>-->
          <!--          </div>-->
          <avue-data-tabs :option="topOption"></avue-data-tabs>
        </basic-container>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="16">
        <basic-container>
        <basic-container style="height: 560px">
          <el-collapse v-model="activeNames" @change="handleChange">
            <el-collapse-item name="1" title="欢迎使用PLT-WEB平台">
              <div>
@@ -46,6 +33,9 @@
              </div>
              <div>
                4、在其他情形下，宏博远达也可提供必要的现场服务。如为客户获得的合法操作系统进行升级服务、为客户安装必要的软件等的服务、配合客户做主机系统方面的测试、为客户的应用调整提供系统方面的支持等等。
              </div>
              <div>
                5、宏博远达还将为客户提供定期的系统性能评估与优化服务。通过对系统运行数据的深入分析，我们将识别潜在的性能瓶颈，提出针对性的优化建议，并协助客户实施优化措施。这包括但不限于硬件资源的合理配置、软件参数的调优、数据库性能的提升等，旨在确保系统能够持续稳定、高效地运行，满足客户的业务发展需求。同时，我们也将根据系统评估结果，为客户提供未来的系统升级和扩展规划建议，帮助客户提前布局，应对未来的业务增长和技术变革。
              </div>
            </el-collapse-item>
          </el-collapse>
@@ -74,6 +64,9 @@

            </div>
          </basic-container>
          <basic-container>
            <v-chart id="chart" :auto-resize="true" :options="chartOptions"></v-chart>
          </basic-container>
        </el-row>

      </el-col>
@@ -84,17 +77,65 @@
<script>
import {mapGetters} from "vuex";
import {getLogListByContion} from "@/api/system/log/logBasic";
import 'echarts'
import 'echarts/lib/chart/pie' // 导入柱状图组件
import 'echarts/lib/component/tooltip'
import 'echarts/lib/component/legend'

export default {
  name: "wel",
  data() {
    return {
      loading:false,
      text: '北京宏博远达科技有限公司（以下简称“宏博远达”）长期专注于制造业信息化建设，为客户提供企业信息化整体解决方案及相关软件研发、咨询及实施服务。宏博远达客户群体涵盖航空、航天、船舶、兵器、汽车、通用机械、电子等制造行业，通过与客户深度合作，承担了多项国家级软件研发与技术服务项目，拥有多项具有自主知识产权的软件产品。为了给客户提供更多的技术创新能力及相应的企业级管理支撑平台，宏博远达研发了具有自主知识产权的企业级信息化整体解决方案，同时针对客户的特定需求，提供了高度可定制的专业应用。为了进一步提升技术服务能力，宏博远达投入专门力量在前沿技术方面进行探索，在企业私有云计算和大数据等领域不断取得突破。随着新一代业务与管理技术平台的推出，更增强了公司为客户提供高质量、全方位、深层次服务的技术能力。宏博远达一直秉承“用智慧为客户创造价值”的宗旨，愿以“诚信负责”的态度和专业化的服务，在企业信息化发展的道路上，与客户一起成长，共同见证成功！',
      loading: false,
      activeNames: ['1', '2', '3', '5'],
      logActiveNames: ['28'],
      topOption: {
        data: []
      },
      chartOptions: {
        title: {
          text: '',
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          top: '5%',
          left: 'center'
        },
        series: [
          {
            name: '日志统计',
            type: 'pie',
            radius: ['45%', '70%'],
            avoidLabelOverlap: false,
            padAngle: 5,
            itemStyle: {
              borderRadius: 10,
              normal: {
                color: function (colors) {
                  const colorList = ['rgb(230, 71, 88)', 'rgb(178, 159, 255)', 'rgb(27, 201, 142)'];
                  return colorList[colors.dataIndex];
                }
              }
            },
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: 14,
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data: []
          }
        ]
      }
    };
  },
@@ -111,37 +152,61 @@

    getLogHandler() {
      this.loading = true;
      const logTypes = ["4", "1", "3"]; // 操作日志、登录日志、授权日志的 logType
      const logNames = ["操作日志统计", "登录日志统计", "授权日志统计"]; // 对应的日志名称
      const textList = ["当前登录日志总记录数", "当前授权日志总记录数", "当前操作日志总记录数"];
      const color = ['rgb(27, 201, 142)', 'rgb(230, 71, 88)', 'rgb(178, 159, 255)']
      const router = ['/LogOperateMain?logType=4&roleType=2', '/LogInfoMain?logType=1&roleType=2', '/LogAuthorizeMain?logType=3&roleType=2']

      // 日志请求和展示的相关的配置
      const logConfig = [
        {
          logType: "1",
          logName: "登录日志统计",
          text: "当前登录日志总记录数",
          color: 'rgb(230, 71, 88)',
          router: '/LogInfoMain?logType=1&roleType=2'
        },
        {
          logType: "3",
          logName: "授权日志统计",
          text: "当前授权日志总记录数",
          color: 'rgb(178, 159, 255)',
          router: '/LogAuthorizeMain?logType=3&roleType=2'
        },
        {
          logType: "4",
          logName: "操作日志统计",
          text: "当前操作日志总记录数",
          color: 'rgb(27, 201, 142)',
          router: '/LogOperateMain?logType=4&roleType=2'
        },
      ];

      const roleType = "2";

      const requests = logTypes.map(logType => getLogListByContion(1, -1, {logType, roleType}));
      const requests = logConfig.map(config => getLogListByContion(1, -1, {logType: config.logType, roleType}));

      Promise.all(requests).then(responses => {
        // console.log('responses', responses);
        // 计算总和
        const allcount = responses.reduce((sum, res) => sum + (res.data.total || 0), 0);
        // 计算三个日志的总和
        const totalCount = responses.reduce((sum, res) => sum + (res.data.total || 0), 0);

        this.topOption.data = responses.map((res, index) => {
          return {
            title: logNames[index],
            text: textList[index],
            color: color[index],
            subtitle: '实时',
            count: res.data.total,
            allcount: '日志总数：' + allcount,
            key: '日志',
            click: () => {
              this.$router.push({path:router[index]});
            },
          };
        });
        this.topOption.data = responses.map((res, index) => ({
          title: logConfig[index].logName,
          text: logConfig[index].text,
          color: logConfig[index].color,
          subtitle: '实时',
          count: res.data.total,
          allcount: `日志总数：${totalCount}`,
          key: '日志',
          click: () => this.$router.push({path: logConfig[index].router}),
        }));

        const chartData = responses.map((res, index) => ({
          name: logConfig[index].logName,
          value: res.data.total,
        }));
        this.$set(this.chartOptions.series[0], 'data', chartData);

        this.loading = false;
      }).catch(error => {
        console.error("An error occurred:", error);
        this.$message.error(error);
        this.loading = false;
      });
    }
  },