<script setup name="StandardParams">
|
import {ref, onMounted, computed} from "vue";
|
import ycCard from "@/components/ycCard/index.vue";
|
import TabButton from "@/components/TabButton/index.vue";
|
import HdwButton from "@/components/HdwButton/index.vue";
|
import NoData from "@/components/noData.vue";
|
import {getPwrStandParamApi, getStandFileApi, uploadStandFileApi} from "@/api/standardParams.js";
|
import addEdit from "./dialog/addEdit.vue";
|
import useElement from "@/hooks/useElement.js";
|
import downloadFile from "@/utils/downloadFile.js";
|
import {ExportFile} from "@/utils/exportFile.js";
|
|
const {$loading, $message} = useElement();
|
const headers = [
|
{
|
prop: "standName",
|
label: "标准编号",
|
width: "160",
|
},
|
{
|
prop: "paramType",
|
label: "参数类型",
|
width: "160",
|
},
|
{
|
prop: "basisVal",
|
label: "基准值",
|
width: "80",
|
},
|
{
|
prop: "alarmLimith",
|
label: "上限",
|
width: "80",
|
},
|
{
|
prop: "alarmLimithUpper",
|
label: "上上限",
|
width: "80",
|
},
|
{
|
prop: "alarmLimitl",
|
label: "下限",
|
width: "80",
|
},
|
{
|
prop: "alarmLimitlLower",
|
label: "下下限",
|
width: "80",
|
},
|
{
|
prop: "fileName",
|
label: "规范文件名称",
|
width: "160",
|
},
|
];
|
const listRef = ref([]);
|
const acButton = ref(1);
|
function changeAcButton(num) {
|
acButton.value = num;
|
searchData();
|
}
|
|
async function searchData() {
|
const loading = $loading({
|
text: "数据加载中..."
|
});
|
|
try {
|
const rs = await getPwrStandParamApi(acButton.value);
|
loading.close();
|
if(rs.code === 1 && rs.data) {
|
listRef.value = rs.data2;
|
}else {
|
listRef.value = [];
|
}
|
}catch (e) {
|
console.log(e);
|
loading.close();
|
}
|
}
|
|
const addEditVisible = ref(false);
|
const dialogTitle = computed(()=>{
|
return "参数设定";
|
});
|
const selectInfo = ref();
|
function setParams(info) {
|
selectInfo.value = info;
|
addEditVisible.value = true;
|
}
|
|
const searchText = ref("");
|
const downloadText =ref("");
|
const fileList = ref([]);
|
const selectFile = ref({
|
fileName: "",
|
standFilePath: "",
|
});
|
|
async function searchFileList() {
|
if(!searchText.value) {
|
$message.warning("请输入文件名称");
|
return;
|
}
|
|
const loading = $loading({
|
text: "数据加载中..."
|
});
|
try {
|
const rs = await getStandFileApi(searchText.value, acButton.value);
|
loading.close();
|
if(rs.code === 1 && rs.data) {
|
fileList.value = rs.data2;
|
}else {
|
fileList.value = [];
|
}
|
}catch (e) {
|
console.log(e);
|
loading.close();
|
}
|
}
|
|
function handleSelectFile(info) {
|
console.log(info);
|
selectFile.value = info;
|
}
|
|
function handleDownloadFile() {
|
if(selectFile.value.standFilePath) {
|
downloadFile(selectFile.value.standFilePath, "");
|
}else {
|
$message.warning("请选择下载的文件");
|
}
|
|
}
|
|
function handleUploadFile(options) {
|
console.log(selectInfo.value);
|
const formData = new FormData();
|
formData.append('multipartFile', options.file); // 添加文件到FormData中
|
formData.append('num', selectInfo.value.num); // 添加额外参数
|
const loading = $loading();
|
uploadStandFileApi(formData).then(res=>{
|
loading.close();
|
if(res.code === 1 && res.data) {
|
$message.success("上传成功！！！");
|
}else {
|
$message.warning("上传失败！！！");
|
}
|
searchData();
|
}).catch(error=>{
|
loading.close();
|
console.log(error);
|
$message.warning("上传失败，请联系管理员！！！");
|
});
|
}
|
|
|
function changeSelectRow(info) {
|
selectInfo.value = info;
|
}
|
|
/**
|
* 导出表格数据
|
*/
|
function exportExcel() {
|
if(!listRef.value.length) {
|
$message.warning("无数据，不用导出");
|
return;
|
}
|
let _headers = headers.map(v => {
|
let prop = v.prop;
|
let label = v.label;
|
return {
|
prop,
|
label
|
};
|
});
|
ExportFile(_headers, listRef.value, "标准参数管理");
|
}
|
|
onMounted(()=>{
|
changeAcButton(acButton.value);
|
});
|
</script>
|
|
<template>
|
<div class="page-wrapper">
|
<div class="page-content">
|
<yc-card is-full>
|
<div class="page-content-wrapper">
|
<div class="page-content-tools page-filter">
|
<div class="tools-left">
|
<tab-button :active="acButton === 1" @click="changeAcButton(1)">直流电源</tab-button>
|
<tab-button style="margin-left: 24px;" :active="acButton === 2" @click="changeAcButton(2)">通信电源</tab-button>
|
</div>
|
<div class="tools-right">
|
<hdw-button @click="exportExcel">导出</hdw-button>
|
</div>
|
</div>
|
<div class="page-content-table-wrapper">
|
<div class="page-content-table">
|
<div class="pos-rel">
|
<div class="pos-abs">
|
<el-table class="yc-table" stripe height="100%" :data="listRef" style="width: 100%">
|
<el-table-column show-overflow-tooltip v-for="header in headers" :key="header.prop" :prop="header.prop" :label="header.label"
|
:min-width="header.width" align="center">
|
</el-table-column>
|
<el-table-column label="操作" fixed="right" width="180" align="center">
|
<template #default="scope">
|
<el-button type="primary" size="small" @click="setParams(scope.row)">参数设定</el-button>
|
<div class="upload-file">
|
<el-upload
|
ref="uploadRef"
|
class="upload-demo"
|
action=""
|
:show-file-list="false"
|
:http-request="handleUploadFile">
|
<template #trigger>
|
<el-button type="success" size="small" @click="changeSelectRow(scope.row)">上传</el-button>
|
</template>
|
</el-upload>
|
</div>
|
</template>
|
</el-table-column>
|
</el-table>
|
</div>
|
</div>
|
</div>
|
<div class="file-list-wrapper">
|
<div class="file-tools">
|
<div class="file-tools-item">
|
<input class="file-tools-input" type="text" v-model="searchText" />
|
<hdw-button icon-class="search-data" @click="searchFileList">查 询</hdw-button>
|
</div>
|
<div class="file-tools-item bottom">
|
<input v-if="!selectFile.fileName" disabled class="file-tools-input" type="text" v-model="selectFile.fileName" />
|
<el-tooltip
|
v-else
|
class="box-item"
|
effect="dark"
|
:content="selectFile.fileName"
|
placement="top">
|
<input disabled class="file-tools-input" type="text" v-model="selectFile.fileName" />
|
</el-tooltip>
|
<hdw-button type="warning" icon-class="download" @click="handleDownloadFile">下 载</hdw-button>
|
</div>
|
</div>
|
<div class="file-list-content">
|
<div class="pos-rel">
|
<div class="pos-abs">
|
<el-scrollbar v-if="fileList.length !== 0">
|
<div class="file-list">
|
<div
|
class="file-item-wrapper"
|
v-for="(item, key) in fileList" :key="'key'+key"
|
@click="handleSelectFile(item)">
|
<el-tooltip
|
class="box-item"
|
effect="dark"
|
:content="item.fileName"
|
placement="left-start">
|
<div class="file-item">{{ item.fileName }}</div>
|
</el-tooltip>
|
</div>
|
</div>
|
</el-scrollbar>
|
<no-data v-else text="暂无规范文件"></no-data>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</yc-card>
|
</div>
|
<el-dialog
|
:title="dialogTitle"
|
v-model="addEditVisible"
|
:close-on-click-modal="false"
|
class="dialog-center"
|
align-center
|
width="auto"
|
draggable
|
destroy-on-close
|
center>
|
<add-edit
|
v-model:close="addEditVisible"
|
:info="selectInfo" @success="changeAcButton(acButton)"></add-edit>
|
</el-dialog>
|
<el-dialog title="文件上传">
|
|
</el-dialog>
|
</div>
|
</template>
|
|
<style scoped lang="less">
|
.page-wrapper {
|
display: flex;
|
flex-direction: row;
|
height: 100%;
|
.page-content {
|
flex: 1;
|
}
|
}
|
|
.page-content-wrapper {
|
display: flex;
|
flex-direction: column;
|
height: 100%;
|
.page-content-tools {
|
padding-bottom: 8px;
|
margin-left: 26px;
|
margin-right: 26px;
|
display: flex;
|
flex-direction: row;
|
.tools-left {
|
flex: 1;
|
}
|
}
|
.page-content-table-wrapper {
|
flex: 1;
|
display: flex;
|
flex-direction: row;
|
.page-content-table {
|
box-sizing: border-box;
|
flex: 1;
|
margin-left: 26px;
|
margin-right: 8px;
|
}
|
.file-list-wrapper {
|
min-width: 200px;
|
padding: 16px;
|
background-color: #073451;
|
margin-right: 26px;
|
display: flex;
|
flex-direction: column;
|
.file-list-content {
|
flex:1;
|
}
|
}
|
}
|
.page-content-page {
|
padding: 8px 8px 0 8px;
|
text-align: center;
|
|
.el-page-container {
|
display: inline-block;
|
padding: 0 16px;
|
}
|
|
.page-tool {
|
display: inline-block;
|
}
|
}
|
}
|
|
.pos-rel {
|
position: relative;
|
width: 100%;
|
height: 100%;
|
|
.pos-abs {
|
position: absolute;
|
top: 0;
|
bottom: 0;
|
left: 0;
|
right: 0;
|
width: 100%;
|
height: 100%;
|
}
|
}
|
.file-tools {
|
.file-tools-item {
|
&.bottom {
|
margin-top: 32px;
|
}
|
.file-tools-input {
|
width: 240px;
|
height: 38px;
|
border: 0;
|
background-color: #FFFFFF10;
|
margin-right: 8px;
|
color: #FFFFFF;
|
font-size: 16px;
|
&:hover {
|
background-color: #076FE810;
|
}
|
&:focus {
|
outline: 0;
|
}
|
}
|
}
|
}
|
|
.file-list {
|
padding: 8px 0;
|
user-select: none;
|
.file-item-wrapper {
|
padding: 8px;
|
background-color: #1B4C79;
|
cursor: pointer;
|
margin-top: 4px;
|
&:hover {
|
font-weight: 700;
|
}
|
.file-item {
|
font-size: 14px;
|
white-space: nowrap;
|
}
|
}
|
}
|
.upload-file {
|
display: inline-block;
|
margin-left: 8px;
|
}
|
</style>
|
