资金看板

.env.development

@@ -5,11 +5,7 @@ VITE_APP_TITLE = 煤科建管平台
 VITE_APP_ENV = 'development'
 
 # 开发环境
-<<<<<<< HEAD
 VITE_APP_BASE_API = 'http://192.168.110.180:8899'
-=======
-VITE_APP_BASE_API = 'http://192.168.110.149:8899'
->>>>>>> aab67593ebb8d9116738d0d867a6119ba61615c8
 
 # 无人机接口地址
 

src/views/largeScreen/components/leftPage.vue

@@ -33,16 +33,25 @@
       />
     </div>
     <div class="contract_box">
-
+      <EchartBox :option="barOption" />
     </div>
   </div>
 </template>
 
 <script setup>
 import { ref, reactive, onMounted, computed, toRefs, getCurrentInstance, nextTick } from 'vue';
-import echarts from 'echarts';
+// import echarts from 'echarts';
 import TitleComponent  from './TitleComponent.vue';
 import ProgressComponent from './ProgressComponent.vue';
+import EchartBox from '@/components/EchartBox/index.vue';
+import { getBarOptions2 } from './optionList';
+const barOption = ref();
+const getCapitalData = (data) => {
+  barOption.value = getBarOptions2();
+};
+onMounted(() => {
+  getCapitalData();
+});
 </script>
 
 <style lang="scss">
@@ -52,6 +61,9 @@ import ProgressComponent from './ProgressComponent.vue';
   .kpi_box{
     margin-bottom: 10px;
   }
+ .contract_box{
+    height: 35vh;
+  }
   .kpi_box,.contract_box {
     padding: 10px;
     box-sizing: border-box;

src/views/largeScreen/components/optionList.ts

@@ -1,4 +1,5 @@
 import * as echarts from 'echarts/core';
+import { text } from 'stream/consumers';
 // import { PictorialBarChart } from 'echarts/charts'
 // 客流量图
 export const getOption = (xData: any, yData: any) => {
@@ -574,10 +575,10 @@ export const getDishesOption = (data?: any) => {
 // 菜品库存图
 export const getInventoryOption = () => {
   const res = {
-      data: [2800, 300, 3900, 3000, 2450, 2670, 3320],
+    data: [2800, 300, 3900, 3000, 2450, 2670, 3320],
-      name: ['麻辣牛肉', '水煮肉片', '酸菜鱼', '辣子鸡丁', '烧白', '冬瓜排骨汤', '清炒油麦菜'],
+    name: ['麻辣牛肉', '水煮肉片', '酸菜鱼', '辣子鸡丁', '烧白', '冬瓜排骨汤', '清炒油麦菜'],
-      ratio: [4000, 4000, 4000, 4000, 4000, 4000, 4000]
+    ratio: [4000, 4000, 4000, 4000, 4000, 4000, 4000]
-    },
+  },
     dataIndex = 1;
   const option = {
     xAxis: {
@@ -826,3 +827,62 @@ export const getBarOptions = (data: any) => {
   };
   return option;
 };
+
+// 收支合同分析
+export const getBarOptions2 = (data: any) => {
+  const option = {
+    color:['#FF932A', '#678FE6', '#1DD6FF', '#00E396'],
+    title: {
+      text: '数量（个）',
+      subtext: '16',
+      bottom: 'center',
+      left: 'center',
+      textStyle: {
+        color: '#9DADB7',
+        fontSize: 16
+      },
+      subtextStyle:{
+        color: '#707070',
+        fontSize: 32,
+        fontWeight: 'bold'
+      }
+    },
+    tooltip: {
+      trigger: 'item'
+    },
+    legend: {
+      top: '5%',
+      left: 'center'
+    },
+    series: [
+      {
+        name: 'Access From',
+        type: 'pie',
+        radius: ['50%', '60%'],
+        avoidLabelOverlap: false,
+        padAngle: 5,
+        label: {
+          show: false,
+          position: 'center'
+        },
+        emphasis: {
+          label: {
+            show: false,
+            fontSize: 40,
+            fontWeight: 'bold'
+          }
+        },
+        labelLine: {
+          show: false
+        },
+        data: [
+          { value: 3, name: '100万一下' },
+          { value: 4, name: '100-500万' },
+          { value: 5, name: '500-1000万' },
+          { value: 4, name: '1000万以上' },
+        ]
+      }
+    ]
+  };
+  return option;
+}