<template> <div class="flex flex-r flex-align-center flex-justcontent-spacebetween top-header"> <div class="flex flex-r flex-align-center siteInfoCount-detail" v-for="(value, key) in siteInfoCount" :key="key" :class="[monitorTargetType == key || (monitorTargetType == '' && key == 'total') ? 'activeClass' : '']" @click="changeMonitorTargetType(key)" > <img :src="getTongJiImageUrl(`${key}_icon`)" class="h_icons" /> <div class="h_label"> {{ key == 'total' ? '全部' : selectDictLabel(monitorTargetTypes, key) }}<span class="h_value">{{ value }}</span> </div> </div> </div> </template> <script setup> import { getSiteInfoCount } from '@/api/dataAnalysis/rtuSiteInfo'; const emit = defineEmits(['change']); const { proxy } = getCurrentInstance(); const monitorTargetTypes = proxy.fixDict['monitorTargetTypes']; //监测对象类型 const siteInfoCount = ref({}); const monitorTargetType = ref(''); const props = defineProps({ monitorTargetType: { type: String, default: '', }, }); watch( () => props.monitorTargetType, value => { monitorTargetType.value = props.monitorTargetType; } ); //获取每种监测类型对应的站点类型和建设方式对应的数量 function getSiteInfoCountData() { getSiteInfoCount().then(res => { siteInfoCount.value = res.data; }); } ////切换类型 function changeMonitorTargetType(key) { monitorTargetType.value = key == 'total' ? '' : key; emit('change', monitorTargetType.value); } getSiteInfoCountData(); </script> <style lang="scss" scoped> .app-container { background: #f1f1f1; .table-content { background: #ffffff !important; padding: 20px; margin-top: 10px; } } .top-header { height: 100px; background: #ffffff; border-radius: 2px; padding-left: 20px; padding-right: 20px; .activeClass { height: 40px; background: #e4eeff; border: 1px solid #3782ff; padding-left: 8px; padding-right: 8px; } .h_icons { margin-right: 8px; width: 35px; height: 35px; } .h_label { font-size: 16px; font-family: Source Han Sans CN; color: #333333; line-height: 30px; } .h_value { font-size: 14px; font-family: Source Han Sans CN; color: #3782ff; line-height: 30px; } .siteInfoCount-detail { cursor: pointer; &:hover { height: 40px; background: #e4eeff; // border: 1px solid #3782ff; padding-left: 8px; padding-right: 8px; } } } </style>