perf: 重构模块

src/components/PageWrapper/index.js

@@ -0,0 +1,4 @@
+import { withInstall } from '@/utils/component'
+import PageWrapper  from './index.vue'
+
+export default withInstall(PageWrapper)

src/components/PageWrapper/index.vue

@@ -0,0 +1,29 @@
+<template >
+  <div class="page-data-v-wrapper">
+    <FloatPanel pos="left">
+      <slot name="left" />
+    </FloatPanel>
+    <FloatPanel pos="right">
+      <slot name="right" />
+    </FloatPanel>
+    <slot />
+  </div>
+</template>
+
+<script>
+import { FloatPanel } from '@/components'
+
+export default {
+  name: 'PageWrapper',
+  components: {
+    FloatPanel
+  },
+  data() {
+    return {}
+  },
+  methods: {}
+}
+</script>
+
+<style scoped lang='less'>
+</style>

src/components/index.js

@@ -1,8 +1,10 @@
 import  ContainerBorder from './ContainerBorder'
 import  FloatPanel from './FloatPanel'
+import  PageWrapper from './PageWrapper'
 
 
 export {
   ContainerBorder,
-  FloatPanel
+  FloatPanel,
+  PageWrapper
 }

src/views/area/index.vue

@@ -1,26 +1,40 @@
 <template>
-  <div id="area">
-    <Left />
-    <Right />
+  <PageWrapper id="area-page">
+    <template #left>
+      <ContainerBorder title="数据统计">
+        <DataStatistics />
+      </ContainerBorder>
+      <ContainerBorder  title="数据分析">
+        <DataAnalysis />
+      </ContainerBorder>
+      <ContainerBorder  title="状态监测">
+        <ConditionMonitoring />
+      </ContainerBorder>
+    </template>
+    <template #right>
+    </template>
     <CenterPanel />
-  </div>
+  </PageWrapper>
 </template>
 
 <script>
-import Left from '@/views/modules/left/index.vue'
-import Right from '@/views/modules/right/index.vue'
-import CenterPanel from '@/views/modules/panel/index.vue'
+import { ContainerBorder, PageWrapper } from '@/components'
+import { DataStatistics, DataAnalysis, ConditionMonitoring } from '@/bis-components'
+import CenterPanel from '@/views/modules/CenterPanel'
 
 export default {
-  name: 'AreaView',
+  name: 'BuildView',
   components: {
-    Left,
-    Right,
-    CenterPanel
+    PageWrapper,
+    CenterPanel,
+    ContainerBorder,
+    // 左侧组件
+    DataStatistics, 
+    DataAnalysis, 
+    ConditionMonitoring
   }
 }
 </script>
 
-
 <style lang="less">
 </style>

src/views/build/index.vue

@@ -1,22 +1,37 @@
 <template>
-  <div id="build">
-    <Left />
-    <Right />
+  <PageWrapper id="build-page">
+    <template #left>
+      <ContainerBorder title="数据统计">
+        <DataStatistics />
+      </ContainerBorder>
+      <ContainerBorder  title="数据分析">
+        <DataAnalysis />
+      </ContainerBorder>
+      <ContainerBorder  title="状态监测">
+        <ConditionMonitoring />
+      </ContainerBorder>
+    </template>
+    <template #right>
+    </template>
     <CenterPanel />
-  </div>
+  </PageWrapper>
 </template>
 
 <script>
-import Left from '@/views/modules/left/index.vue'
-import Right from '@/views/modules/right/index.vue'
-import CenterPanel from '@/views/modules/panel/index.vue'
+import { ContainerBorder, PageWrapper } from '@/components'
+import { DataStatistics, DataAnalysis, ConditionMonitoring } from '@/bis-components'
+import CenterPanel from '@/views/modules/CenterPanel'
 
 export default {
   name: 'BuildView',
   components: {
-    Left,
-    Right,
-    CenterPanel
+    PageWrapper,
+    CenterPanel,
+    ContainerBorder,
+    // 左侧组件
+    DataStatistics, 
+    DataAnalysis, 
+    ConditionMonitoring
   }
 }
 </script>

src/views/main/components/index.js

@@ -0,0 +1,3 @@
+export { default as RescueStationStatistics }  from './RescueStationStatistics/index.vue'
+export { default as PoliceStatistics } from './PoliceStatistics/index.vue'
+export { default as FireLog } from './FireLog/index.vue'

src/views/main/index.vue

@@ -1,21 +1,51 @@
 <template>
-  <div id="main">
-    <Left />
-    <Right />
+  <PageWrapper id="main-page">
+    <template #left>
+      <ContainerBorder title="数据统计">
+        <DataStatistics />
+      </ContainerBorder>
+      <ContainerBorder  title="数据分析">
+        <DataAnalysis />
+      </ContainerBorder>
+      <ContainerBorder  title="状态监测">
+        <ConditionMonitoring />
+      </ContainerBorder>
+    </template>
+    <template #right>
+      <ContainerBorder title="救援站点统计">
+        <RescueStationStatistics />
+      </ContainerBorder>
+      <ContainerBorder  title="出警统计">
+        <PoliceStatistics />
+      </ContainerBorder>
+      <ContainerBorder  title="消防日志">
+        <FireLog />
+      </ContainerBorder>
+    </template>
     <CenterPanel />
-  </div>
+  </PageWrapper>
 </template>
 
 <script>
-import Left from '@/views/modules/left/index.vue'
-import Right from '@/views/modules/right/index.vue'
-import CenterPanel from '@/views/modules/panel/index.vue'
+import CenterPanel from '@/views/modules/CenterPanel'
+import { DataStatistics, DataAnalysis, ConditionMonitoring } from '@/bis-components'
+import { ContainerBorder, PageWrapper } from '@/components'
+import {RescueStationStatistics, PoliceStatistics, FireLog} from './components'
+
 export default {
   name: 'MainView',
   components: {
-    Left,
-    Right,
-    CenterPanel
+    PageWrapper,
+    CenterPanel,
+    ContainerBorder,
+    // 左侧组件
+    DataStatistics, 
+    DataAnalysis, 
+    ConditionMonitoring,
+    // 右侧组件
+    RescueStationStatistics,
+    PoliceStatistics,
+    FireLog
   }
 }
 </script>

src/views/modules/CenterPanel/index.js

@@ -0,0 +1,4 @@
+import CenterPanel from './index.vue'
+
+
+export default CenterPanel

src/views/modules/left/index.vue

@@ -1,29 +0,0 @@
-<template>
-<FloatPanel pos="left">
-  <ContainerBorder title="数据统计">
-    <DataStatistics />
-  </ContainerBorder>
-  <ContainerBorder  title="数据分析">
-    <DataAnalysis />
-  </ContainerBorder>
-  <ContainerBorder  title="状态监测">
-    <ConditionMonitoring />
-  </ContainerBorder>
-</FloatPanel>
-</template>
-
-<script>
-import { ContainerBorder, FloatPanel } from '@/components'
-import { DataStatistics, DataAnalysis, ConditionMonitoring } from '@/bis-components'
-
-export default {
-  name: 'MainView.Left',
-  components: {
-    ContainerBorder,
-    FloatPanel,
-    DataAnalysis,
-    ConditionMonitoring,
-    DataStatistics
-  }
-}
-</script>

src/views/modules/right/index.vue

@@ -1,31 +0,0 @@
-<template>
-<FloatPanel pos="right">
-  <ContainerBorder title="救援站点统计">
-    <RescueStationStatistics />
-  </ContainerBorder>
-  <ContainerBorder  title="出警统计">
-    <PoliceStatistics />
-  </ContainerBorder>
-  <ContainerBorder  title="消防日志">
-    <FireLog />
-  </ContainerBorder>
-</FloatPanel>
-</template>
-
-<script>
-import { ContainerBorder, FloatPanel } from '@/components'
-import RescueStationStatistics from './RescueStationStatistics/index.vue'
-import PoliceStatistics from './PoliceStatistics/index.vue'
-import FireLog from './FireLog/index.vue'
-
-export default {
-  name: 'MainView.Right',
-  components: {
-    ContainerBorder,
-    FloatPanel,
-    RescueStationStatistics,
-    PoliceStatistics,
-    FireLog
-  }
-}
-</script>