hb_sis_zhfx/src/views/NewPages/personnel.vue

<template>
  <div class="personnel">
    <div class="personnel-btn">
      <div
        @click="clickBtn(btn, index)"
        class="i-btn"
        v-for="(btn, index) of btns"
        :key="index"
        :class="{ active: index == btnIndex }"
      >
        {{ btn.name }}
      </div>
    </div>
    <div class="personnel-box">
      <div
        class="personnel-box-item"
        v-for="(item, index) in resData"
        :key="index"
        @click="todesc(item)"
      >
        <div class="personnel-box-item-h">
          <div class="personnel-box-item-header">
            <img :src="imgurl(item.username)" />
          </div>
          <div class="personnel-box-item-form">
            <div class="personnel-box-item-group">
              <div class="personnel-box-item-label">收缩血压：</div>
              <div class="personnel-box-item-value">
                {{ item.objects && item.objects.SSXY.doubleValue.toFixed(2) }}
              </div>
            </div>
            <div class="personnel-box-item-group">
              <div class="personnel-box-item-label">舒张血压：</div>
              <div class="personnel-box-item-value">
                {{ item.objects && item.objects.SZXY.doubleValue.toFixed(2) }}
              </div>
            </div>
            <div class="personnel-box-item-group">
              <div class="personnel-box-item-label">心跳频率：</div>
              <div class="personnel-box-item-value">
                {{ item.objects && item.objects.XTPL.doubleValue.toFixed(2) }}
              </div>
            </div>
            <div class="personnel-box-item-group">
              <div class="personnel-box-item-label">血氧浓度：</div>
              <div class="personnel-box-item-value">
                {{ item.objects && item.objects.XYND.doubleValue.toFixed(2) }}
              </div>
            </div>
          </div>
        </div>
        <div class="personnel-box-item-f">
          <div class="personnel-box-item-name">
            {{ item.objects && item.username }}
          </div>
          <div class="personnel-box-item-icon">
            <i :class="['el-icon-user-solid',item.objects && frontOneHour<item.objects['LAT'].ts? 'icolor':'']" ></i>
          </div>
        </div>
      </div>
    </div>
    <el-dialog
      title="人员信息"
      v-model="dialogVisible"
      width="1400px"
      top="10vh"
      custom-class="modal hide-header"
      :close-on-click-modal="false"
    >
      <div class="info-popup">
        <div class="query left mg-b-8">
          <div class="query-items">
            <div class="query-item">
              <div class="lable">开始日期：</div>
              <div class="search-input">
                <el-date-picker
                  v-model="startdate"
                  type="date"
                  placeholder="选择日期"
                  popper-class="date-select"
                  class="placeholder-left"
                >
                </el-date-picker>
              </div>
            </div>
            <div class="query-item">
              <div class="lable">结束日期：</div>
              <div class="search-input">
                <el-date-picker
                  v-model="enddate"
                  type="date"
                  placeholder="选择日期"
                  popper-class="date-select"
                  class="placeholder-left"
                >
                </el-date-picker>
              </div>
            </div>
          </div>
          <div class="query-actions">
            <button class="btn green" @click="searchper">查询</button>
          </div>
        </div>
        <div class="prople-info mg-t-16 mg-b-16">
          <div class="prople-info-item">
            <div class="font-md gray-l">检修人员</div>
            <div class="font-md white">
              {{ perData.objects && perData.username }}
            </div>
          </div>
          <div class="prople-info-item">
            <div class="font-md gray-l">疲劳度</div>
            <div class="font-md white">
              {{
                perData.objects && perData.objects.PLD.doubleValue.toFixed(2)
              }}
            </div>
          </div>
          <div class="prople-info-item">
            <div class="font-md gray-l">步数</div>
            <div class="font-md white">
              {{ perData.objects && perData.objects.BS.doubleValue.toFixed(2) }}
            </div>
          </div>
          <div class="prople-info-item">
            <div class="font-md gray-l">收缩血压</div>
            <div class="font-md white">
              {{
                perData.objects && perData.objects.SSXY.doubleValue.toFixed(2)
              }}
            </div>
          </div>
          <div class="prople-info-item">
            <div class="font-md gray-l">舒张血压</div>
            <div class="font-md white">
              {{
                perData.objects && perData.objects.SZXY.doubleValue.toFixed(2)
              }}
            </div>
          </div>
          <div class="prople-info-item">
            <div class="font-md gray-l">心跳频率</div>
            <div class="font-md white">
              {{
                perData.objects && perData.objects.XTPL.doubleValue.toFixed(2)
              }}
            </div>
          </div>
          <div class="prople-info-item">
            <div class="font-md gray-l">血氧浓度</div>
            <div class="font-md white">
              {{
                perData.objects && perData.objects.XYND.doubleValue.toFixed(2)
              }}
            </div>
          </div>
        </div>
        <div class="white font-md mg-t-16 mg-b-16">检测人员健康情况</div>
        <normal-line-chart
          class="people-chart"
          height="45vh"
          :showLegend="true"
          :units="['半小时检测值']"
          :list='chartList'
        />
      </div>
    </el-dialog>
  </div>
</template>

<script>
import NormalLineChart from "@com/chart/line/normal-line-chart.vue";
import axios from "axios";
export default {
  // 名称
  name: "personnel",
  // 使用组件
  components: {
    NormalLineChart,
  },
  // 数据
  data() {
    return {
      btns: [
        {
          name: "全部",
          val: "",
        },
        {
          name: "麻黄山",
          val: "MHS_FDC",
        },
        {
          name: "牛首山",
          val: "NSS_FDC",
        },
        {
          name: "青山",
          val: "QS_FDC",
        },
        {
          name: "石板泉",
          val: "SBQ_FDC",
        },
        {
          name: "香山",
          val: "XS_FDC",
        },
      ],
      btnIndex: 0,
      dialogVisible: false,
      resData: null,
      perData: null,
      frontOneHour : new Date().getTime() - 10 * 60 * 1000,
      startdate: new Date(
        new Date(new Date().setDate(new Date().getDate() - 1))
      ).formatDate("yyyy-MM-dd"),
      enddate: new Date(new Date()).formatDate("yyyy-MM-dd"),
      chartList:[
        {
          title: "疲劳度",
          yAxisIndex: 0,
          value: [
            {
              text: "1",
              value: 1,
            },
            {
              text: "2",
              value: 2,
            },
            {
              text: "3",
              value: 1,
            },
            {
              text: "4",
              value: 3,
            },
            {
              text: "5",
              value: 3,
            },
            {
              text: "6",
              value: 3,
            },
            {
              text: "7",
              value: 3,
            },
            {
              text: "8",
              value: 3,
            },
            {
              text: "9",
              value: 3,
            },
            {
              text: "10",
              value: 3,
            },
            {
              text: "11",
              value: 3,
            },
            {
              text: "12",
              value: 3,
            },
            {
              text: "13",
              value: 3,
            },
            {
              text: "14",
              value: 3,
            },
            {
              text: "15",
              value: 3,
            },
            {
              text: "16",
              value: 3,
            },
          ],
        },
        {
          title: "上网电量",
          yAxisIndex: 0,
          value: [
            {
              text: "1",
              value: 1,
            },
            {
              text: "2",
              value: 2,
            },
            {
              text: "3",
              value: 1,
            },
            {
              text: "4",
              value: 3,
            },
          ],
        },
      ],
    };
  },
  // 函数
  methods: {
      imgurl(v){
          try {
              const url  = require(`@assets/person/${v}.jpg`)
              return url
          } catch (error) {
              return require('@assets/logo.png')
          }
      },
    clickBtn(btn, index) {
      this.search(btn.val);
      this.btnIndex = index;
    },
    clickItem(index) {
      this.panelIndex = index;
    },
    async todesc(item) {
      this.dialogVisible = true;
      this.perData = item;
      this.searchper()
    },
    async searchper() {
      const { data } = await axios.get(  //http://192.168.10.12:8082/   //http://10.155.32.4:8010
        `http://192.168.1.18:8087/bracelet/getInfo?userid=${this.perData.mobile}&beginDate=${new Date(this.startdate).formatDate("yyyy-MM-dd HH:mm:ss")}&endDate=${new Date(this.enddate).formatDate("yyyy-MM-dd HH:mm:ss")}`);
      let arr=[]
      data.data.forEach(e => {
          let obj={
            title: e.name,
            yAxisIndex: 0,
            value:[]
          }
          e.bs.forEach(i => {
              let obj1={
              text: "1",
              value: i.val,
            }
              obj.value.push(obj1)
          })
          arr.psuh(obj)
      });
      this.chartList = arr
    },
    async search(id) {
      const { data } = await axios.get(
        `http://192.168.1.18:8087/shbraceletuser/selectRaceletUserinfo?stationid=${id}&pageNum=${1}&pageSize=${300}`
      );
      const res = data.data.records;
      this.resData = res;
    },
  },
  // 生命周期钩子
  beforeCreate() {
    // 创建前
  },
  created() {
    // 创建后
    this.search("");
  },
  beforeMount() {
    // 渲染前
  },
  mounted() {
    // 渲染后
  },
  beforeUpdate() {
    // 数据更新前
  },
  updated() {
    // 数据更新后
  },
};
</script>

<style lang="less">
.icolor{
    color: #05bb4c;
}
.personnel {
  widows: 100%;
  height: calc(100vh - 90px);
  overflow-y: auto;

  .personnel-btn {
    display: flex;

    .i-btn {
      width: 11.296vh;
      height: 3.056vh;
      line-height: 3.056vh;
      background: #53626833;
      border: 1px solid #53626833;
      text-align: center;
      cursor: pointer;
      font-size: 1.296vh;
      color: #b3bdc0;
      transition: all 0.3s;

      + .i-btn {
        margin-left: 0.926vh;
      }

      &:hover,
      &.active {
        border: 1px solid #05bb4c;
        background: #05bb4c33;
        color: #05bb4c;
      }
    }
  }

  .personnel-box {
    display: flex;
    flex-wrap: wrap;
    margin-top: 6px;

    .personnel-box-item {
      width: 198px;
      height: 105px;
      background: #53626833;
      border: 1px solid #53626833;
      margin: 10px 10px 0 0;
      cursor: pointer;
      transition: all 0.3s;
      padding: 6px;
      display: flex;
      flex-direction: column;

      .personnel-box-item-h {
        height: 74px;
        display: flex;

        .personnel-box-item-header {
          height: 100%;
          width: 52px;
          margin-right: 12px;
          background: #848b8a;
          display: flex;
          align-items: center;
          justify-content: center;

          img {
            width: 100%;
            // height: 100%;
          }
        }
        .personnel-box-item-form {
          flex-grow: 1;

          .personnel-box-item-group {
            font-size: 12px;
            display: flex;
            line-height: 1.5;

            .personnel-box-item-label {
              width: 60px;
              text-align: right;
              color: #b3bdc0;
            }

            .personnel-box-item-value {
              color: #b3bdc0;
            }
          }
        }
      }

      .personnel-box-item-f {
        flex-grow: 1;
        display: flex;
        line-height: 1;
        margin-top: 7px;
        font-size: 12px;

        .personnel-box-item-name {
          width: 52px;
          margin-right: 12px;
          text-align: center;
          color: #ffffff;
        }

        .personnel-box-item-icon {
          flex-grow: 1;
          color: #b3bdc0;
        }
      }

      &:hover {
        border: 1px solid #05bb4c;
        background: #05bb4c33;

        .personnel-box-item-h {
          .personnel-box-item-form {
            .personnel-box-item-group {
              .personnel-box-item-label {
                color: #ffffff;
              }

              .personnel-box-item-value {
                color: #05bb4c;
              }
            }
          }
        }

        .personnel-box-item-f {
          .personnel-box-item-name {
            color: #05bb4c;
          }

          .personnel-box-item-icon {
            color: #ffffff;
          }
        }
      }
    }
  }

  .prople-info {
    width: 100%;
    height: 76px;
    background: #53626833;
    display: flex;
    align-items: center;
    justify-content: center;

    .prople-info-item {
      flex: 1;
      text-align: center;
      line-height: 2;
    }
  }

  .people-chart {
    width: 100%;
    height: 45vh;
  }
}
</style>