|
|
@@ -1,97 +1,256 @@
|
|
|
<template>
|
|
|
- <div style="height: 100vh;background-color: #dcecef;">
|
|
|
- <img style="position: absolute;left: 2%;top: 3%;width: 58%;z-index: 100;height: 6%;" src="@/assets/上海水务首页图片包/项目标题1.png" alt="">
|
|
|
- <el-carousel
|
|
|
- :interval="4000"
|
|
|
- height="auto"
|
|
|
- arrow="always"
|
|
|
- autoplay>
|
|
|
- <el-carousel-item style="height: 80vh">
|
|
|
- <img style="height: 100%;width: 100%;" src="@/assets/上海水务首页图片包/上海城区洪涝仿真模型.png" alt="">
|
|
|
- </el-carousel-item>
|
|
|
- <el-carousel-item style="height: 80vh">
|
|
|
- <img style="height: 100%;width: 100%;" src="@/assets/上海水务首页图片包/风暴潮模型.png" alt="">
|
|
|
- </el-carousel-item>
|
|
|
- <el-carousel-item style="height: 80vh">
|
|
|
- <img style="height: 100%;width: 100%;" src="@/assets/上海水务首页图片包/黄浦江水系水文分析预报数值模拟模型.png"
|
|
|
- alt="">
|
|
|
- </el-carousel-item>
|
|
|
- <el-carousel-item style="height: 80vh">
|
|
|
- <img style="height: 100%;width: 100%;" src="@/assets/上海水务首页图片包/内涝.jpg" alt="">
|
|
|
- </el-carousel-item>
|
|
|
- <el-carousel-item style="height: 80vh">
|
|
|
- <img style="height: 100%;width: 100%;" src="@/assets/上海水务首页图片包/上海城区洪涝仿真模型.png" alt="">
|
|
|
- </el-carousel-item>
|
|
|
- <el-carousel-item style="height: 80vh">
|
|
|
- <img style="height: 100%;width: 100%;" src="@/assets/上海水务首页图片包/苏州河水系水情预报模型.png" alt="">
|
|
|
- </el-carousel-item>
|
|
|
- <el-carousel-item style="height: 80vh">
|
|
|
- <img style="height: 100%;width: 100%;" src="@/assets/上海水务首页图片包/上海市中心城区排水系统模型.png" alt="">
|
|
|
- </el-carousel-item>
|
|
|
- <el-carousel-item style="height: 80vh">
|
|
|
- <img style="height: 100%;width: 100%;" src="@/assets/上海水务首页图片包/温带风暴潮预报模型.png" alt="">
|
|
|
- </el-carousel-item>
|
|
|
- </el-carousel>
|
|
|
- </div>
|
|
|
- <div style="position: absolute;height: 30vh;z-index: 100;top: 70%;width: 100%;">
|
|
|
- <div style="display: flex;width: 98%;margin-left: 1%;">
|
|
|
- <div style="width: 25vw;height: 29vh;margin-left: 1%;cursor: pointer;" class="back1"
|
|
|
- @click="pushto('platform/componentReg')">
|
|
|
- <div style="width: 100%;color: #dcecef;text-align: center;font-size: 1.5rem;margin-top:5%;">模型注册管理</div>
|
|
|
- <img style="height: 80%;width: 80%;margin-left: 10%;margin-top: 2%;"
|
|
|
- src="@/assets/上海水务首页图片包/模型注册.png" alt="">
|
|
|
- </div>
|
|
|
- <div style="width: 25vw;height: 29vh;margin-left: 1%;cursor: pointer;" class="back2"
|
|
|
- @click="pushto('register/edtiModel')">
|
|
|
- <div style="width: 100%;color: #dcecef;text-align: center;font-size: 1.5rem;margin-top:5%;">模型服务管理</div>
|
|
|
- <img style="height: 80%;width: 80%;margin-left: 10%;margin-top: 2%;"
|
|
|
- src="@/assets/上海水务首页图片包/模型服务管理.png" alt="">
|
|
|
- </div>
|
|
|
- <div style="width: 25vw;height: 29vh;margin-left: 1%;cursor: pointer;" class="back1"
|
|
|
- @click="pushto('standardization/modelUsing')">
|
|
|
- <div style="width: 100%;color: #dcecef;text-align: center;font-size: 1.5rem;margin-top:5%;">模型标准化开发</div>
|
|
|
- <img style="height: 80%;width: 80%;margin-left: 10%;margin-top: 2%;"
|
|
|
- src="@/assets/上海水务首页图片包/模型标准化.png" alt="">
|
|
|
- </div>
|
|
|
- <div style="width: 25vw;height: 29vh;margin-left: 1%;cursor: pointer;" class="back2"
|
|
|
- @click="pushto('datamonitor/model_operation_monitoring')">
|
|
|
- <div style="width: 100%;color: #dcecef;text-align: center;font-size: 1.5rem;margin-top:5%;">模型监控管理</div>
|
|
|
- <img style="height: 80%;width: 80%;margin-left: 10%;margin-top: 2%;"
|
|
|
- src="@/assets/上海水务首页图片包/模型监控.png" alt="">
|
|
|
- </div>
|
|
|
- <div style="width: 25vw;height: 29vh;margin-left: 1%;cursor: pointer;" class="back1"
|
|
|
- @click="pushto('evaluate/score')">
|
|
|
- <div style="width: 100%;color: #dcecef;text-align: center;font-size: 1.5rem;margin-top:5%;">模型评价管理</div>
|
|
|
- <img style="height: 80%;width: 80%;margin-left: 10%;margin-top: 2%;"
|
|
|
- src="@/assets/上海水务首页图片包/模型评价.png" alt="">
|
|
|
- </div>
|
|
|
+ <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="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>
|
|
|
+ </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;"
|
|
|
+ arrow="always"
|
|
|
+ autoplay>
|
|
|
+ <el-carousel-item style="height: 50vh">
|
|
|
+ <img style="height: 100%;width: 100%;" src="@/assets/上海水务首页图片包/上海城区洪涝仿真模型.png" alt="">
|
|
|
+ </el-carousel-item>
|
|
|
+ <el-carousel-item style="height: 50vh">
|
|
|
+ <img style="height: 100%;width: 100%;" src="@/assets/上海水务首页图片包/风暴潮模型.png" alt="">
|
|
|
+ </el-carousel-item>
|
|
|
+ <el-carousel-item style="height: 50vh">
|
|
|
+ <img style="height: 100%;width: 100%;" src="@/assets/上海水务首页图片包/黄浦江水系水文分析预报数值模拟模型.png"
|
|
|
+ alt="">
|
|
|
+ </el-carousel-item>
|
|
|
+ <el-carousel-item style="height: 50vh">
|
|
|
+ <img style="height: 100%;width: 100%;" src="@/assets/上海水务首页图片包/内涝.jpg" alt="">
|
|
|
+ </el-carousel-item>
|
|
|
+ <el-carousel-item style="height: 50vh">
|
|
|
+ <img style="height: 100%;width: 100%;" src="@/assets/上海水务首页图片包/上海城区洪涝仿真模型.png" alt="">
|
|
|
+ </el-carousel-item>
|
|
|
+ <el-carousel-item style="height: 50vh">
|
|
|
+ <img style="height: 100%;width: 100%;" src="@/assets/上海水务首页图片包/苏州河水系水情预报模型.png" alt="">
|
|
|
+ </el-carousel-item>
|
|
|
+ <el-carousel-item style="height: 50vh">
|
|
|
+ <img style="height: 100%;width: 100%;" src="@/assets/上海水务首页图片包/上海市中心城区排水系统模型.png" alt="">
|
|
|
+ </el-carousel-item>
|
|
|
+ <el-carousel-item style="height: 50vh">
|
|
|
+ <img style="height: 100%;width: 100%;" src="@/assets/上海水务首页图片包/温带风暴潮预报模型.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>
|
|
|
+ <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>
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
<script setup>
|
|
|
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";
|
|
|
const router = useRouter()
|
|
|
-const carouseData = [
|
|
|
- {
|
|
|
- id: 1,
|
|
|
- url: new URL('@/assets/上海水务首页图片包/风暴潮.png', import.meta.url).href
|
|
|
- },
|
|
|
- {
|
|
|
- id: 2,
|
|
|
- url: new URL('@/assets/上海水务首页图片包/风暴潮.png', import.meta.url).href
|
|
|
- },
|
|
|
- {
|
|
|
- id: 3,
|
|
|
- url: new URL('@/assets/上海水务首页图片包/风暴潮.png', import.meta.url).href
|
|
|
- },
|
|
|
-]
|
|
|
|
|
|
function pushto(routers) {
|
|
|
router.push(routers);
|
|
|
}
|
|
|
+function getLast7DaysRange() {
|
|
|
+ const end = new Date();
|
|
|
+ const start = new Date();
|
|
|
+ end.setDate(start.getDate() - 1);
|
|
|
+ start.setDate(end.getDate() - 7);
|
|
|
+ function formatDate(date) {
|
|
|
+ const year = date.getFullYear();
|
|
|
+ const month = String(date.getMonth() + 1).padStart(2, '0');
|
|
|
+ const day = String(date.getDate()).padStart(2, '0');
|
|
|
+ return `${year}-${month}-${day}`;
|
|
|
+ }
|
|
|
+
|
|
|
+ return {
|
|
|
+ start: formatDate(start),
|
|
|
+ end: formatDate(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=>{
|
|
|
+ var par = {
|
|
|
+ name: item.mdName,
|
|
|
+ value: item.total,
|
|
|
+ }
|
|
|
+ y.push(par)
|
|
|
+ })
|
|
|
+ console.log(res.data)
|
|
|
+ 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)'
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ };
|
|
|
+ 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:'#67C23A',
|
|
|
+ stack: '任务总量',
|
|
|
+ data: []
|
|
|
+ }
|
|
|
+ let obj1 = {
|
|
|
+ name: '失败',
|
|
|
+ type: 'bar',
|
|
|
+ color:'#F56C6C',
|
|
|
+ stack: '任务总量',
|
|
|
+ data: []
|
|
|
+ }
|
|
|
+ let obj2 = {
|
|
|
+ name: '停止',
|
|
|
+ type: 'bar',
|
|
|
+ color:'#E6A23C',
|
|
|
+ stack: '任务总量',
|
|
|
+ data: []
|
|
|
+ }
|
|
|
+ let obj3 = {
|
|
|
+ name: '取消',
|
|
|
+ type: 'bar',
|
|
|
+ color:'#909399',
|
|
|
+ stack: '任务总量',
|
|
|
+ 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',
|
|
|
+ top: '2%',
|
|
|
+ },
|
|
|
+ // 提示框配置
|
|
|
+ tooltip: {
|
|
|
+ trigger: 'axis',
|
|
|
+ axisPointer: {
|
|
|
+ type: 'shadow'
|
|
|
+ },
|
|
|
+ },
|
|
|
+ // 图例配置
|
|
|
+ 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
|
|
|
+ }
|
|
|
|
|
|
+ // 设置配置项并渲染图表
|
|
|
+ myChart.setOption(option)
|
|
|
+ })
|
|
|
+}
|
|
|
+onMounted(() => {
|
|
|
+ getEchartData()
|
|
|
+ getchart2()
|
|
|
+});
|
|
|
</script>
|
|
|
<!--
|
|
|
//background-image:url('@/assets/上海水务首页图片包/浅蓝.png');
|
|
|
@@ -101,14 +260,7 @@ function pushto(routers) {
|
|
|
<style scoped>
|
|
|
|
|
|
.back1 {
|
|
|
- background: linear-gradient(45deg, rgba(142, 197, 252, 1.000) 0.000%, rgba(141, 211, 255, 1.000) 25.000%, rgba(161, 216, 255, 1.000) 50.000%, rgba(193, 210, 255, 1.000) 75.000%, rgba(224, 195, 255, 1.000) 100.000%);
|
|
|
- border-radius: 8px;
|
|
|
- box-shadow: 0 16px 48px 16px rgba(0, 0, 0, .08), 0 12px 32px rgba(0, 0, 0, .12), 0 8px 16px -8px rgba(0, 0, 0, .16);
|
|
|
- transition: transform .2s ease-in;
|
|
|
-}
|
|
|
-
|
|
|
-.back1:hover {
|
|
|
- transform: translateY(-20px);
|
|
|
+ background-image:url('@/assets/images/title-background.png');
|
|
|
}
|
|
|
|
|
|
.back2 {
|
|
|
@@ -122,4 +274,14 @@ function pushto(routers) {
|
|
|
transform: translateY(-20px);
|
|
|
box-shadow: 0 0 6px rgba(0, 0, 0, .12);
|
|
|
}
|
|
|
+.menu-item {
|
|
|
+ background-color: rgb(217, 236, 255);
|
|
|
+ border: 1px solid rgb(160, 207, 255);
|
|
|
+ border-radius: 10px;
|
|
|
+}
|
|
|
+
|
|
|
+.menu-item:hover {
|
|
|
+ background-color: rgb(160, 207, 255);
|
|
|
+ cursor: pointer;
|
|
|
+}
|
|
|
</style>
|
