152 lines
5.9 KiB
Vue
152 lines
5.9 KiB
Vue
<template>
|
||
<el-dialog title="报告生成" :model-value='visible' @close="handleCancel" width="832px" draggable>
|
||
<div class="report-dialog">
|
||
<div class="report-title form-two">
|
||
|
||
<el-form-item label="检测脚本" label-width="100px">
|
||
<el-input v-model='testScriptName' :disabled="true"/>
|
||
</el-form-item>
|
||
|
||
<el-form-item label="误差体系" label-width="100px">
|
||
<el-input v-model='errorSysName' :disabled="true"/>
|
||
</el-form-item>
|
||
|
||
<el-form-item label="数据原则" label-width="100px">
|
||
<el-input v-model='dataRule' :disabled="true"/>
|
||
</el-form-item>
|
||
|
||
<el-form-item label="报告模板" label-width="100px">
|
||
<el-input v-model='reportTemplate' :disabled="true"/>
|
||
</el-form-item>
|
||
</div>
|
||
<div class="report-content">
|
||
<div>
|
||
<el-tabs type="border-card">
|
||
<el-tab-pane label="报告生成进度">
|
||
<div class="form-grid">
|
||
<div class="tabs-title ">
|
||
<span style=" font-size: 18px;font-weight: 600;">
|
||
已生成 <span style="color: #67C23A">2</span> 台/共 <span style="color: green">3</span> 台
|
||
</span>
|
||
<!-- <el-button type="primary" loading >已生成2台/共3台</el-button> -->
|
||
</div>
|
||
<div class="table-main">
|
||
<el-table :data="reportData" :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>
|
||
|
||
</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: '240001', processValue: '100' , action:'查看' },
|
||
{ id: '2', deviceName: '240002', processValue: '100' , action:'查看' },
|
||
{ id: '3', deviceName: '240003', 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> |