@templmf/temp-solf-lmf 0.0.1

package/cankao.txt

@@ -0,0 +1,1553 @@
+// 主组件 - ComplianceDashboard.vue
+<template>
+  <div class="dashboard-container">
+    <!-- 侧边栏组件 -->
+    <sidebar-nav
+      :current-view="currentView"
+      :selected-domain="selectedDomain"
+      :selected-system="selectedSystem"
+      @navigate-to-domain="navigateToDomain"
+      @navigate-to-system="navigateToSystem"
+      @navigate-to-project="navigateToProject"
+    />
+    
+    <!-- 主内容区 -->
+    <div class="main-content">
+      <!-- 顶部统计组件 -->
+      <stats-panel :overall-stats="overallStats" />
+      
+      <!-- 工具栏组件 -->
+      <toolbar-panel
+        :breadcrumb="breadcrumb"
+        :current-view="currentView"
+        :search-term="searchTerm"
+        :filter-status="filterStatus"
+        @breadcrumb-click="handleBreadcrumbClick"
+        @back="handleBack"
+        @search-change="val => searchTerm = val"
+        @filter-change="val => filterStatus = val"
+      />
+
+      <!-- 内容区域组件 -->
+      <content-area
+        :current-view="currentView"
+        :domain-stats="domainStats"
+        :system-stats="systemStats"
+        :project-stats="projectStats"
+        @domain-click="handleDomainClick"
+        @system-click="handleSystemClick"
+      />
+    </div>
+  </div>
+</template>
+
+<script>
+import SidebarNav from './components/SidebarNav.vue'
+import StatsPanel from './components/StatsPanel.vue'
+import ToolbarPanel from './components/ToolbarPanel.vue'
+import ContentArea from './components/ContentArea.vue'
+
+export default {
+  name: 'ComplianceDashboard',
+  components: {
+    SidebarNav,
+    StatsPanel,
+    ToolbarPanel,
+    ContentArea
+  },
+  data() {
+    return {
+      // 模拟数据
+      mockData: {
+        "智能制造": {
+          "生产管理系统": {
+            "MES工程": { indicators: [85, 92, 78], status: "运行中" },
+            "WMS工程": { indicators: [90, 88, 95], status: "运行中" },
+            "质量管理工程": { indicators: [76, 82, 89], status: "维护中" }
+          },
+          "设备监控系统": {
+            "设备状态监控工程": { indicators: [92, 87, 91], status: "运行中" },
+            "预测维护工程": { indicators: [68, 74, 82], status: "异常" },
+            "能耗管理工程": { indicators: [89, 93, 85], status: "运行中" }
+          }
+        },
+        "数字化办公": {
+          "协同办公系统": {
+            "OA系统工程": { indicators: [88, 91, 87], status: "运行中" },
+            "文档管理工程": { indicators: [92, 89, 94], status: "运行中" },
+            "视频会议工程": { indicators: [79, 85, 88], status: "运行中" }
+          },
+          "人事管理系统": {
+            "招聘管理工程": { indicators: [85, 78, 90], status: "运行中" },
+            "绩效考核工程": { indicators: [72, 88, 85], status: "运行中" },
+            "薪资管理工程": { indicators: [95, 92, 89], status: "运行中" }
+          }
+        },
+        "数据分析": {
+          "商业智能系统": {
+            "报表平台工程": { indicators: [91, 86, 88], status: "运行中" },
+            "数据挖掘工程": { indicators: [77, 82, 79], status: "运行中" },
+            "实时分析工程": { indicators: [83, 89, 91], status: "运行中" }
+          }
+        }
+      },
+      currentView: 'domain',
+      selectedDomain: null,
+      selectedSystem: null,
+      breadcrumb: ['领域总览'],
+      searchTerm: '',
+      filterStatus: 'all'
+    }
+  },
+  computed: {
+    // 计算整体统计
+    overallStats() {
+      const domains = Object.keys(this.mockData).length
+      const systems = Object.values(this.mockData).reduce((sum, domain) => sum + Object.keys(domain).length, 0)
+      const projects = Object.values(this.mockData).reduce((sum, domain) => 
+        sum + Object.values(domain).reduce((sSum, system) => sSum + Object.keys(system).length, 0), 0
+      )
+      
+      const allRates = Object.values(this.mockData).map(domain => this.calculateDomainCompliance(domain))
+      const avgRate = allRates.reduce((sum, rate) => sum + rate, 0) / allRates.length
+      
+      return { 
+        domains, 
+        systems, 
+        projects, 
+        avgRate: avgRate.toFixed(1)
+      }
+    },
+    
+    // 领域统计
+    domainStats() {
+      return Object.entries(this.mockData).map(([domainName, domainData]) => ({
+        name: domainName,
+        rate: this.calculateDomainCompliance(domainData),
+        systemCount: Object.keys(domainData).length,
+        projectCount: Object.values(domainData).reduce((sum, system) => sum + Object.keys(system).length, 0)
+      }))
+    },
+    
+    // 系统统计
+    systemStats() {
+      if (!this.selectedDomain) return []
+      const systemData = this.mockData[this.selectedDomain]
+      return Object.entries(systemData).map(([systemName, projects]) => ({
+        name: systemName,
+        rate: this.calculateSystemCompliance(projects),
+        projectCount: Object.keys(projects).length,
+        projects: Object.entries(projects)
+      }))
+    },
+    
+    // 工程统计
+    projectStats() {
+      if (!this.selectedDomain || !this.selectedSystem) return []
+      const projectData = this.mockData[this.selectedDomain][this.selectedSystem]
+      return Object.entries(projectData).map(([projectName, project]) => ({
+        name: projectName,
+        indicators: project.indicators,
+        status: project.status,
+        rate: this.calculateComplianceRate(project.indicators)
+      }))
+    }
+  },
+  methods: {
+    // 计算达标率 (≥80为达标)
+    calculateComplianceRate(indicators) {
+      const passCount = indicators.filter(score => score >= 80).length
+      return (passCount / indicators.length) * 100
+    },
+
+    // 计算系统达标率
+    calculateSystemCompliance(systemData) {
+      const projects = Object.values(systemData)
+      const totalRate = projects.reduce((sum, project) => 
+        sum + this.calculateComplianceRate(project.indicators), 0
+      )
+      return totalRate / projects.length
+    },
+
+    // 计算领域达标率
+    calculateDomainCompliance(domainData) {
+      const systems = Object.values(domainData)
+      const totalRate = systems.reduce((sum, system) => 
+        sum + this.calculateSystemCompliance(system), 0
+      )
+      return totalRate / systems.length
+    },
+
+    // 导航处理
+    handleDomainClick(domainName) {
+      this.selectedDomain = domainName
+      this.currentView = 'system'
+      this.breadcrumb = ['领域总览', domainName]
+    },
+
+    handleSystemClick(systemName) {
+      this.selectedSystem = systemName
+      this.currentView = 'project'
+      this.breadcrumb = ['领域总览', this.selectedDomain, systemName]
+    },
+
+    handleBack() {
+      if (this.currentView === 'project') {
+        this.currentView = 'system'
+        this.breadcrumb = ['领域总览', this.selectedDomain]
+      } else if (this.currentView === 'system') {
+        this.currentView = 'domain'
+        this.selectedDomain = null
+        this.breadcrumb = ['领域总览']
+      }
+    },
+
+    handleBreadcrumbClick(index) {
+      if (index === 0) {
+        this.navigateToDomain()
+      } else if (index === 1 && this.selectedDomain) {
+        this.navigateToSystem()
+      }
+    },
+
+    navigateToDomain() {
+      this.currentView = 'domain'
+      this.selectedDomain = null
+      this.selectedSystem = null
+      this.breadcrumb = ['领域总览']
+    },
+
+    navigateToSystem() {
+      this.currentView = 'system'
+      this.selectedSystem = null
+      this.breadcrumb = ['领域总览', this.selectedDomain]
+    },
+
+    navigateToProject() {
+      this.currentView = 'project'
+      this.breadcrumb = ['领域总览', this.selectedDomain, this.selectedSystem]
+    }
+  }
+}
+</script>
+
+<style scoped>
+.dashboard-container {
+  display: flex;
+  height: 100vh;
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+}
+
+.main-content {
+  flex: 1;
+  overflow-y: auto;
+  padding: 32px;
+  background: rgba(255, 255, 255, 0.05);
+}
+
+/* 自定义滚动条 */
+::-webkit-scrollbar {
+  width: 6px;
+}
+
+::-webkit-scrollbar-track {
+  background: rgba(24, 144, 255, 0.1);
+  border-radius: 3px;
+}
+
+::-webkit-scrollbar-thumb {
+  background: rgba(24, 144, 255, 0.3);
+  border-radius: 3px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: rgba(24, 144, 255, 0.5);
+}
+</style>
+
+---
+
+// 侧边栏组件 - components/SidebarNav.vue
+<template>
+  <div class="sidebar">
+    <div class="sidebar-header">
+      <div class="sidebar-title">达标率看板</div>
+      <div class="sidebar-subtitle">多层级监控平台</div>
+    </div>
+    
+    <div class="sidebar-nav">
+      <button 
+        class="nav-item"
+        :class="{ active: currentView === 'domain' }"
+        @click="$emit('navigate-to-domain')"
+      >
+        <Icon type="md-grid" style="margin-right: 8px;" />
+        领域总览
+      </button>
+      
+      <button 
+        v-if="selectedDomain"
+        class="nav-item"
+        :class="{ active: currentView === 'system' }"
+        @click="$emit('navigate-to-system')"
+      >
+        <Icon type="md-browsers" style="margin-right: 8px;" />
+        {{ selectedDomain }}
+      </button>
+      
+      <button 
+        v-if="selectedSystem"
+        class="nav-item"
+        :class="{ active: currentView === 'project' }"
+        @click="$emit('navigate-to-project')"
+      >
+        <Icon type="md-cube" style="margin-right: 8px;" />
+        {{ selectedSystem }}
+      </button>
+    </div>
+    
+    <div class="legend-box">
+      <div class="legend-title">达标率说明</div>
+      <div class="legend-item">
+        <div class="legend-dot" style="background: #52c41a;"></div>
+        <span>≥85% 优秀</span>
+      </div>
+      <div class="legend-item">
+        <div class="legend-dot" style="background: #1890ff;"></div>
+        <span>70-84% 良好</span>
+      </div>
+      <div class="legend-item">
+        <div class="legend-dot" style="background: #ff4d4f;"></div>
+        <span>&lt;70% 需改进</span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'SidebarNav',
+  props: {
+    currentView: {
+      type: String,
+      required: true
+    },
+    selectedDomain: {
+      type: String,
+      default: null
+    },
+    selectedSystem: {
+      type: String,
+      default: null
+    }
+  }
+}
+</script>
+
+<style scoped>
+.sidebar {
+  width: 280px;
+  background: rgba(255, 255, 255, 0.95);
+  backdrop-filter: blur(10px);
+  border-right: 1px solid rgba(102, 126, 234, 0.1);
+  box-shadow: 0 8px 32px rgba(102, 126, 234, 0.1);
+}
+
+.sidebar-header {
+  padding: 32px 24px 24px;
+  border-bottom: 1px solid rgba(102, 126, 234, 0.1);
+  background: linear-gradient(135deg, #1890ff 0%, #096dd9 100%);
+  color: white;
+}
+
+.sidebar-title {
+  font-size: 20px;
+  font-weight: 700;
+  margin-bottom: 8px;
+}
+
+.sidebar-subtitle {
+  font-size: 14px;
+  opacity: 0.8;
+}
+
+.sidebar-nav {
+  padding: 24px 16px;
+}
+
+.nav-item {
+  width: 100%;
+  margin-bottom: 8px;
+  padding: 12px 16px;
+  border: none;
+  background: transparent;
+  text-align: left;
+  border-radius: 8px;
+  transition: all 0.3s ease;
+  font-size: 14px;
+  color: #666;
+  cursor: pointer;
+}
+
+.nav-item:hover {
+  background: rgba(24, 144, 255, 0.08);
+  color: #1890ff;
+  transform: translateX(4px);
+}
+
+.nav-item.active {
+  background: linear-gradient(135deg, #1890ff, #096dd9);
+  color: white;
+  box-shadow: 0 4px 12px rgba(24, 144, 255, 0.3);
+}
+
+.legend-box {
+  position: absolute;
+  bottom: 24px;
+  left: 16px;
+  right: 16px;
+  background: rgba(24, 144, 255, 0.05);
+  border: 1px solid rgba(24, 144, 255, 0.1);
+  border-radius: 12px;
+  padding: 20px;
+}
+
+.legend-title {
+  font-size: 14px;
+  font-weight: 600;
+  color: #1890ff;
+  margin-bottom: 12px;
+}
+
+.legend-item {
+  display: flex;
+  align-items: center;
+  margin-bottom: 8px;
+  font-size: 12px;
+  color: #666;
+}
+
+.legend-dot {
+  width: 12px;
+  height: 12px;
+  border-radius: 50%;
+  margin-right: 8px;
+}
+</style>
+
+---
+
+// 统计面板组件 - components/StatsPanel.vue
+<template>
+  <div class="stats-grid">
+    <div class="stat-card">
+      <div class="stat-header">
+        <div>
+          <div class="stat-label">总体达标率</div>
+          <div class="stat-value">{{ overallStats.avgRate }}%</div>
+        </div>
+        <div class="stat-icon" style="background: linear-gradient(135deg, #1890ff, #096dd9);">
+          <Icon type="md-analytics" />
+        </div>
+      </div>
+    </div>
+    
+    <div class="stat-card">
+      <div class="stat-header">
+        <div>
+          <div class="stat-label">领域数量</div>
+          <div class="stat-value">{{ overallStats.domains }}</div>
+        </div>
+        <div class="stat-icon" style="background: linear-gradient(135deg, #52c41a, #389e0d);">
+          <Icon type="md-apps" />
+        </div>
+      </div>
+    </div>
+
+    <div class="stat-card">
+      <div class="stat-header">
+        <div>
+          <div class="stat-label">系统数量</div>
+          <div class="stat-value">{{ overallStats.systems }}</div>
+        </div>
+        <div class="stat-icon" style="background: linear-gradient(135deg, #722ed1, #531dab);">
+          <Icon type="md-settings" />
+        </div>
+      </div>
+    </div>
+
+    <div class="stat-card">
+      <div class="stat-header">
+        <div>
+          <div class="stat-label">工程总数</div>
+          <div class="stat-value">{{ overallStats.projects }}</div>
+        </div>
+        <div class="stat-icon" style="background: linear-gradient(135deg, #fa8c16, #d46b08);">
+          <Icon type="md-construct" />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'StatsPanel',
+  props: {
+    overallStats: {
+      type: Object,
+      required: true
+    }
+  }
+}
+</script>
+
+<style scoped>
+.stats-grid {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 24px;
+  margin-bottom: 32px;
+}
+
+.stat-card {
+  background: rgba(255, 255, 255, 0.95);
+  backdrop-filter: blur(10px);
+  border-radius: 16px;
+  padding: 24px;
+  border: 1px solid rgba(24, 144, 255, 0.1);
+  box-shadow: 0 8px 32px rgba(24, 144, 255, 0.08);
+  transition: all 0.3s ease;
+}
+
+.stat-card:hover {
+  transform: translateY(-4px);
+  box-shadow: 0 16px 48px rgba(24, 144, 255, 0.15);
+}
+
+.stat-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  margin-bottom: 16px;
+}
+
+.stat-label {
+  font-size: 14px;
+  color: #666;
+  margin-bottom: 8px;
+}
+
+.stat-value {
+  font-size: 32px;
+  font-weight: 700;
+  color: #1890ff;
+  line-height: 1;
+}
+
+.stat-icon {
+  width: 48px;
+  height: 48px;
+  border-radius: 12px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 20px;
+  color: white;
+}
+</style>
+
+---
+
+// 工具栏组件 - components/ToolbarPanel.vue
+<template>
+  <div class="toolbar">
+    <div class="toolbar-content">
+      <div class="breadcrumb-nav">
+        <template v-for="(item, index) in breadcrumb">
+          <button 
+            :key="'btn-' + index"
+            class="breadcrumb-item"
+            :class="{ current: index === breadcrumb.length - 1 }"
+            @click="$emit('breadcrumb-click', index)"
+          >
+            {{ item }}
+          </button>
+          <span v-if="index < breadcrumb.length - 1" :key="'sep-' + index" class="chevron-icon">
+            <Icon type="ios-arrow-forward" />
+          </span>
+        </template>
+      </div>
+      
+      <div class="toolbar-actions">
+        <Button 
+          v-if="currentView !== 'domain'" 
+          class="back-btn"
+          @click="$emit('back')"
+          icon="md-arrow-back"
+          size="small"
+        >
+          返回
+        </Button>
+        
+        <Input 
+          :value="searchTerm" 
+          @input="$emit('search-change', $event)"
+          placeholder="搜索..." 
+          prefix="ios-search"
+          class="search-input"
+          size="small"
+        />
+        
+        <Select 
+          :value="filterStatus" 
+          @input="$emit('filter-change', $event)"
+          size="small" 
+          style="width: 120px;"
+        >
+          <Option value="all">所有状态</Option>
+          <Option value="运行中">运行中</Option>
+          <Option value="维护中">维护中</Option>
+          <Option value="异常">异常</Option>
+        </Select>
+        
+        <Button icon="md-refresh" size="small">刷新</Button>
+        <Button icon="md-download" size="small">导出</Button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'ToolbarPanel',
+  props: {
+    breadcrumb: {
+      type: Array,
+      required: true
+    },
+    currentView: {
+      type: String,
+      required: true
+    },
+    searchTerm: {
+      type: String,
+      required: true
+    },
+    filterStatus: {
+      type: String,
+      required: true
+    }
+  }
+}
+</script>
+
+<style scoped>
+.toolbar {
+  background: rgba(255, 255, 255, 0.95);
+  backdrop-filter: blur(10px);
+  border-radius: 16px;
+  padding: 20px 24px;
+  margin-bottom: 24px;
+  border: 1px solid rgba(24, 144, 255, 0.1);
+  box-shadow: 0 4px 24px rgba(24, 144, 255, 0.08);
+}
+
+.toolbar-content {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.breadcrumb-nav {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.breadcrumb-item {
+  background: none;
+  border: none;
+  color: #1890ff;
+  cursor: pointer;
+  font-size: 14px;
+  padding: 4px 8px;
+  border-radius: 4px;
+  transition: all 0.2s ease;
+}
+
+.breadcrumb-item:hover {
+  background: rgba(24, 144, 255, 0.08);
+}
+
+.breadcrumb-item.current {
+  color: #333;
+  cursor: default;
+}
+
+.toolbar-actions {
+  display: flex;
+  gap: 12px;
+  align-items: center;
+}
+
+.back-btn {
+  background: rgba(24, 144, 255, 0.1);
+  border: 1px solid rgba(24, 144, 255, 0.2);
+  color: #1890ff;
+  border-radius: 8px;
+  padding: 8px 16px;
+  font-size: 14px;
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+.back-btn:hover {
+  background: rgba(24, 144, 255, 0.2);
+  transform: translateX(-2px);
+}
+
+.search-input {
+  width: 280px;
+}
+
+.chevron-icon {
+  color: #ccc;
+  margin: 0 4px;
+}
+</style>
+
+---
+
+// 内容区域组件 - components/ContentArea.vue
+<template>
+  <div class="content-area">
+    <!-- 领域视图 -->
+    <domain-grid-view
+      v-if="currentView === 'domain'"
+      :domain-stats="domainStats"
+      @domain-click="$emit('domain-click', $event)"
+    />
+
+    <!-- 系统视图 -->
+    <system-grid-view
+      v-if="currentView === 'system'"
+      :system-stats="systemStats"
+      @system-click="$emit('system-click', $event)"
+    />
+
+    <!-- 工程视图 -->
+    <project-list-view
+      v-if="currentView === 'project'"
+      :project-stats="projectStats"
+    />
+  </div>
+</template>
+
+<script>
+import DomainGridView from './DomainGridView.vue'
+import SystemGridView from './SystemGridView.vue'
+import ProjectListView from './ProjectListView.vue'
+
+export default {
+  name: 'ContentArea',
+  components: {
+    DomainGridView,
+    SystemGridView,
+    ProjectListView
+  },
+  props: {
+    currentView: {
+      type: String,
+      required: true
+    },
+    domainStats: {
+      type: Array,
+      default: () => []
+    },
+    systemStats: {
+      type: Array,
+      default: () => []
+    },
+    projectStats: {
+      type: Array,
+      default: () => []
+    }
+  }
+}
+</script>
+
+<style scoped>
+.content-area {
+  background: rgba(255, 255, 255, 0.95);
+  backdrop-filter: blur(10px);
+  border-radius: 16px;
+  padding: 32px;
+  border: 1px solid rgba(24, 144, 255, 0.1);
+  box-shadow: 0 8px 32px rgba(24, 144, 255, 0.08);
+}
+</style>
+
+---
+
+// 领域网格视图组件 - components/DomainGridView.vue
+<template>
+  <div class="domain-grid">
+    <div 
+      v-for="domain in domainStats" 
+      :key="domain.name"
+      class="card"
+      @click="$emit('domain-click', domain.name)"
+    >
+      <div class="card-header">
+        <h3 class="card-title">{{ domain.name }}</h3>
+        <div class="trend-icon" :style="getTrendIconStyle(domain.rate)">
+          <Icon :type="getTrendIcon(domain.rate)" />
+        </div>
+      </div>
+      
+      <div class="rate-section">
+        <div class="rate-label">达标率</div>
+        <div class="rate-value">{{ domain.rate.toFixed(1) }}%</div>
+        <div class="progress-bar">
+          <div 
+            class="progress-fill"
+            :style="{ width: domain.rate + '%' }"
+          ></div>
+        </div>
+      </div>
+
+      <div class="card-stats">
+        <div class="stat-box">
+          <div class="stat-number">{{ domain.systemCount }}</div>
+          <div class="stat-text">系统</div>
+        </div>
+        <div class="stat-box">
+          <div class="stat-number">{{ domain.projectCount }}</div>
+          <div class="stat-text">工程</div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'DomainGridView',
+  props: {
+    domainStats: {
+      type: Array,
+      required: true
+    }
+  },
+  methods: {
+    getTrendIcon(rate) {
+      if (rate >= 85) return 'md-trending-up'
+      if (rate >= 70) return 'md-remove'
+      return 'md-trending-down'
+    },
+    getTrendIconStyle(rate) {
+      if (rate >= 85) return 'background: #52c41a; color: white;'
+      if (rate >= 70) return 'background: #1890ff; color: white;'
+      return 'background: #ff4d4f; color: white;'
+    }
+  }
+}
+</script>
+
+<style scoped>
+.domain-grid {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 32px;
+}
+
+.card {
+  background: rgba(255, 255, 255, 0.9);
+  border-radius: 16px;
+  padding: 24px;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  border: 2px solid transparent;
+  position: relative;
+  overflow: hidden;
+}
+
+.card::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 4px;
+  background: linear-gradient(90deg, #1890ff, #096dd9);
+  transform: scaleX(0);
+  transition: transform 0.3s ease;
+}
+
+.card:hover::before {
+  transform: scaleX(1);
+}
+
+.card:hover {
+  transform: translateY(-8px);
+  box-shadow: 0 16px 48px rgba(24, 144, 255, 0.2);
+  border-color: rgba(24, 144, 255, 0.2);
+}
+
+.card-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  margin-bottom: 24px;
+}
+
+.card-title {
+  font-size: 18px;
+  font-weight: 700;
+  color: #1890ff;
+  margin: 0;
+}
+
+.trend-icon {
+  width: 24px;
+  height: 24px;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 14px;
+}
+
+.rate-section {
+  margin-bottom: 24px;
+}
+
+.rate-label {
+  font-size: 14px;
+  color: #666;
+  margin-bottom: 8px;
+}
+
+.rate-value {
+  font-size: 36px;
+  font-weight: 700;
+  color: #1890ff;
+  line-height: 1;
+  margin-bottom: 12px;
+}
+
+.progress-bar {
+  width: 100%;
+  height: 8px;
+  background: rgba(24, 144, 255, 0.1);
+  border-radius: 4px;
+  overflow: hidden;
+  position: relative;
+}
+
+.progress-fill {
+  height: 100%;
+  background: linear-gradient(90deg, #1890ff, #096dd9);
+  border-radius: 4px;
+  transition: width 0.6s ease;
+  position: relative;
+}
+
+.progress-fill::after {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
+  animation: shimmer 2s infinite;
+}
+
+@keyframes shimmer {
+  0% { transform: translateX(-100%); }
+  100% { transform: translateX(100%); }
+}
+
+.card-stats {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 16px;
+}
+
+.stat-box {
+  background: rgba(24, 144, 255, 0.05);
+  border: 1px solid rgba(24, 144, 255, 0.1);
+  border-radius: 8px;
+  padding: 16px;
+  text-align: center;
+}
+
+.stat-number {
+  font-size: 20px;
+  font-weight: 700;
+  color: #1890ff;
+  margin-bottom: 4px;
+}
+
+.stat-text {
+  font-size: 12px;
+  color: #666;
+}
+</style>
+
+---
+
+// 系统网格视图组件 - components/SystemGridView.vue
+<template>
+  <div class="system-grid">
+    <div 
+      v-for="system in systemStats" 
+      :key="system.name"
+      class="card"
+      @click="$emit('system-click', system.name)"
+    >
+      <div class="card-header">
+        <h3 class="card-title">{{ system.name }}</h3>
+        <div class="trend-icon" :style="getTrendIconStyle(system.rate)">
+          <Icon :type="getTrendIcon(system.rate)" />
+        </div>
+      </div>
+      
+      <div class="rate-section">
+        <div class="rate-label">达标率</div>
+        <div class="rate-value">{{ system.rate.toFixed(1) }}%</div>
+        <div class="progress-bar">
+          <div 
+            class="progress-fill"
+            :style="{ width: system.rate + '%' }"
+          ></div>
+        </div>
+      </div>
+
+      <div class="stat-box">
+        <div class="stat-number">{{ system.projectCount }}</div>
+        <div class="stat-text">个工程</div>
+      </div>
+
+      <div class="project-list">
+        <div 
+          v-for="(project, index) in system.projects.slice(0, 3)" 
+          :key="index"
+          class="project-item"
+        >
+          <span class="project-name">{{ project[0] }}</span>
+          <span class="status-tag" :class="getStatusClass(project[1].status)">
+            {{ project[1].status }}
+          </span>
+        </div>
+        <div v-if="system.projects.length > 3" class="project-item" style="justify-content: center; color: #999;">
+          还有 {{ system.projects.length - 3 }} 个工程...
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'SystemGridView',
+  props: {
+    systemStats: {
+      type: Array,
+      required: true
+    }
+  },
+  methods: {
+    getTrendIcon(rate) {
+      if (rate >= 85) return 'md-trending-up'
+      if (rate >= 70) return 'md-remove'
+      return 'md-trending-down'
+    },
+    getTrendIconStyle(rate) {
+      if (rate >= 85) return 'background: #52c41a; color: white;'
+      if (rate >= 70) return 'background: #1890ff; color: white;'
+      return 'background: #ff4d4f; color: white;'
+    },
+    getStatusClass(status) {
+      switch (status) {
+        case '运行中': return 'status-running'
+        case '维护中': return 'status-maintenance'
+        case '异常': return 'status-error'
+        default: return ''
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+.system-grid {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 32px;
+}
+
+.card {
+  background: rgba(255, 255, 255, 0.9);
+  border-radius: 16px;
+  padding: 24px;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  border: 2px solid transparent;
+  position: relative;
+  overflow: hidden;
+}
+
+.card::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 4px;
+  background: linear-gradient(90deg, #1890ff, #096dd9);
+  transform: scaleX(0);
+  transition: transform 0.3s ease;
+}
+
+.card:hover::before {
+  transform: scaleX(1);
+}
+
+.card:hover {
+  transform: translateY(-8px);
+  box-shadow: 0 16px 48px rgba(24, 144, 255, 0.2);
+  border-color: rgba(24, 144, 255, 0.2);
+}
+
+.card-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  margin-bottom: 24px;
+}
+
+.card-title {
+  font-size: 18px;
+  font-weight: 700;
+  color: #1890ff;
+  margin: 0;
+}
+
+.trend-icon {
+  width: 24px;
+  height: 24px;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 14px;
+}
+
+.rate-section {
+  margin-bottom: 24px;
+}
+
+.rate-label {
+  font-size: 14px;
+  color: #666;
+  margin-bottom: 8px;
+}
+
+.rate-value {
+  font-size: 36px;
+  font-weight: 700;
+  color: #1890ff;
+  line-height: 1;
+  margin-bottom: 12px;
+}
+
+.progress-bar {
+  width: 100%;
+  height: 8px;
+  background: rgba(24, 144, 255, 0.1);
+  border-radius: 4px;
+  overflow: hidden;
+  position: relative;
+}
+
+.progress-fill {
+  height: 100%;
+  background: linear-gradient(90deg, #1890ff, #096dd9);
+  border-radius: 4px;
+  transition: width 0.6s ease;
+  position: relative;
+}
+
+.progress-fill::after {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
+  animation: shimmer 2s infinite;
+}
+
+@keyframes shimmer {
+  0% { transform: translateX(-100%); }
+  100% { transform: translateX(100%); }
+}
+
+.stat-box {
+  background: rgba(24, 144, 255, 0.05);
+  border: 1px solid rgba(24, 144, 255, 0.1);
+  border-radius: 8px;
+  padding: 16px;
+  text-align: center;
+  margin-bottom: 16px;
+}
+
+.stat-number {
+  font-size: 20px;
+  font-weight: 700;
+  color: #1890ff;
+  margin-bottom: 4px;
+}
+
+.stat-text {
+  font-size: 12px;
+  color: #666;
+}
+
+.project-list {
+  padding-top: 16px;
+  border-top: 1px solid rgba(24, 144, 255, 0.1);
+}
+
+.project-item {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 8px 0;
+  font-size: 12px;
+}
+
+.project-name {
+  color: #333;
+  flex: 1;
+  margin-right: 8px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.status-tag {
+  padding: 4px 8px;
+  border-radius: 12px;
+  font-size: 10px;
+  font-weight: 500;
+}
+
+.status-running { 
+  background: #f6ffed; 
+  color: #52c41a; 
+  border: 1px solid #b7eb8f; 
+}
+
+.status-maintenance { 
+  background: #fffbe6; 
+  color: #faad14; 
+  border: 1px solid #ffe58f; 
+}
+
+.status-error { 
+  background: #fff2f0; 
+  color: #ff4d4f; 
+  border: 1px solid #ffccc7; 
+}
+</style>
+
+---
+
+// 工程列表视图组件 - components/ProjectListView.vue
+<template>
+  <div>
+    <div 
+      v-for="project in projectStats" 
+      :key="project.name"
+      class="project-card"
+    >
+      <div class="project-header">
+        <div>
+          <h3 class="project-title">{{ project.name }}</h3>
+          <Tag :color="getStatusTagColor(project.status)">{{ project.status }}</Tag>
+        </div>
+        <div class="project-rate">
+          <div class="project-rate-value">{{ project.rate.toFixed(1) }}%</div>
+          <div class="project-rate-label">达标率</div>
+        </div>
+      </div>
+      
+      <div class="indicators-grid">
+        <div 
+          v-for="(score, index) in project.indicators" 
+          :key="index"
+          class="indicator-card"
+        >
+          <div class="indicator-label">指标 {{ index + 1 }}</div>
+          <div class="indicator-value">{{ score }}</div>
+          <div class="indicator-status" :class="score >= 80 ? 'status-pass' : 'status-fail'">
+            {{ score >= 80 ? '达标' : '未达标' }}
+          </div>
+          <div class="indicator-progress">
+            <div 
+              class="indicator-progress-fill"
+              :class="getProgressClass(score)"
+              :style="{ width: score + '%' }"
+            ></div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'ProjectListView',
+  props: {
+    projectStats: {
+      type: Array,
+      required: true
+    }
+  },
+  methods: {
+    getStatusTagColor(status) {
+      switch (status) {
+        case '运行中': return 'success'
+        case '维护中': return 'warning'
+        case '异常': return 'error'
+        default: return 'default'
+      }
+    },
+    getProgressClass(score) {
+      if (score >= 85) return 'progress-excellent'
+      if (score >= 70) return 'progress-good'
+      return 'progress-poor'
+    }
+  }
+}
+</script>
+
+<style scoped>
+.project-card {
+  background: rgba(255, 255, 255, 0.9);
+  border-radius: 16px;
+  padding: 32px;
+  margin-bottom: 24px;
+  border: 2px solid rgba(24, 144, 255, 0.1);
+  position: relative;
+  overflow: hidden;
+}
+
+.project-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  margin-bottom: 32px;
+}
+
+.project-title {
+  font-size: 24px;
+  font-weight: 700;
+  color: #1890ff;
+  margin-bottom: 12px;
+}
+
+.project-rate {
+  text-align: right;
+}
+
+.project-rate-value {
+  font-size: 32px;
+  font-weight: 700;
+  color: #1890ff;
+  margin-bottom: 4px;
+}
+
+.project-rate-label {
+  font-size: 14px;
+  color: #666;
+}
+
+.indicators-grid {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 24px;
+}
+
+.indicator-card {
+  background: rgba(24, 144, 255, 0.03);
+  border: 1px solid rgba(24, 144, 255, 0.1);
+  border-radius: 12px;
+  padding: 24px;
+  text-align: center;
+  position: relative;
+  overflow: hidden;
+}
+
+.indicator-card::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 3px;
+  background: linear-gradient(90deg, #1890ff, #096dd9);
+}
+
+.indicator-label {
+  font-size: 14px;
+  font-weight: 600;
+  color: #666;
+  margin-bottom: 16px;
+}
+
+.indicator-value {
+  font-size: 48px;
+  font-weight: 700;
+  color: #1890ff;
+  margin-bottom: 12px;
+  line-height: 1;
+}
+
+.indicator-status {
+  padding: 6px 12px;
+  border-radius: 16px;
+  font-size: 12px;
+  font-weight: 600;
+  margin-bottom: 16px;
+  display: inline-block;
+}
+
+.status-pass {
+  background: #f6ffed;
+  color: #52c41a;
+  border: 1px solid #b7eb8f;
+}
+
+.status-fail {
+  background: #fff2f0;
+  color: #ff4d4f;
+  border: 1px solid #ffccc7;
+}
+
+.indicator-progress {
+  width: 100%;
+  height: 6px;
+  background: rgba(24, 144, 255, 0.1);
+  border-radius: 3px;
+  overflow: hidden;
+}
+
+.indicator-progress-fill {
+  height: 100%;
+  border-radius: 3px;
+  transition: width 0.8s ease;
+}
+
+.progress-excellent { 
+  background: linear-gradient(90deg, #52c41a, #73d13d); 
+}
+
+.progress-good { 
+  background: linear-gradient(90deg, #1890ff, #40a9ff); 
+}
+
+.progress-poor { 
+  background: linear-gradient(90deg, #ff4d4f, #ff7875); 
+}
+</style>
+
+---
+
+// 样式文件 - styles/dashboard.css
+body {
+  margin: 0;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  min-height: 100vh;
+}
+
+/* iView 组件样式覆盖 */
+.ivu-input-wrapper {
+  border-radius: 8px;
+}
+
+.ivu-select {
+  width: 140px;
+}
+
+.ivu-btn {
+  border-radius: 8px;
+  font-weight: 500;
+}
+
+/* 全局动画 */
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+    transform: translateY(20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.fade-enter-active, .fade-leave-active {
+  transition: all 0.3s ease;
+}
+
+.fade-enter, .fade-leave-to {
+  opacity: 0;
+  transform: translateY(-20px);
+}
+
+---
+
+// 使用示例 - main.js
+import Vue from 'vue'
+import iView from 'iview'
+import 'iview/dist/styles/iview.css'
+import './styles/dashboard.css'
+import ComplianceDashboard from './ComplianceDashboard.vue'
+
+Vue.use(iView)
+
+new Vue({
+  el: '#app',
+  components: {
+    ComplianceDashboard
+  },
+  template: '<ComplianceDashboard />'
+})
+
+---
+
+// 使用示例 - App.vue
+<template>
+  <div id="app">
+    <ComplianceDashboard />
+  </div>
+</template>
+
+<script>
+import ComplianceDashboard from './ComplianceDashboard.vue'
+
+export default {
+  name: 'App',
+  components: {
+    ComplianceDashboard
+  }
+}
+</script>