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

<template>
  <div style="width: 100%;;display: flex;">
    <div style="width: 98%;margin-left: 1%;padding-top: 0.5%;" class="tab-container">
      <div>
        <div style="position: absolute;left: 80%;z-index: 1000;">
            <div>
                <el-date-picker
                v-model="timeYear"
                type="year"
                v-if="activeName=='third'"
                value-format="YYYY-MM-DD"
                @change="getQualityList"
                placeholder="请选择年份"
                />
                <el-date-picker
                v-model="timeMon"
                type="month"
                v-if="activeName=='second'"
                value-format="YYYY-MM-DD"
                @change="getQualityList"
                placeholder="请选择月份"
                />
            </div>
        </div>
        <el-tabs
        v-model="activeName"
        type="card"
        class="demo-tabs"
        @tab-change="getQualityList"
        >   
        <el-tab-pane label="年" name="third"></el-tab-pane>
        <el-tab-pane label="月" name="second"></el-tab-pane>
        <el-tab-pane label="周" name="first"></el-tab-pane>
        </el-tabs>
        <el-table 
          :data="tableData" 
          style="width: 100%;margin-left: 0%;margin-top: -0.8%;height: 80vh;"
          :cell-style="{ padding:'5px' }"
          :header-cell-style="{fontSize: '14px',height: heightAll*0.01+'px',}"
          :row-style="{ fontSize: '17px',textAlign:'center'}"
          border >
          <el-table-column type="index" label="序号" width="80">
            <template #default="{ $index }">
              <div style="text-align: center;">
                {{ $index + 1 }}
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="mdName" label="模型名称" show-overflow-tooltip  width="250">
          </el-table-column>
          <el-table-column prop="statisNum" label="调用次数"  show-overflow-tooltip/>
          <el-table-column prop="statisNumTrue" label="调用成功次数"/>
          <el-table-column prop="rate" label="成功率(%)">
            <template #default="scope">
              <div v-if="scope.row.rate!=null">
                {{ scope.row.rate }}
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="rateLv" label="质量">
            <template #default="scope">
              <div style="color:#67C23A" v-if="scope.row.rateLv==='优'">
                {{ scope.row.rateLv }}
              </div>
              <div style="color:#67C23A" v-if="scope.row.rateLv==='良'">
                {{ scope.row.E6A23C }}
              </div>
              <div style="color:#909399" v-if="scope.row.rateLv==='中'">
                {{ scope.row.rateLv }}
              </div>
              <div style="color:#F56C6C" v-if="scope.row.rateLv==='差'">
                {{ scope.row.rateLv }}
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
        <el-dialog @close="clearAdd" v-model="dialogVisible" title="" width="60%" destroy-on-close :key="tableKey">
          <div style="display: flex;align-items: center;">
            <div v-if="detailJson.rqtype==='GET'">
              <el-tag class="ml-2" type="warning">GET</el-tag>
            </div>
            <div v-if="detailJson.rqtype==='POST'">
              <el-tag class="ml-2" type="warning">POST</el-tag>
            </div>
            <div style="margin-left: 1%;">
              {{ detailJson.name }}:
            </div>
            <div style="margin-left: 1%;">
              {{ detailJson.url }}
            </div>
          </div>
          <el-descriptions style="margin-top: 1%;" :column="3" border>
            <el-descriptions-item label="接口类型">{{ detailJson.type }}</el-descriptions-item>
            <el-descriptions-item label="请求方式">{{ detailJson.rqtype }}</el-descriptions-item>
            <el-descriptions-item label="响应类型">{{ detailJson.rptype }}</el-descriptions-item>
            <el-descriptions-item label="服务分类">{{ detailJson.cateCode }}</el-descriptions-item>
          </el-descriptions>
          <div style="margin-top:4%;font-size: 18px;">
            请求参数
          </div>
           <el-table 
            style="margin-top: 1%;width: 98%;"
            :data="tableDataCan" 
            :cell-style="{ textAlign: 'center',padding:'2px 0' }"
            :header-cell-style="{fontSize: '14px', textAlign: 'center'}"
            :row-style="{ height: heightAll*0.01+'px',fontSize: '17px',textAlign:'center'  }"
            border >
                <el-table-column prop="paramCode" label="参数字段">
                </el-table-column>
                <el-table-column prop="paramName" label="参数名称">
                </el-table-column>
                <el-table-column prop="paramType" label="参数类型" width="200">
                </el-table-column>
                <el-table-column prop="paramValue" label="参数示例">
                  
                </el-table-column>
                <el-table-column prop="paramNote" label="参数说明" show-overflow-tooltip>
                </el-table-column>
            </el-table>
            <div style="margin-top:4%;font-size: 18px;">
              返回参数
            </div>
            <el-input readonly  placeholder="" :rows="8" type="textarea" v-model="dataJsonXiang" text style="margin-top: 1%;width: 98%;" ></el-input>
          <template #footer>
            <span class="dialog-footer">
              <el-button type="primary" @click="dialogVisible = false">
                确定
              </el-button>
            </span>
          </template>
        </el-dialog>
        <el-dialog @close="clearFromLev" :title="titleTest" draggable v-model="dialogVisibleLevel" width="50%" destroy-on-close :key="tableKey">
          <el-table 
            style="margin-top: 1%;width: 98%;min-height: 500px;"
            :data="tableDataLog" 
            :cell-style="{ textAlign: 'center',padding:'2px 0' }"
            :header-cell-style="{fontSize: '14px', textAlign: 'center'}"
            :row-style="{ height: heightAll*0.01+'px',fontSize: '17px',textAlign:'center'  }"
            border >
                <el-table-column prop="createBy" label="名称">
                </el-table-column>
                <el-table-column prop="runTm" label="评价结果">
                </el-table-column>
                <el-table-column prop="execTm" label="评价状态" show-overflow-tooltip>
                </el-table-column>
                <el-table-column prop="returnData" label="评价日期" show-overflow-tooltip>
                </el-table-column>
            </el-table>
          <template #footer>
              <span class="dialog-footer">
                <el-button type="primary" @click="dialogVisibleLevel = false">
                  确定
                </el-button>
            </span>
          </template>
        </el-dialog>
        <el-dialog  v-model="dialogVisibleDe" title="风暴潮" width="50%" @close="" destroy-on-close class="custom-dialog-bg">
          <el-form :key="tableKey" style="margin-top:1%;width: 100%;" :model="formJi" label-position="right"
                 ref="formRefJi" label-width="120px" :rules="rulesJi">
            <el-form-item label="名称:" prop="name" style="">
              <el-input v-model="formAdd.intro" style="width: 40%;"  resize="none" />
            </el-form-item>
            <el-row :gutter="48">
              <el-col :span="10">
                <el-form-item label="评价日期:" prop="url" style="">
                    <el-date-picker
                      v-model="value1"
                      type="date"
                      style="width: 100%"
                      placeholder="选择日期"
                    />
                </el-form-item>
              </el-col>
              <el-col :span="10">
                <el-form-item label="评价生效日期:" prop="url" style="">
                  <div style="width: 100%">
                    <el-date-picker
                    v-model="value1"
                    type="daterange"
                    style="width: 100%"
                    range-separator="-"
                    start-placeholder="开始时间"
                    end-placeholder="结束时间"
                  />
                  </div>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="48">
              <el-col :span="10">
                <el-form-item label="质量:" prop="name" style="">
                  <el-input v-model="formAdd.intro" style="width: 100%;"  resize="none" />
                </el-form-item>
              </el-col>
              <el-col :span="10">
                <el-form-item label="评分:" prop="name" style="">
                  <el-input v-model="formAdd.intro" style="width: 100%;"  resize="none" />
                </el-form-item>
              </el-col>
            </el-row>
            <el-form-item label="说明:" prop="name" style="">
              <el-input v-model="formAdd.intro" style="width: 40%;"  resize="none" type="textarea"/>
            </el-form-item>
          </el-form>
        </el-dialog>
    </div>
  </div>
</template>
<script   setup>
import { getQuality } from "@/api/service/info";

const timeMon = ref('')
const timeYear = ref('')
const activeName = ref('first')
const tableData = ref ([])

function getWeekRange(date = new Date()) {
  // 获取传入日期是本周的第几天（0是周日，1是周一，...，6是周六）
  const dayOfWeek = date.getDay();
  // 计算与本周第一天的天数差。如果今天是周日(0)，则上周一需要减6天；否则减（当前星期数-1）天。
  const diffToMonday = dayOfWeek === 0 ? -6 : 1 - dayOfWeek;
  
  // 计算本周一的日期
  const monday = new Date(date);
  monday.setDate(date.getDate() + diffToMonday);
  
  // 计算本周日的日期（周一加6天）
  const sunday = new Date(monday);
  sunday.setDate(monday.getDate() + 6);

  // 格式化日期为 "YYYY-MM-DD"
  function formatDate(dateObj) {
    const year = dateObj.getFullYear();
    const month = String(dateObj.getMonth() + 1).padStart(2, '0'); // 月份从0开始，需+1
    const day = String(dateObj.getDate()).padStart(2, '0');
    return `${year}-${month}-${day}`;
  }

  return {
    startOfWeek: formatDate(monday), // 本周开始日期 (周一)
    endOfWeek: formatDate(sunday)    // 本周结束日期 (周日)
  };
}
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 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}`;
}
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 setDate(){
  timeMon.value = getFirstDayOfMonthShort()
  timeYear.value = getFirstDayOfYear()
}
function getQualityList(val){
  console.log('val',val)
  var par = {
    devkind:'APP',
    params:{
      beginTime:'',
      endTime:''
    }
  }
  if(activeName.value=='first'){
    const weekRange = getWeekRange()
    par.params.beginTime=weekRange.startOfWeek
    par.params.endTime=weekRange.endOfWeek
    getQuality(par).then((res)=>{
      tableData.value=res.data
    })
  }else if(activeName.value=='second'){
    par.params.beginTime=timeMon.value
    par.params.endTime=getLastDayOfMonth(timeMon.value)
    getQuality(par).then((res)=>{
      tableData.value=res.data
    })
  }else if(activeName.value=='third'){
    par.params.beginTime=timeYear.value
    par.params.endTime=getLastDayOfYear(timeYear.value)
    getQuality(par).then((res)=>{
      tableData.value=res.data
    })
  }
  
}

onMounted(() => {
  setDate()
  getQualityList();
});

</script>
<style scoped>

</style>