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

<template>
   <div style="overflow-y: auto;background-color:  #F7F7F7;height: 100%;">
     <div style="margin-left: 1%;width: 98%;display: flex;margin-top: 1%;height: 15vh;">
      <div shadow="always" style="width: 33%;height: 100%;;border-radius: 10px;background-color: white;margin-left: 0%;" class="boxShadow">
          <div style="width: 100%;display: flex;align-items: center;justify-content: center;font-size: 35px;font-weight: bold;color: #2DBEA2;;height: 70%">
            {{yearAll}}
          </div>
          <div style="display: flex;align-items: center;justify-content: center;background-color: #2DBEA2;font-size: 20px;width: 100%;color: white;text-align: center;border-radius: 0 0 10px 10px;height: 30%;">
            年调用次数
          </div>
        </div>
        <div shadow="always" style="width: 33%;height: 100%;;border-radius: 10px;background-color: white;margin-left: 1%;" class="boxShadow">
          <div style="width: 100%;display: flex;align-items: center;justify-content: center;font-size: 35px;font-weight: bold;color: #40B0D7;;height: 70%">
            {{monAll}}
          </div>
          <div style="display: flex;align-items: center;justify-content: center;background-color: #40B0D7;font-size: 20px;width: 100%;color: white;text-align: center;border-radius: 0 0 10px 10px;height: 30%;">
            月调用次数
          </div>
        </div>
        <div shadow="always" style="width: 33%;margin-left: 1%;height: 100%;;border-radius: 10px;background-color: white;" class="boxShadow">
          <div style="width: 100%;display: flex;align-items: center;justify-content: center;font-size: 35px;font-weight: bold;color: #477ACF;;height: 70%">
            {{dayAll}}
          </div>
          <div style="display: flex;align-items: center;justify-content: center;background-color: #477ACF;font-size: 20px;width: 100%;color: white;text-align: center;border-radius: 0 0 10px 10px;height: 30%;">
            日调用次数
          </div>
        </div>
      </div>
      <div style="background-color:  #F7F7F7;padding-top:1%;">
        <div style="margin-left: 1%;width: 98%;display: flex;height: 32vh;">
          <div style="width: 100%;height: 100%;">
            <el-card shadow="always" class="box-card" style="width:100%;height: 100%;">
              <div style="font-weight: bold;font-size: 18px;">
                模型每日服务调度次数统计
              </div>
              <div style="display: flex;align-items: center;line-height: 1;margin-top: 1%;">
                <div style="font-size: 17px;">今日模型服务调度次数</div>
                <div style="color: #79bbff;margin-left: 1%;"> {{daySum}} </div>
                <div style="margin-left: 1%;"> 次 </div>
                <el-date-picker
                  v-model="valueYue"
                  type="month"
                  style="margin-left: 1%;"
                  @change="getDay"
                  placeholder="本月"
                  value-format="YYYY-MM-DD"
                />
                <el-select
                v-model="valueMod"
                @change="getDay"
                class="m-2"
                placeholder="上海市城区洪涝仿真模型"
                style="width: 15%;margin-left: 1%;"
                >
                    <el-option
                    v-for="item in optionsModel"
                    :key="item.value"
                    :label="item.label"
                    :value="item.id"
                    />
                </el-select>
              </div>
              <div id="top1" style="width: 98%;margin-left: 1%;margin-top: -1%;height:23vh">

              </div>
            </el-card>
          </div>
        </div>
        <div style="margin-left: 1%;width: 98%;display: flex;margin-top: 1%;height: 45vh;">
          <el-card shadow="always" class="box-card" style="width:50%;height: 100%;">
            <div style="margin-left: 1%;font-weight: bold;">
              模型每月服务调度次数统计
            </div>
            <div style="width: 100%;display: flex;margin-top: 2%;">
              <el-date-picker
                  v-model="valueMon"
                  type="year"
                  style="margin-left: 1%;"
                  @change="getMon"
                  placeholder="本年"
                  value-format="YYYY-MM-DD"
                />
                <el-select
                v-model="valueModMon"
                @change="getMon"
                class="m-2"
                placeholder=""
                style="width: 25%;margin-left: 1%;"
                >
                    <el-option
                    v-for="item in optionsModel"
                    :key="item.value"
                    :label="item.label"
                    :value="item.id"
                    />
                </el-select>
            </div>
            <div id="bt1"  style="width: 100%;margin-left: 0%;margin-top: -1%;height: 30vh;">

            </div>
          </el-card>
          <el-card shadow="always" class="box-card" style="width:50%;height: 100%;margin-left: 1%;">
            <div style="margin-left: 1%;font-weight: bold;">
              模型调用次数年度排名
            </div>
            <div style="width: 100%;display: flex;margin-top: 2%;">
              <el-date-picker
                  v-model="valuePai"
                  type="year"
                  style="margin-left: 1%;"
                  @change="getPai"
                  placeholder="本年"
                  value-format="YYYY-MM-DD"
                />
                <!-- <el-select
                v-model="value"
                class="m-2"
                placeholder="上海市城区洪涝仿真模型"
                style="width:20%;margin-left: 1%;"
                >
                    <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                    />
                </el-select> -->
            </div>
            <div id="bt2"  style="width: 100%;margin-left: 1%;margin-top: -1%;height: 35vh;">

            </div>
          </el-card>
        </div>
      </div>
   </div>
</template>
<script setup>
import { ref, onMounted } from 'vue';
import * as echarts from 'echarts';
import { modelTreeSelect,getDayChart,getDaySum,getYueChart,getSumAll,getPaihang } from "@/api/service/info";
const listHelp = [
]
const valuePai = ref()
const modelList = ref([])
const daySum = ref('')
const valueYue = ref('')
const dayAll = ref()
const monAll = ref()
const yearAll = ref()
const valueModMon = ref('')
const valueMon = ref('')
const valueMod = ref('')
const heightAll = window.innerHeight
const seledMo = ['primary','plain','plain','plain','plain','plain','plain']
const optionsModel = ref({})
function getLastDayOfMonth(firstDay) {
    // 从第一天字符串解析年月
    const [year, month] = firstDay.split('-').map(Number);
    
    // 创建下个月第一天的日期对象
    const nextMonthFirstDay = new Date(year, month, 1); // month是1-12，JS会自动处理跨年
    
    // 获取当月最后一天（下个月第一天减1毫秒）
    const lastDay = new Date(nextMonthFirstDay - 1);
    
    // 格式化输出
    const lastDayYear = lastDay.getFullYear();
    const lastDayMonth = (lastDay.getMonth() + 1).toString().padStart(2, '0');
    const lastDayDate = lastDay.getDate().toString().padStart(2, '0');
    
    return `${lastDayYear}-${lastDayMonth}-${lastDayDate}`;
}
function getAllDaysInMonth(firstDayOfMonth) {
    // 解析输入字符串获取年月
    const [year, month] = firstDayOfMonth.split('-').map(Number);
    
    // 创建当月最后一天的日期对象
    const lastDay = new Date(year, month, 0); // 月份从0开始，所以month即下个月
    
    // 获取当月天数
    const daysCount = lastDay.getDate();
    
    // 生成所有天数的数组
    return Array.from({length: daysCount}, (_, i) => 
        (i + 1).toString().padStart(2, '0')
    );
}
function getLastDayOfYear(firstDay) {
    // 从输入字符串中提取年份
    const year = parseInt(firstDay.split('-')[0]);
    
    // 计算下一年度的第一天
    const nextYearFirstDay = new Date(year + 1, 0, 1); // 月份0代表1月
    
    // 计算本年度的最后一天（下一年第一天减去1毫秒）
    const lastDay = new Date(nextYearFirstDay.getTime() - 1);
    
    // 格式化为 YYYY-MM-DD
    const lastDayYear = lastDay.getFullYear();
    const lastDayMonth = String(lastDay.getMonth() + 1).padStart(2, '0'); // 月份从0开始，需+1
    const lastDayDate = String(lastDay.getDate()).padStart(2, '0');
    
    return `${lastDayYear}-${lastDayMonth}-${lastDayDate}`;
}
function getMon(){
  var mdName
  for(var i = 0;i<optionsModel.value.length;i++){
    if(valueModMon.value===optionsModel.value[i].id){
      mdName = optionsModel.value[i].label
    }
  }
  console.log(mdName.value)
  var par = {
    params:{
      beginTime:valueMon.value,
      endTime:getLastDayOfYear(valueMon.value)
    },
    mdId:valueModMon.value
  }
  var x = getMonthsFromJanuaryToCurrent()
  var y = []
  x.forEach(item=>{
    y.push(0)
  })
  getYueChart(par).then(res=>{
    for(var i = 0;i<res.data.length;i++){
      for(var i1 = 0;i1<y.length;i1++){
        if(Number(res.data[i].statisTm.slice(-5,-3))===i1+1){
          y[i1] = res.data[i].statisNum
        }
      }
    }
    initChartbt1(y,mdName)
  })
}
function getMonthsFromJanuaryToCurrent() {
    const today = new Date();
    const currentYear = today.getFullYear();
    const currentMonth = today.getMonth() + 1; // 获取当前月份 (1-12)
    
    const monthsArray = [];
    
    // 从1月循环到当前月份
    for (let month = 1; month <= currentMonth; month++) {
        monthsArray.push(month);
    }
    
    return monthsArray;
}
function getDaysFromFirstToToday() {
    const today = new Date();
    const currentYear = today.getFullYear();
    const currentMonth = today.getMonth();
    const currentDay = today.getDate(); // 获取今天是几号
    
    const daysArray = [];
    
    // 从1号循环到今天
    for (let day = 1; day <= currentDay; day++) {
        daysArray.push(day);
    }
    
    return daysArray;
}
function getDateRangeArray(dateStr) {
  const inputDate = new Date(dateStr);
  const inputYear = inputDate.getFullYear();
  const inputMonth = inputDate.getMonth(); // 0-based
  const inputDay = inputDate.getDate();

  const currentDate = new Date();
  const currentYear = currentDate.getFullYear();
  const currentMonth = currentDate.getMonth();
  const currentDay = currentDate.getDate();

  const daysArray = [];

  // 判断是否属于当前月
  if (inputYear === currentYear && inputMonth === currentMonth) {
    // 若输入日期晚于当前日期，返回空数组
    if (inputDay > currentDay) return daysArray;
    
    for (let day = inputDay; day <= currentDay; day++) {
      daysArray.push(day);
    }
  } else {
    // 生成传入月份的全部天数
    const daysInMonth = new Date(inputYear, inputMonth + 1, 0).getDate();
    for (let day = 1; day <= daysInMonth; day++) {
      daysArray.push(day);
    }
  }

  return daysArray;
}
function getDay(){
  var mdName
  for(var i = 0;i<optionsModel.value.length;i++){
    if(valueMod.value===optionsModel.value[i].id){
      mdName = optionsModel.value[i].label
    }
  }
  var par = {
    params:{
      beginTime:valueYue.value,
      endTime:getLastDayOfMonth(valueYue.value)
    },
    mdId:valueMod.value
  }

  var x = getDateRangeArray(valueYue.value)
  console.log(x)
  var y = []
  x.forEach(item=>{
    y.push(0)
  })
  var par1 = {
    mdId:valueMod.value
  }
  getDaySum(par1).then(res=>{
    daySum.value = res.data
  })
  getDayChart(par).then(res=>{
    for(var i = 0;i<res.data.length;i++){
      for(var i1 = 0;i1<y.length;i1++){
        if(Number(res.data[i].statisTm.slice(-2))===i1+1){
          y[i1] = res.data[i].statisNum
        }
      }
    }
    inintChartTop1(x,y,mdName)
  })
}
function inintChartTop1(x,y,mdName){
  var chartDom = document.getElementById('top1');
  var myChart = echarts.init(chartDom);
  var option;

  option = {
    tooltip: {
        trigger: 'axis'
    },
    legend: {
      top:'90%'
    },
    xAxis: {
      splitLine: { show: false },
      // type: 'category',
      data: x,
      axisLabel: {
      fontSize: 14, // y轴标签字体大小
        color: '#666'
      },
    },
    yAxis: {
      type: 'value',
      show: true,
      axisLabel: {
      fontSize: 14, // y轴标签字体大小
        color: '#666'
      },
      splitLine: { show: false },
      name: '单位：次', 
      minInterval: 1, 
      axisTick: {
        show: true // 确保显示刻度线
      },
       axisLine: {
        show: true, // 确保显示轴线
        lineStyle: {
          color: '#333', // 可以设置轴线的颜色，例如与文字颜色一致
          // width: 1 // 可以设置轴线宽度，可选
        }
      },
    },
    series: [
      {
      name: mdName,
      type: 'line',
      color:'#409EFF',
      data: y,
      smooth: true
    },
    ]
  };
  
  option && myChart.setOption(option);

}
function initChartbt1(y,mdName){
  var chartDom = document.getElementById('bt1');
  var myChart = echarts.init(chartDom);
  var option;
  option = {
    tooltip: {
        trigger: 'axis'
    },
    legend: {
      data: ['上海市城区洪涝仿真模型', '上海沿海风暴潮预报模型', '黄浦江水系水文分析预报数值模拟模型', '苏州河水系水情预报模型', 
      '内涝风险实时预警与预报模型','上海市中心城区排水系统模型', '温带风暴潮预报模型',],
      top:'90%'
    },
    xAxis: {
      splitLine: { show: false },
      // type: 'category',
      data: [1,2,3,4,5,6,7,8,9,10,11,12],
      axisLabel: {
      fontSize: 14, // y轴标签字体大小
        color: '#666'
      },
    },
    yAxis: {
      type: 'value',
      show: true,
      name: '单位：次', 
      axisLabel: {
      fontSize: 14, // y轴标签字体大小
        color: '#666'
      },
      minInterval: 1, 
      splitLine: { show: false },
      axisTick: {
        show: true // 确保显示刻度线
      },
       axisLine: {
        show: true, // 确保显示轴线
        lineStyle: {
          color: '#333', // 可以设置轴线的颜色，例如与文字颜色一致
          // width: 1 // 可以设置轴线宽度，可选
        }
      },
    },
    series: [
      {
      name: mdName,
      type: 'line',
      color:'#409EFF',
      data: y,
      smooth: true
    },
    ]
  };
  
  option && myChart.setOption(option);

}
function initChartbt2(y){
  var chartDom = document.getElementById('bt2');
  var myChart = echarts.init(chartDom);
  var option;
  option = {
    tooltip: {
        trigger: 'axis'
    },
    xAxis: {
      axisLabel: {
      fontSize: 14, // y轴标签字体大小
        color: '#666'
      },
      splitLine: { show: false },
      type: 'category',
      data: modelList.value,
      axisLabel: {
      interval: 0,  // 强制显示所有标签
      rotate: -25,   // 旋转角度，正值表示顺时针旋转，负值表示逆时针旋转
      // 可以设置文字样式，如字体大小、颜色等
      textStyle: {
        fontSize: 10,
        color: '#333'
      }
    }
    },
    yAxis: {
      type: 'value',
      name: '单位：次', 
      minInterval: 1, 
      show: true,
      nameLocation: 'end', 
      axisLabel: {
      fontSize: 14, // y轴标签字体大小
        color: '#666'
      },
      splitLine: { show: false },
      axisTick: {
        show: true // 确保显示刻度线
      },
       axisLine: {
        show: true, // 确保显示轴线
        lineStyle: {
          color: '#333', // 可以设置轴线的颜色，例如与文字颜色一致
          // width: 1 // 可以设置轴线宽度，可选
        }
      },
    },
    series: [
      {
      type: 'bar',
      color:'#409EFF',
      data: y,
      smooth: true
    },
    ]
  };
  
  option && myChart.setOption(option);

}
const getFirstDayOfMonthShort = () => {
    const now = new Date();
    return `${now.getFullYear()}-${(now.getMonth() + 1).toString().padStart(2, '0')}-01`;
};
function getFirstDayOfYear() {
    const currentYear = new Date().getFullYear();
    const firstDay = new Date(currentYear, 0, 1);
    
    // 格式化为 YYYY-MM-DD
    const year = firstDay.getFullYear();
    const month = String(firstDay.getMonth() + 1).padStart(2, '0');
    const day = String(firstDay.getDate()).padStart(2, '0');
    
    return `${year}-${month}-${day}`;
}
function getPai(){
  var par = {
    params:{
      beginTime:valuePai.value,
      endTime:getLastDayOfYear(valueMon.value)
    },
  }
  modelList.value = []
  var y = []
  getPaihang(par).then(res=>{
    res.data.forEach(item=>{
      modelList.value.push(item.mdName)
      y.push(item.statisNum)
    })
    initChartbt2(y)
  })
}
async function getTreeLeft(){
  var par = {
    params:{
      level:'2',
      devkind:'APP'
    }
  }
  await modelTreeSelect(par).then(res=>{
    optionsModel.value = res.data[0].children
    valueMod.value = optionsModel.value[0].id
    valueModMon.value = optionsModel.value[0].id
    valueMon.value = getFirstDayOfYear()
    valueYue.value = getFirstDayOfMonthShort()
    valuePai.value = getFirstDayOfYear()
    getDay()
    getMon()
    // getPai()
  })
  var par1 = {
    params:{
      beginTime:valuePai.value,
      endTime:getLastDayOfYear(valueMon.value)
    },
  }
  modelList.value = []
  var y = []
  await getPaihang(par1).then(res=>{
    res.data.forEach(item=>{
      modelList.value.push(item.mdName)
      y.push(item.statisNum)
    })
    initChartbt2(y)
  })
  var parDay = {
    params:{
      beginTime:`${new Date().getFullYear()}-${String(new Date().getMonth() + 1).padStart(2, '0')}-${String(new Date().getDate()).padStart(2, '0')}`,
      endTime:`${new Date().getFullYear()}-${String(new Date().getMonth() + 1).padStart(2, '0')}-${String(new Date().getDate()).padStart(2, '0')}`
    },
  }
  var parMon = {
    params:{
      beginTime:getFirstDayOfMonthShort(),
      endTime:getLastDayOfMonth(valueYue.value)
    },
  }
  var parYear = {
    params:{
      beginTime:getFirstDayOfYear(),
      endTime:getLastDayOfYear(valueMon.value)
    },
  }
  getSumAll(parDay).then(res=>{
    dayAll.value = res.data
  })
  getSumAll(parMon).then(res=>{
    monAll.value = res.data
  })
  getSumAll(parYear).then(res=>{
    yearAll.value = res.data
  })
}
onMounted(() => {
  getTreeLeft()
  
  // inintChartTop1()
  // initChartbt1()
  
});
</script>
<style scoped lang="scss">
.boxShadow{
  box-shadow: 
    -8px 0 15px -10px rgba(0, 0, 0, 0.1), /* 左侧阴影 */
    8px 0 15px -10px rgba(0, 0, 0, 0.1);  /* 右侧阴影 */
  transition: box-shadow 0.3s ease;

}
</style>