disinfection_high_front_end/src/components/Audit.vue

<template>
  <div class="audit_container">
    <div class="header_wrap">
      <p>操作人</p>
      <p>操作内容</p>
      <p>操作时间</p>
    </div>
    <div
      :class="
        auditStore.auditInfoList?.length == 0
          ? 'content_wrap layout'
          : 'content_wrap'
      "
    >
      <div
        class="line"
        v-for="item in auditStore.auditInfoList"
        :key="item?.id"
      >
        <div class="username">{{ item?.uid }}</div>
        <div class="oper">{{ `${item?.behaviorZH}${item?.behaviorinfo}` }}</div>
        <div class="time">
          {{ item?.date }}
        </div>
      </div>
      <svg
        v-if="auditStore.auditInfoList?.length == 0"
        xmlns="http://www.w3.org/2000/svg"
        xmlns:xlink="http://www.w3.org/1999/xlink"
        fill="none"
        version="1.1"
        width="129"
        height="148.6171875"
        viewBox="0 0 129 148.6171875"
      >
        <g>
          <g>
            <path
              d="M77.56318437499999,42.283203125L77.56318437499999,47.883203125C77.56318437499999,49.516503125,78.93818437499999,50.683203125,80.771484375,50.683203125L87.41728437500001,50.683203125L87.41728437500001,64.91650312499999C87.41728437500001,66.549903125,86.04228437500001,67.716503125,84.208984375,67.716503125L67.708984375,67.716503125C65.87568437499999,67.716503125,64.50068437499999,66.316503125,64.50068437499999,64.91650312499999L64.50068437499999,44.849903125C64.50068437499999,43.216503125,65.87568437499999,42.049903125,67.708984375,42.049903125L77.56318437499999,42.049903125L77.56318437499999,42.283203125ZM42.500651375,52.083203125C45.021484375,54.883203125,50.063154374999996,56.983203125,59.000684375,56.983203125L60.604784375,56.983203125L60.604784375,66.783203125L59.000684375,66.783203125C48.000654374999996,66.783203125,41.583984784782,63.516503125,41.583984784782,59.783203125L41.583984784782,54.183203125C41.583984784782,53.483203125,41.813151375,52.783203125,42.500651375,52.083203125ZM78.25068437499999,63.283203125L69.083984375,63.283203125L69.083984375,65.61650312500001L78.25068437499999,65.61650312500001L78.25068437499999,63.283203125ZM82.833984375,58.616503125L69.083984375,58.616503125L69.083984375,60.949903125L82.833984375,60.949903125L82.833984375,58.616503125ZM82.833984375,53.949903125L69.083984375,53.949903125L69.083984375,56.283203125L82.833984375,56.283203125L82.833984375,53.949903125ZM42.500651375,38.316503125C45.021484375,41.116503125,50.063154374999996,43.216503125,59.000684375,43.216503125L60.604784375,43.216503125L60.604784375,53.016503125L59.000684375,53.016503125C48.000654374999996,53.016503125,41.583984784782,49.749903125,41.583984784782,46.016503125L41.583984784782,40.416503125C41.583984784782,39.716503125,41.813151375,39.016503125,42.500651375,38.316503125ZM80.54228437500001,42.283203125L87.41728437500001,49.283203125L81.91728437500001,49.283203125C81.22978437500001,49.283203125,80.54228437500001,48.583203125,80.54228437500001,47.883203125L80.54228437500001,42.283203125ZM59.000684375,21.283203125C70.00068437499999,21.283203125,77.56318437499999,24.316533125,77.56318437499999,28.283203125L77.56318437499999,32.483203125C77.56318437499999,36.449903125,70.00068437499999,39.483203125,59.000684375,39.483203125C48.000654374999996,39.483203125,41.583984375,36.449903125,41.583984375,32.483203125L41.583984375,28.283203125C41.583984375,24.316533125,48.000654374999996,21.283202707767,59.000684375,21.283203125Z"
              fill="#999999"
              fill-opacity="1"
            />
          </g>
          <g>
            <path
              d="M63.989446875,0C39.391046875,0,19.373046875,20.2104,19.373046875,45.0454C19.373046875,69.8804,39.391046875,90.0908,63.989446875,90.0908C88.587846875,90.0908,108.605846875,69.8804,108.605846875,45.0454C108.605846875,20.2104,88.598046875,0,63.989446875,0ZM63.989446875,83.7231C42.864446875,83.7231,25.680076875,66.3735,25.680076875,45.0454C25.680076875,36.145,28.686326875,27.9419,33.703546875,21.3999L89.999646875,73.3975C83.17464687500001,79.7959,74.033946875,83.7231,63.989446875,83.7231ZM94.275346875,68.6909L37.969146875,16.6934C44.804246875000004,10.2949,53.955046875,6.36768,63.989446875,6.36768C85.114446875,6.36768,102.298846875,23.7173,102.298846875,45.0454C102.298846875,53.9458,99.302746875,62.1489,94.275346875,68.6909Z"
              fill="#999999"
              fill-opacity="1"
            />
          </g>
          <g>
            <path
              d="M16.89,116.8571875L16.89,121.2971875C16.89,123.7571875,16.68,126.9971875,14.73,129.3971875C15.33,129.6671875,16.44,130.4171875,16.89,130.8371875C18.45,128.9171875,19.08,126.2471875,19.32,123.8171875L22.71,123.8171875L22.71,130.6871875L25.32,130.6871875L25.32,123.8171875L28.62,123.8171875L28.62,121.5371875L19.41,121.5371875L19.41,121.3571875L19.41,118.7771875C22.41,118.5371875,25.62,118.0571875,27.96,117.3671875L26.58,115.2296875C24.21,116.0134875,20.25,116.5866875,16.89,116.8571875ZM7.77,137.4671875L22.23,137.4671875L22.23,139.53718750000002L7.77,139.53718750000002L7.77,137.4671875ZM7.77,135.5171875L7.77,133.4771875L22.23,133.4771875L22.23,135.5171875L7.77,135.5171875ZM5.07,131.3171875L5.07,142.72468750000002L7.77,142.72468750000002L7.77,141.7271875L22.23,141.7271875L22.23,142.6941875L25.05,142.6941875L25.05,131.3171875L5.07,131.3171875ZM1.56,126.6971875L1.77,129.03718750000002L8.55,128.3171875L8.55,130.6871875L11.16,130.6871875L11.16,128.0471875L15.39,127.5671875L15.36,125.5271875L11.16,125.8871875L11.16,124.0271875L15.66,124.0271875L15.66,121.8071875L11.16,121.8071875L11.16,119.9471875L8.55,119.9471875L8.55,121.8071875L5.16,121.8071875C5.91,120.9371875,6.69,119.9771875,7.44,118.9271875L15.57,118.9271875L15.57,116.7671875L8.88,116.7671875L9.6,115.5615675L6.75,114.8378175C6.48,115.4710975,6.15,116.1343875,5.82,116.7671875L1.53,116.7671875L1.53,118.9271875L4.53,118.9271875C3.99,119.7371875,3.54,120.3671875,3.3,120.6671875C2.7,121.3571875,2.22,121.8371875,1.71,121.9571875C2.01,122.6471875,2.43,123.9371875,2.58,124.4771875C2.85,124.2071875,3.87,124.0271875,5.1,124.0271875L8.55,124.0271875L8.55,126.1271875L1.56,126.6971875ZM36.33,116.82718750000001L36.33,119.6171875L46.02,119.6171875C45.96,121.5671875,45.87,123.57718750000001,45.6,125.5571875L34.47,125.5571875L34.47,128.3471875L45.06,128.3471875C43.83,133.2671875,40.95,137.7671875,34.05,140.3471875C34.77,140.94718749999998,35.58,141.9671875,35.97,142.7232875C43.68,139.5971875,46.71,134.1671875,48,128.3471875L48.24,128.3471875L48.24,137.94718749999998C48.24,141.0671875,49.14,141.9971875,52.56,141.9971875C53.25,141.9971875,56.94,141.9971875,57.66,141.9971875C60.72,141.9971875,61.59,140.7071875,61.92,135.7571875C61.11,135.5471875,59.82,135.0671875,59.19,134.5571875C59.04,138.5471875,58.83,139.2071875,57.45,139.2071875C56.61,139.2071875,53.55,139.2071875,52.89,139.2071875C51.45,139.2071875,51.21,139.0271875,51.21,137.9171875L51.21,128.3471875L61.65,128.3471875L61.65,125.5571875L48.48,125.5571875C48.75,123.57718750000001,48.84,121.5671875,48.93,119.6171875L59.97,119.6171875L59.97,116.82718750000001L36.33,116.82718750000001ZM79.05,115.3459375C78.54,116.4887875,77.61,118.2024875,76.89,119.2848875L78.72,120.1266875C79.53,119.1648875,80.49,117.6915875,81.42,116.3382875L79.05,115.3459375ZM68.37,116.3382875C69.15,117.5710875,69.9,119.2248875,70.14,120.2771875L72.3,119.3152875C72.03,118.2624875,71.22,116.66918749999999,70.41,115.4964075L68.37,116.3382875ZM77.82,132.69718749999998C77.19,134.0190875,76.35,135.1909875,75.36,136.1818875C74.37,135.6713875,73.35,135.1909875,72.36,134.7399875L73.5,132.69718749999998L77.82,132.69718749999998ZM68.91,135.6713875C70.32,136.2423875,71.91,136.9932875,73.38,137.77418749999998C71.55,139.0060875,69.39,139.87698749999998,67.05,140.3879875C67.53,140.92848750000002,68.07,141.91988750000002,68.34,142.5507875C71.07,141.7998875,73.59,140.6879875,75.69,139.0360875C76.65,139.6065875,77.49,140.1474875,78.15,140.6579875L79.86,138.7955875C79.2,138.3451875,78.39,137.8641875,77.52,137.3537875C79.08,135.6113875,80.28,133.4785875,81.03,130.8371875L79.5,130.2671875L79.05,130.3571875L74.64,130.3571875L75.21,128.9771875L72.72,128.4971875C72.48,129.0971875,72.24,129.7271875,71.94,130.3571875L67.98,130.3571875L67.98,132.69718749999998L70.74,132.69718749999998C70.14,133.8090875,69.48,134.8304875,68.91,135.6713875ZM73.38,114.8349975L73.38,120.3371875L67.41,120.3371875L67.41,122.6171875L72.51,122.6171875C71.04,124.3571875,68.91,125.9771875,66.96,126.7871875C67.5,127.32718750000001,68.13,128.28718750000002,68.46,128.9171875C70.14,127.9871875,71.94,126.547187
              fill="#9E9E9E"
              fill-opacity="1"
            />
          </g>
        </g>
      </svg>
    </div>
    <div class="page_wrap">
      <el-pagination
        background
        layout="prev, pager, next"
        :total="auditStore.total"
        :page-size="6"
        :current-page="auditStore.page"
        @current-change="handleCurrentPageChange"
      />
    </div>
    <van-overlay :show="auditStore.auditLoading" z-index="3">
      <div class="wrapper" @click.stop>
        <div class="block">
          <van-loading />
          <p class="shutdown_text">加载中</p>
        </div>
      </div>
    </van-overlay>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useWebSocketStore, useAuditStore } from '@/store'
import { getUserBehaviorRecordDescJSON } from '@/mock/command'
import moment from 'moment'

const webSocketStore = useWebSocketStore()
const auditStore = useAuditStore()

onMounted(() => {
  // 读取全部审计记录 需要分页
  webSocketStore.sendCommandMsg(getUserBehaviorRecordDescJSON(0, 6))
  auditStore.updateAuditLoading(true)
})

const handleCurrentPageChange = page => {
  auditStore.updatePage(page - 1)
  webSocketStore.sendCommandMsg(getUserBehaviorRecordDescJSON(page - 1, 6))
  auditStore.updateAuditLoading(true)
}
</script>

<style lang="scss" scoped>
.audit_container {
  margin-bottom: 19px;
  overflow: hidden;
  height: 580px;
  box-sizing: border-box;
  background: #ffffff;
  border-radius: 16px;
  .header_wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 80.29px;
    background: #f6f6f6;
    border-radius: 16px 16px 0px 0px;
    padding: 0 89.43px;
    box-sizing: border-box;
    font-family: Source Han Sans CN;
    font-size: 18px;
    font-weight: normal;
    line-height: normal;
    letter-spacing: 0.07em;
    color: #999999;
  }
  .content_wrap {
    height: 430.71px;
    overflow: scroll;
    .line {
      padding: 23px;
      padding-left: 40px;
      font-family: Source Han Sans CN;
      font-size: 18px;
      font-weight: normal;
      line-height: normal;
      letter-spacing: 0.07em;
      color: #191919;
      display: flex;
      align-items: center;
      justify-content: space-between;
      border-bottom: 1px solid #f6f6f6;
      .username {
        width: 160px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        text-align: center;
        font-size: 21px;
      }
      .oper {
        width: 600px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        text-align: center;
      }
      .time {
        font-size: 20px;
        width: 230px;
        overflow: hidden;
        text-align: center;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
    }
  }
  .layout {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .page_wrap {
    height: 66px;
    padding-right: 32px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
  }
}
.wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}
.block {
  width: 120px;
  height: 120px;
  display: flex;
  flex-direction: column;
  padding: 16px;
  align-items: center;
  justify-content: center;
  .shutdown_text {
    margin-top: 24px;
    font-family: Source Han Sans CN;
    font-size: 18px;
    font-weight: normal;
    line-height: normal;
    letter-spacing: 0.06em;
    color: #fff;
    white-space: nowrap;
  }
}
</style>