<template>
  <div class="home">
    <div class="first">
      <h4 style="margin:13px 0px 0px 20px">算法统计</h4>
      <div class="chart">
        <RingChart />
        <BarChart width="700px" />
      </div>
    </div>
    <div class="second">
      <div class="left">
        <img :src="imageSrc" alt="My Image" />
      </div>
      <div class="right">
        <h4 style="margin:13px 0px 13px 20px">快捷入口</h4>
        <div class="enter">
          <el-card class="box-card algoSub" shadow="hover">
            <router-link to="/conf/subType">
              <div>
                <i class="icon el-icon-edit"></i>算法子类型配置
              </div>
            </router-link>
          </el-card>
          <el-card class="box-card input" shadow="hover">
            <router-link to="/conf/field">
              <div>
                <i class="icon el-icon-sort"></i>算法子类型输入输出配置
              </div>
            </router-link>
          </el-card>
          <el-card class="box-card data" shadow="hover">
            <router-link to="/algorithm/algorithm">
              <div>
                <i class="icon el-icon-set-up"></i>数据处理（去噪、补充、扩充）
              </div>
            </router-link>
          </el-card>
          <el-card class="box-card characteristic" shadow="hover">
            <router-link to="/algorithm/algorithm2">
              <div>
                <i class="icon el-icon-bangzhu"></i>特征提取
              </div>
            </router-link>
          </el-card>
          <el-card class="box-card fault" shadow="hover">
            <router-link to="/algorithm/algorithm3">
              <div>
                <i class="icon el-icon-timer"></i>故障预测（退化评估、故障预测）
              </div>
            </router-link>
          </el-card>
          <el-card class="box-card contrast" shadow="hover">
            <router-link to="/dataManage/contrast">
              <div>
                <i class="icon el-icon-c-scale-to-original"></i>数据对比
              </div>
            </router-link>
          </el-card>
        </div>
      </div>
      <!-- <div class="square">数据</div>
      <div class="diamond">
        <p class="diamond-p">是否为理想数据？</p>
      </div> -->
    </div>
  </div>
</template>

<script>
import CountTo from 'vue-count-to'
import RingChart from '@/views/homePage/ringChart'
import BarChart from '@/views/dashboard/BarChart'
export default {
  name: 'Index',
  components: {
    CountTo,
    RingChart,
    BarChart,
  },
  data() {
    return {
      // 版本号
      version: '3.8.6',
      imageSrc: '/流程图.png',
    }
  },
  methods: {
    goTarget(href) {
      window.open(href, '_blank')
    },
    handleSetLineChartData(type) {
      this.$emit('handleSetLineChartData', type)
    },
  },
}
</script>

<style scoped lang="scss">
.home {
  width: 100%; /* 设置宽度为100%，以充满父 div 的宽度 */
  min-height: calc(100vh - 84px); /* 设置高度为100%，以充满父 div 的高度 */
  background-color: #f4f4f4;
  overflow: hidden;
}
.first {
  width: 97%;
  height: 300px;
  margin: 20px;
  background-color: white;
  border-radius: 15px;
  overflow: hidden;
}
.chart {
  display: flex;
  justify-content: space-evenly;
  margin-left: 30px;
}
.second {
  width: 97%;
  height: 500px;
  margin: 20px;
  justify-content: space-between;
  display: flex;
  .left {
    width: 73%;
    height: 500px;
    background-color: white;
    border-radius: 15px;
    overflow: hidden;
    img {
      width: 100%;
      height: 100%;
    }
  }
  .right {
    width: 26%;
    height: 500px;
    background-color: white;
    border-radius: 15px;
    overflow: hidden;
    .enter {
      width: 100%;
      height: 450px;
      display: flex;
      flex-direction: column;
      align-items: center;
      font-size: 14px;
      cursor: pointer;
      .box-card {
        width: 85%;
        margin-bottom: 10px;
        :hover {
          transition: transform 0.1s; /* 添加过渡效果 */
          transform: scale(1.1); /* 鼠标悬停时放大 */
        }
      }
      .algoSub {
        border: 1px solid #ffdc60;
        color: #ffdc60;
      }
      .input {
        border: 1px solid #f44336;
        color: #f44336;
      }
      .data {
        border: 1px solid #02b608;
        color: #02b608;
      }
      .characteristic {
        border: 1px solid #770aed;
        color: #770aed;
      }
      .fault {
        border: 1px solid #df23cb;
        color: #df23cb;
      }
      .contrast {
        border: 1px solid #f14405;
        color: #f14405;
      }
    }
  }
  .icon {
    font-size: 18px;
    margin: 0px 15px 0px 15px;
  }
}

.square {
  width: 90px;
  height: 50px;
  line-height: 50px;
  text-align: center;
  border-radius: 12px;
  font-size: 14px;
  border: 2px solid grey;
}
.diamond {
  height: 100px;
  width: 100px;
  transform: rotateZ(45deg) skew(-20deg, -20deg);
  position: relative;
  border: 2px solid grey;
  .diamond-p {
    position: absolute;
    width: 140px;
    top: 14%;
    left: -17%;
    transform: skew(20deg, 20deg) rotateZ(-45deg);
  }
}
</style>

