1123

ruoyi-ui/src/views/evaluate/index.vue

@@ -497,7 +497,7 @@ async function getTreeLeft(){
     valuePai.value = getFirstDayOfYear()
     getDay()
     getMon()
-    getPai()
+    // getPai()
   })
   var par1 = {
     params:{

ruoyi-ui/src/views/service/timing/index.vue

@@ -138,7 +138,7 @@
             </template>
         </el-table-column>
       </el-table>
-      <!-- <div style="float: right;margin-top: 1%;margin-right: 1%;">
+      <div style="float: right;margin-top: 1%;margin-right: 1%;">
           <el-pagination
             small
             v-model='currentPage'
@@ -148,7 +148,7 @@
             :total="total"
             class="mt-4"
           />
-        </div> -->
+        </div>
     </div>
   </div>
   <el-dialog :title="title" @close="clearForm" v-model="dialogVisible" title="" width="60%"  destroy-on-close :key="tableKey">
@@ -900,6 +900,10 @@ function handleShowCron() {
   expression.value = formJi.value.triggerInterval;
   openCron.value = true;
 }
+function changePage(page) {
+  currentPage.value = page;
+  getTable();
+}
 function crontabFill(value) {
   formJi.value.triggerInterval = value;
 }
@@ -963,10 +967,10 @@ function showDe(row){
   }
   snailDe(par).then(res=>{
     formJi.value = res.data
-    if(formJi.value.jobStatus===0){
+    if(formJi.value.jobStatus===1){
       formJi.value.jobStatus = '启用'
     }
-    if(formJi.value.jobStatus===1){
+    if(formJi.value.jobStatus===0){
       formJi.value.jobStatus = '关闭'
     }
   })
@@ -1011,7 +1015,9 @@ function getTable(){
     groupName:groupName.value,
     executorInfo:executorInfo.value,
     jobName:jobName.value,
-    jobStatus:jobStatus.value
+    jobStatus:jobStatus.value,
+    pageSize:10,
+    pageNum:currentPage.value
   }
   snailList(par).then(res=>{
     tableData.value = res.rows

ruoyi-ui/src/views/shouye.vue

@@ -1,71 +1,73 @@
 <template>
-    <div style="height: 100vh;background-color: white;">
-    <div style="width: 100%;height: 7vh;padding-top: 1%;display: flex;align-items: center;" class="back1">
-        <img style="position: absolute;left: 1%;top:1%;width: 58%;z-index: 100;height:5%;"  src="@/assets/上海水务首页图片包/项目标题1.png" alt="">
+    <div style="height: 100vh;" class="backPage">
+    <div style="width: 100%;height: 7vh;padding-top: 1%;display: flex;align-items: center;">
+        <img style="position: absolute;left: 1.5%;top:1%;width: 58%;z-index: 100;height:5%;"  src="@/assets/上海水务首页图片包1/上海市水务海洋数字孪生模型服务平台.png" alt="">
         <!-- <div style="margin-left: 1%;color: white;font-size: 2rem;">上海市水务海洋数字孪生模型服务管理系统</div> -->
     </div>
-    <div style="display: flex;width: 98%;margin-left: 1%;margin-top: 0.5%;background-color: #F5F5F5;">
-        <div style="height: 50vh;width: 20%;background-color: rgb(236, 245, 255);display: flex;flex-direction: column;justify-content: space-between;">
-            <div style="display: flex;align-items: center;width: 100%;;height: 10vh;margin-top: 1%;" class="menu-item" @click="pushto('platform/componentReg')">
-                <!-- <el-icon style="margin-left: 5%;font-size: 1.5rem;"><Folder /></el-icon>    -->
-                <svg-icon icon-class="zhuce" style="margin-left: 5%;font-size: 1.5rem;" />
-                <div style="font-size: 2rem;color: #707070;margin-left: 5%;">模型注册管理</div>
-            </div>
-            <div style="display: flex;align-items: center;width: 100%;;height: 10vh;margin-top: 1%;" class="menu-item" @click="pushto('register/edtiModel')">
-                <svg-icon icon-class="guanli" style="margin-left: 5%;font-size: 1.5rem;" />
-                <div style="font-size: 2rem;color: #707070;margin-left: 5%;">模型服务管理</div>
-            </div>
-            <div style="display: flex;align-items: center;width: 100%;;height: 10vh;margin-top: 1%;" class="menu-item" @click="pushto('standardization/modelUsing')">
-                <svg-icon icon-class="dev" style="margin-left: 5%;font-size: 1.5rem;" />
-                <div style="font-size: 2rem;color: #707070;margin-left: 5%;">模型标准化开发</div>
-            </div>
-            <div style="display: flex;align-items: center;width: 100%;;height: 10vh;margin-top: 1%;" class="menu-item" @click="pushto('datamonitor/model_operation_monitoring')">
-                <svg-icon icon-class="jiankong" style="margin-left: 5%;font-size: 1.5rem;" />
-                <div style="font-size: 2rem;color: #707070;margin-left: 5%;">模型监控管理</div>
-            </div>
-            <div style="display: flex;align-items: center;width: 100%;;height: 10vh;margin-top: 1%;" class="menu-item" @click="pushto('evaluate/score')">
-                <svg-icon icon-class="pingjia" style="margin-left: 5%;font-size: 1.5rem;" />
-                <div style="font-size: 2rem;color: #707070;margin-left: 5%;">模型评价管理</div>
+    <div style="display: flex;width: 97%;margin-left: 1.5%;margin-top: 0.5%;;border-radius: 20px;">
+        <div style="height: 55vh;width: 30%;display: flex;flex-direction: column;justify-content: space-between;background-color: #AACEF9;border-radius: 20px;" class="shadow">
+            <div style="height: 53vh;width: 100%;display: flex;flex-direction: column;justify-content: space-between;">
+                <div style="display: flex;align-items: center;width: 80%;;height: 10vh;margin-top: 3%;margin-left: 10%;" class="menu-item" @click="pushto('platform/componentReg')">
+                    <img style="margin-left: 5%;height: 2.5rem;width: 10%;"  src="@/assets/上海水务首页图片包1/模型注册.png" alt="">
+                    <!-- <svg-icon icon-class="zhuce" style="margin-left: 5%;font-size: 1.5rem;" /> -->
+                    <div style="font-size: 2rem;color: white;margin-left: 5%;">模型注册管理</div>
+                </div>
+                <div style="display: flex;align-items: center;width: 80%;;height: 10vh;margin-top: 3%;margin-left: 10%;" class="menu-item" @click="pushto('register/edtiModel')">
+                    <img style="margin-left: 5%;height: 2.5rem;width: 10%;"  src="@/assets/上海水务首页图片包1/服务管理.png" alt="">
+                    <div style="font-size: 2rem;color: white;margin-left: 5%;">模型服务管理</div>
+                </div>
+                <div style="display: flex;align-items: center;width: 80%;;height: 10vh;margin-top: 3%;margin-left: 10%;" class="menu-item" @click="pushto('standardization/modelUsing')">
+                    <img style="margin-left: 5%;height: 2.5rem;width: 10%;"  src="@/assets/上海水务首页图片包1/标准化开发.png" alt="">
+                    <div style="font-size: 2rem;color: white;margin-left: 5%;">模型标准化开发</div>
+                </div>
+                <div style="display: flex;align-items: center;width: 80%;;height: 10vh;margin-top: 3%;margin-left: 10%;" class="menu-item" @click="pushto('datamonitor/model_operation_monitoring')">
+                    <img style="margin-left: 5%;height: 2.5rem;width: 10%;"  src="@/assets/上海水务首页图片包1/模型监控管理.png" alt="">
+                    <div style="font-size: 2rem;color: white;margin-left: 5%;">模型监控管理</div>
+                </div>
+                <div style="display: flex;align-items: center;width: 80%;;height: 10vh;margin-top: 3%;margin-left: 10%;" class="menu-item" @click="pushto('evaluate/score')">
+                    <img style="margin-left: 5%;height: 2.5rem;width: 10%;"  src="@/assets/上海水务首页图片包1/模型评价.png" alt="">
+                    <div style="font-size: 2rem;color: white;margin-left: 5%;">模型评价管理</div>
+                </div>
             </div>
         </div>
         <el-carousel 
         :interval="4000" 
         height="auto"
-        style="width: 80%;height: 50vh;margin-left: 0.5%;border: 1px solid rgb(160, 207, 255);border-radius: 10px;"
+        style="width: 70%;height: 55vh;margin-left: 1%;border: 1px solid rgb(160, 207, 255);border-radius: 20px;"
         arrow="always"
         autoplay>
-            <el-carousel-item style="height: 50vh">
-                <img style="height: 100%;width: 100%;" src="@/assets/上海水务首页图片包/上海城区洪涝仿真模型.png" alt="">
+            <el-carousel-item style="height: 55vh">
+                <img style="height: 100%;width: 100%;" src="@/assets/上海水务首页图片包1/上海城区洪涝仿真模型.png" alt="">
             </el-carousel-item>
-            <el-carousel-item style="height: 50vh">
-                <img style="height: 100%;width: 100%;" src="@/assets/上海水务首页图片包/风暴潮模型.png" alt="">
+            <el-carousel-item style="height: 55vh">
+                <img style="height: 100%;width: 100%;" src="@/assets/上海水务首页图片包1/上海沿海风暴模型.png" alt="">
             </el-carousel-item>
-            <el-carousel-item style="height: 50vh">
-                <img style="height: 100%;width: 100%;" src="@/assets/上海水务首页图片包/黄浦江水系水文分析预报数值模拟模型.png"
+            <el-carousel-item style="height: 55vh">
+                <img style="height: 100%;width: 100%;" src="@/assets/上海水务首页图片包1/黄浦江水系水文分析预报数值模拟模型.png"
                     alt="">
             </el-carousel-item>
-            <el-carousel-item style="height: 50vh">
-                <img style="height: 100%;width: 100%;" src="@/assets/上海水务首页图片包/内涝.jpg" alt="">
+            <el-carousel-item style="height: 55vh">
+                <img style="height: 100%;width: 100%;" src="@/assets/上海水务首页图片包1/内涝风险实时预警与预报模型.png" alt="">
             </el-carousel-item>
-            <el-carousel-item style="height: 50vh">
-                <img style="height: 100%;width: 100%;" src="@/assets/上海水务首页图片包/上海城区洪涝仿真模型.png" alt="">
+            <el-carousel-item style="height: 55vh">
+                <img style="height: 100%;width: 100%;" src="@/assets/上海水务首页图片包1/上海城区洪涝仿真模型.png" alt="">
             </el-carousel-item>
-            <el-carousel-item style="height: 50vh">
-                <img style="height: 100%;width: 100%;" src="@/assets/上海水务首页图片包/苏州河水系水情预报模型.png" alt="">
+            <el-carousel-item style="height: 55vh">
+                <img style="height: 100%;width: 100%;" src="@/assets/上海水务首页图片包1/苏州河水系水情预报模型.png" alt="">
             </el-carousel-item>
-            <el-carousel-item style="height: 50vh">
-                <img style="height: 100%;width: 100%;" src="@/assets/上海水务首页图片包/上海市中心城区排水系统模型.png" alt="">
+            <el-carousel-item style="height: 55vh">
+                <img style="height: 100%;width: 100%;" src="@/assets/上海水务首页图片包1/上海市中心城区排水系统模型.png" alt="">
             </el-carousel-item>
-            <el-carousel-item style="height: 50vh">
-                <img style="height: 100%;width: 100%;" src="@/assets/上海水务首页图片包/温带风暴潮预报模型.png" alt="">
+            <el-carousel-item style="height: 55vh">
+                <img style="height: 100%;width: 100%;" src="@/assets/上海水务首页图片包1/温带风暴潮预报模型.png" alt="">
             </el-carousel-item>
         </el-carousel>
     </div>
-    <div style="margin-top: 1%;height: 39vh;width: 98%;margin-left: 1%;display: flex;">
-        <div id="bt1" style="width: 50%;height: 100%;border: 1px solid rgb(160, 207, 255);border-radius: 10px;background-color: #F5F5F5;">
+    <div style="margin-top: 1%;height: 33vh;width: 97%;margin-left: 1.5%;display: flex;border-radius: 20px;background-color: #A9D2FB;" class="shadow">
+        <div id="bt1" style="width: 50%;height: 100%;">
 
         </div>
-        <div id="bt2" style="width: 50%;height: 100%;border: 1px solid rgb(160, 207, 255);border-radius: 10px;margin-left: 1%;background-color: #F5F5F5;">
+        <div id="bt2" style="width: 50%;height: 100%;">
 
         </div>
     </div>
@@ -120,42 +122,53 @@ async function getchart2(){
             var chartDom = document.getElementById('bt2');
             var myChart = echarts.init(chartDom);
             res.data.forEach(item=>{
-                var par = {
-                    name: item.mdName,
-                    value: item.total,
+                if(item.mdName!=='上海模型服务'){
+                    var par = {
+                        name: item.mdName,
+                        value: item.total,
+                    }
+                    y.push(par)
                 }
-                y.push(par)
             })
-            console.log(res.data)
+            console.log(y)
             const option = {
-            title: {
-                text: '模型调用次数统计',
-                subtext: '',
-                left: 'center'
-            },
-            tooltip: {
-                trigger: 'item'
-            },
-            legend: {
-                orient: 'vertical',
-                left: 'right'
-            },
-            series: [
-                {
-                name: '',
-                type: 'pie',
-                radius: '50%',
-                data:y,
-                emphasis: {
-                        itemStyle: {
-                        shadowBlur: 10,
-                        shadowOffsetX: 0,
-                        shadowColor: 'rgba(0, 0, 0, 0.5)'
+                title: {
+                    text: '模型调用次数统计',
+                    subtext: '',
+                    top: '5%',
+                    textStyle: {
+                        color: 'rgb(51, 126, 204)'
+                    },
+                    left: 'center'
+                },
+                tooltip: {
+                    trigger: 'item'
+                },
+                
+                series: [
+                    {
+                        name: '',
+                        type: 'pie',
+                        radius: '50%',
+                        roseType: 'area',
+                        data:y,
+                        center: ['50%', '55%'],
+                        color: ['#0050df','#fc69a7', '#19e3e3', '#ffcc1c', '#f89e67','#2bba68',  '#019bfe'],
+                        label: {
+                        // 关键配置：文字颜色跟随区域颜色
+                            color: 'auto', // 设置为 'auto' 使文字颜色跟随区域颜色[1](@ref)
+                            fontSize: 18,
+                        },
+                        emphasis: {
+                                itemStyle: {
+                                shadowBlur: 10,
+                                shadowOffsetX: 0,
+                                shadowColor: 'rgba(0, 0, 0, 0.5)'
+                            }
+                        }
                     }
-                }
-                }
-            ]
-        };
+                ]
+            };
         myChart.setOption(option)
     })
 }
@@ -167,29 +180,25 @@ async function getEchartData(){
         let obj = {
             name: '成功',
             type: 'bar',
-            color:'#67C23A',
-            stack: '任务总量',
+            color: 'rgba(0,80,223,1)',
             data: []
         }
         let obj1 = {
             name: '失败',
             type: 'bar',
-            color:'#F56C6C',
-            stack: '任务总量',
+            color:'rgba(252,105,167,1)',
             data: []
         }
         let obj2 = {
             name: '停止',
             type: 'bar',
-            color:'#E6A23C',
-            stack: '任务总量',
+            color:'rgba(25,227,227,1)',
             data: []
         }
         let obj3 = {
             name: '取消',
             type: 'bar',
-            color:'#909399',
-            stack: '任务总量',
+            color:'rgba(2255,204,28,1)',
             data: []
         }
         res.data.forEach(item=>{
@@ -205,43 +214,76 @@ async function getEchartData(){
         var chartDom = document.getElementById('bt1');
         var myChart = echarts.init(chartDom);
         const option = {
-        title: {
-            text: '模型调用成功率',
-            subtext: '',
-            left: 'center',
-            top: '2%',
-        },
-        // 提示框配置
-        tooltip: {
-            trigger: 'axis',
-            axisPointer: {
-                type: 'shadow'
+            title: {
+                text: '模型调用成功率',
+                subtext: '',
+                left: 'center',
+                textStyle: {
+                        color: 'rgb(51, 126, 204)'
+                    },
+                top: '5%',
             },
-        },
-        // 图例配置
-        legend: {
-            top: '10%',
-        },
-        // 网格配置
-        grid: {
-            left: '3%',
-            right: '4%',
-            bottom: '3%',
-            containLabel: true
-        },
-        // X轴配置
-        xAxis: {
-            type: 'category',
-            data: res.data.map(item => item.createDt)
-        },
-        // Y轴配置
-        yAxis: {
-            type: 'value',
-            name: ''
-        },
-        // 系列配置 - 这里是堆叠的关键
-        series: datay
-    }
+            // 提示框配置
+            tooltip: {
+                trigger: 'axis',
+                axisPointer: {
+                    type: 'shadow'
+                },
+            },
+            // 图例配置
+            legend: {
+                top: '20%',
+                itemGap: 100,
+                textStyle: {
+                    color: '#fff' // 字体颜色白色
+                }
+            },
+            // 网格配置
+            grid: {
+                left: '3%',
+                right: '4%',
+                top: '30%',
+                bottom: '8%',
+                containLabel: true
+            },
+            // X轴配置
+            xAxis: {
+                type: 'category',
+                data: res.data.map(item => item.createDt),
+                axisTick: {
+                    show: false
+                },
+                // 设置x轴标签样式
+                axisLabel: {
+                    color: '#fff', // 字体颜色白色
+                    rotate: -15 // 倾斜45度
+                },
+                axisLine: {
+                    show: false
+                },
+            },
+            // Y轴配置
+            yAxis: {
+                type: 'value',
+                name: '',
+                axisLine: {
+                    show: false
+                },
+                // 隐藏y轴刻度线
+                axisTick: {
+                    show: false
+                },
+                // 隐藏y轴分割线
+                splitLine: {
+                    show: false
+                },
+                // 设置y轴标签样式
+                axisLabel: {
+                    color: '#fff' // 字体颜色白色
+                }
+            },
+            series: datay
+        }
 
     // 设置配置项并渲染图表
     myChart.setOption(option)
@@ -269,19 +311,27 @@ onMounted(() => {
   background-position: center center;
   transition: transform .2s ease-in;
 }
-
+.backPage{
+    background-image: url('@/assets/上海水务首页图片包1/背景图.png');
+}
 .back2:hover {
-  transform: translateY(-20px);
+  transform: translateX(-20px);
   box-shadow: 0 0 6px rgba(0, 0, 0, .12);
 }
 .menu-item {
-    background-color: rgb(217, 236, 255);
+    background-color: #7ABAFF;
     border: 1px solid rgb(160, 207, 255);
-    border-radius: 10px;
+    border-radius: 20px;
+}
+.shadow {
+     box-shadow: 
+    -5px 0 8px -2px rgba(0, 0, 0, 0.1),
+    0 -5px 8px -2px rgba(0, 0, 0, 0.1),
+    0 5px 8px -2px rgba(0, 0, 0, 0.1);
 }
-
 .menu-item:hover {
-    background-color: rgb(160, 207, 255);
+    background-color: #3F9FFC;
     cursor: pointer;
+    transform: translateX(-20px);
 }
 </style>