WanZai_School/src/views/trackSearch/trackSearch.vue

<template>
  <div class="content-box">
    <div class="left">
      <!-- <el-icon :size="23" class="camera"><VideoCameraFilled /></el-icon> -->
      <div class="left_title">轨迹查询</div>
    </div>
    <div class="middle">
      <div class="filter">
        <div class="condition">
          <el-select
            v-model="searchInput.keyWord"
            popper-class="more-tag-data"
            filterable
            clearable
            remote
            :remote-method="keyWordMethod"
            :loading="conteactLoading"
            placeholder="请选择姓名"
            style="width: 200px"
            @change="searchBtn"
          >
            <el-option
              v-for="item in gradeData"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >
              <span style="float: left">{{ item.name }}</span>
            </el-option>
            <template #footer>
              <div class="addStudentMore">
                <el-button
                  v-if="currentPage < totalPage && totalPage != 0"
                  @click="addGradeMore"
                  >加载更多+</el-button
                >
              </div>
            </template>
          </el-select>
        </div>
        <div class="condition">
          <el-date-picker
            v-model="searchInput.createTime"
            type="daterange"
            range-separator="-"
            start-placeholder="起始时间"
            end-placeholder="结束时间"
            format="YYYY-MM-DD"
            value-format="YYYY-MM-DD"
            :prefix-icon="Calendar"
            placeholder="请选择日期"
            style="width: 280px"
            @change="searchBtn"
          />
        </div>
      </div>
    </div>
    <div class="trackInfo">
      <el-timeline style="max-width: 600px">
        <el-timeline-item
          v-for="i in tableData.list"
          center
          color="rgba(30, 125, 251, 1)"
          :timestamp="`${i.type} ( ${i.dateTime} )`"
          placement="top"
        >
          <el-card>
            <h4>{{ i.location }}</h4>
            <p>{{ i.name }}</p>
            <div v-viewer v-if="i.image">
              <img :src="i.image" alt="" />
            </div>
          </el-card>
        </el-timeline-item>
      </el-timeline>
    </div>
    <div class="scroll">
      <div class="map" @click="xy">
        <svg width="1620" height="974" viewBox="0 0 1620 974">
          <!-- 绘制地铁线路 -->
          <path
            id="biking-road"
            d="M468,454 L568,346 L894,405 L870,265 L830,593 L621,261"
            stroke="#009900"
            stroke-width="3"
            fill="none"
          />
          <!-- 绘制站点 -->
          <circle
            cx="468"
            cy="454"
            r="8"
            fill="white"
            stroke="#009900"
            stroke-width="2"
          />
          <circle
            cx="568"
            cy="346"
            r="8"
            fill="white"
            stroke="#009900"
            stroke-width="2"
          />
          <circle
            cx="894"
            cy="405"
            r="8"
            fill="white"
            stroke="#009900"
            stroke-width="2"
          />
          <circle
            cx="870"
            cy="265"
            r="8"
            fill="white"
            stroke="#009900"
            stroke-width="2"
          />
          <circle
            cx="830"
            cy="593"
            r="8"
            fill="white"
            stroke="#009900"
            stroke-width="2"
          />
          <circle
            cx="621"
            cy="261"
            r="8"
            fill="white"
            stroke="#009900"
            stroke-width="2"
          />

          <text x="452" y="434" fill="#fff">探理楼</text>
          <text x="544" y="326" fill="#fff">探问楼</text>
          <text x="870" y="385" fill="#fff">探真楼</text>
          <text x="845" y="245" fill="#fff">探学楼</text>
          <text x="800" y="573" fill="#fff">学校大门</text>
          <text x="561" y="241" fill="#fff">地下停车场出口</text>
        </svg>
        <svg
          t="1685007462176"
          class="icon"
          viewBox="0 0 1024 1024"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          id="circle"
          width="24"
          height="24"
          
        >
          <path
            d="M512 1024C229.248 1024 0 794.752 0 512S229.248 0 512 0s512 229.248 512 512-229.248 512-512 512z m200.746667-478.506667l1.749333-1.664 30.165333-30.165333-330.496-330.581333a42.837333 42.837333 0 0 0-60.288 0 42.538667 42.538667 0 0 0 0 60.330666l270.08 270.165334-270.08 269.952a42.496 42.496 0 0 0 0 60.288c16.64 16.64 43.861333 16.469333 60.288 0.042666l298.581334-298.368z"
            fill="#ff3000"
            p-id="5616"
          ></path>
        </svg>
      </div>
      <!-- 家长访客配置 -->
      <el-dialog
        class="patriarchDialog"
        v-model="patriarchVisible"
        :close-on-click-modal="false"
        :close-on-press-escape="false"
        title="家长访客配置"
        align-center
        width="650"
        :before-close="patriarchCancel"
      >
        <el-form
          ref="patriarchRef"
          :model="patriarchRuleForm"
          :rules="patriarchRules"
          label-width="90px"
          class="demo-ruleForm"
          :size="formSize"
          label-position="left"
          status-icon
        >
          <el-form-item label="年级 :" prop="grade">
            <el-select
              v-model="patriarchRuleForm.grade"
              placeholder="请选择年级"
              style="width: 500px"
              clearable
            >
              <el-option v-for="i in gradeData" :label="i.name" :value="i.id" />
            </el-select>
          </el-form-item>
          <el-form-item label="班级 :" prop="class">
            <el-select
              v-model="patriarchRuleForm.class"
              placeholder="请选择班级"
              style="width: 500px"
              clearable
            >
              <el-option v-for="i in classData" :label="i.name" :value="i.id" />
            </el-select>
          </el-form-item>
          <p class="title">小程序设置</p>
          <el-form-item label="" prop="app1">
            <el-radio-group v-model="patriarchRuleForm.app1">
              <el-radio :value="3">需要审核</el-radio>
              <el-radio :value="6">不需要审核</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="" prop="app2">
            <el-radio-group v-model="patriarchRuleForm.app2">
              <el-radio :value="3">需要推送</el-radio>
              <el-radio :value="6">不需要推送</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="" prop="app3">
            <el-radio-group v-model="patriarchRuleForm.app3">
              <el-radio :value="3">需要注销</el-radio>
              <el-radio :value="6">不需要注销</el-radio>
            </el-radio-group>
          </el-form-item>
          <p class="title">大屏审批设置</p>
          <el-form-item label="" prop="large1">
            <el-radio-group v-model="patriarchRuleForm.large1">
              <el-radio :value="3">需要审核</el-radio>
              <el-radio :value="6">不需要审核</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="" prop="large2">
            <el-radio-group v-model="patriarchRuleForm.large2">
              <el-radio :value="3">需要推送</el-radio>
              <el-radio :value="6">不需要推送</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="" prop="large3">
            <el-radio-group v-model="patriarchRuleForm.large3">
              <el-radio :value="3">需要注销</el-radio>
              <el-radio :value="6">不需要注销</el-radio>
            </el-radio-group>
          </el-form-item>
          <p class="title">是否和门禁车闸联动</p>
          <el-form-item label="" prop="entrance">
            <el-radio-group v-model="patriarchRuleForm.entrance">
              <el-radio :value="3">是</el-radio>
              <el-radio :value="6">否</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-form>
        <div class="options">
          <el-button
            color="rgba(41, 109, 227, 1)"
            class="queding"
            type="primary"
            @click="patriarchConfirm(patriarchMRef)"
          >
            确认
          </el-button>
          <el-button @click="patriarchCancel">取消</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
  <div class="bgImg" v-if="bgImg">
    <el-carousel
      @click="bgImg = false"
      ref="bgImgs"
      indicator-position
      arrow="always"
      :autoplay="false"
      trigger
    >
      <el-carousel-item>
        <img :src="showImg" alt="" />
      </el-carousel-item>
    </el-carousel>
  </div>
</template>

<script setup>
import {
  ref,
  reactive,
  watch,
  nextTick,
  onBeforeMount,
  onUnmounted,
} from "vue";
import { useRouter } from "vue-router";
import { ElMessage, ElMessageBox } from "element-plus";
import { Calendar } from "@element-plus/icons-vue";
import vidiconsApi from "@/api/vidicons.js";
import { dayjs } from "element-plus";
import lodash from "lodash";
import axios from "axios";
import eds from "@/utils/eds.js";
import { useStore } from "vuex";
const store = useStore();
const api = ref("");
const router = useRouter();
// 表格数据
const loading = ref(false);
const tableData = reactive({
  list: [],
});

const searchInput = reactive({
  keyWord: "",
  createTime: "", // 创建时间
}); // 搜索按钮数据
const keyWord = ref();

const gradeData = ref([{ name: "刘晓晓-七年级-学生", id: 1 }]); // 下拉学生数据
const currentPage = ref(1); // 当前页
const pageCount = ref(100);
const total = ref(5); // 当前总数
const totalPage = ref(100); // 总页数

const bgImg = ref(false);
const showImg = ref("");

// 预约记录分页数据
const getList = async () => {
  let data = {
    currentPage: currentPage.value,
    pageCount: pageCount.value,
    userId: searchInput.keyWord,
  };
  if (searchInput.createTime) {
    data.startTime = searchInput.createTime[0];
    data.endTime = searchInput.createTime[1];
  }
  let res = await axios({
    method: "get",
    url: api.value + "/wanzai/api/smartFaceDiscern/selectTrack",
    headers: {
      token: sessionStorage.getItem("token"),
      user_head: sessionStorage.getItem("userhead"),
    },
    params: data,
  });
  if (res.data.code == 200) {
    console.log(res, JSON.parse(eds.decryptDes(res.data.data)), "轨迹查询");
    loading.value = false;
    tableData.list = JSON.parse(eds.decryptDes(res.data.data));
    // total.value = JSON.parse(eds.decryptDes(res.data.data)).totalCount;
  } else {
    ElMessage({
      type: "error",
      showClose: true,
      message: res.data.message,
      center: true,
    });
  }
};

// 搜索功能
const searchBtn = lodash.debounce(async () => {
  getList();
}, 300);
const gradeList = async () => {
  let data = {
    currentPage: currentPage.value,
    pageCount: pageCount.value,
    keyWord: keyWord.value,
  };
  let res = await axios({
    method: "get",
    url: api.value + "/wanzai/api/smartUser/getPage",
    headers: {
      token: sessionStorage.getItem("token"),
      user_head: sessionStorage.getItem("userhead"),
    },
    params: data,
  });
  console.log(res, JSON.parse(eds.decryptDes(res.data.data)), "用户下拉数据");
  gradeData.value = JSON.parse(eds.decryptDes(res.data.data)).records;
  totalPage.value = JSON.parse(eds.decryptDes(res.data.data)).pages;
};
// 联系人下拉框搜索时加载
const keyWordMethod = (query) => {
  console.log(query);
  keyWord.value = query;
  currentPage.value = 1;
  gradeList();
};
// 搜索框加载更多
const addGradeMore = async () => {
  if (currentPage.value < totalPage.value) {
    currentPage.value++;
    let data = {
      currentPage: currentPage.value,
      pageCount: pageCount.value,
      keyWord: keyWord.value,
    };
    let res = await axios({
      method: "get",
      url: api.value + "/wanzai/api/smartUser/getPage",
      headers: {
        token: sessionStorage.getItem("token"),
        user_head: sessionStorage.getItem("userhead"),
      },
      params: data,
    });
    console.log(
      res,
      JSON.parse(eds.decryptDes(res.data.data)).records,
      "加载更多用户下拉数据"
    );
    gradeData.value = [
      ...gradeData.value,
      ...JSON.parse(eds.decryptDes(res.data.data)).records,
    ];
  } else {
    console.log("数据全部加载完成");
  }
};
// 查看图片
const imgClick = (row) => {
  bgImg.value = true;
  showImg.value = row;
};
const xy = (event) => {
  console.log("X:" + event.offsetX);
  console.log("Y:" + event.offsetY);
};
onBeforeMount(async () => {
  api.value = store.state.user.api;
  getList();
  gradeList();
  nextTick(() => {
    gsap.registerPlugin(MotionPathPlugin);
    // bikingRoad.animation = "dash 10s linear forwards";
    gsap.to("#circle", {
      duration: 25, // 多少时间完成动画
      repeat: 0, // 重复次数 -1为无限次
      ease: Linear.easeNone, //动画的运动方式(匀速)
      motionPath: {
        path: "#biking-road",
        align: "#biking-road",
        autoRotate: true,
        alignOrigin: [0.5, 0.5],
      },
    });
  });
});
onUnmounted(() => {
  // document.removeEventListener("keyup", Enters);
});
</script>

<style scoped lang="scss">
.content-box {
  width: calc(100vw - 260px);
  min-width: 1660px;
  height: calc(100vh - 105px);
  min-height: 806px;
  margin: 20px auto;
  background-color: #fff;
  color: #fff;
  display: flex;
  flex-direction: column;
  box-shadow: 0px 3px 10px rgba(0, 97, 255, 0.2);
  position: relative;

  .left {
    // width: calc(100wh - 40px);
    display: flex;
    align-items: center;
    height: 60px;
    margin: 0 20px;
    border-bottom: 1px solid #ccc;
    color: rgb(0, 0, 0);
    font-size: 18px;
    font-weight: 600;
    .left_title {
      height: 60px;
      line-height: 60px;
    }
  }

  .middle {
    width: calc(100% - 60px);
    margin: 0 auto;
    position: absolute;
    top: 100px;
    left: 50px;
    color: #000;

    // border-bottom: 1px solid rgb(231, 231, 231);
    .filter {
      display: flex;
      flex-wrap: wrap;
      align-items: center;

      .search {
        color: #fff;
      }

      .condition {
        display: flex;
        align-items: center;
        margin: 0 25px 0 0;
        :deep(.el-select) {
          .el-select__wrapper {
            box-shadow: none;
            background-color: rgba(133, 191, 242, 0.5);
          }
          .el-select__selected-item {
            color: rgba(255, 255, 255, 0.7);
          }
          .el-select__suffix {
            .el-icon {
              color: rgba(255, 255, 255, 0.7);
            }
          }
        }
        :deep(.el-date-editor) {
          background-color: rgba(133, 191, 242, 0.5);
          box-shadow: none;
          .el-icon {
            color: rgba(255, 255, 255, 0.7);
          }
          .el-range-input {
            color: #fff;
            &::placeholder {
              color: rgba(255, 255, 255, 0.7); /* 更改为你想要的颜色代码 */
            }
          }
          .el-range-separator {
            color: rgba(255, 255, 255, 0.7);
          }
        }
      }
    }

    .gongneng {
      margin: 10px 0 10px 0;
    }
  }

  .trackInfo {
    position: absolute;
    width: 357px;
    height: calc(100% - 141px);
    background: rgba(0, 0, 0, 0.5);
    right: 40px;
    top: 101px;
    display: flex;
    align-items: center;
    justify-content: center;
    :deep(.el-timeline) {
      height: calc(100% - 30px);
      overflow: auto;
      padding-left: 5px;
      padding-right: 25px;
      max-width: 335px !important;
      // 整个滚动条
      &::-webkit-scrollbar-track {
        background-color: rgba(255, 255, 255, 1);
        border-radius: 4px;
      }
      // 滚动条的滚动区域（轨道）
      &::-webkit-scrollbar {
        background-color: #0888f8;
        height: 3px;
        width: 4px;
        border-radius: 4px;
      }
      // 滚动条的可拖拽部分（滑块）
      &::-webkit-scrollbar-thumb {
        background: rgba(30, 125, 251, 1);
        border-radius: 4px;
      }
      .el-timeline-item__tail {
        border-left: 2px dashed rgba(173, 173, 173, 1);
      }
      h4 {
        margin: 0 0 10px 0;
        color: rgba(255, 255, 255, 0.6);
      }
      .el-timeline-item__wrapper {
        .el-timeline-item__timestamp {
          color: #fff;
          font-size: 16px;
        }
        h4 {
          color: rgba(255, 255, 255, 0.6);
          font-size: 14px;
        }
        p {
          color: rgba(255, 255, 255, 0.6);
          font-size: 14px;
        }
        img {
          width: 100px;
        }
      }
      .el-card {
        background-color: transparent;
        border: none;
        .el-card__body {
          padding: 10px;
        }
      }
    }
  }
  .scroll {
    width: calc(100% - 40px);
    height: calc(100% - 61px);
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    .map {
      width: 1620px;
      height: 715px;
      overflow: hidden;
      background: url("@/assets/trackImg.jpg");
      background-repeat: no-repeat; //是否平铺
      background-position: 70% 50%; //设置背景图像的起始位置
      background-size: 120% 140%; //规定背景图像的尺寸
      svg {
        // border: 3px solid rgba(255, 255, 255, 1);
      }
    }
  }
  // 家长访客配置
  :deep(.patriarchDialog) {
    //   height: 420px;
    border-radius: 11px;
    .el-dialog__header {
      border-radius: 11px 11px 0 0;
      background: rgba(237, 241, 245, 1);
      font-weight: 600;
      margin: 0;
      .el-dialog__headerbtn {
        outline: none;
      }
    }
    .el-dialog__body {
      padding: 20px 30px;
      .el-form {
        .title {
          color: #000;
          font-weight: 800;
        }
        .el-form-item__content {
          margin-left: 0 !important;
        }
      }
      .options {
        margin: 30px 20px 20px 0;
        width: 100%;
        display: flex;
        flex-direction: row-reverse;
        .queding {
          color: #fff;
          margin-left: 15px;
        }
      }
    }
  }

  .pageSize {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0 30px;

    span {
      color: #000;
    }

    .el-pagination {
      // width: 1600px;
      :deep(.el-pagination__total) {
        color: #000;
      }

      :deep(.el-pagination__goto) {
        color: #000;
      }

      :deep(.el-pagination__classifier) {
        color: #000;
      }

      :deep(.el-input__wrapper) {
        border: 1px solid rgba(0, 0, 0, 1);
        border-radius: 5px;
        box-shadow: none;
      }

      :deep(.el-pager li) {
        margin: 0 5px;
        border: 1px solid rgba(0, 0, 0, 1);
        border-radius: 5px;
        background-color: transparent;
      }

      :deep(.el-pager li.is-active) {
        // background-color: rgba(0, 97, 255, 0.8);
        border: 1px solid rgba(0, 97, 255, 1);
        color: rgba(0, 97, 255, 1);
      }

      :deep(.btn-prev) {
        margin-right: 5px;
        border: 1px solid rgba(0, 0, 0, 1);
        border-radius: 5px;
        background-color: transparent;
      }

      :deep(.btn-next) {
        margin-left: 5px;
        border: 1px solid rgba(0, 0, 0, 1);
        border-radius: 5px;
        background-color: transparent;
      }
    }
  }
}
.bgImg {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 99999999;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.8);
  :deep(.el-carousel__arrow) {
    display: none;
  }
  // border-radius: 50px;
  :deep(.el-carousel__container) {
    width: 100%;
    height: calc(100vh);

    .el-carousel__item {
      display: flex;
      justify-content: center;

      img {
        height: 100%;
      }
    }
  }
}

.el-input {
  width: 192px;
}
</style>