<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 dataList">
            <div class="liquid-chart" :id="`liquidfill${item}`">
              {{ item.count }}
            </div>
            <p>{{ item.title }}</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 { getChartData, getListData } from "@/api/avoidanceSys/ai";
import * as echarts from "echarts";

export default {
  name: "LineChart",
  data() {
    return {
      chartData: {},
      dataList: [],
    };
  },

  watch: {},
  created() {},
  mounted() {
    setTimeout(() => {
      // this.getWarehouseList();
      // this.getWarehoseListInfo();
      // this.initCharts();
      // this.initCharts1();
      this.getListData();
      this.getChartData();
    }, 500);
  },
  methods: {
    getChartData(type) {
      /** 查询应急预案信息列表 */
      getChartData({
        pageNum: 1,
        pageSize: 99999,
      }).then((response) => {
        this.chartData = response.data;
        this.$nextTick(() => {
          this.initCharts();
        });
      });
    },
    getListData(type) {
      /** 查询应急预案信息列表 */
      getListData({
        pageNum: 1,
        pageSize: 99999,
      }).then((response) => {
        this.dataList = response.data.data;
      });
    },

    initCharts() {
      var chartDom = document.getElementById("chart");
      var myChart = echarts.init(chartDom);
      var option;

      option = {
        legend: {
          top: 25,
          right: "8%", // 靠右
          icon: "rect", // 设置为圆形图标
          itemWidth: 10, // 图标宽度
          itemHeight: 10, // 图标高度
          itemGap: 20, // 图标间距
          itemStyle: {
            // 图标样式
            color: "#fff", // 设置图标颜色
          },
          align: "left",
          textStyle: {
            color: "#fff", // 设置字体颜色
            fontSize: "0.16rem", // 设置字体大小
          },
          itemStyle: {
            color: "#1f8fff",
          },
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            label: {
              backgroundColor: "#6a7985",
            },
          },
        },
        toolbox: {},
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          right: "8%",
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            boundaryGap: false,
            data: [],
            // axisLabel: {
            //     rotate: 10 // 设置倾斜角度，单位为度
            // },
            axisLine: { lineStyle: { color: "#a3e4f5" } },
            axisTick: { show: false },
          },
        ],
        yAxis: [
          {
            type: "value",
            axisLabel: {
              show: true, // 显示刻度标签
              textStyle: { color: "#fff" },
            },
          },
        ],
        series: [
          {
            name: "Email",
            type: "line",
            stack: "Total",
            lineStyle: {
              color: "#1f8fff",
            },
            areaStyle: {
              color: "#1e84e8",
            },
            emphasis: {
              focus: "series",
            },
            data: [120, 132, 101, 134, 90, 230, 210],
          },
        ],
      };
      option.xAxis[0].data = this.chartData.xaxis;
      option.series = this.chartData.series.map((item) => {
        return {
          name: item.name,
          type: "line",
          stack: "Total",
          lineStyle: {
            color: "#1f8fff",
          },
          areaStyle: {
            color: "#1e84e8",
          },
          emphasis: {
            focus: "series",
          },
          data: item.data,
        };
      });
      myChart.setOption(option);
      // 窗口大小变化时重新调整图表布局
      window.addEventListener("resize", function () {
        myChart.resize(); // 调用resize方法
      });
    },
  },
};
</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 {
    height: 1.22rem;
    display: flex;
    justify-content: space-around;
    align-items: center;
    font-size: 0.16rem;
    > div {
      width: 0.8rem;
      height: 0.8rem;
      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;
        margin-bottom: 0.1rem;
        justify-content: center;
        align-items: center;
        font-family: "diget year";
        font-size: 0.36rem;
        // 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;
        color: #fff;

      }
    }
    > 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.65rem;
    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 12px 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>