<template>
  <div class="abs-full title4">
    <div class="m-tt">
      <h4>AI分析</h4>
    </div>
    <div class="m-body">
      <div class="warehouse-info">
  
            <div class="warehouse-cover">
              <div v-for="item in 3">
                <div class="liquid-chart" :id="`liquidfill${item}`">
                  {{ item }}
                </div>
                <p>{{ item }}哈哈</p>
              </div>
            </div>
        
        <div class="chart-wrapper">
          <div id="chart" ref="chart" style="width: 4.5rem; height: 3rem;"></div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import {

} from "@/api/avoidanceSys/qiaoliang";
import * as echarts from 'echarts';

export default {
  name: 'LineChart',
  data() {
    return {
      WarehoseListInfo: [],
      warehouseList: [],
    };
  },

  watch: {},
  created() {},
  mounted() {
    setTimeout(() => {
      // this.getWarehouseList();
      // this.getWarehoseListInfo();
      this.initCharts()
    }, 500);
  },
  methods: {
    initCharts(){
      var chartDom = document.getElementById('chart');
      var myChart = echarts.init(chartDom);
      var option;

      option = {
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: [2, 20],
            type: 'line',
            areaStyle: {}
          }
        ]
      };

      option && myChart.setOption(option);
    },
    /** 查询数据字典-物资类别信息列表 */
    getWarehoseListInfo() {
      this.loading = true;
      warehouseMaterialList().then((response) => {
        this.WarehoseListInfo = response.rows;
        this.$nextTick(() => {
          this.initCharts(); // 等待 DOM 渲染完再初始化图表
        });
      });
    },
    getWarehouseList() {
      listWarehouse().then((response) => {
        this.warehouseList = this.transformArray(
          response.rows,
          "id",
          "warehouseName"
        );
      });
    },
  },
};
</script> 
 
<style scoped lang="scss">
* {
  padding: 0;
  margin: 0;
}
@font-face {
  font-family: "diget year";
  src: url("~@/assets/fonts/DS-Digital.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}
.warehouse-info {
  width: 100%;
  height: 5.81rem;
  .warehouse-cover {
    width: 3.8rem;
    height: 1.22rem;
    margin: 0 auto;

    position: relative;
    // background-image: url(~@/assets/images/bigscreen/icon_bg.png);
    background-repeat: no-repeat;
    background-position: center bottom;
    background-size: auto;
    font-size: 0.16rem;
    > div {
      position: absolute;
      width: 0.8rem;
      height: 0.8rem;
      top: 0.5rem;
      left: -0.1rem;
      border-radius: 50%;
      
      &:nth-child(1){
        background-image: url(~@/assets/images/dpNew3/icon1.png);
      }
      &:nth-child(2){
        background-image: url(~@/assets/images/dpNew3/icon2.png);
      }
      &:nth-child(3){
        background-image: url(~@/assets/images/dpNew3/icon3.png);
      }
      /* 之后的div使用模数计数器进行循环 */
      // &:nth-child(n+4) {
      //     /* 使用模数计算背景图片索引 */
      //     /* 例如：nth-child(4) 将会应用 unique-image1.jpg (模数为0)，然后 nth-child(7) 会再次应用 unique-image1.jpg */
      //     background-image: url('~@/assets/images/bigscreen/icon' + ( (n - 1) % 3 + 1 ) + '.png');
      // }

      background-repeat: no-repeat;
      background-position: center;
      background-size: 100% 100%;
      text-align: center;
      line-height: 0.2rem;
      cursor: pointer;
      color: #00ffc6;
      .liquid-chart {
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        font-family: "diget year";
        font-size: 0.26rem;
        text-shadow: 0px 3px 12px rgba(24, 153, 159, 0.82);
        background: linear-gradient(180deg, #ffffff 0%, #00ffc6 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
      }
    }
    > div:nth-child(2) {
      color: #ffe25d;
      // top: 0.2rem;
      left: 38%;
      .liquid-chart {
        text-shadow: 0px 4px 30px rgba(5, 54, 78, 0.48);
        background: linear-gradient(180deg, #ffffff 0%, #ffe25d 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
      }
    }
    > div:nth-child(3) {
      color: #11b9ff;
      top: 0.5rem;
      right: 0px;
      left: unset;
      .liquid-chart {
        text-shadow: 0px 3px 12px rgba(24, 153, 159, 0.82);
        background: linear-gradient(180deg, #ffffff 0%, #11b9ff 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
      }
    }
  }
}
.tyler-table {
  margin-top: 0.2rem;
  font-size: 0.18rem;
  .tyler-table-header {
    background: linear-gradient(
      0deg,
      rgba(10, 171, 255, 0.3) 0%,
      rgba(14, 108, 159, 0.3) 100%
    );
    border-radius: 4px 4px 0px 0px;
    border: 1px solid;

    display: grid;
    grid-gap: 0.1rem;
    grid-template-columns: 3fr 1fr 3fr 3fr;
    padding: 0 0.1rem;
    color: #0adfff;
    p {
      text-align: center;
    }
  }
  .tyler-table-body {
    list-style: none;
    padding: 0;

    li {
      font-size: 0.16rem;
      display: grid;
      grid-gap: 0.1rem;
      grid-template-columns: 3fr 1fr 3fr 3fr;
      padding: 0.16rem 0.1rem;
      color: #fff;
      border-bottom: 1px solid #34a2ff;
      span {
        text-align: center;
      }
    }
  }
}
.scrolling2 {
  min-height: 1.86rem !important;
}
.echart-bt {
  width: 100%;
  height: 1.8rem;
  position: relative;
  .echart-bg {
    position: absolute;
    width: 2.1rem;
    height: 2.2rem;
    background-image: url(/static/img/chart.023a3958.png);
    background-repeat: no-repeat;
    background-position: cover;
    background-size: 100% 100%;
    -webkit-transform: rotateX(60deg);
    transform: rotateX(58deg);
    left: 27%;
    top: -0.06rem;
  }
}
.EchartsPie {
  width: 100%;
  height: 100%;
}

::v-deep .el-carousel__arrow{
  display: none;
}

::v-deep .highcharts-credits {
  display: none;
}
::v-deep .highcharts-container {
  // height: 50% !important;
}
</style>


<style scoped lang="scss">
.abs-full {
  position: relative;
  display: flex;
  flex-direction: column;
  //padding:.08rem .10rem;
  //background:no-repeat center center url('~@/assets/images/layout/side_l_md.png');background-size:100% 100%;
  // background-color: rgba(29, 57, 110, 0.65);
 
  &.title4 {
    height: 5rem;
    width: 4.76rem;
    background: no-repeat center center
      url("~@/assets/images/dpNew2/title4.png");
    background-size: 100% 100%;
  }
  background: linear-gradient(
    to right,
    rgba(0, 60, 144, 0.9),
    /* #003c90 - 90% 不透明度 */ rgba(0, 44, 106, 0.7)
      /* #002c6a - 70% 不透明度 */
  );

  .chart {
    position: relative;
  }
}
.m-tt {
  height: 0.48rem;
  width: 100%;

  position: absolute;
  top: 0.07rem;
  left: 0.2rem;
  h4 {
    height: 100%;
    line-height: 0.48rem;
    margin: 0;
    font-size: 0.22rem;
    letter-spacing: 0.01rem;
    padding-left: 0.4rem;
    font-family: Source Han Sans SC;
    font-weight: bold;
    color: #ffffff;
    text-shadow: 0px 3px 8px rgba(19, 80, 113, 0.48);
    background: linear-gradient(180deg, #ffffff 54.00390625%, #28caff 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }
}

.m-body {
  display: flex;
  flex-direction: column;
  padding: 0.2rem;
  padding-top: 0.5rem;

}

</style>