39 changed files with 2330 additions and 436 deletions
@ -0,0 +1,25 @@ |
|||||||
|
import request from '@/utils/request' |
||||||
|
export default { |
||||||
|
getZscsTableList(searchModel) { |
||||||
|
return request({ |
||||||
|
url: "/day/getDayZscsList", |
||||||
|
method: 'get', |
||||||
|
params: { |
||||||
|
pageNum: searchModel.pageNum, |
||||||
|
pageSize: searchModel.pageSize, |
||||||
|
startTime: searchModel.startTime, |
||||||
|
endTime: searchModel.endTime, |
||||||
|
stcd:searchModel.stcd, |
||||||
|
stnm:searchModel.stnm |
||||||
|
} |
||||||
|
}) |
||||||
|
}, |
||||||
|
exportRainDataList(){ |
||||||
|
return request({ |
||||||
|
url: "/export/exportMonthRainList", |
||||||
|
method: 'get', |
||||||
|
responseType: 'blob' |
||||||
|
}) |
||||||
|
}, |
||||||
|
|
||||||
|
} |
||||||
@ -0,0 +1,124 @@ |
|||||||
|
<template> |
||||||
|
<el-cascader |
||||||
|
:key="componentKey" |
||||||
|
v-model="selectedValues" |
||||||
|
:options="options" |
||||||
|
:props="props" |
||||||
|
@change="handleChange" |
||||||
|
collapse-tags |
||||||
|
filterable |
||||||
|
clearable> |
||||||
|
</el-cascader> |
||||||
|
|
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
import stationApi from "@/api/basic/station"; |
||||||
|
|
||||||
|
export default { |
||||||
|
name: "station", |
||||||
|
props: { |
||||||
|
startTime: { type: String, required: true, default: null }, |
||||||
|
endTime: { type: String, required: true, default: null }, |
||||||
|
type: { |
||||||
|
type: String, |
||||||
|
required: true, |
||||||
|
default:null// 强制要求父组件传递 |
||||||
|
} |
||||||
|
}, |
||||||
|
data() { |
||||||
|
return { |
||||||
|
props: { |
||||||
|
multiple: true, |
||||||
|
checkStrictly: true,// 允许独立选择节点 |
||||||
|
value: 'value', // 确保与数据源字段名一致 |
||||||
|
label: 'label', |
||||||
|
disabled: 'disabled' |
||||||
|
}, |
||||||
|
componentKey: 0, |
||||||
|
options: [], |
||||||
|
stcds: '', |
||||||
|
selectedValues: [], // 绑定选中值 |
||||||
|
} |
||||||
|
}, |
||||||
|
watch: { |
||||||
|
// 监听时间参数变化 |
||||||
|
startTime(newVal) { |
||||||
|
this.checkAndFetchData(newVal, this.endTime); |
||||||
|
}, |
||||||
|
endTime(newVal) { |
||||||
|
this.checkAndFetchData(this.startTime, newVal); |
||||||
|
} |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
formatDateTime(date) { |
||||||
|
if (!date) return ''; |
||||||
|
const d = new Date(date); |
||||||
|
if (isNaN(d.getTime())) return ''; |
||||||
|
|
||||||
|
const year = d.getFullYear(); |
||||||
|
const month = String(d.getMonth() + 1).padStart(2, '0'); |
||||||
|
const day = String(d.getDate()).padStart(2, '0'); |
||||||
|
const hours = String(d.getHours()).padStart(2, '0'); // 小时补零 |
||||||
|
const minutes = String(d.getMinutes()).padStart(2, '0'); // 分钟补零 |
||||||
|
const seconds = String(d.getSeconds()).padStart(2, '0'); // 秒数补零 |
||||||
|
|
||||||
|
return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`; |
||||||
|
}, |
||||||
|
// 检查是否满足查询条件 |
||||||
|
checkAndFetchData(start, end) { |
||||||
|
if (start && end) { |
||||||
|
this.componentKey++; |
||||||
|
this.options=[] |
||||||
|
this.selectedValues=[] |
||||||
|
if (this.type.includes("Day") || this.type.includes("Dp")){ |
||||||
|
// 触发查询 |
||||||
|
this.getStaionList(this.formatDateTime(start), this.formatDateTime(end),this.type); |
||||||
|
}else { |
||||||
|
this.getStaionList(start, end,this.type); |
||||||
|
} |
||||||
|
} |
||||||
|
}, |
||||||
|
async getStaionList(startTime, endTime, type) { |
||||||
|
const res = await stationApi.getStnmAndStcdList(startTime, endTime, type); |
||||||
|
// 新增数据处理逻辑 |
||||||
|
const processTree = (nodes) => { |
||||||
|
return nodes.map(node => { |
||||||
|
const hasChildren = node.children && node.children.length > 0; |
||||||
|
return { |
||||||
|
...node, |
||||||
|
disabled: hasChildren, // 有子节点的父类自动禁用 |
||||||
|
children: hasChildren ? processTree(node.children) : null |
||||||
|
}; |
||||||
|
}); |
||||||
|
}; |
||||||
|
this.options = processTree([res.data]); // 注意保持数组结构 |
||||||
|
}, |
||||||
|
|
||||||
|
handleChange(selectedValues, selectedNodes) { |
||||||
|
const value=this.selectedValues.map(path => path[path.length - 1])[0]; |
||||||
|
if (value==='all') { |
||||||
|
this.selectedValues = ["1,all"]; |
||||||
|
} |
||||||
|
const lastValue = selectedValues.map(path => path[path.length - 1]); |
||||||
|
this.stcds = lastValue.join(",") |
||||||
|
this.$emit('stcd-update', this.stcds); // 触发事件 |
||||||
|
}, |
||||||
|
getStcds() { |
||||||
|
this.$emit('childEvent', stcds); |
||||||
|
} |
||||||
|
|
||||||
|
}, |
||||||
|
mounted() { |
||||||
|
if (this.startTime !=null || this.endTime !=null) { |
||||||
|
this.getStaionList(this.startTime,this.endTime,this.type) |
||||||
|
}else { |
||||||
|
this.getStaionList(null,null,this.type) |
||||||
|
} |
||||||
|
|
||||||
|
} |
||||||
|
} |
||||||
|
</script> |
||||||
|
<style scoped lang="scss"> |
||||||
|
|
||||||
|
</style> |
||||||
@ -0,0 +1,338 @@ |
|||||||
|
<template> |
||||||
|
<div class="app-container"> |
||||||
|
<el-form :inline="true" class="demo-form-inline"> |
||||||
|
<el-form-item label="起始日期"> |
||||||
|
<el-date-picker |
||||||
|
v-model="searchModel.startTime" |
||||||
|
type="datetime" |
||||||
|
placeholder="选择日期"> |
||||||
|
</el-date-picker> |
||||||
|
</el-form-item> |
||||||
|
<el-form-item label="截止日期"> |
||||||
|
<el-date-picker |
||||||
|
v-model="searchModel.endTime" |
||||||
|
type="datetime" |
||||||
|
placeholder="选择日期"> |
||||||
|
</el-date-picker> |
||||||
|
</el-form-item> |
||||||
|
<el-form-item label="站点"> |
||||||
|
<SelectStaion |
||||||
|
v-if="isComponentReady" |
||||||
|
ref="selectStaionRef" |
||||||
|
:startTime="this.formatDate(this.searchModel.startTime)" |
||||||
|
:endTime="this.formatDate(this.searchModel.endTime)" |
||||||
|
:type="this.type"> |
||||||
|
</SelectStaion> |
||||||
|
</el-form-item> |
||||||
|
<el-form-item> |
||||||
|
<el-button type="primary" @click="getList">查询</el-button> |
||||||
|
</el-form-item> |
||||||
|
<el-form-item> |
||||||
|
<el-button type="primary" @click="exportDate">导出</el-button> |
||||||
|
</el-form-item> |
||||||
|
<!-- <el-form-item>--> |
||||||
|
<!-- <el-button--> |
||||||
|
<!-- type="primary"--> |
||||||
|
<!-- @click="importSoft"--> |
||||||
|
<!-- >导入南方片--> |
||||||
|
<!-- </el-button>--> |
||||||
|
<!-- </el-form-item>--> |
||||||
|
</el-form> |
||||||
|
|
||||||
|
<div class="main-content"> |
||||||
|
<div class="main-title"> |
||||||
|
<div class="table-title">逐时潮水位表</div> |
||||||
|
<div class="table-header"> |
||||||
|
<div class="table-time" style="float: right">单位:水位: m)</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<el-table |
||||||
|
:data="tableData" |
||||||
|
height="500" |
||||||
|
border |
||||||
|
style="width: 100%"> |
||||||
|
<el-table-column label="序号" align="center"> |
||||||
|
<template slot-scope="scope"> |
||||||
|
{{ scope.$index + 1 }} |
||||||
|
</template> |
||||||
|
</el-table-column> |
||||||
|
<el-table-column |
||||||
|
align="center" |
||||||
|
prop="stcd" |
||||||
|
label="站码" |
||||||
|
> |
||||||
|
</el-table-column> |
||||||
|
<el-table-column |
||||||
|
align="center" |
||||||
|
prop="stnm" |
||||||
|
label="站名" |
||||||
|
> |
||||||
|
</el-table-column> |
||||||
|
<el-table-column |
||||||
|
align="center" |
||||||
|
prop="tm" |
||||||
|
label="日期"> |
||||||
|
</el-table-column> |
||||||
|
|
||||||
|
<el-table-column |
||||||
|
align="center" |
||||||
|
prop="tdr" |
||||||
|
label="潮时"> |
||||||
|
</el-table-column> |
||||||
|
|
||||||
|
<el-table-column |
||||||
|
align="center" |
||||||
|
prop="tdz" |
||||||
|
label="潮水位"> |
||||||
|
</el-table-column> |
||||||
|
|
||||||
|
<el-table-column |
||||||
|
align="center" |
||||||
|
prop="tdzrcd" |
||||||
|
label="潮水位注解码"> |
||||||
|
</el-table-column> |
||||||
|
</el-table> |
||||||
|
<el-pagination |
||||||
|
@size-change="handleSizeChange" |
||||||
|
@current-change="handleCurrentChange" |
||||||
|
:current-page="searchModel.pageNum" |
||||||
|
:page-sizes="[15, 30, 50,100]" |
||||||
|
:page-size="searchModel.pageSize" |
||||||
|
layout="total, sizes, prev, pager, next, jumper" |
||||||
|
style="padding: 30px 0; text-align: center;" |
||||||
|
:total="total" |
||||||
|
> |
||||||
|
</el-pagination> |
||||||
|
</div> |
||||||
|
<el-dialog :title="title" :visible.sync="softOpen" width="400px" append-to-body> |
||||||
|
<el-form ref="form" :model="form" :rules="rules" label-width="100px"> |
||||||
|
<el-form-item label="起年"> |
||||||
|
<el-date-picker |
||||||
|
v-model="form.startTime" |
||||||
|
type="datetime" |
||||||
|
placeholder="选择日期" |
||||||
|
> |
||||||
|
</el-date-picker> |
||||||
|
</el-form-item> |
||||||
|
<el-form-item label="截止年"> |
||||||
|
<el-date-picker |
||||||
|
v-model="form.endTime" |
||||||
|
type="datetime" |
||||||
|
placeholder="选择日期" |
||||||
|
> |
||||||
|
</el-date-picker> |
||||||
|
</el-form-item> |
||||||
|
</el-form> |
||||||
|
<div slot="footer" class="dialog-footer"> |
||||||
|
<el-button type="primary" @click="submitForm">确 定</el-button> |
||||||
|
<el-button @click="cancel">取 消</el-button> |
||||||
|
</div> |
||||||
|
</el-dialog> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
|
||||||
|
|
||||||
|
<script> |
||||||
|
import dayZscsApi from "@/api/day/dayZscs"; |
||||||
|
import SelectStaion from "@/components/SelectStaion/index.vue"; |
||||||
|
|
||||||
|
export default { |
||||||
|
components: {SelectStaion}, |
||||||
|
data() { |
||||||
|
return { |
||||||
|
tableData: [], |
||||||
|
total: 0, |
||||||
|
searchModel: { |
||||||
|
startTime: '2014-01-01 00:00:00', |
||||||
|
endTime: '2015-01-01 00:00:00', |
||||||
|
stcd: '', |
||||||
|
stnm: '', |
||||||
|
pageNum: 1, |
||||||
|
pageSize: 15 |
||||||
|
}, |
||||||
|
upload: { |
||||||
|
title: '导入数据', |
||||||
|
open: false |
||||||
|
}, |
||||||
|
|
||||||
|
softOpen: false, |
||||||
|
title: '', |
||||||
|
form: { |
||||||
|
startTime: '', |
||||||
|
endTime: '' |
||||||
|
}, |
||||||
|
// 表单校验 |
||||||
|
rules: { |
||||||
|
startTime: [ |
||||||
|
{required: true, message: '开始时间不能为空', trigger: 'blur'} |
||||||
|
], |
||||||
|
endTime: [ |
||||||
|
{required: true, message: '结束时间不能为空', trigger: 'blur'} |
||||||
|
] |
||||||
|
}, |
||||||
|
isComponentReady: false, |
||||||
|
type:"DayZscs", |
||||||
|
} |
||||||
|
}, |
||||||
|
created() { |
||||||
|
this.getList() |
||||||
|
}, |
||||||
|
mounted() { |
||||||
|
this.$nextTick(() => { |
||||||
|
this.isComponentReady = true; |
||||||
|
}); |
||||||
|
this.$nextTick(() => { |
||||||
|
if (this.$refs.selectStaionRef) { |
||||||
|
this.searchModel.stcd = this.$refs.selectStaionRef.stcds; |
||||||
|
} |
||||||
|
}); |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
formatDate(date) { |
||||||
|
if (date == null) { |
||||||
|
return ''; |
||||||
|
} |
||||||
|
const d = new Date(date); |
||||||
|
if (isNaN(d.getTime())) { |
||||||
|
return ''; |
||||||
|
} else { |
||||||
|
return date |
||||||
|
} |
||||||
|
}, |
||||||
|
|
||||||
|
async getList() { |
||||||
|
this.searchModel.stcd = this.$refs.selectStaionRef?.stcds || ''; |
||||||
|
const startYear = this.$common.formatDate(this.searchModel.startTime) |
||||||
|
const endYear = this.$common.formatDate(this.searchModel.endTime) |
||||||
|
const param = { |
||||||
|
pageNum: this.searchModel.pageNum, |
||||||
|
pageSize: this.searchModel.pageSize, |
||||||
|
startTime: this.formatDate(startYear), |
||||||
|
endTime: this.formatDate(endYear), |
||||||
|
stcd: this.searchModel.stcd, |
||||||
|
stnm: this.searchModel.stnm |
||||||
|
} |
||||||
|
const res = await dayZscsApi.getZscsTableList(param) |
||||||
|
this.tableData = res.data; |
||||||
|
this.total = res.count; |
||||||
|
}, |
||||||
|
handleSizeChange(pageSize) { |
||||||
|
this.searchModel.pageSize = pageSize |
||||||
|
this.getList() |
||||||
|
}, |
||||||
|
handleCurrentChange(pageNum) { |
||||||
|
this.searchModel.pageNum = pageNum |
||||||
|
this.getList() |
||||||
|
}, |
||||||
|
async exportDate() { |
||||||
|
const startYear = this.$common.formatDate(this.searchModel.startTime) |
||||||
|
const endYear = this.$common.formatDate(this.searchModel.endTime) |
||||||
|
const stcd = this.searchModel.stcd || ''; // 处理undefined |
||||||
|
const stnm = this.searchModel.stnm || ''; |
||||||
|
const res = await this.$axiosPost('/report/dayZscs?startTime=' + |
||||||
|
this.formatDate(startYear) + '&endTime=' + this.formatDate(endYear) + |
||||||
|
'&stcd=' + stcd + '&stnm=' + stnm); |
||||||
|
if (res.code === 0) { |
||||||
|
this.$modal.msgSuccess(res.msg) |
||||||
|
} |
||||||
|
// |
||||||
|
// this.download('/report/dayRain?startTime='+ |
||||||
|
// startYear+'&endTime='+endYear+ |
||||||
|
// '&stcd='+this.searchModel.stcd+'&stnm='+this.searchModel.stnm, {}, '日降水表.xls') |
||||||
|
}, |
||||||
|
importSoft() { |
||||||
|
this.reset(); |
||||||
|
this.softOpen = true; |
||||||
|
this.title = "导入数据到南方片"; |
||||||
|
}, |
||||||
|
reset() { |
||||||
|
this.form = { |
||||||
|
startTime: '', |
||||||
|
endTime: '' |
||||||
|
} |
||||||
|
this.resetForm("form"); |
||||||
|
}, |
||||||
|
/** 提交按钮 */ |
||||||
|
submitForm() { |
||||||
|
const startYear = this.$common.formatDate(this.form.startTime) |
||||||
|
const endYear = this.$common.formatDate(this.form.endTime) |
||||||
|
const param = { |
||||||
|
startTime: this.formatDate(startYear), |
||||||
|
endTime: this.formatDate(endYear), |
||||||
|
} |
||||||
|
this.$refs["form"].validate(valid => { |
||||||
|
if (valid) { |
||||||
|
dayRainApi.importDateToSoft(param).then(res => { |
||||||
|
if (res.code === 0) { |
||||||
|
this.$modal.msgSuccess(res.msg) |
||||||
|
this.softOpen = false; |
||||||
|
} |
||||||
|
}) |
||||||
|
} |
||||||
|
}); |
||||||
|
}, |
||||||
|
cancel() { |
||||||
|
this.softOpen = false; |
||||||
|
this.reset(); |
||||||
|
}, |
||||||
|
}, |
||||||
|
} |
||||||
|
</script> |
||||||
|
<style scoped lang="scss"> |
||||||
|
.app-container { |
||||||
|
padding: 20px; |
||||||
|
background: #F2F2F2; |
||||||
|
height: calc(100vh - 100px); |
||||||
|
|
||||||
|
.el-form { |
||||||
|
background: #fff; |
||||||
|
padding: 10px; |
||||||
|
height: 6vh; |
||||||
|
border-radius: 4px; |
||||||
|
box-shadow: 0 0 10px 1px rgba(123, 123, 123, 0.4); |
||||||
|
} |
||||||
|
|
||||||
|
.main-content { |
||||||
|
height: calc(100vh - 150px); |
||||||
|
background: #fff; |
||||||
|
margin-top: 20px; |
||||||
|
padding: 5px; |
||||||
|
border-radius: 4px; |
||||||
|
box-shadow: 0 0 10px 1px rgba(123, 123, 123, 0.4); |
||||||
|
|
||||||
|
.main-title { |
||||||
|
height: 90px; |
||||||
|
|
||||||
|
.table-title { |
||||||
|
font-size: 25px; |
||||||
|
font-weight: bold; |
||||||
|
width: 100%; |
||||||
|
height: 60px; |
||||||
|
text-align: center; |
||||||
|
} |
||||||
|
|
||||||
|
.table-header { |
||||||
|
width: 100%; |
||||||
|
height: 30px; |
||||||
|
line-height: 30px; |
||||||
|
display: inline; |
||||||
|
padding: 0 20px; |
||||||
|
font-size: 14px; |
||||||
|
|
||||||
|
.table-time { |
||||||
|
display: inline; |
||||||
|
float: left; |
||||||
|
margin-left: 20px; |
||||||
|
font-size: 14px; |
||||||
|
color: #606266; |
||||||
|
font-weight: 700; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
:hover::-webkit-scrollbar { |
||||||
|
width: 0; /* 鼠标 hover 时显示滚动条 */ |
||||||
|
} |
||||||
|
} |
||||||
|
</style> |
||||||
@ -0,0 +1,729 @@ |
|||||||
|
<template> |
||||||
|
<div class="app-container"> |
||||||
|
<div class="el-header"> |
||||||
|
<el-form :inline="true" ref="mainForm" |
||||||
|
:model="formData" |
||||||
|
:rules="formRules" |
||||||
|
class="demo-form-inline"> |
||||||
|
<!-- 服务器配置部分 --> |
||||||
|
<el-form-item label="数据服务器IP:" prop="sqlseverIp"> |
||||||
|
<el-input v-model="formData.sqlseverIp"></el-input> |
||||||
|
</el-form-item> |
||||||
|
|
||||||
|
<el-form-item label="登录名" prop="userName"> |
||||||
|
<el-input v-model="formData.userName"></el-input> |
||||||
|
</el-form-item> |
||||||
|
|
||||||
|
<el-form-item label="密码" prop="password"> |
||||||
|
<el-input v-model="formData.password" type="password"></el-input> |
||||||
|
</el-form-item> |
||||||
|
|
||||||
|
<el-form-item label="数据库名称:" prop="dataBase"> |
||||||
|
<el-input v-model="formData.dataBase"></el-input> |
||||||
|
</el-form-item> |
||||||
|
|
||||||
|
<el-form-item> |
||||||
|
<el-button type="primary" @click="testConnection">测试连接</el-button> |
||||||
|
</el-form-item> |
||||||
|
|
||||||
|
|
||||||
|
</el-form> |
||||||
|
</div> |
||||||
|
<div class="el-left"> |
||||||
|
<div class="table-title">南方片数据交互</div> |
||||||
|
<el-form> |
||||||
|
<el-form-item style="margin-left: 15%" label="交互类型:" prop="softTypeValue"> |
||||||
|
<el-select style="margin-left: 5%" v-model="formData.softTypeValue" clearable placeholder="请选择交互类型"> |
||||||
|
<el-option |
||||||
|
v-for="item in softType" |
||||||
|
:key="item.value" |
||||||
|
:label="item.label" |
||||||
|
:value="item.value"> |
||||||
|
</el-option> |
||||||
|
</el-select> |
||||||
|
</el-form-item> |
||||||
|
<el-form-item style="margin-left: 15%" label="开始时间:" prop="startTime"> |
||||||
|
<el-date-picker |
||||||
|
style="margin-left: 5%" |
||||||
|
v-model="formData.startTime" |
||||||
|
type="month" |
||||||
|
placeholder="选择日期"> |
||||||
|
</el-date-picker> |
||||||
|
</el-form-item> |
||||||
|
|
||||||
|
<el-form-item style="margin-left: 15%" label="结束时间:" prop="endTime"> |
||||||
|
<el-date-picker |
||||||
|
style="margin-left: 5%" |
||||||
|
v-model="formData.endTime" |
||||||
|
type="month" |
||||||
|
placeholder="选择日期"> |
||||||
|
</el-date-picker> |
||||||
|
</el-form-item> |
||||||
|
|
||||||
|
<el-form-item label="类型:" style="margin-left: 15%" prop="stationTypeValue"> |
||||||
|
<el-select style="margin-left: 12%" v-model="formData.stationTypeValue" clearable placeholder="请选择类型"> |
||||||
|
<el-option |
||||||
|
v-for="item in stationType" |
||||||
|
:key="item.value" |
||||||
|
:label="item.label" |
||||||
|
:value="item.value"> |
||||||
|
</el-option> |
||||||
|
</el-select> |
||||||
|
</el-form-item> |
||||||
|
|
||||||
|
<el-form-item> |
||||||
|
<el-button style="float: right" type="primary" @click="submitForm">提交</el-button> |
||||||
|
</el-form-item> |
||||||
|
</el-form> |
||||||
|
</div> |
||||||
|
<div class="el-middle"> |
||||||
|
<div class="table-title">可选测站</div> |
||||||
|
<div style="width: 60%; margin-bottom: 5px; margin-left: 22%"> |
||||||
|
<el-input placeholder="请输入站点名称" v-model="filterText" clearable /> |
||||||
|
</div> |
||||||
|
<!-- 新增滚动容器 --> |
||||||
|
<div style="margin-left: 20%" class="tree-scroll-container"> |
||||||
|
<el-tree |
||||||
|
ref="tree" |
||||||
|
:data="options" |
||||||
|
:props="props" |
||||||
|
node-key="value" |
||||||
|
:filter-node-method="filterNode" |
||||||
|
@check-change="handleCheckChange" |
||||||
|
:highlight-current="true" |
||||||
|
default-expand-all |
||||||
|
show-checkbox |
||||||
|
/> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div class="el-main"> |
||||||
|
<el-table |
||||||
|
:data="tableData" |
||||||
|
ref="treeTable" |
||||||
|
:row-class-name="getRowClassName" |
||||||
|
row-key="id" |
||||||
|
:tree-props="{children: 'children'}" |
||||||
|
@select="handleSelect" |
||||||
|
@select-all="handleSelectAll" |
||||||
|
default-expand-all |
||||||
|
border |
||||||
|
> |
||||||
|
<!-- 多选列 --> |
||||||
|
<el-table-column |
||||||
|
type="selection" |
||||||
|
width="55" |
||||||
|
:reserve-selection="true"> |
||||||
|
</el-table-column> |
||||||
|
|
||||||
|
<!-- 树形内容列 --> |
||||||
|
<el-table-column label="所有表项"> |
||||||
|
<template slot-scope="{ row }"> |
||||||
|
<span :style="{ paddingLeft: (row.level * 18) + 'px' }"> |
||||||
|
{{ row.label }} |
||||||
|
</span> |
||||||
|
</template> |
||||||
|
</el-table-column> |
||||||
|
</el-table> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
import {treeselect} from "@/api/system/dept"; |
||||||
|
import Treeselect from "@riophae/vue-treeselect"; |
||||||
|
import "@riophae/vue-treeselect/dist/vue-treeselect.css"; |
||||||
|
import stationApi from "@/api/basic/station"; |
||||||
|
import dayRainApi from "@/api/day/dayRain"; |
||||||
|
|
||||||
|
|
||||||
|
export default { |
||||||
|
data() { |
||||||
|
return { |
||||||
|
formData: { |
||||||
|
sqlseverIp: '', |
||||||
|
userName: '', |
||||||
|
password: '', |
||||||
|
dataBase: '', |
||||||
|
softTypeValue: '', |
||||||
|
startTime: '', |
||||||
|
endTime: '', |
||||||
|
stationTypeValue: '', |
||||||
|
selectedValues: [] |
||||||
|
}, |
||||||
|
// 表单验证规则 |
||||||
|
formRules: { |
||||||
|
sqlseverIp: [ |
||||||
|
{required: true, message: '请输入数据服务器IP', trigger: 'blur'} |
||||||
|
], |
||||||
|
userName: [ |
||||||
|
{required: true, message: '请输入登录名', trigger: 'blur'} |
||||||
|
], |
||||||
|
password: [ |
||||||
|
{required: true, message: '请输入密码', trigger: 'blur'} |
||||||
|
], |
||||||
|
dataBase: [ |
||||||
|
{required: true, message: '请输入数据库名称', trigger: 'blur'} |
||||||
|
], |
||||||
|
softTypeValue: [ |
||||||
|
{required: true, message: '请选择交互类型', trigger: 'change'} |
||||||
|
], |
||||||
|
startTime: [ |
||||||
|
{required: true, message: '请选择开始时间', trigger: 'change'} |
||||||
|
], |
||||||
|
endTime: [ |
||||||
|
{required: true, message: '请选择结束时间', trigger: 'change'} |
||||||
|
], |
||||||
|
stationTypeValue: [ |
||||||
|
{required: true, message: '请选择类型', trigger: 'change'} |
||||||
|
], |
||||||
|
selectedValues: [ |
||||||
|
{required: true, message: '请选择站点', trigger: 'change'} |
||||||
|
] |
||||||
|
}, |
||||||
|
isAllSelected: false, |
||||||
|
tableData: [ |
||||||
|
{ |
||||||
|
id: 1, |
||||||
|
label: '基本信息', |
||||||
|
parentId: null, |
||||||
|
level: 0, |
||||||
|
checked: false, |
||||||
|
indeterminate: false, // 添加半选状态标识 |
||||||
|
children: [ |
||||||
|
{id: 11, parentId: 1, label: '测站信息一览表', level: 1, checked: false}, |
||||||
|
] |
||||||
|
}, |
||||||
|
{ |
||||||
|
id: 2, |
||||||
|
label: '雨量资料', |
||||||
|
level: 0, |
||||||
|
parentId: null, |
||||||
|
checked: false, |
||||||
|
indeterminate: false, // 添加半选状态标识 |
||||||
|
children: [ |
||||||
|
{id: 21, parentId: 2, label: '逐日降水表', level: 1, checked: false}, |
||||||
|
{id: 22, parentId: 2, label: '各时段最大降水表(1)', level: 1, checked: false}, |
||||||
|
{id: 23, parentId: 2, label: '各时段最大降水表(2)', level: 1, checked: false}, |
||||||
|
{id: 24, parentId: 2, label: '降水量摘录表', level: 1, checked: false}, |
||||||
|
] |
||||||
|
}, |
||||||
|
{ |
||||||
|
id: 3, |
||||||
|
label: '水位资料', |
||||||
|
level: 0, |
||||||
|
parentId: null, |
||||||
|
checked: false, |
||||||
|
indeterminate: false, // 添加半选状态标识 |
||||||
|
children: [ |
||||||
|
{id: 31, parentId: 3, label: '逐日平均水位表', level: 1, checked: false}, |
||||||
|
{id: 32, parentId: 3, label: '水闸洪水水文要素摘录表', level: 1, checked: false}, |
||||||
|
{id: 33, parentId: 4, label: '逐潮高低潮位表', level: 1, checked: false}, |
||||||
|
{id: 34, parentId: 4, label: '潮位月年统计表', level: 1, checked: false}, |
||||||
|
] |
||||||
|
}, |
||||||
|
{ |
||||||
|
id: 5, |
||||||
|
label: '流量资料', |
||||||
|
level: 0, |
||||||
|
parentId: null, |
||||||
|
checked: false, |
||||||
|
indeterminate: false, // 添加半选状态标识 |
||||||
|
children: [ |
||||||
|
{id: 51, parentId: 5, label: '逐日平均流量表', level: 1, checked: false}, |
||||||
|
] |
||||||
|
}, |
||||||
|
], |
||||||
|
softType: [{ |
||||||
|
value: '0', |
||||||
|
label: '导出数据到云服务数据库' |
||||||
|
}, { |
||||||
|
value: '1', |
||||||
|
label: '导入数据到南方片数据库' |
||||||
|
}], |
||||||
|
softTypeValue: '', |
||||||
|
stationType: [ |
||||||
|
{ |
||||||
|
value: 'P', |
||||||
|
label: '雨量站' |
||||||
|
}, |
||||||
|
{ |
||||||
|
value: 'H', |
||||||
|
label: '水文站' |
||||||
|
}, |
||||||
|
{ |
||||||
|
value: 'Q', |
||||||
|
label: '水位站' |
||||||
|
} |
||||||
|
], |
||||||
|
stationTypeValue: '', |
||||||
|
props: { |
||||||
|
multiple: true, |
||||||
|
checkStrictly: true,// 允许独立选择节点 |
||||||
|
value: 'value', // 确保与数据源字段名一致 |
||||||
|
label: 'label', |
||||||
|
disabled: 'disabled' |
||||||
|
}, |
||||||
|
componentKey: 0, |
||||||
|
options: [], |
||||||
|
stcds: '', |
||||||
|
filterText:"", |
||||||
|
selectedValues: [], // 绑定选中值 |
||||||
|
// 遮罩层 |
||||||
|
loading: true, |
||||||
|
// 显示搜索条件 |
||||||
|
showSearch: true, |
||||||
|
// 总条数 |
||||||
|
total: 0, |
||||||
|
// 弹出层标题 |
||||||
|
title: "", |
||||||
|
// 表单参数 |
||||||
|
form: {}, |
||||||
|
// 表单校验 |
||||||
|
rules: {}, |
||||||
|
dateYear: [], |
||||||
|
deptOptions: undefined, |
||||||
|
isHandlingCheckChange: false |
||||||
|
}; |
||||||
|
}, |
||||||
|
created() { |
||||||
|
}, |
||||||
|
watch: { |
||||||
|
filterText(val) { |
||||||
|
this.$refs['tree'].filter(val); |
||||||
|
}, |
||||||
|
'formData.startTime': { |
||||||
|
handler(newVal) { |
||||||
|
this.checkAndFetchData(newVal, this.formData.endTime, this.formData.stationTypeValue); |
||||||
|
}, |
||||||
|
immediate: true // 初始立即执行 |
||||||
|
}, |
||||||
|
'formData.endTime'(newVal) { |
||||||
|
this.checkAndFetchData(this.formData.startTime, newVal, this.formData.stationTypeValue); |
||||||
|
}, |
||||||
|
'formData.stationTypeValue'(newVal) { |
||||||
|
this.checkAndFetchData(this.formData.startTime, this.formData.endTime, newVal); |
||||||
|
} |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
filterNode(value, data) { |
||||||
|
if (!value) return true; |
||||||
|
return data.label.indexOf(value) !== -1; |
||||||
|
}, |
||||||
|
handleCheckChange(data, checked, indeterminate) { |
||||||
|
// 防止递归调用 |
||||||
|
if (this.isHandlingCheckChange) return; |
||||||
|
this.isHandlingCheckChange = true; |
||||||
|
|
||||||
|
try { |
||||||
|
// 获取当前所有选中的节点（包括非叶子节点） |
||||||
|
const checkedKeys = this.$refs.tree.getCheckedKeys(); |
||||||
|
|
||||||
|
// 情况1：当前选中了"all"节点 |
||||||
|
if (data.value === 'all' && checked) { |
||||||
|
// 只保留"all"节点 |
||||||
|
this.$refs.tree.setCheckedKeys(['all']); |
||||||
|
this.stcds = 'all'; |
||||||
|
} |
||||||
|
// 情况2：当前选中了其他节点（非all） |
||||||
|
else if (checked && data.value !== 'all') { |
||||||
|
// 如果已存在"all"节点，先移除 |
||||||
|
if (checkedKeys.includes('all')) { |
||||||
|
const newCheckedKeys = checkedKeys.filter(key => key !== 'all'); |
||||||
|
this.$refs.tree.setCheckedKeys(newCheckedKeys); |
||||||
|
this.stcds = newCheckedKeys.join(","); |
||||||
|
} else { |
||||||
|
// 直接更新为当前选中的节点 |
||||||
|
this.stcds = this.$refs.tree.getCheckedKeys(true).join(","); |
||||||
|
} |
||||||
|
} |
||||||
|
// 情况3：取消选中操作 |
||||||
|
else { |
||||||
|
this.stcds = this.$refs.tree.getCheckedKeys(true).join(","); |
||||||
|
} |
||||||
|
} finally { |
||||||
|
this.isHandlingCheckChange = false; |
||||||
|
} |
||||||
|
}, |
||||||
|
getRowClassName({row}) { |
||||||
|
if (row.indeterminate) { |
||||||
|
return 'indeterminate-row'; // 应用半选样式 |
||||||
|
} |
||||||
|
return ''; |
||||||
|
}, |
||||||
|
// 查找父节点 |
||||||
|
findParent(parentId) { |
||||||
|
if (!parentId) return null; |
||||||
|
|
||||||
|
// 广度优先搜索父节点 |
||||||
|
const queue = [...this.tableData]; |
||||||
|
while (queue.length) { |
||||||
|
const node = queue.shift(); |
||||||
|
if (node.id === parentId) return node; |
||||||
|
if (node.children) queue.push(...node.children); |
||||||
|
} |
||||||
|
return null; |
||||||
|
}, |
||||||
|
|
||||||
|
// 1. 单行选择处理（父子联动） |
||||||
|
handleSelect(selection, row) { |
||||||
|
if (row.indeterminate && !selection.includes(row)) { |
||||||
|
this.clearIndeterminateState(row); // 新增方法 |
||||||
|
} else { |
||||||
|
row.checked = selection.includes(row); |
||||||
|
|
||||||
|
// 处理子节点 |
||||||
|
if (row.children) { |
||||||
|
this.toggleChildren(row, row.checked); |
||||||
|
} |
||||||
|
} |
||||||
|
// 更新父节点状态 |
||||||
|
this.updateParentStatus(row); |
||||||
|
}, |
||||||
|
// 新增：清除半选节点及子节点状态 |
||||||
|
clearIndeterminateState(node) { |
||||||
|
// 重置当前节点状态 |
||||||
|
node.checked = false; |
||||||
|
node.indeterminate = false; |
||||||
|
this.$refs.treeTable.toggleRowSelection(node, false); |
||||||
|
|
||||||
|
// 递归清除子节点 |
||||||
|
if (node.children) { |
||||||
|
node.children.forEach(child => { |
||||||
|
this.clearIndeterminateState(child); |
||||||
|
}); |
||||||
|
} |
||||||
|
}, |
||||||
|
// 2. 递归设置子节点状态 |
||||||
|
toggleChildren(node, isSelected) { |
||||||
|
if (node.children) { |
||||||
|
node.children.forEach(child => { |
||||||
|
// 设置子节点选中状态 |
||||||
|
this.$refs.treeTable.toggleRowSelection(child, isSelected); |
||||||
|
child.checked = isSelected; |
||||||
|
|
||||||
|
// 递归处理孙子节点 |
||||||
|
if (child.children) this.toggleChildren(child, isSelected); |
||||||
|
}); |
||||||
|
} |
||||||
|
}, |
||||||
|
|
||||||
|
// 3. 更新父节点状态（关键修复） |
||||||
|
// 在 updateParentStatus 中强化半选处理 |
||||||
|
updateParentStatus(childNode) { |
||||||
|
const parent = this.findParent(childNode.parentId); |
||||||
|
if (!parent) return; |
||||||
|
|
||||||
|
const checkedCount = parent.children.filter(c => c.checked).length; |
||||||
|
const indeterminateCount = parent.children.filter(c => c.indeterminate).length; // 新增 |
||||||
|
|
||||||
|
// 强化半选判断逻辑 |
||||||
|
parent.checked = checkedCount === parent.children.length; |
||||||
|
parent.indeterminate = |
||||||
|
(checkedCount > 0 && checkedCount < parent.children.length) || |
||||||
|
indeterminateCount > 0; // 关键修复[7](@ref) |
||||||
|
|
||||||
|
// 更新UI |
||||||
|
this.$refs.treeTable.toggleRowSelection(parent, parent.checked); |
||||||
|
this.$set(parent, 'indeterminate', parent.indeterminate); |
||||||
|
|
||||||
|
// 半选状态特殊处理 |
||||||
|
if (parent.indeterminate && !parent.checked) { |
||||||
|
// 强制清除可能残留的半选状态 |
||||||
|
parent.children.forEach(child => { |
||||||
|
if (child.indeterminate) { |
||||||
|
this.clearIndeterminateState(child); |
||||||
|
} |
||||||
|
}); |
||||||
|
} |
||||||
|
|
||||||
|
}, |
||||||
|
|
||||||
|
// 4. 全选/全不选处理（修复版） |
||||||
|
handleSelectAll(selection) { |
||||||
|
const isAllSelected = selection.length > 0; |
||||||
|
|
||||||
|
// 深度递归设置所有节点状态 |
||||||
|
const setAllSelection = (nodes, status) => { |
||||||
|
nodes.forEach(node => { |
||||||
|
// 设置当前节点状态 |
||||||
|
node.checked = status; |
||||||
|
node.indeterminate = false; // 清除半选状态 |
||||||
|
this.$refs.treeTable.toggleRowSelection(node, status); |
||||||
|
|
||||||
|
// 递归处理子节点 |
||||||
|
if (node.children && node.children.length) { |
||||||
|
setAllSelection(node.children, status); |
||||||
|
} |
||||||
|
}); |
||||||
|
}; |
||||||
|
|
||||||
|
setAllSelection(this.tableData, isAllSelected); |
||||||
|
|
||||||
|
// 特殊处理：取消全选时强制清空选中项 |
||||||
|
if (!isAllSelected) { |
||||||
|
this.$nextTick(() => { |
||||||
|
this.$refs.treeTable.clearSelection(); // 关键修复[1,3](@ref) |
||||||
|
}); |
||||||
|
} |
||||||
|
}, |
||||||
|
formatDateToYearMonth(date) { |
||||||
|
if (date == null) { |
||||||
|
return ''; |
||||||
|
} |
||||||
|
const d = new Date(date); |
||||||
|
if (isNaN(d.getTime())) { |
||||||
|
return ''; |
||||||
|
} |
||||||
|
const year = d.getFullYear(); |
||||||
|
const month = (d.getMonth() + 1).toString().padStart(2, '0'); |
||||||
|
return `${year}-${month}`; |
||||||
|
}, |
||||||
|
// 检查是否满足查询条件 |
||||||
|
checkAndFetchData(start, end, stationTypeValue) { |
||||||
|
if (start && end && stationTypeValue) { |
||||||
|
this.componentKey++; |
||||||
|
this.options = [] |
||||||
|
this.formData.selectedValues = [] |
||||||
|
this.getStaionList(start, end, stationTypeValue); |
||||||
|
|
||||||
|
} |
||||||
|
}, |
||||||
|
async testConnection() { |
||||||
|
const res = await stationApi.testSqlConnection(this.formData) |
||||||
|
if (res.code === 0) { |
||||||
|
this.$modal.msgSuccess(res.data) |
||||||
|
} else { |
||||||
|
this.$modal.msgError("链接失败") |
||||||
|
} |
||||||
|
}, |
||||||
|
async getStaionList(start, end, type) { |
||||||
|
const res = await stationApi.getStnmAndStcdByType(this.formatDateToYearMonth(start), |
||||||
|
this.formatDateToYearMonth(end), type); |
||||||
|
// 新增数据处理逻辑 |
||||||
|
const processTree = (nodes) => { |
||||||
|
return nodes.map(node => { |
||||||
|
const hasChildren = node.children && node.children.length > 0; |
||||||
|
return { |
||||||
|
...node, |
||||||
|
disabled: hasChildren, // 有子节点的父类自动禁用 |
||||||
|
children: hasChildren ? processTree(node.children) : null |
||||||
|
}; |
||||||
|
}); |
||||||
|
}; |
||||||
|
this.options = processTree([res.data]); // 注意保持数组结构 |
||||||
|
}, |
||||||
|
|
||||||
|
|
||||||
|
submitForm() { |
||||||
|
this.$refs.mainForm.validate(valid => { |
||||||
|
if (valid) { |
||||||
|
// 所有验证通过，执行提交操作 |
||||||
|
this.executeSubmit(this.formData); |
||||||
|
} else { |
||||||
|
// 验证失败，显示错误提示 |
||||||
|
this.$message.error('请填写所有必填项'); |
||||||
|
return false; |
||||||
|
} |
||||||
|
}); |
||||||
|
// this.executeSubmit(this.formData); |
||||||
|
}, |
||||||
|
getFilteredSelection() { |
||||||
|
const allSelected = this.$refs.treeTable.selection; // 获取所有选中节点[1](@ref) |
||||||
|
const result = []; |
||||||
|
|
||||||
|
// 遍历选中节点，按规则过滤 |
||||||
|
allSelected.forEach(node => { |
||||||
|
const isParent = node.children && node.children.length > 0; |
||||||
|
|
||||||
|
// 规则1：父节点被选中时，忽略其所有子节点 |
||||||
|
if (isParent && allSelected.some(n => n.parentId === node.id)) { |
||||||
|
return; // 跳过子节点 |
||||||
|
} |
||||||
|
|
||||||
|
// 规则2：子节点被选中时保留 |
||||||
|
result.push(node); |
||||||
|
}); |
||||||
|
|
||||||
|
return result; |
||||||
|
}, |
||||||
|
executeSubmit(formData) { |
||||||
|
const filteredData = this.getFilteredSelection(); |
||||||
|
const ids = filteredData.length |
||||||
|
? filteredData.map(item => item.id).join(',') |
||||||
|
: ''; |
||||||
|
const params = { |
||||||
|
sqlseverIp: this.formData.sqlseverIp, |
||||||
|
userName: this.formData.userName, |
||||||
|
password: this.formData.password, |
||||||
|
dataBase: this.formData.dataBase, |
||||||
|
startTime: this.formatDateToYearMonth(this.formData.startTime), |
||||||
|
endTime: this.formatDateToYearMonth(this.formData.endTime), |
||||||
|
softTypeValue: this.formData.softTypeValue, |
||||||
|
stationTypeValue: this.formData.stationTypeValue, |
||||||
|
stcds: this.stcds, |
||||||
|
ids: ids |
||||||
|
} |
||||||
|
stationApi.importDateToSoftOrExportSoft(params).then(res => { |
||||||
|
if (res.code === 0) { |
||||||
|
this.$modal.msgSuccess(res.msg); |
||||||
|
} else { |
||||||
|
this.$modal.msgError(res.msg); |
||||||
|
} |
||||||
|
}); |
||||||
|
}, |
||||||
|
// 取消按钮 |
||||||
|
cancel() { |
||||||
|
this.open = false; |
||||||
|
this.softOpen = false; |
||||||
|
this.reset(); |
||||||
|
}, |
||||||
|
// 表单重置 |
||||||
|
reset() { |
||||||
|
this.form = { |
||||||
|
startTime: '', |
||||||
|
endTime: '' |
||||||
|
} |
||||||
|
this.resetForm("form"); |
||||||
|
}, |
||||||
|
/** 搜索按钮操作 */ |
||||||
|
handleQuery() { |
||||||
|
this.queryParams.page = 1; |
||||||
|
this.getList(); |
||||||
|
}, |
||||||
|
/** 重置按钮操作 */ |
||||||
|
resetQuery() { |
||||||
|
this.resetForm("queryForm"); |
||||||
|
this.handleQuery(); |
||||||
|
}, |
||||||
|
}, |
||||||
|
mounted() { |
||||||
|
} |
||||||
|
}; |
||||||
|
</script> |
||||||
|
<style scoped lang="scss"> |
||||||
|
.app-container { |
||||||
|
background: #F2F2F2; |
||||||
|
|
||||||
|
.el-header { |
||||||
|
border-radius: 4px; |
||||||
|
background: #FFFFFF; |
||||||
|
color: #333; |
||||||
|
padding: 10px; |
||||||
|
height: 55px; |
||||||
|
box-shadow: 0 0 10px 1px rgba(123, 123, 123, 0.4); |
||||||
|
} |
||||||
|
|
||||||
|
//.el-header { |
||||||
|
// border-radius: 4px; |
||||||
|
// background: #FFFFFF; |
||||||
|
// color: #333; |
||||||
|
// padding: 10px; |
||||||
|
// height: 100px; |
||||||
|
// box-shadow: 0 0 10px 1px rgba(123, 123, 123, 0.4); |
||||||
|
//} |
||||||
|
|
||||||
|
|
||||||
|
.el-middle { |
||||||
|
.table-title{ |
||||||
|
font-size: 25px; |
||||||
|
font-weight: bold; |
||||||
|
width: 100%; |
||||||
|
height: 60px; |
||||||
|
// line-height: 30px; |
||||||
|
text-align: center; |
||||||
|
} |
||||||
|
border-radius: 4px; |
||||||
|
color: #333; |
||||||
|
overflow: hidden; /* 改为允许滚动条 */ |
||||||
|
background: #FFFFFF; |
||||||
|
text-align: center; |
||||||
|
height: calc(95vh - 120px); |
||||||
|
padding: 5px !important; |
||||||
|
float: left; |
||||||
|
width: 30%; |
||||||
|
margin-left: 20px; |
||||||
|
margin-top: 20px; |
||||||
|
padding-bottom: 15px !important; |
||||||
|
box-shadow: 0 0 10px 1px rgba(123, 123, 123, 0.4); |
||||||
|
/* 专用滚动容器样式 */ |
||||||
|
.tree-scroll-container { |
||||||
|
height: calc(100% - 40px); /* 减去输入框高度 */ |
||||||
|
overflow: auto; /* 双向滚动 */ |
||||||
|
} |
||||||
|
/* 修复横向滚动 */ |
||||||
|
.tree-scroll-container .el-tree { |
||||||
|
min-width: 100%; |
||||||
|
} |
||||||
|
.el-table .el-checkbox__input.is-indeterminate .el-checkbox__inner { |
||||||
|
background-color: #409EFF; |
||||||
|
border-color: #409EFF; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.el-left { |
||||||
|
.table-title{ |
||||||
|
font-size: 25px; |
||||||
|
font-weight: bold; |
||||||
|
width: 100%; |
||||||
|
height: 60px; |
||||||
|
// line-height: 30px; |
||||||
|
text-align: center; |
||||||
|
} |
||||||
|
border-radius: 4px; |
||||||
|
color: #333; |
||||||
|
background: #FFFFFF; |
||||||
|
text-align: center; |
||||||
|
height: calc(95vh - 120px); |
||||||
|
padding: 5px !important; |
||||||
|
float: left; |
||||||
|
width: 25%; |
||||||
|
margin-top: 20px; |
||||||
|
padding-bottom: 15px !important; |
||||||
|
box-shadow: 0 0 10px 1px rgba(123, 123, 123, 0.4); |
||||||
|
|
||||||
|
.el-table .el-checkbox__input.is-indeterminate .el-checkbox__inner { |
||||||
|
background-color: #409EFF; |
||||||
|
border-color: #409EFF; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.el-main { |
||||||
|
border-radius: 4px; |
||||||
|
color: #333; |
||||||
|
background: #FFFFFF; |
||||||
|
text-align: center; |
||||||
|
height: calc(95vh - 120px); |
||||||
|
padding: 5px !important; |
||||||
|
float: right; |
||||||
|
width: 43%; |
||||||
|
margin-top: 20px; |
||||||
|
padding-bottom: 15px !important; |
||||||
|
box-shadow: 0 0 10px 1px rgba(123, 123, 123, 0.4); |
||||||
|
|
||||||
|
.el-table .el-checkbox__input.is-indeterminate .el-checkbox__inner { |
||||||
|
background-color: #409EFF; |
||||||
|
border-color: #409EFF; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
</style> |
||||||
|
<!-- 在组件中添加CSS样式 --> |
||||||
|
<style> |
||||||
|
/* 半选状态样式 */ |
||||||
|
.el-table .indeterminate-row .el-checkbox__inner { |
||||||
|
background-color: #409EFF; |
||||||
|
border-color: #409EFF; |
||||||
|
} |
||||||
|
|
||||||
|
.el-table .indeterminate-row .el-checkbox__inner::after { |
||||||
|
content: ""; |
||||||
|
position: absolute; |
||||||
|
display: block; |
||||||
|
background-color: white; |
||||||
|
height: 2px; |
||||||
|
width: 55%; |
||||||
|
top: 50%; |
||||||
|
left: 20%; |
||||||
|
transform: translateY(-50%); |
||||||
|
} |
||||||
|
</style> |
||||||
Loading…
Reference in new issue