Merge branch 'master' of http://39.98.38.2:13000/dumingliang/sh-model-platform

# Conflicts:
#	ruoyi-ui/src/views/shouye.vue

ruoyi-ui/src/views/shouye.vue

@@ -1,72 +1,96 @@
 <template>
-    <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 style="height: 100vh;" class="backPage">
+    <div
+        style="width: 100%;height: 10vh;display: flex;align-items: center;background-image: linear-gradient( 135deg, #289ee4 0%, #3c5cb7 100%); ">
+      <img style="z-index: 100;margin-left: 20px;"
+           src="@/assets/上海水务首页图片包1/上海市水务海洋数字孪生模型服务平台.png" alt="">
+      <!-- <div style="margin-left: 1%;color: white;font-size: 2rem;">上海市水务海洋数字孪生模型服务管理系统</div> -->
     </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
+          style="height: 50vh;width: 30%;display: flex;flex-direction: column;justify-content: space-between;background-color: #3c5cb7;border-radius: 20px;"
+          class="shadow">
+        <div
+            style="height: 50vh;width: 100%;display: flex;flex-direction: column;justify-content: space-around;align-items: center;">
+          <div style="display: flex;align-items: center;width: 90%;;height: 8.8vh;"
+               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: 90%;;height: 8.8vh;"
+               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: 90%;;height: 8.8vh;"
+               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: 90%;;height: 8.8vh;"
+               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: 90%;;height: 8.8vh;"
+               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>
-        <el-carousel 
-        :interval="4000" 
-        height="auto"
-        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: 55vh">
-                <img style="height: 100%;width: 100%;" src="@/assets/上海水务首页图片包1/上海城区洪涝仿真模型.png" alt="">
-            </el-carousel-item>
-            <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: 55vh">
-                <img style="height: 100%;width: 100%;" src="@/assets/上海水务首页图片包1/黄浦江水系水文分析预报数值模拟模型.png"
-                    alt="">
-            </el-carousel-item>
-            <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: 55vh">
-                <img style="height: 100%;width: 100%;" src="@/assets/上海水务首页图片包1/苏州河水系水情预报模型.png" alt="">
-            </el-carousel-item>
-            <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: 55vh">
-                <img style="height: 100%;width: 100%;" src="@/assets/上海水务首页图片包1/温带风暴潮预报模型.png" alt="">
-            </el-carousel-item>
-        </el-carousel>
+      </div>
+      <el-carousel
+          :interval="4000"
+          height="auto"
+          style="width: 70%;height: 50vh;margin-left: 1%;border: 1px solid rgb(160, 207, 255);border-radius: 20px;"
+          arrow="always"
+          autoplay>
+        <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: 55vh">
+          <img style="height: 100%;width: 100%;" src="@/assets/上海水务首页图片包1/上海沿海风暴模型.png" alt="">
+        </el-carousel-item>
+        <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: 55vh">
+          <img style="height: 100%;width: 100%;" src="@/assets/上海水务首页图片包1/内涝风险实时预警与预报模型.png"
+               alt="">
+        </el-carousel-item>
+        <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: 55vh">
+          <img style="height: 100%;width: 100%;" src="@/assets/上海水务首页图片包1/上海市中心城区排水系统模型.png"
+               alt="">
+        </el-carousel-item>
+        <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: 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%;">
-
-        </div>
+    <div style="margin-top: 1%;height: 35vh;width: 97%;margin-left: 1.5%;">
+      <el-row :gutter="20" style="height: 100%;">
+        <el-col :span="12" style="height: 100%;">
+          <el-card style="height: 100%;border-radius: 20px;" :body-style="{height:'100%'}">
+            <div id="bt1" style="width: 100%;height: 100%;"></div>
+          </el-card>
+        </el-col>
+        <el-col :span="12" style="height: 100%;">
+          <el-card style="height: 100%;border-radius: 20px;" :body-style="{height:'100%'}">
+            <div id="bt2" style="width: 100%;height: 100%;"></div>
+          </el-card>
+        </el-col>
+      </el-row>
     </div>
   </div>
 </template>
@@ -75,17 +99,20 @@ import {useRouter} from 'vue-router'
 import {onMounted} from 'vue';
 import {snailJobLine} from "@/api/service/timing.js";
 import * as echarts from 'echarts';
-import {getMdAllList } from "@/api/service/log.js";
+import {getMdAllList} from "@/api/service/log.js";
+
 const router = useRouter()
 
 function pushto(routers) {
   router.push(routers);
 }
+
 function getLast7DaysRange() {
-  const end = new Date(); 
+  const end = new Date();
   const start = new Date();
   end.setDate(start.getDate() - 1);
-  start.setDate(end.getDate() - 7);
+  start.setDate(end.getDate() - 30);
+
   function formatDate(date) {
     const year = date.getFullYear();
     const month = String(date.getMonth() + 1).padStart(2, '0');
@@ -98,201 +125,213 @@ function getLast7DaysRange() {
     end: formatDate(end)
   };
 }
-async function getchart2(){
-    const last7Days = getLast7DaysRange();
-    var par = {
-        params:{
-            beginTime:last7Days.start,
-            endTime:last7Days.end,
-        }
+
+async function getchart2() {
+  const last7Days = getLast7DaysRange();
+  var par = {
+    params: {
+      beginTime: last7Days.start,
+      endTime: last7Days.end,
     }
-    await getMdAllList(par).then(res=>{
-            var dates = []
-            var counts = []
-            res.data.forEach(item=>{
-                item.total = 0
-                item.lineCharts.forEach(item1=>{
-                    item.total = item.total + item1.num
-                })
-            })
-            var y = []
-            var chartDom = document.getElementById('bt2');
-            var myChart = echarts.init(chartDom);
-            res.data.forEach(item=>{
-                if(item.mdName!=='上海模型服务'){
-                    var par = {
-                        name: item.mdName,
-                        value: item.total,
-                    }
-                    y.push(par)
-                }
-            })
-            console.log(y)
-            const option = {
-                
-                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','#909399', '#E6A23C', '#F56C6C', '#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)
+  }
+  await getMdAllList(par).then(res => {
+    var dates = []
+    var counts = []
+    res.data.forEach(item => {
+      item.total = 0
+      item.lineCharts.forEach(item1 => {
+        item.total = item.total + item1.num
+      })
     })
-}
-async function getEchartData(){
-    await snailJobLine({type: 'MONTH'}).then(res=>{
-        console.log(res.data.map(item => item.createDt));
-        var datay = []
-        var data = []
-        let obj = {
-            name: '成功',
-            type: 'bar',
-            color: 'rgba(0,80,223,1)',
-            data: []
-        }
-        let obj1 = {
-            name: '失败',
-            type: 'bar',
-            color:'rgba(252,105,167,1)',
-            data: []
+    var y = []
+    var chartDom = document.getElementById('bt2');
+    var myChart = echarts.init(chartDom);
+    res.data.forEach(item => {
+      if (item.mdName !== '上海模型服务') {
+        var par = {
+          name: item.mdName,
+          value: item.total,
         }
-        let obj2 = {
-            name: '停止',
-            type: 'bar',
-            color:'rgb(196, 86, 86)',
-            data: []
-        }
-        let obj3 = {
-            name: '取消',
-            type: 'bar',
-            color:'rgb(238, 190, 119)',
-            data: []
+        y.push(par)
+      }
+    })
+    console.log(y)
+    const option = {
+      title: {
+        text: '模型调用次数统计',
+        subtext: '',
+        top: '-1.5%',
+        textStyle: {
+          color: 'rgb(51, 126, 204)',
+          fontSize: 24
+        },
+        left: 'center'
+      },
+      tooltip: {
+        trigger: 'item'
+      },
+      // 网格配置
+      grid: {
+        left: '0%',
+        right: '0%',
+        top: '35%',
+        bottom: '0%',
+        containLabel: true
+      },
+      series: [
+        {
+          name: '',
+          type: 'pie',
+          radius: ['40%', '80%'],
+          itemStyle: {
+            borderRadius: 10,
+            borderColor: '#fff',
+            borderWidth: 2
+          },
+          roseType: 'area',
+          data: y,
+          center: ['50%', '55%'],
+          color: ['#477ACF', '#40B0D7', '#2DBEA2', '#487ACF', '#4BBA9B', '#529b2e', '#1a76d7', '#b3e19d', '#d1edc4'],
+          label: {
+            // 关键配置：文字颜色跟随区域颜色
+            color: 'auto', // 设置为 'auto' 使文字颜色跟随区域颜色[1](@ref)
+            fontSize: 20,
+          },
+          emphasis: {
+            itemStyle: {
+              shadowBlur: 10,
+              shadowOffsetX: 0,
+              shadowColor: 'rgba(0, 0, 0, 0.5)'
+            }
+          }
         }
-        res.data.forEach(item=>{
-            obj.data.push(item.success)
-            obj1.data.push(item.failNum)
-            obj2.data.push(item.stop)
-            obj3.data.push(item.cancel)
-        })
-        datay.push(obj)
-        datay.push(obj1)    
-        datay.push(obj2)
-        datay.push(obj3)
-        var chartDom = document.getElementById('bt1');
-        var myChart = echarts.init(chartDom);
-        const option = {
-            title: {
-                text: '模型调用成功率',
-                subtext: '',
-                left: 'center',
-                textStyle: {
-                        color: 'rgb(51, 126, 204)'
-                    },
-                top: '5%',
-            },
-            // 提示框配置
-            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),
-                axisLabel: {
-                    fontSize: 14, // x轴标签字体大小
-                },
-                axisTick: {
-                    show: false
-                },
-                // 设置x轴标签样式
-                axisLabel: {
-                    color: '#fff', // 字体颜色白色
-                    rotate: -15 // 倾斜45度
-                },
-                axisLine: {
-                    show: false
-                },
-            },
-            // Y轴配置
-            yAxis: {
-                type: 'value',
-                name: '',
-                axisLabel: {
-                    fontSize: 14, // x轴标签字体大小
-                },
-                axisLine: {
-                    show: false
-                },
-                // 隐藏y轴刻度线
-                axisTick: {
-                    show: false
-                },
-                // 隐藏y轴分割线
-                splitLine: {
-                    show: false
-                },
-                // 设置y轴标签样式
-                axisLabel: {
-                    color: '#fff' // 字体颜色白色
-                }
-            },
-            series: datay
+      ]
+    };
+    myChart.setOption(option)
+  })
+}
+
+async function getEchartData() {
+  await snailJobLine({type: 'MONTH'}).then(res => {
+    console.log(res.data.map(item => item.createDt));
+    var datay = []
+    var data = []
+    let obj = {
+      name: '成功',
+      type: 'bar',
+      color: '#477ACF',
+      data: []
+    }
+    let obj1 = {
+      name: '失败',
+      type: 'bar',
+      color: '#7926fe',
+      data: []
+    }
+    let obj2 = {
+      name: '停止',
+      type: 'bar',
+      color: '#909399',
+      data: []
+    }
+    let obj3 = {
+      name: '取消',
+      type: 'bar',
+      color: '#2DBEA2',
+      data: []
+    }
+    res.data.forEach(item => {
+      obj.data.push(item.success)
+      obj1.data.push(item.failNum)
+      obj2.data.push(item.stop)
+      obj3.data.push(item.cancel)
+    })
+    datay.push(obj)
+    datay.push(obj1)
+    datay.push(obj2)
+    datay.push(obj3)
+    var chartDom = document.getElementById('bt1');
+    var myChart = echarts.init(chartDom);
+    const option = {
+      title: {
+        text: '模型调用成功率',
+        subtext: '',
+        left: 'center',
+        textStyle: {
+          color: 'rgb(51, 126, 204)',
+          fontSize: 24
+        },
+        top: '-1.5%',
+      },
+      // 提示框配置
+      tooltip: {
+        trigger: 'axis',
+        axisPointer: {
+          type: 'shadow'
+        },
+      },
+      // 图例配置
+      legend: {
+        top: '18%',
+        itemGap: 100,
+        textStyle: {
+          fontSize: 20,
+          // color: '#fff' // 字体颜色白色
         }
+      },
+      // 网格配置
+      grid: {
+        left: '3%',
+        right: '4%',
+        top: '30%',
+        bottom: '0%',
+        containLabel: true
+      },
+      // X轴配置
+      xAxis: {
+        type: 'category',
+        data: res.data.map(item => item.createDt),
+        axisTick: {
+          show: false
+        },
+        // 设置x轴标签样式
+        axisLabel: {
+          fontSize: 20,
+          // 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)
-    })
+  })
 }
+
 onMounted(() => {
   getEchartData()
   getchart2()
@@ -306,7 +345,7 @@ onMounted(() => {
 <style scoped>
 
 .back1 {
-  background-image:url('@/assets/images/title-background.png');
+  background-image: url('@/assets/images/title-background.png');
 }
 
 .back2 {
@@ -315,27 +354,30 @@ onMounted(() => {
   background-position: center center;
   transition: transform .2s ease-in;
 }
-.backPage{
-    background-image: url('@/assets/上海水务首页图片包1/背景图.png');
+
+.backPage {
+  background-color: #f4f9fd;
 }
+
 .back2:hover {
   transform: translateX(-20px);
   box-shadow: 0 0 6px rgba(0, 0, 0, .12);
 }
+
 .menu-item {
-    background-color: #7ABAFF;
-    border: 1px solid rgb(160, 207, 255);
-    border-radius: 20px;
+  border: 1px solid rgb(160, 207, 255);
+  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);
+  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: #3F9FFC;
-    cursor: pointer;
-    transform: translateX(-20px);
+  background-color: #005bf4;
+  cursor: pointer;
+  transform: translateX(-20px);
 }
 </style>