feat: 各资源接入及使用情况

src/views/screen/components/AccessUsageStatus.vue

@@ -0,0 +1,153 @@
+<template>
+    <div class="left_bottom_item inner_header">
+        <div class="inner_right">
+            <div class="flex w-[100%] h-[20px]">
+                <div class="info w-[35%]">
+                    <span>资源系统</span>
+                </div>
+                <div class="info w-[20%]">
+                    <span>资源接入数</span>
+                </div>
+                <div class="info w-[20%]">
+                    <span>资源接入率</span>
+                </div>
+                <div class="info w-[25%]">
+                    <span>资源冗余率</span>
+                </div>
+            </div>
+        </div>
+    </div>
+    <div class="left_bottom_wrap beautify-scroll-def">
+        <component
+            :is="SeamlessScroll"
+            v-if="state.list.length >= 5"
+            v-model="state.scroll"
+            :list="state.list"
+            :single-height="state.defaultOption.singleHeight"
+            :step="state.defaultOption.step"
+            :hover="state.defaultOption.hover"
+        >
+            <renderList />
+        </component>
+        <renderList v-else />
+    </div>
+</template>
+
+<script setup lang="jsx">
+import { reactive } from 'vue';
+import SeamlessScroll from './common/seamless-scroll/seamless-scroll.vue';
+
+const state = reactive({
+    list: [],
+    scroll: true,
+    defaultOption: {
+        singleHeight: 0,
+        step: 0.3,
+        hover: true,
+    },
+});
+
+const renderList = () => {
+    return (
+        <ul class="left_bottom screen-scroll-ul">
+            {state.list.map((item, index) => (
+                <li
+                    key={index}
+                    class="left_bottom_item border"
+                >
+                    <div class="inner_right">
+                        <div class="flex w-[100%] h-[20px]">
+                            <div class="info w-[35%]">
+                                <span
+                                    class="truncate"
+                                    title={item.resourceSystem}
+                                >
+                                    {item.resourceSystem}
+                                </span>
+                            </div>
+
+                            <div class="info w-[20%]">
+                                <span
+                                    class="truncate"
+                                    title={item.accessNumber}
+                                >
+                                    {item.accessNumber}
+                                </span>
+                            </div>
+
+                            <div class="info w-[20%]">
+                                <span
+                                    class="truncate"
+                                    title={item.accessRate}
+                                >
+                                    {item.accessRate}
+                                </span>
+                            </div>
+
+                            <div class="info w-[25%]">
+                                <span
+                                    class="truncate"
+                                    title={item.redundancyRate}
+                                >
+                                    {item.redundancyRate}
+                                </span>
+                            </div>
+                        </div>
+                    </div>
+                </li>
+            ))}
+        </ul>
+    );
+};
+
+const getAccessUsageStatusData = () => {
+    console.log('执行请求AccessUsageStatus');
+    return new Promise((resolve) => {
+        setTimeout(() => {
+            resolve([
+                {
+                    accessNumber: 15,
+                    accessRate: '100%',
+                    redundancyRate: '100%',
+                    resourceSystem: '机构一',
+                },
+                {
+                    accessNumber: 10,
+                    accessRate: '100%',
+                    redundancyRate: '100%',
+                    resourceSystem: '机构二',
+                },
+                {
+                    accessNumber: 8,
+                    accessRate: '100%',
+                    redundancyRate: '100%',
+                    resourceSystem: '机构三',
+                },
+                {
+                    accessNumber: 3,
+                    accessRate: '100%',
+                    redundancyRate: '100%',
+                    resourceSystem: '机构四',
+                },
+                {
+                    accessNumber: 13,
+                    accessRate: '100%',
+                    redundancyRate: '100%',
+                    resourceSystem: '机构五',
+                },
+            ]);
+        }, 1000);
+    });
+};
+
+const initFN = () => {
+    getAccessUsageStatusData().then((res) => {
+        state.list = res;
+    });
+};
+
+defineExpose({
+    name: 'AccessUsageStatus',
+    init: initFN,
+});
+</script>

src/views/screen/index.vue

@@ -69,6 +69,7 @@ import MajorSystemHealthStatus from './components/MajorSystemHealthStatus.vue';
 import MajorAlert from './components/MajorAlert.vue';
 import AccessSituation from './components/AccessSituation.vue';
 import AlarmDynamic from './components/AlarmDynamic.vue';
+import AccessUsageStatus from './components/AccessUsageStatus.vue';
 
 /** 机构切换配置 */
 const orgList = ref([
@@ -118,6 +119,9 @@ const getComponent = (componentName) => {
         case 'AlarmDynamic':
             component = shallowRef(AlarmDynamic);
             break;
+        case 'AccessUsageStatus':
+            component = shallowRef(AccessUsageStatus);
+            break;
     }
     return component;
 };
@@ -131,6 +135,7 @@ const getComponentClass = computed(() => (componentName) => {
             className = 'content_lb-item';
             break;
         case 'AccessSituation':
+        case 'AccessUsageStatus':
             className = 'content_ct-item';
             break;
         case 'AlarmDynamic':
@@ -167,8 +172,8 @@ const getLayout = (id) => {
                         ],
                         center: [
                             { title: '重要告警', componentName: 'MajorAlert' },
-                            { title: 'IT资源接入情况', componentName: 'AccessSituation' },
                             { title: '实时告警动态', componentName: 'AlarmDynamic' },
+                            { title: '各资源接入及使用情况', componentName: 'AccessUsageStatus' },
                         ],
                         right: [],
                     };