pqs-9100_client/frontend/src/views/home/components/reportPopup.vue

<template>
    <el-dialog  title="报告生成" :model-value='visible' @close="handleCancel" width="832px">
        <div class="report-dialog">
            <div class="report-title">
                <div>
                    <el-row  :gutter="24" >
                    <el-col :span="12">
                        <el-form-item label="检测脚本:"  >
                            <el-input v-model='testScriptName' :disabled="true"/>
                        </el-form-item>              
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="误差体系"  >
                            <el-input v-model='errorSysName' :disabled="true"/>
                        </el-form-item>              
                    </el-col>
                </el-row> 
                </div>
                <div>
                    <el-row  :gutter="24" >
                                    <el-col :span="12">
                                        <el-form-item label="数据处理原则"  >
                                    <el-input v-model='dataRule' :disabled="true"/>
                                </el-form-item>              
                                    </el-col>
                                    <el-col :span="12">
                                        <el-form-item label="报告模板"  >
                                    <el-input v-model='reportTemplate' :disabled="true"/>
                                </el-form-item>           
                                    </el-col>
                                </el-row> 
                </div>
            </div>
            <div class="report-content">
                <div>
                    <el-tabs type="border-card">
                        <el-tab-pane label="报告生成状态表：">
                            <div class="form-grid">
                                <div class="tabs-title"><el-button type="primary" loading >已生成2台/共4台</el-button> </div>
                                <el-table :data="reportData" stripe="" :header-cell-style="{ textAlign: 'center' } " :cell-style="{ textAlign: 'center' }" style="width: 100%" border class="custom-table">
                                    <el-table-column prop="id" width="70" label="序号" />
                                    <el-table-column prop="deviceName" width="150" label="设备名称" />
                                    <el-table-column label="生成进度" width="450">
                                        <template #default="scope">
                                            <el-progress :color="customColors" :percentage="scope.row.processValue" />
                                         </template>
                                    </el-table-column>
                                    <el-table-column prop="action" label="操作" width="100">
                                        <template #default="scope">
                                            <el-button type='primary' link :icon='Download' :disabled="scope.row.processValue < 100">下载</el-button>
                                         </template>
                                    </el-table-column>
                                </el-table>
                            </div>
                        </el-tab-pane>
                    </el-tabs>
                </div>
            </div>
        </div>
    </el-dialog>

</template>
<script setup lang='ts'>

import IPAddress from '@/components/IpAddress/index.vue'
import { dialogBig } from '@/utils/elementBind'
import { type Device } from '@/api/device/interface/device'
import { ElMessage, type FormItemRule } from 'element-plus'
import { addPqDev, updatePqDev } from '@/api/device/device'
import { computed, reactive, type Ref, ref } from 'vue'
import { useDictStore } from '@/stores/modules/dict'
import { CirclePlus, Delete, Download,View } from '@element-plus/icons-vue'



  const reportTemplate = ref('国网检测模板V1.0');
  const testScriptName = ref('Q/GDW 10650.4-2021 模拟式');
  const errorSysName = ref('Q/GDW 10650.2-2021');
  const dataRule = ref('所有值');
  const scriptSwitch = ref(true);
  const currentScriptDsc = ref('电压准确度检测：频率：42.5Hz Ua=46.192V 0° Ub=46.192V -120° Uc=46.192V 120° Ia=1A 0° Ib=1A -120° Ic=1A 120°');

const reportData = ref([
  { id: '1', deviceName: '被检设备1', processValue: '100' , action:'查看' },
  { id: '2', deviceName: '被检设备2', processValue: '100' , action:'查看' },
  { id: '3', deviceName: '被检设备3', processValue: '10', action:'查看' },
])
const customColors = [
  { color: "red", percentage: 0 },
  { color: "red", percentage: 10 },
  { color: "red", percentage: 20 },
  { color: "red", percentage: 30 }, //红
  { color: "red", percentage: 40 },
  { color: "#e6a23c", percentage: 50 },
  { color: "#e6a23c", percentage: 60 },
  { color: "#e6a23c", percentage: 70 }, //黄
  { color: "#e6a23c", percentage: 80 }, //1989fa
  { color: "#e6a23c", percentage: 90 }, //1989fa
  { color: "#5cb87a", percentage: 100 }, //绿
];
const handleNodeClick = (data) => {
  console.log(data);
};
const MonIsShow = ref(false)
const DevIsShow = ref(false)
const IsPasswordShow = ref(false)
const dictStore = useDictStore()
// 定义弹出组件元信息
const dialogFormRef = ref()
const disabledDate = (time: Date) => {
  return time.getTime() > Date.now()
}

const props = defineProps<{
    visible: boolean;
  }>();

  const emit = defineEmits<{
    (e: 'update:visible', value: boolean): void;
    (e: 'submit', data: any): void;
  }>();

  const handleCancel = () => {
    emit('update:visible', false); // 关闭对话框
  };
</script>
<style scoped>

.report-dialog{
    display: flex;
    flex-direction: column;
}

.report-title{
    margin-left: 15px;

    /* display: flex; */
    /* flex-direction: row;

    margin-top: 10px; */
}

.report-content{
    display: flex;
    flex-direction: column;
}
.tabs-title{
    display: flex;
    justify-content: flex-end;
    margin-bottom: 10px;
}

.el-tabs__content{
    padding-top: 5px !important;
}
</style>