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

@@ -1,217 +1,45 @@
<template>
  <div>
    <el-row>
      <el-col :span="24">
        <basic-container v-loading="loading">
          <avue-data-tabs :option="topOption"></avue-data-tabs>
        </basic-container>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="16" style="height: 560px">
        <basic-container>
          <el-collapse v-model="activeNames">
            <el-collapse-item name="1" title="欢迎使用PLT-WEB平台">
              <div>
                1、北京宏博远达科技有限公司（以下简称“宏博远达”）长期专注于制造业信息化建设，为客户提供企业信息化整体解决方案及相关软件研发、咨询及实施服务。宏博远达客户群体涵盖航空、航天、船舶、兵器、汽车、通用机械、电子等制造行业，通过与客户深度合作，承担了多项国家级软件研发与技术服务项目，拥有多项具有自主知识产权的软件产品。
              </div>
              <div>
                2、为了给客户提供更多的技术创新能力及相应的企业级管理支撑平台，宏博远达研发了具有自主知识产权的企业级信息化整体解决方案，同时针对客户的特定需求，提供了高度可定制的专业应用。为了进一步提升技术服务能力，宏博远达投入专门力量在前沿技术方面进行探索，在企业私有云计算和大数据等领域不断取得突破。随着新一代业务与管理技术平台的推出，更增强了公司为客户提供高质量、全方位、深层次服务的技术能力。
              </div>
              <div>
                3、宏博远达一直秉承“用智慧为客户创造价值”的宗旨，愿以“诚信负责”的态度和专业化的服务，在企业信息化发展的道路上，与客户一起成长，共同见证成功！
              </div>
            </el-collapse-item>

            <el-collapse-item name="2" title="服务计划制定">
              <div>
                1、根据客户实际需求，宏博远达将与客户共同制定年度服务计划，商定具体的服务对象、服务内容、定期维护的服务时间、技术交流的主题、具体的维护人员安排等服务细节。
              </div>
              <div>
                2、客户可通过电话、电子邮件、函件等方式取得系统技术支持。对于系统以外的问题，我们会尽力协助客户找到解决途径。
              </div>
              <div>
                3、对于远程无法解决的故障(问题)，宏博远达工程师将在合同规定的时间内到达客户现场进行故障诊断及处理，做好相应的记录。必要时需要重新收集系统信息，并归档。对于非系统的原因而引起的故障(问题)，宏博远达将关心和协助客户解决故障(问题)。
              </div>
              <div>
                4、在其他情形下，宏博远达也可提供必要的现场服务。如为客户获得的合法操作系统进行升级服务、为客户安装必要的软件等的服务、配合客户做主机系统方面的测试、为客户的应用调整提供系统方面的支持等等。
              </div>
              <div>
                5、宏博远达还将为客户提供定期的系统性能评估与优化服务。通过对系统运行数据的深入分析，我们将识别潜在的性能瓶颈，提出针对性的优化建议，并协助客户实施优化措施。这包括但不限于硬件资源的合理配置、软件参数的调优、数据库性能的提升等，旨在确保系统能够持续稳定、高效地运行，满足客户的业务发展需求。同时，我们也将根据系统评估结果，为客户提供未来的系统升级和扩展规划建议，帮助客户提前布局，应对未来的业务增长和技术变革。
              </div>
            </el-collapse-item>
          </el-collapse>
        </basic-container>
      </el-col>
      <el-col :span="8" style="height: 560px">
        <el-row>
          <basic-container>
            <div class="el-font-size">
              <span>产品名称</span>
              <el-divider direction="vertical"/>
              <span><el-tag>PLT-WEB平台</el-tag></span>
              <el-divider content-position="right"><i class="el-icon-star-off"/></el-divider>

              <span>当前用户</span>
              <el-divider direction="vertical"/>
              <span><el-tag type="success">{{ userInfo.userName }}</el-tag></span>
              <el-divider content-position="right"><i class="el-icon-star-off"/></el-divider>

              <span>说明文档</span>
              <el-divider direction="vertical"/>
              <span>
                <el-link href="https://bladex.vip" target="_blank"
                         type="primary">https://bladex.vip
                </el-link>
              </span>
              <el-divider content-position="right"><i class="el-icon-star-off"/></el-divider>

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

      </el-col>
    </el-row>
    <component :is="showComponent"></component>
  </div>
</template>

<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'
import func from "@/util/func";
import adminIndex from './adminIndex.vue';
import workIndex from './workIndex.vue';

export default {
  name: "wel",
  components:{adminIndex,workIndex},
  data() {
    return {
      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: []
          }
        ]
      }
      showComponent: null, // 初始不显示任何组件
    };
  },
  computed: {
    ...mapGetters(["userInfo"]),
  },
  watch: {
    'userInfo.userId'() {
      //是管理员进入管理员首页
      if(this.userInfo.userId.includes('admin')){
        this.showComponent=adminIndex;
      }else {
        this.showComponent=workIndex;
      }
    }
  },
  created() {
    this.getLogHandler();
    //是管理员进入管理员首页
    if(this.userInfo.userId.includes('admin')){
      this.showComponent=adminIndex;
    }else {
      this.showComponent=workIndex;
    }
  },
  methods: {
    getLogHandler() {
      this.loading = true;

      // 日志请求和展示的相关的配置
      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 = logConfig.map(config => getLogListByContion(1, -1, {logType: config.logType, roleType}));

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

        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 => {
        this.$message.error(error);
        this.loading = false;
      });
    }
  },
};
</script>