xjsaas-ui/src/views/index-components/daily-index.vue

<!--
 * @Author: SunTao 328867980@qq.com
 * @Date: 2024-10-29 15:12:20
 * @LastEditors: SunTao 328867980@qq.com
 * @LastEditTime: 2024-11-05 11:47:03
 * @FilePath: \znxjxt-ui\src\views\index-components\daily-index.vue
 * @Description: 首页-日常巡查
-->

<template>
  <div class="content">
    <div class="title">日常巡查</div>
    <div class="daily-content">
      <div class="left">
        <div class="left-div">
          <div class="name">巡查里程</div>
          <div class="value"><span>15.16</span>km</div>
        </div>
        <div class="left-div">
          <div class="name">覆盖道路数</div>
          <div class="value"><span>352</span>条</div>
        </div>
        <div class="left-chart" ref="rateChart"></div>
      </div>
      <div class="right">
        <div ref="trendChart"></div>
        <div ref="distributionChart">图表2</div>
      </div>
    </div>
  </div>
</template>

<script>
import * as echarts from "echarts";
export default {
  name: "DailyIndex",
  data() {
    return {};
  },
  created() {
    this.getData();
  },
  methods: {
    /* 获取数据 */
    getData() {
      this.$nextTick(() => {
        this.drawLeftChart();
        this.drawTrendChart();
        this.drawDistributionChart();
      });
    },
    /* 绘制覆盖率饼图 */
    drawLeftChart() {
      if (this.$refs.rateChart) {
        const chart = echarts.init(this.$refs.rateChart);
        const current = 45;
        chart.setOption({
          // color: ['rgba(61, 137, 247, 1)', '#f07b3f'],
          title: [
            // 中心比例
            {
              text: "80%",
              x: "center",
              y: "52%",
              textStyle: {
                fontSize: 20,
                color: "#444",
                fontWeight: "bold",
              },
            },
            {
              text: "覆盖率",
              x: "center",
              y: "10%",
              textStyle: {
                fontSize: 14,
              },
            },
          ],
          polar: {
            center: ["50%", "60%"],
            radius: ["40%", "58%"],
          },
          angleAxis: {
            max: 100,
            show: false,
          },
          radiusAxis: {
            type: "category",
            show: true,
            axisLabel: {
              show: false,
            },
            axisLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
          },
          series: [
            {
              data: [80],
              name: "",
              type: "bar",
              roundCap: true,
              showBackground: true,
              backgroundStyle: {
                color: "#BDD5F4",
              },
              coordinateSystem: "polar",
              itemStyle: {
                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                  {
                    offset: 0,
                    color: "#005DCF",
                  },
                  {
                    offset: 1,
                    color: "#00CCFF",
                  },
                ]),
              },
            },
          ],
        });
        window.addEventListener("resize", () => {
          chart.resize();
        });
      }
    },
    /* 绘制病害趋势柱状图 */
    drawTrendChart() {
      if (this.$refs.trendChart) {
        const chart = echarts.init(this.$refs.trendChart);
        chart.setOption({
          color: ["#388BD8", "#FFC400"],
          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: ["2024/2/9", "2024/2/10", "2024/2/11", "2024/2/12"],
              axisTick: {
                show: false, //隐藏X轴刻度
              },
              axisLabel: { color: "#A2B0B8" },
              axisLine: {
                lineStyle: {
                  color: "#3C6579",
                  width: 1,
                },
              },
              splitLine: {
                show: true,
              },
            },
          ],
          yAxis: [
            {
              name: "",
              type: "value",
              axisLine: {
                lineStyle: {
                  color: "#A2B0B8",
                },
              },
              axisLabel: {
                // "formatter": "{value} T/h"
                // formatter: "{value}",
              },
              splitLine: {
                show: true,
              },
            },
            {
              name: "",
              type: "value",
              axisLine: {
                lineStyle: {
                  color: "#A2B0B8",
                },
              },
              axisLabel: {
                // "formatter": "{value} T/W㎡"
                // formatter: "{value}",
              },
              splitLine: {
                show: false,
              },
            },
          ],
          series: [
            {
              type: "bar",
              barWidth: 10,
              name: "累计病害",
              data: [400, 600, 1400, 1700],
            },
            {
              type: "line",
              symbolSize: 5,
              name: "巡查里程",
              smooth: 1,
              data: [10, 40, 50, 90],
              yAxisIndex: 1,
            },
          ],
        });
        window.addEventListener("resize", () => {
          chart.resize();
        });
      }
    },
    /* 绘制病害分布柱状图 */
    drawDistributionChart() {
      const xData = [
        { name: "G1", value: 10 },
        { name: "G11", value: 12 },
        { name: "G25", value: 10 },
        { name: "G91", value: 30 },
        { name: "G1113", value: 20 },
        { name: "S2", value: 50 },
        { name: "S20", value: 30 },
      ].map((item) => {
        return item.name;
      });
      const yData = [
        { name: "G1", value: 10 },
        { name: "G11", value: 12 },
        { name: "G25", value: 10 },
        { name: "G91", value: 30 },
        { name: "G1113", value: 20 },
        { name: "S2", value: 50 },
        { name: "S20", value: 30 },
      ].map((item, index) => {
        if (index % 2 == 0) {
          return {
            ...item,
            itemStyle: {
              borderWidth: 1,
              borderRadius: [3, 3, 0, 0],
              color: "#388BD8",
            },
          };
        }
        return {
          ...item,
          itemStyle: {
            borderWidth: 1,
            borderRadius: [3, 3, 0, 0],
            color: "#38C8D8",
          },
        };
      });
      if (this.$refs.distributionChart) {
        const chart = echarts.init(this.$refs.distributionChart);
        chart.setOption({
          dataZoom: [
            {
              type: "inside",
              start: 0,
              end: 100,
            },
          ],
          title: [
            // 中心比例
            {
              text: "道路新增病害分布",
              x: "1%",
              y: "1%",
              textStyle: {
                fontSize: 14,
              },
            },
          ],
          tooltip: {
            trigger: "axis",
            padding: [5, 10, 5, 10],
          },
          grid: {
            top: "20%",
            left: "7%",
            right: "4%",
            bottom: "12%",
          },
          xAxis: [
            {
              data: xData,
              type: "category",
              axisTick: {
                show: false, //隐藏X轴刻度
              },
              axisLabel: { color: "#A2B0B8" },
              axisLine: {
                lineStyle: {
                  color: "#3C6579",
                  width: 1,
                },
              },
              splitLine: {
                show: false,
              },
            },
          ],
          yAxis: [
            {
              nameTextStyle: {
                color: "#fff",
                fontSize: 12,
              },
              name: "",
              type: "value",
              axisLabel: {
                show: true,
                color: "#9eaaba",
              },
              axisLine: { show: false },
              splitLine: { show: true },
            },
          ],
          series: [
            {
              name: "新增病害数",
              type: "bar",
              barWidth: 20,
              showBackground: true,
              backgroundStyle: {
                color: "rgba(105,160,231,0.1)",
              },
              data: yData,
            },
          ],
        });
        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;
    font-family: "DouYu";
    background: url("../../assets/index/div-title.png") no-repeat;
    background-size: 5%;
    background-position: 0 30%;
  }

  .daily-content {
    width: 100%;
    height: 90%;
    display: flex;
    justify-content: space-between;

    .left {
      width: 20%;
      height: 100%;
      background: url("../../assets/index/left-bkg.png") no-repeat;
      background-size: 100%;

      .left-div {
        height: 27.5%;
        width: calc(100% - 2rem);
        margin: 0 1rem;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        border-bottom: 1px #adc6e5 solid;

        .name {
          font-size: 0.8rem;
        }

        .value {
          line-height: 2rem;

          span {
            margin-right: 0.3rem;
            font-weight: 600;
            font-size: 1.5rem;
          }
        }
      }

      .left-chart {
        height: 45%;
        width: 100%;
        text-align: center;
        line-height: 3rem;
      }
    }

    .right {
      width: 78%;
      height: 100%;

      > div {
        height: 50%;
        width: 100%;
        background-color: #ffffff;
      }
    }
  }
}
</style>