hsq-pro/src/views/vent/monitorManager/hsqHome/components/SystemCenBottom.vue

<template>
  <div class="system-box">
    <div class="basic-box">
      <div class="list-title">今日登录统计</div>
      <div class="list-content">
        <basicBorder title="最近登录">
          <div class="basic-box1">
            <div class="box-item" v-for="(item, index) in data" :key="index">
              <span style="margin-right: 10px;">{{ `${item.userName} : ` }}</span>
              <span>{{ item.lastLoginTime }}</span>
            </div>
          </div>
        </basicBorder>
      </div>
    </div>
    <div class="basic-box">
        <CustomChart :chart-config="dayLoginConfig" :chart-data="dayChartData"></CustomChart>
    </div>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref,watch} from 'vue'
import basicBorder from './basicBorder.vue'
import CustomChart from './CustomChart.vue';
import { dayLoginConfig, } from '../hsqHome.data';

const props = defineProps<{ data: Array<{
  [x: string]:
  any; userName: string; value: string 
}> }>()

let dayChartData = ref<any[]>([])

watch(()=>props.data,(newV,oldV)=>{
  if(newV){
    dayChartData.value=newV.map(el=>{
      return {
        x:el.userName,
        y:parseFloat(el.loginCount),
      }
    })
  }
},{immediate:true})
</script>

<style lang="less" scoped>
.system-box {
   --image-box-bg: url('@/assets/images/home-container/configurable/hsq/2-5.png');
  position: relative;
  display: flex;
  justify-content: space-between;
  width: 100%;
  height: 100%;

  .basic-box {
    width: 50%;
    height: 100%;
    padding: 15px;
    box-sizing: border-box;
  }

  .list-title {
    width: 177px;
    height: 30px;
    line-height: 22px;
    padding-left: 16px;
    color: #01fefc;
    font-weight: bolder;
    background: var(--image-box-bg) no-repeat;
    background-size: 100% 100%;
    margin-bottom: 5px;
  }

  .list-content {
    width: 100%;
    height: calc(100% - 35px);
  }

  .basic-box1 {
    height: 100%;
    overflow-y: auto;
  }

  .box-item {
    display: flex;
    // justify-content: space-between;
    align-items: center;
    height: 26px;
    margin-bottom: 6px;
    padding: 0px 10px;
    box-sizing: border-box;
    background: linear-gradient(to right, #134c77, transparent);
  }

  ::-webkit-scrollbar {
    display: none;
  }
}
</style>