feat: 图表

罗广辉

2026-01-15 9d25aac5f499aa352447edefa2044482144fc48d

 applications/drone-command/src/views/basicManage/deviceStock/index.vue

@@ -1,5 +1,10 @@
<template>
   <basic-container>
      <div class="chart">
         <DeviceChart1 />
         <DeviceChart2 />
         <DeviceChart3 />
      </div>
      <el-form ref="queryParamsRef" :model="searchParams" class="ztzf-page-history-search">
         <el-form-item label="名称" prop="deviceName">
            <el-input
@@ -138,6 +143,9 @@
import { blobDownload, dateRangeFormat, getDictLabel, formatDateToSlash } from '@ztzf/utils'
import DeviceTrackDiaLog from '@/views/basicManage/deviceStock/DeviceTrackDiaLog.vue'
import DeviceScrapDiaLog from '@/views/basicManage/deviceStock/DeviceScrapDiaLog.vue'
import DeviceChart1 from '@/views/basicManage/deviceStock/DeviceChart1.vue'
import DeviceChart2 from '@/views/basicManage/deviceStock/DeviceChart2.vue'
import DeviceChart3 from '@/views/basicManage/deviceStock/DeviceChart3.vue'

const initSearchParams = () => ({
   deviceName: '', // 设备名称
@@ -267,4 +275,40 @@
   getDeptTreeFun()
})
</script>
<style scoped lang="scss"></style>
<style scoped lang="scss">
.chart {
   width: 100%;
   height: 234px;
   display: flex;
   :deep() {
      * {
         box-sizing: border-box;
      }
      .deviceChart {

         height: 100%;
         background: rgba(26, 26, 42, 0.3);
         border-radius: 10px 10px 10px 10px;
         position: relative;
         display: flex;
         flex-direction: column;
         justify-content: space-between;
         align-items: center;
         padding: 10px;

         .titleBg {
            font-weight: 400;
            font-size: 18px;
            color: #ffffff;
            font-family: PangMen, serif;
            padding-left: 22px;
         }
         .chartBox {
            width: 100%;
            height: 0;
            flex-grow: 1;
         }
      }
   }
}
</style>