From 5f158e8a12f6744ededd9311f451a9b2ef3853f3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=AB=98=E4=BA=91=E9=B9=8F?= <ypgaop@isoftstone.com>
Date: Thu, 7 Nov 2024 17:44:52 +0800
Subject: [PATCH] =?UTF-8?q?=E8=AE=A1=E7=AE=97=E5=BC=95=E6=93=8E=EF=BC=9Aui?=
 =?UTF-8?q?=E9=87=8D=E6=96=B0=E8=AE=BE=E8=AE=A1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/views/backend/calculate/index.vue     | 332 +++++++++---------
 1 file changed, 172 insertions(+), 160 deletions(-)

diff --git a/ui/dasadmin/src/views/backend/calculate/index.vue b/ui/dasadmin/src/views/backend/calculate/index.vue
index be6afcae..3b2689b7 100644
--- a/ui/dasadmin/src/views/backend/calculate/index.vue
+++ b/ui/dasadmin/src/views/backend/calculate/index.vue
@@ -1,52 +1,63 @@
 <template>
     <div class="calculate">
-        <el-container class="container">
-            <el-header class="header">
-                <div class="headerMain">
-                    <div class="namePart">
-                        <span>名称：</span>
-                        <el-input></el-input>
-                    </div>
-                    <div class="statusPart">
-                        <span>状态：</span>
-                        <el-select></el-select>
-                        <el-button type="primary" plain>查询</el-button>
-                    </div>
-                    <el-button type="success" plain>注册/更新</el-button>
-                </div>
-            </el-header>
-            <el-main class="main">
-                <div class="modulesList">
-                    <div class="moduleItem" :class="item.status === 1 ? 'runItem' : 'stopItem'" v-for="item in moduleList" :key="item.id">
-                        <div class="itemMain">
-                            <div class="header-main">
-                                <div class="title">
-                                    {{ item.title }}
-                                </div>
-                                <div class="version">{{ '版本：' + item.version }}</div>
-                                <div class="updateTime">{{ '更新于：' + item.updateTime }}</div>
-                            </div>
-                            <div class="main-main">
-                                {{ item.desc }}
-                            </div>
-                            <div class="footer-main">
-                                {{ '任务周期：' + item.taskRange }}
-                            </div>
+        <div class="header">
+            <div class="headerTitle">计算引擎</div>
+            <el-button type="primary">注册/更新</el-button>
+        </div>
+        <div class="modulesList">
+            <div class="moduleRow" v-for="row in rowLength" :key="moduleList[(row - 1) * colLen].id">
+                <div class="moduleItem">
+                    <div class="itemMain">
+                        <div class="title">
+                            {{ moduleList[(row - 1) * colLen].title }}
                         </div>
-                        <div class="itemAside">
-                            <el-button :type="item.status === 1 ? 'success' : ''">查看</el-button>
-                            <el-button v-if="item.status === 2" type="success">激活</el-button>
-                            <el-button v-if="item.status === 1" type="danger">禁用</el-button>
+                        <div class="versionTime">
+                            <div class="version">{{ '版本：' + moduleList[(row - 1) * colLen].version }}</div>
+                            <div class="updateTime">{{ '更新于：' + moduleList[(row - 1) * colLen].updateTime }}</div>
+                        </div>
+                        <div class="main-main">
+                            {{ moduleList[(row - 1) * colLen].desc }}
+                        </div>
+                        <div class="footer-main">
+                            {{ '任务周期：' + moduleList[(row - 1) * colLen].taskRange }}
                         </div>
                     </div>
+                    <div class="itemAside">
+                        <el-button type="primary">查看</el-button>
+                        <el-button v-if="moduleList[(row - 1) * colLen].status === 2" type="primary" plain>激活</el-button>
+                        <el-button v-if="moduleList[(row - 1) * colLen].status === 1" type="danger" plain>禁用</el-button>
+                    </div>
                 </div>
-            </el-main>
-        </el-container>
+                <div class="moduleItem" v-if="moduleList[(row - 1) * colLen + 1]">
+                    <div class="itemMain">
+                        <div class="title">
+                            {{ moduleList[(row - 1) * colLen + 1].title }}
+                        </div>
+                        <div class="versionTime">
+                            <div class="version">{{ '版本：' + moduleList[(row - 1) * colLen + 1].version }}</div>
+                            <div class="updateTime">{{ '更新于：' + moduleList[(row - 1) * colLen + 1].updateTime }}</div>
+                        </div>
+                        <div class="main-main">
+                            {{ moduleList[(row - 1) * colLen + 1].desc }}
+                        </div>
+                        <div class="footer-main">
+                            {{ '任务周期：' + moduleList[(row - 1) * colLen + 1].taskRange }}
+                        </div>
+                    </div>
+                    <div class="itemAside">
+                        <el-button type="primary">查看</el-button>
+                        <el-button v-if="moduleList[(row - 1) * colLen + 1].status === 2" type="primary" plain>激活</el-button>
+                        <el-button v-if="moduleList[(row - 1) * colLen + 1].status === 1" type="danger" plain>禁用</el-button>
+                    </div>
+                </div>
+                <div class="moduleItem" style="visibility: hidden" v-else></div>
+            </div>
+        </div>
     </div>
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue'
+import { computed, ref } from 'vue'
 const moduleList = ref([
     {
         id: 1,
@@ -66,7 +77,39 @@ const moduleList = ref([
         desc: '此脚本以机组为单位，计算各机组的实时计算量，包含：有功可增量、有功可减量、4GC有功指令等',
         taskRange: '0/5****?',
     },
+    {
+        id: 1,
+        status: 1,
+        title: '风场统计量实时计算模块',
+        version: '1.0.0',
+        updateTime: '2022-01-01 12:35:56',
+        desc: '此脚本以风场为单位，包含：全场总有功功率、全场总无功功率、全场平均风速等。',
+        taskRange: '0/5****?',
+    },
+    {
+        id: 2,
+        status: 2,
+        title: '单机组统计量实时计算模块',
+        version: '1.0.1',
+        updateTime: '2022-01-01 12:35:56',
+        desc: '此脚本以机组为单位，计算各机组的实时计算量，包含：有功可增量、有功可减量、4GC有功指令等',
+        taskRange: '0/5****?',
+    },
+    {
+        id: 1,
+        status: 1,
+        title: '风场统计量实时计算模块',
+        version: '1.0.0',
+        updateTime: '2022-01-01 12:35:56',
+        desc: '此脚本以风场为单位，包含：全场总有功功率、全场总无功功率、全场平均风速等。',
+        taskRange: '0/5****?',
+    },
 ])
+
+const colLen = 2
+const rowLength = computed(() => {
+    return Math.ceil(moduleList.value.length / 2)
+})
 </script>
 
 <style scoped lang="scss">
@@ -74,138 +117,107 @@ const moduleList = ref([
     width: 100%;
     height: 100%;
     padding: 10px;
-    .container {
+    width: 100%;
+    height: 100%;
+    .header {
+        padding: 10px;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
         width: 100%;
-        height: 100%;
-        .header {
-            width: 100%;
-            height: 80px;
-            .headerMain {
-                width: 100%;
+        height: 60px;
+        border-bottom: 1px solid #eeeeee;
+        .headerTitle {
+            position: relative;
+            width: 134px;
+            height: 30px;
+            font-size: 18px;
+            line-height: 30px;
+            text-align: center;
+            &::before {
+                content: '';
+                position: absolute;
+                left: 0;
+                background: #0064aa;
                 height: 100%;
-                padding: 20px;
-                display: flex;
-                align-items: center;
-                border-radius: 10px;
-                border: 1px solid #333;
-                .namePart {
-                    display: flex;
-                    align-items: center;
-                    width: 350px;
-                    margin-left: 30px;
-                    .el-input {
-                        width: 300px;
-                        height: 40px;
-                    }
-                }
-                .statusPart {
-                    margin-left: 30px;
-                    display: flex;
-                    align-items: center;
-                    width: 500px;
-                    span {
-                        display: flex;
-                        width: 42px;
-                    }
-                    .el-select {
-                        width: 300px;
-                    }
-                    :deep(.el-select__wrapper) {
-                        width: 300px;
-                        height: 40px;
-                    }
-                    .el-button {
-                        margin-left: 20px;
-                        width: 100px;
-                        height: 40px;
-                    }
-                }
-                .el-button {
-                    margin-left: auto;
-                    margin-right: 20px;
-                    width: 100px;
-                    height: 40px;
-                }
+                width: 4px;
+                border-radius: 0 8px 8px 0;
             }
         }
-        .main {
+        .el-button {
+            width: 100px;
+            height: 40px;
+        }
+    }
+    .modulesList {
+        width: 100%;
+        display: flex;
+        flex-wrap: wrap;
+        overflow-y: auto;
+        overflow-x: hidden;
+        max-height: 100%;
+        min-width: 912px;
+        .moduleRow {
+            display: flex;
             width: 100%;
-            height: calc(100% - 80px);
-            .modulesList {
-                width: 100%;
-                // min-height: 200px;
-                // height: 100%;
-                padding: 20px;
-                border-radius: 10px;
-                border: 1px solid #333;
-                overflow-y: auto;
-                max-height: 100%;
-                .moduleItem {
-                    margin-top: 20px;
-                    display: flex;
-                    width: 100%;
-                    min-height: 170px;
-                    padding: 10px 20px;
-                    border-radius: 20px;
-                    border: 1px solid #333;
-                    &:nth-child(1) {
-                        margin-top: 0;
+            .moduleItem {
+                margin: 10px 8px;
+                display: flex;
+                width: 50%;
+                min-height: 170px;
+                padding: 10px 20px;
+                border-radius: 20px;
+                box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.12);
+                .itemMain {
+                    width: 90%;
+                    height: 100%;
+                    .title {
+                        font-size: 20px;
+                        font-weight: 600;
+                        height: 25px;
+                        line-height: 25px;
                     }
-                    .itemMain {
-                        min-width: 700px;
-                        width: 90%;
-                        height: 100%;
-                        .header-main {
-                            display: flex;
-                            align-items: center;
-                            width: 100%;
-                            height: 50px;
-                            .title {
-                                font-size: 28px;
-                                font-weight: bold;
-                            }
-                            .version {
-                                margin-left: 30px;
-                                min-width: 100px;
-                                color: #2f9e44;
-                            }
-                            .updateTime {
-                                margin-left: 30px;
-                                color: #2f9e44;
-                            }
-                        }
-                        .main-main {
-                            display: flex;
-                            align-items: center;
-                            height: 50px;
-                            color: #1d74c1;
-                        }
-                        .footer-main {
-                            display: flex;
-                            align-items: center;
-                            height: 50px;
-                            color: #ee9a24;
-                        }
-                    }
-                    .itemAside {
+                    .versionTime {
+                        margin-bottom: 10px;
                         display: flex;
-                        flex-direction: column;
-                        justify-content: center;
                         align-items: center;
-                        width: 10%;
-                        min-width: 100px;
-                        .el-button {
-                            margin: 10px 0;
-                            width: 80px;
-                            height: 40px;
+                        width: 100%;
+                        height: 18px;
+                        font-size: 14px;
+                        color: #0064aa;
+                        .version {
+                            min-width: 100px;
+                        }
+                        .updateTime {
+                            margin-left: 30px;
                         }
                     }
+                    .main-main {
+                        width: 100%;
+                        height: 80px;
+                        font-size: 16px;
+                        white-space: pre-wrap;
+                    }
+                    .footer-main {
+                        display: flex;
+                        align-items: center;
+                        height: 20px;
+                        font-size: 14px;
+                        color: #666666;
+                    }
                 }
-                .runItem {
-                    background-color: #b2f2bb;
-                }
-                .stopItem {
-                    background-color: #e9ecef;
+                .itemAside {
+                    display: flex;
+                    flex-direction: column;
+                    justify-content: center;
+                    align-items: center;
+                    width: 10%;
+                    min-width: 90px;
+                    .el-button {
+                        margin: 10px 0;
+                        width: 80px;
+                        height: 40px;
+                    }
                 }
             }
         }