TBA_GXPT/ruoyi-ui/src/views/shouye.vue

<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>
    <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: 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-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>
  </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()

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=>{
                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','#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)
    })
}
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: []
        }
        let obj2 = {
            name: '停止',
            type: 'bar',
            color:'rgba(25,227,227,1)',
            data: []
        }
        let obj3 = {
            name: '取消',
            type: 'bar',
            color:'rgba(2255,204,28,1)',
            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)'
                    },
                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),
                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)
    })
}
onMounted(() => {
  getEchartData()
  getchart2()
});
</script>
<!--
  //background-image:url('@/assets/上海水务首页图片包/浅蓝.png');
  //background-repeat: no-repeat;
  //background-position: center center;
 -->
<style scoped>

.back1 {
  background-image:url('@/assets/images/title-background.png');
}

.back2 {
  background-image: url('@/assets/上海水务首页图片包/深蓝.png');
  background-repeat: no-repeat;
  background-position: center center;
  transition: transform .2s ease-in;
}
.backPage{
    background-image: url('@/assets/上海水务首页图片包1/背景图.png');
}
.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;
}
.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: #3F9FFC;
    cursor: pointer;
    transform: translateX(-20px);
}
</style>