middleground_code_v2/src/views/index_v2.vue

<template>
  <div class="home">
    <!--上面块运行情况-->
    <div class="operationInfo">
      <!--  异常日志-->
      <div class="errLogs">
        <div class="title">异常日志</div>
        <div class="errorInfo">
          <div class="img">
            <img src="@/assets/images/index_v2_error.png"/>
          </div>
          <div class="num">{{ errorNum }}</div>
        </div>
        <!--        轮播图-->
        <div class="swiper">
          <el-carousel height="150px" arrow="never" :loop="true">
            <el-carousel-item v-for="(item,index) in errList" :key="index">
              <div class="errList">
                <div class="errItem" v-for="row in errList[index]">
                  <div class="img">
                    <img :src="row.imgUrl" alt="" @error="handleImageError(row)"/>
                  </div>
                  <div class="num">
                    {{ row.num }}
                  </div>
                </div>
              </div>
            </el-carousel-item>
          </el-carousel>
        </div>
      </div>
      <!--      接口运行情况-->
      <div class="apiInfo">
        <div class="title">接口运行情况</div>
        <div class="table">
          <div class="tableTitle">
            <div class="app">应用</div>
            <div class="total">总数</div>
            <div class="start">启动</div>
            <div class="stop">停用</div>
          </div>
          <div class="content" @mouseenter="mouseenterHandle" @mouseleave="mouseleaveHandle">
            <div class="tableContent" ref="refcontent">
              <div class="line" v-for="(row,index) in this.apiInfoTableData" :key="index">
                <div class="app">
                  <img :src="row.imgUrl" alt="" @error="handleImageError(row)"/>
                </div>
                <div class="total">{{ row.num ? row.num : 0 }}</div>
                <div class="start">{{ row.normalNum ? row.normalNum : 0 }}</div>
                <div class="stop">{{ row.abnormalNum ? row.abnormalNum : 0 }}</div>
              </div>
            </div>
          </div>

        </div>
      </div>
      <!--      任务运行情况-->
      <div class="taskInfo">
        <div class="title">任务运行情况</div>
        <div class="taskInfoList">
          <div class="total">
            <div class="text">总任务</div>
            <div class="num">{{ taskTotal }}</div>
          </div>
          <div class="start">
            <div class="text">运行中</div>
            <div class="num">{{ taskStart }}</div>
          </div>
          <div class="stop">
            <div class="text">停止</div>
            <div class="num">{{ taskStop }}</div>
          </div>
        </div>
      </div>
    </div>
    <!--    柱状图-->
    <div class="echarts">
      <div class="title">数据接入</div>
      <div class="form">
        <BarChart :proportion="proportion" :DataCollection="echartsData"></BarChart>
      </div>
    </div>
  </div>
</template>

<script>

import request from "@/utils/request";
import {authApi} from "@/api/apis/auth";

export default {
  name: 'Index',
  components: {},
  data() {
    return {
      //echats尺寸控制
      proportion: {
        width: "100%",
        height: "40vh",
      },
      //echarts数据
      echartsData: {
        "title": [
          "正常",
          "异常",
        ],
        "parameter": [],
        "series": [
          {
            "name": "正常",
            "type": "bar",
            "data": [],
            "barWidth": "10%",
            "barGap": "0"
          },
          {
            "name": "异常",
            "type": "bar",
            "data": [],
            "barWidth": "10%",
            "barGap": "0"
          },
        ]
      },
      errorNum: 4,//异常日志数量
      errList: [],//异常日志轮播图
      apiInfoTableData: [],//接口运行情况表单数据
      taskTotal: 19,//任务总数
      taskStart: 20,//任务运行
      taskStop: 21,//任务停止
    }
  },
  mounted() {

    this.init()
  },
  methods: {
    // 初始化各个表单
    async init() {
      this.getErrorLogs()
      this.getApiInfo()
      this.getTaskInfo()
      this.getTableData()
    },
    //图片处理
    imgHandle(arr = []) {
      arr.map(el => {
        return request({
          url: "/kangarooDataCenterV3/entranceController/fileDownloadNew?id=" + el.path,
          method: "get",
          responseType: 'arraybuffer'
        }).then((res) => {
          let tempImgUrl =
            "data:image/png/jpg;base64," + btoa(new Uint8Array(res).reduce((data, byte) => data + String.fromCharCode(byte), ""));
          this.$set(el, 'imgUrl', tempImgUrl)
        })
      })
    },
    //图片发生错误时 使用默认图片
    handleImageError(row = {}) {
      row.imgUrl = require('@/assets/images/defaultIcon.png')
    },
    //接口运行情况鼠标移入移出动画开始停止效果
    mouseenterHandle() {
      this.$refs.refcontent.style.animationPlayState = 'paused'
    },
    mouseleaveHandle() {
      this.$refs.refcontent.style.animationPlayState = ''
    },
    //   异常日志
    async getErrorLogs() {
      const res = await authApi('homeService', 'app', 'appErrorNum', '', {})
      if (res.status === '200') {
        this.errList = []
        //图片处理
        this.imgHandle(res.attribute)
        let tempIndex = 0 //计数器要三个一组
        let tempArr = [] //临时数组

        console.log(res.attribute, '异常日志')
        this.errorNum = 0
        res.attribute.some((item, index) => {
          this.errorNum += item.num * 1
          tempArr.push(item)
          tempIndex++
          if (tempIndex === 3) {
            this.errList.push(tempArr)
            tempIndex = 0
            tempArr = []
          }
          if (index === res.attribute.length - 1 && tempIndex !== 0) {
            this.errList.push(tempArr)
            return true
          }
        })
        console.log(this.errList, 'errList')
      }

    },
    //接口运行情况
    async getApiInfo() {
      const res = await authApi('homeService', 'app', 'appApiNum', '', {})
      if (res.status === '200') {
        this.apiInfoTableData = []
        this.imgHandle(res.attribute)
        this.apiInfoTableData = res.attribute

        if (this.apiInfoTableData.length >= 4) {
          this.apiInfoTableData = [...this.apiInfoTableData, ...this.apiInfoTableData]
          //接口运行情况加入动画
          this.$refs.refcontent.classList.add('movego')
          this.$refs.refcontent.style.animationDuration = `${this.apiInfoTableData.length}s`
        }
        console.log(this.apiInfoTableData, 'this.apiInfoTableData')
      }

    },
    //任务运行情况
    async getTaskInfo() {
      const res = await authApi('homeService', 'app', 'taskNum', '', {})
      console.log(res, '任务运行情况')
      this.taskTotal = res.attribute.num ? res.attribute.num : 0
      this.taskStart = res.attribute.normalNum ? res.attribute.normalNum : 0
      this.taskStop = res.attribute.abnormalNum ? res.attribute.abnormalNum : 0
    },
    //数据接入
    async getTableData() {
      let tempDate = []
      let normalNumData = []
      let abnormalNumData = []
      const res = await authApi('homeService', 'app', 'sevenNum', '', {})
      res.attribute.forEach(item => {
        tempDate.push(item.name)
        normalNumData.push(item.normalNum ? item.normalNum : 0)
        abnormalNumData.push(item.abnormalNum ? item.abnormalNum : 0)
      })
      //录用数据到echarts
      //日期
      this.echartsData.parameter = tempDate
      //正常数据
      this.echartsData.series[0].data = normalNumData
      //异常数据
      this.echartsData.series[1].data = abnormalNumData

      console.log(res, '数据接入')
    }
  }
}
</script>

<style lang="scss" scoped>
.home {
  //background: url(~@/assets/images/index_v2_bgc.png) no-repeat;
  padding: 1vh .5vw 1vh;
  background-color: #fcfcfc;
  display: flex;
  flex-direction: column;
  //上半部分
  .operationInfo {

    flex: 1;
    display: flex;
    //异常日志
    .errLogs {
      box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1); /* 轻盈的阴影效果 */
      background-color: #fff;
      padding: 8px;
      //background: url(~@/assets/images/index_v2_border.png) no-repeat;
      //background-size: 100% 100%;
      flex: 1;
      height: 100%;


      > .errorInfo {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 7vh;

        > .img {
          margin-right: 20px;
          width: 5vw;
          height: 100%;
          box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
          img {
            width: 5vw;
            height: 7vh;

          }
        }

        > .num {
          width: 5vw;
          font-size: 3vw;
          color: #000;
          font-weight: 700;
          text-align: center;
        }

      }

      > .swiper {
        margin-top: 3vh;

        .errList {
          margin-top: 20px;
          display: flex;
          justify-content: space-around;

          > .errItem {
            flex: 1;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            border-right: .5px #ccc solid;

            > .img {
              width: 3vw;
              height: 3vw;
              border-radius: 8px;
              overflow: hidden;
              display: flex;
              align-items: center;
              box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
              img {
                width: 100%;
              }
            }

            > .num {
              margin-top: 10px;
              width: 4vw;
              text-align: center;
              color: #000;
              font-weight: 700;
              font-size: 1.5vw;
            }

            &:nth-last-child(1) {
              border-right: 0px;
            }
          }
        }

      }
    }

    //接口运行情况
    .apiInfo {
      box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1); /* 轻盈的阴影效果 */
      background-color: #fff;
      padding: 8px;
      //background: url(~@/assets/images/index_v2_border.png) no-repeat;
      //background-size: 100% 100%;
      flex: 1;
      margin: 0 10px;
      height: 100%;
      display: flex;
      flex-direction: column;

      > .table {
        padding: 0 15px;

        > .tableTitle {
          display: flex;
          justify-content: space-around;
          padding-bottom: 10px;
          border-bottom: #ccc 1px solid;

          > div {
            display: flex;
            color: #000;
            font-size: 20px;
          }
        }

        .content {
          height: 22vh;
          overflow: hidden;

          > .tableContent {

            > .line {
              padding: 15px 0;
              display: flex;
              justify-content: space-around;
              align-items: center;
              border-bottom: 1px #ccc dashed;
              > div {
                color: #000;
                font-size: 32px;
                flex: 1;
                text-align: center;
                font-weight: 700;
                display: flex;
                align-items: center;
                justify-content: center;
                img {
                  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
                  width: 3vw;
                }
              }
            }
          }
        }

      }
    }

    .taskInfo {
      box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1); /* 轻盈的阴影效果 */
      background-color: #fff;
      padding: 8px;
      //background: url(~@/assets/images/index_v2_border.png) no-repeat;
      //background-size: 100% 100%;
      flex: 1;
      height: 100%;

      > .taskInfoList {
        display: flex;
        justify-content: space-around;
        > div {
          border-radius: 16px;
          width: 28%;
          height: 23vh;
          display: flex;
          font-weight: 700;
          flex-direction: column;
          align-items: center;
          font-size: 30px;
          color: #fff;
          .text{
            margin-top: 5vh;
          }
          .num{
            margin-top: 5vh;
          }
        }

        > .total {
          background-color: #1d46ee;
        }

        > .start {
          background-color: #7ad756;
        }

        > .stop {
          background-color: #e76e3e;
        }
      }
    }

  }

  //所有标题统一样式
  .title {
    //background: url(~@/assets/images/index_v2_title.png) no-repeat;
    //background-size: 100% 100%;
    width: 20vw;
    height: 6vh;
    color: #000;
    line-height: 6vh;
    padding-left: 1vw;

    font-size: 24px;
    font-weight: 700;
  }

  .echarts {
    flex: 2;
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1); /* 轻盈的阴影效果 */
    margin-top: 10px;
    background-color: #fff;
    .form{
      margin-top: 5vh;
    }
  }
}

//接口运行情况
@keyframes move {
  0% {
    transform: translateY(0);
  }

  100% {
    transform: translateY(-51%);
  }
}

.movego {
  animation: move 80s linear infinite;
}
</style>