access_visual_data/src/components/PeopleRecord.vue

<template>
  <div class="peoplerecord">
    <!-- 头部区域 -->
    <div class="head">
      <div class="head-msg">
        <img src="@/assets/people.png" />
      </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-form">
          <el-table
            :data="tableData"
            border
            style="width: 100%"
            height="517"
            v-moretable="moretable"
          >
            <el-table-column label="捕获" header-align="center" width="100">
              <template slot-scope="{ row }">
                <img
                  :src="row.pictureScene"
                  style="width: 82px; height: 82px"
                />
              </template>
            </el-table-column>
            <el-table-column label="识别" header-align="center">
              <template slot-scope="{ row }">
                <div class="watch-form-list">
                  <div class="table_left">
                    <img
                      :src="row.pictureTemplate"
                      style="width: 82px; height: 82px"
                    />
                  </div>
                  <div class="table_center">
                    <div>识别ID：{{ row.recognitionId }}</div>
                    <div>姓名：{{ row.personName }}</div>
                    <div>身份：{{ row.identity }}</div>
                  </div>
                  <div class="table_right">
                    <div>时间：{{ row.dateTime }}</div>
                    <div>位置：{{ row.address }}</div>
                  </div>
                </div>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
      <!-- 历史记录区域 -->
      <div class="left-record">
        <!-- 历史记录标题区域 -->
        <div class="record-title">
          <div class="record-img">
            <img src="@/assets/jiantou.png" />
          </div>
          <div class="record-info">历史记录</div>
        </div>
        <!-- 历史记录表格区域 -->
        <div class="record-form">
          <!-- 标题 -->
          <div class="record-form-title">历史记录</div>
          <!-- 时间选择器 -->
          <div class="record-form-time">
            <div class="time">
              <el-date-picker
                type="date"
                size="mini"
                :editable="false"
                placeholder="选择日期"
                value-format="yyyy-MM-dd"
                v-model="dateTime"
                @change="handleChangeTime"
              >
              </el-date-picker>
            </div>
          </div>
          <!-- 表格数据 -->
          <div class="record-form-list">
            <el-table
              :data="recordList"
              style="width: 100%"
              height="428"
              v-moretable="moretable_record"
            >
              <el-table-column
                prop="name"
                label="姓名"
                align="center"
                width="76"
              >
              </el-table-column>
              <el-table-column
                prop="address"
                label="地址"
                align="center"
                width="89"
                show-overflow-tooltip
              >
              </el-table-column>
              <el-table-column
                prop="time"
                label="时间"
                align="center"
                width="76"
              >
              </el-table-column>
            </el-table>
          </div>
        </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">7小时人流量</div>
        </div>
        <!-- 折线图 -->
        <div class="right-line-body" id="line"></div>
      </div>
      <!-- 饼形图区域 -->
      <div class="right-pie">
        <!-- 饼形图标题 -->
        <div class="right-pie-title">
          <div class="pie-img">
            <img src="@/assets/jiantou.png" />
          </div>
          <div class="pie-info">人员比例</div>
        </div>
        <!-- 饼形图 -->
        <div class="right-pie-body" id="pie"></div>
      </div>
    </div>
  </div>
</template>

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

export default {
  name: "HelloWorld",
  data() {
    return {
      // 实时监测人员列表数据
      tableData: [],
      // 实时监测人员列表当前页
      page: 1,
      // 历史记录人员列表数据
      recordList: [],
      // 历史记录人员列表当前页
      record_page: 1,
      // 时间选择框选择的时间值
      dateTime: null,
      // 折线图数据
      dateTimeList: [], // 最近7小时的时间数组
      alumniList: [], // 校友数组
      restsList: [], // 其他数组
      staffList: [], // 教职工数组
      studentList: [], // 学生数组
      temporaryWorkerList: [], // 临时人员数组
      visitorList: [], // 访客数组
      // 饼形图数据
      pieData: [],
    };
  },
  created() {
    this.getData();
    this.getRecordData();
    this.getRatioData();
    this.getTrafficData();
  },
  watch: {
    // 监听数据变化重新渲染图表
    dateTimeList() {
      this.getLineChart();
    },
    pieData() {
      this.getPieChart();
    },
  },
  methods: {
    // 获取实时监测列表数据
    async getData() {
      let res = await this.$axios({
        url: "/accessRecord/access/record/realTime",
        method: "get",
        params: {
          page: this.page,
          size: null,
        },
      });
      // console.log(res);
      if (res.data.status == 20001) {
        this.tableData = [...this.tableData, ...res.data.data];
      } else {
        this.$message.error(res.data.desc);
      }
    },
    // 获取历史记录列表数据
    async getRecordData() {
      let res = await this.$axios({
        url: "/accessRecord/access/record/history",
        method: "get",
        params: {
          dateTime: this.dateTime,
          page: this.record_page,
          size: null,
        },
      });
      // console.log(res);
      if (res.data.status == 20001) {
        this.recordList = [...this.recordList, ...res.data.data];
      } else {
        this.$message.error(res.data.desc);
      }
    },
    // 获取人员比例数据
    async getRatioData() {
      let res = await this.$axios({
        url: "/accessRecord/access/record/ratios",
        method: "get",
      });
      // console.log(res);
      if (res.data.status == 20001) {
        this.pieData = res.data.data.filter((item) => item.value != 0);
      } else {
        this.$message.error(res.data.desc);
      }
    },
    // 获取7小时人流量数据
    async getTrafficData() {
      let res = await this.$axios({
        url: "/accessRecord/access/record/traffic",
        method: "get",
      });
      // console.log(res);
      if (res.data.status == 20001) {
        this.dateTimeList = res.data.data.dateTime;
        this.alumniList = res.data.data.alumniList;
        this.restsList = res.data.data.restsList;
        this.staffList = res.data.data.staffList;
        this.studentList = res.data.data.studentList;
        this.temporaryWorkerList = res.data.data.temporaryWorkerList;
        this.visitorList = res.data.data.visitorList;
      } else {
        this.$message.error(res.data.desc);
      }
    },
    // 历史记录表格时间选择框改变时间回调
    handleChangeTime() {
      this.recordList = [];
      this.record_page = 1;
      this.getRecordData();
    },
    // 实时监测表格滑动到底部加载更多回调
    moretable() {
      this.page += 1;
      this.getData();
    },
    // 历史记录表格滑动到底部加载更多回调
    moretable_record() {
      this.record_page += 1;
      this.getRecordData();
    },
    // 创建折线图
    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.dateTimeList,
          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.staffList,
            //设定为实心点
            symbol: "circle",
            //设定实心点的大小
            symbolSize: 10,
            //是否显示数值
            // label: { show: true },
          },
          {
            name: "学生",
            type: "line",
            data: this.studentList,
            symbol: "circle",
            symbolSize: 10,
          },
          {
            name: "其他",
            type: "line",
            symbol: "circle",
            symbolSize: 10,
            data: this.restsList,
          },
          {
            name: "校友",
            type: "line",
            symbol: "circle",
            symbolSize: 10,
            data: this.alumniList,
          },
          {
            name: "访客",
            type: "line",
            symbol: "circle",
            symbolSize: 10,
            data: this.visitorList,
          },
          {
            name: "临时人员",
            type: "line",
            symbol: "circle",
            symbolSize: 10,
            data: this.temporaryWorkerList,
          },
        ],
      };
      myLineChart.setOption(lineOption);
    },
    // 创建饼状图
    getPieChart() {
      let chartPieDom = document.getElementById("pie");
      let myPieChart = echarts.init(chartPieDom);
      // 饼形图表配置
      let pieOption = {
        legend: {
          orient: "vertical",
          align: "left",
          x: "right", //可设定图例在左、右、居中
          y: "top", //可设定图例在上、下、居中
          padding: [20, 10, 0, 0],
          textStyle: {
            color: "#fff",
          },
        },
        series: [
          {
            name: "数量",
            type: "pie",
            // 设置最小角度，解决数据差异过大问题
            minAngle: 10,
            radius: ["10%", "55%"],
            center: ["38%", "50%"],
            // 玫瑰扇形图设置
            // roseType: "radius",
            itemStyle: {
              borderRadius: 5,
            },
            data: this.pieData,
            label: {
              formatter: "{d}%",
              fontWeight: "bold",
              color: "#fff",
            },
            labelLine: {
              length: 10,
              length2: 0,
            },
          },
        ],
      };
      myPieChart.setOption(pieOption);
    },
  },
};
</script>

<style lang="scss" scoped>
.peoplerecord {
  box-sizing: border-box;
  margin: auto;
  width: 1161px;
  height: 642px;
  background-color: #24578c;
  .head {
    display: flex;
    width: 1161px;
    height: 55px;
    border-bottom: 1px solid #58beff;
    .head-msg {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 58px;
      height: 55px;
      img {
        height: 35px;
      }
    }
    .head-info {
      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: 487px;
      height: 571px;
      .watch-title {
        display: flex;
        align-items: center;
        width: 487px;
        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-form {
        width: 487px;
        height: 517px;
        // border: 1px solid #58beff;
        .watch-form-list {
          display: flex;
          justify-content: space-evenly;

          .table_left {
            flex: 1;
          }
          .table_center {
            flex: 2;
            display: flex;
            flex-direction: column;
            margin-left: 10px;
            div {
              flex: 1;
            }
          }
          .table_right {
            flex: 2;
          }
        }
      }
    }
    .left-record {
      width: 254px;
      height: 571px;
      .record-title {
        display: flex;
        align-items: center;
        width: 254px;
        height: 54px;
        .record-img {
          width: 26px;
          height: 16px;
          img {
            width: 100%;
          }
        }
        .record-info {
          margin-left: 10px;
          width: 79px;
          height: 25px;
          font-size: 19px;
          font-weight: bold;
          color: #0febff;
        }
      }
      .record-form {
        width: 254px;
        height: 517px;
        border: 1px solid #fff;
        .record-form-title {
          width: 254px;
          height: 48px;
          line-height: 48px;
          font-size: 19px;
          font-weight: 600;
          color: #ffffff;
          text-align: center;
          border-bottom: 1px solid #fff;
        }
        .record-form-time {
          width: 254px;
          height: 40px;
          .time {
            margin: auto;
            width: 160px;
            line-height: 40px;
            .el-date-editor.el-input {
              width: 100%;
            }
          }
        }
        .record-form-list {
          width: 254px;
          height: 429px;
        }
      }
    }
  }
  .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-pie {
      width: 350px;
      height: 50%;
      .right-pie-title {
        display: flex;
        align-items: center;
        width: 350px;
        height: 56px;
        .pie-img {
          width: 26px;
          height: 16px;
          img {
            width: 100%;
          }
        }
        .pie-info {
          margin-left: 10px;
          width: 126px;
          height: 25px;
          font-size: 19px;
          font-weight: bold;
          color: #0febff;
        }
      }
      .right-pie-body {
        width: 350px;
        height: 237px;
      }
    }
  }
  ::v-deep .el-table,
  ::v-deep .el-table__expanded-cell {
    background-color: transparent;
    background-color: #24578c;
  }

  ::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: skyblue;
  }

  ::v-deep .el-table__header-wrapper {
    font-size: 19px;
  }
  // 滚动条背景色
  ::-webkit-scrollbar {
    background: #24578c;
  }

  /*定义滑块 样式*/
  ::-webkit-scrollbar-thumb {
    border-radius: 3px;
    background-color: rgba($color: #063568, $alpha: 0.5);
  }
}
</style>