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_search">
          <div class="search_time">
            时间：
            <el-date-picker
              type="date"
              size="small"
              placeholder="选择日期"
              v-model="timeValue"
              @change="handleChange"
              value-format="yyyy-MM-dd"
            >
            </el-date-picker>
          </div>
          <div class="search_keyword">
            关键字：
            <el-input
              style="width: 200px"
              placeholder="请输入关键字"
              size="small"
              clearable
              v-model="keyword"
              @input="handleChange"
            >
            </el-input>
          </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 label="捕获" align="center" width="93">
              <template slot-scope="{ row }">
                <img
                  :src="row.pictureScene"
                  style="width: 82px; height: 82px"
                  @click="handleBigImg(row.pictureScene)"
                />
              </template>
            </el-table-column>
            <el-table-column label="识别照片" align="center" width="93">
              <template slot-scope="{ row }">
                <img
                  :src="row.pictureTemplate"
                  style="width: 82px; height: 82px"
                  @click="handleBigImg(row.pictureTemplate)"
                />
              </template>
            </el-table-column>
            <el-table-column
              prop="recognitionId"
              label="电话号码"
              align="center"
              width="113"
              show-overflow-tooltip
            >
            </el-table-column>
            <el-table-column
              prop="personName"
              label="姓名"
              align="center"
              width="90"
              show-overflow-tooltip
            >
            </el-table-column>
            <el-table-column
              prop="identity"
              label="身份"
              align="center"
              width="80"
              show-overflow-tooltip
            >
            </el-table-column>
            <el-table-column
              prop="dateTime"
              label="时间"
              align="center"
              width="160"
              show-overflow-tooltip
            >
            </el-table-column>
            <el-table-column
              prop="address"
              label="位置"
              align="center"
              width="127"
              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-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>

    <!-- 点击图片放大区域弹窗 -->
    <el-dialog :visible.sync="dialogVisible" width="500px">
      <div class="dialog"><img :src="pop_imgurl" /></div>
    </el-dialog>
  </div>
</template>

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

export default {
  name: "HelloWorld",
  data() {
    return {
      // 实时监测人员列表数据
      tableData: [],
      // 实时监测人员列表当前页
      page: 1,
      // 时间筛选框绑定值
      timeValue: "",
      // 关键字搜索框绑定值
      keyword: "",
      // 折线图数据
      dateTimeList: [], // 最近7小时的时间数组
      alumniList: [], // 校友数组
      restsList: [], // 其他数组
      staffList: [], // 教职工数组
      studentList: [], // 学生数组
      temporaryWorkerList: [], // 临时人员数组
      visitorList: [], // 访客数组
      // 饼形图数据
      pieData: [],
      // 图片放大弹窗控制属性
      dialogVisible: false,
      // 弹窗图片路径
      pop_imgurl: null,
      // 实时监测表格加载中效果
      loading: false,
      // 数据总条数
      total: 0,
    };
  },
  created() {
    this.getData();
    this.getRatioData();
    this.getTrafficData();
  },
  watch: {
    // 监听数据变化重新渲染图表
    dateTimeList() {
      this.getLineChart();
    },
    pieData() {
      this.getPieChart();
    },
  },
  methods: {
    // 筛选回调
    handleChange() {
      this.tableData = [];
      this.page = 1;
      this.getData();
    },
    // 获取实时监测列表数据
    async getData() {
      this.loading = true;
      let res = await this.$axios({
        url: "/studentsportrait/accessRecord/access/record/realTime",
        method: "get",
        params: {
          page: this.page,
          dateTime: this.timeValue,
          keyWord: this.keyword,
        },
      });
      // console.log(res);
      if (res.data.status == 20001) {
        this.total = res.data.data.totalCount;
        this.tableData = [...this.tableData, ...res.data.data.list];
      } else {
        this.$message.error(res.data.desc);
      }
      this.loading = false;
    },
    // 获取人员比例数据
    async getRatioData() {
      let res = await this.$axios({
        url: "/studentsportrait/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: "/studentsportrait/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);
      }
    },
    // 点击图片回调
    handleBigImg(imgUrl) {
      this.pop_imgurl = imgUrl;
      this.dialogVisible = true;
    },
    // 实时监测表格滑动到底部加载更多回调
    moretable() {
      if (this.tableData.length < this.total) {
        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.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 = {
        tooltip: {
          trigger: "item",
        },
        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-image: url(../assets/backImg.png);
  background-size: 100% 100%;
  background-color: #24578c;
  // opacity: 0.5;
  // background-color: rgba($color: #24578c, $alpha: 0.1);
  .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_time {
          flex: 1;
          display: flex;
          align-items: center;
        }
        .search_keyword {
          flex: 1;
          display: flex;
          align-items: center;
          margin-left: -165px;
        }
      }
      .watch-form {
        width: 756px;
        height: 467px;
        border-bottom: none;
      }
    }
  }
  .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;
      }
    }
  }
  .dialog {
    width: 100%;
    img {
      width: 100%;
    }
  }
  ::v-deep .el-table,
  ::v-deep .el-table__expanded-cell {
    background-color: transparent;
    background-color: #24578c;
  }

  // 清除表格默认下边框
  ::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;
  }

  // 斑马线隔行换色设置颜色
  ::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-dialog__header,
  ::v-deep .el-dialog__body {
    padding: 0;
  }

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

  ::v-deep .el-table__header-wrapper {
    background-color: transparent;
    background-color: #25608f;
  }

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

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

  // 滚动条隐藏
  ::-webkit-scrollbar {
    height: 0;
    width: 0;
    color: transparent;
  }

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