<!--
 * @Author: SunTao 328867980@qq.com
 * @Date: 2024-10-29 15:23:44
 * @LastEditors: SunTao 328867980@qq.com
 * @LastEditTime: 2024-12-18 15:41:16
 * @FilePath: \znxjxt-ui\src\views\index-components\road-index.vue
 * @Description: 首页-公路资产
-->


<template>
  <div class="content">
    <div class="title">
      <span>公路资产</span>
      <el-radio-group v-model="checkCycle" size="mini" @change="changCycle">
        <el-radio-button label="day">今日</el-radio-button>
        <el-radio-button label="month">本月</el-radio-button>
        <el-radio-button label="year">本年</el-radio-button>
      </el-radio-group>
    </div>
    <div class="top-div">
      <a>累计公路资产总数</a>
      <span v-for="(item, index) in roadNum" :key="`top-span-${index}`">{{
        item
      }}</span
      >个
    </div>
    <div class="middle-div">
      <fssm-scroll class="scroll-div">
        <div
          class="middle-item"
          :class="`middle-item-${index}`"
          v-for="(item, index) in middleList"
          :key="`middle-item-${index}`"
        >
          <span>{{ item.label }}</span>
          <span>{{ item.value }}</span>
        </div>
      </fssm-scroll>
    </div>
    <div class="road-chart" ref="roadChart"></div>
  </div>
</template>

  <script>
import * as echarts from "echarts";
// 接口
import { getEquipment, getEquipmentLog } from "@/api/xj/index/index";
import fssmScroll from "@/components/scroll/fssm-scroll.vue";
export default {
  components: { fssmScroll },
  name: "RoadIndex",
  data() {
    return {
      // 巡查周期
      checkCycle: "day",
      // 累计公路资产总数
      roadNum: [],
      // 中间循环数据
      middleList: [],
      // 下方echart图数据
      roadChartData: [],
    };
  },
  mounted() {
    this.getTopData();
    this.getBottomData();
  },
  methods: {
    /**
     * @description: 切换巡查周期事件
     * @param {*}
     * @return {*}
     */
    changCycle() {
      this.getTopData();
      this.getBottomData();
    },

    /**
     * @description: 获取顶端数据
     * @param {*}
     * @return {*}
     */
    getTopData() {
      getEquipment({ dateType: this.checkCycle }).then(({ code, data }) => {
        if (code === 200) {
          this.roadNum = String(data.count).split("");
          this.middleList = data.sacle;
        }
      });
    },

    /**
     * @description: 获取底部echart数据
     * @param {*}
     * @return {*}
     */
    getBottomData() {
      getEquipmentLog({ dateType: this.checkCycle }).then(({ code, data }) => {
        if (code === 200) {
          this.roadChartData = data;
          this.$nextTick(() => {
            this.drawRoadChart();
          });
        }
      });
    },

    /**
     * @description: 绘制echart图
     * @param {*}
     * @return {*}
     */
    drawRoadChart() {
      if (this.$refs.roadChart) {
        const xData = this.roadChartData.map((item) => {
          return item.label;
        });
        const y1Data = this.roadChartData.map((item) => {
          return item.total;
        });
        const y2Data = this.roadChartData.map((item) => {
          return item.value;
        });
        const chart = echarts.init(this.$refs.roadChart);
        chart.setOption({
          color: ["#388BD8", "#04DAD7"],
          title: [
            // 中心比例
            {
              text: "路产趋势",
              x: "1%",
              y: "1%",
              textStyle: {
                fontSize: 14,
              },
            },
          ],
          tooltip: {
            trigger: "axis",
          },
          grid: {
            top: "20%",
            left: "3%",
            right: "4%",
            bottom: "3%",
            containLabel: true,
          },
          legend: {
            right: "5%",
          },
          xAxis: [
            {
              type: "category",
              data: xData,
              axisTick: {
                show: false, //隐藏X轴刻度
              },
              axisLabel: { color: "#A2B0B8" },
              axisLine: {
                lineStyle: {
                  color: "#3C6579",
                  width: 1,
                },
              },
              splitLine: {
                show: true,
              },
            },
          ],
          yAxis: [
            {
              name: "",
              type: "value",
              minInterval: 1,
              axisLine: {
                lineStyle: {
                  color: "#A2B0B8",
                },
              },
              axisLabel: {
                // "formatter": "{value} T/h"
                // formatter: "{value}",
              },
              splitLine: {
                show: true,
              },
            },
          ],
          series: [
            {
              name: "路产总数",
              type: "bar",
              barWidth: 20,
              itemStyle: {
                borderWidth: 1,
                borderRadius: [3, 3, 0, 0],
                color: "#388BD8",
              },
              data: y1Data,
            },
            {
              name: "异常设施数量",
              type: "bar",
              barWidth: 20,
              itemStyle: {
                borderWidth: 1,
                borderRadius: [3, 3, 0, 0],
                color: "#38C8D8",
              },
              data: y2Data,
            },
          ],
          dataZoom: [
            {
              // 设置滚动条的隐藏与显示
              show: false,
              // 设置滚动条类型
              type: "slider",
              // 设置背景颜色
              backgroundColor: "rgba(225,225,225,0.2)",
              // 设置选中范围的填充颜色
              fillerColor: "#ccc",
              // 设置边框颜色
              borderColor: "rgba(225,225,225,0.2)",
              // 是否显示detail，即拖拽时候显示详细数值信息
              showDetail: false,
              // 数据窗口范围的起始数值
              startValue: this.roadChartData.length > 6 ? this.roadChartData.length - 6 : 0,
              // 数据窗口范围的结束数值（一页显示多少条数据）
              endValue: this.roadChartData.length,
              // empty：当前数据窗口外的数据，被设置为空。
              // 即不会影响其他轴的数据范围
              filterMode: "empty",
              // 设置滚动条宽度，相对于盒子宽度
              width: "80%",
              // 设置滚动条高度
              height: 5,
              // 设置滚动条显示位置
              left: "center",
              // 是否锁定选择区域（或叫做数据窗口）的大小
              zoomLoxk: true,
              // 控制手柄的尺寸
              handleSize: 10,
              // dataZoom-slider组件离容器下侧的距离
              bottom: 0,
            },
            {
              // 没有下面这块的话，只能拖动滚动条，
              // 鼠标滚轮在区域内不能控制外部滚动条
              type: "inside",
              // 滚轮是否触发缩放
              zoomOnMouseWheel: false,
              // 鼠标滚轮触发滚动
              moveOnMouseMove: true,
              moveOnMouseWheel: true,
            },
          ],
        });
        window.addEventListener("resize", () => {
          chart.resize();
        });
      }
    },
  },
};
</script>

  <style lang="scss" scoped>
.content {
  width: 100%;
  height: 100%;
  padding: 1rem;

  .title {
    width: 100%;
    height: 10%;
    display: flex;
    align-items: center;
    padding-left: 3rem;
    justify-content: space-between;
    background: url("../../assets/index/div-title.png") no-repeat;
    background-size: 5%;
    background-position: 0 30%;
    font-size: 1.2rem;

    span {
      font-family: "DouYu";
    }
  }

  .top-div {
    width: 100%;
    height: 10%;
    display: flex;
    align-items: center;
    padding-left: 3rem;
    background: url("../../assets/index/top-div-title.png") no-repeat;
    background-size: 100% 100%;
    font-size: 1rem;

    a {
      margin-top: 0.4rem;
      font-family: "DouYu";
    }

    span {
      width: 1.2rem;
      margin: 0 0.1rem;
      font-size: 1.5rem;
      color: #388bd8;
      background: #ffffff;
      box-shadow: inset 1px 1px 1px 1px rgba(0, 0, 0, 0.16);
      border-radius: 3px 3px 3px 3px;
    }
  }

  .middle-div {
    width: 100%;
    height: 30%;

    .scroll-div {
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      justify-content: space-around;
      align-items: flex-end;
    }

    .middle-item {
      // width: 24%;
      width: 28%;
      height: 40%;
      padding: 0 0.5rem 0 7%;
      margin: 0.4rem 0;
      display: flex;
      align-items: center;
      justify-content: space-between;
      background-color: #f2f9fe;
      border-radius: 0.2rem;
      font-size: 0.9rem;
    }

    .middle-item-0 {
      background: url("~@/assets/index/middle-item-0.png") no-repeat;
      background-size: 120% 100%;
    }

    .middle-item-1 {
      background: url("~@/assets/index/middle-item-1.png") no-repeat;
      background-size: 120% 100%;
    }

    .middle-item-2 {
      background: url("~@/assets/index/middle-item-2.png") no-repeat;
      background-size: 120% 100%;
    }

    .middle-item-3 {
      background: url("~@/assets/index/middle-item-3.png") no-repeat;
      background-size: 120% 100%;
    }

    .middle-item-4 {
      background: url("~@/assets/index/middle-item-4.png") no-repeat;
      background-size: 120% 100%;
    }

    .middle-item-5 {
      background: url("~@/assets/index/middle-item-5.png") no-repeat;
      background-size: 120% 100%;
    }

    .middle-item-6 {
      background: url("~@/assets/index/middle-item-6.png") no-repeat;
      background-size: 120% 100%;
    }

    .middle-item-7 {
      background: url("~@/assets/index/middle-item-7.png") no-repeat;
      background-size: 120% 100%;
    }

    .middle-item-8 {
      background: url("~@/assets/index/middle-item-8.png") no-repeat;
      background-size: 120% 100%;
    }

    .middle-item-9 {
      background: url("~@/assets/index/middle-item-9.png") no-repeat;
      background-size: 120% 100%;
    }

    .middle-item-10 {
      background: url("~@/assets/index/middle-item-10.png") no-repeat;
      background-size: 120% 100%;
    }

    .middle-item-11 {
      background: url("~@/assets/index/middle-item-11.png") no-repeat;
      background-size: 120% 100%;
    }

    .middle-item-12 {
      background: url("~@/assets/index/middle-item-12.png") no-repeat;
      background-size: 120% 100%;
    }
  }

  .road-chart {
    width: 100%;
    height: 50%;
  }
}
</style>
