feat: 新增带默认BOM的产品和原材料接口并优化界面

refactor(HomeModules): 重构统计面板组件并添加骨架屏
feat(coil): 添加物料类型和更新时间查询条件
style(ProductInfo/RawMaterialInfo): 阻止事件冒泡
chore: 添加钢卷图标资源

klp-ui/src/views/index.vue

@@ -1,39 +1,100 @@
 <template>
-  <div class="dashboard-root">
-    <!-- 全部应用 -->
-    <el-row>
-      <AllApplications />
+  <div class="dashboard-editor-container">
+
+    <statistic-group />
+
+    <el-row style="background:#fff;padding:16px 16px 0;margin-bottom:32px;">
+      <line-chart :chart-data="lineChartData" />
     </el-row>
 
-    <el-row :gutter="20" style="margin-top: 20px;">
-      <el-col :span="12">
-        <el-card style="height: 500px;">
-          <FlowTable />
-        </el-card>
+    <el-row :gutter="32">
+      <el-col :xs="24" :sm="24" :lg="8">
+        <div class="chart-wrapper">
+          <raddar-chart />
+        </div>
+      </el-col>
+      <el-col :xs="24" :sm="24" :lg="8">
+        <div class="chart-wrapper">
+          <pie-chart />
+        </div>
+      </el-col>
+      <el-col :xs="24" :sm="24" :lg="8">
+        <div class="chart-wrapper">
+          <bar-chart />
+        </div>
       </el-col>
     </el-row>
+
+    
   </div>
 </template>
 
 <script>
-import AllApplications from '@/views/components/AllApplications.vue';
-import OrderDashboard from '@/views/components/OrderDashboard.vue';
-import FlowTable from '@/views/components/FlowTable.vue';
-import Greeting from '@/views/components/Greeting.vue';
+// import PanelGroup from './dashboard/PanelGroup'
+import LineChart from './dashboard/LineChart'
+import RaddarChart from './dashboard/RaddarChart'
+import PieChart from './dashboard/PieChart'
+import BarChart from './dashboard/BarChart'
+import StatisticGroup from '@/components/HomeModules/StatisticGroup.vue'
+
+const lineChartData = {
+  newVisitis: {
+    expectedData: [100, 120, 161, 134, 105, 160, 165],
+    actualData: [120, 82, 91, 154, 162, 140, 145]
+  },
+  messages: {
+    expectedData: [200, 192, 120, 144, 160, 130, 140],
+    actualData: [180, 160, 151, 106, 145, 150, 130]
+  },
+  purchases: {
+    expectedData: [80, 100, 121, 104, 105, 90, 100],
+    actualData: [120, 90, 100, 138, 142, 130, 130]
+  },
+  shoppings: {
+    expectedData: [130, 140, 141, 142, 145, 150, 160],
+    actualData: [120, 82, 91, 154, 162, 140, 130]
+  }
+}
 
 export default {
+  name: 'Index',
   components: {
-    AllApplications,
-    OrderDashboard,
-    FlowTable,
-    Greeting
+    // PanelGroup,
+    StatisticGroup,
+    LineChart,
+    RaddarChart,
+    PieChart,
+    BarChart
+  },
+  data() {
+    return {
+      lineChartData: lineChartData.newVisitis
+    }
+  },
+  methods: {
+    handleSetLineChartData(type) {
+      this.lineChartData = lineChartData[type]
+    }
   }
-};
+}
 </script>
 
-<style scoped>
-.dashboard-root {
-  min-height: 100vh;
+<style lang="scss" scoped>
+.dashboard-editor-container {
   padding: 32px;
+  background-color: rgb(240, 242, 245);
+  position: relative;
+
+  .chart-wrapper {
+    background: #fff;
+    padding: 16px 16px 0;
+    margin-bottom: 32px;
+  }
 }
-</style>
+
+@media (max-width:1024px) {
+  .chart-wrapper {
+    padding: 8px;
+  }
+}
+</style>