You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
827 lines
24 KiB
827 lines
24 KiB
<!-- 监督检查任务新增 -->
|
|
<script>
|
|
import dayjs from "dayjs";
|
|
import { listUser } from "@/api/management";
|
|
import {
|
|
addDangerTaskData,
|
|
getDangerTaskDetailsData,
|
|
putDangerTaskData,
|
|
getDangerGroupingListData,
|
|
getDangerTaskLinkProjectData,
|
|
} from "@/api/sluice";
|
|
import { codeToText } from "element-china-area-data";
|
|
import { getAreasData } from "@/api/areas/index";
|
|
|
|
export default {
|
|
name: "tasksDetails",
|
|
data() {
|
|
return {
|
|
paramsData: {
|
|
name: "",
|
|
type: null,
|
|
wagaName: "",
|
|
selectLevel: "",
|
|
selectType: "",
|
|
},
|
|
areasOptionProps: {
|
|
emitPath: false,
|
|
checkStrictly: true, //选择任意一级
|
|
},
|
|
areasOptions: [],
|
|
radioValue: "",
|
|
dialogVisible: false,
|
|
prohibitEditing: false,
|
|
enableSupervisionWayData: [], //启用中的检查项
|
|
groupList: [], // 人员列表
|
|
projectList: [], // 工程列表
|
|
tableData: [], // 检查列表
|
|
projectTypeOptions: [], // 工程类型
|
|
engScalOptions: [], // 工程规模
|
|
buildingLevelOptions: [], // 工程级别
|
|
pageData: {
|
|
pageNum: 1, // 当前页
|
|
pageSize: 10, // 请求数量
|
|
pageSizes: [10, 20, 50, 100],
|
|
total: 0, // 总数量
|
|
},
|
|
dialogParams: {
|
|
engineeringManagementUnit: "",
|
|
areaName: "",
|
|
},
|
|
ruleForm: {
|
|
id: null,
|
|
name: "",
|
|
groupId: "",
|
|
startTime: "",
|
|
doneTime: "",
|
|
content: "",
|
|
wagaCode: "",
|
|
wagaName: "",
|
|
wagaList: [],
|
|
},
|
|
rules: {
|
|
name: [
|
|
{ required: true, message: "请输入名称", trigger: "blur" },
|
|
{ max: 50, message: "名称最长为50个字符", trigger: "blur" },
|
|
],
|
|
groupId: [{ required: true, message: "请选择小组", trigger: "change" }],
|
|
doneTime: [
|
|
{ required: true, message: "请选择时间", trigger: "change" },
|
|
],
|
|
},
|
|
};
|
|
},
|
|
computed: {
|
|
// 计算时间差
|
|
computedTimes: {
|
|
get() {
|
|
return [this.ruleForm.startTime || "", this.ruleForm.doneTime || ""];
|
|
},
|
|
set(val) {
|
|
this.ruleForm.startTime = val[0] ? val[0] + " 00:00:00" : "";
|
|
this.ruleForm.doneTime = val[1] ? val[1] + " 23:59:59" : "";
|
|
},
|
|
},
|
|
// 计算任务工时
|
|
computedTaskTimes() {
|
|
if (this.ruleForm.startTime && this.ruleForm.doneTime) {
|
|
return (
|
|
dayjs(this.ruleForm.doneTime).diff(
|
|
dayjs(this.ruleForm.startTime),
|
|
"day"
|
|
) + 1
|
|
);
|
|
}
|
|
return "";
|
|
},
|
|
// 预览模式
|
|
previewMode() {
|
|
return this.$route.query.id && this.$route.query.type === "preview";
|
|
},
|
|
// 编辑模式
|
|
editMode() {
|
|
return this.$route.query.id && this.$route.query.type === "edit";
|
|
},
|
|
},
|
|
methods: {
|
|
getTreeData() {
|
|
getAreasData().then((items) => {
|
|
// console.log("getAreasData", items.data);
|
|
let res = [];
|
|
let getChildren = (res, pid) => {
|
|
for (const i of items.data) {
|
|
if (i.parentid === pid) {
|
|
const newItem = {
|
|
label: i.name,
|
|
value: i.id,
|
|
};
|
|
if (i.layer != 3) newItem.children = [];
|
|
res.push(newItem);
|
|
getChildren(newItem.children, newItem.value);
|
|
}
|
|
}
|
|
};
|
|
getChildren(res, items.data[0].parentid);
|
|
this.areasOptions = res;
|
|
// return res;
|
|
});
|
|
},
|
|
// 获取详情
|
|
getDetails() {
|
|
getDangerTaskDetailsData(this.$route.query.id).then((res) => {
|
|
if (res) {
|
|
this.ruleForm.id = this.$route.query.id;
|
|
this.ruleForm.name = res.data.name;
|
|
this.ruleForm.groupId = res.data.groupId;
|
|
this.ruleForm.startTime = res.data.startTime;
|
|
this.ruleForm.doneTime = res.data.doneTime;
|
|
this.ruleForm.content = res.data.content;
|
|
this.ruleForm.riverLocation = res.data.riverLocation;
|
|
this.ruleForm.adcd = res.data.adcd;
|
|
this.ruleForm.engineeringManagementUnit =
|
|
res.data.engineeringManagementUnit;
|
|
this.ruleForm.wagaList = [
|
|
{
|
|
wagaCode: res.data.wagaCode,
|
|
wagaName: res.data.wagaName,
|
|
mainBuildGrad: res.data.mainBuildGrad,
|
|
engScal: res.data.engScal,
|
|
wagaType: res.data.wagaType,
|
|
},
|
|
];
|
|
}
|
|
});
|
|
},
|
|
// 搜索用户
|
|
searchGroupList(e = null) {
|
|
getDangerGroupingListData({
|
|
data: {
|
|
timeView: {
|
|
timeField: "create_time",
|
|
},
|
|
name: e ? e : "",
|
|
},
|
|
pageSize: 50,
|
|
pageNum: 1,
|
|
}).then((res) => {
|
|
this.groupList = res.records;
|
|
});
|
|
},
|
|
// 重置校验
|
|
resetForm(formName) {
|
|
this.$refs[formName].resetFields();
|
|
this.dialogVisible = false;
|
|
},
|
|
// 获取工程列表
|
|
getProjectList() {
|
|
getDangerTaskLinkProjectData({
|
|
data: {
|
|
pageNum: 1,
|
|
pageSize: 20,
|
|
engineeringManagementUnit:
|
|
this.dialogParams.engineeringManagementUnit,
|
|
adcd: this.dialogParams.adcd,
|
|
},
|
|
}).then((res) => {
|
|
if (res) {
|
|
this.projectList = res.records;
|
|
}
|
|
});
|
|
},
|
|
// 格式化adcd
|
|
formatAdcd(adcd) {
|
|
if (adcd) {
|
|
let provinceCode = adcd.slice(0, 2);
|
|
let cityCode = adcd.slice(2, 4);
|
|
let areaCode = adcd.slice(4, 6);
|
|
if (areaCode != "00") {
|
|
return (
|
|
codeToText[provinceCode] +
|
|
"-" +
|
|
codeToText[provinceCode + cityCode] +
|
|
"-" +
|
|
codeToText[provinceCode + cityCode + areaCode]
|
|
);
|
|
} else if (cityCode != "00") {
|
|
return (
|
|
codeToText[provinceCode] + "-" + codeToText[provinceCode + cityCode]
|
|
);
|
|
} else {
|
|
return codeToText[provinceCode];
|
|
}
|
|
}
|
|
},
|
|
// 获取水闸类型
|
|
formatType(type) {
|
|
if (!type) return "";
|
|
// let typeArr = JSON.parse(type);
|
|
let typeArr = [type];
|
|
let str = "";
|
|
typeArr.forEach((item) => {
|
|
let res = this.projectTypeOptions.find(
|
|
(typeItem) => typeItem.dictValue === item
|
|
);
|
|
if (res) {
|
|
str += res.dictLabel + ",";
|
|
}
|
|
});
|
|
return str.slice(0, -1);
|
|
},
|
|
// 获取工程规模
|
|
formatEngScal(scal) {
|
|
if (!scal) return "";
|
|
let res = this.engScalOptions.find(
|
|
(item) => item.dictValue === scal.toString()
|
|
);
|
|
return res ? res.dictLabel : "";
|
|
},
|
|
// 获取工程级别
|
|
formatLevel(level) {
|
|
if (!level) return "";
|
|
let res = this.buildingLevelOptions.find(
|
|
(item) => item.dictValue === level.toString()
|
|
);
|
|
return res ? res.dictLabel : "";
|
|
},
|
|
// 删除
|
|
handleDelWagaItem(row, index) {
|
|
this.ruleForm.wagaList.splice(index, 1);
|
|
},
|
|
// 提交表单
|
|
handleSubmit() {
|
|
this.$refs.ruleForm.validate((valid) => {
|
|
if (valid) {
|
|
if (!this.ruleForm.wagaList || this.ruleForm.wagaList.length < 1) {
|
|
this.$message.error("请添加水闸");
|
|
return;
|
|
}
|
|
// 提交表单，二次确认
|
|
this.$confirm("确认提交吗？", "提示", {
|
|
confirmButtonText: "确定",
|
|
cancelButtonText: "取消",
|
|
type: "warning",
|
|
})
|
|
.then(() => {
|
|
let formData = {
|
|
...this.ruleForm,
|
|
wagaCode: this.ruleForm.wagaList
|
|
.map((item) => item.wagaCode)
|
|
.join(","),
|
|
wagaName: this.ruleForm.wagaList
|
|
.map((item) => item.wagaName)
|
|
.join(","),
|
|
};
|
|
if (this.$route.query.id) {
|
|
// 编辑
|
|
putDangerTaskData({
|
|
id: this.$route.query.id,
|
|
...formData,
|
|
}).then((res) => {
|
|
if (res) {
|
|
this.$message({
|
|
message: "编辑成功",
|
|
type: "success",
|
|
});
|
|
this.$router.go(-1);
|
|
}
|
|
});
|
|
} else {
|
|
// 新增
|
|
addDangerTaskData(formData).then((res) => {
|
|
if (res) {
|
|
this.$message({
|
|
message: "新增成功",
|
|
type: "success",
|
|
});
|
|
this.$router.go(-1);
|
|
}
|
|
});
|
|
}
|
|
})
|
|
.catch(() => {
|
|
// 取消提交
|
|
});
|
|
} else {
|
|
console.log("error submit!!");
|
|
return false;
|
|
}
|
|
});
|
|
},
|
|
handleAddPro() {
|
|
this.handleSearchDialogPro();
|
|
this.dialogVisible = true;
|
|
},
|
|
// 检索
|
|
handleSearchDialogPro() {
|
|
this.getProjectList();
|
|
},
|
|
// 关闭弹窗
|
|
handleCloseDialog() {
|
|
this.radioValue = "";
|
|
this.dialogVisible = false;
|
|
},
|
|
// 确认选择
|
|
handleConfirmSelect() {
|
|
if (!this.radioValue) {
|
|
this.$message.error("请选择");
|
|
return;
|
|
}
|
|
let res = this.projectList.find(
|
|
(item) => item.wagaCode === this.radioValue
|
|
);
|
|
if (res) {
|
|
if (
|
|
this.ruleForm.wagaList?.length &&
|
|
this.ruleForm.wagaList.some((item) => item.wagaCode === res.wagaCode)
|
|
) {
|
|
this.$message.error("已存在相同工程");
|
|
return;
|
|
}
|
|
this.ruleForm.wagaList?.push(res);
|
|
}
|
|
this.radioValue = "";
|
|
this.dialogVisible = false;
|
|
},
|
|
// 返回
|
|
handleGoBack() {
|
|
if (this.previewMode) {
|
|
this.$router.go(-1);
|
|
return;
|
|
}
|
|
// 二次确认返回是否保存数据
|
|
this.$confirm("是否保存信息", "提示", {
|
|
confirmButtonText: "确定",
|
|
cancelButtonText: "取消",
|
|
type: "warning",
|
|
})
|
|
.then(() => {
|
|
this.$refs.ruleForm.validate((valid) => {
|
|
if (valid) {
|
|
if (
|
|
!this.ruleForm.wagaList ||
|
|
this.ruleForm.wagaList.length < 1
|
|
) {
|
|
this.$message.error("请至少添加一个堤防");
|
|
return;
|
|
}
|
|
|
|
let formData = {
|
|
...this.ruleForm,
|
|
wagaCode: this.ruleForm.wagaList
|
|
.map((item) => item.wagaCode)
|
|
.join(","),
|
|
wagaName: this.ruleForm.wagaList
|
|
.map((item) => item.wagaName)
|
|
.join(","),
|
|
};
|
|
if (this.$route.query.id) {
|
|
// 编辑
|
|
putDangerTaskData({
|
|
id: this.$route.query.id,
|
|
...formData,
|
|
}).then((res) => {
|
|
if (res) {
|
|
this.$message({
|
|
message: "保存成功",
|
|
type: "success",
|
|
});
|
|
this.$router.go(-1);
|
|
}
|
|
});
|
|
} else {
|
|
// 新增
|
|
addDangerTaskData(formData).then((res) => {
|
|
if (res) {
|
|
this.$message({
|
|
message: "新增成功",
|
|
type: "success",
|
|
});
|
|
this.$router.go(-1);
|
|
}
|
|
});
|
|
}
|
|
} else {
|
|
console.log("error submit!!");
|
|
throw new Error("校验不通过");
|
|
}
|
|
});
|
|
})
|
|
.catch((err) => {
|
|
if (err === "cancel") {
|
|
this.$router.go(-1);
|
|
}
|
|
});
|
|
},
|
|
},
|
|
created() {
|
|
this.getDicts("sluice_type").then((response) => {
|
|
this.projectTypeOptions = response.data;
|
|
});
|
|
this.getDicts("engineering_scale").then((response) => {
|
|
this.engScalOptions = response.data;
|
|
});
|
|
this.getDicts("building_level").then((response) => {
|
|
this.buildingLevelOptions = response.data;
|
|
});
|
|
this.searchGroupList();
|
|
this.getTreeData();
|
|
},
|
|
mounted() {
|
|
if (this.$route.query.id) {
|
|
this.getDetails();
|
|
}
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<template>
|
|
<div class="body slider-right">
|
|
<div class="top-title">{{ $router.currentRoute.meta.title }}</div>
|
|
<div class="content-box">
|
|
<div class="title">新增/编辑检查项</div>
|
|
<div class="font-14">
|
|
<el-form
|
|
:model="ruleForm"
|
|
:rules="rules"
|
|
ref="ruleForm"
|
|
label-width="100px"
|
|
>
|
|
<div class="flex">
|
|
<el-form-item label-width="120px" label="任务名称" prop="name">
|
|
<el-input
|
|
:disabled="previewMode"
|
|
style="width: 240px"
|
|
:maxlength="50"
|
|
v-model="ruleForm.name"
|
|
placeholder="请输入"
|
|
/>
|
|
</el-form-item>
|
|
<el-form-item label-width="120px" label="核查小组" prop="groupId">
|
|
<el-select
|
|
style="width: 240px"
|
|
:disabled="previewMode"
|
|
filterable
|
|
remote
|
|
:remote-method="searchGroupList"
|
|
v-model="ruleForm.groupId"
|
|
placeholder="请选择"
|
|
>
|
|
<el-option
|
|
v-for="item in groupList"
|
|
:key="item.id"
|
|
:label="item.name"
|
|
:value="item.id"
|
|
>
|
|
</el-option>
|
|
</el-select>
|
|
</el-form-item>
|
|
</div>
|
|
<div v-if="editMode" class="flex">
|
|
<el-form-item
|
|
label-width="120px"
|
|
label="所属流域"
|
|
prop="riverLocation"
|
|
>
|
|
<el-input
|
|
style="width: 240px"
|
|
:disabled="true"
|
|
:value="ruleForm.riverLocation"
|
|
placeholder=""
|
|
/>
|
|
</el-form-item>
|
|
<el-form-item label-width="120px" label="所属区域" prop="adcd">
|
|
<el-input
|
|
style="width: 240px"
|
|
:disabled="true"
|
|
:value="formatAdcd(ruleForm.adcd)"
|
|
placeholder=""
|
|
/>
|
|
</el-form-item>
|
|
<el-form-item
|
|
label-width="120px"
|
|
label="管理单位"
|
|
prop="engineeringManagementUnit"
|
|
>
|
|
<el-input
|
|
style="width: 240px"
|
|
:disabled="true"
|
|
:value="ruleForm.engineeringManagementUnit"
|
|
placeholder=""
|
|
/>
|
|
</el-form-item>
|
|
</div>
|
|
<div class="flex">
|
|
<el-form-item
|
|
label-width="120px"
|
|
label="开始结束时间"
|
|
prop="doneTime"
|
|
>
|
|
<el-date-picker
|
|
v-model="computedTimes"
|
|
type="daterange"
|
|
:disabled="previewMode"
|
|
style="width: 240px"
|
|
value-format="yyyy-MM-dd"
|
|
range-separator="至"
|
|
start-placeholder="开始日期"
|
|
end-placeholder="结束日期"
|
|
>
|
|
</el-date-picker>
|
|
</el-form-item>
|
|
<el-form-item
|
|
label-width="120px"
|
|
label="任务工时"
|
|
prop="computedTaskTimes"
|
|
>
|
|
<el-input
|
|
style="width: 240px"
|
|
:value="computedTaskTimes"
|
|
placeholder="请选择开始结束时间"
|
|
:disabled="true"
|
|
>
|
|
<span slot="suffix">天</span>
|
|
</el-input>
|
|
</el-form-item>
|
|
</div>
|
|
<el-form-item label-width="120px" label="检查任务背景" prop="content">
|
|
<el-input
|
|
v-model="ruleForm.content"
|
|
:disabled="previewMode"
|
|
type="textarea"
|
|
:maxlength="500"
|
|
:rows="5"
|
|
placeholder=" 请输入"
|
|
/>
|
|
</el-form-item>
|
|
</el-form>
|
|
|
|
<!-- 水闸基础信息 -->
|
|
<div class="table-box">
|
|
<el-row class="item-row">
|
|
<el-col :span="2">
|
|
<div class="item-row-content">序号</div>
|
|
</el-col>
|
|
<el-col :span="3">
|
|
<div class="item-row-content">水闸名称</div>
|
|
</el-col>
|
|
<el-col :span="3">
|
|
<div class="item-row-content">水闸代码</div>
|
|
</el-col>
|
|
<el-col :span="2">
|
|
<div class="item-row-content">工程级别</div>
|
|
</el-col>
|
|
<el-col :span="2">
|
|
<div class="item-row-content">工程规模</div>
|
|
</el-col>
|
|
<el-col :span="2">
|
|
<div class="item-row-content">水闸类型</div>
|
|
</el-col>
|
|
<el-col :span="2">
|
|
<div class="item-row-content">安全类别</div>
|
|
</el-col>
|
|
<el-col :span="3">
|
|
<div class="item-row-content">安全鉴定完成日期</div>
|
|
</el-col>
|
|
<el-col :span="3">
|
|
<div class="item-row-content">安全鉴定评审意见</div>
|
|
</el-col>
|
|
<el-col :span="2">
|
|
<div class="item-row-content">操作</div>
|
|
</el-col>
|
|
</el-row>
|
|
<el-row
|
|
class="item-row color-333"
|
|
v-for="(item, index) in ruleForm.wagaList"
|
|
:key="index"
|
|
>
|
|
<el-col :span="2">
|
|
<div class="item-row-content">{{ index + 1 }}</div>
|
|
</el-col>
|
|
<el-col :span="3">
|
|
<div class="item-row-content">{{ item.wagaName }}</div>
|
|
</el-col>
|
|
<el-col :span="3">
|
|
<div class="item-row-content">{{ item.wagaCode }}</div>
|
|
</el-col>
|
|
<el-col :span="2">
|
|
<div class="item-row-content">
|
|
{{ formatLevel(item.mainBuildGrad) }}
|
|
</div>
|
|
</el-col>
|
|
<el-col :span="2">
|
|
<div class="item-row-content">
|
|
{{ formatEngScal(item.engScal) }}
|
|
</div>
|
|
</el-col>
|
|
<el-col :span="2">
|
|
<div class="item-row-content">
|
|
{{ formatType(item.wagaType) }}
|
|
</div>
|
|
</el-col>
|
|
<el-col :span="2">
|
|
<div class="item-row-content">
|
|
<!-- 安全类别 -->
|
|
</div>
|
|
</el-col>
|
|
<el-col :span="3">
|
|
<div class="item-row-content">
|
|
<!-- 安全鉴定完成日期 -->
|
|
</div>
|
|
</el-col>
|
|
<el-col :span="3">
|
|
<div class="item-row-content">
|
|
<!-- 安全鉴定评审意见 -->
|
|
</div>
|
|
</el-col>
|
|
<el-col :span="2">
|
|
<div class="item-row-content">
|
|
<el-button
|
|
type="text"
|
|
v-if="!previewMode"
|
|
@click="handleDelWagaItem(item, index)"
|
|
>删除</el-button
|
|
>
|
|
</div>
|
|
</el-col>
|
|
</el-row>
|
|
<el-row
|
|
v-if="
|
|
(!previewMode && !editMode) ||
|
|
(editMode && (!ruleForm.wagaList || ruleForm.wagaList.length < 1))
|
|
"
|
|
>
|
|
<div class="item-row-content flex justify-center p-4">
|
|
<el-button type="primary" size="small" @click="handleAddPro"
|
|
>添加水闸</el-button
|
|
>
|
|
</div>
|
|
</el-row>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="bottom-btns flex justify-between">
|
|
<el-button type="primary" @click="handleSubmit" v-if="!previewMode"
|
|
>确认</el-button
|
|
>
|
|
<el-button @click="handleGoBack">返回</el-button>
|
|
</div>
|
|
|
|
<!-- 添加水闸弹窗 -->
|
|
<el-dialog
|
|
title="添加水闸"
|
|
:visible.sync="dialogVisible"
|
|
width="800px"
|
|
:close-on-click-modal="false"
|
|
>
|
|
<div>
|
|
<div class="flex items-center">
|
|
<span class="flex-shrink-0">管理单位</span>
|
|
<el-input
|
|
style="width: 240px"
|
|
v-model="dialogParams.engineeringManagementUnit"
|
|
placeholder="请输入管理单位"
|
|
class="ml-10"
|
|
></el-input>
|
|
<span class="flex-shrink-0 ml-10">所属区域</span>
|
|
<el-cascader
|
|
class="ml-10"
|
|
style="width: 240px"
|
|
:options="areasOptions"
|
|
v-model="dialogParams.adcd"
|
|
:props="areasOptionProps"
|
|
placeholder="请选择所属区域"
|
|
clearable
|
|
size="small"
|
|
>
|
|
</el-cascader>
|
|
<el-button
|
|
@click="handleSearchDialogPro"
|
|
class="!ml-20"
|
|
type="primary"
|
|
>检索</el-button
|
|
>
|
|
</div>
|
|
<div class="mt-20">
|
|
<el-table
|
|
:data="projectList"
|
|
style="width: 100%"
|
|
max-height="400"
|
|
stripe
|
|
border
|
|
>
|
|
<!-- 序号 -->
|
|
<el-table-column
|
|
type="index"
|
|
label="序号"
|
|
width="60"
|
|
align="center"
|
|
></el-table-column>
|
|
<el-table-column
|
|
prop="wagaName"
|
|
label="水闸名称"
|
|
width="180"
|
|
></el-table-column>
|
|
<el-table-column
|
|
prop="engineeringManagementUnit"
|
|
label="管理单位"
|
|
width="180"
|
|
></el-table-column>
|
|
<el-table-column prop="adcd" label="所属区域" width="180">
|
|
<template slot-scope="scope">
|
|
{{ formatAdcd(scope.row.adcd) }}
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column
|
|
fixed="right"
|
|
label="操作"
|
|
width="80"
|
|
align="center"
|
|
>
|
|
<template slot-scope="scope">
|
|
<el-radio v-model="radioValue" :label="scope.row.wagaCode">{{
|
|
""
|
|
}}</el-radio>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
</div>
|
|
<div class="flex justify-end mt-20">
|
|
<el-button @click="handleCloseDialog">取消</el-button>
|
|
<el-button type="primary" class="" @click="handleConfirmSelect"
|
|
>确认</el-button
|
|
>
|
|
</div>
|
|
</div>
|
|
</el-dialog>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped lang="less">
|
|
.body {
|
|
width: 100%;
|
|
min-height: calc(100vh - 56px);
|
|
padding-left: 24px;
|
|
|
|
.top-title {
|
|
height: 40px;
|
|
background-color: white;
|
|
display: flex;
|
|
padding-left: 16px;
|
|
align-items: center;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.content-box {
|
|
width: 100%;
|
|
height: calc(100vh - 56px - 64px);
|
|
margin-top: 24px;
|
|
overflow: auto;
|
|
padding: 16px;
|
|
background-color: white;
|
|
.title {
|
|
font-size: 16px;
|
|
font-weight: 700;
|
|
margin-bottom: 12px;
|
|
}
|
|
}
|
|
|
|
.table-box {
|
|
border: 1px solid #ccc;
|
|
border-radius: 4px;
|
|
margin-top: 12px;
|
|
.item-row {
|
|
display: flex;
|
|
.el-col {
|
|
box-sizing: border-box;
|
|
}
|
|
.item-row-content {
|
|
padding: 10px;
|
|
border: 1px solid #ccc;
|
|
height: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
flex-wrap: wrap;
|
|
}
|
|
.item-row-content2 {
|
|
padding: 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
.title-1 {
|
|
width: 100%;
|
|
padding: 4px;
|
|
text-align: center;
|
|
border-bottom: 2px solid #ccc;
|
|
}
|
|
.title-2 {
|
|
// border-top: 1px solid #ccc;
|
|
& > *:nth-of-type(2) {
|
|
border-left: 2px solid #ccc;
|
|
border-right: 2px solid #ccc;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|
|
|