中兴实强 1.智能驾驶舱大屏数据展示修改

gaoluyang

2026-06-30 03790f338ed62174def6b67776280e3dace05b7e

 src/views/reportAnalysis/dataDashboard/components/basic/center-top.vue

@@ -40,36 +40,6 @@
      </div>
    </div>

    <!-- 设备统计 -->
    <div class="equipment-stats">
      <div class="equipment-header">
        <img
          src="@/assets/BI/shujutongjiicon@2x.png"
          alt="图标"
          class="equipment-icon"
        />
        <span class="equipment-title">设备统计</span>
      </div>
      <div class="equipment-items">
        <div class="equipment-item">
          <span class="equipment-value">{{ equipmentNum }}</span>
          <span class="equipment-label">设备总数</span>
        </div>
        <div class="equipment-item">
          <span class="equipment-value">{{ equipmentRepair }}</span>
          <span class="equipment-label">待维修设备</span>
        </div>
        <div class="equipment-item">
          <span class="equipment-value">{{ equipmentMaintain }}</span>
          <span class="equipment-label">待保养设备</span>
        </div>
        <div class="equipment-item">
          <span class="equipment-value">{{ totalMeasuring }}</span>
          <span class="equipment-label">计量器具总数</span>
        </div>
      </div>
    </div>

    <!-- 事件名称 -->
    <div class="event-info">
      <div class="event-header">
@@ -110,12 +80,8 @@
</template>

<script setup>
import { ref, onMounted, onBeforeUnmount, nextTick } from 'vue'
import { ref, onMounted, onBeforeUnmount, nextTick, inject, watch } from 'vue'
import { homeTodos, summaryStatistics } from '@/api/viewIndex.js'
import { getLedgerPage } from '@/api/equipmentManagement/ledger.js'
import { getRepairPage } from '@/api/equipmentManagement/repair.js'
import { getUpkeepPage } from '@/api/equipmentManagement/upkeep.js'
import { measuringInstrumentListPage } from '@/api/equipmentManagement/measurementEquipment.js'

// 统计数据
const totalStaff = ref(0)
@@ -125,10 +91,6 @@
const staffYoY = ref(0)
const customersYoY = ref(0)
const suppliersYoY = ref(0)
const equipmentNum = ref(0)
const equipmentRepair = ref(0)
const equipmentMaintain = ref(0)
const totalMeasuring = ref(0)

// 待办事项
const todoList = ref([])
@@ -155,28 +117,23 @@
  })
}

// 获取设备相关数量
const getLedgerNum = () => {
  const params = {
    pageNum: -1,
    pageSize: -1,
const destroyTodoListScroll = () => {
  const todoListEl = refTodoList.value
  if (todoListEl) {
    if (todoListEl._animationFrame) {
      cancelAnimationFrame(todoListEl._animationFrame)
      todoListEl._animationFrame = null
    }
    if (todoListEl._pauseTimer) {
      clearInterval(todoListEl._pauseTimer)
      todoListEl._pauseTimer = null
    }
  }
  getLedgerPage(params).then((res) => {
    equipmentNum.value = res.data.total
  })
  getRepairPage({ ...params, status: 0 }).then((res) => {
    equipmentRepair.value = res.data.total
  })
  getUpkeepPage({ ...params, status: 0 }).then((res) => {
    equipmentMaintain.value = res.data.total
  })
  measuringInstrumentListPage(params).then((res) => {
    totalMeasuring.value = res.data.total
  })
}

// 初始化待办事项列表滚动功能
const initTodoListScroll = () => {
  destroyTodoListScroll()
  const todoListEl = refTodoList.value
  // 强制启用滚动，不检查任何条件
  if (todoListEl) {
@@ -259,6 +216,7 @@

// 待办事项
const todoInfoS = () => {
  destroyTodoListScroll()
  homeTodos().then((res) => {
    todoList.value = res.data
    // 在获取到待办事项数据后，初始化滚动功能
@@ -268,25 +226,24 @@
  })
}

onMounted(() => {
const refreshCenterTopData = () => {
  getNum()
  getLedgerNum()
  todoInfoS()
}

const dataDashboardRefreshTick = inject('dataDashboardRefreshTick', null)
if (dataDashboardRefreshTick) {
  watch(dataDashboardRefreshTick, () => {
    refreshCenterTopData()
  })
}

onMounted(() => {
  refreshCenterTopData()
})

onBeforeUnmount(() => {
  // 清理待办事项列表的动画和定时器
  const todoListEl = refTodoList.value
  if (todoListEl) {
    if (todoListEl._animationFrame) {
      cancelAnimationFrame(todoListEl._animationFrame)
      todoListEl._animationFrame = null
    }
    if (todoListEl._pauseTimer) {
      clearInterval(todoListEl._pauseTimer)
      todoListEl._pauseTimer = null
    }
  }
  destroyTodoListScroll()
})
</script>

@@ -367,82 +324,14 @@
  color: #ff5252;
}

.equipment-stats {
  border: 1px solid #1a58b0;
  padding: 18px;
  height: 240px;
  padding-top: 0px;
}

.equipment-header {
  font-weight: 500;
  font-size: 21px;
  display: flex;
  border-bottom: 1px solid;
  border-image: linear-gradient(
      270deg,
      rgba(0, 126, 255, 0) 0%,
      rgba(0, 126, 255, 0.4549) 35%,
      #007eff 78%,
      #007eff 100%
    )
    1;
  padding-bottom: 2px;
}

.equipment-title {
  font-weight: 500;
  font-size: 18px;
  background: linear-gradient(360deg, #056dff 0%, #43e8fc 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 50px;
}

.equipment-icon {
  width: 50px;
  height: 50px;
}

.equipment-items {
  display: flex;
  justify-content: space-around;
  gap: 30px;
}

.equipment-item {
  text-align: center;
}

.equipment-value {
  display: block;
  font-weight: 500;
  font-size: 40px;
  color: #ffffff;
  width: 120px;
  height: 110px;
  line-height: 110px;
  background-image: url('@/assets/BI/shujutongji@2x.png');
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
  margin-bottom: 8px;
}

.equipment-label {
  font-weight: 500;
  font-size: 16px;
  color: #fffffe;
}

.event-info {
  background-image: url('@/assets/BI/shijianmingchengbeijing@2x.png');
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
  padding: 20px;
  height: 186px;
  padding-top: 10px;
  height: 426px;
}

.event-header {
@@ -466,7 +355,7 @@
  list-style: none;
  padding: 0;
  margin: 0;
  height: 120px; /* 按用户要求调整高度 */
  height: 360px; /* 按用户要求调整高度 */
  overflow: hidden;
  font-size: 15px;
}