vehicle_visual/src/components/CarRecord.vue

<template>
  <div class="peoplerecord">
    <!-- 头部区域 -->
    <div class="head">
      <div class="head-msg">
        <img src="@/assets/car.svg" />
      </div>
      <div class="head-info">车辆记录</div>
    </div>

    <!-- 左侧车辆记录区域 -->
    <div class="left">
      <div class="left-watch">
        <!-- 车辆记录标题区域 -->
        <div class="watch-title">
          <div class="watch-img">
            <img src="@/assets/jiantou.png" />
          </div>
          <div class="watch-info">车辆记录</div>
        </div>
        <!-- 车辆记录筛选区域 -->
        <div class="watch_search">
          <div class="search_type">
            类型：
            <el-select
              style="width: 150px"
              size="small"
              v-model="value_type"
              placeholder="请选择驶入方向"
              @change="handleChange"
            >
              <el-option
                v-for="(item, index) in options_type"
                :key="index"
                :label="item"
                :value="item"
              >
              </el-option>
            </el-select>
          </div>
          <div class="search_time">
            时间：
            <el-date-picker
              style="width: 150px"
              type="date"
              size="small"
              placeholder="选择日期"
              v-model="value_time"
              @change="handleChange"
              value-format="yyyy-MM-dd"
            >
            </el-date-picker>
          </div>
          <div class="search_place">
            来源地：
            <el-select
              style="width: 150px"
              size="small"
              clearable
              v-model="value_place"
              placeholder="请选择来源地"
              @change="handleChange"
            >
              <el-option
                v-for="(item, index) in options_place"
                :key="index"
                :label="item"
                :value="item"
              >
              </el-option>
            </el-select>
          </div>
        </div>
        <!-- 车辆记录表格区域 -->
        <div class="watch-form" v-if="tableData.length">
          <el-table
            v-loading="loading"
            element-loading-text="加载中"
            element-loading-spinner="el-icon-loading"
            element-loading-background="rgba(0, 0, 0, 0.8)"
            stripe
            :data="tableData"
            style="width: 100%"
            height="467"
            v-moretable="moretable"
          >
            <el-table-column prop="id" label="识别ID" align="center" width="93">
            </el-table-column>
            <el-table-column prop="fx" label="类型" align="center" width="100">
            </el-table-column>
            <el-table-column
              prop="user_name"
              label="姓名"
              align="center"
              width="100"
            >
            </el-table-column>
            <el-table-column
              prop="time"
              label="时间"
              align="center"
              width="160"
            >
            </el-table-column>
            <el-table-column
              label="位置"
              align="center"
              width="186"
              show-overflow-tooltip
            >
              <template slot-scope="{ row }">
                {{ row.channel_id }}号通道
              </template>
            </el-table-column>
            <el-table-column
              prop="car_number"
              label="车牌"
              align="center"
              width="117"
              show-overflow-tooltip
            >
            </el-table-column>
          </el-table>
        </div>
      </div>
    </div>

    <!-- 右侧区域 -->
    <div class="right">
      <!-- 折线图区域 -->
      <div class="right-line">
        <!-- 折线图标题 -->
        <div class="right-line-title">
          <div class="line-img">
            <img src="@/assets/jiantou.png" />
          </div>
          <div class="line-info">6小时车流量</div>
        </div>
        <!-- 折线图 -->
        <div class="right-line-body" id="line"></div>
      </div>
      <!-- 柱状图区域 -->
      <div class="right-column">
        <!-- 柱状图标题 -->
        <div class="right-column-title">
          <div class="column-img">
            <img src="@/assets/jiantou.png" />
          </div>
          <div class="column-info">24小时车辆来源地</div>
        </div>
        <!-- 柱状图 -->
        <div class="right-column-body" id="column"></div>
      </div>
    </div>
  </div>
</template>

<script>
// 引入echarts
import * as echarts from "echarts";

export default {
  name: "CarRecord",
  data() {
    return {
      // 类型筛选框绑定值
      value_type: "驶入",
      // 时间筛选框绑定值
      value_time: "",
      // 来源地筛选框绑定值
      value_place: "",
      // 类型筛选框数组
      options_type: ["全部", "驶入", "驶出"],
      //来源地筛选框数组
      options_place: [],
      // 车辆记录列表数据
      tableData: [],
      // 车辆记录列表总条数
      total: "",
      // 车辆记录列表当前页
      page: 1,
      // 车辆记录表格加载中效果
      loading: false,
      // 折线图数据
      timeList: [], // 时间数组
      freeList: [], // 免费车数组
      monthlyList: [], // 月租车数组
      visitorList: [], // 访客车数组
      temporaryList: [], // 临时车数组
      // 柱状图数据
      topPlace: [], // 车辆来源地排行地点
      topValue: [], // 车辆来源地排行数值
    };
  },
  created() {
    this.getData();
    this.getCarFromData();
    this.getCarFromTopData();
    this.carMonitorData();
  },
  watch: {
    // 监听数据变化重新渲染图表
    topPlace() {
      this.getColumnChart();
    },
    timeList() {
      this.getLineChart();
    },
  },
  methods: {
    // 获取车辆记录表格数据
    async getData() {
      this.loading = true;
      let res = await this.$axios({
        url: "/carstop/carMonitor/ioqueryRecord.action",
        method: "post",
        params: {
          time: this.value_time,
          from: this.value_place,
          io: this.value_type,
          page: this.page,
          rows: 20,
        },
      });
      // console.log(res.data);
      if (res.data.code && res.data.code == 200) {
        this.tableData = [...this.tableData, ...res.data.rows];
        this.total = res.data.total;
      } else {
        this.$message.error(res.data.message || "暂无数据");
      }
      this.loading = false;
    },
    // 获取车辆来源地数据
    async getCarFromData() {
      let res = await this.$axios({
        url: "/carstop/carMonitor/iocar_from.action",
        method: "post",
      });
      // console.log(res.data);
      if (res.data.code == 200) {
        let temList = [];
        res.data.data.forEach((element) => {
          temList.push(element.car_no);
        });
        this.options_place = temList;
      } else {
        this.$message.error(res.data.message);
      }
    },
    // 获取车辆来源地排名数据
    async getCarFromTopData() {
      let res = await this.$axios({
        url: "/carstop/carMonitor/iocarTj.action",
        method: "post",
      });
      // console.log(res.data);
      if (res.data.code == 200) {
        let temList = res.data.data;
        // 将需要排序的 key, 按照 "从大到小" 进行排列
        let sortKeys = Object.keys(temList).sort((a, b) => {
          return temList[b] - temList[a];
        });
        // 循环排列好的 key, 重新组成一个新的数组
        let arr = [];
        for (let sortIndex in sortKeys) {
          arr.push(temList[sortKeys[sortIndex]]);
        }
        this.topPlace = sortKeys.splice(0, 5);
        this.topValue = arr.splice(0, 5);
      } else {
        this.$message.error(res.data.message);
      }
    },
    // 获取6小时车流量数据
    async carMonitorData() {
      let res = await this.$axios({
        url: "/carstop/carMonitor/ioioTj.action",
        method: "post",
      });
      // console.log(res.data);
      if (res.data.code == 200) {
        this.timeList = [];
        this.freeList = [];
        this.monthlyList = [];
        this.visitorList = [];
        this.temporaryList = [];
        res.data.data.forEach((element) => {
          this.timeList.push(element.duration);
          this.freeList.push(element.typeTj[0].num);
          this.monthlyList.push(element.typeTj[1].num);
          this.visitorList.push(element.typeTj[2].num);
          this.temporaryList.push(element.typeTj[3].num);
        });
      } else {
        this.$message.error(res.data.message);
      }
    },
    // 车辆记录表格滑动到底部加载更多回调
    moretable() {
      if (this.tableData.length < this.total) {
        this.page += 1;
        this.getData();
      }
    },
    // 筛选回调
    handleChange() {
      this.tableData = [];
      this.page = 1;
      this.getData();
    },
    // 创建折线图
    getLineChart() {
      let chartLineDom = document.getElementById("line");
      let myLineChart = echarts.init(chartLineDom);
      // 折线图表配置
      let lineOption = {
        tooltip: {
          trigger: "axis",
        },
        legend: {
          data: ["免费车", "月租车", "访客车", "临时车"],
          textStyle: {
            color: "#fff",
          },
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: this.timeList,
          axisLine: {
            lineStyle: {
              color: "#0febff",
            },
          },
          axisLabel: {
            color: "#fff",
          },
          splitLine: {
            show: true,
            lineStyle: {
              width: 1,
              color: "#0febff",
            },
          },
        },
        yAxis: {
          type: "value",
          axisLabel: {
            formatter: "{value}",

            color: "#fff",
          },
          splitLine: {
            show: true,
            lineStyle: {
              width: 1,
              color: "#0febff",
            },
          },
        },
        series: [
          {
            name: "免费车",
            type: "line",
            data: this.freeList,
            //设定为实心点
            symbol: "circle",
            //设定实心点的大小
            symbolSize: 10,
            //是否显示数值
            // label: { show: true },
          },
          {
            name: "月租车",
            type: "line",
            data: this.monthlyList,
            symbol: "circle",
            symbolSize: 10,
          },
          {
            name: "访客车",
            type: "line",
            data: this.visitorList,
            symbol: "circle",
            symbolSize: 10,
          },
          {
            name: "临时车",
            type: "line",
            data: this.temporaryList,
            symbol: "circle",
            symbolSize: 10,
          },
        ],
      };
      myLineChart.setOption(lineOption);
    },
    // 创建柱状图
    getColumnChart() {
      let chartColumnDom = document.getElementById("column");
      let myColumnChart = echarts.init(chartColumnDom);
      // 饼形图表配置
      let columnOption = {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          top: "13%",
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            data: this.topPlace,
            axisTick: {
              alignWithLabel: true,
            },
            axisLine: {
              lineStyle: {
                color: "#0febff",
              },
            },
            axisLabel: {
              color: "#fff",
            },
            // splitLine: {
            //   show: true,
            //   lineStyle: {
            //     width: 1,
            //     color: "#0febff",
            //   },
            // },
          },
        ],
        yAxis: {
          type: "value",
          axisLabel: {
            formatter: "{value}",
            color: "#fff",
          },
          splitLine: {
            show: true,
            lineStyle: {
              width: 1,
              color: "transparent",
            },
          },
        },
        series: [
          {
            name: "数量",
            type: "bar",
            barWidth: "60%",
            data: this.topValue,
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: "#0FEBFE",
                },
                {
                  offset: 1,
                  color: "#276691",
                },
              ]),
            },
            label: {
              show: true, //开启显示
              position: "top", //在上方显示
              textStyle: {
                //数值样式
                color: "#fff",
              },
            },
          },
        ],
      };
      myColumnChart.setOption(columnOption);
    },
  },
};
</script>

<style lang="scss" scoped>
.peoplerecord {
  box-sizing: border-box;
  margin: auto;
  width: 1161px;
  height: 642px;
  background-image: url(../assets/backImg.png);
  background-size: 100% 100%;
  background-color: #24578c;
  .head {
    display: flex;
    width: 1161px;
    height: 60px;
    .head-msg {
      display: flex;
      justify-content: center;
      align-items: center;
      margin-top: 5px;
      width: 58px;
      height: 55px;
      img {
        height: 35px;
      }
    }
    .head-info {
      margin-top: 5px;
      line-height: 55px;
      font-size: 25px;
      font-weight: bold;
      color: #fff;
    }
  }
  .left {
    display: flex;
    flex-wrap: wrap;
    float: left;
    width: 800px;
    height: 586px;
    .left-watch {
      margin: 0 11px 0 17px;
      width: 756px;
      height: 571px;
      .watch-title {
        display: flex;
        align-items: center;
        width: 756px;
        height: 54px;
        .watch-img {
          width: 26px;
          height: 16px;
          img {
            width: 100%;
          }
        }
        .watch-info {
          margin-left: 10px;
          width: 79px;
          height: 25px;
          font-size: 19px;
          font-weight: bold;
          color: #0febff;
        }
      }
      .watch_search {
        display: flex;
        margin-top: -10px;
        width: 756px;
        height: 60px;
        color: #fff;
        .search_type {
          flex: 1;
          display: flex;
          align-items: center;
        }

        .search_time {
          flex: 1;
          display: flex;
          align-items: center;
        }
        .search_place {
          flex: 1;
          display: flex;
          align-items: center;
        }
      }
      .watch-form {
        width: 756px;
        height: 467px;
      }
    }
  }
  .right {
    float: left;
    width: 350px;
    height: 586px;
    .right-line {
      width: 350px;
      height: 50%;
      .right-line-title {
        display: flex;
        align-items: center;
        width: 350px;
        height: 56px;
        .line-img {
          width: 26px;
          height: 16px;
          img {
            width: 100%;
          }
        }
        .line-info {
          margin-left: 10px;
          width: 126px;
          height: 25px;
          font-size: 19px;
          font-weight: bold;
          color: #0febff;
        }
      }
      .right-line-body {
        width: 350px;
        height: 237px;
      }
    }
    .right-column {
      width: 350px;
      height: 50%;
      margin-top: -6px;
      .right-column-title {
        display: flex;
        align-items: center;
        width: 350px;
        height: 56px;
        .column-img {
          width: 26px;
          height: 16px;
          img {
            width: 100%;
          }
        }
        .column-info {
          margin-left: 10px;
          width: 180px;
          height: 25px;
          font-size: 19px;
          font-weight: bold;
          color: #0febff;
        }
      }
      .right-column-body {
        width: 350px;
        height: 237px;
      }
    }
  }
  ::v-deep .el-table,
  ::v-deep .el-table__expanded-cell {
    background-color: transparent;
    background-color: #0e3779;
  }

  ::v-deep .el-table th,
  ::v-deep .el-table tr,
  ::v-deep .el-table td {
    color: #fff;
    background-color: transparent;
  }

  // 鼠标悬停时背景颜色设置
  ::v-deep .el-table tbody tr:hover > td {
    background-color: #0e3779;
  }

  ::v-deep .el-table__header-wrapper {
    background-color: transparent;
    background-color: #25608f;
  }
  // 滚动条隐藏
  ::-webkit-scrollbar {
    height: 0;
    width: 0;
    color: transparent;
  }

  // 输入框 筛选框 圆角设置
  ::v-deep .el-input__inner {
    border-radius: 20px;
    color: #fff;
    background-color: rgba($color: #fff, $alpha: 0.3);
  }

  // 斑马线隔行换色设置颜色
  ::v-deep
    .el-table--striped
    .el-table__body
    tr.el-table__row--striped.el-table__row--striped.el-table__row--striped
    td {
    background-color: rgba($color: #58beff, $alpha: 0.3);
  }

  // 清除表格默认下边框
  ::v-deep .el-table__cell,
  ::v-deep .el-table th.el-table__cell.is-leaf {
    border-bottom: none;
  }
  ::v-deep .el-table::before {
    width: 0;
  }
}
</style>