|
|
@@ -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>
|
