FileManage/web/src/views/testdata/testtask/index.vue

629 lines
27 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<script lang="ts">
export default {
name: "testtask",//试验数据管理
};
</script>
<script setup lang="ts">
import { onMounted, ref } from "vue";
import { ElMessage, ElMessageBox } from 'element-plus'
import Page from '@/components/Pagination/page.vue'
import { tstaskPage, addtsTask, updatetsTask, deleteTsTaskById, deleteTsTaskByIds, confirmDeleteTask } from "@/api/testtask";
import { storagesBytype } from "@/api/storage";
import { getDict } from '@/api/dict'
//定义表格数据
const tableData: any = ref([]);
// 查询数据
const dataduan = ref([])
const queryParams: any = ref({
current: 1,
size: 20,
taskName: '',
taskPlace: '',
taskPerson: '',
carrierType: '',
deviceCode: '',
startDate: '',
endDate: ''
});
const total = ref(0);
//转化时间格式
function zhuandata(dateString: any) {
// 创建Date对象
const date = new Date(dateString);
// 获取年、月、日
const year = date.getFullYear();
const month = String(date.getMonth() + 1).padStart(2, '0'); // 月份从0开始需要加1
const day = String(date.getDate()).padStart(2, '0');
// 格式化为YYYY-MM-DD
return `${year}-${month}-${day}`;
}
// 表格加载
const loading = ref(false)
//获取表格数据
function getdata() {
loading.value = true
if (dataduan.value && dataduan.value.length > 0) {
const dataArr = []
dataduan.value.forEach((item: any) => {
dataArr.push(zhuandata(item))
})
queryParams.value.startDate = dataArr[0]
queryParams.value.endDate = dataArr[1]
} else {
queryParams.value.startDate = ''
queryParams.value.endDate = ''
}
tstaskPage(queryParams.value).then((res: any) => {
loading.value = false
tableData.value = res.data.records
queryParams.value.current = res.data.current
queryParams.value.size = res.data.size
total.value = res.data.total
let arr = []
tableData.value.forEach((item: any) => {
if (item.taskProps) {
arr = JSON.parse(item.taskProps)
} else {
arr = []
}
item.taskProps = arr
});
})
}
//弹框命名
const title = ref("")
//控制弹框显隐
const frame = ref(false)
//新增项目弹框
function addproject() {
frame.value = true
title.value = "新增试验任务"
projectForme.value = {
taskName: "",//任务名称
taskDate: "",//任务开始时间
taskPlace: "",//任务地点
taskPerson: "",//任务人员
carrierType: "",// 载体类型
carrierName: "",//载体名称
deviceName: "",//设备名称
taskCode: "",//任务编号
deviceCode: "",//设备编号
taskType: "",
testDescribe: "",// 试验描述
sensorDescribe: "",// 传感器描述
taskProps: "",//信息
localStorageId: '',
backupStorageId: ''
}
formitemarr.value.length = 0
}
//修改项目弹框
function editproject(row: any) {
projectForme.value = JSON.parse(JSON.stringify(row))
formitemarr.value = projectForme.value.taskProps
projectForme.value.taskDate = [projectForme.value.taskStartdate, projectForme.value.taskEnddate]
title.value = "修改试验任务"
frame.value = true
}
//删除项目弹框
function delproject(row: any) {
ElMessageBox.confirm(
'您确定要删除该项目及其中的节点和文件吗?',
'警告',
{
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning',
}
)
.then(() => {
confirmDeleteTask({ ids: row.id }).then((res: any) => {
if (res.data.data.status == 1) {
loading.value = true
deleteTsTaskById({ id: row.id }).then((res: any) => {
if (res.code == 0) {
getdata()
ElMessage({
type: 'success',
message: '删除成功',
})
}
})
} else {
ElMessage.warning("试验任务中含有已备份的文件,无法删除")
return
}
})
})
}
//表格多选
const tableIdarr = ref([])
function handleSelectionChange(val: any) {
tableIdarr.value = val
}
//多选删除
function delprojectArr() {
const ids = []
tableIdarr.value.forEach((item: any) => {
ids.push(item.id)
})
ElMessageBox.confirm(
'您确定要删除这些项目及其中的节点和文件吗?',
'警告',
{
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning',
}
)
.then(() => {
confirmDeleteTask({ ids: ids.join(',') }).then((res: any) => {
if (res.data.data.status == 1) {
loading.value = true
deleteTsTaskByIds({ ids: ids.join(',') }).then((res: any) => {
if (res.code == 0) {
ElMessage({
type: 'success',
message: '删除成功',
})
getdata()
}
})
} else {
ElMessage.warning("试验任务中含有已备份的文件,无法删除")
return
}
})
})
}
//弹框关闭
function handleClose(formEl: any) {
// if (!formEl) return
// formEl.resetFields()
frame.value = false
}
//表单数据
const ruleFormRef = ref()
const projectForme: any = ref({
taskName: "",//任务名称
taskDate: "",//任务开始时间
taskPlace: "",//任务地点
taskPerson: "",//任务人员
carrierType: "",// 载体类型
carrierName: "",//载体名称
deviceName: "",//设备名称
taskCode: "",//任务编号
deviceCode: ""//设备编号
, taskType: "",
testDescribe: "",// 试验描述
sensorDescribe: "",// 传感器描述
taskProps: "",//信息
localStorageId: '',
backupStorageId: ''
})
//表单确定
async function submitForm(formEl: any) {
if (!formEl) return
await formEl.validate((valid: any, fields: any) => {
if (valid) {
if (formitemarr.value.length > 0) {
projectForme.value.taskProps = JSON.stringify(formitemarr.value)
} else {
projectForme.value.taskProps = '[]'
}
if (projectForme.value.taskDate.length > 0) {
projectForme.value.taskStartdate = projectForme.value.taskDate[0]
projectForme.value.taskEnddate = projectForme.value.taskDate[1]
} else {
projectForme.value.taskStartdate = ''
projectForme.value.taskEnddate = ''
}
if (projectForme.value.id) {
updatetsTask(projectForme.value).then((res: any) => {
if (res.code == 0) {
getdata()
ElMessage.success("修改成功")
frame.value = false
}
})
} else {
addtsTask(projectForme.value).then((res: any) => {
if (res.code == 0) {
getdata()
ElMessage.success("添加成功")
frame.value = false
}
})
}
}
})
}
//用户弹窗规则定义
const moderules = ref({
taskType: [{ required: true, message: "请选择任务类型", trigger: "change" }],
taskDate: [{ required: true, message: "请选择任务时间", trigger: "change" }],
taskPlace: [{ required: true, message: "请输入任务地点", trigger: "blur" }],
localStorageId: [{ required: true, message: "请选择本地存储空间", trigger: "change" }],
backupStorageId: [{ required: true, message: "请选择minio存储空间", trigger: "change" }],
});
onMounted(() => {
getdata()
getDictOne()
});
//获取字典项目类型
const dictType = ref([])
const localarr = ref([])
const minioarr = ref([])
function getDictOne() {
getDict({ dictcode: 'taskType' }).then((res: any) => {
dictType.value = res.data
})
storagesBytype({ type: 'local' }).then((res: any) => {
localarr.value = res.data
})
storagesBytype({ type: 'minio' }).then((res: any) => {
minioarr.value = res.data
})
}
//项目类型转换
function typeName(arr: any, itemCode: any) {
let nameone: any
arr.forEach((item: any) => {
if (item.itemcode == itemCode) {
nameone = item.dictname
}
});
return nameone
}
const logqing = ref(false)
const logTxt = ref('')
function Loglist(row: any, title1: any) {
title.value = title1
logqing.value = true
logTxt.value = row
}
function handleClose1() {
logqing.value = false
}
//添加属性
const formitemarr = ref([])
const dataname = ref('')
const labledone = ref(false)
function addformItem() {
labledone.value = true
dataname.value = ''
}
function labledoneclose() {
labledone.value = false
}
function labledsure() {
if (!dataname.value) {
ElMessage.warning('请输入属性名称')
return
}
generateUniqueId
formitemarr.value.push({ name: dataname.value, data: '', id: generateUniqueId(8) })
labledone.value = false
}
function generateUniqueId(length: any) {
const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
let result = '';
// 添加时间戳部分转换为36进制并取字母部分
const timePart = Date.now().toString(36).toUpperCase().replace(/[0-9]/g, '');
result += timePart;
// 补充随机字符
for (let i = result.length; i < length; i++) {
result += chars.charAt(Math.floor(Math.random() * chars.length));
}
return result.substring(0, length);
}
function dellable(index: any) {
formitemarr.value.splice(index, 1)
}
let result1 = ref([])
let result2 = ref([])
const attloading = ref(false)
const attbute = ref(false)
function attribute(input: any) {
result2.value = input
result1.value.length = 0
let inoutarr = JSON.parse(JSON.stringify(input))
result1.value = [inoutarr.reduce((acc: any, item: any) => {
acc[item.id] = item.data;
return acc;
}, {})];
attbute.value = true
console.log(result1.value)
}
function attributeclose() {
attbute.value = false
}
</script>
<template>
<div>
<div class="record-box">
<div class="sou_title">
<div class="sou_title_left">
<el-input style="margin-right: 10px ;width:80px;margin-bottom: 10px;" v-model="queryParams.taskCode"
clearable @change="getdata()" placeholder="任务编号"></el-input>
<el-input style="margin-right: 10px ;width:180px;margin-bottom: 10px;"
v-model="queryParams.taskName" clearable @change="getdata()" placeholder="任务名称"></el-input>
<el-select style="margin-right: 10px ;width:180px;margin-bottom: 10px;"
v-model="queryParams.taskType" clearable placeholder="任务类型" @change="getdata()">
<el-option v-for="item in dictType" :key="item.itemcode" :label="item.dictname"
:value="item.itemcode" />
</el-select>
<el-input style="margin-right: 10px ;width:180px;margin-bottom: 10px;"
v-model="queryParams.taskPlace" clearable @change="getdata()" placeholder="任务地点"></el-input>
<el-input style="margin-right: 10px ;width:180px;margin-bottom: 10px;"
v-model="queryParams.taskPerson" clearable @change="getdata()" placeholder="任务人员"></el-input>
<el-date-picker v-model="dataduan" type="daterange" range-separator="至" @change="getdata()"
style="margin-right: 10px ;margin-bottom: 10px;" start-placeholder="开始时间"
end-placeholder="结束时间" />
<el-input style="margin-right: 10px ;width:180px;" v-model="queryParams.carrierName" clearable
@change="getdata()" placeholder="载机名称"></el-input>
<el-input style="margin-right: 10px ;width:180px;" v-model="queryParams.deviceCode" clearable
@change="getdata()" placeholder="设备代号_编号"></el-input>
<el-input style="margin-right: 10px ;width:380px;" v-model="queryParams.testDescribe" clearable
@change="getdata()" placeholder="试验描述"></el-input>
<el-input style="margin-right: 10px ;width:380px;" v-model="queryParams.sensorDescribe" clearable
@change="getdata()" placeholder="传感器描述"></el-input>
<el-button type="primary" @click="getdata()">搜索</el-button>
</div>
<div>
<el-button type="primary" @click="addproject()">新增</el-button>
<el-button type="primary" @click="delprojectArr()" :disabled="tableIdarr.length == 0">删除</el-button>
</div>
</div>
<el-table v-loading="loading" :data="tableData" @selection-change="handleSelectionChange"
:header-cell-style="{ background: 'rgb(250 250 250)', color: '#383838', height: '50px' }"
style="width: 100%; height: calc(64vh);margin-bottom: 20px;" border>
<el-table-column type="selection" width="40" />
<el-table-column prop="taskCode" label="任务编号" width="90"></el-table-column>
<el-table-column prop="taskName" label="任务名称" width="600"></el-table-column>
<el-table-column prop="taskType" label="任务类型" width="120">
<template #default="scope">
<span>{{ typeName(dictType, scope.row.taskType) }}</span>
</template>
</el-table-column>
<el-table-column prop="taskDate" label="任务时间" width="320" align="center">
<template #default="scope">
<span>{{ scope.row.taskStartdate && scope.row.taskEnddate ? scope.row.taskStartdate + '-' +
scope.row.taskEnddate : '' }}</span>
</template>
</el-table-column>
<el-table-column prop="description" label="自定义属性" width="100">
<template #default="scope">
<div class="ellipsis1">
<img src="@/assets/MenuIcon/xqing.png" alt="" title="详情"
@click="attribute(scope.row.taskProps)" style="cursor: pointer;">
</div>
</template>
</el-table-column>
<el-table-column prop="taskPlace" label="任务地点" width="180"></el-table-column>
<el-table-column prop="taskPerson" label="任务人员" width="280"></el-table-column>
<el-table-column prop="carrierName" label="载机名称" width="180"></el-table-column>
<el-table-column prop="deviceCode" label="设备代号_编号" width="180"></el-table-column>
<el-table-column prop="testDescribe" label="试验描述" width="320">
<template #default="scope">
<!-- <span>{{ scope.row.testDescribe }}</span> -->
<div class="ellipsis">
<span class="single-line-ellipsis">{{ scope.row.testDescribe }}</span>
<img src="@/assets/MenuIcon/xqing.png" alt="" title="详情"
@click="Loglist(scope.row.testDescribe, '试验描述详情')" style="cursor: pointer;">
</div>
</template>
</el-table-column>
<el-table-column prop="sensorDescribe" label="传感器描述" width="320">
<template #default="scope">
<!-- <span>{{ scope.row.testDescribe }}</span> -->
<div class="ellipsis">
<span class="single-line-ellipsis">{{ scope.row.sensorDescribe }}</span>
<img src="@/assets/MenuIcon/xqing.png" alt="" title="详情"
@click="Loglist(scope.row.sensorDescribe, '传感器描述详情')" style="cursor: pointer;">
</div>
</template>
</el-table-column>
<el-table-column fixed="right" label="操作" width="80" align="center">
<template #default="scope">
<span
style="display: flex;display: -webkit-flex;justify-content: space-around;-webkit-justify-content: space-around; ">
<img src="@/assets/MenuIcon/lbcz_xg.png" alt="" title="修改" @click="editproject(scope.row)"
style="cursor: pointer;">
<img src="@/assets/MenuIcon/lbcz_sc.png" alt="" title="删除" @click="delproject(scope.row)"
style="cursor: pointer;">
</span>
</template>
</el-table-column>
</el-table>
<Page :total="total" v-model:size="queryParams.size" v-model:current="queryParams.current"
@pagination="getdata()">
</Page>
</div>
<el-dialog :title="title" v-model="frame" width="60%" :before-close="handleClose" top="30px" draggable
:close-on-click-modal="false" destroy-on-close>
<el-form ref="ruleFormRef" style="max-width:100%" :model="projectForme" :rules="moderules"
label-width="auto" class="demo-ruleForm" status-icon>
<el-scrollbar height="80vh">
<div style="width: 100%;display: flex;justify-content: space-between;align-items: center;">
<el-form-item label="任务编号" style="width: 50%;">
<el-input v-model="projectForme.taskCode" maxlength="40" show-word-limit disabled
style="width: 100%;" />
</el-form-item>
<el-form-item label="任务名称" style="width: 50%;margin-left: 15px;">
<el-input v-model="projectForme.taskName" show-word-limit disabled />
</el-form-item>
</div>
<div style="width: 100%;display: flex;justify-content: space-between;align-items: center;">
<el-form-item label="任务类型" prop="taskType" style="width: 50%;">
<el-select v-model="projectForme.taskType" clearable placeholder=" ">
<el-option v-for="item in dictType" :key="item.itemcode" :label="item.dictname"
:value="item.itemcode" />
</el-select>
</el-form-item>
<el-form-item label="任务时间" prop="taskDate" style="width: 50%;margin-left: 15px;">
<el-date-picker v-model="projectForme.taskDate" type="daterange" range-separator="-"
start-placeholder="开始时间" end-placeholder="结束时间" format="YYYY-MM-DD"
value-format="YYYY-MM-DD" />
</el-form-item>
</div>
<div style="width: 100%;display: flex;justify-content: space-between;align-items: center;">
<el-form-item label="本地存储空间" prop="localStorageId" style="width: 50%;">
<el-select v-model="projectForme.localStorageId" clearable placeholder=" "
:disabled="projectForme.id">
<el-option v-for="item in localarr" :key="item.id" :label="item.name"
:value="item.id" />
</el-select>
</el-form-item>
<el-form-item label="minio存储空间" prop="backupStorageId" style="width: 50%;margin-left: 15px;">
<el-select v-model="projectForme.backupStorageId" clearable placeholder=" "
:disabled="projectForme.id">
<el-option v-for="item in minioarr" :key="item.id" :label="item.name"
:value="item.id" />
</el-select>
</el-form-item>
</div>
<div style="width: 100%;display: flex;justify-content: space-between;align-items: center;">
<el-form-item label="任务地点" prop="taskPlace" style="width: 50%;">
<el-input v-model="projectForme.taskPlace" maxlength="500" show-word-limit />
</el-form-item>
<el-form-item label="任务人员" style="width: 50%;margin-left: 15px;">
<el-input v-model="projectForme.taskPerson" maxlength="500" show-word-limit />
</el-form-item>
</div>
<div style="width: 100%;display: flex;justify-content: space-between;align-items: center;">
<el-form-item label="载机名称" style="width: 50%;">
<el-input v-model="projectForme.carrierName" maxlength="40" show-word-limit />
</el-form-item>
<el-form-item label="设备代号_编号" style="width: 50%;margin-left: 15px;">
<el-input v-model="projectForme.deviceCode" maxlength="40" show-word-limit />
</el-form-item>
</div>
<!-- <el-form-item label="载体类型">
<el-input v-model="projectForme.carrierType" maxlength="200" show-word-limit />
</el-form-item> -->
<el-form-item label="试验描述">
<el-input v-model="projectForme.testDescribe" :rows="12" type="textarea" show-word-limit />
</el-form-item>
<el-form-item label="传感器描述">
<el-input v-model="projectForme.sensorDescribe" :rows="12" type="textarea" show-word-limit />
</el-form-item>
<!-- <el-form-item label="设备名称">
<el-input v-model="projectForme.deviceName" maxlength="40" show-word-limit />
</el-form-item> -->
<el-form-item v-for="(item, index) in formitemarr" :label="item.name">
<div style="width: 100%;display: flex;align-items: center;justify-content: space-between;">
<el-input v-model="item.data" style="width: 92%;" />
<el-button type="primary" @click="dellable(index)">删除</el-button>
</div>
</el-form-item>
</el-scrollbar>
<el-form-item>
<div style="width: 100%;display: flex;justify-content: end;">
<el-button type="primary" @click="addformItem">添加属性</el-button>
<el-button type="primary" @click="submitForm(ruleFormRef)">确定</el-button>
<el-button @click="handleClose(ruleFormRef)">取消</el-button>
</div>
</el-form-item>
</el-form>
</el-dialog>
<el-dialog :title="'添加属性'" v-model="labledone" width="20%" :before-close="labledoneclose" top="30px" draggable
:close-on-click-modal="false" destroy-on-close>
<el-input v-model="dataname" placeholder="请输入属性名称" />
<div style="width: 100%;display: flex;justify-content: end;margin-top: 10px;">
<el-button type="primary" @click="labledsure()">确定</el-button>
</div>
</el-dialog>
<el-dialog :title="'自定义属性详情'" v-model="attbute" width="1200px" :before-close="attributeclose" top="30px"
draggable :close-on-click-modal="false" destroy-on-close>
<el-table v-if="result2.length > 0" v-loading="attloading" :data="result1"
:header-cell-style="{ background: 'rgb(250 250 250)', color: '#383838', height: '50px' }"
style="width: 100%; height: calc(30vh);margin-bottom: 20px;" border>
<el-table-column v-for="item in result2" :prop="item.id" :label="item.name"></el-table-column>
</el-table>
<div v-else
style="width: 100%;height: 285px;display: flex;align-items: center;justify-content: center;border: 1px solid #ebeef5;">
<el-empty description="暂无数据" />
</div>
</el-dialog>
<el-dialog :title="title" v-model="logqing" width="60%" :before-close="handleClose1" top="30px" draggable
:close-on-click-modal="false" destroy-on-close>
<div class="texlog">
<el-scrollbar height="80vh">
{{ logTxt }}
</el-scrollbar>
</div>
</el-dialog>
</div>
</template>
<style lang="scss" scoped>
.texlog {
width: 100%;
padding: 10px;
border: 1px solid #ccc;
border-radius: 5px;
}
.ellipsis {
display: flex;
width: 100%;
align-items: center;
justify-content: space-between;
}
.single-line-ellipsis {
width: 270px;
/* 限制容器宽度 */
white-space: nowrap;
/* 禁止文本换行 */
overflow: hidden;
/* 隐藏超出范围的内容 */
text-overflow: ellipsis;
/* 使用省略号 */
}
.record-box {
padding: 20px;
width: 100%;
height: calc(100vh - 130px);
overflow: auto;
background-color: rgba(255, 255, 255, 1);
border: none;
border-radius: 3px;
box-sizing: border-box;
.sou_title {
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
.sou_title_left {
width: 80%;
display: flex;
align-items: center;
// justify-content: space-between;
flex-wrap: wrap;
}
}
}
</style>