提交

src/views/largeScreen/components/rightPage.vue

@@ -1,31 +1,71 @@
 <template>
   <div class="rightPage">
     <div class="funds">
-      <div class="fundsTitle">资金情况</div>
-      <div class="funds_"></div>
+      <TitleComponent :title="'资金KPI'" />
+      <div class="funds_echarts">
+        <EchartBox :option="lineOption" />
+      </div>
+    </div>
+    <div class="cashFlow">
+      <TitleComponent :title="'现金流概述'" />
     </div>
   </div>
 </template>
 
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import TitleComponent from './TitleComponent.vue';
+import EchartBox from '@/components/EchartBox/index.vue';
+import { getLineOption, getBarOptions } from './optionList';
+
+const lineOption = ref();
+const getCapitalData = (data?: any) => {
+  // const xData = data.map((item) => item.time);
+  // const yData = data.map((item) => item.content);
+  const lineData = {
+    xLabel: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
+    line1: [
+      [100, 200, 150, 300, 250, 350, 400, 350, 450, 500, 400, 550],
+      [220, 250, 230, 280, 270, 300, 350, 320, 380, 400, 450, 500],
+      [300, 350, 320, 380, 400, 450, 500, 480, 520, 550, 600, 650]
+    ]
+
+    // line2: ['20', '50', '12', '65', '30', '60']
+  };
+  lineOption.value = getLineOption(lineData);
+};
+onMounted(() => {
+  getCapitalData();
+});
+
+//资金KPI
+</script>
 
 <style scoped lang="scss">
 .rightPage {
   width: 100%;
   height: 100%;
   background: #0c1e35;
+  box-sizing: border-box;
+  // padding: 5px;
 }
 .funds {
   width: 100%;
-  height: 40%;
+  // height: 40%;
   border: 1px solid rgba(29, 214, 255, 0.3);
   box-sizing: border-box;
-  padding: 5px;
-  .fundsTitle {
-    width: 100%;
-    height: 15%;
-    font-size: 16px;
-    background-color: #1dd6ff;
-  }
+  padding: 10px 5px;
+}
+.funds_echarts {
+  width: 100%;
+  height: 35vh;
+  padding: 10px 0 0 0;
+}
+.cashFlow {
+  width: 100%;
+  // height: 50%;
+  border: 1px solid rgba(29, 214, 255, 0.3);
+  box-sizing: border-box;
+  padding: 10px 5px;
+  margin-top: 20px;
 }
 </style>