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

<!--
 * @Author: SunTao 328867980@qq.com
 * @Date: 2024-10-29 15:30:35
 * @LastEditors: SunTao 328867980@qq.com
 * @LastEditTime: 2024-12-10 11:56:27
 * @FilePath: \znxjxt-ui\src\views\index-components\traffic-index.vue
 * @Description: 首页-路况评定
-->

<template>
  <div class="content">
    <div class="title">
      <span>路况评定</span>
      <div class="title-select">
        <el-radio-group v-model="itemSelect" size="mini" @change="changeRadio">
          <el-radio-button v-for="(item, index) in selectTypeArr" :label="item.value" :key="`left-screen-${index}`">{{
            item.label }}</el-radio-button>
        </el-radio-group>
      </div>
    </div>
    <div class="traffic-table">
      <el-table :data="trafficTableData" style="width: 100%" height="95%">
        <el-table-column type="index" label="序号"></el-table-column>
        <el-table-column prop="name" show-overflow-tooltip label="名称">
        </el-table-column>
        <el-table-column prop="roadPerKm" label="路面病害数(个/km)">
        </el-table-column>
        <el-table-column prop="eventPerKm" label="交安病害数(个/km)">
        </el-table-column>
        <el-table-column prop="bridgePerKm" label="桥隧病害数(个/km)">
        </el-table-column>
        <el-table-column prop="greenPerKm" label="绿化问题数(个/km)">
        </el-table-column>
      </el-table>
    </div>
    <div class="traffic-chart" ref="trafficChart"></div>
  </div>
</template>

<script>
import * as echarts from "echarts";
// 接口
import {
  getRoadCondition,
  getRoadConditionLog,
  selectTypeList,
} from "@/api/xj/index/index";
export default {
  name: "TrafficIndex",
  data() {
    return {
      // 右上角单选择框
      selectTypeArr: [],
      // 右上角选择框绑定
      itemSelect: "",
      // 路况表格数据
      trafficTableData: [],
      // echart数据
      trafficEchartData: [],
    };
  },
  created() {
    this.getTableData();
    this.getSelect();
    this.getLogData();
  },
  methods: {
    /**
     * @description: 获取数据栏右上角选项数据
     * @param {*}
     * @return {*}
     */
    getSelect() {
      selectTypeList().then(({ code, data }) => {
        if (code === 200) {
          this.selectTypeArr = data;
        }
      });
    },

    /**
     * @description: 右上角单选改变事件
     * @param {*}
     * @return {*}
     */
    changeRadio() {
      this.getTableData();
      this.getLogData();
    },

    /**
     * @description: 获取表格数据
     * @param {*}
     * @return {*}
     */
    getTableData() {
      getRoadCondition({ type: this.itemSelect }).then(({ code, data }) => {
        if (code === 200) {
          this.trafficTableData = data;
          this.$nextTick(() => {
            this.drawTrafficChart();
          });
        }
      });
    },

    /**
     * @description: 获取echart数据
     * @param {*}
     * @return {*}
     */
    getLogData() {
      getRoadConditionLog({ type: this.itemSelect }).then(({ code, data }) => {
        if (code === 200) {
          this.trafficEchartData = data;
          this.$nextTick(() => {
            this.drawTrafficChart();
          });
        }
      });
    },

    /**
     * @description: 绘制柱状图
     * @param {*}
     * @return {*}
     */
    drawTrafficChart() {
      if (this.$refs.trafficChart) {
        const xData = this.trafficEchartData.map((item) => {
          return item.name;
        });
        const y1Data = this.trafficEchartData.map((item) => {
          return item.road;
        });
        const y2Data = this.trafficEchartData.map((item) => {
          return item.event;
        });
        const y3Data = this.trafficEchartData.map((item) => {
          return item.bridge;
        });
        const y4Data = this.trafficEchartData.map((item) => {
          return item.green;
        });
        const chart = echarts.init(this.$refs.trafficChart);
        chart.setOption({
          color: ["#388BD8", "#04DAD7", "#F8A74E", "#8448FF"],
          title: [
            // 中心比例
            {
              text: "病害趋势",
              x: "1%",
              y: "1%",
              textStyle: {
                fontSize: 14,
              },
            },
          ],
          legend: {
            show: true,
            right: "3%",
          },
          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,
              },
              boundaryGap: false,
            },
          ],
          yAxis: [
            {
              nameTextStyle: {
                color: "#fff",
                fontSize: 12,
              },
              name: "",
              type: "value",
              axisLabel: {
                show: true,
                color: "#9eaaba",
              },
              axisLine: { show: false },
              splitLine: { show: true },
            },
          ],
          series: [
            {
              name: "路面病害数",
              type: "line",
              showSymbol: false,
              smooth: true,
              areaStyle: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: "#388BD8",
                  },
                  {
                    offset: 1,
                    color: "#ffffff",
                  },
                ]),
              },
              data: y1Data,
            },
            {
              name: "交安病害数",
              type: "line",
              showSymbol: false,
              smooth: true,
              areaStyle: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: "#04DAD7",
                  },
                  {
                    offset: 1,
                    color: "#ffffff",
                  },
                ]),
              },
              data: y3Data,
            },
            {
              name: "桥隧病害数",
              type: "line",
              showSymbol: false,
              smooth: true,
              areaStyle: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: "#F8A74E",
                  },
                  {
                    offset: 1,
                    color: "#ffffff",
                  },
                ]),
              },
              data: y4Data,
            },
            {
              name: "绿化问题数",
              type: "line",
              showSymbol: false,
              smooth: true,
              areaStyle: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: "#8448FF",
                  },
                  {
                    offset: 1,
                    color: "#ffffff",
                  },
                ]),
              },
              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.trafficEchartData.length > 6 ? this.trafficEchartData.length - 6 : 0,
              // 数据窗口范围的结束数值（一页显示多少条数据）
              endValue: this.trafficEchartData.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;
    justify-content: space-between;
    padding-left: 3rem;
    background: url("../../assets/index/div-title.png") no-repeat;
    background-size: 5%;
    background-position: 0 30%;
    font-size: 1.2rem;

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

  .traffic-table {
    width: 100%;
    height: 45%;

    ::v-deep .el-table tr {
      background-color: #f6f7fa;
    }

    ::v-deep .el-table .el-table__header-wrapper th,
    .el-table .el-table__fixed-header-wrapper th {
      background-color: #f6f7fa;
    }
  }

  .traffic-chart {
    width: 100%;
    height: 45%;
  }
}
</style>