feat: 资源类型

src/views/screen/components/ResourceType.vue

@@ -0,0 +1,120 @@
+<template>
+    <v-chart
+        v-if="JSON.stringify(option) != '{}'"
+        :option="option"
+    />
+</template>
+
+<script setup>
+import { ref } from 'vue';
+import { keyColor, colorEnum } from '../config';
+
+const colorArrar = Object.keys(colorEnum);
+const positionArrar = [[[30, 20]], [[58, 50]], [[40, 100]], [[10, 95]], [[10, 3]], [[20, 10]], [[0, 1]], [[50, 7]]];
+const option = ref({});
+let list = [];
+
+const setOptions = () => {
+    option.value = {
+        grid: {
+            right: '40%',
+        },
+        tooltip: {
+            show: false,
+        },
+        xAxis: {
+            show: false,
+        },
+        yAxis: {
+            show: false,
+        },
+        legend: {
+            show: true,
+            orient: 'vertical',
+            icon: 'circle',
+            right: 20,
+            top: 'center',
+            itemGap: 20,
+            textStyle: {
+                color: 'rgb(85, 185, 216)',
+            },
+            data: list.map((item) => item.name),
+        },
+        series: [
+            ...list.map((item) => {
+                return {
+                    name: item.name,
+                    type: 'scatter',
+                    data: item.position,
+                    symbolSize: item.scaleValue,
+                    itemStyle: {
+                        color: keyColor(item.prop),
+                    },
+                    label: {
+                        show: true,
+                        formatter: item.value.toString(),
+                        color: '#fff',
+                        fontSize: 18,
+                    },
+                };
+            }),
+        ],
+    };
+};
+
+const scaleObjectArrayTo100 = (arr) => {
+    const max = Math.max(...arr.map((item) => item.value));
+    const scaleArray = arr.map((item) => ({
+        ...item,
+        scaleValue: (item.value / max) * 100,
+    }));
+    return scaleArray.sort((a, b) => b.scaleValue - a.scaleValue);
+};
+
+const getResourceTypeData = () => {
+    console.log('执行请求ResourceType');
+    return new Promise((resolve) => {
+        setTimeout(() => {
+            resolve([
+                {
+                    name: '应用实例数',
+                    value: 3,
+                },
+                {
+                    name: '数据库数',
+                    value: 5,
+                },
+                {
+                    name: '主机数',
+                    value: 12,
+                },
+                {
+                    name: '子系统数',
+                    value: 8,
+                },
+            ]);
+        }, 1000);
+    });
+};
+
+const initFN = () => {
+    getResourceTypeData().then((result) => {
+        result = scaleObjectArrayTo100(result);
+        list = result.map((item, index) => {
+            return {
+                name: item.name,
+                position: positionArrar[index],
+                prop: colorArrar[index],
+                value: item.value,
+                scaleValue: item.scaleValue,
+            };
+        });
+        setOptions();
+    });
+};
+
+defineExpose({
+    name: 'ResourceType',
+    init: initFN,
+});
+</script>

src/views/screen/index.vue

@@ -53,7 +53,19 @@
                     </template>
                 </div>
 
-                <div class="content_right"></div>
+                <div class="content_right">
+                    <ItemWrap
+                        v-for="item in layoutData.right"
+                        :key="item.componentName"
+                        :class="[getComponentClass(item.componentName)]"
+                        :title="item.title"
+                    >
+                        <component
+                            :is="item.component"
+                            :ref="(el) => setRef(el, item.componentName)"
+                        />
+                    </ItemWrap>
+                </div>
             </div>
         </div>
     </scale-screen>
@@ -70,6 +82,7 @@ import MajorAlert from './components/MajorAlert.vue';
 import AccessSituation from './components/AccessSituation.vue';
 import AlarmDynamic from './components/AlarmDynamic.vue';
 import AccessUsageStatus from './components/AccessUsageStatus.vue';
+import ResourceType from './components/ResourceType.vue';
 
 /** 机构切换配置 */
 const orgList = ref([
@@ -122,6 +135,9 @@ const getComponent = (componentName) => {
         case 'AccessUsageStatus':
             component = shallowRef(AccessUsageStatus);
             break;
+        case 'ResourceType':
+            component = shallowRef(ResourceType);
+            break;
     }
     return component;
 };
@@ -141,6 +157,9 @@ const getComponentClass = computed(() => (componentName) => {
         case 'AlarmDynamic':
             className = 'content_cb-item';
             break;
+        case 'ResourceType':
+            className = 'content_lr-item';
+            break;
     }
     return className;
 });
@@ -161,7 +180,7 @@ const getLayout = (id) => {
                             { title: 'IT资源接入情况', componentName: 'AccessSituation' },
                             { title: '实时告警动态', componentName: 'AlarmDynamic' },
                         ],
-                        right: [],
+                        right: [{ title: '资源类型', componentName: 'ResourceType' }],
                     };
                     break;
                 case 'org1':
@@ -175,7 +194,7 @@ const getLayout = (id) => {
                             { title: '实时告警动态', componentName: 'AlarmDynamic' },
                             { title: '各资源接入及使用情况', componentName: 'AccessUsageStatus' },
                         ],
-                        right: [],
+                        right: [{ title: '资源类型', componentName: 'ResourceType' }],
                     };
                     break;
             }