ISMS-Visualization-BJGD-TKT/src/views/basePage/panels/PersonStatistics.vue

<template>
  <div class="page_container">
    <base-title title="进出人员" />
    <div class="page_content">
      <div class="person_title">人员信息</div>
      <div class="person_num_box">
        <vue-seamless
          :data="personList"
          class="seamless-warp"
          :class-option="scrollOption"
          ref="seamlessScroll"
          :key="seamLessTimeKey"
        >
          <div v-if="personList.length">
            <div class="item" v-for="item of personList" :key="item.id">
              <div class="left">
                <img
                  src="~@/assets/imgs/stationMap/img_无照片.png"
                  @click="openPersonInfo"
                />
              </div>
              <div class="divider"></div>
              <div class="right">
                <div class="position">{{ item.type }}</div>
                <div class="rymain">
                  <div class="row">
                    <div style="width: 40%">
                      <span>姓名：</span>
                      <span class="val">{{ item.name }}</span>
                    </div>
                    <div>
                      <span>电话号码：</span>
                      <span class="val" style="color: #00e0ff">{{
                        item.phone
                      }}</span>
                    </div>
                  </div>
                  <div class="row">
                    <div>
                      <span>人员类型：</span>
                      <span class="val">{{ item.personType }}</span>
                    </div>
                  </div>
                  <div class="row">
                    <div>
                      <span>岗位名称：</span>
                      <span class="val">{{ item.posi }}</span>
                    </div>
                  </div>
                  <div class="row">
                    <div>
                      <span>所属单位：</span>
                      <span class="val">{{ item.comp }}</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div v-else>暂无数据</div>
        </vue-seamless>
      </div>
      <div class="person_type_box">
        <div class="person_title">类型统计</div>
        <div class="type_content">
          <div class="left_part">
            <img
              :src="require('@/assets/imgs/panels/img_personnel_01@2x.png')"
              alt=""
              @click="openPersonList()"
            />
            <span class="totle">{{ total }}</span>
            <span class="text">总数</span>
          </div>
          <div class="right_part">
            <div
              class="row_item"
              v-for="(item, index) in personTypeCount"
              :key="index"
            >
              <img
                v-if="item.name === '员工'"
                :src="require('@/assets/imgs/panels/icon_staff@2x.png')"
                alt=""
              />
              <img
                v-if="item.name === '访客'"
                :src="require('@/assets/imgs/panels/icon_visitor@2x.png')"
                alt=""
              />
              <img
                v-if="item.name === '施工'"
                :src="require('@/assets/imgs/panels/icon_construction@2x.png')"
                alt=""
              />
              <div class="row_main">
                <img
                  :src="require('@/assets/imgs/panels/icon_arrow@2x.png')"
                  alt=""
                />
                <span class="name">{{ item.name }}</span>
                <div class="line"></div>
                <span class="num">{{ item.value }}</span>
                <span class="unit">人</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import BaseTitle from "./BaseTitle.vue";
import VueSeamless from "vue-seamless-scroll";
import { getPersonTypeList, getAccessInfo } from "@/API/positioning";

export default {
  name: "PersonStatistics",
  components: { BaseTitle, VueSeamless },
  data() {
    return {
      total: 4,
      seamLessTimeKey: new Date().getTime(),
      personTypeCount: [
        {
          name: "员工",
          value: 2,
        },
        {
          name: "访客",
          value: 1,
        },
        {
          name: "施工",
          value: 1,
        },
      ],
      personRiskCount: [
        {
          code: "306001",
          name: "3万方汽油罐区",
          value: 0,
        },
        {
          code: "306002",
          name: "8万方汽油罐区",
          value: 0,
        },
        {
          code: "306003",
          name: "20万方柴油油罐区",
          value: 0,
        },
        {
          code: "306004",
          name: "500方泄压罐",
          value: 0,
        },
      ],
      scrollOption: {
        limitMoveNum: 2,
        singleHeight: 173,
        waitTime: 5000,
        openWatch: true,
      },
      personList: [
        {
          id: "1",
          name: "张某某",
          pic: "",
          type: "值班干部",
          posi: "主任",
          personType: "员工",
          comp: "XXXXX公司",
          phone: 15500001111,
          imgUrl: "~@/assets/imgs/stationMap/img_无照片.png",
        },
        {
          id: "2",
          name: "王某某",
          pic: "",
          type: "值班门卫",
          posi: "运维操作工",
          personType: "员工",
          comp: "XXXXX公司",
          phone: 15500001111,
          imgUrl: "~@/assets/imgs/stationMap/img_无照片.png",
        },
        {
          id: "3",
          name: "李某某",
          pic: "",
          type: "施工人员",
          posi: "门卫",
          personType: "施工",
          comp: "XXXXX公司",
          phone: 15500001111,
          imgUrl: "~@/assets/imgs/stationMap/img_无照片.png",
        },
        {
          id: "4",
          name: "高某某",
          pic: "",
          type: "访客",
          posi: "工程师",
          personType: "访客",
          comp: "XXXXX公司",
          phone: 15500001111,
          imgUrl: "~@/assets/imgs/stationMap/img_无照片.png",
        },
      ],
    };
  },
  created() {
    this.openPersonInfo();
  },
  mounted() {
    // this.getPersonTypeList();
    // this.startMqtt();
  },
  methods: {
    async openPersonInfo() {
      try {
        const res = await getAccessInfo({ id: "789185626355277824" });
        const data = res.data;
        console.log("门禁信息", data);
        if (data.remark) {
          const c = data.remark.split(":");
          if (c.length == 3) {
            this.personTypeCount[0].value = c[0];
            this.personTypeCount[1].value = c[1];
            this.personTypeCount[2].value = c[2];
            this.total = Number(c[0]) + Number(c[1]) + Number(c[2]);
          }
        }
      } catch (err) {
        console.log(err);
      }
    },
    openPersonList() {
      // this.$store.dispatch("globalConfig/setPersonListDialog", {
      //   show: true,
      //   dialogMsg: this.personList,
      //   type: "All",
      // });
    },
    async getPersonTypeList() {
      try {
        const p = {};
        const res = await getPersonTypeList(p);
        console.log(res.data);
      } catch (err) {
        console.log(err);
      }
    },
    startMqtt() {
      const topics = [
        "CountArea/AllCount/All",
        "CountArea/RiskCount/All",
        "CountArea/PersonTypeCount/All",
      ];
      const _this = this;
      this.$store.dispatch("mqtt/subscribe", {
        topic: topics,
        onMessage: (topic, message, packet) => {
          const content = message.toString();
          if (topic === "CountArea/AllCount/All") {
            this.total = content;
          } else if (topic === "CountArea/RiskCount/All") {
            const data = JSON.parse(content);
            this.personRiskCount.forEach((item) => {
              item.value = data[item.code];
            });
          } else if (topic === "CountArea/PersonTypeCountDic/All") {
            const data = JSON.parse(content);
          }
        },
      });
      this.$once("hook:beforeDestroy", () => {
        this.$store.dispatch("mqtt/unsubscribe", topics);
      });
    },
  },
};
</script>

<style lang="less" scoped>
.page_container {
  width: 410px;
  z-index: 2;
  .page_content {
    width: 100%;
    height: 62%;
    .person_title {
      margin-top: 4px;
      padding-left: 20px;
      height: 24px;
      line-height: 24px;
      background: url(~@/assets/imgs/panels/title_bg_01@2x.png) no-repeat;
      background-size: 100% 100%;
      font-family: MicrosoftYaHei-Bold;
      font-size: 14px;
      color: #e0f3ff;
      letter-spacing: 0.88px;
      text-shadow: 0 0 10px #1162ff;
      font-weight: 700;
    }
    .person_type_box {
      width: 100%;
      height: 154px;
      .person_title {
        margin-top: 10px;
      }
      .type_content {
        margin-top: 4px;
        width: 100%;
        height: 126px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .left_part {
          width: 110px;
          height: 100%;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          img {
            width: 64px;
            height: 64px;
          }
          .totle {
            font-size: 30px;
            color: #ffffff;
            letter-spacing: 1.26px;
            text-shadow: 0 0 10px rgba(0, 180, 255, 0.5);
            font-weight: 700;
          }
          .text {
            font-size: 14px;
            color: #ffffff;
            letter-spacing: 0;
            text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
            font-weight: 400;
          }
        }
      }
    }
    .person_num_box {
      width: 100%;
      height: 340px;
      overflow: hidden;

      .num_content {
        width: 100%;
        height: 168px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .left_part {
          width: 110px;
          height: 100%;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          img {
            width: 80px;
            height: 80px;
          }
        }
      }
      .seamless-warp {
        .item {
          margin-top: 9px;
          height: 48%;
          display: flex;
          position: relative;
          .left {
            width: 25%;
            height: 100%;
            text-align: center;
            margin-right: 8px;
            img {
              // width: 100%;
              height: 100%;
            }
          }
          .divider {
            width: 5%;
          }
          .right {
            width: 70%;
            min-height: 163px;
            position: relative;
            .position {
              font-family: 优设标题黑;
              font-size: 18px;
              color: #ffffff;
              letter-spacing: 1.29px;
              position: absolute;
              z-index: 99;
              background-image: linear-gradient(180deg, #eeeeee, #5cd5ff);
              -webkit-background-clip: text;
              background-clip: text;
              color: transparent;
              font-weight: 400;
              padding-left: 10px;
            }
            .rymain {
              width: 100%;
              height: calc(100% - 14px);
              position: absolute;
              bottom: 0;
              opacity: 0.9;
              background-image: linear-gradient(
                270deg,
                rgba(0, 24, 46, 0.1) 0%,
                #00487b 98%
              );
              display: flex;
              flex-direction: column;
              justify-content: space-around;
              font-size: 12px;
              color: #b3c0d4;
              // padding-top: 12px;
              .row {
                display: flex;
                padding-left: 5px;
                font-family: MicrosoftYaHei;
                .val {
                  color: #ffffff;
                }
              }
              .row:nth-child(2) {
                margin-top: -8px;
              }
            }
          }
        }
      }
    }
    .right_part {
      width: 300px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      align-items: center;
      .row_item {
        width: 300px;
        height: 30px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 8px;
        &:last-child {
          margin-bottom: 0;
        }
        img {
          width: 30px;
          height: 30px;
        }
        .row_main {
          width: 260px;
          height: 30px;
          display: flex;
          justify-content: space-between;
          align-items: center;
          background-color: rgba(51, 125, 206, 0.27);
          padding-right: 10px;
          .name {
            flex-shrink: 0;
            text-align: center;
            font-size: 13px;
            color: #ffffff;
            letter-spacing: 0;
            font-weight: 400;
          }
          .line {
            margin: 0 10px;
            width: 100%;
            height: 1px;
            border-top: 1px dashed #fff;
            opacity: 0.4;
          }
          .num {
            flex-shrink: 0;
            font-size: 18px;
            color: #ffffff;
            letter-spacing: 0;
            font-weight: 700;
          }
          .unit {
            opacity: 0.4;
            font-family: MicrosoftYaHei;
            font-size: 12px;
            color: #ffffff;
            letter-spacing: 0;
            font-weight: 400;
          }
        }
      }
    }
  }
}
</style>